/* Librerí­as */
@import url("bulma/bulma.min.css");
@import url("AnimateCSS.css");

/* Fuentes */
@font-face {
    font-family: 'the-seasons';
    src: url('fonts/THESEASONS-REG.woff');
}
@font-face {
    font-family: 'ttt-sarsa';
    src: url('fonts/TTTSARSA.woff');
}
.f1 { font-family: 'the-seasons'; }
.f2 { font-family: 'ttt-sarsa'; }

/* Colores */
:root {
    --color-beige: #fff;
}
.cWhite { color: white; }
.cBlack { color: black; }
.bCBlack { background-color: #b6826a; }
.transparent { color: transparent; }

/* Estructura */
body { background-color: #f9f5ee; }
.px-ctrl { max-width: 1600px; margin-left: auto; margin-right: auto; }
.hrTitle { width: 20vh; margin-left: auto; margin-right: auto; }
.dress .hrTitle, .hotel .hrTitle { background-image: linear-gradient(to right, #f9f5ee, #000, #f9f5ee); }
.rsvp .hrTitle { background-image: linear-gradient(to right, #b6826a, white, #b6826a); }
.app { min-height: 86vh; }

/* Menu */
.hmenu { min-height: 14vh; }
.hmenu .logo { max-width: 96px; }
.menu { min-height: 14vh; position: fixed; z-index: 2; width: 100vw; transition: 0.5s; background-color: white; }
.menu .link { font-family: 'the-seasons'; color: #808080; }
.menu .option:hover, .menu .option.is-active { border-bottom: 2px solid #000; }
.menu .option:hover > a, .menu .option.is-active > .link { color: #000; }
.menu .logo { max-width: 96px; }

/* Sub Menu */
.subMenu { position: relative; }
.subMenu > div { position: absolute; min-width: 20vw; left: 50%; top: 3rem; transform: translate(-50%, 0); background-color: #eeebe4; }
.subMenu .sublink { color: black; font-family: 'the-seasons'; }
.subMenu .rect { background-color: #b6826a; height: 1.5rem; width: 75%; margin: 0 auto; }
.subMenu hr { width: 25%; margin-left: auto !important; margin-right: auto !important; background-color: #000; }

/* Menu Mobile */
.menu .subLogo { height: 10vh; }
.menu.has-open { min-height: 100vh; }
.menu.has-open .logo > figure { display: none !important; }

/* Botones */
.cursor { cursor: pointer; }
.bt1 { text-transform: uppercase; border-radius: 99px; font-family: 'ttt-sarsa'; padding-left: 2.25rem; padding-right: 2.25rem; color: #000; background-color: white; border-color: white; }
.bt1:hover { color: white; border-color: white; background-color: transparent; }
.bt2 { text-transform: uppercase; border-radius: 99px; font-family: 'ttt-sarsa'; padding-left: 2.25rem; padding-right: 2.25rem; color: white; background-color: #b6826a; border-color: #b6826a; }
.bt2:hover { color: #b6826a; border-color: #b6826a; background-color: transparent; }
.linkB { color: #000 !important; }
.linkB:hover { color: #000 !important; }
.linkB:visited { color: #000 !important; }
.linkB:focus { color: #000 !important; }

/* Raí­z */
.raiz { min-height: 100vh; background-image: url('../img/root.jpg'); background-position: center center; background-size: cover; background-repeat: no-repeat; }
.raiz img { max-width: 50vh; }

/* Home */
.app.home { position: relative; background-image: url('../img/video.jpg'); background-position: center center; background-repeat: no-repeat; background-size: cover; }
.app.home video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.app.home .countdown { width: 100vw; position: absolute; bottom: 0; z-index: 1; margin-bottom: 150px; padding-left: 1rem; padding-right: 1rem; }
.app.home .countdown > div { text-align: center; max-width: 500px; background-color: rgba(255, 255, 255, 0.4); margin: 0 auto; border-radius: 25px; }

/* Itineray */
.app.itinerary > div { background-color: #eeebe4; min-height: 86vh; position: relative; }
.app.itinerary .image { background-image: url('../img/itinerary.jpg'); background-position: bottom center; background-size: cover; background-repeat: no-repeat; }
.app.itinerary .iIcon img { max-width: 150px; }
.app.itinerary hr { width: 40%; margin-left: auto !important; margin-right: auto !important; background-color: #000; }
.app.itinerary .rect { position: absolute; bottom: 0; right: 0; height: 20px; width: 33.34%; margin-right: 4.15%; background-color: #b6826a; opacity: 0.7; }

/* Hospedaje */
.hotel .column { transition: 0.5s; }

/* Dress Code */
/* .dress { background-color: #e1cba3; } */
.dress .rect { background-color: #b6826a; min-height: 20px; }
/* .dress img { max-width: 80%; } */

/* Hotel */
.hotel .rect { background-color: #b6826a; min-height: 20px; }

/* RSVP */
/* Form */

.label { font-weight: normal !important; }
input[type=radio] { display: none; }
.field.entrada { padding-left: 3rem; padding-right: 3rem; }
.rsvp .icono { background-repeat: no-repeat; background-position: left center; background-size: 24px 24px; padding: 4px 0px 4px 35px; }
.rsvp .icono:not(.is-active) { background: url('../img/iconos/radio-no-check.svg'); background-repeat: no-repeat; background-position: left center; background-size: 24px 24px; padding: 4px 0px 4px 35px; }
.rsvp .icono.is-active { background-image: url('../img/iconos/radio-check.svg'); }

input.input.wBorder { color: black; background-color: transparent; border: 0px; box-shadow: 0px 0px; border-radius: 0px; border-bottom: 2px solid black; text-align: center; }
input.input.wBorder::placeholder { color: black; text-align: center; background-color: transparent; text-transform: uppercase; }

/* Mobile */
@media only screen and ( max-width: 768px) {
    
    /* Fuentes */
    .is-size-1 { font-size: calc(3rem * 0.7) !important; }
    .is-size-2 { font-size: calc(2.5rem * 0.7) !important; }
    .is-size-3 { font-size: calc(2rem * 0.7) !important; }
    .is-size-4 { font-size: calc(1.5rem * 0.7) !important; }
    .is-size-5 { font-size: calc(1.25rem * 0.7) !important; }
    .is-size-6 { font-size: calc(1rem * 0.7) !important; }
    .is-size-7 { font-size: calc(0.75rem * 0.7) !important; }
    .has-text-centered-mobile { text-align: center; }

    /* Estructura */
    .column.o1 { order: 1; }
    .column.o2 { order: 2; }
    .column.o3 { order: 3; }
    .column.o4 { order: 4; }
    .column.o5 { order: 5; }
    .column.o6 { order: 6; }
    .column.o7 { order: 7; }

    /* Home */
    /* .vid .hmenu { display: none; }
    .app.home { min-height: 100vh !important; } */
    .app.home .countdown { margin-bottom: 50px; }

    /* Itineray */
    .app.itinerary .image { background-image: none; }
    .app.itinerary .rect { position: absolute; bottom: 0; right: 0; height: 20px; width: 80%; margin-right: 10%; background-color: #b6826a; }

    /* Form */
    .field.entrada { padding-left: 0rem; padding-right: 0rem; }
    /*.rsvp { padding-left: 0rem; padding-right: 0rem; }*/
}
/* Tablet */
@media only screen and (min-width: 769px) and (max-width: 1023px) {

} 
/* Desktop */
@media only screen and (min-width: 1024px) and (max-width: 1215px) {

} 
/* Widescreen */
@media only screen and (min-width: 1216px) and (max-width: 1407px) {

}
/* HD */
@media only screen and (min-width: 1408px) /*and (max-width: 1920px)*/ {
    /* Fuentes */
    .is-size-1 { font-size: calc(3rem * 0.65) !important; }
    .is-size-2 { font-size: calc(2.5rem * 0.65) !important; }
    .is-size-3 { font-size: calc(2rem * 0.65) !important; }
    .is-size-4 { font-size: calc(1.5rem * 0.65) !important; }
    .is-size-5 { font-size: calc(1.25rem * 0.65) !important; }
    .is-size-6 { font-size: calc(1rem * 0.65) !important; }
    .is-size-7 { font-size: calc(0.75rem * 0.65) !important; }
}
/* 2K 
@media only screen and (min-width: 1921px) {
    
}*/

/* Not mobile not desktop */
@media only screen and (min-width: 769px) and (max-width: 1407px) {
    .is-size-1 { font-size: calc(3rem * 0.65) !important; }
    .is-size-2 { font-size: calc(2.5rem * 0.65) !important; }
    .is-size-3 { font-size: calc(2rem * 0.65) !important; }
    .is-size-4 { font-size: calc(1.5rem * 0.65) !important; }
    .is-size-5 { font-size: calc(1.25rem * 0.65) !important; }
    .is-size-6 { font-size: calc(1rem * 0.65) !important; }
    .is-size-7 { font-size: calc(0.75rem * 0.65) !important; }
} 
/* Para cuando la pantalla es más grande que px-ctrl */
@media only screen and ( min-width: 1750px) {
    
}