@font-face{
	font-family:'Montserrat Bold';
	src: url(/files/fonts/Montserrat-Bold.woff2) format('woff2'), url(/files/fonts/Montserrat-Bold.woff) format('woff');
	font-weight:700;
	font-style:normal;
	font-display:swap
}

@font-face{font-family:OpenSans;
	src: url(/files/fonts/OpenSans-Regular.woff2) format('woff2'), url(/files/fonts/OpenSans-Regular.woff) format('woff');
	font-weight:400;
	font-style:normal;
	font-display:swap
}

@font-face{font-family:OpenSans;
	src: url(/files/fonts/OpenSans-Bold.woff2) format('woff2'), url(/files/fonts/OpenSans-Bold.woff) format('woff');
	font-weight:700;
	font-style:normal;
	font-display:swap
}

* {
	vertical-align:top;
	text-decoration:none;
	margin:0;
	padding:0
}

*,
 :after,
 :before {
 	 box-sizing:border-box
}

a:hover {
	transition:all .6s ease
}

body {
	width:100vw;
	overflow-x:hidden
}

img { 
	max-width:100%;
	height:auto
}

#hero,
.rel,
.video {
	position:relative
}

.tc {
	text-align:center
}

.tr {
	text-align:right
}

.text-white {
	color: #fff
}

.text-black {
	color: #000
}

.text-dark {
	color: #222
}

html {
	-ms-overflow-style: scrollbar
}

.container {
	max-width: 1200px
}

.container {
	width:90%;
	padding-right:15px;
	padding-left:15px;
	margin-right:auto;
	margin-left:auto;
	position:relative
}

#menu-toggler,[hidden] {
	display:none
}

#logo,header a,main {
	display:block
}

.inl {
	display:inline-block;
	position:relative
}

strong {
	font-weight:bolder
}

.h-100 { 
	height:100%
}

h1,h2 {
	line-height:1.15em
}

h1,h2,h3,p {
	margin-bottom:15px
}

.mb-0,p
:last-child {
	margin-bottom:0
}

#hero img,header {
	width:100%
}

#menu-toggler {
	width:45px;
	height:45px;
	background:0 0;
	border:none;
	z-index:1500
}

.fixed-top {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	min-height:45px;
	z-index:900
}

.bg-white {
	background-color:#fff
}

#menu-toggler,a {
	cursor:pointer
}

.py-2,.py-3 {
	padding-top:1rem
}

.row {
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex
}

.px-2,.px-3 {
	padding-right:1rem
}

.px-2,.px-3{
	padding-left:1rem
}

.row {
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
	margin-right:-15px;
	margin-left:-15px
}

.col,.col-10,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9 {
	position:relative;
	width:100%;
	min-height:1px;
	padding-right:15px;
	padding-left:15px;
	-webkit-box-flex:0
}

.col {
	-ms-flex-preferred-size:0;
	flex-basis:0;
	-ms-flex-positive:1;
	flex-grow:1;
	max-width:100%
}

.col-10 {
	-ms-flex:0 0 83.333333%;
	flex:0 0 83.333333%;
	max-width:83.333333%
}

.col-9 {
	-ms-flex:0 0 75%;
	flex:0 0 75%;
	max-width:75%
}

.col-8 {
	-ms-flex:0 0 66.6666%;
	flex:0 0 66.6666%;
	max-width:66.6666%
}

.col-7 {
	flex:0 0 58.3333333333%;
	max-width:58.3333333333%
}

.col-6 {
	-ms-flex:0 0 50%;
	flex:0 0 50%;
	max-width:50%
}

.col-5 {
	-ms-flex:0 0 41.6666666667%;
	flex:0 0 41.6666666667%;
	max-width:41.6666666667%
}

.col-4 {
	-ms-flex:0 0 33.3333%;
	flex:0 0 33.3333%;
	max-width:33.3333%
}

.col-3 {
	-ms-flex:0 0 25%;
	flex:0 0 25%;
	max-width:25%
}

.col-2 {
	flex:0 0 16.6666666667%;
	max-width:16.6666666667%
}

.iframe {
	float:none;
	clear:both;
	width:720px;
	position:relative;
	padding-bottom:50%;
	padding-top:25px;
	height:0;
	margin:0 auto;
	max-width:100%
}

.video-wrapper {
	position:relative;
	width:100%;
	height:0;
	padding-bottom:56.25%;
	margin:1.5em 0;
	max-width:720
}

.video-wrapper iframe {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%
}

.p-2,.p-3 {
	padding:1rem
}

.py-2,.py-3 {
	padding-bottom:1rem
}

.mb-2 {
	margin-bottom:.5rem
}

.mb-3 {
	margin-bottom:1rem
}

.mb-4 {
	margin-bottom:1.5rem
}

.mb-5 {
	margin-bottom:3rem
}

.p-1 {
	padding:.3rem
}

.py-1 {
	padding-top:.3rem
}

.px-1 {
	padding-right:.3rem
}

.py-1 {
	padding-bottom:.3rem
}

.px-1 {
	padding-left:.3rem
}

.p-2 {
	padding:.6rem
}

.py-2 {
	padding-top:.6rem
}

.px-2 {
	padding-right:.6rem
}

.py-2 {
	padding-bottom:.6rem
}

.px-2 {
	padding-left:.6rem
}

.p-3 {
	padding:1rem
}

.py-3 {
	padding-top:1rem
}

.px-3 {
	padding-right:1rem
}

.py-3 {
	padding-bottom:1rem
}

.px-3 {
	padding-left:1rem
}

.p-4 {
	padding:1.5rem
}

.py-4 {
	padding-top:1.5rem
}

.px-4 {
	padding-right:1.5rem
}

.py-4 {
	padding-bottom:1.5rem
}

.px-4 {
	padding-left:1.5rem
}

.p-5 {
	padding:3rem
}

.py-5 {
	padding-top:3rem
}

.px-5 {
	padding-right:3rem
}

.py-5 {
	padding-bottom:3rem
}

.px-5 {
	padding-left:3rem
}

.py-0 {
	padding-top:0;
	padding-bottom:0
}

.px-0 {
	padding-left:0;
	padding-right:0
}

.p-0 {
	padding:0
}

.py-54 {
	padding-top:3rem;
	padding-bottom:1.5rem
}

.py-12 {
	padding-top:1rem;
	padding-bottom:1.5rem
}

@media screen and (max-width:1200px) {
.r2 {-ms-flex:0 0 100%;
	flex:0 0 100%;
	max-width:100%
}
.r22{-ms-flex:0 0 50%;
	flex:0 0 50%;
	max-width:50%
}
.r23{-ms-flex:0 0 33.3333%;
	flex:0 0 33.3333%;
	max-width:33.3333%
}

}
@media screen and (max-width:1000px){
.r1{-ms-flex:0 0 100%;
	flex:0 0 100%;
	max-width:100%
}
.r12{-ms-flex:0 0 50%;
	flex:0 0 50%;
	max-width:50%
}
.r13{-ms-flex:0 0 33.3333%;
	flex:0 0 33.3333%;
	max-width:33.3333%
}
}
@media screen and (max-width:750px){
.r7{-ms-flex:0 0 100%;
	flex:0 0 100%;
	max-width:100%
}
.r72{-ms-flex:0 0 50%;
	flex:0 0 50%;
	max-width:50%
}
}
@media screen and (max-width:550px){
.r5{-ms-flex:0 0 100%;
	flex:0 0 100%;
	max-width:100%
}
.r52{-ms-flex:0 0 50%;
	flex:0 0 50%;
	max-width:50%
}
}
@media screen and (max-width:400px){
.r4{-ms-flex:0 0 100%;
	flex:0 0 100%;
	max-width:100%
}
}
@media screen and (max-width:360px){
.r3{-ms-flex:0 0 100%;
	flex:0 0 100%;
	max-width:100%
}
}

.bg-black,.bg-dark {
	color:#fff
}

.bg-dark {
	background-color:#629fcb;
	border-color:#629fcb
}

.bg-black {
	background-color:#000;
	border-color:#000
}

body {
	font:400 15px OpenSans;
	color:#222;
	min-height:100vh
}

strong {
	font-weight:700
}

h1,h2,h3 {
	font-family:"Montserrat Bold";
	font-weight:700
}

.home h1,.home h2 {
	font-size:1.6rem
}

.bg-primary,body {
	background:linear-gradient(rgba(0,0,0,.08),rgba(0,0,0,.2)),#629fcb url(https://www.kartallaband.fi/site/assets/files/1/bg.jpeg) no-repeat left top/cover
}

footer.bg-primary {
	background-position:center center
}

main a {
	color:#6495ed
}

footer .inl {
	margin:0 2%
}

@media screen and (min-width:1200px){
.home .bg-primary #logo{width:100px
}
.home #logo{width:300px
}
.home #menu{padding-top:65px
}
.home .bg-primary #menu{padding-top:18px
}
#menu{margin-left:30px
}
}

@media screen and (max-width:1200px){
#menu-toggler{display:block
}
#menu{display:none;
	width:100%;
	margin-top:15px
}
#menu-toggler{position:absolute;
	top:10px;
	right:0;
	background:url(https://www.kartallaband.fi/files/images/menu.png) no-repeat center center
}
#logo{width:100px
}
header{background:#629fcb;
	border-bottom:2px solid rgba(255,255,255,.6)
}
#hero{margin-top:50px
}
}

@media screen and (max-width:1000px){
footer .inl{margin:0 auto 15px;
	display:block
}
}