.background{
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: -1;
}

.header{
width: 100%;
padding: 1px;
text-align: center;
position: absolute;
top: 3%;
left: 0%;
}

.header h1{
font-size: 74px;
font-weight: bold;
color: white;
text-shadow: 1px -3px 0 #FF8585, 2px 3px 0 #09376F, -3px 3px 0 #0F2949;
}

.header h2{
color: white;
}

.back{
background: url("14.gif") no-repeat;
background-size: cover;
height: 400px;
position: relative;
}

ul.link{
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #00030F;
height: 100%;
overflow: auto;
z-index: 4;
}

ul.link li a{
display: block;
color: white;
text-align: center;
padding: 25px 25px;
text-decoration: none;
font-size: 23px;
}

ul.link li a:hover{
color: black;
transition: .2s ease;
background-color: white;
}

ul.link li a.links{
background-color: #251F32;
border-radius: 10px;
color: white;
}

@media screen and (min-width: 1100px){
ul.link{
width: 100%;
height: auto;
position: relative;
}

ul.link li a{
float: left;
}

}

@media screen and (max-width: 1100px){
ul.link li a{
display: none;
}

}

.dropbtn{
background-color: #00030F;
color: white;
padding: 16px;
font-size: 22px;
cursor: pointer;
width: 100%;
border: none;
transition: .2s ease;
}

.dropbtn:hover{
background-color: white;
color: black;
}

.dropdown{
position: relative;
display: inline-block;
}

.dropdown-content{
text-align: center;
display: none;
position: absolute;
background-color: white;
width: 100%;
overflow: auto;
z-index: 3;
}

.dropdown-content a{
color: black;
text-decoration: none;
display: block;
padding: 10px;
transition: .2s ease;
}

.dropdown-content a:hover{
background-color: #D2C0DE;
}

.show{
display: block;
}

@media screen and (max-width: 1100px){
.dropdown{
display: block;
}
}

@media screen and (min-width: 1100px){
.dropdown{
display: none;
}
}

.card{
padding: 10px;
margin: auto;
width: 76%;
background-color: #5D6788;
border-radius: 10px;
border: 5px solid #0E1C49;
}

.column{
float: left;
width: 50%;
}

.row:after{
content: "";
display: table;
clear: both;
}

@media screen and (max-width: 1100px){
.column{
width:100%;
}

.text1 ul{
margin: 0 0 20px 10px;
}

.text1 ul li{
font-size: 20px;
}
}

.text2{
width: 100%;
position: absolute;

}

.text2 li{
display: inline-block;
font-size: 25px;
color: #340000;
}

.text2 ul{
width: 70%;
text-align: center;
background-color: #FF4634;
border-radius: 5px;
border: 5px solid #930000;
list-style-type: none;
font-weight: bold;
margin: auto;
padding: 25px;
}

@media screen and (max-width: 1150px){
.warning1,.warning2{
display: none;
}
}

.text1 li{
width: 100%;
list-style-type: none;
padding-top: 10px;
font-size: 25px;
}

.text1 ul{

}

.warning1{
position: absolute;
top: 15%;
left: 15%;
}

.warning2{
position: absolute;
top: 15%;
right: 15%;
}

.tooltip1{
position: relative;
z-index: 1;
}

.tooltip1 .tooltiptext1{
visibility: hidden;
width: 135px;
height: auto;
background-color: black;
color: #fff;
text-align: center;
border-radius: 5px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: -10px;
right: 110%;
opacity: 0;
transition: .2s ease;
}

.tooltip1 .tooltiptext1::after{
content:"";
position: absolute;
top: 50%;
left: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent black;
}

.tooltip1:hover .tooltiptext1{
visibility: visible;
opacity: 1;
}

.tooltip2{
position: relative;
z-index: 1;
}

.tooltip2 .tooltiptext2{
visibility: hidden;
width: 150px;
height: auto;
background-color: black;
color: #fff;
text-align: center;
border-radius: 5px;
padding: 5px 0;
position: absolute;
bottom: 160%;
left: 0%;
opacity: 0;
transition: .2s ease;
margin left: -60px;
}

.tooltip2 .tooltiptext2::after{
content:"";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}

.tooltip2:hover .tooltiptext2{
visibility: visible;
opacity: 1;
}

.tooltip3{
position: relative;
z-index: 1;
}

.tooltip3 .tooltiptext3{
visibility: hidden;
width: 200px;
height: auto;
background-color: black;
color: #fff;
text-align: center;
border-radius: 5px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: -30px;
left: 110%;
opacity: 0;
transition: .2s ease;
}

.tooltip3 .tooltiptext3::after{
content:"";
position: absolute;
top: 50%;
right: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}

.tooltip3:hover .tooltiptext3{
visibility: visible;
opacity: 1;
}

.tooltip4{
position: relative;
display: inline-block;
font-size: 22px;
color: white;
cursor: pointer;
}

.tooltip4 .tooltiptext4{
visibility: hidden;
width: 100px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 5px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: -45px;
left: -40px;
opacity: 0;
transition: .2s ease;
font-size: 20px;
}

.tooltip4:hover .tooltiptext4{
visibility: visible;
opacity: 1;
}

.box img{
margin-top: 22px;
margin-bottom: 10px;
box-shadow: 0 0 5px 5px #FF7800;
border-radius: 5%;
width: 55%;
}

.box img:hover{
box-shadow: 0 0 13px 13px #FFAE00;
border-radius: 15%;
transition: .2s ease;
}

p{
font-size: 22px;
;
letter-spacing: 2px;
line-height: 1.5;
display: inline-block;
color: white;
padding: 40px;
background-color: #1F1734;
width: 67%;
border-radius: 10px;
}

p img{
float: right;
margin-left: 12px;
transition: .2s ease;
}

.for-p{
content: "";
display: table；
clear: both;
}

.p1{
width: 100%;
text-align: center;
}

.p1 a{
text-decoration: none; 
color: #F47A07;
}


.p1 a:hover{
color: #FCC004;
font-size: 22.5px;
transition: .2s ease;
}

.p2{
font-size: 22px;
letter-spacing: 2px;
display: inline-block;
color: white;
padding: 40px;
background-color: #1F1734;
width: 67%;
border-radius: 10px;
}

.p2 li{
display: inline-block;
}

.cat{
position: fixed;
left: 2px;
bottom: 8px;
z-index: 3;
}

.cat1{
position: absolute;
bottom: 7%;
left: 0%;
opacity: 0.2;
}

.cat1:hover{
opacity: 1;
transition: .2s ease;
}

.foot{
height: 20px;
}

.content{
display: none;
}

.loader-wrapper{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #0F0234;
display: flex;
justify-content: center;
align-items: center;
}

.loader{
display: inline-block;
width: 30px;
height: 30px;
position: relative;
border: 4px solid white;
animation: loader 2s infinite ease;
}

.loader-inner{
vertical-align: top;
display: inline-block;
width: 100%;
background-color: white;
animation: loader-inner 2s infinite ease-in;
}

@keyframes loader{
0% { transform: rotate(0deg);}
25% { transform: rotate(180deg);}
50% { transform: rotate(180deg);}
75% { transform: rotate(360deg);}
100% { transform: rotate(360deg);}
}

@keyframes loader-inner{
0% { height: 0%;}
25% { height: 0%;}
50% { height: 100%;}
75% { height: 100%;}
100% { height: 0%;}
}

.load-text{
position: absolute;
top: 60%;
font-size: 20px;
color: white;
font-weight: bold;
animation: load-text 6s infinite ease;
letter-spacing: 3px;
}

@keyframes load-text{
0% { font-size: 20px;}
25% { font-size: 19.5px;}
50% { font-size: 20px;}
75% { font-size: 19px;}
100% { font-size: 20px;}
}