/* main button color 448bbb */
 /* hover button color 538cc6 */


body,h1,h2,h3,h4,h5,h6,tt {font-family:  'Fira Sans', sans-serif;}
h1{font-size:25px;}
body, html {height:100%; width:100%; margin:auto; }
  /* baground */

 /* head banner */
.head_bg{ width:100%;  padding-left:15px; padding-top:10px;  padding-right:15px;  padding-bottom:10px; background:#fff; background: rgba(255, 255, 255, 0.8);  z-index:100; }

a:link {
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}


.img_logo{width:130px; vertical-align: top; padding-left:0px; padding-left:0px;  padding-right:0px; padding-top:0px; padding-bottom:0px;}

.about{color:#fff;}
.about:hover {color: #a8a8a8;}
.fabout{color:#a7a7a7;}
.fabout:hover {color: #323232;}
.faboutt{color:#a7a7a7;}
.faboutt:hover {color: #fff;}

  /* nav menu */




.dropdown-1-content-1 {display: none;position: absolute;background-color: transparent; width:100%;  left:0px; right:0px; box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2);z-index: 1000000; padding-top:25px;}
.dropdown-1-content-1 .header-1 { background: #FF6343; padding: 16px; color: white;}
.header-2 { background: #f5f5f5; padding: 16px; color: #353535;}
.b1{background-color: #f5f5f5; width:100%; color:#292929; font-size:12px; text-align:left; border-top:0px solid #E8E8E8;}
.b1:hover{background-color: #f5f5f5;color:#292929;font-style: italic;}
.column {float: left;width: 33.33%;padding:0px;background-color: #f5f5f5;  text-align:left;}

.dropdown-1:hover .dropdown-1-content-1 {  display: block;}
.dropdown-1 .dropbtn-1 {font-size:17px;   border: none; outline: none; color:#353535; padding-top:0px; padding-bottom:0px; padding-left:5px; padding-right:5px; background-color: inherit;  margin: 0;}
.navbar-1 a:hover, .dropdown-1:hover .dropbtn-1 { color: #538cc6;}

.dropdown-1 {float: left; width:auto; padding-left:10px; padding-right:10px;}


.mainmenu {text-align:center;  margin-left:auto; margin-right:auto;  top:0px;  padding-left:0px; margin-top:0px;  margin-bottom:0px; background-color:transparent; width:100%;}
.mainmenu_mobile {text-align:left;  margin-left:auto; margin-right:auto;  top:0px;  padding-left:0px; margin-top:0px;  margin-bottom:0px; background-color:transparent; width:100%;}

.dropdown-1{  width: block;}


.cm{margin:auto; max-width:1200px;}
.cm1{float:left; width:15%;}
.cm2{float:left; padding:5px 10px 0px 0px; width:50%;}
.cm3{float:left; text-align:right; padding:5px 10px 0px 0px; width:35%;}

@media screen and (max-width: 1200px) 
{
.img_logo{width:130px; text-align:center; vertical-align: top; padding-left:0px; padding-left:0px;  padding-right:0px; padding-top:0px; padding-bottom:0px;}

.cm1{float:left; width:100%;}
.cm2{float:left; padding:10px 10px 0px 0px; width:55%;}
.cm3{float:left; text-align:right; padding:10px 10px 0px 20px; width:45%;}
} 


@media screen and (max-width: 995px) 
{
.img_logo{width:130px; text-align:center; vertical-align: top; padding-left:0px; padding-left:0px;  padding-right:0px; padding-top:0px; padding-bottom:0px;}
.cm1{float:left; width:100%;}
.cm2{float:left; padding:10px 10px 0px 0px; width:100%;}
.cm3{float:left; text-align:left; padding:10px 10px 0px 20px; width:100%;}
} 


@media only screen and (min-width:615px)
{
.mainmenu_mobile{display:none!important}
} 
@media screen and (max-width: 614px) 
{
.mainmenu{display:none!important}
.cm1{width:100%;}
.cm2{padding:15px 10px 0px 0px; width:10%;}
.cm3{text-align:right; padding:15px 10px 0px 0px; width:90%;}
} 
 /* search banner */
.search_bg{position:absolute; left:50%; transform: translate(-50%); top:30%; margin:auto; width:100%; max-width:800px;  background:#fff; background: rgba(255, 255, 255, 0.8);  z-index:100; }
.mytext6 {outline: none;border: none;padding-left:5px; width:24%; height:40px;font-size: 15px;border:1px solid #909090;background:#ffffff;}
.submit4 {outline: none;border: none; margin-top:-2px; width:24%; color: #fff; font-size: 15px;font-style: normal;font-weight: normal;text-align: center;height:40px; padding:5px 10px 5px 10px;background-color:#538cc6;cursor: pointer;border: 0px solid #00C9B7;}
.submit4:hover {background-color:#4775d1;border: 0px solid #888;color: #fff;}
#soflow501{
height:40px;
   -webkit-appearance: button;
   -ms-border-radius: 0px;
   -o-border-radius:0px 0px 0 0;
   -webkit-border-radius: 0px;
   -webkit-box-shadow: 0px 0px 0px;
   -webkit-padding-end: 0px;
   -webkit-appearance:none; 
   -webkit-padding-start: 0px;
   -webkit-user-select: none;
   background-image: url(/img/sel.png);
   background-color:#fff;
   background-position: 97% center;
   background-repeat: no-repeat;
   border: 1px solid #909090;
   color: #ccc;
   font-size: inherit;
   overflow: hidden;
   padding: 5px 10px;
   text-overflow: ellipsis;
   font-size: 15px;
   white-space: nowrap;
   width:24%;
outline: none;
}
./* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
}
/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 60px;
  background-color: white;
  color: #323232;
  font-size:10px;
  text-align: center;
  padding: 5px 0;
 border:1px solid #7caed0;

  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}

.tooltip .tooltiptext {
  width: 60px;
  bottom: 100%;
  left: 50%;
  margin-left: -35px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}

.submitv {outline: none;border: none; width:200px; color: #fff;font-size: 15px;font-style: normal;font-weight: normal;text-align: center;vertical-align: middle; height:40px; padding:5px 10px 5px 10px;background-color:#538cc6;cursor: pointer;border: 0px solid #00C9B7;-webkit-appearance: none;}
.submitv:hover {background-color:#4775d1;border: 0px solid #888;color: #fff;}


.submitv1 {outline: none;border: none; width:200px; color: #fff;font-size: 15px;font-style: normal;font-weight: normal;text-align: center;vertical-align: middle; height:40px; padding:5px 10px 5px 10px;background-color:#538cc6;cursor: pointer;border: 0px solid #00C9B7;-webkit-appearance: none;}
.submitv1:hover {background-color:#4775d1;border: 0px solid #888;color: #fff;}


@media screen and (max-width:905px) {
.search_bg{position:relative;top:0%; }

}


@media screen and (max-width:615px) {
#soflow_501{width:45%;}
.mytext6{width:45%;}
.submit4 {margin-top:4px; width:45%;}
.search_bg{position:relative;top:0%; }
.bg {height: 50%; }
}


@media screen and (max-width:615px) {
#soflow501{width:45%; margin-top:8px;}
.mytext6{width:45%;}
.submit4 {margin-top:-2px; width:45%;}
.search_bg{position:relative;top:0%; }
.bg {height: 50%; }



}

.tb1{float:left; width:35%;}
.tb2{float:left; width:35%;}
.tb3{float:left; width:30%;}

@media screen and (max-width:400px) {
.tb1{float:left; width:100%;}
.tb2{float:left; width:100%;}
.tb3{float:left; width:100%;}
}




.unavailable{color:red;text-decoration: line-through;}


::-webkit-input-placeholder { /* Edge */
  color: #ccc;
  font-style: italic;
}

:-ms-input-placeholder { /* Internet Explorer */
  color: #ccc;
  font-style: italic;
}

::placeholder {
  color: #ccc;
  font-style: italic;
}

.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.9);
  overflow-x: hidden;
  transition: 0.5s;
}



.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 26px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size:40px;
}

@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
  font-size: 30px;
  top: 15px;
  right: 35px;
  }
}

.checked {color: orange;}

.unavailable{color:red;text-decoration: line-through;}
.search{max-width:1200px; margin:auto; }
.ph1{float:left; width:60%; padding:0px 10px 0px 0px;}
.ph2{float:left; width:40%; padding:0px 0px 0px 10px;}
@media screen and (max-width: 665px) 
{
.ph1{float:left; width:100%; padding:0px 0px 0px 0px;}
.ph2{float:left; width:100%; padding:0px 10px 30px 10px;}
}


/* Tooltip container */
.tooltip {position: relative;display: inline-block;}
/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 60px;
  background-color: white;
  color: #323232;
  font-size:10px;
  text-align: center;
  padding: 5px 0;
 border:1px solid #7caed0; 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}

.tooltip .tooltiptext {
  width: 60px;
  bottom: 100%;
  left: 50%;
  margin-left: -35px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}


* {
  box-sizing: border-box;
}

img {
  vertical-align: middle;
}

/* Position the image container (needed to position the left and right arrows) */
.container {
  position: relative;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}

/* Next & previous buttons */

/* Position the "next button" to the right */
.next {
  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(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Container for image text */
.caption-container {
  text-align: center;
  background-color: #fff;
  padding: 2px 10px;
  color: white;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Six columns side by side */
.column {
  float: left;
  padding:0px 2px 4px 2px;
  width: 16.66%;
}
.mainimage{width:100%}



/* Add a transparency effect for thumnbail images */
.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

.submitv1 {outline: none;border: none; width:200px; color: #538cc6;font-size:19px;font-style: normal;font-weight: normal;text-align: left;vertical-align: middle; height:30px; padding:0px 0px 0px 0px;background-color:#fff;cursor: pointer;border: 0px solid #00C9B7;-webkit-appearance: none;}
.submitv1:hover {background-color:#fff;color:#4775d1;}


.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 35%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}





.imgk{  cursor: pointer; display:block; object-fit:cover; width:100%; height:100px; backface-visibility: hidden;background-color:white; padding:0px;}  
  
  @media screen and (max-width: 752px) 
{
.imgk{display: block;object-fit: cover;width: 100%;height:100px;backface-visibility: hidden;background-color:white; padding:0px;}  

.column {float: left;padding:0px 2px 4px 2px; width: 25%;}
}

@media screen and (max-width: 520px) 
{
.mainimage{width:100%}
.column {float: left;padding:0px 2px 4px 2px; width: 33.3333%;}
.next {
  cursor: pointer;
  position: absolute;
  top: 25%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}
}


.error{ border: 1px solid #ff0000; position:relative; display:inline-block;} 
select#soflow_50, select#soflow_50-color {
height:40px;
   -webkit-appearance: button;
   -ms-border-radius: 0px;
   -o-border-radius:0px 0px 0 0;
   -webkit-border-radius: 0px;
   -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
   -webkit-padding-end: 20px;
   -webkit-appearance:none; 
   -webkit-padding-start: 2px;
   -webkit-user-select: none;
   background-image: url(/img/sel.png), -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
   background-position: 97% center;
   background-repeat: no-repeat;
   border: 1px solid #909090;
   color: #555;
   font-size: inherit;
   margin-bottom: 10px;
    margin-right: 10px;
   overflow: hidden;
   padding: 5px 10px;
   text-overflow: ellipsis;
   font-size: 15px;
   white-space: nowrap;
   width:100%;
   max-width: 600px;
}

.form_banner_left  {background-color: transparent;   border-bottom: 0px;  float:left;  width:50%; padding:0px 10px 20px 0px;}
.form_banner_right {background-color: transparent;   border-bottom: 0px;  float:right; width:50%; padding:0px 10px 20px 0px;}


.column_left {float:left;  height:550px; width: 60%;padding:30px 30px 30px 30px; background-color:#F8F8F8; }
.column_right {float:right; height:550px; width: 40%; padding:30px 30px 30px 30px;  background-color:#F0F0F0;}


.column_left_reviews {float:left;  height:650px; width: 60%;padding:30px 30px 30px 30px; background-color:#F8F8F8; }
.column_right_reviews {float:right; height:650px; width: 40%; padding:30px 30px 30px 30px;  background-color:#F0F0F0;}


.column_big3 {float: left;width: 50%; padding: 10px 0px 0px 30px;}

.column_cancel{float:left;  height:550px; width: 100%;padding:30px 30px 30px 30px; background-color:#F8F8F8; }


 @media only screen and (max-width : 1170px) 
{
.column_left_reviews {float:left;  height:auto; width: 60%;padding:30px 30px 30px 30px; background-color:#F8F8F8; }
.column_right_reviews {float:right; height:auto; width: 40%; padding:30px 30px 30px 30px;  background-color:#F0F0F0;}
}

 @media only screen and (max-width : 768px) 
{
.column_left {float:left;  height:auto; width: 100%;padding:0px 30px 30px 30px; background-color:#F8F8F8; }
.column_right {float:right; height:auto; width: 100%; padding:30px 30px 30px 30px;  background-color:#F0F0F0;}
.column_cancel {float:left;  height:auto; width: 100%;padding:0px 30px 30px 30px; background-color:#F8F8F8; }
.column_left_reviews {float:left;  height:auto; width: 100%;padding:30px 30px 30px 30px; background-color:#F8F8F8; }
.column_right_reviews {float:right; height:auto; width: 100%; padding:30px 30px 30px 30px;  background-color:#F0F0F0;}
}

 @media only screen and (max-width : 400px) 
{

.form_banner_left, .form_banner_right {width:100%;}

}

.head_main{ width:100%;  padding-left:15px; padding-top:10px;  padding-right:15px;  padding-bottom:10px; background:#fff; background: rgba(000, 000, 000, 0.1);  z-index:100; }
/* FORM TEXT    */
.cell_message {
padding-left: 5px;
width:100%;
max-width:600px;
height:36px;
 font-size: 16px;
border:1px solid #909090;
background:#ffffff;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
-ms-border-radius: 0px;
-o-border-radius:4px 5px 0 0;
}


.text_message 
{
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
width:100%;
max-width:600px;
height:100px;
 font-size: 16px;
color:#353535;
margin-top: 0px;
text-align: left;
border:1px solid #909090;
background:#ffffff;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
-ms-border-radius: 0px;
-o-border-radius:4px 5px 0 0;
}
.submit5 {margin-top:0px;color: #FFF;font-size: 15px;font-style: normal;font-weight: normal;text-align: center;vertical-align: middle; max-width: 600px;width:100%;height:42px;padding: 4px 15px;background-color:#808080;cursor: pointer;border: 1px solid #323232;-webkit-appearance: none;}
.submit5:hover {background-color:#fff;border:1px solid #888;color: #353535;}

.tt {
    display: grid;
    width: 100%;
    align-items: center;
    text-align: left;
    color:#323232;
    font-weight:200;
    
    font-size:18px;
    grid-template-columns: minmax(0px, 0fr) auto minmax(20px, 1fr);
    grid-gap: 5px;
}

.tt:before,
.tt:after {
    content: '';
    border-top: 1px solid #538cc6;;
}


.img_col{float:left; width:12.5%;}
.imgp{ display: block; object-fit:cover; width:200px; height:200px; backface-visibility: hidden;background-color:white; padding:0px;}  

  @media screen and (max-width: 1560px) 
{
.img_col{float:left; width:25%;}
.imgp{ display: block; object-fit:cover; width:200px; height:250px; backface-visibility: hidden;background-color:white; padding:0px;}  

}


  @media screen and (max-width: 1270px) 
{
.img_col{float:left; width:25%;}
.imgp{ display: block; object-fit:cover; width:200px; height:200px; backface-visibility: hidden;background-color:white; padding:0px;}  

}

  @media screen and (max-width: 880px) 
{
.img_col{float:left; width:25%;}
.imgp{ display: block; object-fit:cover; width:200px; height:170px; backface-visibility: hidden;background-color:white; padding:0px;}  

}

  @media screen and (max-width: 590px) 
{
.img_col{float:left; width:50%;}
}



#cclk1{width:80px; float:left; text-align:center;position: fixed; }
#cclk2{float:right; width:calc(100% - 80px);  overflow: auto; border-left:1px solid #ccc;}
.ttw { display: grid;width:calc(100% - 80px);align-items: center;text-align: left;color:#323232;font-weight:200; font-size:18px;grid-template-columns: minmax(0px, 0fr) auto minmax(20px, 1fr); grid-gap: 5px;}
.overlay {height: 100%;width: 0;position: fixed;z-index: 1;top: 0;left:0;background-color: rgb(0,0,0);background-color: rgba(0,0,0, 0.9);overflow-x: hidden;transition: 0.5s;margin-left:0px;}
.overlay-content {position: relative;top: 5%;width: 100%;text-align: center;margin-top: 30px;}
.overlay a {padding: 8px;text-decoration: none;font-size: 20px;color: #fff;display: block;transition: 0.3s;}
.overlay a:hover, .overlay a:focus { color: #f5f5f5;}
.overlay .closebtn {position: absolute;top: 20px;right: 45px;font-size: 60px;}
@media screen and (max-width: 700px) 
{
#cclk1{width:80px; float:left; text-align:center;position: relative; }
}
@media screen and (max-width: 420px) 
{
#cclk1{width:80px; float:left; text-align:center;position: fixed; }
}
@media screen and (max-height: 450px) {
.overlay a {font-size: 20px}.overlay .closebtn {font-size: 40px;top: 15px;right: 35px;}
}
.chm {display: inline-block;cursor: pointer;}
.bar1, .bar2, .bar3 {width: 25px;height: 3px;background-color: #333;margin: 8px 0;transition: 0.4s;}
.change .bar1 {background-color:red;
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {opacity: 0;}
.change .bar3 {background-color:red;
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}
.book_but{margin-left:0px; margin-right:0px; width:110px; text-align:center; border:1px solid #538cc6; background-color:#538cc6; padding:7px 2px 7px 2px; font-size:13px; color:#fff;}
.book_but:hover{background-color: #f5f5f5;color:#292929; border:1px solid #538cc6;}
.ttf{color:#fff;}
.ttf:hover{color:#f5f5f5;}

.scrollToTop {display: none;position: fixed;bottom: 20px;right:20px; width:45px;z-index:1000000;font-size: 18px;border: none;outline: none;background-color:#676767;color: white;cursor: pointer;padding:10px;border-radius: 4px;}
.scrollToTop:hover {background-color:#000; color: #353535;}



.modal {display: none; position: fixed; z-index: 100000000000000000000000000; padding-top: 100px;left: 0;top: 0;width: 100%; height: 100%; overflow: auto;  background-color: rgba(0,0,0,0.6); }
. {display: none; position: fixed; z-index: 100000000000000000000000000; padding-top: 100px;left: 0;top: 30%;width: 100%; height: 100%; overflow: auto;  background-color: rgba(0,0,0,0.6); }
.close {color: red;float: right;text-align:right;font-size: 35px;font-weight: bold;}
.close:hover,
.close:focus {color: #000;text-decoration: none;cursor: pointer;}
.modal-content {webkit-border-radius: 5px;border-radius: 5px; background-color: #fefefe;margin: auto;margin-top:5%; padding: 20px;border: 1px solid #888; max-width:400px;color:#565656;font-size:20px;  text-align:center; z-index:10000000000000}
.modal-content_large {webkit-border-radius: 5px;border-radius: 5px; background-color: #fefefe;margin: auto;margin-top:5%; padding: 20px;border: 1px solid #888; max-width:700px;color:#565656;font-size:20px;  text-align:center; z-index:10000000000000}


.modal-content-middle {background-color: #fefefe;margin: auto;margin-top:10%; padding: 20px;border: 1px solid #888; max-width:500px;color:#565656;font-size:20px;  text-align:center; z-index:10000000000000}
.modal-content2 {background-color: #fefefe;margin: auto;margin-top:0%; padding: 20px;border: 1px solid #888; color:#565656;font-size:20px;  text-align:center;z-index:100000000000000}
.close {color: #aaaaaa;float: right;font-size: 28px;font-weight: bold;}
.close:hover,.close:focus {color: #000;text-decoration: none;cursor: pointer;}
.close2 {color: #aaaaaa;float: right;font-size: 28px;font-weight: bold; text-align:right;}
.close2:hover,.close:focus {color: #000;text-decoration: none;cursor: pointer;}
.close3 {color: #aaaaaa;float: right;font-size: 28px;font-weight: bold; text-align:right;}
.close3:hover,.close:focus {color: #000;text-decoration: none;cursor: pointer;}
.close4 {color: #aaaaaa;float: right;font-size: 28px;font-weight: bold; text-align:right;}
.close4:hover,.close:focus {color: #000;text-decoration: none;cursor: pointer;}
.close5 {color: #aaaaaa;float: right;font-size: 28px;font-weight: bold; text-align:right;}
.close5:hover,.close:focus {color: #000;text-decoration: none;cursor: pointer;}
.close7 {color: #aaaaaa;float: right;font-size: 28px;font-weight: bold; text-align:right;}
.close7:hover,.close:focus {color: #000;text-decoration: none;cursor: pointer;}
.close8 {color: #aaaaaa;float: right;font-size: 28px;font-weight: bold; text-align:right;}
.close8:hover,.close:focus {color: #000;text-decoration: none;cursor: pointer;}
.close9 {color: #aaaaaa;float: right;font-size: 28px;font-weight: bold; text-align:right;}
.close9:hover,.close:focus {color: #000;text-decoration: none;cursor: pointer;}
.close10 {color: #aaaaaa;float: right;font-size: 28px;font-weight: bold; text-align:right;}
.close10:hover,.close:focus {color: #000;text-decoration: none;cursor: pointer;}
.close11 {color: #aaaaaa;float: right;font-size: 28px;font-weight: bold; text-align:right;}
.close11:hover,.close:focus {color: #000;text-decoration: none;cursor: pointer;}
.close12 {color: #aaaaaa;float: right;font-size: 28px;font-weight: bold; text-align:right;}
.close12:hover,.close:focus {color: #000;text-decoration: none;cursor: pointer;}
.close13 {color: #aaaaaa;float: right;font-size: 28px;font-weight: bold; text-align:right;}
.close13:hover,.close:focus {color: #000;text-decoration: none;cursor: pointer;}


.site_container {
   min-height:100%;
   position:relative;
}
.site_header {
   background:transparent;
   padding:0px;
}
.site_body {
   padding:0px;
   padding-bottom:170px;   /* Height of the footer */
}
.site_footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:170px;   /* Height of the footer */
   background:transparent;
}

.scrollToTopright {display: none;position: fixed; bottom: 20px; right:8%; width:40px;z-index:1000000;font-size: 18px;border: none;outline: none;background-color:#676767;color: white;cursor: pointer;padding:10px;border-radius: 4px;}
.scrollToTopright:hover {background-color:#000; color: #353535;}

.book_input {outline: none;border: none;padding-left:5px; width:100%; height:60px;font-size: 15px;border:1px solid #909090;background:#ffffff;}
.submit_book {outline:none;border: none; margin-top:0px; width:100%; color: #fff; font-size:20px;font-style: bold;text-align: center;height:60px; padding:5px 10px 5px 10px;background-color:#448bbb;cursor: pointer;border: 0px solid #00C9B7; -webkit-appearance: none; -moz-appearance: none;appearance: none;}
.submit_book:hover {background-color:#7caed0;border: 0px solid #888;color: #fff;}
.moreifo {outline: none;border: none; width:200px; color: #448bbb;font-size:19px;font-style: normal;font-weight: normal;text-align: left;vertical-align: middle; height:30px; padding:0px 0px 0px 0px;background-color:transparent;cursor: pointer;border: 0px solid #00C9B7;-webkit-appearance: none; -moz-appearance: none;appearance: none;}
.moreifo:hover {background-color:transparent;color:#7caed0;}
.bol{margin-left:0px; margin-right:10px; width:130px; text-align:center; border:1px solid #448bbb; background-color:#448bbb; padding:7px 5px 7px 5px; font-size:13px; color:#fff;}
.bol:hover{background-color: #f5f5f5;color:#292929; border:1px solid #7caed0;}

#book_drop{
height:60px;
   -webkit-appearance: button;
   -ms-border-radius: 0px;
   -o-border-radius:0px 0px 0 0;
   -webkit-border-radius: 0px;
   -webkit-box-shadow: 0px 0px 0px;
   -webkit-padding-end: 0px;
   -webkit-appearance:none; 
   -webkit-padding-start: 0px;
   -webkit-user-select: none;
   background-image: url(/img/sel.png);
   background-color:#fff;
   background-position: 97% center;
   background-repeat: no-repeat;
   border: 1px solid #909090;
   color: #ccc;
   font-size: inherit;
   overflow: hidden;
   padding: 5px 10px;
   text-overflow: ellipsis;
   font-size: 15px;
   white-space: nowrap;
   width:100%;
      outline: none;

}
.mobal_logo{width:120px;}
.unavailable{color:red;text-decoration: line-through;}
.main_bg{width:100%;   padding-left:15px; padding-top:10px;  padding-right:15px;  padding-bottom:10px; background:#fff;}
.cm{margin:auto; max-width:80%;}
.cm_footer{margin:auto; max-width:80%; padding:0px 15px 0px 15px;}
.three{padding:0px 0px 20px 0px;}
.col-container {display: table; width: 100%;}
.article {-webkit-columns: 2; /* Chrome, Safari, Opera */-moz-columns: 2; /* Firefox */columns: 2;column-gap: 40px;}
.index_column1 {float:left;  height:550px; width: 75%;padding:0px 0px 0px 0px; background-color:#F8F8F8; }
.index_column2 {float:right; border-left: 30px solid #fff; height:550px; width: 25%; padding:30px 30px 30px 30px;  background-color:#F0F0F0;}
.v_column1 {float:left; height:450px; width: 50%; border-right: 15px solid #fff; padding:0px 0px 0px 0px; background-color:#F8F8F8; }
.v_column2 {float:right; position: relative; border-left: 15px solid #fff; min-height:450px; line-height:170%; width:50%; padding:30px 30px 30px 30px;  background-color:#F0F0F0;}
.vv_column1 {float:left; height:550px; width: 70%; padding:0px 0px 0px 0px; background-color:#F8F8F8; }
.vv_column2 {float:right; position:relative; width:30%; border-left: 30px solid #fff; height:550px; line-height:170%;  padding:30px 30px 30px 30px;  background-color:#F0F0F0;}
.vmv_column1 {float:left; height:auto; width: 70%; padding:0px 0px 0px 0px; background-color:#F8F8F8; }
.vmv_column2 {float:right; position:relative; width:30%; border-left: 30px solid #fff; height:auto; line-height:170%;  padding:30px 30px 30px 30px;  background-color:#F0F0F0;}
.vvs_column1 {float:left; height:550px; width: 70%; padding:0px 0px 0px 0px; background-color:#F8F8F8; }
.vvs_column2 {float:right; position:relative; width:30%; border-left: 30px solid #fff; height:auto; line-height:170%;  padding:30px 30px 30px 30px;  background-color:#F0F0F0;}
.column_left1 {float:left; display: table-cell;  min-height:400px;  width: 60%;padding:30px 30px 30px 30px; background-color:#F8F8F8; }
.column_right1 {float:right; display: table-cell;  min-height:400px; width: 40%; padding:30px 30px 30px 30px;  background-color:#F0F0F0;}


.com_column1 {float:right; height:450px; width: 50%; border-left: 15px solid #fff; padding:0px 0px 0px 0px; background-color:#F8F8F8; }
.com_column2 {float:left; position: relative; border-right: 15px solid #fff; min-height:450px; line-height:170%; width:50%; padding:30px 30px 30px 30px;  background-color:#F0F0F0;}



.owner_column1 {float:left;  height:250px; width: 25%;padding:0px 0px 0px 0px; background-color:#F8F8F8; }
.owner_column21 {float:right; border-left: 30px solid #fff; min-height:250px; width: 75%; padding:20px 30px 20px 30px;  background-color:#F0F0F0;}



.f1{padding:0px 10px 20px 10px;}
.tt1{font-size:26px; font-style:bold; font-weight:900; text-align:left; padding: 20px 10px 30px 10px;}
.tt2{font-size:26px; font-style:bold; font-weight:900; text-align:left; padding: 20px 10px 0px 10px;}
.img_col{float:left; width:16.66666666%;}
.imgp{ display: block; object-fit:cover; width:200px; height:200px; backface-visibility: hidden;background-color:white; padding:0px;}  
#map {height: 79%; width:100%; margin-top:10px;}
 @media screen and (max-width: 1885px) 
{
.vv_column1 {width: 65%;}
.vv_column2 {width: 35%;}
.vvs_column1 {width: 65%;}
.vvs_column2 {width: 35%;}
}
 @media screen and (max-width: 1822px) 
{
.index_column1 {width: 65%;}
.index_column2 {width: 35%;}
}
@media screen and (max-width: 1620px) 
{
.vv_column1 {width: 60%;}
.vv_column2 {width: 40%;}
.vvs_column1 {width: 60%;}
.vvs_column2 {width: 40%;}
}
@media screen and (max-width: 1610px) 
{
.vmv_column1 {width: 65%;}
.vmv_column2 {width: 35%;}
}
  @media screen and (max-width: 1560px) 
{
.img_col{float:left; width:33.3333333%;}
.imgp{ display: block; object-fit:cover; width:200px; height:250px; backface-visibility: hidden;background-color:white; padding:0px;}  
}
@media screen and (max-width: 1425px) 
{
.vv_column1 {width: 55%;}
.vv_column2 {width: 45%;}
.vvs_column1 {width: 55%;}
.vvs_column2 {width: 45%;}
}
@media screen and (max-width: 1359px) 
{
.vmv_column1 {width: 60%;}
.vmv_column2 {width: 40%;}
}
  @media screen and (max-width: 1330px) 
{
.index_column1 {width: 60%;}
.index_column2 {width: 40%;}
}
@media screen and (max-width: 1225px) 
{
.vv_column1 {width: 50%;}
.vv_column2 {width: 50%;}
.vvs_column1 {width: 50%;}
.vvs_column2 {width: 50%;}
}
  @media screen and (max-width: 1180px) 
{
.index_column1 {width: 50%;}
.index_column2 {width: 50%;}
.vmv_column1 {width: 55%;}
.vmv_column2 {width: 45%;}
.article {-webkit-columns: 1; /* Chrome, Safari, Opera */-moz-columns: 1; /* Firefox */columns: 1;column-gap: 0px;}
}
@media screen and (max-width: 1045px) 
{
.vmv_column1{float:left; width:100%;   padding:0px 0px 0px 0px;}
.vmv_column2{float:right; width:100%; border-left: 0px solid #fff; padding:0px 10px 30px 10px;}
.owner_column1{float:left; width:40%;}
.owner_column21{float:right; width:60%;}
}
  @media screen and (max-width: 1005px) 
{
.vv_column1 {float:left;  height:550px; width:100%;padding:0px 0px 20px 0px; background-color:#F8F8F8; }
.vv_column2 {float:right; border-left: 0px solid #fff; height:100%; width:100%; padding:30px 30px 30px 30px;  background-color:#F0F0F0;}
.vvs_column1 {float:left;  height:550px; width:100%;padding:0px 0px 20px 0px; background-color:#F8F8F8; }
.vvs_column2 {float:right; border-left: 0px solid #fff; height:100%; width:100%; padding:10px 10px 10px 10px;  background-color:#F0F0F0;}

}
  @media screen and (max-width: 945px) 
{
.index_column1 {float:left;  height:550px; width:100%;padding:0px 0px 20px 0px; background-color:#F8F8F8; }
.index_column2 {float:right; border-left: 0px solid #fff; height:100%; width:100%; padding:0px 30px 10px 30px;  background-color:#F0F0F0;}
.cm{margin:auto; max-width:100%;}
.cm_footer{margin:auto; max-width:100%; padding:0px 15px 0px 15px;}
.v_column1 {float:left; height:450px; border-right: 0px solid #fff; width:100%; padding:0px 0px 0px 0px; background-color:#F8F8F8; }
.v_column2 {float:right; position: relative; border-left: 0px solid #fff; height:100%; line-height:170%; width:100%; padding:20px 30px 10px 30px;  background-color:#F0F0F0;}
.com_column1 {float:left; height:450px; border-left: 0px solid #fff; width:100%; padding:0px 0px 0px 0px; background-color:#F8F8F8; }
.com_column2 {float:right; position: relative; border-right: 0px solid #fff; height:100%; line-height:170%; width:100%; padding:20px 30px 10px 30px;  background-color:#F0F0F0;}

}
  @media screen and (max-width: 880px) 
{
.img_col{float:left; width:50%;}
.imgp{ display: block; object-fit:cover; width:200px; height:170px; backface-visibility: hidden;background-color:white; padding:0px;}  
}
 @media only screen and (max-width : 768px) 
{
.column_left1 {float:left;  height:100%; width: 100%;padding:0px 30px 30px 30px; background-color:#F8F8F8; }
.column_right1 {float:right; height:100%; width: 100%; padding:30px 30px 30px 30px;  background-color:#F0F0F0;}
}
@media screen and (max-width: 590px) 
{
.img_col{float:left; width:50%;}
.index_column2 {float:right; border-left: 0px solid #fff; height:100%; width:100%; padding:20px 10px 20px 10px;  background-color:#F0F0F0;}
}
  @media screen and (max-width:500px) 
{
.vvs_column1 {float:left;  height:350px; width:100%;padding:0px 0px 20px 0px; background-color:#F8F8F8; }
.vvs_column2 {float:right; border-left: 0px solid #fff;  height:100%; height:100%; width:100%; padding:10px 10px 10px 10px;  background-color:#F0F0F0;}
}

@media screen and (max-width: 450px) 
{
.v_column1 {float:left; height:350px; width:100%; padding:0px 0px 0px 0px; background-color:#F8F8F8; }
.v_column2 {float:right; position: relative; border-left: 0px solid #fff; height:100%; line-height:170%; width:100%; padding:20px 30px 10px 30px;  background-color:#F0F0F0;}

.owner_column1{float:left; width:100%;}
.owner_column21 {float:right; border-left: 0px solid #fff; min-height:250px; width: 100%; padding:0px 30px 10px 30px;  background-color:#F0F0F0;}
}
 @media only screen and (max-width : 400px) 
{
.form_banner_left, .form_banner_right {width:100%;}
}


.head_bg{width:100%;   padding-left:15px; padding-top:10px;  padding-right:15px;  padding-bottom:10px; background:#fff; background: rgba(255, 255, 255, 0.9);  z-index:100; }
.three{padding:0px 0px 20px 0px;}
.img_logo{ vertical-align: top; padding-left:0px; padding-left:0px;  padding-right:0px; padding-top:0px; padding-bottom:0px;}
.nmenu { text-align:center; margin-top:20px;  border-bottom:1px solid #e8e8e8;  border-top:1px solid #e8e8e8;  margin:auto; max-width:100%; padding:20px 10px 20px 10px; background-color:transparent;}
.nmenu_mobile {text-align:left;  margin-left:auto; margin-right:auto;  top:0px;  padding-left:0px; margin-top:0px;  margin-bottom:0px; background-color:transparent; width:100%;}
.fix{position:fixed;}
.dropdown-1 {float: left; width:auto; padding-left:5px; padding-right:5px;}
.navbar-1 a:hover, .dropdown-1:hover .dropbtn-1 { color: #538cc6;}
.menu_btn {font-size:17px;  border: none; outline: none; color:#353535; padding-top:0px; padding-bottom:0px; padding-left:2%; padding-right:2%; background-color: inherit;  margin: 0;}
.menu_btn:hover { color: #448bbb;}
.animate-top{position:relative;animation:animatetop 0.4s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
.white,.hover-white:hover{color:#fff!important;background-color:#fff!important}
.card,.card-2{ box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)}
#selected{color:#538cc6;}
.img_logo{vertical-align: top;text-align:center; padding-left:0px; padding-left:0px;  padding-right:0px; padding-top:0px; padding-bottom:0px;}
.cm1{float:left;  width:33%; padding:30px 0px 0px 0px;}
.cm2{float:left;  width:33%; padding:0px 0px 0px 0px; text-align:center;}
.cm3{float:right; width:33%; padding:30px 0px 0px 0px; text-align:right;}
.bol{margin-left:0px; margin-right:10px; width:130px; text-align:center; border:1px solid #448bbb; background-color:#448bbb; padding:7px 5px 7px 5px; font-size:13px; color:#fff; webkit-border-radius: 5px;border-radius: 5px;}
.bol:hover{background-color: #f5f5f5;color:#292929; border:1px solid #538cc6;}
@media only screen and (min-width:620px)
{
.nmenu_mobile{display:none!important}
} 
@media screen and (max-width: 620px) 
{
.nmenu{display:none!important}
.pmenu{display:none!important}

.cm1{display:none!important}
.cm3{display:none!important}

.cm2{float:center;  width:100%; padding:0px 0px 0px 0px; text-align:center;}
} 
.cmb1{float:left; width:33.3333%; text-align:left; padding:0px 0px 10px 10px;}
.cmb2{float:left; width:33.3333%; text-align:center; padding:0px 0px 10px 0px;}
.cmb3{float:left; width:33.3333%; text-align:right; padding:0px 10px 10px 0px;}

.selected{color:#538cc6;}

.qty {
    width: 40px;
    height: 30px;
    text-align: center;
}
input.qtyplus 
{ 
width:25px; 
height:25px;
border:none;
cursor: pointer ;
}
input.qtyminus 
{ 
width:25px; 
height:25px;
border:none;
cursor: pointer ;
}

.input-icon {
  position: relative;
}

.input-icon > i {
  position: absolute;
  display: block;
  transform: translate(0, -50%);
  top: 50%;
  pointer-events: none;
  width: 25px;
  text-align: center;
	font-style: normal;
}

.input-icon > input {
  padding-left: 25px;
	padding-right: 0;
}
 


input[type="number"] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}


.number-input {
  border: 1px solid #ddd;
  display: inline-flex;
}

.number-input,
.number-input * {
  box-sizing: border-box;
}

.number-input button {
  outline:none;
  -webkit-appearance: none;
  background-color: transparent;
  border: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  cursor: pointer;
  margin: 0;
  position: relative;
}

.number-input button:after {
  display: inline-block;
  position: absolute;
  font-family: "Font Awesome 5 Free"; 
  font-weight: 900;
  content: '\f077';
  transform: translate(-50%, -50%) rotate(180deg);;
}
.number-input button.plus:after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.number-input input[type=number] {
  width: 60px;
  padding:0px 5px 0px 5px;
  border: solid #ddd;
  border-width: 0px;
  font-size: 22px;
  height:40px;
  font-weight: 200;
  text-align: center;
}