/*
Theme Name: XXL London
Theme URI: Custom Theme
Description: Custom Theme
Version: 1.0
Author: Lilo
Author URI: www.lilo.co.uk
*/

/* ======================================== 
Primary style
========================================  */
@import 'assets/css/normalize.css';
@import 'assets/css/icons.css';
@import 'assets/css/fonts.css';

body,
html {
	margin:0;
	padding:0;
	color:#797979;
    font-family: 'brandon_grotesque_regularRg';
	font-size:15px;
	line-height:1.7em;
	height:100%;
	position:relative
}
body.noscroll {overflow:hidden}

/* ======================================== 
GENERAL
========================================  */

.wrap {width:100%;max-width:1200px;margin:0 auto;padding:0 20px}
.clearfix:after, header:after, footer:after {content:" ";display:table;clear:both;}

a {text-decoration:none;color:#000}
a:hover {color:#000}
img {vertical-align:bottom}
*:focus {outline: none;}
strong {font-weight:400;color:#000}
*, *::after, *::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'BrandonText', Sans-Serif;
    color: #444;
    text-transform: uppercase;
    font-weight: normal;
    letter-spacing: 2px;
    margin: 0 0 15px;
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: normal;
	line-height:1.2em
}
.category h1.pagetitle {display:inline-block;float:left}

/* ======================================== 
OPENING TIMES
========================================  */
#openingtime {display:inline-block;float:right;padding-right:45px}
#openingtime p {margin:0;line-height:18px;}
#openingtime h3 {margin:0;text-transform:uppercase;font-size:20px;margin:20px 0 5px;line-height:22px;color:#fff;font-family: 'brandon_grotesquebold';;}
#openingtime h3:first-child {margin-top:0}

/* ======================================== 
COLUMNS
========================================  */

.flex {display: -webkit-flex; -webkit-flex-wrap: wrap;display: flex;flex-wrap: wrap;}
.flex:after {content:" ";display:table;clear:both;}
.col-4-4 {width:25%;float:left;position:relative}
.col-2-2 {width:50%;float:left;position:relative}
.col-3-3 {width:33.33%;float:left;position:relative}



/* ======================================== 
COLUMNS
========================================  */

header {
    background-color: rgba(0,0,0,0.4);
    border-bottom: 1px solid rgba(255,255,255,0.9);
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
	position:fixed;
	width:100%;
	height:88px;
	z-index:999;
}
.clearHeader {
  height:50px;
  background:lightblue;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  
  -webkit-transition: background 2s; /* For Safari 3.1 to 6.0 */
  transition: background 2s;
}

header.whiteheader {
 	background:#fff;
	-webkit-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
}

#logo {position:fixed;top:0;right:0;height:88px;width:88px;z-index:9999999;}




/* ======================================== 
HEADER
========================================  */


.slogan {
	font-size: 30px;
    margin: 0;
    line-height: 32px;
    font-family: 'brandon_grotesqueblack';
    color: #444;
    text-transform: uppercase;
	text-align:center;
	padding:50px 20px;
	border-top:1px solid #e1e1e1;
}

header .logotext {font-family: 'brandon_grotesquebold';line-height:86px;padding:0 0 0 20px;font-size:22px;color:#fff;display:inline-block;float:left;letter-spacing:1px}
header .logotext a {color:rgba(255,255,255,1);transition:0.2s}
header .logotext a:hover {color:rgba(255,255,255,0.8)}

header.whiteheader .logotext a {color:rgba(64,64,64,1);transition:0.2s}
header.whiteheader .logotext a:hover {color:rgba(64,64,64,0.8)}

/* ======================================== 
NAV
========================================  */


nav {
	display: block;
	float: left;
	text-transform:uppercase;
}
nav ul {
	list-style: none;
	margin: 0;
	padding:0 0 0 20px;
}
nav li {
	float: left;
	position: relative;
	letter-spacing:1px;
}
nav a {
	color: rgba(255,255,255,1);
    padding: 0 10px;
    font-size: 13px;
    line-height: 22px;
	line-height:88px;
	transition:0.5s;
}
nav ul ul {
	display: none;
	position: absolute;
	top: 88px;
	left: -10px;
	float: left;
	width: 200px;
	z-index: 99999;
}
nav ul ul li {
	width: 200px;
}
nav ul ul ul {
	left: 100%;
	top: 0;
}

nav ul ul a {
    background: #fff;
    line-height: 40px;
    padding: 0 15px;
    width: 200px;
    height: auto;
    color: rgba(25,24,24,0.7);
    display: block;
}
nav li:hover > a {
	color: rgba(255,255,255,0.8)
}
nav ul ul :hover > a {
	color: rgba(25,24,24,0.7);
}
nav ul li:hover > ul {
	display: block;
}
nav ul li.current_page_item > a,
nav ul li.current_page_ancestor > a,
nav ul li.current-menu-ancestor > a,
nav ul li.current-menu-item > a,
nav ul li.current-menu-parent > a {
	color: rgba(255,255,255,0.8)
}
nav ul ul li.current_page_item > a,
nav ul ul li.current_page_ancestor > a,
nav ul ul li.current-menu-ancestor > a,
nav ul ul li.current-menu-item > a,
nav ul ul li.current-menu-parent > a {
	color: rgba(25,24,24,0.7);
}
header.whiteheader nav a {
		color: rgba(25,24,24,1.00);
}
header.whiteheader nav li:hover > a,
header.whiteheader nav ul ul :hover > a,
header.whiteheader nav ul li.current_page_item > a,
header.whiteheader nav ul li.current_page_ancestor > a,
header.whiteheader nav ul li.current-menu-ancestor > a,
header.whiteheader nav ul li.current-menu-item > a,
header.whiteheader nav ul li.current-menu-parent > a {
	color: rgba(25,24,24,0.7);

}
/* ======================================== 
SOCIAL MEDIA
========================================  */

.socialmedia {line-height:17px;font-size:13px;margin-bottom:10px}
.socialmedia i {font-size:25px;vertical-align:middle}
.socialmedia a {padding-right:5px;display:inline-block;color:#bbb;transition:0.2s}
.socialmedia a:hover {color:#000}

.socialmediaheader {line-height:80px;position:absolute;right:105px;}
.socialmediaheader i {font-size:25px;vertical-align:middle;position:relative;top:5px}
.socialmediaheader a {padding-right:5px;display:inline-block;color:#fff;transition:0.2s}
.socialmediaheader a:hover {color:#bbb}

header.whiteheader .socialmediaheader a {color:#bbb;}
header.whiteheader .socialmediaheader a:hover {color:#000}

.pps-button-popup-269 {}


/* ======================================== 
FLEX
========================================  */

.flex {display: -webkit-flex; -webkit-flex-wrap: wrap;display: flex;flex-wrap: wrap;}
.flex:after {content:" ";display:table;clear:both;}

#flexiblecontent {padding:0 0 30px}
#flexiblecontent .flexiblebox {border:1px solid;border-top:0;padding:10px 20px 10px;border-color:#d9d9d9;width:100%;position:relative}
#flexiblecontent .flexiblebox:first-of-type{border-top:1px solid;border-color:#d9d9d9}
#flexiblecontent .flexiblebox ul {width:100%}
#flexiblecontent .flexiblebox ul li {width:100%}
#flexiblecontent .flexiblebox a {transition:0.3s}
.clientzone.date {
	color:#333;
	display:inline-block;
	padding:3px 20px;
	font-size:10px;
	text-transform:uppercase;
	width:calc(100% + 40px);
	background:rgba(0,0,0,0.1);
	margin:0 -20px 0 -20px;
	position:relative;
	top:-10px
}

.pagerow {padding:50px 0;border-top:1px solid #e0dede}
.pagerow:last-child {border-bottom:none}

.rowsplitlayout .col-2-2.left {padding-right:20px}
.rowsplitlayout .col-2-2.right {padding-left:20px}
.rowsplitlayout .col-2-2 img, .rowsplitlayout .col-3-3 img {width:100%;height:auto}
.rowfulllayout .wrap,
.rowsplitlayout .wrap  {max-width:960px}

.rowsplitlayout .col-3-3.left {padding-right:20px}
.rowsplitlayout .col-3-3.right {padding-left:20px}
.rowsplitlayout .col-3-3.middle {padding:0 10px}

.rowsplitlayout .col-3-3.middle h3,
.rowsplitlayout .col-3-3.left h3, 
.rowsplitlayout .col-3-3.right h3 {margin-top:20px;min-height:45px}
.home .pagerow:first-of-type {border:none}
.rowsplitlayout.maps {margin:-30px 0 50px}

/* ======================================== 
BANNER
========================================  */

.page-id-277 .firstparagraph {display:none}
.page-id-277 #main {padding-top:0}

#banner {
	text-align:center;
	position:relative;
}
#banner img {width:100%;height:auto;}
#banner .gradient {
	background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 100%);
	background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.55) 100%); 
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.55) 100%); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 );
	min-height:150px;
	position:absolute;
	bottom:0;
	width:100%;
	z-index:1;
}
#banner h1 {
    color: #fff;
    font-size: 27px;
    line-height: 30px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    float: left;
    margin: 0;
	position:absolute;
	bottom:30px;
	left:30px;
	z-index:2;
}
.filters-container {padding:0 5px}

#main {padding:50px 0}
.home #main {padding:0}
#main .wrap {max-width:1000px;}
body.page-id-306 #main .wrap {max-width:1200px;}
#main .wrap p:last-child {margin-bottom:0}
#main .wrap.firstparagraph {padding-bottom:50px}
.mobile {display:none}

#telephone {
	display:inline-block;
	float:right;
	padding:8px 15px;
}
#location {
    position: relative;
	display:inline-block;
	float:right;
	padding:8px 0 8px;
	cursor:pointer;
}

#locationmap {
    display: none;
	position:absolute;
	right:0;
	top:35px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}
#location:hover #locationmap {
    display:block;
}
#main.galleries {margin-bottom:40px;max-width:960px;padding:50px 20px}

/* ======================================== 
GALLERY
========================================  */
.media-boxes-no-more-entries {
    display: none;
}
.filters-container {
    margin-bottom: 20px;
}

.custom-filter {
    padding: 0;
    text-align: right;
}

.custom-filter li {
    list-style: none;
    display: inline-block;
    margin-left: 18px;
    font-size: 12px;
}

.custom-filter li a {
    color: #999;
    text-decoration: none;
}

.custom-filter li a:hover {
    color: #333;
}

.custom-filter li a.selected {
    color: #D1474C !important;
}

/* Set the style of the thumbnail overlay items */
.media-box-title {
    color: #fff;
    font-size: 11px;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 28px;
}

.media-box-date {
    color: #F2F2F2;
    font-size: 10px;
}

/* Remove box shadow and border-radius from the media boxes */
.media-box-container {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -o-box-shadow: none;
    -ms-box-shadow: none;
    box-shadow: none;
}

/* thumbnail overlay background */
.thumbnail-overlay {
    background-color: rgba(0,0,0,.40);
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out;
}

/* thumbnail overlay background (in the first grid change the initial background) */
#grid .thumbnail-overlay {
    background-color: rgba(0,0,0,0);
}

/* hover effect on the thumbnail-overlay */
.thumbnail-overlay:hover {
    background-color: rgba(0,0,0,.20) !important;
}

/* hover effect on the image */
.media-box-image img {
    -webkit-transition: all .6s ease-in-out;
    -moz-transition: all .6s ease-in-out;
    -o-transition: all .6s ease-in-out;
    -ms-transition: all .6s ease-in-out;
    transition: all .6s ease-in-out;
    -webkit-transform-origin: bottom left;
    -moz-transform-origin: bottom left;
    -o-transform-origin: bottom left;
    -ms-transform-origin: bottom left;
    transform-origin: bottom left;
}

.media-box-image:hover img {
    -webkit-transform: scale(1.2) translate(-20px);
    -moz-transform: scale(1.2) translate(-20px);
    -o-transform: scale(1.2) translate(-20px);
    -ms-transform: scale(1.2) translate(-20px);
    transform: scale(1.2) translate(-20px);
}

/* Change alignment in grid 2 */
#grid2 .thumbnail-overlay>div.aligment>div.aligment {
    vertical-align: bottom;
    padding-bottom: 40px;
}

.thumbnail-overlay .media-box-title {
    font-size: 16px;
}

.thumbnail-overlay .media-box-date {
    font-style: italic;
    font-size: 12px;
}

/* ======================================== 
BLOG
========================================  */
/* Style the search text field and the sort */
#search,.media-boxes-drop-down {
    float: right;
}

.media-boxes-drop-down {
    margin-right: 10px;
}

/* Remove the margin-bottom of the text */
.media-box-content .media-box-text {
    margin-bottom: 0 !important;
}

/* Footer style */
.media-box-footer {
    -webkit-box-shadow: inset 0 5px 5px -5px rgba(0,0,0,0.1);
    -moz-box-shadow: inset 0 5px 5px -5px rgba(0,0,0,0.1);
    box-shadow: inset 0 5px 5px -5px rgba(0,0,0,0.1);
}

.media-box-categories {
    margin: 0;
    font-size: 11px;
    color: #777;
}

.media-box-date {
    margin-bottom: 8px;
}

/* Style of date */
.media-box-date {
    font-size: 11px;
    color: #999;
    margin: 3px 0 0;
}
/* ======================================== 
FORM
========================================  */

.gform_wrapper .gform_body {width:100% !important}
.gform_wrapper ul.gform_fields li.gfield {padding:0 !important}
.gfield_label {font-family: 'brandon_grotesque_regularRg';color:#797979;font-size:13px !important;text-transform:uppercase;}
.gform_wrapper label.gfield_label {font-weight:normal !important;}


.gform_wrapper .gform_footer {padding:0 !important}
#popuppress-269 .pps-content h3 {color:#797979 !important;font-size:20px !important;text-align:center;
text-transform:uppercase;border-bottom:1px solid #eee;padding:10px 0 20px 0 !important;margin-bottom:30px !important}
.ginput_recaptcha {margin-top:13px}



#gform_fields_1, #gform_fields_2, #gform_fields_3 {margin:0;padding:0;list-style:none}
#gform_fields_1 li, #gform_fields_2 li,#gform_fields_3 li {padding:10px 0 !important}
input,textarea {
	width:100%;
	padding:10px;
	border:1px solid #ccc;
	margin-top:5px;
	font-family: 'brandon_grotesque_regularRg';
	color:#797979;
}
#gform_submit_button_2, #gform_submit_button_3,#gform_submit_button_1 {display:inline-block;width:auto;background:#333;border:none;padding:0 20px;cusor:pointer;line-height:30px;height:30px;font-size:13px;font-family: 'brandon_grotesque_regularRg';text-transform:uppercase;color:#fff;cursor:pointer}
#gform_submit_button_2:hover, #gform_submit_button_3:hover,#gform_submit_button_1:hover {background:#222}
.gfield_description.validation_message {color:#000}
.validation_error {color:#000;font-family: 'brandon_grotesque_regularRg';margin-top:20px;text-align:center;font-size:15px;}

/* ======================================== 
HOME PAGE TEXT
========================================  */

#hometext {padding:70px 0;display:none;border-top:1px solid #e1e1e1}
#hometext .wrap {max-width:960px}
.hometextbutton {z-index:10;display:none;}
.backtotop {z-index:9}

.home .hometextbutton {display:block;cursor:pointer}
	.hometextbutton img {width:10px;vertical-align:middle;margin:-2px 0 0 5px;transform: rotate(180deg);}
.home .hometextbutton.active img {transform: rotate(360deg);}

/* ======================================== 
MOBILE MENU
========================================  */

.slicknav_nav ul {margin:0 !important}
.slicknav_nav .menu {background:#fff;border-top:1px solid #eee;padding:20px 0}
.slicknav_menu .slicknav_menutxt {display:none !important}
.slicknav_btn {margin:0 !important;padding:0 20px !important;border-radius:0 !important;width:100%;box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.3);}
.slicknav_nav {box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.3);}
.slicknav_menu .slicknav_icon {    
	width: 2em;
    height: 85px;
    padding-top: 29px;
}
.slicknav_menu .slicknav_icon-bar {
    display: block;
    width: 100%;
    height: 0.2em;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
	background:#333 !important;
}
.slicknav_btn .slicknav_icon-bar + .slicknav_icon-bar {margin-top: .3em;}
.slicknav_menu {padding:0 !important}

.slicknav_nav li a {text-transform:uppercase;letter-spacing:1px;color:#aaabad;text-align:center}
a.slicknav_open {background:#fff !important}

/* ======================================== 
FOOTER
========================================  */

footer {
	width: 100%;
	padding:16px 0;
    border-top: 1px solid #e1e1e1;
    position: relative;
    margin: 0;
    font-size: 15px;
    line-height: 20px;
}
footer p {display:block;margin:0;color:#797979}
footer .columnheader {font-size:15px;line-height:17px}

footer ul {margin:0;padding:0;list-style:none;float:right;display:inline-block;}
footer ul li {float:left}
footer ul li a {display:inline-block;padding:7px 10px;color:#000;transition:0.5s}
footer .menu-footer-container {display:inline-block;float:right}
footer #logo {position:absolute;bottom:0;right:0;top:20px;}

.rowsplitlayout .col-2-2.left h3,.rowsplitlayout .col-2-2.right h3 {margin-top:20px}
.rowsplitlayout .col-2-2.left h4,.rowsplitlayout .col-2-2.right h4 {margin-bottom:0}

.buytickets {position:absolute;bottom:0;left:15px;border:1px solid #000;padding:5px 20px;color:#000;font-size:11px;margin-top:5px;transition:0.2s;clear:both;display:none;}
.buytickets:hover {border:1px solid #000;background:#000;color:#fff}
.col-3-3.home-events {padding:15px 15px 40px;position:relativ; width:20%;}
.col-3-3.home-events img {width:100%;height:auto;margin-bottom:20px}
.col-3-3.home-events h3 {min-height:40px}
.col-3-3.home-events span {text-shadow:none !important;}

.memberbtn {padding:5px 15px;border:1px solid #000;font-size:12px;display:inline-block;margin-top:10px;transition:0.2s}
.memberbtn:hover {background:#000;color:#fff}

@media screen and (max-width: 1240px) {
	footer #logo {display:none}
}

@media screen and (max-width: 1070px) {
	header .logotext {display:none}
}

@media screen and (max-width: 960px) {
	footer .col-4-4 {width:50%;padding-bottom:30px}
}
@media screen and (max-width: 880px) {
	nav a {padding:0 7px}
}

@media screen and (max-width: 760px) {
	.col-4-4 {width: 50%;}
	body,html,footer {
		font-size:17px;
	}
}

@media screen and (max-width: 650px) {
	footer .col-4-4 {width:100%;padding-bottom:30px}
	footer .col-4-4:last-child {padding-bottom:0px}
	.rowsplitlayout .col-2-2.left {padding-right: 0}
	.rowsplitlayout .col-2-2.right {padding-left: 0}
	.rowsplitlayout .col-3-3.left {padding-right: 0}
	.rowsplitlayout .col-3-3.right {padding-left: 0}
	.rowsplitlayout .col-3-3.middle {padding:0}
	.rowsplitlayout .col-3-3,.rowsplitlayout .col-2-2 {padding:15px 0}
	.col-2-2,.col-3-3,.col-4-4 {width: 100%;padding-bottom:20px}
	.mobile {display:block}
	.desktop {display:none}
	.rowsplitlayout.maps {display:none}
	.columns-4 .column {width: 100%;}
	.column {margin-right: 0;}
	.buytickets {left:0;font-size:15px}
	.col-3-3.home-events {padding-bottom:50px;margin-bottom:20px}
	.col-3-3.home-events {width:100%;}

}


.flexslider .slides img {height:auto}
.home .hometextbutton {display:none}

a.galcontatiner{
    display:block;
    width:212px;
}

.gallerydownload{    margin: auto;
    margin-bottom: 34px;
    width: 211px;
    padding-left: 0px;
    }
    
    .albump{text-align:center; margin-top:0px;}
    
    
        /* Delete Me after 23/12/2018 and change image field to mobile instead of home slider in home page template */
    
    .homethumb{
    display: block;
     width: 203px;
    height: 222px;
    overflow: hidden;}
    
    
    .col-3-3.home-events .homethumb img{
    width: 275%;
    padding-right: 53px;
    margin-left: -144px;}
    
    .page-id-118 .rowsplitlayout:first-child .buytickets {display:none;}
    
.ab {border: 1px solid #000;
    padding: 5px 20px;
    color: #000;
    font-size: 11px;
    margin:auto;
    margin-top: 15px;
    transition: 0.2s;
    clear: both;}
    
    @media (max-width:500px){
         .homethumb{
             width:100%;
             height:calc(100% - 40%);
             margin-bottom:20px;
         }
    }