/* Basis Style Sheet Quaint 
    Project         :qds.quaint.nl
    Omschrijving    :Digital Sinage website
    Created date    :250818 | 260301
    Created by      :FWE
    Version         :1.0.0

    Rev:    0.0.0 | 250818 | Nieuwe setup met var voor kleuren
            1.0.0 | 260301 | Nieuwe website

*/

/* Define variable * * * * * * * * * * * * * * * * * * * * * * * * * */
@charset "UTF-8";
 :root {
	--mstr-bg:  #ffffff;	/* wit */
	--mstr:  #3399cc;		/* blauw */
	--mstr-sh: #cc6633;		/* oranje */
	--btn:  #ffffff;		/* wit */
	--btn-bg: #3399cc;		/* blauw */
	--btn-bg-s: #99cc33;	/* lime */
	--popup-sh: #3399cc;	/* blauw */
	--popup: #ffffff;		/* wit */
	--popup-bg: #cc6633;	/* oranje */
	--popup-d: #cc333d;		/* Rood */

	--maxWith: 900px;
}


/* Elementen * * * * * * * * * * * * * * * * * * * * * * * * * */
* { margin: auto; }
@font-face { font-family: myFirstFont; src: url(./ArialRoundedBold.ttf) }
body { font-family: myFirstFont; font-size: 15px; padding: 5%; background-color: var(--mstr-bg); color: var(--mstr); max-width: var(--maxWith); margin: auto; user-select: none; -webkit-user-select: none; -ms-user-select: none; }
h1,h2,h3,h4,h5,h6 { font-weight:300; margin: 10px 0 }
h1 { font-size: 40px !important; }
h2 { font-size: 15px !important; text-shadow: 1px 1px var(--mstr-sh); }
h3 { font-size: 25px !important; text-shadow: 1px 1px var(--mstr-sh); }
h6 { color: yellow; font-size:35px !important }
a:link, a:visited {text-decoration: underline; color: var(--mstr);}
a.noMark { text-decoration: none; }
a.seal { color:white; }

button { width: 130px; border: 2px solid; border-color: var(--mstr-sh); border-radius: 6px; background-color: var(--btn-bg); color: var(--btn); transition-duration: 0.3s; }
button:hover { border-radius: 6px; background-color: var(--btn-bg-s); border-color: var(--btn-bg); }


/* Settings * * * * * * * * * * * * * * * * * * * * * * * * * */

.q-logo { height: 100px; float: right; }
.q-title { margin-top: 10px; padding: 5px; color: var(--mstr); font-family: myFirstFont; font-weight: bold; text-align: center; text-shadow: 2px 2px var(--mstr-sh);}
/*.q-container { padding: 2px 16px }*/
.q-img { width: 100%; display: block; margin-left: auto; margin-right: auto; padding-top: 5px; }
.q-imgP { width: 70%; display: block; margin-left: auto; margin-right: auto; }
.q-banner { width: 100% }
.q-alinea { padding:10px 0px 15px; width: 95%; text-align: left; margin-left: 5px}
.q-alineaIntro { display: grid; grid-template-columns: auto 70% auto; left: 50%; padding-bottom: 10px; }
.q-center { text-align: center !important; }
.q-animate {position:relative;animation:animatebottom 2.4s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
.q-card { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); border-radius: 7px; margin-top: 5px; padding-top: 10px; padding-bottom: 10px; width: 80%; }
.q-grid { display: grid; grid-template-columns: 50% 50%; column-gap: 1%; margin: 0 2%; }
.q-hideW { display: none; }

/* Menu * * * * * * * * * * * * * * * * * * * * * * * * * */
.q-topnav { overflow: hidden; position: relative; text-align: left; }
.q-topnav #menu { display: none; }
.q-topnav a.icon { display: block; position: relative; left: 2px; top: 2px; }
.q-icon { text-shadow: none; font-weight: 500; font-size: 25px; }
.q-acive { text-align: left; margin-left: 10px; padding: 5px 10px; background-color: var( --popup-bg) !important; width: 100px; border-radius: 0 10px 10px 10px; }
.q-acive a { color: var( --popup); }
.q-acive a:hover { color: var( --popup-sh); }

/* Footnotes * * * * * * * * * * * * * * * * * * * * * * * * * */
/*.q-seal { position: fixed; bottom: 0; left: 50%; transform:translate(-50%); max-width: var(--maxWith); color: var(--btn); background-color: var(--btn-bg); text-align:center; padding: 7px; border-radius: 5px 5px 0 0; }*/
.q-seal { position: fixed; bottom: 0; left: 50%; transform:translate(-50%); color: var(--btn); background-color: var(--btn-bg); text-align:center; padding: 7px; border-radius: 5px 5px 0 0; }