/* element defaults */ body { font-family: 'Roboto', arial, sans-serif; font-weight: 300; color: #2e4857; background-color: #dfe3ec; padding-top: 66px; overflow-x:hidden; } h1 { text-transform: uppercase; font-family:'Roboto Condensed', sans-serif; font-weight: 700; font-size: 3.4em; line-height: 1em;} h2, h4 { text-transform: uppercase; font-family:'Roboto Condensed', sans-serif; font-weight: 700; letter-spacing: -0.01em} h3 { font-weight: 300; } hr { background-color: #59c953; width:64px; height: 2px; float:left; margin-top:24px; margin-bottom: 24px;} p strong { font-weight: 700; } p { font-weight: 300; } footer { background-color: #335264; padding-top: 40px; padding-bottom: 20px; } /* Navbar components */ .navbar-toggler { border: none; outline: none !important; box-shadow: none !important; } .navbar { padding-bottom: 4px; background-color:#dfe3ec;} .bar1, .bar2, .bar3 { width: 30px; height: 4px; background-color:#59c953; margin: 3px auto; transition: 0.4s; border-radius: 3px; } .navbar-nav hr { display: none; } .fixed-top { transition: 0.3s; } .nav-item { line-height: 1.1em; font-size: 0.95em; min-width: 90px; } /* Cookie bar */ #cookie-bar { padding: 15px !important; background-color:#2e4857 !important; } #cookie-bar p { max-width:800px; font-size: 0.8em; margin: 0 auto !important; line-height: 1.4em;} #cookie-bar p a { text-decoration: underline; margin-left: 0px !important; } .cb-enable { background-color: transparent !important; border: 1px solid #fff; padding: 0px 10px !important; border-radius: 15px !important; text-decoration: none !important; transition: 0.3s; margin-top: 10px !important; } #cookie-bar p a.cb-enable:hover { background-color: #fff !important; color: #2e4857; } /* mobile navbar */ @media only screen and (max-width: 767.98px) { .hamburger-inner, .hamburger-inner:before, .hamburger-inner:after { background-color: #59c953 !important; width: 30px !important; height: 3px !important; } .hamburger-inner:before, .hamburger-inner:after { content:"" !important; } .navbar-collapse { background-color: #ffffff; margin: 0rem -1rem; padding: .5rem 1rem; } .navbar-nav hr { display: block; margin: 0px; width: 35px; height: 1px; float:left; } .navbar-light .navbar-nav .nav-link { color: #2e4857; } .nav-item:hover { background-color: #f7f8f9; } .nav-item br { display:none; } .nav-link { padding: 1rem 1rem; } .dropdown-toggle::after { color: #59c953; } .dropdown-menu { border: none; padding-top: 0px; margin-top:0px; } .dropdown-menu hr { margin-left:10px; margin-top: 5px; margin-bottom:5px; } .dropdown-item { padding-left: 10px; color: #2e4857; font-weight: 300; } /*#va-logo { width: 43%; max-width: 200px;}*/ } /* Buttons */ .gbutton { font-family:'Roboto Condensed', sans-serif; font-weight: 700; display: block; width: 200px; background-color: #59c953; border: 5px solid #9bd69e; color: #fff; text-transform: uppercase; text-align:center; font-size: 0.9em; padding: 5px 0px; margin: 30px 0px 0px 0px;transition: 0.4s; } .gbutton:hover { background-color:#fff; color: #59c953; } .wide-gbutton { width: 240px; } .wbutton { color: #2e4857; align-self: flex-end; font-family:'Roboto Condensed', sans-serif; font-weight: 700; display:block; border-color: #59c953; border-top-width:10px; border-top-style:solid; border-right-width:10px; border-right-style: solid; background-color:#fff; width: 220px; text-align: center; text-transform: uppercase; font-size: 0.9em; transition: 0.4s; padding: 5px 0px; } .wbutton-arrows { color: #59c953; } /* Accordions */ #accordion .card { border: none; } #accordion .card-header { border: 8px solid #ace4a9; border-bottom: none; border-radius: 0px; background-color: #59c953; padding: 0.4rem 1.25rem; transition: 0.3s;} #accordion .card-header:hover { background-color:#398835; } #accordion .card:last-child { border-bottom: 8px solid #ace4a9; } #accordion .card-header button { color: #fff; text-transform: uppercase; } #accordion .card-header button:hover, #accordion .card-header button:focus { text-decoration:none; } #accordion .card-body { border-left: 8px solid #ace4a9; border-right: 8px solid #ace4a9; } .white-accordion .card { margin-bottom: 20px !important; } .white-accordion .card-header { border: none !important; background-color: #fff !important; } .white-accordion .card-header button { color: #2e4857 !important; font-family:'Roboto Condensed', sans-serif !important; font-weight: 700 !important; font-size: 2rem !important; } .white-accordion .card-body { border: none !important; } .acc-arrow-up { display:none; } /* Carousels */ .carousel-indicators { margin-left: 8.33%; right: unset; bottom: 10px; } .carousel-indicators li { width: 16px; height: 16px; background-color: #59c953; border-radius: 8px; background-clip: unset; border-top: 0px; border-bottom: 0px; } .carousel-indicators .active { width: 20px; height: 20px; border-radius: 10px; margin-top: -2px; } .top-tips-image-holder { min-height:550px; background-size: cover; } #tti-1 { background-image:url("../img/top-tips-1.jpg"); } #tti-2 { background-image:url("../img/top-tips-2.jpg"); } #tti-3 { background-image:url("../img/top-tips-3.jpg"); } #tti-4 { background-image:url("../img/top-tips-4.jpg"); } #tti-5 { background-image:url("../img/top-tips-5.jpg"); } #tti-6 { background-image:url("../img/top-tips-6.jpg"); } #tti-7 { background-image:url("../img/top-tips-7.jpg"); } #tti-8 { background-image:url("../img/top-tips-8.jpg"); } /* Header graphics */ @media (max-width:1199px) { #header-background { background-position:-100px; }} @media (max-width:991px ) { #header-background { background-position: -100px 100px; background-repeat:no-repeat; } } @media (max-width:767px ) { #header-background { background-position:-180px; } } #header-background { background-size: cover; } #recently #header-background { background-image: url('../img/header-desktop-recently.jpg'); } #basics #header-background { background-image: url('../img/header-desktop-basics.jpg'); } #psoriasis #header-background { background-image: url('../img/header-desktop-psoriasis.jpg'); } #other #header-background { background-image: url('../img/header-desktop-other.jpg'); } #annabelle #header-background { background-image: url('../img/header-desktop-annabelle.jpg'); } #glossary #header-background { background-image: url('../img/header-desktop-glossary.jpg'); } #treatments #header-background { background-image: url('../img/header-desktop-treatments.jpg'); } #wellbeing #header-background { background-image: url('../img/header-desktop-wellbeing.jpg'); } #myspa #header-background { background-image: url('../img/header-desktop-myspa.jpg'); } /* Shadows */ .shad-left { background-image: url('../img/shad-left.jpg'); background-repeat: no-repeat; background-position: top left; background-size: contain; } .shad-right { background-image: url('../img/shad-right.jpg'); background-repeat: no-repeat; background-position: top right; background-size: contain; } .grey-shad-left { background-image: url('../img/grey-shad-left.jpg'); background-repeat: no-repeat; background-position: top left; background-size: contain; } .grey-shad-right { background-image: url('../img/grey-shad-right.jpg'); background-repeat: no-repeat; background-position: top right; background-size: contain; } .references { background-image: url('../img/reference-bg.jpg'); background-repeat: no-repeat; background-position: top center; background-size: 100%; } /* Homepage mods */ .carousel-item{ height:500px; } #homepage h1, #positive h1 { margin-top: 60px; } .hr-center { float: none; } .homepage-tablet-image { width: 100%; max-width: 500px; margin: 0 auto; } .tablet-image-holder { text-align: center; background-image:url('../img/homepage-first-bg.jpg'); background-size: cover; } .hp-ad-box { background-color: rgba(19,81,58,0.7); color: #fff; padding-top:54px; height: 316px;} .hp-ad-box a:hover { color: #59c953; text-decoration:none; } .hp-ad-box h2 { font-weight: 400; } #ad-block-1 { background-image: url('../img/adblock-rollover-recently.jpg'); background-size: cover; background-position: center; } #ad-block-2 { background-image: url('../img/adblock-rollover-treatments.jpg'); background-size: cover; background-position: center; } #ad-block-3 { background-image: url('../img/adblock-rollover-myspa.jpg'); background-size: cover; background-position: center; } #ad-block-4 { background-image: url('../img/adblock-rollover-basics.jpg'); background-size: cover; background-position: center; } #ad-block-5 { background-image: url('../img/adblock-rollover-psoriasis.jpg'); background-size: cover; background-position: center; } #ad-block-6 { background-image: url('../img/adblock-rollover-other.jpg'); background-size: cover; background-position: center; } #ad-block-7 { background-image: url('../img/adblock-rollover-annabelle.jpg'); background-size: cover; background-position: center; } #ad-block-8 { background-image: url('../img/adblock-rollover-glossary.jpg'); background-size: cover; background-position: center; } #ad-block-9 { background-image: url('../img/adblock-rollover-questionnaire.jpg'); background-size: cover; background-position: center; } .desktop-ad-link { display: none; } #homepage-intro { background-image: url('../img/homepage-intro-bg.jpg'); background-size: cover; } /* Positive mods */ #pos-special { background-image: linear-gradient(to bottom right, #13998c,#57c855); margin-top: -20px; padding-bottom: 15px; } #positive-tips { background-color: #fff; padding-right: 0px; } #positive-zinc { background-color: #DFE3EC; padding: 10px 0px; } .pz-white { background-color: #fff !important; } #positive-intro { background-image: url('../img/bg-positive-intro.jpg'); background-size: cover; } #positive-faq { background-image: url('../img/bg-positive-faq.jpg'); background-position:right top; background-repeat: no-repeat; background-color: #ebebeb;} .top-tip-text { color: #a5dea5; font-weight: 300; margin-top:50px; margin-bottom:0px; } .top-tip-title { margin-bottom: 0px; } .top-tips-img { max-width:500px; width:100%; } .carousel .row .top-tips-shadow { background-image: url('../img/top-tips-shad.jpg'); background-repeat: no-repeat; background-position: top right; background-size: contain; } .carousel .row .col-md-4 { padding-left:0px; padding-right: 0px; } .carousel .row .col-md-4 img { } /* Understanding mods */ #green-bar { color: #fff; background-color: #a5dea5; } #green-bar hr { background-color: #fff; } #green-bar big {font-size: 1.6rem; color: #2e4857; font-weight: 600;} #white-bar { background-color: #fff; } #basics-intro { background-image: url('../img/bg-basics-intro.jpg'); background-size: cover; } #basics-flare { background-image: url('../img/bg-basics-flare.jpg'); background-size: cover; } .basics-quote { background-image: url('../img/bg-basics-qoute.jpg'); background-size: cover; } #annabelle-quote-1 { background-image: url('../img/bg-annabelle-qoute-1.jpg'); background-size: cover; } #annabelle-quote-2 { background-image: url('../img/bg-annabelle-qoute-2.jpg'); background-size: cover; } #other-1 { background-image:url('../img/other-image-1.jpg'); background-position: center;} #other-2 { background-image:url('../img/other-image-2.jpg'); background-position: center;} #other-3 { background-image:url('../img/other-image-2.jpg'); background-position: center; display:none; height: 300px;} #recently-intro { background-image: url('../img/bg-other-intro.jpg'); background-size: cover; } .recently-quote { background-image: url('../img/bg-recently-talk.jpg'); background-size: cover; } #recently-explain { background-image: url('../img/bg-recently-explain.jpg'); background-size: cover; } .glossary-links a { font-weight:700; padding: 0px 10px; color:#2e4857; border-right: 2px solid #59c953;} .glossary-links span { font-weight:700; padding: 0px 10px; color:#999; border-right: 2px solid #59c953; } .glossary-links span:last-child { font-weight:700; padding: 10px; color:#999; border-right: none; } hr.full-width { width:100%; height: 1px; background-color: #2e4857; border-top: none; } /* Basics rollover mods */ #basics-block-1 { background-image: url('../img/green-affects-basics-1.jpg'); background-position: center; background-size: cover; transition:0.3s; } #basics-block-2 { background-image: url('../img/green-affects-basics-2.jpg'); background-position: center; background-size: cover; transition:0.3s; } #basics-block-3 { background-image: url('../img/green-affects-basics-3.jpg'); background-position: center; background-size: cover; transition:0.3s; } #basics-block-4 { background-image: url('../img/green-affects-basics-4.jpg'); background-position: center; background-size: cover; transition:0.3s; } #basics-block-5 { background-image: url('../img/green-affects-basics-5.jpg'); background-position: center; background-size: cover; transition:0.3s; } #basics-block-6 { background-image: url('../img/green-affects-basics-6.jpg'); background-position: center; background-size: cover; transition:0.3s; } #basics-block-7 { background-image: url('../img/green-affects-basics-7.jpg'); background-position: center; background-size: cover; transition:0.3s; } #basics-block-8 { background-image: url('../img/green-affects-basics-8.jpg'); background-position: center; background-size: cover; transition:0.3s; } #basics-block-9 { background-image: url('../img/affects-basics-9.jpg'); background-position: center; background-size: cover; } #basics-block-1:hover, #basics-block-1:focus { background-image: url('../img/affects-basics-1.jpg'); } #basics-block-2:hover, #basics-block-2:focus { background-image: url('../img/affects-basics-2.jpg'); } #basics-block-3:hover, #basics-block-3:focus { background-image: url('../img/affects-basics-3.jpg'); } #basics-block-4:hover, #basics-block-4:focus { background-image: url('../img/affects-basics-4.jpg'); } #basics-block-5:hover, #basics-block-5:focus { background-image: url('../img/affects-basics-5.jpg'); } #basics-block-6:hover, #basics-block-6:focus { background-image: url('../img/affects-basics-6.jpg'); } #basics-block-7:hover, #basics-block-7:focus { background-image: url('../img/affects-basics-7.jpg'); } #basics-block-8:hover, #basics-block-8:focus { background-image: url('../img/affects-basics-8.jpg'); } #basics .desktop-ad-link h2 { font-weight: 700; } .basics-diag{ height: 800px; background-image: url("../img/diagram-affects-basics.png"); background-repeat: no-repeat; background-position:center; background-size: contain; z-index:1; } .diag-text { width:280px; display:block; position: relative; text-align: left;} #diag-1 { left:490px; } #diag-2 { top: -80px; left: -70px; } #diag-3 { top: -50px; left: 590px; } #diag-4 { top: -70px; left: -120px; } #diag-5 { top: -10px; left: 590px; } /* Treatment mods */ #treatments-intro { background-image: url('../img/bg-other-intro.jpg'); background-size: cover; } #treatments-impact { background-image: url('../img/bg-positive-faq.jpg'); background-size: cover; } #treatments-1 { background-image:url('../img/treatments-image-1.jpg'); background-position: center;} #treatments-2 { background-image:url('../img/treatments-image-2.jpg'); background-position: center;} #treatments-3 { background-image:url('../img/treatments-image-3.jpg'); background-position: center;} #treatments-4 { background-image:url('../img/treatments-image-4.jpg'); background-position: center;} #treatments-5 { background-image:url('../img/treatments-image-5.jpg'); background-position: center;} #treatments-6 { background-image:url('../img/treatments-image-6.jpg'); background-position: center;} /* Wellbeing mods */ #wellbeing-exercise { background-color:#f7f8fa; } #wellbeing-diagrams { background-color:#f2f3f7; } .wb-diag { background-color: green; height: 300px; border:10px solid #f2f3f7;} #wellbeing-1 { background-image:url('../img/lifestyle-image-1.jpg'); background-position: center;} #wellbeing-2 { background-image:url('../img/lifestyle-image-2.jpg'); background-position: center;} #wellbeing-3 { background-image:url('../img/lifestyle-image-3.jpg'); background-position: center;} /* MySpA mods */ #myspa-1 { background-image:url('../img/myspa-image-1.jpg'); background-position: center;} #myspa-2 { background-image:url('../img/myspa-image-2.jpg'); background-position: center;} /* carousel */ .carousel-item { background-position: center; background-size:cover; } #carousel-hp-1 { background-image:url('../img/homepage-mobile-slider1.jpg'); } #carousel-hp-2 { background-image:url('../img/homepage-mobile-slider2.jpg'); } #carousel-hp-3 { background-image:url('../img/homepage-mobile-slider3.jpg'); } /* footer */ footer { background-image:url('../img/footer-bg.jpg'); background-size: cover; } footer a { font-size: 0.8em; color: #fff; transition: 0.4s; } footer a:hover { color:#fff; text-decoration: underline; } footer a.external { font-size: 1em; text-decoration: underline; } footer img { max-width: 210px; width: 100%; } footer p { line-height: 0.9em; } #nov-logo { padding-bottom: 16px; } #va-logo { max-width: 130px; } .footer-section { margin: 0px 20px; } .footer-links { text-align:right; line-height: 0.9em; } .footer-links br { display: none; } .footer-links a { margin-left: 20px; } /* Screen size adjustments */ @media (max-width: 500px) { footer img { width: 100%; } .footer-logos div { width: 45%; } } @media (max-width: 767px) { #va-logo { margin-bottom: 40px; } .top-tips-image-holder { display:none; } .mobile-hide { display:none; } .carousel-indicators {margin-left: 15px;} #positive .carousel-item { padding-left:20px; padding-right: 30px; } #heading-homepage h1 { text-shadow: 3px 3px 3px #fff; } #other-3 { display:block; } #basics-block-1:hover, #basics-block-1:focus { background-image: url('../img/green-affects-basics-1.jpg'); } #basics-block-2:hover, #basics-block-2:focus { background-image: url('../img/green-affects-basics-2.jpg'); } #basics-block-3:hover, #basics-block-3:focus { background-image: url('../img/green-affects-basics-3.jpg'); } #basics-block-4:hover, #basics-block-4:focus { background-image: url('../img/green-affects-basics-4.jpg'); } #basics-block-5:hover, #basics-block-5:focus { background-image: url('../img/green-affects-basics-5.jpg'); } #basics-block-6:hover, #basics-block-6:focus { background-image: url('../img/green-affects-basics-6.jpg'); } #basics-block-7:hover, #basics-block-7:focus { background-image: url('../img/green-affects-basics-7.jpg'); } #basics-block-8:hover, #basics-block-8:focus { background-image: url('../img/green-affects-basics-8.jpg'); } #basics-block-1, #basics-block-2,#basics-block-4, #basics-block-5, #basics-block-7, #basics-block-8 { margin-bottom: 20px; } #basics-block-9 p { margin-top: 20px !important; } #treatments-1, #treatments-3, #treatments-5, #wellbeing-1, #wellbeing-3, #myspa-1, #myspa-2 { height: 300px; } #ad-blocks { max-width:100%; margin-left:0px; margin-right: 0px; } .shad-right { background-image: none; } } @media (min-width: 768px) { body { padding-top: 0px; } .row { margin-right: 0px; margin-left:0px; } .navbar { background-color: transparent; margin-top: 30px;} .nav-item { font-weight: 400; text-align: center; margin-top: auto; } .nav-item:after { content: ""; display: block; margin: 0 auto; width: 20%; padding-top: -5px; border-bottom: 2px solid #59c953; opacity: 0; transition: 0.3s; } .nav-item:hover:after { width:70%; opacity: 1; } .nav-item.active:after { content: ""; display: block; margin: 0 auto; width: 70%; padding-top: -5px; border-bottom: 2px solid #59c953; opacity: 1 } .navbar-light .navbar-nav .nav-link { color: #2e4857; } .nav-item br { display:block; } #homepage h1 { margin-top: 90px; } #heading-homepage { margin-left: 50%; width: 50%; max-width: 500px; } #subhead-homepage { margin-left: 50%; width: 50%; max-width: 300px; position: relative; top:-350px; } .subhead-inner { position: absolute; padding-top: 30px;} #carousel { max-width: 1600px; margin: 0 auto -30px auto; } #homepage .carousel-item{ height:600px; } .dropdown-menu.show { text-align: center; border-radius: 0; margin-left: -30px;} .dropdown-menu.show hr { display:block; width: 30px; height: 1px; margin: 5px auto; float: none;} .dropdown-item { font-size: 0.95em; } .hp-ad-box { } .hp-ad-box p { font-size: 0.9em; } .hp-ad-box div { visibility: hidden; } .hp-ad-box:hover div { visibility: visible; } .hp-ad-box:hover .desktop-ad-link { display: none; } .hp-ad-box:hover .desktop-ad-link-hover { display: block; } #ad-block-1 { background-image: url('../img/adblock-recently.jpg'); transition: 0.3s; } #ad-block-2 { background-image: url('../img/adblock-treatments.jpg'); transition: 0.3s; } #ad-block-3 { background-image: url('../img/adblock-myspa.jpg'); transition: 0.3s; } #ad-block-4 { background-image: url('../img/adblock-basics.jpg'); transition: 0.3s; } #ad-block-5 { background-image: url('../img/adblock-psoriasis.jpg'); transition: 0.3s; } #ad-block-6 { background-image: url('../img/adblock-other.jpg'); transition: 0.3s; } #ad-block-7 { background-image: url('../img/adblock-annabelle.jpg'); transition: 0.3s; } #ad-block-8 { background-image: url('../img/adblock-glossary.jpg'); transition: 0.3s; } #ad-block-9 { background-image: url('../img/adblock-questionnaire.jpg'); transition: 0.3s; } #ad-block-1:hover { background-image: url('../img/adblock-rollover-recently.jpg'); } #ad-block-2:hover { background-image: url('../img/adblock-rollover-treatments.jpg'); } #ad-block-3:hover { background-image: url('../img/adblock-rollover-myspa.jpg'); } #ad-block-4:hover { background-image: url('../img/adblock-rollover-basics.jpg'); } #ad-block-5:hover { background-image: url('../img/adblock-rollover-psoriasis.jpg'); } #ad-block-6:hover { background-image: url('../img/adblock-rollover-other.jpg'); } #ad-block-7:hover { background-image: url('../img/adblock-rollover-annabelle.jpg'); } #ad-block-8:hover { background-image: url('../img/adblock-rollover-glossary.jpg'); } #ad-block-9:hover { background-image: url('../img/adblock-rollover-questionnaire.jpg'); } .desktop-ad-link { display: block; visibility: visible !important; } .desktop-ad-link-hover { display: none; position: relative; left: -15px; } .basics-item { background-color:#dfe3ec; width:200px; color: #2e4857; border-top: 10px solid #59c953; border-right: 10px solid #59c953; } #carousel-hp-1 { background-image:url('../img/homepage-tablet-slider1.jpg'); } #carousel-hp-2 { background-image:url('../img/homepage-desktop-slider2.jpg'); } #carousel-hp-3 { background-image:url('../img/homepage-desktop-slider3.jpg'); } #footer-disclaimer { max-width: 550px; } .footer-logos { max-width: 550px; } .footer-section { margin: 0px 0px; } .footer-links br { display: block; } } @media(min-width:992px) { #carousel-hp-1 { background-image:url('../img/homepage-desktop-slider1.jpg'); } .footer-social { margin-top:25px; } .nav-item { min-width: 130px; } #footer-disclaimer { max-width: 550px; } .basics-diag-mobile { display:none; } } @media(max-width:1199px) { #diag-1 { left:430px; } #diag-2 { top: -80px; left: -130px; } #diag-3 { top: -50px; left: 530px; } #diag-4 { top: -70px; left: -180px; } #diag-5 { top: -10px; left: 530px; } } @media(max-width:991px) { .basics-diag { background-image:url('../img/arthritis-diagram-mobile.png'); max-height: 500px; } .diag-text { display: none; } .basics-diag-mobile {display:block;} .basics-diag-mobile img { width: 50px; position: relative; } #pulse-1 { top:-510px; left:107px; } #pulse-2 { top:-440px; left:28px; } #pulse-3 { top:-350px; left:67px; } #pulse-4 { top:-250px; left:-145px; } #pulse-5 { top:-65px; left:-80px; } }