/* ==========================================================================
   Fábio Serpa's  styles - OGAM 2015
   ========================================================================== */

/* ==========================================================================
   Reset
   ========================================================================== */

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,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main{display:block}
body{line-height:1}
ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
table{border-collapse:collapse;border-spacing:0}

/* ==========================================================================
   General
   ========================================================================== */
body {font-family:'Open Sans',Arial,Helvetica,sans-serif;font-size:1rem}   
/* clearfix */
.clearfix:before,.clearfix:after {content:"";display:table;clear:both}
/* apply a natural box layout model to all elements */
*,*:before,*:after {box-sizing:border-box}
/*reset links*/
a {text-decoration:none}
/*reset input/button*/
input{border:0;margin:0;padding:0;border-radius:0;background:none}
button {border:0;outline:0;cursor:pointer;margin:0;padding:0;background:none}
/*fix extra space when image is displayed inline + set max-width */
img {display:block;max-width:100%}
/*heading*/
h1 {padding-left:20px;border-left:5px solid #3498db}
h1,h3 {font:300 4.375rem/1 'Oswald',Arial,Helvetica,sans-serif;text-transform:uppercase}
h2 {font:300 0.875rem 'Oswald',Arial,Helvetica,sans-serif;text-transform:uppercase;color:#989696;text-align:center}
h3 {text-align:center}
/*general margin*/
.max-width{max-width:1250px}
.all {padding:7vw 0}
.left{left:10%}
.right{right:10%}
/*fixed*/
#fixed {position:fixed;top:0;width:100%;z-index:10000;background:#070707;padding-top:30px;height:87px}
/*hide mobile anchor*/
#nav-mobile,.toggle-menu .open-menu, .toggle-menu .close-menu {display:none}

/* ==========================================================================i
   Header
   ========================================================================== */
/*header*/
header {position:relative; margin-bottom:-3%}
header > section {position:absolute;left:10%;bottom:15%}
header > section h1 {font-size:5rem;color:#f2f2f2}
header > section h2 {text-align:left; padding-left:27px}
header > section h3 {font:700 1.125rem 'Open Sans',Arial,Helvetica,sans-serif;color:#BDC3C7;text-transform:none;margin-top:20px;text-align:left}
nav,.logo {position:absolute}
nav {font:700 .675rem 'Open Sans',Arial,Helvetica,sans-serif;margin-top:15px }
nav li {display:inline-table;position:relative}
nav li:after {content:":::";font-weight:700;margin:0 10px;color:#979797}
nav li:last-of-type:after {content:""}
nav a {text-transform:uppercase;color:#9b9b9b;transition:.5s all ease-out}   
nav a:hover {color:#fff}  
nav li.active a {color:#4a90e2} 
video {width:100%;position:relative;z-index:-100; background-color:#000}
   
/* ==========================================================================
   Sections
   ========================================================================== */
section.all {width:100%;height:auto}
#group h3::after,#team h3::after,#clients h3::after,#services h2::after {content:"";position:absolute;width:100px;border-bottom:5px solid #3498db;height:5px;left:46%}
#group h3::after,#team h3::after,#services h2::after,#clients h3::after {bottom:0}
/*group */
#group {background:#f8f8f8}
#group h3 {color:#030303;position:relative;margin-bottom:30px;padding-bottom:30px}
#group p {font:300 1.125rem 'Open Sans',Arial,Helvetica,sans-serif;color:#030303;text-align:center;max-width:778px;width:68%;margin:0 auto}
/*team */
#team {background:#1a1a1a;background:linear-gradient(to bottom,#1a1a1a 0%,#0d0d0d 100%)}
#team h3 {color:#f7f7f7;position:relative;padding-bottom:30px}
#team .members-wrap {width:83%;margin:100px auto 0;font-size:0} 
#team .members-wrap > div {width:30%;margin:0 5% 10% 0;border-top:1px solid #3498db;padding-top:30px;text-transform:uppercase;display:inline-block;vertical-align:top}
#team .members-wrap > div:nth-of-type(4),#team .members-wrap > div:nth-of-type(5),#team .members-wrap > div:nth-of-type(6){margin-bottom:0}
#team .members-wrap > div:nth-of-type(3n+3) {margin-right:0}
#team .members-wrap > div h2 {text-align:left}
#team .members-wrap > div h4 {font:300 2.25rem/1.5 'Oswald',Arial,Helvetica,sans-serif;color:#f7f7f7}
#team .members-wrap > div a {font:400 .8125rem 'Open Sans',Arial,Helvetica,sans-serif;color:#3498db;border:1px solid #3498db;padding:10px 15px 10px 35px;display:inline-block;margin-top:20px;background:url(../img/icon-mail-blue.png) 15px 10px no-repeat;max-width:100%;word-wrap:break-word}
#team .members-wrap > div a:hover {background:#3498db url(../img/icon-mail-over.png) 15px 10px  no-repeat;color:#fff}
/*banner */
#banner {background:url(../img/image-criatividade.jpg) #a6daff no-repeat 0 0/cover}
#banner h3 {position:relative;color:#030303}
#banner h3::before,#banner h3::after {content:"";position:absolute;width:100px;border-bottom:5px solid #fff;height:5px;left:46%}
#banner h3::before{top:-3vw}
#banner h3::after{bottom:-3vw}
#banner h3 span {font-size:35%}
/*services */
#services {background:#f7f7f7}
#services h2 {position:relative;padding-bottom:30px}
#services .services-wrap {width:94.5%;margin:60px auto 0;font-size:0} 
#services .services-wrap > div {width:32%;margin:0 2% 2% 0;border:1px solid #eee;padding:2vw;display:inline-block;vertical-align:top;min-height:330px;text-align:center;background-color:#fff}
#services .services-wrap > div:first-of-type{background:#fff url(../img/icon-planeamento.png) no-repeat 50% 15%/auto}
#services .services-wrap > div:nth-of-type(2){background:#fff url(../img/icon-publicidade.png) no-repeat  50% 15%/auto}
#services .services-wrap > div:nth-of-type(3){background:#fff url(../img/icon-design.png) no-repeat 50% 15%/auto}
#services .services-wrap > div:nth-of-type(4){background:#fff url(../img/icon-editorial.png) no-repeat 50% 15%/auto}
#services .services-wrap > div:nth-of-type(5){background:#fff url(../img/icon-industrial.png) no-repeat 50% 15%/auto}
#services .services-wrap > div:nth-of-type(6){background:#fff url(../img/icon-arquitectura.png) no-repeat 50% 15%/auto}
#services .services-wrap > div:nth-of-type(7){background:#fff url(../img/icon-experience.png)no-repeat  50% 15%/auto}
#services .services-wrap > div:nth-of-type(8){background:#fff url(../img/icon-producao.png)no-repeat  50% 15%/auto}
#services .services-wrap > div:nth-of-type(9){background:#fff url(../img/icon-fardamento.png)no-repeat  50% 15%/auto}
#services .services-wrap > div:nth-of-type(3n+3) {margin-right:0}
#services .services-wrap > div h4 {font:400 1.25rem 'Oswald',Arial,Helvetica,sans-serif;color:#030303;text-transform:uppercase;padding-top:6vw;margin-bottom:20px}
#services .services-wrap > div p {color:#939691;font:400 .875rem/19px 'Open Sans',Arial,Helvetica,sans-serif}
/*clients */
#clients {background:#1a1a1a;background:linear-gradient(to bottom,#1a1a1a 0%,#0d0d0d 100%)}
#clients h3 {color:#f7f7f7;position:relative;padding-bottom:30px}
#clients .clients-wrap {width:94.5%;margin:5vw auto 0;font-size:0}
#clients .clients-wrap h4{font:400 1.25rem 'Open Sans',Arial,Helvetica,sans-serif;margin-bottom:20px;color:#fff}
#clients .clients-wrap > div {width:48%;display:inline-block;margin:0 4% 4% 0;vertical-align:top;border-bottom:2px solid #d8d8d8}
#clients .clients-wrap > div.focus {border-bottom:2px solid #fff;transition:.5s all ease-out}
#clients .clients-wrap > div > * {display:inline-block;font:600 .8125rem 'Open Sans',Arial,Helvetica,sans-serif;vertical-align:top}
#clients .clients-wrap > div > label {width:auto;margin-right:1%;padding-bottom:15px;cursor:pointer;text-transform:uppercase;color:#f7f7f7}
#clients .clients-wrap > div > input {color:#fff}
#clients .clients-wrap > div > input#phone {display:none}
#clients .clients-wrap > div:last-of-type {width:100%;border:0;margin-right:0}
#clients .clients-wrap > div:last-of-type input[type="checkbox"] {clip:rect(0px,0px,0px,0px);height:1px;margin:-1px;overflow:hidden;position:absolute;width:1px}
#clients .clients-wrap > div:last-of-type input[type="checkbox"] + label {cursor:pointer;display:inline-block;font-size:.9375rem;height:15px;line-height:15px;padding-left:20px;vertical-align:middle;background:url(../img/bg-check.png) 0 0 no-repeat}
#clients .clients-wrap > div:last-of-type input[type="checkbox"]:checked + label {background-position:0 -15px}
#clients .clients-wrap > div:last-of-type span {color:#fff; font-size:.675rem}
#clients .clients-wrap > div:last-of-type label span:first-of-type {width:calc(100% - 39px)}
#clients .clients-wrap > div:last-of-type > span{ margin-top:50px; display:block}
#clients .clients-wrap > div.focus:last-of-type {border:0}
#clients .clients-wrap > div:first-of-type > input {width:calc(100% - 63px)}
#clients .clients-wrap > div:nth-of-type(2) > input {width:calc(100% - 67px)}
#clients .clients-wrap > div:nth-of-type(3) > input {width:calc(100% - 83px)}
#clients .clients-wrap > div:nth-of-type(4) > input {width:calc(100% - 72px)}
#clients .clients-wrap > div:nth-of-type(5) > input {width:calc(100% - 117px)}
#clients .clients-wrap > div:nth-of-type(6) > input {width:calc(100% - 72px)}
#clients .clients-wrap > div:nth-of-type(7) > input {width:calc(100% - 52px)}
#clients .clients-wrap > div:nth-of-type(8) > input {width:calc(100% - 86px)}
#clients .clients-wrap > div:nth-of-type(2n+2) {margin-right:0}
#clients .clients-wrap > input#enviar {border:1px solid #3498db;color:#3498db;height:40px;font:600 .8125rem 'Open Sans',Arial,Helvetica,sans-serif;width:17.6%;min-width:220px;margin:auto;display:block;text-transform:uppercase}
#clients .clients-wrap > input#enviar:hover {color:#fff;background-color:#3498db}

/* ==========================================================================
   Footer
   ========================================================================== */
#contacts {background:transparent url(../img/contactos-background.jpg) no-repeat 0 bottom/contain;padding-bottom:15.8%;position:relative}
#contacts .contact-hq {min-width:40%;margin:20px auto 0;font-size:0;text-align:center}
#contacts .contact-hq > p {font:400 .875rem/1.4 'Open Sans',Arial,Helvetica,sans-serif;margin:30px auto 0;color:#939691;text-align:center}
#contacts .contact-hq > div {width:100%;margin:30px auto 0}
#contacts .contact-hq > div a {font:400 .8125rem 'Open Sans',Arial,Helvetica,sans-serif;color:#4a4a4a;border:1px solid #4a4a4a;padding:10px 15px 10px 35px;display:inline-block;margin:0 2% 0 0;max-width:100%;word-wrap:break-word}
#contacts .contacts-wrap {width:94.5%;margin:60px auto 0;font-size:0}
#contacts .contacts-wrap > div {width:48%;display:inline-block;margin:0 4% 10% 0;vertical-align:top;border-top:2px solid #3498db;padding-top:30px}
#contacts .contacts-wrap > div:nth-of-type(2n+2){margin-right:0}
#contacts .contacts-wrap > div > div {display:inline-block;vertical-align:top}
#contacts .contacts-wrap > div > div:first-of-type {width:54%}
#contacts .contacts-wrap > div > div:last-of-type {width:46%;text-align:right}
#contacts .contacts-wrap > div h4{font:400 1.25rem 'Oswald',Arial,Helvetica,sans-serif;text-transform:uppercase;color:#030303}
#contacts .contacts-wrap > div p{font:400 .875rem 'Open Sans',Arial,Helvetica,sans-serif;color:#939691; margin-top:10px}
#contacts .contacts-wrap > div a {font:400 .8125rem 'Open Sans',Arial,Helvetica,sans-serif;color:#4a4a4a;border:1px solid #4a4a4a;padding:10px 15px 10px 35px;display:inline-block;margin:0 0 5% 0;max-width:100%;word-wrap:break-word}
#contacts #bg-ct {position:absolute;top:0;bottom:0;left:0;right:0;z-index:-100}
#contacts .mail{background:url(../img/icon-mail-black.png) 15px 10px no-repeat}
#contacts .mail:hover{background:#4a4a4a url(../img/icon-mail-over.png) 15px 10px no-repeat;color:#fff}
#contacts .fax{background:url(../img/icon-fax-black.png) 15px 10px no-repeat}
#contacts .fax:hover{background:#4a4a4a url(../img/icon-fax-over.png) 15px 10px no-repeat;color:#fff}
#contacts .phone{background:url(../img/icon-phone-black.png) 15px 10px no-repeat}
#contacts .phone:hover{background:#4a4a4a url(../img/icon-phone-over.png) 15px 10px no-repeat;color:#fff}

/* ==========================================================================
   FIX IE9/IE10 REM FONT SHOTHAND
   ========================================================================== */
@media screen and (min-width:0\0) {  
h1,h3{font-weight:300;font-size:4.375rem;line-height:1;font-family:'Oswald',Arial,Helvetica,sans-serif}
h2{font-weight:300;font-size:0.875rem;font-family:'Oswald',Arial,Helvetica,sans-serif}
header>section h3{font-weight::700;font-size:1.125rem;font-family:'OpenSans',Arial,Helvetica,sans-serif}
nav{font-weight:700;font-size:.675rem;font-family:'OpenSans',Arial,Helvetica,sans-serif}
#group p{font-weight:300;font-size:1.125rem;font-family:'OpenSans',Arial,Helvetica,sans-serif}
#team .members-wrap>div h4{font-weight:300;font-size:2.25rem;line-height:1.5;font-family:'Oswald',Arial,Helvetica,sans-serif}
#team .members-wrap>div a{font-weight:400;font-size:.8125rem;font-family:'OpenSans',Arial,Helvetica,sans-serif}
#services .services-wrap>div h4{font-weight:400;font-size:1.25rem;font-family:'Oswald',Arial,Helvetica,sans-serif}
#services .services-wrap>div p{font-weight:400;font-size:.875rem;line-height:19px;font-family:'OpenSans',Arial,Helvetica,sans-serif}
#clients .clients-wrap>div>*,#clients.clients-wrap>button{font-weight:600;font-size:.8125rem;font-family:'OpenSans',Arial,Helvetica,sans-serif}
#contacts .contact-hq>p{font-weight:400;font-size:.875rem;line-height:1.4;font-family:'OpenSans',Arial,Helvetica,sans-serif}
#contacts .contact-hq>div a{font-weight:400;font-size:.8125rem;font-family:'OpenSans',Arial,Helvetica,sans-serif}
#contacts .contacts-wrap>div h4{font-weight:400;font-size:1.25rem;font-family:'Oswald',Arial,Helvetica,sans-serif}
#contacts .contacts-wrap>div p{font-weight:400;font-size:.875rem;font-family:'OpenSans',Arial,Helvetica,sans-serif}
#contacts .contacts-wrap>div a{font-weight:400;font-size:.8125rem;font-family:'OpenSans',Arial,Helvetica,sans-serif}
}


/* ==========================================================================
   Responsive Styles - non mobile first approach
   ========================================================================== */
   
/* ==========================================================================
   Large Devices,Wide Screens - mobile first approach here
   ========================================================================== */
@media screen and (min-width:1250px) {
header > section {bottom:25%}	
}
@media screen and (min-width:1400px) {
/*sections*/
#group h3::after,#team h3::after,#clients h3::after,#services h2::after,#banner h3::before,#banner h3::after {left:46.5%}
}
@media screen and (min-width:1600px) {
/*sections*/
#group h3::after,#team h3::after,#clients h3::after,#services h2::after,#banner h3::before,#banner h3::after {left:47%}	
/*services*/
#services .services-wrap > div {min-height:380px}
}
@media screen and (min-width:1900px) {
/*sections*/
#group h3::after,#team h3::after,#clients h3::after,#services h2::after,#banner h3::before,#banner h3::after {left:47.2%}
}

/* ==========================================================================
   Medium Devices,Desktops
   ========================================================================== */
@media screen and (max-width:1024px) {
/*headings*/
h3 {font-size:8.7vw}
header > section h1 {font-size:5.5vw}
/*sections*/
#group h3::after,#team h3::after,#clients h3::after,#services h2::after,#banner h3::before,#banner h3::after {left:45%}
/*services*/
#services .services-wrap > div h4 {padding-top:9vw}
}

/* ==========================================================================
   Small Devices,Tablets
   ========================================================================== */
@media screen and (min-width:801px) {
/*services fix*/
#services .services-wrap > div:nth-of-type(7),#services .services-wrap > div:nth-of-type(8),#services .services-wrap > div:nth-of-type(9){margin-bottom:0}
}
@media screen and (max-width:800px) {
/*fixed*/
.right {right:5%}	
.left {left:5%}	
/*header */
.logo img{ width:90%}
#nav{right:0}
/*sections*/
#group h3::after,#team h3::after,#clients h3::after,#services h2::after,#banner h3::before,#banner h3::after {left:44%}
/*team*/
#team .members-wrap > div {width:48%;margin:0 4% 10% 0}
#team .members-wrap > div:nth-of-type(3n+3) {margin-right:4%}
#team .members-wrap > div:nth-of-type(2n+2) {margin-right:0}
/*services */
#services .services-wrap > div {width:48%;margin:0 4% 4% 0}
#services .services-wrap > div:nth-of-type(3n+3) {margin-right:4%}
#services .services-wrap > div:nth-of-type(2n+2) {margin-right:0}
#services .services-wrap > div h4 {padding-top:12vw}
/*footer*/
#contacts .contacts-wrap > div > div:first-of-type {margin-bottom:20px}
#contacts .contacts-wrap > div > div:first-of-type,#contacts .contacts-wrap > div > div:last-of-type {width:100%;text-align:left}
#contacts .contacts-wrap > div a {margin:0 3.5% 0 0}
}

/* ==========================================================================
   Extra Small Devices,Phones		
   ========================================================================== */
@media screen and (max-width:767px) {
header {padding-top:43.25%;margin-top:11%;background:url(../img/image-world.jpg) #000 no-repeat 0 0/cover}
video {display:none}
	
/*mobile nav*/
#nav {display:none}
.toggle-menu a {position:absolute;right:20px;top:3%;color:#f7f7f7;font-size:2rem;content: "";display: block; width: 16px;height: 0;box-shadow: 0 10px 0 1px #f7f7f7,0 16px 0 1px #f7f7f7,0 22px 0 1px #f7f7f7}
.toggle-menu .open-menu {display:block}
.toggle-menu .close-menu {display:none}
#content {width:100%;transition:.3s width ease}
#nav-mobile {position:fixed;top:-15px;right:0;width:0;height:100%;background:#3b3b3b;overflow:hidden;transition:width 0.3s ease;display:block;z-index:99999}
#nav-mobile li {display:block}
#nav-mobile li::after {content:"";margin:0}
#nav-mobile a {display:block;width:100%;padding:15px;text-align:center;background: linear-gradient(#3e3e3e,#383838) repeat scroll 0 0 rgba(0,0,0,0);border-bottom: 1px solid #2e2e2e;border-top: 1px solid #484848}
#nav-mobile a:hover,#nav-mobile a:focus {background:linear-gradient(#484848,#383838)}
#nav-mobile:after {content:"";position:absolute;top:0;right:0;height:100%;width:34px;background: linear-gradient(to right,rgba(0,0,0,0),rgba(0,0,0,0.4)) repeat scroll 0 0 rgba(0,0,0,0)}
#nav-mobile:target {width:20%}
#nav-mobile:target + #content {width:100%;position:absolute;right:20%;transition:all .5s ease}
#nav-mobile:target + #content .open-menu {display:none}
#nav-mobile:target + #content .close-menu {display:block;transform:rotate(270deg);transition:all .5s ease;color:#9b9b9b; top:27%}
#nav-mobile:target + #content .toggle-menu {width:80%;right:20%}
}
@media screen and (max-width:640px) {
/*header*/
header { margin-top:12%}	
header > section h3 {font-size:2.5vw}
/*sections*/
#group h3::after,#team h3::after,#clients h3::after,#services h2::after,#banner h3::before,#banner h3::after {left:42%}
/*services*/
#services .services-wrap > div  h4 {padding-top:15vw}
/*footer*/
#contacts .contact-hq > div a {display:block;margin:0 2% 2% !important}
#contacts .contacts-wrap > div a {margin:0 0 4% 0;display:block;text-align:center}

}

@media screen and (max-width:480px) {
/*headings*/	
h2 {font-size:.75rem}
/*mobile nav*/
#nav-mobile:target {width:30%}
#nav-mobile:target + #content {right:30%}
#nav-mobile:target + #content .toggle-menu {width:70%;right:30%}
/*fixed*/
#fixed{padding-top:1%;height:58px}
#fixed .logo {max-width:70%;width:auto}
/*header*/	
header > section h1 {padding-bottom:10px}
header > section h3 {margin-top:10px}
/*sections*/
#group h3::after,#team h3::after,#clients h3::after,#services h2::after,#banner h3::before,#banner h3::after {left:39.5%}
#team .members-wrap,#services .services-wrap,#clients .clients-wrap,#contacts .contacts-wrap,#contacts .contact-hq > div,#contacts .contact-hq > p {width:100%;padding:0 4%}
/*team*/
#team .members-wrap > div {width:100%;display:block;margin:0 0 25% !important}
/*services*/
#services .services-wrap > div {width:100%;min-height:auto;height:auto;display:block;margin-right:0 !important}	
#services .services-wrap > div  h4 {padding-top:20vw}
/*clients*/
#clients .clients-wrap > div {width:100%;display:block;margin-right:0}
#clients .clients-wrap > div:last-of-type {margin:0 0 10%}
#clients .clients-wrap > div input {width:100% !important}
/*footer*/
#contacts .contact-hq > div a {margin:0 0 2% !important}
}

@media screen and (max-width:360px) {
/*mobile nav*/
#nav-mobile:target {width:40%}
#nav-mobile:target + #content {right:40%}
#nav-mobile:target + #content .toggle-menu {width:60%;right:40%}
/*fixed*/
#fixed {height:50px}
#fixed .logo {max-width:35%}
/*sections*/
#group h3::after,#team h3::after,#clients h3::after,#services h2::after,#banner h3::before,#banner h3::after {left:35.5%}
/*services*/
#services .services-wrap > div  h4 {padding-top:25vw}
/*footer*/
#contacts .contacts-wrap > div {width:100%;display:block;margin-bottom:25%}	
}
@media screen and (max-width:320px) {
/* header */
header { margin-top:11%}		
/*mobile nav*/
.toggle-menu{top:0}
.toggle-menu a {top:1%;font-size:1.75rem}
/*fixed*/
#fixed {height:37px}	
#fixed .logo {max-width:30%}
/*sections*/
#group h3::after,#team h3::after,#clients h3::after,#services h2::after,#banner h3::before,#banner h3::after {left:33.5%}
/*services*/
#services .services-wrap > div  h4 {padding-top:30vw}
}