@include respond-min-from(xs) {
html, body { height: 100%; font-size: 62.5%; }
} @include respond-min-from(md) {
html, body { height: 100%; font-size: 62.5%; }
} @include respond-min-from(lg) {
html, body { height: 100%; font-size: 62.5%; }
}
body {
position: relative; font: 16px/1.6 $font-body; color: $font-color; width: 100%; min-width: $min-width;
} h1, h2, h3 {
font-family: $font-heading; line-height: 1.3; margin-top: 0;
} h4, h5, h6 { font-family: $font-heading; font-weight: bold; } h3 { margin-bottom: $gutter/1.5; } h4 { @extend .font-xlarge; } h5 { @extend .font-large; } h6 { @extend .font-medium; } a, button, .btn-link, input {
outline: 0 !important;
} img { max-width: 100%; }
ul {
&.fa-ul li { margin-bottom: $gutter/2.5; .fa { margin-right: .5rem; } }
}
ul, li {
padding: 0; margin: 0; list-style: none;
}
ol, ul {
margin-top: 0; margin-bottom: 1rem;
}
ul, menu, dir {
display: block; list-style-type: disc; -webkit-margin-before: 1rem; -webkit-margin-after: 1rem; -webkit-margin-start: 0; -webkit-margin-end: 0; -webkit-padding-start: 0;
}
a, a:hover {
outline: none; text-decoration: none; color: currentColor;
}
a:visited, a:hover, a:active, a:focus {
text-decoration: none; outline: none; color: currentColor;
}
hr {
margin: $gutter 0; border-top: .1rem solid $light-gray;
}
mark { background: none; color: $font-highlight-color; } abbr { border: 0; }
main {
transition: .3s;
}
.main-blur {
@include blur_image(.1rem);
}
.main-no-blur {
@include blur_image(0);
}
.block { display:block; } .inline-block { display:inline-block; } .relative { position:relative; } .absolute { position:absolute; }
.full {
top: 0; right: 0; bottom: 0; left: 0;
}
.overflow-h { overflow: hidden }
.no-scroll { position: fixed; overflow-y:scroll }
.m-c { margin:0 !important; }
.m-a { margin:0 auto !important; } .m-1-a { margin:$gutter auto !important; } .m-2-a { margin:$gutter*2 auto !important; } .m-3-a { margin:$gutter*3 auto !important; } .m-4-a { margin: $gutter*4 auto !important; } .m-5-a { margin: $gutter*5 auto !important; } .m-1_2-a { margin:$gutter/2 auto !important; } .m-1_3-a { margin:$gutter/3 auto !important; } .m-1_4-a { margin:$gutter/4 auto !important; } .m-3_4-a { margin:$gutter*3/4 auto !important; }
.m-b { margin-bottom: $gutter !important; } .m-b-2 { margin-bottom: $gutter*2 !important; } .m-b-3 { margin-bottom: $gutter*3 !important; } .m-b-4 { margin-bottom: $gutter*4 !important; } .m-b-5 { margin-bottom: $gutter*5 !important; } .m-b-1_2 { margin-bottom: $gutter/2 !important; } .m-b-1_3 { margin-bottom: $gutter*1/3 !important; } .m-b-1_4 { margin-bottom: $gutter/4 !important; } .m-b-3_4 { margin-bottom: $gutter*3/4 !important; } .m-b-c { margin-bottom:0 !important; }
.m-t { margin-top: $gutter !important; } .m-t-2 { margin-top: $gutter*2 !important; } .m-t-3 { margin-top: $gutter*3 !important; } .m-t-4 { margin-top: $gutter*4 !important; } .m-t-5 { margin-top: $gutter*5 !important; } .m-t-1_2 { margin-top: $gutter/2 !important; } .m-t-1_3 { margin-top: $gutter*1/3 !important; } .m-t-1_4 { margin-top: $gutter/4 !important; } .m-t-3_4 { margin-top: $gutter*3/4 !important; } .m-t-c { margin-top:0 !important; }
.padd { padding: $gutter; } .padd-2 { padding: $gutter*2; } .padd-3 { padding: $gutter*3; } .padd-4 { padding: $gutter*4; } .padd-5 { padding: $gutter*5; } .padd-1_2 { padding: $gutter/2; } .padd-1_3 { padding: $gutter/3; } .padd-1_4 { padding: $gutter/4; } .padd-3_4 { padding: $gutter*3/4; } .padd-c { padding: 0; }
.padd-side { padding: 0 $gutter;} .padd-side-2 { padding: 0 $gutter*2; } .padd-side-3 { padding: 0 $gutter*3; } .padd-side-4 { padding: 0 $gutter*4; } .padd-side-5 { padding: 0 $gutter*5; } .padd-side-1_2 { padding: 0 $gutter/2; } .padd-side-1_3 { padding: 0 $gutter/3; } .padd-side-1_4 { padding: 0 $gutter/4; } .padd-side-3_4 { padding: 0 $gutter*3/4; } .padd-side-c { padding-left: 0 !important; padding-right: 0 !important; }
.padd-l { padding-left: $gutter; } .padd-l-2 { padding-left: $gutter*2; } .padd-l-3 { padding-left: $gutter*3; } .padd-l-4 { padding-left: $gutter*4; } .padd-l-5 { padding-left: $gutter*5; } .padd-l-1_2 { padding-left: $gutter/2; } .padd-l-1_3 { padding-left: $gutter/3; } .padd-l-1_4 { padding-left: $gutter/4; } .padd-l-3_4 { padding-left: $gutter*3/4; } .padd-l-c { padding-left: 0; }
.padd-r { padding-right: $gutter; } .padd-r-2 { padding-right: $gutter*2; } .padd-r-3 { padding-right: $gutter*3; } .padd-r-4 { padding-right: $gutter*4; } .padd-r-5 { padding-right: $gutter*5; } .padd-r-1_2 { padding-right: $gutter/2; } .padd-r-1_3 { padding-right: $gutter/3; } .padd-r-1_4 { padding-right: $gutter/4; } .padd-r-3_4 { padding-right: $gutter*3/4; } .padd-r-c { padding-right: 0; }
.padd-t { padding-top: $gutter; } .padd-t-2 { padding-top: $gutter*2; } .padd-t-3 { padding-top: $gutter*3; } .padd-t-4 { padding-top: $gutter*4; } .padd-t-5 { padding-top: $gutter*5; } .padd-t-1_2 { padding-top: $gutter/2; } .padd-t-1_3 { padding-top: $gutter/3; } .padd-t-1_4 { padding-top: $gutter/4; } .padd-t-3_4 { padding-top: $gutter*3/4; } .padd-t-c { padding-top: 0; }
.padd-b { padding-bottom: $gutter; } .padd-b-2 { padding-bottom: $gutter*2; } .padd-b-3 { padding-bottom: $gutter*3; } .padd-b-4 { padding-bottom: $gutter*4; } .padd-b-5 { padding-bottom: $gutter*5; } .padd-b-1_2 { padding-bottom: $gutter/2; } .padd-b-1_3 { padding-bottom: $gutter/3; } .padd-b-1_4 { padding-bottom: $gutter/4; } .padd-b-3_4 { padding-bottom: $gutter*3/4; } .padd-b-c { padding-bottom: 0; }
.padd-t-b { padding: $gutter 0; } .padd-t-b-2 { padding: $gutter*2 0; } .padd-t-b-3 { padding: $gutter*3 0; } .padd-t-b-4 { padding: $gutter*4 0; } .padd-t-b-5 { padding: $gutter*5 0; } .padd-t-b-1_2 { padding: $gutter/2 0; } .padd-t-b-1_3 { padding: $gutter/3 0; } .padd-t-b-1_4 { padding: $gutter/4 0; } .padd-t-b-3_4 { padding: $gutter*3/4 0; } .padd-t-b-c { padding-top: 0; padding-bottom: 0; }
.btn_padding_mid {
padding: $gutter/4 $gutter*2; @extend .font-medium;
}
.bordered { border:0.1rem solid ddd; }
.caps { text-transform: uppercase; } .font-light { font-weight: 300; } .font-normal { font-weight:normal !important; }
.w_3 { width:3% !important; } .w_5 { width:5% !important; } .w_10 { width:10% !important; } .w_20 { width:20% !important; } .w_25 { width:25% !important; } .w_30 { width:30% !important; } .w_33 { width:33% !important; } .w_40 { width:40% !important; } .w_50 { width:50% !important; } .w_60 { width:60% !important; } .w_70 { width:70% !important; } .w_80 { width:80% !important; } .w_90 { width:90% !important; } .w_100 { width:100% !important; } .w_auto { width:auto !important; }
.h_3 { height:3% !important; } .h_5 { height:5% !important; } .h_10 { height:10% !important; } .h_20 { height:20% !important; } .h_25 { height:25% !important; } .h_30 { height:30% !important; } .h_33 { height:33% !important; } .h_40 { height:40% !important; } .h_50 { height:50% !important; } .h_60 { height:60% !important; } .h_70 { height:70% !important; } .h_80 { height:80% !important; } .h_90 { height:90% !important; } .h_100 { height:100% !important; } .h_auto { height:auto !important; }
.h_100_vh { height: 100vh; } .h_100 { height:100%; }
.font-mini { font-size:1.1rem !important; } .font-small { font-size:1.3rem !important; } .font-medium { font-size:1.6rem !important; } .font-large { font-size:1.8rem !important; } .font-xlarge { font-size:2.2rem !important; } .font-2xlarge { font-size:2.8rem !important; } .font-3xlarge { font-size:3rem !important; } .font-4xlarge { font-size:3.8rem !important; } .font-5xlarge { font-size:5.0rem !important; } .font-6xlarge { font-size:6.0rem !important; }
.font-light { font-weight: 100; } .font-300 { font-weight: 300; } .font-bold { font-weight: 700; } .font-italic { font-style: italic; }
.text-primary { color: $blue !important; } .text-danger { color: $red !important; }
.text-white { color: $white !important; } .text-black { color: $black !important; } .text-orange { color: $orange !important; } .text-blue { color: $blue !important; } .text-grey { color: $gray; } .text-light-grey { color: $light-gray; }
.pull-none { float: none; } .media > .pull-left { margin-right: $gutter*2; } .media > .pull-right { margin-left: $gutter*2; }
.float_l { float: left; } .float_r { float: right; }
.btn {
border-radius: 0; border: .1rem solid $black;
}
.vertical-relative-center {
position: relative; top: 50%; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);
}
.vertical-absolute-center {
position: absolute; top: 50%; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);
}
.table { display:table; } .table-row { display:table-row; } .table-cell { display:table-cell; }
.bg-blur {
@include blur_image(1rem);
}
.cover-black:after {
@extend .image-bg; content: ''; background-color: rgba(0, 0, 0, 0.4);
}
.cover-white:after {
@extend .image-bg; content: ''; background-color: rgba(255, 255, 255, 0.4);
}
.cover-origin:after {
@extend .image-bg; content: ''; background-color: rgba(255, 255, 255, 0);
}
.image-bg {
position: absolute !important; top: -2rem; right: -2rem; bottom: -2rem; left: -2rem; overflow: hidden; z-index: $cover-image-index !important;
}
.cover-image {
background-repeat: no-repeat; background-size: cover; background-position: center center;
}
.fa-lg {
font-size: 1.3333333333em; line-height: 0.75em; vertical-align: -15%;
}
.fa {
display: inline-block; font: normal normal normal 1.4rem/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.well {
background: $white; border-color: #ececec;
} .well {
min-height: 2rem; padding: 1.9rem; margin-bottom: 2rem; background-color: #f5f5f5; border: .1rem solid #e3e3e3; border-radius: .8rem; -webkit-box-shadow: inset 0 .1rem .1rem rgba(0,0,0,0.05); box-shadow: inset 0 .1rem .1rem rgba(0,0,0,0.05);
}