@charset "utf-8";
/***********************************************************************************************************************************************/
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{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}*{outline: none;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing:border-box; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased;-moz-font-smoothing: antialiased;text-rendering:optimizeLegibility;}
/***********************************************************************************************************************************************/
@font-face{font-family: 'AvenirN-Regular'; src: url('../_font/AvenirNext-Regular.eot?#iefix') format('embedded-opentype'),  url('../_font/AvenirNext-Regular.woff') format('woff'), url('../_font/AvenirNext-Regular.ttf')  format('truetype'), url('../_font/AvenirNext-Regular.svg#AvenirN-Regular') format('svg');font-weight: normal;font-style: normal;}
@font-face{font-family: 'AvenirN-Medium'; src: url('../_font/AvenirNext-Medium.eot?#iefix') format('embedded-opentype'),  url('../_font/AvenirNext-Medium.woff') format('woff'), url('../_font/AvenirNext-Medium.ttf')  format('truetype'), url('../_font/AvenirNext-Medium.svg#AvenirN-Medium') format('svg');font-weight: normal;font-style: normal;}
@font-face{font-family: 'AvenirN-DemiBold'; src: url('../_font/AvenirNext-DemiBold.eot?#iefix') format('embedded-opentype'),  url('../_font/AvenirNext-DemiBold.woff') format('woff'), url('../_font/AvenirNext-DemiBold.ttf')  format('truetype'), url('../_font/AvenirNext-DemiBold.svg#AvenirN-DemiBold') format('svg');font-weight: normal;font-style: normal;}
@font-face{font-family: 'AvenirN-Bold'; src: url('../_font/AvenirNext-Bold.eot?#iefix') format('embedded-opentype'),  url('../_font/AvenirNext-Bold.woff') format('woff'), url('../_font/AvenirNext-Bold.ttf')  format('truetype'), url('../_font/AvenirNext-Bold.svg#AvenirN-Bold') format('svg');font-weight: normal;font-style: normal;}
@font-face{font-family: 'AvenirN-UltraLight'; src: url('../_font/AvenirNext-UltraLight.eot?#iefix') format('embedded-opentype'),  url('../_font/AvenirNext-UltraLight.woff') format('woff'), url('../_font/AvenirNext-UltraLight.ttf')  format('truetype'), url('../_font/AvenirNext-UltraLight.svg#AvenirN-UltraLight') format('svg');font-weight: normal;font-style: normal;}
/***********************************************************************************************************************************************/
body{ width: 100%; overflow-y:hidden; overflow-x:hidden; background:#fff; font-family: 'AvenirN-Regular'; font-size: 1vw; line-height: 1.2vw; color:#32343a; margin-bottom: 8vw; }
a,a:link,a:visited,a:active{ color:#32343a; text-decoration:none;}
a:hover{ color:#eb0045;}
a.Red{ color:#eb0045;}

h1{ font-family: 'AvenirN-Bold'; font-size: 2.5vw; line-height: 2.5vw; margin: 0.8vw 0; letter-spacing: 0.1vw;}
h2{ font-family: 'AvenirN-Bold'; font-size: 2.4vw; line-height: 2.4vw; margin: 0.8vw 0; letter-spacing: 0.1vw;}
h3{ font-family: 'AvenirN-DemiBold'; font-size: 1.3vw; line-height: 1.3vw; text-transform: uppercase; margin: 0.5vw 0;}
h3 span{ display: block; color: #eb0045;}
h4{ font-family: 'AvenirN-DemiBold'; font-size: 1vw; line-height: 1vw; text-transform: uppercase; color: #eb0045; margin: 0.5vw 0;}
h5{ font-family: 'AvenirN-Bold'; font-size: 1vw; line-height: 1vw; margin: 0.3vw 0;}
h6{ font-family: 'AvenirN-Medium'; font-size: 0.9vw; line-height: 0.9vw; margin: 0.3vw 0;}

p{ margin: 1vw 0; }

ul{ list-style: none; padding: 0; margin: 1vw 0; }
li{ margin: 0.5vw 0;}
ul.Rows li{ margin: 0; margin-right: 1vw;}
ul.C-2{ column-count: 2;}

li:before{ content: "■"; padding-right: 0.5vw; color: #eb0045;}

article{ position: relative; width: 100%; padding: 0 3vw;}
article:nth-of-type(1){ padding: 0;}

::-webkit-input-placeholder{ color: #32343a !important;}
::-moz-placeholder{ color: #32343a !important; opacity: 1;}
:-moz-placeholder{ color: #32343a !important; opacity: 1;}
::-ms-input-placeholder{ color: #32343a !important;}
:-ms-input-placeholder{ color: #32343a !important;}
::placeholder{ color: #32343a !important;}
:placeholder{ color: #32343a !important;}

.SubRayado{ display: inline-block;}
.SubRayado::after{ background:#eb0045; display: block; position: relative; content: ""; width: 110%; height: 2px; margin-top: 2px; }
.Cols{ display: flex; flex-direction:column;}
.ColsRev{ display: flex; flex-direction:column-reverse;}
.Rows{ display: flex; flex-direction:row;}
.RowsRev{ display: flex; flex-direction:row-reverse;}
.Wrap{ flex-wrap:wrap; }
.NoWrap{ flex-wrap:nowrap;}
.F-Start{ justify-content:flex-start;}
.F-End{ justify-content:flex-end;}
.F-Center{ justify-content:center;}
.F-Between{ justify-content:space-between;}
.J-Around{ justify-content:space-around;}
.J-Evenly{ justify-content:space-evenly;}
.AI-Start{ align-items:flex-start;}
.AI-End{ align-items:flex-end;}
.AI-Center{ align-items:center;}
.A-Start{ align-content:flex-start;}
.A-End{ align-content:flex-end;}
.A-Center{ align-content:center;}
.A-Between{ align-content:space-between;}
.A-Around{ align-content:space-around;}
.FullWidth{ width: 100%;}


.MsnError{ display: block; color:#eb0045; margin: 1vw auto; }
.Warning{ background: rgba(235, 0, 69, 0.2) !important;}

.VideoHead{ position: relative; width: 100%; }
.VideoHeadTop{ overflow: hidden;}
.VideoHeadTop video{  position: relative; width: 100%; }
.ImageHeadTop{ position: relative; width:100%; height: 100vh; }
.ImageHeadTop div{ position: absolute; width:100%; height: 100%; }


.Imgs div{ width: 32%; height: 18vw; margin:1% 0;}
.Imgs div:nth-of-type(odd){ background: rgba(0,0,0,0.3);}
.Imgs div:nth-of-type(even){ background: rgba(0,0,0,0.6);}
.Imgs img{ width: auto; height: 6vw; margin: 1vw; vertical-align: middle; -webkit-filter: grayscale(1); filter: grayscale(1); -webkit-transition: -webkit-filter 0.6s ease; transition: filter 0.6s ease;}
.Imgs img:hover{ -webkit-filter: grayscale(0); filter: grayscale(0);}

.C-3{ margin:3% 0;}
.C-2 div{ width: 49%;}
.C-3 div{ width: 25%;}
.C-3 div:nth-of-type(3){ width: 45%; height: 20vw; }
.C-4 div{ width: 23%; text-align: center;}
.C-4 div div{ width: 100%; height: 20vw;}

.Grid3{ margin: 1vw 0;}
.Grid3 div:nth-of-type(1){ width:70%; height: 35vw;}
.Grid3 div:nth-of-type(2){ width:29%; height: 35vw;}
.Grid3 div:nth-of-type(2) div{ width:100%; height: 17vw;}

.Grid4{ margin: 1vw 0;}
.Grid4 div:nth-of-type(1){ width:60%; height: 35vw;}
.Grid4 div:nth-of-type(2){ width:39%; height: 35vw;}
.Grid4 div:nth-of-type(2) div{ width:49%; height: 12vw;}
.Grid4 div:nth-of-type(2) div:nth-of-type(1){ width:100%; height: 22vw;}

.Grid50{ margin: 1vw 0;}
.Grid50 div{ width:49%; height: 28vw;}

.Grid55{ margin: 1vw 0;}
.Grid55 div:nth-of-type(1){ width:55%; height: 28vw;}
.Grid55 div:nth-of-type(2){ width:44%; height: 28vw;}

.Grid65{ margin: 1vw 0;}
.Grid65 div:nth-of-type(1){ width:65%; height: 38vw;}
.Grid65 div:nth-of-type(2){ width:34%; height: 38vw;}

.Creditos{ margin: 0;}
.Creditos span:nth-of-type(1){ font-family: 'AvenirN-Bold';}
.Creditos span:nth-of-type(2){ margin: 0 1%;}

/*MENU*/
header{ background:#e6e7e8; position: fixed; width: 100%; bottom: 0; z-index: 10; padding:0.5vw 3vw 0.3vw; }
header svg{ width: 1vw; height: 1vw; fill:#32343A; overflow: visible;}
header a{ margin: 0 0.2vw; vertical-align: middle;}
header nav a{ margin: 0 0.5vw;}
header a:hover svg{ fill:#eb0045;}

/*HOME*/
#Home{ overflow: hidden; height: 100vh;}
#Texto{ position: absolute; width: 74vh; height:30vh; left:50%; top:50%; margin-left:-50vh; margin-top:-2vh; }
#Texto p{ font-size: 7vh; line-height: 9vh; margin: 0; }
#Texto p:nth-of-type(1){ font-family: 'AvenirN-Bold'; font-size: 25vh; line-height: 20vh; color: #ec1946;}
#Texto p:nth-of-type(1) span{ font-family: 'AvenirN-Regular'; font-size: 11vh; line-height: 11vh; color: #32343A; margin-left:0vh;}
#Texto p:nth-of-type(2){ display: inline-block; font-family: 'AvenirN-DemiBold'; font-size: 10vh; line-height: 10vh; color: #ec1946; }
#ScrollDown{ position: absolute; width: 10vw; bottom:3vw; left: 50%; text-align: center; opacity: 0; margin-left: -5vw;}
#ScrollDown img{ display: block; width: 18px; height: auto; margin: 0 auto;}
#PlayPromo{ position: absolute; width: 5vw; bottom:4vw; right: 4vw; cursor: pointer; -webkit-border-radius: 100%; border-radius: 100%; opacity: 0;}
#ShowPromo{ background: rgba(0,0,0,0.8); position: fixed; width: 100%; height: 100%; left: 0; top: 0; opacity: 0; visibility: hidden;}
#ShowPromo iframe{ position: absolute; left: 50%; top: 50%;}
#ClosePromo{ position: absolute; width: 3vh; height:3vh; top:3vh; right: 3vh; cursor: pointer;}

.IsMovil #Texto{ margin-left:-39vh; margin-top:-10vh; }
#Logo{ position: absolute; display: block; width: 35.1vh; height: 34.4vh; left:50%; top:50%; margin-left:0; margin-top:-33vh;}

/*PORTAFOLIO*/
.Portafolios{ width: 100%; margin:0.5% 0;}
.Portafolios a{ overflow: hidden;}
.Portafolios a div{ position: relative; width: 100%; height: 100%; left: 0; top:0; -webkit-transition: all 0.4s ease; transition: all 0.4s ease;}
.Portafolios:nth-of-type(odd) a{ width: 33%; height: 15vw;}
.Portafolios:nth-of-type(even) a{ width: 26%; height: 15vw;}
.Portafolios:nth-of-type(even) a:nth-of-type(even){ width: 47%;}
.Portafolios a div div{ position: absolute; background:rgba(236, 25, 70, 0.6); width: 100%; height: 100%; color: white; font-size:2vw; line-height:2vw; opacity: 0; -webkit-transition: opacity 0.4s ease; transition: opacity 0.4s ease;}
.Portafolios a:hover div div{ opacity: 1;}
.Portafolios a:hover div{ width: 110%; height: 110%; left: -5%; top: -5%;}

#portafolio .ShowMore{ font-family: 'AvenirN-Bold'; width: 100%; text-align: center; display: block; }
#portafolio .ShowMore a:hover{ text-decoration: underline; }
#portafolio .ShowMore a img{ width: 14px; height: auto;}

/*TEAM*/
.Team{ text-align: justify;}
.Team div{ width: 46%; margin: 2%;}
.Team div div{ width: 48%; margin:0;}
.Team div div:nth-of-type(1){ height:20vw; -webkit-border-radius: 2vw; border-radius: 2vw;}
.Team div div:nth-of-type(1)::after{ position: relative; display: block; content: ""; width: 90%; height: 90%; -webkit-border-radius: 2vw; border-radius: 2vw; border: 1px solid #fff; margin: 5%;}
.Team h5{ display: block;}
.Team .SubRayado::after{ width: 100%; }

/*CONTACTO*/
.Contacto div{ width: 20%;}
.Contacto div:nth-of-type(1){ width: 80%;}
.Contacto h3{ text-transform: none;}
.Contacto a{ display: block; margin: 1vw 0;}
.Contacto input[type="text"], .Contacto textarea{ background: rgba(0,0,0,0.1); width: 49%; margin: 0.5vw 0; border: none; border-bottom: 2px solid #eb0045; resize: none; padding:0.5vw; color:#32343a; font-family: 'AvenirN-Regular'; font-size:1vw; line-height: 1vw; }
.Contacto textarea{ display: block; width:100% !important;}
.Contacto input[type="button"]{ background: #eb0045; color:#fff; border:none;  text-transform:uppercase; padding:0.5vw 1vw; cursor:pointer; margin: 0.5vw 0; font-family:'AvenirN-Regular'; font-size:1vw; line-height: 1vw; letter-spacing: 1px;}
.Contacto input[type="button"]:hover{ background: #32343a; color:#fff;}

/*LOADER*/
#Loader{ background:#fff; position: fixed; width: 100%; height: 100%; z-index: 100;}
#Loader div{ background:#eb0045; position: absolute; height: 2vh; left: 0; top:0;}

/*RESPONSIVE*/
@media only screen and (max-width:1500px){
	body{ font-size: 1.25vw; line-height: 1.5vw; margin-bottom: 10vw;}
	
	h1{ font-size: 3.1vw; line-height: 3.1vw; margin: 1vw 0; }
	h2{ font-size: 3vw; line-height: 3vw; margin: 1vw 0; }	
	h3{ font-size: 1.6vw; line-height: 1.6vw; margin: 0.6vw 0;}
	h4{ font-size: 1.25vw; line-height: 1.25vw; margin: 0.6vw 0;}
	h5{ font-size: 1.25vw; line-height: 1.25vw; margin: 0.4vw 0;}
	h6{ font-size: 1.1vw; line-height: 1.1vw; margin: 0.4vw 0;}	
	
	p{ margin: 1.25vw 0; }
	
	.MsnError{ margin: 1.25vw auto; }
	
	.Imgs img{ width: auto; height: 7vw; margin: 1vw;}
	
	/*MENU*/
	header{ padding:0.6vw 3vw 0.4vw; }
	header svg{ width: 1.25vw; height: 1.25vw;}
	header a{ margin: 0 0.3vw; }
	header nav a{ margin: 0 0.6vw;}
	
	/*CONTACTO*/
	.Contacto a{ margin: 1.25vw 0;}
	.Contacto input[type="text"], .Contacto textarea{ margin: 0.6vw 0; padding:0.6vw; font-size:1.2vw; line-height: 1.2vw; }
	.Contacto input[type="button"]{ padding:0.6vw 1.2vw; margin: 0.6vw 0; font-size:1.2vw; line-height: 1.2vw; }
	
}
@media only screen and (orientation:portrait){
	body{ font-size: 2vh; line-height: 2.4vh; margin-bottom: 20vh;}
	
	h1{ font-size: 5vh; line-height: 5vh; margin: 1.6vh 0; letter-spacing: 0.2vh;}
	h2{ font-size: 4vh; line-height: 4vh; margin: 1.6vh 0; letter-spacing: 0.2vh;}
	h3{ font-size: 2.6vh; line-height: 2.6vh; margin: 1vh 0;}
	h3 span{ display: inline-block; }
	h4{ font-size: 2vh; line-height: 2vh; margin: 1vh 0;}
	h5{ font-size: 2vh; line-height: 2vh; margin: 0.6vh 0;}
	h6{ font-size: 1.8vh; line-height: 1.8vh; margin: 0.6vh 0;}
	
	p{ margin: 2vh 0; }
	
	.MsnError{ margin: 2vh auto; height: 4vh; }

	.Imgs div{ width: 49%; height: 24vh; margin:1% 0;}
	.Imgs img{ width: auto; height: 10vh; margin: 1vh;}

	.C-3{ margin:2%;}
	.C-2 div{ width: 100%;}
	.C-3 div{ width: 100%;}
	.C-3 div:nth-of-type(3){ width: 100%; height: 30vh; }
	.C-4 div{ width: 48%;}
	.C-4 div div{ height: 32vh;}

    .Grid3{ margin: 1vw 0;}
    .Grid3 div:nth-of-type(1){ width:100%; height: 70vw; margin: 1vw 0;}
    .Grid3 div:nth-of-type(2){ width:100%; height: 70vw;}
    .Grid3 div:nth-of-type(2) div{ width:100%; height: 34.5vw;}
    
    .Grid4{ margin: 1vw 0;}
    .Grid4 div:nth-of-type(1){ width:100%; height: 70vw; margin: 1vw 0;}
    .Grid4 div:nth-of-type(2){ width:100%; height: 70vw;}
    .Grid4 div:nth-of-type(2) div{ width:49%; height: 25vw;}
    .Grid4 div:nth-of-type(2) div:nth-of-type(1){ width:100%; height: 44vw;}

    .Grid50{ margin: 1vw 0;}
    .Grid50 div{ width:100%; height: 56vw; margin: 1vw 0;}

    .Grid55{ margin: 1vw 0;}
    .Grid55 div:nth-of-type(1){ width:100%; height: 56vw; margin: 1vw 0;} 
    .Grid55 div:nth-of-type(2){ width:100%; height: 56vw;}

    .Grid65{ margin: 1vw 0;}
    .Grid65 div:nth-of-type(1){ width:100%; height: 60vw; margin: 1vw 0;}
    .Grid65 div:nth-of-type(2){ width:100%; height: 100vw;}
    
	/*MENU*/
	header{ padding:1vh 3vw 0.6vh; text-align: center; }
	header svg{ width: 2vh; height: 2vh;}
	header a{ margin: 0 0.4vh; }
	header nav a{ margin: 0 1vh;}
	header div{ width: 100%; margin: 1vh 0;}
	
	/*HOME*/
	#Texto{ width: 44.8vh; height:21vh; margin-left:-21.4vh; margin-top:-1.4vh; }
	#Texto p{ font-size: 4.9vh; line-height: 6.3vh;}
	#Texto p:nth-of-type(1){ font-size: 15vh; line-height: 10vh; }
	#Texto p:nth-of-type(1) span{ font-size: 6.6vh; line-height: 6.6vh; margin-left:0vh;}
	#Texto p:nth-of-type(2){ font-size: 6vh; line-height: 6vh; }
	#ScrollDown{ width: 90vw; bottom:10vh; margin-left: -45vw;}
	#PlayPromo{ width: 8vh; bottom:8vh; right: 4vh;}
	
	.IsMovil #Texto{ margin-left:-21.4vh; margin-top:-1.4vh;}
	#Logo{ width: 24.5vh; height: 24vh; margin-left:-12.25vh; margin-top:-34vh;}
	.IsMovil #ScrollDown{ bottom:20vh;}
	.IsMovil #PlayPromo{ bottom:16vh;}
	
	/*PORTAFOLIO*/
	.Portafolios{ margin:0 0;}
	.Portafolios a{ width: 100% !important; height: 20vh !important; margin: 1vh 0;}

	/*TEAM*/
	.Team div{ width:100%; margin: 2%;}
	.Team div div{ width: 100%; margin:0;}
	.Team div div:nth-of-type(1){ width: 34vh; height:34vh; margin: 1vh auto;}
	.Team div div:nth-of-type(1)::after{ position: relative; display: block; content: ""; width: 90%; height: 90%; -webkit-border-radius: 2vw; border-radius: 2vw; border: 1px solid #fff; margin: 5%;}

	/*CONTACTO*/
	.Contacto div{ width: 100%; text-align: center;}
	.Contacto div:nth-of-type(1){ width: 100%;}
	.Contacto h3{ display: inline-block; vertical-align: middle;}
	.Contacto a{ display: inline-block; margin: 2vh 2vh;}
	.Contacto input[type="text"], .Contacto textarea{ width: 100%; margin: 1vh 0; padding:1vh; font-size:2vh; line-height: 2vh; }
	.Contacto input[type="button"]{ width: 100%; padding:1vh 2vh; margin: 1vh 0; font-size:2vh; line-height:2vh;}


}