/*
Theme name: GrawikoTheme
Author: Petri Alankoja / Codeart Oy
Author URI: http://www.codeart.fi
Version: 1.0
*/

html, body 
{
	font-family: 'Open Sans', sans-serif;
	color: #434a4f;
	font-size: 100%;
	font-weight: 300;
	background-color: #fff;
	min-height: 100%;
	margin: 0 auto;
	line-height: 25pt;
 	background: rgb(255,255,255);
	/* background: linear-gradient(90deg, rgba(245,245,245,1) 0%, rgba(255,255,255,1) 20%, rgba(255,255,255,1) 80%, rgba(245,245,245,1) 100%); 	 */
	max-width: 2300px;
	border-left: solid #ddd 1px;
	border-right: solid #ddd 1px;

}


/* Header */

div.header {text-align: center; padding: 0; background-color: #ffffff;}
.header {min-height: 130px; border-bottom: solid #ccc 1px; padding: 0 5% 0 5%; box-shadow: 0px 0px 10px rgba(0,0,0,0.1); margin-bottom: 1px;}
.logoContainer {height: 20px; clear: both; text-align: left; padding-left: 0; padding-top: 20px;}
img.logo {width: 225px; margin-left: 40px;}

#headerLogoContainer {width: 500px; text-align: center; margin: auto; margin-top: 80px; margin-bottom: 0px;}
#headerLogo {margin: 0 auto;}
#headerHeading {text-align: center; font-size: 250%;}
#headerText {text-align: left; width: 800px; margin: 0 auto; font-size: 160%;}

/* Segments */

.segment1 {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	min-height: 600px;
	margin-top: 0;
	padding-top: 0;
	background-color: rgba(235, 235, 235, 1.0);
	color: #fff;
}

.segment2 {
	min-height: 800px;
	padding: 0 5% 0 5%;	
	margin-top: 0;
	padding-top: 0;
}

.segment3 
{
	padding: 0 5% 0 5%;	
	margin-top: 0;
	padding-top: 0;
 	background: #00678d;
/*	background: linear-gradient(301deg, rgba(0,64,88,1) 0%, rgba(1,113,155,1) 100%); */
	background-image: url('images/installation1.png');
	background-position: bottom right;
	background-repeat: no-repeat;
}

.segment4
{
	padding: 0 5% 0 5%;	
	margin-top: 0;
	padding-top: 0;
 	background: #00678d;
	/* background: linear-gradient(301deg, rgba(0,64,88,1) 0%, rgba(1,113,155,1) 100%); */
	background-image: url('images/services1.png');
	background-position: bottom left;
	background-repeat: no-repeat;
}

.segment5
{
	padding: 0 5% 0 5%;	
	margin-top: 0;
	padding-top: 0;
 	background: #00678d;
 	background: linear-gradient(25deg, rgba(38,38,38,1) 0%, rgba(121,121,121,1) 100%); */
	/* background: linear-gradient(301deg, rgba(0,64,88,1) 0%, rgba(1,113,155,1) 100%); */
}


.lowSegment {min-height: 400px;}
.lowSegment h1 {margin-top: 150px;}

.greenInt {background-image: url('images/greenInt.jpg'); background-size: cover; background-repeat: no-repeat; background-size: 50%;}

.BlueSegment h1 {margin: 0 auto; padding-top: 0px;}

/*
.segment3 h2 {max-width: 1200px; margin: 0 auto;} 

.segment4 h1, .segment4 h2, .segment4 p {color: #fff;}
.segment4 h1 {margin: 0 auto; padding-top: 0px;}
.segment4 h2 {max-width: 1200px; margin: 0 auto;} 
*/

.BlueSegment h1, .BlueSegment h2, .BlueSegment p {color: #fff;}

.segmentBottom { min-height: 700px; background-image: url('images/subSegmentBottomBgr.png'); background-position: bottom center; background-repeat: no-repeat;}
.segmentTop { background-image: url('images/subSegmentTopBgr.png'); background-position: top center; background-repeat: no-repeat;}

.reverseSegmentBottom { min-height: 700px; background-image: url('images/reverseSubSegmentBottomBgr.png'); background-position: bottom center; background-repeat: no-repeat;}
.reverseSegmentTop { background-image: url('images/reverseSubSegmentTopBgr.png'); background-position: top center; background-repeat: no-repeat;}




.infoRow {max-width: 1500px; padding-left: 10%; padding-right: 10%;}
.infoRow p {padding: 0; margin-bottom: 40px;}

.pageHeading 
{
	min-height: 125px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.pageHeadingBottom {background-image: url('images/pageHeadingBgrWhite.png'); background-position: bottom; background-repeat: no-repeat; background-size: cover; min-height: 125px; position: relative; top: 3px;}
.pageHeading h1 {font-size: 375%; color: #333; margin-top: 60px; text-shadow: 0px 0px 12px rgba(255, 255, 255, 1);}
.pageImage {width: 400px; height: 400px; border-radius: 50%; background-size: cover; box-shadow: inset 0px 0px 25px rgba(0, 0, 0, 0.6); transform: rotateY(180deg); border: solid #ebebeb 12px;}

@media ( min-width: 1600px )
{

	.pageHeading 
	{
		min-height: 200px;
	}
	.pageHeadingBottom {min-height: 200px;}
}

/* End of segments */

/* Tables */

.CATable {
  border-top: solid #ccc 1px;
  border-bottom: solid #ccc 1px;
  margin-top: 20px;
  margin-bottom: 30px;
}
.CATable td {padding: 10px; border-bottom: dotted #aaa 1px;}
.CATable td {text-align: left;}

/* End of tables */

/* Menus */

.menuContainer {z-index: 999; padding-top: 15px;}

.langMenu, .mainMenu {margin: 0 auto;}
ul.menu {width: 900px; margin: 0 auto; margin-top: 30px;}


.langMenu li, .mainMenu li  
{
	float: left;
	list-style-type: none;
}

.langMenu li a, .mainMenu li a
{
	text-decoration: none;
	color: #000000;
	font-weight: 300;
	/* border-right: dotted 1px #000000; */
	padding: 4px 10px 4px 10px;
}

/*
.langMenu li:last-child a, .mainMenu li:last-child a
{
	border-right: 0;
}
*/

.langMenu li a:hover, .mainMenu li a:hover
{
	border-bottom: solid 6px #9ac100;
	transition: 0.2s;
}

.mainMenu li a {font-size: 105%;}
#sticker .menu-mainmenu-container {padding-top: 10px !important;}
.iconHome {position: relative; top: 3px; width: 25px; height: 21px;}

.wrapfixed {border-bottom: solid 1px #ccc !important; box-shadow: 0px 0px 10px rgba(0,0,0,0.1); padding-bottom: 10px;}




/* End of menus */

/* Containers  */

.contentContainer { margin: 0 auto; padding: 0 5% 0 5%; max-width: 1200px; text-align: justify; }
.grFormContainer { max-width: 800px; margin: 0 auto; }
.grFormContainer h2.forminator-title { font-size: 175% !important; }

/* End of containers */

/* Headings & text  */

h1 {font-family: 'Open Sans', sans-serif; font-size: 250%; max-width: 1050px; line-height: 1.3; margin: 0 auto; margin-top: 40px; margin-bottom: 20px; text-align: center; letter-spacing: 1.5pt;}
h2 {font-family: 'Open Sans', sans-serif; font-size: 180%; font-weight: 300; letter-spacing: 1.2pt;}
h3 {font-family: 'Open Sans', sans-serif; font-size: 140%;}
h4 {font-family: 'Open Sans', sans-serif; font-size: 120%;}

p {max-width: 1200px; margin: 0 auto; margin-top: 20px; margin-bottom: 20px; line-height: 1.6; font-size: 110%; padding: 5px 25px 5px 0px;}
.rAlign {text-align: right;}

strong, b {font-weight: 700;}
.centered {text-align: center !important;}
.large {font-size: 140%;}
.xlarge {font-size: 170%;}
.reverseBlue {background-color: #005a8e; color: #ffffff; padding: 10px; padding-left: 15px;}
.reverseWhite {background-color: #ffffff; color: #005a8e !important; padding: 10px; padding-left: 15px;}

.whiteLink {color: #ffffff; font-weight: bold;}

.SoMeLink { text-decoration: none; color: #ffffff; }

/* Images */

.roundedImg {border-radius: 50%; margin: 0 auto; padding: 20px; max-width: 70%;}
.entSymbol {width: 150px; height: auto;}

.contactCell {border-left: solid #fff 3px; padding-left: 20px; min-height: 140px;}
.contactCell p {padding: 5px;}

.contactCell2 {border-left: dotted #aaa 3px; padding-left: 20px; min-height: 140px;}
.contactCell2 p {padding: 5px;}

.infoImg {width: 600px !important; height: auto;}

/* Buttons */

.btn-outline {
	color: #000000;  
  border-color: #222;
  background-color: rgba(75,75,75,0.7);
  border: 1px #bbb solid;
  text-shadow: none !important;
}
.btn-outline:hover,
.btn-outline:focus,
.btn-outline:active,
.btn-outline.active {
  color: white;
  background-color: #009cff;
  border-color: #009cff;
}

.btn {
  border-radius: 5px;
  box-shadow: 1px 5px 15px rgba(0,0,0,0.1);
}
.btn-xl {
  padding: 15px 45px;
  font-size: 16px;
  letter-spacing: 2px;
}

.btn-CA {letter-spacing: 0.8pt; text-transform: none; width: 100px; box-shadow: 1px 2px 5px rgba(0,0,0,0.1);}

.grButton {
    background-color: #007bff; /* Kirkas sininen */
    color: white; /* Valkoinen teksti */
    font-size: 16px;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-decoration: none;
}

.grButton:hover {
    background-color: #0056b3; /* Tumma sininen hover-efekti */
}

/* These is for the "Lue lisää" -button for plugin on the front page  */

.btn2 {background-color: #666; color: #fff; padding: 8px 16px 8px 16px; border-radius: 6px; text-decoration:none; font-size: 90%; font-weight: 400;}
.btn2-primary {background-color: #007bff;}
.btn2-primary:hover {background-color: #0069d9;}

.lgray {background-color: #eee; border-radius: 8px; padding: 5px; margin-top: 10px; padding-left: 20px;}
.lgray a {text-decoration: none;}

/* Footer & Credits */

.credits {width: 100%; margin-top: 0px; height: 30px; clear: both; padding-top: 10px;}
.credits p {text-align: center; margin: 0; padding: 0px; text-shadow: 2px 2px 5px rgba(0,0,0,0.1); max-width: 100%; font-size: 80%;}
.credits a {color: #fff; text-decoration: none; font-weight: 700; font-style: italic;}
.credits strong {font-weight: 700; color: #fff; letter-spacing: 0.8pt;}

div.footer {

	color: #ffffff;
	margin: 0;
	padding: 0;
	padding-top:  25px;
	min-height: 600px;

 	background: rgb(20,30,48);
	/* background: linear-gradient(90deg, rgba(20,30,48,1) 0%, rgba(36,59,85,1) 20%, rgba(36,59,85,1) 80%, rgba(20,30,48,1) 100%); 	 */
	text-align: center !important;

}


div.footerCellContainer
{
	width: 890px;
	margin: 0 auto;
}

div.footerCell
{
	width: 200px;
	height: 150px;
	float: left;
	margin: 10px;
}	


.footerCell p, .footerCell h2, .footerCell a {color: #fff; padding: 0; margin: 0; text-align: left;}
.footerCell a {text-decoration: none;}
.footerCell a:hover {text-decoration: underline;}
.footerCell h2 {margin-top: 15px; margin-bottom: 20px;}

#bLogo {float: right; margin-top: 125px; margin-right: 100px; margin-bottom: 100px;}

.centered {text-align: center;}
@media (max-width: 1050px)
{

	#bLogo {margin-right: 50px;}

	.footer {height: 1000px;}

	div.footerCellContainer
	{
		width: 220px;
	}

	div.footerCell
	{
		float: none;
	}

	.footerCell p, .footerCell h2 {text-align: center;}			
}



/* Publication listings etc. */

h3.pubTitle {font-size: 120%; margin: 0px 5px 10px 5px; font-weight: 600; line-height: 1.3em;}
.pubListing {width: 95%; margin: 0 auto;}
.pubContainer {width: 300px; height: 750px; float: left; margin: 0; margin-right: 10px; margin-bottom: 10px; border: solid #888 1px; border-radius: 8px; background-color: #fff;}

.pubTitle {height: 50px; text-align: center;}
.pubDesc {height: 180px; text-align: left; margin-top: 0; margin-left: 10px; margin-right: 10px; font-size: 100%; font-weight: 400; line-height: 1.3em;}
.pubContainer img, .pubContainerL img {width: 100%; height: auto; margin: 0 auto; filter: saturate(80%); border-top-left-radius: 8px; border-top-right-radius: 8px; }

.pubImgContainer {width: 450px; margin-top: 50px; height: 600px; float: left; filter: saturate(80%);}
.pubTextContainer {width: 550px; height: 600px; float: left; padding: 25px;}
.pubTextContainer p {margin: 0 0 10px 0; text-align: justify;}

.nav2 {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	padding-left: 0;
	margin-bottom: 0;
	list-style: none;
}

.nav2 li {margin: 0px;}
.nav2 a {text-decoration: none; color: #007bff; font-weight: 400; padding: 8px 16px 8px 16px; border-radius: 5px;}
.nav2 a.active {background-color: #666; color: #fff;}
.nav2 a.active:hover {color: #fff;}
.nav2 a:hover {color: #006cd0;}

.miniCartIframe 
{
	width: 100%;
	border: 0;
	height: 50px;
	position: fixed;
	top: -5px;
	opacity: 0.75;
	z-index: 99999;
	text-align: center;
	padding: 0;
	margin: 0;
}

.miniCartIframe:hover
{
	opacity: 1;
}