﻿ .no-js #loader {
            display: none;
        }

        .js #loader {
            display: block;
            position: absolute;
            left: 100px;
            top: 0;
        }

        .se-pre-con {
            position: fixed;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            z-index: 9999;
            background: center no-repeat #fff;
        }
@media screen and (max-width: 499px) {/*500*/

#playagain{
    margin-top: 20px;
	height: 40px;
}
.doneimg{
	height: 40px;
	 }
.closeimg{
	height: 40px;
	}
#imgjokpa{
	    height: 93px;
    margin-left: 74px;
}
#stopwatch{
	height:35px;
}
#score{
	height:35px;
}
 .modal-dialog {
    right: auto;
    left: 50%;
    width: 275px;
    padding-top: 22px;
    padding-bottom: 30px;
}
 .ps-top-to-bottom {
  position: relative;
  border-top: 3px solid black;
  margin-top:10px;
  height:auto;
}
.ps-top-to-bottom:before, .ps-top-to-bottom:after {
  content: "";
  position: absolute;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
  background-image: -webkit-linear-gradient(#000, transparent);
  background-image: -moz-linear-gradient(#000, transparent);
  background-image: -o-linear-gradient(#000, transparent);
  background-image: linear-gradient(#000, transparent);
  top: -3px;
  bottom: -3px;
  width: 3px;
}
.ps-top-to-bottom:before {
  left: -3px;
}
.ps-top-to-bottom:after {
  right: -3px;
}

.background1 {
   background-repeat: no-repeat;
   background-size: 100% 100%;
   background-position: inherit;
   background-attachment: fixed;
   
}


.btnclr{
    color: black;
    background-color:#5dc6f0;
    font-weight:900;
    font-size:x-large;
}
.cntr {
    position: absolute;
    top: 25%;
    left: 35%;
}
.scoreimage{

height:40px;width:146px;      
position: relative;
  left:50%;
  transform: translate(-50%,-50%);
  padding-top:20px;
  top:100px;
}
.svgborder  {
        border:2px solid black;
        background:white;  
}
.removesidepadding{    
    padding-left: 0px;
    padding-right: 0px;
}
.anim {
    background-color: none;
    -webkit-animation-name: highlight; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: .5s; /* Safari 4.0 - 8.0 */
    animation: highlight 1s infinite;
}
@-webkit-keyframes highlight {
    from {fill: none;}
    to {fill: #FF6666;}
}

/* Standard syntax */
@keyframes highlight {
    from {fill: none;}
    to {fill: #FF6666;}
}
#btnplay {
    margin-top: 30%;
        margin-left: 50%;        
    }
.csshover{
			fill:transparent;
			fill-opacity:0.1;
		}
.csshover:hover,click{
			fill:#ff6666;
			fill-opacity:0.5;
			cursor:pointer;			
		}
.prevbtn{
			margin-top:170px;
		}
.nxtbtn{
			margin-top:90px;transform: rotate(180deg); -ms-transform: rotate(180deg);-webkit-transform: rotate(180deg);
		}
.removemargin{
    margin:0px;
}
.removepadding{
    padding:20px;
}
.svgborderinner{
    border-right:2px solid black;padding-left:0px;padding-right:0px;width: 77%;
}
.fntsmayscore{
    font-size:11px; font-weight:700;
    padding-left: 10px;
}
.fntweight{
    font-weight:700;
}
.fntrightwordlist{
    font-size:10px;font-weight:700;
}
.scorescreenlast{
    min-height:300px;margin-top:50px;
}
.fntlastscore{
    font-weight:500;font-size:20px;cursor:none;
}

   
}

@media screen and (min-width: 500px) {/*400*/

#playagain{
    margin-top: 20px;
	height: 40px;
}
.doneimg{
	height: 40px;
	 }
.closeimg{
	height: 40px;
	}
#imgjokpa{
	    height: 93px;
    margin-left: 84px;
}
#stopwatch{
	height:35px;
}
#score{
	height:35px;
}
 .modal-dialog {
    right: auto;
    left: 50%;
    width: 320px;
    padding-top: 22px;
    padding-bottom: 30px;
}
 .ps-top-to-bottom {
  position: relative;
  border-top: 3px solid black;
  margin-top:10px;
  height:auto;
}
.ps-top-to-bottom:before, .ps-top-to-bottom:after {
  content: "";
  position: absolute;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
  background-image: -webkit-linear-gradient(#000, transparent);
  background-image: -moz-linear-gradient(#000, transparent);
  background-image: -o-linear-gradient(#000, transparent);
  background-image: linear-gradient(#000, transparent);
  top: -3px;
  bottom: -3px;
  width: 3px;
}
.ps-top-to-bottom:before {
  left: -3px;
}
.ps-top-to-bottom:after {
  right: -3px;
}

#background1 {
   background-repeat: no-repeat;
   background-size: cover;
   background-position: inherit;
   background-attachment: fixed;
   width: 100%;
}

.background1 {
   background-repeat: no-repeat;
   background-size: cover;
   background-position: inherit;
   background-attachment: fixed;
   width: 100%;
}

.btnclr{
    color: black;
    background-color:#5dc6f0;
    font-weight:900;
    font-size:x-large;
}
.cntr {
    position: absolute;
    top: 25%;
    left: 35%;
}
.scoreimage{
height:150px;width:146px;      
position: relative;
  left:50%;
  transform: translate(-50%,-50%);
  padding-top:20px;
  top:100px;
}
.svgborder  {
        border:2px solid black;
        background:white;  
}
.removesidepadding{    
    padding-left: 0px;
    padding-right: 0px;
}
.anim {
    background-color: none;
    -webkit-animation-name: highlight; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: .5s; /* Safari 4.0 - 8.0 */
    animation: highlight 1s infinite;
}
@-webkit-keyframes highlight {
    from {fill: none;}
    to {fill: #FF6666;}
}

/* Standard syntax */
@keyframes highlight {
    from {fill: none;}
    to {fill: #FF6666;}
}
#btnplay {
    margin-top: 30%;
        margin-left: 50%;        
    }
.csshover{
			fill:transparent;
			fill-opacity:0.1;
		}
.csshover:hover,click{
			fill:#ff6666;
			fill-opacity:0.5;
			cursor:pointer;			
		}
.prevbtn{
			margin-top:120px;
		}
.nxtbtn{
			margin-top:90px;transform: rotate(180deg); -ms-transform: rotate(180deg);-webkit-transform: rotate(180deg);
		}
.removemargin{
    margin:0px;
}
.removepadding{
    padding:20px;
}
.svgborderinner{
    border-right:2px solid black;padding-left:0px;padding-right:0px;width: 77%;
}
.fntsmayscore{
    font-size:11px; font-weight:700;
    padding-left: 10px;
}
.fntweight{
    font-weight:700;
}
.fntrightwordlist{
    font-size:12px;font-weight:700;
}
.scorescreenlast{
    min-height:300px;margin-top:50px;
}
.fntlastscore{
    font-weight:500;font-size:30px;cursor:none;
}

}

@media screen and (min-width: 850px) { /*250*/
#playagain{
    margin-top: 20px;
	height: 40px;
}
.doneimg{
	height: 40px;
	 }
.closeimg{
	height: 40px;
	}
#imgjokpa{
	height: 114px;
    margin-left: 83px;
}
#stopwatch{
	height:35px;
}
#score{
	height:35px;
}
 .modal-dialog {
    right: auto;
    left: 50%;
    width: 350px;
    padding-top: 22px;
    padding-bottom: 30px;
}
 .ps-top-to-bottom {
  position: relative;
  border-top: 3px solid black;
  margin-top:10px;
  height:auto;
}
.ps-top-to-bottom:before, .ps-top-to-bottom:after {
  content: "";
  position: absolute;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
  background-image: -webkit-linear-gradient(#000, transparent);
  background-image: -moz-linear-gradient(#000, transparent);
  background-image: -o-linear-gradient(#000, transparent);
  background-image: linear-gradient(#000, transparent);
  top: -3px;
  bottom: -3px;
  width: 3px;
}
.ps-top-to-bottom:before {
  left: -3px;
}
.ps-top-to-bottom:after {
  right: -3px;
}

#background1 {
   background-repeat: no-repeat;
   background-size: cover;
   background-position: inherit;
   background-attachment: fixed;
   width: 100%;
}

.background1 {
   background-repeat: no-repeat;
   background-size: cover;
   background-position: inherit;
   background-attachment: fixed;
   width: 100%;
}

.btnclr{
    color: black;
    background-color:#5dc6f0;
    font-weight:900;
    font-size:x-large;
}
.cntr {
    position: absolute;
    top: 25%;
    left: 35%;
}
.scoreimage{
height:150px;width:146px;      
position: relative;
  left:50%;
  transform: translate(-50%,-50%);
  padding-top:20px;
  top:100px;
}
.svgborder  {
        border:2px solid black;
        background:white;  
}
.removesidepadding{    
    padding-left: 20px;
    padding-right: 0px;
}
.anim {
    background-color: none;
    -webkit-animation-name: highlight; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: .5s; /* Safari 4.0 - 8.0 */
    animation: highlight 1s infinite;
}
@-webkit-keyframes highlight {
    from {fill: none;}
    to {fill: #FF6666;}
}

/* Standard syntax */
@keyframes highlight {
    from {fill: none;}
    to {fill: #FF6666;}
}
#btnplay {
    margin-top: 55%;
        margin-left: 50%;        
    }
.csshover{
			fill:transparent;
			fill-opacity:0.1;
		}
.csshover:hover,click{
			fill:#ff6666;
			fill-opacity:0.5;
			cursor:pointer;			
		}
.prevbtn{
			margin-top:140px;
		}
.nxtbtn{
			margin-top:90px;transform: rotate(180deg); -ms-transform: rotate(180deg);-webkit-transform: rotate(180deg);
		}
.removemargin{
    margin:0px;
}
.removepadding{
    padding:20px;
}
.svgborderinner{
    border-right:2px solid black;padding-left:0px;padding-right:0px;width: 77%;
}
.fntsmayscore{
    font-size:15px; font-weight:700;
    padding-left: 10px;
}
.fntweight{
    font-weight:500;
}
.fntrightwordlist{
    font-size:14px;font-weight:700;
}
.scorescreenlast{
    min-height:300px;margin-top:50px;
}
.fntlastscore{
    font-weight:500;font-size:50px;cursor:none;
}
}

@media only screen and (min-width: 1000px) {/*133*/

#playagain{
    margin-top: 40px;
	height: 70px;
}
.doneimg{
	height: 70px;
	 }
.closeimg{
	height: 70px;
	}
#imgjokpa{
	height: 170px;
    margin-left: 115px;
}
#stopwatch{
	height: 40px;
}
#score{
	height: 40px;
}
   .modal-dialog {
    right: auto;
    left: 50%;
    width: 460px;
    padding-top: 30px;
    padding-bottom: 30px;
}

  .ps-top-to-bottom {
  position: relative;
  border-top: 3px solid black;
  margin-top:30px;
  height:auto;
}
.ps-top-to-bottom:before, .ps-top-to-bottom:after {
  content: "";
  position: absolute;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
  background-image: -webkit-linear-gradient(#000, transparent);
  background-image: -moz-linear-gradient(#000, transparent);
  background-image: -o-linear-gradient(#000, transparent);
  background-image: linear-gradient(#000, transparent);
  top: -3px;
  bottom: -3px;
  width: 3px;
}
.ps-top-to-bottom:before {
  left: -3px;
}
.ps-top-to-bottom:after {
  right: -3px;
}

#background1 {
   background-repeat: no-repeat;
   background-size: cover;
   background-position: inherit;
   background-attachment: fixed;
   width: 100%;
}

.background1 {
   background-repeat: no-repeat;
   background-size: cover;
   background-position: inherit;
   background-attachment: fixed;
   width: 100%;
}

.btnclr{
    color: black;
    background-color:#5dc6f0;
    font-weight:900;
    font-size:x-large;
}
.cntr {
    position: absolute;
    top: 27%;
    left: 37%;
}
.scoreimage{
height:150px;width:146px;      
position: relative;
  left:50%;
  transform: translate(-50%,-50%);
  padding-top:20px;
  top:100px;
}
.svgborder  {
        border:2px solid black;
        background:white;  
}
.removesidepadding{    
    padding-left: 0px;
    padding-right: 0px;
}
.anim {
    background-color: none;
    -webkit-animation-name: highlight; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: .5s; /* Safari 4.0 - 8.0 */
    animation: highlight 1s infinite;
}
@-webkit-keyframes highlight {
    from {fill: none;}
    to {fill: #FF6666;}
}

/* Standard syntax */
@keyframes highlight {
    from {fill: none;}
    to {fill: #FF6666;}
}
#btnplay {
    margin-top: 50%;
        margin-left: 50%;        
    }
.csshover{
			fill:transparent;
			fill-opacity:0.1;
		}
.csshover:hover,click{
			fill:#ff6666;
			fill-opacity:0.5;
			cursor:pointer;			
		}
.prevbtn{
			margin-top:160px;
		}
.nxtbtn{
			margin-top:90px;transform: rotate(180deg); -ms-transform: rotate(180deg);-webkit-transform: rotate(180deg);
		}
.removemargin{
    margin:0px;
}
.removepadding{
    padding:0px;
}
.svgborderinner{
    border-right:2px solid black;padding-left:0px;padding-right:0px;width: 77%;
}
.fntsmayscore{
   font-size: 14px;
    padding-left: 0px;
	font-weight:700;
}
.fntweight{
    font-weight:700;
}
.fntrightwordlist{
    font-size:16px;font-weight:700;
    padding-left: 0px;
}
.scorescreenlast{
    min-height:300px;margin-top:50px;
}
.fntlastscore{
    font-weight:500;font-size:55px;cursor:none;
}
}

@media screen and (min-width: 1300px) { /*100%*/ 
  
#playagain{
    margin-top: 0px;
	height: 80px;
}
.doneimg{
	height: 90px;
	 }
.closeimg{
	height: 90px;
	} 
#imgjokpa{
	height: 300px;
    margin-left: 85px;
}
#stopwatch{
	height:75px;
}
#score{
	height:75px;
}
  .modal-dialog {
    right: auto;
    left: 50%;
    width: 600px;
    padding-top: 30px;
    padding-bottom: 30px;
}

 .ps-top-to-bottom {
  position: relative;
  border-top: 3px solid black;
  margin-top:30px;
  height:auto;
}
.ps-top-to-bottom:before, .ps-top-to-bottom:after {
  content: "";
  position: absolute;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
  background-image: -webkit-linear-gradient(#000, transparent);
  background-image: -moz-linear-gradient(#000, transparent);
  background-image: -o-linear-gradient(#000, transparent);
  background-image: linear-gradient(#000, transparent);
  top: -3px;
  bottom: -3px;
  width: 3px;
}
.ps-top-to-bottom:before {
  left: -3px;
}
.ps-top-to-bottom:after {
  right: -3px;
}

#background1 {
   background-repeat: no-repeat;
   background-size: cover;
   background-position: inherit;
   background-attachment: fixed;
   width: 100%;
}

.background1 {
   background-repeat: no-repeat;
   background-size: cover;
   background-position: inherit;
   background-attachment: fixed;
   width: 100%;
}

.btnclr{
    color: black;
    background-color:#5dc6f0;
    font-weight:900;
    font-size:x-large;
}
.cntr {
    position: absolute;
    top: 40%;
    left: 40%;
}
.scoreimage{
height:150px;width:146px;      
position: relative;
  left:50%;
  transform: translate(-50%,-50%);
  padding-top:20px;
  top:100px;
}
.svgborder  {
        border:2px solid black;
        background:white;  
}
.removesidepadding{    
    padding-left: 0px;
    padding-right: 0px;
}
.anim {
    background-color: none;
    -webkit-animation-name: highlight; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: .5s; /* Safari 4.0 - 8.0 */
    animation: highlight 1s infinite;
}
@-webkit-keyframes highlight {
    from {fill: none;}
    to {fill: #FF6666;}
}

/* Standard syntax */
@keyframes highlight {
    from {fill: none;}
    to {fill: #FF6666;}
}
#btnplay {
    margin-top: 60%;
    margin-left: 50%;    
    }
.csshover{
			fill:transparent;
			fill-opacity:0.1;
		}
.csshover:hover,click{
			fill:#ff6666;
			fill-opacity:0.5;
			cursor:pointer;			
		}
.prevbtn{
			 margin-top: 170px;
		}
.nxtbtn{
			margin-top:90px;transform: rotate(180deg); -ms-transform: rotate(180deg);-webkit-transform: rotate(180deg);
		}
.removemargin{
    margin:0px;
}
.removepadding{
    padding:0px;
}
.svgborderinner{
    border-right:2px solid black;padding-left:0px;padding-right:0px;width:83%
}
.fntsmayscore{
    font-size:18px; font-weight:700;
    padding-left: 0px;
}
.fntweight{
    font-weight:700;
}
.fntrightwordlist{
    font-size:22px;font-weight:700;
}
.scorescreenlast{
    min-height:300px;margin-top:50px;
}
.fntlastscore{
    font-weight:500;font-size:70px;cursor:none;
}
}

@media screen and (min-width: 1800px) { /* 67% */

#playagain{
    margin-top: 0px;
	height: 80px;
}
.doneimg{
	height: 95px;
	 }
.closeimg{
	height: 95px;
	}
#imgjokpa{
   height: 400px;margin-left: 33px;
}
#stopwatch{
	height:85px;
}
#score{
	height:85px;
}
  .modal-dialog {
    right: auto;
    left: 50%;
    width: 600px;
    padding-top: 30px;
    padding-bottom: 30px;
}

 .ps-top-to-bottom {
  position: relative;
  border-top: 3px solid black;
  margin-top:30px;
  height:auto;
}
.ps-top-to-bottom:before, .ps-top-to-bottom:after {
  content: "";
  position: absolute;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
  background-image: -webkit-linear-gradient(#000, transparent);
  background-image: -moz-linear-gradient(#000, transparent);
  background-image: -o-linear-gradient(#000, transparent);
  background-image: linear-gradient(#000, transparent);
  top: -3px;
  bottom: -3px;
  width: 3px;
}
.ps-top-to-bottom:before {
  left: -3px;
}
.ps-top-to-bottom:after {
  right: -3px;
}

#background1 {
   background-repeat: no-repeat;
   background-size: cover;
   background-position: inherit;
   background-attachment: fixed;
   width: 100%;
}

.background1 {
   background-repeat: no-repeat;
   background-size: cover;
   background-position: inherit;
   background-attachment: fixed;
   width: 100%;
}

.btnclr{
    color: black;
    background-color:#5dc6f0;
    font-weight:900;
    font-size:x-large;
}
.cntr {
    position: absolute;
    top: 40%;
    left: 40%;
}
.scoreimage{
height:150px;width:146px;      
position: relative;
  left:50%;
  transform: translate(-50%,-50%);
  padding-top:20px;
  top:100px;
}
.svgborder  {
        border:2px solid black;
        background:white;  
}
.removesidepadding{    
    padding-left: 0px;
    padding-right: 0px;
}
.anim {
    background-color: none;
    -webkit-animation-name: highlight; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: .5s; /* Safari 4.0 - 8.0 */
    animation: highlight 1s infinite;
}
@-webkit-keyframes highlight {
    from {fill: none;}
    to {fill: #FF6666;}
}

/* Standard syntax */
@keyframes highlight {
    from {fill: none;}
    to {fill: #FF6666;}
}
#btnplay {
    margin-top: 70%;
    margin-left: 50%;    
    }
.csshover{
			fill:transparent;
			fill-opacity:0.1;
		}
.csshover:hover,click{
			fill:#ff6666;
			fill-opacity:0.5;
			cursor:pointer;			
		}
.prevbtn{
			margin-top:200px;
		}
.nxtbtn{
			margin-top:90px;transform: rotate(180deg); -ms-transform: rotate(180deg);-webkit-transform: rotate(180deg);
		}
.removemargin{
    margin:0px;
}
.removepadding{
    padding:0px;
}
.svgborderinner{
    border-right:2px solid black;padding-left:0px;padding-right:0px;width:83%;
}
.fntsmayscore{
    font-size:18px; font-weight:700;
    padding-left: 0px;
}
.fntweight{
    font-weight:700;
}
.fntrightwordlist{
    font-size:25px;font-weight:700;
}
.scorescreenlast{
    min-height:300px;margin-top:50px;
}
.fntlastscore{
    font-weight:500;font-size:70px;cursor:none;
}
}
