img { width: 100%; height: 200px; }
.showcaseitem { margin-bottom: 40px; padding: 30px; color: #E53935;}

body { font-family: 'Oswald', sans-serif; font-weight: 700; 
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none; 
  user-select: none;    
  background: #d2d2d2;
}
.brandtex { font-weight: bold; }
.contact img { width: 3em; margin: 2px;}
.contact {  text-align: center; width: 100%; 
overflow: hidden; background: #e74c3c; border-bottom: 2px solid #282830;
padding-top: 3px;
}
.showcasetechp { text-align: center; }
.cont { border: 1px solid black; border-bottom: 1px solid #282830; border-radius: 20%; padding: 6px;}
footer {  clear: both; padding: 14px;
          text-align: center; color: #EEEEEE;
          background: #F44336; overflow: hidden; height: 50px;
          margin-top: 60px;
}
footer a, footer a:visited, footer a:active, footer a:hover, footer a:focus {
  color: #212121;
}

.fa-angle-down { font-size: 2em; color: white;  }

.brand { margin-top: 140px; }
.brand .brandtex a{ color: black; }
.brand .brandtex span { font-size: 0.6em; }
.header { height: 360px;
          width: 100%; text-align: center; overflow: hidden; 
          color: black; font-family: 'Indie Flower', cursive; font-size: 1.5em;
          border-bottom: 15px solid #D32F2F;
          background: -webkit-linear-gradient(90deg, #E01931,#e74c3c); /* For Safari 5.1 to 6.0 */
          background: -o-linear-gradient(90deg, #e74c3c, #E01931); /* For Opera 11.1 to 12.0 */
          background: -moz-linear-gradient(90deg, #e74c3c, #E01931); /* For Firefox 3.6 to 15 */
          background: linear-gradientgradient(90deg, #e74c3c, #E01931); /* Standard syntax */
          background: #E53935;
}
.navigator { position: absolute; top: 1%; width: 100%; text-align: right; font-size: 1em;}
.githublink { position: absolute; left: 3%; top: 3%; }
.githublink img { width: 3em; }
.navigator ul { list-style: none; }
.navigator img { width: 2em }
a:link { text-decoration: none; color: #FCB941;}
a:hover { text-decoration: none; color: #D4D4D4; }
a:visited { color: #FCB941; text-decoration: none; }
a:active { color: #FCB941; text-decoration: none; text-decoration: none;}
.portfolio { width: 80%;  margin: 4% auto; background: #d2d2d2; background-size: cover;}
.showcase { position: relative; padding: 20px; text-align: center; padding: 50px;}
svg { width: 2em; height: 2em; }
.showcaseitem img { box-sizing: border-box; width: 90%; height: 200px; overflow: hidden; margin: auto; }
.fa-angle-left { font-size: 1em !important;}

@media screen and (max-width: 900px) {
  .brand { margin-top: 5%; }
  .header { height: 20%; color: #B71C1C;}
  .showcaseitem h3 { text-size: 0.8em; }
  .showcase {
        width: 50%;
    }
    svg { 
      width: 1.5em;
      height: 1.5em; 
    }
    
}

@media screen and (max-width: 700px) {
  .brand { margin-top: 5%; }
  .header { height: 20%; }
  .showcaseitem h3 { text-size: 1em; width: 50%;}
  .showcase {
        width: 100% ;
    }
    svg { 
      width: 1em;
      height: 1em; 
    }
}