@import "fonts.css";

html, body, div, p{
	font-family: "Poppins", Arial, sans-serif;
	line-height:1.7;
	font-weight:400;
	overflow-wrap: break-word;
	word-wrap: break-word;
	color:#020304;
}

html, body {
	height: auto;
	overflow-x: hidden;
}

p{
	font-size:20px;
}

h1, h2, h3, h4, h5, h6{
	font-weight:700;
}

h1{
	font-size:41px;
	margin:0 0 20px 0;
	text-transform:uppercase;
}

h2{
	text-transform:uppercase;
	color:#020304;
	font-size: 23px;
	margin: 40px 0 0 0;
}
a, a:link, a:visited, a:hover, a:active{
	color:#52ADE0;
	text-decoration:none;
}

a:hover{
	color:#3590c4;
}

.page-content a, .page-content a:link, .page-content a:visited .page-content a:active{
	border-bottom:#52ADE0 1px solid;
	color:#020304;	
}

.page-content a:hover{
	border-bottom:#020304 0px solid;	
}

/*PAGE STRUCTURE*/

.wrapper{
	margin:0;
	padding:0;
}

.header-upper{
	display: flex;
	x-justify-content: space-around;
	x-align-items: stretch;
}

.header-upper__left{
	background-color:#52ADE0;
	min-height:500px;
	flex: 0 0 500px;
	padding:70px;
}

.header-upper__right{
	background-color:#E4B69A;
	flex-grow:1;
	display:flex;
	flex-direction:column;
	
}

.top-ribbon{
	background-color:#E4B69A;
	display:flex;
	justify-content: flex-end;
}

.top-ribbon ul{
	list-style:none;
	margin:0 40px 0 0;
	padding:0;
	display:flex;
	justify-content:space-between;
}

.top-ribbon ul li{
	margin: 24px 10px;
	transition:0.4s;
	line-height:1.3;
}

.top-ribbon ul li a{
	font-size:20px;
	text-transform:uppercase;
	color:#020304;
	padding:10px 4px;
	font-weight:800;
	text-decoration:none;
}


.top-ribbon ul li a:hover, .top-ribbon ul li.wpml-ls-item a:hover{
	color:#F8EAE1;
}

.top-ribbon ul li.current-menu-item{
	border-bottom:1px solid #F8EAE1;
}

.top-ribbon ul li.wpml-ls-item{
	margin: 24px 2px;
	transition:0.4s;
}

.top-ribbon ul li.wpml-ls-item.wpml-ls-first-item{
	margin: 24px 2px 10px 12px;
}

.top-ribbon ul li.wpml-ls-item:after{
	content: " / ";
}

.top-ribbon ul li.wpml-ls-item:last-child:after{
	content: "";
}

.top-ribbon ul li.wpml-ls-item a{
	font-size:20px;
	text-transform:uppercase;
	color:#020304;
	padding:10px 0;
	font-weight:400;
	text-decoration:none;
}



.header-upper__right .content-highlight{
	display:flex;
	flex-direction:column;
	justify-content: center;
	flex-grow:1;
	background-color:#F8EAE1;
}

.content-highlight__wrapper{
	padding:60px 56px;
	max-width:1000px;
}

.content-highlight__wrapper p{
	font-size:23px;
	font-weight:500;
	margin:0 0 0 0;
}

.content-highlight__wrapper blockquote{
	font-size:23px;
	font-family: "Poppins", Arial, sans-serif;
	font-weight:500;
	margin-top:40px;
	padding-left:70px;
	background:url(../images/blockquote.png) no-repeat left 10px;
}


.site-header__menu{
	background-color:#020304;
}

.collapse.navbar-collapse.evenly{
	display:block !important;
}

.main-navigation ul{
	list-style:none;
	margin:0 0 0 54px;
	padding:0;
	width:94%;
	max-width:1586px;
	display:flex;
	justify-content:space-between;
}

.main-navigation ul li{
	margin: 20px 4px;
	transition:0.4s;
}

.main-navigation ul li a{
	font-size:23px;
	text-transform:uppercase;
	color:#fff;
	font-weight:800;
	padding:10px 4px;
	text-decoration:none;
}

.lang-sme .main-navigation ul{
	width:96%;
	max-width:1960px;
}

.lang-sme .main-navigation ul li{
	margin: 20px 4px 20px 4px;
}

.main-navigation ul li a:hover{
	color:#E4B69A;
}

.main-navigation ul li.current-menu-item a{
	color:#E4B69A;
}

.page-content{
	padding:100px 20px 100px 500px;
	max-width:1500px;
}

.page-content.icon-bg{
	max-width:1400px;
}

.page-content p{
	max-width:780px;
}

.icons-bg-2{
	background:url('../images/ikonit-tausta-left.png') no-repeat left 160px;
}

.icons-bg{
	background:url('../images/ikonit-tausta-right.png') no-repeat right 160px;
}

.icon-bg{
	background:no-repeat 160px 100px;
}

.icon-1{
	background-image:url('../images/ikoni_taiteenvapaus.png');
}

.icon-2{
	background-image:url('../images/ikoni_yhdenvertaisuus.png');
}

.icon-3{
	background-image:url('../images/ikoni_vuorovaikutus.png');
}

.icon-4{
	background-image:url('../images/ikoni_tyoskentely.png');
}

.site-footer{
	border-top:1px solid #020304;
}

.site-footer p{
	font-size:12px;
	margin-left:32px;
}

.site-footer .footer-txt{
	margin-bottom:40px;
}

.bottom.content-highlight{
	display:none;
}

.upper.content-highlight{
	display:none;
}

.lang-sme .main-navigation ul li a{
font-size: 22px;
}

@media (max-width: 1849px) {
	.lang-sme .main-navigation ul li a{
	font-size: 20px;
	}
}

@media (max-width: 1690px) {
	.lang-sme .main-navigation ul li a{
	font-size: 18px;
}

}

@media (max-width: 1643px) {
	.main-navigation ul li a{
		font-size:20px;
	}

}

@media (max-width: 1529px) {
	.lang-sme .main-navigation ul li a{
	font-size: 15px;
}
}

@media (max-width: 1458px) {
	
	.main-navigation ul{
		margin:0 10px 0 20px;
	}
	

	
	.main-navigation ul li a{
		font-size:18px;
	}
	
	.top-ribbon ul{
		margin:0 10px 0 0;
	}
	
	.top-ribbon ul li a{
		font-size:16px;
	}
	
	.top-ribbon ul li.wpml-ls-item a{
		font-size:16px;
	}
	
	.main-navigation ul{
		width:90%;
	}
	
/*	.content-highlight__wrapper p{
		font-size:20px;
	}
	
	.content-highlight__wrapper blockquote{
		font-size:20px;
	}*/
}

@media (max-width: 1358px) {
	.main-navigation ul li a{
		font-size:16px;
		padding:4px;
	}
}

@media (max-width: 1287px) {
	.lang-sme .main-navigation ul li a{
	font-size: 14px;
}
}


@media (max-width: 1154px) {
	
	.main-navigation ul{
		width:98%;
	}
	
	.main-navigation ul li{
		margin: 8px 2px;
		transition:0.4s;
	}
	
	.top-ribbon ul li a, .top-ribbon ul li.wpml-ls-item a{
		font-size:16px;
		padding: 0;
	}

	.top-ribbon{
		display:flex;
		justify-content: flex-start;
	}
	
	.top-ribbon ul{
		list-style:none;
		margin:20px 10px 30px 0;
		padding:0;
		display:block;
	}

	
	.content-highlight__wrapper p{
		font-size:16px;
	}
	
	.content-highlight__wrapper blockquote{
		font-size:16px;
	}
	
	.page-content{
		margin:70px 0;
		padding:60px 0 60px 60px;
		max-width:800px;
	}
	
	.page-content.icon-bg{
		max-width:880px;
	}
	
	.icon-bg{
		background:url('') !important;
	}
	
	.top-ribbon ul li{
		margin: 3px 16px;
		transition:0.4s;
		padding:2px;
	}
	
	.top-ribbon ul li.wpml-ls-item{
		margin: 14px 0 8px 0;
		transition:0.4s;
		float:left;
	}
	
	.top-ribbon ul li.wpml-ls-item.wpml-ls-first-item{
		margin: 14px 4px 20px 16px;
	}
	
	.top-ribbon ul li.wpml-ls-item:after{
		content: " / ";
	}
	
	.top-ribbon ul li.wpml-ls-item:last-child:after{
		content: "";
	}
	
	
}

@media (max-width: 1200px) {
	.main-navigation ul{
		width: auto;
	}
}

@media (max-width: 1108px) {
	.main-navigation ul li a{
	font-size:15px;
	padding:4px;
	}
}

@media (max-width: 994px) {

	.main-navigation ul {
		width: auto;
	}

	.main-navigation ul li {
		margin: 8px 8px 8px 4px;
		transition: 0.4s;
	}
	
	.main-navigation ul li a{
	font-size:16px;
	padding:4px;
	}
		
	.navbar-toggler{
		border:0;
		padding:10px;
		margin:0 10px;
		width:100%;
		font-size:20px;
		font-weight:700;
		color:#fff;
	}

	.navbar-toggler-icon{
		width:100%;
		font-size:16px;
		padding:4px 0 0 0;
		text-transform:uppercase;
		text-align:left;
	}

	.navbar-toggler-icon:after {
		color: #fff;
		font-family: 'Material Icons';
		content: "\e5cf";
		font-size:36px;
		font-weight: 300;
		position: absolute;
		right: 20px;
		top: 28px;
		transform: translateY(-50%);
	}

	.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after {
		content: "\e5ce";
	}

	.navbar-toggler:focus{
		box-shadow:none;
	}
	
	.collapse.navbar-collapse.evenly{
	display:flex !important;
	}
	
	.collapse.navbar-collapse.evenly:not(.show) {
		display: none !important;
	}
	
	.content-highlight{
		display:none;
	}
	
	.header-upper__left{
		background-color:#52ADE0;
		min-height:100px;
		flex: 0 0 130px;
		padding:26px 10px;
	}
	
	.header-upper__left img{
		height:200px;
	}
	
	.page-content{
		padding:20px 20px 40px 20px;
		max-width:720px;
		margin:20px 0 0 0;
	}
	
}

@media (max-width: 620px) {
	
	.bottom.content-highlight, .home .upper.content-highlight{
		display:block;
		background-color:#F8EAE1;
		padding:0;
	}
	
	.bottom .content-highlight__wrapper, .home .upper .content-highlight__wrapper{
		padding:30px 20px;
	}
	
	.home .bottom.content-highlight{
		display:none;
	}
	
	p{
		font-size:18px;
	}
	
	h1{
		font-size:24px;
	}
	
	h2{
		font-size: 20px;
	}
	
	.icons-bg{
		background:url('');
	}
	
	.header-upper__right .content-highlight{
		display:none;
	}
	
	.header-upper__left{
		background-color:#52ADE0;
		min-height:80px;
		flex: 0 0 50%;
		padding:26px 10px;
	}
	
	.header-upper__left img{
		height:auto;
	}
	
	.page-content{
		padding:20px;
		max-width:720px;
	}
}