@charset "UTF-8";
/* CSS Document */

.role svg {
width: 30px;
display: inline-block;
vertical-align: middle;
margin-bottom: 3px;
}

.rCircle {
fill:#FFFFFF;
stroke:#B9B9B9;
}

.rText {
font-family: 'Source Sans Pro', 'Myriad Pro', sans-serif;
font-weight: 400;
font-size:12px;
fill: #A2A2A2;
}



.portfolioSlideDesc h4 {
font-family: 'Source Sans Pro', 'Myriad Pro', sans-serif;
font-size: 12.9px;
font-weight: 400;
line-height: 29px;
margin: 0;
padding-top: 0;
padding-bottom: 4px;
padding-right: 24px;
padding-left: 16px;
text-transform: uppercase;
color: #A2A2A2;

}



#snControl {
cursor: pointer;
}

/*subNav Styles*/
.snClick {
fill:white;
opacity:0;
}
.snIcon {
fill:silver;
}


#subNav .selected .snIcon {
fill:black;
}


#subNav .snHover {
opacity: 0;
fill:black;
transition: all .6s ease-out;
}

#subNav .activeArea:hover .snHover {
opacity: 1;
}

#subNav .selected .activeArea:hover .snHover {
opacity: 0.05;
}



#subNav .activeArea:hover .snIcon {
fill:white;
}



#subNav .selected .activeArea:hover .snIcon {
fill:rgba(27,27,27,1.00);
}


#subNav .activeArea:hover {
cursor: pointer;
}

.imageArea {
transition: all .3s ease-out;
}

#subNav selected {
}

#subNav .activeArea:hover .imageArea {
transform: translateY(18px);
}

#subNav .activeArea:hover .snText {
opacity: 1;
}


.snText {
font-family: 'Source Sans Pro', 'Myriad Pro', sans-serif;
font-weight: 400;
font-size: 11.2647px;
fill: white;
opacity: 0;
/*hover off*/
transition: all 0.4s 0.3s ease-out;
}
.snText:hover {
/*hover on*/
transition: all 0.4s ease-in;
}


#subNav {
  right:0px;
  background-color: hsla(0,0%,24%,0.95);
  width:100%;
  height: 75px;
  z-index: 10;
  box-sizing: border-box;
  position: fixed;
  bottom: 50px;
  padding: 0;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: black;
}

#subNavFrame {
  position: absolute;
  top: 4px;
  width: 100%;
}

#subNav ul {
  box-sizing: border-box;
  max-width: 240px;
  list-style: none;
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  flex-direction: row;
  justify-content: space-between;
  display: flex;
}

#subNav ul li {
  display: block;
  flex-grow: 1;
  width: 50px;
  padding: 0;
  margin: 0;
}



/*END subNav Styles*/


/*Begin SVG Styles*/
	#bar1{fill:#5589F9; fill-opacity: .3;transition: opacity .8s ease-in-out;
   -moz-transition: opacity .8s ease-in-out;
   -webkit-transition: opacity .8s ease-in-out;
   }
	#bar2{fill:#1F2BDB; fill-opacity: .3; transition: opacity .8s ease-in-out;
   -moz-transition: opacity .8s ease-in-out;
   -webkit-transition: opacity .8s ease-in-out;
   }
	#bar3{fill:#99E2FF; fill-opacity: .3 ;transition: opacity .8s ease-in-out;
   -moz-transition: opacity .8s ease-in-out;
   -webkit-transition: opacity .8s ease-in-out;
   }
	#bar4{fill:#54B7CF; fill-opacity: .3;transition: opacity .8s ease-in-out;
   -moz-transition: opacity .8s ease-in-out;
   -webkit-transition: opacity .8s ease-in-out;
   }
	#bar5{fill:#4E00B6; fill-opacity: .3;transition: opacity .8s ease-in-out;
   -moz-transition: opacity .8s ease-in-out;
   -webkit-transition: opacity .8s ease-in-out;
   }
	#bar6{fill:#A172D6; fill-opacity: .3;
transition: opacity .8s ease-in-out;
   -moz-transition: opacity .8s ease-in-out;
   -webkit-transition: opacity .8s ease-in-out;
   }
 

@keyframes example1 {
 0% {    transform-origin: 11.8, 257.6;
         height: 0; }
  100% {  transform-origin: 11.8, 257.6;
               height: 100%; }
 }
 
 
 
 
 
 
#radFactsLike{
animation: outerbeat 1.5s infinite linear forwards;
}
@keyframes outerbeat {
    0%  {  transform: scale(1.1);}
    10% { transform: scale(1.0);}
    50% { transform: scale(1.1);}
    60% { transform: scale(1.15);}
    75% { transform: scale(0.9);}
}







 
 
 
/*End SVG Styles*/



#reallyCorporate, #radFacts, #profile {
position: relative;
}
#reallyCorporate div, #radFacts svg, #profile svg{
position: absolute;
top: 0;
left: 0;
}


  
  
.videoFrame video {
height: 100%;
margin-right: auto;
margin-left:auto;
box-sizing: border-box;
display: block;
}

.videoFrameCM video {
height: 100%;
float: right;
padding-right: 10%;
/*margin-right: auto;
margin-left:auto;*/
box-sizing: border-box;
display: block;
}


.videoFrameCM {
/*margin-top: 15px;
margin-bottom: 15px;*/
box-sizing: border-box;
padding-top: 20px;
padding-bottom: 20px;
height: 477px;

  background: url("../img/slide_video_background_chat_maven_b.webp");
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center top;

}


.videoFrame {
/*margin-top: 15px;
margin-bottom: 15px;*/
box-sizing: border-box;
padding-top: 20px;
padding-bottom: 20px;
height: 477px;

  background: url("../img/video_background.jpg");
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center top;

}

 #content #portfolioGallery .item .portfolioSlide .portfolioSlideDesc #lastSlide {
  list-style-type: none;
  text-align: left;
  margin-top: 10px;
  margin-bottom: 20px;
  margin-left: 0;
  margin-right: 0;
  padding-top: 0;
  padding-left: 25px;
  padding-right: 0;
  padding-bottom: 0;
}

 #content #portfolioGallery .item .portfolioSlide .portfolioSlideDesc #lastMenu {
  padding-left: 25px;
}

 #content #portfolioGallery .item .portfolioSlide .portfolioSlideDesc #lastSlide li {
padding-top:0px;
padding-bottom:0px;
margin-bottom: 6px;
margin-top: 0;
list-style: none;
}

 #content #portfolioGallery .item .portfolioSlide .portfolioSlideDesc #lastSlide li a {
color: white;
display: inline-block;
border-radius: 20px;
font-family: 'Source Sans Pro', 'Myriad Pro', sans-serif;
font-size: 16px;
line-height: 16px;
font-weight: 400;
background-color: black;
text-decoration: none;
padding-top: 5px;
padding-bottom: 8px;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
margin: 0;
/*border-width: 2px;
border-style: solid;
border-color: #484848*/
}
 #content #portfolioGallery .item .portfolioSlide .portfolioSlideDesc #lastSlide li a:hover {
background-color: #6A6A6A !important;

}



/*=====Custom Styles for portfolio Page====*/
.portfolioSlideDesc a {
background-color: black;
display: inline-block;
border-radius: 14px;
font-family: 'Source Sans Pro', 'Myriad Pro', sans-serif;
font-size: 17px;
font-weight: 400;
color: #D8D8D8;
text-decoration: none;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 10px;
padding-right: 10px;
margin-top: 10px;
margin-right:10px;
border-style: solid;
border-width: 2px;
border-color: transparent;
}

.portfolioSlideDesc .highlight {
animation: pulse 4s ease infinite alternate;
}



@keyframes pulse {
  0% {
    border-color: white;
  }
  75% {
    border-color: #FF8002;
  }
  100% {
    border-color: white;
  }
}



.portfolioSlideDesc a:hover {
background-color: rgba(65,65,65,1.00)
}




#portfolioMenuButton {
display: inline-block;
border-radius: 14px;
font-family: 'Source Sans Pro', 'Myriad Pro', sans-serif;
font-size: 16px;
font-weight: 400;
float: right;
color: #D8D8D8;
text-decoration: none;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 10px;
padding-right: 10px;
margin-top: 10px;
margin-right:10px;
border-style: solid;
border-color: #484848;
border-width: 1px;
}
#portfolioMenuButton:hover {
background-color: #6A6A6A;
}



.portfolioSVGFrame {
box-sizing: border-box;
}

.portfolioSVGFrame img {
background-color: #E0E0E0;
box-sizing: border-box;
border-right-style: solid;
border-right-width: 1px;
border-right-color: black;


}

.portfolioSlide {
display: flex;
/*align-items: stretch;*/
align-items: center;
}

.portfolioSlideFrame {
width:70%;
/*overflow: hidden;*/
box-sizing: border-box;
}
.portfolioSlideFrame img{
width:100%;
box-sizing: border-box;}

.portfolioSlideDesc{
width:30%;
overflow: hidden;
background-color:transparent;
box-sizing: border-box;
}

.portfolioSlideDesc h3 {
font-family: 'Source Sans Pro', 'Myriad Pro', sans-serif;
font-size: 26px;
font-weight: 400;
line-height: 29px;
margin: 0;
padding-top: 0;
padding-bottom: 4px;
padding-right: 24px;
padding-left: 16px;}

.portfolioSlideDesc p {
font-family: 'Source Sans Pro', 'Myriad Pro', sans-serif;
font-size: 20px;
font-weight: 200;
line-height: 25px;
margin: 0;
padding-top: 0px;
padding-bottom:8px;
padding-left:16px;
padding-right:20px;
}



#portfolioHeader {
max-width:1250px;
margin-right: auto;
margin-left:auto;
margin-top: 20px;
margin-bottom: 8px;
}



#portfolioHeader h1 {
 
font-family: 'Source Sans Pro', 'Myriad Pro', sans-serif;
font-size: 30px;
font-weight: 400;
line-height: 30px;
margin-bottom: 0px;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 5px; 
padding-right: 5px;
font-style: normal;
text-align: left;
color:white;
}



#backgroundLayer {
  /*background-color:#00A200;*/
  /*background-color:#717171;*/
    background-color:#484848;

}






#footer {
  color:#898989;
  }
  
  
 
  
  
#portfolioGallery {
	/*width: 400px;*/
	/*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
 max-width:1250px;
 border-width: 1px;
 border-color: black;
 border-style: solid;
	margin-top: 6px;
	margin-right: auto;
	margin-bottom: 34px;
	margin-left: auto;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
 background-color: white;
}






@media only screen and (max-width: 970px) {


.videoFrameCM {
    background-image:none;
}


.videoFrameCM video {
margin-right: auto;
margin-left: auto;
float:none;
padding-right: 0;
}




#content #portfolioGallery .item .portfolioSlide .portfolioSlideDesc #lastSlide {
  text-align: center;
  padding-left: 0;
}

 #content #portfolioGallery .item .portfolioSlide .portfolioSlideDesc #lastMenu {
  padding-left: 0;
  padding-right: 0;
    text-align: center;
}

.portfolioSlide {
display: block;
}

.portfolioSlideFrame {
width:100%}

.portfolioSlideDesc{
width:100%;
min-height: 90px;
}



.portfolioSVGFrame {
border-right-style: none;
border-right-width: 0px;
border-right-color: transparent;

border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: black;
}

.portfolioSlideDesc h3 {
text-align: center;
padding-bottom: 1px;
padding-right: 16px;
padding-left: 16px;}

.portfolioSlideDesc p {
text-align: center;

padding-right: 16px;
padding-left: 16px;

}
/*}*/



}/* end970 */



@media only screen and (max-width:500px){

.videoFrame, .videoFrameCM {
height:350px;
    background-image:none;
    padding-top:5px;
    padding-bottom: 5px;
}


.videoFrameCM video {
margin-right: auto;
margin-left: auto;
float:none;
padding-right: 0;
}


}



@media only screen and (max-height: 900px) and (min-width: 971px) {
#portfolioGallery {
max-width:900px;
height:450px;
}

.portfolioSlideFrame img, #radFacts svg, #profile svg{
width:auto !important;
height:450px;}

.videoFrame, .videoFrameCM {
height:450px;
  background-size: 100% auto;

}


#portfolioHeader {
max-width:900px;
}


.portfolioSlideFrame {
width:65%;}

.portfolioSlideDesc{
width:35%;
padding-left: 10px;}


}




@media only screen and (max-height: 540px) and (min-width: 971px) {
#portfolioGallery {
max-width:700px;
height:250px;
}

.portfolioSlideFrame {
min-height: 250px;
}

.portfolioSlideFrame img, #radFacts svg, #profile svg{
width:auto !important;
height:250px;}

.videoFrame, .videoFrameCM {
width:auto !important;
height: 230px;
  background-size: 100% auto;
/* margin: 0;
  padding: 0;*/
}

.videoFrame video, .videoFrameCM video {
height: 230px;
width: auto !important;
}










#portfolioHeader {
max-width:700px;
}


.portfolioSlideFrame {
width:55%;
}

.portfolioSlideDesc{
width:45%;}




}



/*@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) 
{ 
#portfolioGallery {

max-width:none;
max-height:400px;
}
}*/



/*
@media screen and (max-width: 920px) {

#portfolioGallery {
		width: 350px;
		padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
}

@media screen and (max-width: 800px) {
	
	#portfolioGallery {
		width: auto;
		max-width: 500px;
			margin-right: auto;
margin-left:auto;
float:none;
	margin-bottom: 19px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;

}




@media screen and (max-width: 650px) {
	#portfolioGallery {
		width: auto;
		max-width: 450px;
		padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
}  */