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

a{
color: #d02140;
}

a:hover, a:focus{
color: #ff1f39;
}

.logo{
margin: 0 auto;
margin-top: 5em;
width: 100%;
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;
}

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

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

.welcome{
margin-left: 51.5%;
padding-left: 2em;
}

.logo span, h4{
opacity: 0.6;
}


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

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

#main{
background: #f6f6f6;
color: #292d32;
padding-bottom: 8em;
overflow: hidden;
}

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

.signup{
text-align: center;
}

#main .btn, #footer .btn{
margin-top: 3em;
float: left;
}

#intro{
color: #fff;
background-color: #d75254;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23ff898b' fill-opacity='0.21' fill-rule='nonzero'%3E%3Cpath d='M29 58.58l7.38-7.39A30.95 30.95 0 0 1 29 37.84a30.95 30.95 0 0 1-7.38 13.36l7.37 7.38zm1.4 1.41l.01.01h-2.84l-7.37-7.38A30.95 30.95 0 0 1 6.84 60H0v-1.02a28.9 28.9 0 0 0 18.79-7.78L0 32.41v-4.84L18.78 8.79A28.9 28.9 0 0 0 0 1.02V0h6.84a30.95 30.95 0 0 1 13.35 7.38L27.57 0h2.84l7.39 7.38A30.95 30.95 0 0 1 51.16 0H60v27.58-.01V60h-8.84a30.95 30.95 0 0 1-13.37-7.4L30.4 60zM29 1.41l-7.4 7.38A30.95 30.95 0 0 1 29 22.16 30.95 30.95 0 0 1 36.38 8.8L29 1.4zM58 1A28.9 28.9 0 0 0 39.2 8.8L58 27.58V1.02zm-20.2 9.2A28.9 28.9 0 0 0 30.02 29h26.56L37.8 10.21zM30.02 31a28.9 28.9 0 0 0 7.77 18.79l18.79-18.79H30.02zm9.18 20.2A28.9 28.9 0 0 0 58 59V32.4L39.2 51.19zm-19-1.4a28.9 28.9 0 0 0 7.78-18.8H1.41l18.8 18.8zm7.78-20.8A28.9 28.9 0 0 0 20.2 10.2L1.41 29h26.57z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
background-size: 7%;
}

#explain{
color: #111;
background-color: #eee;
}

.text-right{
padding: 10% 10% 10% 7%;
text-align: left;
}

.text-left{
padding: 10% 7% 10% 10%;
}

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{
padding-bottom: 10em;
color: #fff;
background-color: #333;
}

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

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

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


/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {

}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
	h1, #main h1{
    	font-size: 1.3em;
    }
}



@media only screen and (max-width : 768px) {
    .text-left, .text-right{
		padding: 10%;
		text-align: left;
    } 
    
    h1, #main h1{
    	font-size: 1.5em;
    }
    
    #main .logo{
    margin-top: 3em;
    }
    
    #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%;
    }
}

@media only screen and (max-width : 480px) {
	h1, #main h1{
    	font-size: 1.4em;
    }
    
    
    #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%;
    }
}