:root, body.light {
    --primary:			#2196f3; 	/* background meniu principal */
    --on-primary:		#ffffff;	/* text meniu principal */
    --primary-container:	#fdfdfd;
    --on-primary-container:	#410001;

    --secondary:		#ffffff;	/* background meniu secundar selectat */
    --on-secondary:		#000000;	/* text pe meniu secundar selectat */
    --secondary-container:	#1976d2;	/* background meniu secundar */
    --on-secondary-container:	#ffffff;	/* text pe meniu secundar */

    --tertiary:#705c2e;
    --on-tertiary:#ffffff;
    --tertiary-container:#fcdfa6;
    --on-tertiary-container:#261a00;

    --error:			#ba1a1a;
    --on-error:			#ffffff;
    --error-container:		#ffdad6;
    --on-error-container:	#410002;

    --background:		#fcfcfc;
    --on-background:		#212121;

    --surface:			#fcfcfc;
    --on-surface:		#212121;
    --surface-variant:		#fcfcfc;
    --on-surface-variant:	#534341;

    --outline:			#cccccc;
    --outline-variant:#d8c2be;

    --shadow:			#000000;
    --scrim:			#000000;

    --inverse-surface:		#000000;
    --inverse-on-surface:	#ffffff;
    --inverse-primary:#ffb4a9;

    --surface-dim:#e4d7d5;
    --surface-bright:#fff8f7;

    --surface-container-lowest:	#ffffff;
    --surface-container-low:	#ffffff;
    --surface-container:#f8ebe9;
    --surface-container-high:#f3e5e3;
    --surface-container-highest:#ede0de;
}
    .container {
        max-width: 1280px;
        width: 90%
    }
    
    @media only screen and (min-width : 301px) {
        .container {
            width:95%
        }
    }
    
    @media only screen and (min-width : 601px) {
        .container {
            width:85%
        }
    }
                                
    @media only screen and (min-width : 993px) {
        .container {
            width:70%
        }
    }
    
    picture, img {
	aspect-ratio:16/9;
    }
    picture {
	display:block;
    }
    picture img {
	width:100%; 
	height:100%; 
	object-fit:cover;
    }
    
    .breadcrumb::before {
	content:"\e5cc";
	font-family: "Material Symbols Outlined","Material Symbols Rounded","Material Symbols Sharp","Material Icons";
	vertical-align:middle;
	font-size:large;
    }
    
    .breadcrumb:first-child::before {
	visibility: hidden;
        display: none;
    }
    
    .breadcrumb ol li {
        padding: 0
    }

    .toolbar {
	min-height: 40px !important;
	height: 40px !important;
        padding-top: 0;
        padding-bottom: 0;
    }

    .sub-toolbar {
	min-height: 40px !important;
	height: 40px !important;
        padding-top: 0;
        padding-bottom: 0;
    }

    #menu {
	--width: 240px;
	width: var(--width);
        max-width: 85vw; 
        min-inline-size:12rem !important;
    }
    
.billboard {
    min-width:970px;
    min-height:250px;
    margin-bottom:20px;
    margin-top:20px;
    display: inline-block;
}

.box_1, .box_2 {
    min-width:300px;
    min-height:250px;
    margin-bottom:20px !important;
    display: inline-block;
}

.filmstrip_1, .filmstrip_2 {
    min-width:300px;
    min-height:600px;
    margin-bottom:20px !important;
    display: inline-block;
}

.large_box {
    min-width:336px;
    min-height:280px;
    margin-bottom:15px !important;
    margin-right:15px !important;
    float:left;
}

.feed {
    min-width:940px;
    min-height:240px;
    display: inline-block;
}

.inarticle {
    min-width:728px;
    min-height:90px;
    margin-bottom:15px !important;
    display: inline-block;
}

.recomandari {
    min-width:940px;
    min-height:400px;
    display: inline-block;
}