/*#############table###########*/
@media only screen and (max-width: 600px) 
/* Mobile Styles */
{
BODY {
font:normal 1em/1.2em Calibri,Arial,Verdana,sans-serif ;
letter-spacing:0;
text-align: left;
vertical-align:top;
margin:0;
padding:0;
height:100%;
background-color:#d8fe91;
}
h1{
margin: 0;
padding:10px 0 0 0;
font-size:1.2em;
}
h2{
margin: 0;
padding:10px 0 0 0;
font-size:1.0em;
text-align: center;
}
p
{
padding-top:10px;
padding-bottom: 10px;
margin:0 30px 0px 0px;
font-size:1.15em;
color:#474747;
line-height:135%;
}
strong
{
font-weight:bold;
}
img
{
border:0;
padding:0;
vertical-align:bottom;
float:left;
}
.top{
width:100%;
/*background-color: #3163CE;*/
background-image : linear-gradient(190deg, rgba(64,255,0,0.2), rgba(64,0,255,0.5)),repeating-radial-gradient(circle farthest-corner at 100% 150%, rgba(0,0,255,0.2), rgba(0,0,0,0) 30%, rgba(0,0,0,0.2) 30%, rgba(0,0,0,0.1) 60%),linear-gradient(90deg, #4b0082, #0000ee, #3cb371);
float: left;
}
.mid{
width:100%;
float: left;
}
.btm{
width:100%;
background-color: #35A671;
float: left;
}
.col1 {
width: 0%;
float:left;
}
.col2 {
width: 95%;
margin: 10px;
padding:  0 5px 0 0px;
background-color:#fefefe;

/*background-color: #F2EFEC;*/
}
.col3 {
width:0%;
min-height:10px;
clear:both;
}
.logo {
width: 260px;
float: left;
}


    table {
        border-collapse: collapse;
        width: 100%;
        font-size: 1.2em
    }
    th,
    td {
        padding: 14px;
        text-align: left;
        border-bottom: 1px solid #ddd
    }
    td {
    width:30%;
    	 background-color: #E8E8E8

    }

    tr:nth-child(even) {
        background-color: #E8E8E8
    }
    td:hover,
    td a:hover {
        background-color: #eee;
        animation-name: myanimation;
        animation-duration: 1s;
        animation-iteration-count: infinite
    }
    @keyframes myanimation {
        0% {}
        50% {
            opacity: 40%
        }
        100% {
            color: whitesmoke
        }
    }



}






/*##########################################################################################*/


@media only screen and (min-width: 601px) and (max-width: 960px) 
{
/* For tablets: */






BODY {
font:normal 1em/1.2em Calibri,Arial,Verdana,sans-serif ;
letter-spacing:0;
text-align: left;
vertical-align:top;
margin:0;
padding:0;
height:100%;
background-color:#d8fe91;
/*background-color:green;*/

}
h1{
margin: 0;
padding:10px 0 0 0;
font-size:1.2em;
}
h2{
margin: 0;
padding:10px 0 0 0;
font-size:1.0em;
text-align: center;
}
p
{
padding-top:10px;
padding-bottom: 10px;
margin:0 0px 0px 0px;
font-size:1.15em;
color:#474747;
line-height:135%;
}
strong
{
font-weight:bold;
}
img
{
border:0;
padding:0;
vertical-align:bottom;
float:left;
}

.top{
width:100%;
/*background-color: #3163CE;*/
background-image : linear-gradient(190deg, rgba(64,255,0,0.2), rgba(64,0,255,0.5)),repeating-radial-gradient(circle farthest-corner at 100% 150%, rgba(0,0,255,0.2), rgba(0,0,0,0) 30%, rgba(0,0,0,0.2) 30%, rgba(0,0,0,0.1) 60%),linear-gradient(90deg, #4b0082, #0000ee, #3cb371);

float: left;
}
.mid{
width:100%;
float: left;
}
.btm{
width:100%;
background-color: #35A671;
float: left;
}
.col1 {
width: 5%;
float:left;
}
.col2 {
max-width: 1452px;
width: 90%;
margin: 0 auto;
float:left;
/*background-color: red;*/

}
.col3 {
width:10%;
min-height:10px;
clear:both;
}
.logo {
width: 260px;
float: left;
}


    table {
        border-collapse: collapse;
        width: 100%;
        font-size: 1.2em
    }
    th,
    td {
        padding: 14px;
        text-align: left;
        border-bottom: 1px solid #ddd
    }
    td {
    width:30%;
    	 background-color: #E8E8E8

    }

    tr:nth-child(even) {
        background-color: #E8E8E8
    }
    td:hover,
    td a:hover {
        background-color: #eee;
        animation-name: myanimation;
        animation-duration: 1s;
        animation-iteration-count: infinite
    }
    @keyframes myanimation {
        0% {}
        50% {
            opacity: 40%
        }
        100% {
            color: whitesmoke
        }
    }



}



/*##########################################################################################*/


@media only screen and (min-width: 961px) {
    /* For pc: */






BODY {
font:normal 1em/1.2em Calibri,Arial,Verdana,sans-serif ;
letter-spacing:0;
text-align: left;
vertical-align:top;
margin:0;
padding:0;
height:100%;
background-color:#d8fe91;
}
h1{
margin: 0;
padding:10px 0 0 0;
font-size:1.2em;
}
h2{
margin: 0;
padding:10px 0 0 0;
font-size:1.2em;
text-align: center;
}
p
{
padding-top:10px;
padding-bottom: 10px;
margin:0 30px 0px 0px;
font-size:1.15em;
color:#474747;
line-height:135%;
}
strong
{
font-weight:bold;
}
img
{
border:0;
padding:0;
vertical-align:bottom;
float:left;
}

 /* unvisited link */
a:link {
  color: white;
}

/* visited link */
a:visited {
  color: white;
}

/* mouse over link */
a:hover {
  color: hotpink;
}

/* selected link */
a:active {
  color: white;
} 

.top{
width:100%;
/*background-color: #3163CE;*/
background-image : linear-gradient(190deg, rgba(64,255,0,0.2), rgba(64,0,255,0.5)),repeating-radial-gradient(circle farthest-corner at 100% 150%, rgba(0,0,255,0.2), rgba(0,0,0,0) 30%, rgba(0,0,0,0.2) 30%, rgba(0,0,0,0.1) 60%),linear-gradient(90deg, #4b0082, #0000ee, #3cb371);

float: left;
}
.mid{
width:100%;
float: left;
}
.btm{
width:100%;
background-color: #35A671;
float: left;
}
.col1 {
width: 20%;
float:left;
}
.col2 {
/*max-width: 1452px;*/
width: 60%;
margin: 0 auto;
float:left;
/*min-height:500px;*/

}
.col3 {
width:20%;
min-height:10px;
clear:both;
}
.logo {
width: 260px;
float: left;
min-height:100px;
}
svg { 
  height: 100%;
  width: 100%;
}

.container {
  width: 90%;
  float: right;
  border-radius: 5px;
  background-color: #AE59E9;
  padding: 20px;
}

    table {
        border-collapse: collapse;
        width: 100%;
        font-size: 1.2em
    }
    th,
    td {
        padding: 14px;
        text-align: left;
        border-bottom: 1px solid #ddd
    }
    td {
    width:30%;
    	 background-color: #E8E8E8

    }

    tr:nth-child(even) {
        background-color: #E8E8E8
    }
    td:hover,
    td a:hover {
        background-color: #eee;
        animation-name: myanimation;
        animation-duration: 1s;
        animation-iteration-count: infinite
    }
    
    @keyframes myanimation {
        0% {}
        50% {
            opacity: 40%
        }
        100% {
            color: whitesmoke
        }
    }    
.hkh {
  animation: myanimation 0.5s;
  animation-iteration-count: infinite;
}
    
   
}