/* kooders.css
* ==========
* Kooders 2019
* CSS for Parikkalan valo
* Contains CSS for Parikkalan valo
*/

/*
--------------------------------------------------------------
# TABLE OF CONTENTS:
--------------------------------------------------------------
# Typography
# Elements
# Page structure
## C5 admin panel list width fix
--------------------------------------------------------------
*/

/*
--------------------------------------------------------------
# Typography
--------------------------------------------------------------
*/

/*
--------------------------------------------------------------
# Elements
--------------------------------------------------------------
*/

body {
    color: #1a1a1a;
    font-family: 'Barlow', sans-serif;
    background-color: #FFF;
}

h1, h2 {
    color: #025398;
    /*font-family: titling-gothic-fb, sans-serif;*/
    font-weight: 800;
}

h3, h4 {
    font-weight: bold;
    color: #025398;
    /*font-family: titling-gothic-fb, sans-serif;*/
}

h5, h6 {
    margin-bottom: 0px;
}

.larger {
	font-size: 1.3em;
}

.larger h3 {
	font-size: 2.3em;
}

.linkCard .btn-secondary,
.linkCard .btn-secondary:hover {
	border: 2px solid #282827;
	color: #282827;
	background-color: transparent;
}

.linkCard .card-image {
	height: 200px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.linkCard.blueSpecial { transition: all 0.3s ease; }

.linkCard.blueSpecial:hover h3 { color: #FFF; }

.linkCard.blueSpecial .btn-primary { border: 1px solid #FFF; }

.linkCard.blueSpecial:hover {
	color: #FFF;
	background-color: #035398;
}

.tuotekortti .btn-primary,
.tuotekortti .btn-primary:hover {
	color: #282827;
	border: 1px solid #282827;
	background-color: transparent;
}

.tuotekortti h3 {
	color: #282827;
	font-size: 3rem;
}

.tuotekortti p {
	font-size: 1.2em;
}

.blue { color: #035398; }
.bluebg { background-color: #035398; color: #FFF; }
.bluebg h3 { color: #FFF; }
.bluebg .btn-secondary, .bluebg .btn-secondary:hover { background-color: #FFF; color: #035398; }

.dark, .dark:hover { color: #282827; }
.darkbg { background-color: #282827; color: #FFF; }
.darkbg a, .darkbg a:hover { color: #FFF; }

.green { color: #33cc66; }
.greenbg { background-color: #33cc66; color: #282827; }

.lightgraybg { background-color: #f6f6f6; color: #000; }

.darkbg h1, .darkbg h2, .darkbg h3,
.darkbg h4, .darkbg h5, .darkbg h6 {
	color: #FFF;
}

.darkbg .btn-secondary {
	background-color: #FFF;
	color: #282827;
	border: none;
}

.darkbg .btn-secondary:hover {
	background-color: #FFF;
	color: #282827;
	border: none;
}

#quickPathSection a {
	color: #282827;
	font-size: 1.3em;
}

#blueHightlightSection p:first-child {
	font-size: 3rem;
	font-weight: 700;
}

#blueHightlightSection a,
#blueHightlightSection a:hover {
	color: #FFF;
}

#blueHightlightSection .btn-primary,
#blueHightlightSection .btn-primary:hover {
	color: #035398;
	background-color: #FFF;
}

@media (max-width: 500px){
    h1, h2 {
        word-break: break-word;
    }
    h1 {
        font-size: 1.8rem;
    }
    h2 {
        font-size: 1.5rem;
    }
}

a {
    color: #025398;
    font-weight: bold;
}

nav a {
    color: #f2f2f2;
    font-weight: 400;
    border-bottom: 2px solid transparent;
}

nav a.active,
.nav-item.nav-path-selected a.nav-path-selected {
    border-bottom: 2px solid #f2f2f2;
}

nav a.nav-link:hover {
    color: #f2f2f2;
    border-bottom: 2px solid #f2f2f2;
}

#article_content { font-size: 1rem; }

#article_content.medium, #article_content.large { font-size: inherit; }

#header_strip p, section {
	transition: all 0.3s ease;
}

#page_header.medium, #page_header.large {
	font-size: inherit;
}

#header_strip p.medium, section.medium {
	font-size: 150%;
	transition: all 0.3s ease;
}

#header_strip p.large, section.large {
	font-size: 200%;
	word-break: break-word;
	transition: all 0.3s ease;
}

section.large .page-link-card, section.medium .page-link-card, section.medium .page-link-card-content, section.large .page-link-card-content {
	height: auto;
}

#sizeSelector {
	font-family: 'titling-gothic-fb', sans-serif;
	margin: 0px;
	padding: 0px;
	position: relative;
    display: flex;
}

#sizeSelector li {
	float: left;
	list-style: none;
	margin-left: 2px;
	margin-right: 2px;
	margin-top: auto;
}

#sizeSelector li.selected-letter button {
	text-decoration: underline;
}

#sizeSelector button {
	background-color: transparent;
	border: none;
	padding: 0px;
	margin: 0px;
	cursor: pointer;
}

#sizeSelector li#small {
	font-size: 1.1rem;
}

#sizeSelector li#medium {
	font-size: 125%;
	margin-bottom: -1px;
}

#sizeSelector li#large {
	font-size: 150%;
	margin-bottom: -3px;
}

#hairioTila{
	width: 100%;
    /*background-color: #e30613;*/
	background-color: #ff3c3c;
    color: #FFF;
    text-align: center;
    display: block;
    padding: 0.6rem 0rem;
    font-weight: 400;
    font-size: 1.2em;
}

#navbar_content .navbar-nav li {
    padding: 20px;
}

.btn,
.nav-pills .nav-link {
    border-radius: 0px;
    font-weight: bolder;
}

.nav-pills .nav-link p {
    margin: 0;
}

.btn-navigation {
	border: 2px solid rgba( 2, 83, 152, 0.7 );
    background-color: transparent;
    color: #025398;
    font-size: 1.7em;
    padding: .7rem 3rem;
    font-weight: 500;
    margin: 0px 10px 10px 0px;
}

.btn-navigation:hover {
	background-color: rgba( 2, 83, 152, 1 );
	color: #ffffff;
}

.btn-primary {
    border: none;
    background-color: #035398;
    color: #FFF;
}

.btn-primary:hover,
a.btn-primary:hover {
    border: none;
    background-color: #035398;
}

a.btn-secondary,
.btn-secondary {
    border: none;
    background-color: #035398;
    color: #FFF;
}

.btn-secondary:hover,
a.btn-secondary:hover {
    border: none;
    background-color: #035398;
    color: #FFF;
}

a.btn-category {
	border: none;
	background-color: transparent;
    color: #025398;
	font-family: 'Barlow', sans-serif;
	font-size: 24px;
	font-weight: normal;
}

.nav-tabs .nav-link {
	border: none;
	background-color: transparent;
    color: #025398;
    border-radius: 0px;
    margin-right: 10px;
    margin-bottom: 10px;
    color: #f2f2f2;
        padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
}

#contact_pills {
	display: block;
	text-align: center;
}

#contact_pills li {
	display: inline-block;
	transition: all 0.3s ease;
}

.nav-tabs .nav-link.active, 
.nav-tabs a.nav-link:hover {
   	border-bottom: 2px solid #025398;
    background-color: transparent;
    color: #025398;
}

.nav-tabs .nav-link h1,
.nav-tabs .nav-link h2,
.nav-tabs .nav-link h3,
.nav-tabs .nav-link h4,
.nav-tabs .nav-link h5,
.nav-tabs .nav-link h6 {
	margin-bottom: 0px;
	color: #000;
	padding: .375rem .75rem;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
}

.nav-tabs .nav-link.active h3 {
	color: #025398;
}

.header-icon {
	height: 40px;
	width: auto;
}

.btn-oma-valo {
    background-color: #85c9f0;
    color: #f2f2f2;
	padding: 0.375rem 1.75rem;
}

a.btn.btn-secondary.selected,
.btn.btn-secondary.selected,
a.btn-category:hover {
    border: none;
	background-color: transparent;
    color: #025398;
    border-bottom: 2px solid #025398;
}

.light-btn {
    background-color: rgba( 255, 255, 255, 0.30 );
    font-size: 1.4em;
}

.page-link,
.page-item:last-child .page-link,
.page-item:first-child .page-link {
    background-color: #ffffff;
    color: #01437b;
    border-radius: 50%;
    border: 2px solid #01437b;
    font-size: 1.4em;
    font-weight: bold;
    margin-right: 15px;
    width: 50px;
    height: 50px;
    text-align: center;
}

.page-link.active .page-link,
.page-item.active:last-child .page-link,
.page-item.active:first-child .page-link {
    background-color: #01437b;
    color: #f2f2f2;
}

/* a.page-link:hover,
a.page-item.active:last-child .page-link:hover,
a.page-item.active:first-child .page-link:hover {
    z-index: 2;
    color: #f2f2f2;
    text-decoration: none;
    background-color: #01437b;
    border-color: #01437b;
} */

.form-control {
    background-color: #ffffff;
    border-radius: 0px;
    /*border-color: #ffffff;*/
}

.navbar .dropdown-menu {
	background-color: #025398;
	color: #FFF;
	border-radius: 0px;
}

.navbar .dropdown-menu .dropdown-item,
.navbar .dropdown-menu .dropdown-item:hover {
	color: #FFF;
	background-color: transparent;
}

#header_strip .form-inline button {
    background-color: white;
    border-color: white;
    color: #ff3c3c;
}

.white {
    color: #FFF !important;
}

.white-bg {
    background-color: #FFF;
}

.blue {
    color: #025398;
}

.long-bs {
    box-shadow: 0px 20px 20px -10px #9c9c9c;
    transition: all 0.3s ease;
}

.tuotekortti.long-bs:hover, .linkCard.long-bs:hover {
	margin-top: -5px;
	margin-bottom: 5px;
}

.light-blue-bg {
    background-color: #ebf2f6;
    box-shadow: 0px 7px 20px 0px #d0d0d0;
}

.blue-gradient {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#002961+0,3fa3cf+100 */
    background: #002961; /* Old browsers */
    background: -moz-linear-gradient(45deg, #002961 0%, #3fa3cf 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(45deg, #002961 0%,#3fa3cf 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(45deg, #002961 0%,#3fa3cf 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002961', endColorstr='#3fa3cf',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    color: #f2f2f2;
}

.blue-gradient h1, 
.blue-gradient h2,
.blue-gradient h3,
.blue-gradient h4,
.blue-gradient h5,
.blue-gradient h6 {
	color: #f2f2f2;
}

.mokkivalo-gradient {
	background-image: url('../img/headers/Pava_mokkivalo_tausta.svg');
	background-position: center;
	background-size: cover;
}

.spot-gradient {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#632877+0,8f3d69+100 */
    background: #632877; /* Old browsers */
    background: -moz-linear-gradient(45deg, #632877 0%, #8f3d69 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(45deg, #632877 0%,#8f3d69 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(45deg, #632877 0%,#8f3d69 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#632877', endColorstr='#8f3d69',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    color: #f2f2f2;
}

.spot-gradient a {
    color: #f2f2f2;
}

.spot-btn {
    background-color: #692d84;
    color: #fff;
}

.spot-bg {
    background-color: #0f1b5f;
}

.spot-bg .current {
    background-color: #690355;
}

.spot-container h1,
.spot-container h2,
.spot-container h3,
.spot-container h4,
.spot-container h5,
.spot-container h6,
.spot-container a {
    color: #364078;
}

.spot-gradient .light-btn {
    color: #fff;
}

.tasma-gradient,
.tasmaplus-gradient {
    background: #e30762; /* Old browsers */
    background: -moz-linear-gradient(45deg, #e30762 0%, #e95d0f 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(45deg, #e30762 0%,#e95d0f 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(45deg, #e30762 0%,#e95d0f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e30762', endColorstr='#e95d0f',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    color: #f2f2f2;
}

.tasma-gradient .light-btn,
.tasmaplus-gradient .light-btn {
    color: #fff;
}

.tasma-gradient a,
.tasmaplus-gradient  a {
    color: #f2f2f2;
}

.tasma-bg,
.tasmaplus-bg {
    background-color: #e30762;
}

.tasma-bg .current,
.tasmaplus-bg .current {
    background-color: #e95d0f;
}

.tasma-btn,
.tasmaplus-btn {
    background-color: #e30762;
    color: white;
}

.tasma-container h1,
.tasma-container h2,
.tasma-container h3,
.tasma-container h4,
.tasma-container h5,
.tasma-container h6,
.tasma-container a,
.tasmaplus-container h1,
.tasmaplus-container h2,
.tasmaplus-container h3,
.tasmaplus-container h4,
.tasmaplus-container h5,
.tasmaplus-container h6,
.tasmaplus-container a {
    color: #e30762;
}

.q-gradient {
    background: #ee581c; /* Old browsers */
    background: -moz-linear-gradient(45deg, #ee581c 0%, #FBD100 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(45deg, #ee581c 0%,#FBD100 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(45deg, #ee581c 0%,#FBD100 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ee581c', endColorstr='#FBD100',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    color: #f2f2f2;
}

.q-gradient a {
	color: #f2f2f2;
}

.q-bg {
    background-color: #e64415;
}

.q-bg .current {
    background-color: #fbd100;
}

.q-btn {
    background-color: #ee581c;
    color: white;
}

.q-container h1,
.q-container h2,
.q-container h3,
.q-container h4,
.q-container h5,
.q-container h6,
.q-container a {
    color: #e64414;
}

.kesto-gradient {
    background: #00A091; /* Old browsers */
    background: -moz-linear-gradient(45deg, #00A091 0%, #BCCF42 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(45deg, #00A091 0%,#BCCF42 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(45deg, #00A091 0%,#BCCF42 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1aa795', endColorstr='#BCCF42',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    color: #f2f2f2;
}

.kesto-gradient a {
    color: #f2f2f2;
}

.kesto-bg {
    background-color: #00a091;
}

.kesto-bg .current {
    background-color: #bccf42;
}

.kesto-btn {
    background-color: #00A091;
    color: white;
}

.kesto-container h1,
.kesto-container h2,
.kesto-container h3,
.kesto-container h4,
.kesto-container h5,
.kesto-container h6,
.kesto-container a {
    color: #2fa090;
}


.bisnes-gradient {
    background: #001F41; /* Old browsers */
    background: -moz-linear-gradient(45deg, #001F41 0%, #007DBD 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(45deg, #001F41 0%,#007DBD 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(45deg, #001F41 0%,#007DBD 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0c326e', endColorstr='#007DBD',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    color: #f2f2f2;
}

.bisnes-gradient a {
    color: #f2f2f2;
}

.bisnes-bg {
    background-color: #4fb4e2;
}

.bisnes-bg .current {
    background-color: #001f41;
}

.bisnes-btn {
    background-color: #001F41;
    color: #fff;
}

.bisnes-gradient .light-btn {
    color: #fff;
}

.bisnes-container h1,
.bisnes-container h2,
.bisnes-container h3,
.bisnes-container h4,
.bisnes-container h5,
.bisnes-container h6,
.bisnes-container a {
    color: #001F41;
}

.pientuotanto-gradient {
	background: rgb(219,89,89);
	background: -moz-linear-gradient(36deg, rgb(252, 216, 0) 0%, rgb(243, 150, 0) 100%);
	background: -webkit-linear-gradient(36deg, rgb(252, 216, 0) 0%, rgb(243, 150, 0) 100%);
	background: linear-gradient(36deg, rgb(252, 216, 0) 0%, rgb(243, 150, 0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fbd100",endColorstr="#f39900",GradientType=1);
	color: #f2f2f2;
}

.pientuotanto-gradient a {
    color: #f2f2f2;
}

.pientuotanto-bg {
    background-color: #f39900;
}

.pientuotanto-bg .current {
    background-color: #fbd100;
}

.pientuotanto-btn {
    background-color: #ee581c;
    color: white;
}

.pientuotanto-container h1,
.pientuotanto-container h2,
.pientuotanto-container h3,
.pientuotanto-container h4,
.pientuotanto-container h5,
.pientuotanto-container h6,
.pientuotanto-container a {
    color: #f39801;
}

html:not( .ccm-edit-mode ) .jakohairio-table {
    background-color: #29afeb;
    color: #FFF;
    margin: 0;
    vertical-align: top;
    border-right: 1px solid;
    padding-right: 5px;
}

html:not( .ccm-edit-mode ) .jakohairio-table a {
    color: #398756;
}

html:not( .ccm-edit-mode ) .jakohairio-table tr:nth-child(odd) td {
    background-color: white;
    color: black;
}

html:not( .ccm-edit-mode ) .jakohairio-table tr:nth-child(even) td {
    background-color: #efefef;
    color: black;
}

.arrow-right-blue,
#smaller_picks p a::after,
.article-body a::after {
    content: url( '../img/arrow_right_blue.svg' );
    height: auto;
    display: inline-block;
    width: 6px;
    margin-left: 3px;
}

.article-wrapper .article-body h3 {
	font-size: 1.4em;
}

.sahkonsiirtobg, .parikkalabg {
	background: rgb(6,75,152);
	background: -moz-linear-gradient(36deg, rgba(6,75,152,1) 0%, rgba(13,180,222,1) 100%);
	background: -webkit-linear-gradient(36deg, rgba(6,75,152,1) 0%, rgba(13,180,222,1) 100%);
	background: linear-gradient(36deg, rgba(6,75,152,1) 0%, rgba(13,180,222,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#064b98",endColorstr="#0db4de",GradientType=1);
}

.mokkivalo-container .nav-tabs .nav-item {
	text-align: center;
	color: #025398;
	width: 100%;
	background-color: #FFF;
}

.mokkivalo-container .nav-tabs .nav-link {
	margin: 3px 0px;
}

.mokkivalo-container .nav-tabs .nav-item.active {
	background-color: #025398;
	width: 100%;
	color: #FFF;
}

.mokkivalo-container .nav-tabs .nav-link.active, .nav-tabs a.nav-link:hover {
	border: none;
}

.arrow-right-white,
#wider_pick a.btn::after {
    content: url( '../img/arrow_right_white.svg' );
    height: auto;
    display: inline-block;
    width: 7px;
    margin-left: 3px;
}

#footer_strip a span.arrow-right-white {
	width: 11px;
}

a .arrow-right-blue,
a .arrow-right-white {
    margin-left: 2px;
}

.btn .arrow-right-blue,
.btn .arrow-right-white {
    margin-left: 10px;
}

.inline-icon {
    display: inline-block;
    height: 19px;
    width: auto;
}

h2 .inline-icon {
    height: 38px;
}

.full-width {
    padding: 0px;
}

.tarina-img div {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    height: 50vh;
    min-height: 400px;
    color: #FFF;
    overflow: hidden;
}

/*
--------------------------------------------------------------
# Page structure
--------------------------------------------------------------
*/

#main_nav {
    background-color: #025398;
    padding: 20px 130px;
    font-weight: 400;
    font-size: 1.5em;
}

.navbar-brand img {
    height: 60px;
    width: auto;
}

.navbar-toggler svg {
    display: inline-block;
    height: 25px;
    width: 25px;
}

.navbar-toggler svg path {
    fill: #f2f2f2;
}

@media (max-width: 1200px){
    #main_nav {
        padding: 20px;
    }
    #navbar_content .navbar-nav li {
        padding: 10px;
    }

    #navbar_content .navbar-nav li a {
        font-size: 0.7em;
    }

    .navbar-brand img {
        height: 40px;
        width: auto;
    }
}


@media (min-width: 1200px){
    .navbar-brand img {
        height: 40px;
        width: auto;
    }
    #main_nav {
        padding: 15px 40px;
    }
    #navbar_content .navbar-nav li {
        padding: 15px;
    }
    #navbar_content .navbar-nav li a:not(.btn) {
        font-size: 0.8em;
    }
}

@media (max-width: 1200px){
    #main_nav {
        padding: 15px 40px;
    }
    #navbar_content .navbar-nav li {
        padding: 15px;
    }
    #navbar_content .navbar-nav li a:not(.btn) {
        font-size: 0.8em;
    }
}

@media (max-width: 400px){
    .navbar-brand img {
        height: 30px;
        width: auto;
    }
    #main_nav {
        padding: 15px;
    }
}

@media (min-width: 1339px){
    .navbar-brand img {
        height: 50px;
        width: auto;
    }
    #main_nav {
        padding: 15px 40px;
    }
    #navbar_content .navbar-nav li {
        padding: 15px;
    }
    #navbar_content .navbar-nav li a:not(.btn) {
        font-size: 0.8em;
    }
}

@media (min-width: 1690px){
    .navbar-brand img {
        height: 60px;
        width: auto;
    }
    #main_nav {
        padding: 20px 110px;
    }
    #navbar_content .navbar-nav li a:not(.btn) {
        font-size: 1em;
    }
}

#header_strip {
    background-color: #f2f2f2;
    padding: 10px 0px;
    color: #808080;
}

#header_strip form button svg {
    fill: #ff3c3c;
    height: 23px;
}

#header_strip p {
    margin: 0px;
    color: #282827;
}

#header_strip a {
    color: #ff3c3c;
}

.search-form form.ccm-search-block-form .ccm-search-block-text {
    height: calc(2.25rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    margin-right: -3px;
    background-color: white;
    border-radius: 0px;
    border: none;
    display: inline-block;
    width: auto;
    vertical-align: middle;
    max-width: 100%;
}

.search-form form.ccm-search-block-form .btn.btn-default.ccm-search-block-submit {
    background-color: white;
    border-color: white;
    color: transparent;
    background-image: url('../img/PaVa_svg_materiaalit_etsi.png');
    background-position: center;
    background-repeat: no-repeat;
    background-origin: content-box;
    background-size: cover;
    padding: .375rem 1.2rem;
}

.search-form form.ccm-search-block-form .btn.btn-default.ccm-search-block-submit::after {

}

.tuotekortti .tuotelogo {
	min-height: 235px;
}

#products .col-lg-12 .tuotelogo img {
	max-width: 70%;
}

#page_header.productheader .btn-primary,
#page_header.productheader .btn-primary:hover {
	background-color: transparent;
	color: #FFF;
	border: 2px solid #FFF;
}

#page_header {
    height: 60vh;
    min-height: 320px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    color: #FFF;
}

#page_header p {
	font-size: 1.2em;
}

#page_header a, #page_header a:hover {
	color: #FFF;
	text-decoration: none;
}

#page_header .btn-primary, #page_header .btn-primary:hover {
	background-color: #FFF;
	color: #025398;
}

#page_header_h {
    color: #f2f2f2;
    display: inline-block;
    font-size: 4em;
    font-weight: 900;
    letter-spacing: 2px;
}

#page_header.productheader {
	height: 40vh;
}

#page_header.productheader #page_header_h {
	font-size: 6em;
}

#page_header .whitebg p { color: #1a1a1a; }
.whitebg #page_header_h { color: #035398; }

.headerbold {
	font-weight: 700;
	font-style: italic;
}



#gradient_picks {
    min-height: 250px;
}

#gradient_picks .pick-wrapper {
    width: 50%;
    display: inline-block;
    height: 100%;
}

#gradient_picks img {
    height: 100px;
    width: auto;
}

#smaller_picks .border-wrapper {
    /*border: 5px solid #025398;*/
    height: 120px;
    width: 100%;
    padding: 10px;
}

#smaller_picks .border-wrapper img {
    width: auto;
    height: 100%;
    max-height: 120px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#wider_pick .col-lg-2 img {
    border: 4px solid #f2f2f2;
}

#wider_pick img {
    padding: 10px;
    width: 400px;
    height: auto;
    display: block;
    margin: auto;
}

#disruption_announcements img {
	height: auto;
	width: 100px;
}

#annoucements {
    list-style: none;
    padding-left: 0px;
}

#annoucements li {
    margin-bottom: 20px;
}

#annoucements li b {
    display: block;
}

#product_nav a {
    padding: 15px 35px;
    font-size: 1.4em;
    font-weight: 500;
    color: #1a1a1a;
    text-transform: uppercase;
}

#product_nav a.current {
	color: #FFF;
}

#price_graph {
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 300px;
    color: white;
}

#siirto_lukuina img {
    height: 70px;
    width: auto;
}


.page-link-card {
	font-size: 1.7em;
    height: 100px;
    font-weight: 500;
    margin: 0px 10px 10px 0px;
	width: 100%;
	display: inline-block;
	text-align: center;
	background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #ebf2f6;
}

.page-link-card-content {
	height: 100%;
    align-items: center;
    display: grid;
}

.page-link-card:hover {
	text-decoration: none;
	color: #ebf2f6;
}

.chart-container {
  	position: relative;
  	margin: auto;
  	min-height: 40vh;
  	width: 80vw;
}

#avaaChat {
    position: fixed;
    right: 20px;
    bottom: 20px;
    padding: 10px;
    background-color: #025398;
    color: #FFF;
    border-radius: 60px;
    border: 2px solid white;
    transition: all 0.3s ease;
    z-index: 20;
}

#backToTop {
    position: fixed;
    right: 40px;
    bottom: 100px;
    padding: 15px;
    background-color: #025398;
    color: #FFF;
    border-radius: 60px;
    border: 2px solid white;
    transition: all 0.3s ease;
    z-index: 20;
}

#backToTop svg {
    height: 28px;
    width: auto;
    fill: white;
}

#backToTop:hover {
    background-color: #01437b;
}

#backToTop.hiding {
    right: -70px;
}

#footer_strip {
    background-color: #01437b;
}

footer {
    background-color: #025398;
    min-height: 140px;
    color: #f2f2f2;
}

#footer_strip a {
    font-size: 2em;
    color: #f2f2f2;
}

footer a,
footer a:hover {
	color: #f2f2f2;
}

#some_links img {
    height: 20px;
    width: auto;
}

/* #some_links img:last-child {
margin-left: 30px;
} */

.article-img {
    width: 100%;
    height: 200px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.article-class {
	background-color: #025398;
    color: #f2f2f2;
    font-weight: 400;
    padding: 1px 8px;
    display: inline-block;
    position: absolute;
    bottom: -13px;
    text-transform: uppercase;
    left: 10px;
}

.article-body {
    padding: 20px 10px;
}

.product-wrapper {
    min-height: 100%;
    box-shadow: 0px 7px 15px -4px #a2a2a2;
    transition: 0.3s all;
}

.product-wrapper:hover {
    box-shadow: 0px 20px 20px -10px #9c9c9c;
    transition: 0.3s all;
}

.other-articles {
    border-left: 1px solid #e4e4e4;
    display: inline-block;
    padding-left: 10px;
}

.other-articles p {
    color: #1a1a1a;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
}

#contacts img {
    margin: 20px 0px;
}

@media (max-width: 1200px){
    #gradient_picks .pick-wrapper {
        width: 100%;
    }
}


@media (max-width: 991px){
	#gradient_picks img {
	    height: auto;
	    width: 100%;
	}
	
	.larger h3 {
		font-size: 1.3em;
	}
	
	.sectionImage .img-fluid {
		max-width: 70%;
	}
	
    #page_header {
        height: 30vh;
    }
    #page_header_h {
        font-size: 3em;
    }
    
    #products .col-lg-12 .tuotelogo img {
		max-width: 100%;
	}
	
	#page_header.productheader #page_header_h {
		font-size: 3em;
	}
}

@media (max-width: 769px){
    #backToTop {
        right: 20px;
    }

    #backToTop svg {
        height: 25px;
    }
}

@media (max-width: 500px){
    #page_header_h {
        font-size: 2em;
    }
}

@media (max-width: 300px){
    #page_header_h {
        font-size: 1.6em;
    }
}


/* ## C5 admin panel list width fix */
.ccm-panel-content.ccm-panel-content-visible > section > div > ul > li {
    width: 100%;
}

@media (max-width: 769px){
    .btn:not(#backToTop, .ccm-search-block-submit, #avaaChat) {
        width: 100%;
        margin-bottom: 10px;
    }
}

.rss-item {
    background-color: #025398;
    color: #FFF;
}

.rss-item h4 {
    color: #FFF;
}