* {
    margin: 0; padding: 0;
    }
html {
overflow-x: hidden;	
}
    body {
        background-image: url('../kuvat/taustakuva.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-attachment: fixed;
        overflow-x: hidden;
		
    	min-height: 130vh;
      }

    
      .headline-div-main {
        position: relative; /* New */
        display: flex; 
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100vw;
        height: 350px;
    
        border-bottom: 3px inset black; 
        border-top: 3px solid rgb(134, 0, 0); 
        background-color: #eeab42;
        box-shadow: 0 5px 6px rgb(0, 0, 0);
    }
    
    .headline-div-up,
    .headline-div-down {
        width: calc(100vw - 20px);
        height: calc(50% - 10px);
        display: flex;
        border: 1px solid black;
    }
    
    .headline-div-up {
        background-color: #388676;
        display: grid; /* Change flex to grid */
        grid-template-columns: 350px 1fr; /* Reserve 350px for the left and remaining for the right */
        align-items: center;
    }
    
    .div99 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-self: center; /* Added this to center div99 in the available space */
    }
    


    .headline-div-down {
        background-color: #eeab42;
        z-index: -1;
    }
    
    .headline-kuva {
		cursor: pointer;
        z-index: 10;
        display: flex;
        height: 335px; 
        margin-top: 3px; /* Updated */
        border-radius: 50%;
        background-color: transparent;
    }

    .headline-text1 { 
        color: #eeab42;
    }
    .headline-text2 {
        color: #388676;
        margin-top: 50px;

    }

    .headline-text1,
    .headline-text2{
        -webkit-text-stroke: 1px #000000;
        box-shadow: 0 10px 6px rgba(0, 0, 0, 0.715);
        padding: 10px;
        font-size: 30px;
        font-weight: bold;
        font-family: Arial, sans-serif;
        text-transform: uppercase;
        letter-spacing: 2px;
        text-shadow: 2px 2px 2px rgb(0, 0, 0);
        border-radius: 3px;
        white-space: nowrap;

    }
 


    /*  */
    @media  (max-width: 1180px) {
        .headline-div-up {
            background-color: #388676;
            flex-direction: column;
            justify-content: start;
            display:flex;
            align-items: center;
            gap: 0vw;
            grid-template-columns:none;
            padding: 10px 0px;
            margin-top: 10px;
        }
        .headline-kuva {
            z-index: 10;
            display: flex;
            height: 175px; 
            margin-top: -5px;
            border-radius: 50%;
            background-color: transparent;
        }
    
        .div99 {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 12px;
            justify-self: none;

            }

            
        .headline-text1 { 
            color: #388676;
        }
        .headline-text2 {
            background-color:  #388676da;
            color: #eeab42;

            margin-top: 0px;
    
        }
}
    
         
    .navbar {
        z-index: 9999;
        margin-top: 5px;
        width:100vw; height: 100px; 
        background-image: linear-gradient(180deg, #eeac42, #ffffff00);
        justify-items: center; display: flex;
        align-items: center;
        
        border-top: 5px inset rgba(6, 6, 6, 0.546); 
        box-shadow: 0 5px 5px rgb(0, 0, 0);
        }

        .fb-linkki {
            position: absolute; right: 50px;
            margin-top: 0px; 
        }

  .fblogo {
height: 75px;	  
}

        .fb-linkki:hover {
            filter: brightness(150%); transform: scale(1.1);
        }
        

        .nav-list {
            white-space: nowrap;
            display: flex; flex-direction: row; 
            list-style: none;
            margin-left: 100px; 
            justify-content: space-evenly;
        } 
   

        .nav-item {
            margin-bottom: 7px; 
            margin-left: 10px; margin-right:10px;
			
        }
        .link-text {
            color:white;
            padding: 15px 18px; 
            background-color: rgba(0, 0, 0, 0.446);
            font-weight: bold; 
            font-family: arial; text-decoration: none;
            border-radius: 10px;
            border: 6px solid rgba(255, 255, 255, 0);
            box-shadow: 0 5px 3px rgb(0, 0, 0);
			display:flex; flex-direction: row; justify-content: center; align-items: center;
        }
      
        
        
        .fb-linkki1 {
            display:none;
            position: relative; 
            margin-bottom:0px; margin-left: 15px;   
        }

        .fb-linkki1:hover {
            filter: brightness(150%); transform: scale(1.1);
        }
        
        
        .fb-text1 {
            color:white;
            padding: 13px 25px;  
            background-color: rgba(2, 40, 255, 0.734);
            
            font-weight: bold; 
            font-family: arial; text-decoration: none;
            border-radius: 10px;
            border: 1px solid rgb(0, 0, 0);
            box-shadow: 0 5px 3px rgb(0, 0, 0);
        }

        .link-text:hover {
            
            background-color: rgba(255, 0, 0, 0.511);
        }
        .etusivu-teksti {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: cover; 
            background-color: #211900ca;
          }
          
          .etusivu-teksti h1 {
            font-family: "Arial Black", sans-serif;
            font-size: 36px;
            color: #dbdada;
            margin-bottom: 20px; margin-top: 70px;
            padding: 20px;
            box-shadow: 0 3px 3px rgba(0, 0, 0, 0.476);
           white-space: nowrap;
           position: relative;
          }
          
          .etusivu-teksti p {
            font-family: "Arial", sans-serif;
            font-size: 20px;
            color: #555555;
            text-align: center;
            line-height: 1.5;
            max-width: 75%;
            margin: 0 auto;
            padding: 50px;
            border: 2px solid #999999;
            border-radius: 30px;
            background-color: #ffffff;
            margin-bottom: 40px;
          }

@media (max-width: 1140px) {
    .nav-item {
        margin-left: 0px; margin-right:0px;
    }
    .nav-list {
        margin-left: 20px; 
    } 
    .etusivu-teksti h1 {
        font-size: 4vw;
      }
}

.hpo {
width: 100%;
display: flex;flex-direction: row;
justify-content: space-evenly;
}

    .dropdownmenu {
        position: relative;
        display: none;
        color:white;
        padding: 20px 18px; 
        background-image: linear-gradient(red, yellow);
                font-weight: bold; 
        font-family: arial; text-decoration: none;
        border-radius: 10px 10px 0px 0px;
        border: 1px solid rgb(0, 0, 0);
        box-shadow: 0 5px 3px rgb(0, 0, 0);
       margin-right: 5px;
        cursor: pointer;
    } 
    .dropdownmenu:active {
        
        background-color: rgba(68, 0, 0, 0.828);
      
        
    }

    .nav-droplist {
 display:none;
    }
    

    .nav-item1 {
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
        width: 100%; height: 90px;
        background-color: rgba(255, 255, 255, 0);
		
    }

    .nav-droplist .nav-item1:first-child {
        margin-top: 10px;
      }
      
    .link-text1 {
		        display: flex;
        justify-content: center;
        align-items: center;
        color:rgb(233, 124, 0);
padding: 35px 120px;
        background-color: rgba(255, 255, 255, 0.632);
        font-weight: bold; 
        font-family: arial; text-decoration: none;
        border-radius: 10px; z-index: 9999; 
        border-bottom: 1px solid grey;

    }
    .link-text1:active {

            background-color:  #388676da;
  
    }
    
    .link-text1:hover {
        background-color: rgba(32, 11, 6, 0.816);
    }

    .valikko-text {
        color: white; padding: 0px 35px;
    }

        .show {
            overflow: hidden;
            position: absolute;
            background-color: rgba(255, 255, 255, 0.628);
            white-space: nowrap;
        top:101%;
        left: 50vw;
        transform: translateX(-50vw); 
        display: flex; 
        flex-direction: column;
        list-style: none;
        height: 450px;
        z-index: 9999;
        text-align: center;
        width: 260px;
        border-radius: 0px 40px 5px 5px;  
        border: 1px solid black;
        box-shadow: 0 5px 3px rgb(0, 0, 0);
        }           

            
 .pallokuva22 {
    position:fixed; 
    width:40px;
cursor:none;
     bottom: -10px; left: -10px; z-index: 9999;
 }




  
 
  
  
   
/* tästä alkaa div avaus jutut */ 

.content-div {
  display: none; /* Hide the content divs by default */
  
}

.uutiset {
    display: flex;
}


@media (max-width: 954px) {

	          .etusivu-teksti p {
   padding: 50px 3vw;
          }
    .nav-list {
        display: none; 
    } 
    .dropdownmenu {
        display: flex;  
    } 
    .fb-linkki1 {
        display: flex;   
text-align: center;
justify-content: center;
align-items: center;
    }
 
    .div99 {
        margin-top: 30px;
        display: flex;
        flex-direction: column;
        align-items: center;
        
    }

    .headline-text1 {

        text-shadow: none;
 
        -webkit-text-stroke: 1px #000000;
        color: #388676;
        font-size: 3.5vw;
        padding: 10px 2vw;
        margin-bottom: 10px;
    }
    .headline-text2 {
        text-shadow: none;

        -webkit-text-stroke: 1px #000000;

        padding: 10px 3vw;
        background-color:  #388676da;
        color: #eeab42;
        font-size: 3.5vw;

        
    }
 
}
@media (max-width: 406px) {
    .headline-text1 {
        font-size: 3.5vw;
		-webkit-text-stroke: 1px black;
    }
	    .headline-text2 {
        font-size: 3.6vw;
		-webkit-text-stroke: 0px rgba(255, 255, 255, 0);
    }

 .div99 {

    margin-top: 10px;
 }
    .headline-div-up {
        height:63%;
    }

    .headline-kuva {
        height: 230px;
    }
    .dropdownmenu {
        padding: 20px 0px; 
    } 
    .valikko-text {
        padding: 0px 30px;
    }
    .fb-text {
      
        padding: 10px 10px; 
   
    
    }
}
.footer {
    background-color: #eeac42d0; 
position: sticky; bottom: -200px; left:0px;
border-top: 1px solid black;
width: 100%;
height: 110px;
} 
.yhteistyössä {
  position: relative; top: 5px; left: 5px;
  font-size: 20px; font-weight: bold;
  color: rgb(36, 0, 0);
}