/*
Theme Name: 	JJ Theme
Theme URI: 	https://www.jimmiejohnson.com/
Description: 	Custome Theme for Jimmie Johnson
Version: 	1.2.7
Author: 	Tim and Chelsea

License:	MIT
License URI:	http://opensource.org/licenses/mit-license.php
*/

/* =============================================================================
   Jimmie Johnson Layout
   ========================================================================== */
body.fixed{
	position: fixed;
	overflow: hidden;
	width: 100vw;
	height: 100vh;
}
html.fixed{
	position: fixed;
	overflow: hidden;
	width: 100vw;
	height: 100vh;
}
.author{
	display: none;
}
.wrapper{
	max-width: 95%;
	margin: 0px auto;
}

.arrow-btn{
	font-family: Barlow;
	font-style: normal;
	font-weight: bold;
	font-size: 24px;
	line-height: 62px;
	letter-spacing: 2.48276px;
	text-transform: uppercase;
	color: #020202;
	transition: .5s;
}


.arrow-btn:after{
	content: '';
    background-position: -200px;
    width: 0px;
    height: 30px;
    display: inline-block;
    transition: .5s;
    background-size: 50%;
    background-repeat: no-repeat;
    position: relative;
    top: 4px;
}
.arrow-btn:hover:after{
	background-position: center center;
	width: 80px;
}
.arrow-btn:after{
	background-image: url("img/blue-arrow.png");
}
.arrow-btn:hover{
	color:#004990;
}

.arrow-btn.white{
	color: #FFF;
}

.arrow-btn.white:hover{
	color:#E1E533;
}

.arrow-btn.white:after{
	/*background-image: url("img/yelloww-arrow.png");*/
}

.arrow-btn.grey{
	color: #8A908D;
}

.scroll-top{
	position: fixed;
	right: 10px;
	bottom: 10px;
}
/*
.scroll-top.active{
	display: block;
}*/
.top-icon{
	background-image: url("img/back-to-top.png");
	background-size: contain;
	background-position: left center;
	background-repeat: no-repeat;
	width: 290px;
    height: 100px;
    display: block;
}


.postid-36837 .right_image_two.neg-top:nth-child(2){
	display: none !important;
}


/* =============================================================================
   Header
   ========================================================================== */
header{
	position:absolute;
	top:0px;
	width: 100%;
	z-index: 1;
	background-color: #000;
	padding: 15px 0px;
}
.logo{
	width: 100%;
	max-width: 320px;
	float: left;
	
}
.logo img{
	width: 100%;
	max-width: 320px;
}
.ham-menu{
	float: right;
    display: block;
    position: relative;
	margin-top: 15px;
	z-index: 999999;
}
/* =============================================================================
   Menu and Nav
   ========================================================================== */
.popup-menu{
	opacity: 0;
	position: fixed;
    height: 100vh;
    width: 100vw;
    /*background-image: url(img/menu-bg.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;*/
	background-color: rgba(0,0,0,.90);
    z-index: -1;
    left: 0px;
    top: -100vh;
	transition: 1s;
}

.menu-center{
	margin-top: 17%;
}

.press-image-twonter nav{
 
	}

.popup-menu .logo{
	float: none;
	margin: 40px auto;
}


.popup-menu.active{
	opacity: 1;
	z-index: 999;
	top: 0;
}


.popup-menu nav ul{
	margin: 0px;
	padding: 0px;
	width: 100%;
}

.popup-menu nav ul li{
	list-style: none;
	margin: 0px;
	padding: 0px;
	text-align: center;
}


.popup-menu nav ul li a{
	font-family: Barlow;
	font-style: normal;
	font-weight: bold;
	font-size: 64px;
	line-height: 72px;
	text-align: center;
	letter-spacing: 7px;
	text-transform: uppercase;
	color: #4A4A4A;
	transition: .2s;
}

.popup-menu nav ul li a:hover{
	font-style: italic;
	color:#979797;
}


.popup-menu nav ul li a:active{
	color:#FFF;
}


.social-icons{
	display: flex;
	width: 192px;
	margin: 50px auto 0px;
}

.jj-icon{
	width: 32px;
    height: 32px;
    background-image: url(img/social-sprite.png);
    background-size: 190px;
    display: inline-block;
    text-align: center;
    margin: 0px auto;
}

.jj-icon a{
	display: block;
	width: 100%;
	height: 100%;
}
.jj-instagram{
	background-position: 0px 0px;
}
.jj-facebook{
	background-position: -105px 0px;
}
.jj-twitter{
	background-position: 32px 0px;
}
.jj-vimeo{
	background-position: -53px 0px;
}


nav{
}

/* =============================================================================
   Nav Toggle
   ========================================================================== */

 #nav-toggle {
    position: absolute;
    left: 50%;
    top: 20%;
    height: 50px;
    width: 50px;
    cursor: pointer;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
    cursor: pointer;
    border-radius: 1px;
    height: 2px;
    width: 35px;
    background: white;
    position: absolute;
    left: 0;
    top: 50%;
    display: block;
    content:'';
}
#nav-toggle span:before {
    top: -10px;
}
#nav-toggle span:after {
    top: 10px;
}
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
    transition: all 0.5s ease-in-out;
}
#nav-toggle.active span {
    background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
    top: 0;
}
#nav-toggle.active span:before {
    transform: rotate(135deg);
}
#nav-toggle.active span:after {
    transform: rotate(-135deg);
}


.hero-slider .flickity-page-dots{
	left: 0px !important;
    bottom: 25px !important;
    text-align: left !important;
}
.hero-slider .flickity-page-dots .dot{
	width: 80px;
    height: 3px;
	border-radius: 0px;
	background-color: #FFF;
}

.hero-slider{
	height: 100vh;
	width: 100vw;
}
.hero{
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	width: 100%;
	height: 100vh;
	position: relative;
	display: flex; 
  align-items: center; 
  justify-content: center; 
  text-align: center;
}
.hero-wrapper{
	max-width: 855px;
	margin: 0px auto;
	position: relative;
}
.hero h2{
	font-family: Barlow;
	font-style: normal;
	font-weight: bold;
	font-size: 72px;
	line-height: 72px;
	text-align: center;
	letter-spacing: 7px;
	text-transform: uppercase;
	color: #FFFFFF;
}

.sub_title{
	font-family: Barlow;
	font-style: normal;
	font-weight: normal;
	font-size: 16px;
	line-height: 19px;
	text-align: center;
	letter-spacing: 12.8px;
	color: #FFFFFF;
}

.play_btn{
	top: 40px;
	width: 100px;
	height: 100px;
	background-image: url("img/play_btn.png");
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	margin: 0px auto;
	display: block;
	position: relative;
}
.jj-insta-feed{
	background-color: #FFF;
	padding: 100px 0px;
}


/* =============================================================================
   Philanthropy Section
   ========================================================================== */
	.philanthropy-section h2{
		font-family: Barlow;
		font-style: normal;
		font-weight: bold;
		font-size: 100px;
		line-height: 95px;
		text-align: center;
		letter-spacing: 6.25px;
		text-transform: uppercase;
		color: #FFFFFF;
		margin-top: -50px;
	}
.phil-banner{
	width: 100%;
	height: 490px;
	background-image: url("img/philanthropy_banner.png");
	background-size:cover;
	background-position: center center;
}


.shop-container{
	width: 100%;
	max-width: 1254px;
	margin: 0px auto;
	display: block;
	background-color:#FFF;
}


.philanthropy-section .shop-container{
	margin-top: 180px;
}

.shop-message{
	padding: 50px;
	text-align: center;
}
.shop-message h3{
	font-family: Barlow;
	font-style: normal;
	font-weight: bold;
	font-size: 24px;
	line-height: 29px;
	text-align: center;
	letter-spacing: 5.7931px;
	text-transform: uppercase;
	color: #020202;
	
}

.shop-message p{
	font-family: Barlow;
	font-style: normal;
	font-weight: normal;
	font-size: 24px;
	line-height: 32px;
	text-align: center;
	color: #020202;
}

.shop-img{
	width: 100%;
	height: 430px;
	background-image: url("img/merch_update.png");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}


.phil-blue-block{
	background-color:#38A1F2;
	padding: 40px;
}

.phil-page .shop-img{
	background-size: contain;
}
.phil-light-blue{
	background-color:#004990;
	color:#FFF !important;
	
}

.phil-light-blue .shop-message p{
	font-family: Barlow;
	font-style: normal;
	font-weight: bold;
	font-size: 24px;
	line-height: 29px;
	text-align: center;
	letter-spacing: 5.7931px;
	text-transform: uppercase;
	color: #FFFFFF;
}

.philanthropy-section.phil-page .shop-container{
	margin-top: 0px;    position: relative;
    margin-bottom: -200px;
    z-index: 1;
}
.philanthropy-section.phil-page h2{
	    margin-top: 100px;
    margin-bottom: -24px;
    z-index: 2;
    position: relative;
	
}

.phil-logo{
	width: 100%;
	height: 140px;
	background-position: center center;
	background-size: contain;
	background-repeat: no-repeat;

}
.phil-logo-wrap{
	max-width:360px;
	margin:0px auto;
	text-align: center;
	padding: 20px;
}
.phil-logo-section{
	margin: 60px auto;
}


/* =============================================================================
   News and Press Section
   ========================================================================== */
.press-news-section{
	width: 100%;
	height: 100%;
	padding: 100px 0px;
	background-color: #000;
}
.press-slider .carousel-cell{
	padding: 0px 20px;
}

.press-slider .flickity-prev-next-button{
	margin: 0px auto;
    display: block;
    left: -450px;
	top: 32px;
	background-image: url("img/next-prev-btn.png");
	background-position: center center;
	background-size: contain;
	background-repeat: no-repeat;
	background-color: black;
}


.press-slider .flickity-prev-next-button svg{
	display: none;
}

.press-slider  .flickity-prev-next-button.previous{
}
.press-slider  .flickity-prev-next-button.next{
	left: -390px;
    top: -32px;
	transform: rotate(-180deg);
}
.press-slider .flickity-button{
	position: relative;
}
	
.press-block{
  position: relative;
  display: flex; 
  align-items: center; 
  justify-content: center; 
  text-align: center;
  width: 980px;
  height:495px;
  min-width:980px;
  margin: 0px auto;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.press-block.wsj{
	background-image: url("img/wsj-article.png");
}

.press-block.racer{
	background-image:url("img/racer-article.png");
}

.press-block.si{
	background-image:url("img/si-article.png");
}

.press-block h2{
	font-family: Barlow;
	font-style: normal;
	font-weight: bold;
	font-size: 72px;
	line-height: 72px;
	text-align: center;
	letter-spacing: 7px;
	text-transform: uppercase;
	color: #FFFFFF;	
}

.press-bg-copy h2{
	font-family: Barlow;
	font-style: normal;
	font-weight: bold;
	font-size: 100px;
	line-height: 100px;
	letter-spacing: 6.25px;
	text-transform: uppercase;
	color: #D3D7D5;
	margin-bottom: -15px;
}

/* =============================================================================
   media Section
   ========================================================================== */

.media-title{
	width: 100%;
	display: block;
	position: relative;
}
.media-title h1{
	font-family: Barlow;
	font-style: normal;
	font-weight: bold;
	font-size: 100px;
	line-height: 110px;
	text-align: right;
	letter-spacing: 6.25px;
	text-transform: uppercase;
	color: #D3D7D5;
	max-width: 700px;
	margin-top: 100px;
	float: right;
}




.media-excerpt{
	padding: 50px;
	text-align: right;
	max-width: 340px;
	margin: 0px auto 60px;
}
.media-social .social-icons{
	float: right;
	margin: 0px;
}
.media-excerpt p{
	font-family: Barlow;
font-style: normal;
font-weight: normal;
font-size: 24px;
line-height: 32px;
text-align: right;
color: #FFFFFF;
}
.media-image-one{
	background-image:url("img/media-image-one.png");
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	width: 100%;
	max-width: 709px;
	height:797px; 
}

.media-image-two{
	background-image:url("img/media-image-two.png");
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	width: 100%;
	height: 664px;
	max-width: 502px;
	float: right;
	position: relative;
	right: -6%;
}


.phil-page .media-image-two{
	max-width: 260px;
	height: 200px;
    margin-top: -80px;
    margin-bottom: 80px;
}

.media-image-two.contain{
	background-size: contain;
}

h2.media-title{
	font-family: Barlow;
font-style: normal;
font-weight: bold;
font-size: 72px;
line-height: 72px;
/* or 100% */
letter-spacing: 7px;
text-transform: uppercase;
color: #FFFFFF;
	position: relative;
	max-width: 670px;
	top:-70px;
}
.sort-by{
	font-family: Barlow;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 19px;
letter-spacing: 4px;
text-transform: uppercase;
    top: -79px;
    position: relative;
color: #FFFFFF;
}


/* =============================================================================
   Latest Section
   ========================================================================== */

.latest-section .wrapper{
	max-width: 1200px;
	margin: 0px auto;
}
.latest-section h2{
	font-family: Barlow;
	font-style: normal;
	font-weight: bold;
	font-size: 100px;
	line-height: 72px;
	text-align: center;
	letter-spacing: 9.72222px;
	text-transform: uppercase;
	color: #FFFFFF;
	margin-bottom: 100px;
}

.latest-section h3{
	font-family: Barlow;
	font-style: normal;
	font-weight: bold;
	font-size: 24px;
	line-height: 29px;
	letter-spacing: 5.7931px;
	text-transform: uppercase;
	color: #FFFFFF;
	max-width: 428px;
	margin-top: 25px;
	}
.latest-section p{
	font-family: Barlow;
	font-style: normal;
	font-weight: normal;
	font-size: 16px;
	line-height: 19px;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: #8A908D;
}

.press-image-one{
	background-image:url("img/latest-news-one.png");
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	max-width: 428px;
	height: 487px;
	width: 100%;
}

.press-image-two-wrap{
	width: 100%;
	max-width: 708px;
	float: right;
	margin-bottom: 60px;
}

.press-image-two{
	background-image:url("img/latest-news-two.png");
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	max-width: 708px;
	height: 755px;
	width: 100%;
}
.latest-section .banner-img{
	background-image: url("img/latest-banner.png");
}

.banner-img{
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	height: 664px;
	width: 100%;
}
.latest-section .banner-img.media-vid{
	background-image:url("img/carvana.gif");
}

/* =============================================================================
   About Section
   ========================================================================== */

.about-section{
	background-color: #FFF;
	width: 100%;
	padding: 100px 0px 0px;
	display: block;
	position: relative;
	clear: both;
	height: 80%;
	min-height: 880px;
}

.about-content{
	float: right;
	max-width: 340px;
	padding: 100px 200px 100px 0px;
}
.about-content p{
	font-family: Barlow;
	font-style: normal;
	font-weight: normal;
	font-size: 24px;
	line-height: 32px;
	color: #020202;
}
.bg-title{
	font-family: Barlow;
	font-style: normal;
	font-weight: bold;
	font-size: 100px;
	line-height: 110px;
	letter-spacing: 6.25px;
	text-transform: uppercase;
	color: #D3D7D5;
	mix-blend-mode: normal;
	opacity: 0.4;
	max-width: 890px;
}
.about-img{
	width: 550px;
	height: 664px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: inline-block;
	float: right;
    position: relative;
    top: -20px;
	right: -33px;
	z-index: 1;
	
}

.jj-next:hover, 
.jj-prev:hover{
	opacity: .25;
}
.jj-prev{
	width: 50px;
    height: 50px;
    background-image: url(img/next-prev-btn.png);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    display: block;
    position: absolute;
    top: 129px;
    left: 40px;
}
.jj-next{
	width: 50px;
    height: 50px;
    background-image: url(img/next-prev-btn.png);
	transform: rotate(180deg);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    display: block;
    position: absolute;
    top: 129px;
    right: 40px;
}

/* =============================================================================
   Timeline
   ========================================================================== */
.timeline .arrow-btn.white{
	text-align: center;
	margin: 79px auto 0px;
	display: block;
	
	
}

.timeline-block-wrap{
	max-width: 787px;
	margin: 0px auto;
}
.timeline-block{
	border-bottom: solid 2px #FFF;
	position: relative;
	display: block;
    clear: both;
	padding-top: 40px;
	background-size:cover;
	background-repeat: no-repeat;
	transition:.5s;
	cursor: pointer;
	background-position: -4000px;
	max-width: 787px;
	margin: 0px auto;
}
.current-gallery-block{
	margin-bottom: 130px;
    width: 100%;
    display: block;
    position: relative;
    top: 75px;
    text-align: center;
    clear: both;
}

.current-gallery-block a{
	text-align: center;
}


.timeline-block:before {
    content: "";
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background-color: rgba(0,0,0,0.1);
}


.timeline-block:hover{
	background-position: center center;
}

.timeline{
	background-color:#000;
	padding: 100px 0px;
	display: block;
    clear: both;
	top: -70px;
    position: relative;

	}
.year h2{
	font-family: Barlow;
	font-style: normal;
	font-weight: 300;
	font-size: 64px;
	line-height: 77px;
	text-align: left;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: #FFFFFF;
	width: 140px;
    float: left;
	white-space: nowrap;
}
.timeline-slash{    
	width: 55px;
    height: 2px;
    background-color: #FFF;
    transform: rotate(-70deg);
    position: absolute;
    left: 160px;
    top: 84px;
}

.race-type{
	font-family: Barlow;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 19px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #FFFFFF;
    width: 170px;
    float: left;
    margin-left: 50px;
    margin-top: 14px;
}
.timeline-content h3{
	font-family: Barlow;
	font-style: normal;
	font-weight: bold;
	font-size: 24px;
	line-height: 29px;
	text-align: right;
	letter-spacing: 5.7931px;
	text-transform: uppercase;
	color: #FFFFFF;

}
.timeline-content p{
	font-family: Barlow;
	font-style: normal;
	font-weight: normal;
	font-size: 16px;
	line-height: 19px;
	text-align: right;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: #FFFFFF;
	margin: 0 0 40px 0;
}

.gallery-bg-title{
	font-family: Barlow;
	font-style: normal;
	font-weight: bold;
	font-size: 100px;
	line-height: 95px;
	text-align: center;
	letter-spacing: 7px;
	text-transform: uppercase;
	color: #FFFFFF;
	mix-blend-mode: normal;
	opacity: 0.1;
	transform: rotate(-90deg);
	left: -160px;    
	top: 350px;
    position: absolute;
	
}

/*================
  Gallery Sections
   ========================================================================== */

.gallery-section p{
	font-family: Barlow;
	font-style: normal;
	font-weight: normal;
	font-size: 24px;
	line-height: 32px;
	color: #FFFFFF;
}

.gallery-section h2{
	font-family: Barlow;
	font-style: normal;
	font-weight: bold;
	font-size: 72px;
	line-height: 72px;
	letter-spacing: 7px;
	text-transform: uppercase;
	color: #FFFFFF;
}
.gallery-section h3{
	font-family: Barlow;
	font-style: normal;
	font-weight: bold;
	font-size: 24px;
	line-height: 29px;
	letter-spacing: 5.7931px;
	text-transform: uppercase;
	color: #FFFFFF;

}
.two_image_block{
	margin-top: 100px;
	display: block;
}

.left_image_one{
	width: 100%;
	height:797px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	
}

.three_image_block .left_image_one{
	height: 432px;
	margin-bottom: 60px;
}
.three_image_block .left_image_one:first-of-type{
	margin-top: 250px;
}

.right_image_two{
	width: 100%;
	max-width: 572px;
	float: right;
	height:880px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	right: -6%;
    position: relative;	
	
}
.right_image_two.neg-top{
	top: -30%;
	margin-bottom: -30%;
}

.three_image_block .right_image_two{
	margin-top: -60px;
	margin-bottom: 100px;
}
.three_image_block .gallery-content-right{
	margin: 0px 0px 0px 60px;
	padding-bottom: 0px;
}

.gallery-content-right{
	max-width: 340px;
    margin: 0px auto;
    padding-bottom: 290px;
	clear: both;
}

.gallery-content-left p{
	max-width: 340px;
}

.gallery-content-left{
	margin-top: 210px;
}
.gallery-content-left h2{
	max-width: 670px;
}
.full-width-video{
	margin: 60px 0px;
	display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.video_text p{
	max-width: 428px;
	font-family: Barlow;
	font-style: normal;
	font-weight: bold;
	font-size: 24px;
	line-height: 29px;
	letter-spacing: 5.7931px;
	text-transform: uppercase;
	color: #FFFFFF;
}

.pop-up-gallery-btn{
	width: 50px;
	height: 50px;
	background-image:url("img/plus-gallery.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	position:absolute;
	bottom: 40px;
    right: 40px;
	cursor: pointer;
}

.pop-up-gallery-btn:hover{
	opacity: .25;
}

.pop-up-images .carousel-cell {
  width: 100%;
}
.pop-up-images .carousel-cell img{
	margin: 0px auto;
	display: block;
}
.pop-up-images{
	margin-top: 150px;
}
.pop-up-overlay{
	position: fixed;
    height: 100vh;
    width: 100vw;
    background-color: rgba(0,0,0,0.90);
    z-index: 999999999999999;
    top: 0px;
	display: none;
}
.pop-up-overlay.active{
	display: block;
}
.popup-count{
	max-width: 900px;
    margin: 0px auto;
    width: 100%;
	font-family: Barlow;
	font-style: normal;
	font-weight: normal;
	font-size: 24px;
	line-height: 32px;
	color: #FFFFFF;
	top: -40px;
    margin-top: -100px;
}

.flickity-prev-next-button{
	margin: 0px auto;
   background-image: url("img/next-prev-btn.png");
	background-position: center center;
	background-size: contain;
	background-repeat: no-repeat;
	background-color: black;
}


.pop-up-images .flickity-prev-next-button svg{
	display: none;
}

.pop-up-images  .flickity-prev-next-button.next{
	transform: rotate(-180deg);
	right: -350px;
    top: -30px;
	
}
.pop-up-images .flickity-button{
	position: relative;
	display: block;
}

.pop-up-images .flickity-prev-next-button.previous{
	    top: 36px;
    left: 260px;
	    
}

.pop-up-images .flickity-button:hover{
   background-image: url("img/next-prev-btn.png");
	background-color: transparent;
	opacity: .25;
	background-position: center center;
	background-size: contain;
	background-repeat: no-repeat;
}


/* =============================================================================
   About Page
   ========================================================================== */
.about-page{
	width: 100%;
	height: 100%;
	background-size: 100%;
    background-repeat: no-repeat;
    background-position: top center;
	display: block;
	height: 100%;
	clear: both;
}
.about-page h2.main-title {
	font-family: Barlow;
	font-style: normal;
	font-weight: bold;
	font-size: 100px;
	line-height: 110px;
	text-align: right;
	letter-spacing: 6.25px;
	text-transform: uppercase;
	color: #D3D7D5;
	max-width: 807px;
	float: right;
	margin-top: 300px;
}

.about-video{
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	width:100%;
	max-width: 702px;
	left: -6%;
	position: relative;
	margin-top: 200px;
	height: 432px;
	display: flex;
    justify-content: center;
    align-items: center;
}
.about-column-copy{
	max-width: 907px;
	margin: -100px auto 100px;
	font-family: Barlow;
	font-style: normal;
	font-weight: normal;
	font-size: 18px;
	line-height: 32px;
	/* or 178% */
	color: #FFFFFF;
}
.about-column-copy p{
	padding: 30px;
}
.flip-text{
	font-family: Barlow;
font-style: normal;
font-weight: bold;
font-size: 100px;
line-height: 95px;
/* or 95% */

text-align: center;
letter-spacing: 7px;
text-transform: uppercase;

color: #FFFFFF;

mix-blend-mode: normal;
opacity: 0.1;
transform: rotate(-90deg);
	    bottom: -70px;
    margin-top: 100px;
	position: relative;
}

.about-white-section{
	background-color:#FFF;
	color:#000;
}


.about-white-section h2{
	font-family: Barlow;
font-style: normal;
font-weight: bold;
font-size: 100px;
line-height: 72px;
/* identical to box height, or 72% */

text-align: center;
letter-spacing: 9.72222px;
text-transform: uppercase;

color: #020202;
	float: none;
	max-width: 100%;
	margin-top: 0px;
	padding-top: 100px;
}

.about-white-section h3{
	font-family: Barlow;
font-style: normal;
font-weight: bold;
font-size: 24px;
line-height: 29px;
text-align: center;
letter-spacing: 5.7931px;
text-transform: uppercase;
color: #020202;
	max-width: 870px;
	margin: 20px auto 100px;
}
.about-white-section p{
	font-family: Barlow;
	font-style: normal;
	font-weight: normal;
	font-size: 18px;
	line-height: 32px;
	letter-spacing: -0.5px;
	color: #020202;

}

.about-white-section strong{
	font-family: Barlow;
	font-style: normal;
	font-weight: normal;
	font-size: 24px;
	line-height: 32px;
	color: #020202;
}
.white-section-copy{
	max-width: 420px;
	margin: 0px;
	padding: 50px;
}

.white-about-img{
	max-width: 763px;
	width: 100%;
	height: 933px;
	left: 0px;
	top: 4473px;
}
.about-phil-white-section{
	background-color: #FFF;
	padding: 260px 0px 100px;
	height: 100%;
	position: relative;
}

.about-phil-image{
	display: block;
	clear: both;
	float: left;
	max-width: 1006px;
	height: 664px;
	background-size: cover;
	background-position: center center
}


.about-phil-white-section h2{
	font-family: Barlow;
font-style: normal;
font-weight: bold;
font-size: 145px;
line-height: 135px;
/* or 93% */

text-align: center;
letter-spacing: 9.0625px;
text-transform: uppercase;

color: #D3D7D5;

mix-blend-mode: normal;
opacity: 0.4;
	margin-bottom: -20px;
}

.about-phil-image .flip-text{
	color: #38A1F2;
    opacity: 1;
    left: -240px;
    bottom: -450px;
}

.center-copy{
	padding: 100px 0px;
	width: 100%;
	max-width: 520px; 
	margin: 0px auto;
	display: block;
	height: 100%;
	clear: both;
	font-family: Barlow;
font-style: normal;
font-weight: normal;
font-size: 18px;
line-height: 32px;
	z-index: 1;
	position: relative;
/* or 178% */


color: #020202;
}
.hand-img{
	width: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    max-width: 356px;
    height: 356px;
    position: absolute;
    right: 0px;
    bottom: 300px;
}

.about-page .shop-container{
	    margin-bottom: -70px;
    position: relative;
    z-index: 1;
	clear: both;
}

.history-timeline .carousel-cell{
	margin: 25px;
	
	width: 624px;
}

.history-timeline-block{
	background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    height: 319px;
	width: 100%;
	padding:0px;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;

}

.history-timeline-year h3{
	font-family: Barlow;
	font-style: normal;
	font-weight: 300;
	font-size: 100px;
	line-height: 95px;
	/* identical to box height, or 95% */
	letter-spacing: 6.25px;
	color: #FFFFFF;
	left: -130px;
    position: relative;
}
.history-timeline-copy p{
	font-family: Barlow;
	font-style: normal;
	font-weight: normal;
	font-size: 18px;
	line-height: 32px;
	color: #FFFFFF;
	padding: 20px;
}
.history-timeline{
	padding-top: 130px;
    width: 100%;
    display: block;
    height: 100%;
	}


.history-timeline:after{
	    content: '';
    height: 5px;
    background-color: #004990;
    width: 100%;
    display: block;
    top: -370px;
    position: relative;
    z-index: -1;
    left: 50%;
}

.about-history .flip-text{
	    position: relative;
    left: 0px;
    top: -541px;
    float: left;
    clear: both;
    display: block;
	margin-bottom: -120px;
	z-index: -1;
	
}
.about-page .philanthropy-section h2{
	display: block;
	clear: both;
}



.about-page .flickity-prev-next-button svg{
	display: none;
}
.about-page .flickity-prev-next-button:hover{
	background-color: transparent;
	background-image:url("img/next-prev-btn.png");
	background-size: contain;
	opacity: .25;
	
}
.about-page .flickity-prev-next-button.previous{
	
    top: -605px;
    position: relative;
    float: right;
    margin-right: 0px;
    left: -167px;

}
.about-page .flickity-prev-next-button.next{
	  transform: rotate(-180deg);
    right: 0px;
    position: relative;
    float: right;
    top: -628px;
    margin-right: 40px;
}
.jj-spacer{
	width: 100%;
	display: block;
	clear: both;
}


/* =============================================================================
   Blog Section
   ========================================================================== */
h1.blog-section{
	font-family: Barlow;
	font-style: normal;
	font-weight: bold;
	font-size: 100px;
	line-height: 100px;
	text-align: right;
	letter-spacing: 6.25px;
	text-transform: uppercase;
	color: #D3D7D5;
	    margin-top: 150px;
	    margin-bottom: -18px;
	}

.main-post-bg{
	width: 100%;
	height: 600px;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}

.main-post-content{
	max-width:1080px;
	}

.main-post-content p{
	font-family: Barlow;
	font-style: normal;
	font-weight: normal;
	font-size: 16px;
	line-height: 19px;
	letter-spacing: 12.8px;
	color: #FFFFFF;
}
.main-post-content h2{
	font-family: Barlow;
	font-style: normal;
	font-weight: bold;
	font-size: 64px;
	line-height: 72px;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: #FFFFFF;
}

.main-post-content h2 a{
	color: #fff;
}

.read-more{
	font-family: Barlow;
	font-style: normal;
	font-weight: normal;
	font-size: 18px;
	line-height: 32px;
	letter-spacing: -0.5px;
	color: #FFFFFF;	
}

.read-more:after{
	content: "";
	display: inline-block;
	width:20px;
	height: 6px;
	background-image:url("img/blog-arrow-w.png");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	margin-left: 10px;
	    top: -2px;
}

.blog-list{
	width: 100%;
	background-color: #FFF;
	color: #000;
	padding: 60px 0px;
}
.blog-list-left{
	width: 60%;
	float: left;
	display: block;
}
.blog-sidebar{
	width: 35%;
	float: right;
	display: block;
}

article h2{
	font-family: Barlow;
	font-style: normal;
	font-weight: normal;
	font-size: 24px;
	line-height: 32px;
	/* identical to box height, or 133% */
	color: #020202;
	}

article h2 a{
	color: #020202;
}
article p{
	font-family: Barlow;
	font-style: normal;
	font-weight: normal;
	font-size: 18px;
	line-height: 24px;
	/* or 133% */

	letter-spacing: -0.5px;

	color: #020202;
}
article img{
	max-width: 100%;
	height: auto;
}

.view-article{
	font-size: 0px;
}

.view-article:after{
	content: '';
	display: block;
	width:20px;
	height: 6px;
	background-image:url("img/blog-arrow.png");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	margin-top: 20px;
	    

}
.date{
	font-family: Barlow;
	font-style: normal;
	font-weight: normal;
	font-size: 14px;
	line-height: 32px;
	/* identical to box height, or 229% */
	letter-spacing: -0.388889px;
	color: #8A908D;
	width: 100%;
    display: block;
    margin: 20px 0px 0px;

}
.sidebar-widget h3{
	font-family: Barlow;
	font-style: normal;
	font-weight: bold;
	font-size: 24px;
	line-height: 29px;
	/* identical to box height */

	letter-spacing: 5.7931px;
	text-transform: uppercase;

	color: #020202;
	margin-bottom: 20px;
	}

a span.rpwwt-post-title{
	font-family: Barlow;
	font-style: normal;
	font-weight: normal;
	font-size: 18px;
	line-height: 24px;
	/* or 133% */

	letter-spacing: -0.5px;

	color: #020202;
	}

.rpwwt-post-date{
	font-family: Barlow;
	font-style: normal;
	font-weight: normal;
	font-size: 14px;
	line-height: 32px;
	/* identical to box height, or 229% */

	letter-spacing: -0.388889px;

	color: #8A908D;
	margin-top: 40px;
	}

.rpwwt-widget ul li img{
	border-radius: 3px;
}

.jj-blog-single .date{
	color: #FFF;
}
.jj-blog-single .main-post-bg{
	height: 800px;
}

.jj-blog-single  article p{
	
}

.jj-blog-single article{
	     max-width: 921px;
    padding: 20px 95px;
    margin: 0px auto;
    position: relative;
    top: -200px;
    background-color: white;
	margin-bottom: -200px;
}

.jj-blog-single  article img{
	left: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	max-width: 100vw;
	position: relative;
	right: 50%;
	width: 100vw;
	margin-top: 40px;
    margin-bottom: 40px;
}
.post_details{
	font-family: Barlow;
font-style: normal;
font-weight: normal;
font-size: 18px;
line-height: 32px;
/* or 178% */

letter-spacing: -0.5px;

color: #020202;
	margin: 50px 0px;
	
} 
.has-large-font-size{
	line-height: 32px !important;
	
}
.jj-blog-single  article h2,
.jj-blog-single  article h3,
.jj-blog-single  article h4 {
font-family: Barlow;
font-style: normal;
font-weight: bold;
font-size: 24px;
line-height: 29px;
letter-spacing: 5.7931px;
text-transform: uppercase;

color: #020202;
	margin-top: 80px;
}
.share-icon{
	width: 30px;
    height: 30px;
    border: solid 1px #000;
    border-radius: 100%;
    display: inline-block;
}

.share-section p{
line-height: 32px;
font-family: Barlow;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 32px;
    letter-spacing: -0.388889px;
    color: #8A908D;
    text-align: right;
    display: inline;
    width: 100%;
    height: 100%;

}

/* =============================================================================
   HTML5 Reset
   ========================================================================== */

	article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {display:block;}
	audio, canvas, video {display:inline-block;*display:inline;*zoom:1;}
	audio:not([controls]) {display:none;}
	[hidden] {display:none;}
	
	html {font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
	html, button, input, select, textarea {font-family:sans-serif;color:#222;}
	body {margin:0;font-size:1em;line-height:1;}
	p {padding:7px 0 0 0;}
	
	h1,h2,h3,h4,h5,h6 {text-decoration:none;padding:0;color:#444;margin:0;font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;font-weight:700;}
	
	a {color:#266E9E;text-decoration:none;}
	a:focus {outline:0;}
	a:hover, a:active {outline:0;}
	
	abbr[title] {border-bottom:1px dotted;}
	b, strong {font-weight:bold;}
	.clear {clear:both;}
	dfn {font-style:italic;}
	hr {display:block;height:1px;border:0;border-top:1px solid #CCC;margin:1em 0;padding:0;}
	ins {background:#FF9;color:#000;text-decoration:none;}
	mark {background:#FF0;color:#000;font-style:italic;font-weight:bold;}
	pre, code, kbd, samp {font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em;}
	pre {white-space:pre;white-space:pre-wrap;word-wrap:break-word;}
	q {quotes:none;}
	q:before, q:after {content:"";content:none;}
	small {font-size:90%;}
	blockquote {background-color:#EEE;border:1px solid #DDD;margin:10px 0;padding:10px 30px;border-radius:3px;}
	
	sub, sup {font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
	sup {top:-0.5em;}
	sub {bottom:-0.25em;}
	
	ul {margin:0;padding:0;list-style:none;}
	ol {margin:15px;}
	
	dd {margin:0 0 0 40px;}
	nav ul, nav ol {list-style:none;list-style-image:none;margin:0;padding:0;}
	
	img {border:0;-ms-interpolation-mode:bicubic;vertical-align:middle;}
	
	svg:not(:root) {overflow:hidden;}
	
	figure {margin:0;}
	
	form {margin:0;}
	fieldset {border:0;margin:0;padding:0;}
	label {cursor:pointer;}
	legend {border:0;*margin-left:-7px;padding:0;white-space:normal;}
	button, input, select, textarea {font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle;}
	button, input {line-height:normal;}
	button, input[type="button"], input[type="reset"], input[type="submit"] {cursor:pointer;-webkit-appearance:none;*overflow:visible;}
	button[disabled], input[disabled] { cursor: default; }
	input[type="checkbox"], input[type="radio"] {box-sizing:border-box;padding:0;*width:13px;*height:13px;}
	input[type="search"] {-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}
	input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button {-webkit-appearance:none;}
	button::-moz-focus-inner, input::-moz-focus-inner {border:0;padding:0;}
	textarea {overflow:auto;vertical-align:top;resize:vertical;}
	input:valid, textarea:valid {}
	input:invalid, textarea:invalid {background-color:#F0DDDD;}
	
	table {border-collapse:collapse;border-spacing:0;}
	td {vertical-align:top;}

/* =============================================================================
   General Styles
   ========================================================================== */
   
html, body {
 font-family: 'Barlow', sans-serif;
	overflow-x: hidden;

}

.main-bg{
	width: 100%;
	height: 100%;
	background-image:url();
	background-size: cover;
	background-position: center center;
}

.jimmie_bg{
	background-image: url("img/jimmie_johnson_bg.png");
	width: calc(100% - 392px);
	height: 100%;
	background-size: cover;
	background-position: center center;
	float: right;
}

.jj_logo{
	background-image: url("img/jj_logo.png");
	 background-size: contain;
    width: 145px;
    height: 235px;
    background-position: center center;
    background-repeat: no-repeat;
    margin: 0px auto;
    padding-top: 410px;
    margin-bottom: -120px;
}
.jj_logo_long{
	    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(img/jj_logo_long.png);
    width: 168px;
    height: 16px;
    background-position: center;
    margin: 0px auto;
	
}
.content-wrap{
	olor: #D8D8D8;
    text-transform: uppercase;
    width: 392px;
    position:relative;
	float: left;
    left: 0px;
    top: 0px;
    background-color: #1f1f1f;
    height: 100%;
}
.content-wrap p{
	text-align: center;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 1px;
}


.icon{
	width: 33px;
	height: 33px;
	float: left;
	margin-right: 20px;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	cursor: pointer;
}
.icon:last-of-type{
	margin-right: 0px;
}

.icon a{
	display: block;
	width: 100%;
	height: 100%;
}

.twitter{
	background-image: url("img/twitter.png");
}
.youtube{
	background-image: url("img/youtube.png");
}
.instagram{
	background-image: url("img/in.png");
}
.facebook{
	background-image: url("img/fb.png");
}
.facebook:hover{
	background-image: url("img/fb-active.png");
}

.twitter:hover{
	background-image:url("img/twitter-active.png");
}
.youtube:hover{
	background-image: url("img/youtube-active.png");
}
.instagram:hover{
	background-image: url("img/in-active.png");
}

.flex-center{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
}

/* Footer section */
.social-footer .social-icons{
	float: right;
	margin: 0px 0px 30px 0px;
}

.footer-logo{
	background-image: url(img/jimmiejohnson.png);
    background-position: left center;
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
    width: 320px;
    height: 60px;
	margin-bottom: 60px;
	
}

footer h3{
	font-family: Barlow;
	font-style: normal;
	font-weight: normal;
	font-size: 16px;
	line-height: 19px;
	letter-spacing: 12.8px;
	color: #FFFFFF;
	margin-bottom: 40px;
}

footer p{
	font-family: Barlow;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 19px;
letter-spacing: 3px;

color: #FFFFFF;
}
footer a{
	color: #FFF;
}
footer{
	padding-top: 60px;
}
.newsletter-signup{
	width: 70%;
}

.newsletter-signup input[type="email"]{
	border-top: none;
	border-left: none;
	border-right: none;
	border-bottom: 1px solid #979797;
	width: 100%;
	background-color: transparent;
	font-family: Barlow;
	font-style: normal;
	font-weight: normal;
	font-size: 24px;
	line-height: 29px;
	letter-spacing: 5.7931px;
	text-transform: uppercase;
	color: #8A908D;    
	padding-bottom: 20px;
	
}

.newsletter-signup input:placeholder{
font-family: Barlow;
	font-style: normal;
	font-weight: normal;
	font-size: 24px;
	line-height: 29px;
	letter-spacing: 5.7931px;
	text-transform: uppercase;
	color: #8A908D;
	}

#mc-embedded-subscribe{
	float: right;
    background-color: transparent;
    border: none;
    font-family: Barlow;
    font-style: normal;
    font-weight: bold;
    font-size: 24px;
    line-height: 62px;
    letter-spacing: 2.48276px;
    text-transform: uppercase;
    color: #FFFFFF;
    position: relative;
    top: -63px;
	background-image: url("img/submit-arrow.png");
	background-position: center right;
	background-repeat: no-repeat;
	background-size: 30px;
	width:170px;
}

/* Change the white to any color */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active
{
 -webkit-box-shadow: 0 0 0 30px white inset !important;
}
input:-webkit-autofill
{
 -webkit-text-fill-color: black !important;
}

.SandboxRoot.var-fully-expanded .timeline-Viewport{
	background-color: black;
}

.full-width-bg-video {
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
}
/*------------------------------------*\
	FLEX CONTAINERS
\*------------------------------------*/


/*Flex Conatiners 
NOTE FROM TIM: This is an awesome way to 
do flex grids for responsvie containers.  
*/

.flex_container {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-content: space-between;
    -ms-flex-line-pack: justify;
    align-content: space-between;
    -webkit-box-align: stretch;
    -moz-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
	clear: both;
}
.flex_container .flex_item {
    flex-grow: 1;
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
}
/ legacy Firefox / @-moz-document url-prefix() {
    .flex-container {
        width: 100%;
        -moz-box-sizing: border-box;
    }
}
.flex_container.flex_one > .flex_item {
    width: 100%;
}
.flex_container.flex_two > .flex_item {
    width: 50%;
}

.flex_container.flex_two > .flex_item.one_third {
    width: 30%;
}


.flex_container.flex_two > .flex_item.two_thirds {
    width: 70%;
}

.flex_container.flex_two > .flex_item.three_fourths{
    width: 70%;
}


.flex_container.flex_two > .flex_item.one_fourth{
    width: 30%;
}


.flex_container.flex_three > .flex_item {
    width: 33.3%;
}
.flex_container.flex_four > .flex_item {
    width: 25%;
}
.flex_container.flex_five > .flex_item {
    width: 20%;
}
.flex_container.flex_six > .flex_item {
    width: 16.6%;
}



.fade-in {
animation: fadeIn ease 2s;
-webkit-animation: fadeIn ease 2s;
-moz-animation: fadeIn ease 2s;
-o-animation: fadeIn ease 2s;
-ms-animation: fadeIn ease 2s;
}
@keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

@-moz-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

@-webkit-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

@-o-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

@-ms-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

   	/* Font Face Setup, add fonts to /fonts/ folder and link up below with filenames */
	@font-face {
		font-family:'Font-Name';
		src:url('fonts/font-name.eot');
		src:url('fonts/font-name.eot?#iefix') format('embedded-opentype'),
		url('fonts/font-name.woff') format('woff'),
		url('fonts/font-name.ttf') format('truetype'),
		url('fonts/font-name.svg#font-name') format('svg');
	    	font-weight:normal;
	    	font-style:normal;
  	 }
	
   	body {
		font-family: 'Barlow', sans-serif;
		font-size:11px;
		font-weight:300; /* Better supported than 'lighter' attribute */
		line-height:18px;
		-webkit-font-smoothing:antialiased; /* Antialiased font for great smoothing */
		-moz-font-smoothing:antialiased;
		-o-font-smoothing:antialiased;
		font-smoothing:antialiased;
		text-rendering:optimizeLegibility; /* Optimise legibility for some CSS3 kerning */
		color:#444; /* Lighter on the eyes than #000 Black */
	}
	
/* =============================================================================
   Structure
   ========================================================================== */
   
   /* Add your site structure here */

/* =============================================================================
   Mobile First Media Queries
   ========================================================================== */

html{
		 background-color:#000;
	 }
	.m-show{
		 display: none;
	}

#ctf{
		     background: #131212;
    width: 10%;
    width: 95% !important;
    margin: 0px auto;
    padding: 10px;
	 }

 @media only screen and (max-width: 1148px) {
	 .about-section{
		 min-height: 1500px;
	 }
}

 @media only screen and (max-width: 850px) {
	.gallery-bg-title{
		transform:rotate(0deg);
		left: 0px;
    	    top: 0px;
    position: absolute;
		font-size: 60px;
line-height: 95px;
		left: 50%;
  transform: translate(-50%, -50%);
	}
	 .timeline-block-wrap{
		 padding: 0px 20px;
	 }
	 
	 .flex_container.flex_two > .flex_item{
		 width: 100%;
	 }
	 
	  .flex_container.flex_two > .flex_item.one_third{
		 width: 100%;
	 }
	 
	  .flex_container.flex_two > .flex_item.two_thirds{
		 width: 100%;
	 }
	 
	 .footer-logo{
		 background-position: center;
    	margin: 0px auto 60px;
		 
	 }
	 footer h3{
		 text-align: center;
	 }
	 .newsletter-signup{
		 width: 100%;
		 text-align: center;
	 }
	 .newsletter-signup input[type="email"]{
		 text-align: center;
	 }
	 #mc-embedded-subscribe{
		 display: none;
	 }
	 
	 .shop-container .flex_container.flex_two{
		flex-direction:  column-reverse;
	 }
	 .social-footer .social-icons{
		 margin: 0px auto 30px;
		 float: none;
	 }
	 .m-hide{
		 display: none;
	 }
	 .m-show{
		 display: block;
	 }
	 
	 .social-footer{
		 margin-top: 60px;
	 }
	 footer p{
		 text-align: center;
	 }
	 .about-content{
		 padding-right: 50px;
		 padding-top: 30px;
	 }
	 
	 
}

 @media only screen and (max-width: 625px) {
	 h1.blog-section{
		 font-size: 50px;
    line-height: 60px;
	 }
	 .blog-list-left{
		 width: 100%;
		 float: none;
	 }
	 .blog-sidebar{
		 width: 100%;
		 float: none;
	 }
	 
	 .main-post-content h2{
		font-size: 40px;
    	line-height: 50px;
		 
	 }
	 
	 .jj-blog-single article{
		 padding: 20px 20px;
	 }
	 .jj-blog-single .press-slider h2{
		top:20px; 
	 }
	 
	 .flex_container.flex_three > .flex_item{
		 width: 100%;
	 }
	 
	 .logo{
	 	max-width: 240px;
    	margin: 10px;
	 }
	 .ham-menu {
    	margin-top: 26px;
    	margin-right: 22px;
	 }
	 .popup-menu nav ul li a{
		font-size: 53px;
    	line-height: 60px;
	 }
	 .bg-title{
	 font-size: 60px;
	line-height: 60px;
	 }
	 .about-img{
		width: 248px;
		height: 278px;
	 }
	 .about-section{
		 min-height: 915px;
	 }
	 .gallery-bg-title{
		 top: 70px;
	 }
	 .race-type{
		 display: none;
	 }
	 
	 .jimmie_bg{
		display: none;
}
	 .year h2{
		 overflow: hidden;
		 text-indent: -71px;
		 width: 85px;
	 }
	
	 .timeline-slash{
		 left:60px;
	 }
	 
	 .arrow-btn:after{
		 display: none !important;
	 }
	 
	 .media-title h1{
		font-size: 60px;
		line-height: 60px;
	 }
	 .media-image-one{
		 width: 303px;
		height: 278px;
	 }
	 .media-excerpt p{
		 text-align: center;
	 }
	 .media-image-two{
		 width: 248px;
		height: 278px;
	 }
	 
	 h2.media-title{
		 font-size: 32px;
		line-height: 44px;
	     margin-top: 130px;
	 }
	 
	 
	 .latest-section h2{
		 font-size: 60px;
		line-height: 60px;
	 }
	 .latest-section h3{
		 padding: 0px 20px;
	 }
	 .latest-section p{
		 padding: 0px 20px;
	 }
	 
	 .banner-img{
		 width: 375px;
		height: 375px;
	 }
	 
	 .press-image-one, .press-image-two{
		 width: 328px;
		height: 328px;
		 margin: 0px auto;
	 }
	 .about-page h2.main-title{
		 font-size: 60px;
		line-height: 60px;
	 }
	 .about-page .flip-text{
		 display: none;
	 }
	 
	 .about-white-section h2{
		 font-size: 72px;
line-height: 72px;
	 }
	 .white-about-img{
	 width: 303px;
height: 249.69px;
		 background-size: cover;
		 }
	 
	 .history-timeline .carousel-cell{
		 width: 331px;
	 }
	 .history-timeline-year h3{
		 left: 0px;
	 }
	 .about-column-copy p{
		 text-align: center;
	 }
	 .philanthropy-section h2{
	 	font-size: 60px;
		line-height: 60px;
		 }
	 .about-video{
		    width: 300px;
			height: 184.4px;
			top: 60px;
			margin-bottom: 70px;
	 }
	 .about-phil-white-section h2{
	 	font-size: 60px;
		line-height: 60px;
	 }
	 .about-page .flickity-prev-next-button.next{
		 top:705px;
	 }
	 .about-page .flickity-prev-next-button.previous{
		 top:-684px;
	 }
	 
	 .about-page .about-phil-image .flip-text{
		 display: block;
		 font-size: 32.7273px;
		line-height: 33px;
	 }
	 .about-phil-image{
		 width: 315px;
		height: 278px;
	 }
	 
	 .next-post-links .jj-next, 
	 .next-post-links .jj-prev {
		 top:210px;
	 }
	 .jj-next{
		 left: 130px;
	 }
	 .current-gallery-block{
		 width: 93%;
		 margin: 0px auto;
		 height: 420px;
	 }
	 .timeline-block{
		 height: 97px;
	 }
	 
	 .hand-img{
		    position: relative;
    right: 0px;
    bottom: 110px;
    max-width: 200px;
    height: 200px;
    margin: 0px auto;
	 }
	 
	 .twitter-section{
		 margin: 50px 0px;
	 }
	 
	 .press-bg-copy h2{
		 font-size: 60px;
		 line-height: 60px;
	 }
	 .press-block h2{
	 	    font-size: 32px;
			line-height: 44px;
			padding: 0px 50px;
			width: 100%;
			max-width: 350px;
	 }
	 footer h3{
		 letter-spacing: 3.8px;
	 }
	 
	 .press-block{
	     min-width: 328px;
		height: 328px;
		width: 328px;
		 overflow: visible;
	 }
	 
	 .press-slider h2{
	font-family: Barlow;
	font-style: normal;
	font-weight: bold;
	font-size: 32px;
	line-height: 44px;
	/* or 136% */

	text-align: center;
	letter-spacing: 4.23571px;
	text-transform: uppercase;

	color: #FFFFFF;
		     position: relative;
    top: -130px;
		 }
	 
	 /*Gallery mobile*/
	 .gallery-section .banner-img{
		 right: -6%;
		 position: relative;
		 width: 351px;
		height: 252.37px;
	 }
	 .gallery-section .two_image_block .flex_container.flex_two > .flex_item.m-1{
		 order: 1;
	 }
	 
	 .gallery-section .two_image_block .flex_container.flex_two > .flex_item.m-2{
		 order: 2;
	 }
	 
	 .gallery-section .two_image_block .flex_container.flex_two > .flex_item.m-3{
		 order: 3;
	 }
	 
	 .gallery-section .two_image_block .flex_container.flex_two > .flex_item.m-4{
		 order: 4;
	 }
	 
	 .gallery-section .two_image_block{
		 margin-top: 0px;
	 }
	 .gallery-content-right{
		 padding-bottom: 60px;
	 }
	 .gallery-section .left_image_one{
	 	width: 303px;
height: 249.69px;
    	}
	 .gallery-section .right_image_two{
		width: 272.35px;
		height: 419px; 
	 }
	 
	 .three_image_block .left_image_one:first-of-type{
		 margin-top: 0px;
	 }
	 .three_image_block .right_image_two{
		 margin-top: 0px;
	 }
	 
	 .right_image_two.neg-top{
		top: 0px;
		margin-bottom: -69%;
		z-index: -1;
		margin-top: 80px;
	 }
	 
	 .g-mobile-space{
		     width: 100%;
		display: block;
		clear: both;
		margin-bottom: 60px;
		height: 120px;
	 }
	 
   }

   /* 320px and greater */
   @media only screen and (min-width: 320px) {
	/* Styles here */
   }
   
   /* 480px and greater */
   @media only screen and (min-width: 480px) {
	/* Styles here */
   }
   
   /* 768px and greater */
   @media only screen and (min-width: 768px) {
	/* Styles here */
   }
   
   /* 1024px and greater */
   @media only screen and (min-width: 1024px) {
	/* Styles here */
   }
   
   /* Retina screens */
   @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) {
	/* Style adjustments for high resolution devices */
}

/* =============================================================================
   Non-Semantic Classes
   ========================================================================== */
   
   /* Custom Selection Styles */
   ::selection {background:#004990;color:#FFF;text-shadow:none;}
   ::-webkit-selection {background:#004990;color:#FFF;text-shadow:none;}
   ::-moz-selection {background:#004990;color:#FFF;text-shadow:none;}
   
   /* Input focus styles */
   input:focus {outline:0;border:1px solid #0091BD;} /* Gets rid of blue glow on field focus, adds border color instead */
   
/* =============================================================================
   WordPress Core CSS Styles
   ========================================================================== */
   
   .alignnone {margin:5px 20px 20px 0;}
   .aligncenter,div.aligncenter {display:block;margin:5px auto 5px auto;}
   .alignright {float:right;margin:5px 0 20px 20px;}
   .alignleft {float:left;margin:5px 20px 20px 0;}
   .aligncenter {display:block;margin:5px auto 5px auto;}
   a img.alignright {float:right;margin:5px 0 20px 20px;}
   a img.alignnone {margin:5px 20px 20px 0;}
   a img.alignleft {float:left;margin:5px 20px 20px 0;}
   a img.aligncenter {display:block;margin-left:auto;margin-right:auto;}
   .wp-caption {background:#FFF;border:1px solid #F0F0F0;max-width:96%;padding:5px 3px 10px;text-align:center;}
   .wp-caption.alignnone {margin:5px 20px 20px 0;}
   .wp-caption.alignleft {margin:5px 20px 20px 0;}
   .wp-caption.alignright {margin:5px 0 20px 20px;}
   .wp-caption img {border:0 none;height:auto;margin:0;max-width:98.5%;padding:0;width:auto;}
   .wp-caption p.wp-caption-text,.gallery-caption {font-size:11px;line-height:17px;margin:0;padding:0 4px 5px;}
   .sticky {}
   .bypostauthor {}


/* ==========================================================================
   Modal video Popups
   ========================================================================== */


@keyframes modal-video{from{opacity:0}to{opacity:1}}@keyframes modal-video-inner{from{transform:translate(0, 100px)}to{transform:translate(0, 0)}}.modal-video{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5);z-index:1000000;cursor:pointer;opacity:1;animation-timing-function:ease-out;animation-duration:.3s;animation-name:modal-video;-webkit-transition:opacity .3s ease-out;-moz-transition:opacity .3s ease-out;-ms-transition:opacity .3s ease-out;-o-transition:opacity .3s ease-out;transition:opacity .3s ease-out}.modal-video-close{opacity:0}.modal-video-close .modal-video-movie-wrap{-webkit-transform:translate(0, 100px);-moz-transform:translate(0, 100px);-ms-transform:translate(0, 100px);-o-transform:translate(0, 100px);transform:translate(0, 100px)}.modal-video-body{max-width:88%;width:100%;height:100%;margin:0 auto;display:table}.modal-video-inner{display:table-cell;vertical-align:middle;width:100%;height:100%}.modal-video-movie-wrap{width:100%;height:0;position:relative;padding-bottom:56.25%;background-color:#333;animation-timing-function:ease-out;animation-duration:.3s;animation-name:modal-video-inner;-webkit-transform:translate(0, 0);-moz-transform:translate(0, 0);-ms-transform:translate(0, 0);-o-transform:translate(0, 0);transform:translate(0, 0);-webkit-transition:-webkit-transform .3s ease-out;-moz-transition:-moz-transform .3s ease-out;-ms-transition:-ms-transform .3s ease-out;-o-transition:-o-transform .3s ease-out;transition:transform .3s ease-out}.modal-video-movie-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%}.modal-video-close-btn{position:absolute;z-index:2;top:-35px;right:-35px;display:inline-block;width:35px;height:35px;overflow:hidden;border:none;background:transparent}.modal-video-close-btn:before{transform:rotate(45deg)}.modal-video-close-btn:after{transform:rotate(-45deg)}.modal-video-close-btn:before,.modal-video-close-btn:after{content:'';position:absolute;height:2px;width:100%;top:50%;left:0;margin-top:-1px;background:#fff;border-radius:5px;margin-top:-6px}

/* ==========================================================================
   Print styles
   ========================================================================== */

   @media print {
	* {background:transparent !important;color:#000 !important;box-shadow:none !important;text-shadow:none !important;}
	a,a:visited {text-decoration:underline;}
	a[href]:after {content:" (" attr(href) ")";}
	abbr[title]:after {content:" (" attr(title) ")";}
	.ir a:after,a[href^="javascript:"]:after,a[href^="#"]:after {content:"";}
	pre,blockquote {border:1px solid #999;page-break-inside:avoid;}
	thead {display:table-header-group;}
	tr,img {page-break-inside:avoid;}
	img {max-width:100% !important;}
	@page {margin:0.5cm;}
	p,h2,h3 {orphans:3;widows:3;}
	h2,h3 {page-break-after:avoid;}
   }