/* myFPScircus.css - A hack of W3.CSS 4.04 */

html {
		box-sizing: border-box;
}
	*, *:before, *:after {
		box-sizing: inherit;
}
	
html,body {
	font-family:Verdana,sans-serif;
	font-size:15px;
	line-height:1.0;
}

html{overflow-x:hidden;}

body {
	max-width: 1240px;
	margin: auto;
	text-align: center;
	background-color: #0b0;
	color: black;
}

h1{font-size: 1.625em;}
h2{font-size: 1.375em;}
h3{font-size:1.188em;}
h4{font-size:20px}
h5{font-size:18px}
h6{font-size:16px}

h1,h2,h3,h4,h5,h6 {
	font-family:"Arial,sans-serif;
	font-weight:400;
	margin: 0;
	padding: 0 5px;
}

#wrapper {
	width: 100%;
	height: 100vh;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto auto;
} 

.my-header {
	width: 100%;
	background-color: #ee0;
	color: #d00;
	text-align; center;
	margin: 10px 0;
	padding: 10px 0;
	grid-column: 1 / 2;
	grid-row: 1 / 2;
}
.my-footer {
	padding: 10px;
	background-color: #c00;
	color: white;
	grid-column: 1 / 2;
    grid-row: 3 / 4;
}

.my-container {
	grid-column: 1 / 2;
	grid-row: 2 / 3;
	margin: 5px 0;
	padding: 0;
}
//.my-container:after,.my-container:before {
	//content:"";
	//display:table;
	//clear:both;
} 

.my-content {
	width: 100%;
	background-color: #aaf;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto auto;
	grid-gap: 10px 10px;
}
	

//.my-display-container {
	//margin: 0;
	//grid-row: 1 / 2;
	//grid-column: 2 /3;
//}
//.my-display-container:hover {display:block}

//.my-display-bottomleft{position:absolute;left:0;bottom:0;}

.my-large{font-size:18px!important}



/*----------------------*/
div.gallery {
	width: 300px;
    border: 1px solid #ccc;
}	
div.gallery:hover {
    border: 1px solid #777;
}

div.gallery img {
    width: 100%;
    height: auto;
}

div.desc {
	width: 100%;
    padding: 15px;
    text-align: center;
}
.responsive {
    padding: 0 6px;
    float: left;
    width: 24.99999%;
	
	
}

@media only screen and (max-width: 900px){
	.my-header, my-footer {
		width: 100%;
	}
	.my-content {
	width: 100%;
	background-color: #aaf;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto auto;
	grid-gap: 10px 10px;
	}
}
    .responsive {
        width: 49.99999%;
		float: left;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 600px){
	.my-header, my-footer {
		width: 100%;
	}
	.my-content {
	width: 100%;
	//background-color: #aaf;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto auto;
	grid-gap: 10px 10px;
	}
}
    .responsive {
        width: 100%;
    }
}

//.clearfix:after {
    //content: "";
    //display: table;
    //clear: both;
//}