@font-face {
    font-family: Gilroy;
    src: url("../fonts/Gilroy-Light.otf") format("opentype");
}

@font-face {
    font-family: Gilroy;
    font-weight: bold;
    src: url("../fonts/Gilroy-ExtraBold.otf") format("opentype");
}

body{
    font-family: Gilroy;
}

#slider, li{
  margin: 0;
  padding: 0;
  list-style: none;
}
 #slider {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: calc(100vh - 40px);
  padding:0;

}

 #slider li {
   position:relative; 
 -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-transition: -webkit-box-flex 500ms ease-out;
  -webkit-transition: -webkit-flex 500ms ease-out;
  transition: -webkit-box-flex 500ms ease-out;
  transition: -ms-flex 500ms ease-out;
  transition: flex 500ms ease-out;
  
}

 #slider li:nth-child(1) { background: url('../img/modern.jpg'); background-size:cover; }
 #slider li:nth-child(2)  { background: url('../img/alacati.jpg'); background-size:cover; }
 #slider li:nth-child(3)  { background: url('../img/360midimodern2.jpg'); background-size:cover; }
 #slider li:nth-child(4)  { background: url('../img/360midimodern3.jpg'); background-size:cover; }
 #slider li:nth-child(5)  { background: url('../img/360midimodern4.jpg'); background-size:cover; }

 #slider li:hover {
  -webkit-box-flex: 2;
  -webkit-flex: 2;
  -ms-flex: 2;
  flex: 2;
}

#slider img{
    max-width: 250px;
}

.overlay-black {
    position:absolute;
    top:0px;
    right: 0px;
    width:100%;
    height:100vh;
    z-index: 0;
}



.slider-logo{
    background:#fff;
    background: rgba(255,255,255,0.5);
    position: relative;
    z-index:1;
    left: 40%;
    transform: translateX(30%);
    top: 50%;
    transform: translateY(-60%);
    border-radius: 4px;
    
}

.slider-logo:hover{
    background:#fff;
    background: rgba(255,255,255,0.7);

    
}


#mobilehomepage{
    width:100%;
    height:100vh;
    padding:0px;
}

#mobilehomepage li {
    padding:20px;
    width:100%;
    position:relative;
    height: calc(100vh / 2);
}

#mobilehomepage li:nth-child(1) { background: url('../img/modern.jpg'); background-size:cover; }
#mobilehomepage li:nth-child(2)  { background: url('../img/alacati.jpg'); background-size:cover; }

#mobilehomepage li a{
    display:block;
    position:relative;
}

#mobilehomepage li img{
    background:#fff;
    background: rgba(255,255,255,0.5);
    position:relative;
    width:50%;
    z-index:1;
    border-radius: 4px;
  
    left: 25%;
    transform: translateX(30%);
    top: 50%;
    transform: translateY(60%);
}