/**
 * Common Styles Mobile
 * 
 * Created for Arletta van den Bosch. (c) Arletta van den Bosch 2015, all rights reserved.
 * 
 * Created 12-12-15
 * Revised 04-02-16
 */

h1 {
	font-size: 2em;
}

h2 {
	font-size: 1.2em;
}

/* hover */

.top-tab-hide {
    display: block;
}

.foot-btn:hover #tel-icon,
.foot-btn #tel-icon {
	background-position: 0 -32px;
}

.foot-btn:hover #map-icon,
.foot-btn #map-icon {
	background-position: -32px -32px;
}

.foot-btn:hover #eml-icon,
.foot-btn #eml-icon {
	background-position: -64px -32px;
}

.foot-btn:hover .callout {
	display: none;
}

.foot-center.center {
	width: 92%;
	max-width: none;
}

.bubbles {
	display: none;
}

#copy #ele-family-large {
	display: none;
}

html {
	font-size: 1.4em;
}

/*
p,
section ul,
address {
	font-size: 1em;
}
*/
section, aside {
    font-size: 1em;
}

span.cubano.big {
	font-size: 1.2em;
	/* within p or address */
}

.center,
.center .contain {
	max-width: 23em;
}

.box {
	clear: left;
	width: 96%;
	padding: 96% 0 0 0;
}

header.circle,
.extended header.circle,
.rightSided header.circle, .extended .rightSided header.circle {
	float: left;
	position: relative;
	margin: -50% 0 10% -17.5%;
	width: 135%;
	padding: 125% 0 0 0;
	/*
	 * 50% width + 8% (4% each side) made relative 68%
	 * 50% height + 4% (2%) also relative parent ele
	 * mar: -(2%+pad) 0 0 -(-5%(75%) + (.5 * width) + padding);
	 * mar: top, right, bot, left
	 * pad: (height) 0 0 0;
	 */
	text-align: center;
	box-shadow: 0 0 1.5em rgba(0, 0, 0, 0.2);
}

.center.fill aside {
	width: 18%;
	float: left;
	height: 20px;
	display: none;
}

.center.fill section {
	width: 80%;
	float: left;
	margin: 40% 0 8% 0;
	/* 80% total width */
	border-radius: 2em;
}

.extended .center.fill section, .center.fill section {
	padding: 8% 10%;
}

#sticky {
	text-align: center;
	padding-right: 0;
	background-color: white;
}

#copy {
	padding-bottom: 62px;
}

.i {
	display: none;
}

.sticky ul,
.sticky li,
.sticky a {
	height: 50px;
}

.sticky h3 {
	line-height: 50px;
}

table {
	width: 100%;
}

.spacer aside.box {
	width: 92%;
	margin: 8% 4%;
	padding: 2% 0;
	text-align: center;
}

.spacer aside.box.dot-head {
	width: 100%;
}

.dot-loop,
.dot-bend {
	display: none;
}

#mob h2,
#mob .bubbles {
	display: none;
}

#stuck #mob.center {
    width: 100%;
    height: 100%;
    margin:0;
    max-width: none;
}

#menu a {
	padding: 0;
	float: none;
	border-radius: 0;
	margin: 0;
	line-height: 20px;
	background-color: transparent;
}

#burger {
	display: inline-block;
}

#short {
    display: none;
}
#title {
    padding-top: 65%;
}

#learnMore aside {
    position: absolute;
    bottom: 10%;
}

/* tabs */

#wrap {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	overflow: auto;
}

#mob {
    position: fixed;
	z-index: 1;
	height: 100%;
	top: -100%;
	left: 0;
	right: 0;
	border-bottom: 5px solid #f0f0d5;
}

#tabs,
#mob h2,
#mob .bubbles nav {
	display: none;
}

#menu {
	position: absolute;
	width: 98%;
	bottom: -41px;
	padding: 0 1%;
}

#menu,
#menu li {
	float: left;
}

#tabs {
	float: left;
}

#mob.toggled {
	top: 0;
	overflow: auto;
	
	-webkit-animation-duration: 0.75s;
	-moz-animation-duration: 0.75s;
	animation-duration: 0.75s;
	
	-webkit-animation-fill-mode: both;
	-moz-animation-fill-mode: both;
	animation-fill-mode: both;
	
	-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	
	-webkit-animation-name: bounceInDown;
	-moz-animation-name: bounceInDown;
	animation-name: bounceInDown;
}

#mob.toggled h2,
#mob.toggled .bubbles nav {
	display: inline-block;
}

#mob.toggled #menu {
	top: 0;
	right: 0;
	left: 0;
	bottom: auto;
	position: fixed;
}

#mob.toggled #menu li {
	position: fixed;
	top: 0;
}

#mob.toggled #menu .top-tab {
	display: none;
}

#mob.toggled #tabs {
	display: block;
}

/* do not display menu contents unless toggled */
#mob > h2,
#mob > div {
	display: none;
}

#mob.toggled #burger {
	background-position: -105px -65px;
}
#mob.toggled #burger .bun {
	display: none;
}

#menu li {
	border-radius: 10px;
	padding: 8px 12px 6px 12px;
	height: 24px;
	margin: 0 2px;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	border: solid #f0f0d5;
	border-top: none;
}

#mob .bubbles {
	font-size: 0.9em;
	display: block;
	position: relative;
	padding-top: 80%;
	width: 80%;
	margin: 2% 10%;
}

#mob h2 {
	margin: 5% 0 2% 0;
	float: left;
	width: 100%;
}

#burger {
	background-position: -76px -65px;
	width: 25px;
	height: 22px;
}

#menu .top-tab {
	height: auto;
	font-size: 16px;
}

#tabs a {
	padding: 6px 12px;
	float: left;
	border-radius: 10px;
	margin: 2px;
	line-height: 20px;
}

#tabs {
	width: 98%;
	padding: 8px 1%;
	margin: 0;
}

#dot-head {
	margin-bottom: -35%;
	margin-left: -.15em;
}

@-webkit-keyframes bounceInDown {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -3000px, 0);
		transform: translate3d(0, -3000px, 0);
	}
	60% {
		opacity: 1;
		-webkit-transform: translate3d(0, 25px, 0);
		transform: translate3d(0, 25px, 0);
	}
	75% {
		-webkit-transform: translate3d(0, -10px, 0);
		transform: translate3d(0, -10px, 0);
	}
	90% {
		-webkit-transform: translate3d(0, 5px, 0);
		transform: translate3d(0, 5px, 0);
	}
	to {
		-webkit-transform: none;
		transform: none;
	}
}

@keyframes bounceInDown {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -3000px, 0);
		transform: translate3d(0, -3000px, 0);
	}
	60% {
		opacity: 1;
		-webkit-transform: translate3d(0, 25px, 0);
		transform: translate3d(0, 25px, 0);
	}
	75% {
		-webkit-transform: translate3d(0, -10px, 0);
		transform: translate3d(0, -10px, 0);
	}
	90% {
		-webkit-transform: translate3d(0, 5px, 0);
		transform: translate3d(0, 5px, 0);
	}
	to {
		-webkit-transform: none;
		transform: none;
	}
}


/*
 * Transitional Styles
 * 
 * Resize font relative to base size.
 * Apply mobile styling bellow threshold size.
 */


/* small format */

#mob nav {
	font-size: 1.25em;
}

@media (max-width: 34em) {
	html {
		font-size: 1.2em;
	}
	#mob nav {
		font-size: 1em;
	}
}

@media (max-width: 42em) {
	#mob nav {
		font-size: 1.05em;
	}
}

body {
	min-width: 0;
}