#main-header {
    width:100%;
    background: #FFFFFF;
}


#global {
	border-bottom:0px solid #ddd;
	background:none;
	height:0;
	position:relative;
	z-index:100;
	overflow:visible;
}
.global-inner {
	top:10px;
	left:50%;
	padding:0;
	width:720px;
	height:60px;
	margin:0 0 0 -250px;
	overflow:hidden;
	position:absolute;
}
.global-inner > * {
	border: 0 none;
	margin: 0;
	padding: 0;
}
.global-inner .column-left {
	/*float:none;*/
	width:100%;
	text-align:right;
	position:absolute;
	/*right:0;*/
	/*bottom:20px;*/
	top: 15px;
}
.global-inner .column-right {
	/*float:none;*/
	width:100%;
	text-align:right;
	position:absolute;
	/*right:0;*/
	bottom:0;
}

/*BRANDING*/
#branding {
    width:980px;
    height:90px;
    margin:0 auto;
    /*background:url(header_bg-fi.gif) 20px 0 no-repeat;*/
    position: relative;
}
.brand {
	position:relative;
	height:90px;
}
.brand .logo {
    display:block;
    width:120px;
    height:30px;
    background:url(posti.png) no-repeat;
    position:absolute;
    left:0;
    bottom:20px;
    text-indent:-9999px;
    outline:none;
    overflow:hidden;
}
.brand span {
    display:block;
    width:100px;
    height:auto;
    position:absolute;
    left:65px;
    bottom:24px;
    color:#394A58;
    font-weight:normal;
	font-size:14px;
    line-height: 150%;
    font-family:Montserrat;
}

/* Logout header within branding */
.global-column-element {
  /*padding-right: 3px;
  padding-left: 3px;*/
  font-weight: bold;
  color: #394A58;

}

.global-column-element a:hover {
    text-decoration: none;
}

/*NAVIGATION*/
#main-navigation {
    width:980px;
    margin:0 auto;
}
.main-navigation-wrapper {
    width:100%;
    display:block;
    overflow:hidden;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    background-clip: border-box;
    background-origin: border-box;
    
    -webkit-transition: height 0.5s ease-in-out;
    -moz-transition: height 0.5s ease-in-out;
    -o-transition: height 0.5s ease-in-out;
    transition: height 0.5s ease-in-out;
}
#main-navigation-button {
    display:none;
    padding:13px 13px;
    font-size:14px;
    font-weight:bold;
    color:#fff;
    background:#0051C2;
    cursor:pointer;
    overflow:hidden;
}
#main-navigation-button.active {
    display:block;
}
#main-navigation-button .labels {
    float:right;
    font-weight:normal;
}
#main-navigation-button .label-close ,
#main-navigation-button .label-open {
    display:none;
}
#main-navigation-button.active .label-close {
    display:block;
}
#main-navigation-button.inactive .label-open {
    display:block;
}
.main-navigation-list {
    font-family: Montserrat, sans serif;
    display:block;
    list-style:none;
    padding:0;
    margin:0;
    background:#3B4A57; 
    overflow:hidden;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    background-clip: border-box;
    background-origin: border-box;
}
.main-navigation-list li {
	float:left;
	display:block;
	padding:0;
	margin:0;
	/*border-right:1px solid #A0B9F0;*/
	overflow:hidden;
}
.main-navigation-list li:last-child {
	border-right:none;
	float: right;
}
.main-navigation-list li a {
    display:block;
    padding:10px 30px;
    color:#fff;
    text-decoration:none;
}
.main-navigation-list li:first-child a {
    /*
    -moz-border-radius:3px 0 0 3px;
    -webkit-border-radius:3px 0 0 3px;
    border-radius:3px 0 0 3px;
    background-clip: border-box;
    background-origin: border-box;
    */
}
.main-navigation-list li a.active {
color:#fff;
    text-decoration:none;

    	/* word-break: normal; */
    /*	padding: 0px 0.25rem;*/
    	display: flex;
    	-moz-box-align: center;
    	align-items: center;
    	border-bottom-left-radius: 0px;
    	border-bottom-right-radius: 0px;
    	border-bottom: 4px solid rgb(247, 204, 122);


}


.main-navigation-list li a .breakgroup,
.main-navigation-list li a .description {
    color:#394A58;
}
.main-navigation-list li a.active .breakgroup,
.main-navigation-list li a:hover .breakgroup,
.main-navigation-list li a.active .description ,
.main-navigation-list li a:hover .description {
    color:#394A58;
}


.main-navigation-list .title {
    display:block;
    font-weight:bold;
    font-size:14px;
    color: #fff;
}

.main-navigation-list .active .title {
	/*color: #394A58;*/
}

.main-navigation-list .outside .title {
    padding-left:16px;
    background:url(icon-launch.png) 0 40% no-repeat;
}
.main-navigation-list .description {
    display:block;
    font-size:11px;
    line-height:150%;
    color: #A0B9F0;
}
.main-navigation-list.hide {
    display:none;
}
.main-navigation-list.show {
    display:block;
}
.breakgroup {
    display:block;
    clear:right;
}


/*ADAPTIIVISUUS*/
@media screen and (max-width: 768px) {
    #branding {
        width:100%;
    }
	.brand {
		margin:0 10px;
	}
	.image{
		max-width:50%;
	}
	
	
	

	#global {
		border-bottom:1px solid #ddd;
		overflow:hidden;
		background:#FFFFFF;
		height:auto;
		/* display:none; */
	}
	.global-inner {
		padding:3px 13px;
		top:auto;
		left:auto;
		width:auto;
		height:auto;
		margin:0 auto;
		overflow:hidden;
		position:relative;
	}
	.global-inner .column-left {
		float:left;
		width:auto;
		position:relative;
		/*left:auto;
		bottom:auto;*/
		text-align:left;
		top: auto;
		line-height: 26px;
	}
	.global-inner .column-right {
		float:right;
		width:auto;
		position:relative;
		left:auto;
		bottom:auto;
		text-align:right;
	}
    



    /*NAVIGAATIO*/
    #main-navigation {
        width:auto;
        margin:0;
        padding:0 10px;
    }
    
    .main-navigation-wrapper {
          -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
          -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);     
    }
    
    .main-navigation-list {
        border-top:1px solid #fff;
        -moz-border-radius:0 0 3px 3px;
        -webkit-border-radius:0 0 3px 3px;
        border-radius:0 0 3px 3px;
        border-left: 1px solid #d7d7d7;
        border-right: 1px solid #d7d7d7;
        border-bottom: 1px solid #d7d7d7;
    }
    .breakgroup {
        display: inline;
        clear: none;
    }
    .main-navigation-list li {
        width:100%;
        border-right:0px solid #fff;
        border-bottom:1px solid #fff;
    }
    .main-navigation-list li:last-child {
        border-bottom:0px solid #fff;
    }
    .main-navigation-list li a {
        display:block;
        padding:7px 13px;
        background: #ffffff;
        text-decoration:none;
    }
    .main-navigation-list li a.active {
        border: 3px solid transparent;
        background: #f2f0ed;
        text-decoration:none;
     }
    .main-navigation-list li a:hover {
        background: #f2f0ed;
     }
    .main-navigation-list li:first-child a {
    /*
        -moz-border-radius:0 0 0 0;
        -webkit-border-radius:0 0 0 0;
        border-radius:0 0 0 0;
        background-clip: border-box;
        background-origin: border-box;
    */
    }
    .main-navigation-list li:last-child a {
    /*
        -moz-border-radius:0 0 3px 3px;
        -webkit-border-radius:0 0 3px 3px;
        border-radius:0 0 3px 3px;
        background-clip: border-box;
        background-origin: border-box;
    */
    }
    .main-navigation-list .title {
        color: #394a58
    }
    .main-navigation-list .outside .title {
    }
    .main-navigation-list .description {
    }
    
   
  
    
}

@media screen and (max-width: 480px) {
    #branding {
    }
    
    /*NAVIGAATIO*/
    #main-navigation {
    }
    .main-navigation-list {
    }
    .breakgroup {
    }
    .main-navigation-list li {
    }
    .main-navigation-list li:last-child {
    }
    .main-navigation-list li a {
    }
    .main-navigation-list li:first-child a {
    }
    .main-navigation-list li:last-child a {
    }
    .main-navigation-list .title {
    }
    .main-navigation-list .outside .title {
    }
    .main-navigation-list .description {
    }
    
    .global-inner .column-left {
        float: right;
    }

}