/* -----------------------
CONTAINER
------------------------*/

.container
{
	max-width: 1200px;
	margin: 0px auto;
}


/* -----------------------
TEXT STYLES
------------------------*/

body
{
	margin: 0px;
	color: #00285e;
	font-family: 'Quicksand', sans-serif;
}

h1,h2,h3,h4,h5,h6
{
	margin-top: 0px;
	margin-bottom: 10px;
}


h1
{	
	font-weight: 700;
	font-size: 55px;	
	color: #6caddf;
	letter-spacing: -2px;
	line-height: 1;
}


h2
{	
	font-weight: 700;
	font-size: 45px;
	letter-spacing: -2px;
}

h3
{	
	font-weight: 700;
	font-size: 35px;
	color: #6caddf;
	letter-spacing: -1px;
}


h4
{	
	font-weight: 700;
	font-size: 30px;
	color: #6caddf;
	letter-spacing: -1px;
}

h5
{	
	font-weight: 700;
	font-size: 25px;
	margin-bottom: 5px;
	color: #6caddf;
	letter-spacing: -1px;
}

h6
{	
	font-weight: 700;
	font-size: 20px;
	margin-bottom: 5px;
	letter-spacing: -1px;
}

h7
{
	font-weight: 500;
	font-size: 15px;
	margin-top: 0px;
	margin-bottom: 0px;
}

p 
{	
	font-weight: 500;
	font-size: 15px;
	margin-top: 0px;
	margin-bottom: 20px;
}


/* -----------------------------
SPAN TAG FOR BLUE SNAKE GAMER
------------------------------*/

.bsg-blue-snake
{
	color: #00285e;
	font-weight: bold;
}

.bsg-gamer
{
	color: #6caddf;
	font-weight: bold;
}

/* -----------------------------
MEDIA QUERY - 80% OF TEXT SIZE
------------------------------*/

@media screen and (max-width: 320px)
{
h1 {font-size: 44px;}
	
h2 {font-size: 36px;}
	
h3 {font-size: 28px;}

h4 {font-size: 24px;}

h5 {font-size: 20px;}

h6 {font-size: 16px;}
}



/* -----------------------
HEADER
------------------------*/

header
{
	background: #6caddf;
}


/* -----------------------
RESPONSIVE HEADER LOGO
------------------------*/

.responsive-header-logo {line-height: 0px; padding-top: 20px; padding-left: 20px;
float: left;}
@media only screen and (max-width: 480px){
#responsive-header-logo-1 { display: none; }
#responsive-header-logo-2 { display: block; }
}

@media only screen and (min-width: 481px){
#responsive-header-logo-1 { display: block; }
#responsive-header-logo-2 { display: none; }
}


/* -----------------------
RESPONSIVE HERO IMAGE
------------------------*/
.responsive-hero { max-width: 100%; line-height: 0px; }
@media only screen and (max-width: 480px){
#responsive-hero-mobile { display: block; }
#responsive-hero-tablet { display: none; }
#responsive-hero-desktop { display: none; }
#responsive-hero-desktop-retina { display: none; }
}

@media only screen and (min-width: 481px) and (max-width: 768px){
#responsive-hero-mobile { display: none; }
#responsive-hero-tablet { display: block; }
#responsive-hero-desktop { display: none; }
#responsive-hero-desktop-retina { display: none; }
}

@media only screen and (min-width: 769px) and (max-width: 1200px){
#responsive-hero-mobile { display: none; }
#responsive-hero-tablet { display: none; }
#responsive-hero-desktop { display: block; }
#responsive-hero-desktop-retina { display: none; }
}

@media only screen and (min-width: 1201px){
#responsive-hero-mobile { display: none; }
#responsive-hero-tablet { display: none; }
#responsive-hero-desktop { display: none; }
#responsive-hero-desktop-retina { display: block; }
}


/* -----------------------
RESPONSIVE HERO VIDEO
------------------------*/

.responsive-hero-video {position: relative; height: 100%; width: 100%; left: 0; top: 0; object-fit: cover; line-height: 0px;}
@media only screen and (max-width: 480px){
#responsive-hero-video-mobile { display: block; }
#responsive-hero-video-tablet { display: none; }
#responsive-hero-video-desktop { display: none; }
#responsive-hero-video-desktop-retina { display: none; }
}

@media only screen and (min-width: 481px) and (max-width: 768px){
#responsive-hero-video-mobile { display: none; }
#responsive-hero-video-tablet { display: block; }
#responsive-hero-video-desktop { display: none; }
#responsive-hero-video-desktop-retina { display: none; }
}

@media only screen and (min-width: 769px) and (max-width: 1200px){
#responsive-hero-video-mobile { display: none; }
#responsive-hero-video-tablet { display: none; }
#responsive-hero-video-desktop { display: block; }
#responsive-hero-video-desktop-retina { display: none; }
}

@media only screen and (min-width: 1201px){
#responsive-hero-video-mobile { display: none; }
#responsive-hero-video-tablet { display: none; }
#responsive-hero-video-desktop { display: none; }
#responsive-hero-video-desktop-retina { display: block; }
}


/* -----------------------
RESPONSIVE BODY IMAGE
------------------------*/
.responsive-body { max-width: 100%; line-height: 0px; margin-bottom: 20px;}
@media only screen and (max-width: 480px){
#responsive-body-mobile { display: block; }
#responsive-body-tablet { display: none; }
#responsive-body-desktop { display: none; }
#responsive-body-desktop-retina { display: none; }
}

@media only screen and (min-width: 481px) and (max-width: 768px){
#responsive-body-mobile { display: none; }
#responsive-body-tablet { display: block; }
#responsive-body-desktop { display: none; }
#responsive-body-desktop-retina { display: none; }
}

@media only screen and (min-width: 769px) and (max-width: 1200px){
#responsive-body-mobile { display: none; }
#responsive-body-tablet { display: none; }
#responsive-body-desktop { display: block; }
#responsive-body-desktop-retina { display: none; }
}

@media only screen and (min-width: 1201px){
#responsive-body-mobile { display: none; }
#responsive-body-tablet { display: none; }
#responsive-body-desktop { display: none; }
#responsive-body-desktop-retina { display: block; }
}


/* -----------------------
RESPONSIVE THUMBNAIL IMAGE
------------------------*/
.responsive-thumbnail { max-width: 100%; line-height: 0px; margin-bottom: 20px;}
@media only screen and (max-width: 480px){
#responsive-thumbnail-mobile { display: block; }
#responsive-thumbnail-tablet { display: none; }
#responsive-thumbnail-desktop { display: none; }
}

@media only screen and (min-width: 481px) and (max-width: 768px){
#responsive-thumbnail-mobile { display: none; }
#responsive-thumbnail-tablet { display: block; }
#responsive-thumbnail-desktop { display: none; }
}

@media only screen and (min-width: 769px){
#responsive-thumbnail-mobile { display: none; }
#responsive-thumbnail-tablet { display: none; }
#responsive-thumbnail-desktop { display: block; }
}


/* -----------------------
IFRAME VIDEO CONTAINER
------------------------*/
.video-container {
	position:relative;
	padding-bottom:56.25%;
	height:0;
	overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	border:none;
}

.video-container-not-live-yet {
	display: none;
}

/* -----------------------
FOOTER
------------------------*/

.footer
{
	background: #00285e;
	
	margin: 0px;
	padding: 20px;
	text-align: center;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
}

.footer p {font-size: 12px;}

.footer h4
{
	color: white;
}

.footer a:link { color: white; }

.footer-contact img
{
	height: 45px;
	margin-left: 15px;
	margin-right: 15px;
	margin-bottom: 20px;
	vertical-align: middle;
}


/* -----------------------
CONTENT
------------------------*/

.content-white
{
	padding: 20px;
	background-color: white;
	text-align: center;
}

.content-white a:link
{
	color: #6caddf;
}



.content-sky-blue
{
	padding: 20px;
	background-color: #6caddf;
	color: white;
	text-align: center;
}

.content-sky-blue .button
{
	color: white !important;
	background: #00285e;
}

.content-sky-blue .button:hover
{
	color: #00285e !important;
	background: white;
}


.content-sky-blue h1
{
	color: white;
}

.content-sky-blue h3
{
	color: #00285e;
}

.content-sky-blue h4
{
	color: #00285e;
}

.content-sky-blue h5
{
	color: #00285e;
}

.content-sky-blue a:link
{
	color: #00285e;
}



.content-dark-blue
{
	padding: 20px;
	background-color: #00285e;
	color: white;
	text-align: center;
}


.content-dark-blue .button
{
	color: white !important;
	background: #6caddf;
}

.content-dark-blue .button:hover
{
	color: #00285e !important;
	background: white;
}

.content-dark-blue a:link
{
	color: #6caddf;
}



/* -----------------------
CONTENT QUOTES
------------------------*/

.content-white-quote
{
	padding: 20px;
	background-color: white;
	text-align: center;
}

.content-white-quote h4
{
	color: #6caddf;
}

.content-white-quote h5
{
	color: #00285e;
	margin-bottom: 0px;
}


.content-sky-blue-quote
{
	padding: 20px;
	background-color: #6caddf;
	text-align: center;
}

.content-sky-blue-quote h4
{
	color: white;
}

.content-sky-blue-quote h5
{
	color: #00285e;
	margin-bottom: 0px;
}


.content-dark-blue-quote
{
	padding: 20px;
	background-color: #00285e;
	text-align: center;
}

.content-dark-blue-quote h4
{
	color: white;
}

.content-dark-blue-quote h5
{
	color: #6caddf;
	margin-bottom: 0px;
}


/* -----------------------
BULLET POINT
------------------------*/
.bullet-point img
{
	margin-top: 10px;
	margin-bottom: 10px;
	height: 45px;
}

/* -----------------------
RESPONSIVE IMAGE
------------------------*/

.img
{
	max-width: 100%;
	height: auto;
}

/* -----------------------
IMAGE IN CIRCLE
------------------------*/
.image-in-circle-header-and-first-body
{
	width: 100px;
    height: 100px;
    overflow: hidden;
    border-radius: 50%;
	margin: auto;
	margin-bottom: 20px;
}


.image-in-circle
{
	width: 100px;
    height: 100px;
    overflow: hidden;
    border-radius: 50%;
	margin: auto;
	margin-bottom: 20px;
}


@media screen and (max-width: 480px){

.image-in-circle
{
	margin-top: 40px;
}	
}

/* -----------------------
BANNER
------------------------*/
.banner
{
	position: relative;
    width: 100%;
	height: 100%;
    max-width: 1200px;
}

.banner img {
    width: 100%;
    height: auto;
}

/* -----------------------
BUTTON
------------------------*/

.button
{
	color: white !important;
	background: #6caddf;
	display: inline-block;
	padding: 10px 20px;
	text-align: center;
	font-size: 20px;
	font-weight: 700;
	white-space: nowrap;
	vertical-align: middle;
	cursor: pointer;
	text-decoration: none;
	margin-top: 10px;
	border-radius: 25px;
	letter-spacing: -1px;
}

.button:hover
{
	color: white !important;
	background: #00285e;
}


.button-not-live-yet
{
	display: none;
}

/* -----------------------
ONLINE FORM
------------------------*/
* {
  box-sizing: border-box;
}

/* -----------------------
FORM - TEXT FIELD
------------------------*/

input[type=text], select, textarea {   
  /* Remove First */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  /* Then Style */
  width: 100%;
  padding: 10px 20px;
  resize: vertical;
  border: none;
  border-radius: 0px;
  background: white;
  font-family: 'Quicksand', sans-serif;
  font-size: 20px;
  font-weight: 300;  
}

/* -----------------------
FORM - EMAIL ADDRESS
------------------------*/

input[type=email], select, textarea {   
  /* Remove First */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  /* Then Style */
  width: 100%;
  padding: 10px 20px;
  resize: vertical;
  border: none;
  border-radius: 0px;
  background: white;
  font-family: 'Quicksand', sans-serif;
  font-size: 20px;
  font-weight: 300;  
}

/* -----------------------
FORM - TELEPHONE NUMBER
------------------------*/

input[type=tel], select, textarea {   
  /* Remove First */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  /* Then Style */
  width: 100%;
  padding: 10px 20px;
  resize: vertical;
  border: none;
  border-radius: 0px;
  background: white;
  font-family: 'Quicksand', sans-serif;
  font-size: 20px;
  font-weight: 300;  
}

/* -----------------------
FORM - RADIO BUTTON
------------------------*/

.radio {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: auto;
  display: inline-block;
  position: relative;
  float: left;
  cursor: pointer;
  padding-top: 10px;
  padding-left: 35px;
  padding-right: 20px;
  font-size: 20px;
  font-weight: 700;
}

@media screen and (max-width: 480px){
	.radio {
		float: none;
		margin-left: 22px;
	}
}


/* Hide the browser's default radio button */
.radio input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 9px;
  left: 0px;
  height: 25px;
  width: 25px;
  background-color: white;
  border-radius: 50%;
}

/* On mouse-over*/
.radio:hover input ~ .checkmark {
  background: #6caddf;
}

/* When the radio button is checked*/
.radio input:checked ~ .checkmark {
  background-color: white;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.radio input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.radio .checkmark:after {
 	top: 5px;
	left: 5px;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: #6caddf;
}

/* -----------------------
FORM - SUBMIT BUTTON
------------------------*/

input[type=submit] {
  /* Remove First */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  
  /* Then Style */
  color: #00285e !important;
  background-color: white;
  display: inline-block;
  padding: 10px 20px;
  text-align: center;
  font-family: 'Quicksand', sans-serif;
  font-size: 20px;
  font-weight: 700;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  text-decoration: none;
  border: none;
  border-radius: 0px;
}

input[type=submit]:hover {
	color: #00285e !important;
	background: #6caddf;
}

input[type=submit]:active {
	color: #00285e !important;
	background: #6caddf;
}

form-question {
  /* Remove First */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  
  /* Then Style */
  padding: 10px 20px;
  display: inline-block;
  font-size: 20px;
  font-weight: 700;
}

@media screen and (max-width: 480px){
form-question {
	width: 100%;
	text-align: center;
	margin-top: 0px;
	margin-bottom: 0px;
}
}

/* -----------------------
FORM - QUESTION & ANSWER
------------------------*/

.question {
  float: left;
  width: 25%;
  text-align: right;
}

@media screen and (max-width: 480px){
	question {
		width: 100%;
		text-align: center;
		margin-top: 0px;
		margin-bottom: 0px;
	}
}

.answer {
  float: left;
  width: 75%;
  margin-bottom: 20px;
}


/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - when the screen is less than 480px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 480px) {
  .question, .answer  {
    width: 100%;
    margin-top: 0;
  }
}


/* -----------------------
SECTIONS
------------------------*/

.section
{
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col
{
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
	padding: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
}

.col:first-child { margin-left: 0; }



/* -----------------------
GROUPING
------------------------*/

.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both; }
.group { zoom:1; /* For IE 6/7 */ }



/* -----------------------
GRID OF TWO
------------------------*/

.span_2_of_2 {
	width: 100%;
}
.span_1_of_2 {
	width: 49.2%;
}


/* -----------------------
GRID OF THREE
------------------------*/

.span_3_of_3 { width: 100%; }
.span_2_of_3 { width: 66.13%; }
.span_1_of_3 { width: 32.26%; }



/* -----------------------
GRID OF FOUR
------------------------*/

.span_4_of_4 {
	width: 100%;
}
.span_3_of_4 {
	width: 74.6%;
}
.span_2_of_4 {
	width: 49.2%;
}
.span_1_of_4 {
	width: 23.8%;
}


/* -----------------------
SCREEN SIZES
------------------------*/

@media (max-width: 320px){
}

@media (min-width: 321px) and (max-width: 480px){
}

@media (min-width: 481px){
}

@media (max-width: 480px){
}
			
@media (min-width: 481px) and (max-width: 768px){
}
   
@media (min-width: 769px){
}



/* -----------------------
MEDIA QUERIES
------------------------*/

/*  GO FULL WIDTH BELOW 480 PIXELS */

@media screen and (max-width: 320px){
	.col {  margin: 1% 0 1% 0%; }
	.span_2_of_2, .span_1_of_2 { width: 100%; }
	.span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
	.span_1_of_4, .span_2_of_4, .span_3_of_4, .span_4_of_4 { width: 100%; }
}

	
@media (min-width: 321px) and (max-width: 480px){
	.col {  margin: 1% 0 1% 0%; }
	.span_2_of_2, .span_1_of_2 { width: 100%; }
	.span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
	.span_1_of_4, .span_2_of_4, .span_3_of_4, .span_4_of_4 { width: 100%; }
}


/* -----------------------
NAV
------------------------*/

.nav{
	min-height: 100px;
    width:100%;
	font-size: 20px;
	font-weight: 700;
	text-align: center;
}

.nav ul{
    margin:0;
    padding:0;
    list-style:none;
    overflow:hidden;
	vertical-align: middle;
}

.nav ul a{
    display:block;
    padding:20px;
    text-decoration:none;
	color: white;
}

.nav ul a:hover{
	background: #00285e; 
}

.nav .menu{
    clear:both;
    max-height:0;
    transition:max-height .2s ease-out;
}


/* -----------------------------
HAMBURGER
------------------------------*/

.nav .menu-icon{
    padding: 50px 20px;
	height: 100px;
    position:relative;
    float:right;
    cursor: pointer;
}

.nav .menu-icon .nav-icon{
    background:white;
    display:block;
    height:2px;
    width:18px;
    position:relative;
    transition:background .2s ease-out;
}

.nav .menu-icon .nav-icon:before{
    background:white;
    content:"";
    display:block;
    height:100%;
    width:100%;
    position:absolute;
    transition:all .2s ease-out;
    top:5px;
}

.nav .menu-icon .nav-icon:after{
    background:white;
    content:"";
    display:block;
    height:100%;
    width:100%;
    position:absolute;
    transition:all .2s ease-out;
    top:-5px;
}

.nav .menu-btn{
    display:none;
}

.nav .menu-btn:checked ~ .menu{
    max-height:400px;
}

.nav .menu-btn:checked ~ .menu-icon .nav-icon{
    background:transparent;
}
.nav .menu-btn:checked ~ .menu-icon .nav-icon:before{
    transform: rotate(-45deg);
    top:0;
}
.nav .menu-btn:checked ~ .menu-icon .nav-icon:after{
    transform: rotate(45deg);
    top:0;
}


/* -----------------------------
MEDIA QUERIES
------------------------------*/

@media (min-width:769px){

.nav ul a{
	padding-top: 55px;
	height: 135px;
}
	
.nav li{
	float:left;
}


.nav .menu{
	clear:none;
	float:right;
	max-height:none;
}

.nav .menu-icon{
	display:none;
}

.nav{
	height: 135px;
}	
}


@media only screen and (min-width: 481px) and (max-width: 768px){
.nav .menu-icon{
	padding-top: 65px;
	height: 135px;
}
}


@media (min-width:481px){
.nav{
	min-height: 135px;
}	
}