/*

@font-face { 

  font-family: Comfortaa2; 

  font-weight: normal; 

  src: url("./Comfortaa-Regular.eot") format("opentype"); 

}

@font-face { 

  font-family: Comfortaa2; 

  font-weight: bold; 

  src: url("./Comfortaa-Bold.eot") format("opentype"); 

}

                

@font-face { 

  font-family: Comfortaa; 

  font-weight: normal; 

  src: url("./Comfortaa-Regular.ttf"); 

}

@font-face { 

  font-family: Comfortaa; 

  font-weight: bold; 

  src: url("./Comfortaa-Bold.ttf"); 

}

*/

body { font-family: Arial; background-color: white; text-align: center; margin: 0px; padding-top: 20px; padding-bottom: 20px; font-weight: normal; letter-spacing: 0pt; font-size: 10pt; color: black;}



.clearbox { clear: both; line-height: 0px; }



img { border: 0px; }

a { color: black; text-decoration: underline; }



#page_container {
	background-color: white;
	border: 0px solid black;
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	width: 100%;
}

#left_panel {
	background-color: #DDDDDD;
	float: left;
	border-right: 0px dashed gray;
	padding-right: 0px;
	height: 945px;
	margin-top: 10px;
	width: 300px;
	display: inline-block;
}
#left_panel .logo {
    margin-left: 20px;
}
#right_panel {
	border: 0px solid black;
	width: calc(100% - 300px);
	padding-right: 0;
	box-sizing: border-box;
	display: inline-block;
}

#content { padding-left: 15px;      padding-right: 15px; 
}

#content img {
    max-width: 100%;
    height: auto;
}

.faded_border{
    max-width: calc(100% - 15px);
    height: auto !important;
}




div.index_tile { float: left; line-height: 0px; }

div.index_tile img { vertical-align: middle; border: 0px solid black; margin: 10px; margin-top: 10px; margin-bottom: 0px;}

div.index_tile .tile_title { background-color: transparent; line-height: 22px; font-size: 12pt; font-weight: bold; text-align: center; text-transform: none; padding: 5px; margin: 10px; margin-bottom: 3px; margin-top: 3px;  }



.faded_border { box-shadow: 5px 5px 5px 0px gray; -moz-box-shadow: 5px 5px 5px 0px gray; -webkit-box-shadow: 5px 5px 5px 0px gray; }


#left_panel a:hover {
    text-decoration: none;
}


#left_panel img { margin-bottom: 45px; margin-top: 8px; border: 1px solid black; height: 217px; }

#left_panel p {
	text-align: left;
	padding-left: 20px;
	margin: 0px;
	padding-bottom: 10px;
	font-size: 12pt;
}

#left_panel h1 { text-align: left; margin: 0px; padding-left: 20px;}

#copyright {
	text-align: right;
	font-size: 7pt;
	margin-right: 15px;
}

#content li {
    list-style-position: inside;
}




div.project { border: 0px solid black; margin-top: 25px; }

div.project div.description {
	float: right;
	width: calc(100% - 300px);
	padding-left: 15px;
	box-sizing: border-box;
}

@media (max-width: 900px) {
  div.project div.description {
  	width: 100%;
    padding: 0;
    padding-top: 15px;
  }
  
}

div.project div.title { font-weight: bold; font-size: 14pt; }



div.button_link { background-color: #CCCCCC; }



span.bold { font-weight: bold; }

p.block { text-align: justify; }


#left_panel .mobile {
    display: none;
}

.hamburger_button {
    display: none;
}

@media (max-width: 800px) {

    #left_panel {
    	width: 100%;
    	height: unset;
        margin-top: -20px;
    }
    
    #left_panel img {
        width: 45px;
        height: auto;
    	margin-bottom: 0px;
    	margin-top: 5px;
    }
    
    #left_panel .desktop {
        display: none;
    }
    
    .hide {
        display: none;
    }
    
    #left_panel .menu-content {
    	background: #efefef;
    	width: 100%;
    	padding: 15px;
    } 

    
    #left_panel .mobile {
        display: block;
    }
    
    #right_panel {
        margin-top: 60px; 
        width: 100%;
        max-width: 100%;       
    }
    
    

    .hamburger_button {
        display: block; 
        position: absolute;
        width: 35px;
        height: 35px;
        top: 15px;
        right: 15px;
        background-image: url('/img/hamburger.png');
        background-size: 100%;
    }
    
    div.index_tile {
    	width: 100% !important;
    	text-align: center;
    }
}


.index_tile img {
    filter: grayscale(1);
}

.index_tile img:hover {
    filter: grayscale(0);
}