| @import "compass"; |
| @import "bootstrap"; |
| @import "markup-mixins"; |
| @font-face { @include fontface(atillanormal, atilla_normal-webfont) } |
| @font-face { @include fontface(harabara, harabara-webfont) } |
| @font-face { @include fontface(icomoon, icomoon) } |
| html{ |
| background: $gray-light; |
| } |
| body { |
| margin: 0; |
| min-width: $base-min-width; |
| line-height: $base-line-height; |
| } |
| a:hover, a:focus { |
| text-decoration: none; |
| outline: none; |
| } |
| @viewport { width: device-width;} |
| @-o-viewport { width: device-width;} |
| @-ms-viewport { width: device-width;} |
| @-moz-viewport { width: device-width;} |
| @-webkit-viewport { width: device-width;} |
| [class^="icon-"], |
| [class*=" icon-"] { |
| font-family: 'icomoon'; |
| speak: none; |
| font-style: normal; |
| font-weight: normal; |
| font-variant: normal; |
| text-transform: none; |
| line-height: 1; |
| -webkit-font-smoothing: antialiased; |
| -moz-osx-font-smoothing: grayscale; |
| } |
| .icon-rss:before { content: "\e600"; } |
| .icon-linkedin:before { content: "\e601"; } |
| .icon-twitter:before { content: "\e602"; } |
| .icon-facebook:before { content: "\e603"; } |
| .icon-google-plus:before { content: "\e604"; } |
| .icon-youtube:before { content: "\e605"; } |
| h1, .h1{ |
| line-height: 30px; |
| margin: 0; |
| } |
| h2, .h2{ |
| line-height: 25px; |
| margin: 0; |
| } |
| h3, .h3{ |
| line-height: 22px; |
| margin: 0; |
| } |
| h4, .h4 { |
| line-height: 20px; |
| margin: 0; |
| } |
| h5, .h5, |
| h6, .h6 { |
| line-height: 17px; |
| margin: 0; |
| } |
| p { |
| margin: 0 0 $base-line-height; |
| } |
| .btn{ |
| min-width: 160px; |
| height: 40px; |
| border-radius: 4px; |
| text-align: center; |
| text-transform: capitalize; |
| font-size: 20px; |
| line-height: 28px; |
| padding: 5px; |
| |
| @media (max-width: $mobile) { |
| min-width: 130px; |
| height: 36px; |
| font-size: 17px; |
| line-height: 24px; |
| } |
| } |
| .btn-default:hover { |
| background: $white; |
| color: $gray; |
| } |
| .btn-danger { |
| border: none; |
| line-height: 30px; |
| @include background-image(linear-gradient(top, #ff0000 0%,#eb0101 21%,#940206 77%,#7a0308 100%)); |
| $experimental-support-for-svg: true; |
| |
| @media (max-width: $mobile) { |
| line-height: 26px; |
| } |
| &:hover { |
| @include background-image(linear-gradient(top, #7b0308 0%,#840308 10%,#9b0206 28%,#eb0101 79%,#ff0000 100%)); |
| } |
| } |
| #wrapper{ |
| overflow: hidden; |
| } |
| #header { |
| left: 0; |
| right: 0; |
| top: 37px; |
| z-index: 9999; |
| padding: 5px 0; |
| |
| &.affix-top { |
| position: absolute; |
| |
| @media (max-width: $tablet) { |
| top: 0; |
| } |
| } |
| &.affix { |
| top: 0; |
| background: rgba(54,54,54,0.95); |
| |
| @media (max-width: $tablet) { |
| position: absolute; |
| /*background: none;*/ |
| } |
| } |
| .container { |
| position: relative; |
| } |
| .logo { |
| width: 140px; |
| margin: 0 0 0 1px; |
| |
| img{ |
| @extend %img-full-width; |
| } |
| } |
| div[class*="col-"] { |
| position: static; |
| } |
| } |
| #nav { |
| text-align: right; |
| font-size: 16px; |
| line-height: 20px; |
| padding: 21px 0 0; |
| letter-spacing: 0.1px; |
| position: static; |
| |
| @media (max-width: $mobile) { |
| padding: 10px 10px 0; |
| text-align: center; |
| |
| .navbar-collapse { |
| overflow: hidden; |
| position: absolute; |
| top: 100%; |
| left: 0; |
| right: 0; |
| z-index: 99; |
| margin: 10px 0 0; |
| background: rgba(54,54,54,0.95); |
| } |
| } |
| .container-fluid { |
| padding: 0; |
| } |
| .navbar-toggle { |
| margin: 0; |
| } |
| .navbar-nav { |
| float: none; |
| letter-spacing: -4px; |
| |
| @media (max-width: $mobile) { |
| padding: 10px 0; |
| } |
| > li { |
| @extend %align-top; |
| letter-spacing: normal; |
| float: none; |
| margin: 0 0 0 20px; |
| |
| @media (max-width: $mobile) { |
| display: block; |
| margin: 0; |
| padding: 5px 10px; |
| } |
| >a { |
| padding: 0; |
| @extend %align-top; |
| } |
| } |
| } |
| } |
| .carousel { |
| min-height: 597px; |
| padding: 114px 0 50px; |
| font-size: 18px; |
| line-height: 24px; |
| color: $white; |
| text-align: center; |
| position: relative; |
| z-index: 9; |
| background: url(../images/bg-carousel.jpg) no-repeat center/cover; |
| @include transition(all, 0.2s, linear); |
| |
| @media (max-width: $tablet) { |
| min-height: 470px; |
| padding: 100px 0 50px; |
| } |
| @media (max-width: $mobile) { |
| min-height: 300px; |
| font-size: 14px; |
| line-height: 17px; |
| padding: 100px 0 20px; |
| } |
| &:after { |
| height: 106px; |
| @include after(auto,0,0,0); |
| @include background-image(linear-gradient(top, rgba(47,47,47,0) 0%,rgba(47,47,47,0.05) 8%,rgba(47,47,47,0.18) 23%,rgba(47,47,47,0.82) 77%,rgba(47,47,47,0.95) 92%,rgba(47,47,47,1) 100%)); |
| $experimental-support-for-svg: true; |
| pointer-events: none; |
| |
| @media (max-width: $tablet) { |
| height: 60px; |
| } |
| @media (max-width: $mobile) { |
| height: 30px; |
| } |
| } |
| .item { |
| padding: 82px 0 0; |
| |
| @media (max-width: $tablet) { |
| padding: 20px 0 0; |
| } |
| } |
| header { |
| font-size: 28px; |
| line-height: 36px; |
| text-transform: capitalize; |
| letter-spacing: 0.8px; |
| |
| @media (max-width: $tablet) { |
| font-size: 25px; |
| line-height: 30px; |
| } |
| @media (max-width: $mobile) { |
| font-size: 20px; |
| } |
| p{ |
| margin: 0 0 18px; |
| |
| @media (max-width: $mobile) { |
| margin: 0 0 10px; |
| } |
| } |
| } |
| h2 { |
| font: 100px/100px $alt-font-harabara; |
| letter-spacing: 2.3px; |
| margin: 0 0 15px; |
| |
| @media (max-width: $tablet) { |
| font-size: 70px; |
| line-height: 70px; |
| } |
| @media (max-width: $mobile) { |
| font-size: 42px; |
| line-height: 42px; |
| margin: 0 0 5px; |
| } |
| } |
| .buttons { |
| margin: 0 0 12px; |
| letter-spacing: -4px; |
| |
| @media (max-width: $mobile) { |
| margin: 0; |
| } |
| li{ |
| @extend %align-top; |
| letter-spacing: normal; |
| margin: 0 10px 10px; |
| } |
| } |
| .text { |
| max-width: 820px; |
| margin: 0 auto; |
| } |
| p{ |
| margin: 0; |
| } |
| .item.cloud{ |
| padding: 0; |
| text-align: right; |
| |
| @media (max-width: $mobile) { |
| text-align: center; |
| } |
| h1 { |
| font-size: 53px; |
| line-height: 53px; |
| letter-spacing: 1.3px; |
| margin: 0 0 6px; |
| |
| @media (max-width: $tablet) { |
| font-size: 42px; |
| line-height: 45px; |
| } |
| } |
| header { |
| font-size: 15px; |
| line-height: 20px; |
| letter-spacing: 0.4px; |
| margin: 104px -2px 0 0; |
| |
| @media (max-width: $tablet) { |
| font-size: 15px; |
| line-height: 18px; |
| margin: 50px 0 0; |
| } |
| @media (max-width: $mobile) { |
| margin: 0; |
| } |
| p{ |
| margin: 0 0 7px; |
| } |
| } |
| .buttons li { |
| margin: 0 0 10px 13px; |
| } |
| .btn{ |
| height: 26px; |
| min-width: 104px; |
| font-size: 13px; |
| line-height: 18px; |
| padding: 4px; |
| } |
| } |
| .img-holder { |
| overflow: hidden; |
| margin: 0 0 0 -9px; |
| |
| @media (max-width: $mobile) { |
| margin: 0; |
| } |
| img{ |
| @extend %img-full-width; |
| } |
| } |
| } |
| #main { |
| margin-bottom: 50px; |
| |
| @media (max-width: $mobile) { |
| margin-bottom: 0; |
| } |
| |
| table{ |
| width: 100%; |
| border: 2px solid $gray-light; |
| |
| th, |
| td { |
| height: 40px; |
| border-width: 0 0 2px 2px; |
| border-color: $gray-light; |
| border-style: solid; |
| padding: 5px 20px; |
| position: relative; |
| |
| &:first-child { |
| border-left-width: 0; |
| } |
| } |
| th{ |
| font-size: 18px; |
| line-height: 20px; |
| height: 50px; |
| @media (max-width: $tablet) { |
| font-size: 15px; |
| } |
| &:first-child{ |
| padding: 5px 38px; |
| } |
| } |
| td:first-child{ |
| padding-left: 38px; |
| } |
| .btn-video { |
| color: $black; |
| |
| &:hover { |
| color: $red; |
| } |
| } |
| @media screen { |
| @media (max-width: $mobile) { |
| border: none; |
| display: block; |
| overflow:hidden; |
| border-top:1px solid $black; |
| |
| tbody { |
| border-left:120px solid $gray; |
| float:left; |
| width:100%; |
| padding:0 1px 0 1px; |
| } |
| tr { |
| float:left; |
| width:100%; |
| clear:both; |
| |
| &:nth-child(odd) td { |
| background-color: rgba(0,0,0,0.1); |
| } |
| } |
| td { |
| width: 100% !important; |
| height: auto; |
| padding:0 0 0 120px !important; |
| margin:0 -1px 0 -121px; |
| display: block; |
| float:left; |
| clear:both; |
| width:100%; |
| white-space:nowrap; |
| border-width: 0 1px 1px 1px !important; |
| border-color: $black; |
| @include box-sizing(content-box); |
| |
| &:before { |
| content:attr(title); |
| padding: 10px; |
| display:inline-block; |
| color:$white !important; |
| font-weight:bold; |
| width:120px; |
| vertical-align:middle; |
| margin:0 0 0 -120px; |
| position:relative; |
| white-space:normal; |
| } |
| ul, |
| span { |
| white-space:normal; |
| display:inline-block; |
| vertical-align:middle; |
| padding:5px; |
| } |
| } |
| thead, |
| th {display:none;} |
| } |
| } |
| } |
| } |
| .overview { |
| margin: -8px 0 0; |
| padding: 80px 0 0; |
| position: relative; |
| z-index: 4; |
| |
| @media (max-width: $tablet) { |
| margin: 0; |
| padding: 30px 0 0; |
| } |
| h2{ |
| position: relative; |
| padding: 3px 0 12px 40px; |
| |
| &:after { |
| @include size(21px,25px); |
| @include after(0,auto,auto,0); |
| background: url(../images/sprite.png) no-repeat; |
| } |
| } |
| } |
| .askquestion { |
| margin: -18px 0 0; |
| padding: 80px 0 0; |
| position: relative; |
| |
| @media (max-width: $tablet) { |
| margin: 0; |
| padding: 30px 0 0; |
| } |
| table { |
| @media (min-width: $min-mobile) { |
| |
| th, |
| td { |
| width: 60%; |
| padding: 5px 20px !important; |
| |
| &:first-child, |
| &:nth-child(2) { |
| width: 20%; |
| } |
| } |
| } |
| } |
| h2{ |
| position: relative; |
| padding: 4px 0 13px 40px; |
| |
| &:after { |
| @include size(21px,25px); |
| @include after(0,auto,auto,3px); |
| background: url(../images/sprite.png) no-repeat -52px 0; |
| } |
| } |
| } |
| .community { |
| margin: -18px 0 0; |
| padding: 80px 0 0; |
| position: relative; |
| z-index: 2; |
| |
| @media (max-width: $tablet) { |
| margin: 0; |
| padding: 30px 0 0; |
| } |
| table { |
| @media (min-width: $min-mobile) { |
| |
| th, |
| td { |
| width: 60%; |
| padding: 5px 20px !important; |
| |
| &:first-child, |
| &:nth-child(2) { |
| width: 20%; |
| } |
| } |
| } |
| } |
| h2{ |
| position: relative; |
| padding: 4px 0 13px 40px; |
| |
| &:after { |
| @include size(21px,25px); |
| @include after(0,auto,auto,3px); |
| background: url(../images/sprite.png) no-repeat -52px 0; |
| } |
| } |
| } |
| .download { |
| margin: -54px 0 0; |
| padding: 80px 0 94px; |
| |
| @media (max-width: $tablet) { |
| padding: 30px 0; |
| margin: 0; |
| } |
| h2{ |
| position: relative; |
| padding: 3px 0 8px 40px; |
| |
| &:after { |
| @include size(21px,25px); |
| @include after(0,auto,auto,3px); |
| background: url(../images/sprite.png) no-repeat -78px 0; |
| } |
| } |
| th{ |
| &:first-child { |
| width: 476px; |
| } |
| &.version { |
| width: 240px; |
| } |
| &.release { |
| width: 220px; |
| } |
| } |
| } |
| .info-blocks { |
| padding: 101px 0 24px; |
| border-top: 2px solid $gray-light; |
| |
| @media (max-width: $tablet) { |
| padding: 30px 0 20px; |
| } |
| h3{ |
| margin: 0 0 10px; |
| |
| @media (max-width: $mobile) { |
| margin: 0; |
| } |
| } |
| p{ |
| margin: 0 0 7px; |
| } |
| .list { |
| line-height: 18px; |
| } |
| li { |
| padding: 0 0 0 20px; |
| position: relative; |
| @include arrow-lazy(right, 5px, $gray-dark, 4px); |
| |
| &:before{ |
| left: 0; |
| margin: 0; |
| } |
| } |
| a { |
| color: $black; |
| |
| &:hover { |
| color: $red; |
| } |
| } |
| } |
| #footer { |
| padding: 50px 0 30px; |
| background: $gray-light; |
| |
| @media (max-width: $mobile) { |
| text-align: center; |
| padding: 30px 0 10px; |
| } |
| a { |
| color: $black; |
| |
| &:hover { |
| color: $red; |
| } |
| } |
| .logo { |
| width: 230px; |
| @extend %align-top; |
| margin: 0 0 20px; |
| |
| @media (max-width: $mobile) { |
| width: 150px; |
| margin: 0 0 10px; |
| } |
| img{ |
| @extend %img-full-width; |
| } |
| } |
| p{ |
| margin: 0 0 22px; |
| |
| @media (max-width: $mobile) { |
| margin: 0 0 10px; |
| } |
| } |
| .security { |
| letter-spacing: -4px; |
| margin: 0 -69px 0 0; |
| |
| @media (max-width: $mobile){ |
| margin: 0; |
| } |
| li{ |
| @extend %align-top; |
| letter-spacing: normal; |
| margin: 0 69px 20px 0; |
| |
| @media (max-width: $mobile) { |
| margin: 0 20px 10px; |
| } |
| } |
| a:hover { |
| @include opacity(0.8); |
| } |
| img { |
| display: block; |
| } |
| } |
| } |
| .footer-nav { |
| line-height: 18px; |
| |
| ul { |
| margin: 0; |
| } |
| li{ |
| margin: 0 0 12px; |
| |
| @media (max-width: $mobile) { |
| margin: 0 0 5px; |
| } |
| } |
| } |
| .social-networks{ |
| font-size: 30px; |
| letter-spacing: -4px; |
| margin: 0 0 16px; |
| |
| li{ |
| @extend %align-top; |
| letter-spacing: normal; |
| margin: 0 3px 10px 0; |
| |
| @media (max-width: $mobile) { |
| margin: 0 3px 10px; |
| } |
| } |
| a{ |
| color: $gray !important; |
| |
| &:hover { |
| color: $red !important; |
| } |
| } |
| } |
| .subnav { |
| padding: 55px 0 10px; |
| text-align: center; |
| |
| @media (max-width: $mobile) { |
| padding: 0 0 10px; |
| } |
| ul{ |
| margin: 0; |
| letter-spacing: -4px; |
| } |
| li{ |
| @extend %align-top; |
| letter-spacing: normal; |
| margin: 0 34px; |
| |
| @media (max-width: $mobile) { |
| display: block; |
| margin: 0 0 5px; |
| } |
| } |
| } |
| |
| @import "ignite"; |
| |
| .btn-transparent { |
| @include button-variant($btn-transparent-color, $btn-transparent-bg, $btn-transparent-border); |
| } |
| |
| .btn-transparent:hover { |
| background: $white; |
| color: $gray; |
| } |
| |
| .btn-group-export { |
| position: absolute; |
| margin: 5px; |
| top: 0; |
| right: 0; |
| z-index: 4; |
| } |
| |
| .btn-export { |
| min-width: 0; |
| } |
| |
| @media screen and (max-width: $screen-xs-max) { |
| .btn-group-export { |
| display: none; |
| } |
| } |
| |
| /* |
| * Reset media print style. |
| */ |
| @media print { |
| #header { |
| position: absolute !important; |
| } |
| |
| a[href]:after { |
| content: ""; |
| } |
| |
| /* |
| * Hide social icons. |
| */ |
| .social-networks { |
| display: none; |
| } |
| |
| /* |
| * Hide navigation menu. |
| */ |
| footer nav { |
| display: none; |
| } |
| |
| /* |
| * Hide button to download export for table. |
| */ |
| .btn-group-export { |
| display: none; |
| } |
| |
| body { |
| -webkit-print-color-adjust: exact; |
| } |
| |
| footer { |
| page-break-inside: avoid; |
| } |
| |
| section.page-section { |
| page-break-inside: avoid; |
| } |
| |
| section.page-section table { |
| page-break-inside: avoid; |
| } |
| |
| section.page-section:first-child { |
| margin-top: 50px; |
| } |
| |
| section.page-section { |
| padding-top: 0; |
| margin-top: 0; |
| margin-bottom: 50px; |
| |
| border-bottom: none; |
| } |
| |
| section.page-section p.line-chart { |
| display: none; |
| } |
| |
| /* |
| * Small grid |
| * |
| * Columns, offsets, pushes, and pulls for the small device range, from phones |
| * to tablets. |
| */ |
| |
| /* @media (min-width: $mobile) { |
| @include make-grid(print); |
| }*/ |
| |
| @media (min-width: $landscape) { |
| @include make-grid(print); |
| |
| #main table td { |
| padding-left: 0; |
| } |
| |
| #main table th { |
| padding-left: 0; |
| } |
| |
| #main table td:first-child { |
| padding-left: 20px; |
| } |
| |
| #main table th:first-child { |
| padding-left: 20px; |
| } |
| } |
| } |