@import "//fonts.googleapis.com/css?family=Lato:100,200,300,400,700";

/* 1. RESET AND HTML5 SETTINGS 
------------------------------*/ 

body,
ul,
ol,
p,
h1,
h2,
h3,
h4,
h5,
h6,
fieldset,
dd {
	margin:  0;
	padding: 0;
}

article,
aside,
dialog,
figure,
figcaption,
footer,
header,
hgroup,
nav,
section,
small {
    display: block;
}

/* 1. RWD grid 
------------------------------*/ 

/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 2%;
}
.col:first-child { margin-left: 0; }


/*  GROUPING  */
.group:before,
.group:after {
	content:"";
	display:table;
}
.group:after {
	clear:both;
}
.group {
    zoom:1; /* For IE 6/7 */
}
                                               
					
/*  GRID OF EIGHT  */
.span_8_of_8 {
	width: 100%;
}

.span_7_of_8 {
  	width: 87.25%;
}

.span_6_of_8 {
  	width: 74.5%;
}

.span_5_of_8 {
  	width: 61.75%;
}

.span_4_of_8 {
  	width: 49%;
}

.span_3_of_8 {
  	width: 36.25%;
}

.span_2_of_8 {
  	width: 23.5%;
}

.span_1_of_8 {
  	width: 10.75%;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 800px) {
	.col { 
		margin: 1% 0 1% 0%;
	}
}

@media only screen and (max-width: 800px) {
	.span_8_of_8 {
		width: 100%; 
	}
	.span_7_of_8 {
		width: 100%; 
	}
	.span_6_of_8 {
		width: 100%; 
	}
	.span_5_of_8 {
		width: 100%; 
	}
	.span_4_of_8 {
		width: 100%; 
	}
	.span_3_of_8 {
		width: 100%; 
	}
	.span_2_of_8 {
		width: 100%; 
	}
	.span_1_of_8 {
		width: 100%;
	}
}







body{
	font-family: Lato, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
	font-size: 1.2em;
	font-weight: 200;
	line-height: 1.625em;
	color: #fff;
	background-color: #33a0e8;
	border-top: 0.5em solid #33a0e8; 
}

#content{
	background-color: #fff;
	text-align: center;
	padding-left: 1em;
	padding-right: 1em;
}


#inner-content{

	max-width: 900px;
	margin:0px auto;
}

.wrapper{
	max-width: 54em;
	margin-left: 1em;
	margin-right: 1em;
}

h1{
	font-size: 4em;
	font-weight: 300;
	margin-top: 1em;
	margin-bottom: 1.6em;
}

h2{
	font-size: 2.5em;
	line-height: 1.15em;
	font-weight: 200;
	margin-top: 1em;
}

#site-strap{
	margin-bottom: 1em;
}


input, .button{
	font-family: Lato, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
	font-size: 1.2em;
	font-weight: 300;
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset;
}

.input{
	background-color: white;
	border: none;
	cursor: text;
	padding: 0.5em;
	padding-left: 0.4em;
	margin: 0;
	margin-bottom: 0.6em;
	width: 14em;
	-webkit-appearance: none;
	border-radius: 0;
	color: #333;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
  	-webkit-tap-highlight-color: transparent; /* For some Androids */
  	vertical-align: middle;
}


.button, .button:focus, .button:hover{
	-webkit-appearance: none;
	display: inline-block;
	padding-top: 0.4em;
	padding-right: 1em;
	padding-left: 1em;
	padding-bottom: 0.5em;
	margin: 0;
	margin-bottom: 0.6em;
	text-align: center;
	white-space: nowrap;
	cursor: pointer;
	background-image: none;
	border: 1px solid #fff;
	border-radius: 3px;
	background-color: transparent;
	color: #fff;
	vertical-align: middle;
}

.button:hover, .button:focus, .button:active{
	color: #fff;
	background-color: #FC0599;
	border: 1px solid #FC0599;
	text-decoration: none;
}

:focus {
  outline-color: transparent;
  outline-style: none;
}

p{
	font-weight: 400;
}

a {
	color:  #33a0e8;
	text-decoration: none;
}

a:hover{
	color:  #33a0e8;
	text-decoration: underline;
}

.confirm{
	padding: 1em;
	margin-top: 2em;
	margin-bottom: 4em;
}

footer{
	font-weight: 100;
	margin-top: 2em;
	margin-bottom: 3em;
	text-align: center;
}

footer a, footer a:hover{
	color: #fff;
}


#signin-button{
	text-align: right;
	margin: 0.5em;
	margin-right: 2em;
}


#splash{
	margin-bottom: 4em;
	text-align: center;
}

#splash::after {
  	content: "";
  	top: 0;
  	left: 0;
  	bottom: 0;
  	right: 0;
  	position: absolute;
  	z-index: -1;   
}



#splash #wrapper{
	margin: 1em;
	
}

#site-title{
	margin-top: 0em;
}

#splash h2{
	margin-top: 2em;
	margin-bottom: 1em;
	opacity: 1;
}

#splash p{

	font-weight: 200;
	opacity: 0.7;
	margin-bottom: 0.2em;
}

#content{
	background-color: #fff;
	text-align: center;
}




#features{
	padding-top: 4em;
	padding-bottom: 4em;
	float: left;
}

#features h1, #contactus h1{
	font-size: 1.2rem;
	color: #ccc;
	text-transform: lowercase;
	text-align: left;
}

#contactus h1{
	margin-top: 0;
}

.feature h2{
	font-size: 1.2rem;
	font-weight: 700;
	margin: 0;
}

#features p{
	font-weight: 300;
}

#features, #about{
	background-color: #fff;
	color: #333;
}

.feature{
	margin-bottom: 4em;
	padding-right: 1em;
	max-width: 576px;
	text-align: left;
}

.feature img{
	margin-top: 2em;
}

.feature small{
	text-align: right;
}


img{
	max-width: 100%
}


#about{
	padding-top: 4em;
	padding-bottom: 2em;
	float: left;
	font-weight: 300;
	text-align: left;
}

#about h1{
	padding-left: 2em;
	color: #ccc;
	text-transform: lowercase;
}

#about h2, #about h1, #about p{
	font-size: 1.2rem;
	font-weight: 300;
}

#about a {
	color:  #33a0e8;
	text-decoration: none;
}

#about a:hover{
	color:  #FC0599;
	text-decoration: underline;
}



.circle{
  -webkit-border-radius: 100%;
  	 -moz-border-radius: 100%;
          border-radius: 100%;
}

.avatar{
	margin-top: 0.5em;
	width: 6em;
	height: 6em;
}

#team-menbers{
	border-left: 1px solid #ddd;
	padding-left: 2em;
}

.team-member{
	margin-bottom: 2em;
	width: 100%;
	margin-right: 3%;
	float: left;
}


#contactus{
	padding-top: 0em;
	padding-bottom: 4em;
	font-weight: 300;
	text-align: left;
}



.menu-button {
	text-align: center;
	width: 3.4em;
	height: 3.4em;
	cursor: pointer;
	border-radius: 50%;
	color: #ccc;
	border: 1px solid #ccc;
	display: inline-block;
	margin-right: 0.5em;
	vertical-align: top;
}

.menu-button i.fa-twitter {
    margin-top: 0.2em;
    margin-left: 0em; 
}

.menu-button i.fa-envelope {
	margin-top: 0.2em;
	margin-left: 0.03em;
}

.menu-button :hover {
    color: #333;
    border-color: #333; 
}

.menu-button a {
    color: #ccc;
    display: inline-block;
    padding-top: 0.25em; 
}

.menu-button a:hover {
    color: #333; 
}


/*remove 2 colume */
@media all and (max-width: 800px) {

	#features, #about{
		text-align: center;
		float: none;
	}

	#features h1{
		text-align: center;
	}

	#inner-content{
		width: 100%;
		margin: none;
	}

	#team-menbers{
		border: none;
	}

	#about h1{
		padding: none;
	}

	.team-member{
		margin: 2em;
		float: none;
	}
	#features{
		border-bottom: 1px #ddd solid;
	}

	#contactus, #contactus h1{
		text-align: center;
	}


}



@media all and (min-width: 800px) {


	.team-member{
		margin-top: 2em;
		margin-bttom: 2em;
		float: none;
	}
}





@media all and (max-width: 800px) {	

	h2, .confirm{
		font-weight: 300;
	}

	#signin-button{
		margin-right: 0.5em;
	}

	#splash p{
		font-weight: 400;
	}

	.team-member{
		margin: 0;
		float: none;
		/*max-width: 576px;*/
	}

	.feature{
		width: 100%;
		max-width: 100%;
	}


	#splash::after {
		background-size: auto 500px;
		background-position: top left;
	}


	body{
		border-top: 0.2em solid #33a0e8; 
	}

	#site-title{
		margin-bottom: 1em;
	}

	#site-strap, .confirm{
		font-size: 1.5rem;
	}


#about h1{
	padding: 0;
}


	#splash::after {
		background-size: auto 100%;
		opacity: 0.7;
		background-position: bottom right;
	}

	#features{
		padding-bottom: 2em;
		padding-top: 2em;
	}

	#features img{
		 display: block;
    margin-left: auto;
    margin-right: auto 
	}

	.feature{
		margin-bottom: 3em;
	}

	#team-menbers{
		padding: 0;
	}

	footer{
		font-weight: 200;
	}
}

@media all and (max-width: 700px) {	

	h2, .confirm{
		font-weight: 300;
	}

	#splash p{
		font-size: 1rem;
		line-height: 1.6rem;
		font-weight: 400;
		margin-bottom: 1em;
	}
}


@media all and (max-width: 640px) {	

	.input{
		width: 90%;
	}
}




/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements.
   j.mp/bestclearfix */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
.clearfix { zoom: 1; }