/* 
Theme Name: Imkerei Suter
Version: 
Description: RHO
Author: ROMAN HOSPENTHAL aka RHO
Author URI: http://www.rhodesign.ch/
*/


/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}input,select{vertical-align:middle;}a img{border:0;}:focus{outline:0;}a:hover,a:active{ outline: none; }

/* Opera Fix */
body:before {content:"";height:100%;float:left;width:0;margin-top:-32767px;}

/* Clearfixes */
.clearfix:before, .clearfix:after { content: ""; display: table; }.clearfix:after { clear: both;}.clearfix { zoom: 1; }.clear {clear: both;}




img.attachment-produktgross {margin-bottom: 20px;}


/* **************************************************
			      		Global styles
************************************************** */
html, body {width:100%; -webkit-text-size-adjust: 100% !important;/*-webkit-hyphens: auto;-moz-hyphens: auto;-ms-hyphens: auto;hyphens: auto;*/}
body {font-family: 'Gotham SSm A', 'Gotham SSm B', Arial; font-weight: 400; font-style: normal; font-size: 16px; line-height: 22px;color: #000;font-weight: normal;text-align:center;background: #FFF;}


/* Images & Links */
a {text-decoration:none;}
a:hover {color: #000;text-decoration:none;}
a img {border: none;outline: none;}

::selection {background: #F1E9D7; /* Safari */}
::-moz-selection {background: #F1E9D7; /* Firefox */}



.book {font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 400; font-style: normal;}
.bold{ font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 700; font-style: normal;}




/* **************************************************
			    		Main containers
************************************************** */

#wrap { width: 100%; text-align: left; position:relative; z-index:0; }
#main { overflow: auto; padding-bottom:25px; margin: 175px 0 0 0; width:100%; padding: 0px;  }

.full { width: 100%;}
.inner { max-width: 1340px;}

 


#top, #bottom, #left, #right {background: #b99137; z-index: 99999 !important;}
#left, #right {position: fixed;top: 0; bottom: 0;width: 20px;}
#left { left: 0; }
#right { right: 0; }
#top, #bottom {position: fixed;left: 0; right: 0;height: 20px;}
#top { top: 0; }
#bottom { bottom: 0; }



.margincenter {margin: 0 auto !important;}
.marginleft {margin-left: 40px !important;}
.marginright {margin-right: 40px;}
.marginbottom {margin-bottom: 40px;}
.margintop30 {margin-top: 30px !important;}


/* 
.span1 { width: 5.555530303030303%; } 
.span2 { width: 14.141439393939395%; } 
.span3 { width: 22.727272727272727%; }
.span4 { width: 31.31310606060606%; } 
.span5 { width: 39.899015151515155%; } 
.span6 { width: 48.484848484848486%; }
.span7 { width: 57.07068181818181%; } 
.span8 { width: 65.65659090909091%; } 
.span9 { width: 74.24242424242424%; } 
.span10 { width: 82.82825757575758%; } 
.span11 { width: 91.41416666666666%; } 
.span12{width: 100%; margin-right: 0;} 
*/

.span1 { width: 5.22388%; } /* 70 */
.span2 { width: 13.43283%; } /* 180 */
.span3 { width: 21.64179%; } /* 290 */
.span4 { width: 29.85074%; } /* 400 */
.span5 { width: 38.0597%; } /* 510 */
.span6 { width: 46.26865%; } /* 620 */
.span7 { width: 54.47761%; } /* 730 */
.span8 { width: 62.68656%; } /* 840 */
.span9 { width: 70.89552%; } /* 950 */
.span10 { width: 79.10447%; } /* 1060 */
.span11 { width: 87.31343%; } /* 1170 */
.span12{width: 100%; margin-right: 0;} 

.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 {position:relative; margin-right:40px;  float:left;}
.last{ margin-right:0 !important; clear:right !important; }
.spalte {margin-bottom: 25px;}

.left {float: left;}
.right {float: right;}

img {width: 100%; height: auto;}
img.attachment-produktgross {margin-bottom: 20px;}


/* **************************************************
			    		HEADER
************************************************** */
#header {height: 85px;	margin: 0 auto; position: fixed; background: #FFF; display: block; top: 20px; left: 0; z-index: 88888 !important; overflow: hidden}
#head {position: relative; }
#logo {width:190px;height:68px;position: absolute;top: 0px;right: 0px;padding: 0 20px 20px 20px;background:#B99137; z-index: 99999;}
#logo a img{display: block;}



/* **************************************************
			    		MENU
************************************************** */

#hauptnavigation {position: absolute; left: 0; top: 40px;}
#hauptnavigation li {float: left; margin-right: 30px;}

#hauptnavigation li a{font-family: 'Gotham SSm A', 'Gotham SSm B', Arial; font-weight: 700; font-style: normal; color: #B99137; text-decoration: none; font-size: 20px; line-height: 24px;}
#hauptnavigation li a:hover{ color: #000;}
#hauptnavigation li.current_page_item a{color: #000;}
.single-produkte #hauptnavigation li.menu-item-77 a{color: #000;}





/* http://www.callmenick.com/tutorials/simple-responsive-navigation-menu */
#nav-trigger {	display: none; text-align: left; width: 50px; z-index: 99999; padding: 15px 20px; }

#nav-trigger span { width:50px; height: 16px; padding: 15px 20px; cursor: pointer; background: url(images/hamburger.png) no-repeat center; background-size: 25px 16px; text-indent: -200%; white-space: nowrap; overflow: hidden; display: block; text-align: left; z-index: 99999}
#nav-trigger span:hover {}
#nav-trigger span:after {}
#nav-trigger span.open {background: url(images/close.png) no-repeat center; background-size: 18px 18px;}
#nav-trigger span.open:after {}

nav#nav-mobile {position: fixed; display: none; top: 70px; z-index: 55555; width: 100%; }
/*  nav#nav-mobile {position: relative; display: none; top:80px; overflow: hidden;  }*/
nav#nav-mobile ul {display: none; list-style-type: none; position: relative; left: 0; right: 10%; margin-left: auto; margin-right: auto; text-align: left;padding-bottom: 30px; margin-bottom: 0; background: #FFF; }

nav#nav-mobile li {display: block;margin: 0; background: #FFF; }
nav#nav-mobile li:last-child {border-bottom: none; }

nav#nav-mobile a {display: block; font-family: 'Gotham SSm A', 'Gotham SSm B', Arial; font-weight: 700; font-style: normal; color: #B99137; font-size: 20px; line-height: 34px; text-decoration: none;}
nav#nav-mobile a:hover {color: #000; }
 	






/* **************************************************
			    		CONTENT
************************************************** */
#content { margin: 0;padding: 0 0 45px 0; overflow: hidden; position: relative;}	
#content p{margin: 0px;padding: 0px 0px 25px 0px;}

#content h2 {font-family: 'Gotham SSm A', 'Gotham SSm B', Arial; font-weight: 700; font-style: normal; font-size: 16px; line-height: 22px; text-transform: uppercase; color: #B99137; margin: 25px 0;}
#content h3 {font-family: 'Gotham SSm A', 'Gotham SSm B', Arial; font-weight: 700; font-style: normal; font-size: 16px; line-height: 22px; text-transform: uppercase; color: #B99137; margin: 0 0 25px 0;}
#content h4 {font-family: 'Gotham SSm A', 'Gotham SSm B'  Arial; font-weight: 400; font-style: normal; font-size: 14px; line-height: 20px; text-transform: uppercase; color: #B99137; margin: 0 0 20px 0;}
#content h5 {font-family: 'Gotham SSm A', 'Gotham SSm B', Arial; font-weight: 700; font-style: normal; font-size: 16px; line-height: 22px; text-transform: uppercase; color: #B99137; margin: 25px 0 25px 0;}

h2.produkttitel {margin: 0 0 25px 0 !important;}

strong {font-family: 'Gotham SSm A', 'Gotham SSm B', Arial; font-weight: 700; font-style: normal;}
small {
	font-size: 14px;line-height: 20px;
}

.inhalt ul, .inhalt ol {margin: 0 0 25px 0;}

.inhalt ul li {overflow: visible;padding-left: 10px;position: relative;}
.inhalt ul li:before {content: "-";left: 0;position: absolute;}

.inhalt a {color: #B99137;}
.inhalt a:hover {color: #000; text-decoration: none;}


.sidebar {}
.sidebar h3 {font-family: 'Gotham SSm A', 'Gotham SSm B', Arial; font-weight: 700; font-style: normal; font.size: 16px; line-height: 22px; text-transform: uppercase; color: #B99137; margin: 0 0 25px 0;}
.sidebar a {color: #B99137;  }
.sidebar a:hover {color: #000; }

.single-produkte .sidebar a {font-family: 'Gotham SSm A', 'Gotham SSm B', Arial; font-weight: 400; font-style: normal; text-transform: uppercase; font-size: 14px; line-height: 17px; color: #FFF; background: #B99137; padding: 5px 10px; text-decoration: none;  }
.single-produkte .sidebar a:hover {background: #ae8323; }



.single-produkte #main { overflow: auto; padding-bottom:25px; margin: 135px 0 0 0; width:100%; padding: 0px;  }
a.button, .news a{font-family: 'Gotham SSm A', 'Gotham SSm B', Arial; font-weight: 400; font-style: normal; text-transform: uppercase; font-size: 14px; line-height: 14px !important; color: #FFF; background: #B99137; padding: 6px 12px !important; text-decoration: none;  }
a.button:hover, .news a:hover {background: #ae8323; }
.single-produkte .morecontent .titel{ font-size: 16px !important; line-height: 20px;}

a.buttonzurueck{font-family: 'Gotham SSm A', 'Gotham SSm B', Arial; font-weight: 400; font-style: normal; text-transform: uppercase; font-size: 14px; line-height: 14px !important; color: #FFF; background: #B99137; padding: 16px 12px 4px 12px!important; text-decoration: none;  }
a.buttonzurueck:hover {background: #ae8323; }

.iframe-responsive {overflow:hidden;padding-bottom:42%;position:relative;height:0;}
.iframe-responsive iframe{left:0;top:0;height:100%;width:100%;position:absolute;display:block;}
iframe {display:block;}

.news {padding: 16px 16px 0 16px; background: #f1e9d7;margin-bottom: 25px;}
.news h2 {font-family: 'Gotham SSm A', 'Gotham SSm B', Arial; font-weight: 700; font-style: normal; font-size: 24px !important; line-height: 28px !important; text-transform: uppercase; color: #000 !important; margin: 0 0 25px 0 !important;}
.news h3 {margin: 0 0 5px 0 !important;}



/* **************************************************
			    		FOOTER
************************************************** */
#footer {width: 100%;overflow: hidden;position: relative;margin: -30px auto 0 auto;clear:both;z-index: 9999;}
#footercontent {margin: 0 auto;overflow: hidden;display: block; padding: 30px 0 ;text-align: center;color: #000;text-align: left;}
#footercontent a{color: #000;text-decoration: none;}
#footercontent a:hover{color: #646464;text-decoration: underline;}







/* **************************************************
			    		ISOTOPPE
************************************************** */
.isotopefull {width: 1370px; padding: 0 0 0 30px;}

.box {overflow: hidden;}
.box img{width: 100%; height: auto!important;}

.grid-sizer { width: 25%; }

.boxocontent {padding: 0; overflow: hidden; position: relative; height: auto; margin: 0 25px 25px 0}
.boxocontent img {display: block;position: relative;}
.boxocontent .mask {
position:absolute; 
top: 6%;
left: 6%; 
background: #FFF; 
display: inline-block; 
height: 88%; 
width: 88%; 
opacity: 0; 
visibility:hidden;
-webkit-transition: all 700ms ease-out;  -moz-transition: all 700ms ease-out;  -o-transition: all 700ms ease-out;  -ms-transition: all 700ms ease-out;  transition: all 700ms ease-out;}
.boxocontent:hover .mask {opacity:1.0;visibility:visible;}

.morecontent {position: absolute;padding: 5% 0 0 5%; width: auto; text-align: left;}
.morecontent .titel{ opacity: 1; color: #B99137; font-size: 21px; line-height: 25px;font-family: 'Gotham SSm A', 'Gotham SSm B', Arial; font-weight: 700; font-style: normal;}



/**** Category Filter navigation ****/
#filternavigation {padding: 0;margin: 0 0 20px  0;}
ul.filter { list-style: none;padding: 0 !important;margin: 0 !important;}
ul.filter li { float: left; padding: 0; margin: 0 30px 0 0;}
ul.filter li a{font-size: 14px; line-height: 17px;color: #B99137;font-family: 'Gotham SSm A', 'Gotham SSm B', Arial; font-weight: 400; font-style: normal;display: block;text-decoration: none;text-transform: uppercase;}
ul.filter li a:hover {color: #000}
ul.filter li a.current{color: #000}



/**** Isotope Filtering ****/
.isotope-item { z-index: 2;}
.isotope-hidden.isotope-item { pointer-events: none;  z-index: 1;}

/**** Isotope CSS3 Transotions ****/
.isotope,
.isotope .isotope-item {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
transition-duration: 0.8s;
}
.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
transition-property: height, width;
}
.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
 transition-property: transform, opacity;
}







/* **************************************************
			    		Slider
************************************************** */

/* Browser Resets */
.flex-container a:active, .flexslider a:active {outline: none;}
.slides,.flex-control-nav,.flex-direction-nav {margin: 0; padding: 0; list-style: none;}

/* FlexSlider Necessary Styles
*********************************/
.flexslider {margin: 0; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {width: 100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;}

/* Clearfix for the .slides element */
.slides:after {content: "\0020"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} html[xmlns] .slides {display: block;} * html .slides {height: 1%;}

/* No JavaScript Fallback - If you are not using another script, such as Modernizr, make sure you include js that eliminates this class on page load */
.no-js .slides > li:first-child {display: block;}


/* FlexSlider Theme
*********************************/
.flexslider { margin: 0 auto 40px auto; position: relative;  zoom: 1; width: 100%; display: block; overflow: hidden; clear: both; }
.flexslider .slides { zoom: 1; }

/* Direction Nav */
.flex-direction-nav {*height: 0;}
.flex-direction-nav a  { text-decoration:none; display: block; width: 40px; height: 36px; margin: -20px 0 0; position: absolute; top: 50%; z-index: 10; overflow: hidden; cursor: pointer; text-indent: -500% !important;white-space: nowrap;overflow: hidden; }
.flex-direction-nav .flex-prev { background: url(images/pfeil-links.png) no-repeat top; background-size: 40px 36px; left:  20px; }
.flex-direction-nav .flex-next { background: url(images/pfeil-rechts.png) no-repeat top; background-size: 40px 36px; right:  20px; }
.flex-prev:hover, .flex-next:hover {}

/* Control Nav - PAGINATION
.flex-control-nav {width: 100%; margin: 0 auto; position: relative; left: auto; right: auto; bottom: 0; text-align: center;margin-top: 20px;}
.flex-control-nav li {margin: 0 5px; display: inline-block; zoom: 1; *display: inline;;}
.flex-control-nav li:first-child {}
.flex-control-nav li a {width: 15px; height: 15px;display: block; background: url(images/pagination.png) no-repeat top; background-size: 15px 34px; cursor: pointer; text-indent: -9999px;}
.flex-control-nav li a:hover {background-position: bottom;}
.flex-control-nav li a.flex-active {background-position: bottom !important; cursor: default;}
*/






/* ##########################################################################
                     M E D I A    Q U E R R I E S
				 http://jsfiddle.net/danield770/Vfffg/16/
########################################################################## */

/* ################### MOBILE  PORTRAIT LAYOUT 300PX  ################### */
@media screen and (max-width: 479px){

.inner {width: 80%;}
.isotopefull {width: 80%; padding: 0;}

#left, #right {width: 9px;}
#top, #bottom {height: 9px;}
#header {height: 68px; top: 9px;}
#logo {width:100px;height:36px;padding: 0 9px 9px 9px;}

#main { margin: 75px 0 0 0;  }

.grid-sizer { width: 100%; }
.boxocontent {margin: 0 0px 25px 0}

#nav-trigger {display: block;  }
nav#hauptnavigation {display: none; }
nav#nav-mobile {display: block; }

.span2, .span3, .span4, .span6, .span8 {width: 100%;}

ul.filter li { float: left; padding: 0; margin: 0 0 10px 0 !important; width: 140px !important;}

.flex-direction-nav a  { width: 20px; height: 18px; margin: -10px 0 0; top: 50%;  }
.flex-direction-nav .flex-prev { background-size: 20px 18px; left:  10px; }
.flex-direction-nav .flex-next { background-size: 20px 18px; right:  10px; }
}




/* ################### MOBILE  LANDSCAPE LAYOUT 480PX  ################### */
@media only screen and (min-width: 480px) and (max-width: 599px){

.inner {width: 85%;}
.isotopefull {width: 90%; padding: 0 0 0 5%;}

#left, #right {width: 9px;}
#top, #bottom {height: 9px;}
#header {height: 68px; top: 9px;}
#logo {width:100px;height:36px;padding: 0 9px 9px 9px;}

#main { margin: 75px 0 0 0;  }

.grid-sizer { width: 50%; }
.morecontent .titel{ font-size: 18px; line-height: 22px;}


#nav-trigger {display: block; }
nav#hauptnavigation {display: none; }
nav#nav-mobile {display: block; }

.span2, .span3, .span4, .span6, .span8 {width: 100%;}

ul.filter li { float: left; padding: 0; margin: 0 0 10px 0 !important; width: 180px !important;}

.single-produkte .grid-sizer:last-child {display: none;}

.flex-direction-nav a  { width: 20px; height: 18px; margin: -10px 0 0; top: 50%;  }
.flex-direction-nav .flex-prev { background-size: 20px 18px; left:  10px; }
.flex-direction-nav .flex-next { background-size: 20px 18px; right:  10px; }
}



/* ################### 7" Tablet 600px ################### */
@media only screen and (min-width: 600px) and (max-width: 759px){

.inner {width: 85%;}
.isotopefull {width: 89%; padding: 0 0 0 4%;}

#left, #right {width: 14px;}
#top, #bottom {height: 14px;}
#header {height: 90px; top: 14px;}
#logo {width:140px;height:50px;padding: 0 14px 14px 14px;}

#main { margin: 110px 0 0 0;  }
nav#nav-mobile {top:110px;   }

ul.filter li { margin: 0 25px 0 0;}
.grid-sizer { width: 50%; }

#nav-trigger {display: block; }
nav#hauptnavigation {display: none; }
nav#nav-mobile {display: block; }

.span2, .span3, .span4, .span6, .span8 {width: 100%;}


.single-produkte .grid-sizer:last-child {display: none;}
}



/* ################### iPad 780px ################### */
/*  @media only screen and (min-width: 760px) and (max-width: 959px){*/
@media only screen and (min-width: 760px) and (max-width: 1060px){

.inner {width: 90%;}
.isotopefull {width: 92%; padding: 0 0 0 2%;}

#left, #right {width: 16px;}
#top, #bottom {height: 16px;}
#header {height: 95px; top: 16px;}
#logo {width:160px;height:58px;padding: 0 16px 16px 16px;}

#main { margin: 120px 0 0 0;  }
nav#nav-mobile {top:110px;   }

.grid-sizer { width: 33.3%; }

#nav-trigger {display: block; }
nav#hauptnavigation {display: none; }
nav#nav-mobile {display: block; }

.span2, .span3, .span6, .span8 {width: 100%;}
.page-template-page_startseite-php .span4 {width: 100%;}

}





/* @media only screen and (min-width: 961px) and (max-width: 1399px){ */
@media only screen and (min-width: 1061px) and (max-width: 1399px){

.inner {width: 90%;}
.isotopefull {width: 92%; padding: 0 0 0 2%;}

.grid-sizer { width: 33.3%; }

.span3 { width: 26%; } /* 290 */
.span2 {width: 21.64179%;}

}





/* ################### RETINA BG IMAGES  ################### */
@media all and (-webkit-min-device-pixel-ratio: 1.5) { 
#nav-trigger span {background: url(images/hamburger@2x.png) no-repeat center; background-size: 25px 18px;}
#nav-trigger span.open {background: url(images/close@2x.png) no-repeat center; background-size: 18px 18px;}
.flex-direction-nav .flex-prev { background: url(images/pfeil-links@2x.png) no-repeat top; background-size: 40px 36px;  }
.flex-direction-nav .flex-next { background: url(images/pfeil-rechts@2x.png) no-repeat top; background-size: 40px 36px;  }
}