/* Pearlflutes ########################################################### # # Filename: body.css # # Copyright: S-Inside # Project: www.pearlflutes.de # Platform: CSS # Date created: Oktober 2012 # used colours for this website: #d8d9da grey, background #dedfe1 grey, background content #a7a9ac grey, menu text #939598 grey, bottom row #58595b grey, tekst widgets #231f20 dark grey, artists charachters #2e2c2d dark grey, menu #f89833 orange #000 black #fff white # ########################################################### */ body { margin: 0px; background-color: #d1d2d4 !important; background-image: url("../img/background.gif"); background-repeat: repeat-x; color: #000000; } body,table,td,th,div,input,select,textarea,a,h1,h2,h3,h4,h5,h6,span { font-family: Tahoma, Arial, Helvetica, sans-serif; } /* extra font: javascript call via , Adobe webkit font */ h1 { font-family: "myriad-pro",Tahoma, Arial, Helvetica, sans-serif; font-style: normal; font-weight: 700; line-height: 40px; letter-spacing: 2px; /*text-transform: uppercase;*/ } h2 { font-family: "myriad-pro",Tahoma, Arial, Helvetica, sans-serif; font-style: normal; font-weight: 400; letter-spacing: 1px; } /* end extra font */ img { border: none; } div.main { position: relative; width: 100%; /*min-height: 600px;*/ height: 100%; margin: auto; } div.header { position: fixed; top: 0px; width: 100%; height: 93px; background-color: #fff; z-index: 1000; } div.mobile_menu_hamburger { display: none; } img.langswitch { width: 24px; margin-top: 6px; } div.container { position: relative; top: 106px; margin-bottom: 20px; } div.toprow { position: relative; width: 980px; height: 69px; margin: auto; } div.logo { position: absolute; top: 11px; left: 0px; } div.search { position: relative; top: 30px; left: 0px; float: right; } input.search_field { position: relative; /*top: 0px; right: -14px;*/ width: 211px; height: 26px; margin: 0px; padding: 0px; text-indent: 4px; border: none; background: #fff; background-image: url("../img/searchfield.gif"); background-repeat: no-repeat; color: #939598; } input.search_submit { /*position: relative; left: 10px; top: 0px;*/ width: 27px; height: 26px; background-image: url("../img/search.gif"); background-repeat: no-repeat; border: none; } div.menurow { position: relative; width: 100%; height: 36px; background: #2e2c2d; color: #a7a9ac; } div.orangelogo { position: absolute; top: -6px; right: 1px; } div.top_social { position: absolute; top: 0px; right: 38px; width: 100px; height: 30px; text-align: right; } div.top_social img { width: 24px; margin-right: 0px; } #bottom_social img { position: relative; top: 6px; height: 20px; margin-right: 6px; } div.content { position: relative; width: 980px; max-width: 100%; min-height: 300px; margin: auto; margin-bottom: 50px; } div.crumpath { position: relative; width: 100%; height: 27px; } div.bottomrowlogo, div.bottomrow { position: relative; clear: both; border-top: 1px solid #a7a9ac; width: 980px; height: 38px; margin: auto; } div.menubottom { padding-bottom: 50px; } div.greylogo { position: relative; top: 8px; font-size: 8pt; color: #939598; } div.copy { position: absolute; top: -2px; left: 150px; font-size: 8pt; color: #939598; } div.addthis_toolbox { position: absolute; top: 3px; right: 3px; z-index: 100; } div.inhoud, div.inhoud_smal { position: relative; top: 0px; font-size: 10pt; } div.inhoud a, div.inhoud_smal a { color: #f89833; } div.inhoud a:hover, div.inhoud_smal a:hover { color: #000; } h1.bigtitle { position: relative; left: 10px; top: 4px; font-size: 30pt; font-weight: bold; margin-top: -2px; margin-bottom: 10px; color: #f89833; } #foutmelding { display: none; font-size: 10pt; position: absolute; padding: 20px; top: 200px; left: 25%; width: 400px; height: 300px; border: 2px solid #f89833; background-color: #fff; color: #f89833; z-index: 200; } #page_big { position: absolute; left: 200px; top: 400px; z-index: 200; display: none; cursor: pointer; font-size: 10pt; text-decoration: none; width: 560px; height: 400px; padding: 20px; border: 1px #a71f1f solid; background-color: #dfdbdb; color: #000000; } @media screen{ body>div#foutmelding{ position: fixed; } } div.impressum { position: relative; top: 0px; width: 175px; height: 420px; margin-bottom: 10px; float: left; background: #d1d2d4; } div.impressum_head { position: relative; top: 0px; width: 175px; height: 26px; background-color: #fff !important; background-image: url("../img/background_topsubmenu.gif"); background-repeat: no-repeat; } div.impressum_text { position: relative; top: 0px; left: 5px; width: 170px; font-size: 7.5pt; } div.impressum_text a:hover {text-decoration: underline;} div.impressum_text a { text-decoration: none; color: #000; } div.impressumpage_head { position: relative; height: 337px; width: 798px; left: -5px; background-image: url("../upload/afbeeldingen/design/contact.jpg"); background-repeat: no-repeat; } div.impressumpage_head h1 { position: relative; left: 26px; top: 26px; font-size: 40pt; font-weight: bold; margin-top: -2px; margin-bottom: 10px; color: #f89833; } div.inhoud_impressum { position: relative; top: 0px; font-size: 0pt; width: 788px; padding-left: 5px; padding-right: 5px; float: right; background: #fff; background-image: url("../img/background_impressumpage.gif"); background-position: 0px 335px; background-repeat: repeat-x; } /* homepage slider */ div.contentblock_slider { display: block; width: 979px; max-width: 100%; height: 580px; /* 557px*/ text-decoration: none; } a.slider { display: block; position: absolute; width: 979px; height: 557px; text-decoration: none; background-image: url("../../../img/blank.gif"); background-repeat: no-repeat; z-index: 10; } a.slider h1 { position: relative; left: 26px; top: 26px; font-size: 40pt; font-weight: bold; margin-top: -2px; margin-bottom: 10px; color: #f89833; } a.slider p { position: relative; left: 26px; top: 20px; font-size: 14pt; font-weight: bold; letter-spacing: 1px; background: transparent; color: #353535 !important; } div.slider_leftarrow, div.slider_rightarrow { position: absolute; top: 280px; left: 0px; width: 63px; height: 70px; z-index: 20; cursor: pointer; background-image: url("../img/arrow_left.png"); background-repeat: no-repeat; z-index: 20; } div.slider_rightarrow {left: 916px; background-image: url("../img/arrow_right.png");} #slider_counter { position: relative; top: 554px; text-align: center; z-index: 100; } /* einde homepage slider */ /* photodesign, voor de header foto's */ img.photodesign { position: relative; /*top: 24px;*/ width: 979px; height: 344px; } div.headertext { position: absolute; top: 240px; left: 20px; font-weight: bold; width: 979px; height: 60px; font-size: 12pt; color: #c0c0c0; } div.content_photodesign { position: relative; min-height: 400px; margin-bottom: 50px; } div.content_photodesign h1.titel { position: absolute; top: -370px; left: 20px; width: 980px; max-width: 100%; font-size: 30pt; font-weight: bold; letter-spacing: -1px; margin-top: 3px; margin-bottom: 6px; background: transparent; color: #f89833 !important; z-index: 100; } div.content_photodesign div.inhoud { /*top: 40px;*/ } /* end photo design */ /* formulier #form { margin-bottom: 20px; } .knop { width: 80pt; height: 22px; font-weight: bold; font-size: 8pt; text-decoration: none; border-style: outset; border-color: #f89833; background-color: #eee; color: #000; } .textbox { width: 420px; height: 22px; font-weight: bold; font-size: 8pt; border: 1px solid #f89833; background-color: #eee; color: #000; } .selectbox { width: 424px; height: 22px; font-weight: bold; font-size: 8pt; border: 1px solid #f89833; background-color: #eee; color: #000; } .textboxsmall { width: 60px; height: 22px; font-weight: bold; font-size: 8pt; border: 1px solid #f89833; background-color: #eee; color: #000; } .textboxplaats { width: 346px; height: 22px; font-weight: bold; font-size: 8pt; border: 1px solid #f89833; background-color: #eee; color: #000; } .areabox { width: 420px; height: 100px; font-weight: bold; font-size: 8pt; border: 1px solid #f89833; background-color: #eee; color: #000; } .areaboxsmall { width: 420px; height: 50px; font-weight: bold; font-size: 8pt; border: 1px solid #f89833; background-color: #eee; color: #000; }*/ .redtext { font-weight: bold; color: red; } .greentext { font-weight: bold; color: green; } [type="checkbox"] + label::before, [type="radio"] + label::before { border: 1px solid #000 !important; } /* einde formulier */ /* widgets div.homepagewidgets { position: relative; width: 990px; height: 300px; margin: auto; } div.widget:hover, div.artist_listitem:hover {background-image: url("../img/widgets.png") !important;} div.widget, div.subhomepagewidget, div.artist_listitem { position: relative; margin-right: 1px; margin-left: 1px; cursor: pointer; width: 240px; height: 270px; float: left; font-size: 7.3pt; text-align: center; background-image: url("../img/widget.png"); background-position: bottom; background-repeat: no-repeat; c olor: #58595b; }*/ div.artist_listitem:hover {background-image: url("../img/widgets.png") !important;} div.artist_listitem { position: relative; margin-right: 1px; margin-left: 1px; cursor: pointer; width: 240px; height: 270px; float: left; font-size: 7.3pt; text-align: center; background-image: url("../img/widget.png"); background-position: bottom; background-repeat: no-repeat; color: #58595b; } div.artist_listitem { height: 280px; } div.widgets { margin-top: 40px !important; gap: 10px; /*height: 500px;*/ } div.widget { margin-right: 0px !important; height: 400px !important; } div.widget_divider { /*position: relative; top: 48px; float: left; height: 190px; width: 0px; border-left: 4px solid white;*/ display: none; } /* img.homeimgwidget { position: absolute; width: 240px; height: 140px; left: 0px; top: 87px; } img.subhomeimgwidget { position: relative; top: 3px; border: 0px; width: 172px; } h1.widget { width: 240px; font-size: 13pt; font-weight: bold; letter-spacing: 0px !important; margin-top: 3px; margin-bottom: -5px; background: transparent; color: #f89833 !important; } h2.widget { font-size: 11pt; font-weight: bold; margin-top: 3px; letter-spacing: 0px; margin-bottom: 6px; background: transparent; color: #039cc5 !important; } a.widgetlink:hover {color: #ff5800; text-decoration: underline;} a.widgetlink { position: absolute; bottom: 4px; right: 4px; font-size: 11pt; text-decoration: none; background: transparent; color: #a7a9ac !important; } a.widgetlinks:hover {color: #ff5800; text-decoration: none} a.widgetlinks { font-size: 11pt; background: inherit; color: #a7a9ac; } div.widget p { margin: 0px; } /* einde widgets */ /* nieuws pagina */ div.news { position: relative; width: 100%; min-height: 840px; margin: auto; } div.newsleft { position: absolute; top: 0px; width: 175px; height: 800px; font-size: 0pt; } div.othernewsitems { padding-top: 6px; position: relative; height: 776px; width: 175px; overflow: hidden; background-color: #d1d2d4; } div.othernewsitem { margin: auto; display: block; width: 155px; height: 150px; margin-bottom: 10px; font-size: 8pt; border-bottom: 1px solid #58595b; cursor: pointer; } div.browsenews, div.browsemaps { height: 24px; width: 175px; line-height: 24px; text-indent: 10px; font-size: 10pt; font-weight: bold; background-color: #f89833; color: #fff; } div.newsimage { position: relative; left: 186px; width: calc(100% - 186px); } img.newsimage { width: 794px; max-height: 455px; } div.newsdetails { position: relative; left: 186px; /*width: 774px;*/ width: calc(100% - 186px); min-height: 364px; padding-left: 10px; padding-right: 10px; font-size: 10pt; background-color: #fff; background-image: url("../img/background_newstext.gif"); background-repeat: repeat-x; color: #58595b; } div.newsdetails a { color: #58595b; } h1.newstitle { font-size: 12pt; /*text-transform: uppercase;*/ color: #fff; } /* einde nieuws pagina */ /* producten pagina */ div.products { position: relative; width: 100%; margin: auto; display: flex; flex-direction: row; } div.products_submenu { position: relative; top: 0px; left: 0px; width: 180px; min-height: 400px; } div.products_main { position: relative; width: 800px; min-height: 660px; margin-bottom: 50px; } div.products_certifieddealer { position: relative; top: 10px; width: 175px; height: 140px; padding-top: 2px; background-image: url("../img/background_certifieddealer.gif"); background-repeat: no-repeat; } div.products_widgets { display: flex; } div.products_widget:hover {background-image: url("../img/widgets_products.png")} div.products_widget { cursor: pointer; padding-top: 146px; background-image: url("../img/widget_products.png"); background-repeat: no-repeat; background-position: 0px 140px; color: #58595b; } div.products_widget { position: relative; width: 261px; min-height: 94px; margin-left: 6px; font-size: 7.3pt; text-align: center; color: #58595b; } img.productsimgwidget { position: absolute; width: 261px; height: 140px; left: 0px; top: 0px; } div.productlist { width: 800px; padding: 10px; } div.productlist h1 { font-size: 12pt; margin-bottom: -10px; color: #333; } div.productlist h2 { font-size: 11pt; text-indent: 16px; margin-bottom: -16px; color: #f89833; } div.productlist_item { /*border-top: 1px solid #d3d3d5;*/ cursor: pointer; } div.gototop { width: 100px; float: right; text-align: right; } div.product_head { position: relative; top: -3px; width: 790px; height: 280px; padding-left: 10px; background-repeat: no-repeat; } div.product_head h1, div.maptekst h1 { width: 340px; font-size: 30pt; font-weight: bold; /*text-transform: uppercase;*/ letter-spacing: -1px; margin-top: 3px; margin-bottom: 6px; background: transparent; color: #f89833 !important; } div.product_head h2 { width: 340px; font-size: 14pt; font-weight: bold; letter-spacing: 0px; margin-top: 3px; margin-bottom: 6px; background: transparent; color: #353535 !important; } div.product_text { position: relative; top: -16px; width: 790px; min-height: 104px; padding-left: 10px; font-size: 10pt; background-image: url("../img/background_producttext.gif"); background-repeat: repeat-x; color: #353535; } div.product_text h3 { position: relative; top: 6px; width: 790px; font-size: 12pt; font-weight: bold; background: transparent; color: #fff; margin-bottom: 10px; } div.product_imagedetails { position: relative; top: 0px; width: 770px; height: 430px; padding-left: 10px; background-color: #fff; color: #353535; } div.imagedetail { display: none; position: relative; top: -270px; left: -190px; width: 214px; height: 266px; font-size: 8pt; background-color: #fff; color: #fff; z-index: 20; } img.imagedetail { width: 179px; height: 114px; } div.imagedetaildiv { position: relative; width: 200px; top: 60px; /*min-height: 266px;*/ height: 0px; color: #fff; } span.downloadhighres { display: block; width: 160px; position: relative; left: 560px; top: -20px; } a.downloadhighres:hover {text-decoration: underline;} a.downloadhighres { font-size: 9pt; text-decoration: none; color: #353535; } div.ProductImageOverlay { position: absolute; top: 0px; left: 0px; width: 214px; height: 160px; background-image: url("../img/background_imagedetail.gif"); background-repeat: no-repeat; z-index: 22; } img.ProductImageDetail { position: absolute; top: 16px; left: 17px; z-index: 21; } div.imagedetailtext { position: absolute; top: 134px; left: 0px; width: 214px; min-height: 40px; padding-bottom: 10px; padding-left: 10px; padding-right: 4px; background-color: #333; z-index: 23; } /* einde producten pagina */ /* artiesten pagina */ div.contentartists, div.contentmaps { position: relative; width: 980px; max-width: 100%; min-height: 600px; margin: auto; } div.contentmaps { /*min-height: 1340px;*/ } div.contentartists h1.titel, div.contentmaps h1.titel { display: none; } div.artists { width: 100%; position: relative; margin: auto; } div.artist-overview, div.artists-overview { position: relative; width: 100%; /*958px;*/ height: 324px; padding: 0 10px; background-image: url("../upload/afbeeldingen/pages/artistoverview.jpg"); background-repeat: no-repeat; } /*div.artists-overview {background-image: url("../upload/afbeeldingen/pages/artistsoverview.jpg");}*/ div.artist-list { position: relative; width: 990px; /*min-height: 900px;*/ } .artist-overview h1.bigtitle { position: absolute; top: 16px; left: 20px; z-index: 100; } div.artist-text { position: absolute; top: 60px; left: 20px; font-family: "myriad-pro",Verdana, Arial, Helvetica, sans-serif; font-style: normal; font-weight: 400; letter-spacing: 1px; font-size: 14pt; font-weight: bold; color: #414042; z-index: 100; } div.artist-letter-list { width: 100%; /*969px;*/ padding-left: 8px; height: 45px; border: 1px solid #939598; background: #231f20; color: #fff; } div.artist-letter-list form div { position: relative; } a.artist_charlink, a.artist_nocharlink, a.artist_charlinks { position: relative; top: 10px; display: block; float: left; width: 25px; height: 25px; line-height: 25px; font-size: 14pt; /*text-transform: uppercase;*/ text-decoration: none; text-align: center; background: #58585a !important; color: #fff; } a.artist_charlink:hover, a.artist_charlinks { background-image: url("../img/background_artists_chars.gif") !important; color: #f89833; } a.artist_nocharlink { color: #b46c20 !important; } input.search_field_artists { position: relative; top: 10px; right: -70px; width: 211px; height: 26px; margin: 0px; padding: 0px; text-indent: 4px; border: none; background: #231f20; background-image: url("../img/searchfield_artists.gif"); background-repeat: no-repeat; color: #939598; } input.search_submit_artists { position: absolute; top: 11px; right: 6px; width: 27px; height: 26px; background-image: url("../img/search_artists.gif"); background-repeat: no-repeat; border: none; } div.artist_list { position: relative; min-height: 320px; } div.artist_widget { height: 84px; font-size: 10pt; font-weight: bold; letter-spacing: -1px; margin-bottom: 10px; /*text-transform: uppercase;*/ color: #67686a; } img.artistimgwidget { position: absolute; width: 240px; height: 140px; left: 0px; top: 97px; } img.artist-image { position: absolute; right: 0px; height: 324px; z-index: 99; } div.artist { position: relative; width: 100%; } div.artist-leftcolumn { float: left; width: 185px; min-height: 400px; font-size: 0pt; } div.artist-linkshead { width: 175px; height: 33px; background-image: url("../img/background_artist_link.gif"); background-repeat: no-repeat; color: #fff; } div.artist_relatednewshead { width: 175px; height: 20px; text-indent: 10px; font-size: 10pt; font-weight: bold; background-color: #f89833; color: #fff; } div.artist_relatednews { padding-bottom: 20px; } div.artist-links { width: 175px; min-height: 120px; margin-top: 0px; padding-top: 1px; padding-left: 5px; margin-bottom: 20px; background-color: #58585a; color: #fff; } div.artist-links h3 { font-size: 11pt; font-weight: bold; /*text-transform: uppercase;*/ margin-bottom: 5px; color: #f89833; } div.artist-links a:hover {text-decoration: underline;} div.artist-links a { position: relative; font-size: 10pt; text-decoration: none; color: #fff; z-index: 100; } div.artist-bio { position: relative; right: 2px; float: right; padding-left: 10px; padding-right: 10px; width: 770px; min-height: 200px; margin-bottom: 20px; font-size: 10pt; background-color: #fff; background-image: url("../img/background_artistbio.gif"); background-repeat: repeat-x; color: #231f20; } div.artist-bio h3 { font-size: 11pt; font-weight: bold; /*text-transform: uppercase;*/ margin-bottom: 10px; color: #fff; } div.artist-instrument { position: relative; right: 2px; top: -20px; float: right; padding-left: 10px; padding-right: 10px; width: 770px; min-height: 340px; margin-bottom: 20px; font-size: 10pt; } div.artist-instrument div.product_imagedetails { left: -10px !important; padding-left: 0px !important; } div.artists_imagedetails { clear: both; padding-top: 20px; width: 660px; text-align: center; margin: auto; } div.artist_imagedetail { padding: 5px; margin: 5px; float: left; border: 1px solid #999; } /* einde artiesten pagina */ /* google maps section */ div.maps { position: relative; width: 100%; min-height: 400px; margin: auto; margin-top: 40px; } div.mapdetail { position: relative; float: right; width: 774px; min-height: 1000px; background-color: transparent; color: #58595b; } div.maptekst { position: relative; padding-left: 10px; padding-right: 10px; width: 100%; height: auto; margin-bottom: 20px; font-size: 10pt; } #map_canvas { position: relative; width: 100%; height: 800px; margin-bottom: 40px; } div.maps_submenu { position: relative; top: 0px; left: 0px; width: 180px; min-height: 300px; overflow: hidden; } a.maplink { text-decoration: underline; color: #58595b !important; } a.maplink:hover {text-decoration: none;} /* end google maps section */ /* search results */ div.search_results { } div.search_results a { color: #58595b !important; } /* end search results */ /* menu */ div.menudiv { position: relative; top: 6px; left: -6px; width: 996px; height: 24px; margin: auto; } /* top column head menu, expands below */ #menu1 { position: relative; margin: auto; width: 980px; font-size: 0pt; z-index: 1000; } #menu1 ul.menu { /*width: 100%;*/ padding: 0; } #menu1 ul.menu li { list-style: none; float: left; height: 24px; border-right: 2px solid #a7a9ac; } #menu1 ul.menu li a { display: block; font-size: 11pt; text-decoration: none; text-transform: uppercase; height: 30px; line-height: 24px; padding-left: 16px; padding-right: 16px; background-color: transparent; color: #a7a9ac; } #menu1 ul.menu li a:hover {color: #f89833;} #menu1 ul.menu li a.current {color: #f89833;} /* end head menu */ /* sub menu */ #menu1 ul.menu li ul.submenu { position: absolute; left: -2999px; float: none; z-index: 100; } #menu1 ul.menu li:hover ul.submenu { left: auto; width: 280px; margin-left: -40px; } #menu1 li ul.submenu li { list-style: none; width: 100%; height: 28px; line-height: 24px; } #menu1 ul.submenu li a { display: block; width: 100%; font-size: 11pt; text-decoration: none; text-transform: uppercase; background-image: none; border: 1px solid #f89833; background-color: #efefef; color: #a7a9ac; } #menu1 ul.submenu li a:hover {color: #f89833;} #menu1 ul.submenu li a.expand {} /* end sub menu /* bottom menu, not expanding */ #menu2 { position: relative; left: -6px; top: 10px; min-width: 100px; height: 40px; float: left; margin-right: 20px; font-size: 8pt; } #menu2 ul.menu2 { /*width: 100%;*/ padding: 0; } #menu2 ul.menu2 li { list-style: none; height: 26px; float: left; } #menu2 ul.menu2 li a { border-right: 1px solid #939598; padding-left: 6px; padding-right: 6px; font-size: 8pt; font-weight: bold; text-decoration: none !important; background-color: inherit; color: #939598; } #menu2 ul.menu2 li a:hover {color: #f89833;} #menu2 ul.menu2 li a.current {color: #f89833;} #menu2 ul.menu2 li a.first {} #menu2 ul.menu2 li a.last {border: none;} div.crumpath { position: relative; top: 4px; left: 4px; font-size: 8pt; color: #a7a9ac; } a.kruimellink { font-size: 8pt; color: #a7a9ac; text-decoration: none; } a.kruimellink:hover {text-decoration: underline;} a.sitemaphoofdlink, a.sitemaplink { font-size: 10pt; color: #58595b; text-decoration: none; } a.sitemaphoofdlink:hover, a.sitemaplink:hover {text-decoration: underline;} a.submenu, a.submenus { display: block; width: 175px; height: 21px; margin-top: 2px; font-size: 10pt; line-height: 21px; text-indent: 4px; text-decoration: none; text-transform: uppercase; overflow: hidden; background-image: url("../img/background_submenu.gif"); background-repeat: no-repeat; color: #fff; } a.submenu:hover, a.submenus {background-image: url("../img/background_submenus.gif"); color: #000 !important;} a.subsubmenu, a.subsubmenus { display: block; width: 175px; height: 21px; font-size: 9pt; line-height: 21px; text-indent: 4px; text-decoration: none; text-transform: uppercase; border-top: 1px solid #939598; background-color: #d1d2d4; color: #fff; } a.subsubmenu:hover, a.subsubmenus {background-image: url("../img/background_submenus.gif"); color: #000 !important;} a.mapssubsub {font-size: 7pt; } div.topsubmenu { width: 175px; height: 26px; margin-top: 2px; background-image: url("../img/background_topsubmenu.gif"); } @media screen and (max-width: 1023px) { div.product_head { width: 100%; background-size: contain; height: 300px; } } @media screen and (max-width: 767px) { #contentblock1, div.container, div.toprow, div.header, div.content, div.product_text h3, div.product_text table { width: 100%; max-width: 100%; } div.contentblock_slider { height: 240px; } a.slider { width: 100%; background-size: contain; } div.slider_leftarrow, div.slider_rightarrow, #slider_counter, div.search { display: none; } div.headertext { max-width: 90%; font-size: 10pt; top: 200px; } div.bottomrowlogo, div.bottomrow { max-width: 100%; } div.content_photodesign h1.titel { text-align: center; left: auto; } /*nav #menu1 .menu > li:last-of-type a { justify-content: flex-start; } */ div.products { flex-direction: column; } div.products_certifieddealer { display: none; } div.products_submenu { width: 100%; margin-bottom: 20px; /*height: 400px;*/ } div.product_head { width: 100%; background-size: contain; height: 160px; } div.products_main, div.productlist, div.product_text, div.product_imagedetails { width: 100%; } div.products_widgets { flex-direction: column; } div.products_widget { width: 100%; min-width: 300px; margin-left: 0px; height: 280px; } div.products_widget img.productsimgwidget { width: 100%; height: auto; margin-bottom: 10px; } div.products_widget h1 { position: relative; height: 40px; top: -170px; left: 10px; text-align: left; } div.product_imagedetails img { content: ''; object-position: -99999px 99999px; background-size: contain; } div.artist-list { position: relative; width: 100%; display: flex; flex-direction: column; } div.artist_listitem { width: 100%; } div.artist_listitem img.artistimgwidget { width: 100%; height: auto; } div.artist_listitem h1 { position: absolute; top: 100px; left: 4px; color: #fff; } div.artist_widget { color: #fff; position: absolute; top: 140px; text-align: left; left: 4px; } div.artist_listitem a { display: none; } div.artist-letter-list form { display: none; } div.cms_form_v2 form .form_row .field { width: 100%; } div.cms_form_v2 form .form_row.form_row_leeg_ .description { padding-left: 0px; } div.cms_form_v2 form .form_row .description { justify-content: flex-start; } div.mobile_menu_container { width: 100%; } div.mobile_menu_hamburger { display: inline-block; position: absolute; top: -60px; right: 20px; } img.mobile_menu_hamburger { width: 40px; } div.menudiv { width: 100%; margin: 0; } div.orangelogo, div.top_social, #menu1, #menu_title { display: none; } div.mobile_menu { background-color: #fff; margin-left: 10px; padding-bottom: 50px; } div.menuitem a { padding: 5px; line-height: 28px; height: 28px; font-size: 18px; display: block; } div.menuitem a:hover { color: #000; } a.hidesubheadmenu { display: none; } div.submenuitem { margin-left: 20px; } div.submenuitem a:before { content: '- '; } }