@charset "utf-8";
/* Custom Styles for HOEM website created by Monsters Edge */

/* FONTS */
a { transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; outline: none; color: #231f20;}
a:hover { text-decoration:none; color: #97775c;}
a:focus { outline: none;}

/* GENERAL */
body { font-family: semplicitapro,sans-serif; overflow-x: hidden;}
h1,h2,h3,h4,h5,h6 { margin: 0 0 15px 0; font-family: mrs-eaves,serif;}
p { margin: 0 0 15px 0; line-height: 1.75rem;}
p.intro-para { font-size: 1.1rem; font-weight: 500;}
p.divider-dot { background: url("../images/divider-dot.png") bottom center no-repeat; padding-bottom: 25px; margin: 0 0 20px 0;}
p.price { font-weight: 600; text-transform: uppercase; font-size: .9rem;}

#slideshow { color: #fff; position: relative;}
#slideshow .carousel-item { height: 100vh; min-height: 350px; background: no-repeat center center scroll; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
#slideshow h1 { font-family: mrs-eaves,serif; font-size: 6rem;}

header { position: absolute; top: 0; left: 0; width: 100%; z-index: 200; padding: 40px 0;}
header #logo { transition: transform 500ms ease-in-out; transform-origin: left top;}
header #open-menu { transition: margin 500ms; position: absolute; top: 40px; right: 50px;}
header.internal { position: static; min-height: 300px; background-color: #303e48; color: #fff;}
header.internal.white { position: static; min-height: 200px; background-color: #fff; color: #303e48;}
header.internal h1 { color: #fff; margin: 20px 0 30px 0; font-family: mrs-eaves,serif;}
header.internal #telephone { font-size: .6rem;}
header.internal #telephone a { font-size: 1.4rem; color: #fff; margin-bottom: 10px;}
header.internal #telephone a:hover { color: #97775c;}
header.internal #email { text-decoration: underline; color: #fff;}
header.internal #email:hover { color: #97775c;}

#content { background-color: #fff; padding: 150px 0 100px 0;}
#content .inset-pad { padding: 40px;}
#content ul { list-style: none; padding: 0; margin: 0 0 30px 40px; font-family: mrs-eaves,serif;}
#content ul li { margin-bottom: 2px; font-size: 1.25rem;}

.content { background-color: #fff; padding: 150px 0 100px 0;}
.content-offwhite { background-color: #f5f4f3; padding: 150px 0 100px 0;}
ul.brands { list-style: none; padding: 0; margin: 0;}
ul.brands li { display: inline-block; margin: 0 30px;}
ul.samples { list-style: none; padding: 0; margin: 30px auto;}
ul.samples li { display: inline-block; margin: 0 15px; text-align: center;}
ul.samples li span { text-transform: uppercase; color: #000; font-size: .6rem; font-weight: 500; display: block; margin: 15px 0 0 0;}
ul.samples.swatches li { margin: 0 5px;}
ul.samples.swatches li.divider { border-right: 1px solid #e3e3e3; padding-right: 15px;}
.size h3 { font-family: semplicitapro,sans-serif; font-size: 1.3rem;}
.size .info { font-size: .8rem; font-weight: 500; margin-bottom: 20px; line-height: 1.6rem;}
.size .price { font-size: 1rem; font-weight: 600; margin-bottom: 10px;}
.size a { font-weight: 600; text-transform: uppercase; font-size: .7rem; text-decoration: underline; display: block; margin-bottom: 30px;}
.size.middle { border-left: 1px solid #fff; border-right: 1px solid #fff;}
.size.right { border-left: 1px solid #fff;}

#story { background-color: #f5f5f5; padding: 120px 0 70px 0;}
#story .rc-image { margin: 200px 0 40px 0;}
.grey-link { color: #808080; text-transform: uppercase; font-size: .75rem; display: inline-block; padding: 0 25px 0 0; background-image: url("../images/link-arrow-grey.png"); background-repeat: no-repeat; background-position: right center; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s;}
.grey-link:hover { color: #97775c; background-image: url("../images/link-arrow-gold.png");}

#how-it-works { background-color: #f2f2f2; padding: 150px 0 150px 0;}
ul#process { list-style: none; padding: 0; margin: 0 auto 30px auto;}
ul#process li { display: inline-block; margin: 0 10px;}
ul#process li span { text-transform: uppercase; color: #000; font-size: .7rem; font-weight: 500; display: block; margin: 15px 0 0 0;}
ul#process li:last-child { display: none !important;}

#about { background-color: #f2f2f2; padding: 70px 0; position: relative;}
#about #stunning { background-color: #303e48; color: #fff; padding: 30px 50px; text-align: center; margin: 60px auto; max-width: 520px;}
#about #stunning p em { background-color: #95775d; display: inline-block; padding: 2px 5px; font-style: normal;}
#about #stunning p { text-transform: uppercase; margin: 0; font-size: 1.2rem; letter-spacing: 2px; line-height: 1.6rem;}
#about #zinc { position: absolute; top: 300px; right: 50px;}
#about #copper { position: absolute; top: 780px; right: 0px;}
#about #iron { position: absolute; top: 360px; left: -50px;}
#about h3 { text-transform: uppercase; font-size: 1.5rem; font-family: mr-eaves-sans,sans-serif; letter-spacing: 2px;}

#studios { background-color: #f2f2f2; padding: 200px 0 70px 0;}
#studios .studio { background-color: #fff; text-align: center; padding: 150px 30px 30px 30px; position: relative;}
#studios .studio .studio-pic { position: absolute; top: -140px; left: 50%; transform: translateX(-50%);}
#studios .studio .s-title { text-transform: uppercase; color: #000000; letter-spacing: 2px; font-family: mr-eaves-sans,sans-serif; font-size: 1.3rem; margin-bottom: 15px;}
#studios .studio .s-price { text-transform: uppercase; color: #000000; font-family: mr-eaves-sans,sans-serif; font-size: 1rem; margin-bottom: 10px;}
#studios .studio p { color: #888888; font-size: .9rem;}
#studios .studio ul { list-style: none; padding: 0; margin: 0 0 30px 0;}
#studios .studio ul li { display: inline-block; margin: 0 8px;}
#studios .studio ul li span { display: block; font-family: mr-eaves-sans,sans-serif; font-size: .75rem; text-transform: uppercase; padding-top: 5px;}
#studios .studio .card { padding: 0; border: none;}
#studios .studio .btn { padding: 11px 15px 10px 15px;}
.tooltip .arrow { display: none;}
.tooltip .tooltip-inner { background-color: transparent; color: #000; text-transform: uppercase; padding: 15px 0 0 0; font-size: .75rem; font-family: mr-eaves-sans,sans-serif;}
ul#colours li a .tooltip .tooltip-inner { padding: 0 !important;}
#studios h3 { text-transform: uppercase; font-size: 1.2rem; letter-spacing: 2px;}
.mobile-studios { visibility: hidden; height: 0;}

#packages .package { text-align: center; background-size: cover; background-position: center center; padding: 100px; color: #fff;}
#packages .package h3 { text-transform: uppercase; font-weight: 400; font-size: 1.2rem; letter-spacing: 2px; background: url("../images/title-line.png") top center no-repeat; margin: 15px 0 30px 0; padding-top: 15px;}
#packages .package p { text-transform: uppercase; font-weight: 400; font-size: .6rem; margin: 0 0 15px 0;}
#packages .package ul { list-style: none; padding: 0; margin: 0 0 60px 0;}
#packages .package ul li { display: inline-block; font-size: .8rem; margin-right: 10px;}
#packages .package ul li:last-child { margin-right: 0;}

#packages .package.red ul li { background: url("../images/tick-red.png") 0 0 no-repeat; padding: 0 0 0 26px;}
#packages .package.red .lined { border-color: #a7353a;}
#packages .package.red .lined:hover { background-color: #a7353a; border-color: #a7353a;}

#packages .package.blue ul li { background: url("../images/tick-blue.png") 0 0 no-repeat; padding: 0 0 0 26px;}
#packages .package.blue .lined { border-color: #a4b9c8;}
#packages .package.blue .lined:hover { background-color: #a4b9c8; border-color: #a4b9c8;}

#packages .package.grey ul li { background: url("../images/tick-grey.png") 0 0 no-repeat; padding: 0 0 0 26px;}
#packages .package.grey .lined { border-color: #b1b1b1;}
#packages .package.grey .lined:hover { background-color: #b1b1b1; border-color: #b1b1b1;}

#packages .package.green ul li { background: url("../images/tick-green.png") 0 0 no-repeat; padding: 0 0 0 26px;}
#packages .package.green .lined { border-color: #9aae87;}
#packages .package.green .lined:hover { background-color: #9aae87; border-color: #9aae87;}

#note { background-color: #303e48; color: #fff; padding: 40px 15px 10px 15px;}
#note p { font-size: .75rem;}

footer { background: #262626 url("../images/footer-shadow.png") 0 0 repeat-x; color: #b2b2b2; padding: 100px 0;}
footer h3 { font-family: mr-eaves-sans,sans-serif; text-transform: uppercase; letter-spacing: 2px; font-size: 1.4rem; color: #fff;}
footer hr { border-color: #494948;}
footer form label { font-size: .75rem;}
footer p { font-size: 1rem;}
footer form label a { color: #b2b2b2; text-decoration: underline;}
footer #telephone a { font-size: 1.5rem;}
footer #email { text-decoration: underline;}
footer form .form-control { border-bottom-color: #494948; background-color: transparent; border-width: 0 0 1px 0; border-radius: 0; color: #fff !important; font-size: .8rem; padding: 10px 0;}
footer form .form-control:focus { background-color: transparent;} 
footer form .form-control::-webkit-input-placeholder { color: #b2b2b2;}
footer form .form-control:-moz-placeholder { color: #b2b2b2;}
footer form .form-control::-moz-placeholder { color: #b2b2b2;}
footer form .form-control:-ms-input-placeholder { color: #b2b2b2;}

footer.contact { background: #f2f2f2; color: #000;}
footer.contact form .form-control {color: #000 !important;}

#registered { background: #262626; color: #b2b2b2; padding: 60px 15px 30px 15px; font-size: .75rem;}

#copyright { padding: 40px 0; color: #000; font-size: .75rem;}

/* Menu Styles */
#close-menu { position: absolute; top: 40px; right: 50px;}
#close-menu:hover, #open-menu:hover { cursor: pointer;}
.cbp-spmenu ul { list-style: none; padding: 50px 0 0 0px; margin: 0; text-align: center; font-family: mrs-eaves,serif;}
.cbp-spmenu ul li { padding: 0; margin: 0 0 5px 0;}
.cbp-spmenu ul li:first-child { margin: 0 0 60px 0;}
.cbp-spmenu a { display: block; color: #fff; font-size: 3rem; padding: 0; font-weight: 300; text-decoration: none;}
.cbp-spmenu a:hover, .cbp-spmenu li.active a { color: #97775c;}
.cbp-spmenu ul li ul { list-style: none; padding: 0 0 0 20px; margin: 0; display: none;}
.cbp-spmenu ul li ul li { padding: 0; margin: 0 0 5px 0;}
.cbp-spmenu ul li.active ul li a { color: #fff;}
.cbp-spmenu ul li.active ul li a:hover { color: #97775c;}
.cbp-spmenu { background: #303e48; position: fixed;}
.cbp-spmenu-vertical { width: 100%; height: 100%; top: 0; z-index: 1000;}
.cbp-spmenu-right { right: -100%;}
.cbp-spmenu-right.cbp-spmenu-open { right: 0px;}
.cbp-spmenu, .cbp-spmenu-push { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;}

.btn-primary { background-color: #f4b221; border-color: #f4b221; color: #000; border-radius: 0; font-size: .75rem; text-transform: uppercase; font-weight: 700; padding: 11px 30px 10px 30px; letter-spacing: 1px;}
.btn-primary:hover { background-color: #95775d; border-color: #95775d; color: #fff;}

.white-lined, .btn-primary.white-lined:disabled { background-color: transparent; border-color: #fff; color: #fff; border-radius: 0; font-size: .75rem; text-transform: uppercase; font-weight: 700; padding: 11px 30px 10px 30px; letter-spacing: 1px;}
.white-lined:hover { background-color: #95775d; border-color: #95775d; color: #fff;}

.gold-lined, .btn-primary.gold-lined:disabled, footer.contact .white-lined, footer.contact .btn-primary.white-lined:disabled { background-color: transparent; border-color: #f4b221; color: #000; border-radius: 0; font-size: .75rem; text-transform: uppercase; font-weight: 700; padding: 11px 30px 10px 30px; letter-spacing: 1px;}
.gold-lined:hover, footer.contact .white-lined:hover { background-color: #95775d; border-color: #95775d; color: #fff;}

.black-lined, .btn-primary.black-lined:disabled { background-color: transparent; border-color: #000; color: #000; border-radius: 0; font-size: .75rem; text-transform: uppercase; font-weight: 700; padding: 11px 30px 10px 30px; letter-spacing: 1px;}
.black-lined:hover { background-color: #95775d; border-color: #95775d; color: #fff;}

.lined { background-color: transparent; border-color: #f4b221; color: #fff; border-radius: 0; font-size: .75rem; text-transform: uppercase; font-weight: 700; padding: 11px 30px 10px 30px; letter-spacing: 1px;}
.lined:hover { background-color: #95775d; border-color: #95775d; color: #fff;}

/* RESPONSIVE AMENDED STYLES */
/* #Tablet (Landscape)
================================================== */
/* Note: Design for a width of 1024px */
@media only screen and (min-width: 960px) and (max-width: 1024px) {
    #about #zinc { top: 300px; right: 30px; height: 275px;}
    #about #copper { top: 780px; right: 0px; height: 300px;}
    #about #iron { top: 360px; left: -50px; height: 275px;}
    #studios { padding: 150px 0 70px 0;}
    #studios .studio { padding: 100px 30px 30px 30px;}
    ul#process li { margin: 0 5px;}
    ul.samples li { margin: 0 10px;}
    ul.samples.swatches li { margin: 0 2px;}
}

/* #Tablet (Portrait)
================================================== */
/* Note: Design for a width of 768px */
@media only screen and (min-width: 768px) and (max-width: 959px) {
    #about #zinc { top: 300px; right: 0px; height: 275px;}
    #about #copper { top: 780px; right: -30px; height: 300px;}
    #about #iron { top: 300px; left: -50px; height: 275px;}
    #studios { padding: 100px 0 70px 0;}
    #studios .studio .studio-pic { top: -100px;}
    #studios .studio { padding: 80px 30px 30px 30px;}
    #content .inset-pad { padding: 0px;}
    ul#process li { margin: 0 15px 30px 15px;}
    .mob-img { margin: 0 auto 30px auto;}
}

/* #Mobile (Both)
================================================== */
/* Note: Landscape and portrait */
@media only screen and (max-width: 767px) {
    header #open-menu { top: 0px; right: 30px;}
    #close-menu { top: 30px; right: 30px;}
    .cbp-spmenu a { font-size: 2rem;}
    #slideshow h1 { font-size: 3rem;}
    #about, footer, #studios, #content, #story, #how-it-works, .content-offwhite, .content { padding: 30px 0;}
    #about #zinc, #about #copper, #about #iron { display: none;}
    .mobile-studios { visibility: visible; text-align: center; height: auto;}
    .mobile-studios a span { text-transform: uppercase; display: block; font-size: .75rem; margin: 5px 0 0 0; font-weight: 600;}
    #content .inset-pad { padding: 0px;}
    #story .rc-image { margin: 30px 0;}
    ul#process li { margin: 0 0 30px 0; width: 100%;}
    .mob-img { margin: 0 auto 30px auto;}
    ul.samples li { width: 46%; text-align: center; margin: 0 0 30px 0;}
    ul.samples.swatches li.divider { border-right: none; padding-right: 0px;}
    .size.middle { border: none;}
}

/* #Mobile (Landscape)
================================================== */
/* Note: Design for a width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    #slideshow h1 { font-size: 2rem; margin: 120px 0 0 0;}
}
	
/*  #Mobile (Portrait)
================================================== */
/* Note: Design for a width of 320px */
@media only screen and (min-width: 320px) and (max-width: 479px) {
    footer, #copyright, #copyright .text-right { text-align: center !important;}
    .mobile-studios { padding-bottom: 150px;}
    #studios .studio { margin-bottom: 200px;}
    #packages { padding: 0 15px !important;}
    #about #stunning { padding: 30px 30px;}
    #packages .package { padding: 100px 50px;}
    #packages .package ul { width: 220px; margin: 0 auto 40px auto;}
    #packages .package ul li { width: 100%; text-align: left; margin-bottom: 5px;}
    #registered { padding: 30px 15px 0px 15px; text-align: center;}
}

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}