body {
    background-color: #000;
}


.bg-blue {
    background: url("../images/inicio/BG1Blue.svg") no-repeat center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding: 50px 10px;
    height: 100%;
    width: 100%;
}

.bg-pink {
    background: url("../images/inicio/BG2Pink.svg") no-repeat center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding: 50px 10px;
    height: 100%;
    width: 100%;
}

.bg-red {
    background: url("../images/tono/BG1Red.svg") no-repeat center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding: 50px 10px;
    height: 100%;
    width: 100%;
}

.bg-green {
    background: url("../images/tono/BG2Green.svg") no-repeat center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding: 50px 10px;
    height: 100%;
    width: 100%;
}

.bg-orange-b {
    background: url("../images/personajes/BG2Orange.svg") no-repeat center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding: 50px 10px;
    height: 100%;
    width: 100%;
}

.bg-purple {
    background: url("../images/anunciate/BG1Purple.svg") no-repeat center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding: 50px 10px;
    height: 100%;
    width: 100%;
}

.bg-orange {
    background: url("../images/tono/BG2Green.svg") no-repeat center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding: 50px 10px;
    height: 100%;
    width: 100%;
}

.bg-orange-r {
    background: url("../images/personajes/BGOrange.svg") no-repeat center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding: 25px 0 10px;
    height: 100%;
    width: 100%;
}

.bg-orange-up {
    background: url("../images/personajes/BG2Responsive.svg") no-repeat center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding: 50px 10px;
    height: 100%;
    width: 100%;
}

.bg-orange-fruit {
    background-color: #EE833B;
}

.bg-rose {
    background-color: #FFD1E6;
}

.bg-index {
    background-color: rgba(0, 0, 0, 0.644) !important;
    -webkit-backdrop-filter: saturate(120%) blur(10px);
    backdrop-filter: saturate(120%) blur(10px);
    transition: background-color 200ms linear;
}


.bg-cuarto-lg {
    background-image: url("../images/inicio/PortadaTablet.png");
    background-position: top center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100vmax 100vmax;
    background-color: #66999;
}

.bg-cuarto-md {
    background: url("../images/inicio/PortadaTablet.png") fixed no-repeat center;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;
    height: 100%;
    width: 100%;
}

.bg-color.scrolled {
    background: #000000cb !important;
    color: #FFD1E6 !important;
}

.bg-darks {
    background: #21293C !important;
    color: white;
}


.bg-cuarto-lg {
    background-image: url("../images/Banner/cuarto-tono.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    background-attachment: fixed;
}


.info {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: auto;
    width: 100%;
    z-index: 1;
    text-align: center;
}



.room {
    background-image: url("../images/Banner/cuarto-tono.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    background-attachment: fixed;
}





@media only screen and (max-width: 1024px) {
    .bg-cuarto-lg {
        background-image: url("../images/inicio/PortadaTablet.png");
        background-position: top center;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: 100vmax 100vmax;

    }
}



@media (min-width: 601px) {
    #page {
        background: url('images/white-zigzag.png') repeat-x;
    }
}

@media (max-width: 600px) {
    #page {
        background: url('images/white-zigzag-mobile.png') repeat-x;
    }
}

.parallax {
    background: #13171a center center no-repeat;
    background-size: cover;
    position: relative;
    height: 100vh;
    width: 100%;
}

.parallax::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}

@media (min-width: 1024px) {
    .parallax {
        background-attachment: fixed;
    }



}

@media (max-width: 1366px) {
    .parallax {
        background: url(../images/Banner/FullBanner.jpg) center center no-repeat;
        background-size: cover;
        position: relative;
    }
}



@media (max-width: 1024px) {
    .parallax {
        background: url(../images/Banner/PortadaIPADnologo.png) center center no-repeat;
        background-size: cover;
        position: relative;
    }



}





@media (max-width: 768px) {
    .parallax {
        background: url(../images/Banner/PortadaPhonenologo.png) center center no-repeat;
        background-size: cover;
        position: relative;
    }

}