/*
Theme Name: Terveysverkko16 Clean Test
Description: Main CSS stylesheet file for Terveysverkko.fi custom wordpress theme.
Based on Skeleton resposive CSS boilerplate (http://getskeleton.com/) and HTML5 Boilerplate 
(https://html5boilerplate.com/). Skeleton core functionality is included and built upon in this file.
Author: Joonas Lahtiharju
Author URI:
Version: 0.5-test
*/

/**
 * Table of Contents
 *
 * 1.0 - Reset
 * 2.0 - Grid
 * 3.0 - Base Styles
 * 4.0 - Typography
 * 5.0 - Elements
 *   5.1 - Paragraphs
 *   5.2 - Lists
 *   5.3 - Images
 *   5.4 - Code
 *   5.5 - Tables
 *   5.6 - Embedded videos
 *   5.7 - Misc
 * 6.0 - Buttons
 * 7.0 - Forms
 * 8.0 - Navigations
 *   8.1 - Links
 *   8.2 - Menus
 *     8.2.1 - Mobile navigation menu
 *     8.2.2 - High res navigation menu
 *   8.3 - Search
 * 9.0 - Header
 * 10.0 - Widgets
 *   10.1 - Koulutuskalenteri page (not sidebar) widget
 *   10.2 - SIDEBAR koulutuskalenteri widget
 *   10.3 - Contact form 7 widget
 *   10.4 - Slider Frontpage widget
 *   10.5 - Tablepress
 *      10.5.1 - Ohjaajat table
 *   10.6 - Table of Contents (TOC) widget
 *   10.7 - Popup maker widget
 * 11.0 - Content
 *   11.1 - Front page
 *   11.2 - Pääkoulutukset page
 *   11.4 - Browser upgrade prompt
 *   11.5 - Tietopankki pages
 *   11.6 - Koulutuskalenteri event post
 *   11.7 - Yritys page
 *   11.8 - Liikeohjeet page
 *   11.9 - Tooltip for forms
 * 12.0 - Footer
 * 13.0 - Spacing
 * 14.0 - Utilities
 * 15.0 - Clearing
 * 16.0 - Media Queries
 */
 
 
/* ==========================================================================
   1.0 - Reset
   ========================================================================== */

/*
 * Normilize.css is loaded. 
 */
 
 /*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */
::-moz-selection {
    background-color: #b3d4fc;
    text-shadow: none;
}

::selection {
    background-color: #b3d4fc;
    text-shadow: none;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */
fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}


body {
	margin: 0;
}

/* ==========================================================================
   2.0 - Grid
   ========================================================================== */

.main-container {
	background-color: #FFF;
	position: relative;
	width: 100%;
	max-width: 960px;
    min-width: 300px;
	margin: 0 auto;
	box-sizing: border-box;

}
.column, .columns {
	list-style: none;
	width: 100%;
	float: left;
	box-sizing: border-box;
	padding: 0;
}

.main-column {
    padding: 0 0.4em;
}

/* MQ: Larger than ~688px */
@media (min-width: 43em) {
	.main-container {
		width: 90%;
		margin: 1.2em auto;
		
		box-shadow: 0px 1px 8px 0px rgba(87,87,87,1);
	
		border-radius: 5px 5px 5px 5px;

	}
    .upper-main-container {
        padding: 1em;
    }
	.column, .columns {
		margin-left: 4%;
		margin-top: 0.8%;
	}
	.column:first-child,
	.columns:first-child {
		margin-left: 0; 
	}
    
    .main-column {
        padding: 0;
    }

	.one.column,
	.one.columns                    { width: 4.66666666667%; }
	.two.columns                    { width: 13.3333333333%; }
	.three.columns                  { width: 22%;            }
	.four.columns                   { width: 30.6666666667%; }
	.five.columns                   { width: 39.3333333333%; }
	.six.columns                    { width: 48%;            }
	.seven.columns                  { width: 56.6666666667%; }
	.eight.columns                  { width: 65.3333333333%; }
	.nine.columns                   { width: 74.0%;          }
	.ten.columns                    { width: 82.6666666667%; }
	.eleven.columns                 { width: 91.3333333333%; }
	.twelve.columns                 { width: 100%; margin-left: 0; }

	.one-third.column               { width: 30.6666666667%; }
	.two-thirds.column              { width: 65.3333333333%; }

	.one-half.column                { width: 48%; }

  /* Offsets */
	.offset-by-one.column,
	.offset-by-one.columns          { margin-left: 8.66666666667%; }
	.offset-by-two.column,
	.offset-by-two.columns          { margin-left: 17.3333333333%; }
	.offset-by-three.column,
	.offset-by-three.columns        { margin-left: 26%;            }
	.offset-by-four.column,
	.offset-by-four.columns         { margin-left: 34.6666666667%; }
	.offset-by-five.column,
	.offset-by-five.columns         { margin-left: 43.3333333333%; }
	.offset-by-six.column,
	.offset-by-six.columns          { margin-left: 52%;            }
	.offset-by-seven.column,
	.offset-by-seven.columns        { margin-left: 60.6666666667%; }
	.offset-by-eight.column,
	.offset-by-eight.columns        { margin-left: 69.3333333333%; }
	.offset-by-nine.column,
	.offset-by-nine.columns         { margin-left: 78.0%;          }
	.offset-by-ten.column,
	.offset-by-ten.columns          { margin-left: 86.6666666667%; }
	.offset-by-eleven.column,
	.offset-by-eleven.columns       { margin-left: 95.3333333333%; }

	.offset-by-one-third.column,
	.offset-by-one-third.columns    { margin-left: 34.6666666667%; }
	.offset-by-two-thirds.column,
	.offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }

	.offset-by-one-half.column,
	.offset-by-one-half.columns     { margin-left: 52%; }
}
 
 
 /* ==========================================================================
   3.0 - Base Styles
   ========================================================================== */
/*
 * 1 rem = 16 px. 1 em depends on parent font size.
 */
 
 /* Base styles */
body {
	background: url(img/background2.jpg) no-repeat center top fixed;
	font-size: 1em;
	line-height: 1.25em;
	font-weight: 400;
	font-family: 'Lato', sans-serif;
	color: #222;
}
/* MQ: Larger than ~768px */
@media (min-width: 48em) {
	body { line-height: 1.375em; }
}
 
 /* ==========================================================================
   4.0 - Typography
   ========================================================================== */
/* ASIAKASTARINAT */

h1, h2, h3, h4, h5, h6 {
	margin-top: 0.4em;
	margin-bottom: 0.2em;
	font-weight: 400; }
h1 { margin-top: 0; }

h1 { font-size: 1.625em; line-height: 1.15384615; letter-spacing: 0; }
h2 { font-size: 1.375em; line-height: 1.13636364;  letter-spacing: 0; }
h3 { font-size: 1.125em; line-height: 1.11111111; letter-spacing: 0; }
h4 { font-size: 1em; line-height: 1.1;  letter-spacing: 0; }
h5 { font-size: 1em; line-height: 1.1;  letter-spacing: 0; }


/* MQ: Larger than ~768px */
@media (min-width: 48em) {
	h1 { font-size: 2em; line-height: 1.25; }
	h2 { font-size: 1.5em; line-height: 1.25; }
	h3 { font-size: 1.125em; line-height: 1.22222222;}
	h4 { font-size: 1em; line-height: 1.1;}
	h5 { font-size: 1em; line-height: 1.1;}
}

/* MQ: Larger than ~1280px */
@media (min-width: 80em) {
	h1 { font-size: 2.25em; line-height: 1.25; }
	h2 { font-size: 1.75em; line-height: 1.25; }
	h3 { font-size: 1.25em; line-height: 1.22222222;}
	h4 { font-size: 1em; line-height: 1.1;}
	h5 { font-size: 1em; line-height: 1.1;}
}


/* Old font sizes based on recommendations
 *****
h1, h2, h3, h4, h5, h6 {
	margin-top: 0;
	margin-bottom: 1em;
	font-weight: 400; }
h1 { font-size: 2em; line-height: 1.25;  letter-spacing: 0;}
h2 { font-size: 1.625em; line-height: 1.15384615; letter-spacing: 0; }
h3 { font-size: 1.375em; line-height: 1.13636364;  letter-spacing: 0; }
h4 { font-size: 1.125em; line-height: 1.11111111; letter-spacing: 0; }
h5 { font-size: 1em; line-height: 1.1;  letter-spacing: 0; }
h6 { font-size: 1em; line-height: 1.1;  letter-spacing: 0; }

@media (min-width: 48em) {
	h1 { font-size: 2.5em; line-height: 1.125; }
	h2 { font-size: 2em; line-height: 1.25; }
	h3 { font-size: 1.5em; line-height: 1.25; }
	h4 { font-size: 1.125em; line-height: 1.22222222;}
	h5 { font-size: 1em; line-height: 1.1;}
	h6 { font-size: 1em; line-height: 1.1;}
}

@media (min-width: 80em) {
	h1 { font-size: 3em; line-height: 1.05; }
	h2 { font-size: 2.25em; line-height: 1.25; }
	h3 { font-size: 1.75em; line-height: 1.25; }
	h4 { font-size: 1.25em; line-height: 1.22222222;}
	h5 { font-size: 1em; line-height: 1.1;}
	h6 { font-size: 1em; line-height: 1.1;}
}*/

 /* ==========================================================================
   5.0 - Elements
   ========================================================================== */
 
 /**
 * 5.1 Paragraphs
 */

 /**
 * 5.2 Lists
 */
ul {
	list-style: disc inside; }
ol {
	list-style: decimal inside; }
ol, ul {
	padding-left: 0;
	margin-top: 0; }
ul ul,
ul ol,
ol ol,
ol ul {
	margin: 1rem 0 1rem 2rem;
	font-size: 90%; }
li {
	margin-bottom: 0;
}


 /**
  * 5.3 Images
  */
img {
	border: 0;
	height: auto;
	max-width: 100%;
}

/* Scale sizes for images smaller width than 100% */
.max-width-50, .size-medium {
    max-width: 50%;
}
.max-width-33, .size-thumbnail {
    max-width: 33.3884%;
}
.max-width-25 {
    max-width: 24.9587%;
}

/* Wordpress image alignment classes */
img.centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

img.alignright {
    margin: 0 0 2px 7px;
    display: inline;
}

img.alignleft {
    margin: 0 7px 2px 0;
    display: inline;
}

.alignright {
    float: right;
}

.alignleft {
    float: left;
}

 /**
  * 5.4 Code
  */
 code {
	padding: .2rem .5rem;
	margin: 0 .2rem;
	font-size: 90%;
	white-space: nowrap;
	background-color: #F1F1F1;
	border: 1px solid #E1E1E1;
	border-radius: 4px;
}
pre > code {
	display: block;
	padding: 1rem 1.5rem;
	white-space: pre;
}


 /**
  * 5.5 Tables
  */
th,
td {
	padding: 12px 15px;
	text-align: left;
	border-bottom: 1px solid #E1E1E1;
    line-height: 1.25em;
}
th:first-child,
td:first-child {
	padding-left: 0;
}
th:last-child,
td:last-child {
	padding-right: 0;
}


 /**
  * 5.6 Embedded videos
  */


.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.video-container iframe,  
.video-container object,  
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.entry-content img, 
.entry-content iframe, 
.entry-content object, 
.entry-content embed {
        max-width: 100%;
}


 /**
  * 5.7 Misc
  */

/* HR-line (thematic break line) styling */
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ddd;
    margin: 1em 0;
    padding: 0;
} 

/* teksti nosto (esim. Pilatespäivä-sivulla) */
p.teksti-nosto {
	font-family: "Myriad Pro", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; 
    margin-left: 0.8em;
	margin-right: 0.8em;
	font-size: 1.1em;
	line-height: 1.4em;
}

p.tietosuoja-text {
	font-size: 12px;
}

/* Blockquotes */
blockquote.laatikkoquote {
	display: block;
	font-style: italic;
	padding: 15px;
	margin: 0 5px 10px 5px;
	border-radius: 3px 3px 3px 3px;
	-webkit-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.75);
	
	background-color: #dce7e9;
}
blockquote.laatikkoquote p {
	margin: 0;
}

blockquote.laatikkoquote-covid {
	display: block;
	padding: 15px;
	margin: 0 5px 10px 5px;
	border-radius: 3px 3px 3px 3px;
	-webkit-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.75);
	background: rgba(242, 131, 33, 0.25);
}

.classicquote {
  display: block;
  border-width: 2px 0;
  border-style: solid;
  border-color: #eee;
  padding: 1.5em 0 0.5em;
  margin: 1.5em 0;
  position: relative;
}
.classicquote:before {
  content: '\201C';
  position: absolute;
  top: 0em;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  width: 3rem;
  height: 2rem;
  font: 6em/1.08em 'PT Sans', sans-serif;
  color: #666;
  text-align: center;
}

/* The cite, not used now
.classicquote:after {
  content: "\2013 \2003" attr(cite);
  display: block;
  text-align: right;
  font-size: 0.875em;
  color: #e74c3c;
}*/

.classicquote {
  display: block;
	font-family: Garamond, Helvetica, Arial, sans-serif; 
	font-size: 1.6em;
	line-height: 1.5;
  border-width: 2px 0;
  border-style: solid;
  border-color: #eee;
  padding: 2em 1em 0.5em 1em;
  margin: 1.5em 0em;
  position: relative;
}



 /* ==========================================================================
  6.0 - Buttons
  ========================================================================== */
 
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
	display: inline-block;
	height: 38px;
	padding: 0 30px;
	color: #555;
	text-align: center;
	font-size: 11px;
	font-weight: 600;
	line-height: 38px;
	letter-spacing: .1rem;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	background-color: transparent;
	border-radius: 4px;
	border: 1px solid #bbb;
	cursor: pointer;
	box-sizing: border-box; 
    -webkit-appearance: none;
}
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
	color: #333;
	border-color: #888;
	outline: 0;
	background-color: #fafafa;
	text-decoration: underline;
}
.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
	color: #FFF;
	background-color: #33C3F0;
	border-color: #33C3F0;
}
.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
	color: #FFF;
	background-color: #1EAEDB;
	border-color: #1EAEDB;
}


/* ==========================================================================
  7.0 - Forms
  ========================================================================== */

input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
	height: 38px;
    	width: 100%;
	padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
	background-color: #fff;
	border: 1px solid #D1D1D1;
	border-radius: 4px;
	box-shadow: none;
	box-sizing: border-box;
}
/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none; }
textarea {
	width: 100%;
	min-height: 100px;
	padding-top: 6px;
	padding-bottom: 6px; }
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
	border: 1px solid #33C3F0;
	outline: 0;
}
label,
legend {
	display: block;
	margin-bottom: .2rem;
	font-weight: 400;
}
fieldset {
	padding: 0;
	border-width: 0;
}
input[type="checkbox"],
input[type="radio"] {
  display: inline;
}
label > .label-body {
	display: inline-block;
	margin-left: .5rem;
	font-weight: normal;
}


/* ==========================================================================
  8.0 - Navigations
  ========================================================================== */
 
 /**
  * 8.1 Links
  */
  
a:link, a:visited {
	color: #2c96bf;
	text-decoration: none;
	line-height: 1.25;
}

a:hover {
	text-decoration: underline;
}
  
/**
 * 8.2 MENUS
 */
 
/* Generic for all site navs */
.site-nav ul {
	padding: 0;
	margin: 0;
	list-style: none;
	*zoom: 1;
}

/**
 * 8.2.1 MOBILE NAVIGATION MENU
 */
 
/* Hide high resolution menus */
#main-nav-container, .footer-nav {
	display: none;
}

/* Container for mobile nav bar */
#mobile-nav-container {
	background-color: #2b81a4;
	margin: 2% 0;
	padding: 0;
}

/* Mobile menu headline text */
#mobile-menu-headline-text-container {
    display: inline-block;
	color: #FFF;
	padding-left: 1em;
	text-decoration: none;
	font-size: 1em;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* MQ: hide menu text for very low resolutions */
@media (max-width: 23em) {
    #mobile-menu-headline-text-container {
        display: none;
    }
}

/* Clickable container that opens the mobile menu. */
#mobile-menu-on {
    margin: 0;
	margin-right: 14em;
	padding: 0.8em 0 0.8em 0.8em;
	cursor: pointer;
}

#mobile-menu-on > * {
    vertical-align: middle;
    line-height: normal;
}

/* Hidden checkbox features that define wheter mobile menu is open or closed */
#toggle-mobile-menu {
	display: none;
}
#toggle-mobile-menu:checked ~ .mobile-nav ul {
    display: block;
}

/* Hamburger icon container */
#hamburger-icon {
	display: inline-block;
}
/* Hamburger icon single lines construction */
.hamburger-bar1, .hamburger-bar2, .hamburger-bar3 {
    width: 1.875em;
    height: 0.25em;
    background-color: #FFF;
    margin: 0.375em 0;
	transition: 0.4s;
}
/* Hamburger icon transform settings */
.change .hamburger-bar1 {
    -webkit-transform: rotate(-45deg) translate(-0.375em, 0.375em) ;
    transform: rotate(-45deg) translate(-0.375em, 0.375em) ;
}
.change .hamburger-bar2 {opacity: 0;}
.change .hamburger-bar3 {
    -webkit-transform: rotate(45deg) translate(-0.5em, -0.5em) ;
    transform: rotate(45deg) translate(-0.5em, -0.5em) ;
}

/* Mobile menu list, hidden by default */
.mobile-nav ul {
	position: relative;
	display: none;
}

/* Inline for mobile menu list items at deeper levels (CURRENTLY NOT NEEDED)
.mobile-nav ul ul {
	display: block;
	padding: 0 0 0 2.2em;
}*/

/* Mobile menu formatting */
.mobile-nav ul a:link, 
.mobile-nav ul a:visited {
    display: block;
	color: #FFF;
	padding: 1em;
	text-decoration: none;
	font-size: 1em;
	letter-spacing: 0.1em;
	border-top: 1px solid rgba(255,255,255,0.2);
}

/* List item formatting on mouse hover */
.mobile-nav ul a:hover {
	background-color: #6dad21;
}

.mobile-nav {
    width: 100%;
}

/* Remove list item margin and padding */
.mobile-nav .menu-item {
	margin: 0;
	padding: 0;
}

/* Add arrows for deeper level menus (CURRENTLY NOT NEEDED) */
/* 1: set up downward arrow for all menu items*/
.mobile-nav li a:after { content: ' \25BC'; }
/* 2: clear the content if a is only child*/
.mobile-nav li > a:only-child:after {content: ''; }

/* Children nav bar container */
#main-nav-children-container {
    width: 100%;
    margin: 0;
    margin: 0.3em 0;
}

/* Main nav CHILDREN LINKS, produced as a UL */
.main-nav-children li {
    margin: 0;
    float: left;
}
.main-nav-children li a:visited,
.main-nav-children li a:link {
    display: block;
    padding: 0.5em 0.5em;
    margin: 0.3em;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 700;
    border: 1px solid #2b81a4;
    border-radius: 4px;
}
.main-nav-children li a:hover {
    background-color: #6dad21;
    color: #fff;
    text-decoration: underline;
}
.main-nav-children .current:link, /* a class added by custom javascript in footer */
.main-nav-children .current:visited { /* a class added by custom javascript in footer */
    background-color: #6dad21;
    color: #fff;
}


/**
 * 8.2.2 HIGH RESOLUTION NAVIGATION
 */
 
@media (min-width: 43em) {
    
	/* Hide mobile navigation container */
	#mobile-nav-container {
		display: none;
	}
    
	/* Show high res navigation menus */
	#main-nav-container, .footer-nav {
		display: block;
	}   
    
    /* MAIN NAVIGATION (HEADER) */

	/* Main nav bar container  */
    #main-nav-container {
        
        background-color: #2b81a4;
        border-radius: 5px 5px 5px 5px;
        /* Gradient color */ 
		background-image: -webkit-gradient(linear, left top, left bottom, from(#2b81a4), to(#185064));
		background-image: -webkit-linear-gradient(top, #2b81a4, #185064);
		background-image: -moz-linear-gradient(top, #2b81a4, #185064);
		background-image: -ms-linear-gradient(top, #2b81a4, #185064);
		background-image: -o-linear-gradient(top, #2b81a4, #185064);
		background-image: linear-gradient(top, #2b81a4, #185064);
		clear: both;
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#2b81a4, endColorstr=#185064);
        
        margin-top: 1em;
        width: 100%;
    
        /* flexbox is used to position search box */
        display: -webkit-flex;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    
    /* Main nav bar */
	.main-nav {
		margin: 0 0.4em;
        
        /* flexbox is used to position search box / Fallback is inline-block positioning */
        -webkit-flex: 1;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
    
    }
    
    .main-nav ul li {
        margin: 0;
        float: left;
    }
    
    /* Main nav links */
    .main-nav ul li a:link, .main-nav ul li a:visited {
        display: block;
        padding: 1em 1em;
        color: #FFF;
        text-decoration: none;
		font-size: 0.8rem;
		font-weight: 700;       
    }
    
    .main-nav ul li:hover {
        background-color: #6dad21;
        text-decoration: underline;
        color: #FFF;
    }
    .main-nav .current_page_item a:link, 
    .main-nav .current_page_item a:visited,
    .main-nav .current-page-ancestor a:link,
    .main-nav .current-page-ancestor a:link {
        background-color: #6dad21;    
    }
    
    /* Main nav children link styles for high res menu */
    
    .main-nav-children li a:visited,
    .main-nav-children li a:link {
        border: none;
        padding: 0.4em 0.8em;
        margin: 0;
    }
    /* hover colors */
    .main-nav-children li a:hover {
        background-color: #FFF;
        color: #6dad21;
    }
    
    /* Add small borders */
    .main-nav-children li {
        border-right: 1px dotted #2b81a4;
    }
    /* Remove last border */
    .main-nav-children li:last-child {
        border: none;
    }
    .main-nav-children .current:link, /* a class added by custom javascript in footer */
    .main-nav-children .current:visited { /* a class added by custom javascript in footer */
        background-color: #fff;
        color: #6dad21;
    }
        
   
	/* FOOTER MENU */
    /* see footer section 12.0 */
}


/**
 * 8.3 Search
 */

/* Styling for both low and high res search bars */

.search-bar .search-form,
.search-bar label {
    margin: 0;
    padding: 0;
}

.search-bar .screen-reader-text {
    position: absolute;
    left: -9999px;
}

.search-bar .search-field {
    margin: 0;
    padding: 0 0.3em;
    float: left;
    border-radius: 4px 0 0 4px;
    border: none;
    background-color: #fafafa;
}
.search-bar .search-field:after {
    content: "";
    display: table;
    clear: both;
}
.search-bar .search-submit {
    padding: 0;
    margin: 0;
    border-radius: 0 4px 4px 0;
    border: none;
    background-color: #6dad21;
}
.search-bar .search-submit:hover {
    background-color: #56881a;
}

/* Low res search styling */

#low-res-search {
    width: 200px;
    height: 20px;
    padding: 10px;
    float: right;
}

#low-res-search .search-field {
    height: 40px;
    width: 160px;
    font-size: 1em;
}
#low-res-search .search-submit {
    height: 40px;
    width: 40px;
    text-align: center;
}
#low-res-search .search-submit .material-icons {
    padding: 3px 0 3px 3px;
    color: #fafafa;
    font-size: 36px;
}

/* Fix to make material icons visible in Samsung phone default browsers etc */
.material-icons{
    -webkit-font-feature-settings: 'liga';
    -moz-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
}

/* High res search bar styling */
/* MQ: Larger than ~688px */
@media (min-width: 43em) {	
    #high-res-search {
        width: 172px;
        height: 26px;
        padding: 7px;
    }

    #high-res-search .search-field {
        height: 26px;
        width: 140px;
    }

    #high-res-search .search-submit {
        height: 26px;
    }
    #high-res-search .search-submit .material-icons {
        padding: 1px 0 1px 1px;
        color: #fafafa;
        font-size: 24px;
    }
    
}
 
 /* ==========================================================================
  9.0 - Header
  ========================================================================== */

#upper-header-content {
    text-align: justify;
    
}

/* Facebook etc logos */
#top-right-logos {
    position: absolute;
    right: 8px;
    top: 8px;
}

/* By default, display lowest res logo */
#upper-header-content .header-logo.high-res,
#upper-header-content .header-logo.low-res{
    display: none;
}
#upper-header-content .header-logo.lowest-res {
    display: inline-block;
}

.header-logo img {
    min-height: 50px;
    min-width: 1px;

}
#fb-logo img {
    border-radius: 3px;
    min-width: 25px;
    min-height: 25px;
}

/* MQ: 
 * Resolution to display low res logo
 */
@media (min-width: 32em) {
    #upper-header-content .header-logo.low-res {
        display: inline-block;
    }
    #upper-header-content .header-logo.high-res, 
    #upper-header-content .header-logo.lowest-res {
        display: none;
    }
}

/* MQ: 
 * Resolution to display high res logo
 */
@media (min-width: 48em) {
    #upper-header-content .header-logo.high-res {
        display: inline-block;
    }
    #upper-header-content .header-logo.low-res, 
    #upper-header-content .header-logo.lowest-res {
        display: none;
    }
}

 /* ==========================================================================
  10.0 - Widgets
  ========================================================================== */
 
 /**
  * 10.1 - Koulutuskalenteri page (not sidebar) widget
  */
 
.main-column-calendar {
	list-style: none;
 }
 
/* Title link and after widget link styling */
.main-calendar .widgettitle {
	font-size: 1.625em;
}
.main-calendar .widgettitle a:link,
.main-calendar .widgettitle a:visited,
.main-calendar .upw-after a:link,
.main-calendar .upw-after a:visited {
	text-decoration: none;
	color: #2b81a4;
}
.main-calendar .widgettitle a:hover,
.main-calendar .upw-after a:hover	{
	color: #6dad21;
}

/* Single cal entry */
.main-calendar .entry-title {
	font-size: 1.125em;
}
.main-calendar .entry-title a {
	text-decoration: none;
	color: #000;
	font-family: "Myriad Pro", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; 
}
.main-calendar .entry-custom-fields {
	font-size: 0.875em;
	color: #848482;
	font-family: "Myriad Pro", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 1em;
}
.main-calendar .entry-image {
	float: left;
	padding-right: 1%;
	margin-bottom: 0.2em !important;
	max-width: 35%;
}
.main-calendar .entry-summary {
    float: left;
}
.main-calendar article {
	overflow: hidden;
}

/* Ilmoittautumislinkki styling */
.main-calendar .entry-ilmolink {
    text-transform: uppercase;
    font-size: 0.8em;
    display: inline-block;
    font-weight: 700;
    display: inline-block;
    padding: 0.3em 0;
}

/* Kurssi täynnä styling */
.course-full-main-cal {
    color: #CC0303;
}

/* Kurssi täynnä/varasija popup styling for forms (haku/ilmoittautuminen) */
.full-popup {
    font-family: "Myriad Pro", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 0.8em;
    color: #CC0303;
}


/* custom post field information shown below calendar headline (kenelle, hinta, paikka..) */
.koulutuskalenteri-stat {
    font-size: 0.9em;
    line-height: 1.4em;
    color: #4d4d4d;
    
}
.koulutuskalenteri-stat-head {
    font-weight: 700;
}


 /**
  * 10.2 - SIDEBAR koulutuskalenteri widget
  */
 .sidebar-cal-container {
	border: 1px solid #DDDDDD;
	padding: 0;
	background-color: #fafafa;
	
	border-radius: 5px 5px 5px 5px;
}
 
 /* Title link and after widget link styling */
.cal-widget .widgettitle {
    margin-top: 0;
	text-align: center;
	overflow: hidden;
	padding: 0.4em 0;
	margin-bottom: 0;
	background-color: #2b81a4;
	
	border-right: 0.5em solid #2b81a4;
	border-left: 0.5em solid #2b81a4;
	border-radius: 5px 5px 0 0;
}

/* Drawing vertically centered lines on both sides of the title */
.cal-widget .widgettitle:before,
.cal-widget .widgettitle:after {
    background-color: #FFF;
    content: "";
    display: inline-block;
    height: 1px;
    position: relative;
    vertical-align: middle;
    width: 50%;
}
.cal-widget .widgettitle:before {
    right: 0.5em;
    margin-left: -50%;
}
.cal-widget .widgettitle:after {
    left: 0.5em;
    margin-right: -50%;
}

.cal-widget .widgettitle a:link,
.cal-widget .widgettitle a:visited {
	text-decoration: none;
	color: #FFF;
	font-size: 0.7em;
}
.cal-widget .upw-after a:link,
.cal-widget .upw-after a:visited {
	text-decoration: none;
	color: #2b81a4;
	font-size: 0.8em;
	font-weight: 700;	
}
.cal-widget .upw-after {
	text-align: center;
}

.cal-widget .widgettitle a:hover,
.cal-widget .upw-after a:hover	{
	text-decoration: underline;
}

/* Single cal entry */
.cal-widget .entry-image {
	float: left;
	padding-right: 2%;
	max-width: 120px;
	margin: 0 !important; /* !important to override Ultimate Posts widget margin-bottom rule */
}
.cal-widget .entry-image img {
	border-radius: 5px 5px 5px 5px;
}

.cal-widget .entry-title {
	font-size: 1em;
}
.cal-widget .entry-title a {
    padding: 2px 0;
	text-decoration: none;
	color: #000;
}
.cal-widget .entry-custom-fields {
	font-size: 0.875em;
    color: #666666;
;
    line-height: 1.1em;
	overflow: hidden;
    margin: 0 !important;
}

.cal-widget .custom-field-paikka {
	margin-bottom: 0 !important;
}

.cal-widget .upw-after a {
    display: block;
    padding-top: 1em;
}
.cal-widget article {
	overflow: hidden;
}
.cal-widget .upw-posts article {
	border-bottom: 1px solid #efefef;
	padding: 0.5em 0.3em;
	margin: 0;
}
.cal-widget .upw-posts article {
    position: relative;
}


/* MEDIA QUERY: Larger than phablet
 --–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (min-width: 43em) {	

	/* Image positioning and size */
	.cal-widget .entry-image {
		display: block;
		width: 30%;
	}

	.cal-widget .widgettitle {
		padding: 0.8em 0;
	}
	/* Title link and after widget link styling */
	.cal-widget .widgettitle a:link,
	.cal-widget .widgettitle a:visited {
		font-size: 1em;
		font-weight: 700;
	}

	.cal-widget .upw-after {
		text-align: center;
	}
	.cal-widget .upw-after a:link,
	.cal-widget .upw-after a:visited {
		font-size: 0.8em;
		font-weight: 700;
	}
	.cal-widget .widgettitle {
		font-size: 0.8em;
		font-weight: 700;
	}

	/* Single cal entry */
	.cal-widget .entry-title {
		font-size: 0.75em;
	}
	.cal-widget .entry-custom-fields {
		font-size: 0.75em;
	}
	.cal-widget .upw-posts article {
		padding: 0.4em 0.3em;
	}
}


 /**
  * 10.3 - Contact form 7 widget
  */

/* TÄYNNÄ text in front of course; ilmoittautumislomakkeen valintalistassa */
.course-full-pre-text {
    font-family: "Myriad Pro", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 0.8em;
    color: #CC0303;
}

/* Show wp7 list items as blocks (as a list) */
.cb-lisatiedot span.wpcf7-list-item { 
	display: block;
}

 /* Form "kurssivalinnat" formatting
 --–––––––––––––––––––––––––––––––––––––––––––––––––– */
p#koulutus-johon-haet {
	margin-bottom: 0;
}

.form-kurssit label {
    display: inline-block; /*to have the width match text width*/
    font-weight: 400;
	margin-bottom: 0;
     margin-top: 1.2em;
	line-height: 1em;
 }

.form-kurssit {
    font-size: 0.9em;
}
.form-kurssit p {
    margin: 0 0 0.3em 0;
}

/* Form submit button hover effect */
#submit-form:hover {
	background-color: #DDDDDD;
	text-decoration: underline;
 }
 
/* Textarea width to 100% */
textarea {
    width: 100%;
    min-height: 100px;
}


/**
  * 10.4 Slider Frontpage widget
  */
  
/* rounded corners for images */
.fp-slider img {
	border-radius: 5px 5px 5px 5px;
}
.fp-slider .caption-wrap {
    border-radius: 0 0 5px 5px;
}

/* Caption text formatting */
.fp-slider .caption {
	letter-spacing: 0.04em;
    color: #FFF;
    font-size: 1em;
    line-height: 1.2;
    text-align: center;
}
/* MQS: caption size */
@media (min-width: 540px) {
    .fp-slider .caption {
        font-size: 1.1em;
        line-height: 1.4; 
    }
}
@media (min-width: 688px) {
    .fp-slider .caption {
        font-size: 1em;
        line-height: 1.2; 
    }
}
@media (min-width: 940px) {
    .fp-slider .caption {
        font-size: 1.1em;
        line-height: 1.4; 
    }
}



 /**
 * 10.5 - Tablepress widget
 */
 
/**
  * 10.5.1 - Ohjaajat tables
  *
  * Seuraavat komennot vaikuttavat kaikkiin taulukohin, joissa ohjaajatbl-lisäluokka.
  * Taulukoita voi säätää myös yksitellen, jos niihin lisää uusia lisäluokkia tai kohdistaa
  * niihin muotoiluja id-perusteisten luokkien avulla.
  */

/* Taustan värin vaihtelu */
.ohjaajatbl .odd td {
	background-color: #ffffff;
}
.ohjaajatbl.even td {
	background-color: #eeeeee;
}

/* Lyhennetään kaikkien taulukoiden Etsi-laatikkoa pienemmillä resoilla */

@media (max-width: 42.9999em) {	
	#tablepress-7_filter > label > input[type="search"]  {
		max-width: 150px;
	}
}

/* Fontti */
.ohjaajatbl tbody td {
	font-family: Tahoma;
	font-size: 12px;
}

/* Otsikon fontti */
.ohjaajatbl thead th {
	font-family: Tahoma;
	font-size: 12px;
	font-weight: 700;
}

/* Kaupunki-sarakkeen leveyden säätö */
.ohjaajatbl .column-1 {
	max-width: 100px;
}

/* Puhelin-sarakkeen leveyden säätö */
.ohjaajatbl .column-4 {
	max-width: 80px;
}

/* Lisenssi-sarakkeen leveyden säätö */
.ohjaajatbl .column-5 {
	min-width: 100px;
}

/**
  * 10.5.2 - Pilatespäivä tables
  *
  * Seuraavat komennot vaikuttavat kaikkiin taulukohin, joissa pilatespaivatbl-lisäluokka.
  * Taulukoita voi säätää myös yksitellen, jos niihin lisää uusia lisäluokkia tai kohdistaa
  * niihin muotoiluja id-perusteisten luokkien avulla.
  */

.pilatespaivatbl tbody td {
	font-family: Tahoma;
	font-size: 11px;
}

.pilatespaivatbl thead th {
	font-family: Tahoma;
	font-size: 11px;
}

.pilatespaivatbl .column-1 {
	max-width: 60px;
}

.pilatespaivatbl .column-2 {
	max-width: 60px;
}

.pilatespaivatbl .column-4 {
	min-width: 140px;
}

.pilatespaivatbl .column-5 {
	min-width: 100px;
}

 /**
 * 10.6 - Table of Contents (TOC) widget
 */

#toc_container ul li {
    margin: 0.4em 0;
}
#toc_container > p.toc_title {
    text-align: center;
}

 /**
 * 10.7 - Popup maker widget
 */

/*NOT CURRENTLY IN USE
*.popmake-laheta-viesti-2 {
*	display: block
*	margin-bottom: 0;
*	padding: 8px 14px;
*	border-radius: 5px 5px 0 0;
*	color: #FFF;
 *   text-transform: uppercase;
*	position: fixed;
 *   bottom:0%;
*	right: 0%;
*	z-index: 5000;
*	background-color: #6dad21;
*}
*/

/* ==========================================================================
11.0 - Content
========================================================================== */
 
/**
  * 11.1 Front page
  */

/*MEDIA QUERY: Larger than tablet */
@media (min-width: 48em) {	
	#frontpage-h1 {
		font-size: 1.625em;
	}
}/*
#frontpage-lower-column-left p {
	margin-bottom: 1em;
}
#frontpage-lower-column-left img {
    margin-top: 1em;
} */

/* FRONT PAGE KOULUTTAUDU -LINKS */
#frontpage-links {
    margin-top: 0.8em;
}
#frontpage-links .frontpage-link {
    font-size: 0.8em;
    font-weight: 400;
    text-transform: uppercase;
}

#frontpage-links .frontpage-link {
    display: inline-block;
    padding: 0 0.5em;
}
#frontpage-links .frontpage-link:first-child {
    padding-left: 0;
}
#frontpage-links .frontpage-link:last-child {
    padding-right: 0;
}
#frontpage-links {
    margin-bottom: 0.4em;
    text-align: center;
}


/* FRONT PAGE NOSTOT GRID */
.fp-nosto .fp-nosto-kuvateksti {
    color: #000 !important;
    font-size: 0.9em;
    font-family: "Myriad Pro", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; 
}



/* FRONT PAGE KOULUTUKSET BOXES */
#front-page-koulutukset {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
}
#front-page-koulutukset > div {
    -webkit-box-flex: 1;
    -webkit-flex: 1 42%;
        -ms-flex: 1 42%;
            flex: 1 42%;
    
	padding: 0.5em;
	margin: 0.5em;
	background-color: #fafafa;
	
	border: 1px solid #DDDDDD;	
	border-radius: 5px 5px 5px 5px;
    display: inline-block;
    max-width: 400px;
    cursor: pointer;
}

#front-page-koulutukset a:hover {
      text-decoration: none;
}
/* Background color change on hover */
#front-page-koulutukset > div:hover { 
     background: #f5f5f5;
}

#front-page-koulutukset h2 {
	font-size: 0.9em;
	font-weight: 700;
	margin-bottom: 0.4em;
}
#front-page-koulutukset p {
    color: #000;
	font-size: 0.75em;
	line-height: 1.4;
}
#front-page-koulutukset img {
	float: left;
	margin-bottom: 1em;
	margin-right: 0.6em;
    max-width: 42%;
}
#front-page-koulutukset .fp-koulutusquote {
	font-style: italic;
    color: #000;
}

/* Tweaks to make the whole content block li a clickable link */
#front-page-koulutukset > div {
	position: relative;
}
.link-spanner-for-whole-div-clickable {
    opacity: 0;
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left: 0;
	z-index: 1;
   /*edit: fixes overlap error in IE7/8, 
     make sure you have an empty gif 
	background-image: url('empty.gif');*/
}


/**
  * 11.2 Pääkoulutukset page
  */

/* Quote for all koulutus pages */
p.quote {
    margin-bottom: 1em;
    margin-left: 1em;
}

/* Miksi valita bullets koulutus pages */
.pht-miksi-valita-h3::before {
    content: "•";
	font-size: 1.2em;
	color: #6dad21;
	display: inline-block;
	width: 0.6em;
}

/* Seuraava koulutus "ikkunat" 
 * --------------------------- */
.seuraava-koulutus-link-wrapper a {
	text-decoration: none;
}
.seuraava-koulutus-container {
	padding: 1em;
	border-radius: 5px 5px 5px 5px;
}

.seuraava-koulutus-container h2 {
	margin-top: 0;
	margin-bottom: 0.3em;
}
.seuraava-koulutus-container .hae-rivi {
	font-size: 1.6em;
	letter-spacing: 0.05em;
	text-align: center;
	margin-bottom: 0;
}

/* PhysioTrainer konffit*/
#seuraava-koulutus-pt {
	background-color: #3c3c3c;
    /* Gradient color */ 
    background-image: -webkit-gradient(linear, left top, left bottom, from(#3c3c3c), to(#000));
    background-image: -webkit-linear-gradient(top, #3c3c3c, #000);
    background-image: -moz-linear-gradient(top, #3c3c3c, #000);
    background-image: -ms-linear-gradient(top, #3c3c3c, #000);
    background-image: -o-linear-gradient(top, #3c3c3c, #000);
    background-image: linear-gradient(top, #3c3c3c, #000);
    clear: both;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#3c3c3c, endColorstr=#000);
	/* TEXT COLOR */
	color: #fff;
}
#seuraava-koulutus-pt h2 {
	color: #ff9900;
}
#seuraava-koulutus-pt .hae-rivi {
	color: #ff9900;
}

/* PhysioPilates konffit*/
#seuraava-koulutus-pp {
    background-color: #2b81a4;
    /* Gradient color */ 
    background-image: -webkit-gradient(linear, left top, left bottom, from(#2b81a4), to(#185064));
    background-image: -webkit-linear-gradient(top, #2b81a4, #185064);
    background-image: -moz-linear-gradient(top, #2b81a4, #185064);
    background-image: -ms-linear-gradient(top, #2b81a4, #185064);
    background-image: -o-linear-gradient(top, #2b81a4, #185064);
    background-image: linear-gradient(top, #2b81a4, #185064);
    clear: both;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#2b81a4, endColorstr=#185064);

	/* TEXT COLOR */
	color: #fff;
}


#seuraava-koulutus-pp h2 {
	color: #fff;
}
#seuraava-koulutus-pp .hae-rivi {
	color: #fff;
}

/* PhysioPilates2 konffit*/
#seuraava-koulutus-pp2 {
    background-color: #185064;
    /* Gradient color */ 
    background-image: -webkit-gradient(linear, left top, left bottom, from(#185064), to(#091824));
    background-image: -webkit-linear-gradient(top, #185064, #091824);
    background-image: -moz-linear-gradient(top, #185064, #091824);
    background-image: -ms-linear-gradient(top, #185064, #091824);
    background-image: -o-linear-gradient(top, #185064, #091824);
    background-image: linear-gradient(top, #185064, #091824);
    clear: both;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#185064, endColorstr=#091824);

	/* TEXT COLOR */
	color: #fff;
}


#seuraava-koulutus-pp2 h2 {
	color: #fff;
}
#seuraava-koulutus-pp2 .hae-rivi {
	color: #fff;
}

/* PilatesHealth konffit*/
#seuraava-koulutus-ph {
    background-color: #6dad21;
    /* Gradient color */ 
    background-image: -webkit-gradient(linear, left top, left bottom, from(#6dad21), to(#56881a));
    background-image: -webkit-linear-gradient(top, #6dad21, #56881a);
    background-image: -moz-linear-gradient(top, #6dad21, #56881a);
    background-image: -ms-linear-gradient(top, #6dad21, #56881a);
    background-image: -o-linear-gradient(top, #6dad21, #56881a);
    background-image: linear-gradient(top, #6dad21, #56881a);
    clear: both;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#6dad21, endColorstr=#56881a);

	/* TEXT COLOR */
	color: #fff;
}
#seuraava-koulutus-ph h2 {
	color: #fff;
}
#seuraava-koulutus-ph .hae-rivi {
	color: #fff;
}

/* PilatesHealth2 konffit*/
#seuraava-koulutus-ph2 {
    background-color: #56881a;
    /* Gradient color */ 
    background-image: -webkit-gradient(linear, left top, left bottom, from(#56881a), to(#2e480e));
    background-image: -webkit-linear-gradient(top, #56881a, #2e480e);
    background-image: -moz-linear-gradient(top, #56881a, #2e480e);
    background-image: -ms-linear-gradient(top, #56881a, #2e480e);
    background-image: -o-linear-gradient(top, #56881a, #2e480e);
    background-image: linear-gradient(top, #56881a, #2e480e);
    clear: both;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#56881a, endColorstr=#2e480e);

	/* TEXT COLOR */
	color: #fff;
}
#seuraava-koulutus-ph2 h2 {
	color: #fff;
}
#seuraava-koulutus-ph2 .hae-rivi {
	color: #fff;
}

/* Täydennys konffit*/
#seuraava-koulutus-tk {
    background-color: #f68b20;
    /* Gradient color */ 
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f68b20), to(#f6983b));
    background-image: -webkit-linear-gradient(top, #f68b20, #f6983b);
    background-image: -moz-linear-gradient(top, #f68b20, #f6983b);
    background-image: -ms-linear-gradient(top, #f68b20, #f6983b);
    background-image: -o-linear-gradient(top, #f68b20, #f6983b);
    background-image: linear-gradient(top, #f68b20, #f6983b);
    clear: both;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f68b20, endColorstr=#f6983b);
	
	color: #000;
}
#seuraava-koulutus-tk h2 {
	color: #000;
}
#seuraava-koulutus-tk .hae-rivi {
	color: #fff;
}


/* H1 heading */

.page-paakoulutukset h1 {
    margin-bottom: 0;
}

/* KOULUTUSKAAVIO */

#koulutuskaavio div img {
    min-width: 0;
    border-radius: 5px 5px 5px 5px;
}


#koulutuskaavio div {
    width: 200px;
    height: auto;
    margin: 2%;
    position: relative;
    display: inline-block;
    cursor: pointer;
}

#koulutuskaavio .laatikko .overlay-text {
    color: #000;
    padding-top: 0.2em;
    position: absolute;
    top: 75%;
    left: 0;
    text-align: center;
    -webkit-transform: translateX(-2%); /* FOR some bizzare reason must be -2% */
    -webkit-transform: translateY(-50%);
    -ms-transform: translateX(-2%); /* FOR some bizzare reason must be -2% */
    -ms-transform: translateY(-50%);
    transform: translateX(-2%) translateY(-50%);
    width: 100%;
    background-color: #efefef;
    opacity: 0.9;
}
#koulutuskaavio h2 {
    margin: 0;
    font-size: 0.8em;
    font-weight: 700;
}

#koulutuskaavio p {
    font-size: 0.7em;
    margin: 0;
    padding-bottom: 0.2em;
}
@media (min-width: 320px) {
#koulutuskaavio div {
    width: 134px;
    }
}

@media (min-width: 390px) {
#koulutuskaavio div {
    width: 160px;
    }
}
    
@media (min-width: 450px) {
#koulutuskaavio div {
    width: 188px;
}
}
@media (min-width: 540px) {
#koulutuskaavio div {
    width: 230px;
}
}
@media (min-width: 640px) {
#koulutuskaavio div {
    width: 276px;
}
}
    
@media (min-width: 43em) {
#koulutuskaavio div {
    width: 168px;
}
}
@media (min-width: 780px) {
#koulutuskaavio div {
    width: 194px;
}
}
@media (min-width: 890px) {
#koulutuskaavio div {
    width: 224px;
}
}
@media (min-width: 1020px) {
#koulutuskaavio div {
    width: 256px;
}
}
@media (min-width: 1085px) {
#koulutuskaavio div {
    width: 276px;
}
}

/* MQ: Larger than ~480px */
@media (min-width: 30em) {
    #koulutuskaavio h2 {
        font-size: 1em;
    }
    #koulutuskaavio p {
        font-size: 0.8em;
    }
}
/* MQ: Larger than ~592px */
@media (min-width: 37em) {
    #koulutuskaavio h2 {
        font-size: 1.2em;
    }
}
/* MQ: Larger than ~688px - main page view changes from 1 to 2 columns */
@media (min-width: 43em) {
    #koulutuskaavio h2 {
        font-size: 0.8em;
    }
    #koulutuskaavio p {
        font-size: 0.7em;
    }
}
    
/* MQ: Larger than ~800px */
@media (min-width: 50em) {
    #koulutuskaavio h2 {
        font-size: 1em;
    }
    #koulutuskaavio p {
        font-size: 0.8em;
    }
}


/* ASIAKASTARINAT */

/* Quote naamakuvalla */
.testimonial-quote {
    font-size: 16px;
}

.testimonial-quote {
	margin-top: 30px;
    margin-bottom: 50px;
}

.testimonial-quote blockquote {
    /* Negate theme styles */
    border: 0;
    margin: 0;
    padding: 0;

    background: none;
    color: gray;
    font-family: Georgia, serif;
    font-size: 1.5em;
    font-style: italic;
    line-height: 1.4 !important;
    margin: 0;
    position: relative;
    text-shadow: 0 1px white;
    z-index: 600;
}

.testimonial-quote blockquote * {
    box-sizing: border-box; 
}

.testimonial-quote blockquote p {
	color: #2a83a5; 
    line-height: 1.4 !important;
}

.testimonial-quote blockquote p:first-child:before {
    content: '\201C';
    color: #81bedb;
    font-size: 7.5em;
    font-weight: 700;
    opacity: .3;
    position: absolute;
    top: -.4em;
    left: -.2em;    
    text-shadow: none;
    z-index: -300;
}

.testimonial-quote img {
    border: 3px solid #9CC1D3;
    border-radius: 50%;
    display: block;
    width: 120px;
    height: 120px;
    position: absolute;
    top: -.2em; 
    left: 0;    
}

.testimonial-quote cite {
    color: gray;
    display: block;
    font-size: .8em; 
}
  
.testimonial-quote cite span {
    color: #5e5e5e;
    font-size: 1em;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-shadow: 0 1px white; 
}

.testimonial-quote {
    position: relative; 
}

.testimonial-quote .quote-container {
    padding-left: 160px; 
}

/**
  * 11.3 Hakupainike styling
  */


/* Hakupainike */
.haku-button a {
    display: block;
    padding: 0.7em;
    text-transform: uppercase;
    font-weight: 400;
    color: #fff;
}

.hb-kalenterissa {
    display: inline-block;
}

/* Hakupainikkeiden taustavärit */
#pp-haku {
    /*max-width: 22em;*/
    width: 100%;
    margin-bottom: 1em;
    border-radius: 5px 5px 5px 5px;
    background-color: #2b81a4;
    /* Gradient color */ 
    background-image: -webkit-gradient(linear, left top, left bottom, from(#2b81a4), to(#185064));
    background-image: -webkit-linear-gradient(top, #2b81a4, #185064);
    background-image: -moz-linear-gradient(top, #2b81a4, #185064);
    background-image: -ms-linear-gradient(top, #2b81a4, #185064);
    background-image: -o-linear-gradient(top, #2b81a4, #185064);
    background-image: linear-gradient(top, #2b81a4, #185064);
    clear: both;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#2b81a4, endColorstr=#185064);
    text-align: center;
}

#ph-haku {
    /*max-width: 22em;*/
    width: 100%;
    margin-bottom: 1em;
    border-radius: 5px 5px 5px 5px;
    background-color: #6dad21;
    /* Gradient color */ 
    background-image: -webkit-gradient(linear, left top, left bottom, from(#6dad21), to(#56881a));
    background-image: -webkit-linear-gradient(top, #6dad21, #56881a);
    background-image: -moz-linear-gradient(top, #6dad21, #56881a);
    background-image: -ms-linear-gradient(top, #6dad21, #56881a);
    background-image: -o-linear-gradient(top, #6dad21, #56881a);
    background-image: linear-gradient(top, #6dad21, #56881a);
    clear: both;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#6dad21, endColorstr=#56881a);
    text-align: center;

}

#pt-haku {
    background-color: #3c3c3c;
    /*max-width: 22em;*/
    width: 100%;
    margin-bottom: 1em;
    border-radius: 5px 5px 5px 5px;
    /* Gradient color */ 
    background-image: -webkit-gradient(linear, left top, left bottom, from(#3c3c3c), to(#000));
    background-image: -webkit-linear-gradient(top, #3c3c3c, #000);
    background-image: -moz-linear-gradient(top, #3c3c3c, #000);
    background-image: -ms-linear-gradient(top, #3c3c3c, #000);
    background-image: -o-linear-gradient(top, #3c3c3c, #000);
    background-image: linear-gradient(top, #3c3c3c, #000);
    clear: both;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#3c3c3c, endColorstr=#000);
    text-align: center;
}
#rv-haku {
    background-color: #009c00;
    /*max-width: 22em;*/
    width: 100%;
    margin-bottom: 1em;
    border-radius: 5px 5px 5px 5px;
    /* Gradient color */ 
    background-image: -webkit-gradient(linear, left top, left bottom, from(#009c00), to(#007c00));
    background-image: -webkit-linear-gradient(top, #009c00, #007c00);
    background-image: -moz-linear-gradient(top, #009c00, #007c00);
    background-image: -ms-linear-gradient(top, #009c00, #007c00);
    background-image: -o-linear-gradient(top, #009c00, #007c00);
    background-image: linear-gradient(top, #009c00, #007c00);
    clear: both;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#009c00, endColorstr=#007c00);
    text-align: center;
}
#taydennys-ilmo {
    /*max-width: 22em;*/
    width: 100%;
    margin-bottom: 1em;
    border-radius: 5px 5px 5px 5px;
    background-color: #ff8b18;
    /* Gradient color */ 
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ff8b18), to(#f58311));
    background-image: -webkit-linear-gradient(top, #ff8b18, #f58311);
    background-image: -moz-linear-gradient(top, #ff8b18, #f58311);
    background-image: -ms-linear-gradient(top, #ff8b18, #f58311);
    background-image: -o-linear-gradient(top, #ff8b18, #f58311);
    background-image: linear-gradient(top, #ff8b18, #f58311);
    clear: both;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff8b18, endColorstr=#f58311);
    text-align: center;
}

/* hakubutton centering */

.center-align {
    margin: 0 auto;
}


/**
  * 11.4 Browser upgrade prompt
  */
.browserupgrade {
    margin: 0.2em 0;
    background-color: #ccc;
    color: #000;
    padding: 0.2em 0;
}


/**
  * 11.5 Tietopankki pages
  */

/* Grid for liikeohje, tietopankki and kouluttaja items */

.grid-item {
    display: inline-block;
    margin: 8px;
    vertical-align: top;
    max-width: 130px;
}

/* Opacity change on hover */
.grid-item:hover img {
    opacity: 0.9;
}

.grid-item img {
    border: 1px solid #efefef;
}
.grid-desc {
    color: #000;
    display: block;
    word-wrap: break-word;
    max-width: 175px;
    margin-top: 0.3em;
    margin-left: 0.1em;
    font-size: 0.8em;
    line-height: 1.2em;
}
/* to counter WordPress Auto P */
.grid-item p {
    margin: 0;
}

.grid-container a:hover {
    text-decoration: none;
}


/* MEDIA QUERIES: Different grid item widths depending on resolution */
@media (min-width: 380px) {
    .grid-item {
    max-width: 150px;
    }
}
@media (min-width: 460px) {
    .grid-item {
    max-width: 175px;
    }
}
@media (min-width: 540px) {
    .grid-item {
    max-width: 150px;
    }
}
@media (min-width: 630px) {
    .grid-item {
    max-width: 175px;
    }
}
@media (min-width: 688px) {
    .grid-item {
    max-width: 155px;
    }
}
@media (min-width: 764px) {
    .grid-item {
    max-width: 175px;
    }
}
@media (min-width: 840px) {
    .grid-item {
    max-width: 135px;
    }
}
@media (min-width: 940px) {
    .grid-item {
    max-width: 155px;
    }
}
@media (min-width: 1040px) {
    .grid-item {
    max-width: 175px;
    }
}


/* Embedded videos */
.liikeohjevideo-container {
    max-width: 450px;
    margin: 1em 0;
}

/* Terveysliikunta page */
#terveysliikunta-main {
    float: left;
    margin-right: 3em;
}

#terveysliikunta-sanna {
    float: left;
    max-width: 200px;
}
#terveysliikunta-sanna #sanna-nimi {
    font-weight: 700;
}
#terveysliikunta-sanna p {
    margin: 1em 0;
}


/**
  * 11.6 - Koulutuskalenteri event post
  */

.single-event-stat {
    
}

.single-event-course-old {
    padding: 0.4em 0;
    opacity: 0.8;
    font-weight: 700;
}

.single-event-stat-head {
    font-weight: 700;
}


.single-event-course-full {
    padding: 0.4em 0;
    color: #CC0303;
}

.single-event-ilmotext {
    padding: 0.5em 0;
    text-transform: uppercase;
    font-size: 1.2em;
}

/**
  * 11.7 - Yritys page
  */

#kouluttaja-list {
    list-style: none;
}
#kouluttaja-list-wrapper {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
}
@media (min-width: 460px) and (max-width: 687px) {
    #kouluttaja-list-wrapper {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3; 
    }
}
@media (min-width: 840px) {
    #kouluttaja-list-wrapper {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3; 
    }
}
.kouluttaja-wrapper img {
    max-width: 35%;
}

.kouluttaja-nimi {
    color: #000;
    margin-bottom: 0.1em;
    margin-top: 0.1em;
}
.kouluttaja-desc {
    color: #000;
    font-size: 0.8em;
    line-height: 1.2em;
    display: block;
    word-wrap: break-word;
    max-width: 175px;
    margin-bottom: 0.5em;
}

/* Verkkokaupan poistomyynti */
#poistomyynti .grid-item {
    margin-top: 16px;
    margin-bottom: 16px;
}
#poistomyynti .poistohinta {
    color: #FF0000;
    font-weight: 700;
}

 /**
  * 11.8 - Liikeohjeet pages
  */

#physiotools-tilaaminen {
    /*max-width: 18em;*/
	width: 100%;
    margin-bottom: 1em;
    border-radius: 5px 5px 5px 5px;
    background-color: #433a7d;
    /* Gradient color */ 
    background-image: -webkit-gradient(linear, left top, left bottom, from(#5e53aa), to(#433a7d));
    background-image: -webkit-linear-gradient(top, #5e53aa, #433a7d);
    background-image: -moz-linear-gradient(top, #5e53aa, #433a7d);
    background-image: -ms-linear-gradient(top, #5e53aa, #433a7d);
    background-image: -o-linear-gradient(top, #5e53aa, #433a7d);
    background-image: linear-gradient(top, #5e53aa, #433a7d);
    clear: both;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#5e53aa, endColorstr=#433a7d);
    text-align: center;
}
#pt-hinta, #pt-kokeile {
    /*text-align: center;*/
}
#pt-hinta p {
    font-weight: 700;
    font-size: 1.25em;
    margin-bottom: 0.4rem;
}
#pt-kokeile p {
    font-size: 0.9em;
    margin-bottom: 0.6rem;
}


 /**
  * 11.9 - Tooltip for forms
  */

/* Tooltip container */
.tooltip {
    position: relative;
    font-family: "Myriad Pro", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 0.8em;
    color: #CC0303;
}

.tooltip:after {
    content: " ";
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    -webkit-transition: 0.4s 0.4s;
    transition: 0.4s 0.4s;
    
    width: 170px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    
    font-family: 'Lato', sans-serif;
    font-size: 0.8rem;
    line-height: 1.1rem;
 
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
    bottom: 130%;
    left: 50%;
    margin-left: -30px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

/* Arrow */
.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 100%; /* At the bottom of the tooltip */
    left: 20%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
}

/* Koulutus täynnä tekstin muotoilu (ei liity tooltippiin) */
#course-full-text {
	padding-left: 30px;
    font-family: "Myriad Pro", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 0.9em;
	line-height: 1.3em;
    color: #CC0303;
}

/* ==========================================================================
12.0 - Footer
========================================================================== */

.lower-main-container {
    background-color: #fafafa;
    border: 1px solid #DDDDDD;
    border-radius: 0 0 5px 5px;
    padding: 0 1em;
    padding-top: 0.8em;
    position: relative; /* for positioning of external footer */
}
.footer-col {
    /*margin: 0 auto;*/
    text-align: center;
}
.footer-col ul {
    list-style: none;
    margin-bottom: 0.2em;
}
.footer-col ul li a {
    line-height: 1.5em;
    font-size: 1em;
    display: block;
    padding: 0;
}
.footer-col ul #ptools {
    margin-top: 0.6em;
}
.footer-col h2 {
    margin: 0.4em 0 0.2em 0;
    font-size: 1.1em;
    font-weight: 700;
}

#site-footer {
	padding: 0.3em 0 2em 0;
	position: absolute;
	top: 100%;
	left: 0;
    width: 100%;
    text-align: center;
}

#footer-text {
	font-size: 0.7em;
	color: #888;
	margin: 0 0 0 0.4em;
	word-wrap: break-word;
}

#footer-fb-logo img {
    border-radius: 3px;
    margin-left: 7px;
    max-width: 15px;
}

/* Media query: swithing to 3-column view (~688px) */
@media (min-width: 43em) {
    .lower-main-container {
        padding-top: 0;
    }
    .footer-col {
        text-align: left;
    }
    .footer-col ul li a {
        line-height: 1em;
        font-size: 0.9em;
        padding: 0.2em 0;
    }
    .footer-col h2 {
        font-size: 0.9em;
    }
    .footer-col .footer-text {
        font-size: 0.8em;
    }
    
    /* Right-align text in footer */
    #site-footer {
        text-align: right;
    }
}

  
/* ==========================================================================
13.0 - Spacing
========================================================================== */

 button,
.button {
	margin-bottom: 0.625rem; }
input,
textarea,
select,
fieldset {
	margin-bottom: 0.625rem; }
pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {
    margin-top: 0;
	margin-bottom: 1rem;
}
 

/* ==========================================================================
14.0 - Utilities
========================================================================== */

 .u-full-width {
	width: 100%;
	box-sizing: border-box;
 }
.u-max-full-width {
	max-width: 100%;
	box-sizing: border-box;
 }
.u-pull-right {
	float: right;
 }
.u-pull-left {
	float: left;
 }
 
 /*
 * Hide visually and from screen readers
 */

.hidden {
    display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}
  

/* ==========================================================================
15.0 - Clearing
========================================================================== */
 
 /* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf {
	content: "";
	display: table;
	clear: both;
}
 

/* ==========================================================================
16.0 - Media queries
========================================================================== */

 /*
 * Does the same thing as <meta name="viewport" content="width=device-width">,
 * but in the future W3C standard way. -ms- prefix is required for IE10+ to
 * render responsive styling in Windows 8 "snapped" views; IE10+ does not honor
 * the meta tag. See https://core.trac.wordpress.org/ticket/25888.
 */
@-ms-viewport {
	width: device-width;
}

@viewport {
	width: device-width;
}

/* Note: Media queries are created near the relevant code. */