@import url('https://fonts.googleapis.com/css2?family=Open+Sans');


:root{
--crabs-gray:#a7a7a7;
--crabs-black:#373737;
--crabs-green:#81aa2a;
--crabs-font:'Open Sans', sans-serif;
--dotsystems-color:#F7EC45;
--dotsystems-black:#000000;
--crabs-white:#ffffff;
}

html{
    scroll-behavior: smooth;
}

.bg-secondary-crabs{
    background-color: var(--crabs-gray);
}

.bg-primary-crabs{
    background-color: var(--crabs-black);
}

.bg-crabs-green{
  background-color: #81aa2a;
}

.cards-crabs{
    height:30rem; 
    background-color:var(--crabs-green);
}

/*.tracking-container{
  position:absolute;
  z-index:9999;
  top:42rem;
  right:7rem;
}*/
.tracking-box{
  height:16.5rem;
}

.titles{
    color:var(--crabs-green);
    font-family: var(--crabs-font);
    margin-top:0;
    padding-top:0;
    font-weight: bold!important;
}

.crabs-text-no-gutter{
    font-family: var(--crabs-font);
    font-size: 1.65rem;
    color:#373737;
}

.crabs-text{
    font-family: var(--crabs-font);
    font-size: 1.65rem;
    padding-left:1rem!important;
    color:#373737;
}

.crabs-text-faq{
  font-family: var(--crabs-font);
  font-size: 1.65rem;
  padding-left:1rem!important;
  color:var(--crabs-white);
  font-weight: bold!important;
}

@media screen and(min-width: 400px){
    .crabs-text{
        font-size: .5rem!important;
    }
}
.crabs-text-dark{
    font-family: var(--crabs-font);
    font-size: 1.75rem;
    padding-left:1rem!important;
    color:var(--crabs-black);
    font-weight: bold!important;
}

.nav-link{
    font-weight: bold!important;
    font-size: 1.65rem;
    margin-left: 2rem;
    font-family: var(--crabs-font);
    color:var(--crabs-black);
}

.col-text-crabs{
    display: flex;
    align-items: center;
}

.bg-services{
    background-image: url(../../IMG/services/bg-services.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    height:30em!important;
}

.bg-contact{
    background-image: url(../../IMG/contact/bg-contact.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

.bg-black{
    background-color: var(--dotsystems-black);
}

.dotsystems-link{
    color:var(--dotsystems-color); 
    font-weight:bold;
    transition: color .5s;
    text-decoration: none;
}

.whatsapp {
    position:fixed;
    width:60px;
    height:60px;
    bottom:40px;
    right:40px;
    background-color:#25d366;
    color:var(--crabs-white);
    border-radius:50px;
    text-align:center;
    font-size:30px;
    z-index:100;
  }
  
  .whatsapp:hover{
    color:var(--rearte-white);
    text-decoration: none;
  }
  
  .whatsapp-icon {
    margin-top:13px;
  }

/*  Fade Bs-carousel  */
.fade-carousel {
    position: relative;
    height: 100vh;
}
.fade-carousel .carousel-inner .item {
    height: 100vh;
}
.fade-carousel .carousel-indicators > li {
    margin: 0 2px;
    background-color: #f39c12;
    border-color: #f39c12;
    opacity: .7;
}
.fade-carousel .carousel-indicators > li.active {
  width: 10px;
  height: 10px;
  opacity: 1;
}

/********************************/
/*          Hero Headers        */
/********************************/
.hero {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 1px 1px 0 rgba(0,0,0,.75);
      -webkit-transform: translate3d(-50%,-50%,0);
         -moz-transform: translate3d(-50%,-50%,0);
          -ms-transform: translate3d(-50%,-50%,0);
           -o-transform: translate3d(-50%,-50%,0);
              transform: translate3d(-50%,-50%,0);
}
.hero h1 {
    font-size: 6em;    
    font-weight: bold;
    margin: 0;
    padding: 0;
}

.fade-carousel .carousel-inner .item .hero {
    opacity: 0;
    -webkit-transition: 2s all ease-in-out .1s;
       -moz-transition: 2s all ease-in-out .1s; 
        -ms-transition: 2s all ease-in-out .1s; 
         -o-transition: 2s all ease-in-out .1s; 
            transition: 2s all ease-in-out .1s; 
}
.fade-carousel .carousel-inner .item.active .hero {
    opacity: 1;
    -webkit-transition: 2s all ease-in-out .1s;
       -moz-transition: 2s all ease-in-out .1s; 
        -ms-transition: 2s all ease-in-out .1s; 
         -o-transition: 2s all ease-in-out .1s; 
            transition: 2s all ease-in-out .1s;    
}

/********************************/
/*            Overlay           */
/********************************/
.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-color: #080d15;
    opacity: .7;
}

/********************************/
/*          Custom Buttons      */
/********************************/
.btn.btn-lg {padding: 10px 40px;}
.btn.btn-hero,
.btn.btn-hero:hover,
.btn.btn-hero:focus {
    color: #f5f5f5;
    background-color: #1abc9c;
    border-color: #1abc9c;
    outline: none;
    margin: 20px auto;
}

/********************************/
/*       Slides backgrounds     */
/********************************/
.fade-carousel .slides .slide-1, 
.fade-carousel .slides .slide-2,
.fade-carousel .slides .slide-3 {
  height: 100vh;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.fade-carousel .slides .slide-1 {
  background-image: url(../../IMG/carousel/1.jpg); 
}
.fade-carousel .slides .slide-2 {
    background-image: url(../../IMG/carousel/2.jpg); 
}
.fade-carousel .slides .slide-3 {
    background-image: url(../../IMG/carousel/3.jpg); 
}

/********************************/
/*          Media Queries       */
/********************************/
@media screen and (min-width: 980px){
    .hero { width: 980px; }    
}
@media screen and (max-width: 640px){
    .hero h1 { font-size: 4em; }    
}

/* Desktops and laptops ----------- 
@media only screen  and (max-width : 1280px) and (min-width: 427px){
  .tracking-container{
    top:55rem;
  }
  }
  
   Small screens ----------- 
  @media only screen  and (max-width : 426px) {
   Styles 
  .tracking-container{
    top:62rem;
    right:-3rem;
  }
  .tracking-box-mobile{
    display: none;
  }
  .tracking-box{
    height:fit-content
  }
  }/*

/*social-buttons dotSystems*/

.social-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: -10px;
  }
  .social-buttons__button {
    margin: 10px 5px 0;
  }
  
  .social-button {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    outline: none;
    width: 70px;
    height: 70px;
    text-decoration: none;
  }
  .social-button__inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    border-radius: 100%;
    background: #fff;
    text-align: center;
  }
  .social-button i,
  .social-button svg {
    position: relative;
    z-index: 1;
    transition: 0.3s;
  }
  .social-button i {
    font-size: 28px;
  }
  .social-button svg {
    height: 40%;
    width: 40%;
  }
  .social-button::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    display: block;
    width: 0;
    height: 0;
    border-radius: 100%;
    transition: 0.3s;
  }
  .social-button:focus, .social-button:hover {
    color: #fff;
  }
  .social-button:focus::after, .social-button:hover::after {
    width: 100%;
    height: 100%;
    margin-left: -50%;
  }
  .social-button--mail {
    color: #0072c6;
  }
  .social-button--mail::after {
    background: #0072c6;
  }
  .social-button--facebook {
    color: #3b5999;
  }
  .social-button--facebook::after {
    background: #3b5999;
  }
  .social-button--linkedin {
    color: #0077b5;
  }
  .social-button--linkedin::after {
    background: #0077b5;
  }
  .social-button--github {
    color: #6e5494;
  }
  .social-button--github::after {
    background: #6e5494;
  }
  .social-button--codepen {
    color: #212121;
  }
  .social-button--codepen::after {
    background: #212121;
  }
  .social-button--steam {
    color: #7da10e;
  }
  .social-button--steam::after {
    background: #7da10e;
  }
  .social-button--snapchat {
    color: #eec900;
  }
  .social-button--snapchat::after {
    background: #eec900;
  }
  .social-button--twitter {
    color: #55acee;
  }
  .social-button--twitter::after {
    background: #55acee;
  }
  .social-button--instagram {
    color: #e4405f;
  }
  .social-button--instagram::after {
    background: #e4405f;
  }
  .social-button--youtube {
    color: #FF0000;
  }
  .social-button--youtube::after {
    background: #FF0000;
  }


  #accordion1 li.panel{
    margin-bottom: 0px;
}


code {
  font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace; 
  margin: 0 0.1em;
  background: #1B2938;
  padding: 0 0.5em 0.2em;
}

img {
  float: left;
  margin: 0 1em 0 0;
}

p {
  margin: 0 0 1.5em 0; 
}

.accordion {
  display:block;
  position: relative;
  width: 500px;
  margin: 10px auto;
  height: auto;
  box-shadow: 0 2px 5px rgba(0,0,0,.25);
}

.accordion > ul {
  display: block;
  list-style: none;
  padding :0;
  margin: 0;
}

.accordion > ul > li {
  display: block;
  position: relative;
  margin-bottom: -1px;
  overflow: hidden;
  color: var(--crabs-black);;
  background: #fafafa;
  border: 1px solid #D1D1D1;
}

.accordion > ul > li:first-child {
  border-radius: 0.3em 0.3em 0 0;
}

.accordion > ul > li:last-child {
  border-radius: 0 0 0.3em 0.3em;
}

.acc-handle {
  display:block;
  position: relative;
  padding: 1.5em;
  color: var(--crabs-green);
  font-family: var(--crabs-font);
  font-weight: bold!important;
  background: #f1f1f1;
  text-decoration: none;
  z-index: 3;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
  transition: all .25s ease;
}

.acc-handle:hover {
  color: var(--crabs-black);
  background: #fafafa;
}

.acc-handle:before, .acc-handle:after {
  content: '';
  position: absolute;
  transition: all .3s ease;
}

.acc-handle:before {
  width: 1em;
  border-top: .15em solid;
  border-bottom: .15em solid;
  top: 50%;
  margin-top: -0.15em; 
  right: 1.45em;
  
}

.acc-handle:after {
  height: 1em;
  width: 0.3em;
  border-top: 0.5em solid;
  border-bottom: 0.5em solid;
  right: 1.8em;
  top: 50%;
  margin-top: -0.55em;
  
}

.acc-panel {
  padding: 1.5em;
  position: relative;
  float: left;
  width: 100%;
  clear: both;
  margin-top: -100%;
  z-index: 1;
  font-family: var(--crabs-font);
  transition: all 1.2s ease;
  color:var(--crabs-white);
  background-color:var(--crabs-black);
}

.acc-handle:focus {
  outline: none;
  background: #e7e7e7;
}

.acc-handle:focus:after{
  height: 0;
  border: 0;
  margin-top: 0;
  opacity: 0;
}

.acc-handle:focus + .acc-panel {
  margin-top: 0;
  border-top: 1px solid #d1d1d1;
  transition: all 0.6s ease-in-out;
}

.acc-panel * { 
  opacity: 0;
  transition: all 1s linear;
}

.acc-handle:focus + .acc-panel * {
  opacity: 1;
}

*, *:before, *:after {
  box-sizing: border-box;
}