/*
Theme Name: Identcard
Theme URI: 
Description: 
Author: Mekanismi
Author URI: 
Version: 1.0

License:
License URI:

*/

/*  VÄRIT

#E9E9E9  vaaleanharmaa > #top
#2894BE  sininen
#D85600  oranssi > a:hover
#013352  tummansininen > .yhteysnappi, #menu-side
#333	 tummanharmaa > #footer border, .nappi:hover
#111     mustanharmaa > #footer

--- taustat kuvilla ---
#menu-top          rivi: ~185
#header (slider)   rivi: ~240
#nostot (etusivu)  rivi: ~342


*/

/* HTML5 fixes */
div,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
	display: block;
}

*{
  margin:0;
  padding:0;
}

html,body{

}

body {
 background: url(img/parsa_web.jpg) no-repeat center center fixed;
 color: #4D4D4D;
 text-align: left;
 font:400 16px/1.6 'Merriweather Sans', sans-serif;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
p{
margin-bottom:10px;
}
h1, h2, h3, h4{
	font: 700 36px/1.2 'Merriweather Sans', sans-serif;
	color:#005F9E;
	margin:0 0 20px;
}
h1{
	margin-top:40px;
}
p ~h2, p ~h3, p ~h4{
	margin-top:30px;
}

/* wp muokkaa-nappi */
p.muokkaa{
	text-align:right;
}
p.muokkaa a{
	text-decoration:none !important;
	background:none !important;
}
p.muokkaa a:after{
	display:none;
}
p.muokkaa a:before{
	content: '\f464';
	font: 400 22px/24px dashicons;
	background: #cfcfcf;
	color:#000;
	border-radius:24px;
	-moz-border-radius:24px;
	-webkit-border-radius:24px;
}
p.muokkaa a:hover:before{
	background:#2894BE;
	color:#fff;
}

#anim h1, #anim h2 {
	font-weight:700;
	font-size:40px;
	text-align:left;
	color:#fff;
	margin:0;
}
#anim h2 span, #anim h1 span{
	font-weight:400;
	font-size:36px;
	display:block;
}

h2{
	font-size:28px;
	margin: 15px 0;
}
h3{
	font-size:22px;
	font-weight:700;
	margin: 20px 0;
}
h4{
	font-size:20px;
}
a{
	color:#2894BE;
	border: none;
    outline: none;
	text-decoration:none;
}
p{
	margin-bottom:20px;
}
a:hover{
	color:#D85600;
}
.alignright {
	float:right;
}
.alignleft {
	float:left;
}

.content{
	line-height:1.7;
}
#loader{
	position:absolute;
	z-index:-5;
	width:100%;
	height:100%;
	background:url(img/24.gif) no-repeat center center;
}
#content .content a{
	font-weight: 400;
	background:#fff;
	padding:0 5px;
	margin:1px 0;
	display:inline-block;
}
#content .content a.img{
	padding: 0;
	font-size: 1px;
}
#content .content a:hover{
	background:#2894BE;
	color:#fff;
}
#content .gallery a{
	padding:0;
	background: none !important;
}
#content .gallery a:hover img{
	border-color: #2894BE;
}
/* #content .content a:after{
	content:' »'
} */
a img{
	border:none;
}
ul{
	margin:10px 0 10px 25px;
}
li{
	margin-left:15px;
}
.clear{
	clear:both;
}
.left {float:left;}
.right {float:right;}
.wrap{
	max-width:1000px;
	margin:0 auto;
	padding:0 2%;
}

a.linkit:link{ 
	text-decoration: none;

}

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

.col.content{
	padding-left: 6.5%;
}
.front .content{

}
.language{
	font: 400 15px/80px 'Merriweather Sans', sans-serif;

}
#top{
	background:rgb(20, 55, 92);
	background:rgba(20, 55, 92,.8);
	padding:5px 0;

}
#top h4{
	margin:20px 5%;
	width:210px;
}
#top, #top *{

}

.logo{
	float: left;
	margin: 0px;
	
}
.front .logo{

	/*margin: 0;*/
}
.logo img{
	max-width: 100%
}
/*.front .logo img{
	width: 100%
}*/
#menu-top{
	display:block;
	/* background:#282828 url(img/header_line.jpg) repeat-x; */
	padding:20px 0;
	/*margin-bottom:5px;*/
	float: right;
	min-width: 42%;
}

#menu-top .menu{
	margin:0 auto;
	text-align:center;
}
#menu-top .menu li{
	font: 400 16px/2 'Merriweather Sans', sans-serif;
	list-style: none;
	padding:0 0 0 3px;
	margin:0;
	display:inline-block;
	/* border-left:1px solid #fff; */
}
#menu-top .menu li:first-child{
	border:none;
}
#menu-top .menu li a{
	display:inline-block;
	color: #fff;
	text-decoration:none;
	font-weight:700;
	margin:0;
	padding:0 18px;
	text-transform:uppercase;
}
#menu-top .menu li a:hover{
	background:#2894BE;
}
#menu-top .menu li.current-menu-item a{
	background:#2894BE;
}

#menu-top .menu li > ul {
	display: none;
}


.front #header{
	padding:30px 0;
}

.front #header .wrap {
	/*min-height:270px;*/
	position:relative;
}
#header{
	overflow:hidden;
	position:relative;
	min-height:40px;
}

#header #anim{
	position:relative;
}
#header #anim .slide{
	position:relative;
	text-align:right;
	font-size:1px;
	overflow:hidden;
	float:left;
}
#header #anim .slide img{
	
}

#header #anim .content-box{
	position:absolute;
	z-index:55;
	top:0;
	left:0;
	height:100%;
	max-width:55%;
	padding:20px;
	text-align:left;
	font-size:16px;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
	
}
#header #anim .content{
	height:100%;
	background:rgba(70,70,70,0.85);
	padding:5% 7%;
	border-radius:10px;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}
#anim p, #anim h3{
	color:#fff;
}
#anim h3{
	font-size:30px;
	font-weight:400;
	margin-top:0;
}


#menu-side{
	margin-bottom:35px;
}
#menu-side *{
	margin:0;
	list-style:none;
	line-height:1.4;
}
#menu-side a{
	display:block;
	background:#F0F0F0;
	border-bottom:2px solid #fff;
	padding:9px 8% 9px 10%;
	text-shadow:1px 1px 0 #fff;
}
#menu-side a:hover{
	background:#ddd;
}
#menu-side  ul.paataso li a{
	color:#fff;
	font-weight:700;
	font-size:18px;
	background:#013352;
	text-shadow:1px 1px 1px #000;
	letter-spacing:1px;
}
#menu-side  ul.paataso li a:hover{

	background:#000;

}
#menu-side ul ul li a{
	color:#000;
}
#menu-side li.current-menu-item a{
	color:#2894BE;
	font-weight:bold;
}
.content-menu *{
	list-style:none;
	margin-left:0;
	font-size:18px;
	color:#2894BE;
	line-height:1.6;
}
.content-menu {
	margin:40px 0 0 10px;
}
.side .attachment-pysty{
	margin-bottom:-15px;
	margin-top: 30px;
}
.yhteysnappi{
	display:block;
	padding:25px;
	background:#fff;
	font: 400 26px/1.2 'Merriweather Sans', sans-serif;
	color:#2894BE;
	text-align:center;
	margin-top:50px;
	border: 2px dotted #EC7911;
	/*border-top: 12px solid #2894BE;*/
	/*border-bottom: 12px solid #2894BE;*/

	outline: 5px solid #005F9E;
}
.yhteysnappi:hover{
	background-color:#2894BE;
	color:#fff;
	border-color: #fff;
}
#content{
	padding:50px 0;
	margin:0;
}
#content .post{
	margin:10px 0 30px;
	padding-bottom:30px;
	border-bottom:1px solid #ccc;
}
#content .post.no-border{
	border-bottom:none;
}
#content .wrap{
	background: rgb(255,255,255);
	background: rgba(255,255,255,.8);
}
#nostot{
	background:rgb(20, 55, 92);
	background:rgba(20, 55, 92,.5);
	padding:20px 0;
}
.nostot .col{

}
.nostot .col a.box{
	padding:25px;
	padding-bottom: 65px;
	color:#4D4D4D;
	border:1px solid #bbb;
	text-decoration:none;
	background:#fff;
	display:block;
	min-height: 400px;
	position: relative;
	transition: background 0.3s, border-color 0.3s;
	-webkit-transition: background 0.3s, border-color 0.3s;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}
.nostot .col.mobile a.box{
	min-height: 20px;
}
.nostot .col a.box:hover{
	border-color:#2894BE;
	background:#2894BE;
}
.nostot .col h3, .nostot .col h2{
	color:#333;
	font:700 normal 24px/1.3 'Merriweather Sans', sans-serif;
	margin:4px 0 6px;
	letter-spacing:-1px;
}
.nostot .col p{
	line-height:1.5;
	font-size:15px;
}
.nostot .col span.nappi, a.nappi,#content a.nappi{
	color: #fff;
	display:inline-block;
	background:#2894BE;
	padding:6px 20px;
	border-radius:50%;
}
.nostot .col span.nappi{
	display:block;
	position: absolute;
	bottom: 15px;
}
.nostot .col a:hover *{
	color: #fff;
}
.nostot .col a:hover span.nappi, a.nappi:hover,#content a.nappi:hover{
	background:#00215C;
	color: #fff;
}
.nostot img{
	width:100%;
	height:auto;
}


dt.gallery-icon.landscape {
	/*display: table-cell;
	vertical-align: bottom;
	height: 150px;
	width: 250px;*/
}
dt.gallery-icon.landscape img {
	border:none !important;
}
dl.gallery-item{
	margin: 1%;
	width:27% !important;
	padding: 1%;
	background: #fff;
}
#footer{
	background:rgb(20, 55, 92);
	background:rgba(20, 55, 92,.8);
}
#footer *{
	font-size:14px;
	line-height:1.8;
	color:#fff;
}
/*#footer a:after{
	content:'»';
	padding-left:5px;
}*/
#footer h4{
	text-transform:uppercase;
	border-bottom:3px solid #2894BE;
	margin-bottom:10px;
}

#footer a:hover{
	text-decoration:underline;
}
#footer .menu{
	padding:0;
	margin:0;
}
#footer .col *{
	list-style:none;
	margin-left:0;
}
#footer .col > ul > li  > a{
	margin-left:5px;
}
#copy{
	padding:3px;
}
#copy *{
	font: 400 12px/1.6 'Merriweather Sans', sans-serif;
	color:#ccc;
}
#copy a:hover{
	color:#f17f11;
}
.priima_tum,.priima_vaal{
float:right;
}
.priima_tum,.priima_vaal{
	display:block;
	width:62px;
	height:22px;
	background: url(img/priima.png) no-repeat 0 0;
}
.priima_tum:hover{
	background: url(img/priima.png) no-repeat 0 -22px;
}
.priima_vaal{
	background: url(img/priima.png) no-repeat 0 -44px;
}
.priima_vaal:hover{
	background: url(img/priima.png) no-repeat 0 -66px;
}

form p{
	margin:0 0 5px 0;
}
input, textarea{
	padding:2px 10px;
	font:inherit;
}
input[type=submit]{
	padding:5px 20px;
	cursor:pointer;
}

/* mobilemenu */
    .select-wrapper{
        border: 1px solid #d8d8d8;            
        background:#2894BE url(img/arrow.png) no-repeat 98% 50%;
        cursor: pointer;
    }
    .select-wrapper, .select-wrapper select{
        width: 98%;
		display:block;
        height: 40px;
        line-height: 40px;
		position: relative;
		margin: 3px auto;
		font-size: 110%;
		font-weight: 700;
		text-transform: uppercase;
    }
    .select-wrapper:hover{
        border-color: #239fdb;
		background-color:#900;
    }
    .select-wrapper .holder{
		color:#fff;
        display: block;
		width:100%;
		text-align:center;
        margin: 0 auto;
        white-space: nowrap;            
        overflow: hidden;
        cursor: pointer;
        position: absolute;
        z-index: 1; 
		top:0;
    }
    .select-wrapper select{
        position: relative;
		z-index: 50; 
        cursor: pointer;
        outline: none;
        opacity: 0;
        /* CSS hacks for older browsers */
        _noFocusLine: expression(this.hideFocus=true); 
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
        -khtml-opacity: 0;
        -moz-opacity: 0;
    }

    .select-wrapper{
	display:none;
	}
	

@media screen and (max-width: 980px){
	
	#header #anim .content-box{
	max-width:80%;
	padding:1%;
	}

}
@media screen and (max-width: 800px){
	#header #anim .content-box{
	max-width:100%;
	width:100%;
	position:relative;
	padding:0;
	}
	#header #anim .content-box .content{
	border-radius:0;
	}

}

@media screen and (max-width: 720px){
	
	
	#top h4{
	display:none;
	}
	#menu-top ul{
	display: none;
	}
	.select-wrapper {
	display: block;
	}
	#footer .links{
	display:none;
	}

}