/*
Theme Name: Chalmers Sexual Health
Theme URI: http://www.45b.co.uk
Description: Theme for Chalmers Sexual Health
Author: 45b 
Version: 1.0
License: GNU General Public License
License URI: license.txt
Tags: 
*/

/* CSS Document */

.row {max-width: 1170px;}

body {background: #fff; color: #000; font-family: 'Roboto', sans-serif;}
body p {font-size: 1.0em; font-weight: 300;}
body ul {font-size: 1.0em;}
body figure {font-size: 1.0em;}

a, input, span {-webkit-transition: color 0.4s, background 0.4s, border 0.4s;
-moz-transition: color 0.4s, background 0.4s, border 0.4s;
transition: color 0.4s, background 0.4s, border 0.4s;}

h1, h2, h3, h4, h5, h6 {font-family: 'Roboto', sans-serif; font-weight: 400; margin-bottom: 1em;}
h1 {font-size: 2.8em; margin-bottom: 0.8em; color: #21395f;}
h2 {font-size: 1.8em; color: #21395f;}
h3 {font-size: 1.6em; color: #21395f;}
h4 {font-size: 1.4em; color: #21395f;}
h5 {font-size: 1.2em; color: #21395f;}
h6 {font-size: 1.1em; color: #21395f;}

a {color: #5f87c4;}
a:hover, a:focus {color: #333; cursor:pointer;}

.skip {position: absolute; left: -999em; width: 990em;}
a.skip:active, a.skip:focus {left: -8.5em; border: 3px #3399cc solid; background-color: #fff;}

/* Top Bar */
.row-tint {background: #f9f9f9; padding-top: 0.5em; padding-bottom: 0.5em;}
.row-dark {background: #333; padding-top: 0.5em; padding-bottom: 0.5em;}
.row-blue {background: #5f87c4;}

.shadow {-webkit-box-shadow: 0px 4px 5px 1px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 4px 5px 1px rgba(0,0,0,0.75);
box-shadow: 0px 4px 5px 1px rgba(0,0,0,0.75); z-index: 10; position: relative;}

.top-fixed {}

.hide-site-box {position: fixed; right: 0; bottom: 0; text-align: right; z-index: 1000;}


.hide-site {display: inline-block; background: #21395E; color: #fff; text-transform: uppercase; padding: 0 0.5em 0 0; line-height: 1.4em;}
.hide-site i {background: #21395E; padding: 0.2em; line-height: 1.5em; margin-right: 0.2em;}
.hide-site:hover {background: #000; color: #fff;}

.csh-logo-small img {height: 25px;}

.top-menu {}
.menu-top-menu-container {display: inline;}
.top-menu ul {display: inline; margin: 0; padding: 0; list-style: none;}
.top-menu ul li {display: inline; margin-right: 1em;}
.top-menu ul li a {color: #333;}
.top-menu ul li a:hover {color: #5f87c4;}

.top-menu ul li.current-menu-item a, .top-menu ul li.current-page-ancestor a {color: #5f87c4;}


/* Search */
.search-container {text-align: left;}
#searchinput {display: inline;}
input.menu-searchbox {display: inline-block; width: 185px; height: 26px!important; margin-bottom: 0;}
input.menu-searchbox:focus {box-shadow: none;}
input[type=submit].menu-searchbutton {display: inline; height: 26px!important; border: none!important; background: #5f87c4; color: #fff;}
input[type=submit].menu-searchbutton:hover {background: #000; color: #fff;}
.menu-search {float: right;}

/* Header */
header {margin-top: 0;}
.logo {padding-top: 10px; padding-bottom: 10px;}
.book-now {padding-top: 25px; text-align: right;}
.book-button {display: inline-block; text-align: center; background: #4977BC; color: #fff; padding: 0.5em; font-weight: bold; font-size: 0.7em;}
.book-button:hover {background: #000; color: #fff; padding: 0.5em 1em;}
.book-button i {margin-right: 0.5em;}

/* Main Menu */
.main-menu {font-size: 0.9em; color: #fff;}
.main-menu ul {display: inline; margin: 0; padding: 0; list-style: none;}
.main-menu ul li {display: inline;}
.main-menu ul li a {color: #a4c4f6;}
.main-menu ul li a:hover {color: #fff;}
.main-menu ul li:after {content: '.'; padding-left: 0.3em; padding-right: 0.1em;}
.main-menu ul li.active a, .main-menu ul li.current-page-ancestor a {color: #fff;}


.csh-logo-small {float: left; margin: 0 1em 0 0; padding: 0; display: none;}
.menu-fixed {
z-index: 100;
width: 100%;
}

#mobile-menu-toggle {text-align: right; color: #fff; font-weight: bold; font-size: 0.9em; cursor: pointer;}
#mobile-menu {display: none;}
#mobile-menu ul {list-style: none;}
#mobile-menu ul li {padding: 0.4em 0; border-bottom: 1px solid #a4c4f630;}
#mobile-menu ul li a {color: #a4c4f6;}
#mobile-menu ul li a:hover {color: #fff;}
.icon-arrow-up:after {font-family: "Font Awesome 5 Free"; content: "\f078"; padding-left: 0.5em;}
.icon-arrow-down:after {font-family: "Font Awesome 5 Free"; content: "\f077"; padding-left: 0.5em;}


/* Slideshow */
.home-slideshow {position: relative;}
.home-orbit {visibility: hidden;}
.slide-image {background-position: 50% 50%; min-height: 240px;}

.slide-text {min-height: 240px; color: #fff; display: flex; justify-content: center; align-items: left; flex-direction: column; text-align: center;}

.slide-text h1 {font-size: 1.6em; color: #fff; margin: 0; font-weight: 300; text-shadow: 0px 0px 6px #000000;}
.slide-text p {font-size: 1.2em; text-shadow: 0px 0px 3px #000000;}
.slide-overlay {min-height: 240px; background: url(assets/img/images/head-gradients2.png); background-size: cover; background-repeat: no-repeat; background-position: center center;}
.slide-text a {color: #fff;}



/* Arrows */
.orbit-container .orbit-prev, .orbit-container .orbit-next {
position: absolute;
top: 47%;
margin-top: -21px;
width: 32px;
height: 62px;
line-height: 42px;
background-color: none;
text-indent: -9999px !important;
z-index: 10;
}

.orbit-container .orbit-prev span,
.orbit-container .orbit-next span {
    border: none;
}

.orbit-timer {display: none;}
.orbit-bullets {margin-top: -38px;}
.orbit-bullets li.active {background: #fff;}



/* Home Panels */
.home-panels {margin-top: 3em; margin-bottom: 1em;}

.home-panel {
-webkit-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.45);
-moz-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.45);
box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.45);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

.home-panel-image {height: 120px; background-size: cover; background-position: 50% 50%; background-repeat: no-repeat;}
.home-panel-text-box {height: 80px; display: flex; justify-content:  flex-start; align-items: center; flex-direction: row; background: #fff;}

.triangle {
float: left; display: inline;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 10px 10px;
margin-right: 5px;
border-color: transparent transparent transparent #5f87c4;
	
}
.home-panel-text {display: inline; text-transform: uppercase;}
.home-panel-text {color: #333;}

/* Panels SlideUp */
.feature-panel {position: relative; overflow:hidden; min-height: 200px; margin-bottom: 2em; font-size: 0.9em;}

.panel-desc {	
	color: #fff;
    position:absolute;
	width: 100%;
	height: 100%;
    top:100%;
    left:0;
	padding: 0.5em 1.0em;
	background: #666;
	text-align: left;
	-webkit-transition: color 0.4s, background 0.4s, border 0.4s;
-moz-transition: color 0.4s, background 0.4s, border 0.4s;
transition: color 0.4s, background 0.4s, border 0.4s;
}
.panel-desc-slide {
color: #fff;
}

/* Twitter */
.twitter-icon {color: #fff; font-size: 5em; opacity: 0.3;}
.twitter-feed {color: #fff; padding-top: 2em; padding-bottom: 2em;}

.twitter-feed a {color: #fff; text-decoration: underline;}


/* Page Title */
.page-title {min-height: 85px; background: #5f87c4;}
.gradient-overlay {min-height: 85px; background: url(assets/img/images/head-gradients2.png); background-size: cover; background-repeat: no-repeat; background-position: center center;}
.title-text {min-height: 85px; display: flex; justify-content: center; align-items: left; flex-direction: column;}
.title-text h1 {margin: 0.5em 0; color: #fff; font-size: 2em;}

/* Main */
.main {margin-top: 2em; margin-bottom: 2em;}
.main a {color: #5f87c4;}
.main a:hover {color: #000;}

.main a.book-button {display: inline-block; text-align: center; background: #4977BC; color: #fff; padding: 0.5em 1em; font-weight: bold;}
.main a.book-button:hover {background: #000; color: #fff; padding: 0.5em 1em;}
.main a.book-button i {margin-right: 0.5em;}


/* Accordions */
.accordion {margin-left: 0; margin-right: 0; margin-bottom: 1em;}
.accordion .accordion-navigation>a, .accordion dd>a {background: #fafafa;}
.accordion h4 {margin-bottom: 0;}
.accordion-navigation {border-bottom: 1px solid #ccc; }
.accordion-navigation h4:after {content: "+"; position: absolute; right: 30px;}
.accordion-navigation.active h4:after {content: "-"; position: absolute; right: 30px;}
.accordion .accordion-navigation>.content.active {background: #f9f9f9;}
.accordion .content a {color: #1d627c;}
.additional-links {padding-top: 2em;}






/* Focus Panel */
.focus-panels {margin-top: 2em; margin-bottom: 2em;}
.focus-panel {color: #999;
-webkit-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.45);
-moz-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.45);
box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.45);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;}
.focus-panel h3 {color: #fff; padding: 0.5em; margin-bottom: 0;
-webkit-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;}
.focus-panel a {color: #1d627c;}
.focus-panel-text {padding: 1.5em 1em 1em 1em;}
/*.focus-panel:before {
  content: '';
  display: block;
  height: 100%;
  left: 15px;
  position: absolute;
  right: 15px;
  z-index: -1;
  -webkit-backface-visibility: hidden;
-webkit-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.45);
-moz-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.45);
box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.45); 
}*/
/*.focus-panel:before {
  top: 0;
  -webkit-transform: skewY(-1.5deg);
          transform: skewY(-1.5deg);
  -webkit-transform-origin: 0 100%;
          transform-origin: 0 100%;
}*/

/* Subpage Panels */

.subpage-panels {padding-top: 2em; padding-bottom: 2em;}
.subpage-panel {background: linear-gradient(to right, #5f87c4 50%, white 50%); background-size: 200% 100%; background-position:right bottom;
-webkit-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.45);
-moz-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.45);
box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.45); 
display: flex; justify-content:  flex-start; align-items: center; flex-direction: row; 
padding-top: 2em; padding-bottom: 2em; margin-bottom: 1em; color: #333; 
text-transform: uppercase; font-weight: bold;
transition:all 0.4s ease;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;}

.subpage-panel:hover {background-position:left bottom!important; color: #fff;} 


/* News */
.news-panel {position: relative; padding: 2em; color: #333; margin-bottom: 1em;
-webkit-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.2);
box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.2);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;}

.news-panel:hover {background: #fafafa;}
.news-panel p {margin-bottom: 0;}
.news-panel h3 {}
.postInfo {display: inline-block; position: absolute; top:0; right: 0; font-weight: bold; font-size: 0.8em; margin-bottom: 1em; background: #21395f; color: #fff; padding: 0.5em 1em;
-moz-border-radius: 0px 10px 0px 0px;
-webkit-border-radius: 0px 10px 0px 0px;
border-radius: 0px 10px 0px 0px;} 

.postCats {margin-top: 1em; border-top: 1px solid #efefef; border-bottom: 1px solid #efefef; font-weight: 300; font-size: 0.9em;}

.news-sidebar h4 {margin-bottom: 0.2em;}


/* Downloads */
.leaflet-container {padding: 1em; margin-bottom: 1em; border: 1px solid #efefef;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;}
.leaflet-container:hover {background: #efefef;
-webkit-transition: color 0.4s, background 0.4s, border 0.4s;
-moz-transition: color 0.4s, background 0.4s, border 0.4s;
transition: color 0.4s, background 0.4s, border 0.4s;}


/* Footer */
footer {background: #333; color: #fff; padding-top: 2em; padding-bottom: 2em;}
footer h4 {color: #fff; font-weight: bold; font-size: 1.4em;}
footer a {color: #84a9e3;}
footer a:hover {color: #fff;}

.legal {padding-top: 10px; padding-bottom: 10px; font-size: 0.8em; color: #999; border-top: 1px solid #fafafa;}
.legal a {color: #777;}

/* Search Results */
.postList {margin-bottom: 2em; padding-bottom: 1em; border-bottom: 1px solid #efefef;}

/* Pagination */
.pagination {margin: 2em 0; text-align: left;}
ul.pagination li a, ul.pagination li span {padding: 7px 15px;}
ul.pagination .current {display: block; background: #5f87c4; color: #fff;}
ul.pagination .current:hover {background: #5f87c4;}
ul.pagination li a, ul.pagination li button {border-radius: 0;}
















select {width: auto; display: inline; padding-right: 30px;}

/* Contact CTA */
.contact-cta {padding: 0.75em 0; font-size: 3em; color: #fff; text-align: center;}
.contact-cta p {font-weight: 300; margin: 0;}







/* Sidebar */
.additional {margin-top: 2em; margin-bottom: 2.0em;}
.additional ul {list-style: none; margin: 1.0em 0; padding: 0; font-size: 0.9em;}

.additional ul li {padding: 0.5em 1em; margin-bottom: 0.5em; background: #fafafa;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-transition: color 0.4s, background 0.4s, border 0.4s;
-moz-transition: color 0.4s, background 0.4s, border 0.4s;
transition: color 0.4s, background 0.4s, border 0.4s;}
.additional ul li:hover {background: #efefef;}
.additional ul li:hover ul li:hover {background: #dfdfdf;}
.additional ul li:hover ul li:hover ul li:hover {background: #ccc;}

.additional ul li a:before {font-family: "Font Awesome 5 Free"; content: "\f111"; padding-right: 0.5em; font-weight: 400;}
.additional ul li a {display: block; color: #666; padding: 0; margin: 0;}
.additional ul li a:hover {color: #000;}

.additional ul li ul li a:before {font-family: "Font Awesome 5 Free"; content: "\f111"; padding-right: 0.5em; font-weight: 400;}

.additional ul li.current_page_item a,  .additional ul li.current_page_parent a {color: #5f87c4; font-weight: bold;}
.additional ul li.current_page_item a:before {color: #5f87c4;}



.additional ul li.current_page_parent ul li a {color: #5f87c4; font-weight: normal;}
.additional ul li.current_page_parent ul li.current_page_item a {font-weight: 800;}

.additional ul li ul {font-size: 1.0em;}
.additional ul li.current_page_item, .side-menu ul li.current_page_parent {display: block;}
.additional ul li.current_page_item ul li, .side-menu ul li.current_page_parent ul li {display: block;}
.additional ul li.current_page_item a:before {font-family: "Font Awesome 5 Free"; content: "\f192"; padding-right: 0.5em; font-weight: 400;}
.additional ul li.current_page_item ul li a:before {font-family: "Font Awesome 5 Free"; content: "\f111"; padding-right: 0.5em; font-weight: 400;}

/* On-Off nav */

.additional  ul li ul,
.additional .current_page_item ul ul,
.additional .current_page_ancestor ul ul,
.additional .current_page_ancestor .current_page_item ul ul,
.additional .current_page_ancestor .current_page_ancestor ul ul {
	display: none;
	}

.additional .current_page_item ul,
.additional .current_page_ancestor ul,
.additional .current_page_ancestor .current_page_item ul,
.additional .current_page_ancestor .current_page_ancestor ul,
.additional .current_page_ancestor .current_page_ancestor .current_page_item ul,
.additional .current_page_ancestor .current_page_ancestor .current_page_ancestor ul {
	display: block;
	}

/* 3rd Level Nav */

.additional ul li ul.children {clear: both;; border-top: 0; font-size: 0.85em; margin-bottom: 0; font-weight: normal;}
.additional ul li ul.children li {padding-left: 0; border: none;}
.additional ul li ul.children li a {padding-left: 15px;}
.additional ul li.current_page_item ul li a {font-weight: normal!important;} 
.additional ul li.current_page_item {font-weight: bold;}
.additional ul li.current_page_item ul.children li {font-weight: normal;}
.additional ul li.current_page_parent {font-weight: bold;}
.additional ul li.current_page_parent ul.children li {font-weight: normal;}
.additional ul li ul.children li.current_page_item {font-weight: bold;}

/* 4th Level Nav */

.additional ul li ul.children li ul{clear: both;; border-top: 0; font-size: 0.85em; margin-bottom: 0; padding-left: 15px; font-weight: normal;}
.additional ul li ul.children li ul li {padding-left: 0; border: none;}
.additional ul li ul.children li ul li a {padding-left: 15px;}
.additional ul li.current_page_item ul li a ul li a {font-weight: normal!important;} 


/* Sitemap */
.sitemap-container {background: #fafafa; padding: 1em; margin-top: 2em;}
.sitemap-col {width: 100%;}
.sitemap-container ul li a {font-weight: bold; font-size: 1.2em;}
.sitemap-container ul ul li a {font-weight: normal; font-size: 1em;}





select {border: 1px solid #ccc;}
input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input.wpcf7-submit[type=submit] {
height: inherit; 
border: 1px solid #ccc; 
}
textarea[rows], textarea {
border: 1px solid #ccc;
}

div.wpcf7 .ajax-loader {width: 0!important; margin: 0!important;}
div.wpcf7-response-output {margin-top: 3em!important;}
input[type=submit] {border: none;}


.video-container, .map-container {
position: relative;
padding-bottom: 56.25%; /* This is the aspect ratio*/
height: 0;
overflow: hidden;
}
.video-container iframe, .map-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}


/* MEDIA QUERIES */

@media screen and (min-width: 200px) {

}
@media screen and (min-width: 480px) {

}
@media screen and (min-width: 600px) {
.home-panel {float: left; width: 48%; margin-right: 2%;} 
}
@media screen and (min-width: 960px) {
.slide-text h1 {font-size: 3.0em;}	
.home-panel {float: left; width: 18%; margin-right: 2%;}
.title-text h1 {font-size: 2.6em; margin: 0;}
.book-button {padding: 0.5em 1em; font-size: 0.8em;}
.sitemap-col {float: left; width: 30%;}
}
@media screen and (min-width:1024px) {
header {margin-top: 40px;}
.top-fixed {position: fixed; top: 0; width: 100%; z-index: 1000;}	
.book-button {font-size: 1em;}
.menu-fixed {top: 42px; z-index: 100; position: fixed; width: 100%;}
.book-now {padding-top: 30px; text-align: right;}
.search-container {text-align: right;}
}