/*
Theme Name: PEI HR Toolkit Theme
Description: Custom designed theme specially for PEI HR Toolkit
Version: 0.9
Author: Rob Williams for Results Marketing <hello@webdept.ca>
Tags: custom template
*/

/* Default Styles */

html, body {
    width:                  100%;
    height:                 100%;
    font-family:            'Source Sans Pro', 'Arial', sans-serif;
    line-height:            1.4em;
    background:             white;
}

p { padding: 0 0 1em 0; }
.bold { font-weight: bold; }
.italic { font-style: italic; }
.textleft { text-align: left; }
.textcenter { text-align: center; }
.textright { text-align: right; }
.clear { clear: both; }
.floatleft { float: left; }
.floatright { float: right; }

img.centered {
	display: block;
	margin: 0 auto;
}

img.alignright {
	padding: 4px;
	margin: 0 0 1em 1em;
	display: inline;
}

img.alignleft {
	display: inline;
}

img.aligncenter {
    display: block;
}

.alignright { float: right; }
.alignleft { float: left; }
.aligncenter { margin: 0 auto; }


/* Basic styles */

a { text-decoration: none; color: #1A2857; font-weight: bold; }
a:hover { color: #81BD41; }

h1 {
}

h2 { font-size: 2em; font-weight: 600; color: #1a2857; margin: 0 0 0.75em; line-height: 1.4em; }
.introduction { margin-bottom: 2em; }
h2, .introduction { padding: 0.5em 0; position: relative; }
h2:after, .introduction:after { content: ''; position: absolute; left: 0; bottom: -0.25em; height: 3px; width: 50px; background: #81bd41; }


h3 {
}

h4 {
}

blockquote { margin: 0 10%; font-weight: bold; font-size: 1.3em; font-style: italic; }

.hrtoolkit_logo_green { fill:#81BD41; }
.hrtoolkit_logo_white { fill:#FFFFFF; }
.hrtoolkit_logo_blue  { fill:#1A2857; }
.arrow_colour { fill: #D1D3D4; }

header { position: relative; height: 150px; }
header .logo_container_outer { width: 95%; max-width: 1600px; margin: 0 auto; position: relative; }
header .logo_container_inner { background: white; padding: 0.25em 0.5em; box-shadow: #aaa 0 0 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; position: absolute; z-index: 15; }
header .logo svg { height: 150px; }
header nav { position: absolute; bottom: 0; left: 0; z-index: 10; width: 100%; background: #1d2758; }
header nav ul { text-align: right; width: 95%; max-width: 1600px; margin: 0 auto; }
header nav ul li { display: inline-block; padding: 0.5em 1em; }
header nav ul li:last-child { padding-right: 0; }
header nav ul li a { text-transform: uppercase; color: white; }
header nav ul li.current-menu-item a { color: #81bd41; }

header .translate { float: right; margin: 2em 0 1em; }
header .translate:after { content: ''; clear: both; display: table; }
header .translate a { padding: 0 0 0 0.5em; }
header .translate a:first-child { border-right: 1px #1a2857 solid; padding-right: 0.7em; }

header form { clear: both; text-align: right; position: relative; }
header form input[type="text"] { border: 1px #aaa solid; padding: 5px 6em 5px 5px; font-size: 1.05em; background: #ccc; width: 14em; border-radius: 5px; }
header form input[type="image"] { position: absolute; right: 3px; top: 8px; z-index: 5; }

.header_slider { width: 100%; position: relative; overflow: hidden; margin-bottom: 2em; }
.header_slider .image_text { position: absolute; left: 0; bottom: 2em; z-index: 200000; white-space: nowrap; width: 100%; }
.header_slider .image_text h1 { width: 95%; max-width: 1600px; margin: 0 auto; line-height: 1em; font-size: 4em; color: #1a2857; font-weight: 600; letter-spacing: -0.02em; text-transform: uppercase; }
.header_slider .image_text h1 span { color: #81bd41; font-weight: bold; }
.header_slider .image_text h2 { width: 95%; max-width: 1600px; margin: 0 auto; line-height: 1em; font-size: 2.75em; color: #1a2857; font-weight: 600; font-style: italic; padding: 0.4em 0 0 0; letter-spacing: -0.02em; text-transform: uppercase; }
.header_slider .image_text h2:after { display: none; }
.header_slider .placeholder { width: 100%; height: auto; }

.partners { list-style: none outside; text-align: left; display: inline-block; width: 64%; vertical-align: top; }
.partners li { display: inline-block; padding: 1em; }

footer { background: #1d2758; color: white; text-align: center; padding: 1em 0; margin-top: 1em; }
footer a { display: inline-block; padding: 0.25em 1.5em; border: 2px white solid; background: white; border-radius: 5px; color: #1d2758; transition: all 0.5s; }
footer p:last-child { padding-bottom: 0; }
footer a:hover { background: #1d2758; color: white; }

main { width: 95%; max-width: 1600px; margin: 0 auto; }

.recent_posts { list-style: none outside; }
.recent_posts li { display: inline-block; width: 32%; margin: 0 1% 0.5em 0; vertical-align: top; }
.recent_posts li p { font-size: 1em; padding: 0; font-weight: normal; }
.recent_posts li .the_date { font-size: 0.8em; text-transform: uppercase; }
.recent_posts li .more { font-size: 0.8em; }

.ctf { width: 33%; display: inline-block; vertical-align: top; }

.strong-view.default .testimonial { border: none !important; }
.strong-view.default .testimonial-image img { border-radius: 500px; width: 150px; height: 150px; }
.strong-view.default .testimonial-heading { color: transparent; background-position: 130px center !important; }
.strong-view.default .testimonial-content { font-family: 'Lora', serif; font-style: italic; }
.strong-view.default .testimonial-client { font-family: 'Lora', serif; font-weight: bold; font-size: 0.8em; text-align: left !important; }

.resources { list-style: none outside; }
.resources li { display: inline-block; vertical-align: bottom; width: 30%; margin: 0.5em 1% 0.5em 0; padding: 1%; position: relative;
    background: rgb(216,216,216);
    background: -moz-linear-gradient(left, rgba(216,216,216,1) 0%, rgba(255,255,255,1) 90%);
    background: -webkit-linear-gradient(left, rgba(216,216,216,1) 0%,rgba(255,255,255,1) 90%);
    background: linear-gradient(to right, rgba(216,216,216,1) 0%,rgba(255,255,255,1) 90%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d8d8d8', endColorstr='#ffffff',GradientType=1 );
}
.resources li:after { content: ''; clear: both; display: table; }

.resources li a { font-weight: 600; display: inline-block; font-size: 1.25em; width: calc( 100% - 75px ); }
.resources li svg { height: 50px; margin-right: 1em; vertical-align: bottom; }
.resources .toolbox_image { fill: #ffffff; }
.resources li:hover a { color: #1a2857; }
.resources li:hover .toolbox_image { fill: #1a2857; }

.hero_image img, .fp_section p a img { width: 100% !important; height: auto !important; }
main p img { max-width: 100% !important; height: auto !important; }

.resource-child { list-style: none outside; }
.resource-child li { display: inline-block; width: 49%; margin: 0 0 1em 0; position: relative; background: #1A2857; }
.resource-child li:nth-child(odd) { margin-right: 0.75%; }
.resource-child li img { opacity: 0.7; width: 100%; height: auto; padding: 0; margin: 0 0 -5px 0; }
.resource-child li svg { width: 75px; position: absolute; right: 20px; bottom: 20px; }
.resource-child li h3 { font-size: 2.5em; position: absolute; left: 20px; bottom: 20px; width: calc( 100% - 150px ); text-shadow: #444 0 0 10px, #000 0 0 5px; line-height: 1em; }
.resource-child li a { color: white; }
.resource-child li svg .toolbox_image { fill: #ffffff; }
.resource-child li:hover a { color: #81BD41; }
.resource-child li:hover svg .toolbox_image { fill: #81BD41; }

/*.all_resources_parent { width: fit-content; margin: 0 auto; }*/

.full { text-align: center; }
.half { display: inline-block; width: fit-content; padding: 0 1%; vertical-align: top; }
.half h2 { text-align: left; }
.list_of_documents { list-style: none outside; text-align: left; }
.list_of_documents li { padding-bottom: 0.5em; }

.all_resources { list-style: none outside; padding-left: 2em; text-align: left; }
.all_resources li { padding: 0.5em 1em; margin: 0.5em 0; line-height: 30px; }
.all_resources li ul li:last-child { margin-bottom: -0.5em; }
.all_resources_parent > li { margin-bottom: 1em; }
.all_resources_parent > li a { font-size: 1.2em; }
.all_resources_parent > li > a { font-size: 1.5em; }
.all_resources svg { height: 30px; width: auto; padding-right: 1em; fill: #1A2857; position: relative; top: 5px; }
.all_resources_parent > li > svg { fill: #81bd41; }

.main_content { width: calc( 100% - 230px ); display: inline-block; vertical-align: top; }

.main_content ul, .main_content ol { padding: 0 0 0 2em; list-style-position: outside; }
.main_content ul li, .main_content ol li { padding-bottom: 1em; }
.main_content li ul, .main_content li ol { padding-top: 1em; }

.main_content table { width: 100%; border-collapse: collapse; }
.main_content table td { vertical-align: top; border-top: 1px #ddd solid; border-bottom: 1px #ddd solid; padding: 1em 0; }
.main_content table tr td:first-child { width: 20%; }
.main_content table ul li:last-child, .main_content table ol li:last-child { padding-bottom: 0; }

aside { width: 200px; margin-left: 25px; display: inline-block; vertical-align: top; }
aside h3 { position: relative; padding-top: 3em; }
aside h3 svg { width: 100%; }
aside h3 svg .toolbox_image { fill: #1a2857; }
aside h3 span { font-size: 1.5em; font-weight: 600; text-align: center; position: absolute; bottom: 15px; left: 0; color: white; text-transform: uppercase; }
aside .arrow svg { width: 100%; height: auto; }

aside .link { text-align: center; border-radius: 5px; padding: 0.5em; margin-bottom: 0.5em; }
aside .link a { font-size: 1.1em; color: white; text-transform: uppercase; font-weight: 600; }
aside .link img { width: 100%; height: auto !important; }
aside .document_link { background: #81bd41; }
aside .document_link:hover { background: #5e8b32; }
aside .external_link { background: #1a2857; }
aside .external_link:hover { background: #2f459f; }
aside .all_resources_link { background: #999999; }
aside .all_resources_link span { text-align: left; display: inline-block; vertical-align: bottom; }
aside .all_resources_link:hover { background: #bbbbbb; }
aside .all_resources_link svg { width: 50px; height: auto; display: inline-block; vertical-align: bottom; padding-right: 0.5em; }
aside .all_resources_link svg .toolbox_image { fill: #ffffff; }

.blog_post { padding: 0 0 2em; border-bottom: 1px #ddd solid; }

.blog_list { width: 75%; margin-right: 1%; display: inline-block; vertical-align: top; }
.year_selector { border-bottom: 1px #1a2857 solid; }
.year_selector li { display: inline-block; padding: 0.25em 0.5em; margin-left: 0.25em; border-top-left-radius: 5px; border-top-right-radius: 5px;
    background: rgb(238,238,238);
    background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(255,255,255,1) 100%);
    background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(255,255,255,1) 100%);
    background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#ffffff',GradientType=0 );
}
.year_selector li.currently_selected { background: #1a2857; }
.year_selector li.currently_selected a { color: white; }

.post_date { float: left; text-align: center; border: 1px #ddd solid; margin: 0 1em 1em 0; width: 75px; }
.post_date:after { content:''; clear: both; display: table; }
.post_date span { display: block; text-transform: uppercase; }
.post_date_month, .post_date_year { background: #1a2857; color: white; }
.post_date_year { margin-top: -3px; }
.post_date_day { font-size: 2.5em; line-height: 1em; border: 3px #1a2857 solid; }
.hr_hidden { display: none; }

.blog_sidebar { width: 21%; display: inline-block; vertical-align: top; }
.blog_sidebar h4 { font-size: 1.3em; font-weight: 600; color: #1a2857; margin: 1em 0 0.75em; line-height: 1.4em; padding: 0.5em 0; position: relative; }
.blog_sidebar h4:after { content: ''; position: absolute; left: 0; bottom: -0.25em; height: 3px; width: 50px; background: #81bd41; }

#mobile_menu_icon { display: none; }



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

    .header_slider .image_text h1 { font-size: 3em; }
    .resources li { width: 46%; }

}

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

    header { height: 110px; z-index: 300000; }
    header .logo svg { height: 100px; }
    header form { clear: none; float: right; text-align: right; position: relative; margin: 1.7em 1em 0 0; }
    header form input[type="text"] { width: 8em; }
    header nav ul li { display: inline-block; padding: 0.25em 1em; font-size: 0.8em; }
    .header_slider .image_text { bottom: 1em; }
    .header_slider .image_text h1 { font-size: 2.3em; }
    .header_slider .image_text h2 { font-size: 1.6em; }
    .blog_list { font-size: 0.8em; width: 100%; }
    .blog_sidebar { display: none; }

    .resource-child li svg { width: 50px; }
    .resource-child li h3 { font-size: 1.25em; width: calc( 100% - 100px ); }

}

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

    header nav { text-align: right; }
    header nav ul { position: absolute; top: 100%; left: 0; width: 100%; background: #1a2857; z-index: 300000; display: none; }
    header nav ul li { width: 100%; display: block; text-align: center; padding: 0.25em 0; border-bottom: 1px white solid; }
    #mobile_menu_icon { display: block; color: white; }
    #mobile_menu_icon .dashicons { height: 32px !important; width: 32px !important; font-size: 32px !important; }
    .image_text { bottom: 0.5em; }
    .header_slider .image_text h1 { font-size: 1.5em; }
    .header_slider .image_text h2 { font-size: 1.2em; }
    header form input[type="text"] { width: 5em; }

    .recent_posts { width: 100%; }
    .recent_posts li { width: 100%; padding: 0.5em 0; border-bottom: 1px #ddd solid; }
    .ctf { width: 100%; margin-top: 0.5em; }

    .main_content { width: 100%; display: block; }
    aside { width: 100%; display: block; margin: 1em 0 0 0; }
    aside h3 { text-align: center; }
    aside h3 svg { width: 50%; position: relative; top: -1em; display: block; margin: 0 auto; }
    aside h3 span { color: #1a2857; position: relative; left: 0; top: 0; }
    aside .arrow { text-align: center; }
    aside .arrow svg { width: 50%; }
    .all_resources_link a span br { display: none; }
    .resources li { width: 100%; margin: 0.5em 0; }

    .resource-child li { width: 100%; margin: 0.5em 0; }
    .resource-child li svg { width: 50px; }
    .resource-child li h3 { font-size: 1.25em; width: calc( 100% - 100px ); }

    .half { width: 100%; }

}