body,h1,h2,h3,h4,h5,h6 {font-family: "Hind", sans-serif;}
body, html {
  height: 100%;
  color: #fff;
  /*line-height: 1.8;*/
}
a{
  text-decoration: none;
}
/* Create a Parallax Effect */
.bgimg-2, .bgimg-3 {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* First image (Logo. Full height) */
.bgimg-1 {  
 
  min-height: 100%;
}
.bgimg-1::before {    
      content: "";
      background-image: url('../images/laptop-principal.jpg');
      
      position: absolute;
      top: 0px;
      right: 0px;
      bottom: 0px;
      left: 0px;
      opacity: 0.25;
      background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
      
}
h2,h3{
    /*line-height: 1;*/
    padding-left: 0px !important;
    margin-left: 0px !important;
}

/* Second image (Portfolio) */
.bgimg-2 {
  background-image: url("../images/sauroscompany-laptop.png");
  
}

/* Third image (Contact) */
.bgimg-3 {
  background-image: url("/w3images/parallax3.jpg");
  background-repeat: no-repeat;
  background-position: bottom right;
}

.bgimg-4{
  background-image: url("../images/sauros-company-letras.png");
  background-repeat: no-repeat;
  background-position: center right;
  background-attachment: fixed;
}
.bgimg-5{
  background-image: url("../images/sauros-company-opacidad.png");
  background-repeat: no-repeat;
  background-position:center center;
  background-size:contain;
}
.bgimg-6{
  background-image: url("../images/sauros-company-dots.png");
  background-repeat: no-repeat;
  background-position:center center;
  background-attachment:fixed;
}

.w3-wide {letter-spacing: 10px;}
.w3-hover-opacity {cursor: pointer;}

/*SLIDE*/
.container {
  position: relative;
  width: 50%;
  
  }

  .image {
  opacity: 1;
  display: block;
  /*width: 100%;*/
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
  }

  .middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
  
  }

  .container:hover .image {
  opacity: 0.3;
  }

  .container:hover .middle {
  opacity: 1;
  }


.w3-text-blue-sc{
    color: #08758e;
}
.w3-blue-sc{
    background-color: #08758e;
}
.w3-text-green-sc{
    color: #8cb518;
}
.w3-green-sc, .w3-hover-green-sc:hover {
  color: #fff!important;
  background-color: #8cb518 !important;
}
.w3-text-black-sc{
    color: #121212;
}
.w3-black-sc{
    background-color: #121212;
}
.w3-text-grey-dark-sc{
  color: #272727;
}
.w3-grey-dark-sc{
  background-color: #272727;
}
.w3-text-grey-sc{
  color: #8d8d8d;
}
.w3-grey-sc{
  background-color: #8d8d8d;
}
.w3-border-grey-dark-sc,.w3-hover-border-grey-dark-sc:hover{border-color:#272727!important}
.w3-border-blue-sc,.w3-hover-border-blue-sc:hover{border-color:#08758e!important}

/* Faux outline for older browsers */
.w3-text-stroke-sc {
  color: white; /* Unfortunately you can't use transparent here … */
  text-shadow:
   -1px -1px 0 #000,  
  1px -1px 0 #000,
  -1px 1px 0 #000,
   1px 1px 0 #000
}

.top {
  --offset: 50px; 
  
  position: sticky;
  bottom: 20px;      
  margin-right:10px; 
  place-self: end;
  /*margin-top: calc(100vh + var(--offset));*/
  
  /* visual styling */
  text-decoration: none;
  padding: 10px;
  font-family: sans-serif;
  color: #fff;
  background: #000;
  border-radius: 100px;
  white-space: nowrap;
}


/* remove the below if you don't want smooth scrolling */
html,
body {
  scroll-behavior: smooth;
}

/* Real outline for modern browsers */
@supports((text-stroke: 2px black) or (-webkit-text-stroke: 2px black)) {
  .w3-text-stroke-sc {
    color: transparent;
    -webkit-text-stroke: 2px #08758e;
    text-stroke: 2px black;
    text-shadow: none;
    line-height:1;
  }
}

.hind-light {
    font-family: "Hind", sans-serif;
    font-weight: 300;
    font-style: normal;
  }
  
  .hind-regular {
    font-family: "Hind", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  
  .hind-medium {
    font-family: "Hind", sans-serif;
    font-weight: 500;
    font-style: normal;
  }
  
  .hind-semibold {
    font-family: "Hind", sans-serif;
    font-weight: 600;
    font-style: normal;
  }
  
  .hind-bold {
    font-family: "Hind", sans-serif;
    font-weight: 700;
    font-style: normal;
  }

  /* Síguenos */
.floating-left {  
    animation-name: floating-left;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    left: 0px;
}
.floating-right {  
    animation-name: floating-right;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    right: 0px;
}

@keyframes floating-left {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 20px); }
    100%   { transform: translate(0, -0px); }    
}
@keyframes floating-right {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 55px); }
    100%   { transform: translate(0, -0px); }    
}

.siguenos {
    position: fixed;
    bottom: 200px;
    writing-mode: vertical-lr;
    text-orientation: mixed;
    z-index: 99;
  }

  /* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1600px) {
  /*.bgimg-1, .bgimg-2, .bgimg-3 {
    background-attachment: scroll;
    min-height: 400px;
  }*/
}

.ball {
  width: 30px;
  height: 30px;
  position: fixed;
  top: 0;
  left: 0;
  border: 3px solid #08758e;
  border-radius: 50%;
  pointer-events: none;
}

/* For Desktop View */
@media screen and (min-width: 1024px) {
  body {
    background-color: lightblue;
  }
  /* First image (Logo. Full height) */
  .bgimg-1 {
    
    min-height: 100%;
  }
  .bgimg-1::before {    
        content: "";
        background-image: url('../images/laptop-principal.jpg');
        background-size: cover;
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        opacity: 0.25;
  }
  .w3-card-sc{
    min-height: 220px;
  }
  .w3-card2-sc{
    min-height: 200px;
  }
}

/* For Tablet View */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  .bgimg-1 {  
    min-height:600px;
    
    background-image: url('../images/laptop-principal.jpg');
    background-position: right bottom;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
      
  }
  .w3-card-sc{
    min-height: 350px;
  }
  .w3-card2-sc{
    min-height: 200px;
  }
}

/* For Mobile Portrait View */
@media screen and (max-device-width: 480px) {
  /* First image (Logo. Full height) */
.bgimg-1 {  
  
      content: "";
      background-image: url('../images/laptop-principal.jpg');
      background-position: right bottom;
      background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
      
}
  .w3-large{
    font-size:medium !important;
  }
  .w3-xlarge{
    font-size:larger !important;
  }
  .w3-xxlarge{
    font-size:x-large !important;
  }
  .w3-xxxlarge{
    font-size:xx-large !important;
  }
  .w3-jumbo{
    font-size:xx-large !important;
  }
  h2,h3{
    /*line-height: 20px;*/
    padding-left: 0px !important;
    margin-left: 0px !important;
  }
  /* Real outline for modern browsers */
  @supports((text-stroke: 1px black) or (-webkit-text-stroke: 1px black)) {
    .w3-text-stroke-sc {
      color: transparent;
      -webkit-text-stroke: 1px #08758e;
      text-stroke: 1px black;
      text-shadow: none;
    }
  }
  .w3-card-sc{
    min-height: 80px !important;
  }
  .w3-card2-sc{
    min-height: 30px !important;
  }
}

/* For Mobile Landscape View */
@media screen and (max-device-width: 640px) and (orientation: landscape) {
  
}

/* For Mobile Phones Portrait or Landscape View */
@media screen and (max-device-width: 640px) {
  
}

/* For iPhone 4 Portrait or Landscape View */
@media screen and (min-device-width: 320px) and (-webkit-min-device-pixel-ratio: 2) {

}

/* For iPhone 5 Portrait or Landscape View */
@media (device-height: 568px) and (device-width: 320px) and (-webkit-min-device-pixel-ratio: 2) {
  
}

/* For iPhone 6 and 6 plus Portrait or Landscape View */
@media (min-device-height: 667px) and (min-device-width: 375px) and 
       (-webkit-min-device-pixel-ratio: 3) {

}
@-webkit-keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-250px * 7));
  }
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-250px * 7));
  }
}
.slider {
  height: 150px;
  margin: auto;
  overflow: hidden;
  position: relative;
  z-index: 0;
}
.slider::before, .slider::after {
  background: linear-gradient(to right, #8cb518 0%, rgba(255, 255, 255, 0) 100%);
  content: "";
  height: 150px;
  position: absolute;
  width: 200px;
  z-index: 2;
}
.slider::after {
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
}
.slider::before {
  left: 0;
  top: 0;
}
.slider .slide-track {
  -webkit-animation: scroll 40s linear infinite;
          animation: scroll 40s linear infinite;
  display: flex;
  width: calc(250px * 14);
}
.slider .slide {
  height: 150px;
  width: 250px;
}