/* ------------------- All --------------------- */


body {
    font-family: 'Roboto Condensed', sans-serif;
    max-width: 100%;
    overflow-x: hidden;
    margin: 0;
    font-size: 1em;
    position: relative;
    min-height: 100%;
}



.M{
 display:none;}



/* ------------------- Links --------------------- */


a:link {
    text-decoration: none;
    color: #000;
    border:none;
    outline:none;
}

a:visited {
    text-decoration: none;
    color: #000;
}

a:hover {
    text-decoration: none;
    color: #aaa;
}

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


.selected{
 font-weight:700;
}



.small {
  width:100px;
}

.small2 {
  width:150px;
}

.small3 {
  width:150px;
}

a.violet:hover {
    color: #5b59c8;
  }

a.pink:hover {
    color: #e138bf;
  }

a.yellow:hover {
    color: #aaa637;
  }



/* ------------------- Galleries --------------------- */




.container {
  display: grid;
  grid-template-columns: repeat(minmax(20%, 1fr), auto-fit );
  grid-template-areas:
    'side header'
    'side gallery'
    'footer footer';
  align-content: start;
  min-height: 100vh;
}


.header {
 grid-area: header;
 display: grid;
 grid-template-columns: 1fr 1fr 1fr;
 justify-content: center;
 text-align: center;
 background-color: #fff;
 padding: 0 0 0 4%;

}


.wimbleton {
  display:grid;
  position: fixed;
  padding: 10px 6% 10px 0;
  right:0;
  width:100%;
  background-color: #fff;
  font-weight: 700;
  font-size: 1.04em;
}

.righter {
    justify-content: right;
}


.side {
 grid-area: side;
 text-align:left;
 margin:5% 0 0 2%;
 position: fixed;
 z-index: 2;
}


.footer {
  grid-area: footer;
  text-align: center;
  padding: 20px 20px 20px 4%;
  background-color: #eee;
  position:absolute;
  bottom: 0;
  width: 100%;
}



.gallery-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)  );
  grid-area: gallery;
  grid-auto-flow: dense;
  margin: 4.2% 3.5% 7% 12.5%;
  justify-content: center;
  overflow: auto;
}






/* ------------------- Home --------------------- */


.home-container {
  display: grid;
  grid-template-areas:
    'auto''auto''auto';
    width:30%;
    min-width: 350px;
    margin: 5% auto auto auto;
}




.contain {
  position:relative;
  width:100%;
  margin-bottom:4%;
}



.LH img {
  position:absolute;
  left:0;
  -webkit-transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -o-transition: opacity .25s ease-in-out;
  transition: opacity .25s ease-in-out;
}

.LH img.top:hover {
  opacity:0;
}



.home-menu {
  display: grid;
  justify-content: center;
  align-content: center;
  grid-template-areas:
  'auto auto auto';
  grid-column-gap: 30%;
  text-transform: uppercase;
  font-size: 1.3em;
  margin: 85% 0 5% 0;
  z-index: 1;
}


.title {
  display: grid;
  justify-content: center;
  align-content: center;
  font-size: 1.9em;
  font-family: 'Oswald', sans-serif;
  z-index: 1;
}



/* ------------------- Illustration --------------------- */




img.LH {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 2px;
}

img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 2px;
}



.item {
  padding: 18px;
}

  .bo {
  grid-row: span 2;}

  .chad {
  grid-row: span 2;}

  .star {
  grid-row: span 2;}

  .dogs {
  grid-row: span 2;}

  .horse {
  grid-row: span 2;}

  .paris {
  grid-row: span 2;}

  .bike {
  grid-row: span 2;}

  .life-draw {
  grid-row: span 2;}

  .paint {
  grid-row: span 2;}

  .steampunk {
  grid-row: span 2;}

  .train {
  grid-column: span 2;}





  /* ------------------- Characters --------------------- */



    .marquis {
  grid-column: span 2;}
  
  .crowley {
  grid-row: span 2;}

  .gatz {
  grid-row: span 2;}

  .tom {
  grid-row: span 2;}

  .varian {
  grid-row: span 2;}

  .count-olaf {
  grid-row: span 2;}

  .door {
  grid-row: span 2;}

  .jack {
  grid-row: span 2;}

  .karamazov {
  grid-row: span 2;}

  .thornton {
  grid-column: span 2;}

  .shady-shin {
  grid-row: span 2;}








    /* ------------------- Design --------------------- */


    .clyde-shirt-design {
    grid-row: span 2;}

    .clyde-shirt {
    grid-row: span 2;}

    .cream-butter {
    grid-row: span 2;}

    .film-poster {
    grid-row: span 2;}

    .heyo {
    grid-row: span 2;}

    .keeton-olson {
    grid-row: span 2;}

    .my-brother-is-a-zombie {
    grid-row: span 2;}

    .save-the-date {
    grid-row: span 2;}

    .WaG {
    grid-row: span 2;}




        /* ------------------- About --------------------- */



    .about {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-area: gallery;
      grid-template-areas: 'about_pic1 about_text';
      margin: 4.2% 3.5% 7% 5%;
      width:100%;
    }


    .about_text {
      grid-area: about_text;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr
                            1fr 1fr 1fr;
      text-align: left;
    }

    .about_pic1 {
      grid-area: about_pic1;
      text-align: right;
    }

    .back {
      grid-column: 1 / 5;
      background-color: #eee;
      padding: 25% 20% 25% 20%;
      min-width: 200px;
      border-radius: 0 5px 5px 0;
    }


    .about-pic {
        width: 60%;
        min-width: 400px;
        border-radius: 5px 0 0 5px;
    }



    /* ------------------- Menu --------------------- */


    .menu {
      grid-template-columns: auto;
      grid-column-gap: 0;
      display: grid;
      font-size: 1.1em;
      height: inherit;
      padding:10px 0 10px 0;
      position: relative;
    }




    /* ------------------- Galleries --------------------- */

    .footer a:hover {
      color: #555;
      }