/*
* Skeleton V2.0.4
* Copyright 2014, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 12/29/2014
*/


/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Grid
- Base Styles
- Typography
- Links
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Custom Code
- Media Queries
*/


/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
  position: relative;
  width: 100%;
    max-width: 1424px;
  margin: 0 auto;
  padding: 0 0px;
  box-sizing: border-box; }
.container2 {
  width: 100%;
   min-height: 30vh;
	display: flex;
	align-items: center;
	justify-content: center;
   }
.column,
.columns {
  width: 100%;
  display: inline-block;
  box-sizing: border-box;
  vertical-align: top; }

/* For devices larger than 400px */



/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
  font-size: 62.5%; }
body {
     font-size: 15px;
  line-height: 1.6;
      color: #8b8987;
	  background: white;
    font-family: poppins, sans-serif;
font-weight: 400;
font-style: normal;
 }


/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 5px;
    font-weight: 100;
letter-spacing: -1px;
line-height: 40px;}
h1 { font-size: 2.2em;}
h2 { font-size: 1.5em; }
h3 { font-size: 1.25em; }
h4 { font-size: 1.10em;}
h5 { font-size: 1.05em;  }
h6 { font-size: 1em;   }
h1, h3, h5{
	color:#99b2c5;
	font-family: poppins,sans-serif;
font-weight: 200;
font-style: normal;
}
h3{
	color:#8b8987;
	font-family: poppins,sans-serif;
font-weight: 200;
font-style: normal;
}
h2, h4, h6 {
    color: #ffffff;
	font-family: poppins,sans-serif;
font-weight: 200;
font-style: normal;
	padding-bottom: 14px;
}
/*h3, h4, h5, h6 {
    line-height: 20px;
    margin-bottom: 0px;
}*/
@media (min-width: 1001px) {
  h1 {font-size: 2.4em; }
  h2 { font-size: 2.1em; }
  h3 { font-size: 1.75em; }
  h4 { font-size: 1.5em; }
  h5 { font-size: 1.25em; }
  h6 { font-size: 1em; }
}

p {
  margin-top: 0; }

/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
	color: black;
    -webkit-transition: color .15s linear;
    -moz-transition: color .15s linear;
    -ms-transition: color .15s linear;
    -o-transition: color .15s linear;
    transition: color .15s linear;
    text-decoration: none;
}
a:hover {
  color: #99b2c5;
}

/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button, button, input[type="submit"], input[type="reset"], input[type="button"] {
    display: inline-block;
    height: 38px;
    padding: 0 30px;
    color: white;
    text-align: center;
    font-size: 14px;
    line-height: 38px;
    letter-spacing: .1rem;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    cursor: pointer;
    box-sizing: border-box;
    background: #C09B62;
    border: none;
}
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
     color: black;
    outline: 0;}
.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
  color: #FFF;
  background-color: #33C3F0;
  border-color: #33C3F0; }
.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
  color: #FFF;
  background-color: #1EAEDB;
  border-color: #1EAEDB; }


/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  height: 38px;
  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
  background-color: #fff;
  border: 1px solid #D1D1D1;
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box; }
/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; }
textarea {
  min-height: 65px;
  padding-top: 6px;
  padding-bottom: 6px; }
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border: 1px solid #33C3F0;
  outline: 0; }
label,
legend {
  display: block;
  margin-bottom: .5rem;
  font-weight: 600; }
fieldset {
  padding: 0;
  border-width: 0; }
input[type="checkbox"],
input[type="radio"] {
  display: inline; }
label > .label-body {
  display: inline-block;
  margin-left: .5rem;
  font-weight: normal; }


/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
  list-style: circle inside; }
ol {
  list-style: decimal inside; }
ol, ul {
  padding-left: 0;
  margin-top: 0; }
ul ul,
ul ol,
ol ol,
ol ul {
  margin: 1.5rem 0 1.5rem 3rem;
  font-size: 90%; }
li {
  margin-bottom: 0.5rem;
color: white;
font-weight: 400;}


/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
  padding: .2rem .5rem;
  margin: 0 .2rem;
  font-size: 90%;
  white-space: nowrap;
  background: #F1F1F1;
  border: 1px solid #E1E1E1;
  border-radius: 4px; }
pre > code {
  display: block;
  padding: 1rem 1.5rem;
  white-space: pre; }


/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
th,
td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #E1E1E1; }
th:first-child,
td:first-child {
  padding-left: 0; }
th:last-child,
td:last-child {
  padding-right: 0; }


/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button,
.button {
  margin-bottom: 1rem; }
input,
textarea,
select,
fieldset {
  margin-bottom: 1.5rem; }
pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {
  margin-bottom: 2.5rem; }


/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
  width: 100%;
  box-sizing: border-box; }
.u-max-full-width {
  max-width: 100%;
  box-sizing: border-box; }
.u-pull-right {
  float: right; }
.u-pull-left {
  float: left; }


/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
  margin-top: 3rem;
  margin-bottom: 3.5rem;
  border-width: 0;
  border-top: 1px solid #E1E1E1; }


/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both; }

.clear{
	clear:both;
}
/* Custom Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.tooltip {
	position: relative;
		
}
.tooltip:before, .tooltip:after {
	position: absolute;
	content: '';
	transition: all 0.4s ease;
	opacity: 0;
}
.tooltip:before {

	top: -669px;
	transform: translateY(20px);
}
.tooltip:after {
	content: attr(data-tooltip);
	background: #f5f5f5;
	width: 200px!important;
	height: 40px;
	font-size: 20px;
	font-weight: 300;
	color: #000;
	left: -5px;
	padding: 10px;
	border-radius: 5px;
	transform: translateY(20px);
}
.tooltip:hover:before, .tooltip:hover:after {
	transform: translateY(-2px);
	opacity: 1;
}
.fRight{
	float:right;
	margin-left: 45px
}
.fLeft{
	float:left;
	margin-right: 45px;
}
.fullWidth{
width:100%;
}
.txtLeft{
	text-align:left	;
}
.txtRight{
	text-align:right;
}
.txtCenter{
	text-align:center;
}
.txtCenterImp{
  text-align:center!important;
}
.blockCenter{
	margin:0 auto;
	display:block;
}
.boldTxt{
	font-weight:bold;
}

.noLeftMargin{
	margin-left: 0!important;
}
.middleVert{
  vertical-align: middle!important;
}
.homeVideo{
float: none;
padding: 0 0 45px 0;
max-width: 100%;
height: auto;
min-height: 237px;
position: relative;
margin: 0 auto;
display: block;
}
.gallery{
	display: grid;
	grid-template-columns: repeat(5, 250px);
	grid-gap: 30px;
}
.gallery img{
	width: 100%;
}
.homeImgs img {
    max-width: 100%;
    margin: 0 auto;
    display: block;
}
.scrollToTop {
    width: 30px;
    height: 30px;
    padding: 10px;
    text-align: center;
    background: whiteSmoke;
    font-weight: bold;
    color: #444;
    text-decoration: none;
    position: fixed;
    bottom: 35px;
    right: 10px;
    display: none;
    z-index: 999;
    border-radius: 100%;
}

.scrollToTop:hover {
    text-decoration: none;
}
.largeFont{
  font-size: 22px;
}

.invisImg{
  max-width: 270px;
  margin: 0 auto;
}
.emTxt{
    font-style: italic;
}
.headerBtn {
    cursor: pointer;
    width: 100%;
    max-width: 220px;
    text-align: center;
    background: #fff;
    border: solid 1px #dbd4ad;
    display: inline-block;
    align-content: right;
    color: #ad846c;
    width: 200px;
    padding: 10px;
}
.headerBtn a {
    padding: 10px 20px;
    box-sizing: border-box;
    cursor: pointer;
    color: #ad846c;
    
}
.headerBtn a:hover {
    color: #efc9b3!important;
}
.header__right {
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
    text-align: right;
    display: inline-block;
    margin-left: 17px;
    margin-bottom: 10px;
}
.headerBtns {
    float: right;
    width: 485px;
}
@media (max-width: 768px) { .header__right { text-align: center; } }
.mainBtn {
    cursor: pointer;
    width: 100%;
    max-width: 270px;
    text-align: center;
    border: solid 1px #99b2c5;
	background: #ffffff;
}
.mainBtn a {
    padding: 10px 20px;
    box-sizing: border-box;
    cursor: pointer;
    color: #99b2c5;
    display: block;
}
.mainBtn a:hover {
    background: #f5f5f5;
}
.mainBtn2 {
    cursor: pointer;
	padding: 10px 20px;
    width: 100%;
    min-width: 350px;
    text-align: center;
	 color: white;
	background-color: #2484bc;
    border: solid 1px #2484bc;
}
.mainBtn2 a {
    padding: 10px 20px;
    box-sizing: border-box;
    cursor: pointer;
    color: white;
    display: block;
}
.mainBtn2 a:hover {
    background-color: #a7a7a7;
	color: #ffffff;
}
.smiles img {
    width: 90%;
}
.grayBorder{
  border: solid 1px gray;
}

header {
    width: 100%;
    background-size: contain;
    background-repeat: repeat-x;
    z-index: 999;
    background-position: center;
    border-bottom: solid 3px white;
  background: white;
}
.show-menu:after {
    content: 'Show Menu';
}
input[type=checkbox]:checked ~ .show-menu:after {
    content: 'Close Menu';
}
.relative{
  position: relative;
}
.contactInfo {
    font-size: 20px;
    font-size: 1em;
	font-weight: bold;
    text-transform: uppercase;
    text-align: right;
    margin-bottom: 8px;
    color: white;
    line-height: 24px;
    padding-bottom: 5px;
    clear: both;
}
.contactInfo a {
    text-decoration: none;
    font-size: 20px;
    color: #8b8987;
}
.contactNumber a {
color: #F07525;
    text-decoration: none;
    font-weight: bold;
    font-size: 23px;
    font-size: 1.35em;
}
.logo {
    width: 100%;
    max-width: 340px;
    padding: 10px 0;
    box-sizing: border-box;
}

/* Navigation Styles. */
/*.navContainer {
    background: #39438a;
    outline: #676ea5 5px double;
}*/
/*.navContainer {
    width: 860px;
}*/

.headerImg {
    position: relative;
        top: 10px;
}
nav{
    position: relative;
    display: block;
    margin: 0 auto;
	height: 30px;
}
/*Strip the ul of padding and list styling*/
.navigation {
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: absolute;
    width: 100%;
    text-align: right;
    padding: 0 0px;
    box-sizing: border-box;
}

/*Create a horizontal list with spacing*/
.navigation li {
    display: inline-block;
    margin-bottom: 0;
    position: relative;
}

/*Style for menu links*/
.navigation li a {
	display:block;
	background: none;
	text-decoration: none;
-webkit-transition: color .15s linear;
    -moz-transition: color .15s linear;
    -ms-transition: color .15s linear;
    -o-transition: color .15s linear;
    transition: color .15s linear;
	text-align: left;
    color: black;
	box-sizing: border-box;
font-size: 15px;
    font-size: 1em;
    padding: 0 15px;
    height: 30px;
    line-height: 30px;
    color: #486e8f;
    line-height: 40px;
}
.navigation li ul li a {
    background: white;
    color: #ad846c;
    height: 40px;
    line-height: 40px;
    -webkit-transition: color .15s linear;
    -moz-transition: color .15s linear;
    -ms-transition: color .15s linear;
    -o-transition: color .15s linear;
    transition: color .15s linear;
}
/*Hover state for top level links*/
.navigation li:hover a {
    color: #999;
}
/*Hover state for second level links*/
.navigation li:hover ul {
    opacity: 1;
    visibility: visible;
	z-index: 999;
}
/*transitions second level links*/
.navigation li ul {
    opacity: 0;
    position: absolute;
    visibility: hidden;
    z-index: 1;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
    margin-top: 0;
	width: auto;
}
/*Style for dropdown links*/
.navigation li:hover ul a {
    height: 40px;
    line-height: 40px;
    background: white;
    color: #486e8f;
    font-size: 13px;
}
/*Hover state for dropdown links*/
.navigation li:hover ul a:hover {
    color: #999;
}

/*Hide dropdown links until they are needed*/
.navigation li ul {
visibility: hidden;
padding: 0;
    margin: 0;
      padding-top: 5px;
}

/*Make dropdown links vertical*/
.navigation li ul li {
	display: block;
	float: none;
}

/*Prevent text wrapping*/
.navigation li ul li a {
	width: auto;
	min-width: 150px;
	padding:0 20px!important;
}

/*Display the dropdown on hover*/
.navigation li a:hover + .hidden, .hidden:hover {
visibility: visible;
}

.hiddenTwo {
    visibility: hidden!important;
    padding: 0!important;
    margin: 0!important;
    padding-top: 20px;
    left: 200px;
    top: 0;
}

.hidden li a:hover + .hiddenTwo, .hiddenTwo:hover{
    visibility: visible!important;
}

.subMenu {
    position: relative!important;
    padding: 0!important;
}

/*Style 'show menu' label button and hide it by default*/
.show-menu {
	text-decoration: none;
	text-align: center;
	padding: 10px 0;
	display: none;
    margin: 0 auto;
    border-top: solid 1px #e4e4e4;
    margin-top: 10px;
    color: #99b2c5;
}

/*Hide checkbox*/
input[type=checkbox]{
    display: none;
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
    display: block;
}
/*.navContainer, nav, .navigation{
	    width: 880px;
}*/
.hidden li {
    width: 230px;
    left: 0;
}
#firstLink {
    padding-left: 0;
}
#lastLink {
    padding-right: 0;
}
nav{
        width: 800px;
    float: right;
}
.headerFb{
      float: right;
}
.headerFb a{
   color:white;
}
.cycle-slideshow, .cycle-slideshow img {
  width: 100%;
}
/*.cycle-slideshow {
max-height: 454px; /* Must be full height of slideshow images, if having a white space between image and bottom border, adjust this value
}*/
.cycle-slide {
    width: 100%;
}
.homeTest {
    max-width: 845px;
    margin: 50px auto;
    width: 90%;
	text-align: center;
}
.homeTest p{
    font-size: 48px;
	font-family: poppins, sans-serif;
font-weight: 200;
font-style: normal;

}
.smallItalics{
      font-size: 18px!important;
    font-size: .68em;
    font-style: italic;
}

.left-chevron{
      width: 0;
    height: 0;
    display: inline-block;
    vertical-align: middle;
    border-top: 25px solid transparent;
    border-left: 20px solid #8689ad;
    border-bottom: 25px solid transparent;
}
main, footer {
    position: relative;
}
main p {
    font-size: 18px;
}

.learnMore{
  margin: 30px auto;
}



.grayBg {
	background: #1d1d1d;
	padding: 100px 0;
	color: white;
}

.mainCopy{
	    max-width: 1224px;
    width: 100%;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}


.tealBgSupportComp {
    background-image: url("../images/support-cotton-candy1.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	border-top: solid 0px #ffffff;
    padding: 20px 0 20px 0;
    box-sizing: border-box;
	margin: 0px auto 0 auto;
	min-height: 646px;
}
.tealBgSupportComp p{
    color: #ffffff;
	font-size: 20px;
	margin-top: 40px;
	line-height: 26px;
	font-weight: 300;
}
.tealBgSupportComp h2{
    color: #ffffff;
	margin-top: 20px;
}
.shavedBgSupportComp {
    background-image: url("../images/support-shaved-ice.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	border-top: solid 0px #ffffff;
    padding: 20px 0 20px 0;
    box-sizing: border-box;
	margin: 0px auto 0 auto;
	min-height: 646px;
}
.shavedBgSupportComp p{
    color: #ffffff;
	font-size: 20px;
	margin-top: 40px;
	line-height: 26px;
	font-weight: 300;
}
.shavedBgSupportComp h2{
    color: #ffffff;
	margin-top: 20px;
}
.contactCopy h1{
	    color:#99b2c5;
	font-size: 60px;
font-weight: 200;
	margin: 40px 0 20px 0;
}

.ltgraySupportComp{
	background-color: #f5f5f5;
	border-top: solid 0px #ffffff;
    padding: 30px 0 20px 0!important;
    box-sizing: border-box;
	margin: 0px auto 0 auto;
	min-height: 540px;
	line-height: 14px;
}
.ltgraySupportComp h1{
	padding: 20px 0px;
}
.ltgraySupportComp p{
	    color:#fff;
	font-weight: 400;
	font-size: 24px;
	line-height: 14px;
}
.ltgraySupportComp img{
	border: 1px solid #777777;
}
.surfboardCopy{
	padding: 30px 200px 0px 200px!important;
}
.contactSupportComp{
	background-color: #fff;
	border-top: solid 0px #ffffff;
    padding: 30px 20px 20px 20px!important;
    box-sizing: border-box;
	margin: 0px auto 0 auto;
	min-height: 540px;
	line-height: 14px;
}
.contactSupportComp p{
	    color:#8b8987;
	font-weight: 400;
	font-size: 24px;
	line-height: 16px;
	padding-bottom: 20px;
}
.contactSupportComp h1{
	padding: 40px 0px;
}
.contactSupportComp h4{
	    color:#8b8987;
	font-weight: 400;
	font-size: 24px;
	line-height: 30px;
	padding-bottom: 30px;
}
.projectSupportComp{
	background-color: #fff;
    padding: 30px 20px 20px 20px!important;
    box-sizing: border-box;
	margin: 0px auto 0 auto;
	min-height: 540px;
}
.projectsSupportComp p{
	font-size: 14px;
}

gridGallery({
 selector: "#square-dark",
 darkMode: true,
 layout: "square",
 gapLength: 4,
 rowHeight: 180,
 columnWidth: 200
});

.mainCopy h2{
      color:#2484bc;
	font-size: 20px;
}
.mainCopy p{
	    color: #72b461;
}
.mainCopy img {
    max-width: 500px;
    display: block;
}
#website{
  display: none;
}

.formFields input,
.formFields select,
.formFields textarea {
    width: 50%;
    margin-bottom: 10px;
}
.welcome article p {
    color: black;
}
.welcome {
    background: #f5f5f5;
}

.cotton {
    background: #ffffff;
}
.cotton h2{
    color: #ffffff;
	font-size: 2.2px;
	margin-top: 20px;
}
.imgWe {
	position: relative;
left: 0;
right: 0;
bottom: 0;
	width: auto;
	height: 100px;
	max-height: 100%;
	max-width: 100%;
	margin: -78px auto 0;
}
.homeTests .two.columns {
    color: #bdbdbd;
}

.overlayTxt a {
    font-weight: bold;
}
main form input[type="checkbox"], main form input[type="radio"] {
    display: inline;
    width: auto;
}
main, footer {
    position: relative;
}
main {
    margin-top: 2px;
}
section {
    padding: 50px 0!important;
    box-sizing: border-box;
}
.aaSect {
    background-color: #e2e3e4;
        padding: 0!important;
}
.aaSect a{
    color: black;
}

.aaText {
    padding: 50px 0;
    margin: 0 auto;
    text-align: left;
    color: black;
}
.aaText p{
    
	font-size: 15px;
}
.aaText p:first-of-type {
    margin-top: 30px;
}
.ui-accordion-content p {
    font-size: 16px;
}
article {
    padding:0 30px!important;
}
.support header {
    top: 0;
}
.ui-accordion-header {
    color: white;
    font-size: 24px;
    line-height: 34px;
    cursor: pointer;
    outline: none;
    border: solid 1px white;
    border-radius: 10px;
}
.ui-accordion-content p {
    margin-top: 0!important;
    text-align: left!important;
}
.ui-accordion-header-active {
    color: #121212;
}
.ui-accordion-content ul {
    text-align: left;
}
.homeTest span {
    font-size: 16px;
}
.headTagline {
    max-width: 984px;
    width: 100%;
}

.footerLogos{
    font-size: 0;
}
.footerLogos img{
  width: 100%;
}
.footerMap{
  position: relative;
}
.footerOverlay{
    position: absolute;
    top: 0;
    bottom: 0;
    background: #7e7f81c7;
    left: 310px;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
    z-index: 99;
        color: white;
}
.footerOverlay a {
    color: white;
}
.overlayTxt {
    top: 10%;
    position: relative;
    font-size: 1.5vmax;
    line-height: 25px;
}
.mapIcon{
  display: inline-block;
}
.footerMap iframe {
    width: 100%;
    max-width: none;
}
footer {
    background: #8b8987;
    padding: 30px 0;
    color: white;
}
footer a {
    color: white;
}
footer .mainBtn {
    max-width: 310px;
}
footer ul {
    margin: 0;
    list-style: none;
}
.socialIcons {
    display: inline-block;
    margin-bottom: 30px;
    width: 10%;
}
.gMap{
width: 100%;
    max-width: 600px;
    margin: 0 auto;
    display: block;
    height: 280px;
}
.copyright {
    background: #8b8987;
    position: relative;
}
.copyright p{
	margin:0;
	text-align:center;
	color: white;
	font-size: 12px;
}
.copyright a{
	color: white;
}
.parallax {
  background-image: url("../images/largePhoto1.jpg");
  height: 450px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.parallaxTwo {
  background-image: url("../images/largePhoto2.jpg");
  height: 500px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
main ul {
    font-size: 18px;
}
.support main {
    margin-top: 150px;
}
.support-header main {
    margin-top: 5px;
}
.vertImg{
  max-width: 500px;
}
.offTour img {
    max-width: 500px;
    width: 100%;
    margin: 20px auto;
    display: block;
}
main a {
    color: #99b2c5;
}
main a:hover {
    color: #99b2c5;
}
.hours{
  width: 100%;
    font-size: 18px;
}
main {
    font-size: 18px;
}
.footerHours{
font-size: 18px;
    line-height: 20px;
	margin-top: 20px;
  }
.footerHours h2{
font-size: 24px;
    line-height: 20px;
	margin-top: 20px;
  }
/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/

@media screen and (min-width : 1101px){
.navigation{
	display:block!important;/* Fixes issue with desktop links keeping their mobile layout; media queries must follow each other (max = 930 & min = 931) */
}
}
/* For devices larger than 550px */
@media (min-width: 1100px) {
   .headerImg, main, footer, .reviewBg {
    position: relative;
}

  .container {
    width: 98%; }
  .column,
  .columns {
    margin-left: 3%; }
  .column:first-child,
  .columns:first-child {
    margin-left: 0; }

  .one.column,
  .one.columns                    { width: 4.66666666667%; }
  .two.columns                    { width: 13.3333333333%; }
  .three.columns                  { width: 22%;            }
  .four.columns                   { width: 30.6666666667%; }
  .five.columns                   { width: 39.3333333333%; }
  .six.columns                    { width: 48%;            }
  .seven.columns                  { width: 56.6666666667%; }
  .eight.columns                  { width: 65.3333333333%; }
  .nine.columns                   { width: 74.0%;          }
  .ten.columns                    { width: 82.6666666667%; }
  .eleven.columns                 { width: 91.3333333333%; }
  .twelve.columns                 { width: 100%; margin-left: 0; }

  .one-third.column               { width: 30.6666666667%; }
  .two-thirds.column              { width: 65.3333333333%; }

  .one-half.column                { width: 48%; }

  /* Offsets */
  .offset-by-one.column,
  .offset-by-one.columns          { margin-left: 8.66666666667%; }
  .offset-by-two.column,
  .offset-by-two.columns          { margin-left: 17.3333333333%; }
  .offset-by-three.column,
  .offset-by-three.columns        { margin-left: 26%;            }
  .offset-by-four.column,
  .offset-by-four.columns         { margin-left: 34.6666666667%; }
  .offset-by-five.column,
  .offset-by-five.columns         { margin-left: 43.3333333333%; }
  .offset-by-six.column,
  .offset-by-six.columns          { margin-left: 52%;            }
  .offset-by-seven.column,
  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
  .offset-by-eight.column,
  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
  .offset-by-nine.column,
  .offset-by-nine.columns         { margin-left: 78.0%;          }
  .offset-by-ten.column,
  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
  .offset-by-eleven.column,
  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }

  .offset-by-one-third.column,
  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }

  .offset-by-one-half.column,
  .offset-by-one-half.columns     { margin-left: 52%; }
}

@media screen and (max-width : 1400px){
.gallery{
	display: grid;
	grid-template-columns: repeat(3, 250px);
	grid-gap: 30px;
}
}
@media screen and (max-width : 1100px){
.smiles img {
    max-width: 300px!important;
}
  .homeTests .two.columns {
    display: none;
}
  .smiles img {
    max-width: 300px;
}
  .headerBtns {
    float: none;
    width: 100%;
    margin: 0 auto;
}
	.hidden li a:hover + .hiddenTwo, .hiddenTwo:hover {
    visibility: visible!important;
    position: relative;
    left: 0;
}
.support main, .support footer, .support .copyright {
    top: 0!important;
    margin: 0;
}
  header {
    background-position: inherit;
}
main, footer, .copyright {
    top: 25px;
}
.support .headerImg {
    margin-top: 210px;
}
.support main, .support footer, .support .copyright {
    top: 0;
}
.headerImg {
    position: relative;
        top: 40px;
}
  main iframe{
  width: 100%;
    max-width: 560px;
}
	.navContainer, nav, .navigation {
    width: 100%;
}

.logo {
    max-width: 200px;
}
	header .columns {
		text-align: center!important;
}
.contactInfo {
    text-align: center;
}
	nav {
	width: 100%;
  position: relative;
  height: auto;
	}
	/*Make dropdown links appear inline*/
	.navigation {
		position: static;
		display: none;
	}
	/*Create vertical spacing*/
	.navigation li {
		  display: block;
  float: none;
  margin-right: 1px;
      left: auto;
	}
.navigation li a {
    color: black;
}
	/*Make all menu links full width*/
.navigation li, li a {
    width: 100%;
    background: white;
}
.navigation li ul {
    width: 100%;
    left: 0;
    font-size: 13px;
}
	/*Display 'show menu' link*/
	.show-menu {
		display:block;
	}
	.navigation li a:hover + .hidden, .hidden:hover {
  max-width: 100%;
  position: relative;
	}
.navigation li:hover ul a {
    color: black;
    background: white;
    padding-left: 50px;
    font-size: 13px;
}
.navigation li:hover ul a:hover {
    color: #2484bc;
}
.parallaxTwo, .parallax {
    display: none;
}
#firstLink {
    padding-left: 6px;
}
#tabs li {
    width: 100%;
    box-sizing: border-box;
}
#tabs li a {
    width: 100%;
    background: none;
    display: block;
        box-sizing: border-box;
        outline: none!important;
}
.ui-tabs-panel img {
width: 100%;
    max-width: 442px;
    display: block;
    margin: 0 auto 20px auto;
}
header {
    background-position: inherit;
    background-size: unset;
    position: relative;
}
.smiles img {
    max-width: 90%;
}
.cottonCopy h1 {
    font-size: 45px;
line-height: 44px;
}
	.eventCopy h1 {
    font-size: 45px;
line-height: 44px;
}
	.eventCopy h3{
	   margin: 0px auto;
    display: block;
		width: 100%;
    text-align: center;
}
	.eventCopy p{
	   margin: 0px auto;
    display: block;
		width: 100%;
    text-align: center;
}
.praises{
  margin: 10px auto;
    display: block;
    max-width: 350px;
}
.invisImg{
  display: block;
}
.genServBoxes .servBtn {
    width: 100%!important;
    display: inline-block;
    margin: 0 auto 50px auto;
    max-width: 208px;
}
.genServBoxes,
 .cosServBoxes{
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
    text-align: center;
}
footer {
    text-align: center;
}
.tagline {
    width: 90%;
}
footer .mainBtn {
    margin: 0 auto;
}
footer ul {
    text-align: center;
    margin: 30px auto;
}
.headerFb {
    float: none;
}
.header__right {
    text-align: center;
}
.hiddenTwo li {
    padding-left: 20px;
    background: white;
}
	.contactCopy h1 {
    font-size: 30px;
    font-weight: 200;
    margin: 30px 0 20px 0;
}
}
@media screen and (max-width : 700px){
	.gallery{
	display: grid;
	grid-template-columns: repeat(1, 250px);
	grid-gap: 30px;
}
.footerOverlay {
    position: relative;
    left: 0;
}
.overlayTxt {
    line-height: 24px;
}
.projectsSupportComp img{
		width: 100%;
	height: 100%;
	max-width: 500px;
    display: block;
	
    margin: 20px auto;
	}
	.surfboardCopy{
	padding: 30px 50px 0px 50px!important;
}
.headerImg {
    position: relative;
        top: 0px;
}
	.mainCopy img {
    max-width: 500px;
    width: 100%;
    margin: 20px auto;
    display: block;
}
	.imgWe {
	display: none;
}
}