.overlay{
    opacity:0;
    background-color:#ccc;
    position:fixed;
    width:100vw;
    height:100vh;
    top:0px;
    left:0px;
    z-index:1000;
    overflow:visible;
    pointer-events:none;
    background-image: url("resources/tape.png");
    background-size:100vw 100vh ;
}

.overlay-text
{
    background-color: azure;
    color: black;
    text-align: center;
    vertical-align: center;
    font-size: 50px;
    text-decoration: bold;
}



#nav-bar{
/*    position: sticky;*/
    top:0;
    z-index: 10;
}

.navbar-KP img{
    height: 50px;
    padding-left: 10px;
}

.nav li a{
    float: right;
    text-align: left; 
    width: 120px;
}

#.nav li a:hover{
    /*color: #007bff!important;*/
	color: #87A0B2!important
	
}

.navbar-toggler{
    border:none!important;
}

dropdown-item.hover{
	float: left;
    text-align: left; 
    width: 120px;
}

#contact-tab{
	text-align:left;
}
/*
.nav-tabs{
	
    /*color:#87A0B2!important;
    color:#403D39!important;
	
    font-weight: 500;
    font-size: 20px;
	background: white;
}
*/

.nav-tabs > li > a {
  color: #575757;
  font-family: Palatino Linotype;
  font-weight:300;
  font-size: 18px;
}
.nav-tabs > li > a.active ,
.nav-tabs > li.active > a 
{
  color: black;
  font-weight: 1000;
}
.nav-tabs > li > a:hover {
	font-weight:800;
	color: black; 
}


/*--- About ---*/
#about,#studies,#music,#contact
{
    padding-top: 40px;
    padding-bottom: 20px;
    color:#555;
}
#about .btn
{
    margin-top: 20px;
    margin-bottom: ; 30px;
    
}

#about-content,#studies-content,#music-content,#contact-content
{
    padding-top: 20px;
}


.avatar {
    padding-top: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top:0;
    height: 50%;
	width:70%; 
}
.avatar-img
{  
    border-radius: 50%;
	width: 50%;
	height: 40%;
	margin-left: auto;
    margin-right: auto;
	max-width: 70vw;
	max-height:40vh;
}

.name-handwritten
{
	margin-top: auto;
	margin-left: auto;
    margin-right: auto;
	width: 60%;
	max-height: 20vh;
}

.name-handwritten2
{
	margin-top: auto;
	margin-left: auto;
    margin-right: auto;
	width: 60%;
	max-height: 25vh;
}

/*********************************
5.1 Education
*********************************/

#studies
{
	width: 100%;
	padding-bottom: 10px;
}

.edu_item
{
	padding-top: 9px;
}
.edu_item:not(:last-child)
{
	margin-bottom: 44px;
}
.edu_year
{
	width: 100px;
	font-size: 24px;
	font-weight: 700;
	color: #8583e1;
	line-height: 0.75;
    padding-bottom: 5px;
    padding-right: 5px;
}
.edu_image
{
	width: 90px;
	height: 90px;
	margin-top: 0;
    
}
.edu_image img
{
	max-width: 100%;
}
.edu_content
{
	padding-left: 38px;
}
.edu_title
{
	font-size: 24px;
	font-weight: 700;
	color: #100f3a;
	line-height: 0.75;
}
.edu_subtitle
{
	font-size: 16px;
	font-weight: 600;
	color: #838383;
	margin-top: 7px;
	padding-left: 1px;
}
.edu_text
{
	margin-top: 18px;
	padding-left: 2px;
}

.main_content_scroll
{
	margin-top: 125px;
	max-height: calc(100% - 183px - 125px);
	padding-right: 100px;
}





/* Scroll and Scrollbar */

.scrollable {
    max-height: 75vh;
    overflow-y: scroll;
}

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}






/* Social Media Buttons */

.social {
    height: 20px;
    width: 20px;
}

.col-md-2, .col-md-4
{
border-right: 1px solid #ccc;
}

.edu_content a:link
{
  background-color: #grey;
  text-decoration: bold;

}
.edu_content a:visited
{
  background-color: #grey;
  text-decoration: underline, italic;

}
.edu_content a:hover
{
  background-color: #grey;
  text-decoration: underline, bold;

}
.edu_content a:active
{
  background-color: #grey;
  text-decoration: underline, bold;

}


/*
    a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: red;
}
    */

#page-container {
  position: relative;
  min-height: 100vh;
}

#content-wrap {
  padding-bottom: 60px;    /* Footer height */
}

.page-footer
{
	position: absolute;
    width: 100vw;
/*    background-color: #87A0B2; */
	background-color: #F0F7F4;
	height: 60px;
	bottom: 0;
}
.footer-copyright
{
    text-align: center;
    color: #32292F /*azure*/;
	font-weight: 400;
	
}


/* YOUTUBE */
    .youtube-player {
        position: relative;
        padding-bottom: 56.23%;
        /* Use 75% for 4:3 videos */
        height: 0;
        overflow: hidden;
        max-width: 100%;
        background: #000;
        margin: 5px;
    }

    .youtube-player iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 100;
        background: transparent;
    }

    .youtube-player img {
        bottom: 0;
        display: block;
        left: 0;
        margin: auto;
        max-width: 100%;
        width: 100%;
        position: absolute;
        right: 0;
        top: 0;
        border: none;
        height: auto;
        cursor: pointer;
        -webkit-transition: .4s all;
        -moz-transition: .4s all;
        transition: .4s all;
    }

    .youtube-player img:hover {
        -webkit-filter: brightness(75%);
    }

    .youtube-player .play {
        height: 72px;
        width: 72px;
        left: 50%;
        top: 50%;
        margin-left: -36px;
        margin-top: -36px;
        position: absolute;
        background: url("//i.imgur.com/TxzC70f.png") no-repeat;
        cursor: pointer;
    }

/* TELOS YOUTUBE */
.alert {
  padding: 20px;
  background-color: #ff9800;
  color: white;
}

.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.closebtn:hover {
  color: black;
}