/* Author: Giorgos Kappes <giorgos <at> giorgoskappes.com> */
/* Reset by html5doctor.com (Author: Richard Clark)-Reset Stylesheet v1.6.1 */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, 
code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, 
details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, 
video { margin:0; padding:0; border:0; outline:0; font-size:18px; vertical-align:baseline;
	background:transparent; }
body { line-height:1; }
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section { display:block; }
nav ul { list-style:none; }
blockquote,
q { quotes:none; }
blockquote:before,
blockquote:after,
q:before,
q:after { content:''; content:none; }
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; outline: 0; }
ins { background-color:#ff9; color:#000; text-decoration:none; }
mark { background-color:#ff9; color:#000;  font-style:italic; font-weight:bold; }
del { text-decoration: line-through; }
abbr[title],
dfn[title] { border-bottom:1px dotted; cursor:help; }
table { border-collapse:collapse; border-spacing:0; }
hr { display:block; height:2px; border:0; border-top:1px solid #fcfdff; margin:1em 0; padding:0; }
input,
select { vertical-align:middle; }

/* Variable definitions */
:root {
    /* Colors */
    --white: #fbfffe;
    --black: #0e121a;
    --grey: #cfd0d1;
    --red: #c44601;
    --blue: #0571b0;
    --yellow: #f6ae2d;
    --green: #138a36;

    --grey-light: color-mix(in srgb,var(--grey),#fff 30%);
    --grey-lighter: color-mix(in srgb,var(--grey),#fff 70%);
    --grey-lightest: color-mix(in srgb,var(--grey),#fff 90%);
    --grey-dark: color-mix(in srgb,var(--grey),#000 30%);
    --grey-darker: color-mix(in srgb,var(--grey),#000 70%);
    --grey-darkest: color-mix(in srgb,var(--grey),#000 90%);

    --blue-light: color-mix(in srgb,var(--blue),#fff 30%);
    --blue-lighter: color-mix(in srgb,var(--blue),#fff 70%);
    --blue-lightest: color-mix(in srgb,var(--blue),#fff 90%);
    --blue-dark: color-mix(in srgb,var(--blue),#000 30%);
    --blue-darker: color-mix(in srgb,var(--blue),#000 70%);
    --blue-darkest: color-mix(in srgb,var(--blue),#000 90%);

    --green-light: color-mix(in srgb,var(--green),#fff 30%);
    --green-lighter: color-mix(in srgb,var(--green),#fff 70%);
    --green-lightest: color-mix(in srgb,var(--green),#fff 90%);
    --green-dark: color-mix(in srgb,var(--green),#000 30%);
    --green-darker: color-mix(in srgb,var(--green),#000 60%);
    --green-darkest: color-mix(in srgb,var(--green),#000 90%);

    --yellow-light: color-mix(in srgb,var(--yellow),#fff 30%);
    --yellow-lighter: color-mix(in srgb,var(--yellow),#fff 70%);
    --yellow-lightest: color-mix(in srgb,var(--yellow),#fff 90%);
    --yellow-dark: color-mix(in srgb,var(--yellow),#000 30%);
    --yellow-darker: color-mix(in srgb,var(--yellow),#000 60%);
    --yellow-darkest: color-mix(in srgb,var(--yellow),#000 90%);

    --red-light: color-mix(in srgb,var(--red),#fff 30%);
    --red-lighter: color-mix(in srgb,var(--red),#fff 70%);
    --red-lightest: color-mix(in srgb,var(--red),#fff 90%);
    --red-dark: color-mix(in srgb,var(--red),#000 30%);
    --red-darker: color-mix(in srgb,var(--red),#000 60%);
    --red-darkest: color-mix(in srgb,var(--red),#000 90%);

    --fg-100-light: var(--black);
    --fg-90-light: var(--grey-darkest);
    --fg-80-light: var(--grey-darker);
    --fg-60-light: var(--grey-dark);
    --fg-50-light: var(--grey);
    --fg-40-light: var(--grey-light);
    --fg-30-light: var(--grey-lighter);
    --fg-20-light: var(--grey-lightest);
    --fg-0-light: var(--white);
    
    --bg-100-light: var(--white);
    --bg-90-light: var(--grey-lightest);
    --bg-80-light: var(--grey-lighter);
    --bg-60-light: var(--grey-light);
    --bg-50-light: var(--grey);
    --bg-40-light: var(--grey-dark);
    --bg-30-light: var(--grey-darker);
    --bg-20-light: var(--grey-darkest);
    --bg-0-light: var(--black);
    
    --fg-100-dark: var(--white);
    --fg-90-dark: var(--grey-lightest);
    --fg-80-dark: var(--grey-lighter);
    --fg-60-dark: var(--grey-light);
    --fg-50-dark: var(--grey);
    --fg-40-dark: var(--grey-dark);
    --fg-30-dark: var(--grey-darker);
    --fg-20-dark: var(--grey-darkest);
    --fg-0-dark: var(--black);
    
    --bg-100-dark: var(--black);
    --bg-90-dark: var(--grey-darkest);
    --bg-80-dark: var(--grey-darker);
    --bg-60-dark: var(--grey-dark);
    --bg-50-dark: var(--grey);
    --bg-40-dark: var(--grey-light);
    --bg-30-dark: var(--grey-lighter);
    --bg-20-dark: var(--grey-lightest);
    --bg-0-dark: var(--white);

    --fg-dark: var(--white);
    --bg-dark: var(--black);
    --emphasis: var(--red);
    --u-red: var(--red);
    --u-blue: var(--blue);

    /* Fonts */
    --font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-size-nav: 18px;

    /* Margins */
    --h-m: calc((100vw / 6));
    --v-m: 12px;

    /* Paddings */
    --h-p: calc((100vw / 6));
    --v-p: 12px;
}

/* PCs */
html { overflow-y: scroll; -webkit-overflow-scrolling: touch;
       -webkit-tap-highlight-color: var(--red); -webkit-text-size-adjust: 100%;
       -ms-text-size-adjust: 100%; }
body { margin: 0 auto; padding: 0; font-family: var(--font-family); font-size: 18px;
       background-color: var(--grey-white);
       background-color: var(--bg-50-light); }
body,
button,
input,
select,
textarea { color: var(--fg-light); }

h1,
h2,
h3,
h4,
h5 { font-family: var(--font-family); letter-spacing: -0.01em; }
h1 { line-height: 1.6em; margin-top: 0em; margin-bottom: 0em; font-size: 2.6em; }
h2 { line-height: 1.3333em; margin-bottom: 0em; font-family: var(--font-family);
         font-size: 2.4em; font-weight: normal; }
h3 { margin-bottom: 0em; font-size: 1.8em; line-height: 1.4em; }
h3.red { color: var(--red); }
h4 { margin-bottom: 0em; font-size: 1.4em; line-height: 1.2em; }
h5 { margin-bottom: 0em; font-size: 1.0em; line-height: 1.1111em; text-transform: uppercase; }

a { font-family: var(--font-family); text-decoration: none; color: var(--blue); }
a:visited,
a.visited { font-family: var(--font-family); text-decoration: none; }
a:hover,
a.hover { font-family: var(--font-family); text-decoration: none; 
	    border-bottom: 3px solid var(--blue); }
a.anchor { display: block; position: relative; top: -250px; visibility: hidden; }
dl { float: left; margin: 1em 0 0 0; padding-top: 1em; height: 13em;
              border: solid 1px #bbb; border-right: none;  text-align: center;
              background-color: #fcfdff; font-size: 1em; line-height: 2em; }
dl#email { width: 31.4%; }
dl#phone { width: 29.4%; }
dl#address { width: 38.6%; border-right: solid 1px #bbb; }
dt { margin-bottom: 1.4em; font-size: 1.2em; font-weight: bold;
     text-transform: uppercase; }
dl#email dd,
dl#phone dd { margin-top: 0.5em; letter-spacing: -0.039em; line-height: 1.2em; }
dl#address dd { margin-top: 0.5em; margin-bottom: 0em; line-height: 1.2em; }
img { max-width:100%; height: auto; border: 0; -ms-interpolation-mode: bicubic; }
ul,
ol,
li { margin-left: 20px; }
a,
p,
ul,
li,
ol,
dl,
pre,
code { margin-top: 1.4286em; margin-bottom: 0em; font-size: 1em; line-height: 1.4286em; }
p.large_text,
ul.large_text,
ol.large_text,
dl.large_text { margin-top: 0em; margin-bottom: 0em; font-family: var(--font-family);
		font-size: 1.8em; line-height: 1.3636em;}
p.large_text img,
ul.large_text img,
ol.large_text img,
dl.large_text img  { margin-top: 9.9091em; }
ul.large_text li,
ol.large_text li { margin-top: 0.3846em; font-family: var(--font-family); font-size: 1.8em;
		   line-height: 1.3636em;}
p.medium_text,
ul.medium_text,
ol.medium_text,
dl.medium_text { margin-top: 1.1111em; margin-bottom: 0em; font-family: var(--font-family);
		 font-size: 1em; line-height: 1.4111em; }
p.medium_text img,
ul.medium_text img,
ol.medium_text img,
dl.medium_text img { margin-top: 1.1111em; }
ul.medium_text li,
ol.medium_text li  { margin-top: 0.5em; font-size: 1em; }
p.small_text,
ul.small_text,
ol.small_text,
dl.small_text  { margin-top: 1.6667em; margin-bottom: 0em; font-size: 0.8em; line-height: 1.6667em; }
p.small_text img,
ul.small_text img,
ol.small_text img,
dl.small_text img { margin-top: 1.6667em; font-family: var(--font-family); }
ul.small_text li,
ol.small_text li { margin-top: 0.8333em; font-size: 0.8em; line-height: 1.6667em; }
p.tiny_text { margin-top: 1.6667em; margin-bottom: 0em; font-size: 0.688em; line-height: 1.6667em; }
p.tiny_text { margin-top: 1.6667em; font-family: var(--font-family); }
p.footer_text { margin-top: 0px; margin-bottom: 0em; font-size: 1.0em; line-height: 1.6667em; }
label { font-size: 1em; }
button { font-family: var(--font-family); font-size: 1.0em; }
button a,
button a:hover { color: var(--fg-100-dark) !important; text-decoration: none !important;
		 border-bottom: none !important; }
video { max-width: 100%; height: auto; }
.prevent-select { -webkit-user-select: none; /* Safari */ -ms-user-select: none; /* IE 10 and IE 11 */
		  user-select: none; /* Standard syntax */ }

/* Modifiers */
.height-100v { height: calc(100vh - 400px) !important; }
.height-100 { height: 100% !important; }
.fg-green { color: var(--green) !important; }
.fg-blue { color: var(--blue) !important; }
.fg-red { color: var(--red) !important; }
.bg-blue { background-color: var(--blue) !important; }
.bg-blue-lighter { background-color: var(--blue-lighter) !important; }
.bg-blue-lightest { background-color: var(--blue-lightest) !important; }
.bg-green { background-color: var(--green) !important; }
.bg-green-lighter { background-color: var(--green-lighter) !important; }
.bg-green-lightest { background-color: var(--green-lightest) !important; }
.bg-yellow { background-color: var(--yellow) !important; }
.bg-yellow-lighter { background-color: var(--yellow-lighter) !important; }
.bg-yellow-lightest { background-color: var(--yellow-lightest) !important; }
.bg-red { background-color: var(--red) !important; }
.bg-red-lighter { background-color: var(--red-lighter) !important; }
.bg-red-lightest { background-color: var(--red-lightest) !important; }
.bg-grey-grad { background-image: linear-gradient(var(--grey-light), var(--grey-lighter));}
.bg-grey { background-color: var(--grey) !important; }
.bg-grey-light { background-color: var(--grey-light) !important; }
.bg-grey-lighter { background-color: var(--grey-lighter) !important; }
.bg-grey-lightest { background-color: var(--grey-lightest) !important; }
.bg-white { background-color: var(--bg-100-light) !important; }
.flex-first { order: 1 !important; }
.flex-r-c { flex-direction: row !important; }
.flex-c-r { flex-direction: column !important; }
.flex-r { flex-direction: row !important; }
.flex-c { flex-direction:column !important; }
.flex-w { flex-wrap: wrap !important; }
.flex-r-c-b { display: flex !important; flex-direction: row !important;
	      align-items: center !important;
	      justify-content: space-between !important; }
.flex-c-c-b { display: flex !important; flex-direction: column !important;
	      align-items: center !important;
	      justify-content: space-between !important; }
.flex-c-s-b { display: flex !important; flex-direction: column !important;
	      align-items: flex-start !important;
	      justify-content: space-between !important; }
.flex-c-s-c { display: flex !important; flex-direction: column !important;
	      align-items: flex-start !important;
	      justify-content: center !important; }
.flex-c-c-c { display: flex !important; flex-direction: column !important;
	      align-items: center !important; justify-content: center !important; }
.flex-r-v-s { align-items: flex-start !important; }
.flex-r-v-e { align-items: flex-end !important; }
.flex-r-v-c { align-items: center !important; }
.flex-r-v-r { align-items: stretch !important; }
.flex-r-h-s { justify-content: flex-start !important; }
.flex-r-h-e { justify-content: flex-end !important; }
.flex-r-h-c { justify-content: center !important; }
.flex-r-h-b { justify-content: space-between !important; }
.flex-r-h-b { justify-content: space-around !important; }
.flex-r-h-v { justify-content: space-evenly !important; }
.flex-c-h-s { align-items: flex-start !important; }
.flex-c-h-e { align-items: flex-end !important; }
.flex-c-h-c { align-items: center !important; }
.flex-c-h-r { align-items: stretch !important; }
.flex-c-v-s { justify-content: flex-start !important; }
.flex-c-v-e { justify-content: flex-end !important; }
.flex-c-v-c { justify-content: center !important; }
.flex-c-v-b { justify-content: space-between !important; }
.flex-c-v-b { justify-content: space-around !important; }
.flex-c-v-v { justify-content: space-evenly !important; }

.margin-v-0 { margin-top: 0px !important; margin-bottom: 0px !important; }
.margin-v-2 { margin-top: 2em !important; margin-bottom: 2em !important; }
.margin-h-0 { margin-left: 0px !important; margin-right: 0px !important; }
.padding-v-0 { padding-top: 0px !important; padding-bottom: 0px !important; }
.padding-h-0 { padding-left: 0px !important; padding-right: 0px !important; }
.padding-v-20 { padding-top: 20px !important; padding-bottom: 20px !important; }

.p-l-10 { padding-left: 10px; }
.p-r-10 { padding-right: 10px; }
.p-l-20 { padding-left: 20px; }
.p-r-20 { padding-right: 20px; }

.m-0 { margin: 0 !important; }
.w300 { width: 300px !important; }
.w340 { width: 340px !important; }
.h-auto { height: 200px !important; }
.w-100-p { width: 100% !important; }

.vspace-50 { background-color: var(--bg-100-light); height: 50px; width: 100%; }

.bg-emph { background-color: var(--bg-60-light) !important; }

/* Page */
.page-wrapper { background-color: var(--bg-100-light); }

/* Header and nav */
.header-wrapper { height: 80px; width: 100%; }
.header { display: flex; position: fixed; z-index: 10; width: 100%; height: 80px;
	  background-color: var(--bg-100-light); color: var(--fg-100-light);
          box-shadow: 0 0 1px 1px var(--fg-30-light); border-bottom: 2px solid var(--fg-30-light);}
.inner { display: flex; width: calc(100% - 2*var(--h-p)); height: calc(100% - 2*var(--v-p));
	 justify-content: space-between; align-items: center;
	 padding: var(--v-p) var(--h-p) var(--v-p) var(--h-p); }
.logo { height: 100%; }
.logo a:hover { border-bottom: none; cursor: pointer; }
.topnav { display: flex; overflow: hidden; }
.topnav a { display:block; padding: 28px; padding-left: 12px; padding-right: 12px; font-size: 1em;
	    line-height: normal; color: var(--fg-100-light); text-align: center; text-decoration: none;
	    margin: 0; border-bottom: none; }
.topnav a:hover { background-color: var(--blue); color: var(--fg-0-light); }
.topnav .icon { display: none; }
.dropdown { overflow: hidden; }
.dropdown .dropbtn { padding:28px; padding-left: 12px; padding-right: 12px; font-size: 1em;    
		     border: none; outline: none; color: var(--fg-100-light);
		     background-color: inherit; font-family: inherit; margin: 0; }
.dropdown-content { display: none; position: absolute; background-color: var(--bg-100-light);
		    min-width: 160px; z-index: 1;   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); }
.dropdown-content a { display: block; float: none;  color: var(--fg-100-light); padding: 12px 16px;
		      text-decoration: none; text-align: left; }
.dropdown:hover .dropbtn {  background-color: var(--blue); color: var(--fg-0-light); }
.dropdown-content a:hover { background-color: var(--bg-50-light); color: var(--fg-100-light);
			    border-bottom: none; }
.dropdown:hover .dropdown-content, .dropdown:active .dropdown-content { display: block; }
.dropdown-content-show { display: block; }
.dropdown-content-hide { display: none; }

/* Page Hero */
.hero { position: relative; height: 400px; background-color: var(--bg-100-light);
	background-image: url(img/bg.gif);
        background-size: contain; box-shadow: 0 0 4px 4px var(--black) inset; }
.hero-content { display: flex; z-index: 1; flex-direction: column; position: relative;
		height: 400px; justify-content: center; align-items: flex-start;
	        padding: 0px var(--h-p) 0px var(--h-p); }
.hero-content h1 { color: var(--white); margin-top: 0; }
.hero-content h2 { color: var(--red); margin-top: 0; }
.hero-content p { color: var(--white); }
.subhero h1 { color: var(--fg-100-light); font-weight: bold; font-size: 2.6em; margin-top: 0;
	      line-height: 1.6em; text-align: left; }
.subhero h2 { color: var(--fg-100-light); font-weight: normal; font-size: 2.6em; margin-top: 0;
	      line-height: 1.6em; text-align: left; }
.subhero h3 { color: var(--fg-100-light); font-weight: normal; font-size: 2.2em; margin-top: 0;
	      line-height: 1.6em; text-align: left; }
.subhero button { background-color: var(--blue); color: var(--white); padding: 15px; text-align: left;
		  text-decoration: none; display: inline-block; font-size: 18px; margin: 4px 2px;
		  cursor: pointer; border-radius: 8px; margin-top: 1.4286em; }
.subhero-light { background-color: var(--bg-100-light); background-image: url(img/hexagon-light.png);
		 background-repeat: no-repeat; background-size: cover; }
.subhero-light h1 { color: var(--fg-100-light); }
.subhero-light h2 { color: var(--fg-100-light); }
.subhero-light p { color: var(--fg-100-light); }
.subhero-dark { background-color: var(--bg-100-dark); background-image: url(img/hexagon-dark.png);
		background-repeat: no-repeat; background-size: cover; }
.subhero-dark h1 { color: var(--fg-100-dark); text-align: left; }
.subhero-dark h2 { color: var(--fg-100-dark); }
.subhero-dark h3 { color: var(--fg-100-dark); }
.subhero-dark p { color: var(--fg-100-dark); }

/* Sections */
.section { width: 100%; }
.section button { background-color: var(--blue); color: var(--white); padding: 15px; text-align: center;
		  text-decoration: none; display: inline-block; font-size: 18px; margin: 4px 2px;
		  cursor: pointer; border-radius: 8px; margin-top: 1em; }
.section button:hover { background-color: var(--red); }
.section h2 {font-size: 2em; font-weight: bold; }
.section ul { list-style: none; margin-left: 0px; }
.section li { margin-left: 0px; margin-top: 1em !important; }
.heading { padding: 20px var(--h-p) 20px var(--h-p); }
.heading h1 { font-weight: bold; font-size: 2.8em; }
.heading h2 { text-align: left; font-weight: normal; font-size: 2.2em; }
.content { display: flex; flex-direction: row; flex-basis:100%; 
	   width: calc(100% - 2*var(--h-m));
	   justify-content: space-between; align-items: stretch;
	   margin: 0 var(--h-m) 0 var(--h-m); }
.content-pad { padding: 20px !important; }
.right-text { text-align: right !important; }
.left-text { text-align: left !important; }
.center-text { text-align: center !important; }
.justify-text { text-align: justify !important; }
.column { display: flex; flex-direction: row; flex: 1 1 0px; flex-grow: 1;
	  align-items: flex-start; justify-content: flex-start; order: 1}
.column .heading { padding: 0; text-align: left; }
.column video { max-height: 400px; }

.radius-box{ border-radius: 10px; background-color: var(--bg-80-light); }
.radius-box-left { border-radius: 10px; }
.radius-box-right { border-radius: 10px; background-color: var(--black); border-left-style: none;
                    border-start-start-radius: initial; border-end-start-radius: initial;
		    padding: 20px;}
.video { aspect-ratio: 16 / 9; width: 100%; }
ul.tick li:before { content: '\2714\0020'; color: var(--green); }
ul.square { list-style: square; margin-left: 15px; }
.footer { display:flex; flex-direction: column; width: calc(100% - 2*var(--h-p)); background-color: var(--bg-60-light);
	  color: var(--fg-80-light);  margin-top: auto; padding: var(--v-p) var(--h-p) var(--v-p) var(--h-p);} 
.footer p { margin: 0; }
.footer h1 { font-size: 1em; color: var(--fg-100-light); }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin: 0; }
.footer a, .footer a:visited { color: var(--fg-80-light); }
.footer a:hover { color: var(--fg-100-light); border-bottom: 3px solid var(--fg-100-light); }
.footer-social { display: flex; flex-direction: row; justify-content: space-between;
		 border-bottom: 2px solid var(--bg-50-light); color: var(--fg-100-light);
		 align-items: center; align-content: center; }
.footer-social img { height: 32px; width: auto; }
.footer-social svg { padding-right: 10px; height: 32px; width: auto; fill: currentcolor; }
.footer-social a:hover { border-bottom: none; }
.footer-menu { display:flex; flex-direction: row; gap: 1px 80px;
	       justify-content: space-between; }
.footer-links { display:flex; flex-direction: row; }
.footer-menu-item { }
.footer-menu-item input { display: none; }
.footer-copyright { color: var(--fg-100-light); background-color: var(--bg-50-light); }

.transition,
.footer-menu-item i:before,
.footer-menu-item i:after,
.footer-menu-item p,
.footer-menu-item ul li,
.footer-menu-item li { transition: all 0.25s ease-in-out; }

.flipIn, .footer-menu-item ul li, .footer-menu-item h1 { animation: flipdown 0.5s ease both; }

.no-select, h2 { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-touch-callout: none;
		 -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none;
		 -ms-user-select: none; user-select: none;
}

/* Cards */
.content-card { display: flex; flex-direction: row; align-items: stretch;
		justify-content: center; flex-wrap: wrap; height: 100%;
		margin: 0 var(--h-p) 0 var(--h-p); gap: 20px 20px;}
.content-card > * { flex: 1 1 0; }
.card-even-group { display: flex; flex-direction: row; gap: 20px 20px; }
.card { display: flex; flex-direction: column; justify-content: flex-start;
	align-items: center; border: 2px solid var(--fg-40-light);
	box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2); width: calc(16vw); }
.card-top { background-color: var(--bg-60-light); width: 100%; max-height: 300px;
	    text-align: center; }
.card-top img { width: auto; max-height: 200px; }
.card-bottom { background-color: var(--bg-100-light); text-align: left; height: 100%; }
.card h1 {margin: 0; padding: 0; font-size: 1.1em; }
.card p {margin: 0; padding-top: 5px; font-size: 1em; }
.card li { font-size: 1em; }
.card img { height: 300px;; width: auto; min-width: 200px; }

/* Images */

img.logo-tn { background-color: var(--white); border-radius: 10px;
	      box-shadow: 5px 5px 18px var(--fg-60-light); width: calc(100% - 40px); max-width: 128px;
	      height: auto; margin: 20px 20px; }
img.logo-tn-tp { width: calc(100% - 40px); max-width: 128px; height: auto; margin: 20px 20px; }
img.logo-smr { background-color: var(--white); border-radius: 10px;
	       box-shadow: 5px 5px 18px var(--fg-60-light); width: calc(100% - 40px); max-width: 200px;
	       height: auto; margin: 20px 20px; }
img.logo-smr-tp { width: calc(100% - 40px); max-width: 200px; height: auto; margin: 20px 20px; }
img.logo-sm { background-color: var(--white); border-radius: 10px;
	      box-shadow: 5px 5px 18px var(--fg-60-light); width: calc(100% - 40px); max-width: 256px;
	      height: auto; margin: 20px 20px; }
img.logo-sm-tp { width: calc(100% - 40px); max-width: 256px; height: auto; margin: 20px 20px; }

img.logo-md { background-color: var(--white); border-radius: 5px;
	      box-shadow: 5px 5px 18px var(--fg-60-light); width: calc(100% - 40px); max-width: 384px;
	      height: auto; margin: 20px 20px; }
img.logo-md-tp { width: calc(100% - 40px); max-width: 384px; height: auto; margin: 20px 20px; }
img.logo-md2-tp { width: calc(100% - 40px); max-width: 300px; height: auto; margin: 20px 20px; }
img.logo-md3-tp { width: auto; max-height: 300px; margin: 20px 20px; }

img.logo-lg { background-color: var(--white); border-radius: 10px;
	      box-shadow: 5px 5px 18px var(--fg-60-light); width: calc(100% - 40px); max-width: 600px;
	      height: auto; margin: 20px 20px; }

img.logo-lg-tp { width: calc(100% - 40px); max-width: 500px; height: auto; margin: 20px 20px; }

img.logo-hg-tp { width: calc(100% - 40px); max-width: 1200px; height: auto; margin: 20px 20px; }

/* Boxes */

.box-md { height: auto; max-width: 400px; width: 100%; margin: 20px 20px; padding: 20px 20px; }

.rounded-box-md { background-color: var(--white); border-radius: 10px;
		  box-shadow: 5px 5px 18px var(--fg-60-light); height: auto; max-width: 400px;
		  width: 100%; margin: 20px 20px; padding: 20px 20px; }

.rounded-box-hg { background-color: var(--white); border-radius: 10px;
		  box-shadow: 5px 5px 18px var(--fg-60-light); height: auto; max-width: 640px;
		  width: 100%; margin: 20px 20px; padding: 20px 20px; }

.rounded-box-400 { background-color: var(--white); border-radius: 10px;
		   box-shadow: 5px 5px 18px var(--fg-60-light); max-height: 400px; width: auto;
		   margin: 20px 20px; padding: 20px 20px;
}

/* Forms */
input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
  font-size: 1em;
  background-color: var(--bg-100-light);
}

input[type=submit] {
  background-color: var(--green);
  color: var(--fg-100-dark);
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1em;
}

input[type=submit]:hover {
  background-color: var(--green);
}

.form-container {
  border-radius: 5px;
  background-color: var(--bg-100-light);
  padding: 20px;
}


@media screen and (max-height: 900px) {
    .bg-hexagon { height: 100% !important; }
    .subhero { height: 100% !important; }
}

@media screen and (min-width: 100px) and (max-width: 1600px) {
    :root {
	/* Margins */
	--h-m: 30px;
	--v-m: 12px;
	
	/* Paddings */
	--h-p: 30px;
	--v-p: 12px;
    }
    .card { width: calc(50vh); } 
}
@media screen and (max-width: 1000px) {
    :root {
	/* Margins */
	--h-m: 30px;
	--v-m: 12px;
	
	/* Paddings */
	--h-p: 30px;
	--v-p: 12px;
    }
    .flex-resp-c-b { flex-direction: column; }    
    .flex-first { order: 0 !important; }
    .flex-r-c { flex-direction: column !important; }
    .flex-c-r { flex-direction: row !important; }
    .topnav a, .dropdown .dropbtn { display: none; }
    .topnav a.icon { display: block; color: var(--fg-100-light); font-size:36px;
		     line-height: 36px; position: fixed; top: 0; right: var(--h-p);
		     padding:0; padding-top: 22px; }  
    .topnav a.icon:hover { color: var(--red); background: none; text-decoration:none;
			   border-bottom: none; }  
    .topnav.responsive { display: block; position: absolute; top: 80px; left: 0px;
			 padding-left: var(--h-p); flex-direction: column; width: 100%;
			 background-color: var(--bg-100-light); }
    .topnav.responsive .icon { position: fixed; top: 0; right: var(--h-p); padding-top: 22px;
			       line-height: 36px; font-size: 36px; }
    .topnav.responsive a { float: none; display: block; text-align: left; padding-top: 16px;
			   padding-bottom: 16px; border-top: none; border-bottom: none; }
    .topnav.responsive a:hover { border-top: none; border-bottom: none; }
    .topnav.responsive .dropdown { float: none; }
    .topnav.responsive .dropdown-content { position: relative; left: 0; }
    .topnav.responsive .dropdown .dropbtn { display: block; width: 100%; text-align: left;
					    padding-top: 16px; padding-bottom: 16px; }

    .hero { display: flex; flex-direction: column; align-items: center;
	    justify-content: flex-start; height: auto; }
    .hero-content { height: 100%; align-items: flex-start; justify-content: center; }
    .hero-content h1 {line-height: 1.2em; }
    .hero-content h2 {margin-top: 0.2em; }
    .hero-content p { text-align: left;margin-top: 1em;  }
    .heading { padding: 20px var(--h-p) 20px var(--h-p); }
    .content { flex-direction: column; }
    .column { flex-grow: 1; margin: 0; }
    .card-even-group { flex-direction: column; }
    .card { width: 100%; }
    .card-top { max-height: 400px; }
    .card-top img { max-height: 400px; }
    .content-card { flex-direction: column; margin: 0 calc((100vw / 6)) 0 calc((100vw / 6)); }
    .subhero { height: 100% !important; }
    .subhero-dark h1 { text-align: center; }   
    .rounded-box-hg { margin: 0; padding: 0; }
    .rounded-box-400 { margin: 0; padding: 0; }

    .footer-menu { flex-direction: column; }
    .footer-menu-item {	position: relative; padding: 0; margin: 0; padding-bottom: 10px;
			border-top: 1px solid var(--grey-dark); 
			margin-top: 4px; padding-left: 10px;
			border-left: 6px solid var(--fg-40-light); }
    .footer-menu-item:hover { border-left: 6px solid var(--red); }
    .footer-menu-item h1 { margin-top: 14px; }
    .footer-menu-item ul { list-style: none; perspective: 900px; padding: 0; margin: 0; }
    .footer-menu-item ul li:nth-of-type(1) { animation-delay: 0.5s; }
    .footer-menu-item ul li:nth-of-type(2) { animation-delay: 0.75s; }
    .footer-menu-item ul li:nth-of-type(3) { animation-delay: 1s; }
    .footer-menu-item ul li:last-of-type { padding-bottom: 0; }
    .footer-menu-item i { position: absolute; transform: translate(-6px, 0); margin-top: 24px;
			  right: 0; }
    .footer-menu-item i:before, .footer-menu-item i:after { content: ""; position: absolute;
							    background-color: #ff6873;
							    width: 3px;
							    height: 9px; }
    .footer-menu-item i:before { transform: translate(-2px, 0) rotate(45deg); }
    .footer-menu-item i:after { transform: translate(2px, 0) rotate(-45deg); }
    .footer-menu-item input { display: block; }
    .footer-menu-item input[type=checkbox] { position: absolute; cursor: pointer;
					     width: 100%; height: 100%; z-index: 1;
					     opacity: 0; }
    
    .footer-menu-item input[type=checkbox]:checked ~ p { margin-top: 0;
							 max-height: 0;
							 opacity: 0;
							 transform: translate(0, 50%); }
    .footer-menu-item input[type=checkbox]:checked ~ ul { margin-top: 0;
							  max-height: 0;
							  opacity: 0;
							  transform: translate(0, 50%);
							  position:relative;
							  z-index: 0; }
    .footer-menu-item input[type=checkbox]:not(checked) ~ ul {
	                                                  position: relative;
	                                                  z-index: 2; }   
    .footer-menu-item input[type=checkbox]:checked ~ i:before {
	transform: translate(2px, 0) rotate(45deg); }
    .footer-menu-item input[type=checkbox]:checked ~ i:after {
	transform: translate(-2px, 0) rotate(-45deg); }
}

@keyframes flipdown {
    0% {
	opacity: 0;
	transform-origin: top center;
	transform: rotateX(-90deg);
    }
    5% {
	opacity: 1;
    }
    80% {
	transform: rotateX(8deg);
    }
    83% {
	transform: rotateX(6deg);
    }
    92% {
	transform: rotateX(-3deg);
    }
    100% {
	transform-origin: top center;
	transform: rotateX(0deg);
    }
}