/*
Theme Name: DramaBugs V2
Theme URI: http://kattel.com
Description: Drama website
Author: Ben Gower
Author URI: http://kattel.com;
Version: 1.0
Tags: black, light, gray, responsive-layout, fluid-layout, fixed-layout, full-width-template, theme-options, threaded-comments, translation-ready, custom-menu, featured-image-header, featured-images

License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

body, button{font-family: 'Lato',arial, sans-serif;}
html, body {height:100%;}
body {display:flex;flex-direction:column;min-height:100vh;}
footer {margin-top:auto;}
:root {
  --brand-purple: rgba(98, 34, 153, 0.92);
  --header-divider: rgba(255, 255, 255, 0.28);
  --accent-color: #2fc4ad;
  --accent-color-dark: #1f9484;
  --heading-font: 'Baloo 2', 'Manrope', arial, sans-serif;
}
h1, h2, h3, h4, h5 {}
a, a:hover, a:active, a:focus {
  /* styling for any way a link is about to be used */

   outline: 0;
}
#nav-icon {display: none;}
body > header {
  z-index: 1000;
  background: var(--brand-purple);
  color: #fff;
  position: fixed;
  width: 100%;
  height: 76px;
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 16px rgba(0,0,0,0.15);
}
header .content {
  max-width: 1200px;
  height: 100%;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
header h3 {font-size: 40px; font-weight: bold;letter-spacing: 1pt;}
header h4 {font-size:15px;line-height: 8px;letter-spacing: 0.4pt}
.logo {display:flex;align-items:center;padding:0;}
.logo img {width:148px;display:block;}
nav {font-family: 'Manrope','Lato',arial,sans-serif;font-weight:500;}
nav ul {display:flex;align-items:center;list-style:none;margin:0;padding:0;border-left:0;gap:2px;}
nav ul li {float:none;}
nav ul li.dropdown {position:relative;}
nav li a {display:inline-flex;align-items:center;height:auto;padding:10px 18px;border-right:0;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;position:relative;}
nav a {color:#fff;text-decoration: none;}
nav a::after {content:'';position:absolute;left:18px;right:18px;bottom:4px;height:2px;background:var(--accent-color);transform:scaleX(0);transform-origin:left;transition:transform .25s ease;}
nav a:hover::after {transform:scaleX(1);}
.dropdown-menu {display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);min-width:220px;margin:0;padding:14px 0 8px;list-style:none;background:var(--brand-purple);box-shadow:0 14px 28px rgba(0,0,0,0.2);border-radius:6px;z-index:1100;}
nav li.dropdown:hover .dropdown-menu,
nav li.dropdown:focus-within .dropdown-menu {display:block;}
.dropdown-menu li {float:none;}
.dropdown-menu li a {display:block;padding:10px 20px;height:auto;font-size:12px;font-weight:500;text-transform:none;letter-spacing:0.02em;white-space:nowrap;border-right:0;}
.dropdown-menu li a::after {display:none;}
.dropdown-menu li a:hover {background:rgba(255,255,255,0.1);color:var(--accent-color);}
.contact {display:flex;align-items:center;gap:18px;padding-left:22px;margin-left:6px;border-left:1px solid var(--header-divider);font-size:14px;font-family: 'Manrope','Lato',arial,sans-serif;}
.contact a {text-decoration: none; color:#fff;transition:color .15s ease;}
.contact a:hover {color:var(--accent-color);}
.contact .email {font-size:12px;font-weight: 400;opacity:.85;}
.phone {font-weight: 600;}
.btn {padding: 8px 20px;
  border: 0;
  color: #fff;
  background: var(--accent-color);
  font-size: 20px;
  text-transform: uppercase;
  transition: background-color 0.15s ease-in-out;}
  .btn:hover {background: var(--accent-color-dark);}
  .btn span {  font-weight: 300;}

.wrapper {padding-top:76px;}
.main-container .content {max-width:1200px;margin: 0 auto;padding:0 20px;}
.main-container .content {padding:14px 20px 6px;}
.main-container .content h1 {font-family: var(--heading-font);color:#123969;font-size:48px;margin-bottom:20px;font-weight: 700;}
.main-container .content h2 {font-family: var(--heading-font);color:#123969;font-size:42px;margin-bottom:40px;font-weight: 700;}
.main-container .content h3 {font-family: var(--heading-font);color:#123969;font-size:25px;margin-bottom:10px;font-weight: 700;}
hr {margin:60px 0;border-color:#e4e4e4;}
.main-slider {min-height:500px;  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;}
  p {margin-bottom: 20px;line-height: 140%;font-weight:300;}
  .main-slider .content {font-family: var(--heading-font);}
  .banner {color:#fff;text-align: center; margin: 0 auto;padding:20px;margin-top:100px;}
  .banner .btn {display: block;margin:20px auto;}
  .banner .small {font-weight: normal;font-size: 20px;background:rgba(0,0,0, 0.6);display: inline-block;padding:5px 20px; font-weight: 300;}
  .banner .large {font-weight: 300;  font-size: 60px;    margin-bottom: 10px;background:rgba(98, 34, 153, 0.9);display: inline-block;padding:5px 20px;}
  .banner .vote {}
  .main-container .content img {}
  .client-logos {text-align:center;}
.client-logos ul li {display: inline-block;width:18%;zoom:1;padding:5px;  letter-spacing: normal;
  word-spacing: normal;
  vertical-align: top;
  text-rendering: auto;}
.client-logos ul li img {width:100%;}
.client-quotes {text-align: center;}
.client-quotes ul li {min-width:300px;width:33%;zoom:1;display: inline-block;padding:5px;  letter-spacing: normal;
  word-spacing: normal;
  vertical-align: top;
  text-rendering: auto;}
.client-quotes ul li div {padding:20px;text-align: left;}
.client-quotes ul li div p span {font-weight: 400;display: block;
  margin: 15px 0;}
.client-quotes ul li img {float:left;max-width:120px;padding:5px 15px 5px 0;}

.cols .two-col {min-width:300px;width:48%;zoom:1;display: inline-block;padding:20px;  letter-spacing: normal;
  word-spacing: normal;
  vertical-align: top;
  text-rendering: auto;}

.hero {text-align: center;margin:40px 0 40px ;clear:both;}
  .hero h1 {margin-bottom: 10px !important;
  text-transform: uppercase;
  font-weight: 300 !important;}
  .hero p {font-weight:300;}
  .blocks ul {display:grid;grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));gap:10px;list-style:none;margin:0 0 10px;padding:0;}
  .blocks ul li {padding:5px;box-sizing:border-box;}
  .blocks ul li > div {background: rgba(98, 34, 153, 0.9) url(images/grad.jpg) no-repeat;-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;padding:20px;text-align: center;color:#fff;min-height:150px;height:100%;box-sizing:border-box;}
  .blocks ul li > div h2 {margin-bottom:20px !important;color:#fff !important;font-family: var(--heading-font);}
footer {font-size:11px;font-family:arial;color:#999;margin:auto 0 0;}

.main-container .content a {color:#000;}






  @media screen and (max-width:960px) {
    #nav-icon {display: block;position: absolute;top:26px;right:24px;}
    #nav-icon::after, #nav-icon::before, #nav-icon div {content:'';background:#ffffff;height:3px;border-radius:2px;width:20px;margin-bottom:4px;position: relative;display: block;}
    #nav-icon::after {top:0px;}
    #nav-icon::before {top:0px;}
    #nav-icon div {top:0px;}
    #nav-icon.nav-x {content:"x";}
    #nav-icon.nav-x > div {display: none;}
    #nav-icon.nav-x::before {-ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);top:7px;}
    #nav-icon.nav-x::after {-ms-transform: rotate(315deg); /* IE 9 */
    -webkit-transform: rotate(315deg); /* Chrome, Safari, Opera */
    transform: rotate(315deg);}
    nav {display: none !important;}
    nav.open-nav {display: block !important;position:absolute;top:76px;left:0;width:100%;background:var(--brand-purple);text-align: center;border-left:0;max-height:calc(100vh - 76px);overflow-y:auto;}
    nav.open-nav ul {display:block;border-left:0;}
    nav.open-nav ul li {float:none;}
    nav.open-nav ul li a {border:0;justify-content:center;}
    nav.open-nav .dropdown-menu {display:block;position:static;transform:none;box-shadow:none;background:rgba(0,0,0,0.15);border-radius:0;margin:0;min-width:0;}
    nav.open-nav .dropdown-menu li a {justify-content:center;}
    .contact {display: none;}
  }

  @media screen and (max-width:668px) {
    .main-slider {min-height:250px !important;}
  	.main-container .content img {float:none;width:100%;padding:20px 0;}
    p {font-size: 20px;}
  	footer p {font-size: 12px;}
  	.main-container .content h1 {}
	.main-container .content h2 {font-size:35px;}
	.main-container .content h3 {font-size:30px;margin:40px 0 20px;}
  }

  .page #main article .entry-content, .page #main article .entry-header, footer .row {padding:20px;max-width:1200px;margin: 0 auto;}
  .page #main article .entry-header.padding {padding:100px 20px 20px;}
.page #main article a {color:var(--accent-color-dark);}
.page #main article h1 {font-family: var(--heading-font);font-size:40px;color:rgba(98,34,153,1);}
.page #main article h2 { font-size: 30px;
  margin: 0 0 15px 0;
}
.page #main article ul {padding:0px 40px 20px;}
.page #main article li {list-style:disc;margin-bottom:10px;font-weight:300;}
.hero .textwidget {max-width: 780px;
  margin: 0 auto;}
article.page.type-page.status-publish.hentry{min-height:400px}

  footer, footer a {color:#fff;}
#menu-footer li {display: inline-block;padding:0;margin:0 20px 0 0;}
#menu-footer {list-style-type: none;padding:0;margin:0;}
#menu-footer a {color:#fff;font-weight: normal;}
.light-grey {background: var(--brand-purple);padding: 0;}
.medium-grey {background:var(--accent-color-dark);padding:25px 0;}
.dark-grey {background:#646464;padding:25px 0;}
.footer-brand img {width:255px;}
/* #main > article {background: url(images/jump.png) right 200px no-repeat;} */

blockquote, blockquote p {font-weight: bold;
font-size:18px;
color:#666;}