/* ==========================================================================
   HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 16px;
    line-height: 1.4;
	font-family: 'Open Sans', sans-serif;
	background-color:#343434;
	color:#FFF;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

img {vertical-align: middle; max-width:100%;}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


/* ==========================================================================
   Author's custom styles
   ========================================================================== */
/*
#26BCD7 logo blue
*/

body {background-color:#343434}
.content {background-color:#eee}
	
.wrapper {max-width:1200px; margin:0 auto; width:95%}
.content {float:right; width:900px; color:#333; box-shadow: 0px 0px 10px black; font-size:0.9em}
.content section {}
.section-content {overflow:hidden}
/*.content-wrapper {padding:10px 50px;}*/
.grey-area {background-color:#ACACAC;}
.img-right {float:right; margin:0 0 20px 20px}
.text-center {text-align:center;}

/* Heaer */
#header-top {padding:0; overflow:hidden;}
#header-top nav {float:right; position:relative}
#header-top ul {background-color:#26BCD7; overflow:hidden; margin:0; padding:0 20px 0 0;}
#header-top li {float:left; padding:12px 15px}
#header-top a {color:#FFF; font-size:0.9em; font-weight:bold; text-transform:uppercase; text-decoration:none}
#header-top .gs-title a {color:#0000CC;}
.triangle {display:block; width:40px; height:50px; background:url(../images/triangle.png) top left no-repeat; position:absolute; left:-40px;}
.slicknav_menu {display:none;}
.logo-header {display:none}

/* Search */
.search-function {float:right; margin-right:60px;}
#___gcse_0 .gsc-control-cse {background-color:transparent; padding:5px 0; border:0 none; width:300px}
#___gcse_0 input.gsc-search-button {background-color:#26BCD7; border:0 none;}
#___gcse_0 form.gsc-search-box, #___gcse_0 table.gsc-search-box {margin:0;}
#header-top .gsc-modal-background-image {background-color:#000;}

a {color:#26BCD7;}

h2 {text-transform:uppercase; font-weight:700; text-shadow:1px 1px #FFF; font-size:1.2rem;}
.title-padding {margin:40px 50px 0;}

/* Aside */
aside {float:left; width:260px; padding-top:50px}
#logo h1 {font-size:0.7rem; text-transform:uppercase; letter-spacing:0.3em; font-weight:300}
#main-nav {padding-top:20px; color:#eee;}
#main-nav ul {padding:0;}
#main-nav ul li {font-weight:700; text-transform:uppercase; padding-bottom:20px; text-shadow:1px 1px 2px #000;}
#main-nav ul li span {text-transform:none;}
#main-nav ul li ul {margin:0; padding-top:8px}
#main-nav ul li ul li {font-size:0.9em; padding-bottom:8px}
#main-nav a {color:#eee; text-decoration:none; display:block;}
#main-nav ul li ul li a {background-image:url(../images/menu-list.png); background-position:0 2px; background-repeat:no-repeat; padding-left:20px;}
#main-nav a:hover, #main-nav .selected a {background-position:0 -38px; color:#26BCD7; transition:color 1s ease 0s;}
.nav-hide {display:none;}
.lucky-draw-winner span {display:none}

/* Homepage */
.banner-rotator {overflow:hidden}
.banner-rotator ul li img{min-width:100%;}
.banner-bg {float:left;}
.banner-rotator { position:relative; }
.banner-rotator ul { list-style:none; padding:0; position:relative; margin:0;}
.banner-rotator ul li { display:none; position:absolute; padding:0; margin:0; width:100%; height:350px; text-align:center; background-size:cover; background-position:center center; background-repeat:no-repeat;}
#bannerNav { position:absolute; bottom:20px; text-align:center; left:50px;}
#bannerNav a {height:14px; width:14px; display:inline-block; background-color:#666; border-radius:7px; margin-left:5px}
#bannerNav a:hover {background-color:#999;}
#bannerNav a.active {background-color:#26BCD7; }
#bannerNav span.pause, #bannerNav span.play { display:none; }
.about-okatz {overflow:hidden;}
.about-okatz h2 {margin:50px 0 20px 50px;}
.about-okatz p {margin-left:50px;}
.about-okatz .img-right {margin-bottom:0;}
.products-category li {text-align:center;}
.products-category a {color:#333; text-decoration:none; display:block; padding:20px;	-webkit-transition: background-color 0.5s ease;
     -moz-transition: background-color 0.5s ease;
       -o-transition: background-color 0.5s ease;
      -ms-transition: background-color 0.5s ease;
          transition: background-color 0.5s ease;}
.products-category a:hover {background-color:#ddd;}

/* Products */
.category-title {background:#222 url(../images/title-bg.jpg) top left no-repeat; color:#FFF; /*height:30px;*/ padding:15px 3%; text-transform:uppercase; font-weight:800; font-size:1.3rem; margin:0 0 20px}
.category-title span {text-transform:none}
.section-highlight {background:url(../images/banner-bg.jpg) top center no-repeat; background-size:cover; min-height:320px; overflow:hidden}
.section-highlight .caption {padding:30px 3%}
.section-highlight img {float:right;}
.section-highlight .category-title {color:#26BCD7; /*height:30px;*/ padding:0 0 15px; font-size:1.4rem; background:none transparent; margin:0}
.product-feature {list-style:square; margin:0; padding-left:30px; color:#FFF;}
.product-feature li {margin-bottom:5px;}
.product-listing {padding:0;}
.product-listing ul {overflow:hidden; padding:20px; margin:0}
.product-listing li {list-style:none; text-align:center; width:32.5%; vertical-align:top; display:inline-block; margin-bottom:20px}
.product-listing a {display:block; color:inherit; text-decoration:none; padding:20px 0;	
  -webkit-transition: background-color 0.5s ease;
     -moz-transition: background-color 0.5s ease;
       -o-transition: background-color 0.5s ease;
      -ms-transition: background-color 0.5s ease;
          transition: background-color 0.5s ease;
}
.product-listing a:hover {background-color:#ddd;}
.og-expanded > a, .og-expanded > a:hover {background-color:#CCC; box-shadow:inset 1px 1px 3px rgba(0, 0, 0, 0.2)}
.product-name {text-transform:uppercase; font-weight:bold; text-shadow:1px 1px #FFF; margin:5px 0; padding:0 10px}
.product-subname {font-size:0.8em;}
.product-model {background-color:#26bcd7; display:inline-block; padding:0 10px 2px; color:#FFF; font-size:0.9em; font-weight:bold; box-shadow:inset -2px -2px 0px rgba(255, 255, 255, 0.8);}


/* Network */
.contact {float:left; margin:20px 50px 0; width:30%}
.contact h4 {margin-bottom:5px;}
.contact address {font-style:normal;}
.contact dl {margin:0 0 20px;}
.contact dt {float:left; width:60px;}

/* Dealer */
.form-dealer {width:350px; margin:0 auto; padding-top:100px;}
.form-dealer dt {width:80px; float:left; padding-top:5px}
.form-dealer dd {margin:0 0 15px 90px;}

.input-field {min-width:230px; border:0; background-color:#ccc; box-shadow:1px 1px 3px rgba(0, 0, 0, 0.2) inset; padding:8px}
.btn, a.btn {background-color:#26BCD7; box-shadow:1px 1px 3px rgba(0, 0, 0, 0.3) inset; color:#fff; font-weight:700; border:0 none; padding:8px 20px 5px; font-size:1.1em; text-decoration:none; display:inline-block;}
.btn:hover, a:hover.btn {background-color:#083957;}

/* Feedback  & Form */
.feedback-wrapper {width:300px; margin:0 auto; padding-top:100px;}
.feedback-wrapper a {display:block;}
.feedback_form {display:none; overflow:hidden; font-size:0.9em; padding:0 0 20px 20px;}
.feedback_form dl {float:left; margin-right:40px}
.feedback_form dt {width:80px; float:left; padding-top:5px;}
.feedback_form dt em {display:block; font-size:0.75em;}
.feedback_form dd {margin:0 0 10px 90px; min-height:50px;}
.feedback_form label.error {color:red; font-size:0.8em; display:block}
.feedback-category {margin:0 0 10px; padding:0;}
.feedback-category li {display:inline-block; margin-right:20px;}

/* Symbol */
.bevel-cutting {background-image:url(../images/bevel-cutting.png);}
.bevel-cutting-lr {background-image:url(../images/bevel-cutting-lr.png);}
.bmc-box {background-image:url(../images/bmc-box.png);}
.clutch-equipped {background-image:url(../images/clutch-equipped.png);}
.double-insulation {background-image:url(../images/double-insulation.png);}
.dust-collecting {background-image:url(../images/dust-collecting.png);}
.electric-brake {background-image:url(../images/electric-brake.png);}
.electronic-speed-control {background-image:url(../images/electronic-speed-control.png);}
.firing-stop {background-image:url(../images/firing-stop.png);}
.hook-and-loop {background-image:url(../images/hook-and-loop.png);}
.keyless-chuck {background-image:url(../images/keyless-chuck.png);}
.led-light {background-image:url(../images/led-light.png);}
.mechanical-2-speed {background-image:url(../images/mechanical-2-speed.png);}
.orbital-cutting {background-image:url(../images/orbital-cutting.png);}
.reversing {background-image:url(../images/reversing.png);}
.soft-start {background-image:url(../images/soft-start.png);}
.variable-speed {background-image:url(../images/variable-speed.png);}

/* Winner List */
.winner {position:relative}
.list-winner-photo {overflow:hidden; text-align:center; margin:0 30px; padding:0}
.list-winner-photo li {float:left; list-style:none; display:block; width:33%}
.list-winner-photo li.first-price {float:none; width:auto}
.list-winner-photo img {}
.list-winner-photo .winner-details {color:#662702; width:90%; max-width:300px; min-height:60px; position:relative; top:-30px; margin:0 auto; box-sizing:border-box; padding:5px 20px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffb101+0,fffb22+50,ffb101+100 */
background: #ffb101; /* Old browsers */
background: -moz-linear-gradient(left,  #ffb101 0%, #fffb22 50%, #ffb101 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #ffb101 0%,#fffb22 50%,#ffb101 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #ffb101 0%,#fffb22 50%,#ffb101 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb101', endColorstr='#ffb101',GradientType=1 ); /* IE6-9 */
}
.list-winner-photo .winner-name {font-weight:800;}
.list-winner-photo .winner-dealer {font-size:0.8em}
.prize-container {max-width:250px; width:30%; background-color:#5d5d5d; color:#fff; text-align:center;}
.prize-container header {border-bottom:1px solid #ccc; background-color:#26BCD7; text-align:left; color:#fff71f; padding:10px 20px; font-weight:900; font-size:1.5em; position:relative;}
.prize-container header span {position:absolute; background-color:#5d5d5d; padding:15px; color:#fff; font-size:0.7em; right:0; top:0; bottom:0; font-weight:600}
.prize-container .winner-details {min-height:80px; padding:10px 20px}
.prize-container .winner-dealer {color:#ccc; font-size:0.9em}
.prize-container .winner-name {font-size:1.2em; font-weight:bold}
.prize-container .winner-ic {font-size:0.75em; color:#999}
.prize1 {margin:0 auto 25px; max-width:300px}
.prize2 {position:absolute; bottom:0; left:30px}
.prize3 {position:absolute; bottom:0; right:30px}
.winner-details {background-color:#333;}
.consolation-winner-list {padding:20px 3%}
.consolation-winner-list table {width:100%}
.consolation-winner-list th {font-size:1em; text-align:left; background-color:#26BCD7; color:#fff; padding:10px 5px;}
.consolation-winner-list td {border-bottom:1px solid #ccc; padding:5px}
.consolation-winner-list h4 {margin:5px 0}
.consolation-winner-list h4 i {font-style:normal; font-weight:normal; font-size:0.75em; color:#666}
.winner-consolation {overflow:hidden; background-color:#999; padding:15px 3%}
.winner-consolation h2 {float:left; margin:0; font-weight:900; text-shadow:1px 1px 1px #ccc; padding-right:15px; margin-right:15px; border-right:2px solid #333}
.winner-consolation h4 {float:left; margin:5px 0}

#footer {background-color:#222; font-size:0.7em; color:#999; padding:50px;}


/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (max-width: 1240px) {
	.content {width:75%}
	aside {width:20%}
	.section-highlight img {max-width:60%}
}
@media only screen and (max-width: 1200px) {
	/*.slicknav_menu {right:10px;}
	#main-nav {display:none;}
	.content {position:relative;}
	#header-top {padding:10px 3%;}
	#header-top nav {display:none;}
	#header-top .triangle {display:none;}
	#header-top ul {background-color:transparent; padding:20px}
	#header-top ul a {color:#26BCD7;}
	#___gcse_0 .gsc-control-cse {float:left;}
	.logo-header {float:left; display:block; width:200px}
	img {max-width:100%;}
	.wrapper {width:80%;}
	.content {width:100%;}
	.product-feature {margin:0 2% 40px;}
	.section-highlight .category-title {padding:0; margin:20px 3% 15px;}
	.section-highlight img {max-width:40%;}
	.product-listing li {width:32.5%;}
	aside {display:none;}
	#logo h1 {color:#333}
	.section-highlight {min-height:0; background-color:#262626}
	.bx-wrapper .bx-prev {left:0}
	.bx-wrapper .bx-next {right:0}*/
}

@media only screen and (max-width: 960px) {
	.wrapper {width:100%}
	.search-function {float:left; margin:0 0 0 3%}
	aside {padding:50px 2%; width:25%; box-sizing:border-box}
	#main-nav {font-size:0.9em}
	.img-right {float:none; margin:0}
	.section-highlight img {max-width:50%}
	.about-okatz {padding:30px;}
	.about-okatz h2 {margin:20px 0;}
	.about-okatz p {margin-left:0;}
	.title-padding {margin:30px 30px 0;}
	.prize-container {font-size:0.8em}
}

@media only screen and (min-width: 769px) {
	body {background:#343434 url(../images/bg.jpg) top center no-repeat fixed;}
	.content {background:#FDFDFD url(../images/bg-content.jpg) top left repeat;}
}

@media only screen and (max-width: 768px) {
	#header-top nav, .search-function, aside {display:none;}
	.lucky-draw-winner img {display:none}
	.lucky-draw-winner span {display:block; color:#fff71f}
	.content {width:auto; float:none}
	#header-top {padding:15px 3%}
	.logo-header {float:left; display:block; width:200px}
	.slicknav_menu {display:block;}
	.product-listing li {width:49.5%;}
	.og-expander-inner {padding:50px 3%}
}
@media only screen and (max-width: 480px) {
	.product-listing li {width:100%;}
	.section-highlight img {display:none}
	.list-winner-photo li {float:none; width:auto}
	.prize-container {max-width:none; width:94%; position:static; margin:20px auto}
	.prize-container .winner-details {min-height:0}
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {

}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}