/*
 * Layout structure
 */

body{margin: 0; padding: 0; background: #fff;font-size:11px;}

header{}
header .toolbar{height: 30px;}
header .content{min-height: 100px;}
header .menu {height: 40px; border-bottom: 1px solid #dfdfdf;}

main{}
main .content{}

footer{}
footer .content{height: 120px;}
footer .toolbar{height: 30px;}

/*
 * Styles
 */
.header{box-shadow: 0px 2px 1px rgba(0,0,0,0.1);}
#img-logo{width:300px; padding:20px 10px;}
#stern{width: 140px; padding: 10px;}
.grid{}
.main{padding: 6px 0;}
header h3{padding: 20px 0;}
/*
 * Grid items
 */
.grid:after{content: '';display: block;clear: both;}/* clear fix */
.grid-item {float: left; width: 235px; height: 235px; overflow: hidden; background: #f3f3f3; border-radius: 0px; opacity: 0; background-repeat:no-repeat; background-size:contain; background-position:center;}

.grid-item--width2 {width: 476px; height: 476px; }
.is-showing-items .grid-item {opacity: 1; /*reveal when ready*/transition: opacity 0.3s linear;}

/*
 * Grid Item Content
 */
.grid-item img{width: 230px;}
.grid-item-content{padding: 20px 10px; overflow: hidden;}
p.info{word-wrap:break-word;font-weight: 700;}
p.text{word-wrap:break-word;}
/*p.quote{ 
	word-wrap:break-word;
} //font-style: italic;*/
p.quote:before, p.quote:after {
    content: '"';
}
/*
 * Helper classes
 */
div.separator{font-size: 30px; font-weight: bold; width:30px; line-height: 30px; height: 30px; margin: 8px auto;}
.text-white{color:white;}
.mono{font-family: "Courier New", Courier, monospace;}
/* HSKA red */
.red{color: white; background: #db0031;}
.red-7{color: white; background: #760c1b;}
.red-6{color: white; background: #991827;}
.red-5{color: white; background: #bb0f26;}
/* HSKA additional colors */
.purple{color: white; background: #951b81;}
.yellow{color: white; background: #ffcc00;}
.blue{color: white; background: #0080b5;}
.green{color: white; background: #b5db40;}
.champagner{color: #333; background: #bbaf91}

/*
 * SlideOver
 */
.slideover {display: block; position: relative; overflow: hidden;}

.slideover .grid-item-content{position: absolute; background: rgba(255,255,255,0.9); color: #333; padding: 10px 10px; height: 100%; opacity: 1; left: 0; bottom: -100%; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease;}
.slideover:hover .grid-item-content{opacity: 1; bottom: 0;}

@media only screen and (max-width: 482px) {
	.grid-item, .grid-item--width2{width: 100%; height: 0; padding-bottom: 100%}
}