/*** THEMES START ***/

.imagesBlock{
    background: linear-gradient(0deg, #232333 0%,#474766 100%);
    /*min-height: 100%;*/
    /*margin-bottom: 4000px;*/
    /*display: none;*/
}

.themes{
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    /*background: linear-gradient(0deg, #232333 0%,#474766 100%);*/
    /*display: none;*/
}

.theme_wrap{
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    /*background: linear-gradient(0deg, #232333 0%,#474766 100%);*/
    /*display: none;*/
}

.themes_wp{
    display: flex;
    width: 100%;
    height: 150px;
    overflow-y: auto;
    flex-wrap: wrap;
}

.theme_wrap_wp{
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}

.theme{
    width: calc(100%/9);
    background: linear-gradient(20deg, #474766 0%,#232333 80%);
    min-height: 30px;
}

.wrap_for_theme_main{
    display: flex;
    width: 100%;
    justify-content: space-around;
}

.theme_main{
    width: calc(100%/4);
    background: linear-gradient(20deg, #474766 0%,#232333 80%);
    min-height: 30px;
}

.theme img{
    width: 100%;
}

.split {
    height: 50px;
    width: 100%;
}

.artists {
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    padding: 10px 0;
}

.head {
    display: flex;
    justify-content: center;
    padding: 20px 0 30px 0;
    /*font-size: 50px;*/
    /*border: 2px dashed yellow;*/
    color: #CECEE5;
    /*background: linear-gradient(0deg, #232333 0%,#474766 100%);*/
    /*display: none;*/
}

            /*** THEMES END ***/






    
.images {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /*padding: 50px;*/
    /*border: 2px dashed red;*/
}

.mainBlock {
    /*border: 2px dashed red;   */
    background: linear-gradient(180deg, #474766 0%,#232333 100%);
    min-height: calc(100vh - 50px);
    padding-bottom: 50px;
}
    
.imagesBlock {
    /*border: 2px dashed yellow;*/
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    /*display: none;*/
}

.img {
    /*border: 2px dashed red;*/
    /*width: 10%;*/
    width: calc(100%/8);
    position: relative;
    /*display: flex;*/
    /*border: 2px dashed yellow;*/
    
}

.thumb {
    width: 100%;
}

.play {
    position: absolute;
    top: 20%;
    left: 20%;
    height: 60%;
}

.buttonBlock{
    width: 100%;
    margin: 50px 0;
    display: flex;
    /*justify-content: center;*/
    justify-content: space-around;
    /*align-items: center;*/  
    /*flex-direction: column;*/
    flex-wrap: wrap;
    /*flex-wrap: nowrap;*/
}

.button {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-bottom: 40px;
    font-weight: bold;
    padding: 10px;
    padding-right: 15%;
    /*padding: 15px;*/
    /*width: 70%;*/
    width: 40%;
    min-height: 200px;
    font-size: 35px;
    /*background: linear-gradient(0deg, #232333 0%,#474766 100%);*/
    background-position: right;
    background-size: contain;
    background-repeat: no-repeat;
    box-shadow: 0px 1px 2px 0px #CECEE5, 1px 2px 4px 0px #CECEE5, 2px 4px 8px 0px #CECEE5, 2px 4px 16px 0px #CECEE5;
    color: #CECEE5;
    /*display: none;*/
}

.button:hover {
    color: #CECEE5;
    text-decoration: none;
    cursor: pointer;
    box-shadow: inset 0px 0px 15px 2px #CECEE5;
    /*background: linear-gradient(180deg, #232333 0%,#474766 100%);*/
    /*box-shadow: 3px 3px 5px 1px #232333;*/
}
.img {
    overflow: hidden;
    box-shadow: inset 0px 0px 0px 7px white;
}
    
.space {
    background: linear-gradient(180deg, #232333 0%,#474766 100%);
    /*border: 3px dashed red;*/
    /*min-height: 50vh;*/
    display: flex;
}

            /*** NSFW START ***/

.blur {
    filter: blur(9px);
    /*transform: scale(1.1);*/
}

.author, .nsfwAccess {
    position: absolute;
    width: 60%;
    margin-left: 20%;
    margin-top: 12%;
    /*padding: 10px;*/
    /*height: 200px;*/
    /*border: 4px dashed white;*/
    background-color: #1E5799;
    z-index: 10;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    text-align: center;
    box-shadow: 20px 20px 70px 00px #A8AEFF;
    /*display: none;*/
    /*background: linear-gradient(#0052A5 0%, #004182 70%);*/
    background: linear-gradient(180deg, #232333 0%,#474766 80%);
    color: #CECEE5;
    font-weight: bold;
    visibility: hidden;
}

.nsfwAccess p {
    order: 5;
    padding: 20px 20px;
    font-size: 30px;
}

.setAuthor, .nsfwAccessAllow, .nsfwForm {
    order: 4;
    /*background: linear-gradient(#0052A5 0%, #004182 70%);*/
    background: linear-gradient(180deg, #232333 20%,#474766 100%);
    /*width: 300px;*/
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #CECEE5;
    text-decoration: none;
    /*visibility: hidden;*/
}

.nsfwAccessDisallow {
    order: 3;
    /*background: linear-gradient(#0052A5 0%, #004182 70%);*/
    background: linear-gradient(180deg, #232333 20%,#474766 100%);
    cursor: pointer;
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    /*visibility: hidden;*/
}

.nsfwAccessAllow:hover, .nsfwAccessDisallow:hover {
    /*animation: rotate;*/
    /*animation-duration: 1s;*/
    /*animation-fill-mode: forwards;*/
    /*visibility: hidden;*/
    text-decoration: none;
    color: #CECEE5;
    /*background: linear-gradient(180deg, #004182 0%,#0066CC 30%,#00468C 50%,#0052A5 80%);*/
    background: linear-gradient(0deg, #232333 0%,#474766 80%);
}

.showNsfwAccess {
    animation: showNsfwAccess;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes showNsfwAccess {
  0% { visibility: visible; opacity: 0; }
  100% { transform: translateY(50px); opacity: 1; visibility: visible;}

}

.hideNsfwAccess {
    animation: hideNsfwAccess;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes hideNsfwAccess {
  0% { visibility: visible; opacity: 1; transform: translateY(50px)}
  100% { transform: translateY(-50px); opacity: 0; visibility: hidden;}

}

            /*** NSFW END ***/

            /*** TITLE START ***/

.title_wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    /*align-items: flex-end;*/
    position: relative;
    min-height: 150px;
}

.goBack {   
    position: absolute;
    left: 20px;
    color: #CECEE5;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.goBackLink {   
    color: #CECEE5;
    text-decoration: none;
    font-size: 50px;
    z-index: 10;
}

.goBackLink:hover { 
    color: #CECEE5;
    text-decoration: none;
}

.title_h1 { 
    color: #CECEE5;
    text-align: center;
    z-index: 5;
    /*display: flex;*/
    /*justify-content: flex-end;*/
    /*align-items: center;*/
    /*display: none;*/
}

.title_h1 h1 {
    /*margin: 30px 0;*/
    font-size: 48px;
    z-index: 5;
    /*display: flex;*/
    /*align-items: center;*/
    /*justify-content: center;*/
}

.title_img {
    /*height: 100%;*/
}

.thumb_hero {
    /*margin-right: -20px;*/
}

.title_img img {
    height: 180px;
    /*margin-left: 20px;*/
}

.title_images {
    display: flex;
    /*justify-content: center;*/
    overflow-x: scroll;
}

.img_line_cosplay {
    margin-left: 0;
    height: 60px;
}

.img_line_cosplay img {
    height: 60px;
}

            /*** TITLE END ***/

            /*** SCROLLBAR START ***/

.title_images.title_images::-webkit-scrollbar-track, .themes_wp::-webkit-scrollbar-track {
background-color:#474766; /* цвет фона */
}

.title_images::-webkit-scrollbar-thumb, .themes_wp::-webkit-scrollbar-thumb {
-webkit-border-radius: 5px;
border-radius: 5px;
background-color:#232333; /* цвет ползунка */
}

.title_images::-webkit-scrollbar, .themes_wp::-webkit-scrollbar{
width: 7px;
}

            /*** SCROLLBAR END ***/



.switchLang {
    position: absolute;
    width: 20%;
    /*margin-left: 40%;
    margin-top: 25%;*/
    padding-top: 10px;
    /*height: 200px;*/
    /*border: 4px dashed white;*/
    background-color: #1E5799;
    z-index: 12;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /*visibility: hidden;*/
    opacity: 0;
    box-shadow: 20px 20px 70px 00px #A8AEFF;
    /*display: none;*/
    /*background: linear-gradient(#0052A5 0%, #004182 70%);*/
    background: linear-gradient(180deg, #232333 0%,#474766 80%);
    color: #CECEE5;
    font-weight: bold;
}

.showSwitchLang {
    animation: showSwitchLang;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes showSwitchLang {
  0% { transform: translate(-160px, -80px) scale(0.1);  opacity: 0; }
  /*20% { opacity: 0.75; }*/
  100% { transform: translate(20px, 20px) scale(1); opacity: 1; }

}

.hideSwitchLang {
    animation: hideSwitchLang;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes hideSwitchLang {
  0% { transform: translate(20px, 20px) scale(1); opacity: 1; }
  /*20% { opacity: 0.75; }*/
  100% { transform: translate(-160px, -80px) scale(0.1); opacity: 0; display: none; }

}

.exitSwitchLang {
    order: 3;
    /*background: linear-gradient(#0052A5 0%, #004182 70%);*/
    background: linear-gradient(180deg, #232333 20%,#474766 100%);
    cursor: pointer;
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.exitSwitchLang:hover {
    text-decoration: none;
    color: #CECEE5;
    background: linear-gradient(0deg, #232333 0%,#474766 80%);
}




            /*** ANIMATE START ***/

.imagesBlock, .button-wrap {
    animation: shift-images;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes shift-images {
  0% { transform: translateY(500px); opacity: 0; }
  30% { transform: translateY(500px); opacity: 0; }
  100% { transform: translateX(0px); opacity: 1; }
}

.theme_wrap:nth-child(1) {
    animation: shift-wrap-1;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes shift-wrap-1 {
  0% { transform: translateY(500px); opacity: 0; }
  30% { transform: translateY(500px); opacity: 0; }
  100% { transform: translateY(0px); opacity: 1; }
}

.theme_wrap:nth-child(3) {
    animation: shift-wrap-3;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes shift-wrap-3 {
  0% { transform: translateY(300px); opacity: 0; }
  30% { transform: translateY(300px); opacity: 0; }
  100% { transform: translateY(0px); opacity: 1; }
}

.theme_wrap:nth-child(5) {
    animation: shift-wrap-5;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes shift-wrap-5 {
  0% { transform: translateY(100px); opacity: 0; }
  30% { transform: translateY(100px); opacity: 0; }
  100% { transform: translateY(0px); opacity: 1; }
}


.title_img:nth-child(1) {
    animation: shift-1;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes shift-1 {
  0% { transform: translateX(-10px); opacity: 0; }
  30% { transform: translateX(-10px); opacity: 0; }
  100% { transform: translateX(0px); opacity: 1; }
}

.title_img:nth-child(2) {
    animation: shift-2;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes shift-2 {
  0% { transform: translateX(-100px); opacity: 0; }
  30% { transform: translateX(-100px); opacity: 0; }
  100% { transform: translateX(0px); opacity: 1; }
}

.title_img:nth-child(3) {
    animation: shift-3;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes shift-3 {
  0% { transform: translateX(-200px); opacity: 0; }
  30% { transform: translateX(-200px); opacity: 0; }
  100% { transform: translateX(0px); opacity: 1; }
}

.title_img:nth-child(4) {
    animation: shift-4;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes shift-4 {
  0% { transform: translateX(-300px); opacity: 0; }
  30% { transform: translateX(-300px); opacity: 0; }
  100% { transform: translateX(0px); opacity: 1; }
}

.title_img:nth-child(5) {
    animation: shift-5;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes shift-5 {
  0% { transform: translateX(-400px); opacity: 0; }
  30% { transform: translateX(-400px); opacity: 0; }
  100% { transform: translateX(0px); opacity: 1; }
}

.title_img:nth-child(6), .title_h1, .goBackLink {
    animation: shift-6;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes shift-6 {
  0% { transform: translateX(-500px); opacity: 0; }
  30% { transform: translateX(-500px); opacity: 0; }
  100% { transform: translateX(0px); opacity: 1; }
}

.title_img:nth-child(7) {
    animation: shift-7;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes shift-7 {
  0% { transform: translateX(-600px); opacity: 0; }
  30% { transform: translateX(-600px); opacity: 0; }
  100% { transform: translateX(0px); opacity: 1; }
}

.title_img:nth-child(8) {
    animation: shift-8;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes shift-8 {
  0% { transform: translateX(-700px); opacity: 0; }
  30% { transform: translateX(-700px); opacity: 0; }
  100% { transform: translateX(0px); opacity: 1; }
}

.title_img:nth-child(9) {
    animation: shift-9;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes shift-9 {
  0% { transform: translateX(-800px); opacity: 0; }
  30% { transform: translateX(-800px); opacity: 0; }
  100% { transform: translateX(0px); opacity: 1; }
}

.title_img:nth-child(10) {
    animation: shift-10;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes shift-10 {
  0% { transform: translateX(-900px); opacity: 0; }
  30% { transform: translateX(-900px); opacity: 0; }
  100% { transform: translateX(0px); opacity: 1; }
}

.title_img:nth-child(11) {
    animation: shift-11;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes shift-11 {
  0% { transform: translateX(-1000px); opacity: 0; }
  30% { transform: translateX(-1000px); opacity: 0; }
  100% { transform: translateX(0px); opacity: 1; }
}

.title_img:nth-child(12) {
    animation: shift-12;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes shift-12 {
  0% { transform: translateX(-1100px); opacity: 0; }
  30% { transform: translateX(-1100px); opacity: 0; }
  100% { transform: translateX(0px); opacity: 1; }
}

.title_img:nth-child(13) {
    animation: shift-13;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes shift-13 {
  0% { transform: translateX(-1200px); opacity: 0; }
  30% { transform: translateX(-1200px); opacity: 0; }
  100% { transform: translateX(0px); opacity: 1; }
}

.title_img:nth-child(14) {
    animation: shift-14;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes shift-14 {
  0% { transform: translateX(-1300px); opacity: 0; }
  30% { transform: translateX(-1300px); opacity: 0; }
  100% { transform: translateX(0px); opacity: 1; }
}

.title_img:nth-child(15) {
    animation: shift-15;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes shift-15 {
  0% { transform: translateX(-1400px); opacity: 0; }
  30% { transform: translateX(-1400px); opacity: 0; }
  100% { transform: translateX(0px); opacity: 1; }
}

.title_img:nth-child(16) {
    animation: shift-16;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes shift-16 {
  0% { transform: translateX(-1500px); opacity: 0; }
  30% { transform: translateX(-1500px); opacity: 0; }
  100% { transform: translateX(0px); opacity: 1; }
}

.title_img:nth-child(17) {
    animation: shift-17;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes shift-17 {
  0% { transform: translateX(-1500px); opacity: 0; }
  30% { transform: translateX(-1500px); opacity: 0; }
  100% { transform: translateX(0px); opacity: 1; }
}

            /*** ANIMATE END ***/



.button-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-random {
    background: linear-gradient(180deg, #474766 0%, #232333 50%,#474766 100%);
    border: 1px solid #232333;
    width: 250px;
    /*margin: 10px 0 10px 0;*/
    margin-bottom: 30px;
    padding: 3px 8px 3px 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    color: #CECEE5;
}

.btn-random:hover {
    color: #CECEE5;
}