body, html {
    width: 100%;
    overflow-x: hidden;
}

body {
	background-color:#281c39; /*#f9f5ff*/
	color: #e3e3e3; /*#101010;*/
	padding: 0px;
	margin: 0;	 
	font-family: 'Arimo','arial', sans-serif ;
}

body.home {
	background-color: #1c0e33; 
	color:#FDFDFD; 
}
.main-content {  margin-bottom: 50px;  }
.main-content-pad { padding:40px }
.bg-light {
    background-color: #f9f5ff; 
    color: #101010;
}
.bg-round { border-radius: 15px; }
hr {
  border-top: 1px solid #CCC !important;
}

/* fore removing visible outline in FF*/
/*
:focus {outline:none;}
:-moz-focus-inner {border:0;}
a::-moz-focus-inner, input::-moz-focus-inner { 
  border: 0; 
}
a {
   outline: 0;
}

*/
a, a:visited, a:focus, a:active, a:hover{
    outline:0 none !important; text-decoration: none
}
a, a:focus, a:active { color:#d449ff }
a:hover, a:visited:hover { color: #BC2EE8 !important  }
a:visited { color: #bf2feb !important}
#navbar a:visited { color: #d449ff !important}
#navbar a:visited:hover { color: #BC2EE8  !important}

li { margin-bottom: 8px }
img { border: 0px }
h1 { color: #a717d4; font-size: 60px; line-height:1.15; font-weight:bold; margin: 20px 10px; }
h2 { color: #a717d4; font-size: 45px; line-height:1.15; font-weight:bold; margin:0; padding: 20px 10px 10px 10px; }
h3, h4, h5 { color: #a717d4; }
p { font-size: 16px;  line-height: 20px; margin-bottom: 20px; }
 

a.modal-close { font-size: 30px;  line-height: 40px; font-weight: normal; color:  #9f27d4;  margin-top: 0px; font-family: arial; position: absolute; top:0px; right: 10px;}
a.modal-close:hover { font-size:40px }
#modal-fade {/*display: block;*/ display: none; background-color: rgba(0, 0, 0, 0.7);position: absolute; top: 0px;left: 0px;height: 100%;width: 100%; z-index: 200;}
#modal-pop {/*display: block;*/ display: none;  position:absolute; /* transform: translate(-50%, -50%);*/
    top: 100px;  left: 50%; z-index:300;margin-top:20px; padding:20px 40px; border-radius:20px; background-color:#fff; width:80%; max-width:500px; margin-bottom:50px; margin:auto; color:#222222;padding:15px 40px}
.form-instructions { padding:10px 0px }
input { margin-left: 0px; padding: 2px 5px;border:1px solid #9f27d4; border-radius:5px}
input.btn-submit { border-radius:5px; background-color: #9f27d4;  color: #fff; }

.home h3 { color: #ffffff; }
.home h2 { color: #ffffff; }
.home h3 { color: #ffffff; }
.home h4, h5 { color:#ffffff } 
.pane p { font-weight: 500; }
.pane h2 { padding-top:35px }

.container { max-width: 1100px;margin:auto; text-align:center  }

#navbar { background-color: #0e082c; padding:5px}
#navbar .left-wrapper { display:inline-block;text-align: left; width: 100%; padding: 8px 20px;
	box-sizing: border-box; }
#navbar .right-wrapper{ display:inline-block; position:absolute; right:0;font-weight:bold } 
#navbar div.menu-item { display:inline-block;padding-right:20px;padding-top:20px }

#home-pane-1 { background: rgb(0,0,0);
    background: linear-gradient(90deg, #301c63 0%, #170a29 47%, #161649 100%);
	margin: auto; text-align: center; padding-top: 30px;} 
#home-pane-1 h1 { margin-bottom:0px; margin-top:20px }
#home-pane-1 p { color: #ffffff; font-size: 18px; line-height:25px }
#home-pane-1 .left { display: inline-block;/* width: 50%; */ max-width:500px; vertical-align: top; padding: 80px 30px; margin: auto; text-align: center; }
#home-pane-1 .right { display: inline-block;/* width: 40%; */vertical-align: bottom; padding-left:20px; text-align: left; }
#home-pane-1 .left > div { margin: auto; text-align: center; }
.heading_grad { 
	background-color: #a717d4;
	background-image: url('/img/heading/bg_header_grad2.png');
    background-repeat: repeat;
    background-clip: text;
    background-position: left;
    text-fill-color: #a717d4;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.heading_grad3 { 
	background-color: #fff;
	background-image: url('/img/heading/bg_header_grad3.png');
    background-repeat: repeat;
    background-clip: text;
    background-position: left;
    text-fill-color: #fff;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
/*.download-button-box > div { display:inline-block; padding: 3px }*/
.download-button-box .app-qr { display: inline-block; vertical-align: top; padding:3px }
.download-button-box .app-buttons { display: inline-block; padding:3px 5px }
.download-button-box .app-buttons .app-button { display: block; padding:7px} 
.download-button-box .app-buttons .app-button img { width: 160px }
	
#home-press-pane { border-top: 2px solid #28164f}
.review-box { display:inline-block; width:33%; max-width:250px; height:155px; vertical-align:top; border-radius: 15px; padding:15px 10px; margin:10px 10px 15px 10px; color: #dddddd; font-size:14px; font-weight:bold; background-color:#25143c; position:relative }
.review-box .review-info {  position:absolute; top:90px; left:45px; margin:auto; text-align:center}
.review-box span { font-weight: normal} 
#slides-1, #slides-2, .slides { position: relative; } 
div.review { position: absolute;  top: 15px;  /*left: 10px;   right: 10px;   bottom: 10px; */} 

#home-pane-2 { margin: auto; text-align: center; background: rgb(145,84,240);
background: linear-gradient(180deg,  #6717cd 0%, #2871fa 100%); /*linear-gradient(176deg, rgba(145,84,240,1) 0%, rgba(85,106,220,1) 100%);*/
}  
#home-pane-2 .channels {margin:auto; text-align:center;max-width: 900px;}
#home-pane-video { margin: auto; text-align: center; background: rgb(145,84,240);
background: linear-gradient(180deg, #2871fa 0%, #6717cd 100%);  }  
#home-pane-3 {  margin: auto; text-align: center; background: rgb(107,101,251);
background: linear-gradient(0deg, rgb(24 22 77) 0%, rgba(74,80,225,1) 100%);padding-bottom: 50px; }
#home-pane-4 {  margin: auto; text-align: center; background: rgb(113,72,244);
background: linear-gradient(0deg, #38237d 0%, rgba(114,73,243,1) 100%); padding-bottom: 50px;}
#home-pane-5 {  margin: auto; text-align: center; background: #5569dd;
background: linear-gradient(0deg, #1d2863 0%, #8447e1 100%);}
#home-pane-6 {  margin: auto; text-align: center; min-height:500px; 
	background: rgb(113,72,244);
	background-image:  linear-gradient(0deg, rgb(26 14 65) 0%, rgb(78 34 185) 100%);
    /*url('img/bg-guy-on-couch-tablet.png');*/ /*no-repeat bottom center*/ 
	/*background: rgb(113,72,244);*/
}
#home-pane-6 #illustration { min-height:550px;background: url('/img/bg-guy-on-couch-tablet.png') no-repeat bottom center }
.channel { display: inline-block }
.channel img { padding: 0px; width: 200px; } 



#footer { background-color:#000;padding:15px; position:relative; color: #a450d6; font-size: 15px; line-height: 24px }
#footer .button { display: inline-block }
#footer .copyright { font-size:12px; margin-top: 30px; color:#5e5e5e }
#footer .terms a { text-decoration: none }
#footer .terms a:hover { color: #e4e4e4 }
#footer .addendum  { font-size:12px; margin-bottom:20px; color:#5e5e5e }
#footer .left-wrapper { display: inline-block;  text-align: left; margin: auto; width: 100%; margin-top: 20px;}
#footer .right-wrapper { display:inline-block; position: absolute; right: 0;  margin-top: 20px; }
#footer .terms { margin-top: 18px; }
	
div.faq-wrapper div.faq-question { cursor: pointer; }
div.faq-wrapper div.faq-answer { display: none; }	 

.news-items { margin:20px 0px; border-top:1px solid #d449ff } 
.news-items .news-item { margin:10px 0px }
.news-items .press-date { font-size: 20px }
.news-items .source { font-weight:bold }
.news-items .title {}

.footnote2-light { font-size:12px;color:#b2b1bf;padding: 10px 0px 15px }
.footnote2-dark { font-size:12px;color:#5d5b7f;padding: 10px 0px 15px }


/*below bg-light bg-round*/
.terms-additional { margin: 0px 25px; text-align:center }
/*in/across-app*/
.btn-accept { margin:auto; text-align:center;padding:20px }
.button-ynfapp { border-radius: 20px; width: 150px;  background-color: #ffffff; color: #000000;  border-color: transparent; border: 0px; font-size: 15px; line-height: 30px; }

@media screen and (max-width:800px) {
	.container { padding: 0px 10px; }
	#home-pane-1 .container { padding: 0px !important }
	#home-pane-1 {
		background: rgb(0,0,0);
		background: linear-gradient(0deg, rgba(66,53,80,1) 0%, rgba(36,22,47,1) 47%, rgba(0,0,0,1) 100%);
	}
	#home-pane-1 .left { display: block; padding: 50px 10px; margin: auto; text-align: center; }
	#home-pane-1 .right { display: block; padding-left:0px; padding-right:0px; margin: auto; text-align: center; }
	#home-pane-1 p { margin:20px 0px }
	#home-pane-6 #illustration{  background-position: bottom right !important; min-height: 550px;}
	.pane img.gfx { width:95% }
	/*.download-button-box > div { display: inline-block !important; width: 48%; }
	.download-button-box > div img { width: 90% }*/
	.review-box { max-width:200px }
	.review-box .review-info { left: 18px }
}

@media screen and (max-width:500px) {
	/* #navbar .left-wrapper { padding: 8px 0px; }
	#navbar div.menu-item { display: block;  padding-top: 0px;  text-align: left; }
	#navbar .right-wrapper { top: 10px }
	.menu-item::before {  content: "\00b7 "; color: #a717d4;  font-size: 2em; vertical-align: middle; } 
	*/
	
	#home-pane-1 h1, h1 { font-size: 40px; margin-top: 10px; }
	#home-pane-1 .text-wrapper img { width:100% }
	#home-pane-1 .download-button-box > div img {  width:auto; } 
	/*.download-button-box > div { display: block !important; width:auto; padding:10px 5px 5px 5px } */
	.review-box { display:block; width:100%; margin: auto;  text-align: center;    margin-top: 20px;   margin-bottom: 10px; max-width: 80%;  height: auto; min-height: 130px;}
	.review-box .review-info { position: relative;top: auto; left: auto; margin:auto; text-align:center; margin-top:10px; }
	
	h2 { font-size: 35px; }
	.channel { width: 48% }
	.channel img { width: 160px; }
	#home-pane-6 #illustration { background-position: bottom right !important; min-height: 650px;}
	#footer .left-wrapper, #footer .right-wrapper { display: block;  text-align: center; } 
	#footer .right-wrapper { padding-top:20px; position: relative;  right: unset;  } 
	#footer .button { display: block; padding:5px }
}

@media screen and (max-width:320px) {
	#home-pane-1 h1, h2 { font-size: 30px; margin-top: 10px; }
	#home-pane-1 p { color: #ffffff; font-size: 16px; line-height:25px }
	#footer .button { display: block; padding:5px  }
	.channel img { width: 130px; }
}


/************* NAV ***********************/
/** style mobile menu **/
.mm-menu.mm-opened {
    z-index: 1000;
}
#my-menu ul li { font-size: 1.3em; font-weight:bold }
#my-menu ul li a { color: #d449ff }
#my-menu ul li a:hover { color: #BC2EE8 } 
/*.mm-panel a {
    color: #FFF !important;
    line-height: 30px;
    font-size: 16px;
}*/
/*
.mm-panel {
    background-color: #1C1C1C !important;
}*/
/** end style mobile menu **/

#my-menu {  display: run-in }
div#menu {
    display: none;
}   
div#menu-mobile { 
    background-image: url(https://www.playon.tv/sites/all/themes/playon/images/menu-background.png);
    background-repeat: repeat-x;
    background-size: contain;
    height: 55px;
    width: 100%;
    z-index: 900;
    /*position: absolute;*/
    left: 0;
}
div#menu-mobile a#logo {
  text-align: center;
  display: block;
}

div#menu-mobile a#logo img { 
  height:auto;
  max-width: 100%;
} 

#hamburger {
    box-sizing: border-box;
    display: block;
    width: 70px;
    height: 45px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
}
#hamburger:before,
#hamburger:after,
#hamburger span {
  background: #fff;
  content: '';
  display: block;
  width: 24px;
  height: 3px;
  position: absolute;
  left: 20px;
}

#hamburger:before {
  top: 13px;
}

#hamburger span {
  top: 20px;
}

#hamburger:after {
  top: 27px;
}

/* Hamburger animation */
#hamburger:before,
#hamburger:after,
#hamburger span {

  -webkit-transition: none 0.5s ease 0.5s;
  transition: none 0.5s ease 0.5s;

  -webkit-transition-property: transform, top, bottom, left, opacity;
  transition-property: transform, top, bottom, left, opacity;
}

html.mm-opening #hamburger:before,
html.mm-opening #hamburger:after {
  top: 20px;
}

html.mm-opening #hamburger span {
  left: -50px;
  opacity: 0;
}

html.mm-opening #hamburger:before {
  transform: rotate( 45deg );
}

html.mm-opening #hamburger:after {
  transform: rotate( -45deg );
}

@media screen and (min-width:805px) { 
	#my-menu { display:none; }
	#hamburger {
	  display: none;
	}

	div#menu {
	  display: block;
	  /*text-transform: uppercase;*/
	}

	div#menu-mobile {
	  display: none;
	}
}

/**********END NAV ****************/