/*
Theme Name: Connell WS 2024 
Theme URI: http://www.data-edinburgh.co.uk/
Description: Theme for Connell WS 2024
Author: DATA
Version: 1.0
License: GNU General Public License
License URI: license.txt
Tags: 
*/

/* CSS Document */

@import "style-properties.css"; 

.container {max-width: 100%;}
body {background: #fff; color: #333; font-family: 'Lato', arial, helvetica, sans-serif;}
body p {font-size: 1.0em; font-weight: 300;}
body ul {font-size: 1.0em;}
body figure {font-size: 1.0em;}
body a {color: #0092d0; text-decoration: none;}
body a:hover {color: #000; text-decoration: none;}

.centered {text-align: center; margin: 1.0em 0;}

.row-dblue {background: #0c2340;}
.row-tint {background: #efefef;}

.centered {text-align: center; margin: 1.0em 0;}

.header {}

img {max-width: 100%;}

.wp-block-file:not(.wp-element-button) {font-size: 1em;}

/* Main Menu */

/* Header */
.logo {padding-top: 1.5em; padding-bottom: 1.5em; position: relative; z-index: 200000;}
.logo img {width: 100%; max-width: 300px;}

.address-details {font-size: 0.75em; padding-top: 12px; color: #fff; padding-bottom: 20px;}
.address-details p {line-height: 1.2em; margin-bottom: 0.5em;}
.address-details a {color: #fff;}
.address-details a:hover {color: #c3e0f2;}


/* Navigation */
.row-nav {padding: 0; border-top: 1px solid #fff; border-bottom: 1px solid #fff;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0c2340+0,0092d0+51,0c2340+100 */
background: linear-gradient(45deg,  #0c2340 0%,#0092d0 51%,#0c2340 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.main-menu {}
.main-menu ul {list-style: none; padding: 0; margin: 0;}
.main-menu ul li {display: inline-block; padding: 0.5em 1em; margin: 0;
-moz-transition: all 0.4s; 
transition: all 0.4s; 
transform: 0.3s;}
.main-menu ul li:hover {background: #0c2340; color: #fff;}
.main-menu ul li a {display: inline-block; position: relative; color: #fff; text-decoration: none; padding: 0; margin: 0;}
.main-menu ul li a:hover {color: #fff;}

.main-menu ul li.current-menu-item, .main-menu ul li.current-page-ancestor {background: #0c2340; color: #fff; font-weight: bold;}
.main-menu ul li.current-menu-item a, .main-menu ul li.current-page-ancestor a {color: #fff;} 

.main-menu ul li.dropdown-toggle a:after {
    display: inline-block;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: .2em solid;
    border-right: .2em solid transparent;
    border-bottom: 0;
    border-left: .2em solid transparent;
}
.main-menu ul li.dropdown li {padding: 0; margin: 0;}




ul.dropdown-menu {-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; 
transform: 0.3s;}

.dropdown-menu {background: #0c2340; color: #fff; width: auto; border-radius: 0; border: none; margin-top: 10px;}
.main-menu ul.dropdown-menu li {margin: 0; width: 100%;}
.main-menu ul.dropdown-menu li a {padding: 0.75em 0.5em; border-bottom: 1px solid #fff; font-size: 0.8em; font-weight: 600; color: #fff;
-moz-transition: all 0.4s; 
transition: all 0.4s; 
transform: 0.3s;}
.main-menu ul.dropdown-menu li a:hover {background: #333; color: #fff; padding-left: 1em;}
.main-menu ul li.dropdown:hover ul.dropdown-menu {
    display: block;
    -webkit-animation: slide-down .3s ease-out;
    -moz-animation: slide-down .3s ease-out;
}

@-webkit-keyframes slide-down {
      0% { opacity: 0; -webkit-transform: translateY(-20%); }   
    100% { opacity: 1; -webkit-transform: translateY(0); }
}
@-moz-keyframes slide-down {
      0% { opacity: 0; -moz-transform: translateY(-20%); }   
    100% { opacity: 1; -moz-transform: translateY(0); }
}


.contact-container {background: #000; padding-top: 10px; padding-bottom: 10px;}
.contact-mob {display: block; font-size: 0.9em;}
.contact-mob a {color: #fff; text-decoration: none;}
.contact-mob a:hover {color: #c3def3;}

.contact-item {margin-right: 12px;}

.address-details {display: none;}

/* Main */


/* Hero */
.page-hero {padding-top: 2em; margin-bottom: -3em;}
.page-hero h1 {margin-bottom: 0; display: block;}
.page-hero-image {color:#fff; width: 100%; min-height: 300px; background-position: center center; background-repeat: no-repeat; background-size: cover;}
.page-hero-inner {min-height: 300px;}
.page-hero-image h1 {display: block; font-family: "DM Serif Text", serif; font-size: 2em; color: #fff; margin-bottom: 0em;
text-shadow: 0px 0px 6px rgba(0, 0, 0, 1);}
.page-hero-image h2 {display: block; font-family: "DM Serif Text", serif; font-size: 3em; color: #c3def3; margin-bottom: 0em;
text-shadow: 0px 0px 6px rgba(0, 0, 0, 1);}
.page-hero-image .hero-text {display: inline-block; color: #0e5d6b; background: rgba(207,223,225,0.85); padding: 1em; font-family: "DM Serif Text", serif;}
.page-hero-image a.hero-cta {display: inline-block; color: #fff; background: #6e9ea6; padding: 0.5em; margin-top: 1em; font-family: "DM Serif Text", serif; text-decoration: none; border-radius: 10px;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s; 
transition: all 0.4s; 
transform: 0.4s;
-webkit-box-shadow: 0px 2px 5px 3px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 2px 5px 3px rgba(0,0,0,0.75);
box-shadow: 0px 2px 5px 3px rgba(0,0,0,0.75);}

.page-hero-image a.hero-cta:after {
font-family: 'FontAwesome';
content: '\f144';
margin:0 5px 0 5px;
color: #fff; 
}

.page-hero-image a.hero-cta:hover {color: #fff; background: #000;}

.main {padding: 0; font-size: 1em;}

.main-content {padding-top: 3em; padding-bottom: 3em;}


h1 {font-size: 2.8em; font-family: "DM Serif Text", serif; color: #0caada; margin-bottom: 1.0em; line-height: 1.0em; font-weight: 300;}
h2 {font-size: 2em; font-family: "DM Serif Text", serif; color: #0c2340; margin-bottom: 1.0em; line-height: 1.2em; font-weight: 300;}
h3 {font-size: 1.6em; font-family: "DM Serif Text", serif; color: #0caada; margin-bottom: 1.0em; line-height: 1.2em; font-weight: 300;}
h4 {font-size: 1.4em; font-family: "DM Serif Text", serif; color: #0caada; margin-bottom: 1.0em;}
h5 {font-size: 1.2em; font-family: "DM Serif Text", serif; color: #0caada; margin-bottom: 1.0em;}
h6 {font-size: 1.0em; font-family: "DM Serif Text", serif; color: #0caada; margin-bottom: 1.0em;}



h1.page-title {display: inline-block;}
.head-underline {width: 50%; height: 2px; background: #ccc; margin-top: 0.5em; margin-bottom: 0.5em;}



.main p {line-height: 1.4em;}  

.blue-tint-panel {padding: 10px 15px; background: #c3def3; color: #0c2340;}


.mobile-service-panel {display: block; background: #0caada; padding-top: 1em; padding-bottom: 1em; position: fixed; bottom: 0; width: 100%; z-index: 100000;}

.mobile-service-panel select {
  border-radius:36px;
  display:inline-block;
  padding: 5px;
  color: #fff;
  overflow:hidden;
  background:#0c2340;
  border:1px solid #0c2340;
width: 100%;
}

.mobile-service-panel a {
  border-radius:36px;
  display:inline-block;
  padding: 5px;
  color: #0c2340;
  overflow:hidden;
  background:#fff;
  border:1px solid #fff;  
width: 100%;
}

/* Testimonials */
.testimonial {position: relative; background: #efefef; padding: 1.0em; margin-bottom: 3.0em; font-size: 1.2em; font-family: 'Marcellus', Georgia, Times, serif;
border-radius: 10px; 
-moz-border-radius: 10px; 
-webkit-border-radius: 10px;}
.testimonialdark {position: relative; background: #dedede; padding: 1.0em; margin-bottom: 3.0em; font-size: 1.2em; font-family: 'Marcellus', Georgia, Times, serif;
border-radius: 10px; 
-moz-border-radius: 10px; 
-webkit-border-radius: 10px;}

.testimonial .testimonial-arrow {position: absolute; bottom: -55px; left: 10px; width: 40px; height: 40px; background-image: url(assets/images/test-arrow1.png); background-repeat: none; margin-bottom: 1.0em;
}
.testimonialdark .testimonial-arrow {position: absolute; bottom: -55px; right: 10px; width: 40px; height: 40px; background-image: url(assets/images/test-arrow2.png); background-repeat: none; margin-bottom: 1.0em; }



/* Testimonials */
.testimonials-container {color: #fff;}
.testimonials {padding-top: 5em; padding-bottom: 3em; text-align: center;}


#carousel-testimonial .carousel-item {height: auto;}
#carousel-testimonial .carousel-indicators {position: relative; clear: both; padding-top: 1em;}
#carousel-testimonial .carousel-indicators li {width: 10px; height: 10px; border-radius: 100%; background-color: #aaa;}
#carousel-testimonial .carousel-indicators li.active {background-color: #fff;}

.testimonial-text {font-size: 1.4em; color: #fff;}
.testimonial-text p {margin-bottom: 0;}
.testimonial-name {display: block; color: #fff; font-weight: bold; padding-top: 1em;}

.testimonial-panel {border-bottom: 1px solid #6788bb; margin-bottom: 1em; padding-bottom: 1em; color: #666;}
.testimonial-panel p {margin-bottom: 0;}






/* Service Panels */
.service-panels { padding-top: 1.5em;}
.info-panel {margin-bottom: 1.5em;  background: #fff; padding: 10px; border-radius: 10px; border-bottom: 2px solid #ccc; border-right: 2px solid #ccc;
-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;}
.info-panel:hover {background: #c3def3;}
/*.info-panel-box {background-color: #c3e0f2; color: #0c2340; font-size: 0.75em; padding: 0.5em; background-repeat: no-repeat; min-height: 170px;}*/
.info-panel-box {color: #333; font-size: 0.75em; padding: 1em; min-height: 170px; align-content: center;}
.info-panel-icon {padding-top: 0.8em; align-content: center;}
.info-panel h2 {color: #0c2340; font-size: 1.6em; margin-bottom: 0.3em; font-weight: 400;}
.info-panel p {font-size: 1.1em; line-height: 1.2em; color: #333;}


/* Staff Panels */
.staff-panel {background: #ccc; color: #fff; border-radius: 10px;  border-bottom: 2px solid #ccc; border-right: 2px solid #ccc;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;}
.staff-panel:hover {transform: scale(1.05);}
.staff-panel h3 {color: #fff;}
.staff-panel h4 {color: #fff;}
.staff-panel a {color: #c3def3;}
.staff-panel a:hover {color: #fff;}
.staff-text {background: #0c2340; padding: 1em; border-radius: 0 0 10px 10px;}
.staff-panel img {width: 100%; border-radius: 10px 10px 0 0; }

.page-hero-image h1.staff-header-name {font-size: 3em;}
.page-hero-image h2.staff-header-position {font-size: 2em;}

.staff-header-contact {font-size: 1.1em; color: #fff; padding: 1em 0; font-weight: 300;}
.staff-header-contact span {margin-right: 30px;}
.staff-header-contact a {color: #fff;}
.staff-header-contact a:hover {color: #c3def3;}

.staff-header-contact span {display: block; margin-bottom: 1em;}


.main-staff-pic img {max-height: 600px;}
.staff-biography {font-size: 1.2em; margin-bottom: 3em;}

.specialism {display: inline-block; background: #efefef; padding: 10px; margin-right: 10px; margin-top: 1em;}

/* Footer */
.footer {color: #fff; padding: 0.5em 0 2.0em 0;}
.footer h3 {font-size: 1.6em; color: #fff; margin-top: 1.0em; margin-bottom: 0.5em;}
.footer a {color: #fff;}
.footer a:hover {color: #efefef;}
.footer ul {list-style: none; margin: 0; padding: 0; font-size: 0.9em;}
.footer ul li ul {margin: 0 0 0 1.0em;}
.footer ul li a {color: #fff; text-decoration: none;}
.footer ul li a:hover {color: #c3e0f2;}
.footer p {font-size: 0.9em; color: #fff;}


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

/* Contact */
.contact-map {
position: relative;
padding-bottom: 30%; // This is the aspect ratio
height: 0;
margin-bottom: 2.0em;
overflow: hidden;
}
.contact-map iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}


.wpcf7-text {}
.wpcf7-submit {background: #0092d0; color: #fff; padding: 1.0em 2.0em; border: none;
-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;}
.wpcf7-submit:hover {background: #0c2340;}

/* Legal */
.legal {padding-top: 0.75em; padding-bottom: 0.75em; color: #999; font-size: 0.7em;}
.legal a {color: #777;}
.legal a:hover {color: #000;}


.mobile-spacer {display: block; padding-bottom: 140px;}

/* Sidebar */
.additional {margin-top: 0; padding-bottom: 4.0em;}
.additional img {margin-top: 4.0em; margin-bottom: 1.0em;}


.additional h4 {color: #666; border-bottom: 1px solid #dcdcdc; margin-bottom: 0.6em;}
.additional ul {list-style: none; margin: 0 0 2.0em 0; padding: 0; font-size: 0.9em;}
.additional ul li:before {content: normal;}
.additional ul li {padding: 0.2em 0; border-bottom: 1px solid #efefef;}

.additional ul li a {display: block; color: #999999; padding: 0; margin: 0;}
.additional ul li a:hover {color: #000;}

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

.additional ul li.current_page_item {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;}




a.cta-white {
  border-radius:36px;
  display:inline;
  padding: 5px 15px;;
  color: #0c2340;
  overflow:hidden;
  background:#fff;
  border:0;  
  width: 100%;
}
a.cta-white:hover {
  color: #fff;
  background:#0092d0;
}


.grecaptcha-badge {visibility: hidden !important;}

/* MEDIA QUERIES */

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

}

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

}

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

}

@media screen and (min-width: 960px) {
ul.slides li a img {
    max-height: 650px !important;
}  
.container {max-width: 80%;}
.contact-mob {display: none;}
.address-details {display: block;}
.page-hero-image {min-height: 600px;}
.page-hero-inner {min-height: 600px;}
.page-hero-image h1 {font-size: 3em;}
.page-hero-image h2 {font-size: 5em;}
.page-hero-image h1.staff-header-name {font-size: 5em;}
.page-hero-image h2.staff-header-position {font-size: 3em;}  
.mobile-service-panel {display: none;}
.mobile-spacer {display: none;}
.staff-header-contact span {display: inline;}
}

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

}