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

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


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

body
{
	margin: 0px;
	color: black;
	font-family: 'Readex Pro', sans-serif;
}

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


h1
{	
	font-weight: 600;
	font-size: 50px;	
}

h2
{	
	font-weight: 600;
	font-size: 30px;	
}

h3
{	
	font-weight: 200;
	font-size: 25px;	
}

h4
{	
	font-weight: 600;
	font-size: 20px;	
}

h5
{	
	font-weight: 600;
	font-size: 17.5px;
	margin-bottom: 5px;
}

h6
{
	font-weight: 300;
	font-size: 14px;
	margin-top: 0px;
	margin-bottom: 0px;
}

p 
{	
	font-weight: 300;
	font-size: 14px;
	margin-top: 0px;
	margin-bottom: 20px;
}

/* -----------------------------
CAVEAT
------------------------------*/

.h2-caveat
{
	vertical-align: super;
	font-size: 20px;
}


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

@media screen and (max-width: 320px)
{
h1 {font-size: 40px;}
	
h2 {font-size: 24px;}
	
h3 {font-size: 20px;}

h4 {font-size: 16px;}

h5 {font-size: 14px;}
}


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

header
{
	background: white;
}


/* -----------------------
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-header-logo img
{
	height: 35px;
}

/* -----------------------
RESPONSIVE FOOTER LOGO
------------------------*/

.responsive-footer-logo {margin: 0; padding-bottom: 20px}
@media only screen and (max-width: 480px){
#responsive-footer-logo-1 { display: none; }
#responsive-footer-logo-2 { display: block; }
}

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

.responsive-footer-logo img
{
	height: 35px;
}

/* -----------------------
RESPONSIVE BODY IMAGE WITH 20PX BOTTOM
------------------------*/
.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; }
}

@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; }
}

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

.responsive-body img
{
	width: 100%;
	height: 100%;
	border-radius: 20px;
}

/* -----------------------
RESPONSIVE BODY IMAGE - NO SPACING
------------------------*/
.responsive-body-no-spacing { max-width: 100%; line-height: 0px; margin-bottom: 0px}
@media only screen and (max-width: 480px){
#responsive-body-mobile { display: block; }
#responsive-body-tablet { display: none; }
#responsive-body-desktop { 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; }
}

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


.responsive-body-no-spacing img
{
	width: 100%;
	height: 100%;
	border-radius: 20px;
}


/* -----------------------
RESPONSIVE BODY IMAGE SLIDER - BEFORE AND AFTER - WITH 20PX BOTTOM
------------------------*/
.responsive-body-image-slider { max-width: 100%; line-height: 0px; margin-bottom: 20px}
@media only screen and (max-width: 480px){
#responsive-body-image-slider-mobile { display: block; }
#responsive-body-image-slider-tablet { display: none; }
#responsive-body-image-slider-desktop { display: none; }
}

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

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

.responsive-body-image-slider img
{
	border-radius: 20px;
}

/* -----------------------
RESPONSIVE BODY IMAGE SLIDER - BEFORE AND AFTER - NO SPACING
------------------------*/
.responsive-body-image-slider-no-spacing { max-width: 100%; line-height: 0px; margin-bottom: 0px}
@media only screen and (max-width: 480px){
#responsive-body-image-slider-mobile { display: block; }
#responsive-body-image-slider-tablet { display: none; }
#responsive-body-image-slider-desktop { display: none; }
}

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

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

.responsive-body-image-slider-no-spacing img
{
	border-radius: 20px;
}


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

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

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

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


.responsive-video-hero video
{
	width:  100%;
	height:  100%;
	display: block;
}


/* -----------------------
NON-RESPONSIVE VIDEO HERO
------------------------*/
.video-hero video
{
	width: 100%;
	height: 100%;
	display: block;
}


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

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

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

@media only screen and (min-width: 1441px) and  (max-width: 1920px){
#responsive-image-hero-mobile { display: none; }
#responsive-image-hero-tablet { display: none; }
#responsive-image-hero-desktop-1440 { display: none; }
#responsive-image-hero-desktop-1920 { display: block; }
#responsive-image-hero-desktop-2560 { display: none; }
}

@media only screen and (min-width: 1921px) {
#responsive-image-hero-mobile { display: none; }
#responsive-image-hero-tablet { display: none; }
#responsive-image-hero-desktop-1440 { display: none; }
#responsive-image-hero-desktop-1920 { display: none; }
#responsive-image-hero-desktop-2560 { display: block; }
}


.responsive-image-hero img
{
	max-width:  100%;
	max-height:  100%;
	display: block;
}



/* -----------------------
VIDEO
------------------------*/

.video video
{
	max-width:  100%;
	max-height:  100%;
	border-radius: 20px;
}


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

.footer
{	background: rgba(210,0,255,1);
	background: -webkit-linear-gradient(to bottom right, rgba(210,0,255,1) 0%, rgba(100,0,255,1) 50%, rgba(0,255,200,1) 100%);
	background: -o-linear-gradient(to bottom right, rgba(210,0,255,1) 0%, rgba(100,0,255,1) 50%, rgba(0,255,200,1) 100%);
	background: linear-gradient(to bottom right, rgba(210,0,255,1) 0%, rgba(100,0,255,1) 50%, rgba(0,255,200,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#d200ff",endColorstr="#00ffc8",GradientType=1);
	color: white;
	margin: 0px;
	padding: 20px;
	text-align: center;
	font-size: 10px;
	font-weight: 600;
}

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

.footer a:link { color: white; }

.footer-icons
{
	text-align: left;
	margin-bottom: 10px;
}

.footer-icons img
{
	height: 30px;
	margin-right: 10px;
	vertical-align: middle;
}

.footer-address-icon
{
	text-align: left;
}

.footer-address-icon img
{
	float: left;
	height: 30px;
	margin-right: 10px;
	margin-bottom: 40px;
	vertical-align: middle;
}

/* -----------------------
COLOUR PALETTE
------------------------*/
:root
{
--quickscope_purple: #d200ff;
--quickscope_blue: #6400ff;
--quickscope_cyan: #00ffc8;

--quickscope_purple_75: #dd40ff;
--quickscope_purple_50: #e980ff;
--quickscope_purple_25: #f4bfff;

--quickscope_blue_75: #8b40ff;
--quickscope_blue_50: #b280ff;
--quickscope_blue_25: #d8bfff;

--quickscope_cyan_75: #40ffd6;
--quickscope_cyan_50: #80ffe3;
--quickscope_cyan_25: #bffff1;
}


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

.button
{
	background: rgba(210,0,255,1);
	background: -webkit-linear-gradient(to bottom right, rgba(210,0,255,1) 0%, rgba(100,0,255,1) 50%, rgba(0,255,200,1) 100%);
	background: -o-linear-gradient(to bottom right, rgba(210,0,255,1) 0%, rgba(100,0,255,1) 50%, rgba(0,255,200,1) 100%);
	background: linear-gradient(to bottom right, rgba(210,0,255,1) 0%, rgba(100,0,255,1) 50%, rgba(0,255,200,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#d200ff",endColorstr="#00ffc8",GradientType=1);
	color: white !important;
	display: inline-block;
	padding: 10px 20px;
	text-align: center;
	font-size: 16px;
	font-weight: 600;
	white-space: nowrap;
	vertical-align: middle;
	cursor: pointer;
	text-decoration: none;
	margin-top: 10px;
	border-radius: 25px;
}


.button:hover
{
	background: rgba(210,0,255,1);
	background: -webkit-linear-gradient(to bottom right, rgba(244,191,255,1) 0%, rgba(216,191,255,1) 50%, rgba(191,255,241,1) 100%);
	background: -o-linear-gradient(to bottom right, rgba(244,191,255,1) 0%, rgba(216,191,255,1) 50%, rgba(191,255,241,1) 100%);
	background: linear-gradient(to bottom right, rgba(244,191,255,1) 0%, rgba(216,191,255,1) 50%, rgba(191,255,241,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f4bfff",endColorstr="#bffff1",GradientType=1);
	color: black !important;
}

.button:active
{
	background: rgba(210,0,255,1);
	background: -webkit-linear-gradient(to bottom right, rgba(244,191,255,1) 0%, rgba(216,191,255,1) 50%, rgba(191,255,241,1) 100%);
	background: -o-linear-gradient(to bottom right, rgba(244,191,255,1) 0%, rgba(216,191,255,1) 50%, rgba(191,255,241,1) 100%);
	background: linear-gradient(to bottom right, rgba(244,191,255,1) 0%, rgba(216,191,255,1) 50%, rgba(191,255,241,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f4bfff",endColorstr="#bffff1",GradientType=1);
	color: black !important;
}


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

.content-white a:link
{
	color: var(--quickscope_blue);
	font-weight: 600;
}

.content-white a:visited
{
	color: var(--quickscope_blue);
	font-weight: 600;
}




.content-qs-purple
{
	background-color: var(--quickscope_purple);
	color: white;
	padding:20px;
	text-align: center;
}

.content-qs-purple a:link
{
	color: white;
	font-weight: 600;
}

.content-qs-purple a:visited
{
	color: white;
	font-weight: 600;
}

.content-qs-purple .button
{
	background: rgba(210,0,255,1);
	background: -webkit-linear-gradient(to bottom right, rgba(244,191,255,1) 0%, rgba(216,191,255,1) 50%, rgba(191,255,241,1) 100%);
	background: -o-linear-gradient(to bottom right, rgba(244,191,255,1) 0%, rgba(216,191,255,1) 50%, rgba(191,255,241,1) 100%);
	background: linear-gradient(to bottom right, rgba(244,191,255,1) 0%, rgba(216,191,255,1) 50%, rgba(191,255,241,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f4bfff",endColorstr="#bffff1",GradientType=1);
	color: black !important;
}

.content-qs-purple .button:hover
{
	background: white !important;
	color: black !important;
}

.content-qs-purple .button:active
{
	background: white !important;
	color: black !important;
}




.content-qs-blue
{
	background-color: var(--quickscope_blue);
	color: white;
	padding:20px;
	text-align: center;
}

.content-qs-blue a:link
{
	color: white;
	font-weight: 600;
}

.content-qs-blue a:visited
{
	color: white;
	font-weight: 600;
}

.content-qs-blue .button
{
	background: rgba(210,0,255,1);
	background: -webkit-linear-gradient(to bottom right, rgba(244,191,255,1) 0%, rgba(216,191,255,1) 50%, rgba(191,255,241,1) 100%);
	background: -o-linear-gradient(to bottom right, rgba(244,191,255,1) 0%, rgba(216,191,255,1) 50%, rgba(191,255,241,1) 100%);
	background: linear-gradient(to bottom right, rgba(244,191,255,1) 0%, rgba(216,191,255,1) 50%, rgba(191,255,241,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f4bfff",endColorstr="#bffff1",GradientType=1);
	color: black !important;
}

.content-qs-blue .button:hover
{
	background: white !important;
	color: black !important;
}

.content-qs-blue .button:active
{
	background: white !important;
	color: black !important;
}




.content-qs-cyan
{
	background-color: var(--quickscope_cyan);
	color: black;
	padding:20px;
	text-align: center;
}

.content-qs-cyan a:link
{
	color: var(--quickscope_blue);
	font-weight: 600;
}

.content-qs-cyan a:visited
{
	color: var(--quickscope_blue);
	font-weight: 600;
}

.content-qs-cyan .button:hover
{
	background: white !important;
	color: black !important;
}

.content-qs-cyan .button:active
{
	background: white !important;
	color: black !important;
}




.content-qs-gradient
{
	background: rgba(210,0,255,1);
	background: -webkit-linear-gradient(to bottom right, rgba(210,0,255,1) 0%, rgba(100,0,255,1) 50%, rgba(0,255,200,1) 100%);
	background: -o-linear-gradient(to bottom right, rgba(210,0,255,1) 0%, rgba(100,0,255,1) 50%, rgba(0,255,200,1) 100%);
	background: linear-gradient(to bottom right, rgba(210,0,255,1) 0%, rgba(100,0,255,1) 50%, rgba(0,255,200,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#d200ff",endColorstr="#00ffc8",GradientType=1);
	color: white;
	padding: 20px;
	text-align: center;
}

.content-qs-gradient a:link
{
	color: white;
	font-weight: 600;

}

.content-qs-gradient a:visited
{
	color: white;
	font-weight: 600;
}

.content-qs-gradient .button
{
	background: rgba(210,0,255,1);
	background: -webkit-linear-gradient(to bottom right, rgba(244,191,255,1) 0%, rgba(216,191,255,1) 50%, rgba(191,255,241,1) 100%);
	background: -o-linear-gradient(to bottom right, rgba(244,191,255,1) 0%, rgba(216,191,255,1) 50%, rgba(191,255,241,1) 100%);
	background: linear-gradient(to bottom right, rgba(244,191,255,1) 0%, rgba(216,191,255,1) 50%, rgba(191,255,241,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f4bfff",endColorstr="#bffff1",GradientType=1);
	color: black !important;
}

.content-qs-gradient .button:hover
{
	background: white !important;
	color: black !important;
}

.content-qs-gradient .button:active
{
	background: white !important;
	color: black !important;
}



.content-qs-gradient-light
{
	background: rgba(210,0,255,1);
	background: -webkit-linear-gradient(to bottom right, rgba(244,191,255,1) 0%, rgba(216,191,255,1) 50%, rgba(191,255,241,1) 100%);
	background: -o-linear-gradient(to bottom right, rgba(244,191,255,1) 0%, rgba(216,191,255,1) 50%, rgba(191,255,241,1) 100%);
	background: linear-gradient(to bottom right, rgba(244,191,255,1) 0%, rgba(216,191,255,1) 50%, rgba(191,255,241,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f4bfff",endColorstr="#bffff1",GradientType=1);
	color: black;
	padding: 20px;
	text-align: center;
}

.content-qs-gradient-light .button:hover
{
	background: white !important;
	color: black !important;
}

.content-qs-gradient-light .button:active
{
	background: white !important;
	color: black !important;
}

.content-qs-gradient-light a:link
{
	color: var(--quickscope_blue);
	font-weight: 600;
}

.content-qs-gradient-light a:visited
{
	color: var(--quickscope_blue);
	font-weight: 600;
}


.content-qs-gradient-purple-100-25
{
	background: rgb(210,0,255);
	background: -moz-linear-gradient(135deg, rgba(210,0,255,1) 0%, rgba(244,191,255,1) 100%);
	background: -webkit-linear-gradient(135deg, rgba(210,0,255,1) 0%, rgba(244,191,255,1) 100%);
	background: linear-gradient(135deg, rgba(210,0,255,1) 0%, rgba(244,191,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#d200ff",endColorstr="#f4bfff",GradientType=1);
	color: white;
	padding: 20px;
	text-align: center;
}

.content-qs-gradient-blue-100-25
{
	background: rgb(100,0,255);
	background: -moz-linear-gradient(119deg, rgba(100,0,255,1) 0%, rgba(216,191,255,1) 100%);
	background: -webkit-linear-gradient(119deg, rgba(100,0,255,1) 0%, rgba(216,191,255,1) 100%);
	background: linear-gradient(119deg, rgba(100,0,255,1) 0%, rgba(216,191,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#6400ff",endColorstr="#d8bfff",GradientType=1);
	color: white;
	padding: 20px;
	text-align: center;
}

.content-qs-gradient-cyan-100-25
{
	background: rgb(0,255,200);
	background: -moz-linear-gradient(119deg, rgba(0,255,200,1) 0%, rgba(191,255,241,1) 100%);
	background: -webkit-linear-gradient(119deg, rgba(0,255,200,1) 0%, rgba(191,255,241,1) 100%);
	background: linear-gradient(119deg, rgba(0,255,200,1) 0%, rgba(191,255,241,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00ffc8",endColorstr="#bffff1",GradientType=1);
	color: black;
	padding: 20px;
	text-align: center;
}



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

.content-blog-entry a:link
{
	color: black !important;
	text-decoration: none;
}

.content-blog-entry a:hover{
	color: black !important;
	text-decoration: underline;
}

.content-blog-entry a:visited{
	color: black !important;
	text-decoration: none;
}

/* -----------------------
ICON GRAPHIC
------------------------*/
.icon-graphic
{
	padding-left: 20px;
	padding-right: 20px;
}

.icon-graphic img
{
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 5px;
	margin-right: 5px;
	height: 70px;
}

.icon-graphic-large
{
	padding-left: 10px;
	padding-right: 10px;
}

.icon-graphic-large img
{
	margin-top: 10px;
	margin-bottom: 10px;
	height: 140px;
}


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

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


/* -----------------------
PROFILE IMAGE
------------------------*/
.profile-image
{
	width: 140px;
    height: 140px;
	border-radius: 50%;
    overflow: hidden;
	margin: auto;
	margin-top: 10px;
	margin-bottom: 20px;
}

.profile-image img
{
	width: 140px;
	height: 140px;
}


.profile-image-small
{
	width: 70px;
    height: 70px;
	border-radius: 50%;
    overflow: hidden;
	margin: auto;
	margin-top: 10px;
	margin-bottom: 20px;
}

.profile-image-small img
{
	width: 70px;
	height: 70px;
}



/* -----------------------
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: 20px;
  background: white;
  font-family: 'Readex Pro', sans-serif;
  font-weight: 300;
  font-size: 14px;
}

/* -----------------------
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: 20px;
  background: white;
  font-family: 'Readex Pro', sans-serif;
  font-weight: 300;
  font-size: 14px;
}

/* -----------------------
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: 20px;
  background: white;
  font-family: 'Readex Pro', sans-serif;
  font-weight: 300;
  font-size: 14px;
}


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

input[type=submit] {
  /* Remove First */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  
  /* Then Style */
  display: inline-block;
  padding: 10px 20px;
  text-align: center;
  font-family: 'Readex Pro', sans-serif;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  text-decoration: none;
  border: none;
  }

input[type=submit]:hover {
	color: white !important;
	background: black;
}

input[type=submit]:active {
	color: white !important;
	background: black;
}

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: 600;
}

@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;
  }
}


/* -----------------------
FORM - ANTI SPAM
------------------------*/

.antispam {
display:none;
}


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

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

/*  COLUMN SETUP  */
.col
{
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
	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: 75px;
    width:100%;
	font-size: 15px;
	font-weight: 600;
	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: black;
}

.nav ul a:hover{
	color: white !important;
}

.nav li:hover{
	background: rgba(210,0,255,1);
	background: -webkit-linear-gradient(to bottom right, rgba(210,0,255,1) 0%, rgba(100,0,255,1) 50%, rgba(0,255,200,1) 100%);
	background: -o-linear-gradient(to bottom right, rgba(210,0,255,1) 0%, rgba(100,0,255,1) 50%, rgba(0,255,200,1) 100%);
	background: linear-gradient(to bottom right, rgba(210,0,255,1) 0%, rgba(100,0,255,1) 50%, rgba(0,255,200,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#d200ff",endColorstr="#00ffc8",GradientType=1);
}

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


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

.nav .menu-icon{
	padding-top: 36px;
	padding-right: 20px;
	height: 75px;
    position:relative;
    float:right;
    cursor: pointer;
}

.nav .menu-icon .nav-icon{
	background: rgb(210,0,255);
	background: -moz-linear-gradient(90deg, rgba(210,0,255,1) 0%, rgba(100,0,255,1) 50%, rgba(0,255,200,1) 100%);
	background: -webkit-linear-gradient(90deg, rgba(210,0,255,1) 0%, rgba(100,0,255,1) 50%, rgba(0,255,200,1) 100%);
	background: linear-gradient(90deg, rgba(210,0,255,1) 0%, rgba(100,0,255,1) 50%, rgba(0,255,200,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#d200ff",endColorstr="#00ffc8",GradientType=1);
    display:block;
    height:3px;
    width:35px;
	position:relative;
    transition:background .2s ease-out;
}

.nav .menu-icon .nav-icon:before{
	background: rgb(210,0,255);
	background: -moz-linear-gradient(90deg, rgba(210,0,255,1) 0%, rgba(100,0,255,1) 50%, rgba(0,255,200,1) 100%);
	background: -webkit-linear-gradient(90deg, rgba(210,0,255,1) 0%, rgba(100,0,255,1) 50%, rgba(0,255,200,1) 100%);
	background: linear-gradient(90deg, rgba(210,0,255,1) 0%, rgba(100,0,255,1) 50%, rgba(0,255,200,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#d200ff",endColorstr="#00ffc8",GradientType=1);
    content:"";
    display:block;
    height:100%;
    width:100%;
    position:absolute;
    transition:all .2s ease-out;
    top:14px;
}

.nav .menu-icon .nav-icon:after{
	background: rgb(210,0,255);
	background: -moz-linear-gradient(90deg, rgba(210,0,255,1) 0%, rgba(100,0,255,1) 50%, rgba(0,255,200,1) 100%);
	background: -webkit-linear-gradient(90deg, rgba(210,0,255,1) 0%, rgba(100,0,255,1) 50%, rgba(0,255,200,1) 100%);
	background: linear-gradient(90deg, rgba(210,0,255,1) 0%, rgba(100,0,255,1) 50%, rgba(0,255,200,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#d200ff",endColorstr="#00ffc8",GradientType=1);
    content:"";
    display:block;
    height:100%;
    width:100%;
    position:absolute;
    transition:all .2s ease-out;
    top:-14px;
}

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

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

.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: 27.5px;
	height: 75px;
}
	
.nav li{
	float:left;
}


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

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

.nav{
	height: 75px;
}	
}


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


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