@import 'https://fonts.googleapis.com/css?family=Open+Sans';
@import url('https://fonts.googleapis.com/css?family=PT+Sans');

/*=============Main Styles===============*/
html * {font-family: 'PT Sans';} /*Declear global font*/

head{
}
#container{
	min-height: 100%;
	position: relative;
}
header { 
	margin:0;
	/*margin-top:  45px; /*This is used to put space between the TopNnav bar and the header*/
	width: 100%;
 	height: 70px;
 	/*position:absolute;*/
 	top: 0;
 	left: 0;
	right: 0;
 	z-index: 100;
	background: #FFFFFF;
	/*margin-left: 20%;*/
	text-align: center;
	display: inline-block;
}
html, body{
	margin: 0;
	padding: 0;
	height: 100%;
}
h22{
	font-weight: 700;
	font-size: 20px;
}

h23{
	font-weight: 700;
}
body{
	
/*	height: 600px;*/
	color: black;
	/*background: #282828;*/
	/*====Footer Fix====*/
	/*padding-bottom: 186px; /*This is used to put space between document and footer*/
	/*----Footer Fix-----*/
}
.btn_collapse{
	display: inline-block;
	text-align: left;
}
#bottom{
	position: absolute;/**/

	bottom: 0;
	/*left: 0;*/
	/*padding-bottom: 20px;*/
	width: 100%;
	height: 180px; /*Height of the Footer+Partners*/
	clear: both;
	
	
}
footer {
	width: 100%;
	color: white;
	background-color: #111111;
    /*height: 80px;*===========================/
	/*border: 1px solid #FFFFFF;*/
	text-align: center;
	display: inline-block;
	font-weight: 700;
}
.footerfix{
	/*---------Assing this class to content wrapper on each page----------------*/  
	/*====Footer Fix====*/
	padding-bottom: 180px; /*This is used to put space between document and footer*/
	/*----Footer Fix-----*/
}
.footercontent{	
	padding : 30px;
}
#partners{
	width: 100%;
	text-align: center;
	/*==Light Grey Border Box==*/
	border: 1px solid #E8E8E8;
	border-left: hidden;
	border-right: hidden;
	border-bottom: hidden;
	box-sizing: border-box;
	/*-------------------------*/
	font-size: 20px;
	background-color: white;
	padding: 10px;
}
.partners_img{
	display: inline-block;
	padding-left: 3%;
	padding-right: 3%;
	vertical-align: middle;
}

ul {
 list-style: none;
 padding: 10px;
}

li {
 display: inline-block;
 float: left;
 padding: 12px
}

a {
 color:coral;
 text-decoration: none;
}

a:hover {
	text-decoration: underline;
	/*border: 1px solid #ff7302;
	border-radius: 5px;*/
	color: #000000;
	font-variant: normal;
}

/*==Slider Nav==*/
#slide_nav{
	/*==Light Grey Border Box==*/
	border: 1px solid #E8E8E8;
	border-left: hidden;
	border-right: hidden;
	border-bottom: hidden;
	box-sizing: border-box;
	/*-------------------------*/
}
	ul2 {
	 list-style: none;
	 
		
	}

	li2 {
	 display: inline-block;
	 padding-top: 15px;
	 padding-bottom: 10px;
		/*==Light Grey Border Box==*/
	border: 1px solid #E8E8E8;
	border-top: hidden;
	border-left: hidden;
	border-bottom: hidden;
	box-sizing: border-box;
		
	/*-------------------------*/
	}
	li3 {
	 	display: inline-block;
	}
/*=======Contact List Items============*/
	li4 {
	 display: inline-block;
	 padding-top: 15px;
	 padding-right: 20px;
	 padding-left: 20px;
		/*==Light Grey Border Box==*/
	border: 1px solid #E8E8E8;
	border-top: hidden;
	border-left: hidden;
	border-bottom: hidden;
	box-sizing: border-box;
	/*-------------------------*/
	}
	li5 {
	 display: inline-block;
	 padding-top: 15px;
	 padding-right: 20px;
	 padding-left: 20px;
		/*==Light Grey Border Box==*/
	box-sizing: border-box;
	/*-------------------------*/
	}
/*-------Contact list items end--------------*/
	.a2 {
	 color:black;
	 text-decoration: none;
	 font-size: 19px;
	 display: block;
}

	.a2:hover {
		text-decoration: underline;
		/*border: 1px solid #ff7302;
		border-radius: 5px;*/
		color: #000000;
		font-variant: normal;
	}
/*-----------------------------*/
.active {
 	color:white;
 	text-decoration: none;
	background: coral;
	padding: 5px;
	border-radius: 5px;
}

.active:hover {
	text-decoration: underline;
	/*border: 1px solid #ff7302;
	border-radius: 5px;*/
	color:white;
}

#logo {
 /*margin: 20px;/*===here===*/
 /*float: left;===here===*/
	width: 350px;
	height: 77px;
 background: url(images/logo.png) no-repeat center;
 /*background-size: 269px 77px;*/
background-size: 100%;
 display: inline-block;
 padding-top: 30px;
 margin-right: 70px;/*====Put space at the right of logo====*/
	
}
navtop {
	float: right;
	margin-right: 10%;
	margin: 10px;
}
nav {
	display: inline-block;
	font-size: 17px;
	color: #ff7302;
	/*float: left;===here===*/
	padding-left: 5px;
}
.banner{
	
	color: #000000;
	font-size: 22px;
	font-weight: 500;
	text-align: center;
	padding-top: 40px;
}

	#menu-icon {
		/*margin-top: 10%;/*This is used to align the menu icon relative to the logo distance from the top*/
	 	background: url(images/menu-icon.png) no-repeat center;
	 	display: hidden;
	 	width: 32px;
	 	height: 32px;
	}

.test1{
	float: left;
}
.test2{
	float: right;
	padding: 5px
}
.hover_img: {
	
	display: inline-block;
	
}

.hover_img:hover {
	
	display: inline-block;
	opacity: 0.5;
	
}

#content_container{
	
	width: 100%;
/* 	height: 100%;====================================================*/
 	/*position:absolute;*/
 	z-index: 100;
	/*margin-left: 20%;*/
	text-align: center;
	display: inline-block;
}
.content{
	width: 589px;
	display: inline-block;
	vertical-align:top;
	/*==Light Grey Border Box==*/
	border: 1px solid #E8E8E8;
	border-left: hidden;
	border-right: hidden;
	border-bottom: hidden;
	box-sizing: border-box;
	/*-------------------------*/
/*	float: left;
	padding-right: 20px;
	padding-left: 22%;
====HERE====*/
	  
}
#content_right{
	display: inline-block;
}
.content_services_right{
	display: inline-block;
}
#mobile_content{
	display: none;
	text-align: center;	
}
#content_about{
	width: 589px;
	display: inline-block;
	vertical-align:top;
	/*==Light Grey Border Box==*/
	border: 1px solid #E8E8E8;
	border-left: hidden;
	border-right: hidden;
	box-sizing: border-box;
	/*-------------------------*/  
}
#content_comingsoon{
	width: 589px;
	display: inline-block;
	vertical-align:top;
	/*==Light Grey Border Box==*/
	border: 1px solid #E8E8E8;
	border-left: hidden;
	border-right: hidden;
	box-sizing: border-box;
	
}
/*=================Content_Services=================*/
	.content_services{
			width: 389px;
			display:inline-block;
			text-align: left;
			vertical-align:top;
		padding-left: 10px;
		padding-right: 10px;
		padding-bottom: 20px;

		}
	.content_services2{
		width: 970px;
		vertical-align:top;
		text-align: left;
		display: inline-block;
		padding: 15px;
		/*==Light Grey Border Box==*/
		border: 1px solid #E8E8E8;
		border-right: hidden;
		border-left: hidden;
		box-sizing: border-box;
		/*-------------------------*/ 
		padding-left: 10px;
		padding-right: 10px;
		padding-bottom: 20px;
	}
/*-----------------Content_Services_End-------------*/

/*=================Content_Standard Start==================*/
	.content_standard{
		width: 889px;
		display:inline-block;
		text-align: left;
		vertical-align:top;
		/*==Light Grey Border Box==*/
		border: 1px solid #E8E8E8;
		border-left: hidden;
		border-right: hidden;
		box-sizing: border-box;
		/*-------------------------*/ 
}
/*-------------Content Standard End-----------------------*/

/*=================Content_Contact==================*/
	#content_contact{
		width: 870px;
		display:inline-block;
		text-align: left;
		vertical-align:top;
		/*==Light Grey Border Box==*/
		border: 1px solid #E8E8E8;
		border-left: hidden;
		border-right: hidden;
		box-sizing: border-box;
		/*-------------------------*/  
	}
	#content_contact2{
		
		vertical-align:top;
		/*==Light Grey Border Box==*/
		border: 1px solid #E8E8E8;
		border-right: hidden;
		border-left: hidden;
		border-top: hidden;
		border-bottom: hidden;
		box-sizing: border-box;
		/*-------------------------*/ 
	}
.table_contact{
	text-align: justify;
	vertical-align: text-top;
}
.table_contact td{
	padding: 5px; 
	vertical-align: top;
	/*==Light Grey Border Box==*/
	border: 1px solid #E8E8E8;
	border-left: none;
	border-right:none;
	border-bottom:none;
	box-sizing: border-box;
	/*-------------------------*/ 
}
/*-------------Content Contact End-----------------------*/

#TE{
    border: 1px solid black;
    border-collapse: collapse;
	border-top: none;
	border-bottom: none;
}
.spacer{
	width: 100%;
	height: 50px;
	display: inline-block;
}
.spacer2{
	width: 100%;
	height: 0px;
	display: inline-block;
}
.spacer_footer{
	width: 100%;
	height: 50px;
	display: inline-block;
	
}

/*-------------------Main Style End----------------------------*/

/*=================Image Slider=========================*/
/*
Code responsible for the image slider on the home page.
*/
@keyframes slider{

0% {
	left: 0;
}

20% {
	left: 0;
}

25% {
	left: -100%;
}

45% {
    left: -100%;

}

50% {
		left: -200%;

}

70% {
	left: -200%;
}

75% {
	left: -300%;
}

95% {
	left: -300%;
}

100% {
	left: -400%;

}

}

#slider {
	overflow: hidden;
}

#slider figure img {
	width: 20%;
	float: left;
	padding-top: 25px;
	
}

#slider figure {
	position: relative;
	width: 500%;
	margin: 0;
	left: 0;
	text-align: left;
	font-size: 0;
	animation: 40s slider infinite; 
}

/*-------------------------Image Slider End-------------------------*/

/*====================Manual Image Slider ==========================*/
	.slider-holder
        {
            /*width: 589px;
            height: 180px;*/
/*            background-color: yellow;*/
            margin-left: auto;
            margin-right: auto;
            margin-top: 0px;
            text-align: center;
            overflow: hidden;
			padding-top: 25px;
        }

        .image-holder
        {
            width: 2356px;
            background-color: red;
/*            height: 360px;*/
            clear: both;
            position: relative;
            -webkit-transition: left 2s;
            -moz-transition: left 2s;
            -o-transition: left 2s;
            transition: left 2s;
        }

		#slider-holder #image-holder {
			position: relative;
			width: 400%;
			margin: 0;

			text-align: left;
		}

		#slider-holder #image-holder img{
			width:25%;
		}
        
        .slider-image
        {
			/*width: 589px;*/
            float: left;
            margin: 0px;
            padding: 0px;
            position: relative;
        }
        
        #slider-image-1:target ~ .image-holder
        {
            left: 0px;
        }
        
        #slider-image-2:target ~ .image-holder
        {
            left: -100%;
        }
        
        #slider-image-3:target ~ .image-holder
        {
            left: -200%;
        }
		#slider-image-4:target ~ .image-holder
        {
            left: -300%;
        }
        
        .button-holder
        {
            position: relative;
            top: -20px;
        }
        
        .slider-change
        {
            display: inline-block;
            height: 10px;
            width: 10px;
            border-radius: 5px;
            background-color: brown;
        }
/*-------------------Manual Image Slider End------------------------*/


/*
===========================MEDIA QUERY===========================
Used to resize menu for mobile sites
*/

@media only screen and (max-width : 640px) {
	header {
		 width: 100%;
		 position: absolute;
		 text-align: left;
		 padding-top: 10px;
		 margin-top:  45px; /*This is used to put space between the TopNnav bar and the header*/
	 }
	.footerfix{
		/*-------------------------*/  
	/*====Footer Fix====*/
	padding-bottom: 0px; /*This is used to undo footer fix in mobile*/
	/*----Footer Fix-----*/
	}
	#bottom{
		/*height: 0px; /*Used to put space between content and footer in mobile view*/
		position: relative;
	}
	#logo{
		margin-left: 15px; /*Place left space on logo, used here and not on header tag becuase it was causing horrizontal scroll bar on header tag*/
	}
	 #menu-icon {
	 	display:inline-block;
		position: absolute;
		top: 15px; /*Vertically ALign Hamburger Menu*/
		left: 300px; /*Horrizontally Align Hamburger Menu*/
	 }

	.banner{
		display:none;
	}
	navtop{
	/*	float: right;/*Left Align*/
		margin-right: 0%;
	}
	 nav ul, nav:active ul { 
	 display: none;
	 width: 160px; /*width of mobile nav menu*/
	 left: 170px; /*Horrizontally Align mobile menu relative to hamburger*/
	 top: 45px;/*Vertically Align menu relative to hamburger icon*/
	 position: absolute;
	 padding: 10px;
	 
	 background:white;
	border: 1px solid #ff7302;
	 }

	 nav:hover ul {
	 display: block;
	 }

	 nav li {
	 text-align: center;
	 width: 100%;
	 padding: 5px 0;
	 margin: 0;
	 }
	.spacer{
		height: 100px;
	}

	.content{
		padding-left: 0%;
		width: 100%;
	}	
	.slider-holder{
		
	}
	#slide_nav{
	
	}
	li2 a img{
		width: 100%;
	}
	li3 a img{
		width: 100%;
	}
	li2, li3 {
		width: 24%;
	}
	.a2{
		font-size: 15px;
	}
	#content_right{
		display: none;
	}
	.content_services_right img{
		width: 100%;
	}
	#mobile_content{
		display: inline-block;
	}
		#mobile_content img{
		width: 100%;
	}
	/*=====Resize the contents of all web pages to 100% when in mobile view=====*/
		#content_comingsoon{width: 100%;}
		#content_about{width: 100%;}
		.content_services{width: 100%;}
		.content_services2{width: 100%;}
		#content_backup{width: 100%;}
		#content_products{width: 100%;}
		#content_support{width: 100%;}
		#content_contact{width: 100%;}
		#content_contact2{width: 100%;}
		.content_standard{width: 100%;}
		
		/*-----------------------------------------------*/
/*==========Shrink Footer Content=============*/


	.partners_img{
		padding-left: 5px;
		padding-right: 5px;
		display: inline;
	}


	#partners{

		font-size: 20px;
		background-color: white;
		padding: 10px;
	}
	#partners div img{
		height: 20%;
		width: 20%;
		vertical-align: middle;
	}
	body{
		
	/*	padding-bottom: 380px; /*Put Space between content and footer*/
		min-height: 100%;
	}
	.footercontent{	
		padding: 20px;
	}
	footer{
		height: 70px;
	}

/*------------Shrink Footer Content------------*/
}
/*---------MEDIA QUERY END---------*/
/*
	====Media Query  2=================================
Used to adjust layout on window shrinking.
*/
@media only screen and (max-width : 1045px) and (min-width : 650px) {
	#content_right{
		display: none;
	}
	#mobile_content{	
		display: inline-block;
	}
	body{
		padding-bottom: 500px; /*Used to put space between body and footer*/
		
	}
	.footerfix{
		/*-------------------------*/  
	/*====Footer Fix====*/
	padding-bottom: 0px; /*This is used to undo footer fix in mobile*/
	/*----Footer Fix-----*/
	}
	/*=====Resize the contents of all web pages to 100% when in mobile view=====*/
		#content_comingsoon{width: 100%;}
		#content_about{width: 100%;}
		.content_services{width: 100%;}
		.content_services2{width: 100%;}
		#content_backup{width: 100%;}
		#content_products{width: 100%;}
		#content_support{width: 100%;}
		#content_contact{width: 100%;}
		#content_contact2{width: 100%;}
		.content_standard{width: 100%;}
		
		/*-----------------------------------------------*/
	/*==========Shrink Footer Content=============*/


	.partners_img{
		padding-left: 5px;
		padding-right: 5px;
		display: inline;
	}

	#partners{
		font-size: 20px;
		background-color: white;
		padding: 10px;
	}
	#partners div img{
		height: 13%;
		width: 13%;
		vertical-align: middle;
	}
	body{
		
	}
	#bottom{
		
		position: relative;
	}
	.footercontent{	
		padding: 20px;
	}
	footer{
		height: 70px;
	}
/*------------Shrink Footer Content------------*/
}
/*-------Meida Query 2---------------*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
	body{
		
	}

}