/*
Theme Name: IOA-2022
Author: PROWEB
Version: 0.1
*/
@font-face {src: url("assets/fonts/PFRegalDisplayPro-Reg.otf");         font-family:Regal;     font-style:normal; font-weight:400;}
@font-face {src: url("assets/fonts/PFRegalDisplayPro-Bold.otf");        font-family:Regal;     font-style:normal; font-weight:600;}
@font-face {src: url("assets/fonts/PFRegalDisplayPro-Italic.otf");      font-family:Regal;     font-style:italic; font-weight:400;}
@font-face {src: url("assets/fonts/PFRegalDisplayPro-BoldItalic.otf");  font-family:Regal;     font-style:italic; font-weight:600;}
@font-face {src: url("assets/fonts/PFRegalDisplayPro-Black.otf");       font-family:Regal;     font-style:normal; font-weight:900;}
@font-face {src: url("assets/fonts/PFRegalDisplayPro-BlackItalic.otf"); font-family:Regal;     font-style:italic; font-weight:900;}

@font-face {src: url("assets/fonts/Helvetica-Greek-Upright.ttf");       font-family:Helvetica; font-style:normal; font-weight:400; }
@font-face {src: url("assets/fonts/Helvetica-Greek-Bold.ttf");          font-family:Helvetica; font-style:normal; font-weight:600; }
@font-face {src: url("assets/fonts/Helvetica-Greek-Inclined.ttf");      font-family:Helvetica; font-style:italic; font-weight:400; }
@font-face {src: url("assets/fonts/Helvetica-Greek-Bold-Inclined.ttf"); font-family:Helvetica; font-style:italic; font-weight:600; }


* {margin:0;padding:0;box-sizing:border-box}

body{font-size:1vw;font-family:Helvetica; font-weight:300}

/* MENU SECTION */
#menu-bar { 
	position:fixed; 
	top:0; left:0; width:100%; height:4vw; 
	display:flex; justify-content:space-between; align-items:center; 
	padding:0 2vw; 
	background-color:#FFF; border-bottom:1px solid #CCC;
	z-index:110; 
}

/* menu switch */
#menu-bar button#menu-switch {background:none; border:none; cursor:pointer; padding:0 2vw; z-index:110}
#menu-bar button#menu-switch svg {height:3vw;width:3vw}
	.line {fill: none;stroke: black;stroke-width: 3;transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);}
	.line1 {stroke-dasharray: 40 187;stroke-width: 3;}
	.line2 {stroke-dasharray: 50 60; stroke-width: 3;}
	.line3 {stroke-dasharray: 60 207;stroke-width: 3;}
	.opened .line1 {stroke-dasharray: 90 207;stroke-dashoffset: -134;stroke-width: 6;}
	.opened .line2 {stroke-dasharray: 1 60;stroke-dashoffset: -30;stroke-width: 6;}
	.opened .line3 {stroke-dasharray: 90 207;stroke-dashoffset: -134;stroke-width: 6;}

header#menu {
    position:fixed;
    top:4vw;left:20vw; width:80vw;height:calc(100vh - 4vw);
    background-color:#EEE;
    overflow:scroll;
    transform:rotateY(90deg);
    transition:transform .5s;
    z-index:2;
}
ul.menu a {text-decoration:none;color:#000}
ul.menu,ul.sub-menu {list-style:none}
ul.sub-menu {position:relative;left:-2.5vw;}
ul.menu li {position:relative;border-bottom:1px solid #666;padding:2em;margin:0 3vw}
header#menu {font-size:100%;}
ul.menu li:hover {background-color:#66666611;color:#000;cursor:pointer}
ul.sub-menu::after {width:100%;top:-3.75em;left:.5vw;color:#000;position:absolute;padding:2.25vw 0;cursor:pointer;z-index:0;}

ul.sub-menu.closed > li {display:none}
ul.sub-menu.closed::after {content:'\002B';}
ul.sub-menu.open > li {display:block}
ul.sub-menu.open::after {content:'\2212';}


main.container {
    display:grid; gap:0px; background-color:black;
    grid-template-areas:
        'a t'
        'a s'
        'a p'
        'a l';
    grid-template-columns: 20% 80%;
	margin-top:4vw;
}
main aside                     { grid-area: a; }
main section #title            { grid-area: t; }
main section #slider           { grid-area: s; }
main section #post             { grid-area: p; }
main section #links            { grid-area: l; }

main > * {background-color:white;}
main aside {border-right:1px solid black;padding:2vw}
main section > *:not(:last-child):not(:first-child) {border-bottom:1px solid black}


main aside img.logo {position:relative; width:100%;left:50%;transform: translateX(-50%);}
main aside #quote {position:relative; margin-top:18vw; font-family:Helvetica;font-size:150%;width:100%}
@media only screen and (max-width:480px){
main aside #quote {font-size:200%}
}

section #title {padding:4vw}
section #title h1 {font-size:550%; font-family:Regal; line-height:1em;border-bottom:1px solid black;padding-bottom:4vw}
/* section #title h1::after  {content:'\2193';margin-left:4vw;font-size:100%;} */

main section #slider {position:relative;display:flex;flex-direction:row;height:40vw;overflow:hidden;}

main section #slider #card-context {
	width:40vw; height:inherit;
	display:flex; flex-shrink:1; flex-flow:wrap;
	transition: all .5s;
}
main section #slider #card-context > div {display:flex;flex-direction:column;justify-content:center; width:100%;height:inherit; padding:4vw;}
main section #slider #card-context > div h2  {width:inherit;font-family:Regal;font-size:375%;line-height:1em}
main section #slider #card-context > div p   {font-family:Helvetica;margin:4.25vw;margin-left:0;font-size:125%}
main section #slider #card-photo {
    width: 40vw; height: inherit;
    display: flex; flex-shrink: 1; flex-flow: wrap;
    transition: all .5s
}
main section #slider #card-photo > img {width:100%;height:inherit; object-fit:cover;}
 
main section #slider button	{
	position:absolute; top:36vw;
	background-color:#00000066;
	stroke:#FFFFFF66;
	border:none;
	padding:1vw;
	line-height:1;
	cursor:pointer;
}
main section #slider button:hover {stroke:#000000;background-color:#FFFFFF}
main section #slider button#next-slide  {right: 0vw;}
main section #slider button#prev-slide  {right: calc(40vw - 2vw - 36px)}

main section #post {padding:4vw}
main section #post h2 {font-size:650%;line-height:1em;font-family:Regal;margin-bottom:3vw}
main section #post #post-context {column-count:2;column-gap:6em;}
main section #post #post-context p {font-size:200%;line-height:1.25;font-family:Helvetica;margin-bottom:1vw;}

main section #links {padding:9vw 4vw}
main section #links h2 {font-family:Regal;font-size:650%;margin-bottom:6vw}
main section #links div {display:flex; flex-wrap:wrap; justify-content:space-between!important; justify-content:flex-start; gap:3vw}
main section #links div img {height:7vw;filter:grayscale(1) brightness(.75) contrast(2);transform:scale(1);transition:all .5s;}
main section #links div img:hover {filter:grayscale(0) brightness(1) contrast(1);transform:scale(1.5)}

article {padding:3vw}
article h2 {font-size:250%;font-family:Regal;margin-top:2vw}
article h3 {font-size:175%;font-family:Regal;margin-top:2vw}
article li {font-size:125%;font-family:Helvetica;line-height:1.5em;margin-left:3em}
article p  {font-size:125%;font-family:Helvetica;line-height:1.5em;margin-top:1em}
@media only screen and (max-width: 480px) {
	article h2 {font-size:300%;margin-top:2vw}
	article h3 {font-size:225%;margin-top:2vw}
	article li {font-size:200%;line-height:1.5em;margin-left:3em}
	article p  {font-size:200%;line-height:1.5em;margin-top:1em}
}




footer {display:flex; flex-wrap:wrap; background-color:#000; color:#CCC; font-family:Helvetica}

footer aside {width:20%; display:flex;align-items:center; justify-content:center; border-right:1px solid #fff}
footer aside img.logo {width:75%;}

footer section {display:flex; flex-wrap:wrap; justify-content:space-between; width:80%;padding:6vw}

footer section h2 {margin:0;font-family:Regal;font-size:140%;font-weight:600;color:#FFF}
footer section h3 {margin:0;margin-top:.25em;font-size:115%;font-weight:400}
footer section p  {margin:0; margin-bottom:.5em; line-height:1.25em; font-size:100%; font-weight:300}
footer section a  {opacity:.75; color:inherit;text-decoration:none}
footer section a:hover {opacity:1;}
footer section div.w30 {width:30%}
footer section div.w40 {width:40%}

footer section div#sponsor {display:flex;flex-direction:row;align-items:baseline;gap:1vw;justify-content:center}
footer section div#sponsor a.sponsor span.transaction-type {display:block;font-size:70%;text-align:center;margin-bottom:4vw}
footer section div#sponsor a.sponsor img.sponsor-logo {display:block; height:4vw;width:auto; margin:0 auto; margin-top:-2vw}

footer section div#follow a img {width:1.25vw;height:auto;vertical-align:middle}

footer p#credits {color:#666;font-size:80%; text-align:center;padding:2vw 0}
footer p#credits a {color:inherit;text-decoration:none}
footer p#credits a:hover {text-decoration:underline}

@media only screen and (max-width:1280px) {
	body{font-size:1.2vw}
	header#menu {font-size:125%}
	#menu-bar span#lang-switch {font-size: 150%;}
	ul.sub-menu::after {top:-2.75em};
}
@media only screen and (max-width: 768px) {
	body{font-size:1.4vw} main section #links div img {height: 12vw;}
	header#menu{top:8vw;font-size:200%}
	#menu-bar {height:8vw;}
	#menu-bar button#menu-switch svg {width:6vw; height:6vw}
	#menu-bar span#lang-switch {font-size: 175%;}
	ul.sub-menu::after {top:-2em}
	main section #slider {height:60vw}
	main section #slider button {top:52vw}
	footer {font-size:180%;}
	footer aside{display:none}
	footer section{width:100%}
	footer section div.w30 {padding-bottom:10vw}
	footer section {padding:2vw}
	footer section div {width:45%!important}
	footer section div#follow a img {width:6vw}
	footer section div#sponsor a.sponsor img.sponsor-logo {height:10vw}
}	
@media only screen and (max-width: 480px) {
    body{font-size:1.8vw}
	#menu-bar span#lang-switch {font-size:250%;}

    header#menu{font-size:200%;}
    ul.sub-menu::after {top:-6vw;left:-2vw}

    header#menu {left:0;width:100vw;}

    main aside img.logo {width:75%;}
    main aside #quote {margin-top:0;text-align:center}
    main.container {
        grid-template-areas:
            'a'
            't'
            's'
            'p'
            'l';
        grid-template-columns: 100%;
    }
    
    section #title h1 {font-size:550%;text-align:center;}

    main section #slider {height: 130vw; flex-direction: column-reverse;}
    
    main section #slider #card-context {width:100vw;height:50vw; flex-flow:nowrap;}
    main section #slider #card-context > div {width: inherit;height: inherit;}
    main section #slider #card-context > div p {font-size:200%}
    main section #slider #card-context > div h2 {font-size:500%!important}

    main section #slider #card-photo {width: 100%;height:80vw; flex-flow: nowrap;}
    main section #slider #card-photo > img {width: 100vw;height:100%; object-fit: cover;}

	main section #slider button {top:66vw;padding:3vw}
	main section #slider button#prev-slide {right:unset;left:0vw}

    main section #links h2 {font-size:600%}

}