*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html, body {margin:0; padding:0; width:100%; height:100%; background-color:#FEF7F6; color: #515254}
body {font-size: 100.1%; letter-spacing: 0.02em; line-height:140%; font-family: 'Open Sans Condensed', Verdana, Arial, sans-serif;}

@font-face { font-family: 'Open Sans Condensed'; src: url('../fonts/OpenSansCondensed-Light.ttf') format('truetype'); } 

td:first-child {
	width: 20%;
	text-align: left;
}

td:last-child {
	width: 80%;
	text-align: left;
}

.hygiene {letter-spacing: 0.25em }
#mainmenu ul {padding: 0; margin: 0; text-align: center}

ul.sigFreeClassic li.sigFreeThumb {
    padding: 10px 10px 0 0!important; }

#mainleft {width: 100%; float: left; }
#mainright {display: none}

body.news #mainleft {width: 70%; float: left; max-width: 700px}
body.news #mainright {display: block; width: 30%; float: right; max-width: 300px; padding: 20px 0 0 20px}
body.news #mainright img {max-width: 280px; float: right}


@media screen and (max-width:700px) {
body.news #mainleft {width: 100%; float: left;}
body.news #mainright {width: 100%; float: left; max-width: 100%; padding-left: 0px}
body.news #mainright img {max-width: 100%; float: left}
}

.color {background-color: #fb98c9; padding: 10px}

/* ########### Textlinks  #############  */

a:link, a:focus {text-decoration: none; color:#8BA9CD; }
a:visited {text-decoration: none; color:#8BA9CE; }
a:hover {color: #F3CDC5}

img {max-width: 100%; height: auto; border: none}

h1 {font-size: 130%; font-weight: bold; color: #8BA9CD; display: none}
h2 {font-size: 120%; font-weight: bold; color: #8BA9CD}
h3 {font-size: 100%; font-weight: bold; color: #8BA9CD; margin: 0}
h4 {font-size: 100%; text-transform: uppercase; color:#8BA9CD}

#all {text-align: center; }
#content {font-size:1.5em; line-height:140%; text-align: left; margin: 0 auto; width:70%; max-width:1000px; }
#main ul {padding: 0 0 0 22px; text-align: left}

.moduletablenews_left {float: left; width: 49%; max-width: 500px}
.moduletablenews_right {float: right; width: 49%; max-width:500px; padding-top: 20px}

.watermark {text-align: center}
.footerdesktop {font-size: 1.3em; width:100%; padding: 20px 0 20px 0; text-align: center;}
.clear {clear: both; overflow: hidden; height: 0;}
span.fineart { font-family:Fine Hand; font-style:italic }

/* Boxen auf der Seite Angeobt */

#box {width:100%;}
#box1, #box2, #box3  {width: 32%; float:left; text-align:center}
#box2 {margin: 0 2%; text-align:center}

#box1 a:link {color:#FFF; text-decoration: none}
#box1 a:focus {color:#FFF; text-decoration: none}
#box1 a:visited {color:#FFF; text-decoration: none}

#box2 a:link {color:#FFF; text-decoration: none}
#box2 a:focus {color:#FFF; text-decoration: none}
#box2 a:visited {color:#FFF; text-decoration: none}

#box3 a:link {color:#FFF; text-decoration: none}
#box3 a:focus {color:#FFF; text-decoration: none}
#box3 a:visited {color:#FFF; text-decoration: none}

#newsbox1 {width: 70%; float:left; text-align:left}
#newsbox2 {width: 30%; float:right; text-align:left}

#homebox1, #homebox2, #homebox3  {width: 32%; float:left; text-align:left}
#homebox2 {margin: 0 2%; text-align:left}

/* Boxen auf der Seite KONTAKT	 */

#boxk {width:100%; text-align: left}
#box1k  {width: 30%; float:left}
#box2k  {width: 30%; float:left}
#box3k  {width: 40%; float:right}

/* ########### ausgeblendete Inhalte Desktop ########### */

.footermobile {display: none}
.telefon, .menu_mobile, .ontop, .webmaster {display: none}
.mobile {display: none; width:20%}
.mobile p, .telefon p {margin: 0}
#toggle-icons {display: none}

#head {text-align : center}
.logo {width:25%; margin: 0}
.header {width: 100%; margin: 0}
.text_bannerbild p {
    font-family: 'Open Sans Condensed', Verdana, Arial, sans-serif;
    letter-spacing: 1px;
    font-size: 1.5vw;
    color: #FFF;
    background-color: rgba(139,169,205,0.5);
    text-align: center;
    padding: 30px 0 30px 0;
    position: relative;
    margin-top: -100px; 
	width:auto}

.breadcrumbs {text-align:left}
.breadcrumbs img {padding-bottom: 5px}

/* ########### responsive Tabelle  ########### */

table {border-collapse: collapse;}
td, th {padding: 0.5em 0.7em 0.0em 0.0em}
tbody p {padding: 0; margin: 0}
tbody th {vertical-align:top; font-weight: normal; text-align: left; }
tbody td {text-align: left; vertical-align:top;}
thead {display: none;}

.table {display: table; border: none; border-collapse:collapse; width: auto}
.table-row {display: table-row; border: none }
.table-cell {display: table-cell; border: none; padding: 5px 20px 5px 0}
.thead {width: 90%}

.fancybox-caption {display: none!important;}

@media only screen and (max-width: 960px) {
	.table {border:none;}
	.table-row, .table-cell {display: block;}
	.table-row { margin-bottom: 20px; }
}

/* ########### Mainmenu ########### */

#mainmenu {float:left; width:100%; text-align:left}

ul.menu_main {font-size: 1.49vw; width:100%; margin: 0; padding: 0; text-align: center; float:left}
.nav > li {width:auto; list-style: none; display: inline-block; margin: 0 0 15px 0; padding: 0 3% 0 3%;}
.nav > li > a {color:#8BA9CD; display: block; text-decoration: none; }
.nav > li.current.active > a {font-weight: 600; color: #8BA9CD; text-decoration:none;}
.nav > li > a:hover {font-weight: bold; color: #8BA9CD; text-decoration:none;}
.nav > li.parent.active > a {font-weight:600}

#mainmenu .nav li:first-child a {padding-left: 0}
#mainmenu .nav li:last-child a {padding-right: 0}

/* ########### Submenu ########### */

#submenu ul {border-top: 1px solid #8BA9CD; margin:0px; padding:10px 0 0 0}
#submenu .nav > li > a {width:auto; list-style: none; display: inline-block; margin: 0; padding: 1px; }
#submenu .nav > li.current.active > a {font-weight: 600; text-decoration:none;}
#submenu .nav > li > a:hover, #submenu .nav > li > a:focus {font-weight: bold; text-decoration:none;}

/* ########### Toggle Menu ########### */

#toggle-menu {width:100%; }
#toggle-menu {padding: 0; }
#toggle-menu li {font-size: 1.4em; display:block; background-color: #b0cee6; padding: 0%}

#top .nav > li > a {padding: 3%; margin: 5px; display: block; width:100%; color:#FFF; text-decoration: none; text-align:left;}
#top .nav > li.current.active > a {color:#FFF; font-weight: bold; text-decoration: none}
#top .nav > li > a:hover, #top .nav > li > a:focus {color:#FFF; font-weight: bold; text-decoration: none; }
#top .nav > li.parent.active > a {color:#FFF; font-size: 100.1%; font-weight: bold; text-decoration: none; }

@media screen and (min-width: 1600px) {
ul.menu_main {font-size: 22px;}
}

@media screen and (max-width:1400px) {
ul.menu_main {font-size: 20px;}
.nav > li {padding: 0 2% 0 2%;}
}

@media screen and (max-width:900px) {
#content {width:90%}
}

@media screen and (max-width:700px) {
html, body {background-color:#FEF7F6}
#all {padding: 10px; background-image: none; }
#content {width:100%; font-size: 1.1em}
#box1, #box2, #box3  {width: 100%; max-width: 320px; float:none; text-align:center}
#box2 {margin: 0; text-align:center}
#homebox1, #homebox2, #homebox3  {width: 100%; float:none; max-width: 500px}
#homebox2 {margin: 0;}
#homebox2, #homebox3 {padding-top: 20px}   
#box1k, #box2k, #box3k {width: 100%; float:none; }
.text_bannerbild p {font-size: 11px; line-height: 1.5; margin-top: -41px; padding: 10px 0;}  
#main .text_bannerbild p {font-size: 30px; line-height: 1.5; margin-top: -60px; padding: 5px 0;}  
#box a:link, #box a:focus, #box a:visited {text-decoration: none}
#box a:hover {color: #58595b; text-decoration: none}  
.moduletablenews_left, .moduletablenews_right {width: 100%; float: none}  
#mobile_footer {display: block}
.footermobile {display: block; text-align: left; font-size: 1.1em; padding-left: 20px}
ul {list-style-image:url('https://www.fineartcosmetic.ch/images/layout/disc.png');}
ul.submenu {margin: 5px 0 0 0; }
.mobile, .webmaster_mobile  {display: block; float: right}
.telefon {font-size: 1.7rem; display: block; float: left; line-height:130%; }
.ontop {display: block; float: right; width: 25% }
.menu_mobile {display: block; clear: both}
.mobile_footer {clear: left; display: block; padding: 5% 0; font-size:110%; line-height:120%; text-align: left}
.logo {width:100%; max-width:300px; margin: 10px 0 10px 0;}
.header, .webmaster {display: none}
#mainmenu {display: none}
.footerdesktop {display: none}
.menu_mobile {left: 0; position: absolute top: 0; height: 0px; overflow: hidden}
#menu-open:target .menu_mobile {height:auto}
a.open {display:block; width:100%}
a.close {display:none; width:100%}
#menu-open:target a.open {display: none}
#menu-open:target a.close {display: block}
.menu_mobile, .logo {transition: .7s}
.mobile_footer a:link, .header a:visited, .header a:focus {text-decoration: underline; color:#F59C00}
.webmaster {display: block}
  .webmaster img {width: 50%}
}