
/***********************************************************************************
  
Page Setup
  
************************************************************************************/

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
    height: auto;
    
    overflow: auto;
}

*, *::before, *::after {
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
}

body .head {
	 position: fixed;
}

body .stuff {
	 position: static;
}
/***********************************************************************************
  
Typo Setup
  
************************************************************************************/


@font-face {
  font-family: 'FiraSans-Bold';
  src: url('../fonts/FiraSans-Bold.eot');
  src: url('../fonts/FiraSans-Bold.eot?#iefix') format('embedded-opentype'),
       url('../fonts/FiraSans-Bold.woff') format('woff'),
       url('../fonts/FiraSans-Bold.ttf') format('truetype'),
       url('../fonts/FiraSans-Bold.svg#FiraSans-Bold') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'FiraSans-Light';
  src: url('../fonts/FiraSans-Light.eot');
  src: url('../fonts/FiraSans-Light.eot?#iefix') format('embedded-opentype'),
       url('../fonts/FiraSans-Light.woff') format('woff'),
       url('../fonts/FiraSans-Light.ttf') format('truetype'),
       url('../fonts/FiraSans-Light.svg#FiraSans-Light') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
	font-family: 'FiraSans-Book';
	src: url('../fonts/FiraSans-Book.eot');
	src: url('../fonts/FiraSans-Book.eot?#iefix') format('embedded-opentype'),
       url('../fonts/FiraSans-Book.woff') format('woff'),
       url('../fonts/FiraSans-Book.ttf') format('truetype'),
       url('../fonts/FiraSans-Book.svg#FiraSans-Book') format('svg');
	font-weight: normal;
	font-style: normal;
}

body {
    font-family: 'FiraSans-Light', sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

p {
    line-height: 1.5;
}

a {
    color: #404040;
	text-decoration: none;
    transition-duration: 0.1s;
}

/*p a,
span a,*/
strong {
    font-family: 'FiraSans-Bold', sans-serif;
}

h1 {
    font-family: 'FiraSans-Bold', sans-serif;
    font-size: 48px;
    line-height: 60px;
    /*letter-spacing: -2px;*/
    margin-top: 15px;
	/*position: absolute;*/
	position: static;
    top: 0;
    left: 0;
	clear: none;

}

h2 {
    font-size: 36px;
    line-height: 1.2;
    
    margin-bottom: 0px;
}

/***********************************************************************************
  
Icons
  
************************************************************************************/

/*@font-face { 
    font-family: "ionicons"; 
    src: url("../icons/ionicons.eot?v=1.4.1"); 
    src: url("../icons/ionicons.eot?v=1.4.1#iefix") format("embedded-opentype"), 
         url("../icons/ionicons.ttf?v=1.4.1") format("truetype"), 
         url("../icons/ionicons.woff?v=1.4.1") format("woff"), 
         url("../icons/ionicons.svg?v=1.4.1#Ionicons") format("svg"); 
    font-weight: normal; 
    font-style: normal; 
}

.icon { 
    display: inline-block; 
    font-family: "ionicons"; 
    speak: none; 
    font-style: normal; 
    font-weight: normal; 
    font-variant: normal; 
    text-transform: none; 
    text-rendering: auto; 
    line-height: 1; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
}

.icon.github:before { content: "\f233"; }
.icon.twitter:before { content: "\f243"; }
.icon.facebook:before { content: "\f231"; }
.icon.menu:before { content: "\f20e"; }
.icon.close:before { content: "\f12a"; }
.icon.responsive:before { content: "\f1f9"; }
.icon.codebase:before { content: "\f271"; }
.icon.design:before { content: "\f160"; }
.icon.focused:before { content: "\f1a2"; }
.icon.browsers:before { content: "\f1d4"; }
.icon.seo:before { content: "\f1f7"; }
.icon.customize:before { content: "\f17d"; }
.icon.services:before { content: "\f15a"; }
.icon.customization:before { content: "\f1e0"; }
.icon.implementation:before { content: "\f184"; }
.icon.hosting:before { content: "\f177"; }
.icon.support:before { content: "\f19c"; }
.icon.edit:before { content: "\f17d"; }
.icon.newsletter:before { content: "\f12e"; }
.icon.wordpress:before { content: "\f248"; }
.icon.video:before { content: "\f1c7"; }'/

/***********************************************************************************
  
Universal Content Containers
  
************************************************************************************/

.row {
    width: 100%;
    
    float: left;
    
    position: relative;
}

#section {
	    padding: 70px 0 40px;
	/*	margin: 0 0 -75px 0;*/
}

#section .content {
    text-align: center;
    
    width: 58%;
}

/*#section h2 {
    font-size: 36px;
    line-height: 1.2;
    
    margin-bottom: 0px;
}*/

.content {
    width: 1200px;
    
    margin: 0px auto;
    
    position: relative;
}

.gogogo {
    float: left;
    margin: 0 15% 0 10%;
}

/***********************************************************************************
  
Buttons
  
************************************************************************************/

.button {
    border-radius: 3px;
    
    font-size: 14px;
    text-align: center;
    line-height: 52px;
    text-transform: uppercase;
    
    height: 50px;
    
    padding: 0 30px;
    
    display: inline-block;
}

.button span {
    font-family: 'FiraSans-Bold', sans-serif;
    text-transform: lowercase;
}

/*.notfall {
    display: block;
	color: fff;
	background-color: #633914;
}*/

/***********************************************************************************
  
Header
  
************************************************************************************/

#section /*.fixmenu*/ {
    text-align: center;
    
    /*width: 58%;*/
}

.head {
    width: 100%;
    
    float: left;
    	 z-index:4;
    /*position: relative;*/
}
 
.fixmenu {
	width: 1200px;
    /*width: 60%;*/
    margin: 0px auto;
    position: relative;
	 /*left:0;
	 top:0;*/
	 /*width:100%;
	 height:80px;
	 background:yellow;*/
}

#header {
    border-bottom: 1px solid;
    float: left;
    /*height: 100px;*/
	min-height: 80px;
}

/*#header h1 {
    font-family: 'FiraSans-Bold', sans-serif;
    font-size: 48px;
    line-height: 60px;
    letter-spacing: -2px;
    margin-top: 15px;
	position: absolute;
	position: static;
    top: 0;
    left: 0;
	clear: none;

}*/

.noh1  {
	font-family: 'FiraSans-Book', sans-serif;
    font-size: 24px;
    letter-spacing: 1px;

}

/*#header h2 {
    font-size: 24px;
    line-height: 1.2;
    margin-bottom: 22px;
}*/

/*#header .logo {
    border-bottom: none;
    
    height: 60px;
    
    position: absolute;
    top: 20px;
    left: 0;
    z-index: 10;
    
    display: none;
}*/

/*#header .logo img {
    height: 60px;
}*/

#header ul {
    font-size: 14px;
    /*line-height: 102px;*/
	/*line-height: 130px;*/
    float: right;
	margin-top: 29px;
	margin-bottom: 10px;
}

#header ul li {
    float: right;
    
    /*position: relative;*/

    margin-left: 40px;
}

/*#header ul li a.contribute {
    text-transform: uppercase;
}

#header ul li a.contribute .icon {
    font-size: 19px;
    
    position: absolute;
    top: 40px;
    left: -24px;
}*/

/***********************************************************************************
  
Intro
  
************************************************************************************/

#intro {
    padding: 125px 0 0;
}

#intro .content {
    text-align: center;
    
    width: 58%;
}

#intro p{
    margin-bottom: 40px;
}

/*#intro p {
    margin-bottom: 33px;
}*/

/***********************************************************************************
  
Screenshots
  
************************************************************************************/

#screenshots {
    height: 500px;
}

#screenshots .content {
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: 10;
    
    margin-left: -600px;
    
    overflow: visible;
}

#screenshots .content img {
    /*border-radius: 6px 6px 0 0;
    */
    position: absolute;
}

#screenshots .content img.tablet {
    width: 30%;
    
    top: 100px;
    left: 0;
    z-index: 20;
}

#screenshots .content img.desktop {
    width: 40%;
    
    top: 0;
    left: 30%;
    z-index: 30;
}

#screenshots .content img.mobile {
    width: 15%;
    
    top: 150px;
    right: 0;
    z-index: 40;
}

/***********************************************************************************
  
Graphs
  
************************************************************************************/

#graph {
    height: 700px;
}

#graph .content {
    height: 100%;
    /*position: absolute;*/
    bottom: 0;
    /*left: 35%;
    z-index: 10;*/
    
    /*margin-left: -600px;*/
    
    overflow: visible;
}

#graph .content img {
    /*border-radius: 6px 6px 0 0;
    */
    /*position: absolute;*/
	width: 75%;
	margin: auto 10%;
}
/*
#graph .content img.tablet {
    width: 60%;    
    top: 100px;
    left: 0;
    z-index: 20;
}
*/
#graph .content img.desktop {
    /*width: 75%;*/
    
    top: 0;
  /* left: 20%;*/
   /* z-index: 30;*/
}
/*
#graph .content img.mobile {
   	width: 30%;
    
    top: 150px;
    right: 0;
    z-index: 40;
}
*/

/***********************************************************************************
  
Features
  
************************************************************************************/

#features {
    padding: 70px 0;
	margin: 100px 0 0 0;
}

#features .feature {
    border-right: 1px solid;
    border-bottom: 1px solid;
    
    font-size: 14px;
    
    width: 33.333333333%;
    
    float: left;
}

#features .feature .copy {
    padding: 40px 40px 63px;
}

#features .feature .icon {
    font-size: 30px;
    
    margin-bottom: 12px;
}

/*#features .feature h3 {
    font-size: 18px;
    line-height: 1.4;
        
    margin-bottom: 12px;
}*/

#features .feature .copy .hilight {
	font-size: 18px;
	font-family: FiraSans-Book;
	color: #FFF;
}

#features .feature .copy a {
	color: #B9B9B9;
    font-family: 'FiraSans-Light', sans-serif;
}

/*#feature ul .plain {
    font-size: 14px;
	color: #FFF;
}

#feature li .plain {
    font-size: 14px;
	color: #FFF;
}*/

/***********************************************************************************
  
Footer
  
************************************************************************************/

#footer {
    font-size: 14px;
    line-height: 80px;
    
    height: 80px;
}

#footer span {
    float: left; 
}

#footer ul {
    float: right;
}

#footer ul li {
    float: left;
    
    margin-left: 10px;
}

#footer ul li a:hover {
    border-bottom: 1px solid;
}

/*#footer li a {
    text-transform: uppercase;
}*/
