/*
    Template Name:boss-Portfolio landing teamplate
    Author: Themeturn
    Author URI: 
    Description: 
    Version: 1.0
*/

/* Table of Content
==================================================
1.  Global Styles
2.  Typography
3.  Common styles
4.  Navigation
5.  HEADER AREA
6.  SECTION ABOUT
7.  SECTION SERVICES
8.  SECTION PORTFOLIO
9.  SECTION FEATURES
10. SECTION TESTIMONIAL
11. SECTION CONTACT
12. SECTION FOOTER


*/

/* 1 - Google Font
------------------------------------------------------------------------*/
@font-face { 
 font-family: 'notokr-regular'; 
 src: url('/fonts/NotoKR-Regular/notokr-regular.eot'); 
 src: url('/fonts/NotoKR-Regularnotokr-regular.eot?#iefix') format('embedded-opentype'), 
 url('notokr-regular.woff2') format('woff2'), 
 url('notokr-regular.woff') format('woff'), 
 url('notokr-regular.ttf') format('truetype'), 
 url('notokr-regular.svg#notokr-regular') format('svg'); 
 font-weight: normal; 
 font-style: normal; 
}

/* 2 - General styles
------------------------------------------------------------------------*/
:-moz-selection {
    background-color: #e6ae49;
    color: #FFF;
}

::-moz-selection {
    background-color: #e6ae49;
    color: #FFF;
}

body {
    width: 100%;
    height: 100%;
    line-height: 24px;
    color: #6a6a6a;
    font-size: 13px;
    font-family: 'Noto Sans', sans-serif;
    font-weight: normal;
    letter-spacing: 1px;
}

html {
    width: 100%;
    height: 100%;
}

.no-padding{
    padding: 0;
}



a, a:focus, a:active, a:link, img {
    outline: none;
}


a {
    color:#555;
    -webkit-transition: color .2s ease;
    -moz-transition: color .2s ease;
    -ms-transition: color .2s ease;
    -o-transition: color .2s ease;
    transition: color .2s ease;
}


a {
    cursor: pointer;
    text-decoration: none;
    color: #323232;
    transition: all 0.25s ease 0s;
    -moz-transition: all 0.25s ease 0s;
    -webkit-transition: all 0.25s ease 0s;
    -o-transition: all 0.25s ease 0s;
}

    a:hover {
        color:#5E42A6;
        text-decoration: none;
        transition: all 0.25s ease 0s;
        -moz-transition: all 0.25s ease 0s;
        -webkit-transition: all 0.25s ease 0s;
        -o-transition: all 0.25s ease 0s;
    }

a:focus {
    outline:none;
    outline-offset:0;
}

a:link,
a:visited{
    text-decoration: none;
}


p {
    line-height: 26px;
    font-size: 13px;
    font-weight: 400;
    color: #666;

}
.dark-bg {
    background: #323232;
    color: #fff;
}


img {
     height: auto;
    max-width: 100%;
    border: none;
    outline: none;
    transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;
    -webkit-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
}

iframe,
audio {
    width: 100%;
    border: none;
}

ul,li{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

.parallax-overlay.white-overlay{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background: rgba(255, 255, 255, 0.6) none repeat scroll 0% 0%;
}
.parallax-overlay.black-overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background: rgba(0, 0, 0, 0.6) none repeat scroll 0% 0%;
}

/* 2.1 - Headings 
--------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
    color: #2a2a2a;
    text-transform: capitalize;
    font-family: 'Noto Sans',sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    margin-top: 0px;
    margin-bottom: 10px;
}

h1 {
    font-size: 43px;
    letter-spacing: 2px;
    line-height: 40px;
    font-weight: 900;
}


h2 {
    font-size: 27px;
    line-height: 37px;
}

h3 {
    font-size: 21px;
    line-height: 32px;
}

  

h4 {
    font-size: 17px;
    line-height: 28px;
}



h5 {
    font-size: 15px;
    line-height: 23px;
}

h6 {
    font-size: 14px;
    line-height: 18px;
    
}

/* buttons style */
.btn{
    padding: 14px 30px;
    font-size: 13px;
    font-weight: 700;
    border-radius: 0px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-primary{
    border:3px solid#5E42A6;
    background: #5E42A6;
    color:#fff ;
    -webkit-transition: all .3s ease 0s;
    -o-transition: all .3s ease 0s;
    transition: all .3s ease 0s;
}

.btn-primary:hover{
    background:#2A2A2A;
    border-color:#2A2A2A;
    color: #fff;
}


.btn-primary.black{
    background:#2A2A2A;
    border-color:#2A2A2A;
    color: #fff;
    padding: 12px 40px;
    -webkit-transition: all .3s ease 0s;
    -o-transition: all .3s ease 0s;
    transition: all .3s ease 0s;
}

.btn-primary.black:hover{
    border-color: #333;
    background: #fff;
    color:#2A2A2A;
}

.btn-primary.feature{
    background: #5E42A6;
    color:#fff ;
    -webkit-transition: all .3s ease 0s;
    -o-transition: all .3s ease 0s;
    transition: all .3s ease 0s;
    padding: 12px 40px;
    border: 2px solid#5E42A6;
}
.btn-primary.feature:hover{
    background:#fff;
    border: 2px solid#fff;
    color: #2A2A2A;

}

.btn-primary.grey{
    border-color:#ddd;
    background: transparent;
    color: #232323;
    padding: 12px 40px;
    -webkit-transition: all .3s ease 0s;
    -o-transition: all .3s ease 0s;
    transition: all .3s ease 0s;
}

.btn-primary.grey:hover{
    background: #2A2A2A;
    color: #fff;
    border-color: #eee;
}
/*==================== section heading ========================*/
.section-heading{
    margin-bottom: 80px;
    padding-top: 80px;
    position: relative;
}


.section-heading p{
    font-family: 'Noto Sans',serif;
    text-transform: lowercase;
    font-size: 18px;
}

.section-padding{
    padding: 80px 0px;
}

/*======================================================
     navigation 
==========================================================*/

.header3 {
    background: #fff;
    border-radius:0px;
    -webkit-box-shadow:  0px 0px 3px rgba(0, 0, 0, 0.1);
        box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1);
    margin-top: 30px;
}

ul.navbar-nav > li > a {
    font-family: 'Noto Sans', sans-serif;
    text-transform: uppercase;
    font-size: 14px;
    padding-top: 25px;
    padding-bottom: 25px;
    line-height: 20px;
    padding-bottom: 25px;
    color: #333;
    padding-right: 15px;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
}
.header3 ul.navbar-nav > li:last-child a {
    margin-right: 45px;
    overflow: hidden;
}
.nav > li > a:focus, .nav > li > a:hover{
    background: transparent;
    color: #5E42A6;
    border-top: 1px solid#5E42A6;
    border-bottom: 1px solid#5E42A6;
}

.navbar-brand {
    height: auto;
    padding: 6px 15px;
}


/*============================================
    SLIDER SECTION
===============================================*/
#home-section {
    background-size: cover;
    position: relative;
    overflow: hidden;
}
.slider-caption {
    z-index:2;
    text-align: center;
    margin: 0 auto;
    padding: 200px 0px 160px;
    width: 70%;
}
.inner-content{
    background: rgba(255,255,255,.9);
    padding: 50px 0px;
    -webkit-box-shadow: 0px 0px 4px #c9c9c9;
    box-shadow: 0px 0px 4px #c9c9c9;
}
.slider-caption h2{
    font-size: 50px;
    line-height: 70px;
    letter-spacing: 4px;
}
.slider-caption p{
    margin: 10px auto;
    width: 70%;
    font-family: "Noto Sans",serif;
    font-size: 13px;
}
.slider-caption a.btn{
    margin: 0px 6px;
}

.slider-caption p.subtitle{
	font-family: "Noto Sans",serif;
    font-size: 15px;
    margin-bottom: 30px;
}


/*====================section Features=============================*/
#section-features{
    background: #F9F9F9;
    padding: 70px 0px;
}
.feature-inner i{
    width: 55px;
    height: 55px;
    font-size: 28px;
    line-height: 30px;
    border: 3px solid#444;
    display: inline-block;
    text-align: center;
    color: #5E42A6;
    padding-top: 10px;
    float: left;
    margin-right: 30px;
}
.feature-inner h3{
    font-weight: 300;
    font-size: 22px;
    line-height: 32px;
}
.feature-inner p{
    display: block;
    margin-top: 25px;
}


/* =====================Section About Me==================*/

#section-about-head{
     background: url("../images/bg/about.jpg") fixed 50% 50%;
    background-size: cover;
    position: relative;
}


.section-head{
    padding: 90px 0px;
    background: rgba(255,255,255,.8);
}
.section-head h2{
    color: #2a2a2a;
    font-size: 40px;
    position: relative;
    line-height: 50px;
    margin: 0 auto 30px;
    width: 30%;
    padding: 15px 0px;
    border-left: 4px solid#5E42A6;
    border-right: 4px solid#5E42A6;
}
.section-head h2:before{
    content:"";
    position: absolute;
    width: 50px;
    height: 4px;
    background: #5E42A6;
    top: 0px;
    left: 0;
    margin: 0 auto;

}
.section-head h2:after{
    content:"";
    position: absolute;
    width: 50px;
    height: 4px;
    background: #5E42A6;
    bottom: 0px;
    right: 0;
}

.head-subtitle{
    font-family: "Noto Sans",sans-serif;
    color: #000000;
    letter-spacing: 5px;
    font-size: 20px;
}
.section-head h2:after,.section-head h2:before{
    -webkit-transition: all 2s ease 0s;
    -o-transition: all 2s ease 0s;
    transition: all 2s ease 0s;
}
.section-head:hover h2:after,.section-head:hover h2:before{
    width: 100%;
}



/*section about-------------*/

.about-inner {}
.about-inner img{
    border: 1px solid#eee;
}
.about-inner h3{
    margin-top: 12px;
    position: relative;
    padding-left: 35px;
    margin-bottom: 10px;
}
.about-inner h3:before{
    position: absolute;
    content:"";
    width: 30px;
    height: 2px;
    left: 0px;
    background: #444;
    bottom: 0px;
}
.panel-default > .panel-heading{
    border: 0px;
    background: transparent;
}

.panel-group .panel{
    margin-bottom: 30px;
}

.panel{
    background: transparent;
    border: 0px;
    box-shadow: none;
}
.panel-group{
    position: relative;
}
.panel-title{
    position: relative;
    
}
.panel-title a:before{
    position: absolute;
    content:"";
    width: 45px;
    height: 45px;
    background: #999;
    border-radius: 100%;
    top: -10px;
    left: 0px;
    z-index: 3;
   border: 3px solid#5E42A6;
}
.panel-group:after{
    position: absolute;
    content:"";
    width: 2px;
    background: #777;
    top: 10px;
    left: 37px;
    height:90%;
    z-index: 1;
}
.panel-title a,.panel-body{
    margin-left: 70px;
}

.panel-group .panel-heading + .panel-collapse > .panel-body {
    border-top: 0px;
    margin-bottom: 10px;
}
.panel-title a{
    color: #5E42A6;
}
.panel-title a.collapsed{
    color:#232323;
}

.panel-title:before{}

.panel-title a.collapsed::before{
    background:#fff;
}
.panel-title a::before{
    background:#5E42A6;
}


/*==================section services ==================*/

#section-services-head{
     background: url("../images/bg/about2.jpg") fixed 50% 50%;
    background-size: cover;
    position: relative;
}


.services-inner{
    text-align: center;
    padding: 30px 0px;
}
.services-inner i{
    font-size: 60px;
    color: #ddd;
}
.services-inner h2{
    letter-spacing: 3px;
    margin: 15px 0px;
}
.services-inner p {
    text-transform: uppercase;
    font-family: 'Noto Sans', sans-serif;
    letter-spacing: 3px;
    font-size: 16px;
    line-height: 16px;
    margin: 25px 0px;
}
.services-inner p span{
    padding: 7px 10px;
}

/* ====================section portfolio========================*/
#section-portfolio-head{
    background: url("../images/bg/about3.jpg") fixed 50% 50%;
    background-size: cover;
    position: relative;
}
.mb{
    margin-bottom: 30px;
}

.port-6{
    position: relative;
     -webkit-transition: all .3s ease 0s;
    -o-transition: all .3s ease 0s;
    transition: all .3s ease 0s;
}
.hover-effect{
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    background: rgba(255,255,255,.8);
    margin:  0 auto;
    top: 0px;
    opacity: 0;
    -webkit-transition: all .3s ease 0s;
    -o-transition: all .3s ease 0s;
    transition: all .3s ease 0s;
}
.port-6 .hover-effect{
    left: -60px;
    padding:70px 70px;
}
.port-3 .hover-effect{
    left: 0px;
    top: -60px;
    padding:30px;
}
.hover-effect p{
    margin: 10px 0px 30px;
}

.hover-effect .btn-primary.black{
    border-radius: 25px;
}

.hover-effect h4{
    font-size: 20px;
    letter-spacing: 4px;
}
.port-3 .hover-effect h4{
    font-size: 16px;
    letter-spacing: 0px;
}

.hover-icon:hover i{
    background: #444;
    color: #fff;
}
.hover-icon i{
    width: 60px;
    height: 60px;
    text-align: center;
    border: 2px solid#444;
    padding-top: 15px;
    display: block;
    font-size: 30px;
    margin: 0 auto;
    -webkit-transition: all .3s ease 0s;
    -o-transition: all .3s ease 0s;
    transition: all .3s ease 0s;
}

.port-6:hover .hover-effect{
    opacity: 1;
    left: 0px;
}
.port-3:hover .hover-effect{
    opacity: 1;
    top: 0px;
}


/*=======================Section clients====================*/

#section-clients-head{
    background: url("../images/bg/client-bg.jpg") fixed 50% 50%;
    background-size: cover;
    position: relative;
}

.client-box{
    border: 1px solid#eee;
    text-align: center;
    padding: 40px 0px;
    margin-bottom: 20px;
}

.testimonial-col{
    background: url("../images/bg/32.jpg");
    background-size: cover;
    padding: 130px 50px;
}

.carousel-content{
    background: rgba(255,255,255,.9);
    padding: 50px;
    text-align: center;
    position: relative;
    -webkit-box-shadow: 0px 0px 4px #c9c9c9;
    box-shadow: 0px 0px 4px #c9c9c9;
}
.carousel-content i{
    width: 75px;
    height: 75px;
    text-align: center;
    background: #5E42A6;
    color: #fff;
    font-size: 30px;
    padding-top: 25px;
    line-height: 30px;
    border-radius: 100%;
    margin-bottom: 20px;
}
.carousel-content p{
    font-family: "Noto Sans",sans-serif;
    font-style: italic;
    font-size: 18px;
    line-height: 28px;
    margin: 15px 0px 25px;
}
.carousel-content h4{
    color: #5E42A6;
    margin-bottom: 30px;
}
.carousel-content h4 span{
    font-size: 14px;
    text-transform: capitalize;
    color: #444;
    margin-top: 15px;
}
.carousel-indicators .active{
    background: #444;
}
.carousel-indicators li{
    border-color: #444;
    border-radius: 0px;
}


/*===============Section Footer============*/
#section-footer{
     background: #111111;
     padding: 50px 0px;
}
.footer-item h4{
    text-transform: uppercase;
    color: #fff;
    font-weight: 500;
    letter-spacing: 0px;
    font-size: 16px;
    line-height: 16px;
    margin-bottom: 20px;
}
.footer-item p{
    margin-bottom: 30px;
}
.footer-socail li a{
    font-size: 14px;
    width: 30px;
    height: 30px;
    border: 1px solid#292929;
    display: block;
    padding-top: 3px;
    color: #fff;
    text-align: center;
     -webkit-transition: all .4s ease 0s;
    -o-transition: all .4s ease 0s;
    transition: all .4s ease 0s;
}
.footer-socail li a:hover{
    background:#5E42A6;
}


.btn-footer{
    padding: 10px 30px;
    font-weight: normal;
    letter-spacing: 1px;
}

/* Footer bottom =================*/
#section-footer-btm{
    padding: 25px 0px;
    background: #5E42A6;
}

.footer-copy h6,.footer-link ul li a{
    text-transform: uppercase;
    color: #eee;
    font-weight: normal;
    font-family: 'Noto Sans', sans-serif;
}


/*============== Section Contact =======================*/
#section-contact-head{
    background: url("../images/bg/about3.jpg") fixed 50% 50%;
    background-size: cover;
    position: relative;
}

.contact-info{
    background: #fff; 
    padding: 35px 30px;   
    border-radius: 3px;
    box-shadow: 0 9px 21px 0 rgba(0, 0, 0, 0.15)
}
.contact-info ul li{
     -webkit-transition: all .4s ease 0s;
    -o-transition: all .4s ease 0s;
    transition: all .4s ease 0s;
    margin-bottom: 30px;
}
.contact-socail a{
    border: 1px solid   #ddd;
    display: block;
    width: 25px;
    height:25px;
    text-align: center;
    background: #ddd;    
    border-radius: 3px;
}

.vid { 
    position: relative; 
    padding-bottom: 100%; 
    padding-top: 0px; height: 0; overflow: auto;
	width: 100%; 
    height: 100%; 
    -webkit-overflow-scrolling: touch;
    /* 100% = dialog height, 120px = header + footer */
    max-height: calc(100% - 120px);
	overflow-y: scroll;
    overflow-x: hidden;

} 
  
.vid iframe { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    overflow-x: hidden;
	overflow-y: scroll;
}