html, body {
	margin: 0;
	padding: 0;
	border: none;
    font-family: "lato",sans-serif;
    font-weight: 400; 
    font-size: 20px;
    color: rgba(22,22,22,0.60);
    letter-spacing: 0.2px;
    line-height: 32px;
	background: #2EB851;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-font-smoothing: antialiased;
}
::selection {
  background: #BBFFCC; 
}
::-moz-selection {
  background: #BBFFCC; 
}
.wrap {
	background: #FFFFFF;
}
.hover {
	-webkit-tap-highlight-color: transparent;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}
img {
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    user-select: none;
    vertical-align: middle;
}
h1 {
	font-family: "lato",sans-serif;
	font-weight: 400; 
	font-size: 36px;
	line-height: 46px;
	color: #000000;
	margin: 0;
}
h2 {
	font-family: "lato",sans-serif;
	font-weight: 400; 
	font-size: 28px;
	line-height: 36px;
	color: #000000;
}
h3 {
	font-family: "lato",sans-serif;
	font-weight: 400; 
	font-size: 22px;
	line-height: 28px;
	letter-spacing: 0.1px;
	color: #000000;
	margin: 0;
}

.twitter-link {
	color: #55acee;	
	text-decoration: none;
}
.twitter-link:hover , .twitter-link.hover_effect {
	color: #55acee;	
	text-decoration: underline;
}
.mail-link {
	color: #FFC918;	
	text-decoration: none;
}
.mail-link:hover , .mail-link.hover_effect {
	color: #FFC918;	
	text-decoration: underline;
}

.infotext { 
	margin-top: 8px;
	font-size: 17px;
    color: rgba(22,22,22,0.60);
	letter-spacing: 0.3px;
	line-height: 24px;
	
}
.socialbutton {
	margin: 12px;
	display: inline-block;
}
.button-green {
	background: #2EB851;
}
.button-blue {
	background: #28A6EC;
}
.button {
	display: inline-block;
	margin: 12px;
	width: 132px;
	color: #ffffff;
	line-height: 48px;
	text-align: center;
	padding: 0px 24px;
	
	border-radius: 6px;
	margin-top: 24px;
	-webkit-transition: all 0.3s ease-in-out 0s;
	transition: all 0.3s ease-in-out 0s;
}
.button-green:hover , .button-green.hover_effect {
	background: #289E45;
}
.button-blue:hover , .button-blue.hover_effect {
	background: #2897d2;
}
.button a {
	text-decoration: none;
	color: #ffffff;
}
.footer a, .footer a:visited {
	text-decoration: none;
	color: inherit;
}
.footer a:hover , .footer.hover_effect {
	text-decoration: underline;
}
.link {
	position: relative;
	font-family: "lato",sans-serif;
	font-weight: 700;
	font-size: 16px;
	color: #21853A;
	line-height: 20px;
	margin: 0px 24px 0px 24px;
	text-decoration: none;
}
.link-active {
	position: relative;
	font-family: "lato",sans-serif;
	font-weight: 700;
	font-size: 16px;
	color: #ffffff;
	line-height: 20px;
	margin: 0px 24px 0px 24px;
	text-decoration: none;
}

.link:before, .link-active:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 1px;
	bottom: -1px;
	left: 0;
	visibility: hidden;
	-webkit-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transition: all 0.3s ease-in-out 0s;
	transition: all 0.3s ease-in-out 0s;
}
.link:hover:before, .link-active:hover:before , .link.hover_effect , .link-active.hover_effect {
	visibility: visible;
	-webkit-transform: scaleX(1);
	transform: scaleX(1);
}
.link:before {
	background-color: #21853A;
}
.link-active:before {
	background-color: #ffffff;
}

.hero {
	display: block;
	width: 100%;
	height: 235px;
	background: url('../images/triangle.svg') center center no-repeat;
	padding: 32px 0px 48px 0px;
	margin-bottom: 48px;
}

.me {
	display: inline-block;
	position: relative;
	width: 230px;
	height: 128px;
	background: url('../images/me.svg') center center no-repeat;
	margin-top: 48px;
}

.footer {
	margin-top: 48px;
	font-size: 16px;
	line-height: 20px;
}

.footer-main {
	display: block;
	width: 100%;
	height: 187px;
	background: url('../images/triangle_up.svg') center center no-repeat;
	padding: 128px 0px 0px 0px;
	color: #21853A;
	margin-top: 48px;
}
.features {
	display: inline-block;
	position: relative;
    width:64px;
    height:64px;
    background: url('../images/features.svg') no-repeat;
}
.features-customizable {
	background-position: 0px 0px;
}
.features-retina {
	background-position: -64px 0px;
}
.features-scalable {
	background-position: -128px 0px;
}
/* SOCIAL */
.social {
	display: inline-block;
	position: relative;
	text-indent: -9999px;
    width:32px;
    height:32px;
    margin: 24px;
    background: url('../images/social.svg') no-repeat;
}
.mail {
    background-position:-1px -1px;
    -webkit-transition: all .2s ease-in;
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    transition: all .2s ease-in;
}
.mail:after {
	content: "";
	position: absolute;
	background: url('../images/social.svg') no-repeat;
	top: 0; left: 0; bottom: 0; right: 0;
	background-position: -1px -34px;
	opacity: 0;
	-webkit-transition: all .2s ease-in;
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    transition: all .2s ease-in;
}
.mail:hover:after , .mail.hover_effect {
	opacity: 1;
}
.twitter {
    background-position:-34px -1px;
    -webkit-transition: all .2s ease-in;
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    transition: all .2s ease-in;
}
.twitter:after {
	content: "";
	position: absolute;
	background: url('../images/social.svg') no-repeat;
	top: 0; left: 0; bottom: 0; right: 0;
	background-position: -34px -34px;
	opacity: 0;
	-webkit-transition: all .2s ease-in;
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    transition: all .2s ease-in;
}
.twitter:hover:after , .twitter.hover_effect {
	opacity: 1;
}
.facebook {
    background-position:-67px -1px;
    -webkit-transition: all .2s ease-in;
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    transition: all .2s ease-in;
}
.facebook:after {
	content: "";
	position: absolute;
	background: url('../images/social.svg') no-repeat;
	top: 0; left: 0; bottom: 0; right: 0;
	background-position: -67px -34px;
	opacity: 0;
	-webkit-transition: all .2s ease-in;
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    transition: all .2s ease-in;
}
.facebook:hover:after , .facebook.hover_effect {
	opacity: 1;
}

.hover {
	-webkit-tap-highlight-color: transparent;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}

.left { text-align: left; }
.center { text-align: center; }
.right { text-align: right; }
.row {
	max-width: 768px;
	padding:0px 24px;
	margin: 12px auto;
}
.row-half {
	max-width: 384px;
}
.row-contain {
	margin: 32px auto 32px auto;
}
.row-third {
	display: inline-block;
	max-width: 232px;
	padding:12px 0px;
	margin: 24px;
}
.hideOr {
	display: inline-block;
	margin-left: 12px;
	margin-right: 12px;
}
@media (max-width: 480px) {
  .hideOr {display: none !important;}
}
@media (max-width: 860px) {
  .row-third {margin-left: 0 !important; margin-right: 0 !important;}
}
@media (max-width: 710px) {
  .row-third {display: block !important; margin-left: auto !important; margin-right: auto !important;}
}
ul.nostyle {
	margin: 0;
	padding: 0;
	border: none;
	list-style: none;
}
ul.inline li {
	display: inline-block;
}

/* PREVIEW ICONS */
.icon {
	width: 32px;
	height: 32px;
	margin: 16px;
	fill: #8f8f8f;
}
.iconbox {
	max-width: 800px;
	margin-top: 8px !important;
	margin-left: auto;
	margin-right: auto;
	color: blue;
}
svg {
	margin: 16px;
}
.clear-both {
   clear: both;
}
.directionsbox {
	margin: -16px 16px 48px 16px;
	cursor: pointer;
	font-family: "lato",sans-serif;
	font-size: 14px;
	line-height: 18px;
}
.goup {
	display: inline-block;
	position: relative;
	text-indent: -9999px;
	width: 32px;
	height: 32px;
	background: url('http://hawcons.com/preview/files/images/directions.svg') no-repeat;
	background-position: -32px 0;
	cursor: pointer;
}
.goup:after {
	content: "";
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	background: url('http://hawcons.com/preview/files/images/directions.svg') no-repeat;
	background-position: -32px -32px;
	opacity: 0;
	-webkit-transition: opacity 0.4s;
	-moz-transition:    opacity 0.4s;
	-o-transition:      opacity 0.4s;
}
.goup:hover:after {
	opacity: 1;
}
.godown {
	display: inline-block;
	position: relative;
	text-indent: -9999px;
	width: 32px;
	height: 32px;
	background: url('http://hawcons.com/preview/files/images/directions.svg') no-repeat;
	background-position: 0 0;
	cursor: pointer;
}
.godown:after {
	content: "";
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	background: url('http://hawcons.com/preview/files/images/directions.svg') no-repeat;
	background-position: 0 -32px;
	opacity: 0;
	-webkit-transition: opacity 0.4s;
	-moz-transition:    opacity 0.4s;
	-o-transition:      opacity 0.4s;
}
.godown:hover:after {
	opacity: 1;
}
.gotop {
	display: inline-block;
	position: relative;
	text-indent: -9999px;
	width: 32px;
	height: 32px;
	background: url('http://hawcons.com/preview/files/images/directions.svg') no-repeat;
	background-position: -64px 0;
	cursor: pointer;
}
.gotop:after {
	content: "";
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	background: url('http://hawcons.com/preview/files/images/directions.svg') no-repeat;
	background-position: -64px -32px;
	opacity: 0;
	-webkit-transition: opacity 0.4s;
	-moz-transition:    opacity 0.4s;
	-o-transition:      opacity 0.4s;
}
.gotop:hover:after {
	opacity: 1;
}
.siwtchbox {
	font-size: 14px;
	margin-top: -12px;
	margin-bottom: 32px;
}
.switchery {
	border-radius: 20px;
	background: rgba(0,0,0,0.2);
	cursor: pointer;
	display: inline-block;
	height: 20px;
	position: relative;
	vertical-align: middle;
	width: 40px;
	padding-top: 2px;
	padding-left: 2px;
	padding-right: 2px;
	margin: 5px 8px 10px 8px;
}
.switchery > small {
	background: #ffffff;
	border-radius: 100%;
	height: 18px;
	position: absolute;
	width: 18px;
	vertical-align: middle;
	margin-left: 2px;
	margin-right: 2px;
}
.configs {
	width: 170px;
	margin-left: 16px;
	margin-right: 16px;
	display: inline-block;
}
.iconbox {
	margin-top: 84px;
	margin-bottom: 32px;
}
.godocs {
	display: inline-block;
	position: relative;
	text-indent: -9999px;
	width: 48px;
	height: 48px;
	background: url('http://hawcons.com/preview/files/images/directions.svg') no-repeat;
	background-position: -96px 0;
	cursor: pointer;
}
.godocs:after {
	content: "";
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	background: url('http://hawcons.com/preview/files/images/directions.svg') no-repeat;
	background-position: -96px -48px;
	opacity: 0;
	-webkit-transition: opacity 0.4s;
	-moz-transition:    opacity 0.4s;
	-o-transition:      opacity 0.4s;
}
.godocs:hover:after {
	opacity: 1;
}
.gosports {
	display: inline-block;
	position: relative;
	text-indent: -9999px;
	width: 48px;
	height: 48px;
	background: url('http://hawcons.com/preview/files/images/directions.svg') no-repeat;
	background-position: -144px 0;
	cursor: pointer;
}
.gosports:after {
	content: "";
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	background: url('http://hawcons.com/preview/files/images/directions.svg') no-repeat;
	background-position: -144px -48px;
	opacity: 0;
	-webkit-transition: opacity 0.4s;
	-moz-transition:    opacity 0.4s;
	-o-transition:      opacity 0.4s;
}
.gosports:hover:after {
	opacity: 1;
}
.goweather {
	display: inline-block;
	position: relative;
	text-indent: -9999px;
	width: 48px;
	height: 48px;
	background: url('http://hawcons.com/preview/files/images/directions.svg') no-repeat;
	background-position: -192px 0;
	cursor: pointer;
}
.goweather:after {
	content: "";
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	background: url('http://hawcons.com/preview/files/images/directions.svg') no-repeat;
	background-position: -192px -48px;
	opacity: 0;
	-webkit-transition: opacity 0.4s;
	-moz-transition:    opacity 0.4s;
	-o-transition:      opacity 0.4s;
}
.goweather:hover:after {
	opacity: 1;
}
.goemoji {
	display: inline-block;
	position: relative;
	text-indent: -9999px;
	width: 48px;
	height: 48px;
	background: url('http://hawcons.com/preview/files/images/directions.svg') no-repeat;
	background-position: -240px 0;
	cursor: pointer;
}
.goemoji:after {
	content: "";
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	background: url('../images/directions.svg') no-repeat;
	background-position: -240px -48px;
	opacity: 0;
	-webkit-transition: opacity 0.4s;
	-moz-transition:    opacity 0.4s;
	-o-transition:      opacity 0.4s;
}
.goemoji:hover:after {
	opacity: 1;
}
.gogestures {
	display: inline-block;
	position: relative;
	text-indent: -9999px;
	width: 48px;
	height: 48px;
	background: url('http://hawcons.com/preview/files/images/directions.svg') no-repeat;
	background-position: -288px 0;
	cursor: pointer;
}
.gogestures:after {
	content: "";
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	background: url('http://hawcons.com/preview/files/images/directions.svg') no-repeat;
	background-position: -288px -48px;
	opacity: 0;
	-webkit-transition: opacity 0.4s;
	-moz-transition:    opacity 0.4s;
	-o-transition:      opacity 0.4s;
}
.gogestures:hover:after {
	opacity: 1;
}
.gofiletypes {
	display: inline-block;
	position: relative;
	text-indent: -9999px;
	width: 48px;
	height: 48px;
	background: url('http://hawcons.com/preview/files/images/directions.svg') no-repeat;
	background-position: -336px 0;
	cursor: pointer;
}
.gofiletypes:after {
	content: "";
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	background: url('http://hawcons.com/preview/files/images/directions.svg') no-repeat;
	background-position: -336px -48px;
	opacity: 0;
	-webkit-transition: opacity 0.4s;
	-moz-transition:    opacity 0.4s;
	-o-transition:      opacity 0.4s;
}
.gofiletypes:hover:after {
	opacity: 1;
}
@-webkit-keyframes movedown {
	0% {
		-webkit-transform: translate(0px,0px);
	}
   
    100% {
		-webkit-transform: translate(0px,2px);
	}
}
@-moz-keyframes movedown {
	0% {
		-moz-transform: translate(0px,0px);
	}
   
    100% {
		-moz-transform: translate(0px,2px);
	}
}
@-o-keyframes movedown {
	0% {
		-o-transform: translate(0px,0px);
	}
   
    100% {
		-o-transform: translate(0px,2px);
	}
}
@keyframes movedown {
	0% {
		transform: translate(0px,0px);
	}
   
    100% {
		transform: translate(0px,2px);
	}
}