@font-face {
	font-family: crock;
	src: url(crock.ttf);
}

body {
    background: none !important;
}

#quitter:hover{
    opacity: 0.6;
}

#quitter{
    position: absolute;
    right: 40px;
    top: 30px;
    font-size: 50px;
    color: red;
    cursor: pointer;
    z-index: 15;
}


.logo-server {
    width: 99%;
    left: 01px;
    top: 01px;
    position: relative;
}
.typo{
    font-size:16px;
}

.zone_area {
    top: 130px;
    left: 80px;
    width: 680px;
    position: relative;
}

.zone_logo p {
    position: relative;
    font-size: 18px;
}
.zone_logo b{font-weight: 600;}
.bg-top {
    position: relative;
}

.bg-bottom {
    background: black;
    position: relative;
    z-index: 2;
}

#nui_content {
    font-size: 20px;
    color: white;
    position: relative;
    background: url(images/bg.png);
    background-color: #000000e6;
    background-position: bottom;
    width: 100%;
    font-family: arial;

}

.tips {
    position: fixed;
    width: 100%;
    z-index: 5;
    top: 0;
    background: #010101ed;
    padding: 50px;
    min-height: 100%;
}

.zone_content {
    position: relative;
    width: 100%;
    z-index: 2;
    top: 0;
}

.overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    z-index: 0;
    background: linear-gradient(90deg, rgb(0 0 0) 0%, rgb(0 0 0) 39%, rgb(0 0 0) 62%, rgb(0 212 255 / 0%) 100%);
}

.zone_img {
    background-image: url(images/bg.jpg);
    background-size: contain;
    background-position: right;

}


.zone-content {
    min-height: 600px;
}

.text-red{color:#cd0001;}


button {
    background-color: aliceblue;
    padding: 12px;
}


.case_01 {
    background: url(images/01.jpg);
    background-size: cover;
    min-height: 300px;
    border-radius: 5px;
}

.case_02 {
    background: url(images/02.jpg);
    background-size: cover;
    min-height: 300px;
    border-radius: 5px;
}

.case_03 {
    background: url(images/03.jpg);
    background-size: cover;
    min-height: 300px;
    border-radius: 5px;
}

.case_04 {
    background: url(images/04.jpg);
    background-size: cover;
    min-height: 300px;
    border-radius: 5px;
}

.case_05 {
    background: url(images/05.jpg);
    background-size: cover;
    min-height: 300px;
    border-radius: 5px;
}

.case_06 {
    background: url(images/06.jpg);
    background-size: cover;
    min-height: 300px;
    border-radius: 5px;
}

.case_07 {
    background: url(images/07.jpg);
    background-size: cover;
    min-height: 300px;
    border-radius: 5px;
}

.case_08 {
    background: url(images/08.jpg);
    background-size: cover;
    min-height: 300px;
    border-radius: 5px;
}
.case_09 {
    background: url(images/09.jpg);
    background-size: cover;
    min-height: 300px;
    border-radius: 5px;
}
.case_10 {
    background: url(images/10.jpg);
    background-size: cover;
    min-height: 300px;
    border-radius: 5px;
}
.case_11 {
    background: url(images/11.jpg);
    background-size: cover;
    min-height: 300px;
    border-radius: 5px;
}
.case_12 {
    background: url(images/12.jpg);
    background-size: cover;
    min-height: 300px;
    border-radius: 5px;
}

.overlaybottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    z-index: 0;
    background: linear-gradient(180deg, rgb(2 0 36 / 0%) 0%, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 0%) 0%, rgba(0, 0, 0, 0) 76%, rgb(0 0 0) 100%);
}

.text {
    font-size: 30px;
    text-transform: uppercase;
    font-weight: 600;
    width: 100%;
    background: #00000096;
}

.modal .modal-dialog {
    width: 100%!important;
    max-width: initial;
    margin:0;
}
.modal-content {
    min-height: 100%;
    background-color: #000000ed!important;
}
.modal-header {
    background: #4e0b0b;
    color: white;
    border-bottom: none!important;
}

.modal-backdrop{display: none;}


.close {
    color: white;
    cursor: pointer;
    font-size: 25px;
    margin-right: 50px;
}

.title{
    line-height: 40px;
}

.case_04:hover, .case_03:hover, .case_02:hover, .case_01:hover,.case_05:hover, .case_06:hover, .case_07:hover, .case_08:hover,
.case_09:hover, .case_10:hover, .case_11:hover, .case_12:hover .text {
    color: #cc0000;
}

.zone-content .col-lg-3{
    margin-bottom:20px;
}

::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-thumb {
    background-color: #cb0000;
}
::-webkit-scrollbar-track {
    background: #0f161d;
}







img[scalable]
{
  cursor: pointer;
  transition-property: max-width, max-height, left, top;
  transition-duration: 0.9s;
}