/*************************************

Template Name: Junker HQ based on and licenced from Diesel - Responsive vCard / CV Resume / Portfolio Template
Author: Theme_Choices
Version: 1.0
Design and Developed by: Artemio/Theme_Choices

****************************************/

/*================================================
            Table of contents  
==================================================

1. MAIN SECTION
2. PRELOADER
3. BACK TO TOP
4. HEADER SECTION
5. ABOUT SECTION
6. SERVICES SECTION
7. PORTFOLIO SECTION
8. EDUCATION SECTION
9. EXPERIENCE SECTION
10. JOURNAL SECTION
11. CONTACT SECTION
12. FOOTER SECTION

Colors:
Text Green: 808080
Gray accents: 808080
*/

/*================================================
             2. PRELOADER
==================================================*/

#st-preloader {
     position: fixed;
     width: 100%;
     height: 100%;
     left: 0;
     top: 0;
     background-color: #fff;
     z-index: 9999999;
}
#pre-status,
.preload-placeholder {
	background-image: url(../images/preloader.gif);
	background-position: center;
	background-repeat: no-repeat;
	height: 60px;
	left: 50%;
	margin: -20px 0 0 -20px;
	position: absolute;
	top: 50%;
	width: 60px;
}

.preload-placeholder {
	background: none;
	left: 0;
	margin: 0;
	text-align: center;
	top: 65%;
}

/*================================================
             3. BACK TO TOP
==================================================*/
.back-to-top {
      position: fixed;
      display: block;
      bottom: 2em;
      right: 1em;
      width: 3em;
      height: 3em;
      background: #808080;
      line-height: 3em;
      z-index: 9999;
      color: #fff;
      text-align: center;
      border: 1px solid #fff;
      visibility: hidden;
	  font-size:20px;
}
.back-to-top:hover{
	  background:#fff;
	  transition:1s;
	  -webkit-transition: all 0.5s ease-in-out;
	  -moz-transition: all 0.5s ease-in-out;
	  border:1px solid #808080;
}
.back-to-top-active {
      visibility: visible;
      -webkit-animation: back-to-top .3s ease-in;
      animation: back-to-top .3s ease-in;
}

/*================================================
             4. HEADER SECTION
==================================================*/
.home-header {
     background:  url(../images/header-bg.jpg);
     height:720px;
     background-size: cover;
	 background-position:center;
	 position:relative;
}
#particles-js {
     height: 100%;
     left: 0;
     position: absolute;
     top: 0;
     width: 100%;
	 z-index:9999;
}
.header {
	 background:#000;
     border-bottom: 1px solid #f5f5f5;
     position: relative;
     width: 100%;
     z-index: 998;
}
.navbar {
	 background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
	 border: medium none;
	 border-radius: 0;
	 margin-bottom: 0;
	 padding-bottom: 18px;
	 padding-top: 14px;
	 z-index:99999;
}
.navbar-right li {
     padding-bottom: 0;
     padding-top: 0px;
}
.navbar .navbar-right li a {
     color: #ffffff;
     font-family: "Signika", sans-serif;
     font-weight: 600;
     font-size: 15px;
     padding-top: 27px;
     padding-bottom: 10px;
     text-transform: uppercase;
     position: relative;
     display: block;
}
.navbar .navbar-right li a:hover{
	 background-color: none;
     color: #808080;
	 transition:1s;
	 -webkit-transition: all 0.5s ease-in-out;
	 -moz-transition: all 0.5s ease-in-out;
}
.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {
     background-color: none;
     color: #808080;
}
.navbar-inverse .navbar-brand {
     border: 2px solid #808080;
     color: #fff;
     font-family: "Roboto",sans-serif;
     font-size: 26px;
     font-weight: 700;
     margin-top: 10px;
     padding: 16px 35px;
     text-transform: uppercase;
     margin-bottom: 8px;
} 
div#sticker {
	padding:0px;
	margin:0px 0;
	background:#121111;
	width:100%;
}
.stick {
	background:#121111;
	position:fixed;
	top:0px;
	z-index:99999;
}
a:hover {
     text-decoration: none;
}
a:focus {
     outline: 0 solid;
}
.header-text{
	 color: #fff;
	 font-size: 60px;
	 text-align: center;
	 margin:200px 0px auto;
	 z-index:9999;
}
.header-text h1 {
     font-family: 'Signika', sans-serif;
     font-size: 65px;
     font-weight: 700;
     color: #fff;
     text-align: center;
     margin-bottom: 20px;
	 text-transform:uppercase;
	 letter-spacing:5px;
}
.header-text h1 span{
     font-family: 'Signika', sans-serif;
     font-size: 65px;
     font-weight: 700;
     color: #808080;
     text-align: center;
     margin-bottom: 20px;
}
.header-text p {
     font-family: 'Roboto', sans-serif;
	 font-size: 30px;
     font-weight: 400;
     color: #fff;
     text-align:center;
	 margin-bottom: 50px;
}
.header-text p span#typer{
    font-size: 30px !important;
}
.header-text button.btn1 {
     background: none;
     font-family: 'Signika', sans-serif;
     font-size: 32px;
     font-weight: 700;
     color: #fff;
     border: 2px solid #808080;
     padding: 10px 50px;
	 text-transform:uppercase;
	 transition: all 0.5s ease-in-out;
	 -webkit-transition: all 0.5s ease-in-out;
	 -moz-transition: all 0.5s ease-in-out;
}
.header-text button.btn1:hover{
     background: #fff;
     font-family: 'Signika', sans-serif;
     font-size: 32px;
     font-weight: 700;
     color: #808080;
     border: none;
     padding: 10px 40px;
	 border:1px solid #808080;
	 transition: all 0.5s ease-in-out;
	 -webkit-transition: all 0.5s ease-in-out;
	 -moz-transition: all 0.5s ease-in-out;
}


/*================================================
             10. PROJECTS SECTION
==================================================*/

.projects-section {
	 background:#fff;
	 padding-top: 50px;
     padding-bottom: 70px;
}
.projects-heading h2 {
     color: #808080;
     font-size: 36px;
     font-family: 'Signika', sans-serif;
     font-weight: 600;
     text-align: center;
     text-transform: uppercase;
	 padding-bottom:0px;
}
.projects-heading hr {
     border-top: 3px solid #808080;
     width: 5%;
     display: block;
     margin: 0px auto;
     padding-bottom: 70px;
}
.projects-desc img{
	width:100%;
}
.projects-desc h3{
	color:#222;
	font-size:24px;
	font-family: "Roboto",sans-serif;
	font-weight:700;
	padding-bottom:5px;
}
.projects-desc span{
	color:#323232;
	font-family: "Roboto",sans-serif;
	font-size:15px;
	font-weight:700;
}
.projects-desc i {
    color: #323232;
    font-size: 18px;
    padding-right: 5px;
    padding-left: 5px;
}
.projects-desc i:first-child {
    color: #323232;
    font-size: 18px;
    padding-right: 5px;
    padding-left: 0px;
}
.projects-desc p {
    color: #444;
    font-family: "Roboto",sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
	padding-top:10px;
}
.projects-desc a{
	background:#808080;
	border:none;
	color:#fff;
	border:2px solid #808080;
	font-family: "Roboto",sans-serif;
	font-weight:400;
	font-size:18px;
	padding:10px 15px;
	margin-top:10px;
	display:inline-block;
	transition:1s;
}
.projects-desc a:hover{
	background:#fff;
	border:2px solid #808080;
	color:#808080;
	font-family: "Roboto",sans-serif;
	font-weight:400;
	font-size:18px;
	padding:10px 15px;
	margin-top:10px;
	display:inline-block;
}


/*================================================
             11. SITES SECTION
==================================================*/

.sites-section {
	 background:#f4f7f9;
	 padding-top: 50px;
     padding-bottom: 70px;
}
.sites-heading h2 {
     color: #808080;
     font-size: 36px;
     font-family: 'Signika', sans-serif;
     font-weight: 600;
     text-align: center;
     text-transform: uppercase;
	 padding-bottom:0px;
}
.sites-heading hr {
     border-top: 3px solid #808080;
     width: 5%;
     display: block;
     margin: 0px auto;
     padding-bottom: 70px;
}
.sites-desc img{
	width:100%;
}
.sites-desc h3{
	color:#222;
	font-size:24px;
	font-family: "Roboto",sans-serif;
	font-weight:700;
	padding-bottom:5px;
}
.sites-desc span{
	color:#323232;
	font-family: "Roboto",sans-serif;
	font-size:15px;
	font-weight:700;
}
.sites-desc i {
    color: #323232;
    font-size: 18px;
    padding-right: 5px;
    padding-left: 5px;
}
.sites-desc i:first-child {
    color: #323232;
    font-size: 18px;
    padding-right: 5px;
    padding-left: 0px;
}
.sites-desc p {
    color: #444;
    font-family: "Roboto",sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
	padding-top:10px;
}
.sites-desc a{
	background:#808080;
	border:none;
	color:#fff;
	border:2px solid #808080;
	font-family: "Roboto",sans-serif;
	font-weight:400;
	font-size:18px;
	padding:10px 15px;
	margin-top:10px;
	display:inline-block;
	transition:1s;
}
.sites-desc a:hover{
	background:#fff;
	border:2px solid #808080;
	color:#808080;
	font-family: "Roboto",sans-serif;
	font-weight:400;
	font-size:18px;
	padding:10px 15px;
	margin-top:10px;
	display:inline-block;
}

/*================================================
             9. INTERVIEWS SECTION
==================================================*/
.interviews-section {
	 background:#fff;
	 padding-top: 50px;
     padding-bottom: 70px;
}
.interviews-heading h2 {
     color: #808080;
     font-size: 36px;
     font-family: 'Signika', sans-serif;
     font-weight: 600;
     text-align: center;
     text-transform: uppercase;
	 padding-bottom:0px;
}
.interviews-heading hr {
     border-top: 3px solid #808080;
     width: 5%;
     display: block;
     margin: 0px auto;
     padding-bottom: 50px;
}
.interviews-desc h3{
	color:#222;
	font-size:24px;
	font-family: "Roboto",sans-serif;
	font-weight:700;
	padding-bottom:5px;
}
.interviews-desc span{
	color:#323232;
	font-family: "Roboto",sans-serif;
	font-size:15px;
	font-weight:700;
}
.interviews-desc p {
    color: #444;
    font-family: "Roboto",sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
	padding-top:10px;
}
.interviews-desc a{
	background:#808080;
	border:none;
	color:#fff;
	border:2px solid #808080;
	font-family: "Roboto",sans-serif;
	font-weight:400;
	font-size:18px;
	padding:10px 15px;
	margin-top:10px;
	display:inline-block;
	transition:1s;
}
.interviews-desc a:hover{
	background:#fff;
	border:2px solid #808080;
	color:#808080;
	font-family: "Roboto",sans-serif;
	font-weight:400;
	font-size:18px;
	padding:10px 15px;
	margin-top:10px;
	display:inline-block;
}

/*================================================
             11. CONTACT SECTION
==================================================*/
.contact-section {
	 background:#f4f7f9;
	 padding-top: 50px;
     padding-bottom: 70px;
}
.contact-heading h2 {
     color: #808080;
     font-size: 36px;
     font-family: 'Signika', sans-serif;
     font-weight: 600;
     text-align: center;
     text-transform: uppercase;
	 padding-bottom:0px;
}
.contact-heading hr {
     border-top: 3px solid #808080;
     width: 5%;
     display: block;
     margin: 0px auto;
     padding-bottom: 70px;
}
.contact-text p {
	  color: #444;
	  font-family: "Roboto",sans-serif;
	  font-size: 16px;
	  font-weight: 400;
	  line-height: 28px;
}
.contact-text .list-contacts{
	  padding-left:0px;
	  padding-top:40px;
}
.contact-text .list-contacts li{
	  list-style:none;
}
.contact-text .list-contacts li{
	  color: #444;
	  font-family: "Roboto",sans-serif;
	  font-size: 16px;
	  font-weight: 400;
	  line-height: 28px;
	  margin-bottom:15px;
	  display:table;
}
.contact-text .list-contacts li i {
	  display: table-cell;
	  font-size: 21px;
	  margin-right: 20px;
	  width: 35px;
}
.contact-text .list-contacts li a{
	  color:#666;
}
.contact-input-wrap{
	  padding-left:0px;
}
.contact-input-wrap2{
	  padding-left:0px;
	  padding-right:0px;
}
.contact-form .form-control {
     border: 1px solid #222;
     border-radius: 0px;
     margin-bottom: 15px;
     height: 50px;
     color: #062033;
     font-family: "Roboto", sans-serif;
     font-size: 16px;
     font-weight: 400;
}
.contact-form #contact-message {
     height: 200px;
}
.contact-form .form-control::-webkit-input-placeholder {
     /* Chrome/Opera/Safari */
     color: #073557;
}
.contact-form .form-control::-moz-placeholder {
     /* Firefox 19+ */
     color: #073557;
}
.contact-form .form-control:-ms-input-placeholder {
     /* IE 10+ */
     color: #073557;
}
.contact-form .form-control:-moz-placeholder {
     /* Firefox 18- */
     color: #073557;
}
.contact-form .button-send {
	  background:#808080;
	  border:medium none;
	  color:#fff;
	  border:1px solid #808080;
	  font-family: "Roboto",sans-serif;
	  font-size: 18px;
	  font-weight: 400;
	  margin-top: 10px;
	  padding: 10px 15px;
	  transition: all 1s ease 0s;
}
.contact-form .button-send:hover {
	  background:none;
	  border: medium none;
	  color: #808080;
	  border:1px solid #808080;
	  font-family: "Roboto",sans-serif;
	  font-size: 18px;
	  font-weight: 400;
	  margin-top: 10px;
	  padding: 10px 15px;
	  transition: all 1s ease 0s;
}
.contact-form input.error{
	 border:1px solid #F00;
}
.contact-form textarea.error{
	 border:1px solid #F00;
}
.contact-form .error{
	 font-family: "Roboto",sans-serif;
	 font-size:18px;
	 font-weight:400;
	 color:#F00;
}
 
/*================================================
             12. FOOTER SECTION
==================================================*/ 
.footer-section {
     background: #393939 none repeat scroll 0 0;
     padding-bottom: 50px;
     padding-top: 70px;
}
.footer-text .social-icon{
	 padding-bottom:30px;
	 text-align:center;
	 margin-left:-10px;
}
.footer-text .social-icon a {
	 background:#808080;
     border: 2px solid #808080;
     color: #fff;
     font-size: 21px;
     margin-left: 5px;
	 margin-right:5px;
	 padding:10px;
     transition: all 0.5s ease-in-out 0s;
}
.footer-text .social-icon a:hover{
	 background:#fff;
     border: 2px solid #808080;
     color: #808080;
     font-size: 21px;
     margin-left: 5px;
	 margin-right:5px;
	 padding:10px;
}
.footer-text p {
     color: #fff;
     font-family: "Roboto", sans-serif;
     font-size: 18px;
     font-weight: 400;
     text-align: center;
}
.footer-text p span{
     color: #808080;
     font-family: "Roboto", sans-serif;
     font-size: 18px;
     font-weight: 600;
     text-align: center;
}