#webinarList {
    margin-bottom:50px;
}
#webinarList div.webinarItem {
    background-color:#e4e4e4;
    overflow: hidden;
}
#webinarList div.webinarItem .info-box {
    height:185px;
}
#webinarList div.webinarItem .countdown-box {
    padding: 0;
    border: 1px solid #c7c7c7;
}
#webinarList div.webinarItem .info-box {
    background-position: top right;
    background-color:#575a78;
    background-repeat:no-repeat;
    background-size:length;
    background-size:auto 100%;
}
#webinarList div.webinarItem .info-box.activeWebinar {
    background-color:#35374c;
}

#webinarList div.webinarItem .info-box .infobox-content ul {
    padding:0;
    margin:0;
}
#webinarList div.webinarItem .info-box .infobox-content ul li {
    margin:20px 5px 0;
}

#webinarList div.webinarItem .info-box.activeWebinar .infobox-content {
    height:185px;
    width:100%;
    padding-left: 15px;
    margin-left: -15px;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#35374c+30,35374c+100&1+1,1+64,0.9+74,0.58+84,0+100 */
    background: -moz-linear-gradient(left, rgba(53,55,76,1) 1%, rgba(53,55,76,1) 30%, rgba(53,55,76,1) 64%, rgba(53,55,76,0.9) 74%, rgba(53,55,76,0.58) 84%, rgba(53,55,76,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(53,55,76,1) 1%,rgba(53,55,76,1) 30%,rgba(53,55,76,1) 64%,rgba(53,55,76,0.9) 74%,rgba(53,55,76,0.58) 84%,rgba(53,55,76,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(53,55,76,1) 1%,rgba(53,55,76,1) 30%,rgba(53,55,76,1) 64%,rgba(53,55,76,0.9) 74%,rgba(53,55,76,0.58) 84%,rgba(53,55,76,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#35374c', endColorstr='#0035374c',GradientType=1 ); /* IE6-9 */
}

#webinarList div.webinarItem .info-box .infobox-content {
    height:185px;
    width:100%;
    padding-left: 15px;
    margin-left: -15px;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#575a78+0,575a78+61&1+71,0+100 */
    background: -moz-linear-gradient(left, rgba(87,90,120,1) 0%, rgba(87,90,120,1) 61%, rgba(87,90,120,1) 71%, rgba(87,90,120,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(87,90,120,1) 0%,rgba(87,90,120,1) 61%,rgba(87,90,120,1) 71%,rgba(87,90,120,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(87,90,120,1) 0%,rgba(87,90,120,1) 61%,rgba(87,90,120,1) 71%,rgba(87,90,120,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#575a78', endColorstr='#00575a78',GradientType=1 ); /* IE6-9 */
}


#webinarList div.webinarItem .info-box .infobox-content .content-row {
    width:80%;
    color:#fff;
    padding:5px 0 0 5px;
}
#webinarList div.webinarItem .info-box .infobox-content .content-row h3{
    color: #f7faff;
    font: 700 21px / 24px Lato;
}
#webinarList div.webinarItem .info-box .infobox-content .content-row a {
    color: #f7faff;
}
#webinarList div.webinarItem .info-box .infobox-content .content-row .lead{
    min-height: 50px; 
    height:auto !important; 
    height: 50px; 
    color: #f7faff;
    font: 400 14px / 24px Lato;
    margin-bottom: 0;
}
#webinarList div.webinarItem .date-box {
    border: 1px solid #c7c7c7;
    min-height: 185px;
    height:auto !important;
    height: 185px;
}

#webinarList div.webinarItem .date-box .date-container{
    background-color: #efefef;
    height:85px;
}
#webinarList div.webinarItem .date-box .icon-box{
    color: #000;
    font: 400 14px / 17px Lato;
    height: 83px;
    float: left;
    padding-top: 15px;
    margin: 12px 0 0 35px;
}
#webinarList div.webinarItem .date-box .icon-box strong {
    font: 900 16px / 17px Lato;
    display: block;
}
#webinarList div.webinarItem .date-box .icon-box.calendar-icon {
    background:url(../img/webin-calendar2.png) no-repeat top left;
    padding-left: 75px;
}

#webinarList button.btn-signUpWebin {
    display: block;
    width: 80%;
    margin: 25px auto 0;
    height: 45px;
    color: #ffffff;
    font: 700 17px / 17px Lato;
    padding-left: 10px;
    padding-right: 10px;
}
#webinarList button.btn-singUpWebin.btn-wiper-green {
    margin-top:30px;
}
#webinarList button.btn-signUpWebin.btn-wiper-grey {
    margin-top:10px;
}
#webinarList div.signupDate {
    color: #4b4b4b;
    font: 700 17px / 17px Lato;
    margin-top: -10px;
    margin-bottom: 10px;
    clear:left;
    text-align:center;
}
@media only screen and (max-width: 991px) {
    #webinarList div.webinarItem .date-box .icon-box {float:none; margin: 12px auto 0 auto; width: 260px;}
    #webinarList button.btn-signUpWebin {margin: 15px auto;}
    #webinarList button.btn-signUpWebin.btn-wiper-grey {margin-top:5px;}
    #webinarList div.signupDate {margin-top: 5px;font-size: 15px}
    #webinarList div.webinarItem .date-box {min-height: 160px;height: auto !important;height: 185px;}
}
@media only screen and (max-width: 768px) {
    #webinarList div.webinarItem .info-box .infobox-content .content-row h3 {font: 700 16px / 18px Lato;margin-top: 10px;}
    #webinarList div.webinarItem .info-box .infobox-content .content-row .lead { font: 400 14px / 16px Lato;}
    #webinarList div.webinarItem .date-box .icon-box {font: 400 12px / 15px Lato;}
    #webinarList div.webinarItem .info-box .infobox-content ul li.wiper-badge-black {display:none}
}
@media only screen and (max-width: 385px) {
    #webinarList div.webinarItem .info-box .infobox-content .content-row h3 {font: 700 14px / 16px Lato;}
    #webinarList div.webinarItem .info-box .infobox-content .content-row .lead { font: 400 12px / 14px Lato;}
}