@import url('/css/variables.css');

body{
	font-family:'Roboto', Arial, sans-serif;
	font-size: 16px;
	line-height: 150%;
}


header{
	height:719px;
	background: url(../images/headerImage1.jpg) no-repeat ;
	background-size:cover;
}

header h2{color:#fff; margin-top:380px; margin-top: 25%; background: rgba(80,80,80,.8); padding:15px; border-radius:8px}
header h3{color:#fff;  margin-top:10px; background: rgba(80,80,80,.8); padding:20px; border-radius:8px}

h2{font-size:42px; font-weight: 500; line-height:102%; margin-bottom: 5px; }
h3{font-size:21px; font-weight: normal; line-height: 120%; }
h4{font-size:20px; }

a.pdf{ color:#fff; padding-right: 20px; background: url(../images/adobeIcon.png) no-repeat right 5px; margin-top:15px;  font-size: 11px; 
		font-style: italic; float:right;}

.heading h4{ margin-bottom: 25px; font-size: 30px;}

.scrolled{ background: rgba(255, 255, 255, .95);  border-radius: 8px; transition: background .3s ease-in;}

/* Back to Top Button */
#back-to-top { position: fixed; bottom: 20px; right: 20px; z-index: 99; border: none; outline: none;  background-color: rgba(0, 0, 0, 0.5);
    color: white; cursor: pointer; padding: 10px; border-radius: 5px; font-size: 18px; font-weight: 500;display: none; /* Hidden by default */
}

#back-to-top:hover {
    background-color: #555; /* Add a hover effect */
}


.caseSum .row.heading{
	border-bottom: 1px solid #fff;
	margin-left: 0px;
	margin-right:0px;
	margin-bottom: 10px;
}

.logo{	
	margin:20px; 
	position:absolute;
	left:20px;
	top:0;
	z-index: 1000;
}


ul.language{float:right; background: #fff; margin-top: 30px; padding: 0; margin-left: 20px;}
	ul.language li{ list-style: none; float:left; padding:5px; }
	ul.language li a{ padding:0px 10px; text-decoration: none; color:#C71C21; background: #eaeaea;border-radius: 4px;}
	ul.language li.selected a{ background: none;  color:#333;}


.navArea {
	float:right; 
	background-color:rgba(255,255, 255, .8); 
	margin-top:30px;
	display:block;
	padding: 0px;
	border-radius: 5px;
}

.navArea li{ float:left; display:block; margin:5px 10px; }
.navArea li:last-child { margin-right:20px; }
.navArea a{float:left; color:#666666; text-decoration: none;}
.navArea a:hover{ color:#C71C21; text-decoration: none;  }

.caseSum {
	margin-top:36px; 
	margin-bottom: 36px; 
	background:#C71C21; 
	border-radius: 4px; 
	color:#fff;
	padding: 15px 15px 0px 15px!important;
	font-size: 15px;
	line-height: 140%;
}
.caseSum h4{margin-left: -15px; margin-bottom: 10px; font-size: 20px;}
.caseSum dt{ width:70px; text-align: right; margin-right: 10px;}
.caseSum dt, .caseSume dd{float:left; }
.caseSum dd{display:block; width:90%;}

.caseSum dd ul{ 
	display:block; 
	list-style: none; 
	padding:0px;
	margin-left: 80px;
	width:100%;

	}
.caseSum dd ul li{margin-left: 0; }


#main{
width:100%;	
background: url(../images/bg1.png) no-repeat 0 13%,
			url(../images/bg2.png) no-repeat 0 35%,
			url(../images/bg3.png) no-repeat 0 65%;
background-size: 100% auto, 100% auto, 100% auto;			
	}


#customer{
	width:100%;
	padding-top: 80px;
	padding-bottom:80px;
	}


#challenge{
	width:100%;
	padding-top: 80px;
	padding-bottom:80px;
}


#solution{
	width:100%;
	padding-top: 80px;
	padding-bottom:80px;
}


#messages p{ 
	font-style: italic; 
	font-size: 16px; 
	color:#666666; 
	padding-left: 25px; 
	padding-right: 25px;
	background: url(../images/punc.png) no-repeat left top, url(../images/punc.png) no-repeat bottom right;
	margin-top: 10px;
	}

 
#messages p.position{ font-style: normal;  
	font-weight: bold; 
	margin-top:30px; 
	background: none;
	  }


#contactus{ margin-top: 40px; padding-top: 40px; padding-bottom:40px;}
#contactus a{ text-decoration: none; color:#C71C21; }

.form-control{ border:1px solid #333333; }

.social-share{ background-color: #F6F4F4; border-radius: 6px; position: fixed; top: 228px; right: 1.8%; padding: 5px 8px;z-index: 1000; box-shadow: 0px 0px 4px rgba(0,0,0,.4 );}

.social-share ul{ list-style: none; padding:0; margin:0;}
.social-share ul li{margin:4px 0; font-weight: var(--medium);}
/*.social-share ul li a{}*/
.a2a_default_style:not(.a2a_flex_style) a {padding: 5px 2px!important;}


#back-to-top {  position: fixed; 				bottom: 80px; 
				right: 25px; 
				z-index: 9999; 
				width: 32px;
				height: 32px; 
				text-align: center; 
				line-height: 30px;
				background: rgba(204,0,0,1); 
				color: #fff;  
				cursor: pointer; 
				border: 0; 
				border-radius: 50%; 
				text-decoration: none; 
				transition: opacity 0.2s ease-out;  
				opacity: 0; }
#back-to-top:hover {background: #e9ebec;}
#back-to-top.show {opacity: 1;}

.submit{ background-color: #C71C21 ;
		color:#fff;
		border:0px;
		border-radius:5px;
		padding:35px 55px;
		margin-top: 25px;	}

.submit_off{display:none;}

#message{ background-color: #fff; border-radius: 5px; padding: 20px; margin-left: 5%;  color:#009900;}

.movie{border:10px solid rgba(210, 210, 210, 0.5); float:left; display:block; border-radius:5px;}

/* ----------------------------footer begins ------------------------------------------*/

footer{ background: var(--coolGray10c); flex-shrink: 0;}

.socialFW{ font-size: var(--smallTxt); font-weight: var(--regular); color:var(--leuko);}
ul.socialMedia{ list-style: none; display: inline-block; color:var(--leuko); margin: 21px 0px 5px 18px; padding:0;}
ul.socialMedia li{ display: inline-block;}
ul.socialMedia li a{ display:block; text-decoration: none; margin: 0px 4px; width:34px; height:30px; transition: all .3s ease;}
ul.socialMedia li a.linkedin{ background: url(/images/Socials_sprite.png) no-repeat -13px -9px; }
ul.socialMedia li a.linkedin:hover{ background: url(/images/Socials_sprite.png) no-repeat -13px -49px;}

ul.socialMedia li a.twitter{ background: url(/images/Socials_sprite.png) no-repeat -58px -9px; }
ul.socialMedia li a.twitter:hover{ background: url(/images/Socials_sprite.png) no-repeat -58px -49px;}

ul.socialMedia li a.facebook{ background: url(/images/Socials_sprite.png) no-repeat -103px -9px; }
ul.socialMedia li a.facebook:hover{ background: url(/images/Socials_sprite.png) no-repeat -103px -49px;}

ul.socialMedia li a.youtube{ background: url(/images/Socials_sprite.png) no-repeat -151px -8px; }
ul.socialMedia li a.youtube:hover{ background: url(/images/Socials_sprite.png) no-repeat -151px -49px;}

.subscribe{margin: 17px 0px ; font-size: var(--H6Header); color:var(--leuko); /*border:1px solid var(--leuko);*/ border-radius: 6px; padding:7px 38px;  background-color: var(--coolGray7c); transition: all .4s ease;}

.subscribe:hover{border:1px solid var(--coolGray7c);background-color: var(--leuko);color:var(--coolGray7c); }

p.icomCopy{ font-size: var(--xxsmallTxt); width:100%; color:var(--leuko); display: block; float: inherit;}
.icomCopy a{color:var(--leuko); text-decoration: underline; display:inline; transition: all .3 ease;}
.icomCopy a:hover{text-decoration: none;}
/* ----------------------------footer ends ------------------------------------------*/




/*--------------- media queries ----------------*/	 

@media (max-width: 768px) { 
	.caseSum { border-radius: 0px; }	
	.caseSum dt, .caseSume dd{float:none;}
	.caseSum dt{ text-align: left; }
	.caseSum dd{ margin-left: 5%; }
	.navArea {margin-top: 80px;}
	.caseSum dd ul{ margin-left: 0px;}
	#messages p{ margin-top: 20px;}
	#messages p.position{margin-top: 10px; margin-bottom: 30px;}

	#main{
	background-position: 0 14%, 0 34%, 0 65%;	
	background-size: 100% 800px, 100% 900px, 100% 1200px;}	

	header h2{color:#fff; margin-top:160px; }

	.navArea {
	background:rgba(255, 255, 255, .7); 
	margin-top:80px;
	display:block;
	padding: 0px;
	float:left;
	width:100%;
	border-radius: 4px;
}
	
	.navArea li{ float:none; display:block; margin:5px 10px; }
	.navArea li:last-child { margin-right:20px; }
	.navArea a{float:none; color:#666666;}
	.navArea a:hover{ color:#C71C21; text-decoration: none;  }


	ul.language{float:right; background: #fff; margin-top: 25px; padding:0;}
	ul.language li{ list-style: none; float:left; padding:10px; }
	ul.language li a{ padding:5px 10px; text-decoration: none; color:#C71C21; background: #eaeaea;border-radius: 4px;}
	ul.language li.selected a{ background: none;  color:#333;}
   }


@media (min-width: 768px) and (max-width: 992px) {
	#main{
		background-position: 0 12%, 0 34%, 0 65%;	
		background-size: 100% 800px, 100% 900px, 100% 1200px;}
	#messages p.position{
		margin-top: 10px; 
		margin-bottom: 30px;}

	header h2{color:#fff; margin-top:330px; }
		
	}


@media (min-width: 992px) and (max-width: 1200px) { 
	#main{
	background-position: 0 12%, 0 34%, 0 65%;		
	background-size: 100% 600px, 100% 600px, 100% 900px;			
	}
	}


@media (min-width: 1200px) { 
	#main{
	background-size: 100% 500px, 100% 500px, 100% 800px;			
	}

	}