.bgimg-1 {
  background-position: center;
  background-size: cover;
  min-height: 100%;
  }
  
@media screen and (min-width:993px){
    .bgimg-2, .bgimg-3 {
    background-attachment: fixed !important;
    }
}    
    
.bgimg-2, .bgimg-3 {
    background-attachment: scroll;
    background-size: cover;
  background-repeat: no-repeat;
}


/* Second image (Portfolio) */
.bgimg-2 {
  background-image: url("../images/JPH_alueet.jpg");
  min-height: 400px;
}

/* Third image (Contact) */
.bgimg-3 {
  background-image: url("../images/JPH_katemaisemointi.jpg");
  min-height: 400px;
}

#yhteystiedot {
  background-position: center bottom;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url("../images/JPH_tausta.jpg");
  }
  
.copytext {font-size: 10px;}

a.credits:link, a.credits:visited {font-size: 10px; color:#fff; text-decoration:none;}

.rs-bar .rs-button {padding: 16px;}

html {box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}

html {
  -ms-text-size-adjust:100%;
  -webkit-text-size-adjust:100%;
  }

body {margin:0;}

html,body {
  font-family:"Raleway", sans-serif; 
  font-size:15px; 
  line-height:1.8;
  height: 100%;
  }

html {
  overflow-x:hidden;  
  scroll-behavior: smooth;
  }

h1 {font-size:36px;}

h2 {font-size:30px;}
  
h3 {font-size:24px;}

h4 {font-size:20px;}

h5 {font-size:18px;}

h6 {font-size:16px;}

h1,h2,h3,h4,h5,h6 {
  font-family: "Raleway", sans-serif;
  font-weight:400;
  margin:10px 0;
  }
  
.rs-wide {letter-spacing:4px;}

hr {border:0;border-top:1px solid #eee;margin:20px 0}

.rs-image {max-width:100%;height:auto}

.rs-button{

  display:inline-block;
  padding:8px 16px;
  vertical-align:middle;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  background-color:inherit;
  text-align:center;
  cursor:pointer;
  white-space:nowrap;
  }

.rs-button {
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  } 
  
.rs-button:disabled {cursor:not-allowed;opacity:0.3;}

.bold {font-weight: bold; border: 1px solid #fff;}

.rs-ul {
  list-style-type:disc; 
  padding:0 0 0 15px; 
  margin:0;
  }

.rs-ul li {padding:2px 2px;}

.rs-display-container {position:relative;}

.rs-sidebar {
  height:100%;
  width:200px;
  background-color:#fff;
  position:fixed!important;
  z-index:1;
  overflow:auto;
  }

.rs-modal {
  z-index:100;
  display:none;
  padding-top:100px;
  position:fixed;
  left:0;
  top:0;
  width:100%;
  height:100%;
  overflow:auto;
  background-color:rgb(0,0,0);
  background-color:rgba(0,0,0,0.4);
  }
  
.rs-modal-content {
  margin:auto;
  background-color:#fff;
  position:relative;
  padding:0;
  outline:0;
  width:600px;
  }

.rs-bar{
        width:100%;
        overflow: hidden;
        color:#fff !important;
        background-color: #000 !important;
        box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
        padding-top: 15px;
        min-height: 80px;
        border-bottom: 2px solid #fff
        }

.rs-center .rs-bar {display:inline-block;width:auto;}

.rs-bar .rs-bar-item {
  padding:8px 16px;
  float:left;
  width:auto;
  border:none;
  display:block;
  outline:0;
  }

.rs-bar .rs-button {white-space:normal;}

.rs-bar-block .rs-bar-item {
  width:100%;
  display:block;
  padding:8px 16px;
  text-align:left;
  border:none;
  white-space:normal;
  float:none;
  outline:0;
  }
  
.rs-bar-block.rs-center .rs-bar-item {text-align:center;}

.rs-container:after,
.rs-container:before,
.rs-row:after,
.rs-row:before,
.rs-row-padding:after,
.rs-row-padding:before,
.rs-bar:before,
.rs-bar:after {content:""; display:table; clear:both;}

.rs-col {float:left; width:100%;}

@media screen and (min-width: 601px) {
  .rs-col.m3 {
    width: 24.99999%;
  }
  .rs-col.m4 {width:33.33333%}
}

@media screen and (min-width:755px) {
       .rs-col.m6 {width:49.99999%}
       }

@media screen and (max-width:755px) {
       .rs-text-center {text-align: center;}
        }

@media screen and (min-width:993px){
       .rs-col.l3 {width:24.99999%}
       }

@media screen and (max-width:900px){
       .rs-modal-content {margin:0 10px; width:auto !important;}
       .rs-modal {padding-top:30px;}
       .rs-hide-small {display:none !important;}

       }

@media screen and (max-width:768px){
       .rs-modal-content {width:500px;} 
       .rs-modal {padding-top:50px;}
       
       }

@media screen and (max-width:800px){
       .rs-title {font-size: 26px !important;}
       }

@media screen and (max-width:420px){
       .center {font-size: 16px !important;} 

       }
       
@media screen and (max-width:420px){
       .rs-display-middle {width:100% !important; top: 270px !important;}
       .back {padding:0 !important;}
       .rs-display-bottom{white-space:normal !important; width:100%; bottom: 0px !important;} 
       .rs-font-size {font-size:14px !important;}
       .rs-display-bottom{bottom:5% !important;}
       }
       
@media screen and (min-width:993px) {
       .rs-modal-content {width:900px;} 
       .rs-hide-large {display:none !important;}
       .rs-font-size {font-size:30px !important;}
       .rs-display-bottom{bottom:2% !important;}
       }

@media screen and (min-width:901px) and (max-width:992px) {
       .rs-hide-medium {display:none !important;}
       .rs-font-size {font-size:20px !important;}       
       }

@media screen and (max-width:992px) {
       .rs-sidebar.w3-collapse {display:none;}
       }

@media only screen and (max-width:600px) {
       .product {min-height: 320px !important; padding-bottom: 20px;}
       #googleMap {height:300px !important;}
       }

@media screen and (min-width:280px) and (max-width:1280px) and (orientation:landscape){
       header { height: 600px;}
       .back {max-width: 500px;}
}

.rs-display-bottom{position:absolute;width:90%;left:50%;bottom:2%;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%); }

.rs-display-center{
    display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
    
}

.rs-title {font-size: 36px;}

.rs-top,.rs-bottom {
  position:fixed;
  width:100%;
  z-index:1;
  }
  
.rs-top {top:0;}

.rs-bottom {bottom:0;}

.rs-display-topright {
  position:absolute; 
  right:0; 
  top:0;
  }

.rs-display-middle {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  -ms-transform:translate(-50%,-50%);
  }


.rs-round-small {border-radius:2px;}

.rs-round, .rs-round-medium {border-radius:4px;}

.rs-round-large {border-radius:8px;}

.rs-round-xlarge {border-radius:16px;}

.rs-round-xxlarge {border-radius:32px;}

.rs-row-padding, .rs-row-padding>.rs-col {padding:0 8px;}

.rs-container {padding:0.01em 16px;}

.w3-panel {margin-top:16px; margin-bottom:16px;}

.rs-card {box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)}

.rs-animate-left{position:relative;animation:animateleft 0.4s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}

.rs-animate-zoom {animation:animatezoom 0.6s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}

.rs-opacity,.rs-hover-opacity:hover{opacity:0.60}.w3-opacity-off,.rs-hover-opacity-off:hover{opacity:1}

.rs-greyscale-min,.rs-grayscale-min{filter:grayscale(50%)}

.rs-large{font-size:18px !important;}

.rs-xlarge {font-size:24px !important;}

.rs-xxlarge {font-size:36px !important;}

.rs-xxxlarge {font-size:48px !important;}

.rs-center {text-align:center !important;}

.rs-section {
  margin-top:16px !important; 
  margin-bottom:16px !important;
  }

.rs-margin {margin:16px !important;}

.rs-margin-top {margin-top:16px !important;}

.rs-margin-top-32 {margin-top:32px !important;}

.rs-margin-bottom {margin-bottom:16px !important;}

.rs-margin-left {margin-left:16px !important;}

.rs-margin-right {margin-right:16px !important;}

.rs-padding-large {padding:12px 24px !important;}

.rs-padding-16 {padding-top:16px !important; padding-bottom:16px !important;}

.rs-padding-48 {padding-top:48px !important; padding-bottom:48px !important;}

.rs-padding-64 {padding-top:64px !important; padding-bottom:64px !important;}

.rs-left {float:left !important;}

.rs-right{float:right !important;}

.rs-button:hover {color:#000!important; background-color:#ffff00 !important;}

.rs-transparent {background-color:transparent!important;}

.rs-white, .rs-hover-white:hover {color:#000 !important; background-color:#fff !important;} 

.rs-black, .rs-hover-black:hover {color:#fff !important; background-color:#000 !important;}

.rs-light-grey,
.rs-hover-light-grey:hover,
.rs-light-gray,
.rs-hover-light-gray:hover {
  color:#000 !important; 
  background-color:#f1f1f1 !important;
  }
  
.rs-dark-grey,
.rs-hover-dark-grey:hover,
.rs-dark-gray,
.rs-hover-dark-gray:hover {
  color:#fff !important; 
  background-color:#616161 !important;
  }

.rs-text-white, 
.rs-hover-text-white:hover {color:#fff !important;}

.rs-text-black, 
.rs-hover-text-black:hover {color:#000 !important;}

.rs-text-yellow {color:#ffff00!important}

.back {
  background: rgba(0,0,0,0.6); 
  border-radius: 10px;
  border: 1px solid #808080;
  text-align:center;
  padding: 0;
  }
  
.center {
  text-align:left; 
  margin: 0 auto; 
  max-width: 380px; 
  width:100%; 
  font-weight:bold; 
  font-size: 20px;
  }
  
.image-top img {
  width:95%; 
  margin-top:8px; 
  }
  
.product {min-height:460px;}
  
.zoom-in {cursor: zoom-in;}

.zoom-out {cursor: zoom-out;}

.rs-photo {width: 100%; }

.rs-photo img {width: 100%; height: 100%; max-width: 520px; min-width: 200px; object-fit: contain;}

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: 1px solid #000;
  outline: none;
  background-color: #616161;
  color: #000;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {background-color: #C0C0C0;}

.padding-128-16 {padding:128px 16px;}

.padding-28-16 {padding:28px 16px;}

.display-none {display:none;} 

.open {
    width:95%;
    margin: 0 auto;
    border: 1px solid #808080; 
    border-radius: 4px;
    background: rgba(0,0,0,0.6); 
    padding: 5px 0;
}

.divwidth {
    clear:both; 
    max-width:1280px; 
    margin: 0 auto;
}

.divwidth-second {
    clear:both; 
    max-width:965px; 
    margin: 0 auto;
}

#googleMap {
    width:100%; 
    height:450px; 
    margin:auto;
}

span.textback {color: #ffff00 !important;
text-shadow: -1px -1px 0px #000,
0px -1px 0px #000,
1px -1px 0px #000,
-1px 0px 0px #000,
1px 0px 0px #000,
-1px 1px 0px #000,
0px 1px 0px #000,
1px 1px 0px #000,
-2px -2px 0px #000,
-1px -2px 0px #000,
0px -2px 0px #000,
1px -2px 0px #000,
2px -2px 0px #000,
2px -1px 0px #000,
2px 0px 0px #000,
2px 1px 0px #000,
2px 2px 0px #000,
1px 2px 0px #000,
0px 2px 0px #000,
-1px 2px 0px #000,
-2px 2px 0px #000,
-2px 1px 0px #000,
-2px 0px 0px #000,
-2px -1px 0px #000;
padding: 0 20px;
letter-spacing: 3px;
}

span.fronttext {color: #ffff00 !important;
text-shadow: -1px -1px 0px #000,
0px -1px 0px #000,
1px -1px 0px #000,
-1px 0px 0px #000,
1px 0px 0px #000,
-1px 1px 0px #000,
0px 1px 0px #000,
1px 1px 0px #000,
-2px -2px 0px #000,
-1px -2px 0px #000,
0px -2px 0px #000,
1px -2px 0px #000,
2px -2px 0px #000,
2px -1px 0px #000,
2px 0px 0px #000,
2px 1px 0px #000,
2px 2px 0px #000,
1px 2px 0px #000,
0px 2px 0px #000,
-1px 2px 0px #000,
-2px 2px 0px #000,
-2px 1px 0px #000,
-2px 0px 0px #000,
-2px -1px 0px #000;
padding: 0;
letter-spacing: 3px;
}