/* 
Template Name       : MF Fine Art
Author Name         : Martin Silva
Author Email        : martingsliva@yahoo.com
Theme URL           : www.monicafallini.com / localhost/monica2025
Theme Ver           : 1.1
*/


/* General Styles */
body {
    font-size: 14px;
    line-height: 1.42857143;
    color: #333333;
    background: #f0f0f0;
    /* background: #000000; */
    overflow-x: hidden;
    /* padding-bottom: 1000px;  lo sacamos cuando creamos el footer*/
}

/*........................   FINISH.............................. */
/*...........................................................................
/*.....................LOGIN.php START.......................................*/

/* Login */
#login-form {
    width: 50%;
    margin: 5px auto;
    text-align: center;
    padding: 20px;
    border-top: 1px solid #0488e7;
}

#login-form input {
    width: 50%;
    margin: 5px auto;
}

#login-form #login-btn {
    background-color: #0488e7;
    color: #fff;
}

#login-form #login-btn:hover {
    background-color: #005588;
    color: #fff;
}

.form-weight-bold {
    color: green;
}

#login-form #sign-up-btn {
    text-decoration: none;
    color: orange;
}
#login-form #sign-up-btn:hover {
    text-decoration: none;
    color: #005588;
}


/*........................LOGIN FINISH.............................. */
/*...........................................................................
/*....................LOGIN_REGISTRATION START.......................................*/

/* Register */
#register-form {
    width: 50%;
    margin: 5px auto;
    text-align: center;
    padding: 20px;
    border-top: 1px solid #0488e7;
}

#register-form input {
    width: 50%;
    margin: 5px auto;
}

#register-form #sign-up-btn {
    background-color: #0488e7;
    color: #fff;
}

#register-form #sign-up-btn:hover {
    background-color: #005588;
    color: #fff;
}

#register-form #login-btn {
    color: orange;
}

#register-form #login-btn:hover {
    text-decoration: none;
    color: #005588;
}


/*........................REGISTER FINISH.............................. */
/*...........................................................................
/*.....................ACCOUNT START.......................................*/

/*Acoount */
#account-form {
    width: 50%;
    margin: 35px auto;
    text-align: center;
    padding: 20px;
}

#account-form input {
    margin: 5px auto;
}

#account-form #change-pass-btn {
    color: #fff;
    background-color: #4090dd;
}

#account-form #change-pass-btn:hover {
    color: #fff;
    background-color: #005588;
}

.account-info #orders-btn,
#logout-btn {
    color: #4090dd;
    text-decoration: none;
}

.account-info #orders-btn,
#logout-btn:hover {
    color: red;
    text-decoration: underline;
}





/*........................ACCOUNT FINISH.............................. */
/*...........................................................................
/*.....................MENU TOP STYLES START.......................................*/

/* Top styles */
#top {
    background: #555555;
    padding: 10px 0;

}

#top .offer {
    color: #ffffff;
}

#top .offer .btn {
    text-transform: uppercase;
}

@media(max-width: 991px) {
    #top .offer {
        margin-bottom: 10px;
    }
}

@media(max-width: 991px) {
    #top {
        font-size: 12px;
        text-align: center;
    }
}

#top a {
    color: #ffffff;
}

#top ul.menu {
    padding-top: 5px;
    margin: 0px;
    text-align: right;
    font-size: 12px;
    list-style: none;
}

@media(max-width: 991px) {
    #top ul.menu {
        text-align: center;
    }
}

#top ul.menu>li {
    display: inline-block;
}

#top ul.menu>li a {
    color: #ffffff;
}

/*Margen entre menu Register | My Account | Go to cart */
#top ul.menu>li+li:before {
    content: "|\00a0";
    color: #f7f7f7;
    padding: 0 5px;
}
/*........................ MENU TOP STYLES  FINISH.............................. */


/*...........................................................................
/*.....................MENU NAVBAR START.......................................*/
/*.....................MENU NAVBAR START.......................................*/
/*.....................MENU NAVBAR START.......................................*/

/* header styles*/
.navbar {
    background: #ffffff;
}

.navbar-collapse .right {
    float: right;
}

/* lupa para mobile header, el logo se arreglo mas en el encabezado*/
.navbar-brand {
    float: left;
    padding: 10px 15px;
    font-size: 18px;
    line-height: 20px;
    height: 70px;
}

.navbar-brand:hover,
.navbar-brand:focus {
    text-decoration: none;
}

/*menu HOME SHOP MY ACCOUNT ETC... */
.navbar ul.nav>li>a {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 14px;
}

.navbar ul.nav>li>a:hover {
    /* color: blue; */
    background: #e7e7e7;
}

/*........................................*/

/*menu HOME SHOP MY ACCOUNT ETC... padding y se alineo con el logo*/
.padding-nav {
    padding-top: 10px;
}

/* color del boton lupa y items in your cart when hover */
.btn-primary {
    color: rgb(255, 255, 255);
    background: rgb(79, 191, 168);
    border-color: rgb(65, 179, 156);
}

/* cuando click la lupa se va para la derecha*/
#search .navbar-form {
    float: right;
}

/* linea divisoria cuando click lupa*/
#search {
    clear: both;
    border-top: solid 1px #9adacd;
    text-align: right;
}

#search .navbar-form .input-group {
    display: table;
}

#search .navbar-form .input-group .form-control {
    width: 100%;
}





/* //////////////////////////////// CAROUSEL ///////////////////////////////////*/
/* //////////////////////////////// CAROUSEL ///////////////////////////////////*/
/* //////////////////////////////// CAROUSEL ///////////////////////////////////*/
/* Add this CSS to your stylesheet */
.banner {
    position: absolute; /* Position the banner relative to the parent container */
    top: 10px; /* Adjust the top position as needed */
    left: 10px; /* Adjust the left position as needed */
    background-color: rgba(0, 0, 0, 0.7); /* Background color with transparency */
    color: white; /* Text color */
    padding: 5px 10px; /* Adjust padding as needed */
    font-size: 14px; /* Adjust font size as needed */
    border-radius: 5px; /* Rounded corners for the banner */
}

/* //////////////////////////////// CAROUSEL ///////////////////////////////////*/




/* //////////////////////////////// FULL IMAGE ///////////////////////////////////*/
/* //////////////////////////////// FULL IMAGE ///////////////////////////////////*/
/* //////////////////////////////// FULL IMAGE ///////////////////////////////////*/

.banner-full-image {
    /* font-size: 20px; */
    font-weight: bold;
    position: absolute;
    top: 0; /* Place the banner at the top */
    left: 50%; /* Center the banner horizontally */
    transform: translateX(-50%); /* Center the banner horizontally */
    background-color: rgba(255, 255, 255, 0.6);/* 0.6 transparente */
    color: rgb(42, 42, 42);
    padding: 5px 10px;
    font-size: 14px;
    border-radius: 5px;
}







/* //////////////////////////////// FULL IMAGE ///////////////////////////////////*/





/* //////////////////////////////// NAV BAR DROPDOWN MENU AI///////////////////////////////////*/
/* //////////////////////////////// NAV BAR DROPDOWN MENU AI///////////////////////////////////*/
/* //////////////////////////////// NAV BAR DROPDOWN MENU AI///////////////////////////////////*/

/* Style for the main navbar dropdown */
/* Style for the main navbar dropdown */
.navbar .dropdown {
    position: relative;
}

/* Style for the first level dropdown */
.navbar .dropdown .dropdown-content {
    color: #2c2c2c;
    font-weight: bold;
    display: none;
    min-width: 50px !important; /* Adjust the width as desired */
    border-radius: 5px;
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 1;
    min-width: 140px;
    background-color: #e8e8e8; /* Background color added */
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); /* Optional: adds shadow for depth */
    border: 1px solid #ddd; /* Optional: adds border */
}
/* Style for the first level dropdown */
/* .navbar .dropdown .dropdown-content > li > a {
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
} */

/* Remove bullets (dots) in front of first-level dropdown items */
.navbar .dropdown .dropdown-content > li {
    list-style: none; /* Remove bullets (dots) */
    margin: 0;
    padding: 0;
}

/* Style for the second level dropdown */
.navbar .dropdown .dropdown-submenu .dropdown-content-sub {
    display: none;
    min-width: 50px !important; /* Adjust the width as desired */
    border-radius: 5px;
    position: absolute;
    top: 10px;
    left: 100%;
    z-index: 1;
    min-width: 140px;
    background-color: #e8e8e8; /* Background color added */
    margin-left: -10px; /* Adjusts the gap */
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); /* Optional: adds shadow for depth */
}
/* Additional styling for links */
.navbar .dropdown-content a, .navbar .dropdown-content-sub a {
    color: #2c2c2c !important; /* Added !important */
    text-decoration: none;
    display: block !important; /* Added !important */
    white-space: nowrap;
    padding: 12px 16px; /* Adjusted padding */
    height: auto !important; /* Ensures the entire row is clickable; Added !important */
}
.navbar .dropdown-content a:hover, .navbar .dropdown-content-sub a:hover {
    background-color: #f4f4f4 !important; /* Added !important */
    color: #000000 !important; /* Added !important */
}


/* Display first level dropdown on hover */
.navbar .dropdown:hover .dropdown-content {
    display: block;
}

/* Display second level dropdown on hover */
.navbar .dropdown .dropdown-submenu:hover .dropdown-content-sub {
    display: block;
}

/* Additional styling for links */
.navbar .dropdown-content a, .navbar .dropdown-content-sub a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    white-space: nowrap;
}

.navbar .dropdown-content a:hover, .navbar .dropdown-content-sub a:hover {
    background-color: #f1f1f1;
}

/* //////////////////////////////// NAV BAR AI///////////////////////////////////*/
/* //////////////////////////////// NAV BAR AI///////////////////////////////////*/
/* //////////////////////////////// NAV BAR AI///////////////////////////////////*/

/*........................ MENU NAVBAR  FINISH.............................. */




/*........................ SLIDER  .............................. */

/*........................................*/

/*slider */
#slider {
    margin-bottom: 40px;
}

/*........................................*/

/* advantages Styles */
#advantages {
    text-align: center;
}

/*borramos la palabra #advantages antes de box, estaba asi #advantages .box{ */
.box {
    background: #ffffff;
    margin: 0 0 30px;
    border: solid 1px #e6e6e6;
    box-sizing: border-box;
    padding: 20px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, .3);

}


/*.....................iconos de las boxes en index.php .......................................*/
/*.....................iconos de las boxes en index.php .......................................*/
/*.....................iconos de las boxes en index.php .......................................*/

/*iconos de las boxes */
#advantages .box .icon {
    position: absolute;
    font-size: 100px;
    width: 100%;
    text-align: center;
    top: 10px;
    /* top: auto; */
    left: 0px;
    height: 100%;
    float: left;
    color: #efefef;
    box-sizing: border-box;
    z-index: 1;
}

#advantages .box h3 {
    position: relative;
    margin: 0 0 20px;
    font-weight: 300;
    text-transform: uppercase;
    z-index: 2;
}

/*
#advantages .box h3 a {
    color: #4fbfa8;
}

#advantages .box h3 a:hover {
    text-decoration: none;

} 
*/
#advantages .box p {
    position: relative;
    z-index: 2;
    color: #4fbfa8;
}

.whole-box-link{
    display: block; /* This makes sure it takes up the entire box area */
    color: #4fbfa8;
    margin: 0 !important; /* Reset margin */
    padding: 0 !important; /* Reset padding */
}


/* Change color of elements inside the box on hover */
.whole-box-link:hover, .whole-box-link:hover h3, .whole-box-link:hover p {
    color: #337ab7;
    text-decoration: none;
}









/*......................../*iconos de las boxes   FINISH.............................. */
/*...........................................................................



/*....................................Latest Paintings START.......................................*/
/*....................................Latest Paintings START.......................................*/
/*....................................Latest Paintings START.......................................*/

/* Latest Paintings Styles en index.php este seria el titulo "LATEST PAINTINGS" */
#hot h2 {
    font-size: 36px;
    font-weight: 400;
    color: #4fbfa8;
    text-align: center;
    text-transform: uppercase;
}

#content {
    padding-left: 25px;
}

.single {
    width: 290px;
}

#content .row .shop-display {
    display: inline;
    width: 200px;
}



@media(max-width:768px) {
    .single {
        width: 60%;
        margin: 0 auto;
    }
}

#content .product {
    background: #ffffff;
    /* background: #000000; */
    border: 1px solid #ADADAD; /*gris oscuro*/
    margin-bottom: 30px;
    box-sizing: border-box;
    display: inline-block;
    border-radius: 5px;
}

#content .product:hover {
    background: #ffffff;
    /* background: #000000; */
    border: 1px solid #ADADAD; /*gris oscuro*/
    margin-bottom: 30px;
    box-sizing: border-box;
    display: inline-block;
    border-radius: 5px;
    box-shadow: 0 0 12px rgba(80, 77, 77, 0.878);

    /* padding: 10px; */
    /* overflow: hidden; */
    /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); */
    /* transform: scale(2); /* Enlarge the painting-card by 10% when hovering */
    /* transition: transform 0.3s ease; Optional: Add a smooth transition when scaling */
    /* z-index: 100; Optional: Ensure the enlarged painting-card is displayed above other elements */ 
}

#content .product .text {
    padding: 10px 10px 0px;
    text-align: center;
}

/* MARTIN: OJO! entre p. price habia un espacio y no lo agarraba */
#content .product .text p.price {
    font-size: 18px;
    text-align: center;
    font-weight: 400;
}

#content .product .text p.shipping {
    font-size: 12px;
    text-align: center;
    font-weight: 400;
    color: red;

}

#content .product .text .button {
    text-align: center;
    clear: both;
}

#content .product .text .button .btn {
    margin-bottom: 10px;
}

#content .product .text h3 {
    text-align: center;
    font-size: 20px;
}

#content .product .text h5 a {
    color: rgb(85, 85, 85);
}

#content .product .text h5 a:hover {
    color: rgb(19, 93, 158);
    text-decoration: none;
}

/*........................................*/

/*........................Latest Paintings Styles en index.php. FINISH..............................*/
/*...........................................................................*/
/*....................................BREADCRUMB START.......................................*/

/* Breadcrumb Styles */
.breadcrumb {
    padding: 8px 15px;
    margin-bottom: 20px;
    background: #ffffff;
    border-radius: 5px;
    box-shadow: 0px 1px 5px rgba(0, 0, 0, .5);
}

/* Este content es el simbolito ">" entre HOME y Shop por ejemplo */
.breadcrumb>li+li:before {
    content: ">\00a0";
    color: #cccccc;
}

@media(max-width:991px) {
    .breadcrumb {
        padding: 8px 0px;
        text-align: center;
    }
}

/*.......................................*/
/* Products Categories and Category. MARTIN: los cambie x Medium and Theme Styles */
/*MARTIN: tiene que haber un espacio entre #content y .panel...etc sino no lo toma */
#content .panel.sidebar-menu {
    box-sizing: border-box;
    box-shadow: 0px 1px 5px rgba(0, 0, 0, .5);
}

#content .panel.sidebar-menu ul.nav.category-menu {
    margin-bottom: 20px;
}

#content .panel.sidebar-menu ul.nav.category-menu li a {
    text-transform: uppercase;
    font-weight: 600;
}

#content .panel.sidebar-menu h3 {
    padding: 5px 0px;
    margin: 0px;

}

/*....................................BREADCRUMB FINISH.......................................


/* //........................SIDEBAR FILTERS BEGIN.............................. */
/* //........................SIDEBAR FILTERS BEGIN.............................. */
/* //........................SIDEBAR FILTERS BEGIN.............................. */

/* Sidebar Styles */

.search-container {
    /* You can add custom styles for the search box container here  */
    border-radius: 5px 0 0 5px;
    position: relative;
    display: flex;
    flex-wrap: wrap;
}
.btn-search {
    color: #ffffff;
    /* background-color: #9e9e9e; */
    background-color: #2b90d6;
    border-radius: 5px;
    border: 0px;
    padding: 5px 10px; /* Adjust as needed */
    /* margin: 0 0 0 150px; */
}
.btn-search:hover {
    /* font-weight: bold; */
    color: #ffffff;
    /* background-color: #626262; */
    background-color: #055daf;
    border-radius: 5px;
    border: 0px;
    padding: 5px 10px; /* Adjust as needed */
    /* margin: 0 0 0 150px; */
}

.btn-reset {
    color: #ffffff;
    background-color: #9e9e9e;
    border-radius: 5px;
    border: 0px;
    padding: 2px 5px; /* Adjust as needed */
    text-decoration: none; /* Removes underline from link */
    display: inline-block; /* Aligns padding correctly */
    margin: 0 0 0 120px;
}
.btn-reset:hover {
    /* font-weight: bold; */
    color: #ffffff;
    background-color: #626262;
    border-radius: 5px;
    border: 0px;
    padding: 2px 5px; /* Adjust as needed */
    text-decoration: none; /* Removes underline from link */
    display: inline-block; /* Aligns padding correctly */
    margin: 0 0 0 120px;
}


/* ACA ESTABAN LOS STYLES DE PRECIO, MEDIUM Y THEME Y SIZE*/
/* Common styles for input fields */
input[type=number] {
    width: auto; /* Adjust the width as needed */
    padding: 8px 12px; /* Padding for a better look and feel */
    margin: 5px 0; /* Spacing between elements */
    border: 1px solid #ccc; /* Border color */
    border-radius: 4px; /* Rounded corners */
    box-sizing: border-box; /* Better width management */
    font-size: 14px; /* Font size */
}

/* Styles specifically for filter-price */
.filter-price input[type=number] {
    text-align: right;
    background-color: #f8f8f8; /* Light background for inputs */
    color: #333; /* Font color */
}

/* Adjust the width of the dropdown box as needed */
#medium, #theme, #subtheme, #size {
    width: auto; /* You can specify a fixed width (e.g., 200px) or 'auto' */
    padding: 8px 12px; /* Consistent padding with input fields */
    border: 1px solid #ccc; /* Consistent border with input fields */
    border-radius: 4px; /* Rounded corners for dropdowns */
    background-color: #f8f8f8; /* Consistent background with input fields */
    font-size: 14px; /* Font size */
    box-sizing: border-box; /* Better width management */
}

/* Additional styles to improve the overall look */
.filter-price, .filter-medium, .filter-theme, .filter-subtheme, .filter-size {
    font-size: 16px; /* Font size for labels */
    color: #555; /* Font color for labels */
    font-weight: bold; /* Make labels bold */
}



/* ACA ESTABAN LOS STYLES DE PRECIO, MEDIUM Y THEME */


/*...............................SIDEBAR FINISH..................................................*/
/*.................................................................................*/








/*...............................SHOP.PHP BEGIN..................................................*/
/*...............................SHOP.PHP BEGIN..................................................*/
/*...............................SHOP.PHP BEGIN..................................................*/



/* Shop Products Styles para mi shop.php MF Fine Art */

/* ESTILOS QUE VIENEN DE ANTES, vienen de monica2023 paintings-by-filters-AI*/
/*  */
.paintings-column {
    width: 85%;
}

.gallery-row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}

.gallery-column {
    padding: 0 15px;
    width: 25%;
    margin-bottom: 30px;
}

.painting-card {
    background-color: #000;
    border: 1px solid #333333;
    /*gris oscuro*/
    border-radius: 5px;
    padding: 10px;
    overflow: hidden;
    position: relative;
    transition: box-shadow 0.3s;
}

.painting-card:hover {
    border: 1px solid #ADADAD;
    /*gris oscuro*/
    border-radius: 5px;
    padding: 10px;
    overflow: hidden;
    /*box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);*/
    box-shadow: 0 0 10px rgba(211, 196, 196, 0.5);

    transform: scale(1.1);
    /* Enlarge the painting-card by 10% when hovering */
    transition: transform 0.3s ease;
    /* Optional: Add a smooth transition when scaling */
    z-index: 100;
    /* Optional: Ensure the enlarged painting-card is displayed above other elements */
}

.painting-card[data-status="1"]:hover {
    box-shadow: 0 0 20px rgba(149, 237, 124, 0.7);
    /* green */
}

.painting-card[data-status="2"]:hover {
    box-shadow: 0 0 20px rgba(254, 113, 113, 0.7);
    /* red */
}

.painting-card[data-status="4"]:hover {
    box-shadow: 0 0 20px rgba(64, 144, 221, 0.7);
    /* celeste */
}

.painting-card[data-status="5"]:hover {
    box-shadow: 0 0 20px rgba(230, 190, 127, 0.7);
    /* orange */
}

.painting-card img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* No la estoy usando .card-info */
/* .card-info {
    padding: 10px 0;
    text-align: center;
    color: #ddd;
} */
.size-medium-info {
    color: #2c2c2c;
    font-weight: normal;
    font-size: 14px;
    text-align: center;
}


.title-suggested {
    color: #626262;
    text-align: center;
    margin-bottom: 10px; /* Adjust as needed */
}

.box.same-height.headline {
    background-color: #f4f4f4; /* Light grey background */
    border-radius: 10px; /* Rounded corners */
    padding: 20px; /* Padding inside the box */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); /* Subtle shadow */
}

.box.same-height.headline .icons {
    text-align: center;
}

.box.same-height.headline .fas {
    font-size: 24px; /* Size of the icons */
    color: #626262; /* Color of the icons */
    margin: 0 5px; /* Space between the icons */
    display: inline-block; /* Aligns icons in a row */
}


.text-center .title-suggested a {
    text-decoration: none;
}

.text-center .title-suggested a:hover {
    text-decoration: none;
}


.size-medium-suggested {
    color: #2c2c2c;
    font-weight: normal;
    font-size: 14px;
    text-align: center;
}
/* //usada en includes/suggested.php */
.idCode-suggested {
    color: #2c2c2c;
    font-weight: normal;
    font-size: 12px;
    text-align: center;

}
/* usada en shop.php */
.idCode-4-boxes {
    color: #4090dd;
    font-weight: normal;
    font-size: 12px;
    text-align: right;

}



.card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid #ddd;
}

.card-bottom .left {
    display: flex;
    align-items: center;
}

.card-bottom .idcode-card {
    text-align: right;
    color: #4090dd;
    font-weight: normal;
    font-size: 12px;

}

/* Estos estilos son del muchacho M-Dev*/
@media(max-width: 768px) {
    .center-responsive {
        width: 70%;
        margin: 0px auto;
    }
}

@media(max-width: 550px) {
    .center-responsive {
        width: 95%;
        margin: 0px auto;
    }
}

.pagination a {
    color: coral;
}

.pagination li:hover a {
    color: #fff;
    background-color: #0488e7;
}

/*................................SHOP.PHP FINISH.................................................*/
/*.................................................................................*/





/*................................DETAILS.PHP BEGIN.................................................*/
/*................................DETAILS.PHP BEGIN.................................................*/
/*................................DETAILS.PHP BEGIN.................................................*/

/* details.php Styles */
#content #productMain {
    margin-bottom: 30px;
}

#content #productMain .price {
    font-size: 20px;
    font-weight: 300;
    text-align: center;
    margin-top: 30px;
    color: green;
}

#content #productMain .shipping {
    font-size: 14px;
    font-weight: 300;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 30px;
    /* color: red; */
}

#content #mainImage {
    box-shadow: 0px 1px 5px rgba(0, 0, 0, .7);
}

#content #thumbs a {
    display: block;
    box-shadow: 0px 1px 5px rgba(0, 0, 0, .5);
    border: 2px solid transparent;
}

/* El size de la Cajita del titulo de You May Also Like These...  */
#content .headline {
    height: 274px;
}

/* CAJITA DE YOU MAY ALSO LIKE THESE >> */
#refresh-suggestions h3.title-suggested {
    transition: color 0.3s ease, text-decoration 0.3s ease;
}

#refresh-suggestions:hover h3.title-suggested {
    color: rgba(64, 144, 221, 0.7);
    text-decoration: underline;
}

.icons icon-color {
    color: rgba(64, 144, 221, 0.7) !important;
}


/*................................DETAILS.PHP FINISH.................................................*/
/*.................................................................................*/


/*................................CART.PHP BEGIN.................................................*/
/*................................CART.PHP BEGIN.................................................*/
/*................................CART.PHP BEGIN.................................................*/

/* Cart.php Styles */
#content #cart .table thead {
    background-color: #379ce4;
    text-align: center;
    padding: 5px 10px;
}

#content #cart .table thead tr {
    color: #fff;
    text-align: left;
}

#content #cart .table tbody tr td img {
    width: 50px;
}

#content #cart .table tbody tr td input {
    width: 40px;
    text-align: right;
}

#content #cart .table tbody tr td {
    vertical-align: middle;
}

#content #cart .table tbody {
    text-align: center;
}

/* Solo para que los 3 datos se alineen a la izq. */
#content #cart .table tbody tr td.tts {
    text-align: left;
}

#content #cart .table tbody tr td.subtotal-label,
#content #cart .table tbody tr td.subtotal-value {
    font-size: 18px;
    text-align: right;
    font-weight: bold;
    /* Optional: Add bold styling */
}

#content #cart .table tbody tr td.subtotal-value {
    color: #000000;
    /* Optional: Customize text color */
}

.cart_remove {
    display: flexbox;
    margin-right: 0px;
    overflow: hidden;

}

.cart_remove a {
    /* background:#F0F0E9; */
    background: #757171;
    /* gris oscuro */
    color: #FFFFFF;
    padding: 5px 7px;
    font-size: 14px;
    border-radius: 30%;
    vertical-align: middle;

}

.cart_remove a:hover {
    background: #FF0000
}

.edit-btn {
    color: #0488e7;
    text-decoration: none;
    font-size: 15px;
    background-color: #ffffff;
    border-radius: 6px;
    border: none;
}

.edit-btn:hover {
    color: #2a3088;
    text-decoration: none;
    font-size: 15px;
    background-color: #ffffff;
    border-radius: 6px;
    border: none;
}

.cart .product-info p {
    margin: 3px;
}

.cart-total {
    display: flex;
    justify-content: flex-end;

}

.table-responsive .centered {
    text-align: center;
}

/* New CSS for centering specific columns */
.center-quantity, .center-unit-price, .center-sub-total {
    text-align: center;
}

.box .box-footer {
    background-color: #f7f7f7;
    margin: 30px -20px 20px;
    padding: 20px;
    border-top: 1px solid #eeeeee;
}

.box .box-footer:before,
.box .box-footer:after {
    content: "";
    display: table;
}

.box .box-footer:after {
    clear: both;
}

.box .box-header {
    background-color: #f7f7f7;
    margin: -20px -20px 20px;
    padding: 20px;
    border-top: 1px solid #eeeeee;
}

#content #order-summary table {
    margin-top: 20px;
}

#content #order-summary table td {
    color: #999999;
}

#content #order-summary table tr.total td,
#content #order-summary table tr.total th {
    font-size: 18px;
    color: #555555;
    font-weight: 700;

}
/* BOTON CHECKOUT AZUL EN cart.php */
.col-md-3 .pull-right {
    display: block;
    width: 100%; /* Ensures the button stretches to the width of the container */
    text-align: center; /* Centers the button */
    margin-top: 50px; /* Adds space above the button */
}

/* For Firefox Only */
/* Esto es la altura del boton insertar imagen en customer_register.php MARTIN: yo no lo uso xq anda bien en mi navegadores*/
/* el muchacho lo puso para FireFox , en customer_register.php en line :
        <input type="file" class="form-control form-height-custom" name="c_image" required> */
@-moz-document url-prefix() {
    .form-height-custom {
        height: auto;
    }
}


/*................................CART.PHP FINISH.................................................*/
/*.................................................................................*/


/*................................CHECKOUT.PHP BEGIN.................................................*/
/*................................CHECKOUT.PHP BEGIN.................................................*/
/*................................CHECKOUT.PHP BEGIN.................................................*/

/* Checkout */
#checkout-form .checkout-small-element {
    display: inline-block;
    width: 48%;
    margin: 10px auto;
}

#checkout-form .checkout-large-element {
    width: 96%;

}

#checkout-form .checkout-btn-container {
    margin: 10px;
    text-align: right;
    margin-right: 40px;
}

#checkout-form #checkout-btn {
    color: #fff;
    background-color: #0488e7;
}

.checkout-btn {
    color: #fff;
    background-color: #0488e7;
    text-decoration: none;
    font-size: 15px;
    border-radius: 6px;
    border: none;

}

.checkout-btn:hover {
    color: #ffffff;
    background-color: #034f84;
    text-decoration: none;
    font-size: 15px;
    border-radius: 6px;
    border: none;
}

.checkout-btn-cart {
    color: #fff;
    background-color: #0488e7;
    text-decoration: none;
    font-size: 15px;
    border-radius: 6px;
    border: none;
    margin-top: -120px;

}

.checkout-btn-cart:hover {
    color: #ffffff;
    background-color: #034f84;
    text-decoration: none;
    font-size: 15px;
    border-radius: 6px;
    border: none;

}


/*................................CHECKOUT.PHP FINISH.................................................*/
/*.................................................................................*/





/*................................CONTACT.PHP BEGIN.................................................*/
/*................................CONTACT.PHP BEGIN.................................................*/
/*................................CONTACT.PHP BEGIN.................................................*/


/* Contact */
#contact-form {
    align-content: center;
}

#contact-form .contact-small-element {
    display: inline-block;
    width: 38%;
    margin: 10px auto;
}

#contact-form .contact-large-element {
    width: 96%;
}

#contact-form .contact-btn-container {
    margin: 10px;
    text-align: right;
    margin-right: 40px;
}

#contact-form #contact-btn {
    color: #fff;
    background-color: #0488e7;
}

#contact-form #contact-btn:hover {
    color: #fff;
    background-color: #035365;
}

#contact-social-media a {
    padding-inline-end: 10px;

}

#contact-form label[for="message"] {
    display: block;
    text-align: left;
    margin-bottom: 0px; /* Adjust as needed */
}

/* Adjusting the width of the textarea */
#contact-form textarea.contact-small-element {
    width: 40%; /* Adjust the percentage as needed */
}

.image-4-contact {
    max-width: 300px;
    max-height: 400px;
}



/*................................CONTACT.PHP FINISH.................................................*/
/*.................................................................................*/



/*.................................................................................*/
/*................................MAILING LIST.PHP BEGIN.................................................*/
/*................................MAILING LIST.PHP BEGIN.................................................*/
/*................................MAILING LIST.PHP BEGIN.................................................*/

/* Mailing List */
.box .row .table-responsive .col-md-6 .chimp #mc_embed_signup .validate {
    background-color: #27afd1;
}


.chimp #mc_embed_signup {
    width: 370px;
    padding-top: 15px;
    padding-bottom: 5px;
    border-radius: 3%;
}

#mc_embed_signup {
    background: #e8e8e8;
    clear: left;
    font: 14px Helvetica, Arial, sans-serif;
    width: 600px;
    border-color: #209900;
    color: #312b2b;
}


/*................................MAILING LIST.PHP FINISH.................................................*/
/*.................................................................................*/



/*................................FOOTER.PHP BEGIN.................................................*/
/*................................FOOTER.PHP BEGIN.................................................*/
/*................................FOOTER.PHP BEGIN.................................................*/
/*................................FOOTER.PHP BEGIN.................................................*/


/* Footer Styles */
#footer {
    background: #e0e0e0;
    padding: 20px 0;
    text-align: left; /* default alignment */
}

#footer a {
    color: #999999;
    /*padding: 20px 0; Le saque el padding xq el hover estaba corrido y andaba mal */
    padding: 0px;
    /*Le saque el padding xq el hover estaba corrido y andaba mal */
    text-decoration: none;
}

#footer a:hover {
    color: #333333;
}

#footer ul {
    list-style: none;
    padding-left: 0px;
}

#footer .social {
    text-align: left;

}

#footer .social a {
    margin: 0px 10px 0px 0px;
    display: inline-block;
    color: #ffffff;
    width: 30px;
    height: 30px;
    border-radius: 15px;
    line-height: 30px;
    text-align: center;
    vertical-align: bottom;
    background: #555555;
}

#footer .social a:hover {
    color: #dedede;
    background: #777777;
    background: #0488e7;

}

/* Copyright Stylkes */
#copyright {
    background: #333333;
    color: #cccccc;
    padding: 20px 0px;
    font-size: 12px;
}

#copyright p {
    margin: 0px;
}

/*Estos estilos los puse yo para Martin Silva en el footer */
#copyright a {
    color: #5d9dc8;
}

#copyright a:hover {
    color: #bf904f;

}
/* ////////////////////// FOOTER MOBILE VIEW //////////////////////// */
/* ////////////////////// FOOTER MOBILE VIEW //////////////////////// */
/* ////////////////////// FOOTER MOBILE VIEW //////////////////////// */

/* Responsive Styles for Mobile View */
@media screen and (max-width: 768px) {
    #footer, #footer .social {
        text-align: center;
    }

    #footer ul {
        text-align: center;
    }

    #footer ul li {
        display: inline-block; /* Align list items horizontally */
        margin: 0 10px; /* Add some horizontal margin for spacing */
    }

    #footer .social a {
        margin: 0 5px; /* Adjust margin for social icons */
    }
}

/* Responsive adjustments RESPONSIVE ADJUSTMENTSSSSSSSSSSSSSSSSSSSSSSSSSSSS */
/* General container for painting products */








/*........................................*/

.thumb img {
    margin: 5px 0 5px 0;
}

/* FULL IMAGE .PHP */
.image-full {
    margin: 0 0 20px 0;
    padding-bottom: 20px;
}

.txt-thumbnail{
    text-align: center;
}

.button-back {
    /* Align the button to the left */
    text-align: left;
}


/* //////////////////////////////// SHOP.PHP //////////////////////////////////*/
/* //////////////////////////////// SHOP.PHP //////////////////////////////////*/
/* //////////////////////////////// SHOP.PHP //////////////////////////////////*/

.title-and-desc {
    display: flex;
    align-items: center; /* Aligns items vertically in the center */
    justify-content: center; /* Centers items horizontally */
    flex-wrap: wrap; /* Allows items to wrap onto the next line if needed */
}

.title-and-desc h3, .title-and-desc h4 {
    margin: 0 10px; /* Adds spacing between the title and the paragraph */
}


/* SHOP Styles */
.title-filter-status {
    padding: 0.05rem 2rem; /* Ajusta el relleno vertical y horizontal */
    margin: 0.05rem 2px 0px 5px;
    background: #D3D3D3  ;
    border-radius: 5px;
    box-shadow: 0px 1px 5px rgba(0, 0, 0, .5);
    font-weight: bold;
}

@media(max-width:991px) {
    .title-filter-status {
        padding: 0.5rem; /* Puedes ajustar esto para dispositivos más pequeños */
        text-align: center;
    }
}




/* /////////////////////////////BACK TO TOP BLUE ARROW////////////////////////////
/////////////////////////////BACK TO TOP BLUE ARROW////////////////////////////
/////////////////////////////BACK TO TOP BLUE ARROW//////////////////////////// */

.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99;
}

.back-to-top img {
    border-radius: 10px;
    width: 50px; /* Adjust as needed */
    height: auto;
    transition: opacity 0.3s;
}

.back-to-top:hover img {
    opacity: 0.7;
}

/* /////////////////////////////BACK TO TOP BLUE ARROW//////////////////////////// */


/* /////////////////////////////ARTIST.PHP//////////////////////////// */
/* /////////////////////////////ARTIST.PHP//////////////////////////// */
/* /////////////////////////////ARTIST.PHP//////////////////////////// */
.col-md-9 img {
    max-width: 100%;
    height: auto;
    display: block; /* Optional: makes images centered if combined with margin: auto */
    margin: auto; /* Optional: for centering images within the column */
}
.responsive-image {
    max-width: 100%;
    height: auto;
    display: block; /* Optional: for centering */
    margin: auto; /* Optional: for centering */
}

/* /////////////////////////////ARTIST.PHP//////////////////////////// */



/* ///////////////////////////// COMMENTS //////////////////////////// */
/* ///////////////////////////// COMMENTS //////////////////////////// */
/* ///////////////////////////// COMMENTS //////////////////////////// */

.bold-row {
    font-weight: bold !important; /* Set the font weight to bold for these rows with higher priority */
}



#details_description_comments_artist {
	padding-left: 25px;
	padding-right: 25px;
    font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
    font-size: 16px;

    
}

/* texto de la description, color de la description */
.txt_description {
    color: #2c2c2c;
    font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
    font-size: 16px;
}
/* texto de las comments, color de las comments */
.txt_comments {
    color: #2c2c2c;
    font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
    font-size: 16px;
}
/* Color Artist Description - About the artist color   */
.txt_about_artist {
    color: #2c2c2c;
    font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
    font-size: 16px;
    padding-top: 20px;
}
/* Image About Artist */
.col-sm-6 {
    color: #2c2c2c;
    font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
    font-size: 16px;
    display: block;
    padding: 10px 10px 0 0;
}



ul.comment-info {
    list-style: none; /* Remove default list styles */
    padding: 0; /* Remove default list padding */
}

ul.comment-info li {
    display: inline-block; /* Display list items in a row */
    margin-right: 10px; /* Add some space between list items (adjust as needed) */
}

.comment-container,
.comment-textarea,
.comment-submit {
    margin-bottom: 15px;
}

.comment-container input,
.comment-textarea textarea {
    width: 100%;
    padding: 5px;
}

.comment-container #intCaptcha,
.comment-container #Comentador {
    width: 30%;
    padding: 5px;
    padding-top: 0px;
    margin: 5px 0 2px 0;
}

.comment-textarea textarea {
    height: 00px; /* Ajusta la altura deseada para tu área de texto */
    width: 70%; /* Ajusta el ancho deseado para tu área de texto */
    margin: 0 auto; /* Centra el área de texto horizontalmente */
}


.comment-submit input[type="submit"] {
    width: auto; /* Ancho automático según el contenido del botón */
}

.comment-label {
    display: block; /* Ensures label is displayed above the textarea */
    margin-bottom: 5px; /* Adds some space between label and textarea */
}

.comment-textarea {
    width: 100%;
    padding: 5px;
    /* Add any other styling you want for the textarea here */
}

/* ///////////////////////////// COMMENTS //////////////////////////// */








/* ///////////////////////////// VIDEOS //////////////////////////// */
/* ///////////////////////////// VIDEOS //////////////////////////// */
/* ///////////////////////////// VIDEOS //////////////////////////// */



#content .video-box {
    background: #ffffff;
    /* background: #000000; */
    border: 1px solid #ADADAD; /*gris oscuro*/
    margin-bottom: 30px;
    box-sizing: border-box;
    display: inline-block;
    border-radius: 5px;
    width: 133px;
    padding: 10px; /* Added padding here */
}

#content .video-box:hover {
    background: #ffffff;
    /* background: #000000; */
    border: 1px solid #ADADAD; /*gris oscuro*/
    margin-bottom: 30px;
    box-sizing: border-box;
    display: inline-block;
    border-radius: 5px;
    box-shadow: 0 0 12px rgba(80, 77, 77, 0.878);
    padding: 10px; /* Added padding here */

    /* padding: 10px; */
    /* overflow: hidden; */
    /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); */
    /* transform: scale(2); /* Enlarge the painting-card by 10% when hovering */
    /* transition: transform 0.3s ease; Optional: Add a smooth transition when scaling */
    /* z-index: 100; Optional: Ensure the enlarged painting-card is displayed above other elements */ 
}

#content .video-box .text {
    padding: 10px 10px 0px;
    text-align: center;
}

#content .video-box .text h3 {
    text-align: center;
    font-size: 20px;
}

#content .video-box .text h5 a {
    color: rgb(85, 85, 85);
}

#content .video-box .text h5 a:hover {
    color: rgb(19, 93, 158);
    text-decoration: none;
}

/* ESTO ES PARA QUE TODOS LOS TITULOS DE LOS VIDEOS TENGAN 2 RENGLONES SIN IMPORTAR EL LARGO */
#content .video-box .text h5 {
    height: 40px; /* Adjust this value based on your actual line height */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 20px; /* Adjust this value based on your actual line height */
    margin-bottom: 5px; /* Optional: To provide some spacing below the title */
}




/* ///////////////////////////// VIDEOS //////////////////////////// */


/* ///////////////////////////// FRAMES //////////////////////////// */
/* ///////////////////////////// FRAMES //////////////////////////// */
/* ///////////////////////////// FRAMES //////////////////////////// */
/* Imagen de artist.php */
.img-fluid-100 { width: 100%; height: auto; }
.img-fluid-80 { width: 80%; height: auto; }
.img-fluid-60 { width: 60%; height: auto; }
.img-fluid-40 { width: 40%; height: auto; }
.img-fluid-20 { width: 20%; height: auto; }
.logo_frames{ width: 90%; }
.images_frames{ width: 80%; height: auto; }
.redondas{ border-radius: 20px; }


.text-frames {
    text-align: left;
    color: #444444;
}






/* ///////////////////////////// FRAMES //////////////////////////// */













/* ///////////////////////////// PASSWORD RECOVERY //////////////////////////// */
/* ///////////////////////////// PASSWORD RECOVERY //////////////////////////// */
/* ///////////////////////////// PASSWORD RECOVERY //////////////////////////// */


.recovery-btn {
    color: #fff;
    background-color: #0488e7;
    text-decoration: none;
    font-size: 15px;
    border-radius: 6px;
    border: none;

}

.recovery-btn:hover {
    color: #ffffff;
    background-color: #034f84;
    text-decoration: none;
    font-size: 15px;
    border-radius: 6px;
    border: none;
}

.update_data_user{
    font-size: 16px;
    font-weight: bold;
    color:#209900;
}



/* ///////////////////////////// PASSWORD RECOVERY //////////////////////////// */





/* ///////////////////////////// MY ACCOUNT >> MY ORDERS //////////////////////////// */
/* ///////////////////////////// MY ACCOUNT >> MY ORDERS //////////////////////////// */
/* ///////////////////////////// MY ACCOUNT >> MY ORDERS //////////////////////////// */

.table-my_orders{
    background-color: #379ce4;
}


/* /////////////////////////////  WELCOME PAGE STYLES //////////////////////////// */
/* /////////////////////////////  WELCOME PAGE STYLES //////////////////////////// */
/* /////////////////////////////  WELCOME PAGE STYLES //////////////////////////// */
.titulo-verde { color: green; }
.titulo-rojo { color: red; }
.titulo-azul { color: blue; }
.titulo-naranja { color: orange; }
.titulo-gris { color: grey; }  // Default color for undefined statuses










/* ///////////////////////////// MY ACCOUNT >> MY ORDERS //////////////////////////// */













/* //............................................................................... */