/* 
--------------------------------------------------------------------------------|*
| Author     : Basuki Tafif.                                                    |***
| Company    : RUANGKODE - www.ruangkode.com                                    |*****
| Style Name : Custom INDOJASASEDOTWC                                           |*******
| Created on : 15 Agustus 2020                                                  |***
 -------------------------------------------------------------------------------|*
*/

/* --------------------------
::: 01. Global CSS
-------------------------- */
@import url('https://fonts.googleapis.com/css?family=Nunito:100,200,300,400,400i,500,600,700,800&subset=latin-ext');
body{font-family:'Nunito',sans-serif;font-weight: 400;font-size: 16px;background-attachment:fixed;-ms-text-size-adjust: 100%;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale}
h1,h2,h3,h4,h5,h6,p,a{margin: 0; padding: 0}
h1{font-size: 38px}
h2{font-size: 32px}
h3{font-size: 26px}
h4{font-size: 22px}
h5{font-size: 20px}
h6{font-size: 18px}
p{font-size: 16px}
ol li, ul li{font-size: 16px}
a, a:hover, a:focus, a:active, a.active, a.focus{text-decoration: none}
img{width: 100%}

@media (min-width: 1200px){
    .container {max-width: 1180px}
}
@media (max-width: 992px){
    h1{font-size: 28px}
    h2{font-size: 24px}
    h3{font-size: 20px}
    h4{font-size: 16px}
    h5{font-size: 14px}
    h6{font-size: 12px}
    p{font-size: 14px}
    ol li, ul li{font-size: 14px}
    .container{max-width: 90%}
}
@media (max-width: 768px){
    .container{max-width: 100%}
    .container-fluid{padding-left: 0;padding-right: 0}
    .row{margin-left: -5px;margin-right: -5px}
    [class*="col-"]{padding: 0 5px}
}

/* --------------------------
:: 02. HEADER
-------------------------- */
.header{background-color:#ED2C32;color:#fff; padding: 20px 0 10px}
.header-item{margin-bottom: 10px}
.header-item a{display: block; text-decoration: none}
.header-item a span{width: 40px; height: 40px; display: inline-block; padding-top: 3px; text-align: center; vertical-align: middle; color: #FFF; font-size: 20px; border: 1px solid #FFF; border-radius: 5px; float: left; margin-right: 10px}
.header-item a span .feather{}
.header-item a p{font-size: 13px;color: #FFF; line-height: 1; margin: 0; padding: 0; padding-top: 5px}
.header-item a b{font-size: 13px;color: #FFF; font-weight: bold}
@media (max-width: 575px){
    .header{color:#fff; padding: 20px 0 10px}
    .header-item{margin-bottom: 10px}
    .header-item a{display: block; text-decoration: none}
    .header-item a span{width: 22px; height: 22px; line-height: 18px; padding-top: 0; margin-right: 5px}
    .header-item a span .feather{width: 16px; height: 16px;}
    .header-item a p{font-size: 11px; line-height: 0; padding-top: 4px}
    .header-item a b{font-size: 11px;  padding: 0; margin: 0}
}

/* --------------------------
:: 03. NAVBAR
-------------------------- */
.navbar-rk{background:#FFF;padding: 0;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-ms-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease}
.navbar-brand{padding: 0}
.navbar-brand img{width: 250px}
.sticky.is-sticky{position: fixed;top: 0;right: 0;left: 0;z-index: 1000;width: auto;box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1)}
.navbar-rk ul li a.nav-link{padding:26px 10px!important;display:block;font-size:14px;font-weight:800;color:#343386;text-transform:uppercase;-webkit-transition-duration:500ms;-o-transition-duration:500ms;transition-duration:500ms}
.navbar-rk ul li a.nav-link i{color: #fb397d; margin-right: 5px}
.navbar-rk ul li a.nav-link .feather{width: 14px; height: 14px; margin-top: -3px; margin-right: 2px}
.navbar-rk ul li a.nav-link:hover{color:#ED2C32}
.navbar-rk ul li a.nav-link:hover i{color:#F2184F}
.navbar-rk .dropdown-menu{background:#FFF;border-radius:0 0 3px 3px}
.navbar-rk .dropdown-menu .dropdown-item{font-size: 14px;color: #666;text-transform:uppercase;line-height:1;padding:7px 15px}
.navbar-rk .dropdown-menu .dropdown-item i{color: #999}
/*Hamburger*/
.navbar-hamburger{width: 25px;height: 40px; display: block; position: relative;-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);-webkit-transition: .5s ease-in-out;-moz-transition: .5s ease-in-out;-o-transition: .5s ease-in-out;transition: .5s ease-in-out;cursor: pointer}
.navbar-hamburger span{display: block;position: absolute;height: 4px;width: 100%;background: #F2184F;border-radius: 0;opacity: 1;left: 0;-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);-webkit-transition: .25s ease-in-out;-moz-transition: .25s ease-in-out;-o-transition: .25s ease-in-out;transition: .25s ease-in-out}
.navbar-hamburger span:nth-child(1){top: 0px}
.navbar-hamburger span:nth-child(2),.navbar-hamburger span:nth-child(3){top: 10px}
.navbar-hamburger span:nth-child(4){top: 20px}
.navbar-hamburger.open span:nth-child(1){top: 10px;width: 0%;left: 50%}
.navbar-hamburger.open span:nth-child(2){-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg)}
.navbar-hamburger.open span:nth-child(3){-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg)}
.navbar-hamburger.open span:nth-child(4){top: 10px;width: 0%;left: 50%}
@media(min-width: 992px){
    .navbar-rk .dropdown:hover>.dropdown-menu{display: block}
    .navbar-rk .dropdown>.dropdown-toggle:active{pointer-events: none}
    .navbar-rk .dropdown-menu{border-color:#DDD;border-top:3px solid #DDD;margin-top:0}
    .navbar-rk .dropdown-menu .dropdown-item:hover{background:#EEE}
}
@media(max-width:992px){
    .navbar-rk{background:#FFF}
    .navbar-nav{border-top: 1px solid #EEE}
    .navbar-brand img{width: 200px!important}  
    .navbar-rk .navbar-toggler{border: none;padding: 0; padding-top: 15px}
    .navbar-rk .navbar-toggler:focus{outline: none}
    .navbar-rk ul li a.nav-link{border-bottom: 1px solid #EEE; padding: 10px 0!important}
    .navbar-rk ul li:last-child .nav-link{border-bottom: none}
    .navbar-rk .dropdown-toggle::after{border: none;content: "\002b";float: right;margin: 0;width: auto;font-size: 18px;font-weight: bold;color: #F2184F}
    .navbar-rk .nav-item.dropdown.show .dropdown-toggle::after{content: "\2013"}
    .navbar-rk .nav-item .dropdown-menu{border: none; background: transparent;padding: 0;transition: .4s ease-in-out}
    .navbar-rk .dropdown-menu .dropdown-item{border-bottom: 1px solid #EEE}
}
@media (max-width: 768px){
    .navbar-expand-lg>.container,.navbar-expand-lg>.container-fluid{padding-right:15px;padding-left:15px}
}

/* --------------------------
:: 04. SlideShow
-------------------------- */
.slideshow{background-image: url(../../images/web/bg-pattern-body.png)}
.slideshow-content h1{margin: .5em 0;line-height: 1.3em;font-weight: 700;color: #273f5b}
.slideshow-btn{margin-top: 20px}
.slideshow-btn span{border: 1px solid #EEE; padding: 5px 10px 5px; border-radius: 3px; margin-right: 10px; vertical-align: middle; display: inline-block;box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3)}
.slideshow-btn span i{font-size: 24px;}
@media (max-width: 768px){
    .slideshow-content h1{font-weight: 600;font-size: 20px}
    .slideshow-content p{font-weight: 300}
}

/* --------------------------
:: 04.2. Owl Slider CSS
-------------------------- */
.owl-theme .owl-nav.disabled+.owl-dots{z-index:99;position:absolute;bottom:0;left:0;right:0}
.owl-theme .owl-dots .owl-dot span {background: #BBB}
.owl-carousel .item{padding: 90px 0;position:relative;background-repeat:no-repeat;background-size:100% 100%!important}
.owl-carousel .owl-caption{position:absolute;top:40%;left:0;right:0}
/*.owl-item.active img{animation:2s .2s fadeIn both}*/
.owl-item.active h1{animation:2s .2s fadeIn both}
.owl-item.active p{animation:3s .6s fadeInUp both}
.owl-item.active a, .owl-item.active span{animation:2s 1s flipInX both}
@media(max-width: 992px) {
    .owl-carousel .item{padding: 40px 0; text-align: center; background-size:cover!important}
}

/* --------------------------
:: 05. MAIN SERVICE
-------------------------- */
.main-service{color: #272d34}
.main-service .container-fluid{padding-left: 0;padding-right: 0}
.main-service .row{margin-left: 0;margin-right: 0}
.main-service [class*="col-"]{margin-top: 0;margin-bottom: 0;padding: 0}
.main-service-item{padding: 55px 60px;background-size: cover;background-repeat: no-repeat;background-position: 50% 0;position: relative;overflow: hidden}
.main-service-item > *{position: relative;z-index: 2!important}
.main-service-item:after{content: '';display: block;position: absolute;top: 0;right: -1px;bottom: 0;left: 0}
.main-service-bg-1:after{background-image: linear-gradient(135deg, #19519e, #1dd5e6);opacity: 0.8}
.main-service-bg-2:after{background-image: linear-gradient(135deg, #4344c3, #cc6ac4);opacity: 0.8}
.main-service-bg-3:after{background-image: linear-gradient(135deg, #e16a4f, #f3ca5c);opacity: 0.8}
.main-service-item h3{color: #FFF;font-weight: 800}
.main-service-item p{color: #FFF;font-size: 50px;line-height: 1.3;font-weight: 100}
.main-service-item span{width: 50px;height: 2px;background-color: rgba(255, 255, 255, 0.7);display: block;margin: 0px 0px 20px}
.main-service-item a{color: #FFF;font-size: 14px;text-transform: uppercase;font-weight: 700}
.main-service-item a i{margin-left: 10px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-ms-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease}
.main-service-item a:hover i{margin-left: 20px;transform: rotate(360deg) scale(1) skew(1deg) translate(0px);-webkit-transform: rotate(360deg) scale(1) skew(1deg) translate(0px);-moz-transform: rotate(360deg) scale(1) skew(1deg) translate(0px);-o-transform: rotate(360deg) scale(1) skew(1deg) translate(0px);-ms-transform: rotate(360deg) scale(1) skew(1deg) translate(0px)}
@media (max-width: 768px){
    .main-service-item{padding: 40px 20px}
    .main-service-item h3{color: #FFF;font-weight: 600}
    .main-service-item p{color: #FFF;font-size: 30px; line-height: 1.5}
    .main-service-item span{display: block;margin: 0px 0px 10px}
    .main-service-item a{font-size: 12px}
}

/* --------------------------
:: 06. HOME ABOUT
-------------------------- */
.blog-media{padding: 70px 0;background-image: url(../../images/web/bg-wave-smooth.jpg);background-size: cover;background-position: center}
.bm-content span{display: block;font-size: 14px;font-weight: 400;text-transform: uppercase;margin-bottom: 10px}
.bm-content h2{position:relative;word-wrap:break-word;font-weight:900;margin-bottom:10px}
.bm-content p{line-height:1.5em;margin-bottom:15px}
.bm-content p.bm-subtitle{color:#000;font-size:20px}
.bm-content-btn{margin-top: 25px}
/* Dimatikan sementara karena saat ini menggunakan btn-action
.bm-content p a{color:#b62d65;position:relative;font-size:12px;text-transform:uppercase;font-weight:700;margin-top:10px;padding:15px 20px;letter-spacing:.1em;line-height:1;display:inline-block;vertical-align:top;text-align:center;color:#272d34;border:solid 2px transparent;-o-border-image:linear-gradient(45deg,#facb67,#ec709c);border-image:linear-gradient(45deg,#facb67,#ec709c);border-image-slice:1;transition: all 0.3s ease}
.bm-content p a:hover{background:rgba(0,0,0,0.1);color:#000} 
*/
@media (max-width: 768px){
    .blog-media{padding: 30px 0}
    .bm-img img{margin-bottom: 20px}
    .bm-content{margin-bottom: 20px}
    .bm-content span{font-size: 12px}
    .bm-content p.bm-subtitle{font-size: 16px}
    /* 
    .bm-content p a{font-weight: 600;padding: 10px 15px}
    */
}

/* --------------------------
:: 07. BLOCK TITLE
-------------------------- */
.block-title{margin-bottom:50px;position:relative}
.block-title h2{color:#273F5B;margin-bottom:5px;color:#222;font-weight:800;text-transform:uppercase}
.block-title-icon{width:80px;position:relative;margin:0 auto 5px}
.block-title-icon i{color:#F2184F;font-size:1.8rem;margin-top:1px}
.block-title-icon:before{content:"";width:100px;height:2px;background:#F2184F;position:absolute;top:14px;left:-80px}
.block-title-icon:after{content:"";width:100px;height:2px;background:#F2184F;position:absolute;top:14px;right:-80px}
.block-title p{text-align:center;margin:0 auto;font-weight:400;color:#444;max-width:550px}
@media (max-width: 768px) {
    .block-title{margin-bottom:25px}
}

/* --------------------------
:: 08. BUSINESS TYPE
-------------------------- */
.business-type{padding: 70px 0;background: #f9f9f9; border-bottom: 1px solid #EEE}
.bt-item{display: block;background: #FFF;color: #273F5B;border: 1px solid #DDD;padding: 20px 10px 10px;margin-bottom: 25px;text-align: center;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-ms-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease}
.bt-item:hover{box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); border-color: #FFF}
.bt-item img{width: 70px;margin: 0 auto 20px}
.bt-item h4{margin-bottom: 10px;font-weight: 700}
@media (max-width: 768px) {
    .business-type{padding: 30px 0}
    .bt-item{border: 1px solid #EEE;padding: 10px 5px 0px;margin-bottom: 10px}
    .bt-item img{margin: 0 auto 10px}
    .bt-item:hover{border-color: #FFF}
}

/* --------------------------
:: 09. Main Features
-------------------------- */
.main-features{background:#2f2442;color:#f7f7f7;padding:70px 0;overflow:hidden}
.mf-header .block-title h2,.mf-header .block-title p{color:#f7f7f7}
.mf-header hr{max-width:50px;margin-top:15px;margin-bottom:20px;border:4px #f46c93;-webkit-border-radius:4px;border-radius:4px;border-top-style:solid}
.feature-item{margin:20px auto}
.feature-item .mf-icon{margin-top:10px}
.mf-left .feature-item{text-align:right}
.mf-left .feature-item .mf-icon{float:right;margin-left:10px; color:#fff;background-color:#F2184F;width:50px;height:50px;line-height:48px;text-align:center;-webkit-border-radius:100%;border-radius:100%}
.mf-right .feature-item .mf-icon{float:left;margin-right:10px; color:#fff;background-color:#F2184F;width:50px;height:50px;line-height:48px;text-align:center;-webkit-border-radius:100%;border-radius:100%}
.feature-item .mf-icon .feather{font-size:26px;width:30px;height:30px;}
.feature-item .mf-text{display:inline-block;width:-webkit-calc(100% - 75px);width:calc(100% - 75px)}
.feature-item .mf-text h4{color:#f46c93;margin:0; font-size: 18px; font-weight: bold}
.feature-item .mf-text p{font-size: 14px;}
.mf-image img{position:absolute;top:0;left:0;z-index:1}
@media (max-width: 992px){ 
    .mf-image{display:none}
}
@media(max-width:768px){
    .main-features{padding:30px 0}
    .feature-item{margin:10px auto}
    .mf-left .feature-item{text-align:left}
    .feature-item .mf-icon{margin:0 10px 0 0}
    .mf-left .feature-item .mf-icon{float:left;margin-left:0}
    .feature-item .mf-icon .feather{width:30px;height:30px;line-height:30px;font-size:24px}
}

/* --------------------------
:: 10. Services
-------------------------- */
.home-services{padding: 70px 0;background-image: url(../../images/web/bg-wave-smooth.jpg);background-size: cover;background-position: center}
.home-services-item{padding-left: 35px; margin-bottom: 20px}
.home-services-item p.hs-item-title{font-weight: 800; text-transform: uppercase; color: #666; text-shadow: 1px 2px 0 rgba(255,255,255,1);}
.home-services-item .feather{display: inline-block;font-size: 24px;position: absolute;top: 5px; left: 15px}
.service-detail{text-align: justify}
.service-detail img{width: 100%; margin-bottom: 20px}
.service-detail h3{font-weight: bold; margin-bottom: 15px}
.service-detail h4{font-weight: bold; margin-bottom: 10px}
.service-detail p{margin-bottom: 15px}
.service-detail ol{padding-left: 18px}
img.img-bordered{width: 100%; border: 4px solid #CCC; margin-bottom: 25px}

.service-sidebar{}
.service-sidebar-title{background: #ED2C32; padding: 7px 20px; margin-bottom: 20px}
.service-sidebar-title p{margin: 0; color: #FFF; font-size: 20px; font-weight: bold}
.service-sidebar-title .feather{margin-top: -3px}
.service-sidebar-tags a{display: inline-block; font-size: 13px; line-height: 13px; padding: 5px 10px 3px; background: #007BFF; color: #FFF; text-decoration: none; margin-right: 3px; margin-bottom: 5px}
.service-sidebar-tags a:hover{background: #003478}

.area-kerja-item{margin-bottom: 25px}
.area-kerja-item img{margin-bottom: 15px}
.area-kerja-item h4{font-weight: bold; margin-bottom: 10px}
.area-kerja-item p a{color: #333; display: inline-block; border-radius: 5px; margin-bottom: 5px; text-decoration: underline; margin-right: 5px}
.area-kerja-item p a:hover{color: #007BFF}
@media(max-width:768px){
    .home-services{padding: 30px 0 10px}
    .home-services-item i{font-size: 24px; top: 5px; left: 5px}
    .home-services-item .feather{left: 10px}
    .service-sidebar{margin-top: 35px}
    .service-sidebar-title p{font-size: 16px}
}

/* --------------------------
:: 11. Page Cover
-------------------------- */
.page-cover-pricing{
    background: url(../../images/layanan/why-you-should-have.jpg);
}
.page-cover {text-align: center; margin: 0; padding: 0; overflow: hidden; background-size:cover; background-position:center center; background-attachment:fixed;}
.page-cover-inner{background-color: rgba(0, 0, 0, 0.8); padding: 70px 0;}
.page-cover .block-title h2, .page-cover .block-title p{color: #EEE}
@media(max-width: 768px){    
    .page-cover-inner{padding: 30px 0}
}

/* --------------------------
:: 12. Pricing
-------------------------- */
.page-cover-pricing{}
.pricing-item{background: rgba(255,255,255, 0.9);padding: 40px 0 20px;border-radius: 0px;margin-bottom: 25px}
.pricing-header{border-bottom: 1px solid #CCC;padding-bottom: 20px}
.pricing-header h2{font-weight: 900}
.pricing-body{border-bottom: 1px solid #CCC;padding: 20px 0}
.pricing-body h1{font-weight: 900;color: #F2184F}
.text-dicoret{text-decoration: line-through}
.pricing-footer{padding: 20px 0 0}
.pricing-single{padding-bottom: 20px}
.pricing-single p{color: #FFF}
@media(max-width: 768px){
    .page-cover-pricing .page-cover-inner{padding-bottom: 5px}
    .pricing-item{padding: 30px 0 20px;margin-bottom: 25px}
    .pricing-single{text-align: justify}
}

/* --------------------------
:: 13. Hardware Option
-------------------------- */
.hardware-option{padding: 70px 0; background-image: url(../../images/web/bg-wave-smooth.jpg);background-size: cover;background-position: center}
.ho-item img{margin-bottom: 15px}
.ho-item h4{font-weight: 600; font-size: 20px}
@media(max-width: 768px){    
    .hardware-option{padding: 30px 0 5px}
    .ho-item{margin-bottom: 35px}
    .ho-item h4{font-size: 15px; font-weight: bold; margin-bottom: 5px}
}

/* --------------------------
:: 14. How To Use
-------------------------- */
.ht-use{padding: 70px 0; border-top: 1px solid #EEE; background: #fff;}
.ht-use-list{}
.ht-use-list nav .nav-link{color: #333; background: #EEE; padding: 0; margin-bottom: 10px; border-radius: 0; line-height: 1; display: block}
.ht-use-list nav a span.ht-use-icon{padding-top: 10px; padding-bottom: 10px; text-align: center; display: inline-block; background: #FF4F57; margin-right: 10px; vertical-align: middle!important;border-right: 10px solid #FFF;}
.ht-use-list nav a span.ht-use-icon i{width: 40px; display: block; font-style: normal; font-weight: bold}
.ht-use-dettail .tab-content h4{font-weight: bold; margin-bottom: 5px}
.ht-use-dettail .tab-content p{margin-bottom: 5px}
.ht-use-dettail .tab-content ol, .ht-use-dettail .tab-content ul{padding-left: 18px}
.ht-use-list .nav-pills .nav-link.active, .ht-use-list .nav-pills .show>.nav-link {}
@media (max-width: 992px){
    .ht-use-list nav .nav-link{font-size: 14px}
}
@media (max-width: 768px){
    .ht-use{padding: 30px 0}
    .ht-use-list{margin-bottom: 20px}
    .ht-use-dettail h4{margin-bottom: 10px}
    .ht-use-dettail p{margin-bottom: 10px}
}

/* --------------------------
:: 15. Call To Action
-------------------------- */
.cta{padding: 70px 0; border-top: 1px solid #EEE; background: #FFF}
.cta-box{box-shadow: 0 0 60px -6px rgba(10,10,10,.2); padding: 20px; background: #fff;}
.cta-box h3{font-weight: bold; font-size: 22px; margin-bottom: 15px}
.cta-box p{margin-bottom: 15px}
.cta-btn{margin-bottom: 10px;}
.cta-btn .btn{font-size: 15px; margin-bottom: 5px}
.cta-btn .btn .feather{width: 18px; height: 18px; margin-top: -3px}
@media(max-width: 768px){        
    .cta-box{text-align: center; padding: 20px 10px}
    .cta-box h3{font-size: 18px; margin-bottom: 10px}
    .cta-box p{text-align: justify!important}
    .cta-box .btn-cta-home{margin-top: 30px}
    .cta-btn .btn{padding: 3px 10px!important; font-size: 13px}
    .cta-btn .btn .feather{width: 16px; height: 16px}
}


/* --------------------------
:: 16. Page Title
-------------------------- */
.pageTitle{background-size: cover; background-attachment: fixed!important}
.pageTitleLayer{background: rgba(0,0,0, 0.8); padding: 50px 0}
.pageTitleLayer h1{color: #FFF; font-weight: bold; margin-bottom: 10px; font-size: 30px}
.pageTitleLayer p{color: #FFF; font-size: 18px; font-weight: 100; margin: 0}
.rkBreadcrumb{text-align: right; margin-top: 25px}
.rkBreadcrumb a{color: #FFF;}
.rkBcSeparator .feather{width: 16px; height: 16px; color: #FFF!important}
.pageBody{padding: 70px 0}
@media(max-width: 992px){
    .rkBreadcrumb{display: none}
    .pageTitleLayer h1{font-size: 26px}
    .pageTitleLayer p{color: #FFF; font-size: 14px}
    .pageBody{padding: 30px 0}
}


/* --------------------------
:: 16. Contact
-------------------------- */
.contact{background: #FFF}
.contactLayer{padding: 70px 0}
.contactItem {margin-bottom: 25px;}
.contactItem h4 {font-size: 20px; font-weight: bold;}
.contactSeparator {width: 75px; height: 3px; background: #E54D42; margin: 20px 0;}
.contactItem ul {list-style: none; padding: 0;}
.contactCommon ul li {margin-bottom: 20px; padding-left: 50px; position: relative;}
.contactCommon ul li a {display: block; font-size: 16px; color: #333;line-height: 2;}
.contactCommon ul li a .feather {position: absolute;left: 0;width: 35px;height: 35px;border: 2px solid #003478;padding: 5px;border-radius: 50%;}
.contactMaps iframe {border: 1px solid #CCC;padding: 5px;width: 100%;height: 300px;}
@media(max-width: 768px){
    .contactLayer{padding: 30px 0}
}

/* --------------------------
:: RANDOM
-------------------------- */
.btn-action{border-radius: 20px;border-width: 2px;padding-left: 25px;padding-right: 25px;font-weight: bold}
.btn-action .feather{width: 16px; height: 16px; margin-top: -4px}
.btn-grouping{margin-top: 20px; text-align: left}
.btn-grouping .btn{padding: 2px 10px!important}
.btn-grouping .btn .feather{width: 16px; height: 16px; margin-top: -3px}
/*FAB*/
.fab {position: fixed; bottom: 25px; right: 30px; z-index: 9}
.fab-fab {width: auto; height: 40px; line-height: 40px; border-radius: 10px; background-color: #007BFF; color: #FFF; display: inline-block; vertical-align: middle; text-decoration: none; transition: 0.2s ease-out; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2); cursor: pointer}
.fab-btn-large {width: 50px; height: 50px; line-height: 49px; border-radius: 50%;text-align: center;}
.fab-btn-sm{padding: 0 15px}
.fab-fab:hover{color: #FFF; box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);}
.fab-btn-person{background-color: #F44336; }
.fab-btn-person:hover{background-color: #e57373; }
.fab-btn-tangram{background-color: #4CAF50; }
.fab-btn-tangram:hover{background-color: #81c784; }
.fab-btn-feedback{background-color: #9c27b0; }
.fab-btn-feedback:hover{background-color: #ba68c8; }
.fab-menu {position: absolute; bottom: 0; right: -25px; list-style: none; transform: translateY(-25%); text-align: right}
.fab-menu li {display: inline-block; margin-bottom: 10px}
.fab-btn-sm .feather{width: 20px; height: 20px; margin-top: -4px; margin-left: 10px}
.fab-transition {transition: transform 0.3s cubic-bezier(0.53, 0.01, 0.36, 1.63) !important; }
.fab-transition.fab-scaleout {transform: scale(0); transition: transform 0.2s !important}
.fab-transition.scale-in {transform: scale(1)}
.fab-btn-large:active {transform: translateY(4px);}
.fab-btn-large .feather {-webkit-animation: rotation 2s infinite linear}
@-webkit-keyframes rotation {
    from {-webkit-transform: rotate(0deg)}
    to {-webkit-transform: rotate(359deg)}
}

@media(max-width: 992px){
    .btn-grouping{margin-top: 10px}
    .btn-action{border-radius: 18px;border-width: 2px;padding-left: 15px;padding-right: 15px;font-size: 12px}
    .btn-grouping .pull-left{float: left}
    .btn-grouping .pull-right{float: right}
}


/*TIMELINE*/



/* --------------------------
:: 0X. FOOTER
-------------------------- */
footer{background: #EEEEEE;color: #666;padding-top: 70px; border-top: 1px solid #DDD; width: 100%}
.footer-top{display: block;text-align: center}
.footer-logo{margin: 0;font-weight: bold;text-transform: uppercase}
.footer-logo img{margin-bottom: 25px; width: 230px}
.footer-left, .footer-right{margin-bottom: 30px}
.footer-left{text-align: right}
.footer-left p, .footer-right p{line-height: 1;margin-bottom: 10px}
.footer-bottom{text-align: center;display: block;margin-bottom: 50px}
.footer-bottom ul{padding: 0;margin: 0;text-align: center;margin: 0 auto;display: inline-block}
.footer-bottom ul li{list-style: none;margin: 5px;float: left}
.footer-bottom ul li a{padding-top: 2px;display: inline-block;width: 41px;height: 41px;text-align: center;background: #CCC;font-size: 26px;border-radius: 50%;color: #121212}
.footer-copyright{border-top: 1px solid #CCC;padding: 20px}
.footer-copyright p{margin: 0;padding: 0;text-align: center}
@media (max-width: 767px){
    footer{text-align: center}
    .footer-logo img{margin-bottom: 25px; width: 200px}
    .footer-left{text-align: center}
}
@media (max-width: 575px){
    footer{text-align: center}
    .footer-left{text-align: center}
    .footer-left p, .footer-right p{font-size: 12px}
    .footer-bottom ul li{margin: 2px}
    .footer-bottom ul li a{width: 33px; height: 33px; font-size: 20px}
    .footer-copyright p{font-size: 12px}
}