/* BODY */

body
{
  margin:0;
  padding:0;
  height:100%;
  background-color:white;
  background-image: url('../images/background-optimized.jpg');
/*  background-size: 100%; */
  background-repeat-x: no-repeat;
  background-repeat-y: no-repeat;
  background-repeat:no-repeat;

}





/* --------------------------------------------------------------------------- */
/* HEADER  begin                                                               */
/* --------------------------------------------------------------------------- */



/* Remove margins and padding from the list, and add a black background color */
ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #ffffff;
}

/* Float the list items side by side */
ul.topnav li {float: left;}

/* Style the links inside the list items */
ul.topnav li a {
    display: inline-block;
    color: #000000;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 15px;
    font-weight: bold;
    font-family: "Montserrat", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

/* Change background color of links on hover */
ul.topnav li a:hover {
 background-color: #ff4d4d;
 color:fff;
}



/* DROPDOWN MENU STYLING  */
 .topnav li ul {
    position: absolute;
    display: none;
    width: inherit;
    left:0;
  }

  .topnav li:hover ul {
    display: block;
    background-color: white;
  }

  .topnav li ul li {
    display: block;
    background-color: white;
    color: black;
    left:0;
    z-index:100;
  }








/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {display: none;}


/* When the screen is less than 1230 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */
@media screen and (max-width:1230px) {
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
@media screen and (max-width:1230px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
}


.topnav {
-moz-border-top-right-radius: 15px;
border-top-right-radius: 15px;
-moz-border-bottom-right-radius: 15px;
border-bottom-right-radius: 15px;
}


div#navbarWrapper {
  text-align: center;
  padding:20px;
  top:0;
  z-index: 10;
}

div#navbar {
  height:200px;
  align:center;
  margin: 0 auto;
  margin-left: auto ;
  margin-right: auto ; 
}

div#logo {
  position:relative;
  float: left; 
  background-image: url('../images/logo.png');
  height:200px;
  width:200px;
}


/* when screen shrinks, change logo */

@media screen and (max-width:554px) {
	div#logo {
	  position:relative;
	  float: left; 
	  background-image: url('../images/logo_bottom.png');
	  height:200px;
	  width:200px;
	  margin: auto;
	}

	.topnav {
	  border-top-right-radius: 15px;
	  border-bottom-right-radius: 15px;
	  border-top-left-radius: 15px;
	  border-bottom-left-radius: 15px;
	}
}


div#navmenu-outer {
  position:relative;
  float: left;
  text-align:left;
  width:60%;
  height:100%;
  display: table; 
}

div#navmenu-inner {
  display: table-cell;
  vertical-align: middle;
}

div#pageTitle {
  -moz-border-radius: 15px;
  border-radius: 10px;
  padding: 10px;
  text-align:center;
  position:relative;
  margin-left: auto ;
  margin-right: auto ; 
  background-color: white;
  top:40px;
  width:60%;
/*  height:50px; */
  line-height: 50px; /* <-- this is what you must define */
  vertical-align: middle;
  font-size: 26px;
  font-weight: bold;
  font-family: "Lato", sans-serif;
  text-transform: uppercase;
}


/* when screen shrinks, change Page Title  */

@media screen and (max-width:554px) {
	div#pageTitle {  width:60%; }
}


div#siteContainer {
   min-height:100%;
   position:relative;  
}



/*    HEADER BORDERS FOR DEBUGGING

div#navbarWrapper {border:1px solid white;}
div#navbar {border:1px solid black;}
div#logo {border:1px solid blue;}
div#navmenu-outer {border:1px solid red;}
div#navmenu-inner {border:1px solid yellow;}

*/


.cart-button:hover img { filter: invert(100%); }





/* --------------------------------------------------------------------------- */
/* HEADER  end                                                                 */
/* --------------------------------------------------------------------------- */






/* --------------------------------------------------------------------------- */
/* CONTENT  begin                                                              */
/* --------------------------------------------------------------------------- */

div#pageContent {
  position: relative;
  top:150px;
  margin:25px;
  height: auto;
  overflow:auto; 
  padding-bottom: 320px;  /* must be same as div#footerSection height */
}




#pageContent h1 {
  font-size: 30px;
  text-transform: uppercase;
  color: #282828;
  font-family: Montserrat;
  font-weight: bolder;
  font-style: normal;
  line-height: 40px;  
}

#pageContent h2 {
  font-size: 26px;
  text-transform: uppercase;
  color: #282828;
  font-family: Montserrat;
  font-weight: bolder;
  font-style: normal;
  line-height: 30px;  
}

#pageContent h3 {
  font-size: 20px;
  text-transform: uppercase;
  color: #282828;
  font-family: Montserrat;
  font-weight: bolder;
  font-style: normal;
  line-height: 30px;  
}

#pageContent p, #pageContent td,  #pageContent li {
  font-family: "Raleway";
  margin-bottom: 20px;
  font-size: 14px;
  color: #959595;
  line-height: 28px;
}

#pageContent a {
  text-decoration: none;
  color: #959595;
  font-weight: bold;

}



.breadcrumbs {
  display: block;
  color: #282828;
  font-family: Montserrat;
  font-size: 14px;
  text-align: left;
  margin-bottom: 50px;
}

.breadcrumbs a {
  text-decoration: none;
}

.breadcrumbs a:hover {
  text-decoration: underline;
}






/* --------------------------------------------------------------------------- */
/* CONTENT  end                                                                */
/* --------------------------------------------------------------------------- */





/* -------------------------------------------------------------------- */
/* FOOTER begin                                                         */
/* from https://www.script-tutorials.com/stylish-responsive-footer/     */
/* -------------------------------------------------------------------- */



footer {
    background-color: #2c2c2c;
    position: relative;
    z-index: 1;
}
footer .splitter {
    background-color: #e2262e;
    background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent),
        color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)),
        color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),
        to(transparent));
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
        transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
        transparent 75%, transparent);
    background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
        transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
        transparent 75%, transparent);
    background-image: -ms-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
        transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
        transparent 75%, transparent);
    background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
        transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
        transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
        transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
        transparent 75%, transparent);

    -webkit-background-size: 50px 50px;
    -moz-background-size: 50px 50px;
    background-size: 50px 50px;
    
    -moz-box-shadow: 1px 1px 8px gray;
    -webkit-box-shadow: 1px 1px 8px gray;
    box-shadow: 1px 1px 8px gray;

    height: 20px;
}
footer > ul {
    list-style: none outside none;
    margin: 0 auto;
    max-width: 1200px;
    overflow: hidden;
    padding: 25px 0;
    position: relative;
    width: 95%;
}
footer > ul li {
    float: left;
    padding: 20px 15px;
    width: 33.3%;

    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
}
footer > ul li:first-child {
    padding-left: 0;
}
footer > ul li:nth-child(3) {
    padding-right: 0;
}
footer > ul li .icon {
    color: #999999;
    float: left;
    font-size: 80px;
    line-height: 80px;
}
footer > ul li .text {
    color: #848889;
    font-size: 13px;
    line-height: 20px;
    margin: 25px;  
    position: relative;
    text-align: justify;
}
.text h4 {
    color: #ff4d4d;
    font-family: Montserrat;
    line-height: 20px;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
}

footer .bar {
    background-color: #2c2c2c;
    padding: 20px 0;
}
footer .bar-wrap {
    font-size: 12px;
    margin: 0 auto;
    max-width: 1200px;
    position: relative;
    width: 95%;
    text-align: center;
}
.links {
    float: left;
    list-style: none outside none;
    position: relative;
}
.links li {
    float: left;
    margin-right: 10px;
}
.links a {
    color: #778888;
}
.links a:hover {
    color: #FFFFFF;
}
.social {
    position: absolute;
    right: 0;
    top: 0;
}
.social a {
    color: #778888;
    margin-left: 20px;
}
.social a:hover {
    color: #FFFFFF;
}
.social .icon {
    display: inline-block;
    font-size: 36px;
    margin-right: 5px;
    vertical-align: middle;

    -webkit-transition: -webkit-transform .3s linear;
    -moz-transition: -moz-transform .3s linear;
    -ms-transition: -ms-transform .3s linear;
    -o-transition:  -o-transform .3s linear;
    transition: transform .3s linear;
}
.social a:hover  .icon {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
}
.social .info {
    display: inline-block;
    vertical-align: middle;
}
.social .info .follow {
    display: block;
}
.social .info .num {
    display: block;
}
.copyright {
    margin-top: 5px;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  line-height: 25px;
  font-weight: normal;
  font-style: normal;
  color: #fff;
  font-size: 16px;

}

/* responsive rules */
@media screen and (max-width: 1000px){
    .links, .social, .copyright{
        float:none;
        text-align:center;
    }
    .social {
        position:relative;
        margin:10px 0;
    }
    .links li {
        display:inline-block;
        float:none;
    }
    .bar {
        position:relative;
    }
    .bar-wrap {
        margin-bottom:0;
    }
}

@media screen and (max-width: 835px)  {
    footer > ul li {
        float:none;
        width:auto;
    }
}

@media screen and (max-width: 768px)  {
    .links li {
        margin-right:5px;
    }
}


.footerAccountLink { 
  color:#ffffff; 
  font-family: Montserrat;
  font-size: 22px;
  text-decoration: none;
  font-weight:800;
}

.footerAccountLink:hover { 
  color:#ff4d4d;
  text-decoration: underline;
}


/* -------------------------------------------------------------------- */
/* FOOTER end                                                           */
/* -------------------------------------------------------------------- */








/* -------------------------------------------------------------------- */
/* FORMS begin                                                          */
/* -------------------------------------------------------------------- */



input[type="submit"], button
{
  font-family: "Raleway";
  padding-top: 10px;
  padding-right: 40px;
  padding-bottom: 10px;
  padding-left: 40px;
  border-top-width: medium;
  border-right-width: medium;
  border-bottom-width: medium;
  border-left-width: medium;
  border-top-style: hidden;
  border-right-style: hidden;
  border-bottom-style: hidden;
  border-left-style: hidden;
  border-image-source: none;
  border-image-slice: 100% 100% 100% 100%;
  border-image-width: 1 1 1 1;
  border-image-outset: 0 0 0 0;
  border-image-repeat: stretch stretch;
  display: inline-block;
  border: 1px solid #ff4d4d;
  outline-width: medium;
  outline-style: none;
  text-decoration-line: none;
  text-decoration-style: solid;
  text-transform: uppercase;
  transition-property: all;
  transition-duration: 300ms;
  transition-timing-function: linear;
  transition-delay: 0ms;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 2px;
  background-color: #ff4d4d;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  color: #ffffff;
  background-color: #ff4d4d;
  -webkit-appearance: none;
}


input[type="submit"]:hover, button:hover
{
  border: 1px solid #ff4d4d;
  outline-width: medium;
  outline-style: none;
  text-decoration-line: none;
  text-decoration-style: solid;
  background-color: #ffffff;
  color: #000000;
  border: 1px solid #ff4d4d;
  -webkit-appearance: none;
}

input[type="email"], input[type="text"], input[type="password"], textarea
{
  font-family: "Raleway";
  color: #626262;
  font-size: 16px;
  font-weight: 400;
  padding-top: 8px;
  padding-right: 17px;
  padding-bottom: 8px;
  padding-left: 17px;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-color: #ff4d4d;
  border-image-source: none;
  border-image-slice: 100% 100% 100% 100%;
  border-image-width: 1 1 1 1;
  border-image-outset: 0 0 0 0;
  border-image-repeat: stretch stretch;
  width: 80%;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  line-height: normal;
}


textarea { height: 100px; }







@media only screen and (max-width : 1155px)  {
	input[type="email"], input[type="text"], input[type="password"], textarea { width:300px; }
}


/* -------------------------------------------------------------------- */
/* FORMS end                                                            */
/* -------------------------------------------------------------------- */





.SpecialMessage {
	-webkit-animation:opac 5.8s;
	animation:opac 5.8s;
	border: 3px dotted #959595;
	margin-bottom: 20px;
	background-color: #f6f57c;
	font-family: "Raleway";
	font-size: 16px;
	color: #000;
	padding:10px;
}




/* CATEGORY PAGE STYLING



img.category_page_header_image {
	float:left;
	width:200px;
	margin-right:20px;
	margin-bottom:20px;
}

@media screen and (max-width:554px) { 
	img.category_page_header_image {width:80%;}
 }








/* ------------------------------------------------------------------------- */
/* COUPON                                                                    */
/* ------------------------------------------------------------------------- */

	@media only screen and (max-width : 1067px)  {
	.coupon {width:95%;}
	}


 	@media screen and (max-device-width: 480px) and (orientation: portrait) {
	.coupon {width:95%;}
	}


 	@media screen and (max-device-width: 640px) and (orientation: portrait) {
	.coupon {width:95%;}
	}

/* ------------------------------------------------------------------------- */












/* ------------------------------------------------------------------------- */
/* ACCORDION                                                                    */
/* ------------------------------------------------------------------------- */

	.accordion {
	  background-color: #eee;
	  color: #444;
	  cursor: pointer;
	  padding: 18px;
	  width: 100%;
	  border: none;
	  text-align: left;
	  outline: none;
	  font-size: 15px;
	  transition: 0.4s;
	}

	.active, .accordion:hover {
	  background-color: #ccc; 
	}

	.panel {
	  padding: 0 18px;
	  display: none;
	  background-color: white;
	  overflow: hidden;
	}

/* ------------------------------------------------------------------------- */