/* small screen, mobile phones*/
@media only screen and (orientation: portrait) {
	
.big {
    font-family: 'palanquin_darkmedium', Arial, sans-serif;
    font-weight: normal;
    font-style: normal;
    text-align: center;
	color: White;
	opacity: .8;
	padding-top: 80px;
	font-size: 36px;
	z-index: 2;
	padding-left:10px;
	padding-right: 10px;
}

#typewrite {
    font-family: 'palanquin_darkmedium', Arial, sans-serif;
    font-weight: normal;
    font-style: normal;
    text-align: center;
	font-size: 20px; /*responsive narrow*/
	color: White;
	margin-left: auto;
	margin-right: auto;
	margin-top: 100px;
	padding-bottom: 50px;
	padding-left: 10px;
	padding-right: 10px;
	z-index: 2;
	opacity: .9;

}



#reveal-gallery {
	top: 100px;
    font-family: 'palanquinregular', Arial, sans-serif;
    font-weight: normal;
    font-style: normal;
    text-align: center;
	font-size: 20px; /*responsive wide*/
	color: #1a2a3f;
	margin-left: auto;
	margin-right: auto;
	display: block;
	width: 100%;

}

/*image gallery items*/
.row-title{
	font-family: 'palanquin_darkmedium', Arial, sans-serif;
    font-weight: normal;
    font-style: normal;
    text-align: left;
	font-size: 20px;
	color: #d4d6cd;
	border-bottom: 5px solid #edefea;
	height: 40px;
	margin-bottom: 20px;
	margin-top: 10px;
	padding-left: 10px;
	display: inline-block;
	width: 100%;
	float: left;

}

/* The grid: Four equal columns that float next to each other */
.column {
	  float: left;
}

.gallery-item {
  float: left;
  width: 90%;
  margin-bottom: 10px;
}

.mural-thumbnail {
	width: 90%;
	height: 200px;
	padding: 10px;
	text-align: center;
	 background-image: url("images/ArtWork/Mural/mural-thumb.jpg"); 
  	background-repeat: no-repeat;
}

.overlay{
  float: left;
  width: 90%;
  left: 20px;
  color: #aaada5;
  background: #edefea;
  margin: 0;
  text-align: left;
  padding-left: 10px;
  text-decoration: underline;
  font-size: 16px;
}

.overlay-container{
	  position: relative;

}



/* Expanding image text */
#imgtext {
  position: absolute;
  bottom: 15px;
  left: 15px;
  color: white;
  font-size: 20px;
}

/* Closable button inside the image */
.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
}



.largescreen{
	display: none;
}

.scoot-down{

}

/* clock*/
#clock{

		width: 100%;
		position: absolute;
		opacity: .5;
}
svg {
  width: 90%;
  fill: None;
  stroke: white;
  stroke-width: 1;
  stroke-linecap: square;

	margin-left: auto;
	margin-right: auto;
	display: block;
  
}

.seconds {
background: White;
  height: 40%;
  position: absolute;
  top: 5%;
  transform-origin: 50% 100%;
  left: 49.9%;
  width: .2%;
  z-index: 8;
  transform: rotateZ(15deg);
  -webkit-transform: rotateZ(15deg);
}
	

#intro-home {
  background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ),url("images/seeds.gif"); 
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  padding-bottom: 20px;
  position: relative;
}

#intro-ghana {
  background-image: url("images/Ghana/Ghana-intro.jpg"); 
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
    padding-bottom: 20px;
	  position: relative;

}

#intro-artworks {
  background-image: url("images/ArtWorks/ArtWorks-intro.jpg"); 
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
    padding-bottom: 20px;
	  position: relative;

}

#intro-highschool {
  background-image: url("images/HighSchool/HighSchool-intro.jpg"); 
  background-repeat: no-repeat;
  background-size: 150%;
  background-position: center;
    padding-bottom: 20px;
	  position: relative;

}

#intro-mywork {
  background-image: url("images/mywork.jpg"); 
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
    padding-bottom: 20px;
	  position: relative;

}

#intro-mural2020 {
  background-image: url("images/mural2020.jpg"); 
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
    padding-bottom: 20px;
	  position: relative;

}

#intro-experience {
  background-image: url("images/experience-intro.jpg"); 
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  padding-bottom: 20px;
  position: relative;
	 
}



.centerannounce {
	font-family: 'palanquin_darkmedium', Arial, sans-serif;
    font-weight: normal;
    font-style: normal;
    text-align: center;
	font-size: 24px;
	color: #afb7a7;
	display: block;
	padding-top: 0;
	padding-bottom: 10px;
}

.announce {
	font-family: 'palanquin_darkmedium', Arial, sans-serif;
    font-weight: normal;
    font-style: normal;
    text-align: left;
	font-size: 24px;
	color: #afb7a7;
	display: inline-block;
	margin-bottom: 30px;
	padding-right: 30px;
	padding-top: 30px;
}

.name {
	font-family: 'palanquin_darkmedium', Arial, sans-serif;
    font-weight: normal;
    font-style: normal;
    text-align: left;
	font-size: 24px;
	color: #afb7a7;
	margin-bottom: 50px;

}



.centerdescribe {
	font-family: 'palanquinregular', Arial, sans-serif;
    font-weight: normal;
    font-style: normal;
    text-align: center;
	font-size: 20px;
	color: #484e4f;
	line-height: 30px;
}

.describe {
	font-family: 'palanquinregular', Arial, sans-serif;
    font-weight: normal;
    font-style: normal;
    text-align: left;
	font-size: 20px;
	color: #92938f;
	padding-right: 10px;
	line-height: 1.5;
}

.centerdetail {
	font-family: 'palanquinregular', Arial, sans-serif;
    text-align: center;
	font-weight: normal;
    font-style: normal;
	font-size: 16px;
	color: #696d67;
	padding-right: 10px;
	line-height: 1.4;
	margin-bottom: 20px;
}

.detail {
	font-family: 'palanquinregular', Arial, sans-serif;
    font-weight: normal;
    font-style: normal;
    text-align: left;
	font-size: 16px;
	color: #696d67;
	padding-right: 10px;
	line-height: 1.4;
}

.mediumtitle {
	font-family: 'palanquin_darkmedium', Arial, sans-serif;
	font-size: 18px;
	color: #9daa92;
}

.medium {
	font-family: 'palanquinregular', Arial, sans-serif;
	font-size: 16px;
	color: #9daa92;
}

.detailtitle {
	font-family: 'palanquinmedium', Arial, sans-serif;
	font-size: 20px;
	color: #696d67;
}

.bold{
	font-family: 'palanquinmedium', Arial, sans-serif; 
}

.centerbuttonsdiv{
 width: 150px;
 margin: auto;
	}
	
	.inline-button {
	background-color: #edefea; 
	color: #b7bfac;
    height: 150px;
    font-size: 20px;
    font-family: palanquinmedium;
    width: 150px;
    font-weight: normal;
    border: none;
    cursor: pointer;
    padding: .5vw;
	opacity: 0.8;
	float: left;
	margin-bottom: 20px;
}

.sidenav-top,.sidenav-bottom{position:fixed;width:100%;z-index:1}.sidenav-top{top:0}.sidenav-bottom{bottom:0}
.sidenav-sidebar{height:100%;background-color:#fff;position:fixed!important;z-index:1;overflow:auto}
.sidenav-bar-block .sidenav-dropdown-hover,.sidenav-bar-block .sidenav-dropdown-click{width:100%}
.sidenav-bar-block .sidenav-dropdown-hover .sidenav-dropdown-content,.sidenav-bar-block .sidenav-dropdown-click .sidenav-dropdown-content{min-width:100%}

.sidenav-bar{width:100%;overflow:hidden}.sidenav-center .sidenav-bar{display:inline-block;}
.sidenav-bar-item{pasidenaving:8px 16px;float:left;width:100%!important;border:none;display:block;outline:0;text-align:center;}
.sidenav-bar .sidenav-dropdown-hover,.sidenav-bar .sidenav-dropdown-click{position:static;float:left}
.sidenav-bar .sidenav-button{white-space:normal; z-index: 4;}
.sidenav-black,.sidenav-hover-black:hover{color:#fff!important;background-color:#000!important}
.sidenav-white,.sidenav-hover-white:hover{color:#000!important;background-color:#fff!important}
.sidenav-text-grey,.sidenav-hover-text-grey:hover,.sidenav-text-gray,.sidenav-hover-text-gray:hover{color:#757575!important}
.sidenav-animate-right{position:relative;animation:animateright 0.4s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
.sidenav-xxlarge{font-size:36px!important}.sidenav-xxxlarge{font-size:48px!important}.sidenav-jumbo{font-size:64px!important}
.sidenav-button:hover{color:#000!important;background-color:#ccc!important}
.sidenav-button{font-size:30px; 	font-family: 'palanquinmedium', Arial, sans-serif;  border:none;display:block;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap}
.sidenav-xxxlarge{font-size:48px!important}.sidenav-jumbo{font-size:64px!important}
.sidenav-display-topright{position:absolute;right:0;top:0}

#fader{
	font-size: 20px;
	font-family: 'palanquinmedium', Arial, sans-serif;
    font-weight: normal;
    font-style: normal;
	color: #d1e0a1;
	text-align: center;
	margin-top: 10px;
	display: block;
	width: 100%;
	height: 40px;
	padding-left: 10px;
	padding-right: 10px;
}

#content-window {
	min-width: 100vw;
	min-height: 100vh;
	padding-top: 50px;
	padding-right: 10px;
	padding-left: 10px;
	margin-bottom: 100px;
}
.content-reveal {
	margin-bottom: 400px!important;
	display: inline-block;
}

.floatingimage-left {
	width: 100%!important;
	display: inline-block;
	position: relative;
	margin-bottom: 10px;
	float: left!important;
	clear: both;
}

.floatingimage-right {
	width: 100%!important;
	display: inline-block;
	position: relative;
	float: left!important; /*this is for phones, so actually no floating right*/
	margin-bottom: 10px;
	clear: both;

}

.homeslider {
 




}

.slidetext{
	font-family: 'palanquinregular', Arial, sans-serif;
    font-weight: normal;
    font-style: normal;
    text-align: left;
	font-size: 20px;
	color: #92938f;
	padding-left:10px;
	padding-right: 10px;
	line-height: 1.5;
	margin-bottom: 20px;
}

.slide1,.slide2{
	display: inline-block;
	position: absolute;
	width: 95%;
	margin-bottom: 50px;
	box-sizing: border-box;

}

.full-width-pic {
	width: 100%;
}
}

/* END PHONES PORTRAIT MODE*/