/*
    Steven Benton Portfolio Template Styles
    By TeamXcel
*/

/*  ==========================================================================
    Table of Contets
    ==========================================================================
    
    1.0 Common Styles
    2.0 Header / Navigation
    3.0 Hero Section
    3.0 Promo Section
    4.0 Feature Section
    5.0 Services Section
    6.0 Works Section
    7.0 Skills Section
    8.0 Our Team Section
    9.0 Testimonial Section
    10.0 Call To Action
    11.0 Map Section
    12.0 Contact Section
    13.0 Footer Section
    
    ==========================================================================
    Steven Benton Portfolio Template
    ========================================================================== */

	@import url('https://fonts.googleapis.com/css?family=Arimo:400,700|Roboto');
	
/*  ==========================================================================
    Common Styles
    ========================================================================== */
*{
	padding:0;
	margin:0;
}
body{
    background-color: #fff;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    line-height: 23px;
    color: #333;
    font-weight: 400;
    position: relative;
    overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6{
    font-family: 'Arimo', sans-serif;
}
h1{
	font-size: 60px;
    font-weight: 700;
}
h2{
	font-size: 28px;
    margin: 0 0 10px;
    font-weight: 700;
}
h3{
	font-size: 16px;
    margin: 0 0 10px;
	font-weight: 400;
}
h4,h5,h6{
	font-size: 14px;
    margin: 0 0 10px;
}
img{
    border: none;
    outline:none;
}
ul{
    display: block;
    list-style: none;
    padding: 0;
    margin: 0;
}
p, li, a{
    letter-spacing: 1px;
}
p{
    font-size: 14px;
	margin-bottom: 15px;
}
a, a:hover{
	text-decoration: none;
}
a:focus{
    outline: 0;
    text-decoration: none;
}
/* Helper Class */
.padding{
    padding: 100px 0;
}
.mb-40{
	margin-bottom: 40px;
}
.mb-30{
    margin-bottom: 30px;
}
.no-padding{
    padding: 0;
}
.dark-color{
	color: #181818;
}
.light-color{
	color: #ffffff;
}
.align-left{
    text-align: left;
}
.align-right{
    text-align: right;
}
.align-center{
    text-align: center;
}
.fl-right{
	float: right;
}
.fl-left{
	float: left;
}
.display-table{
    width: 100%;
    height: 100%;
    display: table;
}
.table-cell{
	display: table-cell;
	vertical-align: middle;
}

/* Transition Effect */
a,a:hover, .header_area, .service_icon, .portfolio_filter li, .portfolio_filter li:hover, .overlay, .owl-dot, .owl-dot.active{
	-webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

/* Section Heading */
.section_heading{
    display: block;
    text-align: center;
}
.section_heading h2{
    margin: 0 0 10px;
}
.section_heading p{
    margin: 0;
}

/* Button Styles */
.lg_btn{
    line-height: 45px;
    font-size: 14px;
    font-family: 'Arimo', sans-serif;
    display: inline-block;
    padding: 0 25px;
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    overflow: hidden;
     -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}
.lg_btn:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 100%;
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.lg_btn:hover:before, .lg_btn:focus:before, .lg_btn:active:before {
    -webkit-transform: scale(2);
    transform: scale(2);
}
.dark_btn.lg_btn{
    background: #181818;
    border: 1px solid #181818;
    color: #fff;
}
.dark_btn.lg_btn:before{
    background: #fff;
}
.light_btn.lg_btn{
    background-color: #fff;
    border: 1px solid #fff;
    color: #181818;
}
.light_btn.lg_btn:before{
    background: #181818;
}
.dark_btn.lg_btn:hover, 
.dark_btn.lg_btn:focus, 
.dark_btn.lg_btn:active {
    color: #181818;
}
.light_btn.lg_btn:hover, 
.light_btn.lg_btn:focus, 
.light_btn.lg_btn:active {
    color: #fff;
}

/* ==========================================================================
   Header Area
   ========================================================================== */
.header_area{
    background-color: rgba(255,255,255,0);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
    opacity: 0;
    z-index: 999;
}
.navbar{
    border: medium none;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    -ms-border-radius: 0;
    border-radius: 0;
    margin: 0;
    position: relative;
}
.scrollActive.header_area {
    background-color: rgba(255,255,255,1);
    opacity: 1;
    position: fixed;
    height: 60px;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
    -moz-box-shadow: 1px 0px 1px 0px #666;
    -webkit-box-shadow: 1px 0px 1px 0px #666;
    -ms-box-shadow: 1px 0px 1px 0px #666;
    box-shadow: 1px 0px 1px 0px #666;
}
.navbar-header{
    padding: 22px 0;
}
.scrollActive .navbar-header{
    padding: 18px 0;
}
.navbar-header .brand{}
.navbar-header .nav-btn{
    background-color: #181818;
}
.navbar-header .nav-btn .icon-bar{
    background-color: #fff;
}
.navbar-header .nav-btn:hover,
.navbar-header .nav-btn:focus{
    opacity: 0.8;
}

/* Nav Menu */
#navbar{
    z-index: 999;
}
ul.nav{}
ul.nav > li{
    margin: 0 15px;
}
ul.nav > li > a{
    color: #181818;
    font-family: 'Roboto', sans-serif;
    display: inline-block;
    vertical-align: middle;
    padding: 0;
    letter-spacing: 1px;
    font-size: 14px;
    font-weight: 400;
    line-height: 70px;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    overflow: hidden;
}
.scrollActive ul.nav > li > a{
    line-height: 60px;
}
ul.nav > li > a:hover,
ul.nav > li > a:focus,
ul.nav > li.active > a{
    background: none;
    color: #181818;
}
ul.nav > li > a:before,
ul.nav > li.active > a:before,
ul.nav > li > a:after,
ul.nav > li.active > a:after{
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    right: 50%;
    bottom: 20px;
    background: #181818;
    height: 1px;
    -webkit-transition-property: left, right;
    transition-property: left, right;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}
.scrollActive ul.nav > li > a:after{
    top: 18px;
}
.scrollActive ul.nav > li > a:before{
    bottom: 18px;
}
ul.nav > li > a:hover:after,
ul.nav > li.active > a:after,
ul.nav > li > a:hover:before,
ul.nav > li.active > a:before{
    left: 0;
    right: 0;
}

/* ==========================================================================
   Hero Section
   ========================================================================== */
.hero_section{
    background-image: url(../img/hero-ng.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    -webkit-background-size: cover;
    background-size: cover;
    width: 100%;
    height: 700px;
    position: relative;
}
#particles-js{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
.hero_content{
    display: block;
    color: #fff;
}
.hero_content h1{
    margin: 0 0 10px;
}
.hero_content p{
    margin-bottom: 20px;
}

   
/* ==========================================================================
   About Section
   ========================================================================== */
.about_section{}
.about_thumb{}
.about_thumb img{
    margin-bottom: -100px;
    width: 100%;
}
.about_content{
    display: block;
    padding: 75px 0;
}
.about_content h2{}
.about_content p{}
.about_content .about_meta{
    margin-bottom: 25px;
}
.about_content .about_meta li{}
.about_content .about_meta li span{
    min-width: 80px;
    display: inline-block;
}

   
   
   
   
/* ==========================================================================
   Service Section
   ========================================================================== */
.service_section{
    background-color: #181818;
}
.service_items{}
.service_items .service_content{
    display: block;
    color: #fff;
    text-align: center;
    cursor: default;
}
.service_items .service_content .service_icon{
    width: 40px;
    height: 40px;
    border: 1px solid #fff;
    color: #fff;
    font-size: 16px;
    line-height: 40px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    margin: 0 auto;
}
.service_items .service_content:hover .service_icon{
    background-color: #fff;
    color: #181818;
}
.service_items .service_content h3{
    display: block;
    margin: 10px 0;
}
.service_items .service_content p{
    margin: 0;
}
   
/* ==========================================================================
   Portfolio Section
   ========================================================================== */
.portfolio_section{
    padding-bottom: 70px;
}
.portfolio_filter{
    display: block;
    text-align: center;
}
.portfolio_filter li{
	display: inline-block;
    border-top: 1px solid #181818;
    border-bottom: 1px solid #181818;
    color: #181818;
    letter-spacing: 1px;
    padding: 4px 10px;
    margin: 0 3px;
	vertical-align: middle;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-moz-osx-font-smoothing: grayscale;
	position: relative;
	-webkit-transition-property: color;
	transition-property: color;
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
}

.portfolio_filter li:before{
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #181818;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.portfolio_filter li.active, .portfolio_filter li:hover, .portfolio_filter li:focus, .portfolio_filter li:active{
    color: white;
    cursor: pointer;
}
.portfolio_filter li.active:before,
.portfolio_filter li:hover:before, .portfolio_filter li:focus:before, .portfolio_filter li:active:before{
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
    transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}

.portfolio_items{}
.portfolio_content{
    margin-bottom: 30px;
}
.portfolio_content figure{
    position: relative;
}
.portfolio_content figure img{
    width: 100%;
}
.portfolio_content figcaption.overlay{
    background-color: rgba(0,0,0,0.8);
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    text-align: center;
    opacity: 0;
}
.portfolio_content:hover figcaption.overlay{
    opacity: 1;
}
.portfolio_content figcaption.overlay a{
    width: 100%;
    height: 100%;
    display: table;
    color: #fff;
}
.portfolio_content figcaption.overlay h3{
    color: #fff;
    font-size: 18px;
    margin: 0 0 10px;
}
.portfolio_content figcaption.overlay p{
    margin: 0;
}




/* ==========================================================================
   Testimonial Section
   ========================================================================== */
.testimonial_section{
    background-color: #181818;
}
.testimonial_items{}
.testimonial_item{
    color: #fff;
    text-align: center;
}
.testimonial_item figure{
    width: 60px;
    height: 60px;
    overflow: hidden;
    margin: 0 auto;
}
.testimonial_item figure img{
    border: 3px solid #fff;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}
.testimonial_item h4{
    font-size: 16px;
    margin: 20px 0;
}
.testimonial_item p{}

.testimonial_items .owl-controls .owl-dots{
    display: block;
    text-align: center;
}
.testimonial_items .owl-controls .owl-dots .owl-dot{
    background-color: #fff;
    display: inline-block;
    width: 12px;
    height: 12px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    margin: 0 3px;
    -webkit-transform: scale(0.6);
    transform: scale(0.6);
}
.testimonial_items .owl-controls .owl-dots .owl-dot.active{
    -webkit-transform: scale(1);
    transform: scale(1);
}
   
/* ==========================================================================
   Contact Section
   ========================================================================== */
.contact_section{}
.contact_form{}
.contact_form .form-control{
    border-bottom: 1px solid #181818;
    color: #181818;
    padding: 10px;
}
.contact_form .form-control:hover,
.contact_form .form-control:focus{
    border-bottom: 1px solid #666;
}
.form-control{
    background: none;
    border: none;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
    box-shadow: none;
}
.form-control:hover,
.form-control:focus{
    border: none;
    box-shadow: none;
}
#form-messages{
    display: none;
}
#form-messages.alert-danger,
#form-messages.alert-success{
    display: block;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder{
   color: #181818 !important;
}

input:-moz-placeholder,
textarea:-moz-placeholder{ /* Firefox 18- */
   color: #181818 !important;  
}

input::-moz-placeholder,
textarea::-moz-placeholder{  /* Firefox 19+ */
   color: #181818 !important;  
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder{  
   color: #181818 !important;  
}
   
/* ==========================================================================
   Footer Section
   ========================================================================== */
.footer_section{
    background-color: #181818;
    display: block;
    padding: 30px 0;
    color: #fff;
}
.footer_section p{
    margin: 0;
}
.footer_section .address{
    display: block;
    text-align: left;
}
.footer_section .copyright{
    text-align: center;
}
.footer_section .copyright,
.social_links{
    padding: 10px 0;
}
.social_links{
    display: block;
    text-align: right;
}
.social_links li{
    display: inline-block;
    margin-left: 5px;
}
.social_links li a{
    background-color: #fff;
    color: #181818;
    display: inline-block;
    text-align: center;
    width: 25px;
    height: 25px;
    font-size: 14px;
    line-height: 25px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}