html, body { height: 100%; width: 100%; font-family: 'Oxygen', sans-serif; /*background-color: #cd6e2c;*/ } /* No media query since this is the default in Bootstrap */ /* Extra small devices (phones, less than 768px) */ /* Small devices (tablets, 767px and down) */ @media (max-width: 767px) { nav a { text-decoration: none; font-family: Helvetica, Arial, sans-serif; position: relative; display: inline-block; margin: 0 0px !important; font-weight: 400; } .btn-responsive { padding: 8px 5px; font-size: 85%; line-height: 1; border-radius: 3px; } .hsm-padding-lr { padding-left: 5px; padding-right: 5px; } .cta { padding-top: 15px; padding-bottom: 10px; } } /* Small devices (tablets, 768px and up) */ @media (min-width: 768px) { nav a { text-decoration: none; font-family: Helvetica, Arial, sans-serif; position: relative; display: inline-block; margin: 0 20px; font-weight: 400; } .btn-responsive { padding: 8px 5px; font-size: 85%; line-height: 1; border-radius: 3px; } .hsm-padding-lr { padding-left: 10px; padding-right: 10px; } .cta { padding-top: 20px; padding-bottom: 20px; } } /* Medium devices (desktops, 992px and up) */ @media (min-width: 992px) { nav a { text-decoration: none; font-family: Helvetica, Arial, sans-serif; position: relative; display: inline-block; margin: 0 20px; font-weight: 400; } .btn-responsive { padding: 10px 13px; font-size: 100%; line-height: 1; border-radius: 5px; } .hsm-padding-lr { padding-left: 50px; padding-right: 50px; } } /* Large devices (large desktops, 1200px and up) */ @media (min-width: 1200px) { nav a { text-decoration: none; font-family: Helvetica, Arial, sans-serif; position: relative; display: inline-block; margin: 0 20px; font-weight: 400; } } .container { margin: 0 auto; } .page-header{ margin: 40px 20px 20px; } .hsm-nav { /*position: absolute;*/ left: 0; right: 0; /*background-color: rgba(0, 66, 83, 0.51);*/ width: 100%; border-top: 5px solid #1a7749; border-bottom: 5px solid #1a7749; } .hsm-nav .active{ background-color: #fff; color: #1a7749 !important; } .hsm-nav .active a{ background-color: #fff; color: #1a7749 !important; } .hsm-nav a:hover{ color: #1a7749 !important; } .hsm-nav li a { font-family: 'Oxygen', sans-serif; color: #fff; } .nav>li>a:focus, .nav>li>a:hover { background-color: white; } .navbar-toggle { border-color: #fff; } .navbar-toggle:hover, .navbar-toggle:focus { background-color: #fff; border-color: #1a7749; } .navbar-toggle:hover .icon-bar, .navbar-toggle:focus .icon-bar { background-color: #1a7749; border-color: #1a7749; } .navbar-toggle .icon-bar { background-color: #fff; } .hsm-padding-tb { padding-top: 30px; padding-bottom: 30px; } .hsm-solid-color { background-color: #1a7749; } .hsm-text-big { font-size: 26px; line-height: 30px; text-align: justify; } .hsm-text-orange { color: #d76c2c; } .hsm-text-blue { color: #1a7749; } .hsm-text-gray { color: #6e6467; } .hsm-text-white { color: #fff; } ul.hsm-list { list-style-image: url('../images/list-image2.png'); margin: 10px 0px 40px -30px } ul.hsm-list li{ padding: 2px; } ul.hsm-list li span{ color: #d76c2c; } .hsm-logo-text { padding-left: 10px; border-left: 2px solid #e6a434; margin-top: 18px; } .hsm-circle-num { border-radius: 50%; behavior: url(PIE.htc); width: 36px; height: 36px; padding: 0px 4px; background: #fff; border: 3px solid #d76c2c; color: #d76c2c; text-align: center; margin-right: 10px; } ul.hsm-list-in-row { margin-left: -39px; } ul.hsm-list-in-row li { display: inline; list-style-type: disc; } p { padding: 5px 0; } p.justify { text-align: justify; } .hsm-img-full { width: 100%; height: 90px; } .cta p { color: #000000; font-weight: normal; font-size: 20px; } .cta .btn { background-color: #1a7749; border: 1px solid #fff; padding: 10px 40px; color: #fff; font-weight: bold; } .cta .btn:hover { background-color: #fff; border: 1px solid #1a7749; padding: 10px 40px; color: #1a7749; } /* Bouncing http://tympanus.net/Development/CreativeLinkEffects/ */ section{ margin: 0 auto; text-align: center; } /* BG colours */ .shade1 { background: #1a7749; } .shade2 { background: #1a7749; } .shade3{ background: #1a7749; } .shade4{ background: #1a7749; } .shade5{ background: #1a7749; } /* Effect 1 */ .effect1 a { color: #fff; text-transform: uppercase; font-weight: bold; } .effect1 a::before { color: #1a7749; position: absolute; content: attr(data-hover); transition: transform 0.3s, opacity 0.3s; -moz-transition: -moz-transform 0.3s, opacity 0.3s; -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; } .effect1 a:hover::before, .effect1 a:focus::before { opacity: 0; } /* Effect 2 */ .effect2 a { color: #fff; padding: 10px 0; } .effect2 a::before { color: #1a7749; position: absolute; overflow: hidden; top: 0; left: 0; padding: 10px 0; max-width: 0; content: attr(data-hover); transition: max-width 0.5s; -moz-transition: max-width 0.5s; -webkit-transition: max-width 0.5s; } .effect2 a:hover::before, .effect2 a:focus::before { max-width: 100%; } /* Effect 3 */ .effect3 a { color: #1a7749; overflow: hidden; padding: 0 5px; height: 1em; } .effect3 a span { position: relative; display: inline-block; transition: transform 0.3s; -moz-transition: -moz-transform 0.3s; -webkit-transition: -webkit-transform 0.3s; } .effect3 a span::before { color: #1a7749; position: absolute; top: 100%; content: attr(data-hover); transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); } .effect3 a:hover span, .effect3 a:focus span { transform: translateY(-100%); -moz-transform: translateY(-100%); -webkit-transform: translateY(-100%); } /* Effect 4 */ .effect4 a { padding: 5px 0; } .effect4 a::after { background: #1a7749; position: absolute; top: 100%; left: 0; content: ''; width: 100%; height: 3px; opacity: 0; transition: opacity 0.5s, transform 0.5s; -moz-transition: opacity 0.3s, -moz-transform 0.3s; -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; transform: translateY(-10px); -moz-transform: translateY(-10px); -webkit-transform: translateY(-10px); } .effect4 a:hover::after, .effect4 a:focus::after { opacity: 1; background-color: #1a7749; transform: translateY(0px); -moz-transform: translateY(0px); -webkit-transform: translateY(0px); } /* Effect 5 */ .effect5 { position: relative; z-index: 1; } .effect5 a { margin: 0 15px; overflow: hidden; } .effect5 a span { color: #fff; background: #1a7749; display: block; padding: 10px 20px; transition: transform 0.3s; -moz-transition: -moz-transform 0.3s; -webkit-transition: -webkit-transform 0.3s; } .effect5 a::before { color: #1a7749; background: #1a7749; position: absolute; top: 0; left: 0; z-index: -1; padding: 10px 0; width: 100%; height: 100%; content: attr(data-hover); transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); } .effect5 a:hover span, .effect5 a:focus span { transform: translateY(100%); -moz-transform: translateY(100%); -webkit-transform: translateY(100%); } .effect5 a:hover::before, .effect5 a:focus::before { transform: translateY(0%); -moz-transform: translateY(0%); -webkit-transform: translateY(0%); } .info { color: #2562a3; font-family: Helvetica, Arial; font-size: 24px; /*margin-top: 29px;*/ margin-bottom: 29px; font-weight: bold; }