/*
Theme Name:Metro CreativeX
Version:1.3.6
*/
/* Reset */
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
input, textarea, img{outline:none; border:none;-webkit-appearance:none;border-radius:0}
article, aside, figure, footer, header, hgroup, nav, section, time{display:block}
a{text-decoration:none;color:inherit}.clearfix{clear:both}
html{font-size:62.5%}
body{background:#3A4552;font-size:normal;font-family:Verdana, sans-serif}
.cf:before, .cf:after{content:" ";display:table}
.cf:after{clear:both}
.cf{*zoom:1}
.metro_creativex_only_customizer{display:none}
/* Colors */
.bg-code{background:#d1334e}
.color-code:hover, .color_nor-code{color:#d1334e}
.bg-design{background:#e25a37}
.color-design:hover, .color_nor-design{color:#e25a37}
.bg-responsive{background:#e2af37}
.color-responsive:hover, .color_nor-responsive{color:#e2af37}
.bg-web{background:#64c831}
.color-web:hover, .color_nor-web{color:#64c831}
.bg-wordpress{background:#2f83c0}
.color-wordpress:hover, .color_nor-wordpress{color:#2f83c0}
.bg-stuff{background:#445e81}
.color-stuff:hover, .color_nor-stuff{color:#6b2fc0}
/* Header */
img{max-width:100%;height:auto}
#searchform .searchbutton, #content article, #topside .pages a, #respond #submit{-webkit-transition:all 0.3s;
-moz-transition:all 0.3s;
-o-transition:all 0.3s;
-ms-transition:all 0.3s;transition:all 0.3s}
header{background:#25313E;width:22%;display:block;float:left;color:#DDD;min-height:925px;position:fixed;}
#logo{margin:7% 0 0 0;text-align:center;height:auto;display:block}
#logo img{max-width:100%}
#logo h1{font-size:30px;color:#D1334E}
#logo h2{font-size:20px;margin:50px 0 10px}
header nav{float:right;width:90%;height:auto;border-bottom:1px solid #353535;border-top:1px solid #141414;font-family:Verdana,sans-serif;overflow:hidden}
header nav ul,
header nav li{list-style:none !important}
header nav a,
.openmenuresp{width:100%;height:5rem;line-height:5rem;font-size:1.7rem;display:block;border-top:1px solid #353535;border-bottom:1px solid #141414;overflow:hidden}
#logo{padding-bottom:40px}
header nav a{display:table;overflow:hidden;position:relative}
header nav a span{width:100%;padding-right:30%;line-height:22px;display:table-cell;vertical-align:middle}
header nav a .read{float:right;width:0;height:5rem;overflow:hidden;line-height:normal;padding:0px 3%;margin-right:-3%;font-size:1.2rem;display:block;position:absolute;top:0;right:0}
header nav a:hover .read{width:30%;color:#fff}
header nav a .read p{margin-top:8px}
header nav a .read span, #searchform .searchbutton:hover{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";filter:alpha(opacity=50);opacity:0.5}
/* LOGIN */
div#login {bottom:60px;position:absolute;width:inherit}
div#login form {margin:0 auto;display:table}
div#login input {margin:1px 0;padding:1px 5px;background:#2e3e50;border-radius:5px;color:#787878;letter-spacing:2px;width:130px}
div#login input[type=submit]{background:#202b38;cursor:pointer;margin:3px 0}
div#login ul a li{margin:4px 130px;background:#445e81;padding:1px 5px;font:normal 12px Arial;letter-spacing:1px;border-radius:3px;width:150px}
/* Content */
#content{width:100%;float:left;display:flex;margin:0;color:#4C89CE;flex-wrap:wrap;}
#content h1.entry-title{font-size:5rem;font-family:Ubuntu,Verdana,sans-serif;line-height:6rem;margin:0 0 60px;}
#content article{width:29%;border-radius:11px;float:left;margin:0 0 4% 4%;-ms-word-wrap:break-word;word-wrap:break-word;padding:2rem 0 0 0}
#content article:hover, .sticky{border-radius:33px}
#content article .post_icon{width:27%;height:9rem;background-repeat:no-repeat;background-position:center 5px;float:left;overflow:hidden}
#content article .post_content{width:92%; height:auto; float:left; font-family:Verdana,sans-serif;text-shadow:0px 1px 2px rgba(0, 0, 0, 0.5);color:#fff;margin:0;padding:0 9px}
#content article .post_content a{display:block;font-size:1.8rem;font-weight:700;margin-bottom:1rem}
#content article .post_content .excerpt{font-size:1.8rem;font-weight:300;font-style:italic;margin-bottom:1rem}
#content article .post_content .excerpt.format p{font-size:1.6rem}
#content article .post_content .excerpt p{color:#fff}
#content article .post_content .excerpt.chat_type p{color:#fff;line-height:3.2rem}
#content article .post_content .excerpt.chat_type p:hover{color:rgba(255, 255, 255, 0.9)}
#content article .post_content .excerpt.chat_type br{border-bottom:1px solid rgba(255, 255, 255, 0.2);content:"";display:block}
#content article .post_content .short_excerpt{font-size:1.4rem;font-weight:300;font-style:italic;margin-bottom:1rem}
#content article .img{width:100%;height:260px;overflow:hidden;margin-top:-2rem;margin-bottom:1rem;position:relative;border-radius:11px 11px 0 0}
#content article .img img{width:100%;position:absolute}
.bx-pager,
.bx-controls-auto{display:none}
#content article .img iframe{width:100%;margin-top:-4rem}
.navigation{background:#bdc3c7;padding:0}
.nav-previous, .nav-next{width:45%;float:left;height:3rem;padding-bottom:2rem}
.nav-previous a, .nav-next a{height:3rem;line-height:3rem;color:#2c3e50;font-weight:bold;font-size:1.8rem;display:block}
.nav-previous a:hover,
.nav-next a:hover{color:#7f8c8d}
.nav-previous{padding-left:5%}
.nav-next{padding-right:5%}
.nav-next a{text-align:right}
#content p{letter-spacing:1px;margin-bottom:2rem;color:#bbb;font-family:Verdana,sans;font-size:1.6rem;line-height:2.8rem;-ms-word-wrap:break-word;word-wrap:break-word}
#topside{width:72%;min-height:13rem;float:left;margin-left:25%;font-family:Verdana,sans}
#searchform{background:#29313B;height:4.6rem;float:right}
#searchform .searchtext{width:77%;height:4.6rem;float:left;padding:0px 4%;line-height:4.6rem;color:#222;font-size:2.2rem;letter-spacing:0.08em}
#searchform .searchbutton{width:14%;height:4.6rem;background:url(images/searchicon.png) no-repeat center center #29313b}
#searchform input{background:#E9EEFF;width:80%;height:4.6rem;float:left;padding:0px 4%;line-height:4.6rem;color:#222;font-size:2.2rem;letter-spacing:0.08em;}
#searchform input#searchsubmit{width:48px;background:transparent;}
#searchform .searchbutton:hover{cursor:pointer}
#topside .pages{width:66.5%;height:4.6rem;border-bottom:1px solid #333330;float:left;margin-top:1px}
#topside .pages ul{list-style:none}
#topside .pages ul li{float:left;list-style:none;margin-bottom:-1px;display:block;position:relative}
#topside .pages li ul{width:14rem;position:absolute;display:none;top:4.7rem;z-index:9999;background:rgba(0, 0, 0, 0.98)}
#topside .pages li ul li{display:block;height:auto !important;float:none;border-bottom:1px solid rgba(255, 255, 255, 0.1);padding:1rem}
#topside .pages li ul li ul{top:0;left:14rem}
#topside .pages li:last-child,
#topside .pages li:hover:last-child{border:none}
#topside .pages li li a{padding:0;line-height:2.6rem}
#topside .pages li a:hover{color:#fff}
#topside .pages li:hover > ul{display:block}
#topside .pages ul a{line-height:4.6rem;color:#929291;font-size:1.4rem;font-weight:300;display:block;padding:0 15px;width:100%}
#topside .pages li:hover{border-bottom:1px solid #5e5b53;color:#fff;margin-bottom:-2px}
#logo h3{font-size:3rem;font-weight:300;color:#fff;line-height:10rem;padding-top:10px}
#topside h1 span{font-size:1.2rem;font-style:italic;float:right;padding-right:5%}
#topside h1.insidepost{top:30px;position:relative;-ms-word-wrap:break-word;word-wrap:break-word;width:92%}
footer{width:92%;margin-left:4%;height:20rem;line-height:5rem;color:#5e5b53;font-weight:300;font-size:1.4rem}
.post{width:100%;float:right;margin:2rem 0 0 0;font-size:1.6rem;line-height:2.8rem}
.post_flex{width:18%;float:right;margin:1px;font-size:1.4rem;line-height:2rem;letter-spacing:.7px;background:#283544;padding:4px 8px 2.6rem 8px;border-radius:6px;cursor:pointer;color:#56718f;position:relative;min-height:75px;transition:background 0.3s ease}
.post_flex:hover{background:#41638a;color:#7a9bc2;}
.post_img{max-width:20rem;height:auto;float:left;margin:6px 2rem 2rem 0}
.post_img img{border-radius:9px}
.post .post_img img{max-width:100%}
.post .gallery-item{width:150px;height:auto;overflow:hidden;border:2px solid rgba(255, 255, 255, 0.1);float:left}
.post p{margin-bottom:1.5rem}
.post p a{color:#b1a33b}
.post div h1{font-size:4rem;font-weight:300;margin:50px 0;line-height:5rem;}
.post h2{font-size:2.1rem;font-weight:400;margin:30px 0;line-height:5rem;}
.post h3{font-size:2rem;font-weight:300;margin:30px 0}
.post h4{font-size:2rem;font-weight:300}
.post h5{font-size:1.4rem}
.post h6{font-size:1.2rem}
.post pre, .post code{display:block;background:#343f4a;padding:5px 10px 6px;border-radius:6px;border:1px solid #363a3f;font:normal .9em monospace;color:#66a24b;margin:0 0 15px;letter-spacing:0.06em;}
.post del{text-decoration:none;font:normal 1em monospace;color:#5AA23A;}
.post table{border:1px solid #555;margin:1.5rem 0}
.post td{border-top:1px solid #555;padding:.5rem}
.post ul, .post li, .post ol, .post dl, .post dd{margin-left:1.4rem}
.post strong{color:#fff}
.post blockquote{width:96%;padding:2%;background:#333;margin-bottom:1.5rem;border-radius:1rem;border-top-left-radius:0;font-style:italic}
.post blockquote p{margin-bottom:0px !important}
.post cite{font-size:1.2rem;color:#999}
.post cite:before{content:"\A";white-space:pre}
.entry-utility{font-size:1.2rem;position:absolute;bottom:0;font-style:italic;}

/* =WordPress Core
-------------------------------------------------------------- */
.alignnone{margin:5px 20px 20px 0}
.aligncenter, div.aligncenter{display:block;margin:5px auto 5px auto}
.alignright{float:right;margin:5px 0 20px 20px}
.alignleft{float:left;margin:5px 20px 20px 0}
.aligncenter{display:block;margin:5px auto 5px auto}
a img.alignright{float:right;margin:5px 0 20px 20px}
a img.alignnone{margin:5px 20px 20px 0}
a img.alignleft{float:left;margin:5px 20px 20px 0}
a img.aligncenter{display:block;margin-left:auto;margin-right:auto}
.wp-caption{background:#fff;border:1px solid #f0f0f0;max-width:96%; /* Image does not overflow the content area */
padding:5px 3px 10px;text-align:center}
.wp-caption.alignnone{margin:5px 20px 20px 0}
.wp-caption.alignleft{margin:5px 20px 20px 0}
.wp-caption.alignright{margin:5px 0 20px 20px}
.wp-caption img{border:0 none;height:auto;margin:0;max-width:98.5%;padding:0;width:auto}
.wp-caption p.wp-caption-text{font-size:11px;line-height:17px;margin:0;padding:0 4px 5px}
.screen-reader-text{clip:rect(1px, 1px, 1px, 1px);position:absolute !important;height:1px;width:1px;overflow:hidden}
.screen-reader-text:focus{background-color:#f1f1f1;border-radius:3px;clip:auto !important;color:#21759b;display:block;font-size:14px;font-size:0.875rem;font-weight:bold;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;
z-index:100000; /* Above WP toolbar. */}
.gallery-caption{}
.bypostauthor{}
.tags{text-align:right;padding:50px 80px 40px 0}
.tags a{background:#445e81;padding:3px 8px;border-radius:3px;font:normal 13px sans}
.insidepost_date{width:92%;font-size:1.4rem;font-weight:700;color:#fff;margin:0 0 0 4%;border-bottom:1px solid #333330;display:block;min-height:4.5rem;line-height:3rem}
.insidepost_date a{font-weight:300}
.insidepost_date a:hover{color:#ccc}
/* Comments */
#comments{width:96%;float:right;margin-top:4rem;overflow:hidden;display:block}
#comments .children{width:90%;float:right}
#respond{width:900px;margin:auto}
#respond form{background:#314050;border-radius:12px;padding:30px;width:830px;margin:0 auto}
#respond p{margin-bottom:0.5rem}
#respond p.form-allowed-tags{font-size:1.1rem !important;font-style:italic}
#respond label{width:100%;height:5rem;line-height:5rem;display:block}
#respond input, #respond textarea{padding:1rem;border:1px solid #333330;background:#2e3e50;width:250px;color:#717273;margin:0 0 1rem 0;letter-spacing:1px;border-radius:6px}
#respond input:focus, #respond textarea:focus{border:1px solid #474743}
#respond textarea{height:11rem;width:805px}
#respond #submit{color:#777;width:12rem;background:#27313c;display:block}
.comment .reply{width:8rem;height:3rem;background:rgba(255, 255, 255, 0.2)}
.comment .reply span{display:none}
.comment .reply a{width:100%;display:block;height:3rem;line-height:3rem;text-align:center;font-size:1.3rem}
#respond #submit:hover{background:#212121;cursor:pointer}
#comments .commenttitle, .comment-reply-title{width:100%;font-size:2.8rem;height:4rem;font-weight:200;overflow:hidden;margin-bottom:2rem}
#comments .comment{width:94%;height:auto;background:#333330;padding:3%;margin-bottom:5rem;overflow:hidden;position:relative}
#comments .comment .comment-awaiting-moderation{position:absolute;width:50%;margin:auto;left:0;right:0;padding:2rem 0;border-radius:1rem;text-align:center;background:rgba(0, 0, 0, 0.6)}
#comments .comment .avatar{width:10rem;height:10rem;float:left;border-radius:10rem;overflow:hidden}
#comments .comment .avatar img{width:110% !important;height:auto !important}
#comments .comment .comm_content{font-size:15px;width:70%;height:auto;float:left;margin-left:4rem;font-weight:200;font-style:italic}
#comments .comment .comm_content b{font-weight:600}
#comments .comment:nth-child(2n){background:#262626}
.openmenuresp{display:none}
.motsclefs{margin:15px 9px}
.motsclefs a{background:#445E81;color:#DDD;padding:3px 7px;margin:3px;border-radius:4px;line-height:32px}
.motsclefs a:hover{background:#DDD;color:#445E81}
/* mobile */
.sidebar-mobile{display:none;clear:both;float:left;width:90%;margin-left:5%;border:none}
@media only screen and (max-width:930px){#logo{margin:10% 0 0 5% !important;width:95%}
header nav{width:100%}
header nav a{padding-left:10px}
.left-sidebar aside{width:95%}
}
@media only screen and (max-width:768px){
#topside .pages{display:block !important;float:none !important;width:100% !important}
}
@media only screen and (max-width:320px){
#logo{width:40% !important;margin:5% 0 0 30% !important}
.post_icon{width:8rem !important;height:5rem !important;background-size:70%}
}
@media only screen and (max-width:480px){
body{max-width:480px}
#content article .post_content{width:92%;margin-left:4%;float:none}
}
@media only screen and (max-width:768px){
body{max-width:768px}
#content article{width:100% !important;margin-right:0 !important}
header.header{width:100%;min-height:0 !important;float:none}
#logo{width:30%;margin:5% 0 0 35%}
header nav{margin-top:0;display:none}
header nav li .read{display:none}
.mobilenavopen{display:block}
.openmenuresp{display:block;font-weight:700;text-align:center;padding-left:0;width:100%}
#social,
.pages{display:none}
.navrespgradient{width:100%;height:5px;background-image:url(images/respmenu.png);background-size:100%}
#topside{width:92%;margin-left:4%;padding-top:5%}
#searchform{width:99%}
#content{width:92%}
.post_icon{width:14% !important;height:5rem !important}
#content article .post_content{width:85%}
#content article .post_content .short_excerpt{font-size:1.6rem}
#respond input, #respond textarea{width:93%;padding:3%}
#respond label,
#comments .comment .comm_content{font-size:1.4rem}
#comments .comment .avatar,
#topside h1 span{display:none}
.sidebar-desktop{display:none}
.sidebar-mobile{display:block}
h3.widget-title{width:100%;float:right}
.left-sidebar li{width:100%}
.left-sidebar .widget select{width:100%}
.left-sidebar #calendar_wrap{width:100%}
.left-sidebar .widget_search form{width:100%}
.left-sidebar .textwidget{width:100%}
.left-sidebar .tagcloud{width:100%}
.left-sidebar .widget_nav_menu ul li a{width:100%}
.left-sidebar .widget_nav_menu ul ul li{width:85%;padding-left:10%}
.left-sidebar aside{width:100%}
}
@media only screen and (max-width:1140px){
	body{max-width:1140px}
	#content article{width:43.5%}
}