@font-face {
  font-family: 'Belleza';
  font-style: normal;
  src: local('Belleza-Regular'), url('./fonts/Belleza-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Halimun';
  font-style: normal;
  src: local('Halimun'), url('./fonts/Halimun.ttf') format('truetype');
}

body{
  font-family: 'Belleza';
}

.fontsize {
	font-size: 2rem;
	/*font-size: 1.75rem;*/
}

.navbar {
  background-color: #ECE3F0;
}

.dropdown-menu{
  background-color: #ECE3F0;
}

.dropdown-item{
  background-color: #ECE3F0;
}

.dropdown-item:hover{
  background-color: #D3BBDD;
  cursor: pointer
}

.btn-purple{
  background-color: #ECE3F0;
}

.btn-purple:hover{
  background-color: #D3BBDD;
}

.ribbon {
  opacity: 90%;
  position: absolute; 
  width: 180px;
  height: 200px;
  margin: -32px;
  z-index: -1;
}

.navBarLogo{
  height: 100px;
  aspect-ratio: 1 / 1;
}

.navbar-nav{
  align-items: center;
}

.nav-item{
  padding: 10px;
}

.homeImage{
  width: 38vw;
  aspect-ratio: 1 / 1.25;
}

.sideScrollContainer{
  overflow: hidden;
  position: absolute;
  top: 0px;
  width: 100%;
  height: 100vh;
}

.homeImageContainer{
  position: absolute;
  pointer-events: none;
  transform-origin: top left;
  transform: rotate(-30deg);
  left: 37vw;
}

.footer{
  background-color: #ECE3F0;
  position: relative;
  bottom: 0px;
  left: 0px;
  right: 0px;
  width: 100%;
  text-align: center;
}

.footerList{
  display: inline-flex;
}
.footerLogo{
  height: 70px;
  aspect-ratio: 1 / 1;
}

.footerImages{
  height: 40px;
  aspect-ratio: 1/1;
}

.footerLinks{
  display: none;
}

.footerEnquires{
  background-color: #D3BBDD;
  font-size: 1rem;
}

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

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

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

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

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

.sideScrollL {
  -webkit-animation: mover 20s linear infinite;
  animation: mover 20s linear infinite;
}

.sideScrollR {
  -webkit-animation: mover 25s linear infinite;
  animation: mover 25s linear infinite;
}

@-webkit-keyframes mover {
  0% { transform: translateY(-50%); }
  100% { transform: translateY(0%); }
}

@keyframes mover {
  0% { transform: translateY(-50%); }
  100% { transform: translateY(0%); }
}

@keyframes hideNav{
  0%{
      top: 0px;
  }
  100%{
      top: -150px;
  }
}

@-webkit-keyframes hideNav{
  0%{
    top: 0px;
  }
  100%{
      top: -150px;
  }
}

@keyframes showNav{
  0%{
      top: -150px;
  }
  100%{
      top: 0px;
  }
}

@-webkit-keyframes showNav{
  0%{
    top: -150px;
  }
  100%{
      top: 0px;
  }
}


/* Height % */

.h10{height: 10%;}

.h20{height: 20%;}

.h30{height: 30%;}

.h40{height: 40%;}

.h50{height: 50%;}

.h60{height: 60%;}

.h70{height: 70%;}

.h80{height: 80%;}

.h90{height: 90%;}

.h100{height: 100%;}

/* width % */
.w10{width: 10%;}

.w20{width: 20%;}

.w30{width: 30%;}

.w40{width: 40%;}

.w50{width: 50%;}

.w60{width: 60%;}

.w70{width: 70%;}

.w80{width: 80%;}

.w90{width: 90%;}

.w100{width: 100%;}

/* viewport height */

.vph10{height: 10vh;}

.vph125{height: 12.5vh;}

.vph15{height: 15vh;}

.vph175{height: 17.5vh;}

.vph20{height: 20vh;}

.vph225{height: 22.5vh;}

.vph25{height: 25vh;}

.vph275{height: 27.5vh;}

.vph30{height: 30vh;}

.vph325{height: 32.5vh;}

.vph35{height: 35vh;}

.vph375{height: 37.5vh;}

.vph40{height: 40vh;}

.vph425{height: 42.5vh;}

.vph45{height: 45vh;}

.vph475{height: 45.5vh;}

.vph50{height: 50vh;}

.vph525{height: 52.5vh;}

.vph55{height: 55vh;}

.vph575{height: 57.5vh;}

.vph60{height: 60vh;}

.vph625{height: 62.5vh;}

.vph65{height: 65vh;}

.vph675{height: 67.5vh;}

.vph70{height: 70vh;}

.vph725{height: 72.5vh;}

.vph75{height: 75vh;}

.vph775{height: 77.5vh;}

.vph80{height: 80vh;}

.vph825{height: 82.5vh;}

.vph85{height: 85vh;}

.vph875{height: 85.5vh;}

.vph90{height: 90vh;}

.vph925{height: 92.5vh}

.vph95{height: 95vh;}

.vph975{height: 97.5vh;}

.vph100{height: 100vh;}

/* viewport width*/
.vpw10{width: 10vw;}

.vpw20{width: 20vw;}

.vpw30{width: 30vw;}

.vpw40{width: 40vw;}

.vpw50{width: 50vw;}

.vpw60{width: 60vw;}

.vpw70{width: 70vw;}

.vpw80{width: 80vw;}

.vpw90{width: 90vw;}

.vpw100{width: 100vw;}

.nav-privacy{
	font-size: 1rem;
}

#navbarSupportedContent{
  overflow: visible !important;
}

@media only screen and (min-width: 400px){
  .footerLogo{height: 80px;}
}

@media only screen and (min-width: 992px){  
  .navbar{
    width: 100%;
    height: 100px;
    transition: top 0.3s;
  }

  .ribbon {
    width: 150px;
    height: 160px;
    top: -25px;
    margin: -7px;
  }

  .homeImage{
    width: 400px;
    height: 525px;
  }

  .homeImageContainer{
    left: 50vw;
  }

  /* bootstrap percise add-on */

  .col-lg-1-25 {
    flex: 0 0 auto;
    width: 10.41666667%
  }
  .col-lg-1-5 {
    flex: 0 0 auto;
    width: 12.5%
  }
  .col-lg-1-75 {
    flex: 0 0 auto;
    width: 14.58333333%
  }
  .col-lg-2-25 {
    flex: 0 0 auto;
    width: 18.75%;
  }
  .col-lg-2-5 {
    flex: 0 0 auto;
    width: 20.83333333%;
  }
  .col-lg-2-75 {
    flex: 0 0 auto;
    width: 22.91666667%;
  }
  .col-lg-3-25 {
    flex: 0 0 auto;
    width: 27.08333333%;
  }
  .col-lg-3-5 {
    flex: 0 0 auto;
    width: 29.16666667%;
  }
  .col-lg-3-75 {
    flex: 0 0 auto;
    width: 31.25%;
  }
  .col-lg-4-25 {
    flex: 0 0 auto;
    width: 35.41666667%;
  }
  .col-lg-4-5 {
    flex: 0 0 auto;
    width: 37.5%;
  }
  .col-lg-4-75 {
    flex: 0 0 auto;
    width: 39.58333333%;
  }
  .col-lg-5-25 {
    flex: 0 0 auto;
    width: 43.75%;
  }
  .col-lg-5-5 {
    flex: 0 0 auto;
    width: 45.83333333%;
  }
  .col-lg-5-75 {
    flex: 0 0 auto;
    width: 47.91666667%;
  }
  .col-lg-6-25 {
    flex: 0 0 auto;
    width: 52.08333333%;
  }
  .col-lg-6-5 {
    flex: 0 0 auto;
    width: 54.16666667%;
  }
  .col-lg-6-75 {
    flex: 0 0 auto;
    width: 56.25%;
  }
  .col-lg-7-25 {
    flex: 0 0 auto;
    width: 60.41666667%;
  }
  .col-lg-7-5 {
    flex: 0 0 auto;
    width: 62.5%;
  }
  .col-lg-7-75 {
    flex: 0 0 auto;
    width: 64.58333333%;
  }
  .col-lg-8-25 {
    flex: 0 0 auto;
    width: 68.75%;
  }
  .col-lg-8-5 {
    flex: 0 0 auto;
    width: 70.83333333%;
  }
  .col-lg-8-75 {
    flex: 0 0 auto;
    width: 72.91666667%;
  }
  .col-lg-9-25 {
    flex: 0 0 auto;
    width: 77.08333333%;
  }
  .col-lg-9-5 {
    flex: 0 0 auto;
    width: 79.16666667%;
  }
  .col-lg-9-75 {
    flex: 0 0 auto;
    width: 81.25%;
  }
  .col-lg-10-25 {
    flex: 0 0 auto;
    width: 85.41666667%;
  }
  .col-lg-10-5 {
    flex: 0 0 auto;
    width: 87.5%;
  }
  .col-lg-10-75 {
    flex: 0 0 auto;
    width: 89.58333333%;
  }
  .col-lg-11-25 {
    flex: 0 0 auto;
    width: 93.75%;
  }
  .col-lg-11-5 {
    flex: 0 0 auto;
    width: 95.83333333%;
  }
  .col-lg-11-75 {
    flex: 0 0 auto;
    width: 97.91666667%;
  }

}

@media only screen and (min-width: 1175px){
  .footerLinks{
    display: inline-block;
  }

  .nav-logo{
    position: relative;
    display:block;
    left: -9.5vw;
  }

  .nav-logo-footer{
    position: relative;
    display:block;
    left: -7vw;
  }


  /* desktop height % */
  .d-h10{height: 10% !important;}

  .d-h20{height: 20% !important;}
  
  .d-h30{height: 30% !important;}
  
  .d-h40{height: 40% !important;}
  
  .d-h50{height: 50% !important;}
  
  .d-h60{height: 60% !important;}
  
  .d-h70{height: 70% !important;}
  
  .d-h80{height: 80% !important;}
  
  .d-h90{height: 90% !important;}
  
  .d-h100{height: 100% !important;}

  /* desktop width % */
  
  .d-w10{width: 10% !important;}
  
  .d-w20{width: 20% !important;}
  
  .d-w30{width: 30% !important;}
  
  .d-w40{width: 40% !important;}
  
  .d-w50{width: 50% !important;}
  
  .d-w60{width: 60% !important;}
  
  .d-w70{width: 70% !important;}
  
  .d-w80{width: 80% !important;}
  
  .d-w90{width: 90% !important;}
  
  .d-w100{width: 100% !important;}

  /* desktop viewport heights */
  .d-vph10{height: 10vh !important;}
  
  .d-vph15{height: 15vh !important;}
  
  .d-vph20{height: 20vh !important;}
  
  .d-vph25{height: 25vh !important;}
  
  .d-vph30{height: 30vh !important;}
  
  .d-vph35{height: 35vh !important;}
  
  .d-vph40{height: 40vh !important;}
  
  .d-vph45{height: 45vh !important;}
  
  .d-vph50{height: 50vh !important;}
  
  .d-vph55{height: 55vh !important;}
  
  .d-vph60{height: 60vh !important;}
  
  .d-vph65{height: 65vh !important;}
  
  .d-vph70{height: 70vh !important;}
  
  .d-vph75{height: 75vh !important;}
  
  .d-vph80{height: 80vh !important;}
  
  .d-vph85{height: 85vh !important;}
  
  .d-vph90{height: 90vh !important;}
  
  .d-vph95{height: 95vh !important;}
  
  .d-vph100{height: 100vh !important;}

  /* desktop - viewport width */
  
  .d-vpw10{width: 10vw !important;}
  
  .d-vpw20{width: 20vw !important;}
  
  .d-vpw30{width: 30vw !important;}
  
  .d-vpw40{width: 40vw !important;}
  
  .d-vpw50{width: 50vw !important;}
  
  .d-vpw60{width: 60vw !important;}
  
  .d-vpw70{width: 70vw !important;}
  
  .d-vpw80{width: 80vw !important;}
  
  .d-vpw90{width: 90vw !important;}
  
  .d-vpw100{width: 100vw !important;}

  .d-w16{
    width: 16.66666666666667%;
  }
  .footerList{
    font-size: 1.5rem;
    flex-basis: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .footerImages{
    margin: 10px;
  }

  .footerEnquires{
    margin: 10px;
    font-size: 1.3rem;
  }

}


@media only screen and (max-height: 690px) {
	.fontsize {
		font-size: 1.25rem;
	}

	.ribbon {
		opacity: 90%;
		position: absolute;
		width: 140px;
		height: 150px;
		bottom: -50px;
		margin: -32px;
		z-index: -1;      
	}

	.navbar-toggler{
		font-size:  1rem;
	}
}