* { margin:0; padding:0 } .outer-div { width: 100%; height: 100%; overflow: hidden; } /*Main Slider*/ #demo { width:100%; height: 100%; font-family: 'Roboto', sans-serif; margin:0 auto; position: absolute; overflow: hidden; } #demo.loading * { opacity: 0!important; visibility: hidden!important; } #demo.loading { background: url(../img/fullscreenheight-loading.gif) no-repeat center #0073ff; } #demo a, #demo input { outline: none; } /*Pagination*/ #demo .pagination { width:50%; text-align:center; position:absolute; left:25%; bottom:10px; z-index: 999; } #demo .pagination a { width:10px; height:10px; margin:0 2px; display:inline-block; background: rgba(0,0,0,0.5); border-radius:80px; position:relative; font-size: 1px; text-indent: -10000px; } #demo .pagination a.active,.pagi a.find { background: rgba(0,0,0,0.2); } /*Controls (Next & Previous)*/ #demo .control a { width:30px; height: 30px; display: block; font-size: 1px; text-indent: -15000px; text-decoration: none; background-repeat: no-repeat; background-size: 100%; position: absolute; bottom: 10px; z-index: 999; } #demo .control a.prev { right: 45px; background-image: url(../img/prev.png); } #demo .control a.next { right: 10px; background-image: url(../img/next.png); } /*Play & Pause*/ #demo .process { width:0; height:2px; background:#fff; position:absolute; left:0; bottom:1px; z-index: 999; } #demo .playpause { width:9px; height:11px; display:inline-block; background:url(../img/pause.png) no-repeat; position:absolute; left:10px; bottom:10px; z-index: 999; } #demo .playpause.pause { background:url(../img/play.png) no-repeat; z-index: 999; } /*Search*/ .js_search { width:100%; text-align:center; margin-top:10px; overflow:hidden; } .js_search input { width:400px; font-family: 'Roboto', sans-serif; font-size:15px; font-weight:300; color:#000; border:none; border-radius: 20px; padding:12px; background:url(../img/search-icon-fs.png) no-repeat 96% center #ccc; outline:none; } .js_search .searchresult { margin:14px; display:inline-block; position: absolute; overflow: hidden; } .js_search .searchresult a { width: 20px; height: 20px; margin-right: 5px; text-align: center; line-height: 20px; display:inline-block; color: #fff; background:#d41414; border-radius:80px; text-decoration: none; font-size: 12px; font-family: Arial, Helvetica, sans-serif; } /*Slide*/ #demo .slide { height:650px; width: 100%; color:#1961A9; overflow:hidden; position:absolute; left: 0; top: 0; background: rgba(0,115,255,1); background: -moz-linear-gradient(left, rgba(0,115,255,1) 0%, rgba(0,200,255,1) 100%); background: -webkit-gradient(left top, right top, color-stop(0%, rgba(0,115,255,1)), color-stop(100%, rgba(0,200,255,1))); background: -webkit-linear-gradient(left, rgba(0,115,255,1) 0%, rgba(0,200,255,1) 100%); background: -o-linear-gradient(left, rgba(0,115,255,1) 0%, rgba(0,200,255,1) 100%); background: -ms-linear-gradient(left, rgba(0,115,255,1) 0%, rgba(0,200,255,1) 100%); background: linear-gradient(to right, rgba(0,115,255,1) 0%, rgba(0,200,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0073ff', endColorstr='#00c8ff', GradientType=1 ); } #demo .slide.current { z-index: 998; } /*Youtube Video Cover Div*/ #demo .slide .cover { width:100%; height:100%; opacity:.5; background:#000; cursor:pointer; position:absolute; } #demo .slide .cover.hide { opacity:1; height:auto; background:transparent; } #demo .slide .cover .close { font-family:FontAwesome; font-size:32px; color:#fff; position:absolute; right:20px; top:50px; } #demo .slide .cover .close:before { content:"\f00d"; } /*Youtube Video In Background Div*/ #demo .slide .videoinbg { z-index:0; } /*Slide 1*/ #demo .slide.index1 h1 { font-size:55px; font-weight:300; color: #000; margin: 200px 0 0 300px; } #demo .slide.index1 h2 { font-size:22px; font-weight:300; color: #000; margin: 10px 0 0 300px; } #demo .slide.index1 h3 { font-size:20px; font-weight:300; color: #000; position: absolute; left: 300px; top:478px; opacity: 0; } #demo .slide.index1 .line { display: block; width: 2px; height: 0px; background:#00C7FF; border-radius: 80px; position: absolute; left: 479px; top:419px; } #demo .slide.index1 .point { display: block; width: 15px; height: 15px; background:#0C6CE1; border:solid 2px #00C7FF; border-radius: 80px; position: absolute; left: 470px; opacity: 0; } #demo .slide.index1 .point.one { top:400px; } #demo .slide.index1 .point.two { top:440px; } #demo .slide.index1 .point.three { top:480px; } #demo .slide.index1 .point.four { top:520px; } #demo .slide.index1 .point.five { top:560px; } #demo .slide.index1 .tag { display: block; font-size: 14px; color: #00C7FF; background:#0C6CE1; border-radius: 80px; padding: 3px 25px; position: absolute; left: 500px; opacity: 0; } #demo .slide.index1 .tag.one { top: 397px; } #demo .slide.index1 .tag.two { top: 439px; } #demo .slide.index1 .tag.three { top: 479px; } #demo .slide.index1 .tag.four { top: 518px; } #demo .slide.index1 .tag.five { top: 560px; } #demo .slide.index1 .feature-img { position: absolute; z-index: 999; opacity: 0; } #demo .slide.index1 .feature-img.one { left: 906px; top:226px; } #demo .slide.index1 .feature-img.two { left: 956px; top:296px; } #demo .slide.index1 .feature-img.three { left: 906px; top:366px; } #demo .slide.index1 .feature-img.four { left: 956px; top:436px; } #demo .slide.index1 .feature-img.five { left: 906px; top:506px; } #demo .slide.index1 .feature-img.six { left: 956px; top:576px; } #demo .slide.index1 .feature { width: 315px; padding-left: 75px; height: 52px; line-height: 52px; font-size: 17px; color: #00C7FF; background:url(../img/tag-bg.png) no-repeat; position: absolute; opacity: 0; } #demo .slide.index1 .feature.one { left: 900px; top:224px; } #demo .slide.index1 .feature.two { left: 950px; top:294px; } #demo .slide.index1 .feature.three { left: 900px; top:364px; } #demo .slide.index1 .feature.four { left: 950px; top:434px; } #demo .slide.index1 .feature.five { left: 900px; top:504px; } #demo .slide.index1 .feature.six { left: 950px; top:574px; } /*Slide 2*/ #demo .slide.index2 { text-align: center; } #demo .slide.index2 h1 { font-size:55px; font-weight:300; color: #000; margin: 200px 0 0 0; } #demo .slide.index2 h2 { font-size:22px; font-weight:300; color: #000; margin: 10px 0 0 0; } #demo .slide.index2 .apple { position: absolute; bottom:100px; opacity: 0; } #demo .slide.index2 .apple.mac { left: 50%; margin-left: -152.5px; } #demo .slide.index2 .apple.book { left: 50%; margin-left: 138px; } #demo .slide.index2 .apple.phone { left: 50%; margin-left: -105px; } #demo .slide.index2 .apple.pad { left: 50%; margin-left: -268px; } /*Slide 3*/ #demo .slide.index3 { } #demo .slide.index3 h1 { font-size:55px; font-weight:300; color: #000; margin: 200px 0 0 300px; } #demo .slide.index3 h2 { font-size:22px; font-weight:300; color: #000; margin: 10px 0 0 300px; } #demo .slide.index3 .state-title { border-radius: 5px; font-size:12px; text-align: center; font-weight: 600; color:#000; position: absolute; bottom:100px; left: 590px; opacity: 0; } #demo .slide.index3 .state { width: 7px; height: 0px; border-radius: 5px; background: #000; position: absolute; bottom:100px; left: 600px; } #demo .slide.index3 .state-title.perf { left: 300px; } #demo .slide.index3 .state.perf { left: 320px; } #demo .slide.index3 .state-title.desi { left: 370px; } #demo .slide.index3 .state.desi { left: 390px; } #demo .slide.index3 .state-title.feat { left: 440px; } #demo .slide.index3 .state.feat { left: 460px; } #demo .slide.index3 .other-img { position: absolute; top:213px; right: 416px; -webkit-animation-duration:5s; animation-duration:5s; } /*Slide 4*/ #demo .slide.index4 { } #demo .slide.index4 h2 { width: 100%; font-size:55px; font-weight:600; text-align: center; color: #000; position: absolute; top: 200px; } #demo .slide.index4 h2.opa { opacity: 0; } #demo .slide.index4 ul { font-size:18px; font-weight:300; color: #000; position: absolute; top: 200px; left: -1000px; list-style: none; } #demo .slide.index4 ul li { padding: 5px 25px; position: relative; } #demo .slide.index4 ul li:after { font-family: FontAwesome; content: "\f054"; left: 0; position: absolute; top: 12px; font-size: 15px; } #demo .slide.index4 .animation { width: 100px; height: 100px; background: #596273; border-radius: 80px; position: absolute; bottom:100px; left: 50%; } #demo .slide.index4 .animation.one { margin-left: -200px; background: #000; } #demo .slide.index4 .animation.two { margin-left: 100px; background: #000; } #demo .slide.index4 .animation.three { margin-left: -50px; background: #000; } /*Slide 5*/ #demo .slide.index5 { background:#000; } #demo .slide.index5 h1 { width:100%; font-size:55px; font-weight:300; color: #fff; text-align: center; position: absolute; bottom: 100px; -webkit-animation-duration:2s; animation-duration:2s; } /*Media Query*/ @media (max-width: 1500px) { /*Slide 1*/ #demo .slide.index1 h1 { margin-left:200px; } #demo .slide.index1 h2 { margin-left:200px; } #demo .slide.index1 h3 { left: 200px; } #demo .slide.index1 .line { left: 379px; } #demo .slide.index1 .point { left: 370px; } #demo .slide.index1 .tag { left: 400px; } #demo .slide.index1 .feature-img { margin-left:-100px; } #demo .slide.index1 .feature { margin-left:-100px; } /*Slide 3*/ #demo .slide.index3 h1 { margin-left: 200px; } #demo .slide.index3 h2 { margin-left: 200px; } #demo .slide.index3 .state-title.perf { left: 200px; } #demo .slide.index3 .state.perf { left: 220px; } #demo .slide.index3 .state-title.desi { left: 270px; } #demo .slide.index3 .state.desi { left: 290px; } #demo .slide.index3 .state-title.feat { left: 340px; } #demo .slide.index3 .state.feat { left: 360px; } #demo .slide.index3 .other-img { margin-right: -200px; } } @media (max-width: 1280px) { /*Slide 1*/ #demo .slide.index1 h1 { margin-left:100px; } #demo .slide.index1 h2 { margin-left:100px; } #demo .slide.index1 h3 { left: 100px; } #demo .slide.index1 .line { left: 279px; } #demo .slide.index1 .point { left: 270px; } #demo .slide.index1 .tag { left: 300px; } #demo .slide.index1 .feature-img { margin-left:-200px; } #demo .slide.index1 .feature { margin-left:-200px; } #demo .slide.index1 .feature-img { margin-left:-350px; } #demo .slide.index1 .feature { margin-left:-350px; } /*Slide 3*/ #demo .slide.index3 h1 { margin-left: 100px; } #demo .slide.index3 h2 { margin-left: 100px; } #demo .slide.index3 .state-title.perf { left: 100px; } #demo .slide.index3 .state.perf { left: 120px; } #demo .slide.index3 .state-title.desi { left: 170px; } #demo .slide.index3 .state.desi { left: 190px; } #demo .slide.index3 .state-title.feat { left: 240px; } #demo .slide.index3 .state.feat { left: 260px; } #demo .slide.index3 .feature-img { margin-right: -200px; } } @media (max-width: 1024px) { /*Controls (Next & Previous)*/ #demo .control a { top:57px; } #demo .control a.fa-angle-left { left:inherit; right: 50px; } #demo .control a.fa-angle-right { right:20px; } } @media (max-width: 1023px) { /*Slide 1*/ #demo .slide.index1 h1 { margin-left:50px; margin-top: 150px; font-size: 30px; } #demo .slide.index1 h2 { margin-left:50px; font-size: 20px; } #demo .slide.index1 h3 { left: 50px; top: 300px; font-size: 17px; } #demo .slide.index1 .line { left: 59px; top: 368px; max-height: 160px; } #demo .slide.index1 .point { left: 50px; } #demo .slide.index1 .point.one { top:350px; } #demo .slide.index1 .point.two { top:390px; } #demo .slide.index1 .point.three { top:430px; } #demo .slide.index1 .point.four { top:470px; } #demo .slide.index1 .point.five { top:510px; } #demo .slide.index1 .tag { left: 100px; font-size: 14px; } #demo .slide.index1 .tag.one { top:346px; } #demo .slide.index1 .tag.two { top:386px; } #demo .slide.index1 .tag.three { top:426px; } #demo .slide.index1 .tag.four { top:466px; } #demo .slide.index1 .tag.five { top:506px; } #demo .slide.index1 .feature-img { width: 40px; margin-left: 0; } #demo .slide.index1 .feature-img.one { left: 500px; top:200px; } #demo .slide.index1 .feature-img.two { left: 500px; top:250px; } #demo .slide.index1 .feature-img.three { left: 500px; top:300px; } #demo .slide.index1 .feature-img.four { left: 500px; top:350px; } #demo .slide.index1 .feature-img.five { left: 500px; top:400px; } #demo .slide.index1 .feature-img.six { left: 500px; top:450px; } #demo .slide.index1 .feature { width: auto; background: none; height: auto; line-height: inherit; padding: 10px 10px 10px 50px; margin-left: 0; color: #000; } #demo .slide.index1 .feature.one { left: 500px; top:200px; } #demo .slide.index1 .feature.two { left: 500px; top:250px; } #demo .slide.index1 .feature.three { left: 500px; top:300px; } #demo .slide.index1 .feature.four { left: 500px; top:350px; } #demo .slide.index1 .feature.five { left: 500px; top:400px; } #demo .slide.index1 .feature.six { left: 500px; top:450px; } /*Slide 2*/ #demo .slide.index2 h1 { margin-top: 150px; font-size: 30px; } #demo .slide.index2 h2 { font-size: 20px; } #demo .slide.index2 .apple.book { margin-left:65px; } /*Slide 3*/ #demo .slide.index3 h1 { margin-top: 150px; margin-left: 50px; font-size: 30px; } #demo .slide.index3 h2 { margin-left: 50px; font-size: 20px; } #demo .slide.index3 .state { bottom: 50px; } #demo .slide.index3 .state-title { bottom: 50px; } #demo .slide.index3 .state-title.perf { left: 50px; } #demo .slide.index3 .state.perf { left: 70px; } #demo .slide.index3 .state-title.desi { left: 100px; } #demo .slide.index3 .state.desi { left: 120px; } #demo .slide.index3 .state-title.feat { left: 150px; } #demo .slide.index3 .state.feat { left: 170px; } #demo .slide.index3 .other-img { width: 150px; } #demo .slide.index3 .other-img.one { margin-right: -260px; } #demo .slide.index3 .other-img.two { margin-top: 30px; margin-right: -230px; } #demo .slide.index3 .other-img.four { margin-top: -30px; margin-right: -230px; } /*Slide 4*/ #demo .slide.index4 h2 { font-size: 30px; } /*Slide 5*/ #demo .slide.index5 h1 { font-size: 20px; } } @media (max-width: 768px) { /*Slide 4*/ #demo .slide.index4 h2 { top:150px; } #demo .slide.index4 ul { top:150px; } #demo .slide.index4 .animation { margin-bottom: -50px; } } @media (max-width: 767px) { /*Controls (Next & Previous)*/ #demo .control a { font-size: 40px; } /*Search*/ .js_search input { width: 50%; } /*Slide 1*/ #demo .slide.index1 h1 { margin-left:30px; margin-top: 120px; font-size: 25px; } #demo .slide.index1 h2 { margin-left:30px; font-size: 18px; } #demo .slide.index1 h3 { top:100px; left: 30px; } #demo .slide.index1 .line { left: 39px; top: 268px; max-height: 160px; } #demo .slide.index1 .point { left: 30px; } #demo .slide.index1 .point.one { top:250px; } #demo .slide.index1 .point.two { top:290px; } #demo .slide.index1 .point.three { top:330px; } #demo .slide.index1 .point.four { top:370px; } #demo .slide.index1 .point.five { top:410px; } #demo .slide.index1 .tag { left: 80px; } #demo .slide.index1 .tag.one { top:247px; } #demo .slide.index1 .tag.two { top:287px; } #demo .slide.index1 .tag.three { top:327px; } #demo .slide.index1 .tag.four { top:367px; } #demo .slide.index1 .tag.five { top:407px; } #demo .slide.index1 .feature-img.one { left: 400px; top:150px; } #demo .slide.index1 .feature-img.two { left: 400px; top:200px; } #demo .slide.index1 .feature-img.three { left: 400px; top:250px; } #demo .slide.index1 .feature-img.four { left: 400px; top:300px; } #demo .slide.index1 .feature-img.five { left: 400px; top:350px; } #demo .slide.index1 .feature-img.six { left: 400px; top:400px; } #demo .slide.index1 .feature.one { left: 400px; top:150px; } #demo .slide.index1 .feature.two { left: 400px; top:200px; } #demo .slide.index1 .feature.three { left: 400px; top:250px; } #demo .slide.index1 .feature.four { left: 400px; top:300px; } #demo .slide.index1 .feature.five { left: 400px; top:350px; } #demo .slide.index1 .feature.six { left: 400px; top:400px; } /*Slide 2*/ #demo .slide.index2 h1 { margin-top: 120px; font-size: 25px; } #demo .slide.index2 h2 { font-size: 18px; } #demo .slide.index2 .apple { bottom:50px; } #demo .slide.index2 .apple.mac { width: 200px; margin-left: -100px; bottom:80px; } #demo .slide.index2 .apple.book { width: 180px; margin-left:0; } #demo .slide.index2 .apple.phone { width:40px; margin-left: -50px; } #demo .slide.index2 .apple.pad { width: 80px; margin-left: -150px; } /*Slide 3*/ #demo .slide.index3 h1 { margin-left:30px; margin-top: 120px; font-size: 25px; } #demo .slide.index3 h2 { margin-left:30px; font-size: 18px; } #demo .slide.index3 .state.perf { max-height: 180px; } #demo .slide.index3 .state.feat { max-height: 170px; } #demo .slide.index3 .state-title.perf { left: 30px; } #demo .slide.index3 .state.perf { left: 50px; } #demo .slide.index3 .state-title.desi { left: 80px; } #demo .slide.index3 .state.desi { left: 100px; } #demo .slide.index3 .state-title.feat { left: 130px; } #demo .slide.index3 .state.feat { left: 150px; } #demo .slide.index3 .other-img { width: 100px; } #demo .slide.index3 .other-img.one { margin-top: -26px; margin-right: -317px; } #demo .slide.index3 .other-img.two { margin-top: 30px; margin-right: -258px; } #demo .slide.index3 .other-img.three { margin-top: -26px; } #demo .slide.index3 .other-img.four { margin-top: -84px; margin-right: -258px; } /*Slide 4*/ #demo .slide.index4 h2 { top:130px; font-size: 18px; } #demo .slide.index4 ul { top:130px; font-size: 17px; margin-left: -180px; } #demo .slide.index4 ul li::after { top:7px; } #demo .slide.index4 .animation.one { margin-left: -140px; } #demo .slide.index4 .animation.two { margin-left: 40px; } /*Slide 5*/ #demo .slide.index5 h1 { font-size: 15px; } } @media (max-width: 640px) { /*Slide 1*/ #demo .slide.index1 .feature-img { width: 30px; } #demo .slide.index1 .feature-img.one { left: 250px; top:200px; } #demo .slide.index1 .feature-img.two { left: 250px; top:240px; } #demo .slide.index1 .feature-img.three { left: 250px; top:280px; } #demo .slide.index1 .feature-img.four { left: 250px; top:320px; } #demo .slide.index1 .feature-img.five { left: 250px; top:360px; } #demo .slide.index1 .feature-img.six { left: 250px; top:400px; } #demo .slide.index1 .feature { font-size: 14px; } #demo .slide.index1 .feature.one { left: 240px; top:197px; } #demo .slide.index1 .feature.two { left: 240px; top:237px; } #demo .slide.index1 .feature.three { left: 240px; top:277px; } #demo .slide.index1 .feature.four { left: 240px; top:317px; } #demo .slide.index1 .feature.five { left: 240px; top:357px; } #demo .slide.index1 .feature.six { left: 240px; top:397px; } } @media (max-width: 480px) { /*Search*/ .js_search input { width: 60%; } /*Slide 1*/ #demo .slide.index1 .feature-img { width: 40px; } #demo .slide.index1 .feature-img.one { left: 70%; } #demo .slide.index1 .feature-img.two { left: 70%; } #demo .slide.index1 .feature-img.three { left: 70%; } #demo .slide.index1 .feature-img.four { left: 70%; } #demo .slide.index1 .feature-img.five { left: 70%; } #demo .slide.index1 .feature-img.six { left: 70%; } #demo .slide.index1 .feature { display: none; } /*Slide 2*/ #demo .slide.index2 .apple.book { width: 150px; } #demo .slide.index2 .apple.phone { width:30px; margin-left: -40px; } #demo .slide.index2 .apple.pad { width: 60px; margin-left: -130px; } /*Slide 3*/ #demo .slide.index3 .state-title.desi { left: 70px; } #demo .slide.index3 .state.desi { left: 90px; } #demo .slide.index3 .state-title.feat { left: 110px; } #demo .slide.index3 .state.feat { left: 130px; } #demo .slide.index3 .other-img { width: 70px; } #demo .slide.index3 .other-img.one { margin-top: -26px; margin-right: -442px; } #demo .slide.index3 .other-img.two { margin-top: 46px; margin-right: -366px; } #demo .slide.index3 .other-img.three { margin-right: -290px; margin-top: -26px; } #demo .slide.index3 .other-img.four { margin-top: -99px; margin-right: -366px; } } @media (max-width: 479px) { /*Slide 1*/ #demo .slide.index1 h1 { left: 10px; } #demo .slide.index1 h2 { left: 10px; } #demo .slide.index1 h3 { display: none; } #demo .slide.index1 .line { display: none!important; } #demo .slide.index1 .point { display: none; } #demo .slide.index1 .tag { left: 20px; padding-left: 10px; padding-right:10px; } } /*Other*/ #header { position: fixed; } body #header .custom-menu li:hover > a { background: none; color: #000; } body #header .custom-menu li.current > a { background: none; color: #fff; }