/*
Theme Name: Rekamassa
Version: 1.0
Text Domain: rekamassa
*/

/*  Normalize
--------------------------------------------------------------*/
body {margin: 0; -webkit-font-smoothing: auto;}
footer,
header,
main,
menu,
nav,
section,
summary {display: block;}
audio,
canvas,
progress,
video {display: inline-block; vertical-align: baseline;}
audio:not([controls]) {display: none; height: 0;}
[hidden],
template {display: none;}
a {background-color: transparent;text-decoration: none!important;}
a:active,
a:hover {outline: 0;}
dfn {font-style: italic;}
mark {background: #ff0; color: #000;}
small {font-size: 80%;}
sub,
sup {font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}
img {border: 0;}
svg:not(:root) {overflow: hidden;}
figure {margin: 1em 2.5rem;}
hr {box-sizing: content-box; height: 0;}
button {overflow: visible;}
button,
select {text-transform: none;}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {-webkit-appearance: button; cursor: pointer;}
button[disabled],
html input[disabled] {cursor: default;}
button::-moz-focus-inner,
input::-moz-focus-inner {border: 0; padding: 0;}
input {line-height: normal;}
input[type="checkbox"],
input[type="radio"] {box-sizing: border-box; padding: 0;}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {height: auto;}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}
fieldset {border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em;}
legend {border: 0; padding: 0;}
textarea {overflow: auto;}
optgroup {font-weight: bold;}
table {border-collapse: collapse; border-spacing: 0;}
td,
th {padding: 0;}
section{clear: both;}
html{-webkit-tap-highlight-color: transparent;}

/* Elements
--------------------------------------------------------------*/
html{overflow-x:hidden;}
body {background: #fff; color:#888; font-family: 'Roboto', sans-serif; font-size:16px; line-height:24px; overflow-x:hidden;}
h1, 
h2, 
h3, 
h4, 
h5, 
h6 {clear: both; color: #24292e; font-family:'Marcellus', serif; font-weight: 700;}
h1 {font-size: 44px;}
h2 {font-size: 24px; line-height: 1.25;}
h3 {font-size: 18px; line-height: 25px;}
h4 {font-size: 16px; line-height: 20px;}
h5 {font-size: 14px; line-height: 17.5px;}

a{transition:all 0.3s ease;}

.form-control{border:0; border-radius:0; height:auto; padding:10px 20px}

.btn-primary{background:#EAB902; border:0; color:#fff; padding:10px 20px; border-radius:0; text-transform:uppercase}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled).active, 
.btn-primary:not(:disabled):not(.disabled):active, 
.show>.btn-primary.dropdown-toggle{background:#EAB902; color:#fff; outline:0}

/* Header
--------------------------------------------------------------*/
/* Top Bar */
#site-top{background:#EAB900; height: auto; padding:5px 0; width: 100%;}
#site-top h6{font-family:'Roboto', sans-serif; font-size: 16px; font-weight:400; line-height: 24px; margin:0; padding:0;}
#site-top .socialbox {display: flex;height:100%;justify-content:space-between;}
#site-top .socialbox .icon{padding-top:0;}
#site-top .socialbox .icon a{color: #000; font-size:20px;}

/* Main Header */
#header{display:block;height: auto;position: relative;width: 100%;padding:0;z-index:999;}
#header .main-header-row{padding-top:10px; padding-bottom:10px}
#header .icon {height:40px; margin:0 20px 0 20px; padding:10px; position:relative; text-align:center; width:40px}
#header .icon:before{border:1px solid #bbb; content:''; display:block; height:100%; left:0px; position:absolute; top:0; transform: rotate(45deg); width:100%}
#header .icon img{height:20px; width:auto; margin:0 0 10px}
#header .contact-detail{font-size:11px; line-height:18px}
#header .contact-header{align-items:center; display:flex; float:left; padding:10px 0 10px; width:100%}

#header .brand{margin-top: -5px; text-align: center;}
#header .brand img{height:70px; width:auto}

#header .navbar{background:#3A3A3A; margin-bottom:0; padding: 0;transition: all .5s ease;}
#header .navbar .gap{padding:0;}
#header .navbar .nav-link{color:#fff;font-size: 16px;font-weight:500;letter-spacing: normal;text-transform: uppercase;padding:15px 25px; white-space: nowrap;}
#header .navbar .nav-item:hover > a,
#header .navbar .nav-item > a:focus,
#header .navbar .nav-item > a:active,
#header .navbar .nav-item > a.active{background:#EAB900; outline:0}

#header .navbar .dropdown{cursor: pointer;}
#header .navbar .dropdown-toggle::after{display: none;}
#header .navbar .dropdown-item:hover {background-color:#EAB900;}
#header .navbar .dropdown-menu{background-color:#EAB900; border:0; margin:0; padding:10px; top:100%; border-radius:0}
#header .navbar .dropdown:hover>.dropdown-menu {display: block;min-width:180px;}
#header .navbar .dropdown-item {color:#fff; font-weight:400; line-height: 20px; padding: 5px 10px; text-transform:capitalize; border-radius:3px}
#header .navbar .dropdown-item:focus,
#header .navbar .dropdown-item:active,
#header .navbar .dropdown-item:hover{background:#F7C50D}

#header .navbar .search-area{background-color: #EAB900;list-style: none;margin: 0;list-style: none; padding: 0; position:relative; width:100%}
#header .navbar .search-area .searchBtn {border: none;width: 100%;background: #EAB900; color: #000; margin:0;outline: none; padding:19px 15px;}
#header .navbar .search-area .searchBtn .fa-search{display:block}
#header .navbar .search-area .searchBtn .fa-times{display:none}
#header .navbar .search-area .searchBtn.active .fa-search{display:none}
#header .navbar .search-area .searchBtn.active .fa-times{display:block}
#header .navbar .search-area .searchBar {background:#3A3A3A; display:none; margin:0; padding:20px; position:absolute; top:100%; right:0; width:300px;}
#header .navbar .search-area .searchBar input[type="search"]{border:0; padding:8px 30px 8px 10px; width:100%}
#header .navbar .search-area .searchBar input[type="search"]:focus{outline:0; box-shadow:none}
#header .navbar .search-area .searchBar button{background:transparent; border:0; position:absolute; top: 25px; right: 25px;}
#header .navbar .search-area .searchBar button:focus{outline:0}

#header .navbar .mobile-search-area{background:#EAB902; margin: 0; padding: 0; width:50%;}
#header .navbar .mobile-search-area .mobile-searchBtn {border: none; width: 100%; background:transparent; color: #aaa; font-size:24px; margin:0;outline: none; padding:30px 16px 29px;}
#header .navbar .mobile-search-area .mobile-searchBtn .fa-search{display:block}
#header .navbar .mobile-search-area .mobile-searchBtn .fa-times{display:none}
#header .navbar .mobile-search-area .mobile-searchBtn.active .fa-search{display:none}
#header .navbar .mobile-search-area .mobile-searchBtn.active .fa-times{display:block}
#header .navbar .mobile-search-area .mobile-searchBar {background:#3A3A3A; display:none; margin:0; padding:20px; position:absolute; top:100%; right:-45px; width:260px;}
#header .navbar .mobile-search-area .mobile-searchBar input[type="search"]{border:0; padding:8px 30px 8px 10px; width:100%}
#header .navbar .mobile-search-area .mobile-searchBar input[type="search"]:focus{outline:0; box-shadow:none}
#header .navbar .mobile-search-area .mobile-searchBar button{background:transparent; border:0; position:absolute; top: 25px; right: 25px;}
#header .navbar .mobile-search-area .mobile-searchBar button:focus{outline:0}

.sticky {position: fixed;top: 0;width: 100%;left: 0;right: 0;padding: 0 20px!important ;background:rgba(55, 43, 43, 0.9);}

/* Alignments
--------------------------------------------------------------*/
.alignleft {display: inline; float: left; margin-right: 1.5em;}
.alignright {display: inline; float: right; margin-left: 1.5em;}
.aligncenter {clear: both; display: block; margin-left: auto; margin-right: auto;}

a img.alignright {float: right; margin: 0.313rem 0 1.25rem 1.25rem;}
a img.alignnone {margin: 0.313rem 1.25rem 1.25rem 0;}
a img.alignleft {float: left; margin: 0.313rem 1.25rem 1.25rem 0;}
a img.aligncenter {display: block; margin-left: auto; margin-right: auto;}

.wp-caption.alignnone {margin: 0.313rem 1.25rem 1.25rem 0;}
.wp-caption.alignleft {margin: 0.313rem 1.25rem 1.25rem 0;}
.wp-caption.alignright {margin: 0.313rem 0 1.25rem 1.25rem;}

/* Clearings
--------------------------------------------------------------*/
.clear:before,
.clear:after,
.section:before,
.section:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {content: ""; display: table; table-layout: fixed;}

.clear:after,
.section:after,
.site-header:after,
.site-content:after,
.site-footer:after {clear: both;}

/* Content
--------------------------------------------------------------*/
.section{padding:40px 0}

/* Page */
#page-title{padding:10px 0;}
#page-title .breadcrumb{background:transparent; font-size:12px; margin: 0 0 10px; padding:0}
#page-title .breadcrumb a{color:#EAB900}
#page-title .breadcrumb-item+.breadcrumb-item::before{content:'\f0da'; font-family:'Font Awesome 5 Free'; font-weight:900}
#page-title h1{font-size:30px; text-transform:uppercase}

/* Home */
#home-slider{width: 100%; margin-top:-25px; padding: 0;overflow: hidden;position: relative;}
#home-slider img{width: 100%;}
#home-slider .home-slide .text {bottom: 0!important;position:absolute;text-align: left;background-color: rgba(55, 43, 43, 0.6);left: 0;width: 100%;max-width: 100%;margin: 0; padding:30px 0;}
#home-slider .home-slide .text h5{color:#EAB900;font-size: 30px; padding:0; margin:0 0 10px;}
#home-slider .home-slide .text p{color: #fff; font-size: 16px; font-weight: 400; margin:0; padding: 0;text-align: left;}
#home-slider .home-slide .text a{background:#EAB900; color:#fff; float:right; font-family:'Marcellus', serif; font-size: 16px; font-weight:700; border: none; padding:10px 20px; border-radius:0}
#home-slider .home-slide .caption {position: relative;width: 100%;clear: both;}
#home-slider .arrow-prev,
#home-slider .arrow-next{background:rgba(153, 153, 153, 0.6); font-size:20px;color: #fff; padding:20px 15px; text-transform:uppercase; transition: all 0.5s ease;}
#home-slider .arrow-prev:hover,
#home-slider .arrow-next:hover{cursor:pointer; color:#EAB902}
#home-slider .arrow-prev{position: absolute;top: 45%; left:-14px; transform: rotate(90deg);}
#home-slider .arrow-next{position: absolute;top: 45%; right:-14px; transform: rotate(90deg);}

#home-services{padding:30px 0 60px;}
#home-services .section-title{color:#333; font-size:30px; margin:0 0 20px; padding:0; position:relative; text-align:center; text-transform:uppercase}
#home-services .section-title span{color:#EAB900}
#home-services .section-title::after{background:#EAB900; bottom:0; content:''; display:block; height:8px; margin:10px auto 0; max-width:100%; width:400px;}
#home-services .service {color:#888; transition: all 0.5s ease;}
#home-services .service img{float:left; height:auto; margin:0 0 10px; transition: all 0.5s ease; width:100%}
#home-services .service h3{color:#888; text-align:center}
#home-services .service:hover{color:#111}
#home-services .service:hover img{opacity:0.6}
#home-services .service:hover h3{color:#000}

/* About Us */
#corporate-overview{padding:0}
#corporate-overview img{margin:0 0 30px; width:100%}
#corporate-overview h3{color:#333; font-size:22px; margin:0 0 20px; text-transform:uppercase;}

#vision-mission{padding:20px 0 40px}
#vision-mission img{margin:0 0 30px; width:100%}
#vision-mission h3{color:#333; font-size:22px; margin:0 0 20px; text-transform:uppercase;}

#production-activity{padding:0 0 40px}
#production-activity .grid-item {padding:4px; width:275px}
#production-activity .grid-item--width2 {padding:5px; width: 400px; }
#production-activity .grid-item img{width:100%}

#production-facility{padding:0 0 40px}
#production-facility .facility{float:left; margin:0 0 30px; position:relative; width:100%}
#production-facility .facility img{display:inherit; height:auto; margin:0 auto 10px; max-height:160px; max-width:100%}
#production-facility .facility h3{font-size:16px; text-align:center;}
#production-facility .facility .specification{background:#fff; border:2px solid #EAB902; display:none; height:auto; font-size:13px; padding:15px; position:absolute; left:60%; top:40px; width:220px; z-index:999}
#production-facility .col-lg-6 .facility .specification{left:30%} 
#production-facility .facility .specification strong{color:#111; float: left;  margin: 0 0 10px; width: 100%;}
#production-facility .facility .specification:before{content:''; display:block; width: 0; height: 0;  border-top: 10px solid transparent; border-bottom: 10px solid transparent;  border-right:10px solid #EAB902; position:absolute; top:20px; left:-10px;}
#production-facility .facility:hover .specification{display:block}

/* Products */
#products{padding:0 0 40px}
#products .product{float:left; margin:0 0 20px; width:100%}
#products .product img{float:left; height:auto; margin:0 0 10px; width:100%}
#products .product h3{text-align:center}

#product-detail{padding:0 0 40px}
#product-detail .product{margin:0 0 20px; text-align:center}
#product-detail .product a{color:#888;}
#product-detail .product img{height:auto; margin:0 0 5px; width:100%}

/* Services */
#page-services {padding:0 0 40px}
#page-services img{float:left; margin:0 0 30px; width:100%}
#page-services .service{margin:0 0 30px}
#page-services .service h3{font-size:22px; margin:0 0 20px; text-transform:uppercase}

/* Projects Gallery */
#projects-gallery {padding:0 0 60px}
#projects-gallery .container-fluid .col-lg-3{padding:0}
#projects-gallery .section-title{color:#333; font-size:30px; margin:0 0 20px; padding:0; position:relative; text-align:center; text-transform:uppercase}
#projects-gallery .section-title span{color:#EAB900}
#projects-gallery .section-title::after{background:#EAB900; bottom:0; content:''; display:block; height:8px; margin:10px auto 0; max-width:100%; width:400px;}
#projects-gallery .filter-projects{margin:0 0 30px; text-align:center;}
#projects-gallery .filter-projects button{background:transparent; border:0; font-size:18px; font-family:'Marcellus', serif; margin:0 15px; padding:0; text-transform:uppercase}
#projects-gallery .filter-projects button:focus{outline:0}
#projects-gallery .grid-item { width: 25%; }
#projects-gallery .project{height:300px; overflow:hidden}
#projects-gallery .project .item-info{position: relative;top: 0; left: 0; z-index: 10; width: 100%; height: 100%; background: rgba(16, 16, 16, 0.7) none repeat scroll 0 0; transform: translateY(-100%); -webkit-transform: translateY(-100%); opacity: 0; transition: .3s; -webkit-transition: .3s;}
#projects-gallery .project:hover .item-info{opacity: 1; transform: translateY(0);-webkit-transform: translateY(0);}
#projects-gallery .project .item-info .info-inner{position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); z-index: 11; width: 80%; text-align: center;}
#projects-gallery .project .item-info .info-inner .handle a{background:#EAB902;border: medium none; border-radius: 50%; color: #fff; display: inline-block; font-size: 15px; height: 36px; margin:0 6px 10px; line-height: 36px; vertical-align: middle; width: 36px; transition: .3s; -webkit-transition: .3s;}
#projects-gallery .project .item-info .info-inner .title{color:#fff}

#project-gallery{padding:0}
#project-gallery .slick-slide{position:relative}
#project-gallery .slick-slide > div > div{position:relative}
#project-gallery .slick-slide > div > div:before{background:rgba(0,0,0,0.6); content:''; display:block; height:100%; left:0; top:0; position:absolute; width:100%}
#project-gallery .slick-slide.slick-current > div > div:before{display:none}
#project-gallery .slick-slide img{height:auto; width:100%}

#project-detail{padding:40px 0 40px}
#project-detail strong{color:#111; font-weight:500}

#related-projects {background:#D2D2D2;}
#related-projects h2{font-size:22px; margin:0 0 30px; text-align:center; text-transform:uppercase}
#related-projects .project{background:#fff; float:left; margin:0 0 20px; width:100%}
#related-projects .project .thumbnail{float:left; height:250px; margin:0 0 15px; overflow:hidden; width:100%}
#related-projects .project .thumbnail img{height:auto; max-height:100%; min-width:100%; width:auto}
#related-projects .project h4{margin:0 0 15px; text-align:center}

/* Blog */
#blog{padding:40px 0 40px}
#blog .detail-blog img{margin:0 0 15px; width: 100%;}
#blog .detail-blog .blog-content h6 {font-size:18px}
#blog .detail-blog .blog-content h6 a{color:#666}
#blog .detail-blog .blog-content p{padding: 0;text-align: left;font-size: 13px;line-height: 20px;margin: 15px 0 0;}
#blog .detail-blog .blog-content a.link{color: #EAB900!important;font-size: 12px;font-weight: bolder;}
#blog .detail-blog .blog-box{background: #f5f5f5;position: relative;padding: 15px; margin:0 0 30px;}
#blog .detail-blog .blog-box .date-box {right: auto;left: -25px;float: left;background-color: #EAB900;text-align: center;color: #372b2b;padding: 0 12px 5px;position: absolute;left: -20px;top: -10px;}
#blog .detail-blog .blog-box .date-box .day{color: #000;font-size: 25px;font-family:  'Montserrat', serif;font-weight: 700;}

.wp-pagenavi {margin:20px 0 20px; text-align:center}
.wp-pagenavi a, 
.wp-pagenavi span{color:#666; margin:0 5px!important; padding:5px 10px!important}
.wp-pagenavi span.current{background:#EAB902; border:1px solid #EAB902!important; color:#fff; font-weight:400!important}

/* Contact Us */
#contact-office{padding:40px 0 20px}
#contact-office h3{font-size:22px; text-transform:uppercase}
#contact-office iframe{height:200px; width:100%}

#contact-form{background:#D2D2D2; padding:60px 0}
#contact-form h2{font-size:22px; margin:0 0 30px; text-align:center; text-transform:uppercase}
#contact-form .wpcf7-form-control-wrap{float:left; margin:0 0 20px; width:100%}
#contact-form .wpcf7 form .wpcf7-response-output{background:#EAB902; color:#fff; margin:30px 0 0; padding:10px 20px; text-align:center;}

/* Search Results */
#search-results{padding:0 0 40px;}
#search-results .search{border-bottom:1px solid #888; float:left; margin:0 0 15px; padding:0 0 5px; width:100%}
#search-results .search h3{font-size:20px; margin:0 0 10px}
#search-results .search a{color:#EAB900}

/* Footer
--------------------------------------------------------------*/
#footer .footer-top{background:#3A3A3A; color:#fff; padding:60px 0 20px; width: 100%;}
#footer .footer-top h3{border-bottom:6px solid #F0AB00; color:#fff; font-size:26px; line-height:34px; margin:0 0 20px; padding:0 0 15px; text-align:center; text-transform:uppercase}
#footer .footer-top h5{color:#fff; text-transform:uppercase;}

#footer .footer-top .footer-contact {padding:0 20px}
#footer .footer-top .footer-contact .contact{float:left; list-style:none; margin:0 30px 10px; padding:0; width:100%}
#footer .footer-top .footer-contact .contact li {float:left; margin:0 0 10px; width:100%; }
#footer .footer-top .footer-contact .contact li i{margin:0 10px 0 0}
#footer .footer-top .footer-contact .social{float:left; list-style:none; margin:0 0 30px; padding:0; text-align:center; width:100%}
#footer .footer-top .footer-contact .social li{display:inline-block; margin:0 5px;}
#footer .footer-top .footer-contact .social a{color:#fff; font-size:28px;}

#footer .footer-top .links{margin:0 0 30px; padding:0 20px}
#footer .footer-top .links ul{list-style:none; margin:0 0 20px; padding:0}
#footer .footer-top .links a{color:#fff}
#footer .footer-top .links a:hover{color:#888}

#footer .footer-top .newsletter{padding:0 20px}
#footer .footer-top .newsletter .form-control{margin:0 0 10px}
#footer .footer-top .newsletter .btn{background:#888888; border:0; color:#111; float:left; padding:10px; text-align:center; width:100%; border-radius:0}

#footer .copyright{background:#fff; font-size:13px; padding:10px 0;}
#footer .copyright p{color: #444;margin: 0;}
#footer .copyright a{color: #444;}

/* Responsive
--------------------------------------------------------------*/
@media (max-width:1199.98px){
    #header .navbar a{font-size:12px}
}
@media (max-width:991px){
    .sticky{border: none;position:fixed;background:transparent; right: 10px; padding:0!important}
    #site-top h6{text-align:center;padding-bottom: 0;}
    #site-top .socialbox {justify-content: center; padding:0;}
    #site-top .socialbox .icon a{padding:0 10px}
    #header .container{position:relative}    
    #header .brand{float:left; margin: 0 auto; text-align:center; width:100%}
    #header .brand img{height:40px}
    #header .container-navbar{padding-left:0; padding-right:0; max-width:100%}
    #header .navbar{background: transparent; margin:0; position:relative; right:0; top:0; width:100%}
    #header .navbar .navbar-nav{background:#3A3A3A; margin-top: 83px;}
    #header .navbar a {text-align: center;}
    #header .navbar li{text-align: center;}
    #header .navbar-toggler{background:#4B4040; border: none; border-radius:0; color:#fff; font-size:24px;outline: none; padding:23px 15px 24px; width:50%}
    #header .navbar .mobile-search-area .mobile-searchBtn{color:#4B4040;}
    #header .navbar .mobile-search-area .mobile-searchBar{right:0; width:100%}
    #home-slider{margin-top:0}
    #home-slider .home-slide .text{display:none}
    #home-slider .home-slide .text h5{margin:0;padding: 0;font-size: 15px;}
    #home-slider .home-slide .text p {padding:0;margin: 0;line-height: 21px;font-size: 10px;text-align: center;}
    #home-slider .home-slide .text button {margin: 0;padding: 2px;font-size: 9px;letter-spacing: normal;}
    #home-slider .home-slide .text {padding: 5px;text-align: center;}
    #home-slider .arrow-prev, 
    #home-slider .arrow-next{padding:10px 15px}
    #home-slider .arrow-prev{left:-18px; top:34%}
    #home-slider .arrow-next{right:-18px; top:34%}
    #home-slider .inner_carousel{margin:0 auto}
    #vision-mission .order-1{order:2}
    #vision-mission .order-2{order:1}
    #projects-gallery .grid-item { width: 50%; }
    #projects-gallery .project{height:300px}
}
@media (max-width:767px){
    #header .main-header-row{align-items: center;}
    #header .navbar-toggler{font-size:22px; padding:15px 15px 15px;}
    #header .navbar .navbar-nav{margin-top:0;}
    #header .navbar .mobile-search-area .mobile-searchBtn{padding:19px 16px 20px;}
    #production-activity .grid-item {width:100%}
    #projects-gallery .grid-item { width:50%; }
    #projects-gallery .project{height:240px}
}
@media (max-width: 575.98px) {
    #projects-gallery .project{height:150px}
    #projects-gallery .grid-item { width: 50%; }
}