/* Versus Tabelle */

.sprite-16 { display: inline-block; width: 16px; height: 16px; margin-right: 5px; }

#versus-table { margin: 10px auto 5px; background-color: #fff; border: 1px solid #52A4EA; }
#versus-table, #versus-table .sticky { width: 1180px; }

#versus-table.sticky .providerrow { 
    position: fixed; 
    width: 1178px; 
    top: 40px; 
    z-index: 50; 
    border-top: 0; 
    margin: 0 auto; 
    box-shadow: 0 3px 8px #ccc; 
}

#versus-table .row { display: table-row; clear: both; background-color: #fff; border-bottom: 1px solid #52A4EA; }

#versus-table .cell { display: table-cell; float: left; vertical-align: top; }
#versus-table .cell.c1 { border: none; }
#versus-table .cell .title { display: none; font-size: 14px; font-weight: bold; text-align: left; }

#versus-table .bg, #versus-table .row.heading { background-color: #52A4EA; color: #fff; font-size: 16px; font-weight: bold; }
#versus-table .row.heading.country .cell { padding: 5px 10px; }
#versus-table .inner { padding: 5px 10px; }
#versus-table .bg .inner { padding: 0; }
#versus-table .logo, #versus-table .post-image { display: block; margin: 0 auto; text-align: center; overflow: hidden; }
#versus-table .logo img, #versus-table .post-image img { width: auto; height: auto; max-height: 100%; }
#versus-table .post-image-container { display: block; height: 70px; overflow: hidden; }
#versus-table .more-link { display: block; margin-top: 15px; }
#versus-table .link-review { display: block; margin: 5px auto; text-align: left; }
#versus-table .cell.top .link-review { text-align: center; } 
#versus-table.sticky .providerrow .btn-primary { width: 90%; margin: 5px auto; }
#versus-table .buttons.country .btn-primary { padding: 14px 5px; }

#versus-table .tbody .row.middle .cell { vertical-align: middle; }
#versus-table .row.country .inner { padding: 3px 10px; font-size: 14px; line-height: 14px; }
#versus-table .row.country .cell { text-align: center; }
#versus-table .row.country .cell.c1 { text-align: left; font-weight: normal; }
#versus-table .row.country .cell.supported-yes { background-color: #f2fff4; }
#versus-table .row.country .cell.supported-no { background-color: #fff2f3; }

/* 2er Vergleich */
#versus-table.fiftyfifty .cell { width: 39%; }
#versus-table.fiftyfifty .cell.c1 { width: 39%; }

/* 3er Vergleich */
#versus-table.third .cell { width: 26%; }

#versus-table .cell.c1 { width: 22% !important; font-weight: bold; }
#versus-table .cell.c1 a { text-decoration: none; font-weight: normal; }
#versus-table .cell.c1 .country-name { position: relative; top: -2px; }

#versus-table .cell.price, #versus-table .cell.supported-count { padding: 5px 0; font-weight: bold; font-size: 24px; text-align: center; }

#versus-table .cell.colspan-3, #versus-table .cell.colspan-4 { width: 100% !important; float: none; text-align: center; }


@media all and (max-width: 1240px) {     
    #versus-table, #versus-table.sticky .providerrow { width: 100%; }
    #versus-table.sticky .providerrow { left: 0; }
}
@media all and (max-width: 900px) {    
    #versus-table .row.country { height: 20px; overflow: hidden; }
    #versus-table .row.country.buttons { height: auto; }
    #versus-table .row.country .inner { font-size: 12px; }
}
@media all and (max-width: 800px) {
    #versus-table .bg, #versus-table .row.heading { font-size: 14px; }    
    #versus-table .logo img { max-width: 100%; }
}
@media all and (max-width: 768px) {
    #versus-table.sticky .providerrow { top: 35px; }
    #versus-table .btn-primary { padding: 10px 0; font-size: 90%; white-space: nowrap; }    
}
@media all and (max-width: 700px) {
    #versus-table .btn-primary { white-space: unset; }
}
@media all and (max-width: 680px) {
    #versus-table .bg, #versus-table .row.heading { font-weight: normal; font-size: 12px; }    
    .versusbox { width: 32%; margin: 0 1% 0 0; }
}
@media all and (max-width: 515px){
    #versus-table .cell.c1, #versus-table .row.country { display: none; }
    #versus-table.third .cell { width: 33%; }
    #versus-table.fiftyfifty .cell { width: 50%; }
    #versus-table .cell .title { display: block; }
    #versus-table .cell.price, #versus-table .cell.supported-count { text-align: left; }    
}
@media all and (max-width: 415px) {  
    #versus-table .logo { height: 40px; }
}



/* Versus Auswahl */
#versus { margin: 0 auto 10px; padding: 10px; background-color: #fff; border-bottom: 3px solid #ABD0EF; }
#versus form { display: none; padding: 10px 0; }
#versus.open form { display: block; }
#versus .open-box:hover { cursor: pointer; }
#versus .compare {
    display: block;
    margin: 0;
    padding: 0 !important;
    font-size: 17.5px !important;
    line-height: 22px !important;
    color: #226399;    
    border: none !important;
}
#versus .compare .arrow { display: inline-block; margin: 0 8px 0 0; width: 15px; height: 15px; background: transparent url('../images/icons/icon-open-closed.png') no-repeat top left; }
#versus.open .compare .arrow { background-position: bottom left; }

#versus .versusbox { display: inline-block; width: 23%; margin: 0; vertical-align: bottom; }
#versus .versusbox.submit { width: 27%; margin-left: 1%; text-align: right; }
#versus .versusbox.submit input { display: block; width: 100%; margin: 0 0 1px; font-size: 100%; line-height: 115%; }
#versus .versusbox select { width: 100%; margin: 0; }
#versus .versusbox select:hover { border: 1px solid #0b3d67; }
#versus .versusbox select option:hover { cursor: pointer; color: #e66900; }

@media all and (max-width: 1200px){
    #versus .versusbox.submit { width: 25%; margin-left: 1%; }    
}
@media all and (max-width: 960px){ 
    #versus .versusbox { width: 33%; }    
    #versus .versusbox.submit { width: 100%; display: block; float: none; margin: 10px auto; }
}
@media all and (max-width: 740px){ 
    #versus .versusbox { width: 32.9%; }
}
@media all and (max-width: 580px){ 
    #versus .versusbox { width: 32.7%; }
}
@media all and (max-width: 420px){ 
    #versus .versusbox { width: 100%; display: block; margin: 0 auto 5px; }
}
@media all and (max-width: 320px){ 
    #versus input.vergleichen { font-weight: normal; }
}