/***********************************************
Template Name: Tubex
Author: Enventer
Author URL: https://themeforest.net/user/enventer
Website: www.enventer.com
***********************************************/

/* TABLE OF CONTENTS:
----------------------------------------------------------------

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

1. Default Theme CSS
    1.1 Scrollup Button
    1.2 Preloader
    1.3 Section Heading
    1.4 Left & Right Widget

2. Header Area CSS
    2.1 Header Video
    2.2 Intro Text
    2.3 Learn More Button
    2.3 Learn More Button

3. Menu Area CSS
    3.1 Profile Image
    3.2 Mobile Menu
    3.3 Toggle Menu
    3.4 Menu Social Icon

4. About Area CSS
    4.1 Personal Info
    4.2 Channel Info
    4.3 Subscriber

5. Work Area CSS
    5.1 Work Area
    5.2 Play Button
    5.3 All Hover

6. Expertise Area CSS
    6.1 Single Expertise

7. Blog Area CSS
    7.1 Single Blog
    7.2 Blog Text
    7.3 Readmore Button
    7.4 Blog Filter

8. Contact Area CSS
    8.1 Cotact Form
    8.2 Input Field
    8.3 Textarea
    8.4 Footer Social
    
9. Footer Area CSS
    9.1 Footer Text

10. Blog Details Area CSS
    10.1 Blog Details Text
    10.2 Blog Search Widget
    10.3 Blog Categories
    10.4 Blog latest Post
    10.5 Blog Tag List
    10.6 Blog Comment Form
    10.7 Single Reply Text

11. Terms & Services Area CSS
    11.1 Terms Services Text

12. Comming Soon Area CSS
    12.1 Comming Soon Text

13. Error Page Area CSS
    13.1 Error Page Content

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

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

/***************1. Default Theme CSS**************/
html,
body {
	height: 100%;
	font-family: 'Poppins', sans-serif;
	background-color: #181818;
	margin: 0;
	padding: 0
}

a:focus {
	outline: 0px solid
}

img {
	max-width: 100%;
	height: auto
}

p {
	margin: 0;
	font-size: 16px;
	line-height: 28px;
	color: #fff;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 10px;
}

a {
	-webkit-transition: all 0.3s ease 0s;
	-o-transition: all 0.3s ease 0s;
	transition: all 0.3s ease 0s;
	text-decoration: none;
}

a:hover {
	color: #6b6fff;
	text-decoration: none;
}

a:active,
a:hover {
	outline: 0 none;
}

ul {
	list-style: outside none none;
	margin: 0;
	padding: 0
}

.grid-p-left {
	padding-left: 0
}

.grid-p-right {
	padding-right: 0
}

/*1.1 Scrollup Button*/
#scrollUp {
	background: #ff3434;
	font-size: 25px;
	bottom: 4px;
	color: #fff;
	height: 50px;
	line-height: 50px;
	right: 15px;
	text-align: center;
	-webkit-transition: all 0.5s ease 0s;
	-o-transition: all 0.5s ease 0s;
	transition: all 0.5s ease 0s;
	width: 50px;
}

/*1.2 Preloader*/
.preloader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-color: #212121;
	pointer-events: none;
	z-index: 999999999999999;
	-webkit-animation: fadeout 1s linear forwards;
	animation: fadeout 1s linear forwards;
	-webkit-animation-delay: 2s;
	animation-delay: 2s
}

@-webkit-keyframes fadeout {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

@keyframes fadeout {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

.loader {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	background-color: #0f0f0f;
	z-index: 9999;
}

.loader img {
	position: absolute;
	left: 50%;
	top: 45%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 110px;
}

.count {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	font-size: 45px;
	color: #ff3434;
	mix-blend-mode: difference;
	width: 300px;
	margin: auto;
	text-align: center;
	z-index: 9999;
	font-weight: 500;
}

/*1.3 Section Heading*/
.section-heading h3 {
	font-size: 30px;
	text-transform: uppercase;
	padding: 0 0 30px 0;
	color: #fff
}

.section-heading h3 span {
	color: #ff3434
}

/*1.4 Left & Right Widget*/
.left-side-area {
	width: 150px;
	position: absolute;
	left: 0;
	top: 0;
	overflow: hidden;
}

.right-side-area {
	width: auto;
	position: absolute;
	-webkit-transition: 1s;
	-o-transition: 1s;
	transition: 1s;
	left: 150px;
	top: 0;
	right: 0;
}

/***************2. Header Area CSS***************/
.header-area {
	width: 100%;
	height: 100vh;
	overflow: hidden;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center
}

.header-area:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.8);
	z-index: 11
}

.header-area-2 {
	background-image: url('img/./home2.jpg');
	width: 100%;
	height: 100vh;
	overflow: hidden;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center
}

.header-area-2:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.7);
	z-index: 11
}

.header-area-3 {
	background-image: url('img/./home3.jpg');
	width: 100%;
	height: 100vh;
	overflow: hidden;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center
}

.header-area-3:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.4);
	z-index: 11
}

/*2.1 Header Video*/
.header-area video {
	position: relative;
	top: 0;
	left: 0;
	-o-object-fit: cover;
	object-fit: cover;
	width: 100%;
	height: 100%;
	pointer-events: none;
	-webkit-transition: 1s;
	-o-transition: 1s;
	transition: 1s
}


/*2.2 Intro Text*/
.intro-text {
	position: absolute;
	z-index: 111;
	text-align: center
}

.intro-text h1 {
	text-transform: uppercase;
	font-size: 40px;
	color: #fff;
	margin-bottom: 10px;
	font-weight: 900;
}

.intro-text h1 > span {
	color: #ff3434
}

.intro-text p {
	font-size: 17px;
	letter-spacing: 1px;
	color: #ffffff;
	font-weight: 400;
	line-height: 29px
}

/*2.3 Learn More Button*/
.learnmore {
	margin-top: 25px
}

.learnmore a {
	border: 2px solid #ff3434;
	text-decoration: none;
	color: #fff;
	text-transform: capitalize;
	display: inline-block;
	padding: 10px 30px;
	-webkit-transition: .5s;
	-o-transition: .5s;
	transition: .5s;
	font-size: 15px;
	font-weight: 400;
	border-radius: 30px;
}

.learnmore a:hover {
	background-color: #ff3434;
	color: #fff;
}

/***************3. Menu Area CSS***************/
.sidemenu {
	background-color: #141313;
	width: 150px;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	text-align: center;
	padding-top: 35px;
	-webkit-transition: 1s;
	-o-transition: 1s;
	transition: 1s;
	z-index: 999999;
}

.sidemenu nav ul {
	margin-top: 20px
}

.sidemenu nav ul li {
	display: block;
}

.sidemenu nav ul li a {
	position: relative;
	display: block;
	font-size: 15px;
	text-transform: uppercase;
	color: #969696;
	padding: 15px 0;
	margin: 4px 0;
	-webkit-transition: .5s;
	-o-transition: .5s;
	transition: .5s;
}

.sidemenu nav ul li a:hover {
	color: #fff;
}

.sidemenu nav ul li a:after {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background-color: #ff3434;
	opacity: 0;
	-webkit-transition: .6s;
	-o-transition: .6s;
	transition: .6s;
	z-index: -1;
}

.sidemenu nav ul li a:hover:after {
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	opacity: 1;
	left: 0;
	width: 165px;
	border-radius: 0 30px 30px 0
}

.sidemenu nav ul li a.current {
	color: #fff
}

/*3.1 Profile Image*/
.profile a img {
	border-radius: 50%;
	height: 70px;
	width: 70px
}

.logo img {
	width: 100px;
	margin-top: 35px;
}

/*3.2 Mobile Menu*/
.mobile-menu {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	background-color: #141313;
	height: 60px;
	z-index: 1111;
	padding-left: 150px;
	padding-top: 17px;
	-webkit-transition: 1s;
	-o-transition: 1s;
	transition: 1s;
	visibility: hidden;
	opacity: 0;
}

.mobile-menu .mlogo h2 {
	color: #ff3434;
	text-transform: uppercase;
}

.mlogo {
	float: left;
	width: 50%;
	padding-left: 15px
}

.mlogo img {
	width: 100px
}

/*3.3 Toggle Menu*/
.toggle {
	text-align: right;
	overflow: hidden;
	width: 50%;
	padding-right: 15px
}

.toggle i {
	font-size: 30px;
	color: #fff;
	cursor: pointer;
	-webkit-transition: .5s;
	-o-transition: .5s;
	transition: .5s;
}

.toggle i:hover {
	color: #ff3434
}

/*3.4 Menu Social Icon*/
.social {
	text-align: center;
	position: absolute;
	bottom: 30px;
	left: 0px;
	right: 0;
	text-align: center;
}

.social ul li {
	display: inline-block;
	margin-right: 8px
}

.social ul li:last-child {
	margin-right: 0
}

.social ul li a {
	display: inline-block;
	color: #fff;
	font-size: 17px;
	text-align: center;
	-webkit-transition: .5s;
	-o-transition: .5s;
	transition: .5s;
}

.social ul li a:hover {
	color: #ff3434
}

/***************4. About Area CSS**************/
.about-content {
	padding: 90px 30px;
	background-image: url(img/./about-content-bg.jpg);
	height: 100%;
	background-position: 50% 0;
	background-size: cover;
}

/*4.1 Personal Info*/
.about-image {
	background-image: url(img/./about.jpg);
	height: 100%;
	background-position: 50% 0;
	background-size: cover;
}

.personal-info h2 {
	text-transform: uppercase;
	font-size: 30px;
	font-weight: 900;
	color: #fff;
	margin-bottom: 20px
}

.personal-info h2 span {
	color: #ff3434
}

.general-info h3 {
	text-transform: uppercase;
	font-size: 26px;
	font-weight: 900;
	color: #fff;
}

.general-info h3 span {
	color: #ff3434
}

.general-info h4 {
	text-transform: uppercase;
	font-size: 21px;
	font-weight: 400;
	color: #ccc;
}

/*4.2 Channel Info*/
.channel-name {
	margin-top: 40px
}

.channel-name a {
	border: 2px solid #ff3434;
	color: #fff;
	text-transform: capitalize;
	display: inline-block;
	padding: 10px 30px;
	-webkit-transition: .5s;
	-o-transition: .5s;
	transition: .5s;
	font-size: 5px;
	font-weight: 400;
	border-radius: 30px;
	font-size: 15px;
	margin-top: 10px
}

.channel-name a:hover {
	background-color: #ff3434;
	color: #fff
}

/*4.3 Subscriber*/
.subscribe {
	margin-top: 40px
}

.single-count-area {
	color: #fff;
	font-weight: 700;
	text-transform: uppercase;
	margin-top: 15px
}

.single-count-area span {
	font-size: 26px;
	font-weight: 900
}

.single-count-area b {
	color: #ff3434;
	font-size: 26px
}

.single-count-area p {
	font-size: 18px;
	margin-top: 10px;
	color: #ccc;
	font-weight: normal;
	margin-bottom: 0;
}

/***************5. Work Area CSS***************/
.my-work-area {
	background-color: #0f0f0f;
	padding: 90px 0
}

.single-work {
	position: relative;
	overflow: hidden;
	-webkit-transition: .5s;
	-o-transition: .5s;
	transition: .5s;
	overflow: hidden;
}

.single-work img {
	-webkit-transition: .5s;
	-o-transition: .5s;
	transition: .5s
}

/*5.1 Work Text*/
.work-text {
	position: absolute;
	left: 0;
	bottom: -100%;
	width: 100%;
	height: auto;
	background-color: rgba(11, 11, 11, 0.9);
	padding: 5px 15px;
	-webkit-transition: .5s;
	-o-transition: .5s;
	transition: .5s
}

.work-text p {
	margin: 0;
	font-size: 15px;
	line-height: 24px;
	padding-bottom: 12px
}

/*5.2 Play Button*/
.play-button i {
	position: absolute;
	top: 0%;
	left: 50%;
	z-index: 9999999;
	color: #fff;
	font-size: 35px;
	background-color: #ff3434;
	border-radius: 12px;
	height: 40px;
	width: 52px;
	line-height: 40px;
	text-align: center;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	opacity: 0;
	-webkit-transition: .8s;
	-o-transition: .8s;
	transition: .8s
}

/*5.3 All Hover*/
.single-work:hover .work-text {
	bottom: 0;
}

.single-work:hover .play-button i {
	opacity: 1;
	top: 35%
}

.single-work:hover img {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	-webkit-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
}

.margin-top60 {
	margin-top: 60px
}

/***************6. Expertise Area CSS**************/
.expertise-area {
	padding: 90px 0;
	background-image: url('img/./expertise-bg.jpg')
}

.expertise-heading-section {
	text-align: center
}

/*6.1 Single Expertise*/
.single-expertise {
	background-color: rgba(15, 15, 15, 0.85);
	padding: 50px 30px;
	text-align: center;
	position: relative;
	overflow: hidden;
	-webkit-transition: .5s;
	-o-transition: .5s;
	transition: .5s
}

.single-expertise h4 {
	text-transform: uppercase;
	font-size: 22px;
	font-weight: 600;
	color: #ccc;
	margin: 25px 0
}

.section-description p {
	margin-bottom: 45px;
	margin-top: -20px;
	color: #cacaca
}

.single-expertise:before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 3px;
	background-color: #ff3434;
	-webkit-transition: .5s;
	-o-transition: .5s;
	transition: .5s;
	opacity: 0;
	visibility: hidden
}

.single-expertise:hover {
	background-color: rgb(15, 15, 15);
	-webkit-transform: translateY(-10px);
	-ms-transform: translateY(-10px);
	transform: translateY(-10px);
}

.single-expertise:hover:before {
	width: 100%;
	opacity: 1;
	visibility: visible
}

/***************7. Blog Area CSS**************/
.blog-area {
	padding: 90px 0;
	background-color: #0f0f0f
}

.blog-heading-section {
	text-align: center
}

/*7.1 Single Blog*/
.single-blog {
	position: relative;
	overflow: hidden;
}

.single-blog img {
	width: 100%;
}

.single-blog:before {
	content: '';
	position: absolute;
	left: 0;
	top: -100%;
	width: 100%;
	height: 100%;
	background-color: rgba(15, 15, 15, 0.7);
	opacity: 0;
	visibility: hidden;
	-webkit-transition: .7s;
	-o-transition: .7s;
	transition: .7s
}

.single-blog:hover:before {
	opacity: 1;
	visibility: visible;
	top: 0
}

.single-blog:hover .blog-text {
	opacity: 1;
	visibility: visible;
	bottom: 0
}

/*7.2 Blog Text*/
.blog-text {
	position: absolute;
	bottom: -100%;
	left: 0;
	padding: 10px;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	-webkit-transition: 1s;
	-o-transition: 1s;
	transition: 1s
}

.blog-text h4 {
	font-size: 19px;
	color: #fff;
	line-height: 30px;
	margin: 0;
}

/*7.3 Readmore Button*/
.readmore-btn a {
	background-color: #ff3434;
	color: #fff;
	text-transform: capitalize;
	font-size: 15px;
	padding: 10px;
	margin-top: 15px;
	margin-bottom: 10px;
	margin-bottom: 8px 10px;
	display: inline-block;
	-webkit-transition: .5s;
	-o-transition: .5s;
	transition: .5s
}

.readmore-btn a:hover {
	background-color: #fff;
	color: #ff3434
}

/*7.4 Blog Filter*/
.grid-item {
	width: 25%;
	margin-bottom: 15px;
	padding: 0 7.5px
}

.blog-button {
	text-align: center
}

.blog-filter {
	margin: 0 0 60px 0;
	list-style: none;
}

.blog-filter li {
	display: inline-block;
	margin: 8px 8px;
}

.blog-filter li a {
	font-size: 14px;
	padding: 10px 20px;
	text-decoration: none;
	text-transform: capitalize;
	color: #fff;
	-webkit-transition: .5s;
	-o-transition: .5s;
	transition: .5s;
	border: 1px solid #3b0404;
	border-radius: 3px
}

.blog-filter li a:hover {
	color: #fff;
	background-color: #ff3434
}

.blog-filter li.active a {
	padding: 10px 20px;
	color: #fff;
	background-color: #ff3434;
	-webkit-transition: .5s;
	-o-transition: .5s;
	transition: .5s;
	border-radius: 3px;
	border: 1px solid transparent;
}


/***************8. Contact Area CSS**************/
.contact-area {
	padding: 90px 0;
	background-image: url('img/./contact.jpg');
	background-position: center;
}

.contact-heading-section {
	text-align: center
}

/*8.1 Cotact Form*/
.contact-form {
	padding: 0 45px;
}

.contact-form div {
	display: inline-block;
	width: 48.3%
}

.field-separate {
	margin-right: 1.7%
}

/*8.2 Input Field*/
.contact-form input[type="text"] {
	width: 100%;
	display: inline-block;
	margin-right: 1.6%;
	padding: 15px 5px;
	background-color: transparent;
	border: none;
	border-bottom: 1px solid #fff;
	color: #fff;
	-webkit-transition: .5s;
	-o-transition: .5s;
	transition: .5s
}

.contact-form input[type="text"]:focus {
	border-bottom: 1px solid #ff3434;
	padding: 15px 10px;
}

.contact-form input[type='email'] {
	width: 102%;
	display: inline-block;
	padding: 15px 5px;
	background-color: transparent;
	border: none;
	border-bottom: 1px solid #fff;
	color: #fff;
	-webkit-transition: .5s;
	-o-transition: .5s;
	transition: .5s;
	margin-bottom: 50px
}

.contact-form input[type="email"]:focus {
	border-bottom: 1px solid #ff3434;
	padding: 15px 10px;
}

.contact-form input[type="submit"] {
	margin: auto;
	display: block;
	margin-top: 60px;
	font-size: 15px;
	color: #fff;
	background-color: #ff3434;
	border: none;
	border-radius: 30px;
	padding: 10px 40px;
	text-transform: capitalize;
	cursor: pointer;
	-webkit-transition: .5s;
	-o-transition: .5s;
	transition: .5s
}

.contact-form input[type="submit"]:hover {
	background-color: #fff;
	color: #ff3434
}

/*8.3 Textarea*/
.contact-form textarea {
	width: 100%;
	margin-top: 60px;
	padding: 0px 5px 25px 5px;
	background-color: transparent;
	border: none;
	border-bottom: 1px solid #fff;
	color: #fff;
	-webkit-transition: .5s;
	-o-transition: .5s;
	transition: .5s
}

.contact-form textarea:focus {
	border-bottom: 1px solid #ff3434;
	padding: 0px 5px 25px 10px;
}

/*8.4 Footer Social*/
.footer-social {
	margin-top: 60px
}

.footer-social h5 {
	font-size: 17px;
	text-align: center;
	text-transform: capitalize;
	margin-bottom: 20px;
	color: #fff
}

.footer-social ul img {
	margin-right: 6px;
	height: 32px;
	width: 32px
}

/***************9. Footer Area CSS**************/
footer {
	background-color: #141313;
	text-align: center;
	padding: 15px 0;
	text-transform: capitalize;
}

/*9.1 Footer Text*/
footer p {
	margin: 0;
	font-size: 15px;
}

footer a {
	color: #cacaca;
	font-size: 15px;
}

footer a:hover {
	color: #ff3434;
}

/***************10. Blog Details Area CSS**************/

.single-blog-bg {
	background-image: url('img/single-blogo-bg.jpg');
	height: 50vh;
	width: 100%;
	background-position: 50% 0;
	background-size: cover;
	position: relative;
	-webkit-transition: 1s;
	-o-transition: 1s;
	transition: 1s
}

.single-blog-bg:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 50vh;
	background-color: rgba(15, 15, 15, 0.7);
	-webkit-transition: 1s;
	-o-transition: 1s;
	transition: 1s
}

/*10.1 Blog Details Text*/
.blog-image-text {
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	text-align: center;
}

.blog-image-text h1 {
	font-size: 35px;
	color: #fff;
	font-weight: 600;
	line-height: 47px;
	text-transform: capitalize;
}

.blog-image-text span {
	font-size: 17px;
	color: #dbdbdb
}

.blog-paragraph {
	padding: 100px 25px 50px 100px;
}

.blog-paragraph p {
	color: #ccc;
	text-align: justify
}

.blog-paragraph blockquote {
	margin-bottom: 13px;
	margin-top: 30px;
	border-left: 5px solid #ff3434;
	padding: 10px 20px 10px 20px;
	color: #dbdbdb;
	background-color: #211e1e;
	text-align: justify
}

.blog-paragraph img {
	margin: 30px 0
}

/*10.2 Blog Search Widget*/
.right-widget {
	padding: 100px 100px 50px 0px;
}

.input-group-text {
	background-color: #ff3434;
	color: #fff;
	cursor: pointer;
	padding: 11px 20px;
	border: none
}

.form-control {
	height: 40px;
	font-size: 16px;
	text-transform: capitalize;
	-webkit-transition: .5s;
	-o-transition: .5s;
	transition: .5s;
	border-radius: 0
}

.form-control:focus {
	color: #0f0f0f;
	background-color: #fff;
	border: 1px solid #ff3434;
	outline: 0;
	-webkit-box-shadow: none;
	box-shadow: none;
	padding-left: 22px
}

/*10.3 Blog Categories*/
.categories {
	margin-bottom: 30px;
	margin-top: 30px
}

.sidebar-title h3 {
	border-bottom: 1px dashed #cccccc;
	padding-bottom: 10px;
	margin-bottom: 15px;
	text-transform: capitalize;
	font-weight: 600;
	font-size: 17px;
	color: #fff
}

.categories ul li {
	display: block;
	text-decoration: none;
	font-size: 16px;
	line-height: 1;
	padding: 15px 0;
	text-transform: capitalize;
	border-bottom: 1px solid rgba(136, 136, 136, 0.15);
	-webkit-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}

.categories ul li a {
	color: #ccc;
}

.categories ul li:last-child {
	border-bottom: 0
}

.categories ul li a:hover {
	color: #ff3434;
}

.categories ul li a span {
	position: relative;
	float: right;
	top: -5px;
	padding: 6px 7px 6px 7px;
	text-align: center;
	font-size: 13px;
	font-weight: 400;
	color: #fff;
	border-radius: 50%;
	overflow: hidden;
	z-index: 1;
	-webkit-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}

.categories ul li a:hover span {
	color: #fff;
}

.categories ul li a span::before {
	position: absolute;
	display: block;
	content: "";
	height: 100%;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #5c5c5c;
	z-index: -1;
	-webkit-transition: .5s;
	-o-transition: .5s;
	transition: .5s
}

.categories ul li a:hover span::before {
	background-color: #ff3434
}

/*10.4 Blog latest Post*/
.latest-post ul {
	margin-top: 30px
}

.latest-post ul li {
	position: relative;
	padding-left: 90px;
	margin-bottom: 20px;
	border-bottom: 1px solid rgba(136, 136, 136, 0.15);
	padding-bottom: 10px
}

.latest-post ul li:last-child {
	border-bottom: 0
}

.latest-post ul li img {
	position: absolute;
	left: 0;
	top: 0;
	width: 73px;
	height: auto;
}

.latest-post ul li h4 {
	margin-bottom: 0;
	font-size: 16px;
	line-height: 24px;
}

.latest-post ul li h4 a {
	color: #ccc;
	text-transform: capitalize;
	letter-spacing: 0;
	font-size: 16px;
	line-height: 23px;
}

.latest-post p {
	color: #fe5242;
	font-size: 15px;
}

/*10.5 Blog Tag List*/
.tag-list {
	margin-top: 30px;
}

.tag-list ul li {
	display: inline-block;
	margin: 5px
}

.tag-list ul li a {
	padding: 5px 10px;
	font-size: 14px;
	color: #ccc;
	display: inline-block;
	border: 1px solid #ccc;
	text-transform: capitalize;
}

.tag-list ul li a:hover {
	background-color: #ff3434;
	color: #fff;
	border: 1px solid transparent
}

/*10.6 Blog Comment Form*/
.blog-comment {
	margin: 50px 0 90px 0;
}

.comment-box {
	padding: 0 0 0 100px;
}

.comment-box h4 {
	font-size: 25px;
	color: #fff;
	text-transform: capitalize;
	margin-bottom: 30px
}

.comment-box input[type="text"] {
	width: 100%;
	padding: 10px;
	margin-bottom: 20px;
	border: 1px solid #bcbcbc;
	-webkit-transition: .5s;
	-o-transition: .5s;
	transition: .5s;
	background-color: transparent;
	color: #fff
}

.comment-box input[type='text']:focus {
	border: 1px solid #ff3434;
	padding: 10px 15px
}

.comment-box input[type='email'] {
	width: 100%;
	padding: 10px;
	margin-bottom: 20px;
	border: 1px solid #bcbcbc;
	-webkit-transition: .5s;
	-o-transition: .5s;
	transition: .5s;
	background-color: transparent;
	color: #fff
}

.comment-box input[type='email']:focus {
	border: 1px solid #ff3434;
	padding: 10px 15px
}

.comment-box textarea {
	width: 100%;
	padding: 10px;
	border: 1px solid #bcbcbc;
	-webkit-transition: .5s;
	-o-transition: .5s;
	transition: .5s;
	background-color: transparent;
	color: #fff
}

.comment-box textarea:focus {
	border: 1px solid #ff3434;
	padding: 10px 15px
}

.comment-submit {
	text-align: right;
	margin-top: 30px
}

.comment-submit input {
	background-color: #ff3434;
	color: #fff;
	padding: 10px 20px;
	border-radius: 30px;
	border: none;
	text-transform: capitalize;
	cursor: pointer;
	-webkit-transition: .5s;
	-o-transition: .5s;
	transition: .5s;
	border: 1px solid transparent
}

.comment-submit input:hover {
	background-color: #fff;
	border: 1px solid #ff3434;
	color: #ff3434
}

/*10.7 Single Reply Text*/
.comment-text {
	border-left: 1px solid #333333;
	padding: 0 100px 0 30px;
}

.comment-text h4 {
	font-size: 25px;
	color: #fff;
	text-transform: capitalize;
	margin-bottom: 30px
}

.single-reply {
	margin-bottom: 20px
}

.single-reply:last-child {
	margin-bottom: 0
}

.reply-img {
	float: left;
}

.reply-img img {
	border-radius: 50%
}

.reply-text {
	overflow: hidden;
	padding: 0 15px 15px 15px
}

.reply-text h5 {
	text-transform: capitalize;
	font-size: 18px;
	font-weight: 700;
	color: #dbdbdb;
	margin-bottom: 0
}

.reply-text p {
	color: #ccc;
	margin-bottom: 10px;
	font-size: 16px
}

.reply-text a {
	background-color: #ff3434;
	color: #fff;
	padding: 5px 17px;
	font-size: 13px;
	border-radius: 30px;
	border: none;
	text-transform: capitalize;
	cursor: pointer;
	-webkit-transition: .5s;
	-o-transition: .5s;
	transition: .5s;
	border: 1px solid transparent
}


/***************11. Terms & Services Area CSS**************/
.terms-services-bg {
	background-image: url('img/terms-of-service.jpg');
	height: 50vh;
	width: 100%;
	background-position: 50% 0;
	background-size: cover;
	position: relative;
	-webkit-transition: 1s;
	-o-transition: 1s;
	transition: 1s
}

.terms-services-bg:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 50vh;
	background-color: rgba(15, 15, 15, 0.75);
	-webkit-transition: 1s;
	-o-transition: 1s;
	transition: 1s
}

.terms-whitebg {
	background-color: #efefef;
	height: 100%;
	padding: 0;
}

/*11.1 Terms Services Text */
.terms-services-text {
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	text-align: center;
}

.terms-services-text h1 {
	font-size: 35px;
	font-weight: 700;
	color: #fff;
	text-transform: capitalize;
}

.terms-services-text h1 span {
	color: #ff3434
}

.terms-paragraph {
	padding: 100px;
}

.terms-paragraph p {
	color: #ccc;
	text-align: justify;
}

.terms-paragraph h4 {
	color: #c1c1c1;
	font-size: 22px;
	font-weight: 700;
	margin-top: 20px;
}

.terms-paragraph h4:first:child {
	margin-top: 0px;
}

.terms-paragraph h4 span {
	color: #ff3434
}

/***************12. Comming Soon Area CSS**************/

.countdown-area {
	background-image: url('img/comingsoon.jpg');
	height: 100vh;
	width: 100%;
	position: relative;
	left: 0;
	top: 0
}

.comming-logo {
	text-align: center
}

/*12.1 Comming Soon Text*/
.coming-soon-text h1 {
	text-transform: uppercase;
	color: #fff;
	text-align: center;
	font-weight: 500;
	font-size: 27px;
	margin-bottom: 30px;
	margin-top: 30px
}

.coming-soon-text p {
	font-size: 17px
}

.coming-soon-text {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	text-align: center;
}

.coming-soon-text img {
	width: 200px
}

ul.countdown li {
	display: inline-block;
	text-align: center;
	color: #ff3434;
	font-size: 40px;
	display: inline;
	font-weight: 900;
	text-transform: uppercase;
}

.fixed-box {
	width: 60px;
	height: 60px;
	color: #fff;
	display: inline-block;
}

.footer-social {
	margin-top: 60px
}

.footer-social h5 {
	font-size: 17px;
	text-align: center;
	text-transform: capitalize;
	margin-bottom: 20px;
	color: #fff
}

.footer-social ul img {
	margin-right: 6px;
	height: 32px;
	width: 32px
}

/***************13. Error Page Area CSS**************/
.error-page-area {
	background-color: #0f0f0f;
	width: 100%;
	height: 100vh;
	text-align: center
}

/*13.1 Error Page Content*/
.error-content {
	position: absolute;
	left: 50%;
	top: 47%;
	width: 100%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.error-content h3 {
	margin-top: 30px;
	font-size: 30px;
	color: #fff
}

.error-content img {
	padding: 30px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.error-content a {
	color: #fff;
	border: 1px solid #FF3434;
	padding: 10px 15px;
	margin-top: 20px;
	display: inline-block;
	text-transform: capitalize;
	font-size: 15px;
}

.error-content a:hover {
	background-color: #FF3434;
}

/*=====================================
=======================================
THE END
=======================================
=====================================*/