/*------------------------------------------------------------------
[Master Stylesheet]

Project:  Onkuro
Version:  1.0
Last change:  20/02/15 [fixed table content]
Assigned to:  Dwi Hartanto
Primary use:  JDV
-------------------------------------------------------------------*/
/*------------------------------------------------------------------
[Typography]

Body copy:    14px/24px Lato, sans-serif;
Headers:    48px/72px Lato, sans-serif;
Input, textarea:  14px Lato, sans-serif;

-------------------------------------------------------------------*/
/*------------------------------------------------------------------
[Color codes]

Background: #ffffff (white)
Content:  #f36639 (orange)
Header h1:  #ffffff (white)
Header h2:  #ffffff (white)
Footer:   #000000 (black)

a (standard): #0040b6 (dark blue)
a (visited):  #5999de (light blue)
a (active): #f36639 (orange)
-------------------------------------------------------------------*/
/*------------------------------------------------------------------
[Table of contents]

1. Body
2. Typogrpahy
3. Global Style
4. Animate Delay
5. Loader
6. Gutter width
7. Metro Style
8. Header
  8.1. Navigation / .navbar
  8.2. Hightlight / #main-head
  8.2. Form Login / .FormLogin
9. Content
  9.1. Video / .myvideo
  9.2. Service / .mytab-content
  9.3. Timeline-tab / .timeline-tab
  9.4. Blog / .blog-title
  9.5. Fact / .fact
  9.6. Contact / .main-contact
10. Footer / .cp-right
11. Modal dialog / .modal
12. Single Page Style / .single-title
13. Single Portfolio / .desc-info
-------------------------------------------------------------------*/
body{
  font-family:"Lato", sans-serif;
  font-weight:300;
  line-height:24px;
}
/*=====================Typogrpahy================================*/
h1{
  font-size: 48px;
  line-height: 48px;
}
h2{
  font-size: 36px;
  line-height: 48px;
}
h3{
  font-size: 30px;
  line-height: 24px;
}
h4{
  font-size: 24px;
  line-height: 24px;
}
h5{
  font-size: 18px;
  line-height: 24px;
}
h6{
  font-size: 14px;
  line-height: 24px;
}
/* ==================== Global Style ====================== */

#container{
  width:100%;
  margin:0 ;
  padding:0;
  overflow:hidden;
  position:relative;
}
.page{
  padding:72px 0;
  position:relative;
  overflow:hidden;
  background: #fff;
  color: #fff;
}
.bg-page{
  background-image:url('../img/main-elevator.jpg');
  position:relative;
  color:#fff;
  padding: 72px 0;
  margin:0;
  width: 100%;
  min-height: 100%;
  overflow: hidden;
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-attachment: absolute;
}

.bg-page3{
  background-color:#333;
  position:relative;
  color:#fff;
  padding: 72px 0;
  margin:0;
  width: 100%;
  min-height: 100%;
  overflow: hidden;
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-attachment: absolute;
}
.builder{
  padding:24px 0;
}
.builder ul{
  margin:0;
  padding:0;
  list-style:none;
}
.btn-clear{
  border:1px solid #fff;
  color:#fff;
  font-weight:300;
  font-size:14px;
  background: transparent;
}
.btn-clear:hover{
  color:#fff;
}
.whycolor{
	color:#414141;
}
.whytext{
	font-size:10px;
	}
img{
  max-width:100%;
}
.mask{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.8);
  z-index:88;
}
.maskpage{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color:rgba(0,0,0,0.6);
  /*background-image: url('../img/mask.png');*/
}
.btn{
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
}
.maskdark{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.9);
}
.title-page h2{
  font-weight: 700;
  margin: 0;
  font-size: 48px;
  line-height: 48px;
  text-align: right;
  border-right: 1px solid;
  padding-right: 23px;
  font-family: 'Raleway', sans-serif;
}

.title-page-white h2{
  font-weight: 700;
  margin: 0;
  font-size: 48px;
  color: #fff;
  line-height: 48px;
  text-align: right;
  border-right: 1px solid #fff;
  padding-right: 23px;
  font-family: 'Raleway', sans-serif;
}
.title-page-white p{
  color: #fff;
}
.title-page-white p, .title-page p{
  padding:0px 24px;
  margin: 0;
}
.title-page-white h2 small{
  font-size: 36px;
  line-height: 36px;
  color: #fff;
  font-weight: 700;
}
.blank-space{
  height: 1000px;
}
.linear{
  transition:all 200ms linear;
  -webkit-transition:all 200ms linear;
  -moz-transition:all 200ms linear;
  -ms-transition:all 200ms linear;
  -o-transition:all 200ms linear;
}

.bg-page2{
  background-image:url('../img/slide2.jpg');
  position:relative;
  color:#fff;
  padding: 72px 0;
  overflow: hidden;
  margin:0;
  width: 100%;
  min-height: 100%;
  height:625px;
  background-position: 50% 0;
  background-repeat: repeat;
  background-attachment: absolute;
}

.bg-page-footer{
  background:#000;
  position:relative;
  color:#fff;
}
.hidding{
  visibility: hidden;
}
.visible{
  visibility: visible;
  position: relative;
  z-index: 88;
}
/*============================================= Animate Delay =========================================================*/

.delay1{
  -webkit-animation-delay: 100ms;
  -moz-animation-delay: 100ms;
  -ms-animation-delay: 100ms;
  -o-animation-delay: 100ms;
}
.delay2{
  -webkit-animation-delay: 200ms;
  -moz-animation-delay: 200ms;
  -ms-animation-delay: 200ms;
  -o-animation-delay: 200ms;
}
.delay3{
  -webkit-animation-delay: 300ms;
  -moz-animation-delay: 300ms;
  -ms-animation-delay: 300ms;
  -o-animation-delay: 300ms;

}
.delay4{
  -webkit-animation-delay: 400ms;
  -moz-animation-delay: 400ms;
  -ms-animation-delay: 400ms;
  -o-animation-delay: 400ms;
}
.delay5{
  -webkit-animation-delay: 500ms;
  -moz-animation-delay: 500ms;
  -ms-animation-delay: 500ms;
  -o-animation-delay: 500ms;
}
.delay6{
  -webkit-animation-delay: 600ms;
  -moz-animation-delay: 600ms;
  -ms-animation-delay: 600ms;
  -o-animation-delay: 600ms;
}
.delay7{
  -webkit-animation-delay: 700ms;
  -moz-animation-delay: 700ms;
  -ms-animation-delay: 700ms;
  -o-animation-delay: 700ms;
}
.delay8{
  -webkit-animation-delay: 800ms;
  -moz-animation-delay: 800ms;
  -ms-animation-delay: 800ms;
  -o-animation-delay: 800ms;
}
.delay9{
  -webkit-animation-delay: 900ms;
  -moz-animation-delay: 900ms;
  -ms-animation-delay: 900ms;
  -o-animation-delay: 900ms;
}
.delay10{
  -webkit-animation-delay: 1000ms;
  -moz-animation-delay: 1000ms;
  -ms-animation-delay: 1000ms;
  -o-animation-delay: 100ms;
}
/*=====================Loader================================*/
.loader {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: url('../img/ajax-loader.gif') 50% 50% no-repeat rgb(249,249,249);
}
/*=========================Gutter width============================*/
@media (min-width: 1200px) {
  .container {
    width: 1200px;
  }
}
.container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 24px;
  padding-right: 24px;
}
.container-fluid {
  margin-right: auto;
  margin-left: auto;
  padding-left: 24px;
  padding-right: 24px;
}
.row {
  margin-left: -24px;
  margin-right: -24px;
}
.col-xs-1, .col-sm-1, .col-md-1,
.col-lg-1, .col-xs-2, .col-sm-2,
.col-md-2, .col-lg-2, .col-xs-3,
.col-sm-3, .col-md-3, .col-lg-3,
.col-xs-4, .col-sm-4, .col-md-4,
.col-lg-4, .col-xs-5, .col-sm-5,
.col-md-5, .col-lg-5, .col-xs-6,
.col-sm-6, .col-md-6, .col-lg-6,
.col-xs-7, .col-sm-7, .col-md-7,
.col-lg-7, .col-xs-8, .col-sm-8,
.col-md-8, .col-lg-8, .col-xs-9,
.col-sm-9, .col-md-9, .col-lg-9,
.col-xs-10, .col-sm-10, .col-md-10,
.col-lg-10, .col-xs-11, .col-sm-11,
.col-md-11, .col-lg-11, .col-xs-12,
.col-sm-12, .col-md-12, .col-lg-12{
  padding-left: 24px;
  padding-right: 24px;
}
/*=========================Metro style============================*/
.metro{
  position: relative;
}
.metro .col-xs-1, .metro .col-sm-1, .metro .col-md-1,
.metro .col-lg-1, .metro .col-xs-2, .metro .col-sm-2,
.metro .col-md-2, .metro .col-lg-2, .metro .col-xs-3,
.metro .col-sm-3, .metro .col-md-3, .metro .col-lg-3,
.metro .col-xs-4, .metro .col-sm-4, .metro .col-md-4,
.metro .col-lg-4, .metro .col-xs-5, .metro .col-sm-5,
.metro .col-md-5, .metro .col-lg-5, .metro .col-xs-6,
.metro .col-sm-6, .metro .col-md-6, .metro .col-lg-6,
.metro .col-xs-7, .metro .col-sm-7, .metro .col-md-7,
.metro .col-lg-7, .metro .col-xs-8, .metro .col-sm-8,
.metro .col-md-8, .metro .col-lg-8, .metro .col-xs-9,
.metro .col-sm-9, .metro .col-md-9, .metro .col-lg-9,
.metro .col-xs-10, .metro .col-sm-10, .metro .col-md-10,
.metro .col-lg-10, .metro .col-xs-11, .metro .col-sm-11,
.metro .col-md-11, .metro .col-lg-11, .metro .col-xs-12,
.metro .col-sm-12, .metro .col-md-12, .metro .col-lg-12{
  padding-left:0px;
  padding-right:0px;
}
.hcaption{
  position:relative;
  height:100%;
  overflow: hidden;
}
.myMask{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.4);
  z-index:77;
  display:none;
}
.attr-icon{
  width:100%;
  height:auto;
  text-align:center;
  position:absolute;
  z-index: 88;
  top:50%;
  left:0;
  transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  display:none;
  padding: 0 24px;
}
.attr-icon .wrapp-icon{
  margin:0 5px;
  display:inline-block;
}
.icon{
  width:58px;
  height:58px;
  border-radius:50%;
  -webkit-border-radius:50%;
  -moz-border-radius:50%;
  -ms-border-radius:50%;
  -o-border-radius:50%;
}
.wrapp-icon a{
  width:58px;
  height:58px;
  padding:16px;
  border-radius:50%;
  -webkit-border-radius:50%;
  -moz-border-radius:50%;
  -ms-border-radius:50%;
  -o-border-radius:50%;
  background:#fff;
  margin:0;
  font-size:18px;
  display:block;
}
.wrapp-icon a:hover span{
  color:#333;
}

/*================================ CONTENT =====================================*/
/*===============================***********====================================*/

/*===================== Header ===========================*/
/* ================== Navigation ================== */
#menu-toggle{
  position:fixed;
  top:0;
  left:0;
  z-index:999;
  background: rgba(107, 107, 107, 0.71);

}
#menu-close, #menu-toggle{
  display: none;
}
#menu-close{
  position: absolute;
  top: 0;
  right: 0;
}
#menu-toggle:hover{
  color: #fff;
}
.navbar{
  position: fixed;
  width: 100%;
  border-radius:0px;
  margin-bottom:0;
  background:transparent;
  z-index:999;
  min-height: inherit;
  border:none;
  padding: 24px 0;
}
.navbar-default  .navbar-nav > li > a {
  color: #fff;
}
.navbar-default  .navbar-nav > li > a:hover{
  color: #fff;
}
.navbar-default .navbar-nav > a, .navbar-default .navbar-nav > a:hover, .navbar-default .navbar-nav > a:focus{
  color: #fff;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus{
  color: #fff;
  border-bottom: 3px solid;
  background: rgba(255,255,255,0.2);
}
.navbar-nav > li > a {
  padding: 10px 24px;
}
.navbar-nav > li > a {
  padding-top: 12px;
  padding-bottom: 12px;
  border-bottom: 3px solid transparent;
}
.navbar-brand {
  float: left;
  height:auto;
  padding: 0px 0px;
}
.navbar-nav {
  padding: 15px 0;
}
/*=======================================Hightlight=========================================*/
.maskbottom{
  width: 0;
  height: 0;
  border-color: rgba(255, 255, 255, 0) rgba(255, 255, 255, 1);
  border-style: solid solid solid dashed;
  border-width: 0 0 0 0;
  margin-top: 0px;
  border-left-width: 1343px;
  border-top-width: 70px;
  position: absolute;
  bottom: 0;
  left: 0;
}
.main-head{
  position: absolute;
  top: 54%;
  transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  z-index: 88;
  width: 100%;
}
.bgHead{
  background: #000;
  position: relative;
  overflow: hidden;
}
.main-head{
  color: #fff;
}
.main-head h1{
  margin: 0 0 24px 0;
  color: #fff;
  font-family: 'Lato', sans-serif;
  font-size: 55px;
  font-weight: 200;
  line-height: 65px;
}
.main-head p{
  margin: 0;
}
.main-head input.form-control{
  color: #242424;
}
/*=======================================Form Login=========================================*/
.formlogin .form-group{
  text-align: left;
  padding: 0  0 15px 10px;
  width: 29%;
}
.form-inline .form-control {
  width: 100%;
  border-radius: 0px;
}
.formlogin .btn{
  margin: 0 12px;
  padding: 6px 16px;
}
.formlogin .btn-clear{

  border-width: 1px;
}
.formlogin{
  background: rgba(0,0,0, 0.4);
  padding: 5px 5px;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border: 1px solid rgba(255,255,255, 0.3);
}
.text-block{
  font-weight: 700;
}
.mid{
  padding-bottom: 24px;
}
/*================================ Video =====================================*/
a.playVid{
  font-size: 24px;
  color: #fff;
}
a.playVid:hover{
  text-decoration: none;
}
.playVid span{
  border-radius:50%;
  -webkit-border-radius:50%;
  -moz-border-radius:50%;
  -ms-border-radius:50%;
  -o-border-radius:50%;
  border: 2px solid #fff;
  width: 42px;
  height: 42px;
  margin-right: 24px;
  line-height: 38px;
  font-size: 14px;
  vertical-align: middle;
  display: inline-block;
}
.mid p{
  margin: 0;
  padding: 26px 0;
}
.apps-button a span{
  margin-right: 12px;
  vertical-align: middle;
}
.myvideo{
  padding: 24px 0 15px 0;
}
/*================================ Service =====================================*/
.mytab-content .nav-tabs{
  text-align: center;
  border: none;
}
.mytab-content .nav-tabs > li {
  float: none;
  margin-bottom: -1px;
  display: inline-block;
  max-width: 140px;
  width: 100%;
  margin-right: 24px;
  margin-left: 24px;
  border-bottom: 3px solid #fff;
}

.mytab-content .nav-tabs > li a {
  color: #fff;
}
.mytab-content .nav-tabs > li a span{
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  line-height: 32px;
  border-radius: 50%;
  background: #fff;
}
.mytab-content .nav-tabs > li.active a{
  padding: 30px 15px;
}
.mytab-content .nav-tabs > li{
  background: rgba(255,255,255,0.3);
}
.mytab-content .nav-tabs > li.active a span, .mytab-content .nav-tabs > li.active a:hover{
  color: #fff;
}
.mytab-content .nav-tabs > li.active, .mytab-content .nav-tabs > li a:hover, .mytab-content .nav-tabs > li:hover{
  background:transparent;
  border-color: transparent;
}
.mytab-content .nav-tabs > li.active a{
  background: transparent;
  border: none;
}

.mytab-content .nav-tabs > li a:focus{
  color: #FFFFFF;
}
.mytab-content .tab-content{
  position: relative;
  z-index: 88;
  padding-top: 5px;
}
/*feat-content*/
.feat-content h3{
  font-size: 21px;
  font-weight: 400;
  margin: 0;
  padding: 0 0 24px 0;
}
.feat-content .text-right h3 span{
  margin-left: 12px;
}
.feat-content .text-left h3 span{
  margin-right: 12px;
}
.feat-content h3 span i{
  font-size: 18px;
}
.feat-content p{
  margin: 0;
}
.feat-img img{
  margin-bottom: -220px;
  margin-top:-30px; 
}
.feat-padding{
  padding-top: 96px;
}
/*whychooseus*/
.why-icon{
  width: 72px;
  height: 72px;
  background: rgba(255,255,255,0.2);
  border-bottom: 3px solid;
  line-height: 80px;
  margin-right: 24px;
}
.why-text{
  overflow: hidden;
}
.why-text h3{
  font-size: 17px;
  margin:0;
  font-weight: 700;
}
.why-text p{
  margin: 0;
  font-weight:500;
}
/*screenshoot*/
.screenshot{
  padding: 48px 1px 0 1px;
}


/*testimonial*/
.testimonial h4{
  font-family: 'Raleway', sans-serif;
  font-size: 19px;
  font-weight: 500;
  margin: 12px 0 12px 0;
}
.testimonial p{
  margin-bottom: 24px;
}
.testimonial a{
  color: #fff;
  padding-top: 24px;
  padding-bottom: 24px;
  font-size: 14px;
  font-family: 'Raleway', sans-serif;
  font-weight: 500;
  display: block;
}
.testimonial{
  background: rgba(0,0,0,.6);
  padding: 24px;
}

.testi-ava{
  padding: 0 0;
  margin: 24px auto;
  width: 84px;
  height: 84px;
}
.line-author{
  width: 24px;
  height: 1px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  margin: 0 auto;
}
/*================================ Time line =====================================*/
.bg-tab{
  background: #000;
}
.timeline-tab ul{
  width: 100%;
  max-width: 277px;
  padding: 0 24px 0 0;
  float: right;
}
.timeline-tab ul li{
  border-bottom: 1px solid;
  margin-top: -1px;
}
.timeline-tab ul li:nth-last-child(1){
  border-bottom: none;
}
.timeline-tab ul li a{
  text-align: left;
  color: #fff;
  padding: 22px 0;
}
.timeline-tab ul li a:hover{
  background: transparent;
}
.timeline-tab ul li a span{
  display: inline-block;
  font-size: 14px;
}
.timeline-tab ul li a span.tab-label{
  font-size: 20px;
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  padding-right: 44px;
}
.timeline-tab ul li a:focus {
  background: transparent;
}
.timeline-tab ul li a span b.day{
  font-weight: 300;
  color: #a3a3a3;
}
.timeline-tab ul li a span b.year{
  font-weight: 700;
  font-size: 24px;
}
.pane-title .attr-title{
  margin: 0;
}
.pane-title .attr-title h3{
  color: #ffffff;
  font-size: 18px;
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  margin: 0 0 0 0;
}
.pane-title .attr-title p, .pane-title .attr-title p .label{
  color: #242424;
  font-size: 12px;
  margin: 0;
  padding: 0;
}
.pane-title .attr-title p a, .pane-title .attr-title p span{
  color: #fff;
}
.pane-post p{
  margin: 0;
  padding: 12px 0;
}
.pane-post p:nth-of-type(1){
  padding-top: 24px;
}
.pane-post  a.btn-clear{
  border: 1px solid #fff;
}
.pane-post a.btn-clear:hover{
  background: #fff;
}
.timeline-tab ul li > span{
  color: #000;
  position: absolute;
  top: 28px;
  right: -60px;
  display: none;
  }.timeline-tab ul li.active > span{
    display: block;
  }
  .timeliine-tab-content .tab-content{
    padding-left: 24px;
    padding-right: 48px;
  }
  /*================================ Blog =====================================*/
  .blog-title{
    background: #fff;
    color: #242424;
    height: 96px;
    text-align: center;
  }
  .blog-title-left{
    margin: 24px 0 0 -48px;
  }
  .blog-title-right{
    margin: 24px -48px 0 0;
  }
  .blog-title h3{
    font-size: 18px;
    margin: 0;
  }
  .blog-title .attr-item p.tags{
    font-size: 12px;
  }
  .blog-title .attr-item p.tags a:hover{
    color: #242424;
    text-decoration: none;
  }
  .attr-item p{
    margin: 0;
  }
  .blog-title .label{
    color: #242424;
    padding: 0;
  }
  .img-attr-right{
    right: 0;
  }
  .img-attr-left{
    left: 0;
  }
  .img-attr{
    position: absolute;
    top:48px;
  }
  .img-attr div.attr-meta{
    width: auto;
    height: 96px;
    position: relative;
    padding: 24px;
  }
  .bg-attr1{
    background: #e5e5e5;
  }
  .bg-attr2{
    background: #0c0001;
  }
  .attr-item{
    position: relative;
    top: 50%;
    transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    z-index: 88;
    width: 100%;

  }
  .attr-title{
    width: 100%;
    max-width: 404px;
    margin: 0 auto;
  }
  .img-attr .attr-item p.year{
    font-weight: 700;
    font-size: 24px;
  }
  a.icon-wrap{
    display: inline-block;
    width: 36px;
    height: 36px;
    border-radius:50%;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    -ms-border-radius:50%;
    -o-border-radius:50%;
    background: #fff;
    margin: 0 6px;
  }
  a.icon-wrap:hover{
    color: #242424;
  }
  a.icon-wrap i{
    line-height: 36px;
  }
  .blog{
    position: relative;
  }

  .blog-icon{
    width: 72px;
    height: 104px;
    border: 2px solid #242424;
  }
  .blog-icon i{
    line-height: 104px;
  }
  .blog-info{
    overflow: hidden;
  }
  .blog-info-right{
    padding: 0 48px 0 0;
  }
  .blog-info-left{
    padding: 0 0 0 48px;
  }
  .blog-info a.btn-clear:hover{
    background: #fff;
  }

  .blog-info h3{
    font-size: 24px;
    margin: 0 0;
    padding: 0 0 0 0;
  }

  .blog-info p{
    margin: 0 0;
    padding: 24px 0 0 0;
  }
  .blog .btn-clear{
    color: #242424;
    margin:38px 0  0 0;
  }
  .blog-info a.btn{
    color: #fff;
  }
  .agen h3{
    font-size:18px;
    font-weight:300;
    margin:0 0 0 0;
    padding:0 0 0 0;
  }
  .agen p{
    font-size:12px;
    font-family: 'Roboto', sans-serif;
    margin:0 0 0 0;
    padding:12px 0 24px 0;
  }
  .agen p.attr{
    font-family: 'Lato', sans-serif;
    margin:0 0 0 0;
    padding:0px 0 0 0;
  }
  .main-avatar{
    width: 100%;
    max-width: 128px;
    border-radius:50%;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    -ms-border-radius:50%;
    -o-border-radius:50%;
    padding:5px;
    border:3px solid;
    margin:0 auto 0 auto;
  }
  .main-avatar-team{
    position: relative;
    overflow: hidden;
  }
  .team-attr{
    background: rgba(255,255,255,0.2);
    padding: 24px 24px 21px 24px;
    border-bottom: 3px solid;
    text-align: left;
  }
  .agen-soc li{
    display:inline-block;
    margin:0 5px 1px 5px;
  }
  .attr-icon .agen-soc{
    padding: 96px 0 0 0;
  }
  .agen-soc li a{
    display:inline-block;
    width:36px;
    height:36px;
    padding:8px;
    border-radius:50%;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    -ms-border-radius:50%;
    -o-border-radius:50%;
    color:#fff;
  }
  .agen-soc li a i{
    font-size:19px;
  }
  .soc-fb{
    background: #3785c5;
  }
  .soc-tw{
    background: #00aced;
  }
  .soc-pin{
    background: #c9212f;
  }
  .soc-gplus{
    background: #b33e3c;
  }
  /*========================== Fact ===============================*/
  .fact h3{
    font-size: 18px;
    font-family: 'Raleway', sans-serif;
    font-weight: 500;
    margin: 0 0 0 0;
  }
  .fact p{
    margin: 0;
    padding: 24px
  }
  /*qualification*/
  #myTab2{
    padding-bottom: 24px;
  }

  .qualification h3{
    font-size: 18px;
    font-family: 'Raleway', sans-serif;
    font-weight: 500;
    margin: 0 0;
    padding:18px 0 0 0;
  }
  .chart {
    position: relative;
    width: 176px;
    height: 176px;
    text-align: center;
    margin:0 auto;
  }
  .chart span{
    width: 40px;
    height: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -20px 0 0 -20px;
    font-size: 24px;
    line-height: 40px;
  }
  .chart canvas {
    position: absolute;
    top: 0;
    left: 0;

  }

  .chart span:after {
    content: '%';
    margin-left: 0.1em;
    font-size: 24px;
  }
  /*mission*/

  .mission-icon{
    background: rgba(255,255,255,0.2);
    border-bottom: 3px solid;
    padding: 24px 24px 21px 24px;
    margin-right: 24px;
  }
  .mission-desc{
    overflow: hidden;
  }
  .mission-desc h3{
    margin: 0;
    padding: 0 0 12px 0;
    font-size: 18px;
    font-family: 'Raleway', sans-serif;
    font-weight: 500;
  }
  .mission-desc .fa-ul {
    padding-left: 0;
    margin-left: 2.14285714em;
    list-style-type: none;
  }
  .mission-desc .fa-ul li{
    padding-top: 12px;
  }
  .mission-desc .fa-li{
    top: 18px;
  }
  /*========================== Contact ===============================*/
  .main-contact{
    padding-top: 24px;
  }
  .main-contact .form-control{
    border-radius: 0;
    height: 48px;
  }
  .main-contact textarea.form-control{
    height: 120px;
  }
  .main-contact .form-group {
    margin-bottom: 24px;
  }
  .main-contact .btn{
    font-size: 12px;
  }
  .main-contact .btn:hover{
    color: #ffffff;
  }
  .main-contact .btn-lg{
    padding: 16px 16px;
  }
  .contact-info{
    background: rgba(255,255,255,0.2);
    border-bottom: 3px solid;
    padding: 24px 24px 21px 24px;
  }
  .contact-info h3{
    font-size: 18px;
    margin:0;
    padding: 0 0 24px;
    font-family: 'Raleway', sans-serif;
  }
  .contact-info p{
    margin: 0;
    padding: 0;
  }
  .contact-info p a{
    color: #fff;
  }
  ul.fsocial{
    text-align:left;
    padding: 12px 0;
  }
  ul.fsocial li a{
    text-align:center;
  }
  ul.fsocial li{
    display:inline-block;
    margin:0 3px;
  }
  .ficon{
    padding:0;
    display:block;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
  }
  .ficon span{
    display:block;
    width:24px;
    height:24px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
  }
  .ficon span i{
    margin-top: 5px;
    color:#fff;
  }
  /*========================== Footer ===============================*/
  footer{
    padding:24px 0;
  }
  .cp-right p{
    margin: 0;
  }
  .cp-right p a:hover{
    padding: 0;
    margin: 0;
    color: #fff;
  }
  /*========================== Lightbox ===============================*/

  /*====================================================Modal Dialog Style===============================================*/
  .modal {
    overflow-x: hidden;
  }
  body.modal-open {
    padding-right: 0px !important;
    overflow:auto;
  }


  #myModal1 .modal-body, #myModal1 .modal-header{
    padding:0;

  }
  #myModal1 .modal-header{
    min-height:inherit;
    position:relative;
    border:0;
  }
  #myModal1 button.close{
    position:absolute;
    top:20px;
    right:20px;
    margin:0;
    z-index:99;
  }
  #myModal1 .modal-header .close {
    margin-top: 0;
  }

  #myModal1 .modal-content {
    border-radius: 0px;
  }
  #myModal1 .modal-body .featurette{
    border:none;
  }
  /*==================================================Single Page Style================================================================*/
  .vimeo-color{
    background:#41bbfc;
    color:#fff;
  }
  .pinterest-color{
    background:#910101;
    color:#fff;
  }
  .fb-color{
    background:#3b5999;
    color:#fff;
  }
  .dribble-color{
    background:#f96c92;
    color:#fff;
  }
  .twitter-color{
    background:#00a0d2;
    color:#fff;
  }
  .single-post p{
    font-weight: 400;
  }
  .single-title h1{
    font-size:30px;
    font-family: 'Lato', sans-serif;
    font-weight:400;
    margin:0 0 0 0;
    padding:23px 0 24px 0;
    line-height:48px;
  }
  .single-quote{
    text-align:center;
  }
  .single-quote p{
    font-size:24px;
    font-family: 'Roboto Slab', sans-serif;
    font-weight:400;
    margin: 0 0;
    padding:12px 0 0 0;
    line-height:48px;
    clear:both;
  }
  .single-quote a{
    font-size:14px;
    font-family: 'Lato', sans-serif;
    font-weight:600;
    margin: 0 0;
    padding:12px 0 0 0;
    line-height:24px;
    display:block;
  }
  .singleIcon{
    width:72px;
    height:72px;
    display:table;
    border-radius:100%;
    -webkit-border-radius:100%;
    -moz-border-radius:100%;
    -ms-border-radius:100%;
    -o-border-radius:100%;
    margin:0 auto;
    text-align:center;
  }
  .singleIcon span{
    display:table-cell;
    vertical-align:middle;
    color:#fff;
    font-size:21px;
  }

  ul.single-attr li{
    float:left;
    margin-right:20px;
  }
  ul.single-attr li a span{
    margin-right:12px;
  }
  ul.single-attr li a:hover{
    color: #242424;
  }
  .single-post p{
    padding:24px 0;
  }
  .single-post p:nth-child(1){
    padding-top:0px;
  }
  .single-post p:nth-last-child(1){
    padding-bottom:0px;
  }
  .single-author h3{
    font-size:24px;
    font-family: 'Lato', sans-serif;
    font-weight:400;
    margin:0 0 0 0;
    padding:24px 0;
    line-height:24px;
    text-align:center;
  }
  ul.author-socmed li{
    display:inline-block;
  }
  ul.author-socmed li a{
    display:block;
    width:24px;
    height:24px;
    border-radius:100%;
    -webkit-border-radius:100%;
    -moz-border-radius:100%;
    -ms-border-radius:100%;
    -o-border-radius:100%;
    text-align:center;
  }
  ul.author-socmed li a:hover{
    color:#333;
  }
  #author{
    padding:24px 0;
  }
  #author .media-body h4{
    clear:both;
    padding:0 0 0 0;
    margin:0;
    font-size:18px;
    font-family: 'Lato', sans-serif;
    font-weight:200;
  }
  #author .media-body p{
    clear:both;
    padding:24px 0 0 0;
    margin:0;
    font-size:14px;
    font-family: 'Lato', sans-serif;
    font-weight:200;
  }
  .single-comment{
    margin-bottom: 24px;
  }
  .single-comment h3{
    font-size:24px;
    font-family: 'Lato', sans-serif;
    font-weight:400;
    margin:0 0 0 0;
    padding:24px 0;
    line-height:24px;
    text-align:center;
  }
  .single-comment input{
    width:100%;
    border: 1px solid #cecece;
    padding: 11px 10px;
    margin:24px 0;
  }
  .single-comment textarea{
    width:100%;
    border: 1px solid #cecece;
    padding: 11px 10px;
    margin:24px 0;
  }
  .single-comment button{
    display:block;
    margin-bottom:16px;
  }
  .single-comment button{
    color:#333;
  }
  .media > .pull-left {
    margin-right: 24px;
  }
  #comment{
    padding-top:48px;
  }
  #comment .media-body h4{
    padding:0 0 0 0;
    margin:0;
    font-size:18px;
    font-family: 'Lato', sans-serif;
    font-weight:200;
    line-height:24px;
  }
  #comment .media-body p{
    clear:both;
    padding:12px 0 0 0;
    margin:0;
    font-size:14px;
    font-weight: 400;
  }
  #comment .media{
    margin-top: 38px;
  }
  ul.cmtAttr{
    padding:12px 0 0 0;
    margin:0;
  }
  ul.cmtAttr li{
    float:left;
    font-size:12px;
    font-weight:400;
  }
  ul.cmtAttr li a{
    font-size:12px;
    font-family: 'Lato', sans-serif;
    font-weight:400;
    color:#444444;
  }
  ul.cmtAttr li a:hover{
    text-decoration:underline;
  }
  /*====================================================Singel Portfolio Style=========================================================*/

  .desc-info h3{
    font-size: 18px;
    font-family: 'Lato', sans-serif;
    font-weight: 200;
    margin: 0 0 0 0;
    padding: 0 0 24px 0 ;
    line-height: 24px;
  }
  .desc-info p{
    font-size: 14px;
    font-family: 'Lato', sans-serif;
    font-weight: 200;
    margin: 0 0 0 0;
    padding: 0 0;
    line-height: 24px;
  }
  .desc-table{
    display:table;
    width:100%;
  }
  .desc-row{
    display:table-row;
  }
  .desc-field{
    display:table-cell;
    width:35%;
  }
  .desc-query{
    display:table-cell;
  }
  .desc-row p {
    padding-bottom:12px;
  }
  .project-button ul{
    text-align:center;
  }
  .project-button ul li{
    display:inline-block;
  }
  .project-button ul li a{
    font-size: 18px;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    margin: 24px 22px;
    padding: 10px 20px;
    line-height: 24px;
  }
  .project-button ul li a.btn-clear{
    padding: 10px 40px;
    border:2px solid #444444;
    color:#444;
  }
  .project-button2 ul li a.btn-clear{
    padding: 10px 34px;
    border:2px solid #444444;
    color:#444;
  }
  .project-button ul li a.btn-clear:hover, .project-button2 ul li a.btn-clear:hover{
    color:#fff;
  }
  .project-button2 ul{
    text-align:center;
  }
  .single-title3 h1{
    font-weight: 300;
  }
  .project-button2 ul li{
    display:inline-block;
  }
  .project-button2 ul li a{
    font-size: 18px;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    margin: 24px 12px;
    padding: 10px 30px;
    line-height: 24px;
  }

  .portfolio-img2 img{
    margin-bottom:-20px;
  }
  .modal-header{
    border-bottom:0;
  }
  .modal-footer{
    border-top:0;
  }

  .mask1{
    width:100%;
    height:100%;
    position:absolute;
    background-color:rgba(0,0,0, 0.7);
    top:0;
    left:0;
  }
  /*=============================================end==========================================================*/

  /*========================== responsive ===============================*/
  @media screen and (min-width:992px) and (max-width: 1199px){
    .navbar-nav{
      text-align:right;
    }
  }
/*
@media screen and (min-width:768px) and (max-width: 991px){
.product-feat a {
display: inline-block;
margin: 6px 14px;
}
}
*/
@media screen and (min-width:240px) and (max-width: 991px){
  .main-head{
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    z-index: 88;
    width: 100%;
  }
  .formlogin .btn{
    margin-top: 12px;
  }
  /*======================================================================================*/
  .blog-title-left, .blog-title-right {
    margin: 0;
  }
  .img-attr {
    top: 24px;
  }
  .blog-info-right{
    padding: 0 ;
  }
  .blog-info-left{
    padding: 0 ;
  }
  /*==========================================================================================*/
  .title-page-white h2, .title-page h2{
    text-align: center;
    border-bottom: 1px solid;
    border-right: none;
    padding: 0 0 23px 0;
  }
  .title-page-white p, .title-page p {
    text-align: center;
  }
  .feat-img img{
    margin-bottom: 0px;
  }
  .feat-padding{
    padding-top: 24px;
  }

  .main-head h1{
    font-size: 24px;
    line-height: 24px;
  }
  .mid p{
    display: none;
  }
  .masktop, .maskbottom{
    display: none;
  }
  .nav > li > a {
    padding-left: 14px;
    padding-right: 14px;
  }
  /* =================================== */
  .page-count {
    border-right: none;
    border-bottom: 1px solid #FFF;
    padding-bottom:24px;
  }
}

@media screen and (min-width:240px) and (max-width: 767px){
  .timeline-tab ul{
    padding: 0;
  }
  .attr-icon{
    padding: 0 48px;
  }
  .team-attr {
    padding: 24px 48px 21px 48px;
  }
  .img-attr div.attr-meta {
    height: 60px;
    padding: 0 24px;
  }
  .attr-item{
    padding: 0 24px;
  }
  .feat-img{
    text-align: center;
  }
  .feat-content .text-right {
    text-align: center;
  }
  .feat-content .text-left {
    text-align: center;
  }
  .formlogin .form-group {
    text-align: left;
    padding: 0 12px;
    width: auto;
  }
  .mid p{
    display: none;
  }
  nav{
    position: fixed;
    width:100%;
    max-width:230px;
    height:100%;
    left:0px;
    padding:0;
    z-index:99;
    display: block;
    overflow-y: auto;
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;

  }
  .navbar{
    background: #000;
  }
  nav .pull-right{
    float: none !important;
  }
  .navbar-nav {
    float: none;
    margin: 0;
    width:auto;
    text-align:center;
  }
  .navbar-nav > li {
    float: none;
    display:block;
  }
  .list-inline li a:hover{
    color: #fff;
  }

  #menu-close, #menu-toggle{
    display:block;
  }
  .navshow{
    left:0px;
  }
  .navbar-nav > li {
    display: block;
  }
  .navbar > .container .navbar-brand{
    margin-left: 0;
    text-align: center;
  }
  a.navbar-brand {
    float:none;
    position:relative;
    display: block;
    z-index:999;
    padding: 8px;
    margin: 0 0 12px 0;
    height:auto;
  }
  a.navbar-brand img {
    margin: 0 0;
    border:none;
  }
  .navbar .container{
    width: inherit;
  }
  nav{
    left:-230px;
  }
  nav .btn{
    padding:6px 6px;
  }
  nav .btn:hover{
    color: #242424;
  }
  .navbar-nav > li {
    float: none;
    display:block;
  }
  .ava-team{
    max-width: 50%;
    margin:0 auto;
  }
}
@media screen and (min-width:481px) and (max-width:767px){
  /*timeline*/
  .timeline-tab ul li a span {
    display: block;
    text-align: center;
  }
  .timeline-tab ul li a span.tab-label {
    font-size: 18px;
    padding-right: 0;
  }

  .main-head h1{
    font-size: 24px;
    line-height: 24px;
  }
  .wrapp-team{
    max-width: 400px;
  }

  /*========================== lightbox ===============================*/
  .rglightbox{
    width:95% !important;
  }
  .product-feat a {
    display: inline-block;
    margin: 20px 11px;
  }
}
@media screen and (min-width:240px) and (max-width: 480px){
  /*timeliine*/

  .timeline-tab ul li a span b.year{
    font-size: 14px;
  }
  .main-head{
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
    padding-top: 48px;
  }
  .main-head h1{
    font-size: 18px;
    line-height: 24px;
  }
  a.playVid {
    font-size: 14px;
    color: #fff;
  }
  .circle div{
    font-size: 12px;
    padding-top: 40%;
  }
  .wrapp-team{
    max-width: none;
  }
  .circle {
    width: 29%;
  }
  .team-left {
    position: absolute;
    margin-top: -40px;
    left: -5%;
  }
  .team-right {
    position: absolute;
    margin-top: -40px;
    right: -5%;
  }

  /*========================== lightbox ===============================*/
  .rglightbox{
    width:95% !important;
  }
  .product-feat a {
    display: inline-block;
    margin: 6px 14px;
  }
  .hcaption:hover .post-folio{
    display:none;
  }
  .icon {
    width: 50px;
    height: 50px;
  }
  .wrapp-icon a {
    width: 40px;
    height: 40px;
    padding: 7px;
  }
  /*========================================*/
  .mytab-content .pull-right, .mytab-content .pull-left{
    float:none !important;
  }
  .mytab-content .text-left, .mytab-content .text-right{
    text-align:center;
  }
  .feat-icon{
    margin:0 auto 24px auto;
  }
  ================================================*/
  ul.fsocial li {
    display: inline-block;
    margin: 12px;
  }
}