mobilestyle.css

/*
This file is part of the LBSGK Template

https://github.com/el-mejor/LBSGK

Copyright (c) 2019 Lars Becker (lars@lars-b.net)
*/

/* hide some boxes and modify appearance for mobile devices */
@media all and (orientation: portrait) and (max-device-width: 767px) {
    body {
        font-size: 3vw !important;		
    }

    .mainframe {
        margin: 0 !important;
        padding: 0 !important;		
        border-radius: 0 !important;
        width: 100vw !important;
        min-width: 100vw !important;
        max-width: 100vw !important;
        height: auto !important;
        background: #ffffff !important;
        box-shadow: none !important;		
    }

    .titleBannerImg {
        max-width: 100% !important;
    }
    
    .iconimg {
        width: 2em !important;
        height: 2em !important;
        border: 3px solid dimgray !important;
    } 

    .mainbanner {
        width: 100vw !important;
        top: 0 !important;
        height: 200px !important;
    }

    .img-responsive {
        max-width: 100vw !important;
        width: 25vw !important;
        height: auto !important;
    }

    .advimg {
        width: auto !important;
        max-width: 90vw !important;
        height: 120px !important;		
    }

    .unesco {
        width: auto !important;
        max-width: 90vw !important;
        height: 180px !important;
    }

    .topbox {
         width: 100vw;
         height: 3em;
         position: sticky !important;
         position: -webkit-sticky !important;		
    }

    .footerdiv {
        width: 100% !important;
        font-size: 150% !important;	
    }

    .mobilemenubuttonimg {
        margin: 0 !important;
        height: 2.0em !important;
        width: 2.0em !important;		
    }

    h1, h2, h3 {
        text-shadow: none !important;
        margin-left: 0px !important;
        margin-right: 0px !important;
        padding-left: 10px !important;
    }

    .verb_logo {
        max-width: 120px !important;
        width: 20vw !important;
    }
}

@media all and (orientation: landscape) and (max-device-width: 767px) {
    body {
        font-size: 1.4vw !important;
        background: linear-gradient(gray, dimgray);
        background-attachment: fixed;
    }

    .mainframe {
        margin: auto !important;
        padding: 0 !important;
        border-radius: 0 !important;
        width: 85vw !important;
        min-width: 85vw !important;
        max-width: 85vw !important;
        height: auto !important;		
        background: #ffffff !important;
        box-shadow: none !important;	
    }

    .iconimg {
        width: 3em !important;
        height: 3em !important;
        border: 3px solid dimgray !important;
    } 

    .advimg {
        width: auto !important;
        max-width: 90vw !important;
        height: 60px !important;
    }

    .unesco {
        width: auto !important;
        max-width: 90vw !important;
        height: 120px !important;
    }

    .mainbanner {
        width: 100vw !important;
        top: 0 !important;
        height: 200px !important;
    }

    .img-responsive {
        max-width: 80vw !important;
        width: 25vw !important;
        height: auto !important;
    }

    .topbox {
        width: 100vw;
        height: 3em;
        position: sticky !important;
        position: -webkit-sticky !important;
    }

    .footerdiv {
        width: 50% !important;	
    }

    .mobilemenubuttonimg {
        margin: 0 !important;
        height: 2.0em !important;
        width: 2.0em !important;
    }
    
    h1, h2, h3 {
        text-shadow: none !important;
        margin-left: 5px !important;
        margin-right: 5px !important;
    }

    .verb_logo {
        max-width: 120px !important;
        width: 5vw !important;
    }
}

@media all and (max-device-width: 767px) {
    body {
        font-family: "Verdana" !important;
        height: 100% !important;
        min-height: 100% !important;
        width: 100vw !important;
        margin: 0 !important;
        padding: 0 !important;	  		
    }

    .mobilonly {
        display: block !important;
    }

    input {
        font-size: 1.2em;
    }

    .mainlogo {
        width: 12vw !important;	
        box-shadow: none;
    }

    .mainbanner {	
        min-height: 25px !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .mainbannerbackimg {
        border-radius: 0 !important;
    }

    .mainbannerheaderprev {
        display: none;
    }

    .mainbannerlogo {
        min-height: 0 !important;
        height: 160px !important;
    }

    .leftbox {
        display:none;
    }
    
    .contentbox {
        min-height:	50vh !important;
        height: auto !important;
        margin: 0 !important;  
        margin-top:	30px !important;
        font-size:	1em !important;  
        box-shadow:	none !important;  
        padding-left: 40px !important;
        padding-right: 40px !important;  		    				
    }

    .footerbox {
        font-size: 0.5em !important;  
        border-radius: 0 !important;		
    }

    .img-responsive:hover {
        transform: scale(1.0) !important;
    }

    .verb_logo:hover {
        transform: scale(1.0) !important;
    }  

    .iconimg:hover {
        transform: scale(1.2);
        opacity: 1.5;
    }

    .menubox {
        display: none;
    }
    
    .infobox {
        display: none;
    }

    .topbox {
        z-index: 1001;
        top: 0 !important;
        display: block !important;	    
        opacity: 0.8;
        overflow: hidden;
        left: 0;
        max-height: 100vh;
        margin: 0;
        padding: 0.1em;
        font-size: 1em;
        background-color: Black;
        color: White;
        font-weight: normal;    
    }

    .mobilemainmenu {
        display: none;
        padding: 30px;
    }

    .mobilemenuitem:link {
        color: White;
    }
    
    .mobilemenuitem:visited {
        color: White;
    }

    .mobilemenu-current {
        color: gray! important;
        background-color: Black !important;
    }
    
    .mobilemenuitem{
        background-color: Black !important;
        font-size: 1.5em !important;        
    }

    .mlevmobile0 {   
        line-height: 2.5em;
        background-color: Black;	    
    }

    .mlevmobile1 {
        display: none;
    }

    blockquote.bqinfo {
        background-color: #EEFFEE!important;	
        border: 1px solid #99c68e !important;
        border-left: 5px solid #99c68e !important;
    }

    blockquote.bqwarn {
        background-color: #ffffc2 !important;	
        border: 1px solid #fdd017 !important;
        border-left: 5px solid #fdd017 !important;
    }   

    h1 {
        font-size: 2em !important;						
    }	

    h2 {	
        font-size: 1.5em !important;
    }

    h2 ~ *:not(h2) {
        margin-left:0 !important;
    }

    h3 {
        font-size: 1.2em !important;		
    }

    h3 ~ *:not(h3) {
        margin-left: 0 !important;
    }

    #switchdesktop {
    display: block !important;
    }

    .notmobile {
    display: none;
    }
    
    .newsArticlePreview {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .newsArticlePreview p:nth-child(2) {
        height: auto !important;    
    }

    .newsArticlePreview p:nth-child(3) {        
        height: auto !important;        
    }
}