@charset "UTF-8";
/* CSS Document */


/*Desktop / Global View*/
.main{ padding-top:3%;}
.row { padding: 10% 0;}
.green {background-color:#7accc8;}

body {
	font-family: 'Quick Sand', sans-serif;
	max-width: 1024px;
	margin-left: auto;
	margin-right: auto;
	background-color: #DDDDDD;
}

.col {
	float: left;
	padding: 1%;
}

.col-lg {
	width: 31.3%;
}

.col-lg img {
	width: 100%;
	height: auto;
	display: block;
}

.slicknav_menu {
	display: none;
}

#menu {
	float: right;
}

#menu li {
	display: inline-block;
}

#menu li a {
	text-decoration: none;
	color: #4e4e4e;
	padding: 8px;
	font-size: 18px;
}

#design menu{
	list-style-type: none;
}

#design menu{
	float: right;
}

#design menu li{
	text-decoration: none;
	display: inline-block;
}

#design menu li a{
    list-style-type: none;
	color: #4e4e4e;
	padding: 8px;
	font-size: 18px;
}

header {
	padding: 10px 20px 20px 20px;
}


.hero {
	background-image: url('../images/hero-background.jpg');
	padding: 52px 0px 72px 72px;
	width: 100%;
	position: relative;
}


.subheading {
	color: #fff;
	font-weight: 300;
	font-size: 33px;
	margin-bottom: -54px;
}

h1 {
	color: #fff;
	font-weight: 300;
	font-size: 52px;
	margin-bottom: -5px;
}

h2{ 
	font-weight: 300;
	font-family: 'Quick Sand', sans-serif;
	font-color: #000;
	font-size: 2.5em;
	margin: 0.67em;
}

h2.bio{ 
     color: #3f7f7c;
}

bio.p {
	float:none;
	fontcolor: #fff;
}

.heading-body-copy {
	color: #fff;
	margin-right: 20%;
}

.lets-chat {
	background-color: #f1474c;
	padding: 8px 30px;
	text-decoration: none;
	color: #FFF;
}

img{ 
   max-width: 100%;
}

img.avatar{
	border-radius: 800px;
	border: 5px solid #fff;
}

img:hover {
	opacity: 0.8
}

/*Contact Form*/
/* Style inputs, select elements and textareas */
input[type=text], select, textarea{
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;
}

/* Style the label to display next to the inputs */
label {
  padding: 12px 12px 12px 0;
  display: inline-block;
  color:#808080;
}

/* Style the submit button */
input[type=submit] {
  background-color: #42d0c4;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
}

/* Style the container */
.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

/* Floating column for labels: 25% width */
.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}

/* Floating column for inputs: 75% width */
.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/*Footer
_________________________________________*/
ul.social{
	display: block;
	margin: 5% 0;
	list-style-type: none;
	text-align: center;
}

ul.social li{
	font-size: 3em;
	display: inline;
	padding: 0 2%;
}

ul.social li a{color: #666;}

ul.social li.facebook a:hover{color: rgb(59,89,152);}

ul.social li.twitter a:hover{color: rgb(0, 172, 237);}

ul.social li.linkedin a:hover{color: rgb(0, 123, 182);}

p.copyright{
	text-align: center;
	color: #666;
	font-size: 1em;
}




/*Tablet View*/

@media (max-width: 768px) {

#menu li {
	display: block;
	text-align: right;
}

	.col-md {
		width: 48%;
	}
	

}






/*Mobile View*/

@media (max-width: 400px) {


	.slicknav_menu {
		display: block;
	}

	#menu {
		display: none;
	}
	
	.col-sm {
		width: 100%;
	}

	.col {
		padding: 0%;
	}
	
}