/************ TEMPLATE  ************
Video placeholder size: 1600x900  (wide, 16:9)
Rotator Size: 1000x418 (superwide, 2.39:1)

/************ FONTS  ************
Serif heading: Lora
Sans Serif heading: Roboto Condensed
Sans Serif body font: Lato

/************ COLORS  ************
Navy: #090d33; rgba(9,13,51,1)
Blue: #6c83b1; rbga(108,131,177,1)
*/

body { font-family: 'Lato', sans-serif;}

h1 { font-size: 2.5rem; font-family: 'Lora', serif; }
h2, .page-header h2, h3.g-title {color: #090d33; font-size: 2.5rem; font-family: 'Roboto Condensed', san-serif; font-weight: 700;}
h3 {color: #090d33; font-size: 1.75rem; font-family: 'Roboto Condensed', san-serif; font-weight: 700; }
h4, h2.sprocket-features-title { font-family: 'Lora', serif; color: #090d33; font-size: 1.8rem; font-weight: 400; }
h5 { color: #6c83b1; font-size: 2rem; font-family: 'Lora', serif; font-variant: small-caps;  }
h6 {color: #6c83b1; font-size: 1.75rem; font-family: 'Roboto Condensed', san-serif }
a { color: #6c83b1;  }
a:hover { color: black; }

@media only screen and (min-width: 768px) and (max-width: 1199px) {
	h1 { font-size: 2rem; }  
	h2, .page-header h2, h3.g-title { font-size: 1.75rem; }
	h3 { font-size: 1.5rem; }
	h4, h2.sprocket-features-title { font-size: 1.4rem; }
	h5 { font-size: 1.5rem; }
	h6 { font-size: 1.4rem; }
	p { font-size: .9rem; margin-bottom: 4px;}
	h1, h2, h3, h4, h5, h6, p{ line-height: 1.1; }
}

.readon, .button, .btn, p.readmore .btn, .sprocket-lists-portrait-container > li .sprocket-lists-portrait-item > a span {
	background: #6c83b1;
	font-family: 'Lato', sans-serif; 
	text-transform: none; 
}
.button.bluebutton { background: #090d33; }

/************ HEADER  ************/
#g-top .platform-content {padding: 0; margin: 0;}
.g-main-nav .g-toplevel > li > .g-menu-item-container > .g-menu-item-content { text-transform: uppercase; }
.g-main-nav .g-sublevel > li:hover, .g-main-nav .g-sublevel > li.active { background: rgba(255, 255, 255,.3); }
.g-main-nav .g-dropdown {  background: #090d33; border-left: 2px white solid; border-right: 2px white solid; border-bottom: 2px white solid;}
.g-main-nav .g-dropdown { box-shadow: 4px 4px 8px rgba(0,0,0,.5);}
.customlogo2-block img { height:  15vw;}

@media only screen and (max-width: 767px) { 
	.customlogo2-block img { height: auto; width: 100vw; }
	.g-coin img { max-width: 150px; margin-top: -250px;}	}


.search form {margin: 12px 0 5px 0;}

/************ LOGO ************/
.homelayout #g-slideshow .logo-block { margin: 0; padding: 0; position: absolute; z-index: 3; padding-top: 0; } 
.homelayout #g-slideshow .logo-block .g-content.g-particle { display: flex !important; align-items: flex-start; justify-content: center; margin: 0; padding: 0; height: 30vh; } /* height equal to hero height */
.homelayout #g-slideshow .g-logo img, .homelayout #g-slideshow .g-logo { width: 100vw; }

.homelayout video.background-video {    
	width: 100%;
    height: 56vw;
    margin-top: 16vw;
	margin-bottom: 0vw;
}

#g-slideshow { margin: 0; padding: 0; } 
#g-slideshow .logo-block { position: absolute; z-index: 3; }
#g-slideshow .logo-block .g-content.g-particle { display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; height: 30vh; } 
#g-slideshow .g-logo img { width: 40%; }
#g-slideshow p { padding: 0;margin: 0;}

@media only screen and (max-width: 767px) { .homelayout #g-top .g-container .g-grid { padding-top: 30px;} }

/************ QUICKLINKS  ************/
.sprocket-strips-item {
    display: flex;
    align-items: flex-end;
    justify-content: center;
	box-shadow: none; 
	background-size: contain;
	background-position: 50% 50%; 
	background-repeat: no-repeat; 
	position: relative;
} 
.sprocket-strips-container li { transition: all .5s ease-in-out; }
.sprocket-strips-container li:hover { transform: scale(1.1); }
.sprocket-strips-item a { position: absolute; top: 0; bottom: 0; right: 0; left: 0; display: flex; background: none; align-items: flex-end; justify-content: center;}
.sprocket-strips-item a:hover { background: none; }
.sprocket-strips-item a.readon span { 
	color: white;
    font-size: 1rem;
    text-transform: none;
    font-weight: normal;
	margin-bottom: 1.2vw;
    padding: .3vw 1vw;
    border-radius: 5px;
}
.sprocket-strips-container li:nth-child(1) a.readon span { background: #7d7976; }
.sprocket-strips-container li:nth-child(2) a.readon span { background: #194979; }
.sprocket-strips-container li:nth-child(3) a.readon span { background: #c9a83e; }
.sprocket-strips-container li:nth-child(4) a.readon span { background: #973535; }
.sprocket-strips-container li:nth-child(5) a.readon span { background: #86704a; }
.sprocket-strips-container li:nth-child(6) a.readon span { background: #cb9169; }
.sprocket-strips-container li:nth-child(7) a.readon span { background: #363b4f; }
.sprocket-strips-container li:nth-child(8) a.readon span { background: #456f90; }
.sprocket-strips-container li:nth-child(9) a.readon span { background: #258152; }
.sprocket-strips-container li:nth-child(10) a.readon span { background: #395177; }
.sprocket-strips-container li:hover a.readon span { opacity: .9; }

#g-utility .g-content { padding: 30px 0 0 0; margin: 0;}
.sprocket-strips-container > li { margin: 0 .5vw; }
.sprocket-strips-container {
	display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

@media only screen and (max-width: 767px) {
	.sprocket-strips-content a span { display: none; }
	.sprocket-strips .cols-1 > li, .sprocket-strips .cols-2 > li, .sprocket-strips .cols-3 > li, .sprocket-strips .cols-4 > li, .sprocket-strips .cols-5 > li, .sprocket-strips .cols-6 > li, .sprocket-strips .cols-7 > li, .sprocket-strips .cols-8 > li, .sprocket-strips .cols-9 > li, .sprocket-strips .cols-10 > li, .sprocket-strips .cols-11 > li, .sprocket-strips .cols-12 > li { width: auto;}
	.widthvw16 .sprocket-strips-item { width:  25vw;}
	.heightvw16 .sprocket-strips-item { height: 25vw;}
	.sprocket-strips-container { justify-content: center; }
}


/************ MODULES  ************/
.moduletable .nav.menu, .moduletable .unstyled { background: #6c83b1; }
.moduletable .nav.menu li.current.active a, .moduletable .nav.menu li a:hover { background: #090d33; }

/************ ROTATOR NEWS  ************/
.bigarrows .layout-showcase .sprocket-features-arrows .prev { left: -35px;}
.bigarrows .layout-showcase .sprocket-features-arrows .next { right: -35px;}
h2.sprocket-features-title a { color: white; }
.sprocket-features-desc { color: white; }
.sprocket-features-container { background: #6c83b1;}
.sprocket-features-container .readon { border: 1px white solid; background: none; }
.sprocket-features-container .readon:hover { background: #333; }
.imgright .sprocket-features-container .sprocket-features-img-container { background: white; padding-left: 2vw;}
.superwidetwothirds .sprocket-features-content { padding: 10px 20px;}
h2.sprocket-features-title { line-height: 1.2;}
.superwidetwothirds .sprocket-features-content { align-items: flex-start; }

@media only screen and (max-width: 767px) {
	.imgright .sprocket-features-container .sprocket-features-img-container { padding-left: 0px;}
}

/************ SECTIONS  ************/
#g-footer a { color: white; }

img.stainedglasspic { width: 6vw; padding-right: 1vw;} 

#g-expanded .platform-content { padding: 0; margin: 0;}
#g-footer .g-content { padding: 0;}
#g-extension { padding: 0 2%;}
#g-footer { padding: 2%;}
#g-copyright { margin: -25px 0 0 0; padding: 0; height: 40px; }

@media only screen and (max-width: 767px) {
	#g-feature .g-content { padding-bottom: 0px; margin-bottom: 0px; padding-top: 0px; margin-top: 0px;}
	img.stainedglasspic { width: 14vw;}
}

/************ NEWS  ************/
.zoompics h4.sprocket-lists-portrait-title { color: #090d33; font-size: 1.8rem !important; }
.sprocket-lists-portrait-pagination li { background: #6c83b1;  }
.sprocket-lists-portrait-arrows .arrow { background: #6c83b1;}
.sprocket-lists-portrait-container li { border-bottom: 3px #6c83b173  solid;}
.sprocket-lists-portrait-container li:first-child { border-top: 3px #6c83b173  solid; margin-top: 10px;}

@media only screen and (min-width: 768px) and (max-width: 1199px) { .zoompics h4.sprocket-lists-portrait-title {  font-size: 1.3rem !important; } }

/************ MOBILE  ************/
.g-offcanvas-toggle { color: white; }

/**TABLE***/
.boxshadow > div { margin: 10px 15px;}
.midsizebadge img { height: 7vw;} 
.smallpics img {width: 5vw;}
.mediumpics img { width: 7vw;}

@media only screen and (max-width: 767px) {
	.midsizebadge img { height: auto; width: 60vw;}
	.wrapitems .midsizebadge img { margin: 10px auto; display: block; }
	.smallpics img {width: 8vw;}
	.mediumpics img { width: 10vw;}
}

/**** Create a nice looking table with alternating rows *****/
.alternaterows  {width: 100%;}
.responsivetb  {width: 100%;}
.alternaterows tr:nth-child(even) {background: #fff; border-bottom: 1px solid #ddd;}
.alternaterows tr:nth-child(even):hover {background: #fafafa; border-bottom: 1px solid #ddd;}
.alternaterows tr:nth-child(odd) {background: #fafafa; border-bottom: 1px solid #ddd;}
.alternaterows tr:nth-child(odd):hover {background: #fff; border-bottom: 1px solid #ddd;}
	
 @media only screen and (max-width: 767px){ 
   .alternaterows, .alternaterows div, .alternaterows tr, .alternaterows td, .alternaterows tbody { display: block; table-layout:auto; width: 100%; border: none; margin: 0;}
   .responsivetb, .responsivetb div, .responsivetb tr, .responsivetb td, .responsivetb tbody { display: block; table-layout:auto; width: 100%; border: none; margin: 0;}
   .alternaterows img { display: block; margin: 0 auto; width: 100%;}  
   .alternaterows { display:block; }
   .responsivetb { display:block; }
 }	
 
 .sprocket-strips-item a.readon span { font-size: 0;  }
 
 .sprocket-strips-content > a > span:before { content: "Learn More"; font-size: .9rem; line-height: 1.4rem;  }
 
 p.csscode {background-color: #d5d5d5;
	border: 1px solid rgba(0, 0, 0, 0.1);
	padding: 0.938rem; margin: 0 0 1.5rem;
	border-radius: 0.1875rem;
	font-family: "Menlo", "Monaco", monospace;
	clear: both;
}
