header { min-height: 2.5em; width: 100%; position: fixed; z-index: 100; background-color: rgba(0, 0, 0, 0.5); }
header .background { visibility: hidden; position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; transform: scale(0); transition: all 0.3s ease-out; padding-top: 2vh; text-decoration: none; margin-top: 0; text-align: center; }
header .header:hover .background { visibility: visible; display: block; transform: scale(1); top: 0px; }
header .header:hover i { opacity: 0; }
header a, header a:hover { text-decoration: none; color: white; }
header i { text-decoration: none; margin-left: 50%; color: white; padding-top: 2vh; }
header .scrollto:hover { text-decoration: none; }
header .scrollto { text-decoration: none; color: white; font-family: 'Poiret One', cursive; padding-right: 2em; transition: all 0.3s ease-in; font-weight: bold; }
header a span { text-decoration: none; }

body #home { /* background-color : #ECDFBD; */ background-image: url(../images/home-bg.jpg); background-size: cover; min-height: 100vh; }
body #home .aboveLine { color: white; padding-top: 15vh; padding-left: 10vw; font-family: 'Poiret One', cursive; margin-bottom: 0; font-size: 10vh; }
body #home .belowLine { color: white; padding-left: 50vw; font-family: 'Poiret One', cursive; font-size: 10vh; }
body #home .row div { background-color: rgba(0, 0, 0, 0.4); color: #ECDFBD; text-decoration: none; display: inline-block; padding: 5vh; margin-left: 2vw; width: 10vw; text-align: center; transition: all 0.3s ease-in; }
body #home .phrase li { transition: scale(0); transition: all 0.5s ease-in-out; color: white; text-decoration: none; font-family: 'Poiret One', cursive; display: inline-block; font-size: 4vh; font-weight: bold; padding-left: 3vw; padding-right: 3vw; }
body #home .row { padding-top: 15vh; padding-left: 15vw; }
body #home .blocks { text-align: center; }
body #home ul { text-align: center; }
body #home .row div:hover { background-color: rgba(0, 0, 0, 0.7); }
body #home i { font-size: 7vh; }
body #about { background-color: #F0F1EE; width: 100%; min-height: 100vh; }
body #about h1 { padding-top: 5vh; padding-left: 45vh; font-family: left; font-weight: bold; font-size: 4vh; color: black; font-family: 'Poiret One', cursive; }
body #about p { font-family: 'Poiret One', cursive; /* font-family: 'Stalemate', cursive; */ text-align: center; padding-top: 5vh; font-size: 3vh; color: white; }
body #about img { float: right; transition: all 0.3s ease-in; height: 84vh; width: 17vw; }
body #about i { padding-left: 50vh; text-decoration: none; color: black; transition-property: transform, -webkit-transform; transition-duration: .3s; transition-timing-function: ease; transition: all 0.3s ease-in; }
body #about h2 { color: black; font-family: 'Poiret One', cursive; text-align: center; font-weight: bold; visibility: hidden; }
body #about .scroll { margin-top: 10vh; margin-left: 12vw; width: 40vh; padding-left: 15vh; text-align: center; }
body #about .scroll a { transition: all 0.3s ease-in; }
body #about a { text-decoration: none; color: white; text-align: center; border: solid white; font-family: 'Poiret One', cursive; padding: 2vh; font-size: 3vh; }
body #about a:hover { text-decoration: none; background-color: rgba(0, 0, 0, 0.2); }
body #about .inside_about { float: left; margin-top: 5vh; width: 55vw; height: 65vh; background-color: #3C4344; }
body #skills { background-color: #ECDFBD; width: 100%; min-height: 120vh; }
body #skills h1 { padding-top: 10vh; font-size: 4vh; font-family: 'Poiret One', cursive; text-align: center; font-weight: bold; }
body #skills img { padding-top: 5vh; height: 17vh; }
body #skills h3 { font-family: 'Poiret One', cursive; text-align: center; font-size: 4vh; }
body #skills .icons { background-color: white; margin-right: 4vw; width: 20vw; margin-top: 5vh; height: 35vh; text-align: center; }
body #skills .insideSkills { margin-left: 5vh; }
body #skills .progress-bar { background-color: #FB6648; }
body #projects { background-color: #E0AF00; min-height: 120vh; width: 100%; }
body #projects img { padding-top: 0; height: 30vh; width: 40vh; margin-left: 5vh; }
body #projects .inside-projects { height: 7vh; width: 70vh; margin-top: 10vh; margin-left: 27vw; text-align: center; background-color: rgba(1, 0, 0, 0.1); }
body #projects .top { color: white; font-family: 'Poiret One', cursive; font-size: 4vh; text-align: center; }
body #projects .bottom { color: white; font-family: 'Poiret One', cursive; font-size: 3vh; text-align: justify; font-weight: bold; }
body #projects h3 { font-family: 'Poiret One', cursive; padding-top: 0; font-weight: bold; }
body #projects hr { color: black; margin-left: 50vh; }
body #projects .demo { margin-left: 0vh; }
body #projects .github { margin-left: 5vh; }
body #projects a { text-decoration: none; color: #fff; font-family: 'Poiret One', cursive; border: 1px solid #6d6256; background-color: rgba(0, 0, 0, 0.4); font-size: 1em; text-transform: uppercase; letter-spacing: 2px; margin-top: 2vh; height: 5vh; width: 20vh; padding-left: 1em; padding-right: 1em; }
body #projects a:hover { background-color: rgba(0, 0, 0, 0.3); border-color: white; text-decoration: none; }
body #projects button:hover { opacity: 0.7; }
body #projects .description { border-left: solid; }
body #projects section { padding-top: 10vh; }
body #contact { background-image: url("../images/contact-bg.jpg"); background-size: cover; /* background-color: #515151; */ min-height: 120vh; width: 100%; }
body #contact .sep { width: 25vw; margin-top: 10vh; }
body #contact h2 { font-family: 'Poiret One', cursive; color: white; margin-left: 37vw; margin-top: 7vh; font-size: 5vh; }
body #contact hr { text-align: center; }
body #contact .name { margin-top: 7vh; margin-left: 23vw; padding-left: 1vw; width: 20vw; height: 7vh; color: white; font-family: 'Poiret One', cursive; border: 1px solid #6d6256; }
body #contact .email { margin-left: 2vw; margin-top: 7vh; padding-left: 1vw; width: 20.5vw; height: 7vh; color: white; font-family: 'Poiret One', cursive; border: 1px solid #6d6256; }
body #contact .comments { margin-left: 23vw; margin-top: 3vh; padding-left: 2vh; width: 43vw; height: 30vh; color: white; font-family: 'Poiret One', cursive; border: 1px solid #6d6256; }
body #contact #contact_i ::-webkit-input-placeholder { font-family: 'Poiret One', cursive; color: white; font-size: 1.2em; }
body #contact #contact_i :-moz-placeholder { /* Firefox 18- */ font-family: 'Poiret One', cursive; color: white; font-size: 1.2em; }
body #contact #contact_i ::-moz-placeholder { /* Firefox 19+ */ font-family: 'Poiret One', cursive; color: white; font-size: 1.2em; }
body #contact #contact_i :-ms-input-placeholder { font-family: 'Poiret One', cursive; color: white; font-size: 1.2em; }
body #contact input { background-color: rgba(0, 0, 0, 0.6); }
body #contact textarea { background-color: rgba(0, 0, 0, 0.6); }
body #contact button { color: #fff; font-family: 'Poiret One', cursive; border: 1px solid #6d6256; background-color: rgba(0, 0, 0, 0.6); font-size: 3vh; text-transform: uppercase; letter-spacing: 1vh; text-align: center; margin-left: 40vw; margin-top: 5vh; height: 5vh; width: 10vw; }
body #contact button:hover { border-color: white; opacity: 0.8; }

footer { background-color: rgba(255, 51, 51, 0.8); min-height: 45vh; width: 100%; }
footer a { text-decoration: none; font-size: 2vh; }
footer h3 { color: white; text-align: center; font-family: 'Poiret One', cursive; font-weight: bold; }
footer i { color: white; text-align: center; }
footer p { text-decoration: none; color: white; font-family: 'Poiret One', cursive; text-align: center; font-weight: bold; }
footer .contact-section { margin-top: 10vh; }
footer p a { color: white; transition: all 0.3s ease-in; }
footer p a:hover { text-decoration: none; color: white; }
footer .copyright { text-align: center; color: white; margin-top: 3vh; }
footer .fa { padding-right: 2vw; }
footer .fa-github:hover { color: black; }
footer .fa-linkedin:hover { color: #0077B5; }
footer .fa-facebook:hover { color: #3B5998; }
footer .fa-twitter:hover { color: #2BA8DE; }
footer .fa-google-plus:hover { color: #DD4B39; }