/*
Theme Name: Optimal Performance Fitness
Theme URI: https://www.unitedgraphicdesign.com
Description: Optimal Performance Fitness Website
Version: 1.0
Author: Richard Boydell
Author URI: http://www.unitedgraphicdesign.com/
*/

html, body {
	margin: 0; 
	padding: 0; 
	background-color: var(--black); 
	color: var(--white);
	font-family: "itc-avant-garde-gothic-pro", sans-serif; 
	font-size: 1em; 
	font-weight: 300; 
	height: 100%; 
	line-height: 1.4; 
	scroll-behavior: smooth;
}

.background-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url("images/default.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top center;
	opacity: 0.4;
}


/* Universal Styles */

.clear {clear:both;}

h1, h2, h3, h4 {font-weight: 500; font-style: normal; margin-bottom: 0.2em; line-height: 1.1;}
h1 {font-size:2.8em;}
h2 {font-size:2.2em;}
h3 {font-size:1.8em;}
h4 {font-size:1.3em;}

h1.page-title {color: var(--red);}

a {
	color: inherit;
	font-weight: 500;
} 

a:hover {text-decoration:none;}

.alignleft {float:left; margin:15px 15px 15px 0;}
.alignright {float:right; margin:15px 0 15px 15px;}

strong {font-weight: 500;}

img {max-width:100%; height: auto;}

hr {display: block; content: ''; margin: 1.5em auto; border-style:solid; border-width: 5px; border-color:inherit; opacity: 0.1; clear: both;}

blockquote {font-style: italic; margin: 0.25em 0; padding: 0.25em 40px; line-height: 1.45; position: relative;}

.wrapper {margin:0 auto; max-width:1200px; position: relative; height: 100%;}

* {box-sizing: border-box;}

.wrapper {max-width: 1200px; margin: 0 auto;}
.smallwrapper {max-width: 1000px; margin: 0 auto; padding-top: 60px;}
.row {position: relative;}
.row:after, .wrapper:after, .smallwrapper:after {content: ""; clear: both; display: block;}
.block {padding: 60px 30px;}
.block .col-12, .block .col-6, .block .col-5, .block .col-7 {padding: 0 30px;}
.block h1, .block h2 {margin-top: 0;}

[class*="col-"] {float: left; padding: 30px; width: 100%;}

@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}


/* Colours */

:root {
	--black: #000;
	--red: #b02a30;
	--silver: #807b80;
	--grey: #EAEAEA;
	--white: #FFF;
}


/* Header */

.header {padding: 0 !important; position: relative; }
.header-feature {position: absolute; top:0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover;}
.header-feature::before, #slider::after {display: block; content: ''; position: absolute; top:0; left: 0; width: 100%; height: 400px; background-image: linear-gradient(to bottom, rgba(0,0,0,1.0), rgba(0,0,0,0)); z-index: 10;}
.header-wrapper {margin:0 auto; max-width:1200px; position: relative; display: flex; align-items: center; z-index: 999;}
.logo {
	float: left;
	padding: 15px 30px;
	width: 20%;
}

.exhibit-header {background-color:#000;}


/* Navigation */

#navigation {width: 80%; float: right; font-weight: 500; font-size: 1.1em; padding: 0;}
nav {margin: 0; text-align: right;}
nav ul {padding: 0; margin:0; list-style: none; position: relative;}
nav ul li {padding: 0; margin: 0 1px; display:inline-block; text-align: left;}
nav a {display:block; padding: 10px 15px; text-decoration:none;transition: 0.3s ease; color: #FFF;}
nav a:hover {opacity:0.5; text-decoration:none;}
nav ul ul {display: none; position: absolute; top: 100%;}
nav ul li:hover > ul {display:inherit;}
nav ul ul li {z-index: 9999; min-width:170px; display:list-item; position: relative; background-color:#EEEEEE; border-bottom: 1px solid #FFFFFF; font-size: 0.9em; margin: 0;}
nav ul ul li a {color: var(--black);}
nav ul ul ul {position: absolute; top:0; left:100%;}
nav li > a:after {content:  " +"; font-size: 0.8em;}
nav li > a:only-child:after {content:"";}
ul#menu-main-menu.menu, ul#menu-main-menu-1.menu, ul#menu-main-menu-welsh.menu, ul#menu-main-menu-welsh-1.menu {list-style-type: none; list-style-image: none; margin: 0; padding: 0;}
ul#menu-mobile-menu.menu {list-style-type: none; list-style-image: none;}
@media only screen and (min-width: 768px) {.sidenav, .menu-button {display: none;}} 


/* Secondary Navigation */

#breadcrumbs-wrap {background:#FAFAFA; margin-bottom: 30px;}
#breadcrumbs {padding: 10px 30px; font-size: 0.8em;}
#breadcrumbs a {font-weight: 500; text-decoration: none;}
#breadcrumbs a:hover {text-decoration: underline;}


/* Slider */

#slider {position: absolute; top:0; left: 0; width: 100%; height: 100%; z-index: -9999;}
.slidebox {color: #FFF; font-size: 1.05em; height: 100%;}
.slidebox h1 {-webkit-margin-before: 0 !important; margin-top: 0 !important;}
.slidetext {padding-top: 60px;}
.slidetext h1, .slidetext h2, .slidetext h3, .boxwrap h2 {color: #FFF !important;}
.slide img {max-height: 600px; overflow: hidden; object-fit: cover;}


/* Content */

.content {}
.content a {font-weight: 500;}
.content h2, .content h3, .content h4 {color: var(--silver); margin-bottom: 10px;}
.content h1 {margin-top: 0;}
.date {font-weight: 500;}

.highlight {padding: 30px; margin: 30px 0; border-radius: 0 45px 0 45px;}
.highlight > :first-child {margin-top: 0 !important;}
.highlight > :last-child {margin-bottom: 0 !important;}

.image {max-height: 600px; object-fit: cover; overflow: hidden; object-position: center;}

.quote {padding: 30px; margin: 30px 0; border-radius: 0 45px 0 45px; font-family: marydale, sans-serif; font-weight: 400; font-size: 1.4em;}
.quote::before {display: inline-block; height:30px; content: "\02EE"; font-weight: 900; font-size: 3em; line-height: 1;}
.quoter {font-weight: 500;}


/* Sidebar */

.sidebar {}
.sidebar ul, .sidebar li {list-style: none; -webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-padding-start: 0;}
.sidebar h3 {-webkit-margin-before: 0; -webkit-margin-after: 0.83em; color:#00738B;}
.sidebar .widget {padding: 30px; margin-bottom: 30px; border-bottom: 8px solid #6E2F70; background: rgba(110,47,112,0.1);}
.widget_subpages li a {display: block; padding: 5px; border-bottom: 1px dashed #5A556E; text-decoration: none;}

.rpwwt-post-title {font-weight: 500; line-height: 1.2;}
.rpwwt-post-date {font-size: 0.75em;}


/* Videos */

.video-wrap {width: 100%; margin:auto; display:block; position: relative; z-index: 0; text-align: center; min-height: 200px;}
.video-wrap > video {top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}


/* Embeds */

.embed-container {position: relative; padding-bottom: 56.25%; overflow: hidden; max-width: 100%; height: auto;} 
.embed-container iframe, .embed-container object, .embed-container embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}


/* Image Carousel */

.image-carousel {padding: 0 30px 60px;}
.carousel img {max-height: 500px; overflow: hidden; object-fit: cover;}


/* Events & Services */

.service-wrap {display: flex; flex-wrap: wrap; margin: 30px 0;}
.service {width:31.33%; margin:1%; display: block; padding:0; text-align: center; transition: 0.3s ease; position: relative;}
.service-image {height:200px; background-size: cover; background-repeat: no-repeat; background-position: center; transition: 0.3s ease;}
.service:hover {transform: scale(1.05);}
.service-content {padding: 15px 30px 75px; font-weight: 400;}
.service-title {color: #283264; font-size: 1.5em; line-height: 1.2; font-weight: 500;}
.service-link {position: absolute; bottom:30px; left:50%; transform: translateX(-50%); width: 80%; padding:10px; text-decoration: none;  background-color: #283264;}
.service a {text-decoration: none; font-weight: 400 !important;}
.service-link a {color: #FFF; text-decoration: none; font-weight: 500;}
.service-link a:hover {opacity: 0.8; text-decoration: none;}

.service-ig {width:25%; margin:1% 0; display: block; padding:0; text-align: left; transition: 0.3s ease; position: relative;}
.service-ig-content {padding-right: 20px;}
.service-ig-content p {font-size: 0.9em;}
.service-ig-content img {margin-bottom: 15px;}

.pagination {text-align: center; padding: 15px;}


/* Galleries */

.gallery-wrap {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}
.gallery-thumb {
	width: calc(20% - 15px);
	aspect-ratio: 1/1;
	margin: 7.5px;
	overflow: hidden;
	object-fit: cover;
	object-position: center;
}
.caption-title {font-size: 1.2em; background: #FFFFFF; padding: 15px 15px 20px; margin:0; -webkit-margin-before: 0; -webkit-margin-after:0;}


/* News Archive */

.news-thumb {padding: 30px 30px 30px 0; max-width: 300px;}
.news-block {padding: 30px 0;}
.news-block h2 {margin-top: 0;}


/* Single Post */

.single-date {display: inline-block; margin: 5px 0; padding:5px 10px; border-bottom: 4px solid #00A6CD; background: rgba(0,166,205,0.1); font-size: 0.75em;}


/* Social Share */

.social {text-align: center; display: block; clear: both; font-size: 0.75em; text-transform: uppercase; padding: 15px 30px 30px;}
.social p {font-weight: 300; font-size: 0.85em; text-transform: uppercase;}
.social li {display: inline-block; text-align: center; font-family: FontAwesome; font-size: 1.3em; margin-left: 10px; }
.social .email:before {content: '\f0e0';}
.social .email:hover {color: var(--red);}
.social .tweet:before {content: '\f099';}
.social .tweet:hover {color:#00acee;}
.social .facebook:before {content: '\f09a';}
.social .facebook:hover {color:#3578E5;}


/* Forms */

input[type=text], input[type=email], input[type=tel], input[type=password], textarea {
    width: 100%;
    padding: 10px;
    margin: 5px 0;
	border:1px solid #BFC9D0;
    font-size: 1em;
}

input:matches([type="button"], [type="submit"], [type="reset"]) {
    display: inline-block;
	text-decoration: none;
	border: 1px solid;
	padding: 10px 15px;
    background: #32546c;
    color: #FFF;
    font-weight: 500;
    font-size: 1.1em;
    font-family: "itc-avant-garde-gothic-pro", sans-serif;
}


/* Tables */

table {
    width: 100%;
    padding: 0;
    text-align: left;
    border-collapse: collapse;
}

table, thead, td {
   border: 1px solid #eeeeee;
}

thead, td {
   padding: 15px;
}

thead {
    background: #00738B;
    color: #FFF;
    font-weight: 500;
}


/* Footer */

#footer {
	font-size: 0.9em;
	background-color: var(--black);
	color: var(--white);
}
#footer h2 {
	font-size: 1.6em;
	margin-top: 0;}
#footer a {
	color:inherit;
	text-decoration: none;
}
#footer a:hover {
	opacity: 0.5;
}
#footer img {
	margin: 5px;
}
#footer li, #footer ul {
	list-style-type: none;
	list-style-image: none;
	padding: 0;
	margin: 0;
}
#footer .alignleft {
	margin-top: 0;
}
.foot1 {
	text-align: left;
}
.foot2 {
	text-align: center;
}
.foot3 {
	text-align: right;
}
ul#menu-footer-menu.menu {
	padding: 0 !important;
	margin: 0 !important;
	-webkit-padding-start: 0 !important;
	-webkit-margin-before: 0 !important;
}
.menu-footer-menu-container, .menu-footer-menu-welsh-container {
	margin-top: 15px;
}
.copyright {
	text-align: center;
	font-size: 0.8em;
}