html,
body {
	font-family: 'Open Sans', sans-serif;
	color: #6c757d;
	background-color: #fff;
}
html {-ms-overflow-style: -ms-autohiding-scrollbar;}

/*---------------------------------------------------------------
0000. AFY LIGHTBOX
---------------------------------------------------------------*/
.afy-lightbox-link {
    display: flex;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(40, 167, 69, 0.66);
    cursor: pointer;
	opacity: 0;
	transition: all ease-in-out 300ms;
}
.afy-lightbox-link:hover {opacity: 1;}
.afy-lightbox-icon {
	font-size: 2rem;
    color: #fff;
    margin: auto;
}
.afy-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
}
.afy-lightbox .overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.9;
}
.afy-lightbox .overlay.light {
	background-color: #fff;
}
.afy-lightbox-content {
	display: flex;
	position: relative;
    flex-direction: column;
    width: 100%;
	height: 100%;
	padding: 0;
}
.afy-lightbox-header {
    display: flex;
    position: relative;
    width: 95%;
    padding: 0 8px 8px 8px;
    margin: auto auto 0 auto;
	color: #6c757d;
	z-index: 1;
}
.afy-lightbox-title {
    font-size: 14px;
    font-weight: 600;
    text-transform: capitalize;
}
.afy-lightbox-close-btn {
    font-size: 16px;
    padding: 8px 10.5px;
    margin: auto -20px -25px auto;
    color: #000;
    background-color: #dc3545;
    border-radius: 50%;
    cursor: pointer;
    transition: all ease-in-out 200ms;
}
.afy-lightbox-close-btn:hover {box-shadow: 0 0 16px #000;}
.afy-lightbox-body {
	position: relative;
    width: 95%;
    margin: 0 auto auto auto;
    background-color: #fff0;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
}
.afy-lightbox-img {width: 100%;}
.half-screen-jumbo .afy-lightbox-link {top: 16px;}
.half-screen-jumbo.jumbo-image-left .afy-lightbox-link {top: 0;}
/*---------------------------------------------------------------
0000. END OF AFY LIGHTBOX
---------------------------------------------------------------*/

.switcher-with-text {
	display: flex;
	position: relative;
    margin: auto 0;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 50em;
}
.switcher-with-text::before {
	content: "";
    display: block;
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(50% - 4px);
    height: calc(100% - 4px);
    background-color: rgba(0, 0, 0, 0.2);
	border-radius: 50em;
	transition: all ease-in-out 300ms;
}
.switcher-with-text .label {
	position: relative;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 12px;
    margin: 2px;
    color: #6c757d;
	opacity: 0.5;
	cursor: pointer;
	transition: all ease-in-out 300ms;
}
.switcher-with-text .label:hover {opacity: 1;}
.switcher-with-text .label:first-child {margin-right: 0;}
.switcher-with-text .label:last-child {margin-left: 0;}

.phone ::-webkit-scrollbar, .tablet ::-webkit-scrollbar, .computer ::-webkit-scrollbar, .laptop ::-webkit-scrollbar, .all-in-one-computer ::-webkit-scrollbar {display: none;}
input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 30px #fff inset !important;
	box-shadow: 0 0 0 30px #fff inset !important;
}
input:-webkit-autofill:focus,
input:-webkit-autofill:active  {
	box-shadow: 0 0 0 1px #28a745 inset, 0 0 0 30px #fff inset !important;
	-webkit-box-shadow: 0 0 0 1px #28a745 inset, 0 0 0 30px #fff inset !important;
}
button, button:focus {outline: none;}
::placeholder {
	-webkit-apperance: none;
	-ms-apperance: none;
	color: #999 !important;
	opacity: 1;
}
:-ms-input-placeholder {
	-webkit-apperance: none;
	-ms-apperance: none;
	color: #999 !important;
	opacity: 1;
}
::-ms-input-placeholder {
	-webkit-apperance: none;
	-ms-apperance: none;
	color: #999 !important;
	opacity: 1;
}
a {color: #00ae14;}
.btn a {color: inherit;}
.btn.disabled,.btn.disabled:hover,.btn.disabled:focus,.btn.disabled:active {cursor: not-allowed;}
button.non-btn-view,
button.non-btn-view:hover,
button.non-btn-view:focus,
button.non-btn-view:active {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    -webkit-appearance: none;
    align-items: unset;
    text-align: unset;
    padding: 0;
    margin: 0;
    color: inherit;
    background: none;
    box-shadow: none;
	border: none;
	outline: 0;
}
.afy-alert-modal {
    display: flex;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.66);
    z-index: 1003;
}
.afy-alert-modal .afy-alert {
    min-width: 300px;
    max-width: 400px;
    font-size: 0.8rem;
    padding: 0;
    margin: auto;
    background-color: transparent;
    box-shadow: 0 6px 6px -3px rgba(0, 0, 0, 0.2), 0 10px 14px 1px rgba(0, 0, 0, 0.14), 0 4px 18px 3px rgba(0, 0, 0, 0.12);
    border: 1px solid #fff;
    border-radius: 5px;
    transform: scale(1);
    transition: all ease-in-out 200ms;
}
.afy-alert-modal .alert-modal-header {
    font-weight: 700;
    padding: 16px;
    color: #6c757d;
    background-color: #f8f9fa;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 4px 4px 0 0;
}
.afy-alert-modal .alert-modal-body {
    padding: 32px;
    background-color: #fff;
}
.afy-alert-modal .alert-modal-footer {
    padding: 8px 16px;
    background-color: #fff;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 0 0 4px 4px;
}
.afy-input-btn-group .input-hidden {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 0.125rem 0.75rem;
    margin: auto;
    border-radius: 1rem;
    opacity: 0;
}
.choose-new-app-icon {
	width: 128px;
	height: 128px;
}

.uploaded-preview {position: relative;}
.uploaded-preview .uploaded-image-preview,
.uploaded-preview .dummy-image {
	position: absolute;
    left: 0;
    top: 0;
	width: 100%;
	height: 100%;
	border: 1px solid #cdcdcd;
	border-radius: 6px;
}
.uploaded-preview .dummy-image {
	border: 1px dashed #000;
    opacity: 0.22;
}
.uploaded-preview.uploaded .dummy-image, .uploaded-preview .uploaded-image-preview {display: none;}
.uploaded-preview.uploaded .uploaded-image-preview {display: block;}
.uploaded-preview .afy-input-btn-group-container {
    display: flex;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: auto;
}
.uploaded-preview .afy-input-btn-group {
	display: flex;
    flex-direction: row;
    position: relative;
    width: auto;
    font-size: 12px;
    padding: 4px 8px;
    margin: auto;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 15px;
    overflow: visible;
    opacity: 0.66;
    cursor: pointer;
    transition: color ease-in-out 300ms,background-color ease-in-out 300ms,border-color ease-in-out 300ms,box-shadow ease-in-out 100ms;
}
.uploaded-preview .afy-input-btn-group:hover,
.uploaded-preview .afy-input-btn-group:focus,
.uploaded-preview .afy-input-btn-group:active {
    color: #fff;
    border-color: #28a745;
    background-color: #28a745;
    opacity: 1;
}
.uploaded-preview .afy-input-btn-group:active {box-shadow: 0 3px 6px rgba(0,0,0,0.5) inset, 0 0 0 0.2rem rgba(40, 167, 69, 0.5);}
.afy-input-btn-group.icon-left.centered-align .input-icon {margin: auto 0.25rem auto auto;}
.afy-input-btn-group.icon-left.centered-align .input-title {
    font-size: inherit;
    font-weight: normal;
    margin: auto auto auto 0;
}
.uploaded-preview .helper {
    display: none;
    min-width: 48px;
    width: 48px;
    max-width: 48px;
    margin: auto;
}
.uploaded-preview .helper .btn {
	min-width: 48px;
    width: 48px;
    max-width: 48px;
    font-size: 24px;
    padding: 11px 0;
    margin: auto;
    background-color: #fff;
    border-radius: 24px;
	box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
	transition: color ease-in-out 300ms,background-color ease-in-out 300ms,border-color ease-in-out 300ms,box-shadow ease-in-out 100ms;
}
.uploaded-preview .helper .btn:hover,
.uploaded-preview .helper .btn:focus,
.uploaded-preview .helper .btn.active {
    color: #fff;
    background-color: #dc3545;
    border-color: #fff;
}
.uploaded-preview .helper .btn:active {box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.3);}
.uploaded-preview.uploaded .afy-input-btn-group {display: none;}
.uploaded-preview.uploaded .helper {
	display: block;
	opacity: 0;
	transition: opacity ease-in-out 300ms;
}
.afy-input-btn-group-container:hover .helper {opacity: 1;}
.mat-input-alert {
	display: none;
    position: relative;
    max-width: 100%;
}
.mat-input-alert-text {
    font-size: 13px;
	padding: 16px 24px 16px 16px;
	margin: 4px 0 0 0;
    max-width: 100%;
    color: #fff;
    background-color: #dc3545;
    border-radius: 8px;
}
.mat-input-alert-close-btn {
    position: absolute;
    top: 10px;
    right: 8px;
    color: #fff;
}
.text-indigo {color: #6610f2;}

.text-purple {color: #6f42c1;}
.bg-purple {background-color: #6f42c1;}
.border-purple {border-color: #6f42c1;}
.accordion .text-purple:after {border-color: transparent transparent #6f42c1 transparent;}

.text-pink {color: #e83e8c;}
.bg-pink {background-color: #e83e8c;}
.border-pink {border-color: #e83e8c;}

.text-orange {color: #fd7e14;}

.text-yellow {color: #ffc107;}

.text-teal {color: #20c997;}

.text-cyan {color: #17a2b8;}

.text-gray {color: #6c757d;}

.text-gray-dark {color: #343a40;}

.text-light {color: #f8f9fa;}

.text-dark {color: #343a40;}

.text-web {color: #4b84c1;}
.bg-web {background-color: #4b84c1;}
.border-web {border-color: #4b84c1;}
.accordion .text-web:after {border-color: transparent transparent #4b84c1 transparent;}

.text-android {color: #0b9bb3;}
.bg-android {background-color: #0b9bb3;}
.border-android {border-color: #0b9bb3;}
.accordion .text-android:after {border-color: transparent transparent #0b9bb3 transparent;}

.text-ios {color: #49a7ec;}
.bg-ios {background-color: #49a7ec;}
.border-ios {border-color: #49a7ec;}
.accordion .text-ios:after {border-color: transparent transparent #49a7ec transparent;}

.border-1 {border-width: 1px;}
.border-solid {border-style: solid;}

.search-bar.afy-input-group .afy-outline-input {border-color: #fff;}
.search-bar.afy-input-group .afy-outline-input:focus {
	border-color: #28a745;
	box-shadow: 0 0 0 1px #28a745 inset, 0 0 0 5px rgba(255, 255, 255, 0.33);
}
.back-to-list-page.hero-image,
.hero-image .back-to-list-page {
	position: relative;
	background-color: #28a745;
	z-index: 1;
}
.back-to-list-page .container {
	display: flex;
    padding: 8px 16px;
}
.back-to-list-page .container .btn {
	display: flex;
    color: #fff;
    padding: 5px 8px 5px 0;
	margin: auto auto auto 0;
	border: none;
	outline: none;
	box-shadow: none;
}
.back-to-list-page .container .btn-icon {margin: auto 4px auto auto;}
.back-to-list-page .container .btn.title {margin: auto auto auto 0;}
.bg-video-16x9 {width: 100%;}/* Yüksekliği JS ile yapılıyor */
.aspc-sizer {
	position: relative;
	margin: auto;
}
.aspc-1x1 {
	width: 100%;
	height: 0;
	padding: 0 0 100% 0;
}
.aspc-7x5 {
	width: 100%;
	height: 0;
	padding: 0 0 85% 0;
}
.aspc-4x3 {
	width: 100%;
	height: 0;
	padding: 0 0 75% 0;
}
.aspc-16x9 {
	width: 100%;
	height: 0;
	padding: 0 0 56.25% 0;
}
.aspc-2x1 {
	width: 100%;
	height: 0;
	padding: 0 0 50% 0;
}
.aspc-5x2 {
	width: 100%;
	height: 0;
	padding: 0 0 40% 0;
}
.aspc-3x1 {
	width: 100%;
	height: 0;
	padding: 0 0 33.333% 0;
}
.image-sizer {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.image-sizer img {
	position: absolute;
    left: 50%;
    top: 50%;
    min-width: 100%;
    max-height: calc(100% + 4px);
    transform: translate(-50%, -50%);
}
.blog-card {
	height: 100%;
    padding: 0;
	margin: 0;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.07), 0 0 3px 3px rgba(0, 0, 0, 0.03), 0 2px 6px rgba(0, 0, 0, 0.22);
	border: none;
	border-radius: 8px;
}
.blog-card a,.blog-card a:hover {text-decoration: none;}
.blog-card .card-img-top {border-radius: 8px 8px 0 0;}
.blog-card .image-sizer {border-radius: 8px 8px 0 0;}
.blog-card h5 {
	font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    color: #6c757d;
    opacity: 0.8;
    transition: opacity ease-in-out 150ms;
}
.blog-card a:hover h5 {opacity: 1;}
.blog-card .card-body {padding: 16px;}
.blog-card .card-footer {
	display: flex;
	padding: 16px;
	margin: auto 0 0 0;
	background: none;
	border-radius: 0 0 9px 9px;
	border-top: 1px solid rgba(0, 0, 0, 0.07);
}
.card-xtr-link {
	display: flex;
    font-size: 12px;
    font-weight: 600;
    margin: auto 16px auto 0;
    color: #6c757d;
	opacity: 0.6;
	transition: all ease-in-out 150ms;
}
.card-xtr-link:hover {
	text-decoration: none;
	opacity: 1;
}
.card-link-xtr-icon {
	font-size: 125%;
	margin: auto 4px auto 0;
}
.card-xtr-link-text {
	line-height: 1;
	margin: auto auto auto 0;
}
.blog-card.horizontal-card .card-body {
	display: flex;
	padding: 0;
}
.blog-card.horizontal-card .card-body .col-4 {padding: 0;}
.blog-card.horizontal-card .card-body .card-img-left {border-radius: 8px 0 0 8px;}
.blog-card.horizontal-card .card-body .card-img-left .image-sizer {
	border-right: 1px solid rgba(0, 0, 0, 0.11);
	border-radius: 8px 0 0 8px;
}
.blog-card.horizontal-card h5 {
	max-height: 96px;
    padding: 8px 16px;
    margin: auto 0;
    overflow: hidden;
}
.afy-radio-with-label,
.afy-checkbox-with-label {
    display: flex;
	position: relative;
}
.afy-radio-with-label label,.afy-checkbox-with-label label {cursor: pointer;}
.afy-radio-with-label.with-mat-input {padding: 16px;}
.afy-radio-with-label input[type="radio"] {
    position: relative;
    top: -1px;
    width: 16px;
    height: 16px;
    font-size: 1rem;
    line-height: normal;
    margin: auto -17px auto 0px;
	border: none;
	cursor: pointer;
	opacity: 0;
    z-index: 1;
}
.afy-checkbox-with-label input[type="checkbox"] {
    position: relative;
    top: -1px;
    width: 16px;
    height: 16px;
    font-size: 1rem;
    line-height: normal;
    margin: auto -17px auto 0px;
	border: none;
	cursor: pointer;
	opacity: 0;
    z-index: 1;
}
.afy-custom-radio {
	position: relative;
    display: flex;
    width: 16px;
    height: 16px;
    margin: auto 0;
    background-color: #fff;
	border: 2px solid #d6d6d6;
    border-radius: 8px;
}
.afy-custom-checkbox {
	position: relative;
    display: flex;
    width: 16px;
    height: 16px;
    margin: auto 0;
    background-color: #fff;
	border: 2px solid #d6d6d6;
    border-radius: 3px;
}
.afy-radio-with-label label {
	line-height: normal;
	padding: 0 0 0 4px;
	margin: auto 0 auto 0;
}
.afy-checkbox-with-label .description-label {
    padding: 4px;
    margin: auto 0 auto 4px;
}
.afy-checkbox-with-label .description-label button {
	text-align: left;
    line-height: normal;
    padding: 0;
    margin: auto 0;
    color: #28a745;
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
}
.afy-checkbox-with-label .description-label label {margin: auto 0;}
.afy-checkbox-with-label .description-label button:hover {text-decoration: underline;}
:checked ~ .afy-custom-radio,:checked ~ .afy-custom-checkbox {border-color: #00ab34;}
.afy-radio-with-label .mat-outline-input-container *,.afy-checkbox-with-label .mat-outline-input-container * {cursor: pointer;}
.afy-radio-standart::after {
	content: "";
	width: 6px;
    height: 6px;
    margin: auto;
	background-color: #00ab34;
	border-radius: 3px;
	opacity: 0;
	transition: all ease-in-out 200ms;
}
.afy-checkbox-standart::after {
	content: "";
    width: 10px;
    height: 7px;
    border-width: 0px 0px 2px 2px;
    border-style: solid;
    border-color: #fff;
    transform: translate(1px, 1px) rotate(-45deg) scale(0);
    opacity: 0;
    transition: all ease-in-out 200ms;
}
:checked ~ .afy-radio-standart::after {opacity: 1;}
:checked ~ .afy-checkbox-standart {background-color: #00ab34;}
:checked ~ .afy-checkbox-standart::after {
	transform: translate(1px, 1px) rotate(-45deg) scale(1);
    opacity: 1;
}
.agreement-text {font-size: 13px;}
.agreement-text h1,.agreement-text h2,.agreement-text h3,.agreement-text h4,.agreement-text h5,.agreement-text h6 {font-weight: 700;}
.agreement-text h1 {font-size: 20px;}
.agreement-text h2 {font-size: 18px;}
.agreement-text h3 {font-size: 16px;}
.agreement-text h4 {font-size: 15px;}
.agreement-text h5 {font-size: 14px;}
.agreement-text h6 {font-size: 13px;}
.agreement-text pre {white-space: normal;}
.agreement-text blockquote {
    font-size: 90%;
    padding: 16px;
    margin: 24px;
    border-width: 1px 0;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.11);
}
.inline-popper-container {
    position: absolute;
    width: 320px;
    bottom: 0;
    left: 50%;
    padding: 10px 10px 36px 10px;
    transform: translate(-50%, 0);
    z-index: 1;
}
.inline-popper {
	position: relative;
    background-color: #fff;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.66);
    border-radius: 8px;
}
.inline-popper::before {
	content: "";
    display: block;
    position: absolute;
    bottom: -7px;
    left: 10%;
    width: 14px;
    height: 14px;
    background-color: #fff;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.33);
    transform-origin: left;
    transform: rotate(45deg) translate(-50%, 0);
}
.inline-popper::after {
	content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 10%;
    width: 40px;
    height: 20px;
    background-color: #fff;
    transform: translate(-50%, 0);
}
.inline-popper-header {
    display: flex;
    line-height: normal;
    padding: 4px 8px 0 8px;
}
.inline-popper-header .title {
	font-weight: 700;
	padding: 10px;
	margin: auto auto auto 0;
}
.inline-popper-header .close-icon {
    padding: 12px;
    margin: auto 0 auto auto;
    cursor: pointer;
}
.inline-popper .divider {margin: 0}
.inline-popper-body {padding: 8px}
.inline-popper img {max-width: 100%;}

/* MATERIAL DESIGN INPUT & FX :::: mat- Material design bileşenleri kısaltması */
.mat-checkbox-btn-container,
.mat-radio-btn-container {
	display: flex;
	position: relative;
	font-size: 0.875rem;
	padding: 1rem;
    margin: 0.5rem 0rem;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.mat-checkbox-btn-container .input-label,
.mat-radio-btn-container .input-label {
	font-weight: normal;
	line-height: normal;
	margin: auto 0px auto 0px;
}
.mat-checkbox-btn-container input,
.mat-radio-btn-container input {
	position: absolute;
	top: 1rem;
    right: 1.25rem;
    height: auto;
	opacity: 0;
}
.mat-radio-btn-container input {top: 0.95rem;}
.mat-checkbox-btn-container .checkmark,
.mat-radio-btn-container .checkmark {
    display: flex;
    height: 20px;
    width: 20px;
    margin: auto 0px auto auto;
    border: 2px solid #ccc;
    transition: all ease-in-out 200ms;
}
.mat-checkbox-btn-container .checkmark {border-radius: 2px;}
.mat-radio-btn-container .checkmark {border-radius: 10px;}
.mat-checkbox-btn-container input:checked ~ .checkmark {
	background-color: #28a745;
	border-color: #28a745;
}
.mat-radio-btn-container input:checked ~ .checkmark {border-color: #337ab7;}
.mat-checkbox-btn-container .checkmark:after {
 	content: "";
    width: 12px;
    height: 7px;
	border-width: 0px 0px 2px 2px;
    border-style: solid;
    border-color: #fff;
	transform: translate(2px, 3px) rotate(-45deg) scale(0);
	opacity: 0;
	transition: all ease-in-out 200ms;
}
.mat-radio-btn-container .checkmark:after {
	content: "";
    width: 10px;
	height: 10px;
	margin: auto;
	background-color: #337ab7;
	border-radius: 5px;;
	transform: scale(0);
	transition: all ease-in-out 200ms;
}
.mat-checkbox-btn-container input:checked ~ .checkmark:after {
	transform: translate(2px, 3px) rotate(-45deg) scale(1);
	opacity: 1;
}
.mat-radio-btn-container input:checked ~ .checkmark:after {transform: scale(1);}
.mat-outline-input-container input,
.builder-dark-ui .mat-outline-input-container input,
.mat-outline-input-container textarea,
.builder-dark-ui .mat-outline-input-container textarea,
.mat-outline-input-container .selected-dropdown,
.builder-dark-ui .mat-outline-input-container .selected-dropdown {
	position: relative;
	width: 100%;
    height: auto;
    font-size: 0.85rem;
    padding: 16px;
    margin: 0rem;
	background-color: #fff;
    border: 1px solid #ccc;
	border-radius: 4px;
	outline: none;
    transition: border 0.2s;
}
.afy-outline-input {
	position: relative;
	width: 100%;
    height: auto;
    font-size: 0.85rem;
    padding: 16px;
    margin: 0rem;
	background-color: #fff;
    border: 1px solid #ccc;
	border-radius: 4px;
	outline: none;
    transition: border 0.2s;
}
.afy-outline-input:focus {
	border-color: #28a745;
	box-shadow: 0 0 0 1px #28a745 inset;
}
.input-w-right-icon .afy-outline-input {padding-right: 70px;}
.afy-outline-input + .non-func-icon.right {
	position: absolute;
    right: 0;
    font-size: 21px;
    color: rgba(0, 0, 0, 0.15);
    padding: 16px;
    border-left: 1px solid rgba(0, 0, 0, 0.11);
}
.mat-outline-input-container.mat-input-rounded input {border-radius: 34px;}
.mat-outline-input-container .selected-dropdown,
.builder-dark-ui .mat-outline-input-container .selected-dropdown {
	height: 54px;
    font-weight: 400;
    line-height: 1.5;
    color: #6c757d;
}
.mat-outline-input-container .one-row-textarea {height: 54px;}
.mat-outline-input-container.filled .one-row-textarea {height: auto;}
.mat-outline-input-container input:hover,
.builder-dark-ui .mat-outline-input-container input:hover,
.mat-outline-input-container textarea:hover,
.builder-dark-ui .mat-outline-input-container textarea:hover {
	border: 1px solid #ccc;
}
.mat-outline-input-container input:focus,
.builder-dark-ui .mat-outline-input-container input:focus,
.mat-outline-input-container textarea:focus,
.builder-dark-ui .mat-outline-input-container textarea:focus,
.mat-outline-input-container .selected-dropdown.active,
.builder-dark-ui .mat-outline-input-container .selected-dropdown.active {
	background-color: #fff;
	border-color: #6200ee;
	box-shadow: 0 0 0 1px #6200ee inset;

	border-color: #28a745;
	box-shadow: 0 0 0 1px #28a745 inset;
}
.mat-outline-input-container .placeholder-txt,
.builder-dark-ui .mat-outline-input-container .placeholder-txt {
	position: absolute;
    left: 9px;
    top: 24px;
	font-size: 0.85rem;
	line-height: 1.5;
    padding: 0px;
	padding: 0px 8px;
	color: #999;
    transition: all 0.2s;
}
.mat-outline-input-container.mat-input-rounded .placeholder-txt {padding: 0px 16px;}
.mat-outline-input-container.filled .placeholder-txt,
.builder-dark-ui .mat-outline-input-container.filled .placeholder-txt {
	font-size: 75%;
	left: 8px;
	top: 0px;
	color: #999;
	background-color: #fff;
}
.mat-outline-input-container input:focus ~ .placeholder-txt,
.builder-dark-ui .mat-outline-input-container input:focus ~ .placeholder-txt,
.mat-outline-input-container textarea:focus ~ .placeholder-txt,
.builder-dark-ui .mat-outline-input-container textarea:focus ~ .placeholder-txt,
.mat-outline-input-container .selected-dropdown.active ~ .placeholder-txt,
.builder-dark-ui .mat-outline-input-container .selected-dropdown.active ~ .placeholder-txt {
	font-size: 75%;
	left: 8px;
	top: 0px;
	color: #6200ee;
	background-color: #fff;

	color: #28a745;
}
.mat-outline-input-container.mat-input-rounded input:focus ~  .placeholder-txt,
.mat-outline-input-container.mat-input-rounded textarea:focus ~  .placeholder-txt,
.mat-outline-input-container.mat-input-rounded .selected-dropdown.active ~  .placeholder-txt {
	left: 16px;
}
.mat-outline-input-container .helper-text,
.builder-dark-ui .mat-outline-input-container .helper-text {
	display: none;
	position: relative;
	font-size: 75%;
    padding: 8px 16px 0px 16px;
    color: #dc3545;
}
.mat-outline-input-container.oval input,
.builder-dark-ui .mat-outline-input-container.oval input {
	padding: 16px 16px 16px 32px;
	border-radius: 26px;
}
.mat-outline-input-container.oval .placeholder-txt {left: 25px;}
.mat-outline-input-container.oval input:focus ~ .placeholder-txt {left: 24px;}
.mat-outline-input-container.oval .helper-text {padding-left: 32px;}

.mat-outline-input-container.dropdown {z-index: 1;}
.mat-outline-input-container.dropdown.clicked {z-index: 2;}

.mat-outline-input-container.dropdown input:focus {color: transparent}
.mat-outline-input-container .caret {
    position: absolute;
    right: 16px;
    top: 34px;
    border-width: 6px 6px 0px 6px;
    border-style: solid;
    border-color: #999 transparent;
	transition: all 0.2s;
}
.mat-outline-input-container input:focus ~ .caret,
.mat-outline-input-container .selected-dropdown.active ~ .caret {
	top: 32px;
	transform: rotate(180deg);
	border-color: #6200ee transparent;

	border-color: #28a745 transparent;
}
.mat-outline-input-container .dropdown-list {
    position: absolute;
    width: 0%;
	height: 0px;
    background-color: #fff;
    transform-origin: top left;
    box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);
	opacity: 0;
	transform: scale(0);
	transition: opacity 0.03s linear, transform 0.12s cubic-bezier(0,0,.2,1);
}
.mat-outline-input-container .dropdown-list.show {
	top: 61px;
	width: 100%;
	height: auto;
	margin-bottom: 32px;
	opacity: 1;
	transform: scale(1);
}
.mat-outline-input-container .dropdown-item {
	font-size: 0.85rem;
	padding: 16px;
	cursor: pointer;
}
.mat-outline-input-container .dropdown-item:active,
.mat-outline-input-container .dropdown-item:focus {
	color: #212529;
	background-color: #eee;
}
.mat-outline-input-container .dropdown-item.active {
	color: #212529;
    background-color: rgba(98, 0, 238, 0.08);
}
.mat-input-iconized input {padding-right: 52px;}
.mat-input-iconized .fa,
.mat-input-iconized .fas,
.mat-input-iconized .far,
.mat-input-iconized .fab {
	position: absolute;
    top: 22px;
    right: 16px;
    font-size: 24px;
    color: #aaa;
}
.mat-dialog-box {
	display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    justify-content: center;
    align-items: center;
	z-index: 99;
}
.mat-dialog-box.open {display: flex;}
.mat-dialog-container {
	-ms-flex-direction: column;
    flex-direction: column;
    min-width: 200px;
    max-width: 560px;
    max-height: calc(100vh - 32px);
    margin: auto 16px auto 16px;
    background-color: #fff;
    box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12);
    border-radius: 4px;
	animation: mat_dialog_anim 120ms;
}
.open .mat-dialog-container {
	animation: mat_dialog_anim 120ms;
}
@-webkit-keyframes mat_dialog_anim {
  0% {transform: scale(0.8);}
  100% {transform: scale(1);}
}
@keyframes mat_dialog_anim {
	0% {transform: scale(0.8);}
	100% {transform: scale(1);}
  }
.mat-dialog-content {
	padding: 20px 24px;
	overflow-wrap: break-word;
}
.mat-dialog-action-group {
	display: flex;
	justify-content: flex-end;
	padding: 8px;
}
.mat-dialog-box-action-btn {
	display: flex;
    min-width: 64px;
    height: 36px;
    font-size: 0.875rem;
    font-weight: 500;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    margin: auto 0px auto 8px;
    border-radius: 4px;
	cursor: pointer;
}
.action-flat.mat-dialog-box-action-btn {
	height: auto;
	width: auto;
	max-width: none;
}
.mat-dialog-box-action-btn .fa,.mat-dialog-box-action-btn .far,.mat-dialog-box-action-btn .fas,.mat-dialog-box-action-btn .fab {margin: auto 0.25rem auto auto;}
.mat-dialog-box-action-btn .input-title {margin: auto auto auto 0px;}
.mat-dialog-box-action-btn.primary {
	color: #6200ee;
    background-color: rgba(98, 0, 238, 0.11);
	border-color: rgba(98, 0, 238, 0.15);
	
	color: #28a745;
}

/* RIPPLE FX */
.mat-ripple-fx {
	overflow: hidden;
	transform: translate3d(0, 0, 0);
}
.mat-ripple-fx:after {
	content: "";
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	pointer-events: none;
	background-color: rgba(0, 0, 0, 0.5);
	background-image: radial-gradient(circle, #ccc 10%, transparent 10.01%);
	background-repeat: no-repeat;
	background-position: 50%;
	transform: scale(10, 10);
	opacity: 0;
	transition: transform 0.5s, opacity 1s;
}
.mat-ripple-fx:active:after,
.mat-ripple-fx:focus:after {
	transform: scale(0, 0);
	opacity: 0.3;
	transition: 0s;
}
.mat-outline-input-container {
	display: flex;
	flex-direction: column;
	position: relative;
	min-height: 68px;
	text-align: left;
	padding: 7px 0px;
	margin: 4px 0px;
}
.mat-outline-input-container .helper-icon-right {
    display: flex;
    position: absolute;
    top: 50%;
    right: 8px;
    width: 32px;
    height: 32px;
    color: #6c757d;
    transform: translate(0, -50%);
    cursor: pointer;
}
.mat-outline-input-container.helper-icon-right input {padding-right: 48px;}
.helper-icon-right::before {margin: auto;}
/* END OF MATERIAL DESIGN INPUT & FX */

.text-reset,.text-reset:hover,.text-reset:focus,.text-reset:active {color: inherit;}
.text-decoration-none,.text-decoration-none:hover,.text-decoration-none:focus,.text-decoration-none:active {text-decoration: none;}
a:hover {color: #00ae14;}
.btn a:hover {
	color: inherit;
	text-decoration: none;
}
.bg-rainbow {
	background-image: -webkit-linear-gradient(left, #ea0081 0%, rgba(0,0,0,0) 50%), -webkit-linear-gradient(bottom, #00bbf7 0%, rgba(0,0,0,0) 60%), -webkit-linear-gradient(right, #28a745 0%, rgba(0,0,0,0) 50%), -webkit-linear-gradient(top, #fbbe3b 0%, rgba(0,0,0,0) 100%);
    background-image: -o-linear-gradient(left, #ea0081 0%, rgba(0,0,0,0) 40%), -o-linear-gradient(bottom, #00bbf7 0%, rgba(0,0,0,0) 60%), -o-linear-gradient(right, #28a745 0%, rgba(0,0,0,0) 40%), -o-linear-gradient(top, #fbbe3b 0%, rgba(0,0,0,0) 100%);
    background-image: linear-gradient(90deg, #ea0081 0%, rgba(0,0,0,0) 40%), linear-gradient(0deg, #00bbf7 0%, rgba(0,0,0,0) 60%), linear-gradient(270deg, #28a745 0%, rgba(0,0,0,0) 40%), linear-gradient(180deg, #fbbe3b 0%, rgba(0,0,0,0) 100%);
	background-size: 400% 400%;
	background-position: 0% 0%;
	background-color: #dc3545;
	background-color: #000;
	animation: Gradient 30s ease infinite;
}
.with-pattern {position: relative;}
.with-pattern::before {
	position: absolute;
    display: block;
    content: "";
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-image: url(../images/tram.png);
}
.rainbow-1,.rainbow-yr1 {color: #f9b000;}
.rainbow-2,.rainbow-yr2 {color: #f28d19;}
.rainbow-3,.rainbow-yr3 {color: #eb6a33;}
.rainbow-4,.rainbow-yr4 {color: #e5464c;}
.rainbow-5,.rainbow-yr5 {color: #de2366;}
.rainbow-6,.rainbow-yr6 {color: #d7007f;}
.rainbow-7,.rainbow-g1 {color: #00b16b;}
.rainbow-8,.rainbow-g2 {color: #039966;}
.rainbow-9,.rainbow-g3 {color: #20c997;}
.rainbow-10,.rainbow-g4 {color: #17a2b8;}
.rainbow-g5 {color: #0e5057;}
.rainbow-g6 {color: #113852;}
.rainbow-11,.rainbow-b1 {color: #00b8f1;}
.rainbow-12,.rainbow-b2 {color: #0496cc;}
.rainbow-13,.rainbow-b3 {color: #007bff;}
.rainbow-14,.rainbow-b4 {color: #9C27B0;}
.rainbow-b5 {color: #12325d;}
.rainbow-b6 {color: #161038;}
.divider {
	margin: 10px 0 10px 0;
	border-width: 1px 0 0 0;
	border-style: solid;
	border-color: rgba(0,0,0,0.11);
}
.separator {
	margin: 0 10px 0 10px;
	border-width: 0 1px 0 0;
	border-style: solid;
	border-color: rgba(0,0,0,0.11);
}
.btn {
	line-height: 1;
	padding: 8px 12px;
	cursor: pointer;
}
.btn.non-icon {padding: 8.5px 12px;}
.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
.btn-info,
.btn-dark {
	color: #fff;
}
.btn-non-shape,
.btn-non-shape:hover,
.btn-non-shape:focus {
	color: inherit;
	border: none;
	box-shadow: none;
}
.btn-non-shape:active {
	background-color: rgba(0, 0, 0, 0.03);
	border: none;
	box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.22) inset;
}
.btn .btn-icon {
	display: inline-block;
	vertical-align: middle;
}
.btn .btn-title {
	display: inline-block;
	font-size: 12px;
	vertical-align: middle;
}
.row {
	width: 100%;
	margin: 0;
}
.col-12 {padding: 0;}
.navbar {
	position: fixed;
	width: 100%;
	top: 0;
	min-height: 48px;
	height: 48px;
	max-height: 48px;
	padding: 0;
	background: linear-gradient(to bottom, #fff 0%,#fafafa 98%,#ddd 98.1%,#ddd 100%);
	z-index: 999;
	/* KOYU TEMA
	background: linear-gradient(to bottom, #3f484e 0%,#1e262d 98%,#28a745 100%);
	box-shadow: 0 0 4px 2px #000000;*/
}
.navbar .separator {
	display: none;
	height: 52px;
	margin: 0;
}
.navbar-collapse {
	flex-grow: unset;
	max-height: calc(100vh - 48px);
	background: #fff;
	overflow-x: hidden;
	overflow-y: auto;
}
.navbar-collapse.show::before {
	content: "";
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.8;
}
.navbar-collapse.show .navbar-nav {
	position: relative;
    background-color: #fff;
}
.navbar-brand {
	padding: 0 40px 0 0;
	margin: auto;
}
.navbar-brand img {
	width: auto;
	height: 32px;
}
.navbar-toggler {
	display: block;
	position: relative;
	min-width: 48px;
	width: 48px;
	max-width: 48px;
	min-height: 48px;
	height: 48px;
	max-height: 48px;
    padding: 11px 9px;
    margin: 0;
    border: none;
	border-radius: 0;
	z-index: 1;
}
.navbar-toggler  .toggler-icon {
	display: block;
    width: 20px;
    height: 2px;
	margin: 5px;
    background-color: #6c757d;
    border-radius: 1px;
    opacity: 0;
	transition: all ease-in-out 300ms;
}
.navbar-toggler .toggler-icon:first-child {
	opacity: 0.66;
	transform: rotate(45deg) translate(5px, 5px);
}
.navbar-toggler .toggler-icon:last-child {
	opacity: 0.66;
	transform: rotate(-45deg) translate(5px, -5px);
}
.navbar-toggler.collapsed .toggler-icon {
	opacity: 0.66;
	transform: none;
	transition: all ease-in-out 300ms;
}
.navbar .lng-dropdown {
    position: absolute;
	right: 40px;
	margin: auto 4px;
}
.navbar .lng-dropdown .nav-link {
    padding: 12px 7.05px;
}
.navbar .btn-login {
	position: absolute;
	right: 0;
	padding: 0;
	margin: auto 8px;
}
.navbar .btn-login .btn-icon {
	font-size: 24px;
    padding: 8px 8.375px;
    color: #28a745;
}
.navbar .btn-login .btn-title {display: none;}
.navbar .btn-login.user-log {
	padding: 0;
	margin: auto 9px auto 8px;
}
.btn-non-shape.user-log:active {
	background: none;
	box-shadow: none;
}
.navbar .btn-login.user-log .nav-link {
	padding: 0;
	background: none;
	border: none;
}
.navbar .btn-login.user-log .nav-link::after {content: none;}
.navbar .btn-login.user-log .nav-link .circle {
	width: 36px;
    height: 36px;
    font-size: 16px;
    text-align: center;
    padding: 8px 0px 8px 0px;
    margin: 0px 0px 0px 0px;
    background-position: center;
    background-size: cover;
    border: 1px solid #dfe0e1;
    border-radius: 18px;
    transition: opacity ease-in-out 300ms;
}
.navbar-nav.container {
	padding: 0;
	justify-content: center;
}
.navbar .nav-item {
	position: relative;
	margin: auto 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.navbar .nav-item::before {
	content: "";
    position: absolute;
    left: 0;
    top: 51px;
    width: 100%;
    height: 0;
	background-color: #28a745;
}
.navbar .nav-item.active::before,.navbar .nav-item.show::before {height: 1px;}
.navbar .nav-link {
	display: flex;
	position: relative;
	font-size: 12.8px;
    line-height: 1.3;
    color: #6c757d;
    padding: 18px 16px;
}
.navbar .nav-item .nav-link.dropdown-toggle:before,
.navbar .btn-login.user-log .nav-link::before {
	content: "";
	position: absolute;
	left: 12px;
    bottom: -5px;
    border-width: 0;
    border-style: solid;
	border-color: #28a745 transparent;
}
.navbar .nav-item.show .nav-link.dropdown-toggle::before,
.navbar .btn-login.user-log .show .nav-link::before {
	border-width: 0 6px 5px 6px;
}
.navbar .nav-item .nav-link.dropdown-toggle::after {
	content: "";
	vertical-align: middle;
	margin: auto 0 auto auto;
	border-width: 4px 4px 0 4px;
	border-style: solid;
	border-color: #999 transparent;
	transition: all 0.2s;
}
.navbar .nav-item.active .nav-link.dropdown-toggle::after {
	border-color: #28a745 transparent;
}
.navbar .nav-item.show .nav-link.dropdown-toggle::after {
	transform: rotate(180deg);
}
.navbar .dropdown-menu {
	padding: 0;
    margin: 5px 0 0 0;
    min-width: 150px;
    white-space: nowrap;
    background-color: #fff;
    border-width: 2px 0 0 0;
    border-style: solid;
    border-color: #28a745;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 4px 8px -4px rgba(0, 0, 0, 0.33);
}
.dropdown-menu .row {flex-direction: column;}
.dropdown-menu .row [class*="col-"] {
	-ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}
.dropdown-menu .row [class*="col-"]:first-child {padding: 0 0 8px 0;}
.dropdown-menu .row [class*="col-"]:last-child {
	padding: 8px 0 0 0;
	border-top: 1px solid rgba(0, 0, 0, 0.11);
}
.not-yet {opacity: 0.3;}
.dropdown-item,
.user-log .dropdown-item {
	font-size: 13px;
    padding: 13.5px 12px;
    white-space: nowrap;
	color: #6c757d;
	border-radius: 0;
	transition: background-color ease-in-out 200ms, color ease-in-out 200ms;
}
.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item:active {
	color: inherit;
	background-color: inherit;
}
a.dropdown-item:hover,
.user-log .dropdown-item:hover {
	color: #f8f9fa;
	background-color: #acb1b6;
}
a.dropdown-item:focus,
.user-log .dropdown-item:focus {
	color: #f8f9fa;
	background-color: #6c757d;
}
a.dropdown-item:active,
.user-log .dropdown-item:focus {
	color: #28a745;
    background-color: rgba(0, 171, 52, 0.11);
}
.dropdown-item.active,
.dropdown-item.active:hover {
	color: #fff;
	background-color: #28a745;
}
.navbar-nav .nav-item.home > .nav-link {padding: 0.407rem 1rem 0.407rem 0rem;}
.navbar-nav .nav-item.home > .nav-link .fa {font-size: 1.25rem;}
.navbar-nav .nav-item.developer {margin: 1rem auto 1rem 3.25rem;}
.navbar-nav .nav-item.developer .nav-link {
	color: #28a745;
   padding: 0.157rem 0.5rem 0.157rem 0.5rem;
    border: 1px solid #28a745;
    border-radius: 15px;
}
.navbar-nav .nav-item.active .nav-link {color: #28a745;}
.navbar-nav .nav-item.developer .nav-link:hover {
	color: #ffffff;
	background-color: #28a745;
}
#lang .fa-globe {
	font-size: 18px;
    line-height: 0.5;
    margin: auto 4px auto 0;
    color: #28a745;
}
#lang .short-lng-name {display: none;}
#lang .full-lng-name {display: block;}
.centered-container {
	display: flex;
	margin: auto auto auto auto;
}
.scroll-top {
	display: none;
	position: fixed;
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    font-size: 1.25rem;
    line-height: 1.85em;
    text-align: center;
    color: #ffffff;
    background-color: #28a745;
    border: 2px solid #fff;
    border-radius: 20px;
    cursor: pointer;
    overflow: hidden;
    z-index: 99999;
}
.more-content-scroll-indicator {
	display: none;
	position: absolute;
    bottom: 10px;
    left: 50%;
	font-size: 0.75rem;
	text-align: center;
    margin: auto auto auto auto;
	transform: translate(-50%,0%);
}
.more-content-scroll-indicator a {
	position: relative;
    display: flex;
    flex-direction: column;
	color: inherit;
	text-decoration: none;
	opacity: 0.66;
	transition: opacity ease-in-out 300ms;
}
.more-content-scroll-indicator a:hover {opacity: 1;}
.more-content-scroll-indicator .fa {
	position: absolute;
	left: 50%;
	bottom: 20px;
	font-size: 1.25rem;
	transform: translate(-50%,0%);
	animation: scroll_more_btn forwards 1s infinite;
}
ol {
	margin:0 0 1.5em;
	padding:0;
	counter-reset:item;
}
ol:last-child {margin-bottom: 0;}
ol > li {
	margin:0;
	padding:0 0 0 2em;
	text-indent:-2em;
	list-style-type:none;
	counter-increment:item;
}
ol > li:before {
	display:inline-block;
	width:1.5em;
	padding-right:0.5em;
	font-weight:bold;
	text-align:right;
	content:counter(item) ".";
}
input,select,option,textarea,.form-control {
	font-size: 0.8rem;
    line-height: normal;
    padding: 10px 14px 10px 14px;
    background-color: #fff;
    border-color: #e9eaeb;
    box-shadow: none;
}
input:focus,select:focus,option:focus,textarea:focus,.form-control:focus,
input:active,select:active,option:active,textarea:active,.form-control:active {
	box-shadow: none;
	border-color: #28a745;
}
.afy-input-group,
.afy-input-button-group {
    display: flex;
    flex-direction: row;
    position: relative;
    overflow: visible;
}
label.afy-radio-btn-container,
label.afy-checkbox-btn-container {
	display: flex;
	position: relative;
	padding: 0;
    margin: auto 0 auto 0;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
label.afy-radio-btn-container.size-pos-opt {width: 64px;}
label.afy-checkbox-btn-container {margin: auto 0 auto 0;}
label.afy-checkbox-btn-container.required {pointer-events:none;}
label.afy-radio-btn-container input[type="radio"],
label.afy-checkbox-btn-container input[type="checkbox"] {
    display: block;
    width: 16px;
    height: 16px;
    margin: auto 0 auto 0;
    border: 0 none;
    opacity: 0;
    cursor: pointer;
	transition: all ease-in-out 300ms;
}
label.afy-radio-btn-container .checkmark,
label.afy-checkbox-btn-container .checkmark {
    display: flex;
    position: absolute;
    margin: auto auto auto 0;
    height: 16px;
    width: 16px;
    background-color: #fafafa;
    border: 1px solid #ddd;
    border-radius: 50%;
    transition: all ease-in-out 300ms;
}
label.afy-radio-btn-container:hover input[type="radio"] ~ .checkmark {
	background-color: #ecedef;
	border-color: #ecedef;
}
label.afy-checkbox-btn-container:hover input[type="checkbox"] ~ .checkmark {border: 1px solid #28a745;}
label.afy-radio-btn-container input[type="radio"]:checked ~ .checkmark {
	background-color: #28a745;
	border-color: #28a745;
}
label.afy-checkbox-btn-container input[type="checkbox"]:checked ~ .checkmark {border: 1px solid #28a745;}
label.afy-checkbox-btn-container.required input[type="checkbox"]:checked ~ .checkmark {border: 1px solid #8b969d;}
label.afy-radio-btn-container .checkmark:after,
label.afy-checkbox-btn-container .checkmark:after {
 	content: "\f00c";
	display: block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 0rem;
    color: #e4fff0;
    margin: 0.25rem auto 0.25rem auto;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	transform-origin: center;
	transition: all ease-in-out 300ms;
}
label.afy-checkbox-btn-container .checkmark:after {
	font-size: 1.125rem;
	margin: -3px auto auto 1px;
	opacity: 0;
}
label.afy-radio-btn-container input[type="radio"]:checked ~ .checkmark:after {
	font-size: 0.6rem;
	margin: 0.125rem auto 0.125rem auto;
}
label.afy-checkbox-btn-container input[type="checkbox"]:checked ~ .checkmark:after {
	font-size: 1.125rem;
    color: #00924b;
    text-shadow: 0 2px 0 #12161a, 0 -1px 0 #12161a;
    margin: 0.125rem auto auto auto;
	opacity: 1;
}
label.afy-checkbox-btn-container.required input[type="checkbox"]:checked ~ .checkmark:after {color: #8b969d;}
label.afy-radio-btn-container .input-title,
label.afy-checkbox-btn-container .input-title {
	font-size: 0.8rem;
    font-weight: normal;
    line-height: 1.3em;
    margin: auto auto auto 5px;
}
.five-star, .five-star~.numeric {color: #00ab34;}
.four-star, .four-star~.numeric {color: #9abf2e;}
.three-star, .three-star~.numeric {color: #e0d215;}
.two-star, .two-star~.numeric {color: #fda739;}
.one-star, .one-star~.numeric {color: #fd5555;}
.percent-value {
    min-width: 5px;
    height: 5px;
    display: block;
    margin: 1px;
    background-color: #6c757d;
    border-radius: 50em;
}
.five-star .percent-value {background-color: #00ab34;}
.four-star .percent-value {background-color: #9abf2e;}
.three-star .percent-value {background-color: #e0d215;}
.two-star .percent-value {background-color: #fda739;}
.one-star .percent-value {background-color: #fd5555;}
.cookies-acception-bar {
	display: flex;
	flex-wrap: wrap;
    position: fixed;
    bottom: -96px;
    width: 100%;
    padding: 32px;
	background-color: #343a40;
	transition: all ease-in-out 300ms;
	z-index: 9999;
}
.cookies-acception-bar.active {bottom: 0;}
.cookies-acception-bar p {
	font-size: 14px;
	margin: auto 1rem 1rem 0;
}
.cookies-acception-bar .btn-sm {
	line-height: 0;
	margin: auto auto auto 0;
}
body.cookie-alert-added {margin-bottom: 96px;}
@media (min-width:638px) {
	.cookies-acception-bar p {margin: auto 1rem auto auto;}
}
/*********************************************************

BOOTSTRAP 4.2 + (Carousel fade)

*********************************************************/
.carousel-fade .carousel-item {
  opacity: 0;
  transition-property: opacity;
  -webkit-transform: none;
  transform: none;
}

.carousel-fade .carousel-item.active,
.carousel-fade .carousel-item-next.carousel-item-left,
.carousel-fade .carousel-item-prev.carousel-item-right {
  z-index: 1;
  opacity: 1;
}

.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-right {
  z-index: 0;
  opacity: 0;
  transition: 0s 0.6s opacity;
}

@media screen and (prefers-reduced-motion: reduce) {
  .carousel-fade .active.carousel-item-left,
  .carousel-fade .active.carousel-item-right {
    transition: none;
  }
}
/*********************************************************

BOOTSTRAP 4.2 + (Carousel fade) --------- END

*********************************************************/

/*---------------------------------------------------------------
000. DEVICE SAMPLES
---------------------------------------------------------------*/
.phone-sample {
	display: flex;
    position: relative;
	flex-direction: column;
	min-width: auto;
    width: 66px;
    height: 142px;
    margin: auto;
	background-color: #f8f9fa;
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.22) inset;
    border-radius: 8px;
    z-index: 1;
}



/* BUNA BAKILACAK */
.phone-sample::before {
    content: "--";
    position: absolute;
    left: 37px;
    top: 30%;
    font-size: 150px;
    color: #30363b;
    transform: rotate(90deg);
    transform-origin: right top;
}
.phone-sample::after {
    content: "";
    position: absolute;
    top: 15%;
    right: -2px;
    width: 8px;
    height: 64px;
    border-radius: 2px;
    background-color: #30363b;
}
.dark-bezel .phone-sample::before {color: #30363b;}
.dark-bezel .phone-sample::after {background-color: #30363b;}
/* BUNA BAKILACAK */




.phone-sample.old-school {
	width: 58px;
	height: 122px;
}
.builder-screen-phone .screen-only.screen-group {
    width: 240px;
	height: 407px;
	border-radius: 0;
    margin: 27px auto auto auto;
	transform: scale(0.225);
    transform-origin: center top;
}
.dark-bezel .phone-sample {background-color: #343a40;}
.top-group {
    position: absolute;
    left: 50%;
    top: 2px;
    width: 46%;
    height: 0;
    padding: 0 0 6% 0;
    margin: 0 auto;
    background-color: #f8f9fa;
    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.04), -1px 1px 0 rgba(0, 0, 0, 0.04);
    border-radius: 0 0 50em 50em;
    transform: translate(-50%, 0);
    z-index: 2;
}
.old-school .top-group {
	position: relative;
    left: auto;
    margin: 7% auto 9% auto;
    background: none;
    box-shadow: none;
    transform: none;
}
.top-group .aligner {
	display: flex;
    position: absolute;
    width: 100%;
	height: 100%;
	padding: 0 0 5% 0;
}
.dark-bezel .top-group {
	background-color: #52575c;
	border-color: rgba(0, 0, 0, 0.55);
}
.dark-bezel .camera {background-color: #212529;}
.camera {
	width: 5%;
    height: 0;
    padding: 0 0 5% 0;
    margin: auto 1px auto auto;
    background-color: #dbdbdb;
    border-radius: 50%;
}
.sound-output {
	width: 70%;
    height: 0;
    padding: 0 0 4% 0;
    margin: auto auto auto 0;
    background-color: #dbdbdb;
    border-radius: 50em;
}
.dark-bezel .sound-output {background-color: #212529;}
.screen-group {
	display: flex;
    position: relative;
    width: 62px;
    height: 138px;
    margin: auto;
    border-radius: 6px;
	overflow: hidden;
	z-index: 1;
}
.screen-group img {width: 100%;}
.old-school .screen-group {
	width: 52px;
	height: 92px;
	margin: 0 auto;
	border-radius: 0;
}
.device-btn-group {
	position: absolute;
    left: 50%;
    bottom: 3%;
    width: 40%;
    height: 0;
    padding: 0 0 2% 0;
    background-color: #000;
    border-radius: 50em;
	transform: translate(-50%,0%);
	opacity: 0.3;
    z-index: 3;
}
.old-school .device-btn-group {
	width: 34.785%;
    height: 0;
    padding: 0 0 34.785% 0;
    background: none;
	box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.11) inset, 0 1px 0 0 #fff;
	transform: translate(-50%,0%) scale(0.5);
    transform-origin: center 90%;
}
.sample-app-group {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #6B7177;
	z-index: 1;
}
.sample-app-group.list-page {left: 100%;}
.sample-app-group.detail-page {left: 100%;}
.device-status-bar {
    display: flex;
    position: absolute;
    justify-content: space-between;
	width: 100%;
	z-index: 2;
}
.builder-screen-phone .screen-only.screen-group .device-status-bar {padding: 4px 8px;}
.builder-screen-phone.template-sample-container .appcontent > :first-child, .builder-screen-phone.template-sample-container .appcontent > .cover-image + .afy-app-component {padding-top: 20px;}
.device-status-bar .left-indicators,
.device-status-bar .center-indicators,
.device-status-bar .right-indicators {
    display: flex;
    flex-direction: row;
}
.device-status-bar .left-indicators .fa,.device-status-bar .left-indicators .provider {margin: 0 1px 0 0;}
.device-status-bar .right-indicators .fa,.device-status-bar .right-indicators .percentage {margin: 0 0 0 1px;}
.appbar {
	display: flex;
    position: relative;
    font-size: 3px;
    padding: 5px 2px 1px 2px;
    color: #63050e;
    background-color: #c7403b;
    box-shadow: 0 1px 2px rgba(0,0,0,0.22);
    z-index: 1;
}
.appbar .fa {margin: 0 2px 0 0;}
.appbar .sample-app-logo {margin: 0 0 0 auto;}
.appcontent {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    padding: 10px 0 11px 0;
}
.old-school .appcontent {padding: 10px 0 8px 0;}
.appcontent .cover-image {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center top;
	background-image: url("https://cdn.appforyou.io/afy/app-ideas/sports/web/LOnMc8Rp1Qs.jpeg");
    opacity: 0.7;
    z-index: -1;
}
.list-page .appcontent,
.detail-page .appcontent {
	background-image: none;
	padding: 48px 0 0 0;
	background-color: #212529;
}
.grid-container {
	display: flex;
    flex-wrap: wrap;
    padding: 76px 0 0 0;
    margin: 0;
    list-style: none;
    list-style-type: none;
}
.builder-screen-phone .screen-only.screen-group .grid-container {padding-top: 39px;}
.old-school .grid-container {padding-top: 39px;}
.grid-container li {
	position: relative;
    flex: 0 0 33.333333%;
    min-width: 33.333333%;
    width: 33.333333%;
    max-width: 33.333333%;
    padding-bottom: 33.333333%;
}
.grid-container li.app-card {
	display: flex;
    width: 100%;
    height: auto;
    padding: 0;
    margin: 10px 10px 0 10px;
    border: 1px solid #000000;
    overflow: hidden;
}
.grid-container li.app-card:last-child {margin-bottom: 10px;}
.app-card .card-img {
	position: relative;
    width: 64px;
    height: 64px;
    border-right: 1px solid #000000;
    border-radius: 0;
    overflow: hidden;
}
.card-img img {
	position: absolute;
	height: 100%;
	left: 50%;
	transform: translate(-50%,0%);
}
.detail-page .card-img {border-radius: 0;}
.detail-page .card-img img {
	position: relative;
    left: auto;
    width: 100%;
    height: auto;
    transform: none;
}
.detail-page .caption {
	font-size: 0.6rem;
    line-height: 1.2em;
    padding: 10px 10px 6px 10px;
    color: #ff4400;
}
.detail-page .full-text {
    font-size: 0.725rem;
    padding: 0 10px 10px 10px;
}
.detail-page .full-text p {margin-bottom: 6px;}
.grid-container li .aligner {
	display: flex;
    flex-direction: column;
    position: absolute;
    left: 5%;
    top: 5%;
    width: 90%;
    height: 90%;
    background-color: rgba(31, 32, 33, 0.66);
    border-radius: 2px;
}
.grid-container .title {
	font-size: 2px;
    line-height: 1;
    margin: 1px auto auto auto;
    color: rgba(255, 255, 255, 0.5);
}
.app-card .text-group {
    display: flex;
    flex-direction: column;
    width: 170px;
    padding: 0 0 0 10px;
}
.app-card .title {
    height: 16px;
    font-size: 0.8rem;
    font-weight: 700;
    text-align: left;
    margin: auto auto 0 0;
    color: #ff4400;
    overflow: hidden;
}
.app-card .excerpt {
    height: 28px;
    font-size: 0.7rem;
    text-align: left;
    line-height: 1.2em;
    margin: 0 auto auto 0;
	color: #b1bac7;
    overflow: hidden;
}
.grid-container .fa,
.grid-container .fas,
.grid-container .far {
    font-size: 5px;
    line-height: 1;
	margin: auto auto 1px auto;
	color: #c7403b;
}
.bottombar {
    position: absolute;
    width: 100%;
    bottom: 0;
    background-color: #c7403b;
    box-shadow: 0 -1px 0 0 rgba(0,0,0,0.11);
}
.bottombar ul {
    display: flex;
    width: 100%;
    padding: 1px 0 4px 0;
    margin: 0;
    color: #212529;
    list-style: none;
    list-style-type: none;
}
.old-school .bottombar ul,.builder-screen-phone .screen-only.screen-group .bottombar ul {padding: 1px 0;}
.bottombar ul li {
	display: flex;
	flex-direction: column;
	width: 20%;
	text-align: center;
}
.bottombar .fa,.bottombar .far,.bottombar .fas {
	font-size: 3px;
	color: #63050e;
}
.bottombar .title {
	font-size: 2px;
	color: #63050e;
}
.side-menu {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.66);
	opacity: 0;
    z-index: 2;
}
.side-menu-list {
	position: absolute;
	left: -100%;
    width: 75%;
    height: 100%;
	padding: 0;
    margin: 0;
    color: rgba(255, 255, 255, 0.66);
    background-color: #dc3545;
    list-style: none;
    list-style-type: none;
    box-shadow: 1px 0 2px 0 #000;
}
.side-menu-list li ul {
	padding: 0;
    margin: 0;
}
.side-menu-list li ul li {
    display: flex;
    flex-wrap: nowrap;
    padding: 2px 0;
    border-bottom: 0.1px solid rgba(255,255,255,0.11);
}
.side-menu-list li ul li:last-child {border: 0 none;}
.side-menu-list .fa, .side-menu-list .far, .side-menu-list .fas {
    width: 10px;
    font-size: 3px;
    text-align: center;
    margin: auto 1px auto 0;
}
.side-menu-list .title {
    font-size: 2px;
    margin: auto auto auto 0;
}
.side-menu-list .fa.fa-chevron-right {
	width: auto;
    font-size: 2px;
}
.user-area {
	display: flex;
    flex-direction: column;
    border-bottom: 0.1px solid rgba(255,255,255,0.11);
}
.user-area .fa {
    font-size: 6px;
    margin: 6px auto 0 auto;
}
.user-area .title {margin: 2px auto 4px auto;}
.side-menu-list .list {
    position: absolute;
    width: 100%;
}
.builder-screen-phone .phone-sample.old-school {
	width: 23%;
	height: 87%;
}
.tablet-sample {
	display: flex;
    position: relative;
    flex-direction: column;
    z-index: 1;
}
.dark-bezel .tablet-sample {
	background-color: #343a40;
	border-color: #1a1d20;
}
.tablet-sample.old-school .top-group {
	padding: 0 0 8% 0;
    margin: 0 auto;
    background: none;
    border: none;
}
.tablet-sample.old-school .top-group .aligner {padding: 0;}
.tablet-sample .screen-group {
	width: 172.5px;
    height: 230px;
	border: 0.1px solid rgba(0, 0, 0, 0.05);
}
.tablet-sample .device-btn-group {
	transform: scale(0.25) translate(-50%,0%);
	transform-origin: left bottom;
	box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.11) inset, 0 3px 0 0 #fff;
}
.dark-bezel .tablet-sample .device-btn-group {box-shadow: 0 2px 0 0 rgb(0, 0, 0) inset, 0 1px 0 0 #fff;}
.tablet-sample .device-status-bar {
	font-size: 5px;
    padding: 2px 4px;
}
.tablet-sample .appbar {
	font-size: 8px;
    padding: 11px 4px 2px 4px;
}
.tablet-sample .appbar .fa {
	margin: auto 6px auto 0;
	animation: builder_appbar_icon 0s forwards 8.2s;
}
.tablet-sample .appcontent {padding: 0;}
.tablet-sample .appcontent .cover-image {animation: builder_cover_image 0s forwards 8.2s;}
.tablet-sample .grid-container {padding: 94px 2px 0 2px;}
.tablet-sample .grid-container li .aligner {
	border-radius: 6px;
	animation: builder_grid_cell 0s forwards 8.2s, builder_grid_cell_bg 0s forwards 8.2s, builder_grid_cell_icon 0s forwards 8.2s;
}
.tablet-sample .grid-container .fa,
.tablet-sample .grid-container .far,
.tablet-sample .grid-container .fas {font-size: 12px;}
.tablet-sample .grid-container .title {
	font-size: 6px;
    margin: 2px auto auto auto;
	animation: builder_grid_cell_title 0s forwards 8.2s;
}
.tablet-sample .bottombar {animation: builder_bottom_bar_realtime 0s forwards 8.2s;}
.tablet-sample .bottombar ul {padding: 4px 0;}
.tablet-sample .bottombar ul .fa, .tablet-sample .bottombar ul .far, .tablet-sample .bottombar ul .fas {font-size: 8px;}
.tablet-sample .bottombar ul .title {font-size: 5px;}

/*---------------------------------------------------------------
000.1 DEVICE :: ALL IN ONE
---------------------------------------------------------------*/
.all-in-one-computer {
    display: flex;
    flex-direction: column;
    position: relative;
	width: 100%;
    perspective: 600px;
}
.all-in-one-computer:after {
	content: "";
    width: 100%;
    height: 0;
    padding: 0 0 1% 0;
    margin: -5.5% auto auto auto;
    background-color: rgba(0, 0, 0, 0.33);
    border-radius: 50%;
    opacity: 0.2;
    z-index: 0;
}
.computer-screen-group {
	position: relative;
	width: 100%;
    z-index: 2;
}
.computer-screen-group > .screen-bezel {
	display: flex;
	position: relative;
	flex-direction: column;
	width: 100%;
	padding: 2%;
    background-color: #212529;
	border-radius: 6px 6px 0 0;
	overflow: hidden;
}
.all-in-one-computer .screen-bezel > .camera {
	position: absolute;
	top: 1px;
    left: 50%;
    width: 4px;
	height: 4px;
	padding: 0;
    background-color: #6c757d;
    border: 1px solid rgba(0, 0, 0, 0.66);
    transform: translate(-50%,0%);
}
.all-in-one-computer .screen {
    position: relative;
    width: 100%;
    height: 0;
    padding: 0 0 calc(56.25% - 4px) 0;
    border: 1px solid #000;
    border-radius: 1px;
}
.body-metal {
	position: absolute;
    width: 100%;
    height: 15%;
    background: #eee;
    border-width: 0 1px 1px 1px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.11);
    border-radius: 0 0 8px 8px;
}
.all-in-one-computer .screen img {
	position: absolute;
	width: 100%;
	max-height: 100%;
}
.foot-group {
	width: 20%;
    height: 0;
    padding: 0 0 30% 0;
    margin: 0 auto auto auto;
    background: linear-gradient(180deg, #fff 0%, #eee 2%, #d9d9d9 80%, #d6d6d6 83%, #eee 90%);
    border-bottom: 1px solid #aaa;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 2px 0 0 #999;
    transform: rotateX(60deg);
    overflow: hidden;
    z-index: 1;
}
.foot-group:after {
	content: "";
    position: absolute;
    top: -2px;
    width: 100%;
    height: 10px;
    box-shadow: 0 0 32px 2px rgba(0, 0, 0, 0.66);
}
.builder-screen-phone {
	display: flex;
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 2% 0 0 5%;
}
.builder-screen-phone .tablet-sample .appbar {
	animation: builder_appbar 0.3s forwards 3s;
}
.builder-screen-phone .tablet-sample .appbar .fa {
	animation: builder_appbar_icon 0.3s forwards 2s;
}
.builder-screen-phone .tablet-sample .grid-container {animation: builder_grid_container_767 1s forwards 4s;}
.builder-screen-phone .tablet-sample .grid-container li .aligner {
	animation: builder_grid_cell 1s forwards 5s, builder_grid_cell_bg 0.3s forwards 6s, builder_grid_cell_icon 0.3s forwards 7s;
}
.builder-screen-phone .tablet-sample .grid-container .title {
	animation: builder_grid_cell_title 0.3s forwards 8s;
}
.builder-screen-phone .tablet-sample .bottombar {
    animation: builder_bottom_bar 1s forwards 4s;
}
/*---------------------------------------------------------------
000.1 END OF DEVICE :: ALL IN ONE
---------------------------------------------------------------*/

/*---------------------------------------------------------------
000.2 DEVICE :: LAPTOP
---------------------------------------------------------------*/
.laptop-sample {
	position: relative;
	margin: auto;
}
.laptop-screen-bezel {
	display: flex;
    flex-direction: column;
	position: relative;
	width: 220px;
    height: 140px;
    padding: 6px;
    margin: auto auto 0 auto;
    background-color: #212529;
    border-width: 1px 1px 0 1px;
    border-style: solid;
    border-color: #989898;
    border-radius: 8px 8px 0 0;
	overflow: hidden;
}
.laptop-screen-bezel .camera {
	position: absolute;
    top: 2px;
    left: 50%;
    width: 3px;
    height: 3px;
    padding: 0;
    background-color: #343a40;
    border: none;
    transform: translate(-50%,0%);
}
.laptop-screen-group {
	position: relative;
    width: 100%;
	height: 100%;
	box-shadow: 0 0 0 0.25px rgba(255, 255, 255, 0.22);
	border-radius: 1px;
    overflow: hidden;
}
.laptop-screen-group img {
	width: 100%;
}
.laptop-body {
	display: flex;
    position: relative;
    width: 232px;
	height: 8px;
	margin: 0 auto;
    background-color: #000;
    background-image: linear-gradient(0deg, #929292 10%, rgba(0,0,0,0) 100%), linear-gradient(180deg, #ffffff 0%, rgba(0,0,0,0) 100%);
    border-radius: 1px 1px 12px 12px;
	z-index: 1;
}
.laptop-notch {
	width: 9.6%;
    height: 40%;
    margin: 0 auto auto auto;
    background-color: #6f6f6f;
    border: none;
    border-radius: 0 0 50em 50em;
	box-shadow: 0 -3px 3px rgba(0, 0, 0, 0.33) inset;
}
.phone-shadow,
.laptop-shadow {
	position: absolute;
    bottom: -1px;
    width: 100%;
    height: 2px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.11);
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.33)
}
.dark-bezel .phone-shadow,.dark-bezel .laptop-shadow {background-color: rgba(0, 0, 0, 0.22);}
/*---------------------------------------------------------------
000.2 END OF DEVICE :: LAPTOP
---------------------------------------------------------------*/

/*---------------------------------------------------------------
000.3 ANIMATIONS
---------------------------------------------------------------*/
/* .active .grid-container {
	animation-name: anim_grid;
	animation-delay: 1s;
	animation-duration: 14s;
	animation-iteration-count: infinite;
}
@keyframes anim_grid {
	0% {padding-top: 290px;}
	2.5% {padding-top: 130px;}
	10% {padding-top: 130px;}
	12.5% {padding-top: 290px;}
}
@keyframes anim_grid_3 {
	0% {padding-top: 302px;}
	2.5% {padding-top: 120px;}
	10% {padding-top: 120px;}
	12.5% {padding-top: 302px;}
}
.active .side-menu {
	animation-name: anim_side_menu;
	animation-delay: 4s;
	animation-duration: 14s;
	animation-iteration-count: infinite;
}
@keyframes anim_side_menu {
	0% {opacity: 0;}
	2.5% {opacity: 1;}
	10% {opacity: 1;}
	12.5% {opacity: 0;}
}
.active .side-menu-list {
	animation-name: anim_side_menu_list;
	animation-delay: 4s;
	animation-duration: 14s;
	animation-iteration-count: infinite;
}
@keyframes anim_side_menu_list {
	0% {left: -100%;}
	4% {left: 0%;}
	8% {left: 0%;}
	11.25% {left: -100%;}
}
.active .list-page {
	animation-name: anim_list_page;
	animation-delay: 5.3s;
	animation-duration: 14s;
	animation-iteration-count: infinite;
}
@keyframes anim_list_page {
	0% {left: 100%;}
	5% {left: 0%;}
	10% {left: 0%;}
	15% {left: 0%;}
	
	35% {left: 0%;}
	40% {left: 100%;}
}
.active .list-page .grid-container {
	animation-name: anim_list_page_list;
	animation-delay: 6.6s;
	animation-duration: 14s;
	animation-iteration-count: infinite;
}
@keyframes anim_list_page_list {
	0% {margin-top: 0%;}
	4% {margin-top: -64%;}
	6% {margin-top: -64%;}
	10% {margin-top: 0%;}
}
.active .detail-page {
	animation-name: anim_detail_page;
	animation-delay: 8.4s;
	animation-duration: 14s;
	animation-iteration-count: infinite;
}
@keyframes anim_detail_page {
	0% {left: 100%;}
	5% {left: 0%;}
	10% {left: 0%;}
	15% {left: 100%;}
}
@keyframes scroll_more_btn {
	0% {bottom: 20px;opacity: 1;}
	50% {bottom: 15px;opacity: 1;}
	100% {bottom: 0;opacity: 0;}
}
@keyframes builder_grid_container_767 {
	0% {padding: 43px 1px 1px 1px;}
	100% {padding: 49px 1px 1px 1px;}
}
@keyframes builder_grid_container_1200 {
	0% {padding: 60px 1px 1px 1px;}
	100% {padding: 71px 1px 1px 1px;}
}
@keyframes builder_grid_container_1300 {
	0% {padding: 92px 1px 1px 1px;}
	100% {padding: 104px 1px 1px 1px;}
}
@keyframes builder_grid_container_tablet_realtime_767 {
	0% {padding: 100px 1px 1px 1px;}
	100% {padding: 124px 1px 1px 1px;}
}
@keyframes builder_grid_container_phone_realtime_767 {
	0% {padding: 106px 1px 1px 1px;}
	100% {padding: 124px 1px 1px 1px;}
}
@keyframes builder_grid_container_phone_realtime_1200 {
	0% {padding: 153px 1px 1px 1px;}
	100% {padding: 171px 1px 1px 1px;}
}
@keyframes builder_grid_container_phone_realtime_1300 {
	0% {padding: 182px 2px 2px 2px;}
	100% {padding: 200px 2px 2px 2px;}
} */
/*---------------------------------------------------------------
000.3 END OF ANIMATIONS
---------------------------------------------------------------*/
.sample-container {
	display: flex;
	position: relative;
	margin: auto auto 32px 0;
}
.sample-container .device {
	position: relative;
	top: 40vh;
	opacity: 0;
	transition: top ease-in-out 1200ms, opacity ease-in-out 1800ms;
}
.section.active .sample-container .device {
	top: 0;
	opacity: 1;
}
.sample-container .device .phone-sample {
	width: 256px;
    height: 536px;
    border-radius: 38px;
	margin: auto;
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.33) inset;
}
.sample-container .device .phone-sample .top-group {top: 8px;}
.sample-container .device .phone-sample .screen-group {
	width: 240px;
    height: 520px;
	border-radius: 30px;
}
.sample-container .device.dark-bezel .phone-sample .screen-group {box-shadow: 0 0 10px rgba(255, 255, 255, 0.33);}

.show-all-btn .btn {
	display: flex;
	position: relative;
	width: 100%;
	padding: 12px;
	margin: auto;
}
.show-all-btn:hover {box-shadow: none !important;}
.show-all-btn .btn-icon {margin: auto 2px auto auto;}
.show-all-btn .btn-title {margin: auto auto auto 0;}
.container-fluid {position: relative;}

.sample-container .device .tablet-sample {
    width: 530px;
    height: 793px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.11), 0 0 10px rgba(0, 0, 0, 0.33) inset;
    border-radius: 38px;
}
.sample-container .tablet-sample .top-group {
	position: relative;
    left: auto;
    top: auto;
    margin: 1.5% auto 0 auto;
    background: none;
    box-shadow: none;
    border: none;
    border-radius: 0;
    transform: none;
}
.sample-container .tablet-sample .top-group .aligner {padding: 0;}
.sample-container .tablet-sample .screen-group {
	width: 497px;
    height: 663px;
    margin: 0 auto;
    border-radius: 2px;
}
.sample-container .tablet-sample .device-btn-group {
	position: relative;
    left: auto;
    top: auto;
    bottom: auto;
    width: 50px;
	height: 50px;
	padding: 0;
    margin: auto;
    background: none;
    transform: none;
}
.general-preloader {
    display: flex;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    z-index: 9;
}
.general-preloader .preloader-img,
.all-in-one-computer .general-preloader .preloader-img,
.phone-sample .general-preloader .preloader-img {
	position: relative;
	width: 40px;
	height: 40px;
	margin: auto;
}
.tablet-sample .general-preloader .preloader-img {transform: scale(5.7);}
.phone-sample .general-preloader .preloader-img {transform: scale(5);}
.laptop-sample .general-preloader .preloader-img {transform: scale(1);}

.laptop-sample .general-preloader.pwa-sample-preloader .preloader-img {transform: scale(1);}
.phone-sample .general-preloader.pwa-sample-preloader .preloader-img {transform: scale(3.622);}

/*---------------------------------------------------------------
01. HOMEPAGE
---------------------------------------------------------------*/
.home-page h3 {
    font-size: 18px;
    font-weight: 700;
}
.home-page .afy-btn-group {margin: 16px 0 0 0;}
.home-page .row.header .afy-btn-group {margin: 0 0 16px 0;}
.device-container.computer {
	display: flex;
	position: relative;
	top: 10vh;
	margin: 0 0 0 -8px;
	opacity: 0;
	transition: top ease-in-out 1200ms, opacity ease-in-out 1800ms;
}
.section.active .device-container.computer,
.hero-image.active .device-container.computer {
	top: 0;
	opacity: 1;
}
.device-container.phone {
	display: flex;
	position: relative;
	top: -10vh;
	margin: 0 0 0 4px;
	opacity: 0;
	transition: top ease-in-out 1200ms, opacity ease-in-out 1800ms;
}
.section.active .device-container.phone,
.hero-image.active .device-container.phone {
	top: 0;
	opacity: 1;
}
.navbar + .section.container-fluid {
	padding-top: 48px;
}
.section.container-fluid {
	display: flex;
	position: relative;
	flex-direction: column;
	width: 100%;
	padding: 0;
}
.section.container-fluid > .container {
	display: flex;
	flex-direction: column;
	padding: 48px 16px;
	margin: auto;
}
.section.container-fluid .header > .title {
	position: relative;
    font-size: 20px;
    line-height: normal;
    margin: 0 0 10px 0;
}
.section.container-fluid .header > .title strong {font-weight: 800;}
.section.container-fluid .header > .caption {
	line-height: normal;
    margin: 0 0 16px 0;
	color: #607D8B;
}
.device-browser-skin {
    display: flex;
    position: absolute;
    width: 100%;
    height: auto;
    padding: 24px 4px 4px 4px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #ddd;
    z-index: 1;
}
.device-browser-skin.device-ui-dark {
	border-color: #222427;
	background-color: #343a40;
}
.device-browser-skin.bottom-group {
	bottom: 0;
    padding: 4px 4px 20px 4px;
    border-top: 1px solid #ddd;
    border-bottom: none;
}
.device-browser-skin.bottom-group .device-browser-helper-icon {
	position: relative;
	width: 20%;
	text-align: center;
}
.device-browser-skin .url-input {
    display: flex;
    position: relative;
    max-width: 100%;
    font-size: 11px;
    padding: 4px 6px;
    margin: 5px 4px 4px 4px;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}
.device-browser-skin.device-ui-dark .url-input {border-color: #4b545d;}
.device-browser-skin .text {opacity: 0.6;}
.device-browser-skin .device-browser-helper-icon {
    position: absolute;
    top: 0;
    right: 0;
    padding: 7px;
    color: #acb1b5;
    background-color: #f8f9fa;
    z-index: 1;
}
.device-browser-skin.device-ui-dark .device-browser-helper-icon {background-color: #343a40;}
.web-tamplate-frame {
	width: 225%;
    height: 225%;
    transform: scale(0.44444444);
    transform-origin: left top;
    border: none;
}
.laptop-screen-group .web-tamplate-frame {
	width: 555%;
    height: 555%;
    transform: scale(0.18018018018018);
}
.phone-sample .web-tamplate-frame {
	min-width: 151.5225%;
    width: 151.5225%;
    min-height: 151.515%;
    height: 151.515%;
	padding: 94px 0 78px 0;
	transform: scale(0.66);
}
.iphone-x-etc .phone-sample .web-tamplate-frame {padding: 0;}
.phone-sample .web-tamplate-frame.pwa-sample-frame {padding: 0;}
.web-tmp-live-btn-container {
	display: flex;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
	bottom: 0;
	opacity: 0;
	background-color: rgba(255, 255, 255, 0.95);
	transition: opacity ease-in-out 300ms;
	z-index: 1;
}
.web-tmp-live-btn {
	display: flex;
    line-height: normal;
    text-decoration: none;
    padding: 8px 12px;
    margin: auto;
    color: #28a745;
    border: 1px solid #28a745;
    border-radius: 5px;
    transition: color ease-in-out 300ms, background-color ease-in-out 300ms;
}
.web-tmp-live-btn-container:hover {
    text-decoration: none;
    opacity: 1;
}
.web-tmp-live-btn-container.disabler:hover {opacity: 0;}
.web-tmp-live-btn:hover {
	text-decoration: none;
    color: #fff;
    background-color: #28a745;
}
.web-tmp-live-btn .btn-icon {margin: auto 2px auto auto;}
.web-tmp-live-btn .btn-title {
	font-size: 12px;
    margin: auto auto auto 2px;
}

/*---------------------------------------------------------------
01.01 LANDING SECTION
---------------------------------------------------------------*/
#landingSection {background-color: #d9dbdc;/* background-color: #28a745; */}
#landingSection .web-tmp-live-btn {transform: scale(0.5);}
#landingSection .color-container {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #f8f9fa;
}
#landingSection > .container {overflow: visible;}
#landingSection .container {padding: 16px;}
#landingSection .phone-sample, #landingSection .tablet-sample {box-shadow: 8px -2px 8px rgba(0, 0, 0, 0.5);}
#landingSection .builder-screen-phone .phone-sample {box-shadow: 0 0 2px rgba(0, 0, 0, 0.22) inset, 0 0 0 0.4px rgba(0, 0, 0, 0.05) inset;}
#landingSection .phone-sample::before,#landingSection .phone-sample::after {content: none;}
#landingSection .loader-container::after,
#featureSection .hero-container::after {
	position: absolute;
    display: block;
    content: "";
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-image: url(../images/tram.png);
}
#landingSection h1 {
	width: auto;
	font-size: 36px;
	/* font-size: 64px; */
    font-weight: 300;
    line-height: 1;
	margin: 0 0 8px 0;
	color: inherit;
}
#landingSection h1 > span {
	display: block;
	line-height: 1;
}
#landingSection h1 .small {font-size: 20px;/* font-size: 32px; */}
#landingSection h1 .strong {font-weight: 700;}
#landingSection h2 {
	width: auto;
	font-size: 14px;
	/* font-size: 18px; */
	line-height: normal;
	margin: 0;
}
#landingSection .centered-container {flex-direction: column;}
#landingSection .device-container {
	display: flex;
	flex-direction: column;
    position: relative;
    z-index: 2;
}
#landingSection .device-samples {
	display: flex;
    position: absolute;
	margin: -20px 0 0 0;
}
#landingSection .device-samples .device {position: relative;}
#landingSection .sample-container.sample-tablet {
	transform: scale(.35);
    margin: -165px -280px -345px -150px;
    z-index: 10;
}
#landingSection .sample-container.sample-tablet .phone-shadow {bottom: 60px;}
#landingSection .device-samples .device.tablet {
	transform: scale(0.5);
    transform-origin: left center;
    margin: 36px auto 0 -8px;
    z-index: 4;
}
#landingSection .sample-container.sample-phone {
	transform: scale(.25);
	transform-origin: left bottom;
	margin: -200px -130px 0 20px;
	z-index: 10;
}
#landingSection .device-samples .device.phone {
	transform: scale(.8);
    margin: auto auto 48px -128px;
    z-index: 4;
}
#landingSection .device-samples .device.laptop {
	top: 40px;
	transform-origin: left bottom;
    margin: auto auto 76px -60px;
}
#landingSection .device-samples .phone-sample .cover-image {
	animation: builder_cover_image 0s forwards 8.2s;
}
#landingSection .device-samples .phone-sample .grid-container {
	animation: builder_grid_container_phone_realtime_767 0s forwards 8.2s;
}
#landingSection .device-samples .phone-sample .aligner {
	animation: builder_grid_cell 0s forwards 8.2s, builder_grid_cell_bg 0s forwards 8.2s, builder_grid_cell_icon 0s forwards 8.2s;
}
#landingSection .device-samples .phone-sample .grid-container .title {
	animation: builder_grid_cell_title 0s forwards 8.2s;
}
#landingSection .device-samples .phone-sample .bottombar {
	animation: builder_bottom_bar_realtime 0s forwards 8.2s;
}
#landingSection .loader-container {
    display: flex;
    position: absolute;
    left: 15px;
    top: 15px;
    right: 15px;
    bottom: 10px;
	background-color: #fff;
	background-image: linear-gradient(0deg, #fbbe3b 0%, rgba(0,0,0,0) 60%), linear-gradient(180deg, #007bff 0%, rgba(0,0,0,0) 50%), linear-gradient(90deg, #ea0081 0%, rgba(0,0,0,0) 100%), linear-gradient(270deg, #28a745 0%, rgba(0,0,0,0) 100%);
    opacity: 0;
    z-index: 4;
	animation: loader_container_1 0.3s forwards 8s,loader_container_2 0.5s forwards 9.2s;
}
#landingSection .phone-sample .loader-container {
	left: 6px;
    top: 6px;
    right: 6px;
    bottom: 6px;
    border-radius: 10px;
}
.spinner {
    position: relative;
    width: 60px;
    height: 60px;
    margin: auto auto auto auto;
}
#landingSection .hero-container {
	position: relative;
	margin: 110px 0 0 0;
	z-index: 1;
}
#landingSection .laptop .loader-container {
	left: 20px;
    top: 20px;
    right: 20px;
    bottom: 20px;
}
#landingSection .laptop-sample-navbar {animation: laptop_navbar 0s forwards 8.5s;}
#landingSection .web-side-menu {animation: laptop_web_side_menu 0s forwards 8.5s;}
#landingSection .cover-image {animation: builder_cover_image_laptop 0s forwards 8.5s;}
#landingSection .laptop-sample-content {animation: builder_grid_cell_bg 0s forwards 8.5s;}
#landingSection .laptop-sample-content h1 {
	font-size: 0.7rem;
    font-weight: 800;
    width: 60%;
    margin: 0.5rem auto 0.25rem auto;
    color: rgba(255, 73, 0, 0.8);
	
	animation: builder_grid_cell_icon 0s forwards 8.5s;
}
/* .pwa-sample .device-status-bar {color: rgba(0,0,0,0.66);}
.pwa-sample ul.laptop-sample-navbar-nav.user {
	margin-left: auto;
	color: #6f42c1;
}
.pwa-sample .laptop-sample-content .title {color: #6f42c1;}
.pwa-sample .appbar {
	color: #6f42c1;
    background-color: rgba(255, 255, 255, 0.66);
}
.pwa-sample .grid-container {padding-top: 70px;}
.pwa-sample .grid-container li .aligner {
	background-color: rgba(255, 255, 255, 0.8);
	border-radius: 50em;
}
.pwa-sample .grid-container .fa, .pwa-sample .grid-container .fas, .pwa-sample .grid-container .far {color: #6f42c1;}
.pwa-sample .grid-container .title {color: #343a40;}
.pwa-sample .bottombar {background-color: #917cbe;}
.pwa-sample .bottombar ul {padding: 3px 0 6px 0;}
.pwa-sample .bottombar .fa, .pwa-sample .bottombar .far, .pwa-sample .bottombar .fas {
	font-size: 4px;
    color: rgba(255, 255, 255, 0.66);
}
.pwa-sample .bottombar .title {color: rgba(255, 255, 255, 0.5);} */

/* @keyframes builder_screen_phone {
	0% {box-shadow: 0 0 4px 0 rgb(0,0,0);}
	100% {box-shadow: 0 0 6px 1px rgba(0,255,91,1);}
}
@keyframes builder_appbar {
	0% {color: rgba(255, 73, 0, 0.8);}
	100% {color: rgba(185, 141, 119, 1);}
}
@keyframes laptop_navbar {
	0% {
		color: rgba(255, 73, 0, 0.8);
		background-color: rgba(19, 18, 18, 0.8);
	}
	100% {
		color: rgba(185, 141, 119, 1);
		background-color: rgba(19, 18, 18, 0);
	}
}
@keyframes laptop_web_side_menu {
	0% {
		color: #212529;
		background-color: rgba(255, 73, 0, 0.8);
	}
	100% {
		color: rgba(185, 141, 119, 1);
		background-color: rgba(33, 37, 41, 0.44);
	}
}
@keyframes builder_appbar_icon {
	0% {
		color: rgba(255, 73, 0, 0.8);
		background-color: rgba(19, 18, 18, 0.8);
	}
	100% {
		color: rgba(33,37,41,1);
		background-color: rgba(19, 18, 18, 0);
	}
}
@keyframes builder_grid_cell {
	0% {
		border-color: rgba(37,22,25,0);
		border-radius: 2px;
	}
	100% {
		border-color: rgba(37,22,25,0.66);
		border-radius: 50%;
	}
}
@keyframes builder_grid_cell_title {
	0% {color: rgba(255, 255, 255, 0.66);}
	100% {color: rgba(185, 141, 119, 1);}
}
@keyframes builder_grid_cell_icon {
	0% {color: rgba(255, 51, 0, 0.8);}
	100% {color: rgba(151, 58, 77, 1);}
}
@keyframes builder_grid_cell_bg {
	0% {background-color: rgba(19, 18, 18, 0.8);}
	100% {background-color: rgba(33, 37, 41, 0.8);}
}
@keyframes builder_cover_image {
	0% {background-image: url("../images/sample-app-images/gym-vertical.jpg");}
	100% {background-image: url("../images/sample-app-images/gym-7-vertical.jpg");}
}
@keyframes builder_cover_image_laptop {
	0% {background-image: url("../images/sample-app-images/gym-horizontal.jpg");}
	100% {background-image: url("../images/sample-app-images/gym-7-horizontal.jpg");}
}
@keyframes builder_bottom_bar {
	0% {bottom: 0;}
	100% {bottom: -20px;}
}
@keyframes builder_bottom_bar_realtime {
	0% {bottom: 0;}
	100% {bottom: -60px;}
}
@keyframes builder_grid_container {
	0% {padding: 112px 1px 1px 1px;}
	100% {padding: 130px 1px 1px 1px;}
}
@keyframes builder_grid_container_phone_realtime {
	0% {padding: 173px 1px 1px 1px;}
	100% {padding: 198px 1px 1px 1px;}
}
@keyframes builder_grid_container_tablet_realtime {
	0% {padding: 171px 1px 1px 1px;}
	100% {padding: 208px 1px 1px 1px;}
}
@keyframes loader_container_1 {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@keyframes loader_container_2 {
	0% {opacity: 1;}
	100% {opacity: 0;}
} */

/*---------------------------------------------------------------
01.02 HOW TO SECTION
---------------------------------------------------------------*/
#howToSection {z-index: 2;}
#howToSection > .container {padding-bottom: 0;}
#howToSection .title {
	max-width: 820px;
	text-align: center;
    font-weight: 700;
	letter-spacing: -0.025em;
	margin: 0 auto 16px auto;
    color: #e83e8c;
	background-image: -webkit-linear-gradient(left, #ea0081 0%, rgba(0,0,0,0) 50%), -webkit-linear-gradient(bottom, #00bbf7 0%, rgba(0,0,0,0) 60%), -webkit-linear-gradient(right, #28a745 0%, rgba(0,0,0,0) 50%), -webkit-linear-gradient(top, #fbbe3b 0%, rgba(0,0,0,0) 100%);
    background-image: -o-linear-gradient(left, #ea0081 0%, rgba(0,0,0,0) 40%), -o-linear-gradient(bottom, #00bbf7 0%, rgba(0,0,0,0) 60%), -o-linear-gradient(right, #28a745 0%, rgba(0,0,0,0) 40%), -o-linear-gradient(top, #fbbe3b 0%, rgba(0,0,0,0) 100%);
    background-image: linear-gradient(90deg, #ea0081 0%, rgba(0,0,0,0) 40%), linear-gradient(0deg, #00bbf7 0%, rgba(0,0,0,0) 60%), linear-gradient(270deg, #28a745 0%, rgba(0,0,0,0) 40%), linear-gradient(180deg, #fbbe3b 0%, rgba(0,0,0,0) 100%);
    background-size: 400% 400%;
    background-position: 0% 0%;
    background-color: #dc3545;
    animation: Gradient 30s ease infinite;
    -webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	background-clip: text;
}
#howToSection .all-in-one-computer {
	top: 40vh;
	opacity: 0;
	transition: top ease-in-out 1800ms, opacity ease-in-out 1800ms;
}
#howToSection.active .all-in-one-computer {
	top: 0;
	opacity: 1;
}
#howToSection .aligner {
    position: absolute;
    display: flex;
    flex-direction: column;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}
#howToSection .carousel, #howToSection .carousel-inner, #howToSection .carousel-item {height: 100%;}
#howToSection .styled-carousel-indicator {
	width: auto;
    padding: 0 8px 48px 8px;
    background-color: #fff;
    margin: 16px -8px 0 -8px;
    box-shadow: none;
    z-index: 1;
}
#howToSection .styled-carousel-indicator .col-md-4 {
	padding: 0;
	cursor: pointer;
}
#howToSection .styled-carousel-indicator .col-md-4 .aligner {
	display: flex;
    position: relative;
    flex-direction: column;
    width: 100%;
    height: 100%;
    text-align: center;
	padding: 16px;
	transition: all ease-in-out 300ms;
}
#howToSection .styled-carousel-indicator .col-md-4:hover .aligner {
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.22);
	border-radius: 16px;
	transform: scale(1.02);
}
#howToSection .styled-carousel-indicator .icon {
	font-size: 24px;
	margin: auto auto 16px auto;
}
#howToSection .styled-carousel-indicator .text-group {margin: 0 auto auto auto;}
#howToSection .styled-carousel-indicator p {margin: auto auto 8px auto;}
#howToSection .styled-carousel-indicator p:last-child {margin-bottom: 0;}
#howToSection .carousel-control-prev,
#howToSection .carousel-control-next,
.styled-carousel .carousel-control-prev,
.styled-carousel .carousel-control-next {
	top: calc(50% + 4px);
    bottom: auto;
    width: 24px;
    height: auto;
    font-size: 12px;
    padding: 6px 0;
    margin: auto -8px;
    color: var(--white);
    background-color: #343a40;
    border-radius: 24px;
    transform: translate(0,-50%);
    transition: all ease-in-out 300ms;
    opacity: 1;
}
.styled-carousel .carousel-control-prev, .styled-carousel .carousel-control-next {
	top: calc(11.25% + 8px);
	margin: auto 8px;
}
#howToSection .carousel-control-prev::before {margin-right: 2px;}
#howToSection .carousel-control-next::before {margin-left: 2px;}
#builderScreens:hover .carousel-control-prev,#builderScreens:hover .carousel-control-next {opacity: 0.3;}
#howToSection .carousel-control-prev:hover,#howToSection .carousel-control-next:hover {opacity: 1;}

/*---------------------------------------------------------------
01.03 PLUGIN SECTION
---------------------------------------------------------------*/
.plugin-blocks .title {color: #28a745;}
.plugin-blocks ul {
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0;
    margin: 0 -8px;
	list-style-type: none;
    list-style: none;
}
.plugin-blocks ul li {
	display: flex;
    width: 100%;
    padding: 8px;
}
.plugin-blocks ul li.show-all-btn {
    margin: auto;
    color: #28a745;
    background: none;
    cursor: default;
}
.plugin-blocks ul li.show-all-btn::after {content: none;}
.plugin-blocks ul li .container {
	padding: 0;
    margin: 0;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 3px 3px -2px rgba(0,0,0,.2), 0 3px 4px 0 rgba(0,0,0,.14), 0 1px 8px 0 rgba(0,0,0,.12);
}
.plugin-blocks ul li a {
	display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}
.plugin-blocks ul li.show-all-btn a {flex-direction: row;}
.plugin-blocks .basic-group {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0;
    margin: 0 auto 0 auto;
}
.plugin-blocks .plugin-icon {
    width: 100%;
    font-size: 32px;
    text-align: left;
    padding: 16px;
    margin: 0;
    border-radius: 5px 5px 0 0;
}
.plugin-blocks .text-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 16px;
}
.plugin-item .plugin-name {
    font-size: 16px;
    font-weight: 800;
	margin: 0 0 4px 0;
	color: #8899aa;
}
.text-container .author {margin: 0 0 4px 0;}
.plugin-blocks p {
	position: relative;
	height: 100%;
	color: #657687;
}
.plugin-blocks p:after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: -webkit-linear-gradient(bottom, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
	background: -o-linear-gradient(bottom, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
	background: linear-gradient(0deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#00ffffff',GradientType=0);
}
.plugin-blocks p:last-child {margin: 0;}
.plugin-blocks .divider {
	margin: auto 0 0 0;
	border-color: rgba(0, 0, 0, 0.07);
}
.plugin-blocks .basic-group .divider {margin: 0;}
.plugin-blocks .footer-group {margin: 0;}
.plugin-blocks .footer-group .rating {
	display: flex;
    position: relative;
    justify-content: space-between;
    font-size: 11px;
    padding: 8px 16px;
}
.plugin-blocks .active .action-group:after {border-width: 0 6px 6px 6px;}
.action-group .btn {
	font-size: 12px;
    padding: 4px 8px 4px 8px;
    margin: 5px 8px 5px auto;
    color: #8b9298;
	background-color: transparent;
    border-radius: 15px;
	transition: all ease-in-out 300ms;
}
.action-group .btn:hover {
	padding: 4px 14px 4px 14px;
	color: #fff;
    background-color: #8b9298;
}
.action-group .btn.collapser {
	display: none;
	font-size: 0.875rem;
    text-align: center;
    padding: 3px 7.5px 3px 7.5px;
    margin: auto 8px auto auto;
    color: #28a745;
    background-color: transparent;
    border: 1px solid #28a745;
	border-radius: 11px;
    transition: all ease-in-out 300ms;
}
.active .action-group .collapser,
.action-group .collapser:hover,
.action-group .collapser:focus,
.action-group .collapser.focus {
	color: #fff;
	background-color: #28a745;
	box-shadow: none;
	transition: box-shadow ease-in-out 0;
}
.action-group .collapser:active,
.action-group .collapser.active {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.33);
}
.plugin-blocks .accordion {
	position: relative;
	width: 100%;
	margin: -6px 0 0 0;
	z-index: 1;
}
.plugin-blocks .quick-info {
	position: relative;
    display: flex;
    flex-direction: column;
	left: 0;
	top: 0;
	right: 0;
    height: 0;
	margin: 0;
	background-color: #fff;
    overflow: hidden;
}
.plugin-blocks .quick-info.show {height: auto;}
.quick-info > .container {
	display: flex;
	flex-direction: column;
    padding: 0;
	border-width: 1px 1px 1px 1px;
	border-style: solid;
	border-color: #28a745;
}
.quick-info .info-header {
	display: flex;
    flex-direction: row;
	min-height: 61px;
    padding: 15px 15px 15px 15px;
    border-bottom: 1px solid #e3e3e3;
}
.quick-info .info-header .btn {padding: 0.25rem 1rem 0.25rem 1rem;}
.name-author-info {
	display: flex;
    flex-direction: row;
}
.name-author-info .plugin-name {
    font-size: 1.5rem;
    font-weight: 800;
    margin: auto 0 auto 0;
    color: #8899aa;
}
.name-author-info .author-name {
    font-size: 1rem;
    font-weight: 600;
    margin: auto 0 auto 0;
    color: #8899aa;
}
.info-header .btn {margin: auto 0 auto auto;}
.quick-info .info-body {
	display: flex;
	flex-direction: row;
}
.quick-info .basic-info {
	display: flex;
	flex-direction: column;
}
.basic-info .better {color: #9abf2e;}
.basic-info .logo-icon {margin: 0;}
.basic-info .logo-icon .icon {
	display: block;
    height: auto;
    padding: 20px 20px 20px 20px;
}
/* .basic-info .price-group {
    width: 100%;
    font-size: 1.125rem;
    text-align: center;
    padding: 10px 15px 10px 15px;
    border-top: 1px solid #e3e3e3;
    color: #96a2b3;
} */
.basic-info .rating {
	padding: 10px 15px 10px 15px;
    border-top: 1px solid #e3e3e3;
}
.basic-info .stars {
	display: flex;
	flex-direction: row;
	font-size: 14px;
	margin: 5px auto;
}
.stars .fas,.stars .far {margin: auto 5px auto 0;}
.stars .fas:last-child,.stars .far:last-child {margin: auto 0 auto 0;}
.basic-info .numeric {
	font-size: 2rem;
	font-weight: 300;
	text-align: center;
}
.basic-info .total-choise {
	font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.25em;
    color: #96a2b3;
}
.about-plugin {
    padding: 15px 15px 15px 15px;
    border-left: 1px solid #e3e3e3;
}
.about-plugin .title {
    font-size: 1rem;
    font-weight: 800;
	text-align: left;
    margin: 0 0 5px 0;
    color: #8899aa;
}
.quick-info .preview-container {
    min-width: 410px;
    width: 410px;
	border-left: 1px solid #e3e3e3;
}
.quick-info .preview-container .carousel-inner {
	float: left;
	width: 300px;
    margin: 0 auto 0 0;
}
.quick-info .preview-main {padding: 15px 15px 15px 15px;}
.quick-info img {
	width: 100%;
	height: auto;
}
.preview-main img {border-radius: 8px;}
.quick-info .preview-thumbnail-group {
	display: flex;
    flex-direction: column;
    position: relative;
	float: left;
    bottom: auto;
    width: 109px;
	height: 100%;
    margin: 0 0 0 auto;
}
.preview-thumbnail-group .thumbnail {
	position: relative;
	min-height: 33.33337%;
	padding: 15px 15px 15px 15px;
	border-width: 0 0 1px 1px;
	border-style: solid;
	border-color: #e3e3e3;
	cursor: pointer;
}
.preview-thumbnail-group .thumbnail.active {
	background-color: #eeeeee;
	border-color: #c8c8c8;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.22) inset;
}
.preview-thumbnail-group .thumbnail:last-child {border-width: 0 0 0 1px;}
.preview-container .thumbnail:after {
    content: "";
    position: absolute;
	left: 50%;
	top: 0;
    border-width: 6px 0 6px 0;
    border-style: solid solid solid solid;
	border-color: transparent;
	transform: translate(-50%, 0);
    transition: all ease-in-out 300ms;
}
.preview-container .thumbnail.active:after {
    top: -6px;
	border-width: 0 6px 6px 6px;
	border-color: transparent transparent #c1c1c1 transparent;
}
.thumbnail img {border-radius: 4px;}

/*---------------------------------------------------------------
01.04 WEB & PWA SECTION
---------------------------------------------------------------*/
#webPwaSection {overflow: hidden;}
#webPwaSection .header > .title {color: #6f42c1;}
.supported-platform {
	display: flex;
	padding: 0 0 16px 0;
}
.supported-platform img {
    height: 32px;
	margin: auto 0;
}
.supported-platform img.pwa-logo {height: 24px;}
#webPwaSection .sample-container {margin: 0;}
#webPwaSection .template-sample-container .device-container.phone {
	position: absolute;
    transform: scale(0.27612);
    transform-origin: left top;
    left: 222px;
}

/*---------------------------------------------------------------
01.05 MORE SECTION
---------------------------------------------------------------*/
#moreOptionsSection .brief-container {
	display: flex;
	position: relative;
	flex-direction: column;
	text-align: left;
}
#moreOptionsSection .brief-container .title {
	font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
    margin: 0 auto 8px 0;
}
#moreOptionsSection .brief-container .title strong {font-weight: 700;}
#moreOptionsSection .brief-container ul {
    padding: 0;
    margin: 0;
    list-style: none;
    list-style-type: none;
}
#moreOptionsSection .brief-container ul li {
	padding: 10px 0;
    margin: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.11);
}
#moreOptionsSection .brief-container ul li:last-child {
	border: 0 none;
	padding-bottom: 0;
}
#moreOptionsSection li h2 {
	font-size: 16px;
	font-weight: 700;
	margin: 0 0 4px 0;
}
#moreOptionsSection .brief-container ul li p:last-child {margin: 0;}

/*---------------------------------------------------------------
01.06 SAMPLE APP SECTION
---------------------------------------------------------------*/

/*---------------------------------------------------------------
01.07 GUIDE / IDEAS SECTION
---------------------------------------------------------------*/
.card-list {
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    list-style: none;
    list-style-type: none;
}
.card-list li {
	position: relative;
    display: flex;
    width: 100%;
    margin: 0 0 16px 0;
    border-radius: 5px;
    box-shadow: 0 3px 3px -2px rgba(0,0,0,.2), 0 3px 4px 0 rgba(0,0,0,.14), 0 1px 8px 0 rgba(0,0,0,.12);
    transition: all ease-in-out 300ms;
    z-index: 1;
}
.card-list li.show-all-btn {
	border-radius: 0;
    padding: 0;
    margin: 0;
	box-shadow: none;
	cursor: default;
}
.card-list li.show-all-btn::after {content: none;}
.card-list .card {
	background-color: transparent;
    border: 0 none;
	border-radius: 0;
}
.card-list .card-header {
    font-size: 16px;
    font-weight: 800;
	padding: 8px 16px;
	background: none;
    border: 0 none;
}
.card-list .card-img {
	border-width: 1px 0 1px 0;
    border-style: solid;
	border-color: rgba(0, 0, 0, 0.066);
	border-radius: 0;
}
.card-list .card-body {padding: 8px 16px;}
.card-list .btn-container {
    margin: 15px auto -30px auto;
    background-color: #242b33;
    border: 5px solid #242b33;
    border-radius: 20px;
}

/*---------------------------------------------------------------
01.08 ALL CODES OF THE WORLD SECTION
---------------------------------------------------------------*/
#allCodesSection > .container {
	position: relative;
	padding: 16px;
}
.bg-rainbow .strip {
	display: flex;
    flex-wrap: nowrap;
}
.bg-rainbow .strip .content {
    padding: 0;
    margin: auto auto auto 0;
    color: #fff;
}
.bg-rainbow .strip .content .icon {
	font-size: 64px;
    line-height: 1;
    margin: 0 auto 8px 0;
    opacity: 0.5;
}
.bg-rainbow .strip .content p:last-child {margin: 0;}
.bg-rainbow .strip .btn-rainbow-strip {
	white-space: nowrap;
	margin: auto;
}

/*---------------------------------------------------------------
01.09 ADVANTAGES SECTION
---------------------------------------------------------------*/
#advantagesSection .loader-container {display: none;}
#advantagesSection .sample-app-group {background: #eee;}
#advantagesSection .brief-container p {font-size: 15px;}
#advantagesSection ul {
	padding: 0;
	margin: 0;
	list-style: none;
	list-style-type: none;
}
#advantagesSection ul li {
	padding: 16px 0;
	border-bottom: 1px solid #eee;
}
#advantagesSection ul li:last-child {border: none;}
/*---------------------------------------------------------------
01. END OF HOMEPAGE SECTIONS
---------------------------------------------------------------*/

/*---------------------------------------------------------------
02. STANDART SUB PAGES
---------------------------------------------------------------*/
.content {
	font-size: 13px;
	padding-top: 48px;
	color: #6c757d;
}
.content.standart-pages .container-fluid .container {padding: 24px 16px;}
.content.standart-pages.developer .container-fluid.hero .container {padding: 0 16px;}
.content.standart-pages.developer .extended-hero-text .brief-text {margin: auto auto auto 0;}
.content.standart-pages .full-with-banner .brief-text {
	max-width: 700px;
    padding: 0;
}
.content.standart-pages .container-fluid > .row {
	position: relative;
	z-index: 1;
}
.content.standart-pages .container-fluid .container .row {margin: 0 0 16px 0;}
.content.standart-pages .container-fluid .container .row:last-child {margin: 0;}
.content.standart-pages .container-fluid .container.blog-offer .row {padding: 0;}
.content.standart-pages .container-fluid .container.blog-offer h2 {margin-bottom: 16px;}
.content.standart-pages .container-fluid .container.blog-offer .brief-text-aligner {width: 100%;}
.content.standart-pages .container-fluid .container.blog-offer .row .brief-text-aligner .row {
	width: auto;
	margin: 0 -8px;
}
.content.standart-pages .container-fluid .container.blog-offer .row .brief-text-aligner .row .col-md-6 {
	padding: 0 8px;
	margin: 0 0 16px 0;
}
.content.standart-pages .container-fluid .container.blog-offer .row .brief-text-aligner .row .col-md-6:last-child {margin-bottom: 0;}
.content.standart-pages .container-fluid .container .row.one-col .brief-text {
    padding: 0;
    margin: auto auto 0 auto;
}
.content.standart-pages .container-fluid .container .row.one-col .content-image {
	width: 100%;
    padding: 0;
    margin: 16px auto;
}
.hero {background-color: #28a745;}
.native-app .hero {background: none;}
.hero-image {
	display: none;
	position: relative;
	width: 100%;
	max-height: 50vh;
	background-color: #f8f9fa;
	overflow: hidden;
}
.standart-pages.pwa-app .hero-image {padding: 48px 8px;}
.standart-pages.pwa-app .hero-image .dark-bezel {position: relative;}
.standart-pages.pwa-app .sample-container {
	display: flex;
	width: 100%;
	height: auto;
	margin: auto;
}
.standart-pages.pwa-app .sample-container > .aligner {
	display: flex;
    position: relative;
    margin: auto;
    padding: 0 72px 0 0;
}
.standart-pages.pwa-app .sample-container .device-container.computer {margin: auto 2px auto auto;}
.standart-pages.pwa-app .sample-container .device-container.phone {
	position: absolute;
    left: 236px;
    transform: scale(0.27612);
    transform-origin: left top;
    margin: auto auto auto 0;
}
.hero-image img {width: 100%;}
.hero .container-fluid .header .title {
	font-weight: 600;
	text-align: center;
	margin: 0;
}
.content.standart-pages .content-image {
	padding: 0;
	width: 66.6666%;
}
.content.standart-pages .content-image.web-template-container {margin: 16px 0 16px -12px;}
.content.standart-pages .content-image.web-template-container .device-container {
    transform: scale(1.3);
    transform-origin: left center;
}
.content.standart-pages .content-image.full-width {width: 100%;}
.native-app .hero-image .top-group {background-color: #fff;}
.content.standart-pages .hero-text {
	display: flex;
    position: relative;
    flex-direction: column;
	width: 100%;
	max-width: none;
	text-align: center;
	padding: 16px 0;
    background-color: #fff;
	z-index: 1;
}
.content.standart-pages .hero-text h1 {
	font-size: 30px;
	text-align: left;
    line-height: 1;
	margin: 0 auto 16px auto;
	color: #28a745;
}
.content.standart-pages .hero-text h1 small {font-weight: 700;}
.content.standart-pages .hero-text h2 {
	max-width: 600px;
	text-align: left;
    font-size: 15px;
    line-height: normal;
    margin: auto auto auto auto;
}
.content.standart-pages .brief-text .action-btn-group,
.content.standart-pages .hero-text .action-btn-group {
	text-align: left;
	margin: 16px 0 0 0;
}
.content.standart-pages .extended-hero-text h1,.content.standart-pages .extended-hero-text p,.content.standart-pages .extended-hero-text .action-btn-group {text-align: left;}
.content.standart-pages .extended-hero-text .content-image {
	width: 100%;
	margin: auto 0 24px auto;
}
.content.standart-pages .container-fluid .image-container {
	position: relative;
	top: -10vh;
	margin: auto auto 16px auto;
	opacity: 0;
	transition: top ease-in-out 900ms, opacity ease-in-out 1800ms;
}
.content.standart-pages .container-fluid .image-container .image-container {
	top: 0;
	margin: 0;
	opacity: 1;
	transition: none;
}
.content.standart-pages .container-fluid .image-container img {width: 100%;}
.sample-container.versus {height: 265px;}
.sample-container.versus .group-resizer {
    position: relative;
    display: flex;
    transform: scale(.4);
    transform-origin: left top;
}
.content.standart-pages .container-fluid .image-container.real-size.iphone-x-etc.cover-illustration .phone-sample {
	width: 305px;
	height: 360px;
	margin: auto -8px;
	transform: none;
}
.content.standart-pages .container-fluid .image-container.real-size.iphone-x-etc.cover-illustration .phone-sample::before {top: 55%;}
.content.standart-pages .container-fluid .image-container.real-size.iphone-x-etc.cover-illustration .phone-sample::after {top: 30%;}
.content.standart-pages .container-fluid .image-container.real-size.iphone-x-etc.cover-illustration .screen-group {
	width: 289px;
	height: 344px;
}
.content.standart-pages .container-fluid .image-container.iphone-x-etc.resizable.cover-illustration .phone-sample {
	width: 305px;
	height: 642px;
}
.content.standart-pages .container-fluid .image-container.iphone-x-etc.resizable.cover-illustration .screen-group {
	width: 289px;
	height: 626px;
}
.content.standart-pages .container-fluid .image-container.cover-illustration .screen-group .platform-icon {
	font-size: 24px;
    padding: 18px 21px;
    margin: auto;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 50%;
    opacity: 0.5;
}
.content.standart-pages .container-fluid .image-container.iphone-x-etc.resizable.cover-illustration .screen-group .platform-icon {
	font-size: 128px;
    padding: 0;
    border: none;
    opacity: 1;
}
.content.standart-pages .container-fluid .image-container.iphone-x-etc.resizable.cover-illustration .screen-group .platform-icon.fa-microchip {color: #28a745;}
.content.standart-pages .container-fluid .image-container.iphone-x-etc.resizable.cover-illustration .screen-group .platform-icon.fa-html5 {color: #fd7e14;}
.versus-icon {
    position: relative;
    font-size: 48px;
    font-weight: 800;
    font-style: italic;
    line-height: 1;
    margin: auto -32px;
    padding: 20px 19px;
    color: #ce0000;
    background-color: red;
    border-radius: 50%;
    text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.6), 1px 1px 1px rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    z-index: 2;
}
.content.standart-pages .container-fluid.active .image-container {
	top: 0;
	opacity: 1;
}
.extended-hero-text .phone-sample {
	width: 256px;
    height: 501px;
	border-radius: 38px;
	margin: auto;
}
.real-size.iphone-x-etc .phone-sample {transform-origin: left bottom;}
.extended-hero-text .top-group {top: 8px;}
.extended-hero-text .screen-group {
	width: 240px;
    height: 485px;
    border-radius: 30px;
}
.extended-hero-text .brief-text {max-width: 600px;}
.content.standart-pages .brief-text {padding: 0;}
.content.standart-pages .brief-text.masker {
	width: auto;
    padding: 16px;
    margin: -100px -16px 0 -16px;
    background-color: #fff;
    z-index: 1;
}
.content.standart-pages .brief-text-aligner h2 {
	font-size: 20px;
	font-weight: 700;
}
.content.standart-pages .brief-text-aligner h3 {
	font-size: 16px;
	font-weight: 700;
}
.content.standart-pages h5 {font-size: 15px;}
.content.standart-pages .brief-text-aligner p:last-child {margin: 0;}
.accordion.platform-info .btn-link {padding: 12px;}
.accordion.platform-info .btn-icon {font-size: 16px;}
.accordion.platform-info .btn-title {font-size: 13px;}
.flex-direction-responsive {flex-direction: column-reverse;}
.content.standart-pages .grid-container {padding-top: 70px;}
.content.standart-pages .bottombar ul {padding: 3px 0 6px 0;}
.content.standart-pages .bottombar ul li {
	padding: 0;
	border: none;
}
.content.standart-pages .grid-container li {
	padding: 0 0 33.333333% 0;
	border: none;
}
.content.standart-pages .web-side-menu li {
	padding: 2px;
	border: none;
}
.content.standart-pages ul li:last-child {border: none;}
.content.standart-pages ul.accordion li {
	padding: 0;
	border-bottom: none;
}
ul.stylish-list.outdent li {display: flex;}
ul.stylish-list.outdent li .list-item-icon {
	display: block;
	margin: auto 8px auto 0;
}
ul.stylish-list.outdent li .list-txt {
    display: block;
    margin: auto auto auto 0px;
}
.content.standart-pages .bg-rainbow .container {padding: 16px;}
.content.standart-pages .bg-rainbow .col {padding: 0;}
.content.standart-pages .bg-rainbow h4 {
	font-size: 16px;
    font-weight: 600;
    line-height: normal;
    margin: auto auto 16px 0;
}
.afy-app-step h2 {
	font-size: 18px;
	font-weight: 600;
	text-align: center;
    line-height: normal;
    margin: auto auto 16px auto;
}
.afy-app-step p {
	text-align: center;
	margin: auto auto 32px auto;
}
.afy-app-step .action-btn-group {margin: 32px auto auto auto;}
.afy-app-step .col-2_5 {
	display: flex;
	flex-direction: column;
	position: relative;
	-ms-flex: 0 0 20%;
	flex: 0 0 20%;
	min-width: 20%;
	width: 20%;
	max-width: 20%;
	padding: 0;
}
.afy-app-step .col-3 {
	display: flex;
	flex-direction: column;
	position: relative;
	-ms-flex: 0 0 25%;
	flex: 0 0 25%;
	min-width: 25%;
	width: 25%;
	max-width: 25%;
	padding: 0;
}
.afy-app-step .col-2_5,
.afy-app-step .col-2_5:hover,
.afy-app-step .col-3,
.afy-app-step .col-3:hover {
	text-decoration: none;
	color: inherit;
}
.afy-app-step .col-2_5 .icon-plus-text-item-icon .fa,.afy-app-step .col-3 .icon-plus-text-item-icon .fa {transition: box-shadow ease-in-out 300ms;}
.afy-app-step .col-2_5:hover .icon-plus-text-item-icon .fa,.afy-app-step .col-3:hover .icon-plus-text-item-icon .fa {box-shadow: 0 0 0 5px rgba(40, 167, 69, 0.33);}
.afy-app-step .icon-plus-text-item-icon {
	display: flex;
	position: relative;
	min-width: 48px;
    width: 48px;
    max-width: 48px;
    min-height: 48px;
    height: 48px;
    max-height: 48px;
    font-size: 21px;
    line-height: 0;
    padding: 0;
    margin: 0 auto 8px auto;
}
.afy-app-step .icon-plus-text-item-icon + h6 {font-size: 14px;}
.afy-app-step .icon-plus-text-item-icon > .fa,
.afy-app-step .icon-plus-text-item-icon > .far,
.afy-app-step .icon-plus-text-item-icon > .fas,
.afy-app-step .icon-plus-text-item-icon > .fab {
    display: flex;
    width: 100%;
	height: 100%;
	margin: auto;
	color: #28a745;
	background-color: #fff;
    border: 2px solid #28a745;
	border-radius: 50%;
	z-index: 1;
}
.bg-light .afy-app-step .icon-plus-text-item-icon > .fa,
.bg-light .afy-app-step .icon-plus-text-item-icon > .far,
.bg-light .afy-app-step .icon-plus-text-item-icon > .fas,
.bg-light .afy-app-step .icon-plus-text-item-icon > .fab {
	background-color: #f8f9fa;
}
.afy-app-step .icon-plus-text-item-icon > .fa::before,
.afy-app-step .icon-plus-text-item-icon > .far::before,
.afy-app-step .icon-plus-text-item-icon > .fas::before,
.afy-app-step .icon-plus-text-item-icon > .fab::before {margin: auto;}
.fa.fa-puzzle-piece::before {padding-left: 0.25em;}
.afy-app-step .icon-plus-text-item-icon > .fa {transform: scale(0);}
.active .afy-app-step .icon-plus-text-item-icon > .fa {
	animation-duration: 600ms;
	animation-name: scaleUpRealSize;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
}
.afy-app-step .col-2_5:nth-child(1) .icon-plus-text-item-icon > .fa,.afy-app-step .col-3:nth-child(1) .icon-plus-text-item-icon > .fa {animation-delay: 600ms;}
.afy-app-step .col-2_5:nth-child(2) .icon-plus-text-item-icon > .fa,.afy-app-step .col-3:nth-child(2) .icon-plus-text-item-icon > .fa {animation-delay: 1200ms;}
.afy-app-step .col-2_5:nth-child(3) .icon-plus-text-item-icon > .fa,.afy-app-step .col-3:nth-child(3) .icon-plus-text-item-icon > .fa {animation-delay: 1800ms;}
.afy-app-step .col-2_5:nth-child(4) .icon-plus-text-item-icon > .fa,.afy-app-step .col-3:nth-child(4) .icon-plus-text-item-icon > .fa {animation-delay: 2400ms;}
.afy-app-step .col-2_5:nth-child(5) .icon-plus-text-item-icon > .fa {animation-delay: 3000ms;}
.afy-app-step .col-2_5 h6,.afy-app-step .col-3 h6 {opacity: 0;}
.active .afy-app-step .col-2_5 h6,
.active .afy-app-step .col-3 h6 {
	font-size: 11px;
    font-weight: 600;
    text-align: center;
    letter-spacing: -0.04em;
    margin: auto;
	animation-duration: 600ms;
	animation-name: opacityUp;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
}
.afy-app-step .col-2_5:nth-child(1) h6,.afy-app-step .col-3:nth-child(1) h6 {animation-delay: 600ms;}
.afy-app-step .col-2_5:nth-child(2) h6,.afy-app-step .col-3:nth-child(2) h6 {animation-delay: 1200ms;}
.afy-app-step .col-2_5:nth-child(3) h6,.afy-app-step .col-3:nth-child(3) h6 {animation-delay: 1800ms;}
.afy-app-step .col-2_5:nth-child(4) h6,.afy-app-step .col-3:nth-child(4) h6 {animation-delay: 2400ms;}
.afy-app-step .col-2_5:nth-child(5) h6 {animation-delay: 3000ms;}
.afy-app-step .col-2_5 .icon-plus-text-item-icon::before
/* ,.afy-app-step .col-3 .icon-plus-text-item-icon::before */ {
	content: "";
    position: absolute;
	left: -123%;
	width: 0;
	top: 50%;
    height: 2px;
    background-color:#d9d9d9;
}
.afy-app-step .col-3 .icon-plus-text-item-icon::before {left: -166%;}
.active .afy-app-step .col-2_5 .icon-plus-text-item-icon::before {
	animation-duration: 600ms;
	animation-name: stepperLine2;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
}
.active .afy-app-step .col-3 .icon-plus-text-item-icon::before {
	animation-duration: 600ms;
	animation-name: stepperLine4;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
}
.afy-app-step .col-2_5:nth-child(1) .icon-plus-text-item-icon::before,
.afy-app-step .col-3:nth-child(1) .icon-plus-text-item-icon::before {
	width: 0;
	left: 50%;
}
.active .afy-app-step .col-2_5:nth-child(1) .icon-plus-text-item-icon::before,
.active .afy-app-step .col-2_5:nth-child(5) .icon-plus-text-item-icon::before {
	animation-duration: 600ms;
	animation-name: stepperLine1;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
}
.active .afy-app-step .col-3:nth-child(1) .icon-plus-text-item-icon::before,
.active .afy-app-step .col-3:nth-child(4) .icon-plus-text-item-icon::before {
	animation-duration: 600ms;
	animation-name: stepperLine3;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
}
.active .afy-app-step .col-2_5:nth-child(1) .icon-plus-text-item-icon::before,.active .afy-app-step .col-3:nth-child(1) .icon-plus-text-item-icon::before {animation-delay: 600ms;}
.active .afy-app-step .col-2_5:nth-child(2) .icon-plus-text-item-icon::before,.active .afy-app-step .col-3:nth-child(2) .icon-plus-text-item-icon::before {animation-delay: 1200ms;}
.active .afy-app-step .col-2_5:nth-child(3) .icon-plus-text-item-icon::before,.active .afy-app-step .col-3:nth-child(3) .icon-plus-text-item-icon::before {animation-delay: 1800ms;}
.active .afy-app-step .col-2_5:nth-child(4) .icon-plus-text-item-icon::before,.active .afy-app-step .col-3:nth-child(4) .icon-plus-text-item-icon::before {animation-delay: 2400ms;}
.active .afy-app-step .col-2_5:nth-child(5) .icon-plus-text-item-icon::before {animation-delay: 3000ms;}
@keyframes scaleUpRealSize {
	000% {transform: scale(0);}
	050% {transform: scale(1.4);}
	100% {transform: scale(1);}
}
@keyframes opacityUp {
	000% {opacity: 0;}
	100% {opacity: 1;}
}
@keyframes stepperLine1 {
	000% {width: 0;}
	100% {width: 173%;}
}
@keyframes stepperLine2 {
	000% {width: 0;}
	100% {width: 346%;}
}
@keyframes stepperLine3 {
	000% {width: 0;}
	100% {width: 216%;}
}
@keyframes stepperLine4 {
	000% {width: 0;}
	100% {width: 432%;}
}
.native-app .hero-image .phone-sample {
	min-width: 305px;
	width: 305px;
    height: 305px;
    margin: 16px auto -15px auto;
    background-color: #fff;
    border: none;
    box-shadow: 0 0 16px 1px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.11), 0 0 8px rgba(0, 0, 0, 0.322) inset;
    border-radius: 48px 48px 0 0;
}
.native-app .hero-image .phone-sample::before,.native-app .hero-image .phone-sample::after {content: none;}
.hero-image .phone-sample.android {
	display: none;
	margin-left: 8px;
}
.native-app .hero-image .top-group {
	display: flex;
    top: auto;
    left: 80px;
    width: 145px;
    height: 15px;
    margin: 10px auto -20px auto;
    border-radius: 0 0 15px 15px;
	box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.22), -1px 1px 0 rgba(0, 0, 0, 0.22);
    transform: none;
}
.hero-image .android .top-group {
	left: 137.5px;
    width: 30px;
    height: 15px;
}
.native-app .hero-image .screen-group {
	width: 285px;
    height: 285px;
    margin: auto;
	background-image: linear-gradient(0deg, #fbbe3b 0%, rgba(0,0,0,0) 60%), linear-gradient(180deg, #007bff 0%, rgba(0,0,0,0) 50%), linear-gradient(90deg, #ea0081 0%, rgba(0,0,0,0) 100%), linear-gradient(270deg, #00ab34 0%, rgba(0,0,0,0) 100%);
	background-repeat: no-repeat;
	background-color: #6f42c1;
	border: none;
    border-radius: 38px 38px 0 0;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.22) inset, 0 0 0 1px rgba(0, 0, 0, 0.22) inset;
}
.hero-image .android .screen-group {background-image: linear-gradient(0deg, #007bff 0%, rgba(0,0,0,0) 60%), linear-gradient(180deg, #fbbe3b 0%, rgba(0,0,0,0) 50%), linear-gradient(90deg, #ea0081 0%, rgba(0,0,0,0) 100%), linear-gradient(270deg, #00ab34 0%, rgba(0,0,0,0) 100%);}
.device-hardware {
	display: flex;
	position: absolute;
	flex-direction: column;
    left: 0;
    top: 0;
    right: 0;
	bottom: 0;
}
.android .device-hardware {transform: rotate(45deg);}
.micro-chip {
	display: flex;
	position: relative;
    width: 95px;
    height: 95px;
    margin: 0;
    border: 4px solid rgba(255, 255, 255, 0.33);
}
.micro-chip::after {
	content: "";
	width: 87px;
	height: 87px;
	margin: auto;
	border: 1px solid rgba(255, 255, 255, 0.66);
}
.line-container-row {
	display: flex;
    width: 285px;
    height: 95px;
}
.line-container-row.top {margin: auto auto 0 auto;}
.line-container-row.middle {margin: 0 auto 0 auto;}
.line-container-row.bottom {margin: 0 auto auto auto;}
.line-container {
    position: relative;
    width: 95px;
    height: 95px;
}
.line-container-left {margin: auto 0 auto auto;}
.line-container-top {margin: auto auto 0 auto;}
.line-container-right {margin: auto auto auto 0;}
.line-container-bottom {margin: 0 auto auto auto;}
.cpu-line {
    left: 70px;
    top: 15px;
    position: absolute;
    width: 25px;
    border-width: 2px 0 0 0;
    border-style: solid;
    border-color: #fff;
    border-radius: 1px 0 0 1px;
    opacity: 0.22;
}
.cpu-line::after {
	content: "";
    position: absolute;
    left: -12px;
    top: -8px;
    width: 14px;
    height: 14px;
    border: 2px solid #fff;
    border-radius: 7px;
}
.cpu-line.cpu-line-type-1::before {
	content: "";
    position: absolute;
    left: -18px;
    top: -7px;
    width: 20px;
    height: 2px;
    background: #fff;
    transform: rotate(30deg);
}
.cpu-line.cpu-line-type-1::after {
	left: -28px;
    top: -21px;
}
.cpu-line.left-top {
	left: 75px;
    width: 20px;
}
.cpu-line.left-middle-1 {
	left: 70px;
    top: 35px;
}
.cpu-line.left-middle-2 {
    left: 75px;
    top: 55px;
    width: 20px;
}
.cpu-line.left-middle-2::before {
	left: -28px;
    top: 1px;
    width: 30px;
    transform: rotate(-10deg);
}
.cpu-line.left-middle-2::after {
	left: -40px;
    top: -1px;
}
.cpu-line.left-bottom {
	width: 30px;
    left: 65px;
    top: 75px;
}
.top .line-container-top {transform: rotate(90deg) scale(1, -1);}
.middle .line-container-right {transform: rotate(180deg);}
.bottom .line-container-bottom {transform: rotate(-90deg);}
.hero-image .platform-icon {
    font-size: 80px;
	margin: auto;
	color: #fff;
	opacity: 0.33;
	z-index: 1;
}
.hero-image .platform-icon.fa-apple {display: none;}
.hero-image .platform-icon.fa-microchip {font-size: 40px;}
.native-app .screen-group::after {
	position: absolute;
    display: block;
    content: "";
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-image: url(../images/tram.png);
}
.content.standart-pages .floating-col-with-icons .container .row {margin: 0;}
.floating-col-with-icons .col-md-6,
.floating-col-with-icons .col-md-4,
.floating-col-with-icons .col-md-3 {
	padding: 16px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}
.floating-col-with-icons .col-md-6:last-child,.floating-col-with-icons .col-md-4:last-child,.floating-col-with-icons .col-md-3:last-child {border: 0;}
.floating-col-with-icons .col-md-6 p:last-child,.floating-col-with-icons .col-md-4 p:last-child,.floating-col-with-icons .col-md-3 p:last-child {margin-bottom: 0;}
.content.standart-pages .hero-text .floating-col-with-icons {text-align: left;}
.content.standart-pages .hero-text .floating-col-with-icons > .container {padding: 24px 0 0 0;}
.content.standart-pages .hero-text .floating-col-with-icons h2 {margin: 8px 0;}
.floating-col-with-icons .icon-plus-text-item-icon {
	display: inline-block;
	font-size: 20px;
	margin: auto 4px 4px 0;
}
.floating-col-with-icons .icon-plus-text-item-icon .pwa-logo {height: 20px;}
.floating-col-with-icons .icon-plus-text-item-icon + h5 {
	display: inline-block;
	font-size: 14px;
	margin: auto auto 0 0;
}
.content.standart-pages .content-image.extended-hero-text {min-width: 256px;}
.content.standart-pages .action-btn-group .content-image.extended-hero-text {width: 100%;}
/* .content.standart-pages .price-samples .brief-text-aligner h2 {
	font-weight: 600;
	letter-spacing: -0.01em;
}
.content.standart-pages .icon-plus-text-item {
	display: flex;
	margin: auto auto 12px 0;
}
.price-samples .icon-plus-text-item-icon {
	min-width: 38px;
    font-size: 15px;
    text-align: center;
    line-height: normal;
    padding: 8px 0;
    margin: auto 8px auto auto;
    border-radius: 50%;
}
.price-samples .icon-plus-text-item-txt {
	font-weight: 700;
	text-align: left;
	line-height: 1.35;
}
.price-samples th,.price-samples td {
	text-align: center;
	vertical-align: middle;
}
.price-samples th .plugin-icon,.price-samples td .plugin-icon {
	display: block;
	margin: auto auto 4px auto;
} */
.brief-text-aligner ul {
	padding: 0;
	margin-bottom: 0;
	list-style: none;
	list-style-type: none;
}
.brief-text-aligner ul li {
	display: flex;
	padding: 16px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.11);
}
.brief-text-aligner ul li:last-child {border: none;}
.brief-text-aligner ul li .icon {
	min-width: 48px;
	width: 48px;
	max-width: 48px;
	font-size: 24px;
	text-align: center;
    margin: 0 12px auto 0;
}
.brief-text-aligner ul li h5 {font-weight: 700;}
.native .icon {color: #28a745;}
.native h2,.native h3,.native h4,.native h5,.native h6 {color: #28a745;}
.web .icon {color: #4b84c1;}
.web h2,.web h3,.web h4,.web h5,.web h6 {color: #4b84c1;}
.pwa .icon {color: #6f42c1;}
.pwa h2,.pwa h3,.pwa h4,.pwa h5,.pwa h6 {color: #6f42c1;}
.android .icon {color: #0b9bb3;}
.android h2,.android h3,.android h4,.android h5,.android h6 {color: #0b9bb3;}
.ios .icon {color: #49a7ec;}
.ios h2,.ios h3,.ios h4,.ios h5,.ios h6 {color: #49a7ec;}
.brief-text-aligner p:last-child {margin-bottom: 0;}
.content.standart-pages .container-fluid .multiple-list .row {margin: 0;}
.content.standart-pages .container-fluid .multiple-list .divider {display: none;}
.content.standart-pages .brief-text.col-md-8 .col-md-6 {padding: 0;}
.brief-text.col-md-8 .col-md-6 ul.stylish-list li .list-item-icon {
	font-size: 18px;
	margin: 0 8px auto 0;
}
.brief-text.col-md-8 .col-md-6 ul.stylish-list li {border-bottom: 1px solid rgba(0, 0, 0, 0.07);}
.brief-text.col-md-8 .col-md-6:last-child ul.stylish-list li:last-child {border: none;}
.brief-text.col-md-8 .col-md-6 ul.stylish-list li .aligner {
    display: flex;
    margin: auto 0;
}
.content.standart-pages .container-fluid .multiple-list .content-image > .image-container {margin: 24px auto;}
.content.standart-pages .container-fluid .multiple-list .phone-sample .image-container {
	width: 100%;
	margin: 0;
}
.content.standart-pages .container-fluid .multiple-list .action-btn-group {margin: 16px 0 0 0;}
.container-fluid.bg-rainbow.multiple-content .container {flex-direction: column;}
.container-fluid.bg-rainbow.multiple-content .divider {border-color: rgba(255, 255, 255, 0.33);}
.content.standart-pages .container-fluid.bg-rainbow.multiple-content .row {margin: 0;}
.container-fluid.bg-rainbow.multiple-content .brief-text {margin: 0 0 16px 0;}
.container-fluid.bg-rainbow.multiple-content .brief-text:last-child {margin: 0;}
.container-fluid.multiple-content .title-icon {
	font-size: 24px;
	margin: 0 0 8px 0;
}
.standart-pages .all-in-one-computer .screen > .aligner {
	position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}
.content.standart-pages .carousel-vids {padding: 0;}
.content.standart-pages .carousel-vids .carousel {padding: 16px;}
.content.standart-pages .carousel-vids .screen-group .carousel {padding: 0;}
.content.standart-pages .styled-carousel-indicator {
	position: relative;
    right: auto;
    bottom: auto;
    left: auto;
	padding: 0;
}
.content.standart-pages .container-fluid .container .row.styled-carousel-indicator {
	width: auto;
	margin: 0 -16px;
}
.content.standart-pages .styled-carousel-indicator > [class*="col"] {
	padding: 8px 16px;
	margin: 0;
	cursor: pointer;
}
.content.standart-pages .styled-carousel-indicator > [class*="col"] .brief-text-aligner {
	display: flex;
    flex-direction: column;
    padding: 16px;
    transition: all ease-in-out 300ms;
}
.content.standart-pages .styled-carousel-indicator > [class*="col"].active .brief-text-aligner {
    color: #28a745;
    background-color: rgba(40, 167, 69, 0.1);
}
.content.standart-pages .styled-carousel-indicator > [class*="col"]:hover .brief-text-aligner {
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.22);
	border-radius: 16px;
	transform: scale(1.02);
}
/* .content.standart-pages .styled-carousel-indicator > [class*="col"] .brief-text-aligner h2 {margin-top: auto;}
.content.standart-pages .styled-carousel-indicator > [class*="col"] .brief-text-aligner p:last-child {margin-bottom: auto;} */
/*---------------------------------------------------------------
02. END OF STANDART SUB PAGES
---------------------------------------------------------------*/

/*---------------------------------------------------------------
03. OVERVIEW PAGE
---------------------------------------------------------------*/
.content.standart-pages.overview .extended-hero-text .content-image {margin: 0 auto auto 0;}
.content.standart-pages.overview .extended-hero-text .brief-text {margin: 0 auto auto 0;}
.overview .extended-hero-text .brief-text-aligner {margin: 0 0 32px 0;}
.content.standart-pages.overview .extended-hero-text .brief-text h2,.content.standart-pages.overview .extended-hero-text .brief-text h5 {text-align: left;}
.standart-pages.overview .half-screen-jumbo.container-fluid > .image-container {
	padding: 16px 16px 0 16px;
	margin: auto;
}
.content.standart-pages.overview .full-with-banner .brief-text {text-align: left;}
.content.standart-pages.overview .full-with-banner .container .action-btn-group {text-align: left;}
/*---------------------------------------------------------------
03. END OF OVERVIEW PAGE
---------------------------------------------------------------*/

/*---------------------------------------------------------------
04. NATIVE APP PAGE
---------------------------------------------------------------*/
/*---------------------------------------------------------------
04. END OF NATIVE APP PAGE
---------------------------------------------------------------*/

/*---------------------------------------------------------------
05. PWA PAGE
---------------------------------------------------------------*/
/*---------------------------------------------------------------
05. END OF PWA PAGE
---------------------------------------------------------------*/

/*---------------------------------------------------------------
06. WEBSITES PAGE
---------------------------------------------------------------*/
.website .all-in-one-computer.device-container.computer {
	padding: 16px;
	margin: auto;
}
.website ul.stylish-list.outdent li .list-item-icon {
	font-size: 24px;
    margin: auto auto 8px auto;
}
/*---------------------------------------------------------------
06. END OF WEBSITES PAGE
---------------------------------------------------------------*/

/*---------------------------------------------------------------
07. BUILDER OVERVIEW PAGE
---------------------------------------------------------------*/
.builder-overview .all-in-one-computer.device-container.computer {
	padding: 16px;
	margin: auto;
}
/*---------------------------------------------------------------
07. END OF BUILDER OVERVIEW PAGE
---------------------------------------------------------------*/

/*---------------------------------------------------------------
08. CONTROL PANEL & CMS PAGE
---------------------------------------------------------------*/
.cms .all-in-one-computer.device-container.computer {
	padding: 16px;
	margin: auto;
}
.cms .styled-carousel .carousel-control-prev, .cms .styled-carousel .carousel-control-next {top: calc(15.25% + 8px);}
.cms #sampleVideo-2.styled-carousel .carousel-control-prev, .cms #sampleVideo-2.styled-carousel .carousel-control-next {top: calc(22.5% + 8px);}
.cms #sampleVideo-3.styled-carousel .carousel-control-prev, .cms #sampleVideo-3.styled-carousel .carousel-control-next {top: calc(24.5% + 8px);}
/*---------------------------------------------------------------
08. END OF CONTROL PANEL & CMS PAGE
---------------------------------------------------------------*/

/*---------------------------------------------------------------
09. PRICING PAGE
---------------------------------------------------------------*/
.pricing .nav-tabs {background-color: #f8f9fa;}
.pricing .nav-tabs .nav-link {
	width: 146px;
    text-align: center;
	font-weight: 700;
    padding: 8px;
    color: #6c757d;
    border-width: 0 1px;
    border-radius: 0;
	opacity: 0.66;
	transition: all ease-in-out 300ms;
}
.pricing .nav-tabs .nav-link:hover {opacity: 1;}
.pricing .nav-tabs .nav-link.active,
.pricing .nav-tabs .nav-item.show .nav-link {
	color: #28a745;
	opacity: 1;
}
.pricing .header > .title h1 {
	font-size: 36px;
    line-height: 1;
    margin: 0;
}
.content.standart-pages .container-fluid .container .row.price-samples {
    width: auto;
    padding: 0;
    margin: 16px -8px;
}
.row.price-samples .col-md-4 {
    padding: 8px;
    margin: 0;
}
.price-sample {
    height: 100%;
    border-radius: 8px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}
.price-sample .price-title {
    font-size: 16px;
    font-weight: 700;
    padding: 16px 16px 2px 26px;
}
.price-sample .base-price {
	display: flex;
    line-height: 1;
	padding: 0 16px 16px 16px;
}
.price-sample .base-price.yearly-price, .billing-yearly .price-sample .base-price.monthly-price {display: none;}
.billing-yearly .price-sample .base-price.yearly-price {display: flex;}
.price-sample .price-currency {
    font-size: 16px;
    margin: auto 0 4px 0;
}
.price-sample .price-value {
    font-size: 36px;
    font-weight: 300;
}
.price-sample .period-term {
	position: relative;
    line-height: 1.2;
    margin: auto auto 4px 0;
}
.price-sample .period-term::before {
    content: "/";
    position: absolute;
    left: 0;
    top: -11px;
    font-size: 41px;
    font-weight: 300;
    opacity: 0.5;
}
.price-sample .period {
    font-size: 14px;
    margin: 0 0 0 16px;
}
.price-sample .term {
	font-size: 10px;
    margin: 0 0 0 11px;
    opacity: 0.6;
}
.price-sample ul {
	padding: 12px 0;
    margin: 0;
    list-style: none;
    list-style-type: none;
}
.price-sample ul li {
	font-size: 12px;
	padding: 4px 16px;
}
.price-sample ul li::before {
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	-moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
	line-height: 1;
	min-width: 16px;
    margin: auto 8px auto 0;
    opacity: 0.6;
}
.price-sample.starter ul li::before,.price-sample.starter ul li.not-include {color: #28a745;}
.price-sample.standart ul li::before,.price-sample.standart ul li.not-include {color: #6f42c1;}
.price-sample.advanced ul li::before,.price-sample.advanced ul li.not-include {color: #49a7ec;}
.price-sample ul li.include::before {content: "\f00c";}
.price-sample ul li.not-include::before {
	content: "\f111";
	font-weight: 400;
}
.price-sample .divider {margin: 0;}
.price-sample .action-btn-group {padding: 16px;}
.price-sample .select-price-btn {width: 100%;}
.compare-plan-btn {
    display: flex;
    font-size: 12px;
    padding: 8px 16px;
	margin: auto auto auto 0;
	border-width: 1px;
	border-style: solid;
	border-radius: 50em;
	transition: all ease-in-out 300ms;
    cursor: pointer;
}
.compare-plan-btn .btn-icon {
    font-size: 14px;
    margin: auto 4px auto 0;
}
.compare-plan-btn .btn-title {
    line-height: 1;
    margin: auto 0;
}
.price-plan-changer {
	position: relative;
	font-size: 11px;
    padding: 0 2px;
    margin: auto 0 auto auto;
    border: 2px solid #ddd;
    border-radius: 50em;
}
.price-plan-changer::before {
    content: "";
    position: absolute;
    top: 5%;
    left: 4px;
    width: 64px;
    height: 90%;
    margin: 0 -2px;
    background-color: #28a745;
    border-radius: 50em;
    transition: transform ease-in 75ms;
    z-index: 0;
}
.price-plan-changer.yearly-selected::before {transform: translateX(59px);}
.price-plan-label {
    position: relative;
    width: 64px;
    text-align: center;
    font-weight: 500;
    line-height: 1;
    padding: 6px;
    margin: auto -2px;
    cursor: pointer;
    border-radius: 0 50em 50em 0;
    opacity: 0.5;
    transition: all ease-in 50ms;
    z-index: 1;
}
.price-plan-label:first-child {border-radius: 50em 0 0 50em;}
.price-plan-label:hover {opacity: 0.66;}
.price-plan-changer.yearly-selected .active,
.price-plan-changer.monthly-selected .active {
    font-weight: 700;
    color: #fff;
    cursor: default;
    opacity: 1;
}
.label-title {
    display: inline-block;
    line-height: 1.6;
    vertical-align: middle;
}
.price-plan-input {display: none;}

.btn-outline-starter,
.compare-plan-btn {
	color: #28a745;
	border-color: #28a745;
}
.btn-outline-starter:hover,
.compare-plan-btn:hover {
	color: #fff;
	background-color: #28a745;
	border-color: #28a745;
}
.btn-outline-starter:focus,
.btn-outline-starter.focus,
.compare-plan-btn:focus,
.compare-plan-btn.focus {
	box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
}
.btn-outline-starter.disabled,
.btn-outline-starter:disabled,
.compare-plan-btn.disabled,
.compare-plan-btn:disabled {
	color: #28a745;
	background-color: transparent;
}
.btn-outline-starter:not(:disabled):not(.disabled):active,
.btn-outline-starter:not(:disabled):not(.disabled).active,
.compare-plan-btn:not(:disabled):not(.disabled):active,
.compare-plan-btn:not(:disabled):not(.disabled).active {
	color: #fff;
	background-color: #28a745;
	border-color: #28a745;
}

.btn-outline-standart {
	color: #6f42c1;
	border-color: #6f42c1;
}
.btn-outline-standart:hover {
	color: #fff;
	background-color: #6f42c1;
	border-color: #6f42c1;
}
.btn-outline-standart:focus,
.btn-outline-standart.focus {
	box-shadow: 0 0 0 0.2rem rgba(111, 66, 193, 0.3);
}
.btn-outline-standart.disabled,
.btn-outline-standart:disabled {
	color: #6f42c1;
	background-color: transparent;
}
.btn-outline-standart:not(:disabled):not(.disabled):active,
.btn-outline-standart:not(:disabled):not(.disabled).active {
	color: #fff;
	background-color: #6f42c1;
	border-color: #6f42c1;
}

.btn-outline-orange {
	color: #fd7e14;
	border-color: #fd7e14;
}
.btn-outline-orange:hover {
	color: #fff;
	background-color: #fd7e14;
	border-color: #fd7e14;
}
.btn-outline-orange:focus,
.btn-outline-orange.focus {
	box-shadow: 0 0 0 0.2rem rgba(111, 66, 193, 0.3);
}
.btn-outline-orange.disabled,
.btn-outline-orange:disabled {
	color: #fd7e14;
	background-color: transparent;
}
.btn-outline-orange:not(:disabled):not(.disabled):active,
.btn-outline-orange:not(:disabled):not(.disabled).active {
	color: #fff;
	background-color: #fd7e14;
	border-color: #fd7e14;
}

.btn-outline-advanced {
	color: #49a7ec;
	border-color: #49a7ec;
}
.btn-outline-advanced:hover {
	color: #fff;
	background-color: #49a7ec;
	border-color: #49a7ec;
}
.btn-outline-advanced:focus,
.btn-outline-advanced.focus {
	box-shadow: 0 0 0 0.2rem rgba(73, 167, 236, 0.3);
}
.btn-outline-advanced.disabled,
.btn-outline-advanced:disabled {
	color: #49a7ec;
	background-color: transparent;
}
.btn-outline-advanced:not(:disabled):not(.disabled):active,
.btn-outline-advanced:not(:disabled):not(.disabled).active {
	color: #fff;
	background-color: #49a7ec;
	border-color: #49a7ec;
}

.content.standart-pages .container-fluid .container .row.compare-price-plans {
	width: auto;
    padding: 16px 0 0 0;
    margin: 0 -8px;
}
.price-samples .table {margin: 0;}
.price-samples .table th, .price-samples .table td {font-size: 10px;}
.price-samples .table td.price-sample {
	padding: 0;
    box-shadow: none;
    color: #6c757d;
}
td.price-sample .price-title {
	font-size: 12px;
    line-height: 1;
    padding: 4px 4px 0 4px;
}
td.price-sample .base-price {
	flex-wrap: wrap;
	font-size: 12px;
	padding: 2px 4px 0 4px;
}
td.price-sample .price-currency {
	font-size: 12px;
    margin: auto 0 2px 0;
}
td.price-sample .price-value {font-size: 20px;}
td.price-sample .period-term::before {display: none;}
td.price-sample .period-term {
	width: 100%;
    padding: 0;
}
td.price-sample .period {
	font-size: 12px;
	margin: 0;
}
td.price-sample .term {
	font-size: 9px;
	margin: 0;
}
.afy-basic-plugins-list {cursor: pointer;}
.afy-basic-plugins-modal ul {
	padding: 0;
	margin: -16px;
	list-style: none;
	list-style-type: none;
}
.afy-basic-plugins-modal ul li {
	padding: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.afy-basic-plugins-modal ul li .plugin-icon {
	font-size: 18px;
    margin: auto 4px auto auto;
}
.afy-basic-plugins-modal ul li .plugin-name {font-size: 12px;}
/*---------------------------------------------------------------
09. END OF PRICING PAGE
---------------------------------------------------------------*/

/*---------------------------------------------------------------
10. INFRASTRUCTURE PAGE
---------------------------------------------------------------*/
/*---------------------------------------------------------------
10. END OF INFRASTRUCTURE PAGE
---------------------------------------------------------------*/

/*---------------------------------------------------------------
11. SECURITY PAGE
---------------------------------------------------------------*/
.security ul.stylish-list.outdent li {flex-direction: column;}
.security ul.stylish-list.outdent li .list-item-icon {
	font-size: 24px;
    margin: auto auto 8px 0;
}
/*---------------------------------------------------------------
11. END OF SECURITY PAGE
---------------------------------------------------------------*/

/*---------------------------------------------------------------
12. REVENUE-MODEL PAGE
---------------------------------------------------------------*/
.revenue-models .brief-text.col-md-8 .col-xl-6 ul.stylish-list li {border-bottom: 1px solid rgba(0, 0, 0, 0.07);}
/*---------------------------------------------------------------
12. END OF REVENUE-MODEL PAGE
---------------------------------------------------------------*/

/*---------------------------------------------------------------
04. FEATURE INDEX
---------------------------------------------------------------*/
#featureSectionFull {
	flex-direction: column;
	padding: 48px 0px 0px 0px;
}
#featureSectionFull h2 {
	font-size: 24px;
	font-weight: 700;
	color: #28a745;
}
#featureSectionFull h3 {
	font-size: 16px;
	font-weight: 700;
	color: #96a2b3;
}
#featureSectionFull .page-title {
	font-size: 36px;
    line-height: 1.2;
    font-weight: 700;
	padding: 10px;
	margin: 0px 0px 0px 0px;
	color: #28a745;
	border-bottom: 1px solid #eeeeee;
}
#featureSectionFull section.row {
	position: relative;
	background-color: #fff;
	padding: 10px 10px 0 10px;
	border-bottom: 1px solid #eeeeee;
	z-index: 1;
}
section.row:last-child {border: 0px none;}
#featureSectionFull section.row [class*="col-"] {padding: 5px;}
/*---------------------------------------------------------------
04. END OF FEATURE INDEX
---------------------------------------------------------------*/

/*---------------------------------------------------------------
05. PLUGINS
---------------------------------------------------------------*/
#allPlugins > .container {
	position: relative;
    top: auto;
    padding: 16px 0;
    margin: 0 auto;
    background: none;
    background-color: #ffffff;
    border-radius: 4px;
    z-index: 0;
    overflow: hidden;
}
#allPlugins > .container > .divider:last-child {display: none;}
#allPlugins .filter-container {
	display: flex;
    flex-direction: row;
    padding: 20px;
    border-bottom: 1px solid #eeeeee;
}
.filter-container .form-group {
    position: relative;
    width: 100%;
    margin: auto 10px auto 0;
}
.filter-container .form-group .fa-search {
    position: absolute;
    width: 32px;
    top: 2px;
    right: 2px;
    line-height: normal;
    text-align: center;
    padding: 8px;
    margin: auto;
    border-radius: 16px;
}
.filter-container .dropdown-group {
	position: relative;
	margin: auto 0;
}
.filter-container #sortOrder {margin: auto 0;}
.filter-container .btn {
    display: flex;
    flex-direction: row;
    padding: 8px;
    border-width: 0;
    color: #8899aa;
    background: none;
    border-radius: 4px;
}
.filter-container .btn:hover,
.filter-container .btn:focus,
.filter-container .show .btn {
	color: #ffffff;
	background-color: #8899aa;
}
.filter-container .show .btn {border-radius: 4px 4px 0 0;}
.filter-container .dropdown-menu {
	padding: 0;
    margin: 0;
    background-color: #8899aa;
    border: 0 none;
    border-radius: 4px 0 4px 4px;
    overflow: hidden;
}
.filter-container .dropdown-menu-right {
    left: auto;
    right: 0;
}
.filter-container .dropdown-item {
	font-size: 0.7rem;
    font-weight: 500;
    padding: 5px 10px;
    margin: 0;
    color: #ffffff;
    transition: all ease-in-out 300ms;
    cursor: pointer;
}
.filter-container .dropdown-item:hover,.filter-container .dropdown-item:focus {background-color: #778899;}
.filter-container .dropdown-item.active,.filter-container .dropdown-item:active {background-color: #28a745;}
.filter-container .dropdown-item:first-child {padding: 0.5rem 0.75rem 0.375rem 0.75rem;}
.filter-container .dropdown-item:last-child {padding: 0.375rem 0.75rem 0.5rem 0.75rem;}
.filter-container .dropdown-divider {
	margin: 0;
	border-top: 1px solid rgba(0,0,0,0.08);
    border-bottom: 1px solid rgba(255,255,255,0.11);
}
.smart-group:last-child {border-width: 0;}
.smart-group ul {
	padding: 16px 8px;
	margin: 0;
}
.smart-group .header-group-container {
	display: flex;
	padding: 16px 16px 0 16px;
}
.smart-group .title {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.2;
    margin: 0;
    color: inherit;
    cursor: pointer;
}
.smart-group .caption {
	font-size: 0.875rem;
    font-weight: 400;
    margin: 0;
}
.smart-group .btn-outline-secondary {border-color: #414a54;}
.smart-group .show-all-plugins-btn {
	font-size: 0.7rem;
    font-weight: 600;
    padding: 5px 16px;
    margin: auto 0px auto auto;
    color: #8899aa;
	background: none;
    border-color: #cbd5de;
	border-radius: 14px;
}
.smart-group .show-all-plugins-btn:hover {
	color: #ffffff;
	background-color: #8899aa;
	border-color: #8899aa;
}
.plugin-detail-page .hero-image .back-to-list-page {background: linear-gradient(to bottom, #28a745 0%, rgba(0, 0, 0, 0.22) 8%, rgba(0, 0, 0, 0.22) 10%);}
.app-idea-detail .hero-image .back-to-list-page {
	position: absolute;
	width: 100%;
	background: linear-gradient(to bottom, #28a745 0%, rgba(0, 0, 0, 0.22) 8%, rgba(0, 0, 0, 0.22) 10%);
}

/* PLUGIN DETAIL PAGE REDESIGN */
.plugin-detail-page .plugin-info {
	padding: 0;
	background-color: #fff;
}
.plugin-detail-page .plugin-info .container {padding: 0;}
.plugin-detail,
.plugin-basics {
	display: flex;
	flex-direction: column;
}
.plugin-basics {border-bottom: 1px solid rgba(0, 0, 0, 0.1);}
.plugin-simple-data {
	display: flex;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.plugin-name-group {
	padding: .5rem;
    margin:auto 0 auto auto;
}
.plugin-name-group .plugin-name {
    font-size: 12px;
    font-weight: 700;
    line-height: normal;
	margin: 0;
}
.plugin-name-group .author-name {
	font-size: 10px;
	font-weight: 600;
	margin: 0;
    opacity: 0.66;
}
.plugin-basic-info {
	display: flex;
	margin: auto auto auto 0;
}
.logo-icon {
	font-size: 2rem;
    line-height: normal;
    padding: .5rem .75rem;
	margin: auto 0;
	border-width: 0 1px;
	border-style: solid;
	border-color: rgba(0, 0, 0, .1);
}
.plugin-basic-info .price-btn {
    font-size: 12px;
    line-height: 1;
    color: #28a745;
    padding: .5rem;
    margin: auto 0;
}
.plugin-basic-info .price, .plugin-basic-info .currency {font-weight: 700;}
.plugin-basic-info .period {
	display: -webkit-box;
	font-size: 9px;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
    overflow: hidden;
}
.plugin-detail .rating {
	line-height: normal;
	padding: .4rem .5rem;
	margin: auto 0;
	border-width: 0 0 0 1px;
	border-style: solid;
	border-color: rgba(0, 0, 0, .1);
}
.plugin-detail .numeric {
	font-size: 1.5rem;
	font-weight: 300;
	line-height: .65;
}
.plugin-detail .star {
	font-size: 9px;
	margin: auto;
}
.plugin-detail .total-choise {
	display: -webkit-box;
	font-size: 9px;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	color: #6c757d;
	overflow: hidden;
}
.plugin-preview {
	position: relative;
	margin: 1rem auto 0 auto;
}
.plugin-preview .carousel {
	display: flex;
	flex-direction: column;
}
.plugin-preview .carousel-inner {
	width: 220px;
	margin: auto;
	border-width: 1px;
	border-style: solid;
	border-color: rgba(0, 0, 0, 0.1);
}
.plugin-preview .carousel-item img {
	width: calc(100% + 2px);
	margin: 0 -1px;
	border-width: 0 1px;
	border-style: solid;
	border-color: rgba(0, 0, 0, 0.1);
}
.screenshot-thumbnails {
	display: flex;
	flex-wrap: wrap;
	position: relative;
	justify-content: center;
	width: 100%;
	padding: .5rem;
	margin: auto;
}
.screenshot-thumbnails .thumbnail {
	padding: 4px;
	cursor: pointer;
}
.screenshot-thumbnails .thumbnail img {
	max-width: 100%;
    box-shadow: 0 0px 0px 1px rgba(0, 0, 0, .1), 0 0px 0px 3px rgba(0, 0, 0, .08);
    border-radius: 3px;
}
.screenshot-thumbnails .thumbnail.active img {box-shadow: 0 0px 0px 1px rgba(40, 167, 69, .8), 0 0px 0px 3px rgba(40, 167, 69, .4);}
.plugin-preview .carousel-control-container {
    position: absolute;
    left: 50%;
    top: 180px;
    width: 310px;
    transform: translate(-50%, 0);
}
.plugin-preview .carousel-control {
	display: flex;
    top: 50%;
    width: 36px;
    height: 36px;
    line-height: normal;
    color: #6c757d;
    border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 50%;
	cursor: pointer;
    opacity: 1;
}
.plugin-extendeds {
	padding: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.plugin-extendeds ul {
    font-size: 12px;
    padding: 0;
    margin: 0;
    list-style: none;
}
.plugin-extendeds ul li {
	display: flex;
}
.plugin-specs > ul > li {
    padding: .5rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.plugin-specs > ul > li:last-child {border: none;}
.plugin-extendeds .heading-small {
	font-weight: 700;
	margin: auto 4px auto 0;
}
.plugin-extendeds .spec-value {margin: auto 4px auto 0;}
.plugin-extendeds .spec-value::after {content: ",";}
.plugin-specs > ul > li > .spec-value:last-child::after, .plugin-extendeds ul.float li.spec-value:last-child::after, .plugin-extendeds ul.float li:not(.spec-value):last-child .spec-value:last-child::after {content: none;}
.plugin-extendeds .spec-value.btn {
	font-size: 10px;
	line-height: normal;
    padding: 2px 8px;
    margin: auto 0;
    border-radius: 50em;
}
.plugin-extendeds li .spec-icon {margin: auto 2px auto 0;}
.plugin-extendeds li .spec-icon img {
	width: 24px;
    opacity: .8;
}
.plugin-extendeds ul.float {
	display: flex;
	flex-wrap: wrap;
}
.plugin-brief-and-reviews .brief,
.plugin-brief-and-reviews .version-history,
.plugin-brief-and-reviews .reviews-header {
	padding: 1rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.plugin-brief-and-reviews .heading {
	font-size: 14px;
	font-weight: 700;
}
.plugin-brief-and-reviews p {margin: 0 0 8px 0;}
.plugin-brief-and-reviews p:last-child {margin: 0;}
.plugin-brief-and-reviews ul {
	padding: 0 0 0 1rem;
	margin: 0;
}
.plugin-brief-and-reviews .show-all-btn {
    position: relative;
    font-size: .7rem;
    text-align: center;
    font-weight: 700;
    color: #99a6b1;
    padding: 40px 0 5px;
    margin: -61px 0 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #fff 70%);
    transition: all ease-in-out 300ms;
    cursor:pointer
}
.plugin-brief-and-reviews .show-all-btn:after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 10px;
    height: 5px;
    margin: 0 0 0 5px;
    border-width: 5px 5px 0;
    border-style: solid;
    border-color: #99a6b1 transparent transparent;
    transition: all ease-in-out 300ms;
}
.plugin-brief-and-reviews .collapsible-content {
	margin: 8px -2px 0 -2px;
    border: 1px solid #e8e9ea;
    border-radius: 4px;
    overflow: hidden;
}
.plugin-brief-and-reviews .collapsible-content .heading-small {
    display: flex;
    font-size: 12px;
    padding: 4px 8px;
	margin: 0;
	background-color: #f8f9fa;
	cursor: pointer;
}
.plugin-brief-and-reviews .collapsible-content .heading-small .heading-icon {margin:auto 4px auto 0;}
.plugin-brief-and-reviews .collapsible-content .heading-small .heading-title {margin: auto 0;}
.plugin-brief-and-reviews .collapsible-content .heading-small:after {
    content: "";
    width: 4px;
    height: 0;
	margin: auto 0 auto auto;
	border-width: 0 4px 4px 4px;
    border-color: transparent transparent #6c757d transparent;
    border-width: 0 4px 4px 4px;
    border-style: solid;
    border-color: transparent transparent #6c757d;
    transition: all ease-in-out 300ms;
}
.plugin-brief-and-reviews .collapsible-content .heading-small.collapsed:after {transform: rotate(180deg);}
.plugin-brief-and-reviews .collapsible-content .legal-notice {
	padding: .5rem;
	border-top: 1px solid #e8e9ea;
}
.plugin-specs a:active, .plugin-specs a:focus, .plugin-specs a:hover {color:#28a745}
.plugin-detail .preview-container {
	display: flex;
	flex-direction: column;
	max-width: 414px;
	border: 1px solid #e6e6e6;
	border-radius: 1.5em 1.5em 1em 1em;
	overflow: hidden;
}
.plugin-detail .preview .spacer {
	position: relative;
	width: 100%;
	height: 0;
	padding: 0 0 177.86666667% 0;
	background-color: #fff;
}
.plugin-detail .preview .aligner {
	display: flex;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
}
.plugin-detail .preview .video-sizer {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
}
.plugin-detail .preview .video-sizer iframe {
	width: 100%;
	height: 100%;
}
.graph-container .rating {
	display: flex;
	flex-wrap: wrap;
	padding: 1rem;
	border-width: 0 0 1px 0;
}
.graph-container > .rating {flex-direction: column;}
.graph-container .numeric {
	font-size: 3rem;
	line-height: 1;
	margin: auto auto 0 auto;
}
.graph-container .rating-extended {
	text-align: center;
	line-height: normal;
	padding: .25rem;
    margin: auto auto 0 auto;
}
.graph-container .star, .graph-container .total-choise {font-size: 12px;}
.graph-filters .star {font-size: 9px;}
.graph-filters .graph {
    width: calc(100% - 130px);
    margin: auto;
    border: 1px solid #e6e6e6;
    border-radius: 50em;
}
.graph-filters .percent {
    display: flex;
    font-size: 10px;
	margin: auto 0 auto 4px;
	color: #6c757d;
}
.graph-filters .percent-rating, .graph-filters .rate-count {margin: auto 0;}
.graph-filters .rate-separator {
	font-size: 40%;
	vertical-align: middle;
    margin: auto 0 auto 2px;
}
.graph-filters .user-value::before {content: "(";}
.graph-filters .user-value::after {content: ")";}
.comment-area .heading {padding: 1rem 1rem 0 1rem;}
.comment-area .toolbar {
	display: flex;
	flex-wrap: wrap;
	padding: .5rem 1rem 1rem 1rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.comment-area .add-comment-btn {
	font-size: 10px;
    white-space: nowrap;
    padding: 6.5px 8px;
    margin: 8px auto 8px 0;
    border-color: rgba(0, 0, 0, 0.1);
	border-radius: 50em;
	cursor: pointer;
}
.comment-area ul.pagination {
	padding: 0;
    margin: 8px 0 8px auto;
}
.comment-area .page-item {margin: 0;}
.comment-area .page-link {
    font-size: 10px;
    line-height: normal;
    padding: 4px 8px 5px 8px;
	color: #6c757d;
	border-radius: 0;
}
.comment-area .page-link.active {
    background-color: #fafafa;
    box-shadow: 0 0 3px #ccc inset;
}
.page-item:hover .page-link.active {
	color: #f8f9fa;
    background-color: #343a40;
}
.comment-area .page-item:first-child .page-link {
	font-size: 11px;
    line-height: 1.3;
    padding: 4px 7px 5px 7px;
    border-radius: 4px 0 0 4px;
}
.comment-area .page-item:last-child .page-link {
	font-size: 11px;
    line-height: 1.3;
    padding: 4px 7px 5px 7px;
    border-radius: 0 4px 4px 0;
}
.comment-area .sort-criteria {
    width: 100%;
    font-size: 10px;
    line-height: 1.3;
    padding: 5px 8px 5px 6px;
    margin: 0;
	color: #6c757d;
	border-radius: 4px;
}
.comments {font-size: 12px;}
.comments .separator {display: none;}
.comment {
	padding: 1rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.comment:nth-child(even) {background-color: #f8f9fa;}
.comment:last-child, .comment:only-child {border: none;}
.comments .comment-header,.comments .user-meta-data,.comments .data-group {display: flex;}
.comments .comment-header,.comments .user-meta-data-toolbar,.comments .user-meta-data {margin-bottom: 8px;}
.comments .comment-header .fa,
.comments .comment-header .far,
.comments .comment-header .fas {
	font-size: 10px;
	margin: auto 2px auto auto;
}
.comments .comment-header .graph-container {margin: 4px 0 auto auto;}
.comments .comment-title {
    font-weight: 700;
    margin: auto 8px auto 0;
}
.comments .user-name,
.comments .version-info .title {
	font-weight: 600;
	margin: auto 0;
}
.comments .user-icon {
	font-size: 14px;
    margin: auto 2px auto 0;
    opacity: .75;
}
.comments .version-info .title {margin: auto 4px auto 0;}
.comments .response-container {
	font-weight: 600;
	padding: 12px 0;
	border-width: 1px 0;
	border-style: dashed;
	border-color: rgba(0, 0, 0, 0.1);
}
.comments .response-buttons {margin: 8px 0 0 0;}
.comments .response-buttons .btn {
	font-size: 13px;
	padding: 5px 8px;
	margin: 0 4px;
}
.comments .response-buttons .btn:first-child {margin-left: 0;}
.comments .user-voted,.comments .user-count {font-weight: 700;}
.comments .user-response-toolbar {
    display: flex;
    flex-direction: column;
}
.comments .all-comments-this-usr-btn,
.comments .complaint-btn {
    display: flex;
    width: auto;
    padding: 0;
    margin: 12px 0 0 0;
    cursor: pointer;
}
.comments .all-comments-this-usr-btn .fa,.comments .complaint-btn .fa,.comments .all-comments-this-usr-btn .far,.comments .complaint-btn .far,.comments .all-comments-this-usr-btn .fas,.comments .complaint-btn .fas {margin: auto auto auto 2px;}
/*---------------------------------------------------------------
05. END OF PLUGINS
---------------------------------------------------------------*/

/*---------------------------------------------------------------
06. APP IDEAS
---------------------------------------------------------------*/
/*---------------------------------------------------------------
06. END OF APP IDEAS
---------------------------------------------------------------*/

/*---------------------------------------------------------------
07. BLOG
---------------------------------------------------------------*/
.hero-image.with-input .container-fluid {padding: 16px;}
.hero-image.with-input .container.header {padding: 0;}
.hero-image.with-input .container.header h1.title {margin: 0 0 12px 0;}
.hero-image.with-input .container.input-container {padding: 0;}
.blog .article-container > .container-fluid {background-color: #fff;}
.blog .article-container > .container-fluid .container {padding: 0;}
.blog .col-lg-9 {padding: 0;}
.blog .col-lg-3 {padding: 16px;}
.blog-list .col-lg-9 .col-md-4 {padding: 16px 16px 0 16px;}
.blog-list .col-lg-9 .col-md-4:last-child {padding-bottom: 16px;}
.filter-container {
    padding: 0;
    margin: 0 0 16px 0;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.07), 0 0 0 4px rgba(0, 0, 0, 0.05);
}
.filter-container:last-child {margin-bottom: 0;}
.filter-header {
	display: flex;
	flex-direction: row;
    padding: 12px 16px;
    color: #6c757d;
    background-color: #fafafa;
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 9px 9px 0 0;
}
.filter-header .fa,
.filter-header .far,
.filter-header .fas,
.filter-header .fab {
	margin: auto 4px auto 0;
}
.filter-container .title {
	font-size: 12px;
    font-weight: 700;
	line-height: normal;
	margin: auto auto auto 0;
}
.filter-container ul {
	list-style: none;
	list-style-type: none;
	padding: 0;
	margin: 0;
}
.filter-container li {border-bottom: 1px solid rgba(0, 0, 0, 0.125);}
.filter-container li:last-child {border: 0px none;}
.filter-container li a {
	display: block;
	font-size: 12px;
    padding: 8px 16px;
    color: #6c757d;
	border: 0px none;
	transition: color ease-in-out 300ms;
}
.filter-container li a:hover {color: #00ae14;}

.blog .pagination {
	padding: 16px;
    margin: 0;
    border-width: 1px 0 0 0;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.07);
    border-radius: 0;
}
.blog .pagination ul {
	display: flex;
	width: 100%;
	list-style: none;
	list-style-type: none;
	padding: 0;
	margin: 0;
}
.blog .pagination .page-link {
	padding: 7px 10.95px;
	color: #6c757d;
	border-radius: 50%;
	transition: all ease-in-out 300ms;
}
.blog .pagination .page-item.prev {margin: auto auto auto 0;}
.blog .pagination .page-item.next {margin: auto 0 auto auto;}
.blog .pagination ul.pages {margin: auto;}
.blog .pagination ul.pages .page-item {margin: auto 4px;}
.blog .pagination ul.pages .page-link {
	padding: 8px 12.29px;
	margin: 0;
    border: none;
    color: #6c757d;
}
.blog .pagination ul.pages .active .page-link {
	color: #fff;
    background-color: #9ca2a7;
}
.blog-detail .col-lg-3 {background-color: #f8f9fa;}
.blog-detail h1 {
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 12px 0;
}
.blog-detail h2 {
	font-size: 18px;
	font-weight: 700;
}
.blog-detail h3 {font-size: 16px;}
.article-header,.article-body {padding: 16px;}
.blog-detail .share-btn-group {
    display: flex;
    width: 100%;
}
.share-group {display: flex;}
.share-group .title .share-icon {
    font-size: 25px;
    font-weight: 800;
    margin: auto 8px auto 0;
    color: #6f42c1;
}
.share-group .title .share-icon .fa {margin-right: 8px;}
.share-group .title .share-title {display: none;}
.share-btn-group .share-btn {
	width: 32px;
    font-size: 14px;
    text-align: center;
    padding: 8px 0;
    margin: auto 12px auto 0;
	color: #fff;
	background-color: #8c959d;
    border: 1px solid #6c757d;
    border-radius: 50%;
}
.share-btn-group .share-btn:hover {text-decoration: none;}
.share-btn-group .share-btn.fa-facebook-f {
	background-color: #29487d;
	border-color: #29487d;
}
.share-btn-group .share-btn.fa-twitter {
	background-color: #1da1f2;
	border-color: #1da1f2;
}
.share-btn-group .share-btn.fa-linkedin-in {
	background-color: #0073b1;
	border-color: #0073b1;
}
.share-btn-group .share-btn.fa-google-plus-g {
	background-color: #db4437;
	border-color: #db4437;
}
.share-btn-group .share-btn.fa-envelope {
	background-color: #0073b1;
	border-color: #0073b1;
}
.article-cover-image {width: 100%;}
.blog-detail .publish-data {
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    line-height: 1;
    padding: 16px;
    background-color: #f8f9fa;
}
.filter-inline {
	display: flex;
	margin: 12px auto auto 0;
}
.filter-inline .filter-tag-icon {
	margin: auto 0;
}
.filter-inline .filter-tags {
	display: flex;
    font-size: 90%;
    margin: auto auto auto 4px;
}
.filter-inline .filter-tags a {
	margin: auto 4px;
}
.blog-detail .filter-container.search-in-blog {padding: 8px;}
.blog-detail .filter-container.search-in-blog .form-control {padding-right: 48px;}
.blog-detail .filter-container.search-in-blog .fa-search {
	top: 1px;
    right: 1px;
    width: auto;
    padding: 8.5px;
	color: inherit;
	background: none;
    border: none;
    border-radius: 0 3px 3px 0;
    opacity: 0.5;
}
.article-body img {
	max-width: 100%;
	height: auto;
}
.article-body > :last-child {margin: 0;}
.article-footer {padding: 0 16px 16px 16px;}
/*---------------------------------------------------------------
07. END OF BLOG
---------------------------------------------------------------*/

/*---------------------------------------------------------------
08. F.A.Q. PAGE
---------------------------------------------------------------*/
.container.faq {padding-top: 48px;}
.faq .row {padding: 0 20px;}
.faq .header {
	font-size: 24px;
	padding: 20px;
	color: #28a745;
}
.faq .q-form {
	flex-direction: column;
    padding: 20px 20px 0 20px;
}
.faq .q-form h6 {
	font-size: 18px;
    margin: 10px 0;
	color: #28a745;
}
.faq .q-form .row,.faq .q-form .col {padding: 0;}
.faq .q-form .separator {
	border: none;
}
.accordion {
	width: 100%;
	padding: 0;
	margin: 0;
    list-style: none;
    list-style-type: none;
}
.accordion li {
    width: 100%;
    margin: 0;
}
.accordion .btn-link {
	position: relative;
    width: 100%;
    font-size: 13px;
	font-weight: 600;
	line-height: normal;
    text-align: left;
    text-decoration: none;
    padding: 16px;
    border-width: 0 1px 1px 1px;
    border-style: solid;
    border-color: #eaeaea;
    border-radius: 0;
    transition: all ease-in-out 300ms;
}
.accordion .btn-icon {font-size: 18px;}
.accordion .btn-title {font-size: 14px;}
.accordion .btn-link:after {
	content: "";
    position: absolute;
    right: 16px;
    top: 20px;
	border-width: 0 5px 5px 5px;
	border-style: solid solid solid solid;
	border-color: transparent transparent #969696 transparent;
	transition: transform ease-in-out 300ms;
}
.accordion .btn-link.collapsed:after {
	transform: rotate(180deg);
}
.accordion li:first-child .btn-link {border-width: 1px;}
.accordion .collapsible-content {background-color: #f8f9fa;}
.accordion .collapsible-content p {
    padding: 16px;
    margin: 0;
    color: #212529;
	border-width: 0 1px 1px 1px;
    border-style: solid;
    border-color: #eaeaea;
}
.bg-light .accordion .collapsible-content p {background-color: #f8f9fa;}
.accordion .container.resources {
	width: auto;
    flex-direction: column;
    padding: 10px 0 0 0;
    margin: 20px -15px auto -15px;
}
/*---------------------------------------------------------------
08. END OF F.A.Q. PAGE
---------------------------------------------------------------*/

/*---------------------------------------------------------------
09. APPFORYOU COMPANY
---------------------------------------------------------------*/
body.about {
	color: #212529;
    background-color: #fbbe3b;
}
body.about > .container {padding: 96px 30px 30px 30px;}
body.about .container p {
	font-size: 0.875rem;
	opacity: 0.88;
}
/*---------------------------------------------------------------
09. END OF APPFORYOU COMPANY
---------------------------------------------------------------*/

/*---------------------------------------------------------------
10. RESELLER
---------------------------------------------------------------*/
.standart-pages.reseller .half-screen-jumbo .title-icon {
	font-size: 24px;
    margin: auto auto 8px 0;
}
/*---------------------------------------------------------------
10. END OF RESELLER
---------------------------------------------------------------*/

/*---------------------------------------------------------------
11. DEVELOPER
---------------------------------------------------------------*/
.content.standart-pages ul.dev-feature-list li .icon-plus-text-item-icon {
	min-width: 48px;
    width: 48px;
    font-size: 20px;
    text-align: center;
    padding: 8px 0;
    margin: auto 16px auto 0;
    color: #28a745;
    border: 1px solid #28a745;
    border-radius: 50%;
}
.content.standart-pages.developer .divider-row {padding: 0;}
/*---------------------------------------------------------------
11. END OF DEVELOPER
---------------------------------------------------------------*/

/*---------------------------------------------------------------
12. LOGIN / SIGNUP / FORGOT PASS VS
---------------------------------------------------------------*/
#userLogIn,
#userSignUp,
#userForgotPass,
#userResetPass {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background-image: -webkit-linear-gradient(left, #ea0081 0%, rgba(0,0,0,0) 50%), -webkit-linear-gradient(bottom, #00bbf7 0%, rgba(0,0,0,0) 60%), -webkit-linear-gradient(right, #28a745 0%, rgba(0,0,0,0) 50%), -webkit-linear-gradient(top, #fbbe3b 0%, rgba(0,0,0,0) 100%);
    background-image: -o-linear-gradient(left, #ea0081 0%, rgba(0,0,0,0) 40%), -o-linear-gradient(bottom, #00bbf7 0%, rgba(0,0,0,0) 60%), -o-linear-gradient(right, #28a745 0%, rgba(0,0,0,0) 40%), -o-linear-gradient(top, #fbbe3b 0%, rgba(0,0,0,0) 100%);
    background-image: linear-gradient(90deg, #ea0081 0%, rgba(0,0,0,0) 40%), linear-gradient(0deg, #00bbf7 0%, rgba(0,0,0,0) 60%), linear-gradient(270deg, #28a745 0%, rgba(0,0,0,0) 40%), linear-gradient(180deg, #fbbe3b 0%, rgba(0,0,0,0) 100%);
	background-size: 400% 400%;
	background-position: 0% 0%;
	background-color: #dc3545;
	background-color: #000;
	animation: Gradient 30s ease infinite;
}
@keyframes Gradient {
	0% {background-position: 0% 0%;}
	50% {background-position: 100% 0%;}
	75% {background-position: 50% 100%;}
	100% {background-position: 0% 0%;}
}
@-webkit-keyframes Gradient {
	0% {background-position: 0% 0%;}
	50% {background-position: 100% 0%;}
	75% {background-position: 50% 100%;}
	100% {background-position: 0% 0%;}
}
.user-pass-form {color: #6c757d;}
.user-pass-form .back-btn {
	padding: 8px 18px 8px 16px;
    margin: 16px auto;
    background-color: rgba(255, 255, 255, 0.66);
    border-radius: 50em;
}
.login-form-container {
    width: 300px;
    margin: auto;
    border-radius: 8px;
    box-shadow: 0 0 20px -10px #000;
}
.login-form-container .afy-brand {
    text-align: center;
    padding: 16px 0 14px 0;
    margin: 0 0 1px 0;
	border-radius: 8px 8px 0 0;
	background-color: rgba(255, 255, 255, 0.66);
}
.login-form-container .afy-brand img {height: 32px;}
.help-text {
	font-size: 0.8rem;
    padding: 20px 20px 20px 20px;
	margin: 0 0 1px 0;
	background-color: #ffffff;
}
.help-text p {margin-bottom: 10px;}
.help-text p strong {font-weight: 700;}
.help-text p:last-child {margin-bottom: 0;}
.login-form-container .form-group-container {
    padding: 8px 16px;
    background-color: #fff;
}
.login-form-container .submit-group {
    display: flex;
    padding: 16px;
    margin: 1px 0 0 0;
    background-color: #fff;
    border-radius: 0 0 8px 8px;
}
.login-form-container .submit-group .btn {
    width: 100%;
    white-space: nowrap;
    padding: 12px 0;
    margin: auto 8px;
}
.login-form-container .submit-group .btn-title {font-size: inherit;}
.login-form-container .submit-group .btn:first-child {margin-left: 0;}
.login-form-container .submit-group .btn:last-child {margin-right: 0;}
.login-form-container .alert {margin: 8px 0px;}
.back-btn.create-new-user {
	padding: 12px 16px;
    color: #fff;
    background-color: #28a745;
    border: 2px solid #168830;
}
.login-form-container.register-form .submit-group {
	padding: 0 16px 16px 16px;
    margin: 0;
    border-radius: 0;
}
.login-form-container .divider {
	position: relative;
    font-size: 12px;
    text-align: center;
    padding: 0;
    margin: 0;
    color: #96a2b3;
    background-color: #fff;
    border: none;
}
.login-form-container .divider:before {
    display: block;
    position: absolute;
    top: 9px;
    content: "";
    width: 100%;
    border-top: 1px solid rgba(0, 0, 0, 0.11);
}
.login-form-container .divider .helper-text {
    position: relative;
    background-color: #fff;
    padding: 0 8px;
}
.login-form-container.register-form .title {
	font-size: 14px;
    font-weight: 700;
    text-align: center;
    margin: 8px 0 24px 0;
}
.social-connect .form-group {display: flex;}
.social-connect .btn {
	width: 44px;
    height: 44px;
    color: #a4aaaf;
    padding: 0;
	margin: auto;
	box-shadow: none;
	border: 1px solid #a4aaaf;
	border-radius: 22px;
}
.social-connect .btn-fb:hover,
.social-connect .btn-fb:focus,
.social-connect .btn-fb:active {
	color: #fff;
	background-color: #29487d;
	border-color: #19386d;
}
.social-connect .btn-fb:focus {box-shadow: 0 0 0 3px rgba(41, 72, 125, 0.33);}
.social-connect .btn-tw:hover,
.social-connect .btn-tw:focus,
.social-connect .btn-tw:active {
	color: #fff;
	background-color: #1da1f2;
	border-color: #0d91e2;
}
.social-connect .btn-tw:focus {box-shadow: 0 0 0 3px rgba(29, 161, 242, 0.33);}
.social-connect .btn-lnk:hover,
.social-connect .btn-lnk:focus,
.social-connect .btn-lnk:active {
	color: #fff;
	background-color: #0073b1;
	border-color: #0063a1;
}
.social-connect .btn-lnk:focus {box-shadow: 0 0 0 3px rgba(0, 115, 177, 0.33);}
.social-connect .btn-gplus:hover,
.social-connect .btn-gplus:focus,
.social-connect .btn-gplus:active {
	color: #fff;
	background-color: #db4437;
	border-color: #cb3427;
}
.social-connect .btn-gplus:focus {box-shadow: 0 0 0 3px rgba(219, 68, 55, 0.33);}
.login-form-container.register-form .submit-group.legal-notice {
	display: block;
	text-align: center;
	padding: 16px;
    margin: 1px 0 0 0;
    border-radius: 0 0 8px 8px;
}
small.legal-notice a {
	font-weight: 600;
	text-decoration: none;
	color: #28a745;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: transparent;
	transition: all ease-in-out 300ms;
}
small.legal-notice a:hover {border-bottom-color: #28a745;}
/*---------------------------------------------------------------
12. END OF LOGIN / SIGNUP / FORGOT PASS VS
---------------------------------------------------------------*/

/*---------------------------------------------------------------
13. FOOTER
---------------------------------------------------------------*/
#footer {
	position: relative;
    padding: 0;
    margin: 0 auto 0 auto;
	background: linear-gradient(to top, #fff 0%,#fafafa 99.8%,#ddd 99.8%,#ddd 100%);
	z-index: 1;
}
#footer .container-fluid {
	position: relative;
	box-shadow: 0 4px 8px -4px rgba(0, 0, 0, 0.33);
	z-index: 1;
}
#footer .container-fluid,#footer .container-fluid .container {padding: 0;}
#footer .container-fluid .container {padding: 16px;}
#footer img {
	height: 14px;
    margin: 3px 0 12px 0;
}
#footer img.afy-logo {
	height: 36px;
    margin: 0;
}
#footer ul {
    padding: 10px 10px 10px 0;
    margin: auto 0 0 0;
    list-style: none;
    list-style-type: none;
}
#footer ul.social-icons {
	display: flex;
    flex-direction: row;
	padding: 10px 0 0 0;
}
#footer ul.social-icons li {margin-right: 16px;}
#footer p {
	font-size: 0.825rem;
    margin-bottom: 10px;
}
#footer .fa,
#footer .far,
#footer .fas,
#footer .fal,
#footer .fab {
	width: 30px;
    font-size: 18px;
    text-align: center;
    padding: 5px 6px 5px 6px;
	border: 1px solid transparent;
    border-radius: 0;
	transition: all ease-in-out 300ms;
}
#footer a {
	font-size: 0.85rem;
	color: inherit;
	text-decoration: none;
	transition: all ease-in-out 300ms;
}
#footer .separator {
	border-width: 1px 0 0 0;
    margin: 10px 0;
	border-color: rgba(0, 0, 0, 0.07);
}
#footer h6 {
    font-size: 1.125rem;
    letter-spacing: 0.05em;
    color: #A3B1BF;
    margin: auto auto auto 5px;
}
#footer .col-sm-3 {
	padding: 16px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}
#footer .col-sm-3:first-child {padding-top: 8px;}
#footer .col-sm-3 a:hover {color: #03A9F4;}
#footer a:hover .fa,
#footer a:hover .far,
#footer a:hover .fas,
#footer a:hover .fal,
#footer a:hover .fab {
	color: #03A9F4;
	border-color: #03A9F4;
	border-radius: 15px;
}
#footer .col-sm-3.color-afy h5 {
	font-size: 1rem;
	font-weight: 700;
	margin: 0 0 5px 0;
}
#footer .col-sm-3.color-afy ul {padding: 0;}
#footer .col-sm-3.color-afy a:hover {color: #00ae14;}
#footer .footer-info li a {
	display: flex;
	flex-direction: row;
    font-size: 0.825rem;
    padding: 0;
	margin: auto auto auto auto;
}
#footer .flex-column .basic-info {
	display: flex;
    flex-direction: column;
    padding: 0;
}
#footer .flex-column .basic-info a {margin: 12px 0 auto 0;}
#footer .flex-column .footer-info {
	margin: 0;
}
#footer .flex-column ul {
	display: flex;
    flex-direction: column;
    padding: 0;
}
#footer .flex-column .basic-info ul a {margin: 0;}
#footer .flex-column .fa {
	font-size: 14px;
    padding: 7px 6px 7px 6px;
    margin: 0;
}
#footer .flex-column .title {
	padding: 0 8px 0 0;
	margin: auto auto auto 0;
	transition: all ease-in-out 300ms;
}
#footer .flex-column a:hover {color: #28a745;}
#footer .flex-column a:hover .fa {
	color: #28a745;
	border-color: #28a745;
}
#footer .flex-column a:hover .title {
	padding: 0 0 0 8px;
	margin: auto auto auto 0;
}
#footer .container-fluid.payment-methods {
	background-color: #fff;
	box-shadow: none;
	z-index: 0;
}
#footer .container-fluid.payment-methods .container {
	text-align: center;
	padding: 15px 15px 75px 15px;
	border: 0 none;
}
#footer .container-fluid.payment-methods img {
	width: 13%;
    height: auto;
    padding: 0.3125rem 0.5rem 0.3125rem 0.5rem;
	margin: 0;
	background-color: #FFFFFF;
    border-radius: 3px;
}
#footer .container-fluid.payment-methods img.iyzico {padding: 0.462rem 0.5rem 0.462rem 0.5rem;}
#footer .container-fluid.payment-methods img.mastercard {padding: 0.377rem 0.5rem 0.377rem 0.5rem;}
#footer .container-fluid.payment-methods img.maestro {padding: 0.377rem 0.5rem 0.377rem 0.5rem;}
#footer .container-fluid.payment-methods img.visa {padding: 0.492rem 0.5rem 0.492rem 0.5rem;}
#footer .container-fluid.payment-methods img.visa-electro {padding: 0.359rem 0.5rem 0.359rem 0.5rem;}
#footer .container-fluid.payment-methods img.american-express {padding: 0.3125rem 0.5rem 0.3125rem 0.5rem;}
#footer .container-fluid.payment-methods img.troy {padding: 0.371rem 0.5rem 0.371rem 0.5rem;}
/*---------------------------------------------------------------
13. END OF FOOTER
---------------------------------------------------------------*/

/*---------------------------------------------------------------
??. APP WIZARD
---------------------------------------------------------------*/
.app-wizard {padding: 0;}
.app-wizard-form-container {
    display: flex;
	flex-direction: column;
}
.app-wizard-header {
    display: flex;
    padding: 4px 4px 3px 4px;
    margin: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}
.wizard-title .title {
	font-size: 13px;
    font-weight: 600;
	line-height: normal;
}
.app-wizard .separator {border-color: rgba(0, 0, 0, 0.07);}
.switcher-with-text.wizard-light-ui .label:first-child,
.switcher-with-text.wizard-dark-ui .label:last-child {
	color: #fff;
	opacity: 1;
}
.switcher-with-text.wizard-dark-ui::before {
	transform: translateX(100%);
	margin-left: 4px;
}
.app-wizard-header .afy-brand {
	width: 38px;
	overflow: hidden;
}
.app-wizard-body {
	display: flex;
	height: calc(100vh - 114px);
    padding: 0;
	margin: 0;
}
.app-wizard-body .template-sample-container {
	display: flex;
	width: 100%;
	margin: auto;
	overflow: hidden;

	justify-content: center;
}
.app-wizard-body .template-sample-container .content-image {
	flex-direction: column;
    width: 220px;
    padding: 0;
	margin: auto;
	
	margin: unset;
}
.app-wizard-body .sample-container .device {
	top: 0;
    width: 200px;
    height: 389px;
    margin: auto;
    opacity: 1;
}
.app-wizard-body .device-container.computer {
	flex-direction: column;
    top: 0;
    width: 580px;
    height: 440px;
    margin: auto;
	opacity: 1;
	
	margin: 0 16px;
}
.app-wizard-body .device-container.computer .laptop-sample {
	transform: scale(2.5);
    transform-origin: center;
}
.app-wizard-body .device .phone-sample {
    margin: -72px 12px 0 12px;
    transform: scale(0.6903);
    transform-origin: left center;
}
.app-wizard-theme-container {
	position: relative;
    display: flex;
    flex-direction: column;
	min-width: 280px;
	max-width: 280px;
    max-height: 100%;
    padding: 0 10px 0 0;
    margin: 38px 0 0 0;
    overflow-y: auto;
}
.theme-list-header {
	position: fixed;
	left: 0;
	top: 48px;
	height: 48px;
	overflow: hidden;
    z-index: 1;
}
.theme-list-header .title {
	position: relative;
	width: 260px;
	font-size: 15px;
    font-weight: 700;
    text-align: center;
    padding: 8px 16px;
    margin: 0 0 0 0;
    background-color: #fff;
    border-right: 1px solid rgba(0, 0, 0, 0.07);
	border-bottom: 1px solid rgba(0, 0, 0, 0.07);
	z-index: 1;
}
.theme-list-header::before {
	content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 10px;
    bottom: 10px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}
ul.app-wizard-themes {
	max-width: 260px;
	height: 100%;
	padding: 0;
	margin: 0;
	border-right: 1px solid rgba(0, 0, 0, 0.07);
	list-style: none;
	list-style-type: none;
}
li.theme-sample {
	position: relative;
	border-bottom: 1px solid rgba(0, 0, 0, 0.07);
	transition: all ease-in-out 300ms;
	cursor: pointer;
}
li.theme-sample > .mat-ripple-fx {
	display: flex;
	flex-wrap: wrap;
	position: relative;
	padding: 4px;
}
li.theme-sample .theme-name {
	width: 100%;
    font-size: 13px;
    font-weight: 300;
    padding: 8px 4px 4px 4px;
    margin: 0 10px 4px 4px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
li.theme-sample .theme-name strong {font-weight: 800;}
li.theme-sample::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    border-width: 8px 0 8px 8px;
    border-style: solid;
    border-color: transparent;
	transform: translate(0, -50%);
	transition: all ease-in-out 200ms;
}
li.theme-sample.active {
	background-color: #f8f9fa;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.22) inset;
}
li.theme-sample.active::after {
	right: -8px;
	border-left-color: #e1e3e4;
}
li.theme-sample:last-child {border: none;}
li.theme-sample > .mat-ripple-fx > img {
	width: 64px;
	margin: auto;
	border-radius: 10px;
	transition: all ease-in-out 300ms;
}
li.theme-sample:hover > .mat-ripple-fx > img {
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.66);
}
li.theme-sample .short-brief {
    font-size: 12px;
    padding: 0 8px;
    margin: auto;
}
li.theme-sample .theme-price {
	display: flex;
    font-size: 14px;
    padding: 2px 2px 4px 2px;
    margin: 0 -4px 4px -4px;
    color: #28a745;
    border-bottom: 1px solid rgba(40, 167, 69, 0.5);
}
li.theme-sample .price-value {margin: auto 0;}
li.theme-sample .price-currency {margin: auto auto auto 4px;}
li.theme-sample .theme-price.free .price-currency {display: none;}
li.theme-sample .price-helper {
    font-size: 10px;
    padding: 4px 5.25px;
    margin: auto -3px auto auto;
	border-radius: 9px;
	transition: all ease-in-out 300ms;
}
.data-helper-container {
    position: absolute;
    left: 40%;
    right: 54px;
    font-size: 12px;
    text-align: left;
    padding: 16px;
    color: #fff;
    background-color: #343a40;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
	border: 1px solid #28a745;
    border-radius: 8px;
    z-index: 1;
}
.data-helper-container::after {
	content: "";
    display: block;
	position: absolute;
	top: 50%;
    right: -2px;
    width: 10px;
    height: 10px;
    background-color: #343a40;
	box-shadow: 2px -2px 2px rgba(0, 0, 0, 0.3);
	border-width: 1px 1px 0 0;
	border-style: solid;
	border-color: #28a745;
    transform: rotate(45deg) translate(0, -50%);
}
li.theme-sample .price-helper:hover {
    color: #fff;
    background-color: #28a745;
}
li.theme-sample .platform-type.supported {
	display: flex;
	padding: 4px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
li.theme-sample .platform-icon-logo {
	display: flex;
	width: 25px;
	font-size: 16px;
	text-align: center;
    line-height: normal;
	margin: auto 4px auto 0;
}
li.theme-sample .platform-icon-logo.fa-globe-americas {font-size: 14px;}
li.theme-sample .platform-icon-logo img {
	width: 100%;
	margin: auto auto auto -2px;
}
.platform-name {margin: auto auto auto 0;}
.developer-sign {
	display: flex;
	font-size: 11px;
	padding: 8px 0;
}
.developer-sign .title {margin: auto 4px auto 0;}
.developer-sign .value {font-weight: 700;}
.app-wizard-body .screen-group, .app-wizard-body .laptop-screen-group {display: none;}
.app-wizard-body .screen-group.active, .app-wizard-body .laptop-screen-group.active {display: block;}
.app-wizard-footer {
    display: flex;
    padding: 16px;
    margin: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
}
.app-wizard-footer .btn {height: 33px;}
.plaform-indicator {
    display: flex;
    width: 100%;
    font-size: 12px;
    text-align: center;
    padding: 8px 0 0 0;
    margin: 24px auto 0 auto;
    border-top: 1px solid #e5e5e5;
}
.plaform-indicator .platform-type {
	display: flex;
	margin: auto;
}
.plaform-indicator .platform-icon-logo {
	line-height: 1;
	margin: auto 0;
}
.plaform-indicator .platform-icon-logo.pwa-logo img {
	width: 25px;
}
.plaform-indicator .platform-name {margin: auto auto auto 4px;}
.plaform-indicator .group-title {
	font-weight: 700;
	margin: auto auto auto 8px;
}
/* Second Step */
.app-wizard-body.step-2 .template-sample-container {
	transform: translate(100%, 0);
	transition: all ease-in-out 600ms;
}
.app-wizard-body.step-2 .template-sample-container.active {transform: translate(0, 0);}
.choosen-theme-title {
	position: absolute;
    width: 100%;
    font-size: 13px;
    text-align: center;
    padding: 16px;
    z-index: 1;
    background-color: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}
.app-wizard-theme-container.finish-form {
	padding: 0;
    margin: 52px 0 0 0;
    background-color: #fff;
    border-left: 1px solid rgba(0, 0, 0, 0.07);
}

body.wizard-dark-ui .app-wizard {color: #899096;}
body.wizard-dark-ui,
body.wizard-dark-ui ul.app-wizard-themes,
body.wizard-dark-ui .theme-list-header .title,
body.wizard-dark-ui .choosen-theme-title,
body.wizard-dark-ui .app-wizard-theme-container.finish-form {
	background-color: #242b33;
}
body.wizard-dark-ui .app-wizard-body {background-color: #1c2229;}
body.wizard-dark-ui .app-wizard .separator,
body.wizard-dark-ui .divider,
body.wizard-dark-ui .app-wizard-header,
body.wizard-dark-ui .app-wizard-footer,
body.wizard-dark-ui ul.app-wizard-themes,
body.wizard-dark-ui .theme-list-header .title,
body.wizard-dark-ui li.theme-sample,
body.wizard-dark-ui li.theme-sample .theme-name,
body.wizard-dark-ui li.theme-sample .platform-type.supported,
body.wizard-dark-ui .plaform-indicator,
body.wizard-dark-ui .switcher-with-text,
body.wizard-dark-ui .choosen-theme-title,
body.wizard-dark-ui .app-wizard-theme-container.finish-form {
	border-color: rgba(255, 255, 255, 0.1);
}
body.wizard-dark-ui .plaform-indicator {opacity: 0.5;}
body.wizard-dark-ui li.theme-sample.active {
	color: #a4aaaf;
	background-color: #343a40;
}
body.wizard-dark-ui li.theme-sample.active::after {border-left-color: #394147;}
body.wizard-dark-ui li.theme-sample .platform-icon-logo img, body.wizard-dark-ui .plaform-indicator .platform-icon-logo.pwa-logo img {filter: invert(1);}
body.wizard-dark-ui .sample-container .device .phone-sample {box-shadow: 0 0 8px rgba(0, 0, 0, 0.33) inset, 0 0 16px #000;}
body.wizard-dark-ui .laptop-body {background-image: linear-gradient(0deg, #31363b 10%, rgba(0,0,0,0) 100%), linear-gradient(180deg, #52575c 0%, rgba(0,0,0,0) 100%);}
body.wizard-dark-ui .laptop-notch {background-color: #3b3d40;}
body.wizard-dark-ui .laptop-screen-bezel {
	background-color: #1b2228;
    border-color: #31363b;
    box-shadow: 0 0 16px #000;
}
body.wizard-dark-ui .switcher-with-text::before {background-color: rgba(255, 255, 255, 0.1);}
body.wizard-dark-ui .switcher-with-text.wizard-light-ui .label:first-child, body.wizard-dark-ui .switcher-with-text.wizard-dark-ui .label:last-child {color: #1a1f24;}
body.wizard-dark-ui .general-preloader {background-color: #000;}
body.wizard-dark-ui input {
	color: #6c757d;
	background-color: #232b32;
    border-color: #49525a;
}
body.wizard-dark-ui input:focus {
	color: #6c757d;
	background-color: #232b32;
}
body.wizard-dark-ui .mat-outline-input-container .placeholder-txt {background-color: #232b32;}
body.wizard-dark-ui input:-webkit-autofill {
	color: #6c757d !important;
	box-shadow: 0 0 0 30px #232b32 inset !important;
}
body.wizard-dark-ui .uploaded-preview .dummy-image {border-color: #fff;}
body.wizard-dark-ui .uploaded-preview .uploaded-image-preview {border-color: #343a40;}
body.wizard-dark-ui .afy-alert-modal .divider {border-color: rgba(0, 0, 0, 0.1);}
.cookie-alert-added .modal-dialog-scrollable {
	height: 100%;
    max-height: 100%;
    padding: 32px 0 128px 0;
    margin: 0 auto;
}
.cookie-alert-added .modal-dialog-scrollable .modal-content {
	height: auto;
    max-height: 100%;
    margin: auto;
}
/*---------------------------------------------------------------
??. END OF APP WIZARD
---------------------------------------------------------------*/

/*---------------------------------------------------------------
XX. FLAGS
---------------------------------------------------------------*/
.flag-icon-background {
	background-size: contain;
	background-position: 50%;
	background-repeat: no-repeat;
}
.flag-icon {
	background-size: contain;
	background-position: 50%;
	background-repeat: no-repeat;
	position: relative;
	display: inline-block;
	width: 1.33333333em;
	line-height: 1em;
}
.flag-icon:before {
	content: "\00a0";
}
.flag-icon.flag-icon-squared {
	width: 1em;
}
.flag-icon-tr {
	background-image: url(../flags/4x3/tr.svg);
}
.flag-icon-gb {
	background-image: url(../flags/4x3/gb.svg);
  }
/*---------------------------------------------------------------
XX. END OF FLAGS
---------------------------------------------------------------*/

/*---------------------------------------------------------------
YY. AFY ADMIN APP SCREEN
---------------------------------------------------------------*/
.sample-app-group .admin-nav {
	display: block;
    width: 100%;
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
}
.sample-app-group * {cursor: default !important;}
.sample-app-group .bottombar-true .admin-nav {height: calc(100% - 72px);}
.sample-app-group .admin-nav li {min-width: 100%;}
.sample-app-group .admin-nav .nav-link {
    display: flex;
    position: relative;
    flex-direction: row;
    text-align: left;
    padding: 16px 24px;
    color: #6c757d;
    border-width: 1px 0 1px 0;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.06) transparent rgba(0, 0, 0, 0.11) transparent;
}
.sample-app-group .admin-nav li:last-child .nav-link {border-bottom: none;}
.sample-app-group .admin-nav .admin-nav-icon {
	min-width: 20px;
	font-size: 16px;
    text-align: center;
    margin: auto 0 auto 0;
}
.sample-app-group .admin-nav .nav-link-title {
	font-size: 12px;
	margin: auto auto auto 8px;
}
.dark-ui .device-status-bar, .template-sample-container .dark-ui .device-status-bar {color: rgba(255, 255, 255, 0.66);}
.dark-ui .admin-nav, .dark-ui .appbar-component.appbar, .dark-ui .bottom-navigation {background-color: #242b33;}
.dark-ui .sample-app-group .admin-nav .nav-link {border-color: rgba(255, 255, 255, 0.06) transparent rgba(0, 0, 0, 0.33) transparent;}
.dark-ui .bottom-navigation .component-item-title {color: #6c757d;}
/*---------------------------------------------------------------
YY. END OF AFY ADMIN APP SCREEN
---------------------------------------------------------------*/

/*---------------------------------------------------------------
YY. TERMS & CONDITIONS
---------------------------------------------------------------*/
.shortcut-container {
	width: 300px;
}
.terms-conditions ul.shortcuts {
	width: 300px;
	list-style: none;
	list-style-type: none;
	padding: 0;
	margin: 0;
	border-radius: 8px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.07), 0 0 0 4px rgba(0, 0, 0, 0.05);
	transition: top ease-in-out 200ms;
}
.terms-conditions ul.shortcuts.large-list {
	position: fixed;
	top: 296px;
	bottom: 48px;
	overflow-x: hidden;
	overflow-y: auto;
}
.terms-conditions ul.shortcuts.sticky {
	position: fixed;
	top: 98px;
}
.terms-conditions ul.shortcuts li a {
	font-weight: 600;
	text-decoration: none;
	padding: 16px;
	color: inherit;
    border-width: 0 0 1px 0;
    border-style: solid;
	border-color: rgba(0, 0, 0, 0.1);
	transition: all ease-in-out 300ms;
}
.terms-conditions ul.shortcuts li a:hover {
	color: #28a745;
    background-color: rgba(40, 167, 69, 0.1);
}
.terms-conditions ul.shortcuts li:first-child a {border-radius: 8px 8px 0 0;}
.terms-conditions ul.shortcuts li:last-child a {
	border: none;
	border-radius: 0 0 8px 8px;
}
.terms-conditions ul.shortcuts li a.active {color: #28a745;}
.terms-conditions ul.shortcuts li a .title {padding-right: 8px;}
.terms-conditions ul.shortcuts li > ul {
	font-size: 12px;
	list-style: none;
    padding: 0;
    margin: 0;
    background-color: #f8f9fa;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.terms-conditions ul.shortcuts li > ul > li a {padding: 16px 16px 16px 32px;}
.terms-conditions ul.shortcuts li > ul > li:first-child a, .terms-conditions ul.shortcuts li > ul > li:last-child a {border-radius: 0;}
.terms-conditions h2, .terms-conditions h3, .terms-conditions h4, .terms-conditions h5 {font-weight: 700;}
.terms-conditions h2 {font-size: 26px;}
.terms-conditions h3 {font-size: 20px;}
.terms-conditions h4 {
	font-size: 14px;
	font-weight: 800;
}
.terms-conditions h2:focus,
.terms-conditions h3:focus,
.terms-conditions h4:focus {
	color: #28a745;
	text-decoration: underline;
}
/*---------------------------------------------------------------
YY. END OF TERMS & CONDITIONS
---------------------------------------------------------------*/






/*---------------------------------------------------------------
XX. MEDIA QUERIES
---------------------------------------------------------------*/
@media (min-width:360px) {
	.builder-screen-phone .screen-only.screen-group {
		transform: scale(.26);
		margin: 31px auto;
	}
}
@media (min-width:375px) {
	.all-in-one-computer:after {margin-top: -5%;}
	.computer-screen-group > .screen-bezel {border-radius: 8px 8px 0 0;}
	.all-in-one-computer .screen-bezel > .camera {
		top: 1.5px;
		width: 5px;
		height: 5px;
	}
	.builder-screen-phone .phone-sample.old-school {border-radius: 10px;}
	.phone-sample.old-school .grid-container {padding-top: 52px;}
	.builder-screen-phone .screen-only.screen-group {
		transform: scale(.275);
		margin: 32px auto;
	}
	#landingSection .device-samples {margin-top: 20px;}
	#landingSection .sample-container.sample-phone {margin: -200px -150px 0 40px;}
	.tablet-sample .general-preloader .preloader-img {transform: scale(4.762);}
	.phone-sample .general-preloader .preloader-img {transform: scale(4.21);}
	.laptop-sample .general-preloader .preloader-img {transform: scale(0.833);}
	#landingSection .device-samples .device.tablet {transform: scale(0.6);}
	.laptop-sample .general-preloader.pwa-sample-preloader .preloader-img {transform: scale(0.851);}
	.phone-sample .general-preloader.pwa-sample-preloader .preloader-img {transform: scale(3.082);}
	#landingSection .device-samples .device.phone {
		transform: scale(0.95);
		margin: auto auto 48px -120px;
	}
	#landingSection .device-samples .device.laptop {
		transform: scale(1.2);
		margin: auto auto 64px -60px;
	}
	#webPwaSection .sample-container {
		margin: 24px auto auto 0;
		transform: scale(1.175);
		transform-origin: left bottom;
	}
	
	/*---------------------------------------------------------------
	02. STANDART SUB PAGES
	---------------------------------------------------------------*/
	.content.standart-pages .content-image.web-template-container {margin: 40px 0 40px -12px;}
	.content.standart-pages .content-image.web-template-container .device-container {transform: scale(1.55);}
	.native-app .hero-image .phone-sample {margin-top: 32px;}
	.content.standart-pages .container-fluid .image-container.real-size.iphone-x-etc.cover-illustration .phone-sample {margin: auto;}
	.sample-container.versus {height: 320px;}
	.sample-container.versus .group-resizer {transform: scale(.5);}
	.standart-pages.pwa-app .sample-container {
		transform: scale(1.175);
		transform-origin: center;
	}
	.styled-carousel .carousel-control-prev, .styled-carousel .carousel-control-next {top: calc(14.5% + 8px);}
	.inline-popper-container {
		left: -10px;
		transform: none;
	}
	/*---------------------------------------------------------------
	02. END OF STANDART SUB PAGES
	---------------------------------------------------------------*/

	/*---------------------------------------------------------------
	08. CONTROL PANEL & CMS PAGE
	---------------------------------------------------------------*/
	.cms .styled-carousel .carousel-control-prev, .cms .styled-carousel .carousel-control-next {top: calc(19.5% + 8px);}
	.cms #sampleVideo-2.styled-carousel .carousel-control-prev, .cms #sampleVideo-2.styled-carousel .carousel-control-next {top: calc(27.5% + 8px);}
	.cms #sampleVideo-3.styled-carousel .carousel-control-prev, .cms #sampleVideo-3.styled-carousel .carousel-control-next {top: calc(26.5% + 8px);}
	/*---------------------------------------------------------------
	08. END OF CONTROL PANEL & CMS PAGE
	---------------------------------------------------------------*/

	/*---------------------------------------------------------------
	09. PRICING PAGE
	---------------------------------------------------------------*/
	.pricing .nav-tabs .nav-link {width: 172px;}
	.content.standart-pages .container-fluid .container .row.compare-price-plans {margin: 0;}
	.price-samples .table th, .price-samples .table td {font-size: 11px;}
	/*---------------------------------------------------------------
	09. END OF PRICING PAGE
	---------------------------------------------------------------*/
}
@media (min-width:384px) {
	.builder-screen-phone {padding: 2% 0 0 5.1%;}
	.builder-screen-phone .screen-only.screen-group {transform: scale(.28);}
}
@media (min-width:411px) {
	.all-in-one-computer:after {margin-top: -4.25%;}
	.computer-screen-group > .screen-bezel {border-radius: 10px 10px 0 0;}
	.all-in-one-computer .screen-bezel > .camera {top: 2px;}
	.builder-screen-phone {padding: 2% 0 0 5.3%;}
	.builder-screen-phone .phone-sample.old-school {border-radius: 12px;}
	.builder-screen-phone .screen-only.screen-group {
		height: 417px;
		transform: scale(.3);
		transform-origin: center top;
		margin: 35px auto;
	}
	.phone-sample.old-school .grid-container {padding-top: 60px;}
	#landingSection .device-samples {margin-top: 32px;}
	#landingSection .sample-container.sample-phone {margin: -200px -160px 0 50px;}
	.tablet-sample .general-preloader .preloader-img {transform: scale(4.081);}
	.phone-sample .general-preloader .preloader-img {transform: scale(3.478);}
	.laptop-sample .general-preloader .preloader-img {transform: scale(0.7691);}
	.laptop-sample .general-preloader.pwa-sample-preloader .preloader-img {transform: scale(0.7692);}
	.phone-sample .general-preloader.pwa-sample-preloader .preloader-img {transform: scale(2.786);}
	#landingSection .device-samples .device.tablet {transform: scale(0.7);}
	#landingSection .device-samples .device.phone {
		transform: scale(1.15);
		margin: auto auto 45px -105px;
	}
	#landingSection .device-samples .device.laptop {transform: scale(1.3);}
	#webPwaSection .sample-container {
		margin: 40px auto auto 0;
		transform: scale(1.3);
	}

	/*---------------------------------------------------------------
	02. STANDART SUB PAGES
	---------------------------------------------------------------*/
	.content.standart-pages .content-image.web-template-container {margin: 50px 0 50px -12px;}
	.content.standart-pages .content-image.web-template-container .device-container {transform: scale(1.7);}
	.sample-container.versus {height: 353px;}
	.sample-container.versus .group-resizer {transform: scale(.55);}
	.native-app .hero-image .phone-sample {margin-top: 50px;}
	.standart-pages.pwa-app .sample-container {transform: scale(1.3);}
	.content.standart-pages .content-image {width: 50%;}
	.styled-carousel .carousel-control-prev, .styled-carousel .carousel-control-next {top: calc(16.66667% + 8px);}
	/*---------------------------------------------------------------
	02. END OF STANDART SUB PAGES
	---------------------------------------------------------------*/

	/*---------------------------------------------------------------
	08. CONTROL PANEL & CMS PAGE
	---------------------------------------------------------------*/
	.cms .styled-carousel .carousel-control-prev, .cms .styled-carousel .carousel-control-next {top: calc(21% + 8px);}
	.cms #sampleVideo-3.styled-carousel .carousel-control-prev, .cms #sampleVideo-3.styled-carousel .carousel-control-next {top: calc(28% + 8px);}
	/*---------------------------------------------------------------
	08. END OF CONTROL PANEL & CMS PAGE
	---------------------------------------------------------------*/

	/*---------------------------------------------------------------
	09. PRICING PAGE
	---------------------------------------------------------------*/
	.pricing .nav-tabs .nav-link {width: 192px;}
	.compare-plan-btn {font-size: 14px;}
	.compare-plan-btn .btn-icon {font-size: 16px;}
	.price-sample .price-title {
		font-size: 20px;
		padding: 16px 16px 4px 32px;}
	.price-sample .price-currency {font-size: 18px;}
	.price-sample .price-value {font-size: 48px;}
	.price-sample .period-term::before {font-size: 48px;}
	.price-sample .period {font-size: 18px;}
	.price-sample .term {font-size: 13px;}
	.price-sample ul li {
		font-size: 13px;
		padding: 8px 16px;
	}
	.price-plan-changer {font-size: 14px;}
	.price-plan-changer::before {width: 92px;}
	.price-plan-changer.yearly-selected::before {transform: translateX(96px);}
	.price-plan-label {
		width: 96px;
		padding: 8px;
	}
	.price-samples .table th, .price-samples .table td {font-size: 12px;}
	/*---------------------------------------------------------------
	09. END OF PRICING PAGE
	---------------------------------------------------------------*/

	/*---------------------------------------------------------------
	07. BLOG
	---------------------------------------------------------------*/
	.blog .col-lg-3 {
		display: flex;
		padding: 16px 8px;
	}
	.filter-container {
		width: 100%;
		margin: 0 8px;
	}
	.blog-detail .col-lg-3 {
		flex-wrap: wrap;
		padding: 16px;
	}
	.blog-detail .filter-container {width: calc(33.333337% - 11px);}
	.blog-detail .filter-container.filter {margin-left: 0;}
	.blog-detail .filter-container.archive {margin-right: 0;}
	.blog-detail .filter-container.search-in-blog {
		width: 100%;
		margin: 0 0 16px 0;
	}
	/*---------------------------------------------------------------
	07. END OF BLOG
	---------------------------------------------------------------*/

	#footer .col-sm-3,
	#footer .col-sm-3:first-child {
		width: 50%;
		padding: 16px;
	}
	#footer .col-sm-3:nth-child(1),#footer .col-sm-3:nth-child(3),#footer .col-sm-3:nth-child(3) {padding-left: 0;}
	#footer .col-sm-3:nth-child(2),#footer .col-sm-3:nth-child(4),#footer .col-sm-3:nth-child(6) {padding-right: 0;}
	#footer .col-sm-3:nth-child(1),#footer .col-sm-3:nth-child(2) {padding-top: 0;}
	#footer ul.social-icons {justify-content: space-between;}
	#footer ul.social-icons li {margin-right: 0;}
	#footer .flex-column ul {
		flex-direction: row;
		flex-wrap: wrap;
	}
	#footer .flex-column ul li {
		width: 50%;
		margin: 0 0 10px 0;
	}
	#footer .flex-column .fa {margin: 0 0 auto 0;}
}
@media (min-width:480px) {
	.builder-screen-phone .screen-only.screen-group {
		transform: scale(.35);
		margin: 41px auto;
	}
}
@media (min-width:576px) {
	.all-in-one-computer:after {margin-top: -3.5%;}
	.all-in-one-computer .screen-bezel > .camera {
		width: 6px;
		height: 6px;
	}
	.section.container-fluid .header > .title {font-size: 25px;}
	.section.container-fluid .header > .caption {font-size: 15px;}
	.builder-screen-phone .phone-sample.old-school {border-radius: 16px;}
	.builder-screen-phone .screen-only.screen-group {
		height: 419px;
		transform: scale(.4);
		transform-origin: center top;
		margin: 46px auto;
	}
	.phone-sample.old-school .grid-container {padding-top: 88px;}
	#landingSection .container {padding: 48px 16px;}
	#landingSection .device-samples {margin-top: 128px;}
	.tablet-sample .general-preloader .preloader-img {transform: scale(3.307);}
	.phone-sample .general-preloader .preloader-img {transform: scale(2.7777);}
	.laptop-sample .general-preloader .preloader-img {transform: scale(0.5788);}
	.laptop-sample .general-preloader.pwa-sample-preloader .preloader-img {transform: scale(0.5714);}
	.phone-sample .general-preloader.pwa-sample-preloader .preloader-img {transform: scale(2.0693);}
	#landingSection .sample-container.sample-tablet {margin: -165px -280px -345px -158px;}
	#landingSection .sample-container.sample-tablet .phone-shadow {bottom: 64px;}
	#landingSection .device-samples .device.tablet {transform: scale(0.9);}
	#landingSection .sample-container.sample-phone {margin: -190px -180px 0 70px;}
	#landingSection .device-samples .device.phone {
		transform: scale(1.5);
		margin: auto auto 40px -48px;
	}
	#landingSection .device-samples .device.laptop {
		transform: scale(1.8);
		margin: auto auto 25px -88px;
	}
	.plugin-blocks ul li {width: 50%;}
	.card-list {margin: -8px;}
	.card-list li {
		width: calc(50% - 16px);
		margin: 8px;
	}
	.plugin-blocks ul li.show-all-btn .btn,
	.card-list li.show-all-btn .btn {
		flex-direction: column;
		width: 128px;
		height: 128px;
		border-radius: 50%;
	}
	.plugin-blocks ul li.show-all-btn .btn-icon,.card-list li.show-all-btn .btn-icon {margin: auto auto 4px auto;}
	.plugin-blocks ul li.show-all-btn .btn-title,.card-list li.show-all-btn .btn-title {margin: 4px auto auto auto;}
	#webPwaSection .sample-container {
		margin: 120px auto auto 0;
		transform: scale(1.75);
	}
	#faqSection .container.resources {
		min-width: 100%;
		width: auto;
		max-width: unset;
	}
	.resource-group {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
	}
	.resource-group .btn:hover {background-color: rgba(114,0,123,1);}
	#footer .flex-column .footer-info {margin: auto auto auto 0;}
	#footer .flex-column ul {flex-direction: row;}
	.login-form-container {width: 460px;}
	.afy-brand img {height: 40px;}
	#socialConnect .form-group .btn {margin: auto 10px auto 10px;}

	/*---------------------------------------------------------------
	02. STANDART SUB PAGES
	---------------------------------------------------------------*/
	.content.standart-pages .content-image.web-template-container {margin: 96px 0 96px -48px;}
	.content.standart-pages .content-image.web-template-container .device-container {transform: scale(2.3);}
	.sample-container.versus {height: 480px;}
	.sample-container.versus .group-resizer {transform: scale(.75);}
	.standart-pages.pwa-app .sample-container {
		margin: 48px auto;
		transform: scale(1.75);
	}
	.afy-app-step h2 {
		font-size: 20px;
		margin: auto auto 32px auto;
	}
	.overview .afy-app-step h2 {margin-bottom: 8px;}
	.afy-app-step p {margin: auto auto 64px auto;}
	.afy-app-step .action-btn-group {margin: 48px auto auto auto;}
	.content.standart-pages .hero-text .floating-col-with-icons {text-align: center;}
	.afy-app-step .col-2_5 {padding: 16px 0;}
	.afy-app-step .icon-plus-text-item-icon {
		min-width: 64px;
		width: 64px;
		max-width: 64px;
		min-height: 64px;
		height: 64px;
		max-height: 64px;
		font-size: 28px;
		margin: 0 auto 16px auto;
	}
	.active .afy-app-step .col-2_5 h6,
	.active .afy-app-step .col-3 h6 {
		font-size: 14px;
		font-weight: 500;
		letter-spacing: 0;
	}
	.active .afy-app-step .col-3:hover h6 {color: #28a745;}
	.styled-carousel .carousel-control-prev, .styled-carousel .carousel-control-next {top: calc(21.5% + 8px);}
	/*---------------------------------------------------------------
	02. END OF STANDART SUB PAGES
	---------------------------------------------------------------*/

	/*---------------------------------------------------------------
	03. OVERVIEW PAGE
	---------------------------------------------------------------*/
	.standart-pages.overview .half-screen-jumbo.container-fluid > .image-container {max-width: 540px;}
	/*---------------------------------------------------------------
	03. END OF OVERVIEW PAGE
	---------------------------------------------------------------*/

	/*---------------------------------------------------------------
	05. PLUGINS
	---------------------------------------------------------------*/
	.plugin-name-group {padding: 1rem;}
	.plugin-name-group .plugin-name {font-size: 16px;}
	.plugin-name-group .author-name {font-size: 12px;}
	.logo-icon {
		font-size: 2.5rem;
		padding: 1.5rem;
	}
	.plugin-basic-info .price-btn {
		font-size: 14px;
		padding: 1rem;
	}
	.plugin-basic-info .period {font-size: 11px;}
	.plugin-detail .rating {padding: 1.125rem 1rem;}
	.plugin-detail .numeric {
		font-size: 3rem;
		line-height: 1;
	}
	.plugin-detail .star {font-size: 12px;}
	.plugin-preview {margin: 1rem auto;}
	.plugin-preview .carousel-inner {width: 320px;}
	.plugin-preview .carousel-control-container {
		top: 280px;
		width: 410px;
	}
	.screenshot-thumbnails .thumbnail {
		-ms-flex: 0 0 5rem;
		flex: 0 0 5rem;
		max-width: 5rem;
	}
	.graph-container .numeric {font-size: 4rem;}
	.graph-container .star, .graph-container .total-choise {font-size: 13px;}
	.graph-container .rating {padding: 1rem;}
	.graph-filters .graph {width: calc(100% - 180px);}
	/*---------------------------------------------------------------
	05. END OF PLUGINS
	---------------------------------------------------------------*/

	/*---------------------------------------------------------------
	08. CONTROL PANEL & CMS PAGE
	---------------------------------------------------------------*/
	.cms .styled-carousel .carousel-control-prev, .cms .styled-carousel .carousel-control-next {top: calc(27.5% + 8px);}
	.cms #sampleVideo-2.styled-carousel .carousel-control-prev, .cms #sampleVideo-2.styled-carousel .carousel-control-next {top: calc(33.333% + 8px);}
	.cms #sampleVideo-3.styled-carousel .carousel-control-prev, .cms #sampleVideo-3.styled-carousel .carousel-control-next {top: calc(32.5% + 8px);}
	/*---------------------------------------------------------------
	08. END OF CONTROL PANEL & CMS PAGE
	---------------------------------------------------------------*/

	/*---------------------------------------------------------------
	09. PRICING PAGE
	---------------------------------------------------------------*/
	.pricing .nav-tabs .nav-link {width: 254px;}
	.price-sample ul li, .price-samples .table th, .price-samples .table td, td.price-sample .price-title, td.price-sample .price-currency, td.price-sample .period {font-size: 14px;}
	td.price-sample .price-value {font-size: 24px;}
	td.price-sample .term {font-size: 11px;}
	/*---------------------------------------------------------------
	09. END OF PRICING PAGE
	---------------------------------------------------------------*/

	/*---------------------------------------------------------------
	07. BLOG
	---------------------------------------------------------------*/
	.blog .col-lg-3 {padding: 16px 0;}
	.filter-container:first-child {margin-left: 0;}
	.filter-container:last-child {margin-right: 0;}
	.blog-list .col-lg-9 .col-md-4 {padding: 16px 0 0 0;}
	.blog .pagination {padding: 16px 0;}
	.blog-detail .col-lg-3 {
		padding: 16px;
		background: none;
	}
	.article-cover-image {padding: 0 16px;}
	.blog-detail .publish-data {
		padding: 16px 16px 0 16px;
		background: none;
	}
	.filter-inline {margin: auto auto auto 0;}
	/*---------------------------------------------------------------
	07. END OF BLOG
	---------------------------------------------------------------*/

	#footer .col-sm-3:nth-child(1), #footer .col-sm-3:nth-child(2) {padding-top: 16px;}
}
@media (min-width:768px) {
	.all-in-one-computer:after {margin-top: -4.5%;}
	.all-in-one-computer .screen-bezel > .camera {
		top: 2px;
		width: 5px;
		height: 5px;
	}
	.navbar {
		min-height: 52px;
		height: 52px;
		max-height: 52px;
	}
	.navbar-collapse {
		background: none;
		max-height: none;
		overflow: visible;
	}
	.navbar .separator {display: block;}
	.navbar-brand {
		width: 32px;
		padding: 0 30px 0 0;
		margin: auto 8px auto auto;
		overflow: hidden;
	}
	.navbar.navbar-expand-md .nav-link {padding: 18px 4px;}
	.navbar .btn-login.user-log .nav-link {padding: 8px 0;}
	.navbar .btn-login {
		position: relative;
		padding: 8px 8.29px;
		margin: auto auto auto 0;
	}
	.navbar .btn-login .btn-icon {
		font-size: 18px;
		padding: 0;
	}
	.navbar .btn-login.user-log {margin: auto auto auto 0;}
	.navbar .nav-item {
		margin: auto 4px;
		border: none;
	}
	.navbar .nav-item::before {
		top: 50px;
		transition: height ease-in-out 300ms;
	}
	.navbar .nav-item.active::before, .navbar .nav-item.show::before {height: 2px;}
	.navbar .nav-item .nav-link.dropdown-toggle:before,
	.navbar .btn-login.user-log .nav-link::before {
		left: 50%;
		bottom: -2px;
		transform: translate(-50%,0);
		transition: bottom ease-in-out 200ms;
	}
	.navbar .nav-item.show .nav-link.dropdown-toggle::before, .navbar .btn-login.user-log .show .nav-link::before {bottom: 2px;}
	.navbar .nav-item .nav-link.dropdown-toggle::after {margin: auto 0 auto 5px;}
	.navbar .dropdown-menu {
		left: 50%;
		top: 50px;
		margin: 0;
		transform: translate(-50%, 0);
	}
	.navbar .dropdown-menu .dropdown-item:last-child {border-radius: 0 0 4px 4px;}
	.dropdown-menu .row {flex-direction: row;}
	.dropdown-menu .row [class*="col-"] {
		-ms-flex: 0 0 50%;
		flex: 0 0 50%;
		max-width: 50%;
	}
	.dropdown-menu .row [class*="col-"]:first-child,
	.dropdown-menu .row [class*="col-"]:last-child {
		padding: 0;
		border: none;
	}
	.dropdown-menu .row [class*="col-"]:first-child .dropdown-item:last-child {border-radius: 0 0 0 4px;}
	.dropdown-menu .row [class*="col-"]:last-child .dropdown-item:last-child {border-radius: 0 0 4px 0;}
	.dropdown-menu.two-column {min-width: 460px;}
	#lang .short-lng-name {display: block;}
	#lang .full-lng-name {display: none;}
	.navbar + .section.container-fluid, .navbar + .container-fluid > .content,.content.blog {padding-top: 52px;}
	.supported-platform img {height: 64px;}
	.supported-platform img.pwa-logo {height: 40px;}
	.article-list-container .col-md-3,.article-list-container .col-md-9 {padding: 0px 15px;}
	#howToSection .styled-carousel-indicator {display: flex;}
	#howToSection .styled-carousel-indicator .divider {display: none;}
	.section.container-fluid .header > .title {
		font-size: 28px;
		text-align: left;
	}
	.section.container-fluid .header > .caption {font-size: 16px;}
	.sample-container {margin: 0 auto auto auto;}
	.about-plugin .title {font-size: 1rem;}
	.plugin-blocks .plugin-icon {font-size: 40px;}
	.plugin-blocks h5 {font-size: 18px;}
	.all-in-one-computer {
		width: 420px;
		margin: auto;
	}
	.body-metal {
		height: 42px;
		border-radius: 0 0 11px 11px;
	}
	.container.faq {padding-top: 52px;}
	#faqSection .container {flex-direction: row;}
	#landingSection .centered-container {flex-direction: row;}
	.builder-screen-phone .screen-only.screen-group {
		height: 417px;
		transform: scale(.33);
		transform-origin: center top;
		margin: 39px auto;
	}
	.phone-sample.old-school .grid-container {padding-top: 68px;}
	#landingSection .device-container {
		margin: auto auto auto 0;
		transform: scale(1.2);
		transform-origin: left top;
	}
	#landingSection .device-samples {
		transform: scale(.8);
		transform-origin: left bottom;
		margin: -10px 0 0 42%;
	}
	.laptop-sample .general-preloader.pwa-sample-preloader .preloader-img {transform: scale(0.4255);}
	.phone-sample .general-preloader.pwa-sample-preloader .preloader-img {transform: scale(1.5413);}
	#landingSection .hero-container {margin: 110px 0 0 0;}
	#landingSection h1 {font-size: 48px;}
	#landingSection h1 .small {font-size: 28px;}
	#landingSection h2 {font-size: 16px;}
	#landingSection .device-samples .phone-sample .grid-container {
		animation: builder_grid_container_phone_realtime_1200 0s forwards 8.2s;
	}
	#landingSection .device-samples .phone-sample .grid-container .title {
		font-size: 5.6px;
		margin: auto auto 2px auto;
	}
	#webPwaSection .sample-container {
		margin: 200px auto auto 0;
		transform: scale(2.35);
	}
	#allCodesSection > .container {padding: 48px 16px;}
	.bg-rainbow .strip .content .icon {margin: 0 16px auto auto;}
	.bg-rainbow .strip .content {display: flex;}
	#moreOptionsSection .container,#advantagesSection .container {flex-direction: row;}
	#moreOptionsSection .brief-container,
	#advantagesSection .brief-container {
		max-width: 720px;
		padding: 0;
		margin: auto auto auto 20px;
	}
	#faqSection .accordion-group-container {
		max-width: 50%;
		min-height: auto;
		padding: 0 20px 20px 20px;
		margin: auto auto auto 0;
	}
	#moreOptionsSection .brief-container ul li {
		flex-direction: row;
		text-align: left;
	}
	#faqSection .btn-group-toggle .btn {width: auto;}
	#helpSection .container.mail-form {
		flex-direction: row;
		font-size: 0.875rem;
		margin: 40px auto;
	}
	.container.mail-form .col-md-6 {padding: 20px 20px 20px 20px;}
	#helpSection h6 {
		font-size: 1.5rem;
		margin: 0 auto 5px 0;
	}
	#helpSection .form-group-container .form-group .col-md-6:first-child {padding: 0 6px 0 0;}
	#helpSection .form-group-container .form-group .col-md-6:last-child {padding: 0 0 0 6px;}
	#helpSection .form-group-container label {
		display: block;
		margin: 0 0 5px 3px;
	}
	#helpSection .form-group-container .form-control {font-size: 0.875rem;}
	#helpSection .phone-mail-infos li {margin: 0 auto 0 0;}
	#helpSection .phone-mail-infos span {padding: 22px 0 22px 0;}
	#helpSection .phone-mail-infos .fa {margin: auto 20px auto 0;}
	#helpSection .phone-mail-infos a {padding: 22px 0 22px 0;}
	#footer .flex-column ul {flex-wrap: nowrap;}
	#footer .flex-column ul li {
		width: auto;
		margin: 0;
	}
	#footer .flex-column .basic-info ul a
	#footer .flex-column .fa {margin: auto auto auto 0;}
	#footer .container-fluid.payment-methods .container {padding: 15px 15px 15px 15px;}
	#footer .container-fluid.payment-methods img {
		width: auto;
		height: 44px;
		padding: 10px 20px 10px 20px !important;
		margin: auto 5px auto 5px;
		border-radius: 5px;
	}
	.more-content-scroll-indicator {display: block;}
	#featureSectionFull {padding-top: 52px;}

	/*---------------------------------------------------------------
	02. STANDART SUB PAGES
	---------------------------------------------------------------*/
	.content.standart-pages .container-fluid .container {padding: 32px 16px;}
	.content.standart-pages .container-fluid .container .row.one-col .brief-text {text-align: center;}
	.content.standart-pages .container-fluid .image-container.real-size.iphone-x-etc.cover-illustration .phone-sample {height: 642px;}
	.content.standart-pages .container-fluid .image-container.real-size.iphone-x-etc.cover-illustration .screen-group {height: 626px;}
	.content.standart-pages .container-fluid .image-container.real-size.iphone-x-etc.cover-illustration .phone-sample::before {top: 30%;}
	.content.standart-pages .container-fluid .image-container.real-size.iphone-x-etc.cover-illustration .phone-sample::after {top: 20%;}
	.sample-container.versus {height: 100%;}
	.sample-container.versus .group-resizer {
		transform: scale(.5);
		transform-origin: left center;
	}
	.content.standart-pages .brief-text.masker {margin: auto 0;}
	.standart-pages.pwa-app .hero-image {max-height: none;}
	.standart-pages.pwa-app .sample-container {
		margin: 96px auto;
		transform: scale(2.35);
	}
	.content.standart-pages .content-image.web-template-container {margin: 32px 0;}
	.content.standart-pages .content-image.web-template-container .device-container {
		transform: scale(1.5);
		transform-origin: 35% center;
	}
	.hero-image .phone-sample.apple {margin-right: 8px;}
	.hero-image .phone-sample.android {display: flex;}
	.hero-image .platform-icon.fa-apple {display: block;}
	.hero-image .platform-icon.fa-microchip {display: none;}
	.flex-direction-responsive {flex-direction: row;}
	.content.standart-pages .container-fluid.hero .container {display: flex;}
	.content.standart-pages .hero-text {padding: 32px 0;}
	.content.standart-pages .hero-text h1,.content.standart-pages .hero-text h2,.content.standart-pages .hero-text .action-btn-group {text-align: center;}
	.content.standart-pages .extended-hero-text h1,.content.standart-pages .extended-hero-text p,.content.standart-pages .extended-hero-text .action-btn-group {text-align: left;}
	.content.standart-pages .extended-hero-text .content-image {
		width: auto;
		padding: 0;
		margin: auto 0 auto 0;
	}
	.content.standart-pages .content-image {
		width: 100%;
		padding: 0 48px 0 0;
		margin: auto 0;
	}
	.content.standart-pages .container-fluid .image-container {margin: auto 0;}
	.content.standart-pages .brief-text {
		padding: 0 16px 0 0;
		margin: auto 0;
	}
	.content.standart-pages .content-image + .brief-text {
		padding: 0 0 0 16px;
		margin: auto auto auto 0;
	}
	.content.standart-pages .brief-text + .content-image {padding: 0 0 0 48px;}
	.content.standart-pages .for-who .brief-text {padding: 0;}
	.content.standart-pages .extended-hero-text .brief-text {
		text-align: left;
		padding-left: 32px;
		margin: 48px auto auto 0;
	}
	.content.standart-pages .bg-rainbow .container, .content.standart-pages .separator-section .container {display: flex;}
	.content.standart-pages .bg-rainbow .col,
	.content.standart-pages .separator-section .col {
		width: 100%;
		padding: 0;
		margin: auto 0;
	}
	.content.standart-pages .bg-rainbow .col.action-btn-group,
	.content.standart-pages .separator-section .col.action-btn-group {
		width: auto;
		flex-grow: 0;
		white-space: nowrap;
		max-width: none;
		padding: 0;
		margin: auto 0 auto auto;
	}
	.content.standart-pages .bg-rainbow h4,
	.content.standart-pages .separator-section h4 {
		font-size: 18px;
		margin: auto auto 0 0;
	}
	.content.standart-pages .floating-col-with-icons .container .row {margin: 0 0 16px 0;}
	.content.standart-pages .floating-col-with-icons .container .row.floating-list {
		width: auto;
		margin: 0 -8px 16px -8px;
		border-top: 1px solid rgba(0, 0, 0, 0.07);
	}
	.floating-col-with-icons .col-md-6,
	.floating-col-with-icons .col-md-4,
	.floating-col-with-icons .col-md-3 {
		display: flex;
		flex-direction: column;
		padding: 16px 8px;
	}
	.floating-col-with-icons .col-md-6:last-child, .floating-col-with-icons .col-md-4:last-child, .floating-col-with-icons .col-md-3:last-child {border-bottom: 1px solid rgba(0, 0, 0, 0.07);}
	.floating-col-with-icons .col-md-6 p, .floating-col-with-icons .col-md-4 p, .floating-col-with-icons .col-md-3 p {margin: 0 auto auto 0 !important;}
	.floating-col-with-icons .icon-plus-text-item-icon {
		display: block;
		margin: 0;
	}
	.floating-col-with-icons .icon-plus-text-item-icon + h5 {
		display: block;
		margin: 0 auto 4px 0;
	}
	/* .content.standart-pages .price-samples .divider.min-only {display: none;} */
	.content.standart-pages .container-fluid .multiple-list .row.flex-direction-responsive {flex-wrap: nowrap;}
	.content.standart-pages .container-fluid .multiple-list .brief-text {
		width: calc(100% - 256px);
		max-width: calc(100% - 256px);
		padding: 0;
	}
	.content.standart-pages .container-fluid .multiple-list .divider {display: block;}
	.content.standart-pages .brief-text.col-md-8 .brief-text-aligner {padding: 0 0 0 24px;}
	.content.standart-pages .flex-direction-responsive .brief-text.col-md-8 .brief-text-aligner {padding: 0;}
	.content.standart-pages .brief-text.col-md-8 .col-md-6 {padding: 0 24px 0 0;}
	.brief-text.col-md-8 .col-md-6 ul.stylish-list li {min-height: 146px;}
	.brief-text.col-md-8 .col-md-6 ul.stylish-list li:first-child {padding-top: 0;}
	.brief-text.col-md-8 .col-md-6 ul.stylish-list li:last-child {
		padding-bottom: 0;
		border: none;
	}
	.content.standart-pages .container-fluid .multiple-list .content-image.extended-hero-text {padding: 0;}
	.content.standart-pages .container-fluid .container.blog-offer .row .brief-text-aligner .row .col-md-6 {margin: 0;}
	.content.standart-pages .container-fluid.bg-rainbow.multiple-content .row {margin: 0 0 16px 0;}
	.container-fluid.bg-rainbow.multiple-content .brief-text {margin: 0;}
	.container-fluid.bg-rainbow.multiple-content .brief-text:last-child {padding: 0;}
	.styled-carousel .carousel-control-prev, .styled-carousel .carousel-control-next {top: calc(29% + 8px);}
	.content.standart-pages .container-fluid .multiple-list .action-btn-group .col-md-4 {text-align: center;}
	.inline-popper-container {
		left: 50%;
		transform: translate(-50%, 0);
	}
	.inline-popper::before, .inline-popper::after {left: 50%;}
	/*---------------------------------------------------------------
	02. END OF STANDART SUB PAGES
	---------------------------------------------------------------*/

	/*---------------------------------------------------------------
	03. OVERVIEW PAGE
	---------------------------------------------------------------*/
	.standart-pages.overview .half-screen-jumbo.container-fluid > .image-container {
		position: absolute;
		left: 50%;
		top: 0;
		right: 0;
		bottom: 16px;
		max-width: none;
		padding: 16px 0;
		overflow: hidden;
	}
	.standart-pages.overview .half-screen-jumbo.container-fluid > .image-container img {
		position: absolute;
		right: 0;
		width: auto;
		height: 45%;
	}
	.standart-pages.overview .half-screen-jumbo.container-fluid.jumbo-image-left > .image-container {
		left: 0;
		right: 50%;
	}
	.standart-pages.overview .half-screen-jumbo.container-fluid.jumbo-image-left > .image-container img {
		left: 0;
		right: auto;
		height: calc(100% - 16px);
	}
	.standart-pages.overview .half-screen-jumbo.container-fluid.jumbo-image-left .brief-text {
		padding: 0 0 0 16px;
		margin: auto 0 auto auto;
	}
	.standart-pages.overview .half-screen-jumbo.container-fluid.jumbo-image-left .action-btn-group {
		width: 50%;
		padding: 0 0 0 16px;
		margin: auto 0 auto auto;
	}
	.afy-app-step .col-3 .icon-plus-text-item-icon {
		min-width: 128px;
		width: 128px;
		max-width: 128px;
		min-height: 128px;
		height: 128px;
		max-height: 128px;
		font-size: 48px;
		margin: 0 auto 16px auto;
	}
	/*---------------------------------------------------------------
	03. END OF OVERVIEW PAGE
	---------------------------------------------------------------*/

	/*---------------------------------------------------------------
	07. BUILDER OVERVIEW PAGE
	---------------------------------------------------------------*/
	.content.standart-pages.builder-overview .content-image {
		padding: 0;
		margin: auto;
	}
	.content.standart-pages.builder-overview .content-image .image-container {margin: auto;}
	/*---------------------------------------------------------------
	07. END OF BUILDER OVERVIEW PAGE
	---------------------------------------------------------------*/

	/*---------------------------------------------------------------
	08. CONTROL PANEL & CMS PAGE
	---------------------------------------------------------------*/
	.content.standart-pages.cms .hero-text h2 {font-size: 20px;}
	.cms .all-in-one-computer.device-container.computer {margin: auto;}
	.content.standart-pages.cms .content-image .image-container {margin: auto;}
	.cms .styled-carousel .carousel-control-prev, .cms .styled-carousel .carousel-control-next {top: calc(35.5% + 8px);}
	.cms #sampleVideo-2.styled-carousel .carousel-control-prev, .cms #sampleVideo-2.styled-carousel .carousel-control-next {top: calc(38.5% + 8px);}
	.cms #sampleVideo-3.styled-carousel .carousel-control-prev, .cms #sampleVideo-3.styled-carousel .carousel-control-next {top: calc(38.5% + 8px);}
	/*---------------------------------------------------------------
	08. END OF CONTROL PANEL & CMS PAGE
	---------------------------------------------------------------*/

	/*---------------------------------------------------------------
	09. PRICING PAGE
	---------------------------------------------------------------*/
	.pricing .nav-tabs .nav-link {
		width: auto;
		padding: 8px 24px;
	}
	.content.standart-pages.pricing .container-fluid .container {padding: 32px 0;}
	td.price-sample .price-title {
		font-size: 20px;
		padding: 16px 16px 4px 32px;
	}
	td.price-sample .base-price {
		flex-wrap: nowrap;
		padding: 0 16px 16px 16px;
	}
	td.price-sample .price-currency {
		font-size: 18px;
		margin: auto 0 4px 0;
	}
	td.price-sample .price-value {font-size: 48px;}
	td.price-sample .period-term::before {display: block;}
	td.price-sample .period-term {
		width: auto;
		padding: 0;
	}
	td.price-sample .period {
		font-size: 18px;
		margin: 0 0 0 16px;
	}
	td.price-sample .term {
		font-size: 13px;
		margin: 0 0 0 11px;
	}
	/*---------------------------------------------------------------
	09. END OF PRICING PAGE
	---------------------------------------------------------------*/

	/*---------------------------------------------------------------
	10. RESELLER
	---------------------------------------------------------------*/
	/*---------------------------------------------------------------
	10. END OF RESELLER
	---------------------------------------------------------------*/

	/*---------------------------------------------------------------
	11. DEVELOPER
	---------------------------------------------------------------*/
	.standart-pages.developer .divider-row {
		-ms-flex: 0 0 calc(50% - 16px);
		flex: 0 0 calc(50% - 16px);
		max-width: calc(50% - 16px);
	}
	.standart-pages.developer .divider-row.left {margin-right: auto;}
	.standart-pages.developer .divider-row.right {margin-left: auto;}
	/*---------------------------------------------------------------
	11. END OF DEVELOPER
	---------------------------------------------------------------*/

	/*---------------------------------------------------------------
	11. SECURITY PAGE
	---------------------------------------------------------------*/
	.content.standart-pages.security .content-image {
		padding: 0;
		margin: 16px 48px auto 0;
	}
	.content.standart-pages.security .content-image .image-container {margin: auto;}
	.content.standart-pages.security .phone-sample .image-container {margin: 0;}
	/*---------------------------------------------------------------
	11. END OF SECURITY PAGE
	---------------------------------------------------------------*

	/*---------------------------------------------------------------
	05. PLUGINS
	---------------------------------------------------------------*/
	.plugin-basics {flex-direction: row;}
	.plugin-simple-data, .plugin-basic-info {flex-direction: column;}
	.plugin-simple-data {
		width: 140px;
		padding: 2rem 0;
		border-bottom: none;
		border-right: 1px solid rgba(0, 0, 0, .1);
	}
	.plugin-name-group {
		width: 100%;
		text-align: center;
		margin: 0 0 0 auto;
	}
	.plugin-basic-info {
		width: 100%;
		margin: 0 0 auto auto;
	}
	.logo-icon {
		width: 100%;
		text-align: center;
		margin: 0 0 0 auto;
		border-width: 1px 0;
	}
	.plugin-basic-info .price-btn {
		width: 100%;
		text-align: center;
		line-height: normal;
		margin: 0 0 0 auto;
	}
	.plugin-basic-info .period {font-size: 12px;}
	.plugin-detail .rating {
		width: 100%;
		text-align: center;
		margin: 0 0 auto auto;
		border-width: 1px 0;
	}
	.plugin-extendeds {
		width: 150px;
		padding: 3rem 0 3rem 1rem;
		border-top: none;
		border-left: 1px solid rgba(0, 0, 0, 0.1);
	}
	.graph-container {
		display: flex;
		flex-wrap: nowrap;
		white-space: nowrap;
	}
	.graph-container > .rating {
		width: auto;
		margin: 0;
		border-width: 0 1px 1px 0;
	}
	.graph-filters {width: 100%;}
	.graph-filters .rating {border-width: 0 0 1px 0;}
	/*---------------------------------------------------------------
	05. END OF PLUGIN
	---------------------------------------------------------------*/

	/*---------------------------------------------------------------
	06. WEBSITES PAGE
	---------------------------------------------------------------*/
	.content.website .container-fluid .multiple-list .brief-text {margin: auto auto auto 32px;}
	/*---------------------------------------------------------------
	06. END OF WEBSITES PAGE
	---------------------------------------------------------------*/

	/*---------------------------------------------------------------
	07. BLOG
	---------------------------------------------------------------*/
	.blog .article-container > .container-fluid .container > .row {
		width: auto;
		padding: 8px 0;
		margin: 0 -8px;
	}
	.blog .col-lg-3 {padding: 16px 8px;}
	.blog-list .col-lg-9 .col-md-4 {padding: 16px 8px 0 8px;}
	/*---------------------------------------------------------------
	07. END OF BLOG
	---------------------------------------------------------------*/
}
@media (min-width:800px) {
	.dropdown-menu.two-column {left: 50%;}
}
@media (min-width:992px) {
	.agreement-text {font-size: 14px;}
	.agreement-text h1 {font-size: 24px;}
	.agreement-text h2 {font-size: 20px;}
	.agreement-text h3 {font-size: 18px;}
	.agreement-text h4 {font-size: 16px;}
	.agreement-text h5 {font-size: 15px;}
	.agreement-text h6 {font-size: 14px;}
	#landingSection {min-height: calc(100vh - 52px);}
	.navbar.navbar-expand-md .nav-link {padding: 18px;}
	.navbar .btn-login {padding: 8px 12px;}
	.navbar .btn-login .btn-icon {
		font-size: 18px;
		padding: 0;
	}
	.navbar-nav .nav-item.home > .nav-link {padding: 0.563rem 0.5rem 0.563rem 0.5rem;}
	.navbar-nav .separator {margin: 0rem 0.05rem 0rem 0.05rem;}
	.all-in-one-computer:after {margin-top: -4.25%;}
	.foot-group:after {top: 15px;}
	#landingSection .container {flex-direction: row;}
	#landingSection .device-container {margin: auto 96px 180px 0;}
	#landingSection .device-samples {margin: 80px 0 0 70%;}
	#landingSection .sample-container.sample-tablet {margin: -165px -280px -300px -158px;}
	#landingSection .sample-container.sample-tablet .phone-shadow {bottom: -5px;}
	.laptop-sample .general-preloader.pwa-sample-preloader .preloader-img {transform: scale(0.3333);}
	.phone-sample .general-preloader.pwa-sample-preloader .preloader-img {transform: scale(1.2071);}
	#landingSection .device-samples .device.tablet {
		margin: auto 0 -10px 72px;
		transform-origin: left bottom;
	}
	#landingSection .sample-container.sample-phone {margin: -130px -140px -48px 30px;}
	#landingSection .device-samples .device.phone {
		margin: auto -64px -20px -48px;
		transform-origin: left bottom;
	}
	#landingSection .device-samples .device.laptop {
		margin: auto 0 0 0;
		transform-origin: left bottom;
	}
	#landingSection .hero-container {margin: 0 0 0 16px;}
	.article-list-container .col-lg-4 {padding: 10px 10px 10px 10px;}
	#howToSection .styled-carousel-indicator .col-md-4 {padding: 0 16px;}
	.plugin-blocks ul li {width: 25%;}
	.card-list li {width: calc(25% - 16px);}
	.plugin-blocks .plugin-icon {font-size: 48px;}
	.plugin-blocks .footer-group .rating {font-size: 12px;}
	.action-group .btn {margin: 5px auto 5px 8px;}
	.action-group .btn.collapser {display: inline-block;}
	.about-plugin .title {font-size: 1rem;}
	.section.container-fluid .header > .title {font-size: 32px;}
	#webPwaSection .sample-container {
		margin: 290px auto auto 0;
		transform: scale(3);
	}
	
	/*---------------------------------------------------------------
	02. STANDART SUB PAGES
	---------------------------------------------------------------*/
	.content {font-size: 14px;}
	.content.standart-pages .full-with-banner {position: relative;}
	.content.standart-pages .full-with-banner .container {
		position: absolute;
		left: 50%;
		top: 50%;
		max-width: 640px;
		background-color: rgba(255, 255, 255, 0.9);
		border-radius: 5px;
		transform: translate(-50%, -50%);
		z-index: 1;
	}
	.sample-container.versus .group-resizer {transform: scale(.68);}
	.content.standart-pages .container-fluid .image-container.real-size.iphone-x-etc.cover-illustration .phone-sample {
		width: 376px;
		height: 796px;
		border-radius: 64px;
	}
	.content.standart-pages .container-fluid .image-container.real-size.iphone-x-etc.cover-illustration .screen-group {
		width: 360px;
		height: 780px;
		border-radius: 56px;
	}
	.content.standart-pages .brief-text-aligner h2 {font-size: 22px;}
	.content.standart-pages .brief-text-aligner h3 {font-size: 18px;}
	.content.standart-pages h5 {font-size: 16px;}
	.content.standart-pages .full-with-banner .brief-text {
		text-align: center;
		margin: auto;
	}
	.content.standart-pages .full-with-banner .container .action-btn-group {text-align: center;}
	.standart-pages.pwa-app .sample-container {
		margin: 150px auto;
		transform: scale(3);
	}
	.content.standart-pages .content-image.web-template-container {margin: 72px 0;}
	.content.standart-pages .content-image.web-template-container .device-container {
		transform: scale(2);
		transform-origin: 44% center;
	}
	.native-app .hero-image .phone-sample {
		min-width: 380px;
		width: 380px;
		height: 380px;
		margin: 32px auto -20px auto;
		background-color: #fff;
		border: none;
		box-shadow: 0 0 16px 1px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.11), 0 0 8px rgba(0, 0, 0, 0.322) inset;
		border-radius: 64px 64px 0 0;
	}
	.hero-image .phone-sample.apple {margin-right: 8px;}
	.hero-image .phone-sample.android {
		display: flex;
		margin-left: 8px;
	}
	.native-app .hero-image .top-group {
		display: flex;
		top: auto;
		left: 90px;
		width: 200px;
		height: 20px;
		margin: 10px auto -20px auto;
		border-radius: 0 0 20px 20px;
		box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.22), -1px 1px 0 rgba(0, 0, 0, 0.22);
		transform: none;
	}
	.hero-image .android .top-group {
		left: 160px;
		width: 40px;
		height: 20px;
	}
	.native-app .hero-image .screen-group {
		width: 360px;
		height: 370px;
		margin: auto auto 0 auto;
		border-radius: 54px 54px 0 0;
	}
	.hero-image .android .screen-group {background-image: linear-gradient(0deg, #007bff 0%, rgba(0,0,0,0) 60%), linear-gradient(180deg, #fbbe3b 0%, rgba(0,0,0,0) 50%), linear-gradient(90deg, #ea0081 0%, rgba(0,0,0,0) 100%), linear-gradient(270deg, #00ab34 0%, rgba(0,0,0,0) 100%);}
	.device-hardware {
		display: flex;
		position: absolute;
		flex-direction: column;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
	}
	.android .device-hardware {transform: rotate(45deg);}
	.micro-chip {
		display: flex;
		position: relative;
		width: 120px;
		height: 120px;
		margin: 0;
		border: 4px solid rgba(255, 255, 255, 0.33);
	}
	.micro-chip::after {
		content: "";
		width: 112px;
		height: 112px;
		margin: auto;
		border: 1px solid rgba(255, 255, 255, 0.66);
	}
	.line-container-row {
		display: flex;
		width: 360px;
		height: 120px;
	}
	.line-container-row.top {margin: auto auto 0 auto;}
	.line-container-row.middle {margin: 0 auto 0 auto;}
	.line-container-row.bottom {margin: 0 auto auto auto;}
	.line-container {
		position: relative;
		width: 120px;
		height: 120px;
	}
	.line-container-left {margin: auto 0 auto auto;}
	.line-container-top {margin: auto auto 0 auto;}
	.line-container-right {margin: auto auto auto 0;}
	.line-container-bottom {margin: 0 auto auto auto;}
	.cpu-line {
		left: 66px;
		top: 20px;
		position: absolute;
		width: 40px;
		border-width: 4px 0 0 0;
		border-style: solid;
		border-color: #fff;
		opacity: 0.22;
	}
	.cpu-line::after {
		content: "";
		position: absolute;
		left: -20px;
		top: -12px;
		width: 20px;
		height: 20px;
		border: 4px solid #fff;
		border-radius: 10px;
	}
	.cpu-line.cpu-line-type-1::before {
		content: "";
		position: absolute;
		left: -27px;
		top: -11px;
		width: 30px;
		height: 4px;
		background: #fff;
		transform: rotate(30deg);
	}
	.cpu-line.cpu-line-type-1::after {
		left: -43px;
		top: -31px;
	}
	.cpu-line.left-top {
		left: 90px;
		width: 30px;
	}
	.cpu-line.left-middle-1 {
		left: 80px;
		top: 50px;
	}
	.cpu-line.left-middle-2 {
		left: 80px;
		top: 77px;
		width: 40px;
	}
	.cpu-line.left-middle-2::before {
		left: -48px;
		top: 0;
		width: 50px;
		transform: rotate(-10deg);
	}
	.cpu-line.left-middle-2::after {
		left: -64px;
		top: -1px;
	}
	.cpu-line.left-bottom {
		width: 50px;
		left: 70px;
		top: 105px;
	}
	.top .line-container-top {transform: rotate(90deg) scale(1, -1);}
	.middle .line-container-right {transform: rotate(180deg);}
	.bottom .line-container-bottom {transform: rotate(-90deg);}
	.hero-image .platform-icon {
		font-size: 60px;
		margin: auto;
		color: #fff;
		opacity: 0.33;
		z-index: 1;
	}
	.hero-image .platform-icon.fa-apple {display: block;}
	.hero-image .platform-icon.fa-microchip {display: none;}
	.native-app .screen-group::after {
		position: absolute;
		display: block;
		content: "";
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background-image: url(../images/tram.png);
	}
	.floating-col-with-icons .col-md-6, .floating-col-with-icons .col-md-4, .floating-col-with-icons .col-md-3 {padding: 16px;}
	.floating-col-with-icons .icon-plus-text-item-icon {font-size: 30px;}
	.hero-text .floating-col-with-icons .icon-plus-text-item-icon {margin: auto auto 0 auto;}
	.floating-col-with-icons .icon-plus-text-item-icon .pwa-logo {height: 30px;}
	.floating-col-with-icons .icon-plus-text-item-icon + h5 {font-size: 15px;}
	.table th, .table td {font-size: 12px;}
	.brief-text.col-md-8 .col-md-6 ul.stylish-list li {min-height: 109px;}
	.container-fluid.multiple-content .title-icon {font-size: 32px;}
	/* .price-basic.multiple-list .brief-text.col-md-8 .col-md-6 ul.stylish-list li {min-height: 220px;} */
	.content.standart-pages .carousel-vids .carousel {padding: 48px 32px 32px 32px;}
	.styled-carousel .carousel-control-prev, .styled-carousel .carousel-control-next {
		top: calc(33.3333% + 8px);
		margin: auto 22px;
	}
	/*---------------------------------------------------------------
	02. END OF STANDART SUB PAGES
	---------------------------------------------------------------*/

	/*---------------------------------------------------------------
	03. OVERVIEW PAGE
	---------------------------------------------------------------*/
	.standart-pages.overview .half-screen-jumbo.container-fluid > .image-container img {height: 59%;}
	.content.standart-pages.overview .full-with-banner .container {
		position: relative;
		left: auto;
		top: auto;
		max-width: none;
		background-color: #fff;
		border-radius: 0;
		transform: none;
		z-index: 1;
	}
	/*---------------------------------------------------------------
	03. END OF OVERVIEW PAGE
	---------------------------------------------------------------*/

	/*---------------------------------------------------------------
	08. CONTROL PANEL & CMS PAGE
	---------------------------------------------------------------*/
	.cms .styled-carousel .carousel-control-prev, .cms .styled-carousel .carousel-control-next {
		top: calc(39.5% + 8px);
		margin: auto 6px;
	}
	.content.standart-pages.cms .carousel-vids .carousel {padding: 48px 16px 32px 16px;}
	.cms #sampleVideo-2.styled-carousel .carousel-control-prev, .cms #sampleVideo-2.styled-carousel .carousel-control-next {top: calc(43.5% + 8px);}
	.cms #sampleVideo-3.styled-carousel .carousel-control-prev, .cms #sampleVideo-3.styled-carousel .carousel-control-next {top: calc(43.5% + 8px);}
	/*---------------------------------------------------------------
	08. END OF CONTROL PANEL & CMS PAGE
	---------------------------------------------------------------*/

	/*---------------------------------------------------------------
	09. PRICING PAGE
	---------------------------------------------------------------*/
	.content.standart-pages.pricing .container-fluid .container {padding: 32px 16px;}
	/*---------------------------------------------------------------
	09. END OF PRICING PAGE
	---------------------------------------------------------------*/

	/*---------------------------------------------------------------
	05. PLUGINS
	---------------------------------------------------------------*/
	.plugin-detail {flex-direction: row;}
	.plugin-basics {
		flex-wrap: wrap;
		min-width: 480px;
		margin: 1rem auto auto auto;
		box-shadow: 0 0px 0px 1px rgba(0, 0, 0, 0.07), 0 0px 0px 4px rgba(0, 0, 0, 0.05);
		border-radius: .5rem;
	}
	.plugin-simple-data {
		width: 100%;
		flex-direction: row;
		padding: 0;
		margin: 0;
		border-right: none;
		border-bottom: 1px solid rgba(0, 0, 0, .1);
	}
	.plugin-basic-info {
		width: auto;
		flex-direction: row;
	}
	.plugin-name-group, .logo-icon, .plugin-basic-info .price-btn, .plugin-detail .rating {width: auto;}
	.plugin-name-group {
		text-align: right;
		margin: auto 0 auto auto;
	}
	.logo-icon {border-width: 0 1px;}
	.plugin-basic-info {margin: auto auto auto 0;}
	.plugin-preview .carousel-inner {width: 220px;}
	.screenshot-thumbnails .thumbnail {
		-ms-flex: 0 0 4rem;
		flex: 0 0 4rem;
		max-width: 4rem;
	}
	.plugin-basic-info .price-btn {margin: auto 0;}
	.plugin-detail .rating {
		text-align: left;
		margin: auto 0;
		border-width: 0 0 0 1px;
	}
	.plugin-preview .carousel-control-container {
		top: 180px;
		width: 300px;
	}
	.plugin-extendeds {
		width: 170px;
		padding: 0;
	}
	.plugin-specs > ul > li {padding: .5rem;}
	.plugin-brief-and-reviews {
		margin: 1rem 0 1rem 1rem;
		box-shadow: 0 0px 0px 1px rgba(0, 0, 0, 0.07), 0 0px 0px 4px rgba(0, 0, 0, 0.05);
		border-radius: .5rem;
	}
	.graph-container > .rating {
		width: auto;
		margin: 0;
		border-width: 0 1px 1px 0;
	}
	.graph-filters .rating {border-width: 0 0 1px 0;}
	/*---------------------------------------------------------------
	05. END OF PLUGIN
	---------------------------------------------------------------*/

	/*---------------------------------------------------------------
	06. WEBSITES PAGE
	---------------------------------------------------------------*/
	/*---------------------------------------------------------------
	06. END OF WEBSITES PAGE
	---------------------------------------------------------------*/

	/*---------------------------------------------------------------
	07. BLOG
	---------------------------------------------------------------*/
	.blog .article-container > .container-fluid .container > .row {padding: 16px 0;}
	.blog .col-lg-3 {
		flex-direction: column;
		padding: 16px 8px 16px 16px;
	}
	.filter-container {margin: 4px 0 12px 0;}
	.blog .pagination {
		border-width: 1px 0;
		margin: 0 0 32px 0;
	}
	.blog-detail .filter-container {width: 100%;}
	/*---------------------------------------------------------------
	07. END OF BLOG
	---------------------------------------------------------------*/

	/*---------------------------------------------------------------
	13. FOOTER
	---------------------------------------------------------------*/
	#footer .container-fluid .container {padding: 8px 16px 0 16px;}
	#footer .flex-column .basic-info a {margin: 12px 0;}
	#footer .col-sm-3:first-child {padding: 15px 15px 15px 0;}
	#footer .col-sm-3:last-child {padding: 15px 0 15px 15px;}
	#footer .separator {
		border-width: 0 1px 0 0;
		margin: 0 10px 0 10px;
	}
	#footer .flex-column .basic-info {flex-direction: row;}
	#footer .flex-column .footer-info {margin: auto auto auto 0;}
	#footer .flex-column ul {flex-direction: row;}
	#footer ul.social-icons {
		justify-content: left;
		margin-right: 16px;
	}
	#footer .flex-column .basic-info ul a {margin: 0 10px 0 0;}
	#footer .flex-column .fa {margin: auto 0 auto 0;}
	#footer .flex-column a:hover {color: #28a745;}
	#footer .container-fluid.payment-methods .container {padding: 16px 16px 16px 16px;}
	/*---------------------------------------------------------------
	13. END OF FOOTER
	---------------------------------------------------------------*/
}
@media (min-width:1025px) {
	/* .navbar-brand {
		width: auto;
		padding: 0 0 0 12px;
		margin: auto 10px auto auto;
		overflow: hidden;
	} */
	.navbar.navbar-expand-md .nav-link {padding: 18px 12px;}
	.navbar .btn-login .btn-title {display: inline-block;}
	.real-size.iphone-x-etc .phone-sample {
		margin: 300px auto 0 auto;
		transform: scale(1.5625);
		transform-origin: center bottom;
	}

	/*---------------------------------------------------------------
	02. STANDART SUB PAGES
	---------------------------------------------------------------*/
	.content.standart-pages .container-fluid .multiple-list .brief-text {
		width: calc(100% - 400px);
		max-width: calc(100% - 400px);
	}
	.content.standart-pages .content-image.extended-hero-text {min-width: 400px;}
	.brief-text.col-md-8 .col-md-6 ul.stylish-list li {min-height: 128px;}
	/*---------------------------------------------------------------
	02. END OF STANDART SUB PAGES
	---------------------------------------------------------------*/

	/*---------------------------------------------------------------
	08. CONTROL PANEL & CMS PAGE
	---------------------------------------------------------------*/
	.cms .styled-carousel .carousel-control-prev, .cms .styled-carousel .carousel-control-next {top: calc(33.333% + 8px);}
	/*---------------------------------------------------------------
	08. END OF CONTROL PANEL & CMS PAGE
	---------------------------------------------------------------*/

	/*---------------------------------------------------------------
	11. SECURITY PAGE
	---------------------------------------------------------------*/
	.content.standart-pages.security .content-image.extended-hero-text {
		-ms-flex: unset;
		flex: unset;
		min-width: 260px;
		max-width: 260px;
	}
	.content.standart-pages.security .content-image + .brief-text {
		-ms-flex: 0 0 calc(100% - 310px);
		flex: 0 0  calc(100% - 310px);
		max-width:  calc(100% - 310px);
		padding: 0;
	}
	/*---------------------------------------------------------------
	11. END OF SECURITY PAGE
	---------------------------------------------------------------*

	/*---------------------------------------------------------------
	03. OVERVIEW PAGE
	---------------------------------------------------------------*/
	.content.standart-pages.overview .hero .extended-hero-text > .image-container {width: 100%;}
	/*---------------------------------------------------------------
	02. END OF OVERVIEW PAGE
	---------------------------------------------------------------*/
}
@media (min-width:1200px) {
	/* .navbar-brand {padding: 0 0 0 16px;} */
	.navbar.navbar-expand-md .nav-link {padding: 18px 20px;}
	.all-in-one-computer {width: 600px;}
	.computer-screen-group > .screen-bezel {border-radius: 14px 14px 0 0;}
	.all-in-one-computer .screen-bezel > .camera {
		top: 3px;
		width: 7px;
		height: 7px;
	}
	.all-in-one-computer:after {margin-top: -2.5%;}
	#howToSection .carousel-control-prev,
	#howToSection .carousel-control-next,
	.styled-carousel .carousel-control-prev,
	.styled-carousel .carousel-control-next {
		top: calc(50% + 8px);
		width: 36px;
		height: auto;
		font-size: 18px;
		padding: 8px 0;
		color: #343a40;
		background-color: transparent;
		border: 1px solid #343a40;
		opacity: 0;
	}
	.styled-carousel .carousel-control-prev, .styled-carousel .carousel-control-next {
		top: calc(30% + 8px);
		margin: auto 32px;
	}
	.styled-carousel:hover .carousel-control-prev,
	.styled-carousel:hover .carousel-control-next {
		margin: auto -12px;
		opacity: 0.33;
	}
	.styled-carousel .carousel-control-prev:hover, .styled-carousel .carousel-control-next:hover {opacity: 1;}
	#howToSection .computer-screen-group:hover .carousel-control-prev,
	#howToSection .computer-screen-group:hover .carousel-control-next {
		margin: auto -48px;
		opacity: 0.33;
	}
	#howToSection .computer-screen-group:hover .carousel-control-prev:hover,#howToSection .computer-screen-group:hover .carousel-control-next:hover {opacity: 1;}
	.foot-group:after {top: 25px;}
	.builder-screen-phone .screen-only.screen-group {
		height: 421px;
		transform: scale(.47);
		transform-origin: center top;
		margin: 56px auto;
	}
	.phone-sample.old-school .grid-container {padding-top: 106px;}
	#landingSection .device-container {
		transform: none;
		margin: auto 0 32px auto;
	}
	#landingSection .device-samples {
		transform: none;
		margin: 190px 0 0 60%;
	}
	.tablet-sample .general-preloader .preloader-img {transform: scale(2.886);}
	.phone-sample .general-preloader .preloader-img {transform: scale(2.6666);}
	.laptop-sample .general-preloader .preloader-img {transform: scale(0.5);}
	.laptop-sample .general-preloader.pwa-sample-preloader .preloader-img {transform: scale(0.3333);}
	.phone-sample .general-preloader.pwa-sample-preloader .preloader-img {transform: scale(1.2071);}
	#landingSection .sample-container.sample-tablet {margin: -220px -280px -280px -158px;}
	#landingSection .sample-container.sample-tablet .phone-shadow {
		left: -5%;
		bottom: -50px;
		height: 4px;
		width: 110%;
	}
	#landingSection .device-samples .device.tablet {margin: auto 0 0 80px;}
	#landingSection .sample-container.sample-phone {margin: -130px -140px -10px 30px;}
	#landingSection .device-samples .device.phone {margin: auto 0 -32px -40px;}
	#landingSection .device-samples .device.laptop {
		margin: auto 0 32px -130px;
		transform: scale(2);
		transform-origin: right bottom;
	}
	.builder-screen-phone .tablet-sample .grid-container {
		animation: builder_grid_container_1300 1s forwards 4s;
	}
	.body-metal {
		height: 54px;
		border-radius: 0 0 15px 15px;
	}
	.builder-screen-phone {padding-left: 5.4%;}
	.builder-screen-phone .phone-sample.old-school {border-radius: 20px;}
	#landingSection .centered-container {flex-direction: row;}
	#landingSection .device-samples .tablet-sample {
		bottom: -8px;
		transform: scale(1.1);
	}
	#landingSection .device-samples .laptop {
		right: -73.333%;
		top: 40px;
		transform: scale(1);
	}
	#landingSection .hero-container {margin: 8px auto auto 32px;}
	#landingSection .hero-text {margin: 0 0 1rem 0;}
	#landingSection .btn-group-toggle .btn {font-size: 0.8rem;}
	#helpSection .hero-container {
		padding-top: 58px;
		margin-top: -68px;
	}
	#footer .container-fluid .container {max-width: 1140px;}
	#featureSectionFull .page-title {
		font-size: 48px;
		padding: 32px;
	}
	#featureSectionFull section.row {
		padding: 32px 32px 0 32px;
	}
	
	/*---------------------------------------------------------------
	02. STANDART SUB PAGES
	---------------------------------------------------------------*/
	.content.standart-pages .content-image.web-template-container {margin: 120px 0;}
	.sample-container.versus .group-resizer {transform: scale(.82);}
	.content.standart-pages .content-image.web-template-container .device-container {
		transform: scale(2.5);
		transform-origin: 47% center;
	}
	.brief-text.col-md-8 .col-md-6 ul.stylish-list li {min-height: 230px;}
	/*---------------------------------------------------------------
	02. END OF STANDART SUB PAGES
	---------------------------------------------------------------*/

	/*---------------------------------------------------------------
	06. APP IDEAS
	---------------------------------------------------------------*/
	.app-idea-detail .brief-text.col-md-8 .col-md-6 ul.stylish-list li {min-height: 150px;}
	/*---------------------------------------------------------------
	06. END OF APP IDEAS
	---------------------------------------------------------------*/

	/*---------------------------------------------------------------
	08. CONTROL PANEL & CMS PAGE
	---------------------------------------------------------------*/
	.cms .styled-carousel .carousel-control-prev, .cms .styled-carousel .carousel-control-next {top: calc(38% + 8px);}
	.cms .styled-carousel:hover .carousel-control-prev,
	.cms .styled-carousel:hover .carousel-control-next {
		margin: auto -32px;
		opacity: 0.33;
	}
	.cms #sampleVideo-2.styled-carousel .carousel-control-prev, .cms #sampleVideo-2.styled-carousel .carousel-control-next, .cms #sampleVideo-3.styled-carousel .carousel-control-prev, .cms #sampleVideo-3.styled-carousel .carousel-control-next {top: calc(41% + 8px);}
	/*---------------------------------------------------------------
	08. END OF CONTROL PANEL & CMS PAGE
	---------------------------------------------------------------*/

	/*---------------------------------------------------------------
	10. RESELLER
	---------------------------------------------------------------*/
	/*---------------------------------------------------------------
	10. END OF RESELLER
	---------------------------------------------------------------*/

	/*---------------------------------------------------------------
	11. DEVELOPER
	---------------------------------------------------------------*/
	.standart-pages.developer .divider-row.right {
		-ms-flex: 0 0 calc(100% - 16px);
		flex: 0 0 calc(100% - 16px);
		max-width: calc(100% - 16px);
	}
	/*---------------------------------------------------------------
	11. END OF DEVELOPER
	---------------------------------------------------------------*/

	/*---------------------------------------------------------------
	12. REVENUE-MODEL PAGE
	---------------------------------------------------------------*/
	.revenue-models .brief-text.col-md-8 .col-xl-6 ul.stylish-list li {min-height: 180px;}
	.revenue-models .brief-text.col-md-8 .col-xl-6 ul.stylish-list li:last-child {border: none;}
	/*---------------------------------------------------------------
	12. END OF REVENUE-MODEL PAGE
	---------------------------------------------------------------*/

	/*---------------------------------------------------------------
	03. OVERVIEW PAGE
	---------------------------------------------------------------*/
	.content.standart-pages.overview .extended-hero-text .brief-text {padding: 0;}
	.standart-pages.overview .half-screen-jumbo.container-fluid > .image-container img {height: 72%;}
	.standart-pages.overview .half-screen-jumbo.container-fluid.jumbo-image-left {display: flex;}
	.standart-pages.overview .half-screen-jumbo.container-fluid.jumbo-image-left > .image-container {
		position: relative;
		left: auto;
		top: auto;
		right: auto;
		bottom: auto;
		width: 50%;
		height: calc(100vh - 256px);
		padding: 0;
		margin: 16px 0;
	}
	.standart-pages.overview .half-screen-jumbo.container-fluid.jumbo-image-left > .image-container img {height: 100%;}
	.standart-pages.overview .half-screen-jumbo.container-fluid.jumbo-image-left > .container {
		width: 50%;
		max-width: 570px;
		margin: auto auto auto 0;
	}
	.standart-pages.overview .half-screen-jumbo.container-fluid.jumbo-image-left .brief-text {
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}
	.standart-pages.overview .half-screen-jumbo.container-fluid.jumbo-image-left .action-btn-group {width: 100%;}
	.content.standart-pages.overview .full-with-banner .carousel-item {perspective: 1200px;}
	.content.standart-pages.overview .full-with-banner .container {
		position: absolute;
		left: 50%;
		top: 50%;
		max-width: 640px;
		padding: 32px;
		background-color: rgba(255, 255, 255, 0.9);
		border-radius: 5px;
		transform: translate(-50%, -50%) rotateX(90deg);
		z-index: 1;
	}
	.content.standart-pages.overview .full-with-banner .active .container {
		animation: fullWBannerRotate .6s forwards .5s;
	}
	@keyframes fullWBannerRotate {
		000% {transform: translate(-50%, -50%) rotateX(90deg);}
		100% {transform: translate(-50%, -50%) rotateX(0deg);}
	}
	/*---------------------------------------------------------------
	02. END OF OVERVIEW PAGE
	---------------------------------------------------------------*/

	/*---------------------------------------------------------------
	05. PLUGIN
	---------------------------------------------------------------*/
	.plugin-basics {
		flex-wrap: nowrap;
		min-width: 640px;
	}
	.plugin-simple-data {
		width: 120px;
		flex-direction: column;
		border-bottom: none;
		border-right: 1px solid rgba(0, 0, 0, .1);
	}
	.plugin-basic-info,
	.plugin-name-group,
	.logo-icon,
	.plugin-basic-info .price-btn,
	.plugin-detail .rating {
		width: 100%;
		text-align: right;
		padding: 1rem;
		margin: 0 0 0 auto;
	}
	.plugin-basic-info {
		flex-direction: column;
		padding: 0;
	}
	.logo-icon, .plugin-detail .rating {border-width: 1px 0;}
	.plugin-preview .carousel-inner {width: 280px;}
	.plugin-preview .carousel-control-container {
		top: 250px;
		width: 360px;
	}
	.plugin-extendeds {width: 150px;}
	.graph-container > .rating, .graph-filters .rating {border-width: 0 0 1px 0;}
	.graph-container {flex-direction: column;}
	/*---------------------------------------------------------------
	05. END OF PLUGIN
	---------------------------------------------------------------*/
}
@media (min-width:1300px) {
	.all-in-one-computer {width: 740px;}
	.all-in-one-computer:after {margin-top: -1.25%;}
	.foot-group {
		padding: 0 0 20% 0;
		margin: 12px auto auto auto;
	}
	.computer-screen-group > .screen-bezel {
		padding: 18px;
		border-radius: 18px 18px 0 0;
	}
	.all-in-one-computer .screen-bezel > .camera {
		top: 5px;
		width: 9px;
		height: 9px;
	}
	.builder-screen-phone .screen-only.screen-group {
		height: 418px;
		transform: scale(.58);
		transform-origin: center top;
		margin: 68px auto;
	}
	.builder-screen-phone .phone-sample.old-school {border-radius: 24px;}
	.phone-sample.old-school .grid-container {padding-top: 132px;}
	.body-metal {
		height: 60px;
		border-radius: 0 0 18px 18px;
	}
	.section.container-fluid .header > .caption {font-size: 18px;}
	#landingSection .container {padding: 32px 16px;}
	#landingSection .device-samples {margin: 230px 0 0 60%;}
	#landingSection .device-samples .phone-sample .grid-container {animation: builder_grid_container_phone_realtime_1300 0s forwards 8.2s;}
	#landingSection .hero-container {margin: 8px auto auto 20px;}
	#landingSection .hero-text {text-align: left;}
	#landingSection .btn-group-toggle .btn {width: auto;}
	
	/*---------------------------------------------------------------
	02. STANDART SUB PAGES
	---------------------------------------------------------------*/
	/*---------------------------------------------------------------
	02. END OF STANDART SUB PAGES
	---------------------------------------------------------------*/

	/*---------------------------------------------------------------
	03. OVERVIEW PAGE
	---------------------------------------------------------------*/
	.standart-pages.overview .half-screen-jumbo.container-fluid > .image-container img {height: 80%;}
	/*---------------------------------------------------------------
	02. END OF OVERVIEW PAGE
	---------------------------------------------------------------*/

	/*---------------------------------------------------------------
	07. BUILDER OVERVIEW PAGE
	---------------------------------------------------------------*/
	.builder-overview .hero-image {max-height: 70vh;}
	.builder-overview .all-in-one-computer {width: 1140px;}
	.builder-overview .all-in-one-computer:after {margin-top: 0.75%;}
	/*---------------------------------------------------------------
	07. END OF BUILDER OVERVIEW PAGE
	---------------------------------------------------------------*/

	/*---------------------------------------------------------------
	08. CONTROL PANEL & CMS PAGE
	---------------------------------------------------------------*/
	.cms .hero-image {max-height: 70vh;}
	.cms .all-in-one-computer {width: 1140px;}
	.cms .all-in-one-computer:after {margin-top: 0.75%;}
	/*---------------------------------------------------------------
	08. END OF CONTROL PANEL & CMS PAGE
	---------------------------------------------------------------*/
}
@media (min-width:1480px) {
	#landingSection .container {padding: 64px 0;}
	#landingSection .device-container {margin: auto 0 32px -40px;}
	#landingSection .device-samples {margin: 240px 0 0 60%;}
	#landingSection .sample-container.sample-phone {margin: -120px -140px -15px 30px;}
	#landingSection .hero-container {margin: 8px -40px auto 20px;}
	#landingSection h1 {font-size: 64px;}
	#landingSection h1 .small {font-size: 32px;}
	#landingSection h2 {font-size: 18px;}
	
	/*---------------------------------------------------------------
	02. STANDART SUB PAGES
	---------------------------------------------------------------*/
	/*---------------------------------------------------------------
	02. END OF STANDART SUB PAGES
	---------------------------------------------------------------*/

	/*---------------------------------------------------------------
	03. OVERVIEW PAGE
	---------------------------------------------------------------*/
	.standart-pages.overview .half-screen-jumbo.container-fluid > .image-container img {height: 100%;}
	.standart-pages.overview .half-screen-jumbo.container-fluid.jumbo-image-left > .image-container {height: calc(100vh - 120px);}
	/*---------------------------------------------------------------
	02. END OF OVERVIEW PAGE
	---------------------------------------------------------------*/
}



/*---------------------------------------------------------------
XX. END OF MEDIA QUERIES
---------------------------------------------------------------*/