/*
 * Base structure
 */

body {
	box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
	overflow-x: hidden;
	background-color:#212529;
	background-attachment: fixed;
	background-position: center center;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
	background-size: cover;
}

body:after{
      content:"";
      position:fixed; /* stretch a fixed position to the whole screen */
      top:0;
      height:100vh; /* fix for mobile browser address bar appearing disappearing */
      left:0;
      right:0;
      z-index:-1; /* needed to keep in the background */
      background: url(/img/plaster-mouldings-hampshire.jpg) center center;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
}

.clearfix {
	clear: both;
}

.scrolltotop {
	position:fixed;
	bottom:3%;
	right:2%;
	background-color:#000;
	color:#fff;
	display:none;	
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    padding:.25rem .75rem;
    font-size: 2rem;
    border-radius: 0.25rem;
}

.scrolltotop.show {
	display:inline;
	opacity:.3;
	-MS-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"
}

.scrolltotop.show:hover {
	opacity:.85;
	color:#fff;
	-MS-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"
}


h1,h2 {
	font-family: 'Crimson Pro', serif;
	font-weight:300!important;
}

h1 {
	font-size:1.8em!important;
	margin-bottom:1.5rem!important;
}

h2 {
	font-style:italic!important;
	font-size:2.3em!important;
	margin-bottom:.5em!important;
}

h2 a {
	font-style:italic!important;
	text-decoration:none!important;
}

h3 {
	font-family: 'Outfit', sans-serif;
	font-weight:300;
	font-size:1.25em!important;
	color: rgba(255, 255, 255, .6);
}

p {
	font-family: 'Outfit', sans-serif;
	font-weight:300;
	font-size:1.1em!important;
}

.webcredit {
	font-size:.9rem;
	text-decoration:none!important;
}

.webcredit:hover {
	color:#ff4d97!important;
}

@media only screen and (min-width: 992px) {
	h1 {
		font-size:2em!important;
	}
	h2 {
		font-size:3.5em!important;
	}
	.whatsapp {
		font-size:2.6rem;
	}
}

.bg-red {background:#ee3124!important}
.bg-black {background:#000000!important}
.bg-black-75 {background-color: rgba(0, 0, 0, 0.75);}
.bg-black-50 {background-color: rgba(0, 0, 0, 0.5);}
.bg-black-25 {background-color: rgba(0, 0, 0, 0.25);}
.bg-black-10 {background-color: rgba(0, 0, 0, 0.1);}
.bg-grey {background:#e3e4e5!important}
.bg-light  {background:#f5f5f5!important}
.bg-dark  {background:#282828!important}
.grey {color:#d9d9d9!important}

/* Custom default button */
.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus {
  color: #333;
  text-shadow: none; /* Prevent inheritance from `body` */
}

.btn-group-lg>.btn, .btn-lg {
	font-size:1.1rem!important;
}

/* Animation */

@keyframes fadeInUp {
    from {
        transform: translate3d(0,40px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

@-webkit-keyframes fadeInUp {
    from {
        transform: translate3d(0,40px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

.animated {
    animation-duration: 1s;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: both
}

.animatedFadeInUp {
    opacity: 0
}

.fadeInUp {
    opacity: 0;
    animation-name: fadeInUp;
    -webkit-animation-name: fadeInUp;
}

.animation-delay {
	animation-delay: 200ms;
}


/*
 * Header
 */

#logo {
	top:0;
	text-align: center!important;
	z-index:99998!important;
	transition: background-color 0.5s ease;
}

#logo img {
	height:140px;
	transition: all .2s ease;
}

#logo.scrolled {
	background-color:rgba(0, 0, 0, 0.95);
}

#logo.scrolled img {
	height:75px;
}

@media only screen and (min-width: 992px) {
	#logo img {
		height:200px;
	}
}


/*
 * Desktop Menu
 */

.dt-menu-container {
	position:absolute;
	bottom:40px;
	height:50px;
	margin-top:107px;
	z-index:99997!important;
	display:none;
	transition: background-color 0.2s ease;
}

@media only screen and (min-width: 992px) {
	.dt-menu-container {
		display:block!important
	}
}

.dt-menu-scrolled {
	background-color:rgba(0, 0, 0, 0.95);
}

.nav-masthead .nav-link {
	padding: .25rem 0;
	font-family: 'Outfit', sans-serif;
	font-size:1.1em;
	color: rgba(255, 255, 255, 1);
	background-color: transparent;
	border-bottom: .25rem solid transparent;
}

.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
  border-bottom-color: rgba(255, 255, 255, .25);
}

.nav-masthead .nav-link + .nav-link {
  margin-left: 2rem;
}

.nav-masthead .active {
  color: #fff;
  border-bottom-color: #fff;
}

/*
 * Burger/Mobile Menu
 */

@media only screen and (min-width: 992px) {
	.burger-menu-container {
		display:none
	}
}

.button_container {
	position: fixed;
	top: 6%;
	right: 5%;
	height: 27px;
	width: 35px;
	cursor: pointer;
	z-index:99998!important;
	transition: opacity .25s ease;
}
  
.button_container:hover {
    opacity: .7;
}
  
.button_container.active .top {
    transform: translateY(11px) translateX(0) rotate(45deg);
    background: #FFF;
}

.button_container.active .middle {
	opacity: 0;
	background: #FFF;
}
    
.button_container.active .bottom {
	transform: translateY(-11px) translateX(0) rotate(-45deg);
	background: #FFF;
}

.button_container span {
	background: #f2f2f2;
	border: none;
	height: 5px;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	transition:  all .35s ease;
	cursor: pointer;
}
    
.button_container span:nth-of-type(2) {
	top: 11px;
}
    
.button_container span:nth-of-type(3) {
	top: 22px;
}
	
.overlay {
	position: fixed;
	background-color:rgba(0, 0, 0, 0.9);
	top: 0;
	left: 0;
	width: 100%;
	height: 0%;
	opacity: 0;
	visibility: hidden;
	transition: opacity .35s, visibility .35s, height .35s;
	overflow: hidden;
	z-index:10!important;
}

.overlay.closed {
	opacity: 0;
	visibility: hidden;
}

.overlay.open {
	opacity: 1;
	visibility: visible;
	height: 100%;
}
    
.overlay.open li {
	animation: fadeInRight .5s ease forwards;
	animation-delay: .35s;
}
      
.overlay.open li:nth-of-type(2) {
	animation-delay: .4s;
}

.overlay.open li:nth-of-type(3) {
	animation-delay: .45s;
}

.overlay.open li:nth-of-type(4) {
	animation-delay: .50s;
}
  

.overlay nav {
    position: relative;
    height: 70%;
    top: 50%;
    transform: translateY(-50%);
	font-family: 'Crimson Pro', serif;
	font-weight:400;
    font-size: 2.4em;
    text-align: center;
  }
  
.overlay nav ul {
    list-style: none;
    padding: 0;
    padding-top: 100px;
    margin: 0 auto;
    display: inline-block;
    position: relative;
    height: 100%; 
}
    
.overlay nav ul li {
	display: block;
	height: 16%;
	height: calc(100% / 6);
	min-height: 50px;
	position: relative;
	opacity: 0;
}
      
.overlay nav ul li a {
	display: block;
	position: relative;
	color: #FFF;
	text-decoration: none;
	overflow: hidden;
}
        
.overlay nav ul li a:hover:after,
.overlay nav ul li a:focus:after,
.overlay nav ul li a:active:after {
	width: 100%;
}
        
.overlay nav ul li a:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0%;
	transform: translateX(-50%);
	height: 3px;
	background: #FFF;
	transition: .35s;
}

@keyframes fadeInRight {
  0% {opacity: 0;left: 0%;}
  100% {opacity: 1;left: 0;}
}



#colorbox, #cboxOverlay {
	z-index:99999!important;
}

/*
 * Footer
 */
 
.webcredit {line-height:1.2;color: rgba(255,255,255,.35)!important;}
.webcredit a {color: rgba(255,255,255,.35)!important;}
.webcredit a:hover {color:#fff!important;}

@media only screen and (min-width: 992px) {
	.webcredit {line-height:1.5;}
}

#about-us {
	padding-top:140px;
}
.filler {
	padding-top:106px;
}

@media only screen and (min-width: 992px) {
	#about-us {
		padding-top:220px;
	}
	.filler {
		padding-top:157px;
	}
}


/* 
Custom accordion 
*/

.accordion-button:not(.collapsed) {
    color: #212529;
     background-color: #fff!important;
}
.accordion-button:focus {
    border-color: #212529;
	box-shadow: none!important;
}
.accordion-button:not(.collapsed)::after {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.accordion-header {
	margin-bottom:0!important;
}
.accordion-button {
	font-family: 'Outfit', sans-serif!important;
	font-weight: 400;
	font-size:1.15rem!important;
	padding:0.75rem 1.25rem;
}
.accordion-body {
	font-family: 'Outfit', sans-serif!important;
	font-weight: 300;
	font-size:1.1rem!important;
	text-align:left;
}
.accordion-body img {
	float:right;
	width:100px;
	height:auto;
	margin-left:1rem;
	margin-bottom:1rem;
}

.list-group-item {
	padding: 0.75rem 1.5rem!important;
}

.list-group-item::before {
	color:#aaa;
	content: "•  ";
}



/*
 * Insta Feed Tweaks
 */
.filter-items,
.origin-flag.sb-instagram {
	display:none!important;
}

.sb-container {
	border: 0!important;
    border-radius:0!important;
	-moz-border-radius:0!important;
    -webkit-border-radius:0!important;
}

.sboard .sb-item .sb-container.sb-noinner .sb-thumb a img {
    border-radius:0!important;
    -moz-border-radius:0!important;
    -webkit-border-radius:0!important;
}

.sb-loadmore {
    margin:0!important;
    background-color: rgba(0,0,0,.9)!important;
}

/*
 * Flickity Gallery
 */
.flickity-button {
    background: transparent!important;
    border: 3px solid #fff!important;
    color: #fff!important;
	background-color:rgba(0, 0, 0, 0.8)!important;
}

.flickity-fullscreen-button {
    right: 11px;
    top: 35px;
    width: 43px;
    height: 43px;
    border-radius: 5px;
	background-color:rgba(0, 0, 0, 0.8)!important;
}

.flickity-fullscreen-button:focus {
    outline:none !important;
	box-shadow: none;
}

.flickity-fullscreen-button .flickity-button-icon {
    width: 28px;
    height: 28px;
    left: 4px;
    top: 4px;
}

.main-carousel.is-fullscreen {
	z-index:99998!important;
}

.carousel-image {
  display: block;
  height: 400px;
  min-width: 150px;
  max-width: 100%;
  margin-right: 10px;
}

.main-carousel.is-fullscreen .carousel-image {
  height: auto;
  max-height: 100%;
}

.flickity-page-dots {
    bottom:-35px!important;
}

.flickity-page-dots .dot {
    background: #fff!important;
}



/*
 * Form
 */

.form-control {
	font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: 1.1em!important;
    outline:none!important;
	box-shadow: none;
	margin-bottom: 10px;
	border:1px solid #dddddd;
}
 
.form-control:focus {
    outline:none!important;
	box-shadow: none;
	border:1px solid #dddddd;
}

.btn-primary {
    color: #fff;
    background-color: #000;
    border-color: #000;
	border:2px solid #000!important;
}

.btn-primary:hover {
    color: #000!important;
    background-color: #fff!important;
    border-color: #0a58ca!important;
	border:2px solid #000!important;
}
