body {
	background-color: #FFF;
    margin:0;
}


 h1, h2 , h3, h4 {font-family: 'Playfair Display', serif;}
 
 h3 {text-align: left;}
 
a{text-decoration:none;}
a:hover {text-decoration:underline;}

a[href^=tel] {
    color: inherit;
    text-decoration: none;
}


hr {height:1px; border:0; border-top:1px solid #ccc; margin:5px 0; padding:0; }

p, div, li {font-family: 'Open Sans', sans-serif;}



table {width: 90%;}

 #main {width: 100%;}

 
 #main p {text-align:justify;}
 


.top-name {display: inline-block; float:left;}
	
	
	.top-name a {
	font-family: 'Open Sans', sans-serif;
	color: #333;
    text-decoration: none;
	text-align:left;
    font-size: 18px;
    color: #333;
    transition: 0.3s;
	}

.icon {display: none;}

	
  ul.topnav {
  width: 90%;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #FFF;
  padding-right:20px;
}


ul.topnav li.menu-item {
  display: block;
  width: 100%;
  margin: 0 3% 0 0;
  padding: 14px 0;
  transition: 0.3s;
  margin-right:10px;

}


ul.topnav li.menu-item a {
    font-weight: normal;
    font-family: 'Open Sans', sans-serif;
    text-decoration: none;
	text-align:left;
    font-size: 18px;
    color: #333;	
}


ul.topnav li.contact  {
	font-family: 'Open Sans', sans-serif;
    text-decoration: none;
    font-size: 16px;
	line-height: 1.8;
	color:#777
            
}


ul.topnav li.social {
   display: inline-block;
   width: 10%;
   padding-right: 14px;
	
}

.top-right-heading {margin-top: 50px; margin-right:5px;}


.container{margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px;}


#blog-landing {
position: relative;
max-width: 100%;
width: 100%;
}
#blog-landing img {
width: 100%;
max-width: 100%;
height: auto;
}
.white-panel {
position: absolute;
background: white;
padding: 10px;
}



#content ul {list-style-position: outside; padding-left: 1.5em; text-indent: -1.5em;}

	#content li {list-style-position: inside; text-align:left; }


.pagination {margin: auto;}

.pagination a {
	color: black;
    padding: 8px 16px;
	border-radius: 5px;
    text-decoration: none;
    transition: background-color .3s;
}

.pagination a.active {
    background-color: #c0392b;
    color: white;
	border-radius: 5px;
}

.pagination a.arrow {
    color: #c0392b;
	
}

.pagination a:hover:not(.active) {background-color: #ddd;}

.footer {border-top: 1px #ccc solid;}

/* video */

 .video-container {
	position:relative;
	width:80%;
	border:0;
	padding-bottom:36.25%;
	padding-top:30px;
	height:0;
	overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}



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

	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	tr {}
	
	td { 
		/* Behave  like a "row" */
		width:95%;
		border: none;
		position: relative;
		text-align: center;
		padding:10px;
		 
	}
	
	td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	
	/* Side Navigation */
	
	.menu {padding: 0 10px;}
 
	
	ul.topnav:first-child {padding: 0; margin:0}
	
  ul.topnav li.menu-item,  ul.topnav li.contact {display: none;}
  ul.topnav li.social {display:none;}
  
h1 {font-size: 1.3em;}

.top-name {display:table-cell;}

.icon {
    float: right;
    display: table-cell;
	margin-top: 0.2em;
	text-decoration: none;
	font-size: 28px;
    color: #333;
    transition: 0.3s;
	padding-left:5px;
  }

  
	
 ul.topnav.responsive {position: relative; padding: 0;}

  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
	
  }
  
ul.topnav.responsive li.contact { 
	display: block;
    text-align: left;
   }
	
	
	ul.topnav.responsive li.social a { 
	float:left;
	display: inline-block;
    padding:18px;
   }
	
	
	.top-right-heading {display:none;}


	.container{width:95%}

  .layout { 
		/* Behave  like a "row" */
		display:block;
		width:95%;
		border: none;
		position: relative;
		text-align: center;
		padding:10px;
		 
	}
	
	
	.layout img {width:100%; height:auto;}
	
	
	.artist-photo {width:100%; height: auto;}
	
	.footer {display:none;}
	.footer-text {display:none;} 
	
	.video-container {
	width:95%;
	padding-bottom:46.25%;
}
}