*{
    padding: 0;
    margin: 0;
}

*{
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-o-box-sizing:border-box;
	-ms-box-sizing:border-box;
	box-sizing:border-box;
}
body{
	font-family: 'Poppins', sans-serif;
	font-size:16px;
	color: #676a81;
	background: #fff;
    margin:0 auto;
	overflow-x:hidden;
}

h1,h2,h3,h4,h5,h6 { 
	margin: 0;
	color:#43485c;
    font-size: 16px;
	font-family: 'Poppins', sans-serif;
}
p {
	margin: 0;
	line-height:1.8;
	color:#43485c;
	font-size:14px;
	font-family: 'Poppins', sans-serif;
}
img{border:none;max-width:100%; height:auto;}
ul{
	padding: 0;
    margin: 0 auto;
    list-style: none;
}
ul li {
	list-style: none;
	
}
select,input,textarea,button{box-shadow:none;outline:0!important;}
button {background: transparent;border: 0;}

html,body{
    height: 100%;
	position: relative;
}
[placeholder]:focus::-webkit-input-placeholder {
  -webkit-transition: opacity 0.3s 0.3s ease; 
  -moz-transition: opacity 0.3s 0.3s ease; 
  -ms-transition: opacity 0.3s 0.3s ease; 
  -o-transition: opacity 0.3s 0.3s ease; 
  transition: opacity 0.3s 0.3s ease; 
  opacity: 0;
}

.fix{position: relative;clear: both;}

.section-header h1{
    font-weight: 500;
    font-size: 24px;
    text-transform: uppercase;
    padding-bottom: 30px;
    /*border-bottom: 2px solid #e5ebf2;*/
    text-align:left;
}

.big-uppercase-thin {
    font-size: 20px;
    font-weight: 300;
    color: #636a82;
    text-transform: uppercase;
}

.big-fat {
    font-weight: 400;
    font-size: 18px;
    color: #43485c;
}

.medium-thin{
    font-weight: 300;
    font-size: 16px;
    color:#43485c;

}

.medium-fat{
    font-weight: 400;
    font-size: 16px;
    color:#43485c;

}

.small-thin{
    font-weight: 300;
    font-size: 15px;
    color:#43485c;
}

.small-fat{
    font-weight: 400;
    font-size: 14px;
    color:#43485c;
}

/* NAV BAR */

.top-area {
    position: relative;
    z-index: 9999;
}

@media (min-width: 1024px){}
nav.navbar.bootsnav.no-background {
    background-color: transparent /*#686f92*/;
    border: none;
}

nav.navbar.bootsnav {
    background-color: #686f92;
    border-bottom: none;
}

nav.navbar.bootsnav ul.nav > li > a {
    font-size: 16px;
    font-weight: 400;
    color:#000000;
    text-transform:uppercase;
    -webkit-transition: 0.3s linear; 
    -moz-transition: 0.3s linear; 
    -ms-transition: 0.3s linear; 
    -o-transition: 0.3s linear; 
    transition: 0.3s linear;
}*
nav.navbar.bootsnav ul.nav > li > a {
    padding: 35px 35px;
}
nav.navbar.bootsnav ul.nav > li > a:hover,nav.navbar.bootsnav ul.nav > li > a:focus,nav.navbar.bootsnav ul.nav > li.active>a{
    color: #ffffff;
}

nav.navbar.bootsnav ul.nav > li.dropdown > a.dropdown-toggle:after {
    content: "";
}
nav.navbar.bootsnav ul.nav > li.dropdown span {
    font-size: 8px;
    margin-left: 15px;
}
.sticky-wrapper.is-sticky nav.navbar.bootsnav ul.nav > li > a {
    color:#000000;
}
.sticky-wrapper.is-sticky nav.navbar.bootsnav ul.nav > li > a:hover,.sticky-wrapper.is-sticky nav.navbar.bootsnav ul.nav > li > a:focus,.sticky-wrapper.is-sticky nav.navbar.bootsnav ul.nav > li.active>a{
    color: #ffffff;
}

.menu-ui-design{
    overflow-y:scroll;height: 350px;
}
.menu-ui-design::-webkit-scrollbar {
    width:5px;
}
.menu-ui-design::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 8px #000;
}
.menu-ui-design::-webkit-scrollbar-thumb {
  background-color: #ffffff;
}

nav.navbar.bootsnav .navbar-toggle {
    position: relative;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 10px;
    top: 0;
}
nav.navbar.bootsnav .navbar-toggle i{
    color: #ffffff;
}

/* HERO */

.hero{
    display: flex;
    align-items: center;
    justify-content: center;
    position:relative;
    background:url(../static/yllas8.png)no-repeat bottom;
    background-size:cover;
    /*background-position: center;*/
    height:750px;
}
.hero:before{
    position:absolute;
    content: " ";
    top:0;
    left:0;
    background:rgba(97, 107, 165, 0.534);
    width:100%;
    height:100%;
}

.hero-text {
    padding-top:20px;
}

.hero-text h1{
    color: #fff;
    font-size: 34px;
    font-weight: 600;
    line-height: 1.5;
}

.hero-text h2{
    color: #fff;
    font-size: 54px;
    font-weight: 700;
    line-height: 1.5;
}

.hero-text h3{
    margin-top:70px;
    color: #fff;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.5;
    padding-bottom:30px;
}


/* ABOUT */

.about {
    padding-top:  50px;
    padding-bottom:  50px;
}

.about-header {
    border-bottom: 2px solid /*#e5ebf2*/#686f928f/*#4c5aa1*/;
}

.about-description {
    font-size:18px;
    line-height: 1.8;
    text-align: justify;
    vertical-align:middle;
    font-weight: 300;
    border-bottom: 2px solid /*#e5ebf2*/#686f928f/*#4c5aa1*/;
    padding-top:30px;
    padding-bottom:30px;
}

.contact-pic {
    width:25px;
    height:auto;
}

.contact-pic img{
    vertical-align:top;
}

.contact-text {
    font-size:16px;
    text-align: left;
    vertical-align:middle;
    font-weight: 400;
    margin-top:2px;
}

.contact-link {
    text-decoration:none;
    color: #6a708e;
}

.contact-link:hover {
    color: #5062bd;
    text-decoration:none;
}

.contact-link:active {
    text-decoration:none;
    color: #5062bd;
}

.contact-row {
    padding-top:30px;
}

.about-pic {
    position:relative;
    padding-bottom:20px;
}

.about-pic img {
    box-shadow: 16px -16px #4fc787c0, -16px 16px #686f92c0;
    width:95%;
}


/* WORK */

.work {
    padding-top:  50px;
    padding-bottom:  50px;
    position:relative;
    background-color: #e5ebf279;background:url(../static/backgrounds/building.png)no-repeat right;
    background-size:cover;
}

.work:before{
    position:absolute;
    content: " ";
    top:0;
    left:0;
    width:100%;
    height:100%;
    /*background: -webkit-linear-gradient(135deg, transparent 87%, #44c47ecb 87%), 
                linear-gradient(130deg, #ffffffbe 85%, #44c47eef 85%);*/
    background: #ffffffbe;
    

}

.work-header {
    border-bottom: 2px solid #83d8aa;
}

.work-picture {
    margin-top:60px;
}


.work-picture img{
    width:60px;
}

/* WORK AND EDU COMMON */

.title {
    font-size:20px;
    font-weight:300;
    padding-top:30px;
}

.place h3{
    font-weight: 400;
    font-size: 18px;
    margin-top: 10px;
}

.place h4{
    font-weight: 300;
    font-size: 17px;
    margin-top: 10px;
}

.period {
    font-weight: 300;
    font-size: 16px;
    color: #43485c;
    margin-top:10px;
}


/* EDUCATION */

.education {
    background:  #ffffff;
    padding-top:  50px;
    padding-bottom:  50px;
}

.edu-header {
    border-bottom: 2px solid #686f928f;
    /*border-bottom: 2px solid #d899caf6;
    border-image: linear-gradient(to right, #686f92, #d899caf6) 1;*/
}

.cert-header {
    border-bottom: 2px solid #686f928f;
    /*border-bottom: 2px solid;
    border-image: linear-gradient(to right, #686f92, #83d8aa) 1;*/
}

.edu-picture {
    width:60px;
}

.edu-picture img{
    width:60px;
    margin-top:50px;
    margin-left:15px;
}

.edu-title {
    font-size:19px;
    font-weight:300;
    padding-top:30px;
}

.cert-title {
    font-size:17px;
    font-weight:300;
    padding-top:30px;
}

.cert-place h3{
    font-weight: 400;
    font-size: 16px;
    margin-top: 10px;
}

.edu-button {
    margin-top:20px;
    margin-bottom:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    height:40px;
    width: 300px;
    background: transparent ;
    border: 1px solid #43485c;
    cursor:pointer;
     -webkit-transition: .5s; 
    -moz-transition:.5s; 
    -ms-transition:.5s; 
    -o-transition:.5s;
    transition: .5s;
    border-radius: 5px;
}

.edu-button:hover{
    background: #43485c;
}
.edu-button a{
    color: #43485c;
}

.edu-button:hover a{
    color: rgb(255, 255, 255);
    text-decoration:none;
}


/*PROJECTS*/

.projects {
    padding-top:  50px;
    padding-bottom: 50px;
    position:relative;
    background-color: #e5ebf279;background:url(../static/backgrounds/alps4.JPEG)no-repeat bottom;
    background-size:cover;
    /*background-color: #3c3c3ce7;*/
}

.projects:before{
    position:absolute;
    content: " ";
    top:0;
    left:0;    
    width:100%;
    height:100%;
    /*background: linear-gradient(60deg, #ffffff7a 79%, #d899caf6 79%);*/
    background: #ffffffb0;
}

.projects-header {
    border-bottom: 2px solid /*#e5ebf2*/#686f928f/*#4c5aa1*/;
}

.project-button {
    display:flex;
    align-items:center;
    justify-content:center;
    height:40px;
    background: transparent ;
    border: .5px solid #43485c;;
    cursor:pointer;
     -webkit-transition: .5s; 
    -moz-transition:.5s; 
    -ms-transition:.5s; 
    -o-transition:.5s;
    transition: .5s;
    border-radius: 5px;
}

.wip {
    width: 320px;
}

.project-button:hover{
    background: #43485c;
    display:flex;
    align-items:center;
    justify-content:center;
}
.project-button a{
    color: #43485c;
}

.project-button:hover a{
    color: #ffffffd8;
	text-decoration:none;
}

.project-title{
    padding-top:30px;
    color: #43485c;
}

.project-description{
    padding-top:20px;
    padding-bottom:20px;
    font-weight: 300;
    font-size: 16px;
    text-align: justify;
    color: #43485c;
}

.project-more{
    padding-top:50px;
    padding-bottom:70px;
    font-weight: 300;
    font-size: 16px;
    text-align: justify;
    color: #43485c;
}

.project-picture{
    padding-top:30px;
    display: flex;
    justify-content: center;
    align-items: top;    
}

.project-picture img {
    height:250px;
    width:auto;
    
}

.project-picture2{
    padding-top: 80px;
    display: flex;
    justify-content: center;
    align-items:center;    
}

.project-picture2 img {
    height:auto;
    width:300px;    
}

.project-picture3{
    margin-top:50px;
    margin-bottom:30px;
    display: flex;
    justify-content: center;
    align-items:center;    
}

.project-picture3 img {
    height:200px;
    width:auto;    
}

/*VOLUNTEERING*/

.volunteering {
    background:  #ffffff;
    padding-top:50px;
    padding-bottom:50px;
}

.vol-header {
    border-bottom: 2px solid;
    border-image: linear-gradient(to right, #16d4ef, /*#25c3ed,*/ #a1a2f4, #e6a1fb) 1;
}

.vol-pic {
    display: flex;
    justify-content: center;
    align-items: center;
}

.vol-name {
    padding-top:40px;
    padding-bottom:20px;
}

.vol-position{
    padding-top:10px;
}

.vol-description{
    padding-top:30px;
    text-align: justify;
}

/*SKILLS*/

.skills {
    position:relative;
    padding:  70px 0 100px;
    background-color: #e5ebf2ad;background:url(../static/backgrounds/blue-dog.jpg)no-repeat bottom;
    background-size:cover;
}

.skills:before{
    position:absolute;
    content: " ";
    top:0;
    left:0;    
    width:100%;
    height:100%;
    /*background: linear-gradient(60deg, #ffffff7a 79%, #d899caf6 79%);*/
    background: #ffffff25;
}

.skills-header {
    border-bottom: 2px solid /*#e5ebf2*/#686f928f/*#4c5aa1*/;
}

.skills-2-rows {
    padding-top:60px;
}

.skills-row{
    padding-top:20px;
}

.skill-pic{
    padding-top:30px;
    display: flex;
    justify-content: center;
}

.skill-pic img{
    height: 50px;
    float:middle;
}

.skill-name{
    color: #636a82;
    font-weight: 400;
    font-size:16px;
    text-align:center;
    padding-top: 20px;
}


/*GALLERY*/

.gallery {
    padding-top:  30px;
    padding-bottom: 0px;
    background-color:#141414;
}

.gallery-content {
    padding-top: 30px;
}

.isotope:after {
    content: '';
    display: block;
    clear: both;
}
.isotope .item {
    position:relative;
    overflow:hidden;
    margin-bottom: 30px;
}

.isotope .item img{
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
}

.pic-small img{
    width: 360px;
    height: 200px;
    object-fit: cover;
    overflow:hidden;
}

.pic-medium img{
    width: 360px;
    height: 250px;
    object-fit:cover;
    overflow:hidden;
}

.pic-big img{
    width: 360px;
    height: 700px;
    object-fit:cover;
    overflow:hidden;
}

.isotope .item:hover  img{
    -webkit-transform:scale(1.5);
    -moz-transform:scale(1.5);
    -ms-transform:scale(1.5);
    -o-transform:scale(1.5);
    transform:scale(1.5);
}

/* FOOTER*/

.footer{
    background-color:#141414;
}

.footer-contact-row {
    padding-top:40px;
    padding-bottom:50px;
}

.phone-column {
    width:260px;
}

.email-column {
    width:345px;
}

.web-column {
    width:270px;
}

.footer-contact-pic {
    display: flex;
    justify-content: center;;
}

.footer-contact-pic img{
    float:middle;
    width:20px;
    
}

.footer-contact-text a{
    color: #d4d4d4;;
    font-weight:300;
    font-size:15px;
}

.hm-footer-copyright {
    color:   #d4d4d4;
    padding: 38px 0;
    font-weight:300;
    font-size:15px;
    border-top: 1px solid #ffffff7c;
}

@keyframes example {
    0%   {bottom:0px;}
    100%  {bottom:7px;}
}

@media (max-width: 767px) {
  .contact-row {
    flex-direction: column !important;
    align-items: center !important;
  }
  .contact-pic, .contact-text {
    margin-bottom: 10px;
    text-align: center;
  }
}