/*
Theme Name: 	SJR2020
Theme URI: 		http://viewportindustries.com/products/starkers
Description: 	based on the starkers theme
Version: 		4.0
*/

/*
===========================
CONTENTS:

01 Sensible defaults
02 Typography
03 Media queries 
===========================
*/

/* ---------------------------------------------------------------------------------------------------------- 
01 Sensible defaults ----------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

@import "css/reset.css";

div,
article,
section,
header,
footer,
nav
{ position:relative; /* For absolutely positioning elements within containers (add more to the list if need be) */ }
.group:after 		{ display:block; height:0; clear:both; content:"."; visibility:hidden; /* For clearing */ }
body 				{ background:#fff; /* Don't forget to style your body to avoid user overrides */  }


/* ---------------------------------------------------------------------------------------------------------- 
02 Typography -----------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
/*

14 / 16	= 		0.875em 		(14px equivalent)
16 / 16	= 		1em 			(16px equivalent)
18 / 16 = 		1.125em 		(18px equivalent)
21 / 16 = 		1.3125em 		(21px equivalent)
24 / 16 = 		1.5em 			(24px equivalent)
30 / 16 = 		1.875em 		(30px equivalent)

*/

body,
input,
textarea 			{ /* We strongly recommend you declare font-weight using numerical values, but check to see which weights you're exporting first */ }

h1, 
h2, 
h3, 
h4, 
h5, 
h6 					{ font-weight:bold; /* This helps to identify headings at the initial build stage, but you should write something more precise later on */ }

/* ---------------------------------------------------------------------------------------------------------- 
03 Media queries (using a mobile-first approach) ------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */




/* standard layout*/



body 
{
padding:0px;margin:0px;background-color:#ffffff;border:0px;margin:0px;font-family: 'Nunito', sans-serif;font-weight:400;
}

.clear40 {clear:both;height:40px;}

.header-topbar-wrap {width:100%;margin:0px auto; clear:both;border-bottom:1px solid #dbdbdb;}

.header-topbar {width:1160px;margin:0px auto;height:50px;clear:both;}
.header-topbar p {font-size:16px;color:#282829;line-height:50px;font-weight:500;}
.header-topbar a {color:#282829;text-decoration:none;}
.header-topbar a:hover {color:#282829;text-decoration:underline;}

.header-topbar-col1 {width:500px;float:left;}
.header-topbar-col2 {width:500px;float:left;text-align:right;}
.header-topbar-col3 {width:150px;float:left;text-align:right;padding-top:10px;}

.page-wrap {width:1160px;margin:0px auto; clear:both;}

.header-area {background-color:#029b00;clear:both;margin:0px;text-align:center;}
.header-row {padding-top:40px;padding-bottom:40px;clear:both;width:100%;position:relative;}

.header-logo {width:100%;text-align:center !important;}

.top-navigation {height:60px;background-color:#222222;width:100%}

.top-navigation-inner {width:1160px;margin:auto;}

.full-width-line {border-top:1px solid #cdc7bc;height:10px;clear:both;width:100%;}


.page-banner {}


.home-content-wrap1 {background-color:#ffffff;width:100%;}

.home-content-wrap2 {background-color:#dbdbdb;width:100%;}

.home-content-wrap3 {width:1160px;margin:auto;background-color:#ffffff;background-image: url('assets/swoosh-background.png');background-position:center top;background-repeat:no-repeat}

.home-content-wrap4 {background-color:#029b00;width:100%;}

.home-strapline {padding:30px;}

.home-strapline h1 {text-align:center;font-size:36px;line-height:46px;font-weight:normal;color:#029b00;margin-bottom:20px;padding-left:40px;padding-right:40px;}

.home-strapline p {font-size:20px;color:#282829;margin-bottom:20px;text-align:center;line-height:28px;}


.home-panel {float:left;width:340px;margin-right:35px;}
.home-panel-last {margin-right:0px;}

.content-area {padding-top:20px;padding-bottom:40px;}

.content-area h1 {font-size:36px;line-height:46px;font-weight:normal;color:#029b00;margin-bottom:20px;}

.content-area h2 {font-size:28px;line-height:36px;font-weight:normal;color:#282829;margin-bottom:15px;font-weight:500}

.content-area p {font-size:18px;color:#282829;margin-bottom:20px;line-height:26px;}

.content-area h3 {font-size:28px;line-height:38px;font-weight:normal;color:#dbdbdb;margin-bottom:5px;}

.content-area ul li {}

.content-area ul {list-style-type:disc}
.content-area ul li {margin-left:20px;list-style-type:disc;font-size:18px;margin-bottom:10px;}

.content-area a {color:#029b00}


.footer-wrap {width:100%;background-color:#282829;}

.footer-area {width:1160px;margin:0px auto;background-color:#282829;}

.footer-area h2 {font-size:28px;color:#ffffff;font-weight:normal;margin-bottom:5px;font-weight:400}

.footer-area p {font-size:16px;color:#ffffff;line-height:26px;margin-bottom:10px;}

.footer-area ul {list-style-type:disc}
.footer-area ul li {margin-left:20px;list-style-type:disc;font-size:16px;color:#ffffff;margin-bottom:10px;}
.footer-area ul li a{color:#ffffff;text-decoration:none;}

.footer-column-1 {width:460px;float:left;margin-left:30px;margin-right:0px;margin-top:40px;margin-bottom:40px;}
.footer-column-2 {width:220px;float:left;margin-top:40px;margin-bottom:40px;margin-left:60px;}
.footer-column-3 {width:330px;float:left;margin-left:0px;margin-right:0px;margin-top:40px;margin-bottom:40px;margin-left:30px;}


.footer-note {width:1160px;margin:0px auto;text-align:center;}

.footer-note p {padding:10px;font-size:14px;color:#282829}


.aligncenter,.alignleft,.alignright {
    display: block;
    padding: 0;
}

.aligncenter {
    float: none;
    margin: .5em auto 1em;
}

.alignright {
    float: right;
    margin: .5em 0 1em 3em;
	padding:10px;
	border:1px solid #cdc7bc;
}

.alignleft {
    float: left;
    margin: .5em 1em 1em 0;
}

.wp-caption {
    padding: 5px 0;
    border: 1px solid #555;
    background: #444;
    text-align: center;
}


.para_wrapper {
  /* The height needs to be set to a fixed value for the effect to work.
   * 100vh is the full height of the viewport. */
  height: 100vh;
  /* The scaling of the images would add a horizontal scrollbar, so disable x overflow. */
  overflow-x: hidden;
  /* Enable scrolling on the page. */
  overflow-y: auto;
  /* Set the perspective to 2px. This is essentailly the simulated distance from the viewport to transformed objects.*/
  perspective: 2px;
}

.para_section {
  /* Needed for children to be absolutely positioned relative to the parent. */
  position: relative;
  /* The height of the container. Must be set, but it doesn't really matter what the value is. */
  height: 100vh;
  
  /* For text formatting. */
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.parallax::after {
  /* Display and position the pseudo-element */
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  
  /* Move the pseudo-element back away from the camera,
   * then scale it back up to fill the viewport.
   * Because the pseudo-element is further away, it appears to move more slowly, like in real life. */
  transform: translateZ(-1px) scale(1.5);
  /* Force the background image to fill the whole element. */
  background-size: 100%;
  /* Keep the image from overlapping sibling elements. */ 
  z-index: -1;
}

/* The styling for the static div. */
.static {
  background: #ffffff;
}

.nf-form-fields-required {display:none;}

.newslist-image {float:left;width:170px;margin-top:0px;}
.newslist-details {float:left;width:900px;}
.newslist-details h2 a {font-size:24px;color:#222222;}
.newslist-details h2 {font-size:24px;color:#343434;}
.newslist-details p {font-size:18px;}
.newslist-details a {color:#029b00}

div.search_jobs {background-color:#222222}

ul.job_listings li.job_listing {
font-size: 18px;
}


.job_listing .position h3 {color:#222222 !important}