/*-------------------------------------------------------*/ /* Buttons /*-------------------------------------------------------*/ .btn { font-weight: 600; font-family: $heading-font; overflow: hidden; display: inline-block; text-decoration: none; text-align: center; border: 0; border-radius: 0; @include transition(all .2s ease-in-out); color: #000; background-color: $main-color; -webkit-backface-visibility: hidden; backface-visibility: hidden; position: relative; z-index: 1; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; &:hover { color: #000; border-color: transparent; } &:focus { outline: none; color: #000; } &--lg, &--lg.btn--button { font-size: 16px; padding: 0 48px; span { line-height: 55px; } } &--lg.btn--button { height: 55px; } &--md, &--md.btn--button { font-size: 15px; padding: 0 24px; span { line-height: 46px; } } &--md.btn--button { height: 46px; } &--color { background-color: $main-color; &:hover { opacity: .92; } } &--dark { background-color: $bg-dark; color: #fff; } &--white { background-color: #fff; color: $heading-color; } &--light { background-color: $bg-light; color: $heading-color; } &--wide { width: 100%; } &--dark:hover, &--dark:focus, &--white:hover, &--white:focus, &--light:hover, &--light:focus { background-color: $main-color; border-color: transparent; } i { font-size: 12px; position: relative; margin-left: 40px; line-height: 1; } } .rounded, .rounded:before { border-radius: 70px; } .section-buttons { margin-bottom: 50px; a { margin-bottom: 10px; } } /* Input Buttons -------------------------------------------------------*/ .btn--button { border: none; margin-bottom: 0; width: auto; &:hover, &:focus { background-color: $main-color; } &.btn--color { color: $heading-color; } &.btn--wide { width: 100%; } } /*-------------------------------------------------------*/ /* Form Elements /*-------------------------------------------------------*/ input, select, textarea { height: 46px; border-radius: 0; border: 0; border-bottom: 1px solid $border-color; background-color: transparent; width: 100%; margin-bottom: 24px; padding: 0 12px; @include transition(border-color .3s ease-in-out, background-color .3s ease-in-out) } textarea { height: auto; display: block; padding: 8px 16px; margin-bottom: 24px; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; } input[type=search] { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } input:focus, textarea:focus { border-color: $main-color; background-color: #fff; outline: none; box-shadow: none; } /* Change Color of Placeholders */ input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: $text-color; } input:-moz-placeholder, textarea:-moz-placeholder { color: $text-color; opacity: 1; } input::-moz-placeholder, textarea::-moz-placeholder { color: $text-color; opacity: 1; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: $text-color; } select { -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; padding-left: 12px; background-image: url(../img/dropdown.png); background-repeat: no-repeat; background-position: 100% 50%; font-family: $heading-font; } select::-ms-expand { display: none; } label { color: $heading-color; font-family: $heading-font; font-size: 15px; display: inline-block; vertical-align: middle; margin-bottom: 10px; } .form-group { position: relative; } /* Checkboxes & Radio Buttons -------------------------------------------------------*/ input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; margin: 4px 8px 0 0; float: left; text-align: center; line-height: 18px; border: 1px solid $border-color; -moz-appearance: none; -webkit-appearance: none; &:focus { border-color: $border-color; background-color: $bg-light; } } input[type="checkbox"] { &:checked:after { content: '\f383'; font-family: 'ui-icons'; } } input[type="checkbox"] + label, input[type="radio"] + label { cursor: pointer; margin-bottom: 0; position: relative; line-height: 22px; } input[type="radio"] { border-radius: 50%; line-height: 1; &:checked:after { content: ''; width: 8px; height: 8px; position: relative; top: -1px; border-radius: 50%; display: inline-block; background-color: $bg-dark; } } .radio, .checkbox { padding-left: 0; } .radio > li, .checkbox > li { padding: 7px 0; list-style: none; } #contact-form .message { height: 50px; width: 100%; font-size: 13px; line-height: 50px; text-align: center; float: none; margin-top: 20px; display: none; color: #fff; } #contact-form .message.error { background-color: #f44336; } #contact-form .message.success { background-color: #4CAF50; } /*-------------------------------------------------------*/ /* Material Inputs /*-------------------------------------------------------*/ .material { &__form-group { margin-bottom: 40px; } &__form-group--active { & > label { top:-20px; font-size:14px; color: $main-color; } } &__label { position: absolute; font-weight: 500; font-size: 15px; top: 12px; left: 0; pointer-events: none; @include transition($all); } &__input { padding: 0; margin-bottom: 0; font-size: 15px; font-weight: 500; background-color: transparent; border: 0; border-radius: 0; border-bottom: 1px solid $border-color; &:focus { background-color: transparent; & ~ .material__underline { width: 100%; } } &:focus ~ label { top:-20px; font-size:14px; color: $main-color; } } &__underline { position:relative; display:block; height: 2px; width: 0; bottom: 0; position: absolute; background: $main-color; @include transition(.2s ease all); } } textarea.material__input { padding-top: 12px; } /*-------------------------------------------------------*/ /* Sliders /*-------------------------------------------------------*/ /** * Owl Carousel v2.3.4 * Copyright 2013-2018 David Deutsch * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE */ .owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;touch-action:manipulation;-moz-backface-visibility:hidden}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-ms-touch-action:pan-y;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{animation-name:fadeOut}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{transition:height .5s ease-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}.owl-carousel .owl-item .owl-lazy:not([src]),.owl-carousel .owl-item .owl-lazy[src^=""]{max-height:0}.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%} .owl-prev, .owl-next { display: block; overflow: hidden; position: absolute; top: 50%; margin-top: -24px; background-color: transparent; text-align: center; line-height: 34px; z-index: 10; width: 22px; height: 40px; font-size: 22px; color: #fff !important; opacity: 0; border: 0; padding: 0; @include transition($all); &:hover { opacity: .92; border-color: transparent; } } .owl-prev { left: 10px; } .owl-next { right: 10px; } .owl-carousel:hover .owl-prev, .owl-carousel:hover .owl-next { opacity: 1; } // Dark Arrows .owl-carousel--dark-arrows { .owl-prev, .owl-next { color: $text-color; } } // Always visible .owl-carousel--visible-arrows { .owl-prev, .owl-next { opacity: 1; } .owl-prev, &:hover .owl-prev { left: -60px; } .owl-next, &:hover .owl-next { right: -60px; } } // Arrows Outside .owl-carousel--arrows-outside { .owl-prev, .owl-next { opacity: 1; top: -60px; } .owl-prev { right: 36px; left: auto; } .owl-next { right: 0; } } // Dots .owl-dots { text-align: center; -webkit-tap-highlight-color: transparent; margin-top: 30px; } .owl-dot { display: inline-block; zoom: 1; *display: inline; } .owl-dot span { width: 8px; height: 8px; border-radius: 50%; margin: 3px; background: #fff; opacity: 0.4; display: block; -webkit-backface-visibility: visible; transition: all 200ms ease; } .owl-dot.active span, .owl-dot:hover span { opacity: 1; background-color: $main-color; } // Dots inside .owl-carousel--dots-inside .owl-dots { position: absolute; bottom: 20px; margin-top: 0; width: 100%; } // Custom Nav .owl-custom-nav { margin-top: 24px; &__btn { text-transform: uppercase; font-size: 10px; border-radius: 5px; border: 1px solid $border-color; padding: 0 5px; line-height: 26px; background-color: transparent; &:hover { background-color: $main-color; color: #fff; border-color: transparent; } &:focus { outline: none; } i { font-size: 8px; margin: 0 3px; position: relative; top: -1px; } } } /* Slick Slider */ .slick-list,.slick-slider,.slick-track{position:relative;display:block}.slick-loading .slick-slide,.slick-loading .slick-track{visibility:hidden}.slick-dots li button:before,.slick-next:before,.slick-prev:before{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.slick-slider{box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}.slick-list{overflow:hidden;margin:0;padding:0}.slick-list:focus{outline:0}.slick-list.dragging{cursor:pointer;cursor:hand}.slick-slider .slick-list,.slick-slider .slick-track{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.slick-track{top:0;left:0;margin-left:auto;margin-right:auto}.slick-track:after,.slick-track:before{display:table;content:''}.slick-track:after{clear:both}.slick-slide{display:none;float:left;height:100%;min-height:1px}[dir=rtl] .slick-slide{float:right}.slick-slide img{display:block}.slick-slide.slick-loading img{display:none}.slick-slide.dragging img{pointer-events:none}.slick-initialized .slick-slide{display:block}.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}.slick-arrow.slick-hidden{display:none}.slick-dots,.slick-next,.slick-prev{position:absolute;display:block;padding:0}.slick-loading .slick-list{background:url(slick/ajax-loader.gif) center center no-repeat #fff}.slick-next,.slick-prev{font-size:0;line-height:0;top:50%;width:20px;height:20px;-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);cursor:pointer;color:transparent;border:none;outline:0;background:0 0}.slick-next:focus,.slick-next:hover,.slick-prev:focus,.slick-prev:hover{color:transparent;outline:0;background:0 0}.slick-next:focus:before,.slick-next:hover:before,.slick-prev:focus:before,.slick-prev:hover:before{opacity:1}.slick-next.slick-disabled:before,.slick-prev.slick-disabled:before{opacity:.25}.slick-next:before,.slick-prev:before{font-family:ui-icons;font-size:20px;line-height:1;opacity:.75;color:#fff}.slick-prev{left:-15px}[dir=rtl] .slick-prev{right:-15px;left:auto}.slick-prev:before{content:'←'}.slick-next:before,[dir=rtl] .slick-prev:before{content:'→'}.slick-next{right:-15px}[dir=rtl] .slick-next{right:auto;left:-25px}[dir=rtl] .slick-next:before{content:'←'}.slick-dotted.slick-slider{margin-bottom:30px}.slick-dots{bottom:-25px;width:100%;margin:0;list-style:none;text-align:center}.slick-dots li{position:relative;display:inline-block;width:20px;height:20px;margin:0 5px;padding:0;cursor:pointer}.slick-dots li button{font-size:0;line-height:0;display:block;width:20px;height:20px;padding:5px;cursor:pointer;color:transparent;border:0;outline:0;background:0 0}.slick-dots li button:focus,.slick-dots li button:hover{outline:0}.slick-dots li button:focus:before,.slick-dots li button:hover:before{opacity:1}.slick-dots li button:before{font-size:6px;line-height:20px;position:absolute;top:0;left:0;width:20px;height:20px;content:'';text-align:center;opacity:.25;background-color:#000}.slick-dots li.slick-active button:before{opacity:.75;color:#000} // Dots .slick-dots li { width: 7px; height: 7px; margin: 0 10px; @include transition( $all ); button { width: 100%; height: 100%; &:before { border-radius: 50%; width: 100%; height: 100%; opacity: 0.15; } } } .slick-dots .slick-active { @include transform( scale( 1.75 ) ); button:before { background-color: $main-color; } } // Arrows .slick-prev:before { content: '\e875'; } .slick-next:before { content: '\e876'; } /*-------------------------------------------------------*/ /* Icon Font /*-------------------------------------------------------*/ [class^="ui-"]:before, [class*=" ui-"]:before { width: auto; margin-right: 0; margin-left: 0; line-height: normal; } .container-icons { .fs1 { text-align: center; margin-bottom: 40px; width: 20%; @include bp-xl-down { width: 25%; } @include bp-lg-down { width: 33.333%; } @include bp-md-down { width: 50%; } } .pbs span:first-child { font-size: 50px; display: block; margin-bottom: 18px; } } /*-------------------------------------------------------*/ /* Card /*-------------------------------------------------------*/ .card { @include display-flex; flex: 1 0 0%; flex-direction: column; background-color: #fff; border-radius: 5px; overflow: hidden; &-row > div { margin-bottom: 48px; } &-row .card { height: 100%; margin-bottom: 0; } &__img-holder { margin-right: 0 !important; margin-bottom: 0 !important; } &__body { background-color: #fff; padding: 40px; flex: 1 1 auto; } &--small { .card__body { padding: 24px 16px; } .entry__title { font-size: 16px; margin-bottom: 0; } } } /*-------------------------------------------------------*/ /* Magnific Pupop /*-------------------------------------------------------*/ .mfp-bg,.mfp-wrap{position:fixed;left:0;top:0}.mfp-bg,.mfp-container,.mfp-wrap{height:100%;width:100%}.mfp-arrow:after,.mfp-arrow:before,.mfp-container:before,.mfp-figure:after{content:''}.mfp-bg{z-index:1042;overflow:hidden;background:#0b0b0b;opacity:.8}.mfp-wrap{z-index:1043;outline:0!important;-webkit-backface-visibility:hidden}.mfp-container{text-align:center;position:absolute;left:0;top:0;padding:0 8px;box-sizing:border-box}.mfp-container:before{display:inline-block;height:100%;vertical-align:middle}.mfp-align-top .mfp-container:before{display:none}.mfp-content{position:relative;display:inline-block;vertical-align:middle;margin:0 auto;text-align:left;z-index:1045}.mfp-ajax-holder .mfp-content,.mfp-inline-holder .mfp-content{width:100%;cursor:auto}.mfp-ajax-cur{cursor:progress}.mfp-zoom-out-cur,.mfp-zoom-out-cur .mfp-image-holder .mfp-close{cursor:-moz-zoom-out;cursor:-webkit-zoom-out;cursor:zoom-out}.mfp-zoom{cursor:pointer;cursor:-webkit-zoom-in;cursor:-moz-zoom-in;cursor:zoom-in}.mfp-auto-cursor .mfp-content{cursor:auto}.mfp-arrow,.mfp-close,.mfp-counter,.mfp-preloader{-webkit-user-select:none;-moz-user-select:none;user-select:none}.mfp-loading.mfp-figure{display:none}.mfp-hide{display:none!important}.mfp-preloader{color:#CCC;position:absolute;top:50%;width:auto;text-align:center;margin-top:-.8em;left:8px;right:8px;z-index:1044}.mfp-preloader a{color:#CCC}.mfp-close,.mfp-preloader a:hover{color:#FFF}.mfp-s-error .mfp-content,.mfp-s-ready .mfp-preloader{display:none}button.mfp-arrow,button.mfp-close{overflow:visible;cursor:pointer;border:0;-webkit-appearance:none;display:block;outline:0;padding:0;z-index:1046;box-shadow:none;touch-action:manipulation}.mfp-figure:after,.mfp-iframe-scaler iframe{box-shadow:0 0 8px rgba(0,0,0,.6);position:absolute;left:0}button::-moz-focus-inner{padding:0;border:0}.mfp-close{width:44px;height:44px;line-height:44px;position:absolute;right:0;top:0;text-decoration:none;text-align:center;opacity:.65;padding:0 0 18px 10px;font-style:normal;font-size:28px;font-family:Arial,Baskerville,monospace}.mfp-close:focus,.mfp-close:hover{opacity:1}.mfp-close:active{top:1px}.mfp-close-btn-in .mfp-close{color:#333}.mfp-iframe-holder .mfp-close,.mfp-image-holder .mfp-close{color:#FFF;right:-6px;text-align:right;padding-right:6px;width:100%}.mfp-counter{position:absolute;top:0;right:0;color:#CCC;font-size:12px;line-height:18px;white-space:nowrap}.mfp-figure,img.mfp-img{line-height:0}.mfp-arrow{position:absolute;opacity:.65;margin:-55px 0 0;top:50%;padding:0;width:90px;height:110px;-webkit-tap-highlight-color:transparent}.mfp-arrow:active{margin-top:-54px}.mfp-arrow:focus,.mfp-arrow:hover{opacity:1}.mfp-arrow:after,.mfp-arrow:before{display:block;width:0;height:0;position:absolute;left:0;top:0;margin-top:35px;margin-left:35px;border:inset transparent}.mfp-arrow:after{border-top-width:13px;border-bottom-width:13px;top:8px}.mfp-arrow:before{border-top-width:21px;border-bottom-width:21px;opacity:.7}.mfp-arrow-left{left:0}.mfp-arrow-left:after{border-right:17px solid #FFF;margin-left:31px}.mfp-arrow-left:before{margin-left:25px;border-right:27px solid #3F3F3F}.mfp-arrow-right{right:0}.mfp-arrow-right:after{border-left:17px solid #FFF;margin-left:39px}.mfp-arrow-right:before{border-left:27px solid #3F3F3F}.mfp-iframe-holder{padding-top:40px;padding-bottom:40px}.mfp-iframe-holder .mfp-content{line-height:0;width:100%;max-width:900px}.mfp-image-holder .mfp-content,img.mfp-img{max-width:100%}.mfp-iframe-holder .mfp-close{top:-40px}.mfp-iframe-scaler{width:100%;height:0;overflow:hidden;padding-top:56.25%}.mfp-iframe-scaler iframe{display:block;top:0;width:100%;height:100%;background:#000}.mfp-figure:after,img.mfp-img{width:auto;height:auto;display:block}img.mfp-img{box-sizing:border-box;padding:40px 0;margin:0 auto}.mfp-figure:after{top:40px;bottom:40px;right:0;z-index:-1;background:#444}.mfp-figure small{color:#BDBDBD;display:block;font-size:12px;line-height:14px}.mfp-figure figure{margin:0}.mfp-bottom-bar{margin-top:-36px;position:absolute;top:100%;left:0;width:100%;cursor:auto}.mfp-title{text-align:left;line-height:18px;color:#F3F3F3;word-wrap:break-word;padding-right:36px}.mfp-gallery .mfp-image-holder .mfp-figure{cursor:pointer}@media screen and (max-width:800px) and (orientation:landscape),screen and (max-height:300px){.mfp-img-mobile .mfp-image-holder{padding-left:0;padding-right:0}.mfp-img-mobile img.mfp-img{padding:0}.mfp-img-mobile .mfp-figure:after{top:0;bottom:0}.mfp-img-mobile .mfp-figure small{display:inline;margin-left:5px}.mfp-img-mobile .mfp-bottom-bar{background:rgba(0,0,0,.6);bottom:0;margin:0;top:auto;padding:3px 5px;position:fixed;box-sizing:border-box}.mfp-img-mobile .mfp-bottom-bar:empty{padding:0}.mfp-img-mobile .mfp-counter{right:5px;top:3px}.mfp-img-mobile .mfp-close{top:0;right:0;width:35px;height:35px;line-height:35px;background:rgba(0,0,0,.6);position:fixed;text-align:center;padding:0}}@media all and (max-width:900px){.mfp-arrow{-webkit-transform:scale(.75);transform:scale(.75)}.mfp-arrow-left{-webkit-transform-origin:0;transform-origin:0}.mfp-arrow-right{-webkit-transform-origin:100%;transform-origin:100%}.mfp-container{padding-left:6px;padding-right:6px}} /*-------------------------------------------------------*/ /* Tables /*-------------------------------------------------------*/ .table-wrap { margin-bottom: 34px; } /*-------------------------------------------------------*/ /* Tabs /*-------------------------------------------------------*/ .tabs { &__list { margin-bottom: -1px; overflow: hidden; padding: 0; } &__item { position: relative; display: inline-block; float: left; font-size: 14px; font-weight: 700; color: $heading-color; &:not(:first-child) { margin-left: -1px; } @include bp-sm-down { display: block; margin-right: 0; } } &__url { display: block; position: relative; padding: 12px 18px 11px; border: 1px solid $border-color; color: $heading-color; @include transition (background-color .1s ease-in-out); &:focus { color: inherit; } &:hover { background-color: lighten($bg-light, 3%); } } &__item--active:before, &__item:hover:before { content: ''; height: 2px; width: 100%; display: block; position: absolute; top: 0; left: 0; z-index: 1; background-color: $main-color; } &__item--active .tabs__url { color: $heading-color; background-color: #fff; border-bottom: 1px solid transparent; } } .tabs__content { padding: 20px; margin-bottom: 24px; border: 1px solid $border-color; overflow: hidden; &-pane { display: none; } &-pane--active { display: block; } } /*-------------------------------------------------------*/ /* Accordions and Toggles /*-------------------------------------------------------*/ .accordion { margin-bottom: 8px; &__heading { position: relative; padding: 0; @include transition ($all); } &__toggle { display: block; width: 20px; height: 100%; line-height: 45px; right: 10px; top: 0; position: absolute; &:after { font-family: "ui-icons"; content: "\f123"; line-height: 1; left: 0; top: 0; color: $text-color; font-size: 14px; } } &--is-open &__toggle:after { content: "\f126"; } } .accordion__link { display: block; position: relative; padding: 14px 40px 14px 16px; background-color: $bg-light; border: 1px solid $border-color; h4 { font-size: 14px; font-family: $heading-font; color: $heading-color; margin-bottom: 0; } span { color: $text-color; } &:hover, &:focus { color: $heading-color; } } .accordion--is-open { background-color: lighten( $bg-light, 2%); .accordion__toggle:after { color: #000; } } .accordion__body { padding: 24px; border: 1px solid $border-color; border-top-color: transparent; } /*-------------------------------------------------------*/ /* Alerts /*-------------------------------------------------------*/ .alert-dismissible .close { padding: 0.70rem 1.25rem; } /*-------------------------------------------------------*/ /* Social Icons /*-------------------------------------------------------*/ .socials { &--white a { color: #fff; } &--base a { width: 36px; height: 36px; line-height: 36px; font-size: 14px; margin: 0 6px 6px 0; color: #fff; &.social-facebook { background-color: #39599f; } &.social-facebook:hover { background-color: darken(#39599f, 5%); color: #fff; } &.social-twitter { background-color: #55ACEE; } &.social-twitter:hover { background-color: darken(#55ACEE, 5%); color: #fff; } &.social-google-plus { background-color: #DE4B39; } &.social-google-plus:hover { background-color: darken(#DE4B39, 5%); color: #fff; } } &--rounded a { border-radius: 50%; } } .social { display: inline-block; color: $heading-color; text-align: center; margin-right: 30px; font-size: 18px; @include transition (all .1s ease-in-out); &:last-child { margin-right: 0; } &-facebook:hover { color: #39599f; } &-twitter:hover { color: #55acee; } &-google-plus:hover { color: #DE4B39; } &-youtube:hover { color: #c61d23; } &-snapchat:hover { color: #fffb01; } &-linkedin:hover { color: #0e76a8; } &-pinterest:hover { color: #c8232c; } &-instagram:hover { color: #e1306c; } &-rss:hover { color: #ef822a; } @include bp-xl-down { margin-right: 16px; } }