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

.full {
    background: rgba(0, 0, 0, 0) url("../images/bg-2000-800.jpg") no-repeat fixed center center / cover ;
}



body{
	padding-bottom:0!important;
	background:none;
	font-family: 'Perpetua Titling MT Light';
	font-style: normal;
	font-weight: 400;
	}
	
	/*styles 17 aug 2016*/
	
	.txt-ylw1{
		font-size:13px!important;
		color:#000!important;
		text-align:left;
	}
	
	
	.blk-btn{
	   border: 0 none;
    border-radius: 0;
    bottom: 0;
    font-family: tahoma;
    font-size: 16px;
    font-weight: normal;
    padding: 0.4em 0.8em;
    position: absolute;
    right: 0;
	color:#31b5e9;
	 outline: none; 
	 transition: all 0.5s ease 0s;
	 -moz-transition: all 0.5s ease 0s;
	-webkit-transition: all 0.5s ease 0s;
	-o-transition: all 0.5s ease 0s;
		
	}
	
	
		.blk-btn2a{
	   border: 0 none;
    border-radius: 0;
    bottom: auto;
    font-family: tahoma;
    font-size: 16px;
    font-weight: normal;
    padding: 0.4em 0.8em;
    position: absolute;
    right: 0;
	top:0;
	color:#31b5e9;
	 outline: none; 
	 transition: all 0.5s ease 0s;
	 -moz-transition: all 0.5s ease 0s;
	-webkit-transition: all 0.5s ease 0s;
	-o-transition: all 0.5s ease 0s;
		
	}
	
	
	
	.btn.focus,
	.btn:focus,
	.btn:hover{
		outline: none; 
		color:#31b5e9;
		background:#333;
		padding: 0.6em 1.2em;
		font-size: 22px;
	}
	.btn-default.active:focus{
		outline: none; 
	}
	
	a{
		transition: all 0.5s ease 0s;
		-moz-transition: all 0.5s ease 0s;
		-webkit-transition: all 0.5s ease 0s;
		-o-transition: all 0.5s ease 0s;
		text-decoration:none!important;

	}
	
	
	/*Side nav*/
	.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 3;
    top: 0;
    left: 0;
    background-color: #fff;
	/*box-shadow: 1px 2px 5px 3px #464545;*/
	box-shadow: 0px 4px 5px 1px #464545;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
	overflow-y:hidden;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    /*font-size: 25px;*/
    color: #818181;
    display: block;
    transition: 0.3s;
	text-transform: uppercase;
	border-bottom: 1px solid #dfddde;
	font-size: 14px;
}

.sidenav a:hover, .offcanvas a:focus{
    color: #fff;
	background-color:#faa51a;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 37px;
    margin-left: 50px;
	border: none;
	 font-family: tahoma;
	 padding:0;
	 
}

.sidenav .closebtn:hover {
	/*background:#fff;*/
	background:transparent;
}

#main {
    transition: margin-left .5s;
    padding: 16px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {/*font-size: 18px*/ font-size: 15px;;}
}
	/*side nav*/
	
	

/*styles 17 aug 2016*/




/*Home page blocks*/

.screenshots ul {
    margin: 0;
    padding: 0;
    width: 100%;
}
.screenshots ul li {
    float: left;
    min-height: 100%;
    width: 25%;
    background-color: #000;
    list-style: none;
}
.screenshots figure {
    position: relative;
    overflow: hidden;
	-webkit-overflow: hidden;
}
.screenshots figure img {
    width: 100%;
    height: 100%;
    -webkit-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
.screenshots figure:hover img, .screenshots figure:focus img {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}
.screenshots figcaption {
    position: absolute;
    top: 0;
    left: 0;
    padding: 25% 0;
    width: 100%;
    height: 100%;
    background-color: rgba(63, 97, 132, 0.85);
    text-align: center;
    font-size: 15px;
    opacity: 0;
    -webkit-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}

.large-blk{
		width:50% !important;
	}


.screenshots figcaption a {
    color: #fff
}
.screenshots figcaption a:hover, .screenshots figcaption a:focus {
    color: #333;
}
.screenshots figure:hover figcaption, .screenshots figure:focus figcaption {
    opacity: 1;
	background-color:#faa51a;
}
.visible {
    opacity: 1
}
.screenshots figure.cs-hover figcaption {
    opacity: 1
}
.screenshots figcaption i {
    /*font-size: 35px*/
	
	   color: #fff;
    float: right;
    font-size: 27px;
    margin-top: 29px;
    text-align: left;
}
.screenshots figcaption p {
    margin-bottom: 0;
    text-transform: uppercase;
    font-weight: 400;
	font-size: 32px;
	color:#fff;
	text-align: left;
}
.screenshots figcaption .caption-content {
    position: absolute;
    top: 50%;
    left: 50%;
    /*margin-top: -110px;*/
	margin-top: -81px;
    margin-left: -100px;
    width: 200px;
    -webkit-transform: translate(0px, 15px);
    -ms-transform: translate(0px, 15px);
    transform: translate(0px, 15px);
    -webkit-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
.screenshots figure:hover figcaption .caption-content, .screenshots figure:focus figcaption .caption-content {
    -webkit-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
}

/*Home page blocks*/





/*inside page banner*/
.inbanner1 {
    list-style: outside none none;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
    /*top: 6em;*/
    width: 100%;
    z-index: 0;
}

.inbanner1 img{
	width:100%;
	max-width:100%;
	height:auto;
}


.inbanner1 .t_right {
    text-align: right;
}
.inbanner1 .title_header {
    color: #fff;
    opacity: 0.9;
    position: absolute;
    right: 0%;
    /*top: 50%;*/
	bottom:0;
	
    width: 34%;
}

.inbanner1 .title_header h1 {
    background: #333333 none repeat scroll 0 0;
    color: #fff;
    font-size: 16px;
    font-weight: normal;
    letter-spacing: 1px;
    line-height: 24px;
    overflow: hidden;
    padding: 4% 5%;
    text-align: left;
    text-transform: uppercase;
	margin:0;
	border-left: 5px solid #faa51a;
	top: -8em;
    position: relative;
}

.mob-banner-inside{
	display:none;
}

.dis-bn{
	display:block;
}

.red-titleh2{
	color:#faa51a;
		font-size:19px;
	text-transform:uppercase;
	font-weight:normal;
}


.red-titleh1a{
	color:#333;
	font-size:25px;
	text-transform:uppercase;
	font-weight:normal;
}

.p-class-landing{
	color:#565a5d;
	font-size:17px;
}

.gry-clr{
	color:#9a9a9a;
	font-weight:normal;
}

p{
	font-size:15px;
}


/*loading*/
/* Center the loader */
#loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border: 10px solid #c0bebe;
  border-radius: 50%;
  border-top: 10px solid #faa51a;
  width: 85px;
  height: 85px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 } 
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}

#myDiv {
  display: block;
  /*text-align: center;*/
}
/*loading*/

/*inside page banner*/



/*title*/

.gray-clr1{
	background-color:#e5e5e5;
		margin-bottom:0;
	padding-bottom: 0;
    padding-top: 0;
	box-shadow: 2px 1px 8px -3px #818181;
	
}

.redclr-title1{
	color:#faa51a!important;
	font-size:40px!important;
	font-weight:normal;
	text-transform:uppercase;
	margin-bottom: 0;
	margin-top: 0.3em;

}

.breadcrumb {
	margin-bottom: 0.4em;
}


.breadcrumb {background: none; border:none; border-radius: 4px; display: block;	padding-left: 0.5em;}
.breadcrumb li {font-size: 14px;}
.breadcrumb a {color: rgba(66, 139, 202, 1);}
.breadcrumb a:hover {color: rgba(42, 100, 150, 1);}
.breadcrumb>.active {color: rgba(153, 153, 153, 1);}
.breadcrumb>li+li:before {color: rgba(204, 204, 204, 1); content: "\002F\00a0";}


	.push5padding{
	
}

.btm-spc1{
	margin-bottom:3em;
}

.cmn-spc1{
	margin:1.6em 0 1.6em -12px;
	border-bottom:1px solid #d9d9d9;
}

.tbl-btn-red {
    background-color: #df242b;
    border-color: #c20a16;
    border-radius: 0;
    color: #fff;
    font-size: 0.9em;
    outline: medium none;
    padding: 7px 15px;
    text-transform: uppercase;
    transition: all 0.5s ease 0s;
}

.tbl-btn-red-cmn {
    background-color: #df242b;
    border-color: #c20a16;
    border-radius: 0;
    color: #fff;
    font-size: 0.8em;
	letter-spacing: 1px;
    outline: medium none;
    padding: 4px 10px;
    text-transform: uppercase;
    transition: all 0.5s ease 0s;
}

.tbl-btn-red-cmn:hover, .tbl-btn-red-cmn.focus, .tbl-btn-red-cmn:focus  {
	background:#333;
	padding: 4px 10px;
	font-size: 0.8em;
	letter-spacing: 1px;
	
	}

.space-horz{
	margin-right:1em;
	}
	
	.fa-icon-color{
		color: #a1a1a1;
	}


.logo-inside1{
    /*background-color: #fff;*/
    left: 5em;
    position: absolute;
    top: 3em;;
	opacity: 0.8;
}

.zx1{
	z-index:1;
}

/*Sticky bar */
 .affix {
      top: 0;
      width: 100%;
  }

  .affix + .container-fluid {
      padding-top: 70px;
  }

/*Sticky bar*/


/* DEMO-SPECIFIC STYLES */
.typewriter{
	display:block;
}

.typewriter h1 {
  color: #fff;
  font-family: monospace;
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid orange; /* The typwriter cursor */
  white-space:normal; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  animation: typing 3.5s steps(30, end),
    blink-caret .5s step-end infinite;
  font-size: 1.7em;
  position:absolute; 
  z-index:1; 
  top: 50%; 
  left: 9%; 
  text-transform:uppercase;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange }
}





/*Medias Query*/

@media only screen and (max-width: 550px) {
	.sidenav {
 
	overflow-y:auto;
}


.mob-banner-inside{
	
	display:block;
	   list-style: outside none none;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
    /*top: 6em;*/
    width: 100%;
    z-index: 0;
}


.logo-inside1-mob1{
    left: 3.2em;
    opacity: 0.8;
    position: absolute;
    top: 1em;
    width: 50%;
}


.mob-banner-inside .t_right {
    text-align: right;
}
.mob-banner-inside .title_header {
    color: #fff;
    margin-top: -5em;
    opacity: 0.7;
    position: relative;
    right: 0%;
    /*top: 50%;*/
	bottom:0;
    width: 100%;
}

.mob-banner-inside .title_header h1 {
    background: #333333 none repeat scroll 0 0;
    color: #fcbe74;
    font-size: 17px;
    font-weight: normal;
    letter-spacing: 0;
    line-height: 24px;
    overflow: hidden;
    padding: 4% 5%;
    text-align: center;
    text-transform: uppercase;
	margin:0;
}

.mob-banner-inside img{
	width:100%;
	max-width:100%;
	height:auto;
}



.dis-bn{
	display:block;
}


.inbanner1 {
	display:none;
	
}




}



.video1 {
position: relative;
}



@media only screen and (max-width: 501px) {
.video1 {
left: -78%;
width: auto;
height: 45em;
position: relative;
}

.typewriter h1 {
	top: 16em;
	left: 3.5em;
	font-size: 1.1em;
}

}


@media only screen and (max-width: 650px) {
.video1 {
left: -78%;
width: auto;
height: 45em;
position: relative;
}

.video2b {
left: -31%;
width: auto;
height: 45em;
position: relative;
}

.typewriter h1 {
	top: 16em;
	left: 3.5em;
	font-size: 1.1em;
}

}




@media only screen and (max-width: 860px) {
	.large-blk{
		width:100% !important;
	}


}


@media only screen and (max-width: 450px) {
	.mob-banner-inside .title_header {
		
		
	}
	
	.mob-banner-inside .title_header h1 {
		text-align:right;
		font-size: 14px;
	}

}


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


}


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

	

}


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

	

}


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


}

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

}


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

	.push5padding{
	padding-left: 7em;
}

}


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

	.push5padding{
	padding-left:0;
}

}


@media only screen and (max-width: 1002px) {
	
		.img-resp {
			width:100%;
	
}

	.img-resp img{	
}

}


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

	.pad-1262{
	padding-left:5.3em;
}

}

@media screen and (-webkit-min-device-pixel-ratio:0) {      
/* Safari and Chrome, if Chrome rule needed */     
.someClass {      
color:#c00;     
}     

/* Safari 5+ ONLY */     
::i-block-chrome, .someClass {      
color:#000;     
}

.screenshots figure img {
    width: 100%;
    height: 100%;
    -webkit-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}

.screenshots ul li {
    float: left;
    min-height: 100%;
    width: 25%;
    background-color: #000;
    list-style: none;
}



}

@media screen and (-webkit-min-device-pixel-ratio:0) { 
.someElement {
margin:1em
} 
}

_:-webkit-full-screen:not(:root:root), .screenshots figure img {
{
       width: 100%;
    height: 100%;
    -webkit-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;



   
   
    /*
      Define here the CSS styles applied only to the Safari 9 version when
      not running in iOS devices (iPhone, iPad, ...)
     */
}


_:-webkit-full-screen:not(:root:root), .screenshots ul li {
    float: left;
    min-height: 100%;
    width: 25%;
    background-color: #000;
    list-style: none;
}

/*Medias Query*/