:root {
    /* CSS HEX */
    --yellow: #ffc857;
    --red: #fb3640;
    --gray: #605f5e;
    --light-gray: #e2e2e2;
    --blue: #0A92FF;
    --light-blue: rgb(13,202,240);
    --dark-blue:#033F63;
    --green: #61E786;
    --light-green: #87C38F;
    --dark-green:#3BB273;
    --turq:#00CFC1;
    --purple:#7E2E84;
    --dark-purple:#4C1A57;
    --vio:#F75590;
    --orange:#FB5607;
    --rich-black:#00171F;
	--dark-gray:#212529;
    }
    
    .bg-yellow { background-color: var(--yellow)!important; }
    .text-yellow { color:var(--yellow)!important; }
    
    .bg-red { background-color: var(--red)!important; }
    .text-red { color:var(--red)!important; }
    
    .bg-gray { background-color: var(--gray)!important; }
    .text-gray { color:var(--gray)!important; }
    
    .bg-light-gray { background-color: var(--light-gray)!important; }
    .text-light-gray { color:var(--light-gray)!important; }
    
    .bg-blue { background-color: var(--blue)!important; }
    .text-blue { color:var(--blue)!important; }
    
    .bg-light-blue { background-color: var(--light-blue)!important; }
    .text-light-blue { color:var(--light-blue)!important; }
    
    .bg-dark-blue { background-color: var(--dark-blue)!important; }
    .text-dark-blue { color:var(--dark-blue)!important; }
    
    .bg-green { background-color: var(--green)!important; }
    .text-green { color:var(--green)!important; }
    
    .bg-light-green { background-color: var(--light-green)!important; }
    .text-light-green { color:var(--light-green)!important; }
    
    .bg-dark-green { background-color: var(--dark-green)!important; }
    .text-dark-green { color:var(--dark-green)!important; }
    
    .bg-turq { background-color: var(--turq)!important; }
    .text-turq { color:var(--turq)!important; }
    
    .bg-purple { background-color: var(--purple)!important; }
    .text-purple { color:var(--purple)!important; }
    
    .bg-dark-purple{ background-color: var(--dark-purple)!important; }
    .text-dark-purple { color:var(--dark-purple)!important; }
    
    .bg-violet { background-color: var(--vio)!important; }
    .text-violet { color:var(--vio)!important; }
    
    .bg-orange { background-color: var(--orange)!important; }
    .text-orange { color:var(--orange)!important; }
    
    .bg-dark { background-color: var(--rich-black)!important; }
    .text-dark { color:var(--rich-black)!important; }
	
	.bg-dark-gray { background-color: var(--dark-gray)!important; }
	.text-dark-gray { color:var(--dark-gray)!important; }
    
    html,body {
      overscroll-behavior-y: none;
       -webkit-overflow-scrolling: touch; /* enables “momentum” (smooth) scrolling */
       position:relative;
    }
    
    body {
        font-family: 'Barlow', sans-serif;
        background:#000;
        padding-top:66px;
        padding-bottom:0px;
        color:#fff;
    }
    
    body > #main {
        margin-top:0px;
     
    }
    
    .navbar-dark .navbar-nav a.nav-link {
        background:#fff;
        color:#000;
        padding:4px 12px;
        text-transform:uppercase;
        text-decoration:none;
        font-weight:700;
        margin-left:10px;
        font-size:1rem;
        letter-spacing:2-0.3px;
    }
    
    .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .show>.nav-link {
    color:#fff;
    background-color:var(--gray);
    }
    
    .navbar-dark .navbar-nav .nav-link {
    color: #000;
    }
    
    .navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover {
        opacity:.9;
        color:#000;
    }
    
    .navbar-dark .navbar-nav .nav-link.active:focus, .navbar-dark .navbar-nav .nav-link.active:hover {
        opacity:.9;
        color:#fff;
    }

    a { 
        text-decoration:none;
    }
    
    a.navbar-brand {
        text-transform:uppercase;
        text-decoration:none;
        font-weight:400;
        color:#fff;
        margin-right: 2px;
    }
    
    nav.navbar-dark.bg-dark {
        background:#000!important;
        padding: 13px 0;	
    }
    .img-fluid {
        min-width:100%;
    }
    .brand-name {
        display:inline-block;
          overflow:hidden;
          padding:0;
          margin:0;
          line-height:1;
          font-size:14px;
          width:0;
          vertical-align: middle;
          /*animation: 1s slide-right;
          animation-direction: reverse;*/
          -webkit-transition: all 0.5s linear; 
             -moz-transition: all 0.5s ease-in-out; 
             -o-transition: all 0.5s ease-in-out; 
             -ms-transition: all 0.5s ease-in-out; 
             transition: width 0.5s linear; 
             margin-left: 10px;
        
    }
    
    .navbar-brand:hover .brand-name {
        display:inline-block;
          margin-left:10px;
        width:100px;
        /*animation: 1s slide-right;*/
        
    }
    
	.image-fill{
		position: absolute;
		    height: 100%;
		    width: 100%;
		    inset: 0px;
		    object-fit: contain;
		    color: transparent;
	}
    
    .navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }
    
    .navbar-dark .navbar-toggler {
    color: #fff;
    border-color: transparent;
    background-color:transparent;
    border-radius: 0;
	padding:0;
	
	width:36px;
	height:36px;
	position:relative;
	transition:.5s ease-in-out;
    }
	
	.navbar-toggler span {
		margin:0;
		padding:0;
	}
	
	.navbar-toggler .toggler-icon {
		display:block;
		position:absolute;
		height:3px;
		width:100%;
		background:#fff;
		border-radius:1px;
		opacity:1;
		left:0;
		transform:rotate(0deg);
		transition:.25s ease-in-out;
	}
	
	.navbar-toggler .toggler-icon.middle {
		margin-top:0;
		opacity:0;
	}
	
	.navbar-toggler .toggler-icon.top {
		margin-top:0;
		transform: rotate(135deg);
	}
	
	.navbar-toggler .toggler-icon.bottom {
		margin-top:0;
		transform:rotate(-135deg);
	}

	.navbar-toggler.collapsed .toggler-icon.middle {
		margin-top:0;
		opacity:1;
	}
	
	.navbar-toggler.collapsed .toggler-icon.top {
		margin-top:-20px;
		transform: rotate(0deg);
	}
	
	.navbar-toggler.collapsed .toggler-icon.bottom {
		margin-top:20px;
		transform:rotate(0deg);
	}
		
	/*
	.navbar-toggler.collapsed:hover .toggler-icon.bottom {
		left:5px;
	}
	
	.navbar-toggler.collapsed:hover .toggler-icon.middle {
		left:-5px;
	}
	
	.navbar-toggler.collapsed:hover .toggler-icon.top {
		left:2.5px;
	}*/
	
	
	
	
	.navbar-toggler,.navbar-toggler:focus,.navbar-toggler:active,.navbar-toggler-icon:focus {
	    text-decoration: none;
	    outline: 0;
	    box-shadow: none;
		border:0;
	}
	
	
	
	.navbar-toggler .bi-list {
		display:none;
	}
    
	.navbar-toggler .bi-x-lg {
		display:inline;
	}
	
	.navbar-toggler.collapsed .bi-list {
		display:inline;
	}
    
	.navbar-toggler.collapsed .bi-x-lg {
		display:none;
	}

    footer .navbar-brand .brand-name {
        width:100%!important;
        margin-left:10px;
        display:inline-block;
    }

    .form-control{
	        border-radius:0;
	        border-width:0;
	        border-color:transparent;
	        font-weight:300;
	    }
	
	 .btn {
	        border-radius:0;
	        border-width:0;
	        border-color:transparent;
	        font-weight:700;
	    }
		.padded-new {
			background-color: #000;
			color:#fff;
			    text-shadow: none;
			    display: inline;
			    padding-left: 15px;
			    padding-right: 15px;
			    padding-top:6px;
			    padding-bottom:6px;
			    box-decoration-break: clone;
			    -webkit-box-decoration-break: clone;
			    line-height: 1.2em;
		}
    .padded-multiline { 
      /*line-height: 2.2; 
      padding: 5px 10px; 
      margin: 0px;
      margin-left:-10px;
      text-transform:uppercase;*/
    }
    /*.padded-multiline h1,.padded-multiline .h1 { 
      color: #fff; 
      display: inline;
      padding: 0.45rem;
      padding-left:15px;
      padding-right:15px;
          font-weight:700;
      box-decoration-break: clone;
      -webkit-box-decoration-break: clone;
    }*/
    .padded-multiline h1,.padded-multiline .h1 { 
      
          font-weight:700;
		color:#fff;
		    text-shadow: none;
		    display: inline;
		    padding-left: 15px;
		    padding-right: 15px;
		    padding-top:5px;
		    padding-bottom:5px;
		    box-decoration-break: clone;
		    -webkit-box-decoration-break: clone;
		    line-height: 1.2em;
    }
	.lead {
		font-family:"Barlow Semi Condensed", "Barlow", sans-serif;
	}
    /*.padded-multiline h2, .padded-multiline .h2 { 
              color: #fff; 
              display: inline;
              padding: 0.45rem;
              padding-left:15px;
              padding-right:15px;
                  font-weight:100;
              box-decoration-break: clone;
              -webkit-box-decoration-break: clone;
			      vertical-align: middle;
				  
				  
		
            }*/
	.padded-multiline h2, .padded-multiline .h2 { 
		font-weight:100;
		              /* Needs prefixing */
		              box-decoration-break: clone;
		              -webkit-box-decoration-break: clone;
					      vertical-align: middle;
			  			color:#fff;
			  			    text-shadow: none;
			  			    display: inline;
			  			    padding-left: 15px;
			  			    padding-right: 16px;
			  			    padding-top:5px;
			  			    padding-bottom:5px;
			  			    box-decoration-break: clone;
			  			    -webkit-box-decoration-break: clone;
			  			    line-height: 1.2em;
				  
				  
		
		            }
		    .padded-multiline h5, .padded-multiline .h5 { 
		              color: #fff; 
		              display: inline;
		              padding: 0.45rem;
		              padding-left:15px;
		              padding-right:15px;
		                  font-weight:700;
		              /* Needs prefixing */
		              box-decoration-break: clone;
		              -webkit-box-decoration-break: clone;
					  line-height:1.4;
		            }
            .pad-50px {
                padding:50px;
            }
            .bottom-50px {
                bottom:50px;
            }
            .tile {
                min-height:740px; /*used to be 600px*/
                background-size:cover;
                background-position:center center;
                background-repeat:no-repeat;
				/*background-attachment:fixed;*/
            }
			
			.tile-image .padded-multiline > *, .box-shadow {
    			box-shadow: 0px 15px 15px #0006;
			}
            
            
            h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6 {
                font-weight:700;
                text-transform:uppercase;
            }
            .lh-075 {
                line-height:.75;
            }
            
            .tile-link,.tile-link .container {
                -webkit-transition: all 0.5s linear; 
                   -moz-transition: all 0.5s ease-in-out; 
                   -o-transition: all 0.5s ease-in-out; 
                   -ms-transition: all 0.5s ease-in-out; 
                   transition: all 0.5s linear; 
                
            }
                
            .tile-link:hover .container::before, .tile-link:focus .container::before {
                /*transform:scale(1.02);*/
                -webkit-transition: all 0.5s linear; 
                   -moz-transition: all 0.5s ease-in-out; 
                   -o-transition: all 0.5s ease-in-out; 
                   -ms-transition: all 0.5s ease-in-out; 
                   transition: all 0.5s linear; 
                 opacity: 0; 
            }
            
            .tile-link .container {
              position: relative;
              z-index: 1;
            }
			
			 @media (min-width: 767px) {
            .tile-link .container::before {
              content: "";
              position: absolute;
              top: 0; 
              left: 0;
              width: 100%; 
              height: 100%;  
              opacity: .4; 
              z-index: -1;
              background: #000;
            }
			}
			
			@media (hover: none) {
			 .tile-link .container::before {
				 display:none;
			 }
			}

            @keyframes slide-right {
              from {
                width: 0%; 
              }

              to {
                width: 100%;
              }
            }
            
            @keyframes slide-left {
              from {
                width: 100%; 
              }

              to {
                width: 0%;
              }
            }
			
			@keyframes panoramic {
			  0% {
			    background-position-x: 0%;
			  }
			  50% {
			    background-position-x: 100%;
			  }
			  100% {
			    background-position-x: 0%;
			  }
			}
			
			@keyframes slide-left {
			  to {
			    /*background-size: 500px;*/
				background-position-x:75%;
			  }
			}
			
			@keyframes slide-right {
			  to {
			    /*background-size: 500px;*/
				background-position-x:7%;
			  }
			}
			
		    @media (max-width: 767px) { 
				div#navbarCollapse::after {
				    content: "";
				    height: 50vh;
				    display: flex; 
				}
				.tile {
					min-height:93vh;
					
				}
				.tile.animated {
					/*chrome only unfortunately*/
					background-size: cover;
					  background-repeat: no-repeat;
					  background-position: center;
					  background-position-x:7%;

					  animation-range: cover 0% cover 100%;
					  animation: slide-left linear;
					  animation-timeline: view();
					  animation-iteration-count: 1;
					  /*
					background-position-x: 50%;
					  animation-delay: 0s;
					  animation-duration: 10s;
					  animation-name: panoramic;
					  animation-iteration-count: infinite;
					  animation-timing-function: ease-in-out;
					  animation-fill-mode: both;
					  will-change: background-position-x;*/
				}
				.tile.animated.right {
					background-size: cover;
					  background-repeat: no-repeat;
					  background-position: center;
					  background-position-x:75%;

					  animation-range: cover 0% cover 100%;
					  animation: slide-right linear;
					  animation-timeline: view();
					  animation-iteration-count: 1;
					  /*
					background-position-x: 50%;
					  animation-delay: 0s;
					  animation-duration: 10s;
					  animation-name: panoramic;
					  animation-iteration-count: infinite;
					  animation-timing-function: ease-in-out;
					  animation-fill-mode: both;
					  will-change: background-position-x;*/
				}
				.pad-50px {
					padding:0px;
				}
				.headline {
					padding:50px;
				}
		        .navbar-brand .brand-name {
		            width:100px;
		        }
		        .navbar-dark .navbar-nav a.nav-link {
		            margin-left:0px;
					padding:10px 12px;
					margin-bottom:10px;
		        }
		        .navbar-dark .navbar-collapse {
		            margin-top:10px;
		        }
		
				/*
				.padded-multiline {
				    line-height: 1.8;
				    padding: 4px 10px;
				    margin: 0px;
				    margin-left: -10px;
				    text-transform: uppercase;
				}*/
				.padded-multiline h2, .padded-multiline .h2{
					font-size: 1.3rem;
					line-height: 1.3em;
				}
				.padded-multiline .h5, .padded-multiline h5 {
				    font-size: .65rem;
				    padding-left: 10px;
				    padding-right: 10px;
				}
    
		    }