/*****
Theme Name: MH TechMagazine
Theme URI: https://www.mhthemes.com/themes/mh/techmagazine/
Description: MH TechMagazine has a nice wide and flat layout with an appealing blue color scheme, which is especially suitable for online magazines, dynamic news websites or professional blogs about technology, science, gadgets or anything else you can imagine. You can have the same layout in the premium version of MH Magazine (without the need of a child theme) which can be configured by making use of the flexible layout options. MH Magazine offers additional widget areas, multiple unique custom widgets, great features and extended layout options to manage several layout elements on your site including changing the color scheme and typography.
Author: MH Themes
Author URI: https://www.mhthemes.com/
Template: mh-magazine-lite
Version: 1.2.2
Tags: one-column, two-columns, left-sidebar, right-sidebar, custom-background, flexible-header, custom-colors, custom-header, custom-menu, featured-images, footer-widgets, theme-options, full-width-template, threaded-comments, translation-ready, rtl-language-support, blog, news
Text Domain: mh-techmagazine
Domain Path: /languages/
License: GNU General Public License v2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*****/

/***** Structure *****/
@import url(//fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700,700italic);
body { color: #222222;  font-family:Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;}
.mh-container-outer { margin: 0 auto; box-shadow: none; }

/***** Typography *****/

h1, h2, h3, h4, h5, h6 { color: #222222; }
pre, code { background: #e9ecf6; }
kbd { background: #e9ecf6; }
blockquote { color: #222222; border-color: #ec1c2a; }
a { color: #222222; }
a:hover { color: #ec1c2a; }

/***** Header *****/

.mh-header-tagline { color: #ec1c2a; }

/***** Navigation *****/

.mh-main-nav-wrap { background: #222; }
.mh-main-nav { background: #222222; border-bottom: none; }
.mh-main-nav li:hover { background: #ec1c2a; }
.mh-main-nav ul li:hover > ul { background: #222; }
.mh-main-nav .menu > .current-menu-item { background: none; }
.mh-main-nav .menu > .current-menu-item:hover { background: #ec1c2a; }

/***** SlickNav Custom Style *****/

.slicknav_btn { background: #ec1c2a; }
.slicknav_menu { border-color: #222222; background: #ec1c2a; }
.slicknav_nav ul { border-color: #222222; }
.slicknav_nav .slicknav_item:hover, .slicknav_nav a:hover { background: #ec1c2a; }
.mh-main-nav-wrap .slicknav_btn, .mh-main-nav-wrap .slicknav_menu, .mh-main-nav-wrap .slicknav_nav .slicknav_item:hover, .mh-main-nav-wrap .slicknav_nav a:hover { background: transparent; }
.mh-main-nav-wrap .slicknav_nav ul { border-color: #ec1c2a; }
.mh-main-nav-wrap .slicknav_nav ul ul { border: none; }

/***** Posts/Pages *****/

.page-title { color: #222222; }
.mh-meta, .mh-meta a, .mh-footer .mh-meta a { color: #607d8b; }
.mh-meta a:hover, .mh-footer .mh-meta a:hover { color: #ec1c2a; }
.entry-content a { color: #397db2; }
.entry-content a:hover { color: #ec1c2a; }
.entry-tags li { background: #222222; }
.entry-tags li:hover { background: #fd7b01; }
.entry-tags .fa { background: #fd7b01; }

/***** Pagination *****/

.page-numbers { color: #222222; background: #e9ecf6; }
.page-numbers:hover, .mh-loop-pagination .current, .mh-comments-pagination .current, a:hover .pagelink { background: #ec1c2a; }
.pagelink { background: #ec1c2a; }
a .pagelink { color: #222222; background: #e9ecf6; }

/***** Footer *****/

.mh-footer { background: #222222; }
.mh-footer a { color: #e9ecf6; }
.mh-copyright-wrap { border-color: #555; background: #222222; }
.mh-copyright, .mh-copyright a { color: #e9ecf6; }

/***** Images / Video *****/

.wp-caption-text { color: #222222; }

/***** Gallery *****/

.gallery-caption { color: #fff; }

/***** Comments *****/

.bypostauthor .mh-comment-meta-author:after, .mh-comment-meta-links .comment-reply-link:before, #respond #cancel-comment-reply-link:before { color: #ec1c2a; }

/***** Forms *****/

input[type=text]:hover, input[type=email]:hover, input[type=tel]:hover, input[type=url]:hover, textarea:hover { border-color: #ec1c2a; }
input[type=submit] { background: #ec1c2a; }
input[type=submit]:hover { background: #222222; }

/***** Searchform *****/

.mh-widget .search-form { background: #e9ecf6; }

/***** Widgets *****/

.mh-widget-title { font-size: 14px; font-size: 0.875rem; font-weight: 700; color: #000; padding: 10px 0px 10px 0px; background: #fff; border-bottom: solid 2px #fd7b01; }
.mh-widget-title a { color: #000; font-weight: 700;}

/***** Widgets Areas (Advertising) *****/

.mh-ad-spot { background: #e9ecf6; }

/***** MH Slider Widget *****/

.mh-slider-widget img { width: 100%; display: block; }
.mh-slider-widget .flex-control-nav { width: auto; top: 20px; right: 15px; bottom: auto; }
.mh-slider-widget .flex-control-paging li a { width: 20px; height: 20px; background: #fff; border: none; -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; border-radius: 0; -webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; box-shadow: none; }
.mh-slider-widget .flex-control-paging li a:hover { background: #f5f5f5; }
.mh-slider-widget .flex-control-paging li a.flex-active { background: #ec1c2a; border: none; }
.mh-slider-caption { top: 0; bottom: 0; left: 0; background: #222222; background: rgba(51, 63, 73, 0.8); border: none; }
.mh-slider-caption, .mh-slider-caption .mh-excerpt-more, .mh-slider-title { color: #e9ecf6; }
.mh-widget-col-1 .flex-control-nav, .mh-widget-col-2 .flex-control-nav { top: 15px; right: 10px; }
.mh-widget-col-1 .mh-slider-caption { background: #222222; }
.mh-footer-widget .mh-slider-caption { background: rgba(255, 255, 255, 0.1); }

/***** MH Posts Stacked Widget *****/

.mh-posts-stacked-title { background: #222222; background: rgba(51, 63, 73, 0.8); }
.mh-posts-stacked-meta { background: #ec1c2a; }
#mh-mobile .mh-footer-widget .mh-posts-stacked-overlay { border-color: #222222; }

/***** MH Tabbed Widget *****/

.mh-tabbed-widget, .mh-tabbed-widget a { color: #222222; }
.mh-tabbed-widget a:hover { color: #ec1c2a; }
.mh-tabbed-widget .tagcloud a { color: #fff; }
.mh-tab-buttons { border-bottom: 3px solid #ec1c2a; }
.mh-tab-button { background: #e9ecf6; }
.mh-tab-button.active, .mh-tab-button.active:hover { color: #fff; background: #ec1c2a; }
.mh-tab-content { background: #e9ecf6; }
.mh-footer-widget .mh-tabbed-widget, .mh-footer-widget .mh-tabbed-widget a { color: #fff; }
.mh-footer-widget .mh-tab-button.active { background: #ec1c2a; }
.mh-footer-widget .mh-tab-comment-excerpt { background: #222222; }

/***** WP Calendar Widget *****/

#wp-calendar caption { background: #e9ecf6; }

/***** WP Tag Cloud Widget *****/

.mh-widget .tagcloud a { background: #ccc; }
.mh-footer-widget .tagcloud a { background: #ccc; }
.tagcloud a:hover, .mh-widget .tagcloud a:hover, .mh-footer-widget .tagcloud a:hover { background: #ec1c2a; }

/***** WP Recent Posts Widget / WP Recent Comments Widget *****/

.widget_recent_entries .post-date { color: #607d8b; margin-bottom: 5px; }

/***** Media Queries *****/

@media screen and (max-width: 900px) {
	#mh-mobile .mh-slider-caption { background: #222222; background: rgba(51, 63, 73, 1); }
}
@media only screen and (max-width: 420px) {
	.mh-copyright-wrap { padding: 15px 20px; }
}

table.basic{
    border-top:1px solid #ccc;
    border-left:1px solid #ccc;
    border-right:1px solid #ccc;
    border-bottom:1px solid #ccc;
    width:100%;
height: auto;
    border-collapse:separate;
    border-spacing:0;
    background-color:#eeecec;
    empty-cells:show;
}
.basic th{
    width:33.3%;
    border-top:1px solid #ccc;
    border-left:1px solid #ccc;
    border-right:1px solid #ccc;
    border-bottom:1px solid #ccc;
    background-color:#eeeeee;
    padding:2%;
color:#222;
font-size: 16px;
    text-align:left;
vertical-align:middle;
}

.basic td{
    border-top:1px solid #ccc;
    border-left:1px solid #ccc;
    border-right:1px solid #ccc;
    border-bottom:1px solid #ccc;
    vertical-align:top;
    padding:2%;
font-size: 16px;
    width:66.7%;
    background-color:#fff;
    text-align:left;
}
.basic th.mini{
    width:10%;
    border-top:1px solid #ccc;
    border-left:1px solid #ccc;
    border-right:1px solid #ccc;
    border-bottom:1px solid #ccc;
    background-color:#ffffff;
    padding:2%;
color:#222;
font-size: 16px;
    text-align:center;
vertical-align:middle;
}
.basic th.red{
    width:20%;
    border-top:1px solid #ccc;
    border-left:1px solid #ccc;
    border-right:1px solid #ccc;
    border-bottom:1px solid #ccc;
    background-color:rgb(200, 23, 31);
    padding:2%;
color:#fff;
font-size: 18px;
    text-align:center;
vertical-align:middle;
}
@media screen and (max-width: 400px) {
   /* 表示領域が400px以下の場合に適用するスタイル */
table.basic{
    border-top:1px solid #ccc;
    border-left:1px solid #ccc;
    border-right:1px solid #ccc;
    border-bottom:1px solid #ccc;
    width:100%;
height: auto;
    border-collapse:separate;
    border-spacing:0;
    background-color:#eeecec;
    empty-cells:show;
}
.basic th{
    width:33.3%;
    border-top:1px solid #ccc;
    border-left:1px solid #ccc;
    border-right:1px solid #ccc;
    border-bottom:1px solid #ccc;
    background-color:#eeeeee;
    padding:2%;
color:#222;
font-size: 16px;
    text-align:left;
vertical-align:middle;
}

.basic td{
    border-top:1px solid #ccc;
    border-left:1px solid #ccc;
    border-right:1px solid #ccc;
    border-bottom:1px solid #ccc;
    vertical-align:top;
    padding:2%;
font-size: 16px;
    width:66.7%;
    background-color:#fff;
    text-align:left;
}
.basic th.mini{
    width:10%;
    border-top:1px solid #ccc;
    border-left:1px solid #ccc;
    border-right:1px solid #ccc;
    border-bottom:1px solid #ccc;
    background-color:#ffffff;
    padding:2%;
color:#222;
font-size: 16px;
    text-align:center;
vertical-align:middle;
.basic th.red{
    width:20%;
    border-top:1px solid #ccc;
    border-left:1px solid #ccc;
    border-right:1px solid #ccc;
    border-bottom:1px solid #ccc;
    background-color:rgb(200, 23, 31);
    padding:2%;
color:#fff;
font-size: 14px;
    text-align:center;
vertical-align:middle;
}
}
}

h20 {
font-weight: 700;
font-size: 16px;
  padding: 0.25em 0.5em;/*上下 左右の余白*/
  color: #CC282E;/*文字色*/
  background: transparent;/*背景透明に*/
  border-left: solid 5px #CC282E;/*左線*/
line-height: 40px;
}

h21 {
font-weight: 700;
font-size: 16px;
  padding: 0.25em 0.5em;/*上下 左右の余白*/
  color: #7b1616;/*文字色*/
  background: transparent;/*背景透明に*/
  border-left: solid 5px #7b1616;/*左線*/
line-height: 40px;
}
h22 {
  position: relative;
  background: #f4f4f4;
  padding: 2px 5px 2px 20px;
  font-size: 20px;
  color: #7b1616;
  border-radius: 0 10px 10px 0;
}

h22:before {
  font-family: "FontAwesome";
  content: "\f041";
  display: inline-block;
  line-height: 40px;
  position: absolute;
  padding: 0em;
  color: white;
  background: #7b1616;
  font-weight: normal;
  width: 40px;
  text-align: center;
  height: 40px;
  line-height: 40px;
  left: -1.35em;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  border-radius: 50%;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.29);
}

h23 {
font-size: 1.2em;
  padding: 0.5em;
line-height: 2.25em;
  background: aliceblue;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.23);
}

@media screen and (max-width: 600px) {
   /* 表示領域が400px以下の場合に適用するスタイル */
h21 {
font-weight: 700;
font-size: 14px;
  padding: 0.25em 0.5em;/*上下 左右の余白*/
  color: #7b1616;/*文字色*/
  background: transparent;/*背景透明に*/
  border-left: solid 5px #7b1616;/*左線*/
line-height: 20px;
}
h22 {
  position: relative;
  background: #f4f4f4;
  padding: 2px 5px 2px 20px;
  font-size: 14px;
  color: #7b1616;
  border-radius: 0 10px 10px 0;
}

h22:before {
  font-family: "FontAwesome";
  content: "\f041";
  display: inline-block;
  line-height: 20px;
  position: absolute;
  padding: 0em;
  color: white;
  background: #7b1616;
  font-weight: normal;
  width: 20px;
  text-align: center;
  height: 20px;
  line-height: 20px;
  left: -1.35em;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  border-radius: 50%;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.29);
}
h23 {
font-size: 1em;
  padding: 0.5em;
line-height: 3.05em;
  background: aliceblue;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.23);
}
}


hr.black{
  border-top: 3px solid #bbb;
}


hr.dashed{
  border-top: 1px dashed #ccc;
}

table.main8{
    width:100%;
    border-top:1px solid #ffffff;
    border-left:1px solid #ffffff;
    border-bottom:1px solid #ffffff;
    border-right:1px solid #ffffff;
    border-collapse:collapse;
    border-spacing:0;
    background-color:#ffffff;
    empty-cells:show;
}
.main8 th{
    border-top:10px solid #ffffff;
    border-left:10px solid #ffffff;
    border-bottom:10px solid #ffffff;
    border-right:10px solid #ffffff;
    color:#ffffff;
    background-color:#072f5c;
    padding:10px 10px 10px 10px;
    text-align:center;
}
.main8 td{
    padding:10px 10px 10px 10px;
    border-top:10px solid #ffffff;
    border-left:10px solid #ffffff;
    border-bottom:10px solid #ffffff;
    border-right:10px solid #ffffff;
    background-color:#ffffff;
    color:#000000;
    font-weight: bold;
    vertical-align:middle;
    text-align:right;
}
table.main9{
    width:100%;
    border-top:1px solid #ffffff;
    border-left:1px solid #ffffff;
    border-bottom:1px solid #ffffff;
    border-right:1px solid #ffffff;
    border-collapse:collapse;
    border-spacing:0;
    background-color:#ffffff;
    empty-cells:show;
}
.main9 th{
    border-top:10px solid #ffffff;
    border-left:10px solid #ffffff;
    border-bottom:10px solid #ffffff;
    border-right:10px solid #ffffff;
    color:#ffffff;
    background-color:#072f5c;
    padding:10px 10px 10px 10px;
    text-align:center;
}
.main9 td{
    padding:10px 10px 10px 10px;
    border-top:10px solid #ffffff;
    border-left:10px solid #ffffff;
    border-bottom:10px solid #ffffff;
    border-right:10px solid #ffffff;
    background-color:#ffffff;
    color:#000000;
    font-weight: bold;
    vertical-align:middle;
    text-align:right;
}

table.main11{
    width:100%;
    border-top:1px solid #ffffff;
    border-left:1px solid #ffffff;
    border-bottom:1px solid #ffffff;
    border-right:1px solid #ffffff;
    border-collapse:collapse;
    border-spacing:0;
    background-color:#ffffff;
    empty-cells:show;
}
.main11 th{
    border-top:1px solid #ffffff;
    border-left:1px solid #ffffff;
    border-bottom:1px solid #ffffff;
    border-right:1px solid #ffffff;
    color:#ffffff;
    background-color:#072f5c;
    padding:10px 10px 10px 10px;
    text-align:center;
}
.main11 td{
    padding:10px 10px 10px 10px;
    border-top:1px solid #000000;
    border-left:0px solid #072f5c;
    border-bottom:1px solid #000000;
    border-right:0px solid #072f5c;
    background-color:#ffffff;
    color:#000000;
    font-weight: normal;
    vertical-align:middle;
    text-align:left;
}

@media screen and (max-width: 400px) {
   /* 表示領域が400px以下の場合に適用するスタイル */
table.main8{
    width:100%;
    border-top:1px solid #ffffff;
    border-left:1px solid #ffffff;
    border-bottom:1px solid #ffffff;
    border-right:1px solid #ffffff;
    border-collapse:collapse;
    border-spacing:0;
    background-color:#ffffff;
    empty-cells:show;
}
.main8 th{
    border-top:1px solid #ffffff;
    border-left:1px solid #ffffff;
    border-bottom:1px solid #ffffff;
    border-right:1px solid #ffffff;
    color:#ffffff;
    background-color:#072f5c;
    padding:2px;
    text-align:center;
font-size: 10px;
}
.main8 td{
    padding:2px;
    border-top:1px solid #ffffff;
    border-left:1px solid #ffffff;
    border-bottom:1px solid #ffffff;
    border-right:1px solid #ffffff;
    background-color:#ffffff;
    color:#000000;
    font-weight: bold;
    vertical-align:middle;
    text-align:right;
font-size: 10px;

}
table.main9{
    width:320px;
    border-top:1px solid #ffffff;
    border-left:1px solid #ffffff;
    border-bottom:1px solid #ffffff;
    border-right:1px solid #ffffff;
    border-collapse:collapse;
    border-spacing:0;
    background-color:#ffffff;
    empty-cells:show;
}
.main9 th{
    border-top:1px solid #ffffff;
    border-left:1px solid #ffffff;
    border-bottom:1px solid #ffffff;
    border-right:1px solid #ffffff;
    color:#ffffff;
    background-color:#072f5c;
    padding:2px;
    text-align:center;
font-size: 6px;

}
.main9 td{
    padding:2px;
    border-top:1px solid #ffffff;
    border-left:1px solid #ffffff;
    border-bottom:1px solid #ffffff;
    border-right:1px solid #ffffff;
    background-color:#ffffff;
    color:#000000;
    font-weight: bold;
    vertical-align:middle;
    text-align:right;
font-size: 6px;

}

}


.btn-flat-double-border {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  color: #67c5ff;
  border: double 4px #67c5ff;
  border-radius: 3px;
  transition: .4s;
}
.btn-flat-double-border:hover {
  background: #fffbef;
}