@font-face {
  font-family: BaronReg;
  src: url(../fonts/baron/BaronNeue-Regular.otf);
	font-weight:400;
}
@font-face {
  font-family: RobotoReg;
  src: url(../fonts/roboto/RobotoCondensed-Regular.ttf);
	font-weight:400;
}
@font-face {
  font-family: RobotoLight;
  src: url(../fonts/roboto/RobotoCondensed-Light.ttf);
	font-weight:400;
}
@font-face {
  font-family: RobotoThin;
  src: url(../fonts/roboto/RobotoCondensed-Thin.ttf);
	font-weight:400;
}
@font-face {
  font-family: RobotoBold;
  src: url(../fonts/roboto/RobotoCondensed-Bold.ttf);
	font-weight:700;
}
@font-face {
  font-family: RobotoBoldItal;
  src: url(../fonts/roboto/RobotoCondensed-BoldItalic.ttf);
	font-weight:700;
}
@font-face {
  font-family: RobotoSemiBoldItal;
  src: url(../fonts/roboto/RobotoCondensed-SemiBoldItalic.ttf);
}
@font-face {
  font-family: RobotoItal;
  src: url(../fonts/roboto/RobotoCondensed-Italic.ttf);
}
.message-submit {
    background: #77cedc;
    text-align: center;
    padding: 20px;
}
.success-title{font-size: 20px;
    font-family: 'BaronReg';
    margin-bottom: 10px;}
/********** common setting **********/
h2 {
    font-size: 2.8rem !important;
    font-weight: 700;
}

img {
    display: block;
    max-width: 100%;
}

a,
button {
    cursor: pointer;
}

.jumbotron {
    margin-bottom: 0 !important;
}

.buttons {
    border-radius: 22px !important;
    padding: 12px 30px !important;
    font-weight: 700;
    transition: .3s ease-in-out !important;
}

.buttons:hover {
    text-decoration: none;
    transform: translateY(-5px);
}

.contact-button {
    width: 100%;
}

.button-light {
    background: #77cedc;
    color: #123f45;
}

.button-light:hover {
    color: #ffffff;
}

.button-dark {
    background: #123f45;
    color: #77cedc;
}

.button-dark:hover {
    color: #ffffff;
}

/*.cta-ghost {
    border: 2px solid #192440 !important;
    color: #192440;
}

.cta-ghost:hover {
    color: #ffffff;
    background: #121a2e;
}*/


/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}

/*------------- Test Scroll Animation -------------*/
.scroll-watcher {
	height:10px;
	position:fixed;
	top:0;
	z-index:1000;
	background-color:lime;
	width:100%;
	scale: 0 1;
	transform-origin:left;
	animation:scroll-watcher linear;
	animation-timeline: scroll();
}
.offer-left{
	opacity: 0;
    transform: translateY(50%);
    animation: slide 4s forwards;
	animation-timeline: view();
	animation-range: 90px 440px;
	transition-timing-function: ease;
}
.offer-center{
	opacity: 0;
    transform: translateY(50%);
    animation: slide 4s forwards;
	animation-timeline: view();
	animation-range: 190px 540px;
	transition-timing-function: ease;
}
.offer-right{
	opacity: 0;
    transform: translateY(50%);
    animation: slide 4s forwards;
	animation-timeline: view();
	animation-range: 290px 640px;
	transition-timing-function: ease;
}
.feature-left{
	opacity: 0;
        transform: translateX(100px);
    animation: slide 4s forwards;
	animation-timeline: view();
	animation-range: 150px 600px;
	transition-timing-function: ease;
}
.feature-right{
	opacity: 0;
        transform: translateX(-100px);
    animation: slide 4s forwards;
	animation-timeline: view();
	animation-range: 150px 600px;
	transition-timing-function: ease;
}
/*.test img{
	scale: .8; opacity: 0;
	animation: fade-in linear forwards;
	animation-timeline: view();
	animation-range: entry;
	animation-range: 250px 500px;
}*/


@keyframes scroll-watcher {
	to { scale: 1 1;}
}

@keyframes fade-in {
	to { scale: 1; opacity: 1;}
}
@keyframes scroll-up {
	from {
		transform: translateY(0);
		visibility: hidden;
	}
	to {
		transform: translateY(100%);
	}
}
@keyframes slide {
    100% {
        opacity: 1;
        transform: translate(0);
    } 
}

.logo {
    width: 250px;
	display: inline-block;
}




#banner {
	background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: bottom;
	background-image: url(../img/galaxy-3.jpg);
}

/********** banner **********/
/*#banner header {
    overflow: hidden;
	display: flex;
}*/

#banner header img {
    /*max-width: 80px;*/
}

/********** feature (skew background) **********/
.feature img {
    width: 100%;
    max-width: 480px;
}

#feature-first {
    background: linear-gradient(170deg, #ffffff 40%, #C8EBF1 0);
}

#feature-last {
    background: linear-gradient(#C8EBF1 , #77cedc);
}

/********** testimonials  **********/



#testimonials-center {
    background: #123f45;
    color: #ffffff;
	    margin-top: 1rem !important;
}

#testimonials ul li {
    padding: 5px 0;
}

/********** contact **********/
#contact {
    background-size: cover;
}

#contact ul li {
    padding: 3px 0;
}

#contact form {
    color: #77cedc;
}

#contact form input,
#contact form textarea {
    background: transparent;
    border: 1px solid #77cedc;
    color: #ffffff;
}

/********** copyright **********/
#copyright {
    background: #77cedc;
    padding: 2rem 3rem;
}

#copyright #social-media a {
    width: 40px;
    height: 40px;
    border-radius: 99%;
    background-color: #123f45;
    transition: .4s ease;
}

#copyright #social-media a i {
    color: #192440;
    font-size: 1.2rem;
    line-height: 40px;
}

#copyright #social-media a:hover {
    opacity: .5;
}

#copyright #social-media a:hover i {
    color: #ffffff;
}

.facebook{background-image:url(../img/facebook.png)}
.instagram{background-image:url(../img/instagram.png)}
.linkedin{background-image:url(../img/linkedin.png)}

/********** RWD **********/
@media (max-width: 575px) {
    #banner h1 {
        font-size: 3.6rem;
    }
}


.section-slides {
  margin-top: -1px;
  overflow: hidden;
}

.slides {
  display: flex;
}

.slide{background-position:left;}


@media (min-width: 768px) {
.nav-container{width:470px;float:right;position:relative}
.nav ul{display:-webkit-box;display:-webkit-grid;display:-ms-flexbox;display:grid;padding-left:0;margin-bottom:0;list-style:none;grid-template-columns:auto auto auto}
.item{text-align:center;width:150px}
.nav .item a{font-weight:600}
.testimonials-container{width:1300px;max-width:100%;position:relative;margin-left:auto;margin-right:auto;padding-top:4rem !important;padding-bottom:4rem !important}
.testimonials-container{}
#testimonials{padding-bottom:4rem !important;overflow:clip;margin-top:0 !important}
.slide.beacon{background-image: url(../img/beacon-1550.jpg)}
.slide.sable{background-image: url(../img/sable-furniture-1550.jpg)}
.slide.ssp{background-image: url(../img/ssp-1550.jpg)}
.slide.cupboards{background-image: url(../img/cupboards-direct-1550.jpg)}
/*.slide.workplace{background-image: url(../img/workplace.jpg)}
.slide.direct2u{background-image: url(../img/direct2u.jpg)}*/
	
}
@media (min-width: 990px) {
.testimonials-container{width:1050px;background-image:url(../img/testimonial-background-1200.png);background-size:contain;background-position-y:85px;background-repeat:no-repeat}
}
@media (min-width: 1200px) {
.testimonials-container{width:1300px}
.testimonials-container{background-image:url(../img/testimonial-background.png);background-size:contain;background-position-y:85px;background-repeat:no-repeat}
}
@media (min-width: 1550px) {
.slide.beacon{background-image: url(../img/beacon-1920.jpg)}
.slide.sable{background-image: url(../img/sable-furniture-1920.jpg)}
.slide.ssp{background-image: url(../img/ssp-1920.jpg)}
.slide.cupboards{background-image: url(../img/cupboards-direct-1920.jpg)}

}

@media (max-width: 768px) {
.nav-container{width:100%;position:relative}
.item{text-align:center}
.nav .item a{font-weight:600}
#menu-button{width:50px;border-radius:5px;position:relative;cursor:pointer;transition:all linear .3s;padding:4px;z-index:1;margin:10px auto 0}
#line-1,#line-2,#line-3{width:90%;background:#fff;height:6px;margin:4px auto;border-radius:2px;transition:all linear .3s}
#line-1.active{-webkit-transform: translate(0px,12px) rotate(45deg);transform: translate(0px,11px) rotate(45deg)}
#line-2.active{opacity:0}
#line-3.active{-webkit-transform:translate(0px, -12px)rotate(-45deg);transform:translate(0px, -9px)rotate(-45deg)}
#menu{width:100%;padding:10px;padding-top:10px;color:#fff;font-size:1.5rem;display:none;top:8px;border-radius:5px}
#menu ul{list-style:none;padding-left:0;margin-bottom:0}
#menu ul li{margin:8px 0}
#feature-first{padding:0rem 1rem 2rem}
.resp-design{margin-top:20px}
#testimonials{overflow:clip;margin-top:0 !important}
.testimonials-container .mt-5{margin-top:0!important}
.slide{background-position:center;}
.slide.beacon{background-image: url(../img/beacon-768.jpg);background-repeat:no-repeat;background-color:#02509f}
.slide.sable{background-image: url(../img/sable-768.jpg);background-repeat:no-repeat;background-color:#f4f3f3}
.slide.ssp{background-image: url(../img/ssp-768.jpg);background-repeat:no-repeat;background-color:#a1a2a3}
.slide.cupboards{background-image:url(../img/cupboards-768.jpg);background-repeat:no-repeat;background-color:#959595}
/*.slide.workplace{background-image: url(../img/workplace-500.jpg)}
.slide.direct2u{background-image: url(../img/direct2u-500.jpg)}*/
.our-work .ssp{padding-top:40px}
.our-work .cupboards{padding-top:40px}
.our-work .direct2u{padding-top:40px}
}
/*@media (max-width: 500px) {
.slide{background-position:center;}
.slide.beacon{background-image: url(../img/beacon-500.jpg)}
.slide.sable{background-image: url(../img/sable-500.jpg)}
.slide.ssp{background-image: url(../img/ssp-500.jpg)}
.slide.cupboards{background-image:url(../img/Website-Portfolio-768.jpg);background-repeat:no-repeat;background-color:#959595}
.slide.workplace{background-image: url(../img/workplace-500.jpg)}
.slide.direct2u{background-image: url(../img/direct2u-500.jpg)}
}*/

.slide:first-child,
.slide:last-child,
.slide figure {
  width: 100vw;
  height: 100vh;
  flex-shrink: 0;
}

.slide:first-child,
.slide:last-child {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /*background: #fcbf49;*/
}

.slide figure {
  margin: 0;
  position: relative;
  width: 100vw;
  height: 100vh;
}

/*.slide img {
  width: 100%;
  max-height: 100%;
  object-fit: cover;
  background: #f1faee;
}*/

.slide figcaption {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.15);
}

.slide .caption {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.slide .caption > * {
  display: inline-block;
  padding: 5px 15px;
  font-weight: bold;
  text-align: center;
}

.slide .heading {
  margin: 0 0 10px;
  font-size: clamp(2.5rem, 2vh, 5rem);
  line-height: 1;
  color: #d62828;
  background: #fcbf49;
}

.slide .content {
  font-size: 1.5em;
  color: white;
  margin: 0;
  background: #ef476f;
}



.topscroll.navfix {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #e3e3e3;
    padding: 8px 12px 0 16px;
    border-radius: 15px !important;
    opacity: .5;
    cursor: pointer;
	text-decoration: none;
}
.topscroll.navfix:hover {
    opacity: 1;
    transition: opacity .5s ease-in;
}
.topscroll.navfix span {
    font-size: 40px;
    font-family: 'BaronReg';
    line-height: 40px;
	color: #292b2c;
}
.rc-anchor-light {
    border: 1px solid #77cedc!important;
    border-radius: .25rem!important;
    color: #fff!important;
    background:transparent!important
}