/* 00. BODY AND WRAPPER ================================================== */
body, html {	margin:0px auto;	width:100%;	background-color:#FFF;	color:#333;	font-family:'Open Sans', sans-serif;	font:12px;	position:absolute; top:0px; left:0px; bottom:0px;}
#wrapper {	position:absolute;	top:100%;	width:100%;}
.inner {	width:100%;	max-width:870px;	margin:0px auto;	text-align:center;	display:block;}
.title_line { border-bottom: 1px solid #FFFFFF; display: block; height: 1px; margin: auto; width: 90px;
}
.lead {	font-family:'Open Sans', sans-serif;	text-align:center;	text-transform: uppercase;	letter-spacing:2px;	color: #F7F7F7;	margin-bottom:0px;	padding:30px 30px 30px 30px;	font-size: 16px;	line-height: 29px;}
.lead a {	color:#00aed7;	text-decoration: none;	-moz-transition: all 0.3s;	-webkit-transition: all 0.3s;	-o-transition: all 0.3s;
}
.lead a:hover {	color:#777;
}
/* 01. HEADER ================================================== */
header {	width:100%;	height:100%;	text-align:center;	color:#FFF;	position:absolute;	background:url(../images/background_header.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
header h1 {	font-family:'Open Sans', sans-serif;	font-size:80px;	text-transform:uppercase;	letter-spacing:5px;	font-weight:lighter;	position:relative;	margin:10% auto 0px auto;	z-index: 999;}
.roles { font-family: 'Open Sans', sans-serif; font-size: 36pt; font-weight: 300; display: inline-block; line-height: 70px; height: 70px; vertical-align: middle; overflow: hidden; color: #FFF; text-shadow: 0 1px 0 rgba(0,0,0,0.01); z-index: 999;
}
.roles div { height: 70px; -webkit-transition: margin-top 0.5s ease-in-out; -moz-transition: margin-top 0.5s ease-in-out; -o-transition: margin-top 0.5s ease-in-out; transition: margin-top 0.5s ease-in-out;
}
#tab a{	width:150px;	padding:20px 10px;	background-color: #00aed7;	color:#FFF;	margin:0px auto;	vertical-align:middle;	text-align:center;	text-transform:uppercase;	font-size:10pt;	letter-spacing:1px;	position:absolute;	bottom:0px;	left:50%;	margin-left:-80px;	text-decoration:none;	transition: all 0.7s;	-moz-transition: all 0.7s;	-webkit-transition: all 0.7s;	-o-transition: all 0.7s;}
#tab a:hover {	background-color:#FFF;	color:#121212;
}
/* 02. NAVIGATION ================================================== */
nav {	width:100%;	height:60px;	background-color:#FFF;	margin:0px;	z-index:100;
}
nav #logo {	float:left;	display:inline-block;	font-size:14pt;	color:#212121;	margin-left:10px;	letter-spacing:2px;	padding:0 0 0 15px;	line-height:20px;	vertical-align:middle;
}
nav ul {	float:right;	display:inline-block;	margin-right:10px;	margin-top:20px;	list-style:none;	vertical-align:middle;}
nav ul li {	display:inline-block;	vertical-align:middle;	line-height:14px;}
nav ul li a {	color:#212121;	text-transform:uppercase;	letter-spacing:1px;	font-size:8pt;	margin:5px 18px 0px 18px;	padding:18px 0px;	vertical-align:middle;	text-decoration:none;	transition: all 0.3s;	-moz-transition: all 0.3s;	-webkit-transition: all 0.3s;	-o-transition: all 0.3s;}
nav ul li a:hover {	color:#00aed7;}
#nav .selected a { color:#00aed7;}
/* 03. PORTFOLIO SECTION ================================================== */
#portfolio {	background-color:#EEE;	padding:70px 0px 50px;	margin:0px auto;	text-align:center;	display:block;}
#portfolio h2 {	color:#555;	font:40pt 'Open Sans';	padding: 30px 0px 0px 0px;}
/* 04 WORKS GRID ================================================== */
.work-grid {	list-style: none;	padding: 10px 0;	margin: 0px auto;	text-align: center;	width: 100%;
}
.work-grid li {	display: inline-block;	margin: 0px 5px 5px 0px;	vertical-align: top;	height: 185px;	-webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
}
.work-grid li:hover {	filter:alpha(opacity=80); filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80); opacity: 0.8;
}
.work-grid li> a, .work-grid li> a img { border: none; outline: none; display: block; position: relative; } .work-grid li.og-expanded> a::after { top: auto; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-bottom-color: #ddd; border-width: 15px; left: 50%; margin: -20px 0 0 -15px; } .og-expander { position: absolute; background: #ddd; top: auto; left: 0; width: 100%; margin-top: 10px; text-align: left; height: 0; overflow: hidden; } .og-expander-inner { padding: 50px 30px; height: 100%; } .og-close { position: absolute; width: 40px; height: 40px; top: 20px; right: 20px; cursor: pointer; } .og-close::before, .og-close::after { content: ''; position: absolute; width: 100%; top: 50%; height: 1px; background: #000; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); } .og-close::after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg); } .og-close:hover::before, .og-close:hover::after { background: #333; } .og-fullimg, .og-details { width: 40%; float: left; height: 80%; overflow: hidden; position: relative; } .og-details { padding: 0 40px 0 20px; } .og-fullimg { text-align: center; } .og-fullimg img { display: inline-block; max-height: 100%; max-width: 100%; } .og-details h3 { font-weight: 300; font-size: 52px; padding: 40px 0 10px; margin-bottom: 10px; color:#555; } .og-details p { font-weight: 400; font-size: 16px; line-height: 22px; color: #999; } .og-details a { font-size: 16px; color: #FFF; font-family:'Open Sans', sans-serif; text-transform: uppercase; letter-spacing: 2px; padding: 10px 20px; background: #00aed7; border: 3px solid #00aed7; display: inline-block; margin: 30px 0 0; outline: none; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .og-details a::before { content: '\2192'; display: inline-block; margin-right: 10px; } .og-details a:hover { background: #555; border-color: #555; color: #FFF; } .og-loading { width: 20px; height: 20px; border-radius: 50%; background: #ddd; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ccc; position: absolute; top: 50%; left: 50%; margin: -25px 0 0 -25px; -webkit-animation: loader 0.5s infinite ease-in-out both; -moz-animation: loader 0.5s infinite ease-in-out both; animation: loader 0.5s infinite ease-in-out both; } /* 05. ABOUT SECTION ================================================== */ #about { background:#00b686; padding:70px 0px 50px;} #about .inner { width:100%; height:100%; margin:0px auto; text-align:center;} #about h2 { color: #FFF; font:40pt 'Open Sans'; padding: 30px 0px 0px 0px;}#about h3 { color: #FFF; font:24pt 'Open Sans'; padding: 20px 0px 0px 0px; font-weight:400; text-align:center} #whatwedo #portraits{ text-align: left;}  #portraits{ text-align: center; padding-top:20px} #portraits li{ position: relative; list-style-type: none; display: inline-block; background: #eee; width: 23%; height: auto; margin-bottom: 2.5%; transition: all 150ms ease-out; margin: 0 0px 5px 5px; background: #FFF; padding-bottom:10px;} #portraits li img { width:100%; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;} #portraits li img:hover { filter:alpha(opacity=80); filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80); opacity: 0.8;} #portraits li .name { font-size: 18px; color: #2e2e2e; font-weight: normal; font-style: normal; margin: 10px 0 10px 0; display: inline-block;} #portraits li .poste { font-family:'Open Sans', sans-serif; color: #FFFFFF; /* background-color: #00aed7; */ font-size:13px; text-transform: uppercase; padding: 8px 8px; margin-bottom: 10px; display: inline-block;} #portraits li .whathedo { color: #3b3b3b; font-size:12px;} #portraits li .whathedo a { padding: 0px 5px 0px 5px; }
/* 04. Whatwedo SECTION ================================================== */ #whatwedo { background:#00d7d4; padding:70px 0px 50px;} #whatwedo .inner { width:100%; height:100%; margin:0px auto; text-align:center;} #whatwedo h2 { color: #FFF; font:40pt 'Open Sans'; padding: 30px 0px 0px 0px;} 
#whatwedo h3 { color: #FFF; font:24pt 'Open Sans'; padding: 20px 0px 0px 0px; font-weight:400; } #whatwedo #portraits{ text-align: left;} #whatwedo #portraits li{ position: relative; list-style-type: none; display: inline-block; width: 23%; height: auto; margin-bottom: 2.5%; transition: all 150ms ease-out; margin: 0 0px 5px 5px; padding-bottom:10px;background: none!important;} #whatwedo #portraits li img { width:auto !important; max-width:100%!important; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;} #whatwedo #portraits li img:hover { filter:alpha(opacity=80); filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80); opacity: 0.8;} #whatwedo #portraits li .name { font-size: 18px; color: #2e2e2e; font-weight: normal; font-style: normal; margin: 10px 0 10px 0; display: inline-block;} #whatwedo #portraits li .poste { font-family:'Open Sans', sans-serif; color: #FFFFFF; background-color: #00aed7; font-size:13px; text-transform: uppercase; padding: 8px 8px; margin-bottom: 10px; display: inline-block;} #whatwedo #portraits li .whathedo { color: #3b3b3b; font-size:12px;} #whatwedo #portraits li .whathedo a { padding: 0px 5px 0px 5px; }.b_wrapper{ width: 31.33%; margin:1%; float:left; color:#000}.b_wrapper ul{margin: 0 0 10px 25px; list-style:circle; text-align:left; color:#FFF; line-height:1.8; padding-top:10px; font-size:14px}
.clear{ clear:both;}#whatwedo h4 { color: #000; font:18pt 'Open Sans'; padding: 20px 0px 0px 0px; font-weight:400; text-align:left}.b_wrapper p{ color:#FFF; line-height:1.5; text-align:left; text-align:justify; font-size:14px ; padding:15px 10px 10px 0}

/* 04. Howedo SECTION ================================================== */ #howwedo { background:#f54b32; padding:70px 0px 50px;} #howwedo .inner { width:100%; height:100%; margin:0px auto; text-align:center;} #howwedo h2 { color: #FFF; font:40pt 'Open Sans'; padding: 30px 0px 0px 0px;} #howwedo #portraits{ text-align: center; padding-top: 80px;} #howwedo #portraits li{ position: relative; list-style-type: none; display: inline-block; width: 15%; height: auto; margin-bottom: 2.5%; transition: all 150ms ease-out; margin: 0 0px 5px 5px; padding-bottom:10px;background: none!important;} #howwedo #portraits li img { width:auto !important; max-width:100%!important; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;} #howwedo #portraits li img:hover { filter:alpha(opacity=80); filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80); opacity: 0.8;} #howwedo #portraits li .name { font-size: 18px; color: #2e2e2e; font-weight: normal; font-style: normal; margin: 10px 0 10px 0; display: inline-block;} #howwedo #portraits li .poste { font-family:'Open Sans', sans-serif; color: #FFFFFF; /* background-color: #00aed7; */ font-size:13px; text-transform: uppercase; padding: 8px 8px; margin-bottom: 10px; display: inline-block;} #howwedo #portraits li .whathedo { color: #3b3b3b; font-size:12px;} #howwedo #portraits li .whathedo a { padding: 0px 5px 0px 5px; }


 /* 06. CONTACT SECTION ================================================== */ #contact { background-color:rgb(255, 203, 0); padding:70px 0px 50px;} #contact h2 { color: #FFF; font:40pt 'Open Sans'; padding: 30px 0px 0px 0px;} #contact .row { font-family:'Open Sans', serif; line-height:24px; color:#777; font-size:14px; margin-bottom:30px; margin-top:30px;} #contact .row .col1 { width:55%; padding:0px 3%; display:inline-block; vertical-align:text-top; text-align:left;} #contact .row .col2 { width:35%; display:inline-block; vertical-align:text-top; text-align: left; color: #FFF; font-weight: bold;} #contact .inner form input[type="text"], #contact .inner form input[type="email"], #contact .inner form textarea { width:90%; height:30px; padding:5px 10px; font-family:'Open Sans', serif; font-size: 12px; color:#999; letter-spacing:1px; background-color:#FFF; border:2px solid #FFF; border-radius:0px; box-shadow:none; margin-bottom:25px; -webkit-box-shadow:none; -moz-box-shadow:none; transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -o-transition: all 0.3s;} #contact .inner form input[type="text"]:focus, #contact .inner form input[type="email"]:focus, #contact .inner form textarea:focus { border:2px solid #00aed7; color:#999; } #contact .inner form input[type="text"]:required:valid, #contact .inner form input[type="email"]:required:valid, #contact .inner form textarea:required:valid { border:2px solid #00aed7; color:#00aed7; background-image:url(../images/valid-icon.png); background-repeat:no-repeat; background-position:98%; } #contact .inner form input[type="text"]:required:invalid, #contact .inner form input[type="email"]:required:invalid, #contact .inner form textarea:required:invalid { background-image:url(../images/invalid-icon.png); background-repeat:no-repeat; background-position:98%; } #contact .inner form textarea:required:valid, #contact .inner form textarea:required:invalid { background-position:98% 8px; } #contact .inner form textarea { resize:vertical; height:100px;} #contact .inner form label { color:#555; font-family:'OpenSansSemibold', sans-serif; text-transform:uppercase; font-size:14px; font-weight:normal; letter-spacing:1px;} input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color:#333;} input:-moz-placeholder, textarea:-moz-placeholder { color:#333;} input::-moz-placeholder, textarea::-moz-placeholder { color:#333;} input:-ms-input-placeholder, textarea:-ms-input-placeholder { color:#333;} #contact .inner form .required { color:#00aed7;} #contact .inner form .submit { width:60%; padding:5px 10px; background-color: #333333; height:40px; text-transform:uppercase; font-family:'Open Sans', serif; letter-spacing:1px; color:#FFF; margin-top:20px; border: 2px solid #333333; box-shadow:none; -webkit-box-shadow:none; -moz-box-shadow:none; transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -o-transition: all 0.3s;} #contact .inner form .submit:hover { color:#FFF; border:2px solid #555; background-color: #555; cursor:pointer;} #contact .inner h4 { color:#555; font-family:'OpenSansSemibold', sans-serif; text-transform:uppercase; font-size:14px; font-weight:normal; letter-spacing:1px; margin-bottom:0px; margin-top:35px;} #contact .inner h4:first-child{ margin-top:0px;} #contact .inner a { color:#00aed7; letter-spacing:1px; text-decoration:none; transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -o-transition: all 0.3s;} #contact .inner a:hover { color:#777; text-decoration:none; transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -o-transition: all 0.3s;} /* 07. TWITTER MODULE ================================================== */ #twitter_module { background-color:#FFF; padding:50px 0px 50px; text-align:center;} .tweet_list { overflow-y:hidden; list-style:none; margin:0; padding:0} .tweet_list li { overflow-x:hidden; overflow-y:auto; list-style-type:none} .tweet_list li a { color:#333; text-decoration:none; border-bottom:1px dotted #333; transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -o-transition: all 0.3s;} .tweet_list li a:hover { color:#00aed7; text-decoration:none; border-bottom:1px dotted #00aed7; transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -o-transition: all 0.3s;} .tweet_list .tweet_avatar { display:none} .tweet_list .tweet_time a{ font-style:italic; color:#999; border-bottom:none; font:12px 'Open Sans'; margin-left: 10px;} .tweet_list li::before { content: url(../images/twitter-icon2.png) ;} .tweet_list li img { margin-bottom:-2px;} .tweet_list .tweet_avatar img { vertical-align:middle;} #ticker ul.tweet_list { overflow-y:hidden; vertical-align:middle; height:22px; font:14px 'Open Sans'; color:#333;} #ticker .tweet_list li { overflow:hidden; vertical-align:middle; font:13px 'Open Sans'; color:#666; height:35px;} /* 08. SOCIAL MODULE ================================================== */ #social_module { background-color:#fFF; padding:0px 0px 30px; text-align:center;} #social_module a { text-decoration: none;} #social_module ul li{ list-style:none; display:inline-block; padding: 0px 20px 0px 20px;} .icon{ font-family:"Socialico"; font-weight:400; font-style:normal; font-size:30px; color:#777; -webkit-transition:all .5s ease-in-out; -moz-transition:all .5s ease-in-out; -ms-transition:all .5s ease-in-out; -o-transition:all .5s ease-in-out; transition:all .5s ease-in-out} .icon:hover{ color:#00aed7;} /* 09. FOOTER SECTION ================================================== */ footer { height:auto; width:100%; padding:20px 0px 20px 0; background-color:#333; font-family:'Open Sans', sans-serif; font-size:11px; letter-spacing:1px; position:static; bottom:0px; text-align:center;} 
.lead {	padding:10px 30px 10px 30px;	font:15px/1.5 'Open Sans';}
.lead1 {	padding:8px 30px 8px 30px;	font:12px/1.2 'Open Sans';}
.lead2 {	padding:8px 30px 8px 0px;	font:12px/1.2 'Open Sans';color:#FFF}