/* --------------------------------------------------------------------------
	-QUADRA BLOG STYLESHEET-

	Name: blog.css
	Project: Quadra
	Written By: Goldeyes Themes - (https://themeforest.net/user/goldeyes)
	Version: 1.0.0

	Stylesheet for blog templates of Quadra Multi Concept HTML5 Theme
	Special for Quadra users.
-------------------------------------------------------------------------- */

/* ==============================================
	POSTS
============================================== */

/* Main options */
	.blog{ background-color: #F4F4F4; overflow: hidden; position: relative; z-index: 10; }
	.blog .cbp-wrapper-outer,.blog .blog-posts, .blog .blog-posts .post{ overflow: visible; }
	.blog .blog-posts .post:not(.cbp-item){ display: block; backface-visibility: hidden; position: relative; }
	.blog.classic .blog-posts figure,
	.blog.classic.blog-list .blog-posts figure{ margin-bottom: 30px; }
	.blog.landing .blog-posts figure{ margin-bottom: 60px; }
	.blog .blog-posts figure.post:hover{ z-index: 1500; }
	.blog .blog-posts .post figcaption{ background: white; margin:0; padding: 0; -webkit-transition: box-shadow 0.5s cubic-bezier(0.77, 0, 0.2, 1); -moz-transition: box-shadow 0.5s cubic-bezier(0.77, 0, 0.2, 1); transition: box-shadow 0.5s cubic-bezier(0.27, 0, 0.2, 1); }
	.blog.post-shadow .blog-posts .post figcaption:hover,
	.blog.post-shadow-active .blog-posts .post figcaption{ box-shadow: 0 62px 70px -14px rgba(0,0,0,0.23); }
	.blog.post-shadow-sm .blog-posts .post figcaption:hover,
	.blog.post-shadow-sm-active .blog-posts .post figcaption{ box-shadow: 0 35px 46px -20px rgba(0,0,0,0.09); }
	.blog.post-shadow-md .blog-posts .post figcaption:hover,
	.blog.post-shadow-md-active .blog-posts .post figcaption{ box-shadow: 0 58px 58px -34px rgba(0,0,0,0.22); }

/* Post lightbox */
	.blog .blog-posts .post .post-lightbox{ opacity: 0; visibility: hidden; position: absolute; bottom: 20px; left: 20px; z-index: 20; perspective: 1px; backface-visibility: hidden; background-color: white; padding: 15px; font-size: 11px; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; display: flex; display: -ms-flexbox; align-items: center; -ms-flex-align: center; justify-content: center; -ms-flex-pack: center; }
	.blog .blog-posts .post .post-lightbox i{ perspective: 1px; backface-visibility: hidden; }
	.blog .blog-posts .post .post-lightbox:hover{ -webkit-transform: scale(1.1); transform: scale(1.1); }
	.blog .blog-posts .post:hover .post-lightbox{ opacity: 1; visibility: visible; }

/* Meta tags */
	.blog .blog-posts .post .metas{ padding: 16px 22px; z-index: 5; position: relative; border: none !important; background-color: #fff; }
	.blog .blog-posts .post .metas .cbp-lazyload:after, .blog .blog-posts .post .metas .cbp-popup-loadingBox:after, .blog .blog-posts .post .metas .cbp-popup-singlePageInline:after{ display: none !important; }
	.blog .blog-posts .post .metas .meta-author{ background: transparent; }
	.blog .blog-posts .post .metas .meta-author img{ display: block; width: 40px; border-radius: 50%; -webkit-transform: scale(1) translateZ(0); transform: scale(1) translateZ(0); -webkit-transition: transform 0.4s; -moz-transition: transform 0.4s; transition: transform 0.4s; }
	.blog .blog-posts .post .metas .meta-author:hover img{ -webkit-transform: scale(1.1) translateZ(0); transform: scale(1.1) translateZ(0);}
	.blog .blog-posts .post .metas .meta-author .author-thumb-details{ margin-left: 9px; margin-top: 2px; font-weight: 600; font-size: 16px; color: #353535; letter-spacing: 0px; -webkit-transition: color 0.4s; -moz-transition: color 0.4s; transition: color 0.4s; }
	.blog .blog-posts .post .metas .meta-author .author-thumb-details .author-attribute{ font-size: 13px; color: #AEAEAE; font-weight: 400; letter-spacing: 0px; }
	.blog .blog-posts .post .metas .meta-author:hover .author-thumb-details{ color: #aaa; }

/* More button */
	.blog .blog-posts .post .metas .more-dd{ position: absolute; right: 0; top: 0; height: 100%; width: 90px; cursor: pointer; }
	.blog .blog-posts .post .metas .more-dd:hover,
	.blog .blog-posts .post .metas .more-dd[aria-describedby]{ background-color: rgba(132,132,132,0.05); }

/* Popover settings */
	.popover.blog-content{ padding: 0; width: auto; display: flex; min-width: 250px; border-radius:50px; box-shadow: 0px 13px 45px 0px rgba(0,0,0,0.15); }
	.popover.blog-content.bs-popover-top:before{ content:''; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid; border-top-color:white; position: absolute; left:50%; margin-left:-10px; top:100%; }
	.popover.blog-content.bs-popover-bottom:before{ content:''; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: none; border-bottom: 10px solid; border-bottom-color:white; position: absolute; left:50%; margin-left:-10px; top:-10px; }
	.popover.blog-content .popover-body{ width: 100%; display: flex; overflow: hidden; }
	.popover.blog-content a{ padding: 12px 24px; display: inline-flex; flex: 1; text-transform: uppercase; align-items: center; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; justify-content: center; font-size: 10px; font-weight: 700; text-transform: uppercase;}

/* Popover trigger buttons settings */
	.blog .blog-posts .post .metas .more-dd .more-dd-button{ position: relative; background: transparent; }
	.blog .blog-posts .post .metas .more-dd .more-dd-button .close-more-animation{ position: relative !important; backface-visibility: hidden; }
	.blog .blog-posts .post .metas .more-dd .more-dd-button .close-more-animation,
	.blog .blog-posts .post .metas .more-dd .more-dd-button .close-more-animation:before,
	.blog .blog-posts .post .metas .more-dd .more-dd-button .close-more-animation:after{ width: 3px; height: 3px; border-radius: 50%; background-color: #333; display: block; content:''; position: absolute; -webkit-transform: rotate(0deg) translateZ(0); transform: rotate(0deg) translateZ(0); backface-visibility: hidden; -webkit-transition: width 0.35s, height 0.35s, transform 0.35s; -moz-transition: width 0.35s, height 0.35s, transform 0.35s; transition: width 0.35s, height 0.35s, transform 0.35s; }
	.blog .blog-posts .post .metas .more-dd .more-dd-button .close-more-animation:before{ top: -6px; left:0; }
	.blog .blog-posts .post .metas .more-dd .more-dd-button .close-more-animation:after{ bottom: -6px; right: 0; }

/* Popover trigger button closing animation */
	.blog .blog-posts .post .metas .more-dd[aria-describedby] .more-dd-button .close-more-animation{ background-color: transparent; width: 0px; height: 0px; -webkit-transform: rotate(90deg) translateZ(0); transform: rotate(90deg) translateZ(0); }
	.blog .blog-posts .post .metas .more-dd[aria-describedby] .more-dd-button .close-more-animation:before{ height: 1px; width: 30px; border-radius: 0; -webkit-transform: rotate(135deg) translate(13px, 7px) translateZ(0); transform: rotate(135deg) translate(13px, 7px) translateZ(0); }
	.blog .blog-posts .post .metas .more-dd[aria-describedby] .more-dd-button .close-more-animation:after{ height: 1px; width: 30px; border-radius: 0; -webkit-transform: rotate(45deg) translate(6px, -15px) translateZ(0); transform: rotate(45deg) translate(6px, -15px) translateZ(0); }

/* Post details */
	.blog .blog-posts .post .caption{ display: block; position: relative; overflow: hidden; }
	.blog .blog-posts .post .cbp-caption img,.blog .blog-posts .post .caption img{ display: block; width: 100%; -webkit-transition: opacity 0.4s, filter 0.4s, transform 0.4s; -moz-transition: opacity 0.4s, filter 0.4s, transform 0.4s; transition: opacity 0.4s, filter 0.4s, transform 0.4s; }
	.blog .blog-posts .post .post-details{ padding: 30px 25px 30px; display: block; }
	.blog.classic .blog-posts .post .post-details{ padding: 40px 25px 40px; }
	.blog .blog-posts .post .post-title{ color: #000000; font-size: 17px; letter-spacing: -0.16px; font-weight: 400; }
	.blog .blog-posts .post .post-date{ font-size: 11px; opacity: 0.7; text-transform: uppercase; font-weight: 600; color: #BDBDBD; letter-spacing: 3px; }
	.blog .blog-posts.grid .post .post-title{ text-overflow: ellipsis; font-size: 18px; overflow: hidden; letter-spacing: 0; white-space: nowrap; max-width: 90%; }
	.blog .blog-posts .post .post-message{ color: #969696; font-size: 15px; letter-spacing: 0; line-height: 26px; margin-top: 15px;overflow: hidden;height: 75px; }

/* Title and message */
	.blog.classic .blog-posts .post .post-title{ color: #000000; font-size: 19px; letter-spacing: -0.16px;}
	.blog.classic .blog-posts .post .post-message{ color: #969696; font-size: 16px; letter-spacing: 0; line-height: 28px; margin-top: 15px; }

/* Tags and mark */
	.blog .blog-posts .post .tags-cloud{ padding: 0px 25px 32px; position: relative; margin-top: -15px; z-index: 50; }
	.blog.classic .blog-posts .post .tags-cloud{ padding: 0px 25px 42px; }
	.blog .blog-posts .post .tags-cloud .marks .post-mark{ text-transform: uppercase; font-size: 12px; line-height: normal; font-weight: 700; text-align: center; padding: 4px 10px 3px; border-radius: 50px; margin-right: 4px; perspective: 1px; backface-visibility: hidden; -webkit-transform: scale(1); transform: scale(1); display: inline-flex; display: -ms-inline-flexbox; -webkit-transition: all 0.3s; transition: all 0.4s; }
	.blog .blog-posts .post .tags-cloud .marks .post-mark:hover{ -webkit-transform: scale(1.1); transform: scale(1.1); }

/* Post buttons */
	.blog .blog-posts .post .post-buttons{ padding: 0 25px 30px; margin-top: -17px; position: relative; }
	.blog .blog-posts .post .post-buttons .container-to-buttons{ padding-top: 15px; border-top: 1px solid #f3f3f3; margin:0!important; }
	.blog .blog-posts .post .post-buttons .container-to-buttons>div{ padding:0!important }


/* When too much columns in container, add .pressed class to .blog-posts */
	.blog .blog-posts.pressed .post .metas{ padding: 10px 12px; }
	.blog .blog-posts.pressed .metas .meta-author img{ width: 32px; }
	.blog .blog-posts.pressed .post .metas .more-dd{ width: 55px; }
	.blog .blog-posts.pressed .post .post-details{ padding: 20px; }
	.blog .blog-posts.pressed .post .post-title{ font-size: 15px; letter-spacing: -0.2px;}
	.blog .blog-posts.pressed .post .post-date{ font-size: 11px; letter-spacing: 1.5px; }
	.blog .blog-posts.pressed .post .post-message{ font-size: 13px; line-height: 21px; margin-top: 8px; }
	.blog .blog-posts.pressed .post .tags-cloud{ padding: 0px 20px 20px; }
	.blog .blog-posts.pressed .post .tags-cloud .marks .post-mark{ letter-spacing: -0.4px; padding: 3px 8px 2px; margin-right: 4px; }
		@media only screen and (max-width: 1440px){
			.blog .blog-posts.pressed .post .metas .meta-author .author-thumb-details{ margin-left: 7px; font-size: 11px; }
			.blog .blog-posts.pressed .post .metas .meta-author .author-thumb-details .author-attribute{ font-size: 10px; }
			.blog .blog-posts.pressed .post .post-details{ padding: 20px 15px; }
			.blog .blog-posts.pressed .post .post-title{ font-size: 14px; }
			.blog .blog-posts.pressed .post .post-date{ font-size: 10px; letter-spacing: 1px; }
			.blog .blog-posts.pressed .post .post-message{ font-size: 12px; line-height: 20px; }
			.blog .blog-posts.pressed .post .tags-cloud{ padding: 0px 13px 20px; }
			.blog .blog-posts.pressed .post .tags-cloud .marks .post-mark{ font-size: 9px; letter-spacing: -0.4px; padding: 2px 6px 1px; margin-right: 3px; }
		}

/* ==============================================
	ALPHABET BLOG TYPE
============================================== */

/* Alphabet item */
	.blog-alphabet div[class*="col-"]{ padding: 0 !important; }
	.blog-alphabet .alphabet-item{ position: relative; overflow: hidden; display: flex; display: -ms-inline-flexbox; min-height: 400px; margin:0 !important; padding: 0%; border: none !important; transform:scale(1) translateZ(0); backface-visibility: hidden; }
	.blog-alphabet .alphabet-item .alphabet-img-caption{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; -webkit-transform:scale(1) translateZ(0); transform:scale(1) translateZ(0); backface-visibility: hidden; -webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s; }
	.blog-alphabet .alphabet-item:hover .alphabet-img-caption{ -webkit-transform:scale(1.05) translateZ(0);transform:scale(1.05) translateZ(0); }

/* Absolute overlay */
	.blog-alphabet .alphabet-item .item-overlay{ display: flex; display: -ms-inline-flexbox; width: 100%; height: 100%; min-height: inherit; opacity: 0; padding: 40px; visibility: hidden; flex-direction: column; -ms-flex-direction: column; pointer-events: none; z-index: 5; -webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s; }
	.blog-alphabet .alphabet-item:hover .item-overlay{ opacity: 1; visibility: visible; }

/* Masking */
	.blog-alphabet .alphabet-item .item-overlay .mask-container{ display: flex; display: -ms-inline-flexbox; width: auto; height: auto; overflow: visible; }
	.blog-alphabet .alphabet-item .item-overlay .mask-container .masked-item{ display: flex; display: -ms-inline-flexbox; width: 100%; height: 100%; opacity: 0; -webkit-transform:translateY(5px);-moz-transform:translateY(5px);transform:translateY(5px); -webkit-transition:all 0.5s cubic-bezier(0.77, 0, 0.2, 1);transition:all 0.5s cubic-bezier(0.77, 0, 0.2, 1);}
	.blog-alphabet .alphabet-item:hover .item-overlay .mask-container .masked-item{ opacity: 1; -webkit-transform:translateY(0);-moz-transform:translateY(0);transform:translateY(0); }


/* ==============================================
	PAGINATION
============================================== */

/* Pagination settings */
	.custom-pagination .pagination{ margin:0 auto; }
	.custom-pagination .pagination>li>a{ display: block; border: none; background: transparent; color: #292929; font-size: 11px; width: 45px; height: 45px; font-weight: 600; margin:0 3px; border-radius: 50% !important; box-shadow: 0 0 0 0 rgba(0,0,0,0.08) !important; -webkit-transition: all 0.25s; -moz-transition: all 0.25s; transition: all 0.25s; display: flex; display: -ms-flexbox; justify-content: center; -ms-flex-pack: center; align-items: center; -ms-flex-align: center; }
	.custom-pagination .pagination>li.active>a{ background-color: #eaeaea !important; color: #888 !important; cursor: default;  }

/* Pagination hovers */
	.custom-pagination .pagination>li:not(.active)>a:hover{ color:#222; background-color:#FFFFFF; box-shadow: 0 2px 29px 0 rgba(0,0,0,0.08) !important; }
	.custom-pagination .pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover{ background-color:#dedede; border-color:#dedede; color:inherit; }
	.custom-pagination .pagination-lg>li>a, .pagination-lg>li>span{ padding: 7px 22px; }

/* Pagination inner details, link, circle img, texts etc. */
	.post-pagination .link{ overflow: hidden; }
	.post-pagination .post-img{ width: 90px !important; height: 90px !important; max-width: 90px !important; min-width: 90px !important; margin:0 22px; border-radius: 100%; opacity: 0; -webkit-transform: translateX(-70px) scale(0.4) translateZ(0); filter: blur(5px); transform: translateX(-70px) scale(0.4) translateZ(0); filter: blur(12px); -webkit-transition: all 0.5s cubic-bezier(0.77, 0, 0.2, 1); -moz-transition: all 0.5s cubic-bezier(0.77, 0, 0.2, 1); transition: all 0.5s cubic-bezier(0.27, 0, 0.2, 1); }
	.post-pagination .texts{-webkit-transform: translateX(-100px) translateZ(0); transform: translateX(-100px) translateZ(0); -webkit-transition: all 0.5s cubic-bezier(0.77, 0, 0.2, 1); -moz-transition: all 0.5s cubic-bezier(0.77, 0, 0.2, 1); transition: all 0.5s cubic-bezier(0.27, 0, 0.2, 1); }
	.post-pagination .nextlink .post-img{ -webkit-transform: translateX(70px) scale(0.4) translateZ(0); transform: translateX(70px) scale(0.4) translateZ(0); }
	.post-pagination .nextlink .texts{-webkit-transform: translateX(100px) translateZ(0); transform: translateX(100px) translateZ(0); }
	.post-pagination .link:hover .post-img{ opacity: 1; -webkit-transform: translateX(0px) scale(1) translateZ(0); transform: translateX(0) scale(1) translateZ(0); filter: blur(0px); }
	.post-pagination .link:hover .texts{ opacity: 1; -webkit-transform: translateX(0) translateZ(0); transform: translateX(0) translateZ(0); }
		@media only screen and (max-width: 992px){
			.post-pagination .post-img{ width: 50px !important; height: 50px !important; max-width: 50px !important; min-width: 50px !important; margin:0 20px 0 10px; -webkit-transform: translateX(-35px) scale(0.4) translateZ(0); filter: blur(5px); transform: translateX(-35px) scale(0.4) translateZ(0); filter: blur(12px); }
			.post-pagination .texts{-webkit-transform: translateX(-50px) translateZ(0); transform: translateX(-50px) translateZ(0); }
			.post-pagination .nextlink .post-img{ -webkit-transform: translateX(50px) scale(0.4) translateZ(0); transform: translateX(50px) scale(0.4) translateZ(0); }
			.post-pagination .nextlink .texts{-webkit-transform: translateX(50px) translateZ(0); transform: translateX(50px) translateZ(0); }
		}

/* Animated filters and triggers */
	.filters-trigger{ position: relative; letter-spacing: 2px; -webkit-transition: all 0.5s cubic-bezier(0.77, 0, 0.2, 1); -moz-transition: all 0.5s cubic-bezier(0.77, 0, 0.2, 1); transition: all 0.5s cubic-bezier(0.27, 0, 0.2, 1); }
	.filters-trigger:hover,
	.filters-trigger.active{ letter-spacing: 4px; }
	.filters-trigger span.filter-note{ visibility: visible; opacity: 1; position: absolute; -webkit-transform: translateX(-8px) translateZ(0); transform: translateX(-8px) translateZ(0); -webkit-transition: all 0.5s cubic-bezier(0.77, 0, 0.2, 1); -moz-transition: all 0.5s cubic-bezier(0.77, 0, 0.2, 1); transition: all 0.5s cubic-bezier(0.27, 0, 0.2, 1); }
	.filters-trigger:hover span.filter-note{ opacity: 0; -webkit-transform: translateX(12px) translateZ(0); transform: translateX(12px) translateZ(0); -webkit-transition-delay: 0s; transition-delay: 0s; }
	.filters-trigger.active span.filter-note{ visibility: hidden; opacity: 0; -webkit-transform: translateX(24px) translateZ(0); transform: translateX(24px) translateZ(0); -webkit-transition-delay: 0s; transition-delay: 0s; }
	.filters-trigger i{ margin-left: 5px; font-size: 7px; visibility: hidden; backface-visibility: hidden; opacity: 0; -webkit-transform: scale(0.4) rotate(45deg); transform: scale(0.4) rotate(45deg); -webkit-transition: all 0.5s cubic-bezier(0.77, 0, 0.2, 1); -moz-transition: all 0.5s cubic-bezier(0.77, 0, 0.2, 1); transition: all 0.5s cubic-bezier(0.27, 0, 0.2, 1); }
	.filters-trigger:hover i{ visibility: visible; opacity: 1; -webkit-transform: scale(1) rotate(45deg); transform: scale(1) rotate(45deg); -webkit-transition-delay: 0.2s; transition-delay: 0.2s; }
	.filters-trigger.active i{ visibility: visible; opacity: 1; -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); -webkit-transition-delay: 0.2s; transition-delay: 0.2s; }

/* Filter inner */
	.filters-trigger .filters{ width: 0px; position: relative; left: 20px; -webkit-transition: all 0.5s cubic-bezier(0.77, 0, 0.2, 1); -moz-transition: all 0.5s cubic-bezier(0.77, 0, 0.2, 1); transition: all 0.5s cubic-bezier(0.27, 0, 0.2, 1); }
	.filters-trigger .filters *{ opacity: 0; color: #232323; visibility: hidden; padding: 0 15px; display: flex; display: -ms-flexbox; align-items: center; -ms-flex-align: center; -webkit-transform: translateX(-10px); transform: translateX(-10px); -webkit-transition: all 0.5s cubic-bezier(0.77, 0, 0.2, 1); -moz-transition: all 0.5s cubic-bezier(0.77, 0, 0.2, 1); transition: all 0.5s cubic-bezier(0.27, 0, 0.2, 1); -webkit-transition-delay: 0.1s; transition-delay: 0.1s; }
	.filters-trigger.active .filters *{ opacity: 1; visibility: visible; -webkit-transform: translateX(0px); transform: translateX(0px); }
	.filters-trigger.active .filters *.cbp-filter-item-active{ color: inherit !important; }
	.filters-trigger.active .filters *:hover{ color: #999999; }

/* Mobile options */
		@media only screen and (max-width: 992px){
			.filters-trigger{ flex-flow: wrap; }
			.filters-trigger .filters{ left: 0px; height: 0px; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; }
			.filters-trigger.active .filters{ height: 25px; -webkit-transition-delay: 0s; transition-delay: 0s; }
			.filters-trigger .filters div{ padding: 0 5px; }
			.filters-trigger .filters div:first-child{ padding-left: 0; }
		}

/* Active cascading animations */
	.filters-trigger.active .filters div:hover{ -webkit-transition-delay: 0s !important; transition-delay: 0s !important; }
	.filters-trigger.active .filters div:nth-of-type(2){ -webkit-transition-delay: 0.2s; transition-delay: 0.2s; }
	.filters-trigger.active .filters div:nth-of-type(3){ -webkit-transition-delay: 0.3s; transition-delay: 0.3s; }
	.filters-trigger.active .filters div:nth-of-type(4){ -webkit-transition-delay: 0.4s; transition-delay: 0.4s; }
	.filters-trigger.active .filters div:nth-of-type(5){ -webkit-transition-delay: 0.5s; transition-delay: 0.5s; }
	.filters-trigger.active .filters div:nth-of-type(6){ -webkit-transition-delay: 0.6s; transition-delay: 0.6s; }
	.filters-trigger.active .filters div:nth-of-type(7){ -webkit-transition-delay: 0.7s; transition-delay: 0.7s; }
	.filters-trigger.active .filters div:nth-of-type(8){ -webkit-transition-delay: 0.8s; transition-delay: 0.8s; }

/* ==============================================
	COMMENTS
============================================== */

/* Comment styles */
	.leave-comment-trigger{ padding: 25px 30px; height: auto; max-height: 70px; cursor: pointer; position: relative; overflow: hidden; -webkit-transition: all 0.6s cubic-bezier(0.77, 0, 0.2, 1), background-color 0.3s; transition: all 0.6s cubic-bezier(0.77, 0, 0.2, 1), background-color 0.3s; }
	.leave-comment-trigger.active{ cursor: default; max-height: 700px; padding: 50px 30px 22px; background-color: transparent !important; }

/* Animated invisible comment form */
	.leave-comment-trigger .comment-form{ visibility: hidden; opacity: 0; height: 0; pointer-events: none; width: 100%; }
	.leave-comment-trigger.active .comment-form{ visibility: visible; opacity: 1; height: auto; margin: 50px 0; pointer-events: all; }

/* Getting active */
	.leave-comment-trigger .comment-form>form>div{ visibility: hidden; opacity: 0; -webkit-transition: all 1.2s cubic-bezier(0.77, 0, 0.2, 1); transition: all 1.2s cubic-bezier(0.77, 0, 0.2, 1); -webkit-transform: translateY(20px) translateZ(0); transform: translateY(20px) translateZ(0); }
	.leave-comment-trigger.active .comment-form>form>div{ visibility: visible; opacity: 1; -webkit-transform: translateY(0px) translateZ(0); transform: translateY(0px) translateZ(0); }

/* Form loading animation */
	.leave-comment-trigger .comment-form>form>div:nth-of-type(1){ -webkit-transition-delay: 0.1s; transition-delay: 0.1s; }
	.leave-comment-trigger .comment-form>form>div:nth-of-type(2){ -webkit-transition-delay: 0.2s; transition-delay: 0.2s; }
	.leave-comment-trigger .comment-form>form>div:nth-of-type(3){ -webkit-transition-delay: 0.3s; transition-delay: 0.3s; }
	.leave-comment-trigger .comment-form>form>div:nth-of-type(4){ -webkit-transition-delay: 0.4s; transition-delay: 0.4s; }