/*==========================================================================
GLOBAL
========================================================================== */

html, body {width: 100%; max-width: 100%; overflow-x: hidden;} 
body { margin: 0; padding: 0; position: relative; font-size: 1em; color: #262626; font-family: brandon-grotesque, sans-serif; }
p {line-height: 1.4em; margin: 15px 0;  width: 100%; overflow: hidden;}
hr {border: 0; border-top: 1px solid #CCCCCC; display: block; height: 1px; margin:0; padding: 0; clear:both;}
h1, h2, h3, h4, h5, h6 {
font-size: 50px;
  font-size: 3.125rem;
  line-height: 50px;
  line-height: 3.125rem;
  font-family: rockwell, sans-serif;
  color: #fff;
  font-weight: 400;}
}
h1,.h1 { font-size: 5.5vw; text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3); }
h2,.h2 { font-size: 4em; }
h3,.h3 { font-size: 3em; }
h4,.h4 { font-size: 2em; }fmargin
h5,.h5 { font-size: 1.5em; }
h6,.h6 { font-size: 1.032em; letter-spacing: .02em; }

a { color: #29527a; text-decoration: none; }
a:hover{color:#29527a; text-decoration: none;}

ul {margin:1.5em 0; }
ul li {margin:1em 0; line-height: 1.4em;}

.header-subject {color:#29527a;}
.blue {color:#29527a;}
.white {color:#fff;}
.light-gray {color:#e5e5e5;}
.neon-green {color:#b4e760;}

.bold{font-weight: 700;}
.normal {font-weight: 400;}
.thin {font-weight:300;}
.center {text-align: center;}
.italic {font-style: italic;}
.small {font-size: 0.929em;}
.xsmall {font-size: 0.70em}
.xxsmall {font-size: 0.65em}
.large {font-size: 1.2em;}
.xlarge {font-size: 1.3em;}
.huge {font-size:1.4em;}
.lowercase {text-transform: initial;}

.cursive {font-family: brandon-grotesque, sans-serif;}
.sans-serif {font-family: brandon-grotesque, sans-serif;}
.slab {font-family: brandon-grotesque, sans-serif; color: #fff; font font-weight: 700;}

.zero-top {margin-top: 0;}
.zero-bottom {margin-bottom: 0;}

.pull-left {float:left;}
.pull-right {float:right;}
.centered {text-align: center;}
.clearfix:after { content: ""; display: table; clear: both;}

/*==========================================================================
HEADER
========================================================================== */

.header {padding:20px 0;text-align: center; background-color: #ffffff; width: 100%; height: 100%; }
.logo {background:url(../img/itafos.png) no-repeat transparent; background-size: 100%; width: 245px; height: 70px; display: inline-block;}

/*==========================================================================
STAGE
========================================================================== */

.stage {background: #333c42; width: 100%; padding: 40px 0; color: #fff; position: relative; text-shadow: 0px 0px 25px rgb(0 0 0 / 60%); }
.stage-photo {background: url(../img/nutrien-bg11.jpg) no-repeat top center; background-size: cover; position: absolute; width: 100%; height: 100%; top: 0;}
.stage-facts {background: #29527a url(../img/blue-mts.jpg) no-repeat center center; background-size: cover; width: 100%; padding: 1px 20px 60px; color: #fff;}
.stage-facts h3 {color:#b4e760; margin-bottom: 0; padding-top: 15px}
.stage-facts p {font-family: brandon-grotesque, sans-serif; text-transform: uppercase; letter-spacing: .05em; margin-top: 0;}

.stage-thankyou h3 {color:#b4e760; margin-bottom: 0; padding-top: 15px}
.stage-thankyou p {font-family: brandon-grotesque, sans-serif; text-transform: uppercase; letter-spacing: .05em; margin-top: 0;}


/*==========================================================================
COMMENT BOXES
========================================================================== */

form#helps {margin: -10% 0 0 0; background-color: #fff; padding: 40px;}
form#helps h2 {margin-bottom: 0;}
.comment-box p, .input-box p {font-family: Arial, sans-serif; color:#000000; font-weight: 200; font-size: 1.125em; padding: 0px 0;}

select, textarea, input{
    color: #666;
    display: inline-block;
    font-size: 14px;
    vertical-align: middle;
    background-color: #EEE;
    border: none;
    transition: background-color 0.2s linear 0s, box-shadow 0.2s linear 0s;
    width: 100%;
    padding: 20px 20px 19px;
    border-radius: 2px;
}
textarea {width: 100%;}
select:focus, textarea:focus, input:focus {

	outline: 0;
	outline: thin dotted \9;
	background: #F5F5F5;
}

input.btn-submit-small {width: 23%;}
input#city {width: 100%; }
input#zip {width: 100%; }
input#email {width: 100%;}

.btn {
	width: auto;
	border: none;
	border-radius:2px;
	color: #fff;
	font-weight: 900;
	background-color: #21602b;
	cursor: pointer;
	display: inline-block;
	font-size: 50px;
  font-size: 3.125rem;
  line-height: 50px;
  line-height: 3.125rem;
  font-family: rockwell, sans-serif;
  color: #fff;
  font-weight: 400;
}
.btn:hover {opacity: .7;}

.btn-small {font-family:'Roboto Slab','Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 400; padding:15px 24px 14px; margin-left:auto; margin-right:auto; display: block; margin-top:50px;}

.submit-box {margin: 40px 0 80px; }
.btn-submit { font-size: 3em; padding: 25px 80px 24px;}

/*==========================================================================
ACCORDION
========================================================================== */

.bg-accordion {background: #29527a url(../img/blue-mts.jpg) no-repeat top center; background-size: cover; width: 100%; padding: 5% 0 5%;}
.accordion {
	background-color: #b4e760;
	color: #29527a;
	opacity: .9;
	cursor: pointer;
	padding: 18px;
	width: 100%;
	text-align: center;
	border: none;
	outline: none;
	transition: 0.4s;
	font-family: 'Roboto Slab'; text-transform: uppercase; 
	font-weight: bold;
	font-size: 1.125em;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}
.active, .accordion:hover {opacity: 1;}
.panel {
	background: rgba(255, 255, 255, .9);
	padding: 0;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}
.accordian-content {padding:40px;}


/*==========================================================================
SUPPORTERS SLIDER
========================================================================== */

.supporters-wrap {padding: 10% 0 10%; background-color: #f2f2f2;}
.supporters-slider {margin-top: 30px;}
.supporters-slider div {text-align: center; color:#29527a; }
.supporters-slider img {width: 150px; height: 150px; border-radius: 76px;  display: block; margin-left: auto; margin-right: auto;}
.supporters-slider h5 {font-family:'Roboto Slab','Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 400; margin: 20px 0 5px; font-size:1.25em;}
.supporters-slider p {margin: 0; font-size: .7em; text-transform: uppercase; letter-spacing: .08em; }

.slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; }
.slick-list:focus { outline: none; }
.slick-list.dragging { cursor: pointer; cursor: hand; }
.slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
.slick-track { position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto; }
.slick-track:before, .slick-track:after { display: table; content: ''; }
.slick-track:after { clear: both; }
.slick-loading .slick-track { visibility: hidden; }
.slick-slide { display: none; float: left; height: 100%; min-height: 1px; }
[dir='rtl'] .slick-slide { float: right; }
.slick-slide img { display: block; }
.slick-slide.slick-loading img { display: none; }
.slick-slide.dragging img { pointer-events: none; }
.slick-initialized .slick-slide { display: block; }
.slick-loading .slick-slide { visibility: hidden; }
.slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; }
.slick-arrow.slick-hidden { display: none; }

/* Slider */
.slick-loading .slick-list { background: #fff url('./ajax-loader.gif') center center no-repeat; }

/* Arrows */
.slick-prev, .slick-next { font-size: 0; line-height: 0; position: absolute; top: 50%; display: block; width: 20px; height: 20px; padding: 0; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); cursor: pointer; color: transparent; border: none; outline: none; background: transparent; }
.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { color: transparent; outline: none; background: transparent; }
.slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before { opacity: 1; }
.slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity: .25; }
.slick-prev:before, .slick-next:before { font-family: 'slick'; font-size: 20px; line-height: 1; opacity: .75; color: white; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.slick-prev { left: -25px; }
[dir='rtl'] .slick-prev { right: -25px; left: auto; }
.slick-prev:before { content: '←'; }
[dir='rtl'] .slick-prev:before { content: '→'; }
.slick-next { right: -25px; }
[dir='rtl'] .slick-next { right: auto; left: -25px; }
.slick-next:before { content: '→'; }
[dir='rtl'] .slick-next:before { content: '←'; }

/* Dots */
.slick-dotted.slick-slider {margin-bottom: 30px; }
.slick-dots { position: absolute; bottom: -60px; display: block; width: 100%; padding: 0; margin: 0; list-style: none; text-align: center; }
.slick-dots li { position: relative; display: inline-block; width: 20px; height: 20px; margin: 0 5px; padding: 0; cursor: pointer; }
.slick-dots li button { font-size: 0; line-height: 0; display: block; width: 20px; height: 20px; padding: 5px; cursor: pointer; color: transparent; border: 0; outline: none; background: transparent; }
.slick-dots li button:hover, .slick-dots li button:focus { outline: none; }
.slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 1; }
.slick-dots li button:before { font-family: 'slick'; font-size: 16px; line-height: 20px; position: absolute; top: 0; left: 0; width: 20px; height: 20px; content: '•'; text-align: center; opacity: .25; color: black; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.slick-dots li.slick-active button:before { opacity: .75; color: black; }


/*==========================================================================
FOOTER
========================================================================== */

.footer {background-color: #87231e; height: 60px; padding-top: 10px; text-align: center; font-size: 0.75em;}
.foot-logo {background:url(../img/countmein.png) no-repeat transparent; background-size: 100%; width: 300px; height: 35px; display: inline-block; margin-top: 30px;}

/*==========================================================================
MEDIA QUERIES - TABLET - 768px to 991px
========================================================================== */

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

h1,.h1 {font-size:3em;}
.stage {padding: 20% 0;}
.comment-box {margin-top: 80px;}
.bg-accordion {padding-left:20px; padding-right:20px;}
.accordian-content {padding:20px;}
.comment-box {margin-top: 50px;}
}

/*==========================================================================
MEDIA QUERIES - MOBILE PHONE - < 768px
========================================================================== */

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

h1,.h1 {font-size:2em;}
h2,.h2 {font-size:3em;}
h3,.h3 {font-size:2em;}
h4,.h4 {font-size:1.5em;}

.btn-submit { font-size: 1.2em; font-size: 9vw; padding: 18px 30px 17px; max-width: 100%; display: inline-block; }

}