/*for screens between 750px and 1000px*/

/*bootstrap-overwriting*/

/*no 15px padding on the sides*/
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  padding-left: 0px;
  padding-right: 0px;
}

/*other*/

/*content*/
/*a bit of space at the bottom before the footer*/
#content{
	margin-bottom: 20px;
}


/*top navigations*/

/*top navigations on their own lines*/
#site-navigation{
	clear: both;
}

/*space between the resizer buttons*/
/*#resizer li{
	padding-left: 30px
}*/

/*...but not before the first one*/
/*#resizer li:first-child{
	padding-left: 0px;
}*/

#resizer{
	display: none;
}

/*no space before the first ones*/
#language-home li:first-child, #site-navigation li:first-child{
	padding-left: 0px;
}

/*a bit of vertical space after each line, left side aligned with logo*/
#language-home, #resizer, #site-navigation{
	margin-bottom: 30px;
	margin-left: 16px;
}


/*language versions links*/

#language-versions{
	text-align: right;
	padding-right: 16px;
	padding-top: 16px;
}

#language-versions p, #language-versions a{
	padding-bottom: 10px;
	padding-left: 20px;
}

/*main navigation*/

/*spacing*/
#main-navigation ul li a{
	padding-left: 16px;
	padding-top: 10px;
	padding-bottom: 10px;
	/*border-top: 1px solid #d7e9ef;*/
}

/*breadcrumbs*/

/*otherwise as in big size, but more spacing to match left indent elsewhere*/
#breadcrumbs {
    clear: both;
    display: inline-block;
    font-style: italic;
    padding: 16px;
}

/* alert box */
#alert-inner {
    max-width: 70%;
    margin-left: auto;
    margin-right: auto;
}

#herokuva img {
	max-width: 100%;
}

#herokuva #slogan {
    font-size: 1.8rem;
    line-height: 2.2rem;
    font-weight: 600;
    padding: 15px 20px;
    max-width: 16rem;
    position: absolute;
    top: 3rem;
    left: 4rem;
}

/*newest stats*/

/*align with logo*/

#new-stats h1 {
	padding-left: 2rem;
	padding-right: 2rem;
}

#new-stats li{
	padding-left: 2rem;
	padding-right: 2rem;
	margin-top: 10px;
}

#new-stats li {
    width: 100%;
    display: grid;
    grid-template-columns: 10% 90%;
    grid-auto-flow: row;
}

#new-stats.en li {
	grid-template-columns: 12% 88%;
}

#new-stats .stat-date, #new-stats .tilastopvm {
    display: block;
    margin-right: 20px;
    text-align: center;
	max-height: 1.5rem;
	padding-left: 3px;
	padding-right: 5px;
}

#new-stats a {
    display: block;
}

#statslinks {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.link-forward-left1, .link-forward-right1 {
    display: block;
    margin-bottom: 25px;
    margin-top: 20px;
}

.link-forward-left1 {
    margin-left: 4%;
}

.link-forward-right1 {
    text-align: right;
    margin-right: 4%;
}

/*links at the bottom placed more sensibly, and a bit of space*/
.link-forward-left {
    float: left;
    margin-left: 1em;
    margin-top: 1.5em;
}

.link-forward-right {
    float: right;
    margin-right: 1em;
    margin-top: 1.5em;
}

#calendar-ad {
	padding-left: 1rem;
	padding-right: 1rem;
	padding-top: 1rem;
	padding-bottom: 1rem;
	margin-left: 2rem;
	margin-right: 2rem;
	margin-bottom: 2rem;
	margin-top: 2rem;
	display: grid;
	grid-template-columns: 25% 72%;
	grid-auto-flow: row;
	column-gap: 3%;
}

#calendar-ad svg {
	font-size: 6rem;
	align-self: center;
	justify-self: center;
}

#front-news article, #morenews {
	padding-left: 1rem;
	padding-right: 1rem;
	padding-top: 1rem;
	padding-bottom: 1rem;
}

#front-news {
	padding-bottom: 2rem;
}

#stats-and-news {
    display: grid;
    grid-template-rows: auto auto;
    row-gap: 2%;
    justify-items: stretch;
    align-items: stretch;
	grid-auto-flow: column;
	width: 100%;
	padding-top: 2rem;
}

#banners-and-keys {
    display: grid;
    grid-template-rows: auto auto;
    row-gap: 20px;
    justify-items: center;
    align-items: stretch;
}

#banners {
	margin-top: 2rem;
	margin-left: 2rem;
	margin-right: 2rem;
}

#banners-inner {
	display: grid;
	grid-template-columns: 32% 32% 32%;
	column-gap: 2%;
	justify-items: stretch;
	align-items: stretch;
	grid-auto-flow: row;
}

.banner-img img {
	margin-left: auto;
	margin-right: auto;
	display: block;
}

.banner-text a {
	min-height: 5rem;
}

/*key numbers*/

#key-numbers{
	padding-top: 2rem;
	padding-bottom: 2rem;
	padding-left: 2rem;
	padding-right: 2rem;
	width: 100%;
}

/*overwrite h2 padding to align with everything else, the padding in the key numbers box is enough*/
#key-numbers h2{
	padding-left: 0;
}

#key-numbers ul {
    display: grid;
    grid-template-columns: 49% 49%;
    grid-template-rows: auto auto;
    column-gap: 0.5rem;
    row-gap: 0.5rem;
    grid-auto-flow: row;
}

#key-numbers li:nth-child(1), #key-numbers li:nth-child(3) {
	border-right: 1px solid #1A56EC;
}

.key {
	display: block;
    min-height: 3.5rem;
}

.key-value {
	display: block;
    text-align: right;
}

#key-numbers .key-time {
    display: block;
}

/* database ad */
#database-ad {
	grid-template-rows: auto auto;
    grid-auto-flow: row;
	padding-left: 2rem;
	padding-right: 2rem;
	padding-top: 2rem;
	padding-bottom: 2rem;
	margin-bottom: 2rem;
}

#database-ad #database-icon svg {
    padding-right: 40%;
    width: 60%;
    padding-top: 0.8rem;
}

/* nostobanneri */
#top-info .nostobanneri-text {
	padding-left: 2rem;
	padding-right: 2rem;
	padding-top: 2rem;
	padding-bottom: 1rem;
}

#top-info .nostobanneri-img {
	display: none;
}


/*service buttons*/

#service-buttons ul {
	display: grid;
	grid-template-columns: 49% 49%;
	grid-template-rows: auto auto;
	grid-auto-flow: row;
	column-gap: 1rem;
	row-gap: 1rem;
}

#service-buttons, #service-buttons-external{
	padding-top: 2rem;
	padding-left: 10rem;
	padding-right: 10rem;
	padding-bottom: 2rem;
}

#service-buttons li a img, #service-buttons-external li a img {
	padding-bottom: 20px;
	padding-left: 20px;
	padding-right: 20px;
}

/*footer*/

#site-information li{
	display: inline;
}

#site-information, #change-styleversion {
	text-align: center;
	padding-bottom: 20px;
}


/*outside the front page*/

/*left navigation*/

/*hiding the left navigation in tablet*/
#mobile-toggle-left {
	/*position: relative;
	top: 32px;
	z-index: 5; *//*make sure it's in front of the navigation, not behind it*/
	display: block;
	/*border-left: 1px solid #bcbcbc;*/
	background-color: #f2ecea;
	border: none;
	text-align: left;
	width: 100%;
}

#mobile-toggle-left img {
	margin-right: 10px;
}


/* A bit of cheating to make it look like the toggle button is inside the menu while it's not */
#mobile-hider-left div{
	background-color: #f2ecea;
}

#mobile-hider-left {
	background-color: #ffffff;
}

#left-navigation p, #left-navigation div {
    line-height: 32px;
    padding: 0.15em 0.2em 0.15em 16px;
    word-wrap: break-word;
}

#left-navigation h2{

	padding: 0.3em 1.2em 2em 1.6em;
	line-height: 32px;
}

#left-navigation li{
    line-height: 32px;
    padding: 0.15em 0.2em 0.15em 1.8em;
    word-wrap: break-word;
}

#left-navigation .section_name{
	line-height: 32px;
}

/*a bit of space inside the content box*/
/* exception in tablet: no space on top, because the mobile hider (also white) sits on top */
#content{
	padding-top: 0;
	padding-bottom: 1rem;
	padding-left: 1.5rem;
	padding-right: 0.7rem;
}

/*right navigation*/
#right h2 {
    line-height: 26px;
    padding: 0 1em;
}

#right {
    /*background-color: #ffffff;*/
    box-sizing: border-box;
    float: left;
    margin-bottom: 20px;
    /*max-width: 170px;*/
    padding: 0;
}

#right p {
    padding: 0.3em 1em;
}

#right ul{
	list-style: none;
}

#right li{
	padding: 0.3em 1em;
}

#sivupalkki_oikea{
	width: 90%;
	float: right;
}

/*social media buttons*/

/*a thin line before the buttons*/
div#some, div#social-media{
	border-top: 1px solid #dcdcdc;
}

div#social-media {
    padding-top: 10px;
}

/*size*/
#some svg.icon {
	width: 40px;
	height: 40px;
}

#left-navigation li, #left-navigation div{
	display: none;
}

/* uusi evästemodaali */
#cookie-modal {
    width: 100%;
}

#button-grid {
    width: 80%;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-auto-flow: column;
	column-gap: 1rem;
}

.cookie-text, .cookie-text2 {
    display: block;
    max-width: 80%;
}

/* special case: error message for the chat window */
body > div.no-full-cookie-consent {
	max-width: 30%;
}