html				{overflow-y:scroll;scroll-behavior:smooth;height:100%;}
*,*:before,*:after	{box-sizing:content-box;}
body				{height:100%;width:100%;max-width:2400px;padding:0;margin:0 auto;background:#fff;}

p, span, div        {color: #433e3c;font-family: 'Montserrat', sans-serif;}


#info       {position:fixed;float:left;width:25%;height:100%;background:#fff;padding:0;margin:0;}
#gallery    {position:relative;float:right;width:75%;margin-top:100px;}


#toggle, #menu  {display:none;}

.filters    {list-style:none;padding:0;margin:0 auto;position:relative;width:200px;clear:both;}
.button     {border:none;outline:none;background-color:#fff;width:200px;box-sizing:border-box;font-size:20px;font-weight:500;line-height:24px;cursor:pointer;}
.button:hover span, .button.active span  {color:#ffa500ff;}
p                   {margin: 0 auto;text-align:justify;width:100%;align-content:center;}
p:after             {content:"";display:inline-block;width:100%;}
.button:hover p     {width:50%;}


#fate:after                                                 {content:"t a e f";}
.button:hover #fate:after, .button.active #fate:after       {content:"f a t e";}
#road:after                                                 {content:"d a r o";}
.button:hover #road:after, .button.active #road:after       {content:"r o a d";}
#body:after                                                 {content:"y b o d";}
.button:hover #body:after, .button.active #body:after       {content:"b o d y";}
#mind:after                                                 {content:"d i m n";}
.button:hover #mind:after, .button.active #mind:after       {content:"m i n d";}
#soul:after                                                 {content:"s l u o";}
.button:hover #soul:after, .button.active #soul:after       {content:"s o u l";}
#door:after                                                 {content:"r o d o";}
.button:hover #door:after, .button.active #door:after       {content:"d o o r";}


.ABOUT      {opacity:0;display:none;}
.Panorama   {opacity:0;display:none;}
.special    {float:left;left:5%;top:-70px;width:80%;}
.art        {position:relative;background-color:white;clear:both;margin-bottom:10%;padding:0;}/*box-shadow: 0 0 15px 5px #131313;}*/
.art img    {width: 100%;}
.art span   {position:absolute;bottom:20px;left:0;width:100%;text-align:center;}
.first      {position:absolute !important;float:left;left:5%;clear: none !important;}
.left       {float:left;left:5%;}
.right      {float:right;right:5%;}
.center     {float:left;left:25%;}
.narrow     {width:45%;}
.normal     {width:50%;}
.wide       {width:65%;}
.full       {width:90%;}

.filterDiv, p, img, span  {-moz-transition: all 0.5s ease-in-out 0s;-webkit-transition: all 0.5s ease-in-out 0s;-o-transition: all 0.5s ease-in-out 0s;transition: all 0.5s ease-in-out 0s;}
li                  {-moz-transition: all 0.2s ease-in-out 0s;-webkit-transition: all 0.2s ease-in-out 0s;-o-transition: all 0.2s ease-in-out 0s;transition: all 0.2s ease-in-out 0s;}


#social-icons               {position:fixed;float:left;left:10px;top:10px;width:20px;height:80px;padding:0;margin:0;}
#social-icons li            {display:inline;float:right;height:25%;width:100%;}
#social-icons li:hover		{transform: translateX(10px) rotate(60deg);}
#social-icons li div		{display:block;position:relative;float:right;height:80%;width:80%;top:10%;right:10%;background-color:#433e3c;}
#social-icons li:hover div	{background-color:#ffa500ff;}
#social-icons li a			{display:block;position:relative;height:90%;width:90%;top:5%;left:5%;}

.instagram a	{background: center / contain url(../images/icon-Instagram.png) no-repeat;}
.linkedin a		{background: center / contain url(../images/icon-Linkedin.png) no-repeat;}
.telegram a		{background: center / contain url(../images/icon-Telegram.png) no-repeat;}
.email a		{background: center / contain url(../images/icon-Mail.png) no-repeat;}


#logo               {padding:0;margin:100px 0 50px;position:relative;float:left;width:100%;clear:both;cursor:pointer;}
#holder             {width:200px;height:100px;margin:0 auto;display:block;}
#holder img         {width:200px;height:100px;display:block;filter:saturate(0%);}
#logo img:hover     {filter:saturate(100%);}


#footer             {padding:0;margin:0 auto;bottom:0;left:0;right:0;position:absolute;width:200px;cursor:pointer;}
#footer             {font-size:11px;font-weight:500;content:"";}
#footer:hover p     {color:#ffa500ff;}


#photo      {position:relative;float:left;top:0;left:0;width:32%;clear:both;margin:0 4% 4% 0;}
.text       {text-align:left;text-indent:1em;margin-bottom:0.5em;font-family: 'Roboto', sans-serif;font-weight:400;}
.text:after {content:none;}
.insert     {width:100%;height:50vh;border:none;}
#cover      {position:relative;float:left;top:0;left:0;width:100%;clear:both;margin:4% 0 0 0;}


.lazyload, .lazyloading	{opacity:0;}
.lazyloaded				{opacity:1;transition: opacity 2000ms;}