/* Navi */
header .navi{
  position:fixed;
  width:100%;
  height:100%;
  z-index:10;
  display:none;
}
/* Navi Title */
header .navi .navi_wrap .navi_title{
  position: relative;
  width:100%;
  background-color: #fff;
  overflow:hidden;
}
header .navi .navi_wrap .navi_title>i{
  font-size: 2.5em;
  margin:1.5% 0 1.5% 15%;
  cursor:pointer;
}
header .navi .navi_wrap .navi_title>a>p{
  display:inline-block;
  font-size: 2em;
  float:right;
  margin:1.5% 15% 1.5% 0;
  text-decoration: none;
  color:black;
}
/* Navi Menu */
header .navi .navi_wrap .navi_menu{
  position:relative;
  width:100%;
  padding:5%;
  background-color: #000;
  opacity:0.8;
}
header .navi .navi_wrap .navi_menu .first_navi_menu{
  position:relative;
  width:100%;
  text-align: center;
  overflow: hidden;
}
header .navi .navi_wrap .navi_menu .first_navi_menu>a>p{
  color:#fff;
  font-size: 1.5em;
  margin-top:10px;
}
header .navi .navi_wrap .navi_menu .first_navi_menu>a>h3{
  color:#fff;
  font-size: 5em;
}
header .navi .navi_wrap .navi_menu .second_navi_menu{
  position: relative;
  width:100%;
  text-align: center;
  overflow: hidden;
}
header .navi .navi_wrap .navi_menu .second_navi_menu>a>p{
  color:#fff;
  font-size: 1.5em;
}
header .navi .navi_wrap .navi_menu .second_navi_menu>a>h3{
  color:#fff;
  font-size: 5em;
}
header .navi .navi_wrap .navi_menu .third_navi_menu{
  position: relative;
  width:100%;
  text-align: center;
  overflow: hidden;
}
header .navi .navi_wrap .navi_menu .third_navi_menu>a>p{
  color:#fff;
  font-size: 1.5em;
}
header .navi .navi_wrap .navi_menu .third_navi_menu>a>h3{
  color:#fff;
  font-size: 5em;
}


/* First-screen */
section .first_screen{
  position:relative;
  width:100%;
  background-image:url("../img/background.jpg");
  background-size:cover;
  }
section .first_screen .first_screen_wrap{
  position:relative;
  width:100%;
  overflow: hidden;
}
section .first_screen .first_screen_wrap .navi_title>i{
  font-size: 2.5em;
  margin:1.5% 0 1.5% 15%;
  cursor:pointer;
  color:#fff;
}
section .first_screen .first_screen_wrap .navi_title>a>p{
  display:inline-block;
  font-size: 2em;
  float:right;
  margin:1.5% 15% 1.5% 0;
  text-decoration: none;
  color:#fff;
}
section .first_screen .first_screen_wrap>h2{
  position:relative;
  margin-top:20%;
  font-size:5em;
  text-align: center;
  color: #fff;
}
section .first_screen .first_screen_wrap>p{
  position: relative;
  font-size: 2em;
  text-align: center;
  margin-bottom:10%;
  color:#fff;
}

/* About me */
section .about{
  position: relative;
  width:100%;
}
section .about .about_wrap{
  position:relative;
  margin-top:5%;
}
section .about .about_wrap>h2{
  text-align: center;
  font-size: 5em;
  font-weight: 700;
}
section .about .about_wrap .about-row{
  margin:5% 10%;
  overflow:hidden;
}
section .about .about_wrap .about-row .col-sm-4 .process_img{
  text-align: center;
  margin-bottom: 10%;
}
section .about .about_wrap .about-row .col-sm-4>p{
  margin-left: 15%;
  font-size: 1.5em;
}
section .about .about_wrap .about-row .col-sm-4>h3{
  margin-left: 15%;
  font-size:1.8em;
  font-weight: 700;
}

/* My projects*/
section .projects{
  position:relative;
}
section .projects .projects_wrap{
  position:relative;
  width:100%;
  overflow:hidden;
}
section .projects .projects_wrap>h2{
  text-align: center;
  padding:5%;
  font-size: 5em;
  font-weight: 700;
}
section .projects .projects_wrap .projects_row{
  position:relative;
  width:80%;
  margin:auto;
}
section .projects .projects_wrap .projects_row .thumbnail{
    height:350px;
}
section .projects .projects_wrap .projects_row .thumbnail>h3{
    text-align: center;
}
section .projects .projects_wrap .projects_row .thumbnail>p{
    padding:0 5%;
    font-size: 16px;
}
section .projects .projects_wrap .projects_row .thumbnail{
    color:black;
}

/* Footer */
footer .footer_wrap{
  position: relative;
  width:100%;
  padding:5% 15%;
  overflow: hidden;
  background-color: #333;
}
footer .footer_wrap .website_skills{
  position: relative;
  display: inline-block;
  font-size:1.5em;
  color:#fff;
  margin-left:15px;
}
footer .footer_wrap .personal_info{
  position: relative;
  display: inline-block;
  font-size:1.5em;
  text-align:center;
  float:right;
  color:#fff;
  margin-right:15px;
}
footer .footer_wrap .personal_info>h3{
  font-size: 1.7em;
  margin:0 0 10px 0;
}
footer .personal_info .social_networks .fa{
  position: relative;
  display: inline-block;
  margin:1%;
  color: #fff;
}