body {
    background-color: #fff;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #043F83;
    line-height: 1;
    padding: 5px;
}

.panel-default > .panel-heading {
    color: #fff;
    background-color: #043F83;
    border-color: #043F83;
}
.panel-default {
    border-color: #043F83;
}

.form-login {
    max-width: 450px;
    max-height: 350px;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
    border-radius: 10px;
    margin-top: 5%;
}

.form-login input {
    margin-bottom: 10px;
}

.btn {
    display: inline-block;
    padding: 6px 12px;
    border: 2px solid #043F83;
    color: #ddd;
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    margin: 15px 5px 0;
    transition: all .2s;
    min-width: 100px;
    text-align: center;
    font-size: 14px;
}

.btn:hover, .btn.hover {
    background: #ddd;
    color: #777;
}

.btn.btn-lg {
    padding: 10px 16px;
    font-size: 18px;
}

.btn.btn-sm {
    padding: 5px 10px;
    font-size: 12px;
}

.btn.btn-xs {
    padding: 1px 5px;
    font-size: 12px;
    padding: 1px 5px;
    font-size: 12px;
}

.btn.primary {
    border-color: #043F83;
    color: #043F83;
}

.btn.primary:hover, .btn.primary.hover {
    background: #043F83;
    color: #fff;
}

.btn.danger {
    border-color: #e74c3c;
    color: #e74c3c;
}

.btn.danger:hover, .btn.danger.hover {
    background: #e74c3c;
    color: #fff;
}

.btn.success {
    border-color: #27ae60;
    color: #27ae60;
}

.btn.success:hover, .btn.success.hover {
    background: #27ae60;
    color: #fff;
}

.btn.warning {
    border-color: #f1c40f;
    color: #f1c40f;
}

.btn.warning:hover, .btn.warning.hover {
    background: #f1c40f;
    color: #fff;
}

.btn.black {
    border-color: #34495e;
    color: #34495e;
}

.btn.black:hover, .btn.black.hover {
    background: #34495e;
    color: #fff;
}

.btn.black {
    border-color: #34495e;
    color: #34495e;
}

.btn.black:hover, .btn.black.hover {
    background: #34495e;
    color: #fff;
}

.btn.info {
    border-color: #5bc0de;
    color: #5bc0de;
}

.btn.info:hover, .btn.info.hover {
    background: #5bc0de;
    color: #fff;
}

.btn.clear {
    border-color: #777;
    color: #777;
}

 .btn.clear:hover, .btn.clear.hover {
     background: #777;
     color: #fff;
 }

 /*Mensagens*/
.modal-header2 {
  padding: 10px;
  border-bottom: 1px solid #043F83;
  color: #fff;
  background-color: #043F83;
  border-color: #043F83;
  background: #043F83;
}

.close2 {
    float: right;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
}

.modal-body2 {
  position: relative;
  padding: 30px;
}

.modal-footer2 {
  padding: 10px;
  text-align: right;
  border-top: 1px solid #e5e5e5;
}

button.close2 {
  -webkit-appearance: none;
  padding: 0;
  cursor: pointer;
  background: #043F83;
  border: 0;
}

.container2 {
    padding-right: 10px;
    padding-left: 10px;
    margin-right: auto;
    margin-left: auto;
}


/*------------*/
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}

.containerc02 {
   max-width: 700px;
   padding: 0 32px;
   box-sizing: border-box;
   display: flex;
   justify-content: center;
   align-items: center;
   margin: auto;
   height: 100%;
   
   transform: perspective(60px);
	transform-style: preserve-3d;
}

.product-card {
   max-width: 360px;
   
   img {
      width: 100%;
   }
   
   &:nth-child(1) {
      transform: translate3d(0,0,-15px);
      animation-name: rotate-left;
      animation-duration: 14s;
      animation-iteration-count: infinite;
      animation-delay: .5s;
      animation-timing-function: ease-in-out;
      filter: drop-shadow($drop-back);
   }
   
   &:nth-child(2) {
      transform: translate3d(0,0,5px);
      animation-name: rotate-center;
      animation-duration: 14s;
      animation-iteration-count: infinite;
      animation-delay: .5s;
      animation-timing-function: ease-in-out;
      filter: drop-shadow($drop-front);
   }
   
   &:nth-child(3) {
      transform: translate3d(0,0,-15px);
      animation-name: rotate-right;
      animation-duration: 14s;
      animation-iteration-count: infinite;
      animation-delay: .5s;
      animation-timing-function: ease-in-out;
      filter: drop-shadow($drop-back);
   }
}

@keyframes rotate-left {
  0%, 100% {
    transform: translate3d(0,0,-15px);
    filter: blur($blur-back) drop-shadow($drop-back);
  }

  33.33% {
    transform: translate3d(100%,0,5px);
     filter: blur($blur-front) drop-shadow($drop-front);
  }
   
   66.66% {
    transform: translate3d(200%,0,-15px);
      filter: blur($blur-back) drop-shadow($drop-back);
  }
}

@keyframes rotate-center {
  0%, 100% {
    transform: translate3d(0,0,5px);
     filter: blur($blur-front) drop-shadow($drop-front);
  }

  33.33% {
    transform: translate3d(100%,0,-15px);
     filter: blur($blur-back) drop-shadow($drop-back);
  }
   
   66.66% {
    transform: translate3d(-100%,0,-15px);
      filter: blur($blur-back) drop-shadow($drop-back);
  }
}

@keyframes rotate-right {
  0%, 100% {
    transform: translate3d(0,0,-15px);
    filter: blur($blur-back) drop-shadow($drop-back);
  }

  33.33% {
    transform: translate3d(-200%,0,-15px);
    filter: blur($blur-back) drop-shadow($drop-back);
  }
   
   66.66% {
    transform: translate3d(-100%,0,5px);
    filter: blur($blur-front) drop-shadow($drop-front);
  }
}

@media (max-width: 480px) {
   
   .container {
   flex-direction: column;
}
   
 .product-card {
  
   &:nth-child(1) {
      transform: translate3d(0,0,-15px);
   }
   
   &:nth-child(2) {
      transform: translate3d(0,0,0);
   }
   
   &:nth-child(3) {
      transform: translate3d(0,0,-15px);
   }
}
   
   @keyframes rotate-left {
  0%, 100% {
    transform: translate3d(0,0,-15px);
    filter: blur($blur-back) drop-shadow($drop-back);
  }

  33.33% {
    transform: translate3d(0,100%,5px);
    filter: blur($blur-front) drop-shadow($drop-front);
  }
   
   66.66% {
    transform: translate3d(0,200%,-15px);
    filter: blur($blur-back) drop-shadow($drop-back);
  }
}

@keyframes rotate-center {
  0%, 100% {
    transform: translate3d(0,0,5px);
    filter: blur($blur-front) drop-shadow($drop-front);
  }

  33.33% {
    transform: translate3d(0,100%,-15px);
    filter: blur($blur-back) drop-shadow($drop-back);
  }
   
   66.66% {
    transform: translate3d(0,-100%,-15px);
    filter: blur($blur-back) drop-shadow($drop-back);
  }
}

@keyframes rotate-right {
  0%, 100% {
    transform: translate3d(0,0,-15px);
    filter: blur($blur-back) drop-shadow($drop-back);
  }

  33.33% {
    transform: translate3d(0,-200%,-15px);
    filter: blur($blur-back) drop-shadow($drop-back);
  }
   
   66.66% {
    transform: translate3d(0,-100%,5px);
    filter: blur($blur-front) drop-shadow($drop-front);
  }
}