/* These styles are generated from project.scss. */

.alert-debug {
  color: black;
  background-color: white;
  border-color: #d6e9c6;
}

.alert-error {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
}


.productTitleSize {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.product-list h3 {
  margin-top: 60px;
}

@import url(//fonts.googleapis.com/css?family=Ubuntu);

body {
  margin: 0;
  padding: 0;
  font-family: helvetica, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Ubuntu', sans-serif;
  font-weight: normal;
}

a {
  text-decoration: none;
  color: #f55b0b;
}

a:hover {
  color: #e28c51;
}

a.button, input[type="submit"] {
  color: #fff;
  background: #5993bb;
  border-radius: 4px;
  padding: 10px 20px;
  font-size: 14px;
  border: 0;
}

a.button.light {
  color: #666;
  background: #ededed;
}

a img {
  width: 300px;
  height: 400px;
}

.footerColor ul li a {
  color: #f55b0b;
}

.footerColor {
  color: #f55b0b;
}

.footerColor ul li a:hover {
  color: rgb(245, 144, 76);
}

img {
  opacity: 0.9;
  filter: alpha(opacity=40);
}

img:hover {
  opacity: 1.0;
  filter: alpha(opacity=100);
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

table {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
}

table th, table td {
  text-align: left;
  font-size: 14px;
  padding: 10px;
  margin: 0;
}

tbody tr:nth-child(odd) {
  background: #efefef;
}

tbody tr.subtotal {
  background: #ccc;
}

thead th {
  background: #5993bb;
  color: #fff;
  font-weight: bold;
}

tbody tr.total {
  background: #5993bb;
  color: #fff;
  font-weight: bold;
}


table.cart {
  margin-bottom: 40px;
}

table.cart a img {
  width: 225px;
  height: 300px;
}

@media (max-width: 767px) {
  table.cart a img {
    max-width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

tbody td.num {
  text-align: center;
}

td input[type="submit"] {
  font-size: 12px;
  padding: 4px 10px;
}

form p label, form p input {
  float: left;
  clear: both;
}

form p label {
  font-size: 14px;
  padding-bottom: 4px;
}

form p input {
  width: 300px;
  font-size: 13px;
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 0;
  background: #efefef;
  color: #666;
  border-radius: 4px;
}

ul.errorlist {
  float: left;
  color: #ff0000;
  clear: both;
  font-size: 13px;
  margin: 0 0 0 10px;
  padding: 10px 0;
}


#header {
  padding: 10px 100px;
  font-size: 18px;
  overflow: auto;
}

#subheader {
  background: #ececec;
  color: #444;
  padding: 15px 100px;
  overflow: auto;
}

#header .logo {
  font-family: 'Ubuntu', sans-serif;
  float: left;
  color: #333;
  font-size: 22px;
  margin-right: 10%;
}

#subheader .cart {
  float: right;
  padding-top: 4px;
}

#content {
  padding: 0 100px;
  overflow: hidden;
}

#sidebar {
  width: 220px;
  padding: 30px 20px 0 0;
  float: left;
}

#sidebar ul {
  margin: 0;
  padding: 0;
}

#sidebar ul li {
  margin: 0;
  list-style: none;
  padding: 10px 14px;
}

#sidebar ul li a {
  display: block;
}

#sidebar ul li.selected {
  background: #5993bb;
  border-radius: 4px;
}

#sidebar ul li.selected a {
  color: #fff;
}

#main {
  float: left;
  width: 96%;
  margin-right: -220px;
  overflow: hidden;
}

.product-list .item {
  width: 25%;
  padding: 10px 20px 10px 0;
  float: left;
  text-align: center;
  line-height: 1.2;
}

.product-list .item img {
  width: 100%;
  margin-bottom: 8px;
}


.product-detail .price {
  color: #333;
  font-size: 28px;
  font-weight: bold;
}

.product-detail img {
  width: 40%;
  float: left;
  padding: 0 20px 20px 0;
}

.product-detail h1 {
  margin-bottom: 0;
}

.product-detail h2 {
  margin-top: 10px;
}

.order-form {
  float: left;
}

.order-form .form-control {
  background-color: #efefef;
}
.order-info {
  float: right;
  /*width: 300px;*/
  background: #efefef;
  padding: 10px 20px;
  color: #333;
  border-bottom: 4px solid #5993bb;
  max-height: 300px; /* Adjust the value according to your preference */
  overflow-y: auto; /* Add scroll if the content exceeds the max height */

}

.order-info h3 {
  color: #5993bb;
}

.order-info ul li {
  margin: 0;
  padding: 0;
  font-size: 14px;
}

.order-info p {
  font-weight: bold;
  float: right;
}

.order-info span {
  float: right;
}

.neg {
  color: #dc1616;
}

.languages {
  float: right;
  padding-top: 4px;
  font-size: 14px;
}

.languages ul {
  list-style: none;
  margin: 0;
  padding: 0;
  float: left;
}

.languages ul li {
  float: left;
  margin: 0 0 0 10px;
  font-size: 14px;
}

.languages p {
  float: left;
  margin: 0;
}

.recommendations {
  clear: both;
}

.recommendations div {
  float: left;
}

.recommendations img {
  width: 200px
}

.recommendations p {
  clear: both;
}

.recommendations.cart {
  width: 60%;
  float: left;
  overflow: auto;
}

.recommendations.cart h3 {
  margin-top: 0;
}

.recommendations.cart .item {
  margin-right: 10px;
}

.recommendations.cart img {
  width: 120px;
}

/* braintree hosted fields */
form div.field {
  font-size: 13px;
  color: #666;
  width: 300px;
  height: 22px;
  margin-bottom: 10px;
  padding: 6px 12px;
  border: 0;
  background: #efefef;
  color: #666;
  border-radius: 4px;
}

#imageLogo {
  width: 40px;
  height: 50px;
  opacity: 1;
  filter: alpha(opacity=40);
}


#imageLogo:hover {
  opacity: 0.8;
  filter: alpha(opacity=100);
}

#imageBanner {
  opacity: 0.8;
}

#imageJulia {
  opacity: 0.8;
  width: 352px;
  height: 470px;
  border-radius: 70px;
  margin-top: 50px;
}

/*.homeCard {*/
/*  margin: 0 -17.5%;*/
/*}*/

.homeCard p {
  font-family: 'Pacifico', cursive;
  font-size: 2vw;
  margin: 20% 0 0 5%;
  color: #333333;

}

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

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

.aboutMeFont {
  font-family: 'Playpen Sans', cursive;
  font-size: 20px;
}

#shopNameJulia {
  font-family: 'Gloria Hallelujah', cursive;
  font-size: 2.5vw;
  color: #f55b0b;
}

#shopNameTeddy {
  font-family: 'Gloria Hallelujah', cursive;
  font-size: 4.5vw;
  color: #f55b0b;
}

.gloriaFont {
  font-family: 'Gloria Hallelujah', cursive;
}

.myContacts {
  height: 65vh;
}

#imgLogoContact {
  width: 370px;
}

#carouselIndicators > div img {
  border-radius: 2vw;
}

.socialLogos {
  width: 30px;
  height: 30px;
}

.orangeColor {
  color: #f55b0b;
}

#carouseDiplomas > div img {
  border-radius: 10%;
  /*width: 15rem;*/
  /*height: 20rem;*/
}

.listBearImg {
  width: 266px;
  height: 354px;
}

@media (max-width: 767px) {
  .carousel-inner .carousel-item > div {
    display: none;
  }

  .carousel-inner .carousel-item > div:first-child {
    display: block;
  }
}

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
  display: flex;
}

/* medium and up screens */
@media (min-width: 768px) {

  .carousel-inner .carousel-item-end.active,
  .carousel-inner .carousel-item-next {
    transform: translateX(25%);
  }

  .carousel-inner .carousel-item-start.active,
  .carousel-inner .carousel-item-prev {
    transform: translateX(-25%);
  }
}

.carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start {
  transform: translateX(0);
}

.carousel-control-prev-icon, .carousel-control-next-icon {
  height: 50px;
  width: 50px;
  outline: black;
  background-color: rgba(0, 0, 0, 0.3);
  background-size: 100%, 100%;
  margin: 10px;
}

#middle-home .card {
  border: none;
}

#middle-home .card img {
  border-radius: 2vw;
  opacity: 0.7;
}

#middle-home .col:hover {
  border: 3px solid white;
}

.carousel-inner img {
  margin: auto;
}

.carousel-inner .carousel-item.active {
  display: flex;
  justify-content: center;
}

.detailProduct img {
  width: 490px;
  height: 650px;
  border: 2px solid gray;
  border-radius: 2rem;
  margin-top: 1rem;
}

@media (max-width: 767px) {
  .detailProduct img {
    width: 100%; /* Make the image fill the width of the container */
    height: auto; /* Maintain the original aspect ratio */
  }
}
 .orderCreated {
   min-height: 300px;
 }