/* -- CSS RESET -- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }

/* -- GENERAL --*/
html,body{font: normal 12px Myriad Pro,"Helvetica Neue", Helvetica; color:#0a4167; background:#f6f8f9}
.page_container{height:auto; position:relative; padding-left:10px; padding-right:10px; width:940px; margin:auto; font-family: 'open_sansregular'; font-size:11px; line-height:18px}
a{ text-decoration: none; text-overflow: ellipsis;  white-space: nowrap; overflow: hidden;  display: block; cursor:pointer; color:#fff}
.clear {clear: both; display: block; overflow: hidden; visibility: hidden;  width: 0;  height: 0;}

.width_820{width:820px}
/* 0.1 alignment */
.left_float{float:left}
.right_float{float:right}
/* 0.2 paddding & margin */
.marginright_two{margin-right:20px}
.marginright_four{margin-right:40px}
.marginright_six{margin-right:40px}
.rightpad20{padding-right:20px}
.leftpad20{padding-left:20px}
.bottommargin{margin-bottom:20px}
.topmargin{margin-top:20px}
.middle_pad{margin:0 80px}
/* 0.3 border */
.leftborder{border-left:#c9c9c9 solid 1px}

/* -- TYPOGRAPHY -- */
@font-face {
    font-family: 'open_sansbold';
    src: url('opensans-bold-webfont.eot');
    src: url('opensans-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('opensans-bold-webfont.woff') format('woff'),
         url('opensans-bold-webfont.ttf') format('truetype'),
         url('opensans-bold-webfont.svg#open_sansbold') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'open_sansbold_italic';
    src: url('opensans-bolditalic-webfont.eot');
    src: url('opensans-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('opensans-bolditalic-webfont.woff') format('woff'),
         url('opensans-bolditalic-webfont.ttf') format('truetype'),
         url('opensans-bolditalic-webfont.svg#open_sansbold_italic') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'open_sansregular';
    src: url('opensans-regular-webfont.eot');
    src: url('opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('opensans-regular-webfont.woff') format('woff'),
         url('opensans-regular-webfont.ttf') format('truetype'),
         url('opensans-regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'open_sansitalic';
    src: url('opensans-italic-webfont.eot');
    src: url('opensans-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('opensans-italic-webfont.woff') format('woff'),
         url('opensans-italic-webfont.ttf') format('truetype'),
         url('opensans-italic-webfont.svg#open_sansitalic') format('svg');
    font-weight: normal;
    font-style: normal;

}
h1{font-family: 'open_sansbold'; font-size:50px; margin-top:30px; line-height:50px; text-shadow: 2px 2px 2px #000;}
.txt_bold{font-family: 'open_sansbold';}
.txt_one{font-size:16px; font-family: 'open_sansbold'; color:#3b4444; float:left; width:100px; margin-top:10px}
.txt_two{font-size:16px; font-family: 'open_sansbold'; color:#3b4444; width:auto; margin:10px 0}
.txt_three{
	font-size:18px;
	font-family: 'open_sansbold';
	color:#3b4444;
	width:auto;
	margin:10px 0
}
.txt_four{font-family: 'open_sansbold'; font-size:50px; margin:30px 0 20px; line-height:50px; color:#fffff}
.txt_five{font-size:14px; font-family: 'open_sansbold'; margin-bottom:5px}
.txt_six{font-size:14px; font-family: 'open_sansbold'; margin-bottom:5px; border-bottom:#0a4167 solid 1px; padding-bottom:10px; margin-bottom:10px}
#page_intro{font-size:26px; text-align:center; line-height:36px; overflow:hidden;font-family: 'open_sansitalic'; margin:0 auto 30px; width:800px;}
#page-caption{text-align:center}
#page_snippet{font-size:16px; line-height:24px}
.italic_txt{font-family: 'open_sansitalic';}
.bold_txt{font-family: 'open_sansbold';}
.txt13{font-size:13px}

/* -- HEADER -- */
#header_wrapper{background:#2f398e; height:auto; overflow:hidden; width:auto;}
#header{background:url(../images/header_bg.jpg) top center no-repeat; height:90px; overflow:hidden}
#page_logo{float:left; width:168px; background:url(../images/shaniactive_logo.png) no-repeat; height:26px; margin-top:40px}
#top_menu_wrapper{float:right; font-size:12px}
#top_menu{padding-right:100px}
#top_menu li{float:left}
#top_menu a{padding:50px 16px 0; height:35px}
#top_menu a:hover,#active_link{border-bottom:5px #fff solid}
#mobile_menu{display: none;}
#shad{background:url(../images/shad.png) repeat-x; height:20px; width:auto; position:relative; z-index:1000; margin-bottom:-20px}


/* -- BANNER SECTION -- */
/* 0.1 banner one */
.banner_caption{height:400px; top:0; left:0; width:auto; z-index:200; background:none!important; overflow:hidden; position:absolute; padding-top:100px; color:#f6f8f9; font-size:17px; line-height:30px}
.banner_caption p{text-shadow: 2px 2px 2px #000;}
#index_banner{height:430px; width:auto; overflow:hidden;}
#index_banner li{height:430px}

/* 0.2 banner two */
#banner_two_wrapper{height:150px; width:auto; background:#000; overflow:hidden}
#banner_two_wrapper img{width:100%}
#banner_two{position:absolute; width:auto; height:auto; top:0; left:0; color:#fff}
#page_caption{font-size:16px; text-indent:3px; text-shadow:1px 1px 1px #000;}

/* -- CONTENT AREA -- */
#content_area_wrapper{padding:30px 0; width:auto; height:auto; overflow:hidden; background:#fff}
#content_area_two_wrapper{padding:20px 0; width:auto; height:auto; overflow:hidden; background:url(../images/shadow.jpg) repeat-x bottom}
.content_list{padding:10px 0 10px 10px; list-style:circle; margin-left:10px}
.link_one li{float:left; overflow:hiddenl; line-height:16px}
#country_menu{overflow:hidden; padding-bottom:10px}
#country_menu li{float:left; overflow:hiddenl; line-height:16px; padding-bottom:5px}
#country_menu a{font-size:16px; font-family: 'open_sansbold'; color:#3b4444; line-height:20px; margin:1px 20px}
.leftbg{background:url(../images/border-icon.gif) no-repeat center left}
#video_pad{width:340px; margin:20px 0}
/* 0.1 content pad */
.content_pad_one{float:left; width: 440px}
.content_pad_two{float:left; width: 250px}
.content_pad_three{float:left; width:190px; text-align:center}
.content_pad_four{float:left; width:380px}
.content_pad_five{float:left; width:527px}
.content_pad_six{width:280px; float:right}
.content_pad_seven{width:490px; float:left}
.content_pad_eight{width:184px; float:left}
.content_pad_nine{width:380px}
.content_pad_ten{width:260px}
.content_pad_eleven{width:200px; position:relative}
.content_pad_twelve{width:48%}
/* 0.2 content wrapper */
.content_wrapper_one{width:310px; margin-bottom:40px}
.content_wrapper_two{width:auto; margin-bottom:40px}
.content_wrapper_four{width:auto; height:auto}
.content_wrapper_five{width:auto; height:auto; padding:10px; border-top:1px #949595 solid; margin-bottom:20px}
.content_wrapper_six{width:auto; margin-bottom:20px; clear:both; overflow:hidden}
/* 0.3 images */
.img_one{margin:20px auto; display:block; height:70px}
.img_two{width:auto; height:80px; margin-bottom:10px}
.img_two img{width:100%}
.img_three{margin-bottom:10px; width:100%}
.img_fix{width:100%}
.img_pad_one{height:100px; width:auto; margin-bottom:10px; overflow:hidden}
#contact_link{width:86px; height:28px; color:#fff; background:url(../images/contact_button.gif) no-repeat; font-size:11pz; text-align:center; float:right; padding-top:10px; margin-top:30px}
#contact_link:hover{background-position:0 -38px}
/* 0.4 content accordion */
.accordion_header{cursor: pointer; padding:10px 0; border-bottom:#4b4b4b 2px solid;  margin-bottom:14px; background:url(../images/down_arrow.png) no-repeat right center;}
.accordion_header.expanded{background:url(../images/up_arrow.png) no-repeat right center}
.accordion_title,#gallery_title{font-size:16px; line-height:16px;}
.expand_content,#thumbnail_wrapper{padding:0 20px 10px; height:auto; overflow:hidden; width:auto}
.accord_contentPad{width:300px; height:auto; overflow:hidden}
.accord_contentleft{float:left}
.accord_contentRight{float:right}
/* 0.5 Flexible iFrame */
.Flexible-container { position: relative; padding-bottom: 56.25%;  padding-top: 30px; height: 0; overflow: hidden;}
.Flexible-container iframe,.Flexible-container object,.Flexible-container embed {position: absolute;  top: 0; left: 0; width: 100%;  height: 100%;}
/* 0.6 contact form pad */
.form_pad{float:left; width:230px; margin-right:30px}
.input_one,.input_two{-moz-border-radius:8px; border-radius:8px; border:#d9d9d9 1px solid; margin-bottom:10px; padding:3%; width:94%}
.input_two{height:130px}
.submit_button{background:#0871c6; color:#fff; font-size:10px; width:90px; border:0; height:24px; float:right; text-align:center; cursor:pointer; -moz-border-radius:2px; border-radius:2px;}
.submit_button:hover{background:#001d77}
.contact_details{float:right; width:160px; font-size:10px}
/* 0.7 project gallery */
#project_gallery{border: 4px solid #fff; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); background:#fff}
/* 0.8 Buttons  &  links */
.view_full_screen{text-decoration:underline;color:#535555;font-family: 'open_sansitalic'; margin-top:20px}
.button_one{ width:100px; height:24px; padding-top:10px; text-align:center; line-height:17px; -moz-border-radius:4px; border-radius:4px; font-size:14px; line-height:14px}
.button_two{ width:100px; height:34px; text-align:center; line-height:17px; -moz-border-radius:4px; border-radius:4px; font-size:14px; line-height:14px; border:none; color:#fff}
.button_three{ width:140px; height:24px; text-align:center; line-height:17px; -moz-border-radius:4px; border-radius:4px; font-size:14px; line-height:14px; margin:0 auto 30px; color:#fff; background:#717171; padding-top:10px}
.button_three:hover{background:#575a5d}
.purple_button{background:#292f7b;}
.purple_button:hover{background:#1c2055; color:#e1e2f5}
.read_more{background:#1678e6; margin:20px auto}
.blue_button{background:#1678e6; margin:10px 0}
.read_more:hover,.blue_button:hover{background:#00257b; color:#e1e2f5}
#office_menu{margin-top:50px}
#office_menu a{text-decoration:underline; font-size:13px; font-family: 'open_sansbold';color:#0a4167;}
.learn_more_one{color:#d50f18; text-decoration:underline; font-family: 'open_sansbold';}
.link_one{font-family: 'open_sansbold_italic'; display:inline; color:#0a4167;}
.link_two{color:#d50f18; text-decoration:underline; font-family: 'open_sansbold';}
/* 0.9 Footer */
#footer_bg{width:auto; height:auto; background:url(../images/footer_bg.png) top center; overflow:hidden;}
#footer_wrapper{width:auto; height:auto; background:url(../images/footer_graphic.jpg) no-repeat top center; overflow:hidden; padding:40px 0;color:#a6a6a6;}
#copy_right{float:left; width:200px; height:auto; overflow:hidden; font-size:10px}
#quick_links{height:auto; width:600px; float:right; font-size:13px; font-family: 'open_sansbold';}
#quick_links li{float:left; width:200px}
#quick_links a{color:#a6a6a6; font-family: 'open_sansbold';}
#quick_links a:hover{text-decoration:underline}
#quick_links p{font-style:italic; text-align:right; padding-right:50px}
/* 10 Project pad */
#projects_pad{width:auto; overflow:hidden; height:auto}
#projects_pad li{float:left; margin-bottom:30px; width:25%}
.project_wrapper{width:auto; height:auto; overflow:hidden}
.middle_pad{margin:0 80px}
.middle_pad_two{margin:0 68px}
/* 11 Contact pad */
#contact_pad{width:auto; overflow:hidden; height:auto}
#contact_pad li{float:left; margin-bottom:30px}
.contact_wrapper{width:254px; height:auto; overflow:hidden}
/* 12 Content column */
.content_column{width:auto; overflow:hidden; height:auto}
.content_column li{float:left; margin-bottom:30px}
.content_column_wrapper{width:254px; height:auto; overflow:hidden}

#big_video{
        -moz-border-radius: 6px;
        background: #eef2f7;
        -webkit-border-radius: 6px;
        border: 1px solid #536376;
        -webkit-box-shadow: rgba(0,0,0,.6) 0px 2px 12px;
        -moz-box-shadow:  rgba(0,0,0,.6) 0px 2px 12px;;
        padding: 14px 22px;
        width: 400px;
        position: relative;
        display: none;
    }
}

/* === SCREEN 960 === */
@media (max-width: 960px) {
	/* -- GENERAL --*/
	.page_container{width:auto;}
		
	/* -- CONTENT AREA -- */
	/* 0.1 content pad */
	.content_pad_three{width:23%;}
		
}


/* === SCREEN 820 === */
@media (max-width: 820px) {
	/* -- GENERAL --*/
	.width_820{width:auto}
		
}
/* === SCREEN 760 === */
@media (max-width: 760px) {
	/* -- GENERAL --*/
	.marginright_two,.marginright_six{margin-right:0}
	.mobi_floatleft{float:left}
	.mobi_floatright{float:right}
	.width_740{width:auto}
	
	/* -- HEADER -- */
	#top_menu{padding:0}
	
	/* -- BANNER SECTION -- */
	/* 0.1 banner one */
	.banner_caption{height:auto; padding:50px 0 0 40px; width:100%}
		
	/* -- CONTENT AREA -- */
	/* 0.1 content pad */
	.content_pad_one,.content_pad_two,.content_pad_four,.content_pad_five{float:none; width:auto}
	.content_pad_three{width:45%;}
	/* 0.2 content wrapper */
	.content_wrapper_one,.content_wrapper_two{width:auto; margin-bottom:10px}
	/* 0.4 content accordion */
	.accord_contentPad{width:46%}
	/* 0.6 contact form pad */
	.form_pad{float:left; width:60%; margin-top:30px; margin-left:0}
	.lable_one{margin-left:0}
	.input_one,.input_two{margin-left:0; width:96%}
	.contact_details{ margin-top:30px;}
}


/* === SCREEN 630 === */
@media (max-width: 630px) {
	
	/* -- TYPOGRAPHY --*/
	h1{font-size:30px; margin-top:20px; line-height:30px}
	
	/* -- HEADER -- */
	#header{height:auto; padding:10px}
	#page_logo{margin-top:10px}
	#top_menu_wrapper{width:auto; float:none; clear:both; padding-top:10px}
	#top_menu{display: none; height: auto; border-top: 1px #d3d3d3 solid; padding:0}
	#top_menu li{float:none}
	#top_menu a{padding:5px 0; height:auto; text-indent:10px}
	#top_menu a:hover,#active_link{background-color:#fff; background-image:none; color:#1d1b53; border:0}
	.menu_bg{background:none; border-bottom:#d3d3d3 1px solid}
	#mobile_menu {display: block; background:url(../images/menu_icon.png) left center no-repeat; width: 100%; position: relative; height:15px; width:21px; float:right; margin-top:20px;}
	
	/* -- BANNER SECTION -- */
	/* 0.1 banner one */
	.banner_caption{height:auto; text-align:center; padding:20px 0 0;}
	#index_banner{height:auto}
	#index_banner li{height:auto}
	/* 0.2 banner two */
	#banner_two_wrapper{height:80px}
	#banner_two_wrapper img{width:auto}
	#banner_two{padding:0 10px}
	#page_caption{font-size:13px; text-indent:2px}
	/* 0.4 content accordion */
	.expand_content,#thumbnail_wrapper{padding:10px}
	/* 0.6 contact form pad */
	.form_pad{width:46%; margin-top:10px;  margin-right:0}
	.contact_details{ margin-top:10px;}
	/* 0.8 Buttons */
	.button_one{margin:auto; width:100px; height:20px; padding-top:6px; line-height:12px; font-size:12px; }

	/* -- CONTACT INFO -- */
	#contact_info{padding-bottom:10px}
	#contacts_number{float:none; width:auto; background:url(../images/contac_info-arrow.gif) no-repeat center top; padding-top:20px; text-align:center}
	#contact_link{float:none; padding-top:10px; margin:20px auto 0}
	
}