#banner {
	background-image: url('/offers/img/bg-playon-cloud-group.png');
	border-bottom: 5px solid #00c0ee;
} 
<? if ($isPromo) { ?>
#banner-content { bottom:12%; }
<? } else { ?>
#banner-content { bottom:24%; }
<? } ?>

#banner-content h1 {  font-family: open sans regular, Arial, Helvetica, sans-serif; }
#banner-content  {  font-family: open sans light, Arial, Helvetica, sans-serif; }
#banner-content strong { color: #15afff }
h2 { max-width:100%; font-size:1.2em }
.button-cta1 { 
    background-color: #15afff;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    color: #FFF;
    padding: 12px 30px;
    text-align: center;
    text-decoration: none;
    font-size: 20px;
    margin-top: 25px;
    background-image: none !important;
    font-weight: bold;
    border: 0px !important;
    width: 250px;
}
.button-cta1:hover { background-color:#2db6fd}
.button-cta2 { 
    background-color: #ff3a6d;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    color: #FFF;
    padding: 6px 6px;
    text-align: center;
    text-decoration: none;
    font-size: 14px;
    margin-top: 10px;
    background-image: none !important;
    font-weight: bold;
    border: 0px !important;
    width: 150px;
}
.button-cta2:hover { background-color:#f95a65 }
#select-credits-box { margin-top:20px;font-size:1.8em }
#promo-code-container { margin:20px 0px }
#subtotal-container { font-size:1.4em; margin-top: 15px }
#credit-price-2 { font-size:13px } 
#footer .container { width:100% }
@media (min-width: 1500px){
	#footer .container {
		float: none;
		width: 100%;
		margin-right: auto; 
		margin-left: auto;
		max-width: 1170px;
		margin-top: 50px;
	}
}
 
#promo-code {
	line-height: 30px; 
	padding: 5px 20px; 
	width:230px;   
	background: transparent none 95%; 
	color: #00eea8;
	font-size: 20px; 
	font-weight: normal; 
	border-radius:20px; 
	-webkit-border-radiu:20px; 
	-moz-border-radius:20px;
	text-align: center;
}
   
.promo-code-success{ 
	background: transparent url(/offers/img/icn-check-code-yes.png) no-repeat 95% !important;  
} 
.promo-code-fail{ 
	background: transparent url(/offers/img/icn-check-code-no.png) no-repeat 95% !important;  
}
**/   

/*mobile landscape and portrait modes*/
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3),
only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2),  
only screen and (max-width: 350px) {
<? if ($isPromo) { ?>
#banner-content { bottom:12%; }
<? } else { ?>
#banner-content { bottom:20%; }
<? } ?>  
}
@media only screen and (max-width: 350px) { 
	h1 { font-size:23px}
}
 
 
#pane-0 {position: relative;  background-image: url('/sites/default/files/bg-mauve.jpg'); background-repeat:repeat-x; background-size: contain;} 
#pane-0 h1, #pane-0 h2 { text-align:left}
#pane-0 img { display: inline }
a.free-download-button { margin:0 }
@media(max-width: 767px) { #pane-0 { overflow: hidden; min-height:655px; height: 700px; }}
@media(max-width: 767px) { #connan { position: relative; min-height: 650px; width: 100%; margin-left: -15px;  }}
@media(min-width: 767px) { 
	.container {  width: 50%;margin-right:30px; }
	#pane-0 { min-height: 650px } 
}


@media(min-width: 1500px) { 
	#pane-0 .container {  float:none; width: 40%;margin-right: 60px;max-width: 950px;margin-left: 700px;margin-top: 50px; } 
} 

select::-ms-expand {
    display: none;
}
#select-credits-box select { 
    /* you should keep these firsts rules in place to maintain cross-browser behaviour */
    -webkit-appearance: none;
	-moz-appearance: none;
	-o-appearance: none;
	-ms-appearance: none;
	appearance: none; 
    outline: none;     
    background-color: transparent;
	border-radius: 0;
	color: #fff; 
	overflow: hidden;
	border: 1px solid #f1f1f1; 
 	text-indent: 1px;
	text-overflow: ''; 
}

  #select-credits {  
	overflow: hidden;
	-webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;  
	padding: 5px 24px 5px 2px;  
	width:70px; 
	background:transparent url("/offers/cloud/img/select_down.png") no-repeat right center !important;
	background-repeat:no-repeat;
	font-size:22px;
	line-height: 30px;
	display:inline;
}  

#select-credits  option { background-color:#fff}

#pane-0 { 
background-color: #ffffff; 
}

#pane-0 a { color: #00c0ee; }
#pane-0 a:hover { color: #a9e3f0; }

#pane-0 .free-download-button { background-color: #00c0ee; }
#pane-0 .free-download-button:hover { background-color: #a9e3f0; }

#pane-0 strong { color: #15afff; }

#pane-0 .free-download-button { color: #FFF; }

#pane-0 h1 { text-align: center; }
#pane-0 h2 { text-align: center; }
#pane-0 .pane-buttons { text-align: center; }


@media(min-width: 767px) { 

#pane-0 h1 { text-align: left; }
#pane-0 h2 { text-align: left; }
#pane-0 .pane-buttons { text-align: left; }

#pane-0 img { float: right; }
#pane-0 .container { width: 40%; float: right; }
#pane-0 .pane-buttons { text-align:center; width: 240px; }
#pane-0 .free-download-button { text-align:center; margin-left:0px; margin-right:auto; }

}

#pane-0 {position: relative;  background: #ffffff url('/sites/default/files/bg-cloud-pane.png') repeat-x center bottom; background-size: contain; min-height:655px} 
@media(max-width: 767px) { #pane-0 { overflow: hidden; min-height:655px; max-height: 800px; }}

@media(min-width: 767px) { #pane-0 .container {  width: 45%;margin-right:30px; }}

@media(min-width: 1500px) { #pane-0 .container {  float:none; width: 45%;margin-right: 60px;max-width: 950px;margin-left: 700px;margin-top: 50px; }}

#pane-0 img {float:none }
/*@media screen and (max-width: 950px) and (min-width:767px) { #pane-0 #connan {  display:block; background-position: right 0;}}*/

@media(max-width: 767px) { #pane-0 #connan { position: relative; min-height: 450px; width: 100%; margin-left: -15px; background-position: left 0; }}

/** additions **/
@media(max-width: 550px) { #pane-0 h2 {font-size: 14px; line-height: 20px; width: 100%; }} 
#pane-0 #connan-image { display: none;   }

@media (max-width: 550px) { 
	#content a.free-download-button {  width: 200px; margin: auto;}
	#pane-0 #connan-image { display:block; text-align:left; margin-left:-15px }
	#pane-0 #connan { display: none }
	#pane-0 h3 { text-align:center}

} 

/* iPad Portrait  plus desktop size */

@media screen and (max-width: 970px) and (min-width:767px),
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1)  
  
{
	#connan { position: relative !important; min-height: 650px; width: 100% !important; margin-left:-15px; display:block; background-position: left 0 !important;}
	#pane-0 .container { display:block; width:100%; float: none; margin:auto}
	#pane-0 h2 { margin-bottom: 0px; width:100% }
}
@media screen and (max-width: 1060px) and (min-width:971px)  { #connan { width:520px !important} } 
@media screen and (max-width: 970px) and (min-width:767px) { #connan { width:570px !important} }