/*!
 * Start Bootstrap - Creative Bootstrap Theme (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */
.ardfun {
    display: none
}

.ardole {
    visibility: hidden
}

body,html {
    width: 100%;
    height: 100%
}

body {
    font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif
}

hr {
    max-width: 50px;
    border-color: #333;
    border-width: 3px
}

hr.light {
    border-color: #fff
}

a {
    color: #5a616b;
    -webkit-transition: all .35s;
    -moz-transition: all .35s;
    transition: all .35s
}

a:focus,a:hover {
    color: #222
}

h1,h2,h3,h4,h5,h6 {
    font-family: Lato,sans-serif;
    color: #4e4f54
}

#team .teamProfile img {
    height: 300px;
    object-fit: cover;
    object-position: 50% 25%;
}

#blog h1,#blog h2,#blog h3,#blog h4,.portfolio-box2 h2 {
    color: #fff
}

#page h2 {
    font-size: 20px;
    text-transform: uppercase;
}

#page p {
    margin-bottom: 5px;
    line-height: 1.8
}

.bg-primary {
    background-color: #333
}

.bg-dark {
    color: #fff;
    background-color: #222
}

.text-faded {
    color: rgba(255,255,255,.7)
}

section {
    padding: 60px 0 10px 0
}

aside {
    padding: 50px 0
}

.no-padding {
    padding: 0
}

.navbar-default {
    border-color: rgba(34,34,34,.05);
    font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
    background-color: #fff;
    -webkit-transition: all .35s;
    -moz-transition: all .35s;
    transition: all .35s
}

.navbar-default .navbar-header .navbar-brand {
    font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
    color: #333
}

.navbar-default .navbar-header .navbar-brand:focus,.navbar-default .navbar-header .navbar-brand:hover {
    color: #333
}

.navbar-default .nav>li>a,.navbar-default .nav>li>a:focus {
    color: #222
}

.navbar-default .nav>li>a:focus:hover,.navbar-default .nav>li>a:hover {
    color: #333
}

.navbar-default .nav>li.active>a,.navbar-default .nav>li.active>a:focus {
    color: #5a616b!important;
    background-color: transparent
}

.navbar-default .nav>li.active>a:focus:hover,.navbar-default .nav>li.active>a:hover {
    background-color: transparent
}

@media(min-width: 768px) {
    .navbar-default {
        border-color:rgba(255,255,255,.3);
        background-color: rgba(105,105,105,.3)
    }

    .navbar-default .navbar-header .navbar-brand {
        color: rgba(255,255,255,.7)
    }

    .navbar-default .navbar-header .navbar-brand img {
        float: left;
        padding: 0;
        margin-top: -8px
    }

    .navbar-default .navbar-header .navbar-brand:focus,.navbar-default .navbar-header .navbar-brand:hover {
        color: #fff
    }

    .navbar-default .nav>li>a,.navbar-default .nav>li>a:focus {
        color: rgba(255,255,255,.95)
    }

    .navbar-default .nav>li>a.linkOn,.navbar-default .nav>li>a.linkOn:focus {
        color: rgba(255,255,255,.45)
    }

    .navbar-default .nav>li>a:focus:hover,.navbar-default .nav>li>a:hover {
        color: #fff
    }

    .navbar-default.affix {
        border-color: rgba(34,34,34,.05);
        background-color: #302f34
    }

    .navbar-default.affix .navbar-header .navbar-brand {
        font-size: 14px;
        color: #fff
    }

    .navbar-default.affix .navbar-header .navbar-brand:focus,.navbar-default.affix .navbar-header .navbar-brand:hover {
        color: #fff
    }

    .navbar-default.affix .nav>li>a,.navbar-default.affix .nav>li>a:focus {
        color: #fff
    }

    .navbar-default.affix .nav>li>a:focus:hover,.navbar-default.affix .nav>li>a:hover {
        color: #fff
    }
}

header {
    position: relative;
    width: 100%;
    min-height: auto;
    text-align: center;
    color: #fff;
    background-image: url(/web/20241217173844im_/https://www.copperfieldshairandbeauty.co.uk/img/header.jpg);
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover
}

header .header-content {
    position: relative;
    width: 100%;
    padding: 100px 15px;
    text-align: center
}

header .header-content .header-content-inner h1 {
    margin-top: 0;
    margin-bottom: 0;
    width: auto;
    font-size: 16px;
    text-shadow: 2px 2px 8px #000
}

header .header-content .header-content-inner h2 {
    text-shadow: none;
    color: #fff;
    background-color: #5a616b;
    padding: 8px
}

header .header-content .header-content-inner hr {
    margin: 30px auto
}

header .header-content .header-content-inner p {
    margin-bottom: 50px;
    font-size: 16px;
    font-weight: 300;
    color: rgba(255,255,255,.7)
}

header {
    min-height: 100vh
}

@media(min-width: 768px) {
    header .header-content {
        position:absolute;
        top: 50%;
        padding: 0 50px;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%)
    }

    header .header-content .header-content-inner {
        margin-right: 0;
        margin-left: auto;
        max-width: 1000px
    }

    header .header-content .header-content-inner p {
        margin-right: auto;
        margin-left: auto;
        max-width: 80%;
        font-size: 18px
    }
}

.section-heading {
    margin-top: 0
}

#beauty {
    background-color: #444;
    color: #fff
}

.service-box {
    margin: 0;
    max-width: 400px
}

.service-box img {
    margin: 0;
    width: 100%;
    padding: 0;
    background-color: #fff
}

@media(min-width: 992px) {
    .service-box {
        margin:20px auto 0
    }
}

.service-box p {
    margin-bottom: 0
}

.portfolio-box,.portfolio-box2 {
    display: block;
    position: relative;
    margin: 0 auto;
    max-width: 750px;
    height: 400px;
    overflow: hidden
}

.portfolio-box2 {
    background: rgba(50,50,50,1)
}

.darkred {
    background-color: #881129
}

.eyeBlue {
    background-color: #30378e
}

.portfolio-box img,.portfolio-box2 img {
    width: 100%
}

.portfolio-box2-img {
    width: 100%;
    height: 50%;
    overflow: hidden
}

.portfolio-box2 .portfolio-box-caption {
    display: block;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 40%;
    text-align: center;
    color: #fff;
    opacity: 1;
    -webkit-transition: all .35s;
    -moz-transition: all .35s;
    transition: all .35s
}

.portfolio-box2 .padder {
    display: block;
    width: 70%;
    height: 70%;
    text-align: left;
    color: #fff;
    opacity: 1;
    margin: 25% auto 10px
}

.portfolio-box .portfolio-box-caption {
    display: block;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #fff;
    opacity: 1;
    background: rgba(100,100,100,.8);
    -webkit-transition: all .35s;
    -moz-transition: all .35s;
    transition: all .35s
}

.portfolio-box-arrow {
    display: block;
    position: absolute;
    top: 20px;
    right: 30px;
    width: auto;
    height: 30px;
    text-align: center;
    color: #fff;
    opacity: 1;
    font-family: Lato,sans-serif;
    font-size: 1.4em;
    line-height: 1em
}

.portfolio-box-arrow p {
    float: left;
    overflow: hidden;
    padding: 5px
}

.portfolio-box .portfolio-box-caption h2 {
    color: #fff
}

.portfolio-box .portfolio-box-caption .portfolio-box-caption-content {
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
    transform: translateY(-50%)
}

.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category,.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
    padding: 0 10%;
    font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif
}

.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {
    font-size: 14px
}

.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
    font-size: 18px
}

.portfolio-box:hover .portfolio-box-caption {
    opacity: 0
}

.portfolio-box2:hover .portfolio-box-caption {
    height: 80%
}

.portfolio-box2:hover .portfolio-box2-img {
    opacity: .2
}

@media(min-width: 768px) {
    .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {
        font-size:22px
    }

    .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
        font-size: 14px
    }
}

.call-to-action h2 {
    margin: 0 auto 20px
}

.text-primary {
    color: #5a616b
}

.no-gutter>[class*=col-] {
    padding-right: 0;
    padding-left: 0
}

.btn-default {
    border-color: #fff;
    color: #222;
    background-color: #fff;
    -webkit-transition: all .35s;
    -moz-transition: all .35s;
    transition: all .35s
}

.btn-default.active,.btn-default.focus,.btn-default:active,.btn-default:focus,.btn-default:hover,.open>.dropdown-toggle.btn-default {
    border-color: #ededed;
    color: #222;
    background-color: #f2f2f2
}

.btn-default.active,.btn-default:active,.open>.dropdown-toggle.btn-default {
    background-image: none
}

.btn-default.disabled,.btn-default.disabled.active,.btn-default.disabled.focus,.btn-default.disabled:active,.btn-default.disabled:focus,.btn-default.disabled:hover,.btn-default[disabled],.btn-default[disabled].active,.btn-default[disabled].focus,.btn-default[disabled]:active,.btn-default[disabled]:focus,.btn-default[disabled]:hover,fieldset[disabled] .btn-default,fieldset[disabled] .btn-default.active,fieldset[disabled] .btn-default.focus,fieldset[disabled] .btn-default:active,fieldset[disabled] .btn-default:focus,fieldset[disabled] .btn-default:hover {
    border-color: #fff;
    background-color: #fff
}

.btn-default .badge {
    color: #fff;
    background-color: #222
}

.btn-primary {
    border-color: #333;
    color: #fff;
    background-color: #333;
    -webkit-transition: all .35s;
    -moz-transition: all .35s;
    transition: all .35s
}

.bg-primary .btn-primary {
    background-color: #666
}

.btn-primary.active,.btn-primary.focus,.btn-primary:active,.btn-primary:focus,.btn-primary:hover,.open>.dropdown-toggle.btn-primary {
    border-color: #5a616b;
    color: #fff;
    background-color: #5a616b
}

.btn-primary.active,.btn-primary:active,.open>.dropdown-toggle.btn-primary {
    background-image: none
}

.btn-primary.disabled,.btn-primary.disabled.active,.btn-primary.disabled.focus,.btn-primary.disabled:active,.btn-primary.disabled:focus,.btn-primary.disabled:hover,.btn-primary[disabled],.btn-primary[disabled].active,.btn-primary[disabled].focus,.btn-primary[disabled]:active,.btn-primary[disabled]:focus,.btn-primary[disabled]:hover,fieldset[disabled] .btn-primary,fieldset[disabled] .btn-primary.active,fieldset[disabled] .btn-primary.focus,fieldset[disabled] .btn-primary:active,fieldset[disabled] .btn-primary:focus,fieldset[disabled] .btn-primary:hover {
    border-color: #333;
    background-color: #333
}

.btn-primary .badge {
    color: #333;
    background-color: #fff
}

.btn {
    border: 0;
    border-radius: 300px;
    text-transform: uppercase;
    font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
    font-weight: 700
}

.btn-xl {
    padding: 15px 30px
}

::-moz-selection {
    text-shadow: none;
    color: #fff;
    background: #222
}

::selection {
    text-shadow: none;
    color: #fff;
    background: #222
}

img::selection {
    color: #fff;
    background: 0 0
}

img::-moz-selection {
    color: #fff;
    background: 0 0
}

body {
    webkit-tap-highlight-color: #222
}

#page {
    background: rgba(100,100,100,.1)
}

#page .container {
    background: rgba(255,255,255,1);
    padding: 20px
}

#page .text-center img {
    width: 100%
}

.grey p {
    color: #5a616b!important
}

.right {
    float: right
}

.project-name {
    padding: 1rem;
}

#page img {
    float: right;
    margin: 0 0 20px 20px;
    width: auto;
    max-width: 100%
}

header {
    position: relative;
    width: 100%;
    min-height: 90vh;
    text-align: center;
    color: #fff;
    background-image: none;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover
}

#footer,#footer a,#footer h3,#team h2,#team h3,#team h4,.bg-primary {
    color: #fff!important
}

#bridal {
    background-color: #5a616b
}

@media(min-width: 768px) {
    header {
        min-height:100vh
    }

    .teamProfile {
        min-height: 270px
    }

    #mission {
        font-size: 1.2em;
        padding-bottom: 50px
    }
}

h1,h2,h3 {
    font-family: Lato,sans-serif
}

#page .text-left img {
    float: left;
    margin: 0 2% 20px 0;
    max-width: 100%
}

.text-muted {
    font-size: smaller;
    color: #5a616b
}

.forminput {
    display: block;
    width: 100%;
    max-width: 470px;
    margin: 0 0 20px 0;
    overflow: hidden
}

.forminput input,.forminput select,.forminput textarea {
    display: block;
    width: 70%;
    max-width: 285px;
    float: right
}

.forminput input,.forminput textarea {
    border: 1px solid #e286a3
}

.forminput select {
    border: 0
}

.date {
    float: right;
    width: 150px;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 12pt;
    font-weight: 700;
    line-height: 1.42857143;
    text-align: center;
    vertical-align: middle;
    background-color: #3c0e2a;
    color: #fff;
    overflow: hidden;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px
}

.large {
    font-size: 18pt;
    font-size: 1.5em
}

#socialbox {
    float: right;
    width: 180px;
    background-color: #302f34;
    color: #fff;
    font-size: .8em;
    padding: 15px;
    margin: 0 0 20px 20px
}

#socialbox p {
    margin-bottom: 0;
    line-height: 1.2em
}

.facebook-like,.google-plus,.twitter-button {
    height: 30px;
    margin: 5px 0
}

.quote {
    font-family: Handlee,cursive;
    font-size: 1.2em
}

#openBook {
    background-color: #fff!important
}

#openBook h3 {
    color: #fff;
    font-size: 20px;
    font-size: 1.5em;
    margin: 12px auto
}

#bookModal {
    z-index: 2000;
    position: absolute;
    width: 90%;
    max-width: 600px;
    height: auto;
    margin: 0 auto;
    left: 5%;
    top: 20px;
    background-color: #000;
    color: #fff;
    padding: 40px 40px 10px 40px;
    -webkit-box-shadow: 7px 7px 5px 0 rgba(255,255,255,.75);
    -moz-box-shadow: 7px 7px 5px 0 rgba(50,50,50,.75);
    box-shadow: 7px 7px 5px 0 rgba(50,50,50,.75);
    display: none
}

#bookModal .padder,#contactModal .padder {
    margin: 0 auto;
    padding: 30px;
    overflow: hidden
}

#contactModal h4 {
    font-weight: 700;
    font-size: 1.2em;
    margin: 0 0 1em 0
}

#contactModal p {
    font-weight: 700;
    font-size: small
}

#close,#closeContact {
    width: 50px;
    height: 50px;
    float: right;
    background-color: #000;
    color: #fff;
    border: 5px solid #fff;
    margin: -20px -20px 0 0;
    font-size: 35px;
    cursor: pointer;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%x;
    border-radius: 50%
}

#book ul,#footer ul {
    list-style: none
}

table tr td {
    padding: 5px;
}

table tr th {
    padding: 8px 5px;
    background: rgba(50,50,50,1);
    color: #fff;
    text-align: center
}

.utility li,.utility ul li {
    width: 32%;
    float: left
}

#footer {
    padding-bottom: 30px
}

#openingHours {
    margin: 0 auto;
    width: 270px
}

#mc_embed_signup {
    clear: left;
    width: 100%;
    font-size: .8em
}

#mce-EMAIL {
    font-size: 15px;
    border: 1px solid #abb0b2;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    color: #343434;
    background-color: #fff;
    box-sizing: border-box;
    height: 32px;
    padding: 0 .4em;
    display: inline-block;
    margin: 0;
    vertical-align: top;
    width: auto
}

#mc_embed_signup input.email {
    margin: 0 auto 5px;
    width: 150px!important
}

#mc_embed_signup .button {
    font-size: 13px;
    border: none;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    letter-spacing: .03em;
    color: #fff;
    background-color: #aaa;
    box-sizing: border-box;
    height: 32px;
    line-height: 32px;
    padding: 0 18px;
    display: inline-block;
    margin: 0;
    transition: all .23s ease-in-out 0s
}

@media (max-width: 780px) {
    .utility li,.utility ul li {
        width:47%;
        line-height: 1.7em
    }

    .navbar-default {
        border-color: rgba(20,20,20,.05);
        background-color: #000;
        -webkit-transition: all .35s;
        -moz-transition: all .35s;
        transition: all .35s
    }

    .navbar-default .nav>li>a,.navbar-default .nav>li>a:focus {
        color: #fff
    }

    .navbar-fixed-top .navbar-collapse {
        max-height: 500px
    }
}

@media (max-width: 400px) {
    .utility li,.utility ul li {
        width:90%;
        line-height: 1.7em;
        float: none
    }
}

.navbar-nav>li>a {
    text-align: center;
    border-bottom: 1px solid #333333;
}

.padding {
    padding: 2rem;
    max-width: 700px;
}

.header-content-inner .btn {
    clear: both;
    margin-top: 2em;
}

#module {
    position: fixed;
    width: 90%;
    max-width: 500px;
    max-height: 75vh;
    overflow-y: scroll;
    box-sizing: border-box;
    top: 12vh;
    left: calc(50% - 250px);
    background-color: #FFFFFF;
    padding: 2rem 4rem;
    z-index: 1001;
    color: #000000;
    -webkit-box-shadow: 10px 10px 15px -4px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 15px -4px rgba(0,0,0,0.75);
    box-shadow: 10px 10px 15px -4px rgba(0,0,0,0.75);
    border-bottom: 3px solid #675048;
}

#module .logo img {
    text-align: center;
    margin: 2rem auto;
}

#module .logo img {
    -webkit-filter: brightness(0);
    filter: brightness(0);
}

@media only screen and (max-width: 1100px) {
    .nav>li>a {
        position: relative;
        display: block;
        padding: 10px 5px;
    }
}

@media only screen and (max-width: 800px) {
    .orderflex {
        display: flex;
        flex-direction: column;
        padding: 3rem 2rem 2rem 3rem;
    }

    .orderflex .col-md-4 {
        order: 2;
    }

    .orderflex .col-md-8 {
        order: 1;
    }

    .header-content-inner .text-left {
        text-align: center;
    }
}

@media only screen and (max-width: 520px) {
    #module {
        left: 5%;
    }

    #socialbox {
        display: none;
    }
}

#module h2 {
    color: #996E3B;
    text-align: center;
}

#closemodule {
    width: 40px;
    float: right;
    margin: -1rem;
}

.btn.btn-pink {
    background-color: #cc0472;
    color: #FFFFFF
}

.blocks {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5em 6em;
    margin: 2em 0;
    align-items: start;
}

#page h3 {
    font-size: 18px;
}

/* .blocks table tr:first-child td { 
	text-align: left; 
	font-weight: 600;
} */
.blocks > div {
    display: grid;
}

.blocks table tr td:last-child {
    text-align: right;
}

.sbsBlocks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3em;
    margin: 2em;
}

@media only screen and (max-width: 991px) {
    .blocks {
        grid-template-columns: 1fr 1fr;
    }
}

@media only screen and (max-width: 800px) {
    .sbsBlocks {
        grid-template-columns: 1fr;
    }
}

@media only screen and (max-width: 550px) {
    .blocks {
        grid-template-columns: 1fr;
    }
}