body {
    font-family: "Lato", sans-serif;
    z-index:0;
    height: 100%;
    width: 100%;
    letter-spacing:1px;
}

#contents{
  display:none;
}
/*.under-intro{
  height:100vh;
  z-index:-1;
}*/
.intro{
  position: relative;
  height: 100vh;
  max-height: 100vw;
  background-image: url("../images/gg-bridge.jpg");
  background-position: bottom left;
  background-repeat: no-repeat;
  background-size: cover;
  transition:0.3s;
}

.header{
  position:absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, 0);
}

.webdev {
  font-size:16px;
/*  margin-left: 110px;
*/}

.my-name{
  font-size: 60px;
}
.more{
  display:none;
  position: absolute;
  left: 50%;
  bottom: 10%;
  transform: translate(-50%, 0);
}

.row{
  margin-left:0px !important;
  margin-right:0px !important;

}
.arrow{
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  color:white !important;
  text-decoration:none !important;

}

.arrow:hover{
  color:white;
  text-decoration:none !important;
}

#about-button{
  color:white;
  text-decoration:none;
}

#info-section{
  margin-top: -55px;
  padding-top: 55px;
  background-color:#333333;
  height:230px;
  color:white;
}

.basic-info{
  margin-top: 50px;
}

.skills-header{
 font-size:20px;
 font-weight:lighter;
 letter-spacing: 2px;
 padding-top:25px;
}

.skills{
  margin-top:15px;
  text-decoration:none;

}

.br{
  border-bottom: 2px solid #4f4f4f ;
  padding:5px;
  letter-spacing: 1px;

}

.info-box{
  border-left: 2px solid #3d3d3d ;
}

.skills-box{
  border-left: 2px solid rgba(79, 79, 79, .5) ;
}

.tech-box{
  border-left: 2px solid rgba(61,61,61, 0.8) ;
  background-color: #474747;
  padding-bottom: 30px;
}

.keyboard{
  color:#4380db;
}

.code-left{
  color:#e95950;
}

.id-card{
  color:#44a33c;

}

.left-icons{
  margin-top:30px;
}

#info-section2{
  height:235px;
  background-color:#3d3d3d;
  color:white;
}

#info-section3{
  height:290px;
  background-color:#474747;
  color:white;
}

.about-section{
  margin-top: -55px;
  padding-top: 55px;
  height:430px;
  /* background-color: #eff0f4; */
/*  border-bottom: 2px solid rgba(175, 170, 180, .4);
*/}

.bg-section{

  /* background-color: #eff0f4; */
  /* height:1750px; */
}

.bg-header{
  margin-bottom:40px;
}

.event{
  border-left:2px solid #a6bbdd;
}

.event-container{
  margin-bottom:80px;
}

.about-header, .bg-header{
  padding-top:40px;

}

.section-header{
    padding-bottom: 8px;
    border-bottom:2px solid #a6bbdd;
    font-size: 40px;
    font-weight:200;
}

.img-me{
  width:190px;
  height:auto;
  padding-top:40px;
}

.bio{
  padding-top:40px ;
  padding-bottom:40px;
  margin-left:20px;
  margin-bottom:40px;
}

#buddha{
  width:40px;
  height:auto;
}

.fa-leaf{
  color:#44a33c;
}

.fa-desktop{
  color:#748bb2
}

.fa-bar-chart{
  color:#c96ab4;
}

.glyphicon-fast-forward {
  font-size: 35px;
  color:#e5802d
}

.glyphicon-road{
  padding:20px 0 0 17px;
  font-size: 20px;
}

.glyphicon-briefcase{
  font-size: 20px;
  padding: 18px 0 0 23px;
}

.glyphicon-modal-window {
  font-size: 35px;
}


.fa-child{
  color:#b50514;
}

.bio-container{
}

.fa-user-circle{
  color:#2a3672;
  margin-top: 100px;
}

.form{
  width:1000px;
  background-color:blue;
}

.fa-book{
  color:#83caf7;
}

.project{
  border:2px solid gray;
  height:300px;
}

.portfolio-section {

  /* background-color:#eff0f4; */
  /* height: 1250px; */
  margin-top: -55px;
  padding-top: 55px;
}

.portfolio-header {
  margin-top: 50px;
  margin-bottom: 50px;
}

.well.portfolio-container{
  text-align: center;
  margin: 0 auto 60px;
  width:90%;
}


.project{
  position:relative;
  overflow:hidden;
  padding:0px !important;
}

.project-1{

}

.project-img{
  width:450px;
  height: 280px;
  max-width:450px;

}

.proj{
  display:inline-block;
  position: relative;
  padding:0px;
  margin: 20px 15px;
}

.caption {
  position:absolute;
  background:rgba(21, 33, 51, 0.9);
  height:100%;
  width:100%;
  margin:0%;
  display: none;
  text-align:center;
  text-decoration:none !important;
  color:#fff !important;
  z-index:2;
  padding:20px;
}

.caption-text {
  position:relative;
  top: 50%;
  transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  }

.contact-section {
  clear: both;
  margin-top: -55px;
  padding-top: 55px;
   padding-bottom:55px;
  /*height:340px;*/
  background-color: #eff0f4;
}

.contact-header {
    max-width: 700px;
    margin: 0 auto;
    text-align:center;
}

.contact-sub {
  margin-left:20px;
}

.email-me {
  margin-top:60px;
    text-align:center;
}
.email-me div{
  margin:0 auto;
}

.email-button{
  padding: 20px;
  border: 1px solid gray;
  width:90%;
  margin:0 auto;
  font-size:20px;
  text-decoration: none !important;
  color:black;
}

.footer{
  height:90px;
  background-color:#3d3d3d;
  color:white;
  text-align:center;
  padding:35px;
}

.sidenav {
  position:relative;
  padding-top: 55px;
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  background-color: white;
  transition: 0.3s;
  box-shadow: 0 0px 4px rgba(175, 170, 180, .2);
/*  border-left: 2px solid rgba(175, 170, 180, 0.2)
*/}

.slidies{
  line-height: 58px;
  text-align:center;
  height:58px;
  width: 120px;
  text-decoration: none;
  font-size: 14px !important;
  color: #748bb2;
  display: block;
  position:relative;
  z-index:1;
  overflow:visible;
  border-top:1px solid rgba(175, 170, 180, .2);;
  border-left: 1px solid rgba(175, 170, 180, .2);
  border-bottom: 1px solid rgba(175, 170, 180, .2);
  transition: 0.2s;
  cursor:pointer;
  background-color: white;

}

.slidies:hover{
  color: #748bb2 !important;
  text-decoration: none;
}

.slidy-social{
  line-height: 58px;
  height:58px;
  width: 200px;
  text-decoration: none;
  font-size: 16px !important;
  color: #748bb2;
  display: block;
  position:relative;
  z-index:1;
  overflow:visible;
  cursor:pointer;
}

.social-buttons{
  line-height: 42px;
  margin-top:8px;
  margin-left: 5px;
  border:2px solid  white;
  color:white;
  height: 42px;
  width:55px;
  display: inline-block;
  padding: 0 0 15px 17px;
  transition: 0.3s;
}

.social-buttons:hover{
  background-color: #d88aa8;
}

.insta-button{
  background-color: #e95950 ;
}

.li-button{
  background-color: #8b9dc3;
}

.gh-button{
  background-color: black;
}

.menu-items {
  text-decoration: none;
  height:57px;
  width: 65px;
  font-size: 25px;
  color: #748bb2;
  display: block;
  z-index:2;
  background-color:white;
  box-shadow: 0 1px 1px rgba(175, 170, 180, .2);
}

.menu-top{
  position:absolute;
}

.connect{
  bottom:0;
  position:absolute;
  cursor: pointer;
}

.menu-bottom{
  position:absolute;
  bottom:0;
  border-top: 1px solid rgba(175, 170, 180, .4);
}

.menu-bottom:hover{
  background-color: #748bb2;
}
.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

.bm{
  position:absolute;
  margin-left: 20px;
  top:10px;
  font-size: 25px;
}

@media screen and (max-height: 435px) {
  .sidenav a {font-size: 18px;}
  .intro{color:grey;}
  .more{display:none;}
}

@media screen and (min-width: 750px) and (max-width: 1000px) {
  .my-name{font-size: 60px; }
}

@media screen and (min-width: 495px) and (max-width: 749px) {
  .my-name{
    font-size: 32px;
    margin-left:0 !important;
    text-align: center;
  }
  .webdev{margin-left: 0px;}
}

@media screen and (max-width: 554px) {
  .my-name{
    font-size: 32px;
    margin-left:0 !important;
    text-align: center;
  }
  .webdev{margin-left: 0px; font-size:12px;}
  .img-div{display:none;}
}

@media screen and (max-height: 454px) {
  #connect-id{
    display:none;
  }
}

@media screen and (min-width: 1070px) and (max-width: 1242px) {
  .project-img{
    width:400px;
    height: auto !important;
  }
}

@media screen and (min-width: 870px) and (max-width: 1070px) {
  .project-img{
    width:300px;
    height: auto !important;
  }
  .portfolio-container{
    padding-left:10% !important;
  }
}

@media screen and (max-width: 870px) {
  .project-img{
    width:100%;
    height: auto !important;
  }
}


@media screen and (max-width: 992px) {
  #info-section, #info-section2{
    height:300px;
  }

  #info-section3{
    height:355;
  }
  .id-card, .left-icons{
    display:none;
  }
  p {
    font-size:12px;
  }
  .glyphicon-fast-forward{
    display:none !important;
  }
}

nav {
box-shadow: 0 1px 1px rgba(175, 170, 180, 0.2);
  border-radius:0 !important;
  background-color: white;
  height:55px;
}

#menu-button {
  float:right;
  margin-right:22px;
  margin-top: 8px;
}

.menu-toggle{
  width:65px !important;
}

.loader {
  margin-top: -70px;
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: url('../images/preloader_2.gif') 50% 50% no-repeat white;
  background-size: 160px 160px;
}

.bolt{
  margin-left: 7px
}

.icon{
  padding:20px 0 0 22px;
  font-size: 20px;
}

.icon-social{
  padding:0 0 20 22px;
    font-size: 20px;
}

