/*================================================= ==================================================*/ /*================================================ ANIMATION ================================================*/ [class*='mi-animation-']{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-animation-fill-mode:both;animation-fill-mode:both} .mi-animation-fade{-webkit-animation-name:uk-fade;animation-name:uk-fade;-webkit-animation-duration:.8s;animation-duration:.8s;-webkit-animation-timing-function:linear;animation-timing-function:linear} .mi-animation-scale-up{-webkit-animation-name:uk-scale-up;animation-name:uk-scale-up} .mi-animation-scale-down{-webkit-animation-name:uk-scale-down;animation-name:uk-scale-down} .mi-animation-slide-top{-webkit-animation-name:uk-slide-top;animation-name:uk-slide-top} .mi-animation-slide-bottom{-webkit-animation-name:uk-slide-bottom;animation-name:uk-slide-bottom} .mi-animation-slide-left{-webkit-animation-name:uk-slide-left;animation-name:uk-slide-left} .mi-animation-slide-right{-webkit-animation-name:uk-slide-right;animation-name:uk-slide-right} .mi-animation-shake{-webkit-animation-name:uk-shake;animation-name:uk-shake} .mi-animation-reverse{-webkit-animation-direction:reverse;animation-direction:reverse} @-webkit-keyframes uk-fade{0%{opacity:0} 100%{opacity:1}}@keyframes uk-fade{0%{opacity:0} 100%{opacity:1}} @-webkit-keyframes uk-scale-up{0%{opacity:0;-webkit-transform:scale(.2)} 100%{opacity:1;-webkit-transform:scale(1)}} @keyframes uk-scale-up{0%{opacity:0;transform:scale(.2)} 100%{opacity:1;transform:scale(1)}} @-webkit-keyframes uk-scale-down{0%{opacity:0;-webkit-transform:scale(1.8)} 100%{opacity:1;-webkit-transform:scale(1)}} @keyframes uk-scale-down{0%{opacity:0;transform:scale(1.8)} 100%{opacity:1;transform:scale(1)}} @-webkit-keyframes uk-slide-top{0%{opacity:0;-webkit-transform:translateY(-100%)} 100%{opacity:1;-webkit-transform:translateY(0)}} @keyframes uk-slide-top{0%{opacity:0;transform:translateY(-100%)} 100%{opacity:1;transform:translateY(0)}} @-webkit-keyframes uk-slide-bottom{0%{opacity:0;-webkit-transform:translateY(100%)} 100%{opacity:1;-webkit-transform:translateY(0)}} @keyframes uk-slide-bottom{0%{opacity:0;transform:translateY(100%)} 100%{opacity:1;transform:translateY(0)}} @-webkit-keyframes uk-slide-left{0%{opacity:0;-webkit-transform:translateX(-100%)} 100%{opacity:1;-webkit-transform:translateX(0)}} @keyframes uk-slide-left{0%{opacity:0;transform:translateX(-100%)} 100%{opacity:1;transform:translateX(0)}} @-webkit-keyframes uk-slide-right{0%{opacity:0;-webkit-transform:translateX(100%)} 100%{opacity:1;-webkit-transform:translateX(0)}} @keyframes uk-slide-right{0%{opacity:0;transform:translateX(100%)} 100%{opacity:1;transform:translateX(0)}} @-webkit-keyframes uk-shake{0%,100%{-webkit-transform:translateX(0)} 10%{-webkit-transform:translateX(-9px)} 20%{-webkit-transform:translateX(8px)} 30%{-webkit-transform:translateX(-7px)} 40%{-webkit-transform:translateX(6px)} 50%{-webkit-transform:translateX(-5px)} 60%{-webkit-transform:translateX(4px)} 70%{-webkit-transform:translateX(-3px)} 80%{-webkit-transform:translateX(2px)} 90%{-webkit-transform:translateX(-1px)}} @keyframes uk-shake{0%,100%{transform:translateX(0)} 10%{transform:translateX(-9px)} 20%{transform:translateX(8px)} 30%{transform:translateX(-7px)} 40%{transform:translateX(6px)} 50%{transform:translateX(-5px)} 60%{transform:translateX(4px)} 70%{transform:translateX(-3px)} 80%{transform:translateX(2px)} 90%{transform:translateX(-1px)}} @-webkit-keyframes uk-slide-top-fixed{0%{opacity:0;-webkit-transform:translateY(-10px)} 100%{opacity:1;-webkit-transform:translateY(0)}} @keyframes uk-slide-top-fixed{0%{opacity:0;transform:translateY(-10px)} 100%{opacity:1;transform:translateY(0)}} @-webkit-keyframes uk-slide-bottom-fixed{0%{opacity:0;-webkit-transform:translateY(10px)} 100%{opacity:1;-webkit-transform:translateY(0)}} @keyframes uk-slide-bottom-fixed{0%{opacity:0;transform:translateY(10px)} 100%{opacity:1;transform:translateY(0)}} @-webkit-keyframes uk-spin{0%{-webkit-transform:rotate(0deg)} 100%{-webkit-transform:rotate(359deg)}}@keyframes uk-spin{0%{transform:rotate(0deg)} 100%{transform:rotate(359deg)}} /*.js.cssanimations.csstransitions .mi-scroll-animations .presentation-wrap h1, .js.cssanimations.csstransitions .mi-scroll-animations .presentation-wrap .desc,.js.cssanimations.csstransitions .mi-scroll-animations .feature h2, .js.cssanimations.csstransitions .mi-scroll-animations .feature p, .js.cssanimations.csstransitions .mi-scroll-animations .item h2, .js.cssanimations.csstransitions .mi-scroll-animations .item p , .js.cssanimations.csstransitions .mi-scroll-animations .feature-img, .js.cssanimations.csstransitions .mi-scroll-animations #quotesCarousel, .js.cssanimations.csstransitions .mi-scroll-animations #highlight h2, .js.cssanimations.csstransitions .mi-scroll-animations #requestDemo form { opacity: 0; transform: translateY(-40px); } .js.cssanimations.csstransitions .mi-scroll-animations .mi-animated .presentation-wrap h1, .js.cssanimations.csstransitions .mi-scroll-animations .mi-animated .presentation-wrap .desc, .js.cssanimations.csstransitions .mi-scroll-animations .mi-animated .feature h2, .js.cssanimations.csstransitions .mi-scroll-animations .mi-animated .feature p, .js.cssanimations.csstransitions .mi-scroll-animations .mi-animated .item h2, .js.cssanimations.csstransitions .mi-scroll-animations .mi-animated .item p, .js.cssanimations.csstransitions .mi-scroll-animations .mi-animated .feature-img, .js.cssanimations.csstransitions .mi-scroll-animations .mi-animated #quotesCarousel, .js.cssanimations.csstransitions .mi-scroll-animations #highlight.mi-animated h2, .js.cssanimations.csstransitions .mi-scroll-animations #requestDemo.mi-animated form { opacity: 1; transform: translateY(0px); } .js.cssanimations.csstransitions .mi-scroll-animations .macbook{ opacity: 0; transform: translateX(-500px); } .js.cssanimations.csstransitions .mi-scroll-animations .mi-animated .macbook{ opacity: 1; transform: translateX(0px); transition-delay: 2s; } .js.cssanimations.csstransitions .mi-scroll-animations .ipad{ opacity: 0; transform: translateX(500px); } .js.cssanimations.csstransitions .mi-scroll-animations .mi-animated .ipad{ opacity: 1; transform: translateX(0px); transition-delay: 3s; } .js.cssanimations.csstransitions .mi-scroll-animations .mobile{ opacity: 0; transform: translateX(500px); } .js.cssanimations.csstransitions .mi-scroll-animations .mi-animated .mobile{ opacity: 1; transform: translateX(0px); transition-delay: 4s; } .js.cssanimations.csstransitions .mi-scroll-animations .ipad2{ opacity: 0; transform: translateX(-50px); } .js.cssanimations.csstransitions .mi-scroll-animations .mi-animated .ipad2{ opacity: 1; transform: translateX(0px); transition-delay: 1s; } .js.cssanimations.csstransitions .mi-scroll-animations .iphone2{ opacity: 0; transform: translateX(50px); } .js.cssanimations.csstransitions .mi-scroll-animations .mi-animated .iphone2{ opacity: 1; transform: translateX(0px); transition-delay: 2s; }*/ /*================================================ ================================================*/ body{ background:#fff; font-family: 'Source Sans Pro', sans-serif; color: #2c3d51; font-weight:200; font-size:18px;} h1, h2, h3, h4,h5,h6,h7{ font-family: 'Signika Negative', sans-serif; } .input-lg{font-weight:200;} #content{ overflow: hidden; position: relative; width: 100%; } .section-header { font-size:35px; font-weight:300; } * { -moz-transition: all 0.7s ease-in-out; -webkit-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out 0s; outline:0} a, a:link, a:focus; a:active, a:visited{outline:none} .container { max-width: 940px; } .section{ padding:2em 0} .section.alternate{ background:#ecf0f1} .section.alternate2{ background:#25bd99} #header{ background:#25bd99 ; height:530px; position:relative;} .navbar-inner { background: #25bd99; border: 0px solid #D4D4D4; border-radius: 0px; box-shadow: 0 0 0; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff25bd99', endColorstr='#ff25bd99', GradientType=0); } #header h1{ color:#fff; font-weight:500; font-size:50px; line-height:1.2; margin-bottom:10px; margin-top: 20px;} #header .desc{ color:#fff; font-weight:200; font-size:30px; display:block; margin-bottom:40px;} #header .macbook{ left:15px; position: absolute; top: 153px; z-index:100;} #header .ipad{ position: absolute; right: 50px; top:242px; z-index:200;} #header .mobile{ position: absolute; right: 390px; top:300px; z-index:300;} .navbar .brand { background: url(logo.png) no-repeat 0 0 ; display:block; height: 254px; text-indent:-9999px; text-transform:uppercase; width:356px; outline:0; position:absolute; top:0; left:15px;} .navbar .container{ position:relative} .nav { position:absolute; right:20px; top:-5px; z-index:100} .navbar .nav li{ margin-left: 10px; float:left } .navbar .nav li a{ background: #25BD99; border:1px solid #25BD99; color:#2c3d4f; font-size:14px; text-shadow: 0 0 0; -webkit-border-radius: 4px; -moz-border-radius: 4px;border-radius: 4px; text-align:center; outline:none} .navbar .nav li:hover a, .navbar .nav li a:hover{ background: #25BD99; color:#fff; border:1px solid #fff} .navbar .nav li a.contact{ background: #1fa083; color:#fff; /*text-transform:uppercase; */} .navbar .nav li:hover a.contact, .navbar .nav li a.contact:hover, .navbar .nav li a.contact:active { background:#2c3d51; color: #25bd99; border-color: #2c3d51; outline:none } /*.navbar .nav li a{ background: #1fa083; color:#fff; font-size:14px; text-shadow: 0 0 0; -webkit-border-radius: 5px; -moz-border-radius: 5px;border-radius: 5px; text-align:center} .navbar .nav li a.social{ height: 18px; padding-top: 13px; width: 12px; } */ /*========================================================================== CONTACT ========================================================================== */ #contact{ background:#2c3d51; color:#fff ;display:none } #contact .row{ position:relative} #contact .lead{ font-size:31px; font-weight:200; margin-top:5px; margin-bottom:10px} #contact address{ margin-top:10px; margin-bottom:30px } #contact span.telephone, #contact a{ font-family: 'Signika Negative', sans-serif; font-weight:bold; font-size:20px; color:#26a184; line-height:24px} #contact a{ display:inline-block ; margin-bottom:10px;} #contact a#closeContact { background:url(img/btn-close.png) no-repeat 0 0; display:block; height:25px; text-indent:-9999px; text-transform:uppercase; width:25px ; position:absolute; right: 0px; top:10px; outline:0} #contact form .form-group .form-group { } #contact .btn{background:#26a184; border-color: #26a184 ; color:#fff; font-size:15px; font-weight:normal; font-family: 'Signika Negative',sans-serif; padding:12px 22px; outline:none } #contact textarea{ width:100%; color:#555; resize: none; } #contact .btn:hover, #contact .btn:focus{background:#1ba289; outline:none} /*========================================================================== PRESENTATION ========================================================================== */ #presentation { background: #fff; padding-bottom:40px; padding-top:180px;} #presentation .item{} #presentation .item h2{ font-size: 20px; font-weight:500; padding-left: 10px; overflow:hidden} #presentation .item h2 i{ float:left; } #presentation .item h2 span{ float:left; display:block; padding-top:5px; padding-left:10px} #presentation .item p{ font-size:18px } .presentation-text{ /*margin-top:-140px*/} /*========================================================================== QUOTES ========================================================================== */ #qoutes { padding:60px 0; text-align:center } #qoutes .carousel-inner .item{ font-size: 35px; line-height:1.2; color: #1fa083 } #qoutes ol.carousel-indicators { position:static; display:inline-block; margin-top:20px; margin-left:0} #qoutes ol.carousel-indicators li { background:#25bd99; width:5px; height:5px; margin-top:2px} #qoutes ol.carousel-indicators li.active { background:#25bd99; width:8px; height:8px; margin-top:0px} /*========================================================================== FEATURES ========================================================================== */ .feature h2{ font-size:24px; line-height:1.2; color:#25bd99; font-weight:500} .feature h2.big-header{ font-size:50px; } #feature2 h2.big-header{ color:#fff ; font-size:24px} .feature p{margin-bottom:40px;} #feature1 { margin-bottom: 80px;margin-top: 80px;} #feature2 { padding: 100px 0; margin-top: 40px} #feature2 img{ margin-top:30px; } #feature2 p{ color:#fff; margin-bottom:20px;} #feature3 { position:relative;/*height:534px*/ padding-bottom:0;} #feature3 .feature{margin-top:200px} .feature-img{ position:relative; } .feature-img2 img, #feature1 .feature-img img {max-width:100%;} .feature-silder2{ height:500px;} .feature-silder2 .ipad2{ position: absolute; bottom:0; left:-20px; z-index:100;} .feature-silder2 .iphone2{ position: absolute; bottom:0; right:-140px; z-index:200} /*========================================================================== HIGHLIGHT ========================================================================== */ #highlight { background: url(img/highlight.jpg) no-repeat top center ; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; min-height: 722px; color:#fff; overflow:hidden} #highlight h2 { color:#fff; margin-top:250px; font-size:50px; line-height:1.4;} /*========================================================================== REQUEST DEMO ========================================================================== */ #requestDemo { background: #ecf0f1; padding:95px 0 80px 0} #requestDemo .form-group{ /*margin-right:20px;*/} #requestDemo .btn{ background:#ec6446; border-color: #ec6446 ; font-size:18px; font-weight:400; color:#fff; padding-left:25px; padding-right:25px;} #requestDemo .btn:hover, #requestDemo .btn:focus{ background:#d95234;} /*========================================================================== INTERFACES ========================================================================== */ /*========================================================================== SHARE ========================================================================== */ #share { background: #25bd99; padding: 95px 0; color:#fff; display:none; visible:hidden} #share a{ background: #1fa083; color: #25bd99 ; margin-right:60px; -webkit-border-radius: 40px; -moz-border-radius: 40px;border-radius: 40px; } #share a:hover{ background: #fff; text-decoration:none} #share a.fb{ padding:30px 35px } #share a.tw{ padding:30px 31px } #share a.em{ padding:30px 30px } /*========================================================================== NEWSLETTER ========================================================================== */ #newsletter{ background:#2c3d51; padding:80px 0} #newsletter .section-header{ color:#fff; font-size:30px; font-weight:200; margin-top: 0px} #newsletter .btn{background:#26a184; border-color: #26a184 ; color:#fff; font-size:18px; font-family: 'Signika Negative',sans-serif; padding-left:32px; padding-right:32px; text-transform:uppercase} #newsletter .btn:hover, #contact .btn:hover{background:#14917a; cursor:pointer;} /*========================================================================== IE fix ========================================================================== */ /* IE9, IE10 */ @media screen and (min-width:0\0) { #presentation .item h2 { padding-left:0} } /*========================================================================== Media Queries ========================================================================== */ @media only screen and (min-width: 1441px) { } /* Large devices (large desktops, 1200px and up) */ @media (min-width: 1200px) { #header .ipad{ right: 50px;} } /* Medium devices (desktops, 992px and up) */ @media (min-width: 992px) { #header .macbook{ left:15px; top: 153px;} #header .ipad{ right: 50px;} .feature-silder2{height:500px;} } @media (min-width: 941px) and (max-width: 991px) { #header .desc{font-size:20px;} #feature3 .feature{margin-top:20px} .feature-silder2{height:5ß00px;} .feature-silder2 .ipad2 {left:30px;} .feature-silder2 .iphone2{right:30px;} .feature-silder2{} } /* Small devices (tablets, 768px and up) */ @media (min-width: 768px) and (max-width: 940px) { #header .desc{font-size:20px;} #feature3 .feature{margin-top:40px;} #header .macbook{ left:15px;} #header .ipad{ right: 10px;} #header .mobile{ right: 333px;} .feature-silder2{height:600px;} .feature-silder2 .ipad2 {left:30px;} .feature-silder2 .iphone2{right:30px;} } @media (max-width: 767px) { #header {height:480px;} #header h1 {font-size:40px;} #header .desc{font-size:18px;} #header .macbook{ width: 480px; left:15px;} #header .ipad{ width:300px; right: 10px;} #header .macbook img, #header .ipad img{ max-width:100%; } #header .mobile{ right: 265px; top: 320px; width: 80px;} #header .mobile img{max-width:100%;} #highlight{ min-height:520px;} #highlight h2{ margin-top:150px;} .feature h2.big-header, #highlight h2 { font-size:40px;} #feature3 .feature{margin-top:40px;} .feature-silder2{height:400px;} .feature-silder2 .ipad2 {left:30px;} .feature-silder2 .iphone2{right:30px;} #requestDemo .form-group{margin-right:0px;} #contact a#closeContact{right:20px;} #contact .form-group .form-group, #contact .col-sm-12, #contact .col-md-3{padding:0!important;} #requestDemo .col-md-10{padding:0;} } @media only screen and (min-width: 481px) and (max-width: 667px) { .feature-silder2{height:320px;} .feature-silder2 .ipad2 {left:35px;width:420px;} .feature-silder2 .iphone2{right:35px; width:150px;} .feature-silder2 .ipad2 img, .feature-silder2 .iphone2 img{ max-width:100%;} #requestDemo .col-md-10{padding:0;} } @media only screen and (max-width: 480px) { #header h1 {font-size:28px;} #header .desc{font-size:18px;} #header .macbook{ width: 480px; left:15px;} #header .ipad{ width:300px; right: -100px;} #header .mobile{ right: 158px; top: 320px; width: 80px;} #header .mobile img{max-width:100%;} .presentation-text{ } #highlight{ min-height:520px;} { margin-top:150px } .feature h2.big-header, #highlight h2 { font-size: 30px;} .btn{ width:100%;} #contact .form-group .form-group, #contact .col-sm-12, #contact .col-md-3{padding:0!important;} #contact a#closeContact{right:20px;} #feature1 { margin-bottom: 0px;margin-top: 0px;} .feature-silder2{height:250px;} .feature-silder2 .ipad2 {left:30px;width:320px;} .feature-silder2 .iphone2{right:30px; width:120px;} .feature-silder2 .ipad2 img, .feature-silder2 .iphone2 img{ max-width:100%;} #requestDemo .col-md-10{padding:0;} } @media only screen and (min-width: 321px) and (max-width: 479px) { #presentation .col-xs-6{ width:100%;} #feature1 .col-xs-4{ width:100%;} #feature1 .col-xs-6{ width:100%; margin-left:0;} #feature2 .col-xs-3,#feature2 .col-xs-8{ width:100%;} #feature2 .col-xs-3{text-align:center;} #feature2 .feature-img img{margin-top:10px; margin-bottom:50px;} #highlight h2{ margin-top:150px; } .feature-silder2{height:250px;} .feature-silder2 .ipad2 {left:15px;width:320px;} .feature-silder2 .iphone2{right:15px; width:100px;} .feature-silder2 .ipad2 img, .feature-silder2 .iphone2 img{ max-width:100%;} } /* Medium screens */ @media only screen and (max-width: 320px) { #presentation .col-xs-6{ width:100%;} #highlight{ min-height:420px;} #highlight h2{ margin-top:150px; } #feature2 .col-xs-3,#feature2 .col-xs-8{ width:100%; margin-left:0;} #feature2 .col-xs-3{text-align:center;} #feature2 .feature-img img{margin-top:10px; margin-bottom:50px;} #feature1 .col-xs-4{ width:100%;} #feature1 .col-xs-6{ width:100%;margin-left:0;} .feature-silder2 .ipad2 {left:10px; width:270px;} .feature-silder2 .iphone2{right:10px; width:100px;} .feature-silder2 .ipad2 img, .feature-silder2 .iphone2 img{ max-width:100%;} } /* iPads (landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { .feature-silder2 .iphone2 { right: -100px; } } /* iPads (portrait) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { }