@font-face {
font-family: "Lato-Bold";
src: url('../font/Lato-Bold.ttf') format('truetype');
font-display: swap;
}
@font-face {
font-family: "Lato-Light";
src: url('../font/Lato-Light.ttf') format('truetype');
}
@font-face {
font-family: "Lato-Regular";
src: url('../font/Lato-Regular.ttf') format('truetype');
font-display: swap;
}
@font-face {
font-family: "Montserrat";
src: url('../font/Montserrat-Regular.ttf') format('truetype');
font-display: swap;
}
@font-face {
font-family: "Montserrat-Bold";
src: url('../font/Montserrat-Bold.ttf') format('truetype');
font-display: swap;
}
@font-face {
font-family: "Montserrat-Light";
src: url('../font/Montserrat-Light.ttf') format('truetype');
}
@font-face {
font-family: "Montserrat-SemiBold";
src: url('../font/Montserrat-SemiBold.ttf') format('truetype');
}
@font-face {
font-family: "Montserrat-Black";
src: url('../font/Montserrat-Black.ttf') format('truetype');
font-display: swap;
}
@font-face {
font-family: "FiraSans-SemiBold";
src: url('../font/FiraSans-SemiBoldItalic.ttf') format('truetype');
font-display: swap;
}
@media (max-width: 1400px) {
.ms-10{padding-left: 2% !important;}
.map .card{max-width: 14rem !important;}
/*.container-0 .radius{-moz-transform: translateX(25%) !important;}*/
}
@media (max-width: 1200px) {
/*.nav-item, .navbar-brand{padding-left: 1% !important;}*/
.map .card{max-width: 13rem !important;}
.map .card .card-title{font-size: 1.2rem !important;margin-bottom: 1% !important;}
.map .card .sub{font-size: .9rem !important;margin-bottom: 1% !important;}
.map .card .card-text{font-size: .8rem !important;margin-bottom: 1% !important;}
.map .card .text8{font-size: .6rem !important; }
.map .card .card-img-top{padding-bottom: 0 !important;}
.map .card .card-body{padding-top: 0 !important;padding-bottom: 6% !important;}
/*.container-0 .radius{-moz-transform: translateX(15%) !important;}*/
}
@media (max-width: 992px) {
#background-video{object-fit: contain !important;height: auto !important;padding-top: 0 !important}
.map .card{max-width: 10rem !important;}
.portada{min-height: 87vh !important;}
.text1{font-size: 3rem !important;}
.vector{transform: translateY(-100%) !important;}
.servicios.container-0{grid-template-columns: 0.4fr 1.6fr !important; }
.container-0.grupo{grid-template-columns: 1fr !important;grid-template-areas:"." !important }
/*.txtser{transform: translateX(-10%);}*/
.w-50.w-sm-100{width: 100% !important}
hr{width: 100% !important;}
.map .card .card-title{font-size: .7rem !important;margin-bottom: 1% !important;}
.map .card .sub{font-size: .6rem !important;margin-bottom: 1% !important;}
.map .card .card-text{font-size: .5rem !important;margin-bottom: 1% !important;}
.map .card .text8{font-size: .3rem !important; }
.map .card .card-img-top{padding-bottom: 0 !important;}
.map .card .card-body{padding-top: 0 !important;padding-bottom: 6% !important;}
.text22{font-size: 2.7rem !important;}
}
@media (max-width: 768px) {
.new{width: 90px !important; height: 50px !important;}
.fondo1{background-image: url('../images/fondo1movil.webp') !important;}
.map .card{max-width: 13rem !important;left: 2.5% !important;bottom: 2% !important;position: fixed !important;}
.pageservicios .container-0 .radius{-moz-transform: translateX(35%) !important;}
.container-0 .radius{-moz-transform: translateX(45%) !important;}
#background-video{object-fit: contain !important;height: auto !important;padding-top: 0 !important}
.scroll-map{overflow-x: scroll;}
.map{ width: 1295px !important;}
}
@media (max-width: 576px) {
.movil.container-fluid{padding-left: 10% !important;padding-right: 10% !important;}
.text1{font-size: 2.8rem !important;}
.text2{font-size: 1.5rem !important;}
.map .card{max-width: 9rem !important;}
.certificaciones{grid-template-columns: 1fr !important;grid-template-areas:"." !important }
.vector{transform: translateY(-115%) !important;}
.servicios .text10{font-size: 1rem !important;}
.servicios .boton3{font-size: .7rem !important;}
.hry, .hry.w-30,.hry.w-40{width: 100% !important;}
.portada{justify-content: center;}
.circle .img-fluid{width: 50%;}
.esp .text11{font-size: 1.5rem !important;}
.txtser{transform: translateX(-10%);/*-moz-transform: translateX(0%) !important;*/}
.container-0 .radius{transform: translateX(20%) !important; /*-moz-transform: translateX(15%) !important;*/ z-index: 1;}
.container-0 .radius img{padding: 15% }
.map .card .card-title{font-size: .7rem !important;margin-bottom: 1% !important;}
.map .card .sub{font-size: .6rem !important;margin-bottom: 1% !important;}
.map .card .card-text{font-size: .5rem !important;margin-bottom: 1% !important;}
.map .card .text8{font-size: .3rem !important; }
.map .card .card-img-top{padding-bottom: 0 !important;}
.map .card .card-body{padding-top: 0 !important;padding-bottom: 6% !important;}
/*.map .boton3.loc img{width: 75% !important;}*/
}
body{
min-height: 100vh;
}
/*.fondo1{
background: linear-gradient(180deg, #003373 17.85%, #000F21 61.13%, #003373 94.69%);
background-repeat: no-repeat;
}*/
.pt-10{
padding-top: 5%;
}
.pt-15{
padding-top: 10%;
}
.pb-10{
padding-bottom: 5%;
}
.mb-10{
margin-bottom: 10%;
}
.opacity{
opacity: .5;
}
.card{border: none !important;}
.card-footer{border-top: none !important;}
.container-fluid{
padding-left: 5% !important;
padding-right: 5% !important;
}
.navbar{
border-bottom: 5px solid transparent;
border-image: linear-gradient(90deg, rgba(233,109,2,1) 0%, rgba(220,178,89,1) 100%);
border-image-slice: 1;
padding: 1% 0 !important;
background: #fff;
/*background: conic-gradient(from 0deg at 50% 480%, #DCB259 5.090682841837406deg, rgba(233, 109, 2, 0.81) 357.2241711616516deg);*/
}
.nav-item.ms-10{
padding-left: 10%;
}
.nav-item, .navbar-brand{
display: inline-block;
}
.w-90{
width: 92%;
}
.nav-link{
font-family: "Lato-Bold";
color: #515151 !important;
font-size: .8rem;
}
.navbar-toggler{
border: none !important;
}
.navbar-toggler:focus-visible {
outline: none !important;
}
.navbar-toggler:focus{
box-shadow: none !important;
}
/*-------Boton---------------*/
.boton{
width: auto;
font-family: "Montserrat-Bold";
background: #545454;
border-radius: 30px;
color: #fff;
border: none;
padding: 1% 3%;
}
.boton2{
font-family: "Lato-Regular";
background: #003373;
color: #fff;
border: none;
padding: 1% 5%;
border-radius: 30px;
}
.boton3{
font-family: "Montserrat";
background: transparent;
color: #011023;
border: none;
}
.boton3.loc{
padding: 0 !important;
}
.boton4{
width: auto;
font-family: "Montserrat-Bold";
background: #D9D9D9;
color: #003373;
border: none;
padding: .5% 2%;
}
/*-------Width---------------*/
.w-30{
width: 30% !important;
}
.w-40{
width: 40% !important;
}
.ps-10{
padding-left: 10% !important;
}
.pe-10{
padding-right: 10% !important;
}
/*-------Linea---------------*/
hr{
width: 75%;
border: 2px solid #fff !important;
opacity: 1 !important;
}
.hry{
width: 60%;
border: 10px solid #E49C34 !important;
opacity: 1 !important;
}
.hrV{
border: none !important;
border-left: 2px solid #969696 !important;
height: 100%;
width: 2px;
margin: 0 !important;
}
/*-------Texto---------------*/
.text1{
font-family: "Montserrat-Black";
font-size: 4.5rem;
}
.text2{
font-family: "Montserrat-Light";
font-size: 2rem;
}
.text3{
font-family: "Montserrat-Bold";
font-size: 1rem;
}
.text4{
font-family: "Montserrat";
font-size: 1.25rem;
}
.text5{
font-family: "Lato-Bold";
font-size: 1.25rem;
}
.text6{
font-family: "Lato-Regular";
font-size: 1rem;
}
.text7{
font-family: "Lato-Regular";
font-size: .75rem;
}
.text8{
font-family: "Montserrat-Bold";
font-size: .8rem;
}
.text9{
font-family: "Lato-Bold";
font-size: .75rem;
}
.text10{
font-family: "Montserrat-Bold";
font-size: 1.3rem !important;
}
.text11{
font-family: "Montserrat-Bold";
font-size: 2rem !important;
}
.text12{
font-family: "Montserrat-Bold";
font-size: 1.7rem;
}
.text13{
font-family: "Montserrat-SemiBold";
font-size: 1.25rem;
}
.text14{
font-family: "Montserrat-SemiBold";
font-size: 1rem;
}
.text15{
font-family: "Montserrat";
font-size: 1rem;
}
.text16{
font-family: "Lato-Bold";
font-size: 1.5rem;
}
.text17{
font-family: "Montserrat-Black";
font-size: 2.5rem;
}
.text18{
font-family: "Montserrat";
font-size: .7rem;
}
.text19{
font-family: "Montserrat-Black";
font-size: .6rem;
}
.text-justify{
text-align: justify !important;
}
.text20{
font-family: "FiraSans-SemiBold";
font-size: 2rem;
color: #E96B00;
margin-bottom: 0;
line-height: 1;
}
.text21{
font-family: "FiraSans-SemiBold";
font-size: 1rem;
color: #DABB64;
margin-bottom: 0;
line-height: 1;
}
.text22{
font-family: "FiraSans-SemiBold";
font-size: 2.8rem;
color: #E96B00;
margin-bottom: 0;
line-height: 1;
}
.text23{
font-family: "FiraSans-SemiBold";
font-size: 1.8rem;
color: #DABB64;
margin-bottom: 0;
line-height: 1;
}
.text24{
font-family: "Montserrat-Bold";
font-size: 1.5rem;
}
/*-------Color Texto---------------*/
.txt-blue{
color: #003373 !important;
}
.txt-blue2{
color: #013373 !important;
}
.txt-blue3{
color: #011B3C !important;
}
.txt-gris{
color: #454545 !important;
}
.txt-gris2{
color: #545454 !important;
}
.txt-gris3{
color: #515151 !important;
}
.txt-orange{
color: #E96B00 !important;
}
.txt-orange2{
color: #E49C34 !important;
}
.txt-dark{
color: #111 !important;
}
.bg-grey{
background: #F0F0F0 !important;
}
.bg-grey2{
background: #E9E9E9 !important;
}
.bg-grey3{
background: #E6E6E6 !important;
}
.bg-grey4{
background: #EEEEEE !important;
}
.bg-grey5{
background: #D9D9D9 !important;
}
.bg-grey6{
background: #F3F3F3 !important;
}
.bg-blue{
background: #003373 !important;
}
.bg-orange{
background: #E49C34 !important;
}
.filter{
filter: grayscale(100%) brightness(200%);
}
/*-------------Input--------------------*/
select:focus-visible {
outline: none !important;
}
.input{
width: 100%;
border: none;
background: #fff;
color: #969696;
font-family: "Lato-Regular";
font-size: .75rem;
padding: 10px;
}
.input::placeholder{
color: #969696;
}
.input2{
width: 100%;
border: none;
background: #fff;
color: #969696;
font-family: "Lato-Regular";
font-size: .75rem;
padding: 10px;
}
.input2::placeholder{
color: #969696;
}
.input2::file-selector-button{
background: #D9D9D9;
color: #9D9D9D;
border: none;
float: right;
}
.input3{
width: 100%;
border: 1px solid #E2E1E5;
background: #FFFFFF;
color: #D2D2D2;
font-family: "Lato-Regular";
font-size: .75rem;
padding: 10px;
padding-left: 4%;
border-radius: 5px;
}
.input3::placeholder{
color: #D2D2D2;
}
.input4{
width: 100%;
border: none;
background: #EFEFEF;
color: #111;
font-family: "Montserrat";
font-size: 1rem;
padding: 10px;
padding-left: 4%;
border-radius: 10px;
min-height: 70px;
background-color: #EFEFEF;
background-image: url("../images/lupa.png");
background-repeat: no-repeat;
background-size: 20px 20px;
background-position: 90% center;
}
.input4::placeholder{
color: #111;
text-align: center;
}
/*.search__input{
width: 100%;
padding: 12px 12px;
padding-left: 8%;
background-color: transparent;
transition: transform 250ms ease-in-out;
font-size: 14px;
line-height: 18px;
color: #575756;
background-color: transparent;
background-image: url("../images/lupa.png");
background-repeat: no-repeat;
background-size: 20px 20px;
background-position: 4% center;
border-radius: 29px;
border: none;
transition: all 250ms ease-in-out;
backface-visibility: hidden;
transform-style: preserve-3d;
-webkit-box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.2);
box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.2);
}
.search__input::placeholder {
color: color(#575756 a(0.8));
text-transform: uppercase;
letter-spacing: 1.5px;
}
.search__input:focus-visible{
outline: none !important;
}*/
.input5{
width: 100%;
border: none;
border-radius: 0;
background: #F3F3F3;
color: #111;
font-family: "Montserrat";
font-size: .75rem;
padding: 10px;
}
.input5::placeholder{
color: #969696;
font-family: "Montserrat";
color: #111;
}
.form-check-input:checked{
background-color: #969696 !important;
border: 1px solid #969696 !important;
}
input:focus-visible {
outline: none !important;
}
textarea{
resize: none !important;
}
a{
text-decoration: none !important;
color: #515151 !important;
}
.text4 a{
text-decoration: underline !important;
cursor: pointer;
}
footer a:hover{
color: #EA811C !important;
}
.portada{
width: 100%;
position: relative;
background-image: url('../images/portada.png');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
min-height: 100vh;
padding-left: 10%;
padding-right: 10%;
padding-top: 100px;
display: flex;
align-items: center;
border-bottom: 5px solid transparent;
border-image: linear-gradient(90deg, rgba(1,62,173,1) 0%, rgba(1,13,70,1) 70%);
border-image-slice: 1;
}
#background-video {
position: relative;
width: 100%;
height: 80vh;
object-fit: cover;
padding-top: 100px;
border-bottom: 5px solid transparent;
border-image: linear-gradient(90deg, rgba(1,62,173,1) 0%, rgba(1,13,70,1) 70%);
border-image-slice: 1;
}
.circle{
width: 50%;
background-image: url('../images/circle.png');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
aspect-ratio: 1/1;
margin-bottom: 10%;
display: flex;
align-items: center;
}
.container-0 {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
gap: 0px 0px;
grid-auto-flow: row;
grid-template-areas:
". .";
}
.txtser{
text-align: end;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
background: #EA811C;
}
.txtser .text10, .txtser .boton3{
z-index: 1;
position: relative;
}
.txtser .boton3{
text-wrap: nowrap;
}
.container-0 .radius{
border-radius: 50%;
aspect-ratio: 1/1;
background: #E49C34;
display: flex;
align-items: center;
justify-content: center;
transform: translateX(50%);
/*-moz-transform: translateX(30%);*/
height: 100%;
}
.pageservicios .container-0 .radius{
-moz-transform: translateX(45%);
}
.servicios.container-0 {
grid-template-columns: 0.5fr 1.5fr;
}
/*----------Mapa-------------*/
.map{
width: 100%;
aspect-ratio: 2/1;
position: relative;
background-image: url('../images/mapa.webp');
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
border-radius: 25px;
}
.map .card{
position: absolute;
/*transform: translate(10%,90%);*/
left: 2%;
bottom: 3%;
border-radius: 20px;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
/*min-height: 350px;*/
}
.map .card .card-img-top{
padding: 5%;
}
.map #tijuana{position: absolute; left: 8%; top: 4%; /*transform: translate(195%,95%)*/}/*640,270*/
.map #mexicali{position: absolute; left: 12%; top: 1%;/*transform: translate(915%,450%)*/}/*475,1415*/
.map #calexico{position: absolute; left: 13%; top: -1%;/*transform: translate(915%,450%)*/}/*475,1415*/
.map #sandiego{position: absolute; left: 7%; top: -1%;/*transform: translate(325%,85%)}/*770,230*/
/*.map #sandiego{position: absolute; left: 6%; top: -2%;/*transform: translate(325%,85%)*/}/*770,230*/
.map #paso{position: absolute; left: 37%; top: 5%;/*transform: translate(445%,140%)*/}/*1430,440*/
.map #juarez{position: absolute; left: 36%; top: 8%;/*transform: translate(320%,155%)*/}/*1300,465*/
.map #piedras{position: absolute; left: 54.2%; top: 23%;/*transform: translate(355%,200%)*/}/*1490,615*/
.map #ramos{position: absolute; left: 51.3%; top: 44.5%;/*transform: translate(195%,255%)*/}/*1295,715*/
.map #colombia{position: absolute; left: 53.5%; top: 27%;/*transform: translate(185%,230%)*/}/*1340,670*/
.map #monterrey{position: absolute; left: 53.8%; top: 41.5%;/*transform: translate(30%,305%)*/}/*1180,800*/
.map #laredo{position: absolute; left: 58%; top: 30%;/*transform: translate(-25%,280%)*/}/*1185,735*/
.map #nuevolaredo{position: absolute; left: 56.5%; top: 33%;/*transform: translate(-150%,305%)*/}/*1045,780*/
.map #tamp{position: absolute; left: 61.5%; top: 59.5%;/*transform: translate(-265%,370%)*/}/*1010,990*/
.map #cdmx{position: absolute; left: 58.3%; top: 74.5%;/*transform: translate(-350%,540%)*/}/*850,1370*/
.map #gdl{position: absolute; left: 46%; top: 68%;/*transform: translate(-655%,490%)*/}/*385,1280*/
.map #lazaro{position: absolute; left: 49.5%; top: 82%;/*transform: translate(-745%,560%)*/}/*280,1435*/
.map #manzanillo{position: absolute; left: 44.8%; top: 76%;/*transform: translate(-895%,525%)*/}/*105,1380*/
.map #queretaro{position: absolute; left: 55%; top: 69%;/*transform: translate(-850%,500%)*/}/*330,1272*/
.map #veracruz{position: absolute; left: 66.5%; top: 76%;/*transform: translate(915%,450%)*/}/*475,1415*/
.vector{
transform: translateY(-85%)
}
.certificaciones { display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
gap: 50px 50px;
grid-auto-flow: row;
grid-template-areas:
". ."
". ."
". ."
". ."
". ."
". ."
". .";
}
.carousel-control-next, .carousel-control-prev{
opacity: 1 !important;
}
.carousel-control-next-icon{
background-image: url('../images/right.png') !important
}
.carousel-control-prev-icon{
background-image: url('../images/left.png') !important
}
.aspect{
width: 60%;
aspect-ratio: 1/1;
display: flex;
align-items: center;
justify-content: center;
}
.card.bg-orange{
padding: 10%;
}
.modal{
background-color: rgba(0, 51, 115, 0.8) !important;
}
.modal-content{
background-color: #fff !important;
border-radius: 62px !important;
}
.modal .modal-header{
border-bottom: 0 !important;
padding-bottom: 0 !important;
}
.modal .modal-footer{
border-top: 0 !important;
justify-content: flex-start !important;
}
.modal .modal-title{
font-family: "Montserrat-Bold";
font-size: 2rem !important;
}
/*.modal .modal-footer .boton{
letter-spacing: 0.25em;
}*/
.accordion-button:not(.collapsed), .accordion-button{
background-color: #D9D9D9 !important;
}
.accordion-item:first-of-type .accordion-button, .accordion-item:first-of-type,
.accordion-item:last-of-type .accordion-button.collapsed, .accordion-item:last-of-type{
border-radius: 0 !important;
}
.accordion-button:focus{
box-shadow: none !important;
border-color: transparent !important;
}
.accordion-body{
background-color: #F1EFEF;
}
.accordion-item{
border: none !important;
margin-bottom: 3%;
}
.accordion-button::after{
background-image: url('../images/down.png') !important;
}
.aspect3{
width: 100%;
aspect-ratio: 3/1;
object-fit: cover;
}
.aspect16{
width: 100%;
aspect-ratio: 16/9;
}
.active{
color: #D7A24B !important;
}
.top-5 {
top: 2% !important;
}
.end-5{
right: 6% !important;
}
.rounded.card-img-top{
border-top-left-radius: 30px !important;
border-top-right-radius: 30px !important;
}
.fondo1{
width: 100%;
position: relative;
background-image: url('../images/fondo1.webp');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
min-height: 100vh;
}
.fondo2{
width: 100%;
position: relative;
background-image: url('../images/fondo2.webp');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
min-height: 100vh;
}
.fondo3{
width: 100%;
position: relative;
background-image: url('../images/fondo3.webp');
background-repeat: no-repeat;
background-size: contain;
background-position: top right;
min-height: 100vh;
}
.splide__track--draggable{
width: 90% !important;
display: block;
margin-left: auto;
margin-right: auto;
}
.splide__pagination{
display: none !important;
}
.fondoser{
background: linear-gradient(180deg, #FFF 39%, #cacaca 100%);
background-repeat: no-repeat;
}
.border-20{
border-radius: 20px !important;
}
.box-shadow1{
-webkit-box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.5);
box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.5);
}
.box-shadow2{
-webkit-box-shadow: 20px 20px 30px 0px rgba(0,0,0,0.15);
-moz-box-shadow: 20px 20px 30px 0px rgba(0,0,0,0.15);
box-shadow: 20px 20px 30px 0px rgba(0,0,0,0.15);
}
footer .boton3:hover{
color: #EA811C !important;
}
.menu{
list-style-type: none;
margin: 0;
padding: 0;
width: 18%;
background-color: #D9D9D9;
position: fixed;
height: 100%;
overflow: auto;
}
.menu li a {
display: block;
color: #000;
padding: 8px 0px;
font-family: "Montserrat";
font-size: .8rem;
}
.menu li a.active {
background-color: #C0C0C0;
}
.contenedor{
padding: 3%;
margin-left: 18%;
min-height: 90vh;
}
.title, table{
font-family: "Montserrat-SemiBold";
font-size: 1rem;
}
table{
background-color: #fff;
}
table th{
background-color: #D9D9D9;
}
table.dataTable > thead > tr > th{
padding: 3px !important;
border-bottom: none !important;
border-right: 1px solid #F3F3F3 !important;
}
table.dataTable > thead > tr > td{
border-color: #F3F3F3 !important;
}
.new{
width: 106px;
height: 58px;
}
.nosotros{
height: 100px;
}
html, body{
scroll-behavior: smooth !important;
}
.iconmap{
display: inline-block;
width: 32px;
}
.aspect-1{
width: 100%;
aspect-ratio: 1/1;
}
.aspect-5{
width: 100%;
aspect-ratio: .5;
}
.aspect-4{
width: 100%;
aspect-ratio: 4/3;
}
.aspect4-5{
width: 100%;
aspect-ratio: 4/5;
}