header {
    max-width: 100%;
    max-height: 100%;
    padding: 0 0 0 0;
    margin: 0 0 5px 0;
}
    
body {
	background-color: rgb(55, 55, 55);
	background-position-y: 50%;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: 65% 65%;
    margin: 0 0 5px 0;
    }


footer {
    grid-area: footer;
    text-align: left;
    max-width: 98%;
    max-height: 97%;
    padding: 10px 20px 20px 20px;
    margin: 5px 5px;
    background-color: rgba(230, 230, 230, 1);
}

a {
    color: darkslateblue;
    }

h1 {
    font-size: 35px;
    }

article {
    max-width: 97vw;
    align-content: center;
    padding: 10px 20px 20px 20px;
    margin: 5px 5px;
    background-color: rgba(230, 230, 230, 1);
    grid-area: article;
}



.flex-header {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}

.flex-div:nth-child(1) {
    flex: 3;
}

.flex-div:nth-child(2) {
    flex: auto;
}

.flex-content-div {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}

.flex-content-div:nth-child(1) {
    flex: 2 0 70%;
}

.flex-content-div:nth-child(2) {
    flex: 1 0 30%;
}

/* Grid layout */

.image {grid-area: image;}

/* <<< Custom classes >>> */



.video {
    display: block;
    height: auto;
    padding: 10px 10px 10px 10px;
    }
    
    
.parent {
    display: flex;
    flex-direction: row;
    position: static;
	}
	
.child:hover .overlay {
    opacity: 0.5;
    transition: opacity 0.7s;
	}
	
.child:hover .overlay-text {
    opacity: 1;
	}
	
.child {
    position: relative;
    max-width: 100%;
    margin: 3px 3px 3px 3px;
    width: -moz-fit-content;
    width: fit-content;
	}
	
.child-img {
    max-width: 100%;
    max-height: 100%;
    z-index: 1;
	}
	
.img-text-tl {
    color: black;
    position: absolute;
    top: 0;
    left: 5px;
	}
	
.img-text-br {
    color: white;
    position: absolute;
    bottom: 0;
    right: 5px;
	}
	
.img-text-bl {
    color: white;
    position: absolute;
    bottom: 0;
    left: 5px;
	}
	
.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 99.1%;
    width: 100%;
    opacity: 0;
    background-color: rgb(150, 150, 150);
	}
	
.overlay-text {
    color: rgb(0, 0, 0);
    opacity: 0;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	}
	
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

@font-face {
  font-family: "future_west";
  src: url("/fonts/future-west.ttf") format("truetype");
}

.header-text {
    font-family: "future_west", serif;
	color: black;
	text-align: center;
	position: absolute;
	top: 35%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.head-logo {
	float: left;
    font-family: "future_west", serif;
	color: black;
}

.img-d-text {
	font-size: 24px;
}


	
::-webkit-scrollbar {
	width: 12px;
	}

::-webkit-scrollbar-track {
	/*box-shadow: inset 0 0 5px grey;*/ 
	/*border-radius: 10px;*/
	background: #f1f1f100;
	}
 
::-webkit-scrollbar-thumb {
	background: #777; 
	border-radius: 10px;
	}

::-webkit-scrollbar-thumb:hover {
	background: #aaa; 
	}





@media (max-width: 500px) {
        h1 {
            font-size: 36px;
            padding: 5px;
            }

        li {
            padding: 5px;
            display: block;
            }

        .flex-content-div {
            flex-flow: row wrap;
        }

    }