/*
	Theme Name: Storm Default.v3
	Theme URI: http://www.storm.media
	Description: Default scratch theme. Functions are powered by Wordpress. Theme is powered by HTML 5 Blank.
	Version: 3.0 #30072015
	Author: Roy Kuiper
	Author URI: mail@roykuiper.nl
	Tags: Theme, Scratch, PHP, HTML, CSS, JS

	License: Stormm Media
	License URI: http://www.storm.media
*/

/*------------------------------------*\
    FONTS
\*------------------------------------*/

@font-face {
    font-family: 'HelveticaNeueTS';
    src: url('fonts/HelveticaNeueLTStd-Roman.eot'); /* IE9 Compat Modes */
    src: url('fonts/HelveticaNeueLTStd-Roman.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('fonts/HelveticaNeueLTStd-Roman.woff') format('woff2'), /* Super Modern Browsers */
    url('fonts/HelveticaNeueLTStd-Roman.woff') format('woff'), /* Pretty Modern Browsers */
    url('fonts/HelveticaNeueLTStd-Roman.ttf')  format('truetype'), /* Safari, Android, iOS */
    url('fonts/HelveticaNeueLTStd-Roman.svg') format('svg'); /* Legacy iOS */
}

@font-face {
    font-family: 'maven_problack';
    src: url('fonts/mvnpro-black-webfont.woff2') format('woff2'),
    url('fonts/mvnpro-black-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'maven_probold';
    src: url('fonts/mvnpro-bold-webfont.woff2') format('woff2'),
    url('fonts/mvnpro-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'maven_promedium';
    src: url('fonts/mvnpro-medium-webfont.woff2') format('woff2'),
    url('fonts/mvnpro-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'maven_proregular';
    src: url('fonts/mvnpro-regular-webfont.woff2') format('woff2'),
    url('fonts/mvnpro-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/*------------------------------------*\
    MAIN
\*------------------------------------*/

/* global box-sizing */
*,
*:after,
*:before {
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	-webkit-font-smoothing:antialiased;
	font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}
/* html element 62.5% font-size for REM use */
html {
	font-size:62.5%;
}
body {
	font-family: 'maven_proregular', sans-serif;
	font-size:14px;
	color:rgb(52,52,52);
	-webkit-animation-delay: 0.1s;
	-webkit-animation-name: fontfix;
	-webkit-animation-duration: 0.1s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: linear;
}
@-webkit-keyframes fontfix {
	from { opacity: 1; }
	to   { opacity: 1; }
}
/* clear */
.clear:before,
.clear:after {
    content:' ';
    display:table;
}

.clear:after {
    clear:both;
}
.clear {
    *zoom:1;
}
img {
	max-width:100%;
	vertical-align:bottom;
}
a {
	color:#444;
	text-decoration:none;
}
a:hover {
	color:#444;
}
a:focus {
	outline:0;
}
a:hover,
a:active {
	outline:0;
}
input:focus {
	outline:0;
	border:1px solid #04A4CC;
}
p{ line-height:30px; font-size:14px; font-family: 'maven_proregular', sans-serif;}
ul{ line-height: 30px; font-size: 14px; font-family: 'maven_proregular', sans-serif; margin:0; padding:0 0 0 15px; }

ul.basicul{ list-style:none; margin:50px 0 50px 0; padding:0; }

.paddingright{ padding-right:25px; }
.paddingleft{ padding-left:25px; }



/*------------------------------------*\
    STRUCTURE
\*------------------------------------*/

.container{ width:1180px; margin:0 auto; position:relative; }
    .container.hasSidebar{ padding-right:310px; min-height:665px; }

.sidebar{ position:absolute; right:0; top:15px; width:280px; background:rgb(20,52,101); color:#fff; padding:22px 35px; height:650px; }
    .sidebar h2{ margin:0 0 10px; text-transform: uppercase; font-size:16px; }
    .sidebar p{ margin:0; line-height: 24px; }

.inner{ padding:15px; }

.cols{ float:left; position:relative; }
	.col1-1{ width:100%; }
	.col1-2{ width:50%; }
	.col1-3{ width:33%; }
	.col2-3{ width:66%; }
	.col1-4{ width:25%; }
	.col1-5{ width:20%; }
	.col3-4{ width:75%; }

.header{  }
    .header .top{ position:relative; text-align:center; padding-top: 35px; }
        .header .top .navmenu{ width:610px; margin:0 auto; }
            .header .top .navmenu ul{ list-style:none; margin:0; padding:0; }
                .header .top .navmenu ul li{ float:left; }
                    .header .top .navmenu ul li a{ font-weight:700; text-transform: uppercase; padding:20px 15px; display:inline-block; font-size:20px; transition: .2s ease-in-out;}
        				.header .top .navmenu ul li a:hover{ color: #667b98; transition: .2s ease-in-out; }
        .header .top .logo{ position:absolute; left:0; top:-35px; background:#fff; padding: 28px 20px;  z-index:50;  }
        .header .top .cart{ position:absolute; right:0; top:-35px; background:rgb(20,52,101); z-index:50; }
            .header .top .cart i{ font-size:40px; color:#fff; padding:45px 30px 50px; position:relative; transition: .2s ease-in-out; }
            	.header .top .cart i:hover{color: #667b98; transition: .2s ease-in-out;}
                .header .top .cart i .count{ font-family: 'maven_proregular'; position: absolute; top: 25px; left: 45px; background: rgb(155,14,15); padding: 10px; color: #fff; border-radius: 50%; font-size: 16px; width: 35px; height: 35px; font-weight:700; }
    .header .bottom{ position:relative; background:rgb(229,229,229); overflow:hidden; }
        .header .bottom .container{ height:425px; }
        .header .bottom .topfield{ position:absolute; top:0; left:0; width:100%; height: 100%; background:#667b98; }
            .header .bottom .image{ position:absolute; bottom:0; width:290px; }
                .header .bottom .image.one{ right:350px; }
                .header .bottom .image.two{ right:100px; }
            .header .bottom h2{ width: 425px; color: #fff; font-size: 40px; text-transform: uppercase; padding: 80px 0 0 0; }
    .header .bottom.notfront{  }
        .header .bottom.notfront .container{ height:auto; }
        .header .bottom.notfront h2{ padding:35px 0 25px; width:100%; font-size:32px; }

    #responsive-menu{
      display: none;
    }

.h-products{ background:url('img/bg.gif'); background-size:cover; padding:30px 0; }
    .h-products ul{ list-style: none; padding:0; margin: 0 0 60px 0; }
        .h-products ul li{ float:left; width:270px; margin:15px 30px 15px 0; background:#fff; }
                .h-products ul li:nth-child(3n){ margin-right:0; }
                	.h-products ul li .image img{transition: .2s ease-in-out;}
                		.h-products ul li .image img:hover { transform: scale(1.05); transition: .2s ease-in-out; box-shadow: 1px 1px 15px #000 }
            .h-products ul li h3{ text-align:center; margin:10px 0 0px; text-transform: uppercase; }
            .h-products ul li span{ display:block; text-align:center; margin-bottom:10px; font-size:16px; }
.h-products h2 {color: #fff;}

.slider-container img:nth-child(2),
.slider-container img:nth-child(3),
.slider-container img:nth-child(4){display: none;}

.slider-container button.slider-display-left{height: 40px; width: 30px; background-color: #e5e5e5; border:none; position:absolute;top:50%;left:0%;transform:translate(0%,-50%);-ms-transform:translate(-0%,-50%) }
.slider-container button.slider-display-left:hover{background-color: #667b98; transition: .1s ease-in-out; border: none;}
.slider-container button.slider-display-right{height: 40px; width: 30px; background-color: #e5e5e5; border: none;  position:absolute;top:50%;right:0%;transform:translate(0%,-50%);-ms-transform:translate(-0%,-50%) }
.slider-container button.slider-display-right:hover{background-color: #667b98; transition: .1s ease-in-out; border: none;}

.cartlist{ list-style:none; margin:0; padding:0; }
    .cartlist li{ padding:10px; border-bottom:1px solid #d3d3d3;  }
            .cartlist li.header{ background:rgb(102,123,152); color:#fff; border-bottom:none; }
        .cartlist li span{ display:block; float:left; width:150px; text-align:center; }
            .cartlist li span:nth-child(1){ display:block; float:left; width:330px; text-align:left; }
            .cartlist li span:nth-child(7){ display:block; float:left; width:50px; }

.shipping{ background:rgb(229,229,229); padding:100px 0;}
    .shipping h2{ margin:0; width:100%; font-size:40px; text-transform: uppercase; color:rgb(20,52,101); line-height: 60px; margin-bottom:25px; }
    .shipping span{ text-transform: uppercase; color:rgb(20,52,101); display:block; margin-top:25px; font-size:20px; font-weight:700; }

.content{ padding:50px 0; background:rgb(229,229,229); }
    .content .col1-3{  }
        .content .col1-3 img{ width:100%; height:auto; }
    .content .col2-3{ padding:0 50px; }
    .content label{ display:block; font-weight:700; margin:25px 0 10px 0; }
    .content select{ padding:10px; width:225px; }
    .content a{ color:rgb(102,123,152); text-decoration: underline; }

.last{ background:rgb(102,123,152); color:#fff; padding:75px 0; }
    .last h2{ }
    .last p{ color:#fff; }
        .last .cols.col1-2.left{ padding-right:70px; }

.footer{ background:rgb(49,49,49); color:#fff; padding:45px 0; }
    .footer h2{ text-transform: uppercase; margin:0 0 10px; font-size:18px; }
    .footer ul{ margin:0; padding:0; list-style:none; }
    .footer a{ color:#fff; }

.subfooter{ text-align: center; background:rgb(229,229,229); padding:15px 0; color:rgb(165,165,165); }
    .subfooter a{ color:rgb(165,165,165); }

/*------------------------------------*\
	COMON
\*------------------------------------*/

.border{ width:350px; height:4px; }
    .border.blue{ background:rgb(20,52,101); }
    .border.white{ background:#fff; }

.colorpicker{ list-style:none; margin:0; padding:0; }
    .colorpicker li{ float:left; margin-right:25px; text-align:center; }
        .colorpicker li label{ position:relative; width:50px; height:50px; display:block; margin:0; }
            .colorpicker li label:hover i,
            .colorpicker li label.active i{ display:block; cursor:pointer; }
                .colorpicker li label i{ position: absolute; display: none; top: 7px; left: 8px; font-size: 20px; width: 35px; height: 35px; background: rgba(172,211,115,0.6); border-radius: 50%; padding: 8px; color:#fff; }
        .colorpicker li input{ visibility: hidden; }

/*------------------------------------*\
	BUTTON
\*------------------------------------*/

.button{ padding:15px 35px; text-transform:uppercase;  background:rgb(155,14,15); color:#fff !important; font-weight:700; }
    .button.transperant{ opacity:0.6; }

/*------------------------------------*\
    POPUP
\*------------------------------------*/

.white-popup { position: relative; background: #FFF; padding: 20px; width: auto; max-width: 600px; margin: 20px auto; }
    .white-popup h3{ font-size:26px; }
    .white-popup h4{ font-size:18px; }

/*------------------------------------*\
    INPUT
\*------------------------------------*/

input[type="text"],input[type="email"], textarea { padding:10px; width:100%; border:none; margin:0 0 0px 0; text-align:left; background: #fff; color:#444; font-weight:700;  }
input[type="submit"]{ float:left; background:rgb(20,52,101); color:#fff; padding:10px 35px; border:none; }
input[type="submit"]:hover{ opacity:0.5; }

textarea{ height:305px; }



#orderform input[type="submit"]{ display: block; width: 100%; }

.forms{ list-style: none; margin: 25px 0; padding: 0; }
    .forms label{ float:left; text-align:left; font-weight:700;  }
        .wpcf7-form label{ margin: 0;  }

form{ margin-bottom: 20px; }

/*input[type="text"],input[type="email"] { line-height: normal; padding: 10px; background: #f3f3f3; border: 1px solid #d3d3d3; width:90%; }
textarea{ line-height: normal; padding: 10px; background: #f3f3f3; border: 1px solid #d3d3d3; height: 225px; width: 100%; }
input[type="submit"]{ background:rgb(0,110,182); color:#fff; padding:10px 15px; border-radius:5px; border:none; float:right; margin-right:10px; }*/

/*------------------------------------*\
    PLACEHOLDER
\*------------------------------------*/

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: rgb(102,123,152);
}
::-moz-placeholder { /* Firefox 19+ */
    color: rgb(102,123,152);
}
:-ms-input-placeholder { /* IE 10+ */
    color: rgb(102,123,152);
}
:-moz-placeholder { /* Firefox 18- */
    color: rgb(102,123,152);
}

/*------------------------------------*\
    GRID
\*------------------------------------*/

.grid:after {
    content: "";
    display: table;
    clear: both;
}

[class*='col-'] {
    float: left;
}

.col-1-1 {
    width: 100%;
}
.col-1-2 {
    width: 50%;
}
.col-2-3 {
    width: 66.66%;
}
.col-1-3 {
    width: 33.33%;
}
.col-1-4 {
    width: 25%;
}
.col-3-4 {
    width: 75%;
}

[class*='col-'] {
    padding-right: 20px;
}

[class*='col-']:last-of-type {
    padding-right: 0;
}

.grid-pad {
    padding: 20px 0 20px 20px;
}

.grid-pad > [class*='col-']:last-of-type {
    padding-right: 20px;
}

/*------------------------------------*\
    CLEARFIX
\*------------------------------------*/

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

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

/*------------------------------------*\
    RESPONSIVE
\*------------------------------------*/

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


    .container{ width:100%; padding:0 15px; }
    .main form{ width:100%; }



        .header .navmenu{ display: none; }
    .header .top .logo {opacity: 1; transition: all 1s ease-in; z-index: -1; right: 0; }
    .header .top .logo.active{opacity: 0; animation-delay: .2s; transition: all .2s ease-in-out;}
    .header .top .logo-responsive{ position:relative; z-index:-1;  }
    .header .bottom { margin-top: 100px; transition: .2s ease-in-out; }
    .header .bottom.active { margin-top: 20px; transition: .2s ease-in-out; }


    #menu-button{
        display: block;
        width: 50px;
        border-radius: 5px;
        position: relative;
        cursor: pointer;
        transition: all linear .3s;
        padding: 4px;
        z-index: 1;
        position: absolute;
        top: 35px;
        right: 20px;
    }

    #line-1,#line-2,#line-3{
      width: 90%;
      background: #fff;
      height: 8px;
      margin: 4px auto;
      border-radius: 2px;
      transition: all linear .2s;
      background: #667b98;
    }

    #line-1.active{
    -webkit-transform: translate(0px,12px) rotate(45deg);
    transform: translate(0px,12px) rotate(45deg);
    }

    #line-2.active{
    opacity: 0;
    }

    #line-3.active{
    -webkit-transform: translate(0px, -12px) rotate(-45deg);
    transform: translate(0px, -12px) rotate(-45deg);
    }

    #responsive-menu{
    margin-top: 100px;
    width: 100%;
    color: #fff;
    font-family: arial;
    font-size: 1.5rem;
    display: none;
    float:right;
    border-radius: 5px;
    text-align: center;
}

    #responsive-menu ul{
      list-style: none;
      padding: 0;
    }

    #responsive-menu ul li{
        font-weight: bold;
        font-size: 20px;
        margin: 8px 0;
    }

    #responsive-menu ul li a{
        color: #667b98;
        padding: 0;
    }

    #responsive-menu ul li a:hover{
        color: #e1cc01;
    }

    #responsive-menu ul li ul{
        padding: 0;
    }

    #responsive-menu ul li ul li{
        font-weight: bold;
        font-size: 14px;

    }

    #responsive-menu ul li ul li a{
    }

    

    .header .top .navmenu { 
        width: 100%;
     }

     .header .top .cart {
        display: none;
     }





    .header .bottom h2{
        font-size: 30px;
    }



    .container.hasSidebar{
        padding-right: 15px;
    }

    .h-products ul li { width: 30%; }
    .h-products ul li img{ height: auto; }

    .sidebar {
    	display:none;
    }
}

@media only screen and (max-width:768px) {
    .h-products ul li { width: 30%; }
    .h-products ul li img{ height: auto; }

        .header .bottom .image.one,
    .header .bottom .image.two {
        display: none;
    }

}

@media only screen and (max-width:480px) {
    .cols, .main form{ width:100%; }
    .main{ text-align:center; }
    .main h1{ font-size:18px; }
    .main h2{ font-size:18px; }
    .third h2{ font-size:24px; }

    .cartlist li span{ width: 33%; }
    .cartlist .size { display: none; }
    .cartlist .color { display: none; }
    .cartlist li span:nth-child(1){ width: 100%; }
    .cartlist li span:nth-child(7){ width: 100%; }



    .header .bottom .container{ height: 255px; }

    .h-products ul li:nth-child(3n){ margin-right: 2.5%; }
    .h-products ul li { width: 45%; margin: 2.5%; height: 275px; }

    .last .cols.col1-2.left{ padding-right: 0; }

}

/*------------------------------------*\
    MISC
\*------------------------------------*/

::selection {
	background:#04A4CC;
	color:#FFF;
	text-shadow:none;
}
::-webkit-selection {
	background:#04A4CC;
	color:#FFF;
	text-shadow:none;
}
::-moz-selection {
	background:#04A4CC;
	color:#FFF;
	text-shadow:none;
}

/*------------------------------------*\
    WORDPRESS CORE
\*------------------------------------*/

.alignnone {
	margin:5px 20px 20px 0;
}
.aligncenter,
div.aligncenter {
	display:block;
	margin:5px auto 5px auto;
}
.alignright {
	float:right;
	margin:5px 0 20px 20px;
}
.alignleft {
	float:left;
	margin:5px 20px 20px 0;
}
a img.alignright {
	float:right;
	margin:5px 0 20px 20px;
}
a img.alignnone {
	margin:5px 20px 20px 0;
}
a img.alignleft {
	float:left;
	margin:5px 20px 20px 0;
}
a img.aligncenter {
	display:block;
	margin-left:auto;
	margin-right:auto;
}
.wp-caption {
	background:#FFF;
	border:1px solid #F0F0F0;
	max-width:96%;
	padding:5px 3px 10px;
	text-align:center;
}
.wp-caption.alignnone {
	margin:5px 20px 20px 0;
}
.wp-caption.alignleft {
	margin:5px 20px 20px 0;
}
.wp-caption.alignright {
	margin:5px 0 20px 20px;
}
.wp-caption img {
	border:0 none;
	height:auto;
	margin:0;
	max-width:98.5%;
	padding:0;
	width:auto;
}
.wp-caption .wp-caption-text,
.gallery-caption {
	font-size:11px;
	line-height:17px;
	margin:0;
	padding:0 4px 5px;
}
.sticky {

}
.bypostauthor {

}

/*------------------------------------*\
    PRINT
\*------------------------------------*/

@media print {
	* {
		background:transparent !important;
		color:#000 !important;
		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) ")";
	}
	.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;
	}
	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;
	}
}