.drevocal-marina {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
}

.drevocal-marina *,
.drevocal-marina *::before,
.drevocal-marina *::after {
  box-sizing: border-box;
}

.drevocal-marina .magn {
  margin: 32px 0 18px;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.2;
  font-weight: 700;
  color: #222;
}

.drevocal-marina .mg {
  margin: 0 0 18px;
  font-size: clamp(16px, 1.8vw, 18px);
  line-height: 1.65;
  color: #333;
}

.drevocal-marina .mg strong {
  font-weight: 700;
}

.marina-image {
  width: 100%;
  max-width: 800px;
  margin: 24px auto 28px;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;
}

#drevocal-marina-popis {
  background-image: url("../images/marina-popis1.jpg");
  aspect-ratio: 800 / 553;
}

#drevocal-marina-foam {
  background-image: url("../images/marina-panterfoam-popis.jpg");
  aspect-ratio: 800 / 200;
}

@media (max-width: 768px) {
  .drevocal-marina {
    padding: 0 14px;
  }

  .drevocal-marina .magn {
    margin: 26px 0 14px;
  }

  .drevocal-marina .mg {
    margin-bottom: 16px;
  }

  .marina-image {
    margin: 20px auto 24px;
  }
}

@media (max-width: 480px) {
  .drevocal-marina {
    padding: 0 12px;
  }

  .drevocal-marina .magn {
    font-size: 23px;
  }

  .drevocal-marina .mg {
    font-size: 16px;
    line-height: 1.6;
  }
}
#potahlevandule {padding: 2px;
        
       }


#levanduleobr {float: left;
           background: transparent top left url(../images/css_drevpoth_levandule.jpg) no-repeat;
           background-size: 150px;
           height: 150px;
           width: 150px;
           margin-right: 10px;
}


#levandule {
float: left;
font-size: 15px;
           padding: 0px;
           margin: 0px;}


#medicott {padding: 2px;
       
       }

#medicottobr {float: left;
 background: transparent top left url(../images/css_drevopoth_medicott.jpg) no-repeat;
           background-size: 150px;
           height: 150px;
           width: 150px;
           margin-right: 10px;          
}





#medicott h3 {float: left;
font-size: 15px;
           padding: 0px;
           margin: 0px;}

#lyocell {padding: 2px;

       }

#lyocell h3 {float: left;
           font-size: 15px;
           padding: 0px;
           margin: 0px;}


#lyocellobr {float: left;
           background: transparent top left url(../images/css_drevpoth_lyocell.jpg) no-repeat;
           background-size: 150px;
           height: 150px;
           width: 150px;
           margin-right: 10px;          
}
#silverguard {padding: 2px;
       
       }

#silverguard h3  {float: left;
           font-size: 15px;
           padding: 0px;
           margin: 0px;}
#silverguardobr {float: left;
          background: transparent top left url(../images/css_drevpoth_silverguard.jpg) no-repeat;
           background-size: 150px;
           height: 150px;
           width: 150px;
           margin-right: 10px;          
}
#aloevera {padding: 2px;
        
       }


#aloevera h3 {float: left;
           font-size: 15px;
           padding: 0px;
           margin: 0px;}
#aloeobr {float: left;
          background: transparent top left url(../images/css_drevpothl_alloevera.jpg) no-repeat;
           background-size: 150px;
           height: 150px;
           width: 150px;
           margin-right: 10px;          
}
#potahupletdrev {padding: 2px;}

#potahupletdrev h3 {float: left;
           font-size: 15px;
		padding: 0px;
		margin: 0px; }

#upletobrdrev {background: transparent url(../images/css_drevocall_uplett.jpg) top left no-repeat;
float: left;
background-size: 150px;
margin-right: 10px;
width: 150px;
height: 150px;
}
#zaruka_3 {
        background: transparent url(../images/drevocal_zaruka_3.jpg) top left no-repeat;
        padding: 0px 0px 0px 0px;
        height: 100px;
        width: 100px;
        float: left;
        margin: 2px;
       }
#zony_7 {
        background: transparent url(../images/drevocal_zony_7.jpg) top left no-repeat;
        padding: 0px 0px 0px 0px;
        height: 100px;
        width: 100px;
        float: left;
        margin: 2px;
       }
#nosnost_130 {
        background: transparent url(../images/drevocal_nosnost_130.jpg) top left no-repeat;
        padding: 0px 0px 0px 0px;
        height: 100px;
        width: 100px;
        float: left;
        margin: 2px;
       }
#potah_zip {
        background: transparent url(../images/drevocal_snimatelny_potah.jpg) top left no-repeat;
        padding: 0px 0px 0px 0px;
        height: 100px;
        width: 100px;
        float: left;
        margin: 2px;
       }
#pratelnost_60 {
        background: transparent url(../images/drevocal_pratelnost_60.jpg) top left no-repeat;
        padding: 0px 0px 0px 0px;
        height: 100px;
        width: 100px;
        float: left;
        margin: 2px;
       }
#partner_matrac {
        background: transparent url(../images/drevocal_partnerska_matrace.jpg) top left no-repeat;
        padding: 0px 0px 0px 0px;
        height: 100px;
        width: 100px;
        float: left;
        margin: 2px;
       }
#panterfoam_dervocal {
        background: transparent url(../images/drevocal_panterfoam.jpg) top left no-repeat;
        padding: 0px 0px 0px 0px;
        height: 100px;
        width: 100px;
        float: left;
        margin: 2px;
       }
#medifoam_dervocal {
        background: transparent url(../images/drevocal_medifoam.jpg) top left no-repeat;
        padding: 0px 0px 0px 0px;
        height: 100px;
        width: 100px;
        float: left;
        margin: 2px;
       }
#ecolepidlo_dervocal {
        background: transparent url(../images/drevocal_eco_lepeni.jpg) top left no-repeat;
        padding: 0px 0px 0px 0px;
        height: 100px;
        width: 100px;
        float: left;
        margin: 2px;
       }
#tvrdost_2_drevocal {
        background: transparent url(../images/drevocal_tvrdost_2_new.jpg) top left no-repeat;
        padding: 0px 0px 0px 0px;
        height: 100px;
        width: 100px;
        float: left;
        margin: 2px;
       }
#tvrdost_3_drevocal {
        background: transparent url(../images/drevocal_tvrdost_3_new.jpg) top left no-repeat;
        padding: 0px 0px 0px 0px;
        height: 100px;
        width: 100px;
        float: left;
        margin: 2px;
       }
#am_drevocal {
        background: transparent url(../images/antibakterial_drevocal_atribut.jpg) top left no-repeat;
        padding: 0px 0px 0px 0px;
        height: 100px;
        width: 100px;
        float: left;
        margin: 2px;
       }
#nau_drevocal {
        background: transparent url(../images/panter_nautic_drevocal_at.jpg) top left no-repeat;
        padding: 0px 0px 0px 0px;
        height: 100px;
        width: 100px;
        float: left;
        margin: 2px;
       }
#sleep {padding: 2px;
        
       }

#sleep h3 {float: left;
           font-size: 15px;
           padding: 0px;
           margin: 0px;}
#slobr {float: left;
          background: transparent top left url(../images/css_drevpothl_sleep_uplet.jpg) no-repeat;
           background-size: 150px;
           height: 150px;
           width: 150px;
           margin-right: 10px;          
}
#stone {padding:2px;
        
       }

#stone h3 {float: left;
           font-size: 15px;
           padding: 0px;
           margin: 0px;}
#stoneobr {float: left;
          background: transparent top left url(../images/css_drevocal_stone.jpg) no-repeat;
           background-size: 150px;
           height: 150px;
           width: 150px;
           margin-right: 10px;          
}
#potahlevandule {padding: 2px;
        
       }


#levanduleobr {float: left;
           background: transparent top left url(../images/css_drevpoth_levandule.jpg) no-repeat;
           background-size: 150px;
           height: 150px;
           width: 150px;
           margin-right: 10px;
}


#levandule {
float: left;
font-size: 15px;
           padding: 0px;
           margin: 0px;}

#medicott {padding: 2px;
       
       }

#medicottobr {float: left;
 background: transparent top left url(../images/css_drevopoth_medicott.jpg) no-repeat;
           background-size: 150px;
           height: 150px;
           width: 150px;
           margin-right: 10px;          
}





#medicott h3 {float: left;
font-size: 15px;
           padding: 0px;
           margin: 0px;}
#lyocell {padding: 2px;

       }

#lyocell h3 {float: left;
           font-size: 15px;
           padding: 0px;
           margin: 0px;}


#lyocellobr {float: left;
           background: transparent top left url(../images/css_drevpoth_lyocell.jpg) no-repeat;
           background-size: 150px;
           height: 150px;
           width: 150px;
           margin-right: 10px;          
}#silverguard {padding: 2px;
       
       }

#silverguard h3  {float: left;
           font-size: 15px;
           padding: 0px;
           margin: 0px;}
#silverguardobr {float: left;
          background: transparent top left url(../images/css_drevpoth_silverguard.jpg) no-repeat;
           background-size: 150px;
           height: 150px;
           width: 150px;
           margin-right: 10px;          
}#aloevera {padding: 2px;
        
       }


#aloevera h3 {float: left;
           font-size: 15px;
           padding: 0px;
           margin: 0px;}
#aloeobr {float: left;
          background: transparent top left url(../images/css_drevpothl_alloevera.jpg) no-repeat;
           background-size: 150px;
           height: 150px;
           width: 150px;
           margin-right: 10px;          
}#potahupletdrev {padding: 2px;}

#potahupletdrev h3 {float: left;
           font-size: 15px;
		padding: 0px;
		margin: 0px; }

#upletobrdrev {background: transparent url(../images/css_drevocall_uplett.jpg) top left no-repeat;
float: left;
background-size: 150px;
margin-right: 10px;
width: 150px;
height: 150px;
}#zaruka_3 {
        background: transparent url(../images/drevocal_zaruka_3.jpg) top left no-repeat;
        padding: 0px 0px 0px 0px;
        height: 100px;
        width: 100px;
        float: left;
        margin: 2px;
       }#zony_7 {
        background: transparent url(../images/drevocal_zony_7.jpg) top left no-repeat;
        padding: 0px 0px 0px 0px;
        height: 100px;
        width: 100px;
        float: left;
        margin: 2px;
       }#nosnost_130 {
        background: transparent url(../images/drevocal_nosnost_130.jpg) top left no-repeat;
        padding: 0px 0px 0px 0px;
        height: 100px;
        width: 100px;
        float: left;
        margin: 2px;
       }#potah_zip {
        background: transparent url(../images/drevocal_snimatelny_potah.jpg) top left no-repeat;
        padding: 0px 0px 0px 0px;
        height: 100px;
        width: 100px;
        float: left;
        margin: 2px;
       }#pratelnost_60 {
        background: transparent url(../images/drevocal_pratelnost_60.jpg) top left no-repeat;
        padding: 0px 0px 0px 0px;
        height: 100px;
        width: 100px;
        float: left;
        margin: 2px;
       }#partner_matrac {
        background: transparent url(../images/drevocal_partnerska_matrace.jpg) top left no-repeat;
        padding: 0px 0px 0px 0px;
        height: 100px;
        width: 100px;
        float: left;
        margin: 2px;
       }#panterfoam_dervocal {
        background: transparent url(../images/drevocal_panterfoam.jpg) top left no-repeat;
        padding: 0px 0px 0px 0px;
        height: 100px;
        width: 100px;
        float: left;
        margin: 2px;
       }#medifoam_dervocal {
        background: transparent url(../images/drevocal_medifoam.jpg) top left no-repeat;
        padding: 0px 0px 0px 0px;
        height: 100px;
        width: 100px;
        float: left;
        margin: 2px;
       }#ecolepidlo_dervocal {
        background: transparent url(../images/drevocal_eco_lepeni.jpg) top left no-repeat;
        padding: 0px 0px 0px 0px;
        height: 100px;
        width: 100px;
        float: left;
        margin: 2px;
       }#tvrdost_2_drevocal {
        background: transparent url(../images/drevocal_tvrdost_2_new.jpg) top left no-repeat;
        padding: 0px 0px 0px 0px;
        height: 100px;
        width: 100px;
        float: left;
        margin: 2px;
       }#tvrdost_3_drevocal {
        background: transparent url(../images/drevocal_tvrdost_3_new.jpg) top left no-repeat;
        padding: 0px 0px 0px 0px;
        height: 100px;
        width: 100px;
        float: left;
        margin: 2px;
       }#am_drevocal {
        background: transparent url(../images/antibakterial_drevocal_atribut.jpg) top left no-repeat;
        padding: 0px 0px 0px 0px;
        height: 100px;
        width: 100px;
        float: left;
        margin: 2px;
       }#nau_drevocal {
        background: transparent url(../images/panter_nautic_drevocal_at.jpg) top left no-repeat;
        padding: 0px 0px 0px 0px;
        height: 100px;
        width: 100px;
        float: left;
        margin: 2px;
       }#sleep {padding: 2px;
        
       }

#sleep h3 {float: left;
           font-size: 15px;
           padding: 0px;
           margin: 0px;}
#slobr {float: left;
          background: transparent top left url(../images/css_drevpothl_sleep_uplet.jpg) no-repeat;
           background-size: 150px;
           height: 150px;
           width: 150px;
           margin-right: 10px;          
}#stone {padding:2px;
        
       }

#stone h3 {float: left;
           font-size: 15px;
           padding: 0px;
           margin: 0px;}
#stoneobr {float: left;
          background: transparent top left url(../images/css_drevocal_stone.jpg) no-repeat;
           background-size: 150px;
           height: 150px;
           width: 150px;
           margin-right: 10px;          
}
#logo_drevocalframe {margin-left: auto;
margin-right: auto;
width: 500px;
max-width: 100%;
}
#logo_drevocalobr {
        background: transparent url(../images/logo_drevocal.png) bottom center no-repeat;
        background-size: contain;
        padding: 50% 0px 0px 0px;
        height: 1px;
		}

/* CSS PRO GALERII NA KLIKNUTÍ */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* The actual popup (appears on top) */
.popup .popuptext {
  visibility: hidden;
  width: auto;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s
}

.popup .hidden {
  visibility: hidden;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s
}