/* ALL PAGES */

#mobileHeader {
    display: none;
}

#mobileModal {
    display: none;
}

#header {}

#topHeader {
    height: 48px;
    border-bottom: 3px solid #c48e48;
}

#logo {
    float: left;
    height: 95px;
    margin-top: 2px;
    width: 7%;
}

#logo img {
    max-height: 100%;
}

.headLinks {
    text-align: center;
    width: 90%;
    height: 62px;
    font-size: 20px;
}

.headLinks li {
    margin: 20px 2%;
}

#bottomHeader {
    text-align: center;
    height: 48px;
    border-bottom: 1px solid #000;
    font-size: 18px;
}

.bottomLinks li {
    margin: 15px 1%;
}

.body {
    min-height: 900px;
    height: auto;
}

/* FRONT PAGE */

#homeOnlineNotice{
    width: 80%;
    color: #fff;
    margin: 0 auto;
    font-family: 'Roboto', sans-serif;
}

#frontBox {
    margin: 25px auto;
    width: 95%;
    height: 500px;
    border: 1px solid #c48e48;
}

#bigLeftBox {
    height: 100%;
    width: 45%;
    background-image: url(../images/tonareli_012.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-right: 1px solid #fff
}



.leftBanner {
    color: #fff;
    margin-top: 350px;
    width: 100%;
    height: 150px;
    background-color: rgba(0, 0, 0, .7);
    text-align: center;
}

.leftBanner p {
    font-size: 35px;
    color: #eef;
    padding-top: 50px;
    ;
}

#bigRightBox {
    height: 100%;
    width: 54%;
}

#topRightBox,
#midRightBox,
#botRightBox {
    height: 165px;
    margin: 0 -3px;
    border-bottom: 1px solid #c48e48
}

#topRightBox {
    background-image: url(../images/504.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

#midRightBox {
    background-image: url(../images/core.bobelock_004.jpg);
    background-position: ;
    background-size: cover;
}

#botRightBox {
    background-image: url(../images/tonareli_015.jpg);
    background-position: left;
    background-size: cover;
}

.rightBanner {
    position: relative;
    top: 30%;
    width: 100%;
    background-color: rgba(0, 0, 0, .7);
    height: 80px;
}

.rightBanner p {
    text-decoration: none;
    font-size: 25px;
    padding-top: 30px;
}

/* PRODUCT */

#bobelockNavigation{
    margin: 15px;
    text-align: center;
}

#bobelockNavigation span{
    margin: 0 5px;
}

#productHeader{
    margin: 30px;
    text-align: center;
    font-family: 'Lobster', cursive;
    font-size: 30px;
    color: #fff;
}

.productHeader{
    margin: 30px;
    text-align: center;
    font-family: 'Lobster', cursive;
    font-size: 30px;
    color: #fff;
}

.productBody{
    text-align: center;
}

.productBox{
    text-align: center;
    display: inline-block;
    vertical-align: top;
    height: 190px;
    width: 12%;
    border: 3px solid #fff;
    margin: 1%;
    padding: 1% 0;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.bigProductBox{
    text-align: center;
    display: inline-block;
    vertical-align: top;
    height: 220px;
    width: 12%;
    border: 3px solid #fff;
    margin: 1%;
    padding: 1% 0;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}


.productBoxImage{
    height: 150px;
    width: 100%;
    border-bottom: 1px solid #fff;
    padding-bottom: 5px;
}

.productBoxImage img{
    max-height: 100%;
    max-width: 90%;
}

.productText{
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    padding-bottom: 25px;
}

.downloadBox{
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    border-top: 1px solid #fff;
    padding-bottom: 18px;
}


/* NEW PRODUCT BODY */

#productHeader {
    margin: 0 auto;
    height: 35px;
}

.productSpot {
    margin: 30px auto 0;
    height: 700px;
    width: 80%;

}

.productSlide {
    margin: 37px auto;
    height: 80px;
}

.productBanner {
    height: 100%;
    width: 32%;
    border: 1px solid #fff;
}

.productOverlay {
    display: none;
    position: absolute;
    height: 700px;
    width: 25.5%;
    background: rgba(0, 0, 0, .9)
}

.productOverlayP {
    text-align: left;
    color: #fff;
    font-family: 'Open Sans', sans-serif;
    margin: 100px auto;
    width: 85%;
}

.selectBox {
    margin: 35px 5px;
    height: 50px;
    width: 50px;
    border: 1px solid #fff;
}

.selectBox img {
    max-height: 90%;
    margin: 2px auto;
}

.selectBox:hover {
    cursor: pointer;
}

#bannerFirst,
#banner2,
#banner3,
#banner4,
#banner5,
#bannerLast {
    background: rgb(71, 163, 129);
    background: linear-gradient(0deg, rgba(71, 163, 129, 1) 0%, rgba(42, 52, 71, 1) 29%);

}

.bannerImage {
    margin-top: 30%;
    max-width: 95%;
    max-height: 70%;
}

.productBannerHeader {
    font-family: 'Montserrat', cursive;
    color: #fffcc7;
    font-size: 30px;
    margin-top: 25px;
    letter-spacing: .7px;
    font-weight: ;
}

/* CART TEMPLATES */

.cartBody{
    min-height: 1000px;
    background-color: #fff;
    color: #000;
}

#cartInfo{
    padding: 35px;
}

#theCart{
    width: 90%;
    margin: 25px auto;
}

#productLinkSpot{
    margin: 15px;
    text-align: right;
}

.infoSpot,
.imageSpot{
    padding-top: 30px;
    display: inline-block;
    vertical-align: top;
}

.infoSpot{
    margin-top: 20px;
    width: 35%;
    text-align: left;
}

.imageSpot{
    width: 45%;
}

.imageSpot img{
    max-height: 90%;
    max-width: 90%;
}


#imageBox {
    height: 600px;
    width 35%;
    margin: 3% 0 0 2%;
}

#imageBox img{
    max-height: 98%;
    max-width: 98%;
}

#topImage {
    position: relative;
    height: 400px;
    padding: 2px;
    width: 100%;
}

.leftArrow {
    position: absolute;
    left: 5px;
}

.rightArrow {
    position: absolute;
    right: 5px;
}

.leftArrow,
.rightArrow {
    top: 40%;
    z-index: 1;
    padding: 15px;
    font-size: 45px;
    opacity: .2;
    color: #fff;
}

.leftArrow:hover,
.rightArrow:hover {
    color: #c48e48;
    opacity: 1;
    transition: 1.5s;
    cursor: pointer;
    background: #000;
}

#topImage img {
    max-height: 400px;
    max-width: 98%;
    margin: auto;
    overflow: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

#bottomImage {
    text-align: center;
    height: 200px;
    width: 100%;
    border-top: 1px solid #fff;

}

#bottomImage img {
    border: 1px solid #fff;
    padding: 2px;
    height: 73px;
    width: 73px;
    margin: 10px 5px;
}

#bottomImage img:hover {
    cursor: pointer;
}

#megaImageBox {
    display: none;
    position: absolute;
    text-align: center;
    top: 20px;
    bottom: 0;
    z-index: 2;
    height: 1200px;
    width: 100%;
    background-color: rgba(0, 0, 0, .9);
}

.megaLeftArrow,
.megaRightArrow {
    color: white;
    position: absolute;
    z-index: 5;
    padding: 15px;
    top: 20%;
    font-size: 65px;
}

.megaLeftArrow {
    left: 15px;
}

.megaRightArrow {
    right: 15px;
}

#megaImageBox img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    max-height: 70%;
    max-width: 100%;
}

#topRight {
    position: absolute;
    ;
    right: 0;
    text-align: right;
    margin: 35px;
    font-size: 25px;
}

#topRight:hover {
    cursor: pointer;
}

#leftArrow {
    position: absolute;
    left: 0;
}

#rightArrow {
    position: absolute;
    right: 0;
}

#leftArrow,
#rightArrow {
    top: 35%;
    padding: 5px;
    font-size: 45px;
    margin: 0 15px;
}

#leftArrow:hover,
#rightArrow:hover,
.megaLeftArrow:hover,
.megaRightArrow:hover {
    background: #c48e48;
    color: #000;
    transition: .7s;
    cursor: pointer;
}

.searchInfoCorner{
    color: #fff;
    font-size: 14px;
    font-family: 'Roboto', sans-serif;
    padding: 12px;
}

.searchResultBox{
    display: inline-block;
    height: 300px;
    width: 20%;
    border: 1px solid #fff;
    margin: 5px 10px;
	vertical-align: middle;
}

.topSearchResult{
    height: 200px;
    border-bottom: 1px solid #fff;
	vertical-align: middle;
}

.topSearchResult img{
    max-height: 95%;
    max-width: 95%;
	vertical-align: middle;
}

.bottomSearchResult{
    padding: 3px;
    height: 99px;
    color: #fff;
    font-size: 14px;
    font-family: 'Roboto', sans-serif;
}

/* CHECK OUT PAGE */

.checkOutSection{
    width: 80%;
    margin: 0 auto;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    
}

.checkOutHeader{
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
    text-align: center;
    margin: 10px 0 3px;
}

.leftCheckOut,
.rightCheckOut{
    display: inline-block;
    vertical-align: top;
}
.leftCheckOut{
    width: 38%;
    text-align: right;
    font-size: 17px;
}

.rightCheckOut{
    width: 60%;
}

.checkOutItem{
    height: 35px;
}

#line{
    margin: 5px auto;
    width: 80%;
    border: 2px solid #000;
}

#highlightedSection{
    background: #ff5;
    height: 80px;
}

/* FOOTER */

#foot {
    height: 35px;
    width: 100%;
    background-color: #332d2F;
    color: #c48e48;
    text-align: left;
    border-top: 1px solid #703030;
}

#foot p {
    padding: 10px;
    color: #c48e48;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
}


/* Useful Classes */

.leftAlign{
    text-align: left;
}

.centerAlign {
    text-align: center;
}

.emph {
    font-style: italic;
}

.underline{
    text-decoration: underline;
}

.borderBottom{
    border-bottom: 1px solid #fff;
}

.backgroundColor{
    background: #231f20;
}

.bold{
    font-weight: bold;
}

.smallerFont{
    font-size: 14px;
	line-height: 1.3;
}

.fontSizeTwenty{
    font-size: 20px;
}

.fontSizeTwentyFive{
    font-size: 25px;
}

.pacifico{
    font-family: 'Pacifico', cursive;
}

.lobster{
    font-family: 'Lobster', cursive;
}

.roboto{
    font-family: 'Roboto', sans-serif;
}

.openSans{
    font-family: 'Open Sans', sans-serif;
}

.inlineBlock{
    display: inline-block;
    vertical-align: top;
}

.noDecoration{
    text-decoration: none;
}

.colorBlack{
    color: #000;
}

.colorGold{
    color: #c48e48;
}

.colorWhite{
    color: #fff;
}

.sideMargin{
    margin: 0 25px;
}

.marginLeftTen{
    margin-left: 10px;
}

.marginTopTen{
    margin-top: 10px;
}

.marginTopTwentyFive{
    margin-top: 25px;
}

.marginTopFifty{
    margin-top: 50px;
}

.marginBottomFive{
    margin-bottom: 5px;
}

.marginBottomTwentyFive{
    margin-bottom: 25px;
}

.verticalMarginTwentyFive{
    margin: 25px 0;
}

.marginAuto{
    margin: 0 auto;
}

.betterImage{
    height: 300px;
    width: 300px;
}

.standardHeader{
    font-size: 35px;
    font-family: 'Lobster', cursive;
    color: #c48e48;
    text-align: center;
}

.boxHeader{
    font-size: 25px;
    font-family: 'Lobster', cursive;
    color: #c48e48;
    text-align: center;
}

.bulletList{
    list-style: disc;
}

.halfWidth{
    width: 50%;
}

.notice{
    color: red;
    font-weight: bold;
    text-align: center;
    font-size: 16px;
    font-family: 'Open Sans', sans-serif;
    margin-top: 5px;
    width: 80%;
    margin: 5px auto;
}

.hide{
    display: none;
}

.bodyText{
    color: #fff;
    font-family: 'Open Sans', sans-serif;
    margin: 15px auto;
    width: 80%;
}