@charset "iso-8859-1";

/* CopyRight: 
Jaakko Tuononen
Tel: +358 404110155
Email: info@vapaamedia.fi 
vapaamedia.fi sivujen asettelut */

/* Sivun yläbannerin määrittely ja sen taustakuva */
.ylabanneri {
    background-image: url('../pictures/banneri.png');
    opacity: 0.5;
    height: 100%; 
    width: 100%; 
    background-repeat: no-repeat;     
    position: fixed;
    left: 0%;
    top: 0%;
    z-index: -1;
}

/* Yrityksen nimialueen tyylimäärittely */
.nimialue {
white-space:nowrap;
border-bottom:0px 
solid #FFFFFF;
position: absolute; 
left: 27%;
top: 1%;
border-top:0px solid #FFFFFF;
padding: 10px; 
font-family: Verdana;
background-color:  #0000;
font-size:11pt;
text-shadow: 1px 1px black;
color: white;
z-index: 1;
}

/* Sivun taustan määrittely ja taustakuvan käsittely */
.tausta_alue { 
    background: url('../pictures/tausta.jpg') 
    repeat;
    background-size: cover;
    background-color:#C0C0C0;
    z-index: -2;
}

/* Yrityslogon asettelu ja kuvan haku sivuille */
.logoboxi {
    background-image: url('../pictures/vlogo.png');
    background-repeat: no-repeat;
    width: 100px; height: 100px;
    position: absolute;
    left: 2%;
    top: 1%;
    z-index: 3; 
}

/* Copyright asettelu  */
.copyboxi {
white-space:nowrap;
border-bottom:0px 
solid #FFFFFF;
position: absolute; 
right: 20%;
top: 6%;
border-top:0px solid #FFFFFF;
font-family: Verdana;
background-color:  #0000;
font-size:9pt;
color: white;
z-index: 0; 
}

/* Tekstin tyylimäärittely ja hidastetty esiintulo  */
.tekstit {
    font-size:20pt; color:white;
    text-shadow: 1px 1px black;
    font-weight: normal;
    font-family: Arial; 
    position: absolute;
    width: 60%;
    left: 20%;
    top: 28%;
    z-index: 1;
    animation: fadeInAnimation ease 5s; 
    animation-iteration-count: 1; 
    animation-fill-mode: forwards; 
    } 
    @keyframes fadeInAnimation { 
    0% { 
        opacity: 0; 
       } 
       100% { 
       opacity: 1; 
            } 
}

/* Palaute- ja tilaussivun määrittely  */
.palautteet {
    white-space:nowrap;
    border-top: 2px solid #FFFFFF;
    border-bottom: 2px solid #FFFFFF;
    border-left: 2px solid #FFFFFF;
    border-right: 2px solid #FFFFFF;
    position: fixed;
    top: 20%;
    left: 25%;
    padding: 10px; 
    font-family: Verdana;
    background-color: grey; 
    font-size:11pt; 
    color:white;    
    text-shadow: 1px 2px black;
    z-index: 1;
    animation: fadeInAnimation ease 5s; 
    animation-iteration-count: 1; 
    animation-fill-mode: forwards; 
    } 
    @keyframes fadeInAnimation { 
    0% { 
        opacity: 0; 
       } 
       100% { 
       opacity: 1; 
            } 
}

/* WhatsApp jutut */
.whatsapp_float {
          background-image: url('../pictures/what.png');
          position: fixed;
          width: 50px;
          height: 50px;
          bottom: 34%;
          right: 10%;
          border-radius: 50px;
          text-align: center;
          box-shadow: 0px 0px 0px;
          z-index: +2;
 }
.whatsapp-icon {
          margin-top: 16px;
      }
/* for mobile */
@media screen and (max-width: 767px) {
.whatsapp-icon {
              margin-top: 10px;
          }
          .whatsapp_float {
              width: 40px;
              height: 40px;
              bottom: 20px;
              right: 10px;
              font-size: 10pt;
          }
      }
  .whatsapp-icon {
          margin-top: 16px;
      }
      /* for mobile */
@media screen and (max-width: 767px) {
          .whatsapp-icon {
              margin-top: 10px;
          }
          .whatsapp_float {
              width: 40px;
              height: 40px;
              bottom: 20px;
              right: 10px;
              text-align: center;
              font-weight: normal;
              font-family: Arial; 
              font-size:10pt;
    }
}
/* WhatsApp jutut loppuu */

/* Linkkinappien paikan määrittely  */
.nappipaikka {
    position: absolute;
    left: 3%;
    top: 28%;
    z-index: 1; 
    background-color: #0000; 
}

/* Linkkinappien tyylin yleimäärittely  */
.button {
  background-color: white; 
  height: 65px; 
  width: 65px; 
  font-size:3pt; color:white;
  font-family: verdana; 
  text-align: center;
  text-decoration: none;
  display: inline-block;
  text-shadow: 1px 1px black;
  font-weight: bold;
  margin: 1px 1px;
  transition-duration: 0.0s;
  cursor: pointer;
  box-shadow: 0 -1px 8px 0 rgba(0, 0, 0, 0.8), 0 5px 35px 0 rgba(0, 0, 0, 0.35);
  border-radius: 50%;
}

/* Cookiesnappien määrittely: Hyväksyy */
.button_yes {
  background-color: green; 
  border-radius: 5%;
  font-size:10pt; color:white;
  font-family: verdana; 
  text-align: center;
  height: 30px; 
  width: 90px; 

}
/* Cookiesnappien määrittely: Ei hyväksy  */
.button_no {
  background-color: red; 
  border-radius: 5%;
  font-size:10pt; color:white;
  font-family: verdana; 
  text-align: center;
  height: 30px; 
  width: 90px; 
}

/* Linkkinappien määrittely  */
.vnappi {
  background-color: #000080; 
  color: #FFFFFF; 
  border: 2px solid #C0C0C0;
  
  }
/* Nappi vaihtaa väriä. kun kursori osuu siihen  */
.vnappi:hover {
  background-color: #f44336;
  color: white;
}

/* Tässä on palaute- ja tilaussivun linkkinappien määrittely  */
.pnappi {
  background-color: yellow; 
  color: black; 
  text-shadow: 1px 1px white;
  border-radius: 5%;
  height: 25px; 
  width: 90px; 
}
/* Nappi vaihtaa väriä. kun kursori osuu siihen  */
.pnappi:hover {
  background-color: #f44336;
  color: white;
}