/* ==========================================================================
   Author: Marilena at HoohaaDesign http://hoohaadesign.co.uk
	DDDDDD  								                DDDDDDD
	DDDDDD                                  DDDDDDD
	DDDDDDDDD    DDDDDDDDDD    DDDDDDDDDD   DDDDDDDDDD     DDDDDDD      DDDDDDDD   
	DDDDDDDDDDD  DDDDDDDDDDD   DDDDDDDDDDD  DDDDDDDDDDD    DDDDDDDDDD   DDDDDDDDDD  
	DDDDDDDDDDDD DDDDDDDDDDDD  DDDDDDDDDDDD DDDDDDDDDDDD  DDDDDDDDDDDD DDDDDDDDDDDD 
	DDDDDDDDDDDD DDDDDDDDDDDDD DDDDDDDDDDDD DDDDDDDDDDDD  DDDDDDDDDDDD DDDDDDDDDDDDD
	DDDDDDDDDDDD DDDDDDDDDDDDD DDDDDDDDDDDD DDDDDDDDDDDD  DDDDDDDDDDDD DDDDDDDDDDDDD
	DDDDDDDDDDDD  DDDDDDDDDDD  DDDDDDDDDDDD DDDDDDDDDDDD  DDDDDDDDDDDD  DDDDDDDDDDDD
	DDDDDDDDDDDD   DDDDDDDDD     DDDDDDDD   DDDDDDDDDDDD    DDDDDDDDDD   DDDDDDDDDDD
	DDDDDDDDDDDD      DDDD         DDDD     DDDDDDDDDDDD      DDDDDDDD      DDDDDDDD  
   ========================================================================== */
@font-face {
  font-family: "icomoon";
  src: url("/fonts/icomoon.eot?-dy44n1");
  src: url("/fonts/icomoon.eot?#iefix-dy44n1") format("embedded-opentype"), url("/fonts/icomoon.woff?-dy44n1") format("woff"), url("/fonts/icomoon.ttf?-dy44n1") format("truetype"), url("/fonts/icomoon.svg?-dy44n1#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
}
[class^=icon-], [class*=" icon-"] {
  font-family: "icomoon";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-cross:before {
  content: "\e600";
}

.icon-minus:before {
  content: "\e601";
}

.icon-plus:before {
  content: "\e602";
}

.icon-layout:before {
  content: "\e603";
}

.icon-list:before {
  content: "\e604";
}

.icon-arrow-left:before {
  content: "\e605";
}

.icon-arrow-right:before {
  content: "\e606";
}

.icon-arrow-left2:before {
  content: "\e607";
}

.icon-arrow-right2:before {
  content: "\e608";
}

.icon-arrow-left3:before {
  content: "\e609";
}

.icon-arrow-right3:before {
  content: "\e60a";
}

.icon-flickr:before {
  content: "\e60b";
}

.icon-vimeo:before {
  content: "\e60c";
}

.icon-twitter:before {
  content: "\e60d";
}

.icon-facebook:before {
  content: "\e60e";
}

.icon-googleplus:before {
  content: "\e60f";
}

.icon-pinterest:before {
  content: "\e610";
}

.icon-tumblr:before {
  content: "\e611";
}

.icon-linkedin:before {
  content: "\e612";
}

.icon-instagram:before {
  content: "\e613";
}

.icon-skype:before {
  content: "\e614";
}

.icon-behance:before {
  content: "\e615";
}

@font-face {
  font-family: "belltmedregular";
  src: url("/fonts/belltmed-webfont.woff2") format("woff2"), url("/fonts/belltmed-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
body {
  font-family: "PT Sans", sans-serif;
  font-size: 15px;
  font-weight: lighter;
  line-height: 1.8;
  color: #000000;
  background-color: #fff;
  height: 100%;
  margin: 0;
}

input,
button,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

a {
  color: #C6BFB6;
  text-decoration: none;
  -webkit-transition: color 0.2s;
  transition: color 0.2s;
}

a:hover,
a:focus {
  color: #FFFFFF;
  text-decoration: none;
}

a:focus {
  outline: none;
}

figure {
  margin: 0;
}

img {
  vertical-align: middle;
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eeeeee;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "belltmedregular";
  font-weight: 500;
  line-height: 1.1;
  color: inherit;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h2, h3 {
  text-transform: uppercase;
}

p {
  margin: 15px 0;
  line-height: 2;
}

@media (min-width: 541px) and (max-width: 767px) {
  h2 {
    font-size: 26px;
    margin-bottom: 20px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  h2 {
    font-size: 20px;
  }
}
@media (min-width: 992px) {
  h2 {
    font-size: 30px;
    margin-bottom: 30px;
  }
}
/* LOADER */
#loader {
  position: fixed;
  width: 100%;
  height: 100%;
  text-align: center;
  background-color: #f2e5da;
  z-index: 999;
  pointer-events: none;
}

#loader img {
  position: relative;
  top: 50%;
  margin-top: -64px;
  pointer-events: none;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
.site-wrapper {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow-x: hidden;
}

.site-wrapper {
  opacity: 0;
}
@media (max-width: 768px) {
  .site-wrapper.project-header {
    margin-top: 70px;
  }
}

#mainMenu {
  position: relative;
  z-index: 999;
}

.main-image {
  position: relative;
}
.main-image .logo-overlay {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 364px;
  height: 150px;
  margin-top: -75px;
  margin-left: -182px;
  z-index: 9999;
}

@media (max-width: 768px) {
  .main-image .logo-overlay {
    width: 308px;
    height: 60px;
    margin-top: -30px;
    margin-left: -154px;
  }
}
/* NAVIGATION */
.site-nav {
  position: absolute;
  font-family: "belltmedregular", Georgia, serif;
  width: 100%;
  top: 0;
  left: 0;
  height: 150px;
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.3)));
  background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
  background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
  background: -ms-linear-gradient(bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
  background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
  border: none;
  z-index: 99;
}
.site-nav .navbar-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  text-align: center;
  z-index: 999;
}
.site-nav .navbar-header .navbar-toggler {
  position: absolute;
  top: 20px;
  right: 20px;
  border: none;
  -webkit-appearance: none;
}
.site-nav .navbar-header .navbar-toggler:hover, .site-nav .navbar-header .navbar-toggler:focus, .site-nav .navbar-header .navbar-toggler:active {
  outline: 0;
  border: none;
  outline: none;
  box-shadow: none;
}
.site-nav .navbar-header .navbar-toggler .navbar-toggler-icon {
  width: 40px;
  height: 35px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
  cursor: pointer;
}
.site-nav .navbar-header .navbar-toggler .navbar-toggler-icon span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: #c1bbb2;
  border-radius: 1px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
.site-nav .navbar-header .navbar-toggler .navbar-toggler-icon span:nth-child(1) {
  top: 0px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}
.site-nav .navbar-header .navbar-toggler .navbar-toggler-icon span:nth-child(2) {
  top: 10px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}
.site-nav .navbar-header .navbar-toggler .navbar-toggler-icon span:nth-child(3) {
  top: 20px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}
.site-nav .navbar-header .navbar-toggler .navbar-toggler-icon.open span:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: -2px;
  left: 5px;
}
.site-nav .navbar-header .navbar-toggler .navbar-toggler-icon.open span:nth-child(2) {
  width: 0%;
  opacity: 0;
}
.site-nav .navbar-header .navbar-toggler .navbar-toggler-icon.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 26px;
  left: 5px;
}
.site-nav .navbar-brand {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 28px;
  display: block;
  margin: 0 auto;
  z-index: 999;
  pointer-events: auto;
}
.site-nav .navbar-brand img {
  height: 60px;
  max-width: 100%;
}
@media (min-width: 1201px) {
    .site-nav .navbar-brand img {
        height: 80px;
    }
}

.site-nav .navbar-brand .black-logo {
  display: none;
}
.site-nav .navbar-nav .nav-item .nav-link {
  padding-top: 25px;
  font-size: 18px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.site-nav .navbar-nav .nav-item.active .nav-link span {
  display: inline;
  padding-bottom: 4px;
  border-bottom: 2px solid #fff;
}

.navbar-black {
  background: none;
}
.navbar-black .navbar-brand .black-logo {
  display: block;
}
.navbar-black .navbar-brand .white-logo {
  display: none;
}
.navbar-black .navbar-nav .nav-item .nav-link {
  color: #000000 !important;
}
.navbar-black .navbar-nav .nav-item.active .nav-link span {
  border-bottom-color: #000;
}

@media (max-width: 768px) {
  .collapse.navbar-collapse.collapsing {
    opacity: 0;
  }
  .site-nav {
    background-image: none;
    background-color: rgba(255, 255, 255, 0.9);
    height: 70px;
  }
  .site-nav .navbar-brand {
    position: absolute;
    top: 5px;
    left: 15%;
    margin: 0;
    width: 205px;
    height: 40px;
  }
  .site-nav .navbar-brand img {
    position: relative;
    top:0px;
    height: auto;
    display: block !important;
  }
  .site-nav .navbar-brand .black-logo {
    display: block !important;
  }
  .site-nav .navbar-brand .white-logo {
    display: none !important;
  }
  .site-nav .navbar-nav {
    border-top: 1px solid #dddddd;
    border-left: 1px solid #dddddd;
    padding: 0;
  }
  .site-nav .navbar-nav .nav-item {
    padding-bottom: 5px;
    padding-right: 0;
    border-bottom: 1px solid #dddddd;
    display: block;
    text-align: center;
    width: 100%;

  }
  .site-nav .navbar-nav .nav-item.active {
    background-color: #f2e5da;
    color: #000;
  }
  .site-nav .navbar-nav .nav-item.active .nav-link span {
    border-color: transparent;
  }
  .site-nav .navbar-nav .nav-item .nav-link {
    padding-top: 12px;
    color: #333;
    display: block;
  }
  #mainMenu {
    background-color: rgba(255, 255, 255, 0.9);
    top: 54px;
    z-index: 999;
  }
}
@media (max-width: 767px) {
  .site-nav .navbar-brand {
    left: 30%;
  }
}
/* HOME INTRO */
#mainContainer {
  padding: 60px 0px 60px 0px;
}

#logoBg {
  background-image: url("/img/SophiePeckettDesignFadedLogoMark.png");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 500px auto;
  padding-top: 80px;
  padding-bottom: 100px;
}

/* PROJECT DESCRIPTION */
.project .project-desc {
  position: relative;
  padding: 3% 0 3%;
  z-index: 5;
}

.press {
  position: relative;
  background-color: #fff;
  padding: 40px 0 80px;
  z-index: 5;
}

@media (max-width: 1025px) {
  .press {
    padding: 140px 0 80px;
  }
}
@media (max-width: 768px) {
  .press {
    padding: 100px 0 80px;
  }
}


picture.responsive .img-fluid {
  width: 100%;
  max-width: auto;
}

.padder {
  padding: 15px;
}

figure.col-12 img {
  max-width: 100%;
}

.project .project-desc .padder p {
  margin: 0;
  padding-right: 2%;
}

.project .project-desc a:hover {
  color: #ccc;
}

.project-nav {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.project-nav a {
  display: block;
  color: #333333;
  padding-top: 50px;
  padding-bottom: 50px;
}
.project-nav a span {
  position: relative;
  font-size: 30px;
  top: 2px;
  width: 30%;
  display: inline-block;
}
.project-nav a h3 {
  width: 70%;
  display: inline-block;
}
.project-nav a:hover {
  color: #8B8782;
}
.project-nav a.text-right {
  text-align: right !important;
}

@media (max-width: 767px) {
  .project-nav a {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .project-nav a h3.display-6 {
    font-size: 16px !important;
    line-height: 18px;
  }
}
/* CONTACT FORM */
#contactForm {
  padding-top: 220px;
}
#contactForm input, #contactForm textarea {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0px;
  background-color: rgba(255, 255, 255, 0.05);
  -webkit-appearance: none;
  outline: none;
}
#contactForm input:focus, #contactForm input:active, #contactForm textarea:focus, #contactForm textarea:active {
  outline: none !important;
}
#contactForm label {
  display: inline-block;
}
#contactForm div.help-block {
  font-family: "belltmedregular", Georgia, serif;
  display: inline-block;
  font-style: italic;
  color: #8B8782;
}
#contactForm .btn.btn-primary.mt-6 {
  border: 1px solid #333;
  color: #333;
  background-color: transparent;
  margin: 20px auto;
  transition: all 0.3s linear;
  font-size: 14px;
  display: block;
}
#contactForm .btn.btn-primary.mt-6:hover {
  background-color: #fff;
}
#contactForm .btn.btn-primary.mt-6 .submit-align-center {
  margin: 0 auto;
  text-align: center;
}

@media (max-width: 768px) {
  #contactForm {
    padding-top: 120px;
  }
}
/* CONTACT PAGE */
#contactDetails {
  padding-top: 80px;
}
#contactDetails p {
  line-height: 1.4;
}
#contactDetails p a {
  color: #333;
}

.brand-bg.palm-tree {
  background-image: url("/img/SophiePeckettDesignMarkWhite.png");
  background-position: center 101%;
  background-repeat: no-repeat;
  padding-bottom: 220px;
  display: block;
}

/* FOOTER */
.icon-list {
  font-size: 24px;
  display: block;
}

.site-nav #trigger-menu:hover {
  text-decoration: none;
}

.site-footer {
  color: #333333;
}

.site-footer ul > li {
  display: inline-block;
  padding-left: 0;
  padding-right: 5px;
  font-size: 16px;
}

.site-footer ul > li > a {
  font-size: 16px;
  margin: 10px 2px;
  color: #000;
}

.site-footer ul.footer-bottom > li,
.site-footer ul.footer-bottom > li > a {
  font-size: 12px;
}

.site-footer li a.biid {
  display: block;
  margin-top: -40px;
}

.site-footer li a:hover {
  color: #999999;
  text-decoration: none;
}

.footer-top p > a {
  color: #000;
}

/* ABOUT PAGE */
#aboutInfo {
  padding-top: 220px;
}

@media (max-width: 768px) {
  #aboutInfo {
    padding-top: 120px;
  }
}
/* SHARE LINKS */
ul.share li {
  display: inline-block;
  font-size: 18px;
  margin: 0 10px;
}
ul.share li a {
  color: #333;
}

/* LOGO OVERLAY */

#logo {
  position: fixed;
  top: 50%;
  left: 50%;
  margin: -71px 0 0 -140px;
  padding: 25px 20px;
  background-color: rgba(255, 255, 255, 0.9);
  -webkit-transition: all 0.35s ease-in;
  -o-transition: all 0.35s ease-in;
  transition: all 0.35s ease-in;
  z-index: 8;
}

#logo:hover {
  background-color: rgb(255, 255, 255);
  -webkit-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.5);
  -moz-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.5);
  box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.5);
}

#logo img {
  width: 240px;
  height: 32px;
  display: block;
}

/* PROJECT */
.brand-bg {

  background-color: rgb(234, 212, 198);
}

#projectsList {
  padding-top: 80px;
  padding-bottom: 80px;
}
#projectsList .project_list {
  position: relative;
  display: block;
  background-color: rgb(234, 212, 198);
}
#projectsList .project_list .project_list_img {
  position: relative;
  display: block;
  -webkit-transition: opacity 0.35s ease-in;
  -o-transition: opacity 0.35s ease-in;
  transition: opacity 0.35s ease-in;
}
#projectsList .project_list .project_list_caption {
  position: absolute;
  display: block;
  width: 80%;
  height: 120px;
  line-height: 60px;
  top: 50%;
  left: 10%;
  margin-top: -60px;
  opacity: 0;
  -webkit-transition: opacity 0.25s linear;
  -o-transition: opacity 0.25s linear;
  transition: opacity 0.25s linear;
  text-align: center;
}
#projectsList .project_list .project_list_caption h3 {
  color: #fff;
}
#projectsList .project_list:hover .project_list_img {
  opacity: 0.2;
}
#projectsList .project_list:hover .project_list_caption {
  opacity: 1;
}

.page #projectsList {
  padding-top: 200px;
}

@media (max-width: 768px) {
  .page #projectsList {
    padding-top: 100px;
  }
  .home #projectsList {
    padding-top: 10px;
  }
}
/* INSTAGRAM */
#instaList {
  padding-top: 80px;
  padding-bottom: 80px;
  border-bottom: 1px solid #eeeeee;
  display: block;
}

.insta-grid {
  display: block;
  float: left;
  margin: 0 30px;
}
.insta-grid .insta-link {
  display: block;
}
.insta-grid .insta-link .insta-img {
  width: 260px;
}
@media (max-width: 768px) {
  .insta-grid .insta-link .insta-img {
    width: 130px;
  }
}

@keyframes ticker-kf {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-108rem, 0, 0);
  }
}
.img-ticker {
  animation: ticker-kf 30s linear infinite alternate;
}

/* BEFORE ANIMATED CLASS */
.before {
  opacity: 0;
}

.bottom-contacts {
  padding: 40px 0 0;
  color: #fff;
}

.bottom-contacts .row > div {
  min-height: 120px;
}

.bottom-contacts a {
  color: #fff;
}

.bottom-contacts a:hover {
  color: #8B8782;
}

.bottom-contacts p {
  padding-left: 2.5%;
}

/* CONTAINER */
.links {
  font-size: 14px;
  line-height: 1.8;
  color: #fff;
  margin-top: 30px;
}

.links a {
  color: #fff;
}

.links a:hover,
.links a:focus {
  color: #ccc;
}

.btn, .links .btn {
  font-family: "Century Gothic", "PT Sans", sans-serif;
  display: inline-block;
  margin-bottom: 20px;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  border: none;
  white-space: nowrap;
  padding: 10px 30px;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 1px;
  color: #333333;
  text-transform: uppercase;
  background-color: #fff;
  border-radius: 1px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.btn:focus,
.btn:active:focus,
.btn.active:focus {
  outline: none;
}

.btn:hover,
.btn:focus,
.links .btn:hover,
.links .btn:focus {
  color: #333333;
  text-decoration: none;
}

.btn span {
  font-family: "Arapey", Georgia, serif;
  font-size: 18px;
  line-height: 1.6;
  font-weight: lighter;
  font-style: italic;
  text-transform: capitalize;
  letter-spacing: 1px;
  color: #B5ACAA;
}

.embed-responsive {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;
}

.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  border: 0;
}

.embed-responsive.embed-responsive-16by9 {
  padding-bottom: 56.25%;
}

.embed-responsive.embed-responsive-4by3 {
  padding-bottom: 75%;
}