/* IMPORTS ------------------------------------------------------------*/
@import url('reset.css');

@import url('social-icons.css');

/* HACKS ------------------------------------------------------------*/
.clear {
	clear: both;
	height: 1px;
}

.inv {
	display: none;
}

ol {
	list-style: decimal;
	padding-left: 30px;
}

a:ACTIVE,a:FOCUS {
	outline: 0;
}

/* GENERAL ------------------------------------------------------------*/
body {
    background: none repeat scroll 0 0 #F0EFEB;
    color: #49494B;
   direction: ltr;
    font-family: sans-serif;
    font-size: 14px;
    line-height: 1;
}

a {
    color: #000000;
}

h1 {
	font-size: 30px;
}

h2 {
	font-size: 28px;
}

h3 {
	font-size: 26px;
}

h4 {
	font-size: 24px;
}

h5 {
	font-size: 22px;
}

h6 {
	font-size: 20px;
}

h1,h2,h3,h4,h5,h6 {
	margin-bottom: .0em;
}

.headline {
	border: 1px solid gray;
	font-size: 24px;
	height: 200px;
	margin: 20px 0;
	padding: 5px;
	text-align: left;
}

#header
#main,#footer,#bottom {
	wid
	: 100%;
}

#header {
	height: 134px;
	background: #e5e3dc
		url(../img/bgs/webtreats/webtreats_blue_creme_pattern_87.jpg);
	border-bottom: 1px solid #fff;
}

#home-header {
	height: 203px;
	background: #e5e3dc
		url(../img/bgs/webtreats/webtreats_blue_creme_pattern_87.jpg);
	border-bottom: 1px solid #fff;
}

#home-header .degree,#header .degree {
	background: none repeat scroll 0 0 #6C9738;
	height: 100%;
	width: 100%;
}

.wrapper {
	width: 1000px;
	margin: 0 auto;
	position: relative;
   background: none repeat scroll 0 0 #EAFFCE;


	
	
}

#logo {
	height: 114px;
	left: 25px;
	position: absolute;
	top: 0;
	width: 120px;
}

.top-search {
	position: absolute;
	top: 0px;
	right: 10px;
}

.icon {
	display: block;
	background-repeat: no-repeat;
	background-position: left top;
	width: 16px;
	margin: 3px;
	height: 100%;
	text-indent: -9000px;
}

.icon-32 {
	display: block;
	background-repeat: no-repeat;
	background-position: left top;
	width: 32px;
	margin: 3px;
	height: 32px;
	text-indent: -9000px;
}

.shadow-divider {
	clear: both;
	height: 25px;
	width: 100%;
	background: url(../img/sprites.png) no-repeat 0px -416px;
	margin-bottom: 20px;
}

.right {
	float: right;
}

.left {
	float: left;
}

.holder {
	display: none;
	overflow: hidden;
}

img.shadow-img {
	border: 1px solid #fff;
	-webkit-box-shadow: 0 0 3px #000;
	-moz-box-shadow: 0 0 3px #000;
	box-shadow: 0 0 3px #000;
}

/* COLUMNS LAYOUT----------------------------------------------------------*/
.one-half,.one-third,.two-third,.three-fourth,.one-fourth {
	float: left;
	margin-right: 20px;
	position: relative;
}

.one-half {
	width: 458px;
}

.one-third {
	width: 300px;
}

.one-fourth {
	width: 220px;
}

.two-third {
	width: 620px;
}

.three-fourth {
	width: 700px;
}

.last {
	clear: right;
	margin-right: 0 !important;
}

/* CONTENT ------------------------------------------------------------*/
.content {
    line-height: 1.5em;
    min-height: 600px;
    overflow: hidden;
    position: relative;
    text-align: right;
    top: -20px;
}

.content2 {
	
text-align: left;	
}
.content-blog {
	overflow: hidden;
	margin-top: 30px;
	min-height: 600px;
	line-height: 1.5em;
}

.content p,.content-blog p {
	margin-bottom: 21px;
}

.page-content {
	width: 960px;
	margin-left: 20px;
	margin-right: 20px;
	overflow: hidden;
}



.page-content ul {
	list-style-type: disc;
	padding-left: 20px;
}

.page-content ol {
    direction: rtl;
    list-style-type: disc;
    padding-right: 20px;
    text-align: right;
}

/* LINK BUTTON ------------------------------------------------------------*/
.link-button {
	display: table;
	height: 31px;
	padding-left: 15px;
	font-size: 14px;
	line-height: 1em;
	color: #515153;
	background: url(../img/sprites.png) 0px -205px no-repeat;
}

.link-button span {
	display: block;
	height: 31px;
	margin-left: 5px;
	padding-left: 5px;
	padding-top: 7px;
	padding-right: 12px;
	background: url(../img/sprites.png) no-repeat right -166px;
}

.link-button:hover {
	color: #999;
}

/* STYLED ------------------------------------------------------------*/
.left-align {
	float: left;
	margin: 8px 18px 18px 0;
	display: block;
}

.right-align {
	float: right;
	margin: 0px 0px 0px 10px;
	display: block;
}

.boxed {
	background: white;
	padding: 5px;
	border: 1px solid #cccccc;
}

.border {
	border: 2px solid white;
}

.dropcap {
	display: block;
	float: left;
	font-size: 40px;
	line-height: 40px;
	margin: 0 8px 0 0;
}

.highlight {
	background: yellow;
	color: #111111;
	padding: 1px 4px;
}

.pullquote-right,.pullquote-left {
	border-left: #555555 2px solid;
	float: right;
	font-size: 16px;
	line-height: 1.5em;
	margin: 20px 0px 20px 20px;
	padding: 0 0 0 20px;
	width: 33%;
	font-style: italic;
}

.pullquote-left {
	float: left;
	margin: 20px 20px 20px 0px;
}

.pullquote-right {
	border-left: none;
	border-right: #555555 2px solid;
}

/* TABLE ------------------------------------------------------------*/
table,td,th {
	vertical-align: middle;
}

table { /*border-collapse:separate;*/
	border-spacing: 0;
	/*border-top:1px solid white;*/
	margin-bottom: 28px;
	width: 100%;
	direction: rtl;
    margin-bottom: 28px;
    text-align: right;
}

#product_index {
	background: none repeat scroll 0 0 #a6ee6f;
	color: #000000;
	text-align: center;
}

th {
    background-color: #a6ee6f;
    padding: 10px;
    text-transform: uppercase;
}

td {
	padding: 10px;
}

td, th {
    border: 1px solid #CEEFF7;
    direction: ltr;
}

tr {
	background: none repeat scroll 0 0 #FFFFFF;
	color: black;
}

tr:hover {
	background: none repeat scroll 0 0 #EBE2C7;
	color: #1F1F1F;
}

/* INFO BOXES ------------------------------------------------------------*/
.info,.success,.warning,.error,.validation {
	border: 1px solid;
	margin: 10px 0px;
	padding: 15px 10px 15px 50px;
	background-repeat: no-repeat;
	background-position: 10px center;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

.info {
	color: #00529B;
	background-color: #BDE5F8;
	background-image: url('../img/knobs-icons/Knob Info.png');
}

.success {
	color: #4F8A10;
	background-color: #DFF2BF;
	background-image: url('../img/knobs-icons/Knob Valid Green.png');
}

.warning {
	color: #9F6000;
	background-color: #FEEFB3;
	background-image: url('../img/knobs-icons/Knob Attention.png');
}

.error {
	color: #D8000C;
	background-color: #FFBABA;
	background-image: url('../img/knobs-icons/Knob Cancel.png');
}

/* TOGGLE & ACCORDION ------------------------------------------------------------*/
h5.accordion-trigger,h5.toggle-trigger {
	padding: 0 0 0 20px;
	margin: 0 0 5px 0;
	height: 46px;
	line-height: 46px;
	width: 100%;
	float: right;
	border-bottom: 1px solid #cccccc;
}

h5.accordion-trigger a,h5.toggle-trigger a {
	text-decoration: none;
	display: block;
	color: #1f1f1f;
}

h5.accordion-trigger a:hover,h5.toggle-trigger a:hover {
	color: #938484;
}

div.accordion-container,div.toggle-container {
	margin: 0 0 5px 0px;
	padding: 0;
	overflow: hidden;
	width: 95%;
	clear: both;
}

div.accordion-container .block,div.toggle-container .block {
	padding: 10px;
}

div.accordion-container .block,div.toggle-container .block {
	font-size: 14px;
	line-height: 1.5em;
}

div.accordion-container .block p,div.toggle-container .block p {
	margin-bottom: 1.5em;
}

/* TOOLTIP ------------------------------------------------------------*/
.tooltip,.tooltip-right,.tooltip-bottom,.tooltip-left {
	display: none;
	font-size: 12px;
	height: 70px;
	width: 160px;
	padding: 25px;
	color: #ffffff;
	line-height: 1.3em;
	z-index: 600;
}

.tooltip {
	background: transparent url(../img/tooltip.png) no-repeat;
}

.tooltip-right {
	background: transparent url(../img/tooltip-right.png) no-repeat;
}

.tooltip-bottom {
	background: transparent url(../img/tooltip-bottom.png) no-repeat;
}

.tooltip-left {
	background: transparent url(../img/tooltip-left.png) no-repeat;
}

.tooltip-social {
	display: none;
	font-size: 12px;
	height: 40px;
	width: 140px;
	padding: 25px;
	color: #ffffff;
	line-height: 1.3em;
	z-index: 600;
}

.tooltip-social {
	background: transparent url(../img/tooltip-social.png) no-repeat;
}

/* SEARCH ------------------------------------------------------------*/
#searchform {
	
}

#s {
	color: #49494b;
	font-size: 12px;
	width: 160px;
	height: 21px;
	margin: 0px 0px 5px 0px;
	padding: 2px 35px 2px 8px;
	border: 0;
	background: #f0efeb;
}

#searchsubmit {
	position: absolute;
	top: 0px;
	right: 0px;
	width: 25px;
	height: 25px;
	border: 0px;
	background: url(../img/sprites.png) no-repeat transparent 0px 0px;
}

#searchsubmit:hover {
	background-position: -27px 0px;
}

/* NAVIGATION ------------------------------------------------------------*/
#nav-holder {
	width: 800px;
	position: absolute;
	top: 68px;
	right: 10px;
	font-size: 20px;
}

#nav {
	display: block;
	float: right;
}

#nav li {
    display: block;
    float: right;
    padding-right: 13px;
}

#nav li:first-child {
	padding-left: 0px;
}

#nav li a {
	color: #F3F3F3;
    padding-bottom: 6px;
    text-decoration: -moz-anchor-decoration;
}

#nav>li>a:hover,#nav>li.current_page_item>a {
	color: #d24c0a;
	background: url(../img/sprites.png) no-repeat center -51px;
}

/* sub nav */
#nav li ul {
	padding: 0px;
	background: #1b1b1b;
}

#nav > li > ul {
    margin: -25px -119px 0;
    text-align: right;
}

#nav li ul li {
	padding: 0px;
	margin: 0px;
	border-bottom: 1px solid #939392;
}

#nav li ul li:last-child {
	border-bottom: none;
}

#nav li ul li a {
	padding: 10px;
	margin: 0px;
	font-size: 12px;
	color: #FFFFFF;
}

#nav li ul li:hover {
	background: #4e4e50;
	background-position-x: -9000px;
}

#nav li ul li:hover a {
	color: #fff;
}

/* TITLE ------------------------------------------------------------*/
.title-holder {
	display: block;
	overflow: hidden;
	position: relative;
	width: 1000px;
	height: 82px;
	background: url(../img/title-bg.png) no-repeat;
	margin-bottom: 10px;
	line-height: 1em;
}

.title-holder .title {
    color: #49494B;
    display: block;
    float: right;
    font-size: 28px;
    margin-right: 23px;
    margin-top: 30px;
}

.title-holder .subtitle {
	color: #999999;
	display: none;
	float: left;
	font-size: 20px;
	margin-left: 15px;
	margin-top: 35px;
}

.title-holder .link-button {
	position: absolute;
	top: 25px;
	right: 30px;
}

/* SLIDESHOW ------------------------------------------------------------*/
#slideshow {
	overflow: hidden;
	position: relative;
	left: 0px;
	width: 1000px;
	height: 363px;
	margin-bottom: 20px;
	background: url(../img/slideshow-bg.png) no-repeat;
	z-index: 0;
}

#slideshow #slideshow-link span {
	display: block;
	background: url(../img/bgs/strips-thin.png);
	position: absolute;
	left: 20px;
	top: 10px;
	width: 960px;
	height: 320px;
	z-index: 50;
}

#slideshow ul#slides {
	position: relative;
	left: 20px;
	top: 10px;
	width: 960px;
	height: 322px;
}

#slideshow-nav-holder {
	display: block;
	position: absolute;
	overflow: hidden;
	width: 960px;
	padding: 6px 10px 6px 10px;
	bottom: 0px;
	right: 0px;
	z-index: 10;
	background: url(../img/slideshow-nav-bg.png) no-repeat;
}

#slideshow-nav {
	display: block;
	clear: left;
	float: left;
	position: relative;
	left: 50%;
}

#slideshow-nav a {
	display: block;
	float: left;
	margin: 0;
	padding: 0;
	width: 10px;
	height: 10px;
	background: #49494b;
	text-indent: -9000px;
	margin: 0px 3px;
	position: relative;
	right: 50%;
}

#slideshow-nav a:hover {
	background: #575758;
}

#slideshow-nav a.activeSlide {
	background: #fff;
}

#slideshow #prev {
	position: absolute;
	top: 160px;
	left: 5px;
	background: url(../img/sprites.png) no-repeat -104px -343px;
	height: 30px;
	width: 24px;
	z-index: 60;
}

#slideshow #next {
	position: absolute;
	top: 160px;
	right: 5px;
	background: url(../img/sprites.png) no-repeat -142px -343px;
	height: 30px;
	width: 24px;
	z-index: 60;
}

#slideshow #prev:hover {
	background-position: -211px -343px;
}

#slideshow #next:hover {
	background-position: -249px -343px;
}

/* HOME PAGE ------------------------------------------------------------*/
.home-content {
	position: relative;
	overflow: hidden;
	top: -90px;
	min-height: 500px;
}

.front-left-col {
	width: 97%;
	margin: 0px 10px 0px 20px;
	float: left;
}

.front-right-col {
    display: none;
    float: left;
    margin: 0 0 0 10px;
    width: 620px;
}

.bullet-title {
	background: url(../img/sprites.png) no-repeat 0px -815px;
	padding-left: 40px;
	margin-bottom: 10px;
	display: none;
}

.bullet-title .big {
	color: #49494b;
	font-size: 24px;
	line-height: 0.2em;
}

.bullet-title .small {
	color: #999999;
	font-size: 16px;
	line-height: 0.4em;
}

.Opening_word_P {
    font-size: 17px;
    height: 290px;
    line-height: 1.5;
    text-align: center;
}

/* NEWS LIST ------------------------------------------------------------*/
.news-list {
	display: block;
}

.news-list li {
	margin-bottom: 10px;
	line-height: 1.5em;
}

.news-title a {
	color: #666666;
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
}

.news-date {
	color: #adadad;
	font-size: 12px;
	text-align: right;
}

/* HOME BLOCKS ------------------------------------------------------------*/
.blocks-holder {
	overflow: hidden;
	width: 640px;
	display: block;
}

.blocks-holder li {
	display: block;
	float: left;
	width: 310px;
	position: relative;
	margin-bottom: 10px;
	margin-right: 10px;
}

.blocks-holder li img {
	border: 1px solid gray;
}

.blocks-holder .block-ribbon {
	position: absolute;
	right: -7px;
	top: 40px;
	overflow: hidden;
	height: 86px;
}

.blocks-holder .block-ribbon .left {
	float: left;
	height: 86px;
	padding-left: 10px;
	padding-right: 2px;
	padding-top: 20px;
	background: url(../img/sprites.png) no-repeat 0px -487px;
	max-width: 250px;
}

.blocks-holder .block-ribbon .left .block-title {
	font-size: 16px;
	margin-bottom: 2px;
}

.blocks-holder .block-ribbon .left .block-title a {
	text-decoration: none;
	color: #49494b;
}

.blocks-holder .block-ribbon .left .block-date {
	font-size: 12px;
	text-align: right;
	color: #7b7b7b;
}

.blocks-holder .block-ribbon .right {
	float: right;
	width: 15px;
	height: 96px;
	background: url(../img/sprites.png) no-repeat 0px -579px;
}

/* TWITTER READER ------------------------------------------------------------*/
.twitter-reader {
	position: relative;
	width: 970px;
	margin: 0px auto 20px auto;
	padding-top: 25px;
	color: #555555;
	min-height: 60px;
	font-style: italic;
	border-top: 1px dashed #ccc;
	z-index: 225;
}

#twitter-holder {
	display: block;
	margin-left: 20px;
	width: 940px;
	min-height: 80px;
	text-align: center;
}

#twitter-holder .twitter-entry,#twitter-holder .follow-me {
	font-size: 18px;
	line-height: 1.5em;
}

.twitter-time {
	color: #ccc;
}

.twitter-home {
	position: relative;
	margin-top: -70px;
}

/* PORTFOLIO SIDEBAR ------------------------------------------------------------*/
.portfolio-sidebar {
	width: 220px;
	float: left;
	margin-left: 10px;
}

.portfolio-sidebar h2 {
	display: block;
	font-size: 24px;
	background: url(../img/sprites.png) no-repeat -950px -93px;
	padding-left: 24px;
}

.portfolio-sidebar ul {
	display: block;
	overflow: hidden;
	margin: 0px 30px 0px 15px;
	font-size: 20px;
}

.portfolio-sidebar ul li {
	display: block;
	border-bottom: 1px solid #999999;
	padding: 7px 0px;
}

.portfolio-sidebar ul li a {
	color: #999999;
	text-decoration: none;
}

/* PORTFOLIO CONTENT ------------------------------------------------------------*/
.portfolio-image {
	margin-bottom: 20px;
}

.portfolio-content {
	width: 720px;
	float: left;
}

.portfolio-content .name {
	font-size: 24px;
	color: #49494b;
}

.portfolio-content .sub-name {
	font-size: 16px;
	color: #999999;
}

.portfolio-thumbs {
	display: block;
	overflow: hidden;
}

.portfolio-thumbs li {
	display: block;
	float: left;
	width: 220px;
	margin: 0px 10px 20px 10px;
}

.portfolio-thumbs li a {
	text-decoration: none;
	color: #333333;
}

.portfolio-thumbs li .name {
	font-size: 18px;
}

.portfolio-thumbs li .sub-name {
	color: #999999;
	font-size: 12px;
}

.portfolio-thumbs li img {
	border: 1px solid #fff;
	-webkit-box-shadow: 0 0 3px #000;
	-moz-box-shadow: 0 0 3px #000;
	box-shadow: 0 0 3px #000;
}

/* SINGLE PORTFOLIO MINI GALLERY-------------------------------------------------------*/
.mini-gallery-holder {
	width: 400px;
	float: left;
	background: url(../img/sprites.png) no-repeat -950px -667px;
	margin-bottom: 20px;
}

.mini-gallery {
	display: block;
	overflow: hidden;
	margin-left: 10px;
}

.mini-gallery li {
	display: block;
	float: left;
	margin: 0px 8px 12px 8px;
}

.mini-gallery li img {
	border: 1px solid #fff;
	-webkit-box-shadow: 0 0 3px #000;
	-moz-box-shadow: 0 0 3px #000;
	box-shadow: 0 0 3px #000;
}

/* SINGLE PORTFOLIO CONTENT-------------------------------------------------------*/
.portfolio-content {
	width: 560px;
	float: left;
	margin-bottom: 20px;
}

/* PORTFOLIO RELATED PROJECTS ----------------------------------------------------------*/
.related-projects h1 {
	margin-left: 10px;
}

.related-projects-list {
	display: block;
	overflow: hidden;
	margin-bottom: 20px;
}

.related-projects-list li {
	display: block;
	float: left;
	margin-top: 10px;
	margin-left: 8px;
	margin-right: 10px;
}

.related-projects-list li img {
	border: 1px solid #fff;
	-webkit-box-shadow: 0 0 3px #000;
	-moz-box-shadow: 0 0 3px #000;
	box-shadow: 0 0 3px #000;
}

/* PAGER ------------------------------------------------------------*/
.pager {
	overflow: hidden;
	margin-right: 20px;
	margin-top: 20px;
	margin-bottom: 20px;
}

/* PORTFOLIO PAGER ------------------------------------------------------------*/
.portfolio-pager {
	overflow: hidden;
	display: block;
	height: 32px;
	float: right;
}

.portfolio-pager li {
	display: block;
	width: 25px;
	height: 32px;
	float: left;
	background: url(../img/sprites.png) no-repeat;
	margin-left: 10px;
}

.portfolio-pager li a {
	display: block;
	width: 100%;
	height: 100%;
	text-indent: -9000px;
}

.portfolio-pager li:first-child {
	background-position: -104px -343px;
}

.portfolio-pager li:last-child {
	background-position: -142px -343px;
}

/* GALLERY ------------------------------------------------------------*/
/* 4 cols default */
.gallery {
	overflow: hidden;
	width: 100%;
}

.gallery li {
	display: block;
	position: relative;
	width: 220px;
	height: 208px;
	float: left;
    margin: 10px 10px 65px;
}

.gallery li img {
	border: 1px solid #fff;
	-webkit-box-shadow: 0 0px 3px #000;
	-moz-box-shadow: 0 0px 3px #000;
	box-shadow: 0 0px 3px #000;
    height: 220px;
    width: 300px;
}

.gallery.two-cols li {
	width: 458px;
}

.gallery.three-cols li {
	width: 300px;
}

.gallery.four-cols li {
	width: 220px;
}

.gallery li span {
	display: none;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: url(../img/over.png) no-repeat top center;
}

.gallery li:hover span {
	display: block;
}

.gallery li em {
	display: block;
	font-size: 16px;
	font-style: normal;
}

/* PORTFOLIO FILTER ------------------------------------------------------------*/
#portfolio-filter {
	display: none;
	margin-bottom: 10px;
	margin-left: 10px;
	overflow: hidden;
}

#portfolio-filter li {
	display: block;
	float: left;
	margin-right: 8px;
}

#portfolio-filter li:first-child {
	color: #49494b;
	margin-top: 5px;
}

/* GALLERY PAGER ------------------------------------------------------------*/
.gallery-pager {
	overflow: hidden;
	display: block;
	height: 31px;
	margin-left: 0px;
	margin-top: 20px;
	margin-bottom: 20px;
	float: right;
}

.gallery-pager li {
	display: block;
	width: 25px;
	height: 31px;
	float: left;
	background: url(../img/sprites.png) no-repeat;
	background-position: -176px -343px;
	margin-left: 5px;
}

.gallery-pager li a {
	display: block;
	width: 100%;
	height: 100%;
	text-align: center;
	text-decoration: none;
	margin-top: 3px;
	font-size: 12px;
	color: #49494b;
}

.gallery-pager li:hover,.gallery-pager li.active {
	background-position: -287px -343px;
}

.gallery-pager li:first-child {
	background-position: -104px -343px;
	text-indent: -9000px;
}

.gallery-pager li:last-child {
	background-position: -142px -343px;
	text-indent: -9000px;
}

.gallery-pager li:first-child:hover {
	background-position: -211px -343px;
}

.gallery-pager li:last-child:hover {
	background-position: -249px -343px;
}

/* BLOG ------------------------------------------------------------*/
#posts {
	width: 640px;
	float: left;
	margin-bottom: 20px;
}

.post {
	margin-bottom: 20px;
	overflow: hidden;
}

#posts .post-header {
	position: relative;
	margin-bottom: 5px;
	margin-left: 10px;
}

#posts .single {
	margin-left: 0px;
}

#posts .post-header .post-title {
	width: 580px;
}

#posts .post-header .post-title a {
	font-size: 24px;
	color: #333333;
	text-decoration: none;
}

#posts .post-header .post-meta {
	font-size: 12px;
	color: #999999;
}

#posts .post-header .post-meta a {
	color: #999999;
	text-decoration: none;
}

#posts .post-header .n-comments {
	position: absolute;
	color: #fff;
	text-align: center;
	top: 0px;
	right: 20px;
	width: 36px;
	height: 30px;
	background: url(../img/sprites.png) no-repeat -394px -343px;
}

#posts .post-img {
	position: relative;
}

#posts .post-img img {
	border: 1px solid #fff;
	/* shadows*/
	-webkit-box-shadow: 0px 0px 3px #000;
	-moz-box-shadow: 0px 0px 3px #000;
	box-shadow: 0px 0px 3px #000;
}

#posts .post-img .date {
	position: absolute;
	top: 20px;
	left: 0px;
	width: 103px;
	height: 67px;
	background: url(../img/sprites.png) no-repeat 0px -334px;
}

#posts .date .day {
	font-size: 35px;
	position: absolute;
	top: 20px;
	left: 10px;
}

#posts .date .month {
	font-size: 13px;
	color: #b3b2b2;
	position: absolute;
	top: 20px;
	left: 55px;
	line-height: 1em;
}

#posts .post-img img {
	margin-left: 11px;
}

#posts .excerpt {
	margin-left: 10px;
}

/* SIDEBAR ------------------------------------------------------------*/
#sidebar {
	width: 310px;
	float: left;
	margin-top: 0px;
	margin-left: 10px;
	background: url(../img/sprites.png) no-repeat -950px -667px;
}

#sidebar a {
	color: #1f1f1f;
	text-decoration: none;
}

#sidebar li {
	font-size: 20px;
}

#sidebar>li {
	margin-left: 20px;
}

#sidebar li h2 {
	display: block;
	font-size: 24px;
	line-height: 1.2em;
}

#sidebar li ul li {
	display: block;
	border-bottom: 1px solid #999999;
	padding: 7px 0px;
}

#sidebar ul li a {
	color: #999999;
	text-decoration: none;
}

#sidebar li ul li:last-child {
	border: none;
}

/* RECENT-POSTS ------------------------------------------------------------*/
#sidebar li.recent-posts li {
	display: block;
	overflow: hidden;
	padding: 5px 0px;
	margin: 5px 0px 5px 0px;
	border: none 0px;
}

#sidebar li.recent-posts img {
	float: left;
	margin-right: 10px;
	border: 1px solid gray;
	width: 48px;
	height: 48px;
}

#sidebar li.recent-posts div.recent-excerpt {
	display: block;
	font-size: 14px;
	line-height: 1.5em;
	width: 150px;
	float: left;
}

ul#sidebar li.recent-posts div.recent-excerpt a {
	font-size: 14px;
	line-height: 1.5em;
	text-decoration: none;
}

/* COMMENTS ------------------------------------------------------------*/
.comments-list {
	display: block;
}

.comments-header {
	margin-bottom: 25px;
	margin-top: 30px;
	overflow: hidden;
}

.comments-header .n-comments {
	display: block;
	float: left;
	text-align: center;
	color: #fff;
	width: 36px;
	height: 30px;
	background: url(../img/sprites.png) no-repeat -394px -343px;
}

.comments-header .text {
	font-size: 20px;
	margin-left: 5px;
}

.comments-list li {
	display: block;
	margin-bottom: 0px;
	padding: 10px 10px 10px 0px;
	line-height: 1.5em;
}

.comments-list li .comment-wrap {
	overflow: visible;
	position: relative;
	padding: 0px 0px 20px 0px;
}

.comments-list li a {
	color: #1f1f1f;
	text-decoration: none;
}

.comments-list li .comments-right {
	min-height: 80px;
	overflow: hidden;
	padding-left: 20px;
	position: relative;
}

.comments-list li img {
	display: block;
	float: left;
	margin: 0px 12px 20px 0px;
}

.comments-list .meta-date {
	display: block;
	float: right;
	color: #999999;
	font-style: italic;
}

.comments-list li div.brief {
	font-size: 14px;
	line-height: 1.5em;
}

.comments-list .edit-comment a {
	font-size: 14px;
	color: #999999;
}

/* LEAVE COMMENT -------------------------------------------------------*/
.leave-comment {
	
}

/* FORMS ------------------------------------------------------------*/
#contactForm,#commentform,#contactForm {
	margin-bottom: 18px;
}

#commentform p,#contactForm p {
	margin-bottom: 0px;
}

#contactForm input,#contactForm textarea,#commentform input,#commentform textarea
	{
	color: #1f1f1f;
	font-size: 14px;
	padding: 4px 5px;
	background: #d2d2d2 url(../img/bgs/strips-thin.png);
	border: none transparent;
}

#contactForm input,#contactForm textarea,#commentform input,#commentform textarea
	{
	width: 97%;
	margin-bottom: 6px;
	font-family: Tahoma, Arial;
	resize: none;
}

#commentform input,#commentform textarea {
	width: 97%;
}

#contactForm #submit,#commentform input#submit {
	width: 76px;
	background: url(../img/sprites.png) no-repeat 0px -765px;
	border: none;
	margin-top: 0px;
	padding: 5px 0px;
}

#contactForm label,#commentform label {
	display: block;
	font-size: 14px;
	line-height: 1.5em;
	font-weight: light;
}

.mar_B_Contact {
	margin-bottom: 20px !important;
}

/* STAFF ------------------------------------------------------------*/
.staff li {
	overflow: hidden;
	margin-bottom: 40px;
}

.staff li img {
	float: left;
}

.staff .information {
	float: left;
	margin-left: 20px;
	width: 550px;
}

.staff .information .header {
	background: url(../img/sprites.png) no-repeat -950px -667px;
	padding-left: 20px;
	margin-bottom: 5px;
}

.staff .information .header .name {
	font-size: 24px;
}

.staff .information .header .contact {
	color: #999999;
}

.staff .information .header .contact a {
	text-decoration: none;
}

/* FOOTER ------------------------------------------------------------*/
#footer {
    background: url("../img/bgs/webtreats/webtreats_blue_creme_pattern_87.jpg") repeat scroll 0 0 #E5E3DC;
    border-top: 1px solid #FFFFFF;
    direction: ltr;
    position: relative;
    width: 100%;
}

#footer .degree {
	background: url(../img/top-degree.png) repeat-x;
	height: 100%;
	width: 100%;
	padding-top: 20px;
	padding-bottom: 20px;
}

/* SOCIAL BAR ------------------------------------------------------------*/
#social-bar {
	display: block;
	position: absolute;
	top: -75px;
	left: 0px;
	height: 74px;
	width: 1000px;
	overflow: hidden;
	color: #49494b;
	font-size: 24px;
	background: url(../img/social-bg.png) no-repeat;
	z-index: 222;
}

#social-bar ul.follow-us {
    display: block;
    float: right;
    margin-right: 30px;
    margin-top: 25px;
    overflow: hidden;
}

#social-bar ul.follow-us li {
    display: block;
    float: right;
    height: 36px;
    margin-top: 3px;
}

#social-bar ul.follow-us li:first-child {
	margin-top: 10px;
	margin-right: 6px;
}

#social-bar ul.follow-us li:last-child {
	margin-right: 10px;
}

#social-bar ul.follow-us li a {
	display: block;
	height: 32px;
	width: 32px;;
}

/* FOOTER-COLS ------------------------------------------------------------*/
#footer ul.footer-cols {
	display: block;
	overflow: hidden;
	font-size: 12px;
	padding-top: 20px;
}

#footer ul.footer-cols {
	color: #f0efeb;
}

#footer ul.footer-cols a {
	color: #f0efeb;
}

#footer ul.footer-cols li.col {
    display: block;
    float: right;
    margin-bottom: 20px;
    margin-left: 10px;
    margin-right: 10px;
    width: 220px;
}

#footer ul.footer-cols li.col ul {
	
}

#footer ul.footer-cols li.col ul li {
    margin-bottom: 0.3em;
    margin-right: 141px;
    text-align: right;
}

#footer ul.footer-cols li.col ul li a {
	text-decoration: none;
	line-height: 1.5em;
	font-weight: lighter;
	color: #f0efeb;
}

#footer ul.footer-cols li.col h6 {
	color: #fff;
	text-decoration: none;
	font-size: 20px;
	margin: 20px 15px 5px 0px;
	background: url(../img/sprites.png) no-repeat 0px -884px;
	padding-left: 17px;
}

#footer ul.footer-cols li.col ul li a:hover {
	text-decoration: underline;
}

#footer ul.footer-cols li.col p {
	line-height: 1.5em;
}

/* BOTTOM ------------------------------------------------------------*/
#bottom {
    background: none repeat scroll 0 0 #0D0D0D;
    border-top: 1px solid #424345;
    color: #989797;
    font-size: 12px;
    line-height: 1.5em;
    text-align: left;
    width: 100%;
}

#bottom .wrapper {
	background: url(../img/bottom-texture.png) no-repeat;
	width: 960px;
	padding: 10px 20px;
}

#bottom a {
	color: #fff;
}

/* Latest News Slide Show --------------------------------------------------------------------*/
.da-slider{
	width: 100%;
	min-width: 520px;
	height: 265px;
	position: relative;
	margin: 30px auto;
	overflow: hidden;
	background: transparent url(../images/waves-gray.gif) repeat 0% 0%;
	border-top: 8px solid #49494B;
	border-bottom: 8px solid #49494B;
	box-shadow: 0px 1px 1px rgba(0,0,0,0.2), 0px -2px 1px #fff;
	-webkit-transition: background-position 1s ease-out 0.3s;
	-moz-transition: background-position 1s ease-out 0.3s;
	-o-transition: background-position 1s ease-out 0.3s;
	-ms-transition: background-position 1s ease-out 0.3s;
	transition: background-position 1s ease-out 0.3s;
}
.da-slide{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	/*font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;)*/
	text-align: left;
}
.da-slide-current{
	z-index: 1000;
}
.da-slider-fb .da-slide{
	left: 100%;
}
.da-slider-fb  .da-slide.da-slide-current{
	left: 0px;
}
.da-slide h2,
.da-slide p,
.da-slide .da-link,
.da-slide .da-img{
	position: absolute;
	opacity: 0;
	left: 110%;
}
.da-slider-fb .da-slide h2,
.da-slider-fb .da-slide p,
.da-slider-fb .da-slide .da-link{
	left: 10%;
	opacity: 1;
}
.da-slider-fb .da-slide .da-img{
	left: 60%;
	opacity: 1;
}
.da-slide h2 {
    color: #FFFFFF;
    /*font-family: 'Economica',Arial,sans-serif;*/
    font-size: 55px;
    font-weight: 700;
    text-shadow: 2px 3px 1px gray;
    top: 15px;
    white-space: nowrap;
    width: 50%;
    z-index: 10;
}
.da-slide p {
    color: #3B3B40;
    /*font-family: 'Economica',Arial,sans-serif;*/
    font-size: 18px;
    font-weight: 400;
    height: 80px;
    line-height: 26px;
    overflow: hidden;
    text-shadow: 1px 1px 1px #FFFFFF;
    top: 89px;
    width: 45%;
}
.da-slide .da-img{
	text-align: center;
	width: 30%;
	top: 0px;
	height: 256px;
	line-height: 320px;
	left: 110%; /*60%*/
}
.da-slide .da-link {
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.5);
    border: 8px solid lightgray;
    border-radius: 30px 30px 30px 30px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    color: gray;
    font-size: 18px;
    line-height: 30px;
    padding: 2px 20px 0;
    text-align: center;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    top: 195px;
    width: 100px;
    cursor: pointer;
}
.da-slide .da-link:hover{
	background: rgba(255,255,255,0.3);
}
.da-dots{
	width: 100%;
	position: absolute;
	text-align: center;
	left: 0px;
	bottom: 20px;
	z-index: 2000;
	-moz-user-select: none;
	-webkit-user-select: none;
}
.da-dots span{
	display: inline-block;
	position: relative;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: none repeat scroll 0 0 #49494B;
	margin: 3px;
	cursor: pointer;
	box-shadow: 
		1px 1px 1px rgba(0,0,0,0.1) inset, 
		1px 1px 1px rgba(255,255,255,0.1);
}
.da-dots span.da-dots-current:after{
	content: '';
	width: 8px;
	height: 8px;
	position: absolute;
	top: 2px;
	left: 2px;
	border-radius: 50%;
	background: rgb(255,255,255);
	background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(47%,rgba(246,246,246,1)), color-stop(100%,rgba(237,237,237,1)));
	background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);
	background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);
	background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);
	background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 );
}
.da-arrows{
	-moz-user-select: none;
	-webkit-user-select: none;
}
.da-arrows span{
	position: absolute;
	top: 50%;
	height: 30px;
	width: 30px;
	border-radius: 50%;
	background: none repeat scroll 0 0 #49494B;
	cursor: pointer;
	z-index: 2000;
	opacity: 0;
	box-shadow: 
		1px 1px 1px rgba(0,0,0,0.1) inset, 
		1px 1px 1px rgba(255,255,255,0.1);
	-webkit-transition: opacity 0.4s ease-in-out-out 0.2s;
	-moz-transition: opacity 0.4s ease-in-out-out 0.2s;
	-o-transition: opacity 0.4s ease-in-out-out 0.2s;
	-ms-transition: opacity 0.4s ease-in-out-out 0.2s;
	transition: opacity 0.4s ease-in-out-out 0.2s;
}
.da-slider:hover .da-arrows span{
	opacity: 1;
}
.da-arrows span:after{
	content: '';
	position: absolute;
	width: 20px;
	height: 20px;
	top: 5px;
	left: 5px;
	background: transparent url(../images/arrows.png) no-repeat top left;
	border-radius: 50%;
	box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
.da-arrows span:hover:after{
	box-shadow: 1px 1px 4px rgba(0,0,0,0.3);
}
.da-arrows span:active:after{
	box-shadow: 1px 1px 1px rgba(255,255,255,0.1);
}
.da-arrows span.da-arrows-next:after{
	background-position: top right;
}
.da-arrows span.da-arrows-prev{
	left: 15px;
}
.da-arrows span.da-arrows-next{
	right: 15px;
}

.da-slide-current h2,
.da-slide-current p,
.da-slide-current .da-link{
	left: 10%;
	opacity: 1;
}
.da-slide-current .da-img{
	left: 60%;
	opacity: 1;
}
/* Animation classes and animations */

/* Slide in from the right*/
.da-slide-fromright h2{
	-webkit-animation: fromRightAnim1 0.6s ease-in-out 0.8s both;
	-moz-animation: fromRightAnim1 0.6s ease-in-out 0.8s both;
	-o-animation: fromRightAnim1 0.6s ease-in-out 0.8s both;
	-ms-animation: fromRightAnim1 0.6s ease-in-out 0.8s both;
	animation: fromRightAnim1 0.6s ease-in-out 0.8s both;
}
.da-slide-fromright p{
	-webkit-animation: fromRightAnim2 0.6s ease-in-out 0.8s both;
	-moz-animation: fromRightAnim2 0.6s ease-in-out 0.8s both;
	-o-animation: fromRightAnim2 0.6s ease-in-out 0.8s both;
	-ms-animation: fromRightAnim2 0.6s ease-in-out 0.8s both;
	animation: fromRightAnim2 0.6s ease-in-out 0.8s both;
}
.da-slide-fromright .da-link{
	-webkit-animation: fromRightAnim3 0.4s ease-in-out 1.2s both;
	-moz-animation: fromRightAnim3 0.4s ease-in-out 1.2s both;
	-o-animation: fromRightAnim3 0.4s ease-in-out 1.2s both;
	-ms-animation: fromRightAnim3 0.4s ease-in-out 1.2s both;
	animation: fromRightAnim3 0.4s ease-in-out 1.2s both;
}
.da-slide-fromright .da-img{
	-webkit-animation: fromRightAnim4 0.6s ease-in-out 0.8s both;
	-moz-animation: fromRightAnim4 0.6s ease-in-out 0.8s both;
	-o-animation: fromRightAnim4 0.6s ease-in-out 0.8s both;
	-ms-animation: fromRightAnim4 0.6s ease-in-out 0.8s both;
	animation: fromRightAnim4 0.6s ease-in-out 0.8s both;
}
@-webkit-keyframes fromRightAnim1{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 10%; opacity: 1; }
}
@-webkit-keyframes fromRightAnim2{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 10%; opacity: 1; }
}
@-webkit-keyframes fromRightAnim3{
	0%{ left: 110%; opacity: 0; }
	1%{ left: 10%; opacity: 0; }
	100%{ left: 10%; opacity: 1; }
}
@-webkit-keyframes fromRightAnim4{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 60%; opacity: 1; }
}

@-moz-keyframes fromRightAnim1{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 10%; opacity: 1; }
}
@-moz-keyframes fromRightAnim2{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 10%; opacity: 1; }
}
@-moz-keyframes fromRightAnim3{
	0%{ left: 110%; opacity: 0; }
	1%{ left: 10%; opacity: 0; }
	100%{ left: 10%; opacity: 1; }
}
@-moz-keyframes fromRightAnim4{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 60%; opacity: 1; }
}

@-o-keyframes fromRightAnim1{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 10%; opacity: 1; }
}
@-o-keyframes fromRightAnim2{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 10%; opacity: 1; }
}
@-o-keyframes fromRightAnim3{
	0%{ left: 110%; opacity: 0; }
	1%{ left: 10%; opacity: 0; }
	100%{ left: 10%; opacity: 1; }
}
@-o-keyframes fromRightAnim4{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 60%; opacity: 1; }
}

@-ms-keyframes fromRightAnim1{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 10%; opacity: 1; }
}
@-ms-keyframes fromRightAnim2{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 10%; opacity: 1; }
}
@-ms-keyframes fromRightAnim3{
	0%{ left: 110%; opacity: 0; }
	1%{ left: 10%; opacity: 0; }
	100%{ left: 10%; opacity: 1; }
}
@-ms-keyframes fromRightAnim4{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 60%; opacity: 1; }
}

@keyframes fromRightAnim1{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 10%; opacity: 1; }
}
@keyframes fromRightAnim2{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 10%; opacity: 1; }
}
@keyframes fromRightAnim3{
	0%{ left: 110%; opacity: 0; }
	1%{ left: 10%; opacity: 0; }
	100%{ left: 10%; opacity: 1; }
}
@keyframes fromRightAnim4{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 60%; opacity: 1; }
}
/* Slide in from the left*/
.da-slide-fromleft h2{
	-webkit-animation: fromLeftAnim1 0.6s ease-in-out 0.6s both;
	-moz-animation: fromLeftAnim1 0.6s ease-in-out 0.6s both;
	-o-animation: fromLeftAnim1 0.6s ease-in-out 0.6s both;
	-ms-animation: fromLeftAnim1 0.6s ease-in-out 0.6s both;
	animation: fromLeftAnim1 0.6s ease-in-out 0.6s both;
}
.da-slide-fromleft p{
	-webkit-animation: fromLeftAnim2 0.6s ease-in-out 0.6s both;
	-moz-animation: fromLeftAnim2 0.6s ease-in-out 0.6s both;
	-o-animation: fromLeftAnim2 0.6s ease-in-out 0.6s both;
	-ms-animation: fromLeftAnim2 0.6s ease-in-out 0.6s both;
	animation: fromLeftAnim2 0.6s ease-in-out 0.6s both;
}
.da-slide-fromleft .da-link{
	-webkit-animation: fromLeftAnim3 0.4s ease-in-out 1.2s both;
	-moz-animation: fromLeftAnim3 0.4s ease-in-out 1.2s both;
	-o-animation: fromLeftAnim3 0.4s ease-in-out 1.2s both;
	-ms-animation: fromLeftAnim3 0.4s ease-in-out 1.2s both;
	animation: fromLeftAnim3 0.4s ease-in-out 1.2s both;
}
.da-slide-fromleft .da-img{
	-webkit-animation: fromLeftAnim4 0.6s ease-in-out 0.6s both;
	-moz-animation: fromLeftAnim4 0.6s ease-in-out 0.6s both;
	-o-animation: fromLeftAnim4 0.6s ease-in-out 0.6s both;
	-ms-animation: fromLeftAnim4 0.6s ease-in-out 0.6s both;
	animation: fromLeftAnim4 0.6s ease-in-out 0.6s both;
}
@-webkit-keyframes fromLeftAnim1{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 10%; opacity: 1; }
}
@-webkit-keyframes fromLeftAnim2{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 10%; opacity: 1; }
}
@-webkit-keyframes fromLeftAnim3{
	0%{ left: -110%; opacity: 0; }
	1%{ left: 10%; opacity: 0; }
	100%{ left: 10%; opacity: 1; }
}
@-webkit-keyframes fromLeftAnim4{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 60%; opacity: 1; }
}

@-moz-keyframes fromLeftAnim1{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 10%; opacity: 1; }
}
@-moz-keyframes fromLeftAnim2{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 10%; opacity: 1; }
}
@-moz-keyframes fromLeftAnim3{
	0%{ left: -110%; opacity: 0; }
	1%{ left: 10%; opacity: 0; }
	100%{ left: 10%; opacity: 1; }
}
@-moz-keyframes fromLeftAnim4{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 60%; opacity: 1; }
}

@-o-keyframes fromLeftAnim1{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 10%; opacity: 1; }
}
@-o-keyframes fromLeftAnim2{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 10%; opacity: 1; }
}
@-o-keyframes fromLeftAnim3{
	0%{ left: -110%; opacity: 0; }
	1%{ left: 10%; opacity: 0; }
	100%{ left: 10%; opacity: 1; }
}
@-o-keyframes fromLeftAnim4{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 60%; opacity: 1; }
}

@-ms-keyframes fromLeftAnim1{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 10%; opacity: 1; }
}
@-ms-keyframes fromLeftAnim2{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 10%; opacity: 1; }
}
@-ms-keyframes fromLeftAnim3{
	0%{ left: -110%; opacity: 0; }
	1%{ left: 10%; opacity: 0; }
	100%{ left: 10%; opacity: 1; }
}
@-ms-keyframes fromLeftAnim4{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 60%; opacity: 1; }
}

@keyframes fromLeftAnim1{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 10%; opacity: 1; }
}
@keyframes fromLeftAnim2{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 10%; opacity: 1; }
}
@keyframes fromLeftAnim3{
	0%{ left: -110%; opacity: 0; }
	1%{ left: 10%; opacity: 0; }
	100%{ left: 10%; opacity: 1; }
}
@keyframes fromLeftAnim4{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 60%; opacity: 1; }
}
/* Slide out to the right */
.da-slide-toright h2{
	-webkit-animation: toRightAnim1 0.6s ease-in-out 0.6s both;
	-moz-animation: toRightAnim1 0.6s ease-in-out 0.6s both;
	-o-animation: toRightAnim1 0.6s ease-in-out 0.6s both;
	-ms-animation: toRightAnim1 0.6s ease-in-out 0.6s both;
	animation: toRightAnim1 0.6s ease-in-out 0.6s both;
}
.da-slide-toright p{
	-webkit-animation: toRightAnim2 0.6s ease-in-out 0.3s both;
	-moz-animation: toRightAnim2 0.6s ease-in-out 0.3s both;
	-o-animation: toRightAnim2 0.6s ease-in-out 0.3s both;
	-ms-animation: toRightAnim2 0.6s ease-in-out 0.3s both;
	animation: toRightAnim2 0.6s ease-in-out 0.3s both;
}
.da-slide-toright .da-link{
	-webkit-animation: toRightAnim3 0.4s ease-in-out both;
	-moz-animation: toRightAnim3 0.4s ease-in-out both;
	-o-animation: toRightAnim3 0.4s ease-in-out both;
	-ms-animation: toRightAnim3 0.4s ease-in-out both;
	animation: toRightAnim3 0.4s ease-in-out both;
}
.da-slide-toright .da-img{
	-webkit-animation: toRightAnim4 0.6s ease-in-out both;
	-moz-animation: toRightAnim4 0.6s ease-in-out both;
	-o-animation: toRightAnim4 0.6s ease-in-out both;
	-ms-animation: toRightAnim4 0.6s ease-in-out both;
	animation: toRightAnim4 0.6s ease-in-out both;
}
@-webkit-keyframes toRightAnim1{
	0%{ left: 10%;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}
@-webkit-keyframes toRightAnim2{
	0%{ left: 10%;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}
@-webkit-keyframes toRightAnim3{
	0%{ left: 10%;  opacity: 1; }
	99%{ left: 10%; opacity: 0; }
	100%{ left: 100%; opacity: 0; }
}
@-webkit-keyframes toRightAnim4{
	0%{ left: 60%;  opacity: 1; }
	30%{ left: 55%;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}

@-moz-keyframes toRightAnim1{
	0%{ left: 10%;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}
@-moz-keyframes toRightAnim2{
	0%{ left: 10%;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}
@-moz-keyframes toRightAnim3{
	0%{ left: 10%;  opacity: 1; }
	99%{ left: 10%; opacity: 0; }
	100%{ left: 100%; opacity: 0; }
}
@-moz-keyframes toRightAnim4{
	0%{ left: 60%;  opacity: 1; }
	30%{ left: 55%;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}

@-o-keyframes toRightAnim1{
	0%{ left: 10%;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}
@-o-keyframes toRightAnim2{
	0%{ left: 10%;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}
@-o-keyframes toRightAnim3{
	0%{ left: 10%;  opacity: 1; }
	99%{ left: 10%; opacity: 0; }
	100%{ left: 100%; opacity: 0; }
}
@-o-keyframes toRightAnim4{
	0%{ left: 60%;  opacity: 1; }
	30%{ left: 55%;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}

@-ms-keyframes toRightAnim1{
	0%{ left: 10%;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}
@-ms-keyframes toRightAnim2{
	0%{ left: 10%;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}
@-ms-keyframes toRightAnim3{
	0%{ left: 10%;  opacity: 1; }
	99%{ left: 10%; opacity: 0; }
	100%{ left: 100%; opacity: 0; }
}
@-ms-keyframes toRightAnim4{
	0%{ left: 60%;  opacity: 1; }
	30%{ left: 55%;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}

@keyframes toRightAnim1{
	0%{ left: 10%;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}
@keyframes toRightAnim2{
	0%{ left: 10%;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}
@keyframes toRightAnim3{
	0%{ left: 10%;  opacity: 1; }
	99%{ left: 10%; opacity: 0; }
	100%{ left: 100%; opacity: 0; }
}
@keyframes toRightAnim4{
	0%{ left: 60%;  opacity: 1; }
	30%{ left: 55%;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}
/* Slide out to the left*/
.da-slide-toleft h2{
	-webkit-animation: toLeftAnim1 0.6s ease-in-out both;
	-moz-animation: toLeftAnim1 0.6s ease-in-out both;
	-o-animation: toLeftAnim1 0.6s ease-in-out both;
	-ms-animation: toLeftAnim1 0.6s ease-in-out both;
	animation: toLeftAnim1 0.6s ease-in-out both;
}
.da-slide-toleft p{
	-webkit-animation: toLeftAnim2 0.6s ease-in-out 0.3s both;
	-moz-animation: toLeftAnim2 0.6s ease-in-out 0.3s both;
	-o-animation: toLeftAnim2 0.6s ease-in-out 0.3s both;
	-ms-animation: toLeftAnim2 0.6s ease-in-out 0.3s both;
	animation: toLeftAnim2 0.6s ease-in-out 0.3s both;
}
.da-slide-toleft .da-link{
	-webkit-animation: toLeftAnim3 0.6s ease-in-out 0.6s both;
	-moz-animation: toLeftAnim3 0.6s ease-in-out 0.6s both;
	-o-animation: toLeftAnim3 0.6s ease-in-out 0.6s both;
	-ms-animation: toLeftAnim3 0.6s ease-in-out 0.6s both;
	animation: toLeftAnim3 0.6s ease-in-out 0.6s both;
}
.da-slide-toleft .da-img{
	-webkit-animation: toLeftAnim4 0.6s ease-in-out 0.5s both;
	-moz-animation: toLeftAnim4 0.6s ease-in-out 0.5s both;
	-o-animation: toLeftAnim4 0.6s ease-in-out 0.5s both;
	-ms-animation: toLeftAnim4 0.6s ease-in-out 0.5s both;
	animation: toLeftAnim4 0.6s ease-in-out 0.5s both;
}
@-webkit-keyframes toLeftAnim1{
	0%{ left: 10%;  opacity: 1; }
	30%{ left: 15%;  opacity: 1; }
	100%{ left: -50%; opacity: 0; }
}
@-webkit-keyframes toLeftAnim2{
	0%{ left: 10%;  opacity: 1; }
	30%{ left: 15%;  opacity: 1; }
	100%{ left: -50%; opacity: 0; }
}
@-webkit-keyframes toLeftAnim3{
	0%{ left: 10%;  opacity: 1; }
	100%{ left: -50%; opacity: 0; }
}
@-webkit-keyframes toLeftAnim4{
	0%{ left: 60%;  opacity: 1; }
	70%{ left: 30%;  opacity: 0; }
	100%{ left: -50%; opacity: 0; }
}

@-moz-keyframes toLeftAnim1{
	0%{ left: 10%;  opacity: 1; }
	30%{ left: 15%;  opacity: 1; }
	100%{ left: -50%; opacity: 0; }
}
@-moz-keyframes toLeftAnim2{
	0%{ left: 10%;  opacity: 1; }
	30%{ left: 15%;  opacity: 1; }
	100%{ left: -50%; opacity: 0; }
}
@-moz-keyframes toLeftAnim3{
	0%{ left: 10%;  opacity: 1; }
	100%{ left: -50%; opacity: 0; }
}
@-moz-keyframes toLeftAnim4{
	0%{ left: 60%;  opacity: 1; }
	70%{ left: 30%;  opacity: 0; }
	100%{ left: -50%; opacity: 0; }
}

@-o-keyframes toLeftAnim1{
	0%{ left: 10%;  opacity: 1; }
	30%{ left: 15%;  opacity: 1; }
	100%{ left: -50%; opacity: 0; }
}
@-o-keyframes toLeftAnim2{
	0%{ left: 10%;  opacity: 1; }
	30%{ left: 15%;  opacity: 1; }
	100%{ left: -50%; opacity: 0; }
}
@-o-keyframes toLeftAnim3{
	0%{ left: 10%;  opacity: 1; }
	100%{ left: -50%; opacity: 0; }
}
@-o-keyframes toLeftAnim4{
	0%{ left: 60%;  opacity: 1; }
	70%{ left: 30%;  opacity: 0; }
	100%{ left: -50%; opacity: 0; }
}

@-ms-keyframes toLeftAnim1{
	0%{ left: 10%;  opacity: 1; }
	30%{ left: 15%;  opacity: 1; }
	100%{ left: -50%; opacity: 0; }
}
@-ms-keyframes toLeftAnim2{
	0%{ left: 10%;  opacity: 1; }
	30%{ left: 15%;  opacity: 1; }
	100%{ left: -50%; opacity: 0; }
}
@-ms-keyframes toLeftAnim3{
	0%{ left: 10%;  opacity: 1; }
	100%{ left: -50%; opacity: 0; }
}
@-ms-keyframes toLeftAnim4{
	0%{ left: 60%;  opacity: 1; }
	70%{ left: 30%;  opacity: 0; }
	100%{ left: -50%; opacity: 0; }
}

@keyframes toLeftAnim1{
	0%{ left: 10%;  opacity: 1; }
	30%{ left: 15%;  opacity: 1; }
	100%{ left: -50%; opacity: 0; }
}
@keyframes toLeftAnim2{
	0%{ left: 10%;  opacity: 1; }
	30%{ left: 15%;  opacity: 1; }
	100%{ left: -50%; opacity: 0; }
}
@keyframes toLeftAnim3{
	0%{ left: 10%;  opacity: 1; }
	100%{ left: -50%; opacity: 0; }
}
@keyframes toLeftAnim4{
	0%{ left: 60%;  opacity: 1; }
	70%{ left: 30%;  opacity: 0; }
	100%{ left: -50%; opacity: 0; }
}

.img_traning_1 {
    height: 145px;
    left: 0;
    position: absolute;
    top: 250px;
    width: 230px;
}

.img_traning_2 {
    height: 145px;
    left: 0;
    position: absolute;
    top: 650px;
    width: 230px;
}

.img_traning_3 {
    height: 145px;
    left: 0;
    position: absolute;
    top: 990px;
    width: 230px;
}

.quality_img {
    height: 585px;
    left: 0;
    position: absolute;
    width: 220px;
}

/* Latest News Slide Show --------------------------------------------------------------------*/


#slider { /* Styles the <div> that contains everything slider related */
	width:600px;
	height:200px;
	position:relative;
	margin:40px auto 0;
	background-color:#362c30;
	border:10px solid #362c30;
	-moz-transition:all 150ms ease-in;  /* Allows all property values to animate on hover. For information on transitions, check out: http://w3schools.com/css3/css3_transitions.asp */
	-webkit-transition:all 150ms ease-in;
	-o-transition:all 150ms ease-in;
}
#slider:hover { /* Since we added the transistion property to #slider <div>, the previous properties will now animate to these new properties on hover */
	background-color:#fff;
	border:10px solid #fff;
}
#slider:hover #pause { /* When we hover over #slider <div>, our #pause <div> will become visible - which will display the pause icon */
	opacity:1;
}
#slider:hover #progress { /* When we hover over #slider <div>, the background color of our #progress <div> will become transparent. This will give the effect of the progress bar fading away on hover */
	background-color:rgba(255,255,255,0.0);
}
#slider:hover ul, #slider:hover #progress, #slider:hover #overlay { /* When we hover over the unordered list <ul> inside of #slider <div> (the slides), all of our slide related animations will pause */
	-moz-animation-play-state:paused;
	-webkit-animation-play-state:paused;
}
#mask { /* Creates the mask */
	overflow:hidden;
}
#pause { /* Styling our pause icon that appears when hovering over #slider <div> */
	width:600px;
	height:200px;
	position:absolute;
	top:0;
	opacity:0;
	background-image:url(../images/paused.png);
	background-position:566px 10px;
	background-repeat:no-repeat;
	pointer-events:none; /* This not-so-well-known property is very nifty. Since the #pause <div> (along with other <div>'s - which also use this property) are laying ontop of the slides, we need to be able to "click through" them to the slides/content below. Without this property, there would be a massive sumo sitting on top of all your content - blocking it from the user's mouse. However, it currently seems that pointer-events will only work in FireFox, Safari, and Chrome (as of 11/4/11). For more information: https://developer.mozilla.org/en/CSS/pointer-events */
	-moz-transition:all 150ms ease-in; /* This transition allows the #pause <div> to fade in when #slider <div> is hovered over */
	-webkit-transition:all 150ms ease-in;
	-o-transition:all 150ms ease-in;
}
#progress { /* The progress bar that will animate to the full width of the slide to show the duration of the slide */
	width:1px;
	height:1px;
	position:relative;
	top:-1px;
	background-color:#ffd000;
	-moz-transition:all 150ms linear; /* Transition allows #progress <div> to fade when #slider <div> is hovered over */
	-webkit-transition:all 150ms linear;
	-o-transition:all 150ms linear;
	-moz-animation:progress 18s infinite; /* The progress animation will increase #progress's <div> width from 1px to the full width of the slide (600px) */
	-webkit-animation:progress 18s infinite;
}
#overlay { /* Creates the cool gradient effect ontop of the slider */
	width:600px;
	height:200px;
	position:absolute;
	top:0;
	background-image:url(../images/overlay.png);
	background-position:center;
	background-repeat:no-repeat;
	pointer-events:none;
	opacity:0.5;
	-moz-animation:overlay-fade 18s infinite; /* The animation will fade #overlay <div> when the slider is finished */
	-webkit-animation:overlay-fade 18s infinite;
}
#slider ul { /* Styling the unordered list <ul> that contains our slides <li>'s */
	width:2400px; /* The calculated width of all the slides (4 slides x 600px in width) */
	position:relative;
	left:0px;
	margin:0;
	padding:0;
	list-style:none;
	-moz-animation:slide-animation 18s infinite; /* You can change the speed of the slide by changing the 18s. Make sure to update the speed of #overlay and #progress too. Keep in mind that this will also effect the speed of the transitions */
	-webkit-animation:slide-animation 18s infinite;
}
#slider li { /* Styling the list elements <li>'s that contain each slide */
	width:600px;
	height:200px;
	position:relative;
	display:inline; /* This aligns the <li>'s horizontally so that the <ul> can scroll horizontally. By default, <li>'s align vertically */
	float:left; /* Gets rid of mysterious spacing on the sides of the <li>'s */
	margin:0;
	padding:0;
	background-image:url(../images/loader.gif); /* Adds a loader GIF to each slide to show that content is loading */
	background-position:50% 50%;
	background-repeat:no-repeat;
}
#slider li span { /* Styling of the slider caption */
	display:block;
	width:560px;
	position:absolute; 
	bottom:0; 
	left:0;
	padding:15px 20px;
	pointer-events:none; /* Allows people to "click through" the captions to the content below. If you'd like people to be able to interact with the content in the caption (highlight text, click special links, etc), then remove this property */
	background-color:rgba(54,44,48,0.6);
	border-top:1px solid #362c30;
	text-shadow:1px 1px 1px #362c30;
}
#slider ul li span h2 { /* Styling of the slider caption */
	font-size:20px;
	line-height:30px;
	font-weight:normal;
	color:#fff;
	text-shadow:1px 1px 1px #362c30;
}
#slider ul li span p { /* Styling of the slider's paragraphs */
	font-size:14px;
	line-height:20px;
	font-weight:normal;
	color:#fff;
	text-shadow:1px 1px 1px #362c30;
}
@-webkit-keyframes slide-animation { /* Creates our animation that cycles through the slides for WebKit browsers. This is set up to cycle through 4 slides. If you plan on changing that number, you will have to divide 100 by the amount of slides and figure out the formula from there (while also changing the formulas for the progress and overlay-fade animations). Right now it's set up for each slide to take roughly 25% of the animation time. As you can see, this is where it can get a bit sticky changing the amount of slides. I'd suggest playing around with some basic animations first to get a handle on how they work. For an in depth explanation of animations, check out: http://www.w3schools.com/css3/css3_animations.asp */
	0% {opacity:0;}
	2% {opacity:1;}
	20% {left:0px; opacity:1;}
	22.5% {opacity:0.6;}
	25% {left:-600px; opacity:1;}
	45% {left:-600px; opacity:1;}
	47.5% {opacity:0.6;}
	50% {left:-1200px; opacity:1;}
	70% {left:-1200px; opacity:1;}
	72.5% {opacity:0.6;}
	75% {left:-1800px; opacity:1;}
	95% {opacity:1;}
	98% {left:-1800px; opacity:0;} /* The slider fades all the way out before resetting. If it didn't fade out, you'd see all of the slides shoot through real quick on there way back to the beginning. */
	100% {left:0px; opacity:0;}
}
@-moz-keyframes slide-animation { /* Creates the slide animation for FireFox */
	0% {opacity:0;}
	2% {opacity:1;}
	20% {left:0px; opacity:1;}
	22.5% {opacity:0.6;}
	25% {left:-600px; opacity:1;}
	45% {left:-600px; opacity:1;}
	47.5% {opacity:0.6;}
	50% {left:-1200px; opacity:1;}
	70% {left:-1200px; opacity:1;}
	72.5% {opacity:0.6;}
	75% {left:-1800px; opacity:1;}
	95% {opacity:1;}
	98% {left:-1800px; opacity:0;}
	100% {left:0px; opacity:0;}
}
@-webkit-keyframes progress { /* Animation for the progress bar in WebKit browsers */
	0% {width:0px; opacity:0;}
	2% {width:0px; opacity:1;}
	20% {width:600px; opacity:1;}
	22.5% {width:600px; opacity:0;}
	22.59% {width:0px;}
	25% {width:0px; opacity:1;}
	45% {width:600px; opacity:1;}
	47.5% {width:600px; opacity:0;}
	47.59% {width:0px;}
	50% {width:0px; opacity:1;}
	70% {width:600px; opacity:1;}
	72.5% {width:600px; opacity:0;}
	72.59% {width:0px;}
	75% {width:0px; opacity:1;}
	95% {width:600px; opacity:1;}
	98% {width:600px; opacity:0;}
	100% {width:0px; opacity:0;}
}
@-moz-keyframes progress { /* Animation for the progress bar in FireFox */
	0% {width:0px; opacity:0;}
	2% {width:0px; opacity:1;}
	20% {width:600px; opacity:1;}
	22.5% {width:600px; opacity:0;}
	22.59% {width:0px;}
	25% {width:0px; opacity:1;}
	45% {width:600px; opacity:1;}
	47.5% {width:600px; opacity:0;}
	47.59% {width:0px;}
	50% {width:0px; opacity:1;}
	70% {width:600px; opacity:1;}
	72.5% {width:600px; opacity:0;}
	72.59% {width:0px;}
	75% {width:0px; opacity:1;}
	95% {width:600px; opacity:1;}
	98% {width:600px; opacity:0;}
	100% {width:0px; opacity:0;}
}
@-webkit-keyframes overlay-fade { /* This animation fades #overlay <div> (the gradient on top of the slider) when the slide comes to an end on WebKit browsers */
	0% {opacity:0;}
	2% {opacity:0.5;}
	95% {opacity:0.5;}
	98% {opacity:0;}
	100% {opacity:0;}
}
@-moz-keyframes overlay-fade { /* Fades #overlay for FireFox */
	0% {opacity:0;}
	2% {opacity:0.5;}
	95% {opacity:0.5;}
	98% {opacity:0;}
	100% {opacity:0;}
}

.image_size {
	width: 600px;
	height: 200px;
}

.openAcco,.closeAcco {
	cursor: pointer;
}

.openAcco:HOVER,.closeAcco:HOVER {
	color: #3B5998 !important;
}

.open_close_container {
    margin-bottom: 20px;
}

.LatestNewsArabic {
    float: right;
}

.page-content ol li {
    width: 700px;
}

.container {
	direction:ltr;
}