html, body {
  box-sizing: border-box;
}
* {
  margin: 0;
  padding: 0;
  font-family: "Roboto", sans-serif;

}
.hero {
  width: 100%;
  height: 100vh;
  position: relative;
  padding: 0 5%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.back_video {
  position: fixed;
  z-index: -1;
  filter: grayscale(40%);
}
@media (min-aspect-ratio: 16/9) {
  .back_video {
      width: 100%;
      height: auto;
 }
}
@media (max-aspect-ratio: 16/9) {
  .back_video {
      width: auto;
      height: 100%;
 }
}
@media only screen and (min-width: 800px) {
 /* For desktop: */
  form {
     width: 60%;
 }
}
div.back_image {
  width: 100%;
  height: auto;
  background-image: url(images/03_guerrero-01.jpg);
  background-size: 100% 100%;
}
.top-container {
  background-color: #f1f1f1;
  padding: 30px;
  text-align: center;
}
.header {
  padding: 10px 16px;
}
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}
p a {
  text-decoration: none;
  color: #f2f2f2;
}
p a:hover {
  opacity: 0.5;
}


h2 {
  font-family: "Roboto", sans-serif;
  font-style: normal;
  font-weight: 400;
  text-align: center;
  color: rgb(255, 255, 255);
  font-size: calc(1.5rem + (2 - 1.5) * ((100vw - 20rem) / (48 - 20)));
  line-height: calc(1.1 * (1.5rem + (2 - 1.5) * ((100vw - 20rem) / (48 - 20))));
  padding-bottom: 5vw;
}
h3 {
  font-family: "Roboto", sans-serif;
  font-style: normal;
  font-weight: 700;
  text-align: center;
  color: #ceb17a;
  font-size: calc(35px + (40 - 35) * ((100vw - 300px) / (1600 - 300)));
  padding: .5em 0 1.2em;
  letter-spacing: .03em;
}
h4 {
  font-family: "Roboto", sans-serif;
  font-style: normal;
  text-align: center;
  font-size: calc(24px + (28 - 24) * ((100vw - 300px) / (1600 - 300)));
  color: rgb(213, 139, 0);
  font-weight: 700;
  text-transform: uppercase;
  margin: 0 0 1em
}
h4::before{
  content: ' \276F\ ';
  color: #D9D3C1;
}


h5 {
  font-family: "Roboto", sans-serif;
  font-style: normal;
  text-align: center;
  font-weight: 400;
  color: white;
  font-size: calc(17px + (20 - 17) * ((100vw - 300px) / (1600 - 300)));
  line-height: 1.4;
  width:70%;
  margin: 2em auto 4em;
background-color: #ceb17a;
  padding: .5em;
}

p {
  font-style: normal;
  font-weight: 200;
  line-height: 1.5;
  text-align: center;
  font-size: calc(1rem + (1.1 - 1) * ((100vw - 20rem) / (48 - 20)));
  color: white;
  padding: 0.5em 10%;
}
p.doble {
  margin-top: 1em;
  margin-bottom: 0;
}
.back {
  background: linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px, linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px, linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px, linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px, linear-gradient(90deg, #1b1b1b 10px, transparent 10px), linear-gradient( #1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424 );
  background-color: #131313;
  background-size: 20px 20px;
}
em {
  font-style: italic;
}
b {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: normal;
}
.videoWrapper {
  position: relative;
  padding-bottom: 56.25%;
 /* 16:9 */
  height: 0;
  margin: 3vw 0;
}
.videoWrapper iframe {
  padding: 0 5% 5vw 5%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
div.doble {
  margin-bottom: 100px;
}
.center {
  text-align: center;
}
._white {
  color: white;
}
._normal {
  font-family: "Roboto", sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  font-size: calc(1.1rem + (1.2 - 1.1) * ((100vw - 20rem) / (48 - 20)));
  color: white;
  padding: 0.5em 5%;
  hyphens: never;
}
div._textos p{
  font-family: "Roboto", sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  font-size: calc(18px + (22 - 18) * ((100vw - 300px) / (1600 - 300)));
    color: #59666c;
  padding: 0.5em 5%;
  hyphens: never;
  text-align: center;
  margin:0 10%;
}
ul._check {
  margin: 1em;
  list-style: none;
}
ul._check li::before {
  content: "\2713";
  padding-right: 0.5em;
  color: #ceb17a
}
._black {
  color: black;
}
._center {
  text-align: center;
}


._producto {
  text-align: center;
  margin: 0 auto 1.5em;
  width: 85%;
}
._producto img {
  width:100%;
  margin:0 auto 1em
}
 

  .trailer {
    background-color: #59524C;
    text-align: center;
    padding: calc(3rem + (4 - 3) * ((100vw - 20rem) / (48 - 20))) 0;
  }


div.festivales {
  margin: 1rem 1rem;
  display: inline-block;
  vertical-align: middle;
}
div.festivales img {
  margin: 0 ;
  vertical-align: middle;
  width:6em;
}
div._white img {
  filter:invert(1);
}
._cuadrado img{
  max-width: 5em;
}
._large02 img{
  min-width: 9rem;
}
._left {
  text-align: left;
}
form {
  text-align: center;
  margin: 0 auto;
  padding: 0 1rem;
}
form p{
  color: gray;
}
form input, textarea, button{
  color: rgb(128, 128, 128);
  width:100%;
  padding: .8rem;
}
form button{
  width: auto;
  background-color: #ceb17a;
  color:white;
  margin: 2em 0;
  font-size: 1.1em;
  font-weight: 400;
  letter-spacing: .1em;
}
footer {
  background-color: #0D0D0D;
  text-align: center;
  padding: 2em 1em 0 1em;
  color: rgb(180, 180, 180);
  margin:0;
}
footer i{
  padding-right: .5em;
  color: #ceb17a;
}

._social {
  font-size: 1.7em;
}
._footer {
  margin:0;
  font-size: 1em;
  padding:.2em 1em;
  font-family: "Roboto", sans-serif;
font-weight: 400;
}
._footer i{
  font-size: 1.5em;
vertical-align: middle;
}

._footer a:hover{
  color: rgb(180, 180, 180);
}

.overlay {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(15,15,15, 0.2);

}
video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
}
#myVideo {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  position: realtive;
  display: flex;
  top: 0;
  left: 0;
  z-index: -1;
  padding: 0;
  margin: 0 ;
}

/* Slideshows */
._titulo {
  text-shadow: 3px 3px 7px rgb(53, 53, 53);
  font-family: "Roboto Condensed", sans-serif;
  text-transform: uppercase;
  font-size: calc(30px + (50 - 30) * ((100vw - 300px) / (1600 - 300)));
  text-align: center;
  color:white;
  line-height: 1.2;
  padding: .5em 1em .5em;
  background-color: rgba(206, 177, 122, .9);
  margin:0;
  letter-spacing: .1rem;
}
._slides {
  max-width: 70vw;
  background-color:rgba(13, 13, 13, .8);
  color: white;
  font-size: calc(16px + (22 - 16) * ((100vw - 300px) / (1600 - 300)));
  padding: 1em;
  margin:0;
}


/* Colors */

.color01{
  color:#ceb17a;
}
.color02{
  color:#BFAE99;
}
.color03{
  color:#8C8072;
}
.color04{
  color:#59524C;
}
.color05{
  color:#59666c;
}
.color06{
  color:#0D0D0D;
}


._overslide img{
filter:grayscale(.4)
}