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

/************ 

TEMPLATE NOTES

Purple #512888
15% Purple #E5DFED
Blue-hover #3071A9
Dark Gray #A7A7A7
Light Gray #D1D1D1

************/

body {color: #333; line-height: 1.3rem; }

h1, h2, h3, h4, h5, h6 { margin: .75rem 0; line-height: 1.3; font-weight: normal;}
p { line-height: 1.3; font-size: 1.15rem;}

h1 {color: #A7A7A7; font-size: 2.5rem;}
h2, .page-header h2 { color: #512888; font-size: 2rem; border-bottom: 1px solid #333;  line-height: 1.3; margin: 0; padding: 0;}
h3 {color: #A7A7A7; font-size: 2rem;}
h4 {background: #D1D1D1; font-size: 1.75rem; color: #512888; border-radius: .2rem; padding: .1rem .4rem;}
h5 {color: #A7A7A7; font-size: 1.5rem; text-transform: uppercase;}
h6 {color: #512888; font-size: 1.6rem; font-style: italic;}
a { color: #512888; }
a:hover { color: #4d4d4d; }

p.buttonheading { margin: 0; padding: 0; }


@media only screen and (max-width: 767px) {
	h1 { font-size: 2rem; }  
	h2 { font-size: 1.4rem; }
	h3 { font-size: 1.4rem; }
	h4 { font-size: 1.4rem; }
	h5 { font-size: 1.2rem; }
	h6 { font-size: 1.2rem; }
	p { font-size: 1rem; margin-bottom: 4px;}
	h1, h2, h3, h4 { line-height: 1.5; }
	h5, h6, p{ line-height: 1.2; }
}

blockquote {
	color: #333;     
	padding: 0 0 0 15px;
	margin: 0 0 20px;
	border-left: 5px solid #d5d5d5;
	font: italic 16px/22px Georgia, Serif;
	line-height: 1.2;
	font-size: 1.3rem;
}

address {
	font-style: italic;
	font-weight: bold;
	font-size: 1.2rem;
	line-height: 1.2;
}

/************ BUTTONS  ************/
.readon, .button, .btn, p.readmore .btn, .sprocket-strips-c-readon { 
  color: #512888; 
  font-size: 1rem;
  text-transform: none;
  font-weight: normal;
  background: white; 
  padding: 1.5rem 1.3rem; 
  border-radius: .5rem; 
  margin: 0;
  display: inline-block;
  font-weight: 500;
  line-height: 1.125rem;
  border: 1px #512888 solid;
  transition: all .2s ease-in;
}
#g-bottom a.button { background: #A7A7A7;  }
.readon:hover, .button:hover, .btn:hover,  p.readmore .btn:hover, .sprocket-strips-c-readon:hover {background: #512888; color: white;}

a.button  { color: #512888 !important; }

.btn .icon-chevron-right { display: none;}

.donatebtn a {padding: .5rem 1.3rem; border: none; border-radius: 0;}

/************ TABLES  ************/
.fancytable th {color: #512888; background: #D1D1D1; border: 1px solid #D1D1D1;}
.fancytable td { border: 1px solid #D1D1D1;}

/************ ALERT ************/
.alert .g-content {padding: 0; margin: 0;}
.alert {border: none; padding: 0; margin: 0; background-color: #FFCFCF; color: #FF0000;}
.alert h1, .alert h2, .alert h3, .alert h4, .alert h5, .alert h6, .alert p { margin-left: 20px; color: red; background: transparent;}
.alert p {margin: 0.5rem 20px;}

/************ BASIC MENU FIXES  ************/
.g-main-nav ul.g-toplevel { display: flex; flex-wrap: nowrap; justify-content: space-around; }
.g-main-nav .g-standard .g-fade.g-dropdown { z-index: 10;}
.g-main-nav .g-dropdown { border-radius: 0 0 6px 6px;}
.g-main-nav .g-standard > .g-dropdown.g-dropdown-right, .g-main-nav .g-fullwidth > .g-dropdown.g-dropdown-right { left: 0; }

@media only screen and (max-width: 767px) { 
	.g-logo img { width: 40%;} 
	.g-offcanvas-toggle { top: 20px; left: 20px;}
}

/************ MENU  ************/
#g-navigation {  background: none;  position: absolute;  padding-left: 1%; padding-right: 1%; width: 100%; }
.g-main-nav .g-toplevel > li.g-parent .g-menu-parent-indicator::after {display: none; }
.g-main-nav .g-toplevel > li > .g-menu-item-container > .g-menu-item-content { text-shadow: 2px 2px 2px rgba(0,0,0,0.65); margin: 0 10px; }
.g-main-nav .g-toplevel > li > .g-menu-item-container, .g-main-nav .g-sublevel > li > .g-menu-item-container { font-size: 1.05rem; font-weight: normal; }
#g-navigation .g-main-nav .g-toplevel > li:hover > .g-menu-item-container, #g-navigation .g-main-nav .g-toplevel > li.active > .g-menu-item-container {
	color: white; font-weight: bold ;}
	.g-main-nav .g-sublevel > li > .g-menu-item-container > .g-menu-item-content > .g-menu-item-title:hover { color: #512888; }

#g-navigation .g-main-nav .g-toplevel > li:hover > .g-menu-item-container, #g-navigation .g-main-nav .g-toplevel > li.active > .g-menu-item-container { font-weight: normal;}
#g-naviation .g-social a {color: white; margin: 1.2rem 0 0 0;}
#g-navigation .g-block > .g-content {margin-top: 1.2rem;}

/************ MENU CHANGES  ************/
#g-navigation > .g-container > .g-grid > .g-block:last-child { /*display: flex;*/ align-items: center;}
#g-navigation a { color: white; } 
#g-navigation a:hover { color: #512888;  }


/************ LANDING PAGE  ************/

.outline-20 .g-logo img {margin-top: 2%; width:  90%; }

.outline-20 #g-page-surround { 
	background: url(/images/stories/template/hero-landing.jpg) 50% 50% no-repeat;
	background-size: cover;
	height: 100vh;
}

.outline-20 #g-container-main { background: none; }
.outline-20 #g-showcase { margin-top: 12vw; }


.landingbutton {
	color: #512888; 
	font-size: 2rem;
	text-transform: none;
	font-weight: normal;
	padding: 1rem 1.5rem; 
	margin: 0;
	display: inline-block;
	line-height: 2rem;
	border: 1px #512888 solid;
	transition: all .2s ease-in;
	width: 100%;
	text-align: center;
}

.landingbutton:hover { background-color: #512888; color: white; }

@media only screen and (max-width: 767px) { 
.outline-20 .g-logo img {margin-top: 5%; width: 90%; }
.landingbutton {width: 85%; margin: 0.25rem; }
.outline-20 #g-showcase { margin-top: 35%; }
.outline-20 #g-showcase .g-content .g-particle { padding: 0.25rem; }
.outline-20 #g-footer { background: none; }
.outline-20 #g-page-surround {overflow: auto;}
}



/************ MODULES  ************/

.sprocket-strips-c-block:nth-child(odd) .sprocket-strips-c-item, .sprocket-strips-c-block:nth-child(even) .sprocket-strips-c-item { background: none; }
.sprocket-strips-c-content {padding: 0px; }
h4.sprocket-strips-c-title {background: none; color: #512888; margin: 0px; text-align: center;}
h4.sprocket-strips-c-title a {background: none; color: #512888; }
h4.sprocket-strips-c-title a:hover {background: none; color: #4d4d4d; }
.sprocket-strips-c .sprocket-strips-c-image {border-color: #512888; }
.sprocket-strips-c-block {
    flex: 1;
    justify-content: space-around;
	margin-bottom: 30px; }
.sprocket-strips-c-extended-info {font-size: 1.1rem;}
.sprocket-strips-c-item .sprocket-strips-c-text {padding: 0 8px; }
a.sprocket-strips-c-readon {padding: 8px 10px; text-align: center; }
.sprocket-strips-c-text { text-align: center; }
.sprocket-strips-c-readon { display: block; width: 100px; margin: 10px auto 0 auto;}
.sprocket-strips-c-extended-info { right: 0; }


/************ HERO IMAGES  ************/

.hero img { width: 100%; object-fit: cover; object-position: center; height: 30vw; }
.hero h1 {
	color: white;
    font-size: 9vw;
    line-height: 9vw;
    font-weight: bold;
    text-shadow: 3px 3px 13px rgba(0,0,0,0.65); }
.hero-container {
    position: relative;
    text-align: center;
    color: white; }
.hero-overlay {	margin-bottom: 2%;}
.hero-text {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
	width: 90%; }

	
/************ CIRCLE PICTURE ************/
.circle-border {
    border-radius: 100%;
    border: 6px #512888 solid;
    margin: -10px 30px 10px 0px;
	padding: 8px; }

/************ FOOTER  ************/

#g-footer a{ color: white;  }
#g-footer a:hover{ color: #2384D3;  }

#g-footer h2 {
	color: white;
    font-size: 2.3rem;
    border-bottom: none;
    line-height: 1;
    font-weight: 300;
}

#g-footer p {
	line-height: 1.3;
    color: white;
    font-size: 1.3rem;
    font-weight: 300;
}

@media only screen and (max-width: 767px) { #g-footer {background: #512888; } }




/************ HOMELAYOUT  ************/

/*#g-container-main.g-wrapper .g-container .g-grid .g-block.equal-height.size-25 .g-grid {
	background: url(../images/homepage/background.png) 100% 100% no-repeat;
	background-size: 40%;
}*/

.g-logo img {margin: 2% 0%; }

#g-container-main {
    margin: 0;
    padding-left: 10%;
	padding-right: 3%; }
	
	
#g-container-main {
	background: url(../images/homepage/background.png) 100% 100% no-repeat;
	background-size: 12%; }

#g-container-main .g-block.hiddenhome.size-100 {margin-bottom: 2%; }
	
	
@media only screen and (max-width: 767px) {
.g-logo img {margin: 4% 0%; }
#g-container-main { background-size: 25%; }
}

/************ STRIPS AREA  ************/
.sprocket-strips-c-container { margin: 0; display: flex; flex-wrap: wrap; }
.sprocket-strips-c-container > .sprocket-strips-c-block { flex:40%; margin: 20px;}
.newhere .sprocket-strips-c-container > .sprocket-strips-c-block { flex:26%; margin: 20px;}
.newhere .sprocket-strips-c-container > .sprocket-strips-c-block:first-child { margin-left: 0px;}
/*.sprocket-strips-c-container > .sprocket-strips-c-block:first-child { margin-left: 0px;}
.sprocket-strips-c-container > .sprocket-strips-c-block:last-child { margin-right: 0px;}*/
.newhere .sprocket-strips-c-container > .sprocket-strips-c-block:last-child { margin-right: 0px;}
.sprocket-strips-c-item img { object-fit: cover; object-position: center; width: 100%; height:  18vw; }
.sprocket-strips-c-item:hover { margin-top: -30%;  padding-bottom: 30%; }
.newhere .sprocket-strips-c-item:hover { margin-top: -50%;  padding-bottom: 50%; }

@media only screen and (max-width: 767px) {
	.circle-border { display: block; float: none; margin: auto;}
	.sprocket-strips-c-item img { height: 32vw;}
	h4.sprocket-strips-c-title { font-size: 1.25rem;}
	#g-container-main { padding: 0 2%;}
	.sprocket-strips-c-container > .sprocket-strips-c-block {  flex: 41%;  margin: 10px; }
	.landingbutton { background: rgba(255,255,255,.5); font-size: 1.5rem;}
	.hero h1 { margin: 0; line-height:  1.1; }
	.hero-text { top: 0; right: 0; bottom: 0; left: 0; display: flex; justify-content: center; align-items: center; transform: none; width: 100%;}
}



/************ QUICKLINK BOXES  ************/
.quicklinkboxes { display: flex; justify-content: space-around;} 
.quicklinkboxes > div{ flex: 1; padding: 20px 5px; margin: 0 3px; border-radius: 10px; border: 1px #512888 solid; background: white; transition: background 0.3s linear; text-align: center; }
.quicklinkboxes > div a { color: #512888; text-align: center; }
.quicklinkboxes > div:hover{  background: #512888; }
.quicklinkboxes > div:hover a {  color: white; }

@media only screen and (max-width: 767px) {
  .quicklinkboxes { flex-wrap: wrap;}
  .quicklinkboxes > div { width: 45%; flex:none; margin: 5px 0;} 
}

/***********TABS roksprocket REGISTRATION**************/
.layout-top .sprocket-tabs-nav > li.active { border-bottom: 5px solid #512888; }
.sprocket-tabs-nav li .sprocket-tabs-inner {text-transform: none;}