/*
Theme Name: Cocoonfxmedia Limited
Theme URI: https://www.cocoonfxmedia.co.uk/web-design
Author: Cocoonfxmedia Limited
Author URI: https://www.cocoonfxmedia.co.uk

*/

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, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	font-family: inherit;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}
html {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
    font-size: 16px;
    line-height: 24px;
	overflow-y: scroll;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}
body {
	font-family: "Roboto", Helvetica, Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5714286rem;
	text-rendering: optimizeLegibility;
	color: #000;
}
*,
*:before,
*:after {
	-webkit-box-sizing: inherit;
	-moz-box-sizing: inherit;
	box-sizing: inherit;
}
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;
}


.wp-block-buttons>.wp-block-button {
    padding: 0px 0px 10px !important;
}
a.wp-block-button__link.has-background {
    padding: 30px !important;
}

/* =Repeatable patterns
-------------------------------------------------------------- */
#catapult-cookie-bar {
    background-color: #92b4c5 !important;
}
/* Small headers */
.archive-title,
.page-title,
.widget-title,
.entry-content th,
.comment-content th {
	font-size: 11px;
	font-size: 0.785714286rem;
	line-height: 2.181818182;
	font-weight: bold;
	text-transform: uppercase;
	color: #636363;
}

/* Shared Post Format styling */
article.format-quote footer.entry-meta,
article.format-link footer.entry-meta,
article.format-status footer.entry-meta {
	font-size: 11px;
	font-size: 0.785714286rem;
	line-height: 2.181818182;
}

/* Form fields, general styles first */
button,
input,
select,
textarea {
	border: 0px solid #ccc;
	border-radius: 3px;
	font-family: inherit;
	padding: 6px;
	padding: 0.428571429rem;
}
button,
input {
	line-height: normal;
}
textarea {
	font-size: 100%;
	overflow: auto;
	vertical-align: top;
    width: 100%;
    margin-top: 5px;
}
/* Reset non-text input types */
input[type="checkbox"],
input[type="radio"],
input[type="file"],
input[type="hidden"],
input[type="image"],
input[type="color"] {
	border: 0;
	border-radius: 0;
	padding: 0;
}

/* Buttons */
.menu-toggle,
input[type="submit"],
input[type="button"],
input[type="reset"],
article.post-password-required input[type=submit],
.bypostauthor cite span {
	font-weight: normal;
	color: #fff;
	background-color: #000;
	border-radius: 3px;
}
.menu-toggle,
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
	cursor: pointer;
}
button[disabled],
input[disabled] {
	cursor: default;
}
.menu-toggle:hover,
.menu-toggle:focus,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
article.post-password-required input[type=submit]:hover {
	color: #fff;
	background-color: #2f355d;
	background-repeat: repeat-x;
}
.menu-toggle:active,
.menu-toggle.toggled-on,
button:active,
input[type="submit"]:active,
input[type="button"]:active,
input[type="reset"]:active {
	color: #fff;
	background-color: #a90920;
	background-repeat: repeat-x;
}
/* Responsive images */
.entry-content img,
.comment-content img,
.widget img, img {
	max-width: 100%; /* Fluid images for posts, comments, and widgets */
}
img[class*="align"],
img[class*="wp-image-"],
img[class*="attachment-"] {
	height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */
}
img.size-full,
img.size-large,
img.header-image,
img.wp-post-image {
	max-width: 100%;
	height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */
}

/* Make sure videos and embeds fit their containers */
embed,
iframe,
object,
video {
	max-width: 100%;
}


/* =container
		-------------------------------------------------------------- */

.container { max-width: 1300px; }



/* =Typography
-------------------------------------------------------------- */

h1, .h1 {
    font-size: 48px;
    line-height: 1.042;
    margin-bottom: 22px;
    font-weight: 200;
}
h1.bannerText {
    line-height: 1.2;
    font-size: 24px;
    font-weight: 500;
}
h2, .h2 {
    font-size: 27px;
    line-height: 1.2;
    margin-bottom: 1.5714286rem;
    font-weight: 700;
}
.intro-quote h2 {
}
h3, .h3 {
  font-size: 22px;
  line-height: 1.2;
  font-weight:700;
}
h4, .h4 {
  font-size: 1rem;
  line-height: 1.5714286rem;
  margin-bottom: 0rem;
}
h5, .h5 {
  font-size: 1rem;
  line-height: 1.5714286rem;
  margin-bottom: 0rem;
}
p, ul, ol, pre, table, blockquote {
font-size: 16px;
    font-weight: 200;
    line-height: 1.8;
    margin-top: 0rem;
    margin-bottom: 16px;
}
.headerText p {
    font-size: 16px;
    font-weight: 400;
    display: inline-block;
}
ul ul, ol ol, ul ol, ol ul {
  margin-top: 0rem;
  margin-bottom: 0rem;
}

/* Let's make sure all's aligned */
hr, .hr {
  border: 1px solid;
  margin: -1px 0;
}
a, b, i, strong, em, small, code {
  line-height: 0;
}
sub, sup {
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
.standard ul {
    list-style: disc;
    padding-left: 40px;
}
hr.wp-block-separator {
    margin: 40px auto;
    width: 30%;
    text-align: center;
    border-color: #b8c2ea;
}
.search-header h1 {
    margin: 50px 0px;
}
/* =Main structure
	-------------------------------------------------------------- */

#main-header {
    background-color: #FFF;
    border-bottom: 1px solid #ededed;
    height: 83px;
    width: 100%;
    z-index: 100;
}
.innerContainer {
    width: 100%;
}
.logo {
    padding: 9px 0px 0px 0px;
    float: left;
}
.logo img {
    width: 120px;
    margin-left: 15px;
}
.telNum {
    float: right;
    padding: 28px 0px 0px 0px;
    font-weight: 600;
    margin-right: 30px;
}
.telNum img {
width: 27px;
    display: inline-block;
    margin-top: -3px;
    margin-right: 9px;
}
.telNum p {
    display: inline-block;
}
nav.mainnav {
    display: inline-block;
    float: right;
}
#mega-menu-wrap-primary .mega-menu-toggle {
    margin-top: 21px !important;
}
.searchWindow.hidden {
    display: none;
      visibility: hidden;
  opacity: 0;
  transition: visibility 0s 0.5s, opacity 0.5s linear;
}
.searchIcon {
    margin: 27px 30px;
    float: right;
    cursor: pointer;
}
.searchIcon img {
    width: 29px;
}
.searchWindow {
    background-color: #dedede;
    z-index: 10;
    position: fixed;
    width: 100%;
    height: 83px !important;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
      visibility: visible;
  opacity: 1;
  transition: opacity 0.3s linear;
}
.searchWindow .search-form {
    width: 380px;
    float: right;
}
.searchWindow .search-field {
    width: 250px;
    height: 50px;
    border-radius: 0px;
    margin: 17px;
}
span.screen-reader-text {
    display: none;
}
.searchWindow input[type="submit"] {
    height: 50px;
    margin: 17px 0px;
    width: 90px;
    background-color: #feb78c;
    border-radius: 0px;
}
.standardBanner {
    //background-color: #2c3889;
    color: #000000;
    padding: 40px 0px 0px;
    //background-image: url(/wp-content/themes/cocoonfxmedia/images/triBanner.jpg);
    background-repeat: no-repeat;
    background-size:cover;


}
.leftBanner {
    background-color: #2c3889;
    color: #ffffff;
    padding: 50px;
        background-image: url(/wp-content/themes/cocoonfxmedia/images/blueArrows.png);
    background-repeat: no-repeat;
    background-position: 105% 100%;
    background-size: 30%;
    min-height: 400px;
}
.rightBanner {
    background-image: url(/wp-content/uploads/home-page-image.jpg) !important;
    background-repeat: no-repeat;
    background-size: cover;
}
.intro-image {
    position: inherit;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.intro-quote {
    padding: 80px 0px 60px;
}
.CQC {
    background-color: #969696;
    color: #ffffff;
        border-left: 15px solid #fff;
        border-bottom: 15px solid #fff;
        border-right: 15px solid #fff;
            background-image: url(/wp-content/themes/cocoonfxmedia/images/greyArrows.png);
        background-repeat: no-repeat;
    background-position: 101% 100%;
    background-size: 15%;
}

.CQCScript {
    text-align: center;
    width: 80%;
    margin: 0 auto;
    margin-bottom: 70px;
}
.CQC h2 { color: #ffffff;}

.CQCText {
    padding: 55px 0px 70px 0px;
    text-align: center;
}
.cff-posts-wrap {
    color: #fff;
}
.testimonial {
    background-color: #2c3889;
    color: #ffffff;
    text-align: center;
    padding: 100px 0px;
    border-left: 15px solid #fff;
        border-bottom: 15px solid #fff;
        border-right: 15px solid #fff;

}
.contactBlock {
    margin: 50px 0px;
}
.contactBlock input, .contactBlock textarea {
    width: 100%;
    background-color: #e5e5e5;
    padding: 10px;
}
.contactBlock textarea {
    height: 250px;
}
.standard {
    padding: 15px 0px 50px;
}
.standard.bgImage {
    background-size: cover !important;
    background-position: center !important;
}
.visionBlue {
    padding: 30px 30px 30px 30px;
    border-radius: 0px 0px 25px 25px;
}
.whitecopyBox {
    background-color: #fff !important;
    padding: 10px;
	border-radius: 0px 0px 25px 25px;
}
.whitecopyBox h1 {
    margin: 30px 0px 40px;
}
p.reducedWidth {
    width: 60%;
}

/* =Body links
-------------------------------------------------------------- */
a {
	outline: none;
	color: #21759b;
}
a:hover {
	color: #0f3647;
}
strong {
    font-weight: 600;
}
blockquote {
    quotes: initial;
    background-color: #E7F2FF;
    padding: 30px 30px 1px 30px;
    margin-bottom: 20px;
    margin-left: -30px;
    width: 110%;
    font-style: italic;
}
a.orangeButton {
    background-color: #a9afd8;
    text-transform: uppercase;
    color: #fff;
    font-size: 14px;
    padding: 25px 20px;
    margin-top: 20px;
    display: inline-block;
    transition: 0.3s;
}
.intro-quote a.orangeButton {
    margin: 30px 0px;
    text-align: center;
    display: block;
    width: 220px;
    transition: 0.3s;
}
a.orangeButton:hover, .intro-quote a.orangeButton:hover{background-color:#2f355d;text-decoration: none;}



/* =Assistive text
-------------------------------------------------------------- */

.assistive-text,
.site .screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
}
.main-navigation .assistive-text:focus {
	background: #fff;
	border: 2px solid #333;
	border-radius: 3px;
	clip: auto !important;
	color: #000;
	display: block;
	font-size: 12px;
	padding: 12px;
	position: absolute;
	top: 5px;
	left: 5px;
	z-index: 100000; /* Above WP toolbar */
}

/* =Blog
-------------------------------------------------------------- */
.headerImage {
    width: 100%;
    height: 300px;
    background-size: cover !important;
    background-position: center !important;
    margin: 20px 0px;
}
.read-more {
    text-align: right;

}
.read-more a {
    background-color: #a9afd8;
    text-transform: uppercase;
    color: #fff;
    font-size: 14px;
    padding: 15px 20px;
}

.read-more a:hover {background-color: #3A6475; color: #FFF; text-decoration: none;}


/* =Footer
-------------------------------------------------------------- */

.footer {
    background: #1c2456;
    min-height: 110px;
}
.footTitle {
    	color: #ffffff;
}
.footer p {
    color: #fff;
    margin: 22px 0px;
    font-size: 0.8rem;
    line-height: 22px;
    font-weight: 400;
}
.footerAddress {
    	color: #fff;
    	font-size: 1rem;
}
.footSocial img {
    margin-top: 34px;
    margin-left: 14px;
    margin-right: 0px;
    float: right;
}
.colophon { padding: 20px 20px 0px; }
.colophon { background-color: #000; padding-bottom: 20px; }
.colophon p { margin-bottom: 0px; }
.colophon a { color: #fff; }

@media only screen and (max-width: 1229px) {
.awsm-modal {
    width: 100%;
    border-top: 2px dotted #b11111;
    margin-top: 11px;
}
}
@media only screen and (min-width: 1230px) {
.awsm-modal {
    border-top: 2px dotted #b11111;
    margin-top: 11px;
}
}

.contactPage input, .contactPage textarea {
    background-color: #f9f9f9;
}
.wpcf7-form-control.wpcf7-submit {
    background-color: #a9afd8;
    width: 50%;
font-size:1rem;
padding:10px;
}
.calWrapper{width:100%;background: #fff;}
.calculator{
	margin-bottom: 20px;

}
form#RDT {
    background: #f6f6f6;
    padding: 10px;

}
.calculator p {
    text-align: left;
        padding: 5px;
            margin-bottom: 2px;

}


.results{background: #f6f6f6;    padding-bottom: 10px; text-align: center;}


input[type=range] {
  height: 25px;
  -webkit-appearance: none;
  margin: 10px 0;
  width: 100%;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000;
  background: #2497E3;
  border-radius: 1px;
  border: 0px solid #000000;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px #000000;
  border: 1px solid #2497E3;
  height: 18px;
  width: 18px;
  border-radius: 25px;
  background: #A1D0FF;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -7px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #2497E3;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000;
  background: #2497E3;
  border-radius: 1px;
  border: 0px solid #000000;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 0px #000000;
  border: 1px solid #2497E3;
  height: 18px;
  width: 18px;
  border-radius: 25px;
  background: #A1D0FF;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #2497E3;
  border: 0px solid #000000;
  border-radius: 2px;
  box-shadow: 0px 0px 0px #000000;
}
input[type=range]::-ms-fill-upper {
  background: #2497E3;
  border: 0px solid #000000;
  border-radius: 2px;
  box-shadow: 0px 0px 0px #000000;
}
input[type=range]::-ms-thumb {
  margin-top: 1px;
  box-shadow: 0px 0px 0px #000000;
  border: 1px solid #2497E3;
  height: 18px;
  width: 18px;
  border-radius: 25px;
  background: #A1D0FF;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #2497E3;
}
input[type=range]:focus::-ms-fill-upper {
  background: #2497E3;
}
ol li {
    list-style-type: decimal;
        list-style-position: inside;
    padding-bottom: 5px;
}

// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { 
.intro-image {
    position: absolute;
    width: 70%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
	.whitecopyBox {
    background-color: #fff;
    padding: 10px;
}
}

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }





@media (max-width: 515px) { .telNum, .searchIcon {display: none;} }

span.cqc-widget-overall {
    height: 20px !important;
}
.wp-block-button__link {
    color: #fff !important;
    background-color: #84b3e1 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    text-decoration: none !important;
    padding: calc(0.667em + 10px) calc(1.333em + 20px) !important;
    font-size: 16px !important;
}
div.cqc-widget .cqc-container {
    min-height: 274px !important;
}
h2.auditIntro {
    text-align: center;
    padding: 0px 60px 60px;
}
.auditBox {
    margin-bottom: 60px;
}
a.auditDownload {
    background-color: #84b3e1;
    color: #ffffff;
    padding: 20px 25px;
    display: inline-block;
    margin-top: 10px;
    border-radius: 12px;
    float: right;
}
.reports {
    margin-bottom: 60px;
}
.whitecopyBox {
    background-color: #fff;
    padding: 10px;
	border-radius: 0px 0px 25px 25px;
}
li {
    list-style: disc;
    margin-left: 10px;
}