/** ----------------------------------------------------------------------------
 *                         Todos los derechos Reservados
 *                               Softipal S.A.S 2020
 *  ----------------------------------------------------------------------------
 *  Nombre:       index.css
 *  Ruta:         /public/css/kids/
 *  Descripción:  Estilos Generales para la página de turista
 *  Fecha:        27/01/2020
 *  Autor:        Alejadnro González Flórez
 *  Versión:      1.0
 *  OD:           22489479
 *  ----------------------------------------------------------------------------
 *	 			Histórico de cambios
 *  ----------------------------------------------------------------------------
 *	Fecha          OD        Autor        Descripción
 *  ----------------------------------------------------------------------------
 *     27/01/2020   22489479   AlejoFlorez0   Creación de cabecera de documentacion
 *  ----------------------------------------------------------------------------
 *     12/08/2021      NA       JSGomez       Creación de estilos sección de niños
*      24/11/2021      NA       JerelPosada   Rediseño de la pagina
 */
/**

section header
 */
#scb_kidsSection
{
    position: relative;
    background-size: 100% 62%;
    background-repeat: no-repeat;
    background-image: url(../../images/recursos/kids/header-kids.png);
}

.margin-top
{
    margin-top: 3rem;
}

#nav-kids-tab.active
{
    color: #FFBA00;
}

#nav-kids-tab:hover
{
    color: #FFBA00;
}

.ball-letf
{
    left: 0;
    top: 3px;
    width: 75px;
}

.ball-right
{
    top: 3px;
    right: 0;
    width: 75px;
}

.title-kids
{
    font-size: 2rem;
    color: white;
}

.title-kids p
{
    font-size: 3vw;
    line-height: 0.2;
    margin-bottom: 0px;
    font-family: 'Montserrat-Light';
}

.title-kids h2
{
    font-size: 7vw;
    font-family: 'Montserrat-Bold';
}

.frame-draw-top
{
    width: 69vw;
    height: 74vw;
    margin: 0 auto;
    background-position-x: 50%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url(../../images/recursos/kids/frameTopVersionMovil.png);
}

.container-image-top
{
    top: 5%;
    left: 48%;
    width: 100%;
}

/*!* Vista de los dibujos a color *!*/
.ks_container_images_color
{
    position:relative;
    top: 0%;
    right: 30%;
    width: 47vw;
    height: 65vw;
}

.ks_div_img_color
{
    padding-left: 0px;
}

.ks_image_color
{
    position: absolute;
    width: 100%;
    height: 100%;
}

.ks_image_color:hover
{
    padding:5%;
}

.ks_image_color_selected
{
    border:4px solid #004187;
}

.btn-print
{
    width: 7rem;
    transition: 0.5s;
    padding-left: 21px;
    padding-right: 21px;
    border-radius: 10px;
    background-color: #053772;
    font-family: Montserrat-Bold;
    transition: background-color 1s , box-shadow  1s;
}

.btn-print:hover
{
    background-color: #003768;
    box-shadow: inset 3px 8px 10px 0 #001a32;
}

@media screen and (min-width:  768px)
{
    .ball-letf
    {
        width: 125px;
    }

    .kids-position-absolute
    {
        position: absolute;
    }

    .ks_container_images_color
    {
        height: 27vw;
    }
    
    #scb_kidsSection
    {
        background-size: 100% 98%;
        background-image: url(../../images/recursos/kids/header-kids.png);
    }

    .btn-print
    {
        width: 10rem;
    }

    .frame-draw-top
    {
        height: 32vw;
        bottom: -5rem;
        background-image: url(../../images/recursos/kids/frameTop.png);
    }

    .ball-right
    {
        width: 125px;
    }

    .title-kids
    { 
        margin-top: 2rem;
    }
}

@media screen and (min-width:  981px) {
    .ball-letf
    {
        width: 180px;
    }

    .ball-right
    {
        width: 180px;
    }

    .title-kids p
    {
        font-size: 2.1rem;
    }
}

/**
*fin del header
*/

.bg-color-004187{
    color: #004187;
    font-family: 'Montserrat-ExtraBold';
}


.background-main-kids{
    background-image: url(../../images/recursos/kids/background.png);
    background-repeat: no-repeat;
}

.slick-slide img {
    display: block;
    height:26vh; 
}

.frameDownload{
    display: block;
    width: 70%;
    margin: 0 auto;
}

.img-download-silhouete{
    top: 6%;
    display: block;
    left: 28%;
    height: 38vw;
    width: 44%;
}

.ks_container_first_field_text {
    height: 500px;
}

.ks_btn_print_image_silhouette
{
    position: relative;
    width: 50%;
    height: 38px;
    font-size: 16px;
    color: #FFFFFF;
    padding-top: 2.5%;
    text-align: center;
    border-radius: 10px;
    background-color: #053772;
    font-family: Montserrat-SemiBold;
    transition: background-color 1s , box-shadow  1s;
}

.ks_btn_print_image_silhouette:hover
{
    color: #FFFFFF;
    background-color: #053772;
    box-shadow: inset 3px 8px 10px 0 #001a32;
}

.background-slider-kids
{
    position: relative;
    width: 100%;
    height: 21vh;
    margin: 0 auto;
    padding: 0 6vw;
    background-position-x: 50%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url(../../images/recursos/kids/frameSliderKids.png);
}

.ks_slide_images_silhouette 
{
    height:98%; 
}

div.background-slider-kids div{
    padding-top: 0.4rem;
}

.img-footer-left{
    bottom: 0;
    width: 15vw;
}

.img-footer-right{
    bottom: 0;
    right: 0;
    width: 15vw;
}

.a-left.control-c.prev.slick-prev.slick-arrow,
.a-right.control-c.next.slick-next.slick-arrow{
    top: 55%;
}


/**
*doy estilos a las clases que viene integrada a la libreria del carrusel
 */
.slick-list.draggable{
    width: 78%;
    margin: 0 auto;
}

.img-download{
    height: 200px;
}

.slick-prev,.slick-next{
    width: 45px;
    height: 43px;
    cursor: pointer;
}

.slick-prev{
    left: 0;

}
.slick-next{
    right: 0;
}

.container-image-download{
    background-color: #c5c5c570;
    height: 107px;
    margin: 0 5px;
    border-radius: 14px;
    padding: 3px;
}

@media screen and (min-width:  768px) {
    .bg-color-004187{
        font-size: 2.5rem;
    }

    .margin-top{
        margin-top: 7rem;
    }
    .background-slider-kids{
        height: 21vw;
        width: 96vw;
    }

    .img-download-silhouete
    {
        top: 11%;
        left: 25%;
        width: 64%;
        height: 69%;
        display: block;
    }

    .frameDownload
    {
        width: 22vw;
    }

    div.background-slider-kids div
    {
        padding-top: 1.3vh;
    }

    .img-download-silhouete
    {
        left: 18%;
    }

    .background-slider-kids
    {
        position: absolute;
        bottom: 7vw;
        right: 13%;
        width: 60vw;
        padding: 0 3.8vw;
    }

    .slick-list.draggable
    {
        width: 82%;
        height:80%; 
        margin-top: 2%;
    }
    
    .arrow-right
    {
        right: 5vw;
    }
    
    .container-image-download
    {
        height: 29vh;
    }
}

@media (max-width: 1100px)
{

    .container-image-download{
        background-color: #c5c5c570;
        height: 100%;
        margin: 0 5px;
        border-radius: 14px;
        padding: 3px;
    }

    .container-image-download img
    {
        position: relative;
        /* top: 8%; */
        margin: 2%;
        width: 96%;
        height: 24vh;
    }

    .background-slider-kids
    {
        position: relative;
        width: 100%;
        height: 39vh;
        margin: 0 auto; 
        padding: 0 6vw;
        background-position-x: 50%;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-image: url(../../images/recursos/kids/frameSliderKids_mobile.png);
    }

    .slick-list.draggable
    {
        width: 82%;
        height: 100%; 
    }

    div.background-slider-kids div{
        padding-top: 1.5vh;
    }
}


@media screen and (min-width:  981px)
{
    .slick-list.draggable
    {
        width: 85%;
    }
}

@media screen and (min-width:  1800px)
{
    .slick-list.draggable
    {
        width: 85%;
    }
}

@media screen and (max-width:  500px)
{
    .title-kids p
    {
        font-size: 10vw;
    }

    .title-kids h2
    {
        font-size: 15vw;
    }
}