/* @import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700");







* {

  font-family: 'Open Sans', sans-serif;

  font-size: 100%;

} */



/* @import url("https://fonts.googleapis.com/css2?family=Squada+One&display=swap"); */

/* @import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap"); */

@import url("https://fonts.googleapis.com/css2?family=Audiowide&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@100;400;500;700&display=swap"); /*creditos y block menu*/

@import url("https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@300;400;500;600;700&display=swap"); /*body*/

@import url('https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap'); /*menu*/



* {

    font-family: 'Chakra Petch', sans-serif;

    font-size: 100%;

}



body{

    margin: 0;

    padding: 0;

    width: 100%;

}

.row{

    width: 100%;

    margin: 0;

}

.col-sm-6{

    margin: auto;

}

nav{

    height: 50px;

    /* color: rgba(13, 158, 209, 0.9); */

    /* background-color: rgba(28, 36, 41, 0.877); */

    background-color: rgba(9, 52, 131, 0.9);

    /* border-radius: 4px; */

    position: fixed;

    width: 100%;

    z-index: 100;

}

#menu{

    float: right;

    padding-right: 40px;

}

#social{

    float: right;

    padding-right: 10px;

    margin-top: 0;

}

#social li{

    padding: 0 5px 0 5px;

    margin-top: 0px;

}

nav ul{

    text-decoration: none;

}

nav ul li{

    float: left;

    text-decoration: none;

    list-style: none;

    padding: 7px 18px 0px 18px;

}

nav ul li a{

    /* color: rgba(20, 92, 126, 0.9); */

    color: rgb(255, 255, 255);

    text-decoration: none;

    font-size: 22px;

}

nav ul li a:link, a:visited, a:active {

    color: rgba(255, 255, 255);

    text-decoration: none;

}



#menu li a {

    /* font-family: 'Saira Condensed', sans-serif; */

    font-family: 'Fjalla One', sans-serif;

    display: inline-block;

    position: relative;

    /* color: rgb(19, 28, 37); */

    text-decoration: none;

}

#menu li a:after {

    content: "";

    display: block;

    margin: auto;

    height: 3px;

    width: 0px;

    transition: all .3s;

}

#menu li a:hover:after {

    width: 100%;

    background: rgb(255, 255, 255);

}

#rastreoBt {

    background: rgb(175, 2, 2);
    border-radius: 10px;
    padding: 1px 15px 1px 15px;
}

.active-link{

    /* width: 100%; */

    /* border-bottom: 3px solid white; */

    background-color: rgba(0, 0, 0, 0.2);    

}

.whatsapp{

    position: fixed;

    bottom: 40px;

    right: 20px;

    width: 70px;

    height: 70px;

    border-radius: 80px;

    background-color: rgba(9, 52, 131, 0.9);

    color: white;

    font-size: 40px;

    border: 4px solid white;

    box-shadow: 0 0 15px rgb(36, 99, 182);

    z-index: 400;

}

.whatsapp i{

    margin: 11px 0px 0px 14px;

}

.whatsapp a{

    color: white;

    text-decoration: none;

}





#toggle{

    float: left;    

    padding: 0;

    width: 50px;

    height: 50px;

    background-color: rgba(0, 0, 0, 0.1);

}

#toggle li{

    padding-left: 15px;

    padding-top: 7px;

    color: white;

    font-size: 25px;

}



.logo2{

    float: left;

    display: flex ;

    width: 170px;

    /* filter: drop-shadow(0px 0px 1px rgb(255, 255, 255)); */

}

.logo2 img{

    margin-top: 8px;

    margin-left: 40px;

    width: 100%;

}



.banner{

    color: white;

    text-align: center;

    height: 590px;

}

#banner1, #banner2, #banner3, #banner4{

    position: absolute;

    margin: 0;

    padding: 0;

    width: 100%;

    height: 590px;

}

#banner1{

    background: linear-gradient(90deg, rgba(9, 52, 131, 0.4) 20%, rgba(20, 69, 161, 0.2) 65%, rgba(255, 255, 255, 0) 100%), url(../img/banner01-min.jpg) no-repeat center center;

    background-size: cover;

    animation: fade1 32s infinite;

}

#banner2{

    background: linear-gradient(90deg, rgba(9, 52, 131, 0.4) 20%, rgba(20, 69, 161, 0.2) 65%, rgba(255, 255, 255, 0) 100%), url(../img/banner02-min.jpg) no-repeat center center;

    background-size: cover;

    width: 100%;

    animation: fade2 32s infinite;

}

#banner3{

    background: linear-gradient(90deg, rgba(9, 52, 131, 0.4) 20%, rgba(20, 69, 161, 0.2) 65%, rgba(255, 255, 255, 0) 100%), url(../img/banner03-min.jpg) no-repeat center center; /*fixed*/

    width: 100%;

    background-size: cover;

    animation: fade3 32s infinite;

}

#banner4{

    background: linear-gradient(90deg, rgba(9, 52, 131, 0.4) 20%, rgba(20, 69, 161, 0.2) 65%, rgba(255, 255, 255, 0) 100%), url(../img/banner04-min.jpg) no-repeat center center;

    width: 100%;

    background-size: cover;

    animation: fade4 32s infinite;

}

@keyframes fade1{

    0%{opacity: 1;}

    25%{opacity: 0;}

    50%{opacity: 0;}

    75%{opacity: 0;}

    100%{opacity: 1;}

}

@keyframes fade2{

    0%{opacity: 0;}

    25%{opacity: 1;}

    50%{opacity: 0;}

    75%{opacity: 0;}

    100%{opacity: 0;}

}

@keyframes fade3{

    0%{opacity: 0;}

    25%{opacity: 0;}

    50%{opacity: 1;}

    75%{opacity: 0;}

    100%{opacity: 0;}

}

@keyframes fade4{ 

    0%{opacity: 0;}

    25%{opacity: 0;}

    50%{opacity: 0;}

    75%{opacity: 1;}

    100%{opacity: 0;}

}



#izq{

    margin-top: 190px;

    width: 70%;

    filter: drop-shadow(0 0 5px white);

}

#izqm {

    margin-top: 70px;

    width: 40%;

    filter: drop-shadow(0 0 5px white);

}

#der{

    text-align: center;

    margin-top: 190px;

    text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.8);

}

#der button{

    background-color: rgba(13, 158, 209, 0);

    border: 2px solid white;

    /* border-radius: 5px; */

    /* height: 35px; */

    width: 120px;

    color: white;

    margin: 20px 0 10px 0;

}



#body h1{

    text-align: center;

}



#body p{

    text-align: justify;

}



.col6{

    /* display: block; */

    width: 100%;

    position: relative;

}

.imgR{

    width: 20%;

    float: left;

}

.tarjeta{

    width: 30%;

    float: right;

}

.circularIcon{

    width: 120px;

    height: 120px;

    /* border: 3px solid rgba(26, 147, 202, 0.808); */

    border-radius: 200px;

    /* background-color: rgba(8, 51, 99, 0.7); */

    background-color: rgba(36, 76, 151, 0.9);

    color: white;

    font-size: 50px;

    text-align: center;

    margin: 40px 0 20px 0;

}

.circularIcon i{

    margin-top: 26px;

}

#box{

    position: relative;

    /* border: 2px solid black; */

    margin-top: -40px;

    background-color: white;

    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.5);

    z-index: 90;

}

.verticalBorder{

    border: 1px solid rgba(0, 0, 0, 0.05);

    border-bottom: 0;

    /* border-right: 1px solid rgba(0, 0, 0, 0.05); */

}

.card-text{

    font-size: 20px;

}

.card-title{
    text-align: center;
    font-weight: 700;

}
.card-body{
    font-size: larger;
    text-align: justify;
}

#btn-tr{

    background-color: rgba(36, 76, 151, 0.9);

    border: 2px solid rgb(0, 0, 0);

    /* border-radius: 5px; */

    /* height: 35px; */

    width: 180px;

    color: rgb(255, 255, 255);

    margin: 20px 0 10px 0;

    /* box-shadow: 0 0 50x rgba(8, 51, 99, 0.7); */

}

#btn-casillero{

    background-color: rgba(9, 52, 131, 0.9);

    color: white;

    border-radius: 0;

    border: 0;

    width: 290px;

    height: 65px;

}

#btn-casillero:hover{

    /*transform: translateY(-4px);

    transform: translateX(4px);*/

    transform: translate(3px, -3px);

    box-shadow: -4px 4px 4px 0px rgba(17, 98, 204, 0.7);

}



.prefoot{

    margin: 10 0 0 0;

    padding: 20 0 0 0;

    position: flex;

    text-align: left;

    /* font-family: 'Oswald'; */

    /* background: #1D262D;  */

    background: rgba(3, 24, 66, 0.9);

    color: #BAC8D3;

}

.prefoot h4{

    margin-top: 25px;

}

.prefoot ul{

    /*list-style: none;*/

    padding-left: 15px;

}

.prefoot a img{

    margin-top: 20px;

}

#footer{

    min-height: 45px;

    color: white;

    background: rgba(0, 0, 0, 0.9);

    width: 100%;

    padding: 11px 7px 0 7px;

    text-align: center;

}

#footer p{

    font-family: 'Saira Condensed', sans-serif;

    font-weight: 100;

    font-size: initial;

}

#footer p a{

    font-family: 'Saira Condensed', sans-serif;

    /* font-weight: 100; */

    color: rgb(47, 136, 252);

    font-size: initial;

}

.links li a{

    color: #BAC8D3;

    /* text-decoration: none; */

}

.banner-service{

    background: linear-gradient(90deg, rgba(8, 51, 99, 0.7) 0%, rgba(14, 90, 126, 0.3) 45%, rgba(0, 0, 0, 0.1) 100%), url(../img/servicios-min.jpg) no-repeat center center fixed; /*fixed*/

    width: 100%;

    background-size: cover;

    height: 500px;

    color: white;

}

.banner-contactenos{

    background: linear-gradient(90deg, rgba(8, 51, 99, 0.7) 0%, rgba(14, 90, 126, 0.3) 45%, rgba(0, 0, 0, 0.1) 100%), url(../img/contactenos-min.jpg) no-repeat center center fixed; /*fixed*/

    width: 100%;

    background-size: cover;

    height: 500px;

    color: white;

}

.banner-registrate{

    background: linear-gradient(90deg, rgba(8, 51, 99, 0.7) 0%, rgba(14, 90, 126, 0.3) 45%, rgba(0, 0, 0, 0.1) 100%), url(../img/registrate-min.jpg) no-repeat center center fixed; /*fixed*/

    width: 100%;

    background-size: cover;

    height: 500px;

    color: white;

}

.banner-courier {

    background: linear-gradient(90deg, rgba(8, 51, 99, 0.2) 0%, rgba(14, 90, 126, 0.1) 45%, rgba(0, 0, 0, 0.1) 100%), url(../img/courier.jpg) no-repeat center center fixed;
    /*fixed*/

    width: 100%;

    background-size: cover;

    height: 300px;

    color: white;

}

.menu-block{

    padding: 20px;

    display: none;

    position: fixed;

    background: white;

    color: black;

    text-align: left;

    border-right: 1px solid rgb(30,30,30);

    border-bottom: 1px solid rgb(30,30,30);

    z-index: 101;

}

.menu-block a{

    display: block;

    margin: 10px 0px 0px 10px;

    text-decoration: none;

    color: black;

    font-family: 'Audiowide', cursive;

    font-weight: initial;

    color: rgb(0,0,0);

    font-size: 20px;

    letter-spacing: 2px;

}

.menu-block hr{

    margin: 0;

}

.menu-block p{

    font-family: 'Saira Condensed', sans-serif;

    font-weight: 100;

    margin-left: 10px;

    color: rgba(0,0,0,0.5);

}

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

    .menu-block{

        margin: 50px 0px 0px 0px;

        padding: 5px 3% 10px 3%;

        position: fixed;

        background-color: rgb(255,255,255);        

        width: 75%;

        /*height: 100%;*/

        float: left;

        text-align: left;

        overflow: auto;

        z-index: 300;

    }

}

.card-serv{

    position: relative;

    margin-top: -40px;

}

.card-pr{

    width: 100%;

    margin: 0 3px 0 3px;

    background-color: white;

    z-index: 50;

    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);

    padding: 0;

}

.card-im img{

    width: 100%;

}

.card-tx{

    margin: 10px 20px 10px 20px;

}

.slider{

    width: 100%;

}

.slide img{

    width: 100%;

}



.im-serv{    

    vertical-align: middle;

    align-items: center;

    text-align: center;

}

.im-serv img{

    margin: 80px 0 80px 0;

    width: 55%;

    border-radius: 300px;

    filter: drop-shadow(1px 1px 2px black);

}

.tx-serv{

    display: flex;

    align-items: center;

}

.tx-serv div{

    text-align: justify;

}

.tx-serv h2{

    color: rgb(9, 52, 131);

    font-weight: 700;

}

.tx-serv blockquote{

    font-size: 20px;

}

hr {
    margin-top: 0;
    margin-bottom: 0;
    
    border-top: 1px solid rgba(0, 0, 0, 0.2);
}

#imgSmFt{    
    filter: drop-shadow(1px 1px 0 white) 
    drop-shadow(-1px 1px 0 white) 
    drop-shadow(1px -1px 0 white) 
    drop-shadow(-1px -1px 0 white);
}