charset "utf-8";
/* CSS Document */


<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=menu" />

<style>
.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 40
}
.logo {
    height: 125px;
}




.bg-image {
    background-image: url('../bilder/fjall.jpg');
    background-size: cover;
    background-position: center;
    height: 800px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bg-image h1 {
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    font-size: 6em;
}
.bg-image {
    position: relative;
}
/**/
.ag-image {
    background-image: url('../bilder/fjall_host.webp');
    background-size: cover;
    background-position: center;
    height: 800px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ag-image h1 {
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    font-size: 6em;
}
.ag-image {
    position: relative;
}
/**/
/**/
.cg-image {
    background-image: url('../bilder/stugor.jpg');
    background-size: cover;
    background-position: center;
    height: 800px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cg-image h1 {
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    font-size: 6em;
}
.cg-image {
    position: relative;
}
/**/
/**/
.dg-image {
    background-image: url('../bilder/slalom.jpg');
    background-size: cover;
    background-position: center;
    height: 800px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dg-image h1 {
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    font-size: 6em;
}
.dg-image {
    position: relative;
}
/**/
/**/
.eg-image {
    background-image: url('../bilder/tenndalsvallen_1.webp');
    background-size: cover;
    background-position: center;
    height: 800px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.eg-image h1 {
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    font-size: 6em;
}
.eg-image {
    position: relative;
}
/**/
/**/
.fg-image {
    background-image: url('../bilder/45an.webp');
    background-size: cover;
    background-position: center;
    height: 800px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.fg-image h1 {
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    font-size: 6em;
}
.fg-image {
    position: relative;
}
/**/

.overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

		
.material-symbols-outlined {
	font-variation-settings:
	'FILL' 0,
	'wght' 400,
	'GRAD' 0,
	'opsz' 24
	}
	
.navbar-light.bg-light {
	background-color: #e6e6e6 !important;
	position: sticky;
	top: 0; /* Fäster navbaren högst upp */
    z-index: 1000; /* Ser till att navbaren alltid ligger ovanför andra element */
}

/* Allmän layout */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f8f9fa;
}
.container2{
	max-width:1200px;
	margin-left:400px;
}
.container {
    /* max-width: 1200px; */
    /* margin: auto; */
    justify-content: center;
	padding: 20px;
	align-items: center;
}

.container3 {
	margin:950px;

}

/* Rad och kolumn */
.row {
    display: flex;
    justify-content: space-between;
    gap: 20px; /* Mellanrum mellan korten */
}

.col {
    flex: 1 1 22%;
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    padding: 20px;
    transition: transform 0.3s ease;
}

.col:hover {
    transform: scale(1.05);
}

.no-bullets {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

/* Bildstil */
img {
    border-radius: 8px;
    max-width: 100%;
	height: 200px; /* Sätt en fast höjd */
    /*height: auto;*/
	object-fit: cover; /* Gör så att bilden fyller ut höjden utan att bli förvrängd */
}

/* Bildstil */
.img2 {
    border-radius: 8px;
	height: 200px; /* Sätt en fast höjd */
	width:400px;
    /*height: auto;*/
	object-fit: cover; /* Gör så att bilden fyller ut höjden utan att bli förvrängd */
}

/* Text och titel */
h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: #333;
}

p {
    font-size: 1rem;
    color: #555;
    line-height: 1.5;
}

/* Knappar */
button {
    font-size: 1rem;
    color: #fff;
    background-color: #007bff;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #0056b3;
}

/**/

.filter-container {
      background-color: #ffffff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      max-width: 600px;
      width: 90%;
    }

    h1 {
      font-size: 1.5rem;
      margin-bottom: 20px;
      text-align: center;
      color: #333;
    }

    /* Gör fälten vågräta */
    .input-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }

    .input-group {
      flex: 1;
      margin-right: 10px;
    }

    .input-group label {
      font-weight: bold;
      display: block;
      margin-bottom: 5px;
      color: #333;
    }

    .input-wrapper {
      position: relative;
      display: flex;
      align-items: center;
    }

    .input-wrapper input[type="date"] {
      width: 100%;
      padding: 10px;
      font-size: 1rem;
      border: 1px solid #ccc;
      border-radius: 5px;
      background-color: #f9f9f9;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .icon-calendar {
      position: absolute;
      right: 10px;
      font-size: 1.2rem;
      color: #888;
    }

    select {
      width: 100%;
      padding: 10px;
      font-size: 1rem;
      border: 1px solid #ccc;
      border-radius: 5px;
      background-color: #f9f9f9;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .search-button {
      width: 100%;
      padding: 15px;
      font-size: 1.2rem;
      font-weight: bold;
      background-color: #ff6600;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    .search-button:hover {
      background-color: #e05500;
    }
	
/**/
.skid-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 40px auto;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 10px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
    width: 100%;
	max-width:500px ;
}

.skid-bild {
    width: 100%;
    max-width: 600px;
    height: auto;
    border-radius: 8px;
    transition: transform 0.3s ease-in-out;
}

.skid-bild:hover {
    transform: scale(1.05);
}

.skid-titel {
    font-size: 28px;
    margin-top: 20px;
    color: #023047;
    font-weight: bold;
}

.skid-text {
    font-size: 18px;
    margin-top: 10px;
    color: #555;
}
/**/

.snygg-länk {
    color: #007bff;
    font-weight: bold;
    text-decoration: none;
}

.snygg-länk:hover {
    text-decoration: underline;
    color: #0056b3;
}




@media (max-width: 768px) {
    .col {
        flex: 1 1 100%; /* Gör så att sektionerna staplas vertikalt */
    }
	
    .bg-image h1 {
        font-size: 2.5rem; /* Mindre på mobil */
    }
	.bg-image {
        height: 400px; /* Minska höjden på bakgrundsbilder */
    }
	.ag-image h1 {
        font-size: 2.5rem; /* Mindre på mobil */
    }
	.ag-image {
        height: 400px; /* Minska höjden på bakgrundsbilder */
    }
	.cg-image h1 {
        font-size: 2.5rem; /* Mindre på mobil */
    }
	.cg-image {
        height: 400px; /* Minska höjden på bakgrundsbilder */
    }
	.dg-image h1 {
        font-size: 2.5rem; /* Mindre på mobil */
    }
	.dg-image {
        height: 400px; /* Minska höjden på bakgrundsbilder */
    }
	.eg-image h1 {
        font-size: 2.5rem; /* Mindre på mobil */
    }
	.eg-image {
        height: 400px; /* Minska höjden på bakgrundsbilder */
    }
	.fg-image h1 {
        font-size: 2.5rem; /* Mindre på mobil */
    }
	.fg-image {
        height: 400px; /* Minska höjden på bakgrundsbilder */
    }
	h2 {
        font-size: 2.5rem; /* Mindre på mobil */
    }
	.container2{
	margin-left:25px;
	margin-right:25px;
	}
	
	.filter-container {
    max-width: 600px;
    width: 100%;
    margin: auto;
}
	.input-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centrerar fälten */
    gap: 10px;
}
	.input-group {
    flex: 1 1 250px; /* Sätter en maxbredd */
}
	input, select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
	.container3 {
	margin:25px;

}
	
	
</style>