/* PARIS Purchase: http://themeforest.net/user/josweb 01. GENERAL STYLING 03. REVOLUTION SLIDER 04. ABOUT PAGE - HOVER BLOCKS, TOOL TIPS, MODAL BOX & STATS 05. TEAM SECTION - QUOTES/TESTIMONIALS & SINGLE TEAM SKILL BARS 06: SERVICES PAGE 07: CONTACT PAGE 08. FOOTER 09. BLOG 10. PRICING TABLES 11. CAROUSEL, ACCORDIAN & SEARCH 12. ZOOM PLUGIN SECTIONS 1: PROJECTS, PORTFOLIO & CLIENTS 2: LATEST WORK & CAROUSEL 3: BLOG & PAGINATION 13. CSS3 ANIMATIONS 14. PARALLAX /* ##: HEADER & LOGO & TOPPHOT 15. MEDIA QUERIES */ /*-----------------------------------------------------------------------------------*/ /* 01: GENERAL STYLING /*-----------------------------------------------------------------------------------*/ @font-face { font-family: 'Parisian'; src: url('../font/PARISNN.ttf'); } @font-face { font-family: 'Montserrat'; src: url('../font/Montserrat/Montserrat-Italic-VariableFont_wght.ttf'); src: url('../font/Montserrat/Montserrat-VariableFont_wght.ttf'); } @font-face { font-family: 'LibreBaskerville'; src: url('../font/LibreBaskerville/LibreBaskerville-Bold.ttf'); src: url('../font/LibreBaskerville/LibreBaskerville-Regular.ttf'); } .top{ width: 100%; color:beige; height:200px; text-align:left; padding: 50px 0 50px 0; } .top a{color:gold;} body { margin: 0; padding: 0; font: 17px/32px 'Lato', sans-serif; color: #1C1208; background: #FCFCFC; font-weight: 400; -webkit-backface-visibility: hidden; text-rendering: optimizeLegibility; overflow-x: hidden; } p.rate {color: #C98E4A; line-height:28px;font-weight:700;margin:5px 0 0 10px;} p {font-size:17px; font-weight:500; color: #161616;} p.center {text-align:center;} ul {list-style: none; list-style-image: url('../graphics/arrow-blck.png');list-style-position:inside;color:#000;} ul.icon { font-size: 17px;font-weight:400;} li {line-height: 28px;} .img {opacity: 1.0;} img.enquiries {height: auto;} img.captcha {width:5.0625rem;height:1.375rem;} /*img.responsive { width: 100%;height:auto; display: block; margin: auto; }*/ /* align-items: center; Vertically centers content */ img { width: 100%; height: auto; display: block; /* Removes unwanted spacing */ /* vertical-align: middle;*/ opacity: 1.0; } @media (min-width: 768px) { img { max-width: 50%; /* Smaller on larger screens */ } } iframe { border: 0; } div.ppt, .pp_description { display: none !important; } blockquote { border-left: 4px solid #C98E4A; color:#000; padding: 10px; font-size:18px;} .highlight { background: #707070; color: #E9E6E1; padding: 3px 4px; } .alert-success { background-color: #313941; color: #F6F7F0; } .alert-danger, .alert-error { background-color: #999; color: #F6F7F0; } .alert-info { background-color: #707070; color: #f4f4f4; } .dropcap { font-weight: 700; display: block; float: left; font-size: 42px; padding: 0; margin: 0 6px 0 -3px; color: #565553; } #object, #object1,#object3 { visibility: hidden; } /**** ICONS ****/ .icons{list-style-type:none;margin:0} .icons li [class^="icon-"],.icons li [class*=" icon-"]{display:inline-block;width:1.2857142857142858em; margin-right:4px; line-height:24px;} .line-icon:before{ font-family: 'fontello'; } /**** DRIBBBLE ****/ .shotList img {width: 32.08%; padding: 0 0.5% 10px 0%; margin-left: 0px; } .shotList img:hover { opacity: 0.9; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } /**** VIDEO ****/ .vendor{ position: relative; padding: 0 0 56.25%; height: 0; margin: 0 0; } .vendor iframe { position: absolute; top:0; left: 0; width: 100%; height: 100%; } .soundcloud{ width: 100%; } /**** LINKS ****/ a:focus { outline: 0; } a.man:link {color: black;} a.man:link {color: black;} a.man:visited {color: #000;} a.man:hover, a:active { color: #000; } a.int:link {color: #000;font-weight:400;} a.int:visited {color: #000;font-weight:400;} a.int:hover, a:active { color: #000; } nav a {color:#000;} /**** TYPOGRAPHY use em for margin and padding; rem for Overall website scaling****/ /* use rem for font-size */ h1,h2,h3,h4,h5,h6 { font-weight:500; color: #0C0C0C; text-transform:none; font-family:'Montserrat', sans-serif;} h1 { font-size: 2.5rem; line-height: 2.6rem; font-weight:400; text-align: center; letter-spacing: 0.0625rem; margin:0.3125em 0 0 0;} h1.lodge {color:#000;text-align:center; font-family:'Montserrat';font-size:2em;margin:0.9375em 0.0625em 0; letter-spacing:0; font-weight:500;} h1.small { font-size: 1.125rem; line-height: 30px; font-weight: 500; text-align:center; letter-spacing: 0.0625rem; margin: 8px 0 10px 0; font-family:"Lato", sans-serif;} h1.left { font-size: 1.56rem; line-height: 37px; text-align: left; letter-spacing: 1px; margin-bottom: 20px; } h2 { font-size: 2.7rem; text-align: center; letter-spacing: 0.0625rem; font-weight:500;} h2.small { font-size: 1.5625rem; line-height: 2.75rem; text-align:center; letter-spacing: 0.0625rem; margin: 1.2rem 0 1.2rem 0; } h2.left {text-align:left;} h2.large { font-family: 'Lato', sans-serif;font-size: 2.0rem; line-height: 2.75rem; font-weight:500; text-align: left; letter-spacing: 0.0625rem; margin:1.875em 0 0 0;} h2.day_title { color: #000; font-size: 1.25rem; line-height: 1.25rem; border-bottom: 0.1875rem solid #C98E4A; padding-bottom: 0.9375rem; margin: 1.56rem 0; text-transform: none; width:100%; font-family: Montserrat, sans-serif; font-weight: 600; letter-spacing:0; text-align:center; } h3.day_title { color: #000; font-size: 1.25rem; line-height: 1.25rem; border-bottom: 0.1875rem solid #C98E4A; padding-bottom: 0.9375rem; margin: 1.56rem 0; text-transform: none; width:100%; font-family: 'Montserrat', sans-serif; font-weight: 600; letter-spacing:0; text-align:center; } h2.post_title { color: #000; font-size: 18px; text-transform: none; width:100%; font-family:'Montserrat', sans-serif; font-weight: 600; letter-spacing:0; text-align:center; line-height: normal; padding:5px 0; margin:0; background:#F5E8C7; } h3.post_title { color: #000; font-size: 1.25rem; line-height: 1.25rem; border-bottom: 0.1875rem solid #C98E4A; padding-bottom: 0.9375rem; text-transform: none; width:100%; font-family: Lato, sans-serif; font-weight: 500; letter-spacing:0; text-align:center; } h3.large { font-family: 'Lato', sans-serif;font-size: 2.0rem; line-height: 2.75rem; font-weight:500; text-align: left; letter-spacing: 0.0625rem; margin:30px 0 0 0;} h3 { font-size: 3.00rem; line-height: 30px; letter-spacing: 0.0625rem; } h3.plain {font-family:Lato,sans-serif;font-size:1.2rem;letter-spacing:normal;font-weight:600;} h3.post { font-size:1.3rem; line-height:28px; letter-spacing: 1px;text-align:center;} h4 { font-size: 2.66rem; line-height: 28px; margin-bottom: 10px; letter-spacing: 0.0625rem;} h4.small { font-size: 1rem; line-height: 28px; margin-bottom: 10px; letter-spacing: 0;} h5 { font-size: 2.66rem; line-height: 26px; margin-bottom: 10px; } h6 { font-size: 2.66rem; line-height: 26px; margin-bottom: 10px; } h3.line { font-size: 1rem; line-height: 30px; letter-spacing: 4px; border: 4px double #bbb; border-left:0;border-right:0; padding:10px 20px; font-weight: 700; text-align: center!important; display: table; margin: 0 auto!important; } /**** PADDING ****/ .pad90 { padding-top: 90px; } .pad80 { padding-top: 80px; } .pad70 { padding-top: 70px; } .pad60 { padding-top: 60px; } .pad50 { padding-top: 50px; } .pad45 { padding-top: 45px; } .pad40 { padding-top: 40px; } .pad35 { padding-top: 35px; } .pad30 { padding-top: 30px; } .pad25 { padding-top: 25px; } .pad20 { padding-top: 20px; } .pad15 { padding-top: 15px; } .pad10 { padding-top: 10px; } .pad5 { padding-top: 5px; } .pad8 { padding-top: 8px; } .pad1 { padding-top: 1px; } /**** MARGINS ****/ .marg-left5 { margin-left: 5px; } .marg-right5 { margin-right: 5px; } .marg-right15 { margin-right: 15px; } .marg-top10 { margin-top: 10px; } .marg-top30 { margin-top: 30px; } .marg-left10 { margin-left:10px; } .marg-clients { margin-top: -165px; } .marg-top20 { margin-top: 20px; } .marg-top-zero { margin-top: 0px; } .marg-top-minus5 { margin-top: -5px; } .marg-left-minus5 { margin-left: -5px; } .marg-bot40 { margin-bottom: 40px;} .marg-bot30 { margin-bottom: 30px;} .marg-bot20 { margin-bottom: 20px;} .marg-bot15 { margin-bottom: 15px;} .marg-bot10 { margin-bottom: 10px;} .marg-bot5 { margin-bottom: 5px;} i.service-icon { margin: 5px auto 25px auto!important; text-align: center!important; } /**** COLOURS ****/ .grey { color: #777; } .light-grey { color: #bbb; } .dark-grey { color: #444; } /************************************************************* dzsportfolio BUTTONS *************************************************************/ .dzsportfolio .btn-port{ border-radius: 0; border: 0 none; cursor: pointer; color: #000; display: block; margin: 8px auto 0 auto; padding:8px 30px 8px 30px; -webkit-box-shadow: none; box-shadow: none; text-shadow:none; font-weight: 500; outline: none; background:#C98E4A; font-size: 1.25rem; } .dzsportfolio .btn-port a{color:#FFF} .dzsportfolio .btn-port:hover { color:#FFF; } #myBtn { display: none; /* Hidden by default */ position: fixed; /* Fixed/sticky position */ bottom: 20px; /* Place the button at the bottom of the page */ right: 30px; /* Place the button 30px from the right */ z-index: 99; /* Make sure it does not overlap */ border: none; /* Remove borders */ outline: none; /* Remove outline */ background-color: #C98E4A; /* Set a background color */ color: white; /* Text color */ cursor: pointer; /* Add a mouse pointer on hover */ padding: 15px; /* Some padding */ border-radius: 0px; /* Rounded corners 10px;*/ font-size: 18px; /* Increase font size */ } #myBtn:hover { background-color: #555; /* Add a dark-grey background on hover */ } /************************************************************* BUTTONS *************************************************************/ /* ONE: for lodge pages */ .buttons{ margin:1.5rem auto;text-align:center;padding:0.7rem 2.0rem;border-radius: 0px;border:none;font-size:1.2rem; text-transform: none;background: #C98E4A; text-shadow: none;border:none;width:100rem;text-decoration:none; color:#FFF;font-weight:400; } a:hover.buttons{color:#000;} /*-- yes!* -->*/ /* TWO: for lodge pages */ .buttonsEnquire{ margin:1.5rem auto;display:block;clear:both; width:24rem;text-align:center;padding:0.6rem 2.0rem;border-radius: 0px;border:none;font-size:1.2rem; text-transform: none;background: #C98E4A; text-shadow: none;border:none;text-decoration:none; color:#FFF;font-weight:400; } a:link.buttonsEnquire{color:#FFF;} a:visited.buttonsEnquire{color:#FFF;} a:hover.buttonsEnquire{color:#000;} a:active.buttonsEnquire{color:#000;} /*-- yes!* -->*/ /* THREE: ALL HOME buttons */ .buttonsHome{ width:17rem; margin:1.5rem auto 1.0rem auto; padding:0.4rem 0.4rem; display:block; clear:both; border-radius:0px; border:none; text-transform: none; text-shadow: none; border:none; text-align:center; text-decoration:none; background: #C98E4A; color:#FFF; font-weight:400; font-size:1.2rem; } a:link.buttonsHome{color:#FFF;} a:visited.buttonsEnquire{color:#FFF;} a:hover.buttonsEnquire{color:#000;} a:active.buttonsEnquire{color:#000;} /* home insets ON HOME*/ .button-insets-bottom { background: #C4C4C4; color: #FFF; padding: 0; margin:0; display:block; clear:both; width:16.3125rem; width: 100%; -webkit-border-radius: 0px; border-radius: 0px; } .button-insets-top { background: #C4C4C4; color: #FFF; padding: 0; margin:0; display:block; clear:both; width:16.3125rem; width: 100%; -webkit-border-radius: 0px; border-radius: 0px; font-size: 1.25rem; font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif; text-decoration: none; vertical-align: middle; text-align: center; } .button-insets:link {color:#000;} .button-insets:hover { text-decoration:none; } .button-insets:active { background: #378b21; } /* // button-insets ON HOME end*/ /* FOR button-sets on homeREAD MORE*/ .button-sets { background: #C98E4A; color: #FFFFFF; padding: 0.625rem; margin:0; display:block; clear:both; width:16.3125rem; width: 100%; -webkit-border-radius: 0px; border-radius: 0px; font-size: 1.25rem; font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif; text-decoration: none; vertical-align: middle; text-align: center; } .button-sets a:link {color:#FFF; text-decoration:none} .button-sets a:visited {color:#FFF; text-decoration:none} .button-sets a:hover {color:#000; text-decoration:none} .button-sets a:active {color:#FFF; text-decoration:none} .button-sets:hover { background: #C98E4A; color: #FFF; text-decoration:none; } .button-sets:active { background: #378b21; } /* FOUR: // home button-sets READ MORE*/ /**** POST CONTENT ****/ .the-post-content2 {border-left:1px solid #C4C4C4;;border-right:1px solid #C4C4C4;;color:#000;} .the-post-content2 p {margin-bottom:5px;padding:4px;} .the-post-title{color:#000;text-align:center;font-weight:500;} .the-post-content2 a{ color: #000!important; font-weight:500; font-size: 18px; text-align: center;} .the-post-content2 a:hover{ color: #000!important; font-weight:normal; text-align: center;border:0;box-shadow:none;} .the-post-content a:hover{ color: #000!important; font-weight:normal; text-align: center;border:0;box-shadow:none;} .the-post-content { font-size: 15px; line-height: 22px; color: #000; text-align: left; overflow: hidden; border-right: 1px solid #C98E4A; border-right: 2px solid #C98E4A; border-left: 2px solid #C98E4A; border-radius: 0px; padding: 3px 0 0 0; } .the-post-content-port { font-size: 18px; line-height: 20px; color: #000; text-align: center; overflow: hidden; margin-top: 0; } /*-----------------------------------------------------------------------------------*/ /* 03: REVOLUTION SLIDER /*-----------------------------------------------------------------------------------*/ .fullwidthbanner-container { width: 100%!important; max-height: 550px!important; position: relative; padding: 0; overflow: hidden!important; margin:-35px 0 0px; } .fullwidthbanner ul { visibility: hidden; margin: 0; list-style: none; } .rev-text { color: #999; margin: 40px; } .rev-title { margin: 0px; color: #999; } .rev-title-white { margin: 0px; color: #fff; } .rev-left { margin-left: 20px; } .rev-right { margin-right: 20px; } .rev-title.big{ font-size: 40px; line-height: 46px; } .rev-title-white.big{ font-size: 32px; line-height: 46px; font-weight:400; color: #fff; letter-spacing: 3px;} .rev-title.medium { font-size: 30px; line-height: 36px; } .rev-title.medium-white { font-size: 30px; line-height: 36px; color: #eee; } .rev-title-sub{ font-size: 30px; color: #fff; letter-spacing: 3px; font-weight: 300;} .tp-leftarrow.default, .tp-rightarrow.default { height: 38px!important; width: auto!important; line-height: 35px; top: 50% !important; padding: 0px 10px; font-size: 30px; color: #999; background: #222!important; opacity:0.3; } .tparrows:before { font-family: 'FontAwesome'; font-style: normal; font-weight: normal; display: inline-block; text-decoration: inherit; text-align: center; } .tp-leftarrow.default:before { content: '\f104'; } .tp-rightarrow.default:before { content: '\f105'; } .tparrows:hover { opacity: 0.7; } .tp-caption.bold { font-size: 60px!important; line-height: 1; font-weight: 700; text-transform: uppercase; color: #eee; letter-spacing: 6px; } .tp-caption.bg1 { border: 2px solid #999!important; background: rgba(0,0,0,0.3); padding: 18px 22px 21px 20px; } .tp-caption.bg { background: rgba(0,0,0,0.3); padding: 18px 22px 21px 20px; } .tp-bannertimer.tp-bottom { width: 100%; height: 10px; position: absolute; z-index: 200; } .tp-loader { width: 50px; height: 50px; margin-left: 0px; margin-top: -50px; position: absolute; top: 50%; left: 50%; border-radius: 0px; z-index:10000; } /*-----------------------------------------------------------------------------------*/ /* 04: ABOUT PAGE /*-----------------------------------------------------------------------------------*/ /************************************************************* HOVER BLOCKS *************************************************************/ .cbp-ig-grid { list-style: none; padding: 0 0; margin: 0; } .cbp-ig-grid:before, .cbp-ig-grid:after { content: " "; display: table; } .cbp-ig-grid:after { clear: both; } .cbp-ig-grid li { width: 33%; float: left; text-align: center; } .cbp-ig-grid li > a { display: block; height: 100%; color: #6FC1D2; padding:10px 0 0; -webkit-transition: background 0.2s; -moz-transition: background 0.2s; transition: background 0.2s; } .cbp-ig-icon { padding: 0 0; display: block; margin-top:30px; font-size: 5.5em; } .cbp-ig-grid .cbp-ig-title { color: #6FC1D2; margin: 20px 0 10px 0; padding: 20px 0 0 0; font-size: 18px; position: relative; font-weight:400; -webkit-transition: -webkit-transform 0.2s; -moz-transition: -moz-transform 0.2s; transition: transform 0.2s; } .cbp-ig-grid .cbp-ig-title:before { content: ''; position: absolute; background: green; width: 160px; height: 6px; top: 0px; left: 50%; margin: 0px 0 0 -80px; -webkit-transition: margin-top 0.2s; -moz-transition: margin-top 0.2s; transition: margin-top 0.2s; } .cbp-ig-grid .cbp-ig-category { text-transform: uppercase; display: inline-block; font-size: 1em; letter-spacing: 1px; color: #fff;padding: 20px 0 ; -webkit-transform: translateY(10px); -ms-transform: -ms-translateY(10px); transform: translateY(10px); opacity: 0; -webkit-transition: -webkit-transform 0.3s, opacity 0.2s; -moz-transition: -moz-transform 0.3s, opacity 0.2s; -webkit-transition: transform 0.3s, opacity 0.2s; } .cbp-ig-grid li:hover .cbp-ig-category, .touch .cbp-ig-grid li .cbp-ig-category { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } .cbp-ig-grid li > a:hover { background: green; } .cbp-ig-grid li > a:hover .cbp-ig-icon:before, .cbp-ig-grid li > a:hover .cbp-ig-title { color: #fff; } .cbp-ig-grid li > a:hover .cbp-ig-title { -webkit-transform: translateY(-30px); -moz-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); } .cbp-ig-grid li > a:hover .cbp-ig-title:before { background: #fff; margin-top: 75px; } @media screen and (max-width: 62.75em) { .cbp-ig-grid li { width: 33%; } } @media screen and (max-width: 41.6em) { .cbp-ig-grid li { width: 100%; } .cbp-ig-grid .cbp-ig-category { color:green; } .cbp-ig-grid li > a:hover .cbp-ig-category { color: #fff; } } @media screen and (max-width: 25em) { .cbp-ig-grid .cbp-ig-category { margin-top: 0px; color:green; } .cbp-ig-grid li > a:hover .cbp-ig-category { color: #fff; } } /************************************************************* TOOLTIPS *************************************************************/ .tooltip { font-size: 13px; } .tooltip.in {opacity: 1; } .tooltip.top {padding-bottom: 9px; margin-top: -13px; } .tooltip.top .tooltip-arrow { border-top-color: #474F57; border-width: 9px 9px 0; bottom: 0; margin-left: -9px; } .tooltip.right .tooltip-arrow { border-right-color: #474F57; border-width: 9px 9px 9px 0; margin-top: -9px; left: -3px; } .tooltip.bottom { padding-top: 8px; } .tooltip.bottom .tooltip-arrow { border-bottom-color: #474F57; border-width: 0 9px 9px; margin-left: -9px; top: -1px; } .tooltip.left .tooltip-arrow { border-left-color: #474F57; border-width: 9px 0px 9px 9px; margin-top: 14px; top: -1px;right:-4px; } .tooltip.left { margin-left:-15px; } .tooltip-inner { background-color: #474F57; line-height: 18px; padding: 12px 12px; text-align: center; width: 183px; -webkit-border-radius: 0px; border-radius: 0px; } /************************************************************* MODAL BOX/ DIALOG A UI element that appears on top of the main content, temporarily disabling interaction with the background until the user interacts with the modal (e.g., by clicking a button to close it or submit data). Commonly used for alerts, forms, confirmations, or pop-ups ask GROK for set-up or see style-complete.css *************************************************************/ .modal-backdrop { background-color: #495159;} .modal{ background-color: #F6F7F0; border: none; border: none; -webkit-border-radius: 0px; border-radius: 0px; overflow-y: auto; max-height: 90%; z-index: 99999; } .modal-header{ padding: 9px 15px; background: #495159;} .modal-header .close { margin-top: 2px;} .modal-header h3{ margin: 0; line-height: 30px; color: #eee; text-align: center;} .modal-body { position: relative; overflow-y: auto; max-height: 100%; padding: 10px 25px; text-align: left;} .modal-footer{ padding: 14px 15px 15px; margin-bottom: 0; text-align: center; background: #495159!important; border-top: 0px none; -webkit-border-radius: 0px; border-radius: 0px; } /************************************************************* STATISTICS *************************************************************/ /*-----------------------------------------------------------------------------------*/ /* 05: THE TEAM SECTION (TEAM & SINGLE MEMBER PAGES) /*-----------------------------------------------------------------------------------*/ /************************************************************* BIG Insert *************************************************************/ .grid { padding: 0; min-width: 1200px; margin: 0 auto; list-style: none; text-align: center; } .grid li { display: inline-block; width: 216px; margin: 0 5px 20px 5px; padding: 0; text-align: left; position: relative; } /* .grid li:first-child { margin-left:-30px; } */ .grid figure { margin: 0; position: relative; padding: 0; width: 13.4375rem; height:13.4375rem;} /*.grid figure img { width: 13.4375rem; height:13.4375rem;display: block; position: relative; }*/ .grid ul{margin:0;} .grid figcaption { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: absolute; top: 0; left: 0; padding: 0.75rem 0 0 0; background: #313941; color: #ed4e6e; } .grid figcaption h3 { margin: 0; padding: 0; color: #fff; } .grid figcaption a { text-align: center; padding: 4px 5px; -webkit-border-radius: 0px; border-radius: 0px; display: inline-block; background: green; color: #fff; } .grid figcaption span { padding: 0; color: green; margin:0 0 12px; display: inline-block; width:100%; font-weight:400; } .cs-style li { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-perspective: 1700px; -moz-perspective: 1700px; perspective: 1700px; -webkit-perspective-origin: 0 50%; -moz-perspective-origin: 0 50%; perspective-origin: 0 50%; } .cs-style figure { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } .cs-style figure > div { overflow: hidden; } .cs-style figure img { -webkit-transition: -webkit-transform 0.4s; -moz-transition: -moz-transform 0.4s; transition: transform 0.4s; } .no-touch .cs-style figure:hover img, .cs-style figure.cs-hover img { -webkit-transform: translateX(25%); -moz-transform: translateX(25%); -ms-transform: translateX(25%); transform: translateX(25%); } .cs-style figcaption { height: 100%; width: 50%; opacity: 0; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(-90deg); -moz-transform: rotateY(-90deg); transform: rotateY(-90deg); -webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s; -moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s; transition: transform 0.4s, opacity 0.1s 0.3s; } .no-touch .cs-style figure:hover figcaption, .cs-style figure.cs-hover figcaption { opacity: 1; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); transform: rotateY(0deg); -webkit-transition: -webkit-transform 0.4s, opacity 0.1s; -moz-transition: -moz-transform 0.4s, opacity 0.1s; transition: transform 0.4s, opacity 0.1s; } /************************************************************* QUOTES/TESTIMONIALS *************************************************************/ .quote { font-size: 22px; line-height: 38px; margin: 20px auto; color: #495159; } .quote-small { font-size: 18px; line-height: 30px; margin-bottom: 0px; color: #666; } .quote-small a { font-size: 14px; line-height: 26px; margin-bottom: 40px; color: #428E9E; font-weight:400; } .quote-small a:hover{ color: #707070; } /*-----------------------------------------------------------------------------------*/ /* 07: FORMS and TABLES /*-----------------------------------------------------------------------------------*/ p.form_info { color: #383838; text-transform: none; font-weight: 500; font-size: 1.2rem; letter-spacing: 0.125rem; margin-bottom: 0; } input .form_info { height: 2.0rem; } .form_info { color: #383838; text-transform: none; font-weight: 500; font-size:1.25rem; letter-spacing: 0.125rem; margin-bottom: 0.25rem; height: 2rem; } textarea:focus, input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus { border:2px solid #C98E4A; box-shadow: none; -webkit-box-shadow: none; outline: 0 none; width: auto; } textarea, input[type="text"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="date"] { border: 2px solid #7C7B7B; box-shadow: none; -webkit-box-shadow: none; outline: 0 none; height:2.5rem; font-size:1.125rem; width:auto; } input[type="sec"] { width:auto; } input[type="radio"],input[type="checkbox"] {margin:4px 0 0; margin-top:0;margin-top:1px;line-height:normal; } input[type="file"],input[type="image"],input[type="submit"],input[type="reset"],input[type="button"],input[type="radio"],input[type="checkbox"] {width:auto; } textarea { height:8.75rem; width:18.0rem; font-weight:500; color:#000; } placeholder {font-size:1.0rem;font-weight:500;color:#000; } label { padding:0;margin:0; } /*-----------------------------------------------------------------------------------*/ /* 08: FOOTER /*-----------------------------------------------------------------------------------*/ /* for home-sets */ .smiles {padding:0;} .span3 smiles {border: 1px solid #C98E4A;} .smiles p {font-size:1rem; font-weight:400; line-height: 2.0rem;} .smiles p.rate {color: #C98E4A; line-height:28px;font-weight:700;margin:5px 0 0 5px; font-size:1.125rem;} .smiles ul { --icon-size: .8rem; --gutter: 0; padding: 0 2.625 0 var(--icon-size); font-size: 1.0rem; font-weight:400; line-height: 2.0rem; border:none; } .smiles ul li { padding-left: var(--gutter); padding-right:1.0rem; line-height: 2.0rem; border:none; } .smiles ul li::marker { content: "\f061"; /* FontAwesome Unicode */ color:#000; font-family: FontAwesome; font-size: var(--icon-size); } /**** STRIP ****/ .strip { background:green; font-size: 15px; padding: 40px 20px 30px; margin: 75px 0 -70px; text-align: center; font-size: 20px; font-weight: 400; color:#eee; } .marg-left1 { margin-left: 1px; } /* TAGS */ .badge a { color: #F6F7F0!important; } .badge { color: #2A2A2A!important; font-weight:400; background: green; } .badge :hover { color: #2A2A2A!important; } /* SOCIAL FEED */ .social-feed{ margin: 0 0px 0 -24px; padding-right: 0; display: block; width: 100%; display: table; } .social-feed li{ list-style: none; float: left; width: 61px; height: 61px; } .social-feed li img{ width: 61px; height: 61px; } /************************************************************* CAROUSEL *************************************************************/ #carousel, #carousel2 { margin-bottom:20px; } .carousel-control { position: absolute; top: 40%; left: 15px; width: 33px; height: 33px; margin-top: -17px; background-image: url(../graphics/main_carousel_nav.png)!important; z-index:200; /*background-position: center;*/ background-repeat: no-repeat; outline: none; border: 0 none; -webkit-border-radius: 0; border-radius: 0; opacity: 1.0; } .carousel img{margin:0 auto;display:block;clear:both;} .carousel-control.right { background-position: -102px -33px; left: auto; right: 15px;} .carousel-control.right:hover {background-position: -102px 0; } .carousel-control:hover{ background-position: 0 0; -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; } .carousel-control:focus { -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; } .thumbnails>li{margin-bottom:0px;} .thumbnail{ padding:0; margin:20px 0 0; border:0px none; -webkit-box-shadow:none; box-shadow:none; } a.thumbnail:hover,a.thumbnail:focus {-webkit-box-shadow:none; box-shadow:none; cursor:pointer; opacity:0.9;} .carousel .carousel-control { visibility: visible; } /* at last !!*/ .carousel:hover, .carousel-control { visibility: visible; } /************************************************************* ACCORDIAN *************************************************************/ .accordion-group, .accordion-inner { border: none; border-radius: 0; } .accordion-group { padding: 1px 0 0; } .accordion-heading .accordion-toggle { padding: 0 0.125rem 0 0.0625rem; margin: 0; height: 3.75rem; line-height: 3.125rem; outline: none; color: #000; font-size: 1.125rem; font-weight:400; border: 0.125rem solid #000; background:#EAE9E5; background:#FFF; display:block; } .accordion-group { margin-bottom: 0.4375rem; } .accordion-heading .accordion-toggle:hover { text-decoration: none; color: #C98E4A;} /* jou blik */ .accordion-inner { padding: 0; font-size: 1.3125rem;color:#000; font-weight:400;} .collapse { overflow: hidden; position: relative; height: 0; } .collapse.in { height: auto; } .accordion-heading .accordion-toggle:before { font-family: 'Fontello'; font-weight: 700; margin: 0.125rem; text-decoration: inherit; content: '\e819'; /* paperclip *-->*/ color: #C98E4A; } .accordion-heading .accordion-toggle:hover:before { color: #707070; } .accordion-heading .accordion-toggle:focus { color: #707070; } .accordion-heading .accordion-toggle:focus:before { color: #707070; } /************************************************************* 404 / SEARCH *************************************************************/ #custom-search-form .search-query { margin: 0 auto; padding: 5px; box-shadow: none; -webkit-box-shadow: none; -webkit-border-radius: 0px; border-radius: 0px; } #custom-search-form button { border: 0; background: none; color: #6FC1D2; padding:2px 8px 0; } #custom-search-form button:hover { border: 0; background: none; padding: 2px 8px 0; color: #428E9E; } /*-----------------------------------------------------------------------------------*/ /* 12: ZOOM PLUGIN SECTIONS /*-----------------------------------------------------------------------------------*/ /**** PROJECTS, PORTFOLIO & CLIENTS ****/ .projects{ position: relative; margin: 0px auto; text-align: center; } /* index projects hover opacity */ .dzsportfolio.hover-opacity .portitem:hover .the-overlay { background: rgba(0, 0, 0, 0.3)!important;} .dzsportfolio .portitem .the-desc { font-size: 13px; color: #777; font-weight: 400; } .dzsportfolio .selector-con .categories .a-category.active { color: #428E9E; } .dzsportfolio .selector-con { font-size: 18px; } .dzsportfolio .portitem .the-title { font-weight: 400; color: #B7905B; text-transform: uppercase; font-size: 14px!important; letter-spacing: 1px; margin-bottom: 0px; } .dzsportfolio .portitem a:hover .the-title { color: #222; text-transform: uppercase; } .the-title a:hover { color: #222!important; } /* clients */ #client_slider.dzsportfolio .portitem .the-overlay:hover { background: transparent; } .advancedscroller.skin-black a:hover { opacity: 1.0!important; } /* scrollable */ .dzs-scrollable { position: relative; box-shadow: 0 0 15px 0 rgba(255, 255, 255, 0.7); } .dzs-scrollable .the-clip { overflow: hidden; position: relative; } .dzs-scrollable .the-clip .inner {position: absolute; } .dzs-scrollable .the-clip .inner img { margin-top: 0; } /************************************************************* LATEST WORK - ABOUT SECTION *************************************************************/ .dzsportfolio .project-title { display: inline-block; font-size: 18px; color: #65625a; padding: 0px 0 15px; text-transform: uppercase; font-weight: 400; letter-spacing:2px; } .dzsportfolio.skin-clean { margin-top: 30px; } .project-meta-con {text-align: left; } .dzsportfolio.skin-clean .portitem:hover .the-overlay { background: rgba(0, 0, 0, 0.8);} .dzsportfolio .skin-clean.the-title { font-weight: 400; color: #e8554e; text-transform: uppercase; font-size: 14px!important; letter-spacing: 1px; text-align: left; } .dzsportfolio.skin-clean .portitem:hover .item-meta { top: 35%; left: 0%; } .dzsportfolio.skin-clean a:hover .the-title { color: #fff!important; text-transform: uppercase; } .dzsportfolio .btn-close { position: relative!important; float: right; height: 32px; width: 32px; display: inline-block; text-indent: -9999px; margin: 10px 0px 0px; background: transparent; padding: 0!important; } .dzsportfolio .btn-close:hover { opacity: 0.8;} /************************************************************* PORTFOLIO *************************************************************/ #zoom_portfolio_caption { margin-top: -60px; } #zoom_portfolio_caption .portitem .item-meta .the-post-title { font-size: 14px!important; margin: 10px 0; color: #000; font-weight:600;text-align:center;} #zoom_portfolio_caption .the-post-content {padding: 10px 0 0 0!important;} /************************************************************* PORTFOLIO 4 & AJAX BLOG *************************************************************/ .dzsportfolio.skin-blog .portitem .the-title a:hover, .the-post-content a:hover { color: #A4DB23; } .dzsportfolio.skin-blog .portitem .item-meta { background: rgba(50, 50, 50, 0.9); } .dzsportfolio.skin-blog .portitem .item-meta .the-title { text-align: center!important; color: #bbb; text-transform: uppercase; font-size: 12px!important; line-height: 14px; letter-spacing: 1px; } .skin-blog .the-title a:hover { color: green!important; } .dzsportfolio.skin-blog .portitem .item-meta { font-size: 11px; color: #999; text-align: center!important; font-weight: 400; } .meta-property-content{ margin: 0 6px; font-weight: 700; } .dzsportfolio.skin-blog .selector-con .categories .a-category:hover { color: inherit!important; } .dzsportfolio.skin-blog .selector-con .categories .a-category { font-size: 20px; margin-right: 0; padding: 5px 10px 5px 0; background: transparent; margin: 70px auto 10px; text-align: center; } /* Load More */ .dzsportfolio.skin-blog .btn_ajax_loadmore { padding: 12px 20px; background: #428E9E; border: 1px solid #F6F7F0!important; color: #fff!important; text-transform: uppercase; letter-spacing: 1px; margin: 40px auto 0px; text-align: center; font-weight: 400; width: 110px; font-size: 14px; cursor: pointer; } .dzsportfolio.skin-blog .btn_ajax_loadmore:hover { background: #313941; border: 1px solid #F6F7F0!important; color: #fff!important; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } /*-----------------------------------------------------------------------------------*/ /* 13: CSS3 ANIMATIONS /*-----------------------------------------------------------------------------------*/ /**** SLIDE LEFT ****/ .slideLeft{ animation-name: slideLeft; -webkit-animation-name: slideLeft; animation-duration: 2s; -webkit-animation-duration: 2s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; visibility: visible !important; } @keyframes slideLeft { 0% { transform: translateX(150%); } 50%, 65%, 80%, 95%, 100% { transform: translateX(0%); } } @-webkit-keyframes slideLeft { 0% { -webkit-transform: translateX(150%); } 50%, 65%, 80%, 95%, 100%{ -webkit-transform: translateX(0%); } } /**** SLIDE RIGHT ****/ .slideRight{ animation-name: slideRight; -webkit-animation-name: slideRight; animation-duration: 2s; -webkit-animation-duration: 2s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out ; visibility: visible !important; } @keyframes slideRight { 0% { transform: translateX(-150%); } 50%, 65%, 80%, 95%, 100% { transform: translateX(0%); } } @-webkit-keyframes slideRight { 0% { -webkit-transform: translateX(-150%); } 50%, 65%, 80%, 95%, 100% { -webkit-transform: translateX(0%); } } /**** SLIDE UP ****/ .slideUp{ animation-name: slideUp; -webkit-animation-name: slideUp; animation-duration: 2s; -webkit-animation-duration: 2s; animation-timing-function: ease; -webkit-animation-timing-function: ease; visibility: visible !important; } @keyframes slideUp { 0% { transform: translateY(100%); } 50%, 65%, 80%, 95%, 100% { transform: translateY(0%); } } @-webkit-keyframes slideUp { 0% { -webkit-transform: translateY(100%); } 50%, 65%, 80%, 95%, 100% { -webkit-transform: translateY(0%); } } /**** FADE IN ****/ .fadeIn{ animation-name: fadeIn; -webkit-animation-name: fadeIn; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; visibility: visible !important; } @keyframes fadeIn { 0% { transform: scale(0); opacity: 0.0; } 60% { transform: scale(1.1); } 80% { transform: scale(0.9); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @-webkit-keyframes fadeIn { 0% { -webkit-transform: scale(0); opacity: 0.0; } 60% { -webkit-transform: scale(1.1); } 80% { -webkit-transform: scale(0.9); opacity: 1; } 100% { -webkit-transform: scale(1); opacity: 1; } } /**** FADEIN 2 ****/ .fadeIn2{ animation-name: fadeIn2; -webkit-animation-name: fadeIn2; animation-duration: 2.0s; -webkit-animation-duration: 2.0s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; visibility: visible !important; } @keyframes fadeIn2 { 0% { transform: scale(0); opacity: 0.0; } 60% { transform: scale(1); } 80%, 100% { transform: scale(1); opacity: 1; } } @-webkit-keyframes fadeIn2 { 0% { -webkit-transform: scale(0); opacity: 0.0; } 60% { -webkit-transform: scale(1); } 80%, 100% { -webkit-transform: scale(1); opacity: 1; } } /**** BIG ENTRANCE ****/ .bigEntrance{ animation-name: bigEntrance; -webkit-animation-name: bigEntrance; animation-duration: 1.6s; -webkit-animation-duration: 1.6s; animation-timing-function: ease; -webkit-animation-timing-function: ease; visibility: visible !important; } @keyframes bigEntrance { 0% { transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%); opacity: 0.2; } 30%, 45%, 60%, 75%, 90%, 100% { transform: scale(1) rotate(0deg) translateX(0%) translateY(0%); opacity: 1; } } @-webkit-keyframes bigEntrance { 0% { -webkit-transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%); opacity: 0.2; } 30%, 45%, 60%, 75%, 90%, 100% { -webkit-transform: scale(1) rotate(0deg) translateX(0%) translateY(0%); opacity: 1; } } /**** BOUNCE ****/ .bounce{ animation-name: bounce; -webkit-animation-name: bounce; animation-duration: 1.6s; -webkit-animation-duration: 1.6s; animation-timing-function: ease; -webkit-animation-timing-function: ease; transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; } @keyframes bounce { 0% { transform: translateY(0%) scaleY(0.6); } 60%{ transform: translateY(-100%) scaleY(1.1); } 70%{ transform: translateY(0%) scaleY(0.95) scaleX(1.05); } 80%{ transform: translateY(0%) scaleY(1.05) scaleX(1); } 90%{ transform: translateY(0%) scaleY(0.95) scaleX(1); } 100%{ transform: translateY(0%) scaleY(1) scaleX(1); } } @-webkit-keyframes bounce { 0% { -webkit-transform: translateY(0%) scaleY(0.6); } 60%{ -webkit-transform: translateY(-100%) scaleY(1.1); } 70%{ -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1.05); } 80%{ -webkit-transform: translateY(0%) scaleY(1.05) scaleX(1); } 90%{ -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1); } 100%{ -webkit-transform: translateY(0%) scaleY(1) scaleX(1); } } /*-----------------------------------------------------------------------------------*/ /* 14: PARALLAX /*-----------------------------------------------------------------------------------*/ .parallax-section{ padding: 80px 0px; position: relative; } .parallax-section .overlay, .parallax-section .overlay2 { position: absolute; z-index: -5; top: 0px; bottom: 0px; left: 0px; right: 0px; width: 100%; background: #14212d; opacity:0.7; } .parallax-section .overlay2 { background: #222; opacity:0.7; } .parallax-one, .parallax-two{ width: 100%; top: 0px; bottom: 0px; margin: 0 auto; overflow: hidden; padding: 0; position: absolute; z-index: -10; background-attachment: fixed; background-position: center center; background-repeat: no-repeat; -webkit-background-size: cover; -o-background-size: cover; background-size: cover; } /* ADD EXTRA BACKGROUND IMAGES HERE */ .parallax-three { width: 100%; top: 0px; bottom: 0px; margin: 0 auto; overflow: hidden; padding: 0; position: absolute; z-index: -10; background-attachment: fixed; background-position: center center; background-repeat: no-repeat; -webkit-background-size: cover; -o-background-size: cover; background-size: cover; } .parallax-four { width: 100%; top: 0px; bottom: 0px; margin: 0 auto; overflow: hidden; padding: 0; position: absolute; z-index: -10; background-attachment: fixed; background-position: center center; background-repeat: no-repeat; -webkit-background-size: cover; -o-background-size: cover; background-size: cover;} .parallax-text { font-size: 25px; line-height: 42px; margin: 10px auto 20px; color: #eee; text-transform: uppercase; font-weight: 700; letter-spacing: 2px; padding: 0 50px; } .parallax-text-small { font-size: 18px; line-height: 30px; margin-bottom: 40px; color: #bbb; } .parallax-section h1 { color: #eee; } .parallax-section h2 { color: #bbb; margin-bottom: 0px;}} /*-----------------------------------------------------------------------------------*/ /* 15: MEDIA QUERIES /*-----------------------------------------------------------------------------------*/ @media screen and (max-width: 979px){ .parallax-one, .parallax-two, .parallax-three, .parallax-four { background-position: 50% 0px!important; background-attachment: scroll!important; } .container { padding: 0 15px !important;} .skills { float: none!important;} .shotList img {width:48.8%!important; padding:0 0 10px 0; margin: 0 auto!important; margin-left: -10px!important; margin-right: 15px!important;} .logo { text-align: center!important; margin: 35px auto 0px!important; } .logo a{ float: none!important; text-align: center!important;} .menu {float: none!important; text-align: center!important; margin: 0px auto -20px!important;} a.menu-link{ float: none!important; text-align: center!important; margin: 0px auto!important; } .dzsportfolio.skin-clean {width: 95%!important; } } @media screen and (min-width: 480px) and (max-width: 768px){ .rev-title { font-size: 16px; line-height: 22px; } .rev-title.big { font-size: 24px; line-height: 28px;} .phone-marg { margin-top:-10px; } .header { text-align: center; width: 100%; float: none!important; } .header li { margin-left: 8px; display: inline-block!important; float: none!important;} .header .pull-right { float: none!important;} .skills { margin: 20px 0px 0px 0!important; font-size: 70px!important;} .shotList img {width: 48.8%!important; padding: 0 0 10px 0; margin: 0 auto!important; margin-left: -10px!important; margin-right: 15px!important;} .logo { float: left!important; margin: 35px auto!important; } .grid li { width: 47%; margin-left: 0px; } a.menu-link{ float: right!important; text-align: center!important; margin: 45px 0px 0px 0px!important; } } @media screen and (max-width: 479px){ .rev-title { font-size: 10px; line-height: 14px; } .rev-title.big { font-size: 16px; line-height: 20px; } .rev-title.big { font-size: 16px; line-height: 20px; } .tp-caption.bold { font-size: 30px!important; line-height: 1; font-weight: 700; text-transform: none; color: #eee; letter-spacing:4px; } .phone-marg { margin-top: 20px; } .header { text-align: center; width: 100%; float: none!important; margin-top: 0px; } .header li { margin-left: 8px; display: inline-block!important; float: none!important;} /* changed margin *-->*/ .header li { margin-left: 0; display: inline-block!important; float: none!important;} .logo { float: none!important; margin-top: 15px!important; } } /* All Mobile Sizes (devices and browser) */ @media only screen and (max-width: 767px) { /* prettyPhoto styling for small screens */ .pp_pic_holder.pp_default { width: 100%!important; left: 0!important; overflow: hidden; } div.pp_default .pp_content_container .pp_left { padding-left: 0!important; } div.pp_default .pp_content_container .pp_right { padding-right: 0!important; } .pp_content { width: 100%!important; height: auto!important; } .pp_fade { width: 100%!important; height: 100%!important; } a.pp_expand, a.pp_contract, .pp_hoverContainer, .pp_gallery, .pp_top, .pp_bottom { display: none!important; } #pp_full_res img { width: 100%!important; height: auto!important; border-radius:0px; } .pp_details { width: 94%!important; padding-left: 3%; padding-right: 4%; padding-top: 10px; padding-bottom: 10px; background-color: #222; margin-top: -2px!important; } .pp_close {margin-top: 12px; margin-right:20px; } iframe { width: 100%; height: 100%!important; } } @media only screen and (max-width: 480px) { .shotList img {width: 100%!important; padding: 0 0 20px 0; margin: 0 auto!important; margin-left: -10px!important;} .dzsportfolio.skin-clean {width: 100%!important; } } @media screen and (max-width: 31.5em) { .grid { padding: 0px 0px 10px; } .grid li { width: 80%; min-width: 280px; margin-left: -3px; } .dzsportfolio.skin-clean { width: 100%!important; } .tp-caption.bold { font-size: 20px!important; line-height: 40px; font-weight: 700; text-transform: none; color: #eee; letter-spacing: 4px; }} .btn-colour-red.mobile { padding: 2px 12px; background: #6FC1D2; border: 1px solid #F6F7F0!important; color: #F6F7F0!important; text-transform: uppercase; letter-spacing: 1px; font-size: 12px; } .btn-colour-red.mobile:hover {background: #428E9E; border: 1px solid #F6F7F0!important; color: #F6F7F0!important; } .btn-colour-red.mobile:active, .btn-colour-red.mobile:focus { background: #6FC1D2; border: 1px solid #F6F7F0!important; color: #fff!important; } p.btn-sets { padding: 2px 12px; background: #C98E4A; color: #FFF!important; letter-spacing: 1px; font-size: 12px; border-radius: 0px; text-align:center;} .btn-colour.mobile { padding: 2px 12px; background:#313941; border: 1px solid #F6F7F0!important; color: #F6F7F0!important; letter-spacing: 1px; font-size: 12px; } .btn-colour.mobile:hover {background: #428E9E; border: 1px solid #F6F7F0!important; color: #F6F7F0!important;} .btn-colour.mobile:active, .btn-colour.mobile:focus {background: #313941; border: 1px solid #95989C!important; color: #F6F7F0!important; } .phone-marg { margin-top: 0px; } /* for NAVTABS influences the table in NavTabs*/ .navTabs {color:#000;font-size:18px;clear:both;margin-bottom:2rem;text-align:center;} .navTabs legend{color:#000;font-size:18px;} .navTabs p {color: #000;line-height:28px;font-weight:400;margin-left:5px;text-align:left;font-size: 18px;} .navTabs p:first-child {margin-top:5px;margin-left:10px;font-weight:400;} .navTabs ul {color:#000;font-weight:400;padding-left:0.625rem;font-size: 15px;text-align:left;} .navTabs li {font-weight:400;} .navTabs a:link {color:#C98E4A;font-weight:700;} /* NAV TABS */ .navTabs ul { --icon-size: .8em; --gutter: .5em; padding: 0 0 0 var(--icon-size); font-weight:400; } .navTabs ul li { padding-left: var(--gutter); font-weight:400; } .navTabs about{ background-color:#272727; } .navTabs ul li::marker { content: "\f061"; /* FontAwesome Unicode */ color:#C98E4A; color:black; font-family: FontAwesome; font-size: var(--icon-size); } * { box-sizing: border-box; } [class*="span-"] { float: left; padding: 0.125rem; /* 3px */ border: none; } .button-lined { border-top: 5px solid #C98E4A; border-bottom: 5px solid #C98E4A; display:inline-block; padding: 0.1875rem; margin:0 0 0.3125rem 0;width:9.6875rem; vertical-align:middle;overflow:hidden;text-decoration:none; color:#FFF;font-size:0.875rem; background-color:#F7F7F7;text-align:center;cursor:pointer;white-space:nowrap; } .button-lined a:link { font-weight: 400; } .w3-button{border:none;display:inline-block;padding:5px 0;margin:0 0 5px 0;width:8.9375rem; vertical-align:middle;overflow:hidden;text-decoration:none;color:#FFF;font-size:1.0625rem;background-color:#C98E4A;text-align:center;cursor:pointer;white-space:nowrap} .w3-button-black{border:none;display:inline-block;padding:5px;margin:0 0 5px 0;width:8.75rem; vertical-align:middle;overflow:hidden;text-decoration:none;color:#FFF;font-size:1.125rem;background-color:#160800;text-align:center;cursor:pointer;white-space:nowrap} .w3-button-black:hover{color:#CEA865;} /* from old KNP */ .bottom_desc{ font-size:20px; margin:0 0 15px 0; font-weight:400; font-family:'Montserrat', sans-serif; } .rate-desc { font-size:22px; margin:0 0 15px 0; color:#C98E4A; font-weight:700; } .sub_location{ font-size: 23px; text-align:center; margin: 2px 0 30px 0; font-weight:400; font-family:'Montserrat', sans-serif; } .top_head_bar h4{ color: #C98E4A; font-size:30px; letter-spacing: normal; } .caption{ font-family:"Parisian BT", Lato; } /* For desktop: own col structure*/ .span-1 {width: 8.32%;} .span-2 {width: 16.65%;} .span-3 {width: 25%;} .span-4 {width: 33.32%;} .span-5 {width: 41.65%;} .span-6 {width: 49%;} .span-7 {width: 58.32%;} .span-8 {width: 66.65%;} .span-9 {width: 75%;} .span-10 {width: 83.32%;} .span-11 {width: 91.65%;} .span-12 {width: 99%;} hr.ruler {border-bottom: 0.1875rem solid #C98E4A;} hr.rulerEnd {border-bottom: 0.1875rem solid #C98E4A;} .row::after { content: ""; clear: both; display: table; } @media only screen and (max-width: 768px) { /* For mobile phones: */ [class*="span-"] { width: 100%; } } /* Extra small devices "mobile phones" */ @media only screen and (max-width: 768px) {...} /* Extra small devices "Tabs" */ @media only screen and (max-width: 992px) {...} /* Extra small devices "Tabs" */ @media only screen and (max-width: 1200px) {...} @media only screen and (max-width: 1920px) {...} /* smooth scroll */ $(document).on('click', 'a[href^="#"]', function (event) { event.preventDefault(); $('html, body').animate({ scrollTop: $($.attr(this, 'href')).offset().top }, 500); }); $('a[href^="#"]').click(function () { $('html, body').animate({ scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top }, 500); return false; }); html { scroll-behavior: smooth; } /* //smooth scroll */ /* CUURENT PAGE CODING */ /* add to body of each : li > ul.sub-menu { min-width: 100em; padding: 0 0; } .menu ul li { padding: 0; z-index:2000; text-align: left; } .menu > ul > li { display: inline-block; } .menu ul li a { display: block; text-decoration: none; color: blue; font-size: 17px; font-weight: 400; letter-spacing: 1px; text-transform: none; } .menu ul li > a { height: 50px; padding: 19px 12px; } .menu ul li a:hover {color:orange;} /* second level */ .menu ul ul { display: none; position: absolute; top: 69%; min-width: 156px; z-index:2000; } .menu ul li:hover > ul { display: block;} .menu ul ul > li { position: relative; } .menu ul ul > li a { font-size: 13px; padding: 4px 15px 4px 10px; height: auto; font-weight: 400; color: beige; background-color: #2e1307; text-transform: none; letter-spacing: 0; -webkit-transition: background-color 0.2s ease-out; -moz-transition: background-color 0.2s ease-out; -ms-transition: background-color 0.2s ease-out; -o-transition: background-color 0.2s ease-out; transition: background-color 0.2s ease-out; } .menu ul ul > li a:hover { background-color: #f3b81e; color: #fff; } .menu ul li li:first-child:after { bottom: 100%; border: solid transparent; content: " "; height:0; width: 0; position: absolute; pointer-events: none; border-bottom-color: #313941; border-width: 10px; left: 10%; } .menu ul ul ul { position: absolute; left: 100%; top:-40%; } .menu ul ul ul li:first-child:after { display:none; } /**** RESPONSIVE MENU ****/ @media screen and (max-width: 768px) { a.menu-link { display: block; color: #000; background: transparent; margin-top: 35px!important;} a.menu-link { display: block; color: #000; background: transparent; margin-top: 2px;} .menu { clear: both; min-width: inherit; float: left;} .menu, .menu > ul ul { overflow: hidden; max-height: 0;} .menu.active, .menu > ul ul.active { max-height: 100%;} .menu ul { display: inline; margin: -10px 0 10px!important;} .menu li { display: block; width: 100%; } .menu li { background-color: #F3B81E; z-index: 2000; position: relative; } .menu li a { margin: 0; } .menu li.has-submenu > a{ color: #fff; font-weight: 400; padding: 0; font-size: 16px; text-transform:none; } .menu li.has-submenu-no > a{ color: #fff; font-weight: 400; padding: 0px 0px; font-size: 16px; text-transform:none; margin:-20px 0 20px; } .menu li.has-submenu > a:after { content: '+'; position: absolute; color:#D68700; /*was orange test */ top: 0; right: 50%; display: block; font-size: 1.6em; /*padding: 0 0 10px 80px; margin-left:50px;*/ } .menu li.has-submenu > a.active:after { content: "-"; } .menu ul ul { display: inherit; position: relative; left: auto; top: auto; border: none; border:1px solid #D68700; width:70%; } .menu ul ul > li a { background-color: transparent; color: #eee; font-weight: 400; padding: 5px 10px; font-size: 15px; } /* yes for resp has dropdown */ .menu ul ul > li a:hover, .menu li.has-submenu > a:hover, .menu li.has-submenu-no > a:hover { background-color: transparent; color: #333; /* yes ugh*/ color: #000; /* yes better*/ display: block!important;} .menu ul li:hover > ul { display: inline-block;} } .menu ul ul ul { display: inherit; position: relative; left:0px; top:20px; border:none; } /* changes 04-10-2025*/ /* Container for the photos row of big 5 */ /* Container for the gallery */ .gallery { display: flex; flex-wrap: wrap; /* Allows items to wrap if needed */ justify-content: space-between; /* Spreads items evenly */ gap: 20px; /* Space between items */ padding: 20px; max-width: 1200px; /* Limits container width */ margin: 0 auto; /* Centers the container */ } /* Style for each photo item (image + text) */ .gallery-item { width: 18%; /* Each item takes ~20% of container width (5 items) */ text-align: center; /* Center text and image */ } /* Style for each photo */ .gallery-item img { width: 100%; /* Full width of the parent item */ height: auto; /* Maintains aspect ratio */ object-fit: cover; /* Ensures images fill space without distortion */ } /* Style for headings */ .gallery-item h2 { font-size: 1.2rem; /* Adjust size as needed */ margin: 10px 0 5px; /* Spacing above and below heading */ color: #4F200C; /* Text color */ } /* Style for paragraphs */ .gallery-item p { font-size:15px; /* Adjust size as needed */ color: #4F200C; /* Lighter text color */ margin: 0 0 10px; /* Spacing below paragraph */ } /* Media query for mobile devices (screens smaller than 768px) */ @media (max-width: 768px) { .gallery { flex-direction: column; /* Stack items vertically */ align-items: center; /* Center items horizontally */ } .gallery-item { width:100%; /* do not delete!! */ /* max-width: 400px; Limits item width on mobile */ } } .cbp-ig-grid { list-style: none; padding: 0 5px; margin: 0; text-align: justify; } p.slogan2{ text-align:center; font-size:17px; margin-top:5px; font-weight:600; } .cbp-ig-grid:before, .cbp-ig-grid:after { content: " "; display: table; } .cbp-ig-grid:after { clear: both; } .cbp-ig-grid li { width: 32.5%; float: left; text-align: center; padding:0 6px 0 0 } .cbp-ig-grid li > a { display: block; height: 100%; color: #C98E4A; color: black; padding:10px 10px 0 0; -webkit-transition: background 0.2s; -moz-transition: background 0.2s; transition: background 0.2s; } .cbp-ig-icon { padding: 0 0; display: block; margin-top:300px; font-size: 5.5em; } .cbp-ig-grid .cbp-ig-title { color: #4C2C29; margin: 15px 0 10px 0; padding: 10px 0 0 0; font-size: 18px; position: relative; font-weight:500; font-family:'Lato', sans-serif; -webkit-transition: -webkit-transform 0.2s; -moz-transition: -moz-transform 0.2s; transition: transform 0.2s; } .cbp-ig-grid .cbp-ig-title:after { content: ''; position: absolute; background:#C98E4A; width: 230px; height: 6px; top: 0px; left: 50%; margin: 0 0 0 0; -webkit-transition: margin-top 0.2s; -moz-transition: margin-top 0.2s; transition: margin-top 0.2s; } .cbp-ig-grid .cbp-ig-title2 { color: #4C2C29; margin: 0 0 20px 0; padding: 12px 0 2px 0; font-size: 21px; text-align:center; position: relative; font-weight:700; font-family: 'Holmesh', sans-serif; -webkit-transition: -webkit-transform 0.2s; -moz-transition: -moz-transform 0.2s; transition: transform 0.2s; } .photCol:after { content: ''; position: absolute; background:#C98E4A; width: 160px; height: 4px; top: 40px; left: 50%; margin: 0 0 50px -80px; } /* after provides the underline */ .cbp-ig-grid .cbp-ig-title2:after { content: ''; position: absolute; background:#C98E4A; width: 160px; height: 4px; top: 40px; left: 50%; margin: 0 0 50px -80px; -webkit-transition: margin-top 0.2s; -moz-transition: margin-top 0.2s; transition: margin-top 0.2s; } .cbp-ig-grid .cbp-ig-category { text-transform: none; display: inline-block; font-size: 1em; letter-spacing: 1px; color: #fff;padding: 20px 0 ; -webkit-transform: translateY(10px); -ms-transform: -ms-translateY(10px); transform: translateY(10px); opacity: 0; -webkit-transition: -webkit-transform 0.3s, opacity 0.2s; -moz-transition: -moz-transform 0.3s, opacity 0.2s; -webkit-transition: transform 0.3s, opacity 0.2s; } .cbp-ig-grid li:hover .cbp-ig-category, .touch .cbp-ig-grid li .cbp-ig-category { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } @media screen and (max-width: 62.75em) { .cbp-ig-grid li { width: 33%; } } @media screen and (max-width: 41.6em) { .cbp-ig-grid li { width: 100%; } .cbp-ig-grid .cbp-ig-category { color:#C98E4A; } .cbp-ig-grid li > a:hover .cbp-ig-category { color: #fff; } } @media screen and (max-width: 25em) { .cbp-ig-grid .cbp-ig-category { margin-top: 0px; color: #C98E4A; } .cbp-ig-grid li > a:hover .cbp-ig-category { color: #fff; } } a:link {text-decoration: none;} p{color: #1C1208; margin-bottom:7px;} p a {color:#C98E4A;text-decoration: none;} p.port {font-size:15px;text-align:center;margin-top:3px; padding-top:0;color:#4A3728;text- : } a:link,a:active{color:#C98E4A;text-decoration:none;} a:hover,a:focus{color:#CC9357;text-decoration:none;} a:link .noline {color:#FFF;text-decoration:none;} :focus {outline: 0;} /*-----------------------------------------------------------------------------------*/ /* 08: FOOTER /*-----------------------------------------------------------------------------------*/ .footer { color: #2E1307; background: #C7A05F; font-size: 17px; } .footer p { color: #2E1307; font-size: 17px; margin:0; } .footer { text-align: center; margin: 10px auto 0px;padding-top:5px; font-weight: 400; } .footer a, .footer a { font-weight: 400; color: #2e1307; } .footer a:hover, .footer a:hover {color: #2e1307;} .footer h2 {color:#2E1307;} footer.footer h4 { color: #FAFAD2; font-size: 15px; font-weight: 700; margin-top: -10px; } .footer .footcontact { border:0; margin:0 auto; display: block; clear: both; } .copyright{ background:#2E1307; color:#F0E68C; } .go-top { text-align: center; font-weight: 400; margin: 10px auto; font-size: 14px; color: #F0E68C; } .go-top a { color: #2E1307; } .go-top a:hover { color: #F0E68C; } .bottom{ color: #F0E68C; font-weight:400; } .bottom a { color: #F0E68C; font-weight:400; } /**** STRIP ****/ .strip { background:#C98E4A; font-size: 36px; padding: 40px 20px 30px; margin: 75px 0 -70px; text-align: center; font-size: 20px; font-weight: 400; color:#eee; } .strip-head { background:#C98E4A; font-size: 15px; padding: 1px; margin: 5px 0; text-align: center; font-weight: 600; color:#FFF; text-transform: none; } .strip-head h2{ color: #FFF; font-weight:500; text-transform: none; padding: 0; margin: 6px 0; line-height: 30px; font-size: 32px; } .marg-left1 { margin-left: 1px; } ul {list-style-type: none; } ul.tips { color:#1C1208; font-weight: 500; } ul.acom { color:#4A3728; font-size: 16px; list-style: disc; font-weight:500; } ul.tips li { list-style-type: none; color:#1C1208; font-size: 15px; font-weight: 700; line-height: 1.7; /* Unitless value, scales with font-size */ } p.acom { color:#4A3728; font-size: 16px; padding: 0 8px 0 8px; } .container3 { display: flex; /* Makes the container a flex container */ align-items: center; background-color: #C98E4A; padding: 0; height: 36px; } /* columns in column*/ .item1 { background-color: #D3934A; background-color: #D2863B; padding: 7px; margin: 0; border:0; width: 49%; align-items:center; text-align: center; } .item2 { background-color: #FE6E24; background-color: Brown; background-color: #593F28; padding: 7px; margin: 0; border:0; width: 49%; align-items:center; text-align: center; }