/*
  Theme Name: Sapona - One Page Responsive Corporate Template
  Theme URL: http://themewar.com/html/saponaLanding
  Author: ThemeWar
  Author URI: http://themewar.com
  Description: One Page Responsive Corporate Template
  Version: 1.0.0
*/

/*=======================================================================
[Table of contents]
=========================================================================
1. Home One
    i. Top Header
    ii. Header
    iii. Main Menu
    iv. Slider
    v. Features
    vi. Service Icons
    vii. Portfolio
    vii. Information
    ix. Pricing Section
    x. Workers section
    xi. Promo section
    xii. About us section
    xiii. Video Section
    xiv. Testimonial Section
    xv. History Section
    xvi. Contact Section
    xvii. Footer
2. Blog Page
3. Home Two
4. Home three

==========================================================================*/

/*=======================================================================
// Top Header
=========================================================================*/
.topHeader{
    width: 100%;
    position: relative;
    min-height: 70px;
    border-bottom: 1px solid #e7e7e7;
	 
}
.headerConnect{
    width: 100%;
    text-align: left;
    position: relative;
}
.headerConnect a{
    color: #979797;
    display: inline-block;
    line-height: 0.7;
    margin-right: 27px;
    margin-top: 13px;
}
.headerConnect a.fac:hover{
    color: #3B5998;
}
.headerConnect a.twi:hover{
    color: #28A9E2;
}
.headerConnect a.ins:hover{
    color: #D4C3B1;
}
.headerConnect a.goo:hover{
    color: #DC4A38;
}
.headerConnect a.rss:hover{
    color: #FF9900;
}
.headerConnect span{
    font-size: 20px;
    line-height: 11px;
    display: inline-block;
}
.headerConnect span i{
    margin-right: 10px;
}

.topControll{
    width: 100%;
    text-align: right;
}
.topControll ul{
    list-style: none;
    margin: 0;
    padding: 0;
    float: right;
}
.topControll ul li{
    float: left;
    padding-left: 15px;
    margin-left: 10px;
    line-height: 11px;
    padding-top: 14px;
    position: relative;
}
.topControll ul li a{
    color: #979797;
    font-size: 13px;
    position: relative;
    text-transform: capitalize;
    display: inline-block;
    line-height: 11px;
}
.topControll ul li a:hover, .topControll ul li a.active, .topControll ul li:hover a{
    color: #b5967f;
}
.topControll ul li.language{
    line-height: 10px;
    padding-bottom: 15px;
}
.topControll ul li.language > a{
    padding-right: 13px;
}
.topControll ul li.language > a:after{
    border-color: #979797 transparent transparent;
    border-style: solid;
    border-width: 4px 3.5px 0;
    bottom: 0;
    content: "";
    height: 0;
    margin: auto 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 0;
    transition: all ease 700ms;
    -moz-transition: all ease 700ms;
    -webkit-transition: all ease 700ms;
    -ms-transition: all ease 700ms;
    -o-transition: all ease 700ms;
}
.topControll ul li.language > a:hover:after, .topControll ul li.language > a.active:after{
    border-color: #b5967f transparent transparent;
}
.topControll ul li.language ul{
    width: 90px;
    position: absolute;
    left: 0px;
    top: 40px;
    background: #FFF;
    z-index: 9;
    display: none;
}
.topControll ul li.language ul li{
    line-height: 11px;
    list-style: outside none none;
    margin: 0;
    padding: 0 10px;
    width: 100%;
}
.topControll ul li.language ul li a{
    border-bottom: 1px solid #e7e7e7;
    color: #979797;
    display: inline-block;
    font-size: 13px;
    line-height: 11px;
    padding: 10px 0;
    text-transform: capitalize;
    width: 100%;
    text-align: left;
    padding-left: 7px;
}
.topControll ul li.language ul li:last-child a{
    border-bottom: none;
}
.topControll ul li.language ul li:hover a{
    color: #b5967f;
}
.searchDiv{
    background: #f4f4f4 none repeat scroll 0 0;
    height: 40px;
    position: absolute;
    right: 100%;
    top: 0;
    width: 0;
}
.searchDiv form{
    width: 100%;
    position: relative;
    margin: 0;
    padding: 0;
}
.searchDiv input[type="text"]{
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: medium none;
    color: #979797;
    font-size: 13px;
    height: 40px;
    padding: 0 0 0 15px;
    width: 100%;
    line-height: 1.35;
}

/*=======================================================================
// Header
=========================================================================*/
.header{
    width: 100%;
    position: relative;
    background: #263448;
    height: 50px;
}
.fixedHeader{
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 999;
    box-shadow: 0 0 2px rgba(0, 0, 0, .4);
}
.logo{
    width: 100%;
    text-align: left;
    position: relative;
    padding-top: 20px;
}
.logo a{
    position: relative;
    color: #AAE2F5;
    text-transform: capitalize;
font-family: 'dinar';
    font-size: 25px;
    line-height: 25px;
    display: inline-block;
    padding-top: 5px;
}
.logo a:hover{
    color: #FFFF66;
}
.logo a span{
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    height: 30px;
    border: 2px solid #272727;
    text-align: center;
    border-radius: 50%;
}
.logo a span:after{
    content: "";
    height: 7px;
    position: absolute;
    text-align: center;
    top: 11px;
    left: 11px;
    width: 7px;
    background: url(../images/logot.png) no-repeat center center;
}

/*=======================================================================
// Main Menu
=========================================================================*/
.mainMenu{
    width: 100%;
    text-align: right;
    position: relative;
}
.mainMenu > ul{
    margin: 0;
    padding: 0;
    float: right;
}
.mainMenu > ul > li{
    list-style: none;
    float: left;
    margin-right: 58px;
    line-height: 11px;
    padding: 30px 0 29px;
    position: relative;
}
.mainMenu > ul > li:last-child{
    margin-right: 0px;
}
.mainMenu ul li:after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
    width: 0%;
    height: 2px;
    background: #AAE2F5;
    opacity: 0;
    visibility: hidden;
    transition: all ease 700ms;
    -moz-transition: all ease 700ms;
    -webkit-transition: all ease 700ms;
    -ms-transition: all ease 700ms;
    -o-transition: all ease 700ms;
}
.mainMenu ul li:before{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 4px;
    margin: 0 auto;
    width: 0%;
    height: 1px;
    background: #FFF;
    opacity: 0;
    visibility: hidden;
    transition: all ease 700ms;
    -moz-transition: all ease 700ms;
    -webkit-transition: all ease 700ms;
    -ms-transition: all ease 700ms;
    -o-transition: all ease 700ms;
}
.mainMenu ul li:hover:after, .mainMenu ul li.active:after, 
.mainMenu ul li:hover:before, .mainMenu ul li.active:before{
    opacity: 1;
    visibility: visible;
    width: 100%;
}
.mainMenu > ul > li > a{
    font-size: 16px;
	
    color: #AAE2F5;
    text-transform: uppercase;
    line-height: 11px;
    display: inline-block;
}
.mainMenu > ul > li:hover > a, .mainMenu > ul > li.active > a{
    color: #FFF;
}
.menuButton {
    border-radius: 2px;
    cursor: pointer;
    height: 30px;
    left: auto;
    line-height: 4px;
    padding: 2px 4px 0;
    position: absolute;
    right: 14px;
    top: -50px;
    width: 40px;
    transition: all ease-in-out 400ms;
    -moz-transition: all ease-in-out 400ms;
    -webkit-transition: all ease-in-out 400ms;
    -ms-transition: all ease-in-out 400ms;
    -o-transition: all ease-in-out 400ms
}
.menuButton span {
    display: inline-block;
    width: 100%;
    height: 2px;
    background: #434343;
    transition: all ease-in-out 400ms;
    -moz-transition: all ease-in-out 400ms;
    -webkit-transition: all ease-in-out 400ms;
    -ms-transition: all ease-in-out 400ms;
    -o-transition: all ease-in-out 400ms
}
.menuButton.active span:first-child{
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform-origin: 11px 50%;
    -ms-transform-origin: 11px 50%;
    -webkit-transform-origin: 11px 50%;
}
.menuButton.active span:nth-child(2) {
    display: none;
}
.menuButton.active span:last-child{
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform-origin: 12px 50%;
    -webkit-transform-origin: 12px 50%;
    -ms-transform-origin: 12px 50%;
}
.menuButton:hover span{
    background: #b5967f;
}
.dropMenu{
    background: #fff none repeat scroll 0 0;
    left: -65px;
    margin: 0 auto !important;
    padding: 25px 0;
    position: absolute;
    right: 0;
    text-align: center;
    top: 170px;
    width: 175px;
    z-index: 99;
    -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 700ms ease-in-out;
    -moz-transition: all 700ms ease-in-out;
    -ms-transition: all 700ms ease-in-out;
    -o-transition: all 700ms ease-in-out;
    transition: all 700ms ease-in-out;
}
.mainMenu ul li:hover .dropMenu{
    visibility: visible;
    opacity: 1;
    top: 70px;
}
.dropMenu li {
    display: block;
    padding: 25px 0;
    position: relative;
}
.dropMenu li a{
    color: #b5967f;
    display: block;
    font-size: 14px;
    line-height: 11px;
    text-transform: uppercase;
    text-align: center;
}
.dropMenu li a:hover{
    color: #434343;
}
.dropMenu li:hover:after, .dropMenu li.active:after, .dropMenu li:hover:before, 
.dropMenu li.active:before {
    width: 50% !important;
}
.dropMenu li  a:hover{}

/*=======================================================================
// Slider
=========================================================================*/
.slider{
    width: 100%;
    position: relative;
    overflow: hidden;
}
.sliderItem{
    width: 100%;
    position: relative;
    height: 750px;
    text-align: center;
}
.itemOne{
   
}
.home2 .itemOne, .home3 .itemOne{
    background: url(../images/slider/s4.jpg) no-repeat center center / cover #e7e7e7;
}
.itemTwo{
    background: url(../images/slider/s2.jpg) no-repeat center center / cover #e7e7e7;
}
.itemThree{
    background: url(../images/slider/s3.jpg) no-repeat center center / cover #e7e7e7;
}
.home2 .itemThree, .home3 .itemThree{
    background: url(../images/slider/s5.jpg) no-repeat center center / cover #e7e7e7;
}
.sliderItem h1{
font-family: 'dinar';
    color: #AAE2F5;
    text-transform: uppercase;
    font-size: 30px;
    margin: 0;
     font-weight: 700;
    text-align: center;
    position: relative;
    padding: 5px;
	  text-shadow:
   -1px -1px 0 #000,  
    1px -1px 0 #000,
    -1px 1px 0 #000,
     1px 1px 0 #000;
	 height:40px;
}
 .slContent{
    position: absolute;
	width:100%;
    bottom: 0;
    left: 0;
	background-color:#263448;
	font-size: 25px;
 }
.sliderItem p {
    color: #FFF;
    font-size: 25px;
    line-height: 40px;
    text-transform: uppercase;
    margin: 20px auto 50px;
    width: 60%;
    text-align: center;
	  text-shadow:
   -1px -1px 0 #000,  
    1px -1px 0 #000,
    -1px 1px 0 #000,
     1px 1px 0 #000;
}
.title-center {
    color: #FFF;
    font-size: 35px;
    line-height: 50px;
    text-transform: uppercase;
    margin: 20px auto 50px;
    width: 60%;
    text-align: center;
	  text-shadow:
   -1px -1px 0 #000,  
    1px -1px 0 #000,
    -1px 1px 0 #000,
     1px 1px 0 #000;
}
.sliderButton{
    display: inline-block;
    width: 170px;
    height: 50px;
    background: #263448;
    padding: 5px;
    position: relative;
    text-align: center;
    font-size: 14px;
    line-height: 11px;
    text-transform: uppercase;
    color: #AAE2F5;
}
.sliderButton span{
    display: inline-block;
    width: 100%;
    height: 100%;
    border: 1px solid #FFF;
    text-align: center;
    padding-top: 14px;
    transition: all ease 700ms;
    -moz-transition: all ease 700ms;
    -webkit-transition: all ease 700ms;
    -ms-transition: all ease 700ms;
    -o-transition: all ease 700ms;
}
.sliderButton:focus,
.sliderButton:hover{
    color: #FFF;
}
.sliderButton:hover span{
    border-color: #b5967f;
}


.carousel-fade .carousel-inner .item {
    opacity: 0;
    -webkit-transition-property: opacity;
    transition-property: opacity;
}
.carousel-fade .carousel-inner .active {
    opacity: 1;
}
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    left: 0;
    opacity: 0;
    z-index: 1;
}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
    opacity: 1;
}
.carousel-fade .carousel-control {
    z-index: 2;
}

#mainSlider .item.active .anim1 {
    -webkit-animation: zoomIn 1000ms ease-in-out;
    animation: zoomIn 1000ms ease-in-out;
}
#mainSlider .item.active .anim2 {
    -webkit-animation: fadeInLeft 1100ms ease-in-out;
    animation: fadeInLeft 1100ms ease-in-out;
}
#mainSlider .item.active .anim3 {
    -webkit-animation: fadeInUp1 1200ms ease-in-out;
    animation: fadeInUp1 1200ms ease-in-out;
}


#mainSlider .item.active .anim11 {
    -webkit-animation: bounceInDown 1000ms ease-in-out;
    animation: bounceInDown 1000ms ease-in-out;
}
#mainSlider .item.active .anim21 {
    -webkit-animation: fadeInRight 1100ms ease-in-out;
    animation: fadeInRight 1100ms ease-in-out;
}
#mainSlider .item.active .anim31 {
    -webkit-animation: zoomInUp 1200ms ease-in-out;
    animation: zoomInUp 1200ms ease-in-out;
}

#mainSlider .item.active .anim12 {
    -webkit-animation: zoomIn 1000ms ease-in-out;
    animation: zoomIn 1000ms ease-in-out;
}
#mainSlider .item.active .anim22 {
    -webkit-animation: lightSpeedIn 1100ms ease-in-out;
    animation: lightSpeedIn 1100ms ease-in-out;
}
#mainSlider .item.active .anim32 {
    -webkit-animation: fadeInUp1 1200ms ease-in-out;
    animation: fadeInUp1 1200ms ease-in-out;
}
.mainController{
    width: 100%;
    position: absolute;
    width: 100%;
    height: 31px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
#mainSlider .carousel-control {
    background: rgba(250, 250, 250, 0.2) none repeat scroll 0 0;
    border-color: rgba(250, 250, 250, 0.6);
    border-image: none;
    border-style: solid;
    border-width: 1px 1px 2px;
    box-shadow: none;
    height: 30px;
    opacity: 1;
    text-align: center;
    text-shadow: none;
    top: 47%;
    width: 30px;
    z-index: 11;
}
#mainSlider .carousel-control:hover{
    background: #b5967f;
    border-color: #b5967f;
}
.mainControllerArea{
    position: relative;
    width: 100%;
}
#mainSlider .mainControllerArea .carousel-control.left {
    left: 0;
    right: auto;
}
#mainSlider .mainControllerArea .carousel-control.right {
    left: auto;
    right: 0;
}
#mainSlider .carousel-control.left i {
    border-bottom: 2px solid #fff;
    border-left: 2px solid #fff;
    bottom: 0;
    display: inline-block;
    height: 9px;
    left: 5px;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    transform: rotate(45deg);
    width: 9px;
}
#mainSlider .carousel-control.right i {
    border-right: 2px solid #fff;
    border-top: 2px solid #fff;
    bottom: 0;
    display: inline-block;
    height: 9px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 5px;
    top: 0;
    transform: rotate(45deg);
    width: 9px;
}
#mainSlider.home2 .sliderItem h1{
    text-align: left;
}
#mainSlider.home2 .sliderItem h1:after,
#mainSlider.home2 .sliderItem h1:before{
    margin: 0;
}
#mainSlider.home2 .sliderItem p {
    margin: 20px 0 60px;
    text-align: left;
}
#mainSlider.home2 .sliderButton {
    display: block;
    background: transparent;
    border: 2px solid #979797;
    padding: 2px;
}
#mainSlider.home2 .sliderButton span{
    border: 1px solid #979797;
}
#mainSlider.home2 .sliderButton:hover span{
    border-color: #FFF;
}
#mainSlider.home2 .carousel-control.left {
    left: auto;
    right: 40px;
}
.mainCarouselControllerTwo{
    width: 100%;
    position: absolute;
    left: 0;
    height: 30px;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}
.home2Controller{
    width: 100%;
    position: relative;
}


#mainSlider.home3 .carousel-control {
    bottom: 30px;
    top: auto;
}
#mainSlider.home3 .carousel-control:hover {
    background: #fff;
    border-color: #fff;
}
#mainSlider.home3 .carousel-control.left:hover i {
    border-left-color: #707070;
    border-bottom-color: #707070;
}
#mainSlider.home3 .carousel-control.right:hover i {
    border-right-color: #707070;
    border-top-color: #707070;
}
#mainSlider.home3 .carousel-control.right {
    left: 0;
    margin: 0 auto;
    right: -38px;
}
#mainSlider.home3 .carousel-control.left {
    left: -37px;
    margin: 0 auto;
    right: 0;
}
#mainSlider .carousel-inner {
    height: 100%;
}
#mainSlider.home3 .sliderItem h1:before{
    display: none;
}
.sliderItem h1 .lineTwo{
    background: transparent none repeat scroll 0 0;
    border: 1px solid #fff;
    height: 100%;
    width: 100%;
    padding: 23px 20px;
    display: inline-block;
}
#mainSlider.home3 .sliderItem h1:after{
    display: none;
}
.sliderItem h1 .lineOne{
    background: transparent none repeat scroll 0 0;
    border: 2px solid #fff;
    display: inline-block;
    padding: 2px;
    height: 100%;
    width: 100%;
}
.home3 .sliderItem p {
    font-size: 17px;
    width: 100%;
}
.home3 .sliderItem h1 {
    display: inline-block;
    padding-bottom: 0;
}
.home3 .sliderItem h4 {
    color: #fff;
    font-size: 25px;
    font-weight: 400;
    line-height: 1;
    padding-bottom: 32px;
    text-transform: uppercase;
}
/*=======================================================================
// Features
=========================================================================*/
.singleFeatures{
    width: 100%;
    position: relative;
}
.sFContent{
    width: 100%;
    position: relative;
    background: #f8f8f8;
    height: 270px;
    padding-left: 30px;
    padding-right: 25px;
}
.sFContent:after{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 270px 262px 0px 0;
    border-color: transparent #f4f4f4 transparent transparent;
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}
[class^="flaticon-"]::before, [class*=" flaticon-"]::before, [class^="flaticon-"]::after, [class*=" flaticon-"]::after{
    margin-left: 0px !important;
}
.fIcona{
    color: #263448;
    display: inline-block;
    height: 44px;
    z-index: 9;
}
.fIcona:before{
    font-size: 44px;
    margin-top: 8px;
    position: relative;
    display: inline-block;
}
.fIcona.flaticon-coffee-cup1:before{
    top: -5px;
}
.fIcona.flaticon-diamond:before{
    font-size: 38px;
    margin-top: 7px;
}
.sFContent h3{
    font-size: 17px;
    line-height: 13px;
    text-transform: uppercase;
    margin: 18px 0 22px;
    color: #434343;
    position: relative;
    z-index: 9;
}
.sFContent p{
    font-size: 14px;
    line-height: 28px;
    margin: 0px;
    position: relative;
    z-index: 9;
}
.sFCount{
    width: 100%;
    position: relative;
    text-align: left;
    padding-left: 81px;
    font-size: 25px;
    color: #434343;
    line-height: 17px;
    padding-top: 30px;
}
.sFCount:before{
    width: 30px;
    height: 1px;
    background: #b5967f;
    content: "";
    position: absolute;
    left: 32px;
    top: 30px;
}

/*=======================================================================
// Service Icons
=========================================================================*/
.iconSection{
    position: relative;
    background: url(../images/bg/bg1.jpg) no-repeat center center / cover fixed transparent;
    padding: 185px 0;
}
.singleIcona{
    width: 100%;
    position: relative;
    text-align: center;
}

.singleIcona .icons{
    display: inline-block;
    width: 90px;
    height: 90px;
    position: relative;
}
.singleIcona .icons:after{
    width: 90px;
    height: 90px;
    border: 2px solid rgba(255, 255, 255, .5);
    border-radius: 50%;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    content: "";
    position: absolute;
    transition: all ease 600ms;
    -moz-transition: all ease 600ms;
    -webkit-transition: all ease 600ms;
    -ms-transition: all ease 600ms;
    -o-transition: all ease 600ms;
}
.singleIcona .icons:before{
    width: 90px;
    height: 90px;
    border-radius: 50%;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    content: "";
    position: absolute;
    background: #b5967f;
    transition: all ease 400ms;
    -moz-transition: all ease 400ms;
    -webkit-transition: all ease 400ms;
    -ms-transition: all ease 400ms;
    -o-transition: all ease 400ms;
    transform: scale(0);
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    opacity: 0;
    visibility: hidden;
}
.singleIcona:hover .icons:after{
    width: 80px;
    height: 80px;
    border-color: #FFF;
    border-width: 1px;
}
.singleIcona:hover .icons:before{
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    opacity: 1;
    visibility: visible;
}
.icons i{
    bottom: 0;
    color: #fff;
    height: 30px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
}
.icons i:before{
    font-size: 31px;
}
.icons i.flaticon-goldingots:before{
    font-size: 24px;
}
.singleIcona p{
    margin: 15px 0 0;
}
.singleIcona p a{
    color: #fff;
    font-size: 17px;
    line-height: 13px;
    text-transform: capitalize;
    display: inline-block;
}
.singleIcona p a:hover{
    color: #b5967f;
}
/*=======================================================================
// Portfolio
=========================================================================*/
#portfolio{
    background: #f8f8f8;
    border-bottom: 1px solid #e7e7e7;
}
#portfolio:after{
    position: absolute;
    width: 50%;
    height: 100%;
    right: 0;
    top: 0;
    background: #f4f4f4;
    content: "";
    z-index: 1;
}
#portfolio .container{
    position: relative;
    z-index: 2;
}
.mixMenu{
    width: 100%;
    position: relative;
    text-align: center;
    margin-bottom: 60px;
}
.mixMenu ul{
    display: inline-block;
    width: 100%;
    text-align: center;
    margin: 0;
    padding: 0;
}
.mixMenu ul li{
    display: inline-block;
    height: 40px;
    background: #FFF;
    font-size: 13px;
    line-height: 10px;
    text-transform: uppercase;
    position: relative;
    color: #263448;
    padding: 15px 20px 0;
    border-bottom: 1px solid #263448;
    margin-right: 10px;
    cursor: pointer;
    transition: all ease 700ms;
    -moz-transition: all ease 700ms;
    -webkit-transition: all ease 700ms;
    -ms-transition: all ease 700ms;
    -o-transition: all ease 700ms;
}
.mixMenu ul li:last-child{
    margin-right: 0px;
}
.mixMenu ul li:after{
    width: 0%;
    height: 2px;
    background: #263448;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
    content: "";
    position: absolute;
    transition: all ease 700ms;
    -moz-transition: all ease 700ms;
    -webkit-transition: all ease 700ms;
    -ms-transition: all ease 700ms;
    -o-transition: all ease 700ms;
    opacity: 0;
    visibility: hidden;
}
.mixMenu ul li:before{
    width: 0%;
    height: 1px;
    background: yellow;
    left: 0;
    right: 0;
    bottom: 4px;
    margin: 0 auto;
    content: "";
    position: absolute;
    transition: all ease 700ms;
    -moz-transition: all ease 700ms;
    -webkit-transition: all ease 700ms;
    -ms-transition: all ease 700ms;
    -o-transition: all ease 700ms;
    opacity: 0;
    visibility: hidden
}
.mixMenu ul li:hover:after, .mixMenu ul li:hover:before, .mixMenu ul li.active:after, .mixMenu ul li.active:before{
    opacity: 1;
    visibility: visible;
    width: 100%;
}
.mixMenu ul li:hover{
    color: #434343;
}
.myGridElements{
    text-align: center;
}
.sFolio{
    width: 20%;
    display: inline-block;
    position: relative;
    overflow: hidden;
    margin-bottom: -9px;
}
.sFolio img{
    width: 100%;
    height: auto;
}
.sFHover{
    width: 100%;
    height: 117px;
    background: rgba(38, 52, 72, 0.8);
    position: absolute;
    bottom: -100%;
    left: 0;
    transition: all ease 400ms;
    -moz-transition: all ease 400ms;
    -webkit-transition: all ease 400ms;
    -ms-transition: all ease 400ms;
    -o-transition: all ease 400ms;
}
.sFolio:hover .sFHover{
    bottom: 0;
}
.sFHover h3{
    font-size: 17px;
    color: #FFF;
    text-align: center;
    color: #FFF;
    margin: 0;
    line-height: 13px;
    text-transform: uppercase;
    font-weight: 300;
    position: absolute;
    left: 0;
    top: 110%;
    width: 100%;
    transition: all ease 900ms;
    -moz-transition: all ease 900ms;
    -webkit-transition: all ease 900ms;
    -ms-transition: all ease 900ms;
    -o-transition: all ease 900ms;
    opacity: 0;
    visibility: hidden;
}
.sFolio:hover .sFHover h3{
    top: 40px;
    opacity: 1;
    visibility: visible;
}
.sFHover p{
    margin: 0;
    color: #FFF;
    font-size: 13px;
    line-height: 10px;
    text-transform: capitalize;
    font-weight: 300;
    position: absolute;
    top: 110%;
    width: 100%;
    left: 0;
    transition: all ease 1000ms;
    -moz-transition: all ease 1000ms;
    -webkit-transition: all ease 1000ms;
    -ms-transition: all ease 1000ms;
    -o-transition: all ease 1000ms;
    opacity: 0;
    visibility: hidden;
}
.sFolio:hover .sFHover p{
    top: 67px;
    opacity: 1;
    visibility: visible;
}
.bestWorks{
    width: 100%;
    position: relative;
    height: 228px;
    background: none;
    padding: 40px  35px 0 35px;
    cursor: pointer;
    overflow: hidden;
}
.bestWorks:before{
    border-color: transparent #FFF transparent transparent;
    border-style: solid;
    border-width: 0 229px 229px 0;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    transition: all ease 700ms;
    -moz-transition: all ease 700ms;
    -webkit-transition: all ease 700ms;
    -ms-transition: all ease 700ms;
    -o-transition: all ease 700ms;
}
.bestWorks h3{
    font-size: 13px;
    color: #b5967f;
    text-transform: uppercase;
    margin: 0;
    line-height: 10px;
    cursor: pointer;
    position: relative;
    z-index: 9;
    text-align: right;
    transition: all ease 700ms;
    -moz-transition: all ease 700ms;
    -webkit-transition: all ease 700ms;
    -ms-transition: all ease 700ms;
    -o-transition: all ease 700ms;
}
.bestWorks h3 span,.latesWork h3 span{
    transition: all ease 700ms;
    -moz-transition: all ease 700ms;
    -webkit-transition: all ease 700ms;
    -ms-transition: all ease 700ms;
    -o-transition: all ease 700ms;
}
.bestWorks:hover:before{
    /*    border-color: transparent transparent transparent #b5967f;*/
    border-color: transparent #b5967f transparent transparent;
}
.bestWorks:hover h3{
    color: #FFF;
}
.latesWork{
    width: 100%;
    position: relative;
    height: 228px;
    background: none;
    padding: 40px 0 0 35px;
    cursor: pointer;
    overflow: hidden;
}
.latesWork:before{
    border-color: transparent transparent transparent #FFF;
    border-style: solid;
    border-width: 0 0 229px 229px;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    transition: all ease 700ms;
    -moz-transition: all ease 700ms;
    -webkit-transition: all ease 700ms;
    -ms-transition: all ease 700ms;
    -o-transition: all ease 700ms;
}
.latesWork h3{
    font-size: 13px;
    color: #b5967f;
    text-transform: uppercase;
    margin: 0;
    line-height: 10px;
    cursor: pointer;
    position: relative;
    z-index: 9;
    text-align: left;
    transition: all ease 700ms;
    -moz-transition: all ease 700ms;
    -webkit-transition: all ease 700ms;
    -ms-transition: all ease 700ms;
    -o-transition: all ease 700ms;
}
.latesWork:hover:before{
    border-color: transparent transparent transparent #b5967f;
}
.latesWork:hover h3{
    color: #FFF;
}
#mixer .mix{
    display: none;
}
div.pp_default .pp_close{
    color: #b5967f;
    height: inherit;
    padding-right: 10px;
    padding-top: 6px;
    text-align: right;
    text-indent: 0;
    width: inherit;
    opacity: 1 !important;
    line-height: 1 !important;
    display: block;
}
/*=======================================================================
// Information
=========================================================================*/
.featuresSection{
    position: relative;
    border-bottom: 1px solid #e7e7e7;
}
.singleInformation{
    width: 100%;
    position: relative;
    margin-bottom: 35px;
}
.singleInformation h3{
    margin: 0 0 22px;
    font-size: 17px;
    line-height: 13px;
    color: #434343;
    text-transform: capitalize;

}
.singleInformation p{
    position: relative;
    padding-left: 70px;
    font-size: 14px;
    line-height: 28px;
    margin-bottom: 0px;
}
.singleInformation p i{
    position: absolute;
    left: 0;
    top: 20px;
    width: 70px;
}
.singleInformation p i:before{
    color: #263448 ;
    font-size: 50px;
}
.singleInformation.info2 p i{
    top: 14px;
}
.singleInformation.info2 p i::before {
    font-size: 42px;
}
.singleInformation.info4 p i{
    top: 9px;
}
.singleInformation.info4 p i::before {
    font-size: 30px;
}
.singleInformation.info5 p i{
    top: 18px;
}
.singleInformation.info5 p i::before {
    font-size: 45px;
}
.singleInformation.info6 p i{
    top: 16px;
}
.singleInformation.info6 p i::before {
    font-size: 43px;
}
/*=======================================================================
// Pricing Section
=========================================================================*/
.pricingSection{
    background: #f8f8f8;
    width: 100%;
}
.pricing{
    width: 100%;
    position: relative;
    background: #FFF;
    text-align: center;
}
.pricingHead{
    width: 100%;
    position: relative;
    height: 132px;
    background: #f4f4f4;
    padding-top: 30px;
}
.pricingHead:before{
    width: 30px;
    height: 2px;
    background: #b5967f;
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    margin: 0 auto;
}
.pricingHead h3{
    font-size: 17px;
    color: #434343;
    text-transform: uppercase;
    line-height: 13px;
    margin: 0px;
}
.price{
    position: absolute;
    left: 0;
    right: 0;
    bottom: -60px;
    margin: 0 auto;
    border: 2px solid #b5967f;
    width: 120px;
    height: 120px;
    background: #b5967f;
    padding: 3px;
    border-radius: 50%;
    z-index: 99;
    transition: all ease 700ms;
    -moz-transition: all ease 700ms;
    -webkit-transition: all ease 700ms;
    -ms-transition: all ease 700ms;
    -o-transition: all ease 700ms;
}
.pricing:hover .price{
    background: #FFF;
}
.priceInner{
    display: inline-block;
    width: 100%;
    height: 100%;
    border: 1px solid #fff;
    border-radius: 50%;
    padding-top: 20px;
    line-height: 10px;
    transition: all ease 700ms;
    -moz-transition: all ease 700ms;
    -webkit-transition: all ease 700ms;
    -ms-transition: all ease 700ms;
    -o-transition: all ease 700ms;
}
.home2 .priceInner{
    border-color: rgba(255, 255, 255, .65);
}
.pricing:hover .priceInner{
    border-color: #b5967f;
}
.priceInner p{
    display: inline-block;
    width: 100%;
    text-align: center;
    margin: 0px 0 6px;
    transition: all ease 700ms;
    -moz-transition: all ease 700ms;
    -webkit-transition: all ease 700ms;
    -ms-transition: all ease 700ms;
    -o-transition: all ease 700ms;
}
.priceInner .currency{
    color: #FFF;
    font-size: 13px;
    line-height: 10px;
    transition: all ease 700ms;
    -moz-transition: all ease 700ms;
    -webkit-transition: all ease 700ms;
    -ms-transition: all ease 700ms;
    -o-transition: all ease 700ms;
}
.pricing:hover .priceInner .currency{
    color: #b5967f;
}
.priceInner .pAmount{
    font-size: 25px;
    color: #FFF;
    line-height: 18px;
    text-align: center;
    margin: 0 0 14px;
    transition: all ease 700ms;
    -moz-transition: all ease 700ms;
    -webkit-transition: all ease 700ms;
    -ms-transition: all ease 700ms;
    -o-transition: all ease 700ms;
}
.pricing:hover .priceInner .pAmount{
    color: #b5967f;
}
.priceInner .duration{
    font-size: 13px;
    line-height: 10px;
    text-transform: lowercase;
    color: #FFF;
    margin: 0;
    transition: all ease 700ms;
    -moz-transition: all ease 700ms;
    -webkit-transition: all ease 700ms;
    -ms-transition: all ease 700ms;
    -o-transition: all ease 700ms;

}
.pricing:hover .priceInner .duration{
    color: #b5967f;
}
.priceBody{
    width: 100%;
    background: #FFF;
    position: relative;
    padding-top: 90px;
    text-align: center;
}
.priceBody p{
    margin: 0px 0 22px;
    font-size: 14px;
    line-height: 11px;
    text-transform: capitalize;
}
.priceFooter{
    width: 100%;
    position: relative;
    background: #FFF;
    padding: 16px 30px 20px;
}
.priceFooter a{
    display: inline-block;
    width: 100%;
    text-align: center;
    height: 50px;
    border: 2px solid #b5967f;
    padding: 2px;
    background: #FFF;
    line-height: 11px;
    transition: all ease 700ms;
    -moz-transition: all ease 700ms;
    -webkit-transition: all ease 700ms;
    -ms-transition: all ease 700ms;
    -o-transition: all ease 700ms;
}
.pricing:hover .priceFooter a{
    background: #b5967f;
}
.priceFooter a span{
    display: inline-block;
    width: 100%;
    height: 100%;
    border: 1px solid #b5967f;
    color: #b5967f;
    font-size: 14px;
    line-height: 11px;
    text-transform: uppercase;
    padding-top: 15px;
    transition: all ease 700ms;
    -moz-transition: all ease 700ms;
    -webkit-transition: all ease 700ms;
    -ms-transition: all ease 700ms;
    -o-transition: all ease 700ms;
}
.pricing:hover .priceFooter a span{
    border-color: #FFF;
    color: #fff;
}
/***************** Workers section *********************/
.workersSection{
    position: relative;
}
.singleWorker{
    width: 20%;
    float: left;
    cursor: pointer;
    overflow: hidden;
}
.singleWorker h3 a{
    color: #434343;
    font-size: 17px;
    font-weight: 400;
    padding-top: 30px;
    text-transform: uppercase;
    display: inline-block;
}
.singleWorker > p{
    color: #979797;
    font-size: 13px;
    line-height: 0.9;
    padding-top: 14px;
    text-transform: capitalize;
}
.workerImg{
    width: 100%;
    position: relative;
}
.workerHover{
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(181,150,127,.9);
    bottom: 0;
    padding: 21px 28px;
    opacity: 0;
    overflow: hidden;
    visibility: hidden;
    -webkit-transition: all 700ms ease-in-out;
    -moz-transition: all 700ms ease-in-out;
    -ms-transition: all 700ms ease-in-out;
    -o-transition: all 700ms ease-in-out;
    transition: all 700ms ease-in-out;
}
.workerHover p{
    color: #fff;
    font-size: 14px;
    line-height: 2;
}
.workSocial{
    width: 100%;
    text-align: center;
    margin-top: 23px;
}
.workSocial a{
    color: #fff;
    display: inline-block;
    font-size: 20px;
    line-height: 1;
    padding: 0 12px;
}
.workSocial a:hover{
    color: rgba(255, 255, 255, .5);
}
.singleWorker:hover .workerHover{
    opacity: 1;
    visibility: visible;
}
.singleWorker:hover h3 a{
    color: #b5967f;
}
/**************** Promo section *****************/
.promoSection{
    background: #f8f8f8;
    position: relative;
    border-top: 1px solid #e7e7e7;
    border-bottom: 1px solid #e7e7e7;
}
.promoSection:after{
    position: absolute;
    left: auto;
    top: 0;
    right: 0;
    content: "";
    width: 50%;
    bottom: 0;
    background: #f4f4f4;
    z-index: 0;
}
.promoSection .container{
    position: relative;
    z-index: 1;
}
.titleIcon{
    padding-bottom: 25px;
}
.titleIcon i:before{
    color: #b5967f;
    font-size: 40px;
}
.promoSection.comonSection{
    padding-bottom: 0;
}
.promoSection .sectionTitle{
    margin-bottom: 0;
    padding-bottom: 30px;
}
.promoSection .sectionTitle:after,
.promoSection .sectionTitle:before{
    display: none;
}
.promoSection .subTitle{
    margin-bottom: 39px;
}
/***************** About us section *******************/
.skillSection{
    position: relative;
}
.singleSkill{
    margin-bottom: 30px;
    position: relative;
    width: 100%;
}
.singleSkill p {
    color: #434343;
    font-size: 14px;
    line-height: 11px;
    margin-bottom: 20px;
}
.skillBarWrap{
    position: relative;
}
.skillOne{
    background: #f8f8f8;
    height: 6px;
    position: relative;
    width: 91%;
}
.skillTwo{
    background: #f4f4f4;
    height: 6px;
    position: relative;
    width: 91%;
    margin-left: 5px;
}
.skillBar{
    background: #b5967f;
    height: 100%;
    position: absolute;
    top: 0;
    width: 0%;
    right: 1px;
    float: right;
}
.skillBar2{
    background: #b5967f;
    height: 100%;
    position: absolute;
    top: 0;
    width: 0%;
    display: none;
    left: 1px;
}
.skilPercent{
    color: #979797;
    font-size: 14px;
    line-height: 11px;
    position: absolute;
    right: -63px;
    text-align: center;
    width: 50px;
}

.titleLeft .sectionTitle{
    text-align: left;
    text-transform: capitalize;
}
.titleLeft .sectionTitle:before,
.titleLeft .sectionTitle:after{
    margin: 0;
}

/* accrodion */
.myAccordion .panel-group .panel {
    border: medium none;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 0;
}
.myAccordion .panel-default > .panel-heading {
    background-color: transparent;
    border: medium none;
    color: #fff;
    border-radius: 0;
    padding: 0;
}
.myAccordion .panel-title > a{
    background: #b5967f none repeat scroll 0 0;
    color: #fff;
    display: block;
    font-size: 14px;
    font-weight: 400;
    line-height: 12px;
    padding: 13px 10px 13px 30px;
    position: relative;
}
.myAccordion .panel-title > a span{
    bottom: 0;
    display: inline-block;
    height: 15px;
    left: auto;
    margin: 0;
    position: absolute;
    right: 20px;
    top: 10px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 15px;
}
.myAccordion .panel-title > a span:before{
    background: #fff none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    top: 0;
    display: none;
    transition: all 700ms ease 0s;
    width: 1px;
}
.myAccordion .panel-title > a span:after{
    background: #fff none repeat scroll 0 0;
    bottom: 0;
    content: "";
    height: 1px;
    left: 0;
    margin: auto 0;
    display: none;
    position: absolute;
    top: 0;
    transition: all 700ms ease 0s;
    width: 100%;
}

.myAccordion .panel-title > a.collapsed{
    background: transparent;
    color: #434343;
}
.myAccordion .panel-title > a.collapsed span{
    border: 1px solid #434343;
    border-radius: 50%;
    height: 10px;
    top: 13px;
    display: none;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
    width: 10px;
}
.myAccordion .panel-title > a.collapsed span:before{
    display: none;
}
.myAccordion .panel-title > a.collapsed span:after{
    display: none;
}
.myAccordion.panel-group .panel {
    border: none;
    box-shadow: none;
    margin-bottom: 15px;
    background: #F8F8F8;
    border-radius: 0;
}
.myAccordion .collapse.in{
    border-bottom: 1px solid #b5967f;
}
.myAccordion .panel-default > .panel-heading + .panel-collapse > .panel-body {
    border: medium none;
}
.myAccordion .panel-body {
    font-size: 13px;
    padding: 14px 18px 20px 30px;
}
/*=======================================================================
// Video Section
=========================================================================*/
.videoSection{
    width: 100%;
    position: relative;
    height: 500px;
    overflow: hidden;
    background: url(../images/video/small.jpg) no-repeat scroll center center;
}
#bgndVideo{
    width: 100%;
    height: 500px;
    position: relative;
}
.videoDes{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    padding-top: 240px;
    z-index: 1;
}
.videoDes p{
    font-size: 25px;
    color: #FFF;
    text-transform: uppercase;
    margin: 0px;
    line-height: 18px;
}
.videoDes p a{
    display: inline-block;
    color: #FFF;
    margin-right: 22px;
    font-size: 30px;
    width: 26px;
    height: 28px;
    position: relative;
}
.videoDes p a i{
    position: absolute;
    left: 0;
    top: 4px;
}
.videoDes p a:hover{
    color: #b5967f;
}
/*=======================================================================
// Testimonial Section
=========================================================================*/
.testimonialSection{
    position: relative;
}
.item.testiOne{
    background: url(../images/bg/testi1.jpg) no-repeat center center / cover;
}
.home2 .item.testiOne, .home3 .item.testiOne{
    background: url(../images/bg/testi4.jpg) no-repeat center center / cover;
}
.item.testiTwo{
    background: url(../images/bg/testi2.jpg) no-repeat center center / cover;
}
.item.testiThree{
    background: url(../images/bg/testi3.jpg) no-repeat center center / cover;
}
.tesDetails{
    width: 70%;
    margin: 0 auto;
    text-align: center;
}
.tesDetails p{
    font-size: 25px;
    line-height: 40px;
    margin: 0 0 13px;
    text-transform: uppercase;
    color: #FFF;
}
.tesDetails a{
    font-size: 17px;
    color: #FFF;
    text-transform: capitalize;
    line-height: 13px;
    display: inline-block;
}
.tesDetails a:hover{
    color: #b5967f;
}
#testimonialSlider{
    position: relative;
}
#testimonialSlider .carousel-control{
    width: 30px;
    height: 30px;
    border: 1px solid rgba(151, 151, 151, .5);
    border-bottom-width: 2px;
    background: rgba(151, 151, 151, .1);
    opacity: 1;
    box-shadow: none;
    text-shadow: none;
    top: 47%;
    text-align: center;
    z-index: 11;
}
#testimonialSlider .tesDetails:before{
    background: rgba(0, 0, 0, 0) url("../images/quoat.png") no-repeat scroll center center;
    content: "";
    height: 20px;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    width: 28px;
    z-index: 13;
    top: -50px;
}
#testimonialSlider .carousel-control.left i{
    width: 9px;
    height: 9px;
    height: 9px;
    left: 5px;
    position: absolute;
    top: 0;
    width: 9px;
    right: 0;
    bottom: 0;
    margin: auto;
    display: inline-block;
    border-left: 2px solid #FFF;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}
#testimonialSlider .carousel-control.right i{
    border-right: 2px solid #fff;
    border-top: 2px solid #fff;
    display: inline-block;
    height: 9px;
    left: 0;
    position: absolute;
    top: 0;
    width: 9px;
    right: 5px;
    bottom: 0;
    margin: auto;
    display: inline-block;
    border-top: 2px solid #FFF;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}
#testimonialSlider .carousel-control:hover{
    border-color: #b5967f;
    background: #b5967f;
}
#testimonialSlider .carousel-control.left{
    right: auto;
    left: 7.1%;
}

#testimonialSlider .carousel-control.right{
    left: auto;
    right: 7.1%;
}
.carousel.carfade {
    opacity: 1;
}
.carousel.carfade .item {
    -moz-transition: opacity ease-in-out 800ms;
    -o-transition: opacity ease-in-out 800ms;
    -webkit-transition: opacity ease-in-out 800ms;
    transition: opacity ease-in-out 800ms;
    left: 0 !important;
    opacity: 0;
    top:0;
    position:absolute;
    width: 100%;
    display:block !important;
    z-index:1;
    padding: 220px 0 160px;
}
.carousel.carfade .item:first-child {
    top:auto;
    position:relative;
}
.carousel.carfade .item.active {
    opacity: 1;
    -moz-transition: opacity ease-in-out 800ms;
    -o-transition: opacity ease-in-out 800ms;
    -webkit-transition: opacity ease-in-out 800ms;
    transition: opacity ease-in-out 800ms;
    z-index:2;
}

/*=======================================================================
// History Section
=========================================================================*/
.historySection{
    background: #f8f8f8;
}
.historySection:after{
    position: absolute;
    width: 50%;
    height: 100%;
    right: 0;
    top: 0;
    background: #f4f4f4;
    content: "";
    z-index: 1;
}
.historySection .container{
    position: relative;
    z-index: 9;
}
#historyTabs{
    width: 100%;
    position: relative;
    z-index: 99;
}
#historyTabs:before{
    background: #e7e7e7 none repeat scroll 0 0;
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    top: 44px;
    width: 100%;
    z-index: 9;
}
#historyTabs ul{
    margin: 0 0 60px;
    padding: 0;
    list-style: none;
    display: inline-block;
    width: 100%;
}
#historyTabs ul li{
    width: 25%;
    float: left;
    position: relative;
    text-align: center;
    padding-bottom: 30px;
    line-height: 11px;
}
#historyTabs ul li a{
    display: inline-block;
    line-height: 10px;
    color: #b5967f;
    font-size: 13px;
    position: relative;
}
#historyTabs ul li a:after{
    width: 11px;
    height: 11px;
    content: "";
    border-radius: 50%;
    background: #979797;
    left: 0;
    right: 0;
    top: 38px;
    margin: 0 auto;
    position: absolute;
    z-index: 91;
    transition: all ease 700ms;
    -moz-transition: all ease 700ms;
    -webkit-transition: all ease 700ms;
    -ms-transition: all ease 700ms;
    -o-transition: all ease 700ms;
}
#historyTabs ul li a:hover, #historyTabs ul li.ui-tabs-active a{
    color: #434343;
}
#historyTabs ul li a:hover:after, #historyTabs ul li.ui-tabs-active a:after{
    background: #b5967f;
}
.historyTabPanel{
    width: 100%;
    position: relative;
}
.historyLeft{
    position: relative;
    float: left;
    width: 80%;
}
.historyRight{
    position: relative;
    float: left;
    width: 20%;
}
.bigHistory{
    width: 50%;
    float: left;
    position: relative;
    background: #FFF;
}
.bHText{
    background: #fff none repeat scroll 0 0;
    float: left;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 29px;
    position: relative;
    width: 50%;
    min-height: 228px;
    transition: all ease 700ms;
    -moz-transition: all ease 700ms;
    -webkit-transition: all ease 700ms;
    -ms-transition: all ease 700ms;
    -o-transition: all ease 700ms;
}
.bigHistory:hover .bHText{
    background: #263448;
}
.bHText:after{
    width: 15px;
    height: 30px;
    border-style: solid;
    border-width: 15px 0 15px 15px;
    border-color: transparent transparent transparent #ffffff;
    right: -15px;
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    margin:  auto 0;
    z-index: 9;
    transition: all ease 700ms;
    -moz-transition: all ease 700ms;
    -webkit-transition: all ease 700ms;
    -ms-transition: all ease 700ms;
    -o-transition: all ease 700ms;
}
.bigHistoryRight .bHText:after{
    width: 15px;
    height: 30px;
    border-style: solid;
    border-width: 15px 15px 15px 0;
    border-color: transparent #ffffff transparent transparent;
    right: auto;
    left: -15px;
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    margin:  auto 0;
    z-index: 9;
    transition: all ease 700ms;
    -moz-transition: all ease 700ms;
    -webkit-transition: all ease 700ms;
    -ms-transition: all ease 700ms;
    -o-transition: all ease 700ms;
}
.bigHistory:hover .bHText:after{
    border-color: transparent transparent transparent #263448;
}
.bigHistory.bigHistoryRight:hover .bHText:after{
    border-color: transparent #b5967f transparent transparent;
}
.bHText h4{
    color: #434343;
    font-size: 17px;
    line-height: 13px;
    margin: 0 0 20px;
    text-transform: lowercase;
    font-weight: 300;
    transition: all ease 700ms;
    -moz-transition: all ease 700ms;
    -webkit-transition: all ease 700ms;
    -ms-transition: all ease 700ms;
    -o-transition: all ease 700ms;
}
.bigHistory:hover .bHText h4{
    color: #FFF;
}
.bHText p{
    font-size: 14px;
    margin: 0px;
    line-height: 28px;
    font-weight: 300;
    transition: all ease 700ms;
    -moz-transition: all ease 700ms;
    -webkit-transition: all ease 700ms;
    -ms-transition: all ease 700ms;
    -o-transition: all ease 700ms;
}
.bigHistory:hover .bHText p{
    color: #FFF;
}
.bHImg{
    width: 50%;
    float: left;
    position: relative;
}
.bHImg img{
    width: 100%;
    height: auto;
}

.smallHistory{
    width: 100%;
    position: relative;

}
.sHText{
    background: #fff none repeat scroll 0 0;
    float: left;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 30px;
    position: relative;
    width: 100%;
    min-height: 228px;
    transition: all ease 700ms;
    -moz-transition: all ease 700ms;
    -webkit-transition: all ease 700ms;
    -ms-transition: all ease 700ms;
    -o-transition: all ease 700ms;
}
.smallHistory:hover .sHText{
    background: #b5967f;
}
.sHText:after{
    width: 15px;
    height: 30px;
    border-style: solid;
    border-width: 15px 15px 0 15px;
    border-color: #ffffff transparent transparent transparent;
    right: 0;
    left: 0;
    content: "";
    position: absolute;
    bottom: -30px;
    margin:  0 auto;
    z-index: 9;
    transition: all ease 700ms;
    -moz-transition: all ease 700ms;
    -webkit-transition: all ease 700ms;
    -ms-transition: all ease 700ms;
    -o-transition: all ease 700ms;
}
.smallHistory:hover .sHText:after{
    border-color: #b5967f transparent transparent transparent;
}
.sHText h4{
    color: #434343;
    font-size: 17px;
    line-height: 13px;
    margin: 0 0 22px;
    text-transform: lowercase;
    font-weight: 300;
    transition: all ease 700ms;
    -moz-transition: all ease 700ms;
    -webkit-transition: all ease 700ms;
    -ms-transition: all ease 700ms;
    -o-transition: all ease 700ms;
}
.smallHistory:hover .sHText h4{
    color: #FFF;
}
.sHText p{
    font-size: 14px;
    margin: 0px;
    line-height: 28px;
    font-weight: 300;
    transition: all ease 700ms;
    -moz-transition: all ease 700ms;
    -webkit-transition: all ease 700ms;
    -ms-transition: all ease 700ms;
    -o-transition: all ease 700ms;
}
.smallHistory:hover .sHText p{
    color: #FFF;
}
.sHimg{
    width: 100%;
    position: relative;
}
.sHimg img{
    width: 100%;
    height: auto;
}

/*=======================================================================
// Contact Section
=========================================================================*/
#contact{
    background: url(../images/bg/bg3.jpg) no-repeat center center / cover;
    padding-bottom: 170px;
}
.conAddress{
    position: relative;
    text-align: center;
    margin-bottom: 60px;
}
.conAddress p{
    margin: 0px;
    font-size: 17px;
    color: #FFF;
    line-height: 13px;
    margin-bottom: 16px;
    font-weight: 300;
	direction: rtl;
}
.contactForm{
    width: 100%;
    position: relative;
}
.inputa{
    width: 100%;
    position: relative;
    height: 50px;
    margin-bottom: 30px;
}
.inputa input[type="text"], .inputa input[type="email"]{
    width: 100%;
    height: 50px;
    border: 1px solid rgba(255, 255, 255, .5);
    border-top-width: 2px;
    background: none;
    color: #FFF;
    padding-left: 55px;
    font-size: 14px;
    transition: all ease 700ms;
    -moz-transition: all ease 700ms;
    -webkit-transition: all ease 700ms;
    -ms-transition: all ease 700ms;
    -o-transition: all ease 700ms;
}
.inputa input[type="text"]:focus, .inputa input[type="email"]:focus{
    border-color: #fff;
}
.inputa input[type="text"].reqError, .inputa input[type="email"].reqError{
    border-color: #DC4A38;
}
.inputa i{
    font-size: 27px;
    position: absolute;
    left: 0;
    top: 0;
    width: 50px;
    height: 100%;
}
.inputa i:before{
    color: rgba(255, 255, 255, .8);
    font-size: 27px;
    left: 17px;
    position: absolute;
    top: 11px;
}
.messagebox{
    width: 100%;
    position: relative;
    height: 235px;
}
.messagebox textarea{
    width: 100%;
    height: 235px;
    border: 1px solid rgba(255, 255, 255, .5);
    border-top-width: 2px;
    text-align: center;
    padding: 15px;
    color: #FFF;
    font-size: 14px;
    background: none;
    resize: none;
    transition: all ease 700ms;
    -moz-transition: all ease 700ms;
    -webkit-transition: all ease 700ms;
    -ms-transition: all ease 700ms;
    -o-transition: all ease 700ms;
}
.messagebox textarea:focus{
    border-color: #FFF;
}
.messagebox textarea.reqError{
    border-color: #DC4A38;
}
#con_submit{
    background: #D5D5C6 none repeat scroll 0 0;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    bottom: -41px;
    height: 80px;
    left: 0;
    line-height: 11px;
    margin: 0 auto;
    padding: 3px;
    position: absolute;
    right: 0;
    width: 80px;
    transition: all ease 700ms;
    -moz-transition: all ease 700ms;
    -webkit-transition: all ease 700ms;
    -ms-transition: all ease 700ms;
    -o-transition: all ease 700ms;
}
#con_submit span{
    background: rgba(255, 255, 255, 0.1) none repeat scroll 0 0;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    color: #fff;
    display: inline-block;
    font-size: 14px;
    height: 100%;
    line-height: 11px;
    padding-top: 27px;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
    transition: all ease 700ms;
    -moz-transition: all ease 700ms;
    -webkit-transition: all ease 700ms;
    -ms-transition: all ease 700ms;
    -o-transition: all ease 700ms;
}
#con_submit:hover{
    background: #fff;
    border-color: #b5967f;
}
#con_submit:hover span{
    border-color: #FFF;
    background: #336699;
	color:#FFFFFF;
}

/*=======================================================================
// Footer
=========================================================================*/
.footer{
    width: 100%;
    position: relative;
    min-height: 70px;
    background: #FFF;
}
.copyright{
    font-size: 13px;
    line-height: 10px;
    color: #979797;
    margin: 30px 0 0;
}
.copyright a{
    color: #979797;
}
.copyright a:hover{
    color: #b5967f;
}
.footerSocial{
    width: 100%;
    text-align: right;
    color: #979797;
    line-height: 14px;
    margin-top: 28px;
}
.footerSocial a{
    color: #979797;
    margin-right: 27px;
    display: inline-block;
    line-height: 14px;
}
.footerSocial a:last-child{
    margin-right: 0px;
}
.footerSocial a:hover{
    color: #343a48;
}
#backToTop{
    background: #fff none repeat scroll 0 0;
    color: #979797;
    display: inline-block;
    font-size: 18px;
    height: 30px;
    left: 0;
    margin: 0 auto;
    padding-top: 1px;
    position: absolute;
    right: 0;
    text-align: center;
    top: -30px;
    width: 50px;
}
#backToTop:hover{
    color: #343a48;
}
/******************** Blog Page *****************/
.breadSection{
    background: url(../images/blog/breadBg.jpg) no-repeat scroll center center / cover;
    width: 100%;
    position: relative;
    padding: 80px 0;
}
.breadCont{
    background: rgba(181,150,127,.9);
    width: 212px;
    height: 172px;
    margin: 0 auto;
    position: relative;
}
.breadCont h1{
    color: #fff;
    font-size: 50px;
    font-weight: 700;
    padding-bottom: 25px;
    padding-top: 40px;
    position: relative;
    text-transform: uppercase;
    
font-family: 'dinar';
}
.breadCont h1:before {
    background: #fff none repeat scroll 0 0;
    bottom: 3px;
    content: "";
    height: 2px;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    width: 30px;
}
.breadCont h1:after {
    background: #fff none repeat scroll 0 0;
    bottom: 0;
    content: "";
    height: 1px;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    width: 30px;
}
.breadBorder{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 95%;
    height: 95%;
    border: 1px solid #fff;
    margin: auto;
}
.breadLink{
    padding-top: 10px;
    position: relative;
}
.breadLink a{
    display: inline-block;
    color: #fff;
    text-transform: capitalize;
    font-size: 13px;
}
.breadLink span{
    display: inline-block;
    color: #fff;
    padding-left: 3px;
}
.blogContSec{
    padding: 80px 0 100px;
    position: relative;
    background: #F8F8F8;
}
.blogSingCont{
    padding-right: 20px;
    display: table;
    clear: both;
    width: 100%;
    position: relative;
    margin-bottom: 50px;
}
.postContent{
    background: #fff;
    padding: 45px 30px 30px;
}
.postContent h2 a{
    color: #434343;
    display: inline-block;
    font-size: 25px;
    padding-bottom: 25px;
    margin-bottom: 10px;
    text-transform: uppercase;
    position: relative;
}
.postContent h2 a:hover{
    color: #b5967f;
}
.postContent h2 a:before {
    background: #434343;
    bottom: 3px;
    content: "";
    height: 2px;
    left: 0;
    margin: 0;
    position: absolute;
    right: 0;
    width: 30px;
}
.postContent h2 a:after {
    background: #434343;
    bottom: 0;
    content: "";
    height: 1px;
    left: 0;
    margin: 0;
    position: absolute;
    right: 0;
    width: 30px;
}
.postContent > p{

}
.postMeta{
    padding-bottom: 10px;
}
.postMeta p{
    color: #b5967f;
    font-size: 13px;
    font-weight: 400;
}
.postMeta p a{
    display: inline-block;
    color: #b5967f;
}
.postMeta p.pull-right a{
    color: #434343;
}
.postMeta p.pull-right a:hover{
    color: #b5967f;
}
.postMeta p a:hover{
    color: #434343;
}
.defaultBtn{
    border: 2px solid #b5967f;
    color: #b5967f;
    display: block;
    font-size: 13px;
    font-weight: 400;
    height: 40px;
    margin-top: 34px;
    padding-top: 4px;
    text-align: center;
    text-transform: uppercase;
    width: 142px;
    position: relative;
}
.defaultBtn:after{
    border: 1px solid #b5967f;
    bottom: 0;
    content: "";
    height: 32px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 134px;
    -webkit-transition: all 700ms ease-in-out;
    -moz-transition: all 700ms ease-in-out;
    -ms-transition: all 700ms ease-in-out;
    -o-transition: all 700ms ease-in-out;
    transition: all 700ms ease-in-out;
}
.defaultBtn:hover{
    color: #fff;
    border-color: #b5967f;
    background: #b5967f;
}
.defaultBtn:hover:after{
    border-color: #FFF;
}
.postSlideControl {
    margin: 0 auto;
    position: relative;
    width: 70px;
}
#postSlider .carousel-control {
    background: rgba(151, 151, 151, 0.1) none repeat scroll 0 0;
    border-color: rgba(151, 151, 151, 0.5);
    border-image: none;
    border-style: solid;
    border-width: 1px 1px 2px;
    box-shadow: none;
    height: 30px;
    opacity: 1;
    text-align: center;
    text-shadow: none;
    top: auto;
    width: 30px;
    bottom: 30px;
}
#postSlider .carousel-control.left i {
    border-bottom: 2px solid #fff;
    border-left: 2px solid #fff;
    bottom: 0;
    display: inline-block;
    height: 9px;
    left: 5px;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 9px;
}
#postSlider .carousel-control.right i {
    border-right: 2px solid #fff;
    border-top: 2px solid #fff;
    bottom: 0;
    display: inline-block;
    height: 9px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 5px;
    top: 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 9px;
}
#postSlider .carousel-control:hover {
    background: #b5967f none repeat scroll 0 0;
    border-color: #b5967f;
}
.postQuote {
    background: #b5967f;
    height: 330px;
    padding: 60px;
    position: relative;
}
.postQuote:after {
    border: 1px solid #fff;
    bottom: 0;
    content: "";
    height: 97.5%;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 99%;
}
.quotImg {
    padding-bottom: 26px;
    padding-top: 19px;
}
.quotImg img{
    width: auto;
    height: 100%;
}
.postQuote h2 {
    color: #fff;
    font-size: 25px;
    font-weight: 400;
    line-height: 40px;
    padding-bottom: 11px;
    text-transform: uppercase;
}
.postQuote p {
    color: #fff;
    font-size: 17px;
    font-weight: 400;
}
.postThumb iframe{
    border: 0;
    height: 330px;
    width: 100%;
}
.audioPost{
    height: 68px;
}
.audioPost iframe{
    width: 100%;
    height: 100%;
    border: none;
}
.postPagi{
    clear: both;
    display: table;
    padding-right: 20px;
    text-align: center;
    width: 100%;
}
.postPagi a{
    background: #f4f4f4;
    height: 40px;
    font-size: 13px;
    color: #434343;
    font-weight: 400;
    display: inline-block;
    text-transform: uppercase;
    width: 100%;
    padding-top: 5px;
    border-bottom: 1px solid #e7e7e7;
}
.postPagi a:hover{
    color: #b5967f;
}
#widgetSearch{
    position: relative;
}
#widgetSearch input:focus{
    outline:none;
}
#widgetSearch input{
    background: #fff;
    border-top: 1px solid #e7e7e7;
    border-bottom: none;
    border-left: none;
    border-right: none;
    color: #979797;
    font-size: 13px;
    height: 40px;
    padding: 0 0 0 15px;
    width: 100%;
}
#widgetSearch a{
    color: #979797;
    font-size: 13px;
    line-height: 11px;
    position: absolute;
    right: 15px;
    top: 13px;
}
#widgetSearch a:hover{
    color: #b5967f;
}
.widget{
    margin-bottom: 50px;
}
.widgetTitle{
    font-size: 17px;
    color: #434343;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 13px;
    margin-bottom: 30px;
}
.category{
    position: relative;
}
.category li{
    border-top: 1px solid #e7e7e7;
    display: inline-block;
    line-height: 1;
    padding: 13px 0 5px;
    width: 100%;
}
.category li:last-child{
    border-bottom: 1px solid #e7e7e7;
}
.category li:last-child a{
    padding-bottom: 10px;
}
.category li a{
    color: #b5967f;
    font-size: 13px;
    line-height: 11px;
    text-transform: uppercase;
    position: relative;
    float: left;
    padding-left: 0;
}
.category li span{
    font-size: 13px;
    color: #979797;
    line-height: 11px;
    font-weight: 400;
    float: right;
}
.category li a:before{
    background: #b5967f;
    content: "";
    height: 8px;
    left: 0;
    margin: 0;
    position: absolute;
    top: 2px;
    width: 2px;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 700ms ease-in-out;
    -moz-transition: all 700ms ease-in-out;
    -ms-transition: all 700ms ease-in-out;
    -o-transition: all 700ms ease-in-out;
    transition: all 700ms ease-in-out;
}
.category li a:after{
    background: #b5967f;
    content: "";
    height: 8px;
    left: 3px;
    margin: 0;
    position: absolute;
    top: 2px;
    width: 1px;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 700ms ease-in-out;
    -moz-transition: all 700ms ease-in-out;
    -ms-transition: all 700ms ease-in-out;
    -o-transition: all 700ms ease-in-out;
    transition: all 700ms ease-in-out;
}
.category li a:hover{
    padding-left: 15px;
    color: #434343;
}
.category li a:hover:after,
.category li a:hover:before{
    visibility: visible;
    opacity: 1;
}
.flickImg{
    width: 100%;
    clear: both;
    display: table;
}
.flickImg a{
    float: left;
    margin-bottom: 10px;
    margin-right: 10px;
    width: 80px;
}
.singlPost{
    margin-bottom: 20px;
}
.singlPost h4 {
    color: #434343;
    font-size: 13px;
    font-weight: 400;
    line-height: 11px;
    padding-bottom: 5px;
    text-transform: uppercase;
}
.singlPost p{
    font-size: 13px;
    font-weight: 400;
    color: #979797;
}
.tags{
    clear: both;
    display: table;
    position: relative;
    width: 100%;
}
.tags li{
    float: left;
}
.tags li a{
    background: #f4f4f4 none repeat scroll 0 0;
    border-bottom: 1px solid #e7e7e7;
    color: #434343;
    display: inline-block;
    font-size: 13px;
    line-height: 11px;
    margin-bottom: 15px;
    margin-right: 15px;
    padding: 14px;
    text-transform: capitalize;
    font-weight: 400;
}
.tags li a:hover{
    color: #b5967f;
}
.tweets{}
.tweets p{
    color: #979797;
    font-size: 13px;
    font-weight: 400;
    margin-bottom: 22px;
    margin-top: -12px;
}
.tweets p a{
    color: #b5967f;
}
.tweets p a:hover{
    color: #434343;
}
.tweets p:last-child{
    margin-bottom: 0;
}
.widget.customMargin{
    margin-bottom: 40px;
}

/************************** Home Two ************************/
.overlay{
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: url(../images/bg/dots.png) repeat scroll center center;
}
.home2 .videoDes p a {
    float: right;
    margin-right: 0;
    margin-top: -10px;
}
.home2 .tesDetails{
    text-align: left;
    float: left;
    position: relative;
}
#testimonialSlider.home2 .tesDetails:before{
    left: 0px;
    margin: 0;
    z-index: 13;
}
#testimonialSlider.home2 .carousel-control.left {
    left: auto;
    right: 40px;
}
#testimonialSlider.home2 .carousel-control.right{
    left: auto;
    right: 0px;
}
#testimonialSlider.home2:after {
    left: 20.4%;
    margin: 0;
}
.testimonialController{
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    height: 30px;
}
.tesConMain{
    position: relative;
    width: 100%;
}
.home2#contact{
    position: relative;
    background: rgba(0, 0, 0, 0) url("../images/bg/contact2.jpg") no-repeat scroll center center / cover ;
}
.darkOverlay{
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: rgba(67,67,67,.8);
}
.iconSection.home2 {
    position: relative;
    background: url("../images/bg/serviceBg.jpg") no-repeat fixed center center / cover ;
}
/*********** Home three **************/
.titleIcon.home3{
    padding-bottom: 52px;
    position: relative;
}
.titleIcon.home3 i:before {
    font-size: 30px;
}
.titleIcon.home3::after {
    border: 2px solid #434343;
    border-radius: 50%;
    content: "";
    height: 85px;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    top: -32px;
    width: 85px;
}
.titleIcon.home3::before {
    border: 1px solid #434343;
    border-radius: 50%;
    content: "";
    height: 75px;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    top: -27px;
    width: 75px;
}
#testimonialSlider.home3 .carousel-control {
    top: auto;
    bottom: 30px;
}
#testimonialSlider.home3 .carousel-control.left {
    left: -37px;
    margin: 0 auto;
    right: 0;
}
#testimonialSlider.home3 .carousel-control.right {
    left: 0;
    margin: 0 auto;
    right: -38px;
}
.inputa input[type="text"]:focus, .inputa input[type="email"]:focus,.searchDiv input[type="text"]:focus,.messagebox textarea:focus{
    outline: none;
}


/* Switcher */
.switherDive{
    width: 216px;
    height: 160px;
    background: #FFF;
    border: 1px solid #e7e7e7;
    border-left: none;
    top: 350px;
    left: -216px;
    position: fixed;
    z-index: 999;
}
#switch{
    width: 50px;
    height: 50px;
    position: absolute;
    top: -1px;
    right: -50px;
    border: 1px solid #e7e7e7;
    text-align: center;
    background: url(../images/settings.png) no-repeat center center #f8f8f8;
}
.switherDive h2{
    color: #434343;
    font-size: 17px;
    font-weight: 700;
    height: 50px;
    line-height: 14px;
    padding: 20px 0 16px;
    text-align: center;
    text-transform: uppercase;
}
.collorsSet{
    position: relative;
    width: 100%;
    padding-top: 20px;
    padding-left: 30px;
    padding-right: 30px;
}
.collorsSet a{
    width: 23px;
    height: 23px;
    float: left;
    border: 2px solid #b5967f;
    margin-right: 10px;
    border-radius: 50%;
    margin-bottom: 10px;
    background:  #b5967f;
}
.collorsSet a.color1{

}
.collorsSet a.color1:hover, .collorsSet a.color1.active{
    background: #FFF;
}
.collorsSet a.color2{
    border-color: #e85639;
    background: #e85639;
}
.collorsSet a.color2:hover, .collorsSet a.color2.active{
    background: #FFF;
}
.collorsSet a.color3{
    border-color: #434343;
    background: #434343;
}
.collorsSet a.color3:hover, .collorsSet a.color3.active{
    background: #FFF;
}
.collorsSet a.color4{
    border-color: #a3c83a;
    background: #a3c83a;
}
.collorsSet a.color4:hover, .collorsSet a.color4.active{
    background: #FFF;
}
.collorsSet a.color5{
    border-color: #fcc012;
    background: #fcc012;
}
.collorsSet a.color5:hover, .collorsSet a.color5.active{
    background: #FFF;
}
.collorsSet a.color6{
    border-color: #804b90;
    background: #804b90;
}
.collorsSet a.color6:hover, .collorsSet a.color6.active{
    background: #FFF;
}
.collorsSet a.color7{
    border-color: #21cacd;
    background: #21cacd;
}
.collorsSet a.color7:hover, .collorsSet a.color7.active{
    background: #FFF;
}
.collorsSet a.color8{
    border-color: #ca75d2;
    background: #ca75d2;
}
.collorsSet a.color8:hover, .collorsSet a.color8.active{
    background: #FFF;
}
.collorsSet a.color9{
    border-color: #fe723a;
    background: #fe723a;
}
.collorsSet a.color9:hover, .collorsSet a.color9.active{
    background: #FFF;
}
.collorsSet a.color10{
    border-color: #423a95;
    background: #423a95;
}
.collorsSet a.color10:hover, .collorsSet a.color10.active{
    background: #FFF;
}
/*************** Loader ************************/
.loaderArea{
    background: #fff;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 99999;
}
.loader {
    position: absolute;
    width: 150px;
    height: 20px;
    top: 45%;
    left: 45%;
}

.loader div {
    z-index: 1;
    width: 100%;
    height: 100%;
}

.loader span {
    z-index: -1;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    display: inline-block;
    position: absolute;
}

.loader span:nth-child(1) {
    background-color: #4887d7;
    -webkit-animation: orbit 1s infinite linear 0.2s, move 2.5s infinite ease-in-out alternate 0.2s;
    animation: orbit 1s infinite linear 0.2s, move 2.5s infinite ease-in-out alternate 0.2s;
}

.loader span:nth-child(2) {
    background-color: #7ba9e4;
    -webkit-animation: orbit 1s infinite linear 0.4s, move 2.5s infinite ease-in-out alternate 0.4s;
    animation: orbit 1s infinite linear 0.4s, move 2.5s infinite ease-in-out alternate 0.4s;
}

.loader span:nth-child(3) {
    background-color: #c4deff;
    -webkit-animation: orbit 1s infinite linear 0.6s, move 2.5s infinite ease-in-out alternate 0.6s;
    animation: orbit 1s infinite linear 0.6s, move 2.5s infinite ease-in-out alternate 0.6s;
}

@-webkit-keyframes orbit {
    0% {
        -webkit-transform: translate(0, -15px) scale(1.2, 1.2);
        transform: translate(0, -15px) scale(1.2, 1.2);
        z-index: 1;
    }
    50% {
        -webkit-transform: translate(0, 25px) scale(1, 1);
        transform: translate(0, 25px) scale(1, 1);
        z-index: -1;
    }
    100% {
        -webkit-transform: translate(0, -15px) scale(1.2, 1.2);
        transform: translate(0, -15px) scale(1.2, 1.2);
        z-index: -1;
    }
}

@keyframes orbit {
    0% {
        -webkit-transform: translate(0, -15px) scale(1.2, 1.2);
        transform: translate(0, -15px) scale(1.2, 1.2);
        z-index: 1;
    }
    50% {
        -webkit-transform: translate(0, 25px) scale(1, 1);
        transform: translate(0, 25px) scale(1, 1);
        z-index: -1;
    }
    100% {
        -webkit-transform: translate(0, -15px) scale(1.2, 1.2);
        transform: translate(0, -15px) scale(1.2, 1.2);
        z-index: -1;
    }
}
@-webkit-keyframes move {
    from {
        left: 0px;
    }
    to {
        left: 150px;
    }
}
@keyframes move {
    from {
        left: 0px;
    }
    to {
        left: 150px;
    }
}










.ext-1 {
    direction: rtl;
    float: right;
    text-align: right;
}

.ext-2 {
    direction: rtl;
    text-align: right;
}

.ext-3 {
    text-align: justify;
	direction: rtl;
}
.ext-0 {
    text-align: left;
}

.ext-4 {
    text-align: center;
}

@font-face {
    font-family: 'dinar';
    src: url('../fonts/dinar.eot');
    src: url('../fonts/dinar.eot?#iefix') format('embedded-opentype'),
         url('../fonts/dinar.woff') format('woff'),
         url('../fonts/dinar.ttf') format('truetype'),
         url('../fonts/dinar.svg#dinar') format('svg');
    font-weight: normal;
    font-style: normal;
}