/**
 * Theme Name: Mech
 * Theme URI: https://wordpress.org/
 * Author: chuxin
 * Author URI: https://wordpress.org/
 * Description: The 2013 theme for WordPress takes us back to the blog
 * Version: 1.0
 * 
 */

*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
a,abbr,acronym,address,applet,b,big,blockquote,body,caption,center,cite,code,dd,del,dfn,div,dl,dt,em,fieldset,font,form,h1,h2,h3,h4,h5,h6,html,i,iframe,img,ins,kbd,label,legend,li,object,ol,p,pre,q,s,samp,small,span,strike,strong,sub,sup,table,tbody,td,tfoot,th,thead,tr,tt,u,ul,var{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:0 0}
body{line-height:1; background: #ffffff url('images/bg_repeat.png') repeat-x; }
ol,ul{list-style:none}
a{text-decoration:none;}
blockquote,q{quotes:none}
blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}
:focus{outline:0}
ins{text-decoration:none}
del{text-decoration:line-through}
table{border-collapse:collapse;border-spacing:0}
.clear{clear:both}
::-webkit-input-placeholder{color:#7d7b6d}
:-moz-placeholder{color:#7d7b6d}
::-moz-placeholder{color:#7d7b6d}
:-ms-input-placeholder{color:#7d7b6d}
.wrapper { margin: 0 auto; min-width: 960px; max-width: 70%; }
.relative { position: relative; }

.header { position: relative; background: url('images/bg-header.jpg') top right no-repeat;;  }
.topbar { min-height: 107px; padding: 8px 0; }
.logo { float: left; display: block; }
.logo img { height: 90px; }
.title { float: left; margin: 25px 25px 0; color: #fff; font-family: "Open Sans"; font-weight: 700; font-size: 36px; }
.backlink { background: #59b517; position: absolute; top: 0px; right: 15px; padding: 8px 15px; color: #fff; font-family: "Open Sans"; text-decoration: none; font-size: 15px; font-weight: bold; }
.navigation { width: 100%; height: 43px; }
.menu-toggle { display: none; width: 4.8em; text-align: right; text-indent: 0px; background: #022c56; position: relative; float: right; color: #ffffff; text-decoration: none; font-family: "open sans"; font-size: 18px; padding: 12px 10px; }
.menu-toggle:before, .menu-toggle:after { position: absolute; border: 2px solid #fff; top: 35%; left: 15%; right: 75%; content: ''; }
.menu-toggle:after {top: 60%; }
.menu-toggle( :target ) > a:first-of-type, .menu-toggleget > a:last-of-type {display: block; }
.navigation ul li { float: left; font-size: 16px; line-height: 31px; margin: 0px 4px; font-family: "Open Sans", arial; font-weight: 400; }
.navigation ul li a {display: block; color: #ffffff; text-decoration: none; padding: 6px 15px; }
.navigation ul li:hover a { background:#032f5e; border-top:5px; padding-top:11px; margin-top:-5px; color:#63bd27; }
.banner { background: url('http://www.incribbonblender.com/wp-content/uploads/2017/03/ribbonblender-slide.jpg') top center no-repeat; background-size: cover; position: relative; overflow: hidden; margin-bottom: 30px; }
.slide { position: relative; z-index: 30; height: 465px; }
.slide img.focal { float:left; margin-top:85px; padding-right:30px; }
.slide h1 { color:#ffffff; font-size:36px; font-family:"Open Sans"; font-weight:700; padding-top:70px; line-height:60px; }
.slide h1 a { color:#fbff8f; text-decoration:none; }
.slide h1 a.slideCTA { border-radius: 15px; background: #59b517; padding: 15px 20px; color: #fff !important; float: left; display: block; margin-top: 30px; font-family: "Open Sans"; font-weight: 700; font-size: 20px; text-decoration: none; line-height: 30px; }
.main { margin-bottom: 30px; margin-top: 30px; overflow: hidden; }
.main .content {width: 60%; float: left; }
.main .content h2 { font-size: 30px; font-family: "Open Sans"; color: #0f69b8; font-weight: 300; border-bottom: 2px solid #57a5ea; margin-bottom: 25px; margin-top: 25px; }
.main .content h2 span { background: #ffffff; padding-right: 15px; margin-top: -15px; float: left; }
.main .content p { font-family: arial; font-size: 15px; line-height: 24px; margin: 20px 0px; }
.main .sidebar { width: 36%; float: right; }
.module { background: #093f76 url('images/bg_module.png') repeat-x; padding: 20px; margin-bottom: 25px; }
.subnavigation, .lightcontent { background: #e9ecef; padding: 0px; }
.lightcontent { padding-bottom: 15px; }
.module h3 { font-family: "Open Sans"; font-size: 20px; font-weight: 300; color: #ffffff; margin-bottom: 15px; }
.module p { font-family: "Open Sans"; font-size: 14px; font-weight: 400; color: #ffffff; margin-bottom: 15px; line-height: 24px; }
.subnavigation h3, .lightcontent h3 { font-family: "Open Sans"; font-size: 22px; color: #ff6702; font-weight: 400; padding: 15px; }
.lightcontent p { color: #222; font-family: arial; font-size: 14px; padding: 0px 15px; }
.footer { background: #156ab3 url('images/bg_footer.png') repeat-x; padding: 30px 0px; }
.footer .menu { float: left; width: 100%; overflow: hidden; position: relative; }
.footer .menu ul { clear: left; float: left; left: 50%; text-align: center; position: relative; }
.footer .menu li { float: left; display: block; right: 50%; position: relative; }
.footer .menu li a { display: block; color: #fff; padding: 8px 10px; font-family: arial; font-size: 15px; text-decoration: none; }
.copyright { margin-top: 30px; text-align: center; vertical-align: middle; }
.copyright p { font-family: arial; font-size: 15px; color: #ffffff; line-height: 24px; padding-top: 60px; padding-left: 15px; }
.copyright img { width: 70px; vertical-align: middle; margin-right: 30px; }
.page { width: 100%; }
.page h2 { font-size: 30px; font-family: "Open Sans"; color: #0f69b8; font-weight: 300; border-bottom: 2px solid #57a5ea; margin-bottom: 25px; margin-top: 25px; }
.page p {    font-family: arial; font-size: 15px; line-height: 24px; margin: 10px 0px; }
.page p a { color: #60ad3e;     text-decoration: none; }
.page input[type="text"], .page input[type="email"], .page select { border: 1px solid #d0d0d0; padding: 5px; font-size: 15px; }
.page .wpcf7-submit { background: #156ecd; padding: 15px 25px; font-family: "Open Sans"; color: #ffffff; font-size: 18px; font-weight: bold; border: 0px; border-bottom: 2px solid #e0e0e0; border-radius: 8px; cursor: pointer; }
.prod-detail { border: 1px solid #7d7d7d; min-height: 400px; margin-top: 50px; }
.prod-nav {background: #ffffff url('images/bg_prodnav.png') repeat-x; height: 105px; border-bottom: 1px solid #d0d0d0; position: relative; }
.prod-nav ul {margin: 0px; list-style: none; }
.prod-nav ul li {float: left; font-family: arial; font-size: 15px; padding: 0px 10px; }
.prod-nav ul li a {float: left; display: block; color: #ffffff; padding: 16px 20px 16px 20px; }
.prod-nav ul li.active a {background: #ffffff; border: 1px solid #7d7d7d; border-bottom: 0px; margin-top: -15px; color: #222222; padding-bottom: 22px; padding-top: 24px; }
.prod-content {padding: 20px; font-size: 15px; font-family: Arial; line-height: 24px; }
.prod-content > div, .prod-content br { display: none; }
.prod-content div.active { display: block; }
.prod-content p { margin: 20px 0px;font-size: 15px; font-family: Arial; line-height: 24px; }
.post { float: left; width: 50%; padding: 8px;  }
.tit { font-size: 30px; font-family: "Open Sans"; color: #0f69b8; font-weight: 300; border-bottom: 2px solid #57a5ea; margin-bottom: 25px; }
.post-list { overflow: hidden; }
.post-box { padding: 10px; border: 1px solid #dddddd; overflow: hidden; }
.post-box h1 { font-family: arial; font-size: 15px; line-height: 24px; margin: 10px 0px; }
.post-thumbnail { float: left; width: 35%; }
.post-thumbnail img { max-width: 100%; height: auto; }
.post-content { float: right; width: 62%; font-family: arial; font-size: 15px; line-height: 24px; margin: 20px 0px; }

@media (max-width:800px){
.wrapper { min-width: 100%; padding: 0 20px; }
.header { background: #06284b; height: 165px; }
.logo { position: absolute; z-index: 50; top: 5px; left: 15px; width: 70px;}
.title { position: absolute; top: 38px; left: 100px; margin: 0; color: #fff; font-family: "Open Sans"; font-weight: 700; font-size: 36px;}
.menu-toggle { display: block; }
.navigation { display: block; }
.navigation > ul { top: 42px; position: relative; display: none; width: 100%; height: auto; background: #022c56; z-index: 999; }
.navigation > ul > li {float: none; font-size: 14px; }
#navigation > ul > li > a { width: auto; display: block; float: none; padding: 6px 20px; }
.banner { display: none; }
.main .content { width: 100%; }
.main .sidebar { width: 100%; }
.post-thumbnail, .post-content { width: 100%; }
.post-thumbnail { text-align: center; }
.post-content { padding: 0; }
.prod-nav {background:#0b4681 url('images/bg_prodnav.png') repeat-x; border-bottom:1px solid #d0d0d0; position:relative; height:auto; padding:0px; }
.prod-nav ul {margin:0px; list-style:none; }
.prod-nav ul li {font-family:arial; float:none; font-size:15px; padding:0px 0px; }
.prod-nav ul li a {float:none; display:block; color:#ffffff; padding:10px 15px; }
.prod-nav ul li a:hover {color:#60ad3e; text-decoration:underline; background:none; }
.prod-nav ul li.active a {background:#00203f; border:0px; margin:0px; color:#f0d91a; padding:10px 15px; }
.prod-nav ul li.active a:hover {background:#00203f; border:0px; margin:0px; color:#f0d91a; padding:10px 15px; text-decoration:underline; }
}