@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;font-smoothing: antialiased;text-rendering:optimizeLegibility;}
/***********************************************************/
@font-face{ font-family: 'ProximaNova-Regular'; src: url('../_fonts/ProximaNova-Regular.eot?#iefix') format('embedded-opentype'), url('../_fonts/ProximaNova-Regular.otf')  format('opentype'), url('../_fonts/ProximaNova-Regular.woff') format('woff'), url('../_fonts/ProximaNova-Regular.ttf')  format('truetype'), url('../_fonts/ProximaNova-Regular.svg#ProximaNova-Regular') format('svg'); font-weight: normal; font-style: normal;}
@font-face{ font-family: 'ProximaNova-Bold'; src: url('../_fonts/ProximaNova-Bold.eot?#iefix') format('embedded-opentype'), url('../_fonts/ProximaNova-Bold.otf')  format('opentype'), url('../_fonts/ProximaNova-Bold.woff') format('woff'), url('../_fonts/ProximaNova-Bold.ttf')  format('truetype'), url('../_fonts/ProximaNova-Bold.svg#ProximaNova-Bold') format('svg'); font-weight: normal; font-style: normal;}
@font-face{ font-family: 'ProximaNova-Semibold'; src: url('../_fonts/ProximaNova-Semibold.eot?#iefix') format('embedded-opentype'), url('../_fonts/ProximaNova-Semibold.otf')  format('opentype'), url('../_fonts/ProximaNova-Semibold.woff') format('woff'), url('../_fonts/ProximaNova-Semibold.ttf')  format('truetype'), url('../_fonts/ProximaNova-Semibold.svg#ProximaNova-Semibold') format('svg'); font-weight: normal; font-style: normal; }
@font-face{ font-family: 'ProximaNova-Black'; src: url('../_fonts/ProximaNova-Black.eot?#iefix') format('embedded-opentype'), url('../_fonts/ProximaNova-Black.otf')  format('opentype'), url('../_fonts/ProximaNova-Black.woff') format('woff'), url('../_fonts/ProximaNova-Black.ttf')  format('truetype'), url('../_fonts/ProximaNova-Black.svg#ProximaNova-Black') format('svg'); font-weight: normal; font-style: normal; }
@font-face{ font-family: 'ProximaNova-Light'; src: url('../_fonts/ProximaNova-Light.eot?#iefix') format('embedded-opentype'), url('../_fonts/ProximaNova-Light.otf')  format('opentype'), url('../_fonts/ProximaNova-Light.woff') format('woff'), url('../_fonts/ProximaNova-Light.ttf')  format('truetype'), url('../_fonts/ProximaNova-Light.svg#ProximaNova-Light') format('svg'); font-weight: normal; font-style: normal; }
@font-face{ font-family: 'Taviraj-Regular'; src: url('../_fonts/Taviraj-Regular.eot?#iefix') format('embedded-opentype'), url('../_fonts/Taviraj-Regular.woff') format('woff'), url('../_fonts/Taviraj-Regular.ttf')  format('truetype'), url('../_fonts/Taviraj-Regular.svg#Taviraj-Regular') format('svg'); font-weight: normal; font-style: normal; }
@font-face{ font-family: 'Taviraj-Medium'; src: url('../_fonts/Taviraj-Medium.eot?#iefix') format('embedded-opentype'), url('../_fonts/Taviraj-Medium.woff') format('woff'), url('../_fonts/Taviraj-Medium.ttf')  format('truetype'), url('../_fonts/Taviraj-Medium.svg#Taviraj-Medium') format('svg'); font-weight: normal; font-style: normal; }
/************************************************************/
html{ height: 100%;}
body{ width: 100%; height: 100%; background: #131211; font-family: 'ProximaNova-Regular'; font-size: 20px; line-height: 26px; top: 0; color:#f1efe9; overflow-y: hidden; overflow-x: hidden;}
a,a:link,a:visited,a:active{ text-decoration:none;}
a{ color:#f1efe9; -webkit-transition: color 0.6s ease; transition: color 0.6s ease;}
a:hover{ color:#c84955;}

h1{ font-family: 'Taviraj-Regular'; font-size: 16px; line-height:20px; margin:0;}
h2{ font-family: 'ProximaNova-Semibold'; font-size: 70px; line-height: 72px; margin: 20px 0;}
h3{ font-family: 'ProximaNova-Semibold'; font-size: 40px; line-height: 40px; margin: 30px 0;}
h4{ font-family: 'ProximaNova-Regular'; font-size: 28px; line-height: 28px; margin: 0; text-transform: uppercase;}
h5{ font-family: 'ProximaNova-Semibold'; font-size: 14px; line-height: 14px; margin: 20px 0;}

svg{ display: block; width: 100%; overflow: visible;}
ul{ position: relative;}
ul li{ width: 33%;}
section{ visibility: visible;}
article{ width: 100%;}
p{ margin: 10px 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;}

.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;}
.J-End{ justify-content:flex-end;}
.J-Center{ justify-content:center;}
.J-Between{ justify-content:space-between;}
.J-Around{ justify-content:space-around;}
.A-I-Start{ align-items:flex-start;}
.A-I-End{ align-items:flex-end;}
.A-I-Center{ align-items:center;}
.A-Start{ align-content:flex-start;}
.A-End{ align-content:flex-end;}
.A-Center{ align-content:center;}
.A-Stretch{ align-content:stretch;}
.FWidth{ width: 100%;}
.FHeight{ height: 100%;}
.Separa{ position: relative; display: block; width: 100% !important; height: 2px; background:#f1efe9; margin: 25px 0;}
.Margin{ margin: 40px 0;}

.Mantenimiento svg{ width: 250px; fill:#f1efe9;}
.Mantenimiento p{ font-size: 40px; line-height: 40px; margin: 30px 0;}
.VideoFull{ position: relative; width: 100%; height: 100%; overflow: hidden;}
.VideoFull video{ position: absolute; left: 50%; top: 50%;}
.Contenido{ position: relative; width: 1080px; margin: 0 auto;}
.Header{ padding-top: 100px;}
.Quotes{ font-family: 'ProximaNova-Semibold'; font-size: 40px; line-height: 40px; text-align: center; padding: 50px 150px;}
.ImgHeight{ position: relative; width: 100%; height: 100%;}
.VideoW video{ display: block; width: 100%; height: auto; margin: 0 auto;}
.ImgGrid{ width: 150px; height: auto; margin: 10px;}
.HeaderTxt{ width: 100%; max-width: 1080px; height: 100%; font-family: 'ProximaNova-Semibold'; font-size: 70px; line-height: 70px; text-align: center; padding:0px 150px; margin: 0 auto;}
.Datos{ width: 33%; font-family: 'Taviraj-Regular'; font-size: 16px; line-height: 22px; margin-bottom: 40px;}
.Datos p:nth-of-type(1){ font-family: 'ProximaNova-Semibold'; font-size: 70px; line-height: 80px; margin: 10px 0;}
.Datos p:nth-of-type(2){ display: block; padding: 0 50px 0 0;}

.ImgW{ position: relative; width: 100%;}
.ImgW img{ display: block; width: 100%; height: auto;}
.Shares{ font-family: 'ProximaNova-Bold'; font-size: 14px; line-height: 14px; text-align: center; margin: 30px 0; }
.Shares a{ font-family: 'ProximaNova-Regular'; font-size: 14px; line-height: 14px; margin: 0 5px;}

.W50 div{ width: 50%; }
.W33 div:nth-of-type(1){ width: 33%; }
.W33 div:nth-of-type(2){ width: 67%; }
.H800{ height:800px;}
.H660{ height:660px;}
.H530{ height:530px;}
.H460{ height:460px;}
.H360{ height:360px;}
.H350{ height:350px;}

.Grid2-1 a{ background: #000; position: relative; display: block; width: 50% !important; height: 400px; overflow: hidden;}
.Grid2-1 a:nth-of-type(3n+3){ width: 100% !important;}
.Grid2-1 a .ImgBack{ position: absolute; display: block; width: 100% !important; height: 100% !important; left: 0%; top: 0%;}
.Grid2-1 .Txt{ position: absolute; width: 100%; bottom: 0; color: #f1efe9; padding: 15px; font-family: 'Taviraj-Medium'; font-size: 16px; line-height: 12px;}
.Grid2-1 .Txt span{ display: inline-block;}

.Grid3 div:nth-of-type(2) div{ width: 100%; height: 400px;}
.Grid4 div:nth-of-type(2) div{ width: 50%; height: 400px;}
.Grid4 div:nth-of-type(2) div:nth-of-type(1){ width: 100% !important;}

.Banners{ width: 100%; height: 700px; overflow: hidden;}
.Banners div{ position: absolute; width: 100%; height: 100%; left: 100%; top: 0;}
.Banners div:nth-of-type(1){ left:0;}
.BannersBtns{ position: absolute; width: 100%; bottom: 10px; text-align: center;}
.BannersBtns span{ position: relative; display: inline-block; width: 14px; height: 14px; background: #f1efe9; cursor: pointer; margin: 0 15px; -webkit-border-radius: 100%; border-radius: 100%;}
.BannersBtns span.active::after{ content: ""; display: block; position: absolute; background:#131211; width: 8px; height: 8px; left: 3px; top: 3px; -webkit-border-radius: 100%; border-radius: 100%;}

/*HEADER*/
header{ position: absolute; background: none; width: 100%; padding: 30px 50px; z-index: 10; }
#Logo{ position: relative; width: 104px;}
#Logo svg{ fill:#f1efe9;}
#Menu{ position: absolute; width: 30px; height: 20px; right: 50px; top: 50%; margin-top: -10px; z-index: 11;}
#Menu span{ position: absolute; display: block; background: #f1efe9; width: 100%; height: 2px; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; -webkit-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; transform-origin: 0% 0%;}
#Menu span:nth-of-type(1){ width: 80%; top:0px;}
#Menu span:nth-of-type(2){ width: 100%; top:10px;}
#Menu span:nth-of-type(3){ width: 120%; top:20px;}
#Menu:hover span{ width: 100%;}
#Menu.active span{ width: 100%;}
#Menu.active span:nth-of-type(1){ width: 100%; -webkit-transform: rotate(42deg); -ms-transform: rotate(42deg); transform: rotate(42deg);}
#Menu.active span:nth-of-type(2){ width: 0%;}
#Menu.active span:nth-of-type(3){ width: 100%; -webkit-transform: rotate(-42deg); -ms-transform: rotate(-42deg); transform: rotate(-42deg);}

/*FOOTER*/
footer{ position: relative; display: block; width: 1080px; margin: 0px auto 40px; font-family: 'Taviraj-Regular'; font-size: 14px; line-height: 18px;}
footer::before{ content: ""; display: block; width: 100%; height: 2px; background:#f1efe9; top: 0; left: 0; margin: 60px 0;} 
footer span:nth-of-type(1){ width: 25%;}
footer span:nth-of-type(2){ width: 33%;}
footer span:nth-of-type(3){ width: 40%;}
footer a{ margin-right: 10px;}
footer .Redes a{ display: block; float: left; clear: left; margin: 0; }

/*CONTACTO*/
.Contacto{ font-size: 16px; line-height: 20px;}
.Contacto div{ position: relative; display: block; width: 46%; padding: 0 13px; }
.Contacto input[type="text"], .Contacto textarea{ width: 100%; -webkit-appearance: none; appearance: none; -webkit-border-radius: none; border-radius: none; resize: none; background: none; border: none; border-bottom: solid 1px #949494; margin: 0 0 15px; color:#f1efe9; padding: 5px 0; font-family: 'ProximaNova-Regular'; font-size: 16px; line-height: 16px;}
.Contacto label{ color:#949494;}
.Contacto button{ -webkit-appearance: none; appearance: none; -webkit-border-radius: none; border-radius: none; font-family: 'ProximaNova-Regular'; font-size: 16px; line-height: 16px; color:#131211; background:#f1efe9; border:none; text-transform: uppercase; padding: 8px 30px; margin: 15px 0; cursor: pointer;}
.Contacto button:hover{ background:#949494; color:#f1efe9;}
.Contacto button:active{ background:#c84955; color:#f1efe9;}
.isMobil .Contacto button:hover{ background:#f1efe9; color:#131211;}
.Contacto .Social{ width: 80%;}
.Contacto .Social a{ display: block; float: left; clear: left; }
.Contacto .MsnError{ height:0; color:#c84955; margin-left: 10px;}
.Warning{ border-color:#c84955 !important;}

/*PORTAFOLIO*/
.Portafolio{ margin-top: -20vh;}
.Portafolio article:nth-of-type(1){ background: #131211; color:#f1efe9; padding: 50px 40px; }
.Portafolio .Encabezado div:nth-of-type(1){ width: 60%; }
.Portafolio .Encabezado div:nth-of-type(2){ width: 30%; font-family: 'ProximaNova-Regular'; font-size: 14px; line-height:20px;}
.Portafolio .Encabezado div:nth-of-type(1) p:nth-of-type(1){ font-family: 'ProximaNova-Semibold'; font-size: 40px; line-height: 46px; margin: 30px 0;}

.Prtfl{ background: #f1efe9; color:#131211;}
.Prtfl header{ position: fixed; background: #f1efe9; }
.Prtfl a{ color:#131211;}
.Prtfl a:hover{ color:#c84955;}
.Prtfl #Logo svg{ fill:#131211;}
.Prtfl #Menu span{ background: #131211;}
.Prtfl #Menu.active span{ background: #f1efe9;}
.Prtfl footer::before{ background:#131211;}

/*MENU*/
#ShowMenu{ position: fixed; background: #c84955; width: 100%; height: 100%; z-index: 10; left: 0; top: 0; visibility: hidden; font-family: 'Taviraj-Regular'; font-size: 14px; line-height: 20px; color:#f1efe9;}
#ShowMenu .Contenido{ width: 800px; }
#ShowMenu a{ display: block; float: left; clear: left; color:#f1efe9;}
#ShowMenu a:hover{ color:#131211 !important;}
nav{ overflow: hidden;}
nav a{ position: relative; color:#f1efe9; font-family: 'ProximaNova-Semibold'; font-size: 72px; line-height:78px; white-space: nowrap; }
nav a span{ position: relative; display: block;}
nav a span:nth-of-type(1){ color:#f1efe9; font-family: 'Taviraj-Regular'; font-size: 14px; line-height: 16px; white-space: nowrap; margin-right: 15px;}

/*LOADER*/
#Loader{ background:#131211; position: fixed; width: 100%; height: 100%; z-index: 100; color:#f1efe9; }
#Loader #LGif{ position: absolute; width: 12vh; height:12vh; -webkit-border-radius: 100%; border-radius: 100%; left:50%; top:50%; margin-left:-6vh; margin-top:-6vh;}
#Loader p{ position: absolute; width: 100%; text-align: center; top: 50%; margin-top: 7vh; text-transform: uppercase;}
/*#Loader div{ background: #fff; position: absolute; width:162px; height: 82px; left: 50%; top: 50%; margin-left:-81px; margin-top:-41px;}*/
.pace { display: none;}

/*LEGALES*/
.Legales h1{ font-family: 'ProximaNova-Semibold'; font-size: 38px; line-height: 38px; margin: 15px 0;}
.Legales h2{ font-family: 'ProximaNova-Semibold'; font-size: 32px; line-height: 32px; margin: 15px 0;}
.Legales h3{ font-family: 'ProximaNova-Semibold'; font-size: 26px; line-height: 26px; margin: 15px 0;}
.Legales b{ font-family: 'ProximaNova-Bold';}
.Legales a{ color:#c84955;}
.Legales a:hover{ text-decoration: underline;}
.Legales ul{ list-style:disc; list-style-position: inside;}
.Legales ol{ list-style:decimal; list-style-position: inside;}

/*HISTORIA*/
#Historia video{ visibility: hidden;}
#VidIntro{ width:38vh; margin: 0 auto; font-family: 'ProximaNova-Bold'; font-size: 7.4vh; line-height: 5.2vh; text-align: center; letter-spacing: 0.4vh;}
#VidIntro p:nth-of-type(2){ font-family: 'ProximaNova-Light'; color:#c84955; font-size: 2.9vh; line-height: 3vh; letter-spacing: 0.3vh;}
#VidIntro p:nth-of-type(3){ font-family: 'ProximaNova-Regular'; font-size: 2vh; line-height:2.2vh; letter-spacing: 0vh; text-transform: uppercase;}
#VidLoader{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; opacity: 0; visibility: hidden;}
#VidLoader .LGif{ position: absolute; width: 12vh; height:12vh; -webkit-border-radius: 100%; border-radius: 100%; left:50%; top:50%; margin-left:-6vh; margin-top:-6vh;}
#VidLoader p{ position: absolute; width: 100%; text-align: center; top: 50%; margin-top: 7vh; text-transform: uppercase;}


#Historia .Drag{ position: relative; width: 7.2vh; height:27.7vh; margin: 2vh 0 0;}
#Historia .Circulo{ position: absolute; width: 7.2vh; height:7.2vh; -webkit-border-radius: 100%; border-radius: 100%; cursor:grab;}
#Historia .Circulo2{ position: absolute; width: 7.2vh; height:7.2vh; -webkit-border-radius: 100%; border-radius: 100%; cursor:grab; }
#Historia .Circulo span{ background:#c84955; position: absolute; width: 4vh; height:4vh; -webkit-border-radius: 100%; border-radius: 100%; left: 50%; top: 50%; margin-left: -2vh; margin-top: -2vh;}
#Historia .CBottom{ background:#c84955; position: absolute; width: 1.4vh; height:1.4vh; left: 50%; bottom:2.9vh; margin-left: -0.7vh; -webkit-border-radius: 100%; border-radius: 100%;}
#Historia .DArrow{ position: absolute; width:2vh; height:2vh; left: 50%; top:50%; margin-left: -1vh; margin-top: -1vh;}
#Historia .DArrow svg{ width: 100%; height: 100%;}
#Historia .DLine{ position: absolute; width:2px; height:20.5vh; overflow: hidden; left: 50%; bottom:3.6vh; margin-left: -1px;}
#Historia .DLine div{  position: absolute; width:100%; height:20.5vh; bottom:0vh;}
#Historia .LaDotted{ stroke-dasharray:2 30; -webkit-animation:T1Trzd 4s linear infinite; -moz-animation:T1Trzd 4s linear infinite; animation:T1Trzd 4s linear infinite;}

@-webkit-keyframes T1Trzd{ 0%{ stroke-dashoffset:0;} 100%{ stroke-dashoffset:-128;}}
@keyframes T1Trzd{ 0%{ stroke-dashoffset:0;} 100%{ stroke-dashoffset:-128;}}

#Historia .DInst{ position: absolute; width:3vh; height:3vh; left: 50%; top:8vh; margin-left: -1.5vh;}
#Historia .DInst svg{ width: 100%; height: 100%;}
.isMobil #Historia .DInst #Desk{ display: none;}
#Historia .DInst #Movil{ display: none;}
.isMobil #Historia .DInst #Movil{ display: block;}
#Historia .DInst .Actives{ visibility: hidden;}

#Historia .MoveUp .Circulo{ top:20.5vh;}
#Historia .MoveUp .CBottom{ top:2.9vh;}
#Historia .MoveUp .DArrow{ -moz-transform: rotate(180deg);-webkit-transform: rotate(180deg);-o-transform: rotate(180deg);-ms-transform: rotate(180deg);transform: rotate(180deg);}
#Historia .MoveUp .DLine{ top:3.6vh; }
#Historia .DLine div{ top:0vh;}
#Historia .MoveUp .LaDotted{ stroke-dasharray:2 30; -webkit-animation:T1Trzd2 4s linear infinite; -moz-animation:T1Trzd2 4s linear infinite; animation:T1Trzd2 4s linear infinite;}

@-webkit-keyframes T1Trzd2{ 0%{ stroke-dashoffset:0;} 100%{ stroke-dashoffset:128;}}
@keyframes T1Trzd2{ 0%{ stroke-dashoffset:0;} 100%{ stroke-dashoffset:128;}}

#Historia .MoveX{ width:27.7vh; height:7.2vh;}
#Historia .MoveX .Circulo{ left:20.5vh; top:0px;}
#Historia .MoveX .Circulo2{ left:20.5vh; top:0px;}
#Historia .MoveX .CBottom{ left:2.9vh; margin-left: 0; bottom: auto; top:100%; margin-top: -0.7vh;}
#Historia .MoveX .DArrow{ -moz-transform: rotate(80deg);-webkit-transform: rotate(80deg);-o-transform: rotate(80deg);-ms-transform: rotate(80deg);transform: rotate(80deg);}
#Historia .MoveX .DLine{ left:14vh; bottom: auto; top:-5vh; -moz-transform: rotate(80deg);-webkit-transform: rotate(80deg);-o-transform: rotate(80deg);-ms-transform: rotate(80deg);transform: rotate(80deg);}
#Historia .MoveX .DLine div{ top:0vh;}

#Historia .MoveX2{ width:27.7vh; height:7.2vh;}
#Historia .MoveX2 .Circulo{ left:0vh; top:0px;}
#Historia .MoveX2 .Circulo2{ left:0vh; top:0px;}
#Historia .MoveX2 .CBottom{ right:2.9vh; left: auto; margin-left: 0; bottom: auto; top:100%; margin-top: -0.7vh;}
#Historia .MoveX2 .DArrow{ -moz-transform: rotate(-80deg);-webkit-transform: rotate(-80deg);-o-transform: rotate(-80deg);-ms-transform: rotate(-80deg);transform: rotate(-80deg);}
#Historia .MoveX2 .DLine{ right:14vh; left: auto; top:-5vh; -moz-transform: rotate(-80deg);-webkit-transform: rotate(-80deg);-o-transform: rotate(-80deg);-ms-transform: rotate(-80deg);transform: rotate(-80deg);}
#Historia .MoveX2 .DLine div{ top:0vh;}

#Historia .VidTxts{ position: absolute; width: 100%; height: 100%; visibility: hidden; top:0; left: 0; z-index: 5; }
#Historia .VidTxts .Drag{ position: absolute;}
#Historia .VidTxts .ClickDrag{ position: absolute; width:15vh; text-align: center; font-family: 'Taviraj-Regular'; font-size: 2.1vh; line-height: 2.1vh; letter-spacing: 0.1vh; left: 50%; margin-left:-7.5vh;}

#Historia .VidTxts .Infos{ position: absolute; width: 38.5vh;}
#Historia .VidTxts .Infos p:nth-of-type(1){ font-family: 'Taviraj-Medium'; font-size: 2.1vh; line-height: 1.8vh;}
#Historia .VidTxts .Infos p:nth-of-type(2){ font-family: 'ProximaNova-Semibold'; font-size: 2.6vh; line-height:2.8vh; }

#Historia #VidTxt2 .Drag{ left:35vw; top:45vh; margin: 0;}
#Historia #VidTxt2 .ClickDrag{ top: 27.7vh;}
#Historia #VidTxt2 .Infos{ left:66vw; top: 50%; margin-top: -5.7vh;}

#Historia #VidTxt4 .Drag{ left:50%; top:15vh; margin: 0; margin-left:-3.6vh;}
#Historia #VidTxt4 .ClickDrag{ top:50%; left: -7.2vh; margin-top: -2vh;}
#Historia #VidTxt4 .Infos{ left:58vw; top: 15vh;}

#Historia #VidTxt6 .Drag{ left:54.3vw; top:29.5vh; margin: 0;}
#Historia #VidTxt6 .ClickDrag{ left: 200%;}
#Historia #VidTxt6 .Infos{ left:58vw; top: 50%; margin-top: 10vh;}

#Historia #VidTxt8 .Drag{ left:50%; top:45vh; margin: 0; margin-left: -30vw;}
#Historia #VidTxt8 .ClickDrag{ top:-100%; left:24.5vh;}
#Historia #VidTxt8 .Infos{ left:66vw; top: 50%; margin-top: 3vh; color:#131211;}

#Historia #VidTxt10 .Drag{ left:50%; top:14vh; margin: 0; margin-left: 10vw;}
#Historia #VidTxt10 .ClickDrag{ left:34.9vh; top:50%;}
#Historia #VidTxt10 .Infos{ left:66vw; top: 50%; margin-top: 5vh;}

#Historia #VidTxt11 .Infos{ text-align: center; bottom: 4vh; left: 50%; margin-left:-19.25vh;}
#Historia #VidTxt11 .DArrow{ position: relative; margin: 0 auto; left: 0; top: 0; bottom: 0;}
#Historia #VidTxt11 .DArrow svg{ stroke:#fff !important;}

#Historia .SkipHistoria{ position: absolute; display: inline-block; width: auto; color:#c84955; left: 50px; bottom: 30px; visibility: hidden; z-index: 50;}
#Historia .SoundHistoria{ position: absolute; display: block; color:#c84955; right: 50px; bottom: 30px; width: 30px; height: 25px; visibility: hidden; z-index: 50;}
#Historia .SoundHistoria p{ position: absolute; left: -110%; margin: 0; padding: 0; bottom: 0;}
#Historia .SoundHistoria span{ position: absolute; display: block; background: #f1efe9; width: 1px; height: 80%; bottom: 7px; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; -webkit-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; transform-origin: 0% 0%;}
#Historia .SoundHistoria span:nth-of-type(1){ height: 60%; left:0px;}
#Historia .SoundHistoria span:nth-of-type(2){ height: 70%; left:8px;}
#Historia .SoundHistoria span:nth-of-type(3){ height: 80%; left:16px;}
#Historia .SoundHistoria:hover span{ height:50%;}
#Historia .SoundHistoria.active span{ height:30%;}
#Historia .SoundHistoria.active:hover span{ height:60%;}

/*RESPONSIVE*/
@media only screen and (max-width: 1400px){
	body{ font-size: 1.4vw; line-height: 1.8vw;}

	h1{ font-size: 1.1vw; line-height: 1.4vw;}
	h2{ font-size: 5vw; line-height: 5.1vw; margin: 1.4vw 0;}
	h3{ font-size: 2.8vw; line-height: 2.8vw; margin: 2.1vw 0;}
	h4{ font-size: 2vw; line-height: 2vw;}
	h5{ font-size: 1vw; line-height: 1vw; margin: 1.4vw 0;}
	p{ margin: 0.7vw 0;}

	.Separa{ margin: 1.8vw 0;}
	.Margin{ margin: 2.8vw 0;}
	
	.Mantenimiento svg{ width: 17.9vw;}
	.Mantenimiento p{ font-size: 2.8vw; line-height: 2.8vw; margin: 2.1vw 0;}
	.Contenido{ width: 77.2vw;}
	.Header{ padding-top: 7.2vw;}
	.Quotes{ font-size: 2.8vw; line-height: 2.8vw; padding: 3.5vw 10.7vw;}
	.ImgGrid{ width: 10.7vw; margin: 0.7vw;}
	.HeaderTxt{ font-size: 5vw; line-height: 5vw; padding:0 10.7vw;}
	.Datos{ font-size: 1.1vw; line-height: 1.6vw; margin-bottom: 2.8vw;}
	.Datos p:nth-of-type(1){ font-size: 5vw; line-height: 5.7vw; margin: 0.7vw 0;}
	.Datos p:nth-of-type(2){ padding: 0 3.6vw 0 0;}
	.Shares{ font-size: 1.1vw; line-height: 1vw; margin: 2.1vw 0; }
	.Shares a{ font-size: 1vw; line-height: 1vw; margin: 0 0.4vw;}

	.H800{ height:57.2vw;}
	.H660{ height:47.2vw;}
	.H530{ height:37.9vw;}
	.H460{ height:32.8vw;}
	.H360{ height:25.7vw;}
	.H350{ height:25vw;}

	.Grid2-1 a{ height: 28.5vw;}
	.Grid2-1 .Txt{ padding: 1vw; font-size: 1.1vw; line-height: 0.8vw;}

	.Grid3 div:nth-of-type(2) div{ height: 28.6vw;}
	.Grid4 div:nth-of-type(2) div{ height: 28.6vw;}
	
	.Banners{ height: 50vw;}
	
	/*HEADER*/
	header{ padding: 2.1vw 3.6vw; }
	#Logo{ width: 7.4vw;}
	#Menu{ width: 2.1vw; height: 1.4vw; right: 3.6vw; margin-top: -0.7vw; }
	#Menu span:nth-of-type(1){ top:0px;}
	#Menu span:nth-of-type(2){ top:0.7vw;}
	#Menu span:nth-of-type(3){ top:1.4vw;}
	
	/*FOOTER*/
	footer{ width: 77.2vw; margin: 0px auto 2.8vw; font-size: 1vw; line-height: 1.3vw;}
	footer::before{ margin: 4.3vw 0;}
	footer a{ margin-right: 0.7vw;}
	footer .Redes a{ margin: 0; }


	/*CONTACTO*/
	.Contacto{ font-size: 1.1vw; line-height: 1.4vw;}
	.Contacto div{ padding: 0 0.9vw; }
	.Contacto input[type="text"], .Contacto textarea{ margin: 0 0 1vw; padding: 0.3vw 0; font-size: 1.1vw; line-height: 1.1vw;}
	.Contacto button{ font-size: 1.1vw; line-height: 1.1vw; padding: 0.5vw 2.1vw; margin: 1vw 0;}
	.Contacto .MsnError{ margin-left: 0.7vw;}

	/*PORTAFOLIO*/
	.Portafolio article:nth-of-type(1){ padding: 3.5vw 2.8vw; }
	.Portafolio .Encabezado div:nth-of-type(2){ font-size: 1vw; line-height:1.4vw;}
	.Portafolio .Encabezado div:nth-of-type(1) p:nth-of-type(1){ font-size: 2.8vw; line-height: 3.3vw; margin: 2.1vw 0;}
	
	/*MENU*/
	#ShowMenu{ font-size: 1vw; line-height: 1.4vw; }
	#ShowMenu .Contenido{ width: 57.1vw; }
	nav a{ font-size: 5.1vw; line-height:5.6vw; }
	nav a span:nth-of-type(1){ font-size: 1vw; line-height: 1.1vw; margin-right: 1vw;}
	
	/*LEGALES*/
	.Legales h1{ font-size: 2.7vw; line-height: 2.7vw; margin: 1vw 0;}
	.Legales h2{ font-size: 2.3vw; line-height: 2.3vw; margin: 1vw 0;}
	.Legales h3{ font-size: 1.8vw; line-height: 1.8vw; margin: 1vw 0;}
	
	#Historia .SkipHistoria{ left: 3.6vw; bottom: 2.1vw;}
	#Historia .SoundHistoria{ right: 3.6vw; bottom: 2.1vw; width: 2.1vw; height: 1.7vw; }	
	#Historia .SoundHistoria span{ bottom: .5vw;}
	#Historia .SoundHistoria span:nth-of-type(2){ left:0.6vw;}
	#Historia .SoundHistoria span:nth-of-type(3){ left:1.2vw;}

}
@media screen and (max-width: 500px){
	/*CONTACTO*/
	.Cntct{ width: 100%; font-size: 3.2vw; line-height: 4.1vw;}
	.Cntct h2{ font-size: 11.2vw; line-height: 11.5vw; margin: 3.2vw 0;}
	.Cntct p{ margin: 1.6vw 0;}
	.Cntct .Separa{ margin: 4vw 0; padding: 0 !important;}	
	.Contacto{ font-size: 2.5vw; line-height: 3.2vw; padding-top: 8vw;}
	.Contacto div{ width: 100%; padding: 4vw 6vw;}
	.Contacto input[type="text"], .Contacto textarea{ margin: 0 0 2.4vw; padding: 0.8vw 0; font-size: 2.5vw; line-height: 2.5vw;}
	.Contacto button{ font-size: 2.5vw; line-height: 2.5vw; padding: 1.3vw 4.8vw; margin: 2.4vw 0;}
	.Contacto .Social{ width: 90%;}
	.Contacto .MsnError{ margin-left: 1.6vw;}
}
@media screen and (orientation: portrait){
	body{ font-size: 3.2vw; line-height: 4.1vw; }

	h1{ font-size: 2.5vw; line-height:3.2vw;}
	h2{ font-size: 11.2vw; line-height: 11.5vw; margin: 3.2vw 0;}
	h3{ font-size: 6.4vw; line-height: 6.4vw; margin: 4.8vw 3vw;}
	h4{ font-size: 4.5vw; line-height: 4.5vw;}
	h5{ font-size: 2.2vw; line-height: 2.2vw; margin: 3.2vw 0;}
	ul{ text-align: center;}
	ul li{ width: 50%;}
	p{ margin: 1.6vw 0;}

	.Separa{ margin: 4vw 0; padding: 0 !important;}		
	.isMobil .Inverted{ flex-direction:row-reverse;}
	.Margin{ margin: 6.4vw 0;}
	
	.Mantenimiento svg{ width: 40vw;}
	.Mantenimiento p{ font-size: 6.4vw; line-height: 6.4vw; margin: 4.8vw 0;}
	.Contenido{ width: 100%;}
	.Header{ padding-top: 16vw;}
	.Quotes{ font-size: 6.4vw; line-height: 6.4vw; padding: 8vw;}
	.VideoW video{ width: 100%;}
	.ImgGrid{ width: 24vw; margin: 1.6vw;}
	.HeaderTxt{ font-size: 9vw; line-height: 9vw; padding:8vw; }
	.Datos{ width: 100%; font-size: 2.5vw; line-height: 3.5vw; margin-bottom: 6.4vw; text-align: center;}
	.Datos p:nth-of-type(1){ font-size: 11.2vw; line-height: 12.8vw; margin: 1.6vw 0;}
	.Datos p:nth-of-type(2){ padding: 0 16vw;}
	.Shares{ font-size: 2.2vw; line-height: 2.2vw; margin: 4.8vw 0; }
	.Shares a{ font-size: 2.2vw; line-height: 2.2vw; margin: 0 0.8vw;}
	
	.H800{ height:292vw;}
	.H660{ height:211.2vw;}
	.H530{ height:169.2vw;}
	.H460{ height:147.2vw;}
	.H360{ height:115.2vw;}
	.H350{ height:112vw;}
	
	.W50 div{ width: 100%; }
	.W33 div:nth-of-type(1){ width: 100%; }
	.W33 div:nth-of-type(2){ width: 100%; }	

	.Grid2-1 a{ width: 100% !important; height:84vw;}
	.Grid2-1 .Txt{ padding: 2.4vw; font-size: 2.5vw; line-height: 1.9vw;}

	.Grid2.RowsRev{ flex-direction: column-reverse !important;}
	.Grid2.W33 div:nth-of-type(1){ height: 67%;}
	.Grid2.W33 div:nth-of-type(2){ height: 33%;}
	
	.Grid3.RowsRev{ flex-direction: column-reverse !important;}
	.Grid3 div:nth-of-type(1){ height:180vw;}	
	.Grid3 div:nth-of-type(2) div{ height: 56vw;}
	
	.Grid4.RowsRev{ flex-direction: column-reverse !important;}
	.Grid4{ height:447.2vw;}
	.Grid4 div:nth-of-type(1){ height: 180vw;}
	.Grid4 div:nth-of-type(2) div{ width: 100%; height: 105.6vw;}
	.Grid4 div:nth-of-type(2) div:nth-of-type(1){ height: 56vw;}
	
	.Banners{ height: 112vw; }
	.BannersBtns{ bottom: 1.6vw;}
	
	/*HEADER*/
	header{ padding: 4.8vw 8vw;}
	#Logo{ width: 16.6vw;}
	#Menu{ width: 4.8vw; height: 3.2vw; right: 8vw; margin-top: -1.6vw;}
	#Menu span:nth-of-type(1){ top:0px;}
	#Menu span:nth-of-type(2){ top:1.6vw;}
	#Menu span:nth-of-type(3){ top:3.2vw;}
	
	/*FOOTER*/
	footer{ width: 90%; margin: 0 auto 6.4vw; font-size: 2.2vw; line-height: 2.8vw; }
	footer::before{ margin: 6vw 0;}
	footer span{ width: 50% !important;}
	footer span:nth-of-type(3){ width: 100% !important; margin-top: 4vw;}
	footer a{ margin-right: 1.6vw;}
	footer .Redes a{ margin: 0; float: none; clear: both;}

	/*CONTACTO*/
	.Contacto{ font-size: 2.5vw; line-height: 3.2vw; padding-top: 8vw;}
	.Contacto div{ width: 100%; padding: 4vw 6vw;}
	.Contacto input[type="text"], .Contacto textarea{ margin: 0 0 2.4vw; padding: 0.8vw 0; font-size: 2.5vw; line-height: 2.5vw;}
	.Contacto button{ font-size: 2.5vw; line-height: 2.5vw; padding: 1.3vw 4.8vw; margin: 2.4vw 0;}
	.Contacto .Social{ width: 90%;}
	.Contacto .MsnError{ margin-left: 1.6vw;}
	
	/*PORTAFOLIO*/
	.Portafolio article:nth-of-type(1){ padding: 8vw 6.4vw; }
	.Portafolio .Encabezado div:nth-of-type(1){ width: 100%; }
	.Portafolio .Encabezado div:nth-of-type(2){ width: 100%; font-size: 2.2vw; line-height:3.2vw;}
	.Portafolio .Encabezado div:nth-of-type(1) p:nth-of-type(1){ font-size: 6.4vw; line-height: 7.3vw; margin: 4.8vw 0;}

	/*MENU*/
	#ShowMenu{ padding: 0 5vw; font-size: 1.6vh; line-height: 2.2vh;}
	#ShowMenu .Contenido{ width: 100%; }
	#ShowMenu .Social{ width: 100%;}
	nav{ width: 100%; margin-bottom: 2vh;}
	nav a{ font-size: 7vh; line-height:7.8vh;}
	.isMobil nav a{ color:#131211 !important;}
	nav a span:nth-of-type(1){ font-size: 1.4vh; line-height: 1.6vh; margin-left: 1.5vh;}

	/*LEGALES*/
	.Legales{ padding: 16vw 5vw 0;}
	.Legales h1{ font-size: 6vw; line-height: 6vw; margin: 2.4vw 0;}
	.Legales h2{ font-size: 5.1vw; line-height: 5.1vw; margin: 2.4vw 0;}
	.Legales h3{ font-size: 4.1vw; line-height: 4.1vw; margin: 2.4vw 0;}
	.Legales ul{ text-align: left;}
	
	/*HISTORIA*/	
	#Historia .VidTxts .Infos{ width: 85%; bottom: 0 !important; left: 0 !important; top: auto !important; margin: 0 !important; padding: 0 8vw 5vw;}
	#Historia .VidTxts .Infos p:nth-of-type(1){ font-size: 3vw; line-height:3vw;}
	#Historia .VidTxts .Infos p:nth-of-type(2){ font-size: 3.7vw; line-height:3.7vw;}

	#Historia #VidTxt2 .Drag{ left:75vw; top:53vh; margin: 0;}
	#Historia #VidTxt2 .ClickDrag{ top: 60%; left: -7.5vh;}

	#Historia #VidTxt6 .Drag{ left:70vw; top:29.5vh; margin: 0;}
	#Historia #VidTxt6 .ClickDrag{ left: 50%; top: -5.5vh;}
	#Historia #VidTxt6 .Infos{ color:#131211;}

	#Historia #VidTxt8 .Drag{ left:50%; top:15vh; margin: 0; margin-left: -30vw;}
	#Historia #VidTxt8 .ClickDrag{ top:-100%; left:24.5vh;}
	#Historia #VidTxt8 .Infos{ color:#f1efe9;}
	
	#Historia #VidTxt10 .Drag{ left:50%; top:14vh; margin: 0; margin-left: -13.8vh;}
	#Historia #VidTxt10 .ClickDrag{ left:27.9vh; top:150%;}

	#Historia #VidTxt11 .Infos{ margin-left:7.5% !important;}
	
	#Historia .SkipHistoria{ left: 50%; top: 6vw; bottom: auto; }
	#Historia .SoundHistoria{ right: 4.8vw; bottom: 4.8vw; width: 4.8vw; height: 4vw;}
	#Historia .SoundHistoria span{ bottom: 1.1vw;}
	#Historia .SoundHistoria span:nth-of-type(2){ left:1.3vw;}
	#Historia .SoundHistoria span:nth-of-type(3){ left:2.6vw;}
	
	
	
	
	
}