/*
Theme Name: Juankosken Apteekki 2019
Theme URI:
Description:
Version: 1.0
Author: Elysium Solutions Oy / Marko
Author URI: http://elysium.fi
*/

/*
Värit:
Vihreä: rgb(13, 177, 75)
Musta: #2d2d2d

*/

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap');

body {
    font-family:'Open Sans', Verdana, Geneva, Tahoma, sans-serif;
    color:#2d2d2d;
    font-size: 18px;
}

.vihreaosa {
    background: rgb(13, 177, 75);
    width:100%;
    height:100px;
}

#page {
    margin-top:-60px;
    padding:20px;
    background: #FFF;
}

#linkkipallot {
    padding:20px 20px 4px 20px;
}

.keskitys {
    text-align: center;
}

.keskitysMobi {
    text-align: center;
}

@media (min-width: 768px) {
    .keskitysMobi {
        text-align: left;
    }
}

#linkkipallot .linkkipallo {
    padding-bottom: 16px;
}

#linkkipallot .linkkipallo img {
    margin-bottom: 10px;
    object-fit: cover;
    object-position: center;
    aspect-ratio: 1 / 1;
    width: 100%;
}

#linkkipallot .linkkipallo a {
    color: rgb(13, 177, 75);
}

.tarjousOtsikko {
    font-weight: bold;
    color: rgb(13, 177, 75);
    margin-bottom: 5px;
}

.tarjousTeksti {
    white-space: pre-line;
    font-size:16px;
}

#header, #mobiheader {
    margin-bottom:20px;
}

#header .logo, #mobiheader .logo {
    color:#2d2d2d;
    font-weight: bold;
    font-size: 36px;
    text-transform: uppercase;
    line-height: 1.1;
}

#header .logo img, #mobiheader .logo img {
    height: 80px;
}

#header .logo:hover, #mobiheader .logo:hover {
    text-decoration: none;
}

#header .headersivutekstit {
    font-size:16px;
    line-height: 1.2;
}

.nappi {
    background:rgb(13, 177, 75);
    color:#FFF;
    font-weight: bold;
    border:2px solid rgb(13, 177, 75);
    text-transform: uppercase;
    font-size:14px;
    padding:6px 10px;
    line-height: 1;
    display: inline-block;
    outline: none;
}

.nappi:hover {
    color:rgb(13, 177, 75);
    text-decoration: none;
    background: #FFF;

}

.mobinappi button {
    background:rgb(13, 177, 75);
    color:#FFF;
    font-weight: bold;
    border:none;
    text-transform: uppercase;
    font-size:22px;
    padding:10px 8px;
    line-height: 1;
    display: block;
    width: 100%;
    outline: none;
}

#mobivalikkosis {
    padding:10px 20px;
    background:rgb(13, 177, 75);
    text-align: center;
}

.mobivalikko ul {
    list-style: none;
    padding:0;
    margin:0;
}

.mainoskuva {
    border:2px solid rgb(13, 177, 75);
}

.mobivalikko ul li {
    margin:5px 0;
}

.mobivalikko ul li a {
    color:#FFF;
    text-transform: uppercase;
    font-size:20px;
    padding:10px 8px;
    line-height: 1;
}

.mobivalikko ul li a:hover {
    text-decoration: none;
}

.valikko {
    background:rgb(13, 177, 75);
    margin-bottom:20px;
    text-align: center;
}

.valikko ul {
    list-style: none;
    margin:0;
    padding:0;
}

.valikko ul li {
    display: inline-block;
}

.valikko ul li a {
    display: block;
    color:#FFF;
    text-transform: uppercase;
    font-size:16px;
    padding:10px 8px;
    line-height: 1;
}

.valikko ul li a:hover {
    text-decoration: none;
    background: rgba(0,0,0,0.1);
}

.entry a {
    color:rgb(13, 177, 75);
}

.entry .entry-title {
    font-weight: bold;
    text-transform: uppercase;
}

.entry-title-sm {
    font-size: 26px;
    font-weight: bold;
}

.entry h2 {
    font-size:24px;
    font-weight: bold;
}

.entry h3 {
    font-size:20px;
    font-weight: bold;
}

.nxt_prv_links {
    color:rgb(13, 177, 75);
}

.nxt_prv_links a {
    color:rgb(13, 177, 75);
    text-transform: uppercase;
}

.nxt_prv_links a:hover {
    text-decoration: none;
}

#footer {
    font-size:14px;
    background:#2d2d2d;
    color:#FFF;
}

.footercontent {
    padding:20px;
}

.alavalikko ul {
    margin:0;
    padding:0;
    list-style: none;
}

.alavalikko ul li a {
    color:#FFF;
}

hr {
    border-top:3px solid rgb(13, 177, 75);
}

img, .wp-caption {
    max-width: 100%;
}

.size-auto,
.size-full,
.size-large,
.size-medium,
.size-thumbnail {
    max-width: 100%;
    height: auto;
}
embed,
iframe,
object {
    max-width: 100%;
}


/* Extra small devices (portrait phones, less than 576px) */
/* No media query for `xs` since this is the default in Bootstrap */
.alignleft,
.alignright,
.aligncenter,
.alignnone {
    clear: both;
    display: block;
    margin: 0 auto 10px auto;
}

.entry .entry-title {
    font-size:24px;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .alignleft,
    .alignright,
    .aligncenter,
    .alignnone {
        clear: both;
        display: block;
        margin: 0 auto 10px auto;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .alignleft {
        display: inline;
        float: left;
        margin: 0 20px 10px 0;
    }
    .alignright {
        display: inline;
        float: right;
        margin: 0 0 10px 20px;
    }
    .aligncenter {
        clear: both;
        display: block;
        margin: 0 auto;
    }
    .alignnone {
        margin:0px 0 10px 0;
    }

    .entry .entry-title {
        font-size:32px;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .alignleft {
        display: inline;
        float: left;
        margin: 0 20px 10px 0;
    }
    .alignright {
        display: inline;
        float: right;
        margin: 0 0 10px 20px;
    }
    .aligncenter {
        clear: both;
        display: block;
        margin: 0 auto;
    }
    .alignnone {
        margin:0px 0 10px 0;
    }

    .entry .entry-title {
        font-size:32px;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .alignleft {
        display: inline;
        float: left;
        margin: 0 20px 10px 0;
    }
    .alignright {
        display: inline;
        float: right;
        margin: 0 0 10px 20px;
    }
    .aligncenter {
        clear: both;
        display: block;
        margin: 0 auto;
    }
    .alignnone {
        margin:0px 0 10px 0;
    }

    .entry .entry-title {
        font-size:32px;
    }
}