/* Boxer Template http://www.templatemo.com/tm-446-boxer */ body { background: #fff; font-family: 'Open Sans', sans-serif; font-weight: 300; position: relative; width: 100%; height: 100%; overflow-x: hidden; } .tm-white a { color: #fff; } /* start h1 group */ h1 { margin-top: 0; margin-bottom: 25px; } h1, h2, h3, h4 { font-weight: bold; } /* end h1 group */ p { line-height: 1.6em; } /* img */ img { max-width: 100%; height: auto; } /* img */ /* overlay */ .overlay { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); padding-top: 90px; padding-bottom: 90px; } /* over lay */ /* start page container */ @media (min-width: 768px) { .container { width: 700px; } } @media (min-width: 992px) { .container { width: 900px; } } @media (min-width: 1200px) { .container { width: 1000px; } } /* end page container */ /* start preloader */ .preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; /*justify-content: center;*/ -webkit-align-items: center; -ms-flex-align: center; align-items: center; background: none repeat scroll 0 0 #fff; } .sk-spinner-rotating-plane.sk-spinner { width: 30px; height: 30px; background-color: #28a7e9; margin: 0 auto; -webkit-animation: sk-rotatePlane 1.2s infinite ease-in-out; animation: sk-rotatePlane 1.2s infinite ease-in-out; } @-webkit-keyframes sk-rotatePlane { 0% { -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); transform: perspective(120px) rotateX(0deg) rotateY(0deg); } 50% { -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); } 100% { -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } } @keyframes sk-rotatePlane { 0% { -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); transform: perspective(120px) rotateX(0deg) rotateY(0deg); } 50% { -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); } 100% { -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } } /* end preloader */ /* start navigation */ .navbar-default { background: #fff; border: none; box-shadow: 0px 2px 8px 0px rgba(50, 50, 50, 0.08); margin: 0!important; } .navbar-default .navbar-brand { color: #28a7e9; font-size: 30px; font-weight: bold; height: 70px; line-height: 35px; } .navbar-default .nav li a { color: #666; font-size: 13px; font-weight: bold; height: 70px; line-height: 40px; } .navbar-default .nav li a:hover, .navbar-default .nav li a:focus, .navbar-default .nav li a.current { color: #28a7e9; } .navbar-default .navbar-toggle { border: none; padding-top: 20px; } .navbar-default .navbar-toggle .icon-bar { background: #28a7e9; border-color: transparent; } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: transparent } /* end navigation */ /* start home */ #home { background: url('../images/home-bg.jpg') no-repeat; background-size: cover; color: #fff; margin-top: 70px; text-align: center; width: 100%; } #home p { font-weight: 400; font-style: italic; line-height: 2em; } #home img { display: inline-block; margin-top: 30px; } /* end home */ /* start divider */ #divider { text-align: center; padding-top: 80px; padding-bottom: 80px; } #divider .fa { color: #28a7e9; font-size: 60px; } #divider h3 { font-size: 20px; } /* end divider */ /* start feature */ #feature { background: #f8f8f8; padding-top: 80px; padding-bottom: 80px; } #feature p { padding-top: 10px; } #feature span { float: left; } #feature .fa { background: #28a7e9; border-radius: 50%; color: #fff; display: inline-block; width: 40px; height: 40px; line-height: 40px; text-align: center; margin-right: 20px; } /* end feature */ /* start feature1 */ #feature1 { padding-top: 60px; padding-bottom: 60px; } #feature1 p { padding-top: 10px; } #feature1 span { float: left; } #feature1 .fa { background: #28a7e9; border-radius: 50%; color: #fff; display: inline-block; width: 40px; height: 40px; line-height: 40px; text-align: center; margin-right: 20px; } /* end feature1 */ /* start pricing */ #pricing { background: #f8f8f8; text-align: center; padding-top: 80px; padding-bottom: 80px; } #pricing h2 { padding-bottom: 60px; } #pricing .pricing { background: #fff; } #pricing .active { position: relative; bottom: 20px; } #pricing .pricing .pricing-title { background: #28a7e9; color: #fff; font-weight: bold; padding: 30px; } #pricing .pricing .pricing-title p { font-size: 20px; } #pricing .pricing ul { padding: 0; margin: 0; } #pricing .pricing ul li { display: block; list-style: none; padding: 16px; } #pricing .pricing .btn { background: transparent; border: 1px solid #28a7e9; border-radius: 0px; color: #28a7e9; font-weight: bold; padding-right: 40px; padding-left: 40px; margin-top: 20px; margin-bottom: 30px; transition: all 0.3s ease; } #pricing .pricing .btn:hover { background: #28a7e9; color: #fff; } /* end pricing */ /* start download */ #download { padding-top: 80px; padding-bottom: 80px; } #download h2 { padding-bottom: 20px; } #download .btn { border-radius: 0px; font-weight: bold; margin-top: 20px; padding: 10px 40px 10px 40px; } /* end download */ /* start contact */ #contact { background: url('../images/contact-bg.jpg') no-repeat; background-size: cover; color: #fff; } #contact h2 { padding-bottom: 10px; } #contact address { padding-top: 20px; } #contact address .fa { background: #28a7e9; border-radius: 50%; width: 40px; height: 40px; line-height: 40px; text-align: center; margin-top: 6px; margin-right: 10px; } #contact .contact-form { padding-top: 40px; } #contact .form-control { border: none; border-radius: 0px; box-shadow: none; margin-bottom: 20px; } #contact input { height: 50px; } #contact input[type="submit"] { background: #28a7e9; color: #fff; font-weight: bold; transition: all 0.3s ease; } #contact input[type="submit"]:hover { background: #107DB6; } /* end contact */ /* start footer */ footer { background: #fff; font-weight: 400; text-align: center; padding: 20px; } /* end footer */ @media screen and ( max-width: 991px ) { .templatemo-box { margin-bottom: 30px; } #pricing .active { bottom: 0; } .pricing { margin-bottom: 20px; } #feature img, #download img { margin-top: 30px; } #feature1 img { margin-bottom: 30px; } } @media screen and ( max-width: 767px ) { .navbar-default .nav li a { height: auto; line-height: 2em; } #feature, #pricing, #download { padding-top: 20px; padding-bottom: 40px; } #contact .overlay { padding-top: 40px; } } /* start media 360 */ @media screen and ( max-width: 360px ){ .pricing { padding-bottom: 40px; } } /* end media 360 */