/* Version 2.0 [Table of contents] ------------------------------------------------------------------------- 1. Globally Applied Styles 2. Layout/Boxed 3. Hover 4. Support Class -------------------------------------------------------------------------*/ /*----------------------------------------------------------------------- 1. Globally Applied Styles */ html,body{ position: relative; height: 100%; background: @white_light; color: @main; } #wrapper{ position: relative; top: 0px; z-index: 10; width: 100%; min-height: 100%; transform: translate(0, 0); -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); background: @white_light; overflow: hidden; transition: transform 0.4s ease; -webkit-transition: -webkit-transform 0.4s ease; -moz-transition: -moz-transform 0.4s ease; -o-transition: -o-transform 0.4s ease; -ms-transition: -ms-transform 0.4s ease; @media(min-width: 1025px){ top: 0px !important; } } img{ max-width: 100%; height: auto; -webkit-backface-visibility: hidden; } input,button,a{ transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -webkit-transition: all 0.4s ease; } a{ text-decoration: none !important; outline: none; color: @blue; } a:hover,a:active,a:focus{ text-decoration: none !important; outline: none; color: @dark_blue; } input,button{ -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; outline: none; } label{ font-weight: 500; margin-bottom: 10px; } /* Animation */ @-moz-keyframes pulse { 0% { -moz-transform: scale(0); opacity: 0.0; } 25% { -moz-transform: scale(0); opacity: 0.1; } 50% { -moz-transform: scale(0.1); opacity: 0.3; } 75% { -moz-transform: scale(0.5); opacity: 0.5; } 100% { -moz-transform: scale(1); opacity: 0.0; } } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(0); opacity: 0.0; } 25% { -webkit-transform: scale(0); opacity: 0.1; } 50% { -webkit-transform: scale(0.1); opacity: 0.3; } 75% { -webkit-transform: scale(0.5); opacity: 0.5; } 100% { -webkit-transform: scale(1); opacity: 0.0; } } /* Class */ .fa-hover{ font-size: 14px; line-height: 22px; padding-top: 5px; padding-bottom: 5px; margin-bottom: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -webkit-transition: all 0.4s ease; cursor: pointer; .ico,.fa{ display: inline-block; height: 22px; vertical-align: top; min-width: 28px; font-size: 14px; line-height: 22px; transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -webkit-transition: all 0.4s ease; color: @dark; } &:hover{ background: @blue; color: @white; .ico,.fa{ font-size: 22px; line-height: 22px; height: 22px; color: @white; } } } .input-no-style{ border: none; background: none; outline: none; } /*---------------------------------------------------------------------*/ /*----------------------------------------------------------------------- 2. Layout/Boxed */ .row-inline-block{ font-size: 0px; text-align: left; > *{ display: inline-block; float: none; font-size: 14px; vertical-align: top; } &.text-center > *{ text-align: center; } } .row.small-spacing{ margin-left: -10px; margin-right: -10px; > *[class^="col-"]{ padding-left: 10px; padding-right: 10px; } } /*---------------------------------------------------------------------*/ /*----------------------------------------------------------------------- 3. Hover */ .light-effect{ position: relative; overflow: hidden; display: block; &:after{ content: ""; display: block; position: absolute; top: 0px; left: -200%; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.3); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -webkit-transition: all 0.4s ease; transform: skew(45deg); -webkit-transform: skew(45deg); -moz-transform: skew(45deg); -o-transform: skew(45deg); -ms-transform: skew(45deg); } &:hover:after{ left: 100%; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; } } /*---------------------------------------------------------------------*/ /*----------------------------------------------------------------------- 4. Support Class */ .error{ color: @danger; font-weight: 400; padding: 5px 0px 5px 0px; } .display-none{ display: none; } @media(min-width: 1025px){ .hidden-on-desktop{ display: none!important; } } h4 strong{ font-weight: 600; font-size: 16px } .help-block{ margin-top: 10px; color: @brown; } .margin-top-0{ margin-top: 0px !important; } .margin-top-10{ margin-top: 10px !important; } .margin-top-15{ margin-top: 15px !important; } .margin-top-20{ margin-top: 20px !important; } .margin-top-30{ margin-top: 30px !important; } .margin-top-40{ margin-top: 40px !important; } .margin-top-50{ margin-top: 50px !important; } .margin-top-60{ margin-top: 60px !important; } .margin-top-70{ margin-top: 70px !important; } .margin-top-80{ margin-top: 80px !important; } .margin-top-90{ margin-top: 90px !important; } .margin-top-100{ margin-top: 100px !important; } .margin-bottom-0{ margin-bottom: 0px !important; } .margin-bottom-10{ margin-bottom: 10px !important; } .margin-bottom-20{ margin-bottom: 20px !important; } .margin-bottom-30{ margin-bottom: 30px !important; } .margin-bottom-40{ margin-bottom: 40px !important; } .margin-bottom-50{ margin-bottom: 50px !important; } .margin-bottom-60{ margin-bottom: 60px !important; } .margin-bottom-70{ margin-bottom: 70px !important; } .margin-bottom-80{ margin-bottom: 80px !important; } .margin-bottom-90{ margin-bottom: 90px !important; } .margin-bottom-100{ margin-bottom: 100px !important; } .padding-for-mess{ padding: 10px 15px 10px 15px; } .padding-10{ padding: 10px !important; } .padding-20{ padding: 20px !important; } .padding-30{ padding: 30px !important; } .min-height-100{ min-height: 100px!important } .min-height-200{ min-height: 200px!important } .min-height-300{ min-height: 300px!important } .min-height-400{ min-height: 400px!important } .min-height-500{ min-height: 500px!important } .no-margin{ margin: 0px !important; } .no-padding{ padding: 0px !important; } .inline-block{ display: inline-block; } .btn-group-lg>.btn, .btn-lg{ border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } .btn{ background: #e4e7ea; outline: none !important; font-size: 16px; line-height: 26px; padding: 8px 25px; border: none; font-weight: 500; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; &.btn-bordered{ background: @white; color: @dark; border: 2px solid #e4e7ea; &:hover{ background: #e4e7ea; } } &.btn-rounded{ border-radius: 23px; -moz-border-radius: 23px; -webkit-border-radius: 23px; &.btn-lg{ border-radius: 32px; -moz-border-radius: 32px; -webkit-border-radius: 32px; } &.btn-sm{ border-radius: 19px; -moz-border-radius: 19px; -webkit-border-radius: 19px; } } &.btn-lg{ font-size: 18px; line-height: 28px; padding: 15px 35px; } &.btn-sm{ font-size: 14px; line-height: 24px; padding: 7px 20px; } &.btn-xs{ font-size: 12px; line-height: 22px; padding: 5px 15px; } &.btn-icon{ position: relative; overflow: hidden; .ico{ position: absolute; top: 0; width: 42px; height: 100%; line-height: 42px; background: rgba(0,0,0,0.1); } &.btn-lg .ico{ line-height: 58px; } &.btn-sm .ico{ line-height: 38px; width: 38px; } &.btn-xs .ico{ line-height: 32px; width: 32px; } } &.btn-icon-left{ padding-left: 57px; padding-right: 15px; &.btn-lg{ padding-right: 30px; padding-left: 73px; } .ico{ left: 0; } &.btn-sm{ padding-left: 53px } &.btn-xs{ padding-left: 47px } } &.btn-icon-right{ padding-right: 57px; padding-left: 15px; &.btn-lg{ padding-left: 30px; padding-right: 73px; } .ico{ right: 0; } &.btn-sm{ padding-right: 53px } &.btn-xs{ padding-right: 47px } } &.btn-circle{ padding-right: 0; padding-left: 0; width: 42px; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; &.btn-lg{ width: 58px } &.btn-sm{ width: 38px } &.btn-xs{ width: 32px } } &.btn-social{ width: 38px; height: 38px; padding: 0; line-height: 38px; color: @white; } &.btn-facebook{ background-color: #3b5998 !important; } &.btn-twitter{ background-color: #55acee !important; } &.btn-google-plus{ background-color: #dd4b39 !important; } &.btn-linkedin{ background-color: #007bb6 !important; } &.btn-instagram{ background-color: #3f729b !important; } &.btn-pinterest{ background-color: #cb2027 !important; } &.btn-dribbble{ background-color: #ea4c89 !important; } &.btn-youtube{ background-color: #bb0000 !important; } &.btn-social-with-text{ width: 100%; margin-bottom: 15px; } .ico{ display: inline-block; } .ico-left{ margin-right: 8px; } .ico-right{ margin-left: 8px; } } .btn-primary{ background: @blue; &:hover,&:active,&:focus{ background: @dark_blue!important; } &.btn-bordered{ border-color: @blue; color: @blue; &:hover,&:active,&:focus{ border-color: @dark_blue; color: @white; } } } .btn-success{ background: @success; &:hover,&:active,&:focus{ background: @success_hover!important; } &.btn-bordered{ border-color: @success; color: @success; &:hover,&:active,&:focus{ border-color: @success_hover; color: @white; } } } .btn-info{ background: @info; &:hover,&:active,&:focus{ background: @info_hover!important; } &.btn-bordered{ border-color: @info; color: @info; &:hover,&:active,&:focus{ border-color: @info_hover; color: @white; } } } .btn-warning{ background: @warning; &:hover,&:active,&:focus{ background: @warning_hover!important; } &.btn-bordered{ border-color: @warning; color: @warning; &:hover,&:active,&:focus{ border-color: @warning_hover; color: @white; } } } .btn-danger{ background: @danger; &:hover,&:active,&:focus{ background: @danger_hover!important; } &.btn-bordered{ border-color: @danger; color: @danger; &:hover,&:active,&:focus{ border-color: @danger_hover; color: @white; } } } .btn-violet{ background: @violet; color: @white; &:hover,&:active,&:focus{ color: @white; background: @violet_hover!important; } &.btn-bordered{ border-color: @violet; color: @violet; &:hover,&:active,&:focus{ border-color: @violet_hover; color: @white; } } } .btn-orange{ background: @orange; color: @white; &:hover,&:active,&:focus{ color: @white; background: @orange_hover!important; } &.btn-bordered{ border-color: @orange; color: @orange; &:hover,&:active,&:focus{ border-color: @orange_hover; color: @white; } } } .tour-buttons .btn.btn-sm{ height: 30px; font-size: 12px; line-height: 30px; padding: 0 10px; } @media(max-width: 999px){ .list-inline-faq li{ width: 100% } } .limit-width{ max-width: 600px; display: block; margin: 0px auto 0px; float: none; } .width-100{ max-width: 100px !important; width: 100px !important; } .width-200{ max-width: 200px !important; width: 200px !important; } .width-300{ max-width: 300px !important; width: 300px !important; } .width-400{ max-width: 400px !important; width: 400px !important; } .width-500{ max-width: 500px !important; width: 500px !important; } /* Background colors */ .bg-custom { background-color: #71b6f9 !important; } .bg-primary { background-color: @blue !important; } .bg-success { background-color: @success !important; } .bg-info { background-color: @info !important; } .bg-warning { background-color: #ff8f00 !important; } .bg-danger { background-color: @danger !important; } .bg-muted { background-color: @muted !important; } .bg-inverse { background-color: @inverse !important; } .bg-purple { background-color: @purple !important; } .bg-pink { background-color: @pink !important; } .bg-white { background-color: @white !important; } .bg-lightdark { background-color: @muted !important; } .bg-violet { background-color: @violet !important; } .bg-orange { background-color: @orange !important; } /* Text colors */ .text-custom { color: #6200ea !important; } .text-white { color: @white !important; } .text-danger { color: #ff1744 !important; } .text-muted { color: @brown !important; } .text-primary { color: @navy !important; } .text-warning { color: @warning !important; } .text-success { color: @success !important; } .text-info { color: @info !important; } .text-inverse { color: @inverse !important; } .text-pink { color: @pink !important; } .text-purple { color: @purple !important; } .text-dark { color: #212121 !important; } .text-orange{ color: @orange !important; } .table>tbody>tr.success>td, .table>tbody>tr.success>th, .table>tbody>tr>td.success, .table>tbody>tr>th.success, .table>tfoot>tr.success>td, .table>tfoot>tr.success>th, .table>tfoot>tr>td.success, .table>tfoot>tr>th.success, .table>thead>tr.success>td, .table>thead>tr.success>th, .table>thead>tr>td.success, .table>thead>tr>th.success{ background: @success; } .table>tbody>tr.info>td, .table>tbody>tr.info>th, .table>tbody>tr>td.info, .table>tbody>tr>th.info, .table>tfoot>tr.info>td, .table>tfoot>tr.info>th, .table>tfoot>tr>td.info, .table>tfoot>tr>th.info, .table>thead>tr.info>td, .table>thead>tr.info>th, .table>thead>tr>td.info, .table>thead>tr>th.info{ background: @info; } .table>tbody>tr.primary>td, .table>tbody>tr.primary>th, .table>tbody>tr>td.primary, .table>tbody>tr>th.primary, .table>tfoot>tr.primary>td, .table>tfoot>tr.primary>th, .table>tfoot>tr>td.primary, .table>tfoot>tr>th.primary, .table>thead>tr.primary>td, .table>thead>tr.primary>th, .table>thead>tr>td.primary, .table>thead>tr>th.primary{ background: @blue; } .table>tbody>tr.danger>td, .table>tbody>tr.danger>th, .table>tbody>tr>td.danger, .table>tbody>tr>th.danger, .table>tfoot>tr.danger>td, .table>tfoot>tr.danger>th, .table>tfoot>tr>td.danger, .table>tfoot>tr>th.danger, .table>thead>tr.danger>td, .table>thead>tr.danger>th, .table>thead>tr>td.danger, .table>thead>tr>th.danger{ background: @danger; } .table>tbody>tr.warning>td, .table>tbody>tr.warning>th, .table>tbody>tr>td.warning, .table>tbody>tr>th.warning, .table>tfoot>tr.warning>td, .table>tfoot>tr.warning>th, .table>tfoot>tr>td.warning, .table>tfoot>tr>th.warning, .table>thead>tr.warning>td, .table>thead>tr.warning>th, .table>thead>tr>td.warning, .table>thead>tr>th.warning{ background: @warning; } /*---------------------------------------------------------------------*/