/*



Hydro Template 



http://www.templatemo.com/tm-509-hydro



*/  

  @import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600');



  body {

    background: #ffffff;

    font-family: 'Poppins', sans-serif;

    overflow-x: hidden;

  }





  /*---------------------------------------

     TYPOGRAPHY              

  -----------------------------------------*/



  h1,h2,h3,h4,h5,h6 {

    font-weight: 300;

    line-height: inherit;

    letter-spacing: -1px;

  }



  h1 {

    color: #292929;

    font-size: 3em;

    margin-bottom: 30px;

  }



  h2 {

    color: #393939;

    font-size: 2em;

  }



  h3 {

    color: #505050;

    font-size: 1.5em;

    font-weight: 500;

    margin-bottom: 0;

  }



  h4 {

    color: #696969;

    font-size: 18px;

    line-height: normal;

  }

  

  h5 {

    color: #696969;

    font-size: 16px;

    line-height: normal;

  }



  p {

    color: #757575;

    font-size: 14px;

    font-weight: normal;

    line-height: 25px;

  }



  strong {

    font-weight: 500;

  }





  /*---------------------------------------

     GENERAL               

  -----------------------------------------*/



  * {

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

  }



  *:before,

  *:after {

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

  }



  a {

    color: #252525;

    font-weight: normal;

    -webkit-transition: 0.5s;

    transition: 0.5s;

    text-decoration: none !important;

  }



  a:hover, a:active, a:focus {

    color: #E28506;

    outline: none;

  }



  .section-title {

    margin-bottom: 60px;

  }



  .section-title h2 {

    margin-top: 0;

    margin-bottom: 10px;

    line-height: 0;

  }



  .section-title .line-bar {

    color: #d9d9d9;

    display: block;

    font-size: 5em;

    line-height: 0;

  }



  .section-btn {

    background: #E28506;

    border: 0;

    border-radius: 100px;

    color: #ffffff;

    cursor: pointer;

    font-size: inherit;

    font-weight: normal;

    padding: 15px 30px;

    margin-right:20px;

    -webkit-transition: 0.5s;

    transition: 0.5s;

  }



  .section-btn:hover,

  .section-btn:focus {

    background: #E28506;  /* fallback for old browsers */

    background: -webkit-linear-gradient(to right, #080808, #080808);  /* Chrome 10-25, Safari 5.1-6 */

    background: linear-gradient(to right, #080808, #080808); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

    border-color: transparent;

    color: #ffffff;

  }

  

  .section-btn-khusus {

    background: transparent;

    border: 3px #E28506 solid;

    border-radius: 50px;

    color: #E28506;

    cursor: pointer;

    font-size: 12px;

    font-weight: 500;

    -webkit-transition: 0.5s;

    transition: 0.5s;

  }



  .section-btn-khusus:hover,

  .section-bt-khusus:focus {

    background: #E28506;  /* fallback for old browsers */

    background: -webkit-linear-gradient(to right, #E28506, #E28506);  /* Chrome 10-25, Safari 5.1-6 */

    background: linear-gradient(to right, #E28506, #E28506); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

    border-color: transparent;

    color: #ffffff;

  }



  .overlay {

    background: #E28506;  /* fallback for old browsers */

    background: -webkit-linear-gradient(295.65deg, #080808, #E28506);  /* Chrome 10-25, Safari 5.1-6 */

    background: linear-gradient(295.65deg, #080808, #FFF0); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

    opacity: 0.6;

    position: absolute;

    width: 100%;

    height: 100%;

    top: 0;

    right: 0;

    left: 0;

  }

  

  .overlay-home {

    background: #E28506;  /* fallback for old browsers */

    background: -webkit-linear-gradient(295.65deg, #080808, #E28506);  /* Chrome 10-25, Safari 5.1-6 */

    background: linear-gradient(295.65deg, #080808, #E28506); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

    opacity: 0;

    position: absolute;

    width: 100%;

    height: 100%;

    top: 0;

    right: 0;

    left: 0;

  }



  section {

    padding-top: 80px;

    padding-bottom: 80px;

    text-align: center;

  }

    /*---------------------------------------

       WA              

  -----------------------------------------*/



  .float{

    position:fixed;

    width:160px;

    height:35px;

    bottom:20px;

    right:40px;

    background-color:#25d366;

    color:#FFF;

    border-radius:50px;

    text-align:center;

    font-size:30px;

    box-shadow: 2px 2px 3px #999;

    z-index:100;

		font-size: 16px;

		font-weight: 600;

    }



	.float i{

		font-size: 24px;

		font-weight: 600;

		}

  

    .my-float{

    margin: 5px 0 5px 0;

    }



  /*---------------------------------------

       PRE LOADER              

  -----------------------------------------*/



  .preloader {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 99999;

    display: flex;

    flex-flow: row nowrap;

    justify-content: center;

    align-items: center;

    background: none repeat scroll 0 0 #ffffff;

  }



  .spinner {

    border: 1px solid transparent;

    border-radius: 3px;

    position: relative;

  }



  .spinner:before {

    content: '';

    box-sizing: border-box;

    position: absolute;

    top: 50%;

    left: 50%;

    width: 45px;

    height: 45px;

    margin-top: -10px;

    margin-left: -10px;

    border-radius: 50%;

    border: 5px solid #E28506;

    border-top-color: #ffffff;

    animation: spinner .9s linear infinite;

  }



  @-webkit-@keyframes spinner {

    to {transform: rotate(360deg);}

  }



  @keyframes spinner {

    to {transform: rotate(360deg);}

  }





  /*---------------------------------------

      MENU              

  -----------------------------------------*/

  #navbarku {

    background-color: #E28506 ;

    position: fixed;

    top: 0;

    width: 100%;

    display: block;

    transition: top 0.3s;

  }

  

  .custom-navbar {

    border: none;

    margin-bottom: 0;

    padding: 0 25px;

    

  }



  .custom-navbar .navbar-brand {

    color: #ffffff;

  }



  .top-nav-collapse {

    background: #E28506;

  }



  .custom-navbar .navbar-nav.navbar-nav-first {

    /* margin-left: 0; 8em; */

    margin-left: 0em;

  }



  .custom-navbar .navbar-nav.navbar-right li a {

    padding-right: 5px;

    padding-left: 5px;

  }



  .custom-navbar .navbar-nav.navbar-right li img {

    height: 20px;

  }



  .custom-navbar .section-btn {

    padding: 15px;

    margin-left: 2em;

  }



  .custom-navbar .section-btn:hover {

    background: #E28506;  /* fallback for old browsers */

    background: -webkit-linear-gradient(to right, #E28506, #E28506);  /* Chrome 10-25, Safari 5.1-6 */

    background: linear-gradient(to right, #E28506, #E28506); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

  }



  .custom-navbar .section-btn a {

    padding: 0;

  }



  .custom-navbar .nav .section-btn a:hover {

    color: #E28506;

  }



  .custom-navbar .nav li a {

    font-size: 14px;

    font-weight: 500;

    color: #ffffff;

    letter-spacing: -0.5px;

    padding-right: 10px;

    padding-left: 10px;

    text-transform: capitalize;

	  transition: background-color 0.2s, color 0.2s;

  }



  .custom-navbar ul{

    list-style-type: none;

		margin: 0;

		padding: 0;



  }

  

  .custom-navbar > ul > li {

		float: left;

	}



  .custom-navbar .nav li a:hover {

    background: transparent;

    color: #000;

  }



  .custom-navbar .navbar-nav > li > a:hover,

  .custom-navbar .navbar-nav > li > a:focus {

    background-color: transparent;

  }



 .custom-navbar .nav li.active > a {

    background-color: transparent;

    color: #E28506;

  }

  

  .custom-navbar .nav li a.active-page

  {

    background-color: transparent;

    color: #fff;

  }



  .custom-navbar .navbar-toggle {

    border: none;

    padding-top: 10px;

  }



  .custom-navbar .navbar-toggle {

    background-color: transparent;

  }



  .custom-navbar .navbar-toggle .icon-bar {

    background: #252525;

    border-color: transparent;

  }



  li.dropdown {

		display: inline-block;

	}



	.dropdown:hover .isi-dropdown {

		display: block;

	}



	.isi-dropdown {

		display: none;

		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

		z-index: 1;

		background-color: #ff9021;

	}



	.isi-dropdown a {

		color: #ffffff !important;

	}



	.isi-dropdown a:hover {

		color: #000 !important;

		background: transparent !important;

	}



  @media(min-width:768px) {

    .custom-navbar {

      border-bottom: 0;

      background: 0 0; 

    }



    .custom-navbar.top-nav-collapse {

      background: #ffffff;

      -webkit-box-shadow: 0 1px 30px rgba(0, 0, 0, 0.1);

      -moz-box-shadow: 0 1px 30px rgba(0, 0, 0, 0.1);

      box-shadow: 0 1px 30px rgba(0, 0, 0, 0.1);

      padding: 12px 0;

    }



    .top-nav-collapse .navbar-brand {

      color: #252525;

    }



    .top-nav-collapse .nav li a {

      color: #575757;

    }



    .top-nav-collapse .nav .section-btn a {

      color: #ffffff;

    }

  }



  /*---------------------------------------

      HOME              

  -----------------------------------------*/



  #home {
    /*background: url('../images/history/firework.webp') no-repeat center center;*/

    background: url('../images/history/corporate_gathering.jpg') no-repeat center center;

    /*background: url('../images/WEB SMAAA ASCE.jpg') no-repeat center center;*/

    background-size: cover;

    vertical-align: middle;

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;

    min-height: 100vh;

    position: relative;

    overflow: hidden;

    padding-top: 10em;

    text-align: left;

  }



  #home h1 {

    color: #ffffff;

  }





  .home-info .section-btn {

    background: #E28506;

    border-color: transparent;

    color: #ffffff;

    align-items: center;

  }



  .home-info .section-btn:hover,

  .home-info .section-btn:focus {

    background: transparent;

    ;

    border: 2px solid #f9f9f9;

    color: #f9f9f9;

  }



  .home-info h2 {

    font-weight: 900;

    font-size: 65px;

    line-height: 100%;

    color: #FFFFFF;

    display: inline-block;

    vertical-align: middle;



  }



  .home-info h3 {

    font-weight: 700;

    font-size: 35px;

    line-height: 100%;

    color: #FFFFFF;

    display: inline-block;

    vertical-align: middle;

  }



  .home-info span {

    display: inline-block;

    vertical-align: middle;

    color: #f9f9f9;

    font-weight: 500;

    font-size: 17px;

  }



  .home-info span small {

    display: block;

  }







  /*---------------------------------------

      ABOUT              

  -----------------------------------------*/



  #about {

    padding: 25px 25px;

    text-align: left;

    padding-bottom: 0;

  }



  #about .about-info:first-child {

    margin-right: 40px;

  }



  .about-info .section-title {

    margin: 40px 0 40px 0;

  }



  .about-info {

    margin-top: 0px;

  }



  .skill-thumb strong {

    display: inline-block;

    margin-bottom: 10px;

  }



  .skill-thumb .progress {

    background: #f0f0f0;

    border-radius: 5px;

    box-shadow: none;

    height: 3px;

    margin-bottom: 25px;

  }



  .skill-thumb .progress-bar {

    background: #1f1f1f;

    box-shadow: none;

  }



  .about-linev {

    border-left: 6px solid #E28506;

    height: 40px;

    padding-left: 0.6em;

  }



  .about-linem {

    border-left: 6px solid #E28506;

    height: 80px;

  }

  



  .champ{

    color: #E28506;

    font-size: 32px;

    line-height: normal;

    vertical-align: middle;

    justify-content: center;

    align-items: center;

  }







  /*---------------------------------------

      WORK             

  -----------------------------------------*/

  #work .work-thumb {

    overflow: hidden;

    position: relative;

    cursor: pointer;

    border-radius: 3px;

  }



  .work-thumb .work-info {

    position: absolute;

    top: 0px;

    left: 0px;

    right: 0px;

    bottom: 0px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    text-align: center;

;

    

  }



  .work-thumb .work-info:after {

    position: absolute;

    top: 0px;

    left: 0px;

    right: 0px;

    bottom: 0px;

    content: "";

    background: #E28506;

    opacity: 0;

    transition: 0.5s;



  }



  .work-thumb .work-info:hover::after {

    opacity: 0.9;

  }



  .work-thumb .work-info h3,

  .work-thumb .work-info small {

    transform: translateY(100%);

    opacity: 0;

    display: block;

    transition: 0.5s 0.2s;

    color: #ffffff;

    z-index: 2;

    position: relative;

  }



  .work-thumb .work-info small {

    color: #d9d9d9;

    text-transform: uppercase;

    font-size: 12px;

    font-weight: 500;

    letter-spacing: 1px;

    margin-top: 3px;

  }



  .work-thumb:hover .work-info h3,

  .work-thumb:hover .work-info small {

    transform: translateY(0px);

    opacity: 1;

  }







  /*---------------------------------------

      BLOG             

  -----------------------------------------*/



  #blog {

    background: #f0f0f0;

  }



  #blog-header,

  #blog-detail {

    text-align: left;

  }



  #blog-header {

    background: url('../images/polos.jpg') no-repeat center center;

    background-size: cover;

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;

    height: 40vh;

    color: #ffffff;

    position: relative;

    padding-top: 10em;

  }



  #blog-header h2 {

    color: #ffffff;

  }



  .blog-thumb {

    background: #ffffff;

    -webkit-box-shadow: 0 1px 30px rgba(0, 0, 0, 0.1);

    -moz-box-shadow: 0 1px 30px rgba(0, 0, 0, 0.1);

    box-shadow: 0 1px 30px rgba(0, 0, 0, 0.1);

    border-radius: 3px;

    text-align: left;

    margin-bottom: 30px;

    /* height: 325px; */

  }



  .media.blog-thumb .media-left {

    width: 45%;

  }



  .blog-thumb small {

    color: #E28506;

    font-weight: 500;

    display: block;

  }



  .blog-thumb small .fa {

    margin-right: 5px;

  }



  .blog-thumb h4 {

    margin-top: 2px;

    margin-bottom: 0px;

  }



  #blog-detail h2 {

    padding: 5px auto;

  }



  .blog-info {

    padding: 25px 25px;

  }



  .blog-info h3 {

    margin: 0;

    padding: 8px 0 6px 0;

    text-transform: capitalize;

  }



  .blog-info .section-btn {

    background: #E28506;

    color: #ffffff;

    margin-top: 20px;

  }



  .blog-info .section-btn:hover {

    background: #080808;  /* fallback for old browsers */

    color: #ffffff;

  }



  .blog-thumb ul {

    margin: 32px 12px 22px 0px;

  }



  .blog-thumb ul li {

    list-style: square;

    font-weight: normal;

    padding: 4px 12px 4px 0px;

  }



  .blog-social-share {

    text-align: center;

    padding-top: 22px;

  }



  .blog-social-share .btn {

    border-radius: 100px;

    border: none;

    font-size: 10px;

    letter-spacing: 0.5px;

    text-transform: uppercase;

    margin: 20px 6px;

    padding: 10px 16px;

  }



  .blog-social-share .btn-primary {

    background: #3b5998;

  }



  .blog-social-share .btn-success {

    background: #1da1f2;

  }



  .blog-social-share .btn-danger {

    background: #dd4b39;

  }



  .blog-social-share a .fa {

    padding-right: 4px;

  }



  .blog-ads {

    background: #f9f9f9;

    border-right: 4px solid #2b2b2b;

    padding: 42px;

    text-align: center;

    margin: 26px 0 26px 0;

  }



  .blog-ads h4 {

    font-size: 18px;

  }



  .tab {

    overflow: hidden;

    border: 1px solid #E28506;

    background-color: #E28506;

    color: #fff;

  }

  

  .tab button {

    background-color: inherit;

    float: left;

    border: none;

    outline: none;

    cursor: pointer;

    padding: 14px 16px;

    transition: 0.3s;

    font-size: 17px;

  }

  

  .tab button:hover {

    background-color: #E28506;

  }

  

  .tab button.active {

    background-color: #E28506;

  }

  

  .tabcontent {

    display: none;

    padding: 6px 12px;

    border: 1px solid #E28506;

    border-top: none;

  }

  

  

  /*---------------------------------------

      CONTACTS             

  -----------------------------------------*/



  #contact {

    background: #F1F3F4;  /* fallback for old browsers */

    background: -webkit-linear-gradient(to right, #F1F3F4, #F1F3F4);  /* Chrome 10-25, Safari 5.1-6 */

    background: linear-gradient(to right, #F1F3F4, #F1F3F4); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

    /*opacity: 0.7;*/

  }



  .google-map {

    border-radius: 0%;

    overflow: hidden;

    margin: 0 auto;

  }



  .google-map iframe {

    border: 0;

  }



  #contact .form-control {

    border: 0;

    border-radius: 5px;

    box-shadow: none;

    color: rgba(20,20,20,1);

    font-size: 14px;

    font-weight: normal;

    margin-bottom: 15px;

    padding-left: 8px;

  }



  #contact input,

  #contact select {

    height: 55px;

  }



  #contact select {

    color: rgba(20,20,20,1);

  }



  #contact input[type='submit'] {

    background: #E28506;

    border-radius: 100px;

    color: #ffffff;

    font-weight: 500;

  }



  /*---------------------------------------

     FOOTER              

  -----------------------------------------*/



  footer {

    background: #E28506;  /* fallback for old browsers */

    background: -webkit-linear-gradient(to right, #E28506, #E28506);  /* Chrome 10-25, Safari 5.1-6 */

    background: linear-gradient(to right, #E28506, #E28506); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

    /* position: relative; */

    padding-top: 10px;

    padding-bottom: 0px;

  }



  footer h2 {

    color: #ffffff;

  }



  .footer-link {

    margin: 0;

    padding: 0;

  }



  .footer-link li {

    display: block;

    list-style: none;

    margin: 5px 10px 5px 0;

  }



  footer p,

  footer span,

  .footer-link li a {

    color: #d9d9d9;

  }



  .copyright-text p,

  .footer-bottom .phone-contact p {

    font-size: 11px;

  }



  .footer-info p {

    margin-right: 0em;

  }



  .footer-bottom {

    margin-top: 0.6em;

    padding-top: 0em;

    justify-content: center;

    align-items: center;

    display: block;

    margin: 0 auto;

  }



  .center {

    display: block;

    margin-left: auto;

    margin-right: auto;    

  }



  .footer-bottom .phone-contact,

  .footer-bottom .social-icon {

    display: inline-block;

    vertical-align: top;

  }



  .footer-bottom .phone-contact {

    margin-right: 0px;

  }



  .footer-bottom .phone-contact span {

    font-weight: 300;

    display: inline-block;

    margin-left: 0px;

  }





  /*---------------------------------------

     SOCIAL ICON              

  -----------------------------------------*/



  .social-icon {

    position: relative;

    padding: 0;

    margin: 0;

  }



  .social-icon li {

    display: inline-block;

    list-style: none;

  }



  .social-icon li a {

    border-radius: 100px;

    color: #d9d9d9;

    font-size: 15px;

    text-decoration: none;

    position: relative;

    margin: 5px 10px;

  }



  .social-icon li a:hover {

    color: #E28506;

  }





  /*---------------------------------------

      MODAL FORM             

  -----------------------------------------*/



  @media (min-width: 992px) {

    .modal-dialog {

      width: 420px;

    }

  }



  .modal-open .modal {

    padding-left: 0 !important;

  }



  .modal-dialog .modal-content {

    background: #000000;  /* fallback for old browsers */

    background: -webkit-linear-gradient(to right, #434343, #000000);  /* Chrome 10-25, Safari 5.1-6 */

    background: linear-gradient(to right, #434343, #000000); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

    border: none;

    border-radius: 2px;

    text-align: center;

    position: relative;

    padding: 2em;

  }



  .modal-header, .modal-footer {

    border-bottom: 0;

    padding: 0;

  }



  .modal-dialog .modal-body {

    padding: 0;

  }



  .modal-dialog .modal-body a {

    color: #d9d9d9;

  }



  .modal .close {

    color: #999;

    font-size: 40px;

    font-weight: 300;

    text-shadow: none;

    opacity: 1;

    position: absolute;

    top: 15px;

    right: 15px;

    z-index: 100;

    outline: none;

  }



  .modal-dialog .modal-title {

    margin-bottom: 20px;

  }



  .modal-dialog .modal-title h2 {

    color: #ffffff;

  }



  .modal-dialog .nav-tabs {

    display: inline-block;

  }



  .modal-dialog .nav-tabs > li > a {

    border: 0;

    color: #999999;

    margin-right: 0;

  }



  .modal-dialog .nav-tabs > li.active > a, 

  .modal-dialog .nav-tabs > li.active > a:hover, 

  .modal-dialog .nav-tabs > li.active > a:focus,

  .modal-dialog .nav>li>a:focus, 

  .modal-dialog .nav>li>a:hover {

    color: #ffffff;

    background-color: transparent;

    border: none;

    border-bottom: 1px solid #E28506;

  }



  .modal-dialog .tab-content {

    padding-top: 20px;

  }



  .modal-dialog form .form-control {

    border-radius: 5px;

    border: 1px solid #595959;

    background: transparent;

    box-shadow: none;

    margin: 15px 0 15px 0;

    height: 50px;

  }



  .modal-dialog form .form-control:hover,

  .modal-dialog form .form-control:focus {

    border-color: #ffffff;

  }



  .modal-dialog form input[type="submit"] {

    background: #E28506;

    border-color: transparent;

    border-radius: 100px;

    color: #ffffff;

    margin-top: 20px;

  }





  /*---------------------------------------

     RESPONSIVE STYLES              

  -----------------------------------------*/



  @media screen and (max-width: 1170px) {



    .custom-navbar .navbar-nav.navbar-nav-first {

      margin-left: inherit;

    }

  }



  @media screen and (max-width: 991px) {



    h3 {

      font-size: 1.2em;

    }



    p {

      font-size: 13px;

    }



    #home {

      text-align: center;

    }



    .home-info {

      margin-bottom: 3em;

    }



    .custom-navbar .nav li a {

      font-size: 13px;

      padding-right: 11px;

      padding-left: 11px;

    }



    .custom-navbar .section-btn {

      margin-left: 1em;

    }



    .blog-thumb {

      height: inherit;

    }



    .blog-info {

      padding: 45px 25px;

    }



    .media.blog-thumb .media-left {

      display: block;

      width: 100%;

      padding-right: 0;

      overflow: hidden;

    }



    .media.blog-thumb .media-left {

      height: 250px;

    }



    .media.blog-thumb .media-left img {

      position: relative;

      bottom: 10em;

    }



    #work .work-thumb,

    .footer-thumb {

      margin-top: 20px;

      margin-bottom: 30px;

    }

  }



  @media only screen and (min-width: 640px) and (max-width: 767px) {



    #blog-header {

      height: 100vh;

    }



    .media.blog-thumb .media-left {

      height: 550px;

    }



    .media.blog-thumb .media-left img {

      position: relative;

      bottom: 10em;

    }

  }



  @media screen and (max-width: 767px) {



    .custom-navbar {

      background: #ffffff;

      -webkit-box-shadow: 0 1px 30px rgba(0, 0, 0, 0.1);

      -moz-box-shadow: 0 1px 30px rgba(0, 0, 0, 0.1);

      box-shadow: 0 1px 30px rgba(0, 0, 0, 0.1);

      padding: 10px 0;

    }



    .custom-navbar .nav li a {

      line-height: normal;

      padding: 5px;

    }



    .custom-navbar .navbar-brand,

    .top-nav-collapse .navbar-brand {

      color: #252525;

      font-weight: 600;

    }



    .custom-navbar .nav li a,

    .top-nav-collapse .nav li a {

      color: #575757;

    }



    .custom-navbar .navbar-nav.navbar-right li {

      display: inline-block;

    }



    .custom-navbar .section-btn {

      display: block !important;

      width: 50%;

      margin: 10px auto 10px auto;

      padding: 10px;

    }



    .custom-navbar .section-btn a {

      color: #ffffff !important;

    }

    .home-info h3 {

      margin-top: 0px;

    }



    .home-info span {

      margin-top: 20px;

    }



    #about .about-info:first-child {

      margin-right: 0;

    }



    .about-info {

      margin: 40px 0 40px 0;

    }



    .google-map {

      margin-top: 50px;

    }



    footer {

      text-align: center;

    }



    .footer-info p,

    .footer-bottom .phone-contact {

      margin-right: 0;

    }

  }



  @media screen and (max-width: 639px) {



    h1 {

      font-size: 2em;

    }



    .media.blog-thumb .media-left {

      height: 320px;

    }



    .media.blog-thumb .media-left img {

      position: relative;

      bottom: 6em;

    }

    

  }



  .sub {font-family:Roboto, sans-serif; color: #445555;}

  .sub-sec{ text-align: center; max-width: 1170px; margin: 0 auto 50px;}

  .sub-sec p{font-size: 16px; line-height: 1.5;}

  .green-block{width: 25px; height: 25px; background: #E28506; border-radius: 5px; margin: 100px auto 10px; display: block; }

  .sub-title{font-size: 35px; color: rgb(248, 156, 35); font-weight: 400; margin-bottom: 40px;}

  .sub-title span{color: #E28506 ; }

  .sub-title em{display: block; font-size: 18px; color: #445555; margin-top: 15px;}

  /**/

  

  .history-block{position: relative; margin: 50px 0;  padding-top: 50px; }

  .history-block:before{content:""; display: block; width: 11px; height: 11px; border-radius: 50%; background: #E28506; left: 50%; top: -5px; position: absolute; margin-left: -5px; z-index: 99;}

  .history-block:after{content:""; left:50%; display: block; width: 1px; top:0; bottom: 8px; background:#ccc; position: absolute;}

  .history {width: 50%; margin-bottom: 120px; position: relative; margin-top: 30px;}

  .history dt{font-size: 45px; font-weight: 700; text-align: right; margin-bottom: 30px; color: #000;}

  .history dd {font-size: 16px; line-height: 1.5; text-align: right; position: relative;  margin-bottom: 15px;}

  .sub .left{padding-right:30px;}

  .history dd:after{content:""; width: 12px; border: 7px double #E28506; background: #fff;height: 12px; border-radius: 50%; display:block; z-index: 99; position: absolute; right: -37px; top: 5px;}

  .sub .right {margin-left: 50%; padding-left: 30px; }

  .sub .right dd{text-align: left !important; }

  .sub .right dt{text-align: left !important;}

  .sub .right dd:after{ left: -37px; top: 5px;}

  

  .history:nth-of-type(1):after{ width: 400px; height: 240px; background: #ccc; content:""; display: block; position :absolute; right: -450px; top: 0; 

      background: url('../images/history/01_2.webp'); background-size: cover;}

  .history:nth-of-type(2):after{ width: 400px; height: 240px; background: #ccc; content:""; display: block; position :absolute; left: -450px; top: 0;

      background: url('../images/history/02.webp');  background-size: cover;}

  .history:nth-of-type(3):after{ width: 400px; height: 240px; background: #ccc; content:""; display: block; position :absolute; right: -450px; top: 0;

      background: url('../images/history/03.webp');  background-size: cover;}

  .history:nth-of-type(4):after{ width: 400px; height: 240px; background: #ccc; content:""; display: block; position :absolute; left: -450px; top: 0;

        background: url('../images/history/04.png');  background-size: cover;}

  .history:nth-of-type(5):after{ width: 400px; height: 240px; background: #ccc; content:""; display: block; position :absolute; right: -450px; top: 0;

        background: url('../images/history/05.webp');  background-size: cover;}

  .history:nth-of-type(6):after{ width: 400px; height: 240px; background: #ccc; content:""; display: block; position :absolute; left: -450px; top: 0;

        background: url('../images/history/06.webp');  background-size: cover;}

  .history:nth-of-type(7):after{ width: 400px; height: 240px; background: #ccc; content:""; display: block; position :absolute; right: -450px; top: 0;

        background: url('../images/history/07.webp');  background-size: cover;}

  .history:nth-of-type(8):after{ width: 400px; height: 240px; background: #ccc; content:""; display: block; position :absolute; left: -450px; top: 0;

		background: url('../images/history/08.webp');  background-size: cover;}

  .history:nth-of-type(9):after{ width: 400px; height: 240px; background: #ccc; content:""; display: block; position :absolute; right: -450px; top: 0;

		background: url('../images/history/09.webp');  background-size: cover;}

  

  /* tablet */

  @media screen and (min-width:769px) and (max-width:991px){

      .sub{max-width: 720px; margin: auto;}

      .sub .history:after{width: 300px; height: 200px; right: -330px} 

      .sub .history:nth-of-type(2):after{width: 300px; height: 200px; right: unset; left:-330px;} 

  }

  

  /* mobile */

  @media screen and (max-width:768px){

      .sec01{padding: 30px 0; background: unset;}

      .sec01 h3{font-size: 40px;}

      .sec01 h3 span{font-size: 33px}

      .sec01 p{width: 100%;}

      .green-block{margin: 30px 0;}

      .sec01 h3{text-align: left;}

      .history:after{display: none  !important; }

      .history-block:before{left: 10px !important;}

      .history-block:after{left: 10px; bottom: 30px;}

      .history{width: 100%; margin-bottom: 50px;}

      .sub .history{padding: 0 0 0 30px !important}

      .sub .right{margin: 0;}

      .history dt{text-align: left !important; margin-bottom: 20px;}

      .history dd{text-align: left !important;}

      .history dd:after {

      height: 12px;

      border-radius: 50%;

      left: -26px !important;

      top: 5px;

  }

  }

  

  @media screen and (min-width:992px) and (max-width:1300px){

      .sub{max-width: 970px; margin: auto}

  }