/*	This is the master css of the website where all css code should go.
        NOTE: If you are using individual css for each page this should only contain the items you want to be constant throughout the website.
*/

@import url(https://fonts.googleapis.com/css?family=Limelight|Raleway:400,700|Cantora+One|Just+Another+Hand|Parisienne&subset=latin,latin-ext);
@font-face {
    font-family: 'rawfont';
    src: url('/styles/stylesets/201901milestone/fonts/rawfont.woff2') format('woff2'),
    url('/styles/stylesets/201901milestone/fonts/rawfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
body{font-family: 'Raleway', sans-serif; font-size:1.1em; padding: 0px; margin:0px; width:100%; color:rgba(64,42,32,1);}
img{border:0px; max-width:100%; height:auto !important;}
img[src*="gstatic.com/"], img[src*="googleapis.com/"] {max-width: none;}
a:link, a:visited{text-decoration:none; color:rgba(154,109,88,1);}
a:hover, a:active{text-decoration:none; color:rgba(64,42,32,1);}
h1, h2, h3, h4, h5, h6, .title, .boxtitle, .boxtitledefault{margin-bottom:5px;font-family: 'Cantora One', sans-serif; color: #402a20;}
.title, .boxtitle, .boxtitledefault{font-size:2.5em;}

h1{font-size:4em;margin: 20px 0 20px 0 !important;text-align:center;}
h2{font-size:1.8em;margin: 10px 0 10px !important;}
h3{font-size:1.2em;}

.aaNavFont{font-family: 'Just Another Hand', cursive; font-size: 2.3em;letter-spacing: 0.05em; text-shadow:2px 2px 0 rgba(0,0,0,0.8);}
.eeNavFont{font-family: 'Playfair Display', serif;font-size: 1.6em; text-shadow:2px 2px 0 rgba(0,0,0,0.8);}
.ffNavFont{font-family: 'Parisienne', cursive;font-size: 1.8em; text-shadow:2px 2px 0 rgba(0,0,0,0.8);}
.ssNavFont{font-family: 'Limelight', cursive;font-size: 1.6em; text-shadow:2px 2px 0 rgba(0,0,0,0.8);}
.rrNavFont{font-family: 'rawfont', cursive;font-size: 1.8em; text-shadow:2px 2px 0 rgba(0,0,0,0.8);}
.smallsNavFont{font-family: 'Cantora One', sans-serif;font-size: 1.8em; text-shadow:2px 2px 0 rgba(0,0,0,0.8);}

#container{width:100%; margin:0; padding:0;}
#header{width:100%; margin:0 auto; padding:0; background: #ffffff;}
#header #hdrWrap{max-width: 1200px;padding:10px;margin:auto;text-align: center; display: flex; justify-content: space-around; align-items: center;}
#header #hdrLogo{}
#header #hdrLogo #logoimg{}
#header #hdrLogo #logoimg img{width:200px;}
#header #logotext{letter-spacing:0.1em;font-size:1.4em;margin:auto; color: rgb(64, 42, 32);}
#header .social-media{display:inline-block;vertical-align: middle;}
#header .social-media>.icons>.icon{text-align:center;display:inline-block;}
#header .social-media>.icons>.icon>a{padding: 5px 10px;display:block;border:1px dashed rgba(88,101,58,0);transition:0.3s ease-in-out;}
#header .social-media>.icons>.icon>a:hover{opacity: 0.8;border:1px dashed rgba(88,101,58,1);}

#header #navTopBar{background:rgba(64,42,32,1);}
#header #navTopBar>ul{display:flex;justify-content:space-around;padding:0;margin:auto;max-width:1200px;height: 55px;}
#header #navTopBar>ul>li{display:inline-block;padding:0;margin:0;list-style:none;vertical-align: middle;flex-grow: 1;}
#header #navTopBar>ul>li>a{display:block;margin:0;text-align: center;line-height:55px; height: 55px; overflow: hidden;}
#header #navTopBar>ul>li>a .normal{display:block;margin-top:0;transition:0.3s ease-in-out;color:#fff;height: 55px;position: relative;overflow:hidden;}
#header #navTopBar>ul>li>a .hover{display:block;margin-top:-55px;transition:0.3s ease-in-out;color:#fff;background:#8A5A47;height: 55px;position: relative;z-index: 1;overflow:hidden;}
#header #navTopBar>ul>li>a.active .hover,#header #navTopBar>ul>li>a:hover .hover{margin-top:0px;}
#header #navTopBar>ul>li>a:hover .normal{margin-top:-55px;}
#header #navTopBar>ul>li>a:hover,#header #navTopBar>ul>li>a:active,#header #navTopBar>ul>li>a.hover{text-decoration:none;}
#header #navTopBar>ul>li>a .fontAdjust{margin-top:2px;}

#header #navBar{font-size:1em; background: #58653a; overflow: hidden;}
#header #navBar.mobile{height:50px; overflow:hidden;}
#header #navBar #navWrap{max-width: 1200px;margin:auto;}
#header #navBar .navIcon{display:none;}
#header #navBar.mobile .navIcon{display:inline-block; line-height:50px;height:50px;vertical-align: middle;padding:0px 20px;transition:0.2s linear;color:#ffffff;cursor:pointer;font-size:2em;}
#header #navBar.mobile .navIcon:hover{background:#58653a; color: #ffffff;}
#header #navBar.mobile #navWrap>ul>li{display:block;text-align: left;}
#header #navBar.mobile #navWrap>ul{height: auto;}

#header #navBar #navWrap>ul{display:block;margin:auto;max-width:1200px;text-align: center;padding:0;text-align: center; height: 70px;}
#header #navBar #navWrap>ul>li{display:inline-block;list-style: none;margin:0;padding:0;}
#header #navBar #navWrap>ul>li>a{display:block;margin:0;font-size:1em;line-height:70px;height:70px;}
#header #navBar #navWrap>ul>li>a:link, #header #navBar #navWrap>ul>li>a:visited{display:inline-block;line-height:70px;height:70px;vertical-align: middle;padding:0px 20px;transition:0.2s linear;color:#ffffff;}
#header #navBar #navWrap>ul>li>a:hover{color:#ffffff;background: #7a8662; transform: scale(0.8);}
#header #navBar #navWrap>ul>li>a:active{color:#ffffff;background: #7a8662; transform: scale(0.8);}

/*#header #navBar #navWrap>ul>li>a .normal{display:block;margin-top:0;height:50px;transition:0.3s ease-in-out;color:rgba(64,42,32,1);position: relative;padding:0 20px;}
#header #navBar #navWrap>ul>li>a .hover{height:50px;margin-top:0;transition:0.3s ease-in-out;background: #58653a; position: relative;color:#ffffff;padding:0 20px;}
#header #navBar #navWrap>ul>li>a.active .hover,#header #navBar #navWrap>ul>li>a:hover .hover{margin-top:-50px;}
#header #navBar #navWrap>ul>li>aa:hover,#top-nav>ul>li>a:active{text-decoration:none;}*/

.clickThroughBtn{display:block;text-align: center;margin: 30px 0 30px 0;}
.clickThroughBtn a{display:inline-block;background: #58653a;color:#ffffff;transition:0.3s ease-in-out; border:1px dashed rgba(88,101,58,0); font-size: 1.8em; padding: 10px;}
.clickThroughBtn a:link, .clickThroughBtn a:visited{color:#ffffff;}
.clickThroughBtn a:hover,.clickThroughBtn a:active{color:#58653a; background: none; border:1px dashed rgba(88,101,58,1);}

#uparrowrap{z-index: 1001; margin: 10px 0 0 -25px; left: 50%; position: fixed; bottom: 0;}
#uparrowrap>a:link, #uparrowrap>a:visited{text-decoration: none; display:inline-block; font-size: 2.2em; border-bottom: none !important; border-left: 1px solid #ffffff; border-right: 1px solid #ffffff; border-top: 1px solid #ffffff; border-radius: 5px 5px 0 0;color: #ffffff !important; background: #9a6d58 !important;  transition: ease-in 0.3s; padding: 5px; line-height: 1.2em; height: 1.2em;  }
#uparrowrap>a:hover, #uparrowrap>a:active{color: #ffffff !important; background: #58653a !important;text-decoration: none; }

.secBox1{margin: 30px auto 30px; background: #ddd1cc; color: #402a20; padding: 40px 20px;}
.secBox2{margin: 40px auto; padding: 0 20px; }
.secBox3{margin: 30px auto 30px; padding: 40px 0; background: #ddd1cc; color: #402a20;}
.secBox4{margin: 30px auto 30px; padding: 40px 0;}
.secBox5{padding: 20px 0;background:#58653a;color:#fff;}
.secBox5 h1, .secBox5 h2, .secBox5 h3, .secBox5 h4 {color:#fff;}
.secBox1 .textBox,.secBox2 .textBox, .secBox3 .textBox, .secBox4 .textBox, .secBox5 .textBox{max-width: 1200px; margin: auto;}

.textBoxContentWrap{display: flex; flex-wrap: wrap; margin: 20px 0 0 0;justify-content: space-around;}
.textBoxContentWrap .textBoxContentHalf{width:48%;}


.commentSec{max-width: 900px;text-align:center;margin:30px auto;font-style:italic;font-size:0.9em;color:#58653a;border:2px dashed #58653a;padding:10px;width:90%;}
.commentSec1{}
.commentSec2{}
.commentSec3{color:rgba(154,109,88,1);border-color:rgba(154,109,88,1);padding:10px !important;}

#ftrDetailsWrap{display: flex; justify-content: center; align-items: flex-start; margin: 20px auto 20px; max-width: 1200px; margin: auto; flex-wrap: wrap;}
#ftrDetails{margin: 20px 5px 20px 5px;}
#ftrDetails a{display: flex; justify-content: center; align-items: center; text-decoration:none !important;}
#ftrDetailImg{}
#ftrDetailText{margin: 0 10px;}
#ftrDetailText1{font-weight: bold; margin: 0 0 5px 0; font-size:1.1em;}
#ftrDetailText2{font-size: 0.8em;}

#quicklinks{background:#efefef; border:1px solid #cfcfcf;}
#quicklinks ul, #quicklinks li{list-style:none; display:inline;}
#contentmask{max-width:100%; height:100%; margin: auto; }
#contentbox{max-width:100%; margin:0 auto;}
#sidebar{max-width:100%; margin:0 auto;}
#footer-img{background:url('/styles/stylesets/201901milestone/images/Milestone-Kicthens-Savanna-Silhouette.png') no-repeat center top; margin: 30px auto 0; color:rgba(255,255,255,1);width:100%;height:169px;}
#footer{width:100%;margin:0;padding: 20px 0 35px 0;background:rgba(64,42,32,1);color: rgba(154,109,88,1);}
#footer a:link, #footer a:visited{text-decoration:none; color:rgba(154,109,88,0.8);}
#footer a:hover, #footer a:active{text-decoration:underline; color:rgba(154,109,88,1);}
#footer>#copytext{text-align:center; min-height:3em; font-size:0.8em;}
#footer>#expertise{max-width:1200px;margin:auto;text-align:center;}
#footer>#expertise>div{font-size:1.3em;}
#footer>#expertise>ul{margin:0;padding:0;display:inline-block;width:20%;vertical-align: top;}
#footer>#expertise>ul>li{margin:0;padding:0;list-style: none;font-size: 0.9em;line-height: 1.5em;}
/*#footer .ftrComment{text-align: center;}*/
#footer>div{padding:10px 0;}
#footer .ftrbtn{text-align: center;margin: 0 0 20px;}
#footer .ftrbtn a{display:inline-block;background:rgba(154,109,88,1);color:rgba(255,255,255,1);transition:0.3s ease-in-out;  font-size: 1.3em; padding: 10px;}
#footer .ftrbtn a:link,#footer .ftrbtn a:visited{color:rgba(255,255,255,1);}
#footer .ftrbtn a:hover,#footer .ftrbtn a:active{background:rgba(255,255,255,1);color:rgba(64,42,32,1);text-decoration: none;}

.floatingImage{float:right;margin: 0 10px;}

.photogallery .fancybox{border:none !important;background:none !important;border-radius:0 !important;box-shadow:none !important;padding:0 !important;margin:0 2px !important;opacity:1;transition:0.4s ease-in-out;}
.photogallery .fancybox:hover{opacity:0.6;}

.fancybox-opened .fancybox-skin{box-shadow:none !important;}
.fancybox-skin{background:none !important;}
.fancybox-outer{box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;}

.paintDesc{padding:5px 50px; margin:auto;text-align:center;}

.resLwr1200Msg{display:none;}

.imgDscrp{text-align: center;font-style: italic;font-size: 0.9em;}
.bdr-brown{border:2px solid rgba(64,42,32,1);}

.clearboth{clear:both;}
.list_row1{padding:5px;border-bottom:1px solid rgba(0,0,0,0.1); background-color:rgba(200,200,200,0.1); border-top:1px solid rgba(0,0,0,0.1);transition: 0.3s ease-in-out;}
.list_row2{padding:5px;background-color:rgba(250,250,250,0.1);transition: 0.3s ease-in-out;}
.highlight, .list_row1:hover, .list_row2:hover{background-color:rgba(255,255,255,0.9);}
form{ background: #fff; border: solid 1px #402a20; margin:2px;padding: 20px;}
.buttons{display:inline-block;padding:8px;font-size:1em;line-height:1.5em;color:#303030;text-align:left;background-color:#e3e5de;border:none;margin:1px;box-sizing: border-box;width: 100%;}
input[type="text"]{cursor:text;}
input[type="submit"]{cursor:pointer; padding: 8px 12px; margin: 4px 10px;background: #58653A; color: #fff;width: fit-content;}
input[type="reset"]{cursor:pointer; padding: 8px 12px; margin: 4px 10px;background: #58653A; color: #fff;width: fit-content;}
label.form_control input[type="checkbox"]{
    cursor:pointer;
    appearance: none;
    background-color: #e3e5de;
    margin: 0;
    font: inherit;
    color: currentColor;
    width: 1.15em;
    height: 1.15em;
    border: none;
    transform: translateY(-0.075em);
    display: grid;
    place-content: center;
}
label.form_control input[type="checkbox"]::before {
    content: "";
    width: 0.65em;
    height: 0.65em;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em #ffffff;
    transform-origin: bottom left;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

label.form_control input[type="checkbox"]:checked {
    background-color: #58653A;
}

label.form_control input[type="checkbox"]:checked::before {
    transform: scale(1);
}
label.form_control input[type="checkbox"]:disabled {
    color: #959495;
    cursor: not-allowed;
}
label.form_control input[type="checkbox"]:disabled::before {
    box-shadow: inset 1em 1em #58653A;
}
label.form_control {
    display: grid;
    grid-template-columns: 1em auto;
    gap: 0.5em;
}
label.form_control {
    margin-top: 0.3em;
}

label.form_control input[type="radio"]{
    cursor:pointer;
    appearance: none;
    background-color: #e3e5de;
    margin: 0;
    font: inherit;
    color: currentColor;
    width: 1.15em;
    height: 1.15em;
    border: none;
    transform: translateY(-0.075em);
    display: grid;
    place-content: center;
    border-radius: 100%;
}
label.form_control input[type="radio"]::before {
    content: "";
    width: 0.65em;
    height: 0.65em;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em #ffffff;
    border-radius: 100%;
}

label.form_control input[type="radio"]:checked {
    background-color: #58653A;
}

label.form_control input[type="radio"]:checked::before {
    transform: scale(1);
}
label.form_control input[type="radio"]:disabled {
    color: #959495;
    cursor: not-allowed;
}
label.form_control input[type="radio"]:disabled::before {
    box-shadow: inset 1em 1em #58653A;
}

textarea{cursor:text;}
select{cursor:pointer;}

.desktopOnly{
    display:block;
}

.mobileOnly{
    display:none;
}

.screenshotBorder img{
    border: 1px solid #402a20;
}

@media screen and (max-width:1200px){

}

@media screen and (max-width:1100px){
    .resLwr1200Msg{display:block;text-align: center;font-weight:bold; margin: 0 0 50px 0;}
    #contentmask{width:auto;padding:0 10px;}
}

@media screen and (max-width:1000px){
    #map-canvas{ width: 90% !important; margin:0 !important;}
    #header #logotext{font-size:1.2em;}
    .floatingImage{max-width:400px;}
}

@media screen and (max-width:900px){
    #header #hdrWrap{display: block;}
    #header #hdrLogo #logoimg img{width:300px;}
    #header #logotext{font-size:1em;}
    #header .social-media{margin: 5px auto 5px;}
    .aaNavFont{font-size: 2em;}
    .eeNavFont{font-size: 1.4em;}
    .ffNavFont{font-size: 1.7em;}
    .ssNavFont{font-size: 1.4em;}
    .rrNavFont{font-size: 1.7em;}
    .smallsNavFont{font-size: 1.6em;}
}

@media screen and (max-width:800px){
    h1{font-size:3.4em;}
    #ddb_left_column{float:none !important;width:auto !important;}
    #ddb_right_column{float:none !important;width:auto !important;}
    .aaNavFont{font-size: 1.8em;}
    .eeNavFont{font-size: 1.2em;}
    .ffNavFont{font-size: 1.5em;}
    .ssNavFont{font-size: 1.2em;}
    .rrNavFont{font-size: 1.5em;}
    .smallsNavFont{font-size: 1.4em;}
    .floatingImage{max-width:350px;}
    .clickThroughBtn{margin: 10px auto 10px;}
    .clickThroughBtn a{font-size: 1.2em;}
    .secBox3{padding: 40px 20px;}
    .textBoxContentWrap .textBoxContentHalf{width: 100%;}
}

@media screen and (max-width:700px){
    .floatingImage{float:none !important;max-width:500px; text-align:center;}
    .aaNavFont{font-size: 1.6em;}
    .eeNavFont{font-size: 1.1em;}
    .ffNavFont{font-size: 1.4em;}
    .ssNavFont{font-size: 1em;}
    .rrNavFont{font-size: 1.4em;}
    .smallsNavFont{font-size: 1.2em;}
    .enquiryform>div>div{float:none !important;width:auto !important;display: block;}
    #uparrowrap{display: none;}
}

@media screen and (max-width:600px){
    h1{font-size:2em;}
    #map-canvas{ width: 80% !important; margin:0 !important;}
    .aaNavFont{font-size: 1.2em;}
    .eeNavFont{font-size: 0.8em;}
    .ffNavFont{font-size: 1em;}
    .ssNavFont{font-size: 0.8em;}
    .rrNavFont{font-size: 1em;}
    .smallsNavFont{font-size: 0.9em;}
    .paintDesc{padding:5px 40px;}
    #ftrDetailsWrap{display: block; padding: 10px;}
    #ftrDetails a{justify-content: flex-start;}
    #ftrDetailText{margin: 0 20px;}


    .desktopOnly{
        display:none;
    }

    .mobileOnly{
        display:block;
    }

    .noSpace{
        padding:0 !important;
        margin:0 !important;
    }

}

@media screen and (max-width:500px){
    #header #navTopBar>ul{flex-wrap: wrap; height: 80px;justify-content: center;}
    #header #navTopBar>ul>li{flex-basis: 33%; flex-grow: 0;}
    #header #navTopBar>ul>li>a{line-height: 40px;height: 40px;}
    #header #navTopBar>ul>li>a .normal{height: 40px;}
    #header #navTopBar>ul>li>a .hover{margin-top: -40px; height: 40px;}
    #header #navTopBar>ul>li>a:hover .normal{margin-top:-40px;}
}

@media screen and (max-width:480px){

}

@media screen and (max-width:400px){
}

@media screen and (max-width:360px){

    .paintDesc{padding:5px 20px;}
}