/*RESET*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;} body {line-height: 1;}ol, ul{list-style:none;} blockquote, q{quotes:none;} blockquote:before, blockquote:after, q:before, q:after{content:'';content:none;} :focus{outline:0;} ins{text-decoration:none;} del{text-decoration:line-through;} table{border-collapse:collapse; border-spacing:0;}

button.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 18px;
    transition: 0.4s;
	font-family: 'Cinzel Decorative', cursive;

}

.cal-wrapper {
	width: 80%;
	display: inline-block;
	vertical-align: middle;
	margin-left: 10px;

}

button.accordion.active, button.accordion:hover {
    background-color: #ddd;
}

div.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;	

}

/*RAKENNE*/

body {
	background: #f2f3f5;
	overflow: hidden;
}

#home {
	background: url(img/kalle_tausta.jpg); 
	background-position: bottom right;
	background-size: auto 105%;
	background-repeat: no-repeat;
}

#cv {
	background: url(img/kalle_tausta1.jpg); 
	background-position: bottom right;
	background-size: auto 100%;
	background-repeat: no-repeat;
}

#uutiset {
	background: url(img/kalle_tausta2.jpg); 
	background-position: bottom right;
	background-size: auto 105%;
	background-repeat: no-repeat;
}



.paneeli {
	height: 100vh;
	width: 100vw;
}

.etusivuotsikko {
	margin-left: 20px;
	padding-left: 1%;
	width: 60%;
	position: relative;
	top: 38%;
	text-align: center;
}

h1 {
	font-size: 50pt;
}

h2 { 
	font-size:20pt;
}
	
h1, h2  {
	font-family: 'Cinzel Decorative', cursive;
	#font-family: 'Poiret One', cursive;
color:	#D5AD6D; /*if no support for background-clip*/
	
	background: -webkit-linear-gradient(transparent, transparent),
             -webkit-linear-gradient(top, rgba(213,173,109,1) 0%, rgba(213,173,109,1) 26%, rgba(226,186,120,1) 35%, rgba(163,126,67,1) 45%, rgba(145,112,59,1) 61%, rgba(213,173,109,1) 100%);
	background: -o-linear-gradient(transparent, transparent);
	-webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}




/* NAVIGOINTI */


#menu-icon {

	display: hidden;
	width: 100%;
	height: 70px;
	background:#f2f3f5 url(menu-icon.png) center no-repeat;
}

a:hover#menu-icon {


}

nav {
	position:fixed;
	top: 0px;
	z-index: 10;
	padding: 20px; 
	margin: 0px; 
	width:100%;

}

.nav {
	position:relative;
	top: -15px;
	display:inline-block;
	color: black;
	text-align: left;	
	font-family: 'Italiana', serif;
	font-size: 14pt;
}



li {
	#display: inline-block;
	margin-right: 5px;
}


a:link#nav {
	font-family: 'Italiana', serif;
	color: black;
	font-size: 14pt;
	text-decoration:none;
	line-height: 16pt;

}
a:visited#nav {
	color: black;
}
a:active#nav {
	color: white;
}
a:hover#nav {
	color:	#D5AD6D; /*if no support for background-clip*/
	
	background: -webkit-linear-gradient(transparent, transparent),
	-webkit-linear-gradient(top, rgba(213,173,109,1) 0%, rgba(213,173,109,1) 26%, rgba(226,186,120,1) 35%, rgba(163,126,67,1) 45%, rgba(145,112,59,1) 61%, rgba(213,173,109,1) 100%);
	background: -o-linear-gradient(transparent, transparent);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}


/*PERUSSETTI*/

.lang {
	position:relative;
	left: 20px;
	top: 17px;
}


.icon_fin {
	background: url(img/fin_icon.png) no-repeat;
	background-size: contain;	
	width: 40px;
	height: 40px;
	display: inline-block;
}

.icon_fin_active {
	background: url(img/fin_icon.png) no-repeat;
	background-size: contain;
	width: 40px;
	height: 40px;
	display: inline-block;
	-webkit-filter:grayscale(100%);
	-moz-filter:grayscale(100%);
	-o-filter:grayscale(100%);
	filter:grayscale(100%);

}

.icon_eng {
	background: url(img/eng_icon.png) no-repeat;
	background-size: contain;
	width: 40px;
	height: 40px;
	display: inline-block;

}

.icon_eng_active {
	background: url(img/eng_icon.png) no-repeat;
	background-size: contain;
	width: 40px;
	height: 40px;
	display: inline-block;
	-webkit-filter:grayscale(100%);
	-moz-filter:grayscale(100%);
	-o-filter:grayscale(100%);
	filter:grayscale(100%);
}



hr.tupla {
	margin-top:30px;
	margin-bottom:30px;

    padding: 0;
    border: none;
    border-top: medium double #333;
    color: #333;
    text-align: center;
}


.sisalto {
	margin-top: 90px;
	display: inline-block;
	width: 60%;
	height: 75%;
	padding-left: 40px;
	padding-right: 40px;

	overflow: scroll;
	#border:1px solid black;
}

.sisaltokoko {
	margin-top: 90px;
	display: inline-block;
	width: 90%;
	height: 75%;
	padding-left: 40px;
	padding-right: 40px;
	overflow: scroll;
}



.yhteyskuva {
	margin-top: 10%;
	width: 100%; 
	height: 50%;
	background: url(img/kalle_tausta3.jpg);
	background-position: top center;
	background-size: 100% auto;
	background-repeat: no-repeat; 
}

.otsikko {
	position: relative;
	top: 70px;
	left: 40px;
	font-size: 40pt;
	font-family: 'Cinzel Decorative', cursive;
}

.pikkuotsikko {
	margin:20px;
	font-size: 20pt;
	font-family: 'Cinzel Decorative', cursive;
}
	
.perus {
	padding: 10px;
	font-size: 14pt;
	letter-spacing: .5px;
	line-height: 18px;

font-family: 'Open Sans Condensed', sans-serif;
#font-family: 'Cormorant Garamond', serif;
#font-family: 'Cardo', serif;

}




a:link {
	color: black;
}

a:visited {
	color: black;
	text-decoration: none;
}

a:hover {
	color:	#D5AD6D; /*if no support for background-clip*/
	
	background: -webkit-linear-gradient(transparent, transparent),
	-webkit-linear-gradient(top, rgba(213,173,109,1) 0%, rgba(213,173,109,1) 26%, rgba(226,186,120,1) 35%, rgba(163,126,67,1) 45%, rgba(145,112,59,1) 61%, rgba(213,173,109,1) 100%);
	background: -o-linear-gradient(transparent, transparent);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-decoration: none;
}
	
.sisalto::-webkit-scrollbar {
 display: none;
}

.sisaltokoko::-webkit-scrollbar {
 display: none;
}

.galleria {
	width: 10%;
	padding-bottom: 20%;	
	margin:-3px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top;
	display: inline-block;


	-webkit-filter:grayscale(0%);
	-moz-filter:grayscale(0%);
	-o-filter:grayscale(0%);
	filter:grayscale(0%);
	-webkit-transition:filter .1s ease-in,filter .2s ease-in;  
    -moz-transition:filter .1s ease-in,filter .2s ease-in;  
    -o-transition:filter .1s ease-in,filter .2s ease-in;  
    transition:filter .1s ease-in,filter .2s ease-in; 
}
 
.galleria:hover {
	-webkit-filter:grayscale(100%);
	-moz-filter:grayscale(100%);
	-o-filter:grayscale(100%);
	filter:grayscale(100%);

}


/*KALENTERI*/


#cal {
	#border: 1px solid red;
	padding: 10px;
	width: 90%;
	text-align: left;
}

#date {
	border-radius: 8%;
	width: 60px;
	height: 60px;
	display: inline-block;
	background: white;
	-webkit-box-shadow: inset -1px 1px 16px -1px rgba(0,0,0,0.3);
	-moz-box-shadow: inset -1px 1px 16px -1px rgba(0,0,0,0.3);
	box-shadow: inset -1px 1px 16px -1px rgba(0,0,0,0.3);
	text-align: center;
	text-align: center;
	vertical-align: top;
	z-index: 2;

}

.kk {
	font-family: 'Open Sans Condensed', sans-serif;
	color: white;
	font-size: 14pt;
	line-height: 15px;
	PADDING: 3px;
	background:#f4425f;
	z-index: 1;
	
}

.pp {
	font-family: 'Italiana', serif;
	font-size: 30pt;
	margin-top: -20px;
	
}

.aihe {
	display: inline-block;
	background: rgba(255,255,255,0.6);
	padding: 14px;
	margin-left: 20px;
	height: 60px;
	border-radius: 3px;
	width: 80%
	
}

.otskalenteri {
	font-family: 'Cinzel Decorative', cursive;
	font-size: 15pt;
	font-weight: 800;
}


.peruskalenteri {
font-family: 'Open Sans Condensed', sans-serif;
	font-size: 15pt;
}
	

.vuosi { 
	font-family: 'Cinzel Decorative', cursive;
	font-size: 20pt;
	width: 100%;
	text-align: left;
}


.kk1 {
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 14pt;
	line-height: 15px;
	background:#ccc;

	PADDING: 3px;
	z-index: 1;
	
}

.pp1 {
	font-family: 'Italiana', serif;
	font-size: 30pt;
	margin-top: -20px;
	color: #333;

	
}

.aihe1 {
	display: inline-block;
	background: rgba(255,255,255,0.6);
	padding: 14px;
	margin-left: 20px;
	height: 60px;
	border-radius: 3px;
	width: 80%
	
}

.otskalenteri1 {
	font-family: 'Cinzel Decorative', cursive;
	font-size: 15pt;
	font-weight: 800;
	color: #333;

}


.peruskalenteri1 {
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 15pt;
	color: #555;

}


a:link#kalenterilinkki {
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 15pt;
	color: #555;

}
	
a:visited#kalenterilinkki {
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 15pt;
	color: #555;

}

.vuosi1 { 
	font-family: 'Cinzel Decorative', cursive;
	font-size: 20pt;
	width: 100%;
	text-align: left;
	color: #555;

}


/*MEDIA QUERY*/
@media only screen and (max-width : 1024px) {

.etusivuotsikko {
	top: 15%;
}

#cv {
	background: url(); 
	background-position: bottom right;
	background-size: auto 100%;
	background-repeat: no-repeat;
}

#uutiset {
	background: url(); 
	background-position: bottom right;
	background-size: auto 105%;
	background-repeat: no-repeat;
}

}

@media only screen and (max-width : 768px) {


/* NAVIGOINTI */

#menu-icon {

	display:block;
	position:absolute;
	left: 0px;
	top: 0px;
	width: 50px;
	height: 50px;
	z-index:16;


}



nav ul, nav:active ul { 
	display: none;
	position: absolute;
	padding: 5px;
	top: 60px;	
	left: 0px;	
	width: 150px;
	padding:10px;
	background: #f2f3f5; 


}

nav li {

	text-align: left;
	#padding: 10px 0;
	margin: 0;
}




nav:hover ul {
	display:block;
}

nav:visited ul {
	display: none;

}


/* RAKENNE */


.etusivuotsikko {
	margin-left: 0px;
	padding-left: 0;
	width: 100%;
	position: relative;
	top: 45%;
	text-align: center;
}

h1 {
	font-size: 40pt;
}

h2 {
	font-size: 20pt;
}

	


/* PERUSSETTI */

#cv {
	background: url(); 
	background-position: bottom right;
	background-size: auto 100%;
	background-repeat: no-repeat;
}

#uutiset {
	background: url(); 
	background-position: bottom right;
	background-size: auto 105%;
	background-repeat: no-repeat;
}
.otsikko {
	font-size: 20pt;
}

/* KALENTERI */

#date1 {
	margin-bottom: 15px;
}

#date {
	margin-bottom: 15px;
}

.aihe {
	height: auto;
	margin-left: 0px;
width: 80%;

}
.aihe1 {
	height: auto;
	margin-left: 0px;
width: 80%;

}

.otskalenteri {
	font-size: 12pt;
}


.otskalenteri1 {
	font-size: 12pt;
}


}