*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;

    /* HEADER MENU COLOR */
    --headl : #69733c;
    --headr : #28310c;
 
    /* MENU TEXT */
    --hxa : #EFE8D8;
    --hxb : #e1d283;
    --hxc : #ffebbc;

    /* SOFT COLORS */
    --so1 : #eafff9;
    --so2 : #f1ffed;

    /*TEZ TEXT : : DARK COLOR */ 
    --TB : #ffebbc;
    --TH1 : #69761c;
    --TH2 : #aa985a;
    --TH3 : #C0A54E;
    --TH4 : #C0A54E;
    --TH5 : #51692d;
    --TH6 : #C0A54E;
    --TP : #646f3c;
    --TLP : #C0A54E;
    --TMP : #444625; 
    --TSP : #576c36; 

    --TSE : #c9c09d;
    --TSG : #af9e5e; 
    --TSF : #A19F2E; 

    /* SCROLLBAR */
    --sca:#1b1500;
    --scb:#657D3C;
    --scc:#1b1500;

    /* SIDEPANEL */
    --sia : #44441e;
    --sib : #54632f;
    --sic : #28310c;

    /* FOOTER */
    --foa : #001118;
    --fob : #4a000a;
    --foc : #051923;

    /* IMAGES FOR MAIN BACKGROUNDS */
    --AIM : url("../ASIA/HOME/CRM1/COS.jpg"); 
}
 

/* ----------------------------------------------- HTML BASE CLASSES ---------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------------------------------------*/
body {background: fixed linear-gradient(to bottom,#e6ffb3,#fffaee);}

/* SCROLLBAR ---------------------------*/
/* ------------------------------------ */
/* ------------------------------------ */
/* ------------------------------------ */
/* width */
::-webkit-scrollbar {width: 10px;}

/* Track */
::-webkit-scrollbar-track {background: var(--scc);}

/* Handle */
::-webkit-scrollbar-thumb {border-radius: 20px; background: linear-gradient(to bottom, var(--scb), var(--sca));}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {background: linear-gradient(to top,  var(--scb), var(--sca));}

/* TOPPER CLASS : Premium Connecting Message */
/* TOPPER CLASS : Premium Connecting Message */
/* TOPPER CLASS : Premium Connecting Message */
/* TOPPER CLASS : Premium Connecting Message */
@keyframes topper {to {color: #e1d283; transform: scale(0.9); font-weight: 900; filter: blur(0px);}}
.TOPPER {padding: 5px 20px; text-align: right; background: fixed linear-gradient(to right,var(--sia),var(--sic));}
.TOPPER h6 {color: #e2eca6;}
.TOPPER a {color: #c2d08c; font-weight: 200; letter-spacing: 1px; filter: blur(10px); animation: topper 2s forwards infinite;}

/* HEADER : TOPPER PART OF THE PAGE */
/* HEADER : TOPPER PART OF THE PAGE */
/* HEADER : TOPPER PART OF THE PAGE */
/* HEADER : TOPPER PART OF THE PAGE */
/* HEADER */
.HEADER{display:flex;padding:4px 15px;align-items:center;position:relative; justify-content:space-between;background:linear-gradient(to right,var(--headl),var(--headr));}
.HIMZ{flex-basis:30%;display:flex;overflow:hidden;width:min-content}
.HEADER img {width:200px; height:70px; margin:5px 0 0 50px; filter:brightness(1.2)}
 
nav ul{display:flex;flex-basis:40%;text-decoration:none}
nav ul li{list-style:none;position:relative}
nav ul li a{text-decoration:none;color:var(--hxa);margin-left:10px;padding:10px 15px; font-size:15px;font-weight:900}
nav ul li a span{color:var(--hxb);font-weight:500}
nav a:hover{color:var(--hxb);transition:.3s ease-in}
nav a:hover span{color:var(--hxc);font-weight:900}

.OPENS,.CLOSES{font-family:'Cinzel',serif;display:none}

.SPEZ{display:none;position:absolute;bottom:1rem;right:1rem}
.SPEZ h5{color:#5a6337; font-size:.65rem; letter-spacing:2px}

.SPIM{display:none;position:absolute;bottom:9rem;right:3rem;width:5rem;height:5rem}
.SPIM img{width:9rem;height:11rem;display:block}

.NAVO {box-shadow: rgba(174, 146, 10, 0.2) 0px 2px 8px 0px; border-radius: 20px; width: max-content; padding: 2px 1px; margin-right: 15px; transition: all 200ms ease-in-out;}
.NAVO:hover {border: 2px solid #c2d08c; border-radius: 20px; transform: scale(0.9);}

@keyframes anim{
0%{font-weight:400;font-size:15px;opacity:1;color:var(--hxa);margin-left:7px}
40%{font-weight:900;opacity:.7;color:var(--hxb);margin-left:6px}
100%{font-weight:600;font-size:16px;color:var(--hxc);margin-left:5px}
}

@media(max-width:700px){

.OPENS {display:block}
.CLOSES {display:flex}

.HIMZ {flex-basis:50%}
.HEADER img {margin-left:-5px; aspect-ratio:10/9}
.HEADER .SPIM img {margin-left:-25px; aspect-ratio:10/9}

nav ul {margin:10px auto;display:block}
nav ul li {margin:30px auto}
nav ul li a {padding:10px; font-size:15px;}
nav ul li a span {animation:anim 1.5s linear infinite forwards; padding-bottom: 10px;}

.SIPAN {width:0;opacity:0;border:0;position:fixed;z-index:5000;height:100vh;top:0;right:0;background:linear-gradient(120deg,var(--sia),var(--sib),var(--sic));overflow-x:hidden;transition:.5s ease-in-out;padding-top:60px}
.SIPAN a {padding:15px 80px 15px 50px;text-decoration:none;color:var(--hxb);width:190px;transition:.3s}
.SIPAN a span {color:var(--hxc)}
.SIPAN .CLOSES {position:absolute; top:1rem; right:-50px; font-size:30px}

.OPENS {font-size:20px;cursor:pointer;background:rgba(45,0,11,.195);color:#fff;padding:10px 15px;border:0;border-radius:5px}
.OPENS:hover {background:#444}

.SPEZ,.SPIM {display:block}
}

/*large phones / small tablets*/
@media(min-width:481px) and (max-width:768px){
.AVIOR {width: 100%;}
}

/*tablet portrait*/
@media(min-width:769px) and (max-width:1024px) and (orientation:portrait){
 .AVIOR {width: 100%;}
}

/*tablet landscape*/
@media(min-width:769px) and (max-width:1180px) and (orientation:landscape){
 .AVIOR {width: 100%;}
}