/* BASIC PAGE SETUP ============================================================================= */

body { 
margin : 0 auto;
padding : 0;
font-family: 'Open Sans', arial;
color : #000; 
text-align: center;
}

button, input, select, textarea { font-family : 'lucida sans unicode', 'lucida grande', 'Trebuchet MS', verdana, arial, helvetica, helve, sans-serif; 
color : #333; }


/*  HEADINGS  ============================================================================= */

h1, h2, h3, h4, h5, h6 {
font-weight : normal;
margin-top: 10px;
letter-spacing: -1px;
text-transform: uppercase;
word-break: break-all;
}

h1 { 
color: #000;
margin-bottom : 0.2em;
font-size : 4em;
line-height : 1;
}

.esittely h1 {margin: 10px 0 40px 0;}

h2, .esittely h2 { 
margin-bottom: .5em;
margin-top: .5em;
font-size : 2.3em; /* 40 / 16 */
line-height : 1.2;
}

h2 { color: #00d3ec; }
.hcolor { color: #00d3ec; }
.hcolor2 { color: #00b6e4; }

.esittely h2 { color: #000;}

#cvtable {color: #fff;}
.grey {background: #2d5358;} /* harmaa #f1f0f0 */

h3 { 
color: #00d3ec;
margin-bottom: .5em;
margin-top: .5em;
font-size : 1.8em;
font-weight: bold;
line-height : 1.2;
}

footer p { color: #fff; font-weight: bold; text-transform: uppercase; font-size : 1.3em; line-height : 1.3;}

h4 { 
color: #444;
letter-spacing: 0;
margin-bottom : 0.5em;
font-size : 1.5em; /* 24 / 16  */
line-height : 1.5; }


h5 { 
color: #555;
letter-spacing: 0;
margin-bottom : 1.25em;
line-height : 1.5;
font-size : 1.25em; /* 20 / 16 */ }

h6 { 
letter-spacing: 0;
color: #666;
line-height : 1.25;
font-size : 1em; /* 16 / 16  */ }

.alaotsikko h5 {color: #fff;}


/*  TYPOGRAPHY  ============================================================================= */


p, ol, ul, dl, address { 
margin-bottom : 1.5em; 

font-size : 1.1em; /* 16 / 16 = 1 */ }

li {color: #fff;}

p {hyphens : auto;}

p.introtext {
font-size : 2.5em; /* 40 / 16 */
color: #333;
line-height: 1.4em;
letter-spacing: -1px;
margin-bottom: 0.5em;
}

p.handwritten {
color: #666;
}

qt {color: #00b6e4; font-size : 3.5em; line-height: 0em; }
#qt1 { position: relative; display: block; top: -5px; }
#qt2 { position: relative; display: block; top: 20px; text-align: right;}
p.allekirjotus { font-size: 1.1em; line-height: 1.5em; color: #A0A0A0;}

p.palstatxt {text-align:justify;}
p.kehut {text-align:justify; text-transform: uppercase; font-size : 1.4em; font-weight: bold; line-height: 1,3em;}

.esittely .vas .palstatxt {margin: 0 40px 0 0;}
.esittely .keski .palstatxt {margin: 0 20px 0 0;}
.esittely .oik .palstatxt, .esittely .oik .allekirjotus{margin: 0 0 0 40px;}

p.center {
text-align: center;
}

.and {
font-family: GoudyBookletter1911Regular, Georgia, Times New Roman, sans-serif;
font-size: 1.5em; /* 24 / 16 */
}

ul, ol { margin : 0 0 1.5em 0; padding : 0 0 0 24px; }
li ul, li ol { margin : 0; font-size : 1em; /* 16 / 16 = 1 */ }
dl, dd { margin-bottom : 1.5em; }
dt { font-weight : normal; }
b, strong { font-weight : bold; }
hr { 
display : block; 
margin : 1em 0; 
padding : 0;
height : 1px; 
border : 0; 
border-top : 1px solid #ccc;
}

small { font-size : 1em; /* 16 / 16 = 1 */ }

sub, sup { 
font-size : 75%; 
line-height : 0; 
position : relative; 
vertical-align : baseline; }

sup { top : -.5em; }

sub { bottom : -.25em; }

.subtext {color: #666;}


/* LINKS =============================================================================  */

a { 
color: #00C1F6;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
text-decoration: none;
}
.huomiolinkki {text-transform: uppercase;}

a:visited { color : #00C1F6; }
a:focus { outline : thin dotted; color : rgb(0,0,0); }
a:hover, a:active { outline : 0; color : #87edfa;}

footer a { color : #ffffff;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}

footer a:visited { color : #fff; }

footer a:focus { 
outline : thin dotted; 
color : rgb(0,0,0); }

footer a:hover, footer a:active { outline : 0; color : #fff;}

.somenapit img {margin: 13px 5px 0px 0px;}

#some_f:hover { content: url('../sitepics/some_f_hover.jpg'); }
#some_in:hover { content: url('../sitepics/some_in_hover.jpg'); }
#some_insta:hover { content: url('../sitepics/some_insta_hover.jpg'); }
#some_twitter:hover { content: url('../sitepics/some_twitter_hover.jpg'); }
#some_behance:hover { content: url('../sitepics/some_behance_hover.jpg'); }


/* responsiivinen youtube-video ======================================================= */

.videoleveys {margin: 0 auto; max-width: 724px;}
.video-responsive { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }
.video-responsive iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* IMAGES ============================================================================= */

img {
border : 0;
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}

img.floatleft { float: left; margin: 0 10px 0 0; }
img.floatright { float: right; margin: 0 0 0 10px; }

.behance_refe {
background-repeat: no-repeat;
background-position: center top;
background-size: 100%;
background-color: #fff;
text-align: center;
margin: 0 auto;
max-width: 724px;
}
.behance_refe_h {
margin: 0 auto;
max-width: 724px;
text-align: justify;
padding-bottom: 3.5em;
}
.center {
text-align: center;
}
.behance_refe img {margin-bottom: 52px;}
.behance_refe #img-ylin {margin-top: 52px;}
#behance_link {position: relative; top: -15px; float: right;}

.toisentasonkuva img{ 
margin: 5px;
vertical-align: top;
}

.refeheaderkuva {width:100%;}

/* TABLES ============================================================================= */

table { 
border-collapse : collapse;
border-spacing : 0;
margin-bottom : 1.4em; 
width : 100%; }

th, td, caption { padding : .25em 10px .25em 5px; }

tfoot { font-style : italic; }

caption { background-color : transparent; }

/* FORMS ============================================================================= */

form { margin : 0; }
fieldset { margin-bottom : 1.5em; padding : 0; border-width : 0; }

legend { 
*margin-left : -7px; 
padding : 0; 
border-width : 0; }

label{
font-weight : normal;
cursor : pointer;
display:block;
margin:0;
position:relative;
top:0;
left:0;
}

label.inline{ display:inline; margin:0;}

label span{ color:#666; font-size:0.9em;}

label span.right {
position:absolute;
bottom:0;
right:1em;
text-align:right;
}

label.disabled{color:#ccc;}

button, search, input, select, textarea { 
font-size : 100%; 
margin : 0; 
vertical-align : baseline; 
*vertical-align : middle; }

button, input { 
line-height : normal; 
*overflow : visible; }

button, input[type="button"], input[type="reset"], input[type="submit"] { 
padding: 0.5em 1em;
margin: 0;
cursor : pointer; 
text-shadow:0 1px 0 #fff;
}

input[type="checkbox"], 
input[type="radio"] { 
box-sizing : border-box; }

input[type="search"] { box-sizing : content-box;}

button::-moz-focus-inner, input::-moz-focus-inner { padding: 0; border : 0; }


input{ margin:0;
border:1px solid #ccc;
font-size:1em;
padding:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
background:#fff;
-moz-box-shadow:inset 0px 0px 6px #ccc;
-webkit-box-shadow:inset 0px 1px 6px #ccc;
box-shadow:inset 0px 1px 6px #ccc;
}

	input::-webkit-input-placeholder,
	input:-moz-placeholder,
	.placeholder{
	color:#bbb;
	}

	

	input::-moz-focus-inner {border:0;}



	input[disabled="disabled"], input.disabled{

	color:#999;

	background:#f5f5f5;

	-moz-box-shadow:inset 0px 0px 2px #ddd;

	-webkit-box-shadow:inset 0px 1px 2px #ddd;

	box-shadow:inset 0px 1px 2px #ddd;

	}





/* Colors for form validity */

input:valid, 

textarea:valid   {  

/* Styles */ }



input:invalid, 

textarea:invalid {

-webkit-box-shadow : 0 0 2px #f00; 

-moz-box-shadow : 0 0 2px #f00;

box-shadow : 0 0 2px #f00; }



.no-boxshadow input:invalid, 

.no-boxshadow textarea:invalid {

background-color : #ccc; }



/*  MAIN LAYOUT	====================================================================================================================== */


#wrapper {
width: 100%;
position: relative;
text-align: left;
}

#headcontainer{ height: auto;
width: 100%;
background:url('../sitepics/header_bg.jpg') no-repeat center top;
background-attachment: fixed;
background-color: #009fcb;
}

#headcontainer_alasivu{ height: auto;
width: 100%;
background-color: #2d3435;
}

#footercontainer { height: auto;
width: 100%;
background:url('../sitepics/header_bg.jpg') no-repeat center bottom;
background-attachment: fixed;
background-color: #009fcb;
}

header {
clear: both;
width: 80%; /* 1000px / 1250px */
font-size: 0.8125em; /* 13 / 16 */
max-width: 92.3em; /* 1200px / 13 */
margin: 0 auto;
padding: 210px 0px 210px 0px;
position: relative;
color: #000;
text-align: center;
}
.headersmall{
clear: both;
width: 80%; /* 1000px / 1250px */
font-size: 0.8125em; /* 13 / 16 */
max-width: 92.3em; /* 1200px / 13 */
margin: 0 auto;
padding: 25px 0px 25px 0px;
position: relative;
color: #000;
text-align: center;
}

    
#sitelogo {display: block; margin: 0 auto;} /* position: relative; top: -5em; */
} 


.headerbox{ margin-bottom: 17px;}
.headerbox p {color: #2d3435; font-weight: bold; margin-bottom: 0; text-transform: uppercase; letter-spacing: -1px;}
#headcontainer_alasivu .headerbox p {color: #fff;}
.headerbox #otsikko1 { font-size: 2.5em; margin-bottom: 15px;}
.headerbox #otsikko2 { font-size: 1.85em; margin-top: 15px;}


.headersmall .headerbox #otsikko1 { font-size: 1.07em; margin-bottom: 5px;}
.headersmall .headerbox #otsikko2 { font-size: 1.47em; margin-top: 5px;}
.headersmall .headerbox img { width: 100; height: 84px; }

/* --- tiivistelmä --- */

.historytable {border-collapse:collapse;  font-size: 0.8em; top: -20px; padding: 0; position: relative; width: 100%;}
.historytable td {text-align:left; border-bottom: solid 1px #00b6e4; vertical-align: middle; padding: 20px 0 15px 0; }
.historytable .eka {width: 15%; font-weight: bold; font-size: 1.2em; padding-bottom: 40px; color: grey; }
.historytable .kolmas {width: 61%; padding-left: 12px; font-size: 1.2em; font-weight: bold; line-height: 1.0em;}
.historytable .kolmas span {font-size: 0.8em; font-weight: bold; color: grey;}
.historytable .nro {width: 24%; font-weight: bold; font-size: 4em; text-align: center; color: #00b6e4; letter-spacing: -5px; vertical-align: middle;}
.historytable .nro span {font-weight: bold; font-size: 0.4em; margin-left: 5px;}


.historytable .juha .eka { color: #fff; }
.historytable .juha .kolmas { color: #fff;}


/* --- tiivistelmä end --- */


.refepikkukuva {margin-right: 20px; margin-bottom: 20px;}

#maincontentcontainer {width: 100%; background: white;}

#refecontentcontainer {width: 100%;
background: #2d3435; /* Old browsers */
background: -moz-linear-gradient(top, #2d3435 0%, #3a4446 20%, #2d3435 53%, #2d3435 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2d3435), color-stop(20%,#3a4446), color-stop(53%,#2d3435), color-stop(100%,#2d3435)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #2d3435 0%,#3a4446 20%,#2d3435 53%,#2d3435 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #2d3435 0%,#3a4446 20%,#2d3435 53%,#2d3435 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #2d3435 0%,#3a4446 20%,#2d3435 53%,#2d3435 100%); /* IE10+ */
background: linear-gradient(to bottom, #2d3435 0%,#3a4446 20%,#2d3435 53%,#2d3435 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2d3435', endColorstr='#2d3435',GradientType=0 ); /* IE6-9 */
}
#refecontentcontainer p {color: #fff;}

#refecontentcontainer_alasivu { width: 100%; background: #fff; }

#juhacontentcontainer {width: 100%; background-color: #2d3435;
background-image:url('../sitepics/juha2_bg.jpg');
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
#juha2contentcontainer {width: 100%; background-color: #2d3435;
background-image:url('../sitepics/juha_bg.jpg');
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;

}
#juhacontentcontainer p, #juha2contentcontainer p {color: #fff;}

.standardcontainer {}
.darkcontainer {background: rgba(102, 102, 102, 0.05);}
.lightcontainer {background: rgba(255, 255, 255, 0.33);}

#opacitytxt {
padding: 50px 40px 30px 40px;
background: rgba(44, 52, 54, 0.6);
-pie-background:  rgba(44, 52, 54, 0.6);
behavior: url(PIE.htc);
}

#maincontent{
clear: both;
width: 80%; /* 1000px / 1250px */
font-size: 0.8125em; /* 13 / 16 */
max-width: 92.3em; /* 1200px / 13 */
margin: 0 auto;
padding: 17em 0px;
color: #333;
line-height: 1.5em;
position: relative;
}

.maincontent{
clear: both;
width: 80%; /* 1000px / 1250px */
font-size: 0.8125em; /* 13 / 16 */
max-width: 92.3em; /* 1200px / 13 */
margin: 0 auto;
padding: 8em 0 8em 0;
color: #333;
line-height: 1.5em;
position: relative;
}


/* isompi refekuva neliömuotoselle kuvalle, ota pois jos vinokuva*/
.refeiso {margin-top: 20px;}

/* kuvaopacity refelistiin*/
.paarefeopacity a  img{
filter:alpha(opacity=83);
-moz-opacity:.83;
opacity:.83;
}

a.refeopacity  img{
filter:alpha(opacity=65);
-moz-opacity:.65;
opacity:.65;
width: 100%;

}

a.refeopacity:hover img, .paarefeopacity a:hover  img{
filter:alpha(opacity=100);
-moz-opacity:1;
opacity:1;
} 

/* nämä liittyy päärefejen kuvateksteihin */
.paarefeopacity img{ max-width: 98%; height: auto; margin-bottom: 1%;}
.refeimg { position: relative; }
.refetxt { position: absolute; bottom: 1.4%; right: 5%; text-transform: uppercase; }

/* kuvahover txt alkaa */

.refelistimg { overflow: hidden; float: left; position: relative;}
.refelistimg a {text-decoration: none; float: left;}
.refelistimg a:hover { cursor: pointer;}
.refelistimg a img {float: left; margin: 0; border: none; background: #000;
}

.refelistimg a:hover .kuvatxt{
	display: block;
	font-size: 0.9em;
	padding: 10px 0; 
	background: #111;
	filter:alpha(opacity=75);
	opacity:.75;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; /*--IE 8 Transparency--*/
	color: #fff;
	position: absolute;
	bottom: 0px; 
	left: 0px; 
	padding: 10px;
	margin: 0;
	width: 367px;
}

.refelistimg a:hover .kuvatxt strong {
	display: block;
    margin-bottom: 5px;
	font-size:1.0em;
	color: #FFBA00;
}

.refelistimg a .kuvatxt { display: none; }


/* kuvahover txt loppuu */


-#footercontainer {
width: 100%;
background: #39c3e8; /* Old browsers */
background: -moz-linear-gradient(top, #39c3e8 0%, #007aba 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#39c3e8), color-stop(100%,#007aba)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #39c3e8 0%,#007aba 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #39c3e8 0%,#007aba 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #39c3e8 0%,#007aba 100%); /* IE10+ */
background: linear-gradient(to bottom, #39c3e8 0%,#007aba 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#39c3e8', endColorstr='#007aba',GradientType=0 ); /* IE6-9 */
}

	

footer {
text-align: center;
clear: both;
width: 80%; /* 1000px / 1250px */
font-size: 0.8125em; /* 13 / 16 */
max-width: 92.3em; /* 1200px / 13 */
margin: 0 auto;
padding: 130px 0px 100px 0px;
color: #fff;

}

footer strong { 
font-size: 1.077em; /* 14 / 13 */ 
color: #aaa;}

footer a:link, footer a:visited { color: #999; text-decoration: none; }
footer a:hover { color: #fff; text-decoration: none; }

footer .alignleft {text-align: left;}
footer .alignright {text-align: right;}

ul.pagefooterlist, ul.pagefooterlistimages {
display: block;
float: left;
margin: 0px;
padding: 0px;
list-style: none;
}



		ul.pagefooterlist li, ul.pagefooterlistimages li {

			clear: left;

			margin: 0px;

			padding: 0px 0px 3px 0px;

			display: block;

			line-height: 1.5em;

			font-weight: normal;

			background: none;



		}



		ul.pagefooterlistimages li {

			height: 34px;

		}





		ul.pagefooterlistimages li img {

			padding: 5px 5px 5px 0px;

			vertical-align: middle;

			opacity: 0.75;

			-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";

			filter: alpha( opacity  = 75);

			-webkit-transition: all 0.3s ease;

			-moz-transition: all 0.3s ease;

			-o-transition: all 0.3s ease;

			transition: all 0.3s ease;

		}



		ul.pagefooterlistimages li a

		{

			text-decoration: none;

		}



		ul.pagefooterlistimages li a:hover img {

			opacity: 1.0;

			-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

			filter: alpha( opacity  = 100);

		}

			#smallprint {
				margin-top: 20px;
				line-height: 1.4em;
				/* text-align: center; */
				color: #999;
				font-size: 0.923em; /* 12 / 13 */
			}

			#smallprint p{
				vertical-align: middle;
			}

			#smallprint .twitter-follow-button{
				margin-left: 1em;
				vertical-align: middle;
			}

			#smallprint img {
				margin: 0px 10px 15px 0px;
				vertical-align: middle;
				opacity: 0.5;
				-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
				filter: alpha( opacity  = 50);
				-webkit-transition: all 0.3s ease;
				-moz-transition: all 0.3s ease;
				-o-transition: all 0.3s ease;
				transition: all 0.3s ease;
			}

			#smallprint a:hover img {
				opacity: 1.0;
				-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
				filter: alpha( opacity  = 100);
			}

			#smallprint a:link, #smallprint a:visited { color: #999; text-decoration: none; }
			#smallprint a:hover { color: #999; text-decoration: underline; }


/*  SECTIONS  ============================================================================= */

.section { clear: both; padding: 0px; margin: 0px; }
.refesection { clear: both; padding: 0px; margin: 125px 0 0 0; }
	
/*  CODE  ============================================================================= */



pre.code {

	padding: 0;

	margin: 0;

	font-family: monospace;

	white-space: pre-wrap;

	font-size: 1.1em;

}



strong.code {

	font-weight: normal;

	font-family: monospace;

	font-size: 1.2em;

}





/*  EXAMPLE  ============================================================================= */



#example .col {

	background: #ccc;

	background: rgba(204, 204, 204, 0.85);



}



/*  SAMPLE  ============================================================================= */



#sample .col {

	background: #ccc;

	padding: 1em 0;

	background: rgba(204, 204, 204, 0.85);



}



/*  CALCUATIONS  ============================================================================= */



#calculated .col {

	background: #ccc;

	padding: 1em 0;

	background: rgba(204, 204, 204, 0.85);



}



/*  NOTES  ============================================================================= */





.note {

	position:relative;

	padding:1em 1.5em;

	margin: 0 0 1em 0;

	background: #fff;

	background: rgba(255, 255, 255, 0.5);

	overflow:hidden;

}



.note:before {

	content:"";

	position:absolute;

	top:0;

	right:0;

	border-width:0 16px 16px 0;

	border-style:solid;

	border-color:transparent transparent #cccccc #cccccc;

	background:#cccccc;

	-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);

	-moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);

	box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);

	display:block; width:0; /* Firefox 3.0 damage limitation */

}



.note.rounded {

	-webkit-border-radius:5px 0 5px 5px;

	-moz-border-radius:5px 0 5px 5px;

	border-radius:5px 0 5px 5px;

}



.note.rounded:before {

	border-width:8px;

	border-color:#ff #ff transparent transparent;

	background: url(/images/bodyback.png);

	-webkit-border-bottom-left-radius:5px;

	-moz-border-radius:0 0 0 5px;

	border-radius:0 0 0 5px;

}

/*  SCREENS  ============================================================================= */

.siteimage {

	max-width: 90%;
	padding: 5%;
	margin: 0 0 1em 0;
	background: transparent url(/images/stripe-bg.png);
	-webkit-transition: background 0.3s ease;
	-moz-transition: background 0.3s ease;
	-o-transition: background 0.3s ease;
	transition: background 0.3s ease;
}

.siteimage:hover {
	background: #bbb url(/images/stripe-bg.png);
	position: relative;
	top: -2px;
}

/*  COLUMNS  ============================================================================= */

.twocolumns{
	-moz-column-count: 2;
	-moz-column-gap: 2em;
	-webkit-column-count: 2;
	-webkit-column-gap: 2em;
	column-count: 2;
	column-gap: 2em;
  }

/*  BUTTONS  ============================================================================= */

.button {
	display: inline-block;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font-weight: bold;
	text-transform: uppercase;
	color: #2c3436;
	padding: 1em 1.5em;
	margin: 1px;
	background: #00d3ec;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	font-size : 1.1em;
}

.buttoncv1, .buttoncv {
	padding: 1.6em 2.3em;
	font-size : 2.1em;
	letter-spacing: -1px;
	line-height : 1.1;
}

.buttoncv1, .buttoncv3 { margin-left: 40px;}


.button:visited { 
	background: #00d3ec;
	color: #2c3436;
}

.button:hover {
	background: #284449;
	color: #00d3ec;
	text-decoration: none;
}

.button:active {
	background: #00d3ec;
	color: #2c3436;
	position: relative;
	top: 1px;
}



/*  GLOBAL OBJECTS ============================================================================= */


.breaker { clear: both; }

.group:before,
.group:after {

    content:"";

    display:table;

}

.group:after {

    clear:both;

}

.group {

    zoom:1; /* For IE 6/7 (trigger hasLayout) */

}





.floatleft {

    float: left;

}



.floatright {

    float: right;

}





/* VENDOR-SPECIFIC ============================================================================= */



html { 

-webkit-overflow-scrolling : touch; 

-webkit-tap-highlight-color : rgb(52,158,219); 

-webkit-text-size-adjust : 100%; 

-ms-text-size-adjust : 100%; }



.clearfix { 

zoom : 1; }



::-webkit-selection { 

background : rgb(23,119,175); 

color : rgb(250,250,250); 

text-shadow : none; }



::-moz-selection { 

background : rgb(23,119,175); 

color : rgb(250,250,250); 

text-shadow : none; }



::selection { 

background : rgb(23,119,175); 

color : rgb(250,250,250); 

text-shadow : none; }



button, 

input[type="button"], 

input[type="reset"], 

input[type="submit"] { 

-webkit-appearance : button; }



::-webkit-input-placeholder {

font-size : .875em; 

line-height : 1.4; }



input:-moz-placeholder { 

font-size : .875em; 

line-height : 1.4; }



.ie7 img,

.iem7 img { 

-ms-interpolation-mode : bicubic; }



input[type="checkbox"], 

input[type="radio"] { 

box-sizing : border-box; }



input[type="search"] { 

-webkit-box-sizing : content-box;

-moz-box-sizing : content-box; }



button::-moz-focus-inner, 

input::-moz-focus-inner { 

padding : 0;

border : 0; }



p {

/* http://www.w3.org/TR/css3-text/#hyphenation */

-webkit-hyphens : auto;

-webkit-hyphenate-character : "\2010";

-webkit-hyphenate-limit-after : 1;

-webkit-hyphenate-limit-before : 3;

-moz-hyphens : auto; }

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

.headerbox{ padding: 0 50px 0 50px;}
/* .esittely h1 {margin: 40px 0 30px 0;} */

}

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

.buttoncv1, .buttoncv3 { margin-left: 0;}

.behance_refe img {margin-bottom: 25px;}
.behance_refe #img-ylin {margin-top: 25px;}
.behance_refe {padding-left: 20px; padding-right: 20px;}
}

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

header {padding: 85px 0px 85px 0px;}

#juhacontentcontainer { background-image: none; }
#maincontent{ padding: 7em 0px; }
.maincontent{ padding: 3.5em 0 4em 0;}
footer .alignleft {text-align: center;}
footer .alignright {text-align: center;}
#footercontact_img {margin-top: 20px; margin-bottom: 20px;}

.headerbox #otsikko1 { font-size: 2.3em;}
.headerbox #otsikko2 { font-size: 1.7em;}
.headersmall{ padding: 15px 0px 15px 0px; }
.headersmall .headerbox #otsikko1 { font-size: 0.87em; margin-bottom: 3px;}
.headersmall .headerbox #otsikko2 { font-size: 1.22em; margin-top: 3px;}
.headersmall .headerbox img { width: 80; height: 67px; }

.esittely .vas .palstatxt, .esittely .keski .palstatxt, .esittely .oik .palstatxt {margin: 10px 0 10px 0;}

a.refeopacity  img, .paarefeopacity a  img{
filter:alpha(opacity=100);
-moz-opacity:1;
opacity:1;
}
.refetxt p{
	background-color: rgba(0, 0, 0, 0.30);
	padding: 4px 7px;
}

.paarefeopacity img{margin-bottom: 5%;}

.refesection { margin: 75px 0 0 0; }
.refelistimg  {margin-bottom: 30px;}
.behance_refe_h { padding-bottom: 2em; }

}