@import url(//fonts.googleapis.com/css?family=Raleway);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#cssmenu #menu-button {
  display: none;
}
#cssmenu {
  width: auto;
  font-family: Raleway, sans-serif;
  line-height: 1;
}
#cssmenu > ul {
  background: #ff0000;
}
#cssmenu > ul > li {
  float: left;
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  perspective: 1000px;
}
#cssmenu.align-center > ul {
  font-size: 0;
  text-align: center;
}
#cssmenu.align-center > ul > li {
  display: inline-block;
  float: none;
}
#cssmenu.align-right > ul > li {
  float: right;
}
#cssmenu > ul > li > a {
  padding: 16px 20px;
  font-size: 14px;
  color: #ffffff;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  background: #ff0000;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
  -webkit-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
#cssmenu > ul > li.active > a {
  color: #dff2fa;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover {
  color: #dff2fa;
  -webkit-transform: rotateX(90deg) translateY(-23px);
  -moz-transform: rotateX(90deg) translateY(-23px);
  transform: rotateX(90deg) translateY(-23px);
  -ms-transform: none;
}
#cssmenu > ul > li > a::before {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: -1;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 16px 20px;
  color: #fff;
  background: #ff0000;
  content: attr(data-title);
  -webkit-transition: background 0.3s;
  -moz-transition: background 0.3s;
  transition: background 0.3s;
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
  -webkit-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -ms-transform: translateY(- -18px);
}
#cssmenu > ul > li:hover > a::before,
#cssmenu > ul > li > a:hover::before {
  background: #ff0000;
}
#cssmenu.small-screen {
  width: 100%;
}
#cssmenu.small-screen > ul,
#cssmenu.small-screen.align-center > ul {
  width: 100%;
  text-align: left;
}
#cssmenu.small-screen > ul > li,
#cssmenu.small-screen.align-center {
  float: none;
  display: block;
  border-top: 1px solid rgba(100, 100, 100, 0.1);
}
#cssmenu.small-screen > ul > li:hover > a,
#cssmenu.small-screen > ul > li > a:hover {
  color: #dff2fa;
  -webkit-transform: none;
  -moz-transform: none;
  transform: none;
  -ms-transform: none;
}
#cssmenu.small-screen > ul > li > a::before {
  display: none;
}
#cssmenu.small-screen #menu-button {
  display: block;
  padding: 16px 20px;
  cursor: pointer;
  font-size: 14px;
  text-decoration: none;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: #ff0000;
}
#cssmenu.small-screen #menu-button:after {
  content: "";
  position: absolute;
  right: 20px;
  top: 17px;
  display: block;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  border-top: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  width: 22px;
  height: 3px;
}
#cssmenu.small-screen #menu-button.menu-opened:after {
  border-top: 2px solid #dff2fa;
  border-bottom: 2px solid #dff2fa;
}
#cssmenu.small-screen #menu-button:before {
  content: "";
  position: absolute;
  right: 20px;
  top: 27px;
  display: block;
  width: 22px;
  height: 2px;
  background: #ffffff;
}
#cssmenu.small-screen #menu-button.menu-opened:before {
  background: #dff2fa;
}
.mobilevi {display:block;}
#cssmenu, .mobilev {
	display: none;
}
		/* these styles are for the demo, but are not required for the plugin */
		.zoom {
			display:inline-block;
			position: relative;
		}
		
		/* magnifying glass icon */
		.zoom:after {
			content:'';
			display:block; 
			width:33px; 
			height:33px; 
			position:absolute; 
			top:0;
			right:0;
			background:url(https://www.detallesconamor.com/media/css/icon.png);
		}

		.zoom img {
			display: block;
		}
 .btn_enviar {width:100%;}
 .module_register_olvide {width:250px;}
 .input_olvido {
    width: 250px;
    float: left;
}
		.zoom img::selection { background-color: transparent; }
		li.supcatlnk {display:none !important;}
  /* Large Devices, Wide Screens */
  
@media only screen and (min-width : 1024px) {
}

 /* Medium Devices, Desktops */
@media only screen and (max-width: 992px) {
    .module_register {
    float: left;
    width: 100%;
    margin: 0px !important;
    }
    .description_module {
    margin: 0px;
    width: 100%;
}
.line_botton_bg, .line_botton_bg2 {
    margin: 10px 0px;
    width: 100%;
}
.error_message {
    box-sizing: border-box;
}
.line_botton_bg table, .line_botton_bg2 table, .line_botton_bg4 table {
    width: 100% !important;
}
.description_detail {
    width: 100%;
    box-sizing: border-box;
}
.description_title {
    margin: -10px 0 10px 0px;
    width: 100%;
    height: auto;
    border-bottom: 1px solid #d9d9d9;
    float: left;
}
.content {
    width: 100%;
    margin: 0px !important;
}
.pricecant {
    margin: auto;
}
.pricedesc {
    margin-left: 0px;
    width: 100%;
}
.description_text {
    margin: 10px 0px 10px 0px;
    padding-right: 10px;
    padding-left: 10px;
    box-sizing: border-box;
    width: 100%;
}
.redess {
    width: 148px;
    margin: 10px auto;
    float: none;
}
.product_detail {
    width: 100%;
    box-sizing: border-box;
}
    .rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  float:left;
  padding: 0;
  margin-bottom: 0px;
  }
#bannerfla {
    margin: 10px 0px;
    width: 100%;
    height: auto;
}
.product_name {
    height: auto;
    font-size: 17px;
}
.btn_cart a {
    line-height: 28px;
    font-size: 16px;
}
.btn_detail a {
    font-size: 16px;
}
.product_price {
    font-size: 17px;
}
.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }
  .foot {
    height: auto;
    float: left;
    width: 100%;
}
#colum_left, .bannerlinea, #menu, .cart, .barranegra, .bf3, .bf4, .btn_zoom {display: none;}
.bann-delivery a {
    margin: 10px auto;
    float: none;
}
.box1 {
    width: 80%;
    height: auto;
    margin-left: auto;
    margin-top: 20px;
    margin-right: auto;
    float: none;
        display: inline-block;
}
.search {
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 250px !important;
    margin-top: 0px;
    position: initial;
    
}
.mobilev {
    display: block;
}
.input_search {
    width: 210px !important;
}
.cartresponsive {
    float: left !important;
    left: 20px !important;
    padding: 5px !important;
    width: 53px !important;
    z-index: 999 !important;
}
.btn_search {
    margin: 20.5px 0px 0 0 !important;
    width: 32px !important;
    background-position: top;
    height: 29.5px;
    padding: 0px;
}
.logo {
    position: relative !important;
    left: 0 !important;
    margin: 0 auto !important;
    top: 65px;
    height: 140px;
    float: none;
    background-size: contain;
    width: 300px;
    text-align: center;
}

#cabecera {
    width: 100%;
    height: 280px;
}
#cajatexto {
    width: 300px;
}
.bf1 {
    width: 105px;
    float: none;
    margin-left: auto;
    margin-top: 30px;
    display: inline-block;
    margin: auto;
    padding-left: 50px;
    font-size: 16px;
}
.tbox1 {
    border-bottom: 1px solid;
    width: auto;
}
.bf2 {
    width: 115px;
    float: none;
    margin-left: auto;
    display: inline-block;
    margin: auto;
    padding-left: 50px;
    font-size: 16px;
}
.barrafuccia {
    text-align: center;
    width: 100%;
    height: auto;
    padding: 20px 0px;
}
.foot_links {
    padding: 20px 0px;
}
.box2, .box3 {
    width: 40%;
    margin-left: auto;
    margin-top: 20px;
    float: none;
    display: inline-block;
    margin-right: auto;
}
.siguenos, .banlibro, .col1, .col2, #cajatexto {
    clear: both;
    width: 100%;
}
 .box4 {
    width: 80%;
    margin-left: auto;
    margin-top: 65px;
    float: none;
    margin-right: auto;
}
.subcat a:link, .subcat a:visited {
    padding-left: 20px !important;
        margin-left: 0px;
}
#main, .main_conten {
    width: 100%;
}
#main {
    margin: 0 0 0 0px;
}

h1 {
    margin: 17px 0 0 0px;
    width: 100%;
    text-align: center;
}
#wrapper {
    transition: margin-left .5s;
    overflow:hidden;
    width:100%;
}

.main_conten {
    margin: 10px auto;
    text-align: center;
}

.module {
    float: none;
    display: inline-block;
    margin: 10px;
}

.pagination {
    padding-top: 10px;
    padding-bottom: 10px;
    height: auto;
    width: 100%;
    margin-left: 0px;
    box-sizing: border-box;
}
.bannerfonos {
    margin-left: auto;
    margin-top: 35px;
    margin-right: auto;
    float: none;
}
.inpunt_amount {
    width: 60px;
    height: 30px;
}
td .btn_shop input {
    margin-top: 24px !important;
    padding: 0px;
    background-image: none;
    background: #000;
}
.btn_update input {
    width: 100px;
}


.btn_continuar_compra a {
    width: 110px;
}
td .inpunt_amount {
    width: 50px;
    height: 30px;
}
.btn_registrate a {
    float: none;
    margin: auto;
    padding: 5px 10px;
}
.btn_ingresar {
    text-align: center;
}
.btn_ingresar input {
    float: none;
    margin: auto;
}
.bloque {
    height: auto;
}
.input_myaccount {
    width: 300px;
}
.main_border {
    margin-left: 0px;
}
.avance {
    box-sizing: border-box;
    margin: 0px 0 0 0px;
    float: left;
    width: 100%;
}
.line_botton {
    margin: 0px 0 0px 0px;
    width: 100%;
}
.input_register2 {
    text-align: left;
}
.input_register, .input_register2 input {
    width: 100%;
    box-sizing: border-box;
    height: 25px;
}
.line_botton_bg4 {
    border-bottom: 1px solid #d9d9d9;
    padding: 5px;
    margin: 0px 0 15px 0px;
    width: 100%;
    box-sizing: border-box;
}
.btn_enviar input {
    float: none;
    margin: 0px auto 0px auto;
}
p input[type="radio"] {
float: left;
margin-right: 10px;
}
.btn_enviar{
    margin-right: 0px !important;
}
.input_search2 {
    width: 100% !important;
    box-sizing: border-box !important;
}
.bloque .link {
    text-align: center !important;
}

.res-sidenav-menu {
    text-align: left;
    width: 195px;
    margin: auto;
    padding-bottom: 90px;
    height: auto;
}
.pricecant .btn_shop input {
    margin-top: 3px !important;
}
.cantidad {
    margin-top: 10px !important;
}
.iconoscontacto img {
    width: 70px;
    height: auto;
}
.iconoscontacto {
    position: fixed;
    z-index: 999;
    left: 10px;
}
.flws {
    top: 60%;
}

.flfb {
    top: 72%;
}

.flcall {
    top: 84%;
}
.iconoscontacto img {
    width: 70px;
    height: auto;
}
}

.cantidad {
    width: 80px;
    color: #545454;
    float: left;
    font-weight: normal;
    position: relative;
    font-size: 15px;
    margin-top: 5px;
}

.btn_shop input {
    color: #fff;
    display: block;
    font-weight: normal;
    margin-left: 10px;
    margin-top: 24px;
    text-decoration: none;
    float: left;
    border: none;
    position: relative;
    font-size: 15px;
    cursor: pointer;
    margin-bottom: 25px;
    text-align: center;
    width: 133px;
    z-index: 999999;
}
 /* Small Devices, Tablets */
@media only screen and (max-width : 768px) {

}

 /* Small Devices, Tablets */
@media only screen and (max-width : 580px) {
    .fotoprod {
        width: 50px;
        height: 50px;
    }
    .bann-delivery a {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    margin: 10px auto;
    float: none;
}
.bann-delivery img {
    width: 100%;
    height: auto;
}
.module {
    width: 100%;
    margin: 10px auto !important;
    text-align: center;
    box-sizing: border-box;
}
.product_name, .product_price {
    width: 100%;
    margin-left: 0px;
}
.btn_cart a {
    width: 135px;
    margin: 10px auto;
    margin-left: auto;
}
.btn_detail a {
    float: none;
    margin-left: auto;
    margin: auto;
}
.product_buttons {
    width: 100%;
}
.product {
    height: 295px;
    width: 295px;
    margin: 10px auto;
}
.product img {
    width: 100%;
    height: auto;
}
}
@media only screen and (max-width: 450px){
.product_detail img {
    width: 100%;
    height: auto;
}
.btn_update input {
    width: 80px;
    margin-left: 10px;
}
}
@media only screen and (min-width: 992px){
.btn_ingresar {
    margin-bottom: 40px;
    float: left;
    text-align: center;
    width: 100%;
}

.btn_ingresar input {
    float: none;
    display: inline-block;
    margin: auto;
}
.btn_ingresar2 input {
    float: left;
    display: inline-block;
    margin: auto;
}
.btn_registrate a {
    margin: 0px;
}
.btn_enviar input {
    margin: 0px 0px 0px 4px !important;
}
.btn_enviar2 input {
    float: none;
    margin: 0px auto !important;
}
.btn_enviar {
    float: left;
}
.pricecant .btn_shop input {
    margin-top: -1px !important;
}
}
@media only screen and (max-width: 350px){

}

@media only screen and (max-width: 320px){

}

.scrollToTop{
	width: 45px;
    height: 45px;
    padding: 10px;
    text-align: center;
    background: whiteSmoke;
    font-weight: bold;
    color: #444;
    text-decoration: none;
    position: fixed;
    top: 85%;
    right: 10%;
    display: none;
    background: url(https://www.detallesconamor.com/media/images/up-arrow.png) no-repeat center;
    background-size: 45px 45px;
	z-index: 1000;
}
.scrollToTop:hover{
	text-decoration:none;
}


  /* The side navigation menu */
.sidenav {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 2000; /* Stay on top */
    top: 0;
    left: 0;
    background-color: #ffffff; /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 60px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}
 .res-sidenav-menu a {
    font-size: 15px !important;
    padding-left: 0px !important;
}

/* The navigation menu links */
.sidenav a {
    padding: 8px;
    text-decoration: none;
    font-size: 18px;
    display: block;
    transition: 0.3s
}
 
/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}
 
/* Position and style the close button (top right corner) */
.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}
 
/* Style page content - use this if you want to push the page content to the right when you open the side navigation */

body {
  overflow-x: hidden;
}
 
/* Add a black background color to the top navigation */
.topnav {
    background-color: transparent;
    overflow: hidden;
}
 
/* Style the links inside the navigation bar */
.topnav a {
    float: right;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 10px;
    background-color: #000000;
    text-decoration: none;
    font-size: 17px;
    top: 10px;
    position: absolute;
    right: 20px;
    z-index: 999999999;
}

.menutext {
    position: absolute;
    top: 65px;
    right: 11px;
    color: #000000;
    font-size: 11px;
    font-weight: bold;
    z-index: 999;
}
 
/* Change the color of links on hover */
.topnav a:hover {
    background-color: #000000;
    color: white;
}
 
/* Add a color to the active/current link */
.topnav a.active {
    background-color: #000000;
    color: white;
}
 
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}
 
a svg{
  transition:all .5s ease;
 
  &:hover{
    #transform:rotate(180deg);
  }
}
 
#ico{
  display: none;
}
 
.menu{
  background: #000;
  display: none;
  padding: 5px;
  width: 320px;
  @include border-radius(5px);
 
  #transition: all 0.5s ease;
 
  a{
    display: block;
    color: #fff;
    text-align: center;
    padding: 10px 2px;
    margin: 3px 0;
    text-decoration: none;
    background: #444;
 
    &:nth-child(1){
      margin-top: 0;
      @include border-radius(3px 3px 0 0 );
    }
    &:nth-child(5){
      margin-bottom: 0;
      @include border-radius(0 0 3px 3px);
    }
 
    &:hover{
      background: #555;
    }
  }
}