/* JAF CSS */



/*********
Allgemein
*********/
.jaf_color-jaf { color: #d95017 !important; } /* derzeit Orange entsprechend CI */

.jaf_color-text  { color: #2e2e2e !important; } /* derzeit dunkles Grau;  */

/* Tabellen */
.jaf_table tr td, .jaf_table tr th {  padding-top:2px !important; padding-bottom:2px !important;} /* Zeilenhöhe verringern */
.jaf_table tr:nth-child(even) { background-color:#f0f0f0; } /* alternierende Hintergrundfarbe */

@media screen and (min-width: 768px) {
    .jaf_table-center2 tr td:nth-child(2), 
          .jaf_table-center2 tr th:nth-child(2), 
          .jaf_table-center3 tr td:nth-child(3), 
          .jaf_table-center3 tr th:nth-child(3), 
          .jaf_table-center4 tr td:nth-child(4),
          .jaf_table-center4 tr th:nth-child(4),
          .jaf_table-center5 tr td:nth-child(5),
          .jaf_table-center5 tr th:nth-child(5),
          .jaf_table-center6 tr td:nth-child(6),
          .jaf_table-center6 tr th:nth-child(6) { 
                         text-align:center;
    }
}

.jaf_figcaption figcaption { text-align:center; color:#666666; }


 /* grünes Häkchen */
.jaf_check { 
          background: url(https://www.frischeis.at/pim/homepage/checkmark_green.png);
          background-repeat:no-repeat; 
          background-position:center;
}
/*.jaf_check::before { content: "";  background: url(https://www.frischeis.at/pim/homepage/checkmark_green.png) no-repeat; }*/


/* offset für eigene Anker-Links - bisschen versetzt von fixierter Inline-Navigation */
.jaf_anchor-offset::before {
  display: block; 
  content: " "; 
  margin-top: -100px; 
  height: 100px; 
  visibility: hidden;
}



/* Element soll nur ab screen-width 768px floaten */
@media screen and (min-width: 768px) {
	.jaf_float-right-sm {
		float:right;
	}
	.jaf_float-left-sm {
		float:left;
	}
}

/* Aufzählungszeichen Dreieck */
.jaf_triangle::before {
      content: "";
      display: inline-block;
      border-color: transparent transparent #d95017;
      border-width: 0 4px 7px;
      border-style: solid;
      vertical-align: .1em;
      margin-right: .5em;
}


/**********************************
Info-Bereich mit oranger Außenlinie
**********************************/
.jaf_info-box {
        margin-top:30px; 
        border:1px dotted #d24600;
        background: #f7f7f7;
        background: -moz-linear-gradient(top, #f7f7f7 0%, #d1d1d1 100%); 
        background: -webkit-linear-gradient(top, #f7f7f7 0%,#d1d1d1 100%); 
        background: linear-gradient(to bottom, #f7f7f7 0%,#d1d1d1 100%); 
        padding:16px 16px 8px 16px;		
}

.jaf_shopping-cart a[href*="shop"] {
		background: transparent url(/pim/homepage/shopping_cart.png) center right no-repeat;
		background-size:14px;
		padding-right: 28px;
}



/*******************
Tabelle Akustikplatten
********************/
/*.jaf_akustikplatten-tabelle tbody td:last-child { min-width:180px; }*/
/*.jaf_akustikplatten-tabelle tbody tr:nth-child(odd) {background-color: lightgrey;}*/
.jaf_akustikplatten-tabelle img { max-width:120px !important; }

/* Gilt nur für Screens ab width 768px */
@media screen and (min-width:768px) {
     .jaf_akustikplatten-tabelle tbody tr { height:80px; }
    .jaf_akustikplatten-tabelle th:nth-child(5),  .jaf_akustikplatten-tabelle td:nth-child(5), .jaf_akustikplatten-tabelle td:nth-child(6), .jaf_akustikplatten-tabelle th:nth-child(6)  { text-align:center;   
     }
}


/* Gilt nur für Screens unter width 768px */
@media screen and (max-width: 767px) {
    .jaf_akustikplatten-tabelle tr,  .jaf_akustikplatten-tabelle td { display: block; } 
    .jaf_akustikplatten-tabelle td { border: none !important;  }
    .jaf_akustikplatten-tabelle td::before { 
                 content: attr(data-title) ":"; 
                 padding-right:8px;
                 font-weight: bold;
      }
    .jaf_akustikplatten-tabelle td:first-child { font-size:larger; } /* Erste Zeile größere Schriftart */
    .jaf_akustikplatten-tabelle tr { border-bottom: 3px solid #dfe1e6; padding-top:2em; padding-bottom:2em;}
    .jaf_akustikplatten-tabelle td:not(:first-child) { padding-left:2em !important; } /* Alle Zeilen außer erste Zeile sollen noch weiter eingerückt werden */
    .jaf_akustikplatten-tabelle td:first-child {padding-left:0; }
    .jaf_akustikplatten-tabelle thead {display:none;}
    .jaf_akustikplatten-tabelle tbody tr {background: none !important; }
    .jaf_akustikplatten-tabelle img { max-width:40px; }
}

.jaf_akustikplatten-square { width: 50px; height: 50px; border:2px solid #999; margin:0 auto; } 
.jaf_akustikplatten-rectangle  { width: 90px; height: 50px; border:2px solid #999; margin:0 auto; }
.jaf_akustikplatten-rectangle2  { width: 50px; height: 90px; border:2px solid #999; margin:0 auto; }
.jaf_akustikplatten-circle  { width: 60px; height: 60px; border:2px solid #999;  -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; margin:0 auto; } 
.jaf_akustikplatten-baffle { margin-top: 30px; width:90px; height: 40px; border: 2px solid #999; border-top: 0px; margin:0 auto;}
.jaf_akustikplatten-baffle::before {  content: "";  display:block;  width: 88px;  height: 14px;  border-bottom: 2px solid #999; }


/***********************
   Tipp Box mit Gluehbirne
************************/

.jaf_tip-box {
	background-color:#f0f0f0; 
	border-top:2px solid #696969; 
	border-bottom: 2px solid #696969; 
	line-height:1.5; 
	padding-top:10px;
	padding-right:20px;
}

.jaf_tip-box::before {
  content:'';
  display:block;
  background-image: url("https://www.frischeis.at/pim/homepage/bulb_orange.png");
  background-repeat: no-repeat;
  background-size: 100px;
  background-position: 0 5px;
  height:120px;
  width:120px;
  float:left;
}

.jaf_tip-box p {
	text-align:justify;
}



/* ***************
   Info Ribbon Box
*****************/

/* Maintext */
.jaf_infobox-ribbon > p:first-child { margin-top:20px; }
.jaf_infobox-ribbon > ul {overflow:visible !important;}

/* Die Info-Box mit Ribbon */
.jaf_infobox-ribbon > div {font-size:13px;}  

.jaf_infobox-ribbon > div {
    /*width: 320px;*/
    margin: 10px 10px 10px 40px;
    padding: 0 10px 0;
    position: relative;
    color: #444;
    background: #fff;
    border: 1px solid #d2d2d2;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}


.jaf_infobox-ribbon > div h4 {
    display: block;
    font-size: 16px;
    font-weight: 600;
    /*height: 30px;*/
    line-height: 1.3;
    /*width: 330px;*/
    margin: 0;
    padding: 5px 10px;
    position: relative;
    left: -16px;
    top: 8px;
    color: #fff;
    /*text-shadow: 0 1px 1px #111;*/
    /*border-top: 1px solid #363636;*/
	border-top: 1px solid #f88027;
	/*border-bottom: 1px solid #202020;*/
	border-bottom: 1px solid #d84c14;
    /*background: #333;*/
	background: #d95017;
    /*background: linear-gradient(top, #383838 0%, #262626 100%);*/
	background: linear-gradient(to bottom,#f88027 0,#d84c14 100%);
    border-radius: 2px 2px 0 0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.jaf_infobox-ribbon > div h4::before,
.jaf_infobox-ribbon > div h4::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    bottom: -11px;
    z-index: -10;
    border: 5px solid;
    /*border-color: #242424 transparent transparent transparent;   */
	border-color: #d84c14 transparent transparent transparent;
}
.jaf_infobox-ribbon > div h4::before {left: 0;}
.jaf_infobox-ribbon > div h4::after {right: 0;}
.jaf_infobox-ribbon > div p, .jaf_infobox-ribbon  > div ul  {margin-top:12px;}

@media screen and (min-width: 767px) {
	.jaf_infobox-ribbon > div { width:320px; }
	.jaf_infobox-ribbon > div h4 { height: 30px; width: 330px; }
}


@media screen and (min-width: 992px) {
	/*.jaf_infobox-ribbon  > p, .jaf_infobox-ribbon > ul {float:left; max-width:460px; width:100%;;}*/ /* Maintext links */
	.jaf_infobox-ribbon > p { padding-top:10px;}
	.jaf_infobox-ribbon > div {float:right;} /* Info-Box mit Ribbon */
        .jaf_infobox-ribbon::after { content: ""; display: block; clear: both; }
}




/* *****************************
Terrasse - Dauerhaftigkeitstabelle 
*******************************/

.jaf_dauerhaftigkeit-tabelle  span {
	background-color:#bbb; 
	padding:2px 6px; 
	color:#bbb;
}

.jaf_dauerhaftigkeit-tabelle caption {
       font-variant:small-caps; 
       font-size:large; 
       padding:10px;  
       font-weight:bold;
}
.jaf_dauerhaftigkeit-tabelle thead {
        background-color:#888;
        color: #fff;
}

.jaf_dauerhaftigkeit-tabelle .jaf_klasse-1 {
	background-color:rgba(210,70,0,1.0); color: #fff;
}

.jaf_dauerhaftigkeit-tabelle .jaf_klasse-2 {
	background-color:rgba(210,70,0,0.8); color: #fff;
}
	
.jaf_dauerhaftigkeit-tabelle .jaf_klasse-3 {
	background-color:rgba(210,70,0,0.6); color: #fff;
}

.wysiwyg table.jaf_dauerhaftigkeit-tabelle > tbody > tr > td {
	vertical-align:middle;
}
	
.jaf_dauerhaftigkeit-tabelle > tbody > tr > td:nth-child(2) {
	width:60px
}


/* ***********************************
Terrasse - Aufbau und Verlegebeispiele 
**************************************/


.wysiwyg table.jaf_materialliste {
	padding-top:16px; 
	/*padding-bottom:16px; */
	float:right;
	margin-bottom: 0px;
}


.jaf_materialliste div { /* Nummerierung erste Spalte */
	display:inline-block; 
	width:20px; 
	height:20px; 
	line-height:20px; 
	background-color:#d24600; 
	color:#fff; 
	border-radius:50%; 
	text-align: center; 
	vertical-align: middle; 
	font-size:smaller; 
	margin-right:6px;
}

 .wysiwyg table.jaf_materialliste > tbody > tr > td {
	padding: 6px 2px;
 }
 
 @media screen and (min-width: 768px) {
	.wysiwyg table.jaf_materialliste {
		max-width:48%;
	}
	
	div.jaf_terrassenaufbau {
		float:left; 
		max-width:46%;
	}
	
	 .wysiwyg table.jaf_materialliste > tbody > tr > td {
		padding: 6px 0px;
	 }
}

/*****************************************
Zitate inmitten Contentseiten
in Kombination mit Klasse .testimonial__content
******************************************/
/* Element soll nur ab screen-width 768px floaten */

.jaf_zitat {margin: 0 auto; max-width:500px; }
.jaf_zitat  p { text-align:center;}
.jaf_zitat p::before {margin: 0 auto 12px auto;}
.jaf_zitat p:first-child { font-size:22px; }

.jaf_zitat::before { 
   content:"\E015"; 
   left:-20px !important; 
}

.jaf_zitat::after { 
   content: "\E014"; 
   bottom:0px !important; 
   right:-20px !important; 
}

.jaf_zitat::before, .jaf_zitat::after {
   position: absolute;
   font-size:18px !important;
   font-family:iconfont; 
   color: #d95017;
}

@media screen and (max-width: 600px) {
   .jaf_zitat {max-width:320px; }
}



#bee {
  animation-name: bee;
  animation-duration: 10s;
  animation-direction: normal;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}



@keyframes bee {
  0% { transform: translate(0px,0px) rotate(75deg); }
  3% { transform: translate(65px,10px) rotate(45deg); }
  6% { transform: translate(130px, 5px) rotate(35deg); }
  9% { transform: translate(195px, 0px) rotate(50deg); }
  12% { transform: translate(260px, 10px) rotate(50deg);  }
  15% { transform: translate(325px, 0px) rotate(40deg); }
  18% { transform: translate(390px, -5px) rotate(50deg); }
  21% { transform: translate(455px, 0px) rotate(50deg); }
  24% { transform: translate(525px, 5px) rotate(55deg); }
  27% { transform: translate(600px, 30px) rotate(40deg); }
  30% { transform: translate(685px, 10px) rotate(15deg); opacity:1 }
  31%  { transform: translate(685px, 10px) rotate(15deg); opacity:0}
  100% { transform: translate(685px, 10px) rotate(15deg); opacity:0}
}