﻿html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset, a, img, div, header, nav, span, dl, dt, dd {margin: 0; padding: 0; border: 0;}

ul, li, p, h1, h2, h3, h4, h5, h6, a, img {font-weight: 400;}

ul, ol {list-style-type: none;}

span {display: block;}

h1 {font-size: 1.8em;}
h2 {font-size: 1.6em; font-weight: bold;}
h3 {font-size: 1.4em; font-weight: bold;}
h4 {font-size: 1.2em; font-weight: bold;}
h5 {font-size: 1em;}
h6 {font-size: 0.8em;}

a, a:link, a:hover, a:visited {color: #414141; text-decoration: none;}

* {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}

body {color: #414141; font-size: 1em; font-weight: 400; font-family: 'Open Sans', Arial, sans-serif; -webkit-text-size-adjust: none; background: #fefefe;}

.clearfix:before, .clearfix:after {content: " "; display: table;}
.clearfix:after {clear: both;}
.clearfix {*zoom: 1;}

/* TOPBAR */
#topbar {width: 100%; z-index: 100; height: 80px; position: fixed; top: 0; left: 0; border-bottom: 1px solid #414141; background: #fefefe;}
#ic-logo {width: 100px; margin: 5px 20px;}
#ic-logo a {display: block;}
#ic-logo img {display: block; width: 100%; height: auto;}

#social-stuff {position: fixed; right: 15px; top: 10px; display: table; height: 60px;}
#social-stuff a {display: table-cell; vertical-align: middle; background: #414141; padding: 10px; border: 3px solid #fefefe;}
#social-stuff a img {display: block; width: 30px;}
#social-stuff a:hover {background: #0666c8;}

/* Front page - fp */
#fp-content h1 {position: fixed; font-size: 1em; top: 0; left: 0;}
#front-page-text {z-index: 1; display: block; position: absolute; width: 100%; height: 100%; padding: 0 24px;}
.service-page-text {z-index: 1; display: block; position: relative; width: 100%; height: 90vh; padding: 0 24px;}
#fp-text-holder, .sv-text-holder {text-align: center; width: 100%; max-width: 1700px; overflow: hidden; margin: 76px auto 0;}
#fp-text-holder h2, #fp-text-holder a, .sv-text-holder h2 {font-size: 8em; font-weight: 600; text-shadow: 1px 1px 3px rgba(0,0,0,0.7); white-space: nowrap; display: inline; line-height: 100%;}
#fp-text-holder p, .sv-text-holder p, #fp-text-holder p a {font-size: 2em; text-shadow: 1px 1px 1px rgba(0,0,0,0.4); margin-top: 20px;}
.sv-text-holder p {text-shadow: none;}
#fp-text-holder a, .sv-text-holder a {color: #414141;}
a.designedhere:hover {color: #fa58ac;}

#foot-note {position: fixed; left: 20px; bottom: 70px; font-size: 0.8em; font-weight: 300; max-width: 300px;}

/* Foot Menu */
#foot-menu {position: fixed; bottom: 0; left: 0; width: 100%; height: 55px; z-index: 30; padding: 10px; background: #fefefe;}
#foot-menu #services {left: 20px; position: absolute;}
#foot-menu #contact {left: 50%; position: absolute;}
#foot-menu #contact a {position: relative; left: -50%;}
#foot-menu #about {right: 20px; position: absolute;}
#foot-menu a {padding: 5px 10px; display: block; background: #414141; color: #fefefe; line-height: 25px; box-shadow: 0 2px 3px rgba(0,0,0,0.5); font-size: 0.9em;}
#foot-menu a.active {background: #0666c8;}
#foot-menu a:hover {background: #0666c8;}

/* Media Queries */
@media screen and (max-width: 600px){
	#front-page-text, .service-page-text {padding: 0 10px; height: 85vh;}
	#fp-text-holder p, .sv-text-holder p, #fp-text-holder p a {font-size: 1.3em; text-shadow: none;}
}

@media screen and (max-width: 420px) {
	#fp-text-holder p, .sv-text-holder p, #fp-text-holder p a {font-size: 1em; text-shadow: none;}
}