/*Estilos base*/
@font-face{
    font-family: 'Segoe UI';
    font-style: normal;
    src: url('/font/Segoe-UI.woff') format('woff'),
    url('/font/Segoe-UI.woff2') format('woff2'),
    url('/font/Segoe-UI.ttf') format('truetype');
}

@font-face{
    font-family: 'Abril Fatface';
    font-style: normal;
    src: url('/font/AbrilFatface.woff') format('woff'),
    url('/font/AbrilFatface.woff2') format('woff2'),
    url('/font/AbrilFatface.ttf') format('truetype');
}

@font-face{
    font-family: 'Cottage';
    font-style: normal;
    src: url('/font/Cottage.woff') format('woff'),
    url('/font/Cottage.woff2') format('woff2'),
    url('/font/Cottage.ttf') format('truetype');
}

*{
    margin: 0px;
    padding: 0px;
}

h1, h2, h3, h4, h5, h6{
    margin: 0px;
}

p{
    margin: 0px;
}

img{
    width: 100%;
}

a{
    text-decoration: none;
}

ul{
    padding: 0px;
    margin: 0px;
    list-style: none;
}

.btn{
    font-size: 30px;
    font-family: 'Abril Fatface';
    color: #FFFFFF;
    background-color: transparent;
    display: block;
    margin: 0px auto;
    border: none;
    text-align: center;
    box-sizing: border-box;
    cursor: pointer;
}

.content{
    width: 100%;
    max-width: 1210px;
    margin: 0px auto;
    position: relative;
}

.input{
    margin-bottom: 24px;
    width: 100%;
}

.input label{
    display: inline-block;
    font-size: 20px;
    font-family: 'Segoe UI';
    color: #FFFFFF;
    margin-bottom: 5px;
}

.input input, .input select, .input textarea{
    width: 100%;
    height: 39px;
    border: none;
    border-bottom: 1px solid #FFFFFF;
    box-shadow: none;
    margin: 0px;
    box-sizing: border-box;
    padding-left: 15px;
    background-color: transparent;
    font-size: 20px;
    font-family: 'Segoe UI';
    color: #FFFFFF;
}

.input textarea{
    border: none;
    background-color: #FFFFFF;
    color: #707070;
    height: 161px;
    padding: 10px 15px;
    resize: none;
}

.checkbox{
    width: 100%;
    display: flex;
    align-items: center;
}

.checkbox input{
    height: 18px;
    width: 18px;
    margin: 0px 9px 0px 0px;
}

.checkbox label{
    margin: 0px;
    font-size: 16px;
    display: flex;
    align-items: center;
}

.validation.error{
    border-color: red;
    outline: unset;
}

.errorDisplay {
    color: red;
    font-size: 15px;
    font-family: 'Segoe UI';
    margin-bottom: 15px;
    padding-left: 35px;
}

.successDisplay {
    color: green;
    font-size: 15px;
    margin-bottom: 15px;
}

.disable {
    pointer-events: none;
    cursor: default;
}

/*Header*/
header{
    width: 100%;
    position: absolute;
    top: 0px;
    padding-top: 35px;
    z-index: 2;
}

header .container{
    width: 100%;
    max-width: 1210px;
    margin: 0px auto;
    display: flex;
    justify-content: space-between;
    flex-flow: wrap;
    position: relative;
}

.logoHeader{
    max-width: 222px;
    margin-left: 70px;
}

nav{
    display: flex;
    align-items: flex-start;
}

.menu{
    padding: 19px 75px;
    border-radius: 33px;
    background-color: #707070;
    display: flex;
}

.menu li{
    margin-right: 79px;
    position: relative;
}

.menu li::after{
    content: '';
    width: 17px;
    height: 17px;
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    box-sizing: border-box;
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: -50px;
    margin: auto;
}

.menu li:last-child{
    margin-right: 0px;
}

.menu li:last-child::after{
    content: none;
}

.menu a{
    padding: 4px 15px;
    font-size: 20px;
    font-family: 'Segoe UI';
    text-transform: uppercase;
    color: #FFFFFF;
}

.menu a:hover{
    color: #000;
}

.menu .active a{
    border-radius: 18px;
    border: 2px solid #C3AE72;
    box-sizing: border-box;
}

#barras-menu{
    display: none;
}

#fondo{
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0px;
    top: 0px;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10;
}

/*Attraction*/
#attraction{
    width: 100%;
    padding: 166px 0px 85px;
    background-image: url('/img/fondo-attraction.png');
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

#attraction .top{
    display: flex;
    justify-content: right;
}

#attraction .title{
    width: 100%;
    line-height: 55px;
    max-width: 570px;
    font-size: 50px;
    font-family: 'Abril Fatface';
    color: #C3AE72;
    margin-top: 87px;
    position: relative;
    right: -110px;
    box-sizing: border-box;
}

#attraction .title span{
    font-size: 44px;
    color: #FFFFFF;
    background-color: #C3AE72;
    display: block;
    padding: 0px 12px;
}

#attraction .top img{
    max-width: 525px;
    margin-right: 50px;
}

#attraction .description{
    max-width: 795px;
    font-size: 20px;
    font-family: 'Segoe UI';
    color: #707070;
    text-transform: uppercase;
    text-align: center;
    margin: 30px auto 0px;
    position: relative;
    z-index: 2;
}

.transparent{
    width: 100%;
    height: 370px;
    background-image: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1), rgba(255,255,255,0));
    position: absolute;
    bottom: -200px;
    z-index: 1;
}

/*Caracteristicas*/
#caracteristicas{
    width: 100%;
    padding: 83px 0px 0px;
    position: relative;
    background-image: url('/img/fondo-lineas.png');
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
}

#caracteristicas .title{
    font-size: 50px;
    font-family: 'Abril Fatface';
    color: #C3AE72;
    text-align: right;
    margin-bottom: 142px;
    position: relative;
    z-index: 1;
}

.caractContainer{
    width: 100%;
    max-width: 683.42px;
    min-height: 659.51px;
    position: relative;
    margin: 0px auto 160px;
}

.galeriaLogo{
    max-width: 84.9px;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    margin: auto;
    cursor: pointer;
}

.galeriaLogo:hover{
    max-width: 253px;
    content:url("/img/galeria-hover.png");
    top: -30px;
}

.confirLogo{
    max-width: 75.31px;
    position: absolute;
    top: 102px;
    right: 75px;
    cursor: pointer;
}

.confirLogo:hover{
    max-width: 420.55px;
    content:url("/img/confirmacion-hover.png");
    top: 62px;
    right: 42px;
}

.regaloLogo{
    max-width: 69.82px;
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: 0px;
    margin: auto;
    cursor: pointer;
}

.regaloLogo:hover{
    max-width: 495.05px;
    content:url("/img/regalo-hover.png");
    right: -35px;
}

.sitioLogo{
    max-width: 60.42px;
    position: absolute;
    bottom: 101px;
    right: 95px;
    cursor: pointer;
}

.sitioLogo:hover{
    max-width: 405.5px;
    content:url("/img/sitio-hover.png");
    bottom: 68px;
    right: 54px;
}

.historiaLogo{
    max-width: 93.79px;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    margin: auto;
    cursor: pointer;
}

.historiaLogo:hover{
    max-width: 483.52px;
    content:url("/img/historia-hover.png");
    left: -23px;
}

.mapaLogo{
    max-width: 90.79px;
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin: auto;
    cursor: pointer;
}

.mapaLogo:hover{
    max-width: 253px;
    content:url("/img/mapa-hover.png");
    bottom: -30px;
}

.itinerarioLogo{
    max-width: 79.85px;
    position: absolute;
    bottom: 101px;
    left: 110px;
    cursor: pointer;
}

.itinerarioLogo:hover{
    max-width: 402.76px;
    content:url("/img/itinerario-hover.png");
    bottom: 75px;
    left: 76px;
}

.regreLogo{
    max-width: 91.86px;
    position: absolute;
    top: 102px;
    left: 97px;
    cursor: pointer;
}

.regreLogo:hover{
    max-width: 401.3px;
    content:url("/img/cuenta-regresiva-hover.png");
    top: 62px;
    left: 75px;
}

#caracteristicas p.title{
    text-align: center;
    margin-bottom: 25px;
}

.contacto{
    width: 100%;
    background-image: url('/img/triangulo.png');
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 164px 0px 48px;
    position: relative;
    z-index: 2;
}

.contacto .note{
    font-size: 20px;
    font-family: 'Segoe UI';
    color: #FFFFFF;
    text-align: center;
}

#caracteristicas .contacto .title{
    color: #FFFFFF;
    text-align: center;
    margin-bottom: 22px;
}

.contacto .list{
    width: 100%;
    max-width: 336px;
    margin: 0px auto;
}

.contacto .list li{
    margin-bottom: 12px;
}

.contacto .list li:last-child{
    margin-bottom: 0px;
}

.contacto .list li, .contacto .list a{
    font-size: 20px;
    font-family: 'Segoe UI';
    color: #FFFFFF;
    display: flex;
    align-items: center;
}

.contacto .list img{
    max-width: 45px;
    margin-right: 27px;
}

#caracteristicas .transparent{
    bottom: 20px;
}




/*Footer*/
footer{
    background-color: #FFFFFF;
    padding: 15px 0px;
}

footer .content{
    max-width: 575px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-flow: wrap;
}

footer p, footer a{
    font-size: 15px;
    font-family: 'Segoe UI';
    color: #A9A8A8;
}

/*Catalogo*/
#catalogoPage{
    width: 100%;
    padding: 306px 0px 250px;
    background-image: url('/img/fondo-catalogo.png');
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
}

.titleMob{
    display: none;
}

#catalogoPage .content{
    max-width: 1020px;
}

#catalogoPage .block{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 68px auto;
    position: relative;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}

#catalogoPage .block:nth-child(2n){
    flex-direction: row-reverse;
}

.imageContainer{
    width: 100%;
    max-width: 400px;
    height: 400px;
    border: 3px solid #C3AE72;
    border-radius: 50%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.imageContainer .image{
    width: 100%;
    max-width: 380px;
    height: 380px;
    border-radius: 50%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.block .names{
    font-size: 79px;
    font-family: 'Cottage';
    color: #C3AE72;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}

.block .decoration{
    max-width: 298.96px;
    margin: 0px auto;
    display: block;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}

#catalogoPage .block:hover{
    justify-content: center;
}

.block:hover .text{
    width: 100%;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin: auto;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}

.block:hover .decoration{
    max-width: 832px;
    content: url("/img/decoration2.png");
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    margin: auto;
    z-index: -1;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}

.block:hover .names{
    text-align: center;
    margin-top: 250px;
    text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.47);
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}

/*Precios*/
#precios{
    width: 100%;
    padding: 250px 0px 125px;
    background-image: url('/img/fondo-precios.png');
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
}

.blockPrices{
    width: 100%;
    max-width: 850px;
    margin: 0px auto 115px;
}

.blockPrices .top{
    width: 100%;
    max-width: 593.41px;
    margin: 0px auto;
    position: relative;
}

.blockPrices .top p{
    font-size: 55px;
    font-family: 'Abril Fatface';
    color: #FFFFFF;
    text-align: center;
    position: absolute;
    top: 100px;
    left: 0px;
    right: 0px;
    margin: auto;
}

.blockPrices .center{
    width: 100%;
    min-height: 260px;
    margin: -90px auto;
    background-color: #FFFFFF;
    box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.16);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.blockPrices .center ul{
    width: 100%;
    max-width: 725px;
    margin: 25px auto 0px;
    display: flex;
    justify-content: space-between;
    flex-flow: wrap;
}

.blockPrices .center li{
    width: 100%;
    max-width: 317px;
    font-size: 20px;
    font-family: 'Segoe UI';
    color: #707070;
    padding-left: 30px;
    box-sizing: border-box;
    position: relative;
    margin-bottom: 25px;
}

.blockPrices .center li::before{
    content: '';
    width: 16px;
    height: 16px;
    background-color: #707070;
    border-radius: 50%;
    position: absolute;
    top: 4px;
    left: 0px;
}

.blockPrices .bottom{
    width: 100%;
    max-width: 593.2px;
    border: 5px solid #FFFFFF;
    border-radius: 36px;
    padding-bottom: 14px;
    margin: 50px auto;
}

.blockPrices .bottom p{
    width: 100%;
    max-width: 562px;
    font-size: 55px;
    font-family: 'Abril Fatface';
    color: #FFFFFF;
    text-align: center;
    padding: 43px 0px 13px;
    background-color: #C3AE72;
    border-radius: 36px;
    margin: 0px auto;
}

.blockPrices:last-child{
    margin-bottom: 75px;
}

#precios .title{
    font-size: 55px;
    font-family: 'Abril Fatface';
    color: #707070;
    text-align: center;
    margin-bottom: 15px;
}

#precios .description{
    font-size: 25px;
    font-family: 'Segoe UI';
    color: #707070;
    max-width: 1050px;
    margin: 0px auto;
    text-align: center;
}

/*Contacto*/
#contacto{
    padding: 225px 0px 0px;
    
}

.contactContainer{
    padding: 35px 48px 25px;
    background-color: #C3AE72;
    min-height: 527.5px;
}

.contactContainer .contact{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-flow: wrap;
}

#contacto .contacto-form{
    width: 100%;
    max-width: 500px;
}

#contacto .title{
    font-size: 50px;
    font-family: 'Abril Fatface';
    color: #FFFFFF;
    text-align: center;
    margin-bottom: 20px;
}

#contacto .list{
    width: 100%;
    max-width: 336px;
    margin: 0px auto;
}

#contacto .list li{
    margin-bottom: 12px;
}

#contacto .list li:last-child{
    margin-bottom: 0px;
}

#contacto .list li, #contacto .list a{
    font-size: 20px;
    font-family: 'Segoe UI';
    color: #FFFFFF;
    display: flex;
    align-items: center;
}

#contacto .list img{
    max-width: 45px;
    margin-right: 14px;
}

.contactContainer .right{
    width: 100%;
    max-width: 736px;
    position: relative;
}

.contactContainer .right::before{
    content: '';
    width: 1px;
    height: 259px;
    background-color: #FFFFFF;
    position: absolute;
    top: 0px;
    left: 0px;

}

.contactContainer .input{
    max-width: 702px;
    margin: 0px 0px 24px auto;
}

.contactContainer .input.textarea{
    max-width: 100%;
    margin-top: 39px;
}

.contactContainer .exito{
    display: none;
}

.contactContainer .exito img{
    max-width: 72px;
    margin: 180px auto 5px;
    display: block;
}

#contacto .exito .title{
    font-size: 35px;
    margin-bottom: 0px;
}

/*Datos de boda*/
.datosContacto .content{
    max-width: 100%;
    background-image: url('/img/fondo-precios.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
}

#contacto.datosContacto .title{
    color: #000000;
    margin-bottom: 105px;
}

.datosContacto .form{
    display: flex;
    justify-content: space-between;
    flex-flow: wrap;
}

header.header2{
    padding-top: 0px;
}

header.header2 .container{
    justify-content: center;
}

.header2 .logoHeader{
    max-width: 265px;
    margin-left: 0px;
}

.datosContacto .contactContainer{
    max-width: 1106px;
    padding: 27px 42px 25px;
    background-color: rgba(255,255,255,0.75);
    min-height: 527.5px;
    box-sizing: border-box;
    margin: 0px auto;
}

.datosContacto .contactContainer .input{
    max-width: 430px;
    margin: 0px 0px 25px;
}

.datosContacto .contactContainer .input input, .datosContacto .contactContainer .input select{
    max-width: 320px;
    height: 31px;
    background-color: #FFFFFF;
    border: none;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
    border-radius: 10px;
    color: #000;
}

.datosContacto .contactContainer .input textarea{
    height: 130px;
    background-color: #FFFFFF;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
    border-radius: 10px;
}

.datosContacto .contactContainer .input input[type="file"]{
    background-color: transparent;
    box-shadow: none;
}

.datosContacto .contactContainer .input label{
    width: 100%;
    color: #000000;
}

.datosContacto .btn{
    font-size: 36px;
    background-color: #707070;
    border-radius: 33px;
    padding: 2px 40px;
    margin: 25px auto 0px;
}