@charset "utf-8";
/* CSS Document */
.TEXT_REVEAL {
  view-timeline-name: --TEXT_REV;
  view-timeline-axis: block;
  /* Attach animation, linked to the  View Timeline */
  animation: linear TEXT_REVEAL both;
  animation-timeline: --TEXT_REV;
  /* Tweak range when effect should run*/
  animation-range: entry 0% cover 50%;
}

@media (min-width: 0px) and (max-width: 496px) {
	
	.TOPLOGO {
		display: none;
	}
	.vidcontainer {
	clip-path: none;
	}
	
  .COLLEC1_LEFT {
    display: flex;
    flex-direction: column;
    height: auto;
    width: 100%;
    padding: auto;
    margin: auto;
  }
	.COLLEC1_TITLE {
	margin-bottom: 5vh;
	}
	
  .COLLEC1_VID1_DIV video {
    position: relative;
  }
  .COLLEC1_VID2_DIV video {
    position: relative;
	
  }
  .COLLEC1_DESC {
    padding-right: 0px;
    padding-left: 0px;
    width: auto;
    margin-left: 5vw;
    margin-right: 5vw;
    margin-bottom: 5vh;
  }
  .COLLEC1_VID1_DIV {
    width: auto;
    clip-path: none
  }
  .COLLEC1_VID2_DIV {
    width: auto;
    clip-path: none;
	order: 2;
  }
  .catalog {
    width: 100%;
    height: auto;
    padding-left: 0px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    margin-top: 10px;
    margin-bottom: 20vh;
    margin-right: 0px;
    margin-left: 0px;
    text-align: center;
  }
  .top .title h1 {
    transition: all 1s 0.1s ease-out;
    text-align: center;
    flex-basis: 20px;
    width: auto;
    margin-left: auto;
    font-family: "MaziusDisplay";
    letter-spacing: 5px;
    font-size: 25px;
    height: auto;
    margin-right: auto;
    margin-bottom: auto;
    margin-top: 20vh;
  }
  p {
    font-family: "OrticaLinear Light";
    font-size: 14px;
    font-weight: normal;
    color: #393736;
    letter-spacing: 2px;
    padding-left: 20px;
    padding-right: 20px;
    width: auto;
    height: auto;
    margin-top: auto;
    margin-bottom: auto;
    margin-right: auto;
    margin-left: auto;
    line-height: normal;
  }
  .leftbuttons {
    width: 100%;
    height: auto;
    margin-left: auto;
    margin-top: auto;
    margin-bottom: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    padding-left: auto;
    padding-top: auto;
    padding-right: auto;
    padding-bottom: auto;
    align-content: center;
    justify-content: center;
  }
  .numberbig {
    display:none;
  }
  .top .title h1:hover {
    transition: all 1s 0.1s ease-out;
    letter-spacing: 8px;
    font-weight: 700;
    margin-bottom: 0px;
    font-size: 50px;
  }
  .logo {
    width: 100%;
    text-align: center;
    margin-top: 13px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
  }
  .container header nav {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    width: 100%;
    float: none;
    display: none;
  }
  nav ul li {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    width: 100%;
    text-align: center;
  }
  .text_column {
    width: 100%;
    text-align: justify;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
  }
  .thumbnail {
    width: 100%;
  }
  .footer_column {
    width: 100%;
    margin-top: 0px;
  }
  .parallax {
    text-align: center;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding-top: 40%;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    width: 100%;
    font-size: 18px;
  }
  .parallax_description {
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    width: 90%;
    margin-top: 25px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 12px;
    float: none;
    text-align: center;
  }
  .banner {
    background-color: #2D9AB7;
    background-image: none;
  }
  .tagline {
    margin-top: 20px;
    line-height: 22px;
  }
  .hero_header {
    padding-left: 10px;
    padding-right: 10px;
    line-height: 22px;
    text-align: center;
  }
	
	.hero .desc1 {
		flex-direction: column;
	}
	
	.hero2 .desc2 {
		flex-direction: column;
	}
  .hero .desc1 h4 {
	  width: auto;
	  margin-left: 20px;
	  margin-bottom: 2.5vh;
	  margin-top: 2.5vh;
  }
  .hero2 .desc2 h4 {
		width: auto;
	  margin-left: 20px;
	  margin-bottom: 2.5vh;
	  margin-top: 2.5vh;
  }
  .overlay {
    display: flex;
    justify-content: center;
    width: 100%;
    position: absolute;
    top: 699px;
    height: auto;
    margin-top: auto;
    margin-bottom: auto;
    margin-right: auto;
    margin-left: auto;
  }
  .overlay h1 {
    width: 100%;
    font-family: "MaziusDisplay Bold";
    transition: all 100000s 0.1s ease-out allow-discrete;
    text-align: center;
    font-size: 30px;
    letter-spacing: 50px;
    color: #F6F5F6;
    font-weight: 700;
    mix-blend-mode: normal;
    height: auto;
    padding-bottom: auto;
    padding-top: auto;
    margin-top: auto;
    margin-bottom: auto;
    opacity: 0.9;
  }
  .overlay h1:hover {
    transition: all 2s 0.1s ease-out allow-discrete;
    transform: scale(1.025);
    letter-spacing: 75px;
    color: #F5F5F5;
    mix-blend-mode: normal;
    opacity: 1;
  }
  .VID_TEXT_DSK p {
    display: none;
	margin: auto;
  }
  .VID_TEXT_DSK {
    display: none;
	margin: auto;
  }
  .VID_TEXT_DSK p:hover {
    display: none;
  }
  .VID_TEXT_MOB {
	width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    justify-content: center;
    align-content: center;
	text-align: center;
	margin: 0px;
	padding: 0px;
   
  }
  .VID_TEXT_MOB h1 {
    width: 100%;
    display: unset;
	line-height: 15vh;
    font-family: "MaziusDisplay Bold";
    transition: all 100000s 0.1s ease-out allow-discrete;
    font-size: 60px;
    letter-spacing: 2.5vw;
    color: #F6F5F6;
    font-weight: 700;
    mix-blend-mode: normal;
    height: auto;
    padding-bottom: auto;
	padding-right:0px;
	padding-left: 0px;
 	margin-top: auto;
    margin-bottom: auto;
	margin-left: 0px;
	margin-right: 0px;
    opacity: 0.9;
  }
  .VID_TEXT_MOB h1:hover {
    transition: all 2s 0.1s ease-out;
   	font-size: 60px;
    color: #F5F5F5;
    mix-blend-mode: normal;
    opacity: 1;
  }
  .top_catalog .title h1 {
    transition: all 1s 0.1s ease-out;
    text-align: center;
    flex-basis: 20px;
    width: auto;
    margin-left: auto;
    font-family: "MaziusDisplay";
    letter-spacing: 5px;
    font-size: 30px;
    height: auto;
    margin-right: auto;
    margin-bottom: auto;
    margin-top: 20vh;
  }
  .gallery-grid {
    display: flex;
    flex-flow: column wrap; /* Ensures items wrap onto multiple lines */
    gap: 15px; /* Spacing between images */
    justify-content: space-between; /* Spreads images evenly */
  }
  .contact_enquiry_group {
    padding-top: 5px;
    padding-right: 5px;
    padding-left: 10px;
    padding-bottom: 5px;
    margin-top: 5px;
    margin-bottom: 300px;
    display: flex;
    flex-direction: column;
    width: auto;
    height: auto;
  }
  .aligned_left {
    text-align: left;
    display: flex;
    justify-content: left;
    position: relative;
    font-family: "MaziusDisplay Regular";
    color: #111311;
    font-size: 16px;
    letter-spacing: 5px;
    margin-bottom: auto;
    width: 63%;
    height: auto;
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 30px;
  }
  .gallery-img {
    view-timeline-name: --img;
    view-timeline-axis: block;
    /* Attach animation, linked to the  View Timeline */
    animation: linear reveal both;
    animation-timeline: --img;
    /* Tweak range when effect should run*/
    animation-range: entry 5% cover 50%;
  }
  .COLLEC1_TITLES h1 {
    font-size: 30px;
  }
  .COLLEC1_TITLE {
    flex-direction: column;
    align-content: center;
  }
  .COLLEC1_1_BUTTON {
    flex-direction: column;
    align-content: center;
    flex-flow: column wrap;
  }
  .COLLEC1_BUTTON_DIV {
    margin-top: 2vh;
    text-align: center;
    margin-left: 0px;
  }
  .COLLEC1_MAIN_IMAGE {
    margin-left: 0px;
    max-width: 75vw;
  }
  .COLLEC1_MAIN_IMAGE_DIV {
    align-content: center;
    order: 1;
	margin-bottom: 5vh;
  }
  .COLLEC1_SUBTITLES {
    order: 2;
    margin-top: 5vh;
  }
  .COLLEC1_SUBTITLE_P p {
    text-align: center;
  }
  .COLLEC1_SUBTITLES_POS {
    justify-content: center;
  }
  .COLLEC1_SUBTITLE_DIV {
    flex-basis: 85vw;
  }
  .COLLEC1_SUBTITLE_P {
    max-width: 75vw;
  }
}
@media (min-width : 496px) and (max-width : 798px) {
  
		.container header nav {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    width: 100%;
    float: none;
    display: none;
  }
  .catalog {
    width: 100%;
    height: auto;
    padding-left: 0px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    margin-top: 10px;
    margin-bottom: 20vh;
    margin-right: 0px;
    margin-left: 0px;
    text-align: center;
  }
  .COLLEC1_LEFT {
    display: flex;
    flex-direction: column;
    height: auto;
    width: 100%;
    padding: auto;
    margin: auto;
  }
	
  .COLLEC1_VID1_DIV video {
    position: relative;
  }
  .COLLEC1_VID2_DIV video {
    position: relative;
	
  }
  .COLLEC1_DESC {
    padding-right: 0px;
    padding-left: 0px;
    width: auto;
    margin-left: 5vw;
    margin-right: 5vw;
    margin-bottom: 5vh;
  }
  .COLLEC1_VID1_DIV {
    width: auto;
    clip-path: none
  }
  .COLLEC1_VID2_DIV {
    width: auto;
    clip-path: none;
	order: 2;
  }
	
	.VID_TEXT_DSK h1 {
	text-align: center;
	width: 100%;
    font-family: "MaziusDisplay Bold";
    transition: all 100000s 0.1s ease-out;
    font-size: 80px;
    letter-spacing: 15px;
    color: #F6F5F6;
    font-weight: 700;
    mix-blend-mode: normal;
    height: auto;
	padding: 0px;
    margin-top: auto;
    margin-bottom: auto;
    opacity: 0.9;
		
	
}
	
	.VID_TEXT_DSK h1:hover {
  	transition: all 2s 0.1s ease-out;
    letter-spacing: 20px;
	font-size: 80px;
    color: #F5F5F5;
    mix-blend-mode: normal;
    opacity: 1;
		
	
}
	
	.top .title h1 {
    transition: all 1s 0.1s ease-out;
    text-align: center;
    width: auto;
    margin-left: auto;
    font-family: "MaziusDisplay";
    letter-spacing: 5px;
    font-size: 40px;
    height: auto;
    margin-right: auto;
    margin-bottom: auto;
    margin-top: 20vh;
  }
  .leftbuttons {
    width: 100%;
    height: auto;
    margin-left: auto;
    margin-top: auto;
    margin-bottom: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    padding-left: auto;
    padding-top: auto;
    padding-right: auto;
    padding-bottom: auto;
    align-content: center;
    justify-content: center;
  }
  .COLLEC1_TITLE h1 {
    letter-spacing: 5px;
    font-size: 60px;
  }
  .COLLEC1_TITLE {
    flex-direction: column;
    align-content: center;
  }
  .COLLEC1_1_BUTTON {
    flex-direction: column;
    align-content: center;
    flex-flow: column wrap;
  }
  .COLLEC1_BUTTON_DIV {
    margin-top: 2vh;
    text-align: center;
    margin-left: 0px;
  }
  .COLLEC1_MAIN_IMAGE {
    margin-left: 0px;
    max-width: 75vw;
  }
  .COLLEC1_MAIN_IMAGE_DIV {
    align-content: center;
    order: 1;
  }
  .COLLEC1_SUBTITLES {
    order: 2;
    margin-top: 5vh;
  }
  .COLLEC1_SUBTITLE_P p {
    text-align: center;
  }
  .COLLEC1_SUBTITLES_POS {
    justify-content: center;
  }
  .COLLEC1_SUBTITLE_DIV {
    flex-basis: 85vw;
  }
  .COLLEC1_SUBTITLE_P {
    max-width: 75vw;
  }
}