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

    Template Name: Nishflu - Coronavirus Medical Prevention HTML Template.
    Template URI: http://rockstheme.com
    Description: This is html5 template
    Author: Rocks_theme
    Author URI: http://rockstheme.com
    Version: 1.0

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

    /*-----------------------------------------------------------------------------------
     CSS INDEX
    ===================

    1. Theme Default CSS (body, link color, section etc)
    2. Header Top Area
    2.1 Header Bottom Area
    2.2. Sticky Header Area
    2.3. Mobile Menu Area
    3. Intro Area
    4.How to transmission Area
    5.About Area
    6. Symtoms Area
    7. Prevention area css
    8.Feature Area
    9. Team Area css
    10. Blog Area
    11. Footer Area
    12. Home 02 Area
    13. Wellcome Services Area
    14. Counter Area
    15. Home page 03
    16. Product Area
    17. Breadcumbs Area
    18. Error page area
    19. Error page area
    20. Blog Sidebar Area
    `21. Blog Details
    22.Contact CSS
    23. Animation CSS



-----------------------------------------------------------------------------------*/
/*----------------------------------------*/
/*  Google Fonts
/*----------------------------------------*/
@import url('https://fonts.googleapis.com/css?family=Nunito:300,400,600,700,800&display=swap');


/*----------------------------------------*/
/*  1.  Theme default CSS
/*----------------------------------------*/
html, body {
	height: 100%;
}
.floatleft {
	float:left;
}
.floatright {
	float:right;
}
.alignleft {
	float:left;
	margin-right:15px;
	margin-bottom: 15px;
}
.alignright {
	float:right;
	margin-left:15px;
	margin-bottom: 15px;
}
.aligncenter {
	display:block;
	margin:0 auto 15px;
}
a:focus {
	outline:0px solid;
}
img {max-width:100%;
	height:auto;
}
.fix {
	overflow:hidden;
}
p {
	margin:0 0 15px;
    color: #888;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Nunito', sans-serif;
	margin: 0 0 15px;
	color: #151b2c;
    font-weight: 600;
}
h1{
	font-size: 48px;
	line-height: 50px;

}
h2{
	font-size: 38px;
	line-height: 46px;

}
h3{
	font-size: 30px;
	line-height: 38px;

}
h4{
	font-size: 24px;
	line-height: 34px;

}
h5{
	font-size: 20px;
	line-height: 30px;

}
h6{
	font-size: 16px;
	line-height: 28px;

}
a {
	transition: all 0.3s ease 0s;
	text-decoration:none;
}
a:hover {
  color: #f92626;
  text-decoration: none;
}
a:active, a:hover {
  outline: 0 none;
}
a:hover, a:focus {
    color: #3d5368;
    text-decoration: none;
}
body {
	background: #fff none repeat scroll 0 0;
	color: #7e8ca0;
    font-family: 'Nunito', sans-serif;
	font-size: 16px;
	text-align: left;
	overflow-x: hidden;
	line-height: 26px;
}
#scrollUp {
    bottom: 40px;
    font-size: 20px;
    line-height: 48px;
    right: 30px;
    width: 44px;
    background-color: #f92626;
    color: #fff;
    text-align: center;
    height: 44px;
    border-radius: 3px;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
}
#scrollUp:hover {
    bottom: 45px;
    transition-duration: 500ms;
}
.clear{
	clear:both;
}
ul{
	list-style: outside none none;
	margin: 0;
	padding: 0;
}
input, select, textarea, input[type="text"], input[type="date"], input[type="url"], input[type="email"], input[type="password"], input[type="tel"], button, button[type="submit"] {
	-moz-appearance: none;
	box-shadow: none !important;
}
input:focus, textarea:focus, select:focus {
    outline: none;
}
div#preloader {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 99999;
	width: 100%;
	height: 100%;
	overflow: visible;
	background: #fff url('/img/logo/preloader.gif') no-repeat center center;
}
.navbar-collapse {
    padding-left: 0px;
}
::-moz-selection {
    background: #f92626;
    text-shadow: none;
}
::selection {
    background: #f92626;
    text-shadow: none;
}
.bg-color{
    background:#fafafa;
}
.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}
.area-padding{
	padding: 100px 0px;
}
.area-padding-2{
	padding: 100px 0px 70px;
}
.area-padding-3{
	padding: 100px 0px 50px;
}
.section-headline {
    padding-bottom: 40px;
    position: relative;
}
.section-headline.review-head {
    padding-bottom: 20px;
}
.section-headline h3 {
    font-size: 40px;
    line-height: 46px;
}
.section-headline p {
    font-size: 16px;
    max-width: 510px;
    margin: 0px auto;
}
.white-headline h3,
.white-headline h2{
   color:#fff;
}
.section-headline h4 .color {
    color: #f92626;
    font-weight: 600;
}
.mar-row{
    margin-top: 50px;
}
.color{
   color:#f92626;
}
.text-bold {
    font-weight: 800;
}
.simple-text{
    font-weight: 400;
}
.color-text{
    color: #f92626
}
.bg-dark-color-2 {
    background: #130b4b;
}
.bg-dark-color {
    background: #170e58;
}
.top-head {
    color: red;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 5px;
    display: block;
}
/*----------------------------------------*/
/*  2.1 Header Bottom Area
/*----------------------------------------*/
.header-one {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 999;
}
.header-area{
	background:transparent;
}
.logo {
    display: block;
}
.logo a {
    display: inline-block;
    height: auto;
    padding: 18px 0;
}
.center-bg {
    display: block;
    background: #fff;
    padding: 0px 20px 0px 0px;
}
.main-menu ul.navbar-nav li {
    float: left;
    position: relative;
}
.main-menu ul.navbar-nav li a {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    padding: 33px 15px;
    text-transform: capitalize;
    position: relative;
}
.main-menu > ul.navbar-nav >li >a::before {
    position: absolute;
    content: "";
    left: 16px;
    bottom: 25px;
    border: 1px solid #f92626;
    width:0;
    transition: 0.4s;
    opacity: 0;
}
.header-area.stick .main-menu > ul.navbar-nav >li >a::before {
    left: 16px;
    bottom: 27px;
}
.main-menu > ul.navbar-nav >li >a:hover::before {
    width:50%;
    transition: 0.4s;
    opacity: 1;
}
.main-menu ul.navbar-nav li a:hover{
	color: #f92626;
}
.main-menu ul.navbar-nav li.active a:focus {
    color: #fff;
}
.main-menu ul.navbar-nav li.active a {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    color: #f92626;
    position: relative;
    z-index: 9999999;
}
.navbar {
    border: medium none;
    margin-bottom: 0;
}
.navbar-default {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
}
.main-menu ul.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
    background: none;
    color:#fff;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
    background-color: transparent;
    color: #fff;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
    background: none;
}
.main-menu ul.nav li ul.sub-menu {
    background: #fff;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 115%;
    transition: all 0.3s ease 0s;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
    visibility: hidden;
    width: 200px;
    z-index: -99;
	padding: 10px 0px;
    border-radius: 3px;
}
.pagess {
    position: relative;
}
.navbar.navbar-default {
    float: right;
}
.main-menu ul.nav li ul.sub-menu li {
    padding: 0;
    position: relative;
    width: 100%;
}
.main-menu ul.nav li:hover ul.sub-menu{
    top:100%;
    opacity:1;
    z-index:999;
    visibility:visible;
}
.main-menu ul.nav li ul.sub-menu li a {
    color: #3d5368;
    display: block;
    font-size: 16px;
    padding: 5px 20px;
}
.main-menu ul.nav li ul.sub-menu li a span{
    color: #f92626;
}
.main-menu ul.nav li:hover ul.sub-menu li a:hover{
    color:#f92626;
}
.header-right-link {
    float: right;
    width: 140px;
    padding: 30px 0px;
    margin-left: 60px;
    text-align: right;
}
.slice-btn {
    display: inline-block;
    padding: 0px 15px;
}
.slice-btn span {
    font-size: 20px;
    font-weight: 500;
    color: #3d5368;
    cursor: pointer;
    line-height: 28px;
}
.s-menu {
    padding: 10px 25px;
    border: 1px solid #f92626;
    background: #f92626;
    color: #fff;
    transition: 0.4s;
    font-size: 17px;
    font-weight: 600;
    border-radius: 3px;
    text-transform: capitalize;
}
.s-menu:hover {
    color:#f92626;
    background:transparent;
    transition: all 0.4s ease 0s;
}
.header-area.stick  .header-right-link {
    padding: 29px 0px;
}
.logo a.black-logo {
    display: none;
}
/*--------------------------------*/
/* 2.2. Sticky Header Area
/*--------------------------------*/
.header-area.stick {
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999999;
    box-shadow: 0px 0px 3px #ddd, -2px -2px 3px #ddd;
    background: #fff;
}
.header-area.stick .logo a {
    display: inline-block;
    height: auto;
    padding: 17px 0;
}
.header-area.stick .main-menu ul.navbar-nav li a {
    padding: 32px 15px;
    color: #151b2c;
}
.header-area.stick .main-menu ul.nav li ul.sub-menu li a {
    color: #151b2c;
    display: block;
    padding: 5px 15px;
}
.header-area.stick .main-menu ul.nav li ul.sub-menu li a:hover{
    color: #f92626;
}
.header-area.stick .logo a.white-logo {
    display: none;
}
.header-area.stick .logo a.black-logo {
    display: block;
}
.header-area.stick .s-menu {
    color:#fff;
    background: #f92626;
    border: 1px solid #f92626;
    transition: all 0.4s ease 0s;
}
.header-area.stick .s-menu:hover{
    color:#f92626;
    background:transparent;
    transition: all 0.4s ease 0s;
    transform: translateY(-4px);
}
/*----------------------------------------*/
/*  2.3. Mobile Menu Area
/*----------------------------------------*/
.mobile-menu-area {
    background: #fdfcfc none repeat scroll 0 0;
    padding: 10px 0px ;
}
.mean-container .mean-bar::after {
    content: "";
    font-size: 21px;
    left: 5%;
    position: absolute;
    top: 12px;
    text-transform: uppercase;
    font-weight: 500;
}
.mean-container a.meanmenu-reveal:hover {
    color:#f92626
}
.mean-container .mean-nav ul {
    list-style-type: none;
    margin: 20px 0px;
    padding: 0;
    width: 100%;
}
.mean-container .mean-nav ul li a {
    background: #fdfcfc none repeat scroll 0 0;
    color: #3d5368;
    display: block;
    float: left;
    font-size: 14px;
    font-weight: 400;
    margin: 0;
    padding: 13px 10px;
    text-align: left;
    text-decoration: none;
    text-transform: capitalize;
    width: 90%;
}
.mean-nav ul li.mean-last {
    margin-bottom: 20px;
}
.mean-container .mean-nav ul li a.mean-expand {
    color: #3d5368;
    line-height: 17px;
}
.mean-container .mean-nav ul li {
    width: 99.7%;
}
/*----------------------------------------*/
/*  3. Intro Area
/*----------------------------------------*/
.slide-area {
    background: rgba(0, 0, 0, 0) url(/img/slider/h1.jpg) no-repeat scroll top center / cover;
    width: 100%;
    height: 100%;
    z-index: 1;
    position: relative;
}
.slide-area::after {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: rgba(26,19,100, 0.20) none repeat scroll 0 0;
    content: "";
    z-index: -1;
}
.display-table{
	width: 100%;
	height: 100%;
	display: table;
}
.display-table-cell{
	width: 100%;
	height: 690px;
	display: table-cell;
	vertical-align: middle;
}
.slide-content {
    margin-top: 40px;
}
.slide-area .title2 {
    font-size: 46px;
    line-height: 54px;
    margin-bottom: 0px;
    color: #fff;
    padding-bottom: 20px;
    font-weight: 600;
}
.slide-content p {
    font-size: 18px;
    color: #ddd;
    max-width: 510px;
}
.ready-btn {
    border: 1px solid #f92626;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 20px;
    font-weight: 600;
    margin-top: 20px;
    padding: 12px 10px;
    text-align: center;
    text-transform: capitalize;
    transition: all 0.4s ease 0s;
    z-index: 2;
    background: #f92626;
    width: 150px;
    border-radius: 2px;
}
.ready-btn:hover {
    color:#f92626;
    background:transparent;
    transition: all 0.4s ease 0s;
    transform: translateY(-4px);
}
.slide-area .video-content {
    display: inline-block;
    margin-left: 30px;
}
.slide-content .video-play.vid-zone i {
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    height: 30px;
    width: 30px;
    line-height: 30px;
    position: relative;
    font-size: 14px;
    background: #fff;
    color: #f92626;
    margin-right: 10px;
    transition: 0.4s;
}
.slide-content .video-content a span {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    transition: 0.4s;
}
.slide-content .video-content a:hover i{
    background: #f92626;
    color: #fff;
    transition: 0.4s;
}
.slide-content .video-content a:hover span {
    color: #f92626;
    transition: 0.4s;
}
/*--------------------------------*/
/* 4.How to transmission Area
/*--------------------------------*/
.how-to-area {
    position: relative;
    padding: 100px 0px 160px;
}
.all-how{
	margin-bottom:60px;
}
.single-how {
    text-align: center;
    z-index: 1;
    overflow: hidden;
    transition: 0.4s;
    padding: 40px 30px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    background: #fff;
    position: relative;
}
.how-wel {
    padding: 20px 0px 0px;
}
.big-icon img {
    border-radius: 50%;
    background: #193864;
}
.how-content p {
    margin-bottom: 0px;
}
.how-content h4 {
    display: inline-block;
    font-size: 24px;
    margin-bottom: 0;
    padding: 0 0 10px;
    font-weight: 600;
}
.how-content h4 span {
    color: #f92626;
    font-weight: 700;
    padding-right: 10px;
}
.single-how:hover .big-icon {
    transition: 0.4s;
    color: #f92626;
}
.single-how.first-item,
.single-how.thired-item{
    position: relative;
    top: 60px;
}
.single-how::after {
    position: absolute;
    content: "";
    left: 0;
    bottom: 0px;
    width: 100%;
    height: 2px;
    background: #096cea;
}
/*--------------------------------*/
/* 5.About Area
/*--------------------------------*/
.about-area {
    position: relative;
    z-index: -2;
}
.about-content {
    display: block;
}
.about-head {
    color: #fff;
    margin-bottom: 40px;
    display: block;
    text-transform: capitalize;
    font-size: 32px;
    padding-left: 70px;
    position: relative;
    line-height: 50px;
}
.about-head::before {
    position: absolute;
    content: "\e646";
    font-family: themify;
    color: #fff;
    left: 0px;
    top: 0px;
    width: 50px;
    height: 50px;
    background: #f92626;
    text-align: center;
    font-size: 24px;
    line-height: 48px;
    border-radius: 5px;
}
.two-support .about-head::before {
    position: absolute;
    content: "\e64c";
    color: #fff;
    background: #1FC157;
}
.support-all {
    background: #1A1364;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
    padding: 50px 20px 20px 40px;
    border-radius: 4px;
}
.support-services {
    margin-bottom: 30px;
}
.support-images {
    float: left;
    font-size: 24px;
    line-height: 48px;
    text-align: center;
    transition: 0.4s;
    font-weight: 600;
    width: 50px;
    height: 50px;
    color: #fff;
    border: 1px solid #1FC157;
    background: #1FC157;
    border-radius: 50px;
}
.one-support .support-images {
    color: #fff;
    border: 1px solid #f92626;
    background: #f92626;
}
.two-support .support-images {
    color: #fff;
    border: 1px solid #1FC157;
    background: #1FC157;
}
.support-images:hover{
    color:#fff;
}
.support-content {
    padding-left: 70px;
}
.support-content h4 {
    font-size: 22px;
    text-transform: capitalize;
    font-weight: 500;
    padding-bottom: 0px;
    letter-spacing: 1px;
    line-height: 28px;
}
.support-content h4 a {
     color: #fff;
}
.support-content p {
    margin-bottom: 0px;
    color: #ddd;
}
.rotmate-image{
    position: absolute;
    top: -30px;
    z-index: -1;
    opacity:0.7;
}
.about-images{
    position: relative;
}
/*--------------------------------*/
/* 6. Symtoms Area
/*--------------------------------*/
.single-symtoms {
    text-align: center;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
    padding: 30px;
    border: 1px solid #f9f9f9;
    position: relative;
    margin-bottom: 30px;
    background: #fff;
    border-radius: 4px;
}
.main-symtoms {
    padding: 20px 0px 0px;
}
.symtoms-content h4 {
    display: inline-block;
    font-size: 24px;
    margin-bottom: 0;
    padding: 0 0 10px;
    font-weight: 400;
}
.symtoms-content p{
    margin-bottom: 0px;
}
.symtoms-img {
    margin: 0 auto 15px;
}
.symtoms-img img {
    border-radius: 50%;
}
.single-symtoms::after {
    position: absolute;
    content: "";
    left: 0;
    bottom: 0px;
    width: 100%;
    height: 2px;
    background: #e73527;
}
/*----------------------------------------*/
/* 7. Prevention area css
/*----------------------------------------*/
.pre-img {
    float: left;
    margin-right: 20px;
}
.pre-img img {
    border-radius: 50%;
}
.pre-text {
    padding-left: 100px;
    text-align: left;
    margin-top: 10px;
}
.pre-text h4 {
    line-height: 24px;
    margin-bottom: 10px;
}
.pre-text p {
    margin-bottom: 0px;
}
.single-prevention {
    padding: 30px;
    border-radius: 4px;
    margin-bottom: 30px;
    border: 1px solid #1FC157;
    overflow: hidden;
}
/*--------------------------------*/
/* 8.Feature Area
/*--------------------------------*/
.feature-area {
    position: relative;
}
.feature-text {
    margin-top: 60px;
}
.feature-images,
.feature-images img {
    border-radius: 4px;
}
.feature-text h3 {
    font-size: 36px;
    line-height: 44px;
    color:#fff;
}
.feature-btn {
    padding: 11px 20px;
    border: 1px solid #f92626;
    background: #f92626;
    color: #fff;
    transition: 0.4s;
    font-size: 15px;
    font-weight: 700;
    border-radius: 2px;
    margin-top: 10px;
    display: inline-block;
    text-transform: uppercase;
}
.feature-btn:hover{
    color:#f92626;
    background:transparent;
    transition: all 0.4s ease 0s;
    transform: translateY(-4px);
}
 .feature-text p{
    color:#ddd;
}
.feature-images {
    margin-right: 50px;
}
/*----------------------------------------*/
/*  9. Team Area css
/*----------------------------------------*/
.single-member {
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.06);
    position: relative;
    overflow: hidden;
    margin-bottom: 30px;
    background: #f3f3f3;
    padding: 10px;
    border-radius: 5px;
}
.team-hover {
    padding: 15px 0 0px;
    text-align: center;
    transition: all 0.4s ease 0s;
}
.single-member .team-img {
    display: block;
    position: relative;
}
.single-member .team-img a {
    display: block;
}
.team-content {
    position: absolute;
    top: 70%;
    content: "";
    left: 0;
    right: 0;
    transition: 0.5s;
    background: rgba(23,14,88, 0.95) none repeat scroll 0 0;
    padding: 30px 20px;
    width: 100%;
    height: 200px;
}
.team-content h4 a {
    color: #fff;
    font-weight: 700;
}
.team-content p {
    margin-bottom: 0;
    color: #fff;
}
.team-content h4 {
    font-size: 20px;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}
.team-content .social-icon{
  margin-top: 15px;
     opacity: 0;
}
.social-icon li{
    display: inline-block;
    margin: 0px 2px;
}
.social-icon li a {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 1px solid #f5f8fb;
    color: #f92626;
    border-radius: 1px;
    font-size: 18px;
    text-align: center;
    line-height: 39px;
    background: #f5f8fb;
}
.social-icon li a:hover{
    border:1px solid #f92626;
    color:#fff;
	background: #f92626;
}
.single-member .team-img::after{
    background: rgba(23,14,88, 0.95) none repeat scroll 0 0;
    width: 100%;
    height: 0%;
    position: absolute;
    content: "";
    left: 0;
    top:0;
    transition: 0.5s;
	box-shadow: 2px 2px 20px #ddd;
}
.single-member:hover .team-img::after{
    height: 100%;
}
.single-member:hover .team-content .social-icon{
     opacity: 1;
}
.single-member:hover .team-content {
    opacity: 1;
    top: 30%;
    transition: 0.5s;
    background: transparent;
}
/*----------------------------------------*/
/*  10. Blog Area
/*----------------------------------------*/
.blog-content {
    padding: 30px 20px 40px 30px;
    position: relative;
    z-index: 1;
    transition: 0.5s;
    overflow: hidden;
    border-radius: 4px;
}
.blog-content a h4 {
    font-size: 22px;
    color: #3d5368;
    line-height: 30px;
    transition: 0.4s;
}
.admin-type i, .date-type i, .comments-type i{
   color: #f92626;
    margin-right: 5px;
}
.blog-content p {
    line-height: 28px;
     transition: 0.4s;
}
.blog-content a h4:hover{
    color:#f92626;
    transition: 0.4s;
}
.blog-meta span {
    color: #6c6d6d;
    font-size: 14px;
    font-weight: 400;
    padding-right: 10px;
}
.single-blog {
    position: relative;
      box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px
}
.blog-1 .blog-meta {
    position: relative;
}
.blog-meta {
    margin-bottom: 15px;
}
.blog-btn {
    color: #fff;
    display: inline-block;
    font-size: 16px;
    font-weight: 400;
    transition: all 0.4s ease 0s;
    border: 1px solid #f92626;
    background: #f92626;
    padding: 7px 24px;
    margin-top: 10px;
    border-radius: 3px;
}
.blog-btn:hover{
    color:#f92626;
    background:transparent;
    transition: all 0.4s ease 0s;
    transform: translateY(-4px);
}
/*----------------------------------------*/
/*  11. Footer Area
/*----------------------------------------*/
.footer-1 {
    background: url(/img/background/bread.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom center;
    background-attachment: scroll;
    position: relative;
    z-index: 1;
}
.footer-1::after {
    background: rgba(23,14,88, 0.90) none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}
.footer-area{
    padding: 90px 0px;
}
.footer-logo {
    margin-bottom: 20px;
}
.footer-content.logo-footer {
    margin-right: 40px;
}
.footer-head h4 {
    color: #fff;
    font-size: 24px;
    margin-bottom: 30px;
    text-transform: capitalize;
    font-weight: 600;
}
.subs-feilds {
    margin-top: 30px;
}
.suscribe-input {
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
    width: 95%;
}
.suscribe-input input {
    color: #757b82;
    font-size: 15px;
    line-height: 24px;
    padding: 6px 15px;
    height: 52px;
    border-radius: 0;
    width: 64%;
    float: left;
    color: #fff;
    background: #170e58;
    border: 1px solid #666 !important;
}
.suscribe-input button {
    background: #f92626;
    border: none;
    color: #fff;
    font-size: 20px;
    padding: 10px 5px;
    width: 36%;
    font-weight: 600;
    height: 52px;
    border: 1px solid #f92626;
    transition: 0.4s;
}
.suscribe-input button:hover {
    color: #f92626;
    background: transparent;
    transition: 0.4s;
}
.footer-icons ul li {
    display: inline-block;
}
.footer-icons ul li a {
    color: #888;
    display: block;
    font-size: 15px;
    margin-right: 5px;
    width: 30px;
    height: 30px;
    border: 1px solid #ccc;
    text-align: center;
    line-height: 29px;
    border-radius: 2px;
}
.footer-tags li a:hover{
    color:#f92626;
}
.footer-icons ul li a:hover{
    color:#fff;
    background:#f92626;
    border: 1px solid #f92626;
    transition: 0.4s;
}
.footer-tags {
    display: block;
    overflow: hidden;
}
.footer-list {
    width: 50%;
    float: left;
}
.footer-tags li {
    float: left;
}
.footer-tags li a {
    color: #ddd;
    display: block;
    font-size: 15px;
    padding: 3px 5px;
}
.footer-icons {
    margin-top: 20px;
}
.footer-contacts p span {
    color: #f92626;
    font-weight: 700;
}
.footer-list li a {
    color: #ddd;
    padding: 10px 0px 10px 25px;
    display: block;
    position: relative;
    font-weight: 400;
}
.footer-list li a:first-child{
	padding-top: 0px;
}
.footer-list li a::after {
    position: absolute;
    content: "\e65d";
    right: auto;
    font-family: themify;
    top: 1px;
    left: 0;
    font-size: 14px;
}
.footer-list li a:hover,
.footer-list li a:hover::after{
    color: #f92626;
}
.footer-list li a:hover::after{
    color: #f92626;
}
.footer-area-bottom {
    background:#f1f1f1;
    padding: 25px 0;
}
.copyright-text a:hover{
	text-decoration: underline;
	color:#fff;
}
.copyright-text a {
    color: #f92626;
}
.copyright > p {
    margin-bottom: 0;
    color: #ddd;
}
.copyright a {
    color: #f92626;
}
.footer-head p{
    color:#ddd;
}
.footer-area-bottom {
    background: #130b4b none repeat scroll 0 0;
    padding: 25px 0;
}
/*--------------------------------*/
/* 12. Home 02 Area
/*--------------------------------*/
.header-area-2 .main-menu ul.navbar-nav li a {
    color: #151b2c;
}
 .slide-area-2 {
    background: rgba(0, 0, 0, 0) url(/img/slider/h2.jpg) no-repeat scroll top center / cover;
    width: 100%;
    height: 100%;
    z-index: 1;
    position: relative;
}
.slide-area-2::after {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background:url(/img/background/bg.png);
    background-repeat: no-repeat;
    background-position: center center;
    content: "";
    z-index: -1;
}
.slide-img {
    float: right;
    width: 400px;
    height: auto;
    margin-top: 20px;
    border-radius: 4px;
}
.slide-img img {
    border-radius: 4px;
}
.slide-area-2 .title2 {
    font-size: 52px;
    line-height: 58px;
    max-width: 554px;
    color: #151b2c;
}
.slide-area-2 .slide-content p{
    color:#444;
}
.slide-area-2 .slide-content {
    margin-top: 80px;
}
.slide-area-2 .slide-content .video-content a span{
    color: #151b2c;
}
/*----------------------------------------*/
/*  13. Wellcome Services Area
/*----------------------------------------*/
.welcome-area{
    position: relative;
    z-index: 99;
}
.top-services {
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
    padding: 30px;
    background: #fff;
    width: 100%;
    height: 100%;
    min-height: 420px;
    border-radius: 4px;
    margin-bottom: 30px;
}
.top-image {
    margin-bottom: 20px;
    width: 100px;
    height: 100px;
    display: inline-block;
}
.number-content span {
    display: block;
    font-size: 17px;
    color: #151b2c;
    font-weight: 500;
    margin-top: 8px;
}
.number-content span i {
    color: #1FC157;
    margin-right: 10px;
    font-size: 20px;
}
.pre-btn {
    padding: 11px 15px;
    border: 1px solid #f92626;
    background: #f92626;
    color: #fff;
    transition: 0.4s;
    font-size: 18px;
    font-weight: 600;
    border-radius: 2px;
    margin-top: 10px;
    display: inline-block;
    text-transform: capitalize;
    max-width: 140px;
    width: 100%;
    text-align: center;
}
.pre-btn:hover{
    color:#f92626;
    background:transparent;
    transition: all 0.4s ease 0s;
    transform: translateY(-4px);
}
.top-content p {
    font-size: 17px;
    color: #151b2c;
}
.light-about .support-all{
    background: transparent;
    box-shadow: none;
}
.light-about .about-head,
.light-about .support-content h4 a{
    color: #151b2c;
}
.light-about .support-content p{
    color:#888;
}
.feature-area-2 .feature-text h3{
    color:#151b2c;
}
.feature-area-2  .feature-text p{
    color:#888;
}
.footer-2 {
    background:#170e58;
}
/*--------------------------------*/
/* 14. Counter Area
/*--------------------------------*/
.counter-image {
    position: relative;
}
.fun_text {
    padding: 30px 10px;
    text-align: center;
    border-radius: 3px;
    margin-bottom: 30px;
    background: #fff;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
}
.counter-icon {
    margin-bottom: 20px;
    display: block;
}
.fun_text .counter {
    color: #151b2c;
    display: block;
    font-size: 30px;
    line-height: 44px;
    font-weight: 600;
}
.fun_text > h4 {
    color: #151b2c;
    font-size: 18px;
    text-transform: capitalize;
    margin-bottom: 0px;
}
.counter-image .rotmate-image {
    position: inherit;
    z-index: 2;
    opacity: 0.3;
}

/*--------------------------------*/
/* 15. Home page 03
/*--------------------------------*/
.slide-area-3 {
    background: rgba(0, 0, 0, 0) url(/img/slider/h3.jpg) no-repeat scroll top center / cover;
    width: 100%;
    height: 100%;
    z-index: 1;
    position: relative;
}
.slide-area-3::after {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: rgba(26,19,100, 0.8) none repeat scroll 0 0;
    content: "";
    z-index: -1;
}
.top-text {
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}
.color-top {
    border: 1px solid #f92626;
    padding: 2px 10px;
    border-radius: 20px;
    background: #f92626;
    color: #fff;
    margin-right: 10px;
}
.slide-area-3 .title2 {
    font-size: 64px;
    line-height: 64px;
    padding-bottom: 20px;
    margin: 0 auto;
    max-width: 770px;
}
.slide-area-3 .slide-content p {
    font-size: 18px;
    color: #ddd;
    max-width: 620px;
    margin: 0 auto 20px;
}
.how-to-area-3 .single-how {
    border-radius: 5px;
    background: #1A1364;
    margin-bottom: 30px;
}
.how-to-area-3 .how-content p {
    margin-bottom: 0px;
    color:#ddd;
}
.how-to-area-3 .how-content h4 {
    color: #fff;
}
span.new {
    float: right;
    background: #f92626;
    padding: 3px 10px;
    line-height: 20px;
    color: #fff !important;
    border-radius: 3px;
}
/*--------------------------------*/
/* 16. Product Area
/*--------------------------------*/
.product-area{
    position: relative;
}
.single-product{
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    transition: box-shadow 300ms;
    position: relative;
    margin-bottom: 30px;
}
.product-img {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.product-img a img{
 transition: all 0.3s ease 0s;
 width: 100%;
 height: 100%;
}
.sale-text {
  background: #f92626 none repeat scroll 0 0;
  color: #fff;
  left: 15px;
  padding: 2px 12px;
  position: absolute;
  top: 0;
  z-index: 99;
}
.single-product:hover .product-summary {
    bottom: 25%;
    opacity: 1;
}
.single-product:hover .product-img > a::after {
    opacity: 0.5;
}
.product-img > a{
    overflow: hidden;
    display: block;
}
.product-img > a::after {
  background: #fff none repeat scroll 0 0;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transition: all 0.3s ease 0s;
  width: 100%;
  z-index: 9;
}
.product-summary {
  left: 50%;
  margin-left: -72px;
  position: absolute;
  bottom:0;
  transition: 0.5s;
  z-index: 9;
  opacity: 0;
}
.add-action ul li {
  border-right: 1px solid #777;
  float: left;
}
.add-action ul li:last-child {
    border-right:none;
}
.add-cart {
  margin-bottom: 30px;
}
.add-cart a {
    background: #f92626 none repeat scroll 0 0;
    color: #fff;
    display: block;
    font-size: 15px;
    font-weight: bold;
    padding: 12px 21px;
    text-transform: capitalize;
    z-index: 777;
    opacity: 1;
    z-index: 111;
    width: 136px;
    margin-bottom: 15px;
    text-align: center;
    border:1px solid #f92626;
    border-radius: 3px;
}
.add-cart a:hover {
    color:#f92626;
    background:transparent;
    transition: all 0.4s ease 0s;
    transform: translateY(-4px);
}
.product-content {
    background: #1A1364;
    padding: 20px 20px;
}
.product-name h4 {
    display: block;
    font-size: 20px;
    display: block;
}
.product-name h4 a {
    color: #fff;
}
.product-name h4 a:hover{
    color: #f92626;
}
.retail {
    display: block;
    overflow: hidden;
}
.category {
    float: left;
}
.price-box {
    float: right;
}
.category span {
    font-size: 14px;
    font-weight: 500;
    color: #ddd;
}
.price-box span {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}
/*----------------------------------------*/
/*  17. Breadcumbs Area
/*----------------------------------------*/
.page-area {
    position: relative;
    z-index: 1;
}
.page-area {
    background: url(/img/background/bread.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
.page-area::after{
    position: absolute;
    content: "";
    left:0;
    top: 0;
    width:100%;
    height: 100%;
    background: rgba(23,14,88, 0.80) none repeat scroll 0 0;
    z-index: -1;
}
.breadcrumb .section-headline {
    text-align: center;
    padding-bottom: 10px;
}
.page-area .section-headline::after {
    display: none;
}
.breadcrumb {
    background-color: transparent;
    margin-bottom: 0;
    padding: 200px 0px 140px;
}
.breadcrumb h3 {
    color: #fff;
    font-size: 42px;
    font-weight: 600;
    line-height: 50px;
    position: relative;
    margin-bottom: 0px;
}
.breadcrumb .section-headline {
    text-align: center;
}
.breadcrumb ul li {
    display: inline-block;
    color: #ddd;
    padding: 0px 10px 0px 20px;
    position: relative;
    font-size: 16px;
}
.breadcrumb ul li.home-bread{
    padding-left: 0px;
}
.breadcrumb ul li.home-bread::after {
    position: absolute;
    content: "\f105";
    font-family: fontAwesome;
    right: -10px;
    top: 0;
}
.pages-blog .blog-content a h4 {
    margin-bottom: 15px;
}
/*----------------------------------------*/
/*  17. FAQ  Area
/*----------------------------------------*/
.faq-area{
    position: relative;
}
.company-faq {
    display: block;
    overflow: hidden;
}
.left-faq {
    display: block;
    overflow: hidden;
    padding-right: 40px;
}
.right-faq {
    display: block;
    overflow: hidden;
    padding-left: 40px;
}
.single-faq .number {
    color: #f92626;
    font-weight: 600;
    padding-right: 10px;
    float: left;
}
.single-faq h4 {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 10px;
}
.single-faq p {
    padding-left: 40px;
}
span.q-text {
    padding-left: 40px;
    display: inherit;
    font-size: 20px;
    font-weight: 600;
}
.single-faq {
    margin-bottom: 30px;
}
/*--------------------------------*/
/* 19. Error page area
/*--------------------------------*/
.error-easy-text {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 30px;
}
.high-text{
    font-size: 200px;
    line-height: 200px;
}
.error-bot{
    font-size: 24px;
    color: #666;
}
.error-btn {
    background: #f92626;
    border: 1px solid #f92626;
    color: #fff;
    font-size: 17px;
    padding: 12px 20px;
    transition: 0.4s;
    margin-top: 15px;
    text-transform: capitalize;
    margin-top: 30px;
    display: inline-block;
	font-weight: 600;
	border-radius: 2px;
}
.error-btn:hover{
    color:#f92626;
    background:transparent;
    transition: all 0.4s ease 0s;
    transform: translateY(-4px);
}
/*----------------------------------------*/
/*  20. Blog Sidebar Area
/*----------------------------------------*/
.blog-page-area .single-blog {
    padding: 5px;
    background: #fff;
}
.blog-page-area .blog-content{
	padding: 10px 15px 20px;
}
.blog-search-option input {
    padding: 5px 15px;
    width: 80%;
    border: none;
    height: 56px;
    background: transparent;
}
.blog-search-option {
    margin-bottom: 30px;
    display: block;
    background: #fff;
    border: 1px solid #f92626;
    border-radius: 3px;
}
.blog-search-option button {
    background: transparent;
    border: none;
}
.blog-search-option button i {
    line-height: 16px;
    font-size: 18px;
    padding: 0px 10px;
}
.blog-search-option button i:hover {
    color: #f92626;
}
.left-blog h4 {
    position: relative;
    color: #3d5368;
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 5px;
    padding: 15px 0px;
    text-transform: capitalize;
}
.left-blog h4::after {
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    width: 70px;
    height: 1px;
    background: #f92626;
}
.blog-left-content .blog-content::after{
    display: none;
}
.left-side {
    padding-right: 40px;
}
.right-side{
    padding-left: 40px;
}
.left-blog {
    overflow: hidden;
    padding-bottom: 20px;
}
.blog-category li,
.left-blog li {
    display: block;
    position: relative;
}
.left-blog ul li a {
    color: #3d5368;
    display: inline-block;
    font-size: 15px;
    padding: 7px 0px 7px 25px;
    text-transform: capitalize;
}
.blog-category ul {
    margin-top: 12px;
}
.left-blog ul li span {
    display: inline-block;
    border: 1px solid #f92626;
    width: 24px;
    height: 24px;
    text-align: center;
    border-radius: 4px;
    font-size: 13px;
    color: #fff;
    line-height: 24px;
    background: #f92626;
}
.pst-content .date-type{
	font-size: 14px;
}
.blog-category ul li:after {
    position: absolute;
    content: "\e649";
    right: 5px;
    top: 8px;
    font-family: themify;
    color: #3d5368;
    font-size: 14px;
}
.popular-tag.left-blog ul li a:before {
    display: none;
}
.recent-single-post {
    display: block;
    overflow: hidden;
    padding: 15px 0px;
}
.recent-single-post:last-child {
    border-bottom: none;
}
.post-img {
    display: inline-block;
    float: left;
    padding-right:10px;
}
.left-blog .post-img a {
    display: block;
    border:1px solid #fafafa;
}
.left-blog .post-img a img {
    border-radius: 4px;
}
.pst-content {
    padding-left: 100px;
}
.pst-content p{
	margin-bottom: 0px;
}
.pst-content p a:hover,.left-blog ul li a:hover {
    color: #f92626;
}
.blog-page-area .blog-content {
    background: #f9f9f9;
}
.pst-content p a {
    color: #3d5368;
    font-size: 15px;
}
.blog-tags {
    padding: 1px 0;
}
.recent-single-post img {
	width: 100%;
    max-width: 80px;
	height: 80px;
    object-fit: cover;
    border-radius: 2px;
}
.left-blog li:last-child {
    border-bottom: 0 ;
}
.popular-tag.left-side-tags.left-blog ul {
    padding:0px;
}
.left-tags .left-side-tags ul li {
    border-bottom: 0;
    display: inline-block;
    margin: 5px 3px;
}
.left-tags .left-side-tags ul li a {
    padding: 5px 10px;
    width: auto;
    background: #f4f5f4;
    color: #3d5368;
    border-radius: 3px;
    font-weight: 400;
    font-size: 14px;
}
.left-tags .left-side-tags ul li a:hover {
	color:#fff;
	background:#f92626;
}
.left-side-tags h4 {
    margin-bottom: 15px;
}
.blog-side-area .blog-right-column{
	margin-top: -30px;
}
.pagination {
    display: inline-block;
    padding-left: 0;
    margin: 10px 0 0px;
    border-radius: 4px;
}
.pagination>li>a,
.pagination>li>span {
    position: relative;
    float: left;
    padding: 6px 12px;
    line-height: 1.42857143;
    text-decoration: none;
    color: #3d5368;
    background-color: #f4f5f5;
    border: none;
    margin-left: -1px;
    border-radius: 2px;
}
.pagination>li {
    display: inline-block;
    margin: 0px 3px 0px 0px;
}
.pagination>.active>a,
.pagination>.active>span,
.pagination>.active>a:hover,
.pagination>.active>span:hover,
.pagination>.active>a:focus,
.pagination>.active>span:focus{
    z-index: 3;
    color: #fff;
    background-color: #f92626;
    cursor: default;
    border-radius: 2px;
}
.pagination>li>a:hover, .pagination>li>span:hover, .pagination>li>a:focus, .pagination>li>span:focus {
    z-index: 2;
    color: #fff;
    background-color: #f92626;
    border-color: #f92626;
    border-radius: 2px;
}
.adver-img {
    margin-top: 20px;
}
/*----------------------------------------*/
/*  21. Blog Details
/*----------------------------------------*/
.comments-heading h3, h3.comment-reply-title {
    border-bottom: 1px solid #ddd;
    color: #3d5368;
    font-size: 18px;
    margin: 0 0 40px;
    padding: 0 0 5px;
    text-transform: capitalize;
}
.comments-list ul li{
    margin-bottom: 25px;
}
.comments-list-img{
    float: left;
    margin-right: 15px;
	border-radius: 50%;

}
.comments-list-img img {
    border-radius: 3px;
    border: 1px solid #ddd;
}
.comments-content-wrap {
    color: #3d5368;
    font-size: 14px;
    margin: 0 0 15px 90px;
    padding: 10px;
    position: relative;
}
blockquote {
    padding: 20px 40px 40px 80px;
    margin: 0 0 20px;
    font-size: 15px;
    border-left: none;
    font-style: italic;
    position: relative;
    background: #ddd;
}
blockquote::before {
    position: absolute;
    top: 20px;
    left: 30px;
    content: "\f10d ";
    font-family: fontawesome;
    font-size: 34px;
    color: #3d5368;
}
blockquote p {
    font-size: 16px !important;
    line-height: 28px;
}
.author-avatar {
    display: inline-block;
    float: left;
    width: 10%;
}
.comments-content-wrap span b{margin-right:5px}
.comments-content-wrap span a:hover{}
span.post-time{margin-right:5px}
.comments-content-wrap p {
    color: #3d5368;
    margin-top: 10px;
}
.threaded-comments{
	margin-left:50px
}
.comment-respond {
    margin-top: 20px;
}
span.email-notes{
	color: #3d5368;
    display: block;
    font-size: 12px;
    margin-bottom: 10px;
}
.comment-respond p {
    color: #3d5368;
    margin-bottom: 5px;
}
.comment-respond input[type=text],
.comment-respond input[type=email]{
    border: 1px solid #ccc;
    border-radius: 0;
    height: 46px;
    margin-bottom: 15px;
    padding: 0 0 0 10px;
    width: 100%;
	background: transparent;
}
.comment-respond textarea#message-box{
    border: 1px solid #ccc;
    border-radius: 0;
    max-width: 100%;
    padding: 10px;
	height: 200px;
    width: 100%;
	background: transparent;
}
.comments-content-wrap span a {
    color: #f92626;
}
.comments-content-wrap span a:hover {
    color: #f92626;
}
.comment-respond .add-btn.contact-btn {
    background: #f92626;
    color: #fff;
    display: block;
    font-size: 16px;
    margin-top: 5px;
    padding: 10px 20px;
    transition: 0.4s;
    border-radius: 2px;
    width: auto !important;
    margin-top: 20px;
    border: 1px solid #f92626;
    text-transform: capitalize;
    font-weight: 600;
}
.comment-respond .add-btn.contact-btn:hover{
    color:#f92626;
    background:transparent;
    transition: all 0.4s ease 0s;
    transform: translateY(-4px);
}
.blog-page-details .left-blog-page {
    margin-top:0px;
    margin-bottom:30px;
}
.single-post-comments,
.related-post{
    margin-top: 30px;
}
.left-head-blog .pst-content p{
	margin-bottom: 5px;
}
.blog-details .blog-content h4 {
    font-size: 22px;
    line-height: 34px;
    margin-top: 10px;
}
.blog-details .blog-content h5 {
    font-size: 20px;
}
.blog-details .blog-content {
    border: 1px solid #ddd;
    padding: 30px 30px 15px;
}
.blog-details .blog-images img {
    width: 100%;
    height: 100%;
    max-height: 450px;
    object-fit: cover;
}
.blog-details .img-blog {
    margin: 30px 0px;
    width: 100%;
    height: 100%;
    max-height: 350px;
    overflow: hidden;
}
.related-post-list .recent-single-post {
    width: 50%;
    float: left;
    padding: 0px 20px 0px 0px;
}
.related-post-list .recent-single-post:last-child{
    padding: 0px 0px 0px 20px;
}
/*----------------------------------------*/
/* 22.Contact CSS
/*----------------------------------------*/
.contact-area {
    height: auto;
    width: 100%;
}
.contact-content {
    padding: 100px;
    background: #000 none repeat scroll 0 0;
}
.contact-content-right {
    padding:100px;
}
.contact-form input[type="text"], .contact-form input[type="email"] {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 1px solid #ccc;
    border-radius: 0;
    color: #3d5368;
    height: 50px;
    margin-bottom: 25px;
    padding-left: 20px;
    width: 100%;
}
.contact-form textarea#message {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 1px solid #ccc;
    border-radius: 0;
    color: #3d5368;
    height: 170px;
    padding: 20px;
    width: 100%;
}
.contact-form button[type="submit"] {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 1px solid #f92626;
    color: #fff;
    display: block;
    font-size: 18px;
    margin-top: 16px;
    padding: 13px 24px;
    border-radius: 2px;
    transition: all 0.3s ease 0s;
    background: #f92626;
}
.contact-form button[type=submit]:hover{
    color:#f92626;
    background: transparent;
    transition: all 0.4s ease 0s;
    transform: translateY(-4px);
}
.single-icon i {
    font-size: 64px;
    line-height: 77px;
    margin-bottom: 20px;
    color:#f92626;
}
.single-icon p {
    font-size: 16px;
    line-height: 30px;
    margin-bottom: 0px;
}
.contact-icon {
    margin-bottom: 50px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
    padding: 30px 30px 30px;
    position: relative;
    z-index: 1;
}
.contact-icon::after{
    position: absolute;
    content: "";
    left:0;
    top:0;
    width: 50%;
    height: 2px;
    background: #f92626;
    right: 0;
    margin: auto;
}

/*----------------------------------------*/
/*  23.	Animation  CSS
/*----------------------------------------*/
.triangle-1 {
    position: absolute;
    top: 5%;
    left:3%;
    -webkit-animation: animationFramesOne 20s infinite linear;
    animation: animationFramesOne 20s infinite linear;
    opacity: 0.5;
}
.triangle-2 {
  position: absolute;
  top: 5%;
  right: 15%;
  -webkit-animation: animationFramesOne 20s infinite linear;
          animation: animationFramesOne 20s infinite linear;
    opacity: 0.5;
}
.rotateme {
    animation-name: rotateme;
    animation-duration: 30s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.last-item{
    margin-bottom: 0px;
}
.item-bounce {
    -webkit-animation: bounce 3s infinite ease-in-out;
    animation: bounce 3s infinite ease-in-out;
}
@-webkit-keyframes bounce {
  0% {
    -webkit-transform: translateY(-5px);
            transform: translateY(-5px);
  }
  50% {
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  100% {
    -webkit-transform: translateY(-5px);
            transform: translateY(-5px);
  }
}

@keyframes bounce {
  0% {
    -webkit-transform: translateY(-5px);
            transform: translateY(-5px);
  }
  50% {
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  100% {
    -webkit-transform: translateY(-5px);
            transform: translateY(-5px);
  }
}

@-webkit-keyframes popcircle {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  99% {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
  }
  100% {
    opacity: 0;
  }
}

@keyframes popcircle {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  99% {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes rotateme {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes rotateme {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@-webkit-keyframes animationFramesOne {
  0% {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
            transform: translate(0px, 0px) rotate(0deg);
  }
  20% {
    -webkit-transform: translate(73px, -1px) rotate(36deg);
            transform: translate(73px, -1px) rotate(36deg);
  }
  40% {
    -webkit-transform: translate(141px, 72px) rotate(72deg);
            transform: translate(141px, 72px) rotate(72deg);
  }
  60% {
    -webkit-transform: translate(83px, 122px) rotate(108deg);
            transform: translate(83px, 122px) rotate(108deg);
  }
  80% {
    -webkit-transform: translate(-40px, 72px) rotate(144deg);
            transform: translate(-40px, 72px) rotate(144deg);
  }
  100% {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
            transform: translate(0px, 0px) rotate(0deg);
  }
}

@keyframes animationFramesOne {
  0% {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
            transform: translate(0px, 0px) rotate(0deg);
  }
  20% {
    -webkit-transform: translate(73px, -1px) rotate(36deg);
            transform: translate(73px, -1px) rotate(36deg);
  }
  40% {
    -webkit-transform: translate(141px, 72px) rotate(72deg);
            transform: translate(141px, 72px) rotate(72deg);
  }
  60% {
    -webkit-transform: translate(83px, 122px) rotate(108deg);
            transform: translate(83px, 122px) rotate(108deg);
  }
  80% {
    -webkit-transform: translate(-40px, 72px) rotate(144deg);
            transform: translate(-40px, 72px) rotate(144deg);
  }
  100% {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
            transform: translate(0px, 0px) rotate(0deg);
  }
}
/*--------------------------------*/
/* .End CSS
/*--------------------------------*/