*{
  margin:0;
  padding:0;
  font: 1em 'Roboto', sans-serif;
  box-sizing: border-box;
}

:root{

  --text: #cfceca;
  --orange: #fe5337;
  --green: #82b620;
  --greenLight: #a0e224;
}

body{
  position: relative;
  background: #282b33;
  background-image: url('../img/interface/background.jpg');
  color: #adaca8;
}
h1{
  font-family: 'Teko', sans-serif;
  font-size: 2.2em;
  color: var(--text);
  padding:2px;
}
h2{
  font-family: 'Teko', sans-serif;
  font-size: 1.6em;
  color: var(--text);
  padding-left:29px;
  line-height: 1em;
}

h3{
  font-family: 'Teko', sans-serif;
  font-size: 1.6em;
  color: var(--text);
  line-height: 1em;
  padding:4px;
}

h4{
  font-family: 'Teko', sans-serif;
  font-size: 1.5em;
  color: var(--text);
  line-height: 1em;
  padding-left:5px;
}

h5{
  width:100%;
  height:100%;
  padding-top: 12px;
  text-align: center;
  font-family: 'Roboto', sans-serif;
  font-size: 0.9em;
  color: #7e869e;
}

h6 {
    width: 100%;
    height: 100%;
    padding-top: 2px;
    padding-bottom: 10px;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 0.9em;
    color: #7e869e;
}

p{
  font-family: 'Roboto', sans-serif;
  padding:5px;
}

.answer{
  padding: 0px 0px 0px 14px;
  margin-bottom: 10px;
}

img{
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  padding:3px;
}
header{
  display:grid;
  width:100%;
  height:auto;
  background-color: #16181c;
  transition: background-color 2s, transform 2s;
}
header:hover{
  background-color: #0A0B0D;
}
header .logotype{
  display: flex;
  justify-content: center;
  max-width:300px;
  max-height:auto;
  margin:0 auto;
  padding-top:7px;
  text-shadow: 0 0 0px black;
}
header img{
  border-radius: 0;
  margin:0;
  padding:0;
}
header img:hover{filter: drop-shadow(0px 0px 1px red);}
nav{
  text-align: center;
  position: sticky;
  top:0;
  margin:0 auto;
  width:100%;
  height:50px;
  background-color: #16181c;
  border-bottom: 1px solid #373b47;
  transition: background-color 2s, transform 2s;
  z-index: 100;
}
nav:hover{background-color: #0A0B0D;}
nav a{
  font-family: 'Teko', sans-serif;
  font-size: 1.6em;
  color: #adaca8;
  text-decoration: none;
}
nav a:hover, nav a:active, #activelink{
  font-size: 1.6em;
  color: #fff;
  text-shadow: 0 0 10px white;
  text-decoration: underline;
}
li{
  display: inline-block;
  padding:5px 8px 0px 8px;
}
main{
  min-height: auto;
  margin:0 auto;
  margin-top:7px;
  margin-bottom:3px;
  padding:10px;
  padding-bottom: 50px;
  width:96%;
  max-width:1000px;
  border-radius: 6px;
  border: 1px solid #373b47;
  box-shadow: 0 0 2px black;
  background: #1E2126;
}
main a{
  font-family: 'Roboto', sans-serif;
  font-size: 1em;
  color: #eba174;
  text-shadow: 0 0 10px var(--orange);
  text-decoration: underline;
}
main a:hover{
  font-size: 1em;
  color: var(--text);
  text-shadow: 0 0 10px var(--orange);
  text-decoration: underline;
}

.promo {
    font-family: 'Roboto', sans-serif;
    font-size: 1.5em;
    color: #B5FF00;
    text-shadow: 0 0 10px #B5FF00;
    text-decoration: underline;
}


article{
  border-bottom: 50px solid transparent;
}

article img{
  display: block;
  margin:auto;
  max-width: 100%;
  height:auto;
}
article li{
  display: list-item;
  list-style-position: inside;
  list-style-type: square;
  padding-left:30px;
}

#copyright li{
  display: list-item;
  list-style-position: inside;
  list-style-type: lower-alpha;
  padding:10px 0px 10px 30px;
}

strong{
  color:white;
  font-weight: bold;
}
.fontstyles{
  position: relative;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  text-align: center;
}
.fontstyles img{
  border-radius: 10px;
}

.fontgallery{
  line-height: 0;
  -webkit-column-count: 5;
  -webkit-column-gap:   0px;
  -moz-column-count:    5;
  -moz-column-gap:      0px;
  column-count:         1;
  column-gap:           0px;
}

.charactergallery{
  line-height: 0;
  column-count:3;
  column-gap:  0px;
}
#showCharacters2,#showCharacters3,#showCharacters4,#showCharacters5,#showCharacters6,#showCharacters7,#showCharacters8,#showCharacters9,#showBackdrop2,#showBackdrop3,#showBackdrop4,#showBackdrop5 { display:none;}

.backdropgallery, .gizmosgallery{
  line-height: 0;
  column-count:1;
  column-gap:  0px;
}

#characters img{
  height:150px;
  width:auto;
}

footer{
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: center;
  width:100%;
  height:40px;
  background-color: #16181c;
  border-top: 1px solid #373b47;
}
footer p{
  width:100%;
  height:100%;
  padding-top: 12px;
  text-align: center;
  font-family: 'Roboto', sans-serif;
  font-size: 0.8em;
  color: #4d5364;
}
footer a{
  font-family: 'Roboto', sans-serif;
  font-size: 1em;
  color: #747A8A;

}
.footerContent{
  display: flex;
  justify-content: center;
}

.fontExample img{
  max-height: 500px;
  width: auto;
}

.fontInfo{
  display: grid;
  grid-template-columns: 1fr;
}

#fontInfo{ display:grid;}

#menuBackdrops,#menuShowcase{display:none;}

.characterContainer, .gizmoContainer, .customContainer, .customcharacterContainer, .fontContainer{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width:auto;
  max-height:auto;
  margin:0 auto;
  padding:2px;
}

.fontSelector{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width:auto;
  max-height:auto;
  margin:0 auto;
  padding:2px;
}

.krakenContainer img, .bulkyContainer, .complexContainer, .sleekContainer, .lowcaseContainer, .softContainer, .clusterContainer, .dimensionContainer, .wildstyleContainer {
    flex-grow: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: auto;
    max-height: auto;
    image
}

.characterContainer a, .gizmoContainer a{
  color: #adaca8;
  text-shadow: none;
  text-decoration: none;
}

.characterContainer img{
 max-height: 500px;
 max-width: auto;
}

.gizmoContainer img{
  max-height:150px;
  max-width: 260px;
 }

.customcharacterContainer img{
  max-height:600px;
  min-width: 500px;
 }

.customContainer img{
  max-height:230px;
  min-width: 230px;
 }

.clientContainer{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: stretch;
}

.clientContainer img{
 max-width:326px;
 min-height:200px;
}

.fontPreview{
  background: #191B1F;
  margin:10px;
  border: 1px solid #323642;
  border-radius: 3px;
}

.backdrops, .gizmos{
  width:100%;
  border-radius: 3px;
}

.backdrops p, .gizmos p{
  padding-top:20px;
  padding-bottom: -20px;
  width:100%;
  border-radius: 3px;
}

figure{
  display: block;
  width:90%;
  margin:0 auto;
}
figure p{
  padding-top: 20px;
}

button{
  border:none;
  color: rgba(0,0,0,0);
}

#portrait{
  width:200px;
  height: auto;
}

#mindgemgraphics{
  width:200px;
  height: auto;
  padding-bottom: 10px;
}

.bio{
  padding-bottom: 20px;
}

#copyright{
  padding-top: 10px;
  padding-bottom: 10px;
  background: #30343D;
  border: 1px solid black;
}

.characterTitle, .gizmoTitle{
  color:#444A59;
  position: relative;
  transition: all 0.5s;
  text-align: center;
}

#contact{
  padding:200px 0 500px 0;
  width:100%;
  text-align: center;
}

.characterContainer a:hover .characterTitle, .gizmoContainer a:hover .gizmoTitle{
  color: white;
  text-shadow: 0 0 20px white;
  z-index: 50;
}

.ad{
  width:96%;
  height:auto;
}

.gizmosgallery{
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.gizmosgallery img{
  max-width:100%;
  height:auto;
}

.showGizmo{
  display: none;
}

#customCharacterSamples{
  display: flex;
  flex-wrap: wrap;
}

.characterArticle{
  padding-bottom: 15px;
}

.fontContainer{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width:auto;
  max-height:auto;
  margin:0 auto;
  padding:2px;
}

.fontSelector{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width:auto;
  max-height:auto;
  margin:0 auto;
  padding:2px;
}

.loadButtons{
  margin-bottom: 30px;
  padding:10px;
  background-color: var(--green);
  border-color: #16181c;
  border-radius: 10px;
}

.loadButtons:hover{
  background-color: var(--greenLight);
  border-color: #16181c;
  border-radius: 10px;
}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
@media only screen and (min-width : 550px){

  .costinformation{
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .backdropContainer{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width:auto;
    max-height:auto;
    margin:0 auto;
    padding:5px;
  }
  
  .fontContainer img{
    min-width: 100px;
    max-width: 490px;
  }

  .characterContainer img, .gizmoContainer img{
    position: relative;
    transition: all 0.5s;
    max-height:200px;
    min-width: 100px;
    cursor: pointer;
  }


  .characterGrid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
  }

  #customCharacter img{
    max-width: 80%;
  }

  #customCharacterSamples img{
    max-width: 50%;
    min-width: 80%;
   }

  .gizmosgallery{
    display: flex;
  }
  
  .gizmosgallery img{
    max-width:100%;
    height:auto;
  }
  
  .showGizmo{
    display: flex;
  }

  .company{
    display: grid;
    grid-template-columns: repeat(1,1fr);
    align-items: baseline;
  }

  #mindgemgraphics{padding-bottom: 50px;}

  .bio{
    display: grid;
    grid-template-columns: repeat(1,1fr);
  }

  .company article{
    margin:10px;
  }

  figure img:last-child{display:none}
  figure:hover img:first-child{display:none}
  figure:hover img:last-child{display:inline-block}

  .fontInfo{
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  #fontInfo{
    display:grid;
    padding-top: 15px;
  }

  #menuBackdrops,#menuShowcase{display:inline;}

  #showCharacters2,#showBackdrop2{display: block;}
  .charactergallery{
    column-count:4;
  }
  #characters img{height:170px;}

  .backdropgallery, .gizmosgallery{
    line-height: 0;
    column-count:2;
    column-gap:  0px;
  }

  .fontstyles{
    display: flex;
  }

  .fontstyles img{
    position: relative;
    border-radius: 6px;
    transition: all 0.5s;
  }
  .fontstyles img:hover{
    -webkit-transform: scale(1.3);
          -ms-transform: scale(1.3);
          transform: scale(1.3);
          border-radius: 50%;
          box-shadow: 0 0 20px black;
          z-index: 20;
  }

  .clientContainer img{
    position: relative;
    transition: all 0.5s;
  }

  .clientContainer img:hover{
    -webkit-transform: scale(1.5);
          -ms-transform: scale(1.5);
          transform: scale(1.5);
          box-shadow: 0 0 20px black;
          z-index: 20;
  }

    .customcharacterContainer img {
        position: relative;
        transition: all 0.5s;
        max-height: 400px;
        min-width: 100px;
        cursor: pointer;
    }



  .characterTitle:hover, .gizmoTitle:hover{
    transform: scale(1.3);
  }

    .krakenContainer img, .charactergallery img, .gizmoContainer img, .softContainer img, .complexContainer img, .sleekContainer img, .bulkyContainer img, .lowcaseContainer img, .clusterContainer img {
        position: relative;
        border-radius: 6px;
        transition: all 0.5s;
    }
        .krakenContainer img:hover, .charactergallery img:hover, .characterContainer img:hover, .complexContainer img:hover, .gizmoContainer img:hover, .softContainer img:hover, .sleekContainer img:hover, .bulkyContainer img:hover, .clusterContainer img:hover, .lowcaseContainer img:hover {
            -webkit-transform: scale(1.5);
            -ms-transform: scale(1.5);
            transform: scale(1.5);
            z-index: 20;
        }

  .customContainer img{
    position: relative;
    border-radius: 6px;
    transition: all 0.5s;
  }
  .customContainer img:hover{
    -webkit-transform: scale(1.6);
          -ms-transform: scale(1.6);
          transform: scale(1.6);
          z-index: 20;
  }

  .characterTitle, .gizmoTitle{
    position: relative;
    border-radius: 6px;
    transition: all 0.5s;
  }
  .characterTitle:hover, .gizmoTitle:hover{
    -webkit-transform: scale(1.3);
          -ms-transform: scale(1.3);
          transform: scale(1.3);
          z-index: 28;
  }

  .backdropgallery img, .gizmos img{
    position: relative;
    border-radius: 6px;
    transition: all 0.5s;
  }
  .backdropgallery img:hover, .gizmos img:hover{
    -webkit-transform: scale(1.3);
          -ms-transform: scale(1.3);
          transform: scale(1);
          outline: solid 1px #fe5337;
          z-index: 20;
  }

  .fontgallery{column-count: 2;}

  .fontgallery img:active{
    transition-duration: 0.5s;
    -webkit-transform: scale(2);
    -ms-transform: scale(2);
    transform: scale(2);
    z-index: 20;
  }
}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
@media only screen and (min-width : 670px){

  .backdropContainer img{
    min-width: 300px;
    max-width: 800px;
  }

    .krakenContainer img, .bulkyContainer img, .complexContainer img, .sleekContainer img, .lowcaseContainer img, .softContainer img, .clusterContainer img, .dimensionContainer img, .wildstyleContainer img {
        max-width: 303px;
    }

  #showCharacters3{display: block;}
  .charactergallery{column-count:5;}

  .fontContainer img{
    min-width: 300px;
    max-width: 300px;
  }

}

@media only screen and (min-width : 720px){
  
  .fontSelector img{
    min-width: 300px;
    max-width: 100px;
  }

}


@media only screen and (min-width : 720px) and (orientation:landscape){
  .styleContainer img{max-width: 650px;}

}
/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
@media only screen and (min-width : 768px) and (orientation:landscape){

    .krakenContainer img, .bulkyContainer img, .complexContainer img, .sleekContainer img, .lowcaseContainer img, .softContainer img, .clusterContainer img, .dimensionContainer img, .wildstyleContainer img img {
        max-width: 405px;
    }

  #showCharacters4,#showBackdrop3,#showBackdrop4{display: block;}
  .charactergallery{
    column-count:6;
  }

  .backdropgallery, .gizmosgallery{
    line-height: 0;
    column-count:3;
    column-gap:  0px;
  }

  .characterProcess{ 
    display: grid;
    grid-template-columns: repeat(2,1fr); 
  }

  .customcharacterContainer img{
    position: relative;
    transition: all 0.5s;
    max-height:300px;
    min-width: auto;
    cursor: pointer;
  }

 


}
/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
@media only screen and (min-width : 1000px) and (orientation:landscape){

    .krakenContainer img, .bulkyContainer img, .complexContainer img, .sleekContainer img, .lowcaseContainer img, .softContainer img, .clusterContainer img, .dimensionContainer img, .wildstyleContainer img {
        max-width: 470px;
    }


  .backdrops p, .gizmos p{text-indent: 35px;}

  #showCharacters5{display: block;}
  .charactergallery{column-count:7;}

  #customCharacterSamples img{
    max-width: 33%;
    min-width: 80%;
  }
}
/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
@media only screen and (min-width : 1450px) and (orientation:landscape){

    .krakenContainer img, .bulkyContainer img, .complexContainer img, .sleekContainer img, .lowcaseContainer img, .clusterContainer img, .dimensionContainer img, .wildstyleContainer img {
        max-width: 489px;
    }

  .fontstyles{
    display: flex;
  }
  .fontstyles img{
  /*  min-width: 0;
    min-height: 20px;
    object-fit: contain;  USE THIS WITH FLEX on parent for higher windows */
    border-radius: 3px;
  }
}