/*
Theme Name: Trafalgar Entertainment21
Theme URI: n/a
Author: SWD / HdK / Els van Bloois
Author URI: https://wearehdk.com
Description: Theme for Trafalgar Entertainment
Version: 1.0
License: no license, use a theme from https://wordpress.org/themes/ instead.
License URI: n/a
Tags: n/a
Text Domain: trafalgarentertainment21
*/

/* 

"red"	: #DE3F0F
"green"	: #5F98A1

*/


select[name="your-recipient"]{
	border-width: 1px;
	width: -webkit-fill-available;
	font-size: 14px;
	font-family: 'Montserrat',Arial,sans-serif;
	line-height: 1.8;
	height: 40px;
	border-color: rgba(152,168,172,255);
  }
  
  .subnavbox {
	  position: relative;
	  padding: 23px;
	  margin-top: -12px;
	  margin-bottom: 20px;
	  padding-bottom: 0px;
	  padding-left:0pt
  }
 div.subnavbox li{
	  padding-left:20px;
  }
  
 li.menu-item-4248{
	  padding-bottom:15px
  }
  
  li.menu-item-8468 {
	  font-size:large;
	  text-align:left;
	  align-items:left;
	  background-color: rgba(205,75,39,255)!important;
	  width: 100%;
	  padding: 10px 3px 10px 0px;
	  height:100%;
	  padding-left:20px;
	  padding-top:60p
  }
  
  #primary ul.subnav > li.contactblue a:hover {
	  color:rgba(8,29,60,255)!important; 
  }

html,body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form{
	padding:0;
	margin:0;
}
.screen-reader-text{
	position:absolute;
	top:-40000px;
	left:-40000px;
}
.skip-link:focus{
	top:40px;
	left:40px;
	background:white;
	color:black;
	padding:10px 20px;
	border:2px solid black;
	text-decoration:none;
	text-transform:uppercase;
	font-size:100%;
}


body{
	background:#fff;
	color:#000;
	font-family:'Montserrat',Arial,sans-serif;
	font-size:100%;
	letter-spacing:1px;
	letter-spacing:0.05em;
	line-height:1;
}
form,input,textarea{
	font-family:'Montserrat',Arial,sans-serif;
	font-size:100%;
	letter-spacing:1px;
	line-height:1;
}
#primary a{
	color:#000;
	text-decoration:none;
}
#primary .pagecontent a{
	text-decoration:underline;
}
#primary a.button,
#primary ul.squares li a,
#primary ul.linkboxes li a,
#primary ul.linkblocks li a,
#primary ul.theatres li a{
	text-decoration:none;
}
#primary a:focus,
#primary a:hover,
#primary a:active{
	color:inherit;
	text-decoration:none;
}

img,
iframe{
	max-width:100%;
}
strong{
	font-weight:700;
}
.inner{
	max-width:940px;
	padding:0 20px;
	margin:0 auto;
}


/* fonts */

#mainnav ul{
	list-style:none;
	font-size:23px;
	font-weight:700;
	text-transform:uppercase;
	line-height:1.8;
	text-align:right;
}
#mainnav ul li ul{
	font-size:15px;
	position:relative;
	top:-.2em;
}
#mainnav a{
	text-decoration:none;
}
#primary h1{
	font-size:40px;
	font-weight:700;
	text-transform:uppercase;
	line-height:1.2;
	margin-top:-.2em; /* to align with sidebar blocks */
	margin-bottom:0;
}
#primary h2{
	font-size:20px;
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:0.02em;
	line-height:1.2;
	margin-bottom:.1em;
}
#primary h2:first-child{
	padding-top:.5em;
}
#primary .linkblocks h2:first-child{
	padding-top:0;
}
#primary .mediaarticles h2,
#primary .pageside h2,
.signup h2{
	font-size:14px;
	text-transform:uppercase;
}

#primary h3{
	font-size:14px;
	font-weight:700;
	line-height:1.8;
	margin-bottom:0;
}
#primary h4{
}
#primary h5,
#primary h6{
}
#primary p,
#primary ul,
#primary ol,
#primary label,
#primary input,
#primary textarea,
.search-form input{
	font-size:14px;
	line-height:1.8;
	margin-bottom:0.9em;
}
.signup p{
	font-size:14px;
}
#primary .intro p{
	font-weight:700;
	line-height:1.5; /* client request 20221123 */
	padding-top:.5em;
	margin-bottom:0.6em;
}
#primary .intro.sizelarger p{
	font-size:16px;
}
#primary .intro.sizelargest p{
	font-size:18px;
}
#primary .intro.weightnormal p{
	font-weight:400;
}
#primary .videoboxwrap p.vidcaption{
	font-size:12px;
}
#primary ul.squares li p.ogcat{
	font-size:22px;
	font-weight:700;
	text-transform:uppercase;
	line-height:1.2;
	margin-bottom:0;
}
#primary ul.theatres li p.name{
	font-size:14px;
	font-weight:700;
	text-transform:uppercase;
	line-height:1.6;
	padding-top:.4em;
	margin-bottom:0;
}
#primary ul.theatres li p.city{
	font-size:14px;
	font-weight:400;
	text-transform:uppercase;
	line-height:1.6;
	margin-bottom:0;
}

#primary ul.logoblocks li p{
	font-size:12px;
	font-weight:700;
	line-height:1.4;
	text-transform:uppercase;
	margin-bottom:0;
}
#primary ul.linkboxes li p.boxtitle,
#primary ul.linkboxes li p.jobinfo{
	line-height:1.4;
	margin-bottom:0;
}
#primary ul{
	list-style:none;
}
#primary .regular ul li{
	padding-left:1em;
	background:url(img/bullet.png) transparent no-repeat 0 .5em / 5px auto;
}
#primary .regular ul.bxslider li,
#primary .regular ul.peoplelist li{
	padding-left:0;
	background:transparent;
}

#primary ul ul{
	margin-bottom:0;
}
#primary ul.peoplelist{
	list-style:none;
	margin-left:0;
}
#primary ol{
	margin-left:1.5em;
}
#primary ol li{
	margin-bottom:.5em;
}
#primary ul.linkboxes,
#primary ul.linkblocks{
	font-size:14px;
	line-height:1.2;
	margin-left:0;
}

ul.linkboxes li p.boxtitle,
ul.linkboxes li p.jobinfo,
ul.linkboxes li span.overlay{
	text-transform:uppercase;
	font-weight:700;
}
ul.linkboxes.notransform li span.overlay{
	font-size:10px;
	font-weight:700;
	text-transform:none;
}
a.button{
	font-size:14px; 
	font-weight:600;
	text-transform:uppercase;
	text-decoration:none;
	line-height:1;
}
ul.subnav{
	font-weight:700;
	text-transform:uppercase;
	line-height:1.6;
}
ul.subnav li{
	margin-bottom:.2em;
}
#primary .boldred,
#primary .boldgreen,
#primary .boldblack{
	font-weight:700;
}




/* colours */

#masthead,
#colophon{
	background:#001f3c;
	color:white;
}
#colophon a,
#masthead a{
	color:inherit;
}
.search-panel,
.site-nav-panel{
	background:black;
	color:#DE3F0F;
}
.site-nav-panel a{
	color:inherit;
}
.site-nav-panel li.current-menu-item a,
.site-nav-panel li.current-menu-ancestor ul.sub-menu li.current-menu-item a,
.site-nav-panel li.current-page-ancestor ul.sub-menu li.current-page-ancestor a,
.single-teg_show .site-nav-panel li.menu-item-101 ul.sub-menu li.menu-item-102 a{
	color:#fff;
}
.site-nav-panel li.current-menu-item ul.sub-menu li a,
.site-nav-panel li.current-menu-ancestor ul.sub-menu li a,
.site-nav-panel li.current-page-ancestor ul.sub-menu li a{
	color:inherit;
}
.site-nav-panel li a:focus,
.site-nav-panel li a:hover,
.site-nav-panel li a:active{
	color:#fff !important;
}
#primary h2.name,
#primary h2.redtitle,
#primary span.sep,
#primary .colourred,
#primary .boldred{
	color:#DE3F0F;
}
#primary .colourgreen,
#primary .boldgreen{
	color:#5F98A1;
}
ul.linkboxes li p.boxtitle,
ul.linkboxes li p.jobinfo,
ul.linkboxes li span.overlay.overlaybg{
	background:#011d3e;
}
ul.linkboxes li a,
ul.linkboxes li .boxin{
	background:#011d3e; /* to make the texts visible even if images are disabled */
}
.vacancies ul.linkboxes li a .joblogoin{
	background:#fff;
}

.mediadownloads ul.linkboxes li .boximage,
ul.linkboxes li .joblogo{
	background:#fff;
	border-color:#000;
	transition:all .5s ease-in-out 0s;
}
ul.linkboxes li a:hover .joblogo{
	opacity:.6;
}
ul.linkboxes li p.boxtitle,
ul.linkboxes li p.jobinfo,
ul.linkboxes li span.overlay{
	color:#fff;
}
#primary a.button{
	background:#DE3F0F;
	color:#fff;
	border-color:#DE3F0F;
	transition:all .5s ease-in-out 0s;
}
#primary a.button:focus,
#primary a.button:hover,
#primary a.button:active{
	background:black;
}
ul.logoblocks li .box{
	background:#f2f2f2;
}
ul.logoblocks li a .logo{
	opacity:1;
}
ul.logoblocks li a:focus .logo,
ul.logoblocks li a:hover .logo,
ul.logoblocks li a:active .logo{
	/* opacity:.5; */
	/* client does not want the effect anymore */
}
#primary ul.logoblocks li .cocat{
	color:#DE3F0F;
}

.subnavbox{
	background:#011d3e;
	color:#fff;
}
#primary ul.subnav a{
	display:block; /* to avoid space inside wrapped lines not being linked */
	color: #fff;
	text-indent:-1em; /* to make the second line on a wrapped line indent */
	padding-left:1em; /* to make the second line on a wrapped line indent */
}
#primary ul.subnav a:hover {
	color: #DE3F0F !important;
}
#primary ul.subnav li.current-menu-item a,
#primary ul.subnav li.current-menu-parent a,
#primary ul.subnav li.current-menu-ancestor ul.sub-menu li.current-menu-item a{
	color:#fff;
}
#primary ul.subnav li.current-menu-ancestor.menu-item-has-children a,
#primary ul.subnav li.current-menu-item ul.sub-menu li a,
#primary ul.subnav li.current-menu-ancestor ul.sub-menu li a{
	color:inherit;
}
#primary ul.subnav a:focus,
#primary ul.subnav a:hover,
#primary ul.subnav a:active{
	color:#DE3F0F !important;
}
.twitterbox{
	background:#011d3e;
	color:#fff;
}
.twitterbox a {
	color:#fff;
}
.socialmenu li a{
	display:block;
	width:30px;
	height:30px;
	background-color:transparent;
	background-repeat:no-repeat;
	background-position:center;
	background-size:contain;
}
#social-navigation ul.socialmenu li a:focus,
#social-navigation ul.socialmenu li a:hover,
#social-navigation ul.socialmenu li a:active{
	filter:grayscale(1) brightness(4);
}
#primary .socialinpage ul.socialmenu li a{
	backround-color:white;
	filter:grayscale(1) brightness(4) invert(1);
}
#primary .socialinpage ul.socialmenu li a:focus,
#primary .socialinpage ul.socialmenu li a:hover,
#primary .socialinpage ul.socialmenu li a:active{
	filter:none;
}

.socialmenu li.twitter a{
	background-image:url(img/social_x.png);
}
.socialmenu li.facebook a{
	background-image:url(img/social_fb.png);
}
.socialmenu li.instagram a{
	background-image:url(img/social_ig.png);
}
.socialmenu li.linkedin a{
	background-image:url(img/social_li.png);
}



/* layout */

#masthead{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	z-index:100;
}
.admin-bar #masthead{
	top:32px;
}
@media(max-width:782px){
	.admin-bar #masthead{
		top:46px;
	}
}
#page{
	padding-top:75px;
}
#masthead .inner{
	position:relative;
	height:75px;
}
.site-nav-icons{
	float:left;
	width:110px;
	padding-top:33px; /* 5px less than site-title */
}
.site-logo{
	float:right;
	width:110px;
	height:75px;
}
.site-logo a,
.site-logo a img{
	display:block;
	height:100%;
	margin-right:0;
	margin-left:auto;
}

.site-title{
	position:absolute;
	top:38px;
	left:110px;
	width:calc(100% - 220px);
	text-align:center;
	box-sizing:border-box;
	padding:0 15px;
}
.site-title img{
	display:block;
	max-height:26px;
	margin:0 auto;
}
.menu-toggle{
	float:left;
	margin-right:18px;
	display:block;
	height:32px;
	width:32px;
	background:url(img/menu_open.png) transparent no-repeat right center / contain;
	padding:0;
	border-width:0;
	cursor:pointer;
}
.search-toggle{
	float:left;
	width:24px;
}
.search-toggle img{
	width:auto;
	height:32px;
}
.toggled-on .menu-toggle{
	background-image:url(img/menu_close.png);
}
.menu-toggle span{
	position:absolute;
	left:-4000px;
}
.search-panel{
	position:fixed;
	left:calc((100% - 940px) / 2);
	top:-200px;
	width:416px;
	max-width:calc(100% - 40px);
	box-sizing:border-box;
	padding:10px 30px;
	transition:all .5s ease-in-out 0s;
	z-index:98;
}
.search-toggled-on .search-panel{
	top:75px;
}
.admin-bar.search-toggled-on .search-panel{
	top:107px;
}
.site-nav-panel{
	position:fixed;
	top:0;
	left:-50vw;
	width:calc((100% - 940px) / 2 + 110px);
	height:100vh;
	box-sizing:border-box;
	padding-top:100px;
	padding-bottom:50px;
	padding-right:36px;
	transition:all .5s ease-in-out 0s;
	z-index:99;
}
.toggled-on .site-nav-panel{
	left:0;
}
.site-nav-panel #mainnav ul#menu-main-nav{
	padding:1em 0;
}
.site-nav-panel ul.sub-menu.closed{
	display:none;
}

.site-nav-panel li:focus ul.sub-menu,
.site-nav-panel li:hover ul.sub-menu
.site-nav-panel li:active ul.sub-menu,
.site-nav-panel li.opensubmenu ul.sub-menu,
.single-teg_show .site-nav-panel li.menu-item-101 ul.sub-menu,
.site-nav-panel li.current-menu-item ul.sub-menu,
.site-nav-panel li.current-menu-ancestor ul.sub-menu,
.site-nav-panel li.current-page-ancestor ul.sub-menu{
	display:block;
}

#social-navigation ul.socialmenu{
	text-align:right;
}
#primary .socialinpage ul.socialmenu{
	margin-left:0;
	padding-top:.5em;
}
.socialmenu li{
	list-style:none;
	display:inline-block;
}
.socialmenu li a{
	display:block;
	width:30px;
	height:30px;
	background-repeat:no-repeat;
	background-position:center;
	background-size:contain;
}

#banner.banner1920{
	background-repeat:no-repeat;
	background-position:center;
	background-size:auto 100%;
	position:relative;
}
#banner.banner1920 .banner940{
	height:0;
	padding-top:426px;
}
@media(max-width:1000px){
	#banner.banner1920 .banner940{
		padding-top:45.32%;
	}
}
#banner a.videolinkbanner{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:url(img/play.png) transparent no-repeat center;
}
#banner .logooverlay{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-repeat:no-repeat;
	background-position:center;
}
.page-id-8010 #banner .logooverlay{
	background-image:url(img/trafalgar_theatres_logo_white.png);
}
.page-id-8116 #banner .logooverlay{
	background-image:url(img/trafalgar_tickets_logo_white.png);
}
@media(max-width:1000px){
	#banner .logooverlay{
	 	background-size:60% auto;
	}
}

#banner img{
	display:block;
}

#hero{
	width:100%;
	height:calc(100vh - 75px);
	background-color:black;
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
	overflow:hidden;
}
#hero .video{
	height:calc(100vh - 75px);
	width:100%;
}

#hero .vidlandscape{
}
#hero .vidportrait{
	display:none;
}

/* to save myself from going mad, I'm not taking the 75px bar into consideration,*/
/* the hero just starts at the top, behind the bar */
/* only on the homepage */

.home #hero{
	position:fixed;
	top:0;
	left:0;
	height:100%;
	width:100%;
}
#hero.videotopaligned{
	top:75px;
} 

#hero .video.vidlandscape{
	/* for windows wider than the video at video height */
	width:100%;
	height:56.25vw;
	margin-left:0;
	margin-top:calc( (100vh - 56.25vw) / 2  );
}
#hero.videotopaligned .video.vidlandscape{
	margin-top:0;
	height:calc(100vh - 75px);
	width:calc(178vh - 75px);
	margin-left:calc( ( 100vw - 178vh + 75px) / 2 );
} 


@media(max-width:178vh){
	#hero .video.vidlandscape{
		height:100vh;
		width:178vh;
		margin-left:calc( ( 100vw - 178vh) / 2 );
		margin-top:0;
	}
	#hero.videotopaligned .video.vidlandscape{
		margin-top:0;
		height:calc(100vh - 75px);
		width:calc(178vh - 75px);
		margin-left:calc( ( 100vw - 178vh + 75px) / 2 );
	} 
}
@media(max-width:100vh){
	.home #hero.videotopaligned{
		top:75px;
	} 
	/* switch to square video */
	#hero .vidlandscape{
		display:none;
	}
	#hero .video.vidportrait{
		display:block;
		height:100vh;
		width:100vh;
		margin-top:0;
		margin-left:calc( (100vw - 100vh) / 2 );
	}
	.home #hero.videotopaligned .video.vidportrait{
		height:calc(100vh - 75px);
		width:calc(100vh);
		margin-left:calc( (100vw - 100vh) / 2 );
	}
}

#hero .video iframe,
#hero .video video{
	min-width:100%;
	min-height:100%;
}
.gotonextpage{
	position:absolute;
	bottom:30px;
	left:0;
	width:100%;
}
.gotonextpage a,
.gotonextpage img{
	display:block;
}
.gotonextpage img{
	width:50px;
	margin:0 auto;
}
#content{
	min-height:calc(100vh - 150px);
}
.admin-bar #content{
	min-height:calc(100vh - 182px);
}

#main.nobanner{
	padding-top:25px; /* because no banner */
}
.pagecontentwide{
	padding-top:20px;
}

#primary{
	display:flex;
	width:100%;
	flex-wrap:wrap;
	justify-content:space-between;
	padding-bottom:50px;
}
#primary.fullwidth{
	display:block;
}
.pagecontent,
.showcontent{
	width:calc(96.6% - 300px);
	max-width:580px;
	padding-top:20px;
}
.pageside,
.showside{
	width:300px;
	position:sticky; /* only works in most browsers, not all */
	align-self:flex-start; /* this is needed to make position stick work */
	top:87px; /* 75 for top bar + 12px for negative margin-top on subnavbox */
}
.admin-bar .pageside,
.admin-bar .showside{
	top:119px; /* 75 for top bar + 12px for negative margin-top on subnavbox + 32px for admin-bar */
}
#main.nobanner .pageside,
#main .pageside.nosubnav{
	padding-top:20px;
	top:75px; /* no negative margin-top on subnavbox here */
}
.post-navigation,
.pagination{
	order:5;/* to make sure it goes after main content and sidebar */
	width:100%;
}

.biography .bioimg{
	float:left;
	padding-top:.5em;
	margin-right:1em;
	margin-bottom:.5em;
}

#primary ul.peoplelist li strong{
	/* this is the role in the line */
	margin-right:.5em;
}
#primary .nobr{
	white-space:nowrap;
}
#colophon{
	min-height:75px;
	box-sizing:border-box;
	padding:20px 0;
}
#colophon .inner{
}

div.imagetextblock{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	margin-bottom:30px;
}
div.imagetextblock .blockimg{
	width:33%;
	margin-top:14px;
}
div.imagetextblock .blocktext{
	width:calc(67% - 20px);
}
div.imagetextblock .blockimg .imagecut{
	position:relative;
	height:0;
	padding-top:100%;
	overflow:hidden;
}
div.imagetextblock .blockimg .imagecut img{
	position:absolute;
	top:0;
	left:0;
	height:100%;
	width:200%;
	max-width:200%;
	margin-left:-50%;
}



div.boxes{
	max-width:940px;
	margin:0 auto 22px auto;
	/* test */
	padding-top:20px;
}
#primary ul.peoplelist,
#primary ul.articleslist,
#primary ul.linkboxes,
#primary ul.linkblocks,
#primary ul.logoblocks,
#primary ul.theatres{
	list-style:none;
}
#primary ul.articleslist{
	margin-left:0;
}
#primary ul.squares,
#primary ul.linkboxes,
#primary ul.theatres{	
	display:flex;
	flex-wrap:wrap;
	margin-left:-10px;
	margin-right:-10px;
	margin-bottom:0;
	overflow:hidden;
}
#primary ul.linkboxes.insidebar{
	margin-left:auto;
	margin-right:auto;
}
ul.squares li,
ul.theatres li{
	width:33.33%;
	box-sizing:border-box;
	padding:0 10px;
	margin-bottom:20px;
}
ul.squares li .ogbox{
	height:0;
	padding-top:100%;
	background:pink;
	position:relative;
}
ul.squares li .ogbox .oginfo{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	color:#fff;
}
ul.squares li .ogbox{
	background-repeat:no-repeat;
	background-color:transparent;
	background-position:center;
	background-size:cover;
	transition:all .5s ease-in-out 0s;
}
ul.squares li a .ogbox .oginfo{
	transition:all .5s ease-in-out 0s;
	background-color:rgba(222,63,15,.65);
}
ul.squares li.odd a .ogbox .oginfo{
	background-color:rgba(95,152,161,.65);
}
ul.squares li a:focus .ogbox,
ul.squares li a:hover .ogbox,
ul.squares li a:active .ogbox{
	filter:grayscale(1);
}
ul.squares li a:focus .ogbox .oginfo,
ul.squares li a:hover .ogbox .oginfo,
ul.squares li a:active .ogbox .oginfo{
	background:transparent;
}
ul.squares li .ogbox .oginfo .ogcat{
	display:flex;
	height:100%;
	width:100%;
	padding:20px;
	box-sizing:border-box;
	justify-content:space-between;
	align-items:flex-end;
}

ul.linkboxes li{
	width:50%;
	margin-bottom:20px;
}
ul.linkboxes.insidebar li{
	width:300px;
	max-width:100%;
	margin-bottom:20px;
}
ul.linkboxes li .box{
	padding:0 10px 0 10px;
}
ul.linkboxes li .box,
ul.linkboxes li .box a{
	height:100%;
}

ul.linkboxes li span,
ul.linkboxes li a,
ul.linkboxes li img{
	display:block;
}
ul.linkboxes li a,
ul.linkboxes li .boxin{
	position:relative;
}
ul.linkblocks li .prodthumb img,
ul.linkblocks li .searchthumb img,
ul.linkboxes li .boximage .boxin img{
	width:100%;
	margin:0 auto;
}
ul.linkboxes li span.slant{
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:100%;	
}
ul.linkboxes li span.overlay{
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:3.5em;
	box-sizing:border-box;
	height:3.5em;
	padding:.5em 1.2em;
}
ul.linkboxes .boxtitle span,
ul.linkboxes .jobinfo span,
ul.linkboxes.notransform li span.overlay span{
	padding:12px 15px;
}
.page-header{
	width:100%;
	/* needed because sometimes it's part of flexbox */
}
.productions{
	padding-top:20px;
}
ul.linkblocks{
}
ul.linkblocks li{
	overflow:hidden;
	margin-bottom:30px;
}
ul.linkblocks li .searchthumb{
	float:left;
	width:50%;
	max-width:300px;
	margin-right:20px;
	margin-bottom:10px;
}
ul.linkblocks li .prodthumb{
	float:left;
	width:50%;
	margin-bottom:10px;
}
ul.linkblocks li .proddetail{
	margin-left:calc(50% + 20px);
	margin-bottom:10px;
}

div.sbbutton,
div.ipbutton{
	margin-bottom:1em;
}
div.sbbutton a.button,
div.ipbutton a.button{
	display:inline-block;
}
.proddetail a.button{
	display:inline-block;
}
a.button{
	padding:9px 12px;
	border-width:0px;
	border-style:solid;
}
#primary ul.logoblocks{
	display:flex;
	flex-wrap:wrap;
	margin-left:-10px;
	margin-right:-10px;
}
ul.logoblocks li{
	width:50%;
	box-sizing:border-box;
	padding:0 10px 20px 10px;
}
ul.logoblocks li a,
ul.logoblocks li .box{
	height:100%;
	box-sizing:border-box;
}
ul.logoblocks li .box{
	padding:10px;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
}
.mediadownloads ul.linkboxes li .boximage,
ul.linkboxes li .joblogo{
	border-style:solid;
	border-width:1px 1px 0 1px;
}
ul.linkboxes li .joblogo{
	position:relative;
	padding-top:52%;
}
ul.logoblocks li .logo{
	position:relative;
	padding-top:35.23%;
}
ul.linkboxes li .joblogoin,
ul.logoblocks li .logoin{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	display:flex;
	justify-content:center;
	align-items:center;
	box-sizing:border-box;
	padding:10px;
}
ul.linkboxes li .joblogoin img,
ul.logoblocks li .logoin img{
	max-height:100%;
}
ul.logoblocks li .cocat span{
	float:right;
}


.bannervideo iframe{
	display:block;
	margin:0 auto;
}
.inpageslider,
.videoboxwrap{
	padding-top:1em;
	margin-bottom:1.8em;
}
.videobox{
	position:relative;
	height:0;
	padding-top:56.25%;
	background:black;
}
.videobox iframe{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
#primary .videoboxwrap p.vidcaption{
	padding-top:.5em;
}


.subnavbox{
	position:relative;
	padding:23px;
	margin-top:-12px;
	margin-bottom:20px;
}
#main.nobanner .subnavbox{
	margin-top:0;
}
ul.subnav,
ul.subnav ul{
	list-style:none;
}
ul.subnav ul{
	padding-left:1em;
}
.twitterbox{
	padding:23px;
	margin-bottom:20px;
}



/* pagination */
/* kriesi */

.pagination{
	text-align:center;
	padding:50px 0;
}
/*
.pagepn{
	text-indent:-4000px;
	background-repeat:no-repeat;
	background-position:center;
	background-size:auto 10px;
}
.page-first{background-image:url(img/page-first.png);}
.page-prev{background-image:url(img/page-prev.png);}
.page-next{background-image:url(img/page-next.png);}
.page-last{background-image:url(img/page-last.png);}
*/

.pagination a,
.pagination span{
	display:inline-block;
	width:28px;
	height:28px;
	font-size:14px;
	font-weight:600;
	line-height:28px;
	border-radius:25px;
	box-sizing:border-box;
	padding-top:1px;
}
.pagination a.inactive{
	opacity:0.5;
	cursor:default;
}
.page-numbers{
	color:inherit;
	margin:0 7px;
}
.page-numbers.current{
	background:#DE3E0E;
	color:#fff;
}
.page-prev{
	margin-left:-5px;
	margin-right:7px;
}
.page-next{
	margin-right:-5px;
	margin-left:7px;
}


/* webkit things */

input[type=text],
input[type=search],
input[type=button],
input[type=email],
input[type=submit],
textarea{
	-webkit-appearance:none;
	-webkit-border-radius:0;
}
*{
	-webkit-text-size-adjust:100%;
}

/* Where placeholder needs to obey the styles */

/* fix the stupid placeholder colour */
/* separate rules, because: "a group of selectors containing an invalid selector is invalid". */
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
	font-family:"Montserrat",Arial,sans-serif;
	/* font-size:13px; */ font-size:11px;
	letter-spacing:1px;
	color:#fff;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
	font-family:"Montserrat",Arial,sans-serif;
	/* font-size:13px; */ font-size:11px;
	letter-spacing:1px;
	color:#fff;
	opacity:1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
	font-family:"Montserrat",Arial,sans-serif;
	/* font-size:13px; */ font-size:11px;
	letter-spacing:1px;
	color:#fff;
	opacity:1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
	font-family:"Montserrat",Arial,sans-serif;
	/* font-size:13px; */ font-size:11px;
	letter-spacing:1px;
	color:#fff;
}
::-ms-input-placeholder { /* Microsoft Edge */
	font-family:"Montserrat",Arial,sans-serif;
	/* font-size:13px; */ font-size:11px;
	letter-spacing:1px;
	color:#fff;
}


/* from origin site */


#primary p.contentimage{
	padding-top:8px;
}
#primary p.imgblock2col{
	/* margin-right:-60px; */
	/* no space for that with the sticky sidenav */
	overflow:hidden;
}
#primary p.imgblock2col .imgi1,
#primary p.imgblock2col .imgi2{
	display:block;
	width:48.5%;
	max-width:300px;
}
#primary p.imgblock2col .imgi1{
	float:left;
}
#primary p.imgblock2col .imgi2{
	float:right;
}
#primary p.imgblock2col span.caption{
	font-size:11px;
}

/* signup page */

#mc_embed_signup form{
	padding-left:0 !important; /* override 3% from MC */
}
#mc_embed_signup .mc-field-group{
	min-height:1em !important; /* override 50px */
}
#mc_embed_signup{
	background:#fff;
	clear:left;
}
#primary #mc_embed_signup .input-group input{
	float:left;
}
#primary #mc_embed_signup .input-group label{
	line-height:1.2;
	display:block;
	margin-left:3em;
}
#primary #mc_embed_signup #mce-success-response{
	color:#5F97A1 !important; /* override #529214 from MailChimp styles */
	font-size:14px; /* 2 px larger than paragraphs */
	line-height:1.6;
	margin-bottom:1.6em;
}



/* contact page */
/* + search form */

.wpcf7-form{
	padding-top:1em;
}
.wpcf7-form input,
.wpcf7-form textarea{
	background:#fff;
	border:1px solid #98A8AC;
	line-height:1.4;
	width:100%;
	box-sizing:border-box;
	padding:5px;
}
.wpcf7-form input[type=submit]{
	width:auto;
	background:#DE3E0E;
	color:#fff;
	font-size:16px;
	line-height:20px;
	font-weight:600;
	padding:5px 10px;
	border:1px solid red;
	position:relative;
	cursor:pointer;
	text-transform:uppercase;
}

.search-form{
	padding-top:1em;
}
.search-form label{
	display:inline-block;
	width:250px;
	max-width:100%;
	box-sizing:border-box;
}
.search-form input.search-field{
	background:#fff;
	border:1px solid #98A8AC;
	line-height:1.4;
	padding:5px;
	box-sizing:border-box;
	width:100%;
}
.search-form input[type=submit]{
	background:#DE3E0E;
	color:#fff;
	font-size:14px;
	line-height:20px;
	font-weight:600;
	padding:5px 10px;
	border:1px solid red;
	position:relative;
	cursor:pointer;
	text-transform:uppercase;
	box-sizing:border-box;
	width:100px;
}


#primary input,
#primary textarea{
	margin-bottom:0;
}


#colophon{
	padding-top:30px;
	padding-bottom:50px;
}
.signup,
.site-info{
	overflow:hidden;
	margin-bottom:12px;
}
.signup h2{
	float:left;
	padding-top:7px;
	margin-bottom:8px;
}
.signup .mailchimp{
	margin-left:210px;
	margin-bottom:8px;
}
#setmail{
	overflow:hidden;
}
#setmail input{
	float:left;
}
#setmail .fieldwrap{
	display:block;
	max-width:300px;
	padding-right:100px;
}
#setmail input#emailfield{
	width:100%;
	font-size:14px;
	line-height:18px;
	padding:5px 10px;
	border-color:#fff;
	border-style:solid;
	border-width:0 0 1px 0;
	background:#000;
	color:#fff;
}
#setmail input#submitbutton{
	background:#DE3E0E;
	color:#fff;
	/* font-size:16px; */ font-size:14px; 
	line-height:18px;
	font-weight:600;
	padding:5px 10px;
	border:1px solid red;
	position:relative;
	margin-bottom:-1px;
	cursor:pointer;
}
.site-info img{
	float:left;
	width:180px;
	margin-bottom:8px;
	margin-top:3px; /* to align top with text on the right */
}
.site-info .details,
.site-info .fnav{
	margin-left:210px;
}
.site-info h3,
.site-info p{
	display:inline;
	font-size:12px;
	line-height:1.2em; /* to align bottom / top with logo on the left */
	text-transform:uppercase;
	white-space:nowrap;
}
ul#menu-footer-links{
	overflow:hidden;
	padding:5px 0;
}
ul#menu-footer-links li{
	list-style:none;
	float:left;
	font-size:10px;
	line-height:1.8;
	text-transform:uppercase;
	padding-left:8px;
	padding-right:8px;
	border-left:1px solid red;
}
ul#menu-footer-links li a{
	color:#fff;
	text-decoration:none;
}
ul#menu-footer-links li a:focus,
ul#menu-footer-links li a:hover,
ul#menu-footer-links li a:active{
	text-decoration:underline;
}
ul#menu-footer-links li:first-child{
	padding-left:0;
	border-left-width:0;
}

#footer-credit li {
	list-style:none;
	font-size:10px;
	line-height:1.8;
	text-transform:uppercase;
	padding:5px 0;
}

/* end from origin site */











/* width related */

@media(max-width:1276px){
	.toggled-on .site-nav-panel{
		width:275px;
	}
}
@media(max-width:1000px){
	.search-panel{
		left:20px;
	}
}
@media(max-width:880px){
	.pagecontent{
		width:100%;
	}
	.pageside{
		width:100%;
		/* order:-1; /* to go above main content */
		order:6;
		/* it now goes below the main content, even below pagenav */
		position:static; /* we don't want sticky here! */
		padding-top:0 !important;
		padding-top:40px !important; /* to create space between content and sidebar content */
	}
	#main{
		padding-top:20px !important;
	}
	#primary{
		padding-top:0 !important;
	}
	.subnavbox{
		margin-top:0;
	}
}
@media(max-width:860px){
	#primary ul.squares li p.ogcat{
		font-size:18px;
	}
}
@media(max-width:780px){
	ul.logoblocks li{
		width:50%;
	}
}
@media(max-width:750px){
	#primary ul.squares li p.ogcat{
		font-size:16px;
	}
	.site-info h3,
	.site-info p{
		white-space:normal;
		display:block;
	}
	.site-info p span{
		white-space:nowrap;
	}
}
@media(max-width:700px){
	#primary ul.squares li p.ogcat{
		font-size:14px;
	}
}
@media(max-width:620px){
	ul.squares li{
		width:50%;
	}
	ul.squares li.alteven a .ogbox .oginfo{
		background-color:rgba(222,63,15,.65);
	}
	ul.squares li.altodd a .ogbox .oginfo{
		background-color:rgba(95,152,161,.65);
	}
	#primary ul.squares li p.ogcat{
		font-size:22px;
	}
}
@media(max-width:610px){
	.site-info .fnav{
		padding-top:10px;
		margin-left:0;
	}
}
@media(max-width:580px){
	#primary ul.squares li p.ogcat{
		font-size:18px;
	}
	#primary ul.theatres li p{
		font-size:12px !important;
	}
}
@media(max-width:560px){
	.site-title{
		top:26px;
		padding:0;
	}
	.site-title a{
		display:block;
		height:40px;
		/* background:url(img/trafalgar-entertainment-narrow.png) transparent no-repeat left bottom / contain; */
		background:url(img/2022-TE-MASTER-LOGO-MOBILE.png) transparent no-repeat left bottom / contain;		
	}
	.site-title img{
		display:none;
	}
	.site-logo{
		height:63px;
	}
	.toggled-on .site-nav-panel{
		width:100%;
		box-sizing:border-box;
	}
	#mainnav ul{
		text-align:left;
		padding-left:20px !important;
	}
	#mainnav ul ul{
		padding-left:0 !important;
	}
	#social-navigation ul.socialmenu{
		text-align:left;
		padding-left:20px !important;
	}
	
	#primary ul.linkblocks,
	#primary ul.linkboxes{
		width:600px;
		max-width:100%;
		margin-left:auto;
		margin-right:auto;
	}
	ul.linkblocks li,
	ul.linkboxes li{
		width:100%;
	}
	ul.linkboxes li .box{
		padding:0;
	}
	ul.linkblocks li .prodthumb,
	ul.linkblocks li .searchthumb{
		float:none;
		width:600px;
		max-width:100%;
		margin-right:auto;
	}
	ul.linkblocks li .proddetail{
		margin-left:0;
	}
	div.imagetextblock .blockimg{
		width:100%;
		margin-bottom:10px;
	}
	div.imagetextblock .blocktext{
		width:100%;
	}
	div.imagetextblock .blockimg .imagecut{
		position:static;
		height:auto;
		padding-top:0;
	}
	div.imagetextblock .blockimg .imagecut img{
		position:static;
		height:auto;
		width:100%;
		max-width:100%;
		margin-left:0;
	}

}
@media(max-width:540px){
	.subnav li#menu-item-4365 a{
		max-width:17em;
	}
	ul.theatres li{
		width:50%;
	}
}
@media(max-width:520px){
	#primary ul.squares li p.ogcat{
		font-size:16px;
	}
}
@media(max-width:480px){
	.signup h2{
		float:none;
	}
	.signup .mailchimp{
		margin-left:0;
	}
	.site-info img{
		float:none;
	}
	.site-info .details{
		margin-left:0;
	}
}
@media(max-width:460px){
	#primary ul.squares li p.ogcat{
		font-size:14px;
	}
}
@media(max-width:450px){
	.site-nav-panel{
		left:-100vw;
		width:100% !important;
		max-width:100% !important;
	}
	ul.logoblocks li{
		width:100%;
	}
}
@media(max-width:430px){
	#primary ul.squares li p.ogcat{
		font-size:12px;
	}
}

@media(max-width:380px){
	.fnav ul#menu-footer-links li{
		float:none;
		padding-left:0;
		border-left-width:0;
	}
}
@media(max-width:400px){
	#primary ul.squares li{
		width:100%;
	}
	#primary ul.squares li p.ogcat{
		font-size:18px;
	}
}
@media(max-width:360px){
	/* some font-sizes so words do not get cut off */
	#primary h1{
		font-size:32px;
	}
	#primary p.boxtitle,
	#primary p.jobinfo{
		font-size:12px;
	}
}



/* height related for nav panel */

@media(max-height:580px){
	#mainnav ul{
		font-size:18px;
	}
	#mainnav ul li ul{
		font-size:14px;
	}
}
@media(max-height:500px){
	.site-nav-panel{
		overflow-y:auto;
	}
	#mainnav ul{
		font-size:16px;
	}
	#mainnav ul li ul{
		font-size:12px;
	}
}


/* Hubspot sign up */

.hs-form {
	font-family: 'Montserrat',Arial,sans-serif;
    font-size: 100%;
    letter-spacing: 1px;
    line-height: 1;
}

.hs-form div {
	margin: 10px 0px;
}

.hs-button {
	background: #DE3E0E;
    color: #fff;
    /* font-size: 16px; */
    font-size: 14px;
    line-height: 18px;
    font-weight: 600;
    padding: 5px 10px;
    border: 1px solid red;
    position: relative;
    margin-bottom: -1px;
    cursor: pointer;
}

p.ogcat img {
    max-height: 30px;
    width: auto;
}