* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* style - grid - start */

#nav_wrapper 			{
    max-width: 1024px;
	margin: 10px auto;
	padding: 5px;
}

header {
	
	padding: 0px;
	/* background-color: #fff */
	position: relative;
	z-index: 10;
}

/* style - navbar - start */

	.grid_zero {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      grid-auto-flow: dense;
	  position: relative;
	  /*background-color: #959595;*/
	  border-radius: .5em;
    }

	.grid_zero_1 {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(169px, 1fr));
      grid-auto-flow: dense;
	  /*background-color: #959595;*/
	  border-radius: .5em;
	  align-items: center;
    }

	.nav_logo {
		display: flex;
		align-items: center;
        justify-content: left;
		margin: 0.2rem;
		padding: 0.75rem 1.5rem;
		/*padding: 1rem 1rem;*/
    }

	.logo				{
	 	width: 150px;
      	height: auto;
	}

    li {
        list-style: none;
    }

    .navbar > a {
        text-decoration: none;
        color: #ffffff;
        font-size: 1rem;
    }

    a:hover {
        color: orange;
    }

/* Style the active class, and buttons on mouse-over */
	.active a {
  		background-color: transparent;
  		color: orange;
}

    .navbar {
        display: flex;
        margin: 0.2rem;
		padding: 0.75rem 1.5rem;                                         
        align-items: center;
        justify-content: right;
    }

    .navbar .links {
        display: flex;
        gap: 1.2rem;
		letter-spacing: 3px;
		margin-right: 0.2rem;
		padding-right: 1.5rem;
    }

    .navbar .toggle_btn {
		margin-right: 0.25rem;
        color: #fdfcfc;
        font-size: 2em;
        cursor: pointer;
        display: none;
    }

    .action_btn {
        display: flex;
		letter-spacing: 3px;
		padding: 0.2rem;
        background-color: transparent;
        color: #fff;
        border: 1.5px solid;
		border-color: #fff;
        border-radius: 0px;
        cursor: pointer;
        transition: scale 0.2 ease ;
    }

    .action_btn:hover {
        scale: 1.05;
        color: orange;
		border: thick;
		border: 2px solid;
		border-color: #fff;
		border-radius: 0px;
    }

    .action_btn:active {
        scale: 0.95;
    }

    /* DROPDOWN MENU */

    .dropdown_menu {
        display: block;
		position: absolute;
		align-items: center;
		border-radius: .5em;
		z-index: 9999;
        top: 53px;
        height: 0;
		width: 100%;
        background: rgba(128, 128, 128, 0.1);
        backdrop-filter: blur(7px);
        overflow: hidden;
        transition: height 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
   
	.dropdown_menu.open {
        height: 240px;
    }

    .dropdown_menu li {
		display: flex;
        padding: 0.7rem;
        align-items: center;
        justify-content: center;
		font-weight: bold;
		letter-spacing: 3px;
    }

    .dropdown_menu .action_btn {
        display: flex;
        justify-content: center;
    }

.social_media {
	margin: 0.2rem;
	   padding: 0px 1.5rem;
}

.social_media_icons {
	display: flex;
	vertical-align: middle;
	justify-content: right;
	gap: 15px;
	font-size: 12px;
	opacity: 0.75;
}

    /* RESPONSIVE DESIGN */

    /*@media (max-width: 700px) {
		.navbar .links		{
		display: none;
	}
		
        .navbar .action_btn {
            display: none;
    }
    	.navbar .toggle_btn {
        	display: block;
    }

    	.dropdown_menu {
        	display: block;
    }
		.social_media_icons {
		font-size: 20px;
}
    }*/

/* Extra small devices (phones, 600px and down) */

@media only screen and (max-width: 600px) {
	
	.navbar .links		{
		display: none;
	}
		
        .navbar .action_btn {
            display: none;
    }
    	.navbar .toggle_btn {
        	display: block;
    }

    	.dropdown_menu {
        	display: block;
    }
		.social_media_icons {
			font-size: 15px;
	}
		.grid_three div {
			grid-column: 1/2;
	}
		/*.download_btn {
		display: none;
		}*/
	}

/* Small devices (portrait tablets and large phones, 600px and up) */

@media only screen and (min-width: 600px) {
	
		/*.footer-text-left {
		display: flex;
  		align-items: flex-start;
		justify-content: left;
		flex-direction: column;
		margin: 0.5rem;
		font-size: 0.75rem;
	}

		.footer-text-right {
		display: flex;
  		align-items: flex-end;
		justify-content: right;
		flex-direction: column;
		margin: 0.5rem;
		font-size: 0.75rem;
}*/
	
		.dropdown_menu {
        	display: none;
    }
	
	}


/* style - navbar - finnish */