/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
 
@media only screen and (min-width: 700px) { 
    .flex-row {
        display:flex;
    }
}
 
.flex-row {
    align-items: center;
    justify-content: center;
}
 
.type-game_reports {
    width:100%;
}

.report-content .button {
    font-family: 'Rubik', sans-serif;
    color:#fff;
}

.report-content .button:hover {
    color:#fff;
}

@media only screen and (min-width: 700px) {    
    .report-row {
        margin:0 10%;
    }
    .report-content{
        /*width:100%;*/
        padding:50px 0;
    }
    
    .game-details {
        width:50%;
    }
}

.report-content{
    /*width:100%;*/
    padding:50px 0;
}
 
.game-details .report-game-title {
    font-size:1.1em;
}
 
 
.game-details{
    text-align: center;
    padding:10px;

}

.scores {
    width:100%;
}

.overall-label {
    font-size:1.5em;
}

.overall-score {
    font-weight: bold;
    font-size:3em;
    margin-bottom:15px;
}

.sealed-single-column{
    width:100%;
}

.cib-3-column {
    text-align: center;
    border-top:solid 1px #ccc;
    padding-top:15px;
}

.subscore {
    font-size:2em;
}

.solo-title{
    width:100%;
    text-align: center;
}

@media only screen and (min-width: 700px) {    
    .subscores {
        display:flex;
    
    }
    
    .cib-3-column {
        width:33%;
        border:none;
    }


    .report-photos{
        display: flex;
        
    }
    .report-photo{
        max-width: 300px;
    }
    
    .report-notes{
        max-width:60%;
    }
}

.report-photo{
    text-align: center;
}

.report-photo img{
   max-width: 90%;
    margin:5px;
}

.report-notes{
    margin:5px;
}