/*styles for general elements*/
* {box-sizing:border-box;padding:0;margin:0;font-family: 'DM Sans', sans-serif;}

body{overflow:hidden;}

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

.clickable{cursor:pointer}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.mainNav{
	border:solid 0px;
	display:inline-block;
	height:100%;
	margin:0; 
	width:33%;
	padding:0;
	text-align:center;
}

.textRight{text-align:right;}

.textLeft{text-align:left}

.cell{display:inline-block;}

.strikerContainer{padding: 15px 30px;position:relative;display:inline-block;}

.striker{width:0px;border-bottom:solid 1px #000;position:absolute;top:50%;left:-10%;opacity:0;}

.strikerContainer.active .striker{opacity:1;width:110%;}

.withSeparator{border-left:solid 1px;}

.desktopBlockElement,.desktopInlineElement{display:none;}
.mobileInlineElement{display:inline;}
.mobileBlockElement,.miniBlockElement{display:block;}

/*styles for the header*/
header{position:relative;z-index:5;width:100%;height:0px;}

header .flotantHeader{display:flex;position:absolute;width:100%;height:48px;margin-top:-91px;
border:solid 0px #000;}
	
header .mainNav{background:#fefefe;height:48px;padding:11px 15px;border-bottom:solid 1px #dcdcdc;}

header .mainNav.leftNav,header .mainNav.rightNav{width:15%;}

header .mainNav.centerNav,.mainNav.projectsNav{width:70%}

header .mainNav .strikerContainer{padding:0;font-family: 'DM Sans', sans-serif;font-weight:bold;
font-size:10px;}

header .mainNav.leftNav span{display:table-cell;height:100%;position:relative;vertical-align:middle;
top:-2px;text-transform: uppercase;font-weight:bold;letter-spacing: 6px;font-size: 13px;}

header .mainNav.leftNav .breadcrumbsItem{top:0px;}

header .mainNav .burgerContainer{position:relative;vertical-align:middle;}

header .mainNav.leftNav .subtitleContainer{display:none;}

header .mainNav .burgerLoaf{position:relative;height:2px;width:14px;background:#000;margin:4px 0;
bottom:-3px;margin-left:auto;margin-right:auto;}

header .mainNav .burgerLoaf:first-child{width:24px;}

header .mainNav .burgerLoaf:nth-child(2){height:3px;}

header .mainNav .burgerLoaf:nth-child(3){width:24px}

header .mainNav .burgerLoaf:last-child{opacity:0;width:24px;}

header .mainNav.leftNav .xContainer{position:relative;vertical-align:middle;width:24px;left:-24px;
background:transparent;top:-4px;}

header .mainNav.leftNav .xContainer .crossArm{position:absolute;height:3px;width:24px;background:#000;
margin:17px 0;opacity:0}

/*styles for main content*/

main{height:100%;width:100%;position:relative;margin:0;top:0;padding:0;overflow:hidden;}

main .loader{position:absolute; top:50%;margin-top:-60px;left:50%;margin-left:-16px;z-index:0;}

.landingPageBackground,.gallery,.projectContainer,.contentSection{display:none;}

main section.activeSection{display:block;}

/*styles for landing page*/
main .landingPageBackground{width:100%;height:100%;background-color:#ececec;position:relative;
border:solid 1px #dcdcdc;}

main .landingPage {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:white;
	background-size:cover;
	background-position: 50% 50%;
	z-index:0;
	opacity:0;
	-webkit-transform: scale(1.07,1.07);
	   -moz-transform: scale(1.07,1.07);
	    -ms-transform: scale(1.07,1.07);
	     -o-transform: scale(1.07,1.07);
	        transform: scale(1.07,1.07);

	-webkit-transition: opacity 0, -webkit-transform 0;
	   -moz-transition: opacity 0, -moz-transform 0;
	     -o-transition: opacity 0, -o-transform 0;
	        transition: opacity 0, transform 0;
			}
			
main .landingPage.current{
	top:0;
	left:0;
	z-index:2;
	opacity:1;
	-webkit-transform: scale(1,1);
	-moz-transform: scale(1,1);
	-ms-transform: scale(1,1);
	-o-transform: scale(1,1);
	transform: scale(1,1);
	-webkit-transition: opacity 1.6s ease-out, -webkit-transform 4.2s linear;
	-moz-transition: opacity 1.6s ease-out, -moz-transform 4.2s linear;
	-o-transition: opacity 1.6s ease-out, -o-transform 4.2s linear;
	transition: opacity 1.6s ease-out, transform 4.2s linear;
}

main .landingPage.past{z-index:1;}

main .landingPageHidden{top:120%;}

main .landingName{font-family: 'DM Sans', sans-serif;position:absolute;z-index:2;color:black;top:50%;
margin-top:-128px;color:#000;font-weight:bold;font-size:60px;left:50%;margin-left:-97px;opacity:0;width:100%;}

main .landingName span{position:relative;opacity:0;display:inline-block;width:12px;top:-10px;
text-align:center;color:#000;}

main .scroll{font-family: 'DM Sans', sans-serif;font-weight:bold;font-size:17px;z-index:2;
position:absolute;bottom:90px;margin-left:auto;margin-right:auto;width:100%;
text-align:center;color:#ececec}

/*styles for the main gallery*/
main .gallery{width:100%;height:100%;position:absolute;top:100%;background:#ececec;z-index:0;
padding-top:48px;overflow:scroll;}

main .cell{width:100%;height:290px;border:solid 0px;float:left;background-size:cover;
	background-position: 0% 0%;top:110%;position:relative;}
	
main .cell .cellOverlay{height:100%;width:100%;background-color:rgba(0,0,0,0)}

.imgName,.cellOverlay hr,.imgDescription{opacity:0;color:white;position:relative;top:50%;
text-align:center;margin:0 auto;padding:10px 0;}

main .cell .cellOverlay .imgName{font-size:20px;font-family: 'Public Sans', sans-serif;}

main .cell .cellOverlay .imgDescription{font-size:20px;font-family: 'Pinyon Script', cursive;}

main .cell .cellOverlay hr{padding: 0; width:33%}



/*styles for the container of each project*/
main .projectContainer{width:100%;height:100%;position:absolute;top:100%;background:#e0e0e0;z-index:0;
padding-top:48px;/*overflow-x:scroll;*/}

main .projectLeftCol{background:#e0e0e0;height:auto;width:100%;left:0;top:0;}

main .projectImg{width:100%;margin:0 auto;display:inline;}

main .imgContainer{text-align:center;font-size:0;}

main .sliderControlContainer{position:absolute;z-index:3;top:50%;left:0;width:70%;display:none;}
main .sliderControl{position:absolute;z-index:3;}
main .sliderControl.nextImg{right:17px}
main .sliderControl.prevImg{left:17px;}
main .sliderControl.closeImg{top:60px;left:17px;}

main .projectRightCol{background:#fff;height:0;width:100%;position:relative;overflow-y:auto;}

main .projectRightCol .rightColContainer{background:#fff;padding:0;height:calc(100% - 78px);width:100%;
position:absolute;top:48px;left:-100%}

main .projectRightCol .rightColContainer.activeInfoContainer{left:0}

main .projectLeftCol .leftColContainer{background:transparent;padding:0;height:100%;width:100%;position:absolute;
left:0;overflow:auto;left:-100%}

main .projectLeftCol .leftColContainer.activeImgContainer{left:0;}

main .projectLeftCol #videoList.leftColContainer .imgContainer{display:none}

 main .projectLeftCol #videoList.leftColContainer .imgContainer.active{display:initial;}

main .projectLeftCol .leftColContainer .imgContainer video{position: absolute;max-width:100%;
max-height:100%;top: 0;bottom: 0;left: 0;right: 0;margin: auto;}



main .projectRightCol .rightColSections{width:100%;border-bottom:2px solid #e0e0e0;}

main .projectRightCol .controlsGalleryContainer{height:40px;position: fixed;bottom: 40px;background:white;text-align:center;}
main .projectRightCol .galleryControl{display:inline-block;width: 33.33%;float:left;padding-top:10px;
text-align:center;}
main .projectRightCol .arrowsGallery{height:20px;}

main .projectRightCol .dataGalleryContainer{height:380px;text-align:center;}
main .projectRightCol h1{font-size:22px;margin-top:40px;margin-bottom:25px;}
main .projectRightCol h2{font-family:roboto;font-size:13px;font-weight:400;color:#727171;
margin-bottom:20px;}
main .projectRightCol p{font-family:'Roboto',sans-serif;font-size:11px;font-weight:300;color:#727171;
line-height:20px; padding: 0 15px;}
main .projectRightCol .thumbsGalleryContainer{min-height:calc(100% - 528px);text-align:center;}
main .projectRightCol .thumbsGalleryContainer .miniGalleryImg{opacity:0.7;}
main .projectRightCol .thumbsGalleryContainer .miniActive{opacity:1}
main .projectRightCol .creditsGalleryContainer{height:60px;margin-bottom:6px; font-size:11px;
text-align:center;}
main .projectRightCol .creditsGalleryContainer span{position:relative;top:33%;}

/* here we style the content sections */
main .contentSection{height:100%;width:100%;position:absolute;top:100%;background:#ececec; 
text-align:center;padding-top:48px;overflow:auto;}

/*styles for the left menu */
main .leftMenuContainer{height:100%;width:100%;left:-100%;opacity:0;top:-100%;z-index:0;}

main .leftMenu{position:absolute;height:100%;width:220px;background:#fff;left:-220px;top:0;z-index:4;
padding-top:80px;font-size: 12.5px;letter-spacing: 5px;}

main .leftMenuOverlay{position:absolute;width:100%;height:100%;background-color:#000;opacity:0;z-index:3;}


/* para las secciones de texto, dos columnas */

.produccionSection, .nosotrosSection,.contactoSection{background:white !important;overflow:auto;}
.textSectionWrapper{width:100%;max-width:1280px;padding:0 10px; position:relative;}


.articleCol{display:block;text-align:justify;}
.articleLeftCol{margin-top:30px;}
.articleLeftCol h3{position:relative;text-align:center;}
.articleRightCol{margin-top:70px; border:solid 1px #dcdcdc;padding:30px; font-size:12px;
line-height:20px;letter-spacing:2px;}
.articleRightCol h3{text-align:center;}


.textSectionImg{width:100%;margin-bottom:30px;}
.contactoSection .textSectionWrapper{height:calc(100% + 100px);}
.contactoCols{width:100%;display:block;border:solid 1px #dcdcdc;}
.contactoRightCol{text-align:center;padding-top:30px;}
.contactoRightCol b{font-size:22px;}
.contactoLeftCol{font-family:roboto,sans-serif;font-size:10px;margin-top:10px;}
.contactoLeftCol h2{font-family:'DM Sans',sans-serif;font-size:20px;margin-top:20px;}
.contactoSectionImg{width:100.5%}
.contactoSection h5{text-align:center;margin: 40px 0;}
.contactoMiniCols{width:100%;line-height:20px;margin-top:20px;}
.contactoMiniCols:nth-child(2){padding-top: 5%;text-align: center;}
.contactoMiniCols{color:#727171;font-family:'Roboto',sans-serif;font-size:11px;line-height:2.5;font-weight:400;}
/* this is so the h6 stays aligned with the central vertical border of the section above*/
.contactoLeftCol h6{margin-right: -17px;font-size:12px;color:#727171;font-family:'Roboto',sans-serif;
font-weight:400}
.contactoRightCol hr{border:0;border-top:solid 1px;border-color:#bfbfbf;height:1px;width:50%;margin:30px auto 0 auto;}
.contactoRightCol .inputField{display:block;margin:0 auto;border:0;margin-top:20px;
font-family:'Roboto',sans-serif;font-style:italic}
#telefono.inputField{margin-bottom:20px;}
.contactoRightCol p{text-align:center;font-family:'Roboto',sans-serif;color:#727171;font-style:italic;font-weight:300;
font-size:16px;margin-bottom:20px}
.contactoRightCol textarea.inputField{border-top:solid 1px;border-bottom:solid 1px;border-color:#bfbfbf;width:50%;
height:120px;margin-top:5px;margin-bottom:20px;}
.contactoLeftCol h6.locale{margin-bottom:100px;}

input.inputField::placeholder{text-align:center;font-family:'Roboto',sans-serif;font-weight:400}
.contactoRightCol .contactoOverlay{height:150px;width:100%;background:white;color: #727171;
font-family: 'Roboto',sans-serif;font-size: 11px;font-weight:400;text-align:left;padding: 0 15px;}
.contactoSection .lookbookDiv{text-align:center;}
.contactButton {margin-bottom: 30px;padding:0 10px;}

/*styles for the footer*/
footer{display:flex;background:black;position:fixed;margin-bottom:0px;bottom:0px;width:100%;
z-index:13;height:40px;}

footer .mainNav a{color:white;}

footer .mainNav {font-size:10px;color:white;padding:14px;text-align:center;width:33.33%;}

footer .mainNav.rightFooter span{position:relative;top:-6px;}

footer .mainNav.rightFooter img{top:-2px;}

footer .mainNav.rightFooter img.mobileInlineElement,footer .mainNav.leftFooter img.mobileInlineElement,
footer .mainNav.centerFooter img.mobileInlineElement{position:relative;top:-9px;}

footer section.mobileBlockElement{width:100%;text-align:center;}
footer section.mobileBlockElement img{margin:5px 6%;}



@keyframes invertColor {
  from {
    filter: invert(0%);
  }

  to {
    filter: invert(100%);
  }
}

.sliderControl img {
  animation-duration: 2s;
  animation-name: invertColor;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  border-radius: 3px;
}

.scroll {
  animation-duration: 2s;
  animation-name: invertColor;
  animation-delay: 4s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

/*all the media queries*/
@media only screen and (min-width: 319px) {
  .miniBlockElement{display:none;}
}

@media only screen and (min-width: 330px) {
  header .mainNav .strikerContainer{font-size:18px;}
}

@media only screen and (min-width: 600px) {
  main .cell {width:50%;}
}
@media only screen and (min-width: 768px) {
  header .mainNav.leftNav,header .mainNav.rightNav,header .mainNav.centerNav,header .mainNav.projectsNav{width:33.33%;}

  header .mainNav.leftNav .subtitleContainer{display:table-cell;font-size: 15px;}
  main .landingName{margin-top:-170px;font-size:170px;margin-left:-355px;}
  main .landingName span{width:50px;top:-10px;}
  main .landingName span:nth-child(6){width:20px;}
  main .landingName span:nth-child(13){width:30px;}
  main .landingName span:nth-child(15){width:25px;}
  main .cell {width:33.3%;}
  main .projectLeftCol{width:70%;position:relative;height:calc(100% - 56px);overflow:hidden;padding:17px;}
  main .projectLeftCol .leftColContainer{overflow:hidden;}
  main .sliderControlContainer{display:block;}
  main .projectLeftCol .imgContainer{position: absolute;width: 100%;height:calc(100% - 20px);
    text-align: center;padding; auto 0;}
  
  main .projectLeftCol #videoList.leftColContainer .imgContainer{display:initial}
  main .projectLeftCol .imgContainer.active{left:0;}
  
  
  main .projectRightCol p{line-height:25px;}
  main .projectRightCol .controlsGalleryContainer{position:relative;bottom: auto;}
  
  main .projectImg{max-height: 100%;max-width: 100%;width: auto;height: auto;position: absolute;top: 0;
  bottom: 0;left: 0;right: 0;margin:auto;}
	
  main .projectRightCol{height:100%;width:30%;position:absolute;background:#fff;right:0;
	padding-top:70px;top:0;border:solid 1px #e0e0e0;}

}

@media only screen and (min-width: 1024px) {
  .textSectionWrapper{margin:0 auto;padding:0;}
  .articleLeftCol h3{font-size:22px;}
  .articleCol{float:left;display:inline-block;height:100%;}
  .articleLeftCol{width:20%;margin-top:25%;margin-left:10%;}
  .articleRightCol{width:60%; margin-right:10%;}
  main .cell {width:25%;}
  main .projectRightCol p{line-height:40px;}
  .contactoMiniCols{width:50%;float:left;}
  
  .contactoCols{width:calc(50%);height:700px;display:inline-block; margin-top:60px;}
  .contactoSection h5{text-align:left;margin:0;}
  .contactoRightCol{float:right;}
  .desktopBlockElement{display:block;}
  .desktopInlineElement{display:inline;}
  .mobileInlineElement{display:none;}
  .mobileBlockElement{display:none;}
  .contactoLeftCol{float:left;margin-top:60px;}
  .contactoLeftCol h6{margin-right: 0;}
  .contactoMiniCols{height:114px;margin-bottom:50px; }
  .contactoMiniCols:nth-child(3){text-align: right;padding-right: 5px;}
  .contactoMiniCols:nth-child(4){border-left:solid 1px #727171;text-align: left;padding-left: 7px;}
  .contactoLeftCol h6.locale{margin-right:-32px;font-size:14px;letter-spacing:4px;}
}
@media only screen and (min-width: 1280px) {
  main .gallery .cell {width:20%;}
  main .projectLeftCol{width:calc(100% - 400px);}
  main .sliderControlContainer{width:calc(100% - 400px);}
  main .projectRightCol{width:400px;margin-right:0;}
  .contactoCols{width:calc(50% - 40px)}
  .contactoLeftCol{float:left;margin-top:60px;margin-left:0px;}
  .contactoMiniCols:nth-child(3){padding-right: 20px;}
  .contactoMiniCols:nth-child(4){padding-left: 20px;}
}

@media only screen and (min-width: 1921px) {
  main .cell {width:10%;}
}

@media only screen and (min-width: 2560px) {
  main .cell {width:10%;}
}