html {
  position: fixed;
  height: 100%;
  width: 100%;
}

body {
font-family: "Typonine Sans Regular";
}

ul{
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  padding-left: 30px;
  padding-bottom : 0;
}

#title {
width: 100%;
height:90px;
background-color:white;
position: absolute;
right: 0px;
top: 0px;

}

#locationstuff {
width: 250px;
height:90px;
background-color:white;
position: absolute;
right: 0px;
top: 30px;
font-size: 12px;
}

#bottommenu {
width: 100%;
height:40px;
background-color:#C0C0C0;
position: absolute;
right: 0px;
bottom: 0px;
border-top: 2px solid black;
display: flex;
justify-content: space-between;
padding-top: 5px;
}


#main {
width: 100%;
height:85%;
align-content: stretch;
background-color:#F5F5F5;
position: absolute;
top: 92px;
left: 0px;
margin: 0px 0px 0px 0px;
overflow-y: scroll;
padding-top: 10px;
padding-bottom: 10px;
}

#spotlightbox {
	border-radius: 25px;
	border: 2px solid #C0C0C0;
  padding: 20px; 
width: 655px;
height: 2050px;
background-color:white;
position: relative;
float: left;
margin-left:10px;
margin-bottom: 10px;
}

#contactcard {
	border-radius: 25px;
	border: 2px solid #C0C0C0;
  padding: 20px; 
width: 315px;
height: 800px;
background-color:white;
position: relative;
float: left;
margin-left:10px;
margin-bottom: 10px;
}

#me {
	border-radius: 25px;
	border: 2px solid #C0C0C0;
  padding: 20px; 
width: 95%;
height: 3200px;
background-color:white;
position: relative;
float: left;
margin-left:10px;
margin-bottom: 10px;
}

#ariatext {
	border-radius: 25px;
	border: 2px solid #C0C0C0;
  padding: 20px; 
width: 95%;
height: 3200px;
background-color:white;
position: relative;
float: left;
margin-left:10px;
margin-bottom: 10px;
}

#stockbody {
	border-radius: 25px;
	border: 2px solid #C0C0C0;
  padding: 20px; 
width: 95%;
height: 3200px;
background-color:white;
position: relative;
float: left;
margin-left:10px;
margin-bottom: 10px;
}

#motionbody {
	border-radius: 25px;
	border: 2px solid #C0C0C0;
  padding: 20px; 
width: 95%;
height: 3200px;
background-color:white;
position: relative;
float: left;
margin-left:10px;
margin-bottom: 10px;
}

#mombody {
	border-radius: 25px;
	border: 2px solid #C0C0C0;
  padding: 20px; 
width: 95%;
height: 3200px;
background-color:white;
position: relative;
float: left;
margin-left:10px;
margin-bottom: 10px;
}

#instagramtext {
	border-radius: 25px;
	border: 2px solid #C0C0C0;
  padding: 20px; 
width: 95%;
background-color:white;
position: relative;
float: left;
margin-left:10px;
margin-bottom: 10px;
}

#artemistext {
	border-radius: 25px;
	border: 2px solid #C0C0C0;
  padding: 20px; 
width: 95%;
background-color:white;
position: relative;
float: left;
margin-left:10px;
margin-bottom: 10px;
}

#instagrambody {
	border-radius: 25px;
	border: 2px solid #C0C0C0;
  padding: 20px; 
width: 95%;
height: 3800px;
background-color:white;
position: relative;
float: left;
margin-left:10px;
margin-bottom: 10px;
}


#spotlightvideo {
width: 655px;
height: 375px;
float: left;
left: 15px;
top: 10px;
}

#spotlighttext {
width: 655px;
height:375px;
float: left;
left: 15px;
top: 390px;

}

#dwaynemessage {
	border-radius: 25px;
	border: 2px solid #C0C0C0;
  padding: 20px; 
width: 350px;
height: 800px;
background-color:white;
position: relative;
float: left;
padding-left: 40px;
margin-left: 10px;
}

#video1, #video2, #video3, #video4 {
	border-radius: 25px;
	border: 2px solid #C0C0C0;
  padding: 20px; 
height: 176px;
background-color:white;
position: relative;
float: left;
padding-left: 20px;
margin-left: 10px;
margin-bottom: 10px;
}

#artemisbody1 {
	border-radius: 25px;
	border: 2px solid #C0C0C0;
  padding: 20px; 
width: 300px;
background-color:white;
position: relative;
float: left;
padding-left: 20px;
margin-left: 10px;
margin-bottom: 10px;
}

#artemisbody2 {
	border-radius: 25px;
	border: 2px solid #C0C0C0;
  padding: 20px; 
width: 300px;
background-color:white;
position: relative;
float: left;
padding-left: 20px;
margin-left: 10px;
margin-bottom: 10px;
}

#artemisbody3 {
	border-radius: 25px;
	border: 2px solid #C0C0C0;
  padding: 20px; 
width: 300px;
background-color:white;
position: relative;
float: left;
padding-left: 20px;
margin-left: 10px;
margin-bottom: 10px;
}

#artemisbody4 {
	border-radius: 25px;
	border: 2px solid #C0C0C0;
  padding: 20px; 
width: 300px;
background-color:white;
position: relative;
float: left;
padding-left: 20px;
margin-left: 10px;
margin-bottom: 10px;
}

#artemisbody5 {
	border-radius: 25px;
	border: 2px solid #C0C0C0;
  padding: 20px; 
width: 300px;
background-color:white;
position: relative;
float: left;
padding-left: 20px;
margin-left: 10px;
margin-bottom: 10px;
}

#artemisbody6 {
	border-radius: 25px;
	border: 2px solid #C0C0C0;
  padding: 20px; 
width: 300px;
background-color:white;
position: relative;
float: left;
padding-left: 20px;
margin-left: 10px;
margin-bottom: 10px;
}

#artemisbody7 {
	border-radius: 25px;
	border: 2px solid #C0C0C0;
  padding: 20px; 
width: 300px;
background-color:white;
position: relative;
float: left;
padding-left: 20px;
margin-left: 10px;
margin-bottom: 10px;
}

#artemisbody8 {
	border-radius: 25px;
	border: 2px solid #C0C0C0;
  padding: 20px; 
width: 300px;
background-color:white;
position: relative;
float: left;
padding-left: 20px;
margin-left: 10px;
margin-bottom: 10px;
}


#artemisbody9 {
	border-radius: 25px;
	border: 2px solid #C0C0C0;
  padding: 20px; 
width: 300px;
background-color:white;
position: relative;
float: left;
padding-left: 20px;
margin-left: 10px;
margin-bottom: 10px;
}


#artemisbody10 {
	border-radius: 25px;
	border: 2px solid #C0C0C0;
  padding: 20px; 
width: 300px;
background-color:white;
position: relative;
float: left;
padding-left: 20px;
margin-left: 10px;
margin-bottom: 10px;
}

#appstext {
	border-radius: 25px;
	border: 2px solid #C0C0C0;
  padding: 20px; 
width: 95%;
background-color:white;
position: relative;
float: left;
padding-left: 20px;
margin-left: 10px;
margin-bottom: 10px;
}

#print {
    border-radius: 25px;
    border: 2px solid #C0C0C0;
  padding: 20px;
width: 120px;
background-color:white;
position: relative;
float: left;
padding-left: 20px;
margin-left: 10px;
margin-bottom: 10px;
height: 350px;
}

#castleprint {
    border-radius: 25px;
    border: 2px solid #C0C0C0;
  padding: 20px;
width: 292px;
background-color:white;
position: relative;
float: left;
padding-left: 20px;
margin-left: 10px;
margin-bottom: 10px;
height: 700px;
}


#app1, #app2,#app3,#app4,#app5,#app6,#app7,#app8,#app9,#app10 {
	border-radius: 25px;
	border: 2px solid #C0C0C0;
  padding: 20px; 
width: 120px;
background-color:white;
position: relative;
float: left;
padding-left: 20px;
margin-left: 10px;
margin-bottom: 10px;
height: 300px;
}

#expeditionbox {
	border-radius: 25px;
	border: 2px solid #C0C0C0;
  padding: 20px; 
width: 40px;
background-color:white;
position: relative;
float: left;
padding-left: 20px;
margin-left: 10px;
height: 40px;
}


#campthing{
    border-radius: 25px;
    border: 2px solid #C0C0C0;
width: 170px;
background-color:white;
position: relative;
float: left;
margin-left: 10px;
margin-bottom: 10px;
padding-bottom: 10px;
height: 220px;
font-size: 12px;
}

#needsindex, #camp1index, #camp2index, #projindex{
    border-radius: 25px;
    border: 2px solid #C0C0C0;
  padding: 20px;
width: 100px;
background-color:white;
position: relative;
float: left;
margin-left: 10px;
margin-bottom: 10px;
height: 300px;
}

#needs, #camp1, #camp2, #camp3, #proj, #proj1, #proj2, #proj3, #proj4, #proj5, #proj6, #proj7, #proj8{
	border-radius: 25px;
	border: 2px solid #C0C0C0;
  padding: 20px; 
width: 120px;
background-color:white;
position: relative;
float: left;
padding-left: 20px;
margin-left: 10px;
margin-bottom: 10px;
height: 300px;
}

#Apps{
padding-bottom: 10px;
margin-bottom: 200px;
}

#animationtext {
	border-radius: 25px;
	border: 2px solid #C0C0C0;
  padding: 20px; 
width: 95%;
background-color:white;
position: relative;
float: left;
padding-left: 20px;
margin-left: 10px;
margin-bottom: 10px;
}

#projecttext {
	border-radius: 25px;
	border: 2px solid #C0C0C0;
  padding: 20px; 
width: 95%;
background-color:white;
position: relative;
float: left;
padding-left: 20px;
margin-left: 10px;
margin-bottom: 10px;
}


#stocktext {
	border-radius: 25px;
	border: 2px solid #C0C0C0;
  padding: 20px; 
width: 95%;
background-color:white;
position: relative;
float: left;
padding-left: 20px;
margin-left: 10px;
margin-bottom: 10px;
}

#motiontext {
	border-radius: 25px;
	border: 2px solid #C0C0C0;
  padding: 20px; 
width: 95%;
background-color:white;
position: relative;
float: left;
padding-left: 20px;
margin-left: 10px;
margin-bottom: 10px;
}

#momtext {
	border-radius: 25px;
	border: 2px solid #C0C0C0;
  padding: 20px; 
width: 95%;
background-color:white;
position: relative;
float: left;
padding-left: 20px;
margin-left: 10px;
margin-bottom: 10px;
}

#followdiv {
    position: absolute;
    top: 0;
    right: 0;
    width: 250px;	
    
}

ul, ol {  //THERE MAY BE OTHER ELEMENTS IN THE LIST
    margin:0;
    padding:5px;
}

#mobiletitle{
    display:none;
}


.container {
  width: 315px;
  height: 400px;
  position: relative;
  -webkit-perspective: 800px;  
  perspective: 800px;
}

#card {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: 1s;  
  transition: transform 1s;
}

#card figure {
  margin: 0;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
 -webkit-backface-visibility: hidden;  
  backface-visibility: hidden;  
}

#card .front {
  background: white;
}

#card .back {
  background: #F5F5F5;
  -webkit-transform: rotateY(180deg);
  transform: rotateY( 180deg);
}

#card.flipped {
 -webkit-transform: rotateY(180deg);	
  transform: rotateY( 180deg);
}


/* TABLET IPAD*/
@media only screen and (max-width: 834px) and (orientation:portrait){
	
  #title {
     background-color:white;
  }
  #title {
    height: 35px;
    font-size: 18px;  
  }
  #me {
    width : 80%;
    height : 4500px;  
  }  
  #ariatext {
    width : 80%;
    height : 4500px;  
  }  
  #options{
    position: absolute;
    top: 550px;  
  }
  #main {
  	top: 92px;
  	width: 100%;
  	-webkit-overflow-scrolling: touch;
  }
  #spotlightbox {
    width: 315px;
    height: 1500px;
  }
  #spotlightvideo {
    width: 315px;
    height: 190px;
  } 
  #spotlighttext { 
    width: 315px;
    height: 190px;
    top: 205px;
  }
  #dwaynemessage {
	border-radius: 25px;
	border: 2px solid #C0C0C0;
   padding: 20px; 
   width: 315px;
   height: 800px;
  }
#animationtext {
	width: 700px;
  }
  #projecttext {
	width: 700px;
  }
  #stocktext {
	width: 700px;
  }
  #stockbody {
	width: 700px;
  }
  #instagramtext {
	width: 700px;
  }
  #instagrambody {
	width: 700px;
	word-wrap: break-word;
	height:5000px;
  }
  
  #motiontext {
	width: 700px;
  }
  #motionbody {
	width: 700px;
	word-wrap: break-word;
	height:5000px;
  }
  #momtext {
	width: 700px;
  }
  #mombody {
	width: 700px;
	word-wrap: break-word;
	height:5000px;
  }
  #artemistext {
	width: 700px;
  }
#appstext {
	width: 700px;
  }
} 
    
 /*TABLET IPAD  LANDSCAPE*/   
@media only screen and (max-width: 1112px) and (orientation:landscape){
  #title {
     background-color:white;
  }
  #options{
    position: absolute;
    top: 550px;  
  }
  #me {
    width : 80%;
    height : 4500px;  
  }  
  #ariatext {
    width : 80%;
    height : 4500px;  
  }  
  #main {
  	top: 92px;
  	width: 100%;
  	height: 100%;
  	-webkit-overflow-scrolling: touch;
  }
  #spotlightbox {
    width: 500px;
    height: 1500px;
    padding-bottom: 10px;
    margin-bottom: 200px;
  }
  #spotlightvideo {
    width: 500px;
    height: 250px;
  } 
  #spotlighttext { 
    width: 500px;
    height: 190px;
    top: 265px;
  }
  #dwaynemessage {
	border-radius: 25px;
	border: 2px solid #C0C0C0;
   padding: 20px; 
   width: 270px;
   height: 900px;
  }

#animationtext {
	width: 900px;
  }
  #projecttext {
	width: 900px;
  }
  #stocktext {
	width: 900px;
  }
  #stockbody {
	width: 900px;
  }
  #instagramtext {
	width: 900px;
  }
  #instagrambody {
	width: 900px;
	word-wrap: break-word;
	height: 5000px;
  }
  
  #motiontext {
	width: 900px;
  }
  #motionbody {
	width: 900px;
	word-wrap: break-word;
	height: 5000px;
  }
  
  #momtext {
	width: 900px;
  }
  #mombody {
	width: 900px;
	word-wrap: break-word;
	height: 5000px;
  }
  #artemistext {
	width: 900px;
  }
#appstext {
	width: 900px;
  }
#Apps{
	width: 1000px;
  height:900px;
  padding-bottom: 10px;
    margin-bottom: 200px;
}  
}     


/* PHONE IPHONE8 */
/*ORDER MATTERS. Has to come last after web and Tablet*/
@media only screen and (max-width: 900px) and (orientation:portrait){
 select,
  textarea,
  input {
    font-size: initial;
  }  
  #options{
    position: absolute;
    top: 550px;  
  }
  #me {
    width : 80%;
    height : 9000px;  
  }  
  #ariatext {
    width : 80%;
    height : 9000px;  
  }  
  #title {
     background-color:white;
  }
  #followdiv {
    display:block;
  }
  #mainimage {
    display:none;
 }
 #expeditionbox {
    display:none;
 } 
  #mobiletitle {
    display:block;
    
  } 
  #locationstuff {
    display:none;
  }
  #title {
    height: 35px;
    font-size: 18px;  
  }
  #main {
  	top: 35px;
  	width: 100%;
  	-webkit-overflow-scrolling: touch;
  }
  #spotlightbox {
    width: 315px;
    height: 1200px;
  }
  #spotlightvideo {
    width: 315px;
    height: 190px;
  } 
  #spotlighttext { 
    width: 315px;
    height: 190px;
    top: 205px;
  }
  #dwaynemessage {
	border-radius: 25px;
	border: 2px solid #C0C0C0;
   padding: 20px; 
   width: 315px;
   height: 800px;
  }
#animationtext {
	width: 315px;
  }
  
#projecttext {
	width: 315px;
  }
  #stocktext {
	width: 315px;
  }
  #stockbody {
	width: 315px;
	height : 5000px;
  }
  
  #instagramtext {
	width: 315px;
  }
  #instagrambody {
	width: 315px;
		height:5000px;
	word-wrap: break-word;
  }
  
  #motiontext {
	width: 315px;
  }
  #motionbody {
	width: 315px;
		height:5000px;
	word-wrap: break-word;
  }
  
  #momtext {
	width: 315px;
  }
  #mombody {
	width: 315px;
		height:5000px;
	word-wrap: break-word;
  }
  #artemistext {
	width: 315px;
  }
#appstext {
	width: 315px;
  }
  p {
      
  }
} 
    
/* PHONE IPHONE8  LANDSCAPE*/    
@media only screen and (max-width: 812px) and (orientation:landscape){
 select,
  textarea,
  input {
    font-size: initial;
  }
  body 
  {
  	-webkit-text-size-adjust: none;
  	}  
  	#options{
    position: absolute;
    top: 550px;  
  }
  #me {
    width : 80%;
    height : 5500px;  
  }  
  #ariatext {
    width : 80%;
    height : 5500px;  
  }  
  #title {
     background-color:white;
  }
  #followdiv {
    display:block;
  }
  #mainimage {
    display:none;
 } 
 #expeditionbox {
    display:none;
 } 
  #mobiletitle {
    display:block;
    
  } 
  #locationstuff {
    display:none;
  }
  #title {
    height: 35px;
    font-size: 18px;  
  }
  #main {
  	top: 85px;
  	width: 100%;
  	height: 100%;
  	-webkit-overflow-scrolling: touch;
  }
  #spotlightbox {
    width: 270px;
    height: 1300px;
    padding-bottom: 10px;
    margin-bottom: 200px;
  }
  #spotlightvideo {
    width: 270px;
    height: 190px;
  } 
  #spotlighttext { 
    width: 270px;
    height: 190px;
    top: 205px;
  }
  #dwaynemessage {
	border-radius: 25px;
	border: 2px solid #C0C0C0;
   padding: 20px; 
   width: 270px;
   height: 900px;
  }
  #bottommenu {
    left: 0px;  
    top: 35px;
  }

#animationtext {
	width: 600px;
  }
  
  
#projecttext {
	width: 600px;
  }
  #stocktext {
	width: 600px;
  }
  #stockbody {
	width: 600px;
  }
  #instagramtext {
	width: 600px;
  }
  #instagrambody {
	width: 600px;
	height:5000px;
	word-wrap: break-word;
  }
  
  #motiontext {
	width: 600px;
  }
  #motionbody {
	width: 600px;
	height:5000px;
	word-wrap: break-word;
  }
  
  #momtext {
	width: 600px;
  }
  #mombody {
	width: 600px;
	height:5000px;
	word-wrap: break-word;
  }
  #artemistext {
	width: 600px;
  }
#appstext {
	height: 100px;
	width: 600px;
	font-size: 16px;
	padding-top : 0px;
  }
#Apps{
	width: 270px;
  height:900px;
  padding-bottom: 10px;
    margin-bottom: 200px;
}  
#videos {
	    width: 270px;
    height: 900px;
  padding-bottom: 10px;
    margin-bottom: 200px; 
}

}