/* Import Fonts */
@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic);

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

html, body {
	font-family: 'Lato', sans-serif;
	color:#2f2f2f;
	font-size: 20px;
	font-weight: 300;
	line-height: 24px;
	background: #fff;
	width:100%;
	height:100%;
	padding:0;
	margin-left:0;
	margin-right:0;
	-webkit-font-smoothing: antialiased;
}

p{margin-bottom: 16px;}

/* --------------------------------
Links
-------------------------------- */
a{
	color: #384f46;
	text-decoration:none;
	outline:none;
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	transition: all 0.2s;
}
a:hover,
a:active,
a:focus{
	color:#2f2f2f;
}

/* --------------------------------
Typography
-------------------------------- */
h1, h2, h3, h4, h5, h6{
	display: block;
	color:#2f2f2f;
	text-transform: uppercase;
}
h1{
	font-size: 48px;
	line-height: 56px;
}
h2{
	font-size: 40px;	
	line-height: 48px;
}
h3{
	font-size: 32px;	
	line-height: 40px;
}
h4{
	font-size: 24px;	
	line-height: 32px;
}
h5{
	font-size: 16px;	
	line-height: 24px;
	font-weight: 400;
}
h6{
	font-size: 12px;	
	line-height: 18px;
	font-weight: 400;
}

.title{
	font-weight: 300;
	color: #e74c3c;
	margin: 0 0 8px 0;
	padding: 0;
}
.subtitle{
	font-weight: 300;
	color: #6c6c6c;
	margin: 0 0 56px 0; 
	padding: 0;
}

/* --------------------------------
Helper Classes
-------------------------------- */

/* Colors */
.white{color:#ffffff !important;}
.color {color: #e74c3c;}
.light-gray {color:#6c6c6c !important;}
.dark-gray {color:#2f2f2f !important;}

/* Alignment */
.left-align{text-align: left;}
.right-align{text-align: right;}
.center-align{text-align: center;}

/* Spacing */
.extra-margin{margin: 56px 0 !important;}

/* --------------------------------
Images
-------------------------------- */

img.scale-with-grid {
	max-width: 100%;
	height: auto;
}

/* --------------------------------
Buttons
-------------------------------- */

a.button{
	color: #fff !important;
	background: #e74c3c;
	display: inline-block;
	padding: 8px 16px;
	text-transform: uppercase;
	font-weight: 400;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
a.button:hover{background: #6c6c6c;}
a.button.selected{color:#fff !important;}

/* --------------------------------
Form Inputs
-------------------------------- */

input,
textarea{
	width:100%;
	padding: 16px;
	font-size: 20px;
	border:1px solid rgba(47,47,47,.3);
	color:#6c6c6c !important;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
input:focus,
textarea:focus{
		outline: none;
		border:1px solid rgba(47,47,47,.6);
		color:#2f2f2f;	
		background:rgba(47,47,47,.1) 	
}
input:hover,
textarea:hover{
		background:rgba(47,47,47,.1) 	
}

/* --------------------------------
Tooltips
-------------------------------- */

.tipper { 
	height: 1px; 
	left: -99999px; 
	position: absolute; 
	pointer-events: none; 
	top: -99999px; 
	width: 1px; 
}
.tipper .tipper-content { 
	background: rgba(0, 0, 0, 0.85); 
	border-radius: 4px; 
	color: #fff; 
	display: block; 
	float: left; 
	font-size: 14px; 
	font-weight: 400; 
	margin: 0; 
	padding: 8px 12px; 
	position: relative; 
	white-space: nowrap; 
}
.tipper-content:after {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(0, 0, 0, 0);
	border-top-color: rgba(0, 0, 0, 0.85); 
	border-width: 10px;
	margin-left: -10px;
}

/* --------------------------------
Callout Boxes
-------------------------------- */

.callout-box{
	background: #ecf0f1;
	margin: 24px 0;
	padding: 16px;
	border-left: 4px solid #6c6c6c;
	position: relative;
}
.callout-box.co-colored-box{border-left: 4px solid #e74c3c;}
.callout-box.co-colored-box h5 {color:#e74c3c;}
.callout-box.co-icon-box{
	padding-left: 75px;
}
.callout-box.co-icon-box i{
	position: absolute;
	left: 12px;	
	top: 30px;
	font-size: 48px;
	color:#6c6c6c;
}

/* --------------------------------
Block Quotes
-------------------------------- */

blockquote{
	width: 75%;
	margin: 0 auto;
	font-size: 48px;
	line-height: 56px;
}
blockquote i{
	display: inline-block;
	padding-top: 16px;
	font-size: 28px;
	opacity: .5;
}
blockquote i.fa-quote-left{float: left;}
blockquote i.fa-quote-right{float: right;}
blockquote span {
	display: block;
	font-size: 24px;
}
blockquote span:before{content: "\2013  ";}

/* --------------------------------
Social Media Buttons
-------------------------------- */

a.social-btn{
	display: inline-block;
	width: 32px;
	height: 32px;
	background: #ecf0f1;
	color:#6c6c6c;
	text-align: center;
	padding: 4px 0 0 1px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
a.social-btn:hover{color:#fff;} 
a.facebook-btn:hover{background:#3B5998;}
a.twitter-btn:hover{background:#00aced;}
a.envelope-btn:hover{background:#2f2f2f;}
a.tumblr-btn:hover{background:#32506d;}
a.instagram-btn:hover{background:#3f729b;}
a.heart-btn:hover{background:#c0392b;}
a.linkedin-btn:hover{background:#007bb6;}
a.vimeo-btn:hover{background:#aad450;}
a.youtube-btn:hover{background:#bb0000;}
a.google-plus-btn:hover{background:#dd4b39;}
a.flickr-btn:hover{background:#ff0084;}
a.skype-btn:hover{background:#12A5F4;}
a.dropbox-btn:hover{background:#3d9ae8;}
a.thumbs-btn:hover{background:#3B5998;}
a.dribbble-btn:hover{background:#ea4c89;}
a.pinterest-btn:hover{background:#cb2027;}
a.apple-btn:hover{background:#2f2f2f;}
a.windows-btn:hover{background:#00bbf4;}
a.github-btn:hover{background:#2f2f2f;}
a.android-btn:hover{background:#84bc00;}
a.rss-btn:hover{background:#fa9829;}
a.html5-btn:hover{background:#e15403;}
a.css3-btn:hover{background:#006ebc;}
a.twitter-square-btn:hover{background:#00aced;}

/* --------------------------------
Alert Boxes
-------------------------------- */

.alert{
	position: relative;
	padding: 8px 32px 8px 8px;
	margin: 8px 0;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
.alert span{font-weight: 400;}
.alert span.close-alert{
	position: absolute;
	top: 14px;
	right: 12px;
	display: block;
	width: 12px;
	height: 12px;
	background: url(../images/close-btn-dark.png);
	background-size: 12px 12px;
	cursor: pointer;
	opacity: 0.2;
}
.alert.congrats{
	border:1px solid rgba(39,174,96,.4);
	background: rgba(39,174,96,.2);
	color: #1b954f;
}
.alert.info{
	border:1px solid rgba(41,128,185,.4);
	background: rgba(41,128,185,.2);
	color: #1c6a9d;
}
.alert.warning{
	border:1px solid rgba(243,156,18,.4);
	background: rgba(243,156,18,.2);
	color: #de8c0a;
}
.alert.danger{
	border:1px solid rgba(192,57,43,.4);
	background: rgba(192,57,43,.2);
	color: #af3022;
}

@media(max-width: 500px){

	h2{
		font-size: 30px;	
		line-height: 38px;
	}

}