.shade{box-shadow:4px 4px 1px 0px rgba(0,0,0,0.4)}html,body,#main{width:100%;height:100%;margin:0;padding:0}a,nav a,button{min-height:48px;min-width:48px}img,a,embed,object,video{max-width:100%}a{display:inline-block}a:link{text-decoration:none;color:white}a:visited{text-decoration:none;color:white}a:hover{text-decoration:none}.hamburger{width:100%;text-align:right;position:relative}@media (min-width: 768px){.hamburger{display:none}}i.fa.fa-bars{font-size:30pt;width:30px;margin-left:auto;margin-right:30px;margin-top:10px;display:block}i.fa.fa-times{font-size:30pt;width:30px;margin-left:auto;margin-right:30px;margin-top:10px;margin-bottom:10px;display:none}.appear{-webkit-animation:appear 0.3s ease-in-out forwards;animation:appear 0.3s ease-in-out forwards;display:block !important}.disappear{-webkit-animation:disappear 0.3s ease-in-out forwards;animation:disappear 0.3s ease-in-out forwards;display:none !important}@-webkit-keyframes appear{0%{opacity:0}30%{opacity:0.4}100%{opacity:1}}@keyframes appear{0%{opacity:0}30%{opacity:0.4}100%{opacity:1}}@-webkit-keyframes disappear{0%{opacity:1}30%{opacity:0.4}100%{opacity:0}}@keyframes disappear{0%{opacity:1}30%{opacity:0.4}100%{opacity:0}}.arrow-down{color:#377B99;font-size:60pt;width:100px;height:100%;text-align:center;margin-right:auto;margin-left:auto;padding-top:43%;top:75%}i.fa.fa-angle-down:hover{cursor:pointer;color:#10526F;transition:color 0.2s ease-in}.arrow-up{color:white;font-size:60pt;width:100%;text-align:center;height:60px}i.fa.fa-angle-up:hover{cursor:pointer;color:#377B99;transition:color 0.2s ease-in}@keyframes appear{0%{opacity:0}30%{opacity:0}100%{opacity:1}}@-webkit-keyframes changeColor{0%{color:#10526F;opacity:1}30%{color:#10526F;opacity:1}100%{color:white;opacity:1}}@keyframes changeColor{0%{color:#10526F;opacity:1}30%{color:#10526F;opacity:1}100%{color:white;opacity:1}}.frontpage{min-height:100vh;width:100%;background:url("../css/background2.jpg") no-repeat center;color:white;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-animation:appear 5s ease-in;animation:appear 5s ease-in;text-align:center}.head{text-align:center;width:100%;color:white;top:35%;position:absolute}.title-name{-webkit-animation:changeColor 3s ease-in forwards;animation:changeColor 3s ease-in forwards;margin:0;font-size:50pt;font-family:"Raleway",Arial,sans-serif;font-weight:100;white-space:nowrap}@media (max-width: 450px){.title-name{font-size:30pt;font-weight:200}}@media (min-width: 451px) and (max-width: 767px){.title-name{font-size:35pt;font-weight:200}}@media (min-width: 768px) and (max-width: 900px){.title-name{font-size:45pt}}.title-sub{-webkit-animation:changeColor 3s ease-in forwards;animation:changeColor 3s ease-in forwards;font-size:30pt;font-family:"Raleway",Arial,sans-serif;font-weight:100;letter-spacing:2px;white-space:nowrap;margin-top:30px;margin-bottom:10px}@media (max-width: 450px){.title-sub{font-size:19pt;font-weight:100}}@media (min-width: 451px) and (max-width: 767px){.title-sub{font-size:20pt;font-weight:100}}@media (min-width: 768px) and (max-width: 900px){.title-sub{font-size:25pt}}.menu-container{width:100%;height:50px;margin-left:auto;background:linear-gradient(to left, #fff 20%, transparent 30%),linear-gradient(to left, #fff, transparent 70%);color:#10526F;padding-bottom:0px}@media (max-width: 767px){.menu-container{width:100%;height:100%;margin-top:0;background-color:#333d3f;display:none;padding-bottom:0px}}.menu-items{width:25%;margin-left:75%}@media (max-width: 767px){.menu-items{width:100%;margin-left:0%}}.menu-link{font-family:"Raleway",Arial,sans-serif;font-weight:200;font-size:14pt;padding:15px 10px 0px 10px;border-bottom:solid 0px white}@media (max-width: 767px){.menu-link{width:100%;border-bottom:white solid 1px}}@media (min-width: 768px) and (max-width: 999px){.menu-link{font-size:12pt}}.workLink,.skillsLink,.cvresumeLink,.aboutLink,.contactLink{cursor:pointer}.workLink:hover,.skillsLink:hover,.cvresumeLink:hover,.aboutLink:hover,.contactLink:hover{border-bottom:solid 0px #10526F}@media (min-width: 767px){.workLink:hover,.skillsLink:hover,.cvresumeLink:hover,.aboutLink:hover,.contactLink:hover{border-bottom:solid 1px #10526F;transition:border 0.1s ease-in-out}}.showMenu{display:block;-webkit-animation:appear 0.3s ease-in-out forwards;animation:appear 0.3s ease-in-out forwards}.work{width:100%;max-height:100%;background-color:white;color:#377B99;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;font-family:"Raleway",Arial,sans-serif;font-weight:100}.title-section-work{font-family:"Raleway",Arial,sans-serif;font-size:40pt;font-weight:200;text-align:center;width:100%;background:white;margin-top:90px;margin-bottom:30px}.work-list{background:white;width:900px;margin-left:auto;margin-right:auto;margin-top:40px;margin-bottom:90px;text-align:center}@media (max-width: 450px){.work-list{width:70%;margin-left:15%}}.work-item{width:46%;margin:1%;display:inline-block;font-size:12pt;font-weight:400;padding-top:2%;border:1px solid white;border-radius:10px;cursor:pointer;box-shadow:inset 0px 0px 0px 1px grey}@media (max-width: 450px){.work-item{font-size:12pt;width:99%;margin:1% 0 1% 0}}@media (min-width: 451px) and (max-width: 580px){.work-item{width:47%}}@media (min-width: 451px) and (max-width: 767px){.work-item{font-size:10pt}}@media (min-width: 768px){.work-item:hover{background-color:rgba(128,128,128,0.08);color:#10526F;transition:all .3s ease-out}}.work-item:hover .button-work{opacity:1;transition:opacity .5s ease-in-out}.button-work{display:inline-block;font-size:12pt;font-weight:200;opacity:0;z-index:1000;background-color:#10526F;width:50%;color:white;padding-top:3%;border-radius:15px;padding-top:20px}@media (max-width: 767px){.button-work{padding-top:30px;opacity:1;font-size:8pt;width:50%}}@media (min-width: 768px){.button-work:hover{background-color:red;color:#10526F;transition:all 5s ease-in-out}}@media (max-width: 450px){.work-img{max-width:40%}}@media (min-width: 451px) and (max-width: 767px){.work-img{max-width:100px}}@media (min-width: 768px) and (max-width: 1024px){.work-img{width:130px}}@media (min-width: 1025px){.work-img{width:130px}}.showmore{max-height:100%}.project-background{margin-top:30px;height:100vh;width:100%;background-color:white;display:none}.project-container{position:absolute;top:125%;left:20%;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;height:500px;width:60%;margin-left:auto;margin-right:auto;background-color:rgba(128,128,128,0.1);border-radius:10px}@media (max-width: 799px){.project-container{width:90%;left:5%;top:135%}}.title-project{white-space:nowrap;margin-left:10%;margin-right:0;padding-top:60px;width:60%;font-size:30pt;font-weight:400;height:30px}@media (max-width: 609px){.title-project{font-size:20pt}}.project-img{width:20%;margin-left:20px}.project-img img{width:100%;height:auto}.closing-details{float:left;width:4%;padding-left:26%;padding-top:10px;font-weight:400;font-size:20pt;height:30px}@media (max-width: 767px){.closing-details{padding-left:23%}}.closing-details:hover{cursor:pointer}.project-details{width:60%;margin-left:10%;font-weight:300}.project-description{margin-bottom:20px}.project-tech{background-color:white;border-radius:3px}.project-tech div:first-child{text-decoration:underline;margin-bottom:10px}.project-page{width:100%;margin-left:10%;font-weight:300;max-height:20px}.project-page p{margin:0;height:20px}.project-page p a{height:20px}.link-page,.link-url{text-decoration:underline !important;color:#10526F !important}.link-page:hover ,.link-url:hover {color:#377B99;transition:color 0.2s ease-in}.project-url{height:20px;width:100%;margin-left:10%;font-weight:300;max-height:20px}.project-url p{margin:0;height:20px}.link-url:hover{color:#377B99;transition:color 0.2s ease-in}.skills{min-height:100vh;max-height:100vh;width:100%;background:rgba(128,128,128,0.05);color:white;padding-bottom:50px;font-family:"Raleway",Arial,sans-serif;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.title-section-skills{color:#10526F;font-family:"Raleway",Arial,sans-serif;font-size:40pt;font-weight:200;text-align:center;width:100%;height:100px;margin-bottom:-100px;background-color:transparent;padding-top:90px}.angle-left,.angle-right{width:15%;height:400px}.angle-left i.fa.fa-angle-left,.angle-right i.fa.fa-angle-left,.angle-right i.fa.fa-angle-right{padding-left:80%;padding-top:155px;font-size:100pt;color:#377B99}i.fa.fa-angle-left:hover,i.fa.fa-angle-right:hover{cursor:pointer;color:#10526F;transition:all 0.2s ease-in-out}.angle-right i.fa.fa-angle-right{padding-left:0%}.container-skills{display:-webkit-flex;display:-ms-flexbox;display:flex;margin-top:30px;width:70%}.container-skill-list{margin-right:auto;margin-left:auto;width:800px;height:400px;overflow:hidden;overflow-x:auto;background-color:transparent;outline:1px solid #ddd}.skill-list{text-align:center;color:#10526F;background-color:white;width:2400px;display:-webkit-flex;display:-ms-flexbox;display:flex;transition:-webkit-transform 0.6s ease-in-out;transition:transform 0.6s ease-in-out;transition:transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out}.skillhtml,.skilljs,.skillreact{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;text-align:center;width:800px;padding:0 10px 0 10px;height:400px;outline-right:1px #ddd solid}@media (max-width: 767px){.skillhtml,.skilljs,.skillreact{width:80%;margin-left:10%}}.skillreact{border-bottom:0}.skill-img{width:30%;margin:0;padding-bottom:5%}@media (max-width: 767px){.skill-img{width:30%}}.skill-details{width:70%}.skill-title{font-weight:400;font-size:22pt;margin:2%;line-height:1.7;width:100%;margin-top:10%;margin-bottom:10%}@media (max-width: 767px){.skill-title{font-size:22pt;font-weight:400}}@media (min-width: 768px) and (max-width: 1024px){.skill-title{font-size:22pt}}.keywords{line-height:1.5;width:100%}.about-me{min-height:100vh;width:100%;background:#10526f;color:white;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;text-align:center;font-family:"Raleway",Arial,sans-serif;font-weight:200}.about-me .about-me-title{margin-top:20px;font-size:40pt;font-weight:200;text-align:center;width:100%}.about-me .presentation{width:80%;padding-left:10%;text-align:center;font-family:"Raleway",Arial,sans-serif;font-size:10pt;line-height:1.5;text-align:center;margin-bottom:20px}@media (min-width: 768px){.about-me .presentation{width:50%;margin-left:15%}}@media (max-width: 768px){.about-me .presentation{font-size:9pt;margin-bottom:30px}}.about-me .presentation .img-about{border-radius:50%;margin-bottom:0px}@media (max-width: 450px){.about-me .presentation .img-about{width:100px}}@media (min-width: 451px){.about-me .presentation .img-about{width:150px}}.fa{font-size:50pt}i{font-size:9pt}.social{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;font-size:18pt;font-family:"Raleway",Arial,sans-serif;width:50%;margin-left:25%}@media (max-width: 767px){.social{width:100%;margin-left:0%}}.social-message{width:100%;font-size:13pt;margin-top:50px}.social-section{width:33%;text-align:center;color:white;font-size:100pt;margin-top:-60px}.social-section a{height:50px}.social-section i.fa.fa-twitter-square{font-size:35pt}.social-section i.fa.fa-github-square{font-size:35pt}.social-section i.fa.fa-linkedin-square{font-size:35pt}@media (min-width: 768px){i.fa.fa-twitter-square:hover,i.fa.fa-github-square:hover,i.fa.fa-linkedin-square:hover{color:#377B99;transition:0.2s color;cursor:pointer}}