@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap');
* {margin: 0;padding:0;}
body {font-family: 'Raleway', sans-serif; font-size: 1.5vh; overflow-x: hidden;background-color: #000000;}
a {text-decoration: none; outline: none; cursor: pointer;}
:hover {transition: color 0.3s ease 0s;}
img {max-width: 100%;}

@-webkit-keyframes menu_in {from {right:-100%;} to {right:0;}}
@keyframes menu_in {from {right:-100%;} to {right:0;}}
@-webkit-keyframes menu_out {from {right:0;} to {right:-100%;}}
@keyframes menu_out {from {right:0;} to {right:-100%;}}
@-webkit-keyframes fadeIn {from {opacity: 0;} to {opacity: 1;}}
@keyframes fadeIn {from {opacity: 0;} to {opacity: 1;}}
@-webkit-keyframes fly {from {top: 100%;} to {top:9%;}}
@keyframes fly {from {top: 100%;} to {top:9%;}}
@-webkit-keyframes buygr {
  from {left: -130%;}
  to {left: 130%;}
}
@keyframes buygr {
  from {left: -130%;}
  to {left: 130%;}
}

/* Wide Desktop */
@media screen and (min-width:1000px) {
  .wrapper {animation: fadeIn 1.5s ease-out;position: absolute; top:0; bottom:0; left:0; right:0; background-repeat: no-repeat; background-size: cover; background-position: center;z-index: 1;}
  .page_bg {position: fixed;left:0;right:0;top:0;bottom:0;display:inline-block;}
  .page_bg #l {position: absolute;left:0;width:50%;height:100%;background-color: #151515;}
  .page_bg #r {position: absolute;right:0;width:50%;height:100%;background-color: #f3f3f3;}
  .wrapper #filter {position: absolute; top:0; bottom:0; left:0; right:0; background: linear-gradient(20deg, rgba(0,0,0,1) 0%, rgba(188,188,188,0.15) 100%);z-index:2;}
  .l_block {position:fixed;top:9vh; bottom:9vh; left:18%; width:32%;color:#f3f3f3;z-index: 3;}
  .l_block div #s_title {font-size: 3vh; font-weight: 600;}
  .l_block div #b_title {font-size: 10vh; font-weight: 700; margin-top:1.6vh;}
  .l_block hr {width: 30%; height:0.6vh; background-color:#e3e3e3; margin:6vh 0;}
  .l_block .a_pages {margin-top:2vh;line-height: 7vh;z-index: 4;}
  .l_block .a_pages a {font-size: 3.7vh; font-weight: 700; color:#e3e3e3;}
  .l_block .a_pages a:hover {color:#ea3737;}
  .l_block .a_pages #active {font-size: 3.7vh; font-weight: 700;color:#ea3737;}
  .l_block .bottom {display: flex;flex-direction: row;position: absolute;left:0;bottom:0;z-index: 4;}
  .l_block .bottom #buy_button {position: relative;border: 0.2vh solid #e3e3e3; border-radius: 1vh;color:#e3e3e3;font-size: 2.2vh;font-weight: 700;padding:0.8vh 1.5vh;background-color: rgba(0,0,0,0);cursor:pointer;overflow:hidden;}
  .l_block .bottom #buy_button:after {background-color: #f3f3f3;content: "";height: 16vh;left: -8vh;opacity: .9;position: absolute;top: -5.4vh;transform: rotate(35deg);width: 7.5vh;animation: buygr 3s infinite cubic-bezier(0.6, 0.1, 0.1, 1);z-index: -10;}
  .l_block .bottom #buy_button:hover {background-color: #555555;}
  .l_block .bottom #telegram {border-radius: 2.2vh;margin-left: 3.2vh;display: block;width: 4.4vh;height: 4.4vh;background-image: url('img/telegram.png');background-position: center;background-size: contain;}
  .l_block .bottom #telegram:hover {background-color:#0088cc;}
  .l_block .bottom #whatsapp {border-radius: 2.2vh 2.2vh 2.2vh 0;margin-left: 3.2vh;display: block;width: 4.4vh;height: 4.4vh;background-image: url('img/whatsapp.png');background-position: center;background-size: contain;}
  .l_block .bottom #whatsapp:hover {background-color:#128C7E;}
  .l_block #menu {display: none;}
  .viewer {position: fixed;top:-50%;right:0;width:50%;height:50%;background-color: #555555;text-align: center;z-index: 4;}
  #v_pos {top:-50%;}
  #r_pos {top:9%;bottom:9%;}
  #desc_v {display: none;}
  .viewer #close_v {position: absolute;top:5%;right:4%;width: 3.2vh;height: 3.2vh;background-image: url('img/close.png');background-size: contain;z-index: 6;}
  .viewer #img {height: 100%;transition: opacity .5s;}
  .viewer #zoomer {position: absolute;width: 100%;height: 100%;top: 0;right: 0;left: 0;bottom: 0;z-index: 5;opacity: 0;background-position: 50% 50%;background-repeat: no-repeat;overflow: hidden;cursor: crosshair;}
  .viewer #zoomer:hover {opacity:1;}
  .viewer .desc {position: absolute;bottom:0;bottom: -25%;width:100%;height:25%;display: none;flex-direction: column;justify-content: center;align-items: center;text-align: center;background: linear-gradient(180deg, rgba(243,243,243,1) 85%, rgba(243,243,243,0) 100%);}
  .viewer .desc div #title {font-size: 1.8vh;font-weight: 700;}
  .viewer .desc div #year {font-size: 1.8vh;font-weight: 600;}
  .viewer .desc #materials {font-size: 1.5vh;font-weight: 400;margin-top: 1vh;}
  .viewer .desc #stored {font-size: 1.5vh;font-weight: 400;font-style: italic;margin-top: 1vh;}
  .r_block {position:absolute;display: flex;top:9vh;bottom:9vh; right:0; width:50%; z-index: 3;justify-content: center;align-items: center;}
  .r_block .works {position: absolute;width:90%;height:100%;display:grid;grid-template-rows: 1fr 1fr 1fr;grid-template-columns:1fr 1fr 1fr;justify-content: center;align-items: center;}
  .r_block .works #pic {width:22vh;height:22vh;border:0.2vh solid #151515;background-size: 150%;background-position: center;margin: 0 auto auto auto;}
  .r_block .works #pic:hover {border-color: #ea3737;}
  .r_block #text {position: absolute;top:0;right:0;border-bottom: 0;width: 100%;height: 100%;}
  table {position: absolute;left:10%;top:0;bottom: 0;height: 100%;border-left: 0.1vh solid #dddddd;}
  td {text-align: left;padding-left: 2vh;vertical-align: top;font-size: 1.7vh;line-height: 1.2;}
  #year {font-weight: 700;font-size: 1.9vh;color:#333333;}
  tr:before {content:'';display:block;width:1.8vh;height:1.8vh;margin: auto 0 auto -1vh;border-radius:1.5vh;background-color: #dddddd;vertical-align: middle;}
  tr:hover, tr:hover > #year {color:#ea3737;}
  .buy_form {display: none;position: absolute;top: 0;bottom: 0;left: 0;width:100%;height: 100%;right: 0;background-color: rgba(0,0,0,0.6);z-index: 10;}
  .buy_form #form {position: relative;margin: auto;width: 20%;height: 50%;display: flex;flex-direction: column;justify-content: center;align-items: center;background-color: #eeeeee;font-size: 2vh;border-radius: 1.6vh;}
  .buy_form #cl_b {position: absolute;top:4%;right:5%;width:2vh;height:2vh;background-image: url('img/close_m.png');background-size: contain;opacity: .6;cursor: pointer;}
  .buy_form p {font-weight: 400;color:#6a6a6a;margin: 2vh 0;}
  .buy_form input {width:80%;font-size: 2vh;border-top:0;border-left:0;border-right:0;border-bottom: 0.2vh solid #6a6a6a;background-color: rgba(0,0,0,0);padding:0.8vh 0;margin:1vh 0;color:#6a6a6a;}
  .buy_form input::placeholder {font-weight: 400;color:#6a6a6a;}
  .buy_form input:focus {outline: none;}
  .buy_form #button {width:80%;background-color: #168b64;font-size: 2vh;border: 0;padding:0.8vh 1vh;margin-top: 5vh;color:#eeeeee;cursor: pointer;}
  .buy_form #button:hover {background-color:#44a283;}
  .buy_form #mail-status {padding:3%;font-size: 2vh;text-align: center;}
  #credits {position: absolute;text-align: right;bottom:-1vh;}
  .menu {display: none;}
}

/* Small Desktop */
/* @media screen and (max-width:1500px) {
  .wrapper {animation: fadeIn 1.5s ease-out;position: absolute; top:0; bottom:0; left:0; right:0; background-repeat: no-repeat; background-size: cover; background-position: center;z-index: 1;}
  .page_bg {position: fixed;left:0;right:0;top:0;bottom:0;display:inline-block;}
  .page_bg #l {position: absolute;left:0;width:50%;height:100%;background-color: #151515;}
  .page_bg #r {position: absolute;right:0;width:50%;height:100%;background-color: #f3f3f3;}
  .wrapper #filter {position: absolute; top:0; bottom:0; left:0; right:0; background: linear-gradient(20deg, rgba(0,0,0,1) 0%, rgba(188,188,188,0.15) 100%);z-index:2;}
  .l_block {position:fixed;top:9%; bottom:9%; left:9%; width:41%;color:#f3f3f3;z-index: 3;}
  .l_block div #s_title {font-size: 25px; font-weight: 600;}
  .l_block div #b_title {font-size: 70px; font-weight: 700; margin-top:15px;}
  .l_block hr {width: 30%; height:6px; background-color:#e3e3e3; margin:50px 0;}
  .l_block .a_pages {margin-top:3%;line-height: 65px;z-index: 4;}
  .l_block .a_pages a {font-size: 30px !important; font-weight: 700; color:#e3e3e3;}
  .l_block .a_pages a:hover {color:#ea3737;}
  .l_block .a_pages #active {font-size: 30px; font-weight: 700;color:#ea3737;}
  .l_block .bottom {display: flex;flex-direction: row;position: absolute;left:0;bottom:0;z-index: 4;}
  .l_block .bottom #buy_button {position: relative;border: 2px solid #e3e3e3; border-radius: 10px;color:#e3e3e3;font-size: 18px;font-weight: 700;padding:8px 15px;background-color: rgba(0,0,0,0);cursor:pointer;overflow:hidden;}
  .l_block .bottom #buy_button:after {background-color: #f3f3f3;content: "";height: 155px;left: -75px;opacity: .9;position: absolute;top: -50px;transform: rotate(35deg);width: 70px;animation: buygr 3s infinite cubic-bezier(0.6, 0.1, 0.1, 1);z-index: -10;}
  .l_block .bottom #buy_button:hover {background-color: #555555;}
  .l_block .bottom #telegram {border-radius: 21px;margin-left: 30px;display: block;width: 41px;height: 41px;background-image: url('img/telegram.png');background-position: center;background-size: contain;}
  .l_block .bottom #telegram:hover {background-color:#0088cc;}
  .l_block .bottom #whatsapp {border-radius: 21px 21px 21px 0;margin-left: 30px;display: block;width: 41px;height: 41px;background-image: url('img/whatsapp.png');background-position: center;background-size: contain;}
  .l_block .bottom #whatsapp:hover {background-color:#128C7E;}
  .l_block #menu {display: none;}
  .viewer {position: fixed;top:-50%;right:0;width:50%;height:50%;background-color: #555555;text-align: center;z-index: 4;}
  #v_pos {top:-50%;}
  #r_pos {top:9%;bottom:9%;}
  #desc_v {display: none;}
  .viewer #close_v {position: absolute;top:5%;right:4%;width: 30px;height: 30px;background-image: url('img/close.png');background-size: contain;z-index: 6;}
  .viewer #img {height: 100%;transition: opacity .5s;}
  .viewer #zoomer {position: absolute;width: 100%;height: 100%;top: 0;right: 0;left: 0;bottom: 0;z-index: 5;opacity: 0;background-position: 50% 50%;background-repeat: no-repeat;overflow: hidden;cursor: crosshair;}
  .viewer #zoomer:hover {opacity:1;}
  .viewer .desc {position: absolute;bottom:0;bottom: -25%;width:100%;height:25%;display: none;flex-direction: column;justify-content: center;align-items: center;text-align: center;background: linear-gradient(180deg, rgba(243,243,243,1) 85%, rgba(243,243,243,0) 100%);}
  .viewer .desc div #title {font-size: 1.2em;font-weight: 700;}
  .viewer .desc div #year {font-size: 1.2em;font-weight: 600;}
  .viewer .desc #materials {font-size: 1em;font-weight: 400;margin-top: 10px;}
  .viewer .desc #stored {font-size: 1em;font-weight: 400;font-style: italic;margin-top: 10px;}
  .r_block {position:absolute;display: flex;top:9%;bottom:9%; right:0; width:50%; z-index: 3;justify-content: center;align-items: center;}
  .r_block .works {position: absolute;width:90%;height:100%;display:grid;grid-template-rows: 1fr 1fr 1fr 1fr;grid-template-columns:1fr 1fr 1fr;justify-content: center;align-items: center;}
  .r_block .works #pic {width:140px;height:140px;border:2px solid #151515;background-size: 150%;background-position: center;margin: 0 auto auto auto;}
  .r_block .works #pic:hover {border-color: #ea3737;}
  .r_block #text {position: absolute;top:0;right:0;border-bottom: 0;width: 100%;height: 100%;}
  table {position: absolute;left:10%;top:0;bottom: 0;right:9%;height: 100%;border-left: 1px solid #dddddd;}
  td {text-align: left;padding-left: 20px;vertical-align: top;font-size: 0.85em;line-height: 1.2;}
  #year {font-weight: 700;font-size: 1.3em;color:#333333;}
  tr:before {content:'';display:block;width:1.2em;height:1.2em;margin: auto 0 auto -10px;border-radius:1em;background-color: #dddddd;vertical-align: middle;}
  tr:hover, tr:hover > #year {color:#ea3737;}
  .buy_form {display: none;position: absolute;top: 0;bottom: 0;left: 0;width:100%;height: 100%;right: 0;background-color: rgba(0,0,0,0.6);z-index: 10;}
  .buy_form #form {position: relative;margin: auto;width: 20%;height: 50%;display: flex;flex-direction: column;justify-content: center;align-items: center;background-color: #eeeeee;font-size: 14pt;border-radius: 15px;}
  .buy_form #cl_b {position: absolute;top:4%;right:5%;width:20px;height:20px;background-image: url('img/close_m.png');background-size: contain;opacity: .6;cursor: pointer;}
  .buy_form p {font-weight: 400;color:#6a6a6a;margin: 20px 0;}
  .buy_form input {width:80%;font-size: 16pt;border-top:0;border-left:0;border-right:0;border-bottom: 2px solid #6a6a6a;background-color: rgba(0,0,0,0);padding:8px 0;margin:10px 0;color:#6a6a6a;}
  .buy_form input::placeholder {font-weight: 400;color:#6a6a6a;}
  .buy_form input:focus {outline: none;}
  .buy_form button {width:80%;background-color: #168b64;font-size: 16pt;border: 0;padding:8px 10px;margin-top: 50px;color:#eeeeee;cursor: pointer;}
  .buy_form button:hover {background-color:#44a283;}
  .buy_form #mail-status {padding:3%;font-size: 12pt;text-align: center;}
  #credits {position: absolute;text-align: right;bottom:0;}
  .menu {display: none;}
} */

/* Phone */
@media screen and (max-width:999px) {
  .wrapper {animation: fadeIn 1.5s ease-out;position: absolute; top:0; bottom:0; left:0; right:0; z-index: 1;background-image: none !important;overflow-x: hidden;}
  .page_bg {display:none;}
  .wrapper #filter {display: none;}
  .l_block {position:fixed;top:0;left:0;width:100%;height:12%;color:#f3f3f3;background-color: #151515;z-index: 3;display: flex;flex-direction: row;justify-content: space-between;align-items: center;}
  .l_block div {margin-left: 3%;}
  .l_block div #s_title {font-size: 30pt; font-weight: 600;}
  .l_block div #b_title {font-size: 50pt; font-weight: 700; margin-top:10px;}
  .l_block div #b_title br {display: none;}
  .l_block hr {display: none;}
  .l_block .a_pages {display: none;}
  .l_block .bottom {display: none;}
  .l_block #menu {display: block;width:20%;height:55%;margin-right: 1%;background-image: url('img/menu.png');background-size: contain;background-repeat: no-repeat;background-color: rgba(0,0,0,0);border:0;}
  .viewer {position: absolute;top:-50%;right:0;width:100%;height:50%;background-color: #555555;text-align: center;z-index: 4;}
  #v_pos {top:-50%;}
  #r_pos {top:12%;bottom:0;}
  #desc_v {display: none;}
  .viewer #close_v {position: absolute;top:5%;right:4%;width: 100px;height: 100px;background-image: url('img/close.png');background-size: contain;z-index: 6;}
  .viewer #img {display: none;}
  .viewer #zoomer {position: absolute;width: 100%;height: 100%;top: 0;right: 0;left: 0;bottom: 0;z-index: 5;background-size: contain;background-repeat: no-repeat;overflow: hidden;cursor: crosshair;opacity: 1;}
  .viewer .desc {position: absolute;bottom:0;bottom: -25%;width:100%;height:25%;display: none;flex-direction: column;justify-content: center;align-items: center;text-align: center;background: linear-gradient(180deg, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 100%);color:#f3f3f3;}
  .viewer .desc div #title {font-size: 2.2em;font-weight: 700;}
  .viewer .desc div #year {font-size: 2.2em;font-weight: 600;}
  .viewer .desc #materials {font-size: 1.8em;font-weight: 400;margin-top: 10px;}
  .viewer .desc #stored {font-size: 1.8em;font-weight: 400;font-style: italic;margin-top: 10px;}
  .r_block {position:absolute;display: flex;top:12%;bottom:0; left:0;right:0; width:100%; z-index: 3;justify-content: center;align-items: center;}
  .r_block .works {position: absolute;top:5%;width:90%;height:70%;display:grid;grid-template-rows: 1fr 1fr 1fr;grid-template-columns:1fr 1fr;justify-content: center;align-items: center;}
  .r_block .works #pic {width:300px;height:300px;border:2px solid #151515;background-size: 150%;background-position: center;margin: 0 auto auto auto;}
  .r_block .works #pic:hover {border-color: #ea3737;}
  .r_block #text {position: absolute;top:0;right:0;border-bottom: 0;width: 100%;height: 100%;}
  table {position: absolute;left:10%;top:5%;bottom: 10%;right: 10%;height: 100%;border-left: 1px solid #dddddd;color:#f3f3f3;}
  td {text-align: left;padding-left: 20px;vertical-align: top;font-size: 18pt;line-height: 1.2;}
  #year {font-weight: 700;font-size: 20pt;color:#bbbbbb;}
  tr:before {content:'';display:block;width:1.2em;height:1.2em;margin: auto 0 auto -10px;border-radius:1em;background-color: #dddddd;vertical-align: middle;}
  tr:hover, tr:hover > #year {color:#ea3737;}
  .r_block #credits {display: none;}
  .buy_form {display: none;position: absolute;top: 0;bottom: 0;left: 0;width:100%;height: 100%;right: 0;background-color: rgba(0,0,0,0.6);z-index: 20;}
  .buy_form #form {position: relative;margin: auto;width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;background-color: #eeeeee;font-size: 35pt;border-radius: 0;}
  .buy_form #cl_b {position: absolute;top:4%;right:5%;width:60px;height:60px;background-image: url('img/close_m.png');background-size: contain;opacity: .6;cursor: pointer;}
  .buy_form p {font-weight: 400;color:#6a6a6a;margin: 5% 0;}
  .buy_form input {width:80%;font-size: 35pt;border-top:0;border-left:0;border-right:0;border-bottom: 5px solid #6a6a6a;background-color: rgba(0,0,0,0);padding:2% 0;margin:5% 0;color:#6a6a6a;}
  .buy_form input::placeholder {font-weight: 400;color:#6a6a6a;}
  .buy_form input:focus {outline: none;}
  .buy_form #button {width:80%;background-color: #168b64;font-size: 35pt;border: 0;padding:5% 7%;margin-top: 10%;color:#eeeeee;cursor: pointer;}
  .buy_form #button:hover {background-color:#44a283;}
  .buy_form #mail-status {padding:3%;font-size: 12pt;text-align: center;}
  .menu {display: block;position: absolute;top:0;bottom:0;right:-100%;width:100%;height:100%;background-color: #f3f3f3;z-index: 10;transition: menu_in 1s 0 ease-out;}
  .menu div {display:flex;flex-direction: column;justify-content: center;align-items: center;height: 100%;}
  .menu div a {font-weight: 600;font-size: 80pt;color:#151515;margin:50px 0;}
  .menu div #active {color:#ea3737;}
  .menu div #buy_m {font-size: 60pt;background-color: rgba(0,0,0,0);border:2px solid #151515;padding:4% 6%;margin: 10% 0;}
  .menu #credits {position: absolute;bottom: 5%;width: 100%;text-align: center;font-size: 20pt;color:#151515;}
  .menu #menu_hide {position: absolute;top:3%;right:2%;width:100px;height:100px;background-image: url('img/close_m.png');background-size: contain;}
}