body {
    padding-top: 4%;
    width: 100%;
    height: 100%;
    color: #555;
    background-color: #fff;
    direction: rtl;
}
html,
body { height: 100% }
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    text-transform: uppercase;
}
a {
    text-decoration: none;
    font-family: 'Open Sans', sans-serif;
    -webkit-transition: all 0.36s;
    transition: all 0.36s;
}
a:hover {
    color: #fff;
    text-decoration: none;
}
a:focus {
    outline: none;
    text-decoration: none;
    color: #fff;
}
p { line-height: 2 ;
    direction: rtl;
    font-family: title100;
    text-align: justify;
}
ul,
li {
    margin: 0;
    padding: 0;
    font-family: title100;
    padding-bottom: 10px;
}
.f700{
    font-family: title700;
}
.f400{
    font-family: title400;
}
.f100{
    font-family: title100;
}
fieldset {
    border: 0 none;
    margin: 0 auto;
    padding: 0;
}
.section-padding { padding: 40px 0



}
.section-title { margin-bottom: 10px;text-align: right; }
.section-title h2  {
    margin-bottom: 10px;
    padding-bottom: 15px;
    font-size: 36px;
    position: relative;
}
.section-title h2:after {
    border-bottom: 3px solid #e63b34;
    bottom: 0;
    content: "";
    height: 3px;
    right:0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    width: 10%;
}
.section-title h3  {
    margin-bottom: 10px;
    padding-bottom: 15px;
    position: relative;
}
.section-title h3:after {
    border-bottom: 3px solid #e63b34;
    bottom: 0;
    content: "";
    height: 3px;
    right:0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    width: 10%;
}
.section-title p {
    margin: auto;
    width: 100%;
}
.breadcrumb-main{
    background:url(../img/bg/slide1.jpg);
    background-position: center center;
    background-size: cover;
    position: relative;
    height:  350px;
    z-index:1;
}
.breadcrumb-main:after {
    background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0;
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    z-index: -1;
}
.breadcrumb-title{ padding-top: 200px }
.breadcrumb-title h2{
    font-weight: 700;
    color: #fff;
}
.breadcrumb-title p,
.breadcrumb-title p a{ color: #fff }
.button{
    font-family: 'Open Sans', sans-serif;
    text-transform: uppercase;
    display: inline-block;
    padding: 10px 10px;
    position:relative;
    font-weight: 700;
    font-size: 13px;
    color: #333;
    letter-spacing:1px;
    background: transparent;
    border: 1px solid #FFF;
    -webkit-transition: 0.36s;
    transition:0.36s;
}
.button:focus { color:#333 }
.button:hover {
    color:#fff;
    background: #333;
}
.owl-carousel .item  {
    display: block;
    width: 100%;
    height: auto;
}
#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background: #fff;
}
.loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-top-color: #3498db;
    z-index: 1001;
}
.spinner-cube-grid.spinner {
    width: 80px;
    height: 80px;
    margin: 0 auto;
}
.spinner-cube-grid .cube {
    width: 33%;
    height: 33%;
    background-color: #333;
    float: left;
    -webkit-animation: cubeGridScaleDelay 1.3s infinite ease-in-out;
    animation: cubeGridScaleDelay 1.3s infinite ease-in-out;
}
.spinner-cube-grid .cube:nth-child(1) {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s; }
.spinner-cube-grid .cube:nth-child(2) {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s; }
.spinner-cube-grid .cube:nth-child(3) {
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s; }
.spinner-cube-grid .cube:nth-child(4) {
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s; }
.spinner-cube-grid .cube:nth-child(5) {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s; }
.spinner-cube-grid .cube:nth-child(6) {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s; }
.spinner-cube-grid .cube:nth-child(7) {
    -webkit-animation-delay: 0s;
    animation-delay: 0s; }
.spinner-cube-grid .cube:nth-child(8) {
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s; }
.spinner-cube-grid .cube:nth-child(9) {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s; }

@keyframes cubeGridScaleDelay {
    0%, 70%, 100% {
        -webkit-transform: scale3D(1, 1, 1);
        transform: scale3D(1, 1, 1);
    }

    35% {
        -webkit-transform: scale3D(0, 0, 1);
        transform: scale3D(0, 0, 1);
    }
}
.loaded .loader {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-transition: all 1.3s ease-out;
    transition: all 1.3s ease-out;
}
.loaded #loader-wrapper {
    visibility: hidden;
    -webkit-transition: all 0.9s ease-out;
    transition: all 0.9s ease-out;
}
/*
* -------------------------------------------------------------
*    01. END GENAREL CSS STYLE
* -------------------------------------------------------------
*/
/*
* -------------------------------------------------------------
*    02. START HEADER AREA CSS STYLE
* -------------------------------------------------------------
*/
.header-area { height: 100%; }
.header-top-bar {
    background: #333 none repeat scroll 0 0;
    color: #fff;
    font-size: 13px;
    font-weight: 300;
    padding: 10px 0;
}
.top-social-icon a {
    color: #fff;
    display: inline-block;
    margin-right: 8px;
    -webkit-transition: 0.36s;
    -o-transition: 0.36s;
    transition: 0.36s;
}
.top-social-icon a:hover {
    transform: scale(1.1);
}
.header-top-cart ul li a{ color: #fff }
.header-top-info i {
    margin-left: 20px;
    margin-right: 5px;
}
.shop-cart i { font-size: 16px }
.shop-cart > span {
    top: 0;
    right: 0;
    position: absolute;
    background: #fff none repeat scroll 0 0;
    border-radius: 50%;
    color: #333;
    display: inline-block;
    font-size: 10px;
    height: 18px;
    letter-spacing: 0;
    line-height: 16px;
    text-align: center;
    width: 18px;
    margin-top: -6px;
}
.home-slide-area,
.home-slide-area div { height: 100% }
.home-slide-area div.home-display-table-cell,
.home-slide-area div.home-display-table-cell div { height: auto }
.single-slide-bg {
    position: relative;
    z-index: 1;
}
.single-slide-bg:after {
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    height: 100%;
    width: 100%;
    content: "";
    z-index: -1;
    left: 0;
    top: 0;
}
.home-display-table {
    width: 100%;
    height: 100%;
    display: table;
}
.home-display-table-cell {
    display: table-cell;
    vertical-align: middle;
}
.slide-bg1 {
    background: url(../img/bg/slide1.jpg) scroll 0 0;
    background-size: cover;
}
.slide-bg2 {
    background: url(../img/bg/slide2.jpg) scroll 0 0;
    background-size: cover;
}
.slide-bg3 {
    background: url(../img/bg/slide3.jpg) scroll 0 0;
    background-size: cover;
}
#home-carousel .item p {
    color: #fff;
    font-size: 25px;
}
#home-carousel .item h2 {
    width: 70%;
    color: #fff;
    font-size: 60px;
    font-weight: 300;
    margin: 0 auto 30px;
}
#home-carousel .item h2 span { font-weight: 900; }
#home-carousel .item .button { color: #fff }
#home-carousel .carousel-indicators > li { border-radius: 0; }
.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;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(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;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    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);
}
.home-btn-bg {
    margin-right: 10px;
}
/*
* -------------------------------------------------------------
*    02. END HEADER AREA CSS STYLE
* -------------------------------------------------------------
*/
/*
* -------------------------------------------------------------
*    03. START BOOTSTRAP NAVIGATION OVERRIDES CSS STYLE
* -------------------------------------------------------------
*/
.header-top-area {
    position: relative;
    background: #1d1d1d;
    box-shadow: 0 0 1px 1px #1d1d1d;
    width: 100%;
    z-index: 999;
    -webkit-transition: all 0.36s ease-out;
    transition: all 0.36s ease-out;
}
.sticky-wrapper {
    position: absolute;
    width: 100%;
    z-index: 999;
}
.navbar-default {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: medium none;
    border-radius: 0;
    margin-bottom: 0;
    -webkit-transition: all 0.36s ease-in-out 0s;
    transition: all 0.36s ease-in-out 0s;
    width: 100%;
}
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus { background-color: transparent }
.navbar-brand {
    color: #fff !important;
    font-family: 'Titillium Web', sans-serif;
    font-size: 28px;
    font-weight: 700;
    padding: 30px 0;
    -webkit-transition: 0.36s;
    transition: 0.36s;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form { border-color: #fff }
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus { background-color: #fff }
.navbar-default .navbar-toggle .icon-bar { background-color: #333 }
.mainmenu li a {
    color: #fff !important;
    font-family: 'Open Sans', sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 13px;
    padding: 30px 15px;
    -webkit-transition: all 0.36s ease-in-out 0s;
    transition: all 0.36s ease-in-out 0s;
}
.mainmenu ul li:last-child a { padding-right: 0 }
.mainmenu ul.nav.navbar-nav li a:hover { color: #333 !important }
.navbar-default .navbar-toggle { background: #fff none repeat scroll 0 0 }
.is-sticky .header-top-area{
    background: #1d1d1d;
    box-shadow: 0px 3px 4.7px 0.3px rgba(0, 0, 0, 0.24);
}
.is-sticky .mainmenu li a {
    padding: 20px 15px;
    color: #666 !important;
}
.is-sticky .mainmenu ul.nav.navbar-nav li.active a { color: #333 !important }
.is-sticky .navbar-brand {
    color: #333 !important;
    font-size: 26px;
    padding: 20px 0;
}
/*
* -------------------------------------------------------------
*    03. END BOOTSTRAP NAVIGATION OVERRIDES CSS STYLE
* -------------------------------------------------------------
*/
/*
* -------------------------------------------------------------
*    04. START ABOUT AREA CSS STYLE
* -------------------------------------------------------------
*/
.about-text h3,
.skills-progress h3 { margin-bottom: 20px }
.about-text p { margin-bottom: 15px }
.about-text ul { margin-bottom: 25px }
.about-text ul li {
    font-size: 13px;
    margin-bottom: 10px;
}
.about-text li i {
    margin-right: 5px;
    color: #333;
}
.video-area iframe {
    width: 100%;
    height: 310px;
    border: medium none;
}
/*
* -------------------------------------------------------------
*    04. / END ABOUT AREA CSS STYLE
* -------------------------------------------------------------
*/
/*
* -------------------------------------------------------------
*    05. START SERVICES AREA CSS STYLE
* -------------------------------------------------------------
*/
.service-area {
    background: #f6f6f6 none repeat scroll 0 0;
    padding-bottom: 50px;
}
.single-service {
    background: #fff;
    margin-bottom: 30px;
    padding: 50px 25px;
    -webkit-transition: all 0.36s ease-in-out 0s;
    transition: all 0.36s ease-in-out 0s;
}

.single-service:hover { box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.08) }
.single-service i {
    font-size: 52px;
    color: #333;
}
.single-service h4 {
    margin: 20px 0 10px 0;
    font-size: 20px;
}
.single-service p { font-size: 16px }
a.read-more i {
    font-size: 13px;
    margin-right: 5px;
    color: #999;
    -webkit-transition: all 0.36s ease-in-out 0s;
    transition: all 0.36s ease-in-out 0s;
}
a.read-more {
    color: #999;
    font-size: 12px;
    -webkit-transition: all 0.36s ease-in-out 0s;
    transition: all 0.36s ease-in-out 0s;
}

a.read-more:hover i,
a.read-more:hover { color:#333 }
/*
* -------------------------------------------------------------
*    05. / END SERVICES AREA CSS STYLE
* -------------------------------------------------------------
*/
/*
* -------------------------------------------------------------
*    06. START SKILLS AREA CSS STYLE
* -------------------------------------------------------------
*/
.single-skill h3 { margin-top: 15px }
.progressbar {
    position: relative;
    height: 175px;
    width: 175px;
    margin: 0 auto;
    overflow: hidden;
}
.progressbar div {
    position: absolute;
    height: 175px;
    width: 175px;
    border-radius: 50%;
}
.progressbar div span {
    position: absolute;
    font-size: 25px;
    line-height: 150px;
    height: 150px;
    width: 150px;
    left: 12.5px;
    top: 12.5px;
    border-radius: 50%;
    background-color: white;
}
.progressbar .rotate {
    clip: rect(0 100px 200px 0);
}
.progressbar .left {
    clip: rect(0 100px 200px 0);
    opacity: 1;
}
.progressbar .right {
    clip: rect(0 100px 200px 0);
    transform: rotate(180deg);
    opacity: 0;
}
@keyframes
toggle {  0% {
    opacity: 0;
}
    100% {
        opacity: 1;
    }
}
/*
* -------------------------------------------------------------
*    06. / END SKILLS AREA CSS STYLE
* -------------------------------------------------------------
*/
/*
* -------------------------------------------------------------
*    07. START PORTFOLIO AREA CSS STYLE
* -------------------------------------------------------------
*/
.portfolio-area { background: #f6f6f6 none repeat scroll 0 0 }
.single-work {
    overflow: hidden;
    position: relative;
    -webkit-transition: all 0.36s ease-in-out 0s;
    transition: all 0.36s ease-in-out 0s;
}
.single-work:hover { box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.08) }
.work-overlay {
    background: rgba(255, 255, 255, 0.7) none repeat scroll 0 0;
    position: absolute;
    padding: 20px;
    height: 100%;
    width: 100%;
    bottom: 0;
    left: 0;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-transition: all 0.6s ease-in-out 0s;
    transition: all 0.6s ease-in-out 0s;
}
.single-work:hover .work-overlay {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.work-title > h4 { margin-top: 60px }
.work-title p{ margin: 0 }
.work-icon a {
    color: #666;
    display: inline-block;
    font-size: 18px;
    margin: 5px;
    -webkit-transition: all 0.36s ease-in-out 0s;
    transition: all 0.36s ease-in-out 0s;
}
.work-icon a:hover{ color: #333 !important }
.portfolio-btn a i {
    font-size: 14px;
    margin-right: 10px;
}
/*
* -------------------------------------------------------------
*    07. / END PORTFOLIO AREA CSS STYLE
* -------------------------------------------------------------
*/
/*
* -------------------------------------------------------------
*    08. START COUNT AREA CSS STYLE
* -------------------------------------------------------------
*/
.count-area {
    background: url("../img/bg/count-bg.jpg");
    background-position: center center;
    background-size: cover;
    position: relative;
    z-index: 1;
}
.count-area:after {
    background: rgba(0, 0, 0, 0.8) none repeat scroll 0 0;
    position: absolute;
    height: 100%;
    width: 100%;
    content: "";
    left: 0;
    top: 0;
    z-index: -111;
}
.counter {
    background: rgba(255, 255, 255, 0.1) none repeat scroll 0 0;
    padding: 30px;
    color: #fff;
}
.counter h2 {
    margin: 10px 0 5px 0;
    font-size: 34px;
    color: #fff;
}
.counter p {
    margin: 0;
}
.counter i {
    font-size: 40px;
}
/*
* -------------------------------------------------------------
*    08. / END COUNT AREA CSS STYLE
* -------------------------------------------------------------
*/
/*
* -------------------------------------------------------------
*    09. START TEAM AREA CSS STYLE
* -------------------------------------------------------------
*/
.single-team{
    -webkit-transition: all 0.36s ease-in-out 0s;
    transition: all 0.36s ease-in-out 0s;
}
.single-team:hover { box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.08) }
.team-overlay {
    background: #f6f6f6;
    padding: 20px;
}
.team-title { float: left }
.team-title p{
    margin: 0;
    font-size: 12px;
}
.team-social-link {
    float: right;
    margin-top: 10px;
}
.team-social-link a i {
    border: 1px solid #555;
    display: inline-block;
    text-align: center;
    line-height: 25px;
    font-size: 12px;
    height: 25px;
    width: 25px;
    color: #555;
    -webkit-transition: all 0.36s ease-in-out 0s;
    transition: all 0.36s ease-in-out 0s;
}
.team-social-link a i:hover {
    background: #333;
    border: 1px solid #555;
    color: #fff;
}
/*
* -------------------------------------------------------------
*    09. / END TEAM AREA CSS STYLE
* -------------------------------------------------------------
*/
/*
* -------------------------------------------------------------
*    10. START PRICING AREA CSS STYLE
* -------------------------------------------------------------
*/
.pricing-area { background: #f6f6f6 }
.single-pricing {
    padding: 20px 0;
    background: #fff;
    -webkit-transition: all 0.36s ease 0s;
    transition: all 0.36s ease 0s;
}
.single-pricing:hover { box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.08) }
.price {
    padding: 25px;
    -webkit-transition: all 0.6s ease 0s;
    transition: all 0.6s ease 0s;
}
.single-pricing h3 {
    border-bottom: 1px solid #ddd;
    display: inline-block;
    font-family: "Ubuntu",sans-serif;
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 3px;
    margin-bottom: 10px;
    padding: 0 0 10px;
    -webkit-transition: all 0.36s ease 0s;
    transition: all 0.36s ease 0s;
}
.price h4 {
    color: #666;
    font-size: 52px;
    -webkit-transition: all 0.36s ease 0s;
    transition: all 0.36s ease 0s;
}
.price span {
    font-size: 14px;
    display: block;
    margin-top: 10px;
}
.pricing-list {
    list-style: outside none none;
    text-align: center;
    padding: 0 25px;
}
.pricing-list li {
    border-bottom: 1px solid #eee;
    color: #161616;
    padding: 15px 0;
    -webkit-transition: all 0.36s ease 0s;
    transition: all 0.36s ease 0s;
}
.pricing-btn { padding: 25px 0 }
.single-pricing.recommended {
    box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.08);
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
}
.single-pricing.recommended .price h4,
.single-pricing:hover .price h4 { color: #333 }
/*
* -------------------------------------------------------------
*    10. / END PRICING AREA CSS STYLE
* -------------------------------------------------------------
*/
/*
* -------------------------------------------------------------
*    11. START TESTIMONIAL AREA CSS STYLE
* -------------------------------------------------------------
*/
.area1 {
    background: url("../img/bg/slide1.jpg");
    background-position: center center;
    background-size: cover;
    position: relative;
    z-index: 1;
}
.area1:after {
    background: rgba(0, 0, 0, 0.8) none repeat scroll 0 0;
    position: absolute;
    height: 100%;
    width: 100%;
    content: "";
    left: 0;
    top: 0;
    z-index: -111;
}
.area1 .item img {

}
.area1 .item h6 {
    font-weight: 400;
    margin: 10px 0 20px;
    color: #fff;
}
.area1 .item h4,
.area1 .item p { color: #fff }

//--------------------

  .area3 {
      background: url("../img/bg/back3.jpg");
      background-position: center center;
      background-size: cover;
      position: relative;
      z-index: 1;
  }
.area3:after {
    background: rgba(0, 0, 0, 0.8) none repeat scroll 0 0;
    position: absolute;
    height: 100%;
    width: 100%;
    content: "";
    left: 0;
    top: 0;
    z-index: -111;
}

.area3 .item h6 {
    font-weight: 400;
    margin: 10px 0 20px;
    color: #fff;
}
.area3 .item h4,
.area3 .item p { color: #fff }








.area3 {
    background: url("../img/bg/back3.jpg");
    background-position: center center;
    background-size: cover;
    position: relative;
    z-index: 1;
}
.area3:after {
    background: rgba(0, 0, 0, 0.8) none repeat scroll 0 0;
    position: absolute;
    height: 100%;
    width: 100%;
    content: "";
    left: 0;
    top: 0;
    z-index: -111;
}

.area3 .item h6 {
    font-weight: 400;
    margin: 10px 0 20px;
    color: #fff;
}
.area3 .item h4,
.area3 .item p { color: #fff }






.area2 {
    background: url("../img/bg/back2.jpg");
    background-position: center center;
    background-size: cover;
    position: relative;
    z-index: 1;
}
.area2:after {
    background: rgba(0, 0, 0, 0.8) none repeat scroll 0 0;
    position: absolute;
    height: 100%;
    width: 100%;
    content: "";
    left: 0;
    top: 0;
    z-index: -111;
}

.area2 .item h6 {
    font-weight: 400;
    margin: 10px 0 20px;
    color: #fff;
}
.area2 .item h4,
.area2 .item p { color: #fff }




.area4 {
    background: url("../img/bg/back4.jpg");
    background-position: center center;
    background-size: cover;
    position: relative;
    z-index: 1;
}
.area4:after {
    background: rgba(0, 0, 0, 0.8) none repeat scroll 0 0;
    position: absolute;
    height: 100%;
    width: 100%;
    content: "";
    left: 0;
    top: 0;
    z-index: -111;
}

.area4 .item h6 {
    font-weight: 400;
    margin: 10px 0 20px;
    color: #fff;
}
.area4 .item h4,
.area4 .item p { color: #fff }




.area5 {
    background: url("../img/bg/back5.jpg");
    background-position: center center;
    background-size: cover;
    position: relative;
    z-index: 1;
}
.area5:after {
    background: rgba(0, 0, 0, 0.8) none repeat scroll 0 0;
    position: absolute;
    height: 100%;
    width: 100%;
    content: "";
    left: 0;
    top: 0;
    z-index: -111;
}

.area5 .item h6 {
    font-weight: 400;
    margin: 10px 0 20px;
    color: #fff;
}
.area5 .item h4,
.area5 .item p { color: #fff }








.cutomers-rating {  margin-bottom: 10px }
.cutomers-rating i { color: #ffc207 }

#testimonial-carousel .carousel-indicators-slider,
#testimonial-carousel2 .carousel-indicators-slider,
#testimonial-carousel3 .carousel-indicators-slider {
    bottom: -40px;
}
#testimonial-carousel .carousel-indicators > li,
#testimonial-carousel2 .carousel-indicators > li,
#testimonial-carousel3 .carousel-indicators > li {
    border-radius: 0;
}
/*
* -------------------------------------------------------------
*    11. / END TESTIMONIAL AREA CSS STYLE
* -------------------------------------------------------------
*/
/*
* -------------------------------------------------------------
*    12. START BLOG AREA CSS STYLE
* -------------------------------------------------------------
*/
.blog-area { background: #f6f6f6 }
.single-blog {
    background: #fff;
    -webkit-transition: all 0.36s ease 0s;
    transition: all 0.36s ease 0s;
}
.single-blog:hover { box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.08) }
.single-blog img { padding: 10px 10px 0 10px }
.blog-content { padding: 25px }
.blog-content span {
    font-size: 12px;
    color: #333;
}
.blog-content span i { color: #333 }
.blog-content a h2 {
    font-size: 20px;
    margin: 5px 0 15px;
}
.blog-btn { margin-top: 30px }
.blog-btn a i {
    font-size: 14px;
    margin-right: 10px;
}
/*
* -------------------------------------------------------------
*    12. / END BLOG AREA CSS STYLE
* -------------------------------------------------------------
*/
/*
* -------------------------------------------------------------
*    13. START PRODUCTS AREA CSS STYLE
* -------------------------------------------------------------
*/
.shop-grid .shop-all{
    display: none;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
.shop-filter ul {
    list-style: outside none none;
    margin-bottom: 10px;
    text-align: center;
}
.shop-filter ul li {
    margin: 5px;
    cursor: pointer;
    font-size: 12px;
    padding: 10px 20px;
    display: inline-block;
    border: 2px solid #f6f6f6;
    text-transform: uppercase;
    -webkit-transition: all 0.36s ease-in-out 0s;
    transition: all 0.36s ease-in-out 0s;
}
.shop-filter ul li.active, .shop-filter ul li:hover {
    background: #333 none repeat scroll 0 0;
    border: 2px solid #333;
    color: #fff;
}
.single-product {
    background: #f6f6f6;
    position: relative;
    overflow: hidden;
    margin-top: 30px;
    -webkit-transition: all 0.36s ease 0s;
    transition: all 0.36s ease 0s;
}
.single-product:hover {
    background: transparent;
    box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.08);
}
.product-img { position: relative }
.product-overlay {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    opacity: 0;
    -webkit-transition: all 0.36s ease-in-out 0s;
    transition: all 0.36s ease-in-out 0s;
}
.single-product:hover .product-overlay{
    background: rgba(255,255,255, 0.7);
    opacity: 1;
}
.product-overlay > a.button { margin-top: 43% }
.product-info { padding: 20px }
.single-product img { padding: 10px 10px 0 10px }
.product-info h4 { margin: 5px 0 }
.product-rating li { padding: 0 }
.product-rating i { color: #ffc321 }
.product-info p { margin: 0 }
.shop-btn { margin-top: 30px }
.shop-btn a i {
    font-size: 14px;
    margin-right: 10px;
}
/*
* -------------------------------------------------------------
*    13. / END PRODUCTS AREA CSS STYLE
* -------------------------------------------------------------
*/
/*
* -------------------------------------------------------------
*    14. START PARTNER AREA CSS STYLE
* -------------------------------------------------------------
*/
.partner-area { background: #f6f6f6 }
#partner-carousel .item img {
    display: block;
    margin: 0 auto;
    width: auto;
}
.partner-carousel-table {
    display: table;
    height: 150px;
    width: 100%;
}
.partner-carousel-tablecell {
    display: table-cell;
    vertical-align: middle;
}

/*
* -------------------------------------------------------------
*    14. / END PARTNER AREA CSS STYLE
* -------------------------------------------------------------
*/
/*
* -------------------------------------------------------------
*    15. START CONTACT FORM AREA CSS STYLE
* -------------------------------------------------------------
*/
.form-control {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 1px solid #999;
    border-radius: 0;
    box-shadow: none;
    height: 45px;
    padding: 10px;
    transition: all 0.36s ease 0s;
}
.form-control::-moz-placeholder {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.form-control:hover,
.form-control:focus {
    border-color: #333;
    box-shadow: none;
}
.success {
    text-align: center;
    margin: 80px 0;
    font-size: 18px;
    font-weight: 700;
}
/*
* -------------------------------------------------------------
*    15. / END CONTACT FORM AREA CSS STYLE
* -------------------------------------------------------------
*/
/*
* -------------------------------------------------------------
*    16. START FOOTER TOP AREA CSS STYLE
* -------------------------------------------------------------
*/
.footer-top-area { background: #f6f6f6 none repeat scroll 0 0 }
.footer-widget h4 { margin-bottom: 20px }
.single-contact-info { margin-bottom: 15px }
.single-contact-info i {
    background: #333;
    text-align: center;
    margin-right: 10px;
    line-height: 40px;
    font-size: 16px;
    height: 40px;
    color: #fff;
    float: left;
    width: 40px;
}
.single-contact-info p { font-size: 12px }
.single-latest-post {
    margin-bottom: 10px;
    overflow: hidden;
}
.single-latest-post img {
    background: #f0f0f0 none repeat scroll 0 0;
    float: left;
    margin-right: 10px;
    padding: 3px;
    width: 30%;
}
.single-latest-post a h2 {
    font-size: 12px;
    margin: 5px 0;
    -webkit-transition: all 0.36s ease 0s;
    transition: all 0.36s ease 0s;
}
.single-latest-post span { font-size: 12px }
.single-latest-post span i {
    margin-right: 5px;
    font-size: 14px;
    color: #333;
}
.single-latest-post:hover a h2{ color: #333 }
.footer-widget ul li a {
    color: #666;
    display: block;
    margin-bottom: 10px;
    -webkit-transition: all 0.36s ease 0s;
    transition: all 0.36s ease 0s;
}
.footer-widget ul li a i {
    color: #333;
    margin-right: 5px;
}
.footer-widget ul li a:hover { color: #333 }

.details-single-project{ margin: 40px 0 20px }
.about-single-project h3,
.details-single-project h3 {
    margin-bottom: 20px;
}
.details-single-project li {
    color: #555;
    font-size: 14px;
    padding: 0 0 10px 0;
}
.details-single-project li a,
.details-single-project li i {
    margin-right: 10px;
    color: #333;
}
.related-projects {
    margin-top: 50px;
}
.related-projects .single-work{
    margin-bottom: 0;
}
.related-projects h3 {
    margin-bottom: 30px;
    text-align: left;
}
/*
* -------------------------------------------------------------
*    18. END PROJECT PAGE CSS STYLE
* -------------------------------------------------------------
*/

.text-back-area{
    width: 100%;
    height: 100%;
    background-image: url("../img/bg/1.jpg");
    background-size: cover;
    display: block;

    padding: 20px;
    color: #fff;
}


.fff{
    color: #fff;

}

.margin-left{margin-left: 10px;}


#cd-menu-trigger {
    position: relative;
    right: 0;
    top: 0;
    height: 100%;
    width: 60px;
    background-color: #aa120d;
    float: right;
    -webkit-transform: translateZ(0);
    -webkit-transition: -webkit-transform .4s 0s,visibility 0s .4s;
    -moz-transition: -moz-transform .4s 0s,visibility 0s .4s;
    transition: transform .4s 0s,visibility 0s .4s;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
}


.my-gallery {

}
.my-gallery img {
    width: 100%;
    height: auto;
}
.my-gallery figure {
    display: block;
    float: right;
    margin: 5 5px 5px 5;
}
.my-gallery figcaption {
    display: none;
}

#map {
    width: 100%;
    position: relative;
}
.mapPin {position: absolute;cursor: pointer; width: 3%;}
.rasElbar { top: 21%; right: 27%; }
.balteem { top: 10%; right: 84%; }
.gamasa { top: 35%; right: 49%; }

.rasElbarData { width: 50%; position: absolute; padding: 1%; background: rgba(0, 0, 0, 0.85); color: #fff; top: 22%; right: 30%; display: none; }
.rasElbarData .dataTitle { color: #de432a; font-size: 20px; }
.rasElbarData li {list-style: circle !important;}
.rasElbarData ul {padding-right: 5%}
.rasElbar:hover ~ .rasElbarData { display: block; }

.balteemData { width: 50%; position: absolute; padding: 1%; background: rgba(0, 0, 0, 0.85); color: #fff; top: 13%;right: 33%; display: none; }
.balteemData .dataTitle { color: #de432a; font-size: 20px; }
.balteemData li {list-style: circle !important;}
.balteemData ul {padding-right: 5%}
.balteem:hover ~ .balteemData { display: block; }

.gamasaData { width: 40%; position: absolute; padding: 1%; background: rgba(0, 0, 0, 0.85); color: #fff; top: 47%; right: 33%; display: none; }
.gamasaData .dataTitle { color: #de432a; font-size: 20px; }
.gamasaData li {list-style: circle !important;}
.gamasaData ul {padding-right: 5%}
.gamasa:hover ~ .gamasaData { display: block; }

.fullScreen { position: fixed; bottom: 60px; z-index: 999; left: 60px; border: 1px solid #1d1d1d; background: #e63b34; color: #fff; }
section {overflow: hidden;}
#mapOnMobile {  display: none;  }


.carousel-nav{
    position: relative;
    width: 65%;
    margin: auto;
}
.prevbtn {  position: absolute;  width: 25px !important;  left: 0;  top: -23px;}
.nextbtn {  position: absolute;  width: 29px !important;  right: 0;  top: -23px;}

.carousel-indicators {
    position: relative !important;
    width: 60% !important;
    margin: auto !important;
    bottom: 0 !important;
    left: 0;
    padding: 0;
    margin-top: 24px !important;
}

@media screen and (max-width: 600px) {
    #mapOnMobile {  display: block;  }
    #map {  display: none;  }
}

@media screen and (max-width: 400px) {
    .carousel-indicators {display: none}
    .carousel-nav {display: none}
    .item   { display: table; }
    .item .col-md-4  { display: table-footer-group; }
    .item .col-md-8 { display: table-header-group; }
    .item .section-title {  margin-top: 24px;  }
    #home-carousel .f700 {font-size: 30px}
    .articleSocialMediaIcons {display: none}
}

@media (min-width: 992px) {
    .teamWidth {  width: 20%;  }
}

.articleSocialMediaIcons {
    position: fixed;
    bottom: auto;
    z-index: 1;
    background: #f2f2f2;
    padding: 12px 9px;
    width: 50px;
    transition: all .2s ease-in-out 0s;
    -webkit-transition: all .2s ease-in-out 0s;
    -moz-transition: all .2s ease-in-out 0s;
    -ms-transition: all .2s ease-in-out 0s;
    -o-transition: all .2s ease-in-out 0s;
    z-index: 999;
    top: 32%;
    left: 0;
}

.articleSocialMediaIcons::before {
    position: absolute;
    top: 0;
    right: 0;
    visibility: hidden;
    z-index: 10;
    width: 40px;
    height: 100%;
    background: rgba(0,0,0,.5);
    content: '';
    opacity: 0;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    -webkit-transition: opacity .3s,-webkit-transform 0s .3s;
    transition: opacity .3s,transform 0s .3s;
}

.articleSocialMediaIcons .icon-fb {
    background: #3a5799;
}
.articleSocialMediaIcons a {
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-bottom: 12px;
    text-align: center;
    color: #fff;
}

.articleSocialMediaIcons .icon-fb:before {
    content: "u";
    font-size: 20px;
    line-height: 1.7;
}

.articleSocialMediaIcons .icon-tw {
    background: #1fa2f0;
}

.articleSocialMediaIcons .icon-tw:before {
    content: "v";
    font-size: 20px;
    line-height: 1.7;
}

.articleSocialMediaIcons .icon-ggl {
    background: #d55142;
}

.articleSocialMediaIcons .icon-ggl:before {
    content: "w";
    font-size: 20px;
    line-height: 1.6;
}

/* Wide Mobile Layout: 480px. */
@media only screen and (min-width: 480px) and (max-width: 767px) {
}


@media only screen and (max-width: 480px) {
    #div-gpt-ad-1505310474368-0 {
        display: none;
    }

    #div-gpt-ad-1505310474368-1 {
        display: none;
    }

    #div-gpt-ad-1505310474368-2 {
        display: none;
    }
}

@media only screen and (min-width: 480px) {
    #div-gpt-ad-1505310474368-3 {
        display: none;
    }

    #div-gpt-ad-1505310474368-4 {
        display: none;
    }

    #div-gpt-ad-1505310474368-5 {
        display: none;
    }
}