* {
    margin:0px;
    padding:0px;
}

p, ul li, ol li, a, h6 {
    font-size: 1.15rem;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

body {
    background-color:#0f172a;
}

.container {
    position: relative;
}

.clearfix {
    clear:both;
}

.information_section {
    padding-top:6rem;
}

.close_icon {
   font-weight: bold;
  font-size: 34px;
  position: absolute;
  top: 0px;
  right: 25px;
  color: #fff;
}

.close_icon:hover {
    cursor: pointer;
    color:#50bdd9;
}

.bold_text {
    font-weight: bold;
}

.text_link {
    font-weight: bold;

}

.text_link:hover {
    color:#50bdd9;
     transition: color 1s;
}

.back-link {
    margin-top:15px!important;
    color:#fff;
    text-decoration: none;
    font-weight: bold;
}

.section_padding {
    padding-top: 6rem;
    padding-bottom: 6rem;
}


.scroll_menu li a {
    text-decoration: none;
    color:#d7ded980;
}


.scroll_menu li:first-child a {
    color:#fff;
}

.scroll_menu li a:hover {
    color:#fff!important;
}

.page_link {
    color:#fff;
    text-decoration: none;
    font-weight: bold;
}

.page_link:hover, .back-link:hover {
    color:#50bdd9;
    transition: color 1s;
}

.left_hand_side {
    height: 100vh;
    position: fixed;
    float:left;
    padding-top: 6rem;
    padding-bottom: 6rem;
    color:#fff;
    width:507px;
}

.title_margin {
    margin-top:3rem;
}


.left_hand_side_container {
    position: absolute;
    top:0px;
    left:0px;
    width:100%;
    height: 100vh;
}

.left_hand_side ul {
    padding-left:15px;
}


/* right hand side */


.right_hand_side {
    width:50%;
    float:right;
    color:#fff;
    padding-bottom: 6rem;
   
}

.right_hand_side a {
    color:#fff;
}



.information_block {
    border:1px solid transparent;
    padding:15px;

}

.information_block_with_link:hover {
    background-image:url('../images/overlay.png');
    background-size: cover;
    border-color:#fff;
    transition: border-color 1s;
    cursor: pointer;

}




.information {
    padding-top: 6rem;
}


.employment_information_block_date {
    float:left;
    width:35%;
}

.employment_information_block_info {
    width:65%;
    float:right;

}


.project_block_image {
    width:35%;
    float:left;
    background-size:cover;
}

.project_block_info {
    width:65%;
    float:right;
    padding-left:15px;
}




.image img {
    padding-top:15px;
    padding:15px;
    border:1px solid transparent;
}

.image img {
    width:100%;
}

.image img:hover {
    background-image:url('../images/overlay.png');
    background-size: cover;
    border-color:#fff;
    transition: border-color 1s;
    cursor: pointer;

}


.education_block {
    padding:15px;
}



.overlay {
    position: fixed;
    width:100%;
    height: 100%;
    z-index: 2;
    display: none;
    overflow: scroll;
    background-image:url('../images/image_overlay.png');
    background-repeat: repeat;
}

.image_arrow {
    position: fixed;
  top: 50%;
font-size: 45px;
 color:white;
}

.image_arrow:hover {
    color:#50bdd9;
    cursor: pointer;
}

.image_arrow_left {
    left:25px;
     -ms-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
}

.image_arrow_right {
    right:25px;
     -ms-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
}

.overlay_image {
    max-width:1750px;
    margin:auto;
    margin-top:90px;
    padding-left:15px;
    padding-right:15px;
    position: relative;
    margin-bottom:90px;
}

.smaller_overlay_image {
    max-width:800px;
}

.overlay_selected_image {
    width:80%;
    display: block;
    margin:auto;
     margin-top:50px;
}

.fade-in-animation {
    opacity: 1;
    animation-name: fadeInOpacityAnimation;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 0.25s;
}

@keyframes fadeInOpacityAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}


.fade-out-animation {
    opacity: 1;
    animation-name: fadeOutOpacityAnimation;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 0.25s;
}

@keyframes fadeOutOpacityAnimation {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}



@media screen and (max-width:1200px) {

    .overlay_selected_image {
  width: 75%;

    }

    .image_arrow {
  position: absolute;
  top: 78px;
  font-size: 28px;
}

.image_arrow_left {
    left:15px;
}

.image_arrow_right {
    right:15px;
}

.close_icon {
  font-size: 28px;
  right: 15px;
}

}



@media screen and (max-width:1199px) {

    .left_hand_side {
        width: 410px;
      }

     

}



@media screen and (max-width:991px) {

    .left_hand_side {
        padding-top:3rem;
    }

    .scroll_menu {
        display: none;
    }
    .left_hand_side, .right_hand_side {
        float:none;
        transform: none;
        position: static;
        width:100%;

    }

    .left_hand_side {
        padding-bottom:0px;
        height: auto;
    }

    .information_section {
  padding-top: 0rem;
}

    .information {
        padding-top:3rem;
    }

    .information_block {
        padding-left:0px;
        padding-right:0px;
    }

    .information:first-child {
        padding-top: 0rem!important;
      }

    .right_hand_side, .section_padding {
        padding-top:3rem;
        padding-bottom:3rem;
    }
}


@media screen and (max-width:800px) {

    .image_arrow {
  font-size: 35px;
}

}


@media screen and (max-width:767px) {

    .project_block_info {
        float:none;
        width:100%;
        padding-left:0px;
    }

    .project_block_image {
        float:none;
    }

    .project_block_image {
        width:350px;
        margin: auto;
    display: block;
    }

    .employment_information_block_date, .employment_information_block_info {
        float:none;
        width:100%;
    }

    


   

}






@media screen and (max-width:425px) {

    .project_block_image {
        width:100%;
    }

}


@media screen and (max-width:400px) {

     .overlay_selected_image {
    width: 70%;
  }

}