/*
Colour Reference:
	light-background: #efebe9
	darker-light-bg : #E2DAD8;
	brown text color: #3e2723

*/
a:link, a:visited, a:link:active, a:visited:active { 
    /*color: #efebe9;*/
    color: #3e2723;
    text-decoration: none;
}

a:hover{
	cursor:pointer;
}

html, body{
	margin: 0 auto;
	width: 100%;
	height:; 100%;
}

body{
	background-color: #efebe9;
	width:100%;
	height:100%;
	padding:0;
	margin:0;
	display:block;
	font-family: 'Raleway', sans-serif;
	font-weight: 300;
	overflow: auto;
/*	color:#291400;*/
	color: #3e2723;
}

.nav-container a{
	letter-spacing: 1px;
}

#intro{
	font-size: 45px;
	line-height: 100px;
	text-align: center;
	margin: 0 auto;
	margin-top: 75px;
	margin-bottom: 75px;
}

#intro p{
	margin: 0px auto;
}
	
#about{
	display:block;
	width:100%;
	height: 100px;
	padding-top: 120px;
	text-align: center;
}

#about-desc{
	font-family: 'Raleway', sans-serif;
	font-weight: 400;
	}

/*#projects{
		display:block;
	width:100%;
	height: 100px;
	padding-top: 120px;
	text-align: center;
	background-color: #E3E3E3;
}*/

#main{
	width:100%;
	height: 800px;
}

#box-wrapper{
	width: 100%;
	height: 70%;
	margin: 0 auto;
}

.box{
	width: 33.33%;
	height: 60%;
	margin: 0 auto;
	float: left;
		display: block;
	font-size: 18px;
	line-height: 37px;
	text-align: justify;
}



.box-box{
	width: 82%;
	height: 100%;
	margin: auto;

}

span.underline{
	color: #3e2723;
	padding: 0;
	text-decoration: none;
	border-bottom: 3px solid #3e2723;
}

span#syde, #sports, #design{
	font-weight: bold;
}

span#underline-hover{
	font-size: 55px;
/*	text-decoration: underline;*/
	color: #3e2723;
}

section {
  padding-top: 40px;
  height: 1200px;
  width: 100%; }

 section .content {
    margin: 0px auto;
    max-width: 1140px; }

@media screen and (max-width: 640px) {
	section .content {
		width: 90%; } 
	}

/*section .content a {
	color: #002e40; 
}*/

p.header{
	margin: 0 auto;
	margin-top:40px;
	text-align: center;
	font-size: 45px;
}

.projects-box{
	width: 50%;
	height: 70%;
	text-align: justify;
}

.single-project{
	width: 80%;
	margin 0 auto;
}

.single-project p{
	width: 100%;
	margin 2px auto;
}

#projects-intro{
	margin:auto;
	width:100%;
	margin-bottom: 75px;
}

#about-img{
  	margin:auto;
}

a {
  cursor: pointer; }

ul {
  list-style: none; }

.nav-container {
  background-color: #3e2723;
  width: 100%;
  position: fixed;
  left: 0px; }

nav {
  text-align: center;
  width: 700px;
  margin: 0px auto; }

nav ul {padding: 0px;}

nav li {
	width: 32%;
    display: inline-block; 
}
    
nav li a {
	font-size: 18px;
	/*color: #efebe9; */
	color: #ffffff; 
	padding-bottom: 3px;
}
    
nav li a.active {border-bottom: solid 1px #efebe9; }
  
@media screen and (max-width: 640px) {
	nav {width: 90%; }
     
    nav li a {font-size: 18px; } }


.projects-box div{
	width:82%;
	margin:auto;
}

.contacts-img{
	height: 70px;
	width:70px;
	display:block;
	margin:auto;
}

#header-contacts{
	margin-bottom: 110px;
}

.email{
	width:340px;
	height:70%;
	margin:auto;
	text-align:left;
	font-size:20px;
	margin-top: 70px;
	line-height: 180%;
}
#ul-follow{
	margin:0 auto;
	text-align: left;
	padding: 0;
	width: 100%;
}

#ul-follow li{
	display: inline-block;
	/*width:28%;*/
	list-style-type: none;
	color: #efebe9;
	margin: 0px auto;
}


@media screen and (max-width: 768px) {
	div.box{
		width: 100%;
		height: 60%;
		margin: 0 auto;
	}

	div.projects-box{
		width: 80%;
		height: 70%;
		text-align: justify;
		margin:auto;
	}
}



button {
  position: relative;
  display:block;
  height: 45px;
  width: 100px;
  margin: 10px 7px;
  padding: 5px 5px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 2px;
  color: #3e2723;
  border: 1.5px #3e2723 solid;
  border-radius: 4px;
  /*text-transform: uppercase;*/
  outline: 0;
  overflow:hidden;
  background: none;
  z-index: 1;
  cursor: pointer;
  transition:         0.08s ease-in;
  -o-transition:      0.08s ease-in;
  -ms-transition:     0.08s ease-in;
  -moz-transition:    0.08s ease-in;
  -webkit-transition: 0.08s ease-in;
}

.fill:hover {
  color: #efebe9;
}

.fill:before {
  content: "";
  position: absolute;
  background: #3e2723;
  bottom: 0;
  left: 0;
  right: 0;
  top: 100%;
  z-index: -1;
  -webkit-transition: top 0.09s ease-in;
}

.fill:hover:before {
  top: 0;
}

#ul-followw{
	margin:0 auto;
	text-align: left;
	padding: 0;
	width: 100%;
}

#ul-followw li{
	display: inline-block;
	width:32%;
	list-style-type: none;
	color: #efebe9;
	margin: 0px auto;
}