html {
  overflow-y :scroll;
  font-size: 17px;
}

body {
  font-family: myFirstFont;
  /*font-family: Verdana, Helvetica, Arial, sans-serif;*/
  color: #2d2d2d;
  background: url(images/bg1.jpg);
  background-size: cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-position:center; 
}

#container {
  width: 980px;
  margin: auto;
  background-color:#ffffff;
  border-radius: 25px;
  /*box-shadow: 5px 5px 5px #a5a5a5;*/
}

h1 {
 font-size: 3rem;
 font-family: myFirstFont;
  /*font-family: Verdana, Helvetica, Arial, sans-serif;*/
  color: #2abad5;
 }

img.sellainen-logo {
  padding-left: 10px;
  padding-top: 10px;
}

h1.logotext {
  font-family: sellainen;
  font-size: 2em;
  padding-left: 30px;
  color: #000;
  font-weight: normal;
}
 
h2 {
  font-family: myFirstFont;
  /*font-family: Verdana, Helvetica, Arial, sans-serif;*/
  color: #ffffff;
  /* can be treated like a fallback */
  background-color: #2abad4;
  /* will be "on top", if browser supports it */
  background-image: linear-gradient(#2abad4, #2188c2);
  /* these will reset other properties, like background-position, but it does know what you mean */
  background: #2abad4;
  background: linear-gradient(#2abad4, #2188c2);
  font-size: 1.5em;
  border-radius: 10px;
  text-align: center;
  font-weight: normal;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  padding-right: 5px;  
  box-shadow: 0px 5px 5px #a5a5a5;
 }
 
h3 {
  font-family: myFirstFont;
  /*font-family: Verdana, Helvetica, Arial, sans-serif;*/
  color: #26a2cc;
  /*color: rgb(42,186,212);*/
  font-size: 1.4em;
}

a {
  text-decoration:    none;
  /*border: solid 1px;
  padding: 0px 10px 0px 10px;
  border-radius: 25px;*/
  
}
 
a.notfancy {
  text-decoration:    none;
  border: none;
  padding: 0px;
 }
 
a.headerlink {
text-decoration:    none;
color: #fff;
border: solid 1px;
padding: 0px 10px 0px 10px;
margin: 0px 5px 0px 5px;
border-radius: 25px;
}

a.headerlink:link {
  color:               #fff;
}

a.headerlink:visited {
  color:               #fff;
}

a.headerlink:hover {
  color:               #e1e1e1;
  text-decoration: none;
}

/*
a.bigsellainen:hover {
  text-decoration: none;
}
*/

a:link {
  color:               #26a2cc;
}

a:visited {
  color:               #26a2cc;
 }

a:hover {
  text-decoration: underline;
  color:               #26a2cc;
} 

a.tyo {
margin: 0px 0px 0px 25px;
}

a.ref {
}

a.phonelink {
text-decoration:    none;
color: #ffffff;
padding: 10px 0px 10px 0px;
}

header {
  background-image: url(images/whitewall2.png);
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
}

#logo {
  width: 580px;
  display: inline-block;
  vertical-align: top;
}

#logohenkilo {
  display: inline-block;
  vertical-align: top;
  
}

#logohenkilo img {
  width: 344px;
}

#links {
  font-family: myFirstFont;
  /*font-family: Verdana, Helvetica, Arial, sans-serif;*/
  color: #fff;
  font-size: 18px;
  padding-left:10px;
   /* can be treated like a fallback */
  background-color: #2abad4;
  /* will be "on top", if browser supports it */
  background-image: linear-gradient(#2abad4, #2188c2);
  /* these will reset other properties, like background-position, but it does know what you mean */
  background: #2abad4;
  background: linear-gradient(#2abad4, #2188c2);
  padding-left: 30px;
  padding-top: 7px;
  padding-bottom: 7px;
  width: auto;
  margin-top: -77px;
  margin-bottom: 40px;
  box-shadow: 0px 5px 5px #a5a5a5;
}

body.etusivu #links a.etusivu,
body.palvelut #links a.palvelut,
body.kumppanit #links a.kumppanit,
body.otayhteytta #links a.otayhteytta{
  color: #fff;
  border: none;
  /*border-bottom: solid 3px;*/
  pointer-events: none;
  cursor: default;
}

@font-face
{
font-family: sellainen;
src: url('MTCORSVA.ttf'),
     url('MTCORSVA.eot') format("opentype"); /* IE */
}

@font-face {
   font-family: myFirstFont;
   src: url(opensans_regular.ttf);
}

@font-face {
   font-family: myFirstFont;
   src: url(opensans_bold.ttf);
   font-weight: bold;
}

.ellainen{
  font-size: 1.2em;
  font-family: sellainen;
}

.s-ellainen{
  font-size: 1.4em;
  font-family: sellainen;
  color: rgb(42,186,212);
}

.ellainenpuff{
  font-size: 2em;
  font-family: sellainen;
}
img.allekirjoitus {
  height: 60px;
}

#tekstit{
}
  
#colmain1of2 {
  width: 29%;
  min-width: 250px;
  padding-left: 3%;
  border: solid;
  border-width: 0px;
  border-color: #fff;
  background-color: #fff;
  display: inline-block;
  vertical-align: top;
  
}

#colmain2of2 {
  width: 29%;
  min-width: 250px;
  padding-left: 3%;
  border: solid;
  border-width: 0px;
  border-color: #fff;
  background-color: #fff;
  display: inline-block; 
  vertical-align: top;
}

#colmain {
  width: 64%;
  padding-left: 3%;
  border: solid;
  border-width: 0px;
  border-color: #fff;
  background-color: #fff;
  display: inline-block;
  vertical-align: top;
}

#colside {
  width: 21%;
  min-width: 250px;
  margin-left: 3%;
  padding-left: 1%;
  padding-right: 1%;
  margin-bottom: 10px;
  border: solid;
  border-width: 1px;
  border-color: #c3c3c3;
  background-color: #f1f1f1;
  border-radius: 25px;
  display: inline-block;
  vertical-align: top;
}

footer {
  background-color: #f1f1f1;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  border-top: solid;
  border-color: #c3c3c3;
  border-width: 1px;
  height: auto;
  padding: 3%;
}

img.socialmedialink {
  height: 20px;
  border: none;
  float: right;
}

img.yhteyskuva {
  height: 10px;
  
}

.yhteys {
  padding-left: 10px;
}

a[href^=tel] {
 text-decoration: underline;
 border: none;
 padding: 0px;
}

img.reflogo {
  width: 130px;
  border: none;
}

img.yrittajat {
  height: 40px;
  padding: 20px;
  float: right;
 }

img.tulosta{
  height: 40px;
  padding: 20px 20px 0px 40px;
}

#sariyhteystiedot {
  border-top:  solid;
  border-color: #c3c3c3;
  border-width: 1px;
}

/*
.ellainenlogo{
  font-size: 6em;
  font-family: sellainen;
  color: #000;
 }

.s-ellainenlogo{
  font-size: 10em;
  font-family: sellainen;
  color: rgb(42,186,212);
  margin-left: 30px;
}
*/

img.empty {
  float: right;
  height: 250px;
}

a img {
  border:none; 
}

#breadcrumb {
  padding-left: 50px;
  padding-top: 5px;
  padding-bottom: 5px;

  margin-bottom: 10px;
  border-top: solid;
  border-color: #c3c3c3;
  border-top-width: 1px;
  /* can be treated like a fallback */
  background-color: #f1f1f1;
  /* will be "on top", if browser supports it */
  background-image: linear-gradient(#f1f1f1 50%, #c3c3c3);
  /* these will reset other properties, like background-position, but it does know what you mean */
  background: #f1f1f1;
  background: linear-gradient(#f1f1f1 50%, #c3c3c3);
}

.invisible{
  visibility: hidden;
}

.topborder {
  border-top: solid;
  border-color: #c3c3c3;
  border-width: 1px;
  padding-top: 10px;
}

#nav-icon {
  position: fixed;
  top: 10px;
  right: 10px;
}

img.column{
  max-width: 100%;
  padding: 5px;
  border: solid 1px #CCC;
    -moz-box-shadow: 1px 1px 5px #999;
    -webkit-box-shadow: 1px 1px 5px #999;
        box-shadow: 1px 1px 5px #999;
}

img.menu-icon {
  display: none;
  width: 60px;
  height: 40px;
  position: fixed;
  top: 10px;
  right: 10px;
}

#phonemenu {
  display: none;
  position: fixed;
  top: 0px;
  right: 10px;
  background-color: #2abad4;
  /* will be "on top", if browser supports it */
  background-image: linear-gradient(#2abad4, #2188c2);
  /* these will reset other properties, like background-position, but it does know what you mean */
  background: #2abad4;
  background: linear-gradient(#2abad4, #2188c2);
  list-style-type: none;
  width: 90%;
  font-size: 1.5em;
  line-height: 2;
  border-radius: 10px;
  text-align: center;
  font-weight: normal;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  padding-right: 5px;  
  box-shadow: 0px 5px 5px #a5a5a5;
}

#phonemenu:target {
 display: block;
}

li.bg-gray {
  background-color: #979797;
  border-radius: 25px;
}

@media (max-width: 640px) {
  #container { width: 100%; }
  #logo { width: 100%; }
  #logohenkilo { width: 100%; }
  #logo img { width: 94%; padding: 3%;}
  #logohenkilo img { width: 100%; }
  #colmain1of2 { width: 94%; }
  #colmain2of2 { width: 94%; }
  #colmain { width: 94%; }
  #colside { width: 92%; }
  #links {height: 30px;}
  #links a {display: none;}
  img.menu-icon {display: block; }
  /*#logohenkilo {display: none;}*/
  #logohenkilo {display: none;}
  #links {display:none;}
  body.etusivu #logohenkilo {display: block;}
  body.etusivu #links {display: block;}
  img.column { width: 94%; padding: 3%;}
}

.footer-ellainen{
  font-size: 1.2em;
  font-family: sellainen;
  text-align: center;
}