@font-face {
    font-family: ran4uFont;
    src: url("thaisanslite_r1.woff");
}

body
{

}

html,body,div,h1,h2,h3,ul,li,p{
	margin:0;
	padding:0;
	}
	
.clear{
	clear:both;
	}
	
#ran4uIntroList{
	width:999px;
	margin:0 auto 10px auto;
	font-family:ran4uFont;
	}

.firstColor{color:#fe8d0b;}	
.secondColor{color:#ccc8c4;}
.textShadow{text-shadow:1px 1px 1px gray;}
	
.intro{
	float:left;
	width:310px;
	border-radius: 20px 20px 20px 20px;
	border:2px solid #ccc8c4;
	padding:0px 5px 5px;
	height:280px;
	/*box-shadow: 3px 3px 2px #ccc8c4;*/
	
	background:#ffffff url("introBg.png") no-repeat -2px -2px;
	}
	
.intro h1{font-size:27px;text-align:center;margin-top:5px;text-shadow: 1px 1px 2px #000000;}
.intro p{font-size:19px;line-height:100%;}

.rightMargin5{margin-right:10px;}

@keyframes changeColor{
	from {color:#fe8d0b;}
    to {color: #ccc8c4;}
}

@-webkit-keyframes changeColor{
	from {color:#fe8d0b;}
    to {color: #ccc8c4;}
}

span.special{
	display:block;text-align:center;color:#fe8d0b;font-weight:bold;font-size:22px;margin:8px 0px;text-shadow: 1px 1px 1px #000000;
	
	animation-name:changeColor;
	animation-duration:1s;
	animation-direction: alternate;
	animation-iteration-count: infinite;
	-webkit-animation-name: changeColor; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
    -webkit-animation-direction: alternate;
    -webkit-animation-iteration-count: infinite;
	}

.intro ul {padding-left:20px;}
.intro ul.people {list-style-type:none;padding-left:10px;}
.intro ul.people li {background:url("peopleIcon.png") no-repeat;padding-left:22px;text-shadow:1px 1px 1px gray;}
.intro ul li{font-weight:bold;font-size:18px;line-height:20px;}
.intro p{margin:8px 0px;}

.intro ul.marketingTools li{text-shadow:1px 1px 1px gray}

div.banner {
  z-index: -1;
}
div.banner h2 {
    border-radius: 0 0 5px 5px;
    border-width: 0 1px 1px 1px;
    border-color: rgba(0,0,0,0.1);
    box-shadow: 0 0 4px rgba(0,0,0,0.3);
    display: inline-block;
    margin: -1px auto 0;
    padding: 4px 28px;
}
/*div.banner h2:before, div.banner h2:after {
    bottom: 4px;
    box-shadow: 0 6px 5px rgba(0,0,0,0.4);
    content: "";
    height: 10px;
    position: absolute;
    width: 47%;
    z-index: -1;
}*/
div.banner h2::before {
    left: 3%;
    transform: rotate(-3.5deg);
}
div.banner h2::after {
    right: 3%;
    transform: rotate(3.5deg);
}

div.banner h2 {
    background: #08b;
    background-image: radial-gradient(transparent 30%, rgba(0, 0, 0, 0.2));
    border: 0 solid rgba(0,0,0,0.2);
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    position: relative;
    text-shadow: -1px -1px 1px rgba(0,0,0,0.2);
	width:210px;
	text-align:center;
	margin-left:25px;
}

#framecontent .bggray .box a img{transition:transform 1s;-webkit-transition: transform 1s; }
#framecontent .bggray .box a img:hover{transform: rotate(2deg); -webkit-transform: rotate(2deg) scale(1.03); }

#featuresLeftSideBar{font-family:ran4uFont;font-size:20px !important;}