#call-link{text-decoration: none; margin: 0 auto}

.title {FONT-SIZE: 14px;
    font-weight: 900;
    width: 100%;
    text-align: center;
	}

#call2 {background-color: #bd0113; color:#fff;    cursor:pointer; bottom: 20%;
    padding: 10px 40px;
    border: 2px solid #fff;
	border-radius: 10px;
	font-weight: 900;
    width: 200px;
    text-align: center;
    font-size: 22px;
	width: 200px;
	opacity: 1;  -webkit-transition: all 1s;  transition: all 1s;
	 transition-delay: 1s;}


.middle { min-width: 600px;  width: 60%; margin: 20px auto 60px auto;
    line-height: 1.6;
    font-size: 18px;
	}
.middle h1 {font-size: 1.3em; margin: 20px 0 40px 0; width: 100%}
.middle span{ margin: 20px auto 50px auto}




#colors {margin-top: 40px;}
#colors img {width: 40px; margin: 3px; border: 3px solid #eee; display: inline-block;}
#colors img.active {border: 3px solid #bd0113}
 
#colors img.hid {visibility: hidden;
    width: 0;
    border: none;
    margin: 0;
	}
	
	
#main {height: auto; padding-bottom: 100px;
position:relative
}
#delete {
background-image:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 1)),
    url('../images/k-Milan-Shale.jpg');
	
background-size: 100%;
background-repeat: no-repeat;
background-blend-mode: saturation;
}

#back-outer{
content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  filter: grayscale(100%);
  }

#video1{    width: 100%; 
    display: block;
	z-index: 10;
    position: relative; border-radius: 10px;
    border: 5px solid #fff;}



.btn{background-color: #bd0113; color:#fff;    cursor:pointer; bottom: 20%;
    padding: 20px 40px;
    border: 5px solid #fff;
	margin: 40px auto;
    text-align: center;
    font-size: 22px;
	border-radius: 20px;
	width: 80%;
	opacity: 1;  -webkit-transition: all 1s;  transition: all 1s;
	 transition-delay: 1s;}
	 
	 
.middle { min-width: 600px;  width: 60%; margin: 20px auto 60px auto;
    line-height: 1.6;
    font-size: 18px;
	  z-index: 100;
	}
.middle h1 {font-size: 1.3em; margin: 20px 0 20px 0; width: 100%; text-align: center}
.middle span{ margin: 20px auto 50px auto}

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  position:relative;
  width: 100%;
  z-index: 20;
  
}

.item {
  flex-basis:  | auto; 
  width: calc(25% - 40px);
  margin: 20px auto;
}

.item img {width:100%}


#col2-1 {width: 60%}
#col2-2 {width: calc(40% - 40px);}

.colB2-1 {width: 40%}
.colB2-2 {width: calc(60% - 40px);}


.colB2-1 img{width: 80%}

.tl {text-align: left}
.tr {text-align: right}
.tr ul {    width: fit-content;
    float: right;}

#col2-2 {color:#fff}
.shadow {box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;}

#kitchen {width: 100%}
#kitchen img {width: 100%}



/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 99; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  z-index: 100;
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 5% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 60%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.modal-content input, .modal-content textarea{color:#000057;font-family:roboto, sans-serif;font-size:18px; font-weight:300;min-height:0px; margin-top: 5px}
.modal-content input {width:342px;height:22px; padding: 10px 5px;}
.modal-content table {width: 320px; margin: 0 auto}

.btn3{    color: #E92301;
border-radius: 5px;
    font-weight: 600;
    font-size: 16px;
	padding: 10px;
    text-align: center;
    margin: 25px 0;
	cursor: pointer;
	clear : both;
	border: 3px solid #E97401
}
.btn3:hover {color:#fff;
	background-color: #E97401;
    font-weight: 600;
    background-color: rgb(233, 116, 1);
    font-size: 16px;
	padding: 10px;
    text-align: center;
    margin: 25px 0;
	cursor: pointer;
	clear : both;
	border: 1px solid #E92301;
}


#spec{margin: 40px auto;
    font-weight: 500;
	text-align: left}
	
.accordion {
	margin: 20px 0 30px 0;
	clear: both
}
.accordion ul {float: none; list-style: disc;}
.accordion li {margin: 7px 0}
.fa-plus {
    cursor: pointer;
}
.accordion_item-icon {
    float: right;
    display: inline-block;
    transition: all .4s ease;
	font-size: 26px
}
.middle span.accordion_item-icon {margin:0}

.accordion_item-icon.active{ transform:  rotateY(180deg) rotate(45deg);  }

.hid{height: 0; transition: height 1s;}
.hid ul, .hid li{ height: 0; padding: 0; margin: 0}

#call2.hid {height: auto}


.accordion_item {border-bottom: 1px solid #000104;
	cursor: pointer;
	padding: 20px 20px 20px 10px;
	
}




@media (min-width:320px) { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ 

	.middle{ width: 95%; min-width:300px}
	.colB2-1 img{width: 65%;
		margin: 0 auto;
		display: block}
	.colB2-1, .colB2-2 {width: 100%;margin: 0 0 30px 0;}
	
	.modal-content {
		padding: 0px;
		border: 0px solid #888;
		width: 100%
	}
	
	.btn {
    padding: 20px 0px;
	}
	
	.item {
		width: 70%;
		margin: 0 auto 20px auto;
		display: block;
	}
}

@media screen and (min-width: 1200px) {
	.middle{ width: 60%; min-width: 700px}
	.colB2-1 {width: 40%}
	.colB2-1 img{width: 80%}
	.colB2-2 {width: calc(60% - 40px); margin: 0 0 0 40px;}
	.item {
	  width: calc(25% - 40px)
	}
}