/***********************************
Datei: template.css CSS 
URL: www.isup-gbr.de
************************************
Copyright: www.Sabine-Kemper.de
Start: 21.02.2023
Letzte Aenderung: 21.02.2023
***********************************/

/*
######################################################### 
body                                                ###
######################################################### 
*/

 
body, html {
  font-family:"Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-weight:normal;
  font-size:110%;
  color:#666;
  background-color: transparent;
  width:100%;
  text-align: left;
font-weight: normal;
}

section {
padding: 0;
max-width: 1280px;
margin: 0 auto;
}

.bold {
  font-weight:bold;
  margin: 0.5em 0 0.5em 0;
  text-align:left;
}

.field-value img  {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-bottom: 1em;
  margin-top: 1em;
  }

@media print {
#top, #navigation, #slider {
  display: none;
} 
}

/*
######################################################### 
reset                                               ###
######################################################### 
*/

* {
  margin:0;
  padding:0;
  list-style-position: outside;
}

form {margin: 0; padding:0;}
img {border:0; max-width: 100%; height: auto; margin:0;padding:0;}
img.imgtranparent80 {opacity:0.8;}
fieldset {border:0;}
input.button {margin: 0; padding:1px;}
article, aside {display: block;}



.clear {
  clear: both;
  height: 0px;
  width: 0px;
  font-size: 0.0em;
  visibility: hidden;
}

*, *:before, *:after {
    -webkit-box-sizing: border-box; /* Safari/Chrome, andere WebKit-Browser */
    -moz-box-sizing: border-box; /* Firefox, andere Gecko-Browser */
    box-sizing: border-box; /* Opera/IE 8+ */
  box-sizing: inherit;
}


/* 
###############################################################
geruest #
###############################################################
*/

.button {border: 0;}

/* 
###############################################################
Seitenaufbau #
###############################################################
*/

#top {
position: relative;
margin: 0 0 0 0;
padding: 0;
background-color: transparent;
text-align: right;
height:auto;
width: 100%;
}

.intop {
    position: relative;
    margin: 0 auto;
    max-width: 1280px;
    height:auto;
	background-color: transparent;
	padding:0;
 	color: #666;
 	text-align: left;
}

#logo {
  margin: 0.5% 0 0.5% 0;
  padding: 0;
  text-align: center;
	background-color: transparent;
  height:auto;
  max-width: 400px;
  display:block;
  float: left;
  position: relative;
}

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

#logo:hover  {
	opacity:0.5;
transition: all 500ms;-webkit-transition: all 500ms;-moz-transition: all 500ms;-o-transition: all 500ms;
}

#icons {
    position: relative;
    float:right;
    width: 20%;
	background-color: transparent;
 	padding: 0;
 	text-align: right;
 	margin: 1% 0 1% 0;
 	height: auto;
}

.inicons {
    position: relative;
    float:left;
    width: 60%;
	background-color: transparent;
 	padding: 0;
 	text-align: left;
 	margin:0;
 	height: auto;
}


.inicons img {
    width: 20px;
    height: 20px;
 	margin: 0 0.5em 0 0;
 	vertical-align:middle;
}

.inicons a:hover  {
	opacity:0.5;
transition: all 800ms;-webkit-transition: all 800ms;-moz-transition: all 800ms;-o-transition: all 800ms;
}


/* 
###############################################################
navigation #
###############################################################
*/

#navigation {
	position: -webkit-sticky;
    position: sticky;
    top: 0;
    padding: 0;
    max-width: 100%;
    height:auto;
    background-color: #3399ff;
	-webkit-box-shadow: 0 0px 15px #666;
	-moz-box-shadow: 0 0px 15px #666;
	box-shadow: 0 0px 15px #666;
	margin:0;
	z-index: 120;
}

.innavigation {
    margin: 0 auto;
    padding: 0;
    text-align: left;
    max-width: 1280px;
    height:auto;
    background-color:transparent;
}

/* 
###############################################################
Slider #
###############################################################
*/

#slider {
	max-width: 100%;
    position: relative;
    height: auto;
	padding:0!important;
	margin:0!important;
	text-align: center;
	background-color: transparent;
	clear: both;
display:block;
}

#slider img {
box-shadow: 10px 10px 15px silver;
opacity:0.9;
}

.inslider {
  position:relative;
  margin: 0!important;
  text-align: center;
  height:auto;
  background-color:transparent;
  max-width: 100%;
  padding:0!important;
}

.inslider img {
	width:100%;
	margin:0!important;
	padding:0!important;
	}
	
/* 
###############################################################
BildTextFeld #
###############################################################
*/

.boxFlex {
   display: -webkit-flex;
   display: -ms-flex;
   display: flex;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   background-color: transparent;
  margin: 2% 0 0 0;
}


.bereichBildText {
   background-color: #fff;
 height: auto;
  width: 22%!important;
  margin: 0% 3% 1% 0;
  padding: 1%;
  float:left;
box-shadow: 10px 10px 15px silver;
  border: 2px orange dotted;
 }
 
.bereichBildTextMitarbeiter {
   background-color: #fff;
 height: auto;
  width: 22%!important;
  margin: 0% 3% 1% 0;
  padding: 1%;
  float:left;
  border: 1px orange dotted;
 }
 
.bereichBildTextMitarbeiter img  {
  margin: 0!important;
  padding: 0!important;
 }


.BildASpektrum {
  height: auto;
  width: 100%!important;
  margin: 0% 0 1% 0;
  padding: 0;
  float:left;
  background-color: transparent;
 }
  
.TextASpektrum {
  height: auto;
  width: 100%!important;
  margin: 0% 3% 1% 0;
  padding: 0;
  float:left;
  background-color: transparent;
 }

  
/* 
###############################################################
Boxen Text #
###############################################################
*/
	
	
.boxIndex {display: -webkit-flex;display: -ms-flex; display: flex;-webkit-flex-wrap: wrap; -ms-flex-wrap: wrap;flex-wrap: wrap;}
.container-weiss {display: -webkit-flex;display: -ms-flexbox; display: flex; text-align:left;width: 49%;padding:0;float:left;margin: 1% 0.5% 1% 0.5%;border: 2px solid #99ccff;}
.container-weiss {background-color: #fff;}
.textboxIndex {width: 100%;color: #666;font-size: 100%;position: relative;text-align:left;padding: 2%;margin: 2%;}
.textboxIndex h2 {font-family:"Segoe UI", Tahoma, Geneva, Verdana, sans-serif; clear: both;font-size: 120%;font-weight:normal;margin: 0.5em 0 0.5em 0;line-height:1.3em; text-align:left;}
.textboxIndex img {text-align:center; vertical-align:middle; position: relative; margin: 0 auto;width: 50%; display: block;}

@media only screen and (max-width:70em) 
{.container-weiss {width: 49%;font-size: 90%;}
}
@media only screen and (max-width:60em) 
{.textboxIndex img {text-align:center; vertical-align:middle; position: relative; margin: 0 auto;width: 100%; display: block;}
}

@media only screen and (max-width:40em) 
{.container-weiss {width: 100%;font-size: 100%;}
}
@media only screen and (max-width:35em) 
{.container-weiss {font-size: 80%;}
}



/* 
###############################################################
Textbereich #
###############################################################
*/


#main {
  width: 100%;
  margin: 0 auto;
  text-align: left;
  background-color: transparent;
  height: auto;
}

.item-page, .fcp_page, .item-content, .com-content-category-blog__items.blog-items, .com-content-category-blog__item.blog-item, #mod-custom140.mod-custom.custom, #mod-custom143.mod-custom.custom, #mod-custom144.mod-custom.custom, .empfehlung {
  max-width: 1280px;
  height: auto;
  margin: 1% auto!important;
}

.item-page, .fcp_page, .com-content-category-blog__item.blog-item, #mod-custom140.mod-custom.custom, #mod-custom143.mod-custom.custom, #mod-custom144.mod-custom.custom {
  padding: 1em;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)!important;
}

@media screen and (max-width: 1280px) {
.item-page, .item-content, .com-content-category-blog__items.blog-items, .com-content-category-blog__item.blog-item, #mod-custom146.mod-custom.custom {
  max-width: 1280px;
  padding: 1% 2% 1% 2%;
}
}

/*
######################################################### 
Anmeldeformular                          ###
######################################################### 
*/

.fcp_line.fcp_fixed_text.fcp_opt {
padding: 1em 0 0 0!important;
}
                                  
div.fcp_fixed_heading span {
    text-align: left;
    background-color: transparent;
      font-family:"Segoe UI", Tahoma, Geneva, Verdana, sans-serif!important;
    font-size: 120%!important;
font-weight: bold!important;
padding: 1em 0 0 0!important;
color: #666666!important;
}

div.fcp_line input[type="checkbox"], div.fcp_line input[type="radio"] {
    width: auto;
    margin: 0 7px 0 7px!important;
    height: auto;
}

.buttondruck {
  background-color: #99ccff!important;
  border-radius: 5px !important;
  border: 0 double #cccccc !important;
  color: #666666 !important;
  text-align: center !important;
  width: auto !important;
  height: auto !important;
  margin: 1em 0 1em 0 !important;
  font-size: 110% !important;
  cursor: pointer !important;
  padding: .5em .8em .5em .8em !important;
}

@media screen and (max-width: 1280px) {
.buttondruck   {
margin: 1% 2% 1% 0%!important;
}}

/* 
###############################################################
Textbereich weiss #
###############################################################
*/

.TextbereichWeiss {
	width: 100%;
	padding: 0.8em 0 0.8em 0;
	margin: 0;
	height: auto;
   background: transparent;
}

/* 
###############################################################
boxen Bilder Geschäftsführung #
###############################################################
*/

.boxLeitung {
   display: -webkit-flex;
   display: -ms-flex;
   display: flex;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
margin: 0 auto;
}

.kontakt_box {
 height: auto;
  width: 32.6%;
  background-color: #ffffff;
  padding: 1em;
  float:left;
  margin: 1% 0 1% 0.5%;
  border: 2px solid #99ccff;
    }

.kontakt_bild img {
  margin: 0!important;
  padding: 0!important;
  }

.kontakt_text {
  width: 100%;
  color: #666;
  position: relative;
  text-align:left;
height: 90%!important;
  }

.kontakt_text img {
  margin: 0!important;
  padding: 0!important;
width:100%;
}
  
.kontakt_text h2 {
  font-size: 110%!important;
  font-weight: bold;
  }

.kontakt_email {
  margin-top: 1%;
  margin-bottom: 10px;
height: 10%!important;
  width: 100%;
  position: relative;
vertical-align: bottom!important;
border-top: 1px solid #99ccff;
}

.kontakt_email a {
text-decoration:none;
color:#99ccff;
font-weight:bold;
}

@media only screen and (max-width:60em) {
.kontakt_box {
	width: 49%;
    }
}

@media only screen and (max-width:40em) {
.kontakt_box {
	width: 100%;
    }
}

/* 
###############################################################
boxen Über uns #
###############################################################
*/

.kontakt_rma {
 height: auto;
  width: 32.6%;
  background-color: #ffffff;
  padding: 1em;
  float:left;
  margin: 1% 0 1% 0.5%;
  border: 2px solid #99ccff;
    }

.kontakt_rma img {
  margin: 0!important;
  padding: 0!important;
  }

#mod-custom113.mod-custom.custom img {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }

.textKontakt {
  width: 100%;
  color: #666;
  position: relative;
  text-align:left;
height: 90%!important;
  }

.textKontakt img {
  margin: 0!important;
  padding: 0!important;
width:100%;
}
  
.textKontakt h2 {
  font-size: 110%!important;
  font-weight: bold;
  }


@media only screen and (max-width:60em) {
.kontakt_rma {
	width: 49%;
    }
}

@media only screen and (max-width:40em) {
.kontakt_rma {
	width: 100%;
    }
}
/* 
###############################################################
boxen Startseite  #
###############################################################
*/

table, .table4, .table3 {
  border: 0px solid #ffffff;
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0 auto;
  table-layout: auto;
  width: 96%;
  height:auto;
  background-color:#ffffff;
border: 0px solid #99ccff;
}

td {
    font-weight: normal;
    text-align: left;
    padding: 0 6% 0% 0;
    border: 0px solid #ffffff;
    width: 49%;
    hyphens: auto;
vertical-align: top;
height: auto;
}

td p {vertical-align: top;}

.table4 td {
    font-weight: normal;
    text-align: center;
    padding: 0 3% 0 0;
    border: 0px solid #ffffff;
    width: 24%;
    hyphens: auto;
vertical-align: top;
height: auto;
}


.table3 td {
    font-weight: normal;
    text-align: center;
    padding: 0 3% 0 0;
    border: 0px solid #99ccff;
    width: 33%;
    hyphens: auto;
vertical-align: top;
height: auto;
}

@media only screen and (max-width:60em) {
tr, th, td, .table4 td, .table3 td {
display: block;
width: 100%;	
}
}

/* 
###############################################################
boxen Startseite  #
###############################################################
*/


.boxStartseitemain {
max-width:1280px;
margin:0 auto;	
}

.boxStartseite {
   display: -webkit-flex;
   display: -ms-flex;
   display: flex;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   background-color: #333;
}


.container-grau1, .container-grau2, .container-grau3 {
   display: -webkit-flex; 
  display: -ms-flexbox; 
  display: flex;
   text-align:center;
  width: 33.33%;
  background-color: #ff6600;
  padding: 1em 0 1em 0;
  float:left;
  margin:0;
    }

.container-grau1 {background-color: #CA70A9;}
.container-grau2 {background-color: #75BCEC;}
.container-grau3 {background-color: #A1C374;}


.container-grau1:hover, .container-grau2:hover, .container-grau3:hover {
  opacity: 0.6;
  filter: alpha(opacity=60); /* For IE8 and earlier */
  transition: .6s ease;
}


.textStartseite {
  width: 90%;
  color: white;
  font-size: 100%;
  position: relative;
  text-align:center;
  margin: 0 auto;
  }

.bottomindex {
  display: inline-block;
  cursor:pointer;
  background-color: #fff;
  width:50%;
  height:auto;
  color: #000;
  margin: 1%;
  padding: 2%;
  text-align:center;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  opacity: 0.8;
}

.bottomindex a, .bottomindex p, .bottomindex h2 {
	color: #000;
  text-align:center;
}

.textStartseite p, .textStartseite h2{
	color: #fff;
  text-align:center;
}

.textStartseite h2 {
  padding: 1.5% 0 2% 0!important;
  margin:0!important;
}

.bottomindex:hover {
	background: #fff;
  transition: .6s ease;
	color: #fff;  
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;	
  opacity: 0.2;
  filter: alpha(opacity=20); /* For IE8 and earlier */
	}

.bottomindex:hover a {
	color: #333;
}

@media only screen and (max-width:70em) {
.container-grau1, .container-grau2, .container-grau3 {
	width: 50%;
  	font-size: 90%;
    }
}

@media only screen and (max-width:40em) {
.container-grau1, .container-grau2, .container-grau3 {
	width: 100%;
  	font-size: 100%;
    }
}

@media only screen and (max-width:35em) {
.container-grau1, .container-grau2, .container-grau3 {
  	font-size: 80%;
    }
}

/* 
###############################################################
Produktseiten #
###############################################################
*/


.prodbereichlinks {
  height: auto;
  width: 30%!important;
  margin: 0% 3% 1% 0;
  padding: 0;
  float:left;
  background-color: transparent;
  clear:both!important;
 }

.prodbereichrechts {
  height: auto;
  width: 60%!important;
  margin: 1% 3% 1% 0;
  padding: 0 1% 0 1%;
  background-color: transparent;
  float:right;
  clear:right!important;
  }

.prodbereichtabelle {
  height: auto;
  width: 100%!important;
  margin: 1% 0 1% 0;
  padding: 0 1% 0 1%;
  background-color: transparent;
  clear:right!important;
  }
  
.prodbereichkomplett {
  height: auto;
  width: 100%!important;
  margin: 1% 0 1% 0;
  padding: 0 0% 2% 0%!important;
  background-color: transparent;
  clear:right!important;
  }


.prodbereichlinks img {
  position: relative;
  height:auto;
  width: 100%!important;
   display: block;
   background-color: #fff;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-bottom: 1em;
  margin-right: 0.5em;
 transition: transform 1.8s;
 -moz-transition: transform 1.8s;
 -webkit-transition: transform 1.8s;
 -o-transition: transform 1.8s;
 -ms-transition: transform 1.8s;
}
  
.containerLang {
  clear:both;
  height: auto;
  max-width: 100%;
  margin: 0 0 0 0;
  padding: 0;
  background-color: transparent;
  }

@media only screen and (max-width:32em) {
.prodbereichlinks, .prodbereichrechts  {
	width: 100%!important;
    }
}


/* 
###############################################################
boxen Artikel  #
###############################################################
*/

.boxArtikel {
   display: -webkit-flex;
   display: -ms-flex;
   display: flex;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
  margin:0;
}


.container-Artikel1, .container-Artikel2, .container-Artikel3 {
   display: -webkit-flex; 
  display: -ms-flexbox; 
  display: flex;
   text-align:center;
  width: 33.10%;
  background-color: #ff6600;
  padding: 1em 0 1em 0;
  float:left;
  margin:0 1px 0 0;
    }

.container-Artikel1b, .container-Artikel2b, .container-Artikel3b, .container-Artikel4b, .container-Artikel5b {
   display: -webkit-flex; 
  display: -ms-flexbox; 
  display: flex;
   text-align:center;
  width: 19.5%;
  background-color: #ff6600;
  padding: 1em 0 1em 0;
  float:left;
  margin:0 1px 0 0;
    }


.container-Artikel1 {background-color: #003399; opacity: 0.9;}
.container-Artikel2 {background-color: #00387b; opacity: 0.8;}
.container-Artikel3 {background-color: #003399; opacity: 0.7;}
.container-Artikel4 {background-color: #00387b; opacity: 0.6;}
.container-Artikel5 {background-color: #003399; opacity: 0.5;}
.container-Artikel1b {background-color: #003399; opacity: 0.9;}
.container-Artikel2b {background-color: #00387b; opacity: 0.8;}
.container-Artikel3b {background-color: #003399; opacity: 0.7;}
.container-Artikel4b {background-color: #00387b; opacity: 0.6;}
.container-Artikel5b {background-color: #003399; opacity: 0.5;}


.container-Artikel1:hover, .container-Artikel2:hover, .container-Artikel3:hover, .container-Artikel1b:hover, .container-Artikel2b:hover, .container-Artikel3b:hover, .container-Artikel4b:hover, .container-Artikel5b:hover {
  opacity: 0.4;
  filter: alpha(opacity=60); /* For IE8 and earlier */
  transition: .6s ease;
}


.textArtikel {
  width: 90%;
  color: white;
  font-size: 100%;
  position: relative;
  text-align:center;
  margin: 0 auto;
  }

.textArtikel p, .textArtikel h2{
	color: #fff;
  text-align:center;
}

.textArtikel h2 {
  padding: 1.5% 0 2% 0!important;
  margin:0!important;
  font-size: 130%;
}

a.white:hover {
  color: #fff;
}

@media only screen and (max-width:1285px) {
.boxArtikel {
	margin: 1%;
    }
}

@media only screen and (max-width:70em) {
.textArtikel h2 {
  font-size: 110%;
  font-weight:normal;
}
}

@media only screen and (max-width:40em) {
.container-Artikel1, .container-Artikel2, .container-Artikel3 {
	width: 100%!important;
	margin: 1% 0 1% 0;
    }
.textArtikel p, .textArtikel h2 {
  text-align:center;
  font-size: 100%;
  font-weight:lighter!important;
  }

}


/*
######################################################### 
nach oben                                        ###
######################################################### 
*/

#links_unten {
  padding: 1em 0 0em 0;
  height:auto;
  border: 0px;
  width: 100%;
  margin:0;
  text-align:center;
  position:relative;
}

#mod-custom114.mod-custom.custom {
  position:relative;
  margin: 0 auto!important;
  padding: 0 0 0 0;
  height:auto;
  border: 0px;
max-width: 1280px;
  color: #333;
}

#mod-custom114.mod-custom.custom a {
  text-decoration:none;
}

#mod-custom114.mod-custom.custom img:hover  {
	opacity:0.5;
transition: all 500ms;-webkit-transition: all 500ms;-moz-transition: all 500ms;-o-transition: all 500ms;
}


@media only screen and (max-width:1280px) {
#mod-custom114.mod-custom.custom {
  padding: 0 0 0 1%;
}
}


/* 
###############################################################
Footer #
###############################################################
*/
#footer {
 	height:auto;
 	padding: 1% 1% 1% 1%;
 	color: #fff;
 	background-color: #3399ff;
    max-width: 100%;
    clear:both;
	-webkit-box-shadow: 0 0 10px #333;
	-moz-box-shadow: 0 0 10px #333;
	box-shadow: 0 0 10px #333;
}

.infooter a {
 	color: #fff;
}

.infooter a:hover {
 	color: #333;transition: all 500ms;-webkit-transition: all 500ms;-moz-transition: all 500ms;-o-transition: all 500ms;
}

.infooter  {
    padding: 0;
    margin: 0 auto;
  max-width: 1280px;
 	height:auto;
 	background-color: transparent;
}

.boxinfooter {
  max-width: 1280px;
    margin: 0 auto;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.textboxinfooter {
    width: 100%;
    position: relative;
    margin: 0 auto;
    padding: 0;
}

.textboxinfooter p {
    font-size: 90% !important;
    color: #fff !important;
}

.textboxinfooter p.bold {
    font-weight: bold;
    color: #fff !important;
}

.container-footer-kontakt, .container-footer-links, .container-footer-daten {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    text-align: left;
    background-color: transparent;
    padding: 0.5em 0 0.5em 0;
    float: left;
    margin: 0;
}

.container-footer-kontakt {
    width: 38%;
    margin: 0 0 0 0;
}

.container-footer-links {
    width: 30%;
}

.container-footer-daten {
    width: 28%;
}