
body {
	font-family: 'Roboto', sans-serif;
}
a{
	text-decoration:none;
	color:inherit;
	
	-webkit-transition: all .35s ease-in-out;
       -moz-transition: all .35s ease-in-out;
        -ms-transition: all .35s ease-in-out;
         -o-transition: all .35s ease-in-out;
            transition: all .35s ease-in-out;
}
img{
	width:100%;
	height:100%;
}


.active{
	font-weight:bold;
}


.button {
     margin-top: 14px; padding: 9px 44px; vertical-align: middle;
    float: right;font-size:19pt;
}
 
.myForm{margin-left:60px;margin-top:50px;}
.myForm label,
.myForm input{
	font:22px 'Alef',arial, sans-serif;
}

.sticky-button {
	position: fixed;
	top: 50%;
	right: 0;
	z-index: 100;
	display: flex;
	flex-direction: column;
	row-gap: 6px;
	align-items: flex-end;
}

	.sticky-button .sticky-button-item {
		background: #e91e1e;
		color: white;
		text-align: center;
		padding: 10px;
		border-radius: 5px 0 0 5px;
		box-sizing: border-box;
/*		margin: auto;*/
	
		}


#header-wrapper{
	width:1024px;
	/* padding:2px 10px 10px 10px;  */
	padding-top:6px;
	padding-bottom:0px;
	 margin: auto ;
	overflow:hidden;
	border-bottom:2px solid black;
	height:60px;
	
}


#header-wrapper img{
		 
	float:left;	
	height:50px;
	padding-top:10px;
	width:auto;
}

 

#header-wrapper h4{

	color:#666;	 
	float:left;	
	margin-left:200px;
	font-size: 1.2em;
	font-family: ProximaNovaLight,Arial,sans-serif;
	 
}
 
 /* 
#header-wrapper h2{
	color:#666;	 
	float:left;	
	margin-left:200px;
	font-size: 1.2em;
	font-family: ProximaNovaLight,Arial,sans-serif;
	 
} */
 
/*-------------------- Slider's Coding Starts From Here --------------------*/

label{
	cursor:pointer;
}

div#sliderContainer{
	overflow:hidden;
	background-color:black;
	height:450px;
	margin:10px auto;
}
div#sliderContainer:hover #lblContainer{
	bottom:80px;
	visibility:visible;
	opacity:1;
	
	-webkit-transition: all .35s ease-in-out;
       -moz-transition: all .35s ease-in-out;
        -ms-transition: all .35s ease-in-out;
         -o-transition: all .35s ease-in-out;
            transition: all .35s ease--in-out;
	
}

div#sliderContainer:hover .imgContainer label{
	visibility:visible;
	opacity:1;

	
	-webkit-transition: all .5s ease-in-out;
       -moz-transition: all .5s ease-in-out;
        -ms-transition: all .5s ease-in-out;
         -o-transition: all .5s ease-in-out;
            transition: all .5s ease-in-out;
}

div#sliderContainer:hover .imgContainer label:first-of-type{right:4%;}
div#sliderContainer:hover .imgContainer label:last-of-type{left:4%;}

#lblContainer{
	background-color: rgba(0,0,0,.3);
	padding: 10px;
	overflow: hidden;
	width: 175px;
	
	position:relative;
	z-index:2;
	bottom:10px; left:45.5%;
	
	border-radius:10px;
	opacity:0;
	visibility:hidden;
	
			
	-webkit-transition: all .35s ease-in-out 1s;
       -moz-transition: all .35s ease-in-out 1s;
        -ms-transition: all .35s ease-in-out 1s;
         -o-transition: all .35s ease-in-out 1s;
            transition: all .35s ease--in-out 1s
	
}

input[type="radio"]{	
	display:none;	
}

#lblContainer label{
	display:block;
	background: url(../../Assets/Img/icon/r1.png) no-repeat center;
	background-size: 90% 90%;
	width:30px;
	height:30px;
	float:left;
	opacity:0.6;
	margin:2px;
	
	-webkit-transition: all .35s ease-in-out;
       -moz-transition: all .35s ease-in-out;
        -ms-transition: all .35s ease-in-out;
         -o-transition: all .35s ease-in-out;
            transition: all .35s ease-in-out;
}
#lblContainer label:hover{
	background: url(../../Assets/Img/icon/r2.png) no-repeat top ;
	background-size: 80% 80%;
	
}


div#slides{
	width:500%;	
	
	-webkit-transition: all .5s ease-in-out;
       -moz-transition: all .5s ease-in-out;
        -ms-transition: all .5s ease-in-out;
         -o-transition: all .5s ease-in-out;
            transition: all .5s ease-in-out;
}
/*slides*/
div#slides .inner{
	width:20%;
	float:left;
	display: table;
	height: 100%;
}
.inner .imgContainer{
	position:relative;
	margin:auto;
	display: table-cell;
    vertical-align: middle;
	text-align: center;	
}
.imgContainer .info{
	position:absolute;
	top: 10%; left: 15%;
	width:350px;
	padding:20px;
	font: 22px verdana;
	border-radius:20px;
	height: auto;
font-size: 28px;
color: white;
margin: 0 0 5px;
font-weight: normal;
font-family: georgia;
font-style: normal;
	overflow:hidden;
	background-color:rgba(0,0,0,.2);
	color:white;
	
	opacity:1; visibility:visible;
	
	box-shadow:0 0 40px 10px rgba(255,255,255,.5);
	
	-webkit-transition: opacity .8s .5s ease-in-out;
       -moz-transition: opacity .8s .5s ease-in-out;
        -ms-transition: opacity .8 .5s ease-in-out;
         -o-transition: opacity .8s .5s ease-in-out;
            transition: opacity .8s .5s ease-in-out;
}

.inner .imgContainer img{
	height:100%;
}
.imgContainer label{
	display:block;
	width:100px;
	height: 100%;
	
	opacity:0;
	visibility:hidden;
	
	-webkit-transition: all .5s ease-in-out 1s;
       -moz-transition: all .5s ease-in-out 1s;
        -ms-transition: all .5s ease-in-out 1s;
         -o-transition: all .5s ease-in-out 1s;
            transition: all .5s ease-in-out 1s;
}

.imgContainer label:first-of-type{
	background: rgba(0,0,0,.5) url(../../Assets/img/icon/next.png) no-repeat center;
	position:absolute;
	right:0;
}

.imgContainer label:last-of-type{
	background: rgba(0,0,0,.5) url(../../Assets/img/icon/prev.png) no-repeat center;	
	position:absolute;
	left:0;
}


/*-------------------- Slider's Working Starts From Here --------------------*/


#r1:checked ~ #lblContainer #l1{ background: url(../../Assets/img/icon/r2.png) no-repeat top ; opacity:1; background-size: 100% 100%;}
#r2:checked ~ #lblContainer #l2{ background: url(../../Assets/img/icon/r2.png) no-repeat top ; opacity:1; background-size: 100% 100%}
#r3:checked ~ #lblContainer #l3{ background: url(../../Assets/img/icon/r2.png) no-repeat top ; opacity:1; background-size: 100% 100%}
#r4:checked ~ #lblContainer #l4{ background: url(../../Assets/img/icon/r2.png) no-repeat top ; opacity:1; background-size: 100% 100%}
#r5:checked ~ #lblContainer #l5{ background: url(../../Assets/img/icon/r2.png) no-repeat top ; opacity:1; background-size: 100% 100%}




#r1:checked ~ #slides{ margin-left:-0%}
#r2:checked ~ #slides{ margin-left:-100%}
#r3:checked ~ #slides{ margin-left:-200%}
#r4:checked ~ #slides{ margin-left:-300%}
#r5:checked ~ #slides{ margin-left:-400%}

#r1:checked ~ #slides .inner .imgContainer .info:not(#info1){ opacity:0; visibility:hidden; background:red;}
#r2:checked ~ #slides .inner .imgContainer .info:not(#info2){ opacity:0; visibility:hidden; background:red;}
#r3:checked ~ #slides .inner .imgContainer .info:not(#info3){ opacity:0; visibility:hidden; background:red;}
#r4:checked ~ #slides .inner .imgContainer .info:not(#info4){ opacity:0; visibility:hidden; background:red;}
#r5:checked ~ #slides .inner .imgContainer .info:not(#info5){ opacity:0; visibility:hidden; background:red;}

/*<><><><><><><><><><><><><><> Slider's Coding Ends Here <><><><><><><><><><><><><><>*/



#gridButton-wrapper{
	height:52px;
	width:1024px;
	margin:auto;
	/*background-color:yellow;
	  border: 3px solid pink;*/ 
}
.tabs{
    height:52px;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	/*display: flex;*/
    border:1px solid black;
}
#tab li{
	height:100%;
	border:1px solid #bbb;
	position:relative;
	float:left;
	
	cursor:pointer;
	
	flex:1 auto;
	
	/* border:1px solid red; */	
	
	background: #fdfdfd;
	background: -moz-linear-gradient(top,rgba(253,253,253,1) 0,rgba(220,220,220,1) 100%);
	/* background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(253,253,253,1)),color-stop(100%,rgba(220,220,220,1))); */
	/* background: -webkit-linear-gradient(top,rgba(253,253,253,1) 0,rgba(220,220,220,1) 100%); */
	background: -o-linear-gradient(top,rgba(253,253,253,1) 0,rgba(220,220,220,1) 100%);
	background: -ms-linear-gradient(top,rgba(253,253,253,1) 0,rgba(220,220,220,1) 100%);
	background: linear-gradient(to bottom,rgba(253,253,253,1) 0,rgba(220,220,220,1) 100%);

}
#tab:last-of-type{
	border-left:none;
}
#tab li a{
	font-size:1.2em;
	color:gray;	
	font-family:tahoma;
	text-align:center;
	
	-webkit-transition: all .35s ease-in-out;
       -moz-transition: all .35s ease-in-out;
        -ms-transition: all .35s ease-in-out;
         -o-transition: all .35s ease-in-out;
            transition: all .35s ease-in-out;
	
}
#tab li a:hover{

	color:#2B9CED; /* Light Blue*/;
	
}
#tab li h4{
	font-weight:normal;
	padding-top:12px;
	height:100%;
}
#main-content-wrapper{
	height:auto;
	width:1024px;
	margin:0 auto 0 auto;
	
	/* border:2px solid orange; */
}
#main-content{	
	height: 450px;
	background: #fff;	
	background: -moz-linear-gradient(top,#e1e1e1 0,#f2f2f2 60%,#fefefe 91%,#fff 100%);
	/* background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#e1e1e1),color-stop(60%,#f2f2f2),color-stop(91%,#fefefe),color-stop(100%,#fff)); */
	background: -webkit-linear-gradient(top,#e1e1e1 0,#f2f2f2 60%,#fefefe 91%,#fff 100%);
	background: -o-linear-gradient(top,#e1e1e1 0,#f2f2f2 60%,#fefefe 91%,#fff 100%);
	background: -ms-linear-gradient(top,#e1e1e1 0,#f2f2f2 60%,#fefefe 91%,#fff 100%);
	background: linear-gradient(top,#e1e1e1 0,#f2f2f2 60%,#fefefe 91%,#fff 100%);
	
	   
}
#main-content > div{
	width:1024px;
/*	height:481px;*/
	padding: 40px 0;
	position:absolute;
	overflow:hidden;
	float:right;
	 
	 
}
#main-content > div h3{
	font-size:24px;
	margin:15px;
	font-family:tahoma;
	line-height:1.3;
	color:gray;
	width: 100%;
	float:left;

}
.para {
	line-height: 1.5rem;
}
#main-content > div p{
	color:gray;
	font-family:tahoma;
	line-height:1.5;
	margin-bottom:20px;

}

#main-content #contentAnimData{
	width:60%;
	height:auto;
}
#contentAnimData p, #contentAnimData h3{margin-left:20px}


#main-content figure{
	width:40%;
}

.visbleContent{
	opacity:1;	
	visibility:visible;
		
}
.hiddenContent{
	opacity:0;	
	visibility:hidden;	
}
.contentAnim{	
	-webkit-transition: all .65s ease-in-out;
       -moz-transition: all .65s ease-in-out;
        -ms-transition: all .65s ease-in-out;
         -o-transition: all .65s ease-in-out;
            transition: all .65s ease-in-out;
			
}
.contentAnim figure:first-of-type{
	float:left;
	width:400px;
	overflow:hidden;
}
.contentAnim > figure:last-of-type{
	float:right;
}

.contentAnim div:last-of-type ul li{
	float:left;
	margin-top:20px;
	padding-right:10px;	
}
.contentAnim div:last-of-type ul li:last-of-type{
	padding-right:0px;	
}



#gridButton-wrapper #tab .activeTab{	
	background: -moz-linear-gradient(top,rgba(98,98,98,1) 0,rgba(143,143,143,1) 100%);
	background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(98,98,98,1)),color-stop(100%,rgba(143,143,143,1)));
	background: -webkit-linear-gradient(top,rgba(98,98,98,1) 0,rgba(143,143,143,1) 100%);
	background: -o-linear-gradient(top,rgba(98,98,98,1)0%,rgba(143,143,143,1) 100%);
	background: -ms-linear-gradient(top,rgba(98,98,98,1) 0,rgba(143,143,143,1) 100%);
	background: linear-gradient(to bottom,rgba(98,98,98,1) 0,rgba(143,143,143,1) 100%);
	

}
#gridButton-wrapper #tab .activeTab h4{
	color:white;
	font-weight:bold;
} 
 
 
#featured-title{
	height:66px;
	width:950px;
	margin:10px auto 0 auto; /* Up Right Down Left*/
	background-color:#2B9CED;
	
	-moz-box-shadow: 0px 0px 10px 5px rgba(119, 119, 119, 0.5);
	-webkit-box-shadow: 0px 0px 10px 5px rgba(119, 119, 119, 0.5);
	box-shadow: 0px 0px 10px 5px rgba(119, 119, 119, 0.5);
	
	/* border: 2px solid brown; */
}
#featured-title h2{
	color:white;
	text-align:center;
	font-size:32px;
	padding-top:15px;
	font-family:tahoma;
	
}


#featured-items{
	overflow:hidden;
	width:1200px;
	Height:200px;
	margin:-5px auto 0 auto;
	background-color:#2B9CED;
	position:relative;
	z-index:1;
	text-align:center;
	
	/* border: 2px solid black; */
	
	-moz-box-shadow: 0px 0px 10px 5px rgba(119, 119, 119, 0.5);
	-webkit-box-shadow: 0px 0px 10px 5px rgba(119, 119, 119, 0.5);
	box-shadow: 0px 0px 10px 5px rgba(119, 119, 119, 0.5);
}

#featuredItemsContainer{
	width:1000px;
	margin:5px auto;
	
}

#featured-items-item{
     /* margin:auto; */  
	width: 130px;
	height:85px;
	float:left;
	margin:6px 5px 5px 5px ;
	overflow:hidden;
	color:white;
	
	-webkit-box-shadow: inset 0px 0px 50px 6px rgba(0,0,0,.6);
	-moz-box-shadow: inset 0px 0px 50px 6px rgba(0,0,0,.6);
	box-shadow: inset 0px 0px 50px 6px rgba(0,0,0,.6);
	
	/* background-color:red;
	border: 1px solid red;	 */
}


#featured-items-item img{
	width: 100%;
    height: 60px;
    position: relative;
    z-index: -2;
}
#item-caption{
	background:black;	
	padding:2px;
	font-size:18px;
}

#item-caption:hover{
	background:black;	
	padding:2px;
	font-size:18px;
	color:red;
	cursor:pointer;
}

.btn{
	
	border:1px solid #25729a; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-size:16px;font-family:georgia, serif; padding: 10px 10px 10px 10px; text-decoration:none; display:inline-block;text-shadow: -1px -1px 0 rgba(0,0,0,0.3); color: #FFFFFF;
	background-color: #3093c7; background-image: -webkit-gradient(linear, left top, left bottom, from(#3093c7), to(#1c5a85));
	background-image: -webkit-linear-gradient(top, #3093c7, #1c5a85);
	background-image: -moz-linear-gradient(top, #3093c7, #1c5a85);
	background-image: -ms-linear-gradient(top, #3093c7, #1c5a85);
	background-image: -o-linear-gradient(top, #3093c7, #1c5a85);
	background-image: linear-gradient(to bottom, #3093c7, #1c5a85);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#3093c7, endColorstr=#1c5a85);
}

.btn:hover{;
	border:1px solid #1c5675;
	background-color: #26759e; background-image: -webkit-gradient(linear, left top, left bottom, from(#26759e), to(#133d5b));
	background-image: -webkit-linear-gradient(top, #26759e, #133d5b);
	background-image: -moz-linear-gradient(top, #26759e, #133d5b);
	background-image: -ms-linear-gradient(top, #26759e, #133d5b);
	background-image: -o-linear-gradient(top, #26759e, #133d5b);
	background-image: linear-gradient(to bottom, #26759e, #133d5b);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#26759e, endColorstr=#133d5b);

}

#info{
	width:1024px;
	margin:20px auto;
	overflow:hidden;
	background:#F2F2F2;
	
	/* border:2px solid black; */
}
#info ul li{
	float:left;
	margin-right:10px;	
	
}
#info ul a, #info ul li{
	color:white;
}
#info-nav-div{
	padding:5px;
	background:gray;
	overflow:hidden;
}
#info-content{	
	color:gray;
	padding:30px 20px 40px;
}

#info-content h4 {
	color: black;
	font-size: 26px;
	font-family: tahoma;
	margin-bottom: 10px;
}
/*//////////////*/
#tutorial-content-list {
	width: 1024px;
	margin: 20px auto;
	overflow: hidden;
	background: #F2F2F2;
	/* border:2px solid black; */
}

	#tutorial-content-list ul li {
		float: left;
		margin-right: 10px;
	}

	#tutorial-content-list ul a, #tutorial-content-list ul li {
		color: white;
	}

#tutorial-content-list-nav-div {
	padding: 5px;
	background: gray;
	overflow: hidden;
}

#tutorial-content-list-content {
	color: gray;
	padding: 30px 20px 40px;
}

#tutorial-content-list-content h4 {
		color: black;
		font-size: 26px;
		font-family: tahoma;
		margin-bottom: 10px;
	}

#read-more{
	margin:20px 0 20px 0;
	float:right;
	padding:5px;
	
	/* border:2px solid blue; */
}
#read-more a{
	font-size:17px;
	color:black;
	
	-webkit-transition: all .35s ease-in-out;
       -moz-transition: all .35s ease-in-out;
        -ms-transition: all .35s ease-in-out;
         -o-transition: all .35s ease-in-out;
            transition: all .35s ease-in-out;
}
#read-more a:hover{
	color:red;
	
}
#footer-wrapper{
	height:180px;
	width:1024px;
	margin:60px auto;
	padding:10px;
	
	/* border:2px solid orange; */
}
footer > div {
		
	margin-bottom:8px;
	overflow:hidden;
	
	/* border:1px solid red; */	
}
footer > div:first-of-type{
	margin-bottom:-5px;	
}
footer > div:first-of-type li{
	border-right:2px solid gray;
	margin-right:10px;
	padding-right:20px;
	color:gray;
	font-family:trebuchet ms;
	font-size:24px;
	
}
footer > div:first-of-type li:last-of-type {
	border:none;
}
footer > div:first-of-type li a{
	color:gray;
	
	-webkit-transition: all .35s ease-in-out;
       -moz-transition: all .35s ease-in-out;
        -ms-transition: all .35s ease-in-out;
         -o-transition: all .35s ease-in-out;
            transition: all .35s ease-in-out;
}
footer > div:first-of-type li a:hover{
	color:black;
}
footer p{
	color:gray;
}
footer p a{
	color:#2B9CED; /* Light Blue*/
	
	-webkit-transition: all .35s ease-in-out;
       -moz-transition: all .35s ease-in-out;
        -ms-transition: all .35s ease-in-out;
         -o-transition: all .35s ease-in-out;
            transition: all .35s ease-in-out;
}
footer p a:hover{
	color:red; /* Light Blue*/
}
footer > div:last-of-type li {
	border-right:1px solid black;
	padding-right:8px;
	margin-left:8px;
	margin-top:10px;
	
}
footer > div:last-of-type li:last-of-type {
	border:none;
}
footer > div:last-of-type li a{
	color:#2B9CED;
	
	-webkit-transition: all .35s ease-in-out;
       -moz-transition: all .35s ease-in-out;
        -ms-transition: all .35s ease-in-out;
         -o-transition: all .35s ease-in-out;
            transition: all .35s ease-in-out;
}
footer > div:last-of-type li a:hover{
	color:red;
}
#footer-wrapper div ul li{
	float:left;
}


	/* -----------------------------------------------------------------
	********** Responsive Rules **********
		  ------ Starts here ------
/* -----------------------------------------------------------------*/

	@media all and (max-width: 1300px) {
		#sliderContainer {
			/*height:350px !important;*/
			height: 30vw !important;
		}

			#sliderContainer #slides .inner {
				display: block;
				height: 100%;
			}

		#slides .inner .imgContainer {
			display: block;
			height: 30vw;
		}

		.imgContainer .info {
			font-size: 20px;
			width: 300px;
			padding: 10px;
		}

		.imgContainer label {
			width: 60px;
		}

		#lblContainer {
			padding: 5px;
			width: 145px;
		}

			#lblContainer label {
				width: 25px;
				height: 25px;
			}

		div#sliderContainer:hover #lblContainer {
			bottom: 50px;
		}

		#featured-items {
			width: 100%;
		}
	}

	@media all and (max-width: 1200px) {
		#main-content > div,
		#gridButton-wrapper,
		#main-content-wrapper,
		#header-wrapper,
		#info,
		#featuredItemsContainer,
		#footer-wrapper,
		#featured-title {
			width: 100%;
		}

		#main-content > div,
		#footer-wrapper {
			padding-left: 0;
			padding-right: 0;
			margin-left: 0;
			margin-right: 0;
		}

			#footer-wrapper footer {
				margin-left: 50px !important;
			}

		#featured-items-item {
			margin-left: 60px;
			margin-right: 0;
		}
	}

	@media all and (max-width: 780px) {
		#sliderContainer,
		.contentAnim figure {
			display: none;
		}

		#main-content .contentAnim #contentAnimData {
			width: 100%
		}

		#main-content {
			height: 450px;
			font-size: larger;
		}

		#gridButton-wrapper {
			margin-top: 30px;
		}

		.myForm {
			margin: auto;
			width: 400px;
		}

		.sticky-button {
			position:static;
			width:100%;

		}
		.sticky-button	.sticky-button-item {
			width: 96%;
			margin: auto;
			border-radius: 5px;
			padding: 20px 10px;
		}
/*		#main-content > div {
			width: 1024px;
			height: 481px;
			padding: 40px 0;
			position: absolute;
			overflow: hidden;
			float: right;
		}*/
		
}






