@font-face {
  font-family: PatuaOne;
  src: url(../fonts/PatuaOne-Regular.otf);
}

 /*-----------------------------------*\
  $BASE
\*-----------------------------------*/

.navbar-client{
	padding: 0;
	background-color: #fff;
	box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15),inset 0 -1px 0 rgba(0,0,0,0.15);}
	
.overlay-close, .overlay-open {
	background: #004F9F;
	overflow: hidden;
	border: none;
	color: #fff;
	font-size: 2.1rem;
	line-height: 30px;
	outline: none;
	z-index: 100;
	padding: 1.5rem 1.75rem;}

.overlay-open {
	color: #fff;}
.overlay-close{
	display: none;}

.overlay-open span{
	display: block;
	font-size: 0.65rem;
	line-height: 0.65rem;}

.back-to-top {
	background: none;
	margin: 0;
	position: fixed;
	bottom: 30px;
	right: 30px;
	width: 31px;
	height: 34px;
	z-index: 100;
	display: none;
	text-decoration: none;
	color: #ccc;}

.back-to-top i {
  font-size: 3.5rem;}
  
  .mt-8 {
  	margin-top: 8rem!important;}
  
/*-----------------------------------*\
	$COLOURS
  \*-----------------------------------*/
a, .btn-link{
  color: #004F9F;}
  
.text-primary{
	color: #004F9F;}
.text-secondary{}
.text-success{}
.text-danger{
	color: #4a2564;}
.text-warning{
	color: #efc508;}
.text-info{}
.text-success{}


.bg-primary{
	background-color: #004F9F !important;}
.bg-secondary{}
.bg-success{}
.bg-danger{
	background-color: #4a2564;}
.bg-warning{
	background-color: #efc508;}
.bg-info{}
.bg-success{}
.bg-grey{
	background-color: #b6b6b4;}

 
.btn-primary{
	background-color: #004F9F;
	border-color: #004F9F;}
	.btn-primary:hover{
	background-color: #0a62ba;
	border-color: #0a62b.btn .colla;}
	.btn-outline-primary{
		border-color: #004F9F;
		color: #004F9F;
		background: #fff;}
		.btn-outline-primary:hover{
			background-color: #0a62ba;
			border-color: #0a62ba;}
.btn-secondary{}
.btn-success{}
.btn-danger{}
	.btn-danger:hover{
		background-color: #653487;
		border-color: #653487;}
.btn-warning{
	background-color: #efc508;}
.btn-info{}
.btn-success{}
.text-primary{
	color: #004F9F !important;}
.border-primary{
	border-color: #004F9F !important;}

/*-----------------------------------*\
  $TYPOGRAPHY
\*-----------------------------------*/
	h1{font-family: PatuaOne, sans-serif;}
	h2, h3, h4, .h2, .h3, .h4{
		font-family: PatuaOne, sans-serif;
		font-weight: 400;}
	.display-1, .display-2, .display-4, .display-5{
	font-family: PatuaOne, sans-serif;
	font-weight: 400;}
/*-----------------------------------*\
  $LINKS and BUTTONS
\*-----------------------------------*/


/*-----------------------------------*\
  $FORMS
\*-----------------------------------*/
#searchclear{
	position: absolute;
	right: .75rem;
	top: 0;
	bottom: 0;
	height: 14px;
	margin: auto;
	font-size: 14px;
	cursor: pointer;
	color: #004f9e;
	z-index: 3;}

/*-----------------------------------*\
  MAIN MENU
\*-----------------------------------*/

.navbar-brand{
	width:200px;
	display: inline-block;
	margin-left: 1.75rem;}
	.ph-gerbera{
		background: url('/template/images/Client/Gerbera-yellow-half-trim-spacer.png') no-repeat 12rem top;
		background-size: contain;
	}
	a.logo svg{
		-webkit-transition: all 0.35s cubic-bezier(0.230, 1.000, 0.320, 1.000);
		-moz-transition: all 0.35s cubic-bezier(0.230, 1.000, 0.320, 1.000);
		-o-transition: all 0.35s cubic-bezier(0.230, 1.000, 0.320, 1.000);
		transition: all 0.35s cubic-bezier(0.230, 1.000, 0.320, 1.000);
		fill: #fff;}
	a.logo svg:hover{
		fill: #ccc;}
	.logo-menu{
		text-transform: uppercase;
		text-align: right;
		z-index: 98;
		position: absolute;
		top:none;
		bottom: 20px;
		right: 20px;
		padding-left: 20px;}
	.logo-menu svg{
		fill: #ccc;
		width: 50px;}
	.logo-menu small{
		font-size: 0.6rem;
		margin-bottom: 5px;
		line-height: 0.6rem;}
	.logo-menu .phonenumber a{
		font-size: 0.9rem;}
	.logo-menu p{
		margin-bottom: 5px;}
	.offcanvas{}
		.offcanvas a{
			text-decoration: none;}
		.ul-reset{
			font-family: PatuaOne, sans-serif;
			list-style: none;
			padding-left: 0;}
		.offcanvas-body{
			padding: 0 30px 30px 30px;
		}
	.bg-primary .btn-link{
		color: #edecec;}
		.bg-primary .btn-link:hover{
		color: #fff;}
	.offcanvas.offcanvas-end{
		border-width: 0;
		outline-color: transparent;}

	.toplevel > .btn[aria-expanded="true"]{
		display: none;}
	.text-bg-primary{
		color: #fff;
		background-color: #004F9F !important;}
			
/*-----------------------------------*\
  $SVG
\*-----------------------------------*/


/*-----------------------------------*\
  $MODULES
\*-----------------------------------*/

.jumbotron-lettings{
	background:#fff;
color: #004F9F;}
	
/* Carosel Background image */
	
	.carousel-item{
		background-repeat:no-repeat;
		background-size:cover;
		background-position:center center;
		width:100%;
		height:100%;}
	
/* Yes/No Switch		 */
	.yesnoswitch {
	    position: relative; width: 90px;
	    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;}
	.yesnoswitch-checkbox {
	    display: none;}
	.yesnoswitch-label {
	    display: block; overflow: hidden; cursor: pointer;
	    border: 1px solid #ced4da; border-radius: .375rem;}
	.yesnoswitch-inner {
	    width: 200%; margin-left: -100%;
	    -moz-transition: margin 0.15s ease-in 0s; -webkit-transition: margin 0.15s ease-in 0s;
	    -o-transition: margin 0.15s ease-in 0s; transition: margin 0.15s ease-in 0s;}
	.yesnoswitch-inner:before, .yesnoswitch-inner:after {
	    float: left; width: 50%; height: 38px; padding: 0; line-height: 38px;
	    font-size: 16px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
	    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
	.yesnoswitch-inner:before {
	    content: "YES";
	    padding-left: 10px;
	    padding-top: 1px;
	    background-color: #5CB85C; color: #FFFFFF;}
	.yesnoswitch-inner:after {
	    content: "NO";
	    padding-right: 15px;
	    padding-top: 1px;
	    background-color: #F8F8F8; color: #666666;
	    text-align: right;}
	.yesnoswitch-switch {
	    width: 38px; margin: 0px;
	    background: #FFFFFF;
	    border: 1px solid #ced4da; border-radius: .375rem;
	    position: absolute; top: 0; bottom: 0; right: 55px;
	    -moz-transition: all 0.15s ease-in 0s; -webkit-transition: all 0.15s ease-in 0s;
	    -o-transition: all 0.15s ease-in 0s; transition: all 0.15s ease-in 0s; 
	    background-image: -moz-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
	    background-image: -webkit-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
	    background-image: -o-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
	    background-image: linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);}
	.yesnoswitch-checkbox:checked + .yesnoswitch-label .yesnoswitch-inner {
	    margin-left: 0;}
	.yesnoswitch-checkbox:checked + .yesnoswitch-label .yesnoswitch-switch {
	    right: 0px;}
		
	.display-background{
		top:0;
		left: 0;
		height: 100%;
		width: 100%;
		z-index: -1;
	}
	.main-menu-spacer{
		top: 92px;
		z-index: 100;}
		
	#check-button {
		overflow:auto;
		float:left;
		width: 100%;}
	
	#check-button label {
		float:left;
		width: 100%;}
	
	#check-button label div {
		background: transparent;
		border: 1px solid #004F9F;
		color: #004F9F;
		border-radius: 6px;
		text-align:center;
		padding: 0.4rem 0.5rem 0.4rem 0.5rem;
		display:block;
		cursor: pointer;}
	
	#calc #check-button label div {
		background: rgba(0, 0, 0, 0.01);
		border: 1px solid #004F9F;
		padding: 0.67rem 0.5rem 0.67rem 0.5rem;
	}
	
	#check-button label input {
		position:absolute;
		left:-2000px;}
	
	#check-button input:checked + div, #calc #check-button input:checked + div {
		background-color:#004F9F;
		color: #fff;}
	
	#check-button input + div:after {
		font-family: FontAwesome;
		content: " \f00d";
		font-size: 90%;
		padding-left: 5px;}
	#check-button input:checked + div:after {
		font-family: FontAwesome;
		content: " \f00c";
		font-size: 90%;
		padding-left: 5px;}

/*-----------------------------------*\
  $ANIMATIONS
\*-----------------------------------*/

.revealOnScroll { opacity: 0; }
.animated{ opacity: 1; }

.fadein {
    animation: fadein 2s;
    -moz-animation: fadein 2s;
    -webkit-animation: fadein 2s;
    -o-animation: fadein 2s;}

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }

    to {
        opacity:1;
    }
}

@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}


video#bgvid { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
	background: url('/template/images/Client/PlymouthHoeAerial-B+W-Poster.jpg') no-repeat;
	background-size: cover;
	transition: 1s opacity;}

.meet-the-team .card{
	width: 100%;}
	
/*-----------------------------------*\
  $RESPONSIVE STYLES
\*-----------------------------------*/


@media (max-width: 320px){
}

@media (max-width: 460px){
}

@media (min-width: 388px) {
}

@media (min-width: 544px) {
}

@media (max-width: 767px){
}

@media (min-width: 768px){
}

@media (min-width: 992px){
}

@media (min-width: 1200px) {
}
@media (min-height:800px){
}
@media (max-height:800px){
}