body {
    overflow-x: hidden;
    font: 400 15px Lato, sans-serif;
    line-height: 1.8;
    color: #818181;
}
@font-face {
  font-family: 'Jaapokki';
  src: url('../fonts/Jaapokki-Regular.otf');
  src: url('../fonts/jaapokki-regular.eot');
  src: url('../fonts/jaapokki-regular.eot?#iefix') format('embedded-opentype'),
       url('../fonts/jaapokki-regular.woff') format('woff'),
       url('../fonts/jaapokki-regular.ttf') format('truetype'),
       url('../fonts/jaapokki-regular.svg#Jaapokki-Regularegular') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Shumi';
  src: url('../fonts/Shumi.otf');
}
.navbar {
    margin-bottom: 0;
    overflow: hidden;
    z-index: 999;
    border: 0;
    font-size: 12px !important;
    line-height: 1.42857143 !important;
    letter-spacing: 3px;
    border-radius: 0;
    font-family: ADAM.CG PRO;
}
#navbarstick{
  background-color: #ffffff;
  -webkit-transition: background-color 0.35s;
}
#newcolor{
  color:#ef003b;
}
.navbar li a, .navbar .navbar-brand {
    color: #ffffff;
    -webkit-transition: background-color 0.25s;
}
.navbar-brand {
    color: #ffffff;
    font-family:Shumi;
    letter-spacing: 0px;
    font-size: 30px;
}
.navbar-nav li a:hover, .navbar-nav li.active a {
     color:#ffffff  !important;
     background-color: #ef003b !important;
 }
.icon-bar{
background-color:#ffffff;
}
#newbgcolor{
background-color:#ef003b;
}
button {
background-color: #b50021;
color: #ffffff;
-webkit-transition: background-color 0.25s;
}
button:hover {
    background-color: #ff3952;
    color: #ffffff;
}
.bigimage{
  height:100%;
  position: fixed;
   z-index: -1;
  }
#home{
        padding-top: 25vh;
       text-align: center;
       margin:auto;
       color:#ffffff;
       font-family: Jaapokki;
       height:100vh;
   }
   #about{
     font-family: Jaapokki;
     background-color: #ffffff;
     color:#38040b;
     font-size: 18px;
   }
   #skills{
     font-family: Jaapokki;
     background-color: #ffffff;
     color:#38040b;
     font-size: 18px;
     text-align: center;
     padding-top: 70px;
     padding-bottom: 50px;
   }
   #skills h4{
     color: #d8002b;
   }
   #skills .row{
     text-align: center;
   }
   #skills .row .col-sm-4 ul{
     list-style-type: none;
     display: inline;
   }
  #strip{
    font-size:15px;
  }
  #home h1{
     font-size: 7vw;
   }
   #about h1, #skills h1{
     color: #c10029;
     display: inline-block;
     border-bottom: solid 2.5px #c10029;
     padding-bottom: 3px;
   }
   #about .row{
   padding-top: 100px;
   padding-bottom: 50px;
 }
 #about .row .col-sm-5 img{
   display: block;
   margin-left: auto;
  margin-right: auto;
 }
 #projects{
   font-family: Jaapokki;
   background-color: #ff4959;
   color:#ffffff;
   font-size: 18px;
   text-align: center;
   padding-top: 50px;
 }
 #games{
   font-family: Jaapokki;
   background-color:  #ffffff;
   color:#ff5d6b;
   font-size: 18px;
   text-align: center;
   padding-top: 40px;
   margin-top: 50px;
   width:100%;
   height:100%;
 }
 #projects h1{
     color: #ffffff;
     display: inline-block;
     border-bottom: solid 2.5px #ffffff;
     padding-bottom: 3px;
 }
 #projects h4{
   color:#ffffff;
 }
 #projects .row .col-sm-4 img{
   box-shadow: 10px 10px 10px rgb(255, 55, 85);
   margin: auto;
   transition: .25s ease;
 }
 #projects .row .col-sm-4 img:hover{
   box-shadow: 15px 15px 15px rgb(237, 57, 84);
   margin: auto;
 }
 #projects .row .col-sm-6 img{
   box-shadow: 10px 10px 10px rgb(255, 55, 85);
   margin: auto;
   transition: .25s ease;
 }
 #projects .row .col-sm-6 img:hover{
   box-shadow: 15px 15px 15px rgb(237, 57, 84);
   margin: auto;
 }
 #projects .row .col-sm-2 img{
   box-shadow: 10px 10px 10px rgb(255, 55, 85);
   margin: auto;
   transition: .25s ease;
 }
 #projects .row .col-sm-2 img:hover{
   box-shadow: 15px 15px 15px rgb(237, 57, 84);
   margin: auto;
 }
 #projects .row{
   margin: auto;
 }
 #socialmedia{
   font-family: Jaapokki;
   background-color: #ff4959;
   color:#ffffff;
   font-size: 18px;
   text-align: center;
   margin:auto;
   padding: 10px;
   font-size: 14px;
   padding-top: 25px;
 }
 #i{
   display: inline-block;
   margin: 0 auto;
 }
 #c{
   padding-left: 5px;
 }
 .modal-content{
   color: #d8002b;
   font-family: Jaapokki;
   z-index: 99999999999;
   padding-bottom: 25px;
 }
.slideanim {visibility:hidden;}
.slide {
    animation-name: slide;
    -webkit-animation-name: slide;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    visibility: visible;
}
@keyframes slide {
  0% {
    opacity: 0;
    transform: translateY(70%);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}
@-webkit-keyframes slide {
  0% {
    opacity: 0;
    -webkit-transform: translateY(70%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0%);
  }
}
@media screen and (max-width: 768px) {
  .col-sm-4 {
    text-align: center;
    margin: 25px 0;
  }
  .btn-lg {
      width: 100%;
      margin-bottom: 35px;
  }
}
@media screen and (max-width: 480px) {
  .logo {
      font-size: 150px;
  }
}