body, html {
	background-color: #F4FAFC;
	padding: 0;
	margin: 0;
	overflow-x:hidden;
}

.bg-shape{
	/* background-image: radial-gradient(circle, #FAFAED, #ADDCE9, #5db7cf); */
	background-image: radial-gradient(circle, #FFFFEF 0%, #75dcf8 30%);	
	/* background-color: blue; */
	position: absolute;
	overflow: hidden;
	width: 100%;
	height: 99%;
	top:50%;
	left:50%;
	/* width:100vmax;
	height:100vmax; */
	transform: translate(-50%, -50%) scale(2.4,2.4);/*square root of 2*/
	/* background-clip: content-box; */
	clip-path: inset(10px 20px 30px 40px);
	display: none;
}

#rays_svg{
	width:100%;
	height:100%;
}

@font-face {
	font-family: Sans-Serif;
    font-family: "MADE Outer Sans";
    src: url('font/MADEOuterSans-Medium.woff2') format('woff2'),
        url('font/MADEOuterSans-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}


@keyframes arotation {
	from {
		transform: rotate(1deg);
	}
	to {
		transform: rotate(359deg);
	}
  }
  
h1 {
  color: white;
}

p {
  color: #1B4753;
}


#loadingMask {
	width: 100%;
	height: 100%;
	position: fixed;
	background: #fff;
	background-image: radial-gradient(circle, #FAFAED, #ADDCE9);	
	z-index: 1000000;
}

#debugBox {
	position: fixed;
	bottom: 10px;
	left:10px;
	background-color: white;
	z-index: 100000;
	border-style: solid;
	border-color: #c4bcbc;
	border-width: 1px;
	box-shadow: 0px 0px 10px rgb(156, 196, 212);
	padding: 10px;
	opacity: 0.85;
	display: none;
}

#debugBox p {
	font-size: 14px;
	color:black;
	font-family: sans-serif;
	margin: 0;
	padding: 5px;
}

#mobileMenu {
	position: fixed;
	z-index: 10000;
	display: flex;
	flex-flow: row;
	justify-content: center;
	bottom: 3%;
	left: 50%;
	transform: translate(-50%, 0);
	/* background-color:white; */
	/* background-color: rgba(223, 244, 252, 0.95); */	
	padding: 3%;
	border-radius: 55px;
	display: none;
	opacity: 0;
}

.b_mobile_menu, .butVideoClose {
	width: 60px;
	height: 60px;
	border-style: solid;
	border-width: 1px;
	border-color: rgba(255, 255, 255, 0);
	box-shadow: 0 0 15px #53a3b977;
	-moz-box-shadow: 0 0 15px #53a3b977;
	-webkit-box-shadow: 0 0 15px #53a3b977;
	border-radius: 55px;
	z-index: 100000;
	background-color: #ecf3f785;
	/* margin: 0 auto; */
	margin: 5px;
	margin-left: 7px;
	margin-right: 7px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.butVideoClose {
	width: 45px;
	height: 45px;
}

.b_mobile_menu:hover, .butVideoClose:hover {
	background-color: rgba(255, 255, 255, 0.849);
	transition: 0.3s;
	border-color: rgba(255, 255, 255, 0.63);
}

.b_mobile_menu img {
	width: 100%;
	color:wheat;
}

.b_mobile_menu p {
	font-size: 6vw;
	padding: 12px;
	margin: 0;
	text-align: center;
	text-transform: uppercase;
	
}

#topMenu {
	position: fixed;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-content: center;
	height: 80px;
	width: 100%;
	top:-60px;
	z-index: 200000;
	background: linear-gradient(0deg, #f4fafc00 0%, #F4FAFC 100%);
	opacity: 0;
	display: none;
}


#topMenuLeft, #topMenuRight {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	top: 3%;
	width: 40vw;
	padding: 0;	
	margin: 0;
	/* background-color: rgb(133, 175, 230); */
}

#topMenuLeft {
	justify-content: left;
	left: 0%;
	transform: translateX(33px);
}

#topMenuRight {
	justify-content: flex-end;
	left: 100%;
	/* transform: translateX(calc(-100% - 33px)); */
	transform: translateX(-33px);
}

#topMenu p, #topMenuRight p  {
	font-size: 14px;
	text-transform: uppercase;
	padding: 0;
	margin: 0;
	padding-right: 20px;
}

#topMenuRight p  {
	padding-right: 0px;
	padding-left: 20px;
}

a {
	text-decoration: none;
	color: #276272;
}

a:hover{
	/* text-decoration: underline; */
	color: black;
	cursor: pointer;
	transition: 200ms;
}

#charactersMenu {
	text-align: center;
	top: 50%;
	left: 100%;
	position: fixed;
	z-index: 200000;
	transform: translate(calc(-100% - 20px), -50%);
	opacity: 0;
	display: none;
}

#charactersMenu p {
	font-size: 30px;
	text-transform: uppercase;
	line-height: 20px;
	padding: 0;
	margin: 0;
	padding-top: 10%;
	padding-bottom: 10%;
}

#charactersMenu a {
	color: black;
	opacity: 0.1;
}

#logo2 {
	opacity: 1;
}

#loadingMask h1 {
	color: rgb(76, 80, 85);
}

h1, h2, h4, p {
    margin: 0;
    padding: 10px;
	font-family: 'MADE Outer Sans';
	font-weight: 500;
	font-style: normal;
	font-size: 50px;
}
    
#slide_1 {
	top: 0;
	left: 0;
	padding: 0;
	margin: 0;
	text-align: center;
	margin: auto;
	width: 100%;
	height: 100%; /* FOR IOS */
	/* height: 100vh; */
	z-index: 1;
	position: fixed;
}

#slide_1_gradient_bottom {
	position: absolute;
	/* background: linear-gradient(0deg, #F4FAFC 0%, #f4fafc00 100%); */
	background: linear-gradient(0deg, #FFF 15%, #f4fafc00 100%);
	left: 0;
	width: 100%;
	z-index: 10;
	top: 0%;
	/* height: 55vh; */	
	/* transform: translateY(110%); */
	display: none;
	opacity: 0;
	height: 25vh;
	transform: translateY(-25vh);
}

.slide1_text {
	position: absolute;
	top: 65%;
	left:50%;
	transform: translate(-50%, -50%);
	width: 90%;
	padding: 5%;
	opacity: 0;
}

#slide_1 h1 {
	color: #A0AEA5;
	/* font-size: 27px; */
	font-size: min(6vw, 40px);
}



#slide_1_bg {
	background-image: radial-gradient(circle, #FAFAED, #ADDCE9, #5db7cf);
	position: absolute;
	overflow: hidden;
	width: 100%;
	height: 100%;
	display: none;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);	
}


#slide_1_bg::before {
	content: "";
	position: absolute;
	width: 300%;
	height: 300%;
	top: -100%;
	left: -100%; 
	z-index: 0;
	background: url(svg/rays.svg) no-repeat center;
	background-clip: content-box;
	opacity: 0.3;
	-webkit-animation: arotation 100s infinite linear;
	animation: arotation 100s infinite linear;
}

.abscentre {
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
}

#logoBox {
	position: fixed;
	width: 50%;
	/* opacity: 0; */
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	z-index: 200001;
	cursor: pointer;
}

#logoBox img{
	max-width: 100%;
	max-height: 100%;
	display: block;
	z-index: 10001;	
}

#logoBox .logo1 img {
	width: 100%;
}

.logo1  {
	position: absolute;
}

.logo2  {
	opacity: 0;
	cursor: pointer;
	z-index: 10;
}


#playbutton {
	opacity: 0;
	cursor: pointer;
	z-index: 1001;
	display: none;
}


#playbutton:hover {
	transform: scale(1.2,1.2) translate(-40%, -40%);
	transition: 0.25s;
}

#videobox {
	position: fixed;
	background-color: #336374d8;
	width: 100vw;
	height: 100vh;
	z-index: 400000;
	backdrop-filter: blur(10px);
	/* display: flex; */
	display: none;	
}


#spcl-video {
	transform: scale(0);
}

#spcl_video_content {
	position: relative;
	width: min(90%, 100vh);
	/* max-height: 50vh; */
	/* height: 50%; */
	/* margin: 0 auto;	 */
	background-color: #98D3DD;
	display: flex;
	text-align: center;
	align-items: center;
	justify-content: center;
}

/* #videoContainer img {
	position: relative;
	width: 100%;
	/* height: auto;
	margin: 0 auto;
} */

#videoContainer {
	display: flex;
	height: 100%;
	justify-content: center;
	align-items: center;
}

#videoCloseB {
	position: absolute;
	display: flex;
	justify-content: center;
	top: 0;
	right: 0;
	transform: translate(50%, -50%);
}



#slide1_band{
	position: absolute;
	z-index:11;
	width: 80vw;
	height: 85%;
	min-height: 500px;
	top:65%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;
	justify-content: space-around;
	align-items: center;
	flex-direction: row;
	display: none;
	/* background-color: grey; */	
}


.slide1_band_lola, .slide1_band_supo, .slide1_band_iggie, .slide1_band_bubba {
	max-width: 23vw;
	/* background-color: #5db7cf; 	 */
	/* 
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	*/
}

.slide1_band_supo img, .slide1_band_lola img, .slide1_band_iggie img, .slide1_band_bubba img {
	max-width: 100%;
	max-height: 100%;
}

.slide1_band_lola {
	transform: scale(1.4) translate(17%, 0);
	z-index: 100;
}

.slide1_band_supo {
	transform: scale(1) translate(18%, 0);
	z-index: 70;
}

.slide1_band_iggie {
	transform: scale(0.8) translate(1%, -43%);
	z-index: 80;
}

.slide1_band_bubba {
	transform: scale(1) translate(-18%, 0);
	z-index: 90;
}



#trigger1 {
	width: 1px;
	position: absolute;
	top: 50.1%;
}

#trigger2 {
	width: 300px;
	height: 0px;
	background-color: yellow;
	z-index: 1000;
	opacity:0;
}

#trigger3 {
	width: 300px;
	height: 0px;
	background-color: blue;
	top: 100vh;
	z-index: 1001;
	opacity:0;
}

#trigger4  {
	width: 300px;
	height: 0px;
	background-color: blue;
	top: 200vh;
	z-index: 1003;
	opacity: 0;
}




#slide_2 {	
	position: relative;
	padding: 0;
	margin: 0;
	/* background-color: #F4FAFC; */
	background-color: #FFF;
	/* background-image: url("img/bg_feathers.png"); */
	background-position: center; 
	background-repeat: repeat; 
	text-align: center;
	width: 100%;
	height: 110vh;
	z-index: 20;
	display: flex;
	justify-content: center;
	margin-top: 150px;
	/* background-color: pink; */	
}

#slide2_lola {
	position: absolute;
	padding: 0;
	margin: 0;
	width: 50%;
	height: 75vh;
	min-height: 597px;
	/* height: 80px;	
	left: 80%;
	top: 10%;
	transform: rotate(-24deg);  */

	height: "50vh";
	left: "10%";
	top:"50%";
	transform: translate(-10%, -50%);
}

#slide6_contact_part_1 {
	max-width: 70%;
	display:flex;
	flex-direction: column;
	justify-content: space-evenly;
	/* background-color: pink; */
}

.lola_col {
	display: flex;
	width: 32%;
	align-items: center;
	justify-content: space-evenly;
	flex-direction: column;
	padding: 1%;
	z-index: 100;
}

.lola_col .lolaimg, .bubba_col .bubbaimg {
	max-height: 66vh;
	max-width: 50vw;
	padding-top: 10%;
}

.lola_col .lolaimg {
	transform: translateX(-2%);
}

.lola_col h1 {
	/* font-size: max(1.8vw, 20px); */
	font-size: min(5vw, 40px);
	color: #E6C3C6;
	/* color: #D0B8A1; */
}

#slide_6 {
	/* background-color: lightgreen; */
	position: relative;
	padding: 0;
	margin: 0;
	text-align: center;
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	z-index: 30;
}


#slide_3 {
	background-color: #F4FAFC;
	position: relative;
	/* background-image: url("img/bg_bubbles.png"); */
	background-position: center; 
	background-repeat: repeat; 
	text-align: center;
	width: 100%;
	height: 100vh;
	/* margin-top: 150px; */
}


#supo_name {
	/* background-color: grey; */
	position: relative;
	padding-top: 10vh;
	height: 15vh;
	left: 50%;
	transform: translateX(-50%);
}

#slide3_supo {
	position: absolute;
	padding: 0;
	margin: 0;
	width: 90%;
	left: 50%;
	top: 100%;
	transform: translate(-50%, -115%);
	z-index: 1001;
	/* background-color: pink; */
}

#slide3_supo .supoimg {
	max-height: 60vh;
	padding-top: 10%;
	max-width: 100%;
}

#slide3_supo_part_2 {
	position:absolute;
	margin: 0;
	padding: 0;
	width: 90vw;
	justify-content: center;
	/* height: 40px; */
	top: 100vh;
	left:50%;	
	transform: translate(-50%, -10vh);
	opacity: 1;
	display: flex;
	/* background-color: grey; */
}

 
 
#slide3_supo_part_2 h1, #slide3_supo_part_2 h2 {
	color: #E55822;
	/* font-size: 25px; */
	font-size: min(5vw, 25px);
	padding: 0;
}


#slide3_supo_part_2 h1 {
	color: #F7B61B;
}


#slide3_supo_part_2 h2 {
	padding-left: 10px;
}




#slide_4 {
	position: relative;
	padding: 0;
	margin: 0;
	text-align: center;
	width: 100%;
	height: 105vh;
	z-index: 44;
	overflow: hidden;	
	/* background-color: #E9E6DE; */
	background: linear-gradient(0deg, #E9E6DE 0%, #f4fafc00 100%);
	margin-top: 150px;
}

.bubba_col {
	display: flex;
	width: 32%;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	padding: 0%;
	z-index: 100;
	/*
	background-color: pink; 
	border-style: solid;
	border-width: 1px;
	border-color: rgb(180, 160, 160);
	*/
}

.bubba_name_img {
	width: 70%;	
	max-width: 400px;
	min-width: 200px;
	align-self: flex-start;
}

#slide4_bubba {
	position:absolute;	
	width: 100%;
	height: 85vh;
	top: 0;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	/* background-color: hotpink; */
	z-index: 1001;
}

.bubba_col h1 {
	color: #782D10;
	/* font-size: 1.3vw; */
	font-size: min(5vw, 25px);
	text-shadow: 0px 0px 10px rgba(233, 230, 222, 1);
	padding: 0;
	text-align: right;
	padding-right: 33px;
}

#slide4_bubba_part_2 {
	position:absolute;
	width: 95vw;
	height: 27vh;
	max-width:1550px;
	bottom: 0;
	left:50%;
	transform: translate(-50%, -0%);
	z-index: 2234;
	display: flex;
	justify-content: center;
	align-items: center;
	/* background-color: grey; */
}

#slide4_bubba_part_2 p {
	color: #E89A67;
	font-size: min(4vw, 6vw);
}


#slide4_bubba_trees {
	position: absolute;
	opacity: 0.2;
	left: 100%;
	top: 50%;
	transform: translate(-70%, -62%) scale(0.7);
}

#slide4_bubba_trees img {
	display: none;
	width:711px;
	height:841px;
}




#slide_5 {
	position: relative;
	padding: 0;
	margin: 0;
	text-align: center;
	width: 100%;
	height: 100vh; 
	overflow: hidden;
	z-index: 44;
	background-color: #F3FAFC;
	padding-bottom: 10%;
}

/* @keyframes pulse {
    0% {
		transform: scale(0.8,0.8) rotate(0deg);
    }

    90% {
		transform: scale(1.5, 1.5);
    }

    100% {
		transform: scale(0.8,0.8) rotate(356deg);
    }
} */

@keyframes pulse {
    0% {
		transform: rotate(0deg);
    }

    100% {
		transform: rotate(356deg);
    }
}

#slide5_iggie_bg {
	position:absolute;
	z-index: 4001;
	top: 50%;
	left: 50%;
	opacity: 0.1;
 	/* transform: scale(1, 1) translate(-50%, -50%); */
	/* transform: scale(0.5, 0.5) translate(-100%, -92%); */
	transform: scale(0.5, 0.5) translate(-101%, -94%) rotate(225deg);
	z-index: 0;
}

#slide5_iggie_bg img {
	animation: pulse 20s linear infinite;
}

.iggie_col {
	display: flex;
	width: 32%;
	align-items: center;
	justify-content: space-evenly;
	flex-direction: column;
	padding: 1%;
	z-index: 100;
}


.iggie_col_l, .iggie_col_r { 
	justify-content: flex-end;
	align-items: initial;
	padding: 3%;
	padding-bottom: 7%;
}

.iggie_col_l { 
	text-align: left;
}

.iggie_col_r  {
	text-align: right;
} 

.iggie_col .iggieimg {
	max-height: 66vh;
	max-width: 50vw;
	padding-top: 0%;
}

.iggie_col .iggie_name {
	padding-top: 10%;
}

.iggie_col h1 {
	color: #ADADAD;
	/* font-size: 2vw; */
	font-size: min(5vw, 40px);
	padding: 0;
}


#slide_6 {
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: 100vh;
} 

#slide_6_bg {
	position: absolute;
	overflow: hidden;
	background-image: radial-gradient(circle, #FAFAED, #ADDCE9);
	width: 100%;
	height: 200vh;
	opacity: 1;
	/* display: none; */
}

#slide_6_bg::before {
	content: "";
	position: absolute;
	width: 200%;
	height: 200%;
	top: -65%;
	left: -50%;
	z-index: 0;
	background: url(svg/rays.svg) no-repeat center;
	background-clip: content-box;
	opacity: 0.3;
	/* -webkit-animation: arotation 100s infinite linear;  */
	/* animation: arotation 100s infinite linear;  */
}

#slide_6_gradient_top {
	position: absolute;
	/* background: linear-gradient(0deg, #f4fafc00 0%, #F4FAFC 100%); */
	/* background: linear-gradient(0deg, #f4fafc00 0%, #33b9e64f 100%); */
	background: linear-gradient(0deg, #f4fafc00 0%, #F4FAFC 100%);
	top: 0;
	left: 0;
	width: 100%;
	height: 50vh;
}

.contact_col {
	/* position: relative; */
	width: 95%;
	height: 46%;
	padding: 0;
	margin: 0 auto;
	/* margin-top: 5px; */
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: wheat;
}



#contact_col_a {
	height: 100%;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -40%);
}

#contact_col_a img {
	margin: 0;
	height: 50%;
	/* padding-top: 20px; */
}

#contact_col_b {
	position: absolute;
	left: 50%; top: 50%;
	transform: translate(-0%, -50%);
}

#contact_col_b p {
	font-size: 17px;
	color: #F09D64;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -43%);
	width: 100%;
}


#footer_bar {
	position:absolute;
	background-image: url("img/footer_bg@2x.png");
	background-position: center; 
	background-repeat: no-repeat; 
	background-size: cover;
	height: 40px;
	width:100%;
	bottom: 0;
	display: flex;
	flex-flow: row;
	justify-content: center;
	align-items: center;
}

#footer_bar p {
	position: relative;
	color: #F5F0DF;
	font-size: 14px;
	margin: 0;
	padding: 0;
}


#plants_left, #plants_right {
	opacity: 0;
	position: absolute; 
	top: 0;
	padding: 0;
	margin: 0;
	display: none;
}

#plants_left {
	left: 0%;
}

#plants_right {
	right: 0%;
	/* height: 80%; */
}


#buildings_left, #buildings_right {
	position: absolute; 
	padding: 0;
	margin: 0;
	width: 20vw;
	height: 44vh;
	top:50%;
	opacity: 1;
}

#buildings_left {
	transform: translate(-50px, -50%);
}


#buildings_right {
	right:0;
	transform: translate(0%, -50%);
}

#left_eye, #left_build, #taj, #eiffel {
	position:absolute;
	padding:0;
	margin:0;
	bottom:0;
	left: 0;
	width: 100%;
	max-height: 100%;
	opacity: 0;
}

#left_build {
	transform: translate(75px, -40px);
}

#left_eye {
	max-height: 50%;
}

#eiffel {
	transform: translate(-85px, 0px);
}



#b_meet_band, #b_meet_band:before {
	top: 90%;
	left: 50%;
	transform: translate(-50%, -50%);
	position: fixed;
	cursor: pointer;
}


#b_meet_band p {
	position: relative;
	font-size: 12px;
	padding: 22px;
	margin: 0;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);	
	text-align: center;
	text-transform: uppercase;
}

#b_meet_band {
	/* width: 20px; */
	height: 46px;
	border-style: solid;
	border-width: 1px;
	border-color: rgba(255, 255, 255, 0);
	box-shadow:  0 0 20px #53a3b977;
	border-radius: 23px;
	z-index: 100000;
	background-color: #fdffff52;
}

#b_meet_band:before {
	content: '';
	width: 8px;
	height: 8px;
	background:#ffffff;
	top: 50%;
	border-radius: 4px;
	animation-duration: 2.0s;
	animation-iteration-count: infinite;
	animation-name: scrollanim;	
}

#b_meet_band:hover {
	background-color: rgba(32, 78, 103, 0.16);
	transition: 0.3s;
	border-color: rgba(255, 255, 255, 0.63);
}

@keyframes scrollanim {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
	transform: scale(5) translate(-10%, -11%);
    /* transform: translate(-50%, -28px);	 */
  }
}





#contact_spacer {
	height: 100px;
	/* background-color: tomato; */
}

#contact_form_holder {
	position: relative;
	width: 100%;
	/* Firefox */
	/* height: -moz-calc(100% - 90px); */
	/* WebKit */
	/* height: -webkit-calc(100% - 90px);  */
	/* Opera */
	/* height: -o-calc(100% - 90px); */
	 /* Standard */
	/* height: calc(100% - 90px); */
	background: #fff;
	border-radius: 25px;
	max-width: 1000px;
	/* min-height: 300px; */
	margin: 0 auto;
	box-shadow: 0px 3px 6px rgba(32, 78, 103, 0.16);
	-webkit-box-shadow: 0px 3px 6px rgba(32, 78, 103, 0.16);	
	-moz-box-shadow: 0px 3px 6px rgba(32, 78, 103, 0.16);	
	box-shadow:         inset 0 0 25px #DCEFF1;
	-moz-box-shadow:    inset 0 0 25px #DCEFF1;
	-webkit-box-shadow: inset 0 0 25px #DCEFF1;
	padding-top: 12px;
	padding-bottom: 20px;
}


#form_container{
	position: relative;
	width: 100%;
	height: 100%;
	/* background-color: #782D10; */
	justify-content: space-between;
}


.form-row {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	/* background-color: yellow; */
}

.form-group {
	position: relative;
	/* background-color: #45a049; */
	padding-top: 10px;
}

.form_col {
	width: 46%;
	padding-left: 1%;
	padding-right: 1%;
}

input[type=text], input[type=email], select {
	width: 100%;
	padding: 12px 20px;
	margin: 8px 0;
	border: 1px solid #b6d5e0;
	border-radius: 10px;
	box-sizing: border-box;
	font-family: 'MADE Outer Sans';
  }
  
textarea {
	border: 1px solid #b6d5e0;
	border-radius: 10px;
	box-sizing: border-box;
	width:94%;
	padding: 12px 20px;
	font-family: 'MADE Outer Sans';
	/* height: 25vh; */
}

.form-group-textarea {
	width: 100%;
	height: 100%;
}

.boxsizingBorder {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

button[type=submit] {
	width: 94%;
	background-color: #EBADB8;
	color: white;
	padding: 14px 20px;
	margin: 8px 0;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-family: 'MADE Outer Sans';
}
  
input[type=submit]:hover {
	background-color: #45a049;
}

  input[type=text]:focus,  input[type=email]:focus {
	background-color: lightgrey;
}
  


#slide_2, #slide_3, #slide_4, #slide_5, #slide_6 {
	display: none;
}








#icon-scroll {
	position: fixed;
	border-style: solid;
	border-width: 0px;
	border-color: rgb(155, 181, 216);
	/* background-color: #4da8c283; */
	/* box-shadow:  0 0 20px #53a3b977; */
	border-radius: 10px;
	
	position: absolute;
	width: 60px;
	height: 60px;
	top: 90vh;
	/* right: 3vh; */
	left: 50%;
	transform: translateX(-50%);
	z-index: 15999;
	cursor: pointer;
	display: none;
	opacity: 0;
}

#icon-scroll:hover {
	background-color: #ffffffaf;
	transition: 0.3s;
}

.arrows {
	width: 50px;
	height: 45px;
	position: absolute;
	/* background-color: white; */
	top: 50%;
	left: 15px;
	transform: translateY(-30%);
  }
  
  .arrows path {
	stroke: rgb(133, 175, 230);
	fill: transparent;
	stroke-width: 2px;  
	animation: arrow 4s infinite;
	-webkit-animation: arrow 2s infinite; 
  }
  
  @keyframes arrow
  {
  0% {opacity:0}
  40% {opacity:1}
  80% {opacity:0}
  100% {opacity:0}
  }
  
  @-webkit-keyframes arrow /*Safari and Chrome*/
  {
  0% {opacity:0}
  40% {opacity:1}
  80% {opacity:0}
  100% {opacity:0}
  }
  
  .arrows path.a1 {
	animation-delay:-1.5s;
	-webkit-animation-delay:-1s; /* Safari Chrome */
  }
  
  .arrows path.a2 {
	animation-delay:-0.75s;
	-webkit-animation-delay:-0.5s; /* Safari Chrome */
  }
  
  .arrows path.a3 { 
	animation-delay:0s;
	-webkit-animation-delay:0s; /* Safari Chrome */
  }



/* FEATHERS  */

 .feathers{
	position:absolute;
	width:99%;
	height: 100vh;
	z-index:1;
	overflow:hidden;
	top:0;
	left:0%;
	/* background-color: grey;	 */
  }

  .feather{
	position: absolute;
	/* bottom:-100px; */
	top: 50%;
	left:00px;
	width:140px;
	height: 100vh;
	/* background:#FFAE50; */
	background-image: url("img/one_feather.png");
	background-position: center; 
	background-repeat: no-repeat;
	background-size: contain;
	border-radius:50%;
	opacity:0;
	animation: blow_ltr 20s infinite ease-in;
  }
  
  .feather:nth-child(1){
	width:40px;
	height:40px;
	top: 30%;
	left:10%;
	animation-duration:8s;
  }
  .feather:nth-child(2){
	width:20px;
	height:20px;
	top: 90%;
	left:20%;
	animation-duration:5s;
	animation-delay:1s;
  }
  .feather:nth-child(3){
	width:50px;
	height:50px;
	left:35%;
	animation-duration:7s;
	animation-delay:2s;
  }
  .feather:nth-child(4){
	width:220px;
	height:220px;
	top: 80%;
	left:50%;
	animation-duration:11s;
	animation-delay:0s;
  }
  .feather:nth-child(5){
	width: 77px;
	height:77px;
	top: 10%;
	left:55%;
	animation-duration:6s;
	animation-delay:1s;
  }
  .feather:nth-child(6){
	width:145px;
	height:145px;
	top: 30%;
	left:65%;
	animation-duration:8s;
	animation-delay:3s;
  }
  .feather:nth-child(7){
	width:90px;
	height:90px;
	top: 50%;
	left:70%;
	animation-duration:12s;
	animation-delay:2s;
  }
  .feather:nth-child(8){
	width:125px;
	height:125px;
	top: 0%;
	left:10%;
	animation-duration:6s;
	animation-delay:2s;
  }
  .feather:nth-child(9){
	width:35px;
	height:35px;
	top: 5%;
	left:70%;
	animation-duration:5s;
	animation-delay:1s;
  }
  .feather:nth-child(10){
	width:90px;
	height:90px;
	top: 20%;
	left:25%;
	animation-duration:10s;
	animation-delay:4s;
  }




  /* BUBBLES  */

 .bubbles{
	position:absolute;
	width:100vw;
	height: 100vh;
	z-index:0;
	overflow:hidden;
	top:0;
	left:0%;
	/* background-color: grey;	 */
  }


	.bubbles{
		position:absolute;
		width:100%;
		height: 100%;
		z-index:0;
		overflow:hidden;
		top:0;
		left:0;
	  }
	  .bubble{
		position: absolute;
		bottom:-100px;
		width:40px;
		height: 40px;
		background:#FFAE50;
		border-radius:50%;
		opacity:0.5;
		animation: rise 40s infinite ease-in;
	  }
	  .bubble:nth-child(1){
		width:40px;
		height:40px;
		left:10%;
		animation-duration:8s;
	  }
	  .bubble:nth-child(2){
		width:20px;
		height:20px;
		left:20%;
		animation-duration:5s;
		animation-delay:1s;
	  }
	  .bubble:nth-child(3){
		width:50px;
		height:50px;
		left:35%;
		animation-duration:7s;
		animation-delay:2s;
	  }
	  .bubble:nth-child(4){
		width:80px;
		height:80px;
		left:50%;
		animation-duration:11s;
		animation-delay:0s;
	  }
	  .bubble:nth-child(5){
		width:35px;
		height:35px;
		left:55%;
		animation-duration:6s;
		animation-delay:1s;
	  }
	  .bubble:nth-child(6){
		width:45px;
		height:45px;
		left:65%;
		animation-duration:8s;
		animation-delay:3s;
	  }
	  .bubble:nth-child(7){
		width:90px;
		height:90px;
		left:70%;
		animation-duration:12s;
		animation-delay:2s;
	  }
	  .bubble:nth-child(8){
		width:25px;
		height:25px;
		left:80%;
		animation-duration:6s;
		animation-delay:2s;
	  }
	  .bubble:nth-child(9){
		width:15px;
		height:15px;
		left:70%;
		animation-duration:5s;
		animation-delay:1s;
	  }
	  .bubble:nth-child(10){
		width:90px;
		height:90px;
		left:25%;
		animation-duration:10s;
		animation-delay:4s;
	  }
	  @keyframes rise{
		0%{
		  bottom:-100px;
		  transform:translateX(0);
		}
		50%{
		  transform:translate(100px);
		}
		100%{
		  bottom:1080px;
		  transform:translateX(-200px);
		}
	  }


  @keyframes blow_ltr{
	0%{
		left: 0%;
		transform:translate(50, 50%);
		opacity: 0;
	}
	50%{
	  /* transform:translateX(200px) rotate(45deg); */
	  
	  transform:translate(50%, 100%) rotate(88deg);
	  opacity: 1;
	}
	100%{
		left: 90%;
	  	transform:translate(100%, 100%) rotate(190deg);
	  	opacity: 0;
	}
  }


.noshow {
	display: none;
}









@media only screen and (max-width : 1081px) {
	.slide1_band_lola, .slide1_band_supo, .slide1_band_iggie, .slide1_band_bubba {
		width: 25vw;
	}

	#buildings_left, #buildings_right {
		top:27%;
		opacity: 0.5;
	}

	#slide1_band {
		top:70%;
		width: 100vw;
	}
	
	#plants_left{
		transform: scale(0.5) translate(-55%, -20%);
	}

	#plants_right {
		transform: scale(0.5) translate(55%, -20%);
	}

	/* #slide_1_gradient_bottom {
		transform: translateY(40%);
		height: 100vh;
	} */

	.iggie_col, .lola_col, .bubba_col {
		width: 95%;
		display: flex;
	}

	#slide_3 {
		margin-top: 0;
		height: 105vh;
	}

	#slide3_supo{
	transform: translate(-50%, -121%);
	}

	.iggie_col_l, .iggie_col_r  {
		align-items: center;
		/* padding: 0%; */
		padding-bottom: 3%;
		padding-top: 3%;
	}

	.iggie_col h1 {
		font-size: min(5vw, 27px);
	}

	#slide_4 {
		margin-top: 34px;
		background-color: #E9E6DE;
	}

	#slide4_bubba {
		flex-flow: column-reverse;
		align-items: center;
		height: 95vh;
		top:0;
	}

	#slide4_bubba_part_2 {
		height: 10vh;
	}

	.bubba_col {
		height: 100%;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		margin: 1px;
	}

	.bubba_name_img {
		align-self: center;
	}

	.bubba_col .bubbaimg {
		padding: 0;
	}

	.bubba_col h1 {
		text-align: center;
		padding: 0;
	}

	#slide_3 {
		flex-flow: column;
	}

	#slide3_supo_part_2 {
		padding-top: 3%;
		flex-flow: column;
	}

	#supo_name {
		height: 15vh;
		top: 18%;
		left: 50%;
		transform: translate(-50%, -50%);
		display: flex;
		justify-content: center;
	}

}


/* ---- FOR CONTACT --- */
@media only screen and (max-width : 800px) and (orientation:landscape) {
	#slide_6 {
		height: 200vh;
	}
}


@media (orientation:portrait) {
	/* #b_meet_band {
		background-color: white;
	} */

	#logoBox {
		width: 80%;
	}

	#slide1_band {
		height: 75%;
		min-height: 400px;
		top:63%;
	}

	.slide1_band_lola, .slide1_band_supo, .slide1_band_iggie, .slide1_band_bubba {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		min-height: 70%;
		min-width: 70%;
		/* background-color: rgba(85, 241, 12, 0.301); */
	}

	.slide1_band_supo img, .slide1_band_lola img, .slide1_band_iggie img, .slide1_band_bubba img {
		max-width: 100%;
		max-height: 100%;
	}

	.slide1_band_lola {
		transform: scale(1) translate(-45%, -30%);
		z-index: 100;
	}

	.slide1_band_supo {
		transform: scale(0.6) translate(-100%, -140%);
		z-index: 70;
	}

	.slide1_band_iggie {
		transform: scale(0.5) translate(-24%, -80%);
		z-index: 80;
	}

	.slide1_band_bubba {
		transform: scale(0.6) translate(-155%, -65%);
		z-index: 90;
	}

	#eiffel{
		transform: translate(-35px, 0px);
	}

	#left_build {
		transform: translate(35px, -40px);
	}

	#slide_2 {
		margin-top: 0;
		flex-flow: column;
		align-items: center;
	}

	#slide_5 {
		flex-flow: column;
		justify-content: center;
		align-items: center;
	}

	.bubba_col .bubbaimg {
		padding: 0;
	}

	#slide5_iggie_bg {
		transform: scale(0.5, 0.5) translate(-100%, -103%) rotate(225deg);
	}

	.iggie_col_l, .iggie_col_r  {
		text-align: center;
	}

	.iggie_col {
		flex-direction: column-reverse;
	}
}



/* --- HIDE RAYS FOR CONTACT ON MOBILE & SMALL SCREENS - PERFORMANCE ISSUES --- */
@media only screen and (max-width : 800px) {
	#slide_6_bg::before {
		display: none;
	}
}




/* @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { */
@media only screen and (max-width : 470px) {

	#plants_left, #plants_right, #left_build, #left_eye, #eiffel, #buildings_right, #taj, #buildings_left {
		display: none;
		opacity: 0;
	}

	#topMenu{
		display: none;
	}

	/* #slide_1_gradient_bottom {
		transform: translateY(55%);
		height: 80vh;
	} */

	#b_meet_band {
		width: 80%;
	}

	#b_meet_band p {
		padding: 15px;
	}

	#slide3_supo {
		transform: translate(-50%, -150%);
	}

	#slide_5 {
		padding-bottom: 0;
	}

	#slide5_iggie_bg {
		transform: scale(0.25, 0.25) translate(-201%, -200%) rotate(225deg);
	}

	img.iggie_name {
		width: 90%;
		height: unset;
	}
	
	.iggie_col .iggieimg {
		max-height: 66vh;
		max-width: 80vw;
		padding-top: 10%;
		padding-bottom: 4%;
	}

	.iggie_col .iggie_name {
		padding-top: 0;
	}

	#slide4_bubba_part_2 p {
		font-size: 6vw;
	}

	#slide_6 {
		height: 150vh;
	}

	#spcl_video_content {
		width: 100%;
	}

	#videoCloseB {
		top: 100%;
		left: 0%;
		transform: translate(0%, 100%) scale(1.5);
	}

}