/*********************
  Media Query Classes
**********************/
/**********************
     max-width: 992px
***********************/     
@media screen and (max-width: 991.98px) {
    /* body {
        background: rgb(221, 219, 212);
    } */
    .contenedor {
        max-width: 960px;
    }
    #header {
        height: auto; 
    }
    #body1,
    #body2,
    #footer,
    .body2-item {
        height: auto;
    }
    .carousel {
        width: 100%;
        margin-right: .5rem;
    }
    .carousel .carousel-item {
        margin-top: 0;
        width: 90%;/*40%;*/
        /* height: 100%; */
    } 
    .carousel .indicators .indicator-item {
        margin-top: 0;
    } 
    .detimgcarousel p {
        font-size: .7rem;
    }
    .body2-main .body2-main2 .body2-item img {
        width: 100%;
        height: 140px;       
    }
    .footer-main {
        padding: 0;
        margin: 0;
    }
    .footer-main h2 {
        display: none;
    }
    .footer-item {
        width: 100%;
        padding: .1rem .2rem .5rem .4rem;
    }
    /***** Variable segun resolucion *****/
    .carousel {
        height: 500px;
        padding-left: .5rem;
    }
    .detimgcarousel {
        margin-bottom: -22rem;
        color: black;
        width: 170%;
    }
    /***** Descargas *****/
    .main-area {
        width: 75%;
    }
    .download {
        width: 100%;
    }
    .services {
        width: 25%;
    }
    .services .body2-main {
        padding-left: 0;
    }
    .main-area h1 {
        font-size: 1.4rem;
    }
    .main-area h2 {
        font-size: 1.1rem;
    }
    .services .body2-main h3 {
        font-size: 1.2rem;
    }
    .main-area1 {
        width: 450px;
    } 
    a.text {
        font-size: .8rem;
    }
    .radius1 {
        border-radius: 0;
    } 
}    
/**********************
     max-width: 768px
***********************/     
@media screen and (max-width: 767.98px) {
    /* body {
        background: rgb(63, 168, 221);
    } */
    .contenedor {
        max-width: 720px;
    }
    /***** Variable segun resolucion *****/
    .carousel .carousel-item {
        width: 200%; 
    }
    .detimgcarousel {
        width: 130%;
    }
    .body2-main2 .body2-item h3 {
        margin-left: .1rem;
    }
    .body2-main2 .body2-item ul li {
        margin-left: 1.5rem;
    }
    .main-area1 {
        width: 270px;
    } 
    .body2-main .body2-item2 {
        width: 85%;
    }
    h4.fondo {
        width: 48%;
    }
}     
/**********************
     max-width: 576px
***********************/     
@media screen and (max-width: 575.98px) {
    /* body {
        background: rgb(236, 109, 226);
    } */
    .contenedor {
        max-width: 540px;
    }
    #header {
        height: auto; 
    }
    #body1,
    #body2,
    #footer,
    .main-area1 {
        height: auto;
    }
    .nav,
    .body1-main,
    .body2-main,
    .body2-main2,
    .carousel,
    .footer-main,
    .main-item,
    .subarea {
        display: block;
    }    
    .nav-lista {
        display: none;
    }
    label[for="abrir-cerrar"] {
        display: inline-block;
    }
    .header,
    .body1-main,
    .header-logo,
    .header-logo img,
    .header-nav,
    .carousel,
    .carousel .carousel-item,
    .detalleimg,
    .fleft img, 
    .nav,
    .footer-item,
    .services,
    .main-item,
    .main-area,
    .body2-main,
    .download {   
        width: 100%;
    }    
    .detimgcarousel,
    .body2-item img,
    .footer-main h2 {
        display: none;
    }
    .body2-main .body2-main2 .body2-item img {
    display: flex;
    width: 100%;
    /* height: 350px;        */
    }
    .main-area {
        padding-bottom: 1rem;
    }
    .main-area1 {
        width: 300px;
    }
    .main-area2 {
        width: 80px;
    }
    .main-area3 {
        width: 160px;
    }
    .subarea {
        display: flex;
        padding-bottom: .6rem;
    }
    h4.fondo {
        width: 71%;
    }
    /***** Variable segun resolucion *****/
    input#abrir-cerrar:checked ~ #sidebar {
        width:160px;
    }
    .sidebar {
        height: 21%;
        top: 6.8rem;
        right: 1.05rem;
        font-size: 1.3rem;
    }
    .carousel  {
        /* height: 450px; */
        width: 100%;
        margin-left: 0rem;
    } 
    .carousel .carousel-item {
        width: 100%; 
    }
    .carousel .indicators .indicator-item {
        display: none;
    }        
    #body2 {
        margin-top: 3.2rem;
    }   
    ul { 
        padding-left: 1rem;
}
    .li-circle {
        /* margin-left: 1rem; */
        font-size: 1.1rem;
    }   
    .body2-main2 .body2-item {
        margin-bottom: 1rem;
        width: 92%;
    }
    .body2-item {    
        padding-left  : 0rem; /*1rem;*/
    }
    .body2-main h2{
        font-size: 1.5rem;
        margin-left: .3rem;
    }
    .body2-main2 .body2-item h3 {
        font-size: 1.4rem;
        padding-top: .5rem;
        padding-left: 1rem;
    }
    .footer-item {
        padding: .1rem .2rem .5rem .5rem;
    }
    .footer-p {
        font-size: .85rem;
        padding-left: .5rem;
    }    
    /*.services {
        padding-top: .1rem;
    } */
    /*/* .main-area1 a {
        font-size: 90%;
    } */
    /* .subarea-opc {
        padding-left: 18rem;
    } */
}
/**********************
     max-width: 480px
***********************/     
@media screen and (max-width: 479.98px) {
    /*/* body {
        background: rgb(217, 219, 101);
    } */
    .contenedor {
        max-width: 460px;
    }
    /***** Variable segun resolucion *****/
    /* input#abrir-cerrar:checked ~ #sidebar {
        width:160px;
    } */
    input#abrir-cerrar:checked + label[for="abrir-cerrar"], 
    input#abrir-cerrar:checked ~ #contenido {
        margin-left:100px;
    }    
    label[for="abrir-cerrar"] {
        padding: .35rem;
    }
    .carousel  {
        height: 390px;
        margin-left: 0rem;
    }    
    .carousel .carousel-item {
        width: 100%; 
    }
    .sidebar {
        height: 35%;
        top: 5.5rem;
        right: .55rem;
        font-size: 1.4rem;
    }
    .body2-main2 .body2-item {
        width: 90%;
    }
    /* .body2-item {    
        padding-left: 1rem;
    } */
    /* .body2-item,
    .body2-item2 {    
        width: 20rem;
        padding-top: 0;
        padding-bottom: .1rem;
    }     */
    /*.footer-item {
        padding: .1rem .2rem .5rem .5rem;
    }*/
    .services {
        padding-top: .1rem;
    }
    .main-area1 {
        width: 180px;
        padding-right: .2rem;
    } 
    /*/* .main-area1 a {
        font-size: 110%;
    } */
    .main-area1 {
        width: 230px;
    }
    .main-area2 {
        width: 70px;
    }
    .main-area3 {
        width: 149px;
    }
    .main-area3 span {
        visibility: hidden;
    }
    .main-area3 span:before {   
        content:"saintnet.com";
        visibility: visible;
    }   
    /*.subarea-opc {
        padding-left: 0;
    } */
} 
/**********************
     max-width: 375px
***********************/     
@media screen and (max-width: 374.98px) {
    .contenedor {
        max-width: 350px;
    }
    .body2-main2 .body2-item {
        width: 95%;
    }
    .body2-main2 .body2-item {
        width: 88%;
    }
    .main-area1 {
        width: 130px;
    }

}