/* HEADER - NAVIGATION Alkaa varsinainen linkki osio */

/* Paneelin väri & koko. Lähtökohtaisesti koko on aina oltava 70px */

.navbar-custom {
    background-color: #2CA089;
    height: 85px;
}

/* Brandin (logo / yritysnimen) fontti ja koko */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
    color: #FFFFFF;
    font-family: 'Salsa', cursive;
    font-size: 2em;
}
.navbar-logo {
    width: 60px;
    margin-right: 1px;
}

/* HEADER */

/* Yläosan (navipalkin) linkkien värit */

.navbar-custom .navbar-nav .nav-link {
    color: white;
    /* tätä käytetään jos halutaan näyttää läpinäkyvä väri esim. 0.8, */
    font-family: 'Salsa', cursive/* jos olisi 1.8, väri ei olisi enään läpinäkyvä */
}

/* Aktiivisen & hover-linkin väri */

.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link {
    color: #969696;
}

/* Alasvetovalikon värien vaihdossa käytä !important-komentoa kumoamaan bootstrapin omat css-määritykset: */

.nav-item .dropdown-menu a:hover {
    color: white !important;
    background: #339966 !important;
    cursor: pointer;
}

/* HAMBURGER TOGGLE */

/* Responsiivinen asettelu mobiilissa (svg-kuva) värin rgba=valkoinen sävy joka näkyy tummalla pohjalla */

.custom-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

/* Hamburger pudotusvalikon taustaväri */

.navbar-collapse {
    background-color: #2CA089;
}

/* Hamburger pudotusvalikon aktiivisen fontin taustaväri */

.nav-link.active {
    color: white !important;
}

/* CAROUSEL */

/* Yläosan (HEADER) alapuolella oleva kuvakokoelma. */

/* Tilaa pitää aina laittaa hieman kokoelman yläosaa ettei se navigoidessä jää navipalkin taakse. Lähtökohtaisesti koko on aina oltava 70px */

#demo {
    padding-top: 70px;
}

/* Carousellin ja ensimmäisen osion (ajankohtaista) välinen etäisyys toisiinsa. */

.container {
    padding-top: 1%;
}

/* Voit sijoittaa navipalkin tai sen osia jompaankumpaan reunoista sekä keskelle.
Keskelle tulevalle ul-elementille määritellään class-luokka mx-auto:
<ul class="navbar-nav mx-auto"> */

.carousel-inner img {
    /* Varmista että kuvien korkeus ja leveys on kaikissa samat */
    width: 100%;
    /* Set width to 100% */
    margin: auto;
    min-height: 200px;
    max-height: 100%;
}

/* vaihda tarvittaessa kontrollipainikkeiden (svg-kuvia) väri, muuta fill arvo */

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255)' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255)' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}

/* Sivun (BODY) taustaväri */

body {
    background-color: #D5D5D5;
    position: relative;
    /* srollSpy määritys */
}

/* SCROLLSPY Bootstrap 4 */

/* Yläosassa, navipalkissa väri vaihtuu sen mukaan missä kohtaa sivulla on.  */

.nav-link.active {
    color: white;
    background-color: #008080;
}

/* SECTIONS */

/* Jokaisen osion (esim. ajankohtaiset) oma graafinen määritys. color=fontin väri */

/* Ajankohtaista */

#section1 {
    padding-top: 12%;
    color: black;
    background-color: #F4F7F9;
    padding-bottom: 4%;
}

/* Yritykseni */

#section2 {
    padding-top: 12%;
    color: black;
    background-color: #DDF1F2;
    padding-bottom: 4%;
}

/* Palvelut */

#section3 {
    padding-top: 12%;
    color: black;
    background-color: #FFFFFF;
    padding-bottom: 4%;
}

/* Hinnasto */

#section4 {
    padding-top: 12%;
    color: black;
    background-color: #FFFFFF;
    padding-bottom: 4%;
}

/* Videot - toistaiseksi osio on piilotettu */

#section5 {
    padding-top: 12%;
    background-color: #DDF1F2;
}

/* Yhteystiedot */

#section6 {
    padding-top: 12%;
    color: white;
    background-color: #18817C;
    padding-bottom: 1%;
}


/* SHARE BUTTONS */

#section7 {
    padding-top: 2%;
    color: white;
    background-color: #395A61;
    padding-bottom: 1%;
}

/* FONTTI - OSAN VÄRI MUOTOILLAAN SECTIONISSA */

h1 {
    font-family: 'Salsa', cursive;
}

h2 {
    font-family: 'Salsa', cursive;
    font-size: 18px;
}

p {
    font-family: 'Open Sans', sans-serif;
}

p1 {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px
}

b {
    font-family: 'Open Sans', sans-serif;
}

li {
    font-family: 'Open Sans', sans-serif;
}

/* HYPER LINKIN VÄRI */

/* Hyperlinkin värisävyt on eri yläosan ja alaosan teksteissä erilaisen taustavärin vuoksi. */

a:link {
    color: #0004FD;
    background-color: transparent;
    text-decoration: none;
}

a:visited {
    color: #0004FD;
    background-color: transparent;
    text-decoration: none;
}

a:hover {
    color: #7578FF;
    background-color: transparent;
    text-decoration: underline;
}

a:active {
    color: #0004FD;
    background-color: transparent;
    text-decoration: underline;
}

/* Yhteystiedot osion hyperlinkin väri. */

#section6 a {
    color: #8AB8E2;
}

#section6 a:hover {
    color: #8AC8FF;
}

/* KORTTIRYHMÄ Bootstrapin card1-5 */

/* Palvelut osion kuvien koot */

.card img {
    margin-left: auto;
    margin-right: auto;
    width: 40%;
}

/* Korttiryhmän kuvien koko asetukset */

#group img {
    max-height: 100px;
}


/* KESKITETTY KUVA */

/* Ajankohtaiset ja yritykseni osioiden kuvien graafiset asetukset */

.centerimage {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 4px;
    background-color: whitesmoke;
    width: 100%;
}

/* INFO */

.responsive {
    width: 100%;
    height: 100%;
}

/* LIGHTBOX IMAGE GALLERY */

#galleria img {
    height: 120px;
    box-shadow: 8px 8px 8px grey;
    margin: 5px;
}

#galleria {
    margin-top: 1%;
    text-align: center;
    /* keskittää kuvat */
    margin-bottom: 1%;
}

/* SLOGAN */

/* Kuvassa olevan slogan tekstin asetukset */

.bgimage {
    width: 100%;
    height: 500px;
    background: url('kuvat/hoito.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

.bgimage h1 {
    color: white;
    text-shadow: 2px 2px #333;
    text-align: center;
}

/* BUTTONS - PAINIKKEET */

/* Ota yhteyttä!-painikkeen muotoilu */

.button {
    background-color: #4CAF50;
    /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    -webkit-transition-duration: 0.4s;
    /* Safari */
    transition-duration: 0.4s;
}

.button1 {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.button2:hover {
    box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

/* TAULUKKO */

/* Hinnastotaulukon muotoilut */

#table {
    font-family: 'Open Sans', sans-serif;
    border-collapse: collapse;
    width: 50%;
    margin-left: 10px;
}

#table td:first-child {
    width: 60%;
}

#table td,
#table th {
    border: 1px solid #ddd;
    padding: 2%;
}

/* Tasaa taulukon saraakkeet */

#table tr:nth-child(even) {
    background-color: #f2f2f2;
}

#table th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #4CAF50;
    color: white;
}

/* VIDEOT */

/* Video-osion muotoilut. Osio on toistaiseksi piiltotettu. */

#videot .nav-link.active {
    color: white;
    background-color: #395A61;
}

#videot .nav-link {
    color: white;
    background-color: #13B4AC;
}

/* FOOTER */
footer {
  text-align: center;
  padding: 3px;
  background-color: #D5D5D5;
  color: black;
}

/* YHTEYSTIEDOT */

/* Share buttons - Somepainikkeiden kuvien muotoilut */

.some img {
    height: 50px;
    width: 50px;
}