@font-face {
    font-family: "Kaushan Script";
    src: url('/files/fonts/KaushanScript-Regular.ttf') format('truetype');
    font-weight: normal;
}
@font-face {
    font-family: "Poppins-Black";
    src: url('/files/fonts/Poppins-Black.ttf') format('truetype');
    font-weight: normal;
}
@font-face {
    font-family: "Poppins-Thin";
    src: url('/files/fonts/Poppins-Thin.ttf') format('truetype');
    font-weight: normal;
}
@font-face {
    font-family: "SofiaSansExtraThin";
    src: url('/files/fonts/SofiaSansExtraCondensed-Thin.ttf') format('truetype');
    font-weight: bold;
}
@font-face {
    font-family: "SofiaSansExtra";
    src: url('/files/fonts/SofiaSansExtraCondensed-Regular.ttf') format('truetype');
    font-weight: normal;
}
@font-face {
    font-family: "SofiaSansExtra";
    src: url('/files/fonts/SofiaSansExtraCondensed-Bold.ttf') format('truetype');
    font-weight: bold;
}
@font-face {
    font-family: "SofiaSansExtraBlack";
    src: url('/files/fonts/SofiaSansExtraCondensed-Black.ttf') format('truetype');
    font-weight: bold;
}
@font-face {
    font-family: "Cairo";
    src: url('/files/fonts/Cairo-Regular.ttf') format('truetype');
    font-weight: normal;
}
@font-face {
    font-family: "Cairo";
    src: url('/files/fonts/Cairo-Bold.ttf') format('truetype');
    font-weight: bold;
}

:root {
    --black: #000000bb;
    --blue1:#7687A9;
    --blue2: #394E70;
    --dark0: #00000060;
    --dark1: #0B090F;
    --dark2: #1C232F;
    --dark3: #222E42;
    --dark4: #030305;
    --dark5: #1C0903;
    --grey1: #ffffff80;
    --grey2: #ffffff55;
    --green: #09B300;
    --magenta:#F40B57;
    --magentadark:#970031;
    --maxWidth: 1200px;
}

html {
    scroll-behavior: smooth;
}

html, body, div, span, article, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, footer, header, img, ins, kbd, q, s, samp,
small, strong, strike, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0; padding: 0;
    line-height: 1.2em;
    vertical-align: baseline;
    border: 0;
}

html, body {
    width: 100%; height: 100%;
    overflow-x: hidden;
    font-family: "Cairo";
    font-size: 19px;
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

a, a:hover, a:visited {
    text-decoration: none;
    cursor: pointer;
    color:black;
}

body {
    color: white;
}
body.layout-contact .button2 {
    display: none;
}

.inside {
    width: 90%; max-width: var(--maxWidth);
    margin: 0 auto;
}
.center {
    width: 100%;
    padding: 10em calc((100% - min(90%, var(--maxWidth))) / 2);
}

#cont-head-overlay {
    z-index: 3;
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    transition: background-color 0.5s linear;
    pointer-events: none;
}

#footer {
    width: 100%;
    background-color: var(--dark3);
}

a.button1 {
    display: block;
    position: relative;
    padding: 0.8em 1em;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    background-color: var(--magenta);
    color: var(--black);
    border-radius: 5em;
    transition: background-color 0.25s linear;
}
a.button1:hover {
    background-color: white;
}
a.button1:active {
    background-color: var(--magentadark);
}

a.button2 {
    z-index: 3;
    display: block;
    position: fixed ;
    right: 3em; bottom: 2em;
    padding: 2em;
    text-decoration: none;
    font-size: 0.8em;
    background-color: var(--magenta);
    background-image: url('/files/theme/layout/ic-contact.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.5em;
    border-radius: 100%;
    transition: background-color 0.25s linear;
}
a.button2:hover {
    background-color: white;
}
a.button2:active {
    background-color: var(--magentadark);
}


@media screen and (max-width:864px) {
    html, body {
        font-size: 18px;
    }

    #menu-head ul > li:hover ul {
        max-height: 400px;
    }

    .center {
        width: 100%;
        padding-top: 5em; padding-bottom: 5em;
    }

    a.button2 {
        right: 1em; bottom: 1em;
        padding: 2em;
    }
}