/** * Theme: bonus eventus by 78media * * Bootstrap breakpoints * --------------------- * xs: 0, * sm: 576px, * md: 768px, * lg: 992px, * xl: 1200px, * xxl: 1400px * * colors * ------ * * @white = #fff rgba(255,255,255, 1) * @light = #e3e3e3 * @dark = #333 * @grey = #5c5b60 rgba(92,91,96, 1) * @blue = #006fb8 rgba(0,111,184, 1) * @yellow = #f5a300 rgba(245,163,0, 1) * **/ /* define colors */ @font-color: #333; @white: #fff; @light: #e3e3e3; @dark: #333; @blue: #006fb8; @yellow: #f5a300; .white { color: @white; } .light { color: @light; } .dark { color: @dark; } .blue { color: @blue; } .yellow { color: @yellow; } .bg-light { background-color: @light !important; } .bg-dark { background-color: @dark !important; color: @white; } .bg-blue { background-color: @blue; color: @white; } .bg-yellow { background-color: @yellow; color: @dark; } .bg-white-transparent { background-color: rgba(255,255,255, .8); } .bg-dark-transparent { background-color: rgba(0,0,0, .5); } .bg-transparent { background-color: rgba(0,0,0, .5) !important; } /* fonts */ @font-face { font-family: "Montserrat"; font-weight: 300; font-style: normal; src: url('../fonts/Montserrat/Montserrat-Light.ttf') format('truetype'); } @font-face { font-family: "Montserrat"; font-weight: 400; font-style: normal; src: url('../fonts/Montserrat/Montserrat-Regular.ttf') format('truetype'); } @font-face { font-family: "Montserrat"; font-weight: 600; font-style: normal; src: url('../fonts/Montserrat/Montserrat-Bold.ttf') format('truetype'); } /* Set additional font classes */ @font-face { font-family: 'LigatureSymbols'; src: url('../fonts/LigatureSymbols/LigatureSymbols-2.11.eot'); src: url('../fonts/LigatureSymbols/LigatureSymbols-2.11.eot?#iefix') format('embedded-opentype'), url('../fonts/LigatureSymbols/LigatureSymbols-2.11.woff') format('woff'), url('../fonts/LigatureSymbols/LigatureSymbols-2.11.ttf') format('truetype'), url('../fonts/LigatureSymbols/LigatureSymbols-2.11.svg#LigatureSymbols') format('svg'); src: url('../fonts/LigatureSymbols/LigatureSymbols-2.11.ttf') format('truetype'); font-weight: normal; font-style: normal; } .lsf, .lsf-icon:before { font-family: 'LigatureSymbols'; -webkit-text-rendering: optimizeLegibility; -moz-text-rendering: optimizeLegibility; -ms-text-rendering: optimizeLegibility; -o-text-rendering: optimizeLegibility; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -ms-font-smoothing: antialiased; -o-font-smoothing: antialiased; font-smoothing: antialiased; } .lsf-icon:before { content: attr(title); margin-right: 0.3em; font-size: 130%; } .lsf-icon.favorite:before { content: '\E121'; } /* defaults */ .clearfix { overflow: auto; } html, body { /* width: 100%; height: 100%; */ background-color: @white; } body { /* position: relative; */ font-family: Montserrat, Sans-serif; font-weight: 300; font-size: 18px; background-color: transparent; color: @font-color; } h1 { font-size: 2rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.25rem; } @media (max-width:576px) { h1, h2 { word-break: break-all; } } @media (min-width:1200px) { h1 { font-size: 3rem; } h2 { font-size: 2.2rem; } h3 { font-size: 1.5rem; } } strong, .strong { font-weight: 600 !important; } .extrastrong { font-weight: 700 !important; } ol > li { margin-bottom: 1rem; } /* lists */ /* links */ a, a:link, a:visited { color: @blue; text-decoration: none; transition: all linear .3s; } a:hover, a:active { color: @font-color; text-decoration: none; transition: all linear .3s; } /* buttons */ .btn-default, .btn-default:link, .btn-default:visited { padding: .75rem 1.5rem; background-color: @yellow; color: @white; transition: all linear .3s; } .btn-default:hover, .btn-default:active { background-color: @blue; color: @white; } /* animated */ .animate-inview-element { opacity: 0; } /* BS Container */ @media (min-width:992px) { .container { max-width: 1100px; width: 95%; } } /* header */ header {} header .header-logo { display: block; text-align: left; padding: 2rem 1rem; } header .header-logo-img { max-width: 240px; } @media (min-width:992px) { header {} header .header-logo { text-align: center; padding: 3rem 1rem; } header .header-logo-img { max-width: 320px; } } /* Navbar */ .navbar { padding-top: 0; padding-bottom: 0; } .show-navbar { background: rgba(0,0,0, .65); position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; margin: 0; padding: 8rem 1rem 1rem; } .navbar-toggler { position: absolute; top: 1.25rem; right: 0; z-index: 9999; display: block; background-color: transparent; color: @blue; font-size: 200%; border: none !important; box-shadow: none !important; } .navbar-toggler .navbar-toggler-icon { color: @blue; font-size: 130%; } .navbar-nav .nav-item { position: relative; } .navbar-nav .nav-item .nav-link, .navbar-nav .nav-item .nav-link:link, .navbar-nav .nav-item .nav-link:visited { display: block; background: @blue; color: @white; padding: 15px 30px; cursor: pointer; transition: all linear .3s; } .navbar-nav .nav-item.active .nav-link, .navbar-nav .nav-item .nav-link:hover, .navbar-nav .nav-item .nav-link:active { background: @yellow; color: @white; } @media (min-width:992px) { .navbar-toggler { top: 2rem; } } @media (min-width:1200px) { .navbar-toggler { display: none; } .navbar-nav .nav-item .nav-link, .navbar-nav .nav-item .nav-link:link, .navbar-nav .nav-item .nav-link:visited { display: inline-block; } } /* Sections */ section, .section { position: relative; padding-top: 4rem; padding-bottom: 4rem; } section.padding { padding-top: 6rem; padding-bottom: 6rem; } section.no-padding { padding-top: 0; padding-bottom: 0; } @media (min-width:1200px) { .section-padding { padding-top: 10rem; padding-bottom: 10rem; } } /* Backgrounds */ .bg-infinite { background: transparent url('../img/backgrounds/bg-infinite.png') center right no-repeat; } /* Page banenr */ .banner { position: relative; } .banner img { display: inline-block; width: 100%; } .banner .headline { color: @white; font-weight: 600; font-size: 2rem; text-transform: uppercase; position: absolute; z-index: 2; top: auto; bottom: 1rem; left: 2rem; } .banner .highlighted { background-color: @yellow; display: inline-block; padding: .5rem; margin-left: -.5rem; } @media (min-width:576px) { .banner .headline { font-size: 3rem; } } @media (min-width:992px) { .banner .headline { font-size: 3rem; top: 35%; left: 25%; bottom: auto; } } /* Boxes */ .box { min-height: 1rem; } .box img { width: 100%; } .box.home-box { position: relative; background: @blue; } .box.home-box .text { color: @white; font-size: 3rem; font-weight: bold; position: absolute; bottom: .25rem; left: 1rem; } /* Team */ .portrait { position: relative; width: 340px; margin-bottom: 2rem; } @media (min-width:1880px) { .portrait { position: absolute; z-index: 2; margin-left: -20vw; width: 340px; } } /* Breadcrumbs */ /* Forms */ /* Bird */ .bird-cage { position: relative; display: block; width: 320px; min-height: 1rem; margin-left: auto; margin-right: auto; text-align: center; } .bird-cage .bird { position: absolute; z-index: 5; top: -130px; left: 25%; display: inline-block; } /* Footer */ footer { background-color: @blue; color: @white; padding: 3rem 2rem; font-size: .8em; } footer a, footer a:link, footer a:visited { color: @white; } footer a:hover, footer a:active { color: @yellow; } footer .copyright { text-align: center; font-size: .9em; margin-top: 3rem; } footer .infinity { position: relative; margin-top: -95px; display: block; width: 100%; text-align: center; background: transparent; } footer .infinity img { width: 180px; } @media (min-width:1200px) { footer .infinity { margin-top: -109px; } footer .infinity img { width: 240px; } } /* BS modal mod. */ .modal-content { color: @white; background-color: @dark; background-clip: padding-box; border: none; border-radius: 0; outline: 0; padding: 22.5% 1.5rem; } @media (min-width:1200px) { .modal-content { width: 370px; height: 370px; } } /* Animated */ .scroll-animated { opacity: 0; position: relative; top: 80px; } /* Cookie consent policy */