body {background:url("/images/skins/dark/bodyBgRpt.jpg") repeat scroll 0 0 #212121!important}

#body-wrapper {width:100%;overflow:hidden;position:relative}

.banner-image {position:absolute; right:0; top:1px;z-index:9;width:300px}

.top-bar {text-align:center;margin:20px 0;padding:0px; background:#000;position:relative; z-index:2 }
.top-bar:before 
{
        background: none repeat scroll 0 0 #121212;
    border-bottom: 1px dashed #333;
    border-top: 1px dashed #333;
    bottom: 0;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5);
    content: "";
    left: -100%;
    position: absolute;
    top: 0;
    width: 300%;
    z-index: -1;
    
    }
.top-bar h1 {font-size:60px; font-family:Cookie; color:#fff;margin:0 0 2px 0}
.top-bar h2 {color:#fff; font-size:20px;font-style:italic;margin-bottom:10px}

.feature {margin:40px 0;display:table;width:100%}
.feature > div {width:50%; padding:0;margin:0;display:table-cell}
.feature .image-left {text-align:right; background:#000;position:relative;z-index:2}
.feature .image-right {background:#015174; text-align:left;position:relative;z-index:2}
.feature .image-left:before {position:absolute;content:""; height:100%;width:200%;left:-100%;top:0; background:#000;z-index:-1}
.feature .image-right:after {position:absolute;content:""; height:100%;width:200%;left:0;top:0; background:#015174;z-index:-1}
.feature img {max-width:100%}
.responsive-menu {text-align:center;padding:10px 0;margin:10px 0;border-top:1px solid #3a3a3a;background:#1a1a1a; border-radius:3px; border-bottom:1px solid #000}
.responsive-menu li {}
.responsive-menu li a {font-size:18px;padding:5px 0;display:inline-block}
.responsive-menu li a:hover {text-decoration:none}

#show-matrix {margin:40px 0 0 0;}
#show-matrix img {padding:1px; background:#585858;width:100%}
#show-matrix > ul > li {text-align:center;}
#show-matrix > ul > li {margin:0 0 20px 0}
#show-matrix a {max-width:425px;display:block;margin:0 auto;padding:10px;border:1px solid rgba(255,255,255,0.2);box-shadow:0 5px 10px rgba(0,0,0,1);background:rgba(20,20,20,1); transition:all 0.3s ease;border-radius:2px}
#show-matrix h3 {font-size:24px;padding:5px 0; color:#fff}
#show-matrix h5 {font-size:15px;color:#ff0084}
#show-matrix p {padding:5px 0;font-size:14px; color:#c8c7cd!important}
#show-matrix .btn {display:block; background:#BF0B62; border-radius:2px 2px 2px 2px; border-bottom:2px solid #AD0053; font-size:20px; padding:10px 0;margin-top:10px;transition:all 1s ease; color:#fff}
#show-matrix a:hover {text-decoration:none; border-color:rgba(255,255,255,0.3);box-shadow:0 5px 15px rgba(0,0,0,1);background:rgba(10,10,10,1)}
#show-matrix a:hover h3 {color:#fff}
#show-matrix a:hover .btn {background:#ff0084; color:#fff}
#show-matrix .show-details {display:block; overflow: auto;}
#show-matrix .show-details p strong {color:#fff!important;font-weight:400!important; font-size:16px;}
#show-matrix a,#show-matrix a:visited {}

.ended_btn {background:#0e6671 !important;}
.ended_date {color:red !important;}
.highlighted_text {color:  #ff0084; font-size:25px;}
.small-banner-image {display:none; margin:0 auto;}
.show-details {height: 280px;}
#banner_img {
    padding-top: 20px;
    padding-bottom: 20px;
}

.banner_bg {
    background-color: #33d9c3;
}

.footer-social-icons {
    padding-top: 10px;
}
.footer-social-icons > a > img {
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 0;
} 

.footer-email-address {

    color: black;
}

@media all and (max-width:1200px) 
{
.banner-image {width:260px} 
#show-matrix {height:auto;}
.show-details {height: 350px;}
} 

@media all and (max-width:992px) 
{
.top-bar h1 {
    line-height: 50px;
    margin: 0 0 10px;
}  


    .top-bar {margin-bottom:0}
    .small-banner-image {display:block;width:389px}
    .banner-image {display:none}

    .show-details {height: 230px;}
  
}

@media all and (max-width:768px) 
{
    
    .feature img {max-width:80%}
    .feature > div {display:block;float:left}
     .show-details {height: auto;}
    
}

@media all and (max-width:650px) 
{
      
    #show-matrix > div {margin:0 0 40px 0}
    #show-matrix .show-details {height:auto;} 
}

@media all and (max-width:480px) {

   .top-bar h1 {font-size:50px;line-height:42px}
}