body{margin:auto; font-family:roboto-light, Helvetica, sans-serif; font-size:17px; background:#fff; color:#444; -webkit-text-size-adjust: 100%;}

button{display:inline-block; margin:2% 0; padding:6px 20px; font-family:roboto-light, Arial, Helvetica, sans-serif; font-size:18px; color:#FFF; border:0px; background:rgb(0,148,214); border-radius:100px; cursor:pointer; -webkit-appearance:button; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out;}
button:hover{background:#DDD; color:#555;}

input{width:95%; margin:0 0 1% 0; padding:2%; border-radius:5px; border:1px solid #ddd; background:#f9f9f9; color:#555; -ms-box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:content-box; font-family:roboto-light, Helvetica, sans-serif; font-size:16px;}
select{width:95%;  margin:0 0 1% 0; padding:2%; border:1px solid #ddd; -webkit-appearance:none; -ms-box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:content-box; background: url(/images/select-arrow-black.png) no-repeat; background-position:right center; background-size:22px; font-family:roboto-light, Helvetica, sans-serif; font-size:16px;}
textarea{width:95%; margin:0 0 1% 0; padding:2%; border-radius:5px; border:1px solid #ddd; background:#f9f9f9; color:#555; -ms-box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:content-box; font-family:roboto-light, Helvetica, sans-serif; font-size:16px;}

input[type='checkbox']{width:20px;}

@media screen and (min-width: 1280px){
	input{width:96%; padding:1.8%;}
	select{width:96%; padding:1.8%;}
	textarea{width:96%; padding:1.8%;}
}
@media screen and (max-width: 768px){
	input{width:93%; padding:3%;}
	select{width:93%; padding:3%;}
	textarea{width:93%; padding:3%;}
}


p{line-height:26px;}
@media screen and (max-width: 768px){
	p{line-height:22px; font-size:13px;}
}

.no-mobile{display:block;}
.no-desktop{display:none;}

@media screen and (max-width: 768px){
	.no-mobile{display:none;}
	.no-desktop{display:block;}

}

h1{font-size:34px; font-family:roboto-light, Arial, Helvetica, sans-serif; font-weight:normal; display:block; margin:0 0 0.5% 0;}
h2{font-size:28px; font-family:roboto-light, Arial, Helvetica, sans-serif; font-weight:normal; display:block; margin:0 0 0.5% 0;}
h3{font-size:18px; font-family:roboto, Arial, Helvetica, sans-serif; font-weight:normal; display:block; margin:0 0 0.5% 0;}
h4{font-weight:normal; display:inline;}

@media screen and (max-width: 768px){
	h1{font-size:5.5vw;}
}

@media screen and (max-width: 480px){
	h1{font-size:8.6vw; letter-spacing:-1px;}
}

a:link    {color:#2c5d99; text-decoration:none; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out;}
a:visited {color:#2c5d99; text-decoration:none;}
a:hover   {color:#aa0000; text-decoration:none; -moz-transition: all 0.2s ease-in; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in;}


/* ---------------------------------------
Sign In
------------------------------------------*/
.signin{ text-align: center;}			
.signin div{display:inline-block; vertical-align: top; width:33%; padding:2%; margin:3%; border:1px solid #eee; border-radius: 5px; text-align: left;}
.signin input{margin:0 0 2% 0;}			
.signin p{font-size:14px;}		


@media screen and (max-width:768px){
	.signin div{width:84%; margin:0; padding:8%; border:0; border-bottom: 1px solid #eee;}
}	

/* ---------------------------------------
Blog Posts
------------------------------------------*/
#post-list{float:left; width:65%;}
#post-list li{padding:5%; border-bottom: 1px solid #eee;}
#post-list .author{font-size:14px; color:#777;}
#post-list .media{float:right; width:40%; margin: 1% 0 1% 2%;}
#post-list .media img{width:100%;}

#post-extra{float:right; width:25%; padding:5%;}

#post-detail{float:left; width:65%;}
#post-detail article{padding:5%; border-bottom: 1px solid #eee;}
#post-detail .media{float:right; width:100%; margin: 2% 0;}
#post-detail .media img{width:100%;}

#post-detail .author{font-size:14px; color:#777;}


@media screen and (max-width:768px){
	#post-list{width:100%;}
	#post-list .media{float:right; width:100%; margin:3% 0;}
	#post-detail{width:100%;}
	#post-extra{width:90%; padding:5%;}
}


/* ---------------------------------------
Blog Comments
------------------------------------------*/
#comments #overview{padding:3% 0%; border:0px solid #eee; }
#comments li{position: relative; margin:2% 5%; padding:3%; border:1px solid #eee; overflow: hidden;}
#comments li.approval{background:#FAEBEB;}
#comments li .act{display:none; position: absolute; top:0; left:0; width:100%; height:100%; background:#FAEBEB; text-align: center;}
#comments li .delete{z-index: 2; background:#FAEBEB;}
#comments li .loading{z-index: 4;background:#fc0;}
#comments li .thanks{z-index: 3; background:#DDD;}
#comments li .inner{padding:5%;}
#comments li b{font-size: large;}
#comments li span{float:right; color:#777;}
#comments li .avatar{float:left; width:15%; font-size:48px;}
#comments li .avatar img{width:100%;}
#comments li .detail{float:right; width:82%; padding:2% 0 0 0;}
#comments li .detail p{padding:2% 0 0 0;}
#comments li .options{clear:both; width:100%; text-align: right;}
#comments li .options dt{display:inline-block;}
#comments li .options img{width:32px; cursor: pointer;}

#comments #add-comment{position:relative; padding:0 1% 0 0; border:0;}
#comments #add-comment .layer{position:absolute; top:0; left:0; width:100%; height:100%; background:#fff; padding:3%; text-align: center;}
#comments #add-comment .layer img{width:64px;}
#comments #add-comment .loading{z-index:3;}
#comments #add-comment .thanks{z-index:2; background:#fff;}

#comments #add-comment b{display: block;}

#comments .user{padding:2%; overflow: hidden;}
#comments .user b{margin:1.2% 0 0;}
#comments .user p{margin:0;}
#comments .user .avatar{display:inline-block; vertical-align: middle; width:10%; margin:0 3% 0 0; font-size:34px; overflow: hidden;}
#comments .user .avatar img{width:100%;}


@media screen and (max-width:1280px){
	#comments li .avatar{font-size:3.8vw;}
	#comments .user .avatar{font-size:3.1vw;}
}
@media screen and (max-width:768px){
	#comments li span{display:block; float:none; font-size: 14px;}
	#comments li .avatar{font-size:6vw;}
	#comments .user .avatar{font-size:5vw;}
}


/* ---------------------------------------
Author
------------------------------------------*/
#author{padding:0 0 5% 0; text-align: center;}
#author .avatar{padding:5% 25%;}
#author .avtr{font-size: 72px;}
#author b{font-size: 20px; font-weight: normal;}
#author p{font-size: 14px; line-height: 18px;}
@media screen and (max-width:1280px){
	#author .avtr{font-size: 6.1vw;}
}
@media screen and (max-width:768px){
	#author .avatar{padding:5% 30%;}
	#author .avtr{font-size: 16.2vw;}
}

/* ---------------------------------------
Avatars
------------------------------------------*/
.avtr{width:100%; height:0; margin:auto; padding:0 0 100% 0; background:#ddd; color:#fff; border-radius:100%; text-align: center; overflow: hidden;}
.avtr img{width:100%;}
.avtr div{width:100%; height:0; padding: 17.5% 0 82.5% 0;}


/* ---------------------------------------
Header & Navigation
------------------------------------------*/
header{height:60px; background:rgb(0,148,214); background:rgba(0,148,214,0.99);}
header #head{max-width: 1170px; margin:auto; padding: 0 2%}
header #head #logo{height:40px; margin: 10px 0 0;}
header #head #nav-wrapper{float:right; width:60%; color:#fff; text-align: right; font-size:15px; font-family:roboto-light, Helvetica, sans-serif;}
header #head #nav li{display: inline-block; vertical-align: top; width:16.66%; text-align: center; }
header #head #nav img{display:none;}
header #head #nav li a{display:block; padding:18px 0; color:#fff;}
header #head #nav li a:hover{color:#fc0;}

.sub-menu{border-bottom: 1px solid #ddd; background:rgb(255,255,255); background:rgba(255,255,255,0.97); font-size:17px; font-family:roboto-light, Helvetica, sans-serif;}
.sub-menu .contain{max-width:1170px; margin: auto; padding:10px 2%;}

@media screen and (max-width: 1024px){
	header #head #nav-wrapper{font-size:14px;}
}

@media screen and (max-width: 768px){
	header{height:60px; text-align: center;}
	header #head{padding: 0 4%}
	header #head #nav-wrapper{display:none; position:absolute; top:60px; left:0; z-index:99; width:100%; background:rgb(255,255,255); background:rgba(255,255,255,0.98);}
	header #head #nav li a{color:#222;}

	header #head #nav li{width:100%;}
	header #head #nav li a{width:100%; text-align: center;}
	header #head #nav img{display:inline-block; width:50%;}
	header #head #nav li span{display:block;}
	.sub-menu .contain{padding:10px 4%;}
	
	.mobile-menu{position:absolute; top:0; right:6%; margin:15px 0 0 0; vertical-align: middle;}
	.icon-bar{background: #fff; display: block; height: 1px; line-height: 15px; margin-top: 6px; vertical-align: text-top; width:25px;
	-moz-transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s;}
	.rotateLeft {margin-top: 13px; position: relative; transform: rotate(-225deg); -webkit-transform: rotate(-225deg);}
	.rotateRight {margin-top: -1px; position: relative; transform: rotate(45deg); -webkit-transform: rotate(45deg);}
}

@media screen and (max-width: 480px){
	header{height:60px;}
	header #head{padding: 0 5%}
	header #head #logo{height: 32px; margin:12px 0 0;}
	.sub-menu .contain{padding:10px 5%;}
}


/* ---------------------------------------
Headaer User Menu
------------------------------------------*/
#head #user-menu{position:relative; float:left; margin:0 15px 0 0;}
#head #user-menu .avatar{width:30px; height: 30px; margin:14px 0 0; text-align: center; border:0px solid #fff; border-radius: 30px; background: #fff; overflow: hidden; font-size:14px; line-height: 30px; cursor: pointer;}
#head #user-menu .avatar img{width:30px;}
	
#head #user-menu #menu-contain{position:absolute; top:55px; left:-40%; z-index:1001 !important; width:180px; background:#fff; border-radius: 5px; box-shadow: 0 2px 6px -4px #000; font-size: 13px;}
#head #user-menu #menu-contain li{border-bottom:1px solid #eee;}
#head #user-menu #menu-contain li:last-child{border-bottom:0px solid #eee;}
#head #user-menu #menu-contain a{display: block; padding:8px 15px;}
#head #user-menu #menu-contain .arrow{position:absolute; left:10%; top:-9px; width:0; height:0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 9px solid #fff; }
#head #user-menu #menu-contain .heading{font-size: 16px; padding:10px 15px;}

@media screen and (max-width:768px){
	#head #user-menu{position: absolute; top:0; left:15px;}
	#head #user-menu #menu-contain{width:220px;}
	#head #user-menu #menu-contain a{padding:10px 18px;}
	#head #user-menu #menu-contain .arrow{left:8.25%;}
	#head #user-menu #menu-contain .heading{padding:12px 18px;}
}

/* ---------------------------------------
Main Structure
------------------------------------------*/
.limit{max-width:1280px; padding:30px 2%; margin:auto;}
.limit aside{float:right; width:25%; min-height:50px; background:#fff;}
.limit section{float:left; width:72%;}
.limit section .wrapper{padding:2.5% 0 0 0;}
.limit .global-form{min-height:300px;}

.full{clear:both; width:100%; padding:1px 0 0 0; background:#f5f8fa; overflow:hidden;}
.full section{position:relative; width:100%; overflow:hidden;}
.full section .wrapper{position:relative; margin:auto; max-width:1280px;}

.pad{padding:2% 2.5%;}

@media screen and (max-width: 768px){
	.pad{padding:5%;}
	.limit{padding:5%;}
}
@media screen and (max-width: 768px){
	.limit{margin:0 auto auto auto;}
	.limit aside{float:none; width:100%; min-height:30px;}
	.limit section{float:none; width:100%;}
	.limit section .wrapper{padding:0;}
	.inner{padding:5%;}
}


.left50{float:left; width: 43%;}
.right50{float:right; width: 43%;}
@media screen and (max-width: 768px){
	.left50{float:none; width:94%;}
	.right50{float:none; width:94%;}
}

/* ---------------------------------------
Breadcrumbs
------------------------------------------*/
#breadcrumbs{border-bottom: 1px solid #eee; font-size: 12px;}
#breadcrumbs ul{max-width: 1280px; margin:auto;}
#breadcrumbs li{display: inline-block; padding:10px 2.5%; color: #888;}
#breadcrumbs li.spacer{padding:10px 10px;}
#breadcrumbs span{padding:5%;}
#breadcrumbs a{color: #888;}
@media screen and (max-width: 768px){
	#breadcrumbs{display:none;}
}




/* ---------------------------------------
Home Page
------------------------------------------*/



/* ---------------------------------------
Parallax
------------------------------------------*/
.parlx section{border-bottom: 0px solid #eee; box-shadow: 0 2px 6px -6px #000 inset;}
.parlx .inner{height:100%; padding:8% 5% 20% 5%;}
.parlx .inner.left{float:left; width:45%; padding:8% 0 20% 5%;}
.parlx .inner.right{float:right; width:45%; padding:8% 5% 20% 0;}
.parlx .inner b{display:block; font-size: 64px; margin-left:-0.5%; font-family:felt-tip-senior, Verdana, Helvetica, sans-serif; font-weight:normal; letter-spacing:-1px;}
.parlx .inner .scroll-note{position: absolute; bottom:10%; left:0%; width:100%; font-size: 15px; margin:auto; text-align: center; cursor: pointer;}
.parlx .inner .scroll-note img{width:32px;}
.parlx .inner .scroll-note span{display:inline-block;}
@media screen and (min-width: 1320px){
	.parlx .inner{padding:8% 5% 20% 5%;}
	.parlx .inner.left{padding:8% 0 20% 0%;}
	.parlx .inner.right{padding:8% 0% 20% 0;}
}
@media screen and (max-width: 1024px){
	.parlx .inner b{font-size: 5vw;}
}
@media screen and (max-width: 768px){
	.parlx .inner{padding:25% 5% 45% 5%;}
	.parlx .inner{padding:8% 8% 20% 8%;}
	.parlx .inner.left{width:50%; padding:8% 0 20% 8%;}
	.parlx .inner.right{width:50%; padding:8% 8% 20% 0;}
	.parlx .inner b{font-size: 6vw;}
	.parlx .inner .scroll-note img{width:24px;}
}
@media screen and (max-width: 480px){
	.parlx .inner b{font-size: 9vw;}
}


/* ---------------------------------------
default video fluid container
------------------------------------------*/
.video-default{position:relative; width:100%; height:0; padding:0 0 60.25% 0;}
.video-default iframe{position:absolute; top:0; left:0; width:100%; height:100%;}
@media screen and (max-width: 768px){
	.video-default{padding:0 0 56.25% 0;}
}

/* ---------------------------------------
Branch Spotlight
------------------------------------------*/
.spotlight{text-align: center;}
.spotlight #photo-gallery{display:inline-block; vertical-align: top; width:42%; margin:0 1% 0 0;}
.spotlight li img{width:100%;}
.spotlight .desc{display:inline-block; vertical-align: top; width:42%; margin:0 0 0 1%; text-align: left;}

@media screen and (max-width: 1024px){
	.spotlight #photo-gallery{width:48%;}
	.spotlight .desc{width:48%;}
}
@media screen and (max-width: 768px){
	.spotlight #photo-gallery{width:100%; margin:0;}
	.spotlight .desc{width:94%; margin:1% 3% 3%;}
}
@media screen and (max-width: 480px){
	.spotlight #photo-gallery{width:100%; margin:0;}
	.spotlight .desc{width:92%; margin:2% 4% 4%;}
}


/* ---------------------------------------
Branch Results
------------------------------------------*/
#results-more{text-align:center;}
#results-more-load{padding:2%; text-align:center;}
#results-more-load img{width:40px;}

#br #results{background:#eee;}
#br #results .gallery li{display:inline-block; width:32%; margin:0.65%; background:#fff;}
#br #results .gallery li.member{background:#ddd;}
#br #results .gallery div{padding:5%; cursor: pointer;}
#br #results .gallery div .badge{float:right; width:32px;}
#br #results .gallery b{display: block; padding:5%; border-top:1px solid #eee;}
#br #results .gallery b img{width:24px; vertical-align: middle;}
@media screen and (max-width: 768px){
	#br #results .gallery{padding:2%;}
	#br #results .gallery li{width:46%; margin:1%;}
}
@media screen and (max-width: 480px){
	#br #results .gallery li{width:90%; margin:1% 3%;}
}


/* ---------------------------------------
Cookie Note
------------------------------------------*/	
#cookie{position:fixed; bottom: 0; left:0; z-index:99; width:100%; background: rgb(0,148,214); background: rgba(0,148,214,0.96); color: #fff; font-size:12px; text-align:center;}
#cookie div{max-width: 1280px; margin:auto; padding:0.5%;}
#cookie a{color:#fc0;}
#cookie button{margin:0; padding:5px 10px; font-size:10px; border:1px solid #fc0; background:#fc0; color:#2c5d99;}
@media screen and (max-width: 768px){
	#cookie div{padding:3%;}
}
@media screen and (max-width: 480px){
	#cookie div{padding:5%;}
}

/* ---------------------------------------
Footer
------------------------------------------*/	
footer{clear:both; background:#eee; border-top:1px solid #ddd; }
footer #foot{max-width:1280px; min-height:200px; margin:auto; padding:1%;}
@media screen and (max-width: 768px){
	footer #foot{padding:3%;}
}
@media screen and (max-width: 480px){
	footer #foot{padding:5%;}
}


.admin-wrapper{max-width:1280px; margin: auto;}
#admin-left{float:left; width:67.5%; height:100%; padding:2.5% 0% 2.5% 2.5%;}
#admin-left b{display: block; padding:4% 0 0;}
#admin-right{float:right; width:25%; padding:2.5%;}

.side-box{padding:5%; border-bottom:1px solid #eee;}
.side-box input{width:92% ; padding:3% !important; background: #fff;}
.side-box .radio{width:20px; padding:5% !important;}
.side-box p{font-size:12px;}

table{width:100%; background:#fff;}
table th{background:#EEE; text-align: left; background:rgb(0,148,214); color:#FFF; }
table tr{background: #fff; transition: all 0.2s ease-out;}
table tr:hover{background: #FFFFE5; transition: all 0.2s ease-out;}
table td{border-bottom:1px solid #eee;}
	
.icon{width:32px; padding:0%; padding:0.4% 0 0 0; cursor:pointer; text-align:center; }
.icon img{height:24px;}


.iw20{width:20%;}
.iw25{width:25%;}
.iw30{width:30%;}
.iw40{width:40%;}
.iw50{width:50%;}
.iw60{width:60%;}
.iw65{width:65%;}
.iw70{width:70%;}
.iw75{width:75%;}
.iw80{width:80%;}
.iw90{width:90%;}


.field-selected{background:#2cbfe6; color:#FFF;}

/* Edit Row */
.edit-back, .edit-back:hover{background: #FFFFE5;}

/* Delete Row */
.del-back, .del-back:hover{background: #FAEBEB;}
.del-back .message{float:left; color:#AA0000;}
.del-back .options{float:right;}
.del-back h2{font-size:36px; letter-spacing:-1px; line-height:36px;}


.media-wrapper{position: relative; width:50%; height:0; padding: 0 0 35% 0; background:#eee; text-align: center;}
.media-wrapper b{font-size:24px;}
.media-wrapper .choice{}
.media-wrapper .choice div{padding:20% 0 0;}
.media-wrapper .choice div img{width:36px; margin: 2%; cursor: pointer;}
.media-wrapper .media li{position: absolute; top:0; left:0; width:100%; height:0; padding: 0 0 70% 0; background:#e3e8f0;}
.media-wrapper .media div{padding:20% 0 0;}
.media-wrapper .media div img{width:48px; cursor: pointer;}
.media-wrapper .media div .logo{width:25%;}
.media-wrapper .media .del-btn{position: absolute; top:2%; right:2%; width:32px; cursor: pointer;}
.media-wrapper .media .loading{z-index:6; background:#7086a9; color: #fff; cursor: progress;}
.media-wrapper .media .loading div img{width:36px; cursor: progress;}
.media-wrapper .media .thanks{z-index:5; background:#555; color: #fff;}
.media-wrapper .media .delete{z-index:4; background:#FAEBEB; color: #a00;}
.media-wrapper .media .live{z-index:1;}
.media-wrapper .media .live iframe{width:100%; height:100%;}
.media-wrapper .media .upload div{padding:17% 0 0;}


.profile-wrapper{max-width: 1170px; min-height: 500px; margin: auto; overflow: hidden;}
.profile-wrapper .overview{padding:2.5%;}
.profile-wrapper .overview .menu{float:left; width:18%; padding:3.5%;}
.profile-wrapper .overview .menu .avtr{font-size:92px;}
.profile-wrapper .overview .menu ul{margin:5% 0;}
.profile-wrapper .overview .menu ul li{border-bottom: 1px solid #eee;}
.profile-wrapper .overview .menu ul li a{display: block; padding:3% 6%;}
.profile-wrapper .overview .detail{float:right; width:65%; padding:5%;}
.profile-wrapper .overview .detail .stats li{margin: 2% 0;}
.profile-wrapper .overview .detail .stats li{display:inline-block; padding:0 5% 0 0;}
.profile-wrapper .overview .detail .stats li b{font-family:roboto, Helvetica, sans-serif; font-weight: normal;}

.profile-wrapper .overview .detail li{width:100%; overflow: hidden;}
.profile-wrapper .overview .detail li b{display: inline-block; float:left; width:25%; padding:2% 0;}
.profile-wrapper .overview .detail li div{float:left; width:75%;}

.nameTitle{width:15%;}
.three{width:30%;}

@media screen and (max-width:1170px){
	.profile-wrapper .overview .menu .avtr{font-size:7.7vw;}
}

@media screen and (max-width:768px){
	.profile-wrapper .overview{padding:0%;}
	.profile-wrapper .overview .menu{width:50%; background:#f8f8f8; padding:5% 25%;}
	.profile-wrapper .overview .menu .avtr{font-size:20vw;}
	.profile-wrapper .overview .detail{width:85%; padding:7.5%; background: #eee;}
	.profile-wrapper .overview .detail li b{display:none;}
	.profile-wrapper .overview .detail li div{float:left; width:100%;}
	.nameTitle{width:90%;}
	.three{width:90%;}
}