/**
 * If using a CSS pre-processor, tell it to overwrite this file. If not, place
 * your custom CSS modifications here.
 */
 
body {
	font-size: 12pt;
	color: #000;
	background: #fbf8f8;
        font-family: 'Mulish', sans-serif;
        font-weight: 300;

}

.main-container {
	background: #FFF;	
	padding-bottom: 50px;
	padding-left: 30px;
	padding-right: 30px;
}

a {
	color: #64090e;
	text-decoration: none;
}

a:hover {
	color: #64090e;
	text-decoration: underline;
}

h1, h2, h3 {
        font-family: 'Mulish', sans-serif;
        font-weight: 700;

}

h1 {
	font-size: 26pt;	
}

h2 {
	font-size: 22pt;	
}

h3 {
	font-size: 18pt;	
}

.region-content {
	float: left;
	width: 100%;	
}

/* Koko sivun osio*/

.dialog-off-canvas-main-canvas {
	margin-top: -15px;
}
 
 /* Yläosio, header, kuva, logo, nimi*/

.header-top {
	width: 100%;
	float: left;
	padding-top: 20px;
	padding-bottom: 20px;
	background: #FFF;
}

.header-top-inner {
    margin: 0 auto;
	max-width: 1140px;
}

.header-top-inner a {
	z-index: 100;
	position: relative;
}

.region-header-top  img{
	margin-bottom: 5px;
}

/* Valikko, vaigaatio, navbar, main-menu*/

.navbar-brand {
	display: none;	
}

.navbar-wrapper {
	width: 100%;
	float: left;
	background: #64090e;
	/*background: #b28b8e;*/
	margin-bottom: 20px;
}

.navbar-default {
	border: 0;
	width: 100%;
	padding: 0px;
	margin-top: 0px !important;
	margin-bottom: 0px;
	background:none;
}

.navbar-default ul{
	margin-left: -15px;
}

.navbar-header {
	width: 100%;
	float: left;	
}

.navbar-toggle {
	z-index: 100;
	background: #000;
}

#navbar-collapse {
	width: 100%;
	padding: 0px;
}

#navbar-collapse ul li a{
	color: #FFF;
	background: #64090e;
	font-weight: 700;
}

#navbar-collapse ul li a.is-active{
	background: #b28b8e;
	color: #000;
	font-weight: 700;
}

#navbar-collapse ul li ul li.active a{
	background: #b28b8e;
	color: #000;
}

#navbar-collapse ul li ul li{
	border: 0px;
}

#navbar-collapse ul li a:hover{
	color: #000;
	background: #b28b8e;
}

.navbar-nav .dropdown:hover > .dropdown-menu {
    display:block;
	margin:0;
}

ul.nav li.dropdown:hover > ul.dropdown-menu {
  display: block;
}

ul.nav li.dropdown:hover > ul.dropdown-menu {
  padding: 0px;
  background: #909399;
  border-radius: 0px;
  border: 0;
}

ul.nav li.dropdown:hover > .dropdown-menu a{
  padding: 10px;
}

/* Alavalikko submenu*/

.region-sidebar-first nav {
	margin-bottom: 20px;
	width: 100%;
	float: left;
}

.region-sidebar-first nav ul {
	width: 100%;
}

.region-sidebar-first nav li {
	width: 100%;
	margin-left: 15px;
}

.region-sidebar-first nav a {
	border: 2px solid #64090e;
	display: inline-block;
	background: #64090e;
	color: #FFF;
	font-weight: 700;
	width: 100%;
	margin-bottom: 10px;
}

.region-sidebar-first nav a.active-trail {
	color: #000;
	font-weight: 700;
	background: #b28b8e;
	border: 2px solid #b28b8e;
}

.region-sidebar-first nav a:hover{
	color: #000;
	font-weight: 700;
	background: #b28b8e;
	border: 2px solid #b28b8e;
}

/* Breadcrumb, leivänmurupolku*/

.region-header .breadcrumb {
	width: 100%;
	float: left;
	background: none;
	margin-left: -13px;
	color: #000;
}

.path-frontpage .breadcrumb {
	display: none;
}

.breadcrumb > li + li:before {
    color: #ccc;
    content: "» ";
    padding: 0 5px;
}

/* Etusivun tekstilaatikon muotoilu */

.path-frontpage .main-container {

}

.path-frontpage .main-container .content {
	margin-left: 0px;	
	margin-right: 0px;	
}

.path-frontpage .main-container .content .field--name-field-perus-sisalto {
	margin-top: 15px;
	padding: 30px 20px 30px 20px;
	text-align: center;
	font-size: 18pt;
	line-height: 20pt;
	background: rgb(229,229,229);
	/*background: linear-gradient(180deg, rgba(229,229,229,1) 60%, rgba(255,255,255,1) 100%);*/
}

/* Etusivun laatikot */

#block-views-block-etusivun-laatikot-block-1 {
	margin-top: 25px;
	width: 100%;
	float: left;
}

#block-views-block-etusivun-laatikot-block-1 .views-row {
	width: 100%;
	float: left;
	margin-bottom: 22px;
}

#block-views-block-etusivun-laatikot-block-1 .row-1,
#block-views-block-etusivun-laatikot-block-1 .row-2 {
	display: flex;
}

#block-views-block-etusivun-laatikot-block-1 .views-row .views-col {
	width: 32%;
	float: left;
	position: relative;
	flex: 1;
}

#block-views-block-etusivun-laatikot-block-1 .views-row .col-1,
#block-views-block-etusivun-laatikot-block-1 .views-row .col-2 {
	margin-right: 22px;
}

#block-views-block-etusivun-laatikot-block-1 .views-field-title {
	font-weight: 700;
	font-size: 13pt;
	margin-top: 8px;
	margin-bottom: 5px;
}

#block-views-block-etusivun-laatikot-block-1 .views-field-field-el-sisalto {
	margin-bottom: 25px;	
}

#block-views-block-etusivun-laatikot-block-1 .views-field-field-el-linkki {
	position: absolute;
    bottom: 0;
}

/* Alapalkki, footer */

footer.container {
	border: 0;
	margin-top: 0px;
	padding: 20px 0px;	
	width: 100%;
	background: #64090e;
}

.region-footer {
	margin: 0 auto;	
	max-width: 1152px;
	display: flex;
}

.region-footer p,
.region-footer div {
	color: #FFF;
	font-weight: 700;
}

.region-footer #block-footer1 {
	flex: 1;
	width: 33%;
	float: left;
}

.region-footer #block-footer2 {
	flex: 1;
	width: 33%;
	float: left;
}

.region-footer #block-footer3 {
	flex: 1;
	width: 33%;
	float: left;
	position: relative;
}

.region-footer #block-footer3 a{
	color: #FFF;
}


.region-footer #block-footer3 .footer-copyright {
	position:absolute;                  
    bottom:0;                          
    left:0; 
}

/* Alapalkki somekuvakkeet*/

.footer-social-icons {
	width: 100%;
	float: left;
}

.footer-social-icons .footer-social-icons-fb {
	width: 20%;
	float: left;
}

.footer-social-icons .footer-social-icons-fb img{
	width: 50px;
}

.footer-social-icons .footer-social-icons-tw {
	width: 50%;
	float: left;
}

.footer-social-icons .footer-social-icons-tw img{
	width: 50px;
	margin-top: 5px;
}

/* Verkkolomakkeet */

.field--name-webform {
	margin-top: 20px;
}

.field--name-webform .webform-element--title-inline {
	float: left;
	width: 100%;
}

.field--name-webform .webform-element--title-inline label {
	float: left;
	width: 20%;	
}

.field--name-webform .webform-element--title-inline input {
	float: left;
	width: 60%;	
}

.field--name-webform .form-inline label {
	float: left;
	width: 20%;	
}

.field--name-webform .webform-element--title-inline .select-wrapper {
	float: left;
	width: 60%;	
}

.field--name-webform .webform-element-description {
	margin-top: 10px;
	float: left;
	width: 100%;
	color: #000;
	font-size: 10pt;
}

.form-type-checkbox {
	float: left;
	width: 100%;
}	

.webform-submission-sahkopostilista-form .webform-element--title-inline label {
	float: left;
	width: 25%;	
}


/* Ajankohtaista-sivu*/

.view-ajankohtaista {
	margin-top: 30px;
}


.view-ajankohtaista .views-row {
	width: 100%;
	float: left;
	padding-bottom: 20px;
	margin-bottom: 30px;
	border-bottom: 1px solid #DDD;
}

.view-ajankohtaista .views-row .ajankoht-kuva-osio {
	width: 29%;
	float: left;
	margin-right: 15px;
}

.view-ajankohtaista .views-row .ajankoht-teksti-osio {
	width: 68%;
	float: left;
}

.view-ajankohtaista .views-row .ajankoht-teksti-osio .views-field-title {
	font-size: 22pt;
	line-height: 24pt;
	margin-bottom: 10px;
}

/* Edistyksen päivien oma sivu*/

.page-node-type-edistyksen_paivat .region-content .content {
	float: left;
	width: 100%;
}

.page-node-type-edistyksen_paivat .region-content .content .field--name-field-ep-kuva {
	width: 30%;
	float: left;
}

.page-node-type-edistyksen_paivat .region-content .content .field--name-field-ep-teema {
	width: 65%;
	float: left;
	font-size: 18pt;
	margin-left: 20px;
}

.page-node-type-edistyksen_paivat .region-content .content .field--name-field-ep-aika {
	width: 15%;
	float: left;
	margin-top: 10px;
	margin-left: 20px;
}

.page-node-type-edistyksen_paivat .region-content .content .field--name-field-ep-paikka {
	width: 30%;
	float: left;
	margin-top: 10px;
}

.page-node-type-edistyksen_paivat .region-content .content .field--name-field-ep-sisalto {
	width: 100%;
	float: left;
	margin-top: 20px;
}

/* Editysksen päivät arkisto */

.view-edistyksen-paivat .views-row {
	width: 100%;
	float: left;
	padding-bottom: 20px;
	margin-bottom: 30px;
	border-bottom: 1px solid #DDD;
}

.view-edistyksen-paivat .views-col {
	width: 100%;
	float: left;
}

.view-edistyksen-paivat .views-col .ep-kuva-osio {
	width: 29%;
	float: left;
	margin-right: 15px;
}

.view-edistyksen-paivat .views-col .ep-teksti-osio {
	width: 68%;
	float: left;
}

.view-edistyksen-paivat .views-col .ep-teksti-osio .views-field-title {
	font-size: 22pt;
}

.view-edistyksen-paivat .views-col .ep-teksti-osio .views-field-title a:hover{
	text-decoration: none;
}

.view-edistyksen-paivat .views-col .ep-teksti-osio .views-field-field-ep-teema {
	font-size: 18pt;
}

.view-edistyksen-paivat .views-col .ep-teksti-osio .views-field-field-ep-aika {
	margin-right: 15px;
}

/*Tekstin muotoilu, editori*/

.smaller {
	font-size: 12pt;	
}

/* Vuosikellion sivu*/

.block-views-blockvuosikello-block-1 {
}

.block-views-blockvuosikello-block-1 .views-row  {
	padding-bottom: 20px;
	margin-bottom: 30px;
	border-bottom: 1px solid #DDD;
}

.block-views-blockvuosikello-block-1 .views-row .views-field-title{
	margin-bottom: 15px;
	font-size: 22pt;
	font-weight: 700;
}

.block-views-blockvuosikello-block-1 .views-row .views-field-field-vk-sisalto{

}

@media only screen and (max-width: 1200px) {

.region-header-top  img{
	margin-left: 20px;
}

}

@media only screen and (max-width: 991px) {

.webform-submission-sahkopostilista-form .webform-element--title-inline label {
	float: left;
	width: 100%;
}

.webform-submission-sahkopostilista-form .webform-element--title-inline .select-wrapper {
	float: left;
	width: 100%;	
}

.webform-submission-sahkopostilista-form .webform-element--title-inline input {
	float: left;
	width: 100%;	
}

#navbar-collapse a{
	font-size: 14px;
}

}


@media only screen and (max-width: 767px) {


.navbar-wrapper ul {
	width: 100%;
	float: left;
}
	
.navbar-wrapper li {
	margin-left: 30px;
	width: 97%;
}

.navbar-wrapper a{
	background: none;
	z-index: 101;
}

#navbar-collapse ul li {
	color: #FFF;
}

ul.nav li.dropdown:hover > ul.dropdown-menu {
  display: none;
}

ul.nav li.dropdown .caret {
  display: none;
}
	
.path-frontpage .main-container .content {
	margin-left: 0px;	
	margin-right: 0px;
	float: left;
	width: 100%;
}

.path-frontpage .main-container .content .field--name-field-perus-sisalto {
	margin-top: 15px;
	padding: 30px 20px 30px 20px;
	text-align: center;
	font-size: 18pt;
	line-height: 20pt;
	background: rgb(229,229,229);
	background: linear-gradient(180deg, rgba(229,229,229,1) 60%, rgba(255,255,255,1) 100%);
}

#block-views-block-etusivun-laatikot-block-1 .row-1,
#block-views-block-etusivun-laatikot-block-1 .row-2 {
	display: inline;
}

#block-views-block-etusivun-laatikot-block-1 .views-row .views-col {
	width: 100%;
	float: left;
	position: relative;
	flex: none;
	margin-bottom: 25px;
}


.region-footer {
	float: left;
	width: 100%;
	display: block;
	padding-left: 20px;
	padding-top: 0px;
}

.region-footer #block-footer1 {
	width: 100%;
	float: left;
}

.region-footer #block-footer2 {
	width: 100%;
	float: left;
	margin-top: 30px;
}

.region-footer #block-footer3 {
	width: 100%;
	float: left;
	margin-top: 50px;
}	

.region-header-top  img{
	width: 90%;
}

}

@media only screen and (max-width: 640px) {
	
.view-ajankohtaista .views-row .ajankoht-kuva-osio {
	width: 100%;
	float: left;
	margin-right: 0px;
}

.view-ajankohtaista .views-row .ajankoht-teksti-osio {
	width: 100%;
	float: left;
}

.field--name-webform .webform-element--title-inline label {
	float: left;
	width: 100%;
}

.field--name-webform .webform-element--title-inline input {
	float: left;
	width: 100%;	
}

.field--name-webform .form-inline label {
	float: left;
	width: 100%;	
}

.field--name-webform .webform-element--title-inline .select-wrapper {
	float: left;
	width: 100%;	
}
	
}