@charset "UTF-8";
/* CSS Document */

/* width */
::-webkit-scrollbar {
width: 15px;
border: 2px solid #FFFFFF;
}

/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
border: 2px solid #FFFFFF;
}

/* Handle */
::-webkit-scrollbar-thumb {
background: darkcyan;
border: 2px solid #FFFFFF;
border-radius: 20px;
}


/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: darkgrey;
border: 2px solid #FFFFFF;
}



body{
margin-top: 0px;
font-family: "Montserrat", sans-serif;
font-weight: 500;
color: #646464;

}

header{
margin-left: 200px;
position: fixed;
z-index: 1;
display: block;
width: 100%;
font-size: 1.5em;
padding-left: 60px;
padding-top: 20px;
padding-bottom: 20px;
font-weight: 600;
background: black;
color: white;
}

h1{
color: black;
font-size: 1.4em;
line-height: 150%;
margin-left: -40px;
}
h2{line-height: 150%;}
h3{
font-size: 1em;
padding-top: 20px;
text-transform: uppercase;
color: #000000;
margin-top: 0px;
}
h4 {
color: #000000;
font-weight: 700;
line-height: 150%;
font-size: 1.2em;
}
.code{
font-family: "Courier New", monospace;
font-weight: bold;
}
quote{
font-style: italic;
font-weight: 600;
color: #008B8B;
background-color: #E0FFFF;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
line-height: 175%;
}
.action{
background-color: #D8595B;
color: white;
padding-top: 5px;
padding-right: 5px;
padding-left: 5px;
padding-bottom: 5px;
border-radius: 2px;
margin-left: 5px;
margin-right: 5px;
}

.highlight{
background-color: #FAF968;
color: black;
padding-top: 5px;
padding-right: 5px;
padding-left: 5px;
padding-bottom: 5px;
border-radius: 2px;
margin-right: 5px;
font-weight: 700;
}

.detail{
color: gray;
margin-left: 20px;
font-style: italic;
}

.shadow{
box-shadow: 2px 2px 2px grey;
border: thin solid grey;
margin-top: 15px;
}


#intro img{
padding-right: 20px;
padding-bottom: 20px;
float:left;
}
#intro{
float: left;
max-width: 900px;
margin-left: 0px;
color: black;
padding-left: 0px;
font-size: 1.3em;
font-weight: 600;
line-height: 150%;
}

#intro li{
color: black;
line-height: 150%;
padding-bottom: 20px;
font-weight: 600;
}

#intro p{
color: black;
line-height: 150%;
padding-bottom: 20px;
font-size: 1.1em;
font-weight: 600;
}

hr {
border-top: 2px solid #D0D0D0;
margin-top: 40px;
}

#highlight_section{
float: left;
width: 100%;
margin-top: 40px;
padding: 20px;
background-color: lightcyan;
color: darkcyan;
}

#highlight_section img{
float: left;
padding-right: 20px;
}

#shortcut_section{
float: left;

margin-top: 40px;
margin-bottom: 40px;
padding-left: 40px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 20px;
background-color: #DBFCB2;
color: black;
}

#shortcut_section img{
padding-top: 10px;
padding-right: 20px;
padding-left: 10px;
padding-bottom: 50px;
float: left;
}

#shortcut_section ol li{
padding:0px;
margin-top: 10px;
line-height: 175%;
color: black;
}

#shortcut_section p{
padding-left: 20px;
color: black;
line-height: 175%;
}

#shortcut_section a{
text-decoration: underline;
color: black;
font-weight: 600;
}


#shortcut_section h1, h2, h3{
}


#stage{
float: left;
max-width: 900px;
margin-left: 300px;
padding-top: 100px;
padding-bottom: 100px;
padding-left: 0px;
}

#stage p{
line-height: 1.5em;
}

#stage p a, #stage ol li a, #stage ul li a{
text-decoration: none;
font-weight: 700;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
border-radius: 10px;
border-left: 3px solid #D8595B ;
border-right: 3px solid #D8595B ;
color: #D8595B;
;
font-size: 1em;
padding-left: 5px;
}


#stage p a:hover, #stage ol li a:hover, #stage ul li a:hover{
color: #FFFFFF;
background-color: #D8595B;
}
#stage ol h2, #stage ul h2 , #stage h2{
color:darkcyan;
margin-left: -40px;
padding-left: 0px;
margin-top: 100px;
padding-top: 10px;
border-top: 2px solid darkcyan;
font-size: 1.2em;
}
ol img{display: block; padding-top: 20px;}
ol li img {
}
ol h1, ol h3, ol h4, ol p{margin-left:-20px;}
ul h1, ul h3, ul h4, ul p{margin-left:-20px;}

ol, ul {
line-height: 1.5em;
margin-left: -40px;}

ol li{
margin-top: 40px;
padding-left: 0px;
line-height: 175%;

}
ul li{
line-height: 175%;
margin-bottom: 10px;
color: gray;
margin-top: 10px;
margin-left: 20px;
}
ul p, ol p{margin-left: 0px;}


/* Navigation */

#nav .title{
font-size: 1.5em;
color: white;
font-weight: 600;
padding-top: 10px;
padding-right: 10px;
margin-top: 0px;
letter-spacing: 1px;
}

strong {
color: black;
letter-spacing: 0%;
}

#nav .subtitle{
font-size: .9em;
color: darkcyan;
font-weight: 600;
margin-top: 0px;
margin: 0px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
}

#nav {
height: 95%; /* Full-height: remove this if you want "auto" height */
width: 200px; /* Set the width of the sidebar */
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
left: 0;
background-color: #008b8b;
background-image: linear-gradient(0deg, #008b8b 0%, #72f7b8 100%);
overflow-x: hidden; /* Disable horizontal scroll */
padding-left: 20px;
padding-top: 20px;
padding-bottom: 5%;
}



#nav h2{
/*  border-top: 2px solid #F1F1F1;*/
font-size: .9em;
padding-top: 10px;
padding-left: 10px;
padding-bottom:5px;
color: black;
text-transform: uppercase;
margin-bottom: 0px;
margin-top: 10px;
letter-spacing: 0.5px;
background-color: #E0F2EC;
border-bottom: 3px solid white;
border-bottom-left-radius: 10px;
}
#nav a .btn{background-color: #E0F2EC}

.btn {
border: none;
outline: none;
padding-top: 5px;
padding-right: 5px;
padding-left: 5px;
padding-bottom: 5px;
margin-left: 10px;
cursor: pointer;
display: block;
width: 100%;
font-size: .9em;
text-align: left;
font-family: "Montserrat", sans-serif;
font-weight: 500;
}

#stage .btn{
border-left: 3px solid #D8595B;
border-right: 3px solid #D8595B;
border-top: 3px solid #D8595B;
border-bottom: 5px solid #D8595B;
border-radius: 10px;
display: inline-block;
width: auto;
color: #D8595B;
font-weight: 600;
padding: 10px;
margin-left: 0px;
font-size: 1em;
}

#stage a:hover{
background-color: #D8595B;
color: white;
border-bottom: 5px solid black;
}


a{text-decoration: none; 
}




.active{
border: none;
outline: none;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
margin-left: 10px;
background-color: black;
color: white;
cursor: pointer;
display: block;
width: 100%;
font-size: .9em;
text-align: left;
font-family: "Montserrat", sans-serif;
font-weight: 600;


}

.btn:hover {
border: none;
outline: none;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
margin-left: 10px;
background-color: #E6E6E6;
cursor: pointer;
display: block;
width: 100%;
font-family: "Montserrat", serif;
font-size: .9em;
text-align: left;
}






#gallery {
margin: 10px 40px;
height:100px;
padding-bottom: 20px;
}

#gallery img {
width: 150px;

transition: 1s;
padding: 5px;
float: left;
}

#gallery img:hover {
filter: drop-shadow(4px 4px 6px black);
transform: scale(1.1);
}