@import url(fontawesome-all.min.css);
@import url("https://fonts.googleapis.com/css?family=Roboto:400,700");

@charset "UTF-8";
/* CSS Document */

html {  
   background: #121212;
}

body {
  margin: 0;
  padding: 0;
  background: #121212;
  color: #121212;
  font-family: 'Helvetica','Arial','Hiragino Sans','Trebuchet MS',sans-serif;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0.05em;
}

#site-nav {
   background-image: url('../../images/fotopablo.png');
   background-repeat: no-repeat;
   background-position: 10px 20px;
}

#site-title {
   text-align: left;
   padding: 12px 20px 10px 120px;
   color: white;
}

/* Navigation icons Icon */

.icon {
        text-decoration: none;
        border-bottom: none;
        position: relative;
}

.icon:before {
      -moz-osx-font-smoothing: grayscale;
      -webkit-font-smoothing: antialiased;
      display: inline-block;
      font-style: normal;
      font-variant: normal;
      text-rendering: auto;
      line-height: 1;
      text-transform: none !important;
      font-family: 'Font Awesome 5 Free';
      margin-top: 10px;
      margin-right: 27px;
      font-size: 28px;
      color: #f0f0f0;
}

.icon > .label {
      display: none;
}

.icon:before {
     line-height: inherit;
}

.icon.brands:before {
    font-family: 'Font Awesome 5 Brands';
}

a {
  color: #8A8A8A;
  text-decoration: none;
}

a:hover { 
  color: #a8a8f8;
}

a img { border: none; }

a:hover img {
	opacity:0.6;
	filter:alpha(opacity=60);
	-ms-filter: “alpha( opacity=60 )”;
}

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

.credit_title {
   font-size: 22px;
   color: #white;
   font-weight: 600;
}

.credit {
   font-size: 12px;
}

/* grid layout for miniatures */

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 10px;
}

.container img {
  position: relative;
  border: 1px solid #000; 
  align-items: center;
  justify-items: center;
  
  width: 97%;
  height: 97%;

  &:nth-child(1) {
    grid-column: 1 / 3;
    .content {
      align-items: center;
      justify-items: center;
      text-align: center;
    }
  }
}

@media screen and (orientation: portrait) and (max-width: 1080px) {
    .container {
      grid-template-columns: 1fr 1fr;
    }

     #site-nav {
         background-position: center 10px;
     }

     #site-title {
       text-align: center;
       padding: 80px 0px 10px 0px;
     }

     &:nth-child(1) {
       grid-column: 1 / 2;
     }

     .last {
       display: none;
     }

    body {
     line-height: 40px;
    }
    .icon:before {
      margin-right: 10px;
      font-size: 34px;
    }

    .credit_title {
      font-size: 30px;
    }
    .credit {
      font-size: 20px;
    }
}

footer {
   margin: 0;	
   padding: 20px;
   color: #a0a0a0;
   background-color: #121212;
   font-size: 12px;
   clear: both;
}

#design {
   font-size: 10px;
   font-style: italic;
   text-align: left;
   width: 100%;
   margin: 0;
   padding: 0px 20px 0px 0px;
}