/* Responsive -------------------------------------------------------------------- */ #responsive-menu-button { width: 29px; height: 29px; background-image: url(../images/menu-button.png); float: left; margin-left: 10px; } #responsive-bar { background-color: #160D47; padding: 10px; position: fixed; top:0; left: 0; z-index: 2000; } #responsive-bar p.tel { text-align: right; color: #fff; padding-right: 30px; padding-top: 5px; margin: 0; } .display-none { display: none; } /* Responsive Menu -------------------------------------------------------------------- */ .responsive-menu{ left: -40%; position: absolute; position: fixed; height: 100%; z-index: 1999; width: 40%; overflow-x: hidden; overflow-y: auto; font-size: 15px; background-color: #00a69c; color: #fff; top: 49px; -webkit-box-shadow: 0px 0px 15px #222; -moz-box-shadow: 0px 0px 15px #222; box-shadow:0px 0px 15px #222; -webkit-transition: left 0.5s; -moz-transition: left 0.5s; -o-transition: left 0.5s; transition: left 0.5s; } .responsive-menu.activate { left: 0; } .responsive-menu .responsive-menu-inner{ padding: 0 0 15px } .responsive-menu.right{ left: auto; right: -260px } .responsive-menu.left{ left: -260px; right: auto } .responsive-menu h1,.responsive-menu h2,.responsive-menu h3,.responsive-menu h4,.responsive-menu h5,.responsive-menu h6 { font-size: 11px; font-weight: normal; padding: 0 15px; margin: 0 0 5px; color: #fff; line-height: 24px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #4d4d4d), color-stop(100%, #1a1a1a)); background-image: -webkit-linear-gradient(#4d4d4d,#1a1a1a); background-image: -moz-linear-gradient(#4d4d4d,#1a1a1a); background-image: -o-linear-gradient(#4d4d4d,#1a1a1a); background-image: linear-gradient(#4d4d4d,#1a1a1a); -webkit-box-shadow: 0 5px 5px 3px rgba(0,0,0,0.2); -moz-box-shadow: 0 5px 5px 3px rgba(0,0,0,0.2); box-shadow: 0 5px 5px 3px rgba(0,0,0,0.2) } .responsive-menu p{ font-size: 13px; margin: 0 0 12px } .responsive-menu p a{ color: rgba(255,255,255,0.9) } div#rowans-fancy-menu{ display: block; margin: 0 0 15px; padding: 0; border-bottom: 1px solid #fff } .responsive-menu ul { margin: 0; } .responsive-menu ul li{ display: block; margin: 0; line-height: 40px; border-top: 1px solid #fff; font-weight: 300; font-size: 1.2em;} .responsive-menu ul li.menu-item-first { border-top: 0; } .responsive-menu ul li:hover,.responsive-menu ul li.active,.responsive-menu ul li.responsive-menu-class-active{ } .responsive-menu ul li a,.responsive-menu ul li span{ padding: 0 15px; display: block; text-decoration: none; color: #fff; text-transform: uppercase; } .responsive-menu ul li ul{ border-bottom: none; margin: 0; } .responsive-menu ul li ul li{ line-height: 40px; font-size: 13px } .responsive-menu ul li ul li:last-child{ border-bottom: none } .responsive-menu ul li ul li a,.responsive-menu ul li ul li span{ color: color: #fff; padding-left: 30px } .responsive-menu form{ margin: 0 15px } .responsive-menu label{ font-size: 13px } .responsive-menu input[type="text"],.responsive-menu input[type="password"],.responsive-menu input[type="date"],.responsive-menu input[type="datetime"],.responsive-menu input[type="email"],.responsive-menu input[type="number"],.responsive-menu input[type="search"],.responsive-menu input[type="tel"],.responsive-menu input[type="time"],.responsive-menu input[type="url"],.responsive-menu textarea,.responsive-menu select{ width: 100%; font-size: 13px; padding: 5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0 0 10px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; border: none; background: rgba(0,0,0,0.1); color: rgba(255,255,255,0.6); display: block; clear: both } .responsive-menu input[type=checkbox]{ width: auto; display: inline; clear: none } .responsive-menu input[type=button],.responsive-menu input[type=submit]{ color: #333; background: #fff } .responsive-menu input[type=button]:hover,.responsive-menu input[type=submit]:hover{ background: rgba(255,255,255,0.9) } /* Responsive Media Queries -------------------------------------------------------------------- */ @media screen and (max-width: 960px) { /* General 748px -------------------------------------------------------------------- */ #responsive-bar.logged-in { top: 32px; } .responsive-menu.logged-in { top: 80px; } div.page-section-back.header div.page-section { margin-top: 49px; } div.page-section-back div.page-section { width: 748px !important; } div.row { width: auto; } div.row div.column-full { width: 748px; } div.row.two-col div.column-one { width: 359px; } div.panel { width: 319px; } .page div.panel, .posts div.panel { width: 708px; } .page div.row div.column, .posts div.row div.column { float: none; width: auto; margin-right: 0; } /* For 1/2 Column */ .gravity-form-1-of-2-cols .gform_wrapper { width: 319px; } .gravity-form-1-of-2-cols .gform_wrapper .gform_body { width: 200px; } .gravity-form-1-of-2-cols .gform_wrapper .gform_footer { width: 100px; } /* Home 748px -------------------------------------------------------------------- */ /* Blog Feed Panel */ div.blog-feed { width: 359px; } div.blog-feed-post { width: 359px; } /* Twitter Feed */ div.twitter-feed .tweet-details { width: 359px; } div.twitter-feed .tweet-details p.tweet-handle { width: 150px; } div.twitter-feed .tweet-details p.tweet-handle { width: 150px; } div.twitter-feed .tweet-details p.tweet-date { width: 150px; } /* Client Logos */ div.client-logos div.row { width: 716px; } /* Testimonials Panel */ div.testimonial p.cite span.position, div.testimonial p.cite span.company { white-space: normal; } /* Slides 748px -------------------------------------------------------------------- */ div.page-section-back.slideshow { margin-top: 49px; } div.page-section-back.slideshow div.page-section { margin-left: -374px; } /* Footer 496px -------------------------------------------------------------------- */ div.page-section-back.footer img.copyright-logo { float: none; margin-bottom: 10px; } div.page-section-back.footer div.copyright-text { width: auto; float: none; } } @media screen and (max-width: 768px) { /* General 496px -------------------------------------------------------------------- */ #responsive-bar.logged-in { top: 46px; } .responsive-menu.logged-in { top: 94px; } div.page-section-back div.page-section { width: 496px !important; } div.row { width: auto; } div.row div.column-full { width: 496px; } div.row.two-col div.column-one { width: 496px; } div.panel, .page div.panel, .posts div.panel { width: 456px; } /* For 1/2 Column */ .gravity-form-1-of-2-cols .gform_wrapper { width: 456px; } .gravity-form-1-of-2-cols .gform_wrapper .gform_body { width: 330px; } .gravity-form-1-of-2-cols .gform_wrapper .gform_footer { width: 100px; } /* Home 496px -------------------------------------------------------------------- */ /* Blog Feed Panel */ div.blog-feed { width: 496px; margin-bottom: 30px; } div.blog-feed-post { width: 496px; } /* Twitter Feed */ div.twitter-feed .tweet-details { width: 456px; } /* Client Logos */ div.client-logos div.row { width: 424px; } /* Slides 496px -------------------------------------------------------------------- */ #slideshow { display: none; } div.page-section-back.slideshow { height: 220px; } div.page-section-back.slideshow div.page-section { margin-left: -248px; height: 220px; } div#upload-cv { display: none; } } @media screen and (max-width: 516px) { /* General 300px -------------------------------------------------------------------- */ div.page-section-back div.page-section { width: 300px !important; } div.row { width: auto; } div.row div.column-full { width: 300px; } div.row.two-col div.column-one { width: 300px; } div.panel, .page div.panel, .posts div.panel { width: 260px; } /* For 1/2 Column */ .gravity-form-1-of-2-cols .gform_wrapper { width: 260px; } .gravity-form-1-of-2-cols .gform_wrapper .gform_body { float: none; width: auto; } .gravity-form-1-of-2-cols .gform_wrapper .gform_footer { float: none; width: auto; } /* Home 300px -------------------------------------------------------------------- */ /* Blog Feed Panel */ div.blog-feed { width: 300px; } div.blog-feed-post { width: 300px; } /* Twitter Feed */ div.twitter-feed .tweet-details { width: 260px; } /* Client Logos */ div.client-logos div.row { width: 228px; } div.post-listing .featured-image-placeholder, div.post-listing img.alignleft { float: none; margin-bottom: 15px; } /* Slides 300px -------------------------------------------------------------------- */ div.page-section-back.slideshow { height: 270px; } div.page-section-back.slideshow div.page-section { margin-left: -150px; height: 270px; } .page-section-back.slideshow #key-btns div.btn { float: none; margin-bottom: 10px; } /* Footer 300px -------------------------------------------------------------------- */ div.page-section-back.footer img.copyright-logo { float: none; margin-bottom: 10px; } div.page-section-back.footer div.copyright-text { width: auto; float: none; } }