@font-face {
	font-family:'W_YEKAN';
	src: url('font/W_YEKAN.eot?#') format('eot'),
		 url('font/W_YEKAN.woff') format('woff'),
		 url('font/W_YEKAN.ttf') format('truetype');
} 

@font-face {
	font-family:'Exo-Medium';
	src: url('font/Exo-Medium.eot?#') format('eot'),
		 url('font/Exo-Medium.woff') format('woff'),
		 url('font/Exo-Medium.ttf') format('truetype');
} 

@font-face {
	font-family:'IranSans';
	src: url('font/IranSans.eot?#') format('eot'),
		 url('font/IranSans.woff') format('woff'),
		 url('font/IranSans.ttf') format('truetype');
} 

body {
    position: absolute;
    font-family:'W_YEKAN';
    font-weight: 300;
    width: 100%;
    height: 100%;
    margin: 0px 0px;
    overflow-x: hidden;
}

.banner-main{
	height:auto;
}

.text01{
	text-align: left;
    position: relative;
    right: 105px;
}

.text02{
    position: relative;
    left: 45px;
    color: #363896;
    font-weight: 700;
    font-size: 22px;
}

.text03{
    position: relative;
    right: 0px;
    color: #363896;
    font-weight: 700;
    font-size: 21px;
}

.text04{
    color: #1d77ba;
    font-weight: 700;
    font-size: 21px;
    margin-bottom: 15px;
}

.text05 {
    position: relative;
    width: 110%;
    font-size: 13px;
    line-height: 1.7em;
	color:#000;
	margin-top:30px;
    text-align: justify;
}

.text06{
    font-family: 'Exo-Medium';
}

.text09{
	font-family:'IranSans';
	font-size: 11.5px !important;
	line-height: 26px !important;
}

.bug{
	clear:both;
}

.item01 {
	width: 100%;
	margin:0px auto;
	margin-bottom: 50px;
}

.item01-l {
	float:left;
	width: 40%;
	margin-bottom: 60px;
}

.item01-r {
	float:right;
	width:50%;
	position: relative;
	top: -95px;
}

.item02 {
	width: 100%;
	margin:0px auto;
	margin-top: -170px;
	margin-bottom: 60px;
}

.item02-l {
	float:left;
	width: 40%;
	margin-bottom: 0px;
}

.item02-r {
	float:right;
	width:60%;
	position: relative;
	top: 0px;
}

.item03 {
	width: 95%;
	margin:0px auto;
	margin-top: 50px;
}

.item03-l {
	float:left;
	width: 40%;
	margin-bottom: 0px;
}

.item03-r {
	float:right;
	width: 60%;
	position: relative;
	top: 0px;
	font-weight:100;
	line-height: 23px;
	font-size: 15px;
}

.item03-r strong{
	font-weight:700;
}

.brand01{
    text-align: center;
    right: 30px;
    position: relative;
}

.brand01 a{
    float: left;
    width: 55%;
    text-align: left;
}

.brand02{
    float: right;
    width: 100%;
    text-align: center;
    position: relative;
    top: -148px;
    left: 285px;
}

a{
    text-decoration: none;
    color: white;
}

#container {
    position: relative;
    width: 100%;
    height: 100%;
    top: -90px;
}

#topmenu {
    position: relative;
    width: 100%;
    height: 90px;
    z-index: 9999;
    transition-duration: 0.5s;
    background: rgba(255, 255, 255, 1) !important;
}

#topmenu01 {
    position: relative;
    width: 100%;
    height: 90px;
    z-index: 9999;
    transition-duration: 0.5s;
}

#bgfix {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: -9999;
    background-image: url(../img/bghome.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

#shaddow {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: -8000;
    background-image: url(../img/shaddow.png);
    background-size: cover;
    background-repeat: no-repeat;
}

#shaddow2 {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../img/shaddow.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

#logomenu {
    position: relative;
    float: right;
    width: 232px;
    height: 53px;
    margin-right: 70px;
    margin-left: 100px;
    top: 14px;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(../img/logo.png);
}

#logomenu2 {
    position: absolute;
    float: right;
    width: 232px;
    height: 53px;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(../img/logo.png);
    opacity: 0;
    cursor: pointer;
    transition-duration: 1s;
}

#logomenu2:hover {
    opacity: 1;
}

#logomenu_b {
    position: relative;
    float: left;
    width: 120px;
    height: 50px;
    margin-left: 70px;
    margin-right: 40px;
    top: 40px;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(../img/logo_b.svg);
}

.menucell {
    position: relative;
    float: right;
    text-transform: uppercase;
    color: #000;
    margin-left: 70px;
    opacity: 0.9;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0px;
    top: 35px;
    cursor: pointer;
    transition-duration: 0.2s;
}

.menucell a{
    color: #000;
}

.menucell a:hover{
    color: #4daa7a;
}

.menucell:hover {
    opacity: 1;
	color: #4daa7a;
    transition-duration: 0.2s;
}

#inspector {
    position: fixed;
    width: 50%;
    height: 100%;
    right: 0px;
    background-image: url(../img/inspector.png);
    background-size: 60%;
    background-position: bottom center;
    background-repeat: no-repeat;
    z-index: -8000;
}

.t1 {
    position: relative;
    width: 100%;
    color: #fff;
    font-size: 25px;
    text-transform: uppercase;
    font-weight: 100;
    text-align: right;
}

.t2 {
    position: relative;
    width: 100%;
    color: white;
    font-size: 65px;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 0px;
    margin-top: 20px;
    text-align: right;
}

#scroll {
    position: absolute;
    bottom: 15px;
    right: 50px;
    color: white;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 100;
    margin-bottom: -15px;
    margin-top: 20px;
    padding: 10px 10px 10px 0px;
    width: 170px;
    border-right: 1px solid white;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
    border-radius: 0px 7px 7px 0px;
}

#scroll_b {
    position: absolute;
    bottom: -30px;
    left: 0px;
    color: #1b2a41;
    font-size: 15px;
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: -15px;
    margin-top: 20px;
    padding: 10px 10px 10px 0px;
    width: 171px;
    border-right: 1px solid #1b2a41;
    border-top: 1px solid #1b2a41;
    border-bottom: 1px solid #1b2a41;
    border-radius: 0px 7px 7px 0px;
}

#hometxtcon {
    position: absolute;
    width: 70%;
    height: 250px;
    top: 50%;
    margin-top: -150px;
    right: 180px;
    direction: rtl;
}

#scrollicon {
    position: absolute;
    width: 40px;
    height: 40px;
    bottom: 0px;
    top: 190px;
    margin-right: 10px;
    background-image: url(../img/scroll.svg);
    background-size: 80%;
    background-position: center;
    background-repeat: no-repeat;
    animation: scroll infinite 1s;
    text-align: right;
    float: right;
}

#scrollicon_b {
    position: absolute;
    width: 40px;
    height: 40px;
    right: 200px;
    bottom: 150px;
    margin-right: 10px;
    background-image: url(../img/scroll_b.svg);
    background-size: 80%;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 99;
}

@keyframes scroll {
    0%{bottom: 0px;opacity:1;}
    50%{bottom: 20px;opacity:0.65;}
    100%{bottom: 0px;opacity:1;}
}

@keyframes opa {
    0%{opacity:1;}
    50%{opacity:0.65;}
    100%{opacity:1;}
}

.slide {
    position: relative;
    width: 100%;
    height: 100%;
}

.rtl {
	direction:rtl;
}

.diamond {
    position: absolute;
    width: 100%;
    padding-bottom: 100%;
    background-color: white;
    transform: scale(0.70710678118,0.15) rotate(45deg) translate(0px,100px);
}

#dd1 {
    transform: translateX(0.5) !important;
}

.diamondcon {
    position: absolute;
    width: 100%;
    height: 100%;
}

.badbezan {
    position: absolute;
    width: 100%;
    height: 100%;
}

#bb1 {
    background-color: white;
}

#bb2 {
    transform: translateX(-50%);
    background-color: #6cb2e2;
    opacity: 0.9;
}

#bb3 {
    transform: translateX(-50%);
    background-color: #1d77ba;
    opacity: 0.75;
}

#bgfront {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../img/bghome.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
    z-index: -7000;
    top: 150%;
}

#bb4 {
    transform: translate(-50%);
    background-color: #00f172;
    opacity: 0.15;
}

#bb5 {
    transform: translate(0%);
    z-index: 10;
}

#slogan {
}

.clip {
    position: absolute;
    width: 200%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    background-color: #aaa;
}

.bg {
    position: absolute;
    width: 50%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}

.spacer {
    position: relative;
    width: 100%;
    height: 25%;
}

#services {
    margin-top: -100px;
}

#bb6 {
    background-color: #1b2a41;
    opacity: 0.35;
    z-index: 10;
}

#bb7 {
    background-color: #1b2a41;
    transform: translate(-50%);
    opacity: 0.35;
    z-index: 10;
}

#bb8 {
    background-color: #10d5fa;
    transform: translate(-75%);
    opacity: 0.5;
}

#bb9 {
    background-color: #00f172;
    transform: translate(25%);
    opacity: 0.5;
}

#bb10 {
    background-color: white;
}

#bb11 {
    background-color: #00f172;
    opacity: 0.5;
}

#bb12 {
    background-color: #44d88a;
    opacity: 0.6;
}

#contact {
    height: 70%;
    background-image: linear-gradient(#6cb2e2, #1d77ba);
    clip-path: polygon(0 0, 100% 66.5%, 100% 100%, 0% 100%);
    -webkit-clip-path: polygon(100% 0, 100% 66.5%, 100% 100%, 0% 100%);
}

#aboutcon {
    position: absolute;
    width: 50%;
    height: 35%;
    top: 29.5%;
    right: 70px;
    z-index: 1000;
    text-align: right;
    direction: rtl;
}

.title {
    color: #fff;
    position: relative;
    font-size: 28px;
    font-weight: 500;
    text-transform: uppercase;
}

.title01 {
    color: #fff;
    position: relative;
    text-align: center;
    font-size: 28px;
    top: 100px;
    font-weight: 500;
    text-transform: uppercase;
}

.text {
    position: relative;
    width: 102%;
    font-size: 17px;
    line-height: 1.9em;
    color: #fff;
    margin-top: 10px;
    text-align: justify;
}

.textoffice {
    position: absolute;
    width: 100%;
    font-size: 15px;
    line-height: 1.7em;
    color: #fff;
    margin-top: 10px;
    top: 50px;
}

.button {
    position: absolute;
    color: #fff;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 100;
    margin-bottom: -15px;
    margin-top: 15px;
    padding: 10px 10px 10px 10px;
    border-left: 2px solid;
    border-top: 2px solid;
    border-bottom: 2px solid;
    border-radius: 7px 0px 0px 7px;
    border-color: rgba(255,255,255,0.2);
    font-weight: 500;
    cursor: pointer;
    transition-duration: 0.2s;
}

.button_w {
    position: absolute;
    right: 0px;
    color: #1b2a41;
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 100;
    margin-bottom: -15px;
    margin-top: 15px;
    padding: 10px 10px 10px 10px;
    border-left: 2px solid;
    border-top: 2px solid;
    border-bottom: 2px solid;
    border-radius: 7px 0px 0px 7px;
    border-color: rgba(27,42,65,0.2);
    font-weight: 500;
    cursor: pointer;
    transition-duration: 0.2s;
}

.button:hover {
    background:#fff;
    color: #1d77ba;
    border-color: rgba(255,255,255,0.5);
    transform: translate(-5%);
}

.button_w:hover {
    background:#fff;
    color: #579430;
    border-color: rgba(27,42,65,0.5);
    transform: translate(-5%);
}

#slogan1 {
    position: absolute;
    top: 0px;
    width: 50%;
    left: 25%;
    font-size: 60px;
    text-transform: uppercase;
    color: #ffa800;
    font-weight: 300;
    z-index: 1000;
    text-align: center;
}

#innertitle {
    position: absolute;
    top: 18%;
    width: 50%;
    left: 70px;
    font-size: 45px;
    text-transform: uppercase;
    color: #1b2a41;
    font-weight: 300;
    z-index: 1000;
}

#slogan2 {
    position: absolute;
    width: 50%;
    top: 130px;
    left: 70px;
    font-size: 45px;
    text-transform: uppercase;
    color: #00f172;
    font-weight: 700;
    z-index: 1000;
}

#innersub {
    position: absolute;
    width: 50%;
    top: 18%;
    margin-top: 50px;
    right: 70px;
    font-size: 45px;
    text-transform: uppercase;
    color: #17b2eb;
    font-weight: 700;
    z-index: 1000;
    direction: rtl;
}

#servicecon {
    position: absolute;
    width: 78%;
    left: 10%;
    height: 30%;
    text-align: center;
    top: -5%;
    z-index: 100;
}

.service {
    position: absolute;
    width: 215px;
    height: 100px;
    z-index: 1000;
    cursor: default;
    opacity: 0.65;
    transition-duration: 0.2s;
}

.service:hover {
    opacity: 1;
}

#s1 {
    left: 50%;
    margin-left: -100px;
    top: 50%;
    margin-top: -135px;
}

#s2 {
    left: 50%;
    margin-left: -350px;
    top: 50%;
    margin-top: -50px;
}

#s3 {
    left: 50%;
    margin-left: -100px;
    top: 50%;
    margin-top: 35px;
}

#s4 {
    left: 50%;
    margin-left: 150px;
    top: 50%;
    margin-top: -50px;
}

.icon {
    position: absolute;
    width: 60px;
    height: 60px;
    left: 50%;
    margin-left: -30px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.icontxt {
    position: absolute;
    width: 100%;
    text-align: center;
    color: white;
    text-transform: uppercase;
    font-weight: 500;
    bottom: 5px;
    font-size: 17px;
}

#clientscon {
    position: absolute;
    width: 40%;
    height: 35%;
    top: 27%;
    right: 70px;
    text-align: right;
    z-index: 1000;
}

#contactcon {
    position: absolute;
    width: 100%;
    right: 70px;
    bottom: 206px;
    direction: rtl;
}

#officebar {
    position: absolute;
    bottom: 0px;
    height: 170px;
    width: 100%;
    max-width: 1200px;
    margin: 0px auto;
    left: 313px;
    direction: rtl;
}

.office01 {
    position: relative;
    box-sizing: border-box;
    padding: 0px 0px 0px 0px;
    height: 100%;
    border-right: 0px solid #777;
    width: 50%;
    right: 0px;
    text-align: right;
    float: right;
}

.office02 {
    position: relative;
    box-sizing: border-box;
    padding: 0px 0px 0px 0px;
    height: 100%;
    border-right: 0px solid #777;
    width: 25%;
    right: 0px;
    text-align: right;
    float: right;
}

.cityicon {
    position: absolute;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    text-align: right;
    float: right;
}

.cityname {
    position: absolute;
    color: #ccdc79;
    text-transform: uppercase;
    right: 30px;
    top: 25px;
    font-weight: 500;
    font-size: 19px;
}

#footer {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    font-size: 13px;
    color: #fff;
    text-align: center;
    font-family: 'Exo-Medium';
    line-height: 20px;
    padding: 12px 0px;
    background-color: #166dad;
}

#footer a{
    color: #93b86d;
}

#footer a:hover{
    color: #fff;
}

.selected {
    opacity: 1 !important;
}

#innercon {
    position: relative;
    width: 70%;
    right: 70px;
    text-align: right;
    padding-top: 34px;
    direction: rtl;
    float: right;
}

#detailcon {
    position: relative;
    width: 70%;
    left: 70px;
    top:70px;
}

#innerdetail {
    background-color: white;
    height: auto;
    padding-bottom: 150px;
}

#innertext {
    height: auto;
    padding-bottom: 70px;
	direction: rtl;
}

.bullet {
    position: relative;
    padding: 8px 15px 10px 15px;
    border-bottom: 2px solid #eee;
    border-left: 2px solid #eee;
    font-weight: 500;
    margin-bottom: 5px;
    margin-top: 5px;
    border-radius: 100px;
}

#whiter {
    position: absolute;
    top: 100%;
    width: 100%;
    height: 50%;
    background-color: white;
}

#sitemap {
    position: relative;
    float: right;
    width: 100%;
    right: 70px;
}

.mapcol {
    position: relative;
    float: right;
    margin-top: 70px;
    margin-left: 60px;
}

.mapcell {
    color: white;
    text-transform: uppercase;
    padding-bottom: 7px;
    font-size: 13px;
    cursor: pointer;
    color: #aaa;
    transition-duration: 0.2s;
}

.mapcell:hover {
    color: #10d5fa;
}


.head {
    font-weight: 500;
    opacity: 1;
    margin-bottom: 5px;
    cursor: default;
    color: #10d5fa;
}

#site {
    background-color: #1d77ba;
    height: 360px;
}

#map {
    position: absolute;
    width: 40%;
    height: 100%;
    background-image: url(../img/map.svg);
    background-size: 75%;
    background-repeat: no-repeat;
    background-position: center;
    animation: opa infinite 1s;
}

#coverage {
    position: absolute;
    left: 70px;
    top: 70px;
    color: white;
    font-weight: 500;
    text-transform: uppercase;
}

#sectortable {
    position: absolute;
    width: 800px;
    left: 50%;
    margin-left: -400px;
    top: 45%;
}

.sectorcell {
    position: relative;
    width: 50%;
    float: left;
    margin-bottom: 2.5%;
    cursor: pointer;
}

.sectortxt:hover {
    color: #aebe66;
    border-color: #aebe66;
}

.sectortxt2:hover {
    color: #aebe66;
    border-color: #aebe66;
}

.sectortxt {
    color: white;
    font-weight: 500;
    text-transform: uppercase;
    padding: 25px;
    padding-left: 85px;
    font-size: 23px;
    box-sizing: border-box;
    border-left: 3px solid rgba(255,255,255,0.55);
    background-color: rgba(27, 42, 65, 0.3);
    transition-duration: 0.2s;
    clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
    -webkit-clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
}

.sectortxt2 {
    color: white;
    font-size: 23px;
    font-weight: 500;
    text-transform: uppercase;
    padding: 25px;
    padding-right: 85px;
    box-sizing: border-box;
    border-right: 3px solid rgba(255,255,255,0.55);
    background-color: rgba(27, 42, 65, 0.3);
    transition-duration: 0.2s;
    clip-path: polygon(25% 0%, 100% 1%, 100% 100%, 25% 100%, 0% 50%);
    -webkit-clip-path: polygon(25% 0%, 100% 1%, 100% 100%, 25% 100%, 0% 50%);
    text-align: right;
}

#products {
    height: 30%;
    padding-bottom: 180px;
}

#clientxt {
	margin-top: 60px;
	position: relative;
	right: 284px;
	width: 100%;
}

.email {
    cursor: pointer;
    transition-duration: 0.2s;
}

.email:hover {
    color: #10d5fa;
}

.sectoricon {
    width: 50px;
    height: 45px;
    top: 10px;
    left: 20px;
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 100;
}

.sectoricon2 {
    width: 50px;
    height: 45px;
    top:10px;
    right: 20px;
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 100;
}

#logomob {
    position: relative;
    width: 140px;
    height: 45px;
    left: 30px;
    top: 5px;
    background-image: url(../img/logo.png);
    background-repeat: no-repeat;
    display: none;
}

#bgslog {
    background-image: url(../img/bg2.jpg);
}

#bgslog2 {
    background-image: url(../img/bg2mob.jpg);
    background-size: 100%;
    background-attachment: inherit;
    display: none;
}

#overflow {
    overflow-x: hidden !important;
}

#menumob {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(27,42,65,0.95);
    z-index: 1000000000000;
    display: none;
}

#mobcon {
    position: absolute;
    height: auto;
    top: 0%;
    right: 4%;
    margin-top: 0px;
    width: 100%;
}

.mobcell {
    text-align: center;
    color: white;
    font-size: 20px;
    text-transform: uppercase;
    padding: 10px;
    font-weight: 300;
    opacity: 0.65;
    cursor: pointer;
    transition-duration: 0.2s;
}

.mobcell:hover {
    opacity: 1;
}

#logomenumob {
    width: 130px;
    height: 40px;
    background-image: url(../img/logo_color.svg);
    background-repeat: no-repeat;
    position: relative;
    left: 50%;
    margin-left: -65px;
    margin-top: 20px;
    
}

#logomobsub {
    color: white;
    font-weight: 300;
    text-transform: uppercase;
    text-align: center;
    font-size: 18px;
    color: #00f172;
    margin-bottom: 10px;
    margin-top: 7px;
    animation: color 5s infinite;
}

@keyframes color {
    0%{color: #00f172 }
    50%{color: #10d5fa }
    100%{color: #00f172}
}

#closebtn {
    position: fixed;
    width: 40px;
    height: 40px;
    right: 360px;
    top: 20px;
    border-radius: 15px;
    border: 2px solid rgba(255,255,255,0.5);
    background-image: url(../img/close.svg);
    background-size: 40%;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

#mobmenubtn {
    position: fixed;
    width: 40px;
    height: 40px;
    right: 30px;
    top: 30px;
    border-radius: 15px;
    border: 2px solid rgba(255,255,255,0.5);
    background-image: url(../img/menu.svg);
    background-size: 40%;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    z-index: 1000000;
    display: none;
    background-color: rgba(27,42,65,0.5);
}

#mobmenubtn_w {
    position: fixed;
    width: 40px;
    height: 40px;
    right: 30px;
    top: 30px;
    border-radius: 15px;
    border: 2px solid rgba(27,42,65,0.5);
    background-image: url(../img/menu_w.svg);
    background-size: 40%;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    z-index: 1000000;
    display: none;
    background-color: rgba(255,255,255,0.5);
}

#preloader {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #1d77ba;
    z-index: 10000000000;
}

#logopre {
    position: absolute;
    width: 393px;
    height: 90px;
    background-image: url(../img/loading.png);
    background-repeat: no-repeat;
    top: 50%;
    margin-top: -75px;
    left: 50%;
    margin-left: -180px;
}

#pretxt {
    color: white;
    font-weight: 100;
    position: fixed;
    top: 50%;
    margin-top: -25px;
    left: 50%;
    font-size: 20px;
    margin-left: -10px;
}

#cir {
    position: absolute;
    width: 50px;
    height: 50px;
    left: 50%;
    margin-left: -25px;
    margin-top: 75px;
    top: 50%;
    border-radius: 100px;
    background-color: #6cb2e2;
    opacity: 0;
    animation: cir 2s infinite;
}

#cir2 {
    position: absolute;
    width: 50px;
    height: 50px;
    left: 50%;
    margin-left: -25px;
    top: 50%;
    margin-top: 75px;
    border-radius: 100px;
    background-color: #afbf66;
    opacity: 0;
    animation: cir 2s infinite;
    animation-delay: 0.5s;
}

#cir3 {
    position: absolute;
    width: 50px;
    height: 50px;
    left: 50%;
    margin-left: -25px;
    top: 50%;
    margin-top: 75px;
    border-radius: 100px;
    background-color: #5eac77;
    opacity: 0;
    animation: cir 2s infinite;
    animation-delay: 1s;
}

@keyframes cir {
    from{transform: scale(0); opacity: 1;}
    to{transform: scale(2); opacity: 0;}
}


.blogcon {
    position: absolute;
    width: 1200px;
    height: 500px;
    right: 50%;
    margin-right: -600px;
    top: 240px;
}

#news {
    height: 570px;
}

.blogpic {
    position: relative;
    width: 54%;
    height: 106%;
    float: right;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-clip-path: polygon(50% 15%, 100% 50%, 50% 85%, 0% 50%);
    clip-path: polygon(50% 15%, 100% 50%, 50% 85%, 0% 50%);
    z-index: 100;
}

.blogxontent {
    position: absolute;
    width: 95%;
    height: 100%;
    left: 0px;
    background-color: rgba(27,42,65,0.5);
    -webkit-clip-path: polygon(50% 0, 100% 0%, 100% 100%, 50% 100%, 0% 50%);
    clip-path: polygon(0% 0, 50% 0%, 100% 50%, 0% 150%, 0% 50%);
    border-left: 3px solid rgba(255,255,255,1);
    z-index: 99;
}

.blogtitle {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    padding-right: 52.5%;
    margin-top: 100px;
    color: white;
    font-size: 21px;
    font-weight: 500;
    line-height: 27px;
    left: 50px;
}

.blogdate {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    padding-right: 52.5%;
    margin-top: 10px;
    text-transform: uppercase;
    color: white;
    font-size: 15px;
    font-weight: 300;
    opacity: 0.5;
    left: 50px;
}

.blogtxt {
    position: relative;
    box-sizing: border-box;
    width: 98%;
    padding-right: 52.5%;
    margin-top: 10px;
    color: white;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.9em;
    padding-left: 50px;
    text-align: justify;
    direction: rtl;
}

.button_blog {
    position: absolute;
    color: #fff;
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 100;
    margin-bottom: -15px;
    margin-top: 15px;
    right: 91.5%;
    padding: 10px 10px 10px 10px;
    border-left: 2px solid;
    border-top: 2px solid;
    border-bottom: 2px solid;
    border-radius: 7px 0px 0px 7px;
    border-color: rgba(255,255,255,0.2);
    font-weight: 500;
    cursor: pointer;
    transition-duration: 0.2s;
}

.button_blog:hover {
    background:#6cb2e2;
    color: #fff;
    transition-duration: 0.2s;
    transform: translate(5%);
}

.button_blog01 {
    position: absolute;
    color: #fff;
    font-size: 16px;
    z-index: 9;
    text-transform: uppercase;
    font-weight: 100;
    margin-bottom: -15px;
    margin-top: 15px;
    left: 47.5%;
    top: 140%;
    padding: 15px 15px 15px 15px;
    border-left: 2px solid;
    border-top: 2px solid;
    border-bottom: 2px solid;
    border-radius: 7px 0px 0px 7px;
    border-color: rgba(255,255,255,0.2);
    font-weight: 500;
    cursor: pointer;
    transition-duration: 0.2s;
}

.button_blog01:hover {
    background:#6cb2e2;
    color: #fff;
    transition-duration: 0.2s;
    transform: translate(-5%);
}

.slide01{
	margin-top: -140px;
}

.iframe{
	height: 1250px;
	background:#000;
}

.flag{
	position: relative;
    top: -3px;
}

.icon01{
    color: #ccdc79;
    font-size: 25px !important;
    padding: 25px 0px;
    text-align: right;
    float: right;
}

.icon02{
    color: #ccdc79;
    font-size: 22px !important;
    padding: 25px 0px;
}

.icon03{
    color: #ccdc79;
    font-size: 22px !important;
    padding: 25px 15px;
}

.brand01-img01{
	margin-bottom: 0px;
}

.brand01-img02{
	position: relative;
    left: 80px;
    top: 25px;
}

.brand02-img01{
	position: relative;
	top: -20px;
	margin-bottom: 0px;
}

.brand02-img02{
	position: relative;
	left: 0px;
	top: 25px;
}

.shape {
	position: relative;
	top: 15px;
	right: -10px;
}

.shape01 {
	position: relative;
    top: -10px;
    right: 0px;
}

.top01{
	margin-top: 35px;
}

.footer01{
	margin-top: 120px;
}

.footer02{
	margin-top: 250px;
}

/*====================*/
/* BUZZ OUT
/*====================*/

@-webkit-keyframes buzz-out-on-hover {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }
  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}
@keyframes buzz-out-on-hover {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }
  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}
.buzz-out-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.buzz-out-on-hover:hover, .buzz-out-on-hover:focus, .buzz-out-on-hover:active {
  -webkit-animation-name: buzz-out-on-hover;
  animation-name: buzz-out-on-hover;
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

.top{
	margin-top:300px;
}

#gotop{
	z-index:999;
}

.description01 {
    text-align: justify;
	direction:rtl;
    padding: 0px 30px 30px 30px;
	font-size: 17px;
    line-height: 1.9em;
}

@media only screen and (max-width:1600px) {
	
	.iframe{
		height: 1000px;
	}
	
}

@media only screen and (max-width:1440px) {
	
	.iframe{
		height: 980px;
	}

}	

@media only screen and (max-width:1366px) {
	
	.iframe{
		height: 830px;
	}

}

@media only screen and (max-width:1024px) {
	
	#bb1 , #bb2 , #bb3 , #bb4 , #bb5 , #bb6 , #bb7, #bb8 , #bb9 , #bb10, #bb11, #bb12 {
		display:none;
	}
	
	#hometxtcon {
		width: 70%;
		height: 250px;
		top: 40%;
		margin-top: -125px;
		left: 80px;
	}
	
	.menucell {
		letter-spacing: 0px;
		margin-right: 25px;
	}
	
	.t2 {
		font-size: 50px;
	}
	
	.iframe {
		height: 800px;
	}
	
	.text {
		width: 100%;
		font-size: 14px;
		line-height: 1.6em;
	}
	
	#aboutcon {
		top: 23%;
	}
	
	#slogan {
		height: 10%;
	}
	
	.spacer {
		height: 5%;
	}
	
	#slogan1 {
		width: 50%;
		font-size: 40px;
	}
	
	#clientscon {
		right: 150px;
		top: 30%;
	}
	
	.text01 {
		right: 115px;
	}
	
	.blogcon {
		width: 970px;
		margin-left: -485px;
		top: 200px;
	}
	
	#news {
		height: 620px;
	}
	
	.button_blog01 {
		top: 115%;
	}
	
	.slide01 {
		margin-top: 0px;
	}

}

@media only screen and (max-width:768px) {
	
	.text05 {
		width: 100%;
	}
	
	.top01{
		margin-top: 0px;
	}
	
	.text04 {
		font-size: 16px;
		margin-bottom: 10px;
	}
	
	.images01{
		width: 100%;
	}
	
	.item01-l {
		float: left;
		width: 100%;
		margin-bottom: 10px;
	}
	
	.item01-r {
		float: left;
		width: 100%;
		position: relative;
		margin-bottom: 50px;
		top: 0px;
	}
	
	.item02-l {
		float: left;
		width: 100%;
		margin-bottom: 30px;
	}
	
	.item02-r {
		float: left;
		width: 100%;
	}
	
	#innersub {
		top: 45%;
		font-size: 30px;
	}
	
	.slide {
		height: 45%;
	}
	
	#aboutcon {
		width: 85%;
	}
	
	#representation{
		position:
		relative;
		left:90px;
	}
	
	.blogpic , .blogtxt {
		display: none;
	}
	
	.blogxontent {
		width: 100%;
		right: 70px;
	}
	
	.blogcon {
		width: 100%;
		margin-left: 0px;
		top: 200px;
		left: 0%;
	}
	
	.button_blog01 {
		top: 93%;
	}
	
	.t2 {
		font-size: 40px;
	}
	
	.t1 {
		margin-top: 17px;
	}
	
	.iframe {
		height: 510px;
	}
	
	#hometxtcon {
		width: 70%;
		height: 250px;
		top: 33%;
		margin-top: -0px;
		left: 80px;
	}
	
	.footer01{
		margin-top: 300px;
	}
	
	.footer02{
		margin-top: 550px;
	}
	
	.item03 {
		width: 100%;
	}

	.item03-l {
		float: left;
		width: 100%;
	}
	
	.item03-r {
		float: left;
		width: 100%;
		line-height: 23px;
		font-size: 14px;
	}
	
	#innercon {
		width: 85%;
	}

}

@media only screen and (max-width:480px) {
	
	.description01 {
		text-align: justify;
		padding: 0px 30px 30px 20px;
		font-size: 16px;
	}
	
	#logomob {
		width: 235px;
	}
	
	.top{
		margin-top:600px;
	}
	
	.footer02{
		margin-top: 710px;
	}
	
	.slide {
		height: 100%;
	}
	
	#representation{
		background:#0ba25e;
		left: 0px;
	}
	
	.iframe {
		height: 275px;
		margin-top: 90px;
	}
	
	.slide01 {
		margin-top: -655px;
		background:#3588c4;
		height: 560px;
	}
	
	.spacer {
		height: 5%;
	}
	
	#slogan {
		height: 0%;
	}
	
	.blogcon {
		width: 100%;
		margin-left: 0px;
		top: 200px;
		left: 0%;
	}
	
	.blogtitle {
		padding-right: 0%;
		margin-top: 50px;
		font-size: 15px;
		line-height: 22px;
		left: 35px;
	}
	
	.blogdate {
		padding-right: 25%;
		font-size: 16px;
		text-align: right;
	}
	
	.blogtxt {
		padding-right: 3%;
		text-align: justify;
		padding-left: 50px;
		font-size: 14px;
	}
	
	.blogxontent {
		-webkit-clip-path: polygon(0% 0, 100% 0%, 100% 100%, 0% 100%, 0% 50%);
		clip-path: polygon(0% 0, 100% 0%, 100% 100%, 0% 100%, 0% 50%);
		top: -70px;
		right: -21px;
		height: 45%;
	}
	
	.button_blog {
		left: 75.5%;
		font-size: 15px;
	}
	
	.button_blog01 {
		left: 38%;
		top: 58%;
		font-size: 15px;
	}
	
	.section03{
		height:500px !important;
	}
	
	#products {
		height: 15%;
	}
	
	.brand02 {
		top: 160px;
		left: 0px;
	}
	
	.brand01 {
		left: 105px;
	}
	
	.shape {
		display: none;
	}
	
	#container {
		top: 0px;
	}

    #inspector{opacity: 0;}
    #hometxtcon{width: 100%;left: 0px;top: 13%;}
    .t1{width: 100%;text-align: right;padding-right: 50px;box-sizing: border-box;top: 0px;margin-top: 0px;font-size: 20px;opacity: 0.65;}
    .t2{font-size: 25px;text-align: right;padding-right: 50px;box-sizing: border-box;margin-top: 65px;}
    #scrollicon{left: 30px;display: none;}
    #logomob{display: block;right: 40px;top: 10%;}
    #topmenu , #topmenu01{display: none;}
    #aboutcon{left: 30px;margin-top: -45px;width: 85%;}
    .title{font-size: 25px;margin-bottom: 35px;right: 0px;text-align: center;}
	.title01{font-size: 25px;top: 50px;}
    .text{font-size: 17px;}
    #aboutxt{height: 245px;overflow: hidden;}
    #clientxt{height: 600px;overflow: hidden;right: 0px;top: 0%;}
    #sertxt{height: 155px; overflow: hidden;}
    #sectxt{height: 180px;overflow: hidden;}
    .button{font-size: 15px;}
    .button_w{font-size: 12px;}
    #slogan1{font-size: 28px;width: 100%;left: 0px;text-align: center;margin-top: 30px;}
    #slogan2{font-size: 25px; width: 100%; left: 0px; text-align: center; margin-top: -120px;}
    #bgslog{display: none;}
    #bgslog2{display: block;}
    .icon{background-size: 55%; margin-top: 5px;}
    .icontxt{font-size: 16px;top: 60px;}
    #s2{margin-left: -200px;}
    #s4{margin-left: 0px;}
    #sectors{height: 500px;}
    #sectortable{width: 100%;left: 0px;margin-left: 0px;margin-top: 0px;top: 40%;}
    .sectorcell{width: 80%;left: 10%;}
	
    .sectortxt{
		font-size: 16px;
		color: white;
		font-weight: 500;
		text-transform: uppercase;
		padding: 20px;
		padding-right: 80px;
		text-align: right;
		box-sizing: border-box;
		border-right: 2px solid rgba(255,255,255,0.25);
		background-color: rgba(27, 42, 65, 0.3);
		transition-duration: 0.2s;
		clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
		-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
	}
	
    .sectortxt2{
    font-size: 16px;
    color: white;
    font-weight: 500;
    text-transform: uppercase;
    padding: 20px;
    padding-right: 80px;
    text-align: right;
    box-sizing: border-box;
    border-right: 2px solid rgba(255,255,255,0.25);
    background-color: rgba(27, 42, 65, 0.3);
    transition-duration: 0.2s;
    clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
    }
    .sectoricon2{width: 40px;
    height: 40px;
    top:10px;
    right: 25px;
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 100;}
    #clientscon{margin-top: -35px;right: 0px;top: 10%;width: 100%;}
    #contactcon{padding:30px;top:0px;box-sizing: border-box;left: 0px;}
    #officebar{height: auto;top: 190px;left: -30px;}
    .office01{height: 125px;padding: 0px;left: 30px;border: none;width: 85%;}
	.office02{height: 125px;padding: 0px;left: 30px;border: none;width: 100%;}
    #contact{
    height: 585px;
    clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
    -webkit-clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
    }
    .cityname{left: 25px;font-size: 19px;top: 27px;}
    .textoffice{font-size: 14px;line-height: 25px;}
    #map{width: 100%; height: 200px; top: 30px; position: relative;}
    #sitemap{position: relative; width: 100%; left: 0px; margin-top: 0px; display: none;}
    #footer{height: auto;position: relative;font-size: 11px;padding: 15px 0px;line-height: 16px;}
    #site{height: 230px;}
    #innertitle{text-align: left; width: 100%; left: 0px; font-size: 20px; top: 30px; padding-left: 30px;box-sizing: border-box;}
    #innersub{text-align: right;width: 100%;right: 0px;font-size: 25px;top: 50px;padding-right: 30px;box-sizing: border-box;}
    #detailcon{width: 100%; left: 0px; padding-left: 30px; padding: 30px; box-sizing: border-box; top: 0px;}
    #innercon{
    width: 100%;
    padding: 30px;
    box-sizing: border-box;
    right: 0px;
    top: 70px;
    }
    #scrollicon_b{left: 30px; bottom: 75px;}
    #bgfront{display: none;}
    #innerdetail{padding-bottom: 0px;}
    #swan{width: 20px;}
    #servicecon{top: 0%;width: 100%;left: 0%;}
    #mobmenubtn{display: block;top: 20px;right: 360px;}
    #mobmenubtn_w{display: block;}
    #logopre{display:none;}
	
    #pretxt{margin-left: -80px; margin-top: -10px; font-size: 18px; letter-spacing:px;}
	
	#home {
		position:relative;
		top:-14%;
	}
	
	#innertext {
		padding-top: 20px;
	}
	
	.shape01 {
		display: none;
	}
	
	.sectoricon {
		width: 40px;
		height: 40px;
		top: 10px;
		left: 265px;
		position: absolute;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		z-index: 100;
	}
} 

@media only screen and (max-width:375px) {
	
	.blogtitle {
		font-size: 14px;
		left: 17px;
	}
	
	.sectoricon {
		left: 230px;
	}
	
	.slide01 {
		margin-top: -421px;
	}
	
	#logomob {
		display: block;
		top: 60px;
		right: 20px;
		width: 235px;
	}
	
	.t2 {
		margin-top: 100px;
	}
	
	#mobmenubtn {
		display: block;
		top: 20px;
		right: 320px;
	}

	#closebtn {
		right: 315px;
	}
	
	#sectortable {
		margin-top: 0px;
	}
	
	#officebar {
		top: 190px;
	}
	
	.cityname {
		left: 30px;
		font-size: inherit;
		top: 29px;
	}
	
	#products {
		height: 15%;
	}
	
	#mobcon {
		top: 0%;
		right: 5%;
	}
	
	#hometxtcon {
		top: 8%;
	}
	
	#clientscon {
		margin-top: -20px;
	}
	
	.brand01 {
		left: 80px;
	}
	
	.blogxontent {
		right: -10px;
	}
	
	.blogtitle {
		width: 95%;
	}
	
	#innertext {
		padding-top: 0px;
		position: relative;
		top: -6%;
	}
	
	#innersub {
		display: none;
	}
	
}

@media only screen and (max-width:360px) {
	.slide {
		height: 84%;
	}		
}