body{padding:0; margin:0; background:url(img/bg.jpg);font-family: arial;}
img{max-width:100%;}
.box{font-size:30px; color:#000; text-align:center;width:100%; color:#fff; font-family: arial; text-transform
:uppercase}

.topbox{width:96%; height:170px; border:3px solid #27af6f; padding:0px; margin:0 auto; moz-border-radius:6px; border-radius:6px; background:rgba(29,184,115,0.2);}
.sec1{width:50%; float:left; font-size:16px; text-transform:uppercase; color:#fff; line-height:30px; position:relative; margin:20px 0 0 0;}
.toph{ background:url(img/bg2.png) no-repeat; padding:7px 0 7px 20px; margin:0;font-size:25px; text-transform:uppercase; color:#fff; }

.topbox2{width:58%; height:564px; border:3px solid #5277e3; padding:0px; margin:20px auto 0 29px; float:left; moz-border-radius:6px; border-radius:6px; background:rgba(82,119,227,0.2);}
.topbox33{width:30%; float:left;}
.toph2{ background:url(img/bg3.png) no-repeat; padding:7px 0 7px 20px; margin:0;font-size:25px; text-transform:uppercase; color:#fff; }
.headb{ font-size:20px; color:#fff; text-align:center; }
.topbox3{width:76%; margin:0 auto;}
.box3{ font-size:15px;width:48%; float:left; color:#fff; background:rgba(225,126,44,0.7); moz-border-radius:6px; border-radius:6px; border:3px solid #e17e2c;  margin:20px 0 0 0; padding:0;}
.box4{width:48%; float:right;font-size:15px; color:#fff; background:rgba(32,185,198,0.7); moz-border-radius:6px; border-radius:6px; border:3px solid #20b9c6;  margin:20px 0 0 0;}
.box3 h3{ background:#e17e2c; padding:5px 0 5px 20px; font-size:20px; color:#fff; text-transform:uppercase; margin:0; }
.box4 h3{ background:#20b9c6; padding:5px 0 5px 20px; font-size:20px; color:#fff; text-transform:uppercase; margin:0; }
.box3 h4{ font-family:Arial, Helvetica, sans-serif; font-size:15px; line-height:30px;}
.box4 h4{ font-family:Arial, Helvetica, sans-serif; font-size:15px; line-height:30px; margin:20px 0 0 20px;}
.canvasjs-chart-canvas{ width:100%; height:450px;}

@keyframes spin {
    0% { transform: rotate(360deg); }
    100% { transform: rotate(0deg); }
}
@-moz-keyframes spin {
    0% { -moz-transform: rotate(360deg); }
    100% { -moz-transform: rotate(0deg); }
}
@-webkit-keyframes spin {
    0% {-webkit-transform: rotate(360deg); }
    100% { -webkit-transform: rotate(0deg); }
}
@-o-keyframes spin {
    0% { -o-transform: rotate(360deg); }
    100% { -o-transform: rotate(0deg); }
}


.spin {
    animation: spin 3.5s linear 0s infinite normal;
    -moz-animation: 3.5s linear 0s normal none infinite spin;
    -webkit-animation: spin 3.5s linear 0s infinite normal;
    -0-animation: spin 3.5s linear 0s infinite normal;
    border-radius: 50px 50px 50px 50px;
    overflow: hidden;
    margin-left: -50px;
    margin-top: -50px;
    top: 50%;
    left:30px;
    position: absolute;
}
.spin:hover {
    animation: spin 3.5s linear 0s infinite loop;
    -moz-animation: 3.5s linear 0s loop none infinite spin;
    -webkit-animation: spin 3.5s linear 0s infinite loop;
    -0-animation: spin 3.5s linear 0s infinite loop;
}
.yin-yang {

    background:url(img/icon1.png);
	background-repeat:no-repeat;
	background-size:cover;
    border-color: red;
   
    border-width:0;
    border-radius: 100%;
    position: relative;
}


.spin1 {
    animation: spin 3.5s linear 0s infinite normal;
    -moz-animation: 3.5s linear 0s normal none infinite spin;
    -webkit-animation: spin 3.5s linear 0s infinite normal;
    -0-animation: spin 3.5s linear 0s infinite normal;
    border-radius: 50px 50px 50px 50px;
    overflow: hidden;
    margin-left: -50px;
    margin-top: -50px;
  top: 75px;
left: 90%;
    position: absolute;
}
.spin1:hover {
    animation: spin 3.5s linear 0s infinite loop;
    -moz-animation: 3.5s linear 0s loop none infinite spin;
    -webkit-animation: spin 3.5s linear 0s infinite loop;
    -0-animation: spin 3.5s linear 0s infinite loop;
}
.yin-yang1 {

    background:url(img/icon2.png);
	background-repeat:no-repeat;
	background-size:cover;
    border-color: red;
   
    border-width:0;
    border-radius: 100%;
    position: relative;
}
/*.yin-yang:before {
    content:"";
    position: absolute;
    top: 50%;
    left: 0;
    background: #eee;
    border: 18px solid red;
    border-radius: 100%;
    width: 12px;
    height: 12px;
}
.yin-yang:after {
    content:"";
    position: absolute;
    top: 50%;
    left: 50%;
    background: red;
    border: 18px solid #eee;
    border-radius:100%;
    width: 12px;
    height: 12px;
}
*/