html { height: 100%; } *, *:before, *:after { box-sizing: border-box; } body{ font-size:14px; margin:0; font-family:Verdana,sans-serif; background:#fff; position: relative; padding-bottom: 200px; min-height: 100%; } a:link,a:visited{color:#d40000; text-decoration:none;} a:active,a:hover{text-decoration:underline;} ol,ul,ui,li{list-style:none;} del{text-decoration:line-through;} p{margin:0;} img,a img{border:0;} .post-content-img {  width: 28%; } .post-content-img img { width: 100%; padding: 0 10px 0 0; }  .wrapper, .headw { margin:0 auto; max-width:1020px; } .wrapper { overflow:hidden; color:#222; line-height: 2; } .header{ height: auto; background:#e25d5d; } .site-title { font-size:16px; color:#ffffff; font-weight:normal; line-height:42px; padding:0 10px; } .site-title a:link, .site-title a:visited { color:#ffffff; text-decoration:none; } .site-description { color:#ddd; padding-bottom:30px; } .head-menu { background:#1d212a; height: auto; } .topnav { overflow: hidden; height: auto; } .topnav a { float: left; display: block; color: #fff; text-align: center; padding: 14px 16px; text-decoration: none; } .topnav a:hover { background-color: #505050; } .topnav a.active { background-color: #2196F3; } .topml { width: 65%; } .search-container { display:table; margin: 2px 0; padding:1px; float: right; width: 315px; } .search-input { display:table-cell; } .search-input input[type=text] { width: 98%; height: 36px; font-size: 17px; border: none; border-radius: 4px; } .search-container input[type=submit] { height: 36px; font-size: 17px; color: #222; border-radius: 4px; border: none; background-color: #f5f5f5; cursor: pointer; }  .content { max-width:854px; margin:0 auto; padding:0 12px; } .content-row { width: 100%; display: table;    } .content-des {  width: 72%;  } .post-title { font-size:18px; font-weight:bold; margin: 30px 0 16px 0; color: #222; } iframe, #vpfi { margin: 0 auto; background:#ececec; border:0; } #vpfi { position: relative; width: 100%; padding-top: 56.25%;  } iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; } .button-vid { background-image: linear-gradient(#d44b4b, #be3737 60%, #a62e2e); background-repeat: no-repeat; border: none; color: white; padding: 10px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; cursor: pointer; margin: 5px auto; min-width: 80px; border-radius: 5px; } .button-vid:hover { opacity: 0.6; } .button { background-color: #008CBA; border: none; border-radius: 4px; color: white; padding: 26px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 26px; cursor: pointer; } .col-p { position: relative; font-size:12px; text-align:center; background:#fff; overflow:hidden; margin: 0 2px; display: inline-block; } .col-p a:link, .col-p a:visited, .relatedposts a:link, .relatedposts a:visited { color:#fff; font-weight:normal; } .col-p, .col-img, .col-img img { width:200px; height:250px; } .col-title { position: absolute; width:200px; max-height: 77px; padding: 2px 0; background: rgba(33, 30, 30, 0.65); bottom: 0; line-height: 1.2; } .eplink-wrap { clear: both; margin: 20px 0 0 0; } .eplink a:link, .eplink a:visited { display: inline-block; padding: 8px 0; } .eptext { font-size:16px; font-weight:bold; } .tag a:link, .tag a:visited { background-color: #ECECEC; color: #505050; padding: 2px 16px; margin: 0px 10px 10px 0px; border-radius: 20px; display: inline-block; }  .pagenavi { clear:both; padding:20px 0; } .pagenavi a:link,.pagenavi a:visited, .dots { color:#ffffff; text-decoration:none; } .pagenavi a:hover,.pagenavi a:active, .dots:hover { color:#222; text-decoration:none; } .page-numbers { margin: 2px; padding:3px 8px; display: inline-block; line-height: 1; background:#e25d5d; border:1px solid #c63333; } .page-numbers:hover, .page-numbers:active { background:#ffffff; } .current { color:#222; background:#ffffff; }  .wrap-related {  margin: 30px 0 0 0; display: table; } .relatedposts { position: relative; text-align:center; background:#fff; overflow:hidden; margin: 4px; float: left;  } .relatedposts-img, .relatedposts-img img { width:135px; height:168px; } .relatedposts-title { position: absolute; width:135px; max-height: 50px; padding: 1px 0; font-size:12px; background: rgba(33, 30, 30, 0.65); bottom: 0; line-height: 1; } .related-title { margin: auto; font-size: 18px; font-weight: bold; color: #222; padding: 0 4px; margin-bottom: 2px; }  .footer{ clear:both; color:#ffffff; background-color:#1d212a; margin-top:50px; text-align:center; position: absolute; right: 0; bottom: 0; left: 0; padding: 2rem; } .footer a:link,.footer a:visited{color:#ffffff;} .footer a:active,.footer a:hover{text-decoration:underline;} @media (min-width:701px) and (max-width:1038px) { .topml { width: 70%; } .button { padding: 18px 22px; font-size: 24px; margin: 4px 8px; } } @media (min-width:521px) and (max-width:700px) { .post-content-img { width: 65%; } .content-des { width: 100%; } .topml { width: 100%; } .topnav a { float: inherit; font-size: 16px; } .search-container { width: 90%; margin: auto; margin-top: 10px; margin-bottom: 20px; float: none; } .button { padding: 14px 18px; font-size: 18px; margin: 2px 2px; } .col-p, .col-img, .col-img img { width:170px; height:211px; } .col-title { width:170px; padding: 1px; } } @media (max-width:520px) { .post-content-img { width: 65%; } .content-des { width: 100%; } .topml { width: 100%; } .topnav a { float: inherit; font-size: 16px; } .search-container { width: 90%; margin: auto; margin-top: 10px; margin-bottom: 20px; float: none; } .button { padding: 14px 18px; font-size: 18px; margin: 2px 2px; } .col-p, .col-img, .col-img img { width:170px; height:211px; } .col-title { width:170px; padding: 1px; } }