/* Lupidoo 2014 */
/* ---------------- */
/*  28.03. 2014		*/
/* ---------------- */



/* Importieren von CSS aus Editor */
@import "styles_content.css";
@import "styles_shopping.css";
@import "css/one-page-style.css";
@import "css/one-page-plugin.css";


@font-face {
  font-family: 'MinionPro-Regular';
  src: url('/fonts/MinionPro-Regular.eot') format('embedded-opentype'),  url('/fonts/MinionPro-Regular.otf')  format('opentype'),
	     url('/fonts/MinionPro-Regular.woff') format('woff'), url('/fonts/MinionPro-Regular.ttf')  format('truetype'), url('/fonts/MinionPro-Regular.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}


@font-face {
  font-family: 'MinionPro-Italic';
  src: url('/fonts/MinionPro-It.eot') format('embedded-opentype'),  url('/fonts/MinionPro-It.otf')  format('opentype'),
	     url('/fonts/MinionPro-It.woff') format('woff'), url('/fonts/MinionPro-It.ttf')  format('truetype'), url('/fonts/MinionPro-It.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'MetaPlusNormal-Roman';
  src: url('https://www.zippidoo.at/fonts/MetaPlusNormal-Roman.eot#iefix') format('embedded-opentype'),  url('/fonts/MetaPlusNormal-Roman.otf')  format('opentype'),
	     url('/fonts/MetaPlusNormal-Roman.woff') format('woff'), url('/fonts/MetaPlusNormal-Roman.ttf')  format('truetype'), url('/fonts/MetaPlusNormal-Roman.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

/* DIVs */

* {margin:0px; padding:0px; box-sizing:border-box}
html {overflow-y: scroll;}
body {font: 100% "MetaPlusNormal-Roman", Arial, Helvetica, sans-serif; background-color:#f5f5f5;color:#404040;}



a {outline:none;}
a:active {outline:none;}
a img {border: 0;}
.clearfloat {clear:both}
.mb30px {margin-bottom:30px;}
.mb50px {margin-bottom:50px;}
.mb90px {margin-bottom:90px;}
.mt100px {margin-top:100px;}
.mt300px {margin-top:300px;}
.mt450px {margin-top:450px;}
.mt600px {margin-top:600px;}
#langChange {font: 100% "MetaPlusNormal-Roman", Arial, Helvetica, sans-serif; position:relative; float:left; padding-top:25px; z-index:999999999}
#langChange ul li {list-style-type:none; display:inline-block; margin-left:5px}
#topImpressum {font: 100% "MetaPlusNormal-Roman", Arial, Helvetica, sans-serif; position:relative; float:right; text-transform:uppercase; padding-top:25px}
#topImpressum ul li {list-style-type:none; display:inline-block; margin-left:5px}
#langChange ul li:first-child, #topImpressum ul li:first-child {margin-left:0px}
.maxWidth100 {width:1215px; max-width:100%; margin:0px auto; position:relative;}


.nav {text-align:center; }
.navigation-menu .navbar-nav li a {font: 150% "MinionPro-Regular", Arial, Helvetica, sans-serif;}
#nav #navMobileOpener .balken {
    background-color: #404040;
    height: 5px;
    margin-top: 7px;
    width: 66px;
	cursor:pointer;
}

#nav #mobileOpenerOuter {cursor:pointer}
#nav #schliessen{display:none; position:relative; z-index:9999}
#nav #schliessen #schliessenSymbol {
    background-image: url("/UserFiles/structure/close.png");
    display: block;
    float: right;
    height: 69px;
    width: 66px;
}

#navMobile {display:none; position:absolute; width:100%; top:60px; background-color:#1b1f2b; color:#fff; left:0px; z-index:1000;}
#navMobile #ulnav {text-align:center; margin-top:170px}
#navMobile #ulnav li {list-style-type:none;}
#navMobile #ulnav li a, #navMobile #ulnav li a span {color:#FFF; font-size:1.5em; text-decoration:none; line-height:1.3em;}
#header_home {text-align:center; max-width:100%}

#flex {width:100%; height:auto; max-width:100%; float:left; margin-bottom:50px}
.flex-control-nav {
    position: relative;
    text-align: center;
    width: 100%;
	z-index:999;
	bottom:20px;
}

.bildundtext {width:350px; float:left; margin-right:40px}
.bildundtext #flex {width:350px;}
.flex-control-nav {
    position: relative;
    text-align: center;
    width: 100%;
	z-index:999;
	bottom:20px;
}

.bildundtext #flex .flexslider, .bildundtext #flex .flexslider .slides,  .bildundtext #flex .flexslider .slides li {}

#contentText {line-height:1.5em; font-size:1.3em; max-width:800px}
#content_home {padding-bottom:100px}
h1 {text-align:center;  font: 130% "MetaPlusNormal-Roman", Arial, Helvetica, sans-serif; margin-bottom:30px}
#home div.text {max-width:100%; width:920px; margin:0px auto;}

#buttonsRight {
    display: block;
    height: 150px;
    position: fixed;
    right: 0;
    top: 350px;
    width: 70px;
    z-index: 900;
}

#header_home {margin-bottom:90px; position:absolute; top:150px; z-index:10; width:100%; text-align:center; margin:0px auto; }

#LogoTop {
display:block;
margin:0px auto;
margin-top:0px;	
transition:all 1s ease-out;
position:relative;
width:auto;
max-width:400px;
z-index:10;
}

#LogoTop img {
transition:all 1s ease-out;
}

#header_home {transition:all 1s ease-out;} 

.navbar, .navbar-header, {max-width:70px}
.navigation-menu {position:relative; z-index:9999999; }
.navbar-collapse {}

.navigation-background #header_home {top:20px; margin-bottom:10px;}
.navigation-background #LogoTop {}
.navigation-background #LogoTop img {width:200px; height:auto}

.scrolled .section {}

#home .container .flex {max-width:100% !important; width:100% !important}


/* siehe auch on-page-scripts.js - zeile 52 - top+1 stellte den richtigen Abstand ein beim Scrollen - "scrollTop: $(anchor.attr('href')).offset().top + 1" */

.section-space-padding {padding: 100px 0;}
#home.section-space-padding {padding: 300px 0}



table, table tr, table tr td, img {max-width:100% !important}

.clearflaot {clear:both}

.submenu {width:200px; max-width:100%; float:left; border-left:0px}
.submenu li {color:#CCC; }
.submenu li:last-child {border:0px}
.submenu li a {display:block; width:100%; height:100%; padding:10px; color:#666; cursor:pointer}
.submenu li a:hover, .submenu li a.opened {background-color:#d1d3d4 ; text-decoration:none; color:#000;}

blockquote ul li {margin-left:20px}

/*.absolute {position:fixed; left:0px; top:320px}*/
.absolute {position:fixed; left:0px;}

.zitat {margin-top:30px}
.header-top-area.navigation-background  {border-bottom:3px solid #FFF}

.flexslider {
    background: none;
}

.flexslider img {max-width:100%}

.footer-section {height:1px; max-height:1px; padding:0px}


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

.container {width:100%}
section:not(#home):not(#onlineshop) #flex {width:calc(100% - 200px); max-width:calc(100% - 200px);} 

}

@media only screen and (max-width: 1024px) {
header > div, section > div, footer > div {box-sizing:border-box; padding-left:5px; padding-right:5px}

#buttonsRight {
    display: block;
    position: relative;
	top:-100px;
	left:85%;
}
}

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

.submenu {
    border-left: 0 none;
    float: none;
	display:block;
    width: 100%;
	
}	
section:not(#home) #flex, #flex {width:100%; max-width:100%; clear:both; display:block} 	

}



@media only screen and (max-width: 1600px) {
ul.submenu, ul.submenu li {list-style-type:none}
.absolute {float:left; width:200px; position:relative !important;}	
#shop {float:left !important; width:calc(100% - 200px); max-width:calc(100% - 200px);}
#addWarenkorb {
    background-color: #E6007E;
    border: 0 none;
    cursor: pointer;
    height: 29px;
    margin: 0px;
    padding: 0;
    width: 100%;
	clear:both;
	display:block;
	margin-top:10px;
	border:1px solid; 
	color:#fff;
}

#shop-spalte2 .submitter {

    width: 100%;
}


}


@media only screen and (max-width: 1200px) {
.onlineshophome {margin-left:200px}
#langChange {margin-left:20px}
.navigation-menu, #symbolWarenkorbContainer {margin-right:20px}
}

@media only screen and (max-width: 800px) {
.absolute {float:none; width:100%; position:relative !important; display:block; clear:both; top:30px}	
section:not(#home) #flex {width:100%; max-width:100%; min-width:100%} 
#shop {display:block; clear:both; position:relative; width:100%; max-width:100%}
.shop-produkt .kreissysmbol  {font: 70% "MetaPlusNormal-Roman", Arial, Helvetica, sans-serif; width:50px; height:50px; border-radius:25px; background-color:#e6007e; color:#FFF; position:relative; z-index:999; top:20px; left:20px; line-height:50px; transform:  translateX(-50%) translateY(-50%) rotate(-10deg); text-align:center}
#shop .text {width:100%; min-width:100%; max-width:100%}

.container .row #shop #shop-spalte2 .shop-product div .bildundtext #flex {width:100%; min-width:100%; max-width:100%}
.bildundtext {width:100%; margin-right:0px; }




#shop-spalte2 .submitter {
    float: none;
    width: 100%;
	clear:both;
	margin-top:20px;
	display:block;
	position:relative;
}


#shop-spalte2 a.haupteintrag {
    text-align: center;
	margin:0px auto;
	display:block;
}

#shop-spalte2 .bildOuter {
    float:none;
	margin:0px auto;
}

#shop-spalte2 .bildOuter .vorschaubildgross {
    display: block;
	margin:0px auto;
}

.onlineshophome {margin-left:0px}
.submenu  {border-top:1px solid #d1d3d4  ; border-bottom:1px solid #d1d3d4 }




body.scrolled #topImpressum {margin-top:-5px}
body.scrolled #langChange {padding-top:5px}

#formExpressCheckoutDetails, #basketInner, #expressCheckoutForm, #expressCheckoutForm * {max-width:100%; width:100%}


#expressCheckoutForm .formrechts {
    float: none;
    text-align: left;
    width:100%;
	clear:both;
}

#expressCheckoutForm .formlinks {
    clear: both;
    float: none;
    width: 100%;
}
#expressCheckoutForm .formrechts {margin-left:0px}
#warenkorbHeader {display:none}

.formlinksxs {
    clear: both;
    float: none;
    font-weight: 200;
    margin-right: 5px;
    width: 100%;
	text-align:left;
}

.formrechtsxs {
    border-bottom: 1px solid #999;
    float: none;
    text-align: left;
    width: 100%;
	text-align:left;
	margin-bottom:20px;
}
}


/* ----------- iPad 1 and 2 ----------- */
/* Landscape */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1)  { 

#shop-spalte2 .sizer {width: 45%;}
#shop-spalte2 .artpreis {height:300px;}


}

/* Portrait */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) 
and (-webkit-min-device-pixel-ratio: 1) { 



 }
 
 
 
/* ----------- iPad 3 and 4 ----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) {

#shop-spalte2 .sizer {width: 45%;}
#shop-spalte2 .artpreis {height:280px;}
}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {

} 


@media only screen and (max-width: 700px) {
body #symbolWarenkorbContainer {position:fixed; left:20px;  top:40px; z-index:1000; width:100px; font-size:0.8em; height:50px}
}


@media only screen and (max-width: 500px) {
body #symbolWarenkorbContainer strong {display:none}
body.scrolled #symbolWarenkorbContainer {height:35px; top:105px; }
body #symbolWarenkorbContainer {height:35px; }
}