@media (max-width : 1100px){
    /*body {background-color: aquamarine}*/
    #represmsg {font-size: 1.1vw}
    #logo-container.header-h, #bkgrdtopmenu.header-h, #m2topmenu.mtopmen {height: 43px; max-height: 43px; }
    #logo-container.header-h,#logo-main.pic-c {max-width: 140px; width: 140px; }    
    .slidetext {padding: 0px 12px; bottom: 5px;}
    #square-container.logo-sq {margin-left: 20px; width: 80px; height: 43px; padding: 9px 20px 0px 0px; }
    #square.pic-c {min-width: 27px; width: 27px; }
    .philomess {line-height: 1.5; font-size: 1.2em;}
    
    #PageDiv {margin-top: 43px}
    #PageDivContact {margin-top: 43px}
    #PageDivDatenschutz {margin-top: 43px}
    #PageDivImp {margin-top: 43px}
    #textspecs ul.specs {color: blue; padding-left: 25px}
    
    ul.topnav li a.active,ul.topnav li.active {min-height: 100%}
    ul.topnav li {display: none;}
    ul.topnav li {float: right;}
    ul.topnav li a {padding: 9px 20px; }
    ul.topnav li a.hreficon {font-size: 1.5em}
    ul.topnav li.icon {float: right; display: inline-block; }
    ul.topnav.responsive {position: relative; z-index: 90; width: 200px}
    ul.topnav.responsive li {float: none; display: inline; }
    ul.topnav.responsive li a {display: block; text-align: right; background-color: rgba(0,0,0,0.8); font-size: 1em; padding-right: 13px; min-height: 43px}
    ul.topnav.responsive li.dropmenu {display: none; }
    ul.topnav.responsive li.icon {position: absolute; left: 0; top: 0; height: 43px; font-size: 1.4em }
    ul.topnav li a:hover:not(.active) {min-height: 43px;}

    .w3-container {width: 100%;padding: 0px 8px; float: none; margin: 0px }
    #fb-container {display: none}   
    #menu-container.m-container {margin-right: 0}
    
    #sidebox-container {display: none}
    #facebooksm-c.pic-c {margin-top: 10px; margin-bottom: 10px; width: 25px; max-width: 100%; overflow: hidden }
    
    .w3-section { margin-top: 11px!important; margin-bottom: 11px!important;}
    
        
    .hoverboard-specs-c {width:100%}
    .hoverboard-price {margin-top: 10px; margin-bottom: 10px;}
    .caroussel-main-container, .caroussel-info-container {position: relative;width: 100%; margin: 0; float: none}
    .prdinfo-descr {display: none}
    
    .slimgvp, .slimgvpprom, .slimginfo {font-size: inherit}
    
}

@media (max-width : 1024px){
    /*body {background-color: bisque}*/
    .p1mbox-c {width: 47%; margin: 1.2%}
    .insptermin-txt {line-height: 2.8vw; font-size: 1.5vw;}
    #p1textvl {padding: 7px; line-height: 2.25vw; font-size: 1.5vw;}
    #p1textin1.p1text, #p1textin2.p1text {line-height: 2.25vw; font-size: 1.5vw;}    
    /*.philomess {line-height: 2.1vw; font-size: 1.4vw;}*/
    .prdboxc {width: 50%}
    .prdbrand {left: -10.15%;}
    #p1sboxin1-c.p1sbox-c, #p1sboxin2-c.p1sbox-c, #p1sboxin3-c.p1sbox-c, #p1sboxin4-c.p1sbox-c {width: 84%; padding: 0 0 0 10px}
    #p1sboxverleih-c.p1sbox-c {width: 84%; padding: 0 10px 0 10px}
    .p1box_wrapper {margin: 0% 1%; padding: 0 2%;}
	.mainbody {padding-left: 0}
    #slidesdot {display: none}
    #inpmodelfilter input {margin: 4px;}
    #filterboxes {width: 85%; padding: 8px;}
	#closebtn.posclosebtn {top:8px;right:10%;} 
    #showfilter, #resetfilter {width:50px!important}
    #resetfilter {top: 42%; color:whitesmoke}
    
    #slides #slimg1 {float: none; width: 100%; margin: 0}
    #slides #slidetext {float: none; width: 96%; margin: 5%}
    #slidetext table td {padding: 1vw; letter-spacing: 0.08vw}
    #slidetext table td img {width:  70%}
    #slidetext table {margin: auto}
	#sale-container [id^='Box-c-'].prdboxc {width: 50%; z-index:0; float:left; padding:5px }
    .typewriter {
    font-size: 1.3em;
    letter-spacing: .04em; /* Adjust as needed */
    line-height: 1.4;
}

@media (max-width : 1000px){
    /*body {background-color: beige; font-size: 14px}*/
    #inforent {letter-spacing: 0}
    ul.topnav.responsive {position: relative; z-index: 90; width: 140px}
    #p1imgbox-pa.imgn-c {margin-bottom:15px; max-width: 95%;}
    .circle1-o {height: 120px; width: 120px;}
    .circle1-i {padding: 53px 0px 0px 0px; margin: -23px; font-size: 0.85em}
    .prdbrand {left: -16.15%;}
    h1 {padding: 5px; margin: 5px;}
    .servicemsg {margin: 15px 7%;}
    #slidespecs.text {font-size: 80%}
    #inpmodelfilter input {margin: 1px;}
    #resetfilter {top: 46%;}
    #showfilter, #resetfilter {width:40px!important}
	#slidetext table td {font-size: 0.8em}
    #infobf, #infobf2 {font-size:12px}
    .viewname {display: none}
    
    .typewriter {
    font-size: 0.9em;
    letter-spacing: .09em; /* Adjust as needed */
    line-height: 1.6;
    }
    
    /*.img_wrapperm {width: 49%;  padding: 8px 4px;}*/
}

@media (max-width : 750px){
    /*body {background-color: red; font-size: 12px}*/
    .circle1-o {height: 100px; width: 100px; font-size: 0.75em}
    .circle1-i {height: 100px; width: 100px; padding: 21px 0px 0px 0px; margin: 0; font-size: 0.85em}
    .imgpartner {width: calc(92%/6);}
    .prdbrand {left: -12.15%;}
    .p1mbox-c {margin: 0}
    .fillermargin {margin-top:15px}
    .p1mbox-c {width: 49%; margin: 0%}
    #img-pa .imgp1 {height:263px}
    h1 {padding: 2px; margin: 2px;}
	.p1boxdescr_c {margin-bottom: 10px;}
	.philomess {line-height: 1.4;font-size: 1em;}
    #slidespecs {display: none}
    #slides section {width: 47%;}
    .slimgvp, .slimgvpprom, .slimginfo {font-size: 0.9em}
	/*#HeaderOffer {font-size: 1.4em;}*/
	#FooterOffer {font-size: 0.5em;}
    .covidnewscircle {left:15%; height: 370px; width: 70%;}
    .imgnews {width: 50%; margin: 0px 25% ; box-shadow: 5px 10px 18px rgba(0, 0, 0, 0.8);}
    
    .typewriter {
    font-size: 0.5em;
    letter-spacing: .06em; /* Adjust as needed */
    line-height: 1.4;
    }
    
    .img_wrapperm {width: 32%;  padding: 8px 4px;}

}

@media (max-width : 650px){
    .slimgvp, .slimgvpprom, .slimginfo {font-size: 0.9em}
    .slimgvpprom {top:10px}

}
    
@media (max-width : 450px){
    /*body {background-color: green; font-size: 12px}*/
    #rescontainer, #resconfirmed {width: 23rem}
    .custadr{width: 80%}
    #rentcalendar-container, #rescalendar-container {width: 79%!important}
    .mybtn {width: calc(92% / 2)}
    .custlast, .custfirst {width: 79%}
    .custfirst {margin-left: 50px!important}
    #p1sboxin1-c.p1sbox-c, #p1sboxin2-c.p1sbox-c, #p1sboxin3-c.p1sbox-c, #p1sboxin4-c.p1sbox-c {width: 94%;}
    .circle1-o {display: none}
    .slidetext {top:5px; color: black}
    #p1sboxpa-c {width: 90%;}
	.philomess {line-height: 1.4;font-size: 1em;}
    .imgpartner {width: calc(84%/3);}
    .servicepricetxt {font-size: 1.8em}
	#img-pa .imgp1 {height:255px}
    #resetfilter {top: 74%;}
    #showfilter, #resetfilter {width:40px!important; font-size: 3.5vw; padding:6px 2px}
    #showfilter {top:6px}
    #filterboxes {width: 95%; margin: 0px 2px 10px;}
    #modmultichoice {top: 6px; font-size: 2.2vw;}
    #closebtn.posclosebtn {position:absolute; top: 4px; right:45px;} 
	#showfilter i.myfilterimg, #resetfilter i.myfilterimg {font-size:3vw;}
    #inpmodelfilter label {margin:1px}
    
}


@media (max-width : 450px) and (orientation: portrait) {
    /*body {background-color: magenta; font-size: 12px}*/
    
    .prdboxc {width: 100%;}
    #sale-container [id^='Box-c-'].prdboxc {width: 100%; z-index:0; float:left; padding:5px }
    .prdbrand {left: -12.15%;}
    .cookies-advice {float:none; width: 100%; margin-bottom: 15px}
    #square-container {display:none}
    .coord-items {width: 100%}
	.p1mbox-c {width: 99%; margin: 2% 0;}
	.p1boxdescr_c {margin-bottom: 10px;}
    .p1box_wrapper {margin: 0% 5%; padding: 0 5%}
    .philomess {/*line-height: 1.45;*/ /*font-size: 1.1em;*/}
	.h-sb-1 {height:450px}
	.h-sb-2 {height:255px}
	.h-sb-3 {height:100px}
	.h-sb-4 {height:110px}
    .coord-adr-show {width: 83%; left: 9%; font-size: 0.8em;}
    .coord-map {height: 65vw;}
	#img-pa .imgp1 {height:340px!important}
    #slidescontainer section {width:97%}
    #coord-hz, #coord-bf {
        width: 92%;
        float: none;
        margin: 0 4%;}
    .prev, .next {font-size:20px}

}
    
@media (max-width : 375px) and (orientation: portrait) {
    /*body {background-color: grey;}*/
    #rescontainer, #resconfirmed {width: 21rem}
    .servicepricetxt {font-size: 1.7em}
    #rentcalendar-container, #rescalendar-container {width: 87%!important}
    .mybtn {width: calc(91% / 2)}     
    .prdbrand {left: -13.15%;}
	#img-pa .imgp1 {height:235px}


	
@media (max-width : 370px){
    .philomess {line-height: 1.2; font-size: 0.975em;}
    #img-pa .imgp1 {height:187px}
}
    
@media (max-width : 320px) and (orientation: portrait) {
    /*body {background-color: gold;}*/
    #rescontainer, #resconfirmed {width: 18rem}
    .servicepricetxt {font-size: 1.5em}
    #rentcalendar-container, #rescalendar-container {width: 100%!important}
    .mybtn {width: calc(90% / 2)}
    #p1sboxverleih-c.p1sbox-c {width: 95%;}
    .prdbrand {left: -22.15%;}
}