/*
Theme Name: VainGloriousUK
Author: Advertise1
Author URI: https://advertise1.uk
Description: The new 2023 website for VainGloriousUK
Version: 1.0
*/

@font-face {
  font-family: CenturyGothic;
  src: url(/wp-content/themes/vaingloriousuk/fonts/CenturyGothic.woff);
}

html, #artists, #reading, #read, #listen, #watch {
	scroll-behavior: smooth;
	scroll-margin-top: 120px;
}

body,h1,h2,h3,h4,h5,h6,p,a,span {
	font-family: 'CenturyGothic', sans-serif;
}

body {
	background-color: #eee;
}

a {
	color:inherit;
}

a:hover {
	color:inherit;
	text-decoration:none;
}

/* Header */

.header {
    background-color: #dddddd;
    color: #feff35;
	padding: 10px 0;
	width:100%;
	top:0px;
	z-index:1;
}

.header a {
    color: #000000;
   -webkit-transition: all 200ms ease-out;
   -moz-transition: all 200ms ease-out;
   -o-transition: all 200ms ease-out;
   -ms-transition: all 200ms ease-out;
   transition: all 200ms ease-out;
}

.header a:hover {
	text-decoration:none;
    -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);
}

.header i, .header img {
	padding-left:5px;
	padding-right:5px;
	color:#feff35;
	background-color:#000000;
	padding-top:5px;
	padding-bottom:5px;
	border-radius:5px;
}

.logocontainer {
	width:100%;
	margin-left:auto;
	margin-right:auto;
}

.headerlogo {
	width:100%;
	max-width:150px;
	margin:0;
}

.contactcontainer {
	padding-top:2px;
}

.socialicons i {
    margin-right: 15px;
    margin-top: 15px;
    margin-bottom: 5px;
    font-size: 24pt;
}

.maincontent {

}

.menu a {
    font-size: 16px;
}

.menu ul {
    padding-left: 0;
    padding-right: 0;
}

a.slicknav_btn {
    border: 1px solid #feff35;
}

.slicknav_menu {
  display: block;
  text-align: center;
  width: 100%;
}
.slicknav_btn {
  display: inline-block;
  float: none;
  text-align: center;
  position: absolute;
  top: 0;
  right: 0;
  margin-top: -60px;
  margin-right:25px;
}

.slicknav_nav ul {
	margin:0px;
}

/* Sections */

section {
    padding:15px;
}

section p, 
section ul, 
section li,
section a {
    font-size: 16px;
	font-family: 'Open Sans', sans-serif;
	color:#444;
}

.section1 {
	background-position: center center;
	background-size: cover;
	background-attachment: fixed;
    background-repeat: no-repeat;
}

.showcasecontainer {
	padding-bottom:30px;
}

.showcaseimage {
	width: 100%;
	height:100%;
	border-radius:10px;
	max-width:300px;
	margin-left:auto;
	margin-right:auto;
	display:block;
	-webkit-transition: all 200ms ease-out;
   -moz-transition: all 200ms ease-out;
   -o-transition: all 200ms ease-out;
   -ms-transition: all 200ms ease-out;
   transition: all 200ms ease-out;
}

.showcaseimage:hover {
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.025);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.025);   
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.025);
    transition: all 200ms ease-in;
    transform: scale(1.025);
}

.showcaseborder {
		border:1px solid #696969;
}

.whatdowedo {
	padding:15px;
}

.section3 {

}

.sectionmap {
	padding:0;
}

/* Footer */

.footer {
    background-color: #1f1a17;
    color: #feff35;
	padding: 10px 0 20px 0;
	width:100%;
}

.footer a {
    color: #feff35;
}

.footer a:hover {
	text-decoration:none;
}

.footertel, .footeremail {
    font-size: 10pt;
}

.openingtimes p{
	margin:0px;
	font-size:14px;
	
}

.disclaimer, .terms {
	margin-top:10px;
}

.copyright {
    font-size: 12px;
}

/* Mobile Queries */

@media screen and (max-width: 767px) {
	#navcontainer {
		
	}
	.disclaimer, .terms {
		text-align:center;
	}
	.contactheader, .headersocialicons{
		
	}
	h1, h2, h3, h4, h5 {
		text-align: center;
	}	

	p {
		text-align: justify;
	}
	.mobilecenter {
		text-align:center !important;
		font-size:14pt;
	}

	/* Removes the timeline */
	audio::-webkit-media-controls-timeline, 
	audio::-webkit-media-controls-current-time-display,
    audio::-webkit-media-controls-time-remaining-display,
    audio::-webkit-media-controls-mute-button,
    audio::-webkit-media-controls-timeline-container {
	  display: none !important;
	}

	audio {
	    height: 25px;
	}

	audio::-webkit-media-controls-play-button,
	 audio::-webkit-media-controls-panel {
	 background-color: rgba(255,255,255,1);
	 color: rgba(255,255,255,1);
 
 	}

	.headerlogo, .albumlogo {
		max-width:none;
	}

	.desktopbox {
		max-width:none !important;
	}

	ul#menu-header {
	    display: block;
	    font-size: 22pt;
	}

	.mobilebox {
		border: 10px solid block;
		height: 100%;
		background-color:white;
		padding:5px;
	}	

	.mobilebox h1 {
		position: absolute;
	  	top: 50%;
	  	left: 50%;
	  	transform: translate(-50%, -50%);
	  	font-weight:700;
	  	font-size:20pt;
	}

	.mobiletext {
		clear: both;
	    display: inline-block;
	    overflow: hidden;
	    white-space: nowrap;
	    text-overflow: ellipsis;
	    padding-top:12px !important;
	}

	.mobilestyle {
		border:none !important;
	}

	.mobilewhite {
		background-color:white !important;
	}

	.iframeheight, .iframeheight2 iframe {
		height:250px !important;
	}

	.desktopmobile {
	    display: none !important;
	}
	.headertop {
		text-align:center !important;
		width:100%;
	}		

	.container.headertop {
	    /*margin-left: 15px;
	    margin-right: 15px;*/
	    width: calc(100% - 30px);
	}

	.iframeheight2 img {
		padding-left:0 !important;
		padding-right:0 !important;
	}

}

@media screen and (min-width: 768px) {
	.menu{
		list-style:none;
		margin:0;
		padding:0;
		text-align:right;
		padding-top:10px;
	}
	.menu li{
		/*display:inline;*/
	}
	.menu a{
		display:inline-block;
		padding:4px;
	}
	#navmobile {
		
	}
	.terms {
		text-align:left;
	}	
	.disclaimer {
		text-align:right;
	}
	.headertitle {
		
	}
	.menucontainer {
	    position: absolute;
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%);
	}	
}

@media screen and (max-width: 991px) {
	.headertop {
		text-align:right;
		width:100%;
	}

	.header {
		position:relative;
	}

	.maincontent {
		margin-top:0px;
	}	
	
	.menu {
		list-style: none;
		/*display: inline-flex;*/
		padding-left: 0;
	}

	.menu li {
		margin: 5px;
	}
	
	.socialicons i {
		margin-left: 10px;
	}

	html, #artists, #reading, #read, #listen, #watch {
		scroll-behavior: smooth;
		scroll-margin-top: 0px;
	}	

	.mobilebox h1 {
		position: absolute;
	  	top: 50%;
	  	left: 50%;
	  	transform: translate(-50%, -50%);
	  	font-weight:700;
	  	font-size:16pt !important;
	}	

}


@media screen and (min-width: 768px) and (max-width: 991px) {
	.iframeheight, .iframeheight2 iframe {
		height:350px !important;
	}
}

.text-justify > * {
	text-align:justify;
}

div#navcontainer {
    margin-top: -25px;
}

audio {
    margin: 10px 0 5px 0;
    height:30px;
}

/* Removes mute-button */
audio::-webkit-media-controls-mute-button {
  display: none;
}

.iframeheight, .iframeheight2 iframe {
	height:300px;
}

.desktopbox {
	border: 10px solid black;
	display: block;
	height: 100%;
	background-color:white;
	padding:15px;
	max-height: 150px;
    max-width: 150px;	
}	

.desktopbox h1 {
	position: absolute;
  	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
  	font-weight:700;
  	font-size:14pt;
}

.image100 img {
	width:100%;
	height:auto;
}

.readsection iframe {
	width:100%;
}

.iframeheight2 img {
    margin-left:auto;
    margin-right:auto;
    display:block;
    padding-left:15px;
    padding-right:15px;
    max-width:100%;
}

.odd-center {
    margin-left: auto !important;
    margin-right: auto !important;
}