/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Normalize
# Typography
# Elements
# Containers
# Navigation
	## Links
	## Menus
# Forms
# Accessibility
# Alignments
# Clearings
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/
html {
	font-family: 'Open-Sans', sans-serif;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust:     100%;
	height: 100%;
	background-color: #404248;
}

body {
	margin: 0 auto;
	height: 100%;

}

article,
aside,
details,
figcaption,
figure,
footer,
header,
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;
}

b,
strong {
	font-weight: bold;
}

dfn {
	font-style: italic;
}

h1 {
	font-size: 2em;
	margin: 0.67em 0;
}


small {
	font-size: 80%;
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
	top: -0.5em;
}

sub {
	bottom: -0.25em;
}

img {
	border: 0;
}

svg:not(:root) {
	overflow: hidden;
}

figure {
	margin: 1em 40px;
}

hr {
	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: #3aafdf;
	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-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

fieldset {
	border: 1px solid #c0c0c0;
	margin: 0 2px;
	padding: 0.35em 0.625em 0.75em;
}

legend {
	border: 0;
	padding: 0;
}

textarea {
	overflow: auto;
}

optgroup {
	font-weight: bold;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

td,
th {
	padding: 0;
}

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/

@import url('http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,800');

body,
input,
select,
textarea {
	color: #58595b;
	font-family: 'Open-Sans', sans-serif;
	font-size: 16px;
	font-size: 1rem;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
	color: #404248;
	letter-spacing: .03em;
	text-align: center;

}

h1 { font-size: 2.4em; }
h2 { font-size: 2.2em; }
h3 { font-size: 2em; }
h4 { font-size: 1.8em; }
h5 { font-size: 1.6em; }
h6 { font-size: 1.4em; }


p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", Courier, monospace;
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
	font-size: 15px;
	font-size: 0.9375rem;
}



.major h2 {
		font-size: 3.2em;
		padding: 0;
		margin: 0;
		line-height: 1em;
}

.major h3 {
		font-size: 1.2em;
		padding: 0;
		margin: 0;
		line-height: 1.6em;
		color: #bcbec0;
}
		
	
header.major h2, 
{
	margin: 0 auto;
	padding: 0;
}

header.major p, 
{
	margin: 0 0 1.5em 0;
	position: relative;
}

.white {
	color:#fff;
}

.blue {
	color: #3aafdf;
}

.dkgrey {
	color: #58595b;
}

/* --- Icons --- */

	.icon {
		text-decoration: none;
		color:inherit;
	}

		.icon:before {
			display: inline-block;
			font-family: 'FontAwesome';
			font-size: 1.25em;
			text-decoration: none;
			font-style: normal;
			font-weight: normal;
			line-height: 1;
			-webkit-font-smoothing:antialiased;
			-moz-osx-font-smoothing:grayscale;
		}
		
		.icon > .label {
			display: none;
		}
		



/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
html {
	box-sizing: border-box;
}

*,
*:before,
*:after { 
	box-sizing: inherit;
}

body {
	background: #fff; 
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: "";
}

blockquote,
q {
	quotes: "" "";
}

hr {
	border-top: dotted 2px #00afec;
	border-bottom: none;
	margin-bottom: 1.5em;
	width: 60%;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

li:active, li:hover, li.active {
	color: #3aafdf;
}

dt {
	font-weight: bold;
}

dd {
	margin: 0 1.5em 1.5em;
}

img {
	height: auto; /* Make sure images are scaled correctly. */
	max-width: 100%; /* Adhere to container width. */
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}


.arrow-down {
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #fff;
}

.noclick {
    pointer-events: none;
}


	.backToTop {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 4em;
    height: 4em;
    cursor: pointer;
    z-index: 20;
    background: url('../imgs/assets/arrow.svg') no-repeat 0 0 #3aafdf;
	background-position: center center;
    border: 2px solid #fff;
}



@media screen and (max-width: 30em) {
	
	.mobhide {
		display: none
	}
	
	.backToTop {
		width: 0;
		height: 0;
		background: none;
		overflow: hidden;
		border: none;
		z-index:-1;
	}

}


/*--------------------------------------------------------------
# Containers
--------------------------------------------------------------*/


#band {
	width: 100%;
	margin: 0 auto;
	position: relative;
	clear:both;
}

.header {
	text-align:center;
	margin: 0 auto;
	margin-top: .5em;
	position: absolute;
	overflow:hidden;
	width: 100%;
}

		.header hr {
			width: 20%;
			display: inline-block;
			box-shadow: none;
		}


.attic, .top {
	display: block;
	position: relative;
	padding-top: 4em;
}

#nav {
	position: relative;
}

.logo {
	display: inline-block;
	margin: 0 auto;
	padding: .4em;
	position: relative;
	width:25%;
	min-height: 3.6em;
	background: url(../imgs/assets/logoblue.svg);
	background-repeat: no-repeat;
	background-position: center center;
}

	 .logo img {
		 display: inline-block;
		 position: absolute;
		 padding-top: .1em;
		 height: 100%;
		 top: 50%;
		 -webkit-transform: translate(-50%, -50%);
	     -ms-transform: translate(-50%, -50%);
	     transform: translate(-50%, -50%); 
	 	}
		

.links {
	position: relative;
	margin: 0 auto;
	background: #FFF;
	padding-top: 1em;
	bottom: 0;
	text-align: center;
}

	.links h1 {
		margin: 0;
		padding: 0;
	}

#portjump .mix {
	display: none;
}

.square {
    float:left;
    position: relative;
    width: 50%;
	width: calc(100% / 2); /* = width for a 1:1 aspect ratio */
    padding-bottom: 50%; /* = width for a 1:1 aspect ratio */
	padding-bottom: calc(100% / 2); /* = width for a 1:1 aspect ratio */
    overflow:hidden;
}


.thumbs {
    position:absolute;
	width: 100%;
}

	.thumbs img {
		width: 100%;
	}
	
	.thumbs .overlay {
		  position: absolute;
		  bottom: 0;
		  left: 0;
		  right: 0;
		  transition: all .5s;
		  overflow: hidden;
		  height: 0;
		  background: rgba(255, 0, 0, 0);	
		  }
	
	.thumbs:hover .overlay {
		display: block;
		background: rgba(0, 0, 0, .6);
		height: 100%;
		
	}
	
	.thumbs .overlay .caption {
		position: absolute;
		bottom: 0;
		color: #fff;
		padding: .6em;
		text-align: left;
	}

		.caption h3 {
			font-size: 1.4em;
			margin-after: .1em;
		}
		
		.caption h4 {
			color: #3aafdf;
			font-size: .8em;
			text-transform:uppercase;
			text-align: left;
			line-height: .8em;
		}
		
		.caption p {
			font-style:italic;
		}
		
.about {
	display: block;
	background: url(../imgs/home/aboutmob.jpg);
	background-attachment:fixed;
	background-size: cover;
	background-position: right center;
	padding: 1em;
	padding-top: 4em;
	color: #fff;
}
	.about h2 {
		color: #fff;
	}
	

.logofarm {
	display: block;
	position: relative;
	text-align:center;
	margin: 2em;
}
	.logofarm img {
		max-width: 8em;
	}
	
	.logofarm h3 {
		margin-bottom: 1.5em;
	}
	
.instagram {
	padding: 4em 1em;
	text-align: left;
	background-color: #fff;
}

		.instagram:after {
		content:'';
		position: absolute;
		top: 100%;
		left: 50%;
		margin-left: -2em;
		width: 0;
		height: 0;
		border-top: solid 2em #fff;
		border-left: solid 2em transparent;
		border-right: solid 2em transparent;
		z-index: 9;
	}
	

.gram {	
    float:left;
    position: relative;
    width: 50%;
	width: calc(100% / 2); /* = width for a 1:1 aspect ratio */
	line-height: 0;
	
}

	.gram img {
		min-width: 100%;
	}


.contact {
	color: #fff;
	text-align:center;
	margin: 0 auto;
	padding-bottom: 4em;
}
	.caption h3 {
		color: #fff;
		text-align: left;
		padding: 0;
		line-height: 1.1em;
	}
	
	.contact ul {
		width: 100%;
		margin: 0 auto;
		padding: 0;
	}

	
	.contact li {
		display:block;
		float: left;
		font-size: 2em;
		width: 33%;
		width: calc(100% / 3);
		transition: all .5s;
	}
	
	.contact li:active, .contact li:hover {
		color: #fff;
		font-size: 3em;
	}
	
	.contact a, .contact a:visited {
		color: #fff;
	}


 .copyright {
	 padding-top: 1em;
	 padding-bottom: 3em;
	 text-align:center;
	 background: #404248;
	 color: #b9e9fd;
	 font-size: .8em;
 }
 
 	.copyright a, .copyright a:visited {
		color: #fff;
	}
	
	.heart {
	position: relative;
	top: .4em;
}

	

.hero {
	background-color: #fff;
	margin: 0 auto;
	padding: 0;
	text-align:center;
	position: relative;
	width: 100%;
	height: 100%;
}

.hero:before, .hero:after {
 content: '';
  position: absolute;
  bottom: 0;
  width: 50%;
  box-sizing: border-box;
}
.hero:before {
  right: 50%;
  border-bottom: 2em solid #ddd;
  border-right: 2em solid transparent;
}
.hero:after {
  left: 50%;
  border-bottom: 2em solid #ddd;
  border-left: 2em solid transparent;
}
		.hero h1 {
			font-size: 3em;
		}
		
		.hero img {
			min-width: 100%;
			margin-bottom: -.4em;
		}
		
.sectionone {
	padding: 2em;
	text-align: left;
	background-color: #dddddd;
}

		.sectionone:after {
		content:'';
		position: absolute;
		top: 100%;
		left: 50%;
		margin-left: -2em;
		width: 0;
		height: 0;
		border-top: solid 2em #dddddd;
		border-left: solid 2em transparent;
		border-right: solid 2em transparent;
		z-index: 9;
	}
	
		.sectionone h3 {
			text-align: center;
			margin: 0em;
			padding: 0;
			color: #3aafdf;
		}
	
	
.sectiontwo {
	padding: 2em;
	padding-top: 4em;
	text-align: center;
	background-color: #fff;
}
	.sectiontwo img {
		position: relative;
		margin: 0 auto;
		margin-top: 2em;
	}
	
.sectionthree {
	padding: 2em;
	padding-top: 4em;
	text-align: center;
	background-color: #fff;
}
	.sectionthree img {
		position: relative;
		margin: 0 auto;
		margin-top: 2em;
	}

.details {
	padding-bottom: 2em;
}
	.details h3 {
		font-size: 1.2em;

	}

.features {
	padding: .8em;
	display: block;
}

	.features hr {
		float: center;
		width: 30%;
	}

.connect {
	background-color: #fff;
	margin: 0 auto;
	padding: 0;
	text-align:center;
	position: relative;
	display:block;
	width: 100%;
	height: 100%;
}

	.connect:after {
  content:'';
  position: absolute;
  bottom: 0;
  background-color: #fff;
  padding-bottom:2em;
}



.epilogue {
	padding: 4em;
	padding-top: 4em;
	background: #fff;
}

	.epilogue h4, .epilogue h6 {
	}
	
	.epilogue h6 {
		color: #bcbec0;
		font-size: 1em;
	}
	
		.epilogue hr {
		width: 30%;
		
	}

	.epilogue:after {
		content:'';
		position: absolute;
		top: 100%;
		left: 50%;
		margin-left: -2em;
		width: 0;
		height: 0;
		border-top: solid 2em #fff;
		border-left: solid 2em transparent;
		border-right: solid 2em transparent;
		z-index: 9;
}
	#contactform
	{
		width: 60%;
		margin: 0 auto;
	}

.footer {
		margin: 0 auto;
		padding: 1em;
		background-color: #404248;
}
	

.fourohfour {
		display: block;
		width: 100%;
		margin: 0 auto;
		text-align:center;
		background:url(../imgs/washer_mob.jpg);
		background-size: cover;
		background-position: center center;
		min-height: 96vh;
		overflow: hidden;
		position: fixed;
		padding: 1em;
}
	
	.fourohfour h1, .fourohfour h3, .fourohfour p {
		color: #fff;
	}
	

.full {
	width: 100%;
	margin: 0 auto;
}

.threefourth {
	width: 75%;
	margin: 0 auto;
}


.half {
	width: 50%;
	margin: 0 auto;
}

.third {
	width:33.33%;
	margin: 0 auto;
}

.quarter {
	width: 25vw;
	margin: 0 auto;
}

.limiter {
	width: 100%;
	text-align: left;
	margin: 0 auto;
}


/* -- Container Styling for non-mobile ---*/

@media screen and (min-width: 30em) {
	
		.attic, .top {
	padding-top: 7em;
}

	
	.square {
		width: 33.333%;
		width: calc (100% / 3);
		padding-bottom: 33.333%; /* = width for a 1:1 aspect ratio */
		padding-bottom: calc(100% / 3); /* = width for a 1:1 aspect ratio */
	}

	.about {
	min-height: 90vh;
	padding-top: 4em;
	padding-left: 4em;
	background: url(../imgs/home/about.jpg);
	background-attachment:fixed;
	background-size: cover;
	background-position: right;
	background-repeat: no-repeat;
	}
	
	.gram {	
    width: 33%;
	width: calc(100% / 3); /* = width for a 1:1 aspect ratio */
	}
	
		.contact ul {
		width: 80%;
	}
	
	.fourohfour {
		background:url(../imgs/washer.jpg);
		background-size: cover;
		background-position: center center;

	}
	
			.hero img {
			margin-bottom: -1em;
		}

	

 /*--- Page Border ----*/

	#bordertop, #borderbottom, #borderleft, #borderright {
		background: #404248;
		position: fixed;
		z-index:999;
		}
		#borderleft, #borderright {
			top: 0; bottom: 0;
			width: 1em;
			}
			#borderleft { left: 0; }
			#borderright { right: 0; }
			
		#bordertop, #borderbottom {
			left: 0; right: 0;
			height: 1em;
			}
			#bordertop { top: 0; }
			#borderbottom { bottom: 0; z-index: 99;}	
		
		.borderspacer {
			padding: 1em;
			padding-top: 2em;
		}
	

}

.iconnav li {
	display: none;
}

@media screen and (min-width: 50em) {
	
	
	.header hr {
		display: none;
		}

		
	.header {
				left: 50%;
		transform: translateX(-50%);
		z-index: 999;
		transition: all .5s;
		  -moz-transition: all 1s; /* Firefox 4 */
		  -webkit-transition: all .5s; /* Safari and Chrome */
		  -o-transition: all 1s; /* Opera */

	}
	
	 .small {
		width: 100%;
		margin: 0 auto;
		background: #404248;
		position: fixed;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		height: 3.6em;
	}
	
	.small .logo {
		background-image: url(../imgs/assets/logosmall.svg);
		background-position: center;
	}
	
	.small ul.smallhide  {
		display: none;
	}
	
	.small .iconnav li {
		display:block;
		padding-right: 1.2em;
	}

		.iconnav li img {
			position: absolute;
			width: 22px;
			height: 22px;
		}
		
			.small .iconnav li a{
				transition: all .1s;
		  -moz-transition: all .1s; /* Firefox 4 */
		  -webkit-transition: all .1s; /* Safari and Chrome */
		  -o-transition: all .1s; /* Opera */

	}
		
			.small .iconnav li a:hover{
				font-size: 1em;
			}

	.square {
    width: 25%;
	width: calc(100% / 4);
    padding-bottom: 25%; /* = width for a 1:1 aspect ratio */
	padding-bottom: calc(100% / 4); /* = width for a 1:1 aspect ratio */
    overflow:hidden;
}

	
	.about .text {
		width: calc(100% / 2);
	}
	
		.gram {	
    width: 25%;
	width: calc(100% / 4); /* = width for a 1:1 aspect ratio */
	}

		.contact ul {
		width: 60%;
	}
	
	.limiter {
		width: 80%;
	}
	
	.hero h1 {
	font-size: 3em;
	}

		.top:after {
			content: '';
			position:relative;
			display: block;
			margin: 0 auto;
			border-bottom: dotted 2px #00afec;
			margin-bottom: 1.5em;
			margin-top: 1em;
			width: 60%;

		}
	
}




@media screen and (min-width: 75em) {
	.logo {
		padding: 1.2em;

	}
	
	
	.square {
	width: 20%;
	width: calc(100% / 6);
    padding-bottom: 20%; /* = width for a 1:1 aspect ratio */
	padding-bottom: calc(100% / 6); /* = width for a 1:1 aspect ratio */
	}
	
			.contact ul {
		width: 40%;
	}

	.limiter {
		width: 60%;
	}
}


/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Links
--------------------------------------------------------------*/
a {
	text-decoration: none;
	color: #3aafdf;
}

a:visited {
	text-decoration: none;
	color: #3aafdf;
}

a:hover,
a:focus,
a:active {
	text-decoration: none;
}

a:focus {
	outline: none;
}

a:hover,
a:active {
	outline: 0;
}

/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/
.navigation {
		display: block;
		position: fixed;
		height: 3.4em;
		bottom: 0;
		margin-bottom: 0;
		width: 100%;
		text-transform:uppercase;
		font-weight: 700;
		z-index: 12;
}

.navigation a {
	text-align: center;
	text-decoration: none;
}

	.menlogo  {
		width: 100%;
		display: block;
		position:relative;
		
	}
	
	.menlogo img {
		 display: inline-block;
		 position: absolute;
		 padding-top: .1em;
		 height: 100%;
		 top: 50%;
		 -webkit-transform: translate(-50%, -50%);
	     -ms-transform: translate(-50%, -50%);
	     transform: translate(-50%, -50%); 
	}
	
.smalllogo {
	display:block;
	padding-top: 1em;
	padding-bottom: 1em;
	z-index: 10;
	float: right;
	text-align: center;
	height: 100%;
	color: #fff;
	background: #3aafdf;
}

.port {
	float: right;
	display: block;
	padding-top: 1em;
	padding-bottom: 1em;
	z-index: 10;
	text-align: center;
	background: #25272a;
	color: #fff;
}

	.port a {
		color: #fff;
	}

.slider {
	text-align: justify;
	display: block;
	left: 0;
	position: absolute;
	z-index: 11;
	background: #25272a;
	clear:both;
	}
	
.toggler {
	position: relative;
	height: 3.4em;
	float: right;
	width: 25vw;
	text-align: center;
	padding-top: .8em;
	padding-bottom: 1em;
	color: #fff;
	background: #3aafdf;
	}
	
		.toggler:before {
				font-family: 'FontAwesome';
				content:"\f138";
				font-size: 1.4em;
		}
		
		.toggler.active::before {
				content:"\f137";
		}

/* -- Main Nav Menu -- */
.main-nav {
	width: 100%;
	text-align: justify;
	margin: 0 auto;
	padding: 0;

}

.main-nav:after {
  content: '';
  width: 100%; /* Ensures justification for single lines */
  display: inline-block;
}

.main-nav ul {
	position: relative;
	z-index:12;
	margin: 0;
	padding: 0;
}
.main-nav li {
	list-style: none;
}

.main-nav li a {
	color: #3aafdf;
	display: inline-block;
	float: left;
	font-size: .9em;
	width: 24%;
	padding: 1.2em 0 1.2em 0;
	}
	

/* -- Sort Nav Menu -- */
.sort-nav {
	color: #FFF;
	background: rgba(37,39,42,.9);
	width: 100%;
	border-bottom: 0;
	bottom: 3.4em;
	position:fixed;
}

.sort-nav ul {
	margin: 0;
	padding: 0;
	display: none;  
	overflow: hidden;
	height: auto;
	list-style-type: none;

}

.sort-nav li  {
	display: block;
	float: left;
	padding: .8em;
	text-align: center;
	text-transform:uppercase;
	width: 50%; /* fallback for non-calc() browsers */
    width: calc(100% / 2);	
	padding-top: 1em;
	padding-bottom: 1em;
}

.wide li {
	width: 100%;
}

.sort-nav a {
	text-decoration: none;
	line-height: 100%;
}

	.sort-nav a#pull {
		display: block;
		background-color: #283744;
		width: 100%;
		position: relative;
	}
	.sort-nav a#pull:after {
		content:"";
		background: url('nav-icon.png') no-repeat;
		width: 30px;
		height: 30px;
		display: inline-block;
		position: absolute;
		right: 15px;
		top: 10px;
	}





/*--- Larger screen stylings ---*/
@media screen and (min-width: 30em) {
	
	
	.navigation {
		display: block;
		margin: 0 auto;
		padding: .2em;
		position: relative;
		width:100%;
		overflow: hidden;
	}
	
	.logo {
		width: 25%;
		display: inline-block;
		z-index: 98;
	}
	
	.slider {
		width: 100%;
		position: relative;
		background-color:transparent;
	}
	
	/* -- Main Nav Menu -- */
	.main-nav {
		width: 100%;
		padding-bottom: .2em;
	}


	.main-nav li a {
		color: #3aafdf;
		font-size: 1em;
		width: 25%;
		padding-top: 1em;
		transition: all .5s;
		}


		.main-nav li a:active, .main-nav li a:hover {
			color: #58595b;
			border: none;
			font-size: 1.1em;
				cursor:pointer;

		}

		
	/* -- Sort Nav Menu -- */
	.sort-nav {
		display:inline-block;
		position: relative;
		bottom: 0;
		width: 80%;
		background: none;
		border-bottom: 2px dotted #3aafdf;
		color: #bcbec0;

	}
	
	
	.sort-nav ul {
		margin: 0;
		display: block;  
		overflow: hidden;
		height: auto;
		list-style-type: none;
	
	}
	
	.sort-nav li  {
		width:25%;
		width: calc(100% / 4);
		font-size: .8em;
	
	}
	
	.sort-nav .wide li {
		width: 100%;

	}
	
		.wide li:active, .wide li:hover {
			color: #bcbec0;
		}
	
	li.title {
		display: none;
	}
	
	
	.sort-nav li:active {
		color: #fff;
	}

	
	.smalllogo, .port, .toggler {
		display: none;
	}

}

@media screen and (min-width: 50em) {
	.navigation {
		width:100%;
		overflow: hidden;
		max-height: 3.4em;
		top: 0;
		position:absolute;


	}
	
		
	.slider {
		width: 100%;
		position: relative;
		background-color:transparent;
	}
	
	/* -- Main Nav Menu -- */
	.main-nav {
	width: 100%;
	position: fixed;
	}
	
	
	.main-nav li a {
		width: 20%;
		}
		
	
	.sort-nav li:active {
		color: #3aafdf;
	}
	

}

@media screen and (min-width: 75em) {
	.sort-nav li  {
	padding: .8em;
	text-align: left;
	width: 12.5%; /* fallback for non-calc() browsers */
    width: calc(100% / 8);	
	padding-top: 1em;
	padding-bottom: 1em;
	font-size: .9em;

	}
}

/*Tiny Mobile*/
@media only screen and (max-width : 20em) {
	.sort-nav li {
		display: block;
		float: none;
		width: 100%;
	}
	.sort-nav li a {
		border-bottom: 1px solid #576979;
	}
}

/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
.button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: .3em solid;
	border-color: #3aafdf;
	background: #fff;
	color: #3aafdf;
	line-height: 1;
	display: block;
	margin: 1em auto;
	padding: .6em 1em .4em;
	text-transform:uppercase;
	font-weight: 700;
	text-align:center;
	max-width: 20em;
}

.button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	background: #3aafdf;
	color: #fff;
	border-color: #fff;
}

.button:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
button:active,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
	background: #3aafdf;
	color: #fff;
	border-color: #fff;
}

			.button.icon
			{
			}
			
				.button.icon:before
				{
					margin-right: 0.5em;
					top: 0.05em;
				}
			
			
			.fourohfour .button {
				border-color: #fff;
					color: #fff;
				}
				
			.fourohfour .button:active, .fourohfour .button:hover {
				color: #3aafdf;
				background: #fff;
			}

			
			
	/* Forms */

		form
		{
		}
		
			.form-group
			{
				width: 100%;
				margin:0 auto;
			}
		
			form label
			{
				display: block;
				text-transform: uppercase;
				font-weight: 800;
				letter-spacing: 0.04em;
				color: #404248;
				margin: 0 0 1em 0;
				font-size: 0.8em;
			}
		
			form input[type="text"],
			form input[type="email"],
			form input[type="password"],
			form select,
			form textarea
			{
				-webkit-appearance: none;
				display: block;
				width: 100%;
				border-radius: 0;
				border: solid 1px #39afdf;
			}

				form input[type="text"]:focus,
				form input[type="email"]:focus,
				form input[type="password"]:focus,
				form select:focus,
				form textarea:focus
				{
					box-shadow: 0 0 2px 1px #4091bf;
				}

			form input[type="text"],
			form input[type="email"],
			form input[type="password"],
			form select
			{
				line-height: 3em;
				padding: 0 1em;
			}
				
			form textarea
			{
				min-height: 9em;
				padding: 1em;
			}

			form .formerize-placeholder
			{
				color: #a6d2e3 !important;
			}

			form ::-webkit-input-placeholder
			{
				color: #a6d2e3 !important;
			}

			form :-moz-placeholder
			{
				color: #a6d2e3 !important;
			}

			form ::-moz-placeholder
			{
				color: #a6d2e3 !important;
			}

			form :-ms-input-placeholder
			{
				color: #a6d2e3 !important;
			}

			form ::-moz-focus-inner
			{
				border: 0;
			}

.text-danger {
	color: #C00 !important;
}


/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/
.alignleft {
	display: inline;
	float: left;
	margin-right: 1.5em;
}

.alignright {
	display: inline;
	float: right;
	margin-left: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.txtcenter {
	text-align:center;
}

.txtright {
	text-align: right;
}


/*--------------------------------------------------------------
# Clearings
--------------------------------------------------------------*/
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
	content: "";
	display: table;
	table-layout: fixed;
}

.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
	clear: both;
}

/* Clearfix */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}


/*------------------------------
# Iconography
-------------------------------*/

.sitch:before {
			content:url(../imgs/assets/sitch.svg);
			display: block;
			position:relative;
			margin: 0 auto;
}

.strat:before {
	content:url(../imgs/assets/strategy.svg);
			display: block;
			position:relative;
			margin: 0 auto;
}

.sol:before {
			content:url(../imgs/assets/solution.svg);
			display: block;
			position:relative;

}

@media and (min-width: 30em) {
		.sitch:before {
			margin: 0 auto;
		}

		.strat:before {
			margin: 0 auto;
		}

		.sol:before {
			margin: 0 auto;
			}
}


/*----------------------
# Animation
--------------------------------*/

/*=== Basic box styling  ===*/
.box {
  background: #23a3d3;
  width: 150px;
  height: 70px;
  padding: 20px;
  text-align: center;
  color: #fff;
  border-radius: 0;
  float: left;
  margin: 4px;
  text-transform: uppercase;
}
 
 
/*=== Trigger  ===*/
.animate {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
 
/*=== Optional Delays, change values here  ===*/
.one {
-webkit-animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
animation-delay: 0.4s;
}
 
.two {
-webkit-animation-delay: 1.7s;
-moz-animation-delay: 1.7s;
animation-delay: 1.7s;
}
 
.three {
-webkit-animation-delay: 2.3s;
-moz-animation-delay: 2.3s;
animation-delay: 2.3s;
}
 
.four {
-webkit-animation-delay: 3.3s;
-moz-animation-delay: 3.3s;
animation-delay: 3.3s;
}
 
/*=== Animations start here  ===*/
/*=== FADE IN  ===*/
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
 
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
 
  to {
    opacity: 1;
  }
}
 
.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}
 
 
/*=== FADE IN DOWN ===*/
@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
 
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
 
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
 
.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}
 
/*==== FADE IN UP ===*/
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
 
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
 
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
 
.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
 
/*=== FADE IN LEFT ===*/
@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
 
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
 
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
 
.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}
 
 
/*==== FADE IN RIGHT ===*/
@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
 
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
 
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
 
.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}
 
 
/*---- Preloader Animation -----*/
.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 0px; top: 0; }
.pre-con {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: url(../imgs/assets/Preloader_7.gif) center no-repeat #fff;
}
 
 /*--------------------
 Hide classes
 ------------------*/

	.trans img {
		opacity: 0;
	}


@media screen and (min-width: 30em) {
	
	.deskhide {
		display: none;
	}
}

@media screen and (max-width: 30em) {
	.mobhide {
		display: none;
	}

}

@media screen and (max-width: 50em) {
	.tabhide {
		display: none;
	}

}