/* ==========================================================================
   GLOBAL STYLES
   ========================================================================== */

html {-webkit-font-smoothing: antialiased; 	overflow-x:hidden;}

body{
	font-family:"supercircular", Arial, Helvetica, sans-serif;
	font-size:14px;
	line-height:20px;
	color:#000;
	margin:0;
	padding:0;
	font-style:normal;
	font-weight:normal;
    background-color: #fff;}

h1,h2,h3,h4,p,input,label,select
{font-family:"supercircular", Arial, Helvetica, sans-serif; font-style:normal; font-weight:100; margin:0; padding:0;}

h1{font-family:"supercircularbold"; font-size:80px; line-height:80px; letter-spacing:-1px;}
h2{font-family: "supercircular"; font-size:40px; line-height:40px;}
h3{font-size:17px; line-height:20px;}
h4{font-size:14px; line-height:20px;}
p{font-size:14px; line-height:20px;}

a {color:#000; text-decoration:none;}
a:hover {color:#fff; text-decoration:none;}

strong {font-family:"supercircularbold"; font-style:normal; font-weight:100;}

img, img a, img a:hover {border:0;}

hr {width:0; margin:0; padding: 0; border:0;}

.clear {margin:0!important;}


@font-face {
    font-family: 'supercircularbold';
    src: url('../fonts/supercircular-bold-webfont.woff2') format('woff2'),
         url('../fonts/supercircular-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'supercircular';
    src: url('../fonts/supercircular-book-webfont.woff2') format('woff2'),
         url('../fonts/supercircular-book-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

div, ul, li{
	display:block;
	margin:0;
	padding:0;
	list-style:none;}

.container {
	width:100%;
	/*max-width:1280px;*/
	margin:auto;}

.left {float:left;}
.right {float:right;}

.color {color:#f48120;}

#header, #footer, #slider, #content, #product {display:inline-block; float:left; /*NO SACAR*/}

.fixed {position:fixed;}

.button {
	color:#fff;
	border:1px solid #fff;
	padding:15px 20px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	cursor:pointer;}

.button:hover {opacity:0.5}

.button.black {color:#000; border:1px solid #000;}

/* ==========================================================================
   ANIMATION
   ========================================================================== */
#header {
	-o-transition:top .2s ease-out;
	-ms-transition:top .2s ease-out;
	-moz-transition:top .2s ease-out;
	-webkit-transition:top .2s ease-out;
    transition:top .2s ease-out;}


#footer a,
#footer li,
#footer .upper,
#footer .lower {
	-o-transition:all .2s ease-out;
	-ms-transition:all .2s ease-out;
	-moz-transition:all .2s ease-out;
	-webkit-transition:all .2s ease-out;
    transition:all .2s ease-out;}

/* ==========================================================================
   HEADER
   ========================================================================== */

#header {
	/*position:absolute;*/
    position:relative;
	margin:0;
	padding:0;
	width:100%;
	color:#fff;
	z-index:100;}

#header a {color:#fff}
#header a:hover {color:#fff;}

#header li a:after {
    content: '';
	width: 0;
    margin-top: 5px;
	border-top: 2px solid #fff;
	display: block;
	-o-transition:all .2s ease-out;
	-ms-transition:all .2s ease-out;
	-moz-transition:all .2s ease-out;
	-webkit-transition:all .2s ease-out;
    transition:all .2s ease-out;
}

#header li a.active:after {
	width: 50%;
}

#header li a:hover:after,
#header li a.active:hover:after {
	width: 25%;
}

#header div.selected-work {display:none;}

/************************ NAV ************************/

#header .nav {
	position:relative;
	padding:20px 40px;
	float:left;
	width:100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;}

#header .nav .menu {float:left; margin: 25px 0 25px 35px;}

#header .nav .menu li {float:left; line-height:20px; margin-right:30px; height:20px;}
#header .nav .menu li:last-child {margin-right:0;}
#header .nav .menu li a {font-size:18px; line-height:20px; height:20px; color:#FFF;}

/*#header .nav .logo {
	width:140px;
	height:70px;
	background-image:url(../img/superestudio-old.png);
	background-repeat:no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	display:block;}
*/

#header .nav .logo {
		width:60px;
		height:60px;
		margin-top:5px;
		background-image: url(../img/superestudio.png);
		background-repeat: no-repeat;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		display: block;
		background-position:center;
}

#header .nav .right {font-size:18px; line-height:20px; height:20px; color:#FFF; margin: 25px 0; }

#header .nav .tagline {
	display: block;
    line-height: 20px;
    height: 20px;
    float: left;}


#header .nav .instagram {
    width: 20px;
    height: 20px;
    background-image: url(../img/instagram.png);
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    display: block;
    float: left;
    margin-left: 15px;}

#header .nav .instagram:hover {opacity: 0.5}
#submenu {display: none;}

/*************** HEADER-BLACK *********************/

#header.black,
#header.black a,
#header.black a:hover,
#header.black .nav .menu li a,
#header.black .nav .right {color:#000;}
#header.black .nav .logo {background-image:url(../img/superestudio-black.png);}
#header.black li a:after {border-color: #000;}
#header.black .nav .instagram {background-image:url(../img/instagram-black.png)!important;}

/*Black header*/
body.black {background-color:#fff;}
body.black #header,
body.black #header a,
body.black #header a:hover,
body.black #header .nav .menu li a,
body.black #header .nav .right {color:#000;}
body.black #header .nav .logo {background-image:url(../img/superestudio-black.png);}
body.black #header li a:after {border-top: 3px solid #000;}
body.black #header .nav .instagram {background-image:url(../img/instagram-black.png);}

/*************** HEADER-HOME *********************/

#header.home {
    position: absolute;
    top:0;
}

#header.fixed {
	position: fixed;
    top:0;
    background-color: #fff!important;}

#header.scroller {
    top:-110px;
    background-color: #fff!important;}

/*************** HEADER-SELECTED *********************/

#header.selected {
    position: fixed;
}

/************************ HEADER-MOBILE ************************/


#header .open, #header .close {
    position: absolute;
	display:block;
    top: 20px;
    right: 20px;
	width:50px;
	height:50px;
	background-position:center center;
	background-repeat:no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;}

#header .open {background-image:url(../img/open-black.png);}
#header .close {background-image:url(../img/close-black.png);}


/* ==========================================================================
   FILTRO
   ========================================================================== */

#filtro {
	position:relative;
	margin:0;
    padding:0;}

#filtro .boxes {float:left;}
#filtro .boxes li {font-family: 'supercircular'; margin-right:30px; float:left; line-height: 20px; }
#filtro .boxes li:last-child {margin-right:0}

/*#filtro .boxes li a#Lamole {width:77px; display:inline-block; text-align:left;}
#filtro .boxes li a#Lamole:hover span {display:none}
#filtro .boxes li a#Lamole:hover:before {content:"Lamole"}*/

/* ==========================================================================
   FOOTER
   ========================================================================== */

#footer {
	position:relative;
    display: block;
	margin:0;
	width:100%;
	height:auto;
	color:#000;
	background-color:#fff;
    font-size:20px;
    line-height:24px;
    -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
    box-sizing: border-box;
    padding: 40px;}

#footer a {color:#000; text-decoration: underline;}

#footer a:hover {opacity:0.5;}

#footer .left {width:50%;}

#footer li {
    display:block;
    width:50%;
    float: left;
    -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
    box-sizing: border-box;}

#footer .copyright {
    display: block;
    width: 100%;
    float: left;
    margin-top:60px;}

#scrolltop, #scrolldown, #scrollbox {
	position:fixed;
	bottom:40px;
	right:40px;
	display:none;
	width:40px;
	height:40px;
	margin:0 auto;
	background-image:url(../img/arrowup-black.png);
	background-position:center center;
	background-repeat:no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	-webkit-transition: all .2s ease-out;
	-moz-transition: all .2s ease-out;
	-o-transition: all .2s ease-out;
	transition: all .2s ease-out;
	cursor:pointer;
	z-index:100}

#scrolldown, #scrollbox {display:block; background-image:url(../img/arrow-black.png); bottom:40px; right:80px;}

/* ==========================================================================
   FULLPAGE
   ========================================================================== */

#fullpage {background-color: #fff;}

#fullpage .section {
	background-size: cover;
	background-position: center center;
	position: relative;}

#fullpage .section.line {
    width: -webkit-calc(100% - 80px);
    width: -moz-calc(100% - 80px);
    width: -o-calc(100% - 80px);
    width: calc(100% - 80px);
    border-bottom: 1px solid #000;
    margin: auto;
    padding: 0;}

/* ==========================================================================
   SELECTED-WORK + BOXES
   ========================================================================== */

#work {
	position:relative;
	margin:0;
	padding:0;
	width:100%;
	height:auto;
	background-color:#FFF;}

.container{margin:auto;width:100%; /*max-width:1024px;*/}

.box{
	width:100%;
	display:block;
    position: relative;
    overflow: hidden;
	background-position:center center;
	background-repeat:no-repeat;
	-webkit-background-size:101.2%;
	-moz-background-size:101.2%;
	-o-background-size:101.2%;
	background-size:101.2%;
	float:left;
	color:#FFF;
	background-color:#000;
	text-align:center;
	transition: all .2s ease-out;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
    box-sizing: border-box;}

.box .wrapper {display:table; width:100%; height:100%;}
.box .wrapper .cover {display:table-cell; vertical-align:bottom; text-align:left;}

.box.full {width:100%;}
.box.full:before {content:""; display:block; /*padding-top:45%;*/ padding-top:44.8%;
	-webkit-transition: all .2s ease-out;
	-moz-transition: all .2s ease-out;
	-o-transition: all .2s ease-out;
	transition: all .2s ease-out;}

.box.half {width:33.3%;}
.box.half:before {content:""; display:block; padding-top:54%;
	-webkit-transition: all .2s ease-out;
	-moz-transition: all .2s ease-out;
	-o-transition: all .2s ease-out;
	transition: all .2s ease-out;}

.box.tall {width:100%;}
.box.tall:before {content:""; display:block; padding-top:66.6%;
	-webkit-transition: all .2s ease-out;
	-moz-transition: all .2s ease-out;
	-o-transition: all .2s ease-out;
	transition: all .2s ease-out;}

/*ABOUT BOXES*/
.box.team {width:50%;}
.box.team:before {content:""; display:block; padding-top:54%;
	-webkit-transition: all .2s ease-out;
	-moz-transition: all .2s ease-out;
	-o-transition: all .2s ease-out;
	transition: all .2s ease-out;}

.box.studio {width:100%;}
.box.studio:before {content:""; display:block; padding-top:36.5%;
	-webkit-transition: all .2s ease-out;
	-moz-transition: all .2s ease-out;
	-o-transition: all .2s ease-out;
	transition: all .2s ease-out;}

.box-content{
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
	background-color:rgba(0,0,0,0);
	-webkit-transition: all .2s ease-out;
	-moz-transition: all .2s ease-out;
	-o-transition: all .2s ease-out;
	transition: all .2s ease-out;}

/************************ HOVER ************************/
/*Requerido para zoom*/
#work a.box {-webkit-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	-o-background-size: 100% 100%;
	background-size: 100% 100%;}

#work a.box:hover {background-size:103% 103%;}
#work a.box:hover .box-content {background-color:rgba(0,0,0,0.5);}

/************************ HOVER LAMOLE ************************/
/*Requerido para zoom*/
#lamole a.box {
    -webkit-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	-o-background-size: 100% 100%;
	background-size: 100% 100%;
	-moz-box-pack: all .2s ease-out;
	-moz-transition: all .2s ease-out;
	-o-transition: all .2s ease-out;
	transition: all .2s ease-out;}

#lamole a.box:hover {background-size:103% 103%;}
#lamole a.box:hover .box-content {background-color:rgba(0,0,0,0.5);}
/*end*/

/************************ Featured ************************/

.box.Featured {width:50%;}
.box.Featured:before {content:""; display:block; padding-top:54%;
	-webkit-transition: all .2s ease-out;
	-moz-transition: all .2s ease-out;
	-o-transition: all .2s ease-out;
	transition: all .2s ease-out;}

.box.Sports {width:50%;}
.box.Sports:before {content:""; display:block; padding-top:54%;
	-webkit-transition: all .2s ease-out;
	-moz-transition: all .2s ease-out;
	-o-transition: all .2s ease-out;
	transition: all .2s ease-out;}


/************************ TÍTULOS ************************/

.box.Featured .title,
.box.full .title {margin:40px;}

.box.Featured .title h1,
.box.full .title h1 {font-size:24px; line-height:30px; letter-spacing:0;}

.box.Featured .title h2,
.box.full .title h2 {font-size:24px; line-height:30px;}

.box .title {
    position: absolute;
    bottom:0;
	margin:0 30px 25px 50px;
	text-align:left;
	opacity:1;
	-webkit-transition: all .2s ease-out;
	-moz-transition: all .2s ease-out;
	-o-transition: all .2s ease-out;
	transition: all .2s ease-out;}

.box .title h1 {font-size:18px; line-height:22px; letter-spacing:0;}
.box .title h2 {font-size:18px; line-height:22px;}

/************************ BACK TO SELECTED WORK ************************/

.navigation {
	position:relative;
	width:100%;
	padding:40px 40px 0;
    color:#000;
    float:left;
    text-align: left;
    font-size:20px;
    line-height:24px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
	background:#FFF;}

.navigation a:hover {color:#000; opacity:0.5;}

.bottomline {
    width:100%;
    border-bottom: 1px solid #000;
    margin: 40px auto 0;
    padding: 0;}

/* ==========================================================================
   BOXES + CONTENT
   ========================================================================== */

#content {
	position:relative;
	margin:0;
	padding:0;
	width:100%;
	height:auto;
	background-color:#FFF;}

#content .container{margin:auto;width:100%;	/*max-width:1024px;*/}

#content .wrapper {display:table; width:100%; height:100%;}
#content .wrapper .cover {display:table-cell; vertical-align:middle;}

#content .box-content h1, #content .box-content h2, #content .box-content h3, #content .box-content p {
	color:#fff;
	margin:auto;
	width:100%;
	max-width:640px;
	padding:0 20px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .2s ease-out;
	-moz-transition: all .2s ease-out;
	-o-transition: all .2s ease-out;
	transition: all .2s ease-out;}

#content .box-content h2 {font-size:80px; line-height:80px; max-width:1080px;}

#content .box-content span {
	background-color:#000;
	display:inline-block;
	padding:5px 10px 0px;}

.box .arrow {
	display:block;
	width:40px;
	height:40px;
	margin:0 auto;
	background-image:url(../img/more.png);
	background-position:center center;
	background-repeat:no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	-webkit-transition: all .2s ease-out;
	-moz-transition: all .2s ease-out;
	-o-transition: all .2s ease-out;
	transition: all .2s ease-out;}

.box .arrow {opacity:0.2}
.box a:hover .arrow {margin-top:20px;opacity:1;}

/* ==========================================================================
   PROJECTS
   ========================================================================== */

#project {
	position:relative;
	margin:0;
	padding:0;
	width:100%;
	height:auto;
	float: none;
	display:inline-block;
	color:#fff;
	background-color:#181617;
    -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
    /*padding-top:110px;*/}

#project .container {max-width:1640px; float:left;}

#project .description {
    position: fixed;
	width:360px;
	padding:40px;
    top:110px;
	float:left;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: top .2s ease-out;
	-moz-transition: top .2s ease-out;
	-o-transition: top .2s ease-out;
	transition: top .2s ease-out;}

#project .description h1 {font-size:42px; line-height:45px;}
#project .description h3 {font-size:16px; line-height:20px;}

#project .title,
#project .text,
#project .awards {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;}

#project .title {float:left; padding-right:40px; margin-bottom:20px;}
#project .text {float:left; margin-bottom:40px;}
#project .awards {float:left; padding-right:40px; margin-bottom:20px;}

#project .portfolio {
    width: -webkit-calc(100% - 360px);
    width: -moz-calc(100% - 360px);
    width: -o-calc(100% - 360px);
    width: calc(100% - 360px);
	float:right;
	padding:40px;
    max-width:1280px;
    margin-top: 110px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;}

.videoWrapper {
	position: relative;
	padding-bottom: 54%; /* 16:9 */
	padding-top:25px;
	height: 0;
	overflow:hidden;
	background-color:#181617;
	/*background-image:url(../img/fancybox_loading@2x.gif);*/
	background-size:20px 20px;
	background-repeat:no-repeat;
	background-position:center center;}

.videoWrapper.wide {
	padding-bottom: 33.36%; /* 32:18 */
}

.videoWrapper.fifty {
	padding-bottom: 50%; /* 32:18 */
}

.videoWrapper.sitiados {
	padding-bottom: 53%; /* 32:18 */
}

.videoWrapper.about {
    padding-top:0;
	padding-bottom: 36.459%; /* 32:18 */
}

.videoWrapper.about iframe{
	position: absolute; top: 0;
}

.videoWrapper iframe,
.videoWrapper object,
.videoWrapper embed  {
	position: absolute;
	top:-1px;
	left: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
	background-color:transparent;}

/* COMMENTS COLUMNS */

#content .comments {
	display:block;
	float:left;
	width:100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding:40px 80px;
	text-align:center;}

#content .comments strong,
#content .comments p {font-family:"supercircular";}

#content .comments li {
	display:inline-block;
	width:33%;
	max-width:480px;
	padding:30px;
	text-align:left;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;}

#content .comment-title {font-weight:600; color:#fff; padding-bottom:50px}
#content .comments .comment {min-height:200px; color:#808080; padding-bottom:50px}

/* ==========================================================================
   ABOUT
   ========================================================================== */

#about {
	position:relative;
	margin:0;
	width:100%;
	height:auto;
	display: block;
	float: left;
	color:#000;
	background-color:#fff;
    -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
    box-sizing: border-box;
    padding: 80px 40px 40px;}

#about h1 {font-size:120px; line-height: 120px;  width: 90%}
#about h2 {font-family: "supercircularbold"; font-size:70px; line-height: 70px;}
#about h3 {font-size:40px; line-height: 40px;}
#about h4 {font-size:20px; line-height: 25px;}
#about p {font-size:28px; line-height: 35px;}

#about a {color:#000; text-decoration: underline;}
#about a:hover {opacity:0.5}

#about .left {width:66.6%;}
#about .right {width:33.3%; text-align: left;}

#about .on-top {
    position: relative;
    z-index: 9999;
    top: 80px;
    margin-top: -80px;}

#about .columns {
	display: block;
    width:100%;
	float: left;
    margin: 0 auto;
    padding: 0;}

#about .columns li {
    position: relative;
	width:33.3%;
	margin:0 auto;
	text-align:left;
    float:left;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
    box-sizing: border-box;
    padding:0 60px 60px 0;}

#about .top-right {
    position: absolute;
    top:0;
    right: 60px;
    font-size: 18px;
    text-decoration: none;}

#about .top-right:before {
    content: '';
	width: 60px;
    margin-bottom: 10px;
	border-top: 2px solid #000;
	display: block;
}

#about .box.full {margin-top:-50px; margin-bottom:60px;}

#about.what-people-say h3 {width: 50%}

#about.awards .columns li {width:25%;}
#about.awards h4.line:before {
    content: " ";
    border-top: 2px #000 solid;
    width: 40px;
    display: block;
    margin-bottom: 30px;
}

#about.team {padding:0;}


#about.clients img {
    position: relative;
	width:25%;
    height: auto;
	margin:0 auto;
	text-align:left;
    float:left;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
    box-sizing: border-box;
    padding:40px;}

#about.press {padding-top:100px; padding-bottom: 150px}

#about .press {
    display:block;
    width:auto;
    height:60px;
    background-repeat:no-repeat;
    background-color: transparent;
    -webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
    padding:0;
    margin-bottom:10px}

#about .stash {width:64px; background-image:url(../about/press-stash.png);}
#about .promaxbda {width:160px; background-image:url(../about/press-promaxbda.png);}
#about .idn {width:70px; background-image:url(../about/press-idn.png);}
#about .motionographer {width:164px; background-image:url(../about/press-motionographer.png);}
#about .hollywood {width:160px; background-image:url(../about/press-hollywood.png);}

#about.what-we-do {padding-top:160px; padding-bottom:120px;}
#about.what-people-say {padding-top:140px; padding-bottom:50px;}
#about.who-we-are {padding-bottom:90px;}
#about.awards-intro {padding-top:180px;}
#about.awards {padding-top:100px;}
#about.clients {padding-top: 140px; padding-bottom:0;}



/************************ HOVER ************************/
.box.team .box-content {background-color:rgba(0,0,0,0);}
.box.team:hover .box-content {background-color:rgba(0,0,0,0.8);}
.box.team .title {opacity:0;}
.box.team:hover .title {opacity:1;}
/*end*/

/* ==========================================================================
   CONTACT
   ========================================================================== */

#contact {
	position:relative;
	margin:0;
	width:100%;
	height:auto;
	display: block;
	float: left;
	color:#000;
	background-color:#fff;
    -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
    box-sizing: border-box;
    padding: 80px 40px;}

#contact h1 {font-family: "supercircular"}
#contact h2 {font-size:40px; line-height: 45px;}
#contact h3 {font-size:28px; line-height: 35px;}

#contact a {color:#000; text-decoration: underline;}
#contact a:hover {opacity:0.5}

#contact .left {width:66.6%;}
#contact .right {width:33.3%; text-align: left;}

#contact .columns {
	display: block;
    width:100%;
	float: left;
    margin: 80px auto 0;
    padding: 0;}

#contact .columns li {
    position: relative;
	width:50%;
	margin:0;
    padding:0 40px 40px 0;
	text-align:left;
    float:left;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
    box-sizing: border-box;}

/* ==========================================================================
   LAMOLE
   ========================================================================== */

#lamole {
	position:relative;
	margin:0;
	width:100%;
	height:auto;
	display: block;
	float: left;
	color:#fff;
	background-color:#000;
    -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
    box-sizing: border-box;
    padding: 80px 40px;}

#lamole.intro {background-color:transparent; text-align: center}
#lamole.intro .button {font-size:40px; border:none; border-bottom: 2px solid #fff; padding:0 0 10px 0;}

#lamole.manifesto h1 {font-size:70px; line-height: 70px;  width: 90%}

#lamole.work {padding:0;}
#lamole.work .coming-soon {
    position: absolute;
    top:50%;
    left: 50%;
    width: 240px;
    height: 50px;
    margin-top: -25px;
    margin-left: -120px;
    text-align: center;
}

/********************* AGREGADOS ABRIL-MAYO *********************/

#project .text p {font-family:"supercircular"; font-size:13px; line-height:18px; color:#ccc}
#project .text p strong {font-family:"supercircularbold"; font-size:13px; color:#fff; display: block; padding-top:10px;}

#header .main .intro h1 {font-family:"supercircular";}
#project .description h3 {font-family:"supercircularbold";}

.box .title h3 {font-family:"supercircularbold";}
.box .label .left {font-family:"supercircularbold";}

.quotes h3 {font-family:"supercircularbold";}
.quotes .columns li p{font-family:"supercircular";}

.box .clients {max-width:1030px; margin:auto;}
.box .clients img {margin:10px 30px;}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

.mobile {display:none;}

@media only screen and (min-width: 1600px) {
.box-content h1 {font-size:110px; line-height:110px; max-width:1024px;}
.box-content h3 {font-size:20px; line-height:28px; max-width:1024px;}
/*.half {width:25%!important;}*/

}

@media only screen and (max-width: 1390px) {#project .portfolio {max-width:960px;}}
@media only screen and (max-width: 1330px) {#project .portfolio {max-width:900px;}}

@media only screen and (max-width: 1280px) {
/*Home*/

/*Project*/
#project .portfolio {max-width:840px;}

/*About*/
#about h1 {font-size:90px; line-height:90px;}
#about h2 {font-size:50px; line-height:50px;}
#about h3 {font-size:34px; line-height:34px;}
#about h4 {font-size:18px; line-height:24px;}
#about p {font-size:24px; line-height:28px;}
#about .columns li {width:50%;}
#about .columns hr {display: none;}
#about.awards .columns li {width:50%;}
#about.clients img {padding:20px;}

/*Lamole*/
#lamole.manifesto h1  {font-size:50px; line-height:50px;}

}

@media only screen and (max-width: 1200px) {
#header .nav .tagline {display:none;}
}

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

.half {width:50%!important;}
/*#work .Featured {width:100%!important;}*/

#header .nav .logo {
		height:20px;
		margin-top:27px;
		background-image: url(../img/superestudio.png);
		background-position:center;
}

/*Header*/
#header.home {position:relative}
#header.selected {position:relative}
#header .nav {padding:20px; background-color: #fff!important; color: #000!important;}

#header a.selected-work {display:inline-block;} 
#header div.selected-work {display:block;}

/*#header .nav .logo {background-image:url(../img/superestudio-black-old.png)!important; width: 100px; height: 50px; float: left!important; clear: both}*/
#header .nav .logo {
		width:50px;
		height:50px;
		margin-left:7px!important;
		background-image: url(../img/superestudio-black.png);
		background-position:center;
}

#header .nav .right {display:none;}
#header .nav .left {margin:auto; clear: both;}
#header .nav .menu {float:left; margin: 10px 0 0 10px; clear: both}
#header .nav .menu li {margin:0 auto 10px; height:auto; text-align:left; float:none; clear: both}
#header .nav .menu li:first-child {margin-top:30px;}
#header .nav .menu li a,
#header .nav .menu li div {font-family:"supercircular"; font-size:40px; line-height:45px; color:#000; letter-spacing:-1px; height:auto;}
#header .nav .menu li a.active {font-family:"supercircularbold";}
body #header li a:after {display: none;}
body.black #header li a:after {display: none;}

#submenu {margin:0 0 10px 20px;}
#submenu div {display: block; box-sizing:border-box;}
#submenu a {display: inline-block; font-size:28px; line-height:35px; padding: 5px 0; color:#000;}

#submenu a:after {
	display:block;
	content:" ";
	border-bottom:2px solid #000;
	width:0;
	padding:3px 0;
	-o-transition:all .2s ease-out;
	-ms-transition:all .2s ease-out;
	-moz-transition:all .2s ease-out;
	-webkit-transition:all .2s ease-out;
    transition:all .2s ease-out;
}
#submenu a.active:after {width:30%;}

#submenu a:hover:after,
#submenu a.active:hover:after {width:15%;}

/*Footer*/
#footer .left {display: block; width: 100%; float:left; margin:auto;}
#footer .left li {width: 100%; margin:20px auto 0;}
#footer .left li:first-child {margin:0;}
#footer .right {display: block; width: 100%; float:left; margin:20px auto 0;}

/*Boxes*/
.box-content h1 {font-size:80px; line-height:80px; max-width:520px;}
.box-content h3 {font-size:17px; line-height:20px; max-width:520px;}

.box.Featured .title,
.box.full .title,
.box .title {margin:30px}

/* Case Studies & Projects */
.fixed {position:relative;}
#project .portfolio {width:100%; max-width:none; padding:0; float:left;}
#project .description {max-width:none; width:100%; float:left; top: 0;}
#project .portfolio .navigation {padding:40px;}

/*About*/
#about h1 {font-size:70px; line-height:70px;}
#about h2 {font-size:40px; line-height:40px;}
#about h3 {font-size:30px; line-height:30px;}
#about h4 {font-size:16px; line-height:20px;}
#about p {font-size:20px; line-height:26px;}
#about .top-right {font-size:16px; position:relative; top:20px; right:auto; float:left; padding-bottom: 40px;}

#about.what-we-do {padding-top:100px; padding-bottom:30px;}
#about.what-people-say {padding-top:80px; padding-bottom:30px;}
#about.who-we-are {padding-bottom:50px;}
#about.awards-intro {padding-top:100px;}
#about.awards {padding-top:50px;}
#about.clients {padding-top: 80px; padding-bottom:0;}

#about.what-we-do .columns li {height:260px;}

/*Contact*/
#contact .columns li {width:100%;}

/*Lamole*/
#lamole.manifesto h1  {font-size:40px; line-height:40px;}

/*Selected Work*/
#filtro .boxes {text-align:center; float:none; margin:auto;}
#filtro .boxes li {float:none; display:inline; margin:10px;}
}

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

/* Content + Boxes */
.box.Featured .title h1,
.box.Featured .title h2,
.box.full .title h1,
.box.full .title h2,
.box .title h1,
.box .title h2 {font-size:20px; line-height:26px;}
.full:before {padding-top:60%;}
.box-content h1 {font-size:65px; line-height:65px; max-width:440px;}
.box-content h3 {font-size:14px; line-height:16px; max-width:440px;}

/* Selected Work */
.half {width:100%!important;}

/* Case Studies & Projects */
#project .title,
#project .text,
#project .awards {width:100%; float:left; padding-right:0;}
#project .description {padding:30px;}
#project .portfolio .navigation {padding:30px;}

/*About*/
#about {padding:60px 30px 40px}
#about h1 {font-size:50px; line-height:50px;}
#about h2 {font-size:30px; line-height:30px;}
#about h3 {font-size:24px; line-height:28px;}
#about .columns li {width:100%;}
#about.what-we-do .columns li {height:auto;}
#about.awards .columns li {width:100%;}
#about.clients img {width:50%;}
#about .box.team {width:100%;}

/*Contact*/
#contact {padding:60px 30px 40px}
#contact h1 {font-size:50px; line-height:50px;}
#contact h2 {font-size:30px; line-height:30px;}
#contact h3 {font-size:24px; line-height:28px;}
#contact .columns li {width:100%;}

/*Lamole*/
#lamole.manifesto h1  {font-size:30px; line-height:30px;}

/*FILTRO*/
#filtro .boxes li {float:none; display:inline; margin:10px 5px;}

/*Footer*/
#fullpage .section.line {
    width: -webkit-calc(100% - 60px);
    width: -moz-calc(100% - 60px);
    width: -o-calc(100% - 60px);
    width: calc(100% - 60px);}
#footer {padding:30px;}
#footer .copyright {
    width: -webkit-calc(100% - 60px);
    width: -moz-calc(100% - 60px);
    width: -o-calc(100% - 60px);
    width: calc(100% - 60px);}

.navigation {padding:35px 30px 0;}
.bottomline {margin-top:30px;}
}

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

/*Menu Responsive*/
#header .nav {padding:10px 20px; }
#header .open, #header .close {right: 10px; top:10px}
#header .nav .menu li:last-child {margin-bottom: 25px;}
#header .nav .menu li a,
#header .nav .menu li div {font-size: 35px; line-height: 40px;}

/*Boxes*/
.box.Featured .title,
.box .title {margin:25px}
.box a .arrow {opacity:1;}
.box .title h1, .box .title h2 {font-size: 20px; line-height: 25px;}
.box-content h1 {font-size:40px; line-height:40px; max-width:320px;}
.box-content h3 {font-size:12px; line-height:20px; max-width:320px;}

.full {width:100%;}
.full:before {display:none}

#content .box .box-content {position:relative; top:auto; left:auto; bottom:auto; right:auto; padding:40px 0}

/*About*/
#about .columns li {padding:0 20px 40px 0}
#about.awards img {width:100px;}

/*Contact*/
#contact h1 {font-size:40px; line-height:40px; width: 100%;}
#contact h2 {font-size:22px; line-height:26px;}
#contact h3 {font-size:16px; line-height:20px;}
#contact .columns {margin-top: 40px}
#contact .columns li {padding:0 20px 40px 0}

/*Lamole*/
#lamole.intro .button {font-size: 25px; padding: 0 0 5px 0;}
#lamole.work .coming-soon {top:0; left: auto; right:0; margin:20px; width: auto; height: auto; text-align: right;font-size: 20px; line-height: 20px}

/*Footer*/
#scrolldown {display:none!important;left:20px; bottom:20px}
#scrollbox {display:none!important;left:20px; bottom:20px}
#scrolltop {right: 30px; bottom: 40px;}


}

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

/*Selected Work with no h2*/
#work .boxes .box .cover .title h2 {display:none;}

/*Boxes*/
.box .title h1, .box .title h2 {font-size: 14px; line-height: 20px;}
.box .title {margin:20px 25px;}

/*Case Studies & Projects*/
#project .portfolio .navigation {padding:20px;}

/*About*/
#about {padding:30px 20px 20px}
#about h1 {font-size:40px; line-height:40px; width: 100%;}
#about h2 {font-size:26px; line-height:28px;}
#about h3 {font-size:22px; line-height:26px;}
#about h4 {font-size:13px; line-height:18px;}
#about p {font-size:16px; line-height:20px;}
#about .on-top {top: 35px; margin-top: -35px;}
#about .top-right {font-size:13px;}
#about .columns li {padding:0 10px 30px 0}
#about.awards .columns li {width:100%;}
#about .box.team {width:100%;}
#about.clients img {width:50%;}

/*Contact*/
#contact {padding:30px 20px 20px}
#contact .columns {margin-top: 20px}
#contact .columns li {padding:0 10px 30px 0}

/*Lamole*/
#lamole.manifesto h1 {font-size:26px; line-height:28px;}
#lamole.work .coming-soon {font-size:26px;}

/*Footer*/
#fullpage .section.line {
    width: -webkit-calc(100% - 40px);
    width: -moz-calc(100% - 40px);
    width: -o-calc(100% - 40px);
    width: calc(100% - 40px);}
#footer {padding:30px 20px;font-size:16px; line-height:20px;}

.navigation {padding:35px 20px 0; font-size:16px;}
.bottomline {margin-top:25px;}

}

/* ==========================================================================
   END OF RESPONSIVE
   ========================================================================== */
.player .video-wrapper {background: #000!important}