/*
Theme Name: 	Four Leaves
Author: 		Francesca Haselden

*/
/*
===========================
CONTENTS:

01 Sensible defaults
02 Typography
03 Media queries
===========================
*/
/* ----------------------------------------------------------------------------------------------------------
03 Sass Variables -------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------
01 Sensible defaults ----------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
@import url(css/bootstrap.min.css);
div,
article,
section,
header,
footer,
nav,
li {
  position: relative;
  /* For absolutely positioning elements within containers (add more to the list if need be) */ }

.group:after {
  display: block;
  height: 0;
  clear: both;
  content: ".";
  visibility: hidden;
  /* For clearing */ }

body {
  background: #fff;
  /* Don't forget to style your body to avoid user overrides */ }

::-moz-selection {
  background: #ff0;
  color: #333; }

::selection {
  background: #ff0;
  color: #333; }

body,
html {
  width: 100%;
  height: 100%; }

.no-pad {
  padding: 0; }

.no-pad-right {
  padding-right: 0; }

.no-pad-left {
  padding-left: 0; }

.buffer {
  padding: 20px 0; }

.buffer-top {
  padding-top: 20px; }

.buffer-bottom {
  padding-bottom: 20px; }

.double-buffer {
  padding: 40px 0; }

.double-buffer-top {
  padding-top: 40px; }

.double-buffer-bottom {
  padding-bottom: 40px; }

/* ----------------------------------------------------------------------------------------------------------
02 Typography -----------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
/*

14 / 16	= 		0.875em 		(14px equivalent)
16 / 16	= 		1em 			(16px equivalent)
18 / 16 = 		1.125em 		(18px equivalent)
21 / 16 = 		1.3125em 		(21px equivalent)
24 / 16 = 		1.5em 			(24px equivalent)
30 / 16 = 		1.875em 		(30px equivalent)

*/
body,
input,
textarea {
  font-size: 16px;
  font-family: "Abeezee", Arial, sans-serif;
  color: #454545; }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold;
  font-family: "Abeezee", Arial, sans-serif; }

p {
  line-height: 34px; }

a:hover, a:active, a:focus {
  color: #fff;
  text-decoration: none;
  opacity: 0.8; }

/* ----------------------------------------------------------------------------------------------------------
04 Media queries (using a mobile-first approach) ------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
header {
  background-color: #3c959f; }
  header .logo img {
    max-width: 100%; }
  header .logo h1 {
    color: #fff; }
  header nav {
    text-align: right;
    align-items: center;
    display: flex; }
    header nav .menu-nav-container {
      margin-left: 8%;
      margin-top: 4%; }
    header nav ul {
      width: 100%;
      display: table;
      margin: 0;
      padding: 0; }
    header nav li {
      margin: 0;
      padding: 0;
      list-style-type: none;
      display: inline-block; }
    header nav li a {
      padding: 0 20px;
      color: #fff;
      font-family: "Abeezee", Arial, sans-serif;
      font-size: 1.5em;
      transition: opacity 0.3s ease-in; }
    header nav li a:hover {
      opacity: 0.7;
      color: #fff;
      text-decoration: none; }

.banner {
  background-image: url(assets/banner.png);
  background-repeat: no-repeat;
  background-size: cover;
  height: 450px;
  background-position: top center;
  position: relative; }
  .banner .container {
    height: 100%; }
  .banner .banner-text {
    position: absolute;
    bottom: 60px;
    background-color: #acd470;
    opacity: 0.7;
    padding: 20px;
    box-sizing: border-box;
    color: #fff; }
    .banner .banner-text h1 {
      font-size: 1.75em;
      margin: 0;
      padding: 0;
      margin-bottom: 20px; }
    .banner .banner-text h1 span {
      font-size: 1.8em; }
    .banner .banner-text p {
      margin: 0;
      padding: 0;
      color: #454545; }

#about img {
  float: left;
  width: 30%;
  margin: 40px 40px 20px 0;
  height: auto;
  border-radius: 50%; }
#about h2 {
  color: #3c959f; }
#about h3 {
  font-size: 1.25em; }
#about p {
  margin-bottom: 20px; }

.contact-box {
  background-color: #3c959f;
  border-radius: 5px;
  padding: 20px;
  box-sizing: border-box;
  color: #fff;
  margin-top: 80px;
  margin-bottom: 80px; }

.contact-box svg {
  fill: #fff;
  padding-top: 25px; }

.contact-box a {
  color: #fff;
  text-decoration: underline; }

#more {
  padding: 40px 0;
  background-image: url(assets/bokeh.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center; }
  #more .container {
    background-color: #acd470;
    opacity: 0.9; }
  #more .more-info-box {
    padding: 40px 20px;
    box-sizing: border-box; }
    #more .more-info-box p {
      color: #fff;
      margin-bottom: 0; }

#specialisms {
  text-align: center; }
  #specialisms .button-text {
    text-align: left;
    font-style: italic; }
  #specialisms .button-text span {
    color: #acd470;
    font-weight: bold; }
  #specialisms .button-list span {
    font-style: italic;
    padding: 4px 8px;
    background-color: #3c959f;
    color: #fff;
    margin: 5px 10px;
    border-radius: 4px;
    display: inline-block; }
  #specialisms h2 {
    margin-bottom: 40px; }

#qualifications {
  text-align: center; }
  #qualifications .icon img {
    max-width: 100%;
    height: auto;
    padding-top: 30px; }
  #qualifications p {
    text-align: left; }

footer {
  background-color: #454545;
  color: #fff; }
  footer .footer-bar {
    background-color: #2c2c2c;
    padding: 20px 0; }
  footer .footer-bar .container > div:last-child {
    text-align: right; }
  footer .footer-bar .container > div span:last-child {
    margin-right: 40px; }
  footer strong {
    font-style: italic; }
  footer .footer-box {
    background-color: #acd470;
    opacity: 0.9;
    padding: 20px;
    box-sizing: border-box; }
    footer .footer-box p {
      color: #454545;
      margin-bottom: 0; }
  footer #map {
    height: 255px;
    width: 100%; }
  footer #map-overlay {
    position: absolute;
    top: 40px; }

.news .news-item {
  padding: 20px;
  box-sizing: border-box;
  background-color: #dedede;
  margin-top: 20px;
  margin-bottom: 20px; }
  .news .news-item h3 {
    font-size: 1em; }
  .news .news-item a {
    color: #3c959f; }
  .news .news-item a:hover {
    color: #acd470; }
  .news .news-item span {
    font-size: 0.8em; }

time {
  margin-bottom: 20px;
  display: block; }

/* 400 and up */
/* Retina Display */
/* ----------------------------------------------------------------------------------------------------------
05 Fonts ----------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
@font-face {
  font-family: 'Abeezee';
  src: url("assets/fonts/abeezee-italic-webfont.eot");
  src: url("assets/fonts/abeezee-italic-webfont.eot?#iefix") format("embedded-opentype"), url("assets/fonts/abeezee-italic-webfont.woff2") format("woff2"), url("assets/fonts/abeezee-italic-webfont.woff") format("woff"), url("assets/fonts/abeezee-italic-webfont.ttf") format("truetype"), url("assets/fonts/abeezee-italic-webfont.svg#abeezeeitalic") format("svg");
  font-weight: normal;
  font-style: italic; }
@font-face {
  font-family: 'Abeezee';
  src: url("assets/fonts/abeezee-regular-webfont.eot");
  src: url("assets/fonts/abeezee-regular-webfont.eot?#iefix") format("embedded-opentype"), url("assets/fonts/abeezee-regular-webfont.woff2") format("woff2"), url("assets/fonts/abeezee-regular-webfont.woff") format("woff"), url("assets/fonts/abeezee-regular-webfont.ttf") format("truetype"), url("assets/fonts/abeezee-regular-webfont.svg#abeezeeregular") format("svg");
  font-weight: normal;
  font-style: normal; }

/*# sourceMappingURL=style.css.map */