.CPPENA-2022 {} /* main safety */

/* :::::::::::::::::::::::::: VARIABLES  ::::::::::::::::::::::::::*/
:root {
	--primary: #915487;
	--secondary: #58d9fb;
	--tertiary: #5d0e51;
/*	--tertiary: #bdc3c6;*/

	--grey: #777;
	--lightgrey: #eaeaea;
	--red: #ff3340;

}
/* :::::::::::::::::::::::::: VARIABLES  ::::::::::::::::::::::::::*/

*, *:before, *:after { 
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}

html {
	font-size: 16px;
	scroll-behavior: smooth;
}

body {
	height: 100%;
	margin: 0;
	padding: 0;
	background-color: #FFF;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	/*
	/// Non System Font Stack ///
	font-family: Verdana, "Helvetica Neue", Helvetica, Arial, Gotham, Geneva, "sans-serif";
	/// Non System Font Stack ///
	*/
	font-size: 1.1rem;
	font-weight: 400;
	color: #333;
	line-height: 1.6;
	position: relative;
}


#logo {
	background-image: url(../images/sitename_logo.png);
	background-repeat:no-repeat;
	-webkit-background-size: 100% auto;
	-moz-background-size: 100% auto;
	-o-background-size: 100% auto;
	background-size: 100% auto;
	width: 241px;
	height: 90px;
	position:absolute;
	left:10px;
	top:10px;
    -webkit-transition: all .4s ease 0s;
    -moz-transition: all .4s ease 0s;
    -o-transition: all .4s ease 0s;
    transition: all .4s ease 0s;
}

#logo-mobile {
	background-image: url(../images/sitename_logo.png);
	background-repeat:no-repeat;
	-webkit-background-size: 100% auto;
	-moz-background-size: 100% auto;
	-o-background-size: 100% auto;
	background-size: 100% auto;
	width: 220px;
	height: 36px;
	position:absolute;
	right:10px;
	bottom:5px;
}



/* ::::::::::::::::::::::::::::: HEADER MAIN :::::::::::::::::::::::::::::::: */
#header {
	background-color: #FFF;
	margin: 0;
	padding: 0;
	width: 100%;
	position: fixed;
	top:0;
	z-index:7777;
    -webkit-transition: all 1s ease 0s;
    -moz-transition: all 1s ease 0s;
    -o-transition: all 1s ease 0s;
    transition: all 1s ease 0s;
} 
#header:hover {	
	background-color: #FFF;
	box-shadow: 0px 1px 41px 0px rgba(0,0,0,0.6);
	-webkit-box-shadow: 0px 1px 41px 0px rgba(0,0,0,0.6);
	-moz-box-shadow: 0px 1px 41px 0px rgba(0,0,0,0.6);
	-ms-box-shadow: 0px 1px 41px 0px rgba(0,0,0,0.6);
	-o-box-shadow: 0px 1px 41px 0px rgba(0,0,0,0.6);
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
} 

#header .inner.top {
	overflow:show;
	height:130px;
}


#header .subnav {
	position:absolute;
	right:10px;
    bottom: 50px;
	margin: 0;
	padding: 0;
	color: var(--primary);
	font-family: 'Open Sans', sans-serif;
	font-size:16px;
}
#header .subnav li {
   list-style: none;
	margin: 0 0 0 15px;
   padding: 0;
   float: right;
   white-space:nowrap;
}
#header .subnav li:last-child {
	margin: 0;
}

#header .subnav li a, #header .subnav li a:visited {
	color: var(--secondary);
    font-size: 16px;
	font-weight:600;
    text-transform: capitalize;
}
#header .subnav li a:hover {
	color: var(--primary);
}

#header .subnav img {margin:2px 0 0 0}
#header .subnav img:hover {margin: 0 0 2px 0}

#header .subnav li a.button {margin:0;}
#header .subnav li a.button:hover {color:#fff; background: var(--tertiary);}


.social-icon {
	width:28px;
	height:23px;
}
.social-icon.twitter {
	background: url(../images/social-icon-twitter.svg) 90% 100% no-repeat;
	background-size: 95% auto;
}
.social-icon.facebook {
	background: url(../images/social-icon-facebook.svg) 50% 100% no-repeat;
}
.social-icon.instagram {
	background: url(../images/social-icon-instagram.svg) 50% 100% no-repeat;
}
.social-icon.linkedin {
	background: url(../images/social-icon-linkedin.svg) 50% 100% no-repeat;
}

.social-icon.twitter, .social-icon.instagram, .social-icon.linkedin, .social-icon.facebook {
	opacity: 1;
    margin: 1px 0 0 0;
}
.social-icon.twitter:hover, .social-icon.instagram:hover, .social-icon.linkedin:hover, .social-icon.facebook:hover {
	opacity: .8;
    margin: 0 0 1px 0;
}

/* :::::::::::::::::::::::::::::::: MAIN NAV :::::::::::::::::::::::::::::::: */

.navbar {
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	text-align:center;
}


/* ::::::::: FULL WIDTH  NAV COLUMNS ::::::::::::: */
/*
ul.nav {
	display: inline;
	list-style: none;

	margin:0;
	padding:0;

	display: flex;
	flex-flow: space-between;
}
ul.nav li {
	font-family: 'Open Sans', sans-serif; 
	font-size: 20px;
	font-weight:400;
	color: var(--grey);
	white-space:nowrap;
	display:inline-block;
	padding: 2px 20px 9px 20px;
	text-align:center;
	cursor: pointer;
		
	flex-shrink: 0;
    flex-grow: 1;
}
ul.nav li > a {
	color: var(--grey);
	display: block;
	width:100%;
	height: 100%;
	margin: 0;
	padding: 0;
}
ul.nav li:hover >a {
	color: var(--secondary);
}
ul.nav li:hover, ul.nav li:active {
  color: #FFF;
	padding: 2px 20px 6px 20px;
	border-bottom:3px solid var(--primary);
}
ul.nav .has-submenu>a {
	background: url(../images/sub-arrow.png) no-repeat 100% 50%;
}

ul.nav li ul  {
	padding: 0 50px 0 50px ;
	position: absolute;
	top: 40px;
	left: 0;
	width: 100%;

	display: block;
	visibility: hidden;
	filter:alpha(opacity=0);
	opacity: 0;
    min-height:0;

	border-top:3px solid var(--primary);
	background: #f9f9f9;
	background: -moz-linear-gradient(top, #f9f9f9 0%, #efefef 100%);
	background: -webkit-linear-gradient(top, #f9f9f9 0%,#efefef 100%);
	background: linear-gradient(to bottom, #f9f9f9 0%,#efefef 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#efefef',GradientType=0 );
	
	-webkit-column-count: 2;
	-moz-column-count: 2;
	column-count: 2;
	column-gap: 70px;
	
	-webkit-transition: all .1s ease;
	-moz-transition: all .1s ease;
	-ms-transition: all .1s ease;
	-o-transition: all .1s ease;
	transition: all .1s ease;
	
	z-index: 999999;
}

ul.nav li:hover ul {
	padding: 30px 70px 40px 70px ;
	visibility: visible;
	filter:alpha(opacity=100);
	opacity: 1;
	display:block;
	min-height:230px;
	box-shadow: 0 20px 20px rgba(0,0,0,0.4);
	
	-webkit-transition: all .4s ease;
	-moz-transition: all .4s ease;
	-ms-transition: all .4s ease;
	-o-transition: all .4s ease;
	transition: all .4s ease;
}

ul.nav li:hover ul li {
	margin-top:3px;
	padding: 5px 10px;
	display: contents;
	color: #333;
	font-size: .97em;
	text-align: left;
	white-space: normal;
	float:left;
	
	width: 50%;
	width: calc(100% / 2);
	page-break-inside: avoid; 
	break-inside: avoid-column;
	-webkit-column-break-inside:avoid;
	-moz-column-break-inside:avoid;
	column-break-inside:avoid;
	
	position:relative;
	-webkit-transition: none;
	-moz-transition: none;
	-ms-transition: none;
	-o-transition: none;
	transition: none;
}

ul.nav li:hover li a {
	color: #333;
	width: 100%;
	display: block;
	font-size: .98em;
    margin-top: 15px;
    margin-bottom: 5px;
    text-transform: initial;
}
ul.nav li:hover li:first-child a {
    margin-top: 0;
}
ul.nav li:hover li li a {
    margin-top: 0;
    margin-bottom: 0;
}
ul.nav li:hover ul li li {
    padding-top: 0;
}

ul.nav li:hover li a, ul.nav li:hover li li a, ul.nav li:hover li li li a {
	page-break-inside: avoid; 
	break-inside: avoid-column;
	-webkit-column-break-inside:avoid;
	-moz-column-break-inside:avoid;
	column-break-inside:avoid;
	}

ul.nav li li > a:hover, ul.nav li li.has-submenu li a:hover, ul.nav li li li.has-submenu li a:hover   {
	color: var(--primary);
}

ul.nav li:hover ul li ul  {
	visibility: visible;
	filter:alpha(opacity=100);
	opacity: 1;
	display:contents;
	background-color: transparent;
	border-top: none;
	min-height: inherit;
}
ul.nav li:hover li ul>li  {
	visibility: visible;
	filter:alpha(opacity=100);
	opacity: 1;
	display:block;
	width:100%;
	border-bottom: 0;
}
ul.nav li.has-submenu {
	background: url(../images/wedge.png)  no-repeat;
	background-position: 98% 47%;
}
ul.nav li.has-submenu:hover {
	background-position: 98% 50%;
}
ul.nav li li.has-submenu:hover {
	background: none;
}
ul.nav li.has-submenu li {
	background: none;
	padding-right: inherit;
}
ul.nav li li.has-submenu a {
	margin-bottom: 0;
}
ul.nav li li.has-submenu li a {
	color:#777;
	margin-bottom: 0;
}
ul.nav li:hover li li li  {
	margin-top:0;
	padding: 1px 0 1px 9px;
}
ul.nav li li li.has-submenu li a {
	color:#999;
}

*/

/* ::::::::: SUNGLE COLUMN  NAV COLUMNS ::::::::::::: */

ul.nav {
/*  display: inline;*/
  list-style: none;
  width:100%;
  margin:0;
  padding:0;
	
	display: flex;
  	flex-flow: space-between;
}
ul.nav li {
	font-family: 'Open Sans', sans-serif; 
	font-size: 20px;
	font-weight:400;
	color: var(--tertiary);
    white-space: nowrap;
    display: inline-block;
/*    min-width: 15%;*/
    position: relative;
    padding: 3px 10px;
    text-align: center;
    cursor: pointer;
	
	flex-shrink: 0;
    flex-grow: 1
}
.fr-nav ul.nav li {
	font-size: .97rem;
    padding: 8px 16px;
}
ul.nav li>a {
	color: var(--tertiary);
}
ul.nav li:hover >a {
	color: var(--secondary);
}
ul.nav li:hover, ul.nav li:active {
  background-color: #f2f2f2;
	color: var(--primary);
}
ul.nav li ul {
  padding: 0;
  position: absolute;
  top: 37px;
  left: 0;
    width: 100%;
    min-width: 240px;
  display: none;
  opacity: 0;
  visibility: hidden;
  line-height:1.2;
}
ul.nav li ul li { 
  background-color: #f2f2f2; 
  display: block; 
	color: var(--tertiary);
  text-align:left;
  float:left;
	white-space: normal;
    width: 100%;
    min-width: 240px;
	border-top:1px solid #FFF;
}
ul.nav li ul li li {
	background-color: #EAEAEA;
}
ul.nav li ul li a { 
	color: var(--tertiary);
	font-size: .97rem;
	width:100%;
	display:block;
    padding: 7px 10px;
}
ul.nav li ul li:hover { background-color:#eee; z-index: 3; }
ul.nav li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}
ul.nav .has-submenu>a {
	background: url(../images/sub-arrow.png) no-repeat right;
	padding-right:18px;
}

ul.nav li li ul, ul.nav li li:hover li ul  { top: 0; left: -9999px;}
ul.nav li li:hover ul { top: 0; left: 220px; }
ul.nav li li li:hover ul { top: 0; left: 200px; background-color: #ECECEC; }






/* :::::::::::::::::::::::::::::::::::::: SUB NAV ::::::::::::::::::::::::::::::::::::: */
#subnavbar {
	margin: 0 auto;
	padding: 0;
	background-color: var(--grey);
	max-width: 1440px;
	text-align: center;
	overflow: visible;
	color:#fff;
}
#subnavbar.primary {
	background-color: var(--primary);
}
#subnavbar.secondary {
	background-color: var(--secondary);
}
#subnavbar.tertiary {
	background-color: var(--tertiary);
}

ul.sub-nav {
	display: inline;
	margin: 0;
	padding: 0;
	list-style: none;
	right:0;

	display: flex;
	flex-flow: space-between;
}
ul.sub-nav li {
	font-size: 1.2rem;
	font-weight:400;
	color: #fff;
	white-space:nowrap;
	display:inline-block;
    margin: 0 10px;
    padding: 5px 20px;
	cursor: pointer;
	position: relative;
	
    flex-shrink: 0;
    flex-grow: 1;
}
ul.sub-nav li>a {
	color: #FFF;
}
ul.sub-nav li >a:hover {
	color: var(--primary);
}

ul.sub-nav li ul {
  padding: 0;
  position: absolute;
  top: 36px;
	left:0;
  min-width: 240px;
  display: none;
  opacity: 0;
  visibility: hidden;
  line-height:1.2;
}
ul.sub-nav li:hover>ul {
  display: block;
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

ul.sub-nav li ul li { 
	background-color: #caced1; 
	display: block; 
	text-align:left;
	white-space: normal;
	width: 240px;
	border-top:1px solid rgba(255,255,255,0.5);
	font-size: .93em;
	padding:  7px 10px;
}

ul.sub-nav li ul li:hover {
	background-color: #A6B1B9;
}

#subnavbar.blue ul.sub-nav li ul li { 
	background-color: #556c87; 
	display: block; 
	text-align:left;
	white-space: normal;
	width: 240px;
	border-top:1px solid rgba(255,255,255,0.5);
	font-size: .9em;
	padding:  7px 10px;
}
#subnavbar.blue  ul.sub-nav li ul li:hover {
	background-color: #A6B1B9;
}

ul.sub-nav .has-submenu>a {
	background: url(../images/wedge.png) no-repeat right;
	padding-right:18px;
}



/* :::::::::::::::::::::::::::::::::::::: BANNER ::::::::::::::::::::::::::::::::::::: */
#banner {
	margin: 99px auto 0;
    padding: 0;
    width: 100%;
	max-width:1440px;
	z-index: 1;
    overflow: hidden;
	position: relative;
}	

#banner .innertext {
	width: 100%;
	margin:0;
	padding:0 5%;
	position: absolute;
	bottom: 10%;
	-ms-transform: translateY(-10%);
	transform: translateY(-10%);
	left: 0;
	z-index: 4;
	text-align: center;
}	


#banner img {
	display: inline-block;
	text-align:center;
}

#banner H1, #banner H2, #banner H3, #banner p {
	font-size:3.0rem;
	color:#FFF;
	line-height: 1.1;
	margin: 0 0 20px 0 ;
	padding: 0;
	font-weight:600;
	font-style: italic;
	text-shadow: 0 2px 5px rgba(0,0,0, 0.7);
}
#banner H3 {
	font-size:1.5rem;
	line-height:1.4;
	font-weight:400;
}
#banner p {
	font-size:1.3rem;
	line-height:1.4;
	color: var(--grey);
	margin: 1.3rem 0;
	font-weight:400;
}

#banner .button {
	z-index:5555;
	bottom:10px;
	font-size: 20px;
	margin: 20px 0 0 0;
	padding: 15px 30px;
	color: #fff;
	background: rgba(0,0,0,0.7);
	background-color: rgba(0,0,0,0.7);
	border:1px solid #fff;
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
}
#banner .button:hover {
	color: var(--primary);
	background: rgba(255,255,255,1);
	background-color: rgba(255,255,255,1);
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
}

#banner .fade {
	position: absolute;
	bottom:0;
	left:0;
	width:100%;
	height:40%;
	z-index: 3;
	background: rgb(1,25,36);
	background: -moz-linear-gradient(180deg, rgba(1,25,36,0) 0%, rgba(1,25,36,1) 72%);
	background: -webkit-linear-gradient(180deg, rgba(1,25,36,0) 0%, rgba(1,25,36,1) 72%);
	background: linear-gradient(180deg, rgba(1,25,36,0) 0%, rgba(1,25,36,1) 72%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#011924",endColorstr="#011924",GradientType=1);
}


/* :::::::::::::::::::::::::::::::::::::: BANNER SLIDER ::::::::::::::::::::::::::::::::::::: */

/*! http://responsiveslides.com v1.54 by @viljamis */
.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
/*	max-height: 700px;*/
}

.rslides li {
	-webkit-backface-visibility: hidden;
	position: absolute;
	display: none;
	width: 100%;
	max-height: 380px;
	left: 0;
	top: 0;
}

.rslides.home li {
  max-height: inherit;
}



.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
}

.rslides img {
  display: block;
  float: left;
  width: 100%;
  height: auto;
  border: 0;
  margin:0 auto;
  }

#banner .callbacks_nav {
  position: absolute;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  top: 60%;
  left: -20px;
  opacity: 0.3;
  z-index: 3;
  text-indent: -9999px;
  overflow: hidden;
  text-decoration: none;
  width: 20px;
  height: 30px;
  background: transparent url(../images/arrows-banner.png) no-repeat left top;
  margin-top: -45px;
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
}

#banner .callbacks_nav.next {
  left: auto;
  background-position: right top;
  right: -20px;
  }

#banner:hover .callbacks_nav {
  left: 10px;
  opacity: 0.5;
}
#banner:hover .callbacks_nav.next {
  left: auto;
  background-position: right top;
  right: 10px;
  opacity: 0.5;
}
#banner .callbacks_nav:hover, #banner .callbacks_nav:active, #banner .callbacks_nav.next:hover, #banner .callbacks_nav.next:active {
  opacity: 1.0;
 }


/* :::::::::::::::::::::::::::::::::::::: BODY ::::::::::::::::::::::::::::::::::::: */

.content {
	margin:0 auto;
	padding: 60px 20px 80px 20px;
	max-width: 1440px; 
	min-height:250px;
	z-index:1;
	position: relative;
} 
.content ul { 
	/*margin: 0;*/
	padding: 0 20px;
}
.content li {
	padding: 0 0 7px 0;
}

.content blockquote { 
	margin: 5px 30px;
/*	padding: 0 20px;*/
}
.content img, .box-1 img, .box-1-2 img, .box-1-3 img, .box-2-3 img,
.content img, .box-1 img, .box-1of2 img, .box-1of3 img, .box-2of3 img {
	max-width:100%;
	height:auto !important;
}

.content p {
	/* margin-after:2em;*/
	margin: 10px 0;
}

.content.fullwidth {
	max-width:100%;
	width:100%;
	overflow: auto;
	z-index: 1;
}

.inner {
	margin: 0 auto;
	padding: 0;
	max-width:1440px;
	position: relative;
	z-index: 2;
}



/* :::::::::::::::::::::::::::::::::::::: LINKS ::::::::::::::::::::::::::::::::::::: */
a:link, a:visited {
	color: var(--primary);
	text-decoration: none;
	-webkit-transition: color .1s ease-in-out;
	-moz-transition: color .1s ease-in-out;
	-o-transition: color .1s ease-in-out;
	transition: color .1s ease-in-out;
}
a:link.primary, a:visited.primary {
	color: var(--primary) !important;
}

a:hover, a:active, a:focus {
	color: var(--tertiary);
	text-decoration: none;
	outline:0;
}

a.anchor {
    display: block;
    position: relative;
    top: -200px;
    visibility: hidden;
}




/* ::::::::::::::::::::::::::::::::::::::::: FOOTER ::::::::::::::::::::::::::::::::::::::::: */

#footer {
	width: 100%;
	padding: 60px 0;
	font-size: 1.0rem;
	color: #fff;
	line-height: 1.1;
	position: relative;
    background: var(--secondary);
}

#footer hr  {
	margin:30px auto;
	width:70%
}

#footer .logos {
	position:absolute;
	right:0;
	top: 10px;
}
#footer .text {
	position:absolute;
	left:0;
	top: 10px;
}
#footer .logo {
	margin:0px auto;
/*	background-image: url(../images/CPPENA-logo-white.png);*/
	background-repeat:no-repeat;
	-webkit-background-size: 100% auto;
	-moz-background-size: 100% auto;
	-o-background-size: 100% auto;
	background-size: 100% auto;
	width: 220px;
	height: 70px;
}

	#footer .inner {
		padding: 0 20px;
	}

#footer a:link, #footer a:visited {
	color: #fff;
	text-decoration: none; 
	padding: 0;
}
#footer a:hover {
	color: var(--primary);
}

#footer a:link, #footer a:visited {
	color: #fff;
	text-decoration: none; 
	font-size: 1.0rem;
	padding: 0;
}
#footer a:hover {
	color: var(--tertiary);
}
#footer ul {
/*	display: block;*/
	width: 18%;
	margin: 0 6% 0 0;
	padding: 0;
	float: left;
}

#footer ul.special {
/*	display: block;*/
	width: 23%;
	margin: 0;
	padding: 0;
	float: right;
}
#footer ul.special li {
	margin: 5px 0;
	padding: 0 0 3px 3px;
	list-style: none;
	text-align:center;
}


#footer li {
	margin: 0;
	padding: 0 0 5px 1px;
	list-style: none;
}
#footer li li {
	margin: 0;
	padding: 0 0 5px 3px;
	list-style: none;
}
#footer .header, #footer .header a {
	margin: 40px 0 10px 0;
	padding: 0;
	font-family: 'Open Sans', sans-serif; 
	font-weight:600;
	font-size : 1.5rem;
	color: #FFF;
}

#footer .header:hover a {
	color: var(--tertiary);
}


/* ::::::::::::::::::::::::::::::::::::::: SPECIAL ELEMENTS ::::::::::::::::::::::::::::::::::::::: */

.content.fullwidth.bg-primary .easteregg {
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	opacity: 0;
	background: url(../images/canada-flag.jpg) no-repeat;
	background-size: 105% auto;
	background-position: center;
	z-index:0;
	 -webkit-transition: all 1s ease 0s;
    -moz-transition: all 1s ease 0s;
    -o-transition: all 1s ease 0s;
    transition: all 1s ease 0s;
}
.content.fullwidth.bg-primary:hover .easteregg{
	top:0;
	right:0;
	bottom:0;
	left:0;
	opacity: .2;
	background-size: 102% auto;
	 -webkit-transition: all 1s ease 0s;
    -moz-transition: all 1s ease 0s;
    -o-transition: all 1s ease 0s;
    transition: all 1s ease 0s;
}


/* ~~~~~ ARROW ~~~~~*/
.arrow {
	margin: 10px 30px;
}
.arrow span{
    display: block;
    width: 30px;
    height: 30px;
    border-bottom: 5px solid var(--primary);
    border-right: 5px solid var(--primary);
    transform: rotate(45deg);
    margin: -10px;
    animation: arrow-down 2s infinite;
}
.arrow span:nth-child(2){
    animation-delay: -0.2s;
}
.arrow span:nth-child(3){
    animation-delay: -0.4s;
}
@keyframes arrow-down {
    0%{
        opacity: 0;
        transform: rotate(45deg) translate(-20px,-20px);
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        transform: rotate(45deg) translate(20px,20px);
    }
}
/* ~~~~~ ARROW ~~~~~*/

/* ~~~~~ QUOTES ~~~~~*/
.quotesection {
  min-height: 480px;
  margin:0;
  padding:40px 0;
  overflow:auto;
  background-image: url("../images/pic-quotes.jpg");
  background-position: center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.quotesection .innertext {
	width: 42%;
	margin:0 auto;
	padding:0 0 0 50px;
	position: absolute;
	top: 40%;
	-ms-transform: translateY(-40%);
	transform: translateY(-40%);
	right: 8%;
	border-left: 5px solid var(--primary);
}

.quotesection p, .quotesection {
	font-size: 24px;
	font-weight: 400;
	color: #fff;
	letter-spacing: 0px;
	line-height: 1.3;
}
.quotesection h1, .quotesection h2, .quotesection h3, .quotesection h4, .quotesection h5, .quotesection h6 {
	font-size: 30px;
	font-weight:600;
	color: #fff;
	letter-spacing: 0px;
	line-height: 1.5;
}

/* ~~~ animation ~~~ */

#quote-slider{
    min-height: 300px;
	margin:0;
    padding: 0;
    position: relative;
    max-width:100%;
    overflow: hidden;
}
.quote{
    position: relative;
	margin-bottom:30px;
}
.slider-quote {
    transition: 1.5s;
    position:absolute;
    top: 0;
    left: -200%;
    opacity: 0;
	font-size: 1.5rem;
    color: #fff;
    line-height: 1.3;
    min-width: 100%;
}
.slider-quote h2 {
    font-size: 1.8rem;
    color: #fff;
}

.controls {
	position: absolute;
	bottom: 0;
	padding: 0;
}
.quote-control {
    margin-top: 18px;
    display: inline-block;
    height: 5px;
    width: 20px;
    background-color: #fff;
    margin-right: 5px;
}
.selected, .quote-control:hover {
    background-color: var(--primary);
}

.in-focus{
    transition: 1.5s;
    left:0;
	 opacity: 1;
}
/* ~~~~~ QUOTES ~~~~~*/




/* ::::::::::::::::::::::::::::::::::::::: TEXT FORMATTING ::::::::::::::::::::::::::::::::::::::: */
H1, H2, H3, H4, H5, H6 {
	margin: 20px 0 10px 0;
	padding: 0;
	font-family: 'Open Sans', sans-serif;
	font-weight:600;
	color:#FFF;
	line-height:1.2;
}
h1, h1 a:link, h1 a:visited {
	font-size : 3.4rem;
	color: var(--secondary);
	margin: 0 0 10px 0;
	letter-spacing: -1.5px;
}
h2, h2 a:link, h2 a:visited  {
	font-size : 2.8rem;
	color: var(--secondary);
	letter-spacing: -0.5px;
}
h3, h3 a:link, h3 a:visited {
	font-size :2.8rem;
	color: var(--primary);
	letter-spacing: -0.5px;
}
h4, h4 a:link, h4 a:visited {
	font-size : 2.2rem;
	color: var(--secondary);
}
h5, h5 a:link, h5 a:visited {
	font-size : 2.2rem;
	color: var(--primary);
}
h6, h6  a:link, h6 a:visited {
	font-size : 1.4rem;
	color: var(--primary);
	margin: 0;
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover, 
a h1:hover, a h2:hover, a h3:hover, a h4:hover, a h5:hover, a h6:hover {
	color: var(--tertiary);
}

hr {
	border: none 0;
	border-top: 1px solid var(--primary);
	height: 1px;
	margin: 20px 0;
	width:100%;
	text-decoration: none;
}

hr.grey {
	border: none 0;
	border-top: 1px solid var(--grey);
	height: 1px;
	margin: 5px 0;
	padding: 0;
	width:100%;
	text-decoration: none;
}
hr.whiteline, hr.white {
	border: none 0;
	border-top: 1px solid #FFF;
	height: 1px;
	margin: 10px 0;
	padding: 0;
	width:100%;
	text-decoration: none;
}
hr.primary {
	border: none 0;
	border-top: 5px solid var(--primary);
	height: 5px;
	margin: 10px auto;
	padding: 0;
	width:100%;
	text-decoration: none;
}

.blue, .blue-text {
	color : #2D49A9;
}
.lightblue, .lightblue a:link  {
	color : #9fcceb;
}
.lightblue a:hover  {
	color : #7697BE;
}
.bergundy {
	color: #9e2533;
}
.yellow {
	color: #B7A900;
}
.orange {
	color: #db8327;
}
.green {
	color : #90d139;
}
.purple {
	color : var(--tertiary);
}
.red, a.red, a.red:visited {
	color : #CC0000;
}
a.red:hover {
	color : #90d139;
}
.white, a.white, h4.white,  a:link h4.white, a h4.white, h5.white,  a:link h5.white, a h5.white, h6.white,  a:link h6.white, a h6.white {
	color : #FFF;
}
a.white:hover, a:hover h4.white, a:hover h5.white, a:hover h6.white {
	color : #BDE0FE;
}
.grey  {
	color : #777;
}
.lightgrey  {
	color : #ccc;
}
.small { font-size : .85rem;}
.medium { font-size : 1.2rem;}
.large { font-size : 1.5rem;}
.extralarge { font-size : 2rem;}

.message-error { color:#C00; }


/* ::::::::::::::::::::::::::::::::::::::: BUTTON ::::::::::::::::::::::::::::::::::::::: */

a.button, button.button {
	border:0;
	color: #fff;
	display: inline-block;
    font-size: 18px;
    margin: 20px 0;
    padding: 14px 23px;
	text-align: center;
	background-color: var(--primary);
	line-height: 1;
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
}


a.buttonmid, button.buttonmid {
	border:0;
	color: #fff;
	display: inline-block;
	font-size: 17px;
	margin: 3px 0;
	padding: 8px 13px;
	text-align: center;
	background-color: var(--primary);
	line-height: 1;
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
}

a.buttonsmall, button.buttonsmall   {
	border:0;
	color: #fff;
	display: inline-block;
	font-size: 15px;
	margin: 3px 0;
	padding: 7px 9px;
	text-align: center;
	background-color: var(--primary);
	line-height: 1;
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
}
a.button.secondary, button.button.secondary, a.buttonsmall.secondary, button.buttonsmall.secondary {
	background: var(--secondary);
	background-color: var(--secondary);
}
a.button.tertiary, button.button.tertiary, a.buttonsmall.tertiary, button.buttonsmall.tertiary {
	background: var(--tertiary);
	background-color: var(--tertiary);
}
a.button.grey, button.button.grey, a.buttonsmall.grey, button.buttonsmall.grey {
	background: var(--grey);
	background-color: var(--grey);
}
a.button.darkgrey, button.button.darkgrey, a.buttonsmall.darkgrey, button.buttonsmall.darkgrey {
	background: #555;
	background-color: #555;
}
a.button.lightblue, button.button.lightblue, a.buttonsmall.lightblue, button.buttonsmall.lightblue {
	background: #9fcceb;
	background-color: #9fcceb;
}
a.button.green, button.button.green, a.buttonsmall.green, button.buttonsmall.green {
	background: #97BA24;
	background-color: #97BA24;
}
a.button.yellow, button.button.yellow, a.buttonsmall.yellow, button.buttonsmall.yellow {
	background: #F4B351;
	background-color: #F4B351;
}
a.button.red, button.button.red, a.buttonsmall.red, button.buttonsmall.red {
	color:#fff;
	background: #990000;
	background-color: #990000;
}


a.button.tertiary:hover, button.button.tertiary:hover, a.buttonsmall.tertiary:hover, button.buttonsmall.tertiary:hover
{
	color: #fff;
	background: var(--secondary);
	background-color: var(--secondary);
}

a.button:hover, a.buttonsmall:hover, button.button:hover, button.buttonsmall:hover, a.buttonmid:hover, button.buttonmid:hover, 
a.button.secondary:hover, button.button.secondary:hover, a.buttonsmall.secondary:hover, button.buttonsmall.secondary:hover,
a.button.grey:hover, button.button.grey:hover, a.buttonsmall.grey:hover, button.buttonsmall.grey:hover,
a.button.lightblue:hover, button.button.lightblue:hover, a.buttonsmall.lightblue:hover, button.buttonsmall.lightblue:hover,
a.button.yellow:hover, button.button.yellow:hover, a.buttonsmall.yellow:hover, button.buttonsmall.yellow:hover,
a.button.red:hover, button.button.red:hover, a.buttonsmall.red:hover, button.buttonsmall.red:hover,
a.button.darkgrey:hover, button.button.darkgrey:hover, a.buttonsmall.darkgrey:hover, button.buttonsmall.darkgrey:hover,
a.button.green:hover, button.button.green:hover, a.buttonsmall.green:hover, button.buttonsmall.green:hover,
a.button.outline:hover, a.button.primary.outline:hover, a.button.secondary.outline:hover
{
	color: #fff;
	background: var(--tertiary);
	background-color: var(--tertiary);
}


a.button.outline, a.button.primary.outline, a.button.secondary.outline {
	border:3px solid var(--primary);
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--grey);
    padding: 16px 30px;
	text-align: center;
	background-color: #fff;
}
a.button.secondary.outline {
	border:3px solid var(--secondary);
	border-color: var(--secondary);
    padding: 15px 35px;
	text-align: center;
	background-color: #fff;
}
a.button.outline:hover, a.button.primary.outline:hover
{
	color: #fff;
	background: var(--primary);
	background-color: var(--primary);
}
a.button.secondary.outline:hover
{
	color: #fff;
	background: var(--secondary);
	background-color: var(--secondary);
}

.bg-primary a.button {
	border: 1px solid #fff;
	color: #fff;
	display: inline-block;
	font-size: 1.4rem;
	margin: 30px 0;
	padding: 20px 30px;
	text-align: center;
	background-color: var(--primary);
}
.bg-primary a.button:hover {
	background-color: #fff;
	color: var(--secondary);
}

.button-top-right {
	position: absolute;
	top:30px;
	right:15px;
}


/* ::::::::::::::::::::::::::::::::::::::: STICKY ::::::::::::::::::::::::::::::::::::::: */
#header.sticky {
	box-shadow: 0px 1px 7px 0px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0px 1px 7px 0px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 1px 7px 0px rgba(0,0,0,0.2);
	-ms-box-shadow: 0px 1px 7px 0px rgba(0,0,0,0.2);
	-o-box-shadow: 0px 1px 7px 0px rgba(0,0,0,0.2);
}
#header .inner.top.sticky {
	height:100px; /*shorter than original */
	-webkit-transition: all 0.3s ease 0s;
	-webkit-transition: all 0.3s ease 0s;
	-moz-transition: all 0.3s ease 0s;
	-o-transition: all 0.3s ease 0s;
	transition: all 0.3s ease 0s;
}
#logo.sticky {
	width: 190px;
	height:58px;
	top:3px;
	-webkit-transition: all 0.3s ease 0s;
	-moz-transition: all 0.3s ease 0s;
	-o-transition: all 0.3s ease 0s;
	transition: all 0.3s ease 0s;
}


/* ::::::::::::::::::::::::::::::::::::::: CIRCLES ::::::::::::::::::::::::::::::::::::::: */

.circle-200 {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	margin:0 auto;
}
.circle-150 {
	width: 150px;
	height: 150px;
	border-radius: 50%;
	margin:0 auto;
}
.circle-200 img, .circle-150 img {
	width: 100%;
	height: auto;
}
.fltleft, .circle-150.floatleft, .circle-200.floatleft {
	float:left;
	margin:0 20px 40px 0;
}
.fltright, .circle-150.floatright, .circle-200.floatright {
	float:right;
	margin:0 0 40px 20px;
}
	
	
	
/* ::::::::::::::::::::::::::::::::::::::: BOXES ::::::::::::::::::::::::::::::::::::::: */

.box-1, .box-1-3, .box-1-2, .box-2-3, .box-1-4, .box-3-4, .box-1-5, .box-1-6,
.box-1, .box-1of3, .box-1of2, .box-2of3, .box-1of4, .box-3of4, .box-1of5, .box-1of6 
{ float:left; margin-top: 10px; margin-bottom: 10px; margin-left:1%; margin-right:1%; padding:15px 20px; position:relative;}

.box-1 { width: 100%; margin-left:0; margin-right:0; float: none; display:block; clear:both; } 

.box-1-3, .box-1of3 { width: 31%; float:left;}
.box-1-3.nomargin, .box-1of3.nomargin .box-1-3.nomargin.noresize, .box-1of3.nomargin.noresize { width: 33%; float:left; }
.box-1-3.noresize, .box-1of3.noresize { width: 31%; float:left; }

.box-1-2, .box-1of2 { width: 47.8%; float:left; }
.box-1-2.nomargin, .box-1of2.nomargin { width: 50%; float:left; }

.box-2-3, .box-2of3 { width: 64%; float:left; } 
.box-2-3.nomargin, .box-2of3.nomargin { width: 66.9%; float:left; } 
.box-2-3.noresize, .box-2of3.noresize { width: 64%; float:left; }

.box-1-4, .box-1of4 { width: 22.9%; float:left; } 
.box-1-4.nomargin, .box-1of4.nomargin { width: 24.9%; float:left; } 

.box-3-4, .box-3of4 { width: 73.8%; float:left; } 
.box-3-4.nomargin, .box-3of4.nomargin { width: 74.9%; float:left; } 

.box-1-5, .box-1of5 { width: 17.9%; float:left; } 
.box-1-5.nomargin, .box-1of5.nomargin { width: 19.9%; float:left; } 

.box-1-6, .box-1of6 { width: 14.6%; float:left; } 
.box-1-6.nomargin, .box-1of6.nomargin { width: 16.5%; float:left; } 

.l { margin-left:0; }
.r { margin-right:0; }

.floatleft {float:left !important;}
.floatright {float:right !important;}
.floatnone {float:none !important;}

.nomargin { margin:0 !important;}
.nopadding { padding:0;}

.special-padding { padding: 10px 20px 30px 20px; }
.special-padding-right {padding-right:30px}

.border { border: 1px solid var(--grey); }

.borderright {border-right:1px dotted  var(--grey);}
.borderleft {border-left:1px dotted  var(--grey);}

.box-1 p, .box-1-2 p, .box-1-3 p, .box-1-4 p, .box-1-5 p, .box-1-6 p,
.box-1of2 p, .box-1of3 p, .box-1of4 p, .box-1of5 p, .box-1of6 p { margin:0; padding:5px 0; }

.box-image {
	background-image: url(../images/pic-girl-laptop.jpg);
	background-size: cover;
	width: 100%;
	height: 100%;
	opacity: 1;
}
.box-image:hover {
	opacity: .8;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}
.box-image img {
    flex-shrink: 0;
 object-fit: cover;
    min-width: 120%;
    min-height: 120%;
}
.box-image  p, .box-image  div {
	margin: 0;
    padding: 0;
}
.box-text {
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	background: rgba(255,255,255,0.8);
	padding:15px;
	z-index: 1;
}
.box-text h2, .box-text h3, .box-text h4, .box-text h5, .box-text h6, .box-text p {
	margin:0;
}
.shadow {
	-webkit-box-shadow: 0px 1px 5px rgba(0,0,0,0.09);
	-moz-box-shadow:    0px 1px 5px rgba(0,0,0,0.09);
	box-shadow:         0px 1px 5px rgba(0,0,0,0.09);
	border:1px solid #f2f2f2;
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-ms-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}
.shadow:hover {
	-webkit-box-shadow: 0px 2px 11px rgba(0,0,0,0.28);
	-moz-box-shadow:    0px 2px 11px rgba(0,0,0,0.28);
	box-shadow:         0px 2px 11px rgba(0,0,0,0.28);
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}

.logobox {
	-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.06);
	-moz-box-shadow:    0px 0px 5px rgba(0,0,0,0.06);
	box-shadow:         0px 0px 5px rgba(0,0,0,0.06);
	border: 1px solid #eaeaea;
	padding: 0;
	min-width:110px;
	min-height: 180px;
/*	height:130px;*/
	text-align: center;
	display:table-cell;
	vertical-align:middle;
	position: relative;
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-ms-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}
.logobox:hover {
	-webkit-box-shadow: 0px 2px 11px rgba(0,0,0,0.28);
	-moz-box-shadow:    0px 2px 11px rgba(0,0,0,0.28);
	box-shadow:         0px 2px 11px rgba(0,0,0,0.28);
	
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}
.logobox img { 
	width: auto !important;
	max-width: 90%; 
	height:auto;  
	max-height: 66%; 
	position: absolute;  
    top: 10%;   
    bottom: 0;  
    left: 0;  
    right: 0;  
    margin: auto;
}
.logobox img:hover  { 
	max-width: 92%; 
	max-height: 67%; 
}
.box-1-3.logobox img, .box-1-4.logobox img { 
	max-width: 70%; 
	max-height: 45%; 
}
.box-1-3.logobox img:hover, .box-1-4.logobox img:hover  { 
	max-width: 72%; 
	max-height: 47%; 
}
.logobox h4, .logobox h5, .logobox h6, .logobox p { 
	font-size: 1.1rem;
	position: absolute;  
    top: 2%;  
    bottom: 0;  
    left: 0;  
    right: 0;  
    margin: auto;
}

.height100, .height-100 { height:100px; overflow:hidden }
.height150, .height-150 { height:150px; overflow:hidden }
.height180, .height-180 { height:180px; overflow:hidden }
.height200, .height-200 { height:200px; overflow:hidden }
.height225, .height-225 { height:225px; overflow:hidden }
.height250, .height-250 { height:250px; overflow:hidden }
.height275, .height-275 { height:275px; overflow:hidden }
.height300, .height-300 { height:300px; overflow:hidden }
.height350, .height-350 { height:350px; overflow:hidden }
.height400, .height-400 { height:400px; overflow:hidden }
.height450, .height-450 { height:450px; overflow:hidden }
.height500, .height-500 { height:500px; overflow:hidden }
.height600, .height-600 { height:600px; overflow:hidden }
.height700, .height-700 { height:700px; overflow:hidden }



/* :::::::::::::::::::::::  MOBILE MENUBAR START :::::::::::::::::::: */
	#menubar {
		padding: 0;
		width: 100%;
		height: 45px;
		background-color: var(--primary);
		position: fixed;
		top: 0;
		z-index: 1000;
	}

	#menubar ul {
		margin: 0 auto;
		padding: 0;
		display: inline-block;
	}
	#menubar li {
		list-style: none;
		display: block;
		padding: 12px 9px;
		float: left;
		white-space:nowrap;
	}
	#menubar li:first-child {
		padding-left:0;
	}
	#menubar li:last-child {
		padding-right:0;
	}
	#menubar li a {
		padding: 10px 10px 0 0;
		font-family: 'Open Sans', sans-serif; 
		font-size: 16px;
		font-weight:400;
		color: #FFF;
		text-decoration: none;
	}
	#menubar li a:hover {
		color: var(--secondary);
	}
	#menubar li a:active {
		color: var(--tertiary);
	}
	.menucontainer {
		text-align: center;
		margin: 0 auto;
	}
/* :::::::::::::::::::::::: END  MOBILE MENUBAR :::::::::::::::::::::: */

/* ::::::::::::::::::::::::::::: MOBILE NAV ::::::::::::::::::::::::::::: */
	#menuhead {
		display: block;
		width: 97%;
		margin:0 auto;
		padding: 10px;
		background-color: var(--primary);
		color:#FFF;
		font-size:14px;
		text-align:left;
		min-width:300px;
	}
	
	nav#mobilenav {
		display: inline-block;
		width: 97%;
		margin:50px auto 0;
		text-align: left;
		min-width:300px;
	}
	nav#mobilenav * {
		list-style-type: none;
		margin:0;
		padding:0;
	}
	nav#mobilenav ul li {
		display: block;
		min-height: 34px;
		line-height: 34px;
		height: auto;
		width: inherit;
		overflow: hidden;
		background-color: var(--primary);
		border-bottom: 1px solid rgba(255,255,255,0.2);
		font-family: 'Open Sans', sans-serif;
		font-size: 15px;
	}
	nav#mobilenav ul >li:hover {
		background: rgba(255,255,255,0.2);
	}
	nav#mobilenav ul li:last-child {
		border-bottom: none;
	}
	nav#mobilenav ul li a, #mobilenav ul li a:visited {
		text-decoration: none;
/*		text-transform: uppercase;*/
		color: #FFF;
		/*display: block;*/
		padding-left: 12px;
		padding-right: 12px;
	}

	nav#mobilenav ul li.has-submenu a {
    	color: #fff;
	    display: inline-block;
		padding-left: 11px;
		padding-right: 11px;
		width: 85%;
		line-height: 1.7;
	}
	nav#mobilenav ul li.has-submenu a:hover {
    	color: #c4d432;
	}


/* ------ OLD MENU EXPAND ------- */
/*
	nav#mobilenav ul li.has-submenu {
		background: var(--darkblue) url(../images/icon-plus.png) 280px 10px no-repeat;
	}	
	nav#mobilenav ul>li.has-submenu:hover {
		background: rgba(255,255,255,0.15) url(../images/icon-plus.png) 280px 10px no-repeat;
	}
	nav#mobilenav ul li li.has-submenu {
		background: url(../images/icon-plus.png) 280px 10px no-repeat;
	}
*/

/* ------ NEW MENU EXPAND ------- */
	nav#mobilenav ul>li.has-submenu:before  {
		content: '\002B';
		color: #fff;
		font-weight: bold;
		font-size: 1.5rem;
		position: absolute;
		right:10px;
	}
	nav#mobilenav ul>li.has-submenu:before:hover, nav#mobilenav ul>li.has-submenu.active:before:hover  {
		color: var(--tertiary);
	}
	nav#mobilenav ul>li.has-submenu.active:before {
	  content: "\2212";
		color: #fff;
/*		right:30px;*/
	}
/* ------ NEW MENU EXPAND ------- */

	nav#mobilenav ul li a:hover {
		color: #fff;
	}
	nav#mobilenav ul li ul {
		display: none;
		margin-left: -12px;
		margin-right: -12px;
		background: rgba(0,0,0,0.3);
		-webkit-box-shadow: inset 0 10px 10px -10px rgba(0,0,0,0.4);
		-moz-box-shadow:    inset 0 10px 10px -10px rgba(0,0,0,0.4);
		box-shadow:         inset 0 10px 10px -10px rgba(0,0,0,0.4);
	}
	nav#mobilenav ul li.active>ul {
		/*display: block;*/
	}
	nav#mobilenav ul li ul li {
		border-bottom: solid 1px rgba(255,255,255,0.2);
		border-left: none;
		background: none;
		padding-left: 20px;
    	width: 97%;
		font-size:.93rem;
	}
	nav#mobilenav ul li ul li:first-child {
		-webkit-box-shadow: inset 0px 10px 10px -10px rgba(0,0,0,0.4);
		-moz-box-shadow: 	inset 0px 10px 10px -10px rgba(0,0,0,0.4);
		box-shadow: 		inset 0px 10px 10px -10px rgba(0,0,0,0.4);
	}
	nav#mobilenav ul li ul li:last-child {
		-webkit-box-shadow: inset 0 -10px 10px -10px rgba(0,0,0,0.4);
		-moz-box-shadow:    inset 0 -10px 10px -10px rgba(0,0,0,0.4);
		box-shadow:         inset 0 -10px 10px -10px rgba(0,0,0,0.4);
	}
	nav#mobilenav ul li ul li a:hover {
		color: #fff;
	}
	nav#mobilenav ul li:hover ul {
		/*display: block;*/
	}

	#fancybox-bio img {
		max-width: 800px;
		max-height: 600px;
	}
/* :::::::::::::::::::::::: END MOBILE NAV :::::::::::::::::::::::: */


/* ================================================== 
        ::::::::::::::::::::::: Responsive settings  :::::::::::::::::::::::
=================================================== */
@media screen and (min-width: 1600px) {
	.inner {
		padding:0 20px;	
	}
	#header .inner.top {
		padding:0px 1px;	
	}
}
@media screen and (max-width: 1600px) {
	#logo {
		left:20px;
	}
}

@media screen and (max-width: 1440px) {
	#header .inner.top {
		padding:0px 10px;	
	}
	body { font-size: 1.2rem; }
	
	H1 {font-size : 3.6rem;}
	H2, h2 a:link, H3, h3 a:link {font-size : 2.6rem;}
	H4, h4 a:link, H5, h5 a:link {font-size : 2.0rem;}
	H6, h6 a:link {font-size : 1.3rem;}	
}

@media screen and (max-width: 1366px) {
	#header .inner.top {
		height: 120px;
	}
	#header .inner.top.sticky {
		height: 100px;
	}
	
	#header .subnav {
		bottom: 50px;
	}

	#banner .innertext-home {  top: 20%; }
	#banner H1, #banner H2, #banner H3, #banner p { font-size: 2.7rem; margin: 0 0 10px 0;}
	#banner H3 { font-size: 1.4rem;}
	.hotbox .news, .hotbox .resources, .hotbox .members, .hotbox .advocacy { width: 140px; height: 140px;}
	
}
@media screen and (max-width: 1200px) {
	#header li a, #header li a:visited {
		font-size: 15px;
	}
	.navbar {
		left: 0;
		width:100%;
	}
	#logo {
		width: 200px;
		height: 60px;
	}

@media screen and (max-width: 1024px) {
	#header li a, #header li a:visited {
		font-size: 15px;
	}
	.navbar {
		left: 0;
		width:100%;
	}
	#logo, #logo.sticky {
		width: 160px;
		height: 50px;
	}

	
	H1 {font-size : 3.2rem;}
	H2, h2 a:link, H3, h3 a:link {font-size : 2.4rem;}
	H4, h4 a:link, H5, h5 a:link {font-size : 1.8rem;}
	H6, h6 a:link {font-size : 1.2rem;}	
	
	.hotbox .news, .hotbox .resources, .hotbox .members, .hotbox .advocacy { width: 130px; height: 130px;}
	.hotbox h4, .hotbox h4 a, .hotbox h5, .hotbox h5 a {font-size: 1.5rem;}
}

@media screen and (max-width: 960px) {
	.hide-960 {
		display:none;	
	}
	.fullwidth-960 {
		width:100% !important;	
		margin-left:0 !important;
		margin-lright:0 !important;
		float: none;
		clear: both;
	}
/*	#banner, .rslides li  {height: 400px; }*/
	#banner .innertext {margin: 45px 0 0 0; width: 90%; padding: 0; bottom: 3%; right: 5%; border-left: 0;}
	#banner .innertext-home {  top: 18%; padding: 0 0 0 30px; width: 45%; }
	#banner H1, #banner H2, #banner H3, #banner p { font-size: 2.2rem; margin: 0 0 10px 0;}
	#banner H3 { font-size: 1.2rem;}
	.hotbox .news, .hotbox .resources, .hotbox .members, .hotbox .advocacy { width: 120px; height: 120px;}

	
	#header .inner.top {
		height:95px;
	}	
	.content {
		padding: 20px;
		min-height:200px;
	}
	ul.nav li {
		font-size: 14px;
		padding: 8px 2px;
	}
	.fr-nav ul.nav li {
		font-size: 13px;
	}
	ul.nav .has-submenu>a {
		background:none;
		padding-right:0;
	}
	ul.nav li ul {
		padding: 0;
		position: absolute;
		top: 34px;
	}
	
	.hotbox h4, .hotbox h4 a, .hotbox h5, .hotbox h5 a {
		font-size: 1.4rem;
	}
	#footer ul.nav {
		display: inherit;
	}
}

@media screen and (max-width: 850px) {
	#banner .button {
		font-size:13px;
		margin:5px 0;
		padding:5px 11px;
	}
	#footer .header, #footer li.header a {
		font-size: 1.2rem;
	}
	#footer .logo, #footer2 .logo {
		width: 200px;
		height: 62px;
	}
	.card-container {
    	font-size: .95rem;
	}
}
@media screen and (min-width: 670px) {
	#menubar {
		display: none;
	}
	.mobile {
		display:none;	
	}
}
@media screen and (max-width: 670px) {
	body {
		font-size: .97rem;
		line-height: 1.5;
	}
	.mobile {
		display: block;	
	}
	.desktop, #mem-only-green, #mem-only-mauve  {
		display:none;	
	}
	.content {
		margin:0;
		padding: 15px;
	}
	.content.fullwidth {
		margin:0;
		padding: 0;
	}
	.inner {
		padding:0 10px;	
	}
	
	H1, H2, h2 a, H3, h3 a, H4, h4 a, H5, h5 a, H6, h6 a{
		margin: 5px 0;
	}
	H1 {font-size : 2.2rem;}
	H2, h2 a:link, H3, h3 a:link {font-size : 1.6rem;}
	H4, h4 a:link, H5, h5 a:link {font-size : 1.4rem;}
	H6, h6 a:link {font-size : 1.1rem;}	
	
	.small { font-size : .93rem;}
	.medium { font-size : 1.1rem;}
	.large { font-size : 1.3rem;}
	.extralarge { font-size : 1.4rem;}
	
	#banner {height:240px; margin: 45px 0 0 0;}
	.rslides li {
    	height: 240px;
	}
	#banner .innertext { width: 100%; }
	#banner H1, #banner H2, #banner H3, #banner p { font-size: .97rem; margin: 0 0 10px 0;}
	#banner H3 { font-size: .9rem; }
	#banner .innertext-home H3 { display:none;}
	#banner .icons { bottom: 1%; }
	
	.hotbox .news, .hotbox .resources, .hotbox .members, .hotbox .advocacy { width: 80px; height: 80px;}
	.hotbox h4, .hotbox h4 a, .hotbox h5, .hotbox h5 a { font-size: 1.1rem; padding: 0; }

	#banner, .rslides.home li {
		max-height: inherit;
		height: inherit;
	}
	#banner p { font-size: 1.4rem; margin: 0.5rem 0;}
	#banner img {
		display: inline-block;
		text-align: center;
	}
	#banner .button {
		font-size:14px;
		padding:4px 7px;
	}
	
	a.button, button.button {
		font-size: 1rem;
		margin: 10px 0;
		padding: 10px 15px;
	}
	a.buttonmid, button.buttonmid {
		font-size: .95rem;
		margin: 3px 0;
		padding: 9px 11px;
	}
	a.buttonsmall, button.buttonsmall {
		font-size: .9rem;
		margin: 3px 0;
		padding: 6px 9px;
	}
	a.button.outline, a.button.primary.outline, a.button.secondary.outline {
		font-size: 1.1rem;
		padding: 14px 20px;
	}	

	.button-top-right { top: 0; }
	.bg-primary a.button { font-size: 1.2rem; margin: 10px 0; padding: 15px; }
	
	.quotesection { min-height: 250px }
	.quotesection .innertext {
		width: 90%;
		padding: 0;
		top: 5%;
		-ms-transform: translateY(-1%);
		transform: translateY(-1%);
		right: 5%;
		border-left: none;
	}
	#quote-slider { min-height: 230px; }
	.slider-quote h2 { font-size: 1.1rem; }
	
	.box-1, .box-1-3, .box-1-2, .box-2-3, .box-1-4, .box-3-4, .box-1-5, .box-1-6,
	.box-1of3, .box-1of2, .box-2of3, .box-1of4, .box-3of4, .box-1of5, .box-1of6 { margin-top: 5px; margin-bottom: 5px; margin-left:0; margin-right:0; padding:5px;}
	
	.box-1-3, .box-1-3.nomargin, .box-1-2, .box-1-2.nomargin, .box-2-3, .box-2-3.nomargin, .box-3-4, .box-3-4.nomargin,
	.box-1of3, .box-1of3.nomargin, .box-1of2, .box-1of2.nomargin, .box-2of3, .box-2of3.nomargin, .box-3of4, .box-3of4.nomargin { width: 100%;} 
	
	.box-1-4, .box-1of4 { width: 48%; margin-left:1%; margin-right:1%;  } 
	
	.box-1-5,.box-1-6, .box-1of5,.box-1of6 { width: 48%;  margin-left:1%; margin-right:1%; } 
	
	.box-1 img, .box-1-3 img, .box-1-2 img, .box-2-3 img, .box-1-4 img, .box-1-5 img, .box-1-6 img, .box-3-4 img,
	.box-1of3 img, .box-1of2 img, .box-2of3 img, .box-1of4 img, .box-1of5 img, .box-1of6 img, .box-3of4 img { max-width:99%; height:auto;}

	
	.width-33, .nomargin.width-33 { width: 30.66%; }
	
	.width-50, 
	.box-1-2.width-50, .box-1-4.nomargin.width-50, .box-1-5.nomargin.width-50, .box-1-6.nomargin.width-50, .box-1-3.nomargin.width-50, .box-1-2.nomargin.width-50, .box-3-4.nomargin.width-50,
	.box-1of2.width-50, .box-1of4.nomargin.width-50, .box-1of5.nomargin.width-50, .box-1of6.nomargin.width-50, .box-1of3.nomargin.width-50, .box-1of2.nomargin.width-50, .box-3of4.nomargin.width-50 { width: 48%; margin-left: 1%; margin-right: 1%; }
	
	.width-100, 
	.box-1-4.nomargin.width-100, .box-1-5.nomargin.width-100, .box-1-6.nomargin.width-100, .box-1-3.nomargin.width-100, .box-1-2.nomargin.width-100, .box-3-4.nomargin.width-100,
	.box-1of4.nomargin.width-100, .box-1of5.nomargin.width-100, .box-1of6.nomargin.width-100, .box-1of3.nomargin.width-100, .box-1of2.nomargin.width-100, .box-3of4.nomargin.width-100 { width: 100%;  margin-left:0; margin-right:0; }
	

	.special-padding-right, .border-left {padding-right:5px; padding-left:5px; border-left:0;}

	.logobox {
		-webkit-box-shadow: none;
		-moz-box-shadow:    none;
		box-shadow:         none;
		border: none;
		height:100px;
		min-height: 100px;
	}
	.logobox:hover {
		-webkit-box-shadow: none;
		-moz-box-shadow:    none;
		box-shadow:         none;
	}
 	
	#footer {
		padding: 10px 0 20px 0;
	}

	#footer2 {
		width: 100%;
		padding: 15px 0 30px 0;
	}
	#footer2 .inner {
		text-align: center;
	}
	#footer ul.special {
		width: 100%;
	}
	
	
	.height100, .height-100, .height150, .height-150, .height180, .height-180, .height200, .height-200, .height225, .height-225, .height250, .height-250, .height275, .height-275, .height300, .height-300, .height350, .height-350, .height400, .height-400, .height450, .height-450, .height500, .height-500, .height600, .height-600, .height700, .height-700, .height800, .height-800 { height: auto; }

	table td, table th, .fancy td, .fancy th { padding: 0.125em; }
	
	.calendar h4 {  margin-top: -10px;}
	
	select {width:100%; font-size: 1.05em;}
	label input {width:20px;}
	input {width:100%; font-size: 1.05em;}

	.borderright {border-right:none}
	.borderleft {border-left:none}
	.mobile-fadeup {
		background: -moz-linear-gradient(top, rgba(255,255,255,1) 25%, rgba(230,230,230,0.6) 100%);
		background: -webkit-linear-gradient(top, rgba(255,255,255,1) 25%, rgba(230,230,230,0.6) 100%);
		background: linear-gradient(to bottom, rgba(255,255,255,1) 25%, rgba(230,230,230,0.6) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80f9f9f9', endColorstr='#e6f7f7f7',GradientType=0 );
	}
		
	.content .columns2, .content .columns3 {
    	column-gap: 20px;
	}
}
/* ||||||||||| END 670  |||||||||||| */