@import 'bootstrap.css';
@import 'theme.css';
@import 'dark.css';
@import 'font-icons.css';
@import 'animate.css';
@import 'responsive.css';

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
#header, #header-wrap, #logo img {
    height: 60px;
}
#primary-menu ul li > a {   
    padding: 20px 15px;
}
#top-search, #top-cart, #side-panel-trigger {    
    margin: 22px 0 40px 15px;
}
}

body { font-size: 15px; }
h2 { color: #017ca5; }
.sub .content-wrap h3 { color: #3c8500; }
@media (max-width: 768px) {
.vertical-middle { position: relative !important; }
}

/* Home Page Custom Styles */

/* xCat Butterfly Logo Animation */
#butterfly {	
	left: 0px;
	top: 0px; 
	max-width: 213px;
	/*height: 242px;*/
	-webkit-transform-style: preserve-3d;
	        transform-style: preserve-3d;	
	position: relative;
	text-align:center;
margin: 5px auto 15px auto;
}
#butterfly img { max-width: 100%; max-height: 100%; border:none; margin:5px; padding:0px;}
/*#butterfly .logo-text { left: 100%; top:40%; position: absolute; }*/
.wing {	
	-webkit-transform-origin: top right;	
	    -ms-transform-origin: top right;	
	        transform-origin: top right;
	position: absolute;	
	width: 50%;
	height: 100%;	
	-webkit-animation-duration: 4.5s;	
	        animation-duration: 4.5s;
	-webkit-animation-delay: 1s;
	        animation-delay: 1s;
	-webkit-animation-iteration-count: infinite;
	        animation-iteration-count: infinite;
	-webkit-animation-timing-function: ease-out;
	        animation-timing-function: ease-out;
}
#butterfly .left{
	/*background: url(http://stage.esxinc.com/images/esx/Template/2016/images/esx/xCat-bug2.png) no-repeat;*/
	-webkit-transform: rotateX(0deg)  translate3d(0px, 0px, 0px) rotate3d(0, 1, 0, 0deg);
	        transform: rotateX(0deg)  translate3d(0px, 0px, 0px) rotate3d(0, 1, 0, 0deg);
	-webkit-animation-name: leftwingani;
	        animation-name: leftwingani;
	left: 0px;
	top: 0px;
}
#butterfly .right{	
	/*background: url(http://stage.esxinc.com/images/esx/Template/2016/images/esx/xCat-bug2.png) top right no-repeat;*/  	
	-webkit-transform-origin: top left;  	
	    -ms-transform-origin: top left;  	
	        transform-origin: top left;
	-webkit-transform: rotateX(0deg)  translate3d(0px, 0px, 0px) rotate3d(0, 1, 0, 0deg);
	        transform: rotateX(0deg)  translate3d(0px, 0px, 0px) rotate3d(0, 1, 0, 0deg);
	-webkit-animation-name: rightwingani;
	        animation-name: rightwingani;
	left: 50%;
	top: 0px;
	margin-left: 5px;
}
@-webkit-keyframes rightwingani {
	0% { -webkit-transform:rotateX(0deg) rotate3d(0, 1, 0, 0deg); transform:rotateX(0deg) rotate3d(0, 1, 0, 0deg); }
	42% { -webkit-transform:rotateX(0deg) rotate3d(0, 1, 0, 0deg); transform:rotateX(0deg) rotate3d(0, 1, 0, 0deg); }
	44% { -webkit-transform:rotateX(0deg) rotate3d(0, 1, 0, 60deg); transform:rotateX(0deg) rotate3d(0, 1, 0, 60deg);	}
	46% { -webkit-transform:rotateX(0deg) rotate3d(0, 1, 0, 0deg); transform:rotateX(0deg) rotate3d(0, 1, 0, 0deg); }
	48% { -webkit-transform:rotateX(0deg) rotate3d(0, 1, 0, 0deg); transform:rotateX(0deg) rotate3d(0, 1, 0, 0deg); }
	50% { -webkit-transform:rotateX(0deg) rotate3d(0, 1, 0, 60deg); transform:rotateX(0deg) rotate3d(0, 1, 0, 60deg);	}
	52% { -webkit-transform:rotateX(0deg) rotate3d(0, 1, 0, 0deg); transform:rotateX(0deg) rotate3d(0, 1, 0, 0deg); }
	53% { -webkit-transform:rotateX(0deg) rotate3d(0, 1, 0, 0deg); transform:rotateX(0deg) rotate3d(0, 1, 0, 0deg); }
	56% { -webkit-transform:rotateX(0deg) rotate3d(0, 1, 0, 60deg); transform:rotateX(0deg) rotate3d(0, 1, 0, 60deg);	}
	58% { -webkit-transform:rotateX(0deg) rotate3d(0, 1, 0, 0deg); transform:rotateX(0deg) rotate3d(0, 1, 0, 0deg); }
	100% { -webkit-transform:rotateX(0deg) rotate3d(0, 1, 0, 0deg); transform:rotateX(0deg) rotate3d(0, 1, 0, 0deg); }
}
@keyframes rightwingani {
	0% { -webkit-transform:rotateX(0deg) rotate3d(0, 1, 0, 0deg); transform:rotateX(0deg) rotate3d(0, 1, 0, 0deg); }
	42% { -webkit-transform:rotateX(0deg) rotate3d(0, 1, 0, 0deg); transform:rotateX(0deg) rotate3d(0, 1, 0, 0deg); }
	44% { -webkit-transform:rotateX(0deg) rotate3d(0, 1, 0, 60deg); transform:rotateX(0deg) rotate3d(0, 1, 0, 60deg);	}
	46% { -webkit-transform:rotateX(0deg) rotate3d(0, 1, 0, 0deg); transform:rotateX(0deg) rotate3d(0, 1, 0, 0deg); }
	48% { -webkit-transform:rotateX(0deg) rotate3d(0, 1, 0, 0deg); transform:rotateX(0deg) rotate3d(0, 1, 0, 0deg); }
	50% { -webkit-transform:rotateX(0deg) rotate3d(0, 1, 0, 60deg); transform:rotateX(0deg) rotate3d(0, 1, 0, 60deg);	}
	52% { -webkit-transform:rotateX(0deg) rotate3d(0, 1, 0, 0deg); transform:rotateX(0deg) rotate3d(0, 1, 0, 0deg); }
	53% { -webkit-transform:rotateX(0deg) rotate3d(0, 1, 0, 0deg); transform:rotateX(0deg) rotate3d(0, 1, 0, 0deg); }
	56% { -webkit-transform:rotateX(0deg) rotate3d(0, 1, 0, 60deg); transform:rotateX(0deg) rotate3d(0, 1, 0, 60deg);	}
	58% { -webkit-transform:rotateX(0deg) rotate3d(0, 1, 0, 0deg); transform:rotateX(0deg) rotate3d(0, 1, 0, 0deg); }
	100% { -webkit-transform:rotateX(0deg) rotate3d(0, 1, 0, 0deg); transform:rotateX(0deg) rotate3d(0, 1, 0, 0deg); }
}
@-webkit-keyframes leftwingani {
	0% { -webkit-transform:rotateX(0deg) rotate3d(0, 1, 0, 0deg); transform:rotateX(0deg) rotate3d(0, 1, 0, 0deg); }
	42% { -webkit-transform:rotateX(0deg) rotate3d(0, 1, 0, 0deg); transform:rotateX(0deg) rotate3d(0, 1, 0, 0deg); }
	44% { -webkit-transform:rotateX(0deg) rotate3d(0, 1, 0, 60deg); transform:rotateX(0deg) rotate3d(0, 1, 0, 60deg);	}
	46% { -webkit-transform:rotateX(0deg) rotate3d(0, 1, 0, 0deg); transform:rotateX(0deg) rotate3d(0, 1, 0, 0deg); }
	48% { -webkit-transform:rotateX(0deg) rotate3d(0, 1, 0, 0deg); transform:rotateX(0deg) rotate3d(0, 1, 0, 0deg); }
	50% { -webkit-transform:rotateX(0deg) rotate3d(0, 1, 0, 60deg); transform:rotateX(0deg) rotate3d(0, 1, 0, 60deg);	}
	52% { -webkit-transform:rotateX(0deg) rotate3d(0, 1, 0, 0deg); transform:rotateX(0deg) rotate3d(0, 1, 0, 0deg); }
	53% { -webkit-transform:rotateX(0deg) rotate3d(0, 1, 0, 0deg); transform:rotateX(0deg) rotate3d(0, 1, 0, 0deg); }
	56% { -webkit-transform:rotateX(0deg) rotate3d(0, 1, 0, 60deg); transform:rotateX(0deg) rotate3d(0, 1, 0, 60deg);	}
	58% { -webkit-transform:rotateX(0deg) rotate3d(0, 1, 0, 0deg); transform:rotateX(0deg) rotate3d(0, 1, 0, 0deg); }
	100% { -webkit-transform:rotateX(0deg) rotate3d(0, 1, 0, 0deg); transform:rotateX(0deg) rotate3d(0, 1, 0, 0deg); }
}
@keyframes leftwingani {
	0% { -webkit-transform:rotateX(0deg) rotate3d(0, 1, 0, 0deg); transform:rotateX(0deg) rotate3d(0, 1, 0, 0deg); }
	42% { -webkit-transform:rotateX(0deg) rotate3d(0, 1, 0, 0deg); transform:rotateX(0deg) rotate3d(0, 1, 0, 0deg); }
	44% { -webkit-transform:rotateX(0deg) rotate3d(0, 1, 0, 60deg); transform:rotateX(0deg) rotate3d(0, 1, 0, 60deg);	}
	46% { -webkit-transform:rotateX(0deg) rotate3d(0, 1, 0, 0deg); transform:rotateX(0deg) rotate3d(0, 1, 0, 0deg); }
	48% { -webkit-transform:rotateX(0deg) rotate3d(0, 1, 0, 0deg); transform:rotateX(0deg) rotate3d(0, 1, 0, 0deg); }
	50% { -webkit-transform:rotateX(0deg) rotate3d(0, 1, 0, 60deg); transform:rotateX(0deg) rotate3d(0, 1, 0, 60deg);	}
	52% { -webkit-transform:rotateX(0deg) rotate3d(0, 1, 0, 0deg); transform:rotateX(0deg) rotate3d(0, 1, 0, 0deg); }
	53% { -webkit-transform:rotateX(0deg) rotate3d(0, 1, 0, 0deg); transform:rotateX(0deg) rotate3d(0, 1, 0, 0deg); }
	56% { -webkit-transform:rotateX(0deg) rotate3d(0, 1, 0, 60deg); transform:rotateX(0deg) rotate3d(0, 1, 0, 60deg);	}
	58% { -webkit-transform:rotateX(0deg) rotate3d(0, 1, 0, 0deg); transform:rotateX(0deg) rotate3d(0, 1, 0, 0deg); }
	100% { -webkit-transform:rotateX(0deg) rotate3d(0, 1, 0, 0deg); transform:rotateX(0deg) rotate3d(0, 1, 0, 0deg); }
}

/* Typing Header Cursor */
.typed-cursor{
		opacity: 1;
		-webkit-animation: blink 0.7s infinite;
		-moz-animation: blink 0.7s infinite;
		animation: blink 0.7s infinite;
	}
	@keyframes blink{
		0% { opacity:1; }
		50% { opacity:0; }
		100% { opacity:1; }
	}
	@-webkit-keyframes blink{
		0% { opacity:1; }
		50% { opacity:0; }
		100% { opacity:1; }
	}
	@-moz-keyframes blink{
		0% { opacity:1; }
		50% { opacity:0; }
		100% { opacity:1; }
	}

.vidcover {
  background: #000;
  opacity: 0.4;
  /*display: block;*/
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  -webkit-transition: opacity 800ms ease 0.2s;
  -moz-transition: opacity 800ms ease 0.2s;
  -ms-transition: opacity 800ms ease 0.2s;
  transition: opacity 800ms ease 0.2s;
  display: none;
}

.fullvid {
  width: 1280px;
  height: 720px;
  position: fixed;
  bottom: 50%;
  left: 50%;
  z-index: 1;
  -webkit-transform: translate(-50%, 50%);
  -moz-transform: translate(-50%, 50%);
  -ms-transform: translate(-50%, 50%);
  transform: translate(-50%, 50%);
  -webkit-transition: all 400ms ease-out 400ms;
  -moz-transition: all 400ms ease-out 400ms;
  -ms-transition: all 400ms ease-out 400ms;
  transition: all 400ms ease-out 400ms;
}

.homepage-hero-module {
	border-right: none;
	border-left: none;
	position: relative;
	height: 100% !important;
}
.no-video .video-container video,
.touch .video-container video {
	display: none;
}
.no-video .video-container .poster,
.touch .video-container .poster {
	display: block !important;
}
.video-container {
	position: absolute;
	bottom: 0%;
	left: 0%;
	height: 100%;
	width: 100%;
	overflow: hidden;
	background: #000;
}
.video-container .poster img {
	width: 100%;
	bottom: 0;
	position: absolute;
}
.video-container .filter {
	z-index: 2;
	position: absolute;
	background: rgba(0, 0, 0, 0.4);
/*background: rgba(11, 58, 100, 0.4);*/
	width: 100%;
	height: 100%;
}
.video-container .title-container {
    z-index: 1000;
    position: absolute;
    top: 55%;
    transform: translateY(-50%);
	width: 100%;
    text-align: center;
    color: #fff;
}
@media (min-width: 768px) {
	.video-container .title-container h1 {
		font-size: 4.6rem;
	}
	.video-container .title-container h1 #typey {
		font-size: 4.6rem;
	}
}
@media (max-width: 768px) {
.content-wrap {
    position: relative;
    padding: 40px 0;
}
.video-container .title-container {
    top: 45%;
    transform: translateY(-50%);
	width: 98%;
}
}
.video-container .title-container h1 {
    margin: 0px;
    color: #00B0E5;
	
	font-weight: 100;
}
.video-container .title-container h1 #typey {
    color: #fff;
	
}
.video-container .title-container h2 {
    margin: 0px;
	font-weight: 100;
    color: #fff;
}
.video-container .link a {
    color: #fff;
}
.video-container video {
	position: absolute;
	z-index: 0;
	bottom: 0;
	width: 100%;
}

/* Sub Page Custom Styles */

@media (min-width: 768px) {
#page-title.page-title-parallax { padding: 220px 0px 110px 0px; }
}
@media (max-width: 768px) {
.content-wrap {
    position: relative;
    padding: 40px 0;
}
#page-title.page-title-parallax  { padding: 220px 0px 110px 0px; }
.video-container .title-container {
    top: 45%;
    transform: translateY(-50%);
	width: 98%;
}
#header.dark.transparent-header, #header.dark.semi-transparent {
    background-color: #00203E;
    border-bottom: none;
}
.container, #header.full-header .container, .container-fullwidth {
    width: 95% !important;
}
#logo {
    height: 75px;
    float: none;
    margin: -15px auto 5px auto !important;
    max-width: none;
    text-align: center;
    border: 0 !important;
    padding: 0 !important;
}
#primary-menu-trigger, #page-submenu-trigger {
    font-size: 25px;
    position: absolute;
    top: 22px;
    margin-top: 0px;    
    line-height: 100%;
}
#side-panel-trigger {
    right: 25px;
	font-size: 25px;
    position: absolute;
    top: 22px;
    margin-top: 0px;    
    line-height: 100%;
}
#side-panel-trigger a { 
	font-size: 25px;
	
	top: 30%;
    margin-top: 0px;    
    line-height: 100%;
}
}
@media only screen and (max-width: 680px) {
  #content td {
    display: block;	
	width: 100% !important;
  }
  #content td input[type=text], #content td textarea, #content td select { display:block; width: 90% !important; clear:left; }
  #content td input.date_month,
  #content td input.date_day,
  #content td input.date_year { display:inline; width:15% !important;}
}
canvas {
  display: block;
  vertical-align: bottom;
}
/* ---- particles.js container ---- */
#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #0b3a64;
  top: 0;
}

.nav-tree > ul {
    padding: 0px;
}