@font-face {
    font-family: logo_font;
    src: url(../fonts/font_1.ttf);
}


body, input, textarea, select, option {
    font-family: calibri;
    -webkit-appearance: none;
    text-overflow: ellipsis;
    font-size:15px;
}

div.page_title{
    position:absolute;
    top:90px;
    left:25px;
    font-size:17px;
    font-weight: bold;
    background-color:white;
    color:black;
    padding:5px;
    border-radius:5px;
    display:block;
    border:1px solid black;
}

@media all and (min-width: 850px) {
    div.page_title{
        display:none;
    }
}

div.name{
    position:absolute;
    top:16px;
    left:20px;
    font-size:17px;
    color:rgb(16,20,128);
    padding:10px;
    border-radius:5px;
    font-family: logo_font;
    background-image: linear-gradient(rgb(235,235,235),white);
}

div.name span{
    margin-left:-3px;
    margin-right:5px;
    font-size:15px;
    font-weight:normal;
    color:black;
}



div.tabs{
    position:fixed;
    padding-left:3%;
    left:0px;
    top:80px;
    height:100%;
    width:97%;
    line-height:35px;
}

span.tab_title{
    display:none;
    cursor:pointer;
}


@media all and (min-width: 850px) {

    div.tabs{
        top:110px;
        display:block;
    }

    div.name{
        font-size:23px;
    }

    div.name span{
        font-size:16px;
    }

}

div.heading{
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:70px;
    background-image: linear-gradient(rgb(245,245,245), white);
    z-index:99;
}

div.heading img{
    position:absolute;
    top:20px;
    right:15px;
    height:25px;
    width:25px;
    opacity:0.5;
    border-radius:3px;
    border:1px solid transparent;
    padding:3px;
}

div.heading img.system_menu_icon{
    left:8px;
    height:20px;
    width:auto;
}

div.heading img:hover{
    opacity:1;
    cursor:pointer;
    border:1px solid gray;
}

div.line{
    position:absolute;
    left:0px;
    top:27px;
    height:1px;
    width:100%;
    border-bottom: 1.5px solid lightgray;
    z-index:-1;
    display:block;
}


div.tab_pressed p, h1,ul, p{
    width:calc(100% - 40px);
    padding:10px;
    padding-left:20px;
    padding-right:15px;
    text-align:justify;
}

div.tab_pressed p{
    padding:0px;
    padding-left:30px;
}

div.tab_pressed p.centered_paragraph{
    text-align: center;
}



div.tab_pressed h1{
    font-size:18px;
    padding-top:0px;
    padding-bottom:0px;
    margin-bottom:-10px;
}

div.tab_pressed img{
    float:right;
    margin:10px;
    margin-left:30px;
    margin-bottom:7px;
    margin-right:0px;
    border:2px solid lightgray;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-align: center;
    width:80px;
}

div.tab_pressed img.large{
    float:none;
    margin:10px;
    margin-left:30px;
    border:2px solid lightgray;
    box-shadow:none;
    text-align: center;
    width:90%;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:15px;
}

p.subtabs{
    position:fixed;
    top:55px;
    left:10px;
    background-color:white;
    width:calc(100% - 40px);
    padding-top:50px;
    padding-right:30px;
    height:58px;
    z-index:10;
    overflow-x:auto;
    overflow-y:hidden;
}

.system_menu{
    display:block;
}

    img.photo{
    padding:3px;
    border:1px solid lightgray;
    background-color:white;
    float:right;
    width:200px;
    margin-left:15px;
}

h1.bookmark:first-of-type{
    padding-top:20px;
}

@media all and (min-width: 850px) {
    
    img.photo{
    width:300px;

}

h1.bookmark:first-of-type{
    padding-top:10px;
}
    .system_menu{
    display:none;
}

    div.tab_pressed img{
        width:150px;
        margin-bottom:10px;
    }
    div.line{
        display:block;
    }

    div.tab_pressed h1{
        font-size:19px;
    }

    span.tab_title{
        position:initial;
        display:inline;
        width:auto;
        height:auto;
        text-transform:none;
        font-size:18px;
    }

    span.tab_title a{
        color:black;
    }
    div.heading img.system_menu_icon{
        display:none;
    }


    div.tab_pressed, div.tab{
        float: left;
        border:1.5px solid lightgray;
        font-weight: bold;
        border-bottom:2px solid white;
        border-radius:5px 5px 0px 0px;
        margin-top:-8px;
        background-color:white;
        height:35px;
        line-height: 35px;
        padding:0px 7px 0px 7px;
    }

    div.tab_pressed p, h1,ul, p{
        padding-left:20px;
    }

    div.tab_pressed ul{
        padding-top:0px;
        padding-left:70px;
    }


    div.tab_pressed img{
        float:right;
        margin:10px;
        margin-left:30px;
        border:2px solid lightgray;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        text-align: center;
    }




    div.tab_pressed h1,ul, p{
        max-width:1000px;
    }




    div.tab:first-child, div.tab_pressed:first-child{
        margin-left:20px;
    }

    div.tab:hover, div.tab_pressed:hover{
        cursor:pointer;
        background-color:rgb(245,245,245);
    }

    div.tab_pressed img.flag{
        position:relative;
        height:10px;
        width:auto;
        float:none;
        border-width:0px;
        box-shadow:none;
        margin:0px;
    }

    .menu ul li{
        padding:5px;
        font-size:14px;
    }

    div.tab_pressed img.large{
        width:auto;
        max-width:80%;
        text-align: center;
    }

    div.tab_pressed img.flag{
        position:relative;
        height:20px;
        width:auto;
        float:none;
        box-shadow:none;
        margin:0px;
    }
    
    p.subtabs{
    position:fixed;
    top:45px;
    left:13px;
    background-color:white;
    width:100%;
    padding-top:50px;
    height:58px;
}

}



div.tab{
    background-color:white;
    font-weight:normal;
    border-width:0px;
    color:rgb(70,70,70);
}


div.tab_detail{
    position:absolute;
    top:28px;
    left:0px;
    width:100%;
    height:calc(100% - 150px);
    font-weight: normal;
    padding-top:10px;
    overflow-y:scroll;
}

div.tab_detail:hover{
    cursor:auto;
}

div.tab_detail_hidden{
    display:none;
}


.menu ul{
    border:1px solid lightgray;
    margin:0px;
    padding:0px;
    list-style: none;
    background-color:white;
    box-shadow: 1px 1px 5px 2px rgb(240,240,240);
}

.menu ul li{
    padding:8px;
    border-bottom:1px solid lightgray;
    font-size:15px;
    line-height:normal;
}

.system_menu ul li{
    padding:12px;
    font-size:19px;
    border-bottom-style: dotted;
}

.system_menu ul{
    position:absolute;
    top:17px;
    left:0px;
}







.menu ul li:last-child{
    border-width:0px;
}

.menu ul li:hover{
    background-color:rgb(245,245,245);
    cursor:pointer;
}

.main_menu,.system_menu{
    position:absolute;
    top:33px;
    right:15px;
    width:auto;
    z-index:300;
    display:none;
}

.system_menu{
    max-width:300px;
    left:15px;
}

div.name img{
    position:relative;
    height:40px;
    margin-right:5px;
    opacity:1;
    width:auto;
    border-width: 0px;
}

div.name img:hover{
    border-width:0px;
}

a{
    color:#1D75B7;
    text-decoration:none;
}

a:hover{
    text-decoration:underline;
}

span.highlighted{
    color:blue;
    font-weight: bold;
}

.df-messenger-wrapper {
    z-index:1000;
}

div.tab_detail p, ul, h1, p{
    font-size:17px;
}



i.experience_time{
    padding-left:20px;
    color:rgb(150,150,150);
    font-size:16px;
}

img.flag{
    position:relative;
    height:18px;
    top:2px;
    left:3px;
    width:auto;
    float:none;
    border:0px;
    box-shadow:none;
    margin:0px;
}


span.email_icon{
    color:white;
    background-color:black;
    margin-left:10px;
    padding:0px;
}


span.subtab{
    position:relative;
    top:20px;
    padding:5px;
    border-bottom:2px solid lightgray;
    background-color:white;
}

span.subtab:hover{
    cursor:pointer;
    background-color:rgb(245,245,245);
}

span.selected_subtab{
    border-bottom-color: black;
    background-color:rgb(245,245,245);
}

img.flag{
        position:relative;
        top:5px;
        height:15px;
        width:auto;
        float:none;
        border-width:0px;
        box-shadow:none;
        margin:0px;
    }
 
    div.name img.flag:first-of-type{
        left:-6px;
    }
    
    code{
        font-size:15px;
    }
    
    ul,p{
    padding-top:0px;
    padding-bottom:0px;
    font-size:15px;
    line-height:18px;
}

div.book_title{
    margin-top:10px;
    font-size:14px;
    padding-top:10px;
    padding-bottom:10px;
    font-family: calibri;
    border-bottom:1px solid lightgray;
    color:rgb(16,20,128);
}

ul{
    padding-left:30px;
}

ul li{
    line-height:23px;
}