/*
Theme Name: Todo Accidentes
Author: Jose Ramirez
Author Uri: https://2pssociety.com/
Version: 1.0
*/

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

@font-face {
    font-family: 'Stolzl';
    src: url('./fonts/Stolzl-Bold.woff2') format('woff2'),
        url('./fonts/Stolzl-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/*- FONTS -*/
/* Boogaloo */
.boo{font-family: 'Stolzl';}
/* Montserrat */
.lat-thin{font-family: 'Lato', sans-serif; font-weight: 300;}
.lat-thin-i{font-family: 'Lato', sans-serif; font-weight: 300;font-style: italic;}
.lat-reg{font-family: 'Lato', sans-serif; font-weight: 400;}
.lat-reg-i{font-family: 'Lato', sans-serif; font-weight: 400;font-style: italic;}
.lat-bold{font-family: 'Lato', sans-serif; font-weight: 600;}
.lat-bold-i{font-family: 'Lato', sans-serif; font-weight: 600;font-style: italic;}
.lat-black{font-family: 'Lato', sans-serif; font-weight: 800;}
.lat-black-i{font-family: 'Lato', 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: #e5a30e;}
.back-azul{background-color: #e5a30e;}
button.back-azul:focus{background-color: #e5a30e;}

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(252, 214, 67, 1) 0%, rgba(90, 61, 17, 1) 100%);border-radius: 5px;padding: 7px 10px 12px 10px;text-shadow: 1px 1px 2px rgba(0,0,0,0.7);}

/*- HEADER -*/
#loadPage{position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999999; background-color: #ffffff; background-image: url('https://todoaccidentesnyc.com/wp-content/uploads/2023/12/favicon.png'), url('https://todoaccidentesnyc.com/wp-content/uploads/2023/12/preload.gif'); background-repeat: no-repeat; background-position: center center;}

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: 35%;}
header nav ul{}
header nav ul li{}
header nav ul li a{}
header nav ul li:first-child > div{position: relative;top: 5px;}
header nav ul li:first-child > div > a:nth-child(1){position: relative;left: -10px;}
header nav ul li:last-child{background: linear-gradient(to bottom, rgba(252, 214, 67, 1) 0%, rgba(90, 61, 17, 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: 115px;}

/*- Banner -*/
#banner{background-position: center 0%;background-repeat: no-repeat;background-size: cover;padding-bottom: 60px;position: relative;background-attachment: fixed;}
#banner:before{content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,0.6);}
#banner .container{position: relative;}
#banner .col-12 h1{margin-top: 100px;margin-bottom: 50px;}
#banner .col-12 article{margin-bottom: 30px;text-align: justify;}
#banner .col-12 article a{}
#banner .col-12 figure{}
#banner .col-12 figure img{width: 70%;margin-top: 70px;}
#banner .offset-md-6{margin-bottom: 80px;}

/*- 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: #fcd643;border-radius: 25px;}
#nosotros .col-12 h4{padding: 0 0 0 10%;margin-bottom: 25px;}
#nosotros .col-12 h4:after{content: '';position: absolute;bottom: -9px;left: 10%;width: 25%;height: 3px;background-color: #fcd643;border-radius: 25px;}
#nosotros .col-12 article{padding: 0 0 0 10%;text-align: justify;}
#nosotros .col-12 > div{padding: 0px 20% 10px 20%;margin-bottom: 50px;}
#nosotros .col-12 figure{background-color: #fcd643;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: #fcd643;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% 7% 0 7%;text-align: justify;}
#servicios .row .col-12 .owl-carousel .item aside article p{margin: 0;}
#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%;}

/*- Experiencia -*/
#experiencia{background-position: center;background-size: cover;background-repeat: no-repeat;padding-bottom: 50px;}
#experiencia::before{content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);}
#experiencia .container{position: relative;}
#experiencia .row .col-12 h2{margin: 5% 10% 5% 10%;color: #fff;text-shadow: 0 0 8px rgba(0,0,0,0.8);}
#experiencia .row .col-12 h2:after{content: '';position: absolute;bottom: -10px;left: 24%;width: 52%;height: 3px;background-color: #fcd643;border-radius: 25px;}
#experiencia .container > .row:nth-child(2) .col-md-4 aside{margin: 7% 10% 10% 10%;}
#experiencia .row .col-md-1{}
#experiencia .row .col-md-1 div{text-align: center;padding-top: 180px;}
#experiencia .row .col-md-1 div i{color: #fff;}
#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% 4%;}
#experiencia .row .col-12 aside h5{margin-bottom: 25px;}
#experiencia .row .col-12 aside h5::after{content: '';position: absolute;bottom: -5px;left: 0;width: 35%;height: 3px;background-color: #fcd643;}
#experiencia .row .col-12 aside figure{text-align: center;}
#experiencia .row .col-md-4 aside figure img{width: 30%;margin-bottom: 12px;}
#experiencia .row .col-md-3 aside figure img{width: 35%;margin-bottom: 12px;}
#experiencia .row .col-12 article{text-align: justify;}
#experiencia .row .col-12 article p{margin: 0;}

/*- Fomulario -*/
#fomulario{}
#fomulario .row .col-12 h2{position: relative;margin: 7% 25%;}
#fomulario .row .col-12 h2:after{content: '';position: absolute;bottom: -5px;left: 24%;width: 52%;height: 3px;background-color: #fcd643;border-radius: 25px;}
#fomulario form{}
#fomulario form label{font-family: 'Lato', sans-serif; font-weight: 600;}
#fomulario form label small{color: #6e6e6e;}
#fomulario form select{font-family: 'Lato', sans-serif; font-weight: 400;margin-bottom: 30px;}
#fomulario form input[type="text"], #fomulario form input[type="email"]{font-family: 'Lato', sans-serif; font-weight: 400;margin-bottom: 30px;}
#fomulario form input[type="submit"]{background: linear-gradient(to bottom, rgba(252, 214, 67, 1) 0%, rgba(90, 61, 17, 1) 100%); border: none; padding: 3px 20px 7px 20px; border-radius: 5px; text-shadow: 1px 1px 2px rgba(0,0,0,0.9); font-family: 'Lato', sans-serif; font-weight: 600; color: #fff; text-transform: uppercase;margin-bottom: 50px;margin-top: 30px;}

/*- Footer -*/
footer{background-color: #5a3d11;}
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;}
#author a{color: #ffffff;text-decoration: none;}

/* 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;}
    header nav ul li:first-child{height: 41px;}
    header nav ul li:first-child > div{left: 0px;top: 5px;}
    header nav ul li:first-child > div > a:nth-child(1){left: 0px;}
    header nav ul li:first-child > div > a:nth-child(2){left: -15px;position: relative;}
    .navbar-light .navbar-brand{margin: 0;width: 100%;}
    .navbar-light .navbar-brand figure img{margin: 5px 0 0 0;width: 25%;}
    header nav .navbar-toggler.collapsed{margin-bottom: 5px;color: #000;}

    #banner .col-12 figure img{margin-top: 40px;width: 100%;}
    #banner{background-attachment: initial;}

    #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;line-height: 1.2;font-size: 20px;}
    #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%;}
    #experiencia .row .col-md-1 div{padding-top: 10px;}

    #fomulario .row .col-12 h2{margin: 7% 2%;}
    #fomulario form input[type="submit"]{display: block;width: 96%;margin: 0 2% 10px 2%;}
    
    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%;}
}