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

html, body{
overflow-x: hidden;

}

.g-recaptcha {
                        transform: scale(0.94);
                        transform-origin: 0 0;
                       }

*{
font-family: 'Roboto', 'Arial', 'sans-serif';
}

#header {padding-left: 67px}

@-webkit-keyframes updownarrow {
  0% { -webkit-transform: translateY(0); opacity: 0.4 }
  100% { -webkit-transform: translateY(0.4em); opacity: 0.9 }
}

.arrowUpDown { 
  -webkit-animation: updownarrow 0.8s infinite alternate ease-in-out;
}


.container {
  padding: 0;
  margin-right: auto;
  margin-left: auto;
}



@media (min-width: 1200px) {
  .container {
    width: 1200px;
    width:100%;
    max-width: 1342px;
  }
}

#inputGroup-sizing-sm {width: 100px}
#imput-medidas { width: 80% }
.input-group-text {background-color: #F5F6F6; border: none}
.hoverMedidas:hover {color: #009999}

.logo-clientes {padding-left: 25px}
.login-navbar {padding-right: 15px}
.login-navbar {padding-left: 5px}

#navLink:hover {color: #009999;}
#navLink {margin-left: 38.5px}

.fw100 {font-weight:100}
.fw300 {font-weight:300}
.fw400 {font-weight:400}

.tc1 {color: #1d1d1b;}
.tc2 {color: #009999;}
.tc3 {color: #ffffff;}
.tc4 {color: #878787;}
.tc5 {color: white}
.tc6 {color: #706f6f}

.fs10 {font-size: 10px;}
.fs12 {font-size: 12px;}
.fs18 {font-size: 18px;}
.fs21 {font-size: 21px;}
.fs28 {font-size: 28px;}
.fs30 {font-size: 30px;}
.fs60 {font-size: 60px;}

.lh26 {line-height: 26px;}
.lh50 {line-height: 50px; margin-left: 4.5px}
.lh60 {line-height: 60px;}

.ls3 {letter-spacing: 3px;}

.bg-silver1 {background-color: #706f6f;}
.bg-silver2 {background-color: #F5F6F6;}
.bg-silver3 { background: linear-gradient( rgba(10, 10, 10, 0.4), rgba(10, 10, 10, 0.8) ),
                  url(img/seguimiento.jpg);
                  background-size: cover;}

.bg-servicios {background-color: rgba(0, 153, 153, .6);}
.bg-seguimiento { background: linear-gradient( rgba(10, 10, 10, 0.4), rgba(10, 10, 10, 0.8) ),
                  url(img/seguimiento.jpg);
                  background-size: cover;}


.bc1 {border-bottom: 0.5px solid #009999;}

.padding1 {padding: 0px 70px 0px 90px}
.padding2 {padding: 0px 70px 0px 90px}
.padding3 {padding: 150px 70px 120px 90px}
.padding4 {padding: 0px 70px 0px 75px}
.padding5 {padding: 80px 0px 40px 71px;}
.padding6 {padding: 0px 48px 0px 48px}
.padding7 {padding: 80px 0px 80px 71px;}
.padding8 {padding-top: 55px; padding-bottom: 140px}
.padding9 {padding-left: 150px; padding-right: 150px}
#parrafo3 {padding-bottom: 30px}

#camaraAsia {display: inline}

#accordionServicios {margin-top: -30px;}
#accordionItemServicios {background-color: rgba(0, 0, 0, 0); border: none;}
#accordionHeaderServicios h2 {width: 17.40%; display: inline-flex;}
#accordionHeaderServicios h2 button {text-align: center;}
#accordionButtonServicios {letter-spacing: 3px;}
#accordionButtonServicios:hover {color: #009999;}
#accordionButtonServicios::after {display: none; }
#accordionButtonServicios:not(.collapsed) {background-color: #ffffff;  color: #009999; box-shadow: none;}
#accordionButtonServicios:focus {background-color: #ffffff; border-color: #ffffff;     box-shadow: none;     border-color: rgba(0,0,0,.125);}
#accordionBodyServicios {width: 88.1%; margin-top: 50px; margin-bottom: 50px; background-color: white;}
#collapseOne, #collapseTwo, #collapseThree, #collapseFour, #collapseFive {margin-top: -30px}

.titulo-servicio {margin-bottom: 0; text-align: center;}
#titulo6 {margin-bottom: 48px}

#accordionContainer {width: 100%}
#accordionItemContainer {background-color: rgba(0, 0, 0, 0); border: none;}
#accordionHeaderContainer h2 {width: 100%; display: inline-flex;}
#accordionButtonContainer {padding: 5px; border-left: 2px solid #ffffff; border-radius: 0px;}
#accordionButtonContainer:hover {color: #009999; border-left: 2px solid #009999; border-radius: 0px;}
#accordionButtonContainer::after {display: none; }
#accordionButtonContainer:not(.collapsed) {background-color: #ffffff;  color: #009999; box-shadow: none;}
#accordionButtonContainer:focus {background-color: #ffffff; border-color: #ffffff;     box-shadow: none;     border-color: rgba(0,0,0,.125);}
#accordionBodyContainer {width: 100%;}

#accordionItemMedidasDeContenedores {background-color: rgba(0, 0, 0, 0); border: none; width: 96.5%;}
#accordionHeaderMedidasDeContenedores h2 {width: 17.25%; display: inline-flex;}
#accordionButtonMedidasDeContenedores {width: 35%; margin-left: 20px;padding: 0px;}
#accordionButtonMedidasDeContenedores:hover {color: #009999;}
#accordionButtonMedidasDeContenedores::after {display: none; }
#accordionButtonMedidasDeContenedores:not(.collapsed) {background-color: #ffffff;  color: #1d1d1b; box-shadow: none;}
#accordionButtonMedidasDeContenedores:focus {background-color: #ffffff; border-color: #ffffff;     box-shadow: none;     border-color: rgba(0,0,0,.125);}
#accordionButtonMedidasDeContenedores[aria-expanded="true"] {  color: #009999;
  font-weight: 300;}
.buttonContenedor:hover {color: #009999;}


.btn-outline-info {color: #1d1d1b; border-color: white; border-radius: 0px; margin-left: -20px;width: 160px; border: none;}
.btn-outline-info:hover {background-color: #009999; color: white; }
.btn-outline-info:focus {background-color: #009999; color: white; }
.btn-outline-info.active {background-color: #009999; color: white; }
.btn-outline-info.active:focus {box-shadow: 0px 0px 0px #ffffff; }

.btn-outline-info2 {color: white; width: 200px; padding: 10px}
.btn-outline-info2 {border-color: white}
.btn-outline-info2:hover {background-color: #009999; color: white; border-color: #009999}
.btn-outline-info2:focus {background-color: #009999; color: white; border-color: #009999}
.btn-outline-info2.active {background-color: #009999; color: white; border-color: #009999}
#busquedaSeguimiento {margin-top: 0px; padding-left: 10px; border-top: 0; border-left: 0; border-right: 0; border-bottom: 2px solid #878787;}
#busquedaSeguimiento:focus {background-color: #ffffff; border-color: #ffffff;     box-shadow: 0px 3px 0px 0px #009999;     }
#titulo7 {letter-spacing: 1px; padding: 40px}
#textoSeguimiento {padding: 30px}

.icon {width: 35px;}
.icon2 {width: 40px;}
.parrafoServicios {margin-bottom: 6px}

.form-label:focus {background-color: #009999; border-color: #009999;     box-shadow: 3px 3px 3px #009999;     }
.form-control {margin-top: -5px; padding: 5px; border-top: 0; border-left: 0; border-right: 0; border-bottom: 2px solid #878787; border-radius: 0px;}
.form-control:focus {background-color: #ffffff; border-color: #ffffff;     box-shadow: 0px 3px 0px 0px #009999;     }

::-webkit-input-placeholder { opacity: 1; -webkit-transition: opacity .5s; transition: opacity .5s; }  /* Chrome <=56, Safari < 10 */
:-moz-placeholder { opacity: 1; -moz-transition: opacity .5s; transition: opacity .5s; } /* FF 4-18 */
::-moz-placeholder { opacity: 1; -moz-transition: opacity .5s; transition: opacity .5s; } /* FF 19-51 */
:-ms-input-placeholder { opacity: 1; -ms-transition: opacity .5s; transition: opacity .5s; } /* IE 10+ */
::placeholder { opacity: 1; transition: opacity .5s; } /* Modern Browsers */
*:focus::-webkit-input-placeholder { opacity: 0; } /* Chrome <=56, Safari < 10 */
*:focus:-moz-placeholder { opacity: 0; } /* FF 4-18 */
*:focus::-moz-placeholder { opacity: 0; } /* FF 19-50 */
*:focus:-ms-input-placeholder { opacity: 0; } /* IE 10+ */
*:focus::placeholder { opacity: 0; } /* Modern Browsers */


.btn-form {padding: 10px 25px 10px 25px; border: 1px solid #009999; color: #009999;}
.btn-form:hover {background-color: #009999; color: white;}
.btn-form:focus {background-color: #009999; color: white;}
.btn-form.active {background-color: #009999; color: white;}

.arrow1 {position: fixed; bottom:20px; right:20px;}

.cotizacion {margin-top: 1rem; margin-bottom: 3rem}

#cardBodyCreate {width: 30%}

#section3 {margin-top: 1.5rem;}









@media (max-width: 991px) {

#language1 {display: none}

#imput-medidas { width: 75% }

.logo-clientes {padding-left: 5px}
#cardBodyCreate {width: 75%}
body { padding: 0px 10px 0px 10px}
#header {padding-left: 0px}
#navLink { margin: 0}
.arrow1 {display: none ;position: fixed; bottom:20px; right:20px;}
#video-seawolf {display: none}

#section0 {font-size: 18px; letter-spacing: 0px; line-height: 20px; text-align: center!important;}
#titulo1 {font-size: 36px; letter-spacing: 0px; line-height: 40px; text-align: center!important;}
.padding1 {padding: 70px 50px 100px 50px}

#camaraAsia {font-size: 16px; display: block}
#camaraAsia span {display: none;}
#logoCamaraAsia {width: 90px; margin-top: 10px}

#Empresa {font-size: 18px; letter-spacing: 0px; line-height: 20px;}
#section1 {font-size: 18px; letter-spacing: 0px; line-height: 20px;}
#titulo2 {font-size: 36px; padding-top: 10px; line-height: 40px}
.padding2 {padding: 80px 50px 80px 50px;}
#parrafo2 {font-size: 18px; letter-spacing: 0px; line-height: 20px}

#titulo3 {font-size: 35px;}
.padding3 {padding: 60px 40px 60px 40px; text-align: center!important;}
#parrafo3 {font-size: 18px; letter-spacing: 0px; line-height: 20px; padding-bottom: 15px; text-align: center!important;}
.icon {display: block; margin: 0 auto; padding: 5px}


#accordionHeaderServicios h2 {width: 100%; display: block;}
#accordionHeaderServicios h2 button {padding: 10px 0px 10px 38px;margin-bottom: 5px;}
#accordionHeaderServicios h2 button p {font-size: 18px; text-align: left; font-weight: 300}
#accordionServicios {margin-top: 5px;}
#accordionButtonServicios {letter-spacing: 2px;}
#accordionBodyServicios {font-size: 18px; letter-spacing: 0px; line-height: 20px; margin-top: 0; width: 95%}

#accordionButtonMedidasDeContenedores {width: 100%;}
.buttonContenedor {font-size: 18px}

#accordionHeaderContainer h2 {width: 60%; display: inline-flex;}
.btn-outline-info {text-align: left; width: 160px}
.btn-outline-info {border-color: white}
.btn-outline-info:hover {background-color: #009999; color: white;}
.btn-outline-info:focus {background-color: #009999; color: white;}
.btn-outline-info.active {background-color: #009999; color: white;}
.padding4 {padding: 0px 0px 0px 0px}


#section2 {font-size: 18px; letter-spacing: 0px; line-height: 20px;}
#collapseOne, #collapseTwo, #collapseThree, #collapseFour, #collapseFive {margin-top: 10px}
.padding5 {padding: 50px 30px 10px 30px;}


#section3 {margin-top: 15px ;font-size: 18px; letter-spacing: 0px; line-height: 20px; font-weight: 100}
#titulo4 {font-size: 36px; letter-spacing: 0px; line-height: 40px;}
.form-control {font-size: 18px; letter-spacing: 0px; line-height: 20px}
.padding6 {padding: 10px 50px 10px 50px}

#titulo5  {font-size: 34px; letter-spacing: 0px; line-height: 40px; font-weight: 300}
#parrafo4 {font-size: 16px; letter-spacing: 0px; line-height: 25px; font-weight: 200; padding-bottom: 20px}
.padding7 {padding: 40px 35px 40px 35px; }

.btn-outline-info2 {margin-top: 20px}
#busquedaSeguimiento {margin-top: 0px; padding: 12px; border-top: 0; border-left: 0; border-right: 0; border-bottom: 2px solid #878787;}
#busquedaSeguimiento:focus {background-color: #ffffff; border-color: #ffffff;     box-shadow: 0px 3px 0px 0px #009999;    }
#titulo7 {font-size: 40px; letter-spacing: 0px; line-height: 45px; padding: 20px}
.formularioSeguimiento {display: block; padding-left: 60px; padding-right: 60px; padding-bottom: 50px}
#textoSeguimiento {padding: 0px}
.padding8 {padding-top: 45px; padding-bottom: 20px}
.padding9 {padding-left: 50px; padding-right: 50px}

.cotizacion {margin-top: 0px}

.bg-image {background: linear-gradient( rgba(255, 255, 255, 1), rgba(0, 0, 0, 0.2) ),
                  url(img/paginaseawolf.jpg);
                  background-size: cover;}

.arrowUpDown {color: #1d1d1b}


.g-recaptcha {
                        transform: scale(0.88);
                        transform-origin: 0 0;
                       }

}








@media (max-width: 1200px) and (min-width: 991px) {

#header {padding-left: 0px}
.navbar-nav {font-size: 18px}

#imput-medidas { width: 100% }

#cardBodyCreate {width: 50% !important}
.padding1 {padding: 130px 100px 130px 100px; text-align: center}
.padding2 {padding: 130px 130px 130px 130px;}
.padding3 {padding: 130px 180px 130px 180px; text-align: center}
.padding6 {padding: 130px 130px 130px 130px;}
.padding7 {padding: 50px 130px 50px 130px; text-align: center}
#parrafo3 {font-size: 21px}
#navLink {margin-left: 10px}
#video-seawolf {display: none}

.bg-image {background: linear-gradient( rgba(255, 255, 255, 1), rgba(0, 0, 0, 0.2) ),
                  url(img/paginaseawolf.jpg);
                  background-size: cover;}

#accordionButtonServicios p{font-size: 16px; letter-spacing: 2px;}

.arrowUpDown {color: #1d1d1b}
}










@media (max-width: 991px) and (min-width: 767px) {

#imput-medidas { width: 100% }
.padding1 {padding: 140px 110px 140px 110px}
#cardBodyCreate {width: 50% !important}
.arrowUpDown {color: #1d1d1b}
  }


  div::-webkit-scrollbar
{
height:10px;

}
div::-webkit-scrollbar-track
{
    border-radius: 10px;
    background-color: #C1C1C1;

}
div::-webkit-scrollbar-thumb
{
    background-color: #009999;
    border-radius: 50px;


}


.pagination {justify-content: end}
.page-link {color: grey;}
.page-link:hover {color: #009999;}
.btn-info {background-color: white; color: #009999; width;}
.btn-info {border-color: #009999; padding-left: 15px; padding-right: 15px}
.btn-info:hover {background-color: #009999; color: white; border-color: #009999}
.btn-info:focus {background-color: #009999; color: white; border-color: #009999}
.btn-info.active {background-color: #009999; color: #009999; border-color: #009999}
.btn-info.visited {background-color: #009999; color: #009999; border-color: #009999}
.page-item.active .page-link {background-color: #009999; border-color: #009999};