@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; | |
} | |
} | |
} | |
h1 { | |
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; | |
} | |
} | |
} |