.clock {
	
  max-width: 100px;
  margin: 0 auto;

}/*Default for iphone*/
.reveal div.slide-background {
    background-size: 95% 100%
}

.reveal .lg-only, .reveal .sm-only {
    display: none;
}

.reveal .xsm-only {
    display: block;
}

.rtop4x {
	   position:relative;
        z-index: 555;
        top: 42%;
    }

.rtop4xx {
        position: relative;
        z-index: 555;
        top: 44%;
    }



/* IOS ALL NEW BEGIN */

.reveal h7 {
	font-family: "ArimoRegular";
	font-size: 28px;
      color: #ffffff;
    font-style: bold;
	
}

.reveal h7b2 {
	font-family: "ArimoRegular";
	font-size: 32px;
    color:#f8f509;
    font-style: bold;
}

.reveal h12a   {
	color: #ffffff;
	font-family:"ArimoRegular";
	font-size: 34px;
	font-style: bold;
	text-align: center;
}

.reveal h12subtitle      {
	color: #ffffff;
	font-family:"ArimoRegular";
	font-size: 46px;
	font-style: bold;
	text-align: center;
	
  
}

.reveal h7b {
	font-size: 24px;
    color:#65e9e7;
   
}

.reveal h8 {
    margin: 0 0 20px 0;
    color: #65e9e7;
    font-family: "Conv_CALIBRI";
    font-size: 20px;
    line-height: 0.9em;
   
}

.reveal h9 {
   
    color: #ffffff;
    font-family: "Conv_CALIBRI";
    font-size: 12px;
   
    text-shadow: none;

}

.singlespace {
   
    line-height: 0.3;
	padding-left: 5%; padding-right: 5%;

}

/*********************************************
 * IOS LINKS ALL NEW CONTINUED
 *********************************************/
.reveal a:not(.image) {
     color: #ffffff;
    font-family: "Conv_CALIBRI";
    font-size: 10px;
   
    text-shadow: none;

}

.reveal a:not(.image):hover {
    color: #f143ad;
    text-shadow: none;
    border: none;
}

.reveal .roll span:after {
    color: #000000;
    background: #000000;
}

/* IOS ALL NEW END */



/*Small devices such as tablets*/
@media only screen
and (min-device-width: 768px)
and (orientation: landscape) {

    .reveal div.slide-background {
        background-size: 40% 95%
    }

    .reveal .h9 {
        font-size: 14px;
    }

    .reveal .lg-only, .reveal .xsm-only {
        display: none;
    }

    .reveal .sm-only {
        display: block;
    }

   .rtop4x {
	   position:relative;
        z-index: 555;
        top: 45%;
    }
	
	.rtop4xx {
        position: relative;
        z-index: 55;
        top: 45%;
    }

}
/*SMALL DEVICES END*/



/*Larger devices BEGIN (such as desktops)*/
@media only screen
and (min-device-width: 1024px)
 {

    .reveal div.slide-background {
        background-size: 34% 95%
    }

    .reveal h6.h9 {

        color: #504105;
        font-family: "Conv_CALIBRI", sans-serif;
        font-size: 20px;
        line-height: 0.5em;
        text-shadow: none;

    }
    .reveal .lg-only {
        display: block;
    }

    .reveal .sm-only, .reveal .xsm-only {
        display: none;
    }

    .rtop4x {
        position: relative;
        z-index: 55;
        top: 45%;
    }
	
	.rtop4xx {
        position: relative;
        z-index: 55;
        top: 45%;
    }



/* LARGER DEVICES ALL NEW BEGIN */

.reveal h7 {
	font-family: "ArimoRegular";
	font-size: 28px;
      color: #ffffff;
    font-style: bold;
	
}

.reveal h7b2 {
	font-family: "ArimoRegular";
	font-size: 32px;
    color:#f8f509;
    font-style: bold;
}

.reveal h12a   {
	color: #ffffff;
	font-family:"ArimoRegular";
	font-size: 36px;
	font-style: bold;
	text-align: center;
}

.reveal h12subtitle      {
	color: #ffffff;
	font-family:"ArimoRegular";
	font-size: 46px;
	font-style: bold;
	text-align: center;
	
  
}


.reveal h7b {
	font-size: 20px;
    color:#65e9e7;
   
}

.reveal h8 {
    margin: 0 0 20px 0;
    color: #65e9e7;
    font-family: "Conv_CALIBRI";
    font-size: 18px;
    line-height: 0.9em;
   
}

.reveal h9 {
   
    color: #ffffff;
    font-family: "Conv_CALIBRI";
    font-size: 22px;
   
    text-shadow: none;

}

.singlespace {
   
    line-height: 0.5;
	padding-left: 5%; padding-right: 5%;

}
	
	


/*********************************************
 * DESKTOP LINKS ALL NEW CONTINUED
 *********************************************/
.reveal a:not(.image) {
   color: #ffffff;
    font-family: "Conv_CALIBRI";
    font-size: 20px;
    line-height: 0.5em;
    text-shadow: none;
}

.reveal a:not(.image):hover {
    color: #f143ad;
    text-shadow: none;
    border: none;
}

.reveal .roll span:after {
    color: #000000;
    background: #000000;
}
}

/* LARGER DEVICES ALL NEW END */




/*THIS IS FOR portrait */

/* Default is phones */

.portrait {

    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 0;
    z-index: -10;
}

.portrait2 {
	width: 100%;
    height: 100%;
}

/*Small devices such as tablets*/
@media only screen
and (min-device-width: 768px)
and (orientation: landscape) {

    .portrait2 {
        height: 98%;
		width: auto;
    }

    .portrait {
        top: 1.0%;
        z-index: -10;
    }
}

/*Larger devices (such as desktops)*/
@media only screen
and (min-device-width: 1024px) {

    .portrait {
		top: 1.0%;
        z-index: -10;
    }

    .portrait2 {
		 height: 98%;
		width: auto;
    }
}






/*THIS IS FOR portraitduplicate */

/* Default is phones */

.portraitduplicate {

    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 0;
    z-index: 110;
}

.portraitduplicateb {
    height: 100%;
	width: 100%;
}

/*Small devices such as tablets*/
@media only screen
and (min-device-width: 768px)
and (orientation: landscape) {

    .portraitduplicateb {
         height: 98%;
		width: auto;
    }

    .portraitduplicate {
        top: 1.0%;
        z-index: 110;
    }
}

/*Larger devices (such as desktops)*/
@media only screen
and (min-device-width: 1024px) {

    .portraitduplicate {
		 top: 1.0%;
        z-index: 110;
    }

    .portraitduplicateb {
		 height: 98%;
		width: auto;
    }
}











/*THIS IS FOR portraitduplicate2 */

/* Default is phones */

.portraitduplicate2 {

    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 0;
    z-index: 210;
}

.portraitduplicate2b {
    height: 100%;
	width: 100%;
}

/*Small devices such as tablets*/
@media only screen
and (min-device-width: 768px)
and (orientation: landscape) {

    .portraitduplicate2b {
        height: 98%;
		width: auto;
    }

    .portraitduplicate2 {
        top: 1.0%;
        z-index: 210;
    }
}

/*Larger devices (such as desktops)*/
@media only screen
and (min-device-width: 1024px) {

    .portraitduplicate2 {
		 top: 1.0%;
        z-index: 210;
    }

    .portraitduplicate2b {
		 height: 98%;
		width: auto;
    }
}



/*THIS IS FOR portraitduplicate3 */

/* Default is phones */

.portraitduplicate3 {

    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 0;
    z-index: 510;
}

.portraitduplicate3b {
    height: 100%;
	width: 100%;
}

/*Small devices such as tablets*/
@media only screen
and (min-device-width: 768px)
and (orientation: landscape) {

    .portraitduplicate3b {
        height: 98%;
		width: auto;
    }

    .portraitduplicate3 {
        top: 1.0%;
        z-index: 510;
    }
}

/*Larger devices (such as desktops)*/
@media only screen
and (min-device-width: 1024px) {

    .portraitduplicate3 {
		 top: 1.0%;
        z-index: 510;
    }

    .portraitduplicate3b {
		  height: 98%;
	width: auto;
		
    }
}




/*THIS IS FOR portraitduplicate4 */

/* Default is phones */

.portraitduplicate4 {

    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 0;
    z-index: 511;
}

.portraitduplicate4b {
    height: 100%;
	width: 100%;
}

/*Small devices such as tablets*/
@media only screen
and (min-device-width: 768px)
and (orientation: landscape) {

    .portraitduplicate4b {
        height: 98%;
		width: auto;
    }

    .portraitduplicate4 {
        top: 1.0%;
        z-index: 511;
    }
}

/*Larger devices (such as desktops)*/
@media only screen
and (min-device-width: 1024px) {

    .portraitduplicate4 {
		top: 1.0%;
        z-index: 511;
    }

    .portraitduplicate4b {
		height: 98%;
		width: auto;
    }
}




/*THIS IS FOR portraitduplicate3mess */

/* Default is phones */

.portraitduplicate3mess {
   position: absolute;  
    top: .0%;
    left: 0;
    bottom: 0;
    right: 0;
	padding: 0px;
   z-index: -10;
  
}


.portraitduplicate3messb {
    width : 100%;
    height: 100%;
}

/*Small devices such as tablets*/
@media only screen
and (min-device-width: 768px)
and (orientation: landscape) {

    .portraitduplicate3messb {
        /* override just the attributes you need
          for positioning on a  tablet */
		   width : 40%;
    height: 98%;
    }
	
	.portraitduplicate3mess {
   position: absolute;  
    top: 1.0%;
    left: 0;
    bottom: 0;
    right: 0;
	padding: 0px;
   z-index: -10;
  
}
}

/*Larger devices (such as desktops)*/
@media only screen
and (min-device-width: 1024px)
{
	
	.portraitduplicate3mess {
   position: absolute;  
    top: 1.0%;
    left: 0;
    bottom: 0;
    right: 0;
	padding: 0px;
   z-index: -10;
  
}

    .portraitduplicate3messb {
        /* override just the attributes you need
          for positioning on a desktop*/
		  width : 30%;
    height: 98%;
	
	 
    }

}









/*THIS IS FOR tips */

/* Default is phones */

.tips {
   position: absolute;  
    top: .0%;
    left: 0;
    bottom: 0;
    right: 0;
	padding: 0px;
   z-index: 199;
  
}


.tips2 {
    
    height: 100%;
}

/*Small devices such as tablets*/
@media only screen
and (min-device-width: 768px)
and (orientation: landscape) {

    .tips2 {
        /* override just the attributes you need
          for positioning on a  tablet */
		
    height: 98%;
    }
	
	.tips {
   position: absolute;  
    top: 1.0%;
    left: 0;
    bottom: 0;
    right: 0;
	padding: 0px;
   z-index: 199;
  
}
}

/*Larger devices (such as desktops)*/
@media only screen
and (min-device-width: 1024px)
{
	
	.tips {
   position: absolute;  
    top: 1.0%;
    left: 0;
    bottom: 0;
    right: 0;
	padding: 0px;
   z-index: 199;
  
}

    .tips2 {
        /* override just the attributes you need
          for positioning on a desktop*/

    height: 98%;
	
	 
    }

}













.top0 { position:relative; z-index:-2; top:0%;}
.top01 { position:relative; z-index:55; top:01%;}
.top02 { position:relative; z-index:-2; top:02%;}
.top03 { position:relative; z-index:2; top:03%;}
.top05 { position:relative; z-index:2; top:05%;}
.top07 { position:relative; z-index: 2; top:07%;}
.top08 { position:relative; z-index:-2; top:08%;}
.top10 { position:relative; z-index:-2; top:10%;}
.top12 { position:relative; z-index:-2; top:12%;}
.top13 { position:relative; z-index:-2; top:13%;}
.top15 { position:relative; z-index:-2; top:15%;}
.top16 { position:relative; z-index:-2; top:16%;}
.top15b { position:relative; z-index:-2; top:15%; padding-left: 10%; padding-right: 10%;}
.top18 { position:relative; z-index:55; top:18%;}
.top18b { position:relative; z-index:55; top:18%; padding-left: 10%; padding-right: 10%;}
.top20 { position:relative; z-index:55; top:20%;}
.top20b { position:relative; z-index:55; top:20%; padding-left: 10%; padding-right: 10%;}
.top23 { position:relative; z-index:55; top:23%;}
.top23b { position:relative; z-index:55; top:23%; padding-left: 10%; padding-right: 10%;}
.top24 { position:relative; z-index:55; top:24%;}
.top24b { position:relative; z-index:55; top:24%; padding-left: 10%; padding-right: 10%;}
.top25 { position:relative; z-index:55; top:25%;}
.top25b { position:relative; z-index:55; top:25%; padding-left: 10%; padding-right: 10%;}
.top27 { position:relative; z-index:55; top:27%;}
.top27b { position:relative; z-index:55; top:27%; padding-left: 10%; padding-right: 10%;}
.top28 { position:relative; z-index:55; top:28%;}
.top28b { position:relative; z-index:55; top:28%; padding-left: 10%; padding-right: 10%;}
.top30 { position:relative; z-index:55; top:30%;}
.top30b { position:relative; z-index:55; top:30%; padding-left: 10%; padding-right: 10%;}
.top33 { position:relative; z-index:55; top:33%;}
.top33b { position:relative; z-index:55; top:33%; padding-left: 10%; padding-right: 10%;}
.top35 { position:relative; z-index:55; top:35%;}
.top35b { position:relative; z-index:555; top:35%; padding-left: 10%; padding-right: 10%;}
.top36 { position:relative; z-index:555; top:36%;}
.top36b { position:relative; z-index:555; top:36%; padding-left: 10%; padding-right: 10%;}
.top37 { position:relative; z-index:555; top:37%;}
.top38 { position:relative; z-index:555; top:38%;}
.top38b { position:relative; z-index:555; top:38%; padding-left: 10%; padding-right: 10%;}
.top39 { position:relative; z-index:555; top:39%;}
.top40 { position:relative; z-index:555; top:40%;}
.top40b { position:relative; z-index:555; top:40%; padding-left: 10%; padding-right: 10%; text-align: left;}
.top41 { position:relative; z-index:555; top:41%;}
.top41b { position:relative; z-index:555; top:41%; padding-left: 10%; padding-right: 10%;}
.top40c { position:relative; z-index:-2; top:40%;}
.top45 { position:relative; z-index:55; top:45%;}
.top45x { position:relative; z-index:-2; top:45%;}
.top50 { position:relative; z-index:55; top:50%;}



/*THIS IS FOR top24ad PLAY BUTTON FOR AD VIDEOS*/

/* Default is phones */

.top24ad { 
position:absolute; 
top:35%;
left: 0%;
    bottom: 0%;
    right: 0%;
	padding: 0px;
   z-index: 499;
   margin-left: auto;
    margin-right: auto;
	 width: 70%;
  height: 70%;
}
	
	
	
	.top24ad2 { 
position:absolute; 
top:25%;
left: 0%;
    bottom: 0%;
    right: 0%;
	padding: 0px;
   z-index: 399;
   margin-left: auto;
    margin-right: auto;
	 width: 70%;
  height: 70%;
  }
  

/*Small devices such as tablets*/
@media only screen
and (min-device-width: 768px)
and (orientation: landscape) {
    
	
	.top24ad { 
position:absolute; 
top:40%;
left: 0%;
    bottom: 0%;
    right: 0%;
	padding: 0px;
   z-index: 499;
   margin-left: auto;
    margin-right: auto;
	 width: 30%;
  height: 30%;
  }
	
	
	.top24ad2 { 
position:absolute; 
top:24%;
left: 0%;
    bottom: 0%;
    right: 0%;
	padding: 0px;
   z-index: 399;
   margin-left: auto;
    margin-right: auto;
	 width: 70%;
  height: 70%;
  }

  
}


/*Larger devices (such as desktops)*/
@media only screen
and (min-device-width: 1024px)
{

    
	.top24ad { 
position:absolute; 
top:40%;
left: 0%;
    bottom: 0%;
    right: 0%;
	padding: 0px;
   z-index: 499;
   margin-left: auto;
    margin-right: auto;
	 width: 50%;
  height: 50%;
  }
	
	
	.top24ad2 { 
position:absolute; 
top:24%;
left: 0%;
    bottom: 0%;
    right: 0%;
	padding: 0px;
   z-index: 399;
   margin-left: auto;
    margin-right: auto;
	 width: 70%;
  height: 70%;
  }
  
}

#scrollTitles {
    position: absolute;
    overflow: auto;
    overflow-y: hidden; /* Hide vertical scrollbar */
    width: 70%;
    height: 35%;
    top: 30%;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 0px;
    z-index: 1;
    margin-left: auto;
    margin-right: auto;

}



/*********************************************
 * FOR HOVER GO TO HOVER IN IOS LINKS ALL NEW CONTINUED AND HOVER IN DESKTOP LINKS ALL NEW CONTINUED
 *********************************************/

a.one:link {color: #6bc1ed;font-size:60%;
font-family: ArimoRegular, "sans-serif";

}
a.one:visited {color: #6bc1ed;font-size:70%;
font-family: ArimoRegular, "sans-serif";
	
}

a.two:link {color: #ffffff;font-size:50%;
font-family: ArimoRegular, "sans-serif";

}
a.two:visited {color: #6bc1ed;font-size:60%;
font-family: ArimoRegular, "sans-serif";
	
}

/*TRANSITIONS*/
.transition {
   position: absolute;  
    top: 0%;
    left: 0;
    bottom: 0;
    right: 0;
	padding: 0px;
   z-index: 1000;
  
}

    .transition2 {
        /* override just the attributes you need
          for positioning on a desktop*/
		  width : 100%;
    height: 100%;	 
    }





/*THIS IS FOR helmet */

/* Default is phones */

.helmet {
   position: absolute;  
    top: 10%;
    left: 0;
    bottom: 0;
    right: 0;
	padding: 0px;
   z-index: 10;
  
}


.helmet2 {
width:100%;
    height: 65%;
}

/*Small devices such as tablets*/
@media only screen
and (min-device-width: 768px)
and (orientation: landscape) {

  
	.helmet {
   position: absolute;  
    top: 0.0%;
   
   z-index: 10;
  
}
	
	  .helmet2 {
        /* override just the attributes you need
          for positioning on a  tablet */
width:100%;
    height: 100%;
    }
	
}

/*Larger devices (such as desktops)*/
@media only screen
and (min-device-width: 1024px)
{
	
	.helmet {
   position: absolute;  
    top: 0.0%;
    
   z-index: 10;
  
}

    .helmet2 {
        /* override just the attributes you need
          for positioning on a desktop*/

    height: 100%;
	width:100%;
	 
    }

}









/*THIS IS FOR helmetduplicate */

/* Default is phones */

.helmetduplicate {
   position: absolute;  
    top: 5%;
    left: 0;
    bottom: 0;
    right: 0;
	padding: 0px;
   z-index: 110;
  
}


.helmetduplicateb {
width:100%;
    height: 100%;
}

/*Small devices such as tablets*/
@media only screen
and (min-device-width: 768px)
and (orientation: landscape) {
	
	.helmetduplicate {
   position: absolute;  
    top: 0.0%;
    
   z-index: 110;
  
}
	
	.helmetduplicateb {
        /* override just the attributes you need
          for positioning on a  tablet */
width:100%;
    height: 100%;
    }
}


/*Larger devices (such as desktops)*/
@media only screen
and (min-device-width: 1024px)
{
	
	.helmetduplicate {
 
    top: 0.0%;
    
   z-index: 110;
  
}

    .helmetduplicateb {
        /* override just the attributes you need
          for positioning on a desktop*/
    width:100%;
    height: 100%;
	
	 
    }

}








/*THIS IS FOR helmetduplicate2 */

/* Default is phones */

.helmetduplicate2 {
   position: absolute;  
    top: 30%;
    left: 0;
    bottom: 0;
    right: 0;
	padding: 0px;
   z-index: 1;
  
}


.helmetduplicate2b {
width:100%;
    height: 65%;
}

/*Small devices such as tablets*/
@media only screen
and (min-device-width: 768px)
and (orientation: landscape) {
	
	.helmetduplicate2 {
   position: absolute;  
    top: 0.0%;

   z-index: 1;
  
}
	
	.helmetduplicate2b {
        /* override just the attributes you need
          for positioning on a  tablet */
width:100%;
    height: 100%;
    }
}


/*Larger devices (such as desktops)*/
@media only screen
and (min-device-width: 1024px)
{
	
	.helmetduplicate2 {
   position: absolute;  
    top: 0.0%;
    
   z-index: 1;
  
}

    .helmetduplicate2b {
        /* override just the attributes you need
          for positioning on a desktop*/
width:100%;
    height: 100%;
	
	 
    }

}







/*THIS IS FOR helmetduplicate3 */

/* Default is phones */

.helmetduplicate3 {
   position: absolute;  
    top: 30%;
    left: 0;
    bottom: 0;
    right: 0;
	padding: 0px;
   z-index: 8;
  
}


.helmetduplicate3b {
width:100%;
    height: 65%;
}

/*Small devices such as tablets*/
@media only screen
and (min-device-width: 768px)
and (orientation: landscape) {
	
	.helmetduplicate3 {
   position: absolute;  
    top: 0.0%;
  
   z-index: 8;
  
}
	
	.helmetduplicate3b {
        /* override just the attributes you need
          for positioning on a  tablet */
width:100%;
    height: 100%;
    }
}


/*Larger devices (such as desktops)*/
@media only screen
and (min-device-width: 1024px)
{
	
	.helmetduplicate3 {
   position: absolute;  
    top: 0.0%;
   
   z-index: 8;
  
}

    .helmetduplicate3b {
        /* override just the attributes you need
          for positioning on a desktop*/
width:100%;
    height: 100%;
	
	 
    }

}








/*THIS IS FOR helmetduplicate4 */

/* Default is phones */

.helmetduplicate4 {
   position: absolute;  
    top: 5%;
    left: 0;
    bottom: 0;
    right: 0;
	padding: 0px;
   z-index: 200;
  
}


.helmetduplicate4b {
width:100%;
    height: 100%;
}

/*Small devices such as tablets*/
@media only screen
and (min-device-width: 768px)
and (orientation: landscape) {
	
	.helmetduplicate4 {
   position: absolute;  
    top: 0.0%;
   
   z-index: 200;
  
}
	
	.helmetduplicate4b {
        /* override just the attributes you need
          for positioning on a  tablet */
width:100%;
    height: 100%;
    }
}


/*Larger devices (such as desktops)*/
@media only screen
and (min-device-width: 1024px)
{
	
	.helmetduplicate4 {
   position: absolute;  
    top: 0.0%;
   
   z-index: 200;
  
}

    .helmetduplicate4b {
        /* override just the attributes you need
          for positioning on a desktop*/
width:100%;
    height: 100%;
	
	 
    }

}




/*THIS IS FOR popbutton BOTTOM */

/* Default is phones */

.popbutton {
   position: absolute;  
   top: 35.0%;
    left: 0;
    bottom: 0;
    right: 0;
	padding: 0px;
   z-index: 5610;
  
}


.popbuttonb {
width : 100%;
    height: 100%;	 
}

/*Small devices such as tablets*/
@media only screen
and (min-device-width: 768px)
and (orientation: landscape) {

    .popbuttonb {
        /* override just the attributes you need
          for positioning on a  tablet */
width : 100%;
    height: 90%;	 
    }
	
	.popbutton { 
   top: 45.0%;
   z-index: 5610;
  
}
}

/*Larger devices (such as desktops)*/
@media only screen
and (min-device-width: 1024px)
{
	
	.popbutton { 
    top: 45.0%;
   
   z-index: 5610;
  
}

    .popbuttonb {
        /* override just the attributes you need
          for positioning on a desktop*/
width : 100%;
    height: 90%;	 
    }
}





/*THIS IS FOR popbutton VERY BOTTOM */

/* Default is phones */

.popbuttonbot {
   position: absolute;  
   top: 55.0%;
    left: 0;
    bottom: 0;
    right: 0;
	padding: 0px;
   z-index: 5510;
  
}


.popbuttonbotb {
width : 100%;
    height: 90%;	 
}

/*Small devices such as tablets*/
@media only screen
and (min-device-width: 768px)
and (orientation: landscape) {

    .popbuttonbotb {
        /* override just the attributes you need
          for positioning on a  tablet */
width : 100%;
    height: 90%;	 
    }
	
	.popbuttonbot {
 
   top: 60.0%;
   
   z-index: 5510;
  
}
}

/*Larger devices (such as desktops)*/
@media only screen
and (min-device-width: 1024px)
{
	
	.popbuttonbot {

    top: 60.0%;
   
   z-index: 5510;
  
}

    .popbuttonbotb {
        /* override just the attributes you need
          for positioning on a desktop*/
width : 100%;
    height: 90%;	 
    }
}







/*THIS IS FOR popbutton2 TOP */

/* Default is phones */

.popbutton2 {
   position: absolute;  
   top: 0%;
    left: 0%;
    bottom: 0;
    right: 0;
	padding: 0px;
   z-index: 5310;
  
}


.popbutton2b {
    width : 100%;
    height: 15%;	
}

/*Small devices such as tablets*/
@media only screen
and (min-device-width: 768px)
and (orientation: landscape) {

    .popbutton2b {
        /* override just the attributes you need
          for positioning on a  tablet */
		  width : 100%;
    height: 15%;	
    }
	
	.popbutton2 {
   position: absolute;  
 top: 0%;
    left: 25%;
    bottom: 0;
    right: 0;
	padding: 0px;
   z-index: 5310;
  
}
}

/*Larger devices (such as desktops)*/
@media only screen
and (min-device-width: 1024px)
{
	
	.popbutton2 {
   position: absolute;  
    top: 0%;
    left: 25%;
    bottom: 0;
    right: 0;
	padding: 0px;
   z-index: 5310;
  
}

    .popbutton2b {
        /* override just the attributes you need
          for positioning on a desktop*/
		width : 100%;
    height: 15%;	 
    }
}



/*THIS IS FOR popbutton3 VERY TOP FOR MESSAGES */

/* Default is phones */

.popbutton3 {
   position: absolute;  
   top: 0%;
    left: 0%;
    bottom: 0;
    right: 0;
	padding: 0px;
   z-index: 0;
  
}


.popbutton3b {
    width : 100%;
    height: 15%;	
}

/*Small devices such as tablets*/
@media only screen
and (min-device-width: 768px)
and (orientation: landscape) {

    .popbutton3b {
        /* override just the attributes you need
          for positioning on a  tablet */
		  width : 15%;
    height: 15%;	
    }
	
	.popbutton3 {
   position: absolute;  
 top: 0%;
    left: 25%;
    bottom: 0;
    right: 0;
	padding: 0px;
   z-index: 0;
  
}
}

/*Larger devices (such as desktops)*/
@media only screen
and (min-device-width: 1024px)
{
	
	.popbutton3 {
   position: absolute;  
    top: 0%;
    left: 25%;
    bottom: 0;
    right: 0;
	padding: 0px;
   z-index: 0;
  
}

    .popbutton3b {
        /* override just the attributes you need
          for positioning on a desktop*/
		  width : 15%;
    height: 15%;	 
    }
}






/*THIS IS FOR popbuttontop */

/* Default is phones */

.popbuttontop {
   position: absolute;  
   top: 5.0%;
    left: 0;
    bottom: 0;
    right: 0;
	padding: 0px;
   z-index: 5410;
  
}


.popbuttontopb {
   width : 100%;
    height: 70%;	 
}

/*Small devices such as tablets*/
@media only screen
and (min-device-width: 768px)
and (orientation: landscape) {

    .popbuttontopb {
        /* override just the attributes you need
          for positioning on a  tablet */
		  width : 100%;
    height: 50%;	 
    }
	
	.popbuttontop {
 
   top: 5.0%;
   
   z-index: 5410;
  
}
}

/*Larger devices (such as desktops)*/
@media only screen
and (min-device-width: 1024px)
{
	
	.popbuttontop {
  
    top: 5.0%;
    
   z-index: 5410;
  
}

    .popbuttontopb {
        /* override just the attributes you need
          for positioning on a desktop*/
		width : 100%;
    height: 50%;	 
    }
}


/*THIS IS FOR popbuttonmess FOR IOS RECORDER AND RECORDER MESSAGES VERY BOTTOM */

/* Default is phones */

.popbuttonbotmess {
   position: absolute;  
   top: 77.0%;
    left: 0;
    bottom: 0;
    right: 0;
	padding: 0px;
   z-index: 5110;
  
}


.popbuttonbotmessb {
     width : 80%;
    height: 90%;	 
}

/*Small devices such as tablets*/
@media only screen
and (min-device-width: 768px)
and (orientation: landscape) {

    .popbuttonbotmessb {
        /* override just the attributes you need
          for positioning on a  tablet */
		   width : 40%;
    height: 90%;	 
    }
	
	.popbuttonbotmess {
   position: absolute;  
   top: 77.0%;
    left: 0;
    bottom: 0;
    right: 0;
	padding: 0px;
   z-index: 5110;
  
}
}

/*Larger devices (such as desktops)*/
@media only screen
and (min-device-width: 1024px)
{
	
	.popbuttonbotmess {
   position: absolute;  
    top: 77.0%;
    left: 0;
    bottom: 0;
    right: 0;
	padding: 0px;
   z-index: 5110;
  
}

    .popbuttonbotmessb {
        /* override just the attributes you need
          for positioning on a desktop*/
		  width : 25%;
    height: 90%;	 
    }
}






/*THIS IS FOR titlebackground */

/* Default is phones */

.titlebackground {
   position: absolute;  
    top: .0%;
    left: 0;
    bottom: 0;
    right: 0;
	padding: 0px;
   z-index: -10;
  
}


.titlebackground2 {
    width : 100%;
    height: 100%;
}

/*Small devices such as tablets*/
@media only screen
and (min-device-width: 768px)
and (orientation: landscape) {

    .titlebackground2 {
        /* override just the attributes you need
          for positioning on a  tablet */
		   width : 40%;
    height: 98%;
    }
	
	.titlebackground {
   position: absolute;  
    top: .0%;
    left: 0;
    bottom: 0;
    right: 0;
	padding: 0px;
   z-index: 1;
  
}
}

/*Larger devices (such as desktops)*/
@media only screen
and (min-device-width: 1024px)
{
	
	.titlebackground {
   position: absolute;  
    top: .0%;
    left: 0;
    bottom: 0;
    right: 0;
	padding: 0px;
   z-index: 1;
  
}

    .titlebackground2 {
        /* override just the attributes you need
          for positioning on a desktop*/
		  width : 100%;
    height: 100%;
	
	 
    }

}

/*THIS IS FOR titlebackground */

/* Default is phones */

.titlebackground {
   position: absolute;  
    top: .0%;
    left: 0;
    bottom: 0;
    right: 0;
	padding: 0px;
   z-index: -10;
  
}


.titlebackground2 {

    height: 100%;
}

/*Small devices such as tablets*/
@media only screen
and (min-device-width: 768px)
and (orientation: landscape) {

    .titlebackground2 {
        /* override just the attributes you need
          for positioning on a  tablet */

    height: 98%;
    }
	
	.titlebackground {
   position: absolute;  
    top: .0%;
   
   z-index: 1;
  
}
}

/*Larger devices (such as desktops)*/
@media only screen
and (min-device-width: 1024px)
{
	
	.titlebackground {
   position: absolute;  
    top: .0%;
    
   z-index: 1;
  
}

    .titlebackground2 {
        /* override just the attributes you need
          for positioning on a desktop*/

    height: 100%;
	
	 
    }

}

/*THIS IS FOR titlemethod */

/* Default is phones */

.titlemethod {
   position: absolute;  
    top: .0%;
    left: 0;
    bottom: 0;
    right: 0;
	padding: 0px;
   z-index: 99;
  
}


.titlemethod2 {

    height: 100%;
}

/*Small devices such as tablets*/
@media only screen
and (min-device-width: 768px)
and (orientation: landscape) {

    .titlemethod2 {
        /* override just the attributes you need
          for positioning on a  tablet */

    height: 98%;
    }
	
	.titlemethod {
   position: absolute;  
    top: 1.0%;
   
   z-index: 99;
  
}
}

/*Larger devices (such as desktops)*/
@media only screen
and (min-device-width: 1024px)
{
	
	.titlemethod {
   position: absolute;  
    top: 1.0%;
  
   z-index: 99;
  
}

    .titlemethod2 {
        /* override just the attributes you need
          for positioning on a desktop*/

    height: 98%;
	
	 
    }

}


/*THIS IS FOR titlemethod3 */

/* Default is phones */

.titlemethod3 {
   position: absolute;  
    top: 40.0%;
    left: 0;
    bottom: 0;
    right: 0;
	padding: 0px;
   z-index: 600;
  
}


.titlemethod32 {

    height: 100%;
}

/*Small devices such as tablets*/
@media only screen
and (min-device-width: 768px)
and (orientation: landscape) {

    .titlemethod32 {
        /* override just the attributes you need
          for positioning on a  tablet */

    height: 100%;
    }
	
	.titlemethod3 {
   position: absolute;  
    top: 40.0%;
    
   z-index: 600;
  
}
}

/*Larger devices (such as desktops)*/
@media only screen
and (min-device-width: 1024px)
{
	
	.titlemethod3 {
   position: absolute;  
    top: 40.0%;
   
   z-index: 1000;
	
}

    .titlemethod32 {
        /* override just the attributes you need
          for positioning on a desktop*/

    height: 100%;
	
	 
    }

}





/*THIS IS FOR subtitle */

/* Default is phones */

.subtitle {
   position: absolute;  
 top: 45.0%;
    left: 0;
    bottom: 0;
    right: 0;
	padding: 0px;
   z-index: 700;
  
}


.subtitleb {

    height: 15%;
}

/*Small devices such as tablets*/
@media only screen
and (min-device-width: 768px)
and (orientation: landscape) {

    .subtitleb {
        /* override just the attributes you need
          for positioning on a  tablet */

    height: 10%;
    }
	
	.subtitle {
   position: absolute;  
 top: 45.0%;
  
   z-index: 700;
  
}
}

/*Larger devices (such as desktops)*/
@media only screen
and (min-device-width: 1024px)
{
	
	.subtitle {
   position: absolute;  
    top: 45.0%;
  
   z-index: 700;
  
}

    .subtitleb {
        /* override just the attributes you need
          for positioning on a desktop*/

    height: 10%;
	
	 
    }

}







/*THIS IS FOR titlebackground */

/* Default is phones */

.titlebackground {
   position: absolute;  
    top: .0%;
    left: 0;
    bottom: 0;
    right: 0;
	padding: 0px;
   z-index: -10;
  
}


.titlebackground2 {

    height: 100%;
}

/*Small devices such as tablets*/
@media only screen
and (min-device-width: 768px)
and (orientation: landscape) {

    .titlebackground2 {
        /* override just the attributes you need
          for positioning on a  tablet */

    height: 98%;
    }
	
	.titlebackground {
   position: absolute;  
    top: .0%;
  
   z-index: 1;
  
}
}

/*Larger devices (such as desktops)*/
@media only screen
and (min-device-width: 1024px)
{
	
	.titlebackground {
   position: absolute;  
    top: .0%;
   
   z-index: 1;
  
}

    .titlebackground2 {
        /* override just the attributes you need
          for positioning on a desktop*/
	
    height: 100%;
	
	 
    }

}



.top60 { 
	position:absolute;  
	left: 0;
    bottom: 0;
    right: 0;
	padding: 0px;z-index:55; top:60%;
}



/*THIS IS FOR controls */

/*Small devices such as tablets*/
@media only screen
and (min-device-width: 768px)
and (orientation: landscape) 
{
	
	.controlsx {
   position: absolute;  
    top: 75%;
    left: 95%;
    bottom: 0%;
    right: 0%;
			padding: 0px;
   z-index: -10;
  
}

    .controlsx2 {
        /* override just the attributes you need
          for positioning on a desktop*/
		  width : 45%;
    height: 45%;
	
	 
    }

}

/*Larger devices (such as desktops)*/
@media only screen
and (min-device-width: 1024px)
{
	
	.controlsx {
   position: absolute;  
    top: 75%;
    left: 95%;
    bottom: 0%;
    right: 0%;
			padding: 0px;
   z-index: -10;
  
}

    .controlsx2 {
        /* override just the attributes you need
          for positioning on a desktop*/
		  width : 45%;
    height: 45%;
	
	 
    }

}


/*THIS IS FOR extra */

/* Default is phones */

.extra {
   position: absolute;  
    top:20%;
    left: 0;
    bottom: 0;
    right: 0;
	padding: 0px;
   z-index: 99;
  
}


.extra2 {

    height: 75%;
}

/*Small devices such as tablets*/
@media only screen
and (min-device-width: 768px)
and (orientation: landscape) {

    .extra2 {
        /* override just the attributes you need
          for positioning on a  tablet */

    height: 98%;
    }
	
	.extra {
   position: absolute;  
 top:02%;
   
   z-index: 99;
  
}
}

/*Larger devices (such as desktops)*/
@media only screen
and (min-device-width: 1024px)
{
	
	.extra {
   position: absolute;  
  top:07%;
  
   z-index: 99;
  
}

    .extra2 {
        /* override just the attributes you need
          for positioning on a desktop*/

    height: 98%;
	
	 
    }

}


/*THIS IS FOR extra3 */

/* Default is phones */

.extra3 {
   position: absolute;  
    top:20%;
    left: 0;
    bottom: 0;
    right: 0;
	padding: 0px;
   z-index: 199;
  
}


.extra3b {

    height: 75%;
}

/*Small devices such as tablets*/
@media only screen
and (min-device-width: 768px)
and (orientation: landscape) {

    .extra3b {
        /* override just the attributes you need
          for positioning on a  tablet */

    height: 98%;
    }
	
	.extra3 {
   position: absolute;  
 top:02%;
  
   z-index: 199;
  
}
}

/*Larger devices (such as desktops)*/
@media only screen
and (min-device-width: 1024px)
{
	
	.extra3 {
   position: absolute;  
  top:07%;
   
   z-index: 199;
  
}

    .extra3b {
        /* override just the attributes you need
          for positioning on a desktop*/

    height: 98%;
	
	 
    }

}



/*THIS IS FOR extrabutton TOP */

/* Default is phones */


.extrabutton {
   position: absolute;  
    top: 0%;
    left: 40%;
    bottom: 0;
    right: 0;
	padding: 0px;
   z-index: 1000;
  
}

    .extrabutton2 {
        /* override just the attributes you need
          for positioning on a desktop*/
height: auto;	
    }

/*Small devices such as tablets*/
@media only screen
and (min-device-width: 768px)
and (orientation: landscape) 
{

  .extrabutton {
   position: absolute;  
    top: 0%;
    left: 35%;
    bottom: 0;
    right: 0;
	padding: 0px;
   z-index: 1000;
  
}

    .extrabutton2 {
        /* override just the attributes you need
          for positioning on a desktop*/
  height: auto;		  
    }
}

/*Larger devices (such as desktops)*/
@media only screen
and (min-device-width: 1024px)
{
	
	.extrabutton {
   position: absolute;  
    top: 0%;
    left: 35%;
    bottom: 0;
    right: 0;
	padding: 0px;
   z-index: 1000;
  
}

    .extrabutton2 {
        /* override just the attributes you need
          for positioning on a desktop*/
  
    height: auto;		  
    }
}


/*THIS IS FOR extrabutton3 TOP */

/* Default is phones */

.extrabutton3 {
   position: absolute;  
    top: 0%;
    left: 40%;
    bottom: 0;
    right: 0;
	padding: 0px;
   z-index: -10;
  
}

    .extrabutton3b {
        /* override just the attributes you need
          for positioning on a desktop*/
height: auto;	
    }

/*Small devices such as tablets*/
@media only screen
and (min-device-width: 768px)
and (orientation: landscape) 
{

  .extrabutton3 {
   position: absolute;  
    top: 0%;
    left: 35%;
    bottom: 0;
    right: 0;
	padding: 0px;
   z-index: -10;
  
}

    .extrabutton3b {
        /* override just the attributes you need
          for positioning on a desktop*/
  height: auto;		  
    }
}

/*Larger devices (such as desktops)*/
@media only screen
and (min-device-width: 1024px)
{
	
	.extrabutton3 {
   position: absolute;  
    top: 0%;
    left: 35%;
    bottom: 0;
    right: 0;
	padding: 0px;
   z-index: -10;
  
}

    .extrabutton3b {
        /* override just the attributes you need
          for positioning on a desktop*/
  
    height: auto;		  
    }
}

 


button.impair {
  color: red !important;
}






/*THIS IS FOR links */
/* Default is phones */

.linksx {
   position: absolute;  
    top: 93.5%;
    left: 88%;
    bottom: 0%;
    right: 0%;
			padding: 0px;
   z-index: 5300;


  
}

    .linksx2 {
        /* override just the attributes you need
          for positioning on a desktop*/
		 
  
height: auto; 
	
	 
    }


/*Small devices such as tablets*/
@media only screen
and (min-device-width: 768px)
and (orientation: landscape) 
{
	
	.linksx {
   position: absolute;  
    top: 80%;
    left: 95%;
    bottom: 0%;
    right: 0%;
			padding: 0px;
   z-index: 5300;
	
  
}

    .linksx2 {
        /* override just the attributes you need
          for positioning on a desktop*/
		 
  
   width: 70px;  
height: 70px;  
	
	 
    }

}

/*Larger devices (such as desktops)*/
@media only screen
and (min-device-width: 1024px)
{
	
	.linksx {
   position: absolute;  
    top: 80%;
    left: 95%;
    bottom: 0%;
    right: 0%;
			padding: 0px;
   z-index: 5300;
	
  
}

    .linksx2 {
        /* override just the attributes you need
          for positioning on a desktop*/
		 
  
   width: 70px;  
height: 70px;  
	
	 
    }

}


.clock {
	
  max-width: 100px;
  margin: 0 auto;

}


.progress {
    pointer-events: auto;
}