

@media (min-width: 769px) {

    .seccionH{
      position: absolute;
      left: 110px;
      z-index:3 !important;
    }

   .mt-md-10{
      margin-top: 10rem !important;
    }

    .mt-md-12{
      margin-top: 13rem !important;
    }

    .mt-md-13{
      margin-top: 16rem !important;
    }

    .escritorio{
      display: none;
    }

    .paquete{
        margin-top: -300px !important;
      }

      .history{
        display: none;
      }

      .hoverimg{
        padding-top: 25%;
        padding-bottom: 25%;
        padding-left: 10%;
        padding-right: 10%;
      }

      .formPadding{
        padding-top: 8rem;
        padding-bottom: 8rem;
        padding-left: 8rem;
        padding-right: 8rem;
      }

      .padding{
        padding-left: 8rem;
        padding-right: 8rem;
        font-size: 22px !important;
      }

      .letrap{
        position: absolute;
        top: -100px;
        left:1px;
      }

      #pills-tabContent{
        margin-top: -300px;
      }

      .iconbar{
        width:30px;
      }

      #prev{
        content: url(../../assets/img/img/prev_Mesa\ de\ trabajo\ 1.png);
        width: 100%;
        height: auto;
        margin-top: 9rem;
      }

      #prev:hover {
        content: url(../../assets/img/img/iconHprev_Mesa\ de\ trabajo\ 1.png);
        width: 100%;
        height: auto;
        transition: content .5s;
        margin-top: 9rem;
      }

      #next {
        content: url(../../assets/img/img/next_Mesa\ de\ trabajo\ 1.png);
        width: 100%;
        height: auto;
        margin-top: 9rem;
      }
      #next:hover {
        content: url(../../assets/img/img/iconH_Mesa\ de\ trabajo\ 1.png);
        width: 100%;
        height: auto;
        margin-top: 9rem;
      }



      .containerP{
        height: 200px;
      }

      .swiper-container1{
         margin-top: -200px;
         margin-bottom: 100px;
      }

      .segmentoC{
        background-image: url(../../assets/img/img/servi1.svg);
        background-size:cover;
        background-repeat: no-repeat;
      }

      .banner1{
        background-image: url(https://s3.amazonaws.com/scpim/slider/planilla-de-pago.jpg);
        background-size: cover;
        background-position: 10%;
        background-repeat: no-repeat;
      }

      .banner2{
        background-image: url(https://s3.amazonaws.com/scpim/slider/nomina-salarial.jpg);
        background-size: cover;
        background-position: 50%;
        background-repeat: no-repeat;
      }

      .banner3{
        background-image: url(https://s3.amazonaws.com/scpim/slider/planilla-de-remuneraciones.jpg);
        background-size: cover;
        background-position: 50%;
        background-repeat: no-repeat;
      }


}

/* vista Celular */
@media (max-width: 768px) {

	    .text-faq{
        font-size:2.35rem;
    }

  .overlay .mask {
    opacity: 1 !important;
  }

  .view .mask {
    height: 98% !important;
  }

  .pt-13{
    padding-top: 13rem!important;
  }

  .banner1{
    background-image: url(https://s3.amazonaws.com/scpim/slider/planilla-de-pago.jpg);
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
  }

  .banner2{
    background-image: url(https://s3.amazonaws.com/scpim/slider/nomina-salarial.jpg);
    background-size: cover;
    background-position: 20%;
    background-repeat: no-repeat;
  }

  .banner3{
    background-image: url(https://s3.amazonaws.com/scpim/slider/planilla-de-remuneraciones.jpg);
    background-size: cover;
    background-position: 10%;
    background-repeat: no-repeat;
  }


    .celular{
      display: none;
    }

    .fondosb{
      background-image: url(../../assets/img/img/scp-costa-rica-s.png);
      background-position: top;
      background-repeat: no-repeat;
    }

    .fondocb{
      background-image: url(../../assets/img/img/scp-costa-rica.png);
      background-position: top;
      background-repeat: no-repeat;
    }

    .text-azul1{
      color: #223A5E !important;
    }

    .paquete{
        margin-top: -100px !important;
      }

    h1.titulo{
        font-size: 8px !important
      }

      .titulos{
        font-size: 1.35rem !important;
      }

      .container{
        display: none !important;
      }

      .parnert{
        display: none;
      }

      .hoverimg{
        padding-top: 25%;
        padding-bottom: 25%;
        padding-left: 10%;
        padding-right: 10%;
      }

      .hoverimg h3{
        font-family: Centurybold !important;
        font-weight: bold !important;
        font-size: .75rem !important;
      }

      .hoverimg p{
        font-family: Century !important;
        font-weight: normal !important;
        font-size: 0.80rem !important;
      }

      .iconbar{
        width:6%;
      }

      #prev{
        content: url(../../assets/img/img/prev_Mesa\ de\ trabajo\ 1.png);
        width: 50%;
        height: auto;
        float: right;
      }

      #prev:hover {
        content: url(../../assets/img/img/iconHprev_Mesa\ de\ trabajo\ 1.png);
        width: 50%;
        height: auto;
        transition: content .5s;

      }

      #next {
        content: url(../../assets/img/img/next_Mesa\ de\ trabajo\ 1.png);
        width: 50%;
        height: auto;

      }
      #next:hover {
        content: url(../../assets/img/img/iconH_Mesa\ de\ trabajo\ 1.png);
        width: 50%;
        height: auto;

      }

      #margen{
        margin-top: 80px;
      }
}


#paso1{
  content: url(../../assets/img/img/grafico_Mesa\ de\ trabajo\ 1.png);
  width: 100%;
  height: auto;
}

/* #paso1:hover {
  content: url(../../assets/img/img/paso1.1.png);
  width: 100%;
  height: auto;
  transition: content .5s;
} */

#paso2{
  content: url(../../assets/img/img/mundo_Mesa\ de\ trabajo\ 1.png);
  width: 100%;
  height: auto;
}

/* #paso2:hover {
  content: url(../../assets/img/img/paso2.1.png);
  width: 100%;
  height: auto;
  transition: content .5s;
} */


#paso3{
  content: url(../../assets/img/img/ajuste_Mesa\ de\ trabajo\ 1.png);
  width: 100%;
  height: auto;
}

/* #paso3:hover {
  content: url(../../assets/img/img/paso3.1.png);
  width: 100%;
  height: auto;
  transition: content .5s;
} */


#paso4{
  content: url(../../assets/img/img/mano_Mesa\ de\ trabajo\ 1.png);
  width: 100%;
  height: auto;
}

/* #paso4:hover {
  content: url(../../assets/img/img/paso4.1.png);
  width: 100%;
  height: auto;
  transition: content .5s;
} */

.azul{
    background-color: #223A5E !important;
}

.naranja{
  background-color: #D67608 !important;
}

.text-naranja{
  color: #D67608 !important;
}

.rojo{
  background-color: #D13818 !important;
}

.blanco{
  background-color: #fff;
}

.rosa{
    background-color: #F05C58 !important;
}

.text-azul{
    color: #223A5E !important;
}

.sombra{
  border-radius: 1.25rem!important;
  font-weight: 500 !important;
}

.negro{
  background-color: #262626 !important;
}

.sombra:hover{
  box-shadow: 0.10rem 0.10rem 0.5rem 0.25rem rgba(0,0,0,.15)!important;
}

.img-fluid5{
  max-width: 20%;
  height: auto;
}

.img-fluidc{
  max-width: 50%;
  height: auto;
}

.img-fluid8{
  max-width: 80%;
  height: auto;
}

@font-face {
    font-family: Gotham;
    src: url(../../dist/fonts/Gotham\ Book.otf);
  }

  @font-face {
    font-family: Century;
    src: url(../../dist/fonts/centurygothic.ttf);
  }

  @font-face {
    font-family: Centurybold;
    src: url(../../dist/fonts/CenturyGothicBold.ttf);
  }

  .century{
    font-family: Centurybold !important;
    font-weight: bold !important;
    color: #273A5B !important;
  }

  p{
    font-family: Century !important;
    font-weight: normal !important;
    font-size: 15px !important;
    letter-spacing: 1px;
  }

  .centuryR{
    font-family: Century !important;
    font-weight: normal !important;
  }

  h3{
    font-family: Centurybold !important;
    font-weight: bold !important;
    font-size: 2.35rem !important;
    letter-spacing: 3px;
  }

  h4{
    font-family: Centurybold !important;
    font-weight: bold !important;
    font-size: 1.75rem !important;
    letter-spacing: 3px;
  }

  h1{
      font-family: Centurybold !important;
      font-size: 4rem;
      font-weight: bold !important;
  }

  label{
    font-family: GothamMedium !important;

  }

  .form-control, .btn{
    border-radius: unset !important;
  }


  /* body {
    min-width: 360px !important;
  } */

  .jumbotron{
    overflow: hidden !important;
    box-shadow: 0 0 black !important;
  }

  img{
    overflow: hidden !important;
  }

  @font-face {
    font-family: 'GothamMedium';
    src: url('../fonts/Gotham\ Medium.otf');
    font-weight: normal;
    font-style: normal;

}

.gothanM{
  font-family: 'GothamMedium' !important;
}

.ir-arriba {
	padding:20px;
	cursor:pointer;
	position: fixed;
	bottom:20px;
  right:20px;
  max-width: 8% !important;
}

.ir-abajo1 {
  width: 6% !important;
  position: absolute;
  text-align: right;
  transition: 300ms opacity;
  transform: translate3d(0, 0, 0);
  z-index: 999;
  bottom: 10px;
  right: 42%;
}


h1,h4{
  font-weight: 600;
}


.btnmore{
  border-radius: 25px !important;
  font-family: 'GothamMedium' !important;
}

.circulo{
  max-width:4%;
}

.parallax1 {
  /* The image used */
  /* background-image: url("../../assets/img/img/paralax.jpg"); */

  background-image:linear-gradient(hsl(217 41% 27% / 0.8),hsl(217 41% 27% / 0.8)),url(../../assets/img/img/planilla-costa-rica.jpg);

  /* Set a specific height */
  /* height: 500px; */

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.parallax2 {
  /* The image used */
  /* background-image: url("../../assets/img/img/imgc1.png"); */

  background-image:linear-gradient(hsl(217 41% 27% / 0.8),hsl(217 41% 27% / 0.8)),url(../../assets/img/img/paralax2.jpg);

  /* Set a specific height */
  /* height: 500px; */

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.segmento{
  background-image: url(../../assets/img/img/fondo_Mesa\ de\ trabajo\ 1.png);
}



.fondoS{
  background-image: url(../../assets/img/img/fondoS_Mesa\ de\ trabajo\ 1.png);
  background-position: top;
  background-repeat: no-repeat;
}

.margintop{
  margin-top: 6rem;
}


.nav-link{
  color: #273A5B !important;
}

.navbar.navbar-light .navbar-nav .nav-item.active>.nav-link {
  background-color: #D67608 !important;
  border-radius: 25px;
  color: white !important;
}

.md-form label {
  color: white !important;
}


.iconI{
  width: 5%;
}

.press{
  stroke: #d67608 !important;
  transition: stroke .5s;
}


.tabs:hover{
  stroke: #808082 !important;
  transition: stroke .3s;
}


.cls-1{fill:#c7c8c8;}.cls-1,.cls-2{opacity:0.05;}.cls-3,.cls-8{fill:#fff;}
.cls-4,.cls-5,.cls-6,.cls-7{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:75px;}
.cls-4{stroke:#cccdce;}.cls-5{stroke:#bcbdbe;}.cls-6{stroke:#c7c8c8;}.cls-7{stroke:#9d9d9e;}
.cls-8{font-size:40.77px;font-family:Centurybold;font-weight:700;letter-spacing:0.2em;}
.cls-9{font-family:Centurybold;font-weight:700;}.cls-9{font-size:44.61px;fill:#d67608;letter-spacing:0.2em;}
.cls-10{font-family:Centurybold;font-weight:700;}.cls-10{font-size:60px;fill:#d67608;letter-spacing:0.2em;}

input{
  color: white !important;
}


.btn{
  -webkit-appearance: none !important;
}

#commentary{
  color: white;
}

.portal{
  background-color: #273A5B !important;
    border-radius: 25px !important;
    color: white !important;
    box-shadow: none !important;
    font-family: Centurybold !important;
    font-weight: bold !important;
}

.mb-md-7{
  margin-bottom:7rem;
}

.h7{
  font-size:22px !important;
}

.loadMore{
  display: none;
}

.bg-primary-scp{
  background: #223A5E !important;
}

.bg-gray-scp{
  background: #F4F5F7 !important;
}

.btn{
  text-transform: math-auto;
}


.card-scp{
  max-width: 450px; border-radius: 20px;
}

.card-text{
	font-family:Centurybold !important;
}

.activo-pais{
  background-color :#223A5E;
  color: #fff;
}

.text-header{
  text-decoration:none !important;
  font-weight: bold;
  font-size:14px !important;
  font-family:Centurybold !important;

}

.text-header:hover {
  text-decoration: none !important;
}

.p-left{
padding-left:0px !important;
text-align: left;
}
