@import url(http://fonts.googleapis.com/css?family=Roboto:400,400italic,500,500italic,700,700italic,900,900italic,300italic,300,100italic,100);
*{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	
	font-weight: 300;
}
html {
  font-family: sans-serif; /* 1 */
  -webkit-text-size-adjust: 100%; /* 3 */ 
  -ms-text-size-adjust: 100%; /* 3 */
}

/* Sections ========================================================================== */
/** Remove the margin in all browsers (opinionated). */
body {
	background: none !important;
	overflow: hidden;
  margin: 0;
}

@font-face {
  font-family: myFirstFont;
  src: url("https://cdn.discordapp.com/attachments/380104613954846721/933217266638667776/ElMessiri-VariableFont_wght.ttf");
}
#menu {
	display: none;
}

SELECT {
	outline: none !important;
  user-select: none;
  display: inline;
	background: #cbc0a6;
    font-size: 16px;
    width: 203px;
}

#menu2 {
  user-select: none;
	position: absolute;
	bottom: 20%;
	right: .5%;
	background: linear-gradient(to left top, #cbc0a6 50%, #cacaca 50%);
	font-family: 'Roboto', sans-serif;
	/*height: 699.9684px;*/
	height: 456px;
	color: white;
	/*width: 499.9904px;*/
	width: 307px;
	overflow: hidden;
	opacity: 1;
	padding: 1rem;
}

.Panels {
  user-select: none;
	position: absolute;
	bottom: 20%;
	right: 17%;
	background: linear-gradient(to left top, #cbc0a6 50%, #cacaca 50%);
	font-family: 'Roboto', sans-serif;
	/*height: 699.9684px;*/
	height: 456px;
	color: white;
	/*width: 499.9904px;*/
	width: 307px;
	overflow: hidden;
	display: none;
	opacity: 1;
	padding: 1rem;
}

@media (min-width: 800px) {
  .Panels {
	position: absolute;
    right: 40% !important;
  }
}

@media (min-width: 1024px) {
  .Panels {
	position: absolute;
    right: 32% !important;
  }
}

@media (min-width: 1152px) {
  .Panels {
	position: absolute;
    right: 28% !important;
  }
}

@media (min-width: 1280px) {
  .Panels {
	position: absolute;
    right: 25% !important;
  }
}

@media (min-width: 1360px) {
  .Panels {
	position: absolute;
    right: 24% !important;
  }
}

@media (min-width: 1440px) {
  .Panels {
	position: absolute;
    right: 22% !important;
  }
}

@media (min-width: 1600px) {
  .Panels {
	position: absolute;
    right: 20% !important;
  }
}

@media (min-width: 1920px) {
  .Panels {
	position: absolute;
    right: 17% !important;
  }
}

@media (min-width: 2544px) {
  .Panels {
	position: absolute;
    right: 13% !important;
  }
}

.column {
	color : #000;
	font-size: 1.5rem;
	text-align: center;
	font-weight: bold;
}

.menuu{
	box-shadow: none ;
	background-color: rgba(95, 95, 95, 0.5);
	max-width: 285px ;
	overflow-y: auto ;
	overflow-x: hidden ;
}

.custom_car {
	min-height: 415px ;
	max-height: 415px ;
}

.custom_ha2 {
	min-height: 380px ;
	max-height: 380px ;
}
.custom_ha {
	margin-top: .2rem;
	min-height: 391px ;
	max-height: 391px ;
}
.custom_h {
	min-height: 350px ;
	max-height: 350px ;
}

.custom_color {
	min-height: 385px ;
	max-height: 385px ;
}

ul li {
  list-style: none;
  cursor: pointer;
  margin-top: .4rem;
  margin: 5px;
  color: #000000;
  user-select: none;
}

.menu-item > a {
  font-family: myFirstFont;
  outline: none;
  -webkit-text-decoration-skip: objects; /* 2 */
  border-radius: .1rem;
  color: #000000;
  display: block;
  margin: 0 -.4rem;
  padding: .2rem .8rem;
  text-decoration: none;
  font-size: 1.7rem;
}
.menu-item > a:focus {
  outline: none;
  -webkit-text-decoration-skip: objects; /* 2 */
  border-radius: .1rem;
  color: #000000;
  display: block;
  margin: 0 -.4rem;
  padding: .2rem .8rem;
  text-decoration: none;
}
.menu-item > a:visited {
  outline: none;
  -webkit-text-decoration-skip: objects; /* 2 */
  border-radius: .1rem;
  color: #000000;
  display: block;
  margin: 0 -.4rem;
  padding: .2rem .8rem;
  text-decoration: none;
}
.menu-item > a:active {
  outline: none;
  -webkit-text-decoration-skip: objects; /* 2 */
  border-radius: .1rem;
  color: #000000;
  display: block;
  margin: 0 -.4rem;
  padding: .2rem .8rem;
  text-decoration: none;
}

.menu-item > a:hover {
  outline: none;
  -webkit-text-decoration-skip: objects; /* 2 */
  border-radius: .1rem;
  color: #000000;
  display: block;
  margin: 0 -.4rem;
  padding: .2rem .8rem;
  text-decoration: none;
  background-color: #cacaca; /* 1 */
  text-decoration: none;
}

.divider[data-content]::after,
.divider-vert[data-content]::after {
  content: attr(data-content);
  display: inline-block;
  font-size: 1.8rem;
  padding: 0 .8rem;
  transform: translateY(-.65rem);
}

.divider {
  color: #000000 ;
  cursor: default !important;
  display: block;
  position: relative;
  height: 0rem;
  margin: 1rem 0 2rem 0;
}



.green {
	background: #307d3d ;
  margin-bottom: .8rem;
  height: 22px;
  width: 140px;
	font-size: 1.3rem !important;
	line-height: 0 !important;
	padding: 0 0.4rem !important;
	border: none !important;
	border-radius: unset !important;
	float: none !important;
	color: #ffffff;
}
.btnn {
  user-select: none;
  margin-bottom: .8rem;
  height: 22px;
  width: 285px;
	font-size: 1.5rem !important;
	line-height: 0 !important;
	background: #7f5031 ;
	padding: 0 0.4rem !important;
	border: none !important;
	border-radius: unset !important;
	float: none !important;
	color: #ffffff;
}
.btn2 {
  user-select: none;
  height: 30px;
  width: 32%;
	font-size: 1.5rem !important;
	line-height: 0 !important;
	background: #7f5031 ;
	padding: 0 0.4rem !important;
	border: none !important;
	border-radius: unset !important;
	float: none !important;
	color: #ffffff;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  outline-style: solid;
  outline-width: thin;
}

/* Create an active/current tablink class */
.tab button.active {
  outline-style: solid;
  outline-width: thin;
}
.tab button.active2 {
  outline-style: solid;
  outline-width: thin;
}
.activee{
  display: block !important;
}
.activee2{
  display: block !important;
}
#mySelect{
  color: black;
}
.ss{
  display: none;
}
.tabcontent {
  display: none;
} 
.tabcontent2 {
  display: none;
} 

.form-control {
  margin-top: 50px;
  margin-bottom: 20px;
  width: 50% !important;
}

.custom1 {
    width: 200px !important;
}


.btt {
	background: #e1dddd ;
}

.btn {
	filter: brightness(0.9);
	outline: none !important;
	box-shadow: none ;
  height: 22px;
  width: 116px;
  margin-top:27px;
	font-size: 1.6rem !important;
	line-height: 0 !important;
	background: #7f5031 ;
	padding: 0 0.4rem !important;
	border: none !important;
	border-radius: unset !important;
	float: none !important;
	color: #ffffff !important;
}
.btnss {
	filter: brightness(0.9);
	outline: none !important;
	box-shadow: none ;
  height: 22px;
  width: 77.1px;
  margin: .0rem 1px;
  display: inline-block;
	font-size: 1.6rem !important;
	line-height: 0 !important;
	background: #7f5031 ;
	padding: 0 0.4rem !important;
	border: none !important;
	border-radius: unset !important;
	float: none !important;
	color: #ffffff !important;
}

.texx {
  list-style: none;
  display: inline-block;
  margin: .4rem 10px;
  color : #000;
  outline: none;
  border-radius: .1rem;
  text-decoration: none;
  font-size: 1.5rem;
}
.left {
  margin-left:51px;
}
.cenn {
     margin-left: 58px;
  width: 180px;
  }
.textt {
  user-select: none;
	color : #000;
	font-size: 2rem;
	text-align: center;
	font-weight: bold;
}
.logo {
  user-select: none;
  position: absolute;
  bottom: 0px;
  right: 3px;
    animation: fadein 2s ease-in alternate infinite;
}
@keyframes fadein {
    from { opacity: 1; }
    to { opacity: 0; }
}

.bg-dark {
  background-color: #343a40 !important;
}
.closee {
  user-select: none;
  position: absolute;
  top:0;
  right: 0;
}
.qty {
margin-top: 5rem !important;
margin-left: 3rem !important;
}
.qty .count {
    color: #000;
    display: inline-block;
    vertical-align: top;
    font-size: 25px;
    font-weight: 700;
    line-height: 30px;
    padding: 0 2px;
    min-width: 150px;
    text-align: center;
}
.qty .plus {
    cursor: pointer;
    display: inline-block;
    vertical-align: top;
    color: white;
    width: 30px;
    height: 30px;
    font: 30px/1 Arial,sans-serif;
    text-align: center;
    border-radius: 50%;
    }
.qty .minus {
    cursor: pointer;
    display: inline-block;
    vertical-align: top;
    color: white;
    width: 30px;
    height: 30px;
    font: 30px/1 Arial,sans-serif;
    text-align: center;
    border-radius: 50%;
    background-clip: padding-box;
}

.minus:hover{
    background-color: #717fe0 !important;
}
.plus:hover{
    background-color: #717fe0 !important;
}

input{  
    border: 0;
    width: 2%;
}
.btnn[disabled],
.green[disabled]{
  cursor: not-allowed ;
  filter: alpha(opacity=65) ;
  opacity: 0.65 ;
  -webkit-box-shadow: none ;
  box-shadow: none ;
}

input:disabled{
    background-color:white;
}
 .dot {
  user-select: none;
  position: absolute;
  top:1%;
  right: 1%;
  height: 15px;
  width: 15px;
  background-color: red;
  border-radius: 50%;
  display: inline-block;
} 
.colors{
  text-align: center;
  padding-top: 20px;
} 
.colors > li{
  list-style: none;
  width: 50px;
  height: 50px;
  display: inline-block;
  margin: 0 10px;
  cursor: pointer;
  transition-duration: .2s;
  box-shadow: 0 2px 1px rgba(0, 0, 0, .2);
} 

.colors > li:hover{
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
  box-shadow: 0 10px 10px rgba(0, 0, 0, .2);
}
.colors li:nth-child(1){
  background: linear-gradient(to left top, #cbc0a6 50%, #cacaca 50%);
}

.colors li:nth-child(2){
  background: linear-gradient(to left top, #872f2f 50%, #D64A4B 50%);
}

.colors li:nth-child(3){
  background: linear-gradient(to left top, #6e3586 50%, #8e44ad 50%);
}

.colors li:nth-child(4){
  background: linear-gradient(to left top, #2b6287 50%, #46a1de 50%);
}

.colors li:nth-child(5){
  background: linear-gradient(to left top, #7f8386 50%, #bdc3c7 50%);
}

.colors li:nth-child(6){
  background: linear-gradient(to left top, #0d6e6a 50%, #129a94 50%);
}

.colors li:nth-child(7){
  background: linear-gradient(to left top, #232323 50%, #545454 50%);
}

.colors li:nth-child(8){
  background: linear-gradient(to left top, #132959 50%, #21489e 50%);
}

.colors li:nth-child(9){
  background: linear-gradient(to left top, #b35b0f 50%, #ff8216 50%);
}

.colors li:nth-child(10){
  background: linear-gradient(to left top, #a86067 50%, #ff929c 50%);
}

.menu-item2 {
  font-family: myFirstFont;
  outline: none;
  -webkit-text-decoration-skip: objects; /* 2 */
  border-radius: .1rem;
  color: #000000;
  display: block;
  margin: 0 -.4rem;
  padding: .2rem 1.2rem;
  text-decoration: none;
  font-size: 1.7rem;
}

.switch input
{
  display: none;
}

.switch 
{
  display: inline-block;
  width: 50px; /*=w*/
  height: 20px; /*=h*/
  float: right;
  position: relative;
}

.slider
{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 30px;
  box-shadow: 0 0 0 2px #777, 0 0 4px #777;
  cursor: pointer;
  border: 4px solid transparent;
  overflow: hidden;
  transition: 0.2s;
}

.slider:before
{
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-color: #777;
  border-radius: 30px;
  transform: translateX(-30px); /*translateX(-(w-h))*/
  transition: 0.2s;
}

input:checked + .slider:before
{
  transform: translateX(30px); /*translateX(w-h)*/
  background-color: limeGreen;
}

input:checked + .slider
{
  box-shadow: 0 0 0 2px limeGreen, 0 0 8px limeGreen;
}

.switch200 .slider:before
{
  width: 200%;
  transform: translateX(-82px); /*translateX(-(w-h))*/
}

.switch200 input:checked + .slider:before
{
  background-color: red;
}

.switch200 input:checked + .slider
{
  box-shadow: 0 0 0 2px red, 0 0 8px red;
}


.panel12 {
  padding: 0 10px;
  display: none;
  overflow: hidden;
} 
.accordion12{
  cursor: pointer;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}