body
{
	font-size: 1.15rem;
}

.container-fluid
{
	padding: 0;
}

h1, h2, h3, h4, h5, h6
{
	font-family: 'Quicksand', sans-serif;
	font-weight: 600;
}

h1
{
	font-size: 2rem;
}


.form-control
{
	border-radius: 3px;
}






.swal-text
{
	text-align: center;
}






/*==========================================================================
   Primary Header
==========================================================================*/
#primary-header
{
	padding: 25px 0px;
	background-color: #fff;
	text-align: center;
}

#primary-header .header-logo
{
	display: inline-block;
}

#primary-header .header-logo img
{
	max-height: 90px;
	margin: 0 auto;
}

#primary-header .comms
{
	background-color: #DDD;
	margin: 0px 10px;
	padding: 15px;
	font-size: 1rem;
	margin-top: 25px;
	color: #777;
	font-family: 'Quicksand', sans-serif;
	border-radius: 3px;
}

#primary-header .comms .phone
{
	font-weight: 600;
	font-size: 1.8rem;
	color: #111;
}









/*==========================================================================
   Primary Navigation
==========================================================================*/
#primary-nav
{
	margin-top: 25px;
}

#primary-nav button.navbar-toggler
{
	width: 100%;
	border: 1px solid #222;
	background-color: #222;
	color: #FFF;
	text-transform: uppercase;
	font-size: 1.5rem;
	padding: 15px;
	border-radius: 3px;
}


#primary-nav
{
	padding: 0px 10px;
}

#primary-nav .navbar-collapse
{
	width: 100%;
	margin: 0;
	margin-top: 5px;
	padding: 0;
	z-index: 100;
	background-color: #54777B;
	text-align: left;
	border-radius: 3px;
}

#primary-nav .navbar-collapse ul.navbar-nav
{
	padding: 0;
	margin: 0;
}

#primary-nav .navbar-collapse ul.navbar-nav li
{
	padding: 0;
	margin: 0;
	border-bottom: 1px solid #587d81;
}

#primary-nav .navbar-collapse ul.navbar-nav li:last-of-type
{
	border: 0;
}

#primary-nav .navbar-collapse ul.navbar-nav li a
{
	padding: 10px 15px;
	margin: 0;
	font-weight: 600;
	color: #fff;
	font-size: 1.2rem;
}









/*==========================================================================
   Primary Hero
==========================================================================*/
#primary-hero
{
	background-color: #54777B;
}

#primary-hero .container
{
	padding-top: 30px;
	padding-bottom: 30px;
}

#primary-hero form
{
	padding: 30px;
	border-radius: 5px;
	background-color: rgba(255, 255, 255, .1);
}

#primary-hero form .btn-primary
{
	background-color: #54777B;
	border: 0px solid #333;
}

#primary-hero form p
{
	font-size: 1.2rem;
	color: #FFF;
	font-family: 'Quicksand', sans-serif;
}

#primary-hero form .form-control
{
	border: none;
}

#primary-hero .request-callback-success
{
	padding: 30px;
	border-radius: 5px;
	background-color: rgba(255, 255, 255, .1);
	display: none;
}

#primary-hero .request-callback-success p
{
	font-size: 1.2rem;
	color: #FFF;
	font-family: 'Quicksand', sans-serif;
}

#primary-hero .request-callback-success .icon
{
	text-align: center;
	color: #FFF;
	font-size: 4rem;
}







/*==========================================================================
   Primary Heading
==========================================================================*/
#primary-heading
{
	background-color: #54777B;
	padding-top: 30px;
	padding-bottom: 30px;
}

#primary-heading .container
{

}

#primary-heading h1
{
	color: #FFF;
}

#primary-heading .image
{
	display: none;
}









/*==========================================================================
   Content Wrapper
==========================================================================*/
#content-wrapper
{
	padding-top: 30px;
}

#content-wrapper h1
{
	padding: 0;
	font-weight: 600;
	margin-bottom: 30px;
}

#content-wrapper h2
{
	margin-bottom: 15px;
}

section.block
{
	margin-bottom: 30px;
	overflow: hidden;
}

section.block.pad-it
{
	padding: 30px 0px;
}

section.block.bg-dark.text-white a
{
	color: #a2cfff;
}














/*==========================================================================
   Horizontal CTA
==========================================================================*/
.hori-cta
{
	background-color: #111;
	padding: 25px 0px;
	font-family: 'Quicksand', sans-serif;
	font-size: 1.25rem;
	color: #FFF;
	text-align: center;
}

.hori-cta a
{
	color: #FFF;
	font-weight: 600;
	padding: 5px;
	background-color: rgba(255, 255, 255, .05);
	border-radius: 4px;
}
















/*==========================================================================
   Section: Service Icons
==========================================================================*/
section.block-services
{
	background-color: #54777B;
	padding: 50px 0px;
}

section.block-services .service
{
	padding: 20px;
	background-color: #EEE;
	border-radius: 3px;
	text-align: center;
	margin-bottom: 30px;
}

section.block-services .row > div:last-of-type .service
{
	margin-bottom: 0;
}


section.block-services .service > i
{
	font-size: 60px;
	text-align: center;
	border-radius: 8px;
	padding: 28px 10px;
	display: block;
	color: #D95B44;
	margin-bottom: 15px;
}

section.block-services .service .btn-more
{
	background-color: #FFF;
	padding: 10px 30px;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 20px;
	letter-spacing: 1px;
	color: #000;
}









/*==========================================================================
   Section: Grey
==========================================================================*/
section.block-grey
{
	background-color: #DEDEDE;
	padding: 50px 0px;
}












/*==========================================================================
   Section: Service Icons
==========================================================================*/
section.block-coreservices
{
	background-color: #DEDEDE;
	padding: 50px 0px;
}

section.block-coreservices .service
{
	padding: 20px;
	background-color: #EEE;
	border-radius: 3px;
	margin-bottom: 30px;
}

section.block-coreservices .service h3 a
{
	color: #333;
}

section.block-coreservices .service .icon
{
	text-align: center;
	margin: 15px 0px;
}

section.block-coreservices .service .icon img
{
	max-width: 40%;
}











.loffsetimg::before
{
	content: ' ';
	background-image: url('/assets/frontend/img/cardiff-bay-web-design.jpg');
	background-size: cover;
	width: 940px;
	height: 100%;
	position: absolute;
	margin-left: -600px;
}












/*==========================================================================
   Section: Work
==========================================================================*/
section.block-work
{
	margin-left: 15px;
	margin-right: 15px;
}

section.block-work .card
{
	border-radius: 0;
	border: 0;
}

.card .card-img
{
	border-radius: 0;
}

section.block-work .card .overlay
{
	background-color: rgba(0, 0, 0, .7);
	padding: 25px;
	color: #FFF;
	height: 100px;
	margin-top: -100px;
	z-index: 200;
	position: absolute;
	width: 100%;
}





/*==========================================================================
   Section: Intro text
==========================================================================*/
section.block-introtext
{
	background-color: #DEDEDE;
	padding: 30px 0px;
	margin-top: -30px;
}

section.block-introtext p
{
	font-weight: 600;
	font-size: 1.4rem;
	color: #333;
	margin: 0;
}












section.block-latestblog
{
	background-color: #EEE;
}

section.block-latestblog .post
{
	margin-bottom: 30px;
}

section.block-latestblog .post .meta
{
	color: #666;
}






/*==========================================================================
   Stripe Checkout
==========================================================================*/
 .StripeElement {
	background-color: white;
	height: 50px;
	padding: 10px 12px;
	border-radius: 4px;
	border: 1px solid transparent;
	box-shadow: 0 1px 3px 0 #e6ebf1;
	-webkit-transition: box-shadow 150ms ease;
	transition: box-shadow 150ms ease;
  }

  .StripeElement--focus {
	box-shadow: 0 1px 3px 0 #cfd7df;
  }

  .StripeElement--invalid {
	border-color: #fa755a;
  }

  .StripeElement--webkit-autofill {
	background-color: #fefde5 !important;
  }
  #card-element
  {
	width: 100%;
    padding: 10px;
    height: 50px;
    height: calc(2.875rem + 2px);
    padding: .5rem 1rem;
    font-size: 1.25rem;
    line-height: 1.5;
    border: 1px solid #ced4da;
		height: 50px;
	}
	#card-errors
	{
		margin-bottom:15px;
		color:#e61515;
		min-height:1px;
		display:block;
		width: 100%;
	}
	label.required:after
	{
		content:" *";
		color:#e61515;
	}






/*==========================================================================
   Footer
==========================================================================*/
#primary-footer
{
	background-color: #54777B;
	padding-top: 30px;
}

#primary-footer ul.quicklinks
{
	margin: 0;
	padding: 0;
	list-style: none;
}

#primary-footer ul.quicklinks li
{
	color: #999;
}

#primary-footer ul.quicklinks li a
{
	color: #FFF;
	font-family: 'Quicksand', sans-serif;
	font-weight: 600;
}

#primary-footer .social-icons
{
	background-color: #111;
	padding: 20px;
	border-radius: 3px;
	margin-top: 30px;
}

#primary-footer .social-icons a
{
	display: block;
}

#primary-footer .social-icons img
{
	padding: 0;
	margin: 0;
	display: inline-block;
	max-width: 100%;
	height: auto;
}

#primary-footer .bottombar
{
	background-color: rgba(0, 0, 0, .2);
	padding: 25px 0px;
	margin-top: 30px;
	color: #CCC;
}

#primary-footer .col-left
{
	text-align: center;
}

#primary-footer .col-right
{
	text-align: center;
}

#primary-footer .quicklinks li i
{
	color: #6d9ca0;
}











.sidebar .sidebar-nav
{
	margin-bottom: 15px;
}

.sidebar .sidebar-nav .nav-link
{
	background-color: #444;
	color: #FFF;
	font-family: 'Quicksand', sans-serif;
	font-weight: 600;
}

.sidebar .sidebar-nav .nav-link.active
{
	background-color: #54777B;
}

.sidebar .box
{
	background-color: #DEDEDE;
	padding: 20px;
	margin-bottom: 15px;
}

.sidebar .box .text
{
	display: block;
}

.sidebar .box .big-text
{
	display: block;
	font-size: 1.8rem;
	font-weight: bold;
}















.spacer
{
	height: 50px;
}











.empty-message
{
	padding: 15px;
	border: 1px dashed #CCC;
	border-radius: 5px;
	background-color: #DEDEDE;
}

.empty-message p
{
	margin: 0;
}










.dropzone
{
	min-height: 150px;
	border: 2px dashed #CCC;
	background: white;
	padding: 20px 20px;
}








.gmap-contact
{
	height: 400px;
	border-top: 1px solid #CCC;
}








.flash-messages
{
	border-bottom: 1px solid #CCC;
	padding-top: 15px;
}










.team-person
{
	padding: 15px;
	background-color: #231f20;
	color: #FFF;
}

.team-person a
{
	color: #e58e25;
}