/************************************** * * * The Robert Group * * * * Custom theme for Drupal 7 * * June 19, 2014 * * * * app.sass (Compiles to app.css) * * Default styles * * * **************************************/ /************************************** * VARIABLES * **************************************/ /************************************** * GLOBAL STYLES * **************************************/ body { background-color: #f1f1f3; font-size: 13px; line-height: 1.5em; } body .page-wrapper { position: relative; bottom: 16px; background-color: white; padding: 25px; } h3 { font-weight: bold; margin-top: 0; } /************************************** * NEWSLETTER SIGNUP FORM * **************************************/ .mailchimp-signup-subscribe-form .mailchimp-signup-subscribe-form-description { color: #666666; } .mailchimp-signup-subscribe-form .form-item-mergevars-EMAIL label { font-style: italic; color: #999; font-size: 10px; margin-bottom: 0; } .mailchimp-signup-subscribe-form .btn { padding: 6px 18px; border-color: white; border: none; font-size: 12px; color: white; background-color: rgba(0, 68, 118, 0.65); } .mailchimp-signup-subscribe-form .btn:hover, .mailchimp-signup-subscribe-form .btn:active { background-color: rgba(0, 68, 118, 0.8); } /************************************** * ADMIN * **************************************/ ul.tabs--primary { margin-bottom: 25px; } /************************************** * BLOG DETAIL PAGE * **************************************/ .node-type-blog-post .field-name-field-blog-image img { width: 100%; height: auto; } .node-type-blog-post .field-name-title h2 { font-weight: 500; padding: 5px 0 5px; } .node-type-blog-post .field-name-body { font-size: 16px; line-height: 24px; } .node-type-blog-post .field-name-post-date { font-size: 16px; font-style: italic; font-weight: 100; margin: 0 0 10px; color: #999; } @media (min-width: 1200px) { .node-type-blog-post .field-name-field-blog-image { width: 50%; float: right; margin-left: 25px; margin-bottom: 10px; } .node-type-blog-post .field-name-title h2 { margin-top: 0; } } /**************************************** * HEADER, SEARCH BAR AND NAVBAR * * **************************************/ .header { height: 60px; margin-top: 8px; } .header a.home-link { margin-left: auto; margin-right: auto; width: 300px; display: block; } .header a.home-link img { width: auto; } @media (max-width: 675px) { .header a.home-link { margin-left: 0; margin-right: 0; } .header a.home-link img { width: 275px; } } @media (max-width: 500px) { .header a.home-link { margin-left: auto; margin-right: auto; width: 100%; margin-bottom: 20px; } .header a.home-link img { width: 100%; } } .header .region-header #block-search-form { right: 25px; position: absolute; width: 200px; margin-top: -28px; } .header .region-header #block-search-form #edit-search-block-form--2 { width: 125px; height: 25px; padding: 5px; float: right; } .header .region-header #block-search-form .input-group-btn button { padding: 3px 6px; } @media (max-width: 500px) { .header .region-header #block-search-form { right: 0; left: 0; width: 100%; margin-top: 20px; position: static; } .header .region-header #block-search-form #edit-search-block-form--2 { width: 100%; } } @media (max-width: 500px) { .navbar-wrapper { margin-top: 40px; } } .navbar-wrapper .navbar-default { background-color: #8fc3ea; } .navbar-wrapper .navbar-default .navbar-toggle .icon-bar { background-color: white !important; } .navbar-wrapper .navbar-default .navbar-collapse { padding-left: 0; padding-right: 0; border-top: none; } .navbar-wrapper .navbar-default .navbar-collapse ul.nav { float: none; } .navbar-wrapper .navbar-default .navbar-collapse ul.nav li { width: 12.5%; text-align: center; } .navbar-wrapper .navbar-default .navbar-collapse ul.nav li a { display: inline-block; width: 100%; background-color: #8fc3ea; color: white; text-transform: uppercase; font-size: 18px; font-weight: 500; } @media (max-width: 991px) and (min-width: 768px) { .navbar-wrapper .navbar-default .navbar-collapse ul.nav li a { font-size: 14px; padding-left: 10px; padding-right: 10px; } } .navbar-wrapper .navbar-default .navbar-collapse ul.nav li a:hover { background-color: #474829; } .navbar-wrapper .navbar-default .navbar-collapse ul.nav li.active a { background-color: #474829; } @media (max-width: 767px) { .navbar-wrapper .navbar-default .navbar-collapse ul.nav li { padding-left: 15px; width: 100%; text-align: left; } .navbar-wrapper .navbar-default .navbar-collapse ul.nav li.active a { background-color: #88abc5; } } /**************************************** * FOOTER * * **************************************/ footer { background-color: #474829; border-top: 16px solid #8fc3ea; height: 120px; position: relative; bottom: 16px; } footer p { text-align: center; font-size: 14px; color: white; } footer p a { color: white; } footer .social-links { display: block; width: 246px; list-style-type: none; margin-top: 23px; margin-bottom: 14px; margin-left: auto; margin-right: auto; padding-left: 0; } footer .social-links li { list-style-type: none; display: inline; margin-right: 8px; } footer .social-links li:hover { opacity: .8; } footer .social-links li:last-child { margin-right: 0; } #block-menu-menu-footer-menu { text-align: center; margin-top: -20px; } #block-menu-menu-footer-menu a, #block-menu-menu-footer-menu a:hover, #block-menu-menu-footer-menu a:focus { background-color: transparent !important; color: #333 !important; } /************************************** * TITLES/HEADINGS * **************************************/ h1.page-title { font-size: 40px; font-weight: 500; margin-top: 5px; margin-bottom: 25px; color: #474829; } /************************************** * LINKS * **************************************/ a { color: #8fc3ea; } /************************************** * TITLES/HEADINGS * **************************************/ /************************************** * RESPONSIVE IMAGES * **************************************/ img.resp-img { width: 100%; } /************************************** * HOMEPAGE * **************************************/ body.front .region-home-top { margin-bottom: 25px; } body.front h2.column-heading { text-transform: uppercase; font-weight: 600; font-size: 16px; color: black; background-color: #e0eef9; padding: 12px 15px 5px; margin-top: 0; margin-bottom: 0; } body.front .region-home-bottom-1 .block img, body.front .region-home-bottom-2 .block img, body.front .region-home-bottom-3 .block img, body.front .region-home-bottom-4 .block img { width: 100%; } body.front .region-home-bottom-1 .block h2, body.front .region-home-bottom-2 .block h2, body.front .region-home-bottom-3 .block h2, body.front .region-home-bottom-4 .block h2 { text-transform: uppercase; font-weight: 500; font-size: 16px; color: white; background-color: #474829; padding: 6px 8px 5px; } body.front .region-home-bottom-1 .block p, body.front .region-home-bottom-2 .block p, body.front .region-home-bottom-3 .block p, body.front .region-home-bottom-4 .block p { color: #333; } body.front .region-home-bottom-1 .block ul, body.front .region-home-bottom-2 .block ul, body.front .region-home-bottom-3 .block ul, body.front .region-home-bottom-4 .block ul { padding-left: 20px; margin-top: 20px; } body.front .region-home-bottom-1 .block ul li, body.front .region-home-bottom-2 .block ul li, body.front .region-home-bottom-3 .block ul li, body.front .region-home-bottom-4 .block ul li { margin-bottom: 6px; } body.front .region-home-bottom-1 .block .content, body.front .region-home-bottom-2 .block .content { margin-bottom: 10px; } body.front .region-home-bottom-1 .block a.home-read-more-btn, body.front .region-home-bottom-2 .block a.home-read-more-btn { margin-left: 5px; display: inline; color: #71a4cb; font-size: 12px; line-height: 1.5em; border-radius: 0; font-weight: normal; text-transform: uppercase; text-align: center; cursor: pointer; white-space: nowrap; } body.front .region-home-bottom-1 .block a.home-read-more-btn:hover, body.front .region-home-bottom-2 .block a.home-read-more-btn:hover { text-decoration: none; color: #5a8aae; } body.front .region-home-bottom-3 .media .media-body h4.media-heading { font-size: 14px; font-weight: 500; } body.front .region-home-bottom-3 .media .media-body p { font-size: 10px; line-height: 15px; } body.front .region-home-bottom-1 { background-color: #e0eef9; padding: 6px 15px 5px; } body.front .region-home-bottom-1 .block h2 { text-transform: none; font-weight: 700; font-size: 12px; color: black; background-color: transparent; padding: 10px 0px 0px; margin-bottom: 5px; } body.front .region-home-bottom-1 .block .content p { font-size: 12px; line-height: 18px; } @media (max-width: 767px) { #home-bottom section { margin-bottom: 45px; } } /************************************** * HOMEPAGE BLOG BLOCK * **************************************/ #block-views-blog-block { margin-bottom: 90px; } #block-views-blog-block .view-blog a { text-decoration: none; } #block-views-blog-block .view-blog .view-footer { float: left; clear: both; } #block-views-blog-block .view-blog .view-footer .news-page-link { color: #71a4cb; font-size: 14px; line-height: 1.5em; border-radius: 0; font-weight: normal; text-transform: uppercase; } #block-views-blog-block .view-blog .views-row { margin-top: 25px; margin-bottom: 25px; clear: both; } #block-views-blog-block .view-blog .views-row:first-child { margin-top: 20px; border-top: none; padding-top: 0; } #block-views-blog-block .view-blog .views-row .views-field-field-blog-image { margin-right: 25px; float: left; } #block-views-blog-block .view-blog .views-row .views-field-field-blog-image img { width: auto; margin-bottom: 25px; } #block-views-blog-block .view-blog .views-row .views-field-title { font-weight: 700; font-size: 24px; line-height: 29px; letter-spacing: -0.07em; color: black; margin-bottom: 4px; } #block-views-blog-block .view-blog .views-row .views-field-created { font-size: 14px; color: #888; margin-top: 8px; margin-bottom: 3px; } @media (min-width: 1200px) { #block-views-blog-block .view-blog .views-row .views-field-body { margin-left: 285px; } #block-views-blog-block .view-blog .views-row .views-field-field-blog-image img { width: 300px; height: auto; } } @media (max-width: 1199px) and (min-width: 992px) { #block-views-blog-block .view-blog .views-row { height: auto; margin-top: 50px; margin-bottom: 50px; } #block-views-blog-block .view-blog .views-row .views-field-body { margin-left: 225px; } #block-views-blog-block .view-blog .views-row .views-field-body .home-read-more-btn { display: inline-block; float: right; } #block-views-blog-block .view-blog .views-row .views-field-field-blog-image img { width: 200px; height: auto; } } @media (max-width: 991px) { #block-views-blog-block .view-blog .views-row .views-field-body { margin-left: 285px; } #block-views-blog-block .view-blog .views-row .views-field-field-blog-image { width: 276px; } #block-views-blog-block .view-blog .views-row .views-field-field-blog-image img { width: 100%; height: auto; } } @media (max-width: 600px) { #block-views-blog-block .view-blog .views-row .views-field-body { margin-left: 0; } #block-views-blog-block .view-blog .views-row .views-field-field-blog-image { float: none; margin-right: 0; width: 100%; } #block-views-blog-block .view-blog .views-row .views-field-field-blog-image img { width: 100%; height: auto; } } /**************************************** * HOMEPAGE CAROUSEL * * **************************************/ body.front #carousel-container { padding-left: 0; padding-right: 0; position: relative; } body.front #carousel-container .carousel-indicators { left: 0px; margin-left: 23px; width: auto; bottom: 15px; } body.front #carousel-container .carousel-indicators li:first-child { position: relative; right: 2px; } body.front #carousel-container .carousel-controls .carousel-control { background-image: none; color: white; opacity: 0.75; } body.front #carousel-container .item .carousel-caption { position: absolute; bottom: 0; left: 15px; right: auto; padding-bottom: 0; } body.front #carousel-container .item .carousel-caption h1 { text-transform: uppercase; font-weight: 600; font-size: 25px; text-align: left; padding: 20px; text-shadow: 0 0 0 #000; margin-bottom: 0; margin-top: 0; opacity: .9; } body.front #carousel-container .item .carousel-caption .top { background-color: rgba(0, 0, 0, 0.65); color: white; padding-bottom: 19px; } body.front #carousel-container .item .slide-left { padding-left: 0; position: relative; } body.front #carousel-container .item .slide-right { padding-right: 0; } body.front #carousel-container .item .slide-right img { width: 100%; display: block; } body.front #carousel-container .item .slide-full img { padding-left: 0; position: relative; width: 100%; } @media (min-width: 1200px) { body.front #carousel-container .item .slide-left .carousel-caption h1 { max-width: 833px; } } ul.pagination li a { padding: 3px 7px; font-size: 14px; } ul.pagination li.active a { color: white; background-color: #a8b4bd; text-transform: uppercase; border-radius: 0; } ul.pagination li.active a:hover { text-decoration: none; background-color: #5d7b92; } /************************************** * LATEST NEWS (BLOG) PAGE * **************************************/ body.page-news .view-blog a { text-decoration: none; } body.page-news .view-blog .text-center { clear: both; } body.page-news .view-blog .row { margin-bottom: 50px; clear: both; } body.page-news .view-blog .row .views-field-field-blog-image img { width: 100%; height: auto; } body.page-news .view-blog .row .views-field-title { font-weight: 700; font-size: 30px; line-height: 35px; letter-spacing: -0.07em; color: black; margin-top: 10px; } body.page-news .view-blog .row .views-field-created { font-size: 18px; color: #888; margin-top: 12px; margin-bottom: 3px; letter-spacing: -0.05em; } body.page-news .view-blog .row .views-field-addtoany-link { margin-bottom: 7px; } body.page-news .view-blog .row .views-field-addtoany-link .a2a_dd { padding-left: 0; } body.page-news .view-blog .row .views-field-body { font-size: 14px; line-height: 21px; padding-bottom: 10px; } body.page-news .view-blog .row .views-field-field-link-to-post-page a { color: white; background-color: #a8b4bd; padding: 3px 7px; text-transform: uppercase; } body.page-news .view-blog .row .views-field-field-link-to-post-page a:hover { text-decoration: none; background-color: #5d7b92; } @media (max-width: 991px) { body.page-news .view-blog .views-row .views-field-field-blog-image { width: 50%; } } @media (max-width: 767px) { body.page-news .view-blog .views-row .views-field-field-blog-image { width: 100%; float: none; padding-bottom: 15px; } } /************************************** * ABOUT US PAGE * **************************************/ body.page-node-1 .region-sidebar-left .block img, body.page-node-1 .region-sidebar-right .block img, body.page-node-1 .region-content .block img, body.page-node-397 .region-sidebar-left .block img, body.page-node-397 .region-sidebar-right .block img, body.page-node-397 .region-content .block img { width: 100%; } body.page-node-1 .region-sidebar-left .block h2, body.page-node-1 .region-sidebar-right .block h2, body.page-node-1 .region-content .block h2, body.page-node-397 .region-sidebar-left .block h2, body.page-node-397 .region-sidebar-right .block h2, body.page-node-397 .region-content .block h2 { text-transform: uppercase; font-weight: 500; font-size: 16px; color: white; background-color: #474829; padding: 6px 8px 5px; } body.page-node-1 .region-sidebar-left .block p, body.page-node-1 .region-sidebar-right .block p, body.page-node-1 .region-content .block p, body.page-node-397 .region-sidebar-left .block p, body.page-node-397 .region-sidebar-right .block p, body.page-node-397 .region-content .block p { color: #333; text-align: justify; } body.page-node-1 .region-sidebar-left .block ul, body.page-node-1 .region-sidebar-right .block ul, body.page-node-1 .region-content .block ul, body.page-node-397 .region-sidebar-left .block ul, body.page-node-397 .region-sidebar-right .block ul, body.page-node-397 .region-content .block ul { padding-left: 20px; margin-top: 20px; } body.page-node-1 .region-sidebar-left .block ul li, body.page-node-1 .region-sidebar-right .block ul li, body.page-node-1 .region-content .block ul li, body.page-node-397 .region-sidebar-left .block ul li, body.page-node-397 .region-sidebar-right .block ul li, body.page-node-397 .region-content .block ul li { margin-bottom: 6px; } @media (max-width: 767px) { body.page-node-1 section { margin-bottom: 45px; } } .view-about-us .views-field-field-column-image img { width: 100%; height: auto; } .view-about-us .views-field-title { text-transform: uppercase; font-weight: 500; font-size: 16px; color: white; background-color: #474829; padding: 6px 8px 5px; margin-top: 20px; margin-bottom: 20px; } /************************************** * CONTACT US PAGE * **************************************/ body.page-node-5 .region-sidebar-right .block img, body.page-node-5 .region-content .block img, body.page-node-396 .region-sidebar-right .block img, body.page-node-396 .region-content .block img { width: auto; } body.page-node-5 .region-sidebar-right .block h2, body.page-node-5 .region-content .block h2, body.page-node-396 .region-sidebar-right .block h2, body.page-node-396 .region-content .block h2 { text-transform: uppercase; font-weight: 500; font-size: 16px; color: white; background-color: #474829; padding: 6px 8px 5px; } body.page-node-5 .region-sidebar-right .block p, body.page-node-5 .region-content .block p, body.page-node-396 .region-sidebar-right .block p, body.page-node-396 .region-content .block p { color: #333; } body.page-node-5 .region-sidebar-right .block ul, body.page-node-5 .region-content .block ul, body.page-node-396 .region-sidebar-right .block ul, body.page-node-396 .region-content .block ul { padding-left: 20px; margin-top: 20px; } body.page-node-5 .region-sidebar-right .block ul li, body.page-node-5 .region-content .block ul li, body.page-node-396 .region-sidebar-right .block ul li, body.page-node-396 .region-content .block ul li { margin-bottom: 6px; } body.page-node-5 .contact-info, body.page-node-396 .contact-info { position: absolute; right: 0; top: 57px; margin-left: 20px; } body.page-node-5 .contact-info div, body.page-node-396 .contact-info div { margin-bottom: 7px; } body.page-node-5 .contact-info .address-block, body.page-node-396 .contact-info .address-block { margin-bottom: 40px; } @media (max-width: 1199px) { body.page-node-5 .contact-info, body.page-node-396 .contact-info { position: relative; top: 10px; margin-left: 0; } body.page-node-5 #map, body.page-node-396 #map { width: 100%; } } body.page-node-5 .panel-group, body.page-node-396 .panel-group { margin-bottom: 50px; } body.page-node-5 .panel-group h3, body.page-node-396 .panel-group h3 { text-transform: uppercase; font-size: 20px; } /************************************** * PROJECT DETAIL PAGE * **************************************/ body.node-type-project .field-name-body { text-align: justify; } body.node-type-project #project-detail-carousel .carousel-control { background-image: none; filter: none; } body.node-type-project #project-detail-carousel .carousel-inner .item .item-caption { background-color: black; color: white; font-size: 12px; line-height: 12px; padding: 6px 7px 6px; min-height: 19px; } /**************************************** * PROJECTS LISTING PAGE * * **************************************/ body.page-projects .media { margin-top: 0px; margin-bottom: 30px; } body.page-projects .media .project-image { position: relative; width: 100%; height: 100%; display: block; } body.page-projects .media .project-image .project-overlay { position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.75); padding-top: 175px; text-align: center; opacity: 0; transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; } body.page-projects .media .project-image .project-overlay:hover { opacity: 1; } body.page-projects .media .project-image .project-overlay .btn { text-transform: uppercase; } body.page-projects .media .media-body { color: white; background-color: #333; margin-top: 5px; padding: 15px; } body.page-projects .media .media-body h4.media-heading { color: white; text-transform: uppercase; font-weight: 500; font-size: 13px; line-height: 18px; margin-bottom: 10px; } body.page-projects .media .media-body p { color: white; font-size: 22px; font-weight: 700; line-height: 28px; margin-bottom: 10.5px; } body.page-projects .view-footer p { font-size: 18px; font-weight: 600; } /************************************** * TEAM MEMBER DETAIL PAGE * **************************************/ body.node-type-team-member .field-name-field-bio-image img { width: 100%; max-width: 100%; height: auto; } body.node-type-team-member h2 { margin-top: 0; margin-bottom: 20px; } body.node-type-team-member .field-name-field-job-title { font-style: italic; font-size: 18px; margin-bottom: 5px; } body.node-type-team-member .field-name-field-email, body.node-type-team-member .field-name-field-phone { font-size: 18px; margin-bottom: 5px; } body.node-type-team-member .field-name-body { margin-top: 15px; text-align: justify; } /************************************** * TEAM MEMBER LISTING PAGE * **************************************/ @media (min-width: 1200px) { body.page-team .view-content { padding: 30px 140px 0; } } body.page-team .media { margin-top: 0px; margin-bottom: 30px; } body.page-team .media .team-image { position: relative; width: 100%; height: 100%; display: block; } body.page-team .media .team-image .team-overlay { position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.75); padding-top: 175px; text-align: center; opacity: 0; transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; } body.page-team .media .team-image .team-overlay:hover { opacity: 1; } body.page-team .media .team-image .team-overlay .btn { text-transform: uppercase; } body.page-team .media .media-body { color: white; background-color: black; margin-top: 5px; } body.page-team .media .media-body h4.media-heading { color: white; padding-left: 10px; padding-top: 10px; text-transform: uppercase; font-weight: 500; font-size: 18px; } body.page-team .media .media-body p { color: white; padding-left: 10px; font-style: italic; margin-bottom: 10.5px; } /**************************************** * CLIENT LISTING PAGE * * **************************************/ body.page-clients .row { margin-bottom: 0px; } body.page-clients .row .col-sm-6 .media .media-body h4, body.page-clients .row .col-sm-4 .media .media-body h4 { margin-top: 19px; margin-left: 20px; font-size: 14px; } /**************************************** * SEARCH RESULTS PAGE * * **************************************/ body.page-search .search-results .search-result h3.title { font-size: 22px; font-weight: 500; margin-bottom: 5px; } body.page-search .search-results .search-result h3.title a:hover { text-decoration: none; } /**************************************** * INSTAGRAM BLOCK (New Version 12/3/16)* * **************************************/ #block-rgroup-gen-rgroup-instagram .content a img, #block-rgroup-blocks-rgroup-static-instagram .content a img, #block-block-9 .content a img, .block-instagram-block .content a img, #block-views-image-gallery-block .content a img { width: 47% !important; height: auto !important; margin: 0 5px 5px 0px; width: 300px; height: 300px; }