*{margin:0; padding:0}

.main_container{width:98%; float:left; margin:0 1%; }

.main_header{width:100%; float:left}

.main_email{float:right; font-size:20px; color:#880000; margin:10px 0 0 0; font-family: 'Courgette', cursive;}

.main_email_link{float:right; font-size:16px; color:#880000; font-family: 'Timmana', sans-serif;}

.main_menu{width:100%; float:left;background:#000}

.main_banner{width:100%; float:left}

.a_banner_text{width:100%; float:left}

.a_banner_text1{width:86%; float:left; margin:15px 7%; text-align:center}

.half_banner{width:32%; float:left; margin:5px 0.5% }

.half_banner1{width:32%; float:right; margin:5px 0 }

.half_banner_red{background-image: linear-gradient(to left bottom, #ff8500, #ca552c, #8a3430, #461d23, #000000); border-radius:75px; width:100%; float:left;}

.half_banner_blue{background-image: linear-gradient(to left bottom, #00e9ff, #4ba3d1, #5a6288, #3c2f3d, #000000); border-radius:75px; width:100%; float:left;}

.half_banner_green{background-image: linear-gradient(to left bottom, #00ff85, #1eca77, #2d9764, #33674e, #313935);border-radius:75px; width:100%; float:left;}

.width100{width:100%; float:left}

.width50{width:50%; float:left}

.width49_left{width:49%; float:left}

.height30{height:30px}

.width30{width:30%;; float:left;}

.width40_left{width:40%; float:left}

.width40_right{width:40%; float:right}

.width49_right{width:49%; float:right}

.width32{width:32%; float:left}

.margin1{margin:0 1%; float:left}

.margin05{margin:0 0.5%; float:left}

.margin_5{margin:10px 0.5%; float:left}

.margin_tb_5{margin:5px 0}
 
.width23{width:23%; float:left}

.circle_img{border-radius:205px; border:5px solid #999}

.footer{ width:100%; float:left; background:#999}

.copy{width:100%; float:left; background:#000; font-family: 'Courgette', cursive;}

.padding_link_footer{padding:5px 10px; font-family: 'Timmana', cursive;}

.cl_white{color:#fff}

.border_5_dc{border:5px solid #dcdcdc}

.border_5_ct{border:2px solid #999}

.clear_row{width:100%; float:left; height:10px}

.margin_top_5{margin-top:5px}

.home_text{font-family: 'Courgette', cursive; font-size:24px; text-align:justify}

.home_text1{font-family: 'Courgette', cursive; font-size:20px; text-align:justify}

.home_product{width:22%; float:left; margin:0 1%; position:relative}

.category_text{font-family: 'Courgette', cursive; font-size:18px}

.category_pro_radius{border-top-left-radius: 25px; border-bottom-right-radius: 25px;}

.margin_5_all{margin:5px}

.left{float:left}

.register_form{font-family: 'Courgette', cursive; padding:10px; border-radius:15px; margin:2% 0 0 50%; left:-150px; color:#880000}

.line_sep{border-bottom:1px dotted #000; padding-bottom:5px; margin:5px 0}

.register_form input[type=text] {width:100%; height:30px; font-family: 'Timmana', cursive;}

.contact input[type=text] {width:100%; height:30px; font-family: 'Timmana', cursive;}

textarea {width:100%; height:80px; font-family: 'Timmana', cursive;}

.register_form input[type=password] {width:100%; height:30px; font-family: 'Timmana', cursive;}

.register_form input[type=button] {width:100%; padding:7px 10px; background:#000; color:#fff; border:0; font-family: 'Timmana', cursive;}

.personal_info input[type=text] {width:100%; height:30px; font-family: 'Timmana', cursive;}

.personal_info{color:#880000 !important; background:none !important}

.personal_info input[type=button] {width:100%; padding:7px 10px; background:#000; color:#fff; border:0; font-family: 'Timmana', cursive;}

.personal_info input[type=submit] {width:100%; padding:7px 10px; background:#000; color:#fff; border:0; font-family: 'Timmana', cursive;}

.contact input[type=button] {width:100%; padding:7px 10px; background:#000; color:#fff; border:0; font-family: 'Timmana', cursive;}

 .contact input[type=submit] {width:100%; padding:7px 10px; background:#000; color:#fff; border:0; font-family: 'Timmana', cursive;}

td{border-right:1px solid #000; border-bottom:1px solid #000 }

.product_tabs{padding:8px 15px; background:#000; float:left; color:#fff; font-size:22px; border-top-right-radius:15px; border-top-left-radius:15px; cursor:pointer}

.tabs{display:none}

.marginleft_10{margin-left:10px;}

.display_none{display:none}

.auto_price{padding:5px; border:3px solid #dcdcdc; color:#000; float:left; margin:0 5px; font-weight:bold}

.auto_price_active{padding:5px; border:3px solid #006400; color:#006400; float:left; margin:0 5px; font-weight:bold}

input[type=text]:focus {
    border: 2px solid #4CAF50;
}

input[type=password]:focus {
    border: 2px solid #4CAF50;
}

textarea:focus {
    border: 2px solid #4CAF50;
}

/*Strip the ul of padding and list styling*/
ul {
    list-style-type:none;
    margin:0;
    padding:0;
    /*position: absolute;*/
}
/*Create a horizontal list with spacing*/
li {
    display:inline-block;
    float: left;
    margin-right: 1px;
}
/*Style for menu links*/
li a {
    display:block;
    min-width:140px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-family: 'Timmana', sans-serif;
    color: #fff;
    background: #2f3036;
    text-decoration: none;
}
/*Hover state for top level links*/
li:hover a {
    background: #880000;
}
/*Style for dropdown links*/
li:hover ul a {
    background: #f3f3f3;
    color: #2f3036;
    height: 40px;
    line-height: 40px;
}
/*Hover state for dropdown links*/
li:hover ul a:hover {
    background: #880000;
    color: #fff;
}
/*Hide dropdown links until they are needed*/
li ul {
    display: none;
	position:absolute;
	z-index:9;}
/*Make dropdown links vertical*/
li ul li {
    display: block;
    float: none;
}
/*Prevent text wrapping*/
li ul li a {
    width: auto;
    min-width: 100px;
    padding: 0 20px;
}
/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
    display: block;
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
    font-family: 'Alegreya', serif;
    text-decoration: none;
    color: #fff;
    background: #880000;
    text-align: center;
    padding: 10px 0;
    display: none;
}
/*Hide checkbox*/
input[type=checkbox]{
    display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
    display: block;
}
/*Responsive Styles*/
@media screen and (max-width : 760px){
    /*Make dropdown links appear inline*/
    ul {
        position: static;
        display: none;
    }
    /*Create vertical spacing*/
    li {
        margin-bottom: 1px;
    }
    /*Make all menu links full width*/
    ul li, li a {
        width: 100%;
    }
    /*Display 'show menu' link*/
    .show-menu {
        display:block;
    }
}

.Burgundy{background:#880000}

.Black{background:#000}

.Red{background:#F00}

.Blue{background:#0000FF}

.Green{background:#008000}

.Brown{background:#A52A2A}

.Purple{background:#800080}

.Navy_Blue{background:#000088}

.Ocean_Blue{background:#0077BE}

.Sea_Green{background:#76ffb2}

.Gray{background:#D3D3D3}

.Light_Brown{background:#CD853F}

.yellow{background:#ffff00}


.Black_Black{ background:#000}

.Black_Brown{ background: linear-gradient(to right, #000 50%, #A52A2A 50%);}

.Black_Blue{ background: linear-gradient(to right, #000 50%, #0000FF 50%);}

.Black_Yellow{ background: linear-gradient(to right, #000 50%, #ffff00 50%);}

.Black_Green{ background: linear-gradient(to right, #000 50%, #008000 50%);}

.Black_Ocean{ background: linear-gradient(to right, #000 50%, #0077BE 50%);}

.Black_White{ background: linear-gradient(to right, #000 50%, #fff 50%);}

.Black_Red{ background: linear-gradient(to right, #000 50%, #F00 50%);}



.Brown_Brown{ background:#A52A2A}

.Brown_Black{ background: linear-gradient(to right, #A52A2A 50%, #000 50%);}

.Brown_Blue{ background: linear-gradient(to right, #A52A2A 50%, #0000FF 50%);}

.Brown_Yellow{ background: linear-gradient(to right, #A52A2A 50%, #ffff00 50%);}

.Brown_Green{ background: linear-gradient(to right, #A52A2A 50%, #008000 50%);}

.Brown_Ocean{ background: linear-gradient(to right, #A52A2A 50%, #0077BE 50%);}

.Brown_White{ background: linear-gradient(to right, #A52A2A 50%, #fff 50%);}

.Brown_Red{ background: linear-gradient(to right, #A52A2A 50%, #F00 50%);}



.Red_Red{ background:#F00}

.Red_Black{ background: linear-gradient(to right, #F00 50%, #000 50%);}

.Red_Brown{ background: linear-gradient(to right, #F00 50%, #A52A2A 50%);}

.Red_Blue{ background: linear-gradient(to right, #F00 50%, #0000FF 50%);}

.Red_Yellow{ background: linear-gradient(to right, #F00 50%, #ffff00 50%);}

.Red_Green{ background: linear-gradient(to right, #F00 50%, #008000 50%);}

.Red_Ocean{ background: linear-gradient(to right, #F00 50%, #0077BE 50%);}

.Red_White{ background: linear-gradient(to right, #F00 50%, #fff 50%);}


.josefin{ font-family: 'Josefin Sans', sans-serif; }

.oxygen{font-family: 'Oxygen', sans-serif;}

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

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

.bree{font-family: 'Bree Serif', serif;}

.dancing{font-family: 'Dancing Script', cursive;}

.cuprum{font-family: 'Cuprum', sans-serif;}

.alegreya{font-family: 'Alegreya', serif;}

.josefin{font-family: 'Josefin Slab', serif;}

.cinzel{font-family: 'Cinzel', serif;}

.satisfy{font-family: 'Satisfy', cursive;}

.timmana{font-family: 'Timmana', sans-serif;}

.courgette{font-family: 'Courgette', cursive;}


#myInput {
  background-image: url('../images/search.png');
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
  border-radius:15px;
}


.animate-fading{animation:fading 10s infinite}@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
.animate-opacity{animation:opac 0.8s}@keyframes opac{from{opacity:0} to{opacity:1}}
.animate-top{position:relative;animation:animatetop 0.4s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
.animate-left{position:relative;animation:animateleft 0.4s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
.animate-right{position:relative;animation:animateright 0.4s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
.animate-bottom{position:relative;animation:animatebottom 0.4s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
.animate-zoom {animation:animatezoom 0.6s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}




#main_image:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 10px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation */
.modal-content, #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}




@media only screen and (max-width: 769px) {
	
	.half_banner{width:98% !important;} 
	
	.home_text{font-size:18px !important}
	
	.home_text1{font-size:16px !important}
	
	.home_product{width:47% !important;}
	
	.width49_left{width:99% !important;}
	
	.width49_right{width:99% !important; float:left !important}
	
	.width32m{width:98% !important; margin:5px 0 !important}
	
	.width23m{width:48% !important}
	
	.width40_leftm{ width:98% !important}
	
	.width30m{ width:98% !important; }
	
	.h_linkm{width:98% !important; float:left !important; }
	
	.h_linkm2{ margin-left:50%; left:-150px; position:relative }
	
	.logom{ width:98% !important;}
	
	.logom2{ margin-left:50%; left:-110px; position:relative}
	
	.main_email{float:left!important}
	
	.main_email_link{float:left!important}
	
	.product_imagem{ width:96% !important}
	
	.header_cart_m{top:345px !important}
	
} 

@media only screen and (max-width: 480px) {
	
	.home_product{width:97% !important;}
	
	.width23m{width:98% !important}
	
}


/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}