/*
	Fonts
*/

/*
	Basic stuff
*/
* { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }

::-webkit-input-placeholder {
color:#000000;
}
:-moz-placeholder {
color:#000000;
}
::-moz-placeholder {
color:#000000;
}
:-ms-input-placeholder {
color:#000000;
}
html,
body { min-height: 100%; }
html { font-size: 16px; }
body { font-family: "Open Sans", sans-serif; font-weight: 300; margin-top: 1.875rem; }
h1,
h2,
h3,
h4,
h5,
h6,
h7 { font-weight: 300; margin: 0 0 1em 0; line-height:1em; }
p { margin: 0 0 1em 0; }
a,
a:hover,
a:active,
a:visited { text-decoration: none; color: #000000; }
img { width: auto; max-width: 100%; height: auto; -webkit-transition: all 0.6s ease; transition: all 0.5s ease; }
strong { font-weight: bold; }
hr { display: block; height: 8px; border: 0; border: none; background-color: #fecc00; margin: 4.0625rem 0 3.4375rem 0; padding: 0; }
.center { text-align: center; }
.bg-dark-grey { background-color: #575656; }
.txt-yellow { color: #fecc00; }
noscript { display: block; width: 100%; border-bottom: 1px solid #000; text-align: center; }
noscript h1 { }
noscript p { }
label.cb { display: block; position: relative; padding-left: 25px; line-height: 1.5em; }
label.cb input[type=checkbox] { position: absolute; top: 0; left: 2px; }
ul.center { display: block; position: relative; text-align: center; list-style: none; background-image: url('gfx/white-opacity-80.png'); padding: 0; margin: 0; }
ul.center li { position: relative; display: inline-block; vertical-align: middle; overflow: hidden; }
figure{ display:block; margin: 3.75rem auto; }
/*
	Custom Stuff
*/
#page,
.container { position: relative; width: 95%; max-width: 1200px; margin: 0 auto; }
body.page #page,
body.page .container{ max-width:1600px; } 
.container.no-limits { max-width: none; }
.container.of { overflow: hidden; }
.site-header { margin-bottom: 2.25rem; }
.site-header ul { display: block; max-width:510px; list-style: none; list-style-type: none; padding: 0; margin: 0; }
.site-header li { display: table-cell; vertical-align: middle; }
.site-header li.col-1 { width:50%; padding-right: 2.6875rem; }
.site-header li.col-2 { width:15%; padding-right: 1.4rem; }
.site-header li.col-3 { width:35%; }
.site-header li p { font-size: 1.0625rem; font-weight: 400; line-height: 1.058823529411765em; margin: 0; }
.site-header img.logo-geofoorumi {  }
.site-header img.logo-gtk { vertical-align: middle; }
article .entry-content { margin: 0; }
#main { position: relative; }
#main img.article-main { margin-bottom: 2.1875rem; }
#main .left { float: left; width: 65%; }
#main .container-main-banner{ padding-bottom:2.125rem; }
#main .left a{ font-weight:600; }
#main .left h1 { font-size: 3.75rem; line-height: 1em; margin: 0 0 2.1875rem 0; }
#main .left h2{ font-size: 1.625rem; line-height: 1em; margin: 2rem 0 1rem 0; }
#main .left h3 { font-size: 1.5rem; font-weight:600; line-height: 1em; margin: 0 0 1rem 0; }
#main .left p { }
#main .left div.ingressi p { font-size: 1.25rem; font-style: italic; }
#main .left img { display:block; margin: 3.75rem auto 0rem auto; }
#main .left div.keltainen-laatikko{ background-color:#fecc00; padding: 3.25rem 2.875rem; margin:2.1875rem 0; }
#main .left div.keltainen-laatikko ul{ padding: 0 0 0 1.5rem; margin-left:0; list-style:none; list-style-type:none; }
#main .left div.keltainen-laatikko li{ position:relative; }
#main .left div.keltainen-laatikko li::before{ content:"–"; position:absolute; left:-1rem; }
#main .right { float: right; width: 32%; padding: 2.8125rem 1.875rem 4.0625rem 2.5rem; }
#main .right h2 { font-size: 2.25rem; font-weight: 300; }
#main .right ul { list-style: none; list-style-type: none; padding: 0; margin: 0; }
#main .right li { margin-bottom: 1.5625rem; }
#main .right li.active a { font-weight: 600; }
#main .right a { font-size: 1rem; font-weight: 300; color: #fff; }
.site-footer { border-top: 8px solid #fecc00; padding: 3.125rem 0 5rem 0; margin: 2.1875rem 0 0 0; }
.site-footer img{ vertical-align:middle; margin-left:0.25rem; }
.site-footer p.main { font-size: 1.5625rem; }
.site-footer p span { display: inline-block; font-weight: 300; }
.site-footer .col-1 { float: left; width: 25%; padding-right: 2rem; }
.site-footer .col-2 { float: left; width: 40%; padding-right: 2rem; }
.site-footer .col-3 { float: left; width: 35%; }

/* FRONTPAGE */
#main #jutut{ position:relative; width:auto; height:auto; }
#main .juttu{ position:relative; width:auto; height:auto; display:block; padding:0; margin:0; overflow:hidden; }
#main .juttu .border-1{ position:absolute; bottom:0; right:0; width:100%; height:5px; background-color:#ffffff; z-index:999; }
#main .juttu .border-2{ position:absolute; bottom:0; right:0; width:5px; height:100%; background-color:#ffffff; z-index:999; }
#main .juttu table{ border-collapse:collapse; paddding:0; margin:0; }
#main .juttu td{ vertical-align:middle; }
#main .juttu img{ display:block; width:100%; padding: 0; }
#main .juttu .sisalto img{ width:auto; max-width:100%; }
#main .juttu .sisalto{ position:absolute; bottom:0; left:0; z-index:9999; display:block; width:50%; height:50%; background-color:#ffffff; background-color:rgba(255,255,255,0.8); padding:2.5rem; }
#main .juttu .sisalto.oikea{ left:auto; right:0; }
#main .juttu .sisalto.oikea{ left:auto; right:0; }
#main .koko-s{ width:25%; }
#main .koko-s .sisalto{ width:100%; height:100%; background-color:transparent; }
#main .koko-s h1{ font-size: 2.3125rem; line-height:1; margin: 0 0 0.5em 0; }
#main .koko-s,
#main .koko-s h1,
#main .koko-s p,
#main .koko-s a{ color:#ffffff; }
#main .koko-m{ width:50%; }
#main .koko-m h1{ font-size: 2.2rem; line-height:1.2em; } /*2.3125rem */
#main .koko-m .sisalto{ width:50%; height:100%; }
#main .koko-l{ width:50%; }
#main .koko-l h1{ font-size:2.5rem; line-height:1.2em; } /* 3.2*/

.caption{ font-size: 0.8em; font-weight: 500;}

#main .juttu.first{  }
#main .juttu.first p{ margin: 0 0 0.75rem; }
#main .juttu.first .sisalto{ background-color:transparent; }
#main .frontpage-logo-gtk{ margin-bottom:1.25rem; max-width:24% !important; }

a.lang-ball{ display:block; width:2rem; height:2rem; float:left; text-align:center; color:#fff; font-size:0.9375rem; font-weight:600; line-height:2rem; background-color:#575656; border-radius:50%; margin: 0 0.25rem 0.25rem 0; }
/*
	Responsive
*/
@media only screen and (max-width : 767px) {
	html{ font-size:14px; }
	
	#main .left h1{ font-size:2.5rem; }
	
	#main .left,
	#main .right { float: none; display: block; width: 100%; }
	.site-footer .col-1,
	.site-footer .col-2,
	.site-footer .col-3{ float: none; display: block; width: 100%; }
	.site-footer .col-3{ margin-top:1rem; }
}

@media only screen and (max-width : 600px) {
	html{ font-size:12px; }
	.site-header li p { font-size: 0.75rem; }	
}