/*====================     Ticker CSS     ======================*/ 
            
/*=============================================== RIGHT BOX ====================================
|                                                                                                |*/
            
    
/*#right .ticker {
width: 500px;
height: 335px;
overflow: hidden;
border: 1px solid rgba(221, 221, 221, 0);
box-shadow: 0px 0px 5px rgba(221, 221, 221, 0);
background-color:  #0093ff;
text-align: left;
transition: all ease-in-out .2s;
}

#right:hover .ticker {
height: 345px;                
} */
  
#right .ticker_r {
width: 500px;
height: 335px;
overflow: hidden;
border: 1px solid rgba(221, 221, 221, 0);
box-shadow: 0px 0px 5px rgba(221, 221, 221, 0);
background-color:  #0093ff;
text-align: left;
transition: all ease-in-out .2s;
}

#right:hover .ticker_r {
height: 345px; 
background-color: #007ad4;
}
    
#right .ticker_r h3 {
width: 300px;
top: -10px;
position:  relative;
left: 100px;
color: #ffffff;
text-align: center;
transition: all ease-in-out .2s;
font-size: 30px;
}

#right:hover .ticker_r h3 {
width: 300px;
top: 0px;
left: 105px;
}

#right .ticker_r ul {
width:450px; 
height: 290px;
list-style: none;
padding: 0;
top: 0px;
left: 25px;
position:  relative;
font-style: italic;
background-color: #fdfdfd;
transition: all ease-in-out .2s;
}

#right:hover ul {
top: 10px;
left: 30px;
height: 270px;
}            
            
#right ul li {
list-style: none;
height: 65px;
padding:7px;
border-bottom: 1px solid #D6CFB8;
}

#right {
width: 500px;
height: 365px;
background-color: #0093ff;
border: none;
border-bottom: 0px;
position: relative; 
top: -10px;
margin: auto;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.42);
transition: all ease-in-out .2s;
}

#right:hover {
top: -20px;
width: 510px;
height: 375px;
background-color: #007ad4;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.42);
}
            
#right .ticker_r ul li p {
width: 400px;
color: #000;
float: left;
text-align:  left;
left: 10px;
position:  relative;
font-style: normal;
    
}            
            
            
 /*-------------------------------------RIGHT BOX ENDS HERE ---------------------------------------*/           
            
            
#left .ticker {
width: 500px;
height: 335px;
overflow: hidden;
border: 1px solid rgba(221, 221, 221, 0);
box-shadow: 0px 0px 5px rgba(221, 221, 221, 0);

text-align: left;
transition: all ease-in-out .2s;
}

#left:hover .ticker {
height: 345px;
background-color:  #007ad4;
}
            
    
#left .ticker h3 {
width: 300px;
top: -10px;
position:  relative;
left: 100px;
color: #ffffff;
text-align: center;
transition: all ease-in-out .2s;
font-size: 30px;
}

#left:hover .ticker h3 {
width: 300px;
top: 0px;
left: 105px;
}

#left ul {
width:450px; 
height: 290px;
list-style: none;
padding: 0;
top: 0px;
left: 25px;
position:  relative;
font-style: italic;
background-color: #fdfdfd;
transition: all ease-in-out .2s;
}

#left:hover ul {
top: 10px;
left: 30px;
height: 300px;
}            
            
#left ul li {
list-style: none;
height: 65px;
padding:7px;
border-bottom: 1px solid #D6CFB8;
}

#left {
width: 500px;
height: 365px;
background-color: #0093ff;
border: none;
border-bottom: 0px;
position: relative; 
top: 50px;
margin: auto;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.42);
transition: all ease-in-out .2s;
}

#left:hover {
top: 40px;
width: 510px;
height: 375px;
background-color: #007ad4;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.42);
}
            
#left .ticker ul li p {
width: 340px;
color: #000;
float: left;
text-align:  left;
left: 10px;
position:  relative;
font-style: normal;
    
}
/*=======================================    Ticker CSS Ending  =========================================*/

@media only screen and (max-width: 550px) and (min-width: 300px) {


/*#right .ticker {
width: 500px;
height: 335px;
overflow: hidden;
border: 1px solid rgba(221, 221, 221, 0);
box-shadow: 0px 0px 5px rgba(221, 221, 221, 0);
background-color:  #0093ff;
text-align: left;
transition: all ease-in-out .2s;
}

#right:hover .ticker {
height: 345px;                
} */
  
#right .ticker_r {
width: 280px;
height: 335px;
overflow: hidden;
border: 1px solid rgba(221, 221, 221, 0);
box-shadow: 0px 0px 5px rgba(221, 221, 221, 0);
background-color:  #0093ff;
text-align: left;
transition: all ease-in-out .2s;
}

/*	
#right:hover .ticker_r {
height: 345px; 
background-color: #007ad4;
}*/
    
#right .ticker_r h3 {
top: -10px;
left: -5px;
color: #ffffff;
text-align: center;
font-size: 22px;
}

/*	
#right:hover .ticker_r h3 {
width: 300px;
top: 0px;
left: 105px;
}*/

#right .ticker_r ul {
width: 270px; 
height: 290px;
list-style: none;
padding: 0;
top: 0px;
left: 4px;
position:  relative;
font-style: italic;
background-color: #fdfdfd;
transition: all ease-in-out .2s;
}

/*	
#right:hover ul {
top: 10px;
left: 30px;
height: 270px;
}*/            
            
#right ul li {
list-style: none;
height: 65px;
padding:3px;
border-bottom: 1px solid #D6CFB8;
}

#right {
width: 280px;
height: 340px;
background-color: #0093ff;
border: none;
border-bottom: 0px;
position: relative; 
top: -10px;
margin: auto;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.42);
transition: all ease-in-out .2s;
}

/*	
#right:hover {
top: -20px;
width: 510px;
height: 375px;
background-color: #007ad4;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.42);
}*/
            
#right .ticker_r ul li p {
width: 270px;
color: #000;
float: left;
text-align:  left;
left: 2px;
position:  relative;
font-style: normal;
    
}            
            
            
 /*-------------------------------------RIGHT BOX ENDS HERE ---------------------------------------*/           
            
            
#left .ticker {
width: 280px;
height: 335px;
overflow: hidden;
border: 1px solid rgba(221, 221, 221, 0);
box-shadow: 0px 0px 5px rgba(221, 221, 221, 0);

text-align: left;
transition: all ease-in-out .2s;
}

/*	
#left:hover .ticker {
height: 345px;
background-color:  #007ad4;
}*/
            
    
#left .ticker h3 {
top: -10px;
position:  relative;
left: -10px;
color: #ffffff;
text-align: center;
transition: all ease-in-out .2s;
font-size: 22px;
}

/*	
#left:hover .ticker h3 {
width: 300px;
top: 0px;
left: 105px;
}*/

#left ul {
width: 270px; 
height: 290px;
list-style: none;
padding: 0;
top: 0px;
left: 4px;
position:  relative;
font-style: italic;
background-color: #fdfdfd;
transition: all ease-in-out .2s;
}

/*	
#left:hover ul {
top: 10px;
left: 30px;
height: 300px;
}   */         
            
#left ul li {
list-style: none;
height: 65px;
padding:2px;
border-bottom: 1px solid #D6CFB8;
}

#left {
width: 280px;
height: 365px;
background-color: #0093ff;
border: none;
border-bottom: 0px;
position: relative; 
top: 50px;
margin: auto;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.42);
transition: all ease-in-out .2s;
}

/*	
#left:hover {
top: 40px;
width: 510px;
height: 375px;
background-color: #007ad4;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.42);
}*/
            
#left .ticker ul li p {
width: 250px;
color: #000;
float: left;
text-align:  left;
left: 10px;
position:  relative;
font-style: normal;
    
}		
	
}