article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;outline: none;}h1{font-size:2em;margin:0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;} em { font-style: normal !important; } ul { list-style: none; padding: 0; margin: 0; }

* { -webkit-box-sizing: border-box !important; box-sizing: border-box !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale !important; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-overflow-scrolling: touch; }

@font-face {
  font-family: "Peugeot-Style";
  src: url("webfonts/EOT/Peugeot_New-Black.eot");
  src: url("webfonts/EOT/Peugeot_New-Black.eot?#iefix") format("embedded-opentype"), 
  url("webfonts/WOFF/Peugeot_New-Black.woff") format("woff"), 
  url("webfonts/WOFF2/Peugeot_New-Black.woff2") format("woff2"), 
  url("webfonts/TTF/Peugeot_New-Black.ttf") format("truetype");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: "Peugeot-Light";
  src: url("webfonts/EOT/Peugeot_New-Light.eot");
  src: url("webfonts/EOT/Peugeot_New-Light.eot?#iefix") format("embedded-opentype"), 
  url("webfonts/WOFF/Peugeot_New-Light.woff") format("woff"), 
  url("webfonts/WOFF2/Peugeot_New-Light.woff2") format("woff2"), 
  url("webfonts/TTF/Peugeot_New-Light.ttf") format("truetype");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: "Peugeot";
  src: url("webfonts/EOT/Peugeot_New-Regular.eot");
  src: url("webfonts/EOT/Peugeot_New-Regular.eot?#iefix") format("embedded-opentype"), 
  url("webfonts/WOFF/Peugeot_New-Regular.woff") format("woff"),
  url("webfonts/WOFF2/Peugeot_New-Regular.woff2") format("woff2"), 
  url("webfonts/TTF/Peugeot_New-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: "Peugeot-Bold";
  src: url("webfonts/EOT/Peugeot_New-Bold.eot");
  src: url("webfonts/EOT/Peugeot_New-Bold.eot?#iefix") format("embedded-opentype"), 
  url("webfonts/WOFF/Peugeot_New-Bold.woff") format("woff"), 
  url("webfonts/WOFF2/Peugeot_New-Bold.woff2") format("woff2"), 
  url("webfonts/TTF/Peugeot_New-Bold.ttf") format("truetype");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: "Peugeot-BoldItalic";
  src: url("webfonts/EOT/Peugeot_New-Bold_Italic.eot");
  src: url("webfonts/EOT/Peugeot_New-Bold_Italic.eot?#iefix") format("embedded-opentype"), 
  url("webfonts/WOFF/Peugeot_New-Bold_Italic.woff") format("woff"), 
  url("webfonts/WOFF2/Peugeot_New-Bold_Italic.woff2") format("woff2"), 
  url("webfonts/TTF/Peugeot_New-Bold_Italic.ttf") format("truetype");
  font-weight: normal;
  font-style: normal; }
/*
@font-face {
    font-family: "Peugeot-Style";
    src: url("fonts/Peugeot-Style.woff") format("woff");
    font-weight: normal;
    font-style: normal; 
  }
  @font-face {
    font-family: "Peugeot-Light";
    src: url("fonts/Peugeot-Light.woff") format("woff");
    font-weight: normal;
    font-style: normal; 
  }
  @font-face {
    font-family: "Peugeot";
    src: url("fonts/Peugeot.woff") format("woff");
    font-weight: normal;
    font-style: normal; 
  }
  @font-face {
    font-family: "Peugeot-Bold";
    src: url("fonts/Peugeot-Bold.woff") format("woff");
    font-weight: normal;
    font-style: normal; 
  }
  @font-face {
    font-family: "Peugeot-BoldItalic";
    src: url("fonts/peugeot_bold_italic.woff") format("woff");
    font-weight: normal;
    font-style: normal; 
  }
*/
input:focus, select:focus, textarea:focus, button:focus { outline: none; }[contenteditable="true"]:focus { outline: none; }

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 1px solid #999;
  -webkit-text-fill-color: white;
  -webkit-box-shadow: 0 0 0px 1000px #000 inset;
  transition: background-color 5000s ease-in-out 0s;
}

:root {
    --blue: #3C7DD9;
    --mediumblue: #102139;
    --deepblue: #050D19;
    --black: #000000;
}


html { overflow-x: hidden; scroll-behavior: smooth; }

body {
	margin: 0;
	padding: 0;
    background-color: var(--black);
  font-family: 'Peugeot-Light';
  font-size: 12px;
}

#preloader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: auto; height: 100%; z-index: 9997; background: #000000; background-image: url('../img/logo_preloader.png'); background-size: 100px; background-repeat: no-repeat; background-position: center 40%; box-shadow: 0px 0px 37px 0px rgba(0, 0, 0, 0.6); transition: all ease-in-out 1s; -webkit-transition: all ease-in-out 1s; -moz-transition: all ease-in-out 1s; -ms-transition: all ease-in-out 1s; -o-transition: all ease-in-out 1s; }


.loader-review { display: flex;
  height: 100vh;
  position: relative;
  justify-content: center;
  align-items: center; }

.loading {
  background-color: "#2e6da4";
  height: 2px;
  margin: 1em;
  overflow: hidden;
  position: relative;
  width: 12em;
}

.loading-bar {
  animation: sideToside 2s ease-in-out infinite;
  /*changethisforthecolorofthesideTosideline*/background-color: var(--blue);
  height: 100%;
  position: absolute;
  width: 50%;
  -webkit-animation: sideToside 2s ease-in-out infinite;
}

@keyframes sideToside {
  0%, 100% { transform: translateX(-50%); }
  50%      { transform: translateX(150%); }
}
.center {
  margin-top: 4em;
}
.remove-loader { opacity: 0; visibility: hidden; }
.peugeot-logo img { width: 100%; height: auto; }


a, a:hover, a:visited, a:active { text-decoration: none; outline: none; border: none; }
h1, h2, h3, h4, h5, h6 { letter-spacing: -0.02em;}
p { font-family: 'Peugeot-Light'; font-size: 1em; color: #fff; }

/*! locomotive-scroll v3.5.4 | MIT License | https://github.com/locomotivemtl/locomotive-scroll */
html.has-scroll-smooth {
  overflow: hidden; }

html.has-scroll-dragging {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

.has-scroll-smooth body {
  overflow: hidden; }

.has-scroll-smooth [data-scroll-container] {
  min-height: 100vh; }

.c-scrollbar {
  position: absolute;
  right: 0;
  top: 0;
  width: 11px;
  height: 100vh;
  transform-origin: center right;
  transition: transform 0.3s, opacity 0.3s;
  opacity: 0; }
  .c-scrollbar:hover {
    transform: scaleX(1.45); }
  .c-scrollbar:hover, .has-scroll-scrolling .c-scrollbar, .has-scroll-dragging .c-scrollbar {
    opacity: 1; }

.c-scrollbar_thumb {
  position: absolute;
  top: 0;
  right: 0;
  background-color: black;
  opacity: 0.5;
  width: 7px;
  border-radius: 10px;
  margin: 2px;
  cursor: -webkit-grab;
  cursor: grab; }
  .has-scroll-dragging .c-scrollbar_thumb {
    cursor: -webkit-grabbing;
    cursor: grabbing; }

header { position: absolute; top: 0; left: 0; width: 100vw; height: auto; z-index: 1000; }
.coty-logo { display: block; float: left; width: 60px; margin: 2em 0 0 2em; z-index: 9000 }
.peugeot-logo { display: block; float: right; width: 90px; margin: 2em 2em 0 0; z-index: 9000 }

.bt { display: inline-block; vertical-align: top; font-family: 'Peugeot-bold'; font-size: 1.1em; color: #fff; text-transform: uppercase; background: var(--blue); padding: 0.75em 1em; border: none; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; transition: 300ms all ease-in-out; -webkit-transition: 300ms all ease-in-out; -moz-transition: 300ms all ease-in-out; -ms-transition: 300ms all ease-in-out; -o-transition: 300ms all ease-in-out; }
.bt:hover { color: #fff; background: #00a3e0; cursor: pointer; }
.bt.gris{background: #cdcdcd;color:#000000;}
main { overflow-x: hidden; transition: all 300ms cubic-bezier(.18,.49,.47,.89); -webkit-transition: all 300ms cubic-bezier(.18,.49,.47,.89); -moz-transition: all 300ms cubic-bezier(.18,.49,.47,.89); -ms-transition: all 300ms cubic-bezier(.18,.49,.47,.89); -o-transition: all 300ms cubic-bezier(.18,.49,.47,.89);  background: var(--red); }

.gradient-overlay { background: rgb(15,11,27);
    background: -moz-linear-gradient(180deg, rgba(15,11,27,0) 10%, rgba(1,6,13,1) 65%);
    background: -webkit-linear-gradient(180deg, rgba(15,11,27,0) 10%, rgba(1,6,13,1) 65%);
    background: linear-gradient(180deg, rgba(15,11,27,0) 10%, rgba(1,6,13,1) 65%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0f0b1b",endColorstr="#01060d",GradientType=1);}

/*//////// RESERVATION BLOCK ////////*/

.reservation { position: fixed; bottom: 0; right: 3em; display: flex; justify-content: center; align-items: center; width: auto; z-index: 3000; background-color: rgba(0,0,0,0.5); padding: 1em; border-top-left-radius: 5px; border-top-right-radius: 5px; }
.reservation div { padding: 0 1em 0 0; color: #fff; text-align: left; }
.reservation div:first-child { padding: 0 1em 0 10px; color: #fff; text-align: left; border-right: 1px solid #fff; margin-right: 15px;}
.reservation div span { font-size: 0.5em; font-family: 'Peugeot-Light'; letter-spacing: 1px; text-transform: uppercase; display: block;  }
.reservation div h3 { font-size: 1.5em; font-family: 'Peugeot-Bold'; letter-spacing: -0.01em; margin: 3px 0 0 0;  }
.reservation .bt { text-align: center; }
.reservation div.tenelo { border-right: 0px solid #fff !important; }

/*//////// HERO ////////*/

.hero-section { position: relative; width: 100vw; height: 110vh; }
.hero-section .gradient-overlay { position: absolute; bottom: -10vh; width: 100vw; height: 50vh; z-index: 5; }
.hero-section .back { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh;  background: url('../img/hero-back.jpg') no-repeat center; background-size: cover; }
.hero-info { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 2; padding: 0 0 0 8vw; }
.hero-info .line { width: 1px; height: 25vh; background: var(--blue); margin: 0 0 2em 2px; }
.hero-info .line2 { width: 1px; height: 35vh; background: var(--blue); margin: 2em 0 0 2px; }
.hero-info h1 { font-family: 'Peugeot-Bold'; font-size: 3em; text-transform: uppercase; color: #fff; }
.hero-info h1 span { display: block; font-size: 1em }
.hero-info h2 { font-family: 'Peugeot-Light'; font-size: 1.5em; text-transform: uppercase; color: #fff; }
.hero-info p { font-family: 'Peugeot-Light'; font-size: 1.2em; width: 420px; color: #fff; line-height: 1.2em; }
.hero-info a { font-family: 'Peugeot-Bold'; font-size: 1.1em; text-transform: uppercase; color: #fff; }

/*//////// SWIPER DEFAULT CSS ////////*/

.swiper-slide { display: flex; justify-content: flex-end; align-items: flex-end; }
.swiper-pagination { z-index: 2000; }
.swiper-button-next, .swiper-button-prev { color: #fff; }
.swiper-button-next:after, .swiper-button-prev:after { font-size: 2em; }
.swiper-button-prev { left: 0.5em; top: 40%}
.swiper-button-next { right: 0.5em; top: 40% }
.swiper-pagination-bullet { width: 50px; height: 8px; border-radius: 4px !important; background: #fff; }
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 8px; }
.swiper-pagination-clickable .swiper-pagination-bullet { outline: none; }
.swiper-pagination-bullet-active { background: var(--blue);}

/*//////// DISEÑO EXTERIOR ////////*/ 

.sectionExterior { position: relative; z-index: 10;  }

.exterior-design { position: relative; width: 100vw; display: block; backface-visibility: hidden ; -webkit-backface-visibility: hidden; z-index: 50; 
  /* min-height: 100vw;  */
  opacity: 1 !important; }
.back-header { position: absolute; top: 20vh; left: 0; width: 100vw; height: auto; opacity: 0.3; }
.back-header picture { width: 100vw; height: auto; }
.back-header picture img { width: 100vw; height: auto; }
.back-header .gradient-overlay { position: absolute; top: 0; left: 0; width: 100vw; height: 100%; background: rgb(1,6,13); background: -moz-linear-gradient(180deg, rgba(1,6,13,1) 0%, rgba(1,6,13,0) 30%, rgba(1,6,13,0) 70%, rgba(1,6,13,1) 100%); background: -webkit-linear-gradient(180deg, rgba(1,6,13,1) 0%, rgba(1,6,13,0) 30%, rgba(1,6,13,0) 70%, rgba(1,6,13,1) 100%); background: linear-gradient(180deg, rgba(1,6,13,1) 0%, rgba(1,6,13,0) 30%, rgba(1,6,13,0) 70%, rgba(1,6,13,1) 100%); filter:; progid:DXImageTransform.Microsoft.gradient(startColorstr="#01060d",endColorstr="#01060d",GradientType=1); -webkit-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#01060d",endColorstr="#01060d",GradientType=1); }

.exterior-design .back-header { top: 70vh; } 

.exterior-design .content{ position: relative; z-index: 2; width: 100vw; padding: 12vh 8vw 3em 8vw; }

.exterior-design .content h2 { position: relative; font-family: 'Peugeot-Light'; font-size: 4em; color: #fff; padding: 0 0 0 8vw; display: inline-block; transform: translateX(-8vw); margin: 0 0 0.5em 0; -webkit-transform: translateX(-8vw); -moz-transform: translateX(-8vw); -ms-transform: translateX(-8vw); -o-transform: translateX(-8vw); }
.exterior-design .content h2 div { position: absolute; top: -25px; left: 0; width: 100%; height: 20px; border-top: 1px solid var(--blue); border-right: 1px solid var(--blue) }
.exterior-design .content .highlight { width: 30vw; margin: 0; padding: 0; line-height: 2em;}
.exterior-design .content .highlight span { display: block; font-size: 1.6em;}

.content-grid { margin-top: 15vh; width: 100vw; padding-bottom: 5vh }
.content-grid article { width: 40vw; }
.content-grid article p { line-height: 2em; margin-top: 1.5em;  }

.content-grid .swiper-wrapper { z-index: 10; }
.content-grid .swiper-container {width: auto; overflow: visible; margin: 4em 0; }
.content-grid .swiper-slide { position: relative;  }
.content-grid .swiper-slide img { width: 100%; height: auto; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.6)}
.content-grid .swiper-slide:nth-child(1) { position:relative; width: 50vw; padding: 0; z-index: 5; }
.content-grid .swiper-slide:nth-child(2) { position:relative; width: 42vw; padding: 0; transform: translate(-10%, -20%); -webkit-transform: translate(-10%, -20%); -moz-transform: translate(-10%, -20%); -ms-transform: translate(-10%, -20%); -o-transform: translate(-10%, -20%); }
.content-grid .swiper-slide:nth-child(3) { position:relative; width: 40vw; padding: 0; transform: translate(-90%,35%); -moz-transform: translate(-90%,35%); -ms-transform: translate(-90%,35%); -o-transform: translate(-90%,35%); z-index: 6; -webkit-transform: translate(-90%,35%); }

/* IMAGES Titles */
.content-grid .swiper-slide:nth-child(1) .titulo { position: absolute; bottom: -3%; width: 90% !important;left: 10%;  z-index: 999; }
.content-grid .swiper-slide:nth-child(1) .titulo .lines { width: 100%; height: 30px; border-bottom: 1px solid #d2d2d2; border-right: 1px solid #d2d2d2;}
.content-grid .swiper-slide:nth-child(1) h4 { display: block; text-align: right;  z-index: 400; color: #fff; text-shadow: 0px 0px 10px rgba(0,0,0,0.8); }
.content-grid .swiper-slide:nth-child(2) .titulo { position: absolute; top: -47%; width: 90% !important;left: 10%;  z-index: 999; }
.content-grid .swiper-slide:nth-child(2) .titulo .lines { width: 100%; height: 30px; border-top: 1px solid #d2d2d2; border-left: 1px solid #d2d2d2;}
.content-grid .swiper-slide:nth-child(2) h4 { display: inline-table;  z-index: 400; color: #fff; text-shadow: 0px 0px 10px rgba(0,0,0,0.8); }
.content-grid .swiper-slide:nth-child(3) .titulo { position: absolute; bottom: -3%; width: 90% !important;left: 10%;  z-index: 999; }
.content-grid .swiper-slide:nth-child(3) .titulo .lines { width: 100%; height: 30px; border-bottom: 1px solid #d2d2d2; border-left: 1px solid #d2d2d2;}
.content-grid .swiper-slide:nth-child(3) h4 { display: inline-table;  z-index: 400; color: #fff; text-shadow: 0px 0px 10px rgba(0,0,0,0.8); }

.content-grid .swiper-pagination { display: none; }
.content-grid .swiper-button-prev { display: none; }
.content-grid .swiper-button-next{ display: none; }

/*//////// DISEÑO INTERIOR ////////*/

.sectionInterior { position: relative; z-index: 6; }
.interior-design { position: relative; width: 100vw; display: block; z-index: 50; opacity: 1 !important; padding-top: 10vh; 
  background: rgb(7,19,36);
  background: linear-gradient(0deg, rgba(7,19,36,0) 0%, rgba(34,34,34,1) 75%);}
.interior-design .back-header { top: 25vh; opacity: 1; z-index: 0; }

.interior-design .content { position: relative; width: 100vw; padding: 0 8vw; z-index: 80; }
.interior-design .content h2 { position: relative; font-family: 'Peugeot-Light'; font-size: 4em; color: #fff; padding: 0 0 0 8vw; display: inline-block; transform: translateX(-8vw); margin: 0 0 0.5em 0; -webkit-transform: translateX(-8vw); -moz-transform: translateX(-8vw); -ms-transform: translateX(-8vw); -o-transform: translateX(-8vw); }
.interior-design .content h2 div { position: absolute; top: -25px; left: 0; width: 100%; height: 20px; border-top: 1px solid var(--blue); border-right: 1px solid var(--blue) }

.content-grid-2 { display: flex; justify-content: flex-start; align-items: flex-start; padding: 20vh 0 5vh; width: 100%; flex-direction: row-reverse; }

#uspsInterior { width: 50vw; }
#uspsInterior .swiper-slide { padding: 50px 0 4em 0; }
#uspsInterior .swiper-slide img{ width: 100%; height: auto; }
#uspsInterior .swiper-slide h4 { position: absolute; bottom: 3em; left: 0; padding: 2em 3em; margin: 0; width: 100%; color: #fff; text-transform: uppercase; font-size: 1.1em; text-align: right; background: rgb(1,6,13);
  background: -moz-linear-gradient(180deg, rgba(1,6,13,0) 0%, rgba(1,6,13,0.7077205882352942) 74%);
  background: -webkit-linear-gradient(180deg, rgba(1,6,13,0) 0%, rgba(1,6,13,0.7077205882352942) 74%);
  background: linear-gradient(180deg, rgba(1,6,13,0) 0%, rgba(1,6,13,0.7077205882352942) 74%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#01060d",endColorstr="#01060d",GradientType=1); }

.content-grid-2 .interior-texts { width: 50vw; padding: 0 6vw 0 0; margin-top: -80px; }
.content-grid-2 .interior-texts h3 { font-family: 'Peugeot-Light'; font-size: 3em; color: #fff; display: inline-block; margin: 0 0 0.5em 0;  }
.content-grid-2 .interior-texts p { line-height: 2em; margin-top: 1.5em;  }


/*//////// MOTORIZACIÓN ////////*/

.module-image { position: relative; display: flex; justify-content: flex-start; align-items: flex-start; width: 100vw; height: auto; overflow: hidden; padding: 8em 0; margin: 5vh 0; }
.module-image .content-image { position: relative; width: 50vw; padding: 0 8vw; z-index: 2;  }
.module-image .content-image  h2 { position: relative; font-family: 'Peugeot-Light'; font-size: 4em; color: #fff; padding: 0 0 0 8vw; display: inline-block; transform: translateX(-8vw); margin: 0 0 0.5em 0; -webkit-transform: translateX(-8vw); -moz-transform: translateX(-8vw); -ms-transform: translateX(-8vw); -o-transform: translateX(-8vw); }
.module-image .content-image h2 div { position: absolute; top: -25px; left: 0; width: 100%; height: 20px; border-top: 1px solid var(--blue); border-right: 1px solid var(--blue) }
.module-image .content-image h3 { position: relative; font-family: 'Peugeot-Light'; font-size: 2em; color: #fff; display: inline-block; margin: 1em 0 0.5em 0; }
.module-image .content-image p { line-height: 2em; }

.module-image .img-back { position: absolute; top: 100%; left: -5%; width: 110%; height: 140%; background: url('../img/motorizacion.jpg') no-repeat center; background-size: cover; }
.module-image .img-backExt { position: absolute; top: 100%; left: -5%; width: 110%; height: 140%; background: url('../img/exterior.jpg') no-repeat center; background-size: cover; }

.module-image .gradient {
  position: absolute;
  top: -5%;
  left: -5%;
  width: 110%;
  height: 110%;
  background: none;
  background: -moz-linear-gradient(90deg, rgba(1,6,13,1) 0%, rgba(1,6,13,0) 100%);
  background: -webkit-linear-gradient(90deg, rgba(1,6,13,1) 0%, rgba(1,6,13,0) 100%);
  background: linear-gradient(90deg, rgba(1,6,13,1) 0%, rgba(1,6,13,0) 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#01060d",endColorstr="#01060d",GradientType=1);
  -webkit-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#01060d",endColorstr="#01060d",GradientType=1);
  opacity: 0.8
}

/*NUEVO MODULO INFERIOR*/
#sectionReservationDesktop { position: relative; z-index: 4000; background: var(--black); padding: 0; }
.module-reservation-desktop { position: relative; display: flex; justify-content: center; align-items: center; width: 100vw; height: auto; overflow: hidden; padding: 3em 8vw; margin: 5vh 0 0 0; background: rgb(1,6,13); 
  background: -moz-linear-gradient(180deg, rgba(1,6,13,0) 0%, rgba(136,136,136,0.2007177871148459) 60%, rgba(1,6,13,0) 91%);
  background: -webkit-linear-gradient(180deg, rgba(1,6,13,0) 0%, rgba(136,136,136,0.2007177871148459) 60%, rgba(1,6,13,0) 91%);
  background: linear-gradient(180deg, rgba(1,6,13,0) 0%, rgba(136,136,136,0.2007177871148459) 60%, rgba(1,6,13,0) 91%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#01060d",endColorstr="#01060d",GradientType=1); }
.module-reservation-desktop .line { width: 1px; height: 20vh; background: #c4c4c4; margin: 0; }
.content-reservation-desktop { width: 40vw }
.content-reservation-desktop h2 { font-family: 'Peugeot-Bold'; font-size: 2.7em; text-transform: uppercase; color: #fff; margin-bottom: 5px;}
.content-reservation-desktop h2 span { display: block; font-size: 1em }
.content-reservation-desktop h3 { font-family: 'Peugeot-Light'; font-size: 1.1em; color: #fff; }
.versions-desktop ul { padding: 0; margin: 0; list-style: none; display: none; border-left: 1px solid #c4c4c4; padding-left:15px;}
.versions-desktop ul li { font-family: 'Peugeot-Light'; color: #fff; font-size: 0.9em;line-height: 1.5;}
.versions-desktop ul li a { font-family: 'Peugeot-Light'; color: #fff; font-size: 1em;line-height: 1.5; text-decoration: underline;}
.versions-desktop ul li:first-child { font-family: 'Peugeot-Light'; color: #fff; font-size: 1.2em;line-height: 2;}
.versions-desktop .selected-list { display: block; padding-bottom:15px;}
.content-versions-desktop { margin:0;  width: 30vw;/*display: flex;*/}
.content-versions-desktop p{text-align:center;font-size: 0.9em;}
.content-versions-desktop p.detalle{height:110px;}
.content-versions-desktop p.sin-stock{visibility:hidden;}
.content-versions-desktop p.bajada-contactar a {color:#ffffff;font-size: 0.9em;text-decoration:underline;}
.content-versions-desktop .card{margin:2%;color:#ffffff;display:block;width:96%;border:1px solid var(--blue);border-radius: 8px;}
.content-versions-desktop .card h2{text-align:center;font-family: 'Peugeot-Bold'; margin-bottom: 0px;font-size: 1.7em;}
.content-versions-desktop .card h3{text-align:center;font-family: 'Peugeot-Bold';font-size: 1.4em;margin-top: 2px}
.content-versions-desktop .card span{text-align:center;display:block;font-family: 'Peugeot-Light';font-size:0.9em;}
.content-versions-desktop .card span b{font-family: 'Peugeot-Bold';font-size:1em}
.content-versions-desktop .card span.colores{font-size: 1em;border-top: 1px solid #c4c4c4; margin: 0px 20px;padding-top: 10px;}
.content-versions-desktop .card a{margin-top:2px;font-family: 'Peugeot-Light';background: var(--blue);display:block;font-size: 1.3em; width: 100%; text-align: center;color:#ffffff; padding:15px 10px;border-bottom-left-radius: 8px;border-bottom-right-radius: 8px;}
.content-versions-desktop .card a.gris{background: #0E284D;}
.content-versions-desktop .card .color-chips{text-align:center; width: 100%;margin-bottom: 15px;}
/*.content-versions-desktop.disabled a{background:var(--mediumblue);}*/
.content-versions-desktop.disabled p.sin-stock{visibility:visible;}

#sectionReservation { position: relative; z-index: 4000; background: var(--black); padding: 0; }

.module-reservation { position: relative; display: flex; justify-content: center; align-items: center; width: 100vw; height: auto; overflow: hidden; padding: 3em 8vw; margin: 5vh 0 0 0; background: rgb(1,6,13);
  background: -moz-linear-gradient(180deg, rgba(1,6,13,0) 0%, rgba(136,136,136,0.2007177871148459) 60%, rgba(1,6,13,0) 91%);
  background: -webkit-linear-gradient(180deg, rgba(1,6,13,0) 0%, rgba(136,136,136,0.2007177871148459) 60%, rgba(1,6,13,0) 91%);
  background: linear-gradient(180deg, rgba(1,6,13,0) 0%, rgba(136,136,136,0.2007177871148459) 60%, rgba(1,6,13,0) 91%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#01060d",endColorstr="#01060d",GradientType=1); }

.content-reservation { width: 40vw }
.content-reservation h2 { font-family: 'Peugeot-Light'; font-size: 2.5em; text-transform: uppercase; color: #fff; }
.content-reservation h2 span { display: block; font-size: 1em }
.content-reservation h3 { font-family: 'Peugeot-Light'; font-size: 1.1em; color: #fff; }

.wrapper { 	margin: 1em 0; }
.wrapper:after { content: '.'; display: block; clear: both; height: 0; visibility: hidden; overflow: hidden; }
.wrapper select { position: absolute; top: -1000em; }

.wrapper label,
.wrapper #select-box,
.wrapper button {
	float: left;
	margin-right: 1em;
}

.wrapper label {
	font-weight: bold;
	padding-top: 0.2em;
}

.wrapper #select-box {
  width: 330px;
	position: relative;
}

.wrapper #select-box #trigger {
  background: none;
  color: #fff;
  cursor: pointer;
  padding: 0.4em;
  width: 310px;
  height: 30px;
  line-height: 1.4;
  border-bottom: 1px solid #fff;
  font-family: 'Peugeot-Light';
  font-size: 1.2em;
  text-align: left;
}

.wrapper #select-box #trigger::after { color: white; content: '▾'; margin-right: 10px; pointer-events: none; position: absolute; right: 16px; top: 0px; font-size: 20px; }

.wrapper #select-box #choices {
	width: 100%;
	background: #000000;
	color: #fff;
	position: absolute;
	top: 45px;
	left: 0;
	display: none;
	margin: 0;
	padding: 0;
  list-style: none;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.6);
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  z-index: 20;
}

.wrapper #select-box #choices li {
	padding: 0.5em;
	margin-bottom: 0.3em;
	display: block;
  cursor: pointer;
  text-align: left;
}

.wrapper #select-box #choices li:first-child { 	padding: 0.8em 0.5em 0.5em 0.5em; }

.wrapper #select-box #choices li:hover {
	background: #000;
}

.versions ul { padding: 0; margin: 0; list-style: none; display: none; }
.versions ul li { font-family: 'Peugeot-Light'; color: #fff; font-size: 0.9em;}

.versions .selected-list { display: block; padding-bottom:15px;border-bottom: 1px solid #d2d2d2;}

.color-chips { display: inline-block; height: 45px; margin-top: 6px;  margin-bottom: 25px;}
.color-chips li { display: inline-block; vertical-align: middle; width: 30px; height: 30px; border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px; -ms-border-radius: 30px; -o-border-radius: 30px; margin: 0.25em; border: 3px solid #666; transition: all 200ms cubic-bezier(.18,.49,.47,.89); -webkit-transition: all 200ms cubic-bezier(.18,.49,.47,.89); -moz-transition: all 200ms cubic-bezier(.18,.49,.47,.89); -ms-transition: all 200ms cubic-bezier(.18,.49,.47,.89); -o-transition: all 200ms cubic-bezier(.18,.49,.47,.89); box-shadow: 0 0 0px rgba(0,0,0,0.3); }
.color-chips li:hover { cursor: pointer; }
/*
.color-chips .selected { border: 3px solid #fff; transform: scale(1.025); box-shadow: 0px 0px 5px rgba(0,0,0,0.3); -webkit-transform: scale(1.025); -moz-transform: scale(1.025); -ms-transform: scale(1.025); -o-transform: scale(1.025); }
*/
#carReservation { width: 60vw; }
#carReservation .swiper-slide img { width: 100%; height: auto; }

.reservation-footer { display: flex; align-items: center; justify-content: flex-start; }
.reservation-footer div { padding: 0 1em 0 0; }
.reservation-footer div:first-child { padding: 0 1.5em 0 0; margin: 0 1.5em 0 0; border-right: 1px solid #fff; }
.reservation-footer div span { font-size: 1em; font-family: 'Peugeot-Light'; text-transform: uppercase; display: block; color: #fff;  }
.reservation-footer div h3 { font-size: 1.8em; font-family: 'Peugeot-Bold'; letter-spacing: -0.01em; margin: 3px 0 0 0;  }

.reserva { margin-top: 1em; min-width: 220px; }


.nombre-color { font-size: 1.6em; margin: 0px; padding: 0px; margin-top: 25px;}




.exterior { width: 100%; height: 660px; display: flex;  align-items: center; background-image: url(../img/exterior.jpg); background-size: cover; background-position: center center; }
.exterior .gradient { position: absolute; top: 0; left: 0; height: 100%; width: 70%;
  background: rgb(0,0,0);
  background: linear-gradient(90deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 89%);}
.exterior .info { width: 45%; max-width: 700px; height: auto;  display: flex;  flex-direction: column; justify-content: flex-start; position: relative;z-index: 999; }
.exterior .info * { color: #FFF; text-align: left;}
.exterior .info .line { width: 85%; height: 40px; border-top: 1px solid #fff; border-right: 1px solid #fff;}
.exterior .info h4 { font-size: 4em; line-height: 1em; padding-left: 5vw; letter-spacing: 2px; margin: 0; margin-top: 10px;}
.exterior .info p { font-size: 16px; line-height: 36px; padding-left: 5.4vw;  margin: 0; margin-top: 20px;}
.exterior .info b { font-size: 22px; }
.exterior .fotoMob { display: none;}



.interior { width: 100%; height: 660px; display: flex;  align-items: flex-end; background-image: url(../img/dis-interior.jpg); background-size: cover; background-position: center center; }
.interior .gradient { position: absolute; top: 0; right: 0; height: 100%; width: 70%;
  background: rgb(0,0,0);
  background: linear-gradient(90deg, rgba(0,0,0,0) 7%, rgba(0,0,0,0.7) 100%);}
.interior .info { width: 500px; height: auto;  display: flex;  flex-direction: column; justify-content: flex-start; margin-left: auto; margin-bottom: 60px; z-index: 999; }
.interior .info * { color: #FFF; text-align: left;}
.interior .info .line { width: 100%; height: 20px; border-bottom: 1px solid #fff; border-left: 1px solid #fff;}
.interior .info h4 { font-size: 3em; line-height: 1em; padding-left: 0vw; letter-spacing: 2px; margin: 0; margin-top: 20px; padding-left: 0px;}
.interior .fotoMob { display: none;}




.listax3 { width: 100%; height: auto; padding: 50px 0px; display: flex; align-items: flex-start; justify-content: center; flex-wrap: wrap;
  background: rgb(7,19,36);
  background: linear-gradient(180deg, rgba(7,19,36,0) 24%, rgba(40,40,40,1) 25%, rgba(7,19,36,0) 85%);
}
.listax3>div { width: 400px; margin: 0px 50px;}
.listax3>div .foto { width: 100%; height: 300px; background-color: #CCC; position: relative; overflow: hidden; margin-bottom: 28px; background-size: cover; background-position: center center;}
.listax3>div h6 { font-size: 16px; line-height: 38px; color: #FFF; margin: 0px;}
.listax3>div p { font-size: 12px; line-height: 29px; margin-top: 6px;}





.adas { width: 90%; height: auto; padding: 60px 0px; max-width: 1400px; margin: auto; margin-bottom: 100px;}
.adas .titular { width: 100%; position: relative;  margin-bottom: 40px;}
.adas .titular h6 { color: #FFF; font-size: 50px; line-height: 60px; background-color: #01060d;z-index: 999; display: inline-block; margin: 0px 0px; padding-right: 30px; position: relative;}
.adas .titular .line {position: absolute;  width: 97%;  height: 110px;  border-top: 1px solid #00a3e0;  border-right: 1px solid #00a3e0;  top: 28px;  z-index: 1;  right: 3%;}

.sliderAdas { z-index: 0;}
.sliderAdas .swiper-slide { overflow: hidden; width: 100%; height: auto; position: relative;}
.sliderAdas .swiper-slide .foto { width: 100%; height: 40vw; background-size: cover; background-position: center center; background-repeat: no-repeat;}
.sliderAdas .swiper-slide .info { position: absolute; bottom: 0px; left: 30px; display: flex; }
.sliderAdas .swiper-slide .info .line { width: 30px; height: 100px; border-left: 1px solid #00a3e0; border-top: 1px solid #00a3e0;}
.sliderAdas .swiper-slide .info p { font-size: 22px; line-height: 35px; margin-top: -15px; margin-left: 16px;}
.sliderAdas .swiper-slide .info b { font-size: 30px; }
.sliderAdas .swiper-slide .play {
  position: absolute;width: 70px; opacity: 0.4;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%) ;
  -webkit-transform: translate(-50%,-50%) ;
  -moz-transform: translate(-50%,-50%) ;
  -ms-transform: translate(-50%,-50%) ;
  -o-transform: translate(-50%,-50%) ;
}
.sliderAdas .swiper-slide .play:hover { opacity: 0.6;}
.sliderAdas .swiper-button-next {  right: 10px; top: 50%;}
.sliderAdas .swiper-button-prev { left: 10px; top: 50%;}





.motor2 { width: 100%; height: 700px; display: flex;  align-items: center; background-image: url(../img/motorizacion2.jpg); background-size: cover; background-position: center center; }
.motor2 .gradient { position: absolute; top: 0; left: 0; height: 100%; width: 70%;
  background: rgb(0,0,0);
  background: linear-gradient(90deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 89%);}
.motor2 .info { width: 40%; max-width: 700px; height: auto;  display: flex;  flex-direction: column; justify-content: flex-start; position: relative;z-index: 999; }
.motor2 .info * { color: #FFF; text-align: left;}
.motor2 .info .line { width: 90%; height: 30px; border-bottom: 1px solid #fff; border-right: 1px solid #fff;}
.motor2 .info h4 { font-size: 4em; line-height: 1em; padding-left: 5vw; letter-spacing: 2px; margin: 0; margin-top: 20px;}
.motor2 .info p { font-size: 14px; line-height: 36px; padding-left: 5.4vw;  margin: 0; margin-top: 20px; width: 90%;}
.motor2 .info b { font-size: 22px; }
.motor2 .fotoMob { display: none;}






.sliderFrente { width:100%; height: auto; min-height: 400px; padding-bottom: 10px; position: relative; padding-top: 80px; margin-bottom: 50px;
   background: rgb(7,19,36);
  background: linear-gradient(180deg, rgba(7,19,36,0) 0%, rgba(23,23,23,1) 50%, rgba(7,19,36,0) 100%); }

.sliderFrente .opciones { position: absolute; bottom: 0px; right: 0px;z-index: 9999;}
.sliderFrente .opciones .nombre { color: #FFF; font-size: 25px; margin: 0px;}
.sliderFrente .opciones .line { width: 400px; height: 1px; background-color: #ffffff; margin: 15px 0px;}
.sliderFrente .opciones ul { display: flex;}
.sliderFrente .opciones ul li { width: 32px; height: 32px; background-color: #333; margin-right: 20px; overflow: hidden; background-size: cover; background-position: center center; cursor: pointer;
  border: 2px solid #666; box-sizing: border-box;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;}
  .sliderFrente .opciones ul li:hover { opacity: 0.6;}

  .sliderFrente .opciones ul li.active { border-color: #FFF;}
.sliderFrente .opciones ul li.chipAmarillo { background-image: url(../img/color-chips/amarillo.png);  background-position: center center;}
.sliderFrente .opciones ul li.chipRojo { background-image: url(../img/color-chips/rojo.png);  background-position: center center;}
.sliderFrente .opciones ul li.chipBlanco { background-image: url(../img/color-chips/blanco.png);  background-position: center center;}

.sliderFrente .autos { width: 100%; height: auto; min-height: 500px; position: relative; padding: 0px 0px; margin-top: 50px; }
.sliderFrente .autos .color {width: 100%; position: absolute;  text-align: center;}
@media screen and (max-width: 800px) {.sliderFrente .autos .color {padding-top: 50px;}}
.sliderFrente .autos .color.amarillo {left: 0%;}
.sliderFrente .autos .color.rojo {left: 100%;}
.sliderFrente .autos .color.blanco {left: 200%;}
.sliderFrente .autos .color img {width: auto; max-width: 100%; height: auto;}



.btn-nuevos {  margin-top: 20px; color: #FFF; margin-bottom: 30px;}
.btn-nuevos a, .btn-nuevos button {background: transparent; border:none;color: #FFF; font-size: 11px; line-height: 24px; margin: 0px 10px; text-decoration: underline; letter-spacing: 1px;}
.btn-nuevos a:hover { text-decoration: none; }




.legal-adas { color: #FFF; font-size: 16px; line-height: 26px; margin-top: 50px; opacity: 0.7;}






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

  .content-grid { margin-top: 0vh; }
  .sliderFrente {    padding-top: 40px;}

}



@media screen and (max-width: 1500px) {
  .listax3>div {    width: 380px;    margin: 0px 25px;  }
  .listax3>div .foto {    height: 240px;}

  .exterior .info .line {    width: 95%;}
  .exterior .info p {    width: 95%;}

  .content-grid { margin-top: 0vh; }

  .exterior-design .content {    padding: 5vh 8vw 3em 8vw;}

  .sliderFrente {    padding-top: 20px;}

}

@media screen and (max-width: 1440px) {
  .reserva{
    min-width: unset;
  }
}

@media screen and (max-width: 1380px) {
  .content-reservation .bt{
    font-size: 1em;
  }
}

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

  p { font-size: 1em; }
  .hero-info h1 { font-size: 3.5em; } 
  .hero-info p { font-size: 1.25em; }
  #sagaSwiper .swiper-slide { padding: 0 0 5vh 0; }
  .exterior-design .back-header { top: 90vh; } 
  .interior-design .back-header { top: 40vh; } 
  .exterior-design .content .highlight span { font-size: 1.4em; }

  .listax3>div {    width: 330px;    margin: 0px 10px;}
  .listax3>div .foto {    height: 190px;}

  .exterior .info h4 {    font-size: 3.3em;}
  .interior .info h4 {    font-size: 3.3em;}
  .motor2 .info h4 {    font-size: 3.3em;}

  .listax3>div h6 {    font-size: 22px;    line-height: 33px;}

  .sliderFrente .opciones {    bottom: -40px;}
  .sliderFrente .opciones .nombre {    font-size: 34px;}
  .sliderFrente .opciones .line {    margin: 10px 0px;    margin-bottom: 16px; width: 320px;}
  .sliderFrente .opciones ul li {    width: 36px;    height: 36px;    margin-right: 14px;}

  .sliderFrente .opciones {    bottom: -15px;}
  
}
@media screen and (max-width: 1257px) {
  .content-reservation .bt{
    font-size: 0.9em;
  }
}

@media screen and (max-width: 1135px) {
  .content-reservation .bt{
    font-size: 0.8em;
  }
}
@media screen and (max-width: 1100px) {
  .exterior { background-image: none;    margin-top: 80px; height: auto;    flex-direction: column;align-items: flex-start;}
  .exterior .fotoMob { display: block; width: 100%;}
  .exterior .gradient { display: none;}
  .exterior .info {    margin-top: -70px;   width: 90%;}
  .exterior .info h4 {  margin-top: 0px;}
  .exterior .info .line {    width: 75%;}
  
  .interior { background-image: none;    margin-top: 80px; height: auto;    flex-direction: column;align-items: flex-start;}
  .interior .fotoMob { display: block; width: 100%;}
  .interior .gradient { display: none;}
  .interior .info {    margin-top: -100px;}
  .interior .info h4 {  margin-top: 10px;}

  .motor2 { background-image: none;    margin-top: 80px; height: auto;    flex-direction: column;align-items: flex-start;}
  .motor2 .fotoMob { display: block; width: 100%;}
  .motor2 .gradient { display: none;}
  .motor2 .info {    margin-top: -70px;   width: 90%;}
  .motor2 .info h4 {   margin-top: 10px;}

  .exterior-design .content {    padding: 1vh 8vw 3em 8vw;}

  .adas .titular h6 {    font-size: 44px;    line-height: 54px;}

}


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

  .coty-logo { margin: 2em 0 0 6.25vw; }
  .hero-section { height: 100vh; }
  .hero-section .back { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh;  background: url('../img/hero-mob.jpg') no-repeat center; background-size: cover; }
  .hero-info { padding: 0 0 0 10vw; }
  .hero-info .line { height: 50vh; background: transparent;}
  .hero-info h2 { margin: 10px 0; }
  .hero-info p {  font-size: 1.1em; line-height: 1.4em;}
  .hero-info a { font-size: 1.1em; }

  .hero-section .gradient-overlay { height: 25vh;}
  .hero-info .line2 { height: 16vh; }

  .saga { padding: 3em 0 0 0; background: rgb(1,6,13); background: -moz-linear-gradient(180deg, rgba(1,6,13,0) 0%, rgba(52,116,205,0.2007177871148459) 24%, rgba(1,6,13,0) 69%);
background: -webkit-linear-gradient(180deg, rgba(1,6,13,0) 0%, rgba(52,116,205,0.2007177871148459) 24%, rgba(1,6,13,0) 69%); background: linear-gradient(180deg, rgba(1,6,13,0) 0%, rgba(52,116,205,0.2007177871148459) 24%, rgba(1,6,13,0) 69%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#01060d",endColorstr="#01060d",GradientType=1);}
  .saga h2 { padding: 0 0 0 70px; }
  #sagaSwiper { transform: none; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; }
  #sagaSwiper .swiper-slide { flex-direction: column; }
  #sagaSwiper .swiper-slide .car {width: 80%; padding: 0; margin: 0 auto; }
  #sagaSwiper .swiper-slide .car-info { width: 80%;  padding: 0; margin: 2em auto 0 auto; }
  .model-big {  position: absolute; top: -10%; right: 40px;  font-size: 30vw; }

  .exterior-design .back-header { top: 90vh; }
  .exterior-design .content h2 div { position: absolute; top: -15px; left: 0; width: 100%; height: 12px; }
  .exterior-design .content .highlight { width: 84vw; }
  .exterior-design .content .highlight span { margin-bottom: 1em; }

  .content-grid .swiper-slide h4 { position: absolute; bottom: 3em; left: 0; padding: 2em 3em; margin: 0; width: 100%; color: #fff; text-transform: uppercase; font-size: 1.1em; text-align: right; background: rgb(1,6,13);
    background: -moz-linear-gradient(180deg, rgba(1,6,13,0) 0%, rgba(1,6,13,0.7077205882352942) 74%);
    background: -webkit-linear-gradient(180deg, rgba(1,6,13,0) 0%, rgba(1,6,13,0.7077205882352942) 74%);
    background: linear-gradient(180deg, rgba(1,6,13,0) 0%, rgba(1,6,13,0.7077205882352942) 74%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#01060d",endColorstr="#01060d",GradientType=1); }

  .interior-design .back-header { top: 50vh; }
  .interior-design .content h2 { margin: 0; }
  .content-grid { width: 84vw; }
  .content-grid article { width: 84vw; }
  .content-grid .swiper-container { width: 84vw; overflow: hidden; }
  .content-grid .swiper-slide { width: 100%; }
  .content-grid .swiper-slide img { width: 100%; height: auto; box-shadow: none; }
  .content-grid .swiper-slide:nth-child(1), .content-grid .swiper-slide:nth-child(2), .content-grid .swiper-slide:nth-child(3) { width: 100%; height: auto; transform: none !important; -webkit-transform: none !important; -moz-transform: none !important; -ms-transform: none !important; -o-transform: none !important; padding: 0 0 4em 0; }

  .content-grid .swiper-pagination { display: block; }
  .content-grid .swiper-button-prev { display: block; }
  .content-grid .swiper-button-next{ display: block; }

  .content-grid-2 { flex-direction: column-reverse; padding: 5vh 0; }
  .content-grid-2 .interior-texts { padding: 5vh 0; width: 100%;  margin-bottom: 100px; }
  #uspsInterior { width: 100%; margin-top: 5em; }

  .module-image { flex-direction: column-reverse; padding: 0; }
  .module-image img { width: 100%; height: auto; }
  .module-image .content-image { width: 100%; padding: 5em 8vw 0 8vw; }
  .module-image .content-image h2 { display: block; width: 420px }

  .module-reservation { flex-direction: column-reverse; margin: 5vh 0 0 0; padding: 0 0 4em 0; }
  .content-reservation { text-align: center; margin: 0 auto; transform: translateY(-2em) !important; -webkit-transform: translateY(-2em) !important; -moz-transform: translateY(-2em) !important; -ms-transform: translateY(-2em) !important; -o-transform: translateY(-2em) !important; }
  .content-reservation h2 { margin: 0; }
  #carReservation { width: 100vw; background: var(--black);
    background: -moz-linear-gradient(180deg, rgba(1,6,13,0) 0%, rgba(52,116,205,0.39959733893557425) 41%, rgba(1,6,13,0) 75%);
    background: -webkit-linear-gradient(180deg, rgba(1,6,13,0) 0%, rgba(52,116,205,0.39959733893557425) 41%, rgba(1,6,13,0) 75%);
    background: linear-gradient(180deg, rgba(1,6,13,0) 0%, rgba(52,116,205,0.39959733893557425) 41%, rgba(1,6,13,0) 75%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#01060d",endColorstr="#01060d",GradientType=1); }
    #carReservation .swiper-slide img { width: 80%; height: auto; margin: 0 auto; }
  .wrapper #select-box { margin: 0 auto; float: none; }

  .reservation { width: 100%; left: 0; border-top-left-radius: 0px; border-top-right-radius: 0px; padding: 0.5em 0; transform: scale(1.5) translate(0, -10px); -webkit-transform: scale(1.5) translate(0, -10px); -moz-transform: scale(1.5) translate(0, -10px); -ms-transform: scale(1.5) translate(0, -10px); -o-transform: scale(1.5) translate(0, -10px); } 
  .reservation div { padding: 0 5px !important; }
  .reservation div:first-child { padding: 0 5px !important; }
  .reservation div span { font-size: 0.5em; letter-spacing: auto; margin: 0; padding: 0 10px 0 0 !important; }
  .reservation div h3 { font-size: 1.1em; }
  .reservation .bt { width: auto; transform: scale(0.8); }
  
  .content-reservation { width: 60vw; }
  .reservation-footer { flex-direction: column-reverse; }
  .reservation-footer div { border: none !important; padding: 5px !important; margin: 0 !important; }

  .exterior .info {    width: 90%;  margin-top: -20px;}
  .exterior .info h4 {    font-size: 45px;    line-height: 46px;    letter-spacing: 1px;    margin-top: 10px;}
  .exterior .info p {    font-size: 16px;    line-height: 29px !important;    padding-left: 5.4vw;    margin: 0;    margin-top: 20px;}

  .interior .info {    width: 90%;  margin-top: 30px;}
  .interior .info h4 {    font-size: 45px;    line-height: 46px;    letter-spacing: 1px;    margin-top: 10px;}
  .interior .info p {    font-size: 16px;    line-height: 29px !important;    padding-left: 5.4vw;    margin: 0;    margin-top: 20px;}


  .listax3 {    width: 86%;    margin-left: 7%;    flex-direction: column;  background: none; }
  .listax3>div {    width: 100%;    margin: 10px 0px;}
  .listax3>div .foto {    height: 60vw;}

  .motor2 .info {    width: 90%;  margin-top: 20px;}
  .motor2 .info h4 {    font-size: 45px;    line-height: 46px;    letter-spacing: 1px;    margin-top: 10px;}
  .motor2 .info p {    font-size: 16px;    line-height: 29px !important;    padding-left: 5.4vw;    margin: 0;    margin-top: 20px;}

  .sliderFrente { padding-top: 0px;}
  .sliderFrente .opciones {    bottom: -70px}
  .sliderFrente {    padding-bottom: 0px;}

  .sliderAdas .swiper-slide .info {    display: none !important;}
  .sliderAdas .swiper-slide .play {    width: 50px;}
  .sliderAdas .swiper-slide .foto {    height: 60vw;}

  .adas .titular h6 {    font-size: 5.5vw;    line-height: 8vw;}

  .exterior {    margin-bottom: 70px;}
  /* .sliderFrente .autos {    min-height: 115vw;}} */
  .sliderFrente .autos {    height: 58vw;    min-height: auto;}
  .sliderFrente .opciones .nombre {    font-size: 30px;}
  .sliderFrente .opciones ul li {    width: 36px;    height: 36px;    margin-right: 12px;}

  .content-grid .swiper-slide:nth-child(1) .titulo .lines { display: none;}
  .content-grid .swiper-slide:nth-child(2) .titulo .lines { display: none;}
  .content-grid .swiper-slide:nth-child(3) .titulo .lines { display: none;}

  .content-grid .swiper-slide:nth-child(1) .titulo {    bottom: 0%;    width: 100% !important;    left: 0%;}
  .content-grid .swiper-slide:nth-child(2) .titulo {    bottom: 0%;    width: 100% !important;    left: 0%;}
  .content-grid .swiper-slide:nth-child(3) .titulo {    bottom: 0%;    width: 100% !important;    left: 0%;}

  #carReservation {    margin-bottom: 30px;}

  .sliderFrente .opciones {    bottom: 0px;}

  .content-reservation .bt{
    font-size: unset;
  }
}

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

  .reservation { transform: none; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; }

  p { font-size: 1em; line-height: 1.4em !important; }
  .hero-section { height: 110vh; }
  .hero-info h1 { font-size: 2em; }
  .hero-info h2 { font-size: 1.2em; }
  .hero-info p { width: auto; }
  .hero-info .line2 { display: none; }
  .hero-section .gradient-overlay { display: none; }
  .saga h2 { font-size: 2em; padding: 0; text-align: center; }
  .saga h2 span { display: inline; font-size: inherit; margin-right: 0.3em; }
  #sagaSwiper .swiper-slide { padding: 0; }
  #sagaSwiper .swiper-slide .car-info { width: 70%; margin: 10px auto; }
  #sagaSwiper .swiper-slide .car-info h3 { font-size: 1.1em; margin: 0; padding: 0 7px; }
  #sagaSwiper .swiper-slide .car-info h4 { font-size: 0.9em; margin: 0 0 1em 0; padding: 5px;  }
  #sagaSwiper .swiper-slide .car-info h4 hr { position: static; width: 100%; border-top: 1px solid #fff; opacity: 0.4;  }
  #sagaSwiper .swiper-slide .car-info p { font-size: 0.8em !important; }
  .model-select { transform: scale(0.8); -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); }
  .model-big { display: none; }


  .exterior-design .content h2 { font-size: 1.8em; }
  .exterior-design .content .highlight { line-height: 1.6em !important; }
  .content-grid .swiper-container { margin: 2em 0; }
  #uspsExterior .swiper-slide h4 { font-size: 0.9em; padding: 3em 2em }

  .interior-design { padding-top: 20vh; }
  .interior-design .back-header { top: inherit; bottom: 65vh; }
  .interior-design .content h2 { font-size: 1.8em; }
  
  .content-grid-2 { padding: 0; }
  .content-grid-2 .interior-texts h3 { font-size: 1.25em; }

  #uspsInterior .swiper-slide h4 { font-size: 0.9em; padding: 3em 2em }
  

  .module-image .content-image h2 { font-size: 1.8em; }
  .module-image .content-image h2 div { left: -55%; }
  .module-image .content-image h3 { font-size: 1.25em;  margin: 0; }

  #carReservation .swiper-slide img { width: 65%; }
  .content-reservation { transform: none !important; }
  .content-reservation h2 { font-size: 1.6em; }
  .content-reservation { width: 100vw;}
  .content-reservation h3 { margin: 10px 0; font-size: 0.8em; }
  .versions ul li { font-size: 0.8em; }
  .color-chips { transform: scale(0.8); -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); }

  .content-reservation h2 span { display: inline-block; font-size: inherit }
  .reservation-footer { justify-content: center; align-items: center; }
  .reservation-footer div { text-align: center; width: 100%; }
  .reservation-footer div span { font-size: 1em; }
  .reservation-footer div h3 { font-size: 1.4em; }

  /* .adas .titular h6 {    font-size: 34px;} */

  .listax3>div h6 {    font-size: 23px;    line-height: 35px;}

  .sliderAdas .swiper-pagination-bullet {    width: 25px;}



}

@media screen and (max-width: 400px) {
  .coty-logo {  width: 50px; }
  .hero-info { padding: 0 0 0 12vw; }
  .exterior-design .back-header { top: 100vh; }
  .interior-design .back-header { bottom: 70vh; }
  .swiper-pagination { transform: scale(0.8);}


  .sliderFrente .autos {    min-height: 560px;}

  /* .adas .titular h6 {    font-size: 28px;} */

}


ul.color-chips li.active { border-color: #FFF;}
ul.color-chips li.chipAmarillo { background-image: url(../img/color-chips/amarillo.png); background-position: center center;}
ul.color-chips li.chipRojo { background-image: url(../img/color-chips/rojo.png);  background-position: center center;}
ul.color-chips li.chipBlanco { background-image: url(../img/color-chips/blanco.png);  background-position: center center;}
ul.color-chips li.titulo {color:#fff; width:auto; font-size: 1em; font-family: 'Peugeot-Bold';border: none; padding-top: 10px; cursor:default;}


footer{
  border-top:1px solid #c4c4c4;
  padding: 15px;
  margin:30px 50px 80px 50px;
  color:#c4c4c4;
}
footer .site{
  float: left;
  width:20%;
  padding-top: 10px;
}
footer b{
  font-family: 'Peugeot-Bold';
  font-weight: normal;
  font-size: 0.9em;
  color:#c4c4c4;  
}
footer a{
  color:#c4c4c4;  
}
footer ul.links{
  font-family: 'Peugeot-Light';
  font-size: 0.9em;
  float: left;
  width:60%;  
  text-align: center;
}
footer ul.links li{
  display:inline-block;
  margin-top: 10px;
  padding: 0 10px;
  border-left: 1px solid #c4c4c4;
}
footer ul.links li:first-child{
  border-left: 0px solid #c4c4c4;
}
footer ul.links li a{
  color:#c4c4c4;
}
footer ul.redes{
  float: right;
  width:20%;  
  text-align: right;
}
footer ul.redes li{
  display:inline-block;
  padding: 0 10px;
}
@media screen and (max-width: 1000px) {
 footer .site{
  float: none;
  width:100%;
  text-align: center
} 
footer ul.links{

  float: none;
  width:100%;  

}
footer ul.links li{
  border-left: 0px solid #c4c4c4;
}
footer ul.redes{
  float: none;
  width:100%;  
  text-align: center
}
}


/*formulario */
.form{
position: relative;
width: 42%;
height: auto;
z-index: 300;
padding: 4em 6vw 15vh 6vw;
}
.form.typ {
    width: 61%;
    padding: 20em 6vw 15vh 6vw;
}
.form.typ p {font-size: 1.2em}
.form h1 {color:#fff;  font-family: 'Peugeot-Bold'; font-size: 3em}
.form h2 {color:#fff;}
.form .line {
    position: absolute;
    background: #fff;
    top: -10px;
    left: 16%;
    width: 1px;
    height: 50px;
}
.form .line2 {
    position: absolute;
    background: #fff;
    bottom: 0px;
    left: 16%;
    width: 1px;
    height: 10vh;
}

.formTeaser { width: 100%; }
.field { position: relative; width: 100%; margin-top: 1.5em; }
.field label { position: absolute; top: 12px; left: 10px; display: inline-block; color: #fff; font-family: 'Peugeot'; padding: 0.5em; pointer-events: none; transition: all 200ms ease-out ; -webkit-transition: all 200ms ease-out ; -moz-transition: all 200ms ease-out ; -ms-transition: all 200ms ease-out ; -o-transition: all 200ms ease-out ; }
.field input { width: 100%; display: block; background: none; color: #fff; font-family: 'Peugeot'; padding: 1em 1.15em; appearance: none; font-size: 1.1em; -webkit-appearance: none; border: none; border: 1px solid #999; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; }
/* Select Input Styles */

.select-wrapper { position: relative; width: 100%; color: #fff; font-family: 'Peugeot';  }
.select-wrapper::after { color: white; content: '▾'; margin-right: 10px; pointer-events: none; position: absolute; right: 16px; top: 6px; font-size: 20px; }

.select { -moz-appearance: none; -webkit-appearance: none; font-family: 'Peugeot'; color: #fff; background: none; background-color: #02050a; border: none; border: 1px solid #999; cursor: pointer; padding: 1em ; width: 100%; font-size: 1em; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px;  -o-border-radius: 5px; }
.select:focus { color: white; }
.select::-ms-expand { display: none; }

.selectedInput { top: -18px !important; background: black; color: #999 !important; }

.bt-form { margin-top: 1em; width: 100%; display: block; background: #00a3e0; color: #fff; font-family: 'Peugeot'; padding: 1em 1.15em; text-align: center; appearance: none; font-size: 1.1em; -webkit-appearance: none; border: none; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; text-transform: uppercase;  }

#scene {
    position: absolute;
    padding: 0;
    margin: 0;
    width: 60%;
    height: 50vh;
    overflow: hidden;
    top: 0;
    right: 0;
    z-index:999;
}

.counter-content {
    position: absolute;
    top: 20%;
    right: 14%;
    z-index: 1;
    width: 50vw;
}

.counter { transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); }
.counter {  display: flex; align-items: center; justify-content: flex-end;margin-right: 5vw;}
.counter div { color: #ffffff;  padding: 0px 8px; font-family: 'Peugeot-BoldItalic' !important }
.counter div div { display: flex; justify-content: center; align-items: center;font-size: 4.5vw; line-height: 4.5vw; margin-left: -16px;}
.counter .etiqueta { font-size: 18px; line-height: 30px;font-family: 'Peugeot'; font-style: italic;padding: 0px;  margin: 0px; }
.counter span { font-size: 3.5vw;}

.form-section { position: relative; width: 100vw; height: 110vh; }
.form-section .back { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh;  background: url('../img/hero-back.jpg') no-repeat center; background-size: cover; }

@media screen and (max-width: 800px) {
.form-section { height: 140vh; }  
  .form.typ {
      width: 100%;
      text-align: center;
      padding: 30em 6vw 15vh 6vw;
  }
  #scene {
      width: 90%;
      right:auto;
      left:-5vw;
      top:-5vh;
  }
  .counter div div { margin-left: -10px;}
  .counter div { padding: 0px 7px; }
  .counter .etiqueta { font-size: 8px; line-height: 35px; margin-left: -8px;}

  .form{
  width: 100%;
  padding: 30em 6vw 15vh 6vw;
  }
.form .line, .form .line2 {
  display:none;
}

  .form-section .back { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh;  background: url('../img/hero-mob.jpg') no-repeat center; background-size: cover; }
}