@charset "UTF-8";
/* CSS Document */

/* COLORS

red: B4000A

*/

* {
	margin:0;
	padding:0;
	box-sizing: border-box;
}
body {
	margin:0;
	padding:0;
	font-family: "anona", sans-serif;
	font-weight: 400;
	font-style: normal;
	color:#3A3A3C;
	font-size:12px;
	}

/* STRUCTURE */

#header {
	width:100%;
	/*height:160px;*/
	height:250px;
	background:url(june2014/images/header-bg.gif) repeat-x;
}

#branding {
	margin-left:auto;
	margin-right:auto;
	/*padding-top: 80px;*/
	padding-top:10px;
	/*width:430px;*/
	width:275px;
	height:120px;
}

/*#navigation {
	width:100px;
	position:fixed;
	top:170px;
	left:0;
	background-color:#FACA39;
	-webkit-border-top-right-radius: 15px;
	-webkit-border-bottom-right-radius: 15px;
	-moz-border-radius-topright: 15px;
	-moz-border-radius-bottomright: 15px;
	border-top-right-radius: 15px;
	border-bottom-right-radius: 15px;
	-webkit-box-shadow: 4px 4px 7px -1px rgba(0,0,0,0.54);
	-moz-box-shadow: 4px 4px 7px -1px rgba(0,0,0,0.54);
	box-shadow: 4px 4px 7px -1px rgba(0,0,0,0.54);
}*/
#social {
	margin:15px 13px;
	width:80px;
}
#content {
	width:1030px;
	min-height:500px;
	margin-right:auto;
	margin-left:auto;
}
#wrapper {
	with:900px;
	overflow-y: hidden;
	overflow-x: auto;
	white-space: nowrap;
	-webkit-overflow-scrolling: touch;
}
#horizontal-scroll-container {
	width:6000px;
	height: 400px;
	display: inline-block;
}
#columncontainer {
	width:100%;
	float:left;
	display:block;
	clear:both;
	margin-top:20px;
}
.column {
	width:30%;
	padding:30px 10px;
	float:left;
	display:block;
}
.boxed {
    border: 1px solid #444;
    display: block;
    float:left;
    margin-bottom: 20px;
    padding:30px 10px;
    text-align: center;
    width:95%;
}
.stack {
	clear:left;
}
.doublecolumn {
	width:60%;
	padding:30px 10px;
	float:left;
	display:block;
}
#featured-front img {
	height:250px;
	float:left;
	margin-bottom: 20px;
}
#border-break {
	width:100%;
	clear:both;
	background-image: url("images/raindrops-border.png");
	height: 21px;
}
#footer {
	float:left;
	clear:both;
	width:100%;
	background:url(june2014/images/footer-bg.gif);
	text-align:center;
	height:170px;
}
#footerbanner {
	width:800px;
	height:75px;
	margin-left:auto;
	margin-right:auto;
	margin-top:10px;
	/*background:url(june2014/images/red-banner.png) no-repeat;*/
	padding-top:20px;
}

/* TYPE */


a {
	color:#FACA38;
	text-decoration:none;
}

p {
	padding-bottom:10px;
	text-align:justify;
}

h1 {
	font-family: "study", serif;
	font-weight: 400;
	font-style: normal;
	text-transform:uppercase;
	font-size:50px;
	padding-top:20px;
	clear:both;
}

h2 {
	text-transform:uppercase;
	font-size:16px;
	font-weight:lighter;
	padding-bottom:20px;
}

h3 {
	text-transform:uppercase;
	font-size:12px;
	margin-bottom:15px;
}

h4 {
	padding-bottom:10px;
}
#navigation {
	margin-top:60px;
	font-size:20px;
	text-align: center;
}
#navigation a {
	color: #F00022;
}
#footer p {
	font-size: 10px;
}

/*#navigation {
	font-family: 'Coming Soon', cursive;
	text-transform:uppercase;
	font-size:14px;
	line-height:15px;
}

#navigation ul {
	list-style:none;
	padding-left:0;
}

#navigation ul li a {
	padding:16px 8px 13px 13px;
	display:block;
	border-bottom:1px solid #D6AD31;
	color:#222;
	font-weight:normal;
}
#navigation ul li a:hover {
	background-color:#FDEBB5;
}*/
.top a:hover {
	-webkit-border-top-right-radius: 15px;
	-moz-border-radius-topright: 15px;
	border-top-right-radius: 15px;
}
.column ul {
	list-style:none;
	margin:0;
}

/* FLIP CARD */

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
  width: 450px;
  aspect-ratio: 5 / 4;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
  float:left;
  margin-right:10px;
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 1.0s;
  transform-style: preserve-3d;
  white-space: normal;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: #CACACA;
  color: #fff;
}
.flip-card-front img {
	width:100%;
	height:100%;
}

/* Style the back side */
.flip-card-back {
  background-color: #5F6600;
  color: #FFF;
  transform: rotateY(180deg);
  padding: 5%;
  width:100%;
}

/* IMAGES */

img a {
	border:none;
}
.column img {
	max-width:100%;
}
.doublecolumn img {
	max-width:100%;
}
.thumbnail {
	display:block;
	float:left;
	margin:2px;
	height:150px;
	width:150px;
	overflow:hidden;
}

/* FORMS */

/* mailing list sign up form */

#mc_embed_signup {
	background:none; 
	/*clear:left;*/
	position:inherit;
}
#mc_embed_signup #mc-embedded-subscribe-form {
	padding-left:0px;
	margin-left:0px;
	width:300px;
}
#mc_embed_signup input.button {
	font:inherit;
	background-color:#333;
}



@media only screen and (max-device-width: 480px), only screen and (min-device-width: 560px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 2) {
	body {
	    -webkit-text-size-adjust: 100%;
		font-size:30px;
	}
	#content {
	width:900px;
	}
    #navigation {
		width:auto;
		position:relative;
		top:auto;
		left:auto;
		margin-left:auto;
		margin-right:auto;
		background-color:#fff;
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		border-radius: 0;
		-webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.);
		-moz-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
		box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
		font-size:45px;
		margin-top:50px;
	}
	#navigation ul li a {
		float:left;
		padding:35px;
		margin:10px;
		background-color:#FACA39;
		-webkit-border-radius: 15px;
		-moz-border-radius: 15px;
		border-radius: 15px;
		-webkit-box-shadow: 4px 4px 7px -1px rgba(0,0,0,0.54);
		-moz-box-shadow: 4px 4px 7px -1px rgba(0,0,0,0.54);
		box-shadow: 4px 4px 7px -1px rgba(0,0,0,0.54);
	}
	#social {
		display:none;
	}
	#wrapper {
	width:100%;
	overflow-y: auto;
	white-space: normal;
	-webkit-overflow-scrolling: touch;
	}
	#horizontal-scroll-container {
	width:100%;
	display: block;
	}
	/*.flip-card {
	aspect-ratio: 5 / 4;
	width: 100%;
	}*/
	.flip-card {
	  width: 90vw;
	  height: calc(90vw * 4/5);
	  background-color: white;
	  margin-bottom:10px;
		z-index: 0;
		display: inline;
	}
	.flip-card-front::after {
		content: url("2023-design/tap.png");
		position: absolute;
		bottom:5px;
		right: 5px;
		z-index: 99;
	}
	.column {
		width:90%;
		padding:30px 10px;
		float:left;
		display:block;
	}
	p {
		line-height: 35px;
	}
	/*h1 {
	font-size:45px;
	}*/
	
	h2 {
		font-size:30px;
	}
	h3 {
	font-size:32px;
	}
	#mc_embed_signup #mc-embedded-subscribe-form {
	width:80%;
	}
}