@charset "UTF-8";

@font-face {
    font-family: 'LotussSmartHL';
    src: url('../fonts/IDY/LotussSmartHL-Regular.eot'); /* IE9 Compat Modes */
    src: url('../fonts/IDY/LotussSmartHL-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/IDY/LotussSmartHL-Regular.woff') format('woff'), /* Modern Browsers */
         url('../fonts/IDY/LotussSmartHL-Regular.woff2') format('woff2'),
         url('../fonts/IDY/LotussSmartHL-Regular.ttf')  format('truetype'); /* Safari, Android, iOS */
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'LotussSmartHL-Bold';
    src: url('../fonts/IDY/LotussSmartHL-Bold.eot'); /* IE9 Compat Modes */
    src: url('../fonts/IDY/LotussSmartHL-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/IDY/LotussSmartHL-Bold.woff') format('woff'), /* Modern Browsers */
         url('../fonts/IDY/LotussSmartHL-Bold.woff2') format('woff2'),
         url('../fonts/IDY/LotussSmartHL-Bold.ttf')  format('truetype'); /* Safari, Android, iOS */
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'LotussSmartHL-ExtraBold';
    src: url('../fonts/IDY/LotussSmartHL-ExtraBold.eot'); /* IE9 Compat Modes */
    src: url('../fonts/IDY/LotussSmartHL-ExtraBold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/IDY/LotussSmartHL-ExtraBold.woff') format('woff'), /* Modern Browsers */
         url('../fonts/IDY/LotussSmartHL-ExtraBold.woff2') format('woff2'),
         url('../fonts/IDY/LotussSmartHL-ExtraBold.ttf')  format('truetype'); /* Safari, Android, iOS */
    font-weight: 700;
    font-style: normal;
}

/*Prevent scroll right on mobile*/
html{ overflow-x: hidden;}

body {
    font-family: 'LotussSmartHL-Bold';
/*    font-size: 1.25rem;*/
}

h1, h2, h3, h4, h5 {
    font-family: 'LotussSmartHL-ExtraBold';
}

h2 {
    font-size: 2.25rem;
}

#box {
/*HH    font-size : 20px;*/
}

/* ----------- Galaxy Fold ----------- */
@media screen and (min-width: 280px) {
    /* Top Logo & Nav Section */
    /* Position the navbar container inside the image */
    .bg-img .container {
        width: 18rem;
    }

    /* Lotuss logo size*/
    .bg-img .container .topnav .logo {
        width: 8rem;
    }

    .topnav .search {
        float: right;
        padding: 5px 5px;
        width: 2.6rem;
    }

    .topnav .search .a img {
        width: 10rem;
    }
    /* End Top Logo & Nav Section */

    /* Back To Top BTN */
    .bttbtn {
        height: 14%;      /* Control image size */
        left: 70%;        /* Place the button 70% from the left */
    }

    /* Footer */
    .footer .logo {
        width: 8rem;
    }

    .box1 {
/*        width: 34rem;*/
        width: 100%;
        height: 55rem;
        background-size: 29.5rem 29.5rem,34rem 55rem;
        background-repeat: no-repeat;
        background-position: 50% 48.5%;
    }

    .box1 .outer {
        /*width: 61%;
        height: 38.9%;*/
        width: 281.594px;
        height: 279.969px;
        top: 3%;
        left: 0%;
    }

    .box1 .pointer{
        width: 3.5rem;
        height: 3.5rem;
        left: 52.0%;
        top: -27.5%;
        background-size: auto 3.5rem;
    }

    .box1 .inner {
        width: 8.5rem;
        height: 8.5rem;
        left: 50.5%;
        top: -19.5%;
        background-size: auto 8.5rem;
    }

    .box2 {
        font-size: 15px !important;
        /*width: 23rem;
        background-size: 23rem 100%;*/
        width: 100%;
        background-size: 100% 100%;
    }

    /*Yellow section - promo & receipt link*/
    .push .nav {
        margin-left: 11.5%;
/*      margin-right: 15%;*/
    }

    .push .nav .internal-link {
        width: 6rem;
    }

}

/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */
@media screen and (min-width: 320px) {
    /* Top Logo & Nav Section */
    /* Position the navbar container inside the image */
    .bg-img .container {
        width: 20rem;
    }

    /* Lotuss logo size*/
    .bg-img .container .topnav .logo {
        width: 8rem;
    }

    .topnav .search {
        float: right;
        padding: 5px 5px;
        width: 2.6rem;
    }

    .topnav .search .a img {
        width: 10rem;
    }
    /* End Top Logo & Nav Section */

    /* Back To Top BTN */
    .bttbtn {
        height: 14%;      /* Control image size */
        left: 70%;        /* Place the button 70% from the left */
    }

    /* Back To Top BTN On All Other*/
    .bttbtnAll {
        height: 11%;      /* Control image size */
        left: 70%;        /* Place the button 70% from the left */
    }

    /* Footer */
    .footer .logo {
        width: 8rem;
    }

    .box1 {
/*        width: 34rem;*/
        width: 100%;
        height: 55rem;
        background-size: 29.5rem 29.5rem,34rem 55rem;
        background-repeat: no-repeat;
        background-position: 50% 48.5%;
    }

    .box1 .outer {
        /*width: 61%;
        height: 38.9%;*/
        width: 281.594px;
        height: 279.969px;
        top: 3%;
        left: 6.3%;
    }

    .box1 .pointer{
        width: 3.5rem;
        height: 3.5rem;
        left: 52.0%;
        top: -27.5%;
        background-size: auto 3.5rem;
    }

    .box1 .inner {
        width: 8.5rem;
        height: 8.5rem;
        left: 50.5%;
        top: -19.5%;
        background-size: auto 8.5rem;
    }

    .box2 {
        font-size: 15px !important;
        /*width: 23rem;
        background-size: 23rem 100%;*/
        width: 100%;
        background-size: 100% 100%;
    }

    /*Yellow section - promo & receipt link*/
    .push .nav {
        margin-left: 11.5%;
/*      margin-right: 15%;*/
    }

    .push .nav .internal-link {
        width: 7rem;
    }

    .push2 {
        height:250px;
    }

    .push2 .nav .internal-link {
        width: 8rem;
        object-fit: contain;
    }

}

@media screen and (min-width: 360px) {
        /* Top Logo & Nav Section */
        /* Position the navbar container inside the image */
        .bg-img .container {
            width: 23rem;
        }

        /* Lotuss logo size*/
        .bg-img .container .topnav .logo {
            width: 10rem;
        }

        .topnav .search {
            float: right;
            padding: 10px;
        }

        .topnav .search .a img {
            width: 10rem;
        }
        /* End Top Logo & Nav Section */

        /* Back To Top BTN On Game Page*/
        .bttbtn {
            height: 14%;      /* Control image size */
            left: 70%;        /* Place the button 70% from the left */
        }

        /* Back To Top BTN On All Other*/
        .bttbtnAll {
            height: 11%;      /* Control image size */
            left: 70%;        /* Place the button 70% from the left */
        }

        /* Footer */
        .footer .logo {
            width: 8rem;
        }

        .box1 {
/*        width: 34rem;*/
            width: 24rem;
            height: 55rem;
            background-size: 29.5rem 29.5rem,24rem 55rem;
            background-repeat: no-repeat;
            background-position: 52% 48.5%;
        }

        .box1 .outer {
            /*width: 61%;
            height: 38.9%;*/
            width: 281.594px;
            height: 279.969px;
            top: 3%;
            left: 13.2%;
        }
    
        .box1 .pointer{
            width: 3.5rem;
            height: 3.5rem;
            left: 51.0%;
            top: -27.5%;
            background-size: auto 3.5rem;
        }
    
        .box1 .inner {
            width: 8.5rem;
            height: 8.5rem;
            left: 50.5%;
            top: -19.5%;
            background-size: auto 8.5rem;
        }

        .box2 {
            font-size: 15px !important;
            /*width: 23rem;
            background-size: 23rem 100%;*/
            width: 100%;
            background-size: 100% 100%;
        }

        /*Yellow section - promo & receipt link*/
        .push .nav {
            margin-left: 14.5%;
    /*      margin-right: 15%;*/
        }

        .push .nav .internal-link {
            width: 8rem;
        }
}

@media screen and (min-width: 375px) {
    /*.box2 {
        font-size: 15px !important;
        width: 24rem;
        background-size: 24rem 100%;
    }*/

    .push2 {
        height:300px;
    }

    .push2 .nav .internal-link {
        width: 10rem;
        object-fit: contain;
    }
}

@media screen and (min-width: 400px) {
    .bg-img .container {
        width: 100%;
    }

    /*.box1 {
        width: 26rem;
        height: 55rem;
        background-size: 29.5rem 29.5rem,26rem 55rem;
        background-repeat: no-repeat;
        background-position: 52% 48.5%;
    }

    .box1 .outer {
        width: 281.594px;
        height: 279.969px;
        top: 3%;
        left: 16.2%;
    }*/

    .box1 {
        /* width: 34rem; */
        width: 27rem;
        height: 55rem;
        background-size: 33.5rem 33.5rem,27rem 55rem;
        background-repeat: no-repeat;
        background-position: 50% 54.5%;
    }

    .box1 .outer {
        width: 321.594px;
        height: 319.969px;
        top: 3%;
        left: 13%;
    }

    .box1 .pointer {
        width: 3.5rem;
        height: 3.5rem;
        left: 51.1%;
        top: -32.5%;
        background-size: auto 3.5rem;
    }

    .box1 .inner {
        width: 8.5rem;
        height: 8.5rem;
        left: 50.5%;
        top: -21.5%;
        background-size: auto 8.5rem;
    }

    .push2 {
        height: 300px;
    }

    .push2 .nav .internal-link {
        width: 10rem;
    }
}

@media screen and (min-width: 430px) {
    /*.box1 {
        width: 27rem;
        height: 55rem;
        background-size: 29.5rem 29.5rem,27rem 55rem;
        background-repeat: no-repeat;
        background-position: 52% 48.5%;
    }

    .box1 .outer {
        width: 281.594px;
        height: 279.969px;
        top: 3%;
        left: 17.4%;
    }*/
    .box1 {
        /* width: 34rem; */
        width: 27rem;
        height: 55rem;
        background-size: 33.5rem 33.5rem,27rem 55rem;
        background-repeat: no-repeat;
/*        background-position: 50% 54.5%;*/
        background-position: 50% 83.0%;
        height: 920px;
    }

    .box1 .outer {
        width: 321.594px;
        height: 319.969px;
        top: 3%;
        left: 13%;
    }

    .box1 .pointer {
        width: 3.5rem;
        height: 3.5rem;
        left: 51.1%;
        top: -32.5%;
        background-size: auto 3.5rem;
    }

    .box1 .inner {
        width: 8.5rem;
        height: 8.5rem;
        left: 50.5%;
        top: -21.5%;
        background-size: auto 8.5rem;
    }
}

@media only screen and (min-device-width: 768px) {
    .push2 {
        height: 450px;
    }

    .push2 .nav .internal-link {
        width: 15rem;
    }

    .push2 h2 {
        font-size: 3.25rem;
    }
}

/* Portrait and Landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
       /* Top Logo & Nav Section */
       /* Position the navbar container inside the image */
       .bg-img .container {
           width: 100%;
       }

       /* Lotuss logo size*/
       .bg-img .container .topnav .logo {
           width: 10rem;
       }

       .bttbtnAll {
            height: 11%;
            left: 80%;
       }

       .topnav .search {
           float: right;
           padding: 10px;
       }

       .topnav .search .a img {
           width: 10rem;
       }
       /* End Top Logo & Nav Section */

       /* Back To Top BTN */
       .bttbtn {
           /*height: 14%;*/      /* Control image size */
           left: 60%;        /* Place the button 70% from the left */
       }

       /* Footer */
       .footer .logo {
           width: 8rem;
       }

       .box1 {
   /*        width: 34rem;*/
/*           width: 100%;*/
           width: 35rem;
           height: 67rem;
           background-size: 50rem 50rem,35rem 67rem;
           background-repeat: no-repeat;
           background-position: 50.3% 90.8%;
       }

       .box1 .outer {
           /*width: 61%;
           height: 38.9%;*/
           width: 481.594px;
           height: 479.969px;
           top: 13%;
            left: 7%;
       }

       .box1 .pointer{
           width: 5rem;
           height: 5rem;
           left: 51.2%;
           top: -30.5%;
           background-size: auto 5rem;
       }

       .box1 .inner {
           width: 10rem;
           height: 10rem;
           left: 50.5%;
           top: -17.5%;
           background-size: auto 10rem;
       }

       .box2 {
            font-size: 20px !important;
            /*width: 23rem;
            background-size: 23rem 100%;*/
            width: 100%;
            background-size: 100% 100%;
        }

       /*Yellow section - promo & receipt link*/
       .push .nav {
           margin-left: 18%;
           margin-right: 15%;
       }

       .push .nav .internal-link {
           width: 10rem;
       }
}

@media only screen and (min-width: 1024px) {
    .box2 {
/*         font-size: 20px !important;*/
         /*width: 23rem;
         background-size: 23rem 100%;*/
         /*width: 100%;
         background-size: 100% 100%;*/
        font-size: 20px !important;
        width: 41rem;
        height: 100%;
        margin: auto auto;
/*        position: absolute;*/
        /*top: 50%;
        left: 50%;*/
        background-size: 41rem 100%;
     }

     .bttbtnAll {
         height: 11%;
         left: 70%;
     }
}

@media only screen and (min-device-width: 1080px) {
    .bttbtnAll {
        height: 11%;
        left: 65%;
    }

           .box1 {
       /*        width: 34rem;*/
    /*           width: 100%;*/
               width: 35rem;
               height: 67rem;
               background-size: 50rem 50rem,35rem 67rem;
               background-repeat: no-repeat;
               background-position: 50.3% 90.8%;
           }

           .box1 .outer {
               /*width: 61%;
               height: 38.9%;*/
               width: 481.594px;
               height: 479.969px;
               top: 13%;
                left: 7%;
           }

           .box1 .pointer{
               width: 5rem;
               height: 5rem;
               left: 51.2%;
               top: -30.5%;
               background-size: auto 5rem;
           }

           .box1 .inner {
               width: 10rem;
               height: 10rem;
               left: 50.5%;
               top: -17.5%;
               background-size: auto 10rem;
           }

}

/* Custom */
@media only screen and (min-device-width: 1500px) and (max-device-width: 1900px) {
       /* Top Logo & Nav Section */
       /* Position the navbar container inside the image */
       .bg-img .container {
           width: 100%;
       }

       /* Lotuss logo size*/
       .bg-img .container .topnav .logo {
           width: 10rem;
       }

       .topnav .search {
           float: right;
           padding: 10px;
       }

       .topnav .search .a img {
           width: 10rem;
       }
       /* End Top Logo & Nav Section */

       /* Back To Top BTN */
       .bttbtn {
           /*height: 14%;*/      /* Control image size */
           left: 70%;        /* Place the button 70% from the left */
       }

       /* Footer */
       .footer .logo {
           width: 8rem;
       }

       .box1 {
   /*        width: 34rem;*/
/*           width: 100%;*/
           width: 35rem;
           height: 67rem;
           background-size: 50rem 50rem,35rem 67rem;
           background-repeat: no-repeat;
           background-position: 50.3% 90.8%;
       }

       .box1 .outer {
           /*width: 61%;
           height: 38.9%;*/
           width: 481.594px;
           height: 479.969px;
           top: 13%;
            left: 7%;
       }

       .box1 .pointer{
           width: 5rem;
           height: 5rem;
           left: 51.2%;
           top: -30.5%;
           background-size: auto 5rem;
       }

       .box1 .inner {
           width: 10rem;
           height: 10rem;
           left: 50.5%;
           top: -17.5%;
           background-size: auto 10rem;
       }

       /*Yellow section - promo & receipt link*/
       .push .nav {
           margin-left: 18%;
           margin-right: 15%;
       }

       .push .nav .internal-link {
           width: 10rem;
       }
}

@media only screen and (min-device-width: 1280px) {
    .bttbtnAll {
        height: 15%;
        left: 65%;
    }

    body {
        /*background-image: url("../img/IDY/BG_PC_1280x760.jpg");
        background-position: center;*/
/*        background-repeat: repeat-y;*/
        height: 100%;
        margin:0px;
/*        background: url("../img/IDY/BG_PC_1280x720.jpg") no-repeat center center;*/
/*        background: white no-repeat center center;*/
        background: white;
        background-size: cover;
        background-attachment: fixed;
    }

    .push .nav {
        margin-left: 24.5%;
        /* margin-right: 15%; */
    }
}

@media only screen and (min-device-width: 1366px) {
    .bttbtnAll {
        height: 11%;
        left: 60%;
    }

    /*html { 
        height: 100%;
        margin:0px;
        background: url("../img/IDY/BG_PC_1366x768.jpg") no-repeat center center;
        background-size: cover;
        background-attachment: fixed;
    }*/

    body {
        /*background-image: url("../img/IDY/BG_PC_1366x768.jpg");
        background-position: center;*/
/*        background-repeat: repeat-y;*/
/*        position: sticky;*/
        height: 100%;
/*        width: 100%;*/
        margin:0px;
        /*background: url("../img/IDY/BG_PC_1366x768.jpg") no-repeat center center;
        background-size: cover;
        background-attachment: fixed;*/
    }
}

@media only screen and (min-device-width: 1536px) {
    .bttbtnAll {
        height: 11%;
        left: 65%;
    }

    body {
        /*background-image: url("../img/IDY/BG_PC_1536x864.jpg");
        background-position: center;*/
/*        background-repeat: repeat-y;*/
        height: 100%;
        margin:0px;
        /*background: url("../img/IDY/BG_PC_1536x864.jpg") no-repeat center center;
        background-size: cover;
        background-attachment: fixed;*/
    }

    .push .nav {
        margin-left: 18%;
        /* margin-right: 15%; */
    }
}

@media only screen and (min-device-width: 1920px) {
    .bttbtnAll {
        height: 11%;
        left: 60%;
    }

    body {
        /*background-image: url("../img/IDY/BG_PC.jpg");
        background-position: center;*/
/*        background-repeat: repeat-y;*/
        height: 100%;
        margin:0px;
        /*background: url("../img/IDY/BG_PC.jpg") no-repeat center center;
        background-size: cover;
        background-attachment: fixed;*/
    }
}

.bg-img {
  /* The image used */
  background-image: url("../img/IDY/Green.png");

  min-height: 6rem;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  /* Needed to position the navbar */
  position: relative;

  /* Position navbar sticky at the top */
  position: sticky;
  top: 0px;
  z-index: 100;
}


/* Position the navbar container inside the image */
.bg-img .container {
  position: absolute;
/*  margin: 20px;*/
/*  width: auto;*/
/*HH   width: 35rem;*/ /* Keep as reference this size was good on laptop view */
/*  left: 10%;*/
  /*margin-left: 10%;
  margin-right: 10%;*/
  top: 25%;
}

/* The navbar */
.topnav {
  overflow: hidden;
/*  background-color: #333;*/
}

/* Navbar links */
.topnav a {
/*  float: left;*/
/*  color: #f2f2f2;*/
  text-align: center;
/*  padding: 14px 16px;*/
  text-decoration: none;
  font-size: 17px;
}

.topnav .logo {
    float: left;
    padding: 15px;
}

.topnav .search {
    float: right;
/*HH    padding: 15px;*/ /* Keep as reference this size was good on laptop view */
}

.bttbtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  /*right: 30px;*/ /* Place the button 30px from the right */
/*  margin-right: 35%;*/
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  /*background-color: red;  Set a background color */
  /*color: white;  Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  /*padding: 15px;  Some padding */
  /*border-radius: 10px;  Rounded corners */
  /*font-size: 18px;  Increase font size */
/*  margin-right: 32%;*/
/*  height: 8%;*/  /* Control image size */
  /*  width: 40%;*/
/*  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));*/
}

.bttbtnAll {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  cursor: pointer; /* Add a mouse pointer on hover */
}

/* HH- Moved to media section
.footer .logo {
    width: 8rem;
}
*/

.footer {
  position: relative;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 400px;
}

.footer .container {
    position: absolute;
    width: 35rem;
    top: 15%;
    left: 15px;
}

footer {
    color: white;
    background-image: url("../img/IDY/Green.png");
}

/*footer .form-control {
    background-color: #1f2022;
    box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.1);
    border: none;
    resize: none;
    color: #d1d2d2;
    padding: 0.7em 1em;
}*/


@media only screen and (min-width: 320px) and (min-height: 500px){
	#loading-img {
		background-size: 20rem 40rem !important;
		width: 20rem;
		height: 40rem;
	}
    /*#box {
        font-size: 10px !important;
		width: 20rem;
		height: 40rem;
		margin: auto auto;
		position: absolute;
		top: 55%;
		left: 50%;
		background-size: 20rem 40rem;
		transform: translate(-50%,-50%);
		-webkit-transform: translate(-50%,-50%);
		-moz-transform: translate(-50%,-50%);
		-ms-transform: translate(-50%,-50%);
		-o-transform: translate(-50%,-50%);
		background-repeat: no-repeat
    }*/
	#anyClass{
		 	height:400px;
	}
	/*.col-sm-6 {
		text-align: center; 
		margin-top: 70%;
	}*/

}

@media only screen and (min-width: 360px) and (min-height: 600px){
	#loading-img {
		background-size: 23rem 41rem !important;
		width: 23rem;
/*		height: 41rem;*/
        height: 66rem;
	}
    /*#box {
        font-size: 15px !important;
		width: 23rem;
		height: 41rem;
		margin: auto auto;
		position: absolute;
		top: 49%;
		left: 50%;
		background-size: 23rem 41rem;
		transform: translate(-50%,-50%);
		-webkit-transform: translate(-50%,-50%);
		-moz-transform: translate(-50%,-50%);
		-ms-transform: translate(-50%,-50%);
		-o-transform: translate(-50%,-50%);
		background-repeat: no-repeat
    }*/
	.anyClass{
		 	height:200px;
	}
	/*.col-sm-6 {
		text-align: center; 
		margin-top: 60%;
	}*/
	#frm {
		text-align: center; 
/*		margin-top: 48%;*/
	}
	#footer{
		margin-top: 30%;
		font-size: 10px !important;
	}
	#footer1{
		margin-top: 0%;
	}
		
	/* unvisited link */
	a:link {
	  font-size: 10px !important;
	}

	/* visited link */
	a:visited {

	  font-size: 10px !important;
	}

	/* mouse over link */
	a:hover {

	  font-size: 10px !important;
	}

	/* selected link */
	a:active {
	  font-size: 10px !important;
	}
	.form-group {
		margin-bottom: 0.5rem;
	}
}

@media only screen and (min-width: 360px) and (min-height: 800px){
	#loading-img {
		width: 24rem;
		height: 51rem;
		background-size: 24rem 51rem !important;
	}
    /*#box {
        font-size: 10px !important;
		width: 24rem;
		height: 66rem;
		margin: auto auto;
		position: absolute;
		top: 50%;
		left: 50%;
		background-size: 24rem 66rem;
		transform: translate(-50%,-50%);
		-webkit-transform: translate(-50%,-50%);
		-moz-transform: translate(-50%,-50%);
		-ms-transform: translate(-50%,-50%);
		-o-transform: translate(-50%,-50%);
		background-repeat: no-repeat
    }*/
	.anyClass{
		 	height:200px;
	}
	/*.col-sm-6 {
		text-align: center; 
		margin-top: 58%;
	}*/
	#frm {
		text-align: center; 
/*		margin-top: 58%;*/
	}
	#footer{
		margin-top: 30%;
		font-size: 10px !important;
	}
	#footer1{
		margin-top: 0%;
	}
		
	/* unvisited link */
	a:link {
	  font-size: 10px !important;
	}

	/* visited link */
	a:visited {

	  font-size: 10px !important;
	}

	/* mouse over link */
	a:hover {

	  font-size: 10px !important;
	}

	/* selected link */
	a:active {
	  font-size: 10px !important;
	}
}

/* HH - default
@media only screen and (min-width: 450px){
	
	#loading-img {
		width: 23rem;
		height: 41rem;
		background-size: 23rem 41rem !important;
	}
	#box {
        font-size: 10px !important;
		width: 23rem;
		height: 41rem;
		margin: auto auto;
		position: absolute;
		top: 50%;
		left: 50%;
		background-size: 23rem 41rem;
		transform: translate(-50%,-50%);
		-webkit-transform: translate(-50%,-50%);
		-moz-transform: translate(-50%,-50%);
		-ms-transform: translate(-50%,-50%);
		-o-transform: translate(-50%,-50%);
		background-repeat: no-repeat
    }
	
	#box1 {
		width: 24rem;
		height: 35rem;
		background-size: 17rem 17rem,21rem 35rem;
		background-repeat: no-repeat;
		background-position: 50% 65.5%;
		top: 50%;
		left: 50%;
	}
	#outer {
		width: 61%;
		height: 41.9%;
		position: absolute;
		z-index: 1;
		top: 37%;
		left: 19.5%;
	}
	#pointer {
		position: relative;
		width: 3rem;
		height: 3rem;
		left: 53.5%;
		top: 38%;
		background-size: auto 3rem;

    }

    #inner {
		position: relative;
		width: 4rem;
		height: 4rem;
		left: 51%;
		top: 57%;
		background-size: auto 4rem;
		background-repeat: no-repeat;

	}
	.col-sm-6 {
		text-align: center; 
		margin-top: 60%;
	}
		#footer{
		margin-top: 35%;
	}
	#footer1{
		margin-top:0%;
	}

}
*/
@media only screen and (min-width: 450px){
    /*
    #loading-img {
        width: 23rem;
        height: 41rem;
        background-size: 23rem 41rem !important;
    }
    #box {
        font-size: 10px !important;
        width: 23rem;
        height: 41rem;
        margin: auto auto;
        position: absolute;
        top: 50%;
        left: 50%;
        background-size: 23rem 41rem;
        transform: translate(-50%,-50%);
        -webkit-transform: translate(-50%,-50%);
        -moz-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        -o-transform: translate(-50%,-50%);
        background-repeat: no-repeat
    }
    
    #box1 {
        width: 24rem;
        height: 35rem;
        background-size: 17rem 17rem,21rem 35rem;
        background-repeat: no-repeat;
        background-position: 50% 65.5%;
        top: 50%;
        left: 50%;
    }
    #outer {
        width: 61%;
        height: 41.9%;
        position: absolute;
        z-index: 1;
        top: 50%;
        left: 50%;
    }
    #pointer {
        position: relative;
        width: 3rem;
        height: 3rem;
        left: 50%;
        top: 38%;
        background-size: auto 3rem;

    }

    #inner {
        position: relative;
        width: 4rem;
        height: 4rem;
        left: 50%;
        top: 50%;
        background-size: auto 4rem;
        background-repeat: no-repeat;

    }
    .col-sm-6 {
        text-align: center; 
        margin-top: 60%;
    }
        #footer{
        margin-top: 35%;
    }
    #footer1{
        margin-top:0%;
    }

    #header {
        position: fixed;
        width: 100%;
        height: 5rem;
        top: 0%;
        z-index: 1;
        background-image: url(img/IDY/Green.png);
        background-size: auto 5rem;
        background-repeat: no-repeat;
    }
    */
}

@media only screen and (min-width: 569px){
	#loading-img {
		width: 30rem;
		height: 58rem;
		background-size: 30rem 58rem !important;
	}
    /*#box {
        font-size: 20px !important;
		width: 30rem;
		height: 58rem;
		margin: auto auto;
		position: absolute;
		top: 50%;
		left: 50%;
		background-size: 30rem 58rem;
		transform: translate(-50%,-50%);
		-webkit-transform: translate(-50%,-50%);
		-moz-transform: translate(-50%,-50%);
		-ms-transform: translate(-50%,-50%);
		-o-transform: translate(-50%,-50%);
		background-repeat: no-repeat;
    }*/
		#anyClass{
		 	height:500px;
	}
	/*.col-sm-6 {
		text-align: center; 
		margin-top: 60%;
	}*/
	#footer{
		margin-top: 50%;
	}
	#footer1{
		margin-top:0%;
	}
}
@media only screen and (min-width: 768px){
	#loading-img {
		width: 35rem;
		height: 58rem;
		background-size: 35rem 58rem !important;
	}
    #box {
        font-size: 20px !important;
		width: 35rem;
		height: 58rem;
		margin: auto auto;
		position: absolute;
		top: 50%;
		left: 50%;
		background-size: 35rem 58rem;
		transform: translate(-50%,-50%);
		-webkit-transform: translate(-50%,-50%);
		-moz-transform: translate(-50%,-50%);
		-ms-transform: translate(-50%,-50%);
		-o-transform: translate(-50%,-50%);
		background-repeat: no-repeat;
    }

	.anyClass{
		height:275px;
	}
	/*.col-sm-6 {
		text-align: center; 
		margin-top: 57%;
	}*/
	#frm {
		text-align: center; 
/*		margin-top: 48%;*/
	}
	#footer{
		margin-top: 30%;
		font-size: 15px !important;
	}
	#footer1{
		text-align: center; 
		margin-top: 0%;
		font-size: 15px !important;
	}
		
	/* unvisited link */
	a:link {
	  font-size: 20px !important;
	}

	/* visited link */
	a:visited {

	  font-size: 20px !important;
	}

	/* mouse over link */
	a:hover {

	  font-size: 20px !important;
	}

	/* selected link */
	a:active {
	  font-size: 20px !important;
	}
}

@media only screen and (min-width: 768px) and (min-height: 1024px){
	#loading-img {
		width: 41rem;
		height: 68rem;
		background-size: 41rem 68rem !important;
	}
    #box {
        font-size: 20px !important;
		width: 41rem;
		height: 68rem;
		margin: auto auto;
		position: absolute;
		top: 50%;
		left: 50%;
		background-size: 41rem 68rem;
		transform: translate(-50%,-50%);
		-webkit-transform: translate(-50%,-50%);
		-moz-transform: translate(-50%,-50%);
		-ms-transform: translate(-50%,-50%);
		-o-transform: translate(-50%,-50%);
		background-repeat: no-repeat;
    }

	.anyClass{
		height:300px;
	}
	/*.col-sm-6 {
		text-align: center; 
		margin-top: 55%;
	}*/
	#footer{
		margin-top: 30%;
		font-size: 20px !important;
	}
	#footer1{
		margin-top: 0%;
	}
		
	/* unvisited link */
	a:link {
	  font-size: 25px !important;
	}

	/* visited link */
	a:visited {

	  font-size: 25px !important;
	}

	/* mouse over link */
	a:hover {

	  font-size: 25px !important;
	}

	/* selected link */
	a:active {
	  font-size: 25px !important;
	}
}



@media only screen and (min-width: 1024px) and (min-height: 650px){
	#loading-img {
		width: 50rem;
		height: 80rem;
		background-size: 50rem 80rem !important;
	}
    #box {
        font-size: 20px !important;
		width: 50rem;
		height: 80rem;
		margin: auto auto;
		position: absolute;
		top: 70%;
		left: 50%;
		background-size: 50rem 80rem;
		transform: translate(-50%,-50%);
		-webkit-transform: translate(-50%,-50%);
		-moz-transform: translate(-50%,-50%);
		-ms-transform: translate(-50%,-50%);
		-o-transform: translate(-50%,-50%);
		background-repeat: no-repeat
    }
	#anyClass{
		 height:650px;
	}
	/*.col-sm-6 {
		text-align: center; 
		margin-top: 70%;
	}*/
}
@media only screen and (min-width: 1024px) and (min-height: 1500px){
	#loading-img {
		width: 50rem;
		height: 80rem;
		background-size: 50rem 80rem !important;
	}
    #box {
        font-size: 20px !important;
		width: 50rem;
		height: 80rem;
		margin: auto auto;
		position: absolute;
		top: 50%;
		left: 50%;
		background-size: 50rem 80rem;
		transform: translate(-50%,-50%);
		-webkit-transform: translate(-50%,-50%);
		-moz-transform: translate(-50%,-50%);
		-ms-transform: translate(-50%,-50%);
		-o-transform: translate(-50%,-50%);
		background-repeat: no-repeat
    }
	.anyClass{
		height:300px;
	}
	/*.col-sm-6 {
		text-align: center; 
		margin-top: 70%;
	}*/
	
	/* unvisited link */
	a:link {
	  font-size: 15px !important;
	}

	/* visited link */
	a:visited {

	  font-size: 15px !important;
	}

	/* mouse over link */
	a:hover {

	  font-size: 15px !important;
	}

	/* selected link */
	a:active {
	  font-size: 15px !important;
	}
}

@media only screen and (min-width: 1080px) and (min-height: 720px) {
	#loading-img {
		width: 35rem;
		height: 60rem;
		background-size: 35rem 60rem !important;
	}
    #box {
        font-size: 20px !important;
		width: 35rem;
		height: 60rem;
		margin: auto auto;
		position: absolute;
		top: 65%;
		left: 50%;
		background-size: 35rem 60rem;
		transform: translate(-50%,-50%);
		-webkit-transform: translate(-50%,-50%);
		-moz-transform: translate(-50%,-50%);
		-ms-transform: translate(-50%,-50%);
		-o-transform: translate(-50%,-50%);
		background-repeat: no-repeat
    }
	.anyClass{
		height:284px;
	}
	
	/* unvisited link */
	a:link {
	  font-size: 15px !important;
	}

	/* visited link */
	a:visited {

	  font-size: 15px !important;
	}

	/* mouse over link */
	a:hover {

	  font-size: 15px !important;
	}

	/* selected link */
	a:active {
	  font-size: 15px !important;
	}
	
	/*.col-sm-6 {
		text-align: center; 
		margin-top:58%;
	}*/
	#footer{
		margin-top:30%;
	}
	
	#footer1{
		margin-top:0%;
	}
	
	
}

@media only screen and (min-width: 1080px) and (min-height: 1500px) {

	/*
	a:link {
	  font-size: 30px !important;
	}

	a:visited {
	  font-size: 30px !important;
	}

	a:hover {
	  font-size: 30px !important;
	}

	a:active {
	  font-size: 30px !important;
	}
	.form-control{
	  font-size: 2rem;
	}
	#loading-img {
		width: 60rem;
		height: 110rem;
		background-size: 60rem 110rem !important;
	}
    #box {
        font-size: 20px !important;
		width: 60rem;
		height: 110rem;
		margin: auto auto;
		position: absolute;
		top: 50%;
		left: 50%;
		background-size: 60rem 110rem;
		transform: translate(-50%,-50%);
		-webkit-transform: translate(-50%,-50%);
		-moz-transform: translate(-50%,-50%);
		-ms-transform: translate(-50%,-50%);
		-o-transform: translate(-50%,-50%);
		background-repeat: no-repeat
    }
	.anyClass{
		height:550px;
	}
	#frm {
		text-align: center; 
		margin-top: 60%;
	}
	#box1 {
		width: 60rem;
		height: 110rem;
		background-size: 50rem 50rem,60rem 110rem;
		background-repeat: no-repeat;
		background-position: 53% 50%;
		top: 50%;
		left: 50%;
	}
	#outer {
		width: 71%;
		height: 38.8%;
		position: absolute;
		z-index: 1;
		top: 30.5%;
		left: 15%;
	}
	#pointer {
		position: relative;
		width: 6rem;
		height: 6rem;
		left: 53.5%;
		top: 30%;
		background-size: auto 6rem;

    }

    #inner {
		position: relative;
		width: 15rem;
		height: 15rem;
		left: 51.5%;
		top: 49%;
		background-size: auto 15rem;
		background-repeat: no-repeat;
	}
	.col-sm-6 {
		text-align: center; 
		margin-top: 61%;
	}
	#footer{
		margin-top:30%;
		font-size: 30px !important;
	}
	#footer1{
		margin-top:0%;
	}
    */
}


@media only screen and (min-width: 1900px) and (min-height: 900px) {
	
	#loading-img {
		width: 35rem;
		height: 60rem;
		background-size: 35rem 60rem !important;
	}
    #box {
        font-size: 20px !important;
		width: 35rem;
		height: 60rem;
		margin: auto auto;
		position: absolute;
		top: 51%;
		left: 50%;
		background-size: 35rem 60rem;
		transform: translate(-50%,-50%);
		-webkit-transform: translate(-50%,-50%);
		-moz-transform: translate(-50%,-50%);
		-ms-transform: translate(-50%,-50%);
		-o-transform: translate(-50%,-50%);
		background-repeat: no-repeat
    }
	.anyClass{
		height:270px;
	}
	
	/* unvisited link */
	a:link {
	  font-size: 20px !important;
	}

	/* visited link */
	a:visited {

	  font-size: 20px !important;
	}

	/* mouse over link */
	a:hover {

	  font-size: 20px !important;
	}

	/* selected link */
	a:active {
	  font-size: 20px !important;
	}
	
	/*.col-sm-6 {
		text-align: center; 
		margin-top:57%;
	}*/
	#footer{
		margin-top:30%;
		font-size: 20px !important;
	}
	
	#footer1{
		margin-top:0%;
	}
}

.box {
    width: 35rem;
    height: 60rem;
    margin: auto auto;
    position: absolute;
    top: 67%;
    left: 50%;
	background-image: url(img/mahsing/login_background.png);
	background-size: 35rem 60rem;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    background-repeat: no-repeat;
}

/* HH -tempoff*/
/*.box1 {
    width: 35rem;
    height: 60rem;
    margin: auto auto;
    position: absolute;
    top: 67%;
    left: 50%;
	background-image: url(img/mahsing/login_background.png);
	background-size: 35rem 60rem;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    background-repeat: no-repeat;
}

.box1 .outer {
    width: 61%;
    height: 40.2%;
    position: absolute;
    z-index: 1;
    top: 33.5%;
    left: 20%;
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
}

.box1 .outer img{
    width: 100%;
}

.box1 .inner{
    position: relative;
    width: 4rem;
    height: 4rem;
    left: 50.5%;
    top: 44%
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 2;	
    background-image: url(img/mahsing/Click_n_SPIN.png);
    background-size: auto 4rem;
    background-repeat: no-repeat;
    cursor: pointer;
}

.box1 .pointer{
    position: relative;
    width:4rem;
    height: 4rem;
    left: 54%;
    top: 33%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 2;	
    background-image: url(img/mahsing/Pointer.png);
    background-size: auto 4rem;
    background-repeat: no-repeat;
    cursor: pointer;
}
.box1 .inner.start:active{

    -webkit-transform: translate(-50%, -50%) scale(.95);
    -moz-transform: translate(-50%, -50%) scale(.95);
    -ms-transform: translate(-50%, -50%) scale(.95);
    -o-transform: translate(-50%, -50%) scale(.95);
    transform: translate(-50%, -50%) scale(.95);
}

.box1 .inner.start{
    background-position: 0 0;
}
.box1 .inner.no-start{
    background-position: -6.6rem 0;
}
.box1 .inner.completed{
    background-position: -13rem 0;
}*/



.list-group-item {
	background-color: transparent;
	border-top: 1px solid #e9d98d;
	border-bottom: 1px solid #e9d98d;
	border-radius: 0;
	color: #e9d98d;
	border-left-color: #e9d98d;
	border-right-color: #e9d98d;
	font-size: 70%;
	font-weight:bold;
	
}
.anyClass {

  	overflow-y: scroll;

}

.anyClass::-webkit-scrollbar {
    	width: 12px;
	}
	
.anyClass::-webkit-scrollbar-track {
	    -webkit-box-shadow: inset 0 0 6px #e9d98d; 
	    border-radius: 10px;
	}

.anyClass::-webkit-scrollbar-thumb {
	    border-radius: 10px;
	    -webkit-box-shadow: inset 0 0 6px #e9d98d; 
	}
	
.anyClass::-webkit-scrollbar-thumb:hover {
		background:#e9d98d; 
	}