HTML  CSS  JS  Result
Edit on 
*{
  margin: 0;
    padding: 0;
    outline: none;
    border: none;
    -webkit-box-sizing: border-box;
}
*:before,
*:after{
    -webkit-box-sizing: border-box;
}
a{
	text-decoration:none!important;
}
.clearfix {
  *zoom: 1;
}
html{
    font-family: Helvetica, arial, sans-serif;
    font-size: 12px;
}
body{
	font-family:Roboto;
}
.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}
.clearfix:after {
  clear: both;
}
.container{
    width: 1170px;
    margin: 0 auto;
}

/*CSS header*/
header{
    width: 100%;
    height: auto;
    background: #fff;
}
.bg-inverse{
	background: hsla(0, 0%, 0%, 0) none repeat scroll 0 0 !important;
    padding:0;
}
.navbar-inverse .navbar-nav .nav-link {
    color: hsl(32, 23%, 16%);
	font-family:RobotoSlab;
	font-size:18px;
}
.navbar-toggleable-md .navbar-nav .nav-link {
    padding:0;
}
.navbar-inverse .navbar-toggler {
    border-color: hsla(0, 0%, 100%, 0.1);
    color: hsl(0, 0%, 0%)!important;
    font-size: 20px;
	left:0;
}
.navbar-toggleable-md .navbar-nav .nav-link i{
    padding-left: 50px;
    padding-right: 50px;
	font-size: 15px;
}
.navbar-inverse .navbar-nav .active > .nav-link, .navbar-inverse .navbar-nav .nav-link.active, .navbar-inverse .navbar-nav .nav-link.open, .navbar-inverse .navbar-nav .open > .nav-link {
    color: hsl(9, 88%, 56%);
}
.navbar-inverse .navbar-nav .nav-link:focus, .navbar-inverse .navbar-nav .nav-link:hover {
    color: hsl(9, 88%, 56%)
}
.starter-template {
  padding: 3rem 1.5rem;
  text-align: center;
}
.top-left {
    display: inline-block;
    float: left;
    margin-bottom: 42px;
    margin-top: 42px;
    width: 50%;
	text-align:left;
}
.top-right {
    display: inline-block;
    text-align: right;
    width: 50%;
}
.header-left,
.header-right{
    position: relative;
    color: white;
    float: left;
}
.header-left{
    width: 70%;
}
.header-right label{
    position: absolute;
    top: -3.7em;
    right: 0;
    cursor: pointer;
}
.header-right span{
    position: relative;
    width: 2em;
    height: 2em;
    background: rgba(255,255,255,.3);
    -webkit-transition: all .3s ease;
}
.header-right span:hover{
    background: rgba(255,255,255,.6);
}
.header-right span:before,
.header-right span:after{
    content: '';
    position: absolute;
    width: 2em;
    height: .5em;
    top: 4px;
    left: 0;
    background: black;
}
.header-right span:after{
    top: 14px;
}
.header-right{
    width: 30%;
    text-align: right;
}
.current{
	color:#f1482b;
}
.social i:hover{
	color:hsl(9, 88%, 56%);
	border: 1px solid hsl(9, 88%, 56%);
	background:none;
}
.social i{
	color:#101010;
	border: 1px solid hsl(0, 0%, 6%);
    height: 34px;
    line-height: 34px;
    text-align: center;
    width: 33px;
	font-size:15px;
}
.second-header {
    border-bottom: 1px solid hsl(0, 0%, 0%);
    border-top: 1px solid hsl(0, 0%, 0%);
    display: inline-block;
    padding-bottom: 20px;
    padding-top: 20px;
    width: 100%;
}
.img-responsive{
	width:100%;
}


section{
    width: 100%;
    height: auto;
    background-image: -webkit-linear-gradient(#80059E 0%, #550486 100%);
}
.logo > h1 {
    color: hsl(32, 23%, 16%);
    font-family: RobotoSlab;
    font-size: 40px;
    font-weight: bold;
    text-transform: uppercase;
	margin:0;
}
.address {
    color: hsl(0, 0%, 20%);
    font-size: 14px;
	margin-top:20px;
}
.address i {
    color: hsl(9, 88%, 56%);
    padding-right: 10px;
}
.book {
    margin-bottom: 20px;
    margin-top: 20px;
}
.book > a {
	background: hsl(9, 88%, 56%) none repeat scroll 0 0;
    color: hsl(0, 0%, 100%);
    display: inline-block;
    font-family: robotoSlab;
    font-size: 18px;
    font-weight: bold;
    padding: 10px 15px;
	border:1px solid hsl(9, 88%, 56%);
}
.book > a:hover{
	border:1px solid hsl(9, 88%, 56%);
	color:hsl(9, 88%, 56%);
	background:none;
}
.book > a:hover i{
	color:hsl(9, 88%, 56%);
} 
.book  i {
    color: hsl(0, 0%, 100%);
	padding-right:15px;
}

.section-left,
.section-right{
    float: left;
}
.section-left{
    width: 70%;
    padding: 3em 0;
}
.section-right{
    width: 30%;
}
.section-title,
.section-tagline{
    color: white;
    font-weight: 300;
    margin: 0;
    padding: 0;
    -webkit-transition: all .4s ease;
}
.section-title{
    font-size: 4em;
    margin-bottom: .3em;
    text-shadow: 0 3px 0px black,
                 0 4px 0px rgba(150,150,150,.5);
}
.section-tagline{
    font-size: 1em;
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
    .box{
        width: 49%;
        margin-bottom: 5%;
    }

    ul li:nth-child(3) .box{
        clear: both;
    }

    ul li:nth-child(2n) .box{
        margin-right: 0;
        clear: right;
    }
}

/* Small monitor */
@media (max-width: 979px){
    
    .section-left,
    .section-right{
        width: 100%;
    }
    .section-left{
        text-align: center;
    }
    .section-right{
        padding: 0 0 2em;
    }
    .section-title{
        font-size: 4em;
        margin-bottom: .2em;
    }
    .section-tagline{
        font-size: 1.3em;
    }
    .learn-more{
        margin: 0 auto;
    }
}
 
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
    .container{
        width: 95%;
    }
   
    h1{
        padding: .5em 0;
    }
    .header-left,
    .header-right{
        width: 100%;
        text-align: center;
    }
    .section-left,
    .section-right{
        width: 100%;
    }
    .section-left{
        text-align: center;
        padding: 2em 0;
    }
    .section-right{
        padding: 1em 0 2em;
    }
    .section-title{
        font-size: 3em;
        margin-bottom: .2em;
    }
    .section-tagline{
        font-size: 1.3em;
    }
    .learn-more{
        margin: 0 auto;
    }
}
 
/* Landscape phones and down */
@media (max-width: 480px) {
    body{
        padding: 0 .5em;
    }
    .container{
        width: 90%;
    }
    
    h1{
        padding: .5em 0;
    }
    .header-left,
    .header-right{
        width: 100%;
        text-align: center;
    }
    .section-left,
    .section-right{
        width: 100%;
    }
    .section-left{
        text-align: center;
        padding: 1em 0;
    }
    .section-right{
        text-align: center;
        padding: 1em 0 2em;
    }
    .section-title{
        font-size: 2.4em;
        margin-bottom: 0;
    }
    .section-tagline{
        font-size: 1em;
    }
    .learn-more{
        display: table;
        margin: 0 auto;
    }
    .hidden-desktop{
        display: block;
    }
}
/*Css carousel index*/
.carousel {
 
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
  bottom: 3rem;
}

/* Declare heights because of positioning of img element */
.carousel-item {
  height: 100%;
  background-color: #777;
}
.carousel-item > img {
  top: 0;
  left: 0;
  min-width: 100%;
  height: 100%;
}
.caption{
	background-color: hsla(9, 88%, 56%, 0.8);
    display: inline-block;
    top: 35%;
    padding: 40px 45px;
    position: absolute;
    text-transform: uppercase;
	left:15%;
}
.caption h3{
	font-size:14px;
	color:#fff;
	line-height:14px;
	margin-bottom:0
}
.caption h1{
	color: hsl(0, 0%, 100%);
    font-family: "Roboto Slab",serif;
    font-size: 35px;
    line-height: 35px;
    margin-bottom: 25px;
    margin-top: 20px;
}
.button-caption {
    border: 1px solid hsl(0, 0%, 100%);
    display: inline;
    padding: 10px 15px;
	cursor:pointer;
}
.button-caption:hover{
	border:1px solid hsl(9, 88%, 56%);
	background:#fff;
}
.button-caption:hover > a {
	color:hsl(9, 88%, 56%);
}
.button-caption > a {
    color: hsl(0, 0%, 100%);
    font-size: 12px;
	line-height:12px;
	font-family: RobotoSlab;
}
/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 62em) {
  .featurette-heading {
    margin-top: 7rem;
  }
}

/*Css Ads index*/
.ads-col{
    float: left;
}
.ads {
    display: inline-block;
    margin-bottom: 75px;
    margin-top: 75px;
    width: 100%;
}
.ads1 {
    display: inline-block;
    position: relative;
    width: 100%;
}
.img-ads:hover >.overlay{
	display:block
}
.img-ads:hover >.mask{
	display:block
}
.overlay {
    background: #101010;
    display: none;
    height: 100%;
    opacity: 0.7;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%;
}
.mask {
    display: none;
    height: 100%;
    padding: 10px 15px;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%;
}
.caption-ads{
	border: 1px solid hsl(0, 0%, 100%);
    color: hsl(0, 0%, 100%);
    height: 100%;
    padding-left: 25px;
    padding-right: 25px;
    padding-top: 60px;
}
.caption-ads > h1 {
    border-bottom: 1px solid hsl(0, 0%, 100%);
    font-family: RobotoSlab;
    font-size: 22px;
    margin: 0;
    padding-bottom: 15px;
    text-transform: uppercase;
}
.caption-ads > p {
    font-size: 14px;
    margin: 0;
    padding-bottom: 30px;
    padding-top:30px; 
}
.button-caption-ads {
    background: hsl(0, 0%, 100%) none repeat scroll 0 0;
    display: inline;
    padding: 15px 20px;
}
.button-caption-ads:hover {
    background: none;
    border: 1px solid #fff;
}
.button-caption-ads:hover > a {
    color: #fff;
}
.button-caption-ads > a {
    color: hsl(0, 0%, 20%);
    font-family: RobotoSlab;
    font-size: 16px;
}
/*css About Us index*/
.about-us {
    display: inline-block;
    width: 100%;
}
.about-us-tab-left {
    float: right;
    width: 45%;
    list-style: outside none none;
}
.about-us-tab-right {
    background-color: hsl(0, 0%, 100%);
    border: medium none;
    border-radius: 4px;
    clear: none;
    float: left;
    min-height: 250px;
    padding: 15px;
    width: 40%;
}
.about-us-tab-left > .active{
	background: #f1482b; /* For browsers that do not support gradients */
	background: -webkit-linear-gradient(left, #f1482b , #eda742); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(right, #f1482b , #eda742); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(right, #f1482b , #eda742); /* For Firefox 3.6 to 15 */
	background: linear-gradient(to right, #f1482b , #eda742); /* Standard syntax */
}
.about-us-tab-left > .active:after{
	border-bottom: 15px solid hsla(0, 0%, 0%, 0);
    border-right: 15px solid hsl(9, 88%, 56%);
    border-top: 15px solid hsla(0, 0%, 0%, 0);
    content: "";
    position: absolute;
    right: 100%;
    top: 15px;
}
.about-us-tab-left  i{
	background: hsl(0, 0%, 96%) none repeat scroll 0 0;
    border-radius: 50%;
    color: hsl(9, 88%, 56%);
    float: left;
    font-size: 22px;
    height: 86px;
    line-height: 86px;
    margin-right: 20px;
    text-align: center;
    width: 86px;
}
.about-us-tab-left li{
	padding:15px;
	position:relative;
	cursor: pointer;
}
.about-us-tab-left > .active > h2,.about-us-tab-left > .active > p{
	color:#fff!important;
	margin:0
}
.about-us-tab-left  h2 {
    font-size: 18px;
	color:#343434;
	line-height: 30px;
	margin:0
}
.about-us-tab-left  p {
    color: hsl(0, 0%, 67%);
    font-size: 14px;
    font-weight: normal;
	line-height: 25px;
}
.about-us-tab-left > .active > h1 {
    font-family: RobotoSlab;
    font-size: 60px;
    font-weight: bold;
    line-height: 60px;
}
.about-us-tab-left > .active > p {
    color: hsl(0, 0%, 67%);
    font-size: 14px;
	margin:0;
}
.about-us-tab-right h1 {
    font-family: RobotoSlab;
    font-size: 60px;
    font-weight: bold;
    line-height: 60px;
	margin:0;
}
.about-us-tab-right p {
    color: hsl(0, 0%, 67%);
    font-size: 14px;
    line-height: 25px;
    margin-top: 40px;
}
/*css our menu index*/
.our-menu {
    display: inline-block;
    margin-bottom: 75px;
    margin-top: 75px;
    width: 100%;
}
.our-menu-title {
    font-size: 25px;
    margin-bottom: 45px;
    text-align: center;
}
.menu-index{
    float: left;
	padding-left:15px;
	padding-right:15px;
	width:25%;
}
.menublock1 {
    display: inline-block;
    position: relative;
    width: 100%;
}
.menublock1 > .img-ads > .mask > a {
    background: hsl(0, 0%, 100%) none repeat scroll 0 0;
    border-radius: 50px;
    font-size: 22px;
    height: 50px;
    left: 0;
    line-height: 50px;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    right: 0;
    top: 39%;
    width: 50px;
	color: hsl(9, 88%, 56%);
}
.img-ads {
    display: inline-block;
    position: relative;
	width:100%;
}
.caption-our-menu {
    background: hsl(0, 0%, 96%) none repeat scroll 0 0;
    border-bottom: 5px solid hsl(9, 88%, 56%);
    display: inline-block;
    padding-bottom: 25px;
    padding-top: 25px;
    text-align: center;
    width: 100%;
}
.caption-our-menu a {
    font-size: 18px;
	color:#101010;
}
.caption-our-menu > p {
    color: hsl(0, 0%, 67%);
    font-size: 14px;
    font-weight: normal;
    line-height: 25px;
}
.menublock1:hover >.caption-our-menu {
    border-bottom: 5px solid #101010;
}
.menublock1:hover >.img-ads >.overlay {
    display:block
}
.menublock1:hover >.img-ads >.mask {
    display:block
}
.button-menu-index {
    display: inline-block;
    text-align: center;
    width: 100%;
}
.button-menu-index > a {
    background: hsl(9, 88%, 56%) none repeat scroll 0 0;
    color: hsl(0, 0%, 100%);
    display: inline-block;
    font-family: RobotoSlab;
    font-size: 16px;
    margin-top: 60px;
    padding: 15px 25px;
	border:1px solid hsl(9, 88%, 56%);
}
.button-menu-index > a:hover {
    background: none;
    color: hsl(9, 88%, 56%);
	border:1px solid hsl(9, 88%, 56%);
}
/*css Our tea index*/
.button-our-tea-index > a {
    background: none;
    color: hsl(0, 0%, 100%);
    display: inline-block;
    font-family: RobotoSlab;
    font-size: 16px;
    padding: 5px 20px;
	border:1px solid #fff;
	margin-top:65px;
}
.button-our-tea-index > a:hover {
    background: #FFF;
    color: hsl(9, 88%, 56%);
	border:1px solid hsl(9, 88%, 56%);
}
.our-tea-text {
	color: hsl(0, 0%, 100%);
    padding-bottom: 85px;
    padding-top: 95px;
    width: 58.3333%;
}
.our-tea-text > h1 {
    font-family: RobotoSlab;
    font-size: 40px;
    font-weight: bold;
    line-height: 60px;
	text-transform: uppercase;
}
.our-tea-text > h3 {
    font-size: 18px;
    line-height: 30px;
    margin-bottom: 0;
    padding-bottom: 35px;
    padding-top: 35px;
}
.our-tea-text > p {
    font-size: 14px;
    line-height: 25px;
}
.about-our-tea {
	background-image:url("../images/about-our-tea.jpg");
	background-repeat:no-repeat;
	-webkit-background-size:cover;
	-moz-background-size:cover;
	-o-background-size:cover;
	background-size:cover;
	background-position:center;
}
.about-our-tea::before {
    background: hsla(0, 0%, 0%, 0) url("../images/bt.png") repeat-x scroll left top;
    content: "";
    height: 15px;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 10;
}
/*from blog index*/
.from-the-blog {
    display: inline-block;
    margin-bottom: 75px;
    margin-top: 75px;
    width: 100%;
}
.from-the-blog-title {
    font-size: 25px;
    margin-bottom: 45px;
    text-align: center;
}
.blog-index{
    float: left;
	width:33.333%;
	padding-left:15px;
	padding-right:15px;
}
.blogblock1 {
    display: inline-block;
    position: relative;
    width: 100%;
}
.blogblock1 > .img-ads > .mask > a {
    background: hsl(0, 0%, 100%) none repeat scroll 0 0;
    border-radius: 50px;
    font-size: 22px;
    height: 50px;
    left: 0;
    line-height: 50px;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    right: 0;
    top: 39%;
    width: 50px;
	color: hsl(9, 88%, 56%);
}
.blogblock1:hover >.img-ads >.overlay {
    display:block
}
.blogblock1:hover >.img-ads >.mask {
    display:block
}
.caption-our-blog {
    display: inline-block;
    padding: 35px 30px;
    text-align: left;
    width: 100%;
	box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
.caption-our-blog > h2 {
    font-size: 18px;
	color:#101010;
	font-weight:bold;
}
.caption-our-blog > p {
    color: hsl(0, 0%, 67%);
    display: inline-block;
    font-size: 14px;
    font-weight: normal;
    line-height: 25px;
    margin-bottom: 15px;
    margin-top: 15px;
}
.button-caption-blog > a {
    background: hsl(9, 88%, 56%) none repeat scroll 0 0;
    color: hsl(0, 0%, 100%);
    display: inline-block;
    font-family: RobotoSlab;
    font-size: 16px;
    padding: 5px 20px;
	border:1px solid hsl(9, 88%, 56%); 
}
.button-caption-blog > a:hover {
    background: none;
    color: hsl(9, 88%, 56%);
}
/*book a table index*/
.booktable-title{
	text-align:center;
}
.booktable-title > p {
    color: hsl(0, 0%, 67%);
    font-family: Roboto;
    font-size: 14px;
    font-style: italic;
	margin:0;
}
.booktable-title > h2 {
    font-size: 25px;
    font-weight: bold;
	line-height:30px;
}
.form-control {
    border-color: -moz-use-text-color -moz-use-text-color hsl(9, 88%, 56%);
    border-radius: 0;
    border-style: none none solid;
    border-width: medium medium 1px;
}
.form-index{
	margin-top:40px;
}
.form-control::-moz-placeholder {
    color: hsl(0, 0%, 67%);
    font-size:16px;
}
.button-booktable-index{
	background: hsl(9, 88%, 56%) none repeat scroll 0 0;
    border: 1px solid hsl(9, 88%, 56%);
    color: hsl(0, 0%, 100%);
    font-family: RobotoSlab;
    font-size: 16px;
    padding: 10px 20px;
	float:right;
	cursor:pointer;
}
.button-booktable-index:hover{
	background: none;
    border: 1px solid hsl(9, 88%, 56%);
    color: hsl(9, 88%, 56%);
}
.notice {
    margin-bottom: 35px;
    margin-top: 50px;
}
.booktable-index {
    display: inline-block;
    margin-bottom: 95px;
    width: 100%;
}
/*Css Footer*/
footer{
	background: hsl(0, 0%, 6%) none repeat scroll 0 0;
    display: inline-block;
    padding-top: 60px;
    width: 100%;
}
.contact-footer,.navigation-footer,.newsletter,.last-tweets{
	float:left;
	display:inline-block;
	color:#fff;
}
.contact-footer{
	width:33.3333%;
	padding-left:15px;
	padding-right:15px;
}
.navigation-footer{
	width:16.6667%;
	padding-left:15px;
	padding-right:15px;
}
.newsletter{
	width:25%;padding-left:15px;
	padding-right:15px;
}
.last-tweets{
	width:25%;
	padding-left:15px;
	padding-right:15px;
}
.footer-title {
    color: hsl(0, 0%, 100%);
    font-size: 25px;
    margin-bottom: 30px;
    margin-top: 30px;
}
.block-footer > p {
    font-size: 14px;
    margin-bottom: 20px;
}
.local a {
    color: hsl(0, 0%, 100%);
    display: inline-block;
    font-size: 14px;
    margin-bottom: 25px;
    width: 100%;
	line-height: 40px;
}
.local i {
    border: 1px solid hsl(0, 0%, 100%);
    border-radius: 50%;
    height: 40px;
    line-height: 40px;
    margin-right: 15px;
    text-align: center;
    width: 40px;
	float: left;
	font-size:18px;
}
.local p {
    float: left;
    line-height: 20px;
    margin: 0;
    width: 80%;
}
.list-unstyled span {
    color: hsl(0, 0%, 100%);
    font-size: 14px;
    line-height: 33px;
}
.list-unstyled i {
    font-size: 18px;
    padding-right: 15px;
}
#emailnews{
    border: medium none;
    font-style: italic;
    padding: 15px 20px;
	margin-bottom:28px;
}
.button-newsletter {
    background: hsl(9, 88%, 56%) none repeat scroll 0 0;
    border: 1px solid hsl(9, 88%, 56%);
    color: hsl(0, 0%, 100%);
    float: left;
    font-family: RobotoSlab;
    font-size: 16px;
    padding: 10px 20px;
	cursor:pointer;
}
.button-newsletter:hover {
    background: #fff;
    border: 1px solid #fff;
    color:hsl(9, 88%, 56%);
}
.block-tw {
    display: inline-block;
    margin-bottom: 45px;
}
.block-tw i {
    border: 1px solid hsl(0, 0%, 100%);
    border-radius: 50%;
    height: 40px;
    line-height: 40px;
    margin-right: 15px;
    text-align: center;
    width: 40px;
	float: left;
	font-size:18px;
}
.block-tw p {
    float: left;
    line-height: 20px;
    margin: 0;
    width: 78%;
}
.block-tw > h2 {
    font-size: 16px;
}
.bottom-part{
    color: hsl(0, 0%, 100%);
    display: inline-block;
    margin: 0 auto;
    text-align: center;
}
.content-bottom > h1 {
    font-size: 25px;
    margin-bottom: 12px;
    margin-top: 22px;
}
.content-bottom > p {
    font-size: 13px;
    margin-bottom: 15px;
    margin-top: 18px;
}
.content-bottom{
    width: 68%;
    background: hsl(9, 88%, 56%) none repeat scroll 0 0;
	display:inline-block;
}
.social-footer i {
    border: 1px solid hsl(0, 0%, 100%);
    border-radius: 50%;
    font-size: 18px;
    height: 36px;
    line-height: 36px;
    width: 36px;
	color:#fff;
}
.social-footer i:hover {
    border: 1px solid hsl(9, 88%, 56%);
	color:hsl(9, 88%, 56%);
	background:#fff
}
/*PAGE ABOUT US*/
.about-title{
	font-size:25px;
	color:#101010;
	text-align:center;
	margin-bottom:40px;
}
.about,.testimonials,.awards,.skills{
	float:left;
	display:inline-block;
}
.about-us-content,.our-team,.our-skill{
	margin-top:75px;
	display: inline-block;
    width: 100%;
}
.banner {
    background:url(../images/banner.jpg);
	background-repeat:no-repeat;
	-webkit-background-size:cover;
	-moz-background-size:cover;
	-o-background-size:cover;
	background-size:cover;
	background-position:center;
	height:150px;
}
.banner img {
    
}
/*Css About*/
.about-img,.about-text{
	float:left;
	width:50%;
	padding-left:15px;
	padding-right:15px
}
.about-text > h2 {
    color: hsl(0, 0%, 20%);
    font-size: 18px;
}
.about-text > p {
    color: hsl(0, 0%, 67%);
    font-size: 14px;
    line-height: 25px;
    margin: 0;
}
/*Css Testimonials*/
.verticalCarouselHeader {
    
}
.verticalCarousel {
  max-width: 500px;
}

.vc_goUp, .vc_goDown {
  display: block;
}
.vc_goUp.isDisabled, .vc_goDown.isDisabled {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
  opacity: 0.3;
  cursor: not-allowed;
}
.vc_container {
  overflow: hidden;
  -moz-transition: height 0.2s ease-in;
  -o-transition: height 0.2s ease-in;
  -webkit-transition: height 0.2s ease-in;
  transition: height 0.2s ease-in;
  min-height:auto;
}

.vc_list {
  margin: 0;
  padding: 0;
  list-style: none;
  -moz-transition: -moz-transform 0.2s ease-in;
  -o-transition: -o-transform 0.2s ease-in;
  -webkit-transition: -webkit-transform 0.2s ease-in;
  transition: transform 0.2s ease-in;
}
.verticalCarouselHeader .vc_goDown i,.verticalCarouselHeader .vc_goUp i{
	font-size:20px;
}
.verticalCarouselHeader .vc_goUp {
	background: hsl(0, 0%, 100%) none repeat scroll 0 0;
    color: hsl(0, 0%, 0%);
    display: inline-block;
    height: 25px;
    left: 0;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    right: 0;
    text-align: center;
    top: 50px;
    width: 25px;
}
.verticalCarouselHeader .vc_goDown{
	background: hsl(0, 0%, 100%) none repeat scroll 0 0;
    color: hsl(0, 0%, 0%);
    display: inline-block;
    height: 25px;
    left: 0;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    right: 0;
    text-align: center;
    bottom: -35px;
    width: 25px;
}
.verticalCarouselHeader .vc_goUp:active, .verticalCarouselHeader .vc_goDown:active {
  -moz-transform: scale(0.7, 0.7);
  -ms-transform: scale(0.7, 0.7);
  -webkit-transform: scale(0.7, 0.7);
  transform: scale(0.7, 0.7);
}
.verticalCarouselGroup.vc_list >.testi-detail>.testi {
  background-color: hsl(0, 0%, 100%);
    border: 1px solid hsl(0, 0%, 67%);
    padding: 15px;
	position:relative;
	margin-bottom: 0px;
}
.verticalCarouselGroup.vc_list >.testi-detail>.testi:after{
	background: hsl(0, 0%, 100%) none repeat scroll 0 0;
    border-bottom: 1px solid hsl(0, 3%, 45%);
    border-right: 1px solid hsl(0, 3%, 45%);
    bottom: -11px;
    content: "";
    height: 20px;
    left: 65px;
    position: absolute;
    transform: skewY(45deg);
    width: 20px;
}
.verticalCarouselGroup.vc_list >.testi-detail>.testi h4 {
  margin: 0px 0px 15px;
}
.verticalCarouselGroup.vc_list >.testi-detail>.testi p {
	color: hsl(0, 0%, 67%);
    display: inline-block;
    font-size: 14px;
    line-height: 25px;
    margin: 0;
    width: 90%;
}
.verticalCarouselGroup.vc_list >.testi-detail>.testi i {
    color: hsl(0, 0%, 76%);
    float: left;
    font-size: 20px;
    line-height: 5px;
    padding-right: 10px;
}
.testi-detail {
    display: inline-block;
    height: 100%;
    overflow: hidden;
}
.name-testi {
    color: hsl(9, 88%, 56%);
    font-size: 16px;
    font-weight: bold;
    text-align: center;
	margin-bottom:15px;
	margin-top:30px;
}
.name-testi > small {
    color: hsl(0, 0%, 76%);
    font-size: 14px;
	padding-left:15px;
}
/*Css Our Team*/
.member-team{
	background:url("../images/ourteam.jpg");
	background-repeat:no-repeat;
	-webkit-background-size:cover;
	-moz-background-size:cover;
	-o-background-size:cover;
	background-size:cover;
	background-position:center;
    display: inline-block;
    width: 100%;
	padding-bottom:60px;
	padding-top:55px;
}
.testi-member{
    display: inline-block;
    float: left;
    position: relative;
    width: 25%;
	text-align:center;
	padding-left:15px;padding-right:15px;
}
.detail-member {
    background: hsl(0, 0%, 100%) none repeat scroll 0 0;
    padding: 15px;
	margin-top:25px;
	position:relative;
	text-align: left;
}
.detail-member::before {
    border-left: 10px solid hsla(0, 0%, 0%, 0);
    border-bottom: 15px solid hsl(0, 0%, 100%);
    border-right: 10px solid hsla(0, 0%, 0%, 0);
    content: "";
    position: absolute;
    right: 50%;
    top: -15px;
}
.detail-member > h3 {
    color: hsl(0, 0%, 20%);
    font-size: 16px;
	font-weight:bold;
}
.detail-member > p {
    color: hsl(0, 0%, 67%);
    font-size: 13px;
    line-height: 20px;
    margin: 0;
}
.detail-member small {
    padding-left: 10px;
}
.rounded-circle {
    border: 5px solid TRANSPARENT;
    border-radius: 50%;
}
.testi-member:hover >.detail-member {
    background: #f1482b;
}
.testi-member:hover >.detail-member::before {
    border-bottom: 15px solid #f1482b;
}
.testi-member:hover >.detail-member > h3,.testi-member:hover >.detail-member > p {
    color: #fff;
}
.img-team {
    position: relative;
	display:inline-block;
}
.testi-member >.img-team > .overlay {
    background: hsl(0, 0%, 6%) none repeat scroll 0 0;
    border-radius: 50%;
    display: none;
    height: 100%;
    left: 0;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.7;
    position: absolute;
    right: 0;
    text-align: center;
    width: 100%;
}
.testi-member >.img-team > .mask i{
    color: hsl(0, 0%, 100%);
    font-size: 20px;
    left: 0;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    right: 0;
    top: 40%;
	cursor:pointer;
}
.testi-member:hover >.img-team > .overlay{
	display:block;
	border:5px solid #fff
}
.testi-member:hover >.img-team > .mask{
	display:block
}
.modal-dialog {
     background: hsl(0, 0%, 100%) none repeat scroll 0 0;
    left: 0;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    position: absolute;
    right: 0;
    top: 20%;
}
.modal.fade.show{
	 background-color: hsla(0, 0%, 0%, 0.8);
}
.info-member > img {
    margin-bottom: 20px;
	width: 100%;
}
.info-member > a {
    color: hsl(0, 0%, 67%);
    display: inline-block;
    font-size: 14px;
    width: 100%;
}
.info-des > .social-member > a > i {
    border: 1px solid hsl(0, 0%, 0%);
    border-radius: 50%;
    color: hsl(0, 0%, 0%);
    display: inline-block;
    font-size: 15px;
    height: 30px;
    line-height: 30px;
    width: 30px;
	text-align:center;
}
.info-des > .social-member > a > i:hover{
	border: 1px solid hsl(9, 88%, 56%);
	color: hsl(9, 88%, 56%);
}
.info-member > a > i {
    color: hsl(9, 88%, 56%);
    padding-right: 10px;
}
.info-member {
    display: inline-block;
    float: left;
    width: 35%;
    word-wrap: break-word;
}
.info-des{
	float: right;
    margin-left: 20px;
    text-align: left;
    width: 55%;
}
.info-des > h3{
	color: hsl(9, 88%, 56%);
}
.info-des > p{
	color: hsl(0, 0%, 67%);
}
/*Css Our Awards*/
.awards-text {
    margin-bottom: 50px;
}
.awards-text img{
    border: 1px solid hsl(0, 0%, 76%);
    color: hsla(0, 0%, 0%, 0) linear-gradient(to right, hsl(9, 88%, 56%), hsl(35, 83%, 59%)) repeat scroll 0 0;
    float: left;
    font-size: 30px;
    height: 70px;
    line-height: 70px;
    margin-right: 30px;
    text-align: center;
    width: 70px;
	padding:20px;
}
.awards-text > h2 {
    color: hsl(0, 0%, 20%);
    font-size: 20px;
	margin-bottom:10px;
}
.awards-text > p {
    color: hsl(0, 0%, 60%);
    font-size: 14px;
    margin: 0;
}
/*Css Skills*/
.our-skill{
	margin-bottom:75px;
}
.progress-bar {
    background: hsla(0, 0%, 0%, 0) linear-gradient(to right, hsl(9, 88%, 56%), hsl(35, 83%, 59%)) repeat scroll 0 0;
    color: hsl(0, 0%, 100%);
    height: 25px;
}
.progress {
    background-color: hsl(0, 0%, 84%);
    border-radius: 0;
    display: flex;
    font-size: 0.75rem;
    line-height: 1rem;
    overflow: hidden;
    text-align: center;
}
.progress-label {
    color: hsl(0, 0%, 53%);
    font-size: 16px;
    margin-bottom: 35px;
    margin-top: 15px;
}
/*CSS PAGE MENU*/
.menus {
    display: inline-block;
    margin-bottom: 80px;
    margin-top: 80px;
	width:100%;
	text-align:center;
}
.menu-title{
	font-size: 25px;
    margin-bottom: 35px;
    text-align: center;
	color:#101010;
}
.menu-tab li {
    border: 1px solid hsl(0, 0%, 89%);
    display: inline;
    font-size: 15.84px;
    padding: 15px 20px;
	box-shadow: 0 3px 6px hsla(0, 0%, 0%, 0.16), 0 3px 6px hsla(0, 0%, 0%, 0.23);
	margin-right:20px;
}
.menu-tab >.active{
	background:#f1482b;
	color:#fff;
}
.menu-tab li:hover{
	background:#f1482b;
	color:#fff;
}
.list-menu{
	
}
.menu-content >.list-menu >.menu-index{
	width:100%;
}
.menu-content >.list-menu >.menu-index >.menublock1 >.img-ads > .overlay {
    background: hsl(9, 88%, 56%) none repeat scroll 0 0;
    display: none;
    height: 100%;
    opacity: 0.7;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%;
}
.menu-content >.list-menu >.menu-index >.menublock1 >.img-ads:hover > .overlay {
    display: block;
}
.menu-content >.list-menu >.menu-index >.menublock1 >.img-ads > .mask > a {
    background: none!important;
    border: 2px solid hsl(0, 0%, 100%);
    border-radius: 0;
    color: hsl(0, 0%, 100%);
    font-size: 22px;
    height: auto;
    left: auto;
    line-height: 22px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 35%;
    padding: 10px;
    position: relative;
    right: auto;
    top: 0;
    width: auto;
}
.menu-content >.list-menu >.menu-index >.menublock1 >.img-ads > .mask > a:hover{
	background:#fff!important;
    color: hsl(9, 88%, 56%);
}

.menu-content >.list-menu >.menu-index >.menublock1 >.caption-our-menu{
	 background: hsla(0, 0%, 0%, 0) none repeat scroll 0 0;
    border-bottom: medium none;
    display: inline-block;
    padding-bottom: 25px;
    padding-top: 25px;
    text-align: center;
    width: 100%;
}
.menu-content >.list-menu >.menu-index >.menublock1:hover>.caption-our-menu{
    border-bottom: medium none;
}
#filter-list {
	display: block;
	width: 100%;
	text-align: center;
	margin-bottom: 60px;
	padding:0;
}

#filter-list li {
	border: 1px solid hsl(0, 0%, 89%);
    box-shadow: 0 3px 6px hsla(0, 0%, 0%, 0.16), 0 3px 6px hsla(0, 0%, 0%, 0.23);
    display: inline-block;
    font-size: 15.84px;
    margin-right: 20px;
    padding: 15px 20px;
	cursor: pointer;
}
#filter-list li:hover {
	background: hsl(9, 88%, 56%) none repeat scroll 0 0;
    color: hsl(0, 0%, 100%);
}
#filter-list li.active {
	background: hsl(9, 88%, 56%) none repeat scroll 0 0;
    color: hsl(0, 0%, 100%);
}


/** portfolio list **/
#portfolio {
	display: block;
	width: 100%;
	text-align: center;
}

#portfolio .item {
	display: none;
	opacity: 0;
	width: 25%;
	vertical-align: top;
	float:left;
	color: #fff;
	font-size: 30px;
	text-align: center;
	-moz-box-sizing: border-box;
}
#portfolio .item a {
  display: inline-block;
  max-width: 100%;
  text-decoration: none;
  background: #fff;

}
#portfolio .item img {
  padding: 3px;
  max-width: 100%;
}
.list-menu >.menu-index >.menublock1{
	margin-bottom:0;
}
/** clearfix **/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
 
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }


/** media queries **/
@media screen and (max-width: 720px) {
  h1 { font-size: 2.7em; }
}

@media screen and (max-width: 500px) {
  h1 { font-size: 2.0em; }
  #filter-list {  }
  #filter-list li { display: block; margin-bottom: 3px;width:100% }
  
  #portfolio { margin-bottom: 20px; }
  #portfolio .item { width: 100%; margin-bottom: 0px; margin-right: 0; }
}
/*CSS PAGE BLOG*/
.blog {
    display: inline-block;
    margin-bottom: 80px;
    margin-top: 80px;
	width:100%;
	text-align:center;
}
.blog-title{
	font-size: 25px;
    margin-bottom: 35px;
    text-align: center;
	color:#101010;
}
.item-detail {
    display: inline-block;
    margin-bottom: 40px;
    width: 100%;
}
.item-detail img {
    float: left;
    padding-right: 30px;
    width: 48%;
}
.item-last{
	margin-bottom:0
}
.blog-des {
    float: right;
    width: 52%;
}
.blog-des h1 {
    color: hsl(0, 0%, 20%);
    font-size: 18px;
    font-weight: bold;
    margin: 0;
}
.blog-des >.schedule-blog {
    color: #f1482b;
    font-size: 14px;
    margin-bottom: 25px;
    margin-top: 25px;
}
.blog-des p {
    color: #878787;
    font-size: 14px;
    margin: 0;
}
.blog-des >.button-caption-blog {
    margin-top: 30px;
}
.blog-des >.button-caption-blog > a {
    background: hsl(9, 88%, 56%) none repeat scroll 0 0;
    border: 1px solid hsl(9, 88%, 56%);
    color: hsl(0, 0%, 100%);
    display: inline-block;
    font-family: RobotoSlab;
    font-size: 16px;
    padding: 10px 20px;
}
.blog-des >.button-caption-blog > a:hover{
    background: none;
    border: 1px solid hsl(9, 88%, 56%);
    color: hsl(9, 88%, 56%);
}
.pagination {
    display: inline-block;
    float: right;
    margin: 50px 0 0;
    text-align: left;
    width: 52%;
}
.pagination > li {
    display: inline-block;
    margin-left: 10px;
}
.pagination > li > a, .pagination > li > span {
    background-color: hsl(0, 0%, 100%);
    border: 1px solid hsl(0, 0%, 87%);
    color: hsl(210, 4%, 52%);
    float: left;
    font-size: 14px;
    line-height: 1.42857;
    margin-left: -1px;
    padding: 6px 12px;
    position: relative;
    text-decoration: none;
}
.pagination > li:hover > a{
   background: #f1482b!important;
    color: hsl(0, 0%, 100%) !important;
}
.current {
    background: #f1482b!important;
    color: hsl(0, 0%, 100%) !important;
}
/*css Sidebar Blog*/
.blog-item,.blog-sidebar{
	float:left;
	padding-left:15px;
	padding-right:15px
}
.blog-item{
	width:75%
}
.blog-sidebar{
	width:25%
}
input.search-query {
    border-bottom: medium none;
}
form.form-search {
    border: 1px solid hsl(0, 0%, 75%);
    height: 45px;
    position: relative;
}
.input-group-btn {
    height: 43px;
}
.form-inline .input-group {
    width: 100%;
}
.input-group-btn .btn{
	 background: hsl(0, 0%, 20%) none repeat scroll 0 0;
    border: medium none;
    border-radius: 0;
	font-size:16px;
}
.input-group-btn .btn:hover{
	background: #f1482b
}
form.form-search:before {
    background-position: -48px 0;
    color: hsl(0, 0%, 75%);
    content: "";
    display: block;
    font-family: "fontawesome";
    font-size: 18px;
    height: 14px;
    left: 15px;
    opacity: 0.5;
    position: absolute;
    top: 6px;
    width: 14px;
    z-index: 1000;
}
.search-sidebar{
}
/*Sidebar blog*/
.sidebar-title{
	font-size: 25px;
    margin-bottom: 25px;
    text-align: center;
	color:#101010;
	margin-top: 85px;
}
.sidebar1 > ul, .sidebar2 > ul {
    margin:0;
    list-style: outside none none;
    text-align: left;
	padding:0;
}
.sidebar1 li, .sidebar2 li {
    border-top: 1px solid #dfdfdf;
}
.sidebar1 > ul >.last, .sidebar2 > ul  >.last{
	border-bottom: 1px solid #dfdfdf;
}
.sidebar1 li a, .sidebar2 li a {
    color: hsl(0, 0%, 53%);
    display: inline-block;
    font-size: 14px;
    margin-bottom: 15px;
    margin-top: 15px;
}
.sidebar1 span, .sidebar2 span {
    padding-left: 15px;
}
.sidebar1 i, .sidebar2 i {
    color: #f1482b;
    font-size: 10px;
    padding-right: 20px;
}
.name-tags a {
    border: 1px solid hsl(0, 0%, 89%);
    box-shadow: 0 3px 6px hsla(0, 0%, 0%, 0.16), 0 3px 6px hsla(0, 0%, 0%, 0.23);
    color: hsl(0, 0%, 20%);
    display: inline-block;
    float: left;
    font-size: 14px;
    margin-bottom: 10px;
    margin-right: 10px;
    padding: 10px 15px;
}
.name-tags a:hover{
	background: #f1482b;
	color:#fff;
}
/*CSS BLOG DETAIL*/
/*comment*/
.comment-title {
    display: inline-block;
    margin-bottom: 35px;
    margin-top: 35px;
    position: relative;
    width: 100%;
}
.comment-title > a {
    color: #101010;
    font-size: 25px;
}
.comments-container {
    width: 100%;
}
.comments-container h1 {
    font-size: 36px;
    color: #283035;
    font-weight: 400;
}
.comments-container h1 a {
    font-size: 18px;
    font-weight: 700;
}
.comments-list {
    position: relative;
}
/**
 * Lineas / Detalles
 -----------------------*/

.comments-list li {
    display: inline-block;
    position: relative;
    width: 100%;
}
.reply-list {
     clear: both;
    margin-bottom: 35px;
    margin-top: 35px;
    padding-left: 88px;
}
.reply-list li {
    border: 1px solid hsl(0, 0%, 89%);
    box-shadow: 0 3px 6px hsla(0, 0%, 0%, 0.16), 0 3px 6px hsla(0, 0%, 0%, 0.23);
    display: inline-block;
    width: 100%;
	position:relative;
}
/**
 * Avatar
 ---------------------------*/

.comments-list .comment-avatar {
    background: hsl(0, 0%, 100%) none repeat scroll 0 0;
    border: 1px solid hsl(0, 0%, 89%);
    box-shadow: 0 3px 6px hsla(0, 0%, 0%, 0.16), 0 3px 6px hsla(0, 0%, 0%, 0.23);
    height: 70px;
    left: -35px;
    line-height: 70px;
    overflow: hidden;
    position: absolute;
    top: 20%;
    width: 70px;
    z-index: 99;
}
.comments-list .comment-avatar i {
    font-size:25.25px;
	color:#c3c3c3;
}
/**
 * Caja del Comentario
 ---------------------------*/

.comments-list .comment-box {
    float: right;
    padding: 15px 55px;
    position: relative;
    text-align: left;
}
.comment-box > a {
    background: hsl(9, 88%, 56%) none repeat scroll 0 0;
    color: hsl(0, 0%, 100%);
    float: right;
    font-family: RobotoSlab;
    font-size: 14px;
    padding: 8px 15px;
	border:1px solid hsl(9, 88%, 56%);
}
.comment-box > a:hover {
    background: none;
    border:1px solid hsl(9, 88%, 56%);
	color:hsl(9, 88%, 56%);
}
.comment-main-level {
    border: 1px solid hsl(0, 0%, 89%);
    box-shadow: 0 3px 6px hsla(0, 0%, 0%, 0.16), 0 3px 6px hsla(0, 0%, 0%, 0.23);
    display: inline-block;
    width: 100%;
	position:relative;
}

.comment-box .comment-name {} .comment-box .comment-name a {
    color: #283035;
}
.comment-box .comment-head span {
    color: #aaa;
    font-size: 13px;
    position: relative;
	display:inline-block;
}
.comment-box .comment-content {
    color: hsl(0, 0%, 56%);
    font-size: 14px;
    line-height: 25px;
}
.day {
    color: #aaa;
    font-size: 13px;
	margin-left:25px;
}
.comment-box .comment-name.by-author,
.comment-box .comment-name.by-author a {
    color: hsl(0, 0%, 20%);
    font-size: 16px;
}
/** =====================
 * Responsive
 ========================*/

@media only screen and (max-width: 766px) {}
.leave-title {
    display: inline-block;
    margin-bottom: 50px;
    margin-top: 70px;
    position: relative;
    width: 100%;
}
.leave-title > a {
    color: #101010;
    font-size: 25px;
}
.leave-a-comment {
    display: inline-block;
    width: 100%;
	margin-bottom: 30px;
}
.leave-a-comment input {
    height: 46px;
    line-height: 46px;
    margin-bottom: 24px;
    padding: 6px 20px;
}
.leave-a-comment textarea {
    height: 115px;
    padding: 10px 15px;
}
.leave-a-comment button {
    margin-bottom: 0;
	background:#f1482b;
	font-size:14px;
	color:#fff;
	padding:12px 14px;
	border:1px solid #f1482b;
	border-radius:0;
	margin-top:35px;
}
.leave-a-comment button:hover{
	background:none;
	border:1px solid #f1482b;
	color:#f1482b;
}
.leave-a-comment .text-left {
}
.name-com, .email-com {
    float: left;
}
.name-com > input, .email-com > input {
	border:1px solid #dfdfdf;
}
.leave-a-comment  textarea {
	border:1px solid #dfdfdf;
}
.leave-a-comment > .form-horizontal> .form-group >.mess >.form-control::-moz-placeholder {
    color: hsl(0, 0%, 67%);
    font-size: 14px;
}
.leave-a-comment > .form-horizontal> .form-group >.name-com >.form-control::-moz-placeholder {
    color: hsl(0, 0%, 67%);
    font-size: 14px;
}
.leave-a-comment > .form-horizontal> .form-group >.email-com >.form-control::-moz-placeholder {
    color: hsl(0, 0%, 67%);
    font-size: 14px;
}
.leave-a-comment > .form-horizontal> .form-group{
	display: inline-block;
    margin: 0;
    width: 100%;
}
.posts > h2 {
    color: hsl(0, 0%, 6%);
    font-size: 18px;
    margin-top: 35px;
}
.schedule-post {
    margin-bottom: 25px;
    margin-top: 25px;
	font-size:14px;
	color:#f1482b;
}
.posts > p {
    color: hsl(0, 0%, 53%);
    font-size: 14px;
    margin: 0;
    padding-bottom: 35px;
}
/*CSS PAGE CONTACT*/
.contact{
	display:inline-block;
	width:100%;
	margin-bottom:50px;
	margin-top:80px;
	text-align:center;
}
.contact-title{
	margin-bottom:50px;
	color:#101010;
	font-size:25px
}
.contact-form,.contact-address{
	float:left;
	padding-left:15px;
	padding-right:15px
}
.contact-form{
	width:75%
}
.contact-address{
	width:25%
}
.address-block {
    display: inline-block;
    margin-bottom: 40px;
    width: 100%;
}
.address-block i {
    color: hsl(9, 88%, 56%);
    float: left;
    font-size: 20px;
	width: 15%;
}
.address-block > p {
    color: hsl(0, 0%, 20%);
    float: left;
    font-size: 14px;
    text-align: left;
    width: 85%;
	margin:0;
}
/*CSS PAGE BOOK A TABLE*/
.bookatable {
    display: inline-block;
    margin-bottom: 80px;
    margin-top: 80px;
	width:100%;
	text-align:center;
}
.book-title{
	font-size: 25px;
    margin-bottom: 35px;
    text-align: center;
	color:#101010;
}
.book-item,.book-sidebar{
	float:left;
	padding-left:15px;padding-right:15px
}
.book-item{
	width:75%
}
.book-sidebar{
	width:25%
}
.note {
    display: inline-block;
    padding-bottom: 35px;
    width: 100%;
}
.note div {
    display: inline-block;
    float: left;
    margin-bottom: 30px;
    position: relative;
    text-align: center;
}
.note h2 {
    color: #101010;
    font-size: 16px;
    padding-bottom: 10px;
    padding-top: 10px;
}
.available {
    background: #f9a396;
    height: 32px;
    text-indent: -9999px;
    width: 170px;
	left: 0;
    margin-left: auto;
    margin-right: auto;
    position: absolute!important;
    right: 0;
	top:100%;
}
.booked {
     background: hsl(0, 0%, 76%) none repeat scroll 0 0;
    height: 32px;
    left: 0;
    margin-left: auto;
    margin-right: auto;
    position: absolute!important;
    right: 0;
    text-indent: -9999px;
    width: 170px;
	top:100%;
}
.selected-seat {
    background: #f1482b;
    height: 32px;
    text-indent: -9999px;
    width: 170px;
	left: 0;
    margin-left: auto;
    margin-right: auto;
    position: absolute!important;
    right: 0;
	top:100%;
}
.scwtb_booking {
    border: 1px solid #dfdfdf;
    box-sizing: border-box;
    float: left;
    width: 100%;
}
.scwtb_tables {
    float: left;
    max-width: 100%;
    position: relative;
}
.scwtb_tables_item_seats {
    float: left;
    width: 100%;
}
.scwtb_preview_top, .scwtb_preview_doc, .scwtb_preview_bot {
    float: left;
    width: 100%;
}
.scwtb_preview_top span:nth-child(1), .scwtb_preview_bot span:nth-child(1) {
    margin-bottom: 10px;
    margin-left: 43px;
}
.scwtb_preview_top span, .scwtb_preview_bot span {
    border: 1px solid hsl(0, 0%, 80%);
    color: hsl(0, 0%, 100%);
    cursor: pointer;
    float: left;
    height: 33px;
    line-height: 33px;
    margin-top: 10px;
    text-align: center;
    width: 43px;
}
.seatspace {
    border: medium none !important;
    text-indent: -9999em;
}
.scwtb_preview_doc .scwtb_preview_left, .scwtb_preview_doc .scwtb_preview_right {
    border: 1px solid hsl(0, 0%, 80%);
    cursor: pointer;
    float: left;
    height: 43px;
    line-height: 43px;
    text-align: center;
    width: 33px;
}
.scwtb_preview_doc span {
    color: hsl(0, 0%, 100%);
    cursor: pointer;
    float: left;
    height: 43px;
    line-height: 43px;
    text-align: center;
    width: 43px;
}
.scwtb_tables_item {
    position:absolute;
}
.scwtb_tables_item_content {
    float: left;
    position: relative;
    width: 130px;
}
.scwtb_tables_item_name {
    color: hsl(0, 0%, 100%);
    float: left;
    font-weight: bold;
    left: 0;
    position: absolute;
    top: 42%;
	right:0;
	margin-left:auto;
	margin-right:auto;
}
.scwtb_seatstype {
    float: left;
    margin-bottom: 15px;
    margin-top: 5px;
    width: 100%;
	
}
.scwtb_seatstype_item {
    color: hsl(0, 0%, 100%);
    float: left;
    margin-right: 10px;
    padding: 5px;
}
#seatsA{
	left:10%;
	right:auto;
	top:0%;
}
#seatsB{
	left:30%;
	right:auto;
	top:0%;
}
#seatsC{
	right:30%;
	left:auto;
	top:0%;
}
#seatsD{
	right:10%;
	left:auto;
	top:0%;
}
#seatsE{
	left:10%;
	right:auto;
	top:30%;
}
#seatsF{
	left:30%;
	right:auto;
	top:30%;
}
#seatsG{
	right:30%;
	left:auto;
	top:30%;
}
#seatsH{
	right:10%;
	left:auto;
	top:30%;
}
#seatsI{
	left:10%;
	right:auto;
	top:60%;
}
#seatsJ{
	left:30%;
	right:auto;
	top:60%;
}
#seatsK{
	right:30%;
	left:auto;
	top:60%;
}
#seatsL{
	right:10%;
	left:auto;
	top:60%;
}
#alt_example_4_alt {
    float: left;
    margin-bottom: 50px;
    margin-top: 35px;
    padding: 10px;
    width: 200px;
	margin-left: 15px;
	margin-right: 15px;
}
#alt_example_4 {
    float: left;
    margin-bottom: 50px;
    margin-top: 35px;
	
}
.ui-datepicker-inline.ui-datepicker.ui-widget.ui-widget-content.ui-helper-clearfix.ui-corner-all{
	background: hsla(0, 0%, 0%, 0) linear-gradient(to right, hsl(9, 88%, 56%), hsl(35, 83%, 59%)) repeat scroll 0 0;
}
/*CSS PAGE PRODUCT DETAIL*/
.detail-item,.detail-sidebar{
	float:left;
	text-align:center;
	padding-left:15px;
	padding-right:15px;
}
.detail-item{
	width:75%
}
.detail-sidebar{
	width:25%
}
.detail{
	display:inline-block;
	width:100%;
	margin-bottom:80px;
	margin-top:80px;
	text-align:center;
}
.detail-title{
	margin-bottom:50px;
	color:#101010;
	font-size:25px
}
.related-block {
    margin-bottom: 35px;
    border: 1px solid hsl(0, 0%, 87%);
}
.related-block img{
	border-bottom: 1px solid hsl(0, 0%, 87%);
}
.related-block:hover{
	border: 1px solid hsl(9, 88%, 56%);
}
.related-block:hover img{
	border-bottom: 1px solid hsl(9, 88%, 56%);
}
.related-last {
    margin-bottom: 0;
}
.related-p {
    padding: 30px 25px;
}
.related-p > a {
    color: hsl(9, 88%, 56%);
    font-size: 18px;
    font-weight: bold;
}
.related-p > p {
    color: hsl(0, 0%, 67%);
    font-size: 14px;
    line-height: 25px;
    padding-top: 20px;
}
.img-productdetail,.des-productdetail{
	float:left;
	width:50%;
	padding-left:15px;
	padding-right:15px;
}
.productdetail{
	margin-top:80px;
}
.des-productdetail > h1{
	color: hsl(9, 88%, 56%);
    font-size: 25px;
	font-weight:bold;
}
.des-detail > h4{
	 color: hsl(0, 0%, 6%);
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 15px;
    margin-top: 25px;
}
.des-detail > p{
	border-bottom: 1px solid hsl(0, 0%, 87%);
    color: hsl(0, 0%, 67%);
    font-size: 14px;
    line-height: 25px;
    margin: 0;
    padding-bottom: 20px;
}
.des-detail > ul {
    border-bottom: 1px solid hsl(0, 0%, 87%);
    display: inline-block;
    list-style: outside none none;
    margin: 0;
    padding-bottom: 20px;
    padding-left: 0;
    text-align: left;
    width: 100%;
}
.des-detail li {
    color: hsl(0, 0%, 67%);
    font-size: 14px;
    line-height: 25px;
}
.des-productdetail > .book{
	margin-top:35px;
	margin-bottom:0;
	float:right;
}

.demonstrations { float: left; clear: both; width: 100%; margin-bottom: 18px; }
.demonstrations a {
  float: left;
  width: 100px;
  height: 100px;
  margin: 0 10px 10px 0;
  cursor: pointer;
}
.demonstrations a img { float: left; }
.demonstrations .rightmost { margin-right: 0; }