@import url('https://fonts.googleapis.com/css?family=Fredoka+One|Nunito|Passion+One|Roboto+Condensed|Rubik|Russo+One&display=swap');
/*CONFIGURACION GLOBAL*/
:root {
	/*M
	--fmb-color:  rgba(39, 37, 36, 0.89); 
	--fmb-color2: rgb(85,87,89);
	--fmb-colorimg: url("../img/bg_head.gif");
	--fmb-myfrmbg: #fff;
	--fmb-color3: white;
	--fmb-color4: #343a40;
	--fmb-color5: #e9ecef;
	--fmb-color6: #e29521e7;
	--fmb-myfrmbg: #fff;*/

	--fmb-color:  #0275d8; 
	--fmb-color2: red;
	--fmb-color3: white;
	--fmb-color4: #343a40;
	--fmb-color5: #e9ecef;
	--fmb-color6: #0084ff;
	--fmb-myfrmbg: #fff;
}
    body{
        font-family: 'Fredoka One', sans-serif;
        font-size: 16px;
        color: black;
    }
    p{
        font-family: 'Nunito', sans-serif;
        color: #383d41;
    }
    section{
        /* border: 2px solid red; */
        width: 100%; height: auto;
        overflow: hidden!important;
        /* top: -70px!important; */
        position: relative;
        /* background-image: url("http://clipart-library.com/images/6Tr5XBX6c.png");
        background-repeat: no-repeat;
        background-size: cover; */
    }
    section article img{
        width: 100%;
    }
    .height-vh{
        height: 100vh!important;
    }

    .h-100{
        /* height: calc(100vh - 70px)!important; */
    }
    
/*HEADER*/
    .navbar{
        height: 70px;
        background-color: white;
        font-weight: 500;
        -webkit-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.75);
        box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.75);
        
    }
    .navbar-brand{
        font-size: 20px!important;
    }
    .navbar a{
        color: rgba(0, 0, 0, 0.67);
        text-decoration: none;
        background-image: linear-gradient(currentColor, currentColor);
        background-position: 0% 100%;
        background-repeat: no-repeat;
        background-size: 0% 2px;
        transition: background-size .3s;
        -webkit-transition:all .9s ease; /* Safari y Chrome */
        -moz-transition:all .9s ease; /* Firefox */
        -o-transition:all .9s ease; /* IE 9 */
        -ms-transition:all .9s ease; /* Opera */
        font-size: 12px;
        letter-spacing: 0.5px;
        /* font-weight: 100; */
        text-transform: uppercase;
    }
    .nav-link:active {
        background-color: #0c5fae;
    }
    .nav-link:hover{
        background-size: 100% 2px;
        /* font-size: 18px; */
        -webkit-transform:scale(1.2);
        -moz-transform:scale(1.2);
        -ms-transform:scale(1.2);
        -o-transform:scale(1.2);
        transform:scale(1.2);
    }
    .navbar-text{
        color: black;
    }
    .logo{
        width: 50px;
        /* top: 20px; */
        position: relative;
        /* -webkit-box-shadow: 8px 8px 5px 0px rgba(0,0,0,0.75);
        -moz-box-shadow: 8px 8px 5px 0px rgba(0,0,0,0.75);
        box-shadow: 8px 8px 5px 0px rgba(0,0,0,0.75); */
    }
    .tde{
        font-family: 'Fredoka One', sans-serif;
        color: #495057;
    }
    #escolnet{
        /* background-image: url("../img/18997.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center; */
    }
    /*CONTADORES*/
        .numero{
            border-bottom: 5px solid #0c5fae;
            width: 100px;
            height: 62px;
            text-align: center;
            align-items: center;
            display: flex;
            justify-content: center;
            font-weight: 500;
            font-size: 45px;
            color: #000000;
            margin: 0 auto;
        }
        .numerocriterio{
            margin-bottom: 15px;
        }
        .precio{
            font-weight: 800;
            font-size: 40px;
            color: #383d41;
            text-align: center;
            margin-bottom: 0!important;
        }
        .preciocriterio{
            margin-bottom: 15px;
            text-align: center;
        }
/*SECCIONES*/
    section article{
        padding-left: 80px;
        padding-right: 80px;
        padding-top: 70px;
    }
/*INICIO*/
    /*CARRUSEL PRINCIPAL*/
    .carousel-item{
        height: 100vh!important;
    }
    .title{
        margin-top: 5px;
        margin-bottom: 20px;
    }
    .title span{
        /* background-image: url("../img/subrayado.png");
        background-size: 55%;
        background-repeat: no-repeat;
        background-position: bottom center; */
        padding-bottom: 10px;
        color: #1263b0;
    }
/*caracteristicas*/
    #caracteristicas{
        /* background-image: url("../img/hardware.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center; */
        /* background-color: #1263b0; */
    }
    #caracteristicas article{
        /* margin-top: 60px;
        margin-bottom: 30px;
        background-color: #ffffffa6; */
        
    }
    #caracteristicas img{
        width: 72%;
        transform: skewY(5deg) skewX(-10deg) translate(60px, 40px);
        -webkit-transition: width 2s, transform 2s;
        transition: width 1s, transform 1s;

        /* -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-transform: translateY(-50%) rotateX(60deg) rotateZ(35deg);
        transform: translateY(-50%) rotateX(60deg) rotateZ(35deg); */
    }
    #caracteristicas img:hover{
        /* transition: width 2s, transform 2s; */
        width: 100%;
        transform: skewY(0deg) skewX(0deg) translate(0px, 0px);
    }
    #caracteristicashardware{
        background-image: url("../img/hardware.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: bottom center;
        /* background: #0c5fae; */
        /* color: white!important; */
    }
    #caracteristicashardware article{
        margin-top: 60px;
        margin-bottom: 30px;
        background-color: #ffffffa6;
        
    }
/*OFRECEMOS*/
    #ofrecemos{
        margin-top: 20px;
        margin-bottom: 20px;
        max-width: 100%;
        overflow: hidden;
    }
    #ofrecemos i{
        color: #0c5fae;
        transition: all .3s ease-out;
    }
    #ofrecemos i:hover{
        color: #CC3333;
        font-size: 80px;
    }
    #transformacion{
        /* margin-top: 30px;
        margin-bottom: 20px; */
        /* border-left: 100px solid #0c5fae;
        border-right: 100px solid #0c5fae;
        border-top: 50px solid #cc3333;
        border-bottom: 50px solid rgba(0, 2, 0, 0.75); */
        background-image: url("../img/digital.png");
        background-repeat: no-repeat;
        background-size: contain;
        background-position: left center;
    }
    .gracias{
        font-size: 40px!important;
        /* font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif!important; */
        color:#0c5fae!important;
        text-align: center!important;
    }
    .confirm{
        display: none;
    }
    
    #transformacion i{
        color: #0c5fae;
        transition: all .3s ease-out;
    }
    #transformacion i:hover{
        color: #CC3333;
        font-size: 80px;
    }
    #main{
        background-image: url("../img/chip.png");
        background-size: cover;
        background-repeat: no-repeat;
        /* border: 1px solid red;
        padding-bottom: 20px;*/
    }
    .desc{
        text-align: center;
        font-size: 40px;
    }
    /* #modulos{
        background-image: url("../img/308.jpg");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: top right;
    } */
/*PRECIOS*/
#precios{
    background-image: url("../img/120.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    /* border: 1px solid red;
    padding-bottom: 20px;*/
}
#precios article{
    /* margin-top: 60px;
    margin-bottom: 30px;
    background-color: #ffffffa6; */
}
.tachado{
    text-decoration:line-through;
    color: red;
}
.itemsimple{
    font-family: 'Nunito', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #0275d8; 
}
.separador{
    width: 100%;
    border-bottom: 2px solid #5a5a5a40;
}

.plan{
    -webkit-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.75);
        box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.75);
    padding: 15px;
    border-radius: 25px;
    /* background-image: url("../img/ver.png");
    background-repeat: no-repeat;
    background-size: cover; */
    background-color: rgba(255,255,255,.5)
}
.popular{
    border: 10px solid #ee172b;
    border-radius: 10px;
}
/* CLIENTES */
    #clientes{
        /* background-image: url("../img/cliente.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: top; */
        margin-bottom: 30px;
    }
    /* SLIDER */
        .slick-slide {
            margin: 0px 20px;
        }
        .slick-slide img {
            width: 100%;
        }
        .slick-slider{
            position: relative;

            display: block;
            box-sizing: border-box;

            -webkit-user-select: none;
            -moz-user-select: none;
                -ms-user-select: none;
                    user-select: none;

            -webkit-touch-callout: none;
            -khtml-user-select: none;
            -ms-touch-action: pan-y;
                touch-action: pan-y;
            -webkit-tap-highlight-color: transparent;
        }
        .slick-list{
            position: relative;

            display: block;
            overflow: hidden;

            margin: 0;
            padding: 0;
        }
        .slick-list:focus{
            outline: none;
        }
        .slick-list.dragging{
            cursor: pointer;
            cursor: hand;
        }
        .slick-slider .slick-track,
        .slick-slider .slick-list{
            -webkit-transform: translate3d(0, 0, 0);
            -moz-transform: translate3d(0, 0, 0);
                -ms-transform: translate3d(0, 0, 0);
                -o-transform: translate3d(0, 0, 0);
                    transform: translate3d(0, 0, 0);
        }
        .slick-track{
            position: relative;
            top: 0;
            left: 0;
            display: block;
        }
        .slick-track:before,
        .slick-track:after{
            display: table;

            content: '';
        }
        .slick-track:after{
            clear: both;
        }
        .slick-loading .slick-track{
            visibility: hidden;
        }
        .slick-slide{
            display: none;
            float: left;

            height: 100%;
            min-height: 1px;
        }
        [dir='rtl'] .slick-slide{
            float: right;
        }
        .slick-slide img{
            display: block;
        }
        .slick-slide.slick-loading img{
            display: none;
        }
        .slick-slide.dragging img{
            pointer-events: none;
        }
        .slick-initialized .slick-slide{
            display: block;
        }
        .slick-loading .slick-slide{
            visibility: hidden;
        }
        .slick-vertical .slick-slide{
            display: block;

            height: auto;

            border: 1px solid transparent;
        }
        .slick-arrow.slick-hidden {
            display: none;
        }
        .customer-logos .slide img{
            width: auto;
            max-width: 100%;
            height: 100px;
            display:block;
            margin:auto;
        }
/* CONTACTO */
    #contacto{
        padding-top: 70px;
    }
    /* INFORMACION DE CONTACTO */
    .contact_info::before{
        content: '';
        width: 100%;
        height: 100%;

        position: absolute;
        top: 0;
        left: 0;

        background: #0c5fae;
        opacity: 0.9;
    }

    .contact_info{
        width: 38%;
        position: relative;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        background-image: url('../img/fondo.jpg');
        background-size: cover;
        background-position: center center;
    }

    .info_title,.info_items{
        position: relative;
        z-index: 2;
        color: #fff;
    }

    .info_title{
        margin-bottom: 60px;
    }

    .info_title span{
        font-size: 100px;
        display: block;
        text-align: center;
        margin-bottom: 15px;
    }

    .info_title h2{
        font-size: 35px;
        text-align: center;
    }

    .info_items p{
        display: flex;
        align-items: center;

        font-size: 16px;
        font-weight: 600;
        margin-bottom: 10px;
        color: white;
    }
    /* FORMULARIO DE CONTACTO */
        form.form_contact{
            padding: 30px 40px;
        }

        form.form_contact h2{
            font-size: 25px;
            font-weight: 600;
            color: #303030;
            margin-bottom: 30px;
        }

        form.form_contact .user_info{
            display: flex;
            flex-direction: column;
        }

        form.form_contact label{
            font-weight: 100;
            color: #495057c7;
        }

        form.form_contact input,
        form.form_contact textarea{
            width: 100%;
            padding: 8px 0px 5px;
            /* margin-bottom: 20px; */

            border: none;
            border-bottom: 2px solid #D1D1D1;

            font-family: 'Open sans';
            color: #5A5A5A;
            font-size: 14px;
            font-weight: 400;
        }

        form.form_contact textarea{
            max-width: 100%;
            min-width: 100%;
            max-height: 90px;
        }

        form.form_contact input[type="button"]{
            width: 180px;
            background: #0c5fae;
            padding: 10px;
            border: none;
            border-radius: 25px;

            align-self: flex-end;

            color: #fff;
            font-family: 'Open sans';
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            margin: 0 auto;
        }

        form.form_contact input[type="button"]:hover{
            background: #000;
        }
/* FOOTER */
    footer{
        padding: 10px 20px;
        font-family: 'Nunito', sans-serif;
    }

/* ORDENAR O ESTAN SUELTOS */
    .partners{
        background-image: url("../img/partner.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        height: auto!important;
        padding-top: 20px!important;
        padding-bottom: 40px;
    }

/*DISEÑO DE LISTAS 3*/
    #lista3 {
        counter-reset: li; 
        list-style: none; 
        *list-style: decimal; 
        font: 15px 'trebuchet MS', 'lucida sans';
        padding: 0;
        margin-bottom: 4em;
        text-shadow: 0 1px 0 rgba(255,255,255,.5);
    }
    #lista3 ol {
        margin: 0 0 0 2em; 
    }
    #lista3 li{
        position: relative;
        display: block;
        padding: .4em .4em .4em .8em;
        *padding: .4em;
        margin: .5em 0 .5em 2.5em;
        background: #ddd;
        color: #444;
        text-decoration: none;
        transition: all .3s ease-out;   
    }
    #lista3 li:hover{
        background: #eee;
    }   
    #lista3 li:before{
        content: "✔";
        counter-increment: li;
        position: absolute;
        left: -2.5em; top: 50%;
        margin-top: -1em;
        background: #0c5fae;
        height: 2em; width: 2em;
        line-height: 2em;
        text-align: center;
        /* font-weight: ; */
        color: white;
    }
    #lista3 li:after{
        position: absolute; 
        content: '';
        border: .5em solid transparent;
        left: -1em;
        top: 50%;
        margin-top: -.5em;
        transition: all .3s ease-out;               
    }
    #lista3 li:hover:after{
        left: -.5em;
        border-left-color: #0c5fae;         
    }
    /*lista 2*/
    #lista2 {
        counter-reset: li; 
        list-style: none; 
        *list-style: decimal; 
        /* font: 15px 'trebuchet MS', 'lucida sans'; */
        padding: 0;
        /* margin-bottom: 4em; */
        text-shadow: 0 1px 0 rgba(255,255,255,.5);
    }
    #lista2 ol {
        margin: 0 0 0 2em; 
    }
    #lista2 li{
        position: relative;
        display: block;
        padding: .4em .4em .2em .8em;
        /* *padding: .4em; */
        /* margin: .5em 0 .5em 2.5em; */
        /* background: #ddd; */
        color: #444;
        text-decoration: none;
        transition: all .1s ease-out;
        text-align: center;
        cursor: pointer;  
        font-family: 'Nunito', sans-serif;
        font-size: 15px;
        font-weight: 600;
        /* color: #0275d8;  */
    }
    #lista2 li:hover{
        /* background: #ddd; */
        font-size: 17px;
    }   
    /* #lista2 li:before{
        content: "";
        counter-increment: li;
        position: absolute;
        left: -2.5em; top: 50%;
        margin-top: -1em;
        background: red;
        height: 2em; width: 2em;
        line-height: 2em;
        text-align: center;
        font-weight: ;
        color: white;
    }
    #lista2 li:after{
        position: absolute; 
        content: '';
        border: .5em solid transparent;
        left: -1em;
        top: 50%;
        margin-top: -.5em;
        transition: all .3s ease-out;               
    }
    #lista2 li:hover:after{
        left: -.5em;
        border-left-color: red;         
    } */
    /*lista1*/
    .lista1 li{
        font-size: 40px;
        color:#0c5fae;
        margin-bottom: 10px;
    }

    

/* WHATSAPP */
    .whatsapp{
        position: absolute;
        width: 40px;
        height: 40px;
        z-index: 99;
        margin-left: 8px;
        margin-top: 8px;
        color: green;
    }
    .calc{
        position: absolute;
        width: 40px;
        height: 40px;
        z-index: 99;
        margin-left: 8px;
        margin-top: 8px;
        color: #363435;
    }

    @keyframes pulse1 {
        from { transform: scale(1); }
        50% { transform: scale(2); }
        to { transform: scale(1); }
    }
    .pulse1 {
        animation-name: pulse1;
        animation-duration: 5s;
        animation-iteration-count: infinite;
        /* animation-timing-function: 5s; */
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    @keyframes pulse2 {
        from { transform: scale(1); }
        50% { transform: scale(1.8); }
        to { transform: scale(1); }
    }
    .pulse2 {
        animation-name: pulse2;
        animation-duration: 4s;
        animation-iteration-count: infinite;
        animation-delay: 2s;
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    @keyframes pulse3 {
        from { transform: scale(1); }
        50% { transform: scale(1.5); }
        to { transform: scale(1); }
    }
    .pulse3 {
        animation-name: pulse3;
        animation-duration: 4s;
        animation-iteration-count: infinite;
        animation-delay: 3s;
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    .animated-circles {
        position: absolute;
        top: 0;
    }

    .abajoaladowhatsapp{
        bottom: 70px!important;
        right: -25px!important;
        margin-right: 95px;
        position: fixed;
        z-index: 99;
        transition: all .2s ease-in-out; transform: scale(1);
    }
    .circle {
        background: rgba(0,0,0,.075);
        width: 45px;
        height: 45px;
        /* border-radius: 5px; */
        position: absolute;
        z-index: 49;
        transform: scale(1);
        -webkit-transform: scale(1);
    }

    .backg{
        font-size: 56px;
        position: absolute;
        /* margin: -22px -55px; */
        color: #2125292e!important;
        z-index: -1;

        /**/
        position: absolute;
        /* top: 0; */
        left: 0;
        margin-top: -20px;
        width: 100%;
        
        text-transform: uppercase;
        text-align: center;
    }
    


/* Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 575px) {
    .logo{
        width: 50px;
        top: 0px;
        position: relative;
    }
    .navbar-toggler{
        color: white;
        font-size: 13px;
    }
    .navbar-collapse{
        background-color: rgba(0, 0, 0, 0.65);
        width: 100%;
        text-align: center;
    }
    .height-vh{
        height: auto!important;
    }
    section article {
        padding-left: 10px;
        padding-right: 10px;
    }
    .carousel-item {
        height: auto!important;
    }
    h2{
        font-size: 20px;
    }
    .contact_info {
        width: 100%;
    }
}
/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) and (max-width: 767px) {
}
/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) and (max-width: 991px) {
}
/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) and (max-width: 1199px) {
}
/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
}


/*diseño hermoso de menu*/
/* <nav class="menu">
   <input type="checkbox" href="#" class="menu-open" name="menu-open" id="menu-open" />
   <label class="menu-open-button" for="menu-open">
    <span class="lines line-1"></span>
    <span class="lines line-2"></span>
    <span class="lines line-3"></span>
  </label>

   <a href="#" class="menu-item blue"> <i class="fa fa-anchor"></i> </a>
   <a href="#" class="menu-item green"> <i class="fa fa-coffee"></i> </a>
   <a href="#" class="menu-item red"> <i class="fa fa-heart"></i> </a>
   <a href="#" class="menu-item purple"> <i class="fa fa-microphone"></i> </a>
   <a href="#" class="menu-item orange"> <i class="fa fa-star"></i> </a>
   <a href="#" class="menu-item lightblue"> <i class="fa fa-diamond"></i> </a>
</nav> */

/* body {
    padding: 0;
    margin: 0;
    background: #596778;
    color: #EEEEEE;
    text-align: center;
    font-family: "Lato", sans-serif;
 }
 
 @media screen and (max-width: 700px) {
    body {
       padding: 170px 0 0 0;
       width: 100%
    }
 }
 
 a {
    color: inherit;
 }
 
 .menu-item,
 .menu-open-button {
    background: #EEEEEE;
    border-radius: 100%;
    width: 80px;
    height: 80px;
    margin-left: -40px;
    position: absolute;
    color: #FFFFFF;
    text-align: center;
    line-height: 80px;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: -webkit-transform ease-out 200ms;
    transition: -webkit-transform ease-out 200ms;
    transition: transform ease-out 200ms;
    transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;
 }
 
 .menu-open {
    display: none;
 }
 
 .lines {
    width: 25px;
    height: 3px;
    background: #596778;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -12.5px;
    margin-top: -1.5px;
    -webkit-transition: -webkit-transform 200ms;
    transition: -webkit-transform 200ms;
    transition: transform 200ms;
    transition: transform 200ms, -webkit-transform 200ms;
 }
 
 .line-1 {
    -webkit-transform: translate3d(0, -8px, 0);
    transform: translate3d(0, -8px, 0);
 }
 
 .line-2 {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
 }
 
 .line-3 {
    -webkit-transform: translate3d(0, 8px, 0);
    transform: translate3d(0, 8px, 0);
 }
 
 .menu-open:checked + .menu-open-button .line-1 {
    -webkit-transform: translate3d(0, 0, 0) rotate(45deg);
    transform: translate3d(0, 0, 0) rotate(45deg);
 }
 
 .menu-open:checked + .menu-open-button .line-2 {
    -webkit-transform: translate3d(0, 0, 0) scale(0.1, 1);
    transform: translate3d(0, 0, 0) scale(0.1, 1);
 }
 
 .menu-open:checked + .menu-open-button .line-3 {
    -webkit-transform: translate3d(0, 0, 0) rotate(-45deg);
    transform: translate3d(0, 0, 0) rotate(-45deg);
 }
 
 .menu {
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 80px;
    height: 80px;
    text-align: center;
    box-sizing: border-box;
    font-size: 26px;
 }
 
 
  .menu-item {
    transition: all 0.1s ease 0s;
 } 
 
 .menu-item:hover {
    background: #EEEEEE;
    color: #3290B1;
 }
 
 .menu-item:nth-child(3) {
    -webkit-transition-duration: 180ms;
    transition-duration: 180ms;
 }
 
 .menu-item:nth-child(4) {
    -webkit-transition-duration: 180ms;
    transition-duration: 180ms;
 }
 
 .menu-item:nth-child(5) {
    -webkit-transition-duration: 180ms;
    transition-duration: 180ms;
 }
 
 .menu-item:nth-child(6) {
    -webkit-transition-duration: 180ms;
    transition-duration: 180ms;
 }
 
 .menu-item:nth-child(7) {
    -webkit-transition-duration: 180ms;
    transition-duration: 180ms;
 }
 
 .menu-item:nth-child(8) {
    -webkit-transition-duration: 180ms;
    transition-duration: 180ms;
 }
 
 .menu-item:nth-child(9) {
    -webkit-transition-duration: 180ms;
    transition-duration: 180ms;
 }
 
 .menu-open-button {
    z-index: 2;
    -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -webkit-transition-duration: 400ms;
    transition-duration: 400ms;
    -webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0);
    transform: scale(1.1, 1.1) translate3d(0, 0, 0);
    cursor: pointer;
    box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
 }
 
 .menu-open-button:hover {
    -webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0);
    transform: scale(1.2, 1.2) translate3d(0, 0, 0);
 }
 
 .menu-open:checked + .menu-open-button {
    -webkit-transition-timing-function: linear;
    transition-timing-function: linear;
    -webkit-transition-duration: 200ms;
    transition-duration: 200ms;
    -webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0);
    transform: scale(0.8, 0.8) translate3d(0, 0, 0);
 }
 
 .menu-open:checked ~ .menu-item {
    -webkit-transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
    transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
 }
 
 .menu-open:checked ~ .menu-item:nth-child(3) {
    transition-duration: 180ms;
    -webkit-transition-duration: 180ms;
    -webkit-transform: translate3d(0.08361px, -104.99997px, 0);
    transform: translate3d(0.08361px, -104.99997px, 0);
 }
 
 .menu-open:checked ~ .menu-item:nth-child(4) {
    transition-duration: 280ms;
    -webkit-transition-duration: 280ms;
    -webkit-transform: translate3d(90.9466px, -52.47586px, 0);
    transform: translate3d(90.9466px, -52.47586px, 0);
 }
 
 .menu-open:checked ~ .menu-item:nth-child(5) {
    transition-duration: 380ms;
    -webkit-transition-duration: 380ms;
    -webkit-transform: translate3d(90.9466px, 52.47586px, 0);
    transform: translate3d(90.9466px, 52.47586px, 0);
 }
 
 .menu-open:checked ~ .menu-item:nth-child(6) {
    transition-duration: 480ms;
    -webkit-transition-duration: 480ms;
    -webkit-transform: translate3d(0.08361px, 104.99997px, 0);
    transform: translate3d(0.08361px, 104.99997px, 0);
 }
 
 .menu-open:checked ~ .menu-item:nth-child(7) {
    transition-duration: 580ms;
    -webkit-transition-duration: 580ms;
    -webkit-transform: translate3d(-90.86291px, 52.62064px, 0);
    transform: translate3d(-90.86291px, 52.62064px, 0);
 }
 
 .menu-open:checked ~ .menu-item:nth-child(8) {
    transition-duration: 680ms;
    -webkit-transition-duration: 680ms;
    -webkit-transform: translate3d(-91.03006px, -52.33095px, 0);
    transform: translate3d(-91.03006px, -52.33095px, 0);
 }
 
 .menu-open:checked ~ .menu-item:nth-child(9) {
    transition-duration: 780ms;
    -webkit-transition-duration: 780ms;
    -webkit-transform: translate3d(-0.25084px, -104.9997px, 0);
    transform: translate3d(-0.25084px, -104.9997px, 0);
 }
 
 .blue {
    background-color: #669AE1;
    box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
 }
 
 .blue:hover {
    color: #669AE1;
    text-shadow: none;
 }
 
 .green {
    background-color: #70CC72;
    box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
 }
 
 .green:hover {
    color: #70CC72;
    text-shadow: none;
 }
 
 .red {
    background-color: #FE4365;
    box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
 }
 
 .red:hover {
    color: #FE4365;
    text-shadow: none;
 }
 
 .purple {
    background-color: #C49CDE;
    box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
 }
 
 .purple:hover {
    color: #C49CDE;
    text-shadow: none;
 }
 
 .orange {
    background-color: #FC913A;
    box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
 }
 
 .orange:hover {
    color: #FC913A;
    text-shadow: none;
 }
 
 .lightblue {
    background-color: #62C2E4;
    box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
 }
 
 .lightblue:hover {
    color: #62C2E4;
    text-shadow: none;
 }
 
 .credit {
    margin: 24px 20px 120px 0;
    text-align: right;
    color: #EEEEEE;
 }
 
 .credit a {
    padding: 8px 0;
    color: #C49CDE;
    text-decoration: none;
    transition: all 0.3s ease 0s;
 }
 
 .credit a:hover {
    text-decoration: underline;
 } */

 #soluciones{
    background-image: url("../img/software.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
#soluciones article{
    margin-top: 60px;
    margin-bottom: 30px;
    background-color: #ffffffa6;
    
}

