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

/* CSS Document */



/* General */

.row {max-width: 1170px;}
body {background: #fff; color: #333; font-family: 'Open Sans', arial, helvetica, sans-serif;}
body p {font-size: 1.0em; font-weight: 400;}
body ul {font-size: 1.0em;}
body figure {font-size: 1.0em;}
body a {color: #310c64;}
body a:hover {color: #000;}

h1,h2,h3,h4,h5,h6 {margin-bottom: 1em;}

h1 {font-size: 2.6em; font-family: 'Open Sans', arial, helvetica, sans-serif; color: #244772; font-weight: 300;}
h2 {font-size: 2.2em; font-family: 'Open Sans', arial, helvetica, sans-serif; color: #244772; font-weight: 300;}
h3 {font-size: 1.6em; font-family: 'Open Sans', arial, helvetica, sans-serif; color: #244772; font-weight: 300;}
h4 {font-size: 1.4em; font-family: 'Open Sans', arial, helvetica, sans-serif; color: #656ac9; font-weight: 300;}
h5 {font-size: 1.2em; font-family: 'Open Sans', arial, helvetica, sans-serif; color: #656ac9; font-weight: 300;}
h6 {font-size: 1.0em; font-family: 'Open Sans', arial, helvetica, sans-serif; color: #656ac9; font-weight: 300;}

.focus {margin-top: 1em; border-bottom: 1px solid #efefef;}

.row-tint {background: #efefef;}
.row-blue {border-top: 5px solid #310c64;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#310c64+0,2989d8+50,656ac9+100 
background: rgb(49,12,100); /* Old browsers 
background: -moz-linear-gradient(45deg, rgba(49,12,100,1) 0%, rgba(41,137,216,1) 50%, rgba(101,106,201,1) 100%); 
background: -webkit-linear-gradient(45deg, rgba(49,12,100,1) 0%,rgba(41,137,216,1) 50%,rgba(101,106,201,1) 100%); 
background: linear-gradient(45deg, rgba(49,12,100,1) 0%,rgba(41,137,216,1) 50%,rgba(101,106,201,1) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#310c64', endColorstr='#656ac9',GradientType=1 );*/
	
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#391e63+0,873795+50,a73c8e+100 */
background: rgb(57,30,99); /* Old browsers */
background: -moz-linear-gradient(45deg, rgba(57,30,99,1) 0%, rgba(135,55,149,1) 50%, rgba(167,60,142,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg, rgba(57,30,99,1) 0%,rgba(135,55,149,1) 50%,rgba(167,60,142,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg, rgba(57,30,99,1) 0%,rgba(135,55,149,1) 50%,rgba(167,60,142,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#391e63', endColorstr='#a73c8e',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.row-title {
background-image: url(assets/img/images/bg-shapes.jpg);
background-repeat: no-repeat;
background-size: cover;
}

.with-content {padding-top: 2.0em; padding-bottom: 2.0em;}
.centered {text-align: center; margin: 1.0em 0;}

.grey {color: #999;}
.orange {color: #310c64;}
.blue {color: #244772;}
.small {font-size: 0.8em;}

/* Effects */

.hideme {opacity:1;}
.come-in {transform: translateX(-150px); animation: come-in 0.8s ease forwards;
}
.come-in:nth-child(odd) {animation-duration: 0.6s;}
.already-visible {transform: translateX(0);animation: none;}

@keyframes come-in {
	from {opacity: 0;}
  	to { transform: translateX(0); opacity: 1;}
}

a, input, .cta-panel {-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;}

/* Header */
.logo {padding-top: 1em; padding-bottom: 1em; position: relative; z-index: 1000;}
.header-social {padding-top: 0; padding-bottom: 0;}
.header-social a {color: #310c64;}
.header-social a:hover {color: #244772;}
.header-social a i {font-size: 1.6em;}
.roam-logo-small {float: left; margin: 0; padding: 0; height: 40px; display: none;}

.search-container {padding-top: 10px;}
#search-form {padding: 0; margin:0;}
#searchinput {width: 90px;}
input.menu-searchbox {display: inline-block; width: 80%; height: 32px!important; border: 1px solid #ffc50c;}
input.menu-searchbox:focus {box-shadow: none;}
button.searchbutton {height: 33px; margin: 0; padding: 0 20px; background: #310c64;}
.menu-search {clear: both; padding-top: 20px;}

/* Main Menu */

/* Navigation */
.hamburger {padding-top: 20px; text-align: right;}
.tab-bar {background: #fff; color: #310c64; height: 110px; margin-bottom: 0;}
.right-small {border-left: none; padding-top: 36px; width: 3.6em!important;}
.right-off-canvas-menu {background: #310c64;}


.tab-bar .menu-icon {text-indent: 0.9rem!important; margin-top: -30px; color: #310c64!important; font-size: 0.8em; height: 3.5rem!important; float: right;}
.tab-bar .menu-icon a {
    height: 34px;
    line-height: 33px;
    padding: 0;
    padding-right: 30px;
    color: #310c64!important;
    position: relative;
}    
.tab-bar .menu-icon span::after {
    box-shadow: 0 6px 0 1px #310c64, 0 14px 0 1px #310c64, 0 22px 0 1px #310c64!important;
    -webkit-box-shadow: 0 6px 0 1px #310c64, 0 14px 0 1px #310c64, 0 22px 0 1px #310c64!important;
    display: block;
    height: 2px;
    right: 0px;
    position: absolute;
    top: 1px;
    width: 30px;
	margin-top: 30px;
}


#menu-main-menu li ul {list-style: none;}
#menu-main-menu li.divider {display: none;}
ul.off-canvas-list li a {border: none;}

ul.sub-menu {font-size: 0.8em;}






/* Sidebar */
.parent-page {text-transform: uppercase;}
.additional ul.sub-menu li.parent-page a {font-weight: bold; color: #656ac9;}
.additional {}
.additional h4 {font-weight: bold; text-transform: uppercase; color: #310c64;}
.additional ul {list-style: none; margin: 0; padding: 0; font-size: 0.9em;}
.additional ul li:before {content: normal;}
.additional ul li {display: block; padding: 0.2em 0}
.additional ul li a {display: block; color: #310c64; font-weight: 300; text-decoration: none;}
.additional ul li a:hover {color: #333;}

.additional ul.sub-menu li a {display: block; color: #310c64; padding: 0; margin: 0;}
.additional ul.sub-menu li a:hover {color: #333;}

.additional ul li.current_page_item a {color: #310c64; font-weight: bold;}

.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;}

/* 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 {margin-left: 1.0em; border-top: 0; font-size: 0.85em; margin-bottom: 0; font-weight: normal;}
.additional ul li ul.children li {border: none; padding: 0 0.5em 0 0;}
.additional ul li ul.children li a {padding-left: 5px;}
.additional ul li.current_page_item ul li a {color: #310c64; 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 {}



/* Slideshow */
.home-slides {border-bottom: 6px solid #efefef; margin: 0; padding: 0; margin-bottom: 2em;}
.home-slideshow {position: relative;}
.slide-image {background-position: 50% 50%; height: 200px;}
.slide-text {margin-top: 20px; background: rgba(255,255,255,0.7); padding: 10px; border-bottom: 5px solid #310c64;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;}
.slide-text {font-size: 0.9em; color: #666;}
.slide-text h1 {color: #310c64; line-height: 1em; font-size: 1.4em; font-weight: bold;}
.slide-text p {font-weight: 300;}


/* Arrows */
.orbit-container {padding: 0; margin: 0;}
.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 {
    color: #310c64;
    border: none;
    font-size: 70px;
    text-indent: 0;
    margin-top: -32px;
}

.orbit-container .orbit-prev {
    background-color: transparent;
}
.orbit-container .orbit-prev span:before {
    content: "\2039";
}
.orbit-container .orbit-next {
    background-color: transparent;
}
.orbit-container .orbit-next span:before {
    content: "\203A";
}

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


/* Main Image */
.main-image {position: relative; width: 100%; height: 350px; background-size: cover; background-position: center; background-repeat: no-repeat;} 

/* Main Content */

.main {padding-top: 2.0em; padding-bottom: 2.0em;}
.page-title h1 {text-transform: uppercase; color: #fff; font-weight: bold; margin: 0;}
.main p { font-weight: 300;}
.main ul {color: #333; font-weight: 300;}
.page-content a {text-decoration: underline;}

/* Panels */
.alert-panel {background: #310c64; padding: 1.0em; color: #fff;}
.alert-panel h2 {font-size: 1.6em; font-weight: 700; color: #fff;}
.alert-panel-info {font-size: 0.8em;}

.map-panel {background: #310c64; padding: 1.0em; color: #fff;}
.map-panel h2 {font-size: 1.6em; font-weight: 700; color: #fff;}


.grey-panel {background: #efefef; border-bottom: 5px solid #310c64; padding: 1.0em; color: #333; margin-bottom: 2.0em;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;}
.grey-panel h2 {font-size: 1.6em; font-weight: 700; color: #333;}
.grey-panel h2 i {color: #310c64;}

.cta-panel {background: #efefef; border-bottom: 5px solid #310c64; padding: 1.0em; color: #333; margin-bottom: 2.0em;}
.cta-panel:hover {background: #310c64; color: #fff;}
.cta-panel-inner {position: relative; color: #ddd; font-size: 160px; text-align: center;}
.cta-panel-inner:hover {color: #e76d00;}
.cta-panel h2 {position: absolute; top: 50%; transform: translateY(-50%); font-size: 0.17em; font-weight: 700; color: #333;}
.cta-panel h2 i {color: #310c64;}
.cta-panel:hover h2 {color: #fff;}
.cta-panel:hover h2 i {color: #fff;}

.panel-text {margin-top: 1em; font-size: 0.85em; font-weight: 300;}
.panel-cta {margin-top: 1em; text-align: right;}

.cta-button {display: inline-block; padding: 0.5em 1.0em; color: #fff; background: #310c64; font-weight: 700; text-transform: uppercase;}
.cta-button:hover {color: #fff; background: #000;}

.landing-panel {padding: 20px; font-size: 1.6em; background: #efefef; 
border-bottom: 5px solid #310c64; color: #333; margin-bottom: 2.0em;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;}






/* Footer */
.footer {clear: both; padding-top: 2em; padding-bottom: 1em; color: #fff;}
.footer-content {font-size: 0.9em; margin-bottom: 1em;}
.footer-content h3 {color: #fff; font-weight: 700; text-transform: uppercase;}
.footer-content p {font-weight: 300;}
.footer-content a {color: #fff;}
.footer-content a:hover {color: #ccc;}
.footer-content i {width: 20px;}
.footer-content-social a {color: #fff; font-size: 2em;}
.footer-content-social a:hover {color: #ccc;}
.footer-content-social i {width: auto;}
.footer-content ul {list-style: none; margin: 0; padding: 0;}


/* News Panels */
.postInfo {margin: 0 0 1.0em 0; padding: 0.2em 0; border-top: 1px solid #efefef; border-bottom: 1px solid #efefef; color: #310c64; font-size: 1em; font-weight: 300;}
.postInfo a {color: #310c64;}
.postInfo a:hover {color: #666;}
.postSummary p {font-size: 0.9em;}
.postList {margin-bottom: 1.0em; padding-bottom: 1.0em; border-bottom: 4px solid #efefef;}


.pagination {margin: 2em 0;}
.pagination-centered {text-align: left;}
.pagination span.current {padding: 0.0625rem 0.625rem 0.0625rem; border-radius: 3px; background: #310c64; color: #fff; font-weight: bold;}

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

/* Forms */
select {font-family: 'Open Sans', arial, helvetica, sans-serif; height: inherit; background-color: #fff; border: 1px solid #310c64; margin: 0 0 1em 0;}
input[type="text"], input[type="email"], input[type="tel"], textarea {padding: 1em; height: inherit; border: 1px solid #310c64;}
input.wpcf7-submit[type=submit] {display: inline-block; padding: 0.5em 1.0em; color: #fff; background: #310c64; font-size: 1.2em; font-weight: 300;}
input.wpcf7-submit[type=submit]:hover {color: #fff; background: #000;}
div.wpcf7 .ajax-loader {width: 0!important; margin: 0!important;}
div.wpcf7-response-output {margin-top: 3em!important;}
input[type=submit] {border: none;}

/* Legal */
.legal {padding: 1.0em; color: #999; font-size: 0.7em;}
.legal p {margin: 0;}
.legal a {color: #999;}
.legal a:hover {color: #000;}




/* Gallery */
.gallery-item {
	display: inline-block;
	text-align: left;
	vertical-align: top;
	margin: 0 0 1.5em;
	padding: 0 1em 0 0;
	width: 50%;
}

.gallery-columns-1 .gallery-item {
	width: 100%;
}

.gallery-columns-2 .gallery-item {
	max-width: 50%;
}

.gallery-item a,
.gallery-item a:hover,
.gallery-item a:focus {
	-webkit-box-shadow: none;
	box-shadow: none;
	background: none;
	display: inline-block;
	max-width: 100%;
}

.gallery-item a img {
	display: block;
	-webkit-transition: -webkit-filter 0.2s ease-in;
	transition: -webkit-filter 0.2s ease-in;
	transition: filter 0.2s ease-in;
	transition: filter 0.2s ease-in, -webkit-filter 0.2s ease-in;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.gallery-item a:hover img,
.gallery-item a:focus img {
	-webkit-filter: opacity(60%);
	filter: opacity(60%);
}

.gallery-caption {
	display: block;
	text-align: left;
	padding: 0 10px 0 0;
	margin-bottom: 0;
}
	/* Gallery Columns */

	.gallery-item {
		max-width: 25%;
	}

	.gallery-columns-1 .gallery-item {
		max-width: 100%;
	}

	.gallery-columns-2 .gallery-item {
		max-width: 50%;
	}

	.gallery-columns-3 .gallery-item {
		max-width: 33.33%;
	}

	.gallery-columns-4 .gallery-item {
		max-width: 25%;
	}
	.gallery-columns-5 .gallery-item {
		width: 20%
	}
	.gallery-columns-6 .gallery-item {
		width: 16.6667%
	}







/* MEDIA QUERIES */

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

}

@media screen and (min-width: 480px) {
#searchinput {width: 200px;}
.hamburger {padding-top: 40px;}
.top-bar {height: auto;}
.logo {padding-top: 2.0em; padding-bottom: 2.0em;}
.logo.shrinklogocontainer {padding-top: 1.0em; padding-bottom: 1.0em;}
.roam-logo.shrinklogo {height: 50px;}
	
.header-social {padding-top: 2em; padding-bottom: 1.6em;}
.header-social.shrinkheadersocial {padding-top: 0.5em; padding-bottom: 0.5em;}	
	
.main-navigation {margin-top: 0;}
.top-bar-section ul {padding-top: 0;}
.top-bar {background: transparent; margin-top: 0;}
	
.slide-text {margin-top: 100px; font-size: 1.4em; padding: 20px;}
.slide-image {background-position: 50% 50%; height: 550px;}	

.top-bar-section ul li ul.sub-menu {border-top: 1px solid #ccc; padding-top: 0;}	
.top-bar-section ul li ul.sub-menu li {background: rgba(255,255,255,0.9)!important; border-bottom: 1px solid #ccc;  border-left: 1px solid #ccc;  border-right: 1px solid #ccc;}	

.hideme {opacity:0.2;}
.row-desktop-nav .columns {padding-left: 0.9375rem!important; padding-right: 0.9375rem!important;}
.navbar-fixed {
top: 0;
z-index: 100;
position: fixed;
width: 100%;
}

}

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

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

}

@media print {
/* Print CSS rules go here */

}