/*import all typefaces*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;1,300&family=Neuton:ital,wght@0,400;0,700;0,800;1,400&family=Ovo&display=swap');
/*media queries*/
 @media (min-width: 1351px) {
   /* show the warning to zoom out a little*/
     #mobile{visibility: hidden;}
     #medium{visibility: hidden;}
} 
/* double check smaller laptop screens anything up to 1350 pix might need to zoom out a tiny bit */

 @media (max-width: 1350px) {
   /* show the warning to zoom out a little if on a slightly lower res scrn*/
     #mobile{visibility: hidden;}
     #medium{visibility: visible;}
} 

/* Medium devices and smaller - up to 1000px wide */
@media only screen and (max-width: 1000px) {
/* #home{background:orange;}*/
    #mobile{visibility: visible;}
    #medium{visibility: hidden;}
}



#medium{
    position:fixed;
    padding: 30px;
	border-radius: 20px;
	box-shadow: 0 3px 26px 0 rgba(0,0,0,0.20);
    width: 31%;
    margin-top:-495px;
    margin-left:441px;
    background-image: url("../imgs/grad_mild04.gif"); 
}
#mobile{
    position:fixed;
    padding: 30px;
	border-radius: 20px;
	box-shadow: 0 3px 26px 0 rgba(0,0,0,0.20);
    width: 31%;
    margin-top:-420px;
    margin-left:441px;
    background-image: url("../imgs/grad_mild04.gif"); 


}



/*general classes*/
.center {
    /*margin: auto;
    width: 100%;
    height:100%;
    text-align: center;*/
    margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
    text-align: center;

}

.right, .left{
    /*padding-top:100px;*/
    padding-top:50px
    padding-bottom: 50px;
    width:100px;
    position:absolute;
    background-image: url("../imgs/grad_mild04.gif"); 
    z-index: 2;
    cursor: help;
    
}
/*these r opposite lol*/
.right{
    margin-left: 0px;
    
    
}
.left{
    margin-left: 1290px;
}

/*edit here 4 alt CSS*/
/*edit here 4 alt CSS*/
/*edit here 4 alt CSS*/
/*edit here 4 alt CSS*/
/*edit here 4 alt CSS*/
/*edit here 4 alt CSS*/
/*edit here 4 alt CSS*/
/*edit here 4 alt CSS*/

/*come on my general selectorz*/
body{
    /*put a gif in here?*/
    background-color:#CCCCCC  ;/*grey*/
    font-family: 'Ovo', serif;
    font-size: 100%;
    color: #333333;

}

h1{
    font-family: 'Neuton', serif;
    font-weight: 800;
    font-style: italic;
    margin-top: -15px;
    margin-bottom: 7px;
    font-size: 2.4em;
    position:relative;
}

h2{
    font-family: 'Neuton', serif;
    font-weight: 100;
    font-style: italic;
    margin-top: -10px;
    margin-bottom: 7px;
     font-size: 1.1em;
    color: #333333;
    cursor:pointer;
}

div{
    font-size: 1.05em;
}


a{
    color: darkorchid;
}
a:hover{
    color:aquamarine;
}
a:clicked{
    color:chartreuse;
}
/*a:visited{
    color:deeppink;
}*/
a:active{
     color:bisque;
    
}

li{
    padding-left: 4px;
    display:inline;  
}

/*form inputs select,*/
input, textarea {
    font-size: 12px;
    /*font-family: inherit;*/
    font-family: 'Montserrat', sans-serif;
    font-style: italic;
    cursor: text;
}


a, ul, li, p, form, radio{
    cursor: pointer;
}



/*ID ZONE*/
/*page IDs control bg imgs*/

/*all pages to push content*/
#push_home{
    padding-top:60px;
    /*cursor: pointer;*/
   
}


/*tool tips 4 the css*/
.tooltip {
    position: relative;
    display: inline-block;
    /*border-bottom: 1px dotted black;*/
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 250px;
    background-color:darksalmon;
    /*color: #fff;*/
    text-align: center;
    font-size: 0.7em;
    /*font-style:italic;*/
    border-radius: 6px;
    padding: 21px;
    position: absolute;
    z-index: 1;
    /*bottom: 125%;
    left: 50%;*/
    margin-top: -30px;
    margin-left: 20px;
    opacity: 0;
    transition: opacity 0.3s;
    background-image: url("../imgs/grad_mild04.gif"); 
}


.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

/*tool tips 4 the css*/
.tooltipteam {
    position: relative;
    display: inline-block;
    /*border-bottom: 1px dotted black;*/
}

.tooltipteam .tooltiptextteam {
    visibility: hidden;
    /*width: 250px; darksalmon*/
    background-color:#A2B420;
    /*color: #fff;*/
    text-align: center;
    font-size: 0.8em;
    /*font-style:italic;*/
    /*border-radius: 6px;*/
    border-radius: 50%;
    width: 210px;
    height:210px;
    padding: 50px;
    padding-top:65px;
    padding-bottom:35px;
    position: absolute;
    z-index: 1;
    bottom: 1%;
    left: 80%;
    /*margin-top:-135px;
    margin-left:-140px;*/
    
    opacity: 0;
    transition: opacity 0.3s;
    /*background-image: url("../imgs/grad_mild04.gif"); */
}

/*.tooltipteam .tooltiptextteam::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}*/

.tooltipteam:hover .tooltiptextteam {
    visibility: visible;
    opacity: 1;
}

.artist{
    font-style:italic;
    font-weight: bolder;
    color:orchid;
    
}
/*survey info*/

#surveyered{
    cursor: pointer;
    visibility: hidden;
    padding: 30px;
    padding-top: 15px;
    padding-bottom: 40px;
	border-radius: 20px;
	box-shadow: 0 3px 26px 0 rgba(0,0,0,0.20);
    width: 31%;
    margin-top:60px;
    background-image: url("../imgs/grad_mild04.gif"); 
    font-family: 'Ovo', serif;
    /*font-size: 1.1em;*/
    font-style: normal;   
}

#surveyered p{
    padding-top: 7px;
    margin-bottom:4px;
}

.survey{
    font-style: italic;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7em;   
    color:darkmagenta;
    padding:14px;
    
}
#submitSurveys{
    margin-top:10px;
}
#surveyered2{
    visibility: hidden;
    padding: 30px;
	border-radius: 20px;
	box-shadow: 0 3px 26px 0 rgba(0,0,0,0.20);
    width: 27%;
    margin-top:55px;
    background-image: url("../imgs/grad_mild04.gif"); 
    /*position:fixed;
    width:400px;
    height:700px;
    margin-top:-110px;
    margin-left:300px;*/
    
    
}
#endlessSurveys2{
    visibility: hidden;
}
#submitted{
    visibility: hidden;
    padding: 30px;
	border-radius: 20px;
	box-shadow: 0 3px 26px 0 rgba(0,0,0,0.20);
    width: 27%;
    background-image: url("../imgs/grad_mild04.gif"); 
    margin-top:-100px;
}
/*#sureDiv{
     visibility: hidden;
}*/
/*index styles*/
#home{
   background-image: url("../imgs/home.png"); /*requires .. to find folder up one level*/
    background-repeat: no-repeat;
    width: 1366px;
    height:768px;
    cursor:url("../imgs/cursor_dove.png"), auto;
}

#home2{
    background-image: url("../imgs/glitch/glitch_circle002.gif");
    background-repeat: no-repeat;
    width: 1366px;
    height:768px;
   cursor:url("../imgs/cursor_dove.png"), auto;
}

.home_span{
    background-color: black;
    color: aliceblue;
}
#home_bod{
    background-image: url("../imgs/flora_fall.gif"), url("../imgs/trans_bg.gif");
    background-position: right bottom, left top;
    background-repeat: repeat, repeat;
}
 
.chillcursor{
    margin-top:-55px;
    margin-left:-30px;
    cursor:pointer;
}

/*nav on index only*/
#navigation{
    cursor: pointer;
    padding: 30px;
	border-radius: 20px;
	box-shadow: 0 3px 26px 0 rgba(0,0,0,0.20);
    width: 30%;
    margin-top: 110px;
    background-image: url("../imgs/grad_mild04.gif"); 
    color: darkorchid;
}
#navstart{
    padding-bottom: 225px;
}
.bodyText{
  cursor: pointer;    
}

/*endless scroll styles are inside endless.css*/

/*screaming in the void styles*/

#screaming_bod{
    background-image: url("../imgs/star_blinker02.gif"), url("../imgs/trans_bg.gif");
    background-position: right bottom, left top;
    background-repeat: repeat, repeat;
    cursor:url("../imgs/cursor_letter.png"), auto;
}

#screaming{
    background-image: url("../imgs/sensitivity.png");
    background-repeat: no-repeat;
    width: 1366px;
    height:768px; 
}

/*meditation styles*/
#meditating_bod{
    background-image: url("../imgs/cloud.gif"), url("../imgs/trans_bg.gif");
    background-position: right bottom, left top;
    background-repeat: repeat, repeat;
    cursor:url("../imgs/cursor_dolphin.png"), auto;
}

#meditating{
    background-image: url("../imgs/meditate.png");
    background-repeat: no-repeat;
    width: 1366px;
    height:768px;
    cursor:url("../imgs/cursor_dolphin.png"), auto;
}

/*AUDIO*/
#matterMed{
    margin-top:-5px;
    width: 320px;
    height:42px;
    
}

/*thank u styles*/
#thanking_bod{
    background-image: url("../imgs/cheers.gif"), url("../imgs/trans_bg.gif");
    background-position: right bottom, left top;
    background-repeat: repeat, repeat;
    
}

#thanking{
    background-image: url("../imgs/thanking.png");
    background-repeat: no-repeat;
    width: 1366px;
    height:768px;
    cursor:url("../imgs/cursor_chick.png"), auto;
    
}
/*all the inouts on the surveys*/
.butty{
    cursor: pointer;
}
/*landing styles*/
#landing_bod{
    /*background-image: url("../imgs/presents.gif"), url("../imgs/trans_bg.gif");*/
    background-image: url("../imgs/spinner_landBG.gif"), url("../imgs/trans_bg.gif");
    background-position: right bottom, left top;
    background-repeat: repeat, repeat;
    cursor:url("../imgs/cursor_gift.png"), auto;                       
}

#landing{
    background-image: url("../imgs/landing.png");
    background-repeat: no-repeat;
    width: 1366px;
    height:768px;
}

/*team styles*/
#team_bod{
     background-color:#F2FFEB;
}
#team{
    background-image: url("../imgs/rlx_bg001.png");
    background-repeat: no-repeat;
    width: 1366px;
    height:768px;
    border-radius: 25px;
}

#teamlist{
    display:inline-block;
    width:208px;
    
    padding: 0px 0px 14px;
}

#wellness{
    margin-top:-100px;
}


/*When three values are specified, the first padding applies to the top, the second to the right and left, the third to the bottom. When four values are specified, the paddings apply to the top, right, bottom, and left in that order*/

/*popup note*/
#popper{
    cursor:pointer;
    position:fixed;
    margin-top: -435px;
    margin-left: 450px;
    padding: 30px;
	border-radius: 20px;
	box-shadow: 0 3px 26px 0 rgba(0,0,0,0.20);
    width: 30%;
    background-image: url("../imgs/grad_mild04.gif"); 
    visibility:hidden;
}


/*make this absolute or fixed, and then the canbvas is on the body which should b relative?*/
/*3d zone*/
/*canvas{
width: 50%; 
height: 50%;
    /* can set bg colour here*/
    /*background-color: aqua;*/
    /*background-image: url("../imgs/cheers.gif")

}*/
/*on the body, three canvas fills this*/
#three_bg{
    position:relative;
    background-image: url("../imgs/grad_mild04.gif")
}
#three_home{
   /*background-image: url("../imgs/bg002.png"); */
    position:absolute;
    width: 1366px;
    height:768px;
    cursor:url("../imgs/cursor_dove.png"), auto;
}
/*
#draw_bg{
    position:relative;
}
#draw_container{
    position:absolute;
    width:100%;
        height:100%;
}

#draw_home{
   /*background-image: url("../imgs/bg002.png"); /*requires .. to find folder*/
    /* position:absolute;
    width: 1366px;
    height:768px;
    cursor:url("../imgs/cursor_dove.png"), auto;
}
*/

/* turn this guy on for edging? comment our pituon + fixed for popper #popper2{
    margin-top: -350px;
    margin-left: 510px;
    border-radius: 20px;
    padding:20px;
    position:fixed;
    background-color:#ffffff;
    box-shadow: 3px 4px 0px 0px #1084a1;
    visibility:hidden;
    opacity:95%;
}/*



/*CLASS ZONE*/
/*general button classes*/
.myButton {
	box-shadow: 3px 4px 0px 0px #1084a1;
	background:linear-gradient(to bottom, #f285d5 5%, #94dee8 100%);
	background-color:#f285d5;
	border-radius:18px;
	border:1px solid #0bbdbd;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:17px;
	padding:7px 25px;
	text-decoration:none;
	text-shadow:0px 1px 0px #810e05;
}
.myButton:hover {
	background:linear-gradient(to bottom, #94dee8 5%, #f285d5 100%);
	background-color:#94dee8;
}

.myButton:active {
	position:relative;
	top:1px;
}


/*menu things*/
/*idk why but this `ul won't center on main.css so pullin it over*/
ul{
    margin-left: -39px;
}

.menuList{
    font-size: 0.8em;
    cursor:pointer;
}