@import url(https://fonts.googleapis.com/css?family=Poppins:400,500,700);body,html{height:100%;width:100%;font-family:Popins,sana-serif;color:#222;overflow-x:none}.btn{background:#8ce2ea;text-align:center;padding:15px;border-radius:5px;color:#222;cursor:pointer}.navbar{padding:.8rem;background-color:#8ce2ea!important;opacity:.9!important}.navbar-nav li{padding-right:20px}.navbar .navbar-nav li a:hover{color:#fff!important}.nav-link{font-size:1.1em!important}.head-img{width:100%;height:auto;background-size:cover;background-position:center;background-repeat:no-repeat}.caption h1{font-size:600%;text-shadow:1px 1px 15px #8ce2ea;position:absolute;top:50%;left:30%;transform:translateY(-50%);color:#222}.caption h2{font-size:200%;text-transform:uppercase;text-shadow:1px 1px 15px #8ce2ea;position:absolute;top:65%;left:5%;transform:translateY(-50%);text-align:center;color:#222;font-weight:700;width:80%;padding-left:10%}.caption .fa-github{font-size:200%;text-transform:uppercase;text-shadow:1px 1px 15px #8ce2ea;position:absolute;top:70%;left:45%;text-align:center;color:#b00}.caption .fa-linkedin{font-size:200%;text-transform:uppercase;text-shadow:1px 1px 15px #8ce2ea;position:absolute;top:70%;left:55%;text-align:center}.top-hr{position:absolute;border:30px solid #000;width:50%;top:55%;left:22%;border:2px solid #b00;align-content:center}.padding{padding:0;margin:0}.welcome{width:75%;margin:0 auto;padding-top:2rem}.welcome hr{border-top:2px solid #b4b4b4;width:95%;margin-top:.3rem;margin-bottom:1rem}.fa-battery-full,.fa-bold,.fa-keyboard,.fa-paint-brush,.fa-stopwatch{font-size:3rem;margin:1rem;color:#8ce2ea}h2{color:#222}.title{font-weight:700;font-size:20px;color:#222}.bar{width:90%;height:30px;background:#444;border-radius:5px;position:relative;transition:all 2s linear}.bar-1,.my-skills{width:80%;margin:10px auto 25px}.bar-inner{width:0;height:30px;line-height:35px;background:#8ce2ea;border-radius:5px 0 0 5px}.bar-percent{position:absolute;right:10px;top:5px;font-size:18px;color:#fff}button{cursor:pointer}#portfolio{width:100%;min-height:100vh;background:#fff;position:relative;display:grid;grid-template-columns:repeat(3,minmax(200px,1fr));grid-template-rows:1fr 1fr;grid-gap:30px}.project{position:relative;background:#f2dad7;height:350px;overflow:hidden;border-style:solid;border-width:5px;border-color:#444}.project img{position:absolute;height:100%;width:100%;opacity:.9;background-size:cover;background-position:center;background-repeat:no-repeat}.project .grid__overlay p{position:absolute;text-align:center;width:100%;top:0;font-weight:bolder;padding:1em 0;text-transform:uppercase;letter-spacing:2px;z-index:3}.project .grid__title{position:absolute;width:100%;text-align:center;white-space:nowrap;bottom:0;font-weight:100;font-size:.8em;z-index:3;text-transform:uppercase;color:#474545;letter-spacing:2px}.project:hover .grid__overlay{transform:translateY(0)}.grid__overlay{background:#8ce2ea;opacity:.9;height:100%;grid-column:1/-1;grid-row:1/-1;position:relative;display:grid;justify-items:center;align-items:center;transform:translateY(101%);transition:all .3s ease-in-out}.grid__overlay button{background:0 0;outline:0;font-weight:100;letter-spacing:2px;border:1px solid #fff;color:#fff;text-transform:uppercase;padding:10px}.grid__overlay button:hover{transition:all .3s ease-in-out;background:#fff;color:#8ce2ea;transform:scale(1.05)}.social a{font-size:2rem;padding:2rem}.fa-facebook{color:#3b5998}.fa-twitter{color:#00aced}.fa-google-plus-g{color:#dd4b39}.fa-instagram{color:#517fa4}.fa-youtube{color:#b00}.fa-angle-double-up:hover,.fa-facebook:hover,.fa-github:hover,.fa-google-plus-g:hover,.fa-instagram:hover,.fa-twitter:hover,.fa-youtube:hover{color:#d5d5d5}footer{background-color:#3f3f3f;color:#d5d5d5;margin-top:40px;height:250px}hr.light{border-top:1px solid #b00}.home_button a{font-size:2rem;color:#8ce2ea}.contact-form{display:flex;width:100%;margin:0 auto;background-color:#3f3f3f;padding:30px;border-radius:5px;box-shadow:0 0 10px rgba(0,0,0,.3)}.input-fields{display:flex;flex-direction:column;margin-right:4%;margin-top:6px;box-sizing:border-box;margin-bottom:16px;resize:vertical}.input-fields,.msg{width:50%}.input-fields .input,.msg textarea{margin:10px 0;background:#fff;border:0;border-bottom:5px solid #c5ecfd;padding:10px;color:#444;width:100%}.msg textarea{height:212px}.modal{position:fixed;background:rgba(71,69,69,.7);top:0;right:0;bottom:0;left:0;display:none;z-index:3}.modal-content{background-color:#fff;margin:20% auto;width:70%;box-shadow:0 5px 8px rgba(0,0,0,.2),0 7px 20px 0 rgba(0,0,0,.17);animation-name:modalopen;animation-duration:1s}.modal-footer h3,.modal-header h2{margin:0}.modal-header{background:#8ce2ea;padding:15px;color:#fff}.modal-body{padding:10px 20px;text-align:left}.modal-footer{background:#8ce2ea;padding:10px;color:#fff;text-align:center}.modal-footer a{color:#fff}.modal-footer a:hover{color:#000}.closeBtn{color:#fff;float:right;font-size:30px}.closeBtn:focus,.closeBtn:hover{color:#000;text-decoration:none;cursor:pointer}@keyframes modalopen{from{opacity:0}to{opacity:1}}@media (max-width:992px){.caption h1{font-size:500%;text-shadow:1px 1px 15px #8ce2ea;position:absolute;top:30%;left:20%;transform:translateY(-50%);color:#222}.caption h2{font-size:120%;text-transform:uppercase;text-shadow:1px 1px 15px #8ce2ea;position:absolute;top:45%;left:7%;transform:translateY(-50%);text-align:center;color:#000;font-weight:700}.caption .fa-github{font-size:200%;text-transform:uppercase;text-shadow:1px 1px 15px #8ce2ea;position:absolute;top:50%;left:45%;text-align:center;color:#b00}.caption .fa-linkedin{font-size:200%;text-transform:uppercase;text-shadow:1px 1px 15px #8ce2ea;position:absolute;top:50%;left:55%;text-align:center}.caption .fa-github:hover{color:#fff}.top-hr{position:absolute;border:30px solid #000;width:60%;top:35%;left:20%;border:2px solid #b00;align-content:center}}@media (max-width:768px){.caption h1{font-size:500%;text-shadow:1px 1px 15px #8ce2ea;position:absolute;top:30%;left:20%;transform:translateY(-50%);color:#222}.caption h2{font-size:120%;font-weight:400;text-transform:uppercase;text-shadow:1px 1px 15px #8ce2ea;position:absolute;top:45%;left:7%;transform:translateY(-50%);text-align:center;color:#000;font-weight:700}.caption .fa-github{font-size:200%;text-transform:uppercase;text-shadow:1px 1px 15px #8ce2ea;position:absolute;top:50%;left:45%;text-align:center;color:#b00}.caption .fa-linkedin{font-size:200%;text-transform:uppercase;text-shadow:1px 1px 15px #8ce2ea;position:absolute;top:50%;left:55%;text-align:center}.caption .fa-github:hover{color:#fff}.top-hr{position:absolute;border:30px solid #000;width:60%;top:35%;left:25%;border:2px solid #b00;align-content:center}#portfolio{width:100%;height:400px;background:#fff;position:relative;display:grid;grid-template-columns:repeat(2,minmax(200px,1fr));grid-template-rows:1fr 1fr;grid-gap:30px}.project{position:relative;background:#f2dad7;overflow:hidden;border-style:solid;border-width:5px;border-color:#444;height:200px}footer{background-color:#3f3f3f;color:#d5d5d5;margin-top:120px;height:300px}hr.light{border-top:1px solid #b00}.home_button a{font-size:2rem;color:#8ce2ea}}@media (max-width:576px){.caption h1{font-size:300%;text-shadow:1px 1px 15px #8ce2ea;position:absolute;top:10%;left:20%;transform:translateY(-50%);color:#222}.caption h2{font-size:100%;font-weight:400;text-transform:uppercase;text-shadow:1px 1px 15px #8ce2ea;position:absolute;top:25%;left:7%;transform:translateY(-50%);text-align:center;color:#000;font-weight:700}.caption .fa-github{font-size:100%;text-transform:uppercase;text-shadow:1px 1px 15px #8ce2ea;position:absolute;top:30%;left:45%;text-align:center;color:#b00}.caption .fa-linkedin{font-size:100%;text-transform:uppercase;text-shadow:1px 1px 15px #8ce2ea;position:absolute;top:30%;left:55%;text-align:center}.caption .fa-github:hover{color:#fff}.top-hr{position:absolute;border:30px solid #000;width:80%;top:15%;left:15%;border:2px solid #b00;align-content:center}#portfolio{width:100%;height:1200px;background:#fff;position:relative;display:grid;grid-template-columns:repeat(1,minmax(100px,1fr));grid-template-rows:1fr 1fr;grid-gap:30px}.project{position:relative;background:#f2dad7;overflow:hidden;border-style:solid;border-width:5px;border-color:#444;height:200px}footer{background-color:#3f3f3f;color:#d5d5d5;margin-top:500px;height:250px}hr.light{border-top:1px solid #b00}.home_button a{font-size:2rem;color:#8ce2ea}}