#twin-hero p{
	color:white;
}
#twin-hero h2{
	color:white;
}
#twin-hero h3{
	color:white;
}


@media (min-width: 768px) {

.side-container h2{
			font-size:2rem;
}
.side-container h3{
			font-size:1.2rem;
}	
#left-hero-full p , #right-hero-full p {
			font-size:.8rem;
}		
		
	
#left-hero-full, #right-hero-full  {
			overflow:hidden;
}	
			
		
	.twin-hero{
	    height:80vh;
	    background-color:black;
	    padding-top:0 !important;
	    width:100%;
	    overflow:hidden;
	    position:relative
	}
	.twin-hero .hero-shadow{
	    position:absolute;
	    z-index:40;
	    width:100%;
	    height:90px;
	    background:linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.07))
	}
	.twin-hero .hero-container{
	    width:100%;
	    height:100%
	}
	.twin-hero .hero-container .side-container{
	    /* padding-top:72px; */
	    width:85%;
	    max-width:1300px;
	    height:100%;
	    position:relative;
		overflow:hidden;
	}
	.twin-hero .hero-container .side-container .btn.btn-white{
	    border:none
	}

	.twin-hero .hero-container .side-container .hero-twin-items .row .hero-twin-item{
	    float:left;
	    width:28%;
	    margin-left:2%;
	    margin-right:2%
	}

	.twin-hero .hero-container .side-container .hero-twin-items .row .hero-twin-item a{
	    color:#fff;
	    text-decoration:underline
	}
	.twin-hero .hero-container .side-container .hero-twin-items .row .hero-twin-item div{
	    text-align:center;
	    transform:scale(.8);
	    -moz-transform:scale(.8);
	    -webkit-transform:scale(.8)
	}
	
	.twin-hero .hero-container .round-icon{
	    display:inline-block;
	    font-size:40px;
	    color:#fff;
	    border:2px solid #fff;
	    border-radius:30px;
	    width:50px;
	    height:50px;
	    line-height:42px;
	    padding:0;
	    margin-top:10px;
	    cursor:default;
	    animation-duration:1.6s;
	    animation-name:pulse;
	    animation-iteration-count:infinite;
	    animation-direction:alternate
	}
	.twin-hero .hero-container .round-filled-icon{
	    display:inline-block;
	    background:#fff;
	    font-size:40px;
	    color:#5f73b4;
	    border-radius:30px;
	    border-style:solid;
	    -moz-background-clip:content;
	    -webkit-background-clip:content;
	    background-clip:content-box;
	    width:50px;
	    height:50px;
	    line-height:42px;
	    padding:0;
	    margin-top:10px;
	    cursor:default;
	    animation-duration:1.6s;
	    animation-name:pulse;
	    animation-iteration-count:infinite;
	    animation-direction:alternate
	}
	.twin-hero .hero-container .active{
	    border-bottom:none
	}
	.twin-hero .hero-container .initial{
	    position:absolute;
	    width:400px;
	    padding-top:30vh;
	    height:auto;
	    -webkit-transition:opacity .2s;
	    transition:opacity .2s;
	    opacity:0
	}
	.twin-hero .hero-container .initial.active{
	    opacity:1
	}
	.twin-hero .hero-container .expanded{
	    position:absolute;
	    width:85%;
	    top:10vh; 
	    height:auto;
	    overflow:auto;
	    -webkit-transition:opacity .2s;
	    transition:opacity .2s;
	    opacity:1;
	}
	.twin-hero .hero-container .expanded.active{
	    opacity:1;
	}
	.twin-hero .hero-container .collapsed{
	    position:absolute;
	    width:300px;
	    padding-top:10vh;
	    height:auto;
	    -webkit-transition:opacity .2s;
	    transition:opacity .2s;
	    opacity:0;
	}
	.twin-hero .hero-container .collapsed.active{
	    opacity:1;
	}
	.twin-hero .left-hero{
	    position:absolute;
	    z-index:20;
	    overflow:hidden;
	    position:relative;
	    -webkit-transition:transform .8s;
	    transition:transform .8s;
	    width:85%;
	    height:100%;
	    top:0;
	    transform:skewX(-10deg);
	    -moz-transform:skewX(-10deg);
	    -webkit-transform:skewX(-10deg);
	    left:-35%;
	    box-shadow:1px 0 10px rgba(0,0,0,0.7);
	}
	.twin-hero .left-hero:after{
	    position:absolute;
	    content:"";
	    border:1px solid rgba(0,0,0,0.4);
	    top:0;
	    right:-1px;
	    height:100%
	}
	.twin-hero .left-hero.left-hero-collapsed{
	    transform:skewX(-10deg) translateX(-25%);
	    -moz-transform:skewX(-10deg) translateX(-25%);
	    -webkit-transform:skewX(-10deg) translateX(-25%)
	}
	.twin-hero .left-hero.left-hero-collapsed .left-hero-tilt-collapsed{
	    transform:skewX(10deg) translateX(17%);
	    -moz-transform:skewX(10deg) translateX(17%);
	    -webkit-transform:skewX(10deg) translateX(17%)
	}
	.twin-hero .left-hero.left-hero-expanded{
	    transform:skewX(-10deg) translateX(25%);
	    -moz-transform:skewX(-10deg) translateX(25%);
	    -webkit-transform:skewX(-10deg) translateX(25%)
	}
	.twin-hero .left-hero.left-hero-expanded .left-hero-tilt-expanded{
	    transform:skewX(10deg) translateX(-9%);
	    -moz-transform:skewX(10deg) translateX(-9%);
	    -webkit-transform:skewX(10deg) translateX(-9%)
	}
	.twin-hero .left-hero.left-hero-expanded .left-hero-tilt-expanded:before{
	    opacity:1;
	}
	.twin-hero .left-hero .left-hero-tilt{
	    width:100%;
	    height:100%;
	    margin-left:15%;
	    transform:skewX(10deg);
	    -moz-transform:skewX(10deg);
	    -webkit-transform:skewX(10deg);
	    -webkit-transition:transform .8s;
	    transition:transform .8s;
	}
	
	.left-hero:after{
	    width:100%;
	    height:100%;
	    margin-left:15%;
	    background:url('/post/hero-twin-images/audience.jpg') no-repeat center center;
	    background-size:cover;
	    z-index: -1;
	}
	
	.twin-hero .left-hero .left-hero-tilt:before{
	    content:"";
	    -webkit-transition:opacity .8s;
	    transition:opacity .8s;
	    position:absolute;
	    left:0;
	    top:0;
	    width:100%;
	    height:100%;
	    /* background:linear-gradient(90deg,  #ff81026b, #00205c70); */
	    background: #00205ce3;
	    opacity:.6;
	}
	.twin-hero .left-hero .left-hero-tilt .side-container{
	    float:right;
	}
	.twin-hero .left-hero .left-hero-tilt .side-container .initial{
	    right:30%;
	}
	.twin-hero .left-hero .left-hero-tilt .side-container .expanded{
	    right:12%;
	}
	.twin-hero .left-hero .left-hero-tilt .side-container .collapsed{
	    right:42%;
	}
	
	.twin-hero .right-hero{
	    width:85%;
	    height:100%;
	    position:absolute;
	    top:0;
	    right:-25%;
	    z-index:10;
	    -webkit-transition:transform .8s;
	    transition:transform .8s;
	    transform:translateX(-8%);
	    -moz-transform:translateX(-8%);
	    -webkit-transform:translateX(-8%);
	}
	.twin-hero .right-hero.right-hero-collapsed{
	    transform:translateX(25%);
	    -moz-transform:translateX(25%);
	    -webkit-transform:translateX(25%);
	}
	.twin-hero .right-hero.right-hero-collapsed .right-hero-tilt-collapsed{
	    transform:translateX(-27%);
	    -moz-transform:translateX(-27%);
	    -webkit-transform:translateX(-27%);
	}
	.twin-hero .right-hero.right-hero-expanded{
	    transform:translateX(-25%);
	    -moz-transform:translateX(-25%);
	    -webkit-transform:translateX(-25%);
	}
	.twin-hero .right-hero.right-hero-expanded .right-hero-tilt-expanded{
	    transform:translateX(6%);
	    -moz-transform:translateX(6%);
	    -webkit-transform:translateX(6%);
	}
	.twin-hero .right-hero.right-hero-expanded .right-hero-tilt-expanded:before{
	    opacity:1;
	}
	.twin-hero .right-hero .right-hero-tilt{
	    width:100%;
	    height:100%;
	    background:url('/post/hero-twin-images/speaker-mic.jpg') no-repeat center center;
	    background-size:cover;
	    -webkit-transition:transform .8s;
	    transition:transform .8s;
	}
	
	.twin-hero .right-hero .right-hero-tilt:before{
	    content:"";
	    -webkit-transition:opacity .8s;
	    transition:opacity .8s;
	    position:absolute;
	    left:0;
	    top:0;
	    width:100%;
	    height:100%;
	    /* background:linear-gradient(90deg, #00205c70, #ff81026b); */
	    background: #ff8102e3;
	    opacity:.6;
	}
	.twin-hero .right-hero .right-hero-tilt .side-container .initial{
	    left:35%
	}
	.twin-hero .right-hero .right-hero-tilt .side-container .expanded{
	    left:11%
	}
	.twin-hero .right-hero .right-hero-tilt .side-container .collapsed{
	    left:48%
	}
	
	.hero-home{
	    overflow:hidden;
	    background-color:#000;
	    height:calc(100vh - 197px);
	    min-height:530px
	}
	.hero-home h1+a.btn{
	    margin-top:30px
	}
	
	#hero-twin-item-icon{
	    padding:50px;
	}
	
	#left-hero-selector, #right-hero-selector{
	    margin-top:100px;
	}
	
	#left-hero-full, #right-hero-full{
	    margin-top:2%;
	}
	
	.hero-logo-padding{
	    margin-left: 130px;
	}
	
	.small-branding{
	    width: 250px;
	    margin-left: 20px;
	    transition:opacity .2s;
	    -webkit-transition:opacity .2s;  
	    opacity: .6;
	}
	
	.small-branding-text{
	     font-size: 1em;      
	     font-family: "arial",sans-serif;
	     transition:opacity .2s;
	     opacity:.6;
	}

}

@media (max-width: 768px) {
   
	#hero-header{
		background:black;
	} 
	
#hero-logo{
    width: 200px;
   margin-left: 4px;
	margin-top: 4px;
    opacity: .8;
}
		
#hero-header-text{
     font-size: .7em;      
     font-family: "arial",sans-serif;
     opacity:.8;
}

	.hero-container{
		margin-top:-60px;
	}
	
	
	.hero-container, .hero-twin-item{
     display: block !important;
    }
	    .hero-container .side-container{
      height: 130vh;
      background-repeat: no-repeat;
      padding-top:30px;
    }
	
	.hero-twin-items{
		font-size: 1em;
	}

	.hero-twin-items{
		padding-left:40px;
		padding-right:40px;		
	}
	
	
	
	.hero-container{
       transform: scale(.95);
    }
	.hero-container h2{
		color:white;
		font-weight:bold;
		font-size:8vw;
	}

.hero-container h3{
color:white;
   font-size:4.4vw;
	padding-left:20px;
	padding-right:20px;
}
	
	.initial{
		display:none;
	}
	
	#left-hero-selector{
		display:none;
	}

		#right-hero-selector{
		display:none;
	}
	
	    #left-hero{
    	margin-bottom: 20px;
        background-color: #00205ce3;    	
        border-right: none;
    }

    #right-hero {
	background-color: #ff8102e3;
    }
}