/*Made by an old-schooler who loves minimalist, efficient and beautiful hand written code. Yours, truly, Gaborg*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, 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;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: none;}
table {border-collapse: collapse;border-spacing: 0;}



html, body {font-family: "Oxanium", serif;font-optical-sizing: auto;font-style: normal;background:#fff;width: 100%;height: 100%;color: #000;position: relative;}
a {color: #000000;}
a:hover {color: #000;}

h1, h2, h3, h4, h5, h6 {font-family: "Tilt Warp", serif;font-optical-sizing: auto;font-weight: 400;font-style: normal;font-variation-settings:"XROT" 0,"YROT" 0;}




.buttonhome {
    position: fixed;top: 25px;z-index: 999;right:25px;background:url(logo.jpg) no-repeat center center;
    background-size: contain; width: 100px;aspect-ratio: 1 / 1;cursor: pointer;
}
.buttonhome:hover {background:url(logo-up.jpg) no-repeat center center;background-size: contain;}


.cga-desktop-block {display: block;}
.cga-mobile-block {display: none;}


.hero-video {width: 100%;height: 100%;position: fixed;background: #fff;}
.hero-video video {width: 70%;height: auto;margin: 0 auto;display: block;}

.cga-plan {width: 100%;height: 100%;position: fixed;background:#ccc url(plan.jpg) no-repeat center center;background-size: cover;}

.about-cga, .projects-cga, .contact-cga {display: flex;justify-content: center;align-items: center;height: 100vh; /* 100% of viewport height */width: 100%;   /* 100% of the width */}


.about-cga {background:#e8e8e8;position: relative;top:100%;}
.text-content {padding: 50px;}
.text-content img {padding: 0 40px 20px 0; width: 50%;    }
.text-content h1 {padding: 0 0 20px 0;font-size: 23px;}
.text-content h2 {padding: 0 0 20px 0;font-size: 23px;}
.text-content p {padding: 15px 0;line-height: 27px;}
.text-content ul {padding: 15px 0 15px 15px;list-style: disc;}
.text-content ul li {line-height: 37px;}

.projects-cga {width: 100%;height: 100%;background: #fff;position: relative;top:150%;}
.projects-cga a {margin:0;padding: 0;}
.projects-cga a img {width: 30%;float: left;display: block;padding: 10px;}

.restrict900 {width: 900px;margin: 0 auto;}


.contact-cga {width: 100%;height: 100%;background: #e8e8e8;position: relative;top:150%;}


@media only screen and (max-width: 900px) {
    .cga-desktop-block {display: none;}
    .cga-mobile-block {display: block;}
    
    .buttonhome {width: 70px;}
    
    .hero-video video {width: 100%;height: auto;}
    
    .restrict900 {width: 100%;margin: 0 auto;}
    .projects-cga a img {width: 20%;float: left;display: block;padding: 5px;}
    
}