﻿body {
    color: black;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 16px;
    
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
    font-size: 1.5em;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

.textInput {
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
       -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
          transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.textInput:focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
          box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}

/* general */
.fl {float: left}
.fr {float: right}
.db {display: block !important}
.ib {display: inline-block}
.ab {position: absolute}
.rel {position: relative}
.bold {font-weight:bold}
.italics {font-style: italic;}

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
  font-family: 'Roboto Condensed', sans-serif;
  line-height: 1.1;
}
.just {text-align:justify}
.tac {text-align:center}
.tal {text-align:left}
.tar {text-align:right}
.w050 {width: 50px}
.w075 {width:75px}
.w095 {width:95px}
.w100 {width:100px}
.w120 {width:120px}
.w160 {width:160px}
.w175 {width:175px}
.w250 {width:250px}
.w300 {width:300px}
.vam {vertical-align:middle}


nav {
    color: #fd010c;
    width: 100%;
    height: 25px;
    text-align: left;
    -webkit-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.4);
    -moz-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.4);
    box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.4);
    clear: both;
    position: relative;
    z-index: 10;
    min-width: 768px;
}

.nav > li > a {
    position: relative;
    display: inline-block !important;
    padding: 8px 20px;
    font-weight: bold;
    font-size: 1.25em;
    /*color: #686868;*/
}

.navbar-nav > li > a {
    padding-top: 5px;
    padding-bottom: 5px;
    line-height: 15px;
}

body:not(:-moz-handler-blocked) .navbar-nav > li > a { /* FF hack */
    padding-top: 8px;
    padding-bottom: 9px;
}

nav:hover, a:focus {
    color: #fd010c;
    text-decoration: underline;
}

.just {text-align:justify}
.tac {text-align:center}
.tal {text-align:left}
.tar {text-align:right}
.w100 {width:100px}
.w120 {width:120px}
.w160 {width:160px}
.w175 {width:175px}
.w177 {width:177px}
.vam {vertical-align:middle}
.vab {vertical-align: bottom}

/* margins/padding */
.mtop5 {margin-top: 5px}
.mtop7 {margin-top: 7px}
.mtop10 {margin-top: 10px}
.mtop15 {margin-top: 15px}
.mtop20 {margin-top: 20px}
.mtop25 {margin-top: 25px}
.mtop30 {margin-top: 30px}
.mtop35 {margin-top: 35px}
.mtop50 {margin-top: 50px}
.mtop60 {margin-top: 60px}
.mtop70 {margin-top: 70px}
.mtop80 {margin-top: 80px}
.mtop100 {margin-top: 100px}
.mbot5 {margin-bottom: 5px}
.mbot10 {margin-bottom: 10px}
.mbot15 {margin-bottom: 15px}
.mbot20 {margin-bottom: 20px}
.mbot25 {margin-bottom: 25px}
.mbot30 {margin-bottom: 30px}
.mbot35 {margin-bottom: 35px}
.mbot50 {margin-bottom: 50px}
.mleft5 {margin-left: 5px}
.mleft10 {margin-left: 10px}
.mleft15 {margin-left: 15px}
.mleft20 {margin-left: 20px}
.mleft25 {margin-left: 25px}
.mleft40 {margin-left: 40px}
.mleft160 {margin-left: 160px}
.mleft175 {margin-left: 175px}
.mleft183 {margin-left: 183px}
.mright2 {margin-right: 2px}
.mright5 {margin-right: 5px}
.mright8 {margin-right: 8px}
.mright10 {margin-right: 10px}
.mright15 {margin-right: 15px}
.mright20 {margin-right: 20px}
.mright25 {margin-right: 25px}
.mright40 {margin-right: 40px}
.mright50 {margin-right: 50px}
.p5 {padding: 5px;}
.p7 {padding: 7px;}
.p10 {padding: 10px;}
.p15 {padding: 15px;}
.ptop5 {padding-top: 5px}
.ptop7 {padding-top: 7px}
.ptop10 {padding-top: 10px}
.ptop15 {padding-top: 15px}
.ptop20 {padding-top: 20px}
.ptop25 {padding-top: 25px}
.ptop50 {padding-top: 50px}
.ptop55 {padding-top: 55px}
.ptop70 {padding-top: 70px}
.ptop100 {padding-top: 100px}
.ptop100 {padding-top: 120px}
.pbot5 {padding-bottom: 5px}
.pbot10 {padding-bottom: 10px}
.pbot15 {padding-bottom: 15px}
.pbot20 {padding-bottom: 20px}
.pbot25 {padding-bottom: 25px}
.pleft5 {padding-left: 5px;}
.pleft10 {padding-left: 10px;}
.pleft15 {padding-left: 15px;}
.pleft20 {padding-left: 20px;}
.pleft25 {padding-left: 25px;}
.pright5 {padding-right: 5px;}
.pright10 {padding-right: 10px;}
.pright15 {padding-right: 15px;}
.pright20 {padding-right: 20px;}
.pright25 {padding-right: 25px;}

/* colors */
.red {color: #a02727;}
.yellow {color: yellow;}
.green {color: #a0bf57}
.blue {color: #0397d5}
.black {color: #000;}
.darkblue {color: #1a71b0}
.lightblue {color: #abceec}
.gray {color: #686868;}
.lightgray {color: #d7d7d7;}

.white {color: #fff;}
.cream {color: cornsilk;}
.brown {color: #716f67;}
.gray {color: #717171;}
.gold {color: #caac59;}
.olive {color: #7b6c41;}

/*theme background colors*/
.whiteBG {background-color: white}
.redBG {background-color: #a02727;}
.lightRedBG {background-color: #fc6f6f;}
.lightGoldBG {background-color: #fee49e;}
.lightGreenBG {background-color: #cee59c;}
.brownBG {background-color: #716f67;}
.grayBG {background-color: #717171;}
.goldBG {background-color: #caac59;}
.oliveBG {background-color: #7b6c41;}
.creamBG {background-color: cornsilk;} /*lightgoldenrodyellow or #CEE0DC?*/
.skyBlueBG {background-color: #78aed9;}
.lightBlueBG {background-color: #97bedd;}
.silverBG {background-color: #EEEEEE;} /*lightslategray or cadetblue?*/

/* font sizes */
.em5 {font-size: .5em;}
.em6 {font-size: .6em;}
.em7 {font-size: .7em;}
.em8 {font-size: .8em;}
.em9 {font-size: .9em;}
.em105 {font-size: 1.05em;}
.em11 {font-size: 1.10em;}
.em115 {font-size: 1.15em;}
.em12 {font-size: 1.2em;}
.em14 {font-size: 1.4em;}
.em16 {font-size: 1.6em;}
.em18 {font-size: 1.8em;}

/* image shadow box */
.ShadowBox {
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.60);
    -moz-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.60);
    -webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.60);
    margin-bottom: 10px;
}

header {
    position: relative;
}

.header_logo_container {
    height: auto;
    margin-left: 25px;
    position: absolute;
    top: 20px;
    max-width: 400px;
    z-index: 7000
}

/*buttons*/
.btn-main {
    color: cornsilk;
    background-color: #a02727;
}

.btn-main:hover, .btn-main:focus {
    color: cornsilk;
    background-color: #b7aa80;
}

@media (max-width: 450px) {
    .header_logo_container {
        margin: 0;
        top: 40px;
    }
}

.header_rectangle_gray {
    background-color: #716f67;
    border-bottom: 1px solid white;
    color: white;
    height: 30px;
}

.header_rectangle_gold {
    background-color: #b7aa80;
    height: 80px;
}

.navbar.navbar-inverse {
    background-color: #caac59; /*#a02727 background color for nav bar*/
    border-bottom: 3px solid #7b6c41;
    border-top: 3px solid #7b6c41;
    font-family: 'Roboto Condensed', sans-serif;
    margin-bottom: 0;
}

.navbar-inverse .navbar-nav > li > a {
    color: white;
    font-size: 25px;
    font-weight: normal;
    padding-top: 13px;
}

    .navbar-inverse .navbar-nav > li > a:hover {
        color: #716f67;
        padding-top: 13px;
        padding-bottom: 5px;
    }

.header_socialmedia_container {
    text-align: right;
    padding-right: 15px;
    padding-top: 2px;
}

.owl-carousel.owl-theme .owl-dots {
    position: relative;
    top: -60px; /*controls position of dots*/
}

.btn-nav {
    background: none;
    background-color: transparent;
    border: none;
    color: white;
    font-size: 25px;
    padding-top: 2px;
    outline: 0;
}

    .btn-nav:hover {
        color: #716f67;
    }

.dropdown-menu {
    background-color: #caac59;
    border-bottom: 2px solid #7b6c41;
    border-left: 2px solid #7b6c41;
    border-right: 2px solid #7b6c41;
    border-top: none;
    border-radius: 0;
    top: 40px;
}

.dropdown-menu > li > a {
    color: white;
    font-size: 22px;
}

@media (max-width: 767px) {
    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
        color: white;
    }

        .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover {
            color: #716f67;
        }
}

.mainNav {
    float: right;
}

@media (max-width: 768px) {
    .mainNav {
        float: none;
    }

    .btn-nav {
        margin-left: 20px;
    }
}

.header_gluten-free_container {
    float: right;
    padding-right: 15px;
    padding-top: 4px;
}

.header_gluten-free_container img {
    height: 60px;
    width: 60px;
    margin-top: 5px;
}

.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}

#overlayCheckout {
    background: #ffffff;
    color: #666666;
    position: fixed;
    height: 100%;
    width: 100%;
    z-index: 5000;
    top: 0;
    left: 0;
    float: left;
    text-align: center;
    padding-top: 25%;
    opacity: .80;
}

.spinnerCheckout {
    margin: 0 auto;
    height: 64px;
    width: 64px;
    animation: rotate 0.8s infinite linear;
    border: 5px solid firebrick;
    border-right-color: transparent;
    border-radius: 50%;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}






/* Styles for the Custom Orders page */

.my-slider-cupcakes {
    display: flex;
    position: relative;    
}

.my-slider-custom-cakes {
    display: flex;
    position: relative;    
}

.my-slider-cookie-cakes {
    display: flex;
    position: relative;
}

.my-slider-cheesecakes {
    display: flex;
    position: relative;    
}

.my-slider-pies {
    display: flex;
    position: relative;    
}

.my-slider-seasonal {
    display: flex;
    position: relative;    
}

.slider-container {    
    padding: 2rem 4rem;
    margin: 1rem auto 0 auto;
    overflow: hidden;
    border-radius: 5px;    
    position:relative;    
}

.slider-item {    
    position: relative;
}

.controls {
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
    left: 0;      
    width: 100%;    
    top: 50%;
    transform: translatey(-50%);
    display: flex;
    align-items: center;    
    justify-content: space-between;
}

.controls:focus {
    outline:none;
}

.controls li:hover {
    cursor:pointer;
}

a.subnav_custom-orders {
    color: #7b6c41;
    font-weight: bold;
    text-decoration: underline;
}

a.subnav_custom-orders:hover {
    color: #caac59;
}

.rule_custom-orders {
    height:3px;
    margin-bottom:20px;
    width:100%;
}

.category-container {
    background-color: #fff8dc;
    padding:10px 7px 0;
}