/** * -------------------------------------------------------------------------------- * Main Stylesheet * -------------------------------------------------------------------------------- */ .transition(@property) { -webkit-transition: @property; -ms-transition: @property; transition: @property; } @primary-color: #43c6ac; @secondary-color: #f8ffae; @white-color: #fff; @dark-color: #444; @border-color: #e0e0e0; @footer-bg-color: #282f35; @font-size: 1.6rem; @line-height: @font-size*1.5; @theme-margin: @line-height*3; /** * * #.# General * */ ul, ol { margin: 0; padding: 0; list-style-position: inside; } a { text-decoration: none; color: @primary-color; transition: all .3s ease; } a, a:hover, a:focus { outline: 0; @include transition( all 300ms ease ); } /* Text selection color */ /* Mozilla based browser */ ::-moz-selection { background-color: @primary-color; color: #fff; } /* Opera browser */ ::-o-selection { background-color: @primary-color; color: #fff; } /* Internet Explorer browser*/ ::-ms-selection { background-color: @primary-color; color: #fff; } /* Chrome and safari browser */ ::-webkit-selection { background-color: @primary-color; color: #fff; } /* Default */ ::selection { background-color: @primary-color; color: #fff; } .right { float: right; } .dark { background-color: #f9f8f8; } .center { text-align: center; } .bold { font-weight: 700; } .radius { border-radius: .3rem; } .radius-big { border-radius: 1.2rem; } .shadow { box-shadow: 0 0 4rem rgba(42, 49, 57, 0.05); } .slick-dots li.slick-active button:before { color: @white-color; } .slick-dots li button:before { font-size: @font-size*3; color: @white-color; } .parallax { background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } .vertical-align { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex !important; /** Overrides other display properties to make the contents align vertically **/ align-items: center; } .bordered { border-bottom: 1px solid @border-color; } .underline { display: inline-block; margin-bottom: .6rem; height: .2rem; width: 5rem; background-color: @primary-color; } .container { padding: @theme-margin 0; } .ct-customizer.u-full-width, .ct-footer>.u-full-width { padding: @theme-margin 0; } .ct-bottom-bar.u-full-width { padding: 10px 0 !important; } .u-full-width { .container { padding: 0; } } .columns, .column { padding: 0 @font-size; } /** * * #.# Top Bar * */ .top-bar { background-color: @primary-color; color: @white-color; .row { padding: 0; } span, p { font-size: 1.4rem; font-weight: 700; margin-bottom: 0 !important; line-height: 3.5rem; } .left { > span { margin-right: 1rem; } } .right { text-align: right; } .office-hour { &:before { content: "\f017"; font: normal 400 normal 1.6rem/1 FontAwesome; margin-right: .4rem; vertical-align: middle; } } .phone { &:before { content: "\f095"; font: normal 400 normal 1.6rem/1 FontAwesome; margin-right: .4rem; vertical-align: middle; } } .address { &:before { content: "\f041"; font: normal 400 normal 1.6rem/1 FontAwesome; margin-right: .4rem; vertical-align: middle; } } .e-mail { &:before { content: "\f003"; font: normal 400 normal 1.6rem/1 FontAwesome; margin-right: .4rem; } } } .social-icons { float: right; margin-left: 1rem; line-height: 3.5rem; li { display: inline-block; margin-right: 1rem; list-style-type: none; } .social-icon { &:after { color: @white-color; font: normal normal normal 1.6rem/1 FontAwesome; } } .facebook:after { content: "\f09a"; } .twitter:after { content: "\f099"; } .youtube:after { content: "\f16a"; } .pinterest:after { content: "\f0d2"; } .linked-in:after { content: "\f08c"; } .instagram:after { content: "\f16d"; } } /** * * #.# Header * */ /* Header Container */ .site-header { position: relative; background-color: @white-color; .row { padding: 0; } } header, footer, .ct-bottom-bar, .top-bar { .container { padding: 0; } } .site-title { margin: 2rem 0px; a { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; } } /* Small devices (landscape phones, less than 768px) */ @media (max-width: 767.98px) { .vertical-align { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: block !important; /** Overrides other display properties to make the contents align vertically **/ align-items: center; } } .back-to-top { position: fixed; right: 2%; bottom: 4%; display: none; span { background-color: white; color: #555555; font-size: 22px; font-weight: 900; text-align: center; line-height: 39px; border-radius: 50%; width: 40px; height: 40px; box-shadow: 0px 2px 16px 0px rgba(0,0,0,0.16); } }