/* Emergency Glazing London - self-contained stylesheet */
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:'Open Sans',Arial,sans-serif;font-size:15px;line-height:1.65;color:#444;background:#fff}
img{max-width:100%;height:auto;border:0}
a{color:#c0392b;text-decoration:none}
a:hover{color:#e74c3c}
h1,h2,h3,h4,h5,h6{font-family:'Montserrat',Arial,sans-serif;color:#2c3e50;margin:0 0 15px;font-weight:700;line-height:1.3}
h1{font-size:34px}
h2{font-size:26px}
h3{font-size:20px}
p{margin:0 0 15px}
ul{padding-left:20px}

/* Container + grid */
.container,.container-fixel{max-width:1170px;margin:0 auto;padding:0 15px;width:100%}
.row{display:flex;flex-wrap:wrap;margin:0 -15px}
.row::after{content:'';display:table;clear:both}
[class*="col-sm-"]{padding:0 15px;width:100%}
@media(min-width:768px){
  .col-sm-2{width:16.666%}
  .col-sm-3{width:25%}
  .col-sm-4{width:33.333%}
  .col-sm-6{width:50%}
  .col-sm-8{width:66.666%}
  .col-sm-offset-2{margin-left:16.666%}
}

/* Utility */
.clearfix::after{content:'';display:table;clear:both}
.text-center{text-align:center}
.text-right{text-align:right}
.themesflat-spacer{display:block;height:30px;clear:both}
.animsition{opacity:1}
.bg-white{background:#fff}

/* ========== HEADER ========== */
#header{background:#fff;position:fixed;top:0;left:0;right:0;z-index:999;box-shadow:0 2px 8px rgba(0,0,0,.08)}

#header .topbar{background:#2c3e50;padding:8px 0;font-size:13px;color:rgba(255,255,255,.9)}
#header .topbar .tf-topbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}
#header .topbar ul.top-content{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}
#header .topbar ul.top-content li{margin-right:24px}
#header .topbar ul.top-content li a{color:rgba(255,255,255,.9);text-decoration:none}
#header .topbar ul.top-content li a:hover{color:#fff}
#header .topbar i{color:#e74c3c;margin-right:6px}
#header .topbar .topbar-socials a{display:inline-block;width:28px;height:28px;line-height:28px;text-align:center;color:#fff;background:rgba(255,255,255,.08);border-radius:3px;margin-left:4px}
#header .topbar .topbar-socials a:hover{background:#c0392b}

#header .main-top{background:#fff;padding:10px 0}
#header .main-top > .container,
#header .main-top > .container-fixel{display:flex;justify-content:space-between;align-items:center}
#header .main-top .logo{flex-shrink:0;padding:8px 0}
#header .main-top .logo img{max-height:60px;width:auto;display:block}
#header .main-top .content-wrap{display:flex;align-items:center;gap:20px}

/* Main nav */
#mainnav > ul.menu{list-style:none;margin:0;padding:0;display:flex;align-items:center}
#mainnav > ul.menu > li{position:relative;margin:0 10px}
#mainnav > ul.menu > li > a{display:block;padding:18px 0;color:#2c3e50;font-family:'Montserrat',Arial,sans-serif;font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.5px;text-decoration:none}
#mainnav > ul.menu > li > a:hover,
#mainnav > ul.menu > li:hover > a{color:#c0392b}

/* Dropdown */
#mainnav ul.sub-menu{position:absolute;top:100%;left:0;min-width:260px;background:#fff;list-style:none;margin:0;padding:8px 0;box-shadow:0 4px 12px rgba(0,0,0,.15);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s,transform .2s,visibility .2s;z-index:1000}
#mainnav > ul.menu > li:hover > ul.sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
#mainnav ul.sub-menu li a{display:block;padding:9px 20px;color:#2c3e50;font-size:13px;text-decoration:none;border-bottom:1px solid #f0f0f0}
#mainnav ul.sub-menu li:last-child a{border-bottom:none}
#mainnav ul.sub-menu li a:hover{background:#f8f8f8;color:#c0392b}

/* Hamburger */
#header .btn-menu{display:none;cursor:pointer;padding:16px 0;position:relative;width:30px;height:30px}
#header .btn-menu span{display:block;width:26px;height:2px;background:#2c3e50;position:relative;margin-top:14px}
#header .btn-menu span::before,
#header .btn-menu span::after{content:'';display:block;width:26px;height:2px;background:#2c3e50;position:absolute;left:0}
#header .btn-menu span::before{top:-8px}
#header .btn-menu span::after{top:8px}

/* ========== BUTTONS ========== */
.themesflat-button,
.themesflat-button.btn-style-one,
a.themesflat-button{
  display:inline-block;
  padding:12px 26px;
  background:#c0392b;
  color:#fff !important;
  border:2px solid #c0392b;
  border-radius:4px;
  font-family:'Montserrat',Arial,sans-serif;
  font-weight:600;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.5px;
  text-decoration:none !important;
  cursor:pointer;
  transition:background .2s,color .2s,border-color .2s;
  line-height:1.2
}
.themesflat-button:hover,
.themesflat-button.btn-style-one:hover,
a.themesflat-button:hover{
  background:#e74c3c;
  border-color:#e74c3c;
  color:#fff !important
}
.themesflat-button .btn-title,
a.themesflat-button .btn-title{
  color:inherit !important;
  display:inline;
  font-size:inherit;
  font-family:inherit;
  opacity:1 !important;
  visibility:visible !important;
  background:transparent !important
}
.themesflat-button i{margin-right:6px}

/* ========== PAGE / SECTION ========== */
.page-title{padding-top:140px}  /* clears the fixed header */

/* ========== BREADCRUMBS ========== */
.breadcrumbs{background:#c0392b;padding:15px 0;color:#fff}
.breadcrumbs .trail-items{max-width:1170px;margin:0 auto;padding:0 15px;font-size:14px}
.breadcrumbs a{color:rgba(255,255,255,.9)}
.breadcrumbs a:hover{color:#fff}
.breadcrumbs span{color:rgba(255,255,255,.7)}

/* ========== TITLE SECTIONS ========== */
.title-section .sub-title{font-size:13px;font-weight:700;letter-spacing:2px;color:#c0392b;text-transform:uppercase;margin-bottom:10px}
.title-section .flat-title{font-size:30px;font-weight:700;color:#2c3e50;font-family:'Montserrat',Arial,sans-serif;margin-bottom:20px}
.flat-title{font-family:'Montserrat',Arial,sans-serif;font-weight:700;color:#2c3e50}

/* ========== CONTENT BODY (markdown output) ========== */
.content-body h2{font-size:22px;margin:30px 0 14px;color:#333;border-bottom:2px solid #c0392b;padding-bottom:8px}
.content-body h3{font-size:18px;margin:24px 0 10px;color:#2c3e50}
.content-body p{margin-bottom:14px;line-height:1.75}
.content-body ul,.content-body ol{margin:12px 0 18px 20px;line-height:1.75}
.content-body li{margin-bottom:6px}
.content-body strong{color:#333}
.content-body table{width:100%;border-collapse:collapse;margin:18px 0;font-size:14px}
.content-body th,.content-body td{border:1px solid #ddd;padding:10px 12px;text-align:left}
.content-body th{background:#f5f5f5;font-weight:bold}
.content-body blockquote{border-left:4px solid #c0392b;padding:12px 20px;margin:18px 0;background:#fafafa;font-style:italic}
.content-body a{color:#c0392b;text-decoration:underline}
.content-body a:hover{color:#e74c3c}

/* ========== SIDEBAR ========== */
.sidebar ul{list-style:none;padding:0;margin:0}
.sidebar ul li{padding:6px 0;border-bottom:1px solid #eee}
.sidebar ul li:last-child{border-bottom:none}
.sidebar ul li a{color:#565872;font-size:14px;text-decoration:none}
.sidebar ul li a:hover{color:#c0392b}

/* ========== SPECIAL COMPONENTS ========== */
.emergency-badge{background:#c0392b;color:#fff;padding:8px 20px;border-radius:4px;display:inline-block;font-weight:bold;margin:10px 0;text-decoration:none}
.cta-bar{background:#2c3e50;padding:30px;border-radius:8px;text-align:center;margin:30px 0}
.cta-bar h3{color:#fff;margin:0 0 10px}
.cta-bar p{color:rgba(255,255,255,.8);margin:0 0 15px}
.cta-bar a{color:#e74c3c;font-size:24px;font-weight:bold;text-decoration:none}
.cta-bar a:hover{color:#fff}

/* ========== FOOTER ========== */
.footer,.footer.bg-color{background:#1a252f;color:rgba(255,255,255,.7);font-size:14px}
.footer a{color:rgba(255,255,255,.7);text-decoration:none}
.footer a:hover{color:#e74c3c}
.footer ul{list-style:none;padding:0;margin:0}
.footer li{color:rgba(255,255,255,.6);padding:4px 0;font-size:14px}
.footer i{color:#e74c3c;margin-right:6px}
.footer p{color:rgba(255,255,255,.6)}
.footer p a{color:rgba(255,255,255,.8)}

/* ========== RESPONSIVE ========== */
@media(max-width:991px){
  #header .main-top > .container,
  #header .main-top > .container-fixel{position:relative;flex-wrap:wrap}
  #header .main-top .content-wrap{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:#fff;
    flex-direction:column;
    align-items:stretch;
    padding:0;
    box-shadow:0 6px 18px rgba(0,0,0,.15);
    gap:0;
    border-top:1px solid #eee
  }
  #header .main-top .content-wrap.open{display:flex}
  #header .btn-menu{display:block;margin-left:auto}
  #mainnav{width:100%}
  #mainnav > ul.menu{flex-direction:column;width:100%;align-items:stretch}
  #mainnav > ul.menu > li{margin:0}
  #mainnav > ul.menu > li > a{padding:14px 20px;border-bottom:1px solid #eee}
  #mainnav ul.sub-menu{position:static;box-shadow:none;opacity:1;visibility:visible;transform:none;display:none;padding:0;min-width:0}
  #mainnav > ul.menu > li.open > ul.sub-menu{display:block}
  #mainnav ul.sub-menu li a{padding:10px 40px;background:#f8f8f8}
  #header .flat-appointment{padding:15px 20px;border-top:1px solid #eee}
  #header .flat-appointment .themesflat-button{width:100%;text-align:center}
  #header .topbar .topbar-socials{display:none}
  #header .topbar ul.top-content li{margin-right:12px;font-size:11px}
  .title-section .flat-title{font-size:24px}
  h1{font-size:28px}
  h2{font-size:22px}
}