@charset "UTF-8";
/* CSS Document */


/*================================
    GENERAL STYLES
==================================*/
body {
	padding-top: 140px;
	font-family: Proxima Nova;/* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}
.container {
	width: 100%;
	padding-top: 50px;
	padding-bottom: 50px;
}
.content {
	text-align: center;
	max-width: 1500px;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.row{
	margin-left: 0px;
	margin-right: 0px;
	
	}
	
.nopad{
	padding-left: 0px;
	padding-right: 0px;
	
	}

/*================================
    CLASSES STYLES
==================================*/

.removedecoration:hover {
	text-decoration: none;
}
.navinline {
	display: inline;
}
#stretch {
	height: 1500px;
}
/*================================
    HEADER STYLES
==================================*/
	
#navcontainter {
	width: 98%;
	max-width: 1500px;
	margin-left: 1%;
	margin-right: 1%;
	height: 140px;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
#navbar {
	background-color: rgba(252, 252, 252, 0.98);
	border-color: rgba(252, 252, 252, 0.98);
	height: 140px;
}
div#logocontainer {
	width: 35%;
	height: 100%;
	overflow: hidden;
	display: inline-block;
	float: left;
}
img#smalllogonav {
	width: 75%;
	max-width: 260px;
	height: 100%;
	padding-bottom: 5px;
	padding-top: 5px;
	margin-left: 30px;
}
#navlinkscontainer {
	width: 35%;
	display: inline-block;
	padding: 20px;
	float: left;
}
#navlist {
	list-style-type: none;
	font-size: 20px;
	text-transform: uppercase;
	width: 100%;
	text-align: right;
	padding: 10px;
}
#navlistsmall {
	font-size: 10px;
	text-transform: uppercase;
	color: #162D54;
	width: 100%;
	padding: 10px;
	text-align: right;
}
.navstyle {
	color: #162D54;
	margin-left: 15px;
	border-bottom: 4px solid rgba(252, 252, 252, 0.98);
	transition: border-bottom .3s;
}
.navstyle:hover {
	color: #162D54;
	border-bottom: 4px solid #162D54;
}
.navstylesmall {
	color: #162D54;
	margin-left: 5px;
}
#searchcontainer {
	width: 30%;
	display: inline-block;
	float: left;
	height: 100%;
	position: relative;
}
#searchbar {
	display: block;
	margin-right: auto;
	margin-left: auto;
	margin-top: 60px;
	width: 100%;
	height: 45px;
	padding: 0 20px;
	font-size: 1rem;
	border: 1px solid #D0CFCE;
	outline: none;
	font-size: 16px;
}
#searchbar:focus {
	border: 1px solid #162D54;
	transition: 0.35s ease;
	color: #162D54;
	font-size: 15px;
}
#searchbar:focus::-webkit-input-placeholder {
 color: transparent;
 transition: 0.35s ease;
}
.search-icon {
	width: 30px;
	position: absolute;
	top: 68px;
	right: 12px;
}
.on {
	/* background-color: #222222 !important; */
	padding: 0 !important;
	-webkit-box-shadow: 0 3px 5px rgba(57, 63, 72, 0.55);
	-moz-box-shadow: 0 3px 5px rgba(57, 63, 72, 0.55);
	box-shadow: 0 3px 5px rgba(57, 63, 72, 0.55);
}
.menu {
	visibility: hidden;
}


.finalstep{
    margin-top: 150px;
   color: #f1c40f !important;
    text-transform: none !important;
     transform: rotate(-5deg);
}

.alignright{
    text-align: right !important;
    transform: rotate(5deg);
   
}


 @media screen and (max-width: 992px) {
#myNavbar {
	display: none !important;
}
.menu {
	visibility: visible !important;
}
#searchcontainer {
	width: 45%;
}
div#logocontainer {
	width: 30%;
}
.search-icon {
	display: none;
}
#searchbar {
	font-size: 12px;
}
}
 @media screen and (max-width: 768px) {
.navlogo {
	content: url("file:///Users/shaunpearce/Desktop/BookDealer/startbootstrap-bare-1.0.3/img/mobilelogo2.png");
}
img#smalllogonav {
	width: 100%;
	max-width: 150px;
	display: block;
	margin-left: auto;
	margin-right: auto;
}


}
/*================================
    BANNER STYLES
==================================*/

#homebanner {
	height: 100%;
}
#homebannercontainer {
	background-color: rgb(41, 128, 185);
	background: -webkit-linear-gradient(left, rgba(68, 108, 179, 0.9) 10%, rgba(65, 131, 215, 0.9) 90%);
	padding-bottom: 0px;/* background: -webkit-linear-gradient(left, rgba(41, 128, 185, 0.9) 10%, rgba(52, 152, 219, 0.9) 90%); */
    /* background: -webkit-linear-gradient(left, rgba(44, 62, 80, 0.9) 10%, rgba(52, 73, 94, 0.9) 90%);*/
}
#biglogocontainer {
	width: 50%;
	height: 100%;
	padding: 50px 0px;
	float: left;
}
#homebiglogo {
	width: 100%;
	max-width: 500px;
}
#titlecontainter {
	width: 50%;
	float: right;
	height: 100%;
	padding-top: 100px;
	padding-bottom: 50px;
}
/*#titlelines {
    margin-top: 20%;
}*/


h2#titlel1 {
	font-size: 35px;
	/* line-height: 20px; */
	font-family: Proxima Nova;
	font-weight: 600;
	color: white;
	/* color: #2980B9; */
	text-transform: uppercase;
	color: #162D54;
}
h2#titlel2 {
	font-size: 25px;
	/* line-height: 20px; */
	font-family: Proxima Nova;
	font-weight: 200;
	color: white;/* color: #162D54; */
    /* text-transform: uppercase; */
}
.titlebutton {
	font-family: Proxima Nova;
	font-weight: 200;
	color: white;
	color: #162D54;
	font-size: 18px;
	border: 2px solid white;
	border-radius: 5px;
	padding: 8px;
	width: 150px;
	color: white;
	display: inline-block;
	margin: 40px 10px;
}
#registerbutton:hover {
	background-color: white;
	cursor: pointer;
	color: #231F20;
	transition: .3s ease;
}
#learnbutton {
	background-color: white;
	color: #162D54;
}
#learnbutton:hover {
	background-color: #162D54;
	color: white;
	cursor: pointer;
}
span#student {
	color: #f1c40f;
}
 @media screen and (max-width: 992px) {
#biglogocontainer {
	width: 100%;
	height: 50%;
}
#titlecontainter {
	width: 100%;
	height: 50%;
	padding-top: 0px;
}
}
/*================================
    SERVICE STYLES
==================================*/

div#servicecontainer {
	/*padding: 0px;*/
	position: relative;
}
div#backgroundservice {
	height: 50%;
	width: 100%;
	position: absolute;
	background-color: rgb(41, 128, 185);
	background: -webkit-linear-gradient(left, rgba(68, 108, 179, 0.9) 10%, rgba(65, 131, 215, 0.9) 90%);
}
h1#sectiontitle {
	color: #162D54;
	font-weight: 700;
	text-transform: uppercase;/* font-family: Marker; */
    margin-top: 50px;
    
}
hr#sectiontitlehr {
	width: 80px;
	height: 20px;
	border-top: 3px solid #162D54;
     margin-bottom: 50px;
}
img#serviceicon {
	width: 200px;
	border: 15px solid white;
	border-radius: 50%;
}
h2#servicetitle {
	padding-top: 10px;
	font-size: 26px;
	color: #162D54;
	font-weight: 600;
	font-family: Marker;/* text-transform: uppercase; */
}
h3#servicedesc {
	font-size: 18px;
	color: #4E4E4E;
	font-weight: 100;
	padding: 0px 15px;
}



/*================================
    EXPLAIN STYLES
==================================*/


div#explain {

   
}

div#explaincontainer {
    padding: 0px 0px 0px 0px;
    background: linear-gradient(90deg, #446CB2 50%, #4183D7 50%);
}


div#explainsell {
    width: 50%;
    background-color: #E74C3C;
	background-color: #34495E;
	background-color: #3498DB;
	 background-color: rgba(68, 108, 179, 0.9);
    height: 100%;
	float: left;
	padding-top: 25px;
	overflow: hidden;
	padding: 30px;
}

div#explainbuy {
    height: 100%;
    width: 50%;
    background-color: #C0392B;
	background-color: #2C3E50;
	background-color: #2980B9;
	   
		background-color: rgba(65, 131, 215, 0.9);
    float: right;
	padding-top: 25px;
	padding: 30px;
}


div#explaintitle {
    background: -webkit-linear-gradient(left, rgba(68, 108, 179, 0.9) 10%, rgba(65, 131, 215, 0.9) 90%);
	padding-top: 50px;
	padding-bottom: 5px;
}

span#explaintitlefont {
    font-weight: 700;
    font-size: 65px;
    text-transform: uppercase;
    color: white;
    color: #162D54;
    text-shadow: 5px 5px rgba(49, 49, 49, 0.13);
}

span#explaintitle2font {
    color: #162D54;
    color: white;
    text-transform: uppercase;
    font-size: 20px;
    font-weight: 200;
}

h3#exptitle2font {
    color: white;
     color: #162D54; 
     color: #f1c40f;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 70px;
    text-shadow: 5px 5px rgba(49, 49, 49, 0.13);
    text-decoration: underline;
	
	font-family:babas;
	 text-decoration: underline dotted red;
}

img#explainpic {
    width: 400px;
    width: 75%;
    max-width: 400px;
    margin-top: 30px;
    /* float: right; */
}

img#explainpic2 {
    width: 400px;
    width: 100%;
    max-width: 400px;
    margin-top: 30px;
    float: right;
}



h2#explaintext1 {
    font-family: Written;
    color: #162D54;
    font-size: 20px;
    text-transform: uppercase;
    text-align: left; 
    /* font-family: Babas; */
}

div#explainrow {
    padding: 20px;
}

span#money {
    color: #2ECC71;
}

h3#explaintext2 {
    font-size: 12px;
    color: white;
    font-family: written;
    text-align: left;
   
    line-height: 18px;
}
div#explaintextcontainer {
    margin: 20px;
}


span#step {
    font-family: Chunk;
    font-size: 28px;
    color: white;
	color:#f1c40f;
}


span#qa {
    font-family: Babas;
    font-size: 30px;
    text-decoration: underline;
    text-shadow: 5px 5px rgba(49, 49, 49, 0.13);
    color: white;
}
.exptitle
{
	margin:0px;
	
}

#sell1pic{
    width: 400px;
}

#buy1pic {
    width: 300px;
}


img#baricons {
    width: 35%;
    margin-left: 5%;
    margin-right: 5%;
	
	
}


span#stepfinal {
    font-family: Chunk;
    font-size: 36px;
    color: white;
    color: #f1c40f;
	text-transform: uppercase;
}

img#finalpic {
  
	margin-left: -20px;
}

div#explaintitlefinal {
    height: 450px;
    /* background-image: url('smiley.gif'); */
    background-image: url('../img/exchange.png');
    /* background-attachment: fixed; */
    background-position: center;
    background-repeat: no-repeat;
	background-size: 100% 100%;
}



div#recentad {
    height: 280px;
    font-family: 'Roboto', sans-serif;
    
}

.adcontainer{
    height: 280px;
    margin-bottom: 50px;
}

#bookpic{
    height: 100%;
    background-size: 100% 100%;
    border-radius: 5px 0px 0px 5px;
    
}

#bookinfo{
    background-color: rgba(244, 245, 247, 0.5);
    height: 100%;
    border-radius: 0px 5px 5px 0px;

        
}

#booktitle{
    font-size: 24px;
    
}


#info1, #info2{
   font-size: 18px;
    padding: 40px 20px;
    font-weight: 500;
}

.light{
    font-weight: 300;
}

#datetext{
    font-size: 12px;
    opacity: 0.6;
    position: absolute;
    bottom: 0;
    left: 30px;
}



#footer{
    margin-top: 150px;
    background-color: #1D1D1D;
    padding: 60px 250px;
}

.footertext {
    
    color: white;
    font-size: 18px;
    font-weight: 500;
    font-family: 'Roboto', sans-serif;
}

.vlight{
    font-weight: 100;
}


img.graylogo{
    -webkit-filter: grayscale(100%);
filter: grayscale(100%);
}

 @media screen and (max-width: 768px) {
	h2#explaintext1{
		font-size:14px;
		
		}
		
	h3#explaintext2{
		font-size: 8px;}
		
	img#baricons {
    width: 20%;
    margin-left: 5%;
    margin-right: 5%;
	
	
}	

img#explainpic {
    width: 400px;
    width: 100%;
    max-width: 400px;
    margin-top: 20px;
    /* float: right; */
}


div#explaintitlefinal {
    height: 200px;
    /* background-image: url('smiley.gif'); */
    background-image: url('../img/exchange.png');
    /* background-attachment: fixed; */
    background-position: center;
    background-repeat: no-repeat;
    background-size: 150% 100%;
}
}