/* ==========================================================================
   General
   ========================================================================== */
@media only screen and (min-width: 759px) and (max-width: 1180px){ .wrapper { width: 95%;}}
@media only screen and (max-width: 758px) { .wrapper{ width: 98%;}}

/* ==========================================================================
   PANELS
   ========================================================================== */
@media only screen and (max-width: 800px ){
    #header-panels{ padding: 0 10px; text-align: left; border: none; background: var(--blue-color);}
    #header-panels IMG { float: right; width: 100px; margin-top: 7px;}
    #header-panels A { font-size: 30px; color: #0a70af;}
    #left-panel {background-color: #FFFFFF;}
    #nav { margin: 0 0 15px; padding: 0;}
    #nav LI { display: block;}
    #nav LI A { display: block; font-size: 14px; color: #000; text-shadow: none; border-bottom: 1px solid #fff; line-height: 36px;}
    nav { display: none;}
    #close { display: inherit; text-align: right; font-size: 30px;}
}
@media only screen and (min-width: 801px){
    #page { padding: 0 !important;}
    #header-panels,#left-panel, #right-panel{ display: none; }
}
/* ==========================================================================
   MAIN
   ========================================================================== */
@media only screen and (max-width: 1600px ) {
    #boxVSL { top: 40px;}
    #boxVSL img { width: 250px;}
    #boxVSL h1 { font-size: 30px;}
    #boxVSL p { font-size: 22px;}
    #imgMama { right: 0; width: 450px;}
    #bannerHeader { height: 470px;}

    #cutie img { width: 15vw;}
    #cutie div { margin-left: 26vw;}
}
@media only screen and (max-width: 1200px ) {
    #imgMama { right: 0; width: 410px;}

    #cutie img { width: 15vw;}
    /*#cutie div { margin-left: 37vw; margin-top: 5vw;}*/

    #intestin { width: 500px;}
    .containerPhotos { flex-wrap: wrap;height: 100%;gap: 10px; }
    .containerPhotos img { height: 100%; }
} 
@media only screen and (max-width: 1192px ) {
    .cards { grid-template-columns: repeat(2,1fr); }
}
@media only screen and (max-width: 990px ) {
    .itemBox { flex-direction: column; }
    .active .itemText { width: 100%; }
    .itemImage { width: 100%; height: 400px; }
    .colorectalSection { padding: 40px; }

    .wrapperBox { flex-direction: column; }
    .leftBox { width: 100%; }
    .rightBox { width: 100%; }
    #faq > div.about.wrapper > div > div.rightBox > div:nth-child(1) { height: 300px; margin-top: 0; }
    #faq > div.about.wrapper > div > div.rightBox > div:nth-child(3) { height: 270px; }
}
@media only screen and (max-width: 960px ) {
    #boxVSL { top: 30px;}
    #boxVSL img { width: 200px; margin-bottom: 10px;}
    #boxVSL h1 { font-size: 25px;}
    #boxVSL p { font-size: 18px;}
    #imgMama { right: 0; width: 300px;}
    #bannerHeader { height: 310px;}

    #intestin { width: 90%; top: unset; right: unset; position: relative; }
    #tabelBacterii > table > tbody { width: 100%; }
    #administrare { width: 100%; }
    #administrare img { width: 60%; }
}
@media only screen and (max-width: 800px ) {
    #bannerHeader { height: 300px;}
    #imgMama { display: none;}

   /* header { background: url(../img/noise.png), radial-gradient(farthest-corner at 40px 40px, #fff 0%, #000 100%);
        background: url(../img/noise.png), -moz-radial-gradient(farthest-corner at 40px 40px, #fff 0%, #000 100%);
        background: url(../img/noise.png), -webkit-radial-gradient(farthest-corner at 40px 40px, #fff 0%, #000 100%);}*/
    /*#boxVSL h1 { color: #F8EC1A;}*/

    #cutie img { width: 24vw;}
    /*#cutie div { display: block; margin-left: 0;}*/
    #cutie h1, #cutie p { font-size: 26px;}

    #tabelBacterii table { margin-top: 0;}
    #tabelBacterii h3 img { width: 30px; margin-right: 10px;}

    #administrare { width: 60%;}
    #administrare h1 { font-size: 26px;}
    #continut { padding: 40px 0;}
    #continut img { width: 100%;}
    #materiale { margin-bottom: 40px;}
    #materiale h3 { font-size: 26px;}
    #materiale li { font-size: 18px;}
    .cards { grid-template-columns: repeat(1,1fr); gap: 30px; }
}
@media only screen and (max-width: 640px ) {
    #bannerHeader { height: 260px;}
    .colorectalSection { width: 96%; }

    #cutie { height: auto;}
    #cutie img { position: relative; width: 25vw;}
    #cutie div { margin: 0;}

    #tabelBacterii h3, #tabelBacterii p { font-size: 16px;}
    /*#tabelBacterii table td:first-child { width: 70%; padding-right: 0;}*/
    /*#tabelBacterii table td:last-child { width: 30%;}*/
    #legenda p { font-size: 12px;}
    #administrare { width: 100%;}
    /*#administrare p, #administrare img { width: 50%;}*/
    #intestin { height: 96vw;}
    #continut p { line-height: normal; margin-top: 20px;}
    #materiale div { width: 100%; margin-right: 0;}
    #materiale div:first-child { margin-bottom: 30px;}
}
@media only screen and (max-width: 590px ) {
    #selectLocalitati { flex-wrap: wrap; }
    .wrapperLinks { margin-left: 3vw; }
}
@media only screen and (max-width: 480px ) {
    #bannerHeader { height: 68vw;}
    #boxVSL { top: 45px; text-align: start;}
    #boxVSL img { width: 60%;}
    #boxVSL h1 { font-size: 5.5vw;}
    #boxVSL p { display: none;}

    #cutie img { top: -20px; width: 25vw; margin: 30px 0;}
    #cutie h1, #cutie p { font-size: 23px; line-height: normal;}
    #administrare { margin: 40px 0 0 0;}
    #administrare h1 { font-size: 23px;}
    #administrare p, #administrare img { width: 100%;}
    #intestin { position: relative; width: 90%; margin: 0 5%; height: auto;}
    #materiale h3 { font-size: 23px;}
    #materiale li { font-size: 16px;}
    #locatii h2 { left: 10px; top: 55px;}
    #cutie div { margin: auto;width: 100%;justify-content: center;align-items: center;display: flex;flex-direction: column;}
    #cutie img { top: -20px;width: 50vw;margin: 30px 0;left: 25%;}
    .colorectalSection { padding: 30px 15px; }
    .wrapperBox { gap: 0; }

}
@media only screen and (max-width: 400px ) {
    .card { height: 410px; }
    .paragraph img { width: 20px; }
}
/* ==========================================================================
   TERMENI + CONTACT
   ========================================================================== */
@media only screen and (max-width: 900px ) {
    #contact .QapTcha { margin-bottom: 20px;}
}
@media only screen and (max-width: 800px ) {
    .customHeader #bannerHeader { height: 13vw;}
    #termeni, #contact { margin-bottom: 40px;}
    #termeni h2, #contact h2 { font-size: 20px;}
}
@media only screen and (max-width: 640px ) {
    #contact form, #infoContact { width: 100%;}
    #infoContact { margin-top: 40px; text-align: center;}
}
/* ==========================================================================
   UNDE GASESc - LOCALITATI
   ========================================================================== */
@media only screen and (max-width: 960px ){
    #selectLocalitati h2 { margin: 0 15px 0 0; font-size: 24px;}
}
@media only screen and (max-width: 850px ){
    #selectLocalitati h2 { display: block; line-height: 24px; margin: 0 0 10px 0;}
}
@media only screen and (max-width: 480px ){
    #selectLocalitati select { width: 100%; margin-top: 10px;}
}
/* ==========================================================================
   FOOTER
   ========================================================================== */
@media only screen and (max-width: 960px ){
	#menuFooter li { margin-left: 7px;}
	#menuFooter li:first-of-type { margin-left: 0;}
}
@media only screen and (max-width: 800px ){
	#menuFooter img { float: none;}
	#menuFooter ul { float: none; margin-top: 30px;}
}
@media only screen and (max-width: 640px ){
	#menuFooter li { display: block; margin: 0; line-height: normal;}
}
@media only screen and (max-width: 480px ){
    #menuFooter img { width: 80px;}
}