/*
Theme Name: Samar
Description: A dedicated theme for Samar website.
Author: Owls Department
Version: 1.0
*/


/* GRID SYSTEM */
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
.col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {float: left; padding: 0 10px;}

.row {margin: 0 -10px; zoom: 1;}
.row:before, .row:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.row:after { clear: both; }

.col-1 {width: 8.3333%;}
.col-2 {width: 16.6666%;}
.col-3 {width: 25%;}
.col-4 {width: 33.3333%;}
.col-5 {width: 41.6666%;}
.col-6 {width: 50%;}
.col-7 {width: 58.3333%;}
.col-8 {width: 66.6666%;}
.col-9 {width: 75%;}
.col-10 {width: 83.3333%;}
.col-11 {width: 91.6666%;}
.col-12 {width: 100%;}

.push-col-1 {margin-left: 8.3333%;}


/* Ok, this is where the fun starts.
-------------------------------------------------------------------------------*/

* { margin: 0; }
html { height: 100%; }
body { height: 100%; font-family: 'Open Sans', sans-serif; background: #fff; -webkit-font-smoothing: antialiased; color: #424244; font-size: 14px; line-height: 20px; -webkit-text-size-adjust: 100%}

a {color: #231f20; text-decoration: none; transition: all 250ms ease-in-out;}
a:hover {color: #000;}

::-moz-selection{background: #414042; color: #fff; text-shadow: none;}
::selection {background: #414042; color: #fff; text-shadow: none;}
a:link {-webkit-tap-highlight-color: transparent;}


/* And here begins the WordPress fun.
-------------------------------------------------------------------------------*/

	.wrapper { max-width: 900px; width: 100%; padding: 0 20px; margin: 0px auto;}
	.container { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -60px; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: radial-gradient(ellipse at center,  #fcfcfc 0%,#b0b0b1 100%); }
	.cover {position: fixed; top: 0px; bottom: -100px; left: 0px; right: 0px; background: rgba(255, 255, 255, 0.6);}


	/* HEADER
	-------------------------------------------------------------------------------*/

	header { position: fixed; top: 0px; left: 0px; right: 0px; background: #fff; height: 120px; padding-top: 28px; z-index: 1001;}
	header .wrapper {max-width: 1120px;}
	header h1 a { display: block; width: 240px; height: 63px; background: url(_/img/logo.png) no-repeat center; text-indent: -20000px; }
	header nav { position: relative; }
	header nav div ul {margin-top: 10px;}
	header nav div ul li { float: left; line-height: 40px; margin: 0 25px;}
	header nav div ul li a { display: block; font-size: 15px; color: #414042; text-transform: uppercase; line-height: 40px; font-weight: 600; position: relative; overflow: hidden;}
	header nav div ul li a:before {content: ''; display: block; width: 100%; height: 1px; position: absolute; bottom: 0px; left: -100%; transition: all 250ms ease-in-out; background: #414042;}
	header nav div ul li:hover a:before,
	header nav div ul li.current-menu-item a:before {left: 0px;}
	header nav div ul li:last-child { float: right; margin-right: 0px;}
	header nav ul.lang { position: absolute; top: -10px; right: 10px; }
	header nav ul.lang li { float: left; text-transform: uppercase; font-size: 10px; }
	header nav ul.lang li:not(:first-child):before { content: '/' ;}
	header .burger {display: none; height: 20px; width: 30px; position: absolute; top: 50%; right: 20px; margin-top: -10px;}
	header .burger:before,
	header .burger:after {display: block; content: ''; width: 100%; height: 4px; position: absolute; top: 0px; left: 0px; background: #424244; transition: all 300ms ease-in-out;}
	header .burger span {display: block; width: 100%; height: 4px; background: #424244; position: absolute; top: 8px; transition: all 300ms ease-in-out;}
	header .burger:before {top: 0px;}
	header .burger:after {top: 16px;}
	header .burger.active span {opacity: 0;}
	header .burger.active:after {transform: rotate(-45deg); top: 50%;}
	header .burger.active:before {transform: rotate(45deg); top: 50%;}


	article { padding: 160px 0 40px; position: relative; z-index: 1;}


	/* PAGE : HOME PAGE
	-------------------------------------------------------------------------------*/

	.cycle-slideshow {position: absolute; bottom: 0px; top: 0px; left: 0px; right: 0px; }
	.cycle-slideshow .slide {width: 100%; height: 100%; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover;}
	.cycle-slideshow .slide .content {width: 100%; color: #fff; text-align: center; position: absolute; bottom: 230px; text-align: center; font-size: 20px; line-height: 20px;}
	.cycle-slideshow .slide .content h3 {font-size: 75px; line-height: 80px; font-weight: bold; text-transform: uppercase;}
	.cycle-slideshow .cycle-pager {text-align: center; position: absolute; bottom: 150px; width: 100%; z-index: 1000;}
	.cycle-slideshow .cycle-pager a {display: inline-block; width: 18px; height: 18px; border: 2px solid #fff; border-radius: 9px; background: transparent; margin: 0 8px;}
	.cycle-slideshow .cycle-pager a.cycle-pager-active,
	.no-touch .cycle-slideshow .cycle-pager a:hover {background: #fff;}


	/* PAGE : ABOUT
	-------------------------------------------------------------------------------*/

	.page-about .about-map { width: 320px; height: 294px; background: url(_/img/about-map.png) no-repeat center; float: right; margin-top: 20px;}


	/* PAGE : PRODUCTS
	-------------------------------------------------------------------------------*/

	.page-products .category {border-top: 1px solid #606060; padding: 10px 0;}
	.page-products .category .name {font-weight: 600; font-size: 18px; text-transform: uppercase;}
	.products .item {width: 95px; float: left; margin: 0 10px 10px 0; border: 1px solid #606060; background: #606060; position: relative;}
	.products .item img {width: 100%; display: block; transition: all 250ms ease-in-out;}
	.products .item .name {font-size: 14px; color: #fff; text-align: center; position: absolute; top: 25px; width: 100%; word-wrap: break-word; opacity: 0; transition: all 250ms ease-in-out; }
	.no-touch .products .item:hover img {opacity: 0.4;}
	.no-touch .products .item:hover .name {opacity: 1; top: 35px;}


	/* SINGLE : PRODUCT
	-------------------------------------------------------------------------------*/

	.single-product h2 {border-bottom: 0px; text-transform: none; margin: 0px; padding: 0px; font-weight: 600; line-height: 70px;}
	.single-product .tabs {margin: 30px 0 20px;}
	.single-product .tabs li {float: left; text-transform: uppercase; margin-right: 25px;}
	.single-product .tabs li a {display: block; position: relative; left: 0px; overflow: hidden;}
	.single-product .tabs li a:before {content: ''; display: block; width: 100%; height: 1px; background: #424244; position: absolute; bottom: 0px; left: -100%; transition: all 250ms ease-in-out;}
	.single-product .tabs li.active a:before,
	.no-touch .single-product .tabs li a:hover:before {left: 0px;}
	.single-product .tabs-content {min-height: 332px; border: 1px solid #959595; background: #fff; padding: 20px;}
	.single-product .tabs-content .tab-content {display: none; }
	.single-product .tabs-content .tab-content.active {display: block; }
	.single-product .tabs-content table {width: 100%; }
	.single-product .tabs-content table  td {width: 50%; padding: 0 15px; height: 24px; line-height: 24px; border: 1px solid #d7d8d8; color: #919394; }
	.gallery {border: 1px solid #959595; background: #fff; min-height: 332px; text-align: center;}
	.gallery > div {height: auto !important;}
	.gallery .threesixty {width: 100%;}
	.gallery .threesixty-images {display: none;}
	.gallery + .gallery-default {padding-top: 15px; margin-top: 15px; border-top: 1px solid #606060;}
	.gallery-default h3 {font-size: 18px; text-transform: uppercase; margin: 20px 0 10px;}
	.gallery-default .item {display: block; float: left; width: 154px; height: 100px; border: 1px solid #606060; margin: 0 0 15px 15px;}
	.gallery-default .item:nth-child(3n+1) {margin-left: 0px;}
	.gallery-default .item img {width: 100%;}
	.gallery-popup {display: none; position: fixed; top: 0px; left: 0px; bottom: 0px; right: 0px; background: rgba(0,0,0,0.8); z-index: 10000;}
	.gallery-popup .close {display: block; position: absolute; width: 27px; height: 27px; top: 50%; margin-top: 280px; left: 50%; margin-left: 373px; background: url(_/js/lightbox/img/close.png); opacity: 0.7;}
	.gallery-popup .close:hover {opacity: 1;}
	.gallery-big {border: 1px solid #959595; background: #fff; width: 800px; top: 50%; margin-top: -270px; position: absolute; left: 50%; margin-left: -400px;}
	.gallery-big > div {height: auto !important;}
	.gallery-big .threesixty-big {width: 100%;}
	.gallery-big .threesixty-big-images {display: none;}
	.related .item {display: block; height: 50px; text-align: center; margin-bottom: 10px; position: relative; overflow: hidden;}
	.related .item .name {width: 100%; height: 50px; line-height: 20px; font-size: 12px; padding-top: 15px; position: absolute; top: 0px; left: 0px; opacity: 1; background: #cccccc; transition: all 250ms ease-in-out;}
	.no-touch .related .item:hover .name {background: #eee;}
	.related .item img {display: block; width: 100%; max-width: auto;}


	/* PAGE : NEWS
	-------------------------------------------------------------------------------*/

	.page-news .news {position: relative; z-index: 1; text-align: center;}
	.page-news .news .item {background: #fff; padding: 20px; height: 265px; color: #636363; position: relative; z-index: 10; text-align: left;}
	.page-news .news.owl-carousel .owl-stage {display: inline-block;}
	.page-news .news .item img {display: block;}
	.page-news .news .item .date {font-size: 10px; border-bottom: 1px solid #636363;}
	.page-news .news .item a.button-secondary {position: absolute; bottom: 10px; left: 50%; margin-left: -40px;}
	.owl-controls {position: absolute; top: 130px; left: -40px; right: -40px;}
	.owl-controls:before, .owl-controls:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
	.owl-controls:after { clear: both; }
	.owl-prev {float: left; width: 0; height: 0; border-style: solid; border-width: 9px 16px 9px 0; border-color: transparent #959595 transparent transparent; transition: all 250ms ease-in-out;}
	.owl-next {float: right; width: 0; height: 0; border-style: solid; border-width: 9px 0 9px 16px; border-color: transparent transparent transparent #959595; transition: all 250ms ease-in-out;}
	.no-touch .owl-prev:hover { border-color: transparent #231f20 transparent transparent; }
	.no-touch .owl-next:hover { border-color: transparent transparent transparent #231f20; }


	/* SINGLE : NEWS
	-------------------------------------------------------------------------------*/

	.breadcrumbs {border-bottom: 1px solid #959595; text-transform: uppercase; padding: 5px 0;}
	.single-news h2 {border-bottom: 0px; text-transform: none; margin-bottom: 0px; padding-bottom: 10px; font-weight: 600;}
	.single-news .date {font-size: 15px; font-weight: 600;}
	.single-news .news-content {background: #fff; padding: 20px;}
	.single-news .news-content figure {float: left; margin-right: 20px; margin-bottom: 10px;}
	.single-news .news-content figure img {display: block;}
	.single-news .back {display: block; margin-top: 10px; text-align: right; font-weight: 600;}
	.news-others {border-left: 1px solid #707070; margin-top: 30px; padding-left: 20px;}
	.news-others .item {margin-top: 11px;}
	.news-others .item h5 {font-size: 14px;}
	.news-others .item a.button-secondary {background: #707070; float: right; margin-top: 5px;}
	.no-touch .news-others .item a.button-secondary:hover {background: #231f20;}


	/* PAGE : DEALERS
	-------------------------------------------------------------------------------*/

	.page-dealers { font-size: 14px; line-height: 22px;}
	.page-dealers input {max-width: 300px; width: 100%; margin-bottom: 20px;}



	/* PAGE : CONTACT
	-------------------------------------------------------------------------------*/

	.page-contact {font-size: 16px; line-height: 24px;}
	.ajax-message {display: none; margin-bottom: 10px; }
	form.loading {opacity: .5; cursor: wait;}
	form.loading > * {pointer-events: none;}
	form input {height: 32px; line-height: 28px; border: 2px solid #000000; width: 50%; margin-bottom: 15px; background: transparent; font-size: 16px; padding: 0 10px; outline: none; font-family: 'Open Sans', sans-serif; -webkit-appearance:none; border-radius: 0;}
	form input[type=submit] {float: right; color: #fff; background: #333132; padding: 0 30px; width: auto; transition: all 250ms ease-in-out;}
	form input[type=submit]:hover {background: #000000;}
	form textarea {height: 160px; line-height: 14px; border: 2px solid #000000; width: 100%; background: transparent; font-size: 16px; padding: 10px; resize: none; outline: none; font-family: 'Open Sans', sans-serif; margin-bottom: 15px; -webkit-appearance:none; border-radius: 0;}
	::-webkit-input-placeholder { color: #231f20; }
	:-moz-placeholder { color: #231f20; }
	::-moz-placeholder { color: #231f20; }
	:-ms-input-placeholder { color: #231f20; }
	

	/* FOOTER
	-------------------------------------------------------------------------------*/

	footer { width: 100%; background: #fff; height: 60px; z-index: 1000; position: relative; z-index: 100; line-height: 60px; color: #aaa;}
	footer a {color: #aaa;}
	footer .wrapper {max-width: 1120px;}
	footer .contact-info {text-align: right;}
	.footer-push { height: 60px; }


	h2 {font-size: 40px; line-height: 30px; text-transform: uppercase; padding: 20px 0px; margin-bottom: 20px; border-bottom: 1px solid #231f20; font-weight: bold;}
	h3 {font-size: 20px; line-height: 28px; font-weight: 600;}
	h4 {font-size: 18px; line-height: 26px; font-weight: 600; margin-top: 20px;}
	h5 {font-size: 16px; line-height: 20px; font-weight: 600; margin-top: 10px;}
	p:not(:last-child) {margin-bottom: 20px;}

	.button {display: block; border: 2px solid #fff; height: 42px; line-height: 38px; color: #fff; text-transform: uppercase; width: 140px; margin: 0 auto; font-size: 18px; margin-top: 25px; font-weight: 600;}
	.no-touch .button:hover {background: #fff; color: #231f20;}
	.button-secondary {display: block; width: 80px; height: 25px; line-height: 25px; background: #cccccc; color: #fff; text-align: center; margin: 0 auto;}
	.no-touch .button-secondary:hover {color: #fff; background: #231f20;}


/* Media queries!
-------------------------------------------------------------------------------*/

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

	header {height: 70px; padding-top: 20px;}
	header h1 a { width: 120px; height: 32px; background-size: 120px auto; }
	header nav {position: absolute; top: 70px; left: 0px; right: 0px; width: 100%; display: none; background: #fff;}
	header nav.col-9 {width: 100%; padding: 0px;}
	header nav ul li,
	header nav ul li:last-child {float: none; padding: 0px; margin: 0px; text-align: center;}
	header nav ul li a {border-top: 1px solid #ddd; line-height: 48px; height: 48px;}
	header nav ul li a:before {display: none;}
	header .burger {display: block;}

	article { padding: 90px 0 20px; }

}

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

	.page-about .about-map {background-size: 280px auto;}
	.owl-controls {right: -15px; left: -15px;}
	.owl-next {border-width: 5px 0 5px 8px;}
	.owl-prev {border-width: 5px 8px 5px 0;}
}

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

	.col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
	.col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {float: none; width: 100%;}

	.page-about .about-map {display: none;} 

	.news-others {display: none;}

	.single-news h2 {font-size: 24px; line-height: 30px; padding-top: 10px;}
	.single-news .date {display: block; font-size: 12px;}
	.single-news .news-content figure {margin: 0 0 20px 0;}

	.page-contact p {margin-bottom: 0px;}
	.page-contact form {margin-top: 30px;}
	.page-contact form input:not([type=submit]) {width: 100%;}

	.cycle-slideshow .slide .content {font-size: 16px; line-height: 16px; bottom: 140px;}
	.cycle-slideshow .slide .content h3 { font-size: 32px; line-height: 40px; }
	.cycle-slideshow .cycle-pager {bottom: 80px;}
	.cycle-slideshow .cycle-pager a { width: 10px; height: 10px; border-radius: 5px; margin: 0 5px;}

	.page-products .category .name {margin-bottom: 10px;}
	.gallery {min-height: 0;}

	footer {line-height: 18px; padding: 12px 0; font-size: 11px;}
	footer .contact-info {text-align: left;}

	h2 {font-size: 32px; line-height: 20px;}

}

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

	.cycle-slideshow .slide .content {top: 110px;}
	.cycle-slideshow .cycle-pager {display: none;}

}