@charset "UTF-8";
@import url("fonts.css");
@import url("nav.css");


/* CSS Document */
 


html{
	font-family: 'Helvetica Light', "Helvetica Bold", 'Helvetica';
}
	
	
	@font-face {
  font-family: 'Helvetica Bold';
  src: url("../fonts/Helvetica-Bold.woff2");
}
	
@font-face{
	font-family: "Helvetica Light";
	src: url("../fonts/Helvetica-Light.woff2");
}

a:link {
  text-decoration: none;
}

p{
	letter-spacing: 0.075em;
	font-family: "Helvetica Light";
	color: rgba(255,255,255,1.00);
}




h2{
	letter-spacing: 0.030em
}


a {
  color: rgba(0,0,0,1.00);
  text-decoration: none; 
}



span{
	font-family: "Helvetica Bold";
	
}





.no-gutters {
  margin-right: 0;
	margin-left: 0;}

 .col {
    padding-right: 0;
    padding-left: 0;
  }

a {
  color: black;
  text-decoration: none; 
}


.name{
	text-align: center;
	font-family:"Helvetica Bold";
	font-weight: 500;
	
}



@media screen and (max-width: 600px) {
.name
 {
    font-size: 13px;
	 
  }
}


@media screen and (max-width: 600px) {
.slider
 {
    width: 150px;
	 height: auto;
	 
  }
}



.slider{

	display: flex;
	flex-direction: column;
	justify-content: center;
 
}


.s{
	
	letter-spacing: 0.075em;
	font-family: "Helvetica Light";
	font-size: 15px;
	text-align: left;
}

.title{
	font-family: "Helvetica Bold";
	font-size: 50px;
}

hr{
	background-color: rgba(255,255,255,1.00);
	opacity: 1;
}
	

.thumbnail{
	display: flex;
}


   /* hover feature */
.picture1{
	    display: flex;
    flex-direction: column;
    justify-content: center;
	align-items: center;
	
	height: auto;
}

.picture2 {
    display: none;
	    justify-content: center;
	align-items: center;
	
	height: auto;
}
.thumbnail:hover .picture1 {
    display: none;
}
.thumbnail:hover .picture2 {
    display: block;
}









.iconscontainer {
  padding: var(--gutter) 0;
  display: grid;
  grid-gap: var(--gutter) 0;
  grid-template-columns: var(--gutter) 1fr var(--gutter);
  align-content: start;
}


.item{
	    width: fit-content;
}

.iconscontainer > * {
  grid-column: 2 / -2;
}

.app > .full {
  grid-column: 1 / -1;
}

.hs {
  display: grid;
  grid-gap: calc(var(--gutter) / 2);
  grid-template-columns: 10px;
  grid-template-rows: minmax(150px, 1fr);
  grid-auto-flow: column;


  overflow-x: scroll;
  scroll-snap-type: x proximity;
  padding-bottom: calc(.75 * var(--gutter));
  margin-bottom: calc(-.25 * var(--gutter));
}

.hs:before,
.hs:after {
  content: '';
  width: 10px;
}




ul {
  list-style: none;
  padding: 0;
}



.iconscontainer {
 
  height: auto;

  overflow-y: scroll;
}

.hs > li,
.item {
  scroll-snap-align: center;
  padding: calc(var(--gutter) / 2 * 1.5);
  display: flex;
  flex-direction: column;
  justify-content: center;
	    width: 300px;
	height: auto;
 


}


@media screen and (max-width: 600px) {
.hs > li, .item
 {
    width: 150px;
	 height: auto;
	 margin: 0 10px;
  }
}




.no-scrollbar {
  scrollbar-width: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}










@media only screen and (min-width: 992px) {
  .navFix {
	   display: none;
    
  }
}




@media only screen and (min-width: 992px) {
  nav {
	   padding-bottom: 0px;
    
  }
}


@media only screen and (max-width: 992px) {
  nav {
	   padding-bottom: 20px;
    
  }
}







#burgerAlt {
    float: right;
}
#burgerAlt, .logo img {
    position: relative;
}
.logo {
    position: relative;

}
.logo, #burgerAlt {
    display: inline-block;
    z-index: 1000;
    transform: scale(.8);
}

.logo:hover, #burgerAlt:hover {
    cursor: pointer;
}

.navAlt {
  
    position: relative;
    top:0;
    left: 0;
    width: 100vw;
	z-index: 1;
	   
}





@media only screen and (max-width: 992px) {
  .navAlt {
	   display: none;
    
  }
}







@media only screen and (min-width: 992px) {
  .col-lg-4.col-xs-12.text {
	   padding: 50px 45px;
    
  }
}


@media only screen and (max-width: 992px) {
  .col-lg-4.col-xs-12.text {
	   padding: 10px 10px;
    
  }
}





.leftside{
	display: flex;
	flex-direction: column;
	text-align: start;
	padding: 10px 30px;
}



	
	@media screen and (max-width: 992px){
.leftside {
	text-align: center;}}
	
	
	
	
	
.rightside{
	display: flex;
	flex-direction: column;
	text-align: end;
	padding: 10px 30px;
}



	
	@media screen and (max-width: 992px){
.rightside {
	text-align: center;}}








.row{
	margin-right: 0px;
	margin-left: 0px;
	padding-left: 0px;
	padding-right: 0px;
}


.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    width: 100%;
	padding-right: 0px;
	padding-left: 0px;
}


.col-4{
	padding: 0px;
}
	
	

.col-6{
	padding: 0px;
}




/*Back to top button Start */

.totop{
	background-color: transparent;
	animation: fadeInAnimation ease 3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
	border: none;
	color: transparent;
}
  

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
     }
}


@-webkit-keyframes fadeInAnimation{
	    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
     }
	
}


@media screen and (max-width: 992px) {
  .backicon {
  width: 30px;
	  height: 30px;
  }
}
 

@media screen and (min-width: 992px) {
  .backicon {
  width: 80px;
	  height: 80px;
  }
}

/*Back to top button End */


.centered {
 position: absolute;
    top: 50%;
    display: inline-block;
    /* overflow: hidden; */
    white-space: nowrap;
    text-align: center;
    left: 110%;
	font-size: 20px;
    justify-content: center;
    right: 110%;
    transform: translate(-50%, -50%);
    color: #bb9369;
    font-family: "Helvetica Bold";
    font-weight: 500;
	
}


@media screen and (max-width: 600px) {
.centered {
 position: absolute;
    top: 50%;
    display: inline-block;
    /* overflow: hidden; */
    white-space: nowrap;
    text-align: center;
    left: 60%;
	font-size: 20px;
    justify-content: center;
    right: 110%;
    transform: translate(-50%, -50%);
    color: #bb9369;
    font-family: "Helvetica Bold";
    font-weight: 500;
	
}

}