@charset "utf-8";
/* CSS Document */



body {
	background-image: url(images/background.jpg);
	background-size:200%;
	font-family:Arial, Helvetica, sans-serif;
	color:white;

}

#logo
{
	float:left;
}

nav {
	float:right;
	
	
	
}

.copyrightInfo {
	font-size:14px;
    
}

nav li {
	
    
    padding: 2px;
    margin: 0 3px;
    float: none;
	
	color:#FFFFFF;
	font-size:25px;
	
	 list-style-type: none;
	  display:inline-block;
	
	
}

nav a
{
	padding: 10px 5px;
	
	color:rgb(255,255,255);
	 
	text-decoration:none;
	font-style:italic;
}

nav a:hover
{
	text-decoration:underline;
}

article {
	padding-top:70px;
   
}

h1, h3 {

	color:white;
}

h4 {
	font-weight:normal;
}

p {
	
	width:70%;
	color:white;
}

/* About page */

#aboutImg
{
	

	width: 240px;
	height: 250px;
	border-radius: 50%;
	background-size:cover;
	
	padding:10px;
	
	
	

}

/* Shows page */
.showsImg
{
	width: 240px;
	height: 250px;
	border-radius: 50%;
	background-size:cover;
	margin-top:4px;
	padding:10px;
    text-align:center;
   
	
	
}

#showsArticle {
    
    text-align:center;
}


/* Shows section page */

#factfilemenu {
	max-width:100%;
	padding-bottom:20px;
	
	
}

#profileHead {
	
	font-size:50px;
}



/* Fact file homepage */

#factfilemenu {
	
	text-align:center;

	
}

#showsHead {
	
	
	text-align:center;
	width:100%;
}

.factfilemenuimg {
	
	padding:2px;

	
}

#profileImg {
	padding-top:20px;
	height:70%;
	float:right;
}

iframe {
	border:none;
	width:100%;
}

 /* Image zoom in hover ref link: https://codepen.io/wifeo/pen/qzwkb */
#profileImg:hover {
    
    
   
    z-index: 2;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.1);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.1);   
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.1);
    transition: all 200ms ease-in;
    transform: scale(1.1);

    
}

.profileStats {
	font-size:17px;
}

#profileInfo {
	padding-top:20px;
	font-size:25px;
	width:75%;
    padding-bottom:10px;
     /* Fade in animation ref link: http://jsfiddle.net/SO_AMK/VV2ek/ */
    animation: fadein 4s;
    -moz-animation: fadein 4s; /* Firefox */
    -webkit-animation: fadein 4s; /* Safari and Chrome */
    -o-animation: fadein 4s; /* Opera */
	
}

  /* Fade in animation keyframes ref link: http://jsfiddle.net/SO_AMK/VV2ek/ */

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}


#audioImg {
	width:10%;
	float:right;
	clear:right;
	padding-right:70px;
	
	text-align:center;
	
	
	
}


video {
	
	width:50%;
}

form {
	color:white;
}





button.collapse {
    background-color: #000000;
	font-size:20px;
    color: #FFFFFF;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
}


button.collapse.active, button.collapse:hover {
    background-color: #ddd;
	color:#000000;
}

input[type='submit'] {
	background: #000000;
	border: 1px solid #fff;
	color: #fff;
	padding: 10px 15px;
	cursor: pointer;
   
}

form {
    color:white;
    padding-bottom:20px;
}


div.panel {
    padding: 0 18px;
    
	width:90%;
    display: none;

}

.imageGallery {
    
    width:50%;
    
}



#profileTimeline {
    
    padding-top:20px;
    
    
}

.about {
	text-align:center;
	max-width:100%;

}

 /* Quiz page */

  
 
 /* Mobile */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 736px)
   {
	
	body {
		background-size:600%;
		height:100%;
		text-align:center;

	}
	
	#logo {
		width:75%;
		height:11%;
	}

	
	.hamburger {
		cursor:pointer;
		padding:15px;
		display:block;
		float:right;

	
		
	}
	
	.line {
		border-bottom:4px solid #ffffff;
		width:35px;
	
		margin-bottom:6px;
		
	}
	
	.line:last-child {
		margin-bottom:0;
		}
	
	nav li {
		width:100%;
		text-align:center;
		
	}
	
	.menu {
		display:none;
		
	}
	
	
	
	article {
		
		padding-top:70px;
		max-width:100%;
		
		
	}
	
	nav {
		padding-bottom:40px;
		float:right;}
		
		#aboutImg {
			float:none;
		}
		
		p {
			width:100%;
		}
		
		h1 {
			
			text-align:center;
		}
		
		/* Fact file homepage */

#factfilemenu {
	
	text-align:center;
	
}

.factfilemenuimg {
	
	
	width:100%;
	padding-bottom:50px;
	
}

#profileImg {
	width:90%;
	height:100%;
	float:none;
}

#profileInfo {
	
	text-align:center;
	width:100%;
	font-size:18px;
}

#audioImg {
	
	float:none;
	clear:none;
	width:50%;
	
	
}

.profileStats {
	font-size:13px;
	
}

button.collapse {
	width:100%;
	text-align:center;
	font-size:17px;
	
}

video {
	
	width:100%;
	height:100%;
}


div.panel {
	
	max-width:100%;
}

form {
	max-width:100%;
}

.about {
	text-align:center;
	

}
   }
	
	
/* Tablet */

@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
 {
	  
	  body {
	background-image: url(images/background.jpg);
	background-size:500%;
	max-width:100%;
	height:100%;

}

.factfilemenuimg {
	
	max-width:100%;
	height:60%;
}
	
	
	

#profileImg {
	width:60%;
	height:80%;
	
	float:none;
}

#profileInfo {
	
	text-align:center;
	width:100%;
	font-size:18px;
}

#audioImg {
	
	
	float:none;
	clear:none;
	width:50%;
	
	
	
	
}

.profileStats {
	width:100%;
	
}


div.panel {
	
	max-width:100%;
}

article {
	
	text-align:center;
	max-width:100%;
}

.copyrightInfo {
	
	text-align:center;
	width:100%;
}

video {
	width:100%;
	height:100%;
}

#about {
	text-align:center;
}


}