body{margin:auto; font-family:'Roboto', Helvetica, sans-serif; font-weight:300; font-size:16px; background:#fff; color:#444; -webkit-text-size-adjust: 100%;}

button{display:inline-block; margin:2% 0; padding:8px 22px; font-family:'Roboto Condensed', Helvetica, sans-serif; font-size:14px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; background: transparent; color:#1c4d88; border-radius:100px; border:1px solid #1c4d88; 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:#1c4d88; color:#fff;}
button.blue{background:#1c4d88; color:#fff;}
button.blue:hover{background:#f60; border:1px solid #f60;}
button.white{color:#fff; border:1px solid #fff;}
button.white:hover{background:#fff; color:#1c4d88;}
button.sel{background: #2bafd7; border:1px solid #2bafd7; color:#fff;}
button.sel:hover{background: transparent; border:1px solid #2bafd7; color:#2bafd7;}
button.static{background: transparent; border:1px solid #2bafd7; color:#2bafd7;}

button.solid{background: #1c4d88; border:1px solid #1c4d88; color:#fff;}
button.solid:hover{background: #fc0; border:1px solid #fc0;}

.btn-delete{background: #a00; border:1px solid #a00; color:#fff;}

input,select,textarea{width:91.5%; margin:0 0 1% 0; padding:3% 4%; font-family:roboto, Helvetica, sans-serif; font-weight:300; font-size:16px; -ms-box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:content-box; -webkit-appearance:none; border-radius: 5px; border:1px solid #ddd; background: #fff; color:#333;}
input[type='checkbox']{width:20px; -webkit-appearance: checkbox; padding:0;}
input[type='radio']{width:20px; -webkit-appearance: radio; padding:0;}
select{background:#fff url(http://www.autosynergy.co.uk/assets/icons/select-arrow-black.png) no-repeat; background-position:97% center; background-size:22px;}

p{line-height:26px;}
@media screen and (max-width: 768px){
	button{font-size: 16px;}
}
@media screen and (max-width: 480px){
	button{font-size: 15px;}
}

.no-mobile{display:block;}
.no-desktop{display:none;}
.newspaper{-webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap: 50px; -moz-column-gap: 50px; column-gap: 50px;}
.newspaper3{-webkit-column-count: 3; -moz-column-count: 3; column-count: 3; -webkit-column-gap: 50px; -moz-column-gap: 50px; column-gap: 50px;}
@media screen and (max-width: 768px){
	.no-mobile{display:none;}
	.no-desktop{display:block;}
	.newspaper{-webkit-column-count: 1; -moz-column-count: 1; column-count: 1; -webkit-column-gap: 0; -moz-column-gap: 0; column-gap: 0;}
	.newspaper3{-webkit-column-count: 1; -moz-column-count: 1; column-count: 1; -webkit-column-gap: 0; -moz-column-gap: 0; column-gap: 0;}
}

#hero ::-webkit-input-placeholder {color: #777;}
#hero :-moz-placeholder {color: #777;}
#hero ::-moz-placeholder {color: #777;}
#hero :placeholder-shown {color: #777;}
#hero :-ms-input-placeholder {color: #777;}	
#hero ::-ms-input-placeholder {color: #777;}
#hero :placeholder-shown {color: #777;}


h1{font-family:'Roboto Condensed', Helvetica, sans-serif; display:block; font-size:34px; font-weight:300;  margin:0 0 0.5% 0;}
h2{font-family:'Roboto Condensed', Helvetica, sans-serif; display:block; font-size:28px; font-weight:300; margin:0 0 0.5% 0;}
h3{font-family:'Roboto Condensed', Helvetica, sans-serif; font-size:18px; font-weight:300; margin:0 0 0.5% 0;}
h4{font-family:'Roboto Condensed', Helvetica, sans-serif; font-weight:300; 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;}




/* ---------------------------------------
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%;}
}

/* ---------------------------------------
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
------------------------------------------*/

/* Hero */
#hero{width:100%; max-height:620px; text-align: center; color:#fff;}
#hero .swap{display:inline-block; padding:2% 0.5%; font-size: 13px; cursor: pointer;}

@media screen and (max-width: 768px){
    #hero .swap{padding:5% 2% 0;}
    #hero .swap input{padding:0; border-radius:50%;}
}

/* ---------------------------------------
Parallax
------------------------------------------*/
.parlx section{border-bottom: 0px solid #eee; box-shadow: 0 2px 6px -6px #000 inset;}
.parlx .cover{position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.2);}
.parlx .inner{height:100%; padding:5% 5% 8% 5%;}
.parlx .inner.left{float:left; width:45%; padding:5% 0 20% 5%;}
.parlx .inner.right{float:right; width:45%; padding:5% 5% 20% 0;}
.parlx .inner b{display:block; font-size: 60px; margin-left:-0.5%; font-weight:700; letter-spacing:-1px;}
.parlx .inner h1{display:block; font-size: 60px; margin-left:-0.5%; font-weight:100; letter-spacing:-1px;}
.parlx .inner .scroll-note{position: absolute; bottom:20%; 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;}
.parlx .inner .searchfield{position:relative; padding:1% 0 0; margin:auto;}
.parlx .inner .searchinput{position:relative; max-width:220px; margin:auto;}
.parlx .inner .searchinput input{margin:0; padding:12px 0px 12px 24px; font-size:15px; border-radius: 100px; border:1px solid #fff; background: rgb(255,255,255); background: rgba(255,255,255,0.99); color:#333; text-transform: uppercase;}
.parlx .inner .searchinput button{position:absolute; top:-3px; right:0px; width:42px; height:42px; padding:2px 0 0; background:transparent; border:0;}
.parlx .inner .searchinput button img{width: 28px;}
.parlx .inner span{display: inline-block;}
@media screen and (min-width: 1320px){
	.parlx .inner{padding:8% 5% 8% 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.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 h1{font-size: 6vw;}
	.parlx .inner .scroll-note img{width:24px;}
    .parlx .inner .searchfield{padding:4% 0 0;}
    
    #home #hero button{margin:0 0 20%;}
}
@media screen and (max-width: 480px){
	.parlx .inner b{font-size: 9vw;}
	.parlx .inner h1{font-size: 9vw;}
	.parlx .inner{padding:15% 7% 18% 7%;}
}


/* ---------------------------------------
jQuery UI
------------------------------------------*/
.ui-autocomplete{max-height:400px; overflow-y:auto; overflow-x:hidden; z-index:1000;}
.ui-menu-item{border-top:1px solid #eee; font-size:14px;}
.ui-menu-item a{padding:10px 8px 3px !important;}
.ui-menu-item img{padding-right:10px; width:32px; height:32px;}
.ui-menu-item span{color:#444; line-height:32px; vertical-align:top;}
.ui-state-focus{background:#f5f8fa none !important; border:0 !important; border-top:1px solid #eee !important;}

@media screen and (max-width: 768px){
    .ui-autocomplete{max-height:200px;}
    .ui-menu-item{font-size:12px;}
}


/* ---------------------------------------
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%;}
}

/* ---------------------------------------
Feature Structure
------------------------------------------*/
.feat{ background:#f2f9fd;}
.feat li{display:inline-block; vertical-align: top; width:50%;}
.feat div{height:100%; padding:8%; border-top:1px solid #fff; border-left:1px solid #fff; overflow: hidden;}
.feat div .feat-img{float:left; width:40%; margin:-1% 2% -8% -8%;}
.feat div p{font-size: 14px; line-height: 22px;}
.feat div b{display:block; font-size: 22px;}

.feat div.recent-review .comment{font-size: 22px; line-height: 28px;}
.feat div.recent-review .name{display:block;}
.feat div.recent-review .stars{height:30px;}

@media screen and (max-width: 680px){
	.feat li{width:100%;}
	.feat div{border:0;}
}


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

#br h1{font-weight: 700; letter-spacing: -2px;}
#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%;}
}


/* ---------------------------------------
Branch Details
------------------------------------------*/
/* Hero */
#bd #hero{width:100%; max-height: 600px; text-align: center; color:#fff; text-shadow: 1px 1px 1px #000;}
#bd #hero .inner{padding:4% 5%;}
#bd #hero .inner span{display: inline-block;}
#bd #hero .avatar{width:200px; height:200px; margin: auto; background:#fff; border-radius: 100px; overflow: hidden;}
#bd #hero .avatar img{width:100%;}
#bd .cover{background: rgba(0,0,0,0.2); }
#bd .inner{height:100%; padding:8% 5% 20% 5%;}
#bd .inner.left{float:left; width:45%; padding:8% 0 20% 5%;}
#bd .inner.right{float:right; width:45%; padding:8% 5% 20% 0;}
#bd .inner b{display:block; font-size: 56px; margin-left:-0.5%; font-weight:100;  font-weight:normal; letter-spacing:-1px;}
@media screen and (min-width: 1320px){
	#bd .inner{padding:8% 5% 20% 5%;}
	#bd .inner.left{padding:8% 0 20% 0%;}
	#bd .inner.right{padding:8% 0% 20% 0;}
}
@media screen and (max-width: 1024px){
	#bd .inner b{font-size: 5vw;}
}
@media screen and (max-width: 768px){
	#bd #hero .inner{padding:10% 5% 5% 5%;}
	#bd #hero .avatar{width:160px; height:160px;}
	#bd .inner{padding:8% 8% 20% 8%;}
	#bd .inner.left{width:50%; padding:8% 0 20% 8%;}
	#bd .inner.right{width:50%; padding:8% 8% 20% 0;}
	#bd .inner b{font-size: 6vw;}
}
@media screen and (max-width: 480px){
	#bd .inner b{font-size: 9vw;}
}

/* Filter Bar */
#bd #filter-options{background: rgb(255,255,255); background: rgba(255,255,255,0,95); border-bottom: 1px solid #ddd;}
#bd #filter-options .wrapper{padding:15px 25px;}
#bd #filter-options .wrapper .search{float:left; width:160px;}
#bd #filter-options .wrapper .sorted{float:right; width:120px; margin:-7px 0 0 0;}

#bd #filter-options h1{display:inline-block; cursor: pointer;}

#bd #filter-options .mini-menu{float:right; display:inline-block; margin:-5px 0 0; text-align: right;}
#bd #filter-options .mini-menu li{position:relative; display: inline-block;  vertical-align: top; margin:0 10px; cursor: pointer;}
#bd #filter-options .mini-menu .edit{display:inline-block; margin:2px 0 0; padding:5px 13px; border:1px solid #ddd; border-radius: 5px;}
#bd #filter-options .mini-menu .edit:hover{background:#ddd; color:#fff;}
#bd #filter-options .mini-menu li small{position:absolute; top:0px; right:0px; z-index:3; padding:0 5px; height:15px; font-size: 10px; line-height: 15px; background: #a00; color:#fff; border-radius: 50px; text-align: right;}
#bd #filter-options .mini-menu li img{width:36px;}

@media screen and (max-width:768px){
	#bd #filter-options .wrapper{padding:15px 5%;}
	#bd #filter-options h1{font-size:16px !important;}
	#bd #filter-options .mini-menu{text-align: left;}
	#bd #filter-options .mini-menu .edit{font-size:13px;}
	#bd #filter-options .mini-menu li{margin:0 2px;}
	#bd #filter-options .mini-menu li img{width:28px;}
}

/* Address, Facilities, Opening Hours */
#bd h1{font-weight:300; font-size: 20px; margin:0;}
#bd #contact{line-height: 28px;}
#bd #contact h4{display: block; margin: 0; font-size:20px;}

#bd #contact #address{float:left; width:27%;}
#bd #contact .opening{width:90%; margin:3% 0; font-size: 14px;}
#bd #contact .opening li{padding:1.75% 0; text-align: right; border-top:1px solid #f1f1f1; overflow: hidden;}
#bd #contact .opening li b{float: left; font-weight: normal;}
#bd #contact .opening li.heading{font-size: 17px; border:0; font-weight: bold; text-align: left;}

#bd #contact #facilities{float: left; width:44%; padding:0 0 0 3%;}
#bd #contact #facilities .fclist{overflow: hidden;}
#bd #contact #facilities .fclist li{float:left; width:33.33%; margin:2% 0; }
#bd #contact #facilities .fclist li img{display: inline-block; vertical-align: top; width:36px;}
#bd #contact #facilities .fclist li p{display: inline-block; margin:0; font-size:12px; line-height:12px;}

#bd #contact #extra{float:right; width:24%; text-align: center;}
#bd #contact .social{margin:20px 0 0;}
#bd #contact .social li{display:inline-block; vertical-align: top;}
#bd #contact .social img{width:32px; padding:6px; border-radius: 100%;}

@media screen and (max-width:1170px){
	#bd #contact #address{width:27%;}
	#bd #contact #facilities{width:50%; padding:0 0 0 3%;}
	#bd #contact #extra{width:20%;}
}
@media screen and (max-width:1024px){
	#bd #contact #address{width:27%;}
	#bd #contact #facilities{width:48%; padding:0 0 0 2.5%;}
	#bd #contact #facilities .fclist li{width:50%;}
}
@media screen and (max-width:768px){
	#bd #contact #address{width:100%;}
	#bd #contact .opening{width:100%;}
	#bd #contact #facilities{width:100%; padding:20px 0 0;}
	#bd #contact #facilities .fclist li{width:33.33%;}
	#bd #contact #extra{width:110%; margin:0 -5%;}
}
@media screen and (max-width:550px){
	#bd #contact #facilities .fclist li{width:50%;}
}


#bd #bio{background: #f2f9fd; padding:2% 0;}

/* Location Map */
#bd #location{position:relative; line-height:0;}
#bd #location #map{width:100%; height:460px; line-height:0;}
#bd #location .overlay {background:transparent; position:relative;width:100%;height:460px;top:460px;margin-top:-460px;}{width:100%; height:460px; line-height:0;}


/* ---------------------------------------
REVIEW TO WIN
------------------------------------------*/
.review-to-win{width:100%; min-height: 440px; background: url(/images/hero01.jpg); background-size: cover; color:#fff;}
.review-to-win .graphic{float:left; width:35%; max-width:200px; margin:0 3%;}
.review-to-win .detail{float:left; width:59%; font-size: 20px;}
.review-to-win .detail b{font-weight: normal;}
.review-to-win .detail h2{font-size:48px;}
.review-to-win .detail p{line-height: 30px;}

@media screen and (max-width:1170px){
	.review-to-win .detail{font-size:1.6vw;}
	.review-to-win .detail h2{font-size:4.1vw;}
}
@media screen and (max-width:768px){
	.review-to-win .graphic{width:25%;}
	.review-to-win .detail{width:59%; font-size:3.2vw;}
	.review-to-win .detail h2{font-size:8vw;}
	.review-to-win .detail p{line-height: 4.8vw;}
}
@media screen and (max-width:480px){
	.review-to-win{width:100%; min-height: 300px; }
	.review-to-win .graphic{width:30%;}
	.review-to-win .detail{width:54%; font-size:4.2vw;}
	.review-to-win .detail h2{font-size:7.2vw;}
	.review-to-win .detail p{line-height: 5.9vw;}
}


/* ---------------------------------------
Profile
------------------------------------------*/
#profile #extra{float:right; width:23%; margin:0 0 0 1%; min-height:800px; }
#profile #extra ul{margin:10px 0 0; overflow: hidden; background: #fff;}
#profile #extra li{padding:3%; border-bottom: 1px solid #eee; overflow: hidden;}
#profile #extra .avatar{float:left; width:20%;}
#profile #extra .avatar div{font-size:25px;}
#profile #extra .detail{float:right; width:75%;}
#profile #extra .detail a{display:block;}
#profile #extra .detail button{min-width:100px; padding:4px 15px; font-size:11px;}

@media screen and (max-width: 1280px){
    #profile #extra .avatar div{font-size:1.9vw;}
}
@media screen and (max-width: 768px){
    #profile #extra{display:none;}
}


#profile #content{float:right; width:52%; min-height:800px; padding:10px 0 0; position:relative; z-index:98;}

#profile #content .tabs{width:100%;}
#profile #content .tabs div{display:inline-block; vertical-align: top; padding:10px 0; width:32%; text-align: center; background:#fff; border-radius:5px 5px 0 0; cursor:pointer;}
#profile #content .tabs div.sel{background:#e8f2f7; cursor:default;}

#profile #content #bio{padding:3%; min-height:400px; background:#fff; border:1px solid #e8f2f7;}
#profile #content #location{padding:3%; min-height:400px; background:#fff; border:1px solid #e8f2f7;}
#profile #content #location #map{width:100%; height:0; padding:0 0 100% 0; background: #ddd;}

#profile #content #wall .textarea{position:relative; margin:0 0 1%;}
#profile #content #wall .textarea textarea{margin:0;}
#profile #content #wall .textarea .chars{position:absolute; right:1px; bottom:3px; padding:3px 5px; font-size:12px; color:#fff; background:#ccc; border-radius:2px;}
#profile #content #wall .textarea .limit{background:#a00;}

#profile #content #wall li{position: relative; margin:0 0 12px 0; border:1px solid #e8f2f7; background: #fff;}
#profile #content #wall li.new-post{background: #f3fdf2;}
#profile #content #wall li.new-post .hello{width:100%; padding:0 0 10px 13px; font-size: 22px; color:#1c4d88;}
#profile #content #wall li.new-post textarea{width:95.4%; height:24px; padding:2%; font-size:15px;}
#profile #content #wall li.new-post button{float:right; margin:0 0 5% 0; }
#profile #content #wall li.new-post #upload-choose{width:32px;}
#profile #content #wall li.new-post #upload-preview img{max-width:100px;}

#profile #content .no-posts{padding:20% 5%; text-align: center;}	
#profile #content .no-posts img{width:48px;}	

#profile #content #wall li .post-wrapper{position: relative;}
#profile #content #wall li article{padding:3%; overflow: hidden;}

#profile #content #wall li .in-reply{padding:0 0 3%; font-size:14px;}
#profile #content #wall li .in-reply a{color:#999;}
#profile #content #wall li .avatar{float:left; width:8%; font-size: 22px;}
#profile #content #wall li .posthead{float:right; width:90%; padding:2% 0 0;}
#profile #content #wall li .posthead b{display:block; font-weight:300; line-height: 12px;}
#profile #content #wall li .posthead time{font-size: 12px;}
#profile #content #wall li article p{padding:10px 0 0;}
#profile #content #wall li article .comment-lrg{font-size:22px;}
#profile #content #wall li article .portrait{width:100%; height:0; padding:0 0 75%; overflow:hidden;}
#profile #content #wall li article .postimg{width:100%;}

#profile #content #wall li article #post-control #upload-preview{float:left; width:60%;}

#profile #content #wall li article .noimg{padding:5%; font-size:14px; color:#888; text-align:center; background:#f7f7f7;}
#profile #content #wall li article .loading{position: absolute; bottom:0; left:0; z-index:5; width:100%; height:100%; background:#f2f9fd; text-align: center;}
#profile #content #wall li article .loading div{padding:10% 5%;}
#profile #content #wall li article .loading img{width:32px;}
#profile #content #wall li article .loading b{display: block;}
#profile #content #wall li article .likes{margin:15px 0 0; padding:12px 0 0; font-size:14px; border-top: 1px solid #eee;}
#profile #content #wall li .del{position: absolute; bottom:0; left:0; width:100%; border-top:2px solid #a00; background:#FAEBEB; color:#a00; text-align:center; z-index:999;}
#profile #content #wall li .del div{padding:3%;}
#profile #content #wall li .del p{margin:0 !important; padding:0;}
#profile #content #wall li .del button{font-size: 14px; padding:7px 30px; background:#a00; border:1px solid #a00;}
#profile #content #wall li .del .cancel{background:#ccc; border:1px solid #ccc;}
#profile #content #wall li dt{display:inline-block; vertical-align: middle; padding:1% 3%; border-right:1px solid #eee;}
#profile #content #wall li dt img{vertical-align: middle; width:24px;}

#profile #content #wall li .replies{background:#fdfdf2; }
#profile #content #wall li .replies .arrow{position: absolute; top:-1px; left:47%; width:0; height:0; border-left: 13px solid transparent; border-right: 13px solid transparent; border-top: 13px solid #fff;}

#profile #content #wall li .replies .item{padding:2%; border-top:1px solid #eee; position:relative;}
#profile #content #wall li .replies p{margin:0 0 0 10%; padding:0; font-size:13px; line-height:20px;}
#profile #content #wall li .replies dl{margin:0 0 0 10%;}
#profile #content #wall li .replies .likes{margin:0 0 0 10%; font-size:12px; line-height:20px;}


#profile #content #wall li .reply{background: #f3fdf2; padding:2%; border-top:1px solid #eee; overflow: hidden;}
#profile #content #wall li .reply textarea{width:95.4%; height:24px; padding:2%; font-size:15px;}
#profile #content #wall li .reply .posthead{padding:0;}

#profile #content li .reply button{float:right; margin:0 0 5% 0; }	

@media screen and (max-width: 1280px){
    #profile #content #wall li .avatar{font-size: 1.8vw;}
}
@media screen and (max-width: 768px){
    #profile #content{width:100%; min-height:500px;}
    #profile #content #wall li{border-bottom: 1px solid #eee;}
    #profile #content #wall li.new-post{background: #f2f9fd;}
    #profile #content #wall li .avatar{width:10%; font-size: 4vw;}
    #profile #content #wall li .posthead{width:87%; padding:3% 0 0;}
    #profile #content #wall li .replies p{margin:0 0 0 13%;}
    #profile #content #wall li .replies dl{margin:0 0 0 13%;}
    #profile #content #wall li .replies .likes{margin:0 0 0 13%;}
    #profile #content #wall li article{padding:5%;}
    #profile #content #wall li article p{font-size:13px;}
    #profile #content #wall li .in-reply{padding:0 0 5%;}
}
@media screen and (max-width: 480px){
    #profile #content #wall li.new-post article{padding:6% 3% 4% 3%;}
    #profile #content #wall li.new-post textarea{width:93.4%; height:24px; padding:3%; font-size:15px;}
    #profile #content #wall li .avatar{width:14%;}
    #profile #content #wall li .posthead{width:82%; padding:2% 0 0;}
    #profile #content #wall li .replies p{margin:0 0 0 18%;}
    #profile #content #wall li .replies dl{margin:0 0 0 18%;}
    #profile #content #wall li .replies .likes{margin:0 0 0 18%;}
    #profile #content #wall li article{padding:7%;}
    #profile #content #wall li article .del div{padding:6% 3%;}
    #profile #content #wall li article p{font-size:16px; line-height:23px; color:#222;}
    #profile #content #wall li .in-reply{padding:0 0 7%;}
    #profile #content #wall li dt{padding:2% 7%;}
    #profile #content #wall li .replies .item{padding:4%;}
    #profile #content #wall li .reply {padding:4%;}
}

#load-more{text-align:center;}
#load-more img{width:32px; margin:2% 0;}

/* ---------------------------------------
Get Social
------------------------------------------*/
#profile #social-over{position: relative; float:left; width:23%; margin:10px 0 0; border:1px solid #e8f2f7; background:#fff;}
#profile #social-over .cover{width:100%; height:0; padding:0 0 30% 0; background: #ddd;}
#profile #social-over .avatar{position: absolute; top:15%; left: 35%; width:30%;}
#profile #social-over .avatar div{font-size:25px; border:3px solid #fff; }
#profile #social-over .avatar div span{display: block; padding:27% 0 0; font-size:36px; text-transform: uppercase;}
#profile #social-over .detail{padding:50px 0 0; font-size:22px; text-align: center;}
#profile #social-over ul{text-align: center; font-weight: 700;}
#profile #social-over li{display:inline-block; vertical-align: top; width:33.33%;}
#profile #social-over li div{margin: 10px 0; padding: 10px 0; border-right:1px solid #eee;}
#profile #social-over li div.last{border-right:0px;}
#profile #social-over li img{width:20%;}
#profile #social-over li small{display:block; font-size:10px; font-weight: 300;}

@media screen and (max-width: 1280px){
    #profile #social-over .avatar div span{font-size:2.9vw;}    
}
@media screen and (max-width: 768px){
    #profile #social-over{width:100%; margin:-10px 0 0; border-left:0px; border-right:0px;}
    #profile #social-over .cover{padding:0 0 25% 0;}
    #profile #social-over .avatar{top:25%; left: 40%; width:20%;}
    #profile #social-over .avatar div{font-size:25px;}
    #profile #social-over .avatar div span{font-size:8.2vw;}
    #profile #social-over .detail{padding:70px 0 0; font-size:4.2vw;}
    #profile #social-over li img{width:28px;}
    #profile #social-over li div{margin: 7px 0; padding: 7px 0;}
}
@media screen and (max-width: 480px){
    #profile #social-over{width:100%; margin:-10px 0 0; border-left:0px; border-right:0px;}
    #profile #social-over .cover{padding:0 0 30% 0;}
    #profile #social-over .avatar{top:15%; left: 34.75%; width:30%;}
    #profile #social-over .avatar div{font-size:25px;}
    #profile #social-over .detail{padding:70px 0 0; font-size:6.5vw;}
    #profile #social-over li img{width:28px;}
    #profile #social-over li div{margin: 5px 0; padding: 5px 0;}
}

@media screen and (max-width: 1280px){
    #profile #social-over .avatar div{font-size:1.9vw;}
}

#profile #content #wall #not-following{background:transparent; border:0; margin:0; padding:0; text-align:center;}
#profile #content #wall #not-following li{display:inline-block; width:31.8%;}
#profile #content #wall #not-following li.marg{margin:0 1.8% 0 0;}


/* ---------------------------------------
Notifications
------------------------------------------*/
#notify-new{padding:2%; margin:0 0 2%; background:#fcf8e3; border-bottom:1px solid #eee; text-align:center; display:none;}
                
#notify-list{background:#fff; margin:0 0 2%;}
#notify-list li{padding:2%; border-bottom:1px solid #eee;}
#notify-list li.new{background:#fcf8e3;}
#notify-list .avatar{display:inline-block; width:5.5%; margin:0 2% 0 0; vertical-align:top;}
#notify-list .avatar div{font-size:15px;}
#notify-list .detail{display:inline-block; width:92.5%; vertical-align:top;}
#notify-list .detail span{font-size:12px; color:#999;}

@media screen and (max-width: 1280px){
    #notify-list .avatar div{font-size:1.2vw;}
}

@media screen and (max-width: 768px){
    #notify-new{padding:4%;}

    #notify-list li{padding:4%;}
    #notify-list .avatar{width:10%; margin:0 4% 0 0;}
    #notify-list .avatar div{font-size:3.8vw;}
    #notify-list .detail{width:86%;}
}


/* ---------------------------------------
Likes List
------------------------------------------*/
#like-list li{padding:3%; border-bottom:1px solid #eee;}
#like-list li#count{font-size:14px; color:#999; text-align:center;}
#like-list .avatar{display:inline-block; width:10%; margin:0 4% 0 0; vertical-align:middle;}
#like-list .avatar div{font-size:3.8vw;}
#like-list .detail{display:inline-block; width:86%; vertical-align:middle;}
#like-list .detail span{vertical-align:middle;}

@media screen and (max-width: 400px){
    #like-list li{padding:5%;}
}


/* ---------------------------------------
Profile Followers/Following
------------------------------------------*/
#profile #followers{float:left; width:76%; min-height:800px; background: #fff;}
#profile #followers ul{border-right:1px solid #eee; border-bottom:1px solid #eee; overflow: hidden;}
#profile #followers li{float:left; width:33.333%; border-bottom: 1px solid #eee; overflow: hidden;}
#profile #followers li.heading{width:100%; background:rgba(255,255,255,0.98); text-align: center; font-size:18px;}
#profile #followers li.heading div{padding:2%;}
#profile #followers article{border-left:1px solid #eee; text-align: center;}
#profile #followers .avatar{width:40%; margin:auto; padding:7% 30% 3% 30%; cursor: pointer;}
#profile #followers .avatar .avtr div{font-size: 56px; text-transform: uppercase;}
#profile #followers .detail{width:90%; padding:1% 5% 15% 5%;}

#profile #followers button{min-width:130px; margin:10px 0 0; padding:5px 0; font-size: 14px; }


#profile #followers .detail a{display:block; font-size:24px; line-height:24px; letter-spacing: -1px;}
#profile #followers .detail small{display:block; width:90%; padding:5%;}
@media screen and (max-width: 1280px){
	#profile #followers .avatar .avtr div{font-size: 4.6vw}
}
@media screen and (max-width: 768px){
	#profile #followers{width:100%;}
	#profile #followers li{width:50%;}
	#profile #followers li.heading div{padding:3% 5%;}
	#profile #followers .avatar .avtr div{font-size: 8.6vw}
}
@media screen and (max-width: 480px){
	#profile #followers li article{padding:8% 0;}
	#profile #followers .avatar{width:60%; margin:auto; padding:7% 20% 3% 20%; cursor: pointer;}
	#profile #followers button{width:80%; font-size: 13px;}
	#profile #followers .detail a{font-size:18px;}	
	#profile #followers .avatar .avtr div{font-size: 12vw}
}

/* ---------------------------------------
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;}
}


/* ---------------------------------------
Register
------------------------------------------*/
.register{ text-align: center;}			
.register .container{display:inline-block; vertical-align: top; width:40%; min-height:400px; padding:2%; margin:3%; text-align: left;}
.register input, .register select, .register #pass-strength{margin:0 0 2% 0;}			
.register .firstname{width:41%;}			
.register .surname{float:right; width:41%;}			
.register p{font-size:16px;}
.register .note{font-size:14px;}
.register .red{color:#a00;}

@media screen and (max-width:768px){
    .register .container{width:80%;}
    .register .firstname{width:91.5%;}			
    .register .surname{float:none; width:91.5%;}	
}
@media screen and (max-width:488px){
    .register .container{width:90%;}
}


/* Blog Hero */
#blog #hero{width:100%; max-height: 600px; text-align: center; color:#fff;}
#blog #hero .inner{padding:4% 5%;}

/* ---------------------------------------
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%;}
}


/* ---------------------------------------
Account Management
------------------------------------------*/
#account #hero .inner{padding:4% 5%;}
		
#account #manage{float:left; width:75%;}
#account #manage main{min-height:600px; padding:5%; border-left:1px solid #eee; border-right:1px solid #eee;}

#account #manage li{padding: 0 0 5px 0; overflow: hidden;}
#account #manage li b{float:left; width:12%; padding:12px 2%; text-align: right; font-weight: normal;}
#account #manage li .avatar div{font-size:48px; cursor:default;}
#account #manage li .avatar .avtr div{padding: 23% 0 77% 0;}
#account #manage li aside{float:left; width:75%;}
#account #manage li aside.social span{display:inline-block; width:120px; margin:0 6px 0 0; text-align:right;}
#account #manage li aside.social input{width:44%;}
#account #manage li.heading aside{padding:5% 0 0 1%; font-size:28px;}

#account input,textarea{padding:12px 18px;}

#account .load{display:none; padding:0 0 0 10px;}
#account .load img{width:32px; display: inline-block; vertical-align: middle;}
#account .save{display:none; padding:4px 10px; color:#4ea139;}
#account .enter{display:inline-block; padding:0 0 0 10px;}
#account .err-note{margin: 0; padding:7px 20px; font-size: 13px; line-height: 17px; color:#a00;}
#account .note{margin: 0 0 14px 0; padding:7px 20px; font-size: 13px; line-height: 17px; color:#666;}

@media screen and (max-width: 1280px){
    #account #manage li .avatar div{font-size:3.8vw;}
}

@media screen and (max-width:1024px){
    #account #manage li b{width:15%;}
    #account #manage li.heading aside{width:75%; padding:6.4% 0 0;}	
    #account #manage li .avatar div{font-size:4.8vw;}
}

@media screen and (max-width:768px){
    #account #manage{width:100%; background: #f8f8f8;}
    #account #manage li b{display: none; text-align: left;}
    #account #manage li aside{width:100%;}

    #account #manage li.heading b{display:inline-block; width:20%;}
    #account #manage li .avatar div{font-size:8.2vw;}
    #account #manage li.heading aside{width:70%; padding:9% 0 0 1%; font-size:28px;}

    #account input,textarea{padding:12px 3.9%;}
    #account .err-note{padding:7px 4%;}
    #account .note{padding:7px 4%;}
}

@media screen and (max-width:480px){
    #account #manage li.heading aside{font-size:22px;}
}


/* ---------------------------------------
Password Strength
------------------------------------------*/
#pass-strength .bar{width:100px; height:10px; background:#eee; border-radius:2px; position:relative; overflow:hidden;}
#pass-strength .bar div{position:absolute; left:0; top:0; width:0; height:100%; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; transition: all .3s ease-in-out;}
#pass-strength .bar div.veryweak{width:20%; background:#a00;}
#pass-strength .bar div.weak{width:40%; background:#f60;}
#pass-strength .bar div.medium{width:60%; background:#fc0;}
#pass-strength .bar div.strong{width:80%; background:#c3ff88;}
#pass-strength .bar div.verystrong{width:100%; background:#46c13a;}
#pass-strength .txt{font-size:12px;}


/* ---------------------------------------
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.review{margin:2% 0; padding:3% 5% 3% 2%; border-right:0; border-left:0; border-top:0;}
#comments li.approval{background:#FAEBEB;}
#comments li .stars{width:100px;}
#comments li .act{display:none; position: absolute; top:0; left:0; width:100%; height:100%; background:#f2f9fd; text-align: center;}
#comments li .delete{z-index: 2; background:#FAEBEB;}
#comments li .loading{z-index: 4;}
#comments li .thanks{z-index: 3;}
#comments li .inner{padding:7% 5% 5%;}
#comments li b{display:block; font-size: large;}
#comments li img{width:48px;}
#comments li span{display:block; 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{margin:2% 0; padding:5% 5%; border-left: 0; border-right: 0; border-bottom: 0;}
	#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:5% 0 0 0; text-align: center;}
#author .avatar{padding:5% 39%;}
#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: 25.4% 0 74.6% 0; cursor:pointer;}


/* ---------------------------------------
Rating Stars
------------------------------------------*/
.rating-stars{float:left; width:50%; padding:2% 0; border-bottom:1px solid #fff; font-size:12px; overflow: hidden;}
.rating-stars .ttl{margin:0 0 4px; font-size:14px;}
.rating-stars .star{float:left; cursor:pointer;}
.rating-stars .star-bg{width:15px; height:30px; background:url(/images/rate-stars-fc0.png) no-repeat; background:url(/images/rate-stars-fc0-x2.png) no-repeat 0 0/30px;}
.rating-stars .star-l .star-bg-hov{background-position:0 -30px !important;}
.rating-stars .star-l .star-bg-sel{background-position:0 -60px;}
.rating-stars .star-r .star-bg{background-position:-15px 0;}
.rating-stars .star-r .star-bg-hov{background-position:-15px -30px !important;}
.rating-stars .star-r .star-bg-sel{background-position:-15px -60px;}
.rating-stars .desc{float:left; line-height:30px; margin:0 0 0 10px;}

@media screen and (max-width: 768px){
	.rating-stars{width:100%; padding:10px 0;}
	.rating-stars .star{float:none; display:inline-block;}
	.rating-stars .desc{float:none; line-height:normal; margin:0;}
}


/* ---------------------------------------
Cookie Note
------------------------------------------*/	
#cookie{position:fixed; bottom: 0; left:0; z-index:99; width:100%; background: rgb(35,85,148); background: rgba(35,85,148,0.98); 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:#245796; color: #fff; border-top:1px solid #fff; }
footer #foot{max-width:1280px; font-size: 13px; min-height:200px; margin:auto; padding:3%; text-align: center; font-size: 11px;}
footer #foot #foot-logo{width:32px;}
footer #foot .social{margin:1% 0 2% 0;}
footer #foot .social li{display:inline-block; vertical-align:middle; width:19%; max-width: 64px;}
footer #foot .social li img{width:50%;}
footer #foot #foot-menu{width:90%; margin:1% auto; font-size: 12px; text-align: left;}
footer #foot #foot-menu li{display: inline-block; vertical-align: top; width:19%; margin:0 0.5%; padding: 0; border-top:1px solid #567dab;}
footer #foot #foot-menu a{display:block; padding:3% 8% 4% 8%; color:#fff; border-bottom: 1px dotted #567dab;}

@media screen and (max-width: 768px){
	footer #foot{padding:3%;}
	footer #foot #foot-menu{width:98%;}
	footer #foot #foot-menu li{width:32.3%;}
}
@media screen and (max-width: 600px){
	footer #foot{padding:5%;}
	footer #foot #foot-menu li{width:49%;}
}
@media screen and (max-width: 480px){
	footer #foot{padding:5%;}
	footer #foot #foot-menu li{width:99%; margin:0;}
}

/* ---------------------------------------
Scroll to Top
------------------------------------------*/
#top-scroll{position:fixed;right:0;bottom:15%;z-index:999;width:32px;display:none;padding:7px 7px 7px 9px;background:rgb(0,0,0); background:rgba(0,0,0,0.5);cursor:pointer;}

/* ---------------------------------------
Profile
------------------------------------------*/	
.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:21%; padding:2%;}
.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 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%;}

.profile-wrapper .overview .detail .stats{width:100%; margin: 2% 0;}
.profile-wrapper .overview .detail .stats dt{display:inline-block; padding:0 5% 0 0;}
.profile-wrapper .overview .detail .stats dt b{font-weight:300;}

.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:70%; background:#f2f9fd; padding:10% 15%;}
	.profile-wrapper .overview .menu .avtr{font-size:20vw;}
	.profile-wrapper .overview .detail{width:85%; padding:7.5%;}
	.profile-wrapper .overview .detail li b{display:none;}
	.profile-wrapper .overview .detail li div{float:left; width:100%;}
	.nameTitle{width:90%;}
	.three{width:90%;}
}


/* ---------------------------------------
Admin
------------------------------------------*/

.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(23,74,137); 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;}


.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;}

.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%;}

.facebook{background:#3b5999;}
.twitter{background:#56a4da;}
.googleplus{background:#de4b39;}
.pinterest{background:#cc211d;}
.youtube{background:#c0221f;}
.instagram{background:#ce5959;}

.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;}