/* cmsms stylesheet: bandb modified: 06.02.2025 11.53.00 */

body {
  font-family: 'Raleway', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
  color: #202020;
  background:#ece9e9;
}
.fa{color:white;}
.fa:hover{color:#ae1317;}
.laatikko{
    background: #0c0c0c; 
    color:white;
    padding:10px;
    padding-left:35px;
    padding-right:35px;
    margin-bottom:15px;
    box-shadow: 10px 12px 0.5rem rgba(0,0,0,0.5);
    border-radius: 10px;
}
.nappula{
background-color:#009639;
color:white;
padding: 15px;
font-weight:bold;
border-radius:5px;
box-shadow: 10px 12px 0.5rem rgb(0 0 0 / 50%);
}
.nappula:hover{
background-color:white;
color:#009639;
}
.laatikko_maal{
background-image: url("https://automaalaamokuopio.fi/uploads/images/ruisku.png"); 
background-repeat: no-repeat;
background-position: right;
color:white;
    padding:10px;
    margin-top: 15px;
    margin-bottom:15px;
    box-shadow: 10px 12px 0.5rem rgba(0,0,0,0.5);
    border-radius: 10px;
}
.laatikko_hin{
background-image: url("https://automaalaamokuopio.fi/uploads/images/hinaus_500.png"); 
background-repeat: no-repeat;
background-position: right;
color:white;
    padding:10px;
    margin-top: 15px;
    margin-bottom:15px;
    box-shadow: 10px 12px 0.5rem rgba(0,0,0,0.5);
    border-radius: 10px;
}
.laatikko_kola{
background-image: url("https://automaalaamokuopio.fi/uploads/images/tyokalut.png"); 
background-repeat: no-repeat;
background-position: right;
color:white;
    padding:10px;
    margin-top: 15px;
    margin-bottom:15px;
    box-shadow: 10px 12px 0.5rem rgba(0,0,0,0.5);
    border-radius: 10px;
}
.laatikko_tark{
background-image: url("https://automaalaamokuopio.fi/uploads/images/tarkt.png"); 
background-repeat: no-repeat;
background-position: right;
color:white;
    padding:10px;
    margin-top: 15px;
    margin-bottom:15px;
    box-shadow: 10px 12px 0.5rem rgba(0,0,0,0.5);
    border-radius: 10px;
}
/*div#content-columns{
    background-image: url(https://automaalaamokuopio.fi/uploads/images/snap21920.png);
    background-size: cover;
    background-attachment: fixed;
    color:white;
}*/

.laatikkov{
    background: white; 
    padding:10px;
    margin-top: 15px;
    margin-bottom:15px;
    box-shadow: 10px 12px 0.5rem rgba(0,0,0,0.5);
    border-radius: 10px;
}

.column.row.text-center{background: #ffffff8f;}
eioo.content-columns{background: #000000d9;border-radius:10px;}
.column.medium-5{width:50%;}

.cms_submit{padding:10px;}
.cms_submit:hover{box-shadow: 5px 8px 0.5rem rgb(0 0 0 / 50%);}
label{float: left;}

input#cntnt01fbrp_submit, input#fbrp__24, input#fbrp__23, input#fbrp__21{
    border: none;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  padding-top: 50px;
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 15px;
  border: 1px solid #888;
  width: 80%;
  max-width:650px;
}
.close {
  color: #aaaaaa;
  float: right;
  font-size: 38px;
  font-weight: bold;
}
.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
#myBtn{ 
position: fixed;
background:white;
left:1px;
z-index: 10;
bottom:0px;
padding:10px;     
border-top-right-radius: 10px;    
border-top-left-radius: 10px;
}
#myBtn:hover{ background:#ae1317;color:white; border-top-right-radius: 10px;border-top-left-radius: 10px;}

.palvelun{
position:absolute;
right:0px;
color:black;
display: flex;
align-items: center;
background:black;
overflow:hidden;
padding-left:25px;
border-radius:50px 0px 0px 50px;
width:150px;
height:100px;
transition: all 0.5s ease-in-out;
}
.palvelun:hover{
width:300px;
background:#ae1317;
height:100px;
color:white;
font-size:22px;
vertical-align:middle;
transition: all 0.8s ease-in-out;
}
.vauk{top:140px}
.vauk:after { content: ' Kolarikorjaus';}
.maal{top:240px}
.maal:after {
    content: ' Auton maalaus';
}
.tuul{top:340px;}
.tuul:after {
    content: ' Tuulilasin korjaus ';src: url('https://automaalaamokuopio.fi/kuopio/index.php?page=tuulilasi');
}
.tuulv{top:440px;}
.tuulv:after {
    content: ' Tuulilasin vaihto';src: url('https://automaalaamokuopio.fi/index.php?page=tuulilasi');
}
.vaut{top:540px;}
.vaut:after { content: ' Vahinkotarkastukset';}
li a {
    color: white;
}
.dropdown.menu.medium-horizontal>li.opens-left>.is-dropdown-submenu{
background:black; border:none;right:auto;left:auto;border-radius: 15px 5px 30px 5px;}

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

.oikealta-photo {
  border-radius: .25em;
  box-shadow: 1em 1em 2em .25em rgba(0,0,0,.2);
  margin: 2em auto;
  opacity: 0;
  transform: translateY(4em) rotateZ(-5deg);
  transition: transform 4s .25s cubic-bezier(0,1,.3,1),
  opacity .3s .25s ease-out;
  max-width: 600px;
  will-change: transform, opacity;
}

.oikealta.is-visible {
  opacity: 1;
  transform: rotateZ(-2deg);
}

.inline-photo {
  margin-left: auto;
    margin-right: auto;
  border-radius: .25em;
  /*box-shadow: 1em 1em 2em .25em rgba(0,0,0,.2);*/
  opacity: 0;
  transform: translateY(4em) rotateZ(-5deg);
  transition: transform 4s .25s cubic-bezier(0,1,.3,1),
  opacity .3s .25s ease-out;
  will-change: transform, opacity;
}

.inline-photo.is-visible {
  opacity: 1;
  transform: rotateZ(0deg);
}

a {
  color: #ae1317;
  transition: all 0.2s ease;
}

a:hover, a.menuactive {
  color: #ae1317;
}
.content-columns{
transition-timing-function: ease-in;
transition: width 2s;
}
p{text-shadow: 15px 5px 0.8rem rgb(0 0 0 / 50%);}
h1 {
  font-family: 'Just Another Hand';
  font-size: 4rem;
  margin-top: 1rem;
  margin-bottom: 0;
}

h1 a, h1 a:hover {
  color: #202020;
}
h2{font-size:1.5rem;text-shadow: 10px 12px 0.5rem rgb(0 0 0 / 50%);}

h2, h3, h4 {
  font-family: 'Oswald';
}

h3 {
  font-size: 1.4rem;
  margin-top: 1rem;
  text-transform: uppercase;
}
h4{font-size:1.7rem;}
#header{background:black;
/*background: linear-gradient(105deg,transparent 0%,transparent 45%,#b4cad9 50%,#202020 100%), linear-gradient(#505050,#000000), repeating-linear-gradient(transparent 0%,transparent 25%,#909090 25%,#909090 37.5%);
    background-blend-mode: multiply;*/
}
#header-image{background:black;min-height: 500px;float: left;}
.sticky-container{
    background: linear-gradient(105deg,transparent 0%,transparent 5%,#e32400 60%,#202020 100%), linear-gradient(#505050,#000000), repeating-linear-gradient(transparent 0%,transparent 25%,#909090 25%,#909090 37.5%) !important;
    background-blend-mode: multiply;
}
.row{max-width:unset;}

#sticky-logo a {
  transition: all 0.3s ease;
  font-size: 0rem;
  line-height: 1rem;
  opacity:0;
}
.sticky.is-stuck.is-at-top{
    background: linear-gradient(105deg,transparent 0%,transparent 5%,#e32400 30%,#202020 100%), linear-gradient(#e32400,#000000), repeating-linear-gradient(transparent 0%,transparent 25%,#909090 25%,#909090 37.5%);
    background-blend-mode: multiply;}

.is-stuck #sticky-logo a {
  display: block;
  opacity:1;
}

#sticky-logo {
  float: left;
margin-top: -10px;
}

#menu-toggle {
  float: right;
}
.avoinna{
    color: white;
max-width: 650px;
    background: #0000005c;
    border-radius: 5px;
    position: absolute;
    padding: 5px;
    margin: 20px;}

.top-bar, .top-bar ul, .is-drilldown-submenu {
  background-color: unset;
font-family: 'Oswald';
    font-size: 1.5rem;
  z-index: 999;
}

.dropdown.menu.medium-horizontal>li.is-dropdown-submenu-parent>a:after {
  border-color: #ae1317 transparent transparent;
}

.divider {
  background: #d2d0d09e;
  margin: 1rem 0;
  padding: 0.5rem;
  font-size: 2rem;
}

.divider a {
  color: #202020;
  margin: 0 0.5rem;
}

.divider a:hover {
  color: #ae1317;
}

.card-divider {
  background: #202020;
  color: #f1f1f1;
}

.button {
  background: #f1f1f1;
  color: #202020;
  max-width:300px;
  border-radius: 5px;
box-shadow: 3px 3px 6px #777;
}

.button:hover {
  background: #831100;
  color: white;
}
.button img:hover{-webkit-filter: saturate(6);
   filter: saturate(6);}
a:visited{border:unset;}

.divider .button {
  background: black;
  color: white;
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
  border: none;
 padding: 0px;
}

.divider .button:hover {
  background: #ae1317;
  color: white;
}

footer {
  background: black;
  color: #f1f1f1;
margin-bottom: 0px;
}

footer .column {
  padding: 0 2rem;
}

footer h4 {
  margin-top: 1rem;
  color: #f1f1f1;
  padding-bottom: 0.2rem;
}

footer i {
  margin-right: 0.5rem;
}

#copyright {
  border-top: 0.5px solid #f1f1f1;
}

#copyright span {
  margin: 0 1rem;
}

#content-columns h4 {
  text-align: center;
  font-size: 1.1rem;
  text-transform: uppercase;
}
footer{padding-bottom:30px;}

.koneella{display:none;}

/* Small only */
@media screen and (max-width: 39.9375em) {
  .is-stuck #sticky-logo {
    font-size: 1.6rem;
    padding-top: 0.5rem;
  }
table{
width:100%;
margin-right:auto;margin-left:auto;
}
.laatikko_kola{background-image:unset;}
.laatikko_maal{background-image:unset;}
.laatikko_tark{background-image:unset;}
.koneella{display:block;}
.column medium-4{max-width:30%;}
.mobiil{display:none;}
.palvelun{display:none;}
.column.medium-5 {
    width: 100%;
}
footer .column {    padding: 0 0rem;}
.avoinna{margin-left: 20%;margin-right:20%;}
.colum.row.text-center{margin-top:160px;}
header{display:none;}
#header-image{background:unset;min-height: unset;float: left;max-height:300px;}
.banner{max-height:200px;}
h2{font-size: 1rem !important;}
.top-bar .top-bar-right{margin-top: 20px;}
.divider{margin:unset;}
}

/* Medium and up */
@media screen and (min-width: 40em) {}

/* Medium only */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
#header-image{background:unset;min-height: unset;float: left;max-height:300px;}
.palvelun{display:none;}
.colum.row.text-center{margin-top:160px;}
.column medium-4{width:30%;}
  .is-stuck #sticky-logo {
    font-size: 1.6rem;
    padding-top: 0.5rem;
  }
h2{font-size: 1.1rem !important;}
.button{max-width: unset;}
#cf3{display:none;}
.menu>li>a{font-size:1rem;}
.mobiilissa{display:unset;}
.tietokoneella{display:none;}
footer {font-size: 0.8rem;}
h3{font-size:1rem;}
}

/* Large and up */
@media screen and (min-width: 64em) {}

/* Large only */
@media screen and (min-width: 64em) and (max-width: 74.9375em) {}