/* some default styles go in textstyles.css so the editor looks more like the page.*/
/* ******************************************************************** */
/* jquery validate 														 */
/* ******************************************************************** */
.error {
	color:red;
}

/* ******************************************************************** */
/* Common elements 														*/
/* ******************************************************************** */
.contentwrap {
    max-width: 960px;
    margin:0 auto;
    position: relative;
    padding: 0 10px;
    box-sizing: border-box;
}
.row,.grid {
    display: table;
    width:100%;
    height: 1px;
}
.grid-row {
    display: table-row;
}
.col {
    display: table-cell;
    vertical-align: top;
}
.cell-content-wrap {
    min-height: 200px;
    height: 100%;
}
#content:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}
.loader {
    position: absolute;
    top:50%;
    left:50%;
    margin-top:-16px;
    margin-left:-16px;
}
.right {
    text-align: right;
}
/* ******************************************************************** */
/* group bar 														*/
/* ******************************************************************** */
.group-sites {
    background:#0e0e0e;
    color:#ddd;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}
.group-sites img {
    height: 40px;
    width:auto;
    vertical-align: middle;
}
.group-link {
    text-transform: uppercase;
    text-decoration: none;
    margin:0 20px;
}
.group-logo {
    vertical-align: bottom;
}
.group-menu {
    padding: 15px 0;
    -webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.5);
    box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.5);
    z-index: 100;
    position: relative;
}
.group-menu ul {
    position: absolute;
    right:0;
    top:0;
    bottom:0;
    line-height: 56px;
    margin:0;
    padding:0;
}
.group-menu li {
    display: inline-block;
}
.group-menu ul a {
    display: block;
    padding:0 15px;
    text-transform: uppercase;
    font-size: 21px;
    text-decoration: none;
}
@media only screen and (max-width:1024px) {
    .group-sites { 
        font-size: 12px;
    }
}
@media only screen and (max-width:760px) {
    .group-sites { 
        display: none; /* TODO: slide out menu on mobile? */
    }
}
/* ******************************************************************** */
/* whats on        														*/
/* ******************************************************************** */
.whats-on .events {
    text-align: justify;
}
.whats-on .event {
    display:inline-block;
    vertical-align: top;
    width:200px;
    padding-top:3px;
    padding-bottom:15px;
    border-top:6px solid #e6bb83;
    border-bottom:6px solid #e6bb83;
    font-size: 14px;
    margin-top:10px;
}
.whats-on .event header {
    text-transform: uppercase;
    font-size: 21px;
    font-family: "proxima-nova-alt-ext-cond",sans-serif;
}
.whats-on .event .location:before {
    content: "@ ";
}
.whats-on a {
    text-decoration: none;
}
.whats-on .event .body {
    background: #efede7;
    padding:5px;
}
.whats-on .show-more {
    width:100%;
    text-align: center;
    background: #e2ddd1;
    display: inline-block;
    padding:10px 0;
    margin:10px 0;
    font-weight: bold;
    font-size: 18px;    
    font-family: "Century Gothic", "Tw Cen MT", Futura, "URW Gothic L", Arial, sans-serif;
    text-transform: lowercase;
}
/* ******************************************************************** */
/* Events display        												*/
/* ******************************************************************** */
.a-events .pagewrap .event-map {
	float:right;
	padding-left:1.5%;
	padding-bottom:1.5%;
}
.a-events .pagewrap .event-map img {
	max-width:100%;
	height:auto;
}

.events a {
    text-decoration: none;
}
/* ******************************************************************** */
/* footer        														*/
/* ******************************************************************** */

footer.bottom .contentwrap {
    padding-bottom:50px;
}
.bykeo {
	position:absolute;
    left:10px;
    right:10px;
    bottom:10px;
    text-align: center;
}
.bykeo a {
	text-decoration:none;
}
.bykeo img {
	vertical-align:middle;
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
}

.bykeo a:hover img {
	-moz-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}

.checkout-col .footer-pub {
    max-width: 80%;
    display: block;
    margin-left:auto;
    margin-right: 0;
    height: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
    padding-top:25%;
    margin-bottom: 5%;
}
.footer-pub.longyard {
    background-image: url('/app/images/logo-longyard.png');
    width:76%;
}
.footer-pub.family {
    background-image: url('/app/images/logo-family.png');
    width:69%;
}
.footer-pub.southgate {
    background-image: url('/app/images/logo-southgate.png');    
    width:79.5%;
}
.footer-pub.thepub {
    background-image: url('/app/images/logo-thepub.png');
    width:54.5%;
}
/* ******************************************************************** */
/* facebook display														*/
/* ******************************************************************** */
.facebook-feed .image {
    background-size: cover;
    width:215px;
    height: 215px;
}

/* ******************************************************************** */
/* events														*/
/* ******************************************************************** */
#event-list .controls {
    float:right;
}
#event-list .control {
    background: #CCC;    
    padding: 2px 6px;
    display: inline-block;
    margin:1px;
    cursor: pointer;
}
#event-list .control img {
    vertical-align: middle;
}
.caltabs {
	font-size:0;
	margin-right:39px;
    display:block;
}
.caltabs .tab {
	background:#030b16;
	color:#fff;
    font-size:12px;
	padding:5px 20px;
	display:inline-block;
	vertical-align: bottom;
	text-transform: lowercase;
	cursor: pointer;
}
.caltabs .tab.active, .caltabs .tab:hover {
	background-color: #e6bb83;
	padding:10px 20px;
}
.event-content .caltabs {
    display: inline-block;
    vertical-align: middle;
    margin-left:20px;
}
.calendarwrap .caltabs {
    margin:10px 0;
}

/****** Fix "squished" google map controls *****/
#map .gm-style img {
    max-width: none; 
}
.google-map {
    color:#000;
}
.google-map > div {
    top:0;
}

/**** Instagram ****/

.instagram-pics {
    height: 0;
    padding-top:32%;
    position: relative;
}
.instagram-title {
    position: absolute;
    /*background-image: url('/app/images/longyard/instagram-logo.png');*/
    background-size: contain;
    top: 5%;
    left: 2%;
    width: 22%;
    height: 46%;
    background-repeat: no-repeat;
}
.instagram-tag {
    position: absolute;
    /*background-image:url('/app/images/longyard/tag-on-instagram.png');*/
    background-size: contain;
    top: 54%;
    left: 5%;
    width: 15.5%;
    height: 25%;
    background-repeat: no-repeat;
}
.instagram-film-strip {
    position: absolute;
    background-image:url('/app/images/film-strip.png');
    background-size: contain;
    top: 5%;
    left: 63%;
    width: 11.9%;
    height: 80%; 
    background-repeat: no-repeat;
}
.instagram-film-strip:after {
    content:"";
    display: block;
    background: url('/app/images/longyard/Tack.png');
    position: absolute;
    top: -3%;
    left: 31%;
    width: 25.9%;
    height: 12%;
    background-size: contain;
    background-repeat: no-repeat;
}
.instagram-frame-1 {
    position: absolute;
    background-image:url('/app/images/Photo%20Frame-1.png');
    background-size: contain;
    top: 5%;
    left: 25%;
    width: 22%;
    height: 80%;   
    background-repeat: no-repeat;
}
.instagram-frame-1:after {
    content: "";
    display: block;
    background: url('/app/images/tape.png');
    position: absolute;
    background-size: contain;
    top: 5%;
    left: 0%;
    width: 24.9%;
    height: 7%;
    transform: rotate(-31deg);
    background-repeat: no-repeat;
}
.instagram-frame-2 {
    position: absolute;
    background-image:url('/app/images/photo-frame-2.png');
    background-size: contain;
    top: 16%;
    left: 45%;
    width: 22%;
    height: 75%; 
    background-repeat: no-repeat;
}
.instagram-frame-2:before {
    content: "";
    display: block;
    background: url('/app/images/tape.png');
    position: absolute;
    background-size: contain;
    top: -5%;
    left: -7%;
    width: 24.9%;
    height: 8%;
    transform: rotate(45deg);
    background-repeat: no-repeat;
}
.instagram-frame-2:after {
    content: "";
    display: block;
    background: url('/app/images/tape.png');
    position: absolute;
    background-size: contain;
    top: -4%;
    left: 64%;
    width: 24.9%;
    height: 8%;
    transform: rotate(5deg);
    background-repeat: no-repeat;
}
.instagram-frame-3 {
    position: absolute;
    background-image:url('/app/images/photo-frame-3.png');
    background-size: contain;
    top: 10%;
    left: 74%;
    width: 22%;
    height: 78.5%;
    background-repeat: no-repeat;
}
.instagram-photo {
    position: absolute;
    /*background-size: cover;*/
    background-position: center;
    background-repeat: no-repeat;
}
.instagram-photo-1 {
    top: 10%;
    left: 10%;
    right: 8.5%;
    bottom: 22%;
    transform: rotate(3deg);
}
.instagram-photo-2 {
    top: 7%;
    left: 9%;
    right: 10%;
    bottom: 24.5%;
    transform: rotate(-2.8deg);
}
.instagram-photo-3 {
    top: 5.5%;
    left: 5.5%;
    right: 6.5%;
    bottom: 22%;
    transform: rotate(1deg);
}
.instagram-photo-4 {
    top: 4%;
    left: 30%;
    right: 9.5%;
    bottom: 69%;
    transform: rotate(10deg);
}
.instagram-photo-5 {
    top: 34%;
    left: 21%;
    right: 19.5%;
    bottom: 40%;
    transform: rotate(10deg);
}
.instagram-photo-6 {
    top: 62.5%;
    left: 10%;
    right: 28.5%;
    bottom: 11%;
    transform: rotate(10deg);
}
@media only screen and (max-width:760px) {
    .instagram-section {
        display: none;
    }
}