/* ! Base Style */

body{
  font-family: 'Play', sans-serif;
  background: #fff;
  /* ! Arancio: #c86405 -- rgba(200, 100, 5, 1)  */
}

h1,h3,h4,h5, p{color: #000; padding-bottom: 15px;}

a{text-decoration: none; color: #555555; font-weight: 700}

h1{color: #555555; font-size: 16px; font-weight: 700; margin-top: 11px; margin-bottom: 11px;}

h2{color: #555555; font-size: 13px; font-weight: 700; margin-top: 11px; margin-bottom: 11px;}

h3{color: #555555; font-size: 11px; font-weight: 700;}

p{color: #555555; font-size: 12px; font-weight: 400;}

.container{
  width: 900px;
  position: relative;
  margin-top: 0;
  left:50%; transform: translateX(-50%);
  overflow: hidden;
}

@media(max-width: 850px){
  .container{
    width: 100%;
    margin-top: 11px;
  }

  h2, h1{margin-left: 11px;}
  h3{margin-left: 11px;}
  p{margin-left: 11px; margin-right: 11px;}
}

/* ! Header */

.menu{
  width: 900px;
  position: relative;
  margin-top: 100px;
  margin-bottom: 11px;
}

.menu a{
  margin-right: 22px;
  font-size: 13px;
}

.logo-img{
    position:absolute;
    right: 0;
    bottom: 0;
}

.orange-line{
  height: 4px;
  margin-top: 0;
  margin-bottom: 0;
  width: 100%;
  background: #c86405;
}

.img-wide{
  margin-top: 16px;
  margin-bottom: 16px;
  width: 900px;
}

@media(max-width: 850px){
  .img-wide{
    width: 100%;
  }

  .menu{
    width: 100%;
    padding-left: 11px;
    padding-right: 11px;
  }

  .menu a{
    margin-right: 8px;
    font-size: 13px;
  }

  .logo-img{
      position: absolute;
      bottom:24px;
      left:50%; transform: translateX(-57%);
  }
}

/* ! Slider */

#slider{
  overflow: hidden;
  height: 449px;
  margin-top: 22px;
  margin-bottom: 22px;
}

#slider figure{
  position: relative;
  width: 1300%;
  animation: 46s slider infinite;
}

#slider figure img{
  width: 7.6924%;
  float: left;
}

@keyframes slider{
  0% {    left: 0;  }
  6.66% {    left: 0;  }
  8.33% {    left: -100%;  }
  15% {    left: -100%;  }
  16.66% {    left: -200%;  }
  23.33% {    left: -200%;  }
  25% {    left: -300%;  }
  31.66% {    left: -300%;  }
  33.33% {    left: -400%;  }
  40% {    left: -400%;  }
  41.66% {    left: -500%;  }
  48.33% {    left: -500%;  }
  50% {    left: -600%;  }
  56.66% {    left: -600%;  }
  58.33% {    left: -700%;  }
  65% {    left: -700%;  }
  66.66% {    left: -800%;  }
  73.33% {    left: -800%;  }
  75% {    left: -900%;  }
  81.66% {    left: -900%;  }
  83.33% {   left: -1000%; }
  90% {   left: -1000%; }
  91.66% {   left: -1100%; }
  98.66% {   left: -1100%; }
  100% {   left: -1200%; }
}

@media(max-width: 850px){
  #slider{
    overflow: hidden;
    height: 100%;
    margin-top: 22px;
    margin-bottom: 22px;
  }
}

/* ! Selected projects */

#index-gallery{
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-column-gap: 32px;
  grid-row-gap: 4px;
  grid-template-areas:
  "img1 img2 img3 img4"
  "tit1 tit2 tit3 tit4"
}

.sel-cover {
    width: 200px;
    height: 100px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    cursor: pointer;
}

#index-gallery .img1{grid-area: img1; background-image: url("images/selected_grb.jpg");}
#index-gallery .img2{grid-area: img2; background-image: url("images/selected_spn.jpg");}
#index-gallery .img3{grid-area: img3; background-image: url("images/selected_cng.jpg");}
#index-gallery .img4{grid-area: img4; background-image: url("images/selected_ssm.jpg");}
#index-gallery .tit1{grid-area: tit1; height: 16px;}
#index-gallery .tit2{grid-area: tit2; height: 16px;}
#index-gallery .tit3{grid-area: tit3; height: 16px;}
#index-gallery .tit4{grid-area: tit4; height: 16px;}

@media(max-width: 850px){
  #index-gallery{
    margin-left: 11px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-column-gap: 22px;
    grid-row-gap: 0px;
    grid-template-areas:
    "img1 img2"
    "tit1 tit2"
    "img3 img4"
    "tit3 tit4"
  }

  #index-gallery h3{
    margin-left: 0;
    margin-top: 4px;
  }

  .sel-cover {
      width: 88%;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      cursor: pointer;
  }


}

/* ! Virtual Tour*/

.vt-frame {
  width: 100%;
  height: 400px;
  margin-bottom: 16px;
}

@media(max-width: 850px){
  .vt-frame{
    height: 300px;
  }
}

/* ! Footer */

.footer p{
  margin-top: 16px;
  padding-bottom: 100px;
  position: relative;
  display: flex;
}

.socials{
  position: absolute;
  right: 0;
  bottom: 77px;
}

.social-icon{
  width: 40px;
  height: 40px;
}

@media(max-width: 850px){
  .footer p{
    width: 220px;
    line-height: 18px;
  }

  .socials{
    position: absolute;
    right: 22px;
    bottom: 122px;
  }
}