/* ------------------- */
/* TEMPLATE        -- */
/* ----------------- */

@import url(https://fonts.googleapis.com/css?family=Lato:400,700,900,300);

body { 
	height: 100%;
	background-color: #ffffff; 
	color: black; 
	font-size: 16px; 
	font-family: 'Arial';
} 
h1 { font-size: 32px; }
h2 { font-size: 26px; }
h3 { font-size: 18px; }
p { margin: 0 0 15px; line-height: 24px; color: black; font-style: normal; }
a { color: white; text-decoration: none; }
/*a:hover { color: tomato; }*/

.container-p { 
	max-width: 1020px; 
	height: 100%;
	margin: 0 auto; 
	padding: 10px;
}

/* ------------------- */
/* PEN STYLES      -- */
/* ----------------- */

/* MAKE IT CUTE ----- */
.tabs {
	position: relative;
	display: flex;
	min-height: 3200px;
	border-radius: 0px 0px 0 0;
	overflow: hidden;
}

.tabby-tab {
	flex: 1;
}

.tabby-tab label {
	display: block;
	box-sizing: border-box;
	/* tab content must clear this */
		height: 40px;
	
	padding: 10px;
	text-align: center;
	background: #7f7979;
	cursor: pointer;
	transition: background 0.5s ease;
	
}

.tabby-tab label:hover {
	background: #cbc8c8;
}

.tabby-content {
	position: absolute;
	
	left: 0; bottom: 0; right: 0;
	/* clear the tab labels */
		top: 40px; 
	
	padding: 20px;
	border-radius: 0 0 8px 8px;
	background: #e1dede;
	
	transition: 
		opacity 0.8s ease,
		transform 0.8s ease		;
	
	/* show/hide */
		opacity: 0;
		transform: scale(0.1);
		transform-origin: top left;
	
}

.tabby-content img {
	float: left;
	margin-right: 20px;
	border-radius: 8px;
}


/* MAKE IT WORK ----- */

.tabby-tab [type=radio] { display: none; }
[type=radio]:checked ~ label {
	background: #8a75a8;
	z-index: 2;
}

[type=radio]:checked ~ label ~ .tabby-content {
	z-index: 1;
	
	/* show/hide */
		opacity: 1;
		transform: scale(1);
}

/* BREAKPOINTS ----- */
@media screen and (max-width: 767px) {
	.tabs { min-height: 400px;}
}

@media screen and (max-width: 480px) {
	.tabs { min-height: 580px; }
	.tabby-tab label { 
		height: 60px;
	}
	.tabby-content { top: 60px; }
	.tabby-content img {
		float: none;
		margin-right: 0;
		margin-bottom: 20px;
	}

}