body {

	overflow-x: hidden;

	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,252525+100 */

	background: #11b6f4; /* Old browsers */

	background: #11b6f4; /* FF3.6-15 */

	background: #11b6f4; /* Chrome10-25,Safari5.1-6 */

	background: #11b6f4; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

	filter: #11b6f4; /* IE6-9 fallback on horizontal gradient */

}



.extension {

    font-size: 1.4em;

    font-weight: 700;

    color: #4c4c4c!important;

	display: inline;

}



html {

	overflow-y: scroll;

	overflow-x: hidden;

}

ul {

	list-style: none;

}

textarea, input, a, button { 

	outline: none;

}

.clearfix {

	position: relative;

	clear: both;

}

.container-fluid {

	padding: 0 50px;

}

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

# Typography

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

body {
	font-family: 'Exo 2', sans-serif;
	font-size: 16px;
	color: #00b2fd;
}

h1, h2, h3, h4, h5, h6 {

	font-weight: 700;

}

a {

	-webkit-transition: all 0.2s ease-in-out 0s;

	-moz-transition: all 0.2s ease-in-out 0s;

	-ms-transition: all 0.2s ease-in-out 0s;

	-o-transition: all 0.2s ease-in-out 0s;

	transition: all 0.2s ease-in-out 0s;

}

a:hover, a:visited, a:focus, a:active, button:hover, button:visited, button:active, button:focus; {

	text-decoration: none !important;

	outline: none !important;

}

::selection {
	/* background: #00b2fd; */
	color: #fff;
	text-shadow: none;
}

::-moz-selection {

	background: #000;

	color: #fff;

	text-shadow: none;

}



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

# Animations

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

.animation-delay-100 {

	-webkit-animation-delay: 0.1s;

	animation-delay: 0.1s;

}

.animation-delay-200 {

	-webkit-animation-delay: 0.2s;

	animation-delay: 0.2s;

}

.animation-delay-300 {

	-webkit-animation-delay: 0.3s;

	animation-delay: 0.3s;

}

.animation-delay-400 {

	-webkit-animation-delay: 0.4s;

	animation-delay: 0.4s;

}

.animation-delay-600 {

	-webkit-animation-delay: 0.6s;

	animation-delay: 0.6s;

}

.animation-delay-800 {

	-webkit-animation-delay: 0.8s;

	animation-delay: 0.8s;

}

.animation-delay-1000 {

	-webkit-animation-delay: 1s;

	animation-delay: 1s;

}

.animation-delay-2000 {

	-webkit-animation-delay: 2s;

	animation-delay: 2s;

}



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

# Header

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

header {
	text-align: center;
	padding: 20px 0;
	background: #11b6f4;
}

.header-icon-wrapper i, .header-icon-wrapper span.lnr {

	font-size: 5em;

	color: #fff;

	line-height: 1;

	display: inline-block;

}

.site-logo {

	max-width: 60px;

	margin: 0 auto;

	display: table;

	color:#fff;

}

.rainbow-text {

    -webkit-animation: color-change 3s infinite;

    -moz-animation: color-change 3s infinite;

    -o-animation: color-change 3s infinite;

    -ms-animation: color-change 3s infinite;

    animation: color-change 3s infinite;

}

@-webkit-keyframes color-change {

    0% { color: #b896ed; }

    25% { color: #54e883; }

    50% { color: #eab05f; }

    75% { color: #2495e2; }

    100% { color: #b896ed; }

}

@keyframes color-change {

    0% { color: #b896ed; }

    25% { color: #54e883; }

    50% { color: #eab05f; }

    75% { color: #2495e2; }

    100% { color: #b896ed; }

}

.header-title {

	margin: 0;

	color:#fff;

	display: inline-block;

}



h6 {color: #fff!important;font-weight:300!important;letter-spacing: 1px!important;margin-top:10px;}	



.site-logo path {

	-webkit-animation: color-change-svg 3s infinite;

    -moz-animation: color-change-svg 3s infinite;

    -o-animation: color-change-svg 3s infinite;

    -ms-animation: color-change-svg 3s infinite;

    animation: color-change-svg 3s infinite;

}

@-webkit-keyframes color-change-svg {

    0% { fill: #b896ed; }

    25% { fill: #54e883; }

    50% { fill: #eab05f; }

    75% { fill: #2495e2; }

    100% { fill: #b896ed; }

}

@keyframes color-change-svg {

    0% { fill: #b896ed; }

    25% { fill: #54e883; }

    50% { fill: #eab05f; }

    75% { fill: #2495e2; }

    100% { fill: #b896ed; }

}

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

# Live Search

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

.live-search-section {
	position: relative;
	padding: 25px 0;
	background: #fff;
}

.sp-input {
	width: 100%;
	height: 60px;
	padding: 0 10px 0 65px;
	font-size: 1.4em;
	border-radius: 5px;
	border: none;
	box-shadow: none;
	background: rgba(255, 255, 255, 0.05);
	color: #111;
}

#live-search fieldset {

	position: relative;

}

#live-search fieldset i, #live-search fieldset span.lnr {

	position: absolute;

	font-size: 2em;

	top: 14px;

	left: 20px;

	color: #fff;

}

#filter-count {

	display: block;

	text-align: center;

	color: #999;

	font-size: 0.7em;

	margin: 3px 0 0 0;

	position: absolute;

	bottom: -20px;

	left: 0;

	text-transform: uppercase;

	letter-spacing: 2px;

	font-weight: 300;

	width: 100%;

}





.title-under {

    position: absolute;

    left: 26px;

    top: 100px;

    width: 22%;

    z-index: 20;

    color: #fff;

    font-size: 10px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}



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

# App Line Grid

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

.app-line-grid-section {

	position: relative;

	padding: 10px 0 20px 0;

}

ul.app-line-grid {

	padding: 0;

	margin: 0;

}

.app-line-grid-item {
	position: relative;
	width: 100%;
	border-bottom: 1px solid rgba(255,255,255,0.1);
	padding: 15px 0;
	cursor: pointer;
}

.app-line-grid-item:after {
	content: '';
	height: 100%;
	width: 100%;
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	background: rgba(255, 255, 255, 0.025);
	z-index: -1;
	opacity: 0;
}

.app-line-grid-item:last-child {

	border-bottom: none;

}

.app-line-grid-item:hover::after {

	opacity: 1;

}

.app-line-grid-item .app-img-wrapper {

	position: relative;

	width: 5%;

	float: left;

	padding-right: 10px;

}

.app-line-grid-item .app-meta-wrapper {

	position: relative;

	width: 95%;

	float: left;

	padding-left: 10px;

	padding-top: 2px;

}

.app-meta-wrapper:after {

	font-family: "Font Awesome 5 Free";

	content: "\f105";

	font-weight: 900;

    font-style: normal;

	position: absolute;

	right: 0;

	top: 20px;

	font-size: 2em;

	color: rgba(51, 51, 51,0.5);

}

.app-img {

	border-radius: 5px;

}

.app-author {

	font-size: 0.9em;

}

.app-title {

	font-weight: 700;

	color: #fff;

	font-size: 1.2em;

}

.app-description {
	color: #fff;
}



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

# App Modal Holder

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

#app-modal-holder {

	max-width: 600px;

	margin: 0 auto;

}

.app-modal-holder-top-wrapper {

	position: relative;

	padding: 30px 50px 0 50px;

	background: #151515;

	-webkit-border-top-left-radius: 15px;

	-webkit-border-top-right-radius: 15px;

	-moz-border-radius-topleft: 15px;

	-moz-border-radius-topright: 15px;

	border-top-left-radius: 15px;

	border-top-right-radius: 15px;

}

.mockup-holder {

	position: relative;

	display: table;

	margin: 0 auto;

	width: 270px;

}

.phone-mockup {

	position: relative;

	width: 100%;

}

.mockup-icon {

	position: absolute;

	left: 31px;

	top: 55px;

	border-radius: 8px;

	max-width: 42px;

	max-height: 42px;

	z-index: 20;

}

.app-modal-holder-bottom-wrapper {

	position: relative;

	padding: 30px 50px 60px 50px;

	background: #03A3DF;

	text-align: center;

	color: #fff;

	-webkit-border-bottom-right-radius: 15px;

	-webkit-border-bottom-left-radius: 15px;

	-moz-border-radius-bottomright: 15px;

	-moz-border-radius-bottomleft: 15px;

	border-bottom-right-radius: 15px;

	border-bottom-left-radius: 15px;

}

.app-modal-holder-bottom-wrapper h2 {

	margin: 0 0 10px 0;

}

#process-holder {

	width: 100%;

	height: 100%;

	left: 0;

	top: 0;

	position: fixed;

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

	z-index: 1050;

	display: flex;

    align-items: center;

}

.processing-wrapper {

	margin: 0 auto;

	border-radius: 12px;

	background: #fff;

	padding: 30px 20px;

	width: 290px;

	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.7), 0 3px 5px 0 rgba(0, 0, 0, 0.3);

}

.processing-title {

	font-size: 1.5em;

	font-weight: 700;

	margin: 0 0 15px 0;

	text-align: center;

	color: #000;

}

.processing-msg {

	font-size: 0.95em;

	text-align: center;

	font-weight: 400;

}

.console-loadbar {

	width: 90%;

	position: relative;

	margin: 15px auto 0 auto;

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

	border-radius: 7px;

}

.console-loadbar div {

	font-size: 5px;

	text-indent: 9999px;

	overflow: hidden;

	border-radius: 7px;

}

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

# Button

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

.app-btn-wrapper {

	margin: 20px auto 0 auto;

}

.app-btn {

	width: 100%;

	max-width: 270px;

	margin: 0 auto;

	padding: 15px 10px;

	color: #fff;

	text-transform: uppercase;

	letter-spacing: 1px;

	font-weight: 700;

	border-radius: 5px;

	cursor: pointer;

}



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

# Responsive Design

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

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

	.app-line-grid-item .app-img-wrapper {

		width: 7%;

	}

	.app-line-grid-item .app-meta-wrapper {

		width: 93%;

	}

}

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

	.app-line-grid-item .app-img-wrapper {

		width: 10%;

	}

	.app-line-grid-item .app-meta-wrapper {

		width: 90%;

	}

}

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

	.app-line-grid-item .app-img-wrapper {

		width: 15%;

	}

	.app-line-grid-item .app-meta-wrapper {

		width: 85%;

	}

	.app-meta-wrapper:after {

		top: 5px;

	}

}

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

	.container-fluid {

		padding: 0 15px;

	}

	.app-line-grid-item {

		display: flex;

		align-items: center;

	}

}

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

	.app-line-grid-item .app-img-wrapper {

		width: 20%;

	}

	.app-line-grid-item .app-meta-wrapper {

		width: 80%;

	}

	.app-modal-holder-bottom-wrapper {

		padding: 20px 20px 40px 20px;

	}

}

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

	.live-search-section {

		padding: 15px 0;

	}

	.site-logo {

		max-width: 45px;

	}

	.header-title {

		font-size: 2em;

	}

	.app-line-grid-item {

		padding: 12px 0;

	}

	.app-author {

		font-size: 0.75em;

	}

	.app-title {

		font-size: 1em;

	}

	.app-description {

		font-size: 0.8em;

	}

}

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

	.mockup-holder {

		width: 200px;

	}

	.mockup-icon {

		left: 23px;

		top: 41px;

		border-radius: 7px;

		max-width: 30px;

		max-height: 30px;

	}

	.app-modal-holder-bottom-wrapper {

		padding: 20px 15px 40px 15px;

	}

	.app-modal-holder-bottom-wrapper h2 {

		font-size: 1.7em;

	}

}