@charset "utf-8";
@import url("fonts.css") screen;
@import url("colors.css") screen;

/* CSS Document */
html{
	scroll-behavior: smooth;}

body {
    color: #535353;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    max-width: none;
    text-shadow: 0px 0px 0px;
}
.breadcrumb {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    list-style: none;
    background-color: rgba(255,255,255,0.00);
    border-radius: 0.25rem;
    font-size: small;
}

.breadcrumb-item + .breadcrumb-item {
  padding-left: 0.5rem;
}

.breadcrumb-item + .breadcrumb-item::before {
  display: inline-block;
  padding-right: 0.5rem;
  color: #6c757d;
  content: "/";
}

.breadcrumb-item + .breadcrumb-item:hover::before {
  text-decoration: underline;
}

.breadcrumb-item + .breadcrumb-item:hover::before {
  text-decoration: none;
}

.breadcrumb-item.active {
  color: #6c757d;
}
.bg-black-50 {background-color: rgba(0,0,0,0.50)}
.bg-black {background-color: rgba(0,0,0,1.00)}
.bg-white-50 {background-color: rgba(255,255,255,0.50);}
.bg-white-60 {background-color: rgba(255,255,255,0.60);}
.bg-white-70 {background-color: rgba(255,255,255,0.70);}
.bg-white-80 {background-color: rgba(255,255,255,0.80);}
.bg-white-90 {background-color: rgba(255,255,255,0.90);}
.bg-sininen {background-color: #2A5BA7;}
.bg-eshuolto {background-color: #007bff;}
.bg-harmaa {background-color: rgba(117,124,127,0.80);}
.bg-vaihtoautot {background-color: rgba(239,239,239,1.00);}
.bg-primary {background-color: #2a5ba7 !important;}
.bg-harmaa-95 {background-color: rgba(117,124,127,0.95);}
.bg-harmaa-90 {background-color: rgba(117,124,127,0.90);}
.bg-harmaa-80 {background-color: rgba(117,124,127,0.80);}
.bg-harmaa-70 {background-color: rgba(117,124,127,0.70);}
.bg-harmaa-60 {background-color: rgba(117,124,127,0.60);}
.bg-harmaa-50 {background-color: rgba(117,124,127,0.50);}
.bg-harmaa-40 {background-color: rgba(117,124,127,0.40);}
.bg-harmaa-30 {background-color: rgba(117,124,127,0.30);}
.bg-harmaa-25 {background-color: rgba(117,124,127,0.25);}
.bg-harmaa-20 {background-color: rgba(117,124,127,0.20);}
.bg-harmaa-15 {background-color: rgba(117,124,127,0.15);}
.bg-harmaa-10 {background-color: rgba(117,124,127,0.10);}
.bg-harmaa-5 {background-color: rgba(117,124,127,0.05);}
.bg-tumma {background-color: rgba(56,60,75,1.00);}
.bg-navi {background-color: rgba(223,227,231,0.95);}
.bg-emblem {
    background-blend-mode: multiply;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-image: url(../kuvat/makelan_emblem.png);
}
.bg-huolto {
    background-blend-mode: normal;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-image: url(../kuvat/bghuolto.webp);
}
.bg-joulu {
    background-blend-mode: normal;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url("../kuvat/joulukuusi.png");
    background-position: right bottom;
}
.bg-75syksy {
    background-blend-mode: normal;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url("../kuvat/75tausta.png");
    background-position: center center;
}

.bg-75syksytumma {
    background-blend-mode: multiply;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(../kuvat/75tausta.png);
    background-position: center center;
    background-color: rgba(180,180,180,0.30);
}
@media (min-width: 768px) {.bg-joulu {
    background-size: contain;
 
    }}


.bg-varaosat {
    background-blend-mode: normal;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-image: url("../kuvat/varaosat.jpg");
}.bg-rengashotelli {
    background-blend-mode: normal;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-image: url("../kuvat/rengashotelli.jpg");
}.bg-myynti {
    background-blend-mode: normal;
    background-repeat: no-repeat;
    background-position: center top;
    background-image: -webkit-linear-gradient(90deg,rgba(255,255,255,0.00) 68.39%,rgba(255,255,255,0.80) 100%), url(../kuvat/myynti.jpg);
    background-image: -moz-linear-gradient(90deg,rgba(255,255,255,0.00) 68.39%,rgba(255,255,255,0.80) 100%), url(../kuvat/myynti.jpg);
    background-image: -o-linear-gradient(90deg,rgba(255,255,255,0.00) 68.39%,rgba(255,255,255,0.80) 100%), url(../kuvat/myynti.jpg);
    background-image: linear-gradient(0deg,rgba(255,255,255,0.00) 68.39%,rgba(255,255,255,0.80) 100%), url(../kuvat/myynti.jpg);
    background-size: cover;
}.bg-ostetaan {
    background-blend-mode: multiply;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-image: -webkit-linear-gradient(270deg,rgba(0,0,0,0.00) 32.64%,rgba(0,0,0,0.54) 100%), url("../kuvat/ostetaan_autoja.jpg");
    background-image: -moz-linear-gradient(270deg,rgba(0,0,0,0.00) 32.64%,rgba(0,0,0,0.54) 100%), url("../kuvat/ostetaan_autoja.jpg");
    background-image: -o-linear-gradient(270deg,rgba(0,0,0,0.00) 32.64%,rgba(0,0,0,0.54) 100%), url("../kuvat/ostetaan_autoja.jpg");
    background-image: linear-gradient(180deg,rgba(0,0,0,0.00) 32.64%,rgba(0,0,0,0.54) 100%), url("../kuvat/ostetaan_autoja.jpg");
}.bg-vauriokorjaamo {
    background-blend-mode: multiply;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-color: rgba(42,91,167,0.90);
    background-image: url(../kuvat/vauriokorjaamo.jpg);
}
.bg-tuulilasit {
    background-blend-mode: normal;
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;
    background-image: url("../kuvat/tuulilasikorjaus.jpg");
}
.bg-vahinkotarkastuseta {
    background-blend-mode: normal;
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;
    background-image: -webkit-linear-gradient(270deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.60) 61.14%), url("../kuvat/vahinkotarkastus_kuvat.jpg");
    background-image: -moz-linear-gradient(270deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.60) 61.14%), url("../kuvat/vahinkotarkastus_kuvat.jpg");
    background-image: -o-linear-gradient(270deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.60) 61.14%), url("../kuvat/vahinkotarkastus_kuvat.jpg");
    background-image: linear-gradient(180deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.60) 61.14%), url("../kuvat/vahinkotarkastus_kuvat.jpg");
}
.bg-vahinkotarkastus {
    background-blend-mode: normal;
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;
    background-image: url("../kuvat/vahinkotarkastus.jpg");
}
.bg-ohjauskulmat {
    background-blend-mode: normal;
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;
    background-image: url("../kuvat/ohjauskulmat.jpg");
}
.bg-vauriot {
    background-blend-mode: normal;
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;
    background-image: url(../kuvat/vauriot.webp);
}
.bg-dimmed {
    background-color: rgba(255,255,255,1.00);
}

.bg-historiikki {
    background-blend-mode: normal;
    background-repeat: repeat-y;
    background-size: cover;
}
.card.card-body .img-fluid {
    width: 100%;
    max-width: 15rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: auto;
    padding-right: auto;
    float: none;
}
.vuosiluku {
    background-color: rgba(40,87,159,1.00);
    color: rgba(255,255,255,1.00);
    border-radius: 10rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
    padding-right: 1.2rem;
    padding-left: 1.2rem;
}

.border-left {
  border-left: 0px solid #dee2e6 !important;
}
.borders-sis {
    border: 10px solid rgba(255,255,255,1.00);
    -webkit-box-shadow: inset 0px 0px;
    box-shadow: inset 0px 0px 0px 1px #dee2e6;
	box-sizing: border-box;
}
#sisalto #otsikko #logo {
    max-width: 8rem;
}
@media (min-width: 992px) {
#sisalto #otsikko #logo {
    max-width: 10rem;
}
}
@media (min-width: 768px) {

.border-left {
  border-left: 1px solid #dee2e6 !important;
}
}
@media (min-width: 768px) {
#sisalto {margin-top: 6.75rem;}}
@media (min-width: 992px) {
#sisalto {margin-top: 7.2rem;}}
@media (min-width: 1200px) {
#sisalto {margin-top: 7.5rem;}}

.kampanjaruudut {max-width: 1600px; margin: auto; padding:auto;} 

/* typot */

h1, h2, h3, h4, h5, h6
.h1, .h2, .h3, .h4, .h5, .h6 {
font-family: 'Open Sans', sans-serif;
font-weight: 700;
color: #2a5ba7;
text-transform: uppercase;
}
#posts h2, #posts h3, #posts h4, 
#posts .h2, #posts .h3, #posts .h4 {
text-transform: none;
}
#posts2 h2, #posts2 h3, #posts2 h4, 
#posts2 .h2, #posts2 .h3, #posts2 .h4 {
text-transform: none;
}
.kampanjat h2, .kampanjat .h2 {font-size: 2rem; font-weight: normal;}
.kampanjat h3, .kampanjat .h3 {font-size: 1.5rem; font-weight: normal;}
.kampanjat h4, .kampanjat .h4 {font-size: 1.2rem; font-weight: normal;}
.kampanjat h5, .kampanjat .h5 {font-size: 1rem; font-weight: normal;}

#kampanjamallinotsikko {text-align: center;}
@media (min-width: 768px) {
#kampanjamallinotsikko {text-align: left;}
}

.juhla {
    font-weight: 800;
    font-size: 2rem;
    line-height: 2rem;
    text-transform: none;
    font-variant: normal;
}
@media (min-width: 768px) {

.juhla {
    font-size: 5rem;
    line-height: 5rem;
    }}



#otsikko h1, #otsikko h2 {color:rgba(50,50,50,1.00); font-weight: normal;}
.kampanjat h1, .kampanjat h2, .kampanjat h3, .kampanjat h4, .kampanjat .h1, .kampanjat .h2, .kampanjat .h3, .kampanjat .h4   {
    color: rgba(50,50,50,1.00);
}

.text-makelan {color: #2a5ba7;
}

.yhteystiedot {font-size: 0.8rem; line-height: 1.2rem;}

/* merkkikohtaiset otsikot ja typot */

/* CITROEN  */
h1.citroen3 , h2.citroen3 {letter-spacing: -0.05rem;}
h2.citroen3, h3.citroen3, h4.citroen3, h5.citroen3 {
    text-transform: none;

}


/* PEUGEOT  */

h1.peugeot3 , h2.peugeot3, h3.peugeot3, h4.peugeot3, h5.peugeot3 {color:black;}
.h1.peugeot3 , .h2.peugeot3, .h3.peugeot3, .h4.peugeot3, .h5.peugeot3 {color:black;}
h1.peugeot2 , h2.peugeot2, h3.peugeot2, h4.peugeot2, h5.peugeot2 {color:black;}
.h1.peugeot2 , .h2.peugeot2, .h3.peugeot2, .h4.peugeot2, .h5.peugeot2 {color:black;}
h1.peugeot5 , h2.peugeot5, h3.peugeot5, h4.peugeot5, h5.peugeot5 {color:black;}
.h1.peugeot5 , .h2.peugeot5, .h3.peugeot5, .h4.peugeot5, .h5.peugeot5 {color:black;}



p.peugeot2, ul.peugeot2 {font-size: 0.8rem; line-height: 1.5rem;}
.peugeot2 p, .peugeot2 ul  {font-size: 0.8rem; line-height: 1.5rem;}
.peugeot2 p.lead  {font-size: 1rem; line-height: 1.7rem;}

p.ehdot.peugeot2 {font-size: 0.7rem; line-height: 1.3rem;}


/* HYUNDAI  */

h1.hyundai3 , h2.hyundai3, h3.hyundai3, h4.hyundai3, h5.hyundai3 {color:#002c5f;}
.h1.hyundai3 , .h2.hyundai3, .h3.hyundai3, .h4.hyundai3, .h5.hyundai3 {color:#002c5f;}
h1.hyundai3 , h2.hyundai3, h3.hyundai3, h4.hyundai3, h5.hyundai3 {color:#002c5f;}



.kampanjat h2.hyundai3, .kampanjat h3.hyundai3, .kampanjat h4.hyundai3   {
    text-transform: none;}



/* MUUT ERIKOISKOOT  */

.kampanjat .etu {font-size: 1.3rem;}
.kampanjat .eko {color:green; font-size: 1.3rem;}
.kampanjat .ehdot  {
    font-size: 0.8rem;
    padding-top: 1rem;
}


#posts h4, .h4 {
    margin-top: 1rem;
    text-transform: none;
}
.text-black-100 {color: rgba(0,0,0,1.00)}
.text-black-90 {color: rgba(0,0,0,0.90)}
.text-black-80 {color: rgba(0,0,0,0.80)}
.text-black-70 {color: rgba(0,0,0,0.70)}
.text-black-60 {color: rgba(0,0,0,0.60)}

.f95 {font-size: 95%;}
.f75 {font-size: 75%;}
.f50 {font-size: 50%;}


/* BEELY */
.beely-text h1, .beely-text .h1, .beely-text.beely-text h2, .beely-text .h2, .beely-text h3, .beely-text .h3, .beely-text h4, .beely-text .h4 
{font-family: 'Open Sans Condensed', sans-serif; color: black;}



.text-shadow {text-shadow: 0px 0px 10px #000000;
}
.autoikoninega {
    text-shadow: -10px 0px 0px rgba(255,255,255,0.40);
}
.autoikoni {
    text-shadow: -7px 0px 0px rgba(0,0,0,0.20);
}
.vaihtoautoikoni {
    text-shadow: -7px 0px 0px rgba(255,255,255,0.20);
}
.vaihtoautoikonisininen {
    text-shadow: -10px 0px 0px rgba(42,91,167,0.20);
}

.e70 {font-size: 70%; line-height: 90%;}

.taulukot {line-height: 3rem;}

.text-glow {
    text-shadow: 0rem 0rem 0.7rem rgba(255,255,255,1.00);
    
}

/* linkit*/

.topbanner a {color: rgba(255,255,255,0.70);
margin-left: 0.5rem;
}
.topbanner button {
    color: rgba(255,255,255,0.70);
    font-style: normal;
    font-weight: 400;
    padding-top: 0rem;
    padding-right: 0rem;
    padding-bottom: 0rem;
    padding-left: 0rem;
    text-transform: none;
	margin-left: 0.5rem;

}

@media (min-width: 768px) 
{
}
@media (min-width: 992px) 
{.topbanner a {font-size: 0.7rem;}
.topbanner button {
    font-size: 0.7rem;
}
}

@media (min-width: 1200px)
{.topbanner a {margin-right: 2rem; font-size: 0.8rem;}
.topbanner button {margin-right: 2rem; font-size: 0.8rem;}
}

.topbanner a:hover {color: rgba(255,255,255,0.40);}
.topbanner a:visited {color: rgba(255,255,255,0.70);}
.topbanner button:hover {color: rgba(255,255,255,0.40);}
.makelan {
max-width: 12rem;
clear: none;
 margin-left: 2rem;
    margin-top:-0.3rem;    
}
@media (min-width: 576px) 
{.makelan {
margin-right: 2rem;
margin-top: -0.2rem;    
}}

@media (min-width: 768px) 
{.makelan {
max-width: 12rem;
margin-right: 2rem;
margin-left: 1rem;
}}
@media (min-width: 992px) 
{.makelan {
max-width: 12rem;
margin-right: 1.5rem;
margin-top: -0.2rem;    
margin-left: 0.5rem;
}}

@media (min-width: 1200px) 
{.makelan {
max-width: 20rem;
margin-right: 2rem;
margin-top: -0.5rem;    
}}

a.bg-primary:hover, a.bg-primary:focus,
button.bg-primary:hover,
button.bg-primary:focus {background-color: #437ACF !important;}

a:hover {color: #0056b3; text-decoration: none;}
#posts  a:hover {opacity: 0.5;}

a .img-fluid:hover {opacity:0.6;
}

.footer a {color:#ffffff;}
small,
.small {
    line-height: 0.2rem;
	font-size: 0.85rem;
}
small2,
.small2 {
	font-size: 0.8rem;
}
/*  navi*/
.navi{margin-top: 2.8rem; z-index: 1030;}

@media (min-width: 768px) {.navi{position: fixed; top: 0.4rem; left: 0; right: 0; z-index: 1030;}}
@media (min-width: 1200px) {.navi{position: fixed; top: 0.85rem; left: 0; right: 0; z-index: 1030;}}

.navbar-light .navbar-nav .nav-link {
color: #3B3B3B;
font-size: 1.1rem;
line-height:2rem;
z-index: 1030;
}
@media (min-width: 922px) {
.navbar-light .navbar-nav .nav-link {
font-size: 1rem;
}	
}

.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus {color: rgba(79,79,79,0.8);}
.dropdown-item {
    padding-top: 1.5rem;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
    padding-bottom: 1.5rem;
    color: #4F4F4F;
    font-size: 1.1rem;
    border-bottom: 1px solid #DBDBDB;
}
@media (min-width: 768px) {
.dropdown-item {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
font-size: 0.85rem;
	}}
@media (min-width: 922px) {
.dropdown-item {
font-size: 0.95rem;
	}}


/* nappulat */
.navbar-toggler {  border-radius: 0rem;}

#filters .btn.btn-sm {
padding: 0.5rem;}
@media (min-width: 768px) {
#filters .btn.btn-sm {
padding: 1rem;}}

.btn {
border-radius: 0rem; padding:1rem; font-weight: 700; border:0px;}
.btn:focus, .btn.focus {
box-shadow: 0 0 0 0rem rgba(0, 123, 255, 0);}
.btn:hover
{ color: #fff;  opacity: 0.7;
}.btn-primary {
color: #fff;
background-color: #007bff;}
.btn-primary:hover
{ color: #fff;  background-color: rgba(38,70,147,0.80);
}
.btn-primary:focus, .btn-primary.focus {
box-shadow: 0 0 0 0rem rgba(38, 143, 255, 0);}

.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
box-shadow: 0 0 0 0rem rgba(38, 143, 255, 0);
}

.btn-secondary {
color: #fff;
background-color: rgba(83,83,83,1.00);}
.btn-secondary:focus, .btn-secondary.focus {
box-shadow: 0 0 0 0rem rgba(38, 143, 255, 0); border:0px;
}

.btn-secondary:not(:disabled):not(.disabled):active:focus, .btn-secondary:not(:disabled):not(.disabled).active:focus,
.show > .btn-secondary.dropdown-toggle:focus {
box-shadow: 0 0 0 0rem rgba(130, 138, 145, 0);
}
.btn-outline-light {
border: 1px solid #f8f9fa;
}
.btn-outline-transparent {
border: 1px solid rgba(248,249,250,0.00);
color: #ffffff;
}
.btn-outline-transparent:hover {
border: 1px solid rgba(248,249,250,0.00);
color: rgba(248,249,250,0.60);
}
.btn-outline-laskin {
border: 1px solid rgba(248,249,250,0.00);
color: #535353;
font-size: 1.1rem;
}
@media (min-width: 768px) {
.btn-outline-laskin {
font-size: 0.85rem;
}
}
@media (min-width: 922px) {
.btn-outline-laskin {
font-size: 0.95rem;
	}}
.btn-outline-laskin:hover {
border: 1px solid rgba(248,249,250,0.00);
color: #535353;
}
.btn-outline-dark {
border: 1px solid #888888;
}
.btn-kampanjat {
    color: rgba(255,255,255,1.00);
    border: 1px solid #FFFFFF;
    padding-top: 0.5rem;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.7rem;
    float: left;
    clear: both;
    text-transform: none;
}

.btn-beely
{
    font-family: 'Open Sans Condensed', sans-serif;
    color: black;
    text-transform: uppercase;
    background-color: #f3e434;
    border: 1px solid #f3e434;
}
.btn-beelyB
{
    font-family: 'Open Sans Condensed', sans-serif;
    color: #f3e434;
    text-transform: uppercase;
    background-color: black;
    border: 1px solid black;
   
}
@media (min-width: 576px) {.btn-kampanjat {
padding: 1rem;
font-size: 1rem;}
}
@media (min-width: 992px) {.btn-kampanjat {
font-size: 1.5rem;
}
}

.btn-kampanjat:hover{
background-color: rgba(38,70,147,0.50);
color: rgba(255,255,255,1.00);
border: 1px solid #FFFFFF;
}
.pikalinkit h3 {font-size: 1.2rem; padding-top:1rem;}
@media (min-width: 992px) {.pikalinkit h3 {font-size: 1.5rem;}
}
.pikalinkit a {color:#FFFFFF;}
.pikalinkit a:hover {opacity:0.6;}
/* logot */

.automerkit{
    max-width: 6rem;
    padding: 0.5rem;
}


/* swiper */
.swiper {
        width: 100%;
        height: 100%;
      }
@media (min-width: 1200px) {
.swiper { width: 1200px;  height: 600px;}}
.swiper-slide {
    margin-top:0;
	text-align: left;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: left;
    -ms-flex-pack: left;
    -webkit-justify-content: left;
    justify-content: left;
    -webkit-box-align: left;
      }

.swiper-slide img {
        display: block;
        width: 100%;
		  height: 100%;
        object-fit: cover;
      }
.swiper_text {
    color: rgba(0,0,0,1.0);
    width: 100%;
    float: left;
    text-align: left;
    position: absolute;
    bottom: 1rem;
    left: 1rem;
}
.text-top {
    position: absolute;
    top: 1rem;
    left: 1rem;
    width: 100%;

}

@media (min-width: 576px) {	
.text-top {
    position: absolute;
	top: 2rem;
	left: 3rem;
    width: 80%;

}}

.swiper_text p {
font-size: 0.7rem;
line-height: 0.8rem;
margin-bottom: 1rem;
max-width: 60%;    
}
.swiper_text h2 {
    font-size: 1.1rem;
    text-transform: none;
    line-height: 1rem;
    font-weight: normal;
    margin-bottom: 0.1rem
}

.swiper_text h3 {
    font-size: 1rem;
    color: rgba(0,0,0,1.00);
    line-height: 1.3rem;
    text-transform: none;
    font-weight: normal;
    margin-bottom: 0.1rem

}

.swiper-slide .swiper_text.text-top img {max-width: 5rem; }

@media (min-width: 577px) {	
.swiper_text h2 {font-size: 2rem; line-height: 2.1rem; }
.swiper_text h3 {font-size: 1.8rem; line-height: 2rem; }
.swiper_text p {font-size: 1rem; line-height: normal; max-width: 70%;}
}


@media (min-width: 768px) {	
.swiper_text h2 {font-size: 2.3rem; line-height: 2.5rem;}
.swiper_text h3 {font-size: 2rem; line-height: 2rem; max-width: 85%;}
.swiper_text p {font-size: 1.2rem; line-height: normal;}
.swiper-slide .swiper_text.text-top img {max-width: 7rem; }
}

@media (min-width: 992px) {
.swiper_text h2 {font-size: 3rem; line-height: 4rem;}


.swiper_text h3 {font-size: 2.2rem;}
.swiper_text p {font-size: 1.3rem;}
.swiper-slide .swiper_text.text-top img {max-width: 10rem;}    
}

@media (min-width: 1200px) {
.swiper-slide .swiper_text.text-top img {max-width: 20rem;}}

.swiper-button-prev,
.swiper-button-next {
    color: rgba(255,255,255,1);
    text-shadow: 0px 0px 20px rgba(42,91,167,0.80);
    }



/* etusivunkampanjat */


.es_kampanjat {
display: block;
color: rgba(0,0,0,1.00);
opacity: 0.8;
}
.es_kampanjat:hover {opacity:1; }

.es_kampanjat a .tarjous {
display: inline-block;
text-align: left;
color: rgba(255,255,255,1.00);
padding-left: 1rem;
background-image: -webkit-linear-gradient(270deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.5) 81.35%);
background-image: -moz-linear-gradient(270deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.5) 81.35%);
background-image: -o-linear-gradient(270deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.5) 81.35%);
background-image: linear-gradient(180deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.5) 81.35%);
padding-top: 1rem;
padding-right: 1rem;
padding-bottom: 1rem;
visibility: visible;
width: 100%;
font-size: 1.1rem;

}
@media (min-width: 576px) {
.es_kampanjat a .tarjous {
font-size: 1rem;
color: rgba(255,255,255,1.0);
}}
@media (min-width: 768px) {
.es_kampanjat a .tarjous {
font-size: 1.1rem;
}}
@media (min-width: 992px) {
.es_kampanjat a .tarjous {
font-size: 1.2rem;
}}

@media (min-width: 1200px) {
.es_kampanjat a .tarjous {
font-size: 1.3rem;
}}
@media (min-width: 1400px) {
.es_kampanjat a .tarjous {
font-size: 1.4rem;

}}

@media (min-width: 576px) {
.es_kampanjat a:hover .tarjous  {
color: rgba(255,255,255,1.00);

}
}
.kampanjat .img-fluid {
margin-bottom: 1rem;
}
/* kampanjat */
#posts {
    border-left: 1px solid rgba(232,232,232,1.00);
	    border-top: 1px solid rgba(232,232,232,1.00);
}
.item {
	border-bottom: 1px solid rgba(232,232,232,1.00);    
    border-right: 1px solid rgba(232,232,232,1.00);

}
.item2 {
    border: 1px solid rgba(232,232,232,1.00);
}
@media (min-width: 576px) {
.item {
    height: 22rem;
}
.item2 {
    height: auto;
	}
.item2 img {
    width: 75%;
}
}


@media (min-width: 768px) {
    .item {
    height: 23rem;
}
.item2 {
    height:auto;
	}}
@media (min-width: 922px) {
.item {
    height: 25rem;
	}.item2 {
    height:auto;
	}}
@media (min-width: 1200px) {
.item {
    height: 21rem;
	}.item2 {
    height: 30rem;
	}.item2 {
    height:auto;
	}}
.item h2 {
    font-size: 1rem;
    padding-top: 1rem;
    color: #666666
}
.item .border h2 {
    margin-top: 0rem;
}

.item h3 {font-size: 1rem; }
.item p {font-size: 0.9rem; }
.item3 {
    height: auto;
	}
.item3 h2 {
    font-size: 1.2rem;
    padding-top: 1rem;
    color: #666666
}
.item3 h3 {font-size: 1rem; }
.item3 a .btn {
	padding:0.7rem;
	font-size: 0.8rem;
	margin-top:0.5rem;}

@media (min-width: 768px) {
#posts .item a .btn {
    bottom: 10px;
    position: absolute;
    right: 10%;
	}
}

@media (min-width: 576px) {
.item2  a .btn {
position: relative;
	padding:0.5rem;
	font-size: 0.9rem;
	margin-top:0.5rem;}

.item2 .btn {
position: relative;
	padding:0.5rem;
	font-size: 0.9rem;
	margin-top:0.5rem;	}
}
	
.form-control-sm {
  height: calc(1.5em + 0.5rem + 2px);
  padding: 0.2rem 0.2rem;
  font-size: 0.8rem;
  line-height: 1.5;
  border-radius: 0.2rem;
}

.form-control-file,
.form-control-range {
  display: block;
  width: auto;
}

.kalenteri {min-height: 50px;}


/* modal */

.modal.fade .modal-dialog {
transition: -webkit-transform 1s ease-out;
transition: transform 2s ease-out;
transition: transform 2s ease-out, -webkit-transform 2s ease-out;
-webkit-transform: translate(0, -50px);
transform: translate(0, -50px);
}
.fade-in {animation:opac 0.8s} @keyframes opac{from{opacity:0} to{opacity:1}}


.modal-header {
  border-bottom: 0px;
}


.modal-footer {
  -ms-flex-pack: center;
  justify-content: center;
	border-top: 0px;
}
.y-ind {
    font-size: 40%;
    vertical-align: super;
}

.modaali {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* Läpinäkyvä musta tausta */
}




/* hp-modaali */

.modaali-content {
background-color: #f8e638 !important;
margin: 14% auto;
padding: 1rem;
padding-top: 0;
border: 1px solid #888;
width: 80%;
padding-bottom: 0;
font-size: 14px;    }

@media (min-width: 922px) {
.modaali-content {
margin: 11% auto;
width: 70%;
 }
}  
.close-modaali {
    color: #FFFFFF;
    background-color: #000000;
    float: right;
    font-size: 2rem;
    font-weight: bold;
}

.close-modaali:hover,
.close-modaali:focus {
color: rgba(255,255,255,1.00);
background-color: #878787;
text-decoration: none;
cursor: pointer;
}