/* WebGarden Oy 2019 */

html { -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */ }

::selection { background: #dc061f; color: #fff; }

.mceContentBody ul, .mceContentBody ol { padding: 6px 0 6px 25px !important; }

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

body {
	font-family: 'Noto Sans', sans-serif;
	font-weight: 400;
	font-size: 15px; 
    font-optical-sizing: auto;
	color: #414141;
	line-height: 1.5em;
    font-variation-settings:
    "wdth" 100;
}
	
	body.siteBody {
		text-align: center;
	}
	
/*   FONTIT   */
	
	h1, h2, h3, h4, h5, h6 {
		font-family: "Jost", sans-serif;
		font-weight: 700;
		font-style: normal;
		line-height: 1.2em;
	}

.h2_big { font-size: 42px; padding: 30px 0 22px 0; color:#e11e2d !important; }

.botborder { border-bottom: 1px solid #c4c4c4; padding-bottom: 8px !important; margin-bottom: 16px !important; }
			
.yhteystiedot { padding: 0 0 15px 0; }

		.yhteystiedot h4 { padding: 0.5em 0 0 0; }

		.yhteystiedot p { padding: 0 0; }

	a { color: #17b0ff; text-decoration: underline; }
	
	a:hover { color: #17b0ff; text-decoration: none; }
	
/*   MUUT   */
	
	.kuvaRight { float: right !important; margin: 7px !important; }
	.kuvaLeft { float: left !important; margin: 7px !important; }

	.max40pros { max-width: 40%; height: auto; }
	
	.centered { text-align: center; }
	
	.readMore,
	.cf_resetAll_link {
		background: #dc061f;
		padding: 10px 21px;
		color: #fff;
		font-size: 1rem !important;
		line-height: 1em;
		border-top: 0 !important;border-right: 0 !important;border-left: 0 !important;margin: 0 !important;-moz-border-radius: 30px !important;-webkit-border-radius: 30px !important;border-radius: 30px !important;text-decoration: none;cursor: pointer;display: inline-block;text-shadow: none !important;ackground-image: none !important;box-shadow: none !important;
		-webkit-transition: all .3s ease;-moz-transition: all .3s ease;-o-transition: all .3s ease;transition: all .3s ease;
	}
	
		.readMore:hover,
		.cf_resetAll_link:hover {
			background: #ce051c;
			color: #fff !important; 
			border-top: 0 !important;border-right: 0 !important;border-left: 0 !important;
		}

		.orange { background: #f2a635 !important; } .orange:hover { background: #e29420 !important; }

		.readMore.bigger { font-size: 17px !important; padding:  12px 25px !important; }

	.onlyMobile { display: none; }

	.article-info { background: rgba(255,255,255,0.5); padding: 3px 12px; border-radius: 4px; margin-bottom: 6px; font-size: 13px; }

.lead strong { font-weight: 700 !important; }
/*   TAULUKKO   */

	.responsive-table { overflow-x:auto }
	
	table {
		font-size: 15px;
		line-height: 1.4em;
		border-collapse: separate;
		border-spacing: 0;
		/*border: 1px solid #9a9a9a;*/
		margin: 6px 0;
		border-radius: 5px;
	}

table.rounded-table { border:1px solid #e0dfdf; border-radius: 6px; padding: 3px; }
	
		.colored-bg tbody tr:nth-child(even)  td { background-color: #e9e9e9; }
		
		.colored-bg tbody tr:nth-child(odd)  td { background-color: #fff; }

		.colored-bg tr:first-child { background: none !important;}
	
		#wrapperMain td,
		#wrapperMain th { padding: 4px 14px 3px 7px; }

			table td:first-child { /*padding-left: 0 !important;*/ }
		
		th { border-bottom: 2px solid #9a9a9a; background-color: #f2f2f2; font-size: 16px; padding-top: 9px !important; }

		table tr:first-child td:first-child, table tr:first-child th:first-child{ border-top-left-radius: 5px; }
		table tr:first-child td:last-child, table tr:first-child th:last-child{ border-top-right-radius: 5px; }
		table tr:last-child td:first-child{ border-bottom-left-radius: 5px; }
		table tr:last-child td:last-child{ border-bottom-right-radius: 5px; }

		.box { background-color: #fff; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; border: 1px solid #cccccc; padding: 10px; }

/*   VIDEO-RESPONSIVE & GOOGLE MAPS  */
	
	.video-responsive {
		overflow:hidden;
		padding-bottom: 56.25%;
		position:relative;
		height:0;
	}

	.video-responsive-scope {
		overflow:hidden;
		padding-bottom: 42.49%;
		position:relative;
		height:0;
	}
	
		.video-responsive iframe, .video-responsive-scope iframe {
			left:0;
			top:0;
			height:100%;
			width:100%;
			position:absolute;
		}
		
    .google-maps {
        position: relative;
        padding-bottom: 45%; 
        height: 0;
        overflow: hidden;
    }
	
		.google-maps iframe {
			position: absolute;
			top: 0;
			left: 0;
			width: 100% !important;
			height: 100% !important;
		}

	.latestnews { list-style: none; text-align: center; }

		.latestnews li { padding: 0 0 9px; }
	
	.items-row { border-bottom: 1px dashed #42290e; margin-bottom: 10px; padding-bottom: 20px; }

	.items-row::after { clear: both; content: ""; display: table; zoom: 1;}

	.items-row:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.search-searchword { clear: both; padding: 4px 8px !important; border: 1px solid #8c8c8c; border-radius: 6px; font-size: 1rem !important; height: auto !important; }

/***   BOOTSTRAP   ***/

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


/*   TEMPLATE   */

.cantedit .btn.jmodedit { display: none !important; visibility: hidden !important; opacity: 0 !important; }

#top-others { border-bottom: 1px solid #ededed; }

#navbarouter { height: 135px; padding: 0 !important; box-shadow: 0 4px 2px -2px rgba(50,50,50,0.3); z-index: 99; position: relative;background: url(../images/topmenubackbig.png) no-repeat 50% 0 ; background-size: auto; }

#navbar { height: 135px; z-index: 99; position: relative; }

#navbarmuutsivut { position: relative; z-index: 3; background: #fff; height: auto; /*box-shadow: 0 6px 2px -4px rgba(0,0,0,0.1);*/ }

	#topmenu { height: 35px; font-size: 14px; }

.dj-megamenu li:last-child a { padding-right: 0 !important; }

		#top-left {  text-align: left; padding: 0 0 0 15px; }

			#topmenu a { text-decoration: none; color: #fff;}  #topmenu a:hover { text-decoration: underline !important; color: #fff;}

			#top-left ul.top-yhteystiedot { display: inline-block;vertical-align: top;
				list-style-type: none !important;
				margin-block-start: 0 !important;
				margin-block-end: 0 !important;
				margin-inline-start: 0 !important;
				margin-inline-end: 0 !important;
				padding-inline-start: 0 !important;}

				#top-left li { padding: 5px 14px 0 0; display: inline-block; list-style-type: none; position: relative;}

				#top-left li a { padding: 0 0 0 6px; }

					#top-left li span:before {
						font-family: FontAwesome;
						width: 20px;
					}

						.tel-icon span:before { content: "\f095"; color:#fff !important;}

						.mail-icon span:before { content: "\f003 "; color:#fff !important; }

			/* Ikonit */
			#top-left a { display: inline-block; }

			#top-left img { width: 25px; height: 25px; display: block; margin: 5px 0 0 1px; -ms-transform: scale(0.9);-moz-transform: scale(0.9);-webkit-transform: scale(0.9);-o-transform: scale(0.9);transform: scale(0.9); -webkit-transition: all .3s ease;-moz-transition: all .3s ease;-o-transition: all .3s ease;transition: all .3s ease; }

				#top-left img:hover { -ms-transform: scale(1.0);-moz-transform: scale(1.0);-webkit-transform: scale(1.0);-o-transform: scale(1.0);transform: scale(1.0); }

		#top-right { padding: 0 15px 0 0; }

.top-muut-palvelut-teksti {
  color:#fff;
  display: inline-block;
  color: #fff;
  vertical-align: top;
  padding: 6px 5px 0 0; }

			#top-right a { display: inline-block; }

			#top-right img.logo { width: auto !important; height: 25px; display: block; margin: 5px 0 0 1px; -ms-transform: scale(0.9);-moz-transform: scale(0.9);-webkit-transform: scale(0.9);-o-transform: scale(0.9);transform: scale(0.9); -webkit-transition: all .3s ease;-moz-transition: all .3s ease;-o-transition: all .3s ease;transition: all .3s ease; }

			#top-right img { width: 20px; height: 20px; display: block; margin: 5px 0 0 1px; -ms-transform: scale(0.9);-moz-transform: scale(0.9);-webkit-transform: scale(0.9);-o-transform: scale(0.9);transform: scale(0.9); -webkit-transition: all .3s ease;-moz-transition: all .3s ease;-o-transition: all .3s ease;transition: all .3s ease; }

				#top-right img:hover { -ms-transform: scale(1.0);-moz-transform: scale(1.0);-webkit-transform: scale(1.0);-o-transform: scale(1.0);transform: scale(1.0); }

			div.mod-languages li { margin-right: 0 !important; width: auto !important; }

				ul.lang-inline { padding: 6px 0 0 0 !important; } ul.lang-inline li { padding: 0 0 0 4px !important; } .lang-active { font-weight: 600 }

	.logorow { height: 100px; }

		#logo { font-size: 0; text-align: left; }

			#logo img { width: 260px; height: auto; max-width: 100%; position: relative; margin-left: -5px; }

		#menu { }

			/* Mobiilivalikko */
			.dj-megamenu-accordion-webgarden .dj-mobile-open-btn { border: 1px solid #414141 !important; }
			.dj-megamenu-select-webgarden .dj-mobile-open-btn span + span, .dj-megamenu-offcanvas-webgarden .dj-mobile-open-btn span + span, .dj-megamenu-accordion-webgarden .dj-mobile-open-btn span + span { margin-left: 0 !important; }
			.dj-megamenu-accordion-webgarden .dj-mobile-open-btn:focus { outline: none !important; }

/***   NAVBAR .//    ***/
	
	/*#hero,
	#hero .container-fluid,
	.herorow { height: 80vh; }*/

	#hero {
		position:relative;
		text-align: center;
	}

		/*#hero-teksti { align-self: center; }

		#hero-teksti-inner { margin: 0 auto; width: 50%; text-align: center; }

			#hero h3 { font-size: 1.7em; line-height: 1.4em; color: #fff !important; text-shadow: 0 0 5px rgba(0,0,0,0.5); }

			#hero-teksti-inner img { max-width: 400px; height: auto; }*/

/* ETUSIVU */

#tikli-koneistus { background: url(../images/tausta_koneistus_red.jpg) 50% 50%; background-size: cover; }

.koneistus-inner { max-width: 1000px; margin: 0 auto; padding: 60px 0 120px 0; color: #fff !important; }

.koneistus-inner h3 { padding: 60px 0 0 0; }
.koneistus-inner .kuvaRight { margin-top: -42px !important }

ul.sku_tikli { margin: 0 !important; margin-block-start: 0 !important;margin-block-end: 0 !important;margin-inline-start: 0px;margin-inline-end: 0px;padding-inline-start: 0 !important;}
ul.sku_tikli li { padding: 12px 0 12px 85px; background-size: 75px 75px; background-position: 0 15px; background-repeat: no-repeat; list-style: none; text-align: left;-webkit-transition: all .3s ease;
			-moz-transition: all .3s ease;
			-o-transition: all .3s ease;
			transition: all .3s ease; }
		/*ul.sku_tikli li:hover { background-size: 79px 79px; background-position: -2px 13px; }*/
.sku_honpumet { background: url(../images/sku_honpumet.png); }
.sku_ikkunat { background: url(../images/sku_ikkunat.png); }
.sku_julkisivujarj { background: url(../images/sku_julkisivujarj.png); }
.sku_mitax { background: url(../images/sku_mitax.png); }
.sku_sopimusvalmistus { background: url(../images/sku_sopimusvalmistus.png); }
.sku_spjarjestelma { background: url(../images/sku_spjarjestelma.png); }
.sku_tikkaat { background: url(../images/sku_tikkaat.png); }
.sku_tiklipiha { background: url(../images/sku_tiklipiha.png); }
.sku_telineet { background: url(../images/sku_telineet.png); }
.sku_tyopukit { background: url(../images/sku_tyopukit.png); }

.tuotteet_palvelut { padding-top: 20px; padding-bottom: 50px; }
.tuotteet_palvelut h4 {color:#e11e2d;}

.tuotteet_palvelut_line { border-right: 1px solid #cccccc;}

.etusivu_otayhteytta {margin:20px;background-color:#e11e2d;padding: 60px 30px 40px 30px;text-align: center;color:#fff;}

.etusivu_otayhteytta h5 { 	font-family: 'Noto Sans', sans-serif;
	font-weight: 400; font-style: italic; font-size: 17px; font-optical-sizing: auto; font-variation-settings: "wdth" 100; }

.etusivu_otayhteytta ul.otayhteytta { margin: 0 !important; margin-block-start: 0 !important; padding-inline-start:0 !important; font-size: 18px; font-weight: 300 !important; }

				.etusivu_otayhteytta li { padding: 7px 0px 7px 0; display: block; list-style-type: none; position: relative;}

				.etusivu_otayhteytta li a { padding: 0 0 0 6px; color: #fff; text-decoration: none; }

						.etusivu_otayhteytta li a:hover { text-decoration: underline; }

					.etusivu_otayhteytta li span:before {
						font-family: FontAwesome;
						width: 20px;
					}
#tikli-info {
	font-size: 16px;
	line-height: 1.7em;
	padding: 40px 0 20px 0;
}

#tikli-info {
	background: url(../images/tikli-reach-higher-etusivu-v3.jpg) 50% 50%;
	background-size: cover;
    text-shadow: 1px 1px 1px #fff;
}

/*   Tuoteryhmät   */

#tuoteryhmat { text-align: center; }

.showbox-two, .showbox-three { box-sizing: border-box; } 

	.showbox {
		display: block;
		overflow: hidden;
		position: relative;
		float: left;
		height: 0;
		text-align: center;
		margin-right: 14px;
		
	}
			
			.showbox-two > .showbox { padding-bottom: 33.24%; width: calc(50% - 7px); margin-bottom: 14px; }

			.showbox-two > .showbox:nth-child(2n) { margin-right: 0; }
			
			.showbox-three > .showbox { padding-bottom: 22.16%; width: calc(33.33% - 9.33px); margin-bottom: 14px; }

			.showbox-three > .showbox:nth-child(3n) { margin-right: 0; }

		.showbox .child {
			content: "";
			display: flex;
			height: 100%;
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
			-webkit-transition: all .3s ease;
			-moz-transition: all .3s ease;
			-o-transition: all .3s ease;
			transition: all .3s ease;
			background-position: 50% 50%;
			background-size: auto 102%;
			/*-ms-transform: scale(1.0);-moz-transform: scale(1.0);-webkit-transform: scale(1.0);-o-transform: scale(1.0);transform: scale(1.0);*/
		}

				.tikli-tikkaat { background-image: url(../images/tikli-tikkaat.jpg); }

				.tikli-tikkaat-pro { background-image: url(../images/tikli-tikkaat-pro.jpg); }

				.tikli-telineet { background-image: url(../images/tikli-telineet.jpg); }

				.tikli-ikkunat { background-image: url(../images/tikli-alumiini-ikkunat-ja-ovet-2021.jpg); }

				.tikli-savunpoisto { background-image: url(../images/Tikli_savunpoisto_2022_B_webbg.jpg); }

				.tikli-alumiini-ikkunat { background-image: url(../images/tikli-alumiini-ikkunat.jpg); }

				.tikli-julkisivujarj { background-image: url(../images/tikli-julkisivujarj.jpg); }

				.tikli-spikkunat { background-image: url(../images/tikli-spikkunat-001.jpg); }

				.tikli-kevytikkunat { background-image: url(../images/tikli-kevytikkunat-001.jpg); }

				.tikli-pontti-ikkuna { background-image: url(../images/tikli-pontti-ikkuna-001.jpg); }

				.tikli-alumiiniovet { background-image: url(../images/tikli-alumiiniovet-001.jpg); }

				.tikli-silencio { background-image: url(../images/tikli-silencio.jpg); }

				.tikli-tiklipiha { background-image: url(../images/tikli-tiklipiha.jpg); }

				.tikli-mitax { background-image: url(../images/tikli-mitax.jpg); }

				.tikli-sopimusvalmistus { background-image: url(../images/tikli-sopimusvalmistus.jpg); }

				.tikli-madeinfinland { background-image: url(../images/tikli-madeinfinland.jpg); }

				.tikli-sp-ikkunat { background-image: url(../images/tikli-sp-ikkunat.jpg); }

				.tikli-sp-luukut { background-image: url(../images/Tikli_savunpoistoluukku_2022_webbg.jpg); }

				.tikli-huoltoluukut { background-image: url(../images/tikli-sp-huoltoluukut-2022.jpg); }

			.showbox:hover > .child, .showbox:focus > .child {background-size: auto 110%;/*-ms-transform: scale(1.1);-moz-transform: scale(1.1);-webkit-transform: scale(1.1);-o-transform: scale(1.1);transform: scale(1.1);*/}

			.showbox .innercontent {  
				position: absolute;
		  		top: 50%;
				left: 50%;
		  		transform: translate(-50%,-50%);
		  		text-align: center;	
				
				/*backface-visibility: hidden;
				font-smoothing: antialiased !important;*/
			}

				.showbox .innercontent h3 { 
					font-family: "Jost", sans-serif;
					font-weight: 700;
					font-style: normal;
					text-shadow: 0 0 5px rgba(0,0,0,0.6);
				}

				.showbox .innercontent .readMore { 
					background: #fff; 
					color: #414141 !important; 
					padding: 10px 21px !important;
					line-height: 15px;
					font-size: 15px;
				}

					.showbox .innercontent .readMore:hover { background: #e3e3e3; }

				.showbox-two .showbox .innercontent h3 { color: #fff; font-size: 34px; line-height: 40px; }

				.showbox-three .showbox .innercontent h3 {  color: #fff; font-size: 28px; line-height: 32px; }

				.showbox .innercontent a { color: #fff; text-decoration: none; }

				.hidden-child { display: none!important; visibility: hidden; }

#topImage { position: relative; z-index: 2; padding-bottom: 25%; height:0; width: 100%; color: #fff !important; /*box-shadow: 0 0 3px 0 rgba(0,0,0,0.6);*/ background-size: cover; background-repeat: none; background-position: 50% 50% }

	#topImageInner { position: absolute; bottom: 30px; left: 30px; width: 400px !important; text-align: left; font-size: 16px; font-weight: 600; }

		#topImage h2 { color: #fff; font-size: 40px; font-weight: 600; }

		#topImage h3, #topImage h4 { color: #fff !important; }

			.blacktext, h2.blacktext, h3.blacktext, h1.blacktext { color: #414141 !important; }

#sivupolku { width: 100%; padding: 12px 0 8px 0; text-align: left; box-sizing: border-box; }

	#sivupolku .active {  }

	#sivupolku .divider { padding: 0 3px; }

	.divider.icon-location { display: none !important; }

	#sivupolku a { color: #8B8B8B; text-decoration: none; }

		#sivupolku a:hover { color: #8B8B8B; text-decoration: underline; }

	ul.breadcrumb {
		list-style-type: none;
		padding: 0 !important;
		margin: 0 !important;
		font-size: 12px;
		line-height: 1.2em;
		color: #8B8B8B;
		font-weight: 700;
		background: none;
	}

		ul.breadcrumb li {
			display: inline-block;
		}

		ul.breadcrumb li:first-child .divider { padding: 0 !important; }

/****  MAIN  ****/

#wrapperMain { width: 100%; padding: 0 0 25px 0; }

	#left { float: left; width: 13%; margin: 0 2% 0 0; text-align: left; }

		#left ul { margin: 8px 0 !important; border: 1px solid #e7e7e7; background: #fafafa; padding: 10px !important; border-radius: 15px;  }

		#left li { list-style-type: none; padding: 5px 10px 5px 2px; margin: 0; border-bottom: 1px solid #C8C8C8; line-height: 1.5em; }

			#left a {
				font-weight: 400;
				font-size: 15px;
				text-decoration: none;
				cursor: pointer;
				text-align: left;
				margin: 2px 0;
				letter-spacing: 0.04em;
			}

				#left .current > a { font-weight: 600; }

				#left a:hover { text-decoration: underline; }

				#left li:last-child { border-bottom: none !important; }

	main { text-align: left; }

	main .main-both { float: left; text-align: left; width: 60%; }
	main .main-wLeft { float: left; text-align: left; width: 85%; }
	main .main-wRight { float: left; text-align: left; width: 80%; }
	main .main-alone { float: left; text-align: left; width: 100%; }

	#right { float: left; width: 18%; margin: 0 0 0 2%; text-align: left; }

		main ul,
		main ol { padding: 6px 0 6px 25px; list-style-position: outside; }

#content-bottom-wide { width: 100%; margin-top: 20px; padding: 50px 0 50px 0; background: url(../images/tikli_reach_higher_grey.jpg) 50% 50%; background-repeat: no-repeat; background-size: cover; }

	#content-bottom-wide #contact-list { }

	#content-bottom-wide h2 { text-align: center; padding: 0 0 15px 0; }

/****  FOOTER  ****/
		
footer {
	background: #393939;
	color: #fff;
	width: 100%; 
	text-align: center;
	padding-top: 40px;
	padding-bottom: 40px;
}

	footer h4 { font-size: 21px; }

	footer ul { list-style: none; padding: 0; margin: 0; line-height: 2em; }

	footer hr {
		width: 40px;
		height: 3px;
		background: #dc0a21;
		margin: 14px 0 14px 0;
		box-sizing: content-box;
		overflow: visible;
		border: 0;
	}

	footer h3, footer h2, footer h4 { color: #fff !important; }

	footer a { color: #fff !important; text-decoration: none; }

		footer a:hover { text-decoration: underline;  }

#footer-bottom { 	
	padding: 15px 0; 
	width: 100%; 
	text-align: center; 
	background: #282828;
	color: #fff;
	font-size: 15px;
	line-height: 40px;
	position: relative;
}

	#webgarden { position: absolute; right: 30px; top: 0; width: 70px !important; height: 35px; }

#djckm {
    position: fixed !important;
    bottom: 0 !important;
	left: 0;
	right: 0;
    width: 100%;
    background: #efeeee;
    padding: 8px 0;
    box-shadow: 0 0 4px 0 rgba(0,0,0,0.5);
}

/*    MUUT    */

.red { color: #dc0a21!important; }

.italic { font-style: italic; }

.bold { font-weight: 700; }

.tuoteryhma-tarkenne { color: #717171; font-size: 0.9em; line-height: 1.2em; }

.hero-section { max-width: 70%; margin: 0 auto; padding-top: 40px; }
	
.narrow-text { max-width: 70%; margin: 0 auto; }

.hero-section h2.eyebrow {
    -webkit-animation: reveal-bottom 1s ease-out 0s 1 normal both;
    animation: reveal-bottom 1s ease-out 0s 1 normal both;
	
    font-size: 1.75rem;
    line-height: 1.25em;
    letter-spacing: 0em;
}

.hero-section h1.headline {
    margin-top: 8px;
	
    font-size: 5rem;
    line-height: .81838;
    font-weight: 700;
    letter-spacing: -.009em;
	padding: 0 0 0.2em 0 !important;

    -webkit-animation: reveal-bottom 1s ease-out 150ms 1 normal both;
    animation: reveal-bottom 1s ease-out 150ms 1 normal both;
}

.reveal {
	-webkit-animation: reveal 1s ease-out 600ms 1 normal both;
    animation: reveal 1s ease-out 600ms 1 normal both;
}

.reveal-2 {
	-webkit-animation: reveal 1s ease-out 900ms 1 normal both;
    animation: reveal 1s ease-out 900ms 1 normal both;
}

.lead { line-height: 1.5em; }

@keyframes reveal-bottom {
	0%{opacity:0;-webkit-transform:scale(1.01);transform:scale(1.01);-webkit-transform:translateY(30px);transform:translateY(30px)}50%{opacity:1;-webkit-transform:auto;transform:auto}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1);-webkit-transform:translateY(0px);transform:translateY(0px)}}

@keyframes reveal {
	0%{opacity:0;-webkit-transform:scale(.9);transform:scale(.9);}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1);}
}

@keyframes reveal-2 {
	0%{opacity:0;-webkit-transform:scale(.9);transform:scale(.9);}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1);}
}


.latestnews-webgarden { margin-top: 30px; border-top: 1px solid #b5b5b7; padding: 30px 0 15px 0 !important; }

.latestnews-webgarden li { float: left; list-style: none; width: 23.5%; margin-right: 2%; margin-bottom: 2%; }

		.latestnews-webgarden li:nth-child(4n) { margin-right: 0; }		

			.latestnews-webgarden li:nth-child(4n+1) { clear: left; }

	.latestnews-webgarden .introkuva { width: 100%; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; overflow:hidden; padding-bottom: 50%; position:relative; height:0;overflow: hidden; -webkit-transition: all .3s ease;-moz-transition: all .3s ease;-o-transition: all .3s ease;transition: all .3s ease;}

		.latestnews-webgarden .introkuva > div { content: "";
			display: flex;
			height: 100%;
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
			-webkit-transition: all .3s ease;
			-moz-transition: all .3s ease;
			-o-transition: all .3s ease;
			transition: all .3s ease;
			background-position: 50% 50%;
			background-size: cover; }

		.latestnews-webgarden .introkuva:hover > div, .latestnews-webgarden .introkuva:focus > div {-ms-transform: scale(1.1);-moz-transform: scale(1.1);-webkit-transform: scale(1.1);-o-transform: scale(1.1);transform: scale(1.1);}

	.latestnews-webgarden li img { max-width: 100%; height: auto; }

	.latestnews-webgarden li h3 a { color: #2791e7; padding: 10px 0 6px 0; text-decoration: none !important; }

.latest-introtext { padding: 0px 0 16px 0 !important; font-size: 14px !important; line-height: 1.5em; }

.intro-heading { padding: 15px 0 6px 0 !important; }

	
/**  GRIDS                       **********************************************/

.half-container { margin: 20px 0; }

.righthalf {
	width: 50%;
	padding: 0 0 0 10px;
	box-sizing: border-box;
	float: right;
	order: 0;
	text-align: center;
}

.lefthalf {
	width: 50%;
	padding: 0 0 0 10px;
	box-sizing: border-box;
	float: left;
	order: 1;
	text-align: center;
}

.centerhalf {
	width: 50%;
	padding: 0 0 0 10px;
	box-sizing: border-box;
	margin: 0 auto;
	order: 1;
	text-align: center;
}

	.clear { clear: both; }
		
		.product_info_left, .product_info_right {
			margin: 30px 0;
			display: flex;
		}
			
				.product_info_left h3, .product_info_right h3, .product_info_left h4, .product_info_right h4 {
					font-weight: 500;
					color: #414141;
					font-size: 28px;
					padding: 0 0 20px 0;
				}

				.product_info_left p, .product_info_right p {
					font-weight: 300;
					color: #414141;
					font-size: 18px;
					padding: 0;
					line-height: 1.4em;
				}
		
			.product_info_left .product_image_overview {
				width: 50%;
				float: left;
				order: 0;
				text-align: center;
			}
		
			.product_info_right .product_image_overview {
				width: 50%;
				float: right;
				order: 1;
				text-align: center;
			}

				.product_image_overview { max-width: 600px; height: auto; margin: 0 auto; }
		
			.product_info_left .product_text_overview {
				width: 50%;
				float: left;
				text-align: left !important;
				padding: 0 90px;
				box-sizing: border-box;
				position: relative;
				order: 1;
			}
		
			.product_info_right .product_text_overview {
				width: 50%;
				float: left;
				padding: 0 90px;
				text-align: left !important;
				box-sizing: border-box;
				position: relative;
				/*flex-grow: 1;*/
				order: 0;
			}

			.product_image-overview, .product_text_overview {
	
			}


.new-row-element {
	float:left;
	width:100%;
}

.new-row-element-left,
.new-row-element-right {
	float:left;
  width:48.5%;
}

@media screen and (max-width: 860px) {	
.new-row-element-left,
.new-row-element-right {
	
  width:99.5%;
}

  
}

/***   MEDIA-QUERIES .//   ***/

.max1600 { max-width: 1600px; margin:0 auto; position: relative; box-sizing: border-box;}

@media screen and (min-width: 1920px) {	
		
	.container { width: 1600px !important; }
	
	#tikli-info { margin-bottom: 15px; }
			
}

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

.max1600 { max-width: 100%; margin:0 auto; }
	

}

@media screen and (min-width: 1201px) {	
	
	/* SISÄLTÖ KESKITETTY */
	.product_info_left .product_text_overview .product_info_inner,
	.product_info_right .product_text_overview .product_info_inner{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		text-align: left;
	}
		
}

@media screen and (max-width: 1400px) {	
						
	#hero-teksti-inner { width: 90%; }
	
		#hero-teksti-inner img { max-width: 350px;  }

	#left { float: left; width: 18%; margin: 0 2% 0 0; text-align: left; }

	main .main-both { float: left; text-align: left; width: 55%; }
	main .main-wLeft { float: left; text-align: left; width: 80%; }
	main .main-wRight { float: left; text-align: left; width: 75%; }
	main .main-alone { float: left; text-align: left; width: 100%; }

	#right { float: left; width: 23%; margin: 0 0 0 2%; text-align: left; }
	
	.product_image_overview { margin: 0 0 20px 0; }
	
		.product_image_overview img { max-width: 90%; height: auto; margin: 0 auto; }
	
	#tikli-koneistus img { max-width: 150px; height: auto; }
}

@media screen and (max-width: 1200px) {	
	
	.hero-section { max-width: 85%; }
	
		.hero-section h2.eyebrow { font-size: 1.575rem; line-height: 1.25em; letter-spacing: 0em; }

		.hero-section h1.headline { margin-top: 6px; font-size: 4.5rem; line-height: .81838; font-weight: 700; letter-spacing: -.009em; padding: 0 0 0.2em 0 !important; }
	
		.lead { font-size: 1.15rem; }

	.narrow-text { max-width: 85%; }

	#hero-teksti-inner img { max-width: 300px;  }

	#hero-teksti-inner h3 { font-size: 1.5em; line-height: 1.4em; }
	
	.product_info_left .product_text_overview,
	.product_info_right .product_text_overview {
		padding: 0;
	}
	
	.tuotteet_palvelut .max1600 { margin: 0 15px; }
	
	.etusivu_otayhteytta { margin: 0; }
	
	.koneistus-inner { max-width: 90%; }
	
	.tuotteet_palvelut_line_second { border-right: none !important; }
	
	.h2_big { font-size: 36px; }
	
}
	
@media screen and (max-width: 991px) {
  
  #navbarouter { background-position: 0 0; height: auto; } /* Yläbanneri pelkkä harmaa*/
  
  ul.top-yhteystiedot { display: none !important; }
	
	h1,
	h2[itemprop="headline"],
	h2.big,
	.page-header h2,
	.fox-container h2 { font-size: 2.3em; padding: 0.4em 0 0.3em 0; } 
						
	h2 { font-size: 1.8em; padding: 0.4em 0 0.3em 0; }
		
	h3 { font-size: 1.6em; padding: 0.4em 0 0.3em 0;}

		.contact-category .row-striped h3 { font-size: 1.5em; padding: 0.4em 0 0.2em 0; }
		
	h4 { font-size: 1.2em; }
	
		#dj-megamenu88mobileWrap { display: inline-block; float: none; vertical-align: top; }
	
		#dj-megamenu88mobileWrap,
		#dj-megamenu88mobile { height: 41px; }
		
	#left { float: left; width: 23%; margin: 0 2% 0 0; text-align: left; }

	#main.main-both { float: left; text-align: left; width: 50%; }
	#main.main-wLeft { float: left; text-align: left; width: 75%; }
	#main.main-wRight { float: left; text-align: left; width: 75%; }
	#main.main-alone { float: left; text-align: left; width: 100%; }

	#right { float: left; width: 23%; margin: 0 0 0 2%; text-align: left; }
	
	
	.showbox-three > .showbox { padding-bottom: 33.24%; width: calc(50% - 7px); }
	
	.showbox-three > .showbox:nth-child(3n) { margin-right: 14px; }

		.showbox-three > .showbox:nth-child(3n) { clear: both; }

	.showbox-three > .showbox:nth-child(2n) { margin-right: 0; clear: none; }
	
		.hidden-child { display: block !important; visibility: visible; }
	
		.showbox-two .showbox .innercontent h3,
		.showbox-three .showbox .innercontent h3 {  color: #fff; font-size: 28px; line-height: 32px; }
	
.lefthalf, .righthalf, .centerhalf {
	width: 100%;
	padding: 0 0 10px 0;
	box-sizing: border-box;
	float: none;
}	

}

@media screen and (max-width: 767px) {
	
	.hero-section { max-width: 90%; }
	
		.hero-section h2.eyebrow { font-size: 1.3125rem; line-height: 1.25em; letter-spacing: 0em; }

			.hero-section h1.headline { margin-top: 4px; font-size: 3.75rem; line-height: .81838; font-weight: 700; letter-spacing: -.009em; padding: 0 0 0.2em 0 !important; }

	.narrow-text { max-width: 90%; }
	
	/*#hero {background: url(../images/Tikli_ReachHigher_001_web.jpg) 65% 0 no-repeat; }
		
	#hero,
	#hero .container-fluid,
	.herorow { height: 90vh; }
	
		#hero-teksti { align-self: flex-end; margin-bottom: 30px; }*/
		
	.kuvaRight,
	.kuvaLeft { float: none !important; clear: both; padding: 0.6em 0; display: block; margin-left: auto !important; margin-right: auto !important; max-width: 100%; height: auto; }
	
	#topImage { padding-bottom: 40%; }
	
	.google-maps {
        padding-bottom: 75%; 
	}
	
	#left { float: left; width: 33%; margin: 0 2% 0 0; text-align: left; }

	#main.main-both { float: left; text-align: left; width: 40%; }
	#main.main-wLeft { float: left; text-align: left; width: 65%; }
	#main.main-wRight { float: left; text-align: left; width: 75%; }
	#main.main-alone { float: left; text-align: left; width: 100%; }

	#right { float: left; width: 23%; margin: 0 0 0 2%; text-align: left; }
	
	.latestnews-webgarden li { float: left; list-style: none; width: 49%; margin-right: 2%; }

		.latestnews-webgarden li:nth-child(4n),
		.latestnews-webgarden li:nth-child(2n) { margin-right: 0; }

	.product_info_left, .product_info_right {
		margin: 30px 0;
		display: block;
	}
	
		.product_info_left .product_image_overview,
		.product_info_right .product_image_overview {
			width: 100%;
			float: none;
			text-align: center;
			max-width: 100%;
		}

			.product_image_overview img { max-width: 80%; height: auto; margin: 0 auto; }

		.product_info_left .product_text_overview,
		.product_info_right .product_text_overview {
			width: 100%;
			float: none;
			padding: 20px 90px 0 90px;
			text-align: left !important;
			box-sizing: border-box;
			position: relative;
		}
	
		#tikli-koneistus img { max-width: 150px; height: auto; }
	
	.tuotteet_palvelut_line { border-right: none;}
  
  #tikli-info {
	background: url(../images/tikli-reach-higher-etusivu-v3.jpg) 0% 50%;

}
	
}

@media screen and (max-width: 680px) {
	
	h1,
	h2[itemprop="headline"],
	h2.big,
	.page-header h2,
	.fox-container h2 { font-size: 1.9em; padding: 0.4em 0 0.2em 0; } 
	
	#left { float: none; width: 100%; margin: 0 0 20px 0; }

	#main.main-both { float: none; width: 100%; }
	#main.main-wLeft { float: none; width: 100%; }
	#main.main-wRight { float: none; width: 100%; }
	#main.main-alone { float: none;  width: 100%; }

	#right { float: none; width: 100%; margin: 20px 0 0 0; }
  
  .top-muut-palvelut-teksti { display: none; }

}

@media screen and (max-width: 640px) {
	
	/*#top-left .tel-icon,
	.topicons,
	.etsisivustolta { display: none !important; }*/
	
	ul.lang-inline {
    padding: 3px 0 0 0 !important;
}
  
    #top-right img.logo { height: 20px; }
		
}

@media screen and (max-width: 576px) {
	
	#navbar { height: auto; }
	
	#logo { text-align: center; }
	
	/*#top-right { text-align: center !important; }*/
	
	#topImage { padding-bottom: 50%; }
	
	.showbox { width: 100%; margin-right: 0; }
	
		.showbox-two, .showbox-three { padding-bottom: 0 !important; }
	
		.showbox-three > .showbox { margin-top: 0 !important; }
			
		.showbox-two > .showbox,
		.showbox-three > .showbox{ padding-bottom: 80%; width: 100%; margin-bottom: 15px; }
	
		.showbox-two .showbox .innercontent h3,
		.showbox-three .showbox .innercontent h3 { color: #fff; font-size: 30px; line-height: 36px; }
	
	.latestnews-webgarden li { float: left; list-style: none; width: 100%; margin: 0 0 20px 0; }
	
	.narrow-text { max-width: 100%; }
		
}

@media screen and (max-width: 480px) {
	
	body { font-size: 14px; }
	
	.dj-mobile-open-btn-lbl { /*display: none;*/ }
		
	.onlyBigscreen { display: none !important; }
	
	.onlyMobile { display: block; }
		
	/* Yhteystiedot */
	
	.contact-category .row-striped li { list-style-type: none; float: left; width: 100%; margin-right: 0%; padding-bottom: 10px; clear: left !important; }
	
}

@media screen and (max-width: 400px) {
	.etusivu_otayhteytta ul.otayhteytta { font-size: 15px;}
	
}


/***   ----------   ***/

.group:before,.group:after {content: "";display: table;} .group:after {clear: both;}.group {zoom: 1; /* For IE 6/7 (trigger hasLayout) */}

/* KIRJAUTUMISLOMAKE */

.well {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}
form {
    margin: 0 0 18px;
        margin-bottom: 18px;
}
fieldset {
    padding: 0;
    margin: 0;
    border: 0;
}
.form-horizontal .control-group {
    margin-bottom: 18px;
    *zoom: 1;
}
.form-horizontal .control-label {
    float: left;
    width: 160px;
    padding-top: 5px;
    text-align: right;
}
.form-horizontal .controls {
    *display: inline-block;
    *padding-left: 20px;
    margin-left: 180px;
    *margin-left: 0;
}
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    display: inline-block;
    height: 18px;
    padding: 4px 6px;
    margin-bottom: 9px;
    font-size: 13px;
    line-height: 18px;
    color: #555;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    vertical-align: middle;
}
textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    background-color: #fff;
    border: 1px solid #ccc;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    -webkit-transition: border linear .2s, box-shadow linear .2s;
    -moz-transition: border linear .2s, box-shadow linear .2s;
    -o-transition: border linear .2s, box-shadow linear .2s;
    transition: border linear .2s, box-shadow linear .2s;
}
.form-search input, .form-search textarea, .form-search select, .form-search .help-inline, .form-search .uneditable-input, .form-search .input-prepend, .form-search .input-append, .form-inline input, .form-inline textarea, .form-inline select, .form-inline .help-inline, .form-inline .uneditable-input, .form-inline .input-prepend, .form-inline .input-append, .form-horizontal input, .form-horizontal textarea, .form-horizontal select, .form-horizontal .help-inline, .form-horizontal .uneditable-input, .form-horizontal .input-prepend, .form-horizontal .input-append {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    margin-bottom: 0;
    vertical-align: middle;
}
button, input, select, textarea {
    margin: 0;
        margin-bottom: 0px;
    font-size: 100%;
    vertical-align: middle;
}
button, input {
    *overflow: visible;
    line-height: normal;
}
label, input, button, select, textarea {
    font-size: 13px;
    font-weight: normal;
    line-height: 18px;
}
input, button, select, textarea {
    font-family: 'Noto Sans', sans-serif;
	font-weight: 400;
    font-optical-sizing: auto; font-variation-settings: "wdth" 100;
}
.siteBody input, .siteBody textarea, .siteBody .uneditable-input {
    width: 206px;
}
input, textarea, .uneditable-input {
    margin-left: 0;
}
input, button, select, textarea {
    font-family: 'Noto Sans', sans-serif;
	font-weight: 400;
    font-optical-sizing: auto; font-variation-settings: "wdth" 100;
}
label, input, button, select, textarea {
    font-size: 13px;
    font-weight: normal;
    line-height: 18px;
}
ul.nav.nav-tabs.nav-stacked { font-size:13px;}
#users-profile-core dt {font-size:13px;padding-top:6px;}

.cf-textarea {
	height:150px!important;
	}
	
.cf_results-msg {
  display:none;
  
  
}