body{
	direction: ltr;
}

h1, h2, h3, h4 {
	letter-spacing: -1; 
	font-weight: bold;
	text-align: center;
	font-family: Montserrat, Raleway ExtraBold 700,Tahoma, Verdana, Arial, Helvetica, sans-serif;
	padding-top:10px;
	padding-bottom:10px;
}

h1 {
	font-size:26pt;
	color:#CC0000;
font-family: "montserrat" !important;
}

h2 {
	font-size:24pt;
	color:#CC0000;
	text-transform: capitalize;
  font-family: 'Montserrat';
  font-weight: bold;
}

h3 {
	
	font-size: 20pt;
	font-weight: bold;
	margin: 0;
	padding-bottom:10px;
	color: #ce0000;
}
h4 {
	font-size:15px;
	margin:0;
	margin-left:15%;
	margin-right:15%;
}


.gridContainer{
	width: 90%;
	max-width: 500px;
	margin: 0 auto;
	padding: 0 15px;
}
.mainBg{
	width: 85%;
	margin: 0 auto;
}
header{
	border-bottom: 34px solid #000;
}
.attention{
	font-style: italic;
    text-align: center;
    color: #666;
    margin: 15px 0;
}
.attention p{
	font-size: 16px;
}
.attention p span{
	font-weight: bold;
}
.questionTitle{
	color: #000;
	text-align: center;
}
.hugeFont{
	font-size: 13px;
}
.middleFont{
	font-size: 4px;
}
.subTitle{
	margin: 15px 0;
	text-align: center;
	background-color: #fafafa;
	padding: 5px;
}
.subTitle p{
	color: #666666;
	font-size: 21px;
	font-weight: 700;
}
.mostPop{
	margin: 20px 0;
}
.mostPop p{
	font-size: 16px;
	color: #000;
	margin-bottom: 15px;
}
.mostPop p span{
	font-weight: bold;
}
.product-brief{
	text-align: center;
	color: #000;
}
.product-brief p{
	font-style: italic;
	font-size: 25px;
	font-weight: 500;
}
.productImage {
	width: 95%;
	margin: 15px auto;

}
.component{
	border:3px solid #000;
	width: 95%;
	max-width: 500px;
	margin: 30px auto;
}
.componentContainer{
	padding: 15px;
}
.componentImage{
	width: 95%;
	margin: 15px auto;
	max-width: 400px;
}
.recommendedImage{
	width: 95%;
	margin: 15px auto;
	max-width: 500px;
}
.component ul{
	margin: 20px 0;
	text-align: left;
	padding-left:40px; 
}
.component ul li{
	margin-bottom: 15px;
	text-align: left;
}
.component ul li span{
	font-size: 16px;
    color: #000;
  
}
.component ul li.bold span , .bold{
	font-weight: bold;
}
.Red{
	color: #C30003;
	font-size: 16px;
	margin: 50px 0 30px;
}
.howTo{

	margin: 50px 0; 
}
.risk{
	background-repeat: no-repeat;
	height: 365px;
	width: 90%;
	margin: 0 auto;
	max-width: 527px;
	display: block;
	position: relative;
}
.riskContainer{
	padding:99px 30px 0 35px;
	position: absolute;
	top: 0;
	right: 0;
}
.risk img{
	height: 100%;
}
.accessBox{
	border:6px dashed #9b0707;
	width: 95%;
	max-width: 600px;
	margin: 30px auto;
}
.accessBoxContainer{
	padding: 30px;
}

.accessBoxContainer ul{
	margin: 20px 0;
	text-align: left;
	padding-left:40px; 
}
.accessBoxContainer ul li{
	margin-bottom: 15px;
	text-align: left;
}
.accessBoxContainer ul li span{
	font-size: 18px;
    color: #000; 
}
.button{
text-align: center;
position: relative;
}
.button img{
	width: 90%;
max-width: 288px;

}
.button button{
	background:none;
	border:none;
	outline: none;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	z-index: 99;
	position: absolute;
}
footer{
	background-color: #077fb8;
}
.footerImage{
	width: 100%;
	max-width: 650px;
	margin: 0 auto
}






.sourcesGridContainer{
	width: 90%;
	max-width: 700px;
	margin: 0 auto;
	padding: 60px 15px 0; 
}
.onlyComponent{
	border:3px solid #F2F2F2;
	background-color: #ffffff;
	padding: 15px;
}
.processImage{
	margin: 10px auto;
	width: 90%;
	max-width: 825px;
}
.components{
	padding: 0 15px;
}
.oneBook{
	width: 50%;
}
.oneDecription{
}
.descFooter{
	text-align: center;
}
.big-width{
	display: none;
}
@media screen and (min-width: 768px) {
.oneBook{
	float: left;
	width: 35%;
}
.oneDecription{
	float: right;
	width: 65%;
	margin-bottom: 15px;
}
.big-width{
	display: block;
}
.small-width{
	display: none;
}
}
@media screen and (min-width: 650px){
	.hugeFont{
		font-size: 19px;
	}

.round {
border:1px solid #;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;  

	.meter { 
		height: 25px;  /* Can be anything */
		position: relative;
		margin: 60px 0 5px 0; /* Just for demo spacing */
		background: #CCCCCC;
		-moz-border-radius: 25px;
		-webkit-border-radius: 25px;
		border-radius: 25px;
		padding: 0px;
		-webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
		-moz-box-shadow   : inset 0 -1px 1px rgba(255,255,255,0.3);
		box-shadow        : inset 0 -1px 1px rgba(255,255,255,0.3);
	}
	.meter > span {
		display: block;
		height: 100%;
		   -webkit-border-top-right-radius: 8px;
		-webkit-border-bottom-right-radius: 8px;
			   -moz-border-radius-topright: 8px;
			-moz-border-radius-bottomright: 8px;
				   border-top-right-radius: 8px;
				border-bottom-right-radius: 8px;
			-webkit-border-top-left-radius: 20px;
		 -webkit-border-bottom-left-radius: 20px;
				-moz-border-radius-topleft: 20px;
			 -moz-border-radius-bottomleft: 20px;
					border-top-left-radius: 20px;
				 border-bottom-left-radius: 20px;
		background-color: rgb(43,194,83);
		background-image: -webkit-gradient(
		  linear,
		  left bottom,
		  left top,
		  color-stop(0, rgb(43,194,83)),
		  color-stop(1, rgb(84,240,84))
		 );
		background-image: -moz-linear-gradient(
		  center bottom,
		  rgb(43,194,83) 37%,
		  rgb(84,240,84) 69%
		 );
		-webkit-box-shadow: 
		  inset 0 2px 9px  rgba(255,255,255,0.3),
		  inset 0 -2px 6px rgba(0,0,0,0.4);
		-moz-box-shadow: 
		  inset 0 2px 9px  rgba(255,255,255,0.3),
		  inset 0 -2px 6px rgba(0,0,0,0.4);
		box-shadow: 
		  inset 0 2px 9px  rgba(255,255,255,0.3),
		  inset 0 -2px 6px rgba(0,0,0,0.4);
		position: relative;
		overflow: hidden;
	}
	.meter > span:after, .animate > span > span {
		content: "";
		position: absolute;
		top: 0; left: 0; bottom: 0; right: 0;
		background-image: 
		   -webkit-gradient(linear, 0 0, 100% 100%, 
			  color-stop(.25, rgba(255, 255, 255, .2)), 
			  color-stop(.25, transparent), color-stop(.5, transparent), 
			  color-stop(.5, rgba(255, 255, 255, .2)), 
			  color-stop(.75, rgba(255, 255, 255, .2)), 
			  color-stop(.75, transparent), to(transparent)
		   );
		background-image: 
			-moz-linear-gradient(
			  -45deg, 
			  rgba(255, 255, 255, .2) 25%, 
			  transparent 25%, 
			  transparent 50%, 
			  rgba(255, 255, 255, .2) 50%, 
			  rgba(255, 255, 255, .2) 75%, 
			  transparent 75%, 
			  transparent
		   );
		z-index: 1;
		-webkit-background-size: 50px 50px;
		-moz-background-size: 50px 50px;
		-webkit-animation: move 2s linear infinite;
		   -webkit-border-top-right-radius: 8px;
		-webkit-border-bottom-right-radius: 8px;
			   -moz-border-radius-topright: 8px;
			-moz-border-radius-bottomright: 8px;
				   border-top-right-radius: 8px;
				border-bottom-right-radius: 8px;
			-webkit-border-top-left-radius: 20px;
		 -webkit-border-bottom-left-radius: 20px;
				-moz-border-radius-topleft: 20px;
			 -moz-border-radius-bottomleft: 20px;
					border-top-left-radius: 20px;
				 border-bottom-left-radius: 20px;
		overflow: hidden;
	}
	
}
}