@import url(https://fonts.googleapis.com/css?family=Asap+Condensed);

/* Templaten rakenne */
html, body {height: 100%;}
body {background-color:#ffffff; background-image: url(../images/background.jpg);background-position:top center;background-repeat:no-repeat;background-attachment:fixed;background-size:cover; text-align: center; height: 100%; margin: 0; padding: 0;}
#pagewrap {width: 1180px; margin: 0 auto;}
#header {width: 100%; margin: 0; padding: 0; text-align: left; overflow: hidden;}
#contactdiv {width:50%; height: auto; text-align: right; float: right; position: relative;height:auto;}
#logodiv{width: 50%; margin:0; padding:0; text-align:left;overflow:hidden;float:left;}
#menu {width:100%; margin-left: auto; margin-right: auto; position: relative; height: auto; z-index: 10; background-color:#710069;}
#slogan {width:100%; margin: 0 auto; padding: 0; text-align: center; overflow:hidden; background-color: #e3cce1;}
#banner {width: 100%; margin: 0 auto; padding: 0; text-align: center; overflow: hidden; position: relative;}
#contentwrap {width: 100%; margin: 0 auto; padding: 0; text-align: center; overflow: hidden; position: relative;background-color:#ffffff;}
#maintextcontent {width: 100%; margin: 0 auto; position: relative; text-align: left; overflow: hidden;}
#extras {width: 100%; margin: 0 auto; position: relative; text-align: center; overflow: hidden;}
#left {width:33%; position: relative;float: left;}
* html #left {height: 100%;}
#bottomleft {width:33%; float: left; position: relative;}
* html #bottomleft {height: 100%;}
#right {width:67.0%; float:right; position: relative;}
* html #right {height: 100%;}
#some {width:100%; margin: 0 auto; padding: 0; text-align: center; overflow:hidden; background-color: #e3cce1;}
#footer {width:100%; padding-top: 25px; padding-bottom: 25px; margin:0 auto; clear: both; text-align: center;}

/* Joomlan tekstisisällön tyylit */
p {font-family: Asap Condensed,Verdana,Trebuchet MS,Arial,Helvetica,sans-serif; font-size: 13pt; line-height: 18pt; font-weight: normal; padding-left: 35px; padding-right: 35px; color:#000000;text-align: left;}
#logodiv p{padding-left: 0px !important; padding-right: 0px; font-size: 0pt;line-height: 0pt;}
#banner p{padding-left: 0px !important; padding-right: 0px; font-size: 0pt;line-height: 0pt;}
#footer p{font-family: Asap Condensed, Verdana,Trebuchet MS,Arial,Helvetica,sans-serif; font-size: 13pt; line-height:17pt; color:#ffffff !important; text-align: center; padding-left: 35px; padding-right: 35px; margin: 0;} 
#footer a{font-family: Asap Condensed, Verdana,Trebuchet MS,Arial,Helvetica,sans-serif; font-size: 13pt; line-height: 17pt; font-weight: bold; color:#710069; text-decoration: none;}
#footer a:hover{text-decoration: underline;}
h1 {font-family: Asap Condensed,Verdana,Trebuchet MS,Arial,Helvetica,sans-serif; font-size: 27pt; line-height: 29pt; padding-left: 35px; padding-right: 35px; color:#710069;text-align: left;}
#slogan h1 {color: #710069; font-size: 50pt !important; line-height: 52pt !important;text-align: center !important;font-weight: bold;}
h2 {font-family: Asap Condensed,Verdana,Trebuchet MS,Arial,Helvetica,sans-serif; font-size: 24pt; line-height: 26pt; font-weight: bold; padding-left: 35px; padding-right: 35px; color:#710069;text-align: left;}
h3 {font-family: Asap Condensed,Verdana,Trebuchet MS,Arial,Helvetica,sans-serif; font-size: 21pt; line-height: 23pt; font-weight: normal; padding-left: 35px; padding-right: 35px; color:#710069;text-align: left;}
h4 {font-family: Asap Condensed,Verdana,Trebuchet MS,Arial,Helvetica,sans-serif; font-size: 18pt; line-height: 20pt; font-weight: bold; padding-left: 35px; padding-right: 35px; color:#710069;text-align: left;}
a {font-family: Asap Condensed, Verdana,Trebuchet MS,Arial,Helvetica,sans-serif; font-size: 13pt; line-height: 18pt; font-weight: bold; Text-decoration: none; color:#710069;}
a:hover {text-decoration: underline;}
ul {font-family: Asap Condensed,Verdana,Trebuchet MS,Arial,Helvetica,sans-serif; font-size: 13pt; line-height: 18pt; font-weight: normal;margin-left: 10px; color:#000000;text-align: left;}
ul li::marker{padding-left: 35px;font-size: 13pt;}
ul p{padding-left: 10px !important;}

/* Kuvat skaalautumaan */
img {max-width: 100%; height: auto;}

/* Blogin navigointia */
.pagination li {display: inline;padding-right: 7px;padding-left: 7px;}  
.pagination ul {list-style-type: none;}  
.pagenav {font-family: Asap Condensed,Arial,Helvetica,sans-serif;font-size: 12pt;line-height: 12pt;font-weight: bold;color:#000000;}
a.pagenav {text-decoration: none;color: #710069;}
.article_separator{display:none;}

/* Lomaketta viritetty */
.bfQuickMode .controls .control-label { width: 35%; min-width: 110px; vertical-align: text-top; font-family: Asap Condensed; margin-left: 35px !important; margin-top: 10px !important; display: block; margin-bottom: 10px; text-align: left;}
.bfQuickMode input[type="text"], .bfQuickMode textarea, .bfQuickMode select, .bfQuickMode .uneditable-input {margin-left: 35px !important; margin-right: 35px !important; float: left;margin-bottom: 10px;}
.bfQuickMode .bfLabelLeft input, .bfQuickMode .bfLabelLeft textarea, .bfQuickMode .bfLabelLeft select, .bfQuickMode .bfLabelLeft button {width: auto; float: left;}  
.bfQuickMode .bfCancelButton {float: left; margin-top: 20px;}
.bfQuickMode .bfNextButton, .bfQuickMode .bfSubmitButton, .bfQuickMode .bfCancelButton {float: left; margin-top: 20px; font-family: Asap Condensed; font-size: 11pt; margin-left: 35px; margin-bottom: 20px;}

/* Taulukko edes vähän responsiiviseksi */
.taulukko {border-width: 0px; border-color: none; border-style: solid; border-collapse: collapse; margin-left: 30px; margin-right: 30px; padding: 0 !important; width: 94%; table-layout: fixed; max-width: 94%; border-spacing: 20px; font-size: 12pt !important; font-family: Asap Condensed !important;}
.taulukko p{padding-left: 20px !important;}

/************************************************************************************
Mobiililaitteet pelittämään oikein
*************************************************************************************/
/* for 990px or less */
@media screen and (max-width: 990px) {

#pagewrap {width: 100%;}
#header {width: 100%;}
#contactdiv{width:100%;padding-left:0;padding-right:0;}
#logodiv{width:100%;padding-left:0;padding-right:0;clear:both;width:auto;float:none;}
#menu {width: 100%;}
#slogan {width: 100%;}
#banner{width: 100%;}
#contentwrap {width: 100%; margin: 0 auto;display: flex; flex-wrap:wrap; justify-content: space-between;} #maintextcontent {width: 100%;}  
#extras {width: 100%;}
#left {width: 100%; padding-left: 0px; padding-right: 0px;order: 2;}
#bottomleft {width: 100%; padding-left: 0px; padding-right: 0px;order:3;}
#bottomleft p{padding-left: 0px !important; padding-right: 0px !important; text-align: center !important;}
#right {width:100%; padding-left: 0px; padding-right: 0px; float: none; clear: both;order:1;}
#some {width: 100%;order: 4;}
#footer{width: 100%;}
}

/* mobilemenuck menuvalitsin kuntoon */  
@media screen and (max-width: 900px) {
#maximenuck113 .maximenumobiletogglericonck {display: block !important;font-size: 33px !important;text-align: right !important;padding-top: 10px !important; color: #ffffff !important;}} 

/* for 854 px or less */
@media screen and (min-width: 320px) and (max-width: 854px) {
#contactdiv p {text-align:center !important;padding-left: 0px !important; padding-right: 0px !important;}
#logodiv p {text-align:center !important;padding-left: 0px !important; padding-right: 0px !important;}
  #logodiv img{margin-left: 0px !important; margin-right: 0px !important;}  
#left p{text-align: center !important;}
}
   
/* for 750px or less */
@media screen and (min-width: 320px) and (max-width: 750px) {

/* for 460px or less */
@media screen and (max-width: 480px) {
#contactdiv p{text-align:center !important;}
#slogan h1 {font-size: 31pt !important; line-height: 33pt !important;}  
}

/* for 320px or less */
@media screen and (max-width: 320px) {
#slogan h1 {font-size: 31pt !important; line-height: 33pt !important;}
}