.basicContentContainer {
width: 92%;
display: block;
margin-left: 6%;
}



.noLeftContent{
margin-left: 45%;
}

.leftContentContainer {
width: 40%;
margin-left: 3%;
display: inline-block;
text-align: center;
vertical-align: top;
}

.leftContentContainer img{
max-width: 80%;
max-height: 400px;
position: relative;
margin: 60px 10%;
}

.fullContentContainer {
width: 95%;
display: inline-block;
margin-left: 5%;
}

.edgeToEdge{
width: 100%;
margin: 0;
margin-top: -10px;
}

.cover{
width: 100%;
}

.fullContentContainer a h2{
color: #333;
}

.fullContentContainer a h2:hover{
color: #000;
}

.centeredContent { text-align: center; width: 100%; }

@media screen and (max-width: 1150px) { 
	.rightContentContainer { width:60%;}
	.noLeftContent { margin-left:39%;}
	.leftContentContainer { width:35%;} 
}

@media screen and (max-width: 950px) { 
	.rightContentContainer { width:100%; margin-left:0; text-align: center;} 
	.rightContentContainer p{max-width:80%; margin: auto; margin-top: 30px;}
	.noLeftContent {margin-left: 0;}
	.leftContentContainer { width:100%; position: relative; margin-left: 0px;} 
}



/* ********************************************************** */
/* ************************ HERO **************************** */

#hero, .anotherBook {
display: block;
width: 100%;
background: url(../img/herobg.jpg);
color: #ede9dd;
color: #333;
border-bottom: solid 2px #ff5722;

/* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
	
}

#hero h1, .anotherBook h1 {
font-size: 2.6em;
margin-top: 40px;
}

.gradBlack {
height: 100%;
padding-bottom: 55px;
background: -webkit-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,.4),rgba(0,0,0,.6),rgba(0,0,0,.6),rgba(0,0,0,.65),rgba(0,0,0,.7),rgba(0,0,0,.75),rgba(0,0,0,.75),rgba(0,0,0,.75),rgba(0,0,0,.7),rgba(0,0,0,.7),rgba(0,0,0,.7),rgba(0,0,0,.6),rgba(0,0,0,.5),rgba(0,0,0,.1)); /*Safari 5.1-6*/
background: -o-linear-gradient(right,rgba(0,0,0,0),rgba(0,0,0,.4),rgba(0,0,0,.6),rgba(0,0,0,.6),rgba(0,0,0,.65),rgba(0,0,0,.7),rgba(0,0,0,.75),rgba(0,0,0,.75),rgba(0,0,0,.75),rgba(0,0,0,.7),rgba(0,0,0,.7),rgba(0,0,0,.7),rgba(0,0,0,.6),rgba(0,0,0,.5),rgba(0,0,0,.1)); /*Opera 11.1-12*/
background: -moz-linear-gradient(right,rgba(0,0,0,0),rgba(0,0,0,.4),rgba(0,0,0,.6),rgba(0,0,0,.6),rgba(0,0,0,.65),rgba(0,0,0,.7),rgba(0,0,0,.75),rgba(0,0,0,.75),rgba(0,0,0,.75),rgba(0,0,0,.7),rgba(0,0,0,.7),rgba(0,0,0,.7),rgba(0,0,0,.6),rgba(0,0,0,.5),rgba(0,0,0,.1)); /*Fx 3.6-15*/
background: linear-gradient(to right, rgba(0,0,0,0),rgba(0,0,0,.4),rgba(0,0,0,.6),rgba(0,0,0,.6),rgba(0,0,0,.65),rgba(0,0,0,.7),rgba(0,0,0,.75),rgba(0,0,0,.75),rgba(0,0,0,.75),rgba(0,0,0,.7),rgba(0,0,0,.7),rgba(0,0,0,.7),rgba(0,0,0,.6),rgba(0,0,0,.5),rgba(0,0,0,.1)); /*Standard*/
}

@media screen and (max-width: 950px) { 
	.gradBlack {margin-top: 0px;}
	#hero h1, .anotherBook h1 {font-size: 2.2em;}
}

/* ********************************************************** */
/* ********************* CONTENT ONE ************************ */

#contentOne{
width: 100%;
padding: 10px 0;
color: #333;
min-height: 350px;
background: #FDFDFD;
/* background-image: url(../img/gallery/custombanner_bg.jpg);
background-size: cover; */
border-bottom: solid 2px #ff5722;
}


/* ********************************************************** */
/* ********************* CONTENT TWO *********************** */

#contentTwo{
width: 100%;
padding: 60px 0 50px 0;
color: #ccc;
min-height: 320px;
background: #264252;

}

/* ********************************************************** */
/* ******************* UPDATE NOV 2017 ********************** */

.btnBox {
margin-top: 50px;
margin-left: calc(50% - 220px);
}

.rightContentContainer {
width: 48%;
border-bottom: #3E6A81 2px solid;
margin-left: -4px;
margin-right: -4px;
}

.rightContentContainer p{
font-size: 1em;
}

.leftContentContainer {
width: 52%;
margin-left: 0;
margin-right: 0;

}

.leftContentContainer img{
max-width: 90%;
max-height: 550px;
position: relative;
margin: 30px 5%;
}

.anotherBook {
display: block;
width: 100%;
background: url(../img/herobg.jpg);
color: #ede9dd;
color: #333;
border-bottom: solid 2px #ff5722;

/* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
	
}

#hero h1, .anotherBook h1 {
font-size: 2em;
}

@media screen and (max-width: 1150px) { 
	 .leftContentContainer img{margin: 40px 5%;}
	 #hero h1, .anotherBook h1 {font-size: 1.8em;}
	 .rightContentContainer {border-bottom: none;}
}

@media screen and (max-width: 950px) { 
	.btnBox {margin-left: 0px;} 
}