.bg-1 {
  background-color: tomato;
}
.bg-2{
  background-color: #2f323a;
}

.letter-1 {
  color:white !important;
}
.navbar-toggle {
  background-color:  #3375ec !important;
}

.navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover {
  background-color: #F05941 !important;
}

.navbar-inverse .navbar-toggle {
  border-color: rgba(0, 0, 0, 0) !important;
}

.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:focus, .navbar-inverse .navbar-nav>.open>a:hover {
  background-color: white !important;
}

.custom-btn {
  box-shadow: 0 5px 5px 0 rgba(0,0,0,0.2);
}
/* Credentials style*/
.panel {
  padding:40px 40px !important;
  background-color: white !important;
  border-style: outset;
  border: 3px solid #F05941 !important;
  margin-left: 50% !important;
  transform: translate(-50%, 0);
  width:600px !important;
  box-shadow:  3px 3px 5px 0 rgb(0 0 0 / 50%) !important;
  animation-name: showPanel;
  animation-duration: 0.5s;
  animation-iteration-count: 1;
  position:relative;
}
.other-panel{
  width:700px !important;
}



.whats{
  float: right!important;
  justify-content: flex-end!important;
}
.btnw {
  display: flex;
  justify-content: center;
  color:#25D366 !important;
  text-transform:none ;
}.btnw:hover{
  color:white !important;
  background: #25D366 !important;
}

@keyframes showPanel {
  0%{opacity:0; transform: translate(-200%, 0);}
  100%{opacity:1; transform: translate(-50%, 0);}
}

.smooth-bg {
  animation-name: showSmooth;
  animation-duration: 0.5s;
  animation-iteration-count: 1;
}

@keyframes showSmooth {
  0%{opacity: 0;}
  100%{opacity: 1}
}

#signUpPanel {
  display: none;
}

.accessPanel {
position:absolute;
bottom:20px;
right:20px;
}
.accessPanel a{
  font-size: medium;
}
/* .accessPanel a:hover{
  color: #F05941 !important;
} */

/*main interface */
.dropdown-menu {
  color:white !important;
  min-width: 100% !important;
  margin-top: 0 !important;
}
.dropdown-menu a {
  /* background-color: #2f323a !important; */
  border: none !important;
}

.dropdown-menu a:hover {
  border: none !important;
}
.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:focus, .navbar-inverse .navbar-nav>.open>a:hover {
  background-color: white;
}


/*Carousel  */
#myCarousel {
  width:100% !important;
}

.carousel-inner{
  width:100% !important;
}
.item img{
  width:100% !important;
}

/* mdi icons*/

.mdi::before {
    font-size: 24px;
    line-height: 14px;
}

/*Nav bar style */

  
.navbar {
  background-color: white !important;
  border: 0px;
  border-radius: 0%;
  border: 0px solid transparent !important;
  border-bottom: 3px solid #F05941 !important;
   box-shadow: 2px 5px 5px 0 rgba(0,0,0,0.2) !important;
   
}

.navbar a{
  color: #3375ec !important;
}


.navbar-nav a:hover {
  color: #F05941 !important;
  /* border-bottom: 2px solid #F05941; */
}
.active a:hover {
  color:#3375ec !important;

}

 .navbar-nav  .active a{
  background-color: white !important;
  color: #F05941 !important;
  border-bottom: 2px solid white !important;
}

/*.specific-height {
  height:500px;
}*/

.navbar-brand:hover {
  color:white !important;
}

/*Comments */

 .btn-comment {
  background-color: #3375ec !important; 
  box-shadow: 10px 10px 5 px rgb(0, 0, 0);
  color:white !important;
  transition: 0.2s;
  margin-top: 10px !important;
  display: block;
}

.btn-comment:hover {
  background-color: white !important;
  border: 1px solid #333333 !important;
  color:#333333 !important;
}

.btn-cart {
  background-color: #2f323a; 
  color:white !important;
  transition: 0.2s;
  /*margin-top: 10px !important;!important;*/
}

.btn-cart:hover {
  background-color: white !important;
  border: 1px solid #333333 !important;
  color:#333333 !important;
}
.container {
  margin-top: 20px !important;
  
}
.container-fluid {
  background-color: white !important;
}
.padding-2{
  min-height: 380px;
  
}

#loginFromComment {
  display: none;
}

/* Shop Items */
.shopItem {
  transition: 0.3s;

}

.shopItem:hover {
  box-shadow: 0 8px 8px 0 rgba(0,0,0,0.2);
}

.cartStuff::after {
  display: table;
  clear:both;
  content: '';
}

.checkout {
  margin-top: 20px;
  padding: 0 !important;
  border-bottom: 2px solid #F05941;
}

.padding-3 {
  padding:10px 10px;
}

/*Loading  */

#loading-panel {
  position:absolute;
  top:0;
  right: 0;
  background-color: rgba(0,0,0,0.3);
  width:100%;
  height:100%;
  display: none;
  padding:30px 30px;
}

.loader {
  border: 6px solid #f3f3f3; /* Light grey */
  border-top: 6px solid #3375ec; /* Blue */
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 2s linear infinite;
}

 /* Formularios */
 .inputbox{
  display: flex;
  flex-direction:row;
  width: 100%;
 }
 .inputbox span{
  display: flex;
  justify-content: center;
 }
/*Para los mensajes de error*/
#errorHandlerL, #errorHandlerS{
  display: flex;
  font-size: x-large;
  justify-content: center;
  margin: 15px;
  padding: 15px;
  color: cornflowerblue;
  background-color: mintcream;
  font-weight: bold;
}


 /* -------------------------------- */
@keyframes spin {
  0% { transform: rotateZ(0deg);}
  100% { transform: rotateZ(360deg); }
}

/* Footer */

.footer {
  border-top: 3px solid #F05941;
  background-color: #3375ec;
  color:white !important;
  flex-direction:row ;
    justify-content: center;
    box-shadow: -2px -5px -5px 0 rgba(0,0,0,0.2) !important;
}

@media all and (max-width: 560px){
  .padding-2{
    min-height: 500px;
  }
  .panel{
    width:100% !important;
  }
}

@media all and (min-height: 700px){
  .padding-2{
    min-height:600px;
  }
}

@media all and (min-height: 900px){
  .padding-2{
    min-height:750px;
  }
}
@media all and (min-height: 1200px){
  .padding-2{
    min-height:900px;
  }
}