@font-face {
    font-family: 'open_sansregular';
	src: url('webfonts/OpenSans/OpenSans-Regular-webfont.woff') format('woff'),
	src: url('webfonts/OpenSans/OpenSans-Semibold-webfont.woff') format('woff'),
	src: url('webfonts/OpenSans/OpenSans-Bold-webfont.woff') format('woff'),
	src: url('webfonts/OpenSans/OpenSans-ExtraBold-webfont.woff') format('woff')
    /*font-weight: normal;    font-style: normal;*/
}

@font-face {
    font-family: 'open_sanslight';
    src: url('webfonts/OpenSans/OpenSans-Light-webfont.woff') format('woff'),
	src: url('webfonts/OpenSans/OpenSans-Regular-webfont.woff') format('woff'),
	src: url('webfonts/OpenSans/OpenSans-Semibold-webfont.woff') format('woff'),
	src: url('webfonts/OpenSans/OpenSans-Bold-webfont.woff') format('woff'),
	src: url('webfonts/OpenSans/OpenSans-ExtraBold-webfont.woff') format('woff')
    /*font-weight: 200;    font-style: normal;*/
}

@font-face {
    font-family: 'open_sanssemibold';
	src: url('webfonts/OpenSans/OpenSans-Semibold-webfont.woff') format('woff'),
	src: url('webfonts/OpenSans/OpenSans-Bold-webfont.woff') format('woff'),
	src: url('webfonts/OpenSans/OpenSans-ExtraBold-webfont.woff') format('woff')
    /*font-weight: 200;    font-style: normal;*/
}

.opensanslight{
	font-family: "open_sanslight", sans-serif;
	font-weight: 200;
}
.opensansblack{
	font-family: "open_sanssemibold", sans-serif;
	font-weight: 900;	
}


.merriweather-regular {
  font-family: "Merriweather", serif;
  font-optical-sizing: auto;
  font-weight: 400;	/* 300 - 900 */
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

/* color palette */
:root{
	--orangefir:#ff3822;
	--orangelite:#f7861d;
	--sepiatext:#191818;
	--aquacolor:#16a28c;
	--bluesky:#0e5179; /*0781d4;*/
	--darkbrown:#43372c;
	--dove:#ede5e4;
}


.orangefir { color:var(--orangefir); }
.orangelite { color:var(--orangelite); }
.sepiatext { color:var(--sepiatext);}
.aquacolor { color:var(--aquacolor);}
.bluesky {color:var(--bluesky)}
.bgdarkbrown { background-color:var(--darkbrown)}
.bgbrown { background-color:#b0957b}
.brownmarker{background-color:var(--darkbrown);color:var(--dove)}
.dovemarker {background-color:var(--dove);color:var(--darkbrown)}
.firmarker  {background-color:var(--orangefir);color:var(--dove)}
.orangemarker { background-color:var(--orangelite);color:white;}


strong {font-weight:900;font-style:oblique;}

/* general */
/*html*/
body{font-family:open_sansregular,sans-serif;margin:0;background-color:white;color:#191818 } /*;font-size:15px;line-height:1.5}html{overflow-x:hidden} */
hr{border:0;border-top:1px solid #eee;margin:20px 0}

/* w3 series */
.w3-top,.w3-bottom{position:fixed;width:100%;z-index:1}.w3-top{top:0}.w3-bottom{bottom:0}
.w3-left{float:left!important}.w3-right{float:right!important}
.w3-opacity-max{opacity:0.25}.w3-opacity-min{opacity:0.75}
.w3-greyscale-max,.w3-grayscale-max,.w3-hover-greyscale:hover,.w3-hover-grayscale:hover{filter:grayscale(100%)}
.w3-greyscale,.w3-grayscale{filter:grayscale(75%)}.w3-greyscale-min,.w3-grayscale-min{filter:grayscale(50%)}

.w3-tiny{font-size:10px!important}.w3-small{font-size:12px!important}.w3-medium{font-size:15px!important}.w3-large{font-size:18px!important}
.w3-xlarge{font-size:24px!important}.w3-xxlarge{font-size:36px!important}.w3-xxxlarge{font-size:48px!important}.w3-jumbo{font-size:64px!important}
.w3-left-align{text-align:left!important}.w3-right-align{text-align:right!important}.w3-justify{text-align:justify!important}.w3-center{text-align:center!important}
.w3-border-0{border:0!important}.w3-border{border:1px solid #ccc!important}
.w3-border-top{border-top:1px solid #ccc!important}.w3-border-bottom{border-bottom:1px solid #ccc!important}
.w3-border-left{border-left:1px solid #ccc!important}.w3-border-right{border-right:1px solid #ccc!important}
.w3-topbar{border-top:6px solid #ccc!important}.w3-bottombar{border-bottom:6px solid #ccc!important}
.w3-leftbar{border-left:6px solid #ccc!important}.w3-rightbar{border-right:6px solid #ccc!important}

.w3-modal{z-index:3;display:none;padding-top:100px;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4)}
.w3-modal-content{margin:auto;background-color:#fff;position:relative;padding:0;outline:0;width:600px}
.w3-bar{width:100%;overflow:hidden}.w3-center .w3-bar{display:inline-block;width:auto}
.w3-bar .w3-bar-item{padding:8px 16px;float:left;width:auto;border:none;outline:none;display:block}
.w3-bar .w3-dropdown-hover,.w3-bar .w3-dropdown-click{position:static;float:left}
.w3-bar .w3-button{white-space:normal}
.w3-bar-block .w3-bar-item{width:100%;display:block;padding:8px 16px;text-align:left;border:none;outline:none;white-space:normal;float:none}
.w3-bar-block.w3-center .w3-bar-item{text-align:center}.w3-block{display:block;width:100%}
.w3-responsive{overflow-x:auto}
.w3-serif{font-family:serif}

.w3-hide{display:none!important}.w3-show-block,.w3-show{display:block!important}.w3-show-inline-block{display:inline-block!important}
@media (max-width:700px) {.w3-modal-content{margin:0 10px;width:auto!important}.w3-modal{padding-top:30px}
.w3-dropdown-hover.w3-mobile .w3-dropdown-content,.w3-dropdown-click.w3-mobile .w3-dropdown-content{position:relative}	
.w3-hide-small{display:none!important}.w3-mobile{display:block;width:100%!important}.w3-bar-item.w3-mobile,.w3-dropdown-hover.w3-mobile,.w3-dropdown-click.w3-mobile{text-align:center}
.w3-dropdown-hover.w3-mobile,.w3-dropdown-hover.w3-mobile .w3-btn,.w3-dropdown-hover.w3-mobile .w3-button,.w3-dropdown-click.w3-mobile,.w3-dropdown-click.w3-mobile .w3-btn,.w3-dropdown-click.w3-mobile .w3-button{width:100%}}
@media (max-width:768px){.w3-modal-content{width:500px}.w3-modal{padding-top:50px}}
@media (min-width:993px){.w3-modal-content{width:900px}.w3-hide-large{display:none!important}.w3-sidebar.w3-collapse{display:block!important}}
@media (max-width:992px) and (min-width:701px) {.w3-hide-medium{display:none!important}}
@media (max-width:992px){.w3-sidebar.w3-collapse{display:none}.w3-main{margin-left:0!important;margin-right:0!important}}

.cl_fullwidth{width:100%}
.cl_cntimg{/*width:80%;*/display:block;margin:auto}

/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  width:100%;
  background-color:#fff;box-shadow: 0px 2px 5px 0 rgba(0,0,0,0.16);
}


/* == COMMON HEADING LINES == */
h1{font-size:calc(1.5rem + 1.5vw)}
h2{font-size:calc(1.2rem + 1.5vw)}
h3{font-size:calc(1.1rem + 0.8vw)}
h4{font-size:110%}
h5{font-size:18px}
h6{font-size:16px}
/*gfs_neohellenicregular junction_regular aliceregular kuraleregular fauna_oneregular kreon eb_garamondregular eb_garamonditalic*/
h1, h2, h3, h4, h5, h6 {font-family:"Merriweather", serif; margin-top:45px;margin-bottom:5px;scroll-margin-top: 100px;}
h1, h2, h3 {text-align:center;}
h3, h4, h5 { margin-top:60px;}

/* == COMMON FOR HYPERLINKS == */
a {text-decoration:none;color:inherit;}
.visilink{text-decoration:underline #3f659f;}

/* 
		SPECIFIC
		========
*/
.buttonapply {white-space:nowrap;background-color:var(--aquacolor); color:white; border-radius: 6px; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);padding:2px; padding-right:5px; cursor:pointer;font-size:110% }
.buttonapply:hover {background-color:var(--orangelite)}
.skyazure{color:#0d8bd7;}
.superbold {font-weight: 800;  font-family: "open_sansregular", sans-serif;  /*font-size: 3rem;*/ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);}
.nomargintop { margin-top:0 }

.logo {width:20%}

aside { font-size:80%;display:block;width:80%;margin:auto;text-align:left }
main { padding-top:0; width:80%;margin:auto; padding-bottom:200px;padding-left:15px;padding-right:15px;color:var(--sepiatext)}
footer{ background-color:var(--darkbrown);color:var(--dove); text-align:center;font-size:calc(0.7rem + 0.3vw);font-family:Verdana,sans-serif,Helvetica;padding-top:40px}

@media (max-width:1080px) {
	main { width:95%;margin:auto;padding:0}
	.logo {width:30%}
}
@media (max-width:700px) {
	main { width:95%}
	nav li svg {width:25px;height:25px}
	.logo {width:50%}
}


.gridcontainer{width:90%;margin:auto}

.gridbox{
  display:grid;
  /*grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));*/
  grid-template-columns: 1fr;
  gap: 10px;
  max-width: 1424px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* 2 columns */
@media (min-width: 700px){
  .gridbox{
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 4 columns */
@media (min-width: 1200px){
  .gridbox{
    grid-template-columns: repeat(4, 1fr);
  }
}

.gridbox2 {
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 0;
	border-radius: 2px;border:2px solid var(--bluesky);
}

.sqbox{background-color:var(--bluesky);color:white}
.sqbox>h3{/*background-color:var(--bluesky);color:var(--dove);*/margin-top:0;min-height:100px;}
.sqbox>div {font-size:calc(0.95rem + 0.3vw);margin:8px;}

#perilogo { margin-left:40px;margin-top:60px }

@media (max-width:500px) {
	#arrowright>div {background-image: url("images/arrowdown.png");width:102px;height:79px;display:inline-block}
	#arrowright{width:95%;text-align:center}
	#perilogo{width:60%;margin:auto}
}
@media (min-width:501px) {
	#arrowright>div {background-image: url("images/arrowright.png");width:79px;height:102px;display:inline-block}
	#arrowright{width:97%;text-align:right}
	#pp { border-left:1px solid white;padding-left:5px }
}



.roundbox{border-radius: 10px;border:2px solid var(--orangefir);background-color:var(--dove)}
.roundbox>div{padding:5px;min-height:10px} /*this is the top box*/
@media (min-width:1300px) {
	.roundbox>div{padding:5px;min-height:150px}
}
.roundbox>div>h3{text-align:center;margin-top:0}
.dovebox{border-radius:0px 0px 8px 8px;font-size:calc(0.95rem + 0.3vw)}

section {font-size:calc(0.95rem + 0.3vw)}

/* *** DIALOG BOX *** */
dialog {
  max-width: 500px;
  max-height: 70vh; /* Limits height to 70% of the screen */
  overflow-y: auto; /* Adds a scrollbar if content exceeds max-height */
  padding: 20px;
  border: none;
  border-radius: 8px;
}

/* The backdrop filter is applied directly to the special pseudo-element */
dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px) grayscale(100%);
  -webkit-backdrop-filter: blur(8px) grayscale(100%);
}

/* To animate the dialog opening */
dialog[open] {
  animation: show 0.4s ease normal;
}

@keyframes show {
  from { opacity: 0; transform: translateY(10%); }
  to { opacity: 1; transform: translateY(0%); }
}

/* *** POPUP BOX *** */
.popup-box {
  position: fixed;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  z-index: 1000; /* Keeps it above other elements */
  display: none;
  width:300px;
}

#moredescription {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

#moredescription.open {
  max-height: 300px;
}

#learnMore {
	border-radius: 2px; background-color:var(--aquacolor);font-size:100%;color:var(--dove);border:0;
}
#learnMore:hover { background-color:var(--orangelite);}