body, html{
font-family: 'Montserrat', Helvetica, arial sans-serif;
font-size: 16px;
background: #f6f6f6;
line-height: 1.6;
}

h1, h2{
font-weight: 500;
}

a{
color: #6ECCDF;
}

a:hover, a:focus{
color: #9EDFE8;
}

#logo-container{
	background-color: #f6cf54;
	overflow: hidden;
	padding: 4em 2em 5em 0;
	border-radius: 10px;
}

.yellow-box{
	margin-top: 1em;
	background-color: #f6cf54;
	overflow: hidden;
	padding: 1em 3em 4em 3em;
	border-radius: 10px;
}

.yellow-box .btn{
margin-top: 1em;
}

.logo{
margin: 0 auto;
width: 72%;
position: relative;
left: 2em;
}

#logo_brand{
width: 50%;
float: left;
}

#logo_mark{
width: 50%;
float: left;
}

#main svg .st1, #main svg .st3, #main svg .st4, #main svg .st5, #main svg .st6, #main svg .st11{
stroke-dasharray: 150;
stroke-dashoffset: 150;
animation: dash 4s linear forwards;
animation-timing-function: ease-out;
}

#featured{
margin: 2.5em 0 4em 0;
}

#featured ul{
display: block;
margin: 0;
padding: 0;
text-align: center;
}

#featured ul li{
list-style: none;
margin: 0.5em 1em;
padding: 0;
display: inline-block;
width: 6em;
}

#featured ul li img{
width: 100%;
height: auto;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

#main h1{
font-size: 1.7em;
text-align: left;
line-height: 1.4;
margin-top: 0;
}

.welcome{
margin-left: 51.5%;
padding-left: 1.8em;
padding-right: 4em;
float: left;
}

.welcome h4{
font-weight: 400;
}

.logo span, h4{
opacity: 0.6;
}

h1{
margin-top: 1.5em;
text-align: center;
font-size: 3.5em;
}

h4{
margin-top: 1em;
line-height: 1.4;
}

#main{
color: #292d32;
overflow: hidden;
}

#main *{
position: relative;
z-index: 2;
}

.signup{
text-align: center;
}

#main .btn{
margin-top: 1em;
float: left;
}

img{
width: 100%;
height: auto;
}

ul.keywords{
float: left;
font-size: 1.5em;
display: block;
margin: 3em 2em 2em 2em;
padding: 0;
opacity: 0.6;
position: relative;
z-index: 2;
}

ul.keywords li{
float: left;
list-style: none;
margin: 0 0 0 1em;
border-bottom: 2px solid #ff1f39;
}

.square{
font-size: 1.2em;
position: relative;
padding: 5.5em 3em;
text-align: center;
height: 15em;
}

.square.icon{
background-color: #111;
background-size: 4em;
background-repeat: no-repeat;
background-position: 50%;
overflow: hidden;
padding: 0;
}

#footer{
margin-top: 4em;
padding: 5em 0 10em 0;
color: #767b82;
background-color: #292D32;
font-size: 0.8em;
}

#footer a{
color: #FFC400;
display: inline-block;
padding-bottom: 0.4em;
background: transparent url(img/wave_yellow.svg) repeat-x;
background-position: 0 100%;
background-size: 10px 4px;
}

#footer a:hover{
text-decoration: none;
background-image: url(img/wave.svg);
color: #6ECCDF;
}

#footer p{
margin-top: 1em;
margin-bottom: 2em;
}

.btn{
font-size: 0.9em;
padding: 1em 2.5em;
border-radius: 10em;
border: 0;
}

.btn-primary{
background-color: #292d32;
color: #fff;
}

.btn-warning{
background-color: #f6c544;
}

.btn-primary:hover, .btn-primary:focus{
background-color: #495059;
}

/* nav */
.top-nav{
margin: 4em 0 1.5em 0;
padding: 0;
text-align: right;
font-size: 0.9em;
}

.top-nav li{
float: none;
display: inline;
margin: 0 0 0 2em;
}

.top-nav li a{
float: none;
display: inline-block;
background: transparent url(img/wave.svg) repeat-x;
background-position: 0 100%;
background-size: 10px 4px;
}

.top-nav li a{
color: #3E4A56;
padding: 0 0 0.4em 0;
}

.top-nav li a:hover, .top-nav li.active a, .top-nav li a:focus{
text-decoration: none;
color: #6ECCDF;
}

.top-nav li a i{
margin-right: 0.25em;
margin-bottom: 0;
}

.row .col-table{
padding: 2em 4em;
vertical-align: top;
}

#intro .text-left{
text-align: left;
width: 100%;
max-width: 29em;
padding: 0 6%;
}

#intro .text-right{
text-align: left;
width: 100%;
max-width: 29em;
padding: 0 6%;
}

.row .col-graphic-right{
padding: 3em 0 4em 0.5em;
}

.row .col-graphic-left{
padding: 3em 0.5em 4em 0;
}

blockquote{
border: 3px solid #282d33;
font-size: 0.8em;
padding: 1em 2em;
}

.sample-logo img, #samples img.big{
width: 100%;
border-radius: 8px;
margin: 1.1em 0;
}

#samples .pull-up{
color: #f3f0ee;
}

.icon-area{
text-align: left;
padding: 2em;
font-size: 0.85em;
}

.icon-area img{
width: 4em;
display: inline-block;
}
@media only screen and (max-width : 768px) {
	#nav{
	font-size: 0.7em;
	text-align: right;
	margin: 0;
	background: transparent;
	text-align: center;
	}
	
	#nav, #nav.active{
		padding: 0.75em 0 0 0;
	}
	
	#nav.active .navbar-header{
	display: none;
	}
	
	#nav li{
	float: none;
	}

	#nav li a, #nav.active li a, #nav .nav > li > a, #nav.active .nav > li > a{
	padding: 0.7em 1.2em;
	margin: 0 0.2em;
	font-size: 11px;
	}
}

@media only screen and (min-width : 768px) {
	.container-table {
		display:table;
		width: 100%;
		box-sizing: border-box;
	}

	.row-table {
		height: 100%;
		display: table-row;
	}

	.row .col-table {
	  display: table-cell;
	  float: none;
	  padding: 0 4em;
	}
	
	#intro .text-left{
		float: right;
	}
	
	.row .col-graphic-right{
	padding: 0 0 4em 2.5em;
	}
	
	.row .col-graphic-left{
	padding: 0 2.5em 4em 0;
	}
	
	.pull-up{
	margin-top: -6em;
	}
}


@media only screen and (min-width : 992px) {
	.pull-up{
	margin-top: -12em;
	}
}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
	h1, #main h1{
    	font-size: 1.3em;
    }
    
    .welcome{
    padding: 0;
    text-align: center;
    margin: 0 auto;
    float: none;
    width: 60%;
    }
    
    #main h1{
    float: left;
    width: 100%;
    text-align: center;
    padding-top: 1em;
    }
    
    .signup{
    width: 100%;
    }
    
    #main .btn{
    float: none;
    display: inline-block;
    }
    
    #logo-container{
    padding: 3em 1em 4em 1em;
    }
    
    .logo{
    width: 85%;
    }
    
    #samples .pull-up{
	margin-top: 2em;
	color: #e14d6d;
	text-align: center;
	}
	
	#samples img.big{
	margin-top:2em;
	}
	.decorations{
	margin-bottom: 1em; 
	}
}



@media only screen and (max-width : 768px) {
    
    h1, #main h1{
    	font-size: 1.5em;
    }
    
    #logo-container{
    padding: 2em 0 3em 1em;
    }
    
    .logo{
    width: 100%;
    }
    
    #logo_brand{
    width: 80%;
    margin-left: 2.5%;
    }
    
    #logo_mark{
    width: 80%;
    margin-left: 7%;
    margin-top: -22%;
    }
    
    .welcome{
    	width: 80%;
    	margin: 0 0 0 9.5%;
    }
    
    #main h1{
    padding-top: 0;
    }
    
    .top-nav{
    text-align: center;
    }
    
    .top-nav li{
    margin: 0 1em;
    }
    
    #samples img.big{
	margin-top:0;
	}
}

@media only screen and (max-width : 480px) {
	body{
	font-size: 14px;
	}
	
	.logo{
	width: 95%;
	padding-right: 5%;
	}
	h1, #main h1{
    	font-size: 1.2em;
    }
    
    #logo_brand{
    width: 88%;
    margin-left: -4%;
    }
    
    #logo_mark{
    width: 88%;
    margin-left: 0.5%;
    margin-top: -22%;
    }
    
    .welcome{
    	width: 88%;
    	margin: 0 0 0 3%;
    }
    
    
}