/*
Author       : Themesvila
Template Name: Kirana - IT Solution Services WordPress Theme
Version      : 1.0
*/
/*=============================================================
    CSS INDEX
    =============================
    01. GENERAL STYLE (body, link color, section-title, preloader btn, overlay, section-padding etc)
    02. BOOTSTRAP main-menu OVERRIDES
    03. START HOME DESIGN
    04. START FEATURE AND ABOUT DESIGN
    05. START WHY CHOOSE US DESIGN
    06. START SERVICE DESIGN
    07. START COUNTER DESIGN
    08. START PORTFOLIO DESIGN
    09. START TEAM DESIGN
    10. START TESTIMONIAL DESIGN
    11. START PARTNER LOGO DESIGN
    12. START BLOG DESIGN
    13. START NEWSLETTER DESIGN
    14. START PRICING TABLE DESIGN
    15. START CONTACT DESIGN
    16. START MAP DESIGN
    17. START SOCIAL PROFILE DESIGN
    18. START FOOTER DESIGN
    19. START SECTION TOP  DESIGN
  =============================================================*/

/*
* ----------------------------------------------------------------------------------------
* 01.GENERAL STYLE
* ----------------------------------------------------------------------------------------
*/
body {
    background-color: #fff;
    color: #444;
    font-family: 'League Spartan', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 29px;
	overflow-x: hidden;
}
html,
body { height: 100% ;}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #1d293e;
    font-family: 'League Spartan', sans-serif;
    font-weight: 600;
	margin:0px;
}
a {
    text-decoration: none;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}
a, a:hover {
    color: #1d293e;
    text-decoration: none;
}
a:focus {
    outline: none;
    text-decoration: none;
}
p { margin-bottom: 15px; }
ul,
li {
    margin: 0;
    padding: 0;
}
fieldset {
    border: 0 none;
    margin: 0 auto;
    padding: 0;
}
/*START PRELOADER DESIGN*/

.preloader {
    background: #fff;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 99999;
}

.status-mes {
    width: 80px;
    height: 80px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -40px 0 0 -40px;
    font-size: 10px;
    text-indent: -12345px;
    border-top: 4px solid rgba(0, 0, 0, 0.08);
    border-right: 4px solid rgba(0, 0, 0, 0.08);
    border-bottom: 4px solid rgba(0, 0, 0, 0.08);
    border-left: 4px solid #0c5adb;
    border-radius: 50%;
    -webkit-animation: spinner 600ms infinite linear;
    animation: spinner 600ms infinite linear;
    z-index: 10000;
}

@-webkit-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
.no-padding { padding: 0 }
/*END PRELOADER DESIGN*/
/*START SCROLL TO TOP*/
#topcontrol {
    background: #0c5adb none repeat scroll 0 0;
    border-radius: 50%;
    bottom: 5px;
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2);
    color: #fff;
    cursor: pointer;
    font-size: 17px;
    height: 50px;
    line-height: 57px;
    opacity: 1;
    filter: alpha(opacity=100);
    padding: 0;
    position: fixed;
    right: 5px;
    -webkit-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
    width: 50px;
	text-align: center;
	z-index: 9;
}
#topcontrol:hover {
    background:#1d293e;
    color: #fff;
	transform: translate(0, -10px);
	box-shadow:0px 60px 60px rgba(0,0,0,0.1);
}
/*END SCROLL TO TOP*/
.section-padding { padding: 100px 0 }
/*START SECTION TITLE DESIGN*/
.section-title{
	margin-bottom: 60px;
}
.section-title h2 {
	font-size: 37px;
	margin-top: 4px;
	line-height: 47px;
	font-weight: 600;
}
.section-title span {
	color: #0c5adb;
	font-weight: 500;
	text-transform: capitalize;
	font-size: 20px;
	position: relative;
}



/*END SECTION TITLE DESIGN*/
/*START BTN STYLE*/
img{
	max-width: 100%;
}
.btn-light-bg {
    background: #0c5adb none repeat scroll 0 0;
    border: 2px solid #0c5adb;
    border-radius: 4px;
    box-shadow: 0 8px 25px 0 rgba(0, 0, 0, 0.1);
    color: #fff;
	padding: 7px 30px;
	display: inline-block;
	text-transform: capitalize;
	font-weight: 400;
	letter-spacing: 1px;
	-webkit-transition: all 0.2s ease 0s;
	transition: all 0.5s ease 0s;
	font-size: 14px;
}
.btn-light-bg:hover,
.btn-light-bg:focus {
    background: #047ae5;
    color: #fff;
    border: 2px solid #047ae5;
}
.btn-home-border,
.btn-home-border:hover,
.btn-home-border:focus {
	background: #0c5adb;
	border-radius: 4px;
	box-shadow: 10px 15px 18px rgba(23, 23, 36, 0.15);
	padding: 10px 33px;
	font-weight: 400;
	color: #fff;
	text-transform: capitalize;
	transition: 0.3s;
	display: inline-block;
	margin-top: 30px;
	font-size: 17px;
}

/*END BTN STYLE*/
/*SECTION OVERLAY*/
.overlay { background: rgba(0,0,0,0.6) none repeat scroll 0 0 ;}

.gray-section{
	background-color: #f7faff;
}
/*END SECTION OVERLAY*/
/*
* ----------------------------------------------------------------------------------------
* 01.END GENERAL STYLE
* ----------------------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------------------
* 02. START BOOTSTRAP main-menu OVERRIDES
* ----------------------------------------------------------------------------------------
*/
.navbar-brand {
	width: 110px !important;
	display: block;
}

.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: 20px 0;
}
#navigation.navbar-fixed {
	padding: 15px 0;
}
.header_right {
	display: flex;
	flex-basis: auto;
}
#main-menu{
	margin-top: 10px;
	text-align: right;
}
#main-menu ul{
	list-style-type: none;
}
#main-menu ul li{
	display: inline-block;
	margin-left: 12px;
	position: relative;
}
#main-menu ul li a {
	color: #fff;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.05rem;
	transition: .5s;
	font-size: 14px;
}
#navigation.navbar-fixed #main-menu ul li a{
	color: #333;
}
#navigation.navbar-fixed #main-menu li.current > a,
#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: #0c5adb;
}

.slicknav_nav_icon{
	color: #fff;
	font-size: 24px;
}
#mobile_menu{
	display: none;
}
#navigation.navbar-fixed .slicknav_btn .slicknav_nav_icon{
	color: #333;
}

/*-------------------------------
# Dropdwon menu 
--------------------------------*/

#navigation #main-menu li ul ,
#navigation #main-menu 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 #0c5adb;
}
#navigation #main-menu li  ul li{
	position: relative;
}
#navigation #main-menu li ul li ul {
	top: -13px;
	right: auto;
	left: 190px;
}
#main-menu.menu-shrink #main-menu 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 li ul li {display: block; margin: 0; padding: 0;}

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

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

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

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

}

/*
* ----------------------------------------------------------------------------------------
* 02.END BOOTSTRAP main-menu OVERRIDES
* ----------------------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------------------
* 03.START HOME DESIGN
* ----------------------------------------------------------------------------------------
*/

.welcome-slider-area{
	position: relative;
}
.welcome-area,
.welcome-slider-area,
.welcome-slider-area div {
    height: 850px;
}

.welcome-slider-area div.single-slide-item-tablecell,
.welcome-slider-area div.single-slide-item-tablecell div {
    height: auto;
}
.single-slide-item-table {
    display: table;
    text-align: center;
    width: 100%;
}

.single-slide-item-tablecell {
    display: table-cell;
    vertical-align: middle;
}

.single-slide-item {
    position: relative;
    z-index: 1;
}

.single-slide-item:after {
    position: absolute;
    background: rgba(0, 0, 0, 0.5);
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: "";
    z-index: -1;
}


.carousel-fade .carousel-inner .item {
    -webkit-transition-property: opacity;
    transition-property: opacity;
}

.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    opacity: 0;
    filter: alpha(opacity=0);
}

.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
    opacity: 1;
    filter: alpha(opacity=100);
}

.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    left: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.single-slide-item span{
	color: #fff;
	margin-bottom: 25px;
	display: block;
	font-size: 20px;
}
.single-slide-item h2 {
	color: #fff;
	font-size: 64px;
	line-height: 72px;
	font-weight: 600;
	margin-top: 0;
	margin-bottom: 22px;
}

.single-slide-item p {
	color: #fff;
	padding: 0 18%;
}

.btn-home-bg{}
.btn-home-bg {
	background: #0c5adb none repeat scroll 0 0;
	border: 2px solid #0c5adb;
	color: #fff;
	font-size: 13px;
	padding: 12px 30px;
	text-transform: uppercase;
	transition: all 0.2s ease 0s;
}
.btn-home-bg:hover,
.btn-home-bg:focus {
    background: transparent;
    color: #0c5adb;
    border: 2px solid #0c5adb;
}
.single-slide-item .btn-home-border{

}

.carousel-control-next, .carousel-control-prev {
	opacity: 1;
	font-size: 19px;
}

.carousel-control-next, 
.carousel-control-prev {
	width: 11%;
}
.carousel-control-next span,
.carousel-control-prev span{
	width: 50px;
	height: 50px;
	background-color: #fff;
	line-height: 50px;
	border-radius: 50%;
	color: #1d293e;
	font-size: 16px;
	transition: .5s;
}
.carousel-control-next span:hover,
.carousel-control-prev span:hover{
	background: #0c5adb;
	color: #fff;
}
#paralax_banner {
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  left: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  position: absolute;
  top: 0;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -o-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  width: 100%;
  z-index: 1;
}

/* START Particles JS */
.thankyou-banner{
	position: relative;
	width: 100%;
	height: 100%;
}
.thankyou-banner:after{
	position: absolute;
	content: '';
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.5);
	width: 100%;
	height: 100%;
}
.hero-text{
	background: rgba(255,255,255,0.9);
	padding:60px;
	margin-top:200px;
	position: relative;
	z-index: 1;
}
.hero-text h1 {
	color: #35ac39;
	font-size: 60px;
	font-weight: 500;
	line-height: 70px;
	margin-bottom:60px;
	position: relative;
	text-transform: capitalize;
}
.back-home{
	background:#0c5adb ;
	border: 2px solid #0c5adb ;
	border-radius: 500px;
	color: #fff;
	font-weight: 600;
	position: relative;
	margin: 15px 15px 0;
	padding: 12px 36px;
	text-transform: uppercase;
	transition: all 0.2s ease 0s;
}
.back-home:hover,
.back-home:focus {
	background: #0c5adb;
	color: #fff;
	border: 2px solid #0c5adb;
	text-decoration: none;
}

/* Animation  */

.main_banner_area{
	position: relative;
	padding: 150px 0 80px;
	z-index: 11;
}
.main_banner_area:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.5);
	z-index: -1;
}
.main_banner_area .title_blog,
.main_banner_area,
.main_banner_area a{
	color: #fff;
}
/*
* ----------------------------------------------------------------------------------------
* 03.END HOME DESIGN
* ----------------------------------------------------------------------------------------
*/


/*
* ----------------------------------------------------------------------------------------
* 04.START FEATURE AND ABOUT DESIGN
* ----------------------------------------------------------------------------------------
*/

.features.section-padding{
	padding-bottom: 70px;
}

.single_about {
	margin-bottom: 30px;
	position: relative;
	transition: all 0.5s ease-in-out 0s;
	position: relative;
	overflow: hidden;
	border-radius: 10px;
	background-color: #fff ;
	padding: 40px 30px 30px;
	box-shadow: 0 0 3px rgba(36,39,44,0.15) !important;
}


.single_about .about_icon {
	display: inline-block;
	font-size: 28px;
	text-align: center;
	text-decoration: none;
	transition: all 0.5s ease-in-out 0s;
	color:#fff;
	background: #0c5adb;
	border-radius: 50%;
	width: 80px;
	height: 80px;
	line-height: 80px;
	margin-bottom: 20px;
}

.single_about h4 {
    -webkit-transition: all 0.2s ease-in-out 0s;
    transition: all 0.2s ease-in-out 0s;
	margin-bottom: 15px;
	font-size: 20px;
	color: #444;
}
.single_about p {
    -webkit-transition: all 0.2s ease-in-out 0s;
    transition: all 0.2s ease-in-out 0s;
	color: #444;
}
.single_about:hover{
	background:#fff;
	box-shadow: 0 0 3px #0c5adb !important;
}
.single_about:hover h4,
.single_about:hover p
{
	
}

/*END FEATURE DESIGN*/

/*START ABOUT DESIGN*/
.about_us{
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: top center;
	padding-top:100px;
}
.about-content{
	margin-bottom: 30px;
	padding-right: 40px;
}
.center-block{
	float: inherit;
}
.about-content h2 {
	margin-bottom: 20px;
	line-height: 50px;
	font-size: 38px;
}
.about-content p{
	margin-bottom: 15px;
}
.about-btn.btn-light-bg{
	margin-top: 10px;
}	
.about_img {
	margin-top: -60px;
}
.about_img img{
	border-radius: 8px;
}
.about-btn {
	background: #0c5adb;
	border-radius: 4px;
	box-shadow: 10px 15px 18px rgba(23, 23, 36, 0.15);
	padding: 10px 33px;
	font-weight: 400;
	color: #fff;
	text-transform: capitalize;
	transition: 0.3s;
	display: inline-block;
	margin-top: 30px;
	font-size: 17px;
}
.about-btn:hover{
background: #0c5adb;
color:#fff;
}
/* END About DESIGN */



/*
* ----------------------------------------------------------------------------------------
* 0.START COUNTER DESIGN
* ----------------------------------------------------------------------------------------
*/
.counter_feature {
	
}
.counter_bg {

}
.counter {
	text-align: center;
	overflow: hidden;
	margin-bottom: 30px;
	padding: 40px 30px 30px;
	box-shadow: 0 0 3px rgba(36,39,44,0.15) !important;
	border-radius: 10px;
}
.counter i {
	font-size: 25px;
	width: 70px;
	height: 70px;
	line-height: 70px;
	background-color: #0c5adb;
	margin-right: 30px;
	color: #fff;
	text-align: center;
	float: left;
	border-radius: 50%;
}
.counter_content{
	text-align: left;
}
.counter h2 {
	color: #444;
	font-weight: 600;
	display: inline-block;
}
.counter span {
	color: #444;
	margin-bottom: 0;
	font-size: 16px;
	display:block;
	overflow: hidden;
}

/*
* ----------------------------------------------------------------------------------------
* 0.END COUNTER DESIGN
* ----------------------------------------------------------------------------------------
*/

/* START SKILL DESIGN */

.skill {
	padding-bottom: 100px;
}
.pt-30{
	padding-top: 30px;
}
img{
	max-width: 100%;
}
.skill .section-title{
	margin-bottom: 35px;
}
.skill_title h2{
	margin-bottom: 30px;
}
.skill-img{
	min-width: calc(50% + 50px);
	margin-right: -50px;

}
.skill-img img{
	width: 100%;
	border-radius: 10px!important;
}
.skill_area{
	box-shadow: 0px 10px 22px rgba(0,0,0,.05);
	background-color: #fff;
	padding: 40px;
	border-radius: 10px;
}

.progress-bar-text {
	color: #333;
	font-size: 19px;
	font-weight: 500;
	margin-bottom: 13px;
	text-transform: capitalize;
}
.progress-bar-text span { float: right }
.progress-bar {
    background: #f9f9f9 none repeat scroll 0 0;
    box-shadow: 0 0 0;
    height: 12px;
    position: relative;
    width: 100%;
	border-radius: 4px;
}
.progress-bar-linear{
	margin-bottom: 30px;
}
.progress-bar-linear:last-child{
	margin-bottom: 0;
}
.progress-bar > span {
    background: #0c5adb none repeat scroll 0 0;
    display: block;
    height: 100%;
    width: 0;
	border-radius: 1px;
	box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.06);
}

/*END Skill DESIGN*/
/*
* ----------------------------------------------------------------------------------------
* 04.END FEATURE AND ABOUT  DESIGN
* ----------------------------------------------------------------------------------------
*/


/*
* ----------------------------------------------------------------------------------------
* 05.START WHY CHOOSE US DESIGN
* ----------------------------------------------------------------------------------------
*/
.why_choose_us{

}
.why-title {
	color: #0c5adb;
	font-weight: 500;
	text-transform: capitalize;
	font-size: 17px;
	position: relative;
	margin-bottom: 60px;
}
.why-title h2 {
	font-size: 37px;
	margin-top: 5px;
	line-height: 47px;
	font-weight: 600;
}
.why_choose_content{
}
.feature_img{
	padding-right: 0;
}
.feature_img img{

}
.single_feature {
	margin-bottom: 30px;
}


.single_feature .feat_number i {
    color: #0c5adb;
    font-size: 45px;
	float: left;
	margin-top: 7px;
	margin-right: 25px;
	text-align: center;
	
}

.single_feature h4 {
	margin-top: 0;
	margin-bottom: 10px;
	font-size: 22px;
}

.single_feature p { margin-bottom: 0 }
.single_f_content{
	overflow: hidden;
}

/*
* ----------------------------------------------------------------------------------------
* 05.END  WHY CHOOSE US DESIGN
* ----------------------------------------------------------------------------------------
*/

/*
* ----------------------------------------------------------------------------------------
* 06.START OUR SERVICE DESIGN
* ----------------------------------------------------------------------------------------
*/

.our_service { 
	background:#f2f6fa;
	padding-bottom: 70px;
}
.single_service {
	background: transform;
	-webkit-transition: all 0.4s ease 0s;
	transition: all 0.4s ease 0s;
	position: relative;
	margin-bottom: 40px;
	padding: 40px 40px 25px;
	background: #fff;
	box-shadow: 0 2px 40px 0 rgba(0, 0, 0, 0.06);
	border-radius: 10px;
}
.single_service:hover{
	background: #232a34;
	color: #fff;
}

.single_service i.ser_icon {
	font-size: 25px;
	padding-bottom: 22px;
	-webkit-transition: all 0.2s ease 0s;
	transition: all 0.2s ease 0s;
	display: inline-block;
	width: 70px;
	height: 70px;
	line-height: 70px;
	background-color: #0c5adb;
	color: #fff;
	border-radius: 50%;
	text-align: center;
	margin-bottom: 25px;
}

.single_service:hover i.ser_icon{
	background-color: #0c5adb;
	color: #fff;
}
.single_service:hover i.ser_icon,
.single_service:hover h4{
	color: #fff;
}

.ser_content {
	overflow: hidden;
	text-align: left;
}
.single_service h4 {
    margin: 0;
    padding-bottom: 15px;
    -webkit-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
	font-size: 22px;
}

.single_service p {
    -webkit-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
}

.single_service:hover{
	
}
.single_service:hover i,
.single_service:hover h4{
	
}
.color-1{
	color: #1abc9c;
}
.color-2{
	color: #0c5adb;
}
.color-3{
	color: #3498db;
}
.color-4{
	color: #9b59b6;
}
.color-5{
	color: #e67e22;
}
.color-6{
	color: #f39c12;
}

/*
* ----------------------------------------------------------------------------------------
* 06.END OUR SERVICE DESIGN
* ----------------------------------------------------------------------------------------
*/


/*
 * ----------------------------------------------------------------------------------------
 * 07.START VIDEO DESIGN
 * ----------------------------------------------------------------------------------------
*/
.view_our_video {
position: relative;
padding:150px 0;
}
.view_our_video::before {
	background: #0c5adb;
	bottom: 0;
	content: "";
	height: 100%;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
	opacity: 0.5;
}
.our_video {
	position: relative;
	z-index: 1;
}
.our_video h1 {
	color: #fff;
	font-size: 50px;
	margin-bottom: 20px;
	text-transform: capitalize;
	font-weight: 600;
}
.our_video p {
	color: #fff;
	font-size: 19px;
	margin: auto auto 40px;
	width: 60%;
}
.mfp-iframe-holder .mfp-content {
  line-height: 0;
  margin-top: 55px;
  max-width: 900px;
  width: 100%;
}
.our_video a {
	background: rgba(255, 255, 255, 1) none repeat scroll 0 0;
	border-radius: 50%;
	color: #0c5adb;
	display: block;
	font-size: 25px;
	height: 90px;
	line-height: 100px;
	margin-bottom: auto;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	width: 90px;
	-webkit-animation: ripple-white 1s linear infinite;
    animation: ripple-blue 1s linear infinite;
    -webkit-transition: .5s;
}

@-webkit-keyframes ripple-blue {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(255,255,255, 0.3), 0 0 0 10px rgba(255,255,255, 0.3), 0 0 0 20px rgba(255,255,255, 0.3);
        box-shadow: 0 0 0 0 rgba(255,255,255, 0.3), 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255,255,255, 0.3)
    }
    100% {
        -webkit-box-shadow: 0 0 0 10px rgba(255,255,255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0);
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0)
    }
}

@keyframes ripple-blue {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(255,255,255, 0.3), 0 0 0 10px rgba(255,255,255, 0.3), 0 0 0 20px rgba(255,255,255, 0.3);
        box-shadow: 0 0 0 0 rgba(255,255,255, 0.3), 0 0 0 10px rgba(255,255,255, 0.3), 0 0 0 20px rgba(255,255,255, 0.3)
    }
    100% {
        -webkit-box-shadow: 0 0 0 10px rgba(255,255,255, 0.3), 0 0 0 20px rgba(255,255,255, 0.3), 0 0 0 30px rgba(255,255,255, 0);
        box-shadow: 0 0 0 10px rgba(255,255,255, 0.3), 0 0 0 20px rgba(255,255,255, 0.3), 0 0 0 30px rgba(255,255,255, 0)
    }
}

/*
 * ----------------------------------------------------------------------------------------
 * 07.END VIDEO DESIGN
 * ----------------------------------------------------------------------------------------
*/


/*
* ----------------------------------------------------------------------------------------
* 07.START PORTFOLIO DESIGN
* ----------------------------------------------------------------------------------------
*/
.portfolio-info{
	padding-left: 40px;
}
.our_portfolio{padding-bottom:80px;}
.mix{
	display: none;
}
.portfolio_filter ul {
	list-style: none;
	margin-bottom: 60px;
}
@media only screen and (max-width:768px) { 
.portfolio_filter ul{width:100%;}
}
.portfolio_filter ul li {
	font-weight: 500;
	text-transform: capitalize;
	display: inline-block;
	cursor: pointer;
	padding: 0px 23px;
	font-size: 17px;
	color: #252d35;
	transition: .5s;
	position: relative;
}
.portfolio_filter ul li::before {
	position: absolute;
	content: '';
	left: -6px;
	top: 7px;
	width: 13px;
	height: 13px;
	border: 1px solid #0c5adb;
	border-radius: 50%;
}
.portfolio_filter .active:before{
	background: #0c5adb;
}
@media only screen and (max-width:480px) { 
.portfolio_filter ul li{margin-bottom:10px;}
}
.portfolio_filter ul li:last-child {
	border-right: 0px;
}
.portfolio_filter .active {
	color: #0c5adb;
}
.project-info i{
	width: 40px;
	height: 40px;
	line-height: 40px;
	background-color: #0c5adb;
	color: #fff;
	border-radius: 3px;
	display: inline-block;
	text-align: center;
	margin-right: 10px;
	margin-bottom: 5px;
}
.project-info p {
	border-bottom: 1px solid #ddd;
	padding-bottom: 15px;
	margin-bottom: 18px;
}
.project-info p:last-child{
	border-bottom: inherit;
}
.single-port{
	margin-bottom: 30px;
}
.single-port h3{
	font-size: 24px;
}
.single-port .box{
	
}
.box{
    overflow: hidden;
    position: relative;
	margin-bottom:20px;
}
.box:after{
	content: "";
    width: 100%;
    height: 100%;
    background:rgba(0,0,0,0.7);
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transform: rotateX(-90deg);
    transform-origin: 50% -50% 0;
    visibility: hidden;
    transition: all 0.5s ease 0s;
}
.box:hover:after{
    transform: rotateX(0deg);
    visibility: visible;
    opacity:0.7;
}
.box img{
    width: 100%;
    height: auto;
}
.box .box-content{
    width: 100%;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 1;
    transform: translate(0%, 0%);
    transition: all 0.5s ease 0s;
}
.box:hover .box-content{
    opacity: 1;
    top: 50%;
    transform: translate(0%, -50%);
}
.box .title {
	color: #fff;
	font-size: 24px;
	font-weight: 600;
	margin-top: 0;
	text-transform: capitalize;
	margin-bottom: 20px;
}
.box .post {
	color: #fff;
	font-size: 16px;
	text-transform: capitalize;
	border: 2px solid #eee;
	margin: 0 10px;
	padding: 0px 10px;
	display: inline-block;
	cursor: pointer;
	transition: 0.3s;
}
.box .post:hover{
background:#fff;
border: 2px solid #fff;
color:#1d293e;
}
.box .port_icon{
    list-style: none;
    padding: 0;
    margin: 20px 0 0 0;
    opacity: 0;
    transition: all 0.5s ease 0.3s;
}
.box:hover .port_icon{
    opacity: 1;
}
.box .port_icon li{
    display: inline-block;
    margin-right: 5px;
    position: relative;
    transition: all 0.5s ease 0.3s;
}
.box .port_icon li:first-child{ left: -40%; }
.box .port_icon li:last-child{ right: -40%; }
.box:hover .port_icon li:first-child{ left: 0; }
.box:hover .port_icon li:last-child{ right: 0; }
.box .port_icon li a {
	width: 45px;
	height: 45px;
	line-height: 48px;
	border-radius: 4px;
	background: #fff;
	border: 1px solid #fff;
	font-size: 16px;
	color: #333;
	display: block;
	transition: all 0.5s ease 0s;
}
.box .port_icon li a:hover{
    background:#0c5adb;
    border: 1px solid #0c5adb;
    color: #fff;
}
.single-portfolio{
	border: 5px solid #222;
	border-radius: 10px;
}
.portfolio-details-content{
	padding-top: 20px;
	border-top: 1px solid #ddd;
	margin-top: 20px;
}
.portfolio-details-content h2{
	font-size: 25px;
	margin-bottom: 10px;
}
@media only screen and (max-width:990px){
    .box{ margin-bottom: 30px; }
}
/*
* ----------------------------------------------------------------------------------------
* 07..END PORTFOLIO DESIGN
* ----------------------------------------------------------------------------------------
*/

/*
 * ----------------------------------------------------------------------------------------
 * 09.START TEAM DESIGN
 * ----------------------------------------------------------------------------------------
*/

.our-team{
	overflow: hidden;
	position: relative;
}
.team-area{background:#f2f6fa;}
.single-team{
	background:#fff;
	margin-bottom:30px;
	box-shadow:0 0px 60px rgba(0, 0, 0, 0.03);
	position: relative;
	overflow: hidden;
	border-radius: 10px;
}
.single-team img{

}
.single-team h3 {
	margin-bottom: 5px;
	font-size: 24px;
	font-weight: 600;
	letter-spacing: 0px;
	margin-top: 17px;
}
.single-team p{
	margin-bottom:15px;
}

.our-team .social {
	list-style: none;
	padding: 0;
	margin: 0;
	text-align: center;
	opacity: 0;
	position: absolute;
	bottom: 200px;
	left: -80px;
	transition: all 0.5s ease 0s;
	z-index: 1;
}
.our-team:hover .social{
    opacity: 1;
	text-align: center;
	bottom: 200px;
	left: 20px;
}
.our-team .social li{
	display: block;
}
.our-team .social li a {
	display: block;
	width: 35px;
	height: 35px;
	line-height: 35px;
	font-size: 15px;
	color: #fff;
	position: relative;
	transition: all 0.3s ease-in-out 0s;
	border-radius: 30px;
	margin: 10px;
}
.our-team:hover .social li:nth-child(1) a{
    transition-delay: 0.3s;
}
.our-team:hover .social li:nth-child(2) a{
    transition-delay: 0.2s
}
.our-team:hover .social li:nth-child(3) a{
    transition-delay: 0.1s;
}
.our-team:hover .social li:nth-child(4) a{
    transition-delay: 0s;
}
.our-team:hover .social li a{
  /* transform: translate(40px, 25px);*/
}
.our-team .social li a:hover{
    transition-delay: 0s;
}
.facebook{background: #1C58A1;}
.facebook:hover{background: #fff;color:#1C58A1!important;}
.twitter{background: #0CBCE3;}
.twitter:hover{background: #fff;color:#0CBCE3!important;}
.linkedin{background: #0e76a8;}
.youtube{background: #c4302b;}
.linkedin:hover{background: #fff;color:#0e76a8!important;}

.youtube:hover{background: #fff;color:#E31B1B!important;}
.all-team-btn a {
	background: #0c5adb;
	border-radius: 4px;
	box-shadow: 10px 15px 18px rgba(23, 23, 36, 0.15);
	padding: 10px 33px;
	font-weight: 400;
	color: #fff;
	text-transform: capitalize;
	transition: 0.3s;
	display: inline-block;
	margin-top: 30px;
	font-size: 17px;
}
.all-team-btn a:hover{background: #0c5adb;}
/*
 * ----------------------------------------------------------------------------------------
 * 09.END TEAM DESIGN
 * ----------------------------------------------------------------------------------------
*/



/*
 * ----------------------------------------------------------------------------------------
 * 09.START PRICING DESIGN
 * ----------------------------------------------------------------------------------------
 */
.our_pricing {}
.pricingTable{
	background: #fff none repeat scroll 0 0;
	color: #1d293e;
	padding: 40px;
	box-shadow: 0 0 3px rgba(36,39,44,0.15) !important;
	border-radius: 10px;
	-webkit-perspective: 600px;
	perspective: 600px;
	position: relative;
	-webkit-transition: all 0.3s ease-in-out 0s;
	-o-transition: all 0.3s ease-in-out 0s;
	transition: all 0.3s ease-in-out 0s;
	z-index: 1;
}
@media only screen and (max-width:480px){
.pricingTable{ margin-bottom:60px; }
}
.pricingTable .title {
	display: block;
	font-size: 26px;
	font-weight: 600;
	text-transform: capitalize;
	-webkit-transition: all 0.3s ease-in-out 0s;
	-o-transition: all 0.3s ease-in-out 0s;
	transition: all 0.3s ease-in-out 0s;
	margin-bottom: 12px;
}
.pricingTable-title{
	border-bottom: 1px solid #eee;
	padding-bottom: 10px;	
}
.pricingTable .price-month {
	font-size: 21px;
	color: #444;
	font-weight: 500;
	margin-left: -10px;
}
.pricingTable .price-value {
	font-size: 38px;
	position: relative;
	margin: 10px 0;
	font-weight: 600;
	margin-top: 0px;
	margin-bottom: 20px;
}
.pricingTable .pricing-content {
	list-style: none;
	padding: 0;
	margin: 0 0 20px 0;
	margin-top: 30px;
}
.pricing-content-border{}
.pricing-content-border > li {
  border: 1px solid #eee;
  margin-bottom: 10px;
}
.pricingTable .pricing-content li{
    line-height: 40px;
	font-weight: 500;
}
.pricingTable .pricing-content li i {
	color: #0c5adb;
	font-size: 10px;
	margin-right: 10px;
	width: 20px;
	height: 20px;
	line-height: 20px;
	border: 1px solid #0c5adb;
	border-radius: 50%;
	display: inline-block;
	text-align: center;
}
@media only screen and (max-width: 990px){
    .pricingTable{ margin-bottom: 30px; }
}
@media only screen and (max-width: 767px){
    .pricingTable{ margin-bottom: 50px; }
}
.btn-price-bg {
	background: #0c5adb;
	border-radius: 4px;
	box-shadow: 10px 15px 18px rgba(23, 23, 36, 0.15);
	padding: 10px 33px;
	font-weight: 400;
	color: #fff;
	text-transform: capitalize;
	transition: 0.3s;
	display: inline-block;
	margin-top: 10px;
	font-size: 17px;
}
.btn-price-bg:hover,
.btn-price-bg:focus
{
	background:#0c5adb;
	border: 1px solid #0c5adb;
	color:#fff;
}
/*
 * ----------------------------------------------------------------------------------------
 * 09.END PRICING DESIGN
 * ----------------------------------------------------------------------------------------
 */
/*
 * ----------------------------------------------------------------------------------------
 * 10.START PROMO AREA DESIGN
 * ----------------------------------------------------------------------------------------
*/
.promo_area {
	padding-top: 0;
	padding-bottom: 100px;
}
.promo_area_bg {
	background: #0c5adb;
	padding: 60px;
	border-radius: 10px;
	box-shadow: 10px 15px 18px rgba(23, 23, 36, 0.15);
	transition: 0.3s;
}

.single_promo h1 {
	color: #fff;
	font-size: 34px;
	margin-bottom: 0px;
	padding-top: 10px;
	font-weight: 500;
}
.single_promo_btn {float: right;}
.single_promo_btn a {
	background: #fff;
	border-radius: 5px;
	box-shadow: 10px 15px 18px rgba(23, 23, 36, 0.15);
	padding: 15px 40px;
	font-weight: 500;
	color: #333;
	text-transform: capitalize;
	transition: 0.3s;
	display: inline-block;
}

/*
 * ----------------------------------------------------------------------------------------
 * 10.END PROMO AREA DESIGN
 * ----------------------------------------------------------------------------------------
*/

/*
* ----------------------------------------------------------------------------------------
* 11. START TESTIMONIAL DESIGN
* ----------------------------------------------------------------------------------------
*/
.testimonial-area{background:#f2f6fa;}

.single_testimonial {
	margin: 0px 15px;
	padding: 35px;
	background-color: #fff;
	border-radius: 10px;
}
.testi_img {
	overflow: hidden;
}
.testi_img div {
	width: 90px;
	height: 90px;
	border-radius: 100px;
	float: left;
	margin-right: 15px;
	background-size: cover;
}
.testi_img h3 {
	overflow: hidden;
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 10px;
	margin-top: 20px;
}
.testi_img h5 {
	overflow: hidden;
	text-transform: capitalize;
	font-size: 16px;
	font-weight: 500;
}
.single_testimonial p {
	font-weight: 500;
	font-size: 20px;
	line-height: 35px;
	margin-bottom: 25px;
}
.owl-theme .owl-controls .owl-page { display: inline-block }
.owl-controls .owl-page,
.owl-controls .owl-buttons div { cursor: pointer }
.owl-theme .owl-controls .owl-page span {
	background-color: #0c5adb !important;
	border-radius: 20px;
	display: block;
	height: 6px;
	margin: 5px 3px;
	width: 6px;
}

.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;
}
/*
* ----------------------------------------------------------------------------------------
* 11. END TESTIMONIAL DESIGN
* ----------------------------------------------------------------------------------------
*/

/*
* ----------------------------------------------------------------------------------------
* 11.START BLOG DESIGN
* ----------------------------------------------------------------------------------------
*/
.fresh-news{
}
.single_blog {
	background: #fff;
	margin-bottom: 30px;
	box-shadow: 0 0 3px rgba(36,39,44,0.15) !important;
	border-radius: 10px;
}
.blog_img { overflow: hidden; }
.blog_img img {
    display: block;
    position: relative;
    -webkit-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
}
.single_blog:hover .blog_img img {
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}
.blog_cat {
	font-weight: 600;
	text-transform: capitalize;
	margin-right: 10px;
	font-size: 16px;
	transition: 0.3s;
	margin-bottom: 10px;
	display: inline-block;
}
.blog_cat:hover{color:#0c5adb;}
.blog_content{padding:20px;}
.blog_content h3{}
.blog_content h3 a {
	color: #1d293e;
	font-size: 22px;
	margin-bottom: 10px;
	display: block;
	-webkit-transition: all 0.4s ease 0s;
	-o-transition: all 0.4s ease 0s;
	transition: all 0.4s ease 0s;
	line-height: 30px;
}
.blog_content h3 a:hover{color:#0c5adb;}
.blog_btn{
	color: #0c5adb;
}

/*
 * ----------------------------------------------------------------------------------------
 * 11.END BLOG DESIGN
 * ----------------------------------------------------------------------------------------
*/



/*
 * ----------------------------------------------------------------------------------------
 * 05.START ADDRESS AREA DESIGN
 * ----------------------------------------------------------------------------------------
*/
.address_area{
	background:#f2f6fa;
	padding-bottom: 70px;
}
.single_address {
	background: #fff;
	border-radius: 5px;
	transition: 0.3s;
	margin-bottom: 30px;
}

.single_address i {
	color: #fff;
	font-size: 25px;
	margin-bottom: 23px;
	transition: 0.3s;
	display: inline-block;
	width: 60px;
	height: 60px;
	line-height: 60px;
	background-color: #0c5adb;
	border-radius: 10px;
}

.single_address h4 {
	overflow: hidden;
	margin-bottom: 10px;
	font-weight: 500;
	transition: 0.3s;
}

.single_address p {
	overflow: hidden;
	margin-bottom: 0px;
	transition: 0.3s;
	line-height: 28px;
}

/*
 * ----------------------------------------------------------------------------------------
 * 05.END ADDRESS AREA DESIGN
 * ----------------------------------------------------------------------------------------
*/



/*
* ----------------------------------------------------------------------------------------
* 14. START CONTACT DESIGN
* ----------------------------------------------------------------------------------------
*/
.contact-area {position: relative;}

.contact {
	background: #fff;
	padding: 40px;
	position: relative;
	z-index: 1;	
	box-shadow: 0 0 3px rgba(36,39,44,0.15) !important;
	border-radius: 10px;	
	margin-top: 60px;
}
.contact .form-group{
	margin-bottom: 30px;
}
.contact h2 {
	font-size: 37px;
	margin-bottom: 15px;
}
.contact p {
	margin-bottom: 40px;
	padding-right: 40px;
}
.contact input {
	background: #f5f8fa;
	border: 1px solid #f5f8fa;
	border-radius: 4px;
	-webkit-box-shadow: none;
	box-shadow: none;
	color: #1d293e;
	font-size: 18px;
	height: 50px;
	padding: 10px 15px;
	width: 100%;
	-webkit-transition: all 0.3s ease 0s;
	-o-transition: all 0.3s ease 0s;
	transition: all 0.3s ease 0s;
}
.contact textarea {
	background:#f5f8fa;
	border: 1px solid #f5f8fa;
	border-radius: 4px;
	-webkit-box-shadow: none;
	box-shadow: none;
	color: #1d293e;
	font-size: 18px;
	padding: 10px 15px;
	width: 100%;
	-webkit-transition: all 0.3s ease 0s;
	-o-transition: all 0.3s ease 0s;
	transition: all 0.3s ease 0s;
}
.contact input:focus {
	background: #fff;
	border: 1px solid #0c5adb;
	color: #1d293e;
	-webkit-box-shadow: none;
	box-shadow: none;
	outline: 0 none;
}
.contact textarea:focus {
	background: #fff;
	border: 1px solid #0c5adb;
	color: #1d293e;
	-webkit-box-shadow: none;
	box-shadow: none;
	outline: 0 none;
}
.btn-contact-bg {
	background: #0c5adb;
	border-radius: 4px;
	box-shadow: 10px 15px 18px rgba(23, 23, 36, 0.15);
	padding: 10px 33px;
	font-weight: 400;
	color: #fff;
	text-transform: capitalize;
	transition: 0.3s;
	display: inline-block;
	margin-top: 0px;
	font-size: 17px;
}
.btn-contact-bg:hover,
.btn-contact-bg:focus {
    background: #0c5adb;
    color: #fff;
}

/*
* ----------------------------------------------------------------------------------------
* 14.END CONTACT DESIGN
* ----------------------------------------------------------------------------------------
*/
/*
 * ----------------------------------------------------------------------------------------
 * 05.START PARTNER DESIGN
 * ----------------------------------------------------------------------------------------
*/
.partner-logo {
padding-top:80px;
padding-bottom:50px;
}
.single_logo {}
.single_logo a img {
	-webkit-transition: 0.2s;
	-o-transition: 0.2s;
	transition: 0.2s;
	opacity: 0.6;
}
.single_logo a img:hover{opacity: 1;}

/*
 * ----------------------------------------------------------------------------------------
 * 05.END PARTNER DESIGN
 * ----------------------------------------------------------------------------------------
*/



/*
* ----------------------------------------------------------------------------------------
* 18.START FOOTER DESIGN
* ----------------------------------------------------------------------------------------
*/
.footer {
    background-color:#202942;
	padding: 25px 0;
}
/*STRAT NEWSLETTER FORM*/

.newsletter{
	background: #0c5adb;
	padding: 100px 0;
	color: #fff;
}
.newsletter_ptm {
	padding: 40px 0;
	border-bottom: 1px solid rgba(255,255,255,0.2);
}

.newsletter-title h2 {
	color: #fff;
	font-size: 37px;
	line-height: 47px;
	margin-bottom: 15px;
}
.newsletter-title p{
	margin-bottom: 30px;
}
.subscribe {
	display: block;
	position: relative;
	width: 100%;
}
.subscribe__input {
	background: #fff;
	border-radius: 30px;
	color: #1d293e;
	display: block;
	font-size: 16px;
	font-weight: 500;
	height: 65px;
	margin: 0;
	padding: 25px;
	width: 100%;
	border: 0px;
}
.subscribe__input:focus{
	border-color: inherit;
	box-shadow: inherit;
	outline: none;
}
@media only screen and (max-width:480px) {
.subscribe__input{font-size: 13px;}
}
.subscribe__btn {
	background-color: #0c5adb;
	border-radius: 30px;
	color: #fff;
	cursor: pointer;
	display: block;
	font-size: 16px;
	height: 45px;
	position: absolute;
	width: 122px;
	font-weight: 500;
	right: 10px;
	bottom: 10px;
	-webkit-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
}
@media only screen and (max-width:480px) {
.subscribe__btn {
	font-size: 15px;
	height: 40px;
	top: 26px;
	width: 120px;
}
}
.subscribe__btn:hover{
	color:#fff;
	background:#0c5adb;
}
button {
	padding: 0;
	border: none;
	background-color: transparent;
	border-radius: 0;
}

/*END NEWSLETTER FORM*/

.footer_logo{ }
.footer_logo a {
	display: block;
	width: 100px;
}

/*END FOOTER MENU*/

/*START FOOTER SOCIAL*/
.footer_social{ }
.footer_social ul{
	list-style: none;
	text-align: center;
	display: inline-block;
}
.footer_social ul li {display: inline-block;}
.footer_social ul li a {
	color: #fff;
	border: 1px solid #283353;
	width: 32px;
	height: 32px;
	display: block;
	line-height: 32px;
	border-radius: 4px;
	font-size: 14px;
	margin: 0 2px;
	transition: 0.3s;
}
.footer_social ul li a:hover{}
.f_facebook:hover{background:#1C58A1;border: 1px solid #1C58A1;}
.f_twitter:hover{background:#0CBCE3;border: 1px solid #0CBCE3;}
.f_linkedin:hover{background:#0072b1;border: 1px solid #0072b1;}
.f_youtube:hover{background:#E31B1B;border: 1px solid #E31B1B;}
/*END FOOTER SOCIAL*/

.copyright_text{padding-top:0px;}
.copyright_text p{
	color:#fff;
	margin-bottom: 0;
	padding-top: 6px;
}
.footer_content p a{}
.footer_content p a:hover{color:#0c5adb;}

/*
* ----------------------------------------------------------------------------------------
* 18.END FOOTER DESIGN
* ----------------------------------------------------------------------------------------
*/