@charset "UTF-8";

/*! normalize.css v3.0.2 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:none;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}


/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */

body {
  font-size: .9em; 
  line-height: 1.5;
  font-weight: normal;
font-family: 'Roboto', sans-serif;
  color: #222;
  background-color: #0077c8;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing:grayscale;
  }
 


.background {
    position: absolute;
    top:0;
    bottom:0;
    right:0;
    Left:0;
    background: url("../images/Experience-CoupleKayak.jpg")  no-repeat left center;
    background-size: cover;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.index .background {justify-content: flex-start;}


.logo {width: 100%; margin-bottom: 30px; }

.content {width: 350px; max-width: 90%; position: absolute; top:7%; right: 10%;}

.panel {
    width: auto; 
    min-width: 500px; max-width: 100%;
    max-height: 100vh;
    box-sizing: border-box; padding: 40px 60px 30px 40px; text-align: center; background-color: #0077c8; color: #ffffff;
    font-size: 1.6em;
    border-right: 10px solid #ffcf45;}

.panel .logo {width: 80%;}

.panel hr {
  margin: 1.5em auto;
    width: 75%;
  border-width: 0;
  border-top: 3px solid #ffcf45; }





/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Font Awesome */
.iconFont, .iconFontLarger		{ font-family: FontAwesome; font-style: normal; font-weight: normal; font-variant: normal; }
.iconFontLarger					{ font-size:2.8em; vertical-align:-.2em; }

h1, h2, h3, h4, h5, h6 { margin-top: .5em; margin-bottom:.2em; }

h1 { font-size: 2.3em;  line-height: 1.2;  }
h2 { font-size: 2 em;   line-height: 1.25;  }
h3 { font-size: 1.8 em; line-height: 1.3;   }
h4 { font-size: 1.5em;  line-height: 1.35;  }
h5 { font-size: 1.2 em; line-height: 1.5;   }
h6 { font-size: 1em;    line-height: 1.6; font-weight:bold;   }


p {margin: 0 0 .6em 0; hanging-punctuation: first;}

.smallText {
	font-size: 11px;
	color: #999;
	margin:2px 0 2px 0;
	line-height:normal;
}

.smaller {font-size:85%;}
.larger {font-size:120%;}
	
.alignCenter	{text-align:center;}
.alignLeft		{text-align:left;}
.alignRight		{text-align:right;}
.alignLeftMobileCenter		{text-align:left;}
.alignRightMobileCenter		{text-align:right;}
.alignTop		{vertical-align: top;}


@media only screen and (max-width: 767px) {
	.alignLeftMobileCenter		{text-align:center;}
	.alignRightMobileCenter		{text-align:center;}	
}





/* #Buttons
---------------------------------------------------------- */
.button, a.button,
	button,
	input[type="submit"],
	input[type="reset"],
	input[type="button"] {
		display:inline-block;
		font-family: sans-serif;
		font-size:1em;
		padding: 10px 20px;
		line-height:1.3em;
		width: auto;
		margin: 4px 0;
		text-transform: uppercase;
 		text-decoration: none;		border: none;
		-moz-border-radius: 6px;
		-webkit-border-radius: 6px;
		border-radius: 6px;
		transition:all .2s;
		box-sizing: border-box;
		color: #ffffff;
		background: #59b940;
		-webkit-appearance: none;
		}
		

.button:hover,
	button:hover,
	input[type="submit"]:hover,
	input[type="reset"]:hover,
	input[type="button"]:hover {
		background:#3c5575;
		border:none;
		}

.button:active,
	button:active,
	input[type="submit"]:active,
	input[type="reset"]:active,
	input[type="button"]:active {
		background:#3c5575;
		border:none;
		}
		
a:link.button, a:visited.button {color: #ffffff; background-color:#59b940; text-decoration: none; transition:all .2s;}

a:hover.button, a:focus.button, a:active.button { color: #ffffff; background-color:#3c5575; text-decoration: none; }		
		
.button.large, a.button.large,
	button.large,
	input[type="submit"].large,
	input[type="reset"].large,
	input[type="button"].large {
		font-size:1.3em;
		line-height:1.4em;
		padding: 10px 25px;
		max-width:100%;
		overflow:hidden;
		white-space:nowrap;
		 }	

.panel a.button { width: 80%;}



	/* #Media Queries
================================================== */

	.mobileOnly, #mobileMenuTrigger {display:none;}



	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {
		
		
	}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {
		
		
	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
		
	
		.background {
    position:relative;
    width: 100%;
    top:0;
    bottom:0;
    right:0;
    Left:0;
    background: url("/images/surf-mobile-background.jpg") no-repeat center center;
    background-size: cover;
    display: block;
    justify-content: center;
    align-items: center;
    
}
        
.panel {max-width: 100%; border: none; min-width: 300px}
        
.panel a.button { width: 90%;}
        
        
        
				
	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
		
		
	}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
		
		
	}