/* STRUCTURE */

/* Page loading */
#page-loading {
    display: none;
}
/* End Page loading */

/* Main */
main {
    min-height: 100%;
}

@media screen and (min-width: 769px) {
    main {
        padding-top: 95px;
    }
}
/* End Main */

/* Top */
#top {
    background-color: #FFF;
    border-bottom: 1px solid rgba(0,0,0,0.25);
    -moz-box-shadow: 0 0 3px rgba(0,0,0,0.25);
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.25);
    box-shadow: 0 0 3px rgba(0,0,0,0.25);
    padding: 10px 0;
    position: relative;
    z-index: 550;
}

    #top .logo {
        display: inline-block;
    }
    
@media screen and (min-width: 768px) {
    #top {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
    }
}
/* End Top */

#blocks {}


    #blocks .block {
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,dbdbdb+100 */
        background: #ffffff; /* Old browsers */
        background: -moz-radial-gradient(center, ellipse cover,  #ffffff 0%, #dbdbdb 100%); /* FF3.6-15 */
        background: -webkit-radial-gradient(center, ellipse cover,  #ffffff 0%,#dbdbdb 100%); /* Chrome10-25,Safari5.1-6 */
        background: radial-gradient(ellipse at center,  #ffffff 0%,#dbdbdb 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dbdbdb',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
        justify-content: center;
        text-align: center;
        position: relative;
    }
    
        #blocks .block a {
            text-decoration: none;
        }
        
        #blocks .block::before,
        #blocks .block::after {
            background-color: #FFF;
            content: '';
            position: absolute;
        }
        
        #blocks .block.top_left::before {
            top: 15px;
            right: 0;
            bottom: 0;
            width: 1px;
        }
            
            #blocks .block.top_left::after {
                bottom: 0;
                left: 15px;
                right: 0;
                height: 1px;
            }
        
        #blocks .block.top_right::before {
            top: 15px;
            left: 0;
            bottom: 0;
            width: 1px;
        }
        
            #blocks .block.top_right::after {
                bottom: 0;
                left: 0;
                right: 15px;
                height: 1px;
            }
        
        #blocks .block.bottom_left::before {
            top: 0;
            right: 0;
            bottom: 15px;
            width: 1px;
        }
        
            #blocks .block.bottom_left::after {
                top: 0;
                left: 15px;
                right: 0;
                height: 1px;
            }
        
        #blocks .block.bottom_right::before {
            top: 0;
            left: 0;
            bottom: 15px;
            width: 1px;
        }
        
            #blocks .block.bottom_right::after {
                top: 0;
                left: 0;
                right: 15px;
                height: 1px;
            }
       
        
.content-container {
    padding: 50px 0;
}
    
    .content-container.no-padding {
        padding: 0;
    }
    
    .content-container.no-padding-top {
        padding-top: 0;
    }
    
    .content-container.no-padding-bottom {
        padding-bottom: 0;
    }
    
    .content-container.padding-top-medium {
        padding-top: 25px;
    }
    
    .content-container.padding-bottom-medium {
        padding-bottom: 25px;
    }
    
    .content-container.padding-top-small {
        padding-top: 15px;
    }
    
    .content-container.padding-bottom-small {
        padding-bottom: 15px;
    }
    
    .content-container.grey {
        background-color: #ebebeb;
    }
    
    .content-container.white {
        background-color: #FFF;
    }
    
    .content-container.borders {
        border-top: 1px solid #b5b5b6;
        border-bottom: 1px solid #b5b5b6;
    }
    

/* MATCH */


#teams {}

    #teams .team-setup {
        border-top: 1px solid #b5b5b6;
        padding-top: 15px;
        padding-bottom: 15px;
    }
    
        #teams .team-setup.setup_team--one {
            border: 0;
        }
        
        
        #teams .team-setup .select-teammember {
            border-top: 1px solid #b5b5b6;
            padding: 10px 0;
        }
        
            #teams .team-setup .select-teammember:first-of-type {
                border: 0;
                padding-top: 0;
            }
            
            #teams .team-setup .select-teammember:last-of-type {
                padding-bottom: 0;
            }
            
            
#play-match-container,
#end-match-container {
    display: none;
}

.match-board-positioned {
    margin-bottom: -25px;
}
    
    .match-board {
        background-color: #FFF;
        -moz-box-shadow: 0 0 5px rgba(0,0,0,0.45);
        -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.45);
        box-shadow: 0 0 5px rgba(0,0,0,0.45);
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        display: inline-block;
        padding: 10px 15px;
        text-align: center;
    }
    
        .total-games {
            font-size: 24px;
            padding: 10px 25px;
        }
    
        .play-match_scores {
            padding: 5px 15px;
        }
        
        .match-board .label_team {
            display: inline-block;
            font-size: 18px;
            vertical-align: middle;
        }
        
        .match-board .scores {
            color: #333;
            display: inline-block;
            font-family: 'exo_2bold_condensed', verdana, sans-serif;
            font-size: 40px;
            margin: 0 15px;
            vertical-align: middle;
        }
        
.match-timer-container {
    margin-top: 10px;
}

    .match-timer-container .play-match_timer {
        font-size: 24px;
        display: inline-block;
        margin-right: 5px;
        vertical-align: middle;
    }
    
    .match-timer-container .timer-button {
        color: #d70056;
        display: inline-block;
        margin-left: 5px;
    }
    
        .match-timer-container .timer-button.timer-resume {
            display: none;
        }
        
        
.play-match--teams {}

    .play-match--teams .play-match--team {
        border-bottom: 1px solid #b5b5b6;
        margin-bottom: 30px;
        padding: 0 30px;
    }
    
        .play-match--teams .play-match--team:last-of-type {
            margin: 0;
        }
    
        .play-match--teams .play-match--team .play-match--player {
            border-bottom: 1px solid #b5b5b6;
            margin-bottom: 10px;    
        }
            
            .play-match--teams .play-match--team .play-match--player:last-of-type {
                border: 0;
                margin: 0;
            }
            
#overlay-goal {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 900;
}

    #overlay-goal .overlay--background {
        background-color: #ebebeb;
        background-position: center center;
        background-repeat: no-repeat;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
/*         opacity: 0.95; */
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 900;
    }

    #overlay-goal .container,
    #overlay-goal .container .row,
    #overlay-goal .container div[class^='col-'] {
        height: 100%;
    }
    
        #overlay-goal .container {
            position: relative;
            z-index: 910;
        }
    
        #overlay-goal .overlay_goal_inner {
            text-align: center;
            width: 100%;
        }
        
#end-match-container {}

    .end-match--team-trophy {
        margin: 30px 0;
    }
    
/* END: MATCH */
    
/* MATCHES ( OVERVIEW ) */   
#matches-container {}

    #matches-container .matches-container--match {
        border-bottom: 1px solid #b5b5b6; 
        margin-bottom: 15px;
        padding: 15px 30px 5px 30px;
    }
    
        #matches-container .matches-container--match:last-of-type {
            padding-top: 0;    
        }
        
        #matches-container .matches-container--match:last-of-type {
            border: 0;
            padding-bottom: 0;
            margin-bottom: 0;
        }
        
        #matches-container .matches-container--match h3 {
            margin: 0;
        }
        
        #matches-container .matches-container--match .match-team {
            border-bottom: 1px solid #b5b5b6; 
            font-size: 13px;
            margin: 0;
            padding: 10px 0;
        }
        
            #matches-container .matches-container--match .match-team:last-of-type {
                border: 0;
            }
            
            #matches-container .matches-container--match .match-team div[class^='col-'] {
                padding: 0;
            }
        
            #matches-container .matches-container--match .match-team .match-team--score {
                font-family: 'exo_2bold_condensed', verdana, sans-serif;
                font-size: 16px;
            }
/* END: MATCHES ( OVERVIEW ) */   

/* Participants */

#participants {
    margin-top: 100px;
}

    #participants .participant {
        margin: 10px 0;
        position: relative;
    }
    
        #participants .participant::before,
        #participants .participant::after {
            background-image: url('../images/icons/handvat.svg');
            background-position: left center;
            background-repeat: no-repeat;
            background-size: 100%;
            content: none;
            height: 50px;
            margin-top: -45.5px;
            position: absolute;
            top: 50%;
            width: 50px;
            z-index: 1;
        }
        
        #participants .participant::before {
            left: -70px;
        }
        
        #participants .participant::after {
            right: -70px;
            transform: rotate(180deg);
        }
        
        @media screen and ( max-width: 767px ) {
            
            #participants .participant:first-of-type::before,
            #participants .participant:nth-of-type(2)::before {
                content: '';
                transform: rotate(90deg);
                left: 50%;
                margin-left: -26px;
                top: -35px;
            }
            
        }
        
        @media screen and ( min-width: 576px ) {
            
            #participants .participant:first-of-type::before {
                content: '';
            }
        }
        
        @media screen and ( min-width: 768px ) {
            
            #participants .participant:nth-of-type(4n+0)::before,
            #participants .participant:nth-of-type(3n+0)::after {
                content: '';
            }
        }
        
        @media screen and ( min-width: 1200px ) {
            
            #participants .participant:nth-of-type(5n+0)::before,
            #participants .participant:nth-of-type(4n+0)::after {
                content: '';
            }
        }
    
        #participants .participant a {
            display: block;
            text-align: center;
            text-decoration: none;
        }
        
            #participants .participant a::before,
            #participants .participant a::after {
                background-color: #b5b5b6;
                content: '';
                position: absolute;
                z-index: 0;
            }
            
            #participants .participant a::before {
                bottom: -50px;
                left: 50%;
                margin-left: -1px;
                top: -50px;
                width: 1px;
            }
            
            
            #participants .participant a::after {
                height: 1px;
                left: -50px;
                margin-top: -21px;
                right: -50px;
                top: 50%;
            }
            
            @media screen and ( max-width: 767px ){
                #participants .participant:first-of-type a::after,
                #participants .participant:nth-of-type(3n+0) a::after {
                    left: 15px;
                }
                
                #participants .participant:nth-of-type(2n+0) a::after {
                    right: 15px;
                }
            }

        #participants .participant h3 {
            background-color: #ebebeb;
            font-family: 'exo_2regular_condensed';
            font-size: 16px;
            padding: 5px;
            position: relative;
            z-index: 5;
        }
    
    .participant_image-wrapper,
    .participant_image-wrapper img {
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%; 
    }
    
    .participant_image-wrapper {
        background-color: #fff;
        padding-bottom: 100%;
        position: relative;
        z-index: 5;
    }
    
        .participant_image-wrapper img {
            bottom: 0;
            left: 0;
            padding: 4px;
            position: absolute;
            right: 0;
            top: 0;
        }
        
            @media screen and ( min-width: 991px ){
                .participant_image-wrapper img {
                    padding: 10px;
                }
            }
/* END Participants */
    
/* Single Participant */

#participant-detail {}
    
    #participant-detail h1 {
        overflow: hidden;
        text-align: left;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    #statistics .statistics--win-lose-ratio {
        margin-bottom: 30px;
    }
    
        #statistics .statistics--win-lose-ratio-bar {
            background-color: #ebebeb;/*#d70056*/
            height: 10px;
            margin: 10px 0;
            width: 100%;
        }
        
            #statistics .statistics--win-lose-ratio-bar.activated {
                background-color: #d70056;
            }
        
            #statistics .statistics--win-lose-ratio-bar--win {
                background-color: #00ad68;
                height: 10px;
                width: 0;
            }
        
    .overview {
        border: 1px solid #d2d2d2;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px; 
        padding: 0 15px;
        text-align: center;
    }
    
        
        .overview .tr {
            border-bottom: 1px solid #d2d2d2;
        }
        
            .overview .tr .td {
                border-right: 1px solid #d2d2d2;
                padding: 15px 10px;
            }
            
            .overview .tr:last-of-type,
            .overview .tr .td:last-of-type {
                border: 0;
            }
/* END Single Participant */

/* SINGLE MATCH - TIMELINE */

#match-timeline .container {
    border-top: 1px solid #b5b5b6;
}

    #match-timeline .match-timeline_goal {
        border-bottom: 1px solid #b5b5b6;
        position: relative;
        padding-top: 25px;
        padding-bottom: 10px;
    }
    
        #match-timeline .match-timeline_goal .match-timeline_goal_score {
            color: #d2d2d2;
            font-family: 'exo_2bold_condensed', verdana, sans-serif;
            font-size: 68px;
            position: absolute;
            bottom: -7px;
        }
    
        #match-timeline .match-timeline_goal::after {
            background-color: #00ad68;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            content: '';
            display: block;
            height: 20px;
            position: absolute;
            bottom: -10px;
            width: 20px;
            z-index: 5;
        }
    
        #match-timeline .match-timeline_goal.match-timeline_goal--a {
            border-right: 1px solid #b5b5b6;
            text-align: right;
        }
        
            #match-timeline .match-timeline_goal.match-timeline_goal--a .match-timeline_goal_score {
                left: 10px;
            }
        
            #match-timeline .match-timeline_goal.match-timeline_goal--a::after {
                right: -10px;
            }
        
        #match-timeline .match-timeline_goal.match-timeline_goal--b {
            border-left: 1px solid #b5b5b6;
            left: -1px;
        }
        
            #match-timeline .match-timeline_goal.match-timeline_goal--b .match-timeline_goal_score {
                right: 10px;
            }
        
            #match-timeline .match-timeline_goal.match-timeline_goal--b::after {
                background-color: #dc3270;
                left: -10px;
            }
    
/* Load icon */
.loading {
    background-color: rgba(0,0,0,0.1);
    bottom: 0;
    display: none;
    left: 0;
    padding: 30px 0;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    z-index: 600;
}

    .loading img {
        margin: 250px 0 0 0;
        width: 85px;
    }

    @-webkit-keyframes rotating /* Safari and Chrome */ {
        from {
            -ms-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -webkit-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        to {
            -ms-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -webkit-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }
    
    @keyframes rotating {
        from {
            -ms-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -webkit-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        to {
            -ms-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -webkit-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }
    
    .loading img {
        -webkit-animation: rotating 2s linear infinite;
        -moz-animation: rotating 2s linear infinite;
        -ms-animation: rotating 2s linear infinite;
        -o-animation: rotating 2s linear infinite;
        animation: rotating 2s linear infinite;
        }
/* End Load icon */
    
footer {
    background-color: #FFF;
    padding: 10px 0;
    position: absolute;
    bottom: 0;
    text-align: center;
    width: 100%;

}


/* COMMENTS */
            
    ol.commentlist { padding: 0; }
        
        ol.commentlist li {
            list-style-type: none;
            margin-bottom: 20px;
            position: relative;
        }
        
            ol.commentlist li .comment-author {
               padding: 10px;
               border-bottom: 1px solid #e8e8e8; 
            }
                
                ol.commentlist li .comment-author img {
                    vertical-align: middle;  
                    display: inline-block !important;  
                }
                
            ol.commentlist li .comment-meta {
                position: absolute;
                top: 8px;
                right: 1px;
                padding: 10px;
            }
                
                @media screen and (max-width: 768px) {
                    ol.commentlist li .comment-meta {
                        position: relative;
                    }
                }
            
            ol.commentlist li .reply, ol.commentlist li p {
                padding: 10px;
            }
            
                ol.commentlist li p {
                    margin: 0;
                    padding-bottom: 0;
                }
            
            ol.commentlist ul.children {
                padding: 0 30px;
                
            }
            
                ol.commentlist ul.children li {
                    margin-bottom: 10px;
                }
                
                    ol.commentlist ul.children li .reply {
                        display: none;
                    }
                    
                    ol.commentlist ul.children li p {
                        padding: 10px;
                    }
/* END OF COMMENTS */