/*
Theme Name: 2idesign – 2011 Child Theme
Theme URI: https://wordpress.org/themes/twentyeleven/
Author: 2idesign Ltd
Author URI: https://www.2idesign.co.uk/
Description: The 2011 theme for WordPress is sophisticated, lightweight, and adaptable. Make it yours with a custom menu, header image, and background -- then go further with available theme options for light or dark color scheme, custom link colors, and three layout choices. Twenty Eleven comes equipped with a Showcase page template that transforms your front page into a showcase to show off your best content, widget support galore (sidebar, three footer areas, and a Showcase page widget area), and a custom "Ephemera" widget to display your Aside, Link, Quote, or Status posts. Included are styles for print and for the admin editor, support for featured images (as custom header images on posts and pages and as large images on featured "sticky" posts), and special styles for six different post formats.
Version: 2.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: dark, light, white, black, gray, one-column, two-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-image-header, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready
Text Domain: twentyeleven
*/

/* Reset default browser CSS. Based on work by Eric Meyer.
-------------------------------------------------------------- */

@font-face {
    font-family: Bariol-Regular;
    src: url(/SuperCapacitor/themes/2idesign/fonts/bariol_regular.eot);
} 

@font-face {
    font-family: Bariol-Regular;
    src: url(/SuperCapacitor/themes/2idesign/fonts/Bariol_Regular.otf);
} 

@font-face {
    font-family: Bariol-Bold;
    src: url(/SuperCapacitor/themes/2idesign/fonts/bariol_bold.eot);
}

@font-face {
    font-family: Bariol-Bold;
    src: url(/SuperCapacitor/themes/2idesign/fonts/Bariol_Bold.otf);
}



html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend {
	border: 0;
	font-family: inherit;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}

:focus {/* remember to define focus styles! */
	outline: 0;
}

body {
	font-weight: normal; 
	color: #272f41;
	font-family: Bariol-Regular, 'Lato', sans-serif;
}

p {
	margin: 20px 0 0;
	padding: 0;
	font-size: 22px;
	line-height: 140%;
	font-family: Bariol-Regular, 'Lato', sans-serif;
}

a {
	text-decoration: none;
	color: inherit;
}

h1 {
	font-size: 100px;
	line-height: 110%;
	font-weight: normal;
	margin: 0;
	padding: 0;
	font-family: Bariol-Bold, 'Lato', sans-serif;
}
 
h2 {
	font-size: 60px;
	line-height: 110%;
	font-family: Bariol-Bold, 'Lato', sans-serif;
	margin: 0;
	padding: 0 0 40px;
}

h3 {
	font-size: 48px;
	line-height: 100%;
	font-family: Bariol-Bold, 'Lato', sans-serif;
	margin: 0;
	padding: 0 0 40px;
}

h4 {
	font-size: 34px;
	line-height: 110%;
	font-family: Bariol-Bold, 'Lato', sans-serif;
	margin: 0;
	padding: 0 0 10px;
	color: #FF3C00;
}

strong {
	font-family: Bariol-Bold, 'Lato', sans-serif;
	font-weight: normal;
}

sup {
    vertical-align: super;
    font-size: 18px;
}

.hideme {
	opacity: 0;
	padding-top: 60px;
}

.orange-bright {
	color: #FF3C00;
}

.orange {
	color: #F90;
}






/* Structure
----------------------------------------------- */

#wrapper {
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 0 0%;
}

#header {
	height: 100px; 
	width: 100%;
	transition-property: all;
	transition-duration: .40s;
	transition-timing-function: ease-in-out;
	background-color: #FFF;
	position: fixed;
	z-index: 666666; 
}

#fixie {
	height: 100px;
	width: 80%;
	transition-property: all;
	transition-duration: .40s;
	transition-timing-function: ease-in-out;
	margin: 0 auto;
	max-width: 1600px;
}

#logo {
	height: 100px;
	width: 400px;
	float: left;
	background: url(/SuperCapacitor/uploads/2016/11/SuperCapacitor-Material-Logo.png) no-repeat;
	background-position: left center;
	background-size:  auto 70px;
}

#content {
	background-color: #FFF;
	width: 100%;
	float: left;
	height: auto;
	position: absolute;
	z-index: 1;
}





#image-area {
	background: url(/SuperCapacitor/uploads/2016/11/SuperCapacitor-Material-Home-01.jpg) no-repeat;
	background-position: center;
	height: 70vh;
	width: 100%;
	display: block;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	margin-top: 0;
	-webkit-backface-visibility: hidden;
}


#caption {
	height: 70vh;
	position: absolute;
	display: table;
	width: 80%;
	margin: 0 auto;
	text-align: center;
	padding: 0 10%;
	top: 0;
}

#caption h1 {
	display: table-cell;
	vertical-align: middle;
	color: #FFF;
	font-family: Bariol-Bold, 'Lato', sans-serif;
	font-weight: normal;
	opacity: 1;
	transition-property: all;
	transition-duration: .80s;
	transition-timing-function: ease-in-out;
	padding: 0;
}




#panel {
	background-color: #FFF;
	padding: 180px 0;
	width: 100%;
	text-align: left;
	float: left;
}

#video {
	background-color: #e2e3e6;
	padding: 60px 0;
	width: 100%;
	text-align: left;
	float: left;
}

#technology {
	background-color: #e2e3e6;
	padding: 180px 0;
	width: 100%;
	text-align: left;
	float: left;
}

#technology ul {
	width: 40%;
	margin-top: 40px;
	display: inline-block;
	vertical-align: top;
}

#technology ul li {
	list-style: none;
	font-size: 22px;
	line-height: 120%;
}

#research {
	background-color: #FFF;
	padding: 180px 0;
	width: 100%;
	text-align: left;
	float: left;
}

#research ol li {
	font-size: 16px;
	list-style-position: inside;
}

#about {
	background-color: #e2e3e6;
	padding: 180px 0;
	width: 100%;
	text-align: left; 
	float: left;
}

#press {
	background-color: #e2e3e6;
	padding: 180px 0;
	width: 100%;
	text-align: left; 
	float: left;
}

#excecutives {
	background-color: #FFF;
	padding: 180px 0;
	width: 100%;
	text-align: left; 
	float: left;
}

#excecutives ul {
	width: 28%;
	margin-top: 40px;
	padding: 0 2%;
	display: inline-block;
	vertical-align: top;
}

#excecutives ul li {
	list-style: none;
	font-size: 20px;
	line-height: 120%;
}

#excecutives ul li h4 {
	padding: 0;
	color: #272f41;
}

#excecutives ul li h5 {
	padding: 0 0 10px;
	color: #FF3C00;
	font-size: 20px;
}

#news {
	background-color: #272f41;
	color: #FFF;
	padding: 180px 0;
	width: 100%;
	text-align: left;
	float: left;
}

#news h4 {
	padding: 0 0 60px;
	color: #F90;
}

#news h3 {
	padding: 40px 0 10px;
	color: #F90;
	font-size: 28px;
}

#news p img {
	width: 80%;
	height: auto;
	margin: 20px 10%;
}

#news img {
	width: 60px;
	height: auto;
	margin-top: 40px;
	text-align: center;
}

#news .eighty {
	width: 80%;
	margin: 0 auto;
	max-width: 1100px;
}

#news p {
	font-size: 20px;
}

#news ul {
	padding: 0 14px;
	display: inline-block;
	vertical-align: top;
}

#news ul li {
	font-size: 20px;
	padding: 10px 0;
}


#contact {
	background-color: #FFF;
	padding: 180px 0;
	width: 100%;
	text-align: left;
	float: left;
}

#contact ul {
	width: 28%;
	margin-top: 40px;
	padding: 0 2%;
	display: inline-block;
	vertical-align: top;
}

#contact ul li {
	list-style: none;
	font-size: 22px;
}

#contact ul li h4 {
	padding: 0 0 10px;
	font-size: 28px;
}

.eighty {
	width: 80%;
	margin: 0 auto;
	max-width: 1400px;
}


.center {
	text-align: center;
}






















#footer {
	background-color: #272f41;
	color: #FFF;
	float: left;
	width: 92%;
	height: auto;
	text-align: center;
	padding: 120px 4%;
}

#footer p {
	font-size: 20px;
}

#footer p.designed {
	font-size: 18px;
}

#footer a {
	color: inherit;
	text-decoration: none;
	transition-property: all;
	transition-duration: .40s;
	transition-timing-function: ease-in-out;
}

#footer a:hover {
	color: #F90;
}

































/* Menu
-------------------------------------------------------------- */

#access {
	width: auto;
	padding: 0px;
	margin: 0px;
	float: right;
	height: 100px;
}

#access ul {
	list-style: none;
	float: right;
}

#access ul li {
	float: left;
}

#access ul li a {
	display: block;
	text-decoration: none;
	padding: 0 20px;
	color: #272f41;
	transition-property: all;
	transition-duration: .40s;
	transition-timing-function: ease-in-out;
	line-height: 100px;
	font-size: 18px;
}

#access ul li a:hover {
	color: #FF3C00;
}












@media only screen and (max-width: 1366px) {
h1 {
	font-size: 80px;
	line-height: 100%;
}
#fixie {
	width: 92%;
}
}





@media only screen and (max-width: 1024px) {

h1 {
	font-size: 80px;
}
	
#fixie {
	width: 92%;
}

#caption {
	width: 92%;
	padding: 0 4%;
}

.eighty {
	width: 92%;
}

}










@media only screen and (max-width: 1030px) {
}

@media only screen and (max-width: 900px) {
	
#logo {
	width: 320px;
	background-size:  auto 60px;
}

#access ul li a {
	padding: 4px 10px 0;
	font-size: 16px;
}

#technology ul {
	width: 44%;
	padding: 0 2%;
}

#excecutives ul {
	width: 44%;
	padding: 0 2%;
}

#contact ul {
	width: 44%;
	padding: 0 2%;
}

}



/* iPad & iPhone simulate :hover */
@media (min-device-width:320px) and (max-device-width:900px) {
}


@media only screen and (max-width: 765px) {

#header {
	position: absolute;
}

#logo {
	width: 100%;
	background-size:  auto 60px;
	background-position: center center;
}
	
p {
	font-size: 18px;
}

h1 {
	font-size: 48px;
}

h2 {
	font-size: 38px;
	padding: 0 0 20px;
}

h3 {
	font-size: 32px;
	padding: 0 0 20px;
}

h4 {
	font-size: 24px;
}

#panel, #technology, #research, #about, #excecutives, #news, #contact, #press {
	padding: 100px 0;
}

#technology ul {
	width: 100%;
	padding: 0;
}

#technology ul li {
	font-size: 18px;
}

#excecutives ul {
	width: 100%;
	padding: 0;
}

#excecutives ul li {
	font-size: 18px;
}

#contact ul {
	width: 100%;
	padding: 0;
}

#contact ul li {
	font-size: 18px;
}

#contact ul li h4 {
	font-size: 24px;
}

#access {
	display: none;
}

#footer {
	padding: 60px 4% 80px;
}

#footer p {
	font-size: 16px;
}

#footer p.designed {
	font-size: 14px;
}

}





.mouse {
	width: 20px;
	height: 36px;
	bottom: 4%;
	left: 50%;
	margin-left: -12px;
	border-radius: 15px;
	border: 2px solid #FFF;
	-webkit-animation: intro 2s;
	animation: intro 2s;
	opacity: 0.8;
	position: absolute;
	transition-property: all;
	transition-duration: .80s;
	transition-timing-function: ease-in-out;
}

.scroll {
	display: block;
	width: 3px;
	height: 3px;
	margin: 6px auto;
	border-radius: 4px;
	background: #FFF;
	-webkit-animation: finger 1s infinite;
	animation: finger 1s infinite;
}

@-webkit-keyframes intro {
0% {
	opacity: 0;
	-webkit-transform: translateY(40px);
	transform: translateY(40px);
}
100% {
	opacity: 0.8;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}
}

@keyframes intro {
0% {
	opacity: 0;
	-webkit-transform: translateY(40px);
	transform: translateY(40px);
}
100% {
	opacity: 0.8;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}
}

@-webkit-keyframes finger {
0% {
	opacity: 0.8;
}
100% {
	opacity: 0;
	-webkit-transform: translateY(20px);
	transform: translateY(20px);
}
}

@keyframes finger {
0% {
	opacity: 0.8;
}
100% {
	opacity: 0;
	-webkit-transform: translateY(20px);
	transform: translateY(20px);
}
}

@media only screen and (max-width: 768px) {
.mouse {
}
}