/*//////////////////////////////////
////////    ADC 2021        ////////
//////// custom build v1.01 ////////
////////   rogez.design™    ////////
//////////////////////////////////*/

/* blue: rgb(45,75,225); */
/* brown: rgb(117,75,62); */
/* grey: rgb(240,240,240); /*
/* black:  rgb(20,20,20); */

/* FONTS */
@font-face{	font-family: GansNova; src: url('assets/fonts/GansNova-Light.woff'); font-weight:400; font-style:normal; }
@font-face{	font-family: GansNova; src: url('assets/fonts/GansNova-LightItalic.woff'); font-weight:400; font-style:italic; }
@font-face{	font-family: GansNova; src: url('assets/fonts/GansNova-Medium.woff'); font-weight:600; font-style:normal; }
@font-face{	font-family: GansNova; src: url('assets/fonts/GansNova-MediumItalic.woff'); font-weight:600; font-style:italic; }

/* ANIMATIONS */
@keyframes blur{ from {filter:blur(20px);} to {filter:blur(0px);} }
@keyframes fadein{ from {opacity:0;} to {opacity:1;} }
@keyframes blushing{ 0% {opacity:0.8;} 10% {opacity:0.7;} 25% {opacity:0.65;} 30% {opacity:0.7;} 40% {opacity:0.75;} 55% {opacity:0.6;} 60% {opacity:0.75;} 75% {opacity:0.8;} 80% {opacity:0.85;} 100% {opacity:0.8;} }

/* MAIN FRAME */
*{ margin:0; padding:0; box-sizing:border-box; font-family: "GansNova",sans-serif; }
body{ display:flex; flex-flow: row wrap; width: 100vw; color: rgb(100,100,100); overflow-x:hidden; background-color: white;}
body.editor{ background-color: rgb(240,255,240); }
header{ display:flex; flex-flow: column wrap; height: 20%; width:100%; }
main{ width:100%; margin: 1% 5%; }

/* NAVIGATION */
a{ position: relative; color:black; text-decoration: none; }
header h1 a{ display: block; text-align: center; text-transform: uppercase; letter-spacing: 5px;}
header nav{ margin:0 auto; }
header nav a{ font-size: 1.8rem; }
header nav a.active::after{ border-bottom: 1rem solid rgba(117,75,62,.4); content: ""; left: 0; line-height: 1em; margin-top: calc(0.1em / 2 * -2); position: absolute; right: 0; top: 50%; }
figure#logo{ height: 20vh; padding: 2vh; margin: 0 auto; }
figure#logo img{ height: 100%; }
main nav{ text-align: center; background-color: white; margin:0 auto; margin-bottom: 1vh; padding-bottom: 0.3rem; border-radius: 10px;}
main nav a{ font-size: 1.3rem;  }
figcaption a:hover::after{ border-bottom: 1rem solid rgba(117,75,62,.7); content: ""; left: 0; line-height: 1em; margin-top: calc(0.1em / 2 * -2); position: absolute; right: 0; top: 50%; }

/* HEADINGS */
h1{ font-size:3.0rem; line-height: 3rem; font-weight: 400; font-family: "GansNova",sans-serif; position: relative; text-transform: uppercase; text-align: center; }
h2{ font-size:1.8rem; text-transform: uppercase; margin-bottom:0.6rem; font-weight: 600;}
h3{ font-size:1.3rem; margin-bottom:0.2rem;}
h4{ font-size:1.1rem; }
h5{ font-size:1rem; text-transform: uppercase; margin-top:2rem;}
h6{ font-size:0.8rem; font-style: italic;}
p{ line-height: 1.5rem;}

/* GLOBAL CLASSES */
.right{ text-align: right; }
.center{ text-align: center; }
.left{ text-align: left; }
.justify{ text-align: justify; }

/* HOME */
div#home{ height: 100%; width: 100vw; }
div#home figure{ width:100%; height: 100%; object-fit: contain; }
div#home figure img{ height:100%; }

/* ARTICLES */
article{ padding:2%; margin:0 auto; background-color: rgb(255,255,255); margin-bottom: 5vh; text-align: center; }
article p{ margin-bottom: 1rem; }
article a{ color: rgb(117,75,62); }
article a:hover{ text-decoration: underline; }
article table td{ padding: 2px; }
article blockquote{ font-size:1.5rem; font-weight: bold; line-height: 1.5rem; font-style: italic; text-align: center; }
article blockquote::before{ content: "“"; }
article blockquote::after{ content: "”"; }
article address{ text-align: center; margin: 1rem 0 2rem 0; font-weight: bold;}
article table td{ padding: 0.5rem 1rem 0.5rem 0; }
article table td:first-child{ font-weight: bold; vertical-align: top; }
article.publications figure{ display: flex; flex-flow: column nowrap; align-items: center; margin: 2rem 0;}
article figcaption{ font-style: italic; font-size: 0.8rem; }

/* FORMS */
form input,textarea{ padding: 2px 5px; display: block; border: 2px solid transparent; border-bottom: 2px solid black; margin: 1vh 0; background-color: rgba(240,240,240,.5); font-size: 1.2rem; }
form input:focus,textarea:focus{ background-color: rgba(240,240,240,.9); }
form textarea{ width: 100%; min-height: 10vh; }
form input[type=submit]:hover{ border:2px solid black; }
form input[type=submit]:active{ background-color: rgb(117,75,62); color:white; }

/* r.cms */
section#cmsdiags{ display:flex; flex-direction:row wrap; align-items:flex-end;  }
section.cms{ display:inline-block; }
section.dialog{ background-color:rgba(255,200,200,.6); padding:15px 60px 10px 25px; margin:25px auto; }
input.submit{ display:inline-block; }
input.submit:hover{ border:2px solid black; }
input.submit:active{ background-color: rgb(117,75,62); color:white; }
section#addcontent{ display:none; }
section#editcontent{ display:none; }
section#editcontent form{ margin-left:10px; }
section#uploadimage form input{ display:block; margin:1vh 0; }
section#uploadimage form input[type=text]{ width:80%; }
section#makenewalbum form input{ display:block; margin:2px 0; }
section#makenewalbum form input[type=number]{ width:100px; }
article[contenteditable=true]{ background-color:rgba(255,255,255,.6);  }
article#publications>*[contenteditable=true]{ background-color:rgba(255,255,255,.6); margin:1rem 0; padding:2rem;}
div.ql-toolbar{ background-color: rgba(200,200,200,.4); }
div.ql-editor{ background-color: rgba(255,255,255,.6); }

/* GALLERY */
section#gallery{ column-count: 5; column-gap: 2rem; }
section#gallery figure{ margin-bottom: 1.5rem; }
section#gallery figure img{ width:100%; }
section#gallery figure img:hover { cursor:pointer; filter: grayscale(0%); }
section#gallery figure figcaption{ position:relative; text-align:center; z-index:5;}
section#gallery figure figcaption.detail{ display:none; z-index:11;  }
section#gallery figure figcaption.detail div{ display: block; }
section#gallery figure figcaption div{ font-size:1rem; background-color:rgba(255,255,255,0.95); padding:0 2px;  }
section#gallery figure figcaption:hover { cursor:pointer; }
section#gallery figure.editor div { position:absolute; cursor:not-allowed; height:100%; width:100%; top:0; left:0; }
section#gallery figure.editor div:hover { background-color:rgba(255,0,0,0.15);  }
section#expo{ position:relative; display: flex; z-index: 10; width:100%;  justify-content: space-between; }
section#expo div#left{ display: flex; justify-content: flex-end; min-width:75%; }
section#expo div#left figure{ width: 100%; padding-bottom: 0.5rem;  animation: blur 150ms ease-out; animation-play-state: paused;}
section#expo div#left figure img{ height: 100%; width:100%; object-fit: contain; object-position: bottom right; padding-bottom: 0.5rem;}
section#expo div#left video{ padding-bottom: 1rem; }
section#expo div#left video source{ padding-bottom: 1rem; }
section#expo div#right{ min-width: 25%; }
section#expo div#right figcaption{ height:100%; padding-bottom:1rem; display:flex; flex-flow:column nowrap; justify-content: flex-end; } 
figure#intro{ max-width:80%; margin: 0 auto; }
figure#intro img{ width:100%; }


/* MOBILE MENU */
main header{ display:flex; justify-content:space-between; visibility: hidden; }
main header h1#mmenu a:hover{ cursor: pointer; }


/* DEBUG */
aside{ display: none; position: fixed; top:0; left:0; width:18vw; height: 95vh; background-color: rgba(200,200,200,0.5); margin:1vh; padding:0 1vh }


/* MEDIA QUERIES */
@media only screen and (min-height: 100px)  { html { font-size: 8px; } section#gallery{ column-count: 1; } article,main nav,section.dialog{ max-width: 100%; } }
@media only screen and (min-height: 600px)  { html { font-size: 10px; } section#gallery{ column-count: 2; } article,main nav,section.dialog{ max-width: 90%; }}
@media only screen and (min-height: 700px) { html { font-size: 12px; } section#gallery{ column-count: 3; } article,main nav,section.dialog{ max-width: 80%; }}
@media only screen and (min-height: 800px) { html { font-size: 14px; } section#gallery{ column-count: 4; } article,main nav,section.dialog{ max-width: 60%; }}
@media only screen and (min-height: 1200px) { html { font-size: 16px; } section#gallery{ column-count: 5; } article,main nav,section.dialog{ max-width: 50%; }}


/* LANDSCAPE */	
@media only screen and (orientation: landscape) {	
nav a:hover::after{ border-bottom: 1rem solid rgba(117,75,62,.7); content: ""; left: 0; line-height: 1em; margin-top: calc(0.1em / 2 * -2); position: absolute; right: 0; top: 50%; }
nav a{ margin: 0 2rem; }
header nav#menu{ display: none; }
header nav#mobile { display: none !important; }
main section#gallery figure:hover{ filter:blur(0px); transition:none; }
section#gallery figure img{ filter: grayscale(0%); }
section#expo{ height: 75vh; margin-top:5vh; }
section#expo div#left figure{ height:75vh; }
section#expo div#right figcaption{ align-items: flex-start; }
section#expo div#right figcaption p{ padding: 1rem 1rem 0rem 5rem; }
section#expo div#left video{ height:100%;  }
}


/* PORTRAIT */
@media only screen and (orientation: portrait) {	
body{ padding:3vh; }
section#nav{ display:none; }	
main{ width: 100%; margin:0;}
main header{ visibility:visible; }
header nav{ display: flex; flex-flow: column nowrap; }
header nav#menu{ padding: 10px; }
header nav#main{ margin-bottom: 0rem; }
header nav#menu a{ font-size:3rem; }
header nav#main a{ display: none; text-align: center; }
header h1{ font-size: 2rem;}
article{ width: 100%; max-width: 100%; }
article h2{ text-align: center;}
figure#intro{ margin-bottom: 5vh; }
figure#fs img{ height:auto; width: 100%; filter: grayscale(0%);}
figure#fs>div{ position: fixed; width:90%; top:2%; right:auto;  }
section#gallery{ column-count: 1; justify-content:center; }
section#gallery figure{ width:100%; padding: 0; }
section#expo{ display: flex; flex-flow:column nowrap; }
section#expo div#left{ width:100%; }
section#expo div#right{ width:100%; }
section#expo div#right figcaption{ margin-top:1vh; align-items: center;}
section#expo div#right figcaption p{ padding-top:0.5rem; }
section#expo div#left figure img{ object-position: top;}
section#expo div#right figcaption p{ padding: 0rem; }
section#expo div#right figcaption p:first-child{ padding: 0.5rem; }
section#expo div#left video{ width: 100%; }
}