/* ---------------------------------------------------- */ .logo { height:30px; } .sequence-pagination { bottom: 1%; right: 10%; position: absolute; z-index: 10; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -ms-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; } .sequence-pagination li { display: inline-block; *display: inline; /* Hack for IE7 and below as they don't support inline-block */ } .sequence-pagination li div { cursor: pointer; opacity: 0.5; -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -ms-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; -webkit-transition-property: margin-bottom, opacity; -moz-transition-property: margin-bottom, opacity; -ms-transition-property: margin-bottom, opacity; -o-transition-property: margin-bottom, opacity; transition-property: margin-bottom, opacity; } .sequence-pagination li div:hover { -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -ms-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; } .sequence-pagination li.current div { opacity: 1; } #sequence ul li { list-style-type:none; } #sequence h2 { font-family: Arial Unicode MS; font-size: 30px; font-weight: bold; color: #0072C6; margin: 0px; width: 100%; direction:rtl; text-align:right; } #sequence h3 { font-family: Arial Unicode MS; font-size: 20px; font-weight: normal; color: #0072C6; margin: 0px; width: 100%; direction:rtl; text-align:right; } #sequence .star { background-image: url(/Portals/_default/Skins/Gravity/Images/slides/starpic.gif); background-repeat: no-repeat; background-position: right; padding-right: 40px; text-align:right; color: #0072C6; font-family: Arial Unicode MS; font-size: 16px; width: 350px; height:28px; padding-top:14px; direction:rtl; } #sequence ol, ul { list-style: none; } #sequence-theme { width: 100%; height: 460px; overflow: hidden; margin: 0 auto 0 auto; direction:ltr; } /* when in fallback mode (for browsers that don't support transitions) hide anything outside of the Sequence container */#sequence.sequence-fallback { overflow: hidden; } #sequence > .sequence-canvas li > * { position: absolute; /* only cause the left and opacity properties to transition */ -webkit-transition-property: left, opacity; -moz-transition-property: left, opacity; -ms-transition-property: left, opacity; -o-transition-property: left, opacity; transition-property: left, opacity; } .sequence-next, .sequence-prev { color: white; cursor: pointer; display: none; font-weight: bold; padding: 10px 15px; position: absolute; top: 50%; z-index: 390; margin-top: -47.5px; } .sequence-pause { bottom: 0; cursor: pointer; position: absolute; z-index: 390; } .sequence-paused { opacity: 0.3; } .sequence-prev { left: 3%; } .sequence-next { right: 3%; } .sequence-prev img, .sequence-next img { height: 100%; width: auto; } .sequence-next, .sequence-prev { position: absolute; opacity: 0.6; -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -ms-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; } .sequence-next:hover, .sequence-prev:hover { opacity: 1; -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -ms-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; } #sequence { position: relative; height: 460px; width: 100%; margin: 0 auto 0 auto; background: white; /* Preloader */ /* !Preloader */ /* Frame Animations */ /* !Frame Animations */ background-image: url(/Portals/_default/Skins/Gravity/Images/slides/sliderBack.jpg); background-repeat:repeat-x; background-position: left bottom; } #sequence > .sequence-canvas { height: 100%; width: 1000px; margin:0 auto; position:relative; } #sequence > .sequence-canvas > li { position: absolute; width: 100%; height: 100%; z-index: 1; } #sequence > .sequence-canvas li > * { position: absolute; } /*WebDevelopment*/ #sequence .main { position: absolute; left: 3000px; top: 10px; width: 384px; transform: translate(3000px); -webkit-transform: translate(3000px); -moz-transform: translate(3000px); -o-transform: translate(3000px); -ms-transform: translate(3000px); direction:rtl; } #sequence .animate-in .main { left: 300px; top: 10px; transform: translate(300px); -webkit-transform: translate(300px); -moz-transform: translate(300px); -o-transform: translate(300px); -ms-transform: translate(300px); -webkit-transition-duration: 1.5s; -moz-transition-duration: 1.5s; -ms-transition-duration: 1.5s; -o-transition-duration: 1.5s; transition-duration: 1.5s; } #sequence .animate-out .main { left: 300px; opacity: 0; top: 10px; transform: translate(3000px); -webkit-transform: translate(3000px); -moz-transform: translate(3000px); -o-transform: translate(3000px); -ms-transform: translate(3000px); -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -ms-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; -webkit-transition-delay: 1s; -moz-transition-delay: 1s; -ms-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; } /*whymyworld*/ #sequence .whymyworld { position: absolute; left: 3000px; top: 165px; width: 384px; transform: translate(3000px); -webkit-transform: translate(3000px); -moz-transform: translate(3000px); -o-transform: translate(3000px); -ms-transform: translate(3000px); } #sequence .animate-in .whymyworld { left: 300px; top: 165px; transform: translate(300px); -webkit-transform: translate(300px); -moz-transform: translate(300px); -o-transform: translate(300px); -ms-transform: translate(300px); -webkit-transition-duration: 1.5s; -moz-transition-duration: 1.5s; -ms-transition-duration: 1.5s; -o-transition-duration: 1.5s; transition-duration: 1.5s; -webkit-transition-delay: 0.5s; -moz-transition-delay: 0.5s; -ms-transition-delay: 0.5s; -o-transition-delay: 0.5s; transition-delay: 0.5s; } #sequence .animate-out .whymyworld { left: 300px; opacity: 0; top: 165px; transform: translate(3000px); -webkit-transform: translate(3000px); -moz-transform: translate(3000px); -o-transform: translate(3000px); -ms-transform: translate(3000px); -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -ms-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; -webkit-transition-delay: 1s; -moz-transition-delay: 1s; -ms-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; } /*star1*/ #sequence .star1 { position: absolute; left: 3000px; top: 205px; transform: translate(3000px); -webkit-transform: translate(3000px); -moz-transform: translate(3000px); -o-transform: translate(3000px); -ms-transform: translate(3000px); } #sequence .animate-in .star1 { left: 300px; top: 205px; transform: translate(300px); -webkit-transform: translate(300px); -moz-transform: translate(300px); -o-transform: translate(300px); -ms-transform: translate(300px); -webkit-transition-duration: 1.5s; -moz-transition-duration: 1.5s; -ms-transition-duration: 1.5s; -o-transition-duration: 1.5s; transition-duration: 1.5s; -webkit-transition-delay: 1s; -moz-transition-delay: 1s; -ms-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; } #sequence .animate-out .star1 { left: 300px; opacity: 0; top: 205px; transform: translate(3000px); -webkit-transform: translate(3000px); -moz-transform: translate(3000px); -o-transform: translate(3000px); -ms-transform: translate(3000px); -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -ms-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; -webkit-transition-delay: 1s; -moz-transition-delay: 1s; -ms-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; } /*star2*/ #sequence .star2 { position: absolute; left: 3000px; top: 240px; transform: translate(3000px); -webkit-transform: translate(3000px); -moz-transform: translate(3000px); -o-transform: translate(3000px); -ms-transform: translate(3000px); } #sequence .animate-in .star2 { left: 300px; top: 240px; transform: translate(300px); -webkit-transform: translate(300px); -moz-transform: translate(300px); -o-transform: translate(300px); -ms-transform: translate(300px); -webkit-transition-duration: 1.5s; -moz-transition-duration: 1.5s; -ms-transition-duration: 1.5s; -o-transition-duration: 1.5s; transition-duration: 1.5s; -webkit-transition-delay: 2s; -moz-transition-delay: 2s; -ms-transition-delay: 2s; -o-transition-delay: 2s; transition-delay: 2s; } #sequence .animate-out .star2 { left: 300px; opacity: 0; top: 240px; transform: translate(3000px); -webkit-transform: translate(3000px); -moz-transform: translate(3000px); -o-transform: translate(3000px); -ms-transform: translate(3000px); -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -ms-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; -webkit-transition-delay: 1s; -moz-transition-delay: 1s; -ms-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; } /*star3*/ #sequence .star3 { position: absolute; left: 3000px; top: 275px; transform: translate(3000px); -webkit-transform: translate(3000px); -moz-transform: translate(3000px); -o-transform: translate(3000px); -ms-transform: translate(3000px); } #sequence .animate-in .star3 { left: 300px; top: 275px; transform: translate(300px); -webkit-transform: translate(300px); -moz-transform: translate(300px); -o-transform: translate(300px); -ms-transform: translate(300px); -webkit-transition-duration: 1.5s; -moz-transition-duration: 1.5s; -ms-transition-duration: 1.5s; -o-transition-duration: 1.5s; transition-duration: 1.5s; -webkit-transition-delay: 3s; -moz-transition-delay: 3s; -ms-transition-delay: 3s; -o-transition-delay: 3s; transition-delay: 3s; } #sequence .animate-out .star3 { left: 300px; opacity: 0; top: 275px; transform: translate(3000px); -webkit-transform: translate(3000px); -moz-transform: translate(3000px); -o-transform: translate(3000px); -ms-transform: translate(3000px); -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -ms-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; -webkit-transition-delay: 1s; -moz-transition-delay: 1s; -ms-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; } /*star4*/ #sequence .star4 { position: absolute; left: 3000px; top: 310px; transform: translate(3000px); -webkit-transform: translate(3000px); -moz-transform: translate(3000px); -o-transform: translate(3000px); -ms-transform: translate(3000px); } #sequence .animate-in .star4 { left: 300px; top: 310px; transform: translate(300px); -webkit-transform: translate(300px); -moz-transform: translate(300px); -o-transform: translate(300px); -ms-transform: translate(300px); -webkit-transition-duration: 1.5s; -moz-transition-duration: 1.5s; -ms-transition-duration: 1.5s; -o-transition-duration: 1.5s; transition-duration: 1.5s; -webkit-transition-delay: 4s; -moz-transition-delay: 4s; -ms-transition-delay: 4s; -o-transition-delay: 4s; transition-delay: 4s; } #sequence .animate-out .star4 { left: 300px; opacity: 0; top: 310px; transform: translate(3000px); -webkit-transform: translate(3000px); -moz-transform: translate(3000px); -o-transform: translate(3000px); -ms-transform: translate(3000px); -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -ms-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; -webkit-transition-delay: 1s; -moz-transition-delay: 1s; -ms-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; } /*star5*/ #sequence .star5 { position: absolute; left: 3000px; top: 345px; transform: translate(3000px); -webkit-transform: translate(3000px); -moz-transform: translate(3000px); -o-transform: translate(3000px); -ms-transform: translate(3000px); } #sequence .animate-in .star5 { left: 300px; top: 345px; transform: translate(300px); -webkit-transform: translate(300px); -moz-transform: translate(300px); -o-transform: translate(300px); -ms-transform: translate(300px); -webkit-transition-duration: 1.5s; -moz-transition-duration: 1.5s; -ms-transition-duration: 1.5s; -o-transition-duration: 1.5s; transition-duration: 1.5s; -webkit-transition-delay: 5s; -moz-transition-delay: 5s; -ms-transition-delay: 5s; -o-transition-delay: 5s; transition-delay: 5s; } #sequence .animate-out .star5 { left: 300px; opacity: 0; top: 345px; transform: translate(3000px); -webkit-transform: translate(3000px); -moz-transform: translate(3000px); -o-transform: translate(3000px); -ms-transform: translate(3000px); -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -ms-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; -webkit-transition-delay: 1s; -moz-transition-delay: 1s; -ms-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; } /*star6*/ #sequence .star6 { position: absolute; left: 3000px; top: 380px; transform: translate(3000px); -webkit-transform: translate(3000px); -moz-transform: translate(3000px); -o-transform: translate(3000px); -ms-transform: translate(3000px); } #sequence .animate-in .star6 { left: 300px; top: 380px; transform: translate(300px); -webkit-transform: translate(300px); -moz-transform: translate(300px); -o-transform: translate(300px); -ms-transform: translate(300px); -webkit-transition-duration: 1.5s; -moz-transition-duration: 1.5s; -ms-transition-duration: 1.5s; -o-transition-duration: 1.5s; transition-duration: 1.5s; -webkit-transition-delay: 6s; -moz-transition-delay: 6s; -ms-transition-delay: 6s; -o-transition-delay: 6s; transition-delay: 6s; } #sequence .animate-out .star6 { left: 300px; opacity: 0; top: 380px; transform: translate(3000px); -webkit-transform: translate(3000px); -moz-transform: translate(3000px); -o-transform: translate(3000px); -ms-transform: translate(3000px); -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -ms-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; -webkit-transition-delay: 1s; -moz-transition-delay: 1s; -ms-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; } /*touchcomputerpic*/ #sequence .WebDevelopment .touchcomputerpic { position: relative; left: -2000px; top: 30px; width: 450px; max-width:450px !important; transform: translate(-2000px); -webkit-transform: translate(-2000px); -moz-transform: translate(-2000px); -o-transform: translate(-2000px); -ms-transform: translate(-2000px); } #sequence .animate-in .WebDevelopment .touchcomputerpic { left: 0px; top: 30px; transform: translate(0px); -webkit-transform: translate(0px); -moz-transform: translate(0px); -o-transform: translate(0px); -ms-transform: translate(0px); -webkit-transition-duration: 1.5s; -moz-transition-duration: 1.5s; -ms-transition-duration: 1.5s; -o-transition-duration: 1.5s; transition-duration: 1.5s; -webkit-transition-delay: 2s; -moz-transition-delay: 2s; -ms-transition-delay: 2s; -o-transition-delay: 2s; transition-delay: 2s; } #sequence .animate-out .WebDevelopment .touchcomputerpic { left: -2000px; opacity: 0; top: 380px; transform: translate(-2000px); -webkit-transform: translate(-2000px); -moz-transform: translate(-2000px); -o-transform: translate(-2000px); -ms-transform: translate(-2000px); -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -ms-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; -webkit-transition-delay: 1s; -moz-transition-delay: 1s; -ms-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; } /*ipadpic*/ #sequence .WebDevelopment .ipadpic { position: absolute; left: 160px; top: -2000px; width: 180px; transform: translate(160px,-2000px); -webkit-transform: translate(160px,-2000px); -moz-transform: translate(160px,-2000px); -o-transform: translate(160px,-2000px); -ms-transform: translate(160px,-2000px); } #sequence .animate-in .WebDevelopment .ipadpic { left: 160px; top: 80px; transform: translate(160px,80px); -webkit-transform: translate(160px,80px); -moz-transform: translate(160px,80px); -o-transform: translate(160px,80px); -ms-transform: translate(160px,80px); -webkit-transition-duration: 1.5s; -moz-transition-duration: 1.5s; -ms-transition-duration: 1.5s; -o-transition-duration: 1.5s; transition-duration: 1.5s; -webkit-transition-delay: 2.5s; -moz-transition-delay: 2.5s; -ms-transition-delay: 2.5s; -o-transition-delay: 2.5s; transition-delay: 2.5s; } #sequence .animate-out .WebDevelopment .ipadpic { left: 160px; opacity: 0; top: -2000px; transform: translate(160px,-2000px); -webkit-transform: translate(160px,-2000px); -moz-transform: translate(160px,-2000px); -o-transform: translate(160px,-2000px); -ms-transform: translate(160px,-2000px); -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -ms-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; -webkit-transition-delay: 1s; -moz-transition-delay: 1s; -ms-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; } /*cellphonepic*/ #sequence .WebDevelopment .cellphonepic { position: absolute; left: 210px; top: 2000px; width: 130px; transform: translate(210px,2000px); -webkit-transform: translate(210px,2000px); -moz-transform: translate(210px,2000px); -o-transform: translate(210px,2000px); -ms-transform: translate(210px,2000px); } #sequence .animate-in .WebDevelopment .cellphonepic { left: 210px; top: 110px; transform: translate(210px,110px); -webkit-transform: translate(210px,110px); -moz-transform: translate(210px,110px); -o-transform: translate(210px,110px); -ms-transform: translate(210px,110px); -webkit-transition-duration: 1.5s; -moz-transition-duration: 1.5s; -ms-transition-duration: 1.5s; -o-transition-duration: 1.5s; transition-duration: 1.5s; -webkit-transition-delay: 3s; -moz-transition-delay: 3s; -ms-transition-delay: 3s; -o-transition-delay: 3s; transition-delay: 3s; } #sequence .animate-out .WebDevelopment .cellphonepic { left: 210px; opacity: 0; top: 2000px; transform: translate(210px,2000px); -webkit-transform: translate(210px,2000px); -moz-transform: translate(210px,2000px); -o-transform: translate(210px,2000px); -ms-transform: translate(210px,2000px); -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -ms-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; -webkit-transition-delay: 1s; -moz-transition-delay: 1s; -ms-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; } /*csshtml5Logos*/ #sequence .WebDevelopment .csshtml5Logos { position: absolute; left: 10px; top: 2000px; width: 190px; transform: translate(10px,2000px); -webkit-transform: translate(10px,2000px); -moz-transform: translate(10px,2000px); -o-transform: translate(10px,2000px); -ms-transform: translate(10px,2000px); } #sequence .animate-in .WebDevelopment .csshtml5Logos { left: 10px; top: 150px; transform: translate(10px,150px); -webkit-transform: translate(10px,150px); -moz-transform: translate(10px,150px); -o-transform: translate(10px,150px); -ms-transform: translate(10px,150px); -webkit-transition-duration: 1.5s; -moz-transition-duration: 1.5s; -ms-transition-duration: 1.5s; -o-transition-duration: 1.5s; transition-duration: 1.5s; -webkit-transition-delay: 3.5s; -moz-transition-delay: 3.5s; -ms-transition-delay: 3.5s; -o-transition-delay: 3.5s; transition-delay: 3.5s; } #sequence .animate-out .WebDevelopment .csshtml5Logos { left: 10px; opacity: 0; top: 2000px; transform: translate(10px,2000px); -webkit-transform: translate(10px,2000px); -moz-transform: translate(10px,2000px); -o-transform: translate(10px,2000px); -ms-transform: translate(10px,2000px); -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -ms-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; -webkit-transition-delay: 1s; -moz-transition-delay: 1s; -ms-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; } /*------------------------------------------------------- */ /*MobileAppLangLogos*/ #sequence .MobileDevelopment .MobileAppLangLogos { position: absolute; left: 10px; top: -2000px; width: 180px; max-width:180px !important; transform: translate(10px,-2000px); -webkit-transform: translate(10px,-2000px); -moz-transform: translate(10px,-2000px); -o-transform: translate(10px,-2000px); -ms-transform: translate(10px,-2000px); } #sequence .animate-in .MobileDevelopment .MobileAppLangLogos { left: 10px; top: 80px; top: 130px\9; transform: translate(10px,80px); -webkit-transform: translate(10px,80px); -moz-transform: translate(10px,80px); -o-transform: translate(10px,80px); -ms-transform: translate(10px,80px); -webkit-transition-duration: 1.5s; -moz-transition-duration: 1.5s; -ms-transition-duration: 1.5s; -o-transition-duration: 1.5s; transition-duration: 1.5s; -webkit-transition-delay: 2.5s; -moz-transition-delay: 2.5s; -ms-transition-delay: 2.5s; -o-transition-delay: 2.5s; transition-delay: 2.5s; } #sequence .animate-out .MobileDevelopment .MobileAppLangLogos { left: 10px; opacity: 0; top: -2000px; transform: translate(10px,-2000px); -webkit-transform: translate(10px,-2000px); -moz-transform: translate(10px,-2000px); -o-transform: translate(10px,-2000px); -ms-transform: translate(10px,-2000px); -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -ms-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; -webkit-transition-delay: 1s; -moz-transition-delay: 1s; -ms-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; } /*handholdingphone*/ #sequence .MobileDevelopment .handholdingphone { position: absolute; left: 130px; top: 2000px; width: 300px; max-width:300px !important; transform: translate(130px,2000px); -webkit-transform: translate(130px,2000px); -moz-transform: translate(130px,2000px); -o-transform: translate(130px,2000px); -ms-transform: translate(130px,2000px); } #sequence .animate-in .MobileDevelopment .handholdingphone { left: 130px; top: 30px; transform: translate(130px,30px); -webkit-transform: translate(130px,30px); -moz-transform: translate(130px,30px); -o-transform: translate(130px,30px); -ms-transform: translate(130px,30px); -webkit-transition-duration: 1.5s; -moz-transition-duration: 1.5s; -ms-transition-duration: 1.5s; -o-transition-duration: 1.5s; transition-duration: 1.5s; -webkit-transition-delay: 3s; -moz-transition-delay: 3s; -ms-transition-delay: 3s; -o-transition-delay: 3s; transition-delay: 3s; } #sequence .animate-out .MobileDevelopment .handholdingphone { left: 130px; opacity: 0; top: 2000px; transform: translate(130px,2000px); -webkit-transform: translate(130px,2000px); -moz-transform: translate(130px,2000px); -o-transform: translate(130px,2000px); -ms-transform: translate(130px,2000px); -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -ms-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; -webkit-transition-delay: 1s; -moz-transition-delay: 1s; -ms-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; } /*MobleDevBackAppsQube*/ #sequence .MobileDevelopment .MobleDevBackAppsQube { position: relative; left: -50px; top: 30px; width: 560px; max-width:560px !important; opacity: 0; -webkit-transition: opacity 1s linear; -moz-transition: opacity 1s linear; -o-transition: opacity 1s linear; transition: opacity 1s linear; } #sequence .animate-in .MobileDevelopment .MobleDevBackAppsQube { opacity: 1; left: 0px; top: 30px; -webkit-transition: opacity 1s linear; -moz-transition: opacity 1s linear; -o-transition: opacity 1s linear; transition: opacity 1s linear; -webkit-transition-delay: 1s; -moz-transition-delay: 1s; -ms-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; } #sequence .animate-out .MobileDevelopment .MobleDevBackAppsQube { opacity: 0; left: 0px; top: 30px; -webkit-transition: opacity 0.15s linear; -moz-transition: opacity 0.15s linear; -o-transition: opacity 0.15s linear; transition: opacity 0.15s linear; -webkit-transition-delay: 1s; -moz-transition-delay: 1s; -ms-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; } /*------------------------------------------------------- */ /*sharepointphoneapp*/ #sequence .SharepointDevelopment .sharepointphoneapp { position: absolute; left: 140px; top: 2000px; width: 250px; max-width:250px !important; transform: translate(140px,2000px); -webkit-transform: translate(140px,2000px); -moz-transform: translate(140px,2000px); -o-transform: translate(140px,2000px); -ms-transform: translate(140px,2000px); } #sequence .animate-in .SharepointDevelopment .sharepointphoneapp { left: 140px; top: 100px; transform: translate(140px,100px); -webkit-transform: translate(140px,100px); -moz-transform: translate(140px,100px); -o-transform: translate(140px,100px); -ms-transform: translate(140px,100px); -webkit-transition-duration: 1.5s; -moz-transition-duration: 1.5s; -ms-transition-duration: 1.5s; -o-transition-duration: 1.5s; transition-duration: 1.5s; -webkit-transition-delay: 3s; -moz-transition-delay: 3s; -ms-transition-delay: 3s; -o-transition-delay: 3s; transition-delay: 3s; } #sequence .animate-out .SharepointDevelopment .sharepointphoneapp { left: 140px; opacity: 0; top: 2000px; transform: translate(140px,2000px); -webkit-transform: translate(140px,2000px); -moz-transform: translate(140px,2000px); -o-transform: translate(140px,2000px); -ms-transform: translate(140px,2000px); -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -ms-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; -webkit-transition-delay: 1s; -moz-transition-delay: 1s; -ms-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; } /*sharepointflowchart*/ #sequence .SharepointDevelopment .sharepointflowchart { position: absolute; left: -2000px; top: 30px; width: 400px; max-width:400px !important; transform: translate(-2000px); -webkit-transform: translate(-2000px); -moz-transform: translate(-2000px); -o-transform: translate(-2000px); -ms-transform: translate(-2000px); } #sequence .animate-in .SharepointDevelopment .sharepointflowchart { left: 0px; top: 30px; transform: translate(0px); -webkit-transform: translate(0px); -moz-transform: translate(0px); -o-transform: translate(0px); -ms-transform: translate(0px); -webkit-transition-duration: 1.5s; -moz-transition-duration: 1.5s; -ms-transition-duration: 1.5s; -o-transition-duration: 1.5s; transition-duration: 1.5s; -webkit-transition-delay: 2s; -moz-transition-delay: 2s; -ms-transition-delay: 2s; -o-transition-delay: 2s; transition-delay: 2s; } #sequence .animate-out .SharepointDevelopment .sharepointflowchart { left: -2000px; opacity: 0; top: 380px; transform: translate(-2000px); -webkit-transform: translate(-2000px); -moz-transform: translate(-2000px); -o-transform: translate(-2000px); -ms-transform: translate(-2000px); -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -ms-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; -webkit-transition-delay: 1s; -moz-transition-delay: 1s; -ms-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; } /*sharepointwindow*/ #sequence .SharepointDevelopment .sharepointwindow { position: relative; left: 0px; top: -2000px; width: 570px; max-width:570px !important; transform: translate(0px,-2000px); -webkit-transform: translate(0px,-2000px); -moz-transform: translate(0px,-2000px); -o-transform: translate(0px,-2000px); -ms-transform: translate(0px,-2000px); } #sequence .animate-in .SharepointDevelopment .sharepointwindow { left: 0px; top: 0px; transform: translate(0px,0px); -webkit-transform: translate(0px,0px); -moz-transform: translate(0px,0px); -o-transform: translate(0px,0px); -ms-transform: translate(0px,0px); -webkit-transition-duration: 1.5s; -moz-transition-duration: 1.5s; -ms-transition-duration: 1.5s; -o-transition-duration: 1.5s; transition-duration: 1.5s; -webkit-transition-delay: 2.5s; -moz-transition-delay: 2.5s; -ms-transition-delay: 2.5s; -o-transition-delay: 2.5s; transition-delay: 2.5s; } #sequence .animate-out .SharepointDevelopment .sharepointwindow { left: 0px; opacity: 0; top: -2000px; transform: translate(0px,-2000px); -webkit-transform: translate(0px,-2000px); -moz-transform: translate(0px,-2000px); -o-transform: translate(0px,-2000px); -ms-transform: translate(0px,-2000px); -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -ms-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; -webkit-transition-delay: 1s; -moz-transition-delay: 1s; -ms-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; } /*------------------------------------------------------- */ /*itconsultingpic*/ #sequence .ITConsulting .itconsultingpic { position: relative; left: 0px; top: 0px; width: 560px; max-width:560px !important; opacity: 0; -webkit-transition: opacity 1s linear; -moz-transition: opacity 1s linear; -o-transition: opacity 1s linear; transition: opacity 1s linear; } #sequence .animate-in .ITConsulting .itconsultingpic { opacity: 1; left: 0px; top: 0px; -webkit-transition: opacity 1s linear; -moz-transition: opacity 1s linear; -o-transition: opacity 1s linear; transition: opacity 1s linear; -webkit-transition-delay: 1s; -moz-transition-delay: 1s; -ms-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; } #sequence .animate-out .ITConsulting .itconsultingpic { opacity: 0; left: 0px; top: 0px; -webkit-transition: opacity 0.15s linear; -moz-transition: opacity 0.15s linear; -o-transition: opacity 0.15s linear; transition: opacity 0.15s linear; -webkit-transition-delay: 1s; -moz-transition-delay: 1s; -ms-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; } /*------------------------------------------------------- */ #sequence .product { color: #0072C6; font-family: Arial Unicode MS; font-size: 18px; width: 384px; direction:rtl; text-align:right; } #sequence .product strong { color: #0072C6; font-family: Arial Unicode MS; font-size: 18px; } /*product1*/ #sequence .product1 { position: absolute; left: 3000px; top: 205px; transform: translate(3000px); -webkit-transform: translate(3000px); -moz-transform: translate(3000px); -o-transform: translate(3000px); -ms-transform: translate(3000px); } #sequence .animate-in .product1 { left: 300px; top: 205px; transform: translate(300px); -webkit-transform: translate(300px); -moz-transform: translate(300px); -o-transform: translate(300px); -ms-transform: translate(300px); -webkit-transition-duration: 1.5s; -moz-transition-duration: 1.5s; -ms-transition-duration: 1.5s; -o-transition-duration: 1.5s; transition-duration: 1.5s; -webkit-transition-delay: 1s; -moz-transition-delay: 1s; -ms-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; } #sequence .animate-out .product1 { left: 300px; opacity: 0; top: 205px; transform: translate(3000px); -webkit-transform: translate(3000px); -moz-transform: translate(3000px); -o-transform: translate(3000px); -ms-transform: translate(3000px); -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -ms-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; -webkit-transition-delay: 1s; -moz-transition-delay: 1s; -ms-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; } /*product2*/ #sequence .product2 { position: absolute; left: 3000px; top: 285px; transform: translate(3000px); -webkit-transform: translate(3000px); -moz-transform: translate(3000px); -o-transform: translate(3000px); -ms-transform: translate(3000px); } #sequence .animate-in .product2 { left: 300px; top: 285px; transform: translate(300px); -webkit-transform: translate(300px); -moz-transform: translate(300px); -o-transform: translate(300px); -ms-transform: translate(300px); -webkit-transition-duration: 1.5s; -moz-transition-duration: 1.5s; -ms-transition-duration: 1.5s; -o-transition-duration: 1.5s; transition-duration: 1.5s; -webkit-transition-delay: 2s; -moz-transition-delay: 2s; -ms-transition-delay: 2s; -o-transition-delay: 2s; transition-delay: 2s; } #sequence .animate-out .product2 { left: 300px; opacity: 0; top: 285px; transform: translate(3000px); -webkit-transform: translate(3000px); -moz-transform: translate(3000px); -o-transform: translate(3000px); -ms-transform: translate(3000px); -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -ms-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; -webkit-transition-delay: 1s; -moz-transition-delay: 1s; -ms-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; } /*product3*/ #sequence .product3 { position: absolute; left: 3000px; top: 365px; transform: translate(3000px); -webkit-transform: translate(3000px); -moz-transform: translate(3000px); -o-transform: translate(3000px); -ms-transform: translate(3000px); } #sequence .animate-in .product3 { left: 300px; top: 365px; transform: translate(300px); -webkit-transform: translate(300px); -moz-transform: translate(300px); -o-transform: translate(300px); -ms-transform: translate(300px); -webkit-transition-duration: 1.5s; -moz-transition-duration: 1.5s; -ms-transition-duration: 1.5s; -o-transition-duration: 1.5s; transition-duration: 1.5s; -webkit-transition-delay: 3s; -moz-transition-delay: 3s; -ms-transition-delay: 3s; -o-transition-delay: 3s; transition-delay: 3s; } #sequence .animate-out .product3 { left: 300px; opacity: 0; top: 365px; transform: translate(3000px); -webkit-transform: translate(3000px); -moz-transform: translate(3000px); -o-transform: translate(3000px); -ms-transform: translate(3000px); -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -ms-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; -webkit-transition-delay: 1s; -moz-transition-delay: 1s; -ms-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; } /*ManWithTechBoard*/ #sequence .Products .ManWithTechBoard { position: relative; left: -120px; top: 20px; width: 700px; max-width:700px !important; opacity: 0; -webkit-transition: opacity 1s linear; -moz-transition: opacity 1s linear; -o-transition: opacity 1s linear; transition: opacity 1s linear; } #sequence .animate-in .Products .ManWithTechBoard { opacity: 1; left: -120px; top: 20px; -webkit-transition: opacity 1s linear; -moz-transition: opacity 1s linear; -o-transition: opacity 1s linear; transition: opacity 1s linear; -webkit-transition-delay: 3s; -moz-transition-delay: 3s; -ms-transition-delay: 3s; -o-transition-delay: 3s; transition-delay: 3s; } #sequence .animate-out .Products .ManWithTechBoard { opacity: 0; left: -120px; top: 20px; -webkit-transition: opacity 0.15s linear; -moz-transition: opacity 0.15s linear; -o-transition: opacity 0.15s linear; transition: opacity 0.15s linear; -webkit-transition-delay: 1s; -moz-transition-delay: 1s; -ms-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; } .sideImage { float: right; margin-left: 10px; width: 60px; } @media all\0 { #sequence .animate-in .main { left: 570px; } #sequence .animate-in .whymyworld { left: 570px; } #sequence .animate-in .star1 { left: 570px; } #sequence .animate-in .star2 { left: 570px;} #sequence .animate-in .star3 { left: 570px;} #sequence .animate-in .star4 { left: 570px;} #sequence .animate-in .star5 { left:570px;} #sequence .animate-in .star6 { left:570px;} #sequence .animate-in .WebDevelopment .ipadpic { left: 280px; top: 160px; } #sequence .animate-in .WebDevelopment .cellphonepic { left: 350px; top: 220px; } #sequence .animate-in .WebDevelopment .csshtml5Logos { top: 290px; } #sequence .animate-in .MobileDevelopment .MobileAppLangLogos { top: 130px; } #sequence .animate-in .MobileDevelopment .handholdingphone { left: 200px; top: 60px; } #sequence .animate-in .SharepointDevelopment .sharepointphoneapp { left: 320px; top: 200px; } #sequence .animate-in .product1 { left: 570px; } #sequence .animate-in .product2 { left: 570px; } #sequence .animate-in .product3 { left: 570px; } } @media all and (monochrome:0) { #sequence .animate-in .main { left:280px\9; } #sequence .animate-in .whymyworld { left:280px\9;} #sequence .animate-in .star1 { left:280px\9; } #sequence .animate-in .star2 { left:280px\9;} #sequence .animate-in .star3 { left:280px\9;} #sequence .animate-in .star4 { left:280px\9;} #sequence .animate-in .star5 { left:280px\9;} #sequence .animate-in .star6 { left:280px\9;} #sequence .animate-in .WebDevelopment .ipadpic { left: 160px\9; top: 80px\9; } #sequence .animate-in .WebDevelopment .cellphonepic { left: 210px\9; top: 110px\9; } #sequence .animate-in .WebDevelopment .csshtml5Logos { top: 150px\9; } #sequence .animate-in .MobileDevelopment .MobileAppLangLogos { top: 80px\9; } #sequence .animate-in .MobileDevelopment .handholdingphone { left: 130px\9; top: 30px\9; } #sequence .animate-in .SharepointDevelopment .sharepointphoneapp { left: 140px\9; top: 100px\9; } #sequence .animate-in .product1 { left: 280px\9; } #sequence .animate-in .product2 { left: 280px\9; } #sequence .animate-in .product3 { left: 280px\9; } } @media all and (-ms-high-contrast:none) { #sequence .animate-in .main { left:300px; } #sequence .animate-in .whymyworld { left:300px;} #sequence .animate-in .star1 { left:300px;; } #sequence .animate-in .star2 { left:300px;} #sequence .animate-in .star3 { left:300px;} #sequence .animate-in .star4 { left:300px;} #sequence .animate-in .star5 { left:300px;} #sequence .animate-in .star6 { left:300px;} #sequence .animate-in .WebDevelopment .ipadpic { left: 160px; top: 80px; } #sequence .animate-in .WebDevelopment .cellphonepic { left: 210px; top: 110px; } #sequence .animate-in .WebDevelopment .csshtml5Logos { top: 150px; } #sequence .animate-in .MobileDevelopment .MobileAppLangLogos { top: 80px; } #sequence .animate-in .MobileDevelopment .handholdingphone { left: 130px; top: 30px; } #sequence .animate-in .SharepointDevelopment .sharepointphoneapp { left: 140px; top: 100px; } #sequence .animate-in .product1 { left: 300px; } #sequence .animate-in .product2 { left: 300px; } #sequence .animate-in .product3 { left: 300px; } }