@charset "UTF-8";
/* CSS Document prestodefault.css */

html{
	background-color:#fff;
	-webkit-text-size-adjust:100%;
	}
	
	#container{
	display:block;
	}
	
body {
	margin: 0 auto;
	padding: 0;
	font-size: 10px;
	min-width: 320px;
}
p,h1,h2,h3,h4,ul,ol,dl,img,hr,td,tr,line-height,button,a {
	margin: 0;
	padding: 0;
	border: none;
	outline: 0;
}
img {
	 max-width: 100%
}

.stop-scrolling {
  height: 100%;
  overflow: hidden;
}

/* hack for keeping divs around floated elements from collapsing */
.clearfix {
  clear: both;
}

.clearfix:after {
  clear: both; 
  content: "";
  display: table; 
}

#container{
	width: 100%;
	max-width: 90em;
	height: 100%;
	margin: 0 auto;
	padding-bottom: 5em;
	box-sizing: border-box;
	position: relative;
	background-color: #FFFFFF;
	border: none;
	overflow-x: hidden;
	}
.swiper{
	position:absolute;
	visibility:visible;
	z-index:2;
	left:41.75%;
	top: 75.25%;
	}
footer {
 width: 100%;
 background-color: #fff;
 margin: 0 0 5em 0;
	}
.pcontainer{
	width: 100%;
	max-width: 90em;
	height: auto;
	min-height: 90em;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
	background-color: #FFFFFF;
	padding: 0px;
	border: none;
	margin-bottom: 10%;
	box-sizing: border-box;
	visibility:hidden;
	} 
.xpcontainer{
	width: 90em;
	height: auto;  
	margin: 0 auto;
	/*position: absolute;
	top: 0px;
	left: 0px;*/
	background-color: #FFFFFF;
	overflow: hidden;
	padding: 0px;
	border: none;
	visibility:hidden;
	} 
.zcontainer{
	width: 100%;
	max-width: 90em;
	height: auto;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
	background-color: #FFFFFF;
	padding: 0px;
	border: none;
	margin: 8em 0 4em 0;
	box-sizing: border-box;
	visibility:hidden;
	}

#altestimonial{
	position: absolute;
	visibility:visible;
	width: 5.5em;
	height: 5.5em;
	z-index:2;
	opacity: 1.0;
	top: 20%;
	left: 0;
	cursor: pointer;
	}
#artestimonial{
	position: absolute;
	visibility:visible;
	width: 5.5em;
	height: 5.5em;
	z-index:2;
	opacity: 1.0;
	top: 20%;
	right: 0;
	cursor: pointer;
	}
.ruleline {
	width: 100%;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #999;
	opacity: 1;
	margin: 7.5em 0 0 0;
}
.grayruleline {
	width: 100%;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #CCC;
	opacity: 1;
	z-index: 2;
}
.smallruleline {
	width: 99%;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #999;
	opacity: 1;
	margin: 1em 0;
}
.centerimg {
	display: block;
	margin: 0 auto;
}
.centerimg:first-child {
	padding-top: 10em;
}
.dividerimg {
	width: 18.4444444%; 
	height: auto;
	max-width: 166px;
}
.longdividerimg {
	width: 100%; 
	height: auto;
	max-width: 900px;
}
.centerme {
	text-align: center;
}
.dobestimg {
	width: 100%;
	height: auto;
	max-width: 640px;
	margin: 1em auto 4em auto;
}	
.theframe {
/*	scrolling: no; */
	z-index: 6;
	width: 90em;
	height: 80em;
	margin: 0 auto;
	padding: 0;
	visibility: visible;
}

.overlayicon {
	float: left;
	margin-top: 2.5em;
	opacity: .8;
}

.overlayicon:hover {
	cursor: pointer;
	opacity: 1.0;
}

#contactoverlay {
	display: none;
	position:fixed; 
	width: 100vw;
	height: 100vh;
	z-index: 10;
	background-color: rgba(30, 36, 46, 0.9);
	opacity: 1.0;	 
	overflow: auto;
	 }
	 
#expando {
	display: flex;
	margin: 7.5% 8.5% 5% 8.5%;
	flex-direction: row;
	align-items: flex-start;
	justify-content: center;
	flex-wrap: wrap;
	z-index: 11;
}

.expandcontent {
	display: none;
}

.excontent {
	width: 30%;
	height: auto;
	max-width: 321px;
	padding: 2em 2em 0 0;
}

.excontentbig {
	width: 40%;
	height: auto;
	max-width: 500px;
	padding: 2em 2em 0 0;
}

#expando .cancelbutton {
	position: fixed;
	top: 100px;
	right: 7%;
	cursor: pointer;
}

h1 {
	font-family: "museo-sans", Georgia, serif;
	font-size: 5.4em;
	font-weight:500;
	color: #000;
	line-height:120%;
}

h2 {
	font-family: "museo-sans", Georgia, serif;
	font-size: 3.2em;
	font-weight:300;
	color: #B046E8;
	text-align:center;
	}
.homepage{
	padding: .5em 0em 0em 0em;
	font-size: 2.4em;
	color: #A0A0A0;
	}
.aboutpage{
	padding: 3.5em 0em 1em 0em;
	}
.stickleft {
	text-align: left;
}
.abitless {
	padding-top: 2.5em;
}
.abitmore {
	padding-top: .7em;
	margin-bottom: -20px;
	box-sizing: border-box;
	text-align: left;
	z-index: 2;
}
h3 {
	font-family: "museo-sans", Georgia, serif;
	font-size: 2.8em;
	font-weight:300;
	color: #665A66;
	line-height:130%;
	padding: 0em 0em .5em 0em;
}
.purple {
	color: #B046E8;
	padding-bottom: .5em;
	margin: 0 auto;
}
.subtitle {
	font-family: "museo-sans", Georgia, serif;
	font-size: 2.4em;
	font-weight:300;
	/*color: #B046E8;*/
	color: #333;
	text-align:center;
	padding: 2em 0 .5em 0;
}
.bodycopy{
	font-family: "museo-sans", Arial, Helvetica, sans-serif;
	font-size: 1.9em;
	font-weight:100;
	color: #665A66;
	line-height:155%;
}
.abitbolder {
	font-weight:300;
}
.gotosite{
	font-family: "museo-sans", Arial, Helvetica, sans-serif;
	font-size: 1.9em;
	font-weight:100;
	color: #665A66;
	line-height:155%;
	padding-top:1em;
}
.gotosite a:link, .gotosite a:visited{
	color: #665A66;
	text-decoration: none;
}
.gotosite a:hover, .gotosite a:active{
	color: #333;
	text-decoration: none;
	cursor:pointer;
}
.slanted {
	font-style: italic;
}
.hugright {
	float: right;
	padding-top: 1.5em;
}

/* navbar */
header nav{
	width: 100%;
	height: 75px;
	position: fixed;
	top: 0px;
	left:0px;
	z-index:99;
	background-color:#fff;
	opacity: .9;
	}
header nav ul{
	list-style: none;
	text-align: center;
	width: 100%;
	max-width: 90em;
	height:24px;
	margin: 25px auto 4px;
	display: flex;
	justify-content: space-between;
	padding: 0px 5%;
	box-sizing: border-box;
}
header nav ul li{
	font-family: "museo-sans",arial,sans-serif;
	font-size: 2.4em;
	font-weight:300;
	line-height: 100%;
	float: left;
	}
header nav ul li a:link, header nav ul li a:visited {
	display:block;
	color: #665A66;	
	text-decoration:none;	
}
header nav ul li a:hover, header nav ul li a:active {
	color: #B046E8;
	outline: 0;
	cursor: pointer;	
}
header nav ul li a.current, header nav ul li a.current:hover, header nav ul li a.current:active {
	color: #B046E8;
	outline: 0;
	font-weight:300;	
}
.youRhere {
	color: #B046E8 !important;
}

/*homepage*/

#bunny{
	position: relative;
	width: 100%;
	height: 76.8em;
	top: 0px;
	text-align:center;
}
#bunny img{
	padding: 12em 0 1.5em 0;
	}

/*about page*/

#about{
	position: relative;
	width: 100%;
	top: 0px;
	box-sizing: border-box;
}
#aboutPortrait{
	display: none;
	box-sizing: border-box;
}
#aboutLandscape{
	display:block;
	box-sizing: border-box;
}
.portrait{
	margin: 1em 2em 2em 4.5em;
	display: inline-block;
	float: left;
}
.aboutcopyfull{
	font-family: "museo-sans", Arial, Helvetica, sans-serif;
	font-size: 2.4em;
	font-weight:100;
	color: #665A66;
	line-height:170%;
	text-align:left;
	float:left;
	margin: 0 auto;
	padding: 0 2em 3.5em 2em;
}
.aboutcopyleft{
	font-family: "museo-sans", Arial, Helvetica, sans-serif;
	font-size: 1.9em;
	font-weight:100;
	color: #665A66;
	/*line-height:155%;*/
	line-height:168%;
	text-align:left;
	float:left;
	width: 30%;
}
.aboutcopyright{
	font-family: "museo-sans", Arial, Helvetica, sans-serif;
	font-size: 1.9em;
	font-weight:100;
	color: #665A66;
	line-height:168%;
	text-align: right;
	float:right;
	width: 30%;
}
.abitnarrower {
	padding: 0 3.5em 3.5em 3.5em;
}
.bottomless {
	padding-bottom: 1.5em;
}
/*contact page*/

#contact{
	position: relative;
	width: 100%;
	top: 0px;
}
#centercontact{
	width:40em;
	padding: 10em 0 7.5em 0;
	margin-left:auto;
	margin-right:auto;
}
.contactcopy {
	font-family: "museo-sans", Arial, Helvetica, sans-serif;
	font-size: 2em;
	font-style: normal;
	line-height: 155%;
	font-weight: 300;
	color: #B046E8;
	text-decoration: none;
	padding-bottom: 1.6em;
}
.contactcopy a{
	color:#66A0E0;
	text-decoration:none;
	}
.contactcopy a:hover{
	color:#4680B0;
	text-decoration:none;
	}
.copyright {
	font-family: "museo-sans", Arial, Helvetica, sans-serif;
	font-size: 1.4em;
	font-style: normal;
	line-height: 120%;
	font-weight: 300;
	color: #B046E8;
	padding: 1em 0 0 0;
}
.formtext {
	font-family: "museo-sans", Arial, Helvetica, sans-serif;
	font-size: 1.4em;
	font-style: normal;
	line-height: 100%;
	font-weight: 300;
	color: #B046E8;
	border: none;
	border-bottom: 1px solid #CCC;
	width: 28em;
	height: 2em;
	margin: 0px 0px 2em 0px;
	padding: .5em .2em .5em .2em;
}
.formtext:hover {
	border-bottom: 1px solid #B046E8;
}
.formtext:focus, .formtext:active {
	outline: none;
	border-bottom: 1px solid #B046E8;
}
.formtextblock {
	font-family: "museo-sans", Arial, Helvetica, sans-serif;
	font-size: 1.4em;
	font-style: normal;
	line-height: 155%;
	font-weight: 300;
	color: #A036D8;
	border: 1px solid #CCC;
	width: 28em;
	height: 7.5em;
	margin: 0px 0px 1.5em 0px;
	padding: 1em .5em .5em .5em;
	box-shadow: none;
}
.formtextblock:hover {
	border: 1px solid #B046E8;
}
.formtextblock:focus, .formtextblock:active {
	outline: none;
	border: 1px solid #B046E8;
}
.ebuttontext {
	font-family: "museo-sans", Arial, Helvetica, sans-serif;
	font-size: 1.4em;
	font-style: normal;
	line-height: 100%;
	font-weight: 300;
	color: #B046E8;
	width: 25.5em;
	margin: .7em 0px 0px .7em;
	border: none;
	outline: none;
}
#contact #centercontact form #emailStatus a:hover, #contact #centercontact form #emailStatus a:active{
	color: #B046E8;
	text-decoration: none;
}

/*portfolio pages*/

.visuals{
	width: 75%;
	max-width: 59em;
	padding: 7.5em 2em 0em 0em;
	float: left;
}

.descript{
	max-width: 29em;
	padding-top: 7em;
	text-align:left;
	float: right;
	position: relative;
}

.onecol{
	width: 99%;
	padding: 0px .25em .25em 0px;
	vertical-align: top;
}

.twocol{
	width: 49%;
	padding: 0px .25em .25em 0px;
	vertical-align: top;
}

.twothirdcol{
	width: 62%;
	float: left;
	padding: 0px .25em 0px 0px;
	vertical-align: top;
}

.onethirdcol{
	width: 37%;
	float: left;
	padding: 0px .25em 0px 0px;
	vertical-align: top;
}

.threecol{
	width: 32%;
	float: left;
	padding: 0px .25em 0px 0px;
	vertical-align: top;
}

.fourcol{
	width: 49%;
	float: left;
	padding: 0px .25em .25em 0px;
}

/* play page */

.playtitle {
	font-family: "museo-sans", Georgia, serif;
	font-size: 2.4em;
	font-weight:300;
	color: #B046E8;
	text-align:center;
	padding: 0 0 .5em 0;
}
.item {
	width: 100%;
 	max-width: 90em;
    height: auto;
    min-height: 40em;
    overflow: hidden;
	margin: 5em 0 10% 0;
}

/* slide in menu*/
#sidenav {
	width: 100%;
	max-width: 90em;
    height: auto;
    min-height: 40em;
    overflow: hidden;
    position: relative;
    background-color: #FFF0FF;
    border: 1px solid #999;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
  	align-items: center;
} 
#roundbutton {
	width: 80px;
	height: 80px;
	background: #E977CC;
	border-radius: 50%;
	border: 10px solid #FFF;
	outline: none;
	transition: transform .3s ease-in-out;
}
#roundbutton:hover {
	cursor: pointer;
	transform: scale(1.2, 1.2);
}
#flyoutMenu {
    width: 55vw;
    max-width: 500px;
    height: inherit;
    min-height: 40em;
    background-color: #FE96E8;   
    padding: 0 1em;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    transform: translate3d(-100vw, 0, 0);
    transition: transform .5s ease-in-out;
}
#flyoutMenu ul {
	position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
}
#flyoutMenu ul li {	
    list-style: none;
    color: #223;
    padding: 0 0 1em 0;
}
#flyoutMenu ul li:hover {
	color: #FFF;
	cursor: pointer;
	text-decoration: none;
}	
/*#flyoutMenu li a {
	text-decoration: none;
    cursor: pointer;
}
#flyoutMenu a:hover {
    color: #FFF;
}*/
#flyoutMenu.show {
    transform: translate3d(0vw, 0, 0);
} 
/* slide-in menu*/

/*stars come out*/
#stars {
	width: 100%;
	max-width: 90em;
    height: auto;
    min-height: 40em;
    overflow: hidden;
    position: relative;
    background-color: #130020;
    border: 1px solid #999;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
  	align-items: center;
} 
#stars:hover {
	animation: nightfall 8s ease-in-out infinite;
}
#stars img:hover {
	animation: blink 8s ease-in-out infinite;
}
@keyframes nightfall {
	0% {background-color: #ECE9FF; opacity: 20%;}
	25% {opacity: 50%;}
  	50% {background-color: #130020; opacity: 100%;}
  	75% {opacity: 75%;}
  	100% {background-color: #ECE9FF; opacity: 20%;}
	}

@keyframes blink{
	0% {visibility: visible;}
	10% {visibility: hidden;
		opacity: 0;
  		transition: visibility 0s ease-in 500ms, opacity 700ms;}
  	30% {visibility: visible;
  		opacity: 1;
  		transition: visibility 0s ease-in-out 1s, opacity 200ms;}
  	100% {visibility: visible;
  		opacity: 1;
  		transition: visibility 0s ease-in 500ms, opacity 700ms;}
}
/*stars come out*/

/*spinning mandala*/
#mandala {
	width: 100%;
	max-width: 90em;
    height: auto;
    min-height: 40em;
    overflow: hidden;
    position: relative;
    background-color: #FFF0FF;
    border: 1px solid #999;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
  	align-items: center;
} 

#mandala img {
	max-width: 300px;
	height: auto;
	transition: transform 2s ease-in-out;
}
#mandala img:hover {
	cursor: pointer;	
	transform: scale(2.5, 2.5) rotate(360deg);
}
/*spinning mandala*/

/*trout stream*/
#trout {
	width: 100%;
	max-width: 90em;
    height: auto;
    min-height: 40em;
    overflow: hidden;
    position: relative;
    background-color: #FFF;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
  	align-items: center;
  	background: url("images/TroutStream.jpg") no-repeat center;
} 
.white {
	color: #FFF;
	padding: 1em;
}
.overlay {
	width: inherit;
	height: inherit;
	min-height: 40em;
	display: flex;
    justify-content: center;
  	align-items: center;
	background-color: rgba(116, 60, 0, 0.8);
}
.overlay:hover {
	animation: fadeOut ease-out 1s forwards;
}
.overlay:not(:hover) {
	animation: fadeIn ease-out 1s;
}

@keyframes fadeOut {
  0% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}
@keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}
/*trout stream*/

/*radiant button*/
#btnShine {
	width: 100%;
	max-width: 90em;
    height: auto;
    min-height: 40em;
    overflow: hidden;
    position: relative;
    background-color: #FFF0FF;
    border: 1px solid #999;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
  	align-items: center;
} 
.imgfade img{	
  position: absolute;
  max-width: 100%;
  max-height: 100%;
  min-width: 100%;
    min-height: 100%;
  top: 50%;
  left: 50%; 
  transform: translate(-50%, -50%);
 object-fit: cover;
}
.button-wrap {
  padding:1em;
  display: flex;
  justify-content: center;
  align-items: center;
}
.button {
  position:relative;
  display:inline-block;
  margin:2em;
  padding:0;
  border:0;
  background:none;
  color:#A624EB;
  font-size: 4em;
  font-family:"museo-sans", Georgia, serif;
  font-weight: 500;
  transition:color 1s;
  cursor:pointer;
}
.button:hover, .button.button-click,
.button:focus {
  outline:none;
  color:#FF10E0;
}
.button:before {
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  margin:-100px 0 0 -100px;
  width:200px;
  height:200px;
  border-radius:50%;
  opacity:0;
}

.button-effect-a:before {
  background:rgba(255, 200, 255, 0.5);
}
.button-effect-a.button-click:before {
  -webkit-animation:anim-effect-a 0.4s forwards;
}

@-webkit-keyframes anim-effect-a {
  0% {
    -webkit-transform:scale3d(0.3,0.3,1);
  }
  25%,50% {
    opacity:1;
  }
  100% {
    opacity:0;
    -webkit-transform:scale3d(1.2,1.2,1);
  }
}
/*radiant button*/

/*clock*/
#clockBox {
	border:1px solid #999;
	box-sizing:border-box;
	margin-top: 0;
	background: url("images/hills&valleys.jpg") no-repeat center;
	position: relative;
}
#clockContainer {
    position: absolute;
    margin: auto;
    height: 25vw;
    max-height: 150px;
    width: 25vw;
    max-width: 150px;
    background: url(images/clockface.png) no-repeat;
    background-size: 100%;
}
  
#hour,
#minute,
#second {
    position: absolute;
    background: #000;
    border-radius: 10px;
    transform-origin: bottom;
}
  
#hour {
    width: 1.8%;
    height: 25%;
    top: 25%;
    left: 48.85%;
    opacity: 0.8;
}
  
#minute {
    width: 1.6%;
    height: 30%;
    top: 19%;
    left: 48.9%;
    opacity: 0.8;
}
  
#second {
    width: 1%;
    height: 40%;
    top: 9%;
    left: 49.25%;
    opacity: 0.8;
}
 /*clock*/         

/******************** media queries **********************/

@media only screen and (min-width:1500px) {
#expando {
		margin: 6% 8.5% 5% 8.5%;
	}
}

@media only screen and (max-width:1160px) {
#expando {
		margin: 10% 8.5% 5% 8.5%;
	}
}

@media only screen and (max-width:900px) {

#container{
	max-width: 59em;
	padding-bottom: 3em;
	}

#maincontent, footer{ 
	margin: 0 5%;
}
	
header nav ul li {
	font-size: 2.3em;
}
#bunny {
	height: 74em;
}
#lefteye {
	left: 229px !important;
}
#righteye {
	left: 269px !important;
}
.swiper{
	position:absolute;
	visibility:visible;
	z-index:2;
	left:37%;
	top: 38.25%;
	}
.pcontainer{
	width: 100%;
	max-width: 59em;
	height: auto;
	min-height: 102.4em;
	margin: 0 auto;
	position: relative;
	background-color: #FFFFFF;
	padding: 0px;
	border: none;
	margin-bottom: 15%;
	box-sizing: border-box;
	overflow: hidden;
	visibility:hidden;
	} 
	
.xpcontainer{
	width: 100%;
	max-width: 59em;
	height: auto; 
	margin: 0 auto;
	position: absolute;
	top: 0px;
	background-color: #FFFFFF;
	padding: 0px;
	border: none;
	overflow: hidden;
	visibility:hidden;
	} 
	
.visuals{
	width: 100%;
	max-width: 59em;
	padding: 9em 0em 2.5em 0em;
	float: left;
}

.descript{
	width: 100%;
	max-width: 100%;
	padding-top: 0px;
	text-align:left;
	float: none;
	clear: left;
}
.overlayicon {
	position: absolute;
	right: 0;
	bottom: 0;
	margin-top: 0;
}

.twocol:last-child, .threecol:last-child {
	padding-right: 0px;
}

.aboutcopyfull{
	font-size: 2.1em;
	line-height: 160%;
	padding: 0 0 3.5em 0;
}
.abitnarrower {
	padding: 0 3.5em 3.5em 3.5em;
}
.bottomless {
	padding-bottom: 1.5em;
}
.theframe {
/*	scrolling: no; */
	z-index: 6;
	width: 90em;
	height: 80em;
	margin: 0 auto;
	padding: 0;
	visibility: visible;
}
#expando {
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.excontent {
	width: 75%;
	padding: 2em 0 0 0;
}
.excontentbig {
	width: 75%;
	padding: 2em 0 0 0;
}
.grayruleline.bottom {
	width: 90%;
	margin: 0 5%;
}
/*text*/

h1 {
	font-size: 4.5em;
	line-height:120%;
}

h2 {
	font-size: 2.6em;
	color: #B046E8;
	}
.abitmore {
	margin-bottom: -50px;
}
.homepage{
	font-size: 2.2em;
	}
h3 {
	font-size: 2.6em;
	padding: 0em 0em .4em 0em;
}
.bodycopy{
	font-size: 1.9em;
}
.gotosite{
	font-size: 1.9em;
	padding: .5em 0em 0em 0em;
}
.gotosite a:link, .gotosite a:visited{
	color: #665A66;
	text-decoration: none;
}
.gotosite a:hover, .gotosite a:active{
	color: #333;
	text-decoration: none;
	cursor:pointer;
}	
.dividerimg {
	width: 28%; 
	height: auto;
	max-width: 166px;
}
/*.longdividerimg { 
	width: 100%;
	height: auto;
	max-width: 531px;
}*/
.button {
  font-size: 2.6em;
  margin: 1.5em;
}

/*navbar*/

header nav{
	margin:0 auto;
	}
header nav ul{
	max-width: 59em;
	height:24px;
	margin: 32px auto 4px;
}
header nav ul li{
	display: block;
	float: left;
}

/*about page*/

#about{
	height: auto;
	min-height: 102.4em;
}
#aboutLandscape{
	display: none;
}
#aboutPortrait{
	display:block;
}
#about .portrait{
	display:block;
	float: none;
	margin: 2em auto 3em auto;
}
.aboutcopyleft{
	font-size: 1.9em;
	width: 100%;
	float: none;
}
.aboutcopyright{
	font-size: 1.9em;
	width: 100%;
	text-align: left;
	float:none;
	clear: left;
}
}

@media only screen and (max-width: 768px) {
#expando {
		margin: 12% 8.5% 5% 8.5%;
	}
.copyright {
	font-size: 1.2em;
}
}

@media only screen and (max-width:620px) {

header nav ul li {
	font-size: 2.2em;
}
#bunny {
	height: 72em;
}
#lefteye {
	left: 43.2075% !important;
}
#righteye {
	left: 50.7547% !important;
}
h1 {
	font-size: 4.2em;
}
.homepage {
	font-size: 2.1em;
	}
.aboutcopyfull {
	font-size: 1.9em;
	line-height: 155%;
}
.bodycopy, .aboutcopyleft, .aboutcopyright, .aboutcopyfull, .gotosite {
	font-weight: 300;
}
.twothirdcol{
	width: 61.5%;
	padding: 0px .25em 0px 0px;
}
.onethirdcol{
	width: 36.5%;
	padding: 0px .25em 0px 0px;
}
#expando {
		margin: 15% 8.5% 5% 8.5%;
	}
.dividerimg {
	width: 33%; 
	height: auto;
	max-width: 166px;
}
#roundbutton {
	width: 60px;
	height: 60px;
	border: 8px solid #FFF;
}
.button {
  font-size: 2.6em;
}
}

@media only screen and (max-width:555px) {

header nav ul li {
	font-size: 2.1em;
}
#lefteye {
	left: 42.25% !important;
}
#righteye {
	left: 51.25% !important;
}
h1 {
	font-size: 4em;
}
h3{
	font-size: 2.4em;
}
.homepage {
	font-size: 2em;
}
#altestimonial{
	width: 5em;
	height:5em;
	}
#artestimonial{
	width: 5em;
	height:5em;
	}
.abitnarrower {
	padding: 0 3em 3.5em 3em;
}
#roundbutton {
	width: 55px;
	height: 55px;
	border: 8px solid #FFF;
}
.button-wrap {	
  flex-direction: column;
}
.button {
  font-size: 2.4em;
}
.button:before {
  margin:-75px 0 0 -75px;
  width:150px;
  height:150px;
}
}

@media only screen and (max-width:500px) {

header nav ul li {
	font-size: 2em;
}
#lefteye {
	left: 41.5% !important;
}
#righteye {
	left: 51% !important;
}
h1 {
	font-size: 3.7em;
}
h2 {
	font-size: 2.4em;
}
.purple {
	font-size: 2.2em;
}
.bodycopy, .gotosite, .aboutcopyleft, .aboutcopyright, .contactcopy, .aboutcopyfull{
	font-size: 1.8em;
}
#expando {
		margin: 20% 8.5% 10% 8.5%;
}
#roundbutton {
	width: 50px;
	height: 50px;
	border: 7px solid #FFF;
}
.button {
  margin: 1.25em;
}
.button:before {
  margin:-62px 0 0 -62px;
  width:124px;
  height:124px;
}
}


@media only screen and (max-width:450px) {

header nav ul li {
	font-size: 1.8em;
}
#bunny {
	height: 63em;
}
#bunny img {
	width: 200px;
}
#bunny img#lefteye {
	width: 29px !important;
	height: auto;
	top: 217px !important;
	left: 41.25% !important;
}
#bunny img#righteye {
	width: 29px !important;
	height: auto;
	top: 217px !important;
	left: 51.25% !important;
}
.pcontainer {
	min-height: 90em;
}
h1 {
	font-size: 3.4em;
}
.homepage {
	font-size: 1.8em;
}
.visuals {
	padding-top: 7.5em;
}
#altestimonial{
	width: 4.5em;
	height:4.5em;
	}
#artestimonial{
	width: 4.5em;
	height: 4.5em;
	}
.abitnarrower {
	padding: 0 2.5em 3.5em 2.5em;
}
#centercontact {
	width: 90%;
}
.formtext, .formtextblock {
	width: 100%;
}
.dividerimg {
	width: 35%; 
	height: auto;
	max-width: 166px;
}
}

@media only screen and (max-width:420px) {
header nav ul li {
	font-size: 1.7em;
}
h1 {
	font-size: 3.2em;
}
.bodycopy, .gotosite, .aboutcopyleft, .aboutcopyright, .contactcopy, .aboutcopyfull {
	font-size: 1.7em;
	line-height: 160%;
}
.item, #sidenav, #stars, #flyoutMenu, #mandala, #trout, .overlay, #btnShine {
	min-height: 30em;
}
#roundbutton {
	width: 40px;
	height: 40px;
	border: 5px solid #FFF;
}
.playtitle {
	font-size: 2.1em;
}
#mandala img {
	max-width: 225px;
}
.button:before {
  margin:-50px 0 0 -50px;
  width:100px;
  height:100px;
}
}

@media only screen and (max-width:400px) {
header nav ul li {
	font-size: 1.6em;
}
#bunny img#lefteye {
	top: 217px !important;
	left: 40.5% !important;
}
#bunny img#righteye {
	top: 217px !important;
	left: 51.25% !important;
}
.pcontainer {
	min-height: 80em;
}
h1 {
	font-size: 3em;
}
h3 {
 font-size: 2.2em;
}
.purple {
	font-size: 2em;
}
.homepage {
	font-size: 1.6em;
}
#aluxui{
	top: 48%;
	}
#aruxui{
	top: 48%;
}
}

@media only screen and (max-width:365px) {
#bunny {
	height: 58em;
}
#bunny img {
	width: 180px;
}
#bunny img#lefteye {
	width: 26px !important;
	height: auto;
	top: 207px !important;
	left: 40.85% !important;
}
#bunny img#righteye {
	width: 26px !important;
	height: auto;
	top: 207px !important;
	left: 51.5% !important;
}
h1 {
	font-size: 2.8em;
}
h3, h2 {
	font-size: 2.1em;
}
.purple {
	font-size: 1.8em;
}
.bodycopy, .gotosite, .aboutcopyleft, .aboutcopyright, .contactcopy, .aboutcopyfull {
	font-size: 1.6em;
}
}

@media only screen and (max-width:350px) {
#bunny {
	height: 52em;
}
#bunny img {
	width: 150px;
}
#bunny img#lefteye {
	width: 22px !important;
	height: auto;
	top: 193px !important;
	left: 41.5% !important;
}
#bunny img#righteye {
	width: 22px !important;
	height: auto;
	top: 193px !important;
	left: 51.25% !important;
}
header nav ul li {
	font-size: 1.5em;
}
.pcontainer {
	min-height: 70em;
}
h1 {
	font-size: 2.4em;
}
.homepage {
	font-size: 1.4em;
}
#expando {
		margin: 25% 8.5% 10% 8.5%;
	}
.dividerimg {
	width: 38%; 
	height: auto;
	max-width: 166px;
}
.playtitle {
	font-size: 2em;
}
#roundbutton {
	width: 35px;
	height: 35px;
	border: 5px solid #FFF;
}
.button {
  margin-bottom: 1em;
}
}