/* custom style sheet for new styles and to overwrite bootstrap styles */

html {
    //background: url('../img/1920x1080-Yellow-Gradient.png') no-repeat center center fixed;
    background-color: #FFF8DC;
    //-webkit-background-size: cover;
    //-moz-background-size: cover;
    //-o-background-size: cover;
    //background-size: cover;
}


body {
/*font-family: 'Amatic SC', cursive, sans-serif, arial, helvetica;*/
font-family: 'Cabin Sketch', cursive, sans-serif, arial, helvetica;
font-size: 14px;
color: #000;
-webkit-font-smoothing: antialiased;
background: transparent;
position: relative;
}

body .modal {
     overflow: hidden;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Cabin Sketch', cursive, sans-serif, arial, helvetica;
    font-weight: 300;
    line-height: 1.1;
    color: inherit;
}

.wrapper {
    display:block;
    margin-left:10%;

}

@media (min-width: 1920px) {
  .wrapper {
    margin-left:18%;
}
}

@media (max-width: 1160px) {
  .wrapper {
    margin-left:5%;
}
}

/* custom text styles */
.amatic {
    font-family: 'Amatic SC', cursive, sans-serif, arial, helvetica;

}

.dosis {
    font-family: 'Dosis', sans-serif; arial, helvetica;

}

.cabin {
    font-family: 'Cabin Sketch', cursive, sans-serif, arial, helvetica;
    //text-transform: uppercase;

}

.cedarville {
    font-family: 'Cedarville Cursive', cursive;

}

.text-white {
    color: #fff;
}

.text-red {
    color:#c60c48;
}

.text-green {
    color:#4aa942;
}
/* custom text styles */



/* background styles */
.fullBackground {
    background: url('../img/home-image.png') no-repeat bottom left fixed;
    height:860px;
    padding-top: 100px;
}

.fullBackground2 {
    min-height: 800px;
    background: url('../img/1920x1080-Yellow-Gradient.png') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

.white-background {
    background-color: #fff;
    border-color: #fff;
}
/* background styles */





/* img styles */
.img-right {
    position: relative;
    float: right;
    top: -6px;
}

.img-right-blendtec {
    position: relative;
    float: left;

    max-height:30px;
}

.img-left{
    position: relative;
    float: left;
    top: 0px;
}


.topSpace {
    margin-top: 68px;
}



.padRight {
    padding-right: 68px;
    min-width: 300px;
    left:60px;
}



@media (max-width: 991px) {
  .padRight {
    left:0;
}
}
/* 
@media (max-width: 768px) {
  .padRight {
    padding-right: 0;
    min-width: 300px;

    position: relative;
    right: 0;
}
}
 */




.center {
    margin:0 auto;
}

.trans {
    //opacity: 0.9;
}
/* img styles */



/* Navbar */
.navbar-brand {
    float: left;
    padding: 14.5px 15px;
    font-size: 19px;
    line-height: 21px;
    height: auto;
}

.navbar {
    font-family: 'Amatic SC', cursive, sans-serif, arial, helvetica;

}

.navbar-inverse {
    background-color: #fff;
    border-color: #fff;
}

.navbar-inverse .navbar-nav > li > a {
    font-size: 24px;
    margin-top: 16px;
    color: #4aa942;

}

.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {
    color: #572700;
    background-color: #fff;
    
}


@media (max-width: 768px) {
  .navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {
    display:block;
    color: #4aa942;
    background-color: #fff;
    border-bottom: 0;
}
}


.navbar-toggle {
    background-color: #fff;
}


.navbar-inverse .navbar-toggle .icon-bar {
    background-color: #eee;
}

.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus {
    background-color: #fff;
}

.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
    border-color: #fff;
}
/* Navbar */





/* Btn */
.btn {
    white-space: normal;
}


.btn-lg {
    font-size: 24px;
    color:#fff;
    background-color: #c60c48;
    border-color: #c60c48;
    border-radius: 3px;
}

.btn-lg:hover {
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
    color: #fff;
    background-color: #e02460;
    border-color: #e02460;
}
/* Btn */




/* ingredients */
.ingredients {
    color: #000;
    background-color: #c3db09;
    border-color: #c3db09;
    border-radius: 3px;
    max-height: 44px;
    overflow: hidden;
    margin-top:4px !important;
    -webkit-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.41);
    -moz-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.41);
    box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.41);
}

.ingredients:hover {
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
    color: #ffffff;
    background-color: #848f31;
    border-color: #848f31;
    border-radius: 3px;
}

.ingredients:focus {
    color: #ffffff;
    background-color: #b3c242;
    border-color: #b3c242;
    border-radius: 3px;
}

.ingredients-inner {
    display:block;
}

.apple {
    background-color: #ff9eb0;
    border-color: #ff9eb0;
}
.balykale {
    background-color: #c2fc83;
    border-color: #c2fc83;
}
.banana {
    background-color: #e5d8a1;
    border-color: #e5d8a1;
}
.banana:hover {
    background-color: #c1b581 !important;
    border-color: #c1b581;
}
.banana:focus,
.banana.focus {
  background-color: #e5d8a1;
  border-color: #e5d8a1;
}
.beet {
    background-color: #ff6993;
    border-color: #ff6993;
}
.blueberry {
    background-color: #a5c1fa;
    border-color: #a5c1fa;
}
.blueberry:hover {
    background-color: #7b97d1 !important;
    border-color: #a5c1fa;
}
.blueberry:focus,
.blueberry.focus {
  background-color: #a5c1fa;
  border-color: #a5c1fa;
}
.butternutsquash {
    background-color: #ffd359;
    border-color: #ffd359;
}
.carrot {
    background-color: #f5aa5f;
    border-color: #f5aa5f;
}

.coconut {
    background-color: #f2ede1;
    border-color: #f2ede1;
}
.rasberry {
    background-color: #eb5774;
    border-color: #eb5774;
}
.rasberry:hover {
    background-color: #c64960 !important;
    border-color: #eb5774;
}
.rasberry:focus,
.rasberry.focus {
  background-color: #eb5774;
  border-color: #eb5774;
}
.orange {
    background-color: #ffc535;
    border-color: #ffc535;
}
.orange:hover {
    background-color: #dba72e !important;
    border-color: #ffc535;
}
.orange:focus,
.orange.focus {
  background-color: #ffc535;
  border-color: #ffc535;
}
.lemon {
    background-color: #fff9c9;
    border-color: #fff9c9;
}
.chocolate {
    background-color: #AC8B6C;
    border-color: #AC8B6C;
}
.chocolate:hover {
    background-color: #8e7054 !important;
    border-color: #AC8B6C;
}
.chocolate:focus,
.chocolate.focus {
  background-color: #AC8B6C;
  border-color: #AC8B6C;
}
.milk {
    background-color: #fff;
    border-color: #fff;
}
.boost {
    background-color: #f2ead2;
    border-color: #f2ead2;
}
.green-tea {
    background-color: #c6db5c;
    border-color: #c6db5c;
}

.jumbo-orange {
    background-color: #ffc535;
    border-color: #ffc535;
    color:#000;
    border-radius: 6px;
}
.jumbo-blueberry {
    background-color: #a5c1fa;
    border-color: #a5c1fa;
    color:#000;
    border-radius: 6px;
}
.jumbo-rasberry {
    background-color: #EB5774;
    border-color: #EB5774;
    color:#000;
    border-radius: 6px;
}
.high-score-box {
    background-color: #dde8ff;
    border: solid 5px #6992e5;
    color:#000;
    border-radius: 6px;
}

.practice-btn{
    margin:2px;
    border-color: transparent;
    font-size:20px;
    color:#fff;
    transition: 0.3s;
}
.practice-btn:hover{
    
}
.menu-orange {
    background-color: #ffc535;
    border-color: #ffc535;
    color:#000;
    transition: 2s;
}
.menu-orange:hover {
    background-color: #e5a000;
    border-color: #e5a000;
}
.menu-blueberry {
    background-color: #a5c1fa;
    border-color: #a5c1fa;
    color:#000;
    transition: 2s;
}
.menu-blueberry:hover {
    background-color: #7b9fe5;
    border-color: #7b9fe5;
}

.menu-rasberry {
    background-color:#EB5774;
    border-color: #EB5774;
    color:#000;
    transition: 2s;
}
.menu-rasberry:hover {
    background-color: #EB5774 !important;
    border-color: #EB5774;
}
.fruit-btn-active {
    cursor: arrow;
    -webkit-box-shadow: inset 3px 3px 5px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: inset 3px 3px 5px 0px rgba(0,0,0,0.3);
    box-shadow: inset 3px 3px 5px 0px rgba(0,0,0,0.3);
}





/* ingredients */





/* blendtec */

.blendtec {
    display:block;
    min-height: 600px;
    width:467px;
    background: url('../img/blendtec.png') no-repeat center;

}


.blendtec-blended {
    display:block;
    min-height: 600px;
    width:467px;
    background: url('../img/blendtec_trans_1.png') no-repeat center;
    background-color: #c78098;
}

@media (max-width: 989px) {
  .blendtec {
    width:370px;
}
}

.topSpaceBlendtec {
    
    padding-top: 20px;
}

.order {
    display:block;
    border: 2px solid #4aa942;
    border-radius: 30px 3px 30px 0px;
    margin:12px 0;
    padding:12px;
    font-size: 24px;
    line-height: 1em;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+75,eeeeee+100 */
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+43,f8f8f8+100 */
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(left,  #ffffff 43%, #f8f8f8 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  #ffffff 43%,#f8f8f8 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  #ffffff 43%,#f8f8f8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f8f8f8',GradientType=1 ); /* IE6-9 */
    -webkit-box-shadow: 0px 0px 16px -10px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 16px -10px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 16px -10px rgba(0,0,0,0.75);
}

.blendBtn {
    padding:10px;
    margin-top: 20px;

}


/* blendtec */



/* Progress Bar */
.progress {
    height: 16px;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.progress-bar {
    float: left;
    width: 0%;
    height: 100%;
    font-size: 13px;
    line-height: 21px;
    color: #ffffff;
    text-align: center;
    background-color: #2780e3;
    -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    -webkit-transition: width 0.6s ease;
    -o-transition: width 0.6s ease;
    transition: width 0.6s ease;
}
/* Progress Bar */

/*Accordion*/

.panel-group .panel {
    margin-bottom: 0;
    border-radius: 3px;
}
.panel-default > .panel-heading {
    color: #000;
    background-color: transparent;
    border-color: 0;
    border-radius: 3px;
}

.panel-group .panel-heading + .panel-collapse > .panel-body, .panel-group .panel-heading + .panel-collapse > .list-group {
    border-top: 0;
}
.panel-default {
    border: 0;
    background-color: #c3db09;
}
/*Accordion*/

/*Button Group For Dropdowns*/
.btn-group, .btn-group-vertical {
    width: 100%;
    margin-bottom: 6px;
}


/*Button Group For Dropdowns*/

/*Dropdown Menu*/
.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    list-style: none;
    font-size: 15px;
    text-align: left;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 3px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    width: 100%;
}
/*Dropdown Menu*/



/* footer styles */
.footerWraper {
position: fixed;
bottom: 0;
z-index: 998;
height: auto;
width: 100%;
background-color: #572700;
color: #FFC425;
margin-top: 1em;
padding-top: 1em;
line-height: 1em;
text-align: center;
}
/* footer styles */

.hide-this{
    opacity:0;
}

.col-centered{
    margin: 0 auto;
    float: none;
}