@charset "utf-8"; /*CSS developer :: Gopakumar*/ /* SGcoders website CSS Document */ @import url(http://fonts.googleapis.com/css?family=Fjalla+One); @import url(https://fonts.googleapis.com/css?family=Roboto); @import 'https://fonts.googleapis.com/css?family=Open+Sans'; @import 'https://fonts.googleapis.com/css?family=Roboto'; .container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container{width:1280px;} body{overflow-x:hidden; font-size:24px;} /* Dropdown Button */ .dropbtn { background-color: #4CAF50; color: #000000; padding: 16px; font-size: 16px; border: none; cursor: pointer; } /* Dropdown button on hover & focus */ .dropbtn:hover, .dropbtn:focus { background-color: #3e8e41; } /* The container
- needed to position the dropdown content */ .dropdown { position: relative; display: inline-block; color:#000000; height:30px; } .dropdown select { height:30px; } /* Dropdown Content (Hidden by Default) */ .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } /* Links inside the dropdown */ .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } /* Change color of dropdown links on hover */ .dropdown-content a:hover {background-color: #f1f1f1} /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */ .show {display:block;} .dropdown{height:auto;} .span10{width:100%;} #clients .clients ul.thumbnails>li{width:90px;} #clients .carousel{width:1280px;} .timeline-panel{text-align:center;} #timeline_wrap{width:1280px; height:auto; padding:0px; margin:0 auto; background:url(../images/timeline_bg.png) no-repeat center; padding-top:50px; padding-bottom:100px;} #time{background:#FFFFFF;width: 120px;height: 120px;margin-left: 565px;margin-bottom: -269px;border-radius: 150px 150px 150px 150px;-moz-border-radius: 150px 150px 150px 150px;-webkit-border-radius: 150px 150px 150px 150px;border: 10px solid #8F8F8F;} .time_content{padding:20px; width:auto; text-align:center;} #time1{background:#FFFFFF; width:300px; height:300px; margin-left:0px; border-radius: 300px 300px 300px 300px; -moz-border-radius: 300px 300px 300px 300px; -webkit-border-radius: 300px 300px 300px 300px; border: 10px solid #D1D1D1;} #time1:hover{background:#E1E0E0;} .time_content1{ padding:20px; width:auto; text-align:center;} .time_content1 img{ width:150px; text-align:center;} #time10{background:#FFFFFF;width: 400px;height: 400px;margin-top: 232px;margin-left: 277px;border-radius: 300px 300px 300px 300px;-moz-border-radius: 300px 300px 300px 300px;-webkit-border-radius: 300px 300px 300px 300px;border: 10px solid #D1D1D1;} #time10:hover{background:#E1E0E0;} .time_content10{ padding:40px; width:auto; text-align:center;} .time_content10 img{ width:150px; text-align:center;} #time2{background:#FFFFFF;width:250px;height:250px;margin-left: 329px;margin-top: -146px;border-radius: 250px 250px 250px 250px;-moz-border-radius: 250px 250px 250px 250px;-webkit-border-radius: 250px 250px 250px 250px;border: 10px solid #D1D1D1;} #time2:hover{background:#E1E0E0;} .time_content2{padding:10px; width:auto; height:auto; text-align:center;} .time_content2 img{ width:150px; text-align:center;} #time3{background:#FFFFFF;width:500px;height:500px;margin-left: 670px;margin-top: -510px;border-radius: 500px 500px 500px 500px;-moz-border-radius: 500px 500px 500px 500px;-webkit-border-radius: 500px 500px 500px 500px;border: 10px solid #D1D1D1;} #time3:hover{background:#E1E0E0;} .time_content3{padding:50px; width:auto; height:auto; text-align:center;} #time14{background:#FFFFFF;width:300px;height:300px;margin-left: 78px;margin-top: 0px;border-radius: 300px 300px 300px 300px;-moz-border-radius: 300px 300px 300px 300px;-webkit-border-radius: 300px 300px 300px 300px;border: 10px solid #D1D1D1;} #time14:hover{background:#E1E0E0;} .time_content14{padding:20px; width:auto; height:auto; text-align:center;} #time4{background:#FFFFFF;width: 277px;height:280px;margin-left: 407px;margin-top: -301px;border-radius: 280px 280px 280px 280px;-moz-border-radius: 280px 280px 280px 280px;-webkit-border-radius: 280px 280px 280px 280px;border: 10px solid #D1D1D1;} #time4:hover{background:#E1E0E0;} .time_content4{padding:10px; width:auto; height:auto; text-align:center;} #time5{background:#FFFFFF;width: 320px;height: 320px;margin-left: 781px;margin-top: -200px;border-radius: 280px 280px 280px 280px;-moz-border-radius: 280px 280px 280px 280px;-webkit-border-radius: 280px 280px 280px 280px;border: 10px solid #D1D1D1;} #time5:hover{background:#E1E0E0;} .time_content5{padding: 30px;width:auto;height:auto;text-align:center;} #time6{background:#FFFFFF;width:380px;height:380px;margin-left: -18px;margin-top: -73px;border-radius: 380px 380px 380px 380px;-moz-border-radius: 380px 380px 380px 380px;-webkit-border-radius: 380px 380px 380px 380px;border: 10px solid #D1D1D1;} .time_content6{padding:10px; width:auto; height:auto; text-align:center;} #time6:hover{background:#E1E0E0;} .time_content6 img{padding:10px; width:50%; height:auto; text-align:center;} #time7{background:#FFFFFF;width: 190px;height: 190px;margin-left: 465px;margin-top: -459px;border-radius: 280px 280px 280px 280px;-moz-border-radius: 280px 280px 280px 280px;-webkit-border-radius: 280px 280px 280px 280px;border: 10px solid #D1D1D1;} #time7:hover{background:#E1E0E0;} .time_content7{padding:10px; width:auto; height:auto; text-align:center;} #time8{background:#FFFFFF;width: 200px;height: 200px;margin-left: 542px;margin-top: 2px;border-radius: 280px 280px 280px 280px;-moz-border-radius: 280px 280px 280px 280px;-webkit-border-radius: 280px 280px 280px 280px;border: 10px solid #D1D1D1;} #time8:hover{background:#E1E0E0;} .time_content8{padding:10px; width:auto; height:auto; text-align:center;} #time9{background:#FFFFFF;width: 180px;height: 180px;margin-left: 663px;margin-top: 9px;border-radius: 280px 280px 280px 280px;-moz-border-radius: 280px 280px 280px 280px;-webkit-border-radius: 280px 280px 280px 280px;border: 10px solid #D1D1D1;} #time9:hover{background:#E1E0E0;} .time_content9{padding:10px; width:auto; height:auto; text-align:center;} #time11{background:url(../images/foot_right.png) no-repeat; width:200px; height:220px; margin-left:100px; margin-top:0px;} #time12{background:url(foot_left.png) no-repeat; width:200px; height:220px; margin-left:150px; margin-top:0px;} #time13{background:url(foot_right.png) no-repeat; width:200px; height:220px; margin-left:300px; margin-top:0px;} .hover { position:relative; width:auto; } .tooltip { top:0px; left:0px; background:white; display:inline-block; color:white; width:auto; height:auto; padding:20px; } .hover .tooltip { opacity:1; } /*----------------------------------------Language Bar-----------------------------------------------------------*/ .language-bar { width: 100%; height: 20px; margin: 0 auto; top: 0; z-index: 9999999999999999; } .blink_me { animation: blinker 1s linear infinite; font-size:36px; text-align:center; } @keyframes blinker { 50% { opacity: 0; } } /* CARAT */ .dropdown1 .carat{ position: absolute; left: 67px; top: 45%; border: 4px solid transparent; border-top: 7px solid #fff; } /* OLD SELECT (HIDDEN) */ .dropdown1 .old{ position: absolute; left: 0; top: 0; height: 0; width: 0; overflow: hidden; } .dropdown1 select{ left: 0px; top: 0px; } .dropdown1.touch .old{ width: 100%; height: 100%; } .dropdown1.touch select{ width: 100%; height: 100%; opacity: 0; } /* SELECTED FEEDBACK ITEM */ .dropdown1 .selected, .dropdown1 li{ display: block; font-size: 11px; font-weight:bold; line-height: 1; color: #fff; padding:8px 10px 6px 8px; overflow: hidden; white-space: nowrap; } .dropdown1.disabled .selected{ color: #999; } .dropdown1 .selected::after{ content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 60px; } /* DROP DOWN WRAPPER */ .dropdown1 div{ position: absolute; height: 0; left: -1px; right: -1px; top: 100%; margin-top: -1px; background: #fff; border: 1px solid #ccc; border-top: 1px solid #eee; overflow: hidden; opacity: 0; } /* Height is adjusted by JS on open */ .dropdown1.open div{ opacity: 1; z-index: 2; border-radius:5px; margin-top:3px; } /* FADE OVERLAY FOR SCROLLING LISTS */ .dropdown1.scrollable div::after{ content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 50px; } .dropdown1.scrollable.bottom div::after{ opacity: 0; } /* DROP DOWN LIST */ .dropdown1 ul{ position: absolute; left: 0; top: 0; height: 100%; width: 100%; list-style: none; overflow: hidden; } .dropdown1.scrollable.open ul{ overflow-y: auto; } /* DROP DOWN LIST ITEMS */ .dropdown1 li{ list-style: none; color:#666; padding: 8px 40px 8px 5px; } .erp_right{float:left; width:52%; height:400px; margin-top:30px;} /*----------------------------------------Language Bar-----------------------------------------------------------*/ /*----------------------------------------Header-----------------------------------------------------------*/ header.navbar .navbar-inner{background:url(../images/scale.png) repeat-x bottom center #FFFFFF!important;border:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none; z-index:9999999999;}header #logo{width:220px;height:100px;background:url(../images/logo.png) no-repeat 0 50%}header.navbar{margin-bottom:0} header.navbar .nav{margin-top:20px} header.navbar .nav>li{margin-left:1px} header.navbar .nav>li>a{padding-top:10px;padding-bottom:10px;color:#333;font-family: 'Roboto', sans-serif;font-size:14px;text-transform:uppercase;text-shadow:none} header.navbar .nav>li>a:hover{background: url(../images/scale_hover.png) repeat-x bottom #f75577; height:60px; color:#FFFFFF; border-radius: 5px 5px 0px 0px; -moz-border-radius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px; z-index:9999999999999;} header.navbar .nav>li a.active{background:#f75577;color:#FFFFFF;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px; -webkit-box-shadow: #ccf5d8 0px 5px 0px;-moz-box-shadow: #ccf5d8 0px 5px 0px; box-shadow: #ccf5d8 0px 5px 0px; color:#FFFFFF;} header.navbar .nav>li a:active{color:#FFFFFF;} header.navbar .nav>li.active>a,header.navbar .nav>li.active>a:hover{background: url(../images/scale_hover.png) repeat-x bottom #f75577;color:#FFFFFF; order-radius: 5px 5px 0px 0px; -moz-border-radius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px; height:60px; color:#FFFFFF;} header.navbar .nav>li.dropdown.open>a.dropdown-toggle{background:#000000;color:#f75577}header.navbar .nav>li.login>a{}header .dropdown-menu{margin-top:0px; margin-left:160px;}header .dropdown-menu:before{display:none!important} .dropdown-menu>li>a{font-family: 'Roboto', sans-serif; font-size:14px;} .open>.dropdown-menu a:hover{background:#FFFCFC;} .open>.dropdown-menu{background:#f75577;} .dropdown-menu>li>a{color:#FFFCFC;} /*----------------------------------------Header-----------------------------------------------------------*/ /*----------------------------------------Home-----------------------------------------------------------*/ #services p{color:#FFFFFF; font-family: 'Roboto', sans-serif; } #services h1, #services h2, #services h3, #services h4, #services h5, #services h6{color:#86273b;} .option1{float:left; height:auto; width:225px; padding:15px; border:#F10004 solid 0px; text-align:center; } .option1 h3{text-align:center; } .option1 p{text-align:justify; } .show_hide { display:none; } /*----------------------------------------Home Banner-----------------------------------------------------------*/ #slogan { width:100%; height:1000px; text-align:center; top:0px; position:absolute; padding-left:0px; padding-right:0px; z-index:999; background:url(../images/pixel.png) repeat center; padding-top:200px; } .plan{padding:20px;} #slogan img { width: 50%; height: auto; margin-top: 0px; } #slogan h2 { font-size:36px; padding-top:200px; font-weight:bold; color:#FFFFFF; font-family: 'Open Sans', sans-serif; text-transform:uppercase; text-shadow:1px 1px 1px #000000; border-bottom:#FFFFFF 2px solid; letter-spacing:0px; width:850px; margin:auto; } #slogan h1 { font-size:50px; padding-top:200px; font-weight:bold; color:#FFFFFF; font-family: 'Open Sans', sans-serif; text-transform:uppercase; text-shadow:1px 1px 1px #000000; letter-spacing:0px; width:850px; margin:auto; } #slogan p { font-size:20px; letter-spacing:4px; color:#FFFFFF; font-weight:normal; font-family: 'Roboto', sans-serif; text-shadow:1px 1px 1px #000000; padding-top:4px; width:900px; margin:0 auto; padding-bottom:50px; } #learn_more img { width:auto; height:auto; padding-top:10px; } .span6{font-family: 'Roboto', sans-serif; font-size:14px;} #slogan2{ width:100%; height:900px; text-align:center; top:0px; position:absolute; padding-left:0px; padding-right:0px; z-index:999; background:url(../images/pixel.png) repeat center; padding-top:250px; } #slogan2 p { font-size:20px; letter-spacing:4px; color:#FFFFFF; font-weight:normal; font-family: 'Roboto', sans-serif; text-shadow:1px 1px 1px #000000; padding-top:4px; width:900px; margin:0 auto; padding-bottom:50px; } .area{ text-align:center; font-size:5.5em; color:#fff; letter-spacing: -2px; font-weight:700; text-transform:uppercase; animation:blur 4s ease-out infinite; text-shadow:0px 0px 0px #fff, 0px 0px 0px #fff; } @keyframes blur{ from{ text-shadow:0px 0px 10px #fff, 0px 0px 10px #fff, 0px 0px 15px #fff, 0px 0px 15px #fff, 0px 0px 15px #fff, 0px 0px 15px #fff, 0px 0px 15px #fff, 0px 0px 15px #fff, 0px 0px 20px #fff, 0px 0px 20px #fff, 0px 0px 20px #7B96B8; } } .area1{ text-align:center; font-size:5.5em; color:#fff; letter-spacing: -2px; font-weight:700; text-transform:uppercase; animation:blur 4s ease-out cubic-bezier(x1,y1,x2,y2); text-shadow:0px 0px 5px #fff, 0px 0px 7px #fff; } .text_home{color:white; font-size:46px; text-transform:uppercase; text-shadow:0px 0px 10px #828182, 0px 0px 7px #000;} .element-animation{ animation: animationFrames 10s infinite; animation-iteration-count: 1; transform-origin: 50% 0%; -webkit-animation: animationFrames linear 3s; -webkit-animation-iteration-count: 1; -webkit-transform-origin: 50% 0%; -moz-animation: animationFrames linear 3s; -moz-animation-iteration-count: 1; -moz-transform-origin: 50% 0%; -o-animation: animationFrames linear 3s; -o-animation-iteration-count: 1; -o-transform-origin: 50% 0%; -ms-animation: animationFrames linear 3s; -ms-animation-iteration-count: 1; -ms-transform-origin: 50% 0%; } @keyframes animationFrames{ 0% { transform: rotate(0deg) ; } 20% { transform: rotate(15deg) ; } 40% { transform: rotate(-10deg) ; } 60% { transform: rotate(5deg) ; } 80% { transform: rotate(-5deg) ; } 100% { transform: rotate(0deg) ; } } @-moz-keyframes animationFrames{ 0% { -moz-transform: rotate(0deg) ; } 20% { -moz-transform: rotate(15deg) ; } 40% { -moz-transform: rotate(-10deg) ; } 60% { -moz-transform: rotate(5deg) ; } 80% { -moz-transform: rotate(-5deg) ; } 100% { -moz-transform: rotate(0deg) ; } } @-webkit-keyframes animationFrames { 0% { -webkit-transform: rotate(0deg) ; } 20% { -webkit-transform: rotate(15deg) ; } 40% { -webkit-transform: rotate(-10deg) ; } 60% { -webkit-transform: rotate(5deg) ; } 80% { -webkit-transform: rotate(-5deg) ; } 100% { -webkit-transform: rotate(0deg) ; } } @-o-keyframes animationFrames { 0% { -o-transform: rotate(0deg) ; } 20% { -o-transform: rotate(15deg) ; } 40% { -o-transform: rotate(-10deg) ; } 60% { -o-transform: rotate(5deg) ; } 80% { -o-transform: rotate(-5deg) ; } 100% { -o-transform: rotate(0deg) ; } } @-ms-keyframes animationFrames { 0% { -ms-transform: rotate(0deg) ; } 20% { -ms-transform: rotate(15deg) ; } 40% { -ms-transform: rotate(-10deg) ; } 60% { -ms-transform: rotate(5deg) ; } 80% { -ms-transform: rotate(-5deg) ; } 100% { -ms-transform: rotate(0deg) ; } } .element-animation1{ animation: animationFrames linear 1s; animation-iteration-count: 1; transform-origin: 50% 50%; -webkit-animation: animationFrames linear 1s; -webkit-animation-iteration-count: 1; -webkit-transform-origin: 50% 50%; -moz-animation: animationFrames linear 1s; -moz-animation-iteration-count: 1; -moz-transform-origin: 50% 50%; -o-animation: animationFrames linear 1s; -o-animation-iteration-count: 1; -o-transform-origin: 50% 50%; -ms-animation: animationFrames linear 1s; -ms-animation-iteration-count: 1; -ms-transform-origin: 50% 50%; } @keyframes animationFrames{ 0% { transform: translate(0px,0px) ; } 10% { transform: translate(-10px,0px) ; } 20% { transform: translate(10px,0px) ; } 30% { transform: translate(-10px,0px) ; } 40% { transform: translate(10px,0px) ; } 50% { transform: translate(-10px,0px) ; } 60% { transform: translate(10px,0px) ; } 70% { transform: translate(-10px,0px) ; } 80% { transform: translate(10px,0px) ; } 90% { transform: translate(-10px,0px) ; } 100% { transform: translate(0px,0px) ; } } @-moz-keyframes animationFrames{ 0% { -moz-transform: translate(0px,0px) ; } 10% { -moz-transform: translate(-10px,0px) ; } 20% { -moz-transform: translate(10px,0px) ; } 30% { -moz-transform: translate(-10px,0px) ; } 40% { -moz-transform: translate(10px,0px) ; } 50% { -moz-transform: translate(-10px,0px) ; } 60% { -moz-transform: translate(10px,0px) ; } 70% { -moz-transform: translate(-10px,0px) ; } 80% { -moz-transform: translate(10px,0px) ; } 90% { -moz-transform: translate(-10px,0px) ; } 100% { -moz-transform: translate(0px,0px) ; } } @-webkit-keyframes animationFrames { 0% { -webkit-transform: translate(0px,0px) ; } 10% { -webkit-transform: translate(-10px,0px) ; } 20% { -webkit-transform: translate(10px,0px) ; } 30% { -webkit-transform: translate(-10px,0px) ; } 40% { -webkit-transform: translate(10px,0px) ; } 50% { -webkit-transform: translate(-10px,0px) ; } 60% { -webkit-transform: translate(10px,0px) ; } 70% { -webkit-transform: translate(-10px,0px) ; } 80% { -webkit-transform: translate(10px,0px) ; } 90% { -webkit-transform: translate(-10px,0px) ; } 100% { -webkit-transform: translate(0px,0px) ; } } @-o-keyframes animationFrames { 0% { -o-transform: translate(0px,0px) ; } 10% { -o-transform: translate(-10px,0px) ; } 20% { -o-transform: translate(10px,0px) ; } 30% { -o-transform: translate(-10px,0px) ; } 40% { -o-transform: translate(10px,0px) ; } 50% { -o-transform: translate(-10px,0px) ; } 60% { -o-transform: translate(10px,0px) ; } 70% { -o-transform: translate(-10px,0px) ; } 80% { -o-transform: translate(10px,0px) ; } 90% { -o-transform: translate(-10px,0px) ; } 100% { -o-transform: translate(0px,0px) ; } } @-ms-keyframes animationFrames { 0% { -ms-transform: translate(0px,0px) ; } 10% { -ms-transform: translate(-10px,0px) ; } 20% { -ms-transform: translate(10px,0px) ; } 30% { -ms-transform: translate(-10px,0px) ; } 40% { -ms-transform: translate(10px,0px) ; } 50% { -ms-transform: translate(-10px,0px) ; } 60% { -ms-transform: translate(10px,0px) ; } 70% { -ms-transform: translate(-10px,0px) ; } 80% { -ms-transform: translate(10px,0px) ; } 90% { -ms-transform: translate(-10px,0px) ; } 100% { -ms-transform: translate(0px,0px) ; } } /*----------------------------------------Home Banner-----------------------------------------------------------*/ .main-info{background-color:#f75577;color:#FFFDFD; padding:20px; font-family: 'Roboto', sans-serif;}.main-info h4{color:#999} .main-info p{font-family: 'Roboto', sans-serif; font-size:14px;} #why{background:#FFFFFF;color:#999}#services h1,#services h2,#services h3,#services h4,#services h5,#services h6{color:#fff}#main-contents{margin-top:20px}#main-contents .blog-news .created{font-size:24px;color:#2dcc70} #services{background:#f75577;color:#999}#services h1,#services h2,#services h3,#services h4,#services h5,#services h6{color:#fff}#main-contents{margin-top:20px}#main-contents .blog-news .created{font-size:24px;color:#2dcc70} /*----------------------------------------Home-----------------------------------------------------------*/ /*----------------------------------------About Us-----------------------------------------------------------*/ #about{ background-image:url(../images/about-bg.jpg); background-size: cover; background-position: center; height:350px; } #feature{ background-image:url(../images/about_bg.jpg); background-size: cover; background-position: center; height:350px; color:white; padding-top:40px; margin-top:100px; } #quote{ background:url(../images/quote_bg.jpg); background-size: cover; background-position: center; height:550px; margin-top:0px; } #about-us p{text-align:justify;} .about{width:100%; height:auto; padding-bottom:50px; color:#FFFFFF;} .about ul{padding:0px;margin:25px 0 0 0;} .about ul li{list-style:none;float:left;background:url(../images/tick.png) no-repeat left center;font-size:20px;color:#FFFFFF;padding:3px 5px 0 35px;font-family:'Roboto Condensed';font-weight:400;} .service_bullet{width:100%; height:auto; padding-bottom:50px; color:#FFFFFF;} .service_bullet ul{padding:0px;margin:25px 0 0 0;} .service_bullet li{list-style:none;float:left;background:url(../images/tick.png) no-repeat left center;font-size:20px;color:#353535;padding:3px 5px 0 35px;font-family:'Roboto Condensed';font-weight:400;} .testimony_left{float:left; width:40%; height:auto; padding:20px;} .testimony_right{float:right; width:45%; height:auto; padding:20px;} /*-----------------------------------Milestone-------------------*/ /*---------------------------------------milestone-----------------------------------------------------------*/ #milestone{ background:white; background-size: cover; background-position: center; height:auto; } .row-fluid .span3{color:#FFFFFF;} .row-fluid .span3 h3{color:#FFFFFF;} /*----------------------------------------About Us-----------------------------------------------------------*/ #servcies{margin-top:50px;} #servcies p{color:#363636;} #servcies h3{color:#363636;} .span4{color:#FFFFFF; font-size:16px;} #f1{float:left; width:290px; height:300px; } #f1_icon{float:left; width:50px; height:100px; position:absolute; margin-top:20px;} #f1_content{float:left; width:250px; height:250px; padding-left:10px; text-align:justify;} #f1_content h3{float:left; width:290px; height:auto;} #f1_content p{float:left; width:250px; height:270px; padding-left:10px; text-align:justify;} /*----------------------------------------Services-----------------------------------------------------------*/ #service_banner{background:url(../images/service_banner.jpg); background-size: cover; background-position: center; width:100%; height:450px; margin-top:0px; } #mlm{width:100%; float:left; height:auto;} .float-right{width:800px; height:auto; float:left; padding:20px;} .float-left{width:400px; height:auto; float:left; padding:20px;} .service_left{float:left; width:47%; height:400px; margin-top:50px; color:#FFFFFF;} .service_right{float:left; width:52%; background:url(../images/laptop.png) no-repeat; height:400px; margin-top:30px;} /*----------------------------------------Service Slider-----------------------------------------------------------*/ .slider{width: 73%;height:300px;float:left;padding-top: 20px;padding-left: 80px;} /*Wow Slider*/ .nav-collapse .nav>li>a, .nav-collapse .dropdown-menu a{color:#FFFFFF;} #wowslider-container1 { display: table; zoom: 1; position: relative; width: 100%; max-width: 640px; max-height:360px; margin:0px auto 0px; z-index:90; text-align:left; /* reset align=center */ font-size: 10px; text-shadow: none; /* fix some user styles */ /* reset box-sizing (to boostrap friendly) */ -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } * html #wowslider-container1{ width:640px } #wowslider-container1 .ws_images ul{ position:relative; width: 10000%; height:100%; left:0; list-style:none; margin:0; padding:0; border-spacing:0; overflow: visible; /*table-layout:fixed;*/ } #wowslider-container1 .ws_images ul li{ position: relative; width:1%; height:100%; line-height:0; /*opera*/ overflow: hidden; float:left; /*font-size:0;*/ padding:0 0 0 0 !important; margin:0 0 0 0 !important; } #wowslider-container1 .ws_images{ position: relative; left:0; top:0; height:100%; max-height:360px; max-width: 640px; vertical-align: top; border:none; overflow: hidden; } #wowslider-container1 .ws_images ul a{ width:100%; height:100%; max-height:360px; display:block; color:transparent; } #wowslider-container1 img{ max-width: none !important; } #wowslider-container1 .ws_images .ws_list img, #wowslider-container1 .ws_images > div > img{ width:100%; border:none 0; max-width: none; padding:0; margin:0; } #wowslider-container1 .ws_images > div > img { max-height:360px; } #wowslider-container1 .ws_images iframe { position: absolute; z-index: -1; } #wowslider-container1 .ws-title > div { display: inline-block !important; } #wowslider-container1 a{ text-decoration: none; outline: none; border: none; } #wowslider-container1 .ws_bullets { float: left; position:absolute; z-index:70; } #wowslider-container1 .ws_bullets div{ position:relative; float:left; font-size: 0px; } /* compatibility with Joomla styles */ #wowslider-container1 .ws_bullets a { line-height: 0; } #wowslider-container1 .ws_script{ display:none; } #wowslider-container1 sound, #wowslider-container1 object{ position:absolute; } /* prevent some of users reset styles */ #wowslider-container1 .ws_effect { position: static; width: 100%; height: 100%; } #wowslider-container1 .ws_photoItem { border: 2em solid #fff; margin-left: -2em; margin-top: -2em; } #wowslider-container1 .ws_cube_side { background: #A6A5A9; } #wowslider-container1.ws_gestures { cursor: -webkit-grab; cursor: -moz-grab; cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAABwSURBVEjH7ZJBEsAgCAMT/v/n9NCOSqe2oD2yNx1JggB4BCEFWyFASP2KMQE7ywWhe/tTRGCGogLk02tFctiW/SUgaMyQG4PdPzDn31rQbMb8FiAXgvsEJNax1yVlVGAjA93apP3HFhZTGIqiKH7iADB6HxPlHdNVAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE0LTA3LTA3VDEzOjQ5OjEwKzAyOjAwm7WiFAAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNC0wNy0wN1QxMzo0OToxMCswMjowMOroGqgAAAAASUVORK5CYII="), move; } #wowslider-container1.ws_gestures.ws_grabbing { cursor: -webkit-grabbing; cursor: -moz-grabbing; cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAABaSURBVEjH7ZMxCkAhDEOT8u9/5TpJ+xWkFse8IYutJgEB8RCHL1qCc90BEFnT6QH7mwgFHBUf8wJyS1TDLuc3vmighx37LZdIth3E5hKj9n6O0HRh+oJCiFcMxRUUDxR1CTMAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTQtMDctMDdUMTM6NDk6MzgrMDI6MDDqf+sOAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE0LTA3LTA3VDEzOjQ5OjM4KzAyOjAwmyJTsgAAAABJRU5ErkJggg=="), move; } /* hide controls when video start play */ #wowslider-container1.ws_video_playing .ws_bullets, #wowslider-container1.ws_video_playing .ws_fullscreen, #wowslider-container1.ws_video_playing .ws_next, #wowslider-container1.ws_video_playing .ws_prev { display: none; } /* youtube/vimeo buttons */ #wowslider-container1 .ws_video_btn { position: absolute; display: none; cursor: pointer; top: 0; left: 0; width: 100%; height: 100%; z-index: 55; } #wowslider-container1 .ws_video_btn.ws_youtube, #wowslider-container1 .ws_video_btn.ws_vimeo { display: block; } #wowslider-container1 .ws_video_btn div { position: absolute; background-image: url(./playvideo.png); background-size: 200%; top: 50%; left: 50%; width: 7em; height: 5em; margin-left: -3.5em; margin-top: -2.5em; } #wowslider-container1 .ws_video_btn.ws_youtube div { background-position: 0 0; } #wowslider-container1 .ws_video_btn.ws_youtube:hover div { background-position: 100% 0; } #wowslider-container1 .ws_video_btn.ws_vimeo div { background-position: 0 100%; } #wowslider-container1 .ws_video_btn.ws_vimeo:hover div { background-position: 100% 100%; } #wowslider-container1 .ws_playpause.ws_hide { display: none !important; } /* bullets */ #wowslider-container1 .ws_bullets a { position: relative; display: inline-block; margin: 0 2px; padding: 6px; width: 0; border-radius: 50%; background: rgba(0, 0, 0, 0); -webkit-box-shadow: inset 0 0 0 1px #ffffff; box-shadow: inset 0 0 0 1px #ffffff; } #wowslider-container1 .ws_bullets a.ws_selbull { background: #ffffff; -webkit-box-shadow: none; box-shadow: none; } /* arrows */ #wowslider-container1 a.ws_next, #wowslider-container1 a.ws_prev { position:absolute; z-index:60; overflow: hidden; width: 15%; height: 100%; top: 0; opacity: .5; } #wowslider-container1 a.ws_next { left: 85%; cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAAqFBMVEUAAAAAAAAAAAAAAADp6emampoODg4BAQEAAAAAAAC+vr4AAAAnJycAAAAAAADz8/Px8fHs7OzW1tYAAAAAAAAAAAAAAADZ2dmcnJx/f39eXl4AAADT09OJiYnNzc24uLhubm5VVVVTU1PQ0NCRkZGEhIQnJyciIiLu7u7i4uJwcHBhYWE6OjoAAADl5eXExMTBwcHBwcGpqamjo6OVlZV8fHwhISH19fVy7acrAAAAN3RSTlMAAR4E+rM+PA0b2gZPKCX+/vzvMhEIN/G0l3QL7KTn2Ypxb+q3o15L/PiUhW0T+ePi3s/IinVTJyfCOgAAAXxJREFUOMuNlel2gjAQhUMWIAiIBBBwq1Zt3bq3ef83q4JtVs7J/ZnznQy5M3MBilBIExZcxRIaIjAgr6RVS6IcZxnOI9JWtPRs3AjG9ZRLmtYxHJnXFT7BXBMmfqFdiuBmzi2abyBSyqbNhFs1aVKpPEoXGR9Qtkj/7/RgM+aDGjfQu4PFWtS1VV8X9w/0pXfkx/3pVX+RX/aFiTg77Ons4q80knTFy1jy7zO5Hs10Ese3K2nNhbYQgBsZqWRNAUCV3Le3amQjpxUCYascLRIr2YaAEtU1O0koSCKukamFjBLAcr0TuxT15LtkLwMB5gNkuH8RBgUgyMzufoVdJ5iwM7OCk28riA3uAaJu5s9YLs3yIS5+lB9j2PMsONUeSqxc2HPCcK2F2fGPW2ot1IZixXruaWkMhTlmJsdrqg/uR+IJTh5cfRXwOb3An6V1FUApL9dhe9rpzuZ+6bqu7gEgIsUkxSAj15ByjT3nIHWPZjPsoRr2UA5759/HL+WBz8c5CVTZAAAAAElFTkSuQmCC') 20 20, move; } #wowslider-container1 a.ws_prev { left: 0; cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAApVBMVEUAAAAAAAAAAAAAAAAJCQkAAACampomJiYAAADp6ekAAAAAAADt7e0DAwPz8/Px8fHW1tYAAAAAAAAAAAAAAADZ2dnT09O8vLyIiIh/f39eXl4AAADOzs4AAAC+vr6cnJy4uLhubm5VVVVTU1Pq6uri4uKRkZEmJibo6OjBwcGcnJyFhYVwcHBhYWE7OzsAAADExMSpqamjo6OVlZV8fHwhISH19fXdUOd4AAAANnRSTlMAAR4EPg2zThv5JQb8Ov7+7zIIKRPx7Nmll3Q35wvbtNiKcW/7+LZd+eC1oZSGbRHjz8iKdVMz+8v0AAABgklEQVQ4y42V6XKCMBSFQxJCQHZQtirUtVq1e97/0TqKQ7N2cv7BfHMvdzsAQcilRRZhHGUFdREwyMlp15JV6ieJn65I29Hc0XEz6PVzxmnee3Cmhisx8Zkkn+BSCorgZsE0WmwgEtIGzZZpFTYBlx4FdcIMSupgiunAJmZGxQ10HmC5Dtk/Ctfl4wOxXEdaX/Y7riKcj4mJxD39wDK4ctWRe/Lc8yXOcx3gFB9cP71bSNprOADgnnvXUwBQN9dxKBv4aXYIuK2Wg2ehs60LKNFyz2LHCAVFZcGxqgBZyjXMe9NzLM1A9DI9ba8mjvkRwMlf/Ow+VPdbnWiCeXB4gF+xBuRT7w7uuHSvsZpaKOaITWSaie1Z4eW48HWstIcSZkESKo+wmkgmjlBZiioayegoLsW4Ziqprpm6uMONdIpPeXHVUxhwuaSHnXwKIFeO6/1yOKdcE3Fue67WBsBZSmzk6gAJJhWaTcrW9uyNVLXmk2jNp8maZbOHotlD3uytfx+/dM7Mf8Z6jgIAAAAASUVORK5CYII=') 20 20, move; } /*playpause*/ #wowslider-container1 .ws_playpause { position:absolute; top: 0; bottom: 40px; left: 42.5%; width: 15%; z-index: 59; } #wowslider-container1 .ws_pause { cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAAV1BMVEUAAAAAAAAAAAAAAACbm5sHBwfy8vLp6ekAAAAAAAAAAADW1tbs7OzZ2dlfX19UVFQAAAAAAAAAAADT09N+fn4lJSW+vr6+vr6Li4uKioqBgYEtLS319fUPuLKbAAAAHHRSTlMAQB0GtDz++jUPAu/88XVwcCkl7JdP29qlo5lSTmNl+QAAAPlJREFUOMuNldmygjAQRLNNVgERcJ3//85bdZUawUT7vOTl1DSEpFEbcjJjJK0pjiZl1cKa2LtzCd6HcnZ9NLahLa7jNzq3VNScyAXeERylvB83TFxhGrZD7Wk+cJXDfLLv3s1zA38TM5tZvE9zNutzpkFya+lDegXTxF+Z6BluHAtHfVwXwZn/gUtgQSu9LkJYrAxsiDIyx+632MWsUs+/Re6TJNdFyR4viHgZVSyIWKKigIiBFHlE9LgIR8MvA28PvOHwJ4QPBXzM8IOLXwVlqfBXCln0usIFIJVy9U3vui2fe6uk7uKBtYcXqQx97Kv5IePwsod/H38EQnC3Gt7RKAAAAABJRU5ErkJggg==') 20 20, pointer; } #wowslider-container1 .ws_play { cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAAdVBMVEUAAAAAAAAAAADy8vIAAAAAAADp6ekAAAAAAAAAAABKSkoICAgAAAAAAACbm5smJiaZmZnW1tZUVFTs7OzZ2dlfX18AAAC+vr6JiYl+fn7i4uLT09PKysqqqqqDg4NYWFidnZ1DQ0MfHx+9vb1DQ0NBQUH19fXuVLBhAAAAJnRSTlMACAH+Jxv6HgU4ZD0zEbRPs+9x/PF1Ddujl/bs5cicddJtVtqhocENH8AAAAE2SURBVDjLjZXpdoMgEEbZkYIIRjQ2bbrz/o/YNtGAQnJmfuI9XLb5RJsiI2dGaa0M4yNBd4pgroKbvKBU+MkFxXGVxbKzQ8xqsJ3E5XStdiLuSjjd7iZtZH+KlTr1stlwbD7Eah1m1uTckcY7RY+JJHJOXEnOcl1n2ydvzd63y7notA9R3ZHGV7FLY9+vtUW4ixx32TQf5u2lBEX3PyW32dATbtXxuSAt/zOrYQOihneFf1AEjSFuQUQwK/xhRNxtwevFm9Wf3OyrBFHhnxgyvgJe/H3m9wYpUQEX//nmFwppWgFX/+f78pVqMAhWwzfDJuDxcFuCyZoOHHyF4EdRPjNTfWbgh7tvhZ8HrYCw9o+by2sMbVdwAEAjBRRS58QBYw8epPBoTmEvVbBr2NugZB724N/HL/3XkHy4+UK6AAAAAElFTkSuQmCC') 20 20, pointer; }/* bottom center */ #wowslider-container1 .ws_bullets { bottom:10px; left:50%; } #wowslider-container1 .ws_bullets div{ left:-50%; } #wowslider-container1 .ws_bulframe span{ visibility: visible; opacity: 1; position: absolute; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #ffffff; bottom:-6px; margin-left:-2px; left:43px; }#wowslider-container1 .ws-title{ position: absolute; background: none; font: 2.4em 'Slabo 27px', serif; color:#ffffff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); bottom: 50px; top: auto; opacity: 1; text-align: center; width: 100%; padding-left: 20%; padding-right: 20%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; z-index: 50; } #wowslider-container1 .ws-title div{ margin-top: 0.5em; font-size: 0.542em; }#wowslider-container1 .ws_images > ul{ animation: wsBasic 8s infinite; -moz-animation: wsBasic 8s infinite; -webkit-animation: wsBasic 8s infinite; } @keyframes wsBasic{0%{left:-0%} 25%{left:-0%} 50%{left:-100%} 75%{left:-100%} } @-moz-keyframes wsBasic{0%{left:-0%} 25%{left:-0%} 50%{left:-100%} 75%{left:-100%} } @-webkit-keyframes wsBasic{0%{left:-0%} 25%{left:-0%} 50%{left:-100%} 75%{left:-100%} } #wowslider-container1 .ws_bullets a img{ text-indent:0; display:block; bottom:15px; left:-43px; visibility:hidden; position:absolute; border: 1px solid #ffffff; max-width:none; } #wowslider-container1 .ws_bullets a:hover img{ visibility:visible; } #wowslider-container1 .ws_bulframe div div{ height:48px; overflow:visible; position:relative; } #wowslider-container1 .ws_bulframe div { left:0; overflow:hidden; position:relative; width:85px; background-color:#ffffff; } #wowslider-container1 .ws_bullets .ws_bulframe{ display:none; bottom:17px; margin-left:2px; overflow:visible; position:absolute; cursor:pointer; border: 1px solid #ffffff; }#wowslider-container1 .ws_bulframe div div{ height: auto; } @media all and (max-width:760px) { #wowslider-container1 .ws_fullscreen { display: block; } } @media all and (max-width:400px){ #wowslider-container1 .ws_controls, #wowslider-container1 .ws_bullets, #wowslider-container1 .ws_thumbs{ display: none } } /*....Wowslider.......*/ .sky { height: 550px; margin-top:90px; background: #f75577; position: relative; overflow: hidden; -webkit-animation:#f75577 50s ease-out infinite; -moz-animation: #f75577 50s ease-out infinite; -o-animation: #f75577 50s ease-out infinite; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); } .clouds_one { background:url(../images/cloud.png); position: absolute; left: 0; top: 0; height: 100%; width: 300%; -webkit-animation: cloud_one 50s linear infinite; -moz-animation: cloud_one 50s linear infinite; -o-animation: cloud_one 50s linear infinite; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0) } .clouds_two { background:url(../images/cloud.png); position: absolute; left: 0; top: 0; height: 100%; width: 300%; -webkit-animation: cloud_two 75s linear infinite; -moz-animation: cloud_two 75s linear infinite; -o-animation: cloud_two 75s linear infinite; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0) } .clouds_three { background:url(../images/cloud.png); position: absolute; left: 0; top: 0; height: 100%; width: 300%; -webkit-animation: cloud_three 100s linear infinite; -moz-animation: cloud_three 100s linear infinite; -o-animation: cloud_three 100s linear infinite; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0) } @-webkit-keyframes sky_background { 0% { background: #007fd5; color: #007fd5 } 50% { background: #000; color: #a3d9ff } 100% { background: #007fd5; color: #007fd5 } } @-webkit-keyframes moon { 0% { opacity: 0; left: -200% -moz-transform: scale(0.5); -webkit-transform: scale(0.5); } 50% { opacity: 1; -moz-transform: scale(1); left: 0% bottom: 250px; -webkit-transform: scale(1); } 100% { opacity: 0; bottom: 500px; -moz-transform: scale(0.5); -webkit-transform: scale(0.5); } } @-webkit-keyframes cloud_one { 0% { left: 0 } 100% { left: -200% } } @-webkit-keyframes cloud_two { 0% { left: 0 } 100% { left: -200% } } @-webkit-keyframes cloud_three { 0% { left: 0 } 100% { left: -200% } } @-moz-keyframes sky_background { 0% { background: #007fd5; color: #007fd5 } 50% { background: #000; color: #a3d9ff } 100% { background: #007fd5; color: #007fd5 } } @-moz-keyframes moon { 0% { opacity: 0; left: -200% -moz-transform: scale(0.5); -webkit-transform: scale(0.5); } 50% { opacity: 1; -moz-transform: scale(1); left: 0% bottom: 250px; -webkit-transform: scale(1); } 100% { opacity: 0; bottom: 500px; -moz-transform: scale(0.5); -webkit-transform: scale(0.5); } } @-moz-keyframes cloud_one { 0% { left: 0 } 100% { left: -200% } } @-moz-keyframes cloud_two { 0% { left: 0 } 100% { left: -200% } } @-moz-keyframes cloud_three { 0% { left: 0 } 100% { left: -200% } } /*----------------------------------------Service Slider-----------------------------------------------------------*/ /*..............................Service Slider2..............................*/ .demo-1{position:relative; width: 100%; height: 600px;} .demo3{position:relative; width: 100%; height: 600px; margin-top:90px;} .demo-1 .sl-slider-wrapper { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .demo-2 .sl-slider-wrapper { width: 100%; height: 600px; overflow: hidden; position: relative; } .demo-2 .sl-slider h2, .demo-2 .sl-slider blockquote { padding: 100px 30px 10px 30px; width: 80%; max-width: 960px; color: #fff; margin: 0 auto; position: relative; z-index: 100; } .demo-2 .sl-slider h2 { font-size: 100px; text-shadow: 0 -1px 0 rgba(0,0,0,0.2); } .demo-2 .sl-slider blockquote { font-size: 28px; padding-top: 10px; font-weight: 300; text-shadow: 0 -1px 0 rgba(0,0,0,0.2); } .demo-2 .sl-slider blockquote cite { font-size: 16px; font-weight: 700; font-style: normal; text-transform: uppercase; letter-spacing: 5px; padding-top: 30px; display: inline-block; } .demo-2 .bg-img { padding: 200px; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; position: absolute; top: -200px; left: -200px; width: 100%; height: 100%; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; background-position: center center; } /* Custom navigation arrows */ .nav-arrows span { position: absolute; z-index: 2000; top: 50%; width: 40px; height: 40px; border: 8px solid #ddd; border: 8px solid rgba(150,150,150,0.4); text-indent: -90000px; margin-top: -40px; cursor: pointer; display:none; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .nav-arrows span:hover { border-color: rgba(150,150,150,0.9); } .nav-arrows span.nav-arrow-prev { left: 5%; border-right: none; border-top: none; } .nav-arrows span.nav-arrow-next { right: 5%; border-left: none; border-bottom: none; } /* Custom navigation dots */ .nav-dots { text-align: center; position: absolute; bottom: 2%; height: 30px; width: 100%; left: 0; z-index: 1000; } .nav-dots span { display: inline-block; position: relative; width: 16px; height: 16px; border-radius: 50%; margin: 3px; background: #ddd; background: rgba(150,150,150,0.4); cursor: pointer; box-shadow: 0 1px 1px rgba(255,255,255,0.4), inset 0 1px 1px rgba(0,0,0,0.1); } .demo-2 .nav-dots span { background: rgba(150,150,150,0.1); margin: 6px; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; box-shadow: 0 1px 1px rgba(255,255,255,0.4), inset 0 1px 1px rgba(0,0,0,0.1), 0 0 0 2px rgba(255,255,255,0.5); } .demo-2 .nav-dots span.nav-dot-current, .demo-2 .nav-dots span:hover { box-shadow: 0 1px 1px rgba(255,255,255,0.4), inset 0 1px 1px rgba(0,0,0,0.1), 0 0 0 5px rgba(255,255,255,0.5); } .nav-dots span.nav-dot-current:after { content: ""; position: absolute; width: 10px; height: 10px; top: 3px; left: 3px; border-radius: 50%; background: rgba(255,255,255,0.8); } /* Content elements */ .demo-1 .deco { width: 250px; height: 250px; border: 2px dashed #ddd; border: 2px dashed rgba(150,150,150,0.4); border-radius: 50%; position: absolute; bottom: 50%; left: 50%; margin: 0 0 0 -130px; } .demo-1 [data-icon]:after { content: attr(data-icon); font-family: 'AnimalsNormal'; color: #999; text-shadow: 0 0 1px #999; position: absolute; width: 220px; height: 220px; line-height: 220px; text-align: center; font-size: 40px; top: 50%; left: 50%; margin: -110px 0 0 -110px; box-shadow: inset 0 0 0 10px #f7f7f7; border-radius: 50%; } .demo-1 .sl-slide h2 { color: #000; text-shadow: 0 0 1px #000; padding: 20px; position: absolute; font-size: 34px; font-weight: 700; letter-spacing: 13px; text-transform: uppercase; width: 80%; left: 10%; text-align: center; line-height: 50px; bottom: 50%; margin: 0 0 -120px 0; } .demo-1 .sl-slide blockquote { position: absolute; width: 100%; text-align: center; left: 0; font-weight: 400; font-size: 14px; line-height: 20px; height: 70px; color: #8b8b8b; z-index: 2; bottom: 50%; margin: 0 0 -200px 0; padding: 0; } .demo-1 .sl-slide blockquote p{ margin: 0 auto; width: 60%; max-width: 400px; position: relative; } .demo-1 .sl-slide blockquote p:before { color: #f0f0f0; color: rgba(244,244,244,0.65); font-family: "Bookman Old Style", Bookman, Garamond, serif; position: absolute; line-height: 60px; width: 75px; height: 75px; font-size: 200px; z-index: -1; left: -80px; top: 35px; content: '\201C'; } .demo-1 .sl-slide blockquote cite { font-size: 10px; padding-top: 10px; display: inline-block; font-style: normal; text-transform: uppercase; letter-spacing: 4px; } /* Custom background colors for slides in first demo */ /* First Slide */ .demo-1 .bg-1 .sl-slide-inner, .demo-1 .bg-1 .sl-content-slice { background: #fff; } /* Second Slide */ .demo-1 .bg-2 .sl-slide-inner, .demo-1 .bg-2 .sl-content-slice { background: #000; } .demo-1 .bg-2 [data-icon]:after, .demo-1 .bg-2 h2 { color: #fff; } .demo-1 .bg-2 blockquote:before { color: #222; } /* Third Slide */ .demo-1 .bg-3 .sl-slide-inner, .demo-1 .bg-3 .sl-content-slice { background: #db84ad; } .demo-1 .bg-3 .deco { border-color: #fff; border-color: rgba(255,255,255,0.5); } .demo-1 .bg-3 [data-icon]:after { color: #fff; text-shadow: 0 0 1px #fff; box-shadow: inset 0 0 0 10px #b55381; } .demo-1 .bg-3 h2, .demo-1 .bg-3 blockquote{ color: #fff; text-shadow: 0px 1px 1px rgba(0,0,0,0.3); } .demo-1 .bg-3 blockquote:before { color: #c46c96; } /* Forth Slide */ .demo-1 .bg-4 .sl-slide-inner, .demo-1 .bg-4 .sl-content-slice { background: #5bc2ce; } .demo-1 .bg-4 .deco { border-color: #379eaa; } .demo-1 .bg-4 [data-icon]:after { text-shadow: 0 0 1px #277d87; color: #277d87; } .demo-1 .bg-4 h2, .demo-1 .bg-4 blockquote{ color: #fff; text-shadow: 1px 1px 1px rgba(0,0,0,0.2); } .demo-1 .bg-4 blockquote:before { color: #379eaa; } /* Fifth Slide */ .demo-1 .bg-5 .sl-slide-inner, .demo-1 .bg-5 .sl-content-slice { background: #ffeb41; } .demo-1 .bg-5 .deco { border-color: #ECD82C; } .demo-1 .bg-5 .deco:after { color: #000; text-shadow: 0 0 1px #000; } .demo-1 .bg-5 h2, .demo-1 .bg-5 blockquote{ color: #000; text-shadow: 1px 1px 1px rgba(0,0,0,0.1); } .demo-1 .bg-5 blockquote:before { color: #ecd82c; } .demo-2 .bg-img-1 { background-image: url(../images/1.jpg); } .demo-2 .bg-img-2 { background-image: url(../images/2.jpg); } .demo-2 .bg-img-3 { background-image: url(../images/3.jpg); } .demo-2 .bg-img-4 { background-image: url(../images/4.jpg); } .demo-2 .bg-img-5 { background-image: url(../images/5.jpg); } /* Animations for content elements */ .sl-trans-elems .deco{ -webkit-animation: roll 1s ease-out both, fadeIn 1s ease-out both; -moz-animation: roll 1s ease-out both, fadeIn 1s ease-out both; -o-animation: roll 1s ease-out both, fadeIn 1s ease-out both; -ms-animation: roll 1s ease-out both, fadeIn 1s ease-out both; animation: roll 1s ease-out both, fadeIn 1s ease-out both; } .sl-trans-elems h2{ -webkit-animation: moveUp 1s ease-in-out both; -moz-animation: moveUp 1s ease-in-out both; -o-animation: moveUp 1s ease-in-out both; -ms-animation: moveUp 1s ease-in-out both; animation: moveUp 1s ease-in-out both; } .sl-trans-elems blockquote{ -webkit-animation: fadeIn 0.5s linear 0.5s both; -moz-animation: fadeIn 0.5s linear 0.5s both; -o-animation: fadeIn 0.5s linear 0.5s both; -ms-animation: fadeIn 0.5s linear 0.5s both; animation: fadeIn 0.5s linear 0.5s both; } .sl-trans-back-elems .deco{ -webkit-animation: scaleDown 1s ease-in-out both; -moz-animation: scaleDown 1s ease-in-out both; -o-animation: scaleDown 1s ease-in-out both; -ms-animation: scaleDown 1s ease-in-out both; animation: scaleDown 1s ease-in-out both; } .sl-trans-back-elems h2{ -webkit-animation: fadeOut 1s ease-in-out both; -moz-animation: fadeOut 1s ease-in-out both; -o-animation: fadeOut 1s ease-in-out both; -ms-animation: fadeOut 1s ease-in-out both; animation: fadeOut 1s ease-in-out both; } .sl-trans-back-elems blockquote{ -webkit-animation: fadeOut 1s linear both; -moz-animation: fadeOut 1s linear both; -o-animation: fadeOut 1s linear both; -ms-animation: fadeOut 1s linear both; animation: fadeOut 1s linear both; } @-webkit-keyframes roll{ 0% {-webkit-transform: translateX(500px) rotate(360deg);} 100% {-webkit-transform: translateX(0px) rotate(0deg);} } @-moz-keyframes roll{ 0% {-moz-transform: translateX(500px) rotate(360deg); opacity: 0;} 100% {-moz-transform: translateX(0px) rotate(0deg); opacity: 1;} } @-o-keyframes roll{ 0% {-o-transform: translateX(500px) rotate(360deg); opacity: 0;} 100% {-o-transform: translateX(0px) rotate(0deg); opacity: 1;} } @-ms-keyframes roll{ 0% {-ms-transform: translateX(500px) rotate(360deg); opacity: 0;} 100% {-ms-transform: translateX(0px) rotate(0deg); opacity: 1;} } @keyframes roll{ 0% {transform: translateX(500px) rotate(360deg); opacity: 0;} 100% {transform: translateX(0px) rotate(0deg); opacity: 1;} } @-webkit-keyframes moveUp{ 0% {-webkit-transform: translateY(40px);} 100% {-webkit-transform: translateY(0px);} } @-moz-keyframes moveUp{ 0% {-moz-transform: translateY(40px);} 100% {-moz-transform: translateY(0px);} } @-o-keyframes moveUp{ 0% {-o-transform: translateY(40px);} 100% {-o-transform: translateY(0px);} } @-ms-keyframes moveUp{ 0% {-ms-transform: translateY(40px);} 100% {-ms-transform: translateY(0px);} } @keyframes moveUp{ 0% {transform: translateY(40px);} 100% {transform: translateY(0px);} } @-webkit-keyframes fadeIn{ 0% {opacity: 0;} 100% {opacity: 1;} } @-moz-keyframes fadeIn{ 0% {opacity: 0;} 100% {opacity: 1;} } @-o-keyframes fadeIn{ 0% {opacity: 0;} 100% {opacity: 1;} } @-ms-keyframes fadeIn{ 0% {opacity: 0;} 100% {opacity: 1;} } @keyframes fadeIn{ 0% {opacity: 0;} 100% {opacity: 1;} } @-webkit-keyframes scaleDown{ 0% {-webkit-transform: scale(1);} 100% {-webkit-transform: scale(0.5);} } @-moz-keyframes scaleDown{ 0% {-moz-transform: scale(1);} 100% {-moz-transform: scale(0.5);} } @-o-keyframes scaleDown{ 0% {-o-transform: scale(1);} 100% {-o-transform: scale(0.5);} } @-ms-keyframes scaleDown{ 0% {-ms-transform: scale(1);} 100% {-ms-transform: scale(0.5);} } @keyframes scaleDown{ 0% {transform: scale(1);} 100% {transform: scale(0.5);} } @-webkit-keyframes fadeOut{ 0% {opacity: 1;} 100% {opacity: 0;} } @-moz-keyframes fadeOut{ 0% {opacity: 1;} 100% {opacity: 0;} } @-o-keyframes fadeOut{ 0% {opacity: 1;} 100% {opacity: 0;} } @-ms-keyframes fadeOut{ 0% {opacity: 1;} 100% {opacity: 0;} } @keyframes fadeOut{ 0% {opacity: 1;} 100% {opacity: 0;} } /* Media Queries for custom slider */ @media screen and (max-width: 660px) { .demo-1 .deco { width: 130px; height: 130px; margin-left: -65px; margin-bottom: 50px; } .demo-1 [data-icon]:after { width: 110px; height: 110px; line-height: 110px; font-size: 40px; margin: -55px 0 0 -55px; } .demo-1 .sl-slide blockquote { margin-bottom: -120px; } .demo-1 .sl-slide h2 { line-height: 22px; font-size: 18px; margin-bottom: -40px; letter-spacing: 8px; } .demo-1 .sl-slide blockquote p:before { line-height: 10px; width: 40px; height: 40px; font-size: 120px; left: -45px; } .demo-2 .sl-slider-wrapper { height: 500px; } .demo-2 .sl-slider h2 { font-size: 36px; } .demo-2 .sl-slider blockquote { font-size: 16px; } } .sl-slider-wrapper1 { width: 100%; height: auto; margin: 0 auto; position: relative; overflow: hidden; } .sl-slider { position: absolute; top: 0; left: 0; } /* Slide wrapper and slides */ .sl-slide, .sl-slides-wrapper1, .sl-slide-inner { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .sl-slide { z-index: 1; } /* The duplicate parts/slices */ .sl-content-slice { overflow: hidden; position: absolute; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; background: #fff; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; opacity : 1; } /* Horizontal slice */ .sl-slide-horizontal .sl-content-slice { width: 100%; height: 50%; left: -200px; -webkit-transform: translateY(0%) scale(1); -moz-transform: translateY(0%) scale(1); -o-transform: translateY(0%) scale(1); -ms-transform: translateY(0%) scale(1); transform: translateY(0%) scale(1); } .sl-slide-horizontal .sl-content-slice:first-child { top: -200px; padding: 200px 200px 0px 200px; } .sl-slide-horizontal .sl-content-slice:nth-child(2) { top: 50%; padding: 0px 200px 200px 200px; } /* Vertical slice */ .sl-slide-vertical .sl-content-slice { width: 50%; height: 100%; top: -200px; -webkit-transform: translateX(0%) scale(1); -moz-transform: translateX(0%) scale(1); -o-transform: translateX(0%) scale(1); -ms-transform: translateX(0%) scale(1); transform: translateX(0%) scale(1); } .sl-slide-vertical .sl-content-slice:first-child { left: -200px; padding: 200px 0px 200px 200px; } .sl-slide-vertical .sl-content-slice:nth-child(2) { left: 50%; padding: 200px 200px 200px 0px; } /* Content wrapper */ /* Width and height is set dynamically */ .sl-content-wrapper { position: absolute; } .sl-content { width: 100%; height: 100%; background: #fff; } /* Default styles for background colors */ .sl-slide-horizontal .sl-slide-inner { background: #ddd; } .sl-slide-vertical .sl-slide-inner { background: #ccc; } /*...........................Service Slider2.................................*/ /*---------------------------------------------------------------------------Services--------------------------------*/ /*---------------------------------------------------------------------------Products--------------------------------*/ .product_down{float:left;width: 55%;height:550px;margin-top:50px;position:relative;} .product_up{float:left;width: 40%;height:550px;margin-top:50px;color:#606060;position:relative; padding:10px;} #product1{background:url(../images/product1.jpg); background-size: cover; background-position: center; width:100%; height:650px; margin-top:100px; } #product2{background:url(../images/product2.jpg); background-size: cover; background-position: center; width:100%; height:650px; margin-top:0px; } #product3{background:url(../images/product3.jpg); background-size: cover; background-position: center; width:100%; height:650px; margin-top:0px; } .top_product{width:100%; height:650px; margin-top:60px;} .blog{width:100%; height:900px; margin-top:60px;} /*---------------------------------------------------------------------------Products--------------------------------*/ /* .focus class is also added on hover */ .dropdown1 li.focus{ background: #8dc63f; position: relative; z-index: 3; color: #fff; } .ch-grid { margin: 20px 0 0 0; padding: 0; list-style: none; display: block; text-align: center; width: 100%; } .ch-grid:after, .ch-item:before { content: ''; display: table; } .ch-grid:after { clear: both; } .ch-grid li { width: 220px; height: 220px; display: inline-block; margin: 20px; } #advantage{ background:url(../images/advantage_bg.jpg); background-size: cover; background-position: center; height:550px; margin-top:50px; } .myButton { background:#f75577; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; display:inline-block; cursor:pointer; color:#ffffff; font-family:Arial; font-size:20px; padding:13px 32px; text-decoration:none; } .myButton a{color:white;} .myButton a:hover { background-color:#5E5E5E; color:#FFFFFF; } .myButton:active { position:relative; top:1px; } .baner{width:300px; height:310px; float:left; background:#000000; padding:20px; opacity:0.7;} .baner .row{width:340px; height:300px; padding:10px; color:#FFFFFF;} .col-md-4{padding:10px;} .col-md-4 p{padding:10px;} .col-md-4 h1, h2, h3{padding:10px;} .delimiter{ width: 60px; height: 0; border-bottom: 2px solid #fa5c58; display: block; } .sociales { text-align: center; margin-bottom: 20px; } .dropdown-menu:before { position: absolute; top: -7px; left: 9px; display: inline-block; border-right: 0px solid transparent; border-bottom: 0px solid #ccc; border-left: 0px solid transparent; border-bottom-color: rgba(0, 0, 0, 0.2); content: ''; background:#FF0004; z-index:9999999999; } .dropdown-menu:after { position: absolute; top: -6px; display:none; left: 20px; display: inline-block; border-right: 0px solid transparent; border-bottom: 0px solid #ffffff; border-left: 0px solid transparent; content: ''; background:#FF0004; z-index:9999999999; } .dropdown-menu{border:none;} .navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus{background:#f75577 url("../images/scale_hover.png") repeat-x scroll center bottom; } .navbar .nav > li > .dropdown-menu::after{border-bottom:0px;} #contact{background:#000000; width:100%; padding-top:30px; padding-bottom:30px;} #about-us{z-index:1000000; position:initial;} .clearfix{*zoom:1}.clearfix:before,.clearfix:after{display:table;content:"";line-height:0} .clearfix:after{clear:both}.hide-text{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0} .input-block-level{display:block;width:100%;min-height:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}body{padding-top:0px; overflow-x:hidden; font-size:12px;color:#34495e;background:#f5f5f5}body h1,body h2,body h3,body h4,body .created{font-family: 'Open Sans', sans-serif;font-weight:normal} body h5,body h6{margin:0}body h3,body h4{margin-top:0}.btn{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;border:0;background-image:none;text-shadow:none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none} .btn.btn-transparent{border:3px solid #fff;background:transparent;color:#fff} .btn.btn-transparent:hover{border-color:rgba(255,255,255,0.5)} .btn-success{background:#a72f48;color:#FFFFFF;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px; -webkit-box-shadow: #5B9050 0px 5px 0px;-moz-box-shadow: #5B9050 0px 5px 0px; box-shadow: #921933 0px 5px 0px; color:#FFFFFF; font-size:36px; padding:20px; font-family: 'Open Sans', sans-serif;} .btn-success:hover{background:#fd6988;} .btn.btn-link{color:#f75577;padding:0}.btn.btn-link:hover{text-decoration:none}.btn-primary{background-color:#f75577;} .btn-primary:hover{background-color:#24a259}a{color:#f75577;}a:hover,a:focus{color:#005580;text-decoration:none;outline:0} .dropdown-menu{margin-top:-1px;min-width:180px}body>section{padding:0px 0} body>section#slide-show{padding:0}#recent-works{background:#eff0f0;color:#fff}#recent-works .links>a{background:#fff;color:#2dcc70;text-shadow:none} #recent-works h2{color:#a8b3b5;} #recent-works p{color:#a8b3b5;} ul.gallery li .desc{color:#a8b3b5;} #clients{background:#fff; padding-top:10px; padding-bottom:10px;}#clients h4{color:#999}#clients .carousel{margin-bottom:0} #clients .clients ul.thumbnails{margin:0} #clients .clients ul.thumbnails>li{text-align:center;margin-bottom:0} #clients .prev,#clients .next{color:#999} .title{background:#f75577;color:#fff;padding:20px 0; margin-top:100px;} .open{ackground: url(../images/scale_hover.png) repeat-x bottom #f75577;color:#FFFFFF; order-radius: 5px 5px 0px 0px; -moz-border-radius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px; height:60px; color:#FFFFFF; padding-bottom:20px; } .span3{ font-family: 'Roboto', sans-serif; font-size:14px; display:inline-block; border:0; width:196px; height:auto; position: relative; } .box h5{text-align:center; color:#3E3E3E;} .box p{ color:#3E3E3E;} .span3:hover { } .center{text-align:center} .box{border-top:0px solid #f0f0f0;-webkit-box-shadow:0 1px 2px 0 rgba(0,0,0,0.1);box-shadow:0 0px 0px 0 rgba(0,0,0,0.1);padding:10px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px; margin-top:10px; z-index: 2; -webkit-transition: all 500ms ease-in; -webkit-transform: scale(1); -ms-transition: all 500ms ease-in; -ms-transform: scale(1); -moz-transition: all 500ms ease-in; -moz-transform: scale(1); transition: all 500ms ease-in; transform: scale(1); color:#FFFFFF; } .box:hover{ box-shadow: 0px 0px 0px #000000; z-index: 2; -webkit-transition: all 500ms ease-in; -webkit-transform: scale(1.2); -ms-transition: all 500ms ease-in; -ms-transform: scale(1.2); -moz-transition: all 500ms ease-in; -moz-transform: scale(1.2); transition: all 500ms ease-in; transform: scale(1.2); } .bg-servcie{width:100%; height:400px; background:url(../images/bg-service.jpg) no-repeat;} .progress{margin-bottom:10px} .progress,.progress .bar{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;background-image:none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;text-shadow:none;height:30px;line-height:30px} .label,.badge{font-weight:300;font-size:90%} ul.breadcrumb{margin:12px 0 0;background:transparent} ul.breadcrumb>li{text-shadow:none} ul.breadcrumb>li>a,ul.breadcrumb>li .divider{color:#fff} ul.breadcrumb>li.active{color:rgba(255,255,255,0.7)} ul.tag-cloud li{display:inline-block;margin:0 0 2px 0} .btn-social{border:0;color:#fff;text-shadow:0 1px rgba(0,0,0,0.5)} .btn-social.btn-facebook{background:#4f7dd4} .btn-social.btn-facebook:hover{background:#789bde} .btn-social.btn-twitter{background:#5bceff}.btn-social.btn-twitter:hover{background:#8eddff}.btn-social.btn-linkedin{background:#21a6d8}.btn-social.btn-linkedin:hover{background:#49b9e3}.btn-social.btn-google-plus{background:#dc422b}.btn-social.btn-google-plus:hover{background:#e36957}.btn-social:hover{color:#fff} .header-unit { height: 800px; border: 0px solid #000; border-right:none; border-left: none; position: relative; padding: 0px; } #video-container { position: absolute; } #video-container { top:0%; left:0%; height:100%; width:100%; overflow: hidden; background:url(../images/pixel.png) repeat center; } video { z-index:0; } video.fillWidth { width: 100%; } .dropdown-menu>.active>a, .dropdown-menu>.active>a:hover, .dropdown-menu>.active>a:focus {background:#f35375; color:white;} .dropdown-menu>.active>a:hover, .dropdown-menu>.active>a:focus {background:#FFFFFF; color:#474747;} .dropdown-menu>li>a:hover{color:#393939; } #showcase { width: 100%; height: 460px; margin-top: 12px; visibility: hidden; } #showcase img { cursor: pointer; } #item-title { color: #F31414; font-size: 29px; letter-spacing: 0.13em; text-shadow: 1px 1px 6px #C72B2B; text-align: center; margin-top: 30px; margin-bottom: 22px; } .nav { text-align: center; } .nav > button { width: 64px; height: 36px; color: #666; font: bold 16px arial; text-decoration: none; text-align: center; margin: 5px; text-shadow: 0px 1px 0px #f5f5f5; background: #f6f6f6; border: solid 2px rgba(0, 0, 0, 0.4); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 0 9px 1px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0 0 9px 1px rgba(0, 0, 0, 0.4); box-shadow: 0 0 9px 1px rgba(0, 0, 0, 0.4); cursor: pointer; } .nav > button:active, .nav > button.down { background: #dfdfdf; border: solid 2px rgba(0, 0, 0, 0.6); box-shadow: none; } .row-fluid .span4{width:228px; text-align:center; font-size:14px; color:#007120; font-family: 'Roboto', sans-serif;} .icon-medium{font-size:100px;width:18px;line-height:18px;text-align:center;padding:10px;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;color:#86273b;} .modal{border:0}.modal#loginForm{width:600px;margin-left:-300px} .modal .modal-header{border:0;padding:20px 20px 0} .modal .modal-header>h4{font-weight:300;font-size:14px;color:#848484;text-transform:uppercase;margin:0} .modal .modal-body{padding:20px} .modal input[type="text"],.modal input[type="password"]{padding:5px 10px;min-height:30px;width:130px;margin-right:10px} .modal .icon-remove{color:#848484;position:absolute;right:-5px;top:-5px;width:16px;height:16px;line-height:16px;text-align:center;display:block;background:#ebebeb;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;cursor:pointer}.modal button{margin-left:10px;border:0}.gap{margin-bottom:50px} .big-gap{margin-bottom:100px}.no-margin{margin:0;padding:0} #main-video{background:#040404;color:#999}#services h1,#services h2,#services h3,#services h4,#services h5,#services h6{color:#FFFFFF;}#main-contents{margin-top:20px}#main-contents .blog-news .created{font-size:18px;color:#2dcc70} .span5{padding:10px; float:left; width:400px; color:#485152; font-size:14px; font-family: 'Roboto', sans-serif;} .span5 h3, h4{color:#485152;} .span6{width:100%;} .registration-form{border:0;background-color:#fff;border-top:1px solid #f0f0f0;-webkit-box-shadow:0 1px 2px 0 rgba(0,0,0,0.1);-moz-box-shadow:0 1px 2px 0 rgba(0,0,0,0.1);box-shadow:0 1px 2px 0 rgba(0,0,0,0.1);padding:20px;display:inline-block} body{font-family: 'Roboto', sans-serif; font-size:14px; } #bottom{background:#232323;color:#6f6f6f}#bottom h4{margin-top:0;margin-bottom:15px}#bottom h1,#bottom h2,#bottom h3,#bottom h4,#bottom h5,#bottom h6{color:#fff}#bottom a{color:#6f6f6f}#bottom a:hover{color:#f75577}#bottom ul.address>li{position:relative;padding-left:20px;margin-top:10px}#bottom ul.address>li:first-child{margin-top:0}#bottom ul.address>li>i{position:absolute;top:3px;left:0}#bottom ul.thumbnails{margin-bottom:0}#bottom ul.thumbnails li{margin-bottom:5px}ul.arrow,ul.arrow-double,ul.tick,ul.cross,ul.star,ul.rss{list-style:none;padding:0;margin:0}ul.arrow li::before,ul.arrow-double li::before,ul.tick li::before,ul.cross li::before,ul.star li::before,ul.rss li::before,ul.arrow li::after,ul.arrow-double li::after,ul.tick li::after,ul.cross li::after,ul.star li::after,ul.rss li::after{font-family:FontAwesome;font-size:11px}ul.arrow li::before,ul.arrow-double li::before,ul.tick li::before,ul.cross li::before,ul.star li::before,ul.rss li::before{margin-right:5px}ul.arrow li::before{content:"\f105"}ul.arrow-double li::before{content:"\f101"}ul.tick li::before{content:"\f00c"}ul.cross li::before{content:"\f00d"}ul.star li::before{content:"\f006"}ul.rss li::before{content:"\f09e"}#footer{background:#333; margin-top:0px;padding-top:15px;padding-bottom:15px;color:#666}#footer a{color:#666}#footer a:hover{color:#f75577}#footer #gototop{height:40px;line-height:40px;width:40px;text-align:center;display:inline-block;background:#1d1d1d;font-size:24px;color:#fff}#footer #gototop:hover{background:#2b2b2b;text-decoration:none}#footer .cp{margin-top:11px} ul.social{list-style:none;margin:10px 0 0;padding:0;display:inline-block}ul.social>li{display:inline-block;margin:0 5px}ul.social>li>a{font-size:24px;color:#666}ul.social>li>a:hover{color:#999}.box-border{padding:15px} .accordion-group{background-color:#fff;border-top:1px solid #f0f0f0}.accordion-heading .accordion-toggle{color:#666;font-weight:700}.accordion-inner{border-top:0}.blog .blog-item h2{margin-top:0}.blog .blog-item .date span{display:block;text-align:center}.blog .blog-item .date span.day{font-size:50px;line-height:50px;padding-top:10px;font-family:"Fjalla One",sans-serif}.blog .blog-item .date span.month{font-size:18px}.blog .blog-item .tag{margin-top:5px}.blog .blog-item .avatar{margin-top:5px}select,textarea,input[type="text"],input[type="password"],input[type="datetime"],input[type="datetime-local"],input[type="date"],input[type="month"],input[type="time"],input[type="week"],input[type="number"],input[type="email"],input[type="url"],input[type="search"],input[type="tel"],input[type="color"],.uneditable-input{-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;min-height:50px;padding:0 15px;border:3px solid #ededed}select:focus,textarea:focus,input[type="text"]:focus,input[type="password"]:focus,input[type="datetime"]:focus,input[type="datetime-local"]:focus,input[type="date"]:focus,input[type="month"]:focus,input[type="time"]:focus,input[type="week"]:focus,input[type="number"]:focus,input[type="email"]:focus,input[type="url"]:focus,input[type="search"]:focus,input[type="tel"]:focus,input[type="color"]:focus,.uneditable-input:focus{border-color:#2dcc70;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.input-block-level{min-height:50px}textarea#message{padding:10px 15px;height:219px}.widget{margin-bottom:30px}.widget>h3{font-size:16px;margin-top:0}.widget h5{margin-top:10px}.widget .date{margin-top:5px;padding:8px 10px;background:#2dcc70}.widget .date>span{display:block;text-align:center;font-family:"Fjalla One";color:#fff}.widget .date>span.month{font-size:14px;line-height:14px;font-weight:700;text-transform:uppercase}.widget .date>span.day{font-size:18px;line-height:18px}#pricing-table{margin-top:20px;margin-bottom:30px}#pricing-table .plan{list-style:none;margin:0;padding:0;color:#fff}#pricing-table .plan.featured{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1)}#pricing-table .plan>li{padding:10px 15px}#pricing-table .plan>li.plan-name{background:rgba(0,0,0,0.1)}#pricing-table .plan>li.plan-name h3{margin:10px 0}#pricing-table .plan>li.plan-action{padding:20px 0}#pricing-table .plan1{background:#1abc9c}#pricing-table .plan2{background:#e74c3c}#pricing-table .plan3{background:#3498db}#pricing-table .plan4{background:#9b59b6}ul.gallery{display:block;margin:-15px}ul.gallery.col-1 li{width:100%}ul.gallery.col-2 li{width:50%}ul.gallery.col-3 li{width:33.3333%}ul.gallery.col-4 li{width:25%}ul.gallery li{display:block;padding:0;margin:0;float:left}ul.gallery li .desc{margin:15px}ul.gallery li .preview{margin:15px;display:block;position:relative}ul.gallery li .preview .overlay{width:100%;height:100%;position:absolute;left:0;top:0;background:rgba(0,0,0,0.6);opacity:0;filter:alpha(opacity=0);-webkit-transition:opacity 300ms;-moz-transition:opacity 300ms;-o-transition:opacity 300ms;transition:opacity 300ms}ul.gallery li .preview .links{width:104px;height:40px;position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-52px;opacity:0;filter:alpha(opacity=0);-webkit-transform:translate(0,-50px);-moz-transform:translate(0,-50px);-ms-transform:translate(0,-50px);-o-transform:translate(0,-50px);transform:translate(0,-50px);-webkit-transition:300ms;-moz-transition:300ms;-o-transition:300ms;transition:300ms}ul.gallery li .preview .links>a{width:50px;height:40px;line-height:40px;display:inline-block;text-align:center;background:#2dcc70;color:#fff;text-shadow:0 1px rgba(0,0,0,0.3);font-size:18px;margin:0 1px}ul.gallery li .preview:hover .overlay,ul.gallery li .preview:hover .links{opacity:1;filter:alpha(opacity=100)}ul.gallery li .preview:hover .links{-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-ms-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0)}ul.faq{list-style:none;margin:0}ul.faq li{margin-top:30px}ul.faq li:first-child{margin-top:0}ul.faq li span.number{display:block;float:left;width:50px;height:50px;line-height:50px;text-align:center;background:#2dcc70;color:#fff;font-size:24px}ul.faq li>div{margin-left:70px}ul.faq li>div h3{margin-top:0}#error{text-align:center;margin-top:150px;margin-bottom:150px} .service_down{width:40%; height:auto; z-index:999999;} .slider1{display:block; width:100%; height:auto; z-index:999999; overflow:hidden; } .row-fluid .span3{width:15%;} @media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) { .container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container{width:95%; overflow-x:hidden; padding:10px;} body{overflow-x:hidden; padding:0px;} #service_banner{background:none; background-size: cover; background-position: center; width:100%; height:auto; margin-top:0px; } #clients .clients ul.thumbnails>li{width:100%;} .slider1{display:block; width:100%; min-height:200px; z-index:999999; overflow:hidden; padding-top:300px; } .option1{float:left; height:auto; width:100%; padding:0px; border:#F10004 solid 0px; text-align:center; } .row-fluid .span4{width:100%; height:auto; padding:10%; margin-left:0px;} .row-fluid .span4 p{width:100%; height:auto;} video{width:100%; height:auto;} .nav-collapse .open>.dropdown-menu{height:auto; float:left; width:100%;} .span5{width:100%; height:auto; margin-left:0px; padding:0px;} .title{margin:0px; text-align:center;} .sl-slider-wrapper{width:100%; height:auto;} #feature{ background-image:url(../images/about_bg.jpg); background-size: cover; background-position: center; height:auto; color:white; width:100%; padding-top:40px; margin-top:0px; } #f1{width:100%; height:auto; padding:0%; margin-left:0px;} #f1_content{width:100%; height:auto; padding-left:0px;} #f1_content p{width:100%; height:auto; padding-left:0px;} #f1_content h3{width:100%; height:auto; text-align:center;} .main-info{padding:0px;} .float-left{width:100%; float:none; padding:0px;} .float-right{width:100%; float:none; padding:0px; } .sky{width:100%; height:auto; padding-bottom:5%; margin-top:0px;} .service_left{width:100%; height:auto; margin-top:0px;} .service_right{ width:100%; background:none; height:auto; margin-top:0px;} #quote{ background:#f75577; background-size: cover; background-position: center; height:auto; width:100%; margin-top:0px; } .erp_right{ width:100%; background:none; height:auto; margin-top:0px;} .slider{width:100%; height:auto; padding-left:0px; background:none;} .testimony_left{float:left; width:100%; height:auto; padding:0px;} .testimony_right{float:right; width:100%; height:auto; padding:0px;} section{width:100%; margin:0px; padding:0px; height:auto;} .center{width:100%; height:auto;} #why{width:100%; height:auto; padding:0px; margin:0px;} #services{width:100%; height:auto; padding:0px; margin:0px;} #recent-works{width:100%; height:auto; padding:0px; margin:0px;} .container{width:100%; height:auto; padding:0px; margin:0px;} #showcase {width: 100%; height:100%;visibility: hidden;} #slogan { width:100%; min-height:auto; text-align:center; top:0px; position:absolute; padding-left:0px; padding-right:0px; z-index:999; background:url(../images/pixel.png) repeat center; padding-top:0px; } #slogan h2 { font-size:36px; padding-top:0px; font-weight:bold; color:#FFFFFF; font-family: 'Open Sans', sans-serif; text-transform:uppercase; text-shadow:1px 1px 1px #000000; border-bottom:#FFFFFF 2px solid; letter-spacing:0px; width:100%; margin:auto; } #slogan h1 { font-size:50px; padding-top:0px; font-weight:bold; color:#FFFFFF; font-family: 'Open Sans', sans-serif; text-transform:uppercase; text-shadow:1px 1px 1px #000000; letter-spacing:0px; width:850px; margin:auto; } #slogan p { font-size:20px; letter-spacing:4px; color:#FFFFFF; font-weight:normal; font-family: 'Roboto', sans-serif; text-shadow:1px 1px 1px #000000; padding-top:4px; width:100%; margin:0 auto; padding-bottom:0px; } #learn_more img { width:auto; height:auto; padding-top:10px; } .span6{font-family: 'Roboto', sans-serif; font-size:14px;} #slogan2{ width:100%; height:800px; text-align:center; top:0px; position:absolute; padding-left:0px; padding-right:0px; z-index:999; background:url(../images/pixel.png) repeat center; padding-top:200px; } #slogan2 p { font-size:20px; letter-spacing:4px; color:#FFFFFF; font-weight:normal; font-family: 'Roboto', sans-serif; text-shadow:1px 1px 1px #000000; padding-top:4px; width:900px; margin:0 auto; padding-bottom:0px; } .sl-slider-wrapper1{width:100%; height:auto; position:relative; z-index:999; float:left; padding-bottom:30px; } #slide-show1{width:100%; height:auto; z-index:9999;} .header-unit { height: auto; border: 0px solid #000; border-right:none; border-left: none; position: relative; padding: 0px; } #video-container { position: absolute; } #video-container { top:0%; left:0%; height:auto; width:100%; overflow:visible; background:url(../images/pixel.png) repeat center; } .demo-1{position:relative; width: 100%; height: auto;} .service_down{float:left; width:100%; height:auto; margin-top:50px;} .service_up{float:right; width:100%; height:auto; margin-top:50px; color:#606060;} nav-collapse,.nav-collapse.collapse{height:0;overflow:hidden;float: left;width: 100%;} #slogan2{ width:100%; height:800px; text-align:center; top:0px; position:absolute; padding-left:0px; padding-right:0px; z-index:999; background:url(../images/pixel.png) repeat center; padding-top: 0px; } #slogan2 p { font-size:20px; letter-spacing:4px; color:#FFFFFF; font-weight:normal; font-family: 'Roboto', sans-serif; text-shadow:1px 1px 1px #000000; padding-top:4px; width: 100%; margin:0 auto; padding-bottom:0px; } .area{ text-align:center; font-size: 1.5em; color:#fff; padding-top: 1; letter-spacing: 0px; font-weight:700; text-transform:uppercase; animation:blur 4s ease-out infinite; text-shadow:0px 0px 0px #fff, 0px 0px 0px #fff; } .area1{ text-align:center; font-size: 1.5em; color:#fff; padding-top: 1; letter-spacing: 0px; font-weight:700; text-transform:uppercase; animation:blur 4s ease-out infinite; text-shadow:0px 0px 0px #fff, 0px 0px 0px #fff; } .navbar .btn-navbar{background:#000000; margin-right:20px; padding:20px; float:right;} header #logo{margin-left:20px;} .sl-slider-wrapper1 { width: 100%; height: auto; margin: 0 auto; position: relative; overflow: hidden; } .sl-slider { position: absolute; top: 0; left: 0; } /* Slide wrapper and slides */ .sl-slide, .sl-slides-wrapper1, .sl-slide-inner { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .sl-slide { z-index: 1; } /* The duplicate parts/slices */ .sl-content-slice { overflow: hidden; position: absolute; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; background: #fff; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; opacity : 1; } /* Horizontal slice */ .sl-slide-horizontal .sl-content-slice { width: 100%; height: 50%; left: -200px; -webkit-transform: translateY(0%) scale(1); -moz-transform: translateY(0%) scale(1); -o-transform: translateY(0%) scale(1); -ms-transform: translateY(0%) scale(1); transform: translateY(0%) scale(1); } .sl-slide-horizontal .sl-content-slice:first-child { top: -200px; padding: 200px 200px 0px 200px; } .sl-slide-horizontal .sl-content-slice:nth-child(2) { top: 50%; padding: 0px 200px 200px 200px; } /* Vertical slice */ .sl-slide-vertical .sl-content-slice { width: 50%; height: 100%; top: -200px; -webkit-transform: translateX(0%) scale(1); -moz-transform: translateX(0%) scale(1); -o-transform: translateX(0%) scale(1); -ms-transform: translateX(0%) scale(1); transform: translateX(0%) scale(1); } .sl-slide-vertical .sl-content-slice:first-child { left: -200px; padding: 200px 0px 200px 200px; } .sl-slide-vertical .sl-content-slice:nth-child(2) { left: 50%; padding: 200px 200px 200px 0px; } /* Content wrapper */ /* Width and height is set dynamically */ .sl-content-wrapper { position: absolute; } .sl-content { width: 100%; height: 100%; background: #fff; } /* Default styles for background colors */ .sl-slide-horizontal .sl-slide-inner { background: #ddd; } .sl-slide-vertical .sl-slide-inner { background: #ccc; } .demo-1 .bg-2 .sl-slide-inner, .demo-1 .bg-2 .sl-content-slice { background: #000; } .demo-1 .bg-2 [data-icon]:after, .demo-1 .bg-2 h2 { color: #fff; } .demo-1 .bg-2 blockquote:before { color: #222; } /* Third Slide */ .demo-1 .bg-3 .sl-slide-inner, .demo-1 .bg-3 .sl-content-slice { background: #db84ad; } .demo-1 .bg-3 .deco { border-color: #fff; border-color: rgba(255,255,255,0.5); } .demo-1 .bg-3 [data-icon]:after { color: #fff; text-shadow: 0 0 1px #fff; box-shadow: inset 0 0 0 10px #b55381; } .demo-1 .bg-3 h2, .demo-1 .bg-3 blockquote{ color: #fff; text-shadow: 0px 1px 1px rgba(0,0,0,0.3); } .demo-1 .bg-3 blockquote:before { color: #c46c96; } /* Forth Slide */ .demo-1 .bg-4 .sl-slide-inner, .demo-1 .bg-4 .sl-content-slice { background: #5bc2ce; } .demo-1 .bg-4 .deco { border-color: #379eaa; } .demo-1 .bg-4 [data-icon]:after { text-shadow: 0 0 1px #277d87; color: #277d87; } .demo-1 .bg-4 h2, .demo-1 .bg-4 blockquote{ color: #fff; text-shadow: 1px 1px 1px rgba(0,0,0,0.2); } .demo-1 .bg-4 blockquote:before { color: #379eaa; } /* Fifth Slide */ .demo-1 .bg-5 .sl-slide-inner, .demo-1 .bg-5 .sl-content-slice { background: #ffeb41; } .demo-1 .bg-5 .deco { border-color: #ECD82C; } .demo-1 .bg-5 .deco:after { color: #000; text-shadow: 0 0 1px #000; } .demo-1 .bg-5 h2, .demo-1 .bg-5 blockquote{ color: #000; text-shadow: 1px 1px 1px rgba(0,0,0,0.1); } .demo-1 .bg-5 blockquote:before { color: #ecd82c; } .product_down{float:left;width: 100%;height:auto;margin-top:50px;position:relative;} .product_up{float:left;width: 100%;height:auto;margin-top:50px;color:#606060;position:relative;} .top_product{width:100%; height:auto; margin-top:0px;} .text_home{color:white; font-size:46px; text-transform:uppercase; text-shadow:0px 0px 10px #828182, 0px 0px 7px #000;} .nav-collapse .nav>li>a, .nav-collapse .dropdown-menu a{color:#FFFFFF;} .timeline-panel{text-align:center;} #timeline_wrap{width:100%; height:auto; margin:0 auto; } #timeline_wrap{width:1280px; height:auto; padding:0px; margin:0 auto; background:url(../images/timeline_bg_mobile.png) no-repeat center; padding-top:50px; padding-bottom:100px;} #time{ background:#FFFFFF; width: 300px;height: 300px;margin-left: 0px;margin-bottom: 0px;border-radius: 150px 150px 150px 150px;-moz-border-radius: 150px 150px 150px 150px;-webkit-border-radius: 150px 150px 150px 150px;border: 10px solid #8F8F8F;} .time_content{padding:100px; width:auto; text-align:center;} #time1{background:#FFFFFF; width:300px; height:300px; margin-left:0px; border-radius: 300px 300px 300px 300px; -moz-border-radius: 300px 300px 300px 300px; -webkit-border-radius: 300px 300px 300px 300px; border: 10px solid #D1D1D1;} #time1:hover{background:#E1E0E0;} .time_content1{ padding:20px; width:auto; text-align:center;} .time_content1 img{ width:150px; text-align:center;} #time2{background:#FFFFFF; width:300px; height:300px; margin-left:0px; margin-top:0px; border-radius: 250px 250px 250px 250px; -moz-border-radius: 250px 250px 250px 250px; -webkit-border-radius: 250px 250px 250px 250px; border: 10px solid #D1D1D1;} #time2:hover{background:#E1E0E0;} .time_content2{padding:10px; width:auto; height:auto; text-align:center;} .time_content2 img{ width:150px; text-align:center;} #time3{background:#FFFFFF; width:300px; height:300px; margin-left:0px; margin-top:0px; border-radius: 500px 500px 500px 500px; -moz-border-radius: 500px 500px 500px 500px; -webkit-border-radius: 500px 500px 500px 500px; border: 10px solid #D1D1D1;} #time3:hover{background:#E1E0E0;} .time_content3{padding:20px; width:auto; height:auto; text-align:center;} #time14{background:#FFFFFF; width:300px; height:300px; margin-left:0px; margin-top:0px; border-radius: 300px 300px 300px 300px; -moz-border-radius: 300px 300px 300px 300px; -webkit-border-radius: 300px 300px 300px 300px; border: 10px solid #D1D1D1;} #time14:hover{background:#E1E0E0;} .time_content14{padding:20px; width:auto; height:auto; text-align:center;} #time4{background:#FFFFFF; width:300px; height:300px; margin-left:0px; margin-top:0px; border-radius: 280px 280px 280px 280px; -moz-border-radius: 280px 280px 280px 280px; -webkit-border-radius: 280px 280px 280px 280px; border: 10px solid #D1D1D1;} #time4:hover{background:#E1E0E0;} .time_content4{padding:10px; width:auto; height:auto; text-align:center;} #time5{background:#FFFFFF; width: 300px;height: 300px;margin-left:0px;margin-top:0px; border-radius: 280px 280px 280px 280px;-moz-border-radius: 280px 280px 280px 280px;-webkit-border-radius: 280px 280px 280px 280px;border: 10px solid #D1D1D1;} #time5:hover{background:#E1E0E0;} .time_content5{padding: 30px;width:auto;height:auto;text-align:center;} #time6{background:#FFFFFF; width:300px;height:300px;margin-left: 0px;margin-top: 0px;border-radius: 380px 380px 380px 380px;-moz-border-radius: 380px 380px 380px 380px;-webkit-border-radius: 380px 380px 380px 380px;border: 10px solid #D1D1D1;} .time_content6{padding:10px; width:auto; height:auto; text-align:center;} #time6:hover{background:#E1E0E0;} .time_content6 img{padding:10px; width:50%; height:auto; text-align:center;} #time7{background:#FFFFFF; width: 300px;height: 300px;margin-left: 0px;margin-top: 0px;border-radius: 280px 280px 280px 280px;-moz-border-radius: 280px 280px 280px 280px;-webkit-border-radius: 280px 280px 280px 280px;border: 10px solid #D1D1D1;} #time7:hover{background:#E1E0E0;} .time_content7{padding:10px; width:auto; height:auto; text-align:center;} #time8{background:#FFFFFF; width: 300px;height: 300px;margin-left: 0px;margin-top: 0px;border-radius: 280px 280px 280px 280px;-moz-border-radius: 280px 280px 280px 280px;-webkit-border-radius: 280px 280px 280px 280px;border: 10px solid #D1D1D1;} #time8:hover{background:#E1E0E0;} .time_content8{padding:10px; width:auto; height:auto; text-align:center;} #time9{background:#FFFFFF; width: 300px;height: 300px;margin-left:0px;margin-top:0px;border-radius: 280px 280px 280px 280px;-moz-border-radius: 280px 280px 280px 280px;-webkit-border-radius: 280px 280px 280px 280px;border: 10px solid #D1D1D1;} #time9:hover{background:#E1E0E0;} #time10{background:url(../images/foot_left.png) no-repeat; width:200px; height:220px; margin-left:0px; margin-top:0px;} #time11{background:url(../images/foot_right.png) no-repeat; width:200px; height:220px; margin-left:0px; margin-top:0px;} #time12{background:url(foot_left.png) no-repeat; width:200px; height:220px; margin-left:0px; margin-top:0px;} #time13{background:url(foot_right.png) no-repeat; width:200px; height:220px; margin-left:0px; margin-top:0px;} .hover { position:relative; } .tooltip { top:100px; left:0px; background:white; color:white; width:100%; height:auto; border-radius:5px; opacity:0; border:#C0C0C0 solid 1px; position:absolute; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -ms-transition: opacity 0.5s; -o-transition: opacity 0.5s; transition: opacity 0.5s; padding:10px; } .hover:hover .tooltip { opacity:1; } #clients .clients ul.thumbnails>li {margin-left:30%;} }