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

.header{
width: 100%;
height: 380px;
position: absolute;
top: 102%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}


.fb{
position: fixed;
right: 25px;
bottom: 8px;
}

.ig{
position: fixed;
right: 100px;
bottom: 8px;
}

.back{
background: url("3.jpg") no-repeat center;
background-size: cover;
height: 1500px;
position: relative;
}


.link{
overflow: hidden;
position: -webkit-sticky;
position: sticky;
z-index:10;
top: 0;
background-color: #002036;
background-image: linear-gradient(180deg, #00030F, darkblue);
}

.link a{
float: left;
display: inline-block;
color: white;
text-align: center;
padding: 24px 26px;
text-decoration: none;
font-size: 28px;
}

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

.link .links a{
background-color: blue;
border-radius: 10px;
}

.link .links a:hover{
color: black;
transition: .2s ease;
background-color: white;
border-radius: 0px;
}

.card{
padding: 10px;
margin-top: 20px;
margin-left: 80px;
margin-right: 80px;
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: 800px){
.column{
width:100%;
}
}

.text1 li{
display: block;
padding-top: 10px;
}

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

.text2 li{
display: inline-block;
font-size: 30px;
padding-bottom: 10px;
padding-top: 13px;
color: white;
}


.text2 ul{
width: 60%;
text-align: center;
background-image:url(59.gif);
border-radius: 5px;
border: 5px dotted white;
list-style-type: none;
font-weight: bold;
margin: auto;
}

ul{
list-style-type: none;
margin-top: 10px;
padding: 0;
font-size: 30px;
}



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



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

.tooltip2 .tooltiptext2{
visibility: hidden;
width: 300px;
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;
margin: auto;
}

.tooltip3 .tooltiptext3{
visibility: hidden;
width: 600px;
height: auto;
background-color: black;
color: #fff;
text-align: center;
border-radius: 5px;
padding: 5px 0;
position: absolute;
font-size:21px;
bottom: 100%;
right: 13%;
opacity: 0;
transition: .2s ease;

}

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

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

.tooltip4{
position: relative;
display: inline-block;
font-size: 25px;

}

.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 Blue;
border-radius: 5%;
}


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

p{
font-size: 27px;
display: inline-block;
padding-bottom: 2px;
padding-left: 10px;
padding-right: 10px;
text-shadow: 1px -1px 0 #230033, 1px 2px 0 #230033;
}

.p1{
color: white;
margin-top: 40px;
margin-left: 20px;
margin-right: 20px;
text-align: center;
font-weight: bold;
}

.p1 a{
text-decoration: none; 
color: #F47A07;
padding-left: 10px;
padding-right: 10px;
}


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

.cat{
position: fixed;
left: 2px;
bottom: 8px;
}

.cat1{
position: absolute;
top: -30%;
left: 0%;
opacity: 0.1;
}

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

.para1
{ 
background: url("15.gif") no-repeat; 
background-size: cover; 
background-position:center; 
line-height: 1.2; 
color: orange; 
letter-spacing: 10px; 
font-size: 20px; 
text-align: center; 
line-height: 1.4; 
width: 500px; 
padding: 50px; 
margin: 10px; 

}




.para5
{ 
background: url("28.gif") no-repeat; 
background-size: cover; 
background-position:center; 
line-height: 1.2; 
color: white; 
letter-spacing: 10px; 
font-size: 20px; 
text-align: center; 
line-height: 1.4; 
width: 500px; 
padding: 50px; 
margin: 10px; 
}

.para6
{ 
background: url("51.gif") no-repeat; 
background-size: cover; 
background-position:center; 
line-height: 1.2; 
color: white; 
letter-spacing: 10px; 
font-size: 20px; 
text-align: center; 
line-height: 1.4; 
width: 500px; 
padding: 50px; 
margin: 10px; 
}

.para7
{ 
background: url("61.gif") no-repeat; 
background-size: cover; 
background-position:center; 
line-height: 1.2; 
color: white; 
letter-spacing: 10px; 
font-size: 20px; 
text-align: center; 
line-height: 1.4; 
width: 500px; 
padding: 50px; 
margin: 10px; 
}


.foot{
height: 80px;
bakcground-color: red;
}


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

.f1{
visibility: hidden;
opacity: 0;
position: absolute;
top: -200px;
left: 450px;
border: 10px dotted blue;
}

.f:hover .f1{
opacity: 1;
visibility: visible;

}


.f2{
visibility: hidden;
opacity: 0;
position: absolute;
top: -200px;
left: 300px;
border: 10px dotted blue;
}

.f:hover .f2{
opacity: 1;
visibility: visible;

}

.f3{
visibility: hidden;
opacity: 0;
position: absolute;
top: -200px;
left: 500px;
border: 10px dotted blue;
}

.f:hover .f3{
opacity: 1;
visibility: visible;

}

.f:hover{
font-size:22px;
color:pink

}

h2 {
  background-color: black;
  line-height: 1.1;
  color: white;
  text-align: center;
  letter-spacing: 3px;
  font-family:impact;
  font-style: oblique;
  font-size: 25px;
}

.text345
{
  font-family:kaiti;
  color: black;
  background: url("21.gif") ; 
  width:650px;
  font-size:30px;
  line-height: 1.0;
  padding:20px;
  margin:50px;
  border-style:dashed groove ;
  border-color:#FF8040;
}

#divjuii
{
 margin: 40px auto;
  font-family: 'Ubuntu',ink free;

  font-size:1.4em;
  font-weight: bold;
  color: #121212;
  text-align: center;
  letter-spacing: 5px;
  text-shadow: -1px 1px 0 #41ba45,
          1px 1px 0 #c63d2b,
         1px -1px 0 #42afac,
        -1px -1px 0 #c6c23f;

}

.tooltip5{
position: relative;
display: inline-block;
font-size: 20px;

}

.tooltip5 .tooltiptext5{
visibility: hidden;
width: 120px;
background-color: #31397F;
color: white;
text-align: center;
border-radius: 5px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: -45px;
left: -45px;
opacity: 0;
transition: .2s ease;
font-size: 20px;
}

.tooltip5:hover .tooltiptext5{
visibility: visible;
opacity: 1;
}



----


.tooltip6{
position: relative;
display: inline-block;
font-size: 20px;

}

.tooltip6 .tooltiptext6{
visibility: hidden;
width: 120px;
background: #f09433; 
background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); 
background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );

color: black;
text-align: center;
border-radius: 10px;
padding: 10px 0;
position: absolute;
z-index: 1;
top: -55px;
left: -30px;
opacity: 0;
transition: .2s ease;
font-size: 20px;
}

.tooltip6:hover .tooltiptext6{
visibility: visible;
opacity: 1;
}