/*

	Theme Name: Realistic

	Theme URI: http://themient.com/themes/realistic

	Author: Asmi Khalil

	Author URI: http://themient.com

	Description: Realistic is the first WordPress theme built using Underscores and Google's Material Design Lite (MDL) frameworks combined together. Realistic will give your site a very Modern & realistic look and amaze you (and your users) with smooth transitions and fluid animations just like Google's websites. Besides Realistic is highly customizable and speed optimized.

	Version: 1.3.3

	License: GNU General Public License v3 or later

	License URI: http://www.gnu.org/licenses/gpl-3.0.html

	Text Domain: realistic

	Tags: two-columns, left-sidebar, right-sidebar, custom-background, custom-colors, custom-menu, editor-style, featured-images, microformats, post-formats, sticky-post, threaded-comments, translation-ready



	This theme, like WordPress, is licensed under the GPL.

	Use it to make something cool, have fun, and share what you've learned with others.

*/



/*--------------------------------------------------------------

>>> TABLE OF CONTENTS:

----------------------------------------------------------------

1 Normalize

2 Typography

3 Elements

4 Forms

5 Navigation

	5.1 Menus

6 Accessibility

7 Alignments

8 Clearings

9 Widgets

	9.1 Login Widget

	9.2 Latest Posts widget & Popular Posts widget

	9.3 Social Icons Widget

	9.4 Calender Widget

	9.5 Tagcloud Widget

10 Content

    10.1 Posts and pages

	10.2 Asides

	10.3 Comments

11 Media

	11.1 Captions

	11.2 Galleries

12 Media Queries

--------------------------------------------------------------*/



/*--------------------------------------------------------------

1 Normalize

--------------------------------------------------------------*/

.mdl-layout__container {

	position: relative;

}

body {
	background-color: #080b17 !important;
}

#page {

    min-height: 1024px;

}

a {

	text-decoration: none;

}

a:hover, a:active {

	text-decoration: underline;

}

img {

	height: auto;

	max-width: 100%;

}

.margin-8 {

	margin-left: 8px;

}

.site-tagline {

	margin-left: 10px;

	margin-bottom: -10px;

}

.site-header .search-field {

	border-bottom: 1px solid #FFF;

}

.site-header .search-box {

	margin-left: 16px;

}

.site-header .material-icons {

    color: #FFF;

}

.site-content {

	display: block;

	position: relative;

	padding: 20px 0;

	max-width: 1200px;

	margin: 0 auto;

	width: 100%;

}

.content-area {

	float: left;

}

.post-box, article {

	margin-bottom: 30px;

	margin-top: 0 !important;

}

.sticky .featured, .featured {

	position: absolute;

    z-index: 999;

    right: -32px;

    top: -24px;

    font-size: 20px;

    padding: 30px 25px 0 25px;

    color: #FFFFFF;

    -webkit-transform: rotate(45deg);

    -moz-transform: rotate(45deg);

    -ms-transform: rotate(45deg);

    -o-transform: rotate(45deg);

}

.sticky .featured .material-icons, .featured .material-icons {

    width: 25px;

    height: 25px;

    font-size: 25px;

    line-height: 25px;

}

.post-img {

	position: relative;

	display: block;

	height: 100%;

}

.post-style1 .post-img {

    margin-top: -8px;

    margin-left: -8px;

    margin-right: -8px;

    width: calc(100% + 16px);

}

.post-img img {

	width: 100%;

}

.post-title {

	margin-bottom: 10px;

}



.post-excerpt {

	margin-bottom: 10px;

}

.moretag {

	margin-top: 10px;

	float: left;

	margin-right: 10px;

}

.moretag a {

	text-decoration: none;

	text-transform: none;

}

.post-actions {

	position: absolute;

	right: 5px;

	bottom: 5px;

	z-index: 999;

}

.post-actions-menu li {

	padding: 0;

}

.post-actions-menu a {

	color: rgba(0,0,0,.87);

	text-decoration: none;

	display: block;

	padding: 0 16px;

}

.post-box .mdl-menu__container {

	right: 20px !important;

}

.post-format {

	z-index: 2;

	position: absolute;

	width: 100%;

	height: 100%;

	top: 0;

	left: 0;

	background: rgba(0, 0, 0, 0);

	-o-transition:background .2s;

	-ms-transition:background .2s;

	-moz-transition:background .2s;

	-webkit-transition:background .2s;

	transition:background .5s;

}

.post-format:hover {

	background: rgba(0, 0, 0, 0.5);

}

.post-format:hover .material-icons {

	-ms-transform: scale(1,1);

	transform: scale(1,1);  

	-webkit-transform: scale(1,1);

}

.post-format .material-icons {

    color: #FFF;

    display: block;

    position: absolute;

    top: 50%;

    left: 50%;

    /* border: 2px solid #FFF; */

    border-radius: 100%;

    width: 30px;

    height: 30px;

    margin: -15px 0 0 -15px;

    text-align: center;

    font-size: 30px;

    line-height: 30px;

    -ms-transform: scale(0,0);

    transform: scale(0,0);

    -webkit-transform: scale(0,0);

    -ms-transition: all .2s;

    -moz-transition: all .2s;

    -webkit-transition: all .2s;

    transition: all .2s;

}

.post-style1 .post-format .material-icons {

    width: 70px;

    height: 70px;

    margin-left: -35px;

    margin-top: -35px;

    font-size: 50px;

    line-height: 70px;

}

footer a {

	color: #EAEAEA;

}

footer a:hover, footer a:active {

	color: #FFF;

}

footer .left, footer .right {

	width: 50%;

}

footer .left {

	float: left;

}

footer .right {

  float: right;

  text-align: right;

}

#move-to-top {

	cursor: pointer;

    opacity: 0.5;

	position: fixed;

	right: 10px;

	bottom: 31px;

	z-index: 25;

	-webkit-transition: all 0.25s linear;

	-moz-transition: all 0.25s linear;

	transition: all 0.40s linear;

}

#move-to-top:hover {

	opacity: 1;

}

.error-404 {

	margin-top: 120px;

    text-align: center;

}

.error-404 .icon404 {

    font-size: 300px;

    line-height: 1;

    color: #e2e2e2;

}

.error-404 h1 {

    display: block;

    font-size: 50px;

    margin: 15px 0;

}















/*--------------------------------------------------------------

2 Typography

--------------------------------------------------------------*/



h1      { font-size: 2em;       /* 2*16 = 32 */         }

h2      { font-size: 1.5em;     /* 1.5*16 = 24 */       }

h3      { font-size: 1.17em;    /* 1.17*16 = 18.72 */   }

h4      { font-size: 1em;       /* 1*16 = 16 */         }

h5      { font-size: 0.83em;    /* 0.83*16 = 13.28 */   }

h6      { font-size: 0.75em;    /* 0.75*16 = 12 */      }



h1, h2, h3, h4, h5, h6 {margin: 15px 0 15px 0;text-transform: uppercase;line-height: 1.2;}



/*--------------------------------------------------------------

3 Elements

--------------------------------------------------------------*/



.mdl-button {

    text-decoration: none !important;

}

.site-title a {

	color: #FFF;

	text-decoration: none;

    text-transform: uppercase;

}

.post-title a {

	color: #303030;

	text-decoration: none;

}

.post-box .post-title a:hover, .post-box .post-title a:active {

	text-decoration: underline;

}



/*--------------------------------------------------------------

4 Forms

--------------------------------------------------------------*/



input, textarea {

	outline:0;

}



/*--------------------------------------------------------------

5 Navigation

--------------------------------------------------------------*/

.pagination {

    display: block;

    margin-bottom: 30px;

    padding-top: 15px;

}

.pagination ul {

	padding: 0;

	margin: 0;

}

.pagination li {

	display: inline-block;

	margin-right: 5px;

	list-style-type: none;

}

.pagination li > span, .pagination li > a, .nav-links a, .nav-links .current {

	min-width: 20px;

}



.pagination a:hover {

	text-decoration: none;

}



/*--------------------------------------------------------------

5.1 Menus

--------------------------------------------------------------*/



.main-navigation li {

	list-style-type: none;

	display: inline-block;

	float: left;

}

.main-navigation li {

	margin: 0;

	padding: 0;

	display:inline-block;

	float: left;

}

.main-navigation .menu > li {

    position: relative;

}

.main-navigation li a {

	padding: 20px 15px 20px 15px;

	text-align: center;

	color: #fff;

	text-decoration: none;

}

.main-navigation .menu > li > a {

	line-height: 56px;

	padding-top: 4px;

}

.main-navigation .menu > li > a:hover, .main-navigation .menu > li.current-menu-item > a {

	border-bottom: 4px solid #FFF;

}

.main-navigation li:hover ul a {

	padding: 14px 15px;

	line-height: normal;

}

.main-navigation li:hover ul a:hover {

	color: #fff;

}

.main-navigation .menu-item-has-children > a:after {

    content: "arrow_drop_down";

    font-family: "Material Icons";

    margin-left: 3px;

    vertical-align: middle;

}

.main-navigation li ul {

	display: none;

}

.main-navigation li ul li {

	display: block;

	float: none;

}

.main-navigation li ul li a {

	display: block;

	padding: 20px;

	text-align: left;

	color: #444 !important;

	text-transform: none;

	text-align: left;

}

.main-navigation li ul li:hover {

	background: rgba(0, 0, 0, 0.24);

}

.main-navigation .sub-menu > li:hover > a, .main-navigation .sub-menu > li > a:active {

	color: #FFF !important;

}

.main-navigation ul li:hover > ul {

	display: block;

}

.main-navigation .menu > li > .sub-menu {

	right: 0;

}

.main-navigation ul ul {

	position: absolute;

	background: #FFF;

	margin: 0;

	margin-top: -1px;

	padding: 10px 0 10px 0;

	-webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);

	-moz-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);

	box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);

}

.main-navigation ul ul li{

	border-right: 0;

	width: 200px;

}

.main-navigation ul ul ul {

	margin-left: 1px;

	margin-top: -54px;

}

.main-navigation ul ul li:hover > ul {

	right: 100%;

}

.main-navigation .menu > li > ul .menu-item-has-children > a {

    position: relative;

}

.main-navigation .menu > li > ul .menu-item-has-children > a:after {

	content: "chevron_left";

    position: absolute;

    left: 10px;

    margin-left: 0;

    line-height: 17px;

}



/* Mobile menu */

.mobile-navigation  ul, .mobile-navigation  li {

	margin: 0;

	padding: 0;

}

.mobile-navigation  li a{

	display: block;

	padding: 16px 40px;

	margin: 0;

	text-decoration: none;

	font-weight: 500;

	font-size: 13px;

}

.mobile-navigation  li  a{

	color: #757575;

	text-decoration: none;

}

.mobile-navigation  li a:hover{

	background: #E0E0E0;

}

.mobile-navigation .current-menu-item > a {

    background-color: #e0e0e0;

}

.expander {

    position: absolute;

    top: 6px;

    right: 6px;

    display: block;

    height: 30px;

    width: 30px;

}

.expander:hover {

    cursor: pointer;

}

.mobile-navigation .has-sub > .expander:before, .mobile-navigation .has-sub > .expander:after {

    content: "";

    width: 12px;

    height: 2px;

    background-color: #757575;

    position: absolute;

    display: block;

    right: 50%;

    top: 50%;

    margin-right: -6px;

}

.mobile-navigation .has-sub > .expander:before {

    -webkit-transform: rotate(90deg);

    -moz-transform: rotate(90deg);

    -ms-transform: rotate(90deg);

    -o-transform: rotate(90deg);

    transform: rotate(90deg);

}

.mobile-navigation .has-sub > .expander:after {

    -webkit-transform: rotate(0);

    -moz-transform: rotate(0);

    -ms-transform: rotate(0);

    -o-transform: rotate(0);

    transform: rotate(0);

}

.mobile-navigation .has-sub > .expander.expanded:before {

    -webkit-transform: rotate(0);

    -moz-transform: rotate(0);

    -ms-transform: rotate(0);

    -o-transform: rotate(0);

    transform: rotate(0);

}

.mobile-navigation,

.mobile-navigation ul,

.mobile-navigation ul li,

.mobile-navigation ul li a {

  margin: 0;

  padding: 0;

  border: 0;

  list-style: none;

  line-height: 1;

  display: block;

  position: relative;

  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  box-sizing: border-box;

}

.mobile-navigation ul ul {

  display: none;

}

.mobile-navigation > ul > li > a:hover,

.mobile-navigation > ul > li.active > a,

.mobile-navigation > ul > li.open > a {

  color: #eeeeee;

}

.mobile-navigation .menu  > li > ul > li > a {

	padding-left: 30px !important;

}

.mobile-navigation .menu  > li > ul > li > ul > li > a {

	padding-left: 40px !important;

}

.mobile-navigation .menu  > li > ul > li > ul > li > ul > li > a {

	padding-left: 50px !important;

}

.mobile-navigation .has-sub.open > a:after {

	-webkit-transform: rotate(-90deg);

	-moz-transform: rotate(-90deg);

	-ms-transform: rotate(-90deg);

	-o-transform: rotate(-90deg);

	transform: rotate(-90deg);

    -webkit-transition-duration: 0.8s;

    -moz-transition-duration: 0.8s;

    -ms-transition-duration: 0.8s;

    -o-transition-duration: 0.8s;

    transition-duration: 0.8s;

}

.mobile-navigation .has-sub > .expander:before {

    -webkit-transform: rotate(90deg);

    -moz-transform: rotate(90deg);

    -ms-transform: rotate(90deg);

    -o-transform: rotate(90deg);

    transform: rotate(90deg);

    -webkit-transition: -webkit-transform .35s ease-in-out;

    -moz-transition: -moz-transform .35s ease-in-out;

    -o-transition: -o-transform .35s ease-in-out;

    transition: transform .35s ease-in-out;

}



/*--------------------------------------------------------------

6 Accessibility

--------------------------------------------------------------*/



/* Text meant only for screen readers. */

.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;

	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);

	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. */

}



/*--------------------------------------------------------------

7 Alignments

--------------------------------------------------------------*/

.alignleft {

	display: inline;

	float: left;

	margin-right: 1.5em;

}

.alignright {

	display: inline;

	float: right;

	margin-left: 1.5em;

}

.aligncenter {

	clear: both;

	display: block;

	margin-left: auto;

	margin-right: auto;

}



/*--------------------------------------------------------------

8 Clearings

--------------------------------------------------------------*/



.clear:before,

.clear:after,

.entry-content:before,

.entry-content:after,

.comment-content:before,

.comment-content:after,

.site-header:before,

.site-header:after,

.site-content:before,

.site-content:after,

.site-footer:before,

.site-footer:after {

	content: "";

	display: table;

}

.clear:after,

.entry-content:after,

.comment-content:after,

.site-header:after,

.site-content:after,

.site-footer:after {

	clear: both;

}



/*--------------------------------------------------------------

9 Widgets

--------------------------------------------------------------*/



.widget-area {

	float: right;

}

.sidebar-widget {

	/*max-width: 320px;*/

	margin: 0 auto;

	margin-bottom: 30px;

	padding-bottom: 0;

	min-height: 0;

	clear: both;

	padding-bottom: 10px;

}

.widget-title {

	position: relative;

	width: 100%;

	margin-bottom: 15px;

}

.sidebar-widget .widget-title {/* border-bottom: 2px solid #eee; */}

.widget h3 {

	position: relative;

	line-height: 30px;

	font-size: 18px;

	margin: 0;

	padding: 0 2px;

	display: inline-block;

}

.sidebar-widget .widget-title h3 .thin-bar {

    position: absolute;

    width: 100%;

    height: 0;

    left: 0;

    bottom: -2px;

    border-bottom: 2px solid;

    border-color: rgb(63, 81, 181);

}

.widget_search {

	padding: 0;

}

.widget_search form {

    width: 100%;

    padding: 0 8px;

}

.widget_search .search-form {

    margin-bottom: -10px;

    padding-top: 10px;

    width: 100%;

}

.widget_search .search-field {

	padding: 5px 0;

}

.widget_search .search-label {

	top: 15px;

}

.widget_search .search-submit {

	position: absolute;

	right: 0;

	top: 8px;

}



/*--------------------------------------------------------------

	9.1 Login Widget

--------------------------------------------------------------*/



.login-wrap {

	font-size: 15px;

    line-height: 30px;

}

.login-wrap p {

	margin: 10px 0;

}

.login-wrap .avatar {

	width: 80px;

	float: left;

	margin: 0 10px 10px 0;

}

.login-wrap .avatar img {

	border-radius: 40px;

}

.login-wrap ul {

	margin: 0;

	padding: 0;

}

.login-wrap li {

	list-style-type: none;

	display: inline-block;

	margin: 0;

	font-size: 14px;

}

.login-wrap .input {

	border: 2px ridge rgba(210, 210, 210, 0.11);

	border-radius: 0;

	background: #F9F9F9;

	outline: 0;

}

.login-wrap .login-username, .login-wrap .login-password {

	position: relative;

}



.login-wrap .login-username input, .login-password input {

	float: right;

	width: 65%;

}

.login-wrap .login-remember {

	font-size: 13px;

}

.login-wrap .reglostpass {

	font-size: 13px;

}

.login-wrap .login-username:after, .login-wrap .login-password:after {

	font-family: 'Material Icons';

	position: absolute;

	right: 6px;

	font-size: 20px;

	line-height: 32px;

	color: #ccc;

}

.login-wrap .login-password:after {

	content: "lock";

}

.login-wrap .login-username:after {

	content: "person";

}



/*-------------------------------------------------------------------------

	9.2 Latest Posts widget & Popular Posts widget

-------------------------------------------------------------------------*/



.recent-posts-wrap {

	padding: 0;

	margin: 0;

}

.recent-posts-wrap ul {

	margin: 0 -8px 0 -8px;

	padding: 0;

	display: inline-block;

}

.recent-posts-wrap li {

	list-style-type: none;

	line-height: 18px;

	margin: 0 !important;

	float: left;

	position: relative;

	padding: 10px 8px;

}

.recent-posts-wrap li:last-child {

	border-bottom: 0 !important;

}

.sidebar-widget .recent-posts-wrap li:hover {

	background: #FCFCFC;

}

.widget-post-data {

	display: inline-block;

	width: 68%;

}

.widget-post-data h4 a {

	font-size: 16px;

}

.widget-post-img {

	float: left;

	width: 30%;

    max-width: 70px;

	margin: 0 10px 0 0;

}

.widget .post-format {

	width: 70px;

	height: 70px;

	top: 10px;

	left: 8px;

}

.post-format:hover {

	background: rgba(0, 0, 0, 0.5);

}

.post-format:hover .fa {

	-ms-transform: scale(1,1);

	transform: scale(1,1);  

	-webkit-transform: scale(1,1);

}

.post-format .fa {

	color: #FFF;

	display: block;

	position: absolute;

	top: 50%;

	left: 50%;

	border: 2px solid #FFF;

	margin: 15px;

	border-radius: 100%;

	width: 40px;

	height: 40px;

	margin: -20px 0 0 -20px;

	text-align: center;

	font-size: 18px;

	line-height: 35px;

	-ms-transform: scale(0,0);

	transform: scale(0,0);

	-webkit-transform: scale(0,0);

	-o-transition: all .2s;

	-ms-transition: all .2s;

	-moz-transition: all .2s;

	-webkit-transition: all .2s;

	transition: all .2s;

}

.widget-post-data h4 {

	clear: none;

	font-size: 17px;

	font-weight: normal;

	line-height: 20px;

	margin: 0;

	margin-bottom: 5px;

}

.widget-post-info {

	font-size: 0.89em;

	margin: 0 !important;

	border-bottom:0 !important;

	padding: 0 !important;

	display: inline-table;

	color: #ccc;

}

.widget-post-info > span {

	display: inline-block;

	font-size: 12px;

	padding-right: 5px;

}

.widget-post-info .material-icons {

    font-size: 13px;

    line-height: 14px;

    vertical-align: text-bottom;

    margin-right: 4px;

}

.sidebar-widget .recent-posts-wrap li {

	border-bottom: 1px solid #f2f2f2;

	display: inline-block;

	width: 100%;

	-webkit-transition: all .40s;

	-moz-transition: all .40s;

	-o-transition: all .40s;

	transition: all .40s;

}



/*--------------------------------------------------------------

	9.3 Social Icons Widget

--------------------------------------------------------------*/



.sidebar-widget .social-icons {

	text-align: center;

}

.sidebar-widget .social-icons ul {

	display: inline-block;

}

.social-icons ul {

	display: inline-block;

	margin-top: 0;

	margin-bottom: 0;

	padding: 0;

}

.social-icons ul li {

	background: none;

	border: none;

	float: left;

	list-style-type: none;

	margin: 0;

	padding: 4px;

}

.social-icons ul li a {

	width: 46px;

	height: 46px;

	display: block;

	float: left;

	text-align: center;

	line-height: 40px;

	color: #FFF;

}

.social-icons a {

    min-width: 0;

    padding: 0;

}

.social-icons ul li i {

	font-size: 18px;

	line-height: 46px;

	color: #FFF;

}

.social-icons .social-facebook a { background: #5d82d1 }

.social-icons .social-twitter a { background: #40bff5 }

.social-icons .social-gplus a { background: #eb5e4c }

.social-icons .social-youtube a { background: #c9322b }

.social-icons .social-rss a { background: #ef922f }

.social-icons .social-pinterest a { background: #e13138 }

.social-icons .social-linkedin a { background: #238cc8 }

.social-icons .social-stumbleupon a { background: #ff5c30 }

.social-icons .social-reddit a { background: #ff4400 }

.social-icons .social-tumblr a { background: #426d9b }

.social-icons .social-instagram a { background: #91653f }

.social-icons .social-vimeo a { background: #35c6ea }

.social-icons .social-foursquare a { background: #0bbadf }

.social-icons .social-soundcloud a { background: #ff7e30 }

.social-icons .social-github a { background: #b5a470 }

.social-icons .social-flickr a { background: #ff48a3 }

.social-icons .social-skype a { background: #13c1f3 }

.social-icons .social-behance a { background: #1879fd }

.social-icons .social-dribbble a { background: #f7659c }

.social-icons .social-dropbox a { background: #3476e4 }

.social-icons .social-email a { background: #1d90dd }

.social-icons .social-amazon a { background: #ff9900 }

.social-icons .social-vk a { background: #45668e }

.social-icons .social-paypal a { background: #009cde }

.social-icons .social-steam a { background: #000 }



/*--------------------------------------------------------------

	9.4 Calender Widget

--------------------------------------------------------------*/



#calendar_wrap {

	width: 100%;

}

#wp-calendar {

	margin-bottom: 0;

	margin-top: 8px;

	border: 0px none;

	position: relative;

	width: 100%;

}

#wp-calendar td {

	text-align: center;

	padding: 0;

	line-height: 40px;

}

#wp-calendar td a {

	display: block;

}

#wp-calendar caption {

	font-size: 15px;

	padding: 11px 40px;

	font-weight: bold;

	text-transform: uppercase;

}

#wp-calendar thead {

	background: transparent;

	font-size: 15px;

	font-weight: bold;

	color: #919191;

}

#wp-calendar thead th {

	padding: 10px 0;

	text-align: center;

	border-bottom: 1px solid #c5c5c5;

}

#wp-calendar thead th.today {

	border-bottom: 1px solid;

	color: #444;

}

#wp-calendar #prev, #wp-calendar #next {

	position: absolute;

	top: 0;

}

#wp-calendar #prev { left: 0 }

#wp-calendar #next { right: 0 }

#wp-calendar #prev a, #wp-calendar #next a { position: relative }

#wp-calendar tfoot .pad { display: none }



/*--------------------------------------------------------------

	9.5 Tagcloud Widget

--------------------------------------------------------------*/



.tagcloud {

	margin: 8px;

}

.tagcloud a, #tags-tab-content a {

	font-size: 15px!important;

	padding: 7px 13px;

	margin-bottom: 7px;

	float: left;

	margin-right: 7px;

	color: #303030;

	border: 1px solid transparent;

	transition: all 0.25s linear;

}

.tagcloud a:hover, #tags-tab-content a:hover {

	border: 1px solid #303030;

	text-decoration: none;

}



/*--------------------------------------------------------------

10 Content

--------------------------------------------------------------*/

/*--------------------------------------------------------------

10.1 Posts and pages

--------------------------------------------------------------*/



.breadcrumb {

	clear: both;

	padding-bottom: 10px;

	font-size: 13px;

	color: #ccc;

}

.breadcrumb > div {

    margin-right: 5px;

    float: none;

    display: inline-block;

}

.breadcrumb a {

    color: #ccc;

    text-decoration: none;

}

.breadcrumb a:hover, .breadcrumb a:active {

	color: #ccc;

	text-decoration: underline;

}

.post-info {

	color: #ccc;

	font-size: 0.9em;

	font-weight: 300;

	margin-bottom: 10px;

}

.post-info > span {

	display: inline-block;

	margin-right: 15px;

	color: #ccc;

	font-weight: 300;

}

.post-info > span a {

	color: #ccc;

}

.post-info > span .material-icons {

    font-size: 18px;

    margin-right: 5px;

    line-height: 15px;

    vertical-align: text-bottom;

}

.post-info .category a {

	font-size: 0.9em;

}

.single article, .page article {

	padding: 30px 30px 100px 30px;

    margin-bottom: 30px;

}

.single .entry-header, .page .entry-header {

    margin-bottom: 20px;

}

.single .post-title, .page .post-title {

	font-size: 2em;

	line-height: 1.2em;

	margin-bottom: 0;

}

.single .post-info {

	margin-top: 15px;

	margin-bottom: 0;

}

.single .comment-counter {

	position: absolute;

	top: 0;

	right: 0;

}

.thetags {

    margin-top: 15px;

    display: block;

}

.thetags, .thetags a {

	color: #CCC;

    font-size: 14px;

    font-weight: 300;

}

.thetags .material-icons {

	font-size: 20px;

    line-height: 16px;

    vertical-align: text-bottom;

    margin-right: 10px;

}

.section-title, .comment-reply-title {

  font-size: 22px;

}

.related-posts-title {

    margin-bottom: 0;

}

.related-posts {

    margin: 0 0 20px 0;

    padding: 0;

    width: 100%;

}

.related-item {

	min-height: 0;

    margin-bottom: 15px;

	display: inline-block;

	padding: 10px;

}

.relatedthumb {

	position: relative;

    margin-bottom: 20px;

    margin-top: -10px;

    margin-left: -10px;

    margin-right: -10px;

}

.relatedthumb a, .relatedthumb img {

	display: block;

	width: 100%;

}

.related-item h4 {

	font-size: 17px;

	line-height: 20px;

	margin-bottom: 5px;

}

.related-item h4 a {

	color: rgba(0,0,0,.87);

}

.related-item .meta-info {

  font-size: 14px;

}

.related-item .meta-info > span {

	margin-right: 10px;

}

.related-item .meta-info > span .material-icons {

    font-size: 14px;

    line-height: 16px;

    margin-right: 5px;

    vertical-align: text-bottom;

}

.next_prev_post {

    margin-bottom: 30px;

    padding: 0;

}

.right-button {

	text-align: right;

}

.next_prev_post a:hover {

	text-decoration: none;

}

.author-box {

  min-height: 0;

  margin-bottom: 30px;

}

.author-box-wrap {

    padding-top: 20px;

}

.avatar {

	float: none;

	border-radius: 50%;

	display: block;

}

.author-box-avatar .avatar {

    margin: 0 auto;

}

.author-box-content {

    padding: 0 15px;

}

.author-btns {

	float: right;

	display: inline-block;

	margin: 0;

}

.author-btns li {

	list-style-type: none;

	border: none;

	float: left;

	margin: 0;

	padding: 4px;

}

.author-btns a {

	width: 30px;

	height: 28px;

	display: block;

	text-align: center;

	line-height: 28px;

	color: #FFF;

	background: #444;

	border-radius: 2px;

}

.author-btns a:hover {

	opacity: .7;

}

.author-btns .facebook {

	background: #5d82d1;

}

.author-btns .twitter {

	background: #40bff5;

}

.author-btns .gplus {

	background: #eb5e4c;

}

.comment-form-comment {

  width: 100%;

}

.title-wrap h1, .vcard.clearfix {

	display: inline-block;

}

.author-box .author {

	margin-bottom: 7px;

}

.author-box .author a {

	text-transform: uppercase;

}

.nav-links {

    margin: 8px;

}

/* Hides navigation links and site footer when infinite scroll is active */

.infinite-scroll .pagination,

.infinite-scroll.neverending .site-footer {

    display: none;

}

/* Shows the footer again in case all posts have been loaded */

.infinity-end.neverending .site-footer {

    display: block;

}



/*--------------------------------------------------------------

10.2 Asides

--------------------------------------------------------------*/

.blog .format-aside .entry-title,

.archive .format-aside .entry-title {

	display: none;

}

/*--------------------------------------------------------------

10.3 Comments

--------------------------------------------------------------*/



#comments .avatar {

	position: absolute;

	left: -90px;

	top: 0;

	background: #B2B2B2;

}

.comment-box {

	display: block;

	background: #fff;

	padding: 10px;

	margin-left: 90px;

	margin-bottom: 20px;

	min-height: 100px;

	position: relative;

}

.comment-form-fields.mdl-grid {

    margin-left: -15px;

    margin-right: -15px;

}

.comment time { padding-left: 10px }

ul.children .commentImageLeft {

	width: 60px;

	height: 90px;

	border-left: 1px solid #c1bbb6;

	border-bottom: 1px solid #c1bbb6;

	position: absolute;

	top: -50px;

	left: -70px;

}

#cancel-comment-reply-link {

	float: right;

	line-height: 24px;

	font-size: 0.7em;

	margin-top: 25px;

	cursor: pointer;

	margin-bottom: -40px;

	text-decoration: underline;

	text-transform: none;

	z-index: 100;

	position: relative;

}

.contactform #submit { float: left }

.contactform label { display: block }

.contactform {

	overflow: hidden;

	margin-bottom: 35px;

}

.error { color: red }

.thanks p { color: green }

.commentlist {

	margin-left: 0;

    margin-top: 13px;

    padding-left: 8px;

    padding-right: 8px;

}

.commentlist li {

	list-style: none;

	margin: 0;

	padding-left: 0;

	float: left;

	width: 100%;

	position: relative;

}

.commentlist p { 

	margin-bottom: 10px; margin-top: 5px; 

}

.comment-author {

	overflow: hidden;

	padding-right: 5px;

	width: 100%;

}

.comment-author .fn {

    font-size: 15px;

    text-transform: capitalize;

}

.comment-author .ago {

	color: #ccc;

	font-weight: 300;

	float: left;

	padding-right: 10px;

	padding-left: 5px;

	font-size: 15px;

}

.comment-reply-link {

    float: right;

    margin-left: 15px;

    margin-right: 5px;

    font-size: 14px;

    text-transform: uppercase;

}

.commentmetadata {

	margin-left: 5px;

}

.commentmetadata > ul, .commentmetadata > ol {

	margin-bottom: 15px!important;

	float: left;

}

.commentmetadata li {

	border: 0;

	padding: 0;

	margin-top: 0;

	margin-bottom: 5px;

	list-style: square;

}

.commentmetadata ol li { list-style: decimal }

.reply {

	margin-top: 0px;

	padding-bottom: 0px;

	overflow: hidden;

	width: 100%;

	float: right;

}

.reply a {

	font-weight: bold;

	float: left;

	padding: 0 0px;

	font-size: 12px;

}

.comment #respond #respond { margin-top: 20px }

.commentlist .children {

	margin-bottom: 0;

	margin-top: 0;

}

.commentlist .children li { padding-bottom: 0 }

.commentlist .bypostauthor .comment-author .commenter_is_author {

	font-size: 0.9em;

	text-transform: none;

	padding: 0 10px;

	background: #444;

	color: #fff;

	border-radius: 20px;

	margin: 0 5px;

}

.commentlist li ul.children li.bypostauthor .comment-author .commenter_is_author {

	font-size: 0.9em;

	text-transform: none;

	padding: 0 10px;

	background: #444;

	color: #fff;

	border-radius: 20px;

	margin: 0 5px;

}

.comment-awaiting-moderation {

	font-style: italic;

	font-weight: bold;

}

.cancel-comment-reply a {

	float: right;

	margin-top: -8px;

}

.required {

	color: red;

	padding: 0;

	line-height: 1;

}

.comment-notes .required {

	padding-left: 0;

	padding-top: 3px;

}

.comment-notes { font-style: italic }



.comment-content a {

	word-wrap: break-word;

}

.comment-respond {

    margin-bottom: 30px;

}



/*--------------------------------------------------------------

11 Media

--------------------------------------------------------------*/

.page-content .wp-smiley,

.entry-content .wp-smiley,

.comment-content .wp-smiley {

	border: none;

	margin-bottom: 0;

	margin-top: 0;

	padding: 0;

}

/* Make sure embeds and iframes fit their containers. */

embed, iframe, object {

	max-width: 100%;

}



/* Responsive video & audio iframes */

.video-wrapper, .audio-wrapper {

    position: relative;

    padding-bottom: 56.25%;

    padding-top: 35px;

    height: 0;

    overflow: hidden;

}

.video-wrapper iframe, .audio-wrapper iframe {

    position: absolute;

    top:0;

    left: 0;

    width: 100%;

    height: 100%;

}

.mejs-video {

    margin-top: -15%;

}



/*--------------------------------------------------------------

11.1 Captions

--------------------------------------------------------------*/

.wp-caption {

	margin-bottom: 1.5em;

	max-width: 96% !important;

	width: auto !important;

}

.wp-caption img[class*="wp-image-"] {

	display: block;

	margin: 0 auto;

}

.wp-caption-text {

	text-align: center;

}

.wp-caption .wp-caption-text {

	margin: 0.8075em 0;

}



/*--------------------------------------------------------------

11.2 Galleries

--------------------------------------------------------------*/

.gallery {

	margin-bottom: 1.5em;

}

.gallery-item {

	display: inline-block;

	text-align: center;

	vertical-align: top;

	width: 100%;

}

.gallery-columns-2 .gallery-item {

	max-width: 50%;

}

.gallery-columns-3 .gallery-item {

	max-width: 33.33%;

}

.gallery-columns-4 .gallery-item {

	max-width: 25%;

}

.gallery-columns-5 .gallery-item {

	max-width: 20%;

}

.gallery-columns-6 .gallery-item {

	max-width: 16.66%;

}

.gallery-columns-7 .gallery-item {

	max-width: 14.28%;

}

.gallery-columns-8 .gallery-item {

	max-width: 12.5%;

}

.gallery-columns-9 .gallery-item {

	max-width: 11.11%;

}

.gallery-caption {

	display: block;

}



/*-----------------------------------------------

12 Media Queries

/*---------------------------------------------*/



@media screen and (min-width:1025px) { 

	.mdl-layout__drawer-button {

		display: none;

	}

	.mdl-layout__header-row {

		padding: 0 40px 0 40px;

	}
	
	.page-header__button {
    min-width: 90px !important;
}

}



@media screen and (min-width: 840px) { 

	.content-area.mdl-cell--9-col-desktop.mdl-cell--9-col-desktop {width: 100%;}

	.widget-area.mdl-cell--3-col-desktop.mdl-cell--3-col-desktop {

	    width: calc(28% - 16px);

	}
	
	.page-header__button {
    min-width: 90px !important;
}

}



@media screen and (max-width:839px) {

	.single article, .page article {

	    padding: 15px;

	    padding-bottom: 50px;

	}

	.widget-area {

		float: none;

		clear: both;

	}

	.error-404 .icon404 {

	    font-size: 200px;

	}

	.error-404 h1 {

	    font-size: 40px;

	}
	
	.page-header__button {
    min-width: 90px !important;
}

}



@media screen and (max-width:480px) {

	footer .left, footer .right {

		float: none;

		width: 100%;

		text-align: center;

	}

	.author-box-content {

	    text-align: center;

	    margin-top: 20px;

	}

	.comment-box {

	    margin-left: 70px;

	}

	#comments .avatar {

	    max-width: 60px;

	    left: -70px;

	}

	.commentlist .children {

	    padding: 0;

	}

	.comment-reply-link {

	    float: none;

	}

	.error-404 .icon404 {

	    font-size: 100px;

	}

	.error-404 h1 {

	    font-size: 30px;

	}
	
	.page-header__button {
    min-width: 90px !important;
}

}

.page-header__buttons {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        /* align-items: revert; */
        -webkit-box-ordinal-group: 6;
        -ms-flex-order: 5;
        order: 5;
        /* margin-top: 1rem; */
        /* width: 100%; */
        /* text-align: right; */
    }

.page-header__button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    outline: 0;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    line-height: 16px;
    text-decoration: none;
    color: #FFFFFF;
    transition: 250ms;
    cursor: pointer;
    padding: 0 0 0 12px;
    min-width: 160px;
    height: 40px;
    position: relative;
}

.page-header__button > svg{
    max-width: 24px;
    max-height: 24px;
}

.page-header__button + .page-header__button {
    margin-left: 8px
}

.page-header__button--first {
    color: #FFF;
    background: linear-gradient(80.54deg, #CE9119 0%, #F4AE26 100%);
}

.page-header__button--first .get-image {
    animation: ew8LVSIuoyC2_tr__tr 3000ms linear infinite normal forwards;
}

.page-header__button--first:hover{
    background-color: transparent;
}

.page-header__button--second {
    color: #FFF;
    background: linear-gradient(90deg, #E40539 0%, #FA2E5D 100%);
}

.page-header__button--second:hover{
    color: var(--color-second-button-bg);
    background-color: transparent;
}