@import url("banners.css");

body {
	background-color: #f4f4f4;
}
a, .a {
	color: #f1563f;
	font-weight: bold;
	text-decoration: none;
}

li.gold::marker {
	content: '🥇';
}
li.silver::marker {
	content: '🥈';
}
li.bronze::marker {
	content: '🥉';
}

/** pysyy väri kun päiviteteen bs4 => bs5 **/
.bg-info {
    background-color: #17a2b8!important;
}

/** Päävalikko **/
nav.navbar {
	background-color: #fff;
	margin-bottom: 1rem;
	box-shadow: 0px 1px 3px 0px rgba(186,186,186,1);
}
nav.navbar a.nav-link, footer, footer .btn-light {
	color: #1d3744;
}
nav.navbar > ul.nav > li.nav-item > a.nav-link {
	font-weight: bold;
}
.navbar > .show > a:focus{
	background: transparent;
	outline: 0;
}
.dropdown-menu .show > .dropdown-toggle::after{
	transform: rotate(-90deg);
}
.dropdown-menu {
	font-size: 90%;
}

/**
 * Burgermenu animaatio 
 **/
.navbar-toggler {
    outline: 0;
    border: 0;
}  
.toggler-icon-animated {
    display: inline-block;
    width: 30px;
    height: 20px;
    position: relative;
    margin: 0px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
}

.toggler-icon-animated span {
    background: rgba(0,0,0,.55);
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    border-radius: 9px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}

.toggler-icon-animated span:nth-child(1) {
    top: 0px;
}

.toggler-icon-animated span:nth-child(2),
.toggler-icon-animated span:nth-child(3) {
    top: 10px;
}

.toggler-icon-animated span:nth-child(4) {
    top: 20px;
}

.navbar-toggler[aria-expanded="true"] > .toggler-icon-animated span:nth-child(1) {
    top: 11px;
    width: 0%;
    left: 50%;
}

.navbar-toggler[aria-expanded="true"] > .toggler-icon-animated span:nth-child(2) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

.navbar-toggler[aria-expanded="true"] > .toggler-icon-animated span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.navbar-toggler[aria-expanded="true"] > .toggler-icon-animated span:nth-child(4) {
    top: 11px;
    width: 0%;
    left: 50%;
}
/* ---------------- */

.nav-tabs, 
.nav-tabs .nav-link,  
.nav-tabs .nav-link:hover, 
.nav-tabs .nav-link:focus,
.nav-tabs .nav-link.active
.nav-tabs .nav-item.show .nav-link {
	border-color: #fff;
}
.nav-tabs .nav-item.show .nav-link, 
.nav-tabs .nav-link.active {
	border-color: #fff;
}
.nav-tabs .dropdown-menu {
	margin-top: calc(0.5rem - 1px);
	border-color: #efefef;
	border-top-color: #fff;
	box-shadow: 0px 3px 8px -3px rgba(186,186,186,1);
}
.nav-tabs .dropdown-menu .dropdown-menu {
	border-radius: .25rem;
	border-top-color: #efefef;
	box-shadow: 1px 1px 3px 0px rgba(186,186,186,1);
}

/** headeri **/
header.jumbotron {
	background: url(img/tausta-halikko2024.jpg) no-repeat center center;
	background-size: cover;
	margin-bottom: 0;
    margin-top: -0.5rem;
}
.test header.jumbotron {
	background: url(img/tausta-halikko2024.jpg) no-repeat top center;
    background-size: cover;
}
header.jumbotron h1, header.jumbotron .lead {
	color: #fff;
	text-shadow: 0px 0px 10px #000;
}	
header.jumbotron .lead span {
    font-weight: 400;
}
header.jumbotron .btn-info {
    color: #fff;
	background-color: #025195;
	border-color: #000;
	box-shadow: 0 0 6px #000;
}
header.jumbotron .btn-info:hover {
    background-color: rgb(122 17 38);
    border-color: rgb(102 14 32);
	box-shadow: 0 0 5px #eee;
}

/** crumbsit **/
.breadcrumb {
    padding: 0.75rem 1rem;
    background-color: #e9ecef;
    border-radius: 0.25rem;
}

/** Pääsisältö / uutiset **/
main h2, main h5 a {
	color: #1d3744;
}
main h5 a:hover {
	text-decoration: none;
}

main .news-item div:first-child {
	background-color: #025195;
	color: #fff;
	font-weight: bold;
	text-shadow: 0px 0px 2px #000;
	max-height: 150px;
}

main img {
	max-width: 100%;
	height: auto;
}

/** Sivupalkki **/
aside .card {
	border: 0;
	margin-bottom: 0.5rem;
}

aside .card .card-header {
	background-color: #025195;
	color: #fff;
	font-weight: bold;
}

.easyEventsList_group p {
	margin-bottom: 0;
	text-align: center;
}

.easyEventsList_events {
	font-size: 90%;
}

.easyEventsList_item {
	background-color: #f2f2f2;
	margin-bottom: 0.5rem;
	padding: 0.1rem 0.7rem;
}

.easyEventsList_item_today {
	background-color: #ffe493;
}

.easyEventsList_item:last-of-type {
	margin-bottom: 0;
}

.easyEventsList_time {
	font-size: 90%;
}

.easyEventsList_item a {
	color: #025195;
}

/* box-shadow kerralla */
main .news-item, 
main #next-kunto,
main .page-content,
aside .card,
.give_shadow
{
	box-shadow: 1px 1px 3px 0px rgba(186,186,186,1);
}

/* social feed */
.social_feed_title a, .social_feed_title a:hover {
	color: #fff;
}

.social_feed_content {
	max-height: 600px;
	overflow-y: scroll;
	overflow-x: hidden;
	font-size: 90%;
}

.social-feed-element {
	border-bottom: 1px solid #bbb;
	padding-bottom: 10px;
	margin-bottom: 10px;
}

.social-feed-element:last-child {
	border-bottom: none;
}

.social-feed-author {
	position: relative;
	margin-bottom: 2px;
}

.social-feed-media-object {
	width: 20px;
	margin-right: 0px;
}

.social-feed-timeago {
	float: right;
	position: absolute;
    top: 0;
    right: 0;
    z-index: 999;
    background-color: #fff;
    padding-left: 4px;
}

#social_feed a.social-feed-author-link {
	font-weight: bold;
}

#social_feed a.social-feed-author-link img {
	vertical-align: top;
}

.social-feed-body img.feed_img {
	width: 100%;
	max-width: 100%;
	margin-top: 3px;
}		

/** Footeri **/
body>footer {
	padding: 2rem;
	text-align: center;
	margin-top: 2rem;
	background-color: #fff;
	font-weight: bold;
}

body>footer .btn-light  {
	background-color: #e6e6e6;
	font-weight: bold;
	color: #1d3744;
}

body>footer .btn-light:hover  {
	font-weight: bold;
	background-color: #025195;
	color: #fff;
}

.footer-links {
	margin-bottom: 2rem;
}

/** Mainokset **/
.sponssit {
	margin: 2rem 0;
}

.sponssit>* {
	display: inline-block;
}

/** Jakonappulat **/
.share_buttons {
    margin-top: 0.5rem;
}
.share_buttons > div {
  line-height: normal;
  font-size: 1px;
  vertical-align: baseline;
}

/** Tapahtumakalenteri **/
.xa_calendar {
	border-collapse: collapse;
	table-layout:fixed;
	white-space: nowrap;
	width: 100%;
}

.xa_calendar thead th {
  width: 15.8%;
  padding: 3px;
}

.xa_calendar thead th.xa_cal_empty {
  width: 5%;
}

.xa_calendar td, .xa_calendar th {
  padding: 0;
  border: 1px solid #ccc;
}
.xa_calendar th.xa_cal_week {
  padding-top: 5px;
  text-align: center;
  vertical-align: top;  
}
.xa_calendar td {
  background: #eee;
  height: 80px;
  vertical-align:top;
}
.xa_calendar td>div {
  padding: 3px;
  width: auto;
  height: 100%;
  border: 1px solid transparent;
}
.xa_calendar td>div>div {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}
.xa_calendar td.xa_cal_activeDay {
  background: #fff;
}
.xa_calendar td.xa_cal_dayhasdata {
}

.xa_calendar td.xa_cal_today>div {
  border: 1px solid red;
}

/** Kuntorastit **/
#kunto-calendar .row:hover div:last-of-type {
	background-color: #FFE493!important;
}

blockquote.blockquote {
    font-size: 1rem;
    background: #eee;
    border-radius: 5px;
    padding: 5px 10px;
}

.valmennus-urheilijat .card[data-bs-target] {
	cursor: pointer;	
}

.valmennus-urheilijat .card[data-bs-target]:hover {
    transform: scale(1.03);
  	box-shadow: 0 8px 17px rgba(0,0,0,.12), 0 3px 7px rgba(0,0,0,.06);
}

.valmennus-urheilijat .col:nth-of-type(even) .card[data-bs-target]:hover {
	border-color: #007bff;
	box-shadow: 0 8px 17px rgba(0,123,255,.12), 0 3px 7px rgba(0,123,255,.06);
}
.valmennus-urheilijat .col:nth-of-type(odd) .card[data-bs-target]:hover {
	border-color: #FF7F7F;
	box-shadow: 0 8px 17px rgba(255,127,127,.12), 0 3px 7px rgba(255,127,127,.06);
}


.valmennus-urheilija .modal-header,
#kirppari-modal .modal-header {
	background-color: #025195;
	color: #fff;
}
.valmennus-urheilija .modal-header .close,
#kirppari-modal .modal-header .close {
	color: #fff;
}

.valmennus-urheilijat .ribbon {
	position: absolute;
    right: -0px;
    top: -0px;
    z-index: 1;
    overflow: hidden;
    width: 60px;
    height: 60px;
    text-align: right;
}
.valmennus-urheilijat .ribbon span {
  font-size: 9px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 15px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  width: 57px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#F70505 0%, #8F0808 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 7px; right: -13px;
}

.kirppari-item {
}
.kirppari-item:hover {
    cursor: pointer;
    background-color: #ececec;
}
.kirppari-image {
    width: 100%; 
    height: 150px; 
    overflow: hidden;
} 
.kirppari-image img {
    width: 100%;
}                   
.kirppari-content {
    height: auto;
}
.kirppari-content h5 {
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis;
}

/** suunnistajan polku **/
#suunnistajan-polku ul li {
	list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADYSURBVChTbZA9DoJAEIXfEO0tOR1nMbHBeAYTVFr/SrVWxELiKQQLUYxi5TjLriLqFyDhzdt5s0Ou69q2jb/wA7dTnGY1cTiOQ0SmICVm+ZUvsoQ2fm+bW++CUgv0AXkp7CMa4n4xpgqSksVYdLDs4noUoWLS/Tg7cOhzNJbO6uGqSSHaukjJU6PQp0lNGmPexqpIeY0oGJMa9pIgHGA31UqJjlMOuXbgUTSi/FQuQ6Pi5C7nPWZtBB5uqU758lmy0yJlYoRfGOS2mnY9l40ZScNg3Y2RUOMJe1VxIeASVegAAAAASUVORK5CYII=) 
}

/** HALL OF FAME **/
.hall-of-fame .bi-gender-female,
.hall-of-fame .bi-person-circle {
    color: red;
}
.hall-of-fame .bi-tree-fill {
    color: green;
}
.hall-of-fame .bi-gender-male {
    color: blue;
}

.hall-of-fame {
    font-size: 90%;
}

.hall-of-fame td:nth-child(1) {
    width: 2.5em;
}
.hall-of-fame td:nth-child(3) {
    width: 5.05em;
}
.hall-of-fame td:nth-child(4) {
    width: 4em;
}
.hall-of-fame td:nth-child(5) {
    width: 3.9em;
}

#partitable {
    table-layout: fixed; 
    font-size: 90%;
}

#partitable th:nth-child(2) {
    width: 160px;
}

.partigrid {
    gap:2px;
    max-width:100%;
}

.partigrid > div {
    height: 5px;
    width: 5px;
}

@media (min-width: 330px) {
    .partigrid > div {
        height: 6px;
        width: 6px;
    }
}

@media (min-width: 425px) {
    .partigrid > div {
        height: 10px;
        width: 10px;
    }
}

@media (min-width: 992px) {
    .partigrid > div {
        height: 14px;
        width: 14px;
    }
}

@media (min-width: 1200px) {
    .partigrid {
        gap:3px;
    }
    #partitable th:nth-child(2) {
        width: 180px;
    }
}


@media (min-width: 992px) {
    .kirppari-content {
        height: 100px;
    }
    .kirppari-image {
        width: 200px; 
        height: 100px; 
    }
}

@media (max-width: 767.98px) {
	.nav-tabs .dropdown-menu {
		margin-top: -1px;
		border: none;
		border-radius: 0;
		box-shadow: none;
	}
	.nav-tabs .dropdown-menu .dropdown-menu {
		box-shadow: none;
		margin-left: 1.5rem;
	}
    
    .breadcrumb,
    nav.navbar {
        margin-bottom: 0.5rem;
    }
    
    .page-content,
    .breadcrumb
     {
        margin-left: calc(var(--bs-gutter-x)* -.5);
        margin-right: calc(var(--bs-gutter-x)* -.5);
    }
}

@media (max-width: 575.98px) {
    .news-item,
    .page-content,
    .page-content,
    .breadcrumb,
    #next-kunto {
        border-radius: 0 !important;
    }    
    
    #next-kunto {
        border-left: 0 !important;
        border-right: 0 !important;
    }
}

#paketti2023_mainos 
{
	text-decoration: none;
	display: block;
	background: url(/assets/templates/sjkl/img/paketti-2023-tausta.png) no-repeat top left;
	background-size: cover;
	font-weight: bold;
	color: #fff;
	text-align:center;
    text-shadow: 0px 0px 5px #000;
    border: 2px solid #025195;
	font-size: 1.5rem;
}

#paketti2023_mainos>div
{
	padding: 1rem;
	background-color: rgba(0, 0, 0, .40)	
}

/** Osallistujakisan tyylit **/
#ok-events {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
    margin-top: 2rem;
}
#ok-events > * {
    height: 30px;
    margin: 0 2px 2px 0;
    font-size: 11px;
}


/** KURKO MAINOKSET **/
	#kurkocup2022_mainos 
	{
		text-decoration: none;
		display: block;
		background: url(/assets/templates/sjkl/kurko/img/kurko2022-text-bg.png) no-repeat top left;
		font-weight: bold;
		color: #fff;
		text-align:center;
	}
	
	#kurkocup2022_mainos>div
	{
		padding: 1rem;
		background-color: rgba(0, 0, 0, .80)	
	}
	.kurko-fire-text 
	{
		color: #fff;
		font-size:2em;
		margin:0; 
		letter-spacing: 2px;
		text-shadow: 0px -1px 2px white,
			0px -3px 6px rgba(255,200,200,1),
			0px -6px 12px rgba(255,150,100,1),
			0px -10px 20px rgba(255,100,100,1),
			0px -15px 30px rgba(255,50,50,1),
			0px -21px 42px rgba(255,0,0,1);
	}
    
    #kurkocup2023_mainos 
	{
		text-decoration: none;
		display: block;
		background: url(/assets/templates/sjkl/kurko/img/kurko2022-text-bg.png) no-repeat top left;
		font-weight: bold;
		color: #fff;
		text-align:center;
	}
    #kurkocup2023_mainos>div
	{
        padding: 1rem;
		background-color: rgba(0, 0, 0, .50);
	}
	#kurkocup2023_mainos>div {
		background-color: rgba(0, 0, 0, .80)	
	}
	#kurkocup2023_mainos .kurko-fire-text {		
		color: lightgreen;
		text-shadow: 0px -1px 2px white,
			0px -3px 6px rgba(255,200,200,1),
			0px -6px 12px rgba(255,150,100,1),
			0px -10px 20px rgba(255,100,100,1),
			0px -15px 30px rgba(255,50,50,1),
			0px -21px 42px rgba(255,0,0,1);
	}
    
    
    #kurkocup2024_mainos 
	{
		text-decoration: none;
		display: block;
		background: url(/assets/templates/sjkl/kurko/img/kurko2022-text-bg.png) no-repeat top left;
		font-weight: bold;
		color: #fff;
		text-align:center;
	}
    #kurkocup2024_mainos>div
	{
        padding: 1rem;
		background-color: rgba(0, 0, 0, .50);
	}
	#kurkocup2024_mainos>div {
		background-color: rgba(0, 0, 0, .80)	
	}
	#kurkocup2024_mainos .kurko-fire-text {		
		color: #f924c0;
		text-shadow: 0px -1px 2px white,
			0px -3px 6px rgba(255,200,200,1),
			0px -6px 12px rgba(255,150,100,1),
			0px -10px 20px rgba(255,100,100,1),
			0px -15px 30px rgba(255,50,50,1),
			0px -21px 42px rgba(255,0,0,1);
	}
    
    
    #kurkocup2025_mainos 
	{
		text-decoration: none;
		display: block;
		background: url(/assets/templates/sjkl/kurko/img/kurko2022-text-bg.png) no-repeat top left;
		font-weight: bold;
		color: #fff;
		text-align:center;
	}
    #kurkocup2025_mainos>div
	{
        padding: 1rem;
		background-color: rgba(0, 0, 0, .50);
	}
	#kurkocup2025_mainos>div {
		background-color: rgba(0, 0, 0, .80)	
	}
	#kurkocup2025_mainos .kurko-fire-text {		
		color: #912c17;
		text-shadow: 0px -1px 3px #fff, /* Innermost layer - intense heat (white) */
 0px -2px 6px #FF3, /* Second layer - core of flame (yellow) */
 0px -6px 12px #F90, /* Middle layer - body of flame (orange) */
 0px -10px 20px #C33; ;
	}
    
    @keyframes flicker {
        /* Initial state of animation */
        0%, 
        /* Final state of animation */
        100% { 
            text-shadow: 
                0 -1px 3px #fff, /* Innermost layer - intense heat (white) */
                0 -2px 6px #FF3, /* Second layer - core of flame (yellow) */
                0 -6px 12px #F90, /* Middle layer - body of flame (orange) */
                0 -10px 20px #C33; /* Outermost layer - edges of flame (red) */
        }
        /* Middle state of animation */
        50% { 
            text-shadow: 
                0 -2px 6px #fff, /* Innermost layer - intense heat (white) */
                0 -4px 12px #FF3, /* Second layer - core of flame (yellow) */
                0 -8px 16px #F90, /* Middle layer - body of flame (orange) */
                0 -12px 24px #C33; /* Outermost layer - edges of flame (red) */
        }
    }
     
    .fire {
        /* Apply the "flicker" animation to the .fire class */
        animation: flicker 2s infinite;
    }
	
	@media (hover: hover) {
		#kurkocup2022_mainos>div
		{
			background-color: rgba(0, 0, 0, .50);
			transition: all 0.4s ease-out 100ms;		
		}
		#kurkocup2022_mainos>div:hover {
			background-color: rgba(0, 0, 0, .80)	
		}
		.kurko-fire-text
		{
			text-shadow: 2px 2px 3px #000;
			transition: all 0.5s ease-out 100ms;
		}
		#kurkocup2022_mainos:hover .kurko-fire-text {		
			color: red;
			text-shadow: 0px -1px 2px white,
				0px -3px 6px rgba(255,200,200,1),
				0px -6px 12px rgba(255,150,100,1),
				0px -10px 20px rgba(255,100,100,1),
				0px -15px 30px rgba(255,50,50,1),
				0px -21px 42px rgba(255,0,0,1);
		}
        
		#paketti2023_mainos>div:hover {
			background-color: rgba(0, 0, 0, .70);
            color: #FFFFFF;
            color: #FFFFFF;
            text-shadow: 0 0 5px #FFF, 0 0 10px #FFF, 0 0 15px #FFF, 0 0 20px #025195, 0 0 30px #025195, 0 0 40px #025195, 0 0 55px #025195, 0 0 75px #025195;
		}
        
        #kurkocup2023_mainos:hover .kurko-fire-text {		
    		color: white;
    	}
        
        #kurkocup2024_mainos:hover .kurko-fire-text {		
    		color: white;
    	}
        
        #kurkocup2025_mainos:hover .kurko-fire-text {		
    		color: red;
    	}
        
        
	}