@import url('https://fonts.googleapis.com/css?family=Rubik');

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

@font-face {
  font-family: ace;
  src: url(fonts/ace-sans.woff);
}

body {
      display: flex;
      flex-wrap: wrap;
      margin: 0 auto;
      background: #f1951c;
      width: 100%;
      
}

img.logo {
  height: 90px;
  position: absolute;
  z-index: 1;
}

.SS18-container{
  height:100%;
  overflow:auto;
  width: 100%; 
}


#SS18-anchor {
      overflow: hidden;
      display: flex;
      width: calc(33.33% );
      max-width:100%;
      height:auto;
      float: left;
}



.SS18-caption h1 {
      font-size: 4vW;
      font-weight: bold !important;
      
      color: #ffffff;
      letter-spacing:0.1vw;
      text-transform: uppercase;
      font-family: 'ace';
     
}

.SS18-caption h4 {
      font-size: 1vW;
      font-weight:300;
      letter-spacing:0.1vw;
      text-transform: uppercase;
      font-family: 'Rubik';
}

.SS18-caption h5 {
      font-size: 0.65vW;
      font-weight:300;
      letter-spacing:0.1vw;
      text-transform: uppercase;
      margin-top:16.5vW;
      font-family: 'Rubik';
}

.SS18-container figure {
      position: relative;
      background-color: #000;
}

.SS18-figureimg {
      width: 100%;
      display: block;
      position: relative;
}

.SS18-container figcaption {
      position: absolute;
      top: 35%;
      left: 0;
      width: 100%;
      text-align: center;
      opacity: 0;
      color: #fff;
}

.SS18-figureimg {
      opacity: 1;
      -webkit-transition: all .8s ease;
      -moz-transition: all .8s ease;
      transition: all .8s ease;
}

.SS18-container figure  figcaption{
      opacity: 1;
}

#SS18-anchor:hover .SS18-figureimg {
      transform: scale(1.15);
   opacity: 0.4;
      -webkit-transition: all .8s ease;
      -moz-transition: all .8s ease;
      transition: all .8s ease;
}

.SS18-figure {
      margin: 0;
}


.footer-distributed{
  background: #f1951c;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
  box-sizing: border-box;
  width: 100%;
  text-align: left;
  font: bold 16px 'Rubik';
  padding: 5px 50px;
  
}

.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right{
  display: inline-block;
  vertical-align: top;
  padding:10px 0 ;
  color: #fff;
  font-family: 'Rubik', sans-serif;
}

/* Footer left */

.footer-distributed .footer-left{
  width: 40%;
}

/* The company logo */

.footer-distributed h3{
  color:  #ffffff;
  font: normal 36px 'Rubik', cursive;
  margin: 0;
}

.footer-distributed h3 span{
  color:  lightseagreen;
}

/* Footer links */

.footer-distributed .footer-links{
  color:  #ffffff;
  margin: 20px 0 12px;
  padding: 0;
}

.footer-distributed .footer-links a{
  display:inline-block;
  line-height: 1.8;
  font-weight:400;
  text-decoration: none;
  color:  inherit;
}

.footer-distributed .footer-company-name{
  color:  #d3df30;
  font-size: 14px;
  font-weight: normal;
  margin: 0;
  
}
.footer-oib{
      color:  #ffffff;
      font-size: 14px;
      font-weight: normal;
      margin: 0;
    }

/* Footer Center */

.footer-distributed .footer-center{
  width: 30%;
}

.footer-distributed .footer-center i{
  background-color:  #33383b;
  color: #ffffff;
  font-size: 25px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  text-align: center;
  line-height: 42px;
  margin: 10px 15px;
  vertical-align: middle;
}

.footer-distributed .footer-center i.fa-envelope{
  font-size: 17px;
  line-height: 38px;
}

.footer-distributed .footer-center p{
  display: inline-block;
  color: #ffffff;
  font-weight:400;
  vertical-align: middle;
  margin:0;
}

.footer-distributed .footer-center p span{
  display:block;
  font-weight: normal;
  font-size:14px;
  line-height:2;
}

.footer-distributed .footer-center p a{
  color:  rgb(255, 255, 255);
  text-decoration: none;;
}

.footer-distributed .footer-links a:before {
  content: "|";
  font-weight:300;
  font-size: 20px;
  left: 0;
  color: #fff;
  display: inline-block;
  padding-right: 5px;
}

.footer-distributed .footer-links .link-1:before {
  content: none;
}

/* Footer Right */

.footer-distributed .footer-right{
  width: 28%;
}

.footer-distributed .footer-company-about{
  line-height: 30px;
  color:  #ffffff;
  font-size: 15px;
  font-weight:500;
  margin: 0;
  padding: 5px;

}

.footer-distributed .footer-company-about span{
  display: block;
  color:  #ffffff;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
}

.footer-distributed .footer-icons{
  margin-top: 25px;
}

.footer-distributed .footer-icons a{
  display: inline-block;
  width: 35px;
  height: 35px;
  cursor: pointer;
  background-color:  #33383b;
  border-radius: 2px;

  font-size: 20px;
  color: #ffffff;
  text-align: center;
  line-height: 35px;

  margin-right: 3px;
  margin-bottom: 5px;
}



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

#SS18-anchor {
      display: block;
      width: calc(100%);
}


.SS18-caption h1 {
      font-size: 10vW;
      font-weight:600;  
      letter-spacing:0.3vw;
      text-transform: uppercase;
      font-family: 'ace';
}

.SS18-caption h4 {
      font-size: 3vW;
      font-weight:300;
      letter-spacing:0.3vw;
      text-transform: uppercase;
      font-family: 'Rubik';
}

.SS18-caption h5 {
      font-size: 2vW;
      font-weight:300;
      letter-spacing:0.3vw;
      margin-top:50vW;
      text-transform: uppercase;
      font-family: 'Rubik';
} 

img.logo {
  width: 98%;
}

} 

@media (max-width: 880px) {

      .footer-distributed{
        font: bold 14px 'Rubik';
      }
    
      .footer-distributed .footer-left,
      .footer-distributed .footer-center,
      .footer-distributed .footer-right{
        
        width: 100%;
        margin-bottom: 40px;
        text-align: center;
        padding: 10px 0;
      }
    
      .footer-distributed .footer-center i{
        margin-left: 0;
      }
    
    }