/* FONT */
@import url(http://fonts.googleapis.com/css?family=Lobster);
@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);

/* MAIN */

html, body {margin:0;padding:0;height:100%;font-family: 'Montserrat', sans-serif;}

h2{
	font-size: 28px;
	text-align: center;
	margin-bottom: 20px;
	color: #006400;
}

.btn{
	background: #006400;
	color: #fff;
}

.btn:hover{
	color: #fff;
}

.btn:active{
	color: #fff;
}

.btn:visited{
	color: #fff;
}

.btn:link{
	color: #fff;
}

#load{
	background: #006400;
	width:100%;
	height: 5px;
	margin-top: -5px;
}

#bg-img{
	height: 100%;
	
    text-align: center;
    margin-top: -20px;
    background: url(../img/bg.jpg);
  	background-image: 
    linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),
    url(../img/bg.jpg);
    background-size: cover;
    text-align: center;
}

#bg-img h1{
	font-size: 112px;
	color: #fff;
	font-family: 'Montserrat', sans-serif;
	position: relative;
    top: 40%;
    transform: translateY(-40%);
}

#bg-img p{
	font-size: 32px;
	color: #fff;
	font-family: 'Montserrat', sans-serif;
	position: relative;
    top: 40%;
    transform: translateY(-40%);
    margin-bottom: 50px;
}

#bg-img #arrow a{
	color: #fff;
	font-size: 50px;
    border-radius: 50%;
    position: relative;

}

.icon-bar{
	background-color: #fff
}

@media screen and (max-width: 1020px){

	#bg-img h1{
		font-size: 74px;
	}

	#bg-img p{
		font-size: 24px;
		margin-bottom: 20px;
	}

}

@media screen and (max-width: 767px){

	#headermenu{
		float: left;
		text-align: left;
		width: 100%;
		border: 0px;
	}

	#bg-img h1{
		font-size: 54px;
	}

}

@media screen and (max-width: 500px){

	#bg-img h1{
		font-size: 44px;
	}

	#bg-img p{
		font-size: 18px;
		margin-bottom: 20px;
	}

}

/* BODY */

#about{
	padding: 20px 0;
	max-width: 1200px;
	width: 70%;
	margin: 0 auto;
	border-bottom: 1px solid #ccc;
	text-align: center;
	background: #fff;
}

#about p{
	font-size: 16px;
}

#projects{
	padding: 20px 0;
	margin: 0 auto;
	max-width: 1200px;
	width: 70%;
	border-bottom: 1px solid #ccc;
	text-align: center;
}

#projects p{
	font-size: 16px;
}

#projects ul {         
  padding:0 0 0 0;
  margin:0 0 0 0;
}

#projects ul li {     
  list-style:none;
  margin-bottom:25px;           
}

#projects ul li img {
  cursor: pointer;
}

#contact{
	width: 70%;
	margin: 0 auto;
	padding: 20px 0 30px 0;
	text-align: center;
}

#contact a{
	color: #01A084;
}

#contact p{
	font-size: 20px;
}

#contact i{
	font-size: 36px;
	margin-left: 5px;
}

#contact input{
	width: 80%;
	margin: 0 auto;
}

#contact textarea{
	width: 80%;
	margin: 0 auto;
	margin-bottom: 20px;
	resize:vertical;
}

p #mail{
	font-size: 34px;
}

#footer{
	width: 70%;
	margin: 0 auto;
	border-top: 1px solid #ccc;
	text-align: center;
	padding: 10px 0 5px 0;
}

#footer p{
	font-size: 14px;
}

#footer a{
	color: #01A084;
	text-decoration: underline;
}

@media screen and (max-width: 767px){

	#about{
		width: 90%;
	}

	#projects{
		width: 90%;
	}

	#contact{
		width: 90%;
	}

	#footer{
		width: 90%;
	}

}
/*
#contact p #twitter{
	color: #00aced;
}

#contact p #github{
	color: #333;
}

#contact p #dribbble{
	color: #ea4c89;
}

#contact p #linkedin{
	color: #007bb6;
}
*/

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}