/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

 .alla-klassiker-diplom .round-corners-left {
	-webkit-border-top-left-radius::  5px;
	-webkit-border-bottom-left-radius:  5px;
	-moz-border-radius-topleft: : 5px;
	-moz-border-radius-bottomleft: : 5px;
	border-top-left-radius:  5px;
	border-bottom-left-radius:  5px;
}

.alla-klassiker-diplom .round-corners-right {
	-webkit-border-top-right-radius::  5px;
	-webkit-border-bottom-right-radius:  5px;
	-moz-border-radius-topright: : 5px;
	-moz-border-radius-bottomright: : 5px;
	border-top-right-radius:  5px;
	border-bottom-right-radius:  5px;
}

.alla-klassiker-diplom .race {
	font-size: 20px;
}

.alla-klassiker-diplom .race, .race-date, .race-image, .race-time {
	text-align: center;
}

.alla-klassiker-diplom .race-image img {
	max-width: 100%;
}

.alla-klassiker-diplom .passed-time-bar {
	border-top: solid #800080 1px;
	border-bottom: solid #800080 1px;
}

.alla-klassiker-diplom .passed-time-bar-start {
    border-left: solid #800080 1px;
}

.alla-klassiker-diplom .passed-time-bar-end {
    border-right: solid #800080 1px;
}


.alla-klassiker-diplom .ski-bar-light {
	background-image: url('../images/snow_light.png');
}

.alla-klassiker-diplom .ski-bar {
	background-image: url('../images/snow.png');
}

.alla-klassiker-diplom .run-bar {

    background: #7EFA4D; /* old browsers */
    background: -moz-linear-gradient(top, #7EFA4D 0%, #63D437 50%, #42A819 100%); /* firefox */

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7EFA4D), color-stop(50%,#63D437), color-stop(100%,#42A819)); /* webkit */

    background: -webkit-linear-gradient(top, #7EFA4D 0%, #63D437 50%, #42A819 100%);

    filter:progid:DXImageTransform.Microsoft.Gradient( startColorstr='#7EFA4D', endColorstr='#42A819',GradientType=0 ); /* ie */
    -ms-filter: "progid:DXImageTransform.Microsoft.Gradient( startColorstr='#7EFA4D', endColorstr='#42A819',GradientType=0 )";
	zoom: 1;
}

.alla-klassiker-diplom .run-bar-light {

    background: #7EFA4D; /* old browsers */
    background: -moz-linear-gradient(top, #fff 0%, #C1FFAA 50%, #8CFF5F 100%); /* firefox */

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7EFA4D), color-stop(50%,#C1FFAA), color-stop(100%,#8CFF5F)); /* webkit */

    background: -webkit-linear-gradient(top, #fff 0%, #C1FFAA 50%, #8CFF5F 100%);

    filter:progid:DXImageTransform.Microsoft.Gradient( startColorstr='#fff', endColorstr='#8CFF5F',GradientType=0 ); /* ie */
    -ms-filter: "progid:DXImageTransform.Microsoft.Gradient( startColorstr='#fff', endColorstr='#8CFF5F',GradientType=0 )";
	zoom: 1;
}

.alla-klassiker-diplom .cycle-bar {
    background: #e9ede8; /* old browsers */
    background: -moz-linear-gradient(top, #e9ede8 0%, #bcbcbc 50%, #777777 100%); /* firefox */

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e9ede8), color-stop(50%,#bcbcbc), color-stop(100%,#777777)); /* webkit */

    background: -webkit-linear-gradient(top, #e9ede8 0%, #bcbcbc 50%, #777777 100%);

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e9ede8', endColorstr='#777777',GradientType=0 ); /* ie */
}

.alla-klassiker-diplom .cycle-bar-light {
    background: #f2f2f2; /* old browsers */
    background: -moz-linear-gradient(top, #fff 0%, #f2f2f2 50%, #e5e5e5 100%); /* firefox */

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(50%,#f2f2f2), color-stop(100%,#e5e5e5)); /* webkit */

    background: -webkit-linear-gradient(top, #fff 0%, #f2f2f2 50%, #e5e5e5 100%);

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* ie */
    zoom: 1;
}

.alla-klassiker-diplom .swim-bar {
    background: #40AAED; /* old browsers */

    background: -moz-linear-gradient(top, #C4DEEF 0%, #40AAED 50%, #C4DEEF 100%); /* firefox */

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e9ede8), color-stop(50%,#297dda), color-stop(100%,#297dda)); /* webkit */

	background: -webkit-linear-gradient(top, #e9ede8 0%, #bcbcbc 50%, #297dda 100%);

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#C4DEEF', endColorstr='#C4DEEF',GradientType=0 ); /* ie */
    zoom: 1;
}

.alla-klassiker-diplom .swim-bar-light {
    background: #d5e7f7; /* old browsers */

    background: -moz-linear-gradient(top, #fff 0%, #d5e7f7 50%, #d5e7f7 100%); /* firefox */

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(50%,#d5e7f7), color-stop(100%,#d5e5f7)); /* webkit */

	background: -webkit-linear-gradient(top, #fff 0%, #d5e7f7 50%, #d5e7f7 100%);

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d5e7f7',GradientType=0 ); /* ie */
    zoom: 1;
}

.alla-klassiker-diplom .ski-bar-light .run-bar {
	text-align: left;
}

.alla-klassiker-diplom .alla-klassiker-diplom .svensk-klassiker {
	display: none;
}

.alla-klassiker-diplom .svensk-klassiker > div,
.alla-klassiker-diplom .svensk-klassiker > h1 {
	display: inline-block;
	width: 19%;
}

@supports (display: grid) {

	.alla-klassiker-diplom {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
	}

	.alla-klassiker-diplom .svensk-klassiker {
		grid-column-start: 1;
		grid-column-end: 2;

		grid-row-start: 1;
		grid-row-end: 2;
	}

	.alla-klassiker-diplom .svensk-klassiker + .svensk-klassiker {
		display: none;
	}

	.alla-klassiker-diplom .svensk-klassiker:first-child {
		display: grid;
	}

	/* reset old style */
	.alla-klassiker-diplom .svensk-klassiker > div,
	.alla-klassiker-diplom .svensk-klassiker > h1 {
		width: auto;
		display: block;
	}

	.alla-klassiker-diplom .svensk-klassiker h1 {
		margin: 0;
	}

	.alla-klassiker-diplom .svensk-klassiker {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
		justify-self: center;
		align-self: center;
		width: 100%;
	}

	.alla-klassiker-diplom .svensk-klassiker.fadein {
		-webkit-animation: fadein 1s ease-in; /* Safari, Chrome and Opera > 12.1 */
           -moz-animation: fadein 1s ease-in; /* Firefox < 16 */
            -ms-animation: fadein 1s ease-in; /* Internet Explorer */
             -o-animation: fadein 1s ease-in; /* Opera < 12.1 */
                animation: fadein 1s ease-in;
        opacity: 1;
	}

	@keyframes fadein {
	    from { opacity: 0; }
	    to   { opacity: 1; }
	}

	/* Firefox < 16 */
	@-moz-keyframes fadein {
	    from { opacity: 0; }
	    to   { opacity: 1; }
	}

	/* Safari, Chrome and Opera > 12.1 */
	@-webkit-keyframes fadein {
	    from { opacity: 0; }
	    to   { opacity: 1; }
	}

	/* Internet Explorer */
	@-ms-keyframes fadein {
	    from { opacity: 0; }
	    to   { opacity: 1; }
	}

	/* Opera < 12.1 */
	@-o-keyframes fadein {
	    from { opacity: 0; }
	    to   { opacity: 1; }
	}

	.alla-klassiker-diplom .svensk-klassiker.fadeout {
		-webkit-animation: fadeout 1s ease-out; /* Safari, Chrome and Opera > 12.1 */
           -moz-animation: fadeout 1s ease-out; /* Firefox < 16 */
            -ms-animation: fadeout 1s ease-out; /* Internet Explorer */
             -o-animation: fadeout 1s ease-out; /* Opera < 12.1 */
                animation: fadeout 1s ease-out;

                opacity: 0;
	}

	@keyframes fadeout {
	    from { opacity: 1; }
	    to   { opacity: 0; }
	}

	/* Firefox < 16 */
	@-moz-keyframes fadeout {
	    from { opacity: 1; }
	    to   { opacity: 0; }
	}

	/* Safari, Chrome and Opera > 12.1 */
	@-webkit-keyframes fadeout {
	    from { opacity: 1; }
	    to   { opacity: 0; }
	}

	/* Internet Explorer */
	@-ms-keyframes fadeout {
	    from { opacity: 1; }
	    to   { opacity: 0; }
	}

	/* Opera < 12.1 */
	@-o-keyframes fadeout {
	    from { opacity: 1; }
	    to   { opacity: 0; }
	}

	.alla-klassiker-diplom .svensk-klassiker h1 {
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.alla-klassiker-diplom .race-image {
		align-self: center;
	}

	@media only screen and (max-width: 768px) {
		.alla-klassiker-diplom .svensk-klassiker {
			display: grid;

			grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;

			align-self: center;
		}

		.alla-klassiker-diplom .race {
			align-self: flex-end;
		}

		.alla-klassiker-diplom .race-date {
			align-self: flex-start;
		}

		/*totalt*/
		.alla-klassiker-diplom .race-image.race-total {
			grid-column-start: 8;
			grid-column-end: 9;

			grid-row-start: 1;
			grid-row-end: 3;
		}

		.alla-klassiker-diplom .race.race-total {
			grid-column-start: 8;
			grid-column-end: 9;

			grid-row-start: 3;
			grid-row-end: 4;
			align-self: flex-start;
			margin: 0;
			line-height: 1;
		}
		.alla-klassiker-diplom .race-date.race-total {
			grid-column-start: 8;
			grid-column-end: 9;

			grid-row-start: 3;
			grid-row-end: 4;

		}
		.alla-klassiker-diplom .race-time.race-total {
			grid-column-start: 8;
			grid-column-end: 9;

			grid-row-start: 3;
			grid-row-end: 4;

			align-self: flex-end;
		}

		/*race 1*/
		.alla-klassiker-diplom .race-image.race-1 {
			grid-column-start: 1;
			grid-column-end: 2;

			grid-row-start: 1;
			grid-row-end: 3;
		}

		.alla-klassiker-diplom .race.race-1 {
			grid-column-start: 2;
			grid-column-end: 4;

			grid-row-start: 1;
			grid-row-end: 2;
		}
		.alla-klassiker-diplom .race-date.race-1 {
			grid-column-start: 2;
			grid-column-end: 4;

			grid-row-start: 2;
			grid-row-end: 3;
		}
		.alla-klassiker-diplom .race-time.race-1 {
			grid-column-start: 1;
			grid-column-end: 3;

			grid-row-start: 5;
			grid-row-end: 6;
		}

		/*race 2*/
		.alla-klassiker-diplom .race-image.race-2 {
			grid-column-start: 6;
			grid-column-end: 7;

			grid-row-start: 1;
			grid-row-end: 3;
		}

		.alla-klassiker-diplom .race.race-2 {
			grid-column-start: 4;
			grid-column-end: 6;

			grid-row-start: 1;
			grid-row-end: 2;
		}
		.alla-klassiker-diplom .race-date.race-2 {
			grid-column-start: 4;
			grid-column-end: 6;

			grid-row-start: 2;
			grid-row-end: 3;
		}
		.alla-klassiker-diplom .race-time.race-2 {
			grid-column-start: 3;
			grid-column-end: 5;

			grid-row-start: 5;
			grid-row-end: 6;
		}

		/*race 3*/
		.alla-klassiker-diplom .race-image.race-3 {
			grid-column-start: 1;
			grid-column-end: 2;

			grid-row-start: 3;
			grid-row-end: 5;
		}

		.alla-klassiker-diplom .race.race-3 {
			grid-column-start: 2;
			grid-column-end: 4;

			grid-row-start: 3;
			grid-row-end: 4;
		}
		.alla-klassiker-diplom .race-date.race-3 {
			grid-column-start: 2;
			grid-column-end: 4;

			grid-row-start: 4;
			grid-row-end: 5;
		}
		.alla-klassiker-diplom .race-time.race-3 {
			grid-column-start: 5;
			grid-column-end: 7;

			grid-row-start: 5;
			grid-row-end: 6;
		}

		/*race 4*/
		.alla-klassiker-diplom .race-image.race-4 {
			grid-column-start: 6;
			grid-column-end: 7;

			grid-row-start: 3;
			grid-row-end: 5;
		}

		.alla-klassiker-diplom .race.race-4 {
			grid-column-start: 4;
			grid-column-end: 6;

			grid-row-start: 3;
			grid-row-end: 4;
		}
		.alla-klassiker-diplom .race-date.race-4 {
			grid-column-start: 4;
			grid-column-end: 6;

			grid-row-start: 4;
			grid-row-end: 5;
		}
		.alla-klassiker-diplom .race-time.race-4 {
			grid-column-start: 7;
			grid-column-end: 9;

			grid-row-start: 5;
			grid-row-end: 6;
		}
	}


}