@charset "UTF-8"; /* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700,800,900');
html {font-size: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; margin: 0; padding: 0; font-family: 'Montserrat', sans-serif;}
body {margin:0 auto; width:100%; font-family: 'Raleway', sans-serif; color: #1D252C;    overflow-x: hidden;}
.clearfix:after {visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}
img {display: block; margin: 0px auto; max-width: 100%; height: auto!important; width: auto\9!important;}
#wrapper {width: 90%; margin: 0 auto;}
hr.style1{border-top: 1px solid #8c8b8b;}
#myBtn {display: none; position: fixed; bottom: 10px; right: 10px; z-index: 99; border: none; outline: none; background-color: #EEEEEE; color: white; cursor: pointer; padding: 18px 15px; border-radius: 50px;}
#myBtn:hover {background-color: #CCC;}
.padded-img {padding: 30px 0 0 0;}
.padded-alt {padding: 0;}

/* = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = Index Styles = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */

#home-header {width: 100%; margin: 0 auto; padding: 1% 0; display: block; background-color: rgba(0,0,0,0.7); min-height: 40px;}
#icon-header {display: flex; float: left; width: 36px; height: 36px; background: url(../img/blackstar-icon.png) no-repeat; background-size: contain!important;}
#hero-home {display: table; width: 100%; margin: 0 auto; padding: 0; float: none; background-color: rgba(0,0,0,0.7); min-height: 350px; background:  url(../img/bg.png) no-repeat; background-position: center; background-size: cover;}
.hero-wrapper {display: table-cell; vertical-align: middle; width: 100%; margin: auto; padding: 0;}
.hero-img {max-width: 350px; display: block; margin: 0 auto; float: none;}
.hero-divider {max-width: 200px; height: 2px; background: #000; display: block; margin: 2% auto 1% auto; float: none;}
#hero-home h1 {text-align: center; color: #000; font-weight: 200; display: block; margin: 8px auto 0px!important; float: none;}
#home-main {display: block; margin: 0 auto; width: 100%; min-height: 100px;}
.section-select {display: block; width: 40%; float: left; margin: 0; padding: 4% 5%;}
.section-select h2 {font-size: 2rem; font-weight: 300; margin: 0; padding: 0;}
.section-select p {font-weight: 100;}
.section-sml {max-width: 420px; margin: 0 auto; float:  none; text-align: center;}
.section-select-img {margin: 0 auto; float: none; max-width: 220px;}
.dark-bg {background: #656565; color: #FFFFFF!important;}
.dark-bg:hover {}
.light-bg {background: #FFFFFF;}
.download-section {display: table; margin: 0 auto; padding: 30px 0;}
.section-link {text-decoration: none; border: 1px solid; padding: 10px 20px; margin: 20px auto 0 auto; display: block; max-width: 250px; font-weight: 200;}
.buttonDownload {display: inline-block; margin: 0 0px; position: relative; padding: 10px 10px; background-color: #FFF; color: #000; text-decoration: none; font-size: 0.9em; text-align: center; text-indent: 25px; font-weight: 200; border: 1px solid #EEE; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;}
.buttonDownload:hover {background-color: #FFF; color: #000; border: 1px solid #000;}
.buttonDownload:before, .buttonDownload:after {content: ' '; display: block; position: absolute; left: 15px; top: 52%;}
/* Download box shape  */
.buttonDownload:before {width: 10px;height: 2px;border-style: solid;border-width: 0 2px 2px;}
/* Download arrow shape */
.buttonDownload:after {width: 0;height: 0;margin-left: 3px;margin-top: -7px;border-style: solid;border-width: 4px 4px 0 4px;border-color: #FFFFFF;border-top-color: #000000;animation: downloadArrow 2s linear infinite;animation-play-state: paused;}
.buttonDownload:hover:before {border-color: #000;}
.buttonDownload:hover:after {border-top-color: #000;animation-play-state: running;}
/* keyframes for the download icon anim */
@keyframes downloadArrow {/* 0% and 0.001% keyframes used as a hackish way of having the button frozen on a nice looking frame by default */
0% {margin-top: -7px;opacity: 1;}
0.001% {margin-top: -15px; opacity: 0;}
50% {opacity: 1;}
100% {margin-top: 0;opacity: 0;}
}
.dark-link {color: #000;}
.dark-link:hover {color: #E5E5E5; background: #000;}
.light-link {color: #FFF;}
.light-link:hover {color: #656565; background: #FFF;}

/* = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = Page Styles = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */
#single-page-header {width: 100%; margin: 0 auto; padding: 1% 0; display: block; background-color: rgba(0,0,0,0.7); min-height: 50px;}
#logo-header-pages {display: flex; float: left; width: 200px; height: 24px; background: url(../img/blackstar-logo-wht.png) no-repeat; background-size: contain!important; position: relative; top: 8px;}
.top-nav {float: right; width: auto;}
#body-pages-main {background: #FFFFFF; display: block; width: 100%; margin: 0 auto; padding: 3% 0; height: 100%; min-height: 500px;}
.asset-style {float: left; color: #FFFFFF; font-weight: 300; margin: 0 auto 0 2%; padding: 0; line-height: 100%;}
#nav-left-pages {float: left; min-width: 300px; width: 15%; margin: 0 auto; min-height: 300px;}
#body-content-section {width: 78%; float: left; background:  #FFFFFF; /* min-height: 2000px;*/ padding: 0; margin: 0 auto;}
#how-to-use {padding: 0% 4% 4% 4%; width: 90%;}
#how-to-use p {font-weight: 200; line-height: 25px;}
#how-to-use a {text-decoration: none; color: #000; font-weight: 400;}

/* = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = Side Nav = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */

.sidebar-toggle {margin-left: -240px;}
.sidebar {width: 100%; height: 100%; margin: 3px auto 0 auto; background: none; position: relative; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; z-index: 100;}
.sidebar #leftside-navigation ul,
.sidebar #leftside-navigation ul ul {margin: -2px 0 0; padding: 0;}
.sidebar #leftside-navigation ul li {list-style-type: none; border-bottom: 1px solid rgba(255, 255, 255, 0.05);}
.sidebar #leftside-navigation ul li.active > a {color: #1abc9c;}
.sidebar #leftside-navigation ul li.active ul {display: block;}
.sidebar #leftside-navigation ul li a {color: #000; text-decoration: none; display: block; padding: 18px 0 18px 25px; font-size: 15px; outline: 0; -webkit-transition: all 200ms ease-in; -moz-transition: all 200ms ease-in; -o-transition: all 200ms ease-in; -ms-transition: all 200ms ease-in; transition: all 200ms ease-in; font-weight: 500;}
.sidebar #leftside-navigation ul li a:hover {color: #000; background: #d5d5d5;}
.sidebar #leftside-navigation ul li a span {display: inline-block;}
.sidebar #leftside-navigation ul li a i {width: 20px;}
.sidebar #leftside-navigation ul li a i .fa-angle-left,
.sidebar #leftside-navigation ul li a i .fa-angle-right {padding-top: 3px;}
.sidebar #leftside-navigation ul ul {display: none;}
.sidebar #leftside-navigation ul ul li {background: none; margin-bottom: 0; margin-left: 0; margin-right: 0; border-bottom: none;}
.sidebar #leftside-navigation ul ul li a {font-size: 13px; padding-top: 13px; padding-bottom: 13px; color: #515151; text-indent: 15px; font-weight: 300;}

/* = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = Body Styling = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */

.full-height-section {height: 100%; margin: 0 auto; width: 90%; padding: 2.5% 5%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); border-bottom: 1px solid #DDD;}
.full-height-section:focus {outline: none;}
.full-height-section h1 {font-weight: 400; text-transform: uppercase;}
.full-height-section p {font-weight: 200; line-height: 24px; letter-spacing: 0.5px; color: #000000;}
.full-height-section ul li {font-weight: 200; line-height: 24px; letter-spacing: 0.5px; color: #000000;}
.full-height-section p a {text-decoration: none; color: #000; font-weight: 500;}
.sub-section {margin: 0 auto; width: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); border-bottom: 1px solid #DDD; padding: 5% 0;}
.sub-section:first-child {padding: 0% 0 5% 0;}
.sub-section:first-child h1 {font-size: 36px;}
.embolden {font-weight: 500!important;}
.sub-section:last-child {border-bottom: none;}
.sub-section:focus {outline: none;}
.label-link {display: block; text-decoration: none;}
.row-100 {width: 100%; margin: 0 auto;padding: 0; float: none;}
.column-50 {width: 45%; margin: 5% 5% 0 0; padding: 0; float: left;}
.column-40 {width: 35%; margin: 5% 5% 0 0; padding: 0; float: left;}
.column-33 {width: 30%; margin: 3% 3% 0 0; padding: 0; float: left;}
.column-20 {width: 15%; margin: 10% 3% 0 0; padding: 0; float: left;}
.image-caption {display: block; padding: 5% 0; margin: 0 auto; font-weight: 300; color: #777;}
.mid-txt {text-align: center!important;}
.image-fit {height: 220px; object-fit: cover!important; overflow: hidden!important;}
.image-fit img {max-height: 150px; width: 100%; overflow: hidden; object-fit: cover;}

/* = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = Footer Styles = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */

#home-footer {background: #FFFFFF; margin: 0 auto; padding: 1% 0; display: block; color: #777777; font-weight: 300; font-size: 0.8rem;}
.copyright {float: left; display: block;}
.modified {float: right; display: block;}


@media screen and (max-width: 1515px) {#nav-left-pages {float: left; width: 15%; margin: 0 auto; min-height: 300px;}
#body-content-section {width: 70%; float: left; background: #FFFFFF; padding: 0; margin: 0 auto;}
}

@media screen and (max-width: 1111px) {#nav-left-pages {float: left; width: 15%; margin: 0 auto; min-height: 300px;}
#body-content-section {width: 65%; float: left; background: #FFFFFF; padding: 0; margin: 0 auto;}
.column-33 {width: 47%; margin: 5% 3% 0 auto; padding: 0; float: left;}
}

@media screen and (max-width: 953px) {
#nav-left-pages {float: none; width: 100%; min-height: 30px;}
#body-content-section {width: 100%; float: none; margin: 0 auto 10% auto;}
.menu-container {position: fixed!important; width: 100%!important; top: 0!important; left: 0!important; z-index: 999!important; display: block;}
.sub-section:first-child h1 {font-size: 26px;}
.padded-img {padding: 15px 0 0 0;}
.padded-alt {padding: 15px 0 0 0;}
}

@media screen and (max-width: 640px) {
.column-50 {width: 100%; padding: 0; float: none; margin: 0 auto;}
.column-40 {width: 100%; padding: 0; float: none; margin: 0 auto;}
.column-20 {width: 100%; padding: 0; float: none; padding: 0; margin: 0 auto;}
.copyright {float: none; text-align: center;}
.modified {float: none; text-align: center;}
}

@media screen and (max-width: 420px) {
.column-33 {width: 100%; margin: 5% auto; padding: 0;float: none;}
#hero-home {min-height: 300px;}
}

.menu-container {}

@media (max-width: 599px) {.menu-container .crbnMenu ul {padding: 0; margin: 0; list-style-type: none; }
.menu-container .crbnMenu a {text-decoration: none; color: #333; }
.menu-container .crbnMenu .link-stack {cursor: pointer; padding: 20px; background-color: #fff; border-bottom: 1px solid #ddd; }
.menu-container .crbnMenu .link-stack .brand {text-transform: uppercase; font-weight: bold; color: #aaa; }
.menu-container .crbnMenu .menu {display: none; background-color: #f6f6f6; }
.menu-container .crbnMenu .menu li a {border-bottom: 1px solid #eaeaea; display: block; padding: 10px 20px; }
.menu-container .crbnMenu .menu li a .nav-link-icon {margin-right: 10px; }
.menu-container .crbnMenu .menu li a .menu-toggle {display: none; }
.menu-container .crbnMenu .menu li ul {padding: 0; margin: 0; display: none; }
.menu-container .crbnMenu .menu li ul li a {padding-left: 25px; font-weight: 200;} }	
@media (min-width: 600px) {.menu-container .crbnMenu ul {padding: 0; margin: 0; list-style-type: none; }
.menu-container .crbnMenu a {text-decoration: none; color: #333; }
.menu-container .crbnMenu .link-stack {cursor: pointer; padding: 20px; background-color: #fff; border-bottom: 1px solid #ddd; }
.menu-container .crbnMenu .link-stack .brand {text-transform: uppercase; font-weight: bold; color: #aaa; }
.menu-container .crbnMenu .menu {display: none; background-color: #f6f6f6; }
.menu-container .crbnMenu .menu li a {border-bottom: 1px solid #eaeaea; display: block; padding: 10px 20px; }
.menu-container .crbnMenu .menu li a .nav-link-icon {margin-right: 10px; }
.menu-container .crbnMenu .menu li a .menu-toggle {display: none; }
.menu-container .crbnMenu .menu li ul {padding: 0; margin: 0; display: none; }
.menu-container .crbnMenu .menu li ul li a {padding: 8px 25px; font-weight: 200; } }
@media (min-width: 953px) {
.menu-container .crbnMenu {width: 100%; position: relative; } 
.menu-container .crbnMenu ul {padding: 0; margin: 0; list-style-type: none; }
.menu-container .crbnMenu a {text-decoration: none; color: #333; }
.menu-container .crbnMenu .link-stack {padding: 15px; background-color: #eee; border-bottom: 1px solid #ddd; cursor: pointer; display: none;}
.menu-container .crbnMenu .link-stack .brand {text-transform: uppercase; font-weight: bold; color: #aaa; }
.menu-container .crbnMenu .link-stack .nav-toggle {display: none; }
.menu-container .crbnMenu .menu {display: block !important; background-color: #ffffff; }
.menu-container .crbnMenu .menu li a {font-size: 0.9em; color: #1D252C; font-weight: bold; border-bottom: 1px solid #ffffff; display: block; padding: 15px 20px;}
.menu-container .crbnMenu .menu li a .nav-link-icon {margin-right: 10px; }
.menu-container .crbnMenu .menu li a .menu-toggle {display: block; float: right; }
.menu-container .crbnMenu .menu li ul {padding: 0; margin: 0; display: none; }
.menu-container .crbnMenu .menu li ul li a {font-weight: normal; font-size: 0.8em; padding-left: 25px; color: #777;}
.menu-container .content {margin: 0px 0px 0px 250px; } }
.menu-container #nav-toggle {position: absolute; right: 20px; top: 15px; height: 5px; width: 25px; padding-top: 7px; padding-bottom: 7px; }
.menu-container #nav-toggle span {height: 1px; width: 25px; right: 0px; background: #000; position: absolute; content: ''; transition: all 500ms ease-in-out; }
.menu-container #nav-toggle span:before, .menu-container #nav-toggle span:after {height: 1px; width: 25px; background: #000; position: absolute; display: block; content: ''; transition: all 500ms ease-in-out; }
.menu-container #nav-toggle span:before {top: -6px; }
.menu-container #nav-toggle span:after {bottom: -6px; }
.menu-container #nav-toggle.nav-open span:before {top: -10px; }
.menu-container #nav-toggle.nav-open span {background: transparent; }
.menu-container #nav-toggle.nav-open span:before {transition: all 500ms ease-in-out; transform: translateY(8px) rotate(45deg); }
.menu-container #nav-toggle.nav-open span:after {transition: all 500ms ease-in-out; transform: translateY(-8px) rotate(-45deg); }



@media (min-width:1200px) {
	#dos-and-donts .column-50 {
    min-height: 273px;
	}
}    


@media (min-width: 768px) {
	.Iconography-row .Iconography-main-icon-wrap {
    width: 33.3%;
    float: left;
	}
}

@media (min-width: 1200px) {
	.Iconography-row .Iconography-main-icon-wrap {
    min-height: 237px;
	}
}

@media (min-width: 992px) and (min-width: 1199px) {
	.Iconography-row .Iconography-main-icon-wrap {
    min-height: 275px;
	}
}


@media (min-width: 768px) and (min-width: 991px) {
	.Iconography-row .Iconography-main-icon-wrap {
    min-height: 275px;
	}
}

#logo-on-backgrounds img {
    margin-bottom: 10px;
}

.Iconography-inner h1 {
    font-size: 1.5em !important;
    margin-bottom: 0;
}


.Iconography-main-icon-wrap .icon-thumb img {
    max-width: 135px;
}


.Iconography-row {
    float: left;
    width: 100%;
}

.menu-container .crbnMenu .menu li ul li a:hover {
	color:#EB0045;
}

.buttonDownload:hover::after { 
	border-top-color:#EB0045;
}

.buttonDownload:hover::before { 
	border-color:#EB0045;
}

.buttonDownload:hover{ 
	color:#EB0045;
	border-color: #EB0045;
}

#powerpoint iframe {
    display: list-item;
    margin: 0 auto;
}

.bordrnone{
	border-bottom: none;
}


@media (max-width:767px) {
	#powerpoint iframe {
		width: 100% !important;
	}
}

@media (max-width: 370px) {
	.hero-img {
    max-width: 275px;
  }  
}