/* Theme Name: Research 4 Life - Responsive Theme URI: http://www.research4life.org Author: Nicola Whyte, John Van Ham, David Evans Author URI: http://www.ghostlimited.com Description: Responsive Wordpress theme created for Research4Life by Ghost Version: 1.0 */ /***************************************************************************************************************** Mobile First Design. Default CSS is for all sizes including Mobile. Media size overrides below for larger sizes. *****************************************************************************************************************/ /* Typography */ body { font-family: 'Open Sans', sans-serif !important; font-size: 18px; line-height: 1.4;} h1 { font-size: 50px; font-weight: bold; margin-bottom: 40px; } h2 { font-size: 42px; font-weight: bold; margin-bottom: 30px; } h3 { font-size: 24px; font-weight: bold; margin-bottom: 20px; } h4 { font-size: 22px; font-weight: bold; margin-bottom: 20px; } h5 { font-size: 20px; font-weight: bold; line-height: 1.4; } h6 { font-size: 18px; font-weight: bold; line-height: 1.4; } p { margin-bottom: 20px; } a { color: #f49925; } ul { margin-bottom: 20px; } .col-centered { float: none; margin: 0 auto; } .alignnone { max-width: 100%; height: auto; } .alignleft { float: left; margin-right: 20px; max-width: 100%; height: auto; } .alignright { float: right; margin-left: 20px; max-width: 100%; height: auto; } .aligncenter { float: none; margin: 0 auto !important; max-width: 100%; height: auto; display: block; } .embed-container { position: relative; padding-bottom: 56.25%; overflow: hidden; max-width: 100%; height: auto; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .img.wp-image-[*] { max-width: 100%; height: auto; } .img-fluid { max-width: 100%; height: auto; } a.button { padding: 10px 40px 10px 40px; width: 40%; margin: 0 auto; justify-content: center; background-color: #586F7C; color: #FFF; text-transform: uppercase; font-weight: bold; text-align: center; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;} a.button:hover, a.button:active { text-decoration: none; background-color: #f49925; } .wpml-ls-display { display: none; } #site-language-selector { display: none;} /* Site Header */ #site-header { margin-top:5px; } #site-header-left img { max-width: 300px; padding-top: 15px; } #site-header #site-description { font-size: 14px; margin-top: 13px; font-style: italic; color: #586F7C; } #site-header #site-search { margin-top:5px; max-width: 500px; display: inline-block; } #search-form { display:inline-block; width: 50%; margin-bottom: -5px; margin-right: 10px;} #site-search .form-control, #mobile-search .form-control { border-color: #888888; border-radius:0; } .btn-search { background-color: #F85B27; color: #fff; border-color: #888888; border-radius:0; padding: 6px 6px 4px 6px; } .btn-search .glyphicon { font-size: 18px; } .header-social-icons { display: inline-block; font-size: 30px; letter-spacing: 3px; } .header-social-icons a, .header-social-icons a:active, .header-social-icons a:visited { color:#586F7C; text-decoration: none; } .wpml-ls-legacy-list-horizontal { border: 1px solid transparent; padding: 0 !important; clear: both; } /* Navigation */ #site-navigation { background-color: #586F7C; border: none; border-radius: 0; margin: 15px 0; /*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/ } #site-navigation .navbar-nav>li>#mobile-search { padding: 10px 15px; line-height: 20px; } #site-navigation .navbar-nav>li>a { color: #fff; text-transform: uppercase; letter-spacing: 0.5px; font-size: 13px; line-height: normal; } #site-navigation .navbar-nav>li>a .glyphicon { font-size: 20px; margin-bottom: -4px; } #site-navigation .navbar-nav a .item-inner { display: inline-block; border-bottom: solid 2px transparent; margin-top: 2px; } #site-navigation .navbar-nav a:hover .item-inner { display: inline-block; border-bottom: solid 2px #fff; margin-top: 2px; } #site-navigation .navbar-nav>.active>a, #site-navigation .navbar-nav>.active>a:focus, #site-navigation .navbar-nav>.active>a:hover { color: #fff; background-color: #586F7C; text-decoration: none; } /* Active Main Item */ #site-navigation .navbar-nav>.active>a .item-inner { display: inline-block; border-bottom: solid 2px #fff; margin-top: 2px; } #site-navigation .navbar-nav>.active>a:focus .item-inner, #site-navigation .navbar-nav>.active>a:hover .item-inner { border-bottom: solid 2px #000; margin-top: 2px; } #site-navigation .navbar-nav>.current_page_ancestor>a .item-inner { display: inline-block; border-bottom: solid 2px #fff; } #site-navigation .navbar-nav>.current_page_ancestor>a:hover .item-inner { border-bottom: solid 2px #000; } #site-navigation .dropdown-menu>li>a:focus, #site-navigation .dropdown-menu>li>a:hover { background-color: transparent; } #site-navigation .navbar-nav>.open>a, #site-navigation .navbar-nav>.open>a:focus, #site-navigation .navbar-nav>.open>a:hover { background-color: transparent; } #site-navigation .dropdown-menu { border-radius: 0; border-bottom-color: #909090; border-left-color: #909090; border-right-color: #909090; border-top-color: #c9c9c9; } #site-navigation .navbar-nav .open .dropdown-menu>li>a { text-transform: uppercase; color: #fff; } #site-navigation .dropdown-menu>.active>a, #site-navigation .dropdown-menu>.active>a:focus, #site-navigation .dropdown-menu>.active>a:hover { color: #000; text-decoration: none; background-color: transparent; } #site-navigation .dropdown-menu>.active>a .item-inner { display: inline-block; border-bottom: solid 2px #656565; } #site-navigation .dropdown-menu>.active>a:focus .item-inner, #site-navigation .dropdown-menu>.active>a:hover .item-inner { display: inline-block; border-bottom: solid 2px #000; } #site-navigation.navbar-default .navbar-toggle { border-radius: 0; } #site-navigation.navbar-default .navbar-toggle .icon-bar { background-color: #fff; } #site-navigation.navbar-default .navbar-toggle:focus, #site-navigation.navbar-default .navbar-toggle:hover { background-color: #fa662a; } /* Home Page */ #home-carousel { margin-bottom: 20px; } #home-carousel .carousel { margin-bottom: 20px; } #home-carousel .carousel-caption { text-shadow: none; color: #000; background: rgba(255, 255, 255, 0.8); padding: 10px 10px 30px 10px; bottom: 25% } #home-carousel .carousel-caption h1 { text-transform: uppercase; margin-bottom: 25px; font-size: 30px; font-weight: 600; } #home-carousel .carousel-caption h1 span.larger { font-size: 36px; } #home-carousel .carousel-caption h1 span.redhighlight { color: #8B1E3F; } #home-carousel .carousel-indicators li { width:16px; height: 16px; background-color: #E2DEDE; border-color: #E2DEDE; margin: 0; } #home-carousel .carousel-indicators .active { width:16px; height: 16px; background-color: #F36726; border-color: #F36726; } #home-section1 .content-inner { padding: 30px 5px; font-size: 16px; } #home-section1 .button-container { text-align: center; } #home-section1 a.button { padding: 10px 40px 10px 40px; width: 40%; margin: 0 auto; justify-content: center; background-color: #586F7C; color: #FFF; text-transform: uppercase; font-weight: bold; text-align: center; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;} #home-section1 a.button:hover, #home-section1 a.button:active { text-decoration: none; background-color: #f49925; } #home-section-latestnews #content-home { overflow: auto; padding: 20px 50px 20px 50px; } #home-section-latestnews .srp-widget-title { text-transform: uppercase; font-size: 30px; margin: 10px 0 20px 0; font-weight: bold; } #home-section-latestnews .srp-post-title { font-size: 18px; margin-bottom: 20px; line-height: 1.4; } #home-section-latestnews .srp-post-title a { color: #586F7C; } #home-section-latestnews .srp-post-content { font-size: 18px; line-height: 1.4; margin-bottom: 20px; } #home-section-latestnews .srp-post-content a { color: #586F7C; } #home-section-latestnews .srp-post-content-container { display: block; } #home-section-latestnews .srp-thumbnail-box { flex: none; width: 100%; margin-right: 0;} #home-section-latestnews .srp-content-box { flex: none; width: 100%; } #home-section-latestnews .srp-thumbnail-box img { max-width: 100%; } #home-section2 { margin-bottom: 30px; } #home-section2 .home-section2-box { padding: 0 0 0 3px; } #home-section2 .box-bgimage { position: relative; background-position: center center; background-size: cover; } #home-section2 .box-bgimage-inner { color: #000; padding: 40px; } #home-section2 h3 { margin: 0 0 20px; font-size: 17px; font-weight: bold; } #home-section2 .box-bgimage-inner a { position:absolute; bottom: 10px; right: 15px; color: #fff; } #home-section2 a.box-ft .box-footer { text-align: center; text-transform: uppercase; font-size: 18px; padding: 8px 6px 6px 6px; font-weight: bold; } #home-section2 a.box-ft .box-footer { background-color: #efefef; color: #006692; } #home-section2 a.box-ft:hover, #home-section2 a.box-ft:active { text-decoration: none; } #home-section2 a.box-ft:hover .box-footer, #home-section2 a.box-ft:active .box-footer { background-color: #586F7C; color: #FFF; } /* About Page */ .logo-band { text-align: center; margin-bottom: 50px; } .logo-band img { margin: 20px; } #about-buttons { overflow: auto; padding: 30px 0 30px 0;} .link-button { margin: 20px 0 20px 0; text-align: center; } #about-buttons .link-button a.button { padding: 10px 40px 10px 40px; display: flex; justify-content: center; background-color: #586F7C; color: #FFF; text-transform: uppercase; font-weight: bold; text-align: center; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; width: auto;} #about-buttons .link-button a.button:hover, a.button:active { text-decoration: none; background-color: #f49925; } #video-section { margin: 30px 0 50px 0; clear: both; display: flex; flex-wrap: wrap; } #video-section .about-video { background: #000; display: flex; align-items: center; } .video-description { padding: 30px; background-color: #f4f5f0; } /* Access Page */ #section-grid { overflow: auto; margin: 50px 0 20px 0; display: flex; flex-wrap: wrap; } #section-grid .section { margin-bottom: 30px; display: flex; } #section-grid .section-inner { padding: 30px; background: #f4f5ef; text-align: center; } #section-grid .section h5 a { color: #000; } #section-grid .section-inner img.icon { width: 125px; height: 125px; border-radius: 125px; -webkit-border-radius: 125px; -moz-border-radius: 125px; border: 1px solid #eaeaea; } /* Training Page */ #feature { padding: 30px; background: #f4f5ef; } #feature .link { text-align: center; } #feature .link a.button { padding: 10px 40px 10px 40px; width: 40%; margin: 0 auto; justify-content: center; background-color: #586F7C; color: #FFF; text-transform: uppercase; font-weight: bold; text-align: center; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;} #feature .link a.button:hover, #feature a.button:active { text-decoration: none; background-color: #f49925; } #learning-grid { overflow: auto; margin: 30px 0 20px 0; display: flex; flex-wrap: wrap; } #learning-grid .lesson { margin-bottom: 30px; display: flex; } #learning-grid .lesson-inner { padding: 20px 30px 20px 30px; background: #f4f5ef; text-align: center; } #learning-grid .lesson-inner p, #learning-grid .lesson-inner ul { text-align: left; } #learning-grid .lesson h5 a { color: #000; } /* Voices Page */ #highlights-section { /*display: flex; flex-wrap: wrap;*/ } #stories-grid { margin-bottom: 100px; overflow: auto; } #stories-grid .category { padding: 0 50px 80px 50px; text-align: center; } #stories-grid .category h5 a { color: #000; } #stories-grid .category-inner img.icon { width: 150px; height: 150px; border-radius: 150px; -webkit-border-radius: 150px; -moz-border-radius: 150px; border: 1px solid #eaeaea; } /* News */ #latest-news { padding: 30px; background: #f4f5ef; overflow: auto; margin-bottom: 40px; } #latest-news .news-content { line-height: 1.4; } #latest-news .news-content h4 { margin-top: 0 !important; } #latest-news a.button { padding: 10px 40px 10px 40px; width: 40%; margin: 0 auto; justify-content: center; background-color: #586F7C; color: #FFF; text-transform: uppercase; font-weight: bold; text-align: center; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;} #latest-news a.button:hover, #latest-news a.button:active { text-decoration: none; background-color: #f49925; } #news-section { margin-bottom: 60px; } .news-item-container { padding: 20px 0 20px; margin-bottom: 20px;} .news-item-thumbnail { width: 150px; height: 150px; margin: 0 auto; padding-top: 10px; } .news-item-thumbnail img { width: 150px; height: 150px; border-radius: 150px; -webkit-border-radius: 150px; -moz-border-radius: 150px; border: 1px solid #ccc; } h5.news-item-title { margin-top: 0; } h5.news-item-title a { color: #000; } .news-item-excerpt { margin-bottom: 20px; } .news-item-readmore a { text-transform: uppercase; color: #7a9acd; font-weight: bold; } .next-post { text-align: right; } #infscr-loading { text-align: center; margin-bottom: 20px; } #ssba-classic-2 { margin: 20px 0 20px 0; } ul.post-categories {list-style-type: none;} /* Video & Resources Pages */ #video-grid { } #video-grid .video-title { text-align: center; padding: 15px 10px 20px 10px; } #video-resources { margin: 20px 0 20px 0; padding-top: 10px; /*border-top: 1px solid #ccc;*/ overflow: auto; } #video-resources .video-item { margin-top: 20px; } #video-resources p, #marketing-resources p, #library-resources p { margin-bottom: 20px; } #marketing-resources, #library-resources { margin: 20px 0 20px 0; padding-top: 10px; /*border-top: 1px solid #ccc;*/ overflow: auto; display: flex; flex-wrap: wrap; } .marketing-item { display: flex; flex-wrap: wrap; } #marketing-resources .marketing-img, #library-resources .marketing-img { text-align: center; margin: 0 auto; display: flex; flex-direction: column; vertical-align: bottom; } #marketing-resources .marketing-item img, #library-resources .marketing-item img { width: 200px; height: auto; border: 1px solid #ccc;} #marketing-resources .marketing-description, #library-resources .marketing-description { margin-top: 20px; padding: 0 20px 0 20px; } /* Site Wide Content */ .page-title-bkg { width: 100%; height: 450px; margin-top: -20px; margin-bottom: 50px; display: flex; align-items: center; justify-content: center; background-position: center center !important; } .page-title-bkg .title { margin: 0 auto; border: 2px solid #FFF; background-color: rgba(0, 0, 0, 0.5); } .page-title-bkg .title h1 { text-align: center; padding: 25px 50px 25px 50px; color: #FFF; margin: 0; } h2.line { display: table; white-space: nowrap; margin-top: 50px; margin-bottom: 30px; } h2.line:before, h2.line:after { border-top: 1px solid #000; content: ''; display: table-cell; position: relative; top: 0.6em; width: 45%; } h2.line:before { right: 1.5%; } h2.line:after { left: 1.5%; } #content { margin: 30px 0 30px 0; padding: 0 100px 0 100px; } img.icon { max-width: 150px; } #content a.button { padding: 10px 40px 10px 40px; width: 40%; margin: 0 auto; justify-content: center; background-color: #586F7C; color: #FFF; text-transform: uppercase; font-weight: bold; text-align: center; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;} #content a.button:hover, #content a.button:active { text-decoration: none; background-color: #f49925; } .search-form { margin: 25px 0 50px 0; } .searchform { margin-bottom: 50px; } p.wp-caption-text { font-size: 16px; margin-top: 10px; } /* Image Grid - usese flexbox to align images - it expects links to be around each image */ .img-grid { display: -ms-flex; display: -webkit-flex; display: flex; flex-wrap: wrap; } .img-grid a { flex: 0 0 50%; display: flex; justify-content: center; flex-direction: column; align-items: center; } .img-grid a img { float: none; margin: 0; } /* ARROWS */ .link-arrow-container { margin-top: 18px; text-align: center; } .link-arrow { position:relative; display: inline-block; padding: 10px 19px; font-size: 14px; text-transform: uppercase; text-shadow: none; background-color: #586F7C; color: #FFF; font-weight: normal; } .link-arrow:hover { color: #cecece; text-decoration: none; } .link-arrow:after { content: ""; display: block; width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 20px solid #586F7C; position: absolute; right: -20px; top: 0; } .link-arrow-light { background-color: #fff; color: #000; font-weight: 600; } .link-arrow-light:hover { color: #3c3c3c; text-decoration: none; } .link-arrow-light:after { border-left-color: #fff; } .backtotop { font-size: 42px; position: fixed; bottom: 42px; right: 42px; display: none; /*text-shadow: 1px 1px #ffffff*/; color: #F85B27; } /* Site Footer */ #footer-widgets { padding: 0 ; background-color: #586F7C; color: #fff; margin-top: 3px; } #footer-widgets .button-container { text-align: center; margin-bottom: 20px; } #footer-widgets a.button { padding: 10px 40px 10px 40px; width: 40%; margin: 0 auto; justify-content: center; background-color: #FFF; color: #333; text-transform: uppercase; font-weight: bold; text-align: center; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;} #footer-widgets a.button:hover, #footer-widgets a.button:active { text-decoration: none; background-color: #f49925; } #footer-widgets .content-inner { padding: 30px 15px 0 15px; font-size: 16px; } #footer-widgets .home-social-icons { padding-top: 14px; text-align: center; } #footer-widgets .home-social-icons a { text-decoration: none !important; } #footer-widgets .home-social-icons .fab { border: 1px solid #fff; border-radius: 100%; padding: 10px 0; width: 44px; height: 44px; text-align: center; background: #fff; color: #586F7C; margin: 8px 6px; font-size: 22px; } #footer-widgets .home-social-icons .fab:hover, #footer-widgets .home-social-icons .fab:active { text-decoration: none; } #footer-widgets .home-twitter-embed { padding: 0; } #footer-widgets .home-twitter-embed .content-inner { padding: 30px 15px 30px 15px; } #footer-widgets .home-twitter-embed h3 { margin-top: 0; } #footer-widgets .home-twitter-embed h3 a { color: #fff; text-decoration: underline; font-weight: normal; } #footer-widgets .widget_woodojo_tweets a { color: #FFF; text-decoration: underline; } #footer-widgets .container .row > div { padding: 10px 15px 10px 15px; } #site-logostrip { padding: 0 20px 0 20px; } #site-logostrip .row { list-style: none; display: flex; justify-content: space-evenly; align-items: center; flex-flow: row wrap; } #site-logostrip .row img { padding: 5px 10px; } #site-logostrip .logo-band { margin-bottom: 0px; } #site-footer { background-color: #353535; color: #FFF; padding-top: 10px; padding-bottom: 10px; } #site-footer #site-footer-right { text-align: right; } #site-footer #site-footer-right>a { margin-right: 20px; color: #fff; } #site-footer .footer-social-icons { display: inline-block; } #site-footer .footer-social-icons .fab, #site-footer .footer-social-icons .fas { border: solid 1px #fff; border-radius: 100%; padding: 6px 0; width: 24px; height: 24px; text-align: center; color: #fff; margin: 0 1px; font-size: 12px; } #site-footer .footer-social-icons .fab:hover { text-decoration: none; } /***************************************************** Above XS Breakpoint = Tablet, Desktop *****************************************************/ @media (min-width: 768px) { /* Site Header */ #site-header #site-header-right { text-align: right; } /* Navigation */ #site-navigation .container { padding:0; } #site-navigation #navbar { padding: 0; } #site-navigation { padding: 8px 0 8px 0; min-height: 0; } #site-navigation .nav { width:100%; /* display:flex; */ } #site-navigation .nav > li { text-align: center; border-left: 1px solid #ffffff; padding: 2px 8px; /* flex:1; */ } #site-navigation.navbar-flex .nav { display:flex; } #site-navigation.navbar-flex .nav > li { flex:1; } #site-navigation.navbar-center .nav { float:none; margin: 0 auto; display: table; table-layout: fixed; } #site-navigation .navbar-nav .open .dropdown-menu>li>a { color: #000; } #site-navigation .dropdown-menu a:focus .item-inner, #site-navigation .dropdown-menu a:hover .item-inner { display: inline-block; border-bottom: solid 2px #656565; } #site-navigation .nav > li:first-of-type { border-left-color: transparent; } #site-navigation .navbar-nav>li>a { padding:0 } /* Home Page */ #home-section1 .content-inner { padding: 50px; font-size: 18px; } #home-section-latestnews .srp-thumbnail-box { flex: none; float: right; width: 45%; margin-right: 0; } #home-section-latestnews .srp-content-box { flex: none; float: left; width: 45%; } #home-section-latestnews .srp-thumbnail-box img { margin-top: -42px; margin-bottom: 15px; } #home-section2 .row { margin: 0; } #home-section3 .content-inner { font-size: 18px; } /* Site Footer */ #footer-widgets .container .row > div:nth-of-type(2) { border-left: solid 3px #fff; } } /***************************************************** Above MD Breakpoint = Desktop Only *****************************************************/ @media (min-width: 992px) { #site-header #site-description { font-size: 17px; } #site-navigation .nav > li { padding: 2px 18px; } } /***************************************************** Mobile Breakpoint = Phone, Tablet *****************************************************/ @media (max-width: 767px) { /* Site Wide */ h1 { font-size: 30px; font-weight: bold; margin-bottom: 20px; } h2 { font-size: 28px; font-weight: bold; margin-bottom: 10px; } h3 { font-size: 24px; font-weight: bold; margin-bottom: 10px; } h4 { font-size: 22px; font-weight: bold; margin-bottom: 10px; } h5 { font-size: 20px; font-weight: bold; line-height: 1.4; } h6 { font-size: 18px; font-weight: bold; line-height: 1.4; } #content { padding: 0; } .news-item-thumbnail { width: 100px; height: 100px; } .news-item-thumbnail img { width: 100px; height: 100px; } #home-section-latestnews #content-home { padding: 20px 10px; } #home-carousel { margin-bottom: 20px; } #home-carousel .carousel-caption { text-shadow: none; color: #000; background: #fff; padding: 10px 20px 20px 20px; bottom: 25% } #home-carousel .carousel-caption h1 { font-size: 22px; } #home-carousel .carousel-caption h1 span.larger { font-size: 30px; } #home-carousel .carousel-caption a.button { padding: 10px 15px 10px 15px; font-size: 14px;} #home-section2 .home-section2-box { margin-bottom: 30px; } #video-section .about-video { padding: 0; width: 100%; } #video-section .about-video embed { width: 100%; } #highlights-section .highlight-video { width:100%; padding:0; } #highlights-section .video-description { width:100%; padding: 30px; } #site-footer { font-size: 14px; } #site-footer #site-footer-right { margin-top: 12px; } }