/* Media Queries
*********************************************/
/* Retina */
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (max--moz-device-pixel-ratio: 2) {
  
}

/* Landscape phones and down */
@media (max-width: 480px) {

  /* pieni logo */
  #logoPieniLogo {
    left: 0px;
    top: 0px;
    padding: 10px 0 0 10px;
  }
  #logoPieniLogo img {
  }
  #logoPieniPuh {
    position: relative;
    left: 10px;
    top: 0px;
  }
  #logoPieniPuh a {
    font-size: 26px;
    color: #ffffff;
  }
  /* #### Vaihtuvat kuvat #### */

  #vaihtuvatKuvat {
    height: 92px;
  }
  #vaihtuvatKuvatInner {
    height: 92px;
  }
  /* vaihtuvat kuvat karuselli */
  #vaihtuvatKuvat #wrapper {
    height: 92px;
  }
  #vaihtuvatKuvat #carousel img {
    width: 320px;
  }
  #vaihtuvatKuvat #prev, #vaihtuvatKuvat #next {
    height: 92px;
  }

  #vaihtuvatKuvat #prev {
    left: -284px;
  }
  #vaihtuvatKuvat #next {
    right: -284px;
  }
  #vaihtuvatKuvat #pager {
    margin-left: -40px;
  }
/* vaihtuvat tekstit */
#vaihtuvatTekstit {
  width: 100%;
  margin: 0 auto;
  min-height: 50px;
  background-color: transparent;
}
#vaihtuvatTekstitInner {
  position: relative;
  top: 0px;
}
#vaihtuvatTekstit .carousel-inner {
  overflow: visible;
}
#vaihtuvatTekstit .carousel-caption {
  position: relative;
  top: 0px;
  left: 0px;
  right: 15%;
  text-align: center;
}
#vaihtuvatTekstit .carousel-caption p {
  width: 100%;
  display: block;
  background-color: rgba(0,0,0,1.0);;
  font-size: 20px;
  padding: 5px 10px 8px 10px;
}
.front #keski {
  padding-top: 30px;
}
  /* blogi näkymä */

  .items-row { margin-bottom: 20px;clear: both;}
  .cols-2 .column-1, .cols-2 .column-2 { width: 100%; float: left;padding: 0 10px; margin-left: 0;}
  .cols-3 .column-1, .cols-3 .column-2, .cols-3 .column-3 { width: 100%; float: left;padding: 0px 10px;margin-left: 0px;}
  .cols-4 .column-1, .cols-4 .column-2, .cols-4 .column-3, .cols-4 .column-4 { width: 100%; float: left;padding: 0px 10px;margin-left: 0px;}


  /* yhteystiedot*/
  #yhteystiedotVasen {
    float: left;
    width: 100%;
  }
  #yhteystiedotOikea {
    position: relative;
    float: left;
    width: 100%;
  }
  #kuntotarkistusTeksti {
    font-size: 18px;
    line-height: 50px;
    height: 56px;
  }

  /* alaosa tiedot */
  p#footerEmail {
    position: relative;
    top: 2px;
    font-size: 14px;
  }

  .vaiheetTekstiVasen, .vaiheetTekstiOikea {
    width: 100%;
  }
  #keski #sis_oik .vaiheetLaatikko ul {
    padding: 0 10px;
  }

 }


/* Landscape phone to portrait tablet 767 */
@media (max-width: 767px) {

  /* Kakkujen kerrokset */
  #ylaInner, #keskiInner, #alaInner {
    width: 100%;
    margin: 0 auto;
    padding: 0 10px;
  } 
  #ylaInner {
    height: auto;
    padding: 0;
  }
  #keskiInner {
    margin: 20px auto;
  }

  /* valikko */
  #valikko {
    width: 100%;
  }
  .navbar {
    margin-bottom: 5px;
  }

ul.menuVaaka {
  list-style: none;
  padding: 0px 0;
  position: relative;
  float: left;
  width: 100%;

}
nav ul:after {
  content: ""; clear: both; display: block;
}
ul.menuVaaka li {
  float: none;
  border-left: 0px solid #7f7f7f;
  position: relative;
  width: 100%;
}
ul.menuVaaka li:first-child {
  border: none;
}
ul.menuVaaka li a, ul.menuVaaka li a:visited, ul.menuVaaka .separator {
  display: block;
  text-decoration: none;
  padding: 0px 18px 0 18px;
  color: #000000;
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  text-transform: uppercase;
  -webkit-transition:All 0.2s ease;
  -moz-transition:All 0.2s ease;
  -o-transition:All 0.2s ease;
  transition:All 0.2s ease;
}
ul.menuVaaka li a:hover {
  color: #000000;
  background-color: #e4e4e4;
  -webkit-transition:All 0.2s ease;
  -moz-transition:All 0.2s ease;
  -o-transition:All 0.2s ease;
  transition:All 0.2s ease;
}
ul.menuVaaka li.active a {}
   .dropdown,
   .dropdown-submenu {
      display: block;
      position: static;
      float: none;
   }
   .dropdown-menu {
      position: static;
      float: none;
   }
   .open .nav-child.dropdown-menu {
      display: block;
      background-color: transparent;
      border: none;
      border-radius: 0;
      box-shadow:none;
   }
   .dropdown,
   .dropdown-submenu {
      display: block;
      position: static;
      float: none;
   }
   .dropdown-menu {
      position: static;
      float: none;
   }
   .open .nav-child.dropdown-menu {
      display: block;
      background-color: transparent;
      border: none;
      border-radius: 0;
      box-shadow:none;
   }

  /* valintalaatikot */

  #keski #valintaLaatikot a {
    width: 100%;
    height: auto;
    padding: 0 6px 6px 6px;
    margin-bottom: 10px;
  }
  .laatikkoOtsikko {
    font-size: 16px;
    margin: 5px 0;
    height: auto;
  }
  .laatikkoTeksti {
    overflow: hidden;
    height: auto;
    font-size: 12px;
    margin-bottom: 5px;
  }
  .laatikkoLueLisaa {
    width: 100px;
    font-weight: 600;
    float: right;
    font-size: 12px;
  }
  .redbutton {

    padding: 3px 10px;
  }
  /* valintalaatikot loppu */

  /* keskiosa */
  #sis { 
    max-width: 100%;
    margin-top: 20px;
  }
  #vas, #oik {
    width: 100%;
    margin: 10px 0;
  }
  #sis_vas, #sis_oik {
    width: 100%;
    padding: 0;
    margin: 10px 0;
  }



    /* bogi näkymä */
    .cols-4 .column-1, .cols-4 .column-2, .cols-4 .column-3, .cols-4 .column-4 { width: 50%; float: left;}

    /* kontaktilomakkeen css */
    /* labelien leveydet */
    #contact-form dt {
      width: 30%;
    }
    /* inputtien leveydet */
    #contact-form dd {
      width: 70%;
    }

  /* sisältö sivut */

  /* artikkelien kuvat */
  .artikkeliKuvat div img {
    width: 100%;
    margin-right: 0px;
    margin-bottom: 10px;
  }
  .artikkeliKuvat div img:last-child {
    margin-right: 0px;

  }


  /* Yhteystiedot */
 
  #yhteystiedotLomake {
    width: 100%;
    padding: 0 0 20px 0;
  }
  #yhteystiedotKartta {
    width: 100%;
  }
  #yhteystiedotKartta iframe { height: 300px;}

  /* ####  ALAOSA  #### */

  p#footerPuhIcon {
    top: 0px;
    width: 10px;
    margin: 0 10px 0 0;
  }
  p#footerPuhIcon img {
    width: 10px;
  }
  p#footerPuhNro {
    font-size: 20px;
  }
 



} /* max-768 */

@media (min-width: 481px) and (max-width: 767px) {

  /* pieni logo */
  #logoPieniLogo {
    position: relative;
    left: 10px;
    top: 14px;
  }
  #logoPieniPuh {
    position: absolute;
    right: 80px;
    top: 13px;
  }
  #logoPieniPuh a {
    color: #ffffff;
    font-size: 26px;
  }

  /* #### Vaihtuvat kuvat #### */

  #vaihtuvatKuvat {
    height: 147px;
  }
  /* vaihtuvat kuvat karuselli */
  #vaihtuvatKuvat #wrapper {
    height: 147px;
  }
  #vaihtuvatKuvat #carousel img {
    width: 481px;
  }
  #vaihtuvatKuvat #prev, #vaihtuvatKuvat #next {
    height: 174px;
  }

  #vaihtuvatKuvat #prev {
    left: -240px;
  }
  #vaihtuvatKuvat #next {
    right: -241px;
  }
  #vaihtuvatKuvat #pager {
    margin-left: -40px;
  }

  /* vaihtuvat tekstit */
  #vaihtuvatTekstit {
    width: 481px;
  }
  #vaihtuvatTekstit .carousel-caption {
    top: 100px;
  }
  #vaihtuvatTekstit .carousel-caption p {
    width: 350px;
    font-size: 18px;
    padding: 5px 20px 5px 20px;
  }

  /* alaosa */
  p#footerEmail {
    font-size: 15px;
  }

} /* 481-767 */


/* ####   Portrait tablet to landscape and desktop  768-992 #### */
@media (min-width: 768px) and (max-width: 992px) {

  /* Kakkujen kerrokset */
  #ylaInner, #keskiInner, #alaInner {
    width: 768px;
    margin: 0 auto;
    padding: 0 20px;
  } 
  #ylaInner {
    height: auto;
  }
    #keskiInner {
    margin: 20px auto;
  }
  #logo {
    float: none;
    width: 280px;
    margin: 0 auto;
    top: 0px;
    padding: 10px 0;
  }

  /* #### Vaihtuvat kuvat #### */

  #vaihtuvatKuvat {
    height: 234px;
  }
  /* vaihtuvat kuvat karuselli */
  #vaihtuvatKuvat #wrapper {
    height: 234px;
  }
  #vaihtuvatKuvat #carousel img {
    width: 768px;
  }
  #vaihtuvatKuvat #prev, #vaihtuvatKuvat #next {
    height: 234px;
  }

  #vaihtuvatKuvat #prev {
    left: -384px;
  }
  #vaihtuvatKuvat #next {
    right: -384px;
  }
  #vaihtuvatKuvat #pager {
    margin-left: -360px;
  }
  /* vaihtuvat tekstit */
  #vaihtuvatTekstit {
    width: 768px;
  }
  #vaihtuvatTekstit .carousel-inner {
    overflow: visible;
  }
  #vaihtuvatTekstit .carousel-caption {
    top: 170px;
  }
  #vaihtuvatTekstit .carousel-caption p {
    width: 400px;
    font-size: 24px;
    padding: 5px 20px 5px 20px;
  }


  /* valikko osa */
  #valikko {
    float: none;
  }
  .navbar {
    margin-bottom: 0;
  }
  ul.menuVaaka {
    left: 50%;
  }
  ul.menuVaaka li {
    right: 50%;
  }
  ul.menuVaaka li a, ul.menuVaaka li a:visited, ul.menuVaaka .separator {
    line-height: 50px;
  }
  /* toinen taso vaaka menussa */
  ul.menuVaaka ul.dropdown-menu {
    top: 97%;
  }
  ul.menuVaaka ul.dropdown-menu li {
    left: 0;
  }
  /* valintalaatikot */

  #keski #valintaLaatikot a {
    width: 236px;
    height: 132px;
    padding: 5px 10px;
  }
  .laatikkoOtsikko {
    font-size: 16px;
    margin-bottom: 0px;
    height: 30px;
  }
  .laatikkoTeksti {
    overflow: hidden;
    height: 60px;
    font-size: 12px;
  }
  .laatikkoLueLisaa {
    width: 100px;
    font-weight: 600;
    float: right;
    font-size: 12px;
  }
  .redbutton {
    padding: 3px 10px;
  }
  /* valintalaatikot loppu */

  /* keskiosa */
  #sis { 
    max-width: 768px;
  }
  #vas, #oik {
    width: 236px;
  }
  #sis_vas, #sis_oik {
    width: 482px;
  }

  ul#kuvagalleria_16-9 li { 
    width: 450px;
    height: 252px;
  }
  /* artikkelien kuvat */
  .artikkeliKuvat div img {
    width: 233px;
    margin-right: 5px;
  }
  .artikkeliKuvat div img:last-child {
    margin-right: 0px;
  }

} /* 768 - 992 */

/* pudotusmenu juttuja */
@media (min-width: 768px) {

  .form-horizontal .control-label {
    text-align: left;
  }
   .nav-pills > li > a,
   .dropdown-menu {
      margin: 0;
   }
 
   .nav-pills > li.dropdown:hover ul.dropdown-menu,
   .nav-tabs > li.dropdown:hover ul.dropdown-menu {
      display: block;
   }
 
   .nav-pills > li.dropdown ul.dropdown-menu .dropdown-submenu .dropdown-menu,
   .nav-tabs > li.dropdown ul.dropdown-menu .dropdown-submenu .dropdown-menu {
      display: none;
   }
 
   .nav-pills > li.dropdown ul.dropdown-menu .dropdown-submenu:hover .dropdown-menu,
   .nav-tabs > li.dropdown ul.dropdown-menu .dropdown-submenu:hover .dropdown-menu {
      display: block;
   }
}

@media print {
  /* poistetaan linkkien urlit linkeistä kun tulostetaan*/
  a:link:after, a:visited:after {
    content: "" !important;
  }
}