/* 
####################
## Navigation and top bar(s) ##
####################
 */

.palvelemme {
    padding: 5px 5px 5px 12px;
}

.brand {
    background-color: #ffff00;
    padding: 10px 5px 10px 15px;
}

img.palvelemme {
    min-width: 608px;
    min-height: 39px;
}

img.brand {
    min-width: 608px; 
    min-height: 39px;
}

.navbar {
    position: relative;
    z-index: 10;
    background: transparent;
    top: -14px;
}

.navbar-toggler-icon {
    border: 2px solid #d0383f;
    border-radius: 2px 2px;
    background-color: #ffff00;
    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(0,0,0, 1)' stroke-width='4' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
    height: 36px;
    width: 36px;
}

.carousel {
    position: relative;
    z-index: 0;
    top: -65px;
}

.carousel-muut {
    position: relative;
}

.bodybox {
    position: relative;
    top: -65px;
}

.bodybox-muut {
    position: relative;
}

.row {
    margin: 0;
}

/* 
##########################
## Navigation bar links ## 
##########################
*/

/* Slanted squares */
a.nav-link {
    background-color: #ffff00;
    margin: 0 9px 9px 0;
    border: 2px solid #cc0033;
    color: #d0383f;
    text-align: center;
    font-weight: bold;
    -ms-transform: skewX(-25deg);
    -webkit-transform: skewX(-25deg);
    transform: skewX(-25deg);
    display: inline-block;
    padding-top: 4px;
    padding-bottom: 4px;
}

/* Slanted square hover */
a.nav-link:hover {
    background-color: #d3c017;
}

/* Upright text */
p.navvy {
    margin: 0;
    -ms-transform: skewX(25deg);
    -webkit-transform: skewX(25deg);
    transform: skewX(25deg);
    display: inline-block;
}

/* Custom navbar colours */
a.factory {
    background-color: #000;
    color: #ffff00;
}

a.factory:hover {
    background-color: #383838;
    color: #ffff00;
}

a.gruppe {
    background-color: #9a9a9a;
    color: #232323;
}

a.gruppe:hover {
    background-color: #bcbcbc;
    color: #232323;
}

a.eng {
    background-color: #fff;
    color: #cc0033;
}

a.eng:hover {
    background-color: #d8d8d8;
    color: #cc0033;
}

a.active {
    background-color: #cc0033;
    color: #ffff00;
}

/* 
###################
## Miscallenious ##
###################
*/

/* Red HR -line */
hr {
    margin-top: 0;
    margin-bottom: 4px;
    border-top: 2px solid #cc0033;
}

/* Call link red */
a.telephone {
    color: #cc0033; 
}

/* Gruppe red texts */
em.gruppe {
    color: #cc0033;
    font-style: normal;
}

.youtube-video-container {
    position: relative;
    overflow: hidden;
    width: 100%;
  }
  
  .youtube-video-container::after {
    display: block;
    content: "";
    padding-top: 56.25%;
  }
  
  .youtube-video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

/* 
######################
## Body and content ##
######################
*/

/* Maxmimum body width */
body {
    max-width: 2600px;
    font-family: 'Chakra Petch', sans-serif;
}

/* Gradient -alue */
.ensiteksti {
    background-image: linear-gradient(#ffff00, 20%, white);
}

/* --- */
.kohdennus {
    padding: 36px 64px 0 64px;
    margin: 0 0 34px 0;
}

/* phone number image */
.numero {
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 35px;
}

img.puhnro {
    width: 398px;
    height: 41px;
}

/* Viking -kuvapalkki */
.viking {
    background-color: #cc0033;
    margin-top: 0rem;
    margin-bottom: 0rem;
}

/* Footer -alue */
.footer {
    background-color: #636463;
    color: #fff;
    height: auto;
    padding: 24px 24px 20px 24px;
}

img.footer {
    padding: 0;
    min-width: 325px;
    min-height: 75px;
}
    
/* Copyright -teksti */
.copyright {
    color: #3a3a3a;
    margin: 20px 20px 20px 20px;
}

/* Footer section links */
.list-unstyled {
    white-space: normal !important; 
    word-wrap: break-word;  
  }

ul {
    list-style-type: none;
    margin: 0;
    padding: 0 0 5px 0;
}

ul.listed {
    list-style-type: square;
}

a.ao {
    color: #fff;
    text-decoration: underline #cc0033;
}

a.ao:hover {
    color: #e2e2e2;
}

/* Card pack */
.card {
    margin-left: auto;
    margin-right: auto;
    min-width: 250px;
    max-width: 250px;
    border: 1px solid #fff;
}

/* Modifications for smaller screens */
@media screen and (min-width: 375px) {
    .card {
	    margin-left: auto;
	    margin-right: auto;
	    min-width: 325px;
	    max-width: 325px;
    }

    h2.soita {
        font-size: 1.9em;
    }
}

@media screen and (min-width: 575px) {
    .card {
	    min-width: 475px;
        max-width: 475px;
    }
}

@media screen and (min-width: 1250px) {
    .card {
	    min-width: 275px;
        max-width: 275px;
    }
}

@media screen and (max-width: 391px) {
    h1.etusivu {
        font-size: 2.1rem;
    }
    
    h2.etusivu {
        font-size: 1.5rem;
    }
}

@media (max-width: 796px) {
    .brand {
        background-color: #ffff00;
        padding: 5px 5px 5px 7px;
    }
    
    img.brand {
        min-width: 350px;
        min-height: 20px;
    }

    .palvelemme {
	    padding: 5px 5px 5px 5px;
    }

    img.palvelemme {
	    min-width: 350px;
	    min-height: 20px;
    }

    img.footer {
	    min-width: 325px;
	    min-height: 75px;
	    padding: 0;
    }
    .numero {
	    padding-top: 1rem;
	    padding-bottom: 1rem;
	    padding-left: 15px;
    }
    img.puhnro {
	    max-width: 298px;
	    max-height: 30px;
    }
}

@media (max-width: 992px) {
    .ensiteksti {
	    padding: 30px 36px 0 36px;
    }
    
    .navbar {
        position: relative;
        z-index: 10; /* Tärkeys päällimmäisenä ololle (suurempi = tärkeämpi) */
        background: #ffff00;
        top: -10px; /* Sijainti 113px ylimmästä sijainnista (0) alaspäin */
    }

    .carousel {
        position: relative;
        z-index: 0;
        top: -10px;
    }

    .bodybox {
        position: relative;
        top: -10px;
    }

    button.navbar-toggler {
        padding-left: 5px;
        padding-right: 5px;
    }

    .ajankohtaista {
        padding-left: 0rem !important;
        padding-right: 0rem !important;
    }

}