/*
Theme Name: Grand
Date: 27/4/2016
Author: Ahmed farouk
Author URI: www.afarouk-codes.tk
Description: Mobile App  & web solutions...

*/


/*============ Loading with logo ===========*/

.cssload-thecube {
    width: 85px;
    height: 85px;
    margin: 0 auto;
    top: 40%;
    position: relative;
}

.cssload-thecube .cssload-cube {
    position: relative;
}

.cssload-thecube .cssload-cube {
    float: left;
    width: 50%;
    height: 50%;
    position: relative;
    transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
}

.cssload-thecube .cssload-cube:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 50px;
    width: 100%;
    height: 100%;
    background-color: #F37124;
    animation: cssload-fold-thecube 2.76s infinite linear both;
    -o-animation: cssload-fold-thecube 2.76s infinite linear both;
    -ms-animation: cssload-fold-thecube 2.76s infinite linear both;
    -webkit-animation: cssload-fold-thecube 2.76s infinite linear both;
    -moz-animation: cssload-fold-thecube 2.76s infinite linear both;
    transform-origin: 100% 100%;
    -o-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
}

.cssload-thecube .cssload-c2 {
    transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
}

.cssload-thecube .cssload-c3 {
    transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
}

.cssload-thecube .cssload-c4 {
    transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
}

.cssload-thecube .cssload-c1:before {
    background-image: url(../../img/logo-icon_01.png);
    background-size: cover;
}

.cssload-thecube .cssload-c2:before {
    animation-delay: 0.35s;
    -o-animation-delay: 0.35s;
    -ms-animation-delay: 0.35s;
    -webkit-animation-delay: 0.35s;
    -moz-animation-delay: 0.35s;
    background-image: url(../../img/logo-icon_02.png);
    background-size: cover;
}

.cssload-thecube .cssload-c3:before {
    animation-delay: 0.69s;
    -o-animation-delay: 0.69s;
    -ms-animation-delay: 0.69s;
    -webkit-animation-delay: 0.69s;
    -moz-animation-delay: 0.69s;
    background-image: url(../../img/logo-icon_04.png);
    background-size: cover;
}

.cssload-thecube .cssload-c4:before {
    animation-delay: 1.04s;
    -o-animation-delay: 1.04s;
    -ms-animation-delay: 1.04s;
    -webkit-animation-delay: 1.04s;
    -moz-animation-delay: 1.04s;
    background-image: url(../../img/logo-icon_03.png);
    background-size: cover;
}

@keyframes cssload-fold-thecube {
    0%,
    10% {
        transform: perspective(136px) rotateX(-180deg);
        opacity: 0;
    }
    25%,
    75% {
        transform: perspective(136px) rotateX(0deg);
        opacity: 1;
    }
    90%,
    100% {
        transform: perspective(136px) rotateY(180deg);
        opacity: 0;
    }
}

@-o-keyframes cssload-fold-thecube {
    0%,
    10% {
        -o-transform: perspective(136px) rotateX(-180deg);
        opacity: 0;
    }
    25%,
    75% {
        -o-transform: perspective(136px) rotateX(0deg);
        opacity: 1;
    }
    90%,
    100% {
        -o-transform: perspective(136px) rotateY(180deg);
        opacity: 0;
    }
}

@-ms-keyframes cssload-fold-thecube {
    0%,
    10% {
        -ms-transform: perspective(136px) rotateX(-180deg);
        opacity: 0;
    }
    25%,
    75% {
        -ms-transform: perspective(136px) rotateX(0deg);
        opacity: 1;
    }
    90%,
    100% {
        -ms-transform: perspective(136px) rotateY(180deg);
        opacity: 0;
    }
}

@-webkit-keyframes cssload-fold-thecube {
    0%,
    10% {
        -webkit-transform: perspective(136px) rotateX(-180deg);
        opacity: 0;
    }
    25%,
    75% {
        -webkit-transform: perspective(136px) rotateX(0deg);
        opacity: 1;
    }
    90%,
    100% {
        -webkit-transform: perspective(136px) rotateY(180deg);
        opacity: 0;
    }
}

@-moz-keyframes cssload-fold-thecube {
    0%,
    10% {
        -moz-transform: perspective(136px) rotateX(-180deg);
        opacity: 0;
    }
    25%,
    75% {
        -moz-transform: perspective(136px) rotateX(0deg);
        opacity: 1;
    }
    90%,
    100% {
        -moz-transform: perspective(136px) rotateY(180deg);
        opacity: 0;
    }
}




.box {
    display: block;
    padding: 10px;
    text-align: center;
}

.box h4 {
    margin-bottom: 0;
}

.box p {
    color: black;
    font-weight: 300;
   
}


.box h1 {
    font-size: 20px;
}


/* Box Circle Icon */

.box .icon.circle-mode-box {
    position: relative;
    display: inline-block;
    margin-bottom: 20px;
    width: 64px;
    height: 64px;
    background: transparent;
    border: 2px solid rgba(243, 113, 36, 0.5);
    -webkit-transition: background 0.15s ease-in-out 0s, border 0.15s ease-in-out 0s;
    -moz-transition: background 0.15s ease-in-out 0s, border 0.15s ease-in-out 0s;
    -o-transition: background 0.15s ease-in-out 0s, border 0.15s ease-in-out 0s;
    transition: background 0.15s ease-in-out 0s, border 0.15s ease-in-out 0s;
}

.box .icon.circle-mode-box i {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -12px 0 0 -12px;
    font-size: 24px;
    -webkit-transition: color 0.15s ease-in-out 0s;
    -moz-transition: color 0.15s ease-in-out 0s;
    -o-transition: color 0.15s ease-in-out 0s;
    transition: color 0.15s ease-in-out 0s;

}

.box:hover .icon.circle-mode-box,
.box:active .icon.circle-mode-box,
.box:focus .icon.circle-mode-box {
    border-color: #F37124;
    background: #F37124;
}

.box:hover .icon.circle-mode-box i,
.box:active .icon.circle-mode-box i,
.box:focus .icon.circle-mode-box i {
    color: #FFFFFF !important;
}

/* Box Standard Icons */

.box.standard-icon i {
    font-size: 22px;
    margin-right: 8px;
    vertical-align: -2px;
}


/* Box Only Icons */

.box .icon.icon-only-mode-box {
    font-size: 36px;
    margin-bottom: 20px;
}

.box.listed-left.only-icon .icon.icon-only-mode-box,
.box.listed-right.only-icon .icon.icon-only-mode-box {
    margin-bottom: 0;
}


/* Box Icons Left and Right with Circle and Icons Only */

.box.listed-left {
    display: block;
    padding: 30px 0;
    text-align: left;
}

.box.listed-left .icon {
    float: left;
    text-align: left;
}

.box.listed-right {
    display: block;
    padding: 30px 0;
    text-align: right;
}

.box.listed-right .icon {
    float: right;
    text-align: center;
}

.box.listed-left.circle-icon .box-text {
    padding-left: 90px;
}

.box.listed-right.circle-icon .box-text {
    padding-right: 90px;
}

.box.listed-left.only-icon .box-text {
    padding-left: 60px;
}

.box.listed-right.only-icon .box-text {
    padding-right: 60px;
}

/* Boxed Version */

.box.boxed-version {
    position: relative;
    background: #FFFFFF;
    border: 1px solid #EDEDED;
    display: block;
    padding: 30px 30px 20px;
    margin: 30px 0;
    text-align: center;
}

.box.boxed-version .icon-boxed {
    margin-bottom: 20px;
}

.box.boxed-version .icon-boxed i {
    color: #F05253;
    font-size: 32px;
    vertical-align: middle;
}

.box.listed-left .icon {
    float: left;
    text-align: left;
    margin-left: 10px
}



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




/* Fade In */

.fade_in.animate {
    -webkit-animation: fadeIn 0.65s ease forwards;
    -moz-animation: fadeIn 0.65s ease forwards;
    animation: fadeIn 0.65s ease forwards;
}

@-webkit-keyframes fadeIn {
    to {
        opacity: 1;
    }
}

@-moz-keyframes fadeIn {
    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}


/* Move Left */

.move_left.animate {
    -webkit-transform: translateX(-200px);
    -moz-transform: translateX(-200px);
    transform: translateX(-200px);
    -webkit-animation: moveLeft 0.65s ease forwards;
    -moz-animation: moveLeft 0.65s ease forwards;
    animation: moveLeft 0.65s ease forwards;
}

@-webkit-keyframes moveLeft {
    to {
        -webkit-transform: translateX(0);
        opacity: 1;
    }
}

@-moz-keyframes moveLeft {
    to {
        -moz-transform: translateX(0);
        opacity: 1;
    }
}

@keyframes moveLeft {
    to {
        transform: translateX(0);
        opacity: 1;
    }
}


/* Move Right */

.move_right.animate {
    -webkit-transform: translateX(200px);
    -moz-transform: translateX(200px);
    transform: translateX(200px);
    -webkit-animation: moveLeft 0.65s ease forwards;
    -moz-animation: moveLeft 0.65s ease forwards;
    animation: moveLeft 0.65s ease forwards;
}

@-webkit-keyframes moveRight {
    to {
        -webkit-transform: translateX(0);
        opacity: 1;
    }
}

@-moz-keyframes moveRight {
    to {
        -moz-transform: translateX(0);
        opacity: 1;
    }
}

@keyframes moveRight {
    to {
        transform: translateX(0);
        opacity: 1;
    }
}


/* Move Up */


/*-----multi progress ------*/

.progress {
    height: 100%;
    width: 100%;
    text-align: center;
    direction: rtl;
}

.progress h1 {
    border-top: double 4px;
    border-bottom: double 4px;
    width: 363px;
    margin: 0 auto;
    margin-bottom: 50px
}

.progress .circle,
.progress .bar {
    display: inline-block;
    background: #fff;
    width: 100px;
    height: 100px;
    margin-top: 20px;
    border-radius: 50px;
    border: 1px solid #d5d5da;
    margin-bottom: 85px
}

.progress .bar {
    position: relative;
    top: -50px;
    width: 74px;
    height: 1px;
    margin: 0 -5px 17px -5px;
    border-left: none;
    border-right: none;
    border-radius: 0;
    transition: width 1s linear;
    -moz-transition: width 1s linear;
    -webkit-transition: width 1s linear;
}

.progress .circle .label {
    display: inline-block;
    width: 90px;
    height: 90px;
    line-height: 75px;
    border-radius: 50px;
    margin-top: 5px;
    color: #b5b5ba;
    font-size: 48px;
}

.progress .circle .title {
    color: #b5b5ba;
    font-size: 13px;
    line-height: 30px;
    display: inline-flex;
}




/*======= Qodrat page ===========*/
.mockup-bg-qodrat {
    background-image: url(../../img/mockup-qodrat-bg.png);
    background-repeat: no-repeat;
    height: 500px;
    background-size: cover !important;
}

/*=======End Qodrat page ===========*/

/*====== Women shop =============*/
.womenShop-logo {
    max-width: 150px;
    height: 145px;
    margin: 0 auto;
}

/*=====  end women shop =====*/

/*====== personal app =============*/
.personalApp-logo {
    max-width: 130px;
    height: 145px;
    margin: 0 auto;
}

/*=====  end personal app =====*/




/*=======End Khdmaty page ===========*/

/*======= polished==========*/
.mockup-bg-polished {
    background-repeat: no-repeat;
    height: 500px;
    background-size: cover !important;
}

/*=======End My Staff==========*/



/*==== Iphone-img ======*/
.Iphone-img {
    z-index: 10;
    top: 212px;
    position: relative;
}
.Iphone-img img {
    max-width: 139% !important;
}

/*===  handsfree ===*/

/*=====  tablet video =======*/
.tablet-video {
    position: relative;
    top: 0px;
    left: 38px;
}
.Iphone-img {
    position: absolute;
    top: 56%;
    z-index: 10;
}
@media (max-width:1200px) {
    .tablet-video>iframe {
        left: 8.2% !important;
        top: 13% !important;
        height: 76% !important;
    }
}
@media (max-width:892px) {
    .Iphone-img {
       /* top: 176px !important; */
    }
}
@media (max-width:892px) {
    .Iphone-img {
          top: 77% !important;
    }
    
    .tablet-video {
        top: 52px !important;
    }
}
@media (min-width:893px) and (max-width:1080px) {
    .Iphone-img {
        position: absolute;
       /* top: 207px; */
        z-index: 10;
    }
}
@media (max-width:768px) {
    
    
    
        
    .worksSlider{ height: 474px!important;
    padding-bottom: 10%;
}
    
    
    
    .member .member-info p:before, .member .member-info .mb-content {}
    
        
 .member .member-info {
  
            min-height: 290px;}


h1,
.h1 {

    font-size: 35px;
}



	.ias-content-layers {
    	  float: none !important;
  	  width: 100% !important;
	}


.ia-heading {
    text-align: center;
}



    .videoMobile {
           top: 2px !important;
    width: 80%!important;
    left: 7%;
    }
    
    .Iphone-img {
     top: 80% !important;  
    }
}
@media (max-width:480px) {
    
    
    
    .contactH>h2{text-align: right !important;     padding-top: 15px;}
    
    .video-button .play>svg{display: none}
    
   i.fa-play-circle-o{visibility: hidden}
    
    
        .ia-heading h2{text-align: center}
    
    .testomenial h2:before {
    width: 160px !important;
    left: 22%}
    
    
    .mshare3 h2:before {
    width: 173px !important;
    left:20%}
     
    .mAppBtn1{  
    margin: 0;
    float: left;
        padding: 7px 17px;
    font-size: 14px;
    margin-right: 0 !important;
    margin-left: 7% !important;
    }
    
    
    .mAppBtn2{    
        float: right;
 margin-right: 6% !important;
    font-size: 14px;}
    
    
    
     .videoMobile {
    top: -143px !important;
    width: 65%!important;
    left: 13%;
    }
    
    
    .cartoon-employee{padding:4px !important}
    
     .employee-oneSlide{padding:30px}
    
    
      .member .member-info h2:before{    
        content: '';
    position: absolute;
        bottom: 131px;
    left: 50%;
    margin-left: -30px;
    width: 60px;
    height: 2px;
    background-color: #F37124;}
    
    
    .member .member-info p{padding-top: 10px;     margin-bottom: 4px;}
    
    .wpb_wrapper-employeeR, .wpb_wrapper-employeeL{padding: 4px}
    
    
       .member .member-info {
  
    padding: 30px 0px 0 0;
    padding-bottom: 20px;
		  

}
    
    .social-icon {
  
  margin: 2px !important;
  
}
    
    
    .member .member-info .member-name{font-size: large}
    
    
    
    .tablet-video {
      
    }
    
    .Iphone-img {
        top: 81% !important;
        position: absolute;
        z-index: 10;
    }



.ocr_slide .block_new, .oca_slide .block_new, .nili_slide .block_new{right:30%}

.how_much_slide .block_new{
	right: 22%;
    bottom: 221px;}


}



.col-top {
    margin-top: 50px;
}

@media (max-width: 800px) {


    .col-top {
        top: 0px !important;
        margin-top: 0px !important;
    }
}