/* DO NOT REMOVE THE BELOW IMPORT */
/* @import url(https://www.nols.edu/static/css/screen.css); */
/**
* CSS @imports must be at the top of the file.
* Add them above this section.
*/
/* ==========================================================================
HS COS Boilerplate v1.5.0
========================================================================== */
/* This responsive framework is required for all styles. */
/* Responsive Grid */
.row-fluid {
width: 100%;
*zoom: 1;
}
.row-fluid:before, .row-fluid:after {
display: table;
content: "";
}
.row-fluid:after {
clear: both;
}
.row-fluid [class*="span"] {
display: block;
float: left;
width: 100%;
min-height: 28px;
margin-left: 2.127659574%;
*margin-left: 2.0744680846382977%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.row-fluid [class*="span"]:first-child {
margin-left: 0;
}
.row-fluid .span12 {
width: 99.99999998999999%;
*width: 99.94680850063828%;
}
.row-fluid .span11 {
width: 91.489361693%;
*width: 91.4361702036383%;
}
.row-fluid .span10 {
width: 82.97872339599999%;
*width: 82.92553190663828%;
}
.row-fluid .span9 {
width: 74.468085099%;
*width: 74.4148936096383%;
}
.row-fluid .span8 {
width: 65.95744680199999%;
*width: 65.90425531263828%;
}
.row-fluid .span7 {
width: 57.446808505%;
*width: 57.3936170156383%;
}
.row-fluid .span6 {
width: 48.93617020799999%;
*width: 48.88297871863829%;
}
.row-fluid .span5 {
width: 40.425531911%;
*width: 40.3723404216383%;
}
.row-fluid .span4 {
width: 31.914893614%;
*width: 31.8617021246383%;
}
.row-fluid .span3 {
width: 23.404255317%;
*width: 23.3510638276383%;
}
.row-fluid .span2 {
width: 14.89361702%;
*width: 14.8404255306383%;
}
.row-fluid .span1 {
width: 6.382978723%;
*width: 6.329787233638298%;
}
.container-fluid {
*zoom: 1;
}
.container-fluid:before, .container-fluid:after {
display: table;
content: "";
}
.container-fluid:after {
clear: both;
}
@media (max-width: 767px) {
.row-fluid {
width: 100%;
}
.row-fluid [class*="span"] {
display: block;
float: none;
width: auto;
margin-left: 0;
}
}
@media (min-width: 768px) and (max-width: 1139px) {
.row-fluid {
width: 100%;
*zoom: 1;
}
.row-fluid:before, .row-fluid:after {
display: table;
content: "";
}
.row-fluid:after {
clear: both;
}
.row-fluid [class*="span"] {
display: block;
float: left;
width: 100%;
min-height: 28px;
margin-left: 2.762430939%;
*margin-left: 2.709239449638298%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.row-fluid [class*="span"]:first-child {
margin-left: 0;
}
.row-fluid .span12 {
width: 99.999999993%;
*width: 99.9468085036383%;
}
.row-fluid .span11 {
width: 91.436464082%;
*width: 91.38327259263829%;
}
.row-fluid .span10 {
width: 82.87292817100001%;
*width: 82.8197366816383%;
}
.row-fluid .span9 {
width: 74.30939226%;
*width: 74.25620077063829%;
}
.row-fluid .span8 {
width: 65.74585634900001%;
*width: 65.6926648596383%;
}
.row-fluid .span7 {
width: 57.182320438000005%;
*width: 57.129128948638304%;
}
.row-fluid .span6 {
width: 48.618784527%;
*width: 48.5655930376383%;
}
.row-fluid .span5 {
width: 40.055248616%;
*width: 40.0020571266383%;
}
.row-fluid .span4 {
width: 31.491712705%;
*width: 31.4385212156383%;
}
.row-fluid .span3 {
width: 22.928176794%;
*width: 22.874985304638297%;
}
.row-fluid .span2 {
width: 14.364640883%;
*width: 14.311449393638298%;
}
.row-fluid .span1 {
width: 5.801104972%;
*width: 5.747913482638298%;
}
}
@media (min-width: 1280px) {
.row-fluid {
width: 100%;
*zoom: 1;
}
.row-fluid:before, .row-fluid:after {
display: table;
content: "";
}
.row-fluid:after {
clear: both;
}
.row-fluid [class*="span"] {
display: block;
float: left;
width: 100%;
min-height: 28px;
margin-left: 2.564102564%;
*margin-left: 2.510911074638298%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.row-fluid [class*="span"]:first-child {
margin-left: 0;
}
.row-fluid .span12 {
width: 100%;
*width: 99.94680851063829%;
}
.row-fluid .span11 {
width: 91.45299145300001%;
*width: 91.3997999636383%;
}
.row-fluid .span10 {
width: 82.905982906%;
*width: 82.8527914166383%;
}
.row-fluid .span9 {
width: 74.358974359%;
*width: 74.30578286963829%;
}
.row-fluid .span8 {
width: 65.81196581200001%;
*width: 65.7587743226383%;
}
.row-fluid .span7 {
width: 57.264957265%;
*width: 57.2117657756383%;
}
.row-fluid .span6 {
width: 48.717948718%;
*width: 48.6647572286383%;
}
.row-fluid .span5 {
width: 40.170940171000005%;
*width: 40.117748681638304%;
}
.row-fluid .span4 {
width: 31.623931624%;
*width: 31.5707401346383%;
}
.row-fluid .span3 {
width: 23.076923077%;
*width: 23.0237315876383%;
}
.row-fluid .span2 {
width: 14.529914530000001%;
*width: 14.4767230406383%;
}
.row-fluid .span1 {
width: 5.982905983%;
*width: 5.929714493638298%;
}
}
/* Clearfix */
.clearfix {
*zoom: 1;
}
.clearfix:before, .clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both;
}
/* Visibilty Classes */
.hide {
display: none;
}
.show {
display: block;
}
.invisible {
visibility: hidden;
}
.hidden {
display: none;
visibility: hidden;
}
/* Responsive Visibilty Classes */
.visible-phone {
display: none !important;
}
.visible-tablet {
display: none !important;
}
.hidden-desktop {
display: none !important;
}
@media (max-width: 767px) {
.visible-phone {
display: inherit !important;
}
.hidden-phone {
display: none !important;
}
.hidden-desktop {
display: inherit !important;
}
.visible-desktop {
display: none !important;
}
}
@media (min-width: 768px) and (max-width: 1139px) {
.visible-tablet {
display: inherit !important;
}
.hidden-tablet {
display: none !important;
}
.hidden-desktop {
display: inherit !important;
}
.visible-desktop {
display: none !important ;
}
}
.accordion, .accordion * {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
.accordion {
overflow:hidden;
border-radius:3px;
background:#f7f7f7;
}
/*----- Section Titles -----*/
.accordion-section-title {
width:100%;
padding:15px;
display:inline-block;
border-bottom:1px solid #1a1a1a;
background:#ffffff;
transition:all linear 0.15s;
/* Type */
font-size:1.200em;
color:#0082C4;
text-decoration:underline;
}
.accordion-section-title.active, .accordion-section-title:hover {
background:#e6e6e6;
/* Type */
color:#0082C4;
text-decoration:none;
}
.accordion-section:last-child .accordion-section-title {
border-bottom-color:white;
padding-bottom:2px;
}
/*----- Section Content -----*/
.accordion-section-content {
padding:15px;
display:none;
}
/* Images */
img {
max-width: 100%;
height: auto;
border: 0;
-ms-interpolation-mode: bicubic;
vertical-align: bottom; /* Suppress the space beneath the baseline */
}
img.alignRight{
margin: 0 0 5px 15px;
}
img.alignLeft{
margin: 0 15px 5px 0;
}
/* Reduces min-height on bootstrap structure */
.row-fluid [class*="span"] { min-height: 1px; }
/* Blog Social Sharing */
.hs-blog-social-share .hs-blog-social-share-list {
margin: 0;
list-style: none !important;
}
.hs-blog-social-share .hs-blog-social-share-list .hs-blog-social-share-item {
height: 30px;
list-style: none !important;
}
@media (max-width: 479px){
.hs-blog-social-share .hs-blog-social-share-list .hs-blog-social-share-item:nth-child(2) {
float: none !important; /* Stack social icons into two rows on phones */
}
}
.hs-blog-social-share .hs-blog-social-share-list .hs-blog-social-share-item .fb-like > span{
vertical-align: top !important; /* Aligns Facebook icon with other social media icons */
}
/* Captcha */
#recaptcha_response_field {
width: auto !important;
display: inline-block !important;
}
/* Videos */
video {
max-width: 100%;
height: auto;
}
/* Date Picker */
#calroot {
width: 202px !important;
line-height: normal;
}
#calroot,
#calroot *,
#calroot *:before,
#calroot *:after {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
#calroot select {
min-height: 0 !important;
padding: 1px 2px !important;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet MS", Verdana, sans-serif !important;
font-size: 10px !important;
line-height: 18px !important;
font-weight: normal !important;
}
#caldays {
margin-bottom: 4px;
}
/* Embed Container (iFrame, Object, Embed) */
.hs-responsive-embed {
position: relative;
height: 0;
overflow: hidden;
padding-top: 0;
padding-left: 0;
padding-right: 0;
}
.hs-responsive-embed iframe,
.hs-responsive-embed object,
.hs-responsive-embed embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
.hs-responsive-embed,
.hs-responsive-embed.hs-responsive-embed-youtube,
.hs-responsive-embed.hs-responsive-embed-wistia,
.hs-responsive-embed.hs-responsive-embed-vimeo {
padding-bottom: 56.25%;
}
.hs-responsive-embed.hs-responsive-embed-instagram {
padding-bottom: 116.01%;
}
.hs-responsive-embed.hs-responsive-embed-pinterest {
height: auto;
overflow: visible;
padding: 0;
}
.hs-responsive-embed.hs-responsive-embed-pinterest iframe {
position: static;
width: auto;
height: auto;
}
iframe[src^="http://www.slideshare.net/slideshow/embed_code/"] {
width: 100%;
max-width: 100%;
}
@media (max-width: 568px) {
iframe {
max-width: 100%;
}
}
/* Forms */
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"]
select {
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* System Template Forms */
#email-prefs-form .email-edit {
width: 100% !important;
max-width: 507px !important;
}
#hs-pwd-widget-password {
height: auto !important;
}
/* Menus */
.hs-menu-wrapper ul {
padding: 0;
}
/* Horizontal Menu
========================================================================== */
.hs-menu-wrapper.hs-menu-flow-horizontal ul {
list-style: none;
margin: 0;
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul {
display: inline-block;
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul:before {
content: " ";
display: table;
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul:after {
content: " ";
display: table;
clear: both;
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-menu-depth-1 {
float: left;
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li a {
display: inline-block;
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children {
position: relative;
}
.hs-menu-wrapper.hs-menu-flow-horizontal.flyouts > ul li.hs-item-has-children ul.hs-menu-children-wrapper {
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 0.4s;
position: absolute;
z-index: 10;
left: 0;
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children ul.hs-menu-children-wrapper li a {
display: block;
white-space: nowrap;
}
.hs-menu-wrapper.hs-menu-flow-horizontal.flyouts > ul li.hs-item-has-children:hover > ul.hs-menu-children-wrapper {
opacity: 1;
visibility: visible;
}
.row-fluid-wrapper:last-child .hs-menu-wrapper.hs-menu-flow-horizontal > ul {
margin-bottom: 0;
}
.hs-menu-wrapper.hs-menu-flow-horizontal.hs-menu-show-active-branch {
position: relative;
}
.hs-menu-wrapper.hs-menu-flow-horizontal.hs-menu-show-active-branch > ul {
margin-bottom: 0;
}
.hs-menu-wrapper.hs-menu-flow-horizontal.hs-menu-show-active-branch > ul li.hs-item-has-children {
position: static;
}
.hs-menu-wrapper.hs-menu-flow-horizontal.hs-menu-show-active-branch > ul li.hs-item-has-children ul.hs-menu-children-wrapper {
display: none;
}
.hs-menu-wrapper.hs-menu-flow-horizontal.hs-menu-show-active-branch > ul li.hs-item-has-children.active-branch > ul.hs-menu-children-wrapper {
display: block;
visibility: visible;
opacity: 1;
}
.hs-menu-wrapper.hs-menu-flow-horizontal.hs-menu-show-active-branch > ul li.hs-item-has-children.active-branch > ul.hs-menu-children-wrapper:before {
content: " ";
display: table;
}
.hs-menu-wrapper.hs-menu-flow-horizontal.hs-menu-show-active-branch > ul li.hs-item-has-children.active-branch > ul.hs-menu-children-wrapper:after {
content: " ";
display: table;
clear: both;
}
.hs-menu-wrapper.hs-menu-flow-horizontal.hs-menu-show-active-branch > ul li.hs-item-has-children.active-branch > ul.hs-menu-children-wrapper > li {
float: left;
}
.hs-menu-wrapper.hs-menu-flow-horizontal.hs-menu-show-active-branch > ul li.hs-item-has-children.active-branch > ul.hs-menu-children-wrapper > li a {
display: inline-block;
}
/* Vertical Menu
========================================================================== */
.hs-menu-wrapper.hs-menu-flow-vertical {
width: 100%;
}
.hs-menu-wrapper.hs-menu-flow-vertical ul {
list-style: none;
margin: 0;
}
.hs-menu-wrapper.hs-menu-flow-vertical li a {
display: block;
}
.hs-menu-wrapper.hs-menu-flow-vertical > ul {
margin-bottom: 0;
}
.hs-menu-wrapper.hs-menu-flow-vertical > ul li.hs-menu-depth-1 > a {
width: auto;
}
.hs-menu-wrapper.hs-menu-flow-vertical > ul li.hs-item-has-children {
position: relative;
}
/* Flyouts */
.hs-menu-wrapper.hs-menu-flow-vertical.flyouts > ul li.hs-item-has-children ul.hs-menu-children-wrapper {
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 0.4s;
position: absolute;
z-index: 10;
left: 0;
}
.hs-menu-wrapper.hs-menu-flow-vertical > ul li.hs-item-has-children ul.hs-menu-children-wrapper li a {
display: block;
white-space: nowrap;
}
.hs-menu-wrapper.hs-menu-flow-vertical.flyouts > ul li.hs-item-has-children ul.hs-menu-children-wrapper {
left: 100%;
top: 0;
}
.hs-menu-wrapper.hs-menu-flow-vertical.flyouts > ul li.hs-item-has-children:hover > ul.hs-menu-children-wrapper {
opacity: 1;
visibility: visible;
}
@media (max-width: 767px) {
.hs-menu-wrapper, .hs-menu-wrapper * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: block;
width: 100%;
}
.hs-menu-wrapper.hs-menu-flow-horizontal ul {
list-style: none;
margin: 0;
display: block;
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul {
display: block;
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-menu-depth-1 {
float: none;
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li a,
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children ul.hs-menu-children-wrapper li a,
.hs-menu-wrapper.hs-menu-flow-horizontal.hs-menu-show-active-branch > ul li.hs-item-has-children.active-branch > ul.hs-menu-children-wrapper > li a {
display: block;
}
/* Stacking Horizontal Nav for Mobile */
.hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-item-has-children ul.hs-menu-children-wrapper {
visibility: visible !important;
opacity: 1 !important;
position: static !important;
}
.hs-menu-wrapper.hs-menu-flow-horizontal ul ul ul {
padding: 0;
}
.hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-item-has-children ul.hs-menu-children-wrapper li a {
white-space: normal;
}
/* Stacking Vertical Nav for Mobile */
.hs-menu-wrapper.hs-menu-flow-vertical.flyouts > ul li.hs-item-has-children ul.hs-menu-children-wrapper {
position: static;
opacity: 1;
visibility: visible;
}
}
.hs-menu-wrapper.hs-menu-flow-vertical.no-flyouts .hs-menu-children-wrapper {
visibility: visible;
opacity: 1;
}
.hs-menu-wrapper.hs-menu-flow-horizontal.no-flyouts > ul li.hs-item-has-children ul.hs-menu-children-wrapper {
display: block;
visibility: visible;
opacity: 1;
}
/* Space Module */
.widget-type-space {
visibility: hidden;
}
/* Blog Author Section */
.hs-author-social-links {
display: inline-block;
}
.hs-author-social-links a.hs-author-social-link {
width: 40px;
height: 40px;
border-width: 0px;
border: 0px;
border-radius:50%;
line-height: 40px;
background-size: 40px 40px;
background-repeat: no-repeat;
display: inline-block;
text-indent: -99999px;
}
.hs-author-social-section.hs-author-social-links a.hs-author-social-link.hs-social-facebook {
background-image: url("//info.nols.edu/hubfs/Brand_Design_Elements/Share_icons/facebook-lightsand-shade-40px.gif")!important;
}
.hs-author-social-links a.hs-author-social-link.hs-social-linkedin {
background-image: url("//info.nols.edu/hubfs/Brand_Design_Elements/Share_icons/linkedin-lightsand-shade-40px.gif");
}
.hs-author-social-links a.hs-author-social-link.hs-social-twitter {
background-image: url("//info.nols.edu/hubfs/Brand_Design_Elements/Share_icons/twitter-lightsand-shade-40px.gif");
}
.hs-author-social-links a.hs-author-social-link.hs-social-google-plus { /*displayed as Instagrma because it is more useful than Google+ */
background-image: url("//info.nols.edu/hubfs/Brand_Design_Elements/Share_icons/instagram-lightsand-shade-40px.gif");
}
/* Fix for CTA border box issue */
.hs-cta-wrapper a {
box-sizing: content-box;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
}
/*
* jQuery FlexSlider v2.0
* http://www.woothemes.com/flexslider/
*
* Copyright 2012 WooThemes
* Free to use under the GPLv2 license.
* http://www.gnu.org/licenses/gpl-2.0.html
*
* Contributing author: Tyler Smith (@mbmufffin)
*/
/* Wrapper */
.hs_cos_wrapper_type_image_slider {
display: block;
overflow: hidden
}
/* Browser Resets */
.hs_cos_flex-container a:active,
.hs_cos_flex-slider a:active,
.hs_cos_flex-container a:focus,
.hs_cos_flex-slider a:focus {outline: none;}
.hs_cos_flex-slides,
.hs_cos_flex-control-nav,
.hs_cos_flex-direction-nav {margin: 0; padding: 0; list-style: none;}
/* FlexSlider Necessary Styles
*********************************/
.hs_cos_flex-slider {margin: 0; padding: 0;}
.hs_cos_flex-slider .hs_cos_flex-slides > li {display: none; -webkit-backface-visibility: hidden; position: relative;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.hs_cos_flex-slider .hs_cos_flex-slides img {width: 100%; display: block; border-radius: 0px;}
.hs_cos_flex-pauseplay span {text-transform: capitalize;}
/* Clearfix for the .hs_cos_flex-slides element */
.hs_cos_flex-slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .hs_cos_flex-slides {display: block;}
* html .hs_cos_flex-slides {height: 1%;}
/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
* include js that eliminates this class on page load */
/* FlexSlider Default Theme
*********************************/
.hs_cos_flex-slider {margin: 0 0 60px; background: #fff; border: 0; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; zoom: 1;}
.hs_cos_flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;}
.loading .hs_cos_flex-viewport {max-height: 300px;}
.hs_cos_flex-slider .hs_cos_flex-slides {zoom: 1;}
.carousel li {margin-right: 5px}
/* Direction Nav */
.hs_cos_flex-direction-nav {*height: 0;}
.hs_cos_flex-direction-nav a {width: 30px; height: 30px; margin: -20px 0 0; display: block; background: url(http://cdn2.hubspotqa.com/local/hub/124/file-52894-png/bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 50%; z-index: 10; cursor: pointer; text-indent: -9999px; opacity: 0; -webkit-transition: all .3s ease;}
.hs_cos_flex-direction-nav .hs_cos_flex-next {background-position: 100% 0; right: -36px; }
.hs_cos_flex-direction-nav .hs_cos_flex-prev {left: -36px;}
.hs_cos_flex-slider:hover .hs_cos_flex-next {opacity: 0.8; right: 5px;}
.hs_cos_flex-slider:hover .hs_cos_flex-prev {opacity: 0.8; left: 5px;}
.hs_cos_flex-slider:hover .hs_cos_flex-next:hover, .hs_cos_flex-slider:hover .hs_cos_flex-prev:hover {opacity: 1;}
.hs_cos_flex-direction-nav .hs_cos_flex-disabled {opacity: .3!important; filter:alpha(opacity=30); cursor: default;}
/* Direction Nav for the Thumbnail Carousel */
.hs_cos_flex_thumbnavs-direction-nav {
margin: 0px;
padding: 0px;
list-style: none;
}
.hs_cos_flex_thumbnavs-direction-nav {*height: 0;}
.hs_cos_flex_thumbnavs-direction-nav a {width: 30px; height: 140px; margin: -60px 0 0; display: block; background: url(http://cdn2.hubspotqa.com/local/hub/124/file-52894-png/bg_direction_nav.png) no-repeat 0 40%; position: absolute; top: 50%; z-index: 10; cursor: pointer; text-indent: -9999px; opacity: 1; -webkit-transition: all .3s ease;}
.hs_cos_flex_thumbnavs-direction-nav .hs_cos_flex_thumbnavs-next {background-position: 100% 40%; right: 0px; }
.hs_cos_flex_thumbnavs-direction-nav .hs_cos_flex_thumbnavs-prev {left: 0px;}
.hs-cos-flex-slider-control-panel img { cursor: pointer; }
.hs-cos-flex-slider-control-panel img:hover { opacity:.8; }
.hs-cos-flex-slider-control-panel { margin-top: -30px; }
/* Control Nav */
.hs_cos_flex-control-nav {width: 100%; position: absolute; bottom: -40px; text-align: center;}
.hs_cos_flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;}
.hs_cos_flex-control-paging li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; box-shadow: inset 0 0 3px rgba(0,0,0,0.3);}
.hs_cos_flex-control-paging li a:hover { background: #333; background: rgba(0,0,0,0.7); }
.hs_cos_flex-control-paging li a.hs_cos_flex-active { background: #000; background: rgba(0,0,0,0.9); cursor: default; }
.hs_cos_flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
.hs_cos_flex-control-thumbs li {width: 25%; float: left; margin: 0;}
.hs_cos_flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;}
.hs_cos_flex-control-thumbs img:hover {opacity: 1;}
.hs_cos_flex-control-thumbs .hs_cos_flex-active {opacity: 1; cursor: default;}
@media screen and (max-width: 860px) {
.hs_cos_flex-direction-nav .hs_cos_flex-prev {opacity: 1; left: 0;}
.hs_cos_flex-direction-nav .hs_cos_flex-next {opacity: 1; right: 0;}
}
.hs_cos_flex-slider .caption {
background-color: black;
position: static;
font-size: 2em;
line-height: 1.1em;
color: white;
padding: 0px 5% 0px 5%;
width: 100%;
top: 40%;
text-align: center;
}
.hs_cos_flex-slider .superimpose .caption {
color: white;
font-size: 3em;
line-height: 1.1em;
position: absolute;
padding: 0px 5% 0px 5%;
width: 90%;
top: 40%;
text-align: center;
background-color: transparent;
}
@media all and (max-width: 400px) {
.hs_cos_flex-slider .superimpose .caption {
background-color: black;
position: static;
font-size: 2em;
line-height: 1.1em;
color: white;
width: 90%;
padding: 0px 5% 0px 5%;
top: 40%;
text-align: center;
}
}
.hs_cos_flex-slider h1,
.hs_cos_flex-slider h2,
.hs_cos_flex-slider h3,
.hs_cos_flex-slider h4,
.hs_cos_flex-slider h5,
.hs_cos_flex-slider h6,
.hs_cos_flex-slider p {
color: white;
}
/* Thumbnail only version of the gallery */
.hs-gallery-thumbnails li {
display: inline-block;
margin: 0px;
padding: 0px;
margin-right:-4px;
}
.hs-gallery-thumbnails.fixed-height li img {
max-height: 150px;
margin: 0px;
padding: 0px;
border-width: 0px;
}
/* responsive pre elements */
pre {
overflow-x: auto;
}
/* responsive pre tables */
table pre {
white-space: pre-wrap;
}
/* adding minimal spacing for blog comments */
.comment {
margin: 10px 0 10px 0;
}
/* make sure lines with no whitespace don't interefere with layout */
.hs_cos_wrapper_type_rich_text,
.hs_cos_wrapper_type_text,
.hs_cos_wrapper_type_header,
.hs_cos_wrapper_type_section_header,
.hs_cos_wrapper_type_raw_html,
.hs_cos_wrapper_type_raw_jinja,
.hs_cos_wrapper_type_page_footer {
word-wrap: break-word;
}
@media all and (max-width: 400px) {
/* beat recaptcha into being responsive, !importants and specificity are necessary */
#captcha_wrapper,
#recaptcha_area,
#recaptcha_area table#recaptcha_table,
#recaptcha_area table#recaptcha_table .recaptcha_r1_c1
{ width: auto !important; overflow: hidden; }
#recaptcha_area table#recaptcha_table .recaptcha_r4_c4
{ width: 67px !important; }
#recaptcha_area table#recaptcha_table #recaptcha_image
{ width:280px !important; }
}
@font-face {
font-family: 'Stratum2WebBlack';
src: url('https://548959.fs1.hubspotusercontent-na1.net/hubfs/548959/Custom_Fonts/Stratum/Stratum2WebBlack.eot') format('eot'),
url('https://548959.fs1.hubspotusercontent-na1.net/hubfs/548959/Custom_Fonts/Stratum/Stratum2WebBlack.woff2') format('woff2'),
url('https://548959.fs1.hubspotusercontent-na1.net/hubfs/548959/Custom_Fonts/Stratum/Stratum2WebBlack.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Stratum2WebRegular';
src: url('https://548959.fs1.hubspotusercontent-na1.net/hubfs/548959/Custom_Fonts/Stratum/Stratum2WebRegular.eot') format('embedded-opentype'),
url('https://548959.fs1.hubspotusercontent-na1.net/hubfs/548959/Custom_Fonts/Stratum/Stratum2WebRegular.woff2') format('woff2'),
url('https://548959.fs1.hubspotusercontent-na1.net/hubfs/548959/Custom_Fonts/Stratum/Stratum2WebRegular.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'GT-Pressura-Bold';
src: url('https://548959.fs1.hubspotusercontent-na1.net/hubfs/548959/Custom_Fonts/Pressura/GT-Pressura-Bold.eot') format('embedded-opentype'),
url('https://548959.fs1.hubspotusercontent-na1.net/hubfs/548959/Custom_Fonts/Pressura/GT-Pressura-Bold.ttf') format('truetype'),
url('https://548959.fs1.hubspotusercontent-na1.net/hubfs/548959/Custom_Fonts/Pressura/GT-Pressura-Bold.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'GT-Pressura-Regular';
src: url('https://548959.fs1.hubspotusercontent-na1.net/hubfs/548959/Custom_Fonts/Pressura/GT-Pressura-Regular.eot') format('embedded-opentype'),
url('https://548959.fs1.hubspotusercontent-na1.net/hubfs/548959/Custom_Fonts/Pressura/GT-Pressura-Regular.ttf') format('truetype'),
url('https://548959.fs1.hubspotusercontent-na1.net/hubfs/548959/Custom_Fonts/Pressura/GT-Pressura-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'GT-Pressura-Light';
src: url('https://548959.fs1.hubspotusercontent-na1.net/hubfs/548959/Custom_Fonts/Pressura/GT-Pressura-Light.otf') format('opentype');
font-weight: normal;
font-style: normal;
}
/* These includes are optional, but helpful. */
/* HTML 5 Reset */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
display: block;
}
audio, canvas, video {
display: inline-block;
*display: inline;
*zoom: 1;
}
audio:not([controls]) {
display: none;
}
/* Support migrations from wordpress */
.wp-float-left {
float: left;
margin: 0 20px 20px 0;
}
.wp-float-right {
float: right;
margin: 0 0 20px 20px;
}
/* Responsive Google Maps */
#map_canvas img, .google-maps img {
max-width: none;
}
/* line height fix for reCaptcha theme */
#recaptcha_table td {line-height: 0;}
.recaptchatable #recaptcha_response_field {min-height: 0;line-height: 12px;}
/* ==========================================================================
Index:
1. BASE STYLES
- Variables
- Macros
- Base
- Typography
- Reusable
2. COS STRUCTURE
- Structure
- Header
- Content
- Footer
3. MAIN NAVIGATION
- Custom Menu Primary
- Mobile Menu
4. TEMPLATE MODULE CLASSES
- Common Template Classes
- Site Pages
- Landing Pages
- System Pages
5. COS COMPONENTS
- Blog
- Forms
- Buttons
6. MISCELLANOUS
7. MOBILE MEDIA QUERIES
========================================================================== */
/* ==========================================================================
1. BASE STYLES
========================================================================== */
/* ==========================================================================
Variables
========================================================================== */
/**
* Find the most consistently used font styles, colors, and container widths
* for your site and assign them to the jinja variables below for easy use
* and reference.
*
* Apply the variable as shown below. Ignore the jingja comment tags.
*
*
*/
/*Custom Web Fonts*/
/* Colors */
/* */
/* Typography */
/* */
/* */
/* */
/* */
/* Containers */
/* Used on '.page-center' in 'Base' and in the 'Portrait tablet to landscape and desktop' media query */
.color-light {
color: #f8f6ed;
}
.color-sand {
color: #f2eddb;
}
.color-sun {
color: #f9a519;
}
/* ==========================================================================
Macros
========================================================================== */
/**
* Create jinja macros for CSS3 properties that need browser prefixes.
*
* Apply the style as shown below on it's own CSS property line.
* Ignore the jinja comment tags.
*
*
*/
/**
* Example of how to apply the above macro (ignore the jinja comment tags):
*
* a {
* color: red;
* font-size: 12px;
*
* }
*/
/* ==========================================================================
Base
========================================================================== */
/**
* Box Sizing
*
* Applies a natural box layout model to all elements so that width and padding
* are essentially combined, making responsive styles easier to manage.
*/
*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
text-rendering:geometricPrecision;
}
html, body {
min-height: 100%;
margin: 0;
padding: 0;
}
/* Website background color and default font styles */
body {
color: ;
font-family: Sentinel A, Sentinel B;
font-size: 18px;
line-height: 23px;
}
/**
* Page Center
*
* Apply .page-center to full-width modules.
*/
.container-fluid .row-fluid .page-center {
float: none;
max-width: 100%;
margin: 0 auto;
}
a:hover, a:focus { color: #a14b00;text-decoration:underline; }
hr {
color: #ccc;
background-color: #ccc;
height: 1px;
border: none;
}
/* Highlighted Text */
::-moz-selection { background: #ACCEF7; }
::selection { background: #ACCEF7; }
/* Corrects width issues in table elements created via the wysiwyg editor */
table tr td img {
max-width: initial;
}
/* ==========================================================================
Typography
========================================================================== */
/* Basic text */
body{
font-family:"Sentinel A", "Sentinel B", serif;
font-weight:normal;
line-height:1.5;
color:#0a0a0a;
background:#f8f6ed;
}
p.side-body{
font-family:"GT-Pressura-Light", Helvetica, Arial, sans-serif;
font-size:1.15em;
}
a:hover{
text-decoration:underline;
}
small {}
strong {}
em {}
cite {}
code {}
pre {}
sup, sub {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline;
}
sup { top: -0.5em; }
sub { bottom: -0.25em; }
/* Headings */
h1, h2, h3, h4, h5, h6 {
margin:10px 0 15px;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {}
h1 {
font-size:2.25em;
line-height:1.2;
color: inherit;
text-transform:uppercase;
font-family:"Stratum2WebBlack", Helvetica, Arial, sans-serif;
}
h2 {
font-family:"GT-Pressura-Bold", Helvetica, Arial, sans-serif;
font-size:1.75em;
line-height:1.2;
color: inherit;
}
h4 {
font-family:"Stratum2WebBlack", Helvetica, Arial, sans-serif;
text-transform:uppercase;
font-size:.875em;
line-height:1.2;
letter-spacing:0.075em;
}
h5 {
font-size: .875em;
line-height: 1.2;
font-family: "Stratum2WebBlack", sans-serif;
text-transform: uppercase;
letter-spacing:0.075em;
}
h6 {
font-size:.75em;
line-height:1.2;
color:#9d9d9d;
}
/*Headings*/
.heading-xxxxxx-large{
font-family:"Stratum2WebBlack", sans-serif;
font-weight:normal;
line-height:1.2;
text-transform:uppercase;
letter-spacing:.1em;
z-index:1;
font-size:80px;
}
.heading-xxxxx-large{
font-family:"Stratum2WebBlack", sans-serif!important;
font-weight:normal;
line-height:1.2;
text-transform:uppercase;
letter-spacing:0.025em;
z-index:1;
font-size:70px; /*----Nikole discovered this is what is affecting responsiveness of hero header on mobile-----*/
font-size: 8vw /*----Nikole added to fix hero header mobile responsiveness----*/
}
/*START---Greg's Developers from GKH/Pulschecker added this code to prevent loading of mobile menu on page load*/
@media only screen and (min-width: 1024px) {
.span12.widget-span.widget-type-global_widget.mobile-menu {
display: none;
}
}
@media only screen and (min-width: 1024px){
#hs_cos_wrapper_offcanvasmenu {
display: none;
}
}
/*END----Greg's Developers from GKH/Pulschecker added this code to prevent loading of mobile menu on page load*/
/*@media (max-width: 425px) {
.heading-xxxxx-large {
font-size: 34px; Nikole added to fix hero header mobile responsiveness
}
}*/
/*@author: ben note: this is a quick fix for the trails to success landing page this should be removed eventually*/
/*.hero-cut-off--fix div div.stage--is-hero {
padding-top: 200px;
}
@media screen only (min-width: 2000px) {
.hero-cut-off--fix div div.stage--is-hero {
padding-top: 300px;
}
}/*
/*@author: ben note: this is a quick fix for the trails to success landing page this should be removed eventually*/
.heading-xxxx-large{
font-family:"Stratum2WebBlack", sans-serif;
font-weight:normal;
line-height:1.2;
text-transform:uppercase;
letter-spacing:0.025em;
z-index:1;
font-size:46px;
}
.heading-xxx-large{
font-family:"Stratum2WebBlack", sans-serif;
font-weight:normal;
line-height:1.2;
text-transform:uppercase;
letter-spacing:.1em;
z-index:1;
font-size:34px;
}
.heading-xx-large{
font-family:"Stratum2WebBlack", sans-serif;
font-weight:normal;
line-height:1.2;
text-transform:uppercase;
letter-spacing:.1em;
z-index:1;
font-size:30px;
}
.heading-x-large{
font-family:"Stratum2WebBlack", sans-serif;
font-weight:normal;
line-height:1.2;
text-transform:uppercase;
letter-spacing:.1em;
z-index:1;
font-size:24px;
}
.heading-large{
font-family:"Stratum2WebBlack", sans-serif;
font-weight:normal;
line-height:1.2;
text-transform:uppercase;
letter-spacing:.1em;
z-index:1;
font-size:20px;
}
.heading-regular{
font-family:"Stratum2WebBlack", sans-serif;
font-weight:normal;
line-height:1.2;
text-transform:uppercase;
letter-spacing:.1em;
z-index:1;
font-size:16px;
}
.heading-small{
font-family:"Stratum2WebBlack", sans-serif;
font-weight:normal;
line-height:1.2;
text-transform:uppercase;
letter-spacing:.1em;
z-index:1;
font-size:12px;
}
/*.hero-title .heading-group .text-center */
body > div.header-container-wrapper > div > div.row-fluid-wrapper.row-depth-1.row-number-2 > div > div > div.row-fluid-wrapper.row-depth-1.row-number-4 > div > div{
position:absolute;
top:15%;
padding:5% 10%;
}
/* overriding font styles for Stratum coming form screen.css to fix CORS issue*/
.menu{
font-family:"Stratum2WebBlack", sans-serif;
}
.navbar a{
font-family:"Stratum2WebBlack", sans-serif;
}
.menu-meta{
font-family:"Stratum2WebBlack", sans-serif;
}
.flyout .h4{
font-family:"Stratum2WebBlack", sans-serif;
}
/* START Mobile Menu Styles */
.mobile-menu{
font-family:"Stratum2WebBlack", sans-serif;
background-image:url("https://www.nols.edu/portal_static/assets/img/nav_bg.jpg")!important;
background-position:100%;
background-repeat:no-repeat;
background-position:top left;
}
/* @author: Ben Groneman
* This is a fix for the mobile menu list items being misaligned with the */
.off-canvas__submenu > li {
font-family: "Stratum2WebBlack", Georgia, Times New Roman, serif!important;
/* This ensures the height will match nols.edu */
height: auto;
}
.mobile-menu-meta{
padding-top:0;
font-family:"Stratum2WebBlack", sans-serif;
}
.mobile-menu-meta li{
border-bottom:none;
margin-left:-2rem;
margin: auto;
font-family: "Stratum2WebBlack", Georgia, Times New Roman, serif!important;
}
/* END Mobile Menu Styles */
/*footer custom fonts*/
.footer-info h5{
font-family:"Stratum2WebBlack";
}
.footer-info small {
font-family:"Stratum2WebBlack";
}
.footer h6 {
font-family:"Stratum2WebBlack";
}
/* Lists */
/*Ben has commented this out because it was interfering with the menu 12-10-18*/
/* ul, ol {
font-family:inherit;
display:block;
-webkit-margin-before: 1em;
-webkit-margin-after:1em;
-webkit-margin-start:0;
-webkit-margin-end:0;
-webkit-padding-start: 40px;
} */
ul.unstyled, ol.unstyled {
list-style: none;
padding: 0;
line-height:15px;
}
ul.styled{
list-style-image: url("https://info.nols.edu/hubfs/Brand_Design_Elements/field-note-arrow-small-mud.png");
margin-left:50px;
padding:20px;
}
ul a:hover{
text-decoration:underline;
color: #a14b00;
}
/*Linked Lists*/
ul.list-links{
margin:0;
padding:0;
list-style:none;
margin-left:3.75em;
border-top:2px solid #d36300;
border-bottom:2px solid #d36300;
}
/*column lists*/
.list-columns{
margin:2em 0;
padding:1.875em 0;
text-align:left;
border-top:1px solid #9d9d9d;
border-bottom:1px solid #9d9d9d;
}
/* ==========================================================================
Start Re-usable classes
========================================================================== */
.wrapper-is-flexed {
display: flex!important;
}
.is-flexed--center {
margin: auto!important;
}
.img-height-is-250 div span > img {
height: 250px!important;
object-fit: cover!important;
}
.img-height-is-350 div span > img {
height: 350px!important;
width: 100%!important;
object-fit: cover!important;
}
.img-height-is-350 {
display: flex;
height: 350px!important;
width: 100%!important;
object-fit: cover!important;
}
/*This is here because we want to be sure that if the aspect ratio changes, that the image is still in the center*/
.img-height-is-350 div span {
margin: auto;
}
.img-height-is-250 {
height: 250px!important;
width: 100%!important;
object-fit: cover!important;
}
.clip-top-bottom--padding {
padding-top: 0!important;
padding-bottom: 0!important;
}
.clip-bottom--padding {
padding-bottom: 0!important;
}
/* ==========================================================================
END re-usable classes
========================================================================== */
/* ==========================================================================
2. COS STRUCTURE
========================================================================== */
/* ==========================================================================
Structure
========================================================================== */
/* The outer wrappers of your website */
.header-container-wrapper,
.body-container-wrapper,
.footer-container-wrapper {}
/* The inner wrappers of your website */
.header-container,
.body-container,
.footer-container {}
/* ==========================================================================
Header
========================================================================== */
.header-container-wrapper {}
.header-container {}
.top-header {
}
.top-header {
}
/* Logo styling */
.header-container .hs_cos_wrapper_type_logo {}
.header-container .hs_cos_wrapper_type_logo a {}
.header-container .hs_cos_wrapper_type_logo a img {}
/*Hero Image*/
div.header-wrapper{
position:relative;
width: 100%;
height: 800px;
z-index: 0;
background-image: url(//info.nols.edu/hubfs/Campaigns/Step_Forward/NOLS-Mx-Sail.-Coyote---EB.-3---24-January-2012.---086.jpg);
background-size: cover;
background-position: center
background-repeat:no-repeat;
margin-top:-90px;
}
.page-title{
position:absolute;
top:50%;
text-align:center;
}
.custom-logo {
position: fixed;
top: 0;
left:0;
right:0;
margin:auto !important;
z-index:14;
max-width:150px;
}
.hero-button{
padding-top:5%;
}
.hero-cta-button{
padding-bottom:100px;
}
/* ==========================================================================
Content
========================================================================== */
.body-container .page-center {/*use page-center for 2 column layouts*/
padding: 100px 20%;
}
.body-container .page-center-full { /*use page-center-full for full width layouts*/
padding: 100px 23%;
}
.body-container-wrapper { }
.body-container {}
/* Unique Pages
========================================================================== */
/* Homepage */
/* Contact Us */
/* About Us */
/* Modular & Reusable Components
========================================================================== */
/* Callouts */
/* Social Media Custom Icons */
/* Additional Menus aside from the Main Nav */
/*Clip Path - @nwohlmacher removed for Chrome v66 bug*/
/* .clip{
-webkit-clip-path: url(#FirstClip);
clip-path: url(#FirstClip);
z-index: 5;
height: 100%;
-webkit-transform: translateZ(1px);
margin-top:-150px;
}
.clip-padding{
padding:100px 0;
} */
/*Separator*/
.separator{
postion:relative;
margin:0;
text-align:center;
overflow:hidden;
}
.separator span{
position:relative;
z-index:1;
display:inline-block;
padding:0 30px;
}
p.separator:after{
position:relative;
bottom:125px;
z-index:0;
display:inline-block;
margin-top:-1px;
width:100%;
content:'';
border-bottom:4px solid #d36300;
}
.background-light {
background-color:#f8f6ed;
}
/* ==========================================================================
Footer
========================================================================== */
/* March 2020, Ben Groneman added this to maintain consistent styles between nols.edu and info pages.
* The footer topo url (on nols.edu) contains a commit hash so it is subject to change --
* Using this as a background URL allows us to feel confident in knowing the URL won't change*/
.footer--info {
background-image: url("https://info.nols.edu/hubfs/Footer%20Assets/footer-topo.png")!important;
}
/* ==========================================================================
3. MAIN NAVIGATION
========================================================================== */
/* ==========================================================================
Custom Menu Primary
========================================================================== */
/* Set ul background color */
/* Set li background Color */
/* Set link Color */
/* Set link Hover Color */
/* Override max width on menu links */
.custom-menu-primary .hs-menu-wrapper > ul li a,
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children ul.hs-menu-children-wrapper li a {
overflow: visible !important;
max-width: none !important;
width: 100% !important;
}
.custom-menu-primary .hs-menu-wrapper > ul > li > ul > li:first-child > a{
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
/* ==========================================================================
Mobile Menu - Hubspot Standard Toggle Menu
========================================================================== */
/**
* Special Note
*
* When the menu is open, a class of .mobile-open is applied to the body. You can
* use this for custom styling on any element when the menu is in the open position.
*/
.mobile-trigger, .child-trigger{
display: none; /* Hide button on Desktop */
}
@media (max-width: 767px){
/* Variables
========================================================================== */
/* Set Mobile Menu Background Color */
/* Set Link Color */
/* Set Link Hover Color */
/*
* Menu Reset
*
* Remove styling from desktop version of custom-menu-primary. Place any
* additional CSS you want removed from the mobile menu in this reset
*/
.custom-menu-primary,
.custom-menu-primary .hs-menu-wrapper > ul,
.custom-menu-primary .hs-menu-wrapper > ul li,
.custom-menu-primary .hs-menu-wrapper > ul li a{
display: block;
float: none;
position: static;
top: auto;
right: auto;
left: auto;
bottom: auto;
padding: 0px;
margin: 0px;
background-image: none;
background-color: transparent;
border: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
max-width: none;
width: 100%;
height: auto;
line-height: 1;
font-weight: normal;
text-decoration: none;
text-indent: 0px;
text-align: left;
color:#000;
}
/* Toggle Button
========================================================================== */
.mobile-trigger{
display: inline-block !important; /* Show button on mobile */
cursor: pointer; /* Mouse pointer type on hover */
position: static; /*******************************************/
top: 14px; /* Position Button at right of screen */
right: 10px; /*******************************************/
width: auto; /* Button width */
height: auto; /* Button height */
padding: 7px 10px 8px 10px;
background: transparent; /* Background color */
font-size: 16px;
font-weight: normal;
text-align: left;
text-transform: uppercase;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.mobile-trigger:hover{
text-decoration: none; /* Removes link text underline on button */
/*color:#000;
background-color: #978D72;
border-color: transparent;*/
}
/* Change button when menu is open */
.mobile-open .mobile-trigger{
/*color: #fff;
background-color: #15395C;
border-color: transparent;*/
}
/* Toggle Button Icon
========================================================================== */
.mobile-trigger i{
display: inline;
position: relative;
top: -4px;
}
.mobile-trigger i:before, .mobile-trigger i:after{
position: absolute;
content: '';
}
.mobile-trigger i, .mobile-trigger i:before, .mobile-trigger i:after{
width: 22px; /* Icon line width */
height: 2px; /* Icon line height */
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
background-color: #fff; /* Icon color */
display: inline-block;
}
.mobile-trigger i:before{
top: -6px; /* Position top line */
}
.mobile-trigger i:after{
top: 6px; /* Position bottom line */
}
.mobile-trigger:hover i, .mobile-trigger:hover i:before, .mobile-trigger:hover i:after,
.mobile-open .mobile-trigger i, .mobile-open .mobile-trigger i:before, .mobile-open .mobile-trigger i:after{
/*background-color: #000; /* Icon color */
}
/* Child Toggle Button
========================================================================== */
.child-trigger{
display: block !important; /* Hide button on Desktop */
cursor: pointer; /* Mouse pointer type on hover */
position: absolute;
top: 0px;
right: 0px;
width: 55px !important; /* Button width */
min-width: 55px !important;
height: 45px !important; /* Button height */
padding: 0 !important;
border-left: 1px dotted rgba(255, 255, 255, .20);
}
.child-trigger:hover{
text-decoration: none;
}
.child-trigger i{
position: relative;
top: 50%; /* Centers icon inside button */
margin: 0 auto !important;
}
.child-trigger i:after{
position: absolute;
content: '';
}
.child-trigger i, .child-trigger i:after{
width: 10px; /* Icon line width */
height: 1px; /* Icon line height */
background-color:#000; /* Icon color */
display: block;
}
.child-trigger i:after{
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.child-trigger.child-open i:after{
-webkit-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
transform: rotate(-180deg);
}
.child-trigger.child-open i{
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
/* Menu Styles on Mobile Devices
========================================================================== */
/*Step Forward Navigation media queries*/
/* Hide menu on mobile */
/*Default Hubspot Styles */
.custom-menu-primary.js-enabled{
position: static;
padding-top: 0px; /* Makes room for button */
margin: 0;
text-align:center;
}
/* Hide menu on mobile */
.custom-menu-primary.js-enabled .hs-menu-wrapper,
.custom-menu-primary.js-enabled .hs-menu-children-wrapper{
display: none;
}
/* Make child lists appear below parent items */
.custom-menu-primary ul.hs-menu-children-wrapper{
visibility: visible !important;
opacity: 1 !important;
position: static !important;
display: none;
}
/* Mobile Menu Styles */
.custom-menu-primary.js-enabled .hs-menu-wrapper{
width: 100%;
position: relative; /**************************************************************/
top: 0; /* Positions the menu to drop from the very top of the screen */
left: 0; /**************************************************************/
padding: 0;
}
.custom-menu-primary .hs-menu-wrapper{
background-color:#978D72; /* Menu background color set off global menuColorMobile variable */
width: 100%; /* Full screen width */
}
/* Level 1 Menu List Styles */
.custom-menu-primary .hs-menu-wrapper > ul > li{
position: relative;
}
.custom-menu-primary .hs-menu-wrapper > ul > li a{
font-size: 18px; /* Font size of top level list items */
line-height: 40px;
overflow: visible;
}
/* Level 1 and Higher Menu List Styles */
.custom-menu-primary .hs-menu-wrapper > ul li{
/*border-top: 1px dotted gray; Adds transparent dark highlights to top of top level list items */
}
.custom-menu-primary .hs-menu-wrapper > ul li a{
padding: 0 10px;
color:#000; /* link color set by global mobile-aColor variable */
}
.custom-menu-primary .hs-menu-wrapper > ul li a:hover{
color:#000; /* link hover color set by global mobile-aColorHover variable */
}
/* Level 2 and Higher Menu List Styles */
.custom-menu-primary .hs-menu-wrapper > ul ul li{
background-color: rgba(255, 255, 255, .08);
}
.custom-menu-primary .hs-menu-wrapper > ul ul li a{
text-indent: 10px; /* Indent Child lists */
font-size: 16px; /* Font size of child lists */
}
/* Level 3 and Higher Menu List Styles */
.custom-menu-primary .hs-menu-wrapper > ul ul ul li a{
text-indent: 30px; /* Indent Child lists */
}
.custom-menu-primary .hs-menu-wrapper > ul ul ul ul li a{
text-indent: 50px; /* Indent Child lists */
}
}
/* ==========================================================================
Footer
========================================================================== */
.hs-form.stacked{ /*overides sand background on forms for the footer form*/
background-color:transparent!important;
}
/* ==========================================================================
4. TEMPLATE MODULE SELECTORS
========================================================================== */
/* Common Template Selectors
========================================================================== */
body.one-column {}
body.two-column {}
body.three-column {}
.content-wrapper {}
.main-content {}
.sidebar{}
.sidebar.right{}
.sidebar.left{}
/* Common One Column Selectors */
body.site-page.one-column,
body.landing-page.one-column,
body.error-template.one-column,
body.password-template.one-column,
body.subscription-template.one-column {}
body.site-page.one-column .main-content,
body.landing-page.one-column .main-content,
body.error-template .main-content,
body.password-template .main-content,
body.subscription-template .main-content {}
/* Common Two Column Selectors */
body.site-page.two-column,
body.landing-page.two-column,
body.blog {}
body.site-page.two-column .main-content,
body.landing-page.two-column .main-content,
body.blog .blog-content {}
/* Common Three Column Selectors */
body.site-page.three-column,
body.landing-page.three-column {}
body.site-page.three-column .main-content,
body.landing-page.three-column .main-content {}
/* Hero Image Styles
========================================================================== */
.hero-img{
width:100%;
height:63%!important;
background-color:#42494c!important;
}
.hero-img h2{
margin-top:-24%;
}
.hero-caption{
position: relative;
margin-top: -8%;
text-align: right;
color: #FFF;
font-size: .6em;
padding-right: 2%;
font-family: "Sentinel A", "Sentinel B";
font-style: italic;
font-weight: 400;
letter-spacing:.06em;
}
.thank-you-hero-stage{
background-image: url("//info.nols.edu/hubfs/Templates/Hero_Images/Thomas-Conor-Kensok-rm-7.jpg");
background-position:center;
background-repeat:no-repeat;
background-size:cover;
text-align center;
position:relative;
width:100%;
z-index:0;
min-height:500px!important;
}
.layout-widget-wrapper > span > h2.heading-xxxxx-large{
height:auto;
padding:70px 0 100px 0!important;
}
div.widget-type-rich_text .heading-group .text-center {
padding-bottom:6.25rem!important;
}
.heading-group--wrapper .clearfix{
padding-top:0!important;
}
/* Site Pages
========================================================================== */
/* One Column Template */
body.site-page.one-column {}
body.site-page.one-column .content-wrapper {}
body.site-page.one-column .main-content {}
/* Two Column Template */
body.site-page.two-column {}
body.site-page.two-column .content-wrapper {}
body.site-page.two-column .main-content {}
body.site-page.two-column .sidebar.right {}
/* Three Column Template */
body.site-page.three-column {}
body.site-page.three-column .content-wrapper {}
body.site-page.three-column .main-content {}
/* Landing Pages
========================================================================== */
/* One Column Template */
body.landing-page.one-column {}
body.landing-page.one-column .content-wrapper {
}
body.landing-page.one-column .main-content {}
/* Two Column Template */
body.landing-page.two-column {}
body.landing-page.two-column .content-wrapper {}
body.landing-page.two-column .main-content {}
body.landing-page.two-column .sidebar.right {}
/* Three Column Template */
body.landing-page.three-column {}
body.landing-page.three-column .content-wrapper {}
body.landing-page.three-column .main-content {}
/* System Pages
========================================================================== */
/* Error Templates 404, 500 */
body.error-template.one-column {}
body.error-template.one-column .content-wrapper {}
body.error-template.one-column .main-content {}
/* Password template */
body.password-template.one-column {}
body.password-template.one-column .content-wrapper {}
body.password-template.one-column .main-content {}
/* Email Subscribition templates */
body.subscription-template.one-column {}
body.subscription-template.one-column .content-wrapper {}
body.subscription-template.one-column .main-content {}
/* ==========================================================================
5. COS COMPONENTS
========================================================================== */
/* ==========================================================================
Forms
========================================================================== */
/* All Global Forms
========================================================================== */
/* Form Field */
body .hs-form-field {}
/* Required fields*/
.hs-form .hs-form-required{
color:#d36300!important;
}
.hs-form .hs-input{
max-width:none!important;
}
li.hs-form-checkbox label.hs-form-checkbox-display {
display: block;
padding-left: 15px;
text-indent: -15px;
height: 25px;
}
li.hs-form-checkbox label span {
height: 15px;
padding: 0;
margin: 0 0 0 10px;
vertical-align: bottom;
position: relative;
*overflow: hidden; /* CSS hack for cross browser compatability - https://stackoverflow.com/questions/306252/how-to-align-checkboxes-and-their-labels-consistently-cross-browsers */
}
.hs-fieldtype-select.field.hs-form-field {
height: fit-content!important; /** Fixed select elements cutting off broken AF **/
}
/* Descriptions */
body .hs-field-desc {}
.header-container .page-center input[type="text"] {
float: left;
max-width: 170px;
width: 168px;
border: 1px solid rgb(126, 157, 185);
padding: 2px;
}
h3.form-title {
max-width: 100%;
margin: 0;
color:#42494c;
}
/* Labels */
body label {}
form.hs-form {
color: #262626;
font-size: 14px;
display: block;
font-family: "Sentinel A", "Sentinel B", serif;
padding-bottom: 20px;
}
form .hs-field-desc {
color: #606060;
font-size: 12px;
display: block;
font-family: Helvetica;
font-style:italic;
padding-bottom: 5px;
}
body .hs-form-field > label {
font-family:"Stratum2WebBlack", Arial, Helvetica, sans-serif;
color:#d36300;
text-transform:uppercase;
font-size:1.45em;
padding-bottom: 5px;
}
/* One Line Inputs */
body input[type="text"],
body input[type="password"],
body input[type="datetime"],
body input[type="datetime-local"],
body input[type="date"],
body input[type="month"],
body input[type="time"],
body input[type="week"],
body input[type="number"],
body input[type="email"],
body input[type="url"],
body input[type="search"],
body input[type="tel"],
body input[type="color"],
body input[type="file"],
body textarea,
body select {
/* IMPORTANT BELOW IS A TEMPORARY FIX FOR FORM STYLES - need a more robust/long term solution in the future - Laura Griffee*/
/* Previous content here before form facelift
* width: 100%;
background-color: #f2eddb;
padding: 8px 0;
text-indent: 2%;
border: 1px solid #ccc;
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
-moz-transition: border linear .2s,box-shadow linear .2s;
-o-transition: border linear .2s,box-shadow linear .2s;
-moz-border-radius: 4px;
border: 1px solid #999;
-webkit-appearance: none;
margin-bottom: 15px;
display:block;
font-family:Sentinel A, Sentinel B; */
margin: 0 0 1rem;
padding: 0.5rem 1.5rem 0.5rem 1.25rem;
width: 100%;
height: 3rem;
background-image: url(data:image/svg+xml;utf8,);
background-origin: content-box;
background-position: right -1rem center;
background-repeat: no-repeat;
background-color: #FEFEFE;
background-size: 17px 8px;
border: none;
color: #424a4d;
font-family: Sentinel A, Sentinel B;
font-size: 1rem;
line-height: 1.5;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
-webkit-appearance: none;
transition: box-shadow 0.5s,border-color 0.25s ease-in-out;
box-sizing: border-box;
}
body input[type="password"]{
margin-bottom:10px !important;
margin-top:10px !important;
}
body input[type="text"]:focus,
body input[type="password"]:focus,
body input[type="datetime"]:focus,
body input[type="datetime-local"]:focus,
body input[type="date"]:focus,
body input[type="month"]:focus,
body input[type="time"]:focus,
body input[type="week"]:focus,
body input[type="number"]:focus,
body input[type="email"]:focus,
body input[type="url"]:focus,
body input[type="search"]:focus,
body input[type="tel"]:focus,
body input[type="color"]:focus,
body input[type="file"]:focus,
body textarea:focus,
body select:focus {
border-color: #333;
outline:none;
}
/* Separate Styles for Multiple Line Inputs */
body textarea {
min-height: 200px;
}
body textarea:focus {}
/* Separate Styles for Drop Downs */
body select {}
body select:focus {}
/* Multiple Selection Inputs */
body form.hs-form .hs-form-field ul.inputs-list {
list-style: none;
padding: 0;
}
body form.hs-form .hs-form-field ul.inputs-list li input {}
body input[type="radio"] {
float: left;
clear: none;
margin: 3px 10px!important;
vertical-align:middle;
}
body input[type="checkbox"] {}
/* Required */
body input:focus:required:invalid,
body textarea:focus:required:invalid,
body select:focus:required:invalid {}
body input:focus:required:invalid:focus,
body textarea:focus:required:invalid:focus,
body select:focus:required:invalid:focus {}
/* Placeholder Text */
::-webkit-input-placeholder { /* Webkit Browsers */
/* color: #555;
opacity: 1; */
}
:-moz-placeholder { /* Firefox 18- */
/* color: #555;
opacity: 1; */
}
::-moz-placeholder { /* Firefox 19+ */
/* color: #555;
opacity: 1; */
}
:-ms-input-placeholder { /* IE10 */
/* color: #555;
opacity: 1; */
}
#search_form {
width: 230px;
float: right;
margin-right: 3px;
padding: 3px 0 6px 0;
}
#search_form input[type="submit"] {
background-color: #ddd;
background-repeat: repeat;
border-radius: 0;
box-shadow: none;
color: #000;
cursor: pointer;
font-size: 13px;
font-weight: normal;
padding: 2px 6px 1px;
position: relative;
right: -3px;
text-shadow: none;
text-transform: capitalize;
top: 2px;
vertical-align: middle;
line-height: 14px;
}
body .hs-button.primary, body input[type="submit"], body input[type="button"] {
padding: 1rem 2.125rem 0.875rem;
margin: 20px 0;
line-height: 1;
letter-spacing: 0.1em;
background-color: #d36300;
border: 0 none;
border-radius: 0;
color: #f2eddb;
display: inline-block;
font-size: 1em;
text-transform: uppercase;
font-family: "Stratum2WebBlack", Arial, Helvetica, sans-serif;
cursor: pointer;
}
/* Form Module
========================================================================== */
/* Form Field */
.hs_cos_wrapper_type_form .hs-form-field {}
/* Descriptions */
.hs_cos_wrapper_type_form .hs-field-desc {}
/* Labels */
.hs_cos_wrapper_type_form label {
font-family:'Stratum2WebBlack', sans-serif;
}
.hs_cos_wrapper_type_form .hs-form-field > label {}
/* One Line Inputs */
.hs_cos_wrapper_type_form input[type="text"],
.hs_cos_wrapper_type_form input[type="password"],
.hs_cos_wrapper_type_form input[type="datetime"],
.hs_cos_wrapper_type_form input[type="datetime-local"],
.hs_cos_wrapper_type_form input[type="date"],
.hs_cos_wrapper_type_form input[type="month"],
.hs_cos_wrapper_type_form input[type="time"],
.hs_cos_wrapper_type_form input[type="week"],
.hs_cos_wrapper_type_form input[type="number"],
.hs_cos_wrapper_type_form input[type="email"],
.hs_cos_wrapper_type_form input[type="url"],
.hs_cos_wrapper_type_form input[type="search"],
.hs_cos_wrapper_type_form input[type="tel"],
.hs_cos_wrapper_type_form input[type="color"],
.hs_cos_wrapper_type_form input[type="file"],
.hs_cos_wrapper_type_form textarea,
.hs_cos_wrapper_type_form select {}
.hs_cos_wrapper_type_form input[type="text"]:focus,
.hs_cos_wrapper_type_form input[type="password"]:focus,
.hs_cos_wrapper_type_form input[type="datetime"]:focus,
.hs_cos_wrapper_type_form input[type="datetime-local"]:focus,
.hs_cos_wrapper_type_form input[type="date"]:focus,
.hs_cos_wrapper_type_form input[type="month"]:focus,
.hs_cos_wrapper_type_form input[type="time"]:focus,
.hs_cos_wrapper_type_form input[type="week"]:focus,
.hs_cos_wrapper_type_form input[type="number"]:focus,
.hs_cos_wrapper_type_form input[type="email"]:focus,
.hs_cos_wrapper_type_form input[type="url"]:focus,
.hs_cos_wrapper_type_form input[type="search"]:focus,
.hs_cos_wrapper_type_form input[type="tel"]:focus,
.hs_cos_wrapper_type_form input[type="color"]:focus,
.hs_cos_wrapper_type_form input[type="file"]:focus,
.hs_cos_wrapper_type_form textarea:focus,
.hs_cos_wrapper_type_form select:focus {}
/* Separate Styles for Multiple Line Inputs */
.hs_cos_wrapper_type_form textarea {
height:7rem;
}
.hs_cos_wrapper_type_form textarea:focus {}
/* Separate Styles for Drop Downs */
.hs_cos_wrapper_type_form select {}
.hs_cos_wrapper_type_form select:focus {}
/* Multiple Selection Inputs */
.hs_cos_wrapper_type_form form.hs-form .hs-form-field ul.inputs-list li input {}
.hs_cos_wrapper_type_form input[type="radio"] {}
.hs_cos_wrapper_type_form input[type="checkbox"] {}
/* This class allows the checkbox and radio select list items to only take up 50% of their container, and floats the list items left which allows multiple items to sit in the same row. */
.checkbox-2-col li.hs-form-checkbox,
.checkradio-2-col li.hs-form-radio {
float: left;
width: 50%; /* NOTE: This percentage may need to be lower if you have margins applied to the list items */
list-style: none;
}
/* Google Search Form
========================================================================== */
/* Label */
.widget-type-google_search label {}
/* Input */
.widget-type-google_search input[type="text"] {}
.widget-type-google_search input[type="focus"] {}
/* Multi Column Form
========================================================================== */
body .hs-form fieldset.form-columns-1 {}
body .hs-form fieldset.form-columns-1 .hs-form-field {}
body .hs-form fieldset.form-columns-2 {}
body .hs-form fieldset.form-columns-2 .hs-form-field {}
body .hs-form fieldset.form-columns-3 {}
body .hs-form fieldset.form-columns-3 .hs-form-field {}
/* Multiple Selection Inputs */
body form.hs-form .hs-form-field ul.inputs-list li input {}
body input[type="radio"] {}
body input[type="checkbox"] {}
body form.hs-form fieldset {
max-width: none;
}
body form.hs-form fieldset .hs-form-field {
padding: 0 10px 0 0;
}
body form.hs-form fieldset[class*="form-columns"] .input {
margin-right: 0;
}
/* IMPORTANT BELOW IS A TEMPORARY FIX FOR FORM STYLES - need a more robust/long term solution in the future - Laura Griffee*/
body form.hs-form fieldset[class*="form-columns"] .hs-input[type="text"],
body form.hs-form fieldset[class*="form-columns"] .hs-input[type="password"],
body form.hs-form fieldset[class*="form-columns"] .hs-input[type="datetime"],
body form.hs-form fieldset[class*="form-columns"] .hs-input[type="datetime-local"],
body form.hs-form fieldset[class*="form-columns"] .hs-input[type="date"],
body form.hs-form fieldset[class*="form-columns"] .hs-input[type="month"],
body form.hs-form fieldset[class*="form-columns"] .hs-input[type="time"],
body form.hs-form fieldset[class*="form-columns"] .hs-input[type="week"],
body form.hs-form fieldset[class*="form-columns"] .hs-input[type="number"],
body form.hs-form fieldset[class*="form-columns"] .hs-input[type="email"],
body form.hs-form fieldset[class*="form-columns"] .hs-input[type="url"],
body form.hs-form fieldset[class*="form-columns"] .hs-input[type="search"],
body form.hs-form fieldset[class*="form-columns"] .hs-input[type="tel"],
body form.hs-form fieldset[class*="form-columns"] .hs-input[type="color"],
body form.hs-form fieldset[class*="form-columns"] .hs-input[type="file"],
body form.hs-form fieldset[class*="form-columns"] select.hs-input,
body form.hs-form fieldset[class*="form-columns"] textarea.hs-input
{
/*Previous content here before form facelift
* body form.hs-form fieldset[class*="form-columns"] .hs-input{
*width: 100%;
height:auto; */
margin: 0 0 1rem;
padding: 0.5rem 1.5rem 0.5rem 1.25rem;
width: 100%;
height: 3rem;
background-image: url(data:image/svg+xml;utf8,);
background-origin: content-box;
background-position: right -1rem center;
background-repeat: no-repeat;
background-color: #FEFEFE;
background-size: 17px 8px;
border: none;
color: #424a4d;
font-family: Sentinel A, Sentinel B;
font-size: 1rem;
line-height: 1.5;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
-webkit-appearance: none;
transition: box-shadow 0.5s,border-color 0.25s ease-in-out;
box-sizing: border-box;
}
body form.hs-form fieldset[class*="form-columns"] .hs-input[type="checkbox"] {
width: auto;
/* position: relative;
margin-bottom: 1em;
overflow: hidden; */
/* display: none; */
}
body form.hs-form fieldset.form-columns-3 .hs-form-field {
width: 33.33%;
}
@media (max-width: 400px) {
body form.hs-form fieldset .hs-form-field { padding: 0; }
body form.hs-form fieldset.form-columns-3 .hs-form-field,
body form.hs-form .form-columns-2 .hs-form-field .hs-input,
body form.hs-form .form-columns-3 .hs-form-field .hs-input { width: 100%; }
body form.hs-form .form-columns-3 .hs-form-field .hs-input[type="checkbox"] { width: auto; }
}
ul.hs-error-msgs.inputs-list{
color: #f9a519;
font-style: italic;
font-size: 12px;
}
/* ==========================================================================
Buttons
========================================================================== */
.button{
font-family:"Stratum2WebBlack", Arial, sans-serif;
}
/* All Global Buttons (Excluding CTAs)
========================================================================== */
body .hs-button.primary,
body input[type="submit"],
body input[type="button"] {
padding: 4px 12px;
margin-bottom: 20px;
line-height: 20px;
background-color: #d36300;
border: 0 none;
border-radius: 0px;
color: #f2eddb;
display: inline-block;
font-size: 15px;
font-weight: bold;
text-transform: uppercase;
font-family:Arial;
cursor: pointer;
}
body .hs-button.primary:hover,
body input[type="submit"]:hover,
body input[type="button"]:hover {
text-decoration: none;
background-color: #a14b00;
background-position: 0 0;
-webkit-transition: background-position 0.1s linear;
-moz-transition: background-position 0.1s linear;
-o-transition: background-position 0.1s linear;
transition: background-position 0.1s linear;
}
body .hs-button.primary:focus,
body input[type="submit"]:focus,
body input[type="button"]:focus {
}
/* Form Module Button
========================================================================== */
.hs_cos_wrapper_type_form .hs-button.primary.large {
background-color:#d36300;
font-family:'Stratum2WebBlack', sans-serif;
border-radius:none;
color:#f2eddb;
text-transform:uppercase;
border:none;
font-size:1;
padding:15px;
letter-spacing:0.1em;
border:#d36300 solid 1px;
display:block;
}
.hs_cos_wrapper_type_form .hs-button.primary.large:hover {
background-color:#a14b00;
color:#f2eddb;
}
.footer-form.hs_cos_wrapper_type_form .hs-button.primary.large:hover {
background-color:#a14b00;
color:#f2eddb;
border:#d36300 solid 1px;
}
.hs_cos_wrapper_type_form .hs-button.primary.large:focus {}
.hs-form .hs-button{
color: #f2eddb!important;
text-shadow: none!important;
background-color: #d36300!important;
background-image: none!important;
box-shadow: none!important;
border: 1px solid #d36300!important;
border-radius: 0!important;
transition: opacity 0.15s linear!important;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}
/* Google Search Button
========================================================================== */
.widget-type-google_search .hs-button.primary {}
.widget-type-google_search .hs-button.primary:hover {}
.widget-type-google_search .hs-button.primary:focus {}
/* CTA Buttons
========================================================================== */
/**
* Override global CTA styles by wrapping the CTA module in a module group
* that has an ID, and use that ID to prefix your CTA selector. Example shown below.
*
* All overriding properties require !important tags.
*/
#module-group-ID .cta_button {}
#module-group-ID .cta_button:hover {}
#module-group-ID .cta_button:focus {}
/* BEGIN Request a brochure page cta styles*/
.faq-cta-content__wrapper {
max-height: 500px;
height: 100%;
width: 100%;
background: #434a4d;
}
.faq-cta-content--inner__wrapper {
display: flex!important;
}
.faq-cta-content--inner__wrapper div {
margin: auto;
}
.faq-cta-content--inner__wrapper {
width: 50%;
margin: auto;
}
.faq-cta-content--inner__wrapper div span > h1 {
color: #f9f6ed;
margin-top: 45px;
}
.faq-cta-content--inner__wrapper div span > h3 {
color: #faa61a;
text-transform: capitalize;
}
/* END Request a brochure page cta styles*/
#comment-form,
.error-template.one-column form,
.widget-type-google_search form{}
.widget-type-password_prompt.custom_error_message,
.widget-type-email_simple_subscription form{
background: #f2eddb none repeat scroll 0 0;
border-top: 20px solid #d36300;
padding: 15px 20px;
max-width: none;
}
/* ==========================================================================
6. MISCELLANOUS
========================================================================== */
/**
* Styles that do not fit into available sections above can go here.
* For example, one would place 3rd party plugin overriding styles here.
*
* This section is NOT for 'Custom' styles. All custom styles must go in the
* proper sections above.
*
* For instance, custom header and footer styles must go in the HEADER and
* FOOTER sections. Custom styles for anything in-between the header and footer
* (such as, styles that are unique to the HOMEPAGE only), must go in the
* CONTENT section.
*/
/*-------------------------------------------------------
Custom Modules Styles @Author: Aleson Rietow
--------------------------------------------------------*/
/*-----tabber------*/
.tabber {
margin: 1.5rem 0;
}
/* Thumbs */
.tabs-thumbs {
margin: 0;
color:#42494c;
padding:10px 15px 0 0;
}
.tabs-thumb {
display: inline-block;
line-height: 3;
position: relative;
}
.tabs-thumb h4 {
margin:0!important;
}
.tabs-thumb a {
display: block;
padding: 0 1.5rem;
color: #9d9d9d;
text-decoration: none;
cursor: pointer;
}
.tabs-thumb a:hover {
color: #828282;
}
/* Panels */
.tabs-panels {
list-style: none;
padding:50px;
background-color:#f2eddb;
margin-top:-10px;
}
.tabs-panel {
display: none;
}
/* Active */
.tabs-thumb.is-active a {
color: #42494c;
background-color: #f2eddb;
padding:20px;
box-shadow:9px -4px 12px -10px rgba(0,0,0,0.32);
}
.tabs-thumb.is-active a:hover {
cursor: default;
color: #828282;
}
.tabs-thumb.is-active a::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
height: 2px;
width: 100%;
}
/*---End Tabber Styles---*/
/*-----Image Carousel-------*/
div.image-carousel{
margin:10% 0;
}
.teaser-wrap--carousel--wrap{
margin:0 -35%;
}
/*Testimonials*/
.testimonial blockquote > p{
text-align:left;
}
.testimonial figure{
margin-left:0!important;
}
/*---End Image Carousel Styles---*/
/*---Custom Social Sharing icons--*/
.sharebar{
margin-top:150px;
margin-right:50px;
}
.at-share-btn-elements > a.at-icon-wrapper.at-share-btn{
background-color:#42494c!important;
border-radius:50%!important;
}
.at-share-btn-elements > a.at-icon-wrapper.at-share-btn:hover{
background-color:#d36300!important;
transform:none!important;
}
.at-resp-share-element .at-share-btn{
margin:0 7px!important;
}
div.addthis_inline_share_toolbox{
margin-top:-30px;
}
/*----Accordian Styles----*/
#panel, #panel2, #panel3, #panel4, #panel5, #panel6, #panel7 {
display: none;
}
#flip, #flip2, #flip3, #flip4, #flip5, #flip6, #flip7 {
color:#d36300;
font-weight:bold;
font-family:"Sentinel A", "Sentinel B", serif;
padding-bottom: 25px;
}
/*---Accordion Bio with image carousel---*/
.accordion-container{
position: relative;
width: 100%;
height: auto;
margin: 50px 0;
}
.set{
position: relative;
width: 100%;
height: auto;
background-color: #f2eddb;
border: 3px solid #d36300;
text-align:center;
}
.set > a{
display: block;
padding: 10px 15px;
text-decoration: none;
color: #d36300;
text-transform:uppercase;
font-weight: 600;
font-family:'Stratum2WebBlack', sans-serif;
border-bottom: 1px solid #ddd;
-webkit-transition:all 0.2s linear;
-moz-transition:all 0.2s linear;
transition:all 0.2s linear;
}
.set > a i{
position:relative;
float: right;
margin-top:4px;
color: #d36300;
}
.set > a.active{
background-color:#d36300;
color: #f2eddb;
}
.set > a.active i{
color: #fff;
}
.content{
position:relative;
width: 100%;
min-width:300px;
height: auto;
padding:40px;
display:none;
}
.content p{
padding: 10px 15px;
margin: 20px 20px;
color: #333;
text-align:left;
}
.content img.bio-head{
float:left;
padding:0 20px 20px 0;
}
.bio-images{
width:100%;
height:auto;
display: -webkit-inline-flex; /* Safari */
display:inline-flex;
-webkit-align-items: start; /* Safari */
align-items: start;
-webkit-flex-direction: row; /* Safari */
flex-direction: row;
-webkit-flex-wrap: wrap; /* Safari */
flex-wrap: wrap;
-webkit-justify-content: center; /* Safari */
justify-content: center;
}
/*-------------------------------------------------------
Custom Theme Styles @Author: Aleson Rietow
--------------------------------------------------------*/
.theme-sand{
background-color:#f2eddb;
}
.theme-light-sand .page-center, .theme-light-sand .page-center-full{
background-color:#f8f6ed!important;
}
.theme-sand.page-center, .theme-sand.page-center-full{
background-color:#f2eddb!important;
}
.theme-rock{
background-color:#42494c!important;
}
.theme-forest{
background-color:#333d33!important;
}
.body-container-wrapper > .body-container > div > div > div.theme-forest-topo{
background-color:#333d33;
background-image:url("//info.nols.edu/hubfs/Brand_Design_Elements/topo.png");
background-size: cover;
background-position: center;
background-repeat:no-repeat;
}
/*-------------------------------------------------------
Supplemental Brochure Styles @Author: Aleson Rietow
--------------------------------------------------------*/
.brochure-cta{
position:fixed;
background-color:#42494c;
}
/* ==========================================================================
Campaign Styles @Author: Aleson Rietow
========================================================================== */
/*------------------START Semester Landing Page @Author: Laura Griffee-------------------------------------*/
/*---Intro & Form Styling---*/
.page-intro-text {
padding-right: 1.5vw;
}
.page-intro-text h1{
margin-top: 0;
}
/*---Intro Video Styling---*/
.media-card-group{
margin: 3vw 0px 6vw 0px;
}
.media-card-video img{
width: 100%;
height: 100%;
top: 0;
text-align: center;
}
.media-card-video {
position: relative;
padding-bottom: 56.25%;
padding-top: 0;
height: 0;
}
.media-card-video iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.media-card-text{
padding: 3vw 4vw;
}
.media-card-text h1,
.media-card-text h3,
.media-card-text p{
text-align: center;
}
.media-card-text h1 {
color: #42494c;
}
.media-card-text h3 {
color: #d36300;
}
/*---In-Page Nav/Links---*/
.in-page-nav-anchors{
display: block;
position: relative;
top: -40px;
}
.in-page-nav-section{
margin: 6vw 0px 6vw 0px;
}
.in-page-nav-section h1{
text-align: center;
}
/*column lists*/
.in-page-nav-links-list-columns{
margin: 2em 0;
padding: 1.875em 0;
text-align: left;
background-color: #f2eddb;
border-style: solid;
border-width: 20px;
border-color: #c8c5b7;
}
.in-page-nav-links-list-columns ul{
margin:0 2.5em; /*Nikole changed this to fix in-page-nav on iPhone 5S*/
padding:0;
list-style: none;
columns: 4 4vw;
column-gap: 2em;
column-count: 4;
}
.in-page-nav-links-list-columns ul li{
text-align: left;
}
.in-page-nav-links-list-columns ul li a:link {
color: #d36300;
text-decoration: none;
text-transform: uppercase;
font-family: "Stratum2WebBlack", sans-serif;
}
.in-page-nav-links-list-columns ul li a:hover {
color: #ad551d;
text-decoration: underline;
}
.in-page-nav-links-list-columns ul li a:visited{
color: #d36300;
text-decoration: none;
}
/*---Academic Credit Styling---*/
.financial-aid-credit-text{
padding-bottom: 1vw;
}
.financial-aid-credit-text h1,
.financial-aid-credit-text h3,
.financial-aid-credit-text p{
text-align: center;
}
.financial-aid-credit-text h1{
color: #f2eddb;
}
.financial-aid-credit-text h3{
color: #f9a519;
}
.financial-aid-credit-text p{
color: #f2eddb;
}
.financial-aid-credit-text a:link {
color: #d36300;
text-decoration: none;
}
.financial-aid-credit-text a:hover {
color: #ad551d;
text-decoration: underline;
}
.financial-aid-credit-text a:visited{
color: #d36300;
text-decoration: none;
}
/*---Instagram---*/
.semester-courses-instagram-group{
/*max-width: 973px;*/
text-align: left;
vertical-align: top;
background-color: transparent;
overflow: hidden;
width: 100%;
}
.semester-courses-instagram-thumbnail{
float: left;
vertical-align: top;
padding-right: 20px;
background-color: transparent;
width: 33%;
}
/*@Author nwohlmacher - Semester Landing Page w/out form START*/
.semester-banner-card{
position: relative;
height: auto;
margin-bottom: 2vw;
background-color:#f2eddb;
}
.semester-banner-card-image img{
width: 100%;
height: 100%;
top: 0;
text-align: center;
}
.semester-banner-card-text{
padding: 1em 2em 1em 2em;
text-align: left;
}
.svgclippaths .stage--size-s.next-stage-has-mask_1 {
min-height: calc(30vh + 113px);
}
.side-bar-ad {
background-color: #f2eddb;
padding: 40px;
}
/*@Author nwohlmacher - Semester Landing Page w/out form END*/
/*------------------END Semester Landing Page @Author: Laura Griffee-------------------------------------*/
/*-------------------Tales from the Trail Campaign----------------------------*/
.coming-soon{
color:#fff;
z-index:5;
left:0;
display:block;
position:relative;
}
.coming-soon-text{
text-align:center;
position:absolute;
opacity:.95;
background:#42494c;
z-index:6;
top:0;
bottom:0;
}
.stage__media video {
position: absolute;
max-width: inherit;
}
.image-title{
margin-top:-6%;
}
/*-------------Gift Card Campaign--------------------------*/
.gift-card-headline{
position:absolute;
top:100px;
text-align:center;
z-index:5;
background-image:url("//info.nols.edu/hubfs/Campaigns/Gift%20Card%202016/underline-mud-large.png");
background-position:center;
background-repeat:no-repeat;
}
div.request-here{
position: fixed;
top: 31px;
left: 89%;
z-index: 10;
background-color: #c8c5b7;
padding: 10px 20px;
font-size: 18px;
text-transform: uppercase;
}
.request-here a{
font-family:"Stratum2WebRegular", sans-serif;
color: #f8f6ed;
}
.leadership-title{
position:static;
z-index:5;
top: 190%;
background-color: transparent!important;
}
.leadership-title h2{
font-size:3em;
letter-spacing:.05em;
font-family:"Sentinel A", serif;
}
.leadership-title img{
position:relative;
left:15%;
}
.whats-included{
background-image:url("//info.nols.edu/hubfs/Campaigns/Gift%20Card%202016/underline-mud-small.png");
background-repeat:no-repeat;
background-position-x: 45%;
background-position-y: 50%;
padding-bottom: 50px;
}
div.form-title{
text-align:center;
background-image:url("//info.nols.edu/hubfs/Campaigns/Gift%20Card%202016/form-underline-mud.png");
background-repeat:no-repeat;
background-position:center;
background-position-x: left;
background-position-y: 94px;
}
.form-title p{
font-size:3em;
color:#42494c;
}
.gift-card-image{
background-image:url("//info.nols.edu/hubfs/Campaigns/Gift%20Card%202016/Peyton_weigel_NZ_07%20%281%29.jpg");
background-position:center;
background-repeat:no-repeat;
background-size:cover;
height:900px;
}
/*Makes the green background of the "What's Included Section" fill the section */
.container-fluid .row-fluid .page-center {
float: left;
}
/*-------------------Step Forward Campaign----------------------------*/
/*Navigation*/
.sf-main-nav{
background-color:#42494c;
position:fixed;
z-index:101; /* this should allow the menu to be the highest layer on the page */
display:flex;
height:auto;
}
/*------------------- START Request a Brochure page styles!----------------------------*/
/*This will create the pseudo checkbox on the step forward brochure REQUEST A BROCHURE PAGE*/
/*Move this to the moduel */
.step-forward-brochure__wrapper {
position: relative;
}
.request-brochure-hero--content div span > h2 {
padding-top: 70px;
padding-bottom: 70px;
}
.request-a-brochure-img--wrapper {
padding-left: 75px;
}
/*------------------- END Request a Brochure page styles!----------------------------*/
/* ---Start--- Positions NOLS Logo in top left corner for Step Forward Microsite by nwohlmacher*/
.sf-main-nav-logo{
position: fixed;
top: 0;
left: 0;
padding: 0 8px 8px 60px;
margin: auto !important;
z-index: 21;
max-width: 150px !important;
}
/* ---End--- Positions NOLS Logo in top left corner for Step Forward Microsite by nwohlmacher*/
.sf-main-nav .hs-menu-wrapper.hs-menu-flow-horizontal ul{
padding:0 3.75rem;
width:100%;
}
.sf-main-nav .hs-menu-wrapper.hs-menu-flow-horizontal ul li{
width:25%;
display:block;
text-align:center;
}
.sf-main-nav .hs-menu-wrapper.hs-menu-flow-horizontal ul li a{
text-transform: uppercase;
font-size:1.5rem;
color: #f2eddb!important;
font-family:"Stratum2WebBlack", sans-serif;
font-weight:normal;
padding-top:10px;
}
.sf-main-nav .hs-menu-wrapper.hs-menu-flow-horizontal > ul li .hs-menu-item.hs-menu-depth-1.active a{
border-bottom:3px solid #d36300;
}
#sf-headline-wrapper{
margin-top:-25%;
}
.sf-headline-wrapper-sticky{
background-color: #828282;
position:fixed!important;
width:100%;
left:0;
top:5px;
z-index:4;
text-align:center;
box-shadow:0 5px 5px 0 rgba(0,0,0,0.32);
}
.sf-headline{
display:inline-block;
}
/*Previous and next Button Styles*/
.next-previous-button{
padding: 5% 70px 15% 70px;
margin:0 -35%;
}
.next-button{
float:right;
}
/*doughnut chart styles*/
/*all is moved into doughnut-chart-module-samantha under css*/
/* .chart {
position: relative;
width: 450px;
height: 450px;
top: 50%;
left: 50%;
margin: 0 0 100px -225px;
} */
/* .doughnutTip {
position: absolute;
min-width: 30px;
max-width: 300px;
padding: 5px 15px;
border-radius: 1px;
background: { rock }};
color: { sand }};
font-size: 17px;
text-shadow: 0 1px 0 #000;
font-family: "Stratum2WebRegular", Helvetica, sans-serif;
text-transform: uppercase;
text-align: center;
line-height: 1.3;
letter-spacing: .06em;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
pointer-events: none;
} */
/* .doughnutTip::after {
position: absolute;
left: 50%;
bottom: -6px;
content: "";
height: 0;
margin: 0 0 0 -6px;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
border-top: 5px solid rgba(0, 0, 0, 0.7);
line-height: 0;
} */
/* .doughnutSummary {
position: absolute;
top: 56%;
left: 50%;
color: #42494c;
text-align: center;
text-shadow: 0 -1px 0 #111;
cursor: default;
}
@media screen and (max-width: 768px) {
.dougnutSummary {
position: absolute;
top: 90%;
left: 35%;
color: #42494c;
text-align: center;
text-shadow: 0 -1px 0 #111;
cursor: default;
}
}
*/
/* .doughnutSummaryTitle {
position: absolute;
top: 50%;
width: 100%;
margin-top: -27%;
font-size: 27px;
letter-spacing: .06em;
font-family: "Stratum2WebRegular", Helvetica, sans-serif;
color: #434a4d;
} */
/* .doughnutSummaryNumber {
position: absolute;
top: 50%;
width: 100%;
margin-top: -15%;
font-size: 0px;
font-family: "Stratum2WebRegular", Helvetica, sans-serif;
color: #0a0a0a;
}
*/
/* .chart path:hover {
opacity: 0.65;
} */
/* Progress circles:
.container {
padding: 50px 0px;
text-align: center;
}
#myCanvas{
display:none;
}
/* ==========================================================================
7. MOBILE MEDIA QUERIES
========================================================================== */
/*Nikole added this to fix hero header responsonvivness on mobile*/
@media (min-width: 875px) {
.heading-xxxxx-large {
font-size:70px
}
}
/*adjust layout for mobile*/
@media screen and (max-width:768px) {
/* ----- Step Forward ------ */
.sf-main-nav .js-enabled{
position:static;
}
#step-forward__nav { /* Simply makes the nave take up full screen width */
width: 100%;
}
#step-forward__nav .mobile-trigger {
margin: auto 0px 0px 15px;
}
.sf-main-nav .hs-menu-wrapper.hs-menu-flow-horizontal ul{
padding:0;
}
.sf-main-nav .hs-menu-wrapper.hs-menu-flow-horizontal ul li{
width:100%;
text-align:left;
padding:0 1.5rem;
}
.sf-main-nav .hs-menu-wrapper .hs-menu-flow-horizontal ul li:hover{
background-color: #828282;
text-decoration:underline;
}
div.next-previous-button{
margin:0 0 55px 0;
}
.teaser-wrap--carousel--wrap{
margin:0;
}
.sf-main-nav.js-enabled .hs-menu-wrapper,{
display: none;
}
.sf-headline-wrapper-sticky{
display:none!important;
}
.sf-main-nav-logo { /*Removes logo on mobile by nwohlmacher*/
display:none!important;
}
}
/* Screen sizes smaller than site maxWidth (.page-center)
========================================================================== */
@media (max-width: 100%) {}
@media (max-width: 1125px) {
.custom-footer-image img{
margin: 0;
}
/* -------------------START Semester Page Media Queries @Author: Laura Griffee ------------------- */
/*---In-Page Nav/Links---*/
.in-page-nav-links-list-columns ul{
columns: 2 4vw;
column-gap: 2em;
column-count: 2;
}
/*---Course Thumbnails---*/
.course-thumbnail{
margin: auto;
width: 80%;
display: block;
}
.course-title-text{
padding: 2.5vw;
}
.course-title-overlay{
display:none;
}
/* -----Instagram ------ */
.semester-courses-instagram-thumbnail{
width: 50%;
}
/* -------------------END Semester Page Media Queries @Author: Laura Griffee ------------------- */
}
/* Landscape tablet and smaller devices
========================================================================== */
@media (min-width: 768px) and (max-width: 979px){
.side-bar-ad-column-tablet {
display: block!important;
float: none!important;
width: auto!important;
margin: auto;
}
#side-bar-content-column-tablet {
width: auto;
}
}
@media (min-width: 768px) and (max-width: 979px) {
}
@media (max-width: 767px) {
.custom-logo img{
margin-left: 0;
margin-top: 0;
}
.body-container .page-center {
padding: 0 10%;
}
.custom-space{
height: 30px;
}
.custom-logo {
padding: 10px 0;
text-align: center;
}
.custom-social p {
text-align: center;
}
.custom-chat ul {
text-align: center;
float: none;
margin:0;
}
/* ----- Forms ------ */
.hs-form {
max-width: 100%;
margin-bottom: 20px;
background-color:#f2eddb;
}
body input[type="text"],
body input[type="password"],
body input[type="datetime"],
body input[type="datetime-local"],
body input[type="date"],
body input[type="month"],
body input[type="time"],
body input[type="week"],
body input[type="number"],
body input[type="email"],
body input[type="url"],
body input[type="search"],
body input[type="tel"],
body input[type="color"],
body input[type="file"],
body textarea,
body select {
max-width: 100%;
}
.checkbox-2-col li.hs-form-checkbox,
.checkradio-2-col li.hs-form-radio {
float: none;
width: auto;
}
.header-container .custom-menu-primary .hs-menu-wrapper>ul>li>a {
width: auto!important;
}
h3.form-title {
max-width: 100%;
}
.custom-chat.change-lp ul li {
text-align: center;
top: -3px;
}
.header-container .page-center input[type="text"]{
margin-bottom:0;
}
body input[type="password"],
body input[type="datetime"],
body input[type="datetime-local"],
body input[type="date"],
body input[type="month"],
body input[type="time"],
body input[type="week"],
body input[type="number"],
body input[type="email"],
body input[type="url"],
body input[type="search"],
body input[type="tel"],
body input[type="color"],
body input[type="file"],
body textarea,
body select {
max-width:100%;
}
#comment-form,
.error-template.one-column form,
.widget-type-password_prompt.custom_error_message,
.widget-type-email_simple_subscription form,
.widget-type-google_search form{
max-width: 100%;
}
/* -------------------START Semester Page Media Queries @Author: Laura Griffee ------------------- */
/*---Intro/About Video Styling---*/
/*.media-card-group{
margin: 3vw 0px 5vw 0px;
}*/
@media (min-width: 768px) and (max-width: 979px){
}
.media-card{
height: 100%;
margin-bottom: 20px;
}
.media-card-text{
padding: 4vw 10vw;
}
/*---In-Page Nav/Links---*/
.in-page-nav-links-list-columns ul{
column-count: 1;
}
/*---Academic Credit Styling---*/
.financial-aid-credit-text{
padding-bottom: 8vw;
}
/* -----Map ------ */
.map-padding-bottom{
padding-bottom: 15vw;
}
/*---Course Thumbnails---*/
.course-title-text{
padding: 5vw;
}
/* -----Instagram ------ */
.semester-courses-instagram-thumbnail{
width: 100%;
}
}
/* -------------------END Semester Page Media Queries @Author: Laura Griffee ------------------- */
}
/* Landscape phones and smaller devices
========================================================================== */
/*Restack columns for mobile - ARietow 3/8/206*/
.sidebar {
margin-right: 0 !important;
float: right !important;
}
@media (max-width: 767px) {
/*Hide search on Mobile*/
#search_form{
display:none;
}
}