/*----BASE STYLES-----*/

body {
  font-family: 'Roboto Slab', serif;

}

#portfolio {
  height: 780px;
  background: #ffffff;/*#E6EEF1;/*#E8EEF4;/*#f0f0f5;*/
  margin: 0 auto;
}

#about {
  background: #F7E2E0;/*#095156;/*#087e8b;*/
  margin: 0 auto;
  height: 600px;
}

#contact {
  background: #095156;/*#bc5664;#f0f0f5;*/
  margin: 0 auto;
  height: 315px;
}

#home {
  margin: 0 auto;
}

/*----GRID-----*/

.full-width {
  width: 1200px;
  margin: 0 auto;
  /*clear: both;*/
}

.half-width {
  width: 600px;
  float: right;
  margin: 0 auto;
}

.third-width {
  width: 400px;
  margin: 0 auto;
  float: left;
}

/*main {
  margin-top: 30px;
}*/

/*----HEADER-----*/

img {
width: 100%;
}

 header {
 background: url('../img/freelancedesigner.jpg');
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: contain;
  /* background-size: cover;*/
   background-position: top 20px;
   background-color: #F7E2E0;
   height: 575px;/*770px;*/
 }

 header .full-width {
    padding-top: 45px; /*100px;*/
}

nav {
  width: 100%;
  font-family: 'Roboto', sans-serif;
  text-align: center;
  overflow: hidden;
  background-color: #ffffff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  border-bottom: 2px solid;
  border-bottom-color: DarkGrey;
  height: 45px;/*45px; */
}


nav span a {
  text-decoration: none;
  color: #095156;
  font-size: 19px;
  margin-left: 30px;
}


a:hover {
  color:	#BC5664;
}

.nav {
margin-top: 5px;/*2px;*/
}


/*.nav span #logo {
  margin-left: 30px;
}*/

#logo {
  margin-right: 1025px;/*1025px;*/
}


nav img {
  width: 32px;/*40,35px;*/
  height: 32px;/*28, 25px;*/
  margin-right: 40px;
}





 header h1 {
  font-size: 51px; /*54px*/
  font-family: 'Roboto Slab', serif;
  /*font-style: bold;*/
  color: #095156;
/*  color: #bdbf09; */
  text-align: center;
  padding: 200px 250px 0px;
  margin-right: 20px;
  margin: 0;
}


header h2 {
  font-size: 36px;
  font-family: 'Roboto', sans-serif;
  font-style: normal;
  font-weight: lighter;
  color: #095156;
  text-align: center;
  padding: 10px 250px 0px;
  margin: 0;

}

/*----PORTFOLIO-------*/

#portfolio .full-width {
  padding: 20px 0;
}

#portfolio h2 {
  text-align: center;
  color: #095156;
  font-size: 25px;
  padding-top: 30px;
  padding-bottom: 30px;
}

#projects {
  width: 350px;
  height: 250px;
  margin: 0px 23px;
  border: 2px solid DarkGrey;
  box-sizing: border-box;
}

#projects:hover {
    border: 4px solid #095156;/*#BC5664;*/

}

#portfolio h3 {
  font-size: 18px;
  font-family: 'Poppins', sans-serif;
  text-align: center;
  margin: 0 23px;
  color: #095156;
  padding-top: 30px;
}

#portfolio p {
  padding-top: 30px;
  padding-left: 10px;
  width: 300px;
  color: #095156;
  text-align: center;
  margin: 0px 30px;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;


}

#web-icon {
  height: 60px;
  width: 60px;
  margin-top: 70px;
  margin-left: 160px;
}

#phone-icon {
  height: 60px;
  width: 35px;
  margin-top: 67px;
  margin-left: 177px;
}

#paint-icon {
  height: 60px;
  width: 69px;
  margin-top: 70px;
  margin-left: 170px;
}


/*-----ABOUT----*/

#about .full-width {
  padding: 20px 0;
}

#about h2 {
  text-align: center;
  color: 	#095156;
  font-size: 25px;
  padding-top: 20px;
  padding-bottom: 20px;
}

/*
#about img {
  /*margin-top: 40px;
  margin-left: 150px;
  width: 500px;
  height: auto;
}*/

#about img {
  /*margin-top: 40px;*/
  margin-left: 150px;
  width: 350px;
  border-radius: 50%;
  height: auto;
}


#about p {
  width: 400px;
  margin-left: 70px;
  margin-bottom: 10px;
  padding: 0px 0px 10px;
  color: #095156;
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
}

#about input {
  margin-left: 545px;
  border: 2px solid #095156;
  color: #095156;
  font-family: 'Roboto', sans-serif;
}

input:hover {
  background-color: #BC5664;
}

/*----CONNECT----*/

#contact .full-width {
  padding: 20px 0;
  padding: 10px 0px 0px 10px;
}

#contact .third-width {
  text-align: center;
}

#contact h2 {
  text-align: center;
  color: 	#ffffff;
  font-size: 25px;
  padding-top: 10px;
  padding-bottom: 40px;
  margin-bottom: 10px;
}

#contact h3 {
  font-size: 20px;
  text-align: center;
  padding: 0px 15px 0px;
  color: #ffffff;
  font-family: 'Roboto', sans-serif;
}

#contact span {
  padding: 0px 15px 0px;
  color: #ffffff;
}

#contact a {
  text-decoration: none;
}


#contact img {
  height: 30px;
  width: 30px;
  padding: 0px 15px;
}


#linkedin:hover {
  background-image: url('linkedin-hover.png');
}



#contact p {
  clear: both;
  text-align: center;
  font-size: 15px;
  font-family: 'Roboto', sans-serif;
  padding-top: 50px;
  color: #ffffff;
}

#contact p span {
  color: #ffffff;
  margin: -13px;
}

/*----WEBSITES-----*/


#margins-1 {
margin-left: 80px;
}

#margins-2 {
  margin-left: 85px;
}

#margins-3 {
  margin-left: 108px;
}

#websites {
  width: 400px;
  height: 300px;
  margin: 0px 23px;
  border: 4px solid transparent;
  box-sizing: border-box;
}

#websites:hover {
    border: 4px solid #095156;

}


/*----WEB CASE STUDY-----*/

section #web-case-study {

}


/*----MOBILE CASE STUDY-----*/

section #mobile-case-study {

}