@import url('https://fonts.googleapis.com/css?family=Abhaya+Libre:400,600,800|Heebo:300,400&display=swap');

body {
    margin: 0;
    font-family: 'Abhaya Libre', serif;
}

* {
    box-sizing: border-box;
    margin: 0;
}

.container {
    max-width: 1200px;
    margin: auto;
}

.row {
    display: flex;
    flex-wrap: wrap;
}

header {
    position: absolute;
    left: 0px;
    right: 0px;
    /*border-bottom: 1px solid black;*/
    padding: 0px 30px;
    z-index: 10;
}

header .row {
    justify-content: space-between;
    align-items: center;
}

header .brand-name a {
    text-decoration: none;
    font-size: 25px;
    font-weight: 700;
    color: black;
    position: relative;
}

header .navbar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

header .navbar ul li {
    display: inline-block;
    margin-left: 35px;
}

header .navbar ul li a {
    font-family: 'Heebo', sans-serif;
    font-size: 17px;
    text-decoration: none;
    line-height: 70px;
    color: black;
    display: block;
    font-weight: 300;
    position: relative;
}

header .navbar ul li a.active {
    font-weight: 400;
}

header .navbar ul li a::before {
    content: '';
    height: 1.55px;
    background-color: black;
    width: 0;
    position: absolute;
    right: 0px;
    left: 0px;
    bottom: -1px;
    transition: all .5s ease;
    font-family: 'Heebo', sans-serif;
}

header .navbar ul li a:hover::before {
    width: 100%;
    left: 0;
}

header .navbar ul li a.active::before {
    width: 100%;
    left: 0;
}

.home {
    min-height: 100vh;
    /*background-image: url("1x/Header@2x.jpg");*/
    background-color: #FFF4F4;
    background-size: cover;
    background-position: center;
    padding: 15px;
}

.home .full-screen {
    min-height: 100vh;
}

.home .home-content {
    flex: 0 0 100%;
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.home .home-content .block {
    flex: 0 0 65%;
    max-width: 60%;
    padding-left: 50px;
    /*border-left: 5px solid white;*/
    margin-top: 40px;
}

.home .home-content .block h6 {
    color: black;
    font-size: 18px;
    font-weight: 400;
    margin: 0;
    padding: 0;
}

.home .home-content .block h1 {
    color: black;
    font-size: 55px;
    font-weight: 800;
    margin: 0;
    padding: 0;
    padding-bottom: 0.25em;
}

.home .home-content .block h3 {
    color: black;
    font-family: 'Heebo', sans-serif;
    font-size: 24px;
    font-weight: 300;
    margin: 0;
    padding: 0;
}

.home .home-content .block .cv-btn {
    padding-top: 20px;
}

.home .home-content .block .cv-btn a {
    border-radius: 4px;
    color: black;
    border: 1px solid black;
    padding: 12px 25px;
    text-decoration: none;
    display: inline-block;
    font-size: 15px;
    text-transform: capitalize;
    font-weight: 400;
    transition: all .5s ease;
    background-color: transparent;
}

.home .home-content .block .cv-btn a:hover {
    background-color: black;
    color: black;
}

/*masonry-grid*/
/* Step 1: start with resetting some defaults */

* {
    margin: 0;
    padding: 0;
    max-width: 100%;
}
  
  
/* Step 2: center things inside the grid and clear some space around it by setting a device based max-width and margin*/
  
.grid {
    text-align: center;
    max-width: 95vw;
    /*margin: 2.5vw auto;*/
    padding-top: 8em;
    margin: auto;
    padding-bottom: 10em;
}
  
  
/* Step 3: how big should the gap be between grid items? remember that the total gap between two items would be double what you set here since both would have that amount set as their individual padding. Also add box-sizing:border-box to make sure the padding doesn't affect the total widh of the item */
  
.grid-item {
    padding: 14px;
    box-sizing: border-box;
      display:inline;
}
  
  
/* Step 4: Add media queries (subjective) to make the whole grid resposive. */
  
@media (min-width: 500px) {
    .grid-item {
      width: 50%;
    }
}
  
@media (min-width: 1020px) {
    .grid-item {
      width: 33.333%;
    }
}
  
@media (min-width: 1800px) {
    .grid-item {
      width: 25%;
    }
    .container {
        max-width: 1600px;
        margin: auto;
    }
}
  
@media (min-width: 2100px) {
    .grid-item {
      width: 20%;
    }
}
/*ENDmasonry-grid*/
  
@media only screen and (min-width: 768px) {
    html {
      font-size: 18px;
    }
}
  
@media only screen and (min-width: 1020px) {
    header {
      background: none;
    }
}
  
@media only screen and (min-width: 1800px) {
    html {
      font-size: 30px;
    }
}
  /*# sourceMappingURL=main.css.map */

@media only screen and (max-width: 500px) {
    .grid-item {
        width: 50%;
    }
}

@media only screen and (max-width: 600px) {
    /*hamburger menu*/
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    header {
        width: 100%;
        display: inline-block;
        left: 0px;
        right: 0px;
        padding: 16px;
        padding-left: 20px;
        z-index: 1000000;
    }
    header .navbar ul li {
        display: inline-block;
        margin-left: 0px;
    }
    
    header .navbar ul li a {
        font-family: 'Heebo', sans-serif;
        font-size: 18px;
        font-weight: 600;
        letter-spacing: 0.05em;
    }
    .home .home-content .block {
        flex: 0 0 90%;
        max-width: 85%;
        padding-left: 50px;
        margin-top: 10px;
    }    
    .home .home-content .block h1 {
        font-size: 50px;
        padding-bottom: 0.25em;
        line-height: 1;
    }
    .home .home-content .block h3 {
        color: black;
        font-family: 'Heebo', sans-serif;
        font-size: 22px;
    }
    .nav-container { /*move this one*/
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: -1000;
        background: black;
        opacity: 0;
        transition: all .2s ease;
        transform: translateX(1000px);
        overflow-x: hidden;
    }
    .nav-container ul {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
    }
    .nav-container ul li {
        display: block;
        float: none;
        width: 100%;
        text-align: right;
        margin-bottom: 10px;    
    }
    .nav-container ul li:nth-child(1) a {
        transition-delay: .2s;
        z-index: 1000000;
    }
    .nav-container ul li:nth-child(2) a {
        transition-delay: .3s;
    }
    .nav-container ul li:nth-child(3) a {
        transition-delay: .4s;
    }
    .nav-container ul li:nth-child(4) a {
        transition-delay: .5s;
    }
    .nav-container ul li:not(:first-child) {
        margin-left: 0;
    }
    .nav-container ul li a {
        padding: 10px 25px;
        opacity: 0;
        color: white;
        font-size: 24px;
        font-weight: 600;
        /*transform: translateY(-20px);*/
        transition: all .2s ease;
    }
    .nav-open {
        position: fixed;
        right: 4px;
        top: 4px;
        display: block;
        width: 48px;
        height: 48px;
        cursor: pointer;
        z-index: 9999;
        border-radius: 50%;
        /*background-color: white;*/
    }
    .nav-open i {
        display: block;
        width: 20px;
        height: 2px;
        background: black;
        border-radius: 2px;
        margin-left: 14px;
    }
    
    
    .nav-open i:nth-child(1) {
        margin-top: 17px;
    }
    .nav-open i:nth-child(2) {
        margin-top: 4px;
        opacity: 1;
    }
    .nav-open i:nth-child(3) {
        margin-top: 4px;
    }
    

    header .navbar ul li a {
        font-family: 'Heebo', sans-serif;
        /*font-size: 17px;*/
        text-decoration: none;
        /*line-height: 70px;*/
        color: white;
        display: block;
        font-weight: 400;
        position: relative;
    }
    header .navbar ul li a.active {
        font-weight: 600;
    }
    /*header .navbar ul li a::before {
        content: '';
        height: 1.55px;
        background-color: black;
        width: 0;
        position: absolute;
        right: 0px;
        left: 0px;
        bottom: -1px;
        transition: all .5s ease;
        font-family: 'Heebo', sans-serif;
    }*/
    #nav:checked ~ .nav-container {
        transform: translateX(0);
    }
}

#nav:checked + .navbar ul {
    display: block;
}
#nav:checked + .nav-open {
    transform: rotate(45deg);
}
#nav:checked + .nav-open i {
    background: white;
    transition: transform .2s ease;
}
#nav:checked + .nav-open i:nth-child(1) {
    transform: translateY(6px) rotate(180deg);
}
#nav:checked + .nav-open i:nth-child(2) {
    opacity: 0;
}
#nav:checked + .nav-open i:nth-child(3) {
    transform: translateY(-6px) rotate(90deg);
}

#nav:checked ~ .nav-container {
    z-index: 0;
    opacity: 0.75;
}
#nav:checked ~ .nav-container ul li a {
    opacity: 1;
    transform: translateY(0);
}
.hidden {
    display: none;
}



#nav:not(:checked) + .nav-container ul {
    cursor: none;
}
#nav:not(:checked) + .nav-container ul li {
    cursor: none;
}
#nav:not(:checked) + .nav-container ul li a {
    cursor: none;
}



@media only screen and (max-width: 768px) {
    header .navbar ul li a {
        font-size: 16px;
        line-height: 60px;
    }
    header .brand-name a {
        font-size: 22px;
    }
    /*.image img {
        padding-bottom: 1em;
        width: 100%;
    }
    .info {
        display: block;
    }
    .info .btn-box{
        padding-top: 4.5em;
        width: 100%;
    }
    .info .email {
        padding-top: 4em;
        padding-bottom: 8em;
        font-size: 1rem;
        width: 100%;
    }
    .skills ul {
        font-size: 1.25rem;
        line-height: 32px;
        padding-bottom: 1em;
    }
    .aboutme{
        line-height: 28px;
    }*/
}

@media only screen and (max-width: 1020px) {
    header .navbar ul li a {
        font-size: 16px;
        line-height: 60px;
    }
    header .brand-name a {
        font-size: 22px;
    }
    /*.image img {
        padding-bottom: 2em;
    }
    .paragraph {
        flex-direction: column;
        padding-top: 3em;
    }
    .skills {
        width: 100%;
    }
    .aboutme {
        width: 100%;
    }
    .skills ul {
        font-size: 1.75rem;
        line-height: 35px;
        padding-bottom: 2.5em;
    }
    .paragraph .skills {
        font-size: 0.9em;
    }
    .info {
        padding-top: 0.5em;
    }*/
}

@media only screen and (max-width: 1200px) {
    .paragraph {
        padding-top: 3em;
    }
    /*.image img {
        padding-bottom: 3em;
    }*/
}

/*@media only screen and (min-width: 1200px) {
    .image img {
        padding: 0;
        max-width: none;
    }
    .paragraph {
        padding-top: 8em;
    }
    .info {
        padding-top: 4em;
        padding-bottom: 4em;
    }
}*/








/*body {
    background: #2d2d2d;
}

.load{
position: fixed;
    top: 50%;
    left: 50%;
    padding: 10px;
}
.loading-dot {
    float: left;
    width: 8px;
    height: 8px;
    margin: 0 4px;
    background: white;
  
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
  
    opacity: 0;
  
    -webkit-box-shadow: 0 0 2px black;
    -moz-box-shadow: 0 0 2px black;
    -ms-box-shadow: 0 0 2px black;
    -o-box-shadow: 0 0 2px black;
    box-shadow: 0 0 2px black;
  
    -webkit-animation: loadingFade 1s infinite;
    -moz-animation: loadingFade 1s infinite;
    animation: loadingFade 1s infinite;
}

.loading-dot:nth-child(1) {
    -webkit-animation-delay: 0s;
    -moz-animation-delay: 0s;
    animation-delay: 0s;
}

.loading-dot:nth-child(2) {
    -webkit-animation-delay: 0.1s;
    -moz-animation-delay: 0.1s;
    animation-delay: 0.1s;
}

.loading-dot:nth-child(3) {
    -webkit-animation-delay: 0.2s;
    -moz-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

.loading-dot:nth-child(4) {
    -webkit-animation-delay: 0.3s;
    -moz-animation-delay: 0.3s;
    animation-delay: 0.3s;
}

@-webkit-keyframes loadingFade {
    0% { opacity: 0; }
    50% { opacity: 0.8; }
    100% { opacity: 0; }
}

@-moz-keyframes loadingFade {
    0% { opacity: 0; }
    50% { opacity: 0.8; }
    100% { opacity: 0; }
}

@keyframes loadingFade {
    0% { opacity: 0; }
    50% { opacity: 0.8; }
    100% { opacity: 0; }
}*/



.content {
  display: flex;
  justify-content: center;
  align-items: center;
  width:100%;
  height:100%;
}
.loader-wrapper {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #ffeeee;
  display:flex;
  justify-content: center;
  align-items: center;
}
.loader {
  display: inline-block;
  width: 30px;
  height: 30px;
  position: relative;
  border: 4px solid rgb(15, 15, 15);
  animation: loader 2s infinite ease;
}
.loader-inner {
  vertical-align: top;
  display: inline-block;
  width: 100%;
  background-color: rgb(15, 15, 15);
  animation: loader-inner 2s infinite ease-in;
}
@keyframes loader {
  0% { transform: rotate(0deg);}
  25% { transform: rotate(180deg);}
  50% { transform: rotate(180deg);}
  75% { transform: rotate(360deg);}
  100% { transform: rotate(360deg);}
}
@keyframes loader-inner {
  0% { height: 0%;}
  25% { height: 0%;}
  50% { height: 100%;}
  75% { height: 100%;}
  100% { height: 0%;}
}