/*
Theme Name: RedXtreme
Author: Jose Ramirez
Author Uri: https://redxtremeweb.net/
Version: 1.0
*/

@import url('https://fonts.googleapis.com/css2?family=Boogaloo&family=Montserrat:ital,wght@0,300;0,400;0,600;0,800;1,300;1,400;1,600;1,800&display=swap');

/*- FONTS -*/
/* Boogaloo */
.boo{font-family: 'Boogaloo', cursive;}
/* Montserrat */
.lat-thin{font-family: 'Montserrat', sans-serif; font-weight: 300;}
.lat-thin-i{font-family: 'Montserrat', sans-serif; font-weight: 300;font-style: italic;}
.lat-reg{font-family: 'Montserrat', sans-serif; font-weight: 400;}
.lat-reg-i{font-family: 'Montserrat', sans-serif; font-weight: 400;font-style: italic;}
.lat-bold{font-family: 'Montserrat', sans-serif; font-weight: 600;}
.lat-bold-i{font-family: 'Montserrat', sans-serif; font-weight: 600;font-style: italic;}
.lat-black{font-family: 'Montserrat', sans-serif; font-weight: 800;}
.lat-black-i{font-family: 'Montserrat', sans-serif; font-weight: 800;font-style: italic;}

/*- FONT SIZE -*/
.fz-12{font-size: 12px;}
.fz-14{font-size: 14px;}
.fz-16{font-size: 16px;}
.fz-18{font-size: 18px;}
.fz-20{font-size: 20px;}
.fz-22{font-size: 22px;}
.fz-25{font-size: 25px;}
.fz-30{font-size: 30px;}
.fz-35{font-size: 35px;}
.fz-40{font-size: 40px;}
.fz-50{font-size: 50px;}
.fz-60{font-size: 60px;}

/*- COLORS -*/
/* Blanco */
.col-blanco{color: #ffffff;}
.back-blanco{background-color: #ffffff;}
button.back-blanco:focus{background-color: #ffffff;}
/* Negro */
.col-negro{color: #000000;}
.back-negro{background-color: #000000;}
button.back-negro:focus{background-color: #000000;}
/* Verde */
.col-azul{color: #59a61a;}
.back-azul{background-color: #59a61a;}
button.back-azul:focus{background-color: #59a61a;}

body{overflow-x: hidden;}

/* PLACE HOLDER *
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #000000; font-family: 'Roboto', sans-serif; font-weight: 600; }  /* WebKit *
input::-moz-placeholder, textarea::-moz-placeholder { color: #000000; font-family: 'Roboto', sans-serif; font-weight: 600; } /* Firefox 19+ */

.btn-rx{text-decoration: none;background: linear-gradient(to bottom, rgba(249,252,154,1) 0%, rgba(81,162,19,1) 100%);border-radius: 5px;padding: 6px 10px;text-shadow: 1px 1px 2px rgba(0,0,0,0.7);}

/*- HEADER -*/
header{width: 100%;z-index: 10;box-shadow: 0 0 10px rgba(0,0,0,0.8);}
header nav figure{}
header nav figure img{width: 55%;}
header nav ul{}
header nav ul li{}
header nav ul li a{}
header nav ul li:last-child{background: linear-gradient(to bottom, rgba(249,252,154,1) 0%, rgba(81,162,19,1) 100%);border-radius: 5px;}
header nav ul li:last-child a{text-shadow: 1px 1px 2px rgba(0,0,0,0.9);}

#separador{height: 65px;}

/*- Banner -*/
#banner{background-position: center;background-repeat: no-repeat;background-size: contain;padding-bottom: 35px;}
#banner .col-12 h1{margin-top: 30px;}
#banner .col-12 article{}
#banner .col-12 article a{}
#banner .col-12 figure{}
#banner .col-12 figure img{width: 80%;}

/*- Nosotros -*/
#nosotros{background-repeat: no-repeat;background-size: cover;background-position: center;padding-bottom: 15px;}
#nosotros .col-12 h2{margin: 40px 0 60px 0;}
#nosotros .col-12 h2:after{content: '';position: absolute;bottom: -5px;left: 43%;width: 14%;height: 3px;background-color: #59a61a;border-radius: 25px;}
#nosotros .col-12 h4{padding: 0 10%;margin-bottom: 25px;}
#nosotros .col-12 h4:after{content: '';position: absolute;bottom: -9px;left: 10%;width: 25%;height: 3px;background-color: #59a61a;border-radius: 25px;}
#nosotros .col-12 article{padding: 0 10%;}
#nosotros .col-12 div{padding: 25px 25% 10px 25%;margin-bottom: 80px;}
#nosotros .col-12 figure{background-color: #b7b7b7;padding: 10px 4%;border-radius: 5px;box-shadow: 0 0 8px rgba(0,0,0,0.7);}
#nosotros .col-12 figure img{/*! width: 50%; */border-radius: 5px;}

/*- Servicios -*/
#servicios{background-repeat: no-repeat;background-position: center;background-attachment: fixed;background-size: cover;padding-bottom: 50px;}
#servicios .position-absolute{width: 100%;height: 100%;top: 0;left: 0;background-color: rgba(0,0,0,0.5);}
#servicios .row .col-12 h3{margin: 70px 0;letter-spacing: 6px;}
#servicios .row .col-12 h3:after{content: '';position: absolute;bottom: -5px;left: 45%;width: 10%;height: 3px;background-color: #59a61a;border-radius: 25px;}
#servicios .row .col-12 .owl-carousel{position: relative;}
#servicios .row .col-12 .owl-carousel .item{padding: 0 15% 0 15%;}
#servicios .row .col-12 .owl-carousel .item aside{background-color: #fff;text-align: center;padding-bottom: 20px !important;border-radius: 10px;overflow: hidden;}
#servicios .row .col-12 .owl-carousel .item aside figure{}
#servicios .row .col-12 .owl-carousel .item aside figure img{}
#servicios .row .col-12 .owl-carousel .item aside h4{padding: 5% 5% 0 5%;margin: 0;}
#servicios .row .col-12 .owl-carousel .item aside article{padding: 4%;}
#servicios .row .col-12 .owl-carousel .owl-nav{}
#servicios .row .col-12 .owl-carousel .owl-nav .owl-prev,
#servicios .row .col-12 .owl-carousel .owl-nav .owl-next{position: absolute;font-size: 30px;color: #fff;}
#servicios .row .col-12 .owl-carousel .owl-nav .owl-prev{top: 45%;left: -1%;}
#servicios .row .col-12 .owl-carousel .owl-nav .owl-next{top: 45%;right: -1%;}

/*- Simulador -*/
#simulador{background-position: center;background-size: cover;background-repeat: no-repeat;padding-bottom: 70px;}
#simulador .row .col-12 h3{margin: 60px 0;text-shadow: 1px 1px 2px rgba(0,0,0,0.7);}
#simulador .row .col-12:first-child aside{background-color: rgba(255,255,255,0.9);padding: 5%;margin: 0 10% 25px 10%;border-radius: 10px;box-shadow: 0 0 8px rgba(0, 0, 0, 0.32);}
#simulador .row .col-12:first-child aside h5{}
#simulador .row .col-12:first-child aside select{}
#simulador .row .col-12:first-child aside div{}
#simulador .row .col-12:first-child aside div nav{}
#simulador .row .col-12:first-child aside div nav button{}
#simulador .row .col-12:first-child aside div .tab-pane{}
#simulador .row .col-12:first-child aside div .tab-pane .row .col-12 input{}
#simulador .row .col-12:first-child aside div .tab-pane .row .col-12.lat-bold{}
#simulador .row .col-12:last-child aside{background-color: rgba(255,255,255,0.9);padding: 5%;margin: 0 10% 25px 10%;border-radius: 10px;box-shadow: 0 0 8px rgba(0, 0, 0, 0.32);}
#simulador .row .col-12:last-child aside .row .col-12 h5{}
#simulador .row .col-12 .btn-rx{position: relative;top: 25px;border: solid 1px #000;}

/*- Experiencia -*/
#experiencia{background-position: center;background-size: cover;background-repeat: no-repeat;padding-bottom: 50px;}
#experiencia .row .col-12 h2{margin: 50px 0 60px 0;letter-spacing: 2px;}
#experiencia .row .col-12 h2:after{content: '';position: absolute;bottom: -5px;left: 42%;width: 16%;height: 3px;background-color: #59a61a;border-radius: 25px;}
#experiencia .row .col-12 aside{background-color: #ffffff;box-shadow: 0 0 10px rgba(0,0,0,.5);border-radius: 10px;padding: 5%;margin: 10%;}
#experiencia .row .col-12 aside h5{}
#experiencia .row .col-12 aside h5::after{content: '';position: absolute;bottom: -5px;left: 0;width: 35%;height: 3px;background-color: #59a61a;}
#experiencia .row .col-12 aside figure{text-align: center;}
#experiencia .row .col-12 aside figure img{width: 25%;}
#experiencia .row .col-12 article{}

/*- Portafolio -*/
#portafolio{}
#portafolio .row .col-12 h2{margin: 50px 0 60px 0;letter-spacing: 2px;}
#portafolio .row .col-12 h2:after{content: '';position: absolute;bottom: -5px;left: 46%;width: 8%;height: 3px;background-color: #59a61a;border-radius: 25px;}
#portafolio .row .col-6 figure{overflow: hidden;border-top: 1px solid #6e6e6e;border-right: 1px solid #6e6e6e;}
#portafolio .row:last-child .col-6 figure{border-bottom: 1px solid #6e6e6e;}
#portafolio .row .col-6 figure img{}
#portafolio .row .col-6 figure figcaption{top: 0;right: 0;width: 100%;height: 100%;background: linear-gradient(to right, rgba(81,162,19,0) 0%, rgba(81,162,19,1) 33%, rgba(81,162,19,1) 100%);transform: translateY(-105%);transition: all cubic-bezier(.68,-0.55,.27,1.55) 0.3s;}
#portafolio .row .col-6 figure:hover figcaption{transform: translateY(0%);}
#portafolio .row .col-6 figure figcaption aside{}
#portafolio .row .col-6 figure figcaption aside h5{margin: 80px 0 0 40%;padding-right: 5%;}
#portafolio .row .col-6 figure figcaption aside span{display: block;margin: 10px 0 0 40%;padding-right: 5%;word-wrap: break-word;}
#portafolio .row .col-6 figure figcaption aside div{font-size: 20px;position: relative;top: 4px;padding: 10px 10%;}
#portafolio .row .col-6 figure figcaption aside div a{text-decoration: none;background-color: #ffffff;border-radius: 5px;padding: 1%;}
#portafolio .row .col-6 figure figcaption aside div a i{font-size: 20px;position: relative;top: 4px;}

/*- Creativos -*/
#creativos{padding-bottom: 49px;background-repeat: no-repeat;background-size: cover;background-position: center;}
#creativos .position-absolute{background: linear-gradient(to right, rgba(81,162,19,0) 0%, rgba(81,162,19,1) 33%, rgba(81,162,19,1) 100%);width: 100%;height: 100%;top: 0;}
#creativos .container{}
#creativos .row .col-12 figure{margin-top: 40px;}
#creativos .row .col-12 figure img{width: 13%;}
#creativos .row .col-12 h4{margin-top: 30px;margin-bottom: 40px;}
#creativos .row .col-12 article{padding-left: 30%;margin-bottom: 40px;}
#creativos .row .col-12 a{border: solid 1px #000;}

/*- Footer -*/
footer{background: linear-gradient(to bottom, rgba(249,252,154,1) 0%, rgba(81,162,19,1) 100%);}
footer .row .col-12 h2{margin: 50px 0;letter-spacing: 5px;}
footer .row .col-12:first-child aside{}
footer .row .col-12:first-child aside i{font-size: 70px;margin-bottom: 5px;}
footer .row .col-12:first-child aside a{text-decoration: none;position: relative;top: 5px;letter-spacing: 3px;}
footer .row .col-12:nth-child(2) aside{position: relative;}
footer .row .col-12:nth-child(2) aside:before{content: '';position: absolute;top: 0;left: 0;width: 2px;height: 100%;background-color: #fff;}
footer .row .col-12:nth-child(2) aside:after{content: '';position: absolute;top: 0;right: 0;width: 2px;height: 100%;background-color: #fff;}
footer .row .col-12:nth-child(2) aside i{font-size: 70px;margin-bottom: 5px;}
footer .row .col-12:nth-child(2) aside a{text-decoration: none;position: relative;top: 5px;letter-spacing: 2px;}
footer .row .col-12:last-child aside{}
footer .row .col-12:last-child aside p{letter-spacing: 4px;padding-bottom: 10px;}
footer .row .col-12:last-child aside a{color: #fff;text-decoration: none;letter-spacing: 10px;}
#author{position: relative;margin-top: 50px;padding-bottom: 20px;padding-top: 20px;}
#author:before{content: '';position: absolute;top: 0;left: 30%;width: 40%;background-color: #ffffff;height: 2px;}

/* Media Querys */
@media(min-width: 1390px) {

}

@media(max-width:767px){
    header nav figure img{margin-left: 30%;}
    button.navbar-toggler:focus{box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.31);}
    header nav ul{padding-top: 10px;}
    header nav ul li{border-top: solid 1px #cecece;}
    header nav ul li a{padding: .5rem 1rem !important;}

    #banner .col-12 figure img{margin-top: 40px;}

    #nosotros .col-12 h2:after{left: 30%;width: 40%;}
    #nosotros .col-12 h4{padding: 0 0;}
    #nosotros .col-12 h4:after{left: 0%;width: 40%;}
    #nosotros .col-12 article{padding: 0;}
    #nosotros .col-12 div{padding: 25px 10% 10px 10%;margin-bottom: 30px;}

    #servicios .row .col-12 h3{margin: 30px 0;}
    #servicios .row .col-12 h3:after{left: 32%;width: 36%;}

    #experiencia .row .col-12 h2{margin: 40px 0 20px 0;}
    #experiencia .row .col-12 h2:after{left: 20%;width: 60%;}
    #experiencia .row .col-12 aside h5::after{width: 45%;}
    #experiencia .row .col-12 aside figure img{margin-top: 15px;width: 40%;}

    #portafolio .row .col-12 h2{margin: 50px 0 40px 0;}
    #portafolio .row .col-12 h2:after{left: 34%;width: 32%;}
    #portafolio .row .col-6 figure figcaption aside h5{margin: 10px 0 0 30%;font-size: 14px;}
    #portafolio .row .col-6 figure figcaption aside span{margin: 3px 0 0 30%;font-size: 12px;}
    #portafolio .row .col-6 figure figcaption aside div{padding: 5px 10%;}

    #creativos .row .col-12 figure img{width: 30%;}
    #creativos .row .col-12 h4{font-size: 22px;}
    #creativos .row .col-12 article{font-size: 12px;}
    #creativos .row .col-12 a{font-size: 12px;}

    footer .row .col-12 h2{margin: 30px 0;}
    footer .row .col-12:nth-child(2) aside{margin-bottom: 50px;margin-top: 45px;}
    footer .row .col-12:nth-child(2) aside:before{top: -15px;width: 88%;height: 2px;left: 6%;}
    footer .row .col-12:nth-child(2) aside:after{top: 125%;width: 88%;height: 2px;left: 6%;}
    #author{padding: 20px 17%;}
    #author:before{left: 15%;width: 70%;}
}