@font-face {
  font-family: aliseo;
  src: url(aliseo-noncommercial.otf);
}

@keyframes fade-in {
    from {opacity: 0; transform: scale(.7,.7)}
    to {opacity: 1;}
}


button:focus {outline:0;}

h1 {
  padding:0px;
  color: white;
  font-size: 75px;
  text-align: center;
  font-family: 'lato',sans-serif;
  font-weight: 300;
  font-size: 70px;
  letter-spacing: 10px;
  padding-top: 20px;
  margin-bottom: 10px;
}

h6 {

  padding:0px;
  color: white;
  font-size: 20px;
  text-align: center;
  font-family: 'lato',sans-serif;
  font-weight: 300;
  margin-top:0px;
  letter-spacing: 2px;
}

h2 {
  position: relative;
  
  color: #c2c5cc;
  text-align: center;
  font-family: 'lato',sans-serif;
  font-size: 30px;
  margin-bottom: 70px;
  
  margin-top:0px;
}

h2:before{
  content: "";
  position: absolute;
  width: 5%;
  height: 5px;
  top:45px;
  left:47.5%;
  
  background-color: #1565c0;
  
  
}

h3 {
  padding-top: 75px;
  text-align: center;
  font-family: 'lato',sans-serif;
}

h4 {
  text-align: center;
  font-family: 'lato',sans-serif;
}

h5 {
  
  
  color: #c2c5cc;
  text-align: center;
  font-family: 'lato',sans-serif;
  font-size: 15px;

  padding-bottom: 70px;
  margin-bottom: 0px;

}
p {
  margin: 20px;
  font-family: 'lato',sans-serif;
  font-size: 20px;
}
/* * {
  box-sizing: border-box;
} */
b {
  color: #1565c0;
}

body {
  margin:0px;
}

.page {
  padding:50px;
  position: relative;
  width:100%;
  margin:0px;
}

#goButton {
  cursor: pointer;
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  background:none;
  border:5px solid black;
  font-size:20px;
  border-radius: 5px;
  width:200px;
  height:50px;
}

#top {
  background-image: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
  
  height:100%;
}

#circles {
  position:absolute;
  height:100%;
  width:100%;

}

#imageGallery {
  display: flex;
  flex-wrap: wrap;
  padding: 0px 4px;
}

#imageGallery .column {
  flex:25%;
  max-width: 25%;
padding: 0px 4px;
}

#imageGallery .column img
{
  width:100%;
  height:100%;
  vertical-align: middle;
  margin-top:8px;
}
#aboutMe {
  background-color: #2b2d2f;
  padding:0px;
  padding-top:0%;
  padding-bottom:3%;
}

.textbox {
  
  padding-left:35%;
  padding-right:35%;
  font-size: 20px;
  margin:0px;
  margin-top: 0px;
  margin-bottom: 0px;
  text-align: justify;
}

@media (max-width:1500px) {
  .textbox {
    padding-left:5%;
    padding-right:5%;
  }
}

p {

  color:rgb(219, 232, 212);
}

#selfie {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
  margin-top:20px;
  width:25%;
  height:25%;
  border-radius: 50%;
  vertical-align: middle;
}


#abilitiesPage {
  background-color: #2b2d2f;
}

#Contact {
  background-color: #2b2d2f;
  padding-left:35%;
  padding-right:35%;
  margin-left:auto;
margin-right:auto;
display: flexbox;
}



.row {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
}




/* .square:before {
  z-index:15;
  content:"";
  position:absolute;
  top:0px;
  left:0px;
  height:5000px;
  width:50px;
  background-color: black;
} */
@media(max-width: 1333px) {
  .column {
    flex-basis: 33.33%;
  }
}
@media(max-width: 1073px) {
   .column {
    flex-basis: 33.33%;
  }
}
@media(max-width: 815px) {
  .column {
    flex-basis: 50%;
  }
}
@media(max-width: 555px) {
  .column {
    flex-basis: 100%;
  }
}

.column {


flex-basis: 33%;
-ms-flex: auto;
width: 259px;
height:350px;
position: relative;
padding: 10px;
box-sizing: border-box;
}


.column img {
  display:block;
    margin:auto;
  width:200px;
}

#projectspage {
  background-color: #2b2d2f;
  padding-top:3%;
  margin-bottom: 0;
  padding-bottom:5%;
  
}

.pcontent {
  
  position: relative;
}

.pcontent img{
  width:100%;
  max-width: 100%;
  

 
  transition:all 0.1s;
}

.pcontent img:hover {

  transform:scale(0.9);
 
}



.pcontent p {
  margin:0;
  margin-bottom: 30px;
  font-size: 15px;
  /* position: absolute;
float: left;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); */
z-index: -999;
}



.projectcard {
  background-color: yellow;
  padding: 0.1%;
  display: inline-block;
}
.pcolumn {
  padding: 0;
   margin-left: 30%;
   margin-right: 30%;
   list-style: none;
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   -webkit-flex-flow: row;
   justify-content: space-around;
   line-height:30px;
}

@media (max-width:1500px) {
  .pcolumn {
    margin-left: 5%;
    margin-right: 5%;
  }

}

.prow {
  background: #2b2d2f;
  
  color: white;
  font-weight: bold;
  font-size: 1.5em;
  text-align: center;
  flex: 1 0 0px;
  min-width: 1.5em;
  z-index: 99;
}


#menubtn {
  margin:12px;
  font-size:50px;
  text-align:center;
  width:50px;
  height:50px;
  position: fixed;
  top:0px;
  left:0px;
  color:white;
}

#sidebar {
  background: rgba(0, 0, 0, 1);
  position: fixed;
  top:0px;
  left:0px;
  height:100%;
  width:0px;
  transition:0.5s;
  overflow-x: hidden;
  padding-top: 60px;
  opacity:1;
  z-index: 9999;
  text-align: center;
}


#sidebar a {
  width:100%;
  position:absolute;
  text-decoration: none;
  font-size: 40px;
  font-family: 'lato',sans-serif;
  font-weight: 300;
  padding: 0;
  margin: 0;
  transition: all 1s ease-in-out 0s;
  color: white;
  
}

#sidebarWelcome {
  top:100px;
  transform: translate(-50%, -50%);
}

#sidebarProjects {
  top: 170px;
  transform: translate(-50%, -50%);
}

#sidebarAbout {
  transform: translate(-50%, -50%);
  top: 240px;
}




#sidebar a:before {
  background-color: #1565c0;
  content:"";
  position: absolute;
  width:0vw;
  height:2px;
  top:25px;
  left:-0vw;
  transition: all 0.2s ease-in-out 0s;
  z-index: -1;
}


#sidebar a:hover:before {
  
  width:100vw;
  transform: scaleY(2);

}

/* #sidebar a:hover {
  color: #f1f1f1;
} */

#sidebar .closebtn {
  position: absolute;
  left:0px;
  top:0px;
  color:white;

}

#hamButton {
  position:fixed;
  top:10px;
  left:10px;
}
* {
  box-sizing: border-box;
}
#goButton {
  border: 2px solid white;
  border-radius: 0px;
  font-family: 'lato',sans-serif;
  color:white;

}


#goButton:before {
  z-index: -1;
  position:absolute;
  left:0px;
  top:0px;
  width:0px;
  height:4px;
  content:"";
  background-color: #1565c0;
    -webkit-transition: width 0.1s,
    height 0s 0.1s;
}

#goButton:hover:before {
  max-width: 100%;
  width:100%;
  height:100%;
  transition:
    width 0.2s,
    height 0.2s 0.2s;
}


.fa {
  min-width: 50px;
  min-height: 50px;
  padding-top: 9px;
  font-size: 30px;
  width: 50px;
  height: 50px;
  
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
  border-radius: 50%;
  background: #1565c0;
color: white;
}

.fa:hover {
  opacity: 0.7;
}




.fa-github {

background: #1565c0;
color: white;
}

.fa-mail{
 
background: #1565c0;
color: white;
}

.fa-linkedin {
  background: #1565c0;
  color: white;
}

.container {
 
  
  display: flex;
  justify-content: space-between;
}