/* Main color ----> #2ecc71 */

/*-------------------*/
/* Main Styles       */
/*-------------------*/
*{
  margin:0;
  padding:0;
  box-sizing: border-box;
}

html,
body{
  font-size: 20px;
  font-weight: 300;
  font-family: 'Lato', 'Ariel', sans-serif;
  color: #fff;
}

/*-------------------*/
/* Reusable Code     */
/*-------------------*/

h1{
  font-size: 250%;
}

span{
  color: #2ecc71;
  font-size: 125%;
  font-style: italic;
}

a:link,
a:visited{
  color: #fff;
  padding-bottom:1px;
}

a:hover,
a:active{
  text-decoration: none;
  color: #fff;
}

form{
  margin-top: 10%;
}

textarea{
  width: 90%;
  height: 4em;
}

/*-------------------*/
/* Header            */
/*-------------------*/
header{
  background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(img/fuji.jpg);
  background-size: cover;
  background-position: center;
  height:100vh;
  background-attachment: fixed;
  text-align: center;
}

/*-------------------*/
/* Navigation        */
/*-------------------*/

.main-nav{
  color: #fff;
  font-size: 100%;
  text-decoration: none;
  text-align: center;
  padding: 0;
  margin-top: 80px;
}

.main-nav li {
  list-style: none;
  display:inline-block;
  text-align: center;
  margin: 0 20px;
}

.main-nav li a:link,
.main-nav li a:visited{
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  padding: 8px 0;;
  border-bottom: solid 2px #2ecc71 transparent;
  -webkit-transition:border-bottom  0.2s, color 0.2s;
  transition: border-bottom  0.2s, color 0.2s;
}

.main-nav li a:hover,
.main-nav li a:active{
  text-decoration: none;
  color: #fff;
  border-bottom: solid 2px #2ecc71;
}

.logo-image{
  height: 180px;
  width: auto;
  margin-top: 30px;
}

/*-------------------*/
/* Caption           */
/*-------------------*/
.caption{
  padding-top: 6%;
  padding-bottom: 2%;
}

/*-------------------*/
/*Services           */
/*-------------------*/

.services{
  margin-top: 2em;
}
.services p{
  text-align: center;
  padding-left: 20%;
  padding-right: 20%;
}

.services span{
  margin-bottom: 5px;
}
.icon-big{
  font-size: 350%;
  display:block;
  color: #fff;
}

/*-------------------*/
/*ShowCase           */
/*-------------------*/
.showcase{
  margin-top: 20px;
  margin-bottom: 20px;
}

.section-title{
  color: #2ecc71;
  font-weight: 400;
  font-size: 180%;
}

.full-width{
  margin-top: 10px;
}

.full-width img{
  width: 100%;
  height: auto;
}

.description{
  color: #333;
  font-size: 125%;
  text-align: center;
  padding-top: 30%;
}

/*-------------------*/
/*About Me           */
/*-------------------*/
.section-about{
  background-color: #f9f9f9;
  margin-top: 20px;
  margin-bottom: 20px;
}
.profile-pic{
  width: 28%;
  border-radius: 50%;
  margin-left: 33%;
  margin-right: auto;
  padding: 20px;
}

.bio-text p{
  color: #333;
  padding-left: 5%;
  padding-right: 5%;
}

/*-------------------*/
/*Contact Me         */
/*-------------------*/

.contact-form{
  color: #333;
}

.input-field input{
  width: 70%;
}

.button{
  margin-top: 1em;
  text-align: center;
}
/* ------------------------------ */
/* Buttons */
/* ------------------------------ */
.btn:link,
.btn:visited,
input[type=submit] {
  display:inline-block;
  padding: 10px 30px;
  font-weight: 300;
  text-decoration:none;
  border-radius: 200px;
  -webkit-transition:background-color 0.2s, border 0.2s, color 0.2s;
  transition: background-color 0.2s, border 0.2s, color 0.2s;
}

.btn-full:link,
.btn-full:visited,
input[type=submit]{
  background-color: #2ecc71;
  border: 1px solid #2ecc71;
  color: #fff;
  margin-right: 15px;
}

.btn:hover,
.btn:active,
input[type=submit]:hover,
input[type=submit]:active {
  background-color: #20a759;
}

.btn-full:hover,
.btn-full:active.
input[type=submit]{
  border: 1px solid #2ecc71;
}