/*-------- COLORS + VARIABLES TO CHANGE --------*/

:root {
  --main-background-color: #e5e5e5;
  --border-color: rgba(90,75,61,0.5);
  --slight-border-color: rgba(90,75,61,0.2);
  --main-text-color: rgba(90,75,61,1);
  --language-arrow-rotation: rotateY(90deg);
}

::-moz-selection {color: #5A4B41; background: #87FFD2;}
::selection {color: #5A4B41; background: #87FFD2;}

*{color: var(--main-text-color); border-color: var(--border-color);}



/*-------- SITE CONTEXT --------*/

body{transition: all 0.5s ease; overflow-x:hidden;}
#entry{opacity: 0;}

body, #header, #footer, .mainContent {background-color: var(--main-background-color)}
h1, h2, h3, h4, h5, h6, p{color: var(--main-text-color);}
h1, h2, h3, h5, h6, p, ul, li{font-family: neue-haas-grotesk-display, sans-serif; font-style: normal;}
h1, h2, h3, h4, h5, h6 {text-transform:uppercase; color: var(--main-text-color); letter-spacing:-1px; font-weight:400;}
p{font-weight:400; letter-spacing:1px;}

h1{font-size:72px;line-height:1;}
h2{font-size:26px;}
h3{font-size:18px; letter-spacing:0px;}
h4{font-size:17px;}
h5{font-size:16px;}
h6{ font-size:12px;}

a{color: var(--main-text-color); text-decoration:none; transition: all 0.5s}
a:hover{color: var(--main-text-color); opacity:0.7;}
a.active{opacity:0.7}

p a{border-bottom: 1px solid; padding-bottom:2px;}

ul{list-style: none; padding-left: 0; padding:0;}

img{max-width:100%;}
.arrow{max-width:40px; margin-top:-4px; margin-left:10px;}
button{background:none; border:none;}



/*-------- MAIN HEADER + MAIN FOOTER [GENERAL]--------*/

#header{position:fixed; top:0; border-bottom-width:1px; border-bottom-style: solid; z-index:13;}
#header .row{height:55px;}
#header .row #atmusLogotype svg{margin-top:6px; height:40px; fill: var(--main-text-color);}
#header .row #atmusMenuHeader, #header .row #atmusLanguage{transition: all 0.5s}
#header .row #atmusMenuHeader li{float:left; margin-top:12px; padding-left: 15px;} 
#header .row #atmusmenuHeader li:first-child{padding-left:0px;}
#header .row #atmusLanguage {display:none;}
#header .row #atmusLanguage li{float:left; margin-top:12px; padding-left:15px;}
#header .row #atmusLanguage li .activeLanguage{pointer-events:none; opacity:0.7;}

#header .row #atmusLanguage li svg{width:45px; margin-left:0px; margin-top:4px; transform: var(--language-arrow-rotation); transition: all 0.5s;}
#header .row #atmusLanguage li svg polygon {fill:var(--main-text-color);}

#atmusMenuButton{display:none; z-index:14;}
#atmusMenuButton button svg{width:28px; height:28px; transition: all 0.5s; fill:var(--main-text-color);}

#mainBlock {padding-top:25px;}

#footer{position:fixed; bottom:0; border-top:1px solid; border-top-color: var(--border-color); background-color:#000; z-index:12;}
#footer .row {height:55px; padding-top:12px;}
#footer .row li{float:left; padding-left:15px;}
#footer .row li:first-child{padding-left:0px;}
#footer .row #address{display:none;}
#footer .row #email li img{width:100%;}
#footer .row #email li img.arrow{margin-left:15px; margin-top:0px; transform: rotate(180deg); filter:invert(0.5);}
#footer .row h2, #footer .row h2 a, #footer .row h2 a span{color:#999 !important;}

#sponsorsFooter{padding-top:25px; padding-bottom:80px;}
#sponsorsFooter .row svg{float:left; width:150px; fill:var(--main-text-color); opacity:0.8;}
#sponsorsFooter .row svg:nth-child(1){padding-right:2px;}
#sponsorsFooter .row svg:nth-child(2){padding-left:2px;}





/*-------- Context Elements [HOMEPAGE :: ATMUS EDI] --------*/

#mainBlock #atmusIntroBlock .atmusIntro{padding-bottom:100px; border-bottom:1px solid var(--slight-border-color);}
#mainBlock #atmusIntroBlock .atmusIntro .row .title{margin-top:120px; margin-bottom:100px;}
#mainBlock #atmusIntroBlock .atmusIntro .row .title h1{font-size:320px; letter-spacing:-20px; line-height:0.5; text-align:center;}
#mainBlock #atmusIntroBlock .atmusIntro .row .highlightParagraph{margin-bottom:60px;}
#mainBlock #atmusIntroBlock .atmusIntro .row .highlightParagraph p{font-size:32px; line-height: 1.2; text-align:center;}
#mainBlock #atmusIntroBlock .atmusIntro .row .image{margin-bottom:80px;}
#mainBlock #atmusIntroBlock .atmusIntro .row .mainList h2{font-size: 58px; margin-bottom:100px; text-align:center;}
#mainBlock #atmusIntroBlock .atmusIntro .row .mainList h2 .itemMark{font-size:32px; vertical-align:8px; margin-left:10px; margin-right:10px; margin-top:-5px;}
#mainBlock #atmusIntroBlock .atmusIntro .row .paragraph p{font-size:24px; line-height:1.3;}
#studioButton button{position:fixed; bottom:70px; right:30px; padding-left:30px; padding-right:30px; height:50px; padding-top:6px; padding-bottom:10px; border-radius:35px; border:1px solid var(--border-color); background:linear-gradient(90deg, rgba(135,255,210,1) 0%, rgba(197,197,197,0) 100%); animation: button 1.5s infinite linear;}
#studioButton h2{text-align:center; margin-top:3px;}
@keyframes button {0%{opacity:0;} 50%{opacity:1;} 100%{opacity:0;}}


/*-------- Context Elements [HOMEPAGE :: STUDIO] --------*/
/*-------- #mainBlock #atmusStudioBlock{background:linear-gradient(45deg, rgba(135,255,210,1) 0%, rgba(197,197,197,0) 100%);} --------*/
#mainBlock #atmusStudioBlock .atmusStudio{padding-top: 25px; padding-bottom:100px; border-bottom:1px solid var(--slight-border-color);}
#mainBlock #atmusStudioBlock .atmusStudio .row .title{margin-top:100px; margin-bottom:100px;}
#mainBlock #atmusStudioBlock .atmusStudio .row .title h1{font-size:320px; letter-spacing:-20px; line-height:0.5; text-align:center;}
#mainBlock #atmusStudioBlock .atmusStudio .row .mainList h2{font-size: 58px; margin-top:80px; margin-bottom:80px; text-align:center;}
#mainBlock #atmusStudioBlock .atmusStudio .row .mainList h2 .itemMark{font-size:32px; vertical-align:8px; margin-left:10px; margin-right:10px; margin-top:-5px;}
#mainBlock #atmusStudioBlock .atmusStudio .row .highlightParagraph{margin-bottom:15px;}
#mainBlock #atmusStudioBlock .atmusStudio .row .highlightParagraph p{font-size:32px; line-height:1.2;}
#mainBlock #atmusStudioBlock .atmusStudio .row .highlightImage{height:600px; overflow:hidden; margin-bottom:60px;}
#mainBlock #atmusStudioBlock .atmusStudio .row .image{margin-bottom:80px;}
#mainBlock #atmusStudioBlock .atmusStudio .row .paragraph{margin-bottom:60px;}
#mainBlock #atmusStudioBlock .atmusStudio .row .paragraph p{font-size:24px; line-height:1.3;}
#mainBlock #atmusStudioBlock .atmusStudio .row h3{line-height:1;}



/*-------- Context Elements [ARTISTS] --------*/
#mainBlock #artistsBlock .artist{padding-top:10px; padding-bottom:15px; border-bottom:1px solid var(--slight-border-color);}
#mainBlock #artistsBlock .artist:first-child{margin-top:30px;}
#mainBlock #artistsBlock .artist:last-child{padding-bottom:66px;}
#mainBlock #artistsBlock .artist .row .image{margin-top:5px;}
#mainBlock #artistsBlock .artist .row .paragraph{margin-bottom:25px;}
#mainBlock #artistsBlock .artist .row .socialNetworks a{margin-right:5px;}



/*-------- Context Elements [PROJECTS] --------*/
#mainBlock #projectsBlock .project{padding-top:10px; padding-bottom:66px; border-bottom:1px solid var(--slight-border-color);}
#mainBlock #projectsBlock .project:first-child{margin-top:50px;}
#mainBlock #projectsBlock .project{margin-top:30px;}
#mainBlock #projectsBlock .project:last-child{padding-bottom:66px;}
#mainBlock #projectsBlock .project .row .title{margin-bottom:30px;}
#mainBlock #projectsBlock .project .row .subtitle{margin-top:25px; margin-bottom:50px;}
#mainBlock #projectsBlock .project .row .paragraph{margin-top:50px; margin-bottom:50px;}
#mainBlock #projectsBlock .project .row .paragraph p{font-size:24px; line-height:1.3;}
#mainBlock #projectsBlock .project .row .image{margin-bottom:25px; }
#mainBlock #projectsBlock .project .row .image img{max-height:60vw;}
#mainBlock #projectsBlock .project .row .contacts{margin-top:50px;}
#mainBlock #projectsBlock .project .row .socialNetworks a{margin-right:5px;}
#mainBlock #projectsBlock .project .row .socialNetworks svg{width:45px; margin-left:0px;}
#mainBlock #projectsBlock .project .row .socialNetworks svg polygon {fill:var(--main-text-color);}



/*-------- Context Elements [EDITIONS] --------*/
#mainBlock #editionsBlock .timeLine{top:55px; height:40px; padding-top:10px; padding-bottom:20px; border-top:1px solid var(--slight-border-color); position: -webkit-sticky; position: sticky; z-index:10;}
#mainBlock #editionsBlock .edition{margin-top:55px; padding-bottom:85px;}
#mainBlock #editionsBlock .edition:last-child{padding-bottom:66px;}
#mainBlock #editionsBlock .edition:nth-child(3n){margin-left: 41.666%}
#mainBlock #editionsBlock .edition .row .image{margin-top:10px;}
#mainBlock #editionsBlock .edition .row .name{margin-bottom:25px;}
#mainBlock #editionsBlock .edition .row .paragraph{margin-bottom:25px;}



/*-------- Context Elements [AGENDA] --------*/

#mainBlock #agendaBlock .event{padding-top:65px; padding-bottom:15px; border-bottom: 1px solid var(--slight-border-color);}
#mainBlock #agendaBlock .event .row .date h2{font-size:42px; letter-spacing:0;}
#mainBlock #agendaBlock .event .row .title h1{word-wrap: break-word; overflow-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto;}
#mainBlock #agendaBlock .event .row .more h3 a{margin-right:10px}
#mainBlock #agendaBlock .event .row .more h3 svg{width:40px; margin-top:-2px;}
#mainBlock #agendaBlock .event .row .more h3 svg polygon {fill:var(--main-text-color);}