@font-face {
  font-family: "BrownLLWeb-Regular";
  src: url("BrownLLWeb-Regular.woff2") format("woff2"),
	url("BrownLLWeb-Regular.woff") format("woff"),
	  url("BrownLLWeb-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "BrownLLWeb-Bold";
  src: url("BrownLLWeb-Bold.woff2") format("woff2"),
		url("BrownLLWeb-Bold.woff") format("woff"),
		 url("BrownLLWeb-Bold.ttf") format("truetype");
	font-style: normal;
  font-weight: 700;
}
@font-face {
font-family:'SpeziaSerif';
src: url('SpeziaSerifWeb-RegularA.woff2') format('woff2'),
    url('SpeziaSerifWeb-RegularA.woff') format('woff');
font-weight: 400;
font-style: normal;
}

body {
  background: #FFFAED;
  color: #222222;
  font-family: 'SpeziaSerif', serif;
  font-size: 24px;
  line-height: 33.61px;	
	overflow-x: scroll;
  margin: 0;
  padding: 0;
	-moz-osx-font-smoothing: grayscale;   /* Firefox */
     -webkit-font-smoothing: antialiased; /* WebKit  */
	scroll-behavior: smooth;
}

 .scroll{
  background: #FFFAED;
  color: #222222;
  font-family: BrownLLWeb-Regular, sans-serif;
  font-size: 18px;
  line-height: 22px;
	overflow-x:scroll !important;
  margin: 0;
  padding: 0;
	-moz-osx-font-smoothing: grayscale;   /* Firefox */
     -webkit-font-smoothing: antialiased; /* WebKit  */
}

strong{
	font-weight: 700;
	-webkit-text-stroke-width: 0!important;
}
bold{
	font-weight: 700;
	-webkit-text-stroke-width: 0!important;
}

a {
  color: #222222;
	text-decoration: none;
  transition: 0.5s;
	-webkit-font-smoothing: antialiased;
	-webkit-text-stroke-width: 0!important;
	scroll-behavior: smooth;
}

a:hover,
a:active,
a:focus {
  color: #222222;
	font-weight: 700;
	transition: 0.5s;
	text-decoration: none;
	-webkit-font-smoothing: antialiased;
	-webkit-text-stroke-width: 0!important;
}

p {
  color: #222222;
  font-family: 'SpeziaSerif', serif;
  font-size: 24px;
  line-height: 33.61px;
	text-align: center;
}

#alert {
	z-index: 9999; 
	position: absolute; 
	top: 0; 
	left: 0;
	width: 100%;
	margin: 0!important;
	padding: 0!important;
	max-width: 6000px;
}

#myDiv{
	background: #222222;
	color: #FFFAED;
	border: 0;
	text-align: center;
	padding: 6px;
	border-radius: 0;
}
#myDiv h6{
	 color: #FFFAED;
  font-family: 'SpeziaSerif', serif;
  font-size: 16px;
  line-height: 16px;
	text-align: center;
	padding: 2px;
	margin: 0;
}
#myDiv .btn-close{
	padding: 0;
	margin: 4px;
	background: transparent url("../img/CloseIcon.svg") center/1em auto no-repeat!important;
	width: 16px;
	height: 16px;
}

#intro h1 {
  font-family: BrownLLWeb-Bold, sans-serif;
  text-transform: uppercase;
  letter-spacing: 3.2px;
  font-size: 16px;
  line-height: 18.38px;
  font-weight: 700;
  color: #222222;	 
    margin: 0px 0 0px 0;
  padding: 64px;
	-moz-osx-font-smoothing: grayscale;   /* Firefox */
     -webkit-font-smoothing: antialiased; /* WebKit  */
}

#intro h1 a{
  letter-spacing: 3.2px;
  font-size: 16px;
  font-weight: 700;
  color: #222222;
  text-decoration: none;
  width: auto;
  height: auto;
	margin: 0px 0 0px 0;
}

h2 {
  padding: 64px;
	font-family: BrownLLWeb-Regular, sans-serif;
	letter-spacing: 3.2px;
  font-size: 32px;
  font-weight: 400;
  line-height: 38.72px;
  color: #222222;
	text-align: center;
	text-transform: uppercase;
		-moz-osx-font-smoothing: grayscale;   /* Firefox */
     -webkit-font-smoothing: antialiased; /* WebKit  */
}

h2:after {
    content: ""; /* This is necessary for the pseudo element to work. */ 
    display: block; /* This will put the pseudo element on its own line. */
    margin: -5px auto 0; /* This will center the border. */
    width: 86px; /* Change this to whatever width you want. */
    padding: 2px 0px 0 0px; /* This creates some space between the element and the border. */
    border-bottom: 1px solid #222; /* This creates the border. Replace black with whatever color you want. */
	background: none;
}

h3 {
  padding: 50px;
	font-family: BrownLLWeb-Regular, sans-serif;
	letter-spacing: 3.2px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #222222;
	text-align: center;
	text-transform: uppercase;
	animation-duration: 2s;
	animation-delay: 0s;
	-moz-osx-font-smoothing: grayscale;   /* Firefox */
     -webkit-font-smoothing: antialiased; /* WebKit  */
}

h4 {
	font-family: BrownLLWeb-Regular, sans-serif;
	padding: 16px 0 120px 0;
	letter-spacing: 3.2px;
	margin: 0px;
  font-size: 12px;
  font-weight: 400;
  line-height: 14.52px;
  color: #222222;
	text-align: left;
	text-transform: uppercase;
	-moz-osx-font-smoothing: grayscale;   /* Firefox */
     -webkit-font-smoothing: antialiased; /* WebKit  */
}

.row h4 {
	font-family: BrownLLWeb-Regular, sans-serif;
	padding: 16px 0 120px 0;
	letter-spacing: 3.2px;
	margin: 0px;
  font-size: 12px;
  font-weight: 400;
  line-height: 14.52px;
  color: #222222;
	text-align: left;
	text-transform: uppercase;
	-moz-osx-font-smoothing: grayscale;   /* Firefox */
     -webkit-font-smoothing: antialiased; /* WebKit  */
}
.row{
	margin-left: 0;
	margin-right: 0;
}
/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/


/*--------------------------------------------------------------
# Intro Section
--------------------------------------------------------------*/
#hero-image{
	height: 100vh;
	background: #FFFAED;
	z-index: 3;
	position: relative;
	top: 0;
	left: 0;
}
#intro {
	z-index: 2;
  width: 100%;
  height: 100vh;
  background: #FFFAED;
  background-size: cover;
  position: relative;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
}
.container-fluid{
	background: #FFFAED;
}
	
#click{
	z-index: 200;
	position: fixed;
	top: 22px;
	right: 0px;
	width: 300px;
	margin-top: 0px;
	padding: 10px 0 0 0;
	text-align: right;
}	
#click a{
  text-decoration: none;
  font-family: BrownLLWeb-Regular, sans-serif;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 14px;
	line-height: 16.94px;
	letter-spacing: 0.2em;
}	

#intro .intro-text {
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
	width: 100%;
  text-align: center;
  animation-delay: 4s;
  animation-duration: 2s;
}


#intro .Tintro-text {
  position: relative;
  z-index: 2;
  top: 0;
  left: 0;
  text-align: center;
  animation-delay: 0s;
  animation-duration: 2s
}




#intro .NoDelay{ 
	 position: relative;
  z-index: 2;
  top: 0;
  left: 0;
  text-align: center;
  animation-delay: 0s;
  animation-duration: 2s
}



#intro .insidelogo {
  position: relative;
  z-index: 2;
  top: 0;
  left: 0;
  text-align: center;
	animation-duration: 2s;
	animation-delay: 1.2s;
}

#intro .insidelogo img{
  width: 200px;
	padding: 34px 20px 20px 20px;
}

#intro .intro-text img{
  width: 304px;
	padding: 64px 20px 20px 20px;
}

#intro .Tintro-text img{
  width: 304px;
	padding: 64px 20px 20px 20px;
}


#intro iframe{
	height: 800px;
}

#inquire{
	z-index: 99;
	position: fixed;
	top: 20px;
	right: 0px;
	height: 30px;
	opacity: 0;
}

#mainpage{
	z-index: 1;
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	background: #000 url("../img/MainBackground.webp")  no-repeat center center fixed;
	background-repeat: no-repeat;
	width: 100%;
	background-position: center center;
    background-size: cover;
}
#mainpage .logo{
	align-content: center;
	text-align: center;
	padding: 48px;
}

#mainpage .logo img{
	width: 214px;
}

.product-screens .roselogo{
	width: 374px;
  position: fixed; 
	top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
	animation-duration: 3s;
	text-align: center;
}

#intro .product-screens .arrow{
  	width: 48px;
	position: fixed;
	bottom: 0px;
	left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
	animation-duration: 2s;
	animation-delay: 0s;
}


.product-screens h3{
	max-width: 450px;
  position: fixed; 
	top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
	animation-duration: 2s;
	animation-delay: 0s;
}


.rose img{
	width: 76px;
	animation-duration: 2s;
	animation-delay: 0s;
	padding-bottom: 64px;
}

.thanks img{
	width: 76px;
}

.desktop{
	display: block;
	
}
.desktopV{
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
	
}

#introT{
  position: fixed;
  right: 0;
  top: 0;
	width: 100vw;
  height: 100vh;
	background-image: url("../img/ThankYou1781.webp");
	background-position: center;
	background-size: cover;
	overflow-y:hidden;
}

.desktopV video {
	object-fit: cover;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}

.desktopV2{
	display: none;
}
		
.mobile{
	display: none;
}
		
.mobileV{
	display: none;
}

.mobileT{
	display: none;
}

.product-screens h2 {
  	margin: 0px 0 0px 0;
  	color: #222222;
	text-align: center;
}




#intro .product-screens {
	z-index: 999;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: scroll;
  text-align: center;
  width: 100%;
  padding: 0 0 0px 0;
}


#intro .rose{
  position: relative;
  text-align: center;
  width: 100%;
  padding: 120px 0 64px 0;
	height: 76px;
}

#introT .thanks{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 64px;
  text-align: center;
  width: 100%;
  padding: 0 0 0px 0;
	height: 76px;
}
#mainnav{
	position: fixed;
	top: 20px;
	right: 40px;
	
}

#mainnav a{
  text-decoration: underline;
  display: inline-block;
  color: #fff;
  font-family: BrownLLWeb-Regular, sans-serif;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 12px;
	padding: 0;
	margin-top: 0px;
	letter-spacing: 0.2em;
}

.stickynav{
  height: 60px;
	z-index: 98;
  position: sticky;
  top: -2px;
  text-align: right;
	padding: 22px 40px 0 0;
	opacity: 0;
	letter-spacing: 0.1em;
}

.stickynav a{
  text-decoration: underline;
  display: inline-block;
  color: #222;
  font-family: BrownLLWeb-Regular, sans-serif;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 12px;
	padding: 0;
	margin-top: 0px;
}

.stickynav[stuck] {
  opacity: 1;
}

#MobileNav{
		display: none;
	}



.product-screens {
padding: 0px 0 0 0;
}


.section-bg .container{
	max-width: 6000px;
	padding: 0 0px 0 0px;
}

#arrival{
	
	z-index: 4;
	position: relative;
	top: 120vh;
	left: 0;
	width: 100%;
	padding: 20px 0 0 0;
}

#arrival .col-lg-12{
	padding: 0 40px 0 40px;
	margin-right: 0px;
}


.tan{
	background: #FFFAED;
	margin-bottom: -1px;
}

.TextRight{
	padding: 0 40px 0 40px;
	text-align: center;
	justify-content: center;
}

.photo{
	padding: 0px;
	margin: 0;
}

#photos  h4 {
  opacity:0;
}


#photos .active h4 {
  opacity:0;
  animation-name:opacity;
  animation-duration:1.5s;
  animation-fill-mode:forwards;
  animation-delay: 0s;
}
@keyframes opacity {
  from {opacity:0;}
  to {opacity:1;}
}

#residential .col-lg-12{
	padding: 0px 0px 0px 0px!important;
}

#residential .col-lg-12 img{
	width: 100%;
}

 .photo .col-lg-12 img{
	padding: 0px 0px 0px 0px!important;
	width: 100%;
}

.TextRight p{
	width: 69%;
	max-width: 857px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50%;
	
}

.darker{
	background: #F5ECD7;
	margin-bottom: -1px;
}

.padtop{
	padding-top: 40px;
	max-width: 1185px;
}

#title {
    width: 100%;
    position: absolute;
    padding: 0px;
    margin: 0px auto;
    text-align: center;
    font-size: 27px;
    color: rgba(255, 255, 255, 1);
    font-family: 'Open Sans', sans-serif;
    z-index: 9999;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.33), -1px 0px 2px rgba(255, 255, 255, 0);
}

#photos{
	padding: 160px 40px 40px 40px;
}

#photos .carousel-inner{
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}



#photos .carousel-control-prev-icon{
	width: 62px;
	height: 62px;
	background-image: url("../img/arrow-left.svg");
	margin-top: -100px;
	margin-left: -30px;
}

#photos .carousel-control-prev{
	opacity: 1;
	width: 62px;
}

#photos .carousel-control-next-icon{
	background-image: url("../img/arrow-right.svg");
	width: 62px;
	height: 62px;
	margin-top: -100px;
	margin-right: -30px;
}

#photos .carousel-control-next{
	opacity: 1;
	width: 62px;
}

#LearnMore{
	padding: 160px 0 40px 0;
}

#LearnMore h2 {
  text-decoration: none;
	padding: 0 0 40px 0;
	
}

#LearnMore h2:after {
    content: ""; /* This is necessary for the pseudo element to work. */ 
    display: block; /* This will put the pseudo element on its own line. */
    margin: -5px auto 0; /* This will center the border. */
    width: 86px; /* Change this to whatever width you want. */
    padding: 2px 0px 0 0px; /* This creates some space between the element and the border. */
    border-bottom: 0; /* This creates the border. Replace black with whatever color you want. */
	background: none;
}

#News{
	padding: 0 14.5% 160px 14.5%;
	margin-bottom: -1px;
}

#News h3{
	font-size: 24px;
	line-height: 29.04px;
	padding: 0 0 16px 0;
	margin: 0;
	text-align: left;
	text-transform: none;
	letter-spacing: 0px;
}

#News h4{
	font-size: 12px;
	font-weight: 700;
	line-height: 14.52px;
	color: #222222;
	opacity: 0.5;
	padding: 0 0 8px 0;
}

#News img{
	width: 100%;
	padding: 0 0px 10px 0
}

#News a:hover{
	opacity: .7;
}

#footer{
	padding: 
		40px 0 20px 0;
}

#footer p{
	font-size: 10px;
	line-height: 12.1px;
	font-family: BrownLLWeb-Regular, sans-serif;
	text-align: left;
	padding: 0 0 0px 0;
	margin-bottom: 5px;
}

#footer img{
	width: 115px;
	padding: 2px 0 0 0;
}

#footer h4{
	text-align: center;
	font-weight: 700;
	color: #222222;
	line-height: 16px;
	padding: 0 0 10px 0;
}
#footer h6{
	text-align: center;
	padding: 0 0 20px 0;
}

:root{
	--button-color: #cccccc;
	--button-border-color: #cccccc;
	--font-family: BrownLLWeb-Regular, sans-serif;
	--font-family-sans-serif: BrownLLWeb-Regular, sans-serif;
	--button-background-color: #FFFAED;
	--form-label-color: #999;
	--form-label-active-color: #999; 
	--form-input-background-color: #FFFAED;
	--form-input-border-color: #cccccc;
	--form-input-active-color: #222222;
	--form-input-active-border-color: #222222;
	--modal-background-color: none;
	--modal-body-background-color: none;
	--modal-dialog-body-background-color: #FFFAED;
	--modal-dialog-background-color: #FFFAED;
	--modal-header-border-color: #cccccc;
	--modal-footer-background-color: none;
	--modal-close-button-color: #cccccc;
	
}


.ewc-project-contact-form .alert .dialog__body {
	background-color: #FFFAED;
}




.ewc-project-contact-form--theme-vanilla .button {
	border-width: 0px !important;
	border-style: none;
	padding: 0px !important;
	text-align: left;
	font-family: BrownLLWeb-Regular, sans-serif;
	font-weight: normal !important;
	text-transform: none!important;
	letter-spacing: 2.8px!important;
	 font-size: 14px!important;
	line-height: 21px!important;
	color: #cccccc!important;
	text-decoration: underline!important;
	background-color: #FFFAED;
}

.ewc-project-contact-form--theme-vanilla .button:after {
    content: ""; /* This is necessary for the pseudo element to work. */ 
    display: block; /* This will put the pseudo element on its own line. */
    margin: -5px auto 0; /* This will center the border. */
    width: 127px; /* Change this to whatever width you want. */
    padding: 2px 0px 0 0px; /* This creates some space between the element and the border. */
    border-bottom: 1px solid #ccc; /* This creates the border. Replace black with whatever color you want. */
	background: none;
}




.ewc-project-contact-form--theme-vanilla .form-field.form-field--infield-top-aligned>label, .form-field.form__field--infield-top-aligned>label, .form__field.form-field--infield-top-aligned>label, .form__field.form__field--infield-top-aligned>label{
	font-family: BrownLLWeb-Regular, sans-serif;
	text-transform: uppercase!important;
	letter-spacing: 2.8px!important;
	font-size: 12px!important;
	line-height: 14.52px!important;
	font-weight: normal;
	padding: 0px 0px 0px 0px;
	color: #999;
}

.ewc-project-contact-form .form__field.form__field--infield-top-aligned input[type=text]{
	height: 43px;
	padding: 12px 12px 12px 12px;
	font-size: 16px;
	color: #222;
}

.ewc-project-contact-form .form__field.form__field--infield-top-aligned textarea{
	color: #222;
}

.ewc-project-contact-form--theme-vanilla .button {
	border-width: 0px !important;
	border-style: none;
	padding: 0px !important;
	text-align: center;
	font-family: BrownLLWeb-Regular, sans-serif;
	font-weight: normal !important;
	text-transform: uppercase!important;
	letter-spacing: 2.8px!important;
	 font-size: 14px!important;
	line-height: 21px!important;
	color: #999!important;
	text-decoration: none!important;
	width: 100%;
	background: none!important;
}

.ewc-project-contact-form--theme-vanilla .button:active{
	border-width: 0px !important;
	border-style: none;
	padding: 0px !important;
	text-align: center;
	font-family: BrownLLWeb-Regular, sans-serif;
	font-weight: bold !important;
	text-transform: uppercase!important;
	letter-spacing: 2.8px!important;
	 font-size: 14px!important;
	line-height: 21px!important;
	color: #222 !important;
	text-decoration: none!important;
	background: none!important;
}


.ewc-project-contact-form--theme-vanilla .button:focus{
	border-width: 0px !important;
	border-style: none;
	padding: 0px !important;
	text-align:  center;
	font-family: BrownLLWeb-Regular, sans-serif;
	font-weight: bold!important;
	text-transform: uppercase!important;
	letter-spacing: 2.8px!important;
	 font-size: 14px!important;
	line-height: 21px!important;
	color: #222!important;
	text-decoration: none!important;
	background: none!important;
}

.ewc-project-contact-form--theme-vanilla .button:hover{
	border-width: 0px !important;
	border-style: none;
	padding: 0px !important;
	text-align:  center;
	font-family: BrownLLWeb-Regular, sans-serif;
	font-weight: bold !important;
	text-transform: uppercase!important;
	letter-spacing: 2.8px!important;
	 font-size: 14px!important;
	line-height: 21px!important;
	color: #222 !important;
	text-decoration: none!important;
	background: none!important;
}


.ewc-project-contact-form--theme-vanilla .ewr-form-field, .ewr-form-field--infield-top-aligned {
	padding: 24px 0 0 0;
}


.forms1{
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	max-width: 650px;
	padding: 100px 25px 4px 25px;
	animation-delay: 0s;
	animation-duration: 2s;
}

.password{
	align-content: center;
	text-align: center;
	width: 300px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 100px;
}

.password input{
	margin: 20px;
	background: none;
	padding: 0 0 2px 0;
	border-bottom: solid 1px #000;
	border-right: none;
	border-left: none;
	border-top: none;
}

.password input:focus {
	margin: 20px;
	background: none;
	padding: 0 0 2px 0;
	border: solid 1px #cccccc;
}

.password input:active {
	margin: 20px;
	background: none;
	padding: 0 0 2px 0;
	border: solid 1px #cccccc;
}

.password input:hover {
	margin: 20px;
	background: none;
	padding: 0 0 2px 0;
	border: solid 1px #cccccc;
	font-weight: 700;
	cursor: pointer;
}

.password textarea:focus, input:focus{
	outline: none;
}



@media (max-width: 1780px){
	
	#photos .carousel-control-prev-icon{
		width: 32px;
		margin-right: -15px
	}
	#photos .carousel-control-next-icon{
		width: 32px;
		margin-left: -15px;
	}
	#photos .carousel-control-prev{
	width: 32px;
}
	#photos .carousel-control-next{
	width: 32px;
}
	p {
  color: #222222;
  font-family: 'SpeziaSerif', serif;
  font-size: 18px;
  line-height: 25.211px;
	text-align: center;
}
	h2{
		font-size: 24px;
		line-height: 29.04px;
	}
	.desktop{
		display: none;

	}
	
	.desktopV2{
		display: block;
	}
	
	.desktopV2{
	  position: fixed;
	  right: 0;
	  bottom: 0;
	  min-width: 100%;
	  min-height: 100%;

	}

	.desktopV2 video {
		object-fit: cover;
	  width: 100vw;
	  height: 100vh;
	  position: fixed;
	  top: 0;
	  left: 0;
	}
	
		
	.desktop .img1{
			width: 27.079%;
			padding-bottom: 0px;
			z-index: 1;
			position: fixed;
			top: 0px;
			left: 50%;
			margin-left: -890px;
			animation-duration: 2s;
			max-width: 723px;
			min-width: 482px;
		}

		.desktop .img2{
			width: 23.7645%;
			padding-bottom: 0px;
			z-index: 1;
			position: fixed;
			bottom: 0px;
			right: 50%;
			margin-right: -891px;
			animation-delay: .3s;
			animation-duration: 2s;
			max-width: 634px;
			min-width: 423px;
		}

		.desktop .img3{
			width: 33.652%;
			padding-bottom: 0px;
			z-index: 1;
			position:fixed;
			top: 0px;
			right: 50%;
			margin-right: -891px;
			animation-delay: .6s;
			animation-duration: 2s;
			max-width: 898px;
			min-width: 599px;
		}

		.desktop .img4{
			width: 28.54%;
			padding-bottom: 0px;
			z-index: 1;
			position:fixed;
			bottom: 0px;
			left: 50%;
			margin-left: -637px;
			animation-duration: 2s;
			max-width: 762px;
			min-width: 508px;
		}


		.desktop .img5{
			width: 11.967%;
			padding-bottom: 0px;
			z-index: 1;
			position:fixed;
			top: 50vh;
			left: 50%;
			margin-left: -892px;
			animation-delay: .8s;
			animation-duration: 2s;
			max-width: 319px;
			min-width: 213px;
		}

		.desktop .img6{
			width: 12.697%;
			padding-bottom: 0px;
			z-index: 1;
			position:fixed;
			top: 30vh;
			right: 50%;
			margin-right: -890px;
			animation-delay: .8s;
			animation-duration: 2s;
			max-width: 339px;
			min-width: 226px;
		}

	
	.desktopT .img1{
			width: 27.079%;
			padding-bottom: 0px;
			z-index: 1;
			position: fixed;
			top: 0px;
			left: 50%;
			margin-left: -890px;
			animation-duration: 2s;
			max-width: 723px;
			min-width: 482px;
		}

		.desktopT .img2{
			width: 23.7645%;
			padding-bottom: 0px;
			z-index: 1;
			position: fixed;
			bottom: 0px;
			right: 50%;
			margin-right: -891px;
			max-width: 634px;
			min-width: 423px;
		}

		.desktopT .img3{
			width: 33.652%;
			padding-bottom: 0px;
			z-index: 1;
			position:fixed;
			top: 0px;
			right: 50%;
			margin-right: -891px;
			max-width: 898px;
			min-width: 599px;
		}

		.desktopT .img4{
			width: 28.54%;
			padding-bottom: 0px;
			z-index: 1;
			position:fixed;
			bottom: 0px;
			left: 50%;
			margin-left: -637px;
			max-width: 762px;
			min-width: 508px;
		}


		.desktopT .img5{
			width: 11.967%;
			padding-bottom: 0px;
			z-index: 1;
			position:fixed;
			top: 50vh;
			left: 50%;
			margin-left: -892px;
			max-width: 319px;
			min-width: 213px;
		}

		.desktopT .img6{
			width: 12.697%;
			padding-bottom: 0px;
			z-index: 1;
			position:fixed;
			top: 30vh;
			right: 50%;
			margin-right: -890px;
			max-width: 339px;
			min-width: 226px;
		}

	.padtop{
		width: 696px;
	}

	
		
}
@media (max-width: 1512px) {
	p {
  font-size: 16px;
  line-height: 22.4px;
}
	h2{
			font-size: 20px;
			line-height: 24.2px;
			letter-spacing: 0.2em;
	}
	#News h3{  
		font-size: 16px;
		line-height: 16.94px;
	}
	#News h4{
		font-size: 10px;
		line-height: 12.1px;
	}
	h4{
		font-size: 14px;
		line-height: 12.1px;
	}
	.row h4{
		font-size: 10px;
		line-height: 12.1px;
	}
	.padtop{
		width: 556px;
		padding-top: 0px;
	}
	#photos{
	padding: 110px 40px 0px 40px;
}
	#LearnMore {
    padding: 120px 0 40px 0;
}
	
#News {
    padding: 0 14.5% 120px 14.5%;
    margin-bottom: -1px;
}	
}
@media (orientation: landscape) and (hover: none) and (pointer: coarse) {
/* your CSS to target only landscape mobile users */
	
	#mainpage{
	z-index: 1;
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	width: 100%;
	background: #000 url("../img/MainBackground.webp");
  	background-position: center center;
    background-size: cover;
}
	
}


@media (max-width: 925px) {

.product-screens img{
		width: 250px;
	}
	
	.product-screens .roselogo{
	width: 250px;
	}
	
#intro .intro-text img{
  width: 222px;
	padding: 64px 20px 20px 20px;
}	
	
	#intro .Tintro-text img{
  width: 222px;
	padding: 64px 20px 20px 20px;
}	
	
#mainpage{
	z-index: 1;
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	width: 100%;
	background: #000 url("../img/MainBackgroundM.webp");
  	background-position: center center;
    background-size: cover;
}
	
	#intro .intro-text {
		animation-delay: 1s;
		animation-duration: 2s
	}
	
#intro .NoDelay{ 
  animation-delay: 0s;
  animation-duration: 2s
}

		
	#intro .Tintro-text {
		animation-delay: 0s;
		animation-duration: 2s
	}
	
.desktop{
	display: none;
}
	
#intro iframe{
	height: 500px;
	margin-bottom: 100px;
}	
	
	#brochure{
		padding-bottom: 100px;
	}	
	
.mobile{
	display: block;
}	
.mobileV{
	display: block;
}		

	.desktopV{
		display: none;
	}
	.desktopV2{
		display: none;
	}
.mobileV video {
	object-fit: cover;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}	
	
.mobileT{
	display: block;
}		
		.mobile .img1{
			width: 56%;
			max-width: 333px;
			min-width: 222px;
			margin: 0;
			padding-bottom: 0px;
			z-index: 1;
			position: fixed;
			top: 12Vh;
			left: 0px;
			animation-duration: 2s;
		}

		.mobile .img2{
			width: 26.75%;
			max-width: 156px;
			min-width: 104px;
			padding-bottom: 0px;
			z-index: 1;
			position: fixed;
			top: 50vh;
			right: 0px;
			margin-top: -45vw;
			animation-delay: .3s;
			animation-duration: 2s;
		}

		.mobile .img4{
			width: 39%;
			max-width: 229px;
			min-width: 153px;
			margin: 0;
			padding-bottom: 0px;
			z-index: 1;
			position:fixed;
			bottom: 0px;
			left: 0%;
			animation-delay: .8s;
			animation-duration: 2s;
		}

	.mobileT .img1{
			width: 56%;
			max-width: 333px;
			min-width: 222px;
			margin: 0;
			padding-bottom: 0px;
			z-index: 1;
			position: fixed;
			top: 12Vh;
			left: 0px;
		}

		.mobileT .img2{
			width: 26.75%;
			max-width: 156px;
			min-width: 104px;
			padding-bottom: 0px;
			z-index: 1;
			position: fixed;
			top: 50vh;
			right: 0px;
			margin-top: -45vw;
			animation-delay: .3s;
			animation-duration: 2s;
		}

		.mobileT .img4{
			width: 39%;
			max-width: 229px;
			min-width: 153px;
			margin: 0;
			padding-bottom: 0px;
			z-index: 1;
			position:fixed;
			bottom: 0px;
			left: 0%;
		}

	
.desktopT{
	display: none;
}	
	
.mobileT{
	display: block;
}	
		

	
.forms1{
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	padding: 40px 40px 4px 40px;
	animation-delay: .8s;
	animation-duration: 2s;
}	
	
#intro .rose{
  position: relative;
  overflow: hidden;
  text-align: center;
  width: 100%;
  padding: 120px 0 64px 0;
	height: auto;
  background: #FFFAED;
}
	
#introT{
	background-image: url("../img/ThankYou924.webp");
	}
	
#introT .thanks{
  position: fixed;
  overflow: hidden;
  text-align: center;
  width: 100%;
  padding: 80px 0 0px 0;
	bottom: 30px;
	height: auto;
}	
	
	.TextRight{
		padding: 0 20px;
	}
	.TextRight p{
		width: 321px;
	}
	
	.col-lg-12{
		padding: 0 20px!important;
	}	
	
.rose img{
	width: 56px;
 	 position: relative;
	animation-duration: 2s;
	animation-delay: 0;
}
	
.thanks img{
	width: 56px;
 	 position: relative;
	bottom: 20px;
	animation-duration: 0s;
	animation-delay: 0s;
}	
	
	
	
	h2{
		position: relative;
		bottom: 68px;
		font-size: 14px;
		line-height: 20.4px;
		letter-spacing: 2.8px;
		animation-delay: 1s;
		animation-duration: 2s
	}
	
	.NoDelay h2{
		position: relative;
		bottom: 68px;
		font-size: 14px;
		line-height: 20.4px;
		letter-spacing: 2.8px;
		animation-delay: 0s;
		animation-duration: 2s
	}
	
	#mainnav{
		right: 20px;
	}
	.stickynav{
		padding: 22px 20px 0 0;
	}
	
	h2:after {
    content: ""; /* This is necessary for the pseudo element to work. */ 
    display: block; /* This will put the pseudo element on its own line. */
    margin: -6px auto 0; /* This will center the border. */
    width: 74px; /* Change this to whatever width you want. */
    padding: 2px 0px 0 0px; /* This creates some space between the element and the border. */
    border-bottom: 1px solid #222; /* This creates the border. Replace black with whatever color you want. */
	background: none;
}
	
	h1{
		padding: 36px;
		font-size: 14px;
		line-height: 18.4px;
		letter-spacing: 2.8px;
	}
	.row h4{
		padding: 16px 0 72px;
	}
	.product-screens h3{
		padding: 0 40px 0 40px;
		width: 100%;
		animation-delay: 0s;
		font-size: 14px;
		line-height: 21px;
		letter-spacing: 2.8px;
	}

	.padtop{
		width: 431px; 
		padding-top: 24px;
	}
	#photos{
		padding: 82px 20px 24px 20px;
	}
	
	#photos .carousel-control-prev-icon{
		width: 30px;
		margin-left: -20px;
	}
	#photos .carousel-control-next-icon{
		width: 30px;
		margin-right: -20px;
	}
	#photos .carousel-control-prev{
	opacity: 1;
	width: 30px;
}
	#photos .carousel-control-next{
	opacity: 1;
	width: 30px;
}

	#LearnMore {
    padding: 96px 0 0px 0;
	margin-bottom: -1px;
}
	.darker h2{
		bottom: 0px;
		
	}
	#News{
		padding: 0 10% 96px 10%;
		margin-bottom: -1px;
	}
	#News h3{
		font-size: 14px;
		line-height: 16.94px;
		padding: 0 0 8px 0;
	}
	
}


@media (max-width: 783px) {
	
	body {
	  height: 100vh;
		width: 100%;
    top: 0; 
    bottom: 0; 
		
	}
	
	.scroll {
	  height: 100vh;
    top: 0; 
    bottom: 0; 
		position:relative!important;
	}
	

	

		.mobile .img2{
			width: 26.75%;
			max-width: 156px;
			min-width: 104px;
			padding-bottom: 0px;
			z-index: 1;
			position: fixed;
			top: 50vh;
			right: 0px;
			margin-top: -82vw;
			animation-delay: .3s;
			animation-duration: 2s;
		}
		.mobileT .img2{
			width: 26.75%;
			max-width: 156px;
			min-width: 104px;
			padding-bottom: 0px;
			z-index: 1;
			position: fixed;
			top: 50vh;
			right: 0px;
			margin-top: -82vw;
			animation-delay: .3s;
			animation-duration: 2s;
		}
	
	#intro .intro-text img{
	    width: 214px;
		padding: 36px 20px 86px 20px;
}
	#intro .Tintro-text img{
	    width: 214px;
		padding: 36px 20px 86px 20px;
}


}



@media (max-width: 800px) {
	.mobile .img2{
			width: 26.75%;
			max-width: 156px;
			min-width: 104px;
			padding-bottom: 0px;
			z-index: 1;
			position: fixed;
			top: 50vh;
			right: 0px;
			margin-top: -58vw;
			animation-delay: .3s;
			animation-duration: 2s;
		}
		.mobileT .img2{
			width: 26.75%;
			max-width: 156px;
			min-width: 104px;
			padding-bottom: 0px;
			z-index: 1;
			position: fixed;
			top: 50vh;
			right: 0px;
			margin-top: -58vw;
			animation-delay: .3s;
			animation-duration: 2s;
		}
		


}
@media (max-width: 767px){
	#mainpage{
	z-index: 1;
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	width: 100%;
	background: #000 url("../img/MainBackgroundM.webp");
  	background-position: center center;
    background-size: cover;
}

#mainnav{
	display: none;
	z-index: 100;
	top: 100vh;
	left: 0px;
	height: 186px;
	background: #fffaed;
	width: 100%;
	text-align: center;
	margin-top: -63px;
	padding: 10px 0 0 0;
}

	

#mainnav a{
  text-decoration: underline;
  display: inline-block;
  color: #222;
  font-family: BrownLLWeb-Regular, sans-serif;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 14px;
	line-height: 16.94px;
	padding: 0;
	margin-top: 0px;
	letter-spacing: 0.2em;
}


#first{
	margin-top: -60px;
}
	
.stickynav{
  display: none;
}
#introT{
	background-image: url("../img/ThankYou767.webp");
	}
#MobileNav{
	display: block;
	z-index: 99;
	position: sticky;
	top: calc(100vh - 63px);
	left: 0px;
	height: 186px;
	background: #fffaed;
	width: 100%;
	text-align: center;
	padding: 10px 0 0 0;
	}	
	
#MobileNav a{
  text-decoration: underline;
  display: inline-block;
  color: #222;
  font-family: BrownLLWeb-Regular, sans-serif;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 14px;
	line-height: 16.94px;
	padding: 0;
	margin-top: 0px;
	letter-spacing: 0.2em;
}	
	
	#first{
	margin-top: -186px;
}
	
	.TextRight p{
		margin-top: 0;
		padding: 60px 0 40px 0;
		width: 100%;
	}
	.TextRight{
		padding: 0 21px 0 21px;
	}
	.row h4{
		padding: 12px 0 72px 0;
	  font-size: 10px;
	  line-height: 12.1px;	
		}
	.justify-content-center .col-lg-6 p{
		padding: 14px 0;
	}
	.padtop{
		width: 100%;
	}
	.padtop p{
		padding: 0 16px 0 16px;
	}
	#arrival .col-lg-12 {
		padding: 0 20px 0 20px
	}
	#photos{
		padding: 82px 6px;
	}

	
	#photos .carousel-control-prev-icon{
		margin-top: 0px;
		margin-right: -35px; 
		position: absolute;
		bottom: -24px;
		width: 15px;
	}
	#photos .carousel-control-next-icon{
		margin-top: 0px;
		margin-left: -35px;
		position: absolute;
		bottom: -24px;
		width: 15px;
	}
	
	#photos .carousel-inner{
		width: 100%;
	}
	#photos h4{
		padding: 12px 0px 0px 0px;
		text-align: center;
	}
	
	#LearnMore h2{
		font-size: 18px;
		line-height: 21.78px;
		padding: 0px;
		bottom: 0;
	}
	
	#LearnMore{
		padding: 96px 0 40px 0;
	}
	
	#News{
		padding: 10px 16px 66px 16px;
	}
	
	#News .col-lg-4{
		padding: 15px 0px 30px 0px;
		border-bottom: 1px solid #00000020;
	}
	
	#News h4{
		font-size: 10px;
		line-height: 12.1px;
		padding: 0 0 4px 0;
	}
	
	#News h3{
		font-size: 14px;
		line-height: 16.94px;
		padding: 0 0 8px 0;
	}
	
	#News .NoBorder{
		border-bottom: none;
	}
	
	#footer h4{
		font-size: 8px;
		line-height: 12px;
	}
	
	#footer p{
		font-size: 8px;
		line-height: 9.68px;
	}
	#footer{
		padding-bottom: 200px;
	}
	
}



@media (max-width: 700px) {
	.mobile .img2{
			width: 26.75%;
			max-width: 156px;
			min-width: 104px;
			padding-bottom: 0px;
			z-index: 1;
			position: fixed;
			top: 50vh;
			right: 0px;
			margin-top: -68vw;
			animation-delay: .3s;
			animation-duration: 2s;
		}
		.mobileT .img2{
			width: 26.75%;
			max-width: 156px;
			min-width: 104px;
			padding-bottom: 0px;
			z-index: 1;
			position: fixed;
			top: 50vh;
			right: 0px;
			margin-top: -68vw;
		}
	#intro .rose{
	  position: relative;
	  overflow: hidden;
	  text-align: center;
	  width: 100%;
	  padding: 120px 0 32px 0;
		height: auto;
	  background: #FFFAED;
}
		


}


@media (max-width: 499px) {
	
	.forms1{
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	padding: 10px 20px 20px 20px;
	animation-delay: .8s;
	animation-duration: 2s;
}
	.mobile .img2{
			width: 26.75%;
			max-width: 156px;
			min-width: 104px;
			padding-bottom: 0px;
			z-index: 1;
			position: fixed;
			top: 50vh;
			right: 0px;
			margin-top: -82vw;
			animation-delay: .3s;
			animation-duration: 2s;
		}
	.mobilet .img2{
			width: 26.75%;
			max-width: 156px;
			min-width: 104px;
			padding-bottom: 0px;
			z-index: 1;
			position: fixed;
			top: 50vh;
			right: 0px;
			margin-top: -82vw;
		}
	
}



@media (max-width: 368px) {
	
	h2{
		position: relative;
		bottom: 68px;
		font-size: 12px;
		line-height: 17.75px;
		letter-spacing: 2.4px;
	}
	
	.NoDelay h2{
		position: relative;
		bottom: 68px;
		font-size: 12px;
		line-height: 17.75px;
		letter-spacing: 2.4px;
		animation-delay: 0s;
	}
	
	h2:after {
    content: ""; /* This is necessary for the pseudo element to work. */ 
    display: block; /* This will put the pseudo element on its own line. */
    margin: -8px auto 0; /* This will center the border. */
    width: 64px; /* Change this to whatever width you want. */
    padding: 2px 0px 2px 0px; /* This creates some space between the element and the border. */
    border-bottom: 1px solid #222; /* This creates the border. Replace black with whatever color you want. */
		
}
	
	h1{ 
		padding: 36px;
		font-size: 12px;
		line-height: 15.75px;
		letter-spacing: 2.4px;
	}
	.product-screens h3{
		font-size: 12px;
		line-height: 18px;
		letter-spacing: 2.4px;
	}
	.product-screens .roselogo{
	width: 230px;
	}

}

@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
    a:hover,
	a:active,
	a:focus {
	  letter-spacing: 1.8px;
		animation-duration: 0;
	}

	.ewc-project-contact-form--theme-vanilla .button:active{
		letter-spacing: 1.8px!important;

	}
	.ewc-project-contact-form--theme-vanilla .button:focus{
			letter-spacing: 1.8px!important;
	}
	.ewc-project-contact-form--theme-vanilla .button:hover{
			letter-spacing: 1.8px!important;
	}
	
  }

@media (max-height:838px ){
		.desktop .img1{
			padding-bottom: 0px;
			z-index: 1;
			position: fixed;
			top: 50vh;
			margin-top: -419px;
		}

		.desktop .img2{
			width: 23.7645%;
			padding-bottom: 0px;
			z-index: 1;
			position: fixed;
			bottom: 50vh;
			margin-bottom: -419px;
		}

		.desktop .img3{
			width: 33.652%;
			padding-bottom: 0px;
			z-index: 1;
			position:fixed;
			top: 50vh;
			margin-top: -419px;
			
		}

		.desktop .img4{
			width: 28.54%;
			padding-bottom: 0px;
			z-index: 1;
			position:fixed;
			bottom: 50vh;
			margin-bottom: -419px;
			
			
		}


		.desktop .img5{
			width: 11.967%;
			padding-bottom: 0px;
			z-index: 1;
			position:fixed;
			top: 50vh;
		}

		.desktop .img6{
			width: 12.697%;
			padding-bottom: 0px;
			z-index: 1;
			position:fixed;
			top: 30vh;
		}

	.desktopT .img1{
			padding-bottom: 0px;
			z-index: 1;
			position: fixed;
			top: 50vh;
			margin-top: -419px;
		}

		.desktopT .img2{
			width: 23.7645%;
			padding-bottom: 0px;
			z-index: 1;
			position: fixed;
			bottom: 50vh;
			margin-bottom: -419px;
		}

		.desktopT .img3{
			width: 33.652%;
			padding-bottom: 0px;
			z-index: 1;
			position:fixed;
			top: 50vh;
			margin-top: -419px;
			
		}

		.desktopT .img4{
			width: 28.54%;
			padding-bottom: 0px;
			z-index: 1;
			position:fixed;
			bottom: 50vh;
			margin-bottom: -419px;
			
			
		}


		.desktopT .img5{
			width: 11.967%;
			padding-bottom: 0px;
			z-index: 1;
			position:fixed;
			top: 50vh;
		}

		.desktopT .img6{
			width: 12.697%;
			padding-bottom: 0px;
			z-index: 1;
			position:fixed;
			top: 30vh;
		}
	
}

@media (min-height:1048px ){
	.rose img{
		width: 76px;
		padding-bottom: 64px;
		position: fixed;
		bottom: 0px;
		left: 50%;
		margin-left: -38px;
}
	
}