/*
Author       : theme_ocean 
Template Name: Ajmain - Personal CV/Resume Template
Version      : 1.0
*/
/*=============================================================
    CSS INDEX
    =============================
    01. GENERAL STYLE (body, link color, section-title, preloader btn, overlay, section-padding etc)
    02. START BOOTSTRAP NAVIGATION OVERRIDES
    03. START HOMEPAGE CSS STYLE
    04. START ABOUT CSS STYLE
    05. START SERVICE CSS STYLE
    06. START PORTFILIO CSS STYLE
    07. START RESUME DESIGN
    08. START PRICING DESIGN
    09. START BLOG DESIGN
    10. START TESTIMONIAL DESIGN
    11. START CONTACT DESIGN
    12. START FOOTER DESIGN
    13. START SECTION TOP DESIGN
  =============================================================*/
/*
* ----------------------------------------------------------------------------------------
* 01.GENERAL STYLE
* ----------------------------------------------------------------------------------------
*/
body {
color:#747474;
font-family: 'Poppins', sans-serif;
font-size: 15px;
font-weight: 400;
line-height: 26px;
background:#fff;
overflow-x:hidden;
background-size: cover;
}


html,
body { height: 100%;position:relative;  }
h1,
h2,
h3,
h4,
h5,
h6 {
  letter-spacing: 0px;
  margin-top: 0px;
  font-family: 'Jost', sans-serif;
  color: #1b1e22;
  font-weight: 400;
}
a {
	font-family: 'Jost', sans-serif;
    text-decoration: none;
    -webkit-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}
a:hover {
    color: #fff;
    text-decoration: none;
}
a:focus {
    outline: none;
    text-decoration: none;
}

p {
  margin-bottom: 0;
}
ul,
li {
    margin: 0;
    padding: 0;
	list-style:none;
}
fieldset {
    border: 0 none;
    margin: 0 auto;
    padding: 0;
}
b, strong {
	font-weight: 600;
}
/*START PRELOADER DESIGN*/
.preloader {
	background:#fff;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 99999;	
}
.spinner {
	width: 50px;
	height: 50px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -25px 0 0 -25px;
	font-size: 10px;
	text-indent: -12345px;
	z-index: 10000;
}

.double-bounce1, .double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #6138bd;
  opacity: 0.6;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
  position: absolute;
  top: 0;
  left: 0;
  
  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
  animation: sk-bounce 2.0s infinite ease-in-out;
}

.double-bounce2 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

@-webkit-keyframes sk-bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bounce {
  0%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}
.no-padding { padding: 0 }

::-moz-placeholder { 
  color: #fff;
}

/*END PRELOADER DESIGN*/
.section-padding { padding: 80px 0 }
/*START SECTION TITLE DESIGN*/
.section-title { margin-bottom:60px }
.section-title h1 {
	text-transform: capitalize;
	font-size: 40px;
	font-weight: 600;
}
/*END SECTION TITLE DESIGN*/
/*START SCROLL TO TOP*/
.topcontrol {
background: #6138bd none repeat scroll 0 0;
border-radius: 30px;
bottom: 5px;
-webkit-box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2);
        box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2);
color: #fff;
cursor: pointer;
font-size: 22px;
height: 50px;
line-height: 47px;
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
position: fixed;
right: 5px;
text-align: center;
-webkit-transition: all 0.2s ease 0s;
-o-transition: all 0.2s ease 0s;
transition: all 0.2s ease 0s;
width: 50px;
}
@media only screen and (max-width:768px) { 
.topcontrol {display:none;}
}
.topcontrol:hover {
    background: #fff;
    color: #1b2032;
}
/*END SCROLL TO TOP*/
/*START SOCIAL PROFILE CSS*/
.social_profile {
	position: fixed;
	top:30%;
	right:0;
}
@media only screen and (max-width:480px) { 
.social_profile {top:40%;}
}
.social_profile ul{
list-style: outside none none;
margin: 0;
padding: 0;
}
.social_profile ul li{display: inline;}
.social_profile ul li a {
	text-align: center;
	border: 0px;
	text-transform: uppercase;
	-webkit-transition: all 0.3s ease 0s;
	-o-transition: all 0.3s ease 0s;
	transition: all 0.3s ease 0s;
	margin-right: 10px;
	font-size: 16px;
	color: #fff;
	display: block;
	width: 40px;
	height: 40px;
	line-height: 40px;
	border-radius: 30px;
}
@media only screen and (max-width:880px) { 
.social_profile{display:none;}
}
.social_profile ul li a:hover{
color:#fff;
}
/*END SOCIAL PROFILE CSS*/
/*
* ----------------------------------------------------------------------------------------
* 01.END GENERAL STYLE
* ----------------------------------------------------------------------------------------
*/


/*
* ----------------------------------------------------------------------------------------
* 02.START BOOTSTRAP NAVIGATION OVERRIDES
* ----------------------------------------------------------------------------------------
*/
.site-logo img {
	width: 150px;
	height: auto;
	margin-top: 16px;
}
.bg-faded {
	background-color: transparent;
	transition: all 0.5s ease 0s;
}
.navbar-fixed {
    z-index: 999;
    position: fixed;
    opacity: .98;
    width: 100%;
	padding:10px 0;
    top: 0;
    -webkit-animation: fadeInDown 800ms;
    animation: fadeInDown 800ms;
    -webkit-backface-visibility: hidden;
    border-radius: 0px;
    background: #fff;
	box-shadow: 0 0 40px rgba(0, 0, 0, 0.07);
}
#navigation {
	padding: 10px 0 0px;
	background-color: transparent;
}
#navigation.navbar-fixed {
	padding-top: 8px;
	background-color: #fff;
	border-color: #fff;
}
.header_right {
	display: flex;
	flex-basis: auto;
}
#main-menu {

}
#main-menu ul{
	list-style-type: none;
}
#main-menu ul li{
	display: inline-block;
	margin-left: 40px;
	position: relative;
}
#main-menu ul li a {
	color: #333;
	font-weight: 600;
	text-transform: capitalize;
	font-family: 'Jost', sans-serif;
	transition: .5s;
	font-size: 17px;
	padding: 24px 0 26px;
	display: block;
}

#navigation.navbar-fixed #main-menu ul li a{
	color: #333;
	padding: 22px 0 22px;
}
#navigation.navbar-fixed #main-menu ul li a:hover,
#navigation.navbar-fixed #main-menu ul li a:focus,
#main-menu ul li a:hover,
#main-menu ul li a:focus{
	color: #6138bd;
}
#main-menu ul li > a:hover,
#main-menu ul li > a:focus{

	color: #6138bd;
}
#navigation #main-menu ul li a:hover,
#navigation #main-menu ul li a:focus,
#navigation.navbar-fixed #main-menu ul li a:hover,
#navigation.navbar-fixed #main-menu ul li a:focus{
}
#navigation.navbar-fixed #main-menu ul li a:hover,
#navigation.navbar-fixed #main-menu ul li a:focus{
	color: #6138bd;
}
.slicknav_menu{padding:0;}
.slicknav_nav_icon{
	color: #6138bd;
	font-size: 24px;
}
#mobile_menu{
	display: none;
}
/* Responsive Design */
@media only screen and (max-width:1024px) { 
#main-menu ul li {
	margin-left: 30px;
}
}
/*END 1024px*/
@media only screen and (max-width: 991px){	
#main-menu ul li {
	margin-left: 9px;
}
#main-menu ul li a {
	font-size: 15px;
}
#navigation {
	padding: 10px 0 20px;
}
}
/*END 991px*/
@media only screen and (max-width: 767px){
#main-menu{
display: none;
}
#mobile_menu{
display: block;
width: 100%;
}
.slicknav_nav{
	background-color: #6138bd;
	padding: 15px;
}
#navigation #mobile_menu li a{
color: #fff;
font-weight: 400;
}
#navigation #mobile_menu li li a{

}
#navigation #mobile_menu li i{
display: none;
}
#navigation ul li ul, #navigation ul {
transition: .0;
}
#navigation.navbar-fixed #mobile_menu li a{
color: #fff;
}
.slicknav_nav a{
	padding: 5px 10px;
	transition: .5s;
}
.slicknav_nav ul ul{
	padding-left: 15px;
}
#navigation #mobile_menu li a:hover,
#navigation #mobile_menu li a:focus{

}
.slicknav_btn {
top: 24px;
background:#6138bd;
}
}
/*END 767px*/

@media only screen and (max-width: 575px){
.slicknav_btn {
margin: 0;
text-decoration: none;
position: absolute;
top: 35px;
right: 17px;
}
}
/*END 575px*/
/*-------------------------------
# Dropdwon menu 
--------------------------------*/

#navigation #main-menu ul li ul ,
#navigation #main-menu ul li ul li ul {	
	background: #fff;
	box-shadow: 0 0 10px 3px rgba(0,0,0,.05);
	left: -55px;
	list-style: outside none none;
	margin:  0;
	opacity: 0;
	padding:10px;
	position: absolute;
	text-align: left;
	top: 100%;
	transition: all 0.3s ease 0s;
	visibility: hidden;
	width: 200px;
	z-index: 999;
	border-radius: 4px;
	border-top: 2px solid #3b61dd;
}
#navigation #main-menu ul li  ul li{
	position: relative;
}
#navigation #main-menu ul li ul li ul {
	top: -11px;
	right: auto;
	left: 188px;
}
#navigation.navbar-fixed #main-menu ul li li a{
	color: #333;
} 
#navigation #main-menu li:hover > ul,
#navigation #main-menu li ul li:hover > ul{
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
	visibility: visible;
}
#navigation #main-menu ul li ul li {display: block; margin: 0; padding: 0;}

#navigation.navbar-fixed #main-menu ul li ul li a,
#navigation #main-menu ul li ul li a {
	color: #333;
	display: block;
	font-size: 14px;
	line-height: 30px;
	font-weight: 600;
	padding: 5px 12px;
	position: relative;	
	transition: all 0.3s ease 0s !important;
	visibility: inherit !important;
	opacity: inherit !important;
	text-transform: capitalize;
}

#navigation #main-menu ul li ul li a:hover,
#navigation.navbar-fixed #main-menu ul li ul li a:hover,
#navigation.navbar-fixed #main-menu ul li ul li a:focus{
	color: #fff;
	background-color: #6138bd;
	text-decoration: none;
}


@media only screen and (max-width:767px) { 
  .navbar-brand {
    padding-top: 20px;
  }
}
/*
* ----------------------------------------------------------------------------------------
* 02.END BOOTSTRAP NAVIGATION OVERRIDES
* ----------------------------------------------------------------------------------------
*/

/*
* ----------------------------------------------------------------------------------------
* 03. START HOMEPAGE CSS STYLE
* ----------------------------------------------------------------------------------------
*/
.home_bg{
height:700px;
position:relative;
background:#F7F7F8;
}
 @media only screen and (max-width:812px){
.home_bg{height:auto;}
}
.about_me_content{padding-top:250px;position:relative;}
@media only screen and (max-width:768px) { 
.about_me_content{padding-left:30px;padding-right: 20px;}
}
.name_title {
	font-size: 18px;
}
.about_me_content h1 {
	font-size: 70px;
	margin-top: 10px;
	font-weight: 700;
	color: #1b1e22;
	font-family: 'Poppins', sans-serif;
}
 @media only screen and (max-width:480px){
.about_me_content h1 {font-size: 40px;}
 }
.about_me_content span {
	text-transform: capitalize;
	font-weight: 500;
}
.basic-info {
	margin: 30px 0;
	position: relative;
}
.basic-info p {
	line-height: 32px;
}
.basic-info p span {
	margin-right: 10px;
	display: inline-block;
	color: #6138bd;
}

.profile_img{padding-top:200px;}
@media only screen and (max-width:812px){
.profile_img{padding-top:100px;text-align: center;}
}
.profile_img img {
	width: 400px;
	height: 400px!important;
	border-radius: 500px!important;
	border: 15px solid rgba(255,255,255,0.5)!important;
	box-shadow: 0 10px 40px -10px rgba(0,64,128,.1)!important;
}

.home_socials{}
.home_socials ul{}
.home_socials ul li{float:left;}
.home_socials ul li a {
	color: #1b1e22;
	margin-right: 15px;
	font-size: 20px;
	transition: 0.3s;
}
.home_socials ul li a:hover{color:#6138bd;}
/*
* ----------------------------------------------------------------------------------------
* 03. END HOMEPAGE CSS STYLE
* ----------------------------------------------------------------------------------------
*/

/*
* ----------------------------------------------------------------------------------------
* 04. START ABOUT CSS STYLE
* ----------------------------------------------------------------------------------------
*/
.about_img{}
.about_img{} 
@media only screen and (max-width:768px){
.about_img {margin-bottom:60px;}
}
.about_img img{width:100%;padding-right: 40px;}
 @media only screen and (max-width:768px){
.about_img img{padding-right:0px;}
 }
.about_info{margin-top:30px;}
.about_info h1{
margin-bottom: 20px;
font-size: 50px;
}
.about_info h4 {
	margin-bottom: 30px;
	font-weight: 500;
	font-size: 20px;
	line-height: 30px;
}
.about_info p{margin-bottom: 30px;}
.about_info a {
	color: #fff;
	background: #6138bd;
	padding: 12px 30px;
	transition: 0.3s;
	border-radius: 30px;
	font-weight: 500;
	text-transform: uppercase;
	display: inline-block;
}
.award_area{}
.award_area img {
	float: left;
	margin-right: 30px;
	width: 200px;
}
.award_area h4 {
	padding-top: 20px;
	overflow: hidden;
	font-size: 20px;
	font-weight: 500;
	line-height: 30px;
}
.award_area p{}
/*
* ----------------------------------------------------------------------------------------
* 04. END ABOUT CSS STYLE
* ----------------------------------------------------------------------------------------
*/


/*
* ----------------------------------------------------------------------------------------
* 05. START SERVICE CSS STYLE
* ----------------------------------------------------------------------------------------
*/
 @media only screen and (max-width:768px){
.service_area{padding-bottom:20px;}
}
.serviceBox {
	position: relative;
	padding: 40px;
}
.sbbr {
	border-right: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
}
 @media only screen and (max-width:768px){
.sbbr{border-right: 0px;border-left: 0px;border-bottom:0px;}
}
.sbbrnone{
border-right:0px;
}
.sblr{
	border-right: 1px solid #ddd;
	border-left: 1px solid #ddd;
}
 @media only screen and (max-width:768px){
.sblr{border-right: 0px;border-left: 0px;}
}
.service-icon span {
	color: #6138bd;
	display: inline-block;
	font-size:50px;
	margin-bottom: 25px;
	-webkit-transition: all 0.5s ease 0s;
	-o-transition: all 0.5s ease 0s;
	transition: all 0.5s ease 0s;
}
.serviceBox .title {
	font-size: 24px;
	font-weight: 600;
	margin: 0 0 15px;
	text-transform: capitalize;
}
.serviceBox .service-no{
    display: inline-block;
    float: right;
    font-size: 32px;
    color: #ddd;
    line-height: 20px;
}
.serviceBox .description{
    margin: 0;
}
@-webkit-keyframes loading{
    49%{ -webkit-transform: translateY(-100%); transform: translateY(-100%); }
    50%{
        opacity: 0;
        -webkit-transform: translateY(100%);
                transform: translateY(100%);
    }
    51%{ opacity: 1; }
}
@keyframes loading{
    49%{ -webkit-transform: translateY(-100%); transform: translateY(-100%); }
    50%{
        opacity: 0;
        -webkit-transform: translateY(100%);
                transform: translateY(100%);
    }
    51%{ opacity: 1; }
}
@media only screen and (max-width:990px){
    .serviceBox{ margin-bottom: 40px; }
}
/*
* ----------------------------------------------------------------------------------------
* 05. END SERVICE CSS STYLE
* ----------------------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------------------
* 06. START PORTFILIO PAGE DESIGN
* ----------------------------------------------------------------------------------------
*/
.portfolio_area{padding-bottom:50px;}
.image-grid{
    background-color: #fff;
    text-align: center;
	margin-bottom:30px;
    transition: all 0.3s ease 0s;
}
.image-grid:hover{ box-shadow: -5px -5px rgba(0,0,0,0.05); }
.image-grid .gallery-image{
    background: #fff;
    overflow: hidden;
    position: relative;
}
.image-grid .gallery-image a.image{ display: block; }
.image-grid .gallery-image img{
    width: 100%;
    height: auto;
    transition: all 0.5s ease 0s;
	border-radius: 10px;
}
.image-grid:hover .gallery-image img{ opacity: 0.6; }
.image-grid .light-view{
    opacity: 0;
    transform: translateX(-50%) translateY(-50%);
    position: absolute;
    left: 50%;
    top: 40%;
    transition: all 0.3s ease 0s;
}
.image-grid:hover .light-view{
    opacity: 1;
    top: 50%;
}
.image-grid .light-view a {
	color: #333;
	background-color: #fff;
	font-size: 16px;
	padding: 10px 30px;
	border-radius: 30px;
	display: block;
	transition: all 0.3s ease 0s;
}
.image-grid .light-view a:hover{
background: #6138bd; 
color: #fff; 

}
@media screen and (max-width: 990px){
    .image-grid{ margin: 0 0 30px; }
}
/*END PORTFOLIO SINGLE PAGE DESIGN*/
/*
* ----------------------------------------------------------------------------------------
* 06. END PORTFILIO PAGE DESIGN
* ----------------------------------------------------------------------------------------
*/

/*
* ----------------------------------------------------------------------------------------
* 07. START RESUME PAGE DESIGN
* ----------------------------------------------------------------------------------------
*/
/*START EDUCATION & EXPERIENCE STYLE*/
.timeline_title {
	text-transform: capitalize;
	font-size: 30px;
	font-weight: 600;
	margin-bottom: 30px;
	border-bottom: 1px solid #ddd;
	padding-bottom: 5px;
	width: 200px;
}
.mr-60{margin-bottom:60px;}
.single_timeline {
	margin-bottom: 30px;
	position: relative;
	z-index: 1;
}
.edu_info {
	float: left;
	overflow: hidden;
	margin-right: 30px;
}
.edu_info span {
	display: block;
	font-size: 14px;
	width: 150px;
}
.edu_content {
	margin-left: 15px;
	overflow: hidden;
	border-left: 1px solid #ddd;
	padding-left: 30px;
}
.edu_content h4 {
	font-weight: 600;
	font-size: 20px;
	margin-bottom: 5px;
}
.active_year {
	font-weight: 600;
	color: #1b1e22;
	font-size: 20px !important;
	margin-bottom: 10px;
}
.active_company {}
.single_timeline p {
	padding-right: 60px;
	margin-top: 10px;
}
 @media only screen and (max-width:990px){
.single_timeline p {
	padding-right:0px;
}
 }
/*END EDUCATION & EXPERIENCE STYLE*/
/*START DESIGNING AND CODING SKILLS STYLE*/
.progress-bar-text {
	font-size: 14px;
	margin-bottom: 10px;
	text-transform: capitalize;
	font-weight: 500;
}
.progress-bar-text span { float: right; }
.progress-bar {
	background: #e8e8e9;
	-webkit-box-shadow: 0 0 0;
	box-shadow: 0 0 0;
	height: 8px;
	margin: 0 0 12px;
	border-radius: 30px;
	position: relative;
	width: 100%;
}
.progress-bar > span {
    background: #6138bd none repeat scroll 0 0;
    display: block;
    height: 100%;
    width: 0;
	border-radius: 30px;
}
/*END DESIGNING AND CODING SKILLS STYLE*/
/* START KNOWLEDGE AND ABOUT ME VIDEO*/
.knowledge {
	overflow: hidden;
}
.knowledge ul {list-style:none;}
.knowledge ul li {
	background: none;
	border: 1px solid #6138bd;
	float: left;
	color: #1b1e22;
	padding: 8px 16px;
	margin-right: 10px;
	margin-bottom: 10px;
	border-radius: 5px;
	text-transform: capitalize;
	-webkit-transition: all 0.3s ease 0s;
	-o-transition: all 0.3s ease 0s;
	transition: all 0.3s ease 0s;
}
.knowledge ul li:hover{
    background: #6138bd;
	-webkit-box-shadow:0 10px 40px -10px rgba(0,64,128,.2);
	        box-shadow:0 10px 40px -10px rgba(0,64,128,.2);
	color:#fff;
	border:1px solid #6138bd;
}
.my_video {}
.my_video iframe {
	width: 100%;
	height: 250px;
	background: #fff;
	padding: 10px;
	box-shadow: 0 10px 40px -10px rgba(0,64,128,.2);
}
/* END KNOWLEDGE AND ABOUT ME VIDEO*/
/*
* ----------------------------------------------------------------------------------------
* 07. END RESUME PAGE DESIGN
* ----------------------------------------------------------------------------------------
*/

/*
* ----------------------------------------------------------------------------------------
* 08.START PRICING DESIGN
* ----------------------------------------------------------------------------------------
*/
.price_area{background:#F7F7F8;}
.single-pricing{
background:#E8E4F4;
padding:40px 20px;
border-radius:30px;
position:relative;
z-index:2;
border:1px solid #E8E4F4;
-webkit-transition: 0.3s;
transition:0.3s;
}
@media only screen and (max-width:480px) { 
.single-pricing {margin-bottom:30px;}
}
.single-pricing:hover{
z-index:100;
-webkit-transform: translate(0, -10px);
        transform: translate(0, -10px);
}
.price-head h2 {
	font-weight:600;
	margin-bottom:20px;
	text-transform: uppercase;
	font-size: 18px;
}
.price-head span {
	display: inline-block;
	background: #556df4;
	width: 6px;
	height: 6px;
	border-radius: 30px;
	margin-bottom: 20px;
	margin-top: 15px;
}
.price {
	font-weight:500;
	font-size: 70px;
	color:#6138bd;
	margin-bottom: 0px;
	font-style: normal;
}
.price sup {
	font-size: 32px;
	top: -35px;
}
.single-pricing{}
.single-pricing h5 {
	font-size: 14px;
	margin-bottom: 0px;
	text-transform: uppercase;
	font-weight: 600;
}
.single-pricing ul{
list-style: none;
padding:0;
margin-bottom: 20px;
margin-top:20px;
}

.single-pricing ul li{line-height: 35px;}
.single-pricing a {
background: #6138bd;
border: 2px solid #6138bd;
border-radius: 5000px;
color: #fff;
display: inline-block;
font-size: 16px;
overflow: hidden;
padding:10px 45px;
text-transform: capitalize;
-webkit-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}
@media only screen and (max-width:768px) {
.single-pricing a {padding:8px 25px;}
}
.single-pricing a:hover, .single-pricing a:focus{
background:#6138bd;
color:#fff;
border: 2px solid #6138bd;
}
.price_wht_btn{
background: #fff!important;
color:#1b1e22!important;	
}
/*
* ----------------------------------------------------------------------------------------
* 08.END PRICING DESIGN
* ----------------------------------------------------------------------------------------
*/

/*
* ----------------------------------------------------------------------------------------
* 09. START BLOG DESIGN
* ----------------------------------------------------------------------------------------
*/
.blog_area{}
.single_blog {
	background: none;
	border-radius: 0px 10px 10px 10px;
}
.sb_none{margin-bottom:0px;}
@media only screen and (max-width:880px) { 
.single_blog {margin-bottom:30px;}
}
.blog_content {
	padding: 30px;
	background: #fff;
	box-shadow: 0 10px 20px -10px rgba(0,64,128,.3);
	border-radius: 10px;
}
.blog-img{position: relative;}
.blog-img img{position: relative;}
@media only screen and (max-width:768px) { 
.blog-img img{width:100%;}
}
.blog-img a {
	position: absolute;
	left: 8%;
	top: 80%;
	background: #6138bd;
	padding: 6px 15px;
	border-radius: 4px;
	color: #fff;
	font-weight: 500;
	font-size: 14px;
}
@media only screen and (max-width:768px) { 
.blog-img a {
	top: 5%;
	left: 6%;
}
}
.single_blog h2 {
	line-height: 32px;
	font-size: 26px;
	margin-bottom: 15px;
}
.single_blog h2 a {
	color: #1b1e22;
	font-weight: 600;
}
.single_blog p{margin-bottom:20px;}
.single_blog h2 a:hover{color:#6138bd;}
.single_blog span {
	text-transform: capitalize;
	margin-bottom: 15px;
	display: inline-block;
	font-weight: 500;
	margin-right: 20px;
	margin-top: 12px;
}
@media screen and (max-width:480px){
.single_blog span {margin-right:15px;}
}
@media screen and (max-width:414px){
.single_blog span {
	margin-right: 5px;
	font-size: 12px;
}
}
.single_blog span a{color:#6138bd;}
.single_blog > a{margin-bottom: 30px;}
.blog_content a {
	color: #6138bd;
	font-weight: 500;
	-webkit-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
}
.blog_content a:hover{color:#6138bd;}
/*START SINGLE PAGE BLOG STYLE*/
.single_blog_area{}
.single_blog_page{}
.single_blog_page img {
}
.single_blog_page p{margin-top: 30px;}
.text-italic {
	font-style: italic;
	font-weight: 600;
	font-size: 16px;
	line-height: 26px;
}
/*END SINGLE PAGE BLOG STYLE*/
/*
* ----------------------------------------------------------------------------------------
* 09. END BLOG DESIGN
* ----------------------------------------------------------------------------------------
*/
/*
 * ----------------------------------------------------------------------------------------
 * 10.START TESTIMONIAL DESIGN
 * ----------------------------------------------------------------------------------------
*/
.testimonial {
	margin-bottom: 30px;
}
@media screen and (max-width:812px){
.testimonial {margin-bottom: 30px;}
}
.testimonial_content {
	width: 70%;
	margin: auto;
	margin-bottom: 40px;
}
.testimonial_content h3 {
	font-weight: 600;
	font-size: 20px;
	color:#1b2032;
}
.testimonial_content i {
	color: #ffbd35;
	font-size: 22px;
}
.testimonial_content p {
	overflow: hidden;
	font-size: 18px;
	line-height: 32px;
	font-family: 'Poppins', sans-serif;
}
.testi_pic_title {
	display: inline-block;
	overflow: hidden;
}
.testi_pic_title .pic {
	margin-left: 22px;
	width: 100px;
	height: 100px;
}
.testi_pic_title .pic img {
	width: 100%;
	height: auto;
	border-radius: 100px;
}
.testi_pic_title h4 {
	font-size: 20px;
	font-weight: 700;
	margin-top: 10px;
	overflow: hidden;
}
.testi_pic_title small {
	font-weight: 400;
	font-size: 14px;
	margin-top: 8px;
	display: block;
	font-family: 'Poppins', sans-serif;
}
.owl-theme .owl-controls .owl-page span{
    border: 2px solid #6138bd;
    background: #fff;
    opacity: 1;
}
.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls .owl-page:hover span{
    background: #6138bd;
}
@media only screen and (max-width: 767px){
    .testimonial{
        padding: 20px;
        text-align: center;
    }
    .testimonial .pic{
        display: block;
        position: static;
        margin: 0 auto 15px;
    }
}
.owl-theme .owl-controls .owl-page { display: inline-block }
.owl-controls .owl-page,
.owl-controls .owl-buttons div { cursor: pointer }
#testimonial-slider.owl-theme .owl-controls .owl-page span {
	background-color: #6138bd ;
	border-radius: 20px;
	display: block;
	height: 12px;
	margin: 5px 3px;
	width:12px;
}

.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls.clickable .owl-page:hover span { background-color: #fff }
.owl-theme .owl-controls {
  display: block !important;
  margin-top:10px;
  text-align: center;
}
/*
 * ----------------------------------------------------------------------------------------
 * 10.END TESTIMONIAL DESIGN
 * ----------------------------------------------------------------------------------------
*/ 
/*
* ----------------------------------------------------------------------------------------
* 11.START CONTACT DESIGN
* ----------------------------------------------------------------------------------------
*/
.contact_us {
	background: #F7F7F8;
}
.contact {margin-right:30px;}
@media only screen and (max-width:768px) { 
.contact {margin-bottom:60px;margin-right:0px;}
}
.contact h4 {font-weight: 700;font-size: 40px;}
.contact p {
margin-bottom:40px;
}
.contact input {
	background: #fff;
	border: 2px solid #fff;
	border-radius: 0px;
	-webkit-box-shadow: none;
	        box-shadow: none;
	color: #1b1e22;
	font-size: 16px;
	font-weight: 400;
	height: 70px;
	padding: 10px 10px 10px 30px;
	width: 100%;
	margin-bottom: 30px;
}
.contact textarea {
	background: #fff;
	border: 2px solid #fff;
	border-radius: 0px;
	-webkit-box-shadow: none;
	        box-shadow: none;
	color: #1b1e22;
	font-size: 16px;
	font-weight: 400;
	padding: 10px 10px 10px 30px;
	width: 100%;
	margin-bottom:30px;
}
.contact input:focus {
	background: #fff;
	border: 2px solid #6138bd;
    -webkit-box-shadow: none;
            box-shadow: none;
    outline: 0 none;
	color: #1b1e22;
	background:none;
}
.contact textarea:focus {
background: #fff;
border: 2px solid #6138bd;
    -webkit-box-shadow: none;
            box-shadow: none;
	color: #1b1e22;
	background:none;
}
.contact button {
	width: 100%;
	font-size: 16px;
}

.single_address {
	margin-bottom: 30px;
}
.single_address:last-child {
	border-bottom: 0px;
	margin-bottom: 0;
	padding-bottom: 0px;
}
@media only screen and (max-width:768px) { 
.single_address{margin-bottom: 70px;}
}
.address_br{
float:left;
}
.single_address span {
	color: #6138bd;
	font-size: 30px;
	margin-bottom: 20px;
	display: block;
	margin-right:20px;
}
.single_address h4 {
	font-weight: 600;
	font-size: 18px;
	overflow: hidden;
	
}
.single_address p{overflow: hidden;}

#contact .contact .contact_btn {
	background: #6138bd;
	padding: 14px;
	color: #fff;
	text-transform: capitalize;
	-webkit-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
}
#contact textarea{
	height: 184px;
}
.contact_btn:hover{background:#6138bd;color: #fff;}

/*
* ----------------------------------------------------------------------------------------
* 11.END CONTACT DESIGN
* ----------------------------------------------------------------------------------------
*/


/*
* ----------------------------------------------------------------------------------------
* 12.START FOOTER DESIGN
* ----------------------------------------------------------------------------------------
*/
.footer {
background:#003478;
  padding:30px 0;
}
.footer_social_profile {
  margin: 30px 0;
}
.footer_social_profile ul{
list-style: outside none none;
margin: 0;
padding: 0;
text-align: center;
}
.footer_social_profile ul li{
display: inline-block;
}
@media only screen and (max-width:480px) { 
.footer_social_profile ul li{margin:5px;}
}
.footer_social_profile ul li a {
	color: #fff;
	float: left;
	font-size: 16px;
	font-weight: 700;
	margin: 0;
	padding: 0px 10px;
	text-align: center;
	text-transform: uppercase;
	-webkit-transition: all 0.3s ease 0s;
	-o-transition: all 0.3s ease 0s;
	transition: all 0.3s ease 0s;
	width: 100%;
}
.footer_social_profile ul li a:hover{color:#fff;}
/*END FOOTER SOCIAL DESIGN*/
.copyright{
color: #fff;
text-transform: capitalize;
}
/*
* ----------------------------------------------------------------------------------------
* 12.END FOOTER DESIGN
* ----------------------------------------------------------------------------------------
*/


/*
* ----------------------------------------------------------------------------------------
* 13.START SECTION TOP DESIGN
* ----------------------------------------------------------------------------------------
*/
.section-top{
background:#f9f6ef;
position:relative;
padding:80px 0;
}
.section-top {
    padding-bottom: 100px;
    padding-top: 160px;
	position: relative;
}
.section-top-title h1 {
color: #333;
font-weight: 600;
}
/*
* ----------------------------------------------------------------------------------------
* 13.END SECTION TOP DESIGN
* ----------------------------------------------------------------------------------------
*/

    .single_blog,
	.single-pricing{
		margin-bottom: 30px;
	}

/* Add Animated Text */

 .cd-title {
  position: relative;
}

.cd-intro {
  width: 90%;
  max-width: 768px;
  text-align: center;
}

.cd-intro {
  margin: 4em auto;
}
@media only screen and (min-width: 768px) {
  .cd-intro {
    margin: 5em auto;
  }
}
@media only screen and (min-width: 1170px) {
  .cd-intro {
    margin: 6em auto;
  }
}

.cd-words-wrapper {
  display: inline-block;
  position: relative;
  text-align: left;
}
.cd-words-wrapper b {
  display: inline-block;
  position: absolute;
  white-space: nowrap;
  left: 0;
  top: 0;
}
.cd-words-wrapper b.is-visible {
  position: relative;
}
.no-js .cd-words-wrapper b {
  opacity: 0;
}
.no-js .cd-words-wrapper b.is-visible {
  opacity: 1;
}

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

xrotate-1 

-------------------------------- */
.cd-headline.rotate-1 .cd-words-wrapper {
  -webkit-perspective: 300px;
  -moz-perspective: 300px;
  perspective: 300px;
}
.cd-headline.rotate-1 b {
  opacity: 0;
  -webkit-transform-origin: 50% 100%;
  -moz-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  -o-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -webkit-transform: rotateX(180deg);
  -moz-transform: rotateX(180deg);
  -ms-transform: rotateX(180deg);
  -o-transform: rotateX(180deg);
  transform: rotateX(180deg);
}
.cd-headline.rotate-1 b.is-visible {
  opacity: 1;
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  -ms-transform: rotateX(0deg);
  -o-transform: rotateX(0deg);
  transform: rotateX(0deg);
  -webkit-animation: cd-rotate-1-in 1.2s;
  -moz-animation: cd-rotate-1-in 1.2s;
  animation: cd-rotate-1-in 1.2s;
}
.cd-headline.rotate-1 b.is-hidden {
  -webkit-transform: rotateX(180deg);
  -moz-transform: rotateX(180deg);
  -ms-transform: rotateX(180deg);
  -o-transform: rotateX(180deg);
  transform: rotateX(180deg);
  -webkit-animation: cd-rotate-1-out 1.2s;
  -moz-animation: cd-rotate-1-out 1.2s;
  animation: cd-rotate-1-out 1.2s;
}

@-webkit-keyframes cd-rotate-1-in {
  0% {
    -webkit-transform: rotateX(180deg);
    opacity: 0;
  }
  35% {
    -webkit-transform: rotateX(120deg);
    opacity: 0;
  }
  65% {
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(360deg);
    opacity: 1;
  }
}
@-moz-keyframes cd-rotate-1-in {
  0% {
    -moz-transform: rotateX(180deg);
    opacity: 0;
  }
  35% {
    -moz-transform: rotateX(120deg);
    opacity: 0;
  }
  65% {
    opacity: 0;
  }
  100% {
    -moz-transform: rotateX(360deg);
    opacity: 1;
  }
}
@keyframes cd-rotate-1-in {
  0% {
    -webkit-transform: rotateX(180deg);
    -moz-transform: rotateX(180deg);
    -ms-transform: rotateX(180deg);
    -o-transform: rotateX(180deg);
    transform: rotateX(180deg);
    opacity: 0;
  }
  35% {
    -webkit-transform: rotateX(120deg);
    -moz-transform: rotateX(120deg);
    -ms-transform: rotateX(120deg);
    -o-transform: rotateX(120deg);
    transform: rotateX(120deg);
    opacity: 0;
  }
  65% {
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(360deg);
    -moz-transform: rotateX(360deg);
    -ms-transform: rotateX(360deg);
    -o-transform: rotateX(360deg);
    transform: rotateX(360deg);
    opacity: 1;
  }
}
@-webkit-keyframes cd-rotate-1-out {
  0% {
    -webkit-transform: rotateX(0deg);
    opacity: 1;
  }
  35% {
    -webkit-transform: rotateX(-40deg);
    opacity: 1;
  }
  65% {
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(180deg);
    opacity: 0;
  }
}
@-moz-keyframes cd-rotate-1-out {
  0% {
    -moz-transform: rotateX(0deg);
    opacity: 1;
  }
  35% {
    -moz-transform: rotateX(-40deg);
    opacity: 1;
  }
  65% {
    opacity: 0;
  }
  100% {
    -moz-transform: rotateX(180deg);
    opacity: 0;
  }
}
@keyframes cd-rotate-1-out {
  0% {
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
    transform: rotateX(0deg);
    opacity: 1;
  }
  35% {
    -webkit-transform: rotateX(-40deg);
    -moz-transform: rotateX(-40deg);
    -ms-transform: rotateX(-40deg);
    -o-transform: rotateX(-40deg);
    transform: rotateX(-40deg);
    opacity: 1;
  }
  65% {
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(180deg);
    -moz-transform: rotateX(180deg);
    -ms-transform: rotateX(180deg);
    -o-transform: rotateX(180deg);
    transform: rotateX(180deg);
    opacity: 0;
  }
}
/* -------------------------------- 

xtype 

-------------------------------- */
.cd-headline.type .cd-words-wrapper {
  vertical-align: top;
  overflow: hidden;
}
.cd-headline.type .cd-words-wrapper::after {
  /* vertical bar */
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  height: 90%;
  width: 1px;
  background-color: #aebcb9;
}
.cd-headline.type .cd-words-wrapper.waiting::after {
  -webkit-animation: cd-pulse 1s infinite;
  -moz-animation: cd-pulse 1s infinite;
  animation: cd-pulse 1s infinite;
}
.cd-headline.type .cd-words-wrapper.selected {
  background-color: #aebcb9;
}
.cd-headline.type .cd-words-wrapper.selected::after {
  visibility: hidden;
}
.cd-headline.type .cd-words-wrapper.selected b {
  color: #0d0d0d;
}
.cd-headline.type b {
  visibility: hidden;
}
.cd-headline.type b.is-visible {
  visibility: visible;
}
.cd-headline.type i {
  position: absolute;
  visibility: hidden;
}
.cd-headline.type i.in {
  position: relative;
  visibility: visible;
}

@-webkit-keyframes cd-pulse {
  0% {
    -webkit-transform: translateY(-50%) scale(1);
    opacity: 1;
  }
  40% {
    -webkit-transform: translateY(-50%) scale(0.9);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(-50%) scale(0);
    opacity: 0;
  }
}
@-moz-keyframes cd-pulse {
  0% {
    -moz-transform: translateY(-50%) scale(1);
    opacity: 1;
  }
  40% {
    -moz-transform: translateY(-50%) scale(0.9);
    opacity: 0;
  }
  100% {
    -moz-transform: translateY(-50%) scale(0);
    opacity: 0;
  }
}
@keyframes cd-pulse {
  0% {
    -webkit-transform: translateY(-50%) scale(1);
    -moz-transform: translateY(-50%) scale(1);
    -ms-transform: translateY(-50%) scale(1);
    -o-transform: translateY(-50%) scale(1);
    transform: translateY(-50%) scale(1);
    opacity: 1;
  }
  40% {
    -webkit-transform: translateY(-50%) scale(0.9);
    -moz-transform: translateY(-50%) scale(0.9);
    -ms-transform: translateY(-50%) scale(0.9);
    -o-transform: translateY(-50%) scale(0.9);
    transform: translateY(-50%) scale(0.9);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(-50%) scale(0);
    -moz-transform: translateY(-50%) scale(0);
    -ms-transform: translateY(-50%) scale(0);
    -o-transform: translateY(-50%) scale(0);
    transform: translateY(-50%) scale(0);
    opacity: 0;
  }
}
/* -------------------------------- 

xrotate-2 

-------------------------------- */
.cd-headline.rotate-2 .cd-words-wrapper {
  -webkit-perspective: 300px;
  -moz-perspective: 300px;
  perspective: 300px;
}
.cd-headline.rotate-2 i, .cd-headline.rotate-2 em {
  display: inline-block;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.cd-headline.rotate-2 b {
  opacity: 0;
}
.cd-headline.rotate-2 i {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: translateZ(-20px) rotateX(90deg);
  -moz-transform: translateZ(-20px) rotateX(90deg);
  -ms-transform: translateZ(-20px) rotateX(90deg);
  -o-transform: translateZ(-20px) rotateX(90deg);
  transform: translateZ(-20px) rotateX(90deg);
  opacity: 0;
}
.is-visible .cd-headline.rotate-2 i {
  opacity: 1;
}
.cd-headline.rotate-2 i.in {
  -webkit-animation: cd-rotate-2-in 0.4s forwards;
  -moz-animation: cd-rotate-2-in 0.4s forwards;
  animation: cd-rotate-2-in 0.4s forwards;
}
.cd-headline.rotate-2 i.out {
  -webkit-animation: cd-rotate-2-out 0.4s forwards;
  -moz-animation: cd-rotate-2-out 0.4s forwards;
  animation: cd-rotate-2-out 0.4s forwards;
}
.cd-headline.rotate-2 em {
  -webkit-transform: translateZ(20px);
  -moz-transform: translateZ(20px);
  -ms-transform: translateZ(20px);
  -o-transform: translateZ(20px);
  transform: translateZ(20px);
}

.no-csstransitions .cd-headline.rotate-2 i {
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  -ms-transform: rotateX(0deg);
  -o-transform: rotateX(0deg);
  transform: rotateX(0deg);
  opacity: 0;
}
.no-csstransitions .cd-headline.rotate-2 i em {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}

.no-csstransitions .cd-headline.rotate-2 .is-visible i {
  opacity: 1;
}

@-webkit-keyframes cd-rotate-2-in {
  0% {
    opacity: 0;
    -webkit-transform: translateZ(-20px) rotateX(90deg);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateZ(-20px) rotateX(-10deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateZ(-20px) rotateX(0deg);
  }
}
@-moz-keyframes cd-rotate-2-in {
  0% {
    opacity: 0;
    -moz-transform: translateZ(-20px) rotateX(90deg);
  }
  60% {
    opacity: 1;
    -moz-transform: translateZ(-20px) rotateX(-10deg);
  }
  100% {
    opacity: 1;
    -moz-transform: translateZ(-20px) rotateX(0deg);
  }
}
@keyframes cd-rotate-2-in {
  0% {
    opacity: 0;
    -webkit-transform: translateZ(-20px) rotateX(90deg);
    -moz-transform: translateZ(-20px) rotateX(90deg);
    -ms-transform: translateZ(-20px) rotateX(90deg);
    -o-transform: translateZ(-20px) rotateX(90deg);
    transform: translateZ(-20px) rotateX(90deg);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateZ(-20px) rotateX(-10deg);
    -moz-transform: translateZ(-20px) rotateX(-10deg);
    -ms-transform: translateZ(-20px) rotateX(-10deg);
    -o-transform: translateZ(-20px) rotateX(-10deg);
    transform: translateZ(-20px) rotateX(-10deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateZ(-20px) rotateX(0deg);
    -moz-transform: translateZ(-20px) rotateX(0deg);
    -ms-transform: translateZ(-20px) rotateX(0deg);
    -o-transform: translateZ(-20px) rotateX(0deg);
    transform: translateZ(-20px) rotateX(0deg);
  }
}
@-webkit-keyframes cd-rotate-2-out {
  0% {
    opacity: 1;
    -webkit-transform: translateZ(-20px) rotateX(0);
  }
  60% {
    opacity: 0;
    -webkit-transform: translateZ(-20px) rotateX(-100deg);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateZ(-20px) rotateX(-90deg);
  }
}
@-moz-keyframes cd-rotate-2-out {
  0% {
    opacity: 1;
    -moz-transform: translateZ(-20px) rotateX(0);
  }
  60% {
    opacity: 0;
    -moz-transform: translateZ(-20px) rotateX(-100deg);
  }
  100% {
    opacity: 0;
    -moz-transform: translateZ(-20px) rotateX(-90deg);
  }
}
@keyframes cd-rotate-2-out {
  0% {
    opacity: 1;
    -webkit-transform: translateZ(-20px) rotateX(0);
    -moz-transform: translateZ(-20px) rotateX(0);
    -ms-transform: translateZ(-20px) rotateX(0);
    -o-transform: translateZ(-20px) rotateX(0);
    transform: translateZ(-20px) rotateX(0);
  }
  60% {
    opacity: 0;
    -webkit-transform: translateZ(-20px) rotateX(-100deg);
    -moz-transform: translateZ(-20px) rotateX(-100deg);
    -ms-transform: translateZ(-20px) rotateX(-100deg);
    -o-transform: translateZ(-20px) rotateX(-100deg);
    transform: translateZ(-20px) rotateX(-100deg);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateZ(-20px) rotateX(-90deg);
    -moz-transform: translateZ(-20px) rotateX(-90deg);
    -ms-transform: translateZ(-20px) rotateX(-90deg);
    -o-transform: translateZ(-20px) rotateX(-90deg);
    transform: translateZ(-20px) rotateX(-90deg);
  }
}
/* -------------------------------- 

xloading-bar 

-------------------------------- */
.cd-headline.loading-bar span {
  display: inline-block;
  padding: .2em 0;
}
.cd-headline.loading-bar .cd-words-wrapper {
  overflow: hidden;
  vertical-align: top;
}
.cd-headline.loading-bar .cd-words-wrapper::after {
  /* loading bar */
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: #0096a7;
  z-index: 2;
  -webkit-transition: width 0.3s -0.1s;
  -moz-transition: width 0.3s -0.1s;
  transition: width 0.3s -0.1s;
}
.cd-headline.loading-bar .cd-words-wrapper.is-loading::after {
  width: 100%;
  -webkit-transition: width 3s;
  -moz-transition: width 3s;
  transition: width 3s;
}
.cd-headline.loading-bar b {
  top: .2em;
  opacity: 0;
  -webkit-transition: opacity 0.3s;
  -moz-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
.cd-headline.loading-bar b.is-visible {
  opacity: 1;
  top: 0;
}

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

xslide 

-------------------------------- */
.cd-headline.slide span {
  display: inline-block;
  padding: .2em 0;
}
.cd-headline.slide .cd-words-wrapper {
  overflow: hidden;
  vertical-align: top;
}
.cd-headline.slide b {
  opacity: 0;
  top: .2em;
}
.cd-headline.slide b.is-visible {
  top: 0;
  opacity: 1;
  -webkit-animation: slide-in 0.6s;
  -moz-animation: slide-in 0.6s;
  animation: slide-in 0.6s;
}
.cd-headline.slide b.is-hidden {
  -webkit-animation: slide-out 0.6s;
  -moz-animation: slide-out 0.6s;
  animation: slide-out 0.6s;
}

@-webkit-keyframes slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateY(20%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}
@-moz-keyframes slide-in {
  0% {
    opacity: 0;
    -moz-transform: translateY(-100%);
  }
  60% {
    opacity: 1;
    -moz-transform: translateY(20%);
  }
  100% {
    opacity: 1;
    -moz-transform: translateY(0);
  }
}
@keyframes slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateY(20%);
    -moz-transform: translateY(20%);
    -ms-transform: translateY(20%);
    -o-transform: translateY(20%);
    transform: translateY(20%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
}
@-webkit-keyframes slide-out {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
  60% {
    opacity: 0;
    -webkit-transform: translateY(120%);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(100%);
  }
}
@-moz-keyframes slide-out {
  0% {
    opacity: 1;
    -moz-transform: translateY(0);
  }
  60% {
    opacity: 0;
    -moz-transform: translateY(120%);
  }
  100% {
    opacity: 0;
    -moz-transform: translateY(100%);
  }
}
@keyframes slide-out {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
  60% {
    opacity: 0;
    -webkit-transform: translateY(120%);
    -moz-transform: translateY(120%);
    -ms-transform: translateY(120%);
    -o-transform: translateY(120%);
    transform: translateY(120%);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -o-transform: translateY(100%);
    transform: translateY(100%);
  }
}
/* -------------------------------- 

xclip 

-------------------------------- */
.cd-headline.clip span {
  display: inline-block;
  padding: .2em 0;
}
.cd-headline.clip .cd-words-wrapper {
  overflow: hidden;
  vertical-align: top;
}
.cd-headline.clip .cd-words-wrapper::after {
  /* line */
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 2px;
  height: 100%;
  background-color: #aebcb9;
}
.cd-headline.clip b {
  opacity: 0;
}
.cd-headline.clip b.is-visible {
  opacity: 1;
}

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

xzoom 

-------------------------------- */
.cd-headline.zoom .cd-words-wrapper {
  -webkit-perspective: 300px;
  -moz-perspective: 300px;
  perspective: 300px;
}
.cd-headline.zoom b {
  opacity: 0;
}
.cd-headline.zoom b.is-visible {
  opacity: 1;
  -webkit-animation: zoom-in 0.8s;
  -moz-animation: zoom-in 0.8s;
  animation: zoom-in 0.8s;
}
.cd-headline.zoom b.is-hidden {
  -webkit-animation: zoom-out 0.8s;
  -moz-animation: zoom-out 0.8s;
  animation: zoom-out 0.8s;
}

@-webkit-keyframes zoom-in {
  0% {
    opacity: 0;
    -webkit-transform: translateZ(100px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateZ(0);
  }
}
@-moz-keyframes zoom-in {
  0% {
    opacity: 0;
    -moz-transform: translateZ(100px);
  }
  100% {
    opacity: 1;
    -moz-transform: translateZ(0);
  }
}
@keyframes zoom-in {
  0% {
    opacity: 0;
    -webkit-transform: translateZ(100px);
    -moz-transform: translateZ(100px);
    -ms-transform: translateZ(100px);
    -o-transform: translateZ(100px);
    transform: translateZ(100px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@-webkit-keyframes zoom-out {
  0% {
    opacity: 1;
    -webkit-transform: translateZ(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateZ(-100px);
  }
}
@-moz-keyframes zoom-out {
  0% {
    opacity: 1;
    -moz-transform: translateZ(0);
  }
  100% {
    opacity: 0;
    -moz-transform: translateZ(-100px);
  }
}
@keyframes zoom-out {
  0% {
    opacity: 1;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateZ(-100px);
    -moz-transform: translateZ(-100px);
    -ms-transform: translateZ(-100px);
    -o-transform: translateZ(-100px);
    transform: translateZ(-100px);
  }
}
/* -------------------------------- 

xrotate-3 

-------------------------------- */
.cd-headline.rotate-3 .cd-words-wrapper {
  -webkit-perspective: 300px;
  -moz-perspective: 300px;
  perspective: 300px;
}
.cd-headline.rotate-3 b {
  opacity: 0;
}
.cd-headline.rotate-3 i {
  display: inline-block;
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.is-visible .cd-headline.rotate-3 i {
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  transform: rotateY(0deg);
}
.cd-headline.rotate-3 i.in {
  -webkit-animation: cd-rotate-3-in 0.6s forwards;
  -moz-animation: cd-rotate-3-in 0.6s forwards;
  animation: cd-rotate-3-in 0.6s forwards;
}
.cd-headline.rotate-3 i.out {
  -webkit-animation: cd-rotate-3-out 0.6s forwards;
  -moz-animation: cd-rotate-3-out 0.6s forwards;
  animation: cd-rotate-3-out 0.6s forwards;
}

.no-csstransitions .cd-headline.rotate-3 i {
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  transform: rotateY(0deg);
  opacity: 0;
}

.no-csstransitions .cd-headline.rotate-3 .is-visible i {
  opacity: 1;
}

@-webkit-keyframes cd-rotate-3-in {
  0% {
    -webkit-transform: rotateY(180deg);
  }
  100% {
    -webkit-transform: rotateY(0deg);
  }
}
@-moz-keyframes cd-rotate-3-in {
  0% {
    -moz-transform: rotateY(180deg);
  }
  100% {
    -moz-transform: rotateY(0deg);
  }
}
@keyframes cd-rotate-3-in {
  0% {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  100% {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
}
@-webkit-keyframes cd-rotate-3-out {
  0% {
    -webkit-transform: rotateY(0);
  }
  100% {
    -webkit-transform: rotateY(-180deg);
  }
}
@-moz-keyframes cd-rotate-3-out {
  0% {
    -moz-transform: rotateY(0);
  }
  100% {
    -moz-transform: rotateY(-180deg);
  }
}
@keyframes cd-rotate-3-out {
  0% {
    -webkit-transform: rotateY(0);
    -moz-transform: rotateY(0);
    -ms-transform: rotateY(0);
    -o-transform: rotateY(0);
    transform: rotateY(0);
  }
  100% {
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
  }
}
/* -------------------------------- 

xscale 

-------------------------------- */
.cd-headline.scale b {
  opacity: 0;
}
.cd-headline.scale i {
  display: inline-block;
  opacity: 0;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
}
.is-visible .cd-headline.scale i {
  opacity: 1;
}
.cd-headline.scale i.in {
  -webkit-animation: scale-up 0.6s forwards;
  -moz-animation: scale-up 0.6s forwards;
  animation: scale-up 0.6s forwards;
}
.cd-headline.scale i.out {
  -webkit-animation: scale-down 0.6s forwards;
  -moz-animation: scale-down 0.6s forwards;
  animation: scale-down 0.6s forwards;
}

.no-csstransitions .cd-headline.scale i {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  opacity: 0;
}

.no-csstransitions .cd-headline.scale .is-visible i {
  opacity: 1;
}

@-webkit-keyframes scale-up {
  0% {
    -webkit-transform: scale(0);
    opacity: 0;
  }
  60% {
    -webkit-transform: scale(1.2);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    opacity: 1;
  }
}
@-moz-keyframes scale-up {
  0% {
    -moz-transform: scale(0);
    opacity: 0;
  }
  60% {
    -moz-transform: scale(1.2);
    opacity: 1;
  }
  100% {
    -moz-transform: scale(1);
    opacity: 1;
  }
}
@keyframes scale-up {
  0% {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    opacity: 0;
  }
  60% {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@-webkit-keyframes scale-down {
  0% {
    -webkit-transform: scale(1);
    opacity: 1;
  }
  60% {
    -webkit-transform: scale(0);
    opacity: 0;
  }
}
@-moz-keyframes scale-down {
  0% {
    -moz-transform: scale(1);
    opacity: 1;
  }
  60% {
    -moz-transform: scale(0);
    opacity: 0;
  }
}
@keyframes scale-down {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  60% {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    opacity: 0;
  }
}
/* -------------------------------- 

xpush 

-------------------------------- */
.cd-headline.push b {
  opacity: 0;
}
.cd-headline.push b.is-visible {
  opacity: 1;
  -webkit-animation: push-in 0.6s;
  -moz-animation: push-in 0.6s;
  animation: push-in 0.6s;
}
.cd-headline.push b.is-hidden {
  -webkit-animation: push-out 0.6s;
  -moz-animation: push-out 0.6s;
  animation: push-out 0.6s;
}

@-webkit-keyframes push-in {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateX(10%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
}
@-moz-keyframes push-in {
  0% {
    opacity: 0;
    -moz-transform: translateX(-100%);
  }
  60% {
    opacity: 1;
    -moz-transform: translateX(10%);
  }
  100% {
    opacity: 1;
    -moz-transform: translateX(0);
  }
}
@keyframes push-in {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateX(10%);
    -moz-transform: translateX(10%);
    -ms-transform: translateX(10%);
    -o-transform: translateX(10%);
    transform: translateX(10%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }
}
@-webkit-keyframes push-out {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
  60% {
    opacity: 0;
    -webkit-transform: translateX(110%);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(100%);
  }
}
@-moz-keyframes push-out {
  0% {
    opacity: 1;
    -moz-transform: translateX(0);
  }
  60% {
    opacity: 0;
    -moz-transform: translateX(110%);
  }
  100% {
    opacity: 0;
    -moz-transform: translateX(100%);
  }
}
@keyframes push-out {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }
  60% {
    opacity: 0;
    -webkit-transform: translateX(110%);
    -moz-transform: translateX(110%);
    -ms-transform: translateX(110%);
    -o-transform: translateX(110%);
    transform: translateX(110%);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
  }
}