/*
Theme Name:		The Medium Well
Theme URI:		http://www.mediumwell.com/
Author:			Lei Ma
Author URI:		http://www.mediumwell.com/
Version:		1.0
*/

/*-----------------------------------------------------------------------------------
	= Table of Contents

	1. = Fonts
	2. = Body, Typography and some main Elements
	3. = Structure
	4. = Header styling
	5. = Navigation styling
	6. = Footer styling
	7. = Home Page styling
	8. = Page styling	
	9. = Popup styling
	
	
	
/*-----------------------------------------------------------------------------------*/
/* 1. = Fonts
/*-----------------------------------------------------------------------------------*/

@import url(css/font-awesome.min.css);
@import url(css/fonts.css);



/*-----------------------------------------------------------------------------------*/
/* 2. = Body, Typography and some main Elements
/*-----------------------------------------------------------------------------------*/

html * { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
body { font-size:18px; color:#868686; font-family:'Lato', Arial, Helvetica, sans-serif; overflow-x:hidden; }
input[type=text], textarea { -webkit-appearance:none; border-radius:0; }
input, textarea, select, label { font-family:'Lato', Arial, Helvetica, sans-serif; }
h1, h2, h3, h4, h5, h6 { padding:0; margin:0 0 25px 0; line-height:1.2; }
h1 { font-size:48px; }
h2 { font-size:48px; }
h3 { font-size:32px; }
h4 { font-size:24px; }
h5 { font-size:18px; }
h6 { font-size:12px; }
img { display:block; max-width:100%; }
ul,ol { margin:0; padding:0; list-style:none; }
a, a:visited, a:active, #icontact-btn, #icontact-btn:visited, #icontact-btn:active { text-decoration:none; -webkit-transition:all .3s ease-out; -moz-transition:all .3s ease-out; -o-transition:all .3s ease-out; -ms-transition:all .3s ease-out; transition:all .3s ease-out; }
#icontact-btn { cursor: pointer; }a:focus, a:hover { text-decoration:none; outline:0; }
p { margin:0 0 15px 0; line-height:1.4; }
.animate { transition:all 0.3s ease 0s; -webkit-transition:all 0.3s ease 0s; -moz-transition:all 0.3s ease 0s; -ms-transition:all 0.3s ease 0s; }

.light-green { background:#A1BC3A; } 
.green { background:#6FB653; } 
.dark-green { background:#28A04C; } 
.deep-green { background:#078D69; } 
.light-blue { background:#077D8D; } 
.blue { background:#076F8D; } 
.dark-blue { background:#2A557D; } 
.deep-blue { background:#214282; } 

.gray.button { border-color:#454545; background:#777; }
.gray.button:hover { background:#666; }

.button { display:inline-block; color:#FFF; border:4px solid #617513; border-radius:10px; font-size:24px; font-weight:700; text-decoration:none; padding:6px 22px 8px 22px; }
.button:hover { background:#6FB653; color:#FFF; }



/*-----------------------------------------------------------------------------------*/
/* 3. = Structure
/*-----------------------------------------------------------------------------------*/

.container { width:1200px; margin:0 auto; }
.view-mobile { display:none; }
.one-eighth { width:12.5%; float:left; }
.seven-eighth { width:87.5%; float:left; }
.one-fourth { width:25%; float:left; }
.three-fourth { width:75%; float:left; }
.one-second { width:50%; float:left; }



/*-----------------------------------------------------------------------------------*/
/* 4. = Header styling
/*-----------------------------------------------------------------------------------*/

#header { background:#FFF; padding:45px 0 0 0; height:145px; text-align:center; position:relative; color:#4F5050; }
#header .menu-icon { margin:18px 0 0 0; float:left; }
#header .logo { position:absolute; top:50px; left:50%; margin:0 0 0 -143px; }
#header .header-right { float:right; }
#header .header-right .phone { color:#000; font-size:18px; }
#header .header-right li { float:right; margin-left:7px; }
#header .header-right li i { color:#000; font-size:18px; }
#header .site-infor { margin:0; clear:both; padding:7px 0 0 0; }

#header .pop-menu { position:absolute; top:145px; left:0; width:100%; background:#FFF; z-index:100; padding:0 0 20px 0; display:none; }
#header .pop-menu .one-fourth { padding:15px 20px; min-height:170px; }
#header .pop-menu .one-fourth:first-child { border-right:1px solid #9B9B9B; }
#header .pop-menu .one-fourth:nth-child(2) { border-right:1px solid #9B9B9B; }
#header .pop-menu .widget-title { font-weight:700; color:#4F5050; font-size:15px; padding:0 0 16px 0; margin:0 0 15px 0; border-bottom:1px solid #9B9B9B; }
#header .pop-menu li { text-align:left; font-size:15px; }
#header .pop-menu li a { font-weight:300; color:#4F5050; }
#header .pop-menu li a:hover { text-decoration:underline; }
#header .pop-menu .button { border:none; border-radius:0; text-align:center; font-weight:24px; color:#FFF; text-decoration:none; font-weight:300; margin:0 0 16px 0; display:block; }
#header .pop-menu .button.light-green { background:#A1BC3A; } 
#header .pop-menu .button.light-green:hover { background:#6FB653; }
#header .pop-menu .button.light-blue { background:#077D8D; }
#header .pop-menu .button.light-blue:hover { background:#076F8D; }
#header .pop-menu .button span { float:right; font-size:32px; margin:-7px 0 0 0; }

#header .pop-menu form { float:left; width:50%; }
#header .pop-menu form input[type=text] { border:none; background:#4F5050; color:#FFF; border-radius:5px; line-height:25px; height:25px; padding:0 10px; width:100%; font-weight:700; font-size:14px; }
#header .pop-menu form ::-webkit-input-placeholder { color:#C5C5C5; opacity:1; font-weight:700; font-size:14px; -webkit-font-smoothing: antialiased; }
#header .pop-menu form :-moz-placeholder { color:#C5C5C5; opacity:1; font-weight:700; font-size:14px; } 
#header .pop-menu form ::-moz-placeholder { color:#C5C5C5; opacity:1; font-weight:700; font-size:14px; } 
#header .pop-menu form :-ms-input-placeholder { color:#C5C5C5; opacity:1; font-weight:700; font-size:14px; }
#header .pop-menu .social-links { float:right; }
#header .pop-menu .social-links li { float:left; margin:0 10px 0 0; }
#header .pop-menu .social-links li i { color:#666; font-size:20px; transition:all 0.3s ease 0s; -webkit-transition:all 0.3s ease 0s; -moz-transition:all 0.3s ease 0s; -ms-transition:all 0.3s ease 0s; }
#header .pop-menu .social-links li a:hover i { color:#333; }

#link-popup { position:fixed; z-index:10000; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); display:none; opacity:0; }
#link-popup .content { width:1100px; left:50%; top:50%; padding:60px 60px 50px 60px; margin:-275px 0 0 -550px; position:absolute; background:#FFF url(images/popup-bg.jpg) no-repeat left top; border-radius:30px; }
#link-popup .content .close-icon { background:url(images/icon-popup-close.png) no-repeat; width:21px; height:21px; position:absolute; top:25px; right:25px; }
#link-popup .inner-content { width:580px; text-align:right; float:right; }
#link-popup .inner-content h3 { font-size:27px; color:#000; margin:0 0 15px 0; }
#link-popup .inner-content h2 { font-size:43px; color:#FFF; color:#214083; margin:0 0 15px 0; line-height:1.2; }
#link-popup .inner-content p { font-size:30px; color:#FFF; color:#214083; font-weight:300; line-height:1.3; }
#link-popup .inner-content .popup-button { width:400px; height:60px; margin:20px 0 0 0; background:url(images/popup-btn-bg.png) no-repeat center center / 100% 100%; display:block; float:right; font-size:36px; line-height:60px; color:#FFF; text-align:center; }



/*-----------------------------------------------------------------------------------*/
/* 5. = Navigation styling
/*-----------------------------------------------------------------------------------*/

#nav { text-align:center; border-top:7px solid #606060; }

body.category-marketing #nav { border-color:#A1BC3A; }
body.category-search-engine-optimization #nav { border-color:#6FB653; }
body.category-web-design-and-user-experience #nav { border-color:#28A04C; }
body.category-html-css-and-user-interface #nav { border-color:#078D69; }
body.category-mobile-website-development #nav { border-color:#077D8D; }
body.category-web-development #nav { border-color:#076F8D; }
body.category-e-commerce #nav { border-color:#2A557D; }
body.category-robots #nav { border-color:#214282; }

#nav li { width:12.5%; float:left; background:#A1BC3A; line-height:1.2; position:relative; }
#nav li a { color:#FFF; font-size:15px; text-transform:uppercase; text-decoration:none; display:block; }
#nav li span { opacity:1; padding:10px 0; display:block; transition:all 0.3s ease 0s; -webkit-transition:all 0.3s ease 0s; -moz-transition:all 0.3s ease 0s; -ms-transition:all 0.3s ease 0s; }
#nav li i { opacity:0; display:block; top:50%; left:50%; position:absolute; transition:all 0.3s ease 0s; -webkit-transition:all 0.3s ease 0s; -moz-transition:all 0.3s ease 0s; -ms-transition:all 0.3s ease 0s; }
#nav li strong { display:block; }
#nav li a:hover span { opacity:0; }
#nav li a:hover i { opacity:1; }

#nav li.marketing { background:#A1BC3A; }
#nav li.marketing i { background:url(images/icon-nav-marketing.png) no-repeat; width:38px; height:38px; margin:-19px 0 0 -19px; }
#nav li.seo { background:#6FB653; }
#nav li.seo i { background:url(images/icon-nav-seo.png) no-repeat; width:33px; height:36px; margin:-18px 0 0 -16.5px; }
#nav li.design { background:#28A04C; }
#nav li.design i { background:url(images/icon-nav-design.png) no-repeat; width:15px; height:34px; margin:-17px 0 0 -7.5px; }
#nav li.codes { background:#078D69; }
#nav li.codes i { background:url(images/icon-nav-codes.png) no-repeat; width:37px; height:21px; margin:-10.5px 0 0 -18.5px; }
#nav li.mobile { background:#077D8D; }
#nav li.mobile i { background:url(images/icon-nav-mobile.png) no-repeat; width:19px; height:34px; margin:-17px 0 0 -9.5px; }
#nav li.web { background:#076F8D; }
#nav li.web i { background:url(images/icon-nav-web.png) no-repeat; width:31px; height:27px; margin:-15.5px 0 0 -13.5px; }
#nav li.commerce { background:#2A557D; }
#nav li.commerce i { background:url(images/icon-nav-commerce.png) no-repeat; width:30px; height:35px; margin:-17.5px 0 0 -15px; }
#nav li.robot { background:#214282; }
#nav li.robot i { background:url(images/icon-nav-robot.png) no-repeat; width:26px; height:37px; margin:-18.5px 0 0 -13px; }



/*-----------------------------------------------------------------------------------*/
/* 6. = Footer styling
/*-----------------------------------------------------------------------------------*/

#footer { text-align:center; padding:30px 80px; color:#FFF; background:#908F8F; }
#footer .three-fourth { text-align:left; padding:0 30px; }
#footer .three-fourth p { font-size:18px; margin:0; line-height:1.2; }
#footer .social-links { text-align:center; margin-top:40px; }
#footer .social-links li { display:inline-block; vertical-align:middle; margin:0 10px; }
#footer .social-links li i { color:#FFF; font-size:30px; transition:all 0.3s ease 0s; -webkit-transition:all 0.3s ease 0s; -moz-transition:all 0.3s ease 0s; -ms-transition:all 0.3s ease 0s; }
#footer .social-links li a:hover i { color:#999; }
#footer h2 { font-size:24px; font-weight:400; margin:0 0 20px 0; }
#footer li { display:block; margin:0; font-size:18px; }
#footer li a { color:#FFF; }
#footer li a:hover { color:#202020; }
#footer ul.articles { margin:0 0 40px 0; }
#footer .footer-menu { margin:0 0 40px 0; }
#footer .footer-menu li { font-weight:700; }
#footer .footer-menu li ul { margin:0 0 25px 0; }
#footer .footer-menu li ul li { font-weight:300; }
/*-----------------------------------------------------------------------------------*/
/* 7. = Home Page styling
/*-----------------------------------------------------------------------------------*/

#home-slider { position:relative; margin:0 0 35px 0; }
#home-slider .slides li { width:100%; height:470px; background-position:right center; background-repeat:no-repeat; background-size:cover; }
#home-slider .slides li .caption { margin:60px 90px; width:40%; }
#home-slider .slides li .caption h2 { font-size:42px; color:#333; text-transform:uppercase; margin:0 0 5px 0; font-family:'Roboto Condensed', sans-serif; font-weight:300; }
#home-slider .slides li .caption p { font-size:23px; color:#FFF; margin:0 0 60px 0; font-weight:300; letter-spacing:1px; }
#home-slider .slides li .caption .button { }
#home-slider .flex-control-nav { position:absolute; bottom:30px; right:80px; z-index:2; }
#home-slider .flex-control-nav li { float:left; margin-left:10px; }
#home-slider .flex-control-nav li a { text-indent:-9999px; cursor:pointer; border-radius:50%; width:17px; height:17px; display:block; background:#FFF; }
#home-slider .flex-control-nav li a.flex-active { background:#989B9E; }
#home-slider .flex-direction-nav a { display:block; text-indent:-9999px; position:absolute; top:50%; width:29px; height:52px; margin:-26px 0 0 0; }
#home-slider .flex-direction-nav .flex-prev { left:30px; background:url(images/slider-left-arrow.png) no-repeat; }
#home-slider .flex-direction-nav .flex-next { right:30px; background:url(images/slider-right-arrow.png) no-repeat; }

#home-text-slider { height:135px; }
#home-text-slider .slides li { color:#FFF; background:#606060; height:135px; display:none; }
#home-text-slider .slides li .content { padding:25px 30px; }
#home-text-slider .slides li h2 { margin:0 0 2px 0; font-size:30px; font-style:italic; font-weight:300; }
#home-text-slider .slides li h2 strong { font-weight:700; font-style:normal; }
#home-text-slider .slides li p { margin:0; font-size:20px; line-height:1.1; }
/*
#home-text-slider .slides li.slide1 { background:#A1BC3A; }
#home-text-slider .slides li.slide2 { background:#6FB653; }
#home-text-slider .slides li.slide3 { background:#28A04C; }
#home-text-slider .slides li.slide4 { background:#078D69; }
#home-text-slider .slides li.slide5 { background:#077D8D; }
#home-text-slider .slides li.slide6 { background:#076F8D; }
#home-text-slider .slides li.slide7 { background:#2A557D; }
#home-text-slider .slides li.slide8 { background:#214282; }
*/
#home-text-slider .flex-control-nav { display:none; }
#home-text-slider .flex-direction-nav { display:none; }


.post-list .post { margin:0 0 48px 0; position:relative; }
.post-list .post-thumbnail { background-position:center center; background-repeat:no-repeat; background-size:cover; position:relative; display:block; background-color:#4F5050; }
.post-list .post img { width:100%; height:auto; }
.post-list .post .caption { position:absolute; left:0; top:0; width:100%; height:100%; text-align:center; padding:33% 10px 0 10px; opacity:0; background-repeat:no-repeat; background-position:center center; }
.post-list .post .caption.no-icon { padding:42% 0 0 0; }
.post-list .post:hover .caption { opacity:1; }
.post-list .post .caption img { width:auto; margin:0 auto 15px auto; }
.post-list .post .caption h3 { font-size:28px; color:#FFF; text-transform:uppercase; font-weight:300; line-height:1.1; }
.post-list .post .caption h3 strong { display:block; font-weight:700; }
.post-list .post .light-green { background-color:rgba(161,188,58,0.75); } 
.post-list .post .green { background-color:rgba(111,182,83,0.75); } 
.post-list .post .dark-green { background-color:rgba(40,160,76,0.75); } 
.post-list .post .deep-green { background-color:rgba(7,141,105,0.75); } 
.post-list .post .light-blue { background-color:rgba(7,125,141,0.75); } 
.post-list .post .blue { background-color:rgba(7,111,141,0.75); } 
.post-list .post .dark-blue { background-color:rgba(42,85,125,0.75); } 
.post-list .post .deep-blue { background-color:rgba(33,66,130,0.75); } 

.post-list .post .marketing { background-color:rgba(161,188,58,0.75); background-image:url(images/icon-marketing.png); } 
.post-list .post .search-engine-optimization { background-color:rgba(111,182,83,0.75); background-image:url(images/icon-seo.png); } 
.post-list .post .web-design-and-user-experience { background-color:rgba(40,160,76,0.75); background-image:url(images/icon-design.png); } 
.post-list .post .html-css-and-user-interface { background-color:rgba(7,141,105,0.75); background-image:url(images/icon-codes.png); } 
.post-list .post .mobile-website-development { background-color:rgba(7,125,141,0.75); background-image:url(images/icon-mobile.png); } 
.post-list .post .web-development { background-color:rgba(7,111,141,0.75); background-image:url(images/icon-web.png); } 
.post-list .post .e-commerce { background-color:rgba(42,85,125,0.75); background-image:url(images/icon-commerce.png); } 
.post-list .post .robots { background-color:rgba(33,66,130,0.75); background-image:url(images/icon-robot.png); } 

.post-list .post > h3 { font-size:18px; color:#434343; font-weight:300; min-height:100px; padding:15px 20px; margin:0; background:#F5F5F5; border-left:1px solid #FFF; border-bottom:1px solid #FFF; }
.post-list .post > h3 a { color:#202020; }
.post-list .post:nth-child(4n+1) { clear:both; }
.post-list .post:nth-child(4n) > h3 { border-right:1px solid #FFF; }
.post-list .post:last-child > h3 { border-right:1px solid #FFF; }



/*-----------------------------------------------------------------------------------*/
/* 8. = Single Post Page styling
/*-----------------------------------------------------------------------------------*/
.main img{height: auto;max-width: 100%;}
.post-wrapper { border-top:8px solid #A1BC3A; }
.main { padding:30px 45px; }
.page-wrapper .sidebar { padding:30px 20px; }
.entry { font-weight:300; color:#666; }
.entry h1 { font-size:48px; margin:0 0 30px 0; font-weight:400; color:#4F5050; }
.entry h2 { font-size:30px; margin:0 0 30px 0; font-weight:300; }
.entry h3 { font-size:24px; margin:0 0 30px 0; font-weight:300; }
.entry h4 { font-size:20px; margin:0 0 30px 0; font-weight:300; }
.entry h5 { font-size:18px; margin:0 0 30px 0; font-weight:300; }
.entry h6 { font-size:18px; margin:0 0 30px 0; font-weight:300; }
.entry p { margin:0 0 30px 0; }
.entry .post-meta { margin:0 0 25px 0; }
.entry .post-meta img { float:left; border:1px solid #5B5C5C; }
.entry .post-meta .print img { float:right; border:none; }
.entry .author-infor { margin:8px 0 5px 70px; }
.entry .author-infor em { font-weight:700; color:#000; }
.entry .author-infor p { font-size:15px; margin:0; color:#4F5050; }
.entry .author-infor h3 { margin:0; color:#4F5050; }
.entry .post-date { font-size:14px; margin:0; }
.entry blockquote { margin:0 0 50px 0; padding:15px 20px; background:#E8E8E8; color:#3A3A3A; font-size:20px; font-style:italic; border:none; }
.entry blockquote p:last-child { margin:0; }
.entry ul, .entry ol { margin:0 0 30px 0; }
.entry ul li { list-style:disc; margin:0 0 0 18px; padding:0 0 0 8px; }
.entry ol li { list-style:decimal; margin:0 0 0 18px; padding:0 0 0 8px; }
.entry img.aligncenter { margin:0 auto 30px auto; }
.entry img.alignleft { margin:0 20px 30px 0; float:left; }
.entry img.alignright { margin:0 0 30px 20px; float:right; }
.entry a:hover { text-decoration:underline; }
.sidebar .widget { margin:0 0 50px 0; }
.sidebar .widget:last-child { margin:0; }
.sidebar .textwidget img { margin:0 0 10px 0; }
.sidebar .textwidget h3 { margin:0; color:#4F5050; font-weight:300; }
.sidebar .textwidget p { font-size:15px; margin:0; color:#4F5050; }
.sidebar .textwidget p:last-child { margin:0; }
.sidebar .textwidget em { font-weight:700; color:#000; }
.sidebar.page-sidebar { border:1px solid #BABABA; border-top:none; }
.sidebar.page-sidebar .textwidget p { font-size:17px; color:#4F5050; margin:0 0 20px 0; }
.sidebar.page-sidebar .textwidget .small { font-size:14px; }
.sidebar.page-sidebar p:last-child { margin:0; }
.archive-wrapper { min-height:700px; }
.archive-wrapper h1 { text-align:center; padding:40px 0; margin:0; }
.about-author { border-top:1px solid #BABABA; padding:25px 0 0 0; }
.about-author h3 { margin:0 0 20px 0; }
.about-author img { float:left; }
.about-author .author-content { margin-left:170px; }
.about-author .author-content .name { margin:0 0 5px 0; }
.about-author .author-content .name a { color:#666; }
.about-author .author-content .bio { margin:0; font-size:16px; }
.author-title { padding:20px 0 25px 0; color:#4f5050; font-size:32px; margin:0; }



/*-----------------------------------------------------------------------------------*/
/*	9. = Popup styling/
*-----------------------------------------------------------------------------------*/

.pum-content p { display: block; margin: 0; padding: 0; line-height: 0; }
.main .wp-caption{max-width:100%;}


.sidebar.post-sidebar { padding:0; }
.sidebar.post-sidebar .widget { margin:0 0 30px 0; }

.sidebar .widget-ad { margin:40px 0 0 0; }
.sidebar .widget-ad { background:#234083; padding:30px 30px 40px 30px; text-align:center; }
.sidebar .widget-ad img { margin:0 auto 30px auto; }
.sidebar .widget-ad p { margin:0 0 35px 0; font-size:20px; font-weight:300; color:#FFF; }
.sidebar .widget-ad a { display:inline-block; width:214px; height:50px; background:url(images/sidebar-btn.png) no-repeat; color:#FFF; text-align:center; font-size:24px; font-weight:400; padding:4px 0 0 0; }

.sidebar .widget-site { margin:40px 0 0 0; padding:20px 15px; border:1px solid #1C8BB9; font-size:14px; }
.sidebar .widget-site .site-name { margin:0 0 20px 0; color:#7b7b7b; font-size:16px; font-weight:700; text-align:center; }
.sidebar .widget-site img { margin:0 auto 30px auto; }
.sidebar .widget-site p:last-child { margin:0; }

.sidebar .custom-widget { margin:0 0 30px 0; padding:15px; border:1px solid #CBCBCB; font-size:14px; }
.sidebar .custom-widget .site-name { margin:0 0 14px 0; color:#7b7b7b; font-size:16px; font-weight:700; }
.sidebar .custom-widget h3 { font-size:16px; color:#000; font-weight:700; margin:0 0 15px 0; }
.sidebar .custom-widget h3 a { color:#000; }
.sidebar .custom-widget h3 a:hover { text-decoration:underline; }
.sidebar .custom-widget p:last-child { margin:0; }