@CHARSET "UTF-8";







/*********************** START css reset to reduce browser inconsistencies *****************************/
/* https://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	    line-height: 0em; /* Additional */
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/*********************** END css reset to reduce browser inconsistencies *****************************/











.nav {
    display: block; /* Set the default display to block */
}







/* Hides image etc between scrollme code, so it doesn't show on mobile before the code is executed */
.animateme {
opacity: 0;
}








/*********************** START Sitewide Structure Setup ***********************/

body {
	width: 100%;
	font-size: 1em;
	box-sizing:border-box;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	font-smoothing: antialiased;
    -webkit-text-size-adjust: none;
	text-size-adjust: none;
}

/*
#logo {
	float: left; 
	max-width: 150px; 
	height: auto;
}

#logo-adjustment {
	width: 100%; 
	height: auto;
}
*/
#logo {
	float: left;
    max-width: 9.375em;
    height: 2.125em;
    background-image: url(https://www.custeldesign.co.uk/themes/custeldesign/images/custel-design-logo.svg);
    width: 9.375em;
    background-repeat: no-repeat;
    display: block;
    background-size: contain;
}



main {
	clear: both;
	
}

.section-container-1 {
	background-color:#ffffff; 
	clear:both;
	display: block;
}

.section-container-2 {
	background-color:#2f7de1; 
	clear:both;
	display: block;
}

.section-container-3 {
	background-color:#f6f2f7;
	clear: both;
	display: block;
}

.section-container-4 {
	background-color:#ffffff; 
	clear:both;
	display: block;
}

.content-centering-wrapper {
/*	max-width: 950px; 
	margin: auto; 
	padding-left: 25px; 
	padding-right: 25px;
	display: block;
	overflow:hidden;*/
	
	width: 100%;
    margin: auto auto;
    display: inline-block;
    overflow: visible;
}

.padded-spacing-1 {
	/*padding: 1em;*/
}

*:focus {
    outline: none;
}


input {
    webkit-appearance: none;
	-webkit-appearance: none;
	border-radius: 0;
}

/*********************** END Sitewide Structure Setup ***********************/
























/*********************** START general setup of sitewide styles *****************************/

/***** START Typeface and Font settings *****/
@font-face {
    font-family: Cutting Edge;
    src: url(https://www.custeldesign.co.uk/themes/custeldesign/fonts/webfontkit-20151216-135746/cuttingedge-regular-webfont.woff); 
}

html, body, a { 
   font-family: Cutting Edge, sans-serif;
   text-decoration:none;
   
}

h1 {
	color: #2f7de1;
	font-size:3.5em; 
	line-height: 1.2em; 
	/*margin-bottom: 0.75em;*/
	/*margin-top: 1.4em;*/
	/*margin-top: 1em;*/
}

h2 {
	color: #2f7de1; 
	font-size: 2.5em;
	line-height: 1.5em; 
	margin-bottom: 0.75em;
	margin-top: 1.4em;
}

#main-image h2, #main-image-second h2, #main-image-service-page h2, #main-image-service-online-design-page h2, #main-image-service-graphic-design-page h2, #main-image-service-brand-identity-design-page h2, #main-image-portfolio-page h2, #main-image-about-page h2, #main-image-requirements-page h2, #main-image-communicate-page h2, #main-image-faqs-page h2, #main-image-blog-page h2, #main-image-terms-page h2 {
	font-size: 1.563em; 
	margin-top: 1.4em; 
}

h3{
	color: #2f7de1; 
	font-size: 1.6em;
	    margin-bottom: 0.75em;
	margin-top: 1.4em;
		line-height: 1.5em;
}

p {
	
	color: #4b4f54; 
	font-size: 0.975em;
	line-height: 1.5em; 
	margin-bottom: 0.75em;
	margin-top: 1.4em;
}

main ul {
	color: #4b4f54; 
	font-size: 0.975em;
	line-height: 1.5em; 
	margin-bottom: 0.75em;
	margin-top: 1.4em;
	list-style-type: disc;
	margin-left: 1em;
}

a:link { color: #2f7de1; }
a:visited { color: #2f7de1; }
a:hover { color: #ff7f3f; }
a:focus { color: #ff7f3f; }
a:active { color: #ff7f3f; }

a:link .alt-link-1 { color: #adc9e8; }
a:visited .alt-link-1 { color: #adc9e8; }
a:hover .alt-link-1 { color: #ff7f3f; }
a:focus .alt-link-1 { color: #ff7f3f; }
a:active .alt-link-1 { color: #ff7f3f; }

footer ul {
	margin-top: 1.4em;
}

ul li {
	line-height: 1.5em;
}

main ul li, main ol li  {
	margin-bottom: 0.25em;
}

.alt-colour-text-1, .alt-colour-text-1 p {
	color: white;
}


/***** END Typeface and Font settings *****/



/***** START Formatting options *****/
.threequatersizeimage {
	width: 75%;
	height: 75%;
}

.text-align-position-1 {
	text-align: left;
}

.text-align-position-2 {
	text-align: center;
}

.text-align-position-3 {
	text-align: right;
}

.top-spacing-1 {
	margin-top: 1em;
}

.top-spacing-2 {
	margin-top: 2em;
}

.top-spacing-3 {
	margin-top: 3em;
}

.top-spacing-4 {
	margin-top: 4em;
}

.top-spacing-5 {
	margin-top: 5em;
}

.top-spacing-6 {
	margin-top: 6em;
}

.bottom-spacing-1 {
	margin-bottom: 1em;
}

.bottom-spacing-2 {
	margin-bottom: 2em;
}

.bottom-spacing-3 {
	margin-bottom: 3em;
}

.bottom-spacing-4 {
	margin-bottom: 4em;
}

.bottom-spacing-5 {
	margin-bottom: 5em;
}

.bottom-spacing-6 {
	margin-bottom: 6em;
}

.subheader {
	font-size: 1.563em;
}

.no-bottom-padding {
	padding-bottom: 0em!important;
}

.no-top-padding {
	padding-top: 0em!important;
}

.no-left-padding {
	padding-left: 0em!important;
}

.no-right-padding {
	padding-right: 0em!important;
}
/***** END Formatting options *****/



/***** START top navigation ******/

nav {
	margin-top: 0.5em;
}

nav > ul {
	float: right;
}

nav > ul > li {
	float: left;
	margin-left: 0em;
	margin-left: 1.4em;
}

/***** END top navigation ******/




/***** START buttons ******/
.button-1 {
	background-color:#2f7de1;
	-moz-border-radius:0.188em;
	-webkit-border-radius:0.188em;
	border-radius:0.188em;
	display:inline-block;
	color:#ffffff !important;
	font-family: Cutting Edge;
	font-size: 1.250em;
	padding: 0.5em 1em;
	text-decoration:none;
	border:none;
	margin-bottom: 0.25em;
	line-height: 1.4em
}
.button-1:hover {
	background-color:#ff8041;
}
.button-1:active {
	position:relative;
	top: 0.063em;
}

.button-2 {
	background-color:#ffffff;
	-moz-border-radius:0.188em;
	-webkit-border-radius:0.188em;
	border-radius:0.188em;
	display:inline-block;
	color:#2f7de1 !important;
	font-family: Cutting Edge;
	font-size: 1.250em;
	padding: 0.5em 1em;
	text-decoration:none;
	border:none;
	margin-bottom: 0.25em;
	line-height: 1.4em
}
.button-2:hover {
	background-color:#ff8041;
	color: #ffffff !important;
}
.button-2:active {
	position:relative;
	top: 1px;
}
/***** END buttons ******/

/*********************** END general setup of sitewide styles *****************************/



























/*********************** START Homepage specific styles *****************************/

#main-image {	
	 background: url(https://www.custeldesign.co.uk/images/uploads/general-images/homepage-designer-desk-dark.png) no-repeat center; 
	/* background: url(https://www.custeldesign.co.uk/images/uploads/general-images/main-image-home-satisfied.jpg) no-repeat center; */
    /* width: 100%; */
    height: 100%;
    min-width: 100%;
    min-height: 34.750em;
    background-size: cover;
	padding-bottom: 3em;
}


.homepage-services-wrapper {
	display:inline-block;
}

.homepage-services-wrapper li {
	display: inline-block;
	width: 24%; 
	float:left; 
	text-align:center;
}

.homepage-services-wrapper li:nth-child(2) {
	display: inline-block;
	width: 24%; 
	float:left; 
	text-align:center;
	margin-left: 14%;
}

.homepage-services-wrapper li:nth-child(3) {
	display: inline-block;
	width: 24%; 
	float:left; 
	text-align:center;
	margin-left: 14%;
}

.homepage-services-wrapper img {
	margin: auto auto;
}

#see-portfolio-button {
	margin-top: 9em;
}


.homepage-testimonial-wrapper {
	background-color: #2f7de1;
/*	float:left;
	width: 100%;
	display: inline-block; */
	border-radius: 0.3em;
	padding: 1.563em;
	padding-top: 0.563em;
}

.homepage-testimonial-wrapper p {
	font-size: 1.125em;
}

.homepage-testimonial-wrapper {
    position: relative;
}
.homepage-testimonial-wrapper:after {
    content: "";
    width: 0em;
    height: 0em;
    border-top: 3.438em solid #2f7de1;
    border-bottom: 1.875em solid transparent;
    border-left: 3.438em solid transparent;
    border-right: 3.438em solid transparent;
    right: 25%;
    position: absolute;
}

.homepage-quote-wrapper {
	display: inline-block;
}

/*********************** END Homepage specific styles *****************************/






















#main-image-services {	
	background: url(https://www.custeldesign.co.uk/images/uploads/general-images/services-header-image.png) no-repeat center bottom;
    /* width: 100%; */
    height: 100%;
    min-width: 100%;
    min-height: 34.750em;
    background-size: contain;
}



#main-image-service-page {	
    background: url(https://www.custeldesign.co.uk/images/uploads/general-images/main-image-service-designer-ipad.png) no-repeat center;
	
	height: 100%;
    min-width: 100%;
    min-height: 24.750em;
    background-size: cover;
}

#main-image-service-online-design-page {	
    background: url(https://www.custeldesign.co.uk/images/uploads/general-images/main-images-online-design-keyboard.png) no-repeat center;
	
	height: 100%;
    min-width: 100%;
    min-height: 24.750em;
    background-size: cover;
}

#main-image-service-graphic-design-page {	
    background: url(https://www.custeldesign.co.uk/images/uploads/general-images/service-graphic-design-pencils.png) no-repeat center;
	
	height: 100%;
    min-width: 100%;
    min-height: 24.750em;
    background-size: cover;
}

#main-image-service-brand-identity-design-page {	
    background: url(https://www.custeldesign.co.uk/images/uploads/general-images/service-brand-identity-design-smiley-face.png) no-repeat center;
	
	height: 100%;
    min-width: 100%;
    min-height: 24.750em;
    background-size: cover;
}

#main-image-portfolio-page {	
    background: url(https://www.custeldesign.co.uk/images/uploads/general-images/portfolio-work-page.png) no-repeat center;
	
	height: 100%;
    min-width: 100%;
    min-height: 24.750em;
    background-size: cover;
}

#main-image-about-page {	
    background: url(https://www.custeldesign.co.uk/images/uploads/general-images/about-welcome-handshake.png) no-repeat center;
	
	height: 100%;
    min-width: 100%;
    min-height: 24.750em;
    background-size: cover;
}

#main-image-communicate-page {	
    background: url(https://www.custeldesign.co.uk/images/uploads/general-images/communicate-chat.png) no-repeat center;
	
	height: 100%;
    min-width: 100%;
    min-height: 24.750em;
    background-size: cover;
}

#main-image-requirements-page {	
    background: url(https://www.custeldesign.co.uk/images/uploads/general-images/communicate-logging-requirements.png) no-repeat center;
	
	height: 100%;
    min-width: 100%;
    min-height: 24.750em;
    background-size: cover;
}

#main-image-faqs-page {	
    background: url(https://www.custeldesign.co.uk/images/uploads/general-images/faqs-hands-up.png) no-repeat center;
	
	height: 100%;
    min-width: 100%;
    min-height: 24.750em;
    background-size: cover;
}

#main-image-blog-page {	
    background: url(https://www.custeldesign.co.uk/images/uploads/general-images/blog-blogger-blogging.png) no-repeat center;
	
	height: 100%;
    min-width: 100%;
    min-height: 24.750em;
    background-size: cover;
}

#main-image-terms-page {	
    background: url(https://www.custeldesign.co.uk/images/uploads/general-images/terms.png) no-repeat center;
	
	height: 100%;
    min-width: 100%;
    min-height: 24.750em;
    background-size: cover;
}



/*********************** START Communicate page specific styles *****************************/

#main-image-second {	
	
	height: 100%;
    min-width: 100%;
  
}

/*
.flourish-image-1 {	
	background: url(https://www.custeldesign.co.uk/images/uploads/themes/cogs-flourish.png) no-repeat center bottom;
    /* width: 100%; */
    height: 100%;
    min-width: 100%;
    min-height: 8.188em;
    background-size: contain;
}*/

#map {
    width: 100%;
	height: 33.125em;
}

/*********************** END Communicate page specific styles *****************************/












/*********************** START form styles *****************************/

#name, #from, #subject, #message {
    background-color: #f6f2f7;
    border: none;
    padding: 10px;
	-moz-border-radius:0.188em;
	-webkit-border-radius:0.188em;
	border-radius:0.188em;
	width: 100%;
}

/*********************** END form styles *****************************/













/*********************** START project-details-page page specific styles *****************************/

#portfolio-details-page h2 {
	margin-top: 0em;
}

/*********************** END project-details-page page specific styles *****************************/




























/*********************** START footer specific styles *****************************/
footer a:link, footer a:visited {
	color: #adc9e8;
}
footer a:hover, footer a:focus, footer a:active { 
	color: #ff7f3f;
}

footer h1, footer h2, footer h3, footer h4, footer h5, footer h6, footer p, footer li {
	color: white;
	text-align:center;
}

footer .social-media-icons {
	border-top: 0.063em solid white;
	border-bottom: 0.063em solid white;
	padding-top: 1.4em;
	padding-bottom: 1.4em;
}

footer .social-media-icons img {
	padding: 0.625em;
}

footer .copyright-text {
	font-size: 0.7em;
}


footer #link-blocks h2 {
	font-size: 1.6em;
}

footer #link-blocks p, footer #link-blocks li {
	font-size: 0.975em;
}

/*********************** END footer specific styles *****************************/


































/************** START grid layouts **************/

.grid-container {
	/*display: inline-block;*/ 
	clear:both;

    margin: auto auto;
    max-width: 65.000em;
	
}

div.fullwidth {
    box-sizing: border-box;
    width: 100%;
    /*    border: 25px solid red;*/
    float: left;
    padding: 2.813em;
	overflow: hidden;
}


div.twothirdwidth {
    box-sizing: border-box;
    width: 66.66%;
/*  border: 25px solid red;*/
    float: left;
	padding: 2.813em;
	overflow: hidden;
}

div.halfwidth {
    box-sizing: border-box;
    width: 50%;
/*    border: 25px solid red;*/
    float: left;
	padding: 2.813em;
	overflow: hidden;
}

div.thirdwidth {
    box-sizing: border-box;
    width: 33.33%;
/*  border: 25px solid red;*/
    float: left;
	padding: 2.813em;
	overflow: hidden;
}

div.quarterwidth {
    box-sizing: border-box;
    width: 25%;
/*  border: 25px solid red;*/
    float: left;
	padding: 2.813em;
	overflow: hidden;
}

/************** END grid layouts **************/









img {
	max-width: 100%;
	height:auto;
	

}

.thumb img {

	width: 100%;
	height:auto;
	
	object-fit: cover;
}

#mobile-nav-button {
		display: none;
		float:right;
	}
	
	
	





























































	
	
	/* 
	body, nav, ul, li, a {
		margin: 0; padding: 0;
	}
	*/
	
	#nav {
		/* width: 60em; *//* 1000 */
		/* font-family: 'Open Sans', sans-serif; */
		/* font-weight: 400; */
		/* position: absolute; */
		/* top: 25%; */
		/* left: 50%; */
		/* margin-left: -30em; *//* 30 480 */
	}
	
	#nav > a {
		display: none;
	}
	
	#nav li {
		position: relative;
	}
	
	#nav li a {
		display: inline-block;
		font-size: 1.250em;
		line-height: 1em;
	}
	
	/*
	#nav li a:active {
		background-color: #c00 !important;
	}
	*/
	
	
	
	/* first level */
	
	#nav > ul {
		/* height: 3.75em; *//* 60 */
		/* background-color: #e15a1f; */
	}
	
	#nav > ul > li {
		/* width: 25%; */
		height: 100%;
		float: left;
	}
	
	#nav > ul > li > a {
		height: 100%;
		/* font-size: 1.5em; *//* 24 */
		/* line-height: 2.5em; *//* 60 (24) */
		text-align: center;
	}
	
	#nav > ul > li:not( :last-child ) > a {
		/* border-right: 1px solid #cc470d; */
	}
	
	
	
	/* second level */
	
	#nav li ul {
		/*background-color: pink;*/ 
		display: none;
		position: absolute;
		/* top: 100%; */
	}
	
	#nav li:hover ul {
		display: block;
		background-color: #f6f2f7;
		width: 9em;
	}
	
	#nav li:not( :first-child ):hover ul {
		left: 0px;
	}
	
	#nav li ul a {
		font-size: 1em;
		/* border-top: 1px solid #e15a1f; */
		padding: 1em;/* 15 (20) */
		line-height: 1.5em;
		/* width: 100%; */
		/* background-color: orange; */
	}
	
	#nav li ul li {
		border-top: 1px solid #fff;
		/* width:  100%; */
		/* width: 100%; */
	}				

	
	



























/******************************* START media queries ************************************/

@media handheld, only screen and (max-width: 790px) {
	
	div.fullwidth, div.twothirdwidth, div.halfwidth, div.thirdwidth, div.quarterwidth {
		width: 100%;
		overflow: hidden;
	}
	
	#see-portfolio-button {
		margin-top: 4em;
	}
	
	#mobile-nav-button {
		display: block;
	}
	
	nav ul {
		display: none;
	}

	












.container {
  display: inline-block;  
  /*cursor: pointer;*/
   margin-top: -0.6em;
   float: right;
}

.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #2f7de1;
  margin: 6px 0;
  transition: 0.4s;
  border-radius: 1em;
}

.change .bar1 {
  transform: translate(0, 11px) rotate(-45deg);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
  transform: translate(0, -11px) rotate(45deg);
}



	#nav {
		/* position: relative; */
		/* top: auto; */
		/* left: auto; */
		/* display: block; */
		/* clear:both; */
	}
	
	#nav > a {
		width: 2.125em;/* 50 */
		height: 2.125em;/* 50 */
		/* text-align: center; */
		text-indent: -9999px;
		/* background-color: #e15a1f; */
		position: relative;
		float: right;
		/*background-image: url('https://www.custeldesign.co.uk/themes/custeldesign/images/menu-button.png');*/
		background-repeat:no-repeat;
	}
	
	#nav > a:before, #nav > a:after {
		position: absolute;
		/* border: 2px solid #fff; */
		/* top: 35%;
		left: 25%;
		right: 25%;
		content: ''; */
	}
	
	#nav > a:after {
		/* top: 60%; */
	}

	#nav:not( :target ) > a:first-of-type, #nav:target > a:last-of-type {
		display: block;
	}



/* first level */

	#nav > ul {
		/* height: auto; */
		display: none;
		/* position: absolute; */
		/* left: 0;
		right: 0; */
		clear: both;
		margin-top: 1.4em;
		/* padding: 1.4em; */
		width: 100%;
		background-color: #f6f2f7;
		/* display: inline-block!important; */
		overflow: hidden;
	}
	
	#nav:target > ul {
		display: block;
		clear: both;
	}
	
	#nav > ul > li {
		/* width: 100%; */
		float: none;
		/* margin-left: 0em; */
		padding: 1em;
		display: block;
		/* overflow: hidden; */
		margin-left: 0em;
		border-top: 1px solid #fff;
	}
	
	
	
	#nav > ul > li > a {
		height: auto;
		width: 100%;
		/* padding: 0 0.833em; *//* 20 (24) */
		
	}
	
	#nav > ul > li:not( :last-child ) > a {
		/* border-right: none; */
		/* border-bottom: 1px solid #cc470d; */
	}


	/* second level */

	#nav li ul {
		position: static; 
		/* padding: 1.25em; *//* 20 */
		padding-top: 1em;
		width: 100%;
    	text-align: center;
	}

	#nav li:hover ul {
		background-color: none;
		width: 100%;
	}
	
	#nav li ul li {
    	border-top: 0px solid #fff;
 	}
	
	#nav li ul a {
		padding: 0em;/* 15 (20) */
		width: 100%;
		/* background-color: orange; */
	}

}


/******************************* END media queries ************************************/





















/************** START Responsive iFrame for google calendar ******************/
.responsive-iframe-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
 
.responsive-iframe-container iframe,   
.vresponsive-iframe-container object,  
.vresponsive-iframe-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/************** END Responsive iFrame for google calendar ******************/





html .cog-label {

color: #4b4f54!important;
font-family: Cutting Edge, sans-serif!important;
letter-spacing: 0.05em!important;

}

.cog-2, .cog-4 {

color: #4b4f54!important;
font-family: Cutting Edge, sans-serif!important;


}