/*
Theme Name: Transportes y Servicios Navarro Child
Description: transportesyserviciosnavarro
Author: transportesyserviciosnavarro
Template: transportesyserviciosnavarro
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
.button.facebook:not(.is-outline), .button.facebook:hover {
    color: #153c8a !important;
}
.button.instagram:not(.is-outline), .button.instagram:hover {
    color: #153c8a !important;
}
body {
    overflow-x:hidden;
}
.forminator-ui#forminator-module-23.forminator-design--default .forminator-input, .forminator-ui#forminator-module-23.forminator-design--default .forminator-input:hover, .forminator-ui#forminator-module-23.forminator-design--default .forminator-input:focus, .forminator-ui#forminator-module-23.forminator-design--default .forminator-input:active {
    border-color: #777771!important;
    background-color: #ffffff!important;
    color: #000000!important;
    font-size: 14px!important;
    border-radius: 10px!important;
}
.forminator-ui.forminator-custom-form:not(.forminator-size--small)[data-grid=open] .forminator-row:not(:last-child) {
    margin-bottom: 10px!important;
}
.forminator-ui#forminator-module-23.forminator-design--default .forminator-button-submit {
    background-color: #153c8a!important;
    color: #FFFFFF!important;
    border-radius: 10px!important;
    padding-left: 20px!important;
    padding-right: 20px!important;
    text-transform: inherit!important;
    font-weight: 700!important;
}
.inicio .col-02:before{
	position: absolute;
	z-index: 0;
	content: "";
    width: 550px;
    height: 550px;
    top: -20px;
    left: 50%;
	transform: translate(-50%,0);
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	background-image: url(https://www.tysna.net/wp-content/uploads/2022/06/sombra.png);
}


#forminator-module-23{
    border-radius: 20px!important;
    border: 2px solid #000!important;
    padding: 20px 20px 0px 20px!important;
}

.inicio{
	padding-top: 20px!important;
	padding-bottom: 100px!important;
}
.button span {
    font-family: "Oswald", sans-serif;
}
.nosotros{
    padding-bottom: 20px!important;
}
.valores .col-01,.valores .col-02,.valores .col-03,.valores .col-04,.valores .col-05{
    background-color: #153c8a;
    padding: 80px 120px 40px 40px;
    border-radius: 10px;
    height: 420px;
}
.valores .col-01 .col-inner{
    padding-top: 20%;
}
.valores .col-02 .col-inner{
    padding-top: 10%;
}
.valores .col-03 .col-inner{
    padding-top: 15%;
}
.valores .col-04 .col-inner{
    padding-top: 15%;
}
.valores .col-01:before {
    position: absolute;
    z-index: 2;
    content: "01";
    font-size: 120px;
    font-weight: bold;
    top: -35px;
    left: 50px;
    color: hsl(0deg 0% 100% / 20%);
}
.valores .col-02:before {
    position: absolute;
    z-index: 2;
    content: "02";
    font-size: 120px;
    font-weight: bold;
    top: -35px;
    left: 50px;
    color: hsl(0deg 0% 100% / 20%);
}
.valores .col-03:before {
    position: absolute;
    z-index: 2;
    content: "03";
    font-size: 120px;
    font-weight: bold;
    top: -35px;
    left: 50px;
    color: hsl(0deg 0% 100% / 20%);
}
.valores .col-04:before {
    position: absolute;
    z-index: 2;
    content: "04";
    font-size: 120px;
    font-weight: bold;
    top: -35px;
    left: 50px;
    color: hsl(0deg 0% 100% / 20%);
}
.valores .col-05:before {
    position: absolute;
    z-index: 2;
    content: "05";
    font-size: 120px;
    font-weight: bold;
    top: -35px;
    left: 50px;
    color: hsl(0deg 0% 100% / 20%);
}
.valores .image-cover {
    border-radius: 10px;
}
.valores .img-col{
    margin-left: -80px;
    background-color: #fff;
    padding: 20px 20px 0px 20px;
    border-radius: 10px;
}
.section-title b {
    height: 0px;
}
.valores p{
    margin-bottom: 0;
}
.section-title::after {
    position: absolute;
    left: 50%;
    bottom: -20px;
    content: "";
    height: 2px;
    width: 60px;
    background: #153c8a;
    margin-left: -25px;
}
.section-title::before {
    position: absolute;
    left: 50%;
    bottom: -20px;
    content: "";
    height: 2px;
    width: 15px;
    background: #153c8a;
    margin-left: -45px;
}
.valores{
    padding-top: 40px!important;
    padding-bottom: 140px!important;
}
.servicios .caja .icon-box-center .icon-box-img {
    margin: 0 auto 0em;
}
.servicios .caja .icon-box p {
    color: #fff;
}
.servicios .caja .icon-box {
    background-color: #ecf6f940;
    border-radius: 10px;
    padding: 5px;
        height: 175px;
}
.servicios .icon-box{
    background-color: #fff;
    border-radius: 10px;
    padding: 5px;
}
.servicios .icon-box p{
    color: #153c8a;
}
.servicios{
    padding-bottom: 80px!important;
}
.nav-spacing-xlarge>li {
    margin: 0 20px;
}
.nav>li>a {
    font-size: .9em;
}
.nav-divided>li+li>a:after {
    border-left: 1px solid rgb(21 60 138);
}
@media only screen and (max-width: 1030px) {
	.servicios .caja .icon-box {
	    height: 225px;
	}
	.valores .col-01, .valores .col-02, .valores .col-03, .valores .col-04, .valores .col-05 {
	    height: 480px;
	}
}
@media only screen and (max-width: 930px) {

	.valores .col-01, .valores .col-02, .valores .col-03, .valores .col-04, .valores .col-05 {
	    height: 540px;
	    padding: 80px 75px 40px 40px;
	}
}

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
	.inicio .col-02:before {
	    width: 450px;
	    height: 450px;
	}

}

@media only screen and (max-width: 767px) {

	.valores .small-6 {
	    max-width: 100%!important;
	    -ms-flex-preferred-size: 100%!important;
	    flex-basis: 100%!important;
	}
	.valores .img-col {
	    margin-left: 0px;
	    background-color: #fff;
	    padding: 20px 20px 0px 20px;
	    border-radius: 10px;
	}
	.valores .col-01, .valores .col-02, .valores .col-03, .valores .col-04, .valores .col-05 {
	    height: auto;
	    padding: 80px 40px 40px 40px;
	}
	.valores .col-01 .col-inner{
    	padding-top: 0%;
	}
	.valores .col-02 .col-inner{
	    padding-top: 0%;
	}
	.valores .col-03 .col-inner{
	    padding-top: 0%;
	}
	.valores .col-04 .col-inner{
	    padding-top: 0%;
	}
	.servicios .caja.medium-3 {
	    max-width: 50%;
	    -ms-flex-preferred-size: 50%;
	    flex-basis: 50%;
	}
	.servicios .caja .icon-box {
	    height: 170px;
	}
	.inicio .col-02:before {
	    width: 380px;
	    height: 380px;
	}
}
@media only screen and (max-width: 549px) {
	.nosotros .text-box.banner-layer{
		width: 90%!important;
	}
	.servicios .caja.medium-3 {
	    max-width: 100%;
	    -ms-flex-preferred-size: 100%;
	    flex-basis: 100%;
	}
	.servicios .caja .icon-box {
	    height: auto;
	}
	.inicio .col-02:before {
	    width: 440px;
	    height: 440px;
	}
}