/*** 
set the width and height to match your images 
**/
  .slideshow {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            z-index: -1;
            background-size: cover;
        }

        .box {
            width: 100%;
            height: calc(100% + 30px);
            position: fixed;
            top: -30px;
            left: 0;
            z-index: 999999999;
            overflow: hidden;
            background: #000;
            display: inline-block;
            margin: 0;
        }

            .box li {
                display: inline-block;
                float: left;
                width: 100%;
                height: 100%;
                overflow: hidden;
                position: absolute;
                top: 0;
                left: 0;
                opacity: 0;
                transition: opacity 1s;
            }

                .box li img {
                    width: 100%;
                    height: 100%;
                }

                .box li video {
                    width: 100%;
                    height: 100%;
                    position: fixed;
                }

        .v {
            color: #e3e0e3;
        }

        .login-popup {
            top: 15%;
            box-shadow: 0px 0px 0px #999;
            -moz-box-shadow: 0px 0px 20px #999;
            -webkit-box-shadow: 0px 0px 0px #999;
        }

        .marquee {
            position: absolute;
            bottom: 0px;
            width: 62%;
            line-height: 26px;
            left: 0px;
            font-size: 20px;
            font-weight: 500;
            z-index: 99;
            color: #fff2d3;
            background-color: #3a2f25;
        }

        .left-section {
            /*height: 100%;*/
        }

        .right-section {
            z-index: 999;
        }

        .amit {
            width: 125px;
            border: none;
            top: 50%;
            position: absolute;
            left: 50%;
            margin-top: 70px;
            margin-left: 78px;
        }

        .holiday-homwork {
            width: 233px;
            margin: 0px;
            position: absolute;
            top: 10px;
            right: 10px;
            float: right;
            z-index: 99;
        }

            .holiday-homwork img {
                width: 100%;
            }
            
             .respTab {
            width: 140px;
            margin: 0px;
            position: absolute;
            top: 10px;
            right: 0px;
            float: right;
            z-index: 99;
        }

         .respTab1 {
            width: 140px;
            margin: 0px;
            position: absolute;
            /*top: 10px;*/
            right: 0px;
            float: right;
            z-index: 99;
            margin-top: -8px;
        }
        .respTab2 {
            width: 140px;
            margin: 0px;
            margin-top:0px;
            position: absolute;
            /*top: 10px;*/
            right: 0px;
            float: right;
            z-index: 99;
            margin-top: -10px;
        }
        .respTab3 {
            width: 140px;
            margin: 0px;
            margin-top:0px;
            position: absolute;
            /*top: 10px;*/
            right: 0px;
            float: right;
            z-index: 99;
            margin-top: -10px;
        }
        
        .live-basketball-tournament {
            width: 334px;
            margin: 0px;
            position: absolute;
            top: 77px;
            right: 0px;
            float: right;
            z-index: 99;
        }

        .Fixture-Basketball {
            width: 334px;
            margin: 0px;
            position: absolute;
            top: 301px;
            right: 0px;
            float: right;
            z-index: 99;
        }

        .live-basketball-tournament a {
            cursor: default;
        }

        a.court_2 {
            float: right;
            margin: 0 5px 0 0px;
        }

        .res-care {
            top: 486px;
            position: absolute;
        }

        .e-care-b {
            width: 180px;
            margin-top: 5px;
        }

        .e-care-b23, .live_webcast_court {
            margin: 0px;
            width: auto;
            position: absolute;
            top: 75px;
            right: 0px;
            float: right;
            z-index: 99;
        }

            .e-care-b23 a {
                width: 236px;
                height: 123px;
            }

        .holidayhomework {
            position: absolute;
            top: 79px;
            right: 0px;
            float: right;
            z-index: 9999;
        }

        * {
            outline: 0;
            border: 0;
        }

        .respTab, .live_webcast_court, .e-care-b23 {
            /*right: 10px;*/
        }

        @media only screen and (max-width:767px) {
            .holidayhomework {
                width: 233px;
                top: 0px !important;
            }
        }

        @media (min-aspect-ratio: 16/9) {
            .box li video {
                height: 300%;
                top: -100%;
            }
        }

        @media (max-aspect-ratio: 16/9) {
            .box li video {
                width: 300%;
                left: -100%;
            }
        }

        @media only screen and (max-width:1000px) {
            .logo-box-in {
                height: 110px;
            }

            .slideshow {
                /*position: static;*/
                float: left;
                margin: 160px 0 22px;
            }

                .slideshow .box {
                    height: auto;
                    position: relative;
                    float: left;
                    height: 400px;
                    z-index: 999;
                    top: 0px;
                }

                    .slideshow .box li {
                        position: absolute;
                        height: auto;
                    }

                        .slideshow .box li img {
                            width: auto;
                            max-width: 100%;
                            height: auto;
                            position: static;
                            top: 0;
                        }

                        .slideshow .box li video {
                            width: 100%;
                            height: auto;
                            top: 0;
                            position: static;
                            top: 0;
                        }

            .respTab, .live_webcast_court, .e-care-b23 {
                /*width: 100%;*/
                margin: 0px;
                /*position: static;*/
                float: left;
                text-align: center;
                z-index: 99;
                margin-top: 130px;
            }

            .e-care-b23 {
                width: 100%;
                margin-top: 5px;
                height: auto;
                text-align: center;
            }

                .e-care-b23 a {
                    width: 226px;
                    height: 131px;
                    float: none;
                    display: block;
                    margin: 8px auto;
                }

            .logo-shedow {
                display: none;
            }

            .e-care-b a {
                margin: 0 auto;
                float: none;
                display: inline-block;
            }

            .res-care {
                width: 100%;
                text-align: center;
                float: left;
                position: static;
                margin: 23px 0 17px;
            }

            .e-care-b {
                width: 246px;
                margin: 0 auto;
                display: inline-block;
                padding: 14px 0 0;
                float: none;
            }

            .marquee {
                width: 100% !important;
                bottom: 5px !important;
            }

            .holidayhomework {
                top: 120px !important;
            }

            .live-basketball-tournament, .Fixture-Basketball, .live_webcast_court {
                position: static;
                width: 100%;
                text-align: center;
                padding: 0px 0;
                margin: 5px 0;
            }

            .live_webcast_court {
                text-align: center;
            }

            a.court_2 {
                float: none;
                margin: 0 0px 0 0px;
            }

            .logo-name-mobile {
                text-align: center;
                margin: 17px 0px 0px 0;
            }
            
          html {
  background: radial-gradient(#246, #002);
  height: 100%;
}

body {
  text-align: center;
  font-size: 24px;
  width: 50%;
  height: 100%;
  margin: 0 auto;
  color: #ccc;
  display:table-header-group;
}

p {
  /*display: table-cell;
  vertical-align: middle;*/
  text-align:justify;
}


span.popup {
  height: 0;
  color: #fff;
  position: relative;
  cursor: pointer;

  &:after {
    content: attr(data-popuptext);
    background: rgba(0, 0, 0, 0.85);
    border-radius: 3px;
    opacity: 0;
    top: 0;
    left: 0;
    position: absolute;
    transition: 500ms ease;
    white-space: nowrap;
    max-height: 0;
  }
  
  &:hover:after {
    opacity: 1;
    top: 1.2em;
    max-height: 200px;
    padding: .4em;
  }
}
        }



#slideshow {
    position: absolute; top:0px; left:0px;
     width:100%; height:100%;
	z-index:-1;   background-size:   cover; 
}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
}

#slideshow IMG.active {
    z-index:10;
    opacity:1.0;
}

#slideshow IMG.last-active {
    z-index:9;
}

#slideshow img {
	/* Set rules to fill background */
	min-height: 100%;
	min-width: 1024px;
			
	/* Set up proportionate scaling */
	width: 100%;
	height: auto;
			
	/* Set up positioning */
	position: fixed;
	top: 0;
	left: 0;
}
		
@media screen and (max-width: 1024px){
	img.bg {
	left: 50%;
	margin-left: -512px; 
}
}
		
#page-wrap { 
	position: relative;
	width: 400px; 
	margin: 50px auto; 
	padding: 20px; 
	background: #fff; 
	-moz-box-shadow: 0 0 20px black; 
	-webkit-box-shadow: 0 0 20px black; 
	box-shadow: 0 0 20px black; 
}

/*p { 
	font: 15px/2 Arial; 
	margin: 0 0 30px 0; 
	color: #fff;
}*/

#content {
	width: 920px;
	margin: 0 auto;
	background: rgba(11,11,11, 0.5);
	padding: 20px;
}

#content h1 {
	text-transform: uppercase;
	font-family: 'Arial';
	color: #fff;
}

#content a {
	color: #a82711;
	font-weight: bold;
	text-transform: uppercase;
	background: #000;
	padding: 10px;
}

.respTab{
		width:140px;
		height: 20px;
	    background-color:#04247e;
	    position: absolute;
		padding: 6px;	
		text-align: center;
		
		/*line-height: 50px;*/
	}
			
	span{
		font-size: 15px;
		font-family: arial;
		color: yellow;
		animation: blink 1s linear infinite;
		
	}   
@keyframes blink{
0%{opacity: 0;}
50%{opacity: .5;}
100%{opacity: 1;}
}
.respTab1{
		width:140px;
		height: 20px;
	    background-color:#116c6c;
		padding: 6px;	
		text-align: center;
		/*line-height: 50px;*/
	}
			
	span1{
		font-size: 15px;
		font-family: arial;
		color: white;
		animation: blink 1s linear infinite;
		
	}   
@keyframes blink{
0%{opacity: 0;}
50%{opacity: .5;}
100%{opacity: 1;}
}
.respTab2{
		width:140px;
		height: 20px;
	    background-color:#2e6090;
		padding: 6px;	
		text-align: center;
		/*line-height: 50px;*/
		
	}
	
	.respTab3{
		width:140px;
		height: 20px;
	    background-color:blue;
		padding: 6px;	
		text-align: center;
		/*line-height: 50px;*/
		
	}
			
	span2{
		font-size: 15px;
		font-family: arial;
		color: #0ef7ff;
		animation: blink 1s linear infinite;
		
	}   
@keyframes blink{
0%{opacity: 0;}
50%{opacity: .5;}
100%{opacity: 1;}
}

span3{
		font-size: 13px;
		font-family: arial;
		color: #fff;
		animation: blink 1s linear infinite;
		
	}   
@keyframes blink{
0%{opacity: 0;}
50%{opacity: .5;}
100%{opacity: 1;}
}


.container {
  position: relative;
  width: 180px;
  height:180px;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color:#fff;
  overflow: hidden;
  width: 100%;
  height:0;
  transition: .5s ease;
  opacity:0.9;
  overflow: scroll;
}

.container:hover .overlay {
  bottom: 0;
  height: 100%;
}

.text {
  color: #000;
  font-size: 14px;
  font-family:'Cuprum', sans-serif;
  position: absolute;
 /* top: 100%;
  left: 100%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);*/
  text-align:inherit;
}

          .pic
          {
              height:180px;
              width:180px;
              overflow:hidden;
              margin:10px;
              background-color:#fff;
              border:10px solid #fff;
              -webkit-box-shadow:5px 5px 5px #111;
              box-shadow:5px 5px 5px #111;
              float:left
              }
              .pic:hover
              {
                  cursor:pointer
                  }
                  .grow img
                  {
                      height:180px;
                      width:180px;
                      -webkit-transition:all 1s ease;
                      -moz-transition:all 1s ease;
                      -o-transition:all 1s ease;
                      -ms-transition:all 1s ease;
                      transition:all 1s ease
                      }
                      .grow img:hover
                      {
                          width:400px;
                          height:400px;
                          }
                          .shrink img
                          {
                              height:180px;
                              width:180px;
                              -webkit-transition:all 1s ease;
                              -moz-transition:all 1s ease;
                              -o-transition:all 1s ease;
                              -ms-transition:all 1s ease;
                              transition:all 1s ease
                              }
                              .shrink img:hover
                              {
                                  width:400px;
                                  height:400px
                                  }
                                  .blur img
                                  {
                                      -webkit-transition:all 1s ease;
                                      -moz-transition:all 1s ease;
                                      -o-transition:all 1s ease;
                                      -ms-transition:all 1s ease;
                                      transition:all 1s ease
                                      }
                                      .blur img:hover
                                      {-webkit-filter:blur(5px)
                                       }
                                       .tilt{-webkit-transition:all .5s ease;
                                             -moz-transition:all .5s ease;
                                             -o-transition:all .5s ease;
                                             -ms-transition:all .5s ease;
                                             transition:all .5s ease
                                             }
                                             .tilt:hover
                                             {
                                                 -webkit-transform:rotate(-10deg);
                                                 -moz-transform:rotate(-10deg);
                                                 -o-transform:rotate(-10deg);
                                                 -ms-transform:rotate(-10deg);
                                                 transform:rotate(-10deg)
                                                 }
                                                 .morph
                                                 {
                                                     -webkit-transition:all .5s ease;
                                                     -moz-transition:all .5s ease;
                                                     -o-transition:all .5s ease;
                                                     -ms-transition:all .5s ease;
                                                     transition:all .5s ease
                                                     }
                                                     .morph:hover
                                                     {
                                                         border-radius:50%;
                                                         -webkit-transform:rotate(360deg);
                                                         -moz-transform:rotate(360deg);
                                                         -o-transform:rotate(360deg);
                                                         -ms-transform:rotate(360deg);
                                                         transform:rotate(360deg)
                                                         }
                                                         .sidepan img
                                                         {
                                                          height:180px;
                                                           width:180px; 
                                                          margin-left:0;
                                                          -webkit-transition:margin 1s ease;
                                                          -moz-transition:margin 1s ease;
                                                          -o-transition:margin 1s ease;
                                                          -ms-transition:margin 1s ease;
                                                          transition:margin 1s ease
                                                          }
                                                          .sidepan img:hover
                                                          {
                                                              margin-left:-200px
                                                              }
                                                              .vertpan img
                                                              {
                                                                   height:180px;
                                                                   width:180px; 
                                                                  margin-top:0;
                                                                  -webkit-transition:margin 1s ease
                                                                  ;-moz-transition:margin 1s ease;
                                                                  -o-transition:margin 1s ease;
                                                                  -ms-transition:margin 1s ease;
                                                                  transition:margin 1s ease
                                                                  }
                                                                  .vertpan img:hover
                                                                  {
                                                                      margin-top:-200px
                                                                      }
                                                                      .focus
                                                                      {
                                                                          -webkit-transition:all 1s ease;
                                                                          -moz-transition:all 1s ease;
                                                                          -o-transition:all 1s ease;
                                                                          -ms-transition:all 1s ease;
                                                                          transition:all 1s ease
                                                                          }
                                                                          .focus:hover
                                                                          {
                                                                              border:40px solid #fff;
                                                                              border-radius:50%
                                                                              }
                                                                              .bw
                                                                              {
                                                                                  -webkit-transition:all 1s ease;
                                                                                  -moz-transition:all 1s ease;
                                                                                  -o-transition:all 1s ease;
                                                                                  -ms-transition:all 1s ease;
                                                                                  transition:all 1s ease
                                                                                  }
                                                                                  .bw:hover
                                                                                  {
                                                                                      -webkit-filter:grayscale(100%)
                                                                                      }
                                                                                      .brighten img
                                                                                      {
                                                                                          -webkit-filter:brightness(-65%);
                                                                                          -webkit-transition:all 1s ease;
                                                                                          -moz-transition:all 1s ease;
                                                                                          -o-transition:all 1s ease;
                                                                                          -ms-transition:all 1s ease;
                                                                                          transition:all 1s ease
                                                                                          }
                                                                                          .brighten img:hover
                                                                                          {
                                                                                              -webkit-filter:brightness(0%)}