/*FONTS*/
@font-face {
    font-family: dinpro_bold;
    src: url(index/fonts/DINPro-Bold.otf);
}

@font-face {
    font-family: dinpro_light;
    src: url(index/fonts/DINPro-Light.otf);
}

/*_________________*/

body{
    height:2000px;
}

/*GENERAL*/

.fade_in{
    opacity: 0;
    margin-top: 50px;
}

/*_________________*/



/*MAIN PAGE*/

#introduction_banner{
    background-color: rgb(78, 78, 252);
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 355px;
    overflow: hidden;
}

#photo_banner{
    position: absolute;
    left: 50%;
    top:50%;
    transform: translateY(-50%) translateX(-50%);
    height: 356px;
    width: auto;
}

#photo_filip{
    position: absolute;
    left: 35%;
    bottom:-10px;
    transform: translateX(-32%);
    height:290px;
    width:auto;
}

#photo_signature{
    position: absolute;
    left: 42%;
    top:50%;
    transform: translateX(25%) translateY(-15%);
    height:110px;
    width:auto;
}

#introduction_text{
    position:absolute;
    left: 25%;
    top:355px;
    width: 50%;
    text-align: center;
    padding-top: 20px;
}

#introduction_text p{
    font-size: 20px;
    font-family:dinpro_light;
}

.title{
    color:#076A8A;
    font-family:dinpro_bold;
    text-align: center;
}

.between{
    position: relative;
    width: 300px;
    height: 30px;
    left: 50%;
    margin-left:-150px;
    top: 50px;
}

.line_between1{
    width: 0px;
    float:right;
    height:2px;
    position:absolute;
    top:16px;
    right: 50%;
    border-radius: 5px;
    background-color:black;
}

.line_between2{
    width: 0px;
    height:2px;
    position:absolute;
    top:16px;
    left: 50%;
    border-radius: 5px;
    background-color:black;
}

.circle_between{
    width: 12px;
    height:12px;
    position:absolute;
    top:11px;
    left: 50%;
    margin-left:-6px;
    background-color: black;
    border-radius: 100%;
    opacity:0;
}



/*_________________*/



/*NAVIGATION*/

.navbar_container{
    position: absolute;
    top: 0px;
    left: 0px;
    height:55px;
    width: 100%;
    z-index: 1;
}

.nav_item{
    position: relative;
    margin-right: 55px;
    left: 42%;
    float: left;
    top: 50%;
    padding-bottom: 5px;
    transform: translateY(-50%);
    font-family: dinpro_light;
    font-size: 20px;
    font-weight:lighter;
}

.nav_item::before {
    content: '';
    display: block;
    height: 2px;
    background-color: white;
    position: absolute;
    bottom: -5px;
    left:0px;
    width: 0%;
    transition: all ease-in-out 500ms;
  }
  
.nav_item:hover::before {
    width: 100%;
}

.nav_item a{
    color: white;
    text-decoration: none;
}

/*_________________*/



/*EXPERIENCES PAGE*/

#experiences_container{
    position: relative;
    left: 50%;
    margin-top: 50px;
    top:100px;
    width: 550px;
    height: auto;
    min-height: 300px;
    transform: translateX(-50%);
    opacity: 0;
}

.exp_container{
    height: 60px;
    margin-top: 20px;
    font-family: dinpro_light;
    font-size:20px;
    font-weight: bold;
}

.exp_name{
    width: 100%;
    margin-left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.exp_max{
    position:relative;
    left: 50%;
    top:-20px;
    width: 65%;
    height:25px;
    margin-top: 25px;
    border: 1px solid rgb(105, 105, 105);
    border-radius: 5px;
    overflow:hidden;
    transform: translateX(-50%);
}

.experiences{
    position: relative;
    top:0px;
    left:0px;
    height: 100%;
}

.webapp{
    background-color: rgb(63, 123, 196);
    width: 85%;
}

.pcapp{
    background-color: rgb(117, 171, 207);
    width: 80%;
}

.edit_vid{
    background-color: rgb(175, 197, 214);
    width: 55%;
}

.edit_graphic{
    background-color: #6995a3;
    width: 25%;
}

/*_________________*/

/*EXAMPLES PAGE*/

#examples_container{
    position: relative;
    left: 50%;
    margin-top: 50px;
    top:100px;
    width: 140%;
    height:auto;
    overflow: auto;
    transform: translateX(-50%);
    opacity: 1;
}

.example_image{
    overflow:hidden;
    height: 250px;
    width: 250px;
    border-radius:100%;
    border:#076A8A solid 1px;
}

.example_text{
    position:relative;
    width: 61%;
    top: -220px;
    margin-left: 50%;
    transform: translateX(-40%);
}

.example_text h1{
    font-family: dinpro_bold;
    font-size:35px;
    color:#055570;
    margin-bottom: -20px;
}

.example_text p{
    font-size:28px !important;
}

.left{
    float: left;
}

.right{
    float: right;
}

/*_________________*/

/*CONTACTS PAGE*/

#contacts{
    position:relative;
    left: 0px;
    top:100px;
    width:289px;
    text-align: left;
    margin-left: 50%;
    transform: translateX(-50%);
}

#contacts h1{
    font-family: dinpro_bold;
    font-size:28px;
    margin-bottom: 40px;
}

#contacts p{
    font-family: dinpro_light;
    font-size:23px;
    margin-top: -10px;
    overflow: auto;
}

/*_________________*/

/*FOOTER*/

#footer{
    background-color:#07132C;
    position: relative;
    top: 150px;
    bottom: 0px;
    left:0px;
    width:100%;
    height:55px;
    text-align:center;
    font-size:30px;
    color: white;
}

#footer p{
    padding-top: 11px;
}

#year{
    color: #5979a8;
    font-size:22px;
    font-weight: bold;
}

/*_________________*/

/*LANGUAGES*/

#languages{
    color: white;
    font-family: dinpro_light;
    font-size:15px;
    position: absolute;
    left: 10px;
    top:10px;
    z-index: 10;
}

#languages a{
    text-decoration: none;
    color: White;
}

#languages a:hover{
    cursor: pointer;
}

/*_________________*/

/*RESPONSIVITY*/

@media only screen and (min-width: 1930px){ /* 4K */
    
    #photo_banner{
        width: 100%;
    }

    .title{
        font-size: 40px;
    }

    #contacts{
        width: 351px;
    }
    
    #footer p{
        font-size:20px !important;
    }
}

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

    .example_image{
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .example_text{
        width: 100%;
        top: 0px;
        margin-left: 50%;
        transform: translateX(-50%);
        margin-bottom:150px;
    }
    
    .example_text p{
        font-size:23px !important;
    }
    
    .right{
        float: left;
    }

}

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

    #introduction_text{
        width:90%;
        left: 5%;
    }

    #examples_container{
        width: 100%;
    }

    .example_text{
        width: 70%;
    }

    .navbar_container{
        display: none;
    }

    #photo_filip{
        left: 15%;
    }

    #photo_signature{
        left: auto;
        right: 20%;
        top:50%;
    }

    

}

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

    #photo_signature{
        left: auto;
        right: 20%;
        top:35%;
        height:80px;
    }

    #experiences_container{
        left: 50%;
        width: 94%;
        font-size:15px ;
    }
    
    .exp_container p{
        font-size:15px !important;
    }

}

/*_________________*/