@charset "utf-8";
/* CSS Document */

html{
	scroll-behavior: smooth;}

body {
    font-family: 'Montserrat', sans-serif;
    padding-bottom: 0px;
    padding-top: 0px;
    font-size: medium;
    max-width: none;
}
.fade-in{animation:opac 0.8s} @keyframes opac{from{opacity:0} to{opacity:1}}



/*buttons*/
.btn {
color: #FFFFFF;
border-radius: 50px;
padding-left: 1rem;
padding-right: 1rem;
}
.btn-primary {
    background-color: #2C1900;
    border-color: #2C1900;
}
.btn-secondary {
background-color: #806A26;
border-color: #806A26;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary.focus, .btn-primary.active, .btn-primary:active, 
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary.focus, .btn-secondary.active, .btn-secondary:active 
{
  color: #fff;
  text-decoration: none;
    background-color: #B19334!important;
    border-color: #B19334!important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}


/*elements*/
#jacobspalkki {
    font-weight: 400;
    font-size: 1.5rem;
    color: rgba(255,255,255,1.00);
    line-height: 1.7rem;
    text-align: center;
}

@media (min-width: 768px) {
#jacobspalkki {
    font-size: 2rem;
    padding-right: 2rem;
    padding-left: 2rem;
    line-height: 2.3rem;
    text-align: left;
    padding-top: 1rem;
    padding-bottom: 1rem;
}}

.hotcold {
    background-image: -webkit-linear-gradient(180deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.41) 100%), url(../images/cafitesse-excellence-hot-and-cold-comm.webp);
    background-image: -moz-linear-gradient(180deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.41) 100%), url(../images/cafitesse-excellence-hot-and-cold-comm.webp);
    background-image: -o-linear-gradient(180deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.41) 100%), url(../images/cafitesse-excellence-hot-and-cold-comm.webp);
    background-image: linear-gradient(270deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.41) 100%), url(../images/cafitesse-excellence-hot-and-cold-comm.webp);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    font-weight: 900;
    text-align: left;
    padding-top: 4rem;
    padding-bottom: 4rem;
    padding-right: 4rem;
    padding-left: 4rem;
    color: rgba(255,255,255,1.00);
    text-shadow: 0.3rem 0.3rem 0.6rem rgba(0,0,0,0.60);
}

@media (min-width: 992px) {
   .hotcold {
 padding-top: 6rem;
    padding-bottom: 6rem;
}}
@media (min-width: 1200px) {
   .hotcold {
 padding-top: 4rem;
    padding-bottom: 4rem;
}}

.davincis {
    background-image: -webkit-linear-gradient(180deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.41) 100%), url(../images/800/davinci-juomia-vanilja.webp);
    background-image: -moz-linear-gradient(180deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.41) 100%), url(../images/800/davinci-juomia-vanilja.webp);
    background-image: -o-linear-gradient(180deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.41) 100%), url(../images/800/davinci-juomia-vanilja.webp);
    background-image: linear-gradient(270deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.41) 100%), url(../images/800/davinci-juomia-vanilja.webp);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: cover;
    font-weight: 900;
    text-align: left;
    padding-top: 4rem;
    padding-bottom: 4rem;
    padding-right: 4rem;
    padding-left: 4rem;
    color: rgba(255,255,255,1.00);
    text-shadow: 0.3rem 0.3rem 0.6rem rgba(0,0,0,0.60);
}

@media (min-width: 992px) {
   .davincis {
 padding-top: 6rem;
    padding-bottom: 6rem;
}
}
@media (min-width: 1200px) {
   .davincis {
 padding-top: 8rem;
    padding-bottom: 8rem;
}
}
.footer {
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: contain;
    background-color: #2C1900;
}


/*etusivu*/

#konsepti .btn.btn-secondary.btn-sm {
    position: static;
    bottom: 0%;
    left: auto;
    right: auto;
    margin-bottom: 0px;
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;
    padding-top: auto;
    padding-right: auto;
    padding-bottom: auto;
    padding-left: auto;
}


#ratkaisut .col {
    padding-top: 1rem;
    padding-bottom: 1rem;
}
#ratkaisut .col:hover {
    opacity: 0.9;
}

@media (min-width: 576px) {

#ratkaisut .col {
    padding-top: 3rem;
    padding-bottom: 3rem;
    }
}
.kielet {
    float: right;
    clear: none;
    padding-bottom: 1rem;
}

@media (min-width: 576px) {

.kielet {
    padding-bottom: 0;
    }}

.lippu {
    max-width: 2rem;
    margin-right: 2rem;
}
@media (min-width: 576px) {
.lippu {
    margin-right: 1rem;
}
}
.kahvi-symbolit{max-width: 4rem;}

.vastuulisuus-symbolit{
    max-width: 6rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    }
@media (min-width: 576px) {.vastuulisuus-symbolit{
    max-width: 10rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    }}


.ruutuun  {
    opacity: 0; 
    transform: translateX(100%); 
    animation: liikkeen-animointi 1s ease-out 2s forwards; /* Käytetään animaatiota, joka kestää 1 sekunnin, päättyy loivaan ja alkaa 2 sekunnin viiveellä */
}
@keyframes liikkeen-animointi {
    from {
        opacity: 0; 
        transform: translateX(100%); 
    }
    to {
        opacity: 1; 
        transform: translateX(0); 
    }
}