/*
#a2a4c8
#cbcefb 
*/

html,
body {
  font-size: 16px;
  box-sizing: border-box;
  font-family: "Grenze", sarif;
  margin-top: 100px;
}

/*========================================
================jumbotron==============
=======================================*/

.jumbotron {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("store.jpg");
  position: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 90vh;
  color: white;
  display: flex;
}

/*========================================
==============navbar=================================================================*/

.logo-nav a {
  color: white;
}

.logo-nav a:hover {
  color: #cbcefb;
}

.navbar {
  background: #a2a4c8;
}

/*=============================================
===============================sale===========
===========================================*/

.sale img {
  max-width: 600px;
}

/*===================================
=======================================
===========testimonials=============*/

/* Slideshow container */
.slideshow-container {
  position: relative;
  background: #d9dae9;
}

/* Slides */
.mySlides {
  display: none;
  padding: 80px;
  text-align: center;
  font-size: 1.5rem;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -30px;
  padding: 16px;
  color: #888;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  position: absolute;
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(162, 164, 200, 1);
  color: white;
}

/* The dot/bullet/indicator container */
.dot-container {
  text-align: center;
  padding: 20px;
  background: #cbcefb;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: white;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

/* Add a background color to the active dot/circle */
.active,
.dot:hover {
  background-color: #a2a4c8;
}

q {
  font-style: italic;
}

/*====================================
===================================
==================contact==========*/

.form-c {
  border: double #a2a4c8 10px;
  font-size: 1.2rem;
  background: #d9dae9;
}

.row button {
  background: #a2a4c8;
  color: black;
  font-size: 1.2rem;
}

.row button:hover {
  color: white;
}

/*=========================================
================cart=======================
==========================================*/

.tg {
  border-collapse: collapse;
  border-spacing: 0;
}

.tg td {
  border-style: none;
  font-family: Arial, sans-serif;
  font-size: 1rem;
  overflow: hidden;
  padding: 0.5rem 1.5rem;
  word-break: normal;
}

.tg th {
  border-style: none;
  font-family: Arial, sans-serif;
  font-weight: normal;
  overflow: hidden;
  padding: 0.5rem 1.5rem;
  word-break: normal;
}

.tg .tg-1xb8 {
  background-color: #cbcefb;
  border-color: #000000;
  color: #333333;
  font-size: 1.2rem;
  text-align: left;
  vertical-align: top;
}

.tg .tg-0pky {
  border-color: inherit;
  text-align: left;
  vertical-align: top;
}

.tg .tg-73oq {
  border-color: #000000;
  text-align: left;
  vertical-align: top;
}

.tg .ship {
  background-color: #cbcefb;
  border-color: #000000;
  color: #333333;
  font-size: 1.2rem;
  text-align: left;
  vertical-align: top;
}

.tg .tf {
  background-color: #a2a4c8;
  border-color: #000000;
  color: #333333;
  font-size: 1.2rem;
  text-align: left;
  vertical-align: top;
}

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

/*===========================================
===========checkout accordion===============
===========================================*/

.checkout {
  text-size: 1.2rem;
}

.accordion {
  background-color: #cbcefb;
  color: black;
  cursor: pointer;
  padding: 0.5rem 1.5rem;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 1.2rem;
  transition: 0.4s;
}

.active,
.accordion:hover {
  background-color: #a2a4c8;
}

.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}

.color {
  background-color: #cbcefb;
  color: black;
}

.color:hover {
  background-color: #a2a4c8;
  color: black;
}

.total-list ul {
  list-style-type: none;
}

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

.center {
  text-align: center;
}

/*=========================================
=============================================
================products=================*/

img.small-img {
  max-width: 500px;
}

hr.hr {
  border-bottom: black solid 2px;
}

.qty {
  max-width: 100px;
  margin-left: 75px;
}

form.form-inline {
  display: flex;
}

button.prod {
  margin-left: 75px;
  background: #cbcefb;
}

button.prod:hover {
  background: #a2a4c8;
}

.disc {
  max-width: 40%;
}

ul li {
  font-size: 1.2rem;
}

.form-inline button {
  font-size: 1.2rem;
}

footer p {
  text-align: center;
}