/* CSS Document */
/* Mobile First */




/* ---------------- D R O P D O W N  ------------------- */


/* Input */

.Dropdown > input[type='checkbox'] {
	display: none;

		
}

/* Label */


.Dropdown > label {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	margin-top:  0;
	text-align: center;
	font-size: .8em;
	color: black;
	padding: .5em;
	x-background: #b1b2af;
	cursor: pointer;
	border-radius: 0.5em 0.5em 0 0;
	}
	

/* Toggle text */
.Dropdown > input:empty + label span:nth-child(1) {
	display: inline;	
	}
	.Dropdown > input:empty + label span:nth-child(2) {
		display: none;	
		}	
.Dropdown > input:checked + label span:nth-child(1) {
	display: none;	
	}
	.Dropdown > input:checked + label span:nth-child(2) {
		display: inline;	
		}
		

.Dropdown > label:hover {
	background-color: #979896;
	}
	

/* arrow */

.Dropdown > label::before {
	content: "";
	position: absolute;
	display: block;
	left: .75em;
	top: .75em;
	border-top: .4em solid transparent;
	border-bottom: .4em solid transparent;
	border-left: .6em solid black;
	transition: transform .5s ease-out;
	}
	.Dropdown > input:checked + label::before {
		transform: rotate(90deg);
		}


/* Content */


.Content {
	max-height: 0px;
	overflow: hidden;
	width: 100%;
	x-background-color: #d0d0ce;
	transition: max-height .25s ease-in-out;
	margin-bottom: 0.5em;
	}
	.Dropdown > input:checked + label + .Content {
		max-height: 1000px;
		border-bottom: 1px solid black ;
		overflow: visible; /*so we can see the pointer on hover */
		}



/* --------------  B O X E S -------------------- */




/* ... BASICS ....*/

.Box {
	position: relative;
	display: block; /* in case the whole tile is a link */ 
	background-color: rgba(81, 80, 74, 0.1);
	padding-top: 5em; /* allows for image lable (1/2)*/
	padding-bottom: .5em;
	border-radius: 1em;
	min-height: 15em;
	padding-left: 1em;
	padding-right: 1em;
	margin-bottom: 2em;
	/*cursor: pointer;*/
	}
	
	a.Box:hover {
		background-color: #D1D1D1;
		}

	/* space above */
	@media (max-width: 640px) {
		.Box {
		margin-bottom: 2em;
		margin-top: 2em;
		}
		}



/* ... TOP LABLE ....*/

.Box::before { /*image lable */ 
	content: "";
	position:absolute;
	top: 0;
	left: 0;
	display: block;
	height: 4em; /* image lable height (2/2)*/
	width: 100%;
	border-radius: 1em 1em 0 0;
	background-color: rgba(81, 80, 74, 0.2);
	background-image: none; /* Ovverride this with ID */
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% auto;
	}

.Box .Lable,
.Box .Lable span {
	display: block;
	width:  100%;
	}



.Box .Lable {
	position: absolute;
	text-align: center;
	padding: .5em;
	color: #555;
	font-family: "Oceania_Bold";
	font-size: 1.25em;
	top: 0;
	left: 0;
	}

.Box .Lable span {
	font-family: Book;
	font-size: .6em;
	letter-spacing: 0;
	}



/* ... TYPO .... */

.Boxs.Center,
.Box.Center,
.Box .Note{
	text-align: center;
	}

.Box .Note {
	position: absolute;
	bottom: 0em;
	width: 100%;
	left: 0;
	padding: 1em;
	}





/* ... Multiple Col ...*/

.Boxed {
	background-color: rgba(81, 80, 74, 0.1);
	border-radius: 1em;
	padding-top: 3.5em;
	padding-bottom: 1em;
	background-size: cover;
	background-position: center;
	margin-left:  1em;
	margin-right:  1em;
	align-content: flex-start;
	}
	
	@media (min-width:480px) {
		.Boxed {
			margin-left:  2em;
			margin-right:  2em;
			}
			}
	
	@media (min-width:800px) {
		.Boxed {
			margin-left:  3em;
			margin-right:  3em;
			}
			}
	@media (min-width:1024px) {
		.Boxed {
			margin-left:  4em;
			margin-right:  4em;
			}
			}	
	@media (min-width:2400px) {
		.Boxed {
			margin-left:  auto;
			margin-right:  auto;
			}
			}	
			
			
			
				
.Boxed .Box {
	background-color: rgba(255, 255, 255, 0.85);
	color: white;
	}	

	.Boxed[style*=".jpg)"] > h3 {
		color: white;
		}

	.Boxed > div > h4 {
		color: black;
		font-size: 1.25em;
		margin-bottom: 1em;
		}



/* .......... Droppdown ........... */


label {
	position: absolute;
	cursor: pointer;
	height: 3em;	
	margin-top: -3em;
	left: 0;
	display: inline-block;
	width:100%;
	/*display: none;*/
	}


Input.Dropdown {
	display: none;
	}


.Expended {
	overflow: hidden;
	height: 2em;
	transition: height 0.5s;
	}

.Expended:hover,
Input.Dropdown:checked + .Expended {
  	height: 15em;
	}