@charset "UTF-8";
/*
Theme Name: WPSUVirtualFieldTrips
Theme URI: http://wordpress.org/themes/wpsuvirtualfieldtrips
Author: WPSU Multimedia Team
Author URI: virtualfieldtrips.wpsu.org
Description: The theme for VirtualFieldTrips.wpsu.org
Version: 1.0
License:
License URI: 
Tags: 
Text Domain: 
*/

/* Font: Londrina, weights 100, 300, 400, 900 */
/* Font: Open Sans, weights 300, 400, 600, 700, 800 */
/* Colors */
/* Deep Pink 	#f22272 */
/* Turquoise	#31e7cf */
/* Medium Bkue	#1893f1 */
/* Light Blue 	#21c4f5 */
/* Orange		#fdaf2a */
/* Lime Green	#a8ed36 */
/* Yellow		#fedf32 */

* { margin: 0; padding: 0 }

body { font-size: 25px; font-family: 'Londrina Solid'; font-weight: 100; background-color: #31e7cf; color: rgba(0,0,0,.8); }

h1, h2, h3, h4, h5, h6 { margin: 0 0 .25em 0; }
h2 { font-size: 160%; line-height: 110%; letter-spacing: 1px; }
h3 { font-size: 140%; }
p { font-weight: 300; margin: 0 0 .75em 0; }
ul, ol { font-weight: 300; margin: 0 0 .75em 1em; }
li { margin: 0 0 .25em 0; }
strong { font-weight: 400; }
a, a:visited { color: darkblue; }
a:hover { color: orangered; }

header { }
footer { font-family: sans-serif; font-size: 70%; text-align: center; padding: 0 0 1em 0; }
.vft-logo-group { float: left; width: 405px; }
.logo-vft { width: 244px; vertical-align: top; }
.logo-wpsu { width: 138px; height: auto; margin: 44px 18px 0 0; }
.trip-logo { float: right; text-align: right; }
.ccrra-logo { width: 150px; height: auto; }
.fort-logo { width: auto; height: 100px; margin: 6px 0; }
.intro { clear: both; background-color: rgba(255,255,255,.33); padding: .25em; margin: 0 0 1em; }
.map, .page-title { text-align: center; }

/*nav.close { position: fixed; top: 220px; left: 0; z-index: 999; width: 50px; }
nav.next { position: fixed; top: 300px; left: 0; z-index: 999; width: 50px; }
nav.prev { position: fixed; top: 360px; left: 0; z-index: 999; width: 50px; }*/

span.next, span.prev { opacity: 20%; }

nav { position: fixed; width: 50px; margin: 55px 0 0 -60px; }
nav a, nav span, nav a:visited { background-color: orangered; color: white; border-radius: 25px; width: 50px; height: 50px; font-size: 30px; line-height: 50px; margin: 0 0 5px 0; padding: 0; display: block; text-align: center; }
nav a:hover { background-color: #fdaf2a; color: #fff; }


.virtualtrip,
.group { clear: both; background-color: rgba(255,255,255,.33); padding: 1em 2.5% .25em 2.5%; margin: 0 0 1em; }
.intro img, 
.virtualtrip img { width: 100%; height: auto; }

#post-content { /*width: 90%; margin: 0 auto;*/ }
.intro-text { margin: 0 .5em .5em .5em; text-align: center; }

.clear { clear: both; height: 0; padding: 0; margin: 0; }
.break { margin-top: 2em; }

.kids-button { color: white !important; background-color: orangered; font-weight: 400; padding: .25em .5em; letter-spacing: .05em; text-decoration: none; margin: 0 .5em 0 0; display: inline-block;}
.kids-button:hover { color: white !important; background-color: #fdaf2a !important; }
.coming-soon { color: white !important; background-color: gray !important; display: inline-block; font-weight: 900; padding: .25em .5em; letter-spacing: .05em; }

.ccrra-map, .fort-map { width: 100%; height: 0; padding-bottom: 100%; background-size: contain; position: relative; z-index: 0; margin-bottom: 1em; }

.wpsu-map { width: 100%; height: 0; padding-bottom: 80%; background-size: contain; position: relative; z-index: 0; margin-bottom: 1em; }


.map-point { position: absolute; }
.map-point a {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50% 50% 50% 0;
  background-color: orangered;
  transform: rotate(-45deg);
  left: 50%;
  top: 50%;
  margin: -60px 0 0 -25px;
  color: #fff;
  text-align: center;
  text-decoration: none; 
}
.map-point a:hover { background-color: #f22272;  }
.map-point a strong { display: block; transform: rotate(45deg); width: 50px; height: 50px; line-height: 50px; font-size: 30px; }
.fa-map-marker { color: orangered; }

h2 em { color: #fff; background-color: #f22272; display: block; float: left; border-radius: 50%; font-size: 60%; padding: .25%; font-style: normal; width: 30px; height: 30px; text-align: center; line-height: 30px; margin: 5px 10px 0 0; }
h2 strong { color: #fff; background-color: #f22272; display: inline-block;  border-radius: 50%; font-size: 60%; padding: .25%; font-style: normal; width: 30px; height: 30px; text-align: center; line-height: 30px; margin: 0 10px 0 0; position: relative; top: -5px }

.google { position: absolute; bottom: .33em; right: .5em; color: white; font-family: "Arial", sans-serif; font-size: 14px }

/* points on overhead map CCRRA */
.icenter { margin-top: 52%; margin-left: 53%; z-index: 2; }
.tsfr { margin-top: 38%; margin-left: 61%; z-index: 3; }
.recycle { margin-top: 68%; margin-left: 65%; z-index: 4; }
.weighstn { margin-top: 28%; margin-left: 65%; z-index: 5; }
.cngstation { margin-top: 9%; margin-left: 5%; z-index: 6; }

.fort { margin-top: 77%; margin-left: 52%; z-index: 2; }
.officer { margin-top: 76%; margin-left: 64%; z-index: 3; }
.tinsmith { margin-top: 58%; margin-left: 59%; z-index: 4; }
.barracks { margin-top: 69%; margin-left: 74%; z-index: 5; }
.garden { margin-top: 40%; margin-left: 31%; z-index: 6; }
.loghouse { margin-top: 16%; margin-left: 12%; z-index: 7; }
.farmhouse { margin-top: 35%; margin-left: 44%; z-index: 8; }
.barn { margin-top: 79%; margin-left: 12%; z-index: 9; }
.cannon { margin-top: 70%; margin-left: 67%; z-index: 10; }

.frogpond { margin-top: 21%; margin-left: 48%; z-index: 2; }
.visitorcenter { margin-top: 33%; margin-left: 47%; z-index: 3; }
.aviary { margin-top: 52%; margin-left: 58%; z-index: 4; }
.trails { margin-top: 42%; margin-left: 83%; z-index: 5; }
.lake { margin-top: 77%; margin-left: 13%; z-index: 6; }
.creek { margin-top: 56%; margin-left: 80%; z-index: 7; }
.sugarshack { margin-top: 15%; margin-left: 24%; z-index:8; }
.graveyard { margin-top: 13%; margin-left: 90%; z-index: 9; }

.tvstudio { margin-top: 40%; margin-left: 63.5%; z-index: 2; }
.producing { margin-top: 52%; margin-left: 42%; z-index: 3; }
.videography { margin-top: 36%; margin-left: 29.5%; z-index: 4; }
.videoedit { margin-top: 57%; margin-left: 49%; z-index: 5; }
.audio { margin-top: 57%; margin-left: 72%; z-index: 6; }
.engineering { margin-top: 23.5%; margin-left: 75.5%; z-index: 7; }
.radio { margin-top: 22%; margin-left: 88%; z-index:8; }
.multimedia { margin-top: 67%; margin-left: 29%; z-index: 9; }

.history { margin-top: 50%; margin-left: 55%; z-index: 2; }
.habitat { margin-top: 47%; margin-left: 16%; z-index: 3; }
.adaptations { margin-top: 10%; margin-left: 86%; z-index: 4; }

.watershed-map { margin-top: 61%; margin-left: 65%; z-index: 2; }
.pollinator-garden { margin-top: 75%; margin-left: 63%; z-index: 3; }
.childrens-garden { margin-top: 68%; margin-left: 64%; z-index: 4; }
.hartley-wood { margin-top: 52%; margin-left: 20.5%; z-index: 5; }


/* Container */
header .container { margin: 0 auto; padding: 10px; width: auto; max-width: 1140px; }
section .container { margin: 0 auto; padding: 10px 70px; width: auto; max-width: 1000px; }
#error { text-align: center; }

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	/* Space For Controls... No Longer Needed padding-top: 25px;*/
	height: 0;
	margin: 0 0 .25em 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.wp-block-pb-accordion-item h4 { font-weight: 400; }
.c-accordion__title--button { color: red; }

@media only screen and ( max-width: 1023px) { 
	
	body { font-size: 20px; }
	
header .container { margin: 0 auto; padding: 10px; width: auto; max-width: inherit; }
section .container { margin: 0 auto; padding: 10px; width: auto; max-width: inherit; }
	
.virtualtrip { padding: .5em; }
.logo-wpsu { width: 34%; display: inline-block; max-width: 138px; }
.logo-vft { width: 59%; display: inline-block; max-width: 244px; }

.trip-logo { display: none; }
.vft-logo-group { float: none; width: 100%; margin: 0 auto; max-width: 405px; }
.kids-button { color: white !important; background-color: orangered; font-weight: 400; padding: .25em .5em; letter-spacing: .05em; text-decoration: none; margin: 0 .5em .5em 0; display: inline-block;}
	
.map-point a { width: 30px; height: 30px;  margin: -30px 0 0 -15px;}
.map-point a strong { width: 30px; height: 30px; line-height: 30px; font-size: 20px; }
	
nav { position: fixed; width: 100%; height: 70px; margin: 0; left: 0; bottom: 0; background-color: #31e7cf; }
nav a.close { position: fixed; top: 100%; left: 70px; z-index: 999; width: 50px; margin-top: -60px; }
nav a.next, nav span.next { position: fixed; top: 100%; right: 10px; width: 50px;  margin-top: -60px; }
nav a.prev, nav span.prev { position: fixed; top: 100%; right: 70px; width: 50px; margin-top: -60px; }
nav a.home { position: fixed; top: 100%; left: 10px; z-index: 999; width: 50px; margin-top: -60px; }
footer { margin-bottom: 70px; }
}