/*PARALLAX SCENE*/
 #scene, .diagonal-svg {
	 display:none;
}
 @media (min-width:768px){
	 #scene {
		 display:block;
		 position: absolute;
		 z-index: 0;
		 height: 100%;
		 width: 100%;
		 top: 0;
		 left: 0;
	}
	 .diagonal-svg {
		 display:block;
	}
}


/** General **/


 h1 {
    margin-top:0px;
}

@media (min-width:768px){
    
     h1 {
         font-size:104px;
     }
}

 h3 {
	 font: 1.625rem 'Milo', sans-serif;
	 font-weight: bold;
}

.text-decoration {
    text-decoration: underline;
}

 .dot-line {
	 border-left: 2px solid black;
	 position: absolute;
	 height: 100px;
	 left: 50%;
}

 .dot-line:before, .dot-line:after {
	 position: absolute;
	 left: -4px;
	 right: 0;
	 height: 6px;
	 width: 6px;
	 background: black;
	 content: "";
}

 .dot-line:after {
	 bottom: 0;
	 top: auto;
}

#scene {
    position: absolute; 
    z-index:0;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}





 #red-nav {
	 padding: 0;
	 
}

@media (min-width:768px){
      #red-nav {margin-top: -2rem; padding:0 0 3.375rem 0}

}


 #bg-menu {
	 border-radius: 0px;
	 max-width: 1260px;
	 background-color: #c8102e;
	 background:linear-gradient(90deg, rgba(200, 16, 46,1) 20.76829268292683%,rgba(199, 15, 45,1) 20.76829268292683%,rgba(150, 12, 34,1) 80.76829268292683%);
	 margin: 0 auto;
	 border: none;
	 border-radius: 0px;
}
 #bg-menu ul li a {
	 color:#FFF;
	 padding:20px;
}
 #bg-menu ul li a:hover, #bg-menu ul li a:focus {
	 background-color:#960c22;
	 text-decoration:none;
}

@media (min-width: 768px){
	 #bg-menu .navbar-nav {
		 float: none;
		 text-align: center;
	}
	 #bg-menu .navbar-nav li {
		 float: none;
		 display: inline-block;
	}
}

 @media (max-width: 767px) {
	 #red-nav .col-auto {
		 padding: 0;
	}
	 #bg-menu .navbar-nav {
		 margin: 0 -15px;
	}
	 #bg-menu .navbar-nav li a {
		 padding-left: 3rem;
	}
	 #bg-menu .navbar-nav li {
		 border-bottom: 1px #fff solid;
	}
	 #bg-menu .navbar-nav li:last-child {
		 border-bottom: transparent;
	}
}

.brand-container {
	 max-width: 740px;
	 margin: 0 auto;
}


/** Brand Landing Page **/


 .brand-center-title {
	 color: #C8102E;
	 position:relative;
	 z-index:1;
}
 #brand-paragraph {
	 padding-bottom:0;
}

 @media (min-width:768px){
	 #brand-paragraph {
		 padding-top: calc(3.375rem + 3.375rem);
		 padding-bottom:3.375rem;
	}
	 #brand-paragraph p {
		 max-width: 1000px;
		 margin: 0 auto;
		 font-size: 38px;
		 line-height: 50px;
	}
	 .brand-center-title {
		 padding-top: 15rem;
		 padding-bottom: 3rem;
		 font-size: 6rem;
	}
}


/**Brand Fundamentals Landing Page **/

#brand-fundamentals-bg p {
    margin:0;
}

#brand-fundamentals-bg .square-svg {
    position: absolute; 
    top: 11em; 
    left: 15%;
}

#brand-fundamentals-bg .plus-svg {
    position: absolute; 
    bottom: 10em;
    right: 24%;
}

#brand-fundamentals-bg .white-square-svg {
    position: absolute; 
    top: 3rem;
    left: 100px;
}

#brand-fundamentals-bg .black-square-svg {
    position: absolute; 
    top: -9em;
    right: -21px;
}
#brand-fundamentals-bg .square-pattern-svg {
    position: absolute; 
    bottom: 2em;
    right: 0;
}

#uh-brand h2, #uh-brand p {
    max-width:740px;
    margin-left:auto;
    margin-right:auto;
}

#uh-brand img {
    width:100%;
}
.panel-group {
    max-width: 1000px;
    margin-top: 20px;
}

.panel-default {
    border-color: #e9e9e9;
}

.panel-title {
    max-width: 740px;
    margin: 0 auto;
    font-size:20px;
}

.panel-body {
    padding: 0;
    max-width: 740px;
    margin: 0 auto;
}
    
.panel-group .panel {
    border-radius: 0;
    background-color: #f5f5f5;
    box-shadow: none;
    padding: 1rem 4rem;
}

.panel-group .panel + .panel {
    margin-top: 15px;
}

.panel-group .panel-heading + .panel-collapse > .panel-body {
    border-top: none;
}

.panel-default > .panel-heading {
    background-color: none;
}

.panel-default>.panel-heading a {
    position:relative;
    color:#111;
}

.expand-all {
    margin-right:10px;
}

.expand-all, .collapse-all {
    padding: 0;
    text-decoration: underline;
    background: none;
    border:none;
}

.expand-all:hover, .collapse-all:hover {
    text-decoration: underline;
}

.expand-all:active, .expand-all:focus, .collapse-all:active, .collapse-all:focus {
    outline:none;
    text-decoration:underline;
}

.panel-default>.panel-heading a:after {
    content: "";
    position: absolute;
    left: -1.5rem;
    left: calc(-2rem - 14px);
    font-size: .9rem;
    top: 8px;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: transform .25s linear;
    -webkit-transition: -webkit-transform .25s linear;
}

.panel-default>.panel-heading a[aria-expanded="true"]:after {
  content: "\2212";
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.panel-default>.panel-heading a[aria-expanded="false"]:after {
  content: "\002b";
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

#pillar-accordion {
    margin-left:auto;
    margin-right:auto;
}

@media (min-width:768px){
    

#traits {
    max-width:1000px;
    margin-left:auto;
    margin-right:auto;
}   
    
#traits h2 {
    margin-bottom:4rem;
    text-align:center;
}

#traits h3 {
    text-align:right;
    margin-top:5px;
    padding-right: calc(3.75rem + 8.33333333%);
}
    
.trait-dash {
    display: block;
    width: calc(2.5rem + 8.33333333%);
    height: 1px;
    border-top: 1px solid #111;
    position: absolute;
    right: 1.25rem;
    top: 10px;
    
}

.trait-dash::before, .trait-dash::after {
    content: "";
    display: block;
    position: absolute;
    left:0;
    top: -2px;
    height: 3px;
    width: 3px;
    background-color: #111;
}

.trait-dash::after {
    left: auto;
    right: 0;
}
    
}

/**Brand Identity Landing Page**/

#brand-identity-bg .square-svg {
    position: absolute; 
    top: 2em; 
    left: 5%;
}
#brand-identity-bg .plus-svg {
    position: absolute; 
    bottom: 4em; 
    left: 284px;
}
#brand-identity-bg .white-square-svg {
    position: absolute; 
    bottom: 8em;
    left: 100px;
    max-width: 177px;
}
#brand-identity-bg .black-square-svg {
    position: absolute; 
    bottom: -2em;
    left: -2em;
}

#brand-identity-bg .square-pattern-svg {
    position: absolute;
    top: -1rem;
    right: -4rem;
}


@media (min-width:1400px){
    
#brand-identity-bg .black-square-svg {
    bottom: -2em;
    left: 9em;
}

}




#uh-master-brand .brand-logos-text {
        max-width: 740px;
        margin: 0 auto;
}

#uh-master-brand .section-grid li {
    border: 1px solid #707070;
}

#uh-master-brand .section-grid li figure img {
    width: 100%;
}

@media (min-width: 768px){
    #uh-master-brand .section-grid {
        justify-content: space-between;
    }
}

#logo-system {
    position:relative;
}

#logo-system .grey-bg {
    background: #F5F5F5;
    position: absolute;
    width: 100%;
    max-width: 1500px;
    top: 0%;
    bottom: 13%;
    left: 50%;
    transform: translateX(-50%);
    max-height: 882px;
}

.logo-system-text {
    max-width: 740px;
    margin: 0 auto;
    z-index: 1;
    margin: 0 auto;
    z-index: 2;
    position: relative;
    padding: 0 0 4rem 0;
}

.logo-system-img {
    padding-bottom: 10rem;
    position: relative;
}

.logo-system-img img {
     border: 1px solid #707070;
}

#brand-style-guide {
    position:relative;
}

.red-bg {
    background: linear-gradient(90deg, rgba(200, 16, 46,1) 20.76829268292683%,rgba(199, 15, 45,1) 20.76829268292683%,rgba(150, 12, 34,1) 80.76829268292683%);
    position: absolute;
    width: 100%;
    max-width: 1000px;
    top: 0%;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.style-guide-text{
    max-width: 740px;
    color: #fff; 
    margin: 0 auto;
}
    
.style-guide-text a {
        color: #fff;
}
.style-guide-text .glyphicon {
    border: 3px solid #fff;
    border-radius: 100%;
    padding: 2rem;
    font-size: 2rem;
}
    
@media (min-width: 768px) {
    .style-guide-text .glyphicon  {
        top: 134px;
    }
}

#uh-seal {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.row.section-block.section-block-reverse {
    max-width: 1190px;
    margin: 0 auto;
    justify-items: center;
}

.row.section-block.section-block-reverse img {
    margin-top: 3rem;
}
    
#historical-mark {
    position: relative;
}

#historical-mark figure img {
    border:1px solid #707070;
    width:100%;
}

figcaption {
    font-size: 16px;
    margin: 10px 0 20px 0;
}

#historical-mark .grey-bg {
    background: #F5F5F5;
    position: absolute;
    width: 100%;
    max-width: 1000px;
    top: 0;
    bottom: 17%;
    left: 50%;
    transform: translateX(-50%);
}

.historical-mark-text {
    max-width: 740px;
    margin: 0 auto;
    z-index: 1;
    margin: 0 auto;
    z-index: 2;
    position: relative;
    padding-top: 4rem;
}

#historical-mark .section-grid {
    position: relative;
    justify-content: center;
    margin-top:4rem;
}

@media (min-width:768px) {
    .psj {order:1}
    .slender {order:2}
    .marching {order:3}
}

/**Brand Protection Landing Page**/

    
#brand-protection-bg p {
        margin:0;
}

#brand-protection-bg .square-svg {
    position: absolute; 
    top: 8em; 
    left: 18%;
}
#brand-protection-bg .plus-svg {
    position: absolute; 
    bottom: 9em; 
    right:310px;
}
#brand-protection-bg .white-square-svg {
    position: absolute; 
    bottom: 5em; 
    right:100px;
}
#brand-protection-bg .black-square-svg {
    position: absolute; 
    top: 5em; 
    right: 0;
}
#brand-protection-bg .square-pattern-svg {
    position: absolute; 
    top: 0; 
    left:0;
}

#uh-users h2, #uh-users p {
    max-width: 740px;
    margin-left:auto;
    margin-right:auto;
}

#uh-users-img {
    max-width: 1260px;
    margin:0 auto;

}

#uh-users-img .section-grid p {
    padding-top: 1rem;
}
    
#uh-users-img img {
    width: 100%;
}

#ext-users h2, #ext-users p {
    max-width:740px;
    margin-left:auto;
    margin-right:auto;
}

#licensing h2, #licensing p {
    max-width:740px;
    margin-left:auto;
    margin-right:auto;
}

/**Brand Resources **/

#brand-resources-bg {
    position:relative;
    overflow:hidden;
}



#brand-resources-bg p {
    margin:0;
}

#brand-resources-bg .square-svg {
    position: absolute; 
    bottom: 4em; 
    left: 10%;
    
}

#brand-resources-bg .plus-svg {
    position: absolute; 
    top: 4em; 
    right:240px;
}

#brand-resources-bg .white-square-svg {
    position: absolute; 
    top: -90px; 
    right:180px;
}

#brand-resources-bg .square-pattern-svg {
    position: absolute; 
    bottom: 0; 
    right:0;
}

#download-zone {
    position:relative;
}

.landscape-ph {
    background-color:#333;
    display:block;
    width:100%;
    padding-top:56.25%;
}
    
.portrait-ph {
    background-color:#333;
    display:block;
    width:100%;
    height:100%;
}

#download-zone .grey-bg {
    position: absolute;
    background-color: #f5f5f5;
    width: 100%;
    max-width: 1000px;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

/* Landing Pages BG and Parallax*/

#brand-bg {
    background-image: url(../_img/brand-center-bg.jpg);
    overflow:visible;
}

 #brand-bg, #brand-fundamentals-bg, #brand-identity-bg,  #brand-protection-bg, #brand-resources-bg {
	 background-size: cover;
	 position:relative;
}

 #brand-fundamentals-bg {
	 background-image: url(../_img/brand-fund-bg.jpg);
}

 #brand-identity-bg {
	 background-image: url(../_img/brand-identity-bg.jpg);

}
 #brand-protection-bg {
	 background-image: url(../_img/brand-protection-bg.jpg);

}
 #brand-resources-bg {
	 background: url(../_img/brand-resources-bg.jpg) bottom center no-repeat;

}

 @media (min-width:768px){

	 #brand-fundamentals-bg, #brand-identity-bg, #brand-protection-bg, #brand-resources-bg {
		 text-align:center;
		 padding: 10rem 0;
		 position: relative;
		 overflow: hidden;
	}
}


 @media (max-width:767px){
	 .section-grid {
		 margin:0 -1.25rem !important;
	}
}