﻿
/*Reset Page*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}
ol, ul{list-style:none;}
blockquote, q{quotes:none;}
:focus{outline:0;}
ins{text-decoration:none;}
del{text-decoration:line-through;}
table{border-collapse:collapse;border-spacing:0}

@font-face {
    font-family: 'ralewayregular';
    src: url('/fonts/raleway.regular.eot?#') format('eot'), /* IE6�8 */
    url('/fonts/raleway.regular.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('/fonts/raleway.regular.woff2') format('woff2'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('/fonts/raleway.regular.ttf') format('truetype'); /* Saf3�5, Chrome4+, FF3.5, Opera 10+ */
}
/*header*/
.Clear{clear:both}
.black{display:block}
body {
	font-family: ralewayregular
}
body a{text-decoration :none}
header{display:flex;width:100%;
	   background-color:#000;
    position: ;
    z-index: 100;}
header i{;font-size:1.5em;color:#ffffff91;padding:0 2%}
#headerlogo{width:15%;z-index:1;margin-right:auto;margin-left:auto}
#headerlogo img{width:100%}
#headerR{width:33.33%;padding:0.5% 2% 0 2%;}
#headerL{;width:33.33%;padding:1.2% 2% 0 2%;text-align:center}
#divMenu{;margin:0 auto;display:table;width:80%;font-size:1.3em;margin:0 auto;z-index:1;padding:1% 2% 0 2%;display:table}	
#divMenuIn{margin:0 auto;display:table;}	


#bannerweb{background-color:black;width:100%;min-height:700px;position:relative;}
#bannerweb img{width:45%;position:absolute;bottom:0;left:50%;transform:translateX(-50%)}
#bannerweb h2{font-size:2em;color:#fff;text-align:center;padding:2% 0 1% 0}
#bannerweb h3{font-size:1.3em;color:#fff;text-align:center;padding:0 0 1% 0}
#bannerweb a{border:1px solid #d7a451;padding:1% 1%;background-color:#d7a451;border-radius:50px;color:#fff;position:absolute;left:50%;transform:translateX(-50%)}


#bannerts{background-color:#f5f5f7;width:100%;min-height:700px;position:relative}
#bannerts img{width:40%;position:absolute;bottom:-3%;left:0%;}
#bannerts h2{font-size:2em;color:#000;text-align:center;padding:2% 0 1% 0}
#bannerts p{font-size:1.3em;color:#000;text-align:center;padding:0 0 1% 0}
#bannerts a{border:1px solid #d7a451;padding:1% 1%;background-color:#d7a451;border-radius:50px;color:#fff;position:absolute;left:50%;transform:translateX(-50%)}


#bannerSEO{background-color:#000;width:100%;min-height:700px;position:relative}
#bannerSEO img{width:50%;position:absolute;bottom:0;right:0%;}
#bannerSEO h2{font-size:2em;color:#fff;text-align:center;padding:2% 0 1% 0}
#bannerSEO p{font-size:1.3em;color:#fff;text-align:center;padding:0 0 1% 0}
#bannerSEO a{border:1px solid #d7a451;padding:1% 1%;background-color:#d7a451;border-radius:50px;color:#fff;position:absolute;left:50%;transform:translateX(-50%)}





.divProjectsAll{display:flex;flex-wrap:wrap;margin:1%}
.divProjectsAll div.divProjectsMain{width:48%;margin:1%;background:#f5f5f5;}
.divProjectsAll div.divProjectsMain img{width:100%;display:block;border-radius:5px 5px 0 0;max-height:500px}
.divProjectsAll div.divProjectsMain div.divTitle{background:#f5f5f5;padding:3%;position:relative;border-radius:0 0 5px 5px;}
.divProjectsAll div.divProjectsMain div.divTitle a{font-size:2em;color:#000;}
.divProjectsAll div.divProjectsMain div.divTitle p{font-size:.85em;color:#2a2a2a;opacity:.95;margin-top:2%;}
.divProjectsAll div.divProjectsMain div.divTitle span.nav{position:absolute;right:3%;top:50%;transform:translateY(-50%);z-index:100000;background:#fff;display:flex;padding:12px 20px;text-align:center;border-radius:100px;}
.divProjectsAll div.divProjectsMain div.divTitle span.nav i{font-size:1.3em;display:inline-block}




footer{background:#000000f2;padding:1% 5%;}
footer img{width:5%;opacity:.95;margin-right:auto;margin-left:auto;display:block}
footer .linef{height:1px;background:#262626bd;width:100%;margin:1% auto;}
footer div.divFooterIn li{display:flex;}
footer div.divFooterIn li div.divT1{width:50%;text-align:left;}
footer div.divFooterIn li div.divT2{width:50%;color:#fff;}
footer div.divFooterIn li div.divT2 i{opacity:.9;margin-left:2%}
footer div.divFooterIn{width:25%;float:right;}
footer div.divFooterIn a{color:#fff;padding-bottom:1.5%;font-size:1em;opacity:.85;vertical-align:text-top;line-height:2.4em;}
footer div.divFooterIn li a:hover{padding-right:10px;color:#fff;opacity:1}
footer #divCopyright{direction:ltr !important;color:#fff;font-family:Arial;font-size:.9em;opacity:.9}
footer #divCopyright a{color:#fff}
footer .divFootersIn #divSocial{float:right;width:50%}
footer .divFootersIn #divSocial i{float:right;margin-left:2%;color:#fff;font-size:1.7em;opacity:.9;-webkit-transition:all 1s ease 0s;-moz-transition:all 1s ease 0s;-o-transition:all 1s ease 0s;transition:all 1s ease 0s}
footer .divFootersIn #divSocial i:hover{opacity:1;}
footer p{margin-top:1.5%}

/*Contact*/

#contactbanner{position:relative;}
.shadowcontact{background-color:#0000005c;position:absolute;width:100%;height:100%;z-index:1}
#mastercontact{flex-wrap:wrap;background-color:#f5f5f7}
#mastercontact h2{font-size:1.5em;color:#000;text-align:center;padding:2%}
#contact{;display:flex;width:60%;margin:0 auto}
.contact1{width:33.33%;margin:5%;}
.contact1 img{display:block;margin-right:auto;margin-left:auto}
.contact1 p{color:#00000083 ;text-align:center;padding:5% 3%}
#mastermap{margin-bottom:0%}



#masterabout{position:relative;background:#000;min-height:600px}
#masterabout img{width:40%;display:block;position:absolute;right:7%;top:23%;border-radius:10px}
.textabout{width:40%;position:absolute;left:15%;top:20%}
.textabout h2{color:white;font-size:2em;padding:2% 0 2% 0}
.textabout h3{color:white;font-size:1.8em;padding:2% 0 2% 0}
.textabout p{font-size:1.4em;color:#ffffff87;padding:0 0 5% 0}
.textabout span{border:1px solid orange;padding:2% 5%;background-color:orange;border-radius:100px;color:#fff}
.textabout a{border:1px solid #fff;padding:2% 5%;background-color:#fff;border-radius:100px;color:#000;margin-left:3%}
.textabout i{margin-right:1%}

#aboutzidex{direction:rtl;position:relative;padding:2% 5% 5% 5% }
#aboutzidex img{width:45%;display:block;position:absolute;left:5%;top:28%;border-radius:10px}
.zidextext{;width:-1%;background-color:#f5f5f7;text-align:left;margin-right:auto;margin-left:auto;margin-top:2%;padding:5% 5% 2% 5%}
.aboutzidextext{width:50%;}
.aboutzidextext h2{font-size:2em;padding:2% 0 2% 0}
.aboutzidextext h3{font-size:1.8em;padding:2% 0 2% 0}
.aboutzidextext p{font-size:1.2em;color:#00000083;padding:0 0 5% 0}
.aboutzidextext i{padding:2%}

/*Website Design*/

#masterFacialrejuvenation{;padding:1% 5%;padding-bottom:0;}
#masterFacialrejuvenation h3{text-align: center;font-size: 2em;margin-bottom: 3%;margin-top: 3% !important}
#FacialrejuvenationR .grid{display:flex;flex-wrap:wrap}
#FacialrejuvenationR{margin:0 auto;width:30%;display:flex;}
figure.effect-selena {
	background: #fff;
	width:40%;
	border-radius:5px;
	text-align:center;margin:5%

}

figure.effect-selena img {
	opacity: 0.95;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	border-radius:5px;
    width:100%
}

figure.effect-selena:hover img {
	-webkit-transform: scale3d(0.95,0.95,1);
	transform: scale3d(0.95,0.95,1);
}

figure.effect-selena h2 {
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,20px,0);
	transform: translate3d(0,20px,0);
}

figure.effect-selena p {
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: perspective(1000px) rotate3d(1,0,0,90deg);
	transform: perspective(1000px) rotate3d(1,0,0,90deg);
	-webkit-transform-origin: 50% 0%;
	transform-origin: 50% 0%;font-size:.8em;line-height: 2;}

figure.effect-selena:hover h2 {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-selena:hover p {
	opacity: 1;
	-webkit-transform: perspective(1000px) rotate3d(1,0,0,0);
	transform: perspective(1000px) rotate3d(1,0,0,0);
}


/*MENU*/
.menu {
	display: block;
}
.menu li {
 display:inline-block;
 position:relative;
 z-index:100;
}
.menu li:first-child {
 margin-left:0
}
	.menu li a {
		text-decoration: none;
		padding: 8px 12px;
		display: block;
		font-size: .9em;
		transition: all .2s ease-in-out 0s;
		color:#fff; 
		text-align: left
	}
	.menu li a:hover,
	.menu li:hover > a {
		color:#d7a451;
		background:#00000000;
		border-radius: 4px;
	}
.menu ul {
 visibility:hidden;
 opacity:0;
 margin:0;
 padding:0;
 width:220px;
 position:absolute;
 left:0;
 background:#fff;
 z-index:99;
 transform:translate(0,20px);
 transition:all .2s ease-out;
}
.menu ul:after {
 bottom:100%;
 left:12%;
 border:solid transparent;
 content:" ";
 height:0;
 width:0;
 position:absolute;
 pointer-events:none;
 border-color:rgba(255,255,255,0);
 border-bottom-color:#fff;
 border-width:6px;
 margin-left:-6px
}
.menu ul li {
 display:block;
 float:none;
 background:0;
 margin:0;
 padding:0;text-align:right;
}
.menu .sub-menu li a {
 padding:7px 15px!important
}
.menu .sub-menu {
 -webkit-box-shadow:0 7px 7px rgba(0,0,0,.15)
}
.menu ul li a {
 font-size:14px;
 font-weight:normal;
 display:block;
 color:black;
 border-bottom:1px solid rgba(0,0,0,.04)
}
	.menu ul li a:hover,
	.menu ul li:hover > a {
		background: #d7a451;
		color: #fff;
		border-radius: 0px;
	}
.menu li:hover>ul {
 visibility:visible;
 opacity:1;
 transform:translate(0,0)
}
.menu ul ul {
 left:169px;
 top:0;
 visibility:hidden;
 opacity:0;
 transform:translate(20px,20px);
 transition:all .2s ease-out
}
.menu ul ul:after {
 left:-6px;
 top:10%;
 border:solid transparent;
 content:" ";
 height:0;
 width:0;
 position:absolute;
 pointer-events:none;
 border-color:rgba(255,255,255,0);
 border-right-color:#fff;
 border-width:6px;
 margin-top:-6px
}
.menu li>ul ul:hover {
 visibility:visible;
 opacity:1;
 transform:translate(0,0)
}
.responsive-menu {
 display:none;
 width:100%;
 padding:20px 15px;
 background:#374147;
 color:#fff;
 text-transform:uppercase;
 font-weight:600
}
.responsive-menu:hover {
 background:;
 color:#fff;
 text-decoration:none
}
a.homer {
 background:#9ca3da
}

/*web*/

#masterweb{position:relative;background:#fff;min-height:600px;margin-bottom:7%}
#masterweb img{width:40%;display:block;position:absolute;right:7%;top:23%;border-radius:10px}
.textwebsite{width:40%;position:absolute;left:15%;top:20%}
.textwebsite h2{color:black;font-size:2em;padding:2% 0 2% 0}
.textwebsite h3{color:black;font-size:1.8em;padding:2% 0 2% 0}
.textwebsite p{font-size:1.4em;color:#00000087;padding:0 0 5% 0}
.textwebsite span{border:1px solid orange;padding:2% 5%;background-color:orange;border-radius:100px;color:#fff}
.textwebsite a{border:1px solid #000;padding:2% 5%;background-color:#fff;border-radius:100px;color:#000;margin-left:3%}
.textwebsite i{margin-right:1%}


#whywebsiteDesign{position: relative;background: #fff;min-height: 600px}
#whywebsiteDesign img{width:28%;display:block;position:absolute;left:11%;top:14%;border-radius:10px}
.textweb{width:40%;position:absolute;right:15%;top:20%}
.textweb h2{color:#000;font-size:2em;padding:2% 0 2% 0}
.textweb h3{color:#000;font-size:1.8em;padding:2% 0 2% 0}
.textweb p{font-size:1.4em;color:#000000be;padding:0 0 5% 0}
.textweb span{border:1px solid orange;padding:2% 5%;background-color:orange;border-radius:100px;color:#fff}
.textweb a{border:1px solid #fff;padding:2% 5%;background-color:#fff;border-radius:100px;color:#000;margin-left:3%}
.textweb i{margin-right:1%}

.web{text-align:center;font-size:2em;margin-bottom:3%;margin-top:3%}

#whyzidex{position: relative;background: #fff;min-height: 600px}
#whyzidex img{width:28%;display:block;position:absolute;right:11%;top:14%;border-radius:10px}
.textzidex{width:40%;position:absolute;left:15%;top:20%}
.textzidex h2{color:#000;font-size:2em;padding:2% 0 2% 0}
.textzidex h3{color:#000;font-size:1.8em;padding:2% 0 2% 0}
.textzidex p{font-size:1.4em;color:#000000be;padding:0 0 5% 0}
.textzidex span{border:1px solid orange;padding:2% 5%;background-color:orange;border-radius:100px;color:#fff}
.textzidex a{border:1px solid #fff;padding:2% 5%;background-color:#fff;border-radius:100px;color:#000;margin-left:3%}
.textzidex i{margin-right:1%}

/*seo*/

#masterseo{position:relative;background:;min-height:600px}
#masterseo img{width:28%;display:block;position:absolute;left:11%;top:13%;border-radius:10px}
.textseoabout{width:40%;position:absolute;right:15%;top:20%}
.textseoabout h2{color:#000;font-size:2em;padding:2% 0 2% 0}
.textseoabout h3{color:#000;font-size:1.8em;padding:2% 0 2% 0}
.textseoabout p{font-size:1.4em;color:#0000009c;padding:0 0 5% 0}
.textseoabout span{border:1px solid orange;padding:2% 5%;background-color:orange;border-radius:100px;color:#fff}
.textseoabout a{border:1px solid #000;padding:2% 5%;background-color:#fff;border-radius:100px;color:#000;margin-left:3%}
.textseoabout i{margin-right:1%}


#masterservic{flex-wrap:wrap;}
#masterservic h2{font-size:1.85em;color:#000;text-align:center;padding:4% 2% 2% 2%}
.masterservicin{display:flex;padding:0% 3%;direction:rtl}
.Box1{width:15.33%;margin:5%;border:1px solid #00000017}
.Box1 h2{font-size:1.2em !important;padding:4%;color:#333 !important;text-align:center !important}
.Box1 img{width:55%;display:block;border-top-left-radius:10px;border-top-right-radius:10px;margin:0 auto}
.Box1 p{;color:#00000083 ;text-align:center;padding:4% 3%}
.Box1:hover img {
    -webkit-transform: scale3d(0.95,0.95,1);
    transform: scale3d(0.95,0.95,1);
}

#masterseoservic{flex-wrap:wrap;}
#masterseoservic h2{font-size:1.85em;color:#000;text-align:center;padding:4% 2% 2% 2%}
#masterservic{flex-wrap:wrap;}
#masterservic h2{font-size:1.85em;color:#000;text-align:center;padding:4% 2% 2% 2%}
.masterservicin{display:flex;padding:0% 3%;direction:rtl}
.Box2{width:33.33%;margin:5%;}
.Box2 h2{font-size:1.2em !important;padding:4%;color:#333 !important;text-align:center !important}
.Box2 img{width:20%;display:block;margin:5% auto}
.Box2 p{;color:#00000083 ;text-align:center;padding:4% 3%}



#seoweb{position:relative;background:;min-height:600px}
#seoweb img{width:28%;display:block;position:absolute;left:11%;top:13%;border-radius:10px}
.textseo{width:40%;position:absolute;right:15%;top:20%}
.textseo h2{color:#000;font-size:2em;padding:2% 0 2% 0}
.textseo h3{color:#000;font-size:1.8em;padding:2% 0 2% 0}
.textseo p{font-size:1.4em;color:#0000009c;padding:0 0 5% 0}
.textseo span{border:1px solid orange;padding:2% 5%;background-color:orange;border-radius:100px;color:#fff}
.textseo a{border:1px solid #000;padding:2% 5%;background-color:#fff;border-radius:100px;color:#000;margin-left:3%}
.textseo i{margin-right:1%}






/* Menu Icon */
.icon-container {
	position: relative;
	display: inline-block;
	z-index: 2;
	float: right;
	height: 55px;
	width: 55px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
	transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
}
.icon-container #menuicon {
	width: 20px;
	height: 10px;
	position: relative;
	display: block;
	margin: -4px auto 0;
	top: 50%;
}
#menuicon .bar {
	width: 100%;
	height: 1px;
	display: block;
	position: relative;
	background: #fff;
	transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
}
#menuicon .bar.bar1 {
	-webkit-transform: translateY(0px) rotate(0deg);
	transform: translateY(0px) rotate(0deg);
}
#menuicon .bar.bar2 {
	-webkit-transform: translateY(6px) rotate(0deg);
	transform: translateY(6px) rotate(0deg);
}
.menu-open .icon-container {
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}
.menu-open .icon-container #menuicon .bar {
	transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99);
	transition-delay: 0.1s;
}
.menu-open .icon-container #menuicon .bar.bar1 {
	-webkit-transform: translateY(4px) rotate(45deg);
	transform: translateY(4px) rotate(45deg);
}
.menu-open .icon-container #menuicon .bar.bar2 {
	-webkit-transform: translateY(3px) rotate(-45deg);
	transform: translateY(3px) rotate(-45deg);
}


/*The Nivo Slider styles*/
.nivoSlider{position:relative !important;width:100%;height:auto;overflow:hidden;background:#f6f5f4}
.nivoSlider img{position:absolute;top:0px;left:0px;display:block !important}
.nivo-main-image{display:block;position:relative !important;width:100% !important;}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink{position:absolute;top:0px;left:0px;width:100%;height:100%;border:0;padding:0;margin:0;z-index:6;display:none;background:white;filter:alpha(opacity=0);opacity:0;}
/* The slices and boxes in the Slider */
.nivo-slice{display:block;position:absolute;z-index:5;height:100%;top:0;}
.nivo-box{display:block;position:absolute;z-index:5;overflow:hidden;}
.nivo-box img{display:block !important;}
/* Caption styles */
.nivo-caption{position:absolute;left:0px;bottom:0px;background:#000;color:#fff;width:100%;z-index:8;padding:5px 10px;opacity:0.8;overflow:hidden;display:none !important;-moz-opacity:0.8;filter:alpha(opacity=8);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;font-family:BYekan;}
.nivo-caption p{padding:5px;margin:0;font-family:BYekan;}
.nivo-caption a{display:inline !important;}
.nivo-html-caption{display:none;}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-controlNav{position:absolute;z-index:9;bottom:26px;right:0;}
.nivo-directionNav{z-index:90;}
.nivo-directionNav a{z-index:9;cursor:pointer;color:#070707;font-size:0.5em;}
.nivo-prevNav{position:absolute;left:5%;width:50px;height:50px;background-image:url("/images/ArrowL.jpg");top:50%;transform: translateY(-50%);    }
.nivo-nextNav{position:absolute;right:5%;width:50px;height:50px;background-image:url("/images/ArrowR.jpg");top:50%;transform: translateY(-50%);}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav{position:absolute;z-index:9;bottom:26px;right:0;}
.nivo-controlNav a{z-index:9;cursor:pointer;margin:0 1px 0 1px;padding:0 11px;background:#070707;color:#070707;font-size:0.4em;border-top:1px solid #bdbdbd;}
.nivo-controlNav a.active{font-weight:bold;color:#cc9c0e;background-color:#cc9c0e;}
