@import 'https://fonts.googleapis.com/css?family=Raleway';
@import 'https://fonts.googleapis.com/css?family=Advent+Pro:100|Alegreya+Sans+SC:100|Exo+2|Josefin+Sans:100|Lato|Montserrat|Open+Sans:300|Wire+One|Work+Sans|Yanone+Kaffeesatz:200';
@import 'https://fonts.googleapis.com/css?family=Alegreya+Sans+SC';
@import 'https://fonts.googleapis.com/css?family=Roboto';
@import 'https://fonts.googleapis.com/css?family=Montserrat';
/*
font-family: 'Exo 2', sans-serif;
font-family: 'Lato', sans-serif;
font-family: 'Work Sans', sans-serif;
font-family: 'Montserrat', sans-serif;
font-family: 'Josefin Sans', sans-serif;
font-family: 'Yanone Kaffeesatz', sans-serif;
font-family: 'Wire One', sans-serif;
font-family: 'Alegreya Sans SC', sans-serif;
font-family: 'Advent Pro', sans-serif;
*/
body, html {
    background: #fafafa;
	color: rgb(90, 90, 90);
    font-family:'Montserrat', sans-serif;
    font-weight: 100;
	margin: 0;
    height: 100%;
    font-size:14px;
}



*{
    border: 0px solid rgb(202, 202, 202);
    margin: 0;
    padding: 0;
}


.blink {
    animation: blink 1s steps(5, start) infinite;
    -webkit-animation: blink 1s steps(5, start) infinite;
  }
  @keyframes blink {
    to {
      visibility: hidden;
    }
  }
  @-webkit-keyframes blink {
    to {
      visibility: hidden;
    }
  }

nav{
    float: right;
    display: none;
}
p{
    margin: 3px 0 3px 0;
}
#banner-container{
    background-image: url(images/banner.png);
    height: 100%;
    background-repeat: no-repeat;
}
#banner-container{
    background-attachment:fixed;
    background-position: center;
    background-size: cover;
}

#banner-container #banner-text{
    color: #f5f5f5;
    position: absolute;
    float: left;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: Raleway;

}

#banner-text #p1, #banner-text, .font-big{
    font-size: 100%;
    display: inline;
}
.font-big{
    font-size: 500%;
}
.project-link, .project-link:visited{
    color: rgb(124, 124, 124);
    font-family: 'Raleway', sans-serif;

    font-size: 80%;
    font-weight: lighter;
    text-decoration-line: none;

    padding: 1%;
    border: 1px solid rgb(156, 156, 156);
}
.project-link:hover{
    text-decoration: underline;
    border-color: transparent;
}
#banner-click ul{
    list-style: none;
}
#banner-click ul li{
    display: inline-block;
}
#banner-click ul li a, #banner-click ul li a:visited{
    color: #f3f3f3;
    font-size: 100%;
    font-weight: lighter;
    text-decoration-line: none;
    font-family: 'Alegreya Sans SC', sans-serif;
    padding: 1%;
    border-style: solid;
    border-width: 1px;
    border-color: #f5f5f5;
    color: #f5f5f5;
    position: absolute;
    float: left;
    top: 95%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#banner-click ul li a:hover{
    text-decoration: underline;
}
.heading{
    text-align: center;
    font-weight: lighter;
    margin: 5% 0 2% 0;
    font-family: 'Raleway', sans-serif;
    font-size: 150%;
    
}

.skills-container{
    display: inline-block;
    margin-left: 0%; /* From parent width */
    transform: translateX(0%); /* use self width which can be unknown */
   -ms-transform: translateX(0%); /* For IE9 */
   position: relative;
   width: 100%;
   
}
.one-third{
    width: 32.9%;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    font-size: 300%;
   
}
.one-third article{
    margin: 2% 0 0 0;
    font-size: 33.333%;;
}
.one-third article p{
    margin-top: 2%;
}

.project-highlight{
    font-weight: bold;
}

.personal-projects-container{
    display: inline-block;
    margin-left: 15%; /* From parent width */
    transform: translateX(0%); /* use self width which can be unknown */
   -ms-transform: translateX(0%); /* For IE9 */
   position: relative;
   width: 70%;
}
.personal-projects-container .half{
    width: 49%;
    display: inline-block;
    vertical-align: top;
    margin: 0 0 7% 0;

}
img{
    height: 50%;
}
.right-img img{
    float: right;
    
}
.bold{
    font-weight: bold;
}
.resume-container{
    display: inline-block;
    margin-left: 15%; /* From parent width */
    transform: translateX(0%); /* use self width which can be unknown */
   -ms-transform: translateX(0%); /* For IE9 */
   position: relative;
   width: 70%;
}
.left-resume, .right-resume{
    display: inline-block;
    vertical-align: top;
    
}
.left-resume{
    width: 35%;
}
.right-resume{
    width: 64%;
}
.right-resume aside{
    margin: 0% 0 2% 0;
}
.right-resume aside .experience{
    margin: 0% 0 1% 0;
}
.footer-container{
    margin-top: 5%; 
    background-color: black;
}
.first-footer{
    margin-top: 5%;
    display: inline-block;
    margin-left: 50%; /* From parent width */
    transform: translateX(-50%); /* use self width which can be unknown */
   -ms-transform: translateX(-50%); /* For IE9 */
}
.first-footer ul li{
    display: inline-block;
   
}
.first-footer ul li, .first-footer ul li a:visited, .first-footer ul li a{
    font-size: 25px;
    color: rgb(214, 214, 214);
}
.copyright{
    color: rgb(214, 214, 214);
    display: inline-block;
   margin-left: 50%; /* From parent width */
   transform: translateX(-50%); /* use self width which can be unknown */
  -ms-transform: translateX(-50%); /* For IE9 */
    margin-bottom: 5%;
    margin-top: 1%;
    font-size: 80%;
    text-align: center;
}