@media screen and (max-width:1980px) {
	.hero{
		background:url(../images/hero-cg.png) no-repeat right;
		background-position: 90% 90%;
		margin-bottom:-1rem;
	}
}

@media screen and (max-width:1280px) {
	.hero{
		background:url(../images/hero-cg.png) no-repeat right;
		background-position: 100% 90%;
	}
}
@media screen and (max-width:1070px) {
	.hero{
		background:url(../images/hero-cg.png) no-repeat right;
		background-position: 120% 90%;
	}
}


@media screen and (max-width:959px) {
.container{width:95%; margin:auto;}
.narrow{width:85%; margin:auto;}
h1 span, h3 span, p.red span, h4 span{display:inline;}

.hero{
	background:url(../images/hero-cg.png) no-repeat right;
	background-position: 130% 90%;
}

.table_bullets .fa {font-size:36px;}

.call-to-action p{font-size:14px;}


.or_reading p::before { 
  counter-increment: section;  
  content: counter(section);
  background:#dd2a26;
  color:#FFF;
  float:left;
  width:10%;
  text-align:center;
  font-size:2.8em;
  background:url(../images/m_bullets.png) no-repeat;
  background-size:cover;
  height:30%;
  padding:4% 0 3% 0;
}


.faqs p::before { 
  width:5%;
   background:url(../images/s_bullets.png) no-repeat;
  background-size:cover;
  height:auto;
}
.faqs p span{
	float:right;
	width:92%;
}
}



@media screen and (max-width:767px) {
h1{font-size:42px;}
h2{font-size:42px;}
h3{font-size:28px;}
h4{font-size:22px;}
p, ul li, ol li{font-size:18px;}	

.module--hero .left{width:100%; float:none;}
.hero{background:none;}
.module--hero h1{font-size:35px;}

.course-nav{
	margin-top:2rem; 
	columns: 1;
    -webkit-columns: 1;
    -moz-columns: 1;
    list-style: none;
	}

.one_half, .one_third{width:360px; margin:auto; float:none; margin-bottom:2rem;}
.one_third:last-child{margin-bottom:0;}

.testimonial_2{width:100%; float:none; margin-bottom:2rem; min-height:100px; overflow:hidden;}
.testimonial_2:last-child{margin-bottom:0;}

.table_bullets .fa {font-size:32px;}

.or_reading{counter-reset: section; margin-top:0rem;}

.call-to-action h1{font-size:3.5vw;}
.call-to-action h1 span{font-size:6vw;}
.call-to-action a .i_access{
    padding: 3vh 1vw;
}
.call-to-action a{font-size: 3vw;}
.call-to-action p{margin-top:1rem; font-size:1.8vw;}
}



@media screen and (max-width:639px) {
.module{padding:2rem 0 2rem;}
.module h1{margin-bottom:2rem;}
.module h3, .strip h3{margin:2rem 0 2rem 0;}
.module--hero .container{padding:2rem 0 3rem;}
h1{font-size:36px;}
h2{font-size:36px;}
h3{font-size:24px;}
h4{font-size:20px;}
p, ul li, ol li{font-size:16px;}

.module--author .author div{width:90%; margin:auto;}

img.size-full{width:80%;}

.course .border img{float:left; width:18%;}
.course .border h4{padding-top:0.9rem;}

.table_bullets .fa {font-size:28px;}

.call-to-action .left, .call-to-action .right{float:none; width:360px; margin:auto;}
.call-to-action .right{margin-top:2rem;}
.call-to-action p{font-size:16px;}
.module--testimonial h3{margin:0;}

.bonus-box .one_half, .bonus-box .one_half:nth-child(even){width:360px; float:none; min-height:200px; margin:0 auto 2rem auto;}
.bonus-box .one_half:last-child{margin-bottom:0;}


.or_reading p::before { 
  counter-increment: section;  
  content: counter(section);
  background:#dd2a26;
  color:#FFF;
  float:left;
  width:12%;
  text-align:center;
  font-size:2.4em;
  background:url(../images/s_bullets.png) no-repeat;
  background-size:contain;
  height:40%;
  padding:5% 0 5% 0;
}

.or_reading p span{
	float:right;
	width:86%;
	margin-left:2%;
}
.faqs p::before { 
  width:6%;
   background:url(../images/s_bullets.png) no-repeat;
  background-size:cover;
  height:auto;
}
.faqs p span{
	float:right;
	width:91%;
}

}

@media screen and (max-width:479px) {
.narrow{width:98%; margin:auto;}
.table_bullets .fa {font-size: 32px;}

.module--testimonial figure{display:none;}
.module--testimonial blockquote{float:none; width:100%;}

}

@media screen and (max-width:360px) {
h1{font-size:32px;}
h2{font-size:32px;}
h3{font-size:22px;}
h4{font-size:18px;}
p, ul li, ol li{font-size:16px;}

.module--hero .sp-logo img{width:100%;}
.module--hero .sp-logo{
		width:300px;
		margin:auto;
	}

.table_bullets .fa {font-size: 28px;}

.one_half, .one_third{width:100%; margin:auto auto 1rem auto;}
.call-to-action .left, .call-to-action .right{width:100%; margin:auto;}
.bonus-box .one_half, .bonus-box .one_half:nth-child(even){width:100%; margin:0 auto 2rem auto;}
}


@media screen and (max-width:959px) {
footer .left,
footer .middle,
footer .right{float:none; text-align:center; width:100%; margin-bottom:1rem; display:block;}
footer .right{margin-bottom:0;}
}