/* font */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
/* variables */
:root {
    --yellow: #df9f00;
    --orange:#d7691c;
    --orange2: #bf391c;
    --green: #36A492;
    --green2: #216c60;
    --red: #5E1F8F;
    --red2:#fff;
    --white:#fafafa;
    --white2: #dffffa;
    --white3: #faebeb;
    --grey: #d1d1d1;
    --grey2: #868589;
    --black: #212121;
    --black2: #181818;
    --black3: #080808;
    --morado-o: #21094e;
    --morado-m: #3a1b74;
    --morado-c: #2f1364;
    --naranja: #FF7246;
    --amarillo: #FFDB34;
}
* {
    margin:0;
    padding: 0;
    box-sizing:border-box;
}
html {
    font-family: 'Roboto', sans-serif;
    font-size: 62.5%;
}
a {
    text-decoration: none;
    cursor: pointer;
}
ul{
    list-style-type: none;
}
/* condicionantes */
.text-color{
    color: var(--grey2);
}
.text-color__red{
    color: var(--red);
}
.text-color__orange{
    color: var(--orange);
}
.text-color__white{
    color: var(--white);
}
.text-color__green{
    color: var(--green);
}
.text-color__black{
    color:var(--black3);
}
.text-color__yellow{
    color: var(--amarillo)
}
.text-shadow{
    text-shadow: 0 2px rgba(0, 0, 0, 0.6);
}
/* menu color style */
.link__yellow:hover{
    color:var(--yellow);
}
.link__orange2{
    color:var(--orange2);
}
.link__orange2:hover{
    color:var(--orange);
}
.link__orange:hover{
    color:var(--orange2);
}
.link__green:hover{
    color:var(--green);
}
.link__green2:hover{
    color:var(--green);
}
.link__red2:hover,
.link__red:hover{
    color:var(--red);
}



/* background*/
.bg-opacity{
    background-color: rgba(28, 6, 82, 0.8);
}
.bg-diagonal{
    z-index: -2;
    width:100%;
    height:100%;
    background: linear-gradient(195deg, rgba(188, 19, 57, 0) 80%,var(--yellow) 30%);
}
.bg-diagonal:before{
    content: '';
    position:absolute;
    z-index: -1;
    width:100%;
    height:100%;
    background: linear-gradient(162deg, rgba(188, 19, 57, 0) 70%,var(--orange) 40%);
}
.bg-white{
    background-color: var(--white);
}
.bg-yellow{
    background-color: var(--yellow);
}
.bg-orange{
    background-color: var(--orange);
}
.bg-orange2{
    background-color: var(--orange2);
}
.bg-red{
    background-color: var(--red);
}
.bg-green{
    background-color: var(--green);
}
.bg-black{
    background-color: var(--morado-m);
}
.bg-black2{
    z-index: -99999;
    background-color: var(--morado-o);
}
.gradient-black{
    background: linear-gradient(180deg,var(--red) 10%, var(--morado-o) 80%);
}
.gradient-orange{
    background: rgb(223,159,0);
    background: linear-gradient(0deg, rgba(223,159,0,1) 0%, rgba(215,105,28,1) 50%);
}


/* button border */
.buttom-w100{
    position:relative;
    display: flex;
    flex-direction: column;
    width: 90%;
    text-align: center;
    align-items: center;
    justify-content: center;
}
.button-border{
    font-size: 2rem;
    font-weight:400;
    margin: 10px;
    padding: 5px 10px;
    border-radius: 10px;
    text-transform: uppercase;
    cursor: pointer;
    background: none;
}
.btn[type="submit"]{
    width:90%;
    font-size: 2rem;
    font-weight:400;
    margin: 10px;
    padding: 5px 10px;
    border-radius: 10px;
    text-transform: uppercase;
    cursor: pointer;
}
.button-border-transparent{
    background: none;
    border: none;
    font-size:1.5rem;
}
.buttom-border__white{
    background-color: white;
}
.button-border__yellow{
    color: var(--amarillo);
    padding: 5px 10px;
    border: 2px solid var(--amarillo);
}
.button-border__yellow:hover{
    border: 2px solid var(--naranja);
    background-color: var(--naranja);
    color: var(--white);
}
.button-border__orange{
    color: var(--orange);
    border: 2px solid var(--orange);
}
.button-border__orange:hover{
    color:var(--white);
    border: 2px solid var(--orange2);
    background-color: var(--orange2);
}
.button-border__red{
    color: var(--red);
    border: 2px solid var(--red);
}
.button-border__red:hover{
    color:var(--white);
    border: 2px solid var(--red);
    background-color: var(--red);
}
.button-border__red2{
    color: var(--red);
    border: 2px solid var(--red);
}
.button-border__green{
    color: var(--green);
    border: 2px solid var(--green);
}
.button-border__green2{
    color: var(--green);
    border: 2px solid var(--green);
}
.button-border__green:hover{
    color:var(--white);
    border: 2px solid var(--green);
    background-color: var(--green);
}

/* espacios */

.padding,
.padding-2,
.padding-3{
    padding: 20px;
}
.margin-top{
    margin-top: 80px;
}
.text-spacing{
    letter-spacing: 0px;
}
.grid1-3{
    display:grid;
    width:100%;
    grid-template-areas: auto;
    gap: .3%;
}
.flex-columns{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


/* list dots */
.list-dot::before{
    content: '\002726';
    font-size: 2rem;
    padding-right: 10px;
    color: var(--orange);
}
.list-dot-2::before{
    content: '\01F7BD';
    font-size: 1.5rem;
    padding: 0 5px 0 10px;
    color: var(--orange);
}

/* navbar */
.navbar{
    position: fixed;
    z-index:9999;
    width: 100%;
    height:80px;
    top:0;
    background-color: var(--white);
    border-bottom: 1px solid rgba(0,0,0,.1);
}
.navbar__container{
    position: relative;
    display:flex;
    min-width: 320px;
    margin: auto;
}

/* logo */
.logo{
     position:relative;
     display:flex;
     width: 280px;
     padding:0 10px;
}
    .logo__isotipo{
        width:50px;
        height: 80px;
        padding: 15px 0;
    }
        .logo__isotipo__img{
            width: 50px;
            height: 50px;
        }
    .logo__name{
        display:flex;
        width:210px;
        height:80px;
        padding: 0 5px;
        flex-direction: column;
        justify-content:center;
    }
        .logo__name__tittle{
            display:flex;
        }
            .logo__name__tittle__text{
                font-size: 4rem;
                font-weight: 700;
                color: var(--black3);
            }
            .logo__name__enterprise{
                position: relative;
                width:0.9rem;
                font-size: .8rem;
                font-weight: 700;
                word-wrap: break-word;
                color: var(--black3);
                transform: translate(10px,10px);
            }
        .logo__name__subtitle{
            font-size:1.5rem;
            font-weight:700;
            text-align: left;
            transform: translateY(-5px) ;
        }

/* menu */
.menu{
    position: absolute;
    top:80px;
    width:100%;
    height:100vh;
    transform: translateX(-100%);
    background-color: rgba(255,255,255, .4);
}
    .menu__list{
        width: 100%;
        background-color: var(--white);
        border-bottom: 1px solid rgba(0,0,0,.1);
    }
    .menu__item,
    .menu__subitem{
        width: 90%;
        margin: auto;
        padding: 10px;
        font-size: 1.5rem;
        text-transform: uppercase;
        border-top: 1px solid rgba(0,0,0,.1);
    }
    .menu__subitem{
        display: none;
    }
        .menu__item:nth-child(1){
            border: none;
        }
        .menu__subitem__item{
            padding: 10px;
            border-top: 1px solid rgba(0,0,0,.1);
        }
            .menu__subitem__item:nth-child(1){
                padding-top: 0;
                border-top: none;
            }
            .menu__subitem__item:nth-child(3){
                padding-bottom: 0;
            }
    .submenu__btn{
        display: block;
    }
        .submenu__btn__icon{
            float: right;
            font-size:4rem;
            transform: translateY(-35px);
        }
.menu__link{
    display: block;
    color:var(--black3);
}

/* nav toggle  */
.nav__toggle{
    position: absolute;
    font-size:3rem;
    right: 10px;
    top: 30%;
}
.mostrar{
    margin-left:0;
}


/*=====================
     Slider Header
========================*/

.slideshow{
    position: relative;
    width: 100%;
    height: 250px;
}
    .slideshow .owl-carousel{
        width: 100%;        
    }
    .slideshow .owl-prev{
        transform: translateX(50%);
    }
    .slideshow .owl-next{
        transform: translateX(-50%);
    }
    .slideshow .owl-dots{
        width: 100%;
        text-align: center;
        position: absolute;
        bottom: 2%;
    }
    .slideshow .owl-dot span {
        width: 15px;
        height: 15px;
        margin: 5px 7px;
        background: var(--white);
        display: block;
        backface-visibility: visible;
        transition: opacity 200ms ease;
        border-radius: 600%;
    }
    .slideshow .owl-dot.active span,
    .slideshow .owl-dot:hover span {
        background: var(--orange2); 
    }
.slideshow__item{
    position: relative;
    width: 100%;
    height: 250px;
}
    
/* === slideshow animation === */
.slideshow__animation{
    position: absolute;
    width:100%;
    height:100%;
}
    .slideshow__animation__network{
        position:absolute;
        z-index:-3;
        width:100%;
        height:100%;
        background-size: 150%;
        background-repeat: no-repeat;
    }
        .slideshow__animation__network:nth-child(1){
            background-image: url("../img/slideshow/network/network-1.png");
            animation: motion 15s infinite linear alternate;
        }
        .slideshow__animation__network:nth-child(2){
            background-image: url("../img/slideshow/network/network-2.png");
            animation: motion 10s infinite linear alternate;
        }
        .slideshow__animation__network:nth-child(3){
            background-image: url("../img/slideshow/network/network-3.png");
            animation: motion 5s infinite linear alternate;
        }
        @keyframes motion{
            from{
                background-position: bottom;
                }
            to{
                background-position: top;
            }
        }

/* slideshow image */
.slideshow__image{
    position:absolute;
    z-index: -3;
    width: 100%;
    height: 250px;
}
    .slideshow__image::before{
        content: '';
        position: absolute;
        z-index:0;
        width: 100%;        
        height: 250px;
        background-color: rgba(0, 0, 0, .5);
    }
.slideshow__image__img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* slideshow content */
.slideshow__content{
    position:relative;
    display: flex;
    flex-direction: column;
    z-index:0;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 10%;

}
    .slideshow__content__tittle{
        font-size:2.3rem;
        text-transform: uppercase;
    }
    .slideshow__content__text{
        color: #fff;
        font-size: 1.3rem;
        font-weight: 400;
        text-shadow:  2px 2px 2px black;
    }


/* main-content */
.main-content{
    width: 100%;
    height: 100%;
}
.area{
    position: relative;
    width: 100%;
    height: 100%;
}
.area__tittle__sub,
.area__tittle{
    margin:20px auto;
    font-size:3.8rem;
    font-weight:500;
    text-transform: uppercase;
    text-align: center;
}
    .text__small{
        font-size:2rem;
    }
    .text__medium{
        font-size: 3.3rem;
    }
.area__subtittle{
    padding:10px 0;
    font-size: 2rem;
    font-weight:500;
    text-transform: uppercase;
    text-align: left;
}
.area__subtittle__chico{
    width: 200px;
    color: var(--black3);
    padding: 4px 10px;
    font-size: 1.8rem;
    font-weight:500;
    text-transform: uppercase;
    text-align: left;
}

.area__tittle__medium{
    font-size:3rem;
    text-align: center;
    text-overflow: ellipsis;
    margin-top: 15px;
    padding: 10px 0;
}
    .font-small{
        font-size:2.5rem;
    }

.area__text{
    padding: 5px 0;
}
    .area__text__small{
        font-size:1.3rem;
        text-align: justify;
    }
.area__text,
.area__list{
    font-size:1.5rem;
    text-align: justify;
}
    .area__list__item{
        padding: 5px;
    }
        .area__list__icon__img{
            width: 20px;
            height: 20px;
            margin-right: 5px;
            position: relative;
            top: 5px;
        }
        .list__tab{
            margin-left: 30px;
        }
.area__container{
    display:flex;
    width:100%;
    height:100%;
    flex-direction: column;
}
    .area__images__about{
        width: 100%;
        height: 250px;
        margin: 20px;
        
    }
    .area__image{
        width: 100%;
        height: 100%;
    }
    .area__img{
        width: 100%;
        height: 100%;
        margin: 10px 0;
        object-fit: cover;
        border-radius: 10px;
        box-shadow: 0 7px 8px rgba(0,0,0,0.5);
    }
/* banner */
.area__banner{
    position: relative;
    display: flex;
    width: 100%;
    height: 150px;
    align-items: center;
}
    .area__banner::before{
        content: '';
        position: absolute;
        z-index:-1;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, .5);
    }
    .area__banner__image{
        position:absolute;
        z-index: -3;
        min-width: 320px;
        height: 100%;
    }
    .area__banner__img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
    }
    .area__container__video{
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
    
    }
/* ===  Banner Mascarilla   === */
.area__banner2{
    position: relative;
    width: 100%;
    height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
}   
    .area__banner2:before{
        content: '';
        position: absolute;
        z-index: -2;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,.5);
    }
    .area__banner__img2{
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
    }
    .area__banner2 .area__text{
        font-size:1.5rem;
        transform: translateY(-15px);
    }
/* service card */
.service__card{
    width: 100%;
    height: 300px;
    margin:10px 0;
    padding: 10px;
    background-color: var(--white);
    border-radius: 10px;
    box-shadow: 0 7px 8px rgba(0,0,0,0.5);
}
    .service__card__header{
        display: flex;
        width: 100%;
        height: 70px;
        padding: 10px;
        border-radius: 10px;
        justify-content:space-around;
        text-align: center;
        align-items: center;
    }
        .service__card__img{
            width: 70px;
            height:70px;
        }

        .service__card__tittle{
            font-size: 1.7rem;
            font-weight:500;
            color: var(--white);
        }

    .service__card__content{
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 150px;
        justify-content:space-around;
        text-align: center;
    }
        .service__card__subtittle{
            font-size: 2rem;
            font-weight: 700;
            text-transform: uppercase;
        }
        .service__card__text{
            font-size: 1.4rem;

        }
/* area category */
.category-grid__right,
.category-grid__left{
    display: grid;
    grid-template-areas: 	'header'
                            'container'
                            'buttom';
}
.area__category{
    width: 100%;
}
    .area__category__header{
        grid-area: header;
    }
    .area__category__container{
        grid-area: container;
        padding: 20px;
        border-radius: 10px;
    }
        .area__category__content{
            position: relative;
            display: flex;
            width: 100%;
            padding: 10px 0;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
        }
            .area__cateogry__content__icon{
                width: 180px;
                height: 210px;
                margin: 10px 0;
                border-radius: 10px;
                background-color: var(--white);
            }
                .area__category__image{
                    position: relative;
                    display: flex;
                    width:130px;
                    height:130px;
                    margin: 10px auto;
                    border-radius: 50%;
                    justify-content: center;
                    align-items: center;
                }
                .area__category__img{
                    position: relative;
                    z-index: 1;
                    width: 85px;
                    height: 85px;
                }
                .area__category__tittle {
                    display: flex;
                    width:100%;
                    height:60px;
                    padding: 0 10px;
                    justify-content: center;
                    align-items: center;
                    text-align: center;
                    font-weight: 500;
                }
    .area__category__buttom{
        grid-area: buttom;
    }

/* area container */
.area__container__info{
    width: 100%;
}
    .area__container__content{
        display: flex;
        width: 100%;
        margin: 10px 0;
    }
        .area__container__icon{
            display: flex;
            width: 20%;
            align-items: center;
        }
            .area__container__icon__img{
                width: 90%;
            }
        .area__container__text{
            width: 80%;
            padding-left: 10px;
        }
.area__container__image{
    position: relative;
    width: 100%;
    min-width: 280px;
    margin: 10px 0;
}
    .area__container__image__img{
        width: 100%;
        object-fit: cover;
    }
.business__image{
    height: 70px;
    width: 100%;
    margin: 20px 0;
}
    .business__img{
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
/*=====================
    area section
========================*/
.area__section__image{
    position:relative;
    width: 100%;
	height: 400px;
	overflow: hidden;
}
    .area__section__img{
        position: absolute;
		z-index: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center center;
    }
    .area__section__caption{
        position: absolute;
        display: flex;
        z-index: 1;
        width: 100%;
		height: 100%;
        top: 0%;
		padding: 3% 10%;
        font-size: 2rem;
		font-weight: 400;
		text-align: center;
		text-transform: uppercase;
        justify-content: center;
		align-items: flex-end;
		background: linear-gradient(180deg,rgba(0,0,0,0)80%,rgba(0, 0, 0, 0.8)20%);
    }
        .area__section__caption:hover{
            position: absolute;
            display: flex;
            z-index: 1;
            width: 100%;
            height: 100%;
            top: 0;
            padding: 10%;
            text-align: center;
            align-items: center;
            justify-content: center;
            font-size: 3.5rem;
            font-weight: 600;
            text-transform: uppercase;
            text-shadow: 0px 3px 2px var(--black3);
            background: linear-gradient(180deg,rgba(0,0,0,0)0%,rgba(0, 0, 0, 1)100%);
            transition: 0.8;
        }
.area__icon{
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
}
    .area__icon__container{
        display: flex;
        width: 150px;
        margin: 10px;
        flex-direction: column;
        align-items: center;
    }
        .area__icon__image{
            height:100px;
        }
            .area__icon__img{
                height:100%
            }

/* software casino */
.area__section__mini-banner{
    position: relative;
    width: 100%;
    height: 160px;
    margin-bottom: 20px;
}
    .mini-banner__img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position:  center center;
    }
    .mini-banner__text{
        position:absolute;
        z-index: 1;
        display: flex;
        width: 100%;
        height: 100%;
        top: 0;
        padding: 0 20px;
        font-size:2.3rem;
        text-transform: uppercase;
        text-align:center;
        text-shadow: 0 2px rgba(0, 0, 0, 0.6);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: var(--white);
        background-color: rgba(0, 0, 0, .5);
    }
        .mini-banner__text:hover{
            background-color: rgba(179, 151, 26, 0.8);
        }
        .text-black__shadow{
            font-weight: 800;
        }


/* card maquina */
.area__section__card{
    display: grid;
    grid-template-areas: auto;
    width: 100%;
    margin: 10%;

}
    .card__content{
        width: 100%;
    }
    .card__image{
        width: 100%;
    }
        .card__image__img{
            width: 80%;
            margin:0 10%;
        }


/*=====================
    sliders productos
========================*/
.area__scroll__horizontal{
    width: 90%;
    margin: auto;
 }

.owl-carousel{
    position: relative;
}
.owl-item{
     background: none;
 }
  .owl-nav{
    position: absolute;
    width: 100%;
    top:40%;
    font-size: 5rem;

 }
    .owl-prev{
        transform: translateX(-25px)
    }
    .owl-next{
        float: right;
        transform: translateX(23px);
    }

/*=====================
    Card Game
========================*/
.card-game{
    position: relative;
    width: 250px;
    height: 250px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-radius: 100%;
    background: linear-gradient(180deg, var(--morado-o) 30%, #360e64 60%);
    transition: 0.5s;
    cursor: pointer;
}
    .card-game:hover{
        background: var(--naranja);
		border-radius: 20px;
    }
.card-game__content{
    position:relative;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: 0s;
    top:-200px;
}
    .card-game:hover .card-game__content{
        left: 0;
		opacity: 1;
		visibility:visible;
		top:0;
    }
.card-game__image{
    position: absolute;
    width: 100%;
    margin:auto;
    z-index: 0;
    opacity: 1;
    visibility:visible;
}
    .card-game:hover .card-game__image{
        visibility: hidden;
    }

/*=====================
        Card Product
========================*/
.card-product{
    position: relative;
    width: 250px;
    height: 390px;
    border-radius: 10px;;
    background-color: var(--white2);
}
    .card-product__img{
        width: 100%;
        height: 280px;
        object-fit: cover;
        object-position: center center;
        border-radius: 10px 10px 0 0;
    }
        .card-product .area__subtittle{
            width:80%;
            color:var(--black3);
            padding-left: 10px;
            padding-bottom: 15px;
        }
.card-product__medal{
    position: absolute;
    width:50px;
    height:50px;
    bottom: 50px;
    right: -80px;
}
.card-product__fda{
    position: absolute;
    width: 60px;
    height: 15px;
    bottom: 20px;
    right: -55px;
}
.card-product__sgs{
    position: absolute;
    width: 30px;
    height: 25px;
    bottom: 15px;
    right: -95px;
    object-fit: contain;
}
.card-product .button-border{
    position: absolute;
    bottom: 0px;
}

/*=====================
        PopUp
========================*/
.area__popup{
    position:fixed;
	z-index: 999;
	width: 100%;
	height: 100%;
	transform: translateX(-150%);
	bottom: 0;
	background-color: rgba(0, 0, 0, .6);
	display: flex;
	align-items: center;
	justify-content:space-between;
}
    .area__popup__container{
        width: 300px;
        margin: auto;
        border-radius: 20px;
        background-color: var(--white);
    }
        .popup__img{
            width: 100%;
            height: 200px;
            object-fit: cover;
            border-radius: 10px 10px 0 0;
        }
        .popup__content{
            position: relative;
            width:100%;
            height:100%;
            padding: 0 20px;
            display: flex;
            flex-direction: column;
            justify-content:center;
        }
        .popup__close{
            position:absolute;
            top: -200px;
            right: 10px;
            font-size: 4rem;
            cursor: pointer;
            transform: translate(20px, -15px);
        }
/* newslater  SEND*/

.send{
	width: 100%;
	text-align: center;
}
.send__mail{
    width: 90%;
	background:none;
	text-align: center;
	padding: 10px;
}

/*=====================
        Tabla
========================*/
.area__tab{
    width: 80%;
    height: 450px;
    position: relative;
    margin: 20px auto;
    overflow: hidden;
}
.tab__buttom{
    display: flex;
    border-bottom: 1px solid var(--green)
 }
    .tab__buttom  .area__list__icon__img{
        width: 30px;
        height: 30px;
        margin: 10px;
    }
.tab__container{
    position: absolute;
    transform: translateX(-100%);
    transition: 0.3s;
}
    .tab__container__content{
        width: 100%;
		height: 400px;
		padding: 20px;
		overflow: auto;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
    }
        .tab__container__content::-webkit-scrollbar{
            width: 5px;
        }
        .tab__container__content::-webkit-scrollbar-thumb{
            background-color: var(--green);
            border-radius: 5px;            
        }
#tab-1{
    transform: translateX(0);
}
#btn-1{
    color: var(--green);
}
.area__tab__content{
    width: 100%;
    margin-bottom: 20px;
    text-align: left;
    border-collapse:collapse;   
}
    .area__tab__item{
        display: flex;
        flex-direction: column;
        width: 100%;        
        
    }
        .area__tab__item:nth-child(even){
            background-color: var(--white2)
            ;
        }
        .area__tab__text{
            width: 100%;
            padding:10px;border: 1px solid var(--green2);
        }
    .area__tab__head,
    .area__tab__head .area__tab__item:nth-child(2){
        text-transform: uppercase;
        background-color: var(--green2);
    }
       
/*  ====  image tab====    */
.hover-shadow{
    width: 100%;
}

/*=====================
        MODAL
========================*/
.modal{
    display: none;
    position: fixed;
    z-index: 4;
    left: 0;
    top: 0;
    margin-top: 75px;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
}
    .modal::-webkit-scrollbar{
        width: 5px;
    }
    .modal::-webkit-scrollbar-thumb{
        background-color: var(--green2);
        border-radius: 5px;        
    }
.modal__content{
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    width: 80%;
    top:20%;
}
.modal__close {
    position:  sticky;
    top:18%;
    float: right;
    font-size: 3rem;
    right:7%;
}
    .modal__close:hover,
    .modal__close:focus {
        text-decoration: none;
        cursor: pointer;
    }
/*=== modal Slyde ===*/
.mySlides {
    display: none;
  }
    .mySlides__next,
    .mySlides__prev{
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	padding: 16px;
	margin-top: -50px;
	font-weight: bold;
	font-size: 5rem;
	transition: 0.6s ease;
	border-radius: 0 3px 3px 0;
	user-select: none;
	-webkit-user-select: none;
	}
	.mySlides__next {
		right: -8%;
	  }
	.mySlides__prev{
		left: -8%;
	} 

/*=====================
    formulario contacto
========================*/
.area__contacto{
    width: 90%;
    margin: auto;    
}
    .area__tittle__contact{
        padding: 20px 0;
        font-size:3.5rem;
        text-transform: uppercase;
        text-align: center;
    }
    .area__text__contact{
        font-size: 1.5rem;
        padding-bottom: 10px;
    }
.area__contacto__form{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}    
    .aw-medium-l,
    .aw-medium-r{
        width: 100%;
        height: 30px;  
        margin-bottom: 10px;  
    }
    .form__imput{
        width: 100%;
        height: 100%;
        font-size: 1.5rem;
        padding: 5px; 
        border:2px solid var(--orange);
        border-radius: 5px;
    }
    .textarea{
        width: 100%;
        height: 200px;
        margin-bottom: 20px;
    }
    .form__buttom{
        width: 100%;
        height: 30px;
        margin: 10px 0;
        font-size: 1.5rem;
        text-transform: uppercase;
        border:2px solid var(--orange);
        border-radius: 5px;
        background:var(--orange);
        color: var(--white);
    }
    .form__buttom:hover{
        color: var(--orange);
        background: none;
    }
   
.area__contact__info{
    width: 90%;
    margin:auto;
    border-radius: 10px;
    padding: 10px;
}
/*=====================
    Lista contactos
========================*/
.area__lista-contacto{
    width: 90%;
    margin: auto;
    padding: 10px 0;
}
.contact__item{
    width: 250px;
    height: 180px;
    margin:10px 0;
    padding: 10px;
    border: 2px solid var(--orange);
    border-radius:5px;
}
    .contact__tittle{
        font-size: 1.5rem;
        font-weight: 500;
        text-transform: uppercase;
        padding-bottom: 5px;
        border-bottom: 2px solid var(--orange);
    }
    .contact__name{
        font-size: 1.5rem;
        padding-top: 10px;    
    }
    .contact__charge{
        font-size: 1.3rem;
        font-weight: 500;
        padding-bottom: 10px;
    }
    .contact__text{
        font-size: 1.3rem;
        padding-bottom: 5px;
    }

    /* color form imput */
    .border-bottom__yellow{
        border-bottom: 2px solid var(--yellow);
    }
.footer__text{
    font-size: 1rem;
    text-align: center;
}
/*=====================
    icon fixed
========================*/
.icon__fixed{
    position: fixed;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    bottom: 40px;
    right: 40px;
    background-color: #64B161;
    text-align: center;
    font-size: 30px;
    z-index: 100; 
    box-shadow: 0px  3px  5px rgba(0, 0, 0, .5);
}
 .icon__fixed__img{
     width: 60px;
     height: 60px;
     padding: 15px;
 }

/*=====================
    condicionantes
========================*/
.text-center{
    text-align: center;
}
.view-vh{
    width: 80%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: auto;
    color: var(--naranja);
}
.pos{
    z-index: 0;
}