/************************************************************************************************ 
 * Custom.css 															Author: tlkiku			*
 *																Modified(2024): tlsaku			*
 *																								*
 * Sisältää omia muokkauksia jd_newyork templateen. 											*
 *																								*
 * '(responsive)' luokan kuvauksessa tarkoittaa elementin skaalautuvuutta pienemmille näytöille *
 *																								* 
 * '@media (hover: hover)' tarkoittaa elementin muuttumista kursorin ollessa sen päällä (esim. 	*
 * taustaväri, fontti tai molemmat vaihtavat väriä kursorin ollessa tietyn elementin päällä).	*
 ************************************************************************************************/

/** 
 * Google Maps location 
 */
#map {
    height: 300px;  
    width: 100%;  /* The width is the width of the web page */
}


html, body {
    line-height: 26px;
    height:100%;
}

/** 
 * Get backround gradient for body 
 */
.body-wrapper {
    min-height:100%;
    padding-bottom: 224px;	/* footer height */
    background-color: #cfe7f8;
    background-image: linear-gradient(to right, #cfe7f8, #ffffff); /* Standard syntax (must be last) */
    background-size: 100% 100%;
}

/** 
 * Title banner container 
 */
.titlecontainer {
    position: relative;
    text-align: center;
    color: white;
    margin-top: -90px;
}

.sivubanner {
    margin-top: -90px !important;
}

/** 
 * tlsaku: TODO: sp-headerin menun skaalaukset: ei toimi kunnolla tarvitsee muokkausta tekstien koot eivät vaihdu loogisesti 
 */
@media only screen and (max-width: 990px) {

    #sp-header.full-header-center #offcanvas-toggler.mega, #sp-header.header-with-modal-menu #offcanvas-toggler.mega, #sp-header.full-header-left #offcanvas-toggler.mega, #sp-header.lg-header #offcanvas-toggler.mega, #sp-header.header-with-social #offcanvas-toggler.mega {
	display: none !important;
    }
    
    .titlecontainer img {
	margin-top: 0px;
    }
    .titlecontainer {
	margin-top: 0px;
    }
}

/** 
 * Title bannerin teksti kuvan päällä 
 */
.titlecentered {
      font-size: 48px;
      font-weight: 1000;
      text-transform: none;
      width: 100%;
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      line-height: 110%;
      position: absolute;
      top: 85%;
      left: 50%;
      transform: translate(-50%, -15%);
	  text-shadow:
      -1px -1px 0 #000,
      1px -1px 0 #000,
      -1px 1px 0 #000,
      2px 2px 0 #000;
}

/** 
 * Title bannerin teksti (responsive)
 */
@media (max-width: 1440px) {

    #sp-header.full-header-center #offcanvas-toggler.mega, 
  	#sp-header.header-with-modal-menu #offcanvas-toggler.mega, 
  	#sp-header.full-header-left #offcanvas-toggler.mega, 
  	#sp-header.lg-header #offcanvas-toggler.mega, 
  	#sp-header.header-with-social #offcanvas-toggler.mega {
		display: none !important;
    }
    
    .titlecentered {
        font-size: 36px;
        top: 80%;
        left: 50%;
        transform: translate(-50%, -20%);
    }   
}

/** 
 * Title bannerin teksti (responsive)
 */
@media (max-width: 800px) {

    .titlecentered {
        font-size: 28px;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -60%);
    }   
}

/** 
 * "Lue lisää" -boksien tyylit 
 */
.whitecentered {
  vertical-align: middle;
  font-family: arial, helvetica, sans-serif;
  text-align: center;
  color: white;
}

.boxtd {
  width: 50%;
  vertical-align: top;
  padding: 60px;
  text-shadow: -1px -1px 0 #698ca7, 1px 0px 0 #8dacc3, -1px 1px 0 #8dacc3, 1px 0px 0 #8dacc3;
}

.boxtbcell {
  display: table-cell;
  font-size: 16px;
  width: 50%;
  vertical-align: top;
  padding: 60px;
  text-shadow: -1px -1px 0 #698ca7, 1px 0px 0 #8dacc3, -1px 1px 0 #8dacc3, 1px 0px 0 #8dacc3;
}

.boxheading {
  text-align: center;
  vertical-align: top;
  color: white;
  font-family: arial, helvetica, sans-serif;
  font-size: 20pt;
  margin-bottom: 25px;
}

@media (max-width: 415px) {
    .boxtd {
	padding: 30px;
    }
}

@media (max-width: 415px) {
    .boxtbcell {
	padding: 30px;
    }
    .boxheading {
	font-size: 16pt;
    }
}

/** 
 * Taustavärin gradientit 
 */
.bluegrad1 {
  background-color: #6d90ff; /* For browsers that do not support gradients */
  background-image: linear-gradient(to bottom right, #6d90ff, #6da0ff); /* Standard syntax (must be last) */
}

.bluegrad2 {
  background-color: #6da0ff; /* For browsers that do not support gradients */
  background-image: linear-gradient(to bottom right, #6da0ff, #6db0ff); /* Standard syntax (must be last) */
}

.bluegrad3 {
  background-color: #6db0ff; /* For browsers that do not support gradients */
  background-image: linear-gradient(to bottom right, #6db0ff, #6dc0ff); /* Standard syntax (must be last) */
}

.bluegrad4 {
  background-color: #6dc0ff; /* For browsers that do not support gradients */
  background-image: linear-gradient(to bottom right, #6dc0ff, #6dd0ff); /* Standard syntax (must be last) */
}

.bluegrad5 {
  background-color: #6dd0ff; /* For browsers that do not support gradients */
  background-image: linear-gradient(to bottom right, #6dd0ff, #6de0ff); /* Standard syntax (must be last) */
}

#bluegradbackground {
  background-color: #cfe7f8;
  background-image: linear-gradient(to right, #cfe7f8, #ffffff);
}

.bluegradbackground {
  background-color: #cfe7f8;
  background-image: linear-gradient(to right, #cfe7f8, #ffffff);
}

#bluegradbackgroundtoleft {
  background-color: #ffffff; /* For browsers that do not support gradients */
  background-image: linear-gradient(to left, #cfe7f8, #ffffff); /* Standard syntax (must be last) */
}

/** 
 * Article class to be used for every page 
 */
.articlespacing {
    width: 1150px; 
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 20px;
    padding-top: 30px !important;
}

.blogpoststyle {
    border-color: gray;
    border-style: inset;
    border-width: thin;
    background-color: white;
    opacity: 1.0;
    border-radius: 25px;
    padding: 0px 30px 30px 30px;
    margin-bottom: 30px;
}

.search {
    width: 1150px; 
    max-width: 100%;
    padding-top: 30px !important;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
}

@media (max-width: 1150px) {

    .articlespacing {
  	width: 96% !important;
	margin-left: 2%;
    }

/** 
 * Tyylit search sivulle 
 */
    .search {
	width: 1150px; 
	max-width: 100%;
	padding-top: 30px !important;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 20px;
    }
}

/** 
 * Artikkelien taulukot taulukko 
 */
.test1, .topbar1 {
    font-family: "Arial", Helvetica, sans-serif;
    text-align: left;
    width: 100%
}

.articletb {
    display: table;	
    position: relative;
    padding-top: 20px;
    margin-bottom: 30px;
    text-align: left;
    width: 100%
}

/** 
 * Artikkelien taulukot td 
 */
.test1 td, .topbar1 td {
    font-size: 16px;
    border: 1px;
    color: #04395f;
    text-align: left;
}

.articletbrow {
    display: table-row;
}

.articletbcell {
    display: table-cell;
    width: 48%;
    vertical-align: top;
    font-family: "Arial", Helvetica, sans-serif;
    font-size: 16px;
    border: 1px;
    color: #04395f;
    text-align: left;
}

.articletbmidcell {
    display: table-cell;
    width: 4%;
}

.test1 img {
    border-radius: 2px;
    float: right;
    vertical-align: middle;
}

.articletbcell img {
    border-radius: 2px;
    float: right;
    vertical-align: middle;
}

.kulmakivet {
    width: 33%;
    text-align: center !important;
}

.kulmakivet img {
    max-width: 128px; 
    float: none; 
    display: block; 
    margin-left: auto; 
    margin-right: auto;
}

.centerimage {
    float: none !important; 
    display: block; 
    margin-left: auto; 
    margin-right: auto;
}

.divimagefix {
    position: absolute;
    top: 20px; 
    bottom: 0;
}

/** 
 * Artikkelit (responsive) 
 */
@media (max-width: 800px) {

    .test1, .test1 td, .articletbcell, .boxtbcell, .articletbmidcell {
        width: 100% !important;  
        float: left;
        text-align: left;
    }
    .divimagefix {
        position: relative;
        top: 0; 
        bottom: 0;
    }
    .divimagefix img {
        margin-bottom: 20px;
    }
}

@media (max-width: 800px) {

    .test1 img, .articletbcell img {
        width: 100% !important;
        float: none;
        display: block;
        margin-left: auto;
        margin-right: auto;
        max-width: 450px;
    }
    .kulmakivet img {
        max-width: 100px; 
    }
}

@media (max-width: 800px) {
    .topbar1 {
        width: 100% !important;  
        float: none;
        text-align: left;
    }
}

/** 
 * Yhteyssivun yhteystietodot taulukko 
 */
.test2 {
    font-family: "Arial", Helvetica, sans-serif;
    text-align: left;
    padding: 30px;
    width: 100%
}

/** 
 * Yhteyssivun yhteystietodot taulukko td
 */
.test2 td {
    border: 1px;
    color: #04395f;
    text-align: left;
}

.test2 img {
    float: right;
}

@media (max-width: 800px) {

    .test2 img {
        width: 100% !important;
        float: none;
        display: block;
        margin-left: auto;
        margin-right: auto;
        max-width: 450px;
    }
}

/**
 * Yhteyssivun yhteystiedot (responsive) 
 */
@media (max-width: 800px) {

    .test2, .test2 td {
        width: 100% !important;  
        float: left;
        text-align: center;
    }
}

#header2 {
    font-family: "Arial", Helvetica, sans-serif;
    text-align: right;
    width: 100%
}

@media (max-width: 800px) {

    #header2 {
        width: 100% !important;  
        float: left;
        text-align: center;
    }
}

/** 
 * Sivuston scrollup hover 
 */
.scrollup:hover {
  background-color: #2f3475;
  color: white;
}

/** 
 * Yläbanneri puh. ja s-posti 
 */
#contact {
    color: white;
  	font-size: 18px;
   font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  	
}

/** 
 * Yhteyssivun yhteystietodot 
 */
.osoite {
    line-height: normal;
    color: white;
  text-align: center;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

/** 
 * Footerin tyylit 
 */
footer#sp-footer {
  	position:absolute;
   	bottom:0;  
  	width: 100%;
  	text-align: center;
  	background-color: #122048; /* For browsers that do not support gradients */
  	background-image: linear-gradient(to bottom, #222328, #1c2f69 72%, #1c2f69 72%, #1c2f69 ); /* Standard syntax (must be last) */
}

/** 
 * Palvelut navbar 
 */ 
.nav1 {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/**
 * Palvelut navbar teksti 
 */
.navMenu {
  color: black;
  padding: 14px 16px;
  text-align: center;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

/** 
 * Sivustokartta navigointi teksti 
 */
.navMenu2{
  display: inline-block;
  color: black;
  padding: 14px 16px;
  text-align: center;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  width: 85%;
}

/** 
 * Palvelut navbar hover 
 */
.navMenu:hover {
   background-color: #2e3095;
   color: white;
}

/** 
 * Sivustokartta navbar hover 
 */
.navMenu2:hover {
   background-color: #2e3095;
   color: white;
}

/** 
 * Palvelut navbar responsive 
 */
@media (max-width: 700px) {

    .nav1, .navMenu, .navMenu:hover  {
        width: 100% !important;  
        float: left;
    }
}
 
#text1 {
    color: #04395f;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

.yhteystext1 {
    color: #04395f;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

/** 
 * Yhteydenottolomake teksti 
 */   
#sp-contactform {
    color: #04395f;
    text-align: left;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

/** 
 * Artikkeleiden otsikoiden tyyli 
 */
.header1
{
    color: #04395f;
    font-size: 20pt;
    font-family: "Arial", helvetica, sans-serif;
    font-weight: bold;
}

.header2
{
    color: #04395f;
    font-size: 14pt;
    font-family: "Arial", helvetica, sans-serif;
    font-weight: 400;
}

#contactheader
{
    color: #04395f;
    font-size: 20pt;
    font-family: "Arial", helvetica, sans-serif;
    font-weight: bold;
}

/** 
 * Artikkeleiden otsikot (responsive) 
 */
@media (max-width: 800px) {

    .header1  {
        width: 100% !important;  
        float: left;
        font-size: 18pt;
         
    }
}

/** 
 * Artikkeleiden otsikot (responsive) 
 */
@media (max-width: 800px) {

    #contactheader  {
        width: 100% !important;  
        float: left;
        text-align: center;
        font-size: 18pt;
    }
}

/** 
 * Mainmenu text 
 */
#sp-menu ul.sp-megamenu-parent > li a {
    font-size: 19px;
    padding: 0 18px;
    font-weight: 600;
    line-height: 90px;
    text-transform: none;
    vertical-align: middle;
    text-shadow:
	-1px -1px 0 #173b58,
	1px -1px 0 #173b58,
	-1px 0px 0 #173b58,
	0px 0px 0 #173b58;
}

/** 
 * Mainmenu logo 
 */
#sp-menu ul.sp-megamenu-parent > li a img {
    width: 32px;
}

.imageonly_link:hover {
    background: transparent !important;
}

.imageonly_link {
    background: transparent !important;
}

/** 
 * Drop-down menupalkki 
 */
.sp-megamenu-parent .sp-dropdown.sp-dropdown-main {
    background: transparent; 
}

/** 
 * Drop-down hover 
 */
#sp-menu .sp-dropdown .sp-dropdown-inner ul.sp-dropdown-items li a:hover {
    color: #fff;
    background-image: linear-gradient(to bottom, rgba(19,50,77,0) 5%,rgba(18, 18, 60, 0.6) 40% ,rgba(21, 21, 53, 0.7) 70% , rgba(19,50,77,0) 95%);
}

/**  
 * Drop-down active 
 */
#sp-menu .sp-dropdown .sp-dropdown-inner ul.sp-dropdown-items li.active a {
    color: #fff;
    background-image: linear-gradient(to bottom, rgba(19,50,77,0) 5%,rgba(18, 18, 60, 0.6) 40% ,rgba(21, 21, 53, 0.7) 70% , rgba(19,50,77,0) 95%);
}

/** 
 * Drop-down menu boksi 
 */
.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {

    background: rgba(77, 146, 202, 0.9);
    box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.65);
}

/** 
 * Drop-down menu text 
 */
#sp-menu .sp-dropdown .sp-dropdown-inner ul.sp-dropdown-items li a {  
    color: white;
    font-size: 14px;
    line-height: normal;
    padding: 5px 10px;
    text-shadow:
	-1px -1px 0 #173b58,
	1px -1px 0 #173b58,
	-1px 0px 0 #173b58,
	0px 0px 0 #173b58 !important;
}

/** 
 * Main menu text color 
 */
.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span {
    color: #fff;
}

/** 
 * Main menu active 
 */
.sp-megamenu-parent > li.active > a, .sp-megamenu-parent > li:hover > a {
    color: #fff;
    background-image: linear-gradient(to bottom, rgba(19,50,77,0) 5%,rgba(18, 18, 60, 0.6) 40% ,rgba(21, 21, 53, 0.7) 70% , rgba(19,50,77,0) 95%);
}

/** 
 * Main menu hover 
 */
#sp-menu ul.sp-megamenu-parent li a:hover {
    color: #fff;
    background-image: linear-gradient(to bottom, rgba(19,50,77,0) 5%,rgba(18, 18, 60, 0.6) 40% ,rgba(21, 21, 53, 0.7) 70% , rgba(19,50,77,0) 95%);
}

/** 
 * Yläpalkki 
 */
#sp-top-bar .sp-module {
    margin: 0;
}

section#sp-top-bar div[class*="col-md-"] {

    padding: 0px;
    margin: 0px;
    position: relative;
    top: 3px;
}

section#sp-top-bar {
    background-color: #122048; /* For browsers that do not support gradients */
    background-image: linear-gradient(to bottom, #222328, #1c2f69 90%); /* Standard syntax (must be last) */
    background-size: 100% 100%;
    padding: 5px;
    position: relative;
    z-index: 999;
}

#sp-header {
    box-shadow: 0 3px 5px rgba(39, 56, 117, 0.3);
}

.whitelink a {
    color: #fff;
}

/** 
 * Kuvagalleria 
 */
div.kuvat {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 300px;
  	
}

div.kuvat:hover {
    border: 1px solid #777;
}

div.kuvat img {
    width: 100%;
    height: 300px;
}

div.kuvaus {
    padding: 10px;
    text-align: center;
}

/** 
 * Kuvan näkyvyyden blockkaus 
 */
@media (max-width: 800px) {

    #block  {
        width: 100% !important;  
        display: none;
    }
}

hr {
    width: 40%;
    border-color: black;
}

/** 
 * Perus button määrittelyt, käytössä esim. search sivulla 
 */
.btn {
    background-color: #2e3095;
    line-height: 18px;
    padding: 6px 6px;
    margin: 2px 2px;
    border: 1px;
    border-radius: 2px;
}

select {
    padding: 4px 6px;
}

/** 
 * Lue lisää -nappi, mm. palvelu-"bokseissa" 
 */
.btn-readmore {
    background: transparent;
    font-size: 12px;
    line-height: 12px;
    text-transform: none;
    text-shadow: -1px -1px 0 #8dacc3, 1px 0px 0 #8dacc3, -1px 1px 0 #8dacc3, 1px 0px 0 #8dacc3; 
}

.btn-readmore:hover {
    text-shadow: none !important;
}

/** 
 * Tyhjät gäpit pois komponenttien väliltä 
*/
#sp-main-body .page-header {
    margin: 0 0 20px;
}
#sp-main-body {
    padding: 0;
}

.entry-header {
    position: relative;
    margin-bottom: 0;
}

article.item {
    margin-bottom: 0;
}

.sp-module {
    margin-top: 0px;
}

.iframe-container {
    overflow: hidden;
    padding-top: 56.25%;
    position: relative;
}
 
.iframe-container iframe {
    border: 0;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}