/*
Theme Name: Matlock Town Council
Theme URI: http://www.squarerchilli.co.uk
Author: squarechilli
Author URI: http://www.squarerchilli.co.uk
Description: A custom theme by squarechilli for Matlock Town Council.
Version: 2
*/

/*Global*/
@font-face {
    font-family: 'Oraqle';
    src: url('css/oraqle_script-webfont.woff2') format('woff2'),
         url('css/oraqle_script-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

/*WCAG 2 Level AA requires the visual presentation of text and images of text to have a contrast ratio of at least 4.5:1, 
except for large text, which should have a minimum contrast ratio of 3:1.*/

:root {
  --main-font: 'Open Sans';
  --fancy-font: 'Oraqle';
  --color-green: #154717;
  --color-lightgreen: #5ec745;
  --color-lightlightgreen: #EFFAEC;
  --color-text: #374833;
  --color-black: #000;
  --color-white: #fff;
  --color-cyan: /*#33b393 #2B9A7E*/ #25836C; /*4.62:1*/
  --color-orange: #eb6403; /*3.3:1*/
    --color-darkorange: #C35609; /*4.51:1*/
  --color-blue: #42c9c7;
  --color-yellow: #e3bc44;
}

/*essentials*/
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
body {position: relative; font: 16px var(--main-font), Arial, sans-serif; font-weight: 100; color: var(--color-text); background-color: #fff; -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */ -webkit-text-size-adjust: 100%; margin:0px; padding: 0 }
a {color: var(--main-color); text-decoration: underline; -webkit-transition: background-color 0.25s; -moz-transition: background-color 0.25s; -o-transition: background-color 0.25s;  transition: background-color 0.25s;}
a:hover {text-decoration: underline;}
h1 {font-size: 80px; margin: 10px 0px; color: var(--color-orange); font-family: var(--fancy-font); text-align: center; font-weight: 100}
.header1 {font-size: 26px; margin: 20px auto; color: var(--color-cream); text-align: center; width: 70%}
h2 {position: relative;font-size: 22px;color: var(--color-cream);padding-bottom: 7px;margin: 0;}
h3 {margin: 10px 0;  color: var(--color-cream)}
p {}
button:focus,input:focus,select:focus,textarea:focus {outline: none;}
img {max-width: 100%;border: 0px;height: auto;width: auto\9; /* ie8 */}
.alignleft {float: left; margin-right: 15px}
.alignright {float: right; margin-left: 15px}
.aligncenter {text-align: center;}
.text-right {text-align: right !important}
.center {margin: 0 auto; text-align: center}
.noborder {border: 0px}
.nomargin {margin: 0 !important}
.clear {clear: both}
.clear:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
section {position: relative; clear: both}
.wrapper {position: relative;max-width: 1300px;margin: 0px auto;}
.wrapper:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
.narrow {max-width: 90%}
.narrower {max-width: 80%;}
.narrowest {max-width: 70%;}
.fullwidth {position: relative; width:auto;overflow:hidden; margin: 30px 0}
strong {}
input {font-family: var(--main-font); color: var(--color-blue); }

.large {font-size: 1.2em}
.larger {font-size: 1.6em}
.largest {font-size: 2em}

.fancylink, .fancylink-blue, .fancylink-orange {position: relative;}
.fancylink a {position: relative; color: var(--color-white);font-family: var(--fancy-font); font-size: 50px; text-decoration: none; z-index: 1; }
.fancylink a:before {position: absolute; width: 130%; height: 80%; left: -50px; top: 10px; border: 3px solid var(--color-orange); border-radius: 10px; content: ''; z-index: -1}
.fancylink a:hover:before {border-color: var(--color-cyan)}
.fancylink-blue a {position: relative; color: var(--color-blue);font-family: var(--fancy-font); font-size: 50px; text-decoration: none; z-index: 1; margin-left: 50px; text-shadow:-2px -2px 0 #fff,  2px -2px 0 #fff,-2px 2px 0 #fff,2px 2px 0 #fff;}
.fancylink-blue a:before {position: absolute; width: 130%; height: 80%; left: -50px; top: 10px; border: 3px solid var(--color-blue); border-radius: 10px; content: ''; z-index: -1}
.fancylink-blue a:hover:before {border-color: var(--color-orange)}
.fancylink-orange a {position: relative; color: var(--color-orange);font-family: var(--fancy-font); font-size: 50px; text-decoration: none; z-index: 1; margin-left: 50px; text-shadow:-2px -2px 0 #fff,  2px -2px 0 #fff,-2px 2px 0 #fff,2px 2px 0 #fff;}
.fancylink-orange a:before {position: absolute; width: 130%; height: 80%; left: -50px; top: 10px; border: 3px solid var(--color-orange); border-radius: 10px; content: ''; z-index: -1}
.fancylink-orange a:hover:before {border-color: var(--color-blue)}

/*Accessibility*/
.skip-main {left:-999px;
    position:absolute;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
    z-index:-999;}

    a.skip-main:focus, a.skip-main:active {
    color: #fff;
    background-color:#000;
    left: 0;
    top: 0;
    width: 250px;
    height: auto;
    overflow:auto;
    margin: 0;
    padding:5px;
    text-align:center;
    font-size:1.2em;
    z-index:999;
} 


/*header*/
header {position: relative; width: 100%; background: url('images/header.png'); padding: 10px 0; height: 150px; margin-bottom: 57px}
.logo {position: relative; float: left; margin: 10px 0 20px 0}
.header-right {position: relative; float: right; color: var(--color-orange); text-align: right;}
.header-right > div > a {text-decoration: none; font-size: 16px}
.header-right > div > a:after {content: '>';position: relative;color: var(--color-white);font-family: var(--fancy-font);margin-left: 10px;font-size: 40px;top: 3px;}
.header-right form {position: relative; background-color: var(--color-white); border-radius: 4px; padding: 1px 5px; margin: 15px 0 25px 0}
.header-right form input[type='text'] {position: relative; border: 0px; padding: 5px 20px 5px 5px; font-size: 14px; min-width: 300px; font-weight: 600; top: -2px; color: var(--color-darkorange)}
.header-right form input[type='image'] {position: relative; top: 4px}
.header-right form label {display: none}
nav {}
nav > ul {display: flex;margin: 0;padding: 0;}
nav > ul > li {position: relative; flex: 1; height: 45px; background: url('images/nav.png'); text-align: center; margin: 0 2px; display: inline-block;}
nav > ul > li:first-of-type {margin-left: 0; border-bottom: 4px solid var(--color-lightgreen)}
nav > ul > li:nth-of-type(2) {background-position: 0 -45px; border-bottom: 4px solid var(--color-blue)}
nav > ul > li:nth-of-type(3) {background-position: 0 -90px; border-bottom: 4px solid var(--color-cyan)}
nav > ul > li:nth-of-type(4) {background-position: 0 -135px; border-bottom: 4px solid var(--color-yellow)}
nav > ul > li:last-of-type {margin-right: 0; background-position: 0 -180px; border-bottom: 4px solid var(--color-lightgreen)}
nav > ul > li a {position: absolute; top: 0; bottom: 0; left: 0; right: 0; line-height: 45px; color: var(--color-text); text-decoration: none; font-weight: bold; font-size: 14px}

nav > ul > li:hover {height: 50px; border-bottom-width: 10px}
nav > ul > li a:hover {text-decoration: none}

nav ul ul {display:none;position:absolute;top: 113%;left:0;padding:0;width: 100%;padding: 5px 0 0 0;z-index: 2;}
nav ul ul li {float:none;width:100%;border: 0;position: relative;display: block; min-height: 30px; margin: 10px auto}
nav ul ul a { line-height:12px; position: relative}
nav ul ul a:hover {text-decoration: underline}
nav ul ul ul {top:0; left:100%}
nav ul li:hover > ul {display:block}

nav ul li:first-of-type ul {background: url('images/background-lightgreen.png');}
nav ul li:nth-of-type(2) ul {background: url('images/background-blue.png');}
nav ul li:nth-of-type(3) ul {background: url('images/background-green2.png');}
nav ul li:nth-of-type(4) ul {background: url('images/background-yellow.png');}
nav ul li:last-of-type ul {background: url('images/background-lightgreen.png');}


/*Homepage*/

/* Carousel CSS */
.main-slider-container {position: relative; margin: 30px 0 20px 0; height: 413px;}
.slider-container { width: 100% !important; height: 413px; position: absolute; overflow: hidden;  }
.slider-container ul { position: relative; margin: 0; padding: 0;   }
.slider-container li { list-style-type: none; position: relative; float: left; }
.disable-link { pointer-events: none; }
.prev {left: 22px;/*background: url(images/prev.png);*/ z-index: 1;}
.prev:before {content: '<';/* position: relative; */color: var(--color-white);font-family: var(--fancy-font);font-size: 100px;}
.next {right: 16px;/*background: url(images/next.png);*/z-index: 1;}
.next:before {content: '>';/* position: relative; */color: var(--color-white);font-family: var(--fancy-font);font-size: 100px;}
.disable-link.prev { background: none; }
.disable-link.prev:before { content:'' }
.disable-link.next { background: none; }
.disable-link.next:before { content:'' }
.crousel-navigation {position: absolute;top: 155px;width: 50px;height: 50px; cursor: pointer}
.slider-container ul li {display: flex}
.crousel-text {display: inline-block; flex: 1.27; background: #f7b21b url('images/background-orange.png'); padding: 50px 60px 20px 60px; font-size: 18px;}
.crousel-image-outer {display: inline-block; flex: 4}
.crousel-image-outer img {width: 100%}

.homepage-cta {position: relative; display: flex; margin-top: 20px}
.homepage-cta div {position: relative; flex: 1}
.homepage-cta div:nth-of-type(2) {margin: 0 20px}
.homepage-cta div img {display: block; width: 100%}
.homepage-cta div h2 {background: #f7b21b url('images/background-lightgreen.png'); padding: 15px 15px 15px 20px; font-size: 26px}

.latest {position: relative; width: 90%; margin: 30px auto; display: flex}
.latest-news {position: relative; display: inline-block; flex: 1; margin-right: 10px}
.latest-events {position: relative; display: inline-block; flex: 1; margin-left: 10px}
.latest-news h2 {color: var(--color-cyan); font-family: var(--fancy-font); font-size: 68px; font-weight: 100}
.latest-events h2 {color: var(--color-orange); font-family: var(--fancy-font); font-size: 68px; font-weight: 100}
.latest-news h3 {font-size: 20px; font-weight: 300; margin: 0; }
.latest-events h3 {font-size: 20px; font-weight: 300; margin: 0}
.latest-news h3 a, .latest-events h3 a {text-decoration: none}
.latest-news span {color: var(--color-cyan); font-weight: bold; font-size: 14px}
.latest-events span {color: var(--color-darkorange); font-weight: bold; font-size: 14px}
.latest-news ul, .latest-events ul {margin: 0; padding: 0; list-style-type: none}
.latest-news li p:not(.fancylink-blue) a {color: var(--color-cyan); font-weight: bold; font-size: 14px}
.latest-events li p:not(.fancylink-orange) a {color: var(--color-darkorange); font-weight: bold; font-size: 14px}
.latest-news li, .latest-events li {margin: 15px 0;clear: both;}

.social {position: relative; margin: 30px 0; }
.social h2 {color: var(--color-orange); font-family: var(--fancy-font); font-size: 78px; font-weight: 100; text-align: center; margin: 20px 0}
.social-cols {position: relative; display: flex}
.social-twitter, .social-facebook, .social-newsletter {flex: 1}
.social-twitter h3 {background: url('images/twitter.png') no-repeat; padding-left: 40px; padding-bottom: 15px; font-size: 30px; font-weight: 100; border-bottom: 1px solid var(--color-orange); margin-bottom: 20px}
.social-facebook {margin: 0 20px}
.social-facebook h3 {background: url('images/facebook.png') no-repeat; padding-left: 30px; padding-bottom: 15px; font-size: 30px; font-weight: 100; border-bottom: 1px solid var(--color-orange); margin-bottom: 20px}
.social-twitter li, .social-facebook li {margin: 10px 0; font-size: 14px}
.social-twitter li a, .social-facebook li a {text-decoration: none} 
.social-twitter li a:hover, .social-facebook li a:hover {text-decoration: underline} 
.social-newsletter h3  {font-size: 30px; font-weight: 100; margin-bottom: 0}
.social-newsletter p {margin: 0}
.social-newsletter form {margin: 20px 0}
.social-newsletter form input[type='email'] {position: relative; border: none; border-bottom: solid 1px rgba(0, 0, 0, 0.1); width: 100%; font-size: 20px; padding: 5px; margin: 10px 0; color: var(--color-text);}
.floating-label {position: relative; margin-bottom: 10px;}
.floating-label label {position: absolute;top: 0px;left: 0;opacity: 0;transition: all .3s ease;}
.floating-label input:not(:placeholder-shown) {padding: 5px;}
.floating-label input:not(:placeholder-shown)+label {-webkit-transform: translateY(-10px);transform: translateY(-10px);opacity: .7;}
.social-newsletter form input[type='image'] {position: relative; margin-top: 20px; float: right}

.homepage-gallery {position: relative; display: flex; flex-wrap: wrap; justify-content: space-evenly;}
.homepage-gallery img {margin: 15px 10px; flex: 1 0 21%;}


/*General*/
.page-content {position: relative; margin: 20px 0; }

.page-left-col {position: relative; float: left; width: 75%; margin-bottom: 30px}
.page-right-col {position: relative; float: right; width: 23%}
.page-right-col ul {background-color: var(--color-lightlightgreen)}
.page-right-col ul li {position: relative;display: block; float: none}
.page-right-col ul li a {position: relative; display: block; padding: 10px 15px; font-weight: bold; text-decoration: none}
.page-right-col ul li a:hover {background-color: var(--color-lightgreen)}

.message-old {border: 2px solid var(--color-green); text-align: center; background-color: var(--color-lightlightgreen); color: var(--color-black); margin: 50px 0}

.index-template h1, .single-template h1 {font-size: 28px; font-family: var(--main-font); font-weight: 800}

/*Events*/
.events-grid {position: relative; display: flex; flex-wrap: wrap;align-items: center;justify-content: center;}
.events-grid div {position: relative; flex: 1 1 30%; margin: 10px 0 }
.events-grid div:nth-of-type(3n + 2) {margin: 10px 20px}
.events-grid div img {display: block; width: 100%}
.events-grid div h2 {background: #f7b21b url('images/background-lightgreen.png'); padding: 15px 15px 15px 20px; font-size: 26px; height: 102px}
.events-grid div h2 a {text-decoration: none}
.events-grid div h2 a:hover {text-decoration: underline}
.events-grid div span {position: absolute; top: 20%; width: 100%; font-family: var(--fancy-font); font-size: 50px; color: var(--color-lightgreen); text-align: center}


/*Gutenberg fixes*/
.alignwide {margin-left  : -80px;margin-right : -80px;}
.alignfull {margin-left  : calc( -100vw / 2 + 100% / 2 ) !important;margin-right : calc( -100vw / 2 + 100% / 2 ) !important;max-width    : 100vw !important;display: block !important;}


/*footer*/
footer {position: relative; margin: 0; color: var(--color-cream); background-color: var(--color-green)}
footer > div:first-child {width: 100%; background:url('images/background-lightgreen.png'); height: 50px}
footer div.wrapper {margin: 20px auto}
footer div:nth-of-type(2) img {width: 270px;}
.footer-contact {display: flex; color: var(--color-white); font-size: 16px; margin: 50px 0 40px 0}
.footer-contact div:before {display: block; content: ''; border-top: 1px solid var(--color-orange); width: 300px; }
.footer-contact div:first-of-type {flex:1; margin-right: 50px}
.footer-contact div:first-of-type p {line-height: 160%}
.footer-contact div:last-of-type {flex:3}
.footer-contact div:last-of-type p {margin: 0;}
.footer-contact div:last-of-type p:first-of-type {margin-top: 26px}
.footer-contact div:last-of-type p:nth-of-type(even) {font-size: 110%}
.footer-contact div:last-of-type strong {color: var(--color-white)}

.footer-links, .footer-links, .footer-signoff {background-color: var(--color-white); padding: 1px 0}
.footer-links div.wrapper {display: flex}
.footer-links div.wrapper ul {flex: 1; margin-left: 50px}
.footer-links div.wrapper ul:first-of-type {margin-left: 0}
.footer-links div.wrapper ul li {display: block; float: none; margin-bottom: 6px}
.footer-links div.wrapper ul li:first-of-type {font-weight: bold; margin-bottom: 15px}

.back-white {background-color: var(--color-white)}
footer hr {border-top: 1px solid var(--color-orange); position: relative;max-width: 1300px;margin: 0 auto 0 auto; }




footer a {text-decoration: none}
.footer-signoff {padding: 1px}
p.copyright {display: inline-block;}
p.website-by-squarechilli {display: inline-block; float: right}
p.website-by-squarechilli img {vertical-align: middle; margin-left: 10px}
p.website-by-squarechilli a {text-decoration: none; color: var(--color-text)}



/* #Media Queries
================================================== */

  /* Smaller than standard 960 (devices and browsers) */
  @media only screen and (min-width: 1100px) {
      
    }

  /* Tablet Portrait size to standard 960 (devices and browsers) */
  @media only screen and (min-width: 768px) and (max-width: 1099px) {
      .wrapper {width: 100%;padding: 0 1%;}
      .logo {margin: 0 0 0 10px}
      .header-right {margin-top: 45px}
      .header-right form {margin: 0 10px 0 0; }
      .header-right div:first-of-type {margin: 0 10px 5px 0;}
      .crousel-navigation {top: 60px}
      .crousel-text {padding: 10px}
      .main-slider-container, .slider-container {height: 250px}
      .homepage-cta div h2 {font-size: 20px}
      .homepage-gallery img {margin: 5px 0px;flex: 1 1 10%; max-width: 24%}
      

    }

  /* All Mobile Sizes (devices and browser) */
  @media only screen and (min-width: 481px) and (max-width: 767px)  {
      .wrapper {width: 100%;padding: 0 1%;}
      .narrow {max-width: 100%}
        .main-slider-container {width: 100% !important;margin: 20px 0;height:280px}
      .main-slider-container ul {width: 100% !important;margin: 0;}
      .main-slider-container ul li {width: 100% !important;margin: 0;}
      .crousel-text {display: block; flex: none; width: 100%; padding: 10px; border-bottom: 1px solid}
      .crousel-image-outer {display: none}
      .crousel-navigation {display: none}
      .homepage-slider-text {font-size: 2vw !important}
      header {height: auto; margin-bottom: 20px}
        .logo {float: none; margin: 0 0 0 10px}
        .header-right {display: block; width: 100%; display: none}
        .header-right form {margin: 0; display: none}
        header nav {display: none}
        .page-left-col {width: 100%}
        .page-right-col {width: 100%}
        .footer-contact {display: block}
        .footer-links {display: none}
        .footer-contact div {width: 100%; margin: 0}
        .social-cols  {display: block}
      .homepage-cta {margin-top: 0px}
        .homepage-cta div h2 {font-size: 14px}
        h1 {line-height: 70px}
        .slider {display: block}
        .slider div:first-of-type {padding: 20px}
        .slider div:first-of-type p {margin: 0px}
        .slider div:last-of-type {display: none}
        .latest {margin: 20px 0; width: 100%;font-size: 80%}
      .latest h3 {font-size: 16px}
        .latest ul {list-style-type: none; margin: 0; padding: 0}
        .social ul {list-style-type: none; margin: 0; padding: 0}
        .latest-events {margin: 0}
        .social-facebook {margin: 20px 0}
        footer {margin: 20px 0}
        .footer-contact div:last-of-type p:nth-of-type(even) {font-size: 100%}
      .footer-contact div:before {width: 100%}
      
       .wp-block-table {margin: 0}
      
      .events-grid div h2 {padding: 5px 5px 5px 5px; font-size: 14px; height: 50px}
      
      .homepage-gallery img {margin: 5px 0px;flex: 1 1 10%; max-width: 32%}
      
      
      
      
      
    }

  /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
  @media only screen and (max-width: 480px) {
      .wrapper {width: 100%;padding: 0 1%;}
      .narrow {max-width: 100%}
        .main-slider-container, .slider-container, .slider-container li, .crousel-text {width: 100% !important; display: none}
        .crousel-image-outer {display: none}
      .homepage-slider-text {font-size: 2vw !important}
      header {height: auto; margin-bottom: 20px}
        .logo {float: none; margin: 0 0 0 10px}
        .header-right {display: block; width: 100%; display: none}
        .header-right form {margin: 0; display: none}
        header nav {display: none}
        .page-left-col {width: 100%}
        .page-right-col {width: 100%}
        .footer-contact {display: block}
        .footer-links {display: none}
        .footer-contact div {width: 100%; margin: 0}
        .social-cols  {display: block}
        h1 {line-height: 70px}
        .slider {display: block}
        .slider div:first-of-type {padding: 20px}
        .slider div:first-of-type p {margin: 0px}
        .slider div:last-of-type {display: none}
        .homepage-cta {position: relative; display: flex; margin-top: 0px}
        .homepage-cta div {position: relative; flex: 1}
        .homepage-cta div:nth-of-type(2) {margin: 0 10px}
        .homepage-cta div img {display: block; width: 100%}
        .homepage-cta div h2 {padding: 5px 5px 5px 5px; font-size: 14px; height: 50px}
        .latest {display: block; margin: 20px 0; width: 100%; font-size: 80%}
      .latest h3 {font-size: 16px}
        .latest ul {list-style-type: none; margin: 0; padding: 0}
        .social ul {list-style-type: none; margin: 0; padding: 0}
        .latest-events {margin: 0}
        .social-facebook {margin: 20px 0}
        footer {margin: 20px 0}
        .footer-contact div:last-of-type p:nth-of-type(even) {font-size: 100%}
      .footer-contact div:before {width: 100%}
      
       .wp-block-table {margin: 0}
      
             .events-grid div {position: relative; flex: 1 1 40%; margin: 10px 0 }
        .events-grid div:nth-of-type(3n + 2) {margin: 10px 0px}
         .events-grid div:nth-child(odd) {margin-right: 10px}
.events-grid div h2 {padding: 5px 5px 5px 5px; font-size: 14px; height: 50px}
      
      .homepage-gallery img {margin: 5px 0px;flex: 1 1 10%; max-width: 47%}
            
        

    
}