/* CSS Document font-family: 'Source Sans Pro', sans-serif; */ @font-face { font-family: 'madelyn_customregular'; src: url('https://www.enquiries.ashmoregrange.co.uk/assets/css/madelyncustom-regular-webfont.woff2') format('woff2'), url('https://www.enquiries.ashmoregrange.co.uk/assets/css/madelyncustom-regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Begum'; src: url('https://www.enquiries.ashmoregrange.co.uk/assets/css/Begum-Semibold.woff2') format('woff2'), url('https://www.enquiries.ashmoregrange.co.uk/assets/css/Begum-Semibold_425486508.woff') format('woff'); font-weight: 600; font-style: normal; } * { outline: none; box-sizing: border-box; } HTML {} BODY { padding: 0; margin: 0; font-family: 'Source Sans Pro', sans-serif; background-color: #F6F6F6; } H1 { font-size: 60px; line-height: 60px; font-weight: 300; color: #5A5A5A; font-family: 'madelyn_customregular', sans-serif; } H2 { font-size: 36px; line-height: 41px; font-weight: 300; color: #5A5A5A; text-transform: uppercase; } H3 { font-size: 30px; line-height: 35px; font-weight: 300; color: #5A5A5A; text-transform: uppercase; } H4 { font-size: 24px; line-height: 29px; font-weight: 300; color: #5A5A5A; text-transform: uppercase; } H5 { font-size: 20px; line-height: 25px; font-weight: 300; color: #5A5A5A; text-transform: uppercase; } H6 { font-size: 16px; line-height: 21px; font-weight: 300; color: #5A5A5A; text-transform: uppercase; } H1 A, H2 A, H3 A, H4 A, H5 A, H6 A { text-decoration: none; } .font-madelyn { font-weight: 300; font-family: 'madelyn_customregular', sans-serif; text-transform: none; } .font-begum { font-family: 'Begum'; font-weight: 600; font-style: normal; text-transform: none; } IMG { border: none; } HR { border: none; border-bottom: solid 1px #BBB; margin: 20px 0; } .clr { clear:both; } .width { position: relative; width: 1500px; margin: 0 auto 0 auto; } .full-width-image { width: 100%; height: auto; display: block; } .round { border-radius: 50%; width: 80%; margin: 0 auto 0 auto; } .table { display: table; height: 100%; width: 100%; } .table .cell { display: table-cell; height: 100%; width: 100%; vertical-align: middle; } .table .cell.cell-top { vertical-align: top; } .table .cell.cell-third { width: 33.3333%; padding: 0; } .table .cell.cell-twothirds { width: 66.6666%; padding: 0 40px 0 40px; } /* Backgrounds /* ********************************************************************* */ .image-bg { background-repeat: no-repeat; background-position: center center; background-size: cover; background-color: #EEEEEE; height: auto; } .bg-white { background-color: #ffffff; } .bg-teal { background-color: #1E7372; } .bg-burg { background-color: #670F30; } .bg-blue { background-color: #101C3A; } .bg-pattern { background-color: #101C3A; background-repeat: repeat; background-position: center center; background-image: url(../img/pattern-5.png); background-size: 70px 70px; } /* Colours /* ********************************************************************* */ .bg-teal H1, .bg-teal H2, .bg-teal H3, .bg-teal H4, .bg-teal H5, .bg-teal H6, #page .bg-teal P, #page .bg-teal A { color: #FFFFFF; } .bg-pattern H1, .bg-pattern H2, .bg-pattern H3, .bg-pattern H4, .bg-pattern H5, .bg-pattern H6, #page .bg-pattern P, #page .bg-pattern A { color: #FFFFFF; } /* COLUMNS ************************************************************* */ DIV.row { padding: 20px 0 20px 0; } DIV.row.narrow .width { width: 960px; } DIV.full_col { padding: 0px 20px 0px 20px; } DIV.half_col { float: left; width: 50%; padding: 0px 20px 0px 20px; } DIV.third_col { float: left; width: 33.3333%; padding: 0px 20px 0px 20px; } DIV.twothirds_col { float: left; width: 66.6666%; padding: 0px 20px 0px 20px; } DIV.quarter_col { float: left; width: 25%; padding: 0px 20px 0px 20px; } DIV.threequarters_col { float: left; width: 75%; padding: 0px 20px 0px 20px; } DIV.fifth_col { float: left; width: 20%; padding: 0px 20px 0px 20px; } /* ********************************************************************* */ /* TOP /* ********************************************************************* */ #top { position: fixed; height: 41px; width: 100%; z-index: 999; font-size: 16px; line-height: 21px; color: #5A5A5A; font-weight: 300; background-color: #FFFFFF; } #top .left { position: absolute; top: 0; left: 0; } #top .right { position: absolute; top: 0; right: 0; } #top #menutab { display: none; } #top A { display: inline-block; color: #5A5A5A; text-decoration: none; padding: 10px 10px 0 10px; } #top A:HOVER { color: #222; } #top .button { display: inline-block; box-sizing: border-box; padding: 10px 75px; margin: 0; border: none; text-decoration: none; text-transform: uppercase; } #top .button:HOVER { background-color: #222222; color: #FFF; } #top .button.burg { background-color: #670F30; color: #FFF; white-space: normal; word-wrap: break-word; display: flex; justify-content: flex-end; width: 100%;} #top .button.burg:HOVER { background-color: #222222; color: #FFF; white-space: normal; word-wrap: break-word; } #top .button.teal { background-color: #0e7071; color: #FFF; } #top .button.teal:HOVER { background-color: #222222; color: #FFF; } #top .not-mob { display: inline-block; } #top .mob { display: flex; } /* ********************************************************************* */ /* HEAD /* ********************************************************************* */ #head { position: fixed; top: 41px; width: 100%; z-index: 999; background-color: #FFFFFF; } #head .logo { width: 350px; height: auto; margin: 0 auto 0 auto; padding: 20px 0; } #head .logo IMG { display: block; width: 100%; height: auto; } #head #menu { position: relative; border-top: solid 1px #d1d1d1; border-bottom: solid 1px #d1d1d1; } #head #menu UL { display: table; padding: 0; margin: 0 auto 0 auto; list-style: none; } #head #menu UL LI { display: table-cell; } #head #menu UL LI A { display: block; font-size: 17px; padding: 10px 40px 10px 40px; line-height: 21px; color: #5A5A5A; font-weight: 300; text-decoration: none; text-transform: uppercase; } #head #menu UL LI A:HOVER { color: #222; } #head #menu UL LI .rmore { display: none; } #head #menu UL LI UL { position: absolute; display: block; display: none; background-color: #eeeeee; } #head #menu UL LI UL LI { display: block; } #head #menu UL LI UL LI A { padding: 20px 40px 20px 40px; border-top: solid 1px #d1d1d1; } #head #menu UL LI UL LI A:HOVER { background-color: #D1D1D1; } /* ********************************************************************* */ /* PAGE /* ********************************************************************* */ #page { padding: 150px 0 0 0; } #page P { font-size: 16px; line-height: 21px; color: #5a5a5a; } #page .small { font-size: 12px; line-height: 16px; color: #666; } #page UL LI { font-size: 16px; line-height: 21px; color: #5a5a5a; } #page OL LI { font-size: 16px; line-height: 21px; color: #5a5a5a; } #page A { color: #000; } #page A:HOVER { text-decoration: none; } #page .button { display: inline-block; box-sizing: border-box; padding: 10px 30px; margin: 3px; border: none; background-color: #23333A; color: #FFF; text-decoration: none; text-transform: uppercase; } #page .button:HOVER { background-color: #111111; } #page .button.bg-teal { background-color: #1E7372; } #page .button.bg-burg { background-color: #670F30; } #page .button.bg-blue { background-color: #101C3A; } /* Billboard /* ********************************************************************* */ #billboard1 {} #billboard1 .tile { position: relative; height: 570px; width: 100%; } #billboard1 .tile .overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,0.4); } #billboard1 .tile .content { position: absolute; right: 0; bottom: 50px; left: 0; } #billboard1 H1, #billboard1 H2, #billboard1 H3, #billboard1 H4, #billboard1 H5 { font-family: 'madelyn_customregular', sans-serif; color: #FFF; } #billboard1 H2 { font-size: 150px; line-height: 130px; margin: 40px 0 50px 0; text-transform: none; } #billboard1 P { color: #FFF; font-size: 18px; } #billboard1 A { color: #FFF; text-decoration: none; } #billboard2 {} #billboard2 .tile { position: relative; height: 300px; width: 100%; } /* News Block /* ********************************************************************* */ #page .news-block { position: relative; } #page .news-block .content { position: absolute; z-index: 900; top: 0; right: 0; bottom: 0; left: 0; padding: 20px; background-color: rgba(0,0,0,0.4); text-align: center; } #page .news-block .content:HOVER { background-color: #670F30; background-repeat: repeat; background-position: center center; background-image: url(../img/pattern-5.png); background-size: 35px 35px; } #page .news-block .image { position: relative; z-index: 800; } #page .news-block H3, #page .news-block P, #page .news-block A { color: #FFF; } #page .news-block H4 { font-family: 'madelyn_customregular', sans-serif; font-size: 50px; line-height: 50px; margin: 0 0 0 0; text-transform: none; text-align: center; } /* Gallery /* ********************************************************************* */ #page .gallery-slideshow { position: relative; padding: 0 0 20px 0; } #page .gallery-prev { position: absolute; top: 50%; left: 0; margin-left: 0; font-size: 30px; line-height: 40px; width: 40px; text-align: center; background-color: #670F30; color: #FFF; cursor: pointer; z-index: 999; } #page .gallery-next { position: absolute; top: 50%; right: 0; margin-right: 0; font-size: 30px; line-height: 40px; width: 40px; text-align: center; background-color: #670F30; color: #FFF; cursor: pointer; z-index: 999; } #page .gallery-slideshow .tile { width: 100%; } /* CTA Block /* ********************************************************************* */ #page .cta-block { text-align: center; } #page .cta-block H4 { margin: 15px 5px; } /* Forms /* ********************************************************************* */ #page .form {} #page .form DIV { color: #777; } #page .form .freeform-row {} #page .form .freeform-column {} #page .form LABEL { display: none; color: #777; } #page .form LABEL.freeform-input-only-label { display: block; } #page .form INPUT[type="text"], #page .form INPUT[type="email"] { box-sizing: border-box; font-size: 15px; color: #777; border: solid 1px #AAA; background-color: #EEE; padding: 7px; } #page .form TEXTAREA { box-sizing: border-box; font-size: 15px; color: #777; border: solid 1px #AAA; background-color: #EEE; padding: 7px; } #page .form SELECT { box-sizing: border-box; font-size: 15px; color: #777; border: solid 1px #AAA; background-color: #EEE; padding: 7px; } #page .form BUTTON[type="submit"] { box-sizing: border-box; padding: 8px 15px; border: none; background-color: #670F30; color: #FFF; font-size: 15px; text-decoration: none; } .popup-close { position: fixed; z-index: 999; top: 10px; right: 10px; font-size: 35px; color: #999999; cursor: pointer; } /* FAQs /* ********************************************************************* */ #page .faqs {} /* Testimonials /* ********************************************************************* */ #page .testimonials { position: relative; } #page .testimonials H2 { font-family: 'madelyn_customregular', sans-serif; font-size: 80px; line-height: 65px; margin: 30px 0 0 0; text-transform: none; text-align: center; } #page .testimonials .news-prev { position: absolute; top: 50%; left: 0; margin-top: -20px; margin-left: 20px; font-size: 30px; line-height: 40px; width: 40px; text-align: center; color: #FFF; cursor: pointer; z-index: 999; } #page .testimonials .news-next { position: absolute; top: 50%; right: 0; margin-top: -20px; margin-right: 20px; font-size: 30px; line-height: 40px; width: 40px; text-align: center; color: #FFF; cursor: pointer; z-index: 999; } #page .testimonials ARTICLE { width: 100%; padding: 50px 70px; } /* ********************************************************************* */ /* FOOT /* ********************************************************************* */ #foot { position: relative; background-color: #595B60; padding: 20px 0 60px 0; } #foot H6 { font-size: 16px; line-height: 21px; font-weight: 300; color: #FFFFFF; text-transform: uppercase; margin: 15px 0; } #foot P { color: #FFFFFF; font-size: 14px; line-height: 21px; font-weight: 300; } #foot UL, OL { margin: 15px 0; padding: 0; list-style: none; } #foot UL LI, OL LI { color: #FFFFFF; font-size: 14px; line-height: 21px; font-weight: 300; } #foot A { color: #FFFFFF; text-decoration: none; } #foot A:HOVER { text-decoration: underline; } /* ********************************************************************* */ /* ***** RESPONSIVE **************************************************** */ /* ********************************************************************* */ @media screen and (max-width: 1620px) { .width { width: 1200px; } } @media screen and (max-width: 1220px) { .width { width: 960px; } } @media screen and (max-width: 980px) { .width { width: 100%; } /* COLUMNS ************************************************************* */ DIV.quarter_col { float: left; width: 50%; padding: 20px 20px 20px 20px; } DIV.row.narrow .width { width: 100%; } #top #menutab { display: flex; cursor: pointer; padding: 10px; } /* Adjust .top .left and .top .right for mobile */ #top .left, #top .right { height: auto; } #top .left { display: flex; width: 50%; /* Set width to 30% for .left */ float: left; padding: 0px; /* Add padding for some spacing */ } #top .right { width: 50%; /* Set width to 70% for .right */ float: left; padding: 0px; /* Add padding to make the text fit better */ } /* Ensure text in the .right section adjusts responsively */ #top .right { display: flex; white-space: normal; flex-wrap: wrap; font-size: 10px; /* Make sure the text size fits */ } #top .button.burg {width: 100%; text-align: center; } #head .logo { width: 250px; padding: 15px 0; } #head #menu { position: absolute; top: 74px; left: 0; right: 0; display: block; border: none; } #head #menu UL { display: block; background-color: #E1E1E1; } #head #menu UL LI { position: relative; display: block; } #head #menu UL LI A { padding: 10px; font-size: 16px; text-align: center; border-top: solid 1px #FFF; } #head #menu UL LI A:HOVER { background-color: #670F30; color: #FFF; } #head #menu UL LI .rmore { position: absolute; top: 1px; right: 0; display: block; width: 42px; cursor: pointer; color: #FFFFFF; font-size: 20px; line-height: 20px; background-color: #5a5a5a; padding: 10px 0; text-align: center; } #head #menu UL LI .rmore I { display: none; } #head #menu UL LI .rmore I.on { display: inline; } #head #menu UL LI UL { position: relative; margin: 0; padding: 0; display: block; display: none; background-color: #d1d1d1; border: none; } #head #menu UL LI UL LI {} #head #menu UL LI UL LI A { padding: 10px; border-top: solid 1px #FFF; } #head #menu UL LI UL LI A:HOVER { background-color: #670F30; color: #FFF; } #page { padding: 110px 0 0 0; } } @media screen and (max-width: 780px) { /* COLUMNS ************************************************************* */ DIV.full_col {} DIV.half_col { float: none; width: 100%; } DIV.third_col { float: none; width: 100%; } DIV.twothirds_col { float: none; width: 100%; } DIV.quarter_col { float: left; width: 50%; padding: 20px 20px 20px 20px; } DIV.threequarters_col { float: none; width: 100%; } DIV.fifth_col { float: left; width: 33.3333%; } /* Billboard /* ********************************************************************* */ #billboard1 {} #billboard1 .tile { height: 450px; } #billboard1 .tile .overlay {} #billboard1 .tile .content { bottom: 30px; } #billboard1 H2 { font-size: 100px; line-height: 90px; margin: 20px 0 25px 0; } #billboard1 P { color: #FFF; font-size: 18px; } /* News Block /* ********************************************************************* */ #page .news-block P { display: none; } } @media screen and (max-width: 600px) { H1 { font-size: 32px; line-height: 37px; } H2 { font-size: 28px; line-height: 33px; } H3 { font-size: 26px; line-height: 31px; } H4 { font-size: 24px; line-height: 29px; } H5 { font-size: 20px; line-height: 25px; } H6 { font-size: 16px; line-height: 21px; } /* COLUMNS ************************************************************* */ DIV.full_col {} DIV.half_col { float: none; width: 100%; } DIV.third_col { float: none; width: 100%; } DIV.twothirds_col { float: none; width: 100%; } DIV.quarter_col { float: left; width: 50%; padding: 20px 20px 20px 20px; } DIV.threequarters_col { float: none; width: 100%; } DIV.fifth_col { float: left; width: 50%; } #top .left { font-size: 21px; line-height: 21px; } #top .not-mob { display: none; } #top .mob { display: flex; } /* Billboard /* ********************************************************************* */ #billboard1 {} #billboard1 .tile { height: 450px; } #billboard1 .tile .overlay {} #billboard1 .tile .content { bottom: 30px; } #billboard1 H2 { font-size: 70px; line-height: 65px; margin: 20px 0 25px 0; } #billboard1 P { color: #FFF; font-size: 18px; } /* News Block /* ********************************************************************* */ #page .news-block {} #page .news-block .image {} } @media screen and (max-width: 540px) { /* COLUMNS ************************************************************* */ DIV.full_col {} DIV.half_col { float: none; width: 100%; } DIV.third_col { float: none; width: 100%; } DIV.twothirds_col { float: none; width: 100%; } DIV.quarter_col { float: left; width: 50%; padding: 20px 20px 20px 20px; } DIV.threequarters_col { float: none; width: 100%; } DIV.fifth_col { float: none; width: 100%; } #page .button { display: block; text-align: center; } }