/* Sisällön tyylit */
a:link, a:visited, .email {
  color:rgb(204, 0, 0);
  text-decoration:none;
}

a:hover {
  color:#000000;
  text-decoration:none;
}

a.tele:link, a.tele:visited {
  color:#000000;
  text-decoration:none;
  cursor: default;
}

a.tele:hover {
  color:#000000;
  text-decoration:none;
  opacity: 0.9;
}



a.emailbutton:link, a.emailbutton:visited {
  font-size: 15px;
  color: #a3a3a3;
  /*text-shadow: 0px 0px 3px #111;*/
  
  text-decoration:none;



}

a.emailbutton:hover {
  color:#CCC;
  text-decoration:none;
opacity: 0.9;
}



.emailbutton {
  display: block;
 
gap: 0px;
  align-items: center;
  justify-content: center;
  flex-direction:column;




margin: 0px;
padding: 0px;
margin-top: 20px;
/*background-image: url('../images/emailbutton.png');
background-repeat: no-repeat;
background-position: center center;*/

border-radius: 2px;
background-color: transparent;
text-align: center;

-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
transition: all .1s ease-in-out; 


}
.emailbutton:hover {
/*background-image: url('../images/emailbutton.png');
background-color: transparent;*/
}



a.tukibutton:link, a.tukibutton:visited {
  font-size: 15px;
  color: #a3a3a3;
  /*text-shadow: 0px 0px 3px #111;*/
  
  text-decoration:none;

}

a.tukibutton:hover {
  color:#CCC;
  text-decoration:none;
opacity: 0.9;
}



.tukibutton {
  display: block;
  
gap: 0px;
  align-items: center;
  justify-content: center;
  flex-direction:column;


margin: 0px;
padding-right: 10px;
margin-top: 20px;
/*background-image: url('../images/tukibutton.png');
background-repeat: no-repeat;
background-position: center center;*/
/*border: 1px solid #700a0a;
border-radius: 2px;
background-color: #af2120;*/
text-align: center;

-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
transition: all .1s ease-in-out; 

}
.tukibutton:hover {
/*background-image: url('../images/tukibutton.png');*/
/*background-color: #FFF;*/
opacity: 0.9;
}





a.titlebutton:link, a.titlebutton:visited, .sidebar a.titlebutton:link, .sidebar a.titlebutton:visited {
  font-size: 15px;
  color: #fff;
  text-shadow: 0px 0px 3px #111;
  
  text-decoration:none;

}

a.titlebutton:hover, .sidebar a.titlebutton:hover {
  color:#fff;
  text-decoration:none;

}



.titlebutton, .sidebar .titlebuttontitlebutton {
  display: flex;
  
gap: 5px;
  align-items: center;
  justify-content: center;
  flex-direction:column;
line-height: 23px;
height: 60px;
margin: 10px;
padding: 10px;
margin-top: 20px;
background-image: url('../images/sliderbg.png');
background-repeat: repeat-x;
background-position: center center;
border: 1px solid #700a0a;
border-radius: 2px;
background-color: #af2120;
text-align: center;

-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
transition: all .1s ease-in-out; 

}
.titlebutton:hover, .sidebar.titlebutton:hover {
background-image: url('../images/sliderbg2.png');
background-color: #FFF;
}



a.bigbutton:link, a.bigbutton:visited, .sidebar a.bigbutton:link, .sidebar a.bigbutton:visited {
  font-size: 19px;
  color: #fff;
  text-shadow: 0px 0px 3px #111;

  text-decoration:none;

}

a.bigbutton:hover, .sidebar a.bigbutton:hover {
  color:#fff;
  text-decoration:none;

}



.bigbutton, .sidebar .bigbutton {
  display: flex;
  
gap: 5px;
  align-items: center;
  justify-content: center;
  flex-direction:column;
line-height: 23px;
width: 210px;
height: 100px;
background-image: url('../images/sliderbg.png');
background-repeat: repeat-x;
background-position: center center;
border: 1px solid #700a0a;
border-radius: 2px;
background-color: #af2120;
text-align: center;

-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
transition: all .1s ease-in-out; 

margin-left: auto;
margin-right: auto;
}
.bigbutton:hover, .sidebar.bigbutton:hover {
background-image: url('../images/sliderbg2.png');
background-color: #FFF;
}

/*.footerdiv a:link, .footerdiv a:visited  {
    color: #000;
}*/
.trail a:link, .trail a:visited  {
    color: #a09292;
}

.trail {
    color: #a09292;
    cursor: default;
    display: block;

    font-size: 90%;

    margin: 0px 0 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}


h1 {
  color: rgb(204, 0, 0);
    cursor: default;
    display: inline;

    font-size: 160%;
    font-weight: bold;
    margin: 20px 0 0;
}
h2 {
  color: #000;
  font-size: 120%;
  font-weight: bold;

line-height: 25px;
  margin: 0;
  padding: 0;
text-transform: uppercase;
  display: inline;
}
h3 {
  color: #618A33;
  font-size: 100%;
  font-weight: normal;
line-height: 25px;
  margin: 0;
  padding: 0;

  display: inline;
}

hr { border: 0; height: 2px; background: #CC0000; background-image: linear-gradient(to right, #CC0000, transparent, transparent); }



#back-to-top {
    position: fixed;
    bottom: 15px;
    right: 15px;
    z-index: 9999;
    width: 32px;
    height: 32px;
    text-align: center;
    line-height: 30px;
    background-color: #D72128;
    color: #ffffff;
    font-size: 15px;
    cursor: pointer;
    border: 0;
    border-radius: 2px;
    text-decoration: none;
    transition: opacity 0.2s ease-out;
    opacity: 0;
    
    border: 1px solid #ffffff;
}
#back-to-top:hover {
    background: #99CA3A;
}
#back-to-top.show {
    opacity: 0.9;
}


.email_login {

background-color: #fff;

padding: 2px;

}

.bigbox {


background-color: transparent;

padding: 20px;
}


body, td { 										
   color: rgb(47, 47, 47);
font-family: 'Poppins', sans-serif;
    font-size: 15px;
 
    font-weight: normal;
}

/* Rakennetyylit */

html {
min-height: 100%;
height: auto;
overflow-y: scroll;
}

body {
margin-top:0px;
margin-left:0px;
margin-right:0px;
margin-bottom:40px;

background-color:#FFF;
 /* background-image: url("../images/bodybg.jpg");
  background-repeat:  repeat;
  background-position: center center;


  background-image: url("../images/bg.jpg");
  background-repeat:  no-repeat;
  background-position: bottom center;
  background-attachment: fixed; 
 -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;*/
}


html {
  height:100%;
}

body {
  margin:0;
}

.bg {
  animation:slide 12s ease-in-out 4 alternate;
  background-image: linear-gradient(-60deg, #CCC 50%, #FFF 50%);
  bottom:0;
  left:-50%;
  opacity:.5;
  position:fixed;
  right:-50%;
  top:0;
  z-index:-1;
}

.bg2 {
  animation-direction:alternate-reverse;
  animation-duration:4s;
}

.bg3 {
  animation-duration:10s;
}



.bgc {
  background-image: linear-gradient(-60deg, #CCC 28.6%, #FFF 0%);
  bottom:0;
  left:-50%;
  opacity:.5;
  position:fixed;
  right:-50%;
  top:0;
  z-index:-1;
}

.bga {
  background-image: linear-gradient(-60deg, #CCC 32.2%, #FFF 0%);
  bottom:0;
  left:-50%;
  opacity:.5;
  position:fixed;
  right:-50%;
  top:0;
  z-index:-1;
}

.bgb {
  background-image: linear-gradient(-60deg, #CCC 41.5%, #FFF 0%);
  bottom:0;
  left:-50%;
  opacity:.5;
  position:fixed;
  right:-50%;
  top:0;
  z-index:-1;
}





@keyframes slide {
  0% {
    transform:translateX(-25%);
  }
  100% {
    transform:translateX(25%);
  }
}


.paused {
   -ms-animation-play-state:paused;
   -o-animation-play-state:paused;
   -moz-animation-play-state:paused;
   -webkit-animation-play-state:paused;
  animation-play-state: paused;
}


#bodybg {
    width: 100%;
    position: absolute;
    top:0vh;
    
}

.context h1{
    text-align: center;
    color: #fff;
    font-size: 50px;
}


*{
    margin: 0px;
    padding: 0px;
}




.context {
    width: 100%;
    position: absolute;
    top:50vh;
    
}

.context h1{
    text-align: center;
    color: #fff;
    font-size: 50px;
}





.toparea {

margin-left: auto;
margin-right: auto;

background-color: transparent;
height: 160px;

background-repeat: no-repeat;
background-position: center bottom;

/*
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
*/
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;

}

.outer {
display: table;
width: 100%;

}
.main_table {
display: table-cell;
width: 100%;

}

.bgtable {

margin-left: auto;
margin-right: auto;

}



.toppic {
/*background: #ffffff;
min-height: 65px;

margin-left: auto;
margin-right: auto;

-moz-box-shadow: 0px 0px 5px rgba(00, 00, 00, 0.5);
-webkit-box-shadow: 0px 0px 5px rgba(00, 00, 00, 0.5);
box-shadow: 0px 0px 5px rgba(00, 00, 00, 0.5);
*/
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}

.mainbg {
background-color: transparent;
padding: 0px;
min-height: 320px;
background-image: url();
background-repeat: repeat;
background-color: transparent;
border: 0px solid #ffffff;/**/
border-top: 0px;
}

.main {



/*background-image: url('../images/mainbg_border.png');*/
background-repeat: repeat-x;


font-size: 110%;

-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}



.content {
background-color: transparent;


line-height: 25px;
}

.sidebar {


-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}

.main .content {

min-height: 350px;
}

.main_header {
display: block;

padding-top: 0px;
padding-left: 0px;
padding-bottom: 20px;
}




.main_header h1 {
color: #469600;
font-weight: bold;
}

#logotext {
margin-top: 0px;
padding-right: 60px;

}



.footerdiv {

background-color: transparent;
border-top: 0px solid #578425;
font-weight: normal;
text-align: center;
padding-top: 10px;
color: #000000;

}

.mainbg li {
margin-left: 30px;
}

.bxslider li {
margin-left: 0px;
}

/* Taulukkorakenne */





.sidebar a:link, .sidebar a:visited {
font-size: 11px;
color: rgb(204, 0, 0);
text-decoration:none;
}

.sidebar a:hover {
color:#000000;
text-decoration:none;
}

.main_50, .main_55, 
.main_45 {
text-align: left;
vertical-align: top;
}

.main_50
{
display: block;
width: 100%;

}

.main_55, 
.main_45
{
padding-bottom: 20px;

}



/* Navigointi */

#navbg {
width: 100%;
z-index: 99;


}


.navi {
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
transition: none;
-webkit-transform-style: preserve-3d;
overflow: hidden;
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;


width: 100%;
max-height: 0; 
z-index: 99;



}

.navi.opacity {
opacity: 0; 
}

.navi.navi-show {
max-height: 2000px;
opacity: 1;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
transition: all .1s ease-in-out; 
}


.navi li a {
position: relative;
display: block;
padding: 10px;
background-image: url("../images/toparea.png");
background-position: center bottom;

font-family: 'PT Sans Narrow', sans-serif;


z-index: 2;

text-align: center;
color: #666;
background-color: transparent;
/*
background-image: url('../images/mainbg.png');
background-repeat: repeat;

  border-left: 1px solid #ABABAB;
  border-top: 1px solid #ABABAB;
  border-bottom: 1px solid #ABABAB;
*/

text-decoration: none;
font-size: 25px;

font-weight: normal;


}

.navi li a:hover {
color: #666;
background-color: transparent;
background-image: url();

/*
  border-left: 1px solid #386D18;
  border-top: 1px solid #386D18;
  border-bottom: 1px solid #386D18;*/
  
  
}


.navi li a#active {
color: #000;

background-color: transparent;


background-image: url();
/*

  border-left: 1px solid #386D18;
  border-top: 1px solid #386D18;
  border-bottom: 1px solid #386D18;*/
}

.navi li {
font-size: 100%;

overflow: hidden;
margin: 0px;
}






/* Lomaketyylit */
input, select, textarea {
font-size:13px;
font-weight:normal;
color:#000000;
background-color:#ffffff;

border: solid 1px #ccc;

padding: 7px;
margin-bottom: 10px;
}

.txtinput, .selekti {		  
max-width: 350px;     
width:90%;

}

.tarea  { 		               
width:100%;
max-width: 450px;
height:120px;
padding: 7px;
}


input[type=text], textarea {
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;

}

input[type=text]:focus, textarea:focus {
box-shadow: 0 0 5px #ffd614;
border: 1px solid #ffd614;

}


.potikka  {		               


font-family: Arial, sans-serif;
color:#ffffff;
font-weight:normal;
font-size: 19px;
background-color:#B82026;

padding: 10px;
padding-left: 55px;
padding-right: 55px;

border-top: 2px solid #BA2127;
border-left: 2px solid #BA2127;
border-right: 2px solid #770f13;
border-bottom: 2px solid #770f13;
-moz-border-radius: 2px;
border-radius: 2px;


}



a.potikka:link, a.potikka:visited, .potikka a:link, .potikka a:visited {
color: #ffffff;
}

a.potikka:hover, .potikka a:hover {
color:#ffffff;
text-decoration:none;
opacity: 0.9;
}


/* Muut */


.mainbg img {
max-width: 320px;
}


.icons {
width: 250px;

display: block;
text-align: left;
white-space: nowrap;
}


.icons a {
padding-right: 0px;
}


label {
display: inline-block;
width: 5em;
}

/************************/

.pohjat {
 font-family: 'BenchNine', sans-serif;
 font-size: 20px;

 }
 
.pohjat {
border-collapse: collapse;
width: 90%;

display: table;
border-spacing: 0px;

}

.pohjat .main-image {
width: 100%;

}



.pohjat main_50 {
margin: 0px;
padding: 0px;
}

.pohjat .thumbnails img {

}

.pohjat .titletext {

color: #BC3333;
font-size: 27px;
z-index: 99;
font-weight: bold;
position: absolute;
}


.placeholder {
width: 370px;
height: 293px;
}


.custom {
display: none;
position: absolute;
left:0px;
z-index:97;

}

.main-image {
display: block;

width: 370px;
height: 293px;
position: relative;
}

.mainimg {
display: block;
position: absolute;
z-index: 1;
left:0px;
}

.thumbnails img {
max-width: 100%;
padding: 4px;
border: 1px solid #ccc;
height: auto;
background: #fff;
box-shadow: 1px 1px 7px rgba(0,0,0,0.1);

border-radius: 5px;
}

.thumbnails ul {
list-style: none;
margin-bottom: 0.5em;
}

.thumbnails li {
display: inline;
margin: 0 5px 0 0;
}

label {
margin-left:5px;;
}