<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<section class="mbr-slider mbr-section mbr-section--no-padding carousel slide" data-ride="carousel" data-wrap="true" data-interval="5000" id="slider-5" style="background-color: #4c6972;">
<div class="mbr-section__container">
<div>
<ol class="carousel-indicators">
<li data-app-prevent-settings="" data-target="#slider-5" data-slide-to="0" class="active"></li><li data-app-prevent-settings="" data-target="#slider-5" data-slide-to="1"></li><li data-app-prevent-settings="" data-target="#slider-5" class="" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="mbr-box mbr-section mbr-section--relative mbr-section--fixed-size mbr-section--bg-adapted item dark center mbr-section--full-height active" style="background-image: url(https://images.unsplash.com/photo-1433264058539-880eb8412c9d);">
<div class="mbr-box__magnet mbr-box__magnet--center-right mbr-box__magnet--sm-padding">
<div class=" container">
<div class="row">
<div class=" col-md-6 col-md-offset-5">
<div class="mbr-hero">
<h1 class="mbr-hero__text">Bootstrap Carousel</h1>
<p class="mbr-hero__subtext">Slide 1. Content aligned to left</p>
</div>
<div class="mbr-buttons btn-inverse mbr-buttons--left mbr-buttons--right"><a class="mbr-buttons__btn btn btn-lg btn-danger" href="#">FREE DOWNLOAD</a> <a class="mbr-buttons__btn btn btn-lg btn-default" href="#">VIEW DEMO</a></div>
</div>
</div>
</div>
</div>
</div><div class="mbr-box mbr-section mbr-section--relative mbr-section--fixed-size mbr-section--bg-adapted item dark center mbr-section--full-height" style="background-image: url(https://images.unsplash.com/photo-1429655353447-d030683895ad);">
<div class="mbr-box__magnet mbr-box__magnet--center-center mbr-box__magnet--sm-padding">
<div class=" container">
<div class="row">
<div class=" col-md-8 col-md-offset-2">
<div class="mbr-hero">
<h1 class="mbr-hero__text">Full-Screen Bootstrap Carousel</h1>
<p class="mbr-hero__subtext">Slide 2. Centered content</p>
</div>
<div class="mbr-buttons btn-inverse mbr-buttons--center"><a class="mbr-buttons__btn btn btn-lg btn-danger" href="#">FREE DOWNLOAD</a> <a class="mbr-buttons__btn btn btn-lg btn-default" href="#">VIEW DEMO</a></div>
</div>
</div>
</div>
</div>
</div><div class="mbr-box mbr-section mbr-section--relative mbr-section--fixed-size mbr-section--bg-adapted item dark center mbr-section--full-height" style="background-image: url(https://images.unsplash.com/uploads/1412017894428ae87a2ba/d8b14e97);">
<div class="mbr-box__magnet mbr-box__magnet--center-left mbr-box__magnet--sm-padding">
<div class=" container">
<div class="row">
<div class=" col-md-6 col-md-offset-1">
<div class="mbr-hero">
<h1 class="mbr-hero__text">Full-Width Bootstrap Carousel</h1>
<p class="mbr-hero__subtext">Slide 3. Content aligned to right </p>
</div>
<div class="mbr-buttons btn-inverse mbr-buttons--left"><a class="mbr-buttons__btn btn btn-lg btn-danger" href="#">FREE DOWNLOAD</a> <a class="mbr-buttons__btn btn btn-lg btn-default" href="#">VIEW DEMO</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
<a data-app-prevent-settings="" class="left carousel-control" role="button" data-slide="prev" href="#slider-5">
<span aria-hidden="true"><</span>
<span class="sr-only">Previous</span>
</a>
<a data-app-prevent-settings="" class="right carousel-control" role="button" data-slide="next" href="#slider-5">
<span aria-hidden="true">></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</section>
/*-------
Slider
-------*/
.mbr-slider .carousel-inner > .active,
.mbr-slider .carousel-inner > .next,
.mbr-slider .carousel-inner > .prev {
display: table;
}
.mbr-slider .carousel-control {
background-image: none;
width: 54px;
height: 54px;
top: 50%;
margin-top: -27px;
line-height: 54px;
border: 2px solid #fff;
opacity: 1;
text-shadow: none;
z-index: 5;
-webkit-transition: all 0.2s ease-in-out 0s;
-o-transition: all 0.2s ease-in-out 0s;
transition: all 0.2s ease-in-out 0s;
}
.mbr-slider .carousel-control.left {
margin-left: 20px;
}
.mbr-slider .carousel-control.right {
margin-right: 20px;
}
.mbr-slider .carousel-control:hover {
background: #fff;
color: #000;
}
.mbr-slider .carousel-indicators {
bottom: 20px;
}
.mbr-slider .carousel-indicators li,
.mbr-slider .carousel-indicators .active {
width: 15px;
height: 15px;
margin: 3px;
border: 2px solid #ffffff;
}
@media (max-width: 767px) {
.mbr-slider .carousel-control {
top: auto;
bottom: 20px;
}
}
.mbr-slider .mbr-overlay {
z-index: 0;
opacity:0.5;
}
/* boxed model */
.mbr-slider > .boxed-slider {
position: relative;
padding: 93px 0;
}
.mbr-slider > .container .carousel-indicators {
margin-bottom: 93px;
}
@media (max-width: 767px) {
.mbr-slider > .container .carousel-control {
margin-bottom: 93px;
}
}
.mbr-slider > .container img {
width: 100%;
}
.mbr-slider > .container img + .row {
position: absolute;
top: 50%;
left: 0;
right: 0;
margin-left: 0;
margin-right: 0;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
}
.mbr-slider .mbr-section {
padding-left: 0;
padding-right: 0;
}
/* article layout */
.mbr-slider .article-slider > div {
padding-left: 0;
padding-right: 0;
}
.mbr-slider > .container.article-slider .carousel-indicators {
margin-bottom: 0;
}
.is-builder .animated {
-webkit-animation-name: none !important;
animation-name: none !important;
}
html {
position: relative;
min-height: 100%;
}
.mbr-embedded-video {
position: relative;
}
.mbr-background-video,
.mbr-background-video-preview {
bottom: 0;
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
}
.mbr-parallax-background,
.mbr-background {
background-attachment: fixed !important;
background-position: 50% 0;
background-repeat: no-repeat;
background-size: cover !important;
}
.mbr-hidden-scrollbar .mbr-parallax-background {
background-size: auto 130%;
}
.mobile .mbr-parallax-background {
background-attachment: scroll !important;
}
.mbr-background {
background-attachment: scroll !important;
}
.mbr-navbar {
position: relative;
width: 100%;
}
.mbr-navbar:before {
content: "";
display: block;
}
.mbr-navbar__brand-link:after,
.mbr-navbar__brand-img {
max-height: 74px;
}
.mbr-navbar:before,
.mbr-navbar__container {
height: 98px;
}
.mbr-navbar--ss .mbr-navbar__brand-link:after,
.mbr-navbar--ss .mbr-navbar__brand-img {
height: 74px;
}
.mbr-navbar--ss:before,
.mbr-navbar--ss .mbr-navbar__container {
height: 98px;
}
.mbr-navbar--xs .mbr-navbar__brand-link:after,
.mbr-navbar--xs .mbr-navbar__brand-img {
height: 32px;
}
.mbr-navbar--xs:before,
.mbr-navbar--xs .mbr-navbar__container {
height: 56px;
}
.mbr-navbar--s .mbr-navbar__brand-link:after,
.mbr-navbar--s .mbr-navbar__brand-img {
height: 48px;
}
.mbr-navbar--s:before,
.mbr-navbar--s .mbr-navbar__container {
height: 72px;
}
.mbr-navbar--m .mbr-navbar__brand-link:after,
.mbr-navbar--m .mbr-navbar__brand-img {
height: 64px;
}
.mbr-navbar--m:before,
.mbr-navbar--m .mbr-navbar__container {
height: 88px;
}
.mbr-navbar--l .mbr-navbar__brand-link:after,
.mbr-navbar--l .mbr-navbar__brand-img {
height: 96px;
}
.mbr-navbar--l:before,
.mbr-navbar--l .mbr-navbar__container {
height: 120px;
}
.mbr-navbar--xl .mbr-navbar__brand-link:after,
.mbr-navbar--xl .mbr-navbar__brand-img {
height: 128px;
}
.mbr-navbar--xl:before,
.mbr-navbar--xl .mbr-navbar__container {
height: 152px;
}
.mbr-navbar--short .mbr-navbar__brand-link:after,
.mbr-navbar--short .mbr-navbar__brand-img {
height: 40px;
}
.mbr-navbar--short:before,
.mbr-navbar--short .mbr-navbar__container {
height: 64px;
}
.mbr-navbar--short .mbr-navbar__container {
padding: 12px 0;
}
@media (max-width: 767px) {
.mbr-navbar--short .mbr-navbar__brand-link:after,
.mbr-navbar--short .mbr-navbar__brand-img {
height: 31px;
}
.mbr-navbar--short:before,
.mbr-navbar--short .mbr-navbar__container {
height: 45px;
}
.mbr-navbar--short .mbr-navbar__container {
padding: 7px 0;
}
}
.mbr-navbar__brand-img {
position: relative;
}
.mbr-navbar__brand-img,
.mbr-navbar__container,
.mbr-navbar__section {
-webkit-transition: all 300ms ease-in-out 0s;
-o-transition: all 300ms ease-in-out 0s;
transition: all 300ms ease-in-out 0s;
}
.mbr-navbar__section {
background: #2c2c2c;
height: auto;
position: absolute;
top: 0;
width: 100%;
z-index: 1000;
}
.mbr-navbar__container {
display: table;
padding: 12px 0;
width: 100%;
}
.mbr-navbar__menu-box {
display: table;
width: 100%;
}
.mbr-navbar__menu-box--inline-left,
.mbr-navbar__menu-box--inline-center,
.mbr-navbar__menu-box--inline-right {
display: block;
text-align: left;
}
.mbr-navbar__menu-box--inline-center {
text-align: center;
}
.mbr-navbar__menu-box--inline-right {
text-align: right;
}
.mbr-navbar__column {
display: table-cell;
vertical-align: middle;
}
.mbr-navbar__column--xxs {
width: 1%;
}
.mbr-navbar__column--xs {
width: 10%;
}
.mbr-navbar__column--s {
width: 20%;
}
.mbr-navbar__column--m {
width: 30%;
}
.mbr-navbar__column--l {
width: 40%;
}
.mbr-navbar__column--xl {
width: 50%;
}
.mbr-navbar__menu-box--inline-left .mbr-navbar__column,
.mbr-navbar__menu-box--inline-center .mbr-navbar__column,
.mbr-navbar__menu-box--inline-right .mbr-navbar__column {
display: inline-block;
}
.mbr-navbar__items {
float: left;
padding-left: 0px;
position: relative;
left: -20px;
}
.mbr-navbar__items--right {
float: right;
left: 0;
}
.mbr-navbar__item {
display: block;
float: left;
position: relative;
}
.mbr-navbar__hamburger {
display: none;
margin-top: -11px;
position: absolute;
right: 0;
top: 50%;
z-index: 10000;
}
.mbr-navbar--collapsed .mbr-navbar__container {
position: relative;
}
.mbr-navbar--collapsed .mbr-navbar__column {
display: block;
width: 100%;
}
.mbr-navbar--collapsed .mbr-navbar__items--right {
padding-top: 13px;
}
.mbr-navbar--collapsed .mbr-navbar__menu {
background: rgba(0, 0, 0, 0.9);
display: none;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 9999;
}
.mbr-navbar--collapsed .mbr-navbar__menu-box {
display: table-cell;
vertical-align: middle;
}
.mbr-navbar--collapsed .mbr-navbar__items {
float: none;
}
.mbr-navbar--collapsed .mbr-navbar__item {
float: none;
}
.mbr-navbar--collapsed .mbr-navbar__hamburger {
display: block;
}
.mbr-navbar--collapsed.mbr-navbar--open .mbr-navbar__menu {
display: table;
}
.mbr-navbar--collapsed.mbr-navbar--open:not(.mbr-navbar--sticky) .mbr-navbar__section {
background: none;
position: fixed;
}
.mbr-navbar--collapsed.mbr-navbar--open .mbr-navbar__brand {
visibility: hidden;
}
.mbr-navbar--collapsed.mbr-navbar--sticky.mbr-navbar--open .mbr-navbar__brand {
visibility: visible;
}
.mbr-navbar--collapsed.mbr-navbar--open .mbr-navbar__brand-img,
.mbr-navbar--collapsed.mbr-navbar--open .mbr-navbar__container {
-webkit-transition: none;
-o-transition: none;
transition: none;
}
.mbr-navbar--freeze.mbr-navbar--collapsed.mbr-navbar--open .mbr-navbar__hamburger,
.mbr-navbar--freeze.mbr-navbar--collapsed.mbr-navbar--open .mbr-navbar__hamburger:hover {
color: #fff !important;
}
.mbr-navbar--sticky .mbr-navbar__section {
position: fixed;
}
.mbr-navbar--absolute {
position: absolute;
}
.mbr-navbar--transparent .mbr-navbar__section {
background: none;
}
.mbr-navbar--stuck .mbr-navbar__section,
.mbr-navbar--relative .mbr-navbar__section {
background: #2c2c2c;
}
@media (max-width: 991px) {
.mbr-navbar--auto-collapse .mbr-navbar__container {
position: relative;
}
.mbr-navbar--auto-collapse .mbr-navbar__column {
display: block;
width: 100%;
}
.mbr-navbar--auto-collapse .mbr-navbar__items--right {
padding-top: 13px;
}
.mbr-navbar--auto-collapse .mbr-navbar__menu {
background: rgba(0, 0, 0, 0.9);
display: none;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 9999;
}
.mbr-navbar--auto-collapse .mbr-navbar__menu-box {
display: table-cell;
vertical-align: middle;
}
.mbr-navbar--auto-collapse .mbr-navbar__items {
float: none;
}
.mbr-navbar--auto-collapse .mbr-navbar__item {
float: none;
}
.mbr-navbar--auto-collapse .mbr-navbar__hamburger {
display: block;
}
.mbr-navbar--auto-collapse.mbr-navbar--open .mbr-navbar__menu {
display: table;
}
.mbr-navbar--auto-collapse.mbr-navbar--open:not(.mbr-navbar--sticky) .mbr-navbar__section {
background: none;
position: fixed;
}
.mbr-navbar--auto-collapse.mbr-navbar--open .mbr-navbar__brand {
visibility: hidden;
}
.mbr-navbar--auto-collapse.mbr-navbar--sticky.mbr-navbar--open .mbr-navbar__brand {
visibility: visible;
}
.mbr-navbar--auto-collapse.mbr-navbar--open .mbr-navbar__brand-img,
.mbr-navbar--auto-collapse.mbr-navbar--open .mbr-navbar__container {
-webkit-transition: none;
-o-transition: none;
transition: none;
}
}
.mbr-after-navbar:before {
content: "";
display: block;
height: 98px;
}
.mbr-hamburger {
cursor: pointer;
height: 23px;
width: 30px;
}
.mbr-hamburger:focus {
outline: none;
}
.mbr-hamburger__line,
.mbr-hamburger__line:before,
.mbr-hamburger__line:after {
content: "";
position: absolute;
display: block;
height: 1px;
cursor: pointer;
}
.mbr-hamburger__line,
.mbr-hamburger__line:before,
.mbr-hamburger__line:after {
width: 30px;
border-bottom: 5px solid;
top: 9px;
}
.mbr-hamburger__line:before {
top: -9px;
}
.mbr-hamburger__line:after {
top: 9px;
}
.mbr-hamburger__line,
.mbr-hamburger__line:before,
.mbr-hamburger__line:after {
-webkit-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.mbr-hamburger--open .mbr-hamburger__line {
border-color: transparent;
}
.mbr-hamburger--open .mbr-hamburger__line:before,
.mbr-hamburger--open .mbr-hamburger__line:after {
top: 0;
}
.mbr-hamburger--open .mbr-hamburger__line:before {
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.mbr-hamburger--open .mbr-hamburger__line:after {
top: 10px;
-ms-transform: translatey(-10px) rotate(-45deg);
-webkit-transform: translatey(-10px) rotate(-45deg);
transform: translatey(-10px) rotate(-45deg);
}
@media (max-width: 767px) {
.mbr-hamburger {
height: 23px;
width: 27px;
}
.mbr-hamburger__line,
.mbr-hamburger__line:before,
.mbr-hamburger__line:after {
width: 27px;
border-bottom: 4px solid;
top: 9px;
}
.mbr-hamburger__line:before {
top: -9px;
}
.mbr-hamburger__line:after {
top: 9px;
}
}
.mbr-brand {
display: block;
float: left;
position: relative;
}
.mbr-brand,
.mbr-brand:hover {
text-decoration: none;
}
.mbr-brand__name {
display: block;
font-weight: bold;
margin-top: 5px;
text-align: center;
}
.mbr-brand__name,
.mbr-brand__name:hover {
text-decoration: none;
}
.mbr-brand--inline {
display: table;
}
.mbr-brand--inline:after {
content: "";
display: table-cell;
width: 1px;
}
.mbr-brand--inline .mbr-brand__logo,
.mbr-brand--inline .mbr-brand__name {
display: table-cell;
vertical-align: middle;
}
.mbr-brand--inline .mbr-brand__logo {
padding-right: 10px;
}
.mbr-brand--inline .mbr-brand__name {
margin: 0;
text-align: left;
}
.mbr-form {
display: table;
margin-top: -13px;
position: relative;
top: 14px;
width: 100%;
}
.mbr-form__left,
.mbr-form__right {
display: table-cell;
vertical-align: top;
}
.mbr-form__left {
padding-right: 3px;
}
.mbr-form__right {
width: 1px;
}
@media (max-width: 530px) {
.mbr-form {
display: block;
margin-top: -27px;
position: relative;
top: 26px;
}
.mbr-form__left,
.mbr-form__right {
display: block;
}
.mbr-form__left {
margin-bottom: 12px;
padding-right: 0;
}
.mbr-form__right {
width: 100%;
}
}
.mbr-section {
padding: 0 20px;
}
.mbr-section--no-padding {
padding: 0;
}
.mbr-section--relative {
position: relative;
}
.mbr-section--fixed-size {
overflow: hidden;
}
.mbr-section--full-height {
height: 100vh;
}
.mbr-section--full-height.mbr-after-navbar:before {
display: none;
}
.mbr-section--bg-adapted {
background-attachment: scroll;
background-position: 50% 0;
background-repeat: no-repeat;
background-size: cover;
}
.mbr-section--gray {
background-color: #444444;
}
.mbr-section--light-gray {
background-color: #f0f0f0;
}
.mbr-section--dark-gray {
background-color: #3c3c3c;
}
.mbr-section__container {
padding: 0;
position: relative;
z-index: 3;
}
.mbr-section__container--center {
text-align: center;
}
.mbr-section__container--std-padding {
padding: 93px 0;
}
.mbr-section__container--std-top-padding {
padding-top: 93px;
}
.mbr-section__container--std-bot-padding {
padding-bottom: 93px;
}
.mbr-section__container--sm-padding {
padding: 41px 0;
}
.mbr-section__container--sm-top-padding {
padding-top: 41px;
}
.mbr-section__container--sm-bot-padding {
padding-bottom: 41px;
}
.mbr-section__container--isolated {
padding-bottom: 93px;
padding-top: 93px;
}
.mbr-section__container--first {
padding-top: 93px;
padding-bottom: 41px;
}
.mbr-section__container--middle {
padding-bottom: 41px;
}
.mbr-section__container--last {
padding-bottom: 93px;
}
.mbr-section__row {
margin-left: -24px;
margin-right: -24px;
}
.mbr-section__col {
overflow: hidden;
padding-left: 24px;
padding-right: 24px;
}
.mbr-section__left {
padding-right: 40px;
}
.mbr-section__right {
padding-left: 15px;
}
.mbr-section__header {
line-height: 1.5em;
margin: -10px 0 0;
text-align: center;
}
@media (min-width: 768px) {
.mbr-section--short-paddings .mbr-section__container--std-padding {
padding: 59px 0;
}
.mbr-section--short-paddings .mbr-section__container--std-top-padding {
padding-top: 59px;
}
.mbr-section--short-paddings .mbr-section__container--std-bot-padding {
padding-bottom: 59px;
}
.mbr-section--short-paddings .mbr-section__container--sm-padding {
padding: 41px 0;
}
.mbr-section--short-paddings .mbr-section__container--sm-top-padding {
padding-top: 41px;
}
.mbr-section--short-paddings .mbr-section__container--sm-bot-padding {
padding-bottom: 41px;
}
.mbr-section--short-paddings .mbr-section__container--isolated {
padding-bottom: 59px;
padding-top: 59px;
}
.mbr-section--short-paddings .mbr-section__container--first {
padding-top: 59px;
padding-bottom: 41px;
}
.mbr-section--short-paddings .mbr-section__container--middle {
padding-bottom: 41px;
}
.mbr-section--short-paddings .mbr-section__container--last {
padding-bottom: 59px;
}
}
@media (max-width: 767px) {
.mbr-section__left {
padding-right: 15px;
}
.mbr-section__right {
padding-left: 15px;
padding-top: 51px;
}
}
.mbr-arrow {
bottom: 71px;
left: 0;
line-height: 1px;
padding: 0 20px;
position: absolute;
width: 100%;
z-index: 3;
}
.mbr-arrow__link {
display: inline-block;
font-size: 26px;
}
.mbr-arrow__link,
.mbr-arrow__link:hover,
.mbr-arrow__link:focus {
color: #fff;
}
.mbr-arrow--floating .mbr-arrow__link {
-webkit-animation: floating-arrow 1.6s infinite ease-in-out 0s;
-o-animation: floating-arrow 1.6s infinite ease-in-out 0s;
animation: floating-arrow 1.6s infinite ease-in-out 0s;
}
@-webkit-keyframes floating-arrow {
from {
-webkit-transform: translateY(0);
transform: translateY(0);
}
65% {
-webkit-transform: translateY(11px);
transform: translateY(11px);
}
to {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@-o-keyframes floating-arrow {
from {
-webkit-transform: translateY(0);
transform: translateY(0);
}
65% {
-webkit-transform: translateY(11px);
transform: translateY(11px);
}
to {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes floating-arrow {
from {
-webkit-transform: translateY(0);
transform: translateY(0);
}
65% {
-webkit-transform: translateY(11px);
transform: translateY(11px);
}
to {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
.mbr-arrow--dark .mbr-arrow__link,
.mbr-arrow--dark .mbr-arrow__link:hover,
.mbr-arrow--dark .mbr-arrow__link:focus {
color: #252525;
}
@media (max-width: 767px) {
.mbr-arrow {
bottom: 41px;
}
}
@media (max-width: 320px) {
.mbr-arrow {
bottom: 21px;
text-align: center;
}
}
@media all and (device-width: 320px) and (device-height: 568px) and (orientation: portrait) {
.mbr-arrow {
bottom: 31px;
}
}
.mbr-box {
display: table;
width: 100%;
}
.mbr-box--fixed {
table-layout: fixed;
}
.mbr-box--stretched {
height: 100%;
}
.mbr-box__magnet {
display: table-cell;
float: none;
height: 100%;
margin-bottom: 0;
margin-top: 0;
text-align: center;
vertical-align: middle;
}
.mbr-box__magnet--sm-padding {
padding: 41px 0;
}
.mbr-box__magnet--top-left,
.mbr-box__magnet--top-center,
.mbr-box__magnet--top-right {
vertical-align: top;
}
.mbr-box__magnet--bottom-left,
.mbr-box__magnet--bottom-center,
.mbr-box__magnet--bottom-right {
vertical-align: bottom;
}
.mbr-box__magnet--top-left,
.mbr-box__magnet--center-left,
.mbr-box__magnet--bottom-left {
text-align: left;
}
.mbr-box__magnet--top-right,
.mbr-box__magnet--center-right,
.mbr-box__magnet--bottom-right {
text-align: right;
}
.mbr-box__container {
height: 50%;
}
@media (max-width: 767px) {
.mbr-box__container {
height: 100%;
}
.mbr-box--adapted {
display: block;
}
.mbr-box--adapted > .mbr-box__magnet {
display: block;
height: auto;
}
}
.mbr-overlay {
background: #222;
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 2;
}
.mbr-google-map__marker {
color: #252525;
display: none;
margin: 0;
}
.mbr-google-map--loaded .mbr-google-map__marker {
display: block;
}
.mbr-hero {
color: #fff;
position: relative;
}
.mbr-hero__text {
font-size: 46px;
font-weight: bold;
left: -2px;
letter-spacing: 2px;
line-height: 50px;
margin: -18px 0 1px 0;
padding-bottom: 41px;
position: relative;
top: 8px;
}
.mbr-hero__subtext {
font-size: 21px;
line-height: 29px;
margin: -32px 0 3px 0;
padding: 0 0 41px 0;
position: relative;
top: 6px;
}
.mbr-figure {
display: inline-block;
line-height: 1px;
margin: 0;
max-width: 100%;
overflow: hidden;
position: relative;
}
.mbr-figure--no-bg {
background: none;
}
.mbr-figure--full-width {
display: block;
width: 100%;
}
.mbr-figure.mbr-after-navbar:before {
display: none;
}
.mbr-figure--full-width iframe,
.mbr-figure--full-width .mbr-figure__img,
.mbr-figure--full-width .mbr-figure__map {
width: 100%;
}
.mbr-figure iframe,
.mbr-figure__img,
.mbr-figure__map {
max-width: 100%;
}
.mbr-figure__map {
height: 400px;
line-height: 1.3em;
}
.mbr-figure__map--short {
height: 300px;
}
.mbr-figure__caption {
background: rgba(0, 0, 0, 0.5);
bottom: 0;
color: #fff;
display: block;
font-size: 17px;
left: 0;
line-height: 1.3em;
min-height: 53px;
padding: 17px 20px;
position: absolute;
text-align: left;
width: 100%;
}
.mbr-figure__caption--no-padding {
padding: 17px 0;
}
.mbr-figure--wysiwyg .mbr-figure__caption a,
.mbr-figure--wysiwyg .mbr-figure__caption a:hover {
color: inherit;
text-decoration: underline;
}
.mbr-figure--caption-inside-top .mbr-figure__caption {
bottom: auto;
top: 0;
}
.mbr-figure--caption-outside-top .mbr-figure__caption,
.mbr-figure--caption-outside-bottom .mbr-figure__caption {
background: none;
position: relative;
}
.mbr-figure--no-bg.mbr-figure--caption-outside-top .mbr-figure__caption,
.mbr-figure--no-bg.mbr-figure--caption-outside-bottom .mbr-figure__caption {
color: #252525;
}
.mbr-figure--no-bg.mbr-figure--caption-outside-top .mbr-figure__caption {
margin-top: -3px;
padding-top: 0;
}
.mbr-figure--no-bg.mbr-figure--caption-outside-bottom .mbr-figure__caption {
margin-top: -2px;
padding-bottom: 0;
top: 2px;
}
.mbr-figure__caption--std-grid {
background: none;
z-index: 2;
}
@media (min-width: 768px) {
.mbr-figure__caption--std-grid {
width: 715px;
left: 50%;
margin-left: -357.5px;
padding: 17px 0;
}
}
@media (min-width: 992px) {
.mbr-figure__caption--std-grid {
width: 935px;
margin-left: -467.5px;
}
}
@media (min-width: 1200px) {
.mbr-figure__caption--std-grid {
width: 1150px;
margin-left: -575px;
}
}
.mbr-figure__caption--std-grid:before {
bottom: 0;
content: "";
position: absolute;
top: 0;
width: 200%;
z-index: -1;
margin-left: -50%;
}
.mbr-figure--caption-inside-top .mbr-figure__caption--std-grid:before,
.mbr-figure--caption-inside-bottom .mbr-figure__caption--std-grid:before {
background: rgba(0, 0, 0, 0.6);
}
.mbr-figure__caption-small {
color: #ccc;
display: block;
font-size: 14px;
line-height: 1.3em;
}
.mbr-figure--no-bg.mbr-figure--caption-outside-top .mbr-figure__caption-small,
.mbr-figure--no-bg.mbr-figure--caption-outside-bottom .mbr-figure__caption-small {
color: #777;
}
@media (max-width: 767px) {
.mbr-figure--adapted {
display: block;
width: 100%;
}
.mbr-figure--adapted iframe,
.mbr-figure--adapted .mbr-figure__img,
.mbr-figure--adapted .mbr-figure__map {
width: 100%;
}
.mbr-figure--caption-inside-top .mbr-figure__caption,
.mbr-figure--caption-inside-bottom .mbr-figure__caption {
background: none;
position: relative;
}
.mbr-figure--caption-inside-top .mbr-figure__caption--std-grid:before,
.mbr-figure--caption-inside-bottom .mbr-figure__caption--std-grid:before {
display: none;
}
}
.mbr-reviews {
list-style: none;
margin: 0 -15px;
padding: 3px 0 0 0;
}
.mbr-reviews__item {
position: relative;
margin-top: 39px;
}
.mbr-reviews__text {
background: #fafafa;
border-radius: 3px;
border: 1px solid #ededed;
color: #777;
font-size: 16px;
line-height: 26px;
padding: 20px;
position: relative;
}
.mbr-reviews__text:before {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
width: 14px;
height: 14px;
background-color: #fafafa;
border-color: #ededed;
border-style: none solid solid none;
border-width: 0 1px 1px 0;
bottom: -8px;
content: "";
display: block;
left: 50px;
position: absolute;
}
.mbr-reviews__p {
margin: 0;
}
.mbr-reviews__author {
margin-top: 30px;
padding-left: 102px;
position: relative;
}
.mbr-reviews__author--short {
margin-top: 27px;
padding-left: 32px;
}
.mbr-reviews__author-img {
width: 50px;
height: 50px;
border-radius: 50%;
left: 33px;
position: absolute;
top: 0;
}
.mbr-reviews__author-name {
color: #777;
font-size: 14px;
font-weight: bold;
position: relative;
top: -3px;
}
.mbr-reviews__author-bio {
color: #999;
font-size: 12px;
}
@media (max-width: 767px) {
.mbr-reviews__author {
padding-bottom: 32px;
}
.mbr-reviews__author--short {
padding-bottom: 1px;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.mbr-reviews__item:nth-of-type(2n+1) {
clear: left;
}
}
@media (min-width: 992px) {
.mbr-reviews__item:nth-of-type(3n+1) {
clear: left;
}
}
@media (max-width: 991px) {
.mbr-header--reduce .mbr-header__text {
padding-top: 1em;
margin-top: -1em;
}
}
.mbr-header {
margin-top: -20px;
padding: 0;
position: relative;
text-align: left;
top: 10px;
}
.mbr-header--std-padding {
padding-bottom: 41px;
}
.mbr-header--center {
text-align: center;
}
.mbr-header__text {
display: block;
font-size: 25px;
font-weight: bold;
letter-spacing: 6px;
line-height: 1.5em;
margin: 0;
}
.mbr-header__subtext {
color: #777;
font-size: 14px;
font-style: italic;
letter-spacing: 1px;
margin: 8px 0 7px 0;
}
.mbr-header--inline {
margin-top: 0;
padding: 41px 0 28px 0;
top: 0;
}
.mbr-header--inline .mbr-header__text {
letter-spacing: 4px;
line-height: 1em;
margin: 15px 0 0 0;
}
@media (max-width: 767px) {
.mbr-header--inline {
padding: 47px 0 38px 0;
}
.mbr-header--inline .mbr-header__text {
display: block;
margin: 0 0 38px 0;
}
.mbr-header--auto-align .mbr-header__text,
.mbr-header--auto-align .mbr-header__subtext {
left: 0;
text-align: center !important;
}
}
@media (min-width: 768px) {
.mbr-header--reduce {
margin-top: -5px;
top: 2px;
}
.mbr-header--reduce .mbr-header__text {
font-size: 16px;
letter-spacing: 1px;
line-height: 1.1em;
padding-top: 0.4em;
margin-top: -0.4em;
}
}
.mbr-social-icons__icon {
-webkit-transition: all 0.2s ease-in-out 0s;
-o-transition: all 0.2s ease-in-out 0s;
transition: all 0.2s ease-in-out 0s;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 29px;
height: 56px;
line-height: 61px;
margin: 0 10px 13px 0;
position: relative;
text-align: center;
width: 56px;
}
.mbr-social-icons__icon:hover {
color: #fff;
}
.mbr-social-icons--style-1 .mbr-social-icons__icon:hover {
background: #252525 !important;
}
.mbr-contacts {
color: #9c9c9c;
font-size: 14px;
line-height: 1.7em;
padding: 45px 0 46px;
}
.mbr-contacts__img {
max-width: 100%;
margin: 6px 0 5px 40px;
}
.mbr-contacts__img--left {
margin-left: 0;
}
.mbr-contacts__text {
margin: 0;
}
.mbr-contacts__header {
color: #fff;
font-size: 14px;
letter-spacing: 1px;
margin-bottom: 20px;
margin-top: 3px;
}
.mbr-contacts__list {
list-style: none;
margin: 0;
padding: 0;
}
@media (max-width: 767px) {
.mbr-contacts__img {
margin-bottom: 10px;
}
.mbr-contacts__header {
margin-top: 20px;
margin-bottom: 10px;
}
.mbr-contacts__column {
margin-top: 37px;
}
}
.mbr-footer {
color: #9c9c9c;
font-size: 13px;
letter-spacing: 1px;
line-height: 1.5em;
padding: 37px 0 39px;
word-spacing: 1px;
}
.mbr-footer__copyright {
margin: 0;
}
.mbr-buttons {
margin: -26px 0 13px 0;
position: relative;
text-align: left;
top: 26px;
}
.mbr-buttons__btn,
.mbr-buttons__link {
margin: 0 10px 13px 0;
}
.mbr-buttons__btn,
.mbr-buttons__link,
.mbr-buttons__btn:hover,
.mbr-buttons__link:hover {
text-decoration: none;
}
.mbr-buttons--top {
top: 44px;
margin-top: -62px;
}
.mbr-buttons--no-offset {
margin-top: 0;
top: 0;
}
.mbr-buttons--only-links {
left: -20px;
}
.mbr-buttons--center {
left: 5px;
text-align: center;
}
.mbr-buttons--center.mbr-buttons--only-links {
left: 0;
}
.mbr-buttons--right {
text-align: right;
}
.mbr-buttons--right .mbr-buttons__btn,
.mbr-buttons--right .mbr-buttons__link {
margin: 0 0 13px 10px;
}
.mbr-buttons--right.mbr-buttons--only-links {
left: 20px;
}
.mbr-buttons--activated {
left: 5px;
text-align: center;
}
.mbr-buttons--activated .mbr-buttons__btn,
.mbr-buttons--activated .mbr-buttons__link {
margin-left: 0;
margin-right: 0;
}
.mbr-buttons--activated .mbr-buttons__link {
font-size: 25px;
padding: 10px 30px 2px;
}
.mbr-buttons--activated .mbr-buttons__btn {
font-size: 15px;
margin-top: 9px;
padding: 15px 30px;
}
.mbr-buttons--freeze.mbr-buttons--activated .mbr-buttons__link {
font-size: 25px !important;
}
.mbr-buttons--freeze.mbr-buttons--activated .mbr-buttons__link,
.mbr-buttons--freeze.mbr-buttons--activated .mbr-buttons__link:hover {
color: #fff !important;
}
.mbr-buttons--freeze.mbr-buttons--activated .mbr-buttons__btn {
font-size: 15px !important;
}
@media (max-width: 991px) {
.mbr-buttons--active {
left: 5px;
text-align: center;
}
.mbr-buttons--active .mbr-buttons__btn,
.mbr-buttons--active .mbr-buttons__link {
margin-left: 0;
margin-right: 0;
}
.mbr-buttons--active .mbr-buttons__link {
font-size: 25px;
padding: 10px 30px 2px;
}
.mbr-buttons--active .mbr-buttons__btn {
font-size: 15px;
margin-top: 9px;
padding: 15px 30px;
}
.mbr-buttons--freeze.mbr-buttons--active .mbr-buttons__link {
font-size: 25px !important;
}
.mbr-buttons--freeze.mbr-buttons--active .mbr-buttons__link,
.mbr-buttons--freeze.mbr-buttons--active .mbr-buttons__link:hover {
color: #fff !important;
}
.mbr-buttons--freeze.mbr-buttons--active .mbr-buttons__btn {
font-size: 15px !important;
}
}
@media (max-width: 767px) {
.mbr-buttons--auto-align {
left: 5px;
margin-top: -26px;
text-align: center;
top: 26px;
}
.mbr-buttons--auto-align.mbr-buttons--only-links {
left: 0;
}
}
@media (max-width: 530px) {
.mbr-buttons {
left: 0;
}
.mbr-buttons__btn,
.mbr-buttons__link,
.mbr-buttons--right .mbr-buttons__btn,
.mbr-buttons--right .mbr-buttons__link {
display: inline-block;
margin: 0 0 13px 0;
text-align: center;
width: 100%;
}
.mbr-buttons--activated .mbr-buttons__btn,
.mbr-buttons--activated .mbr-buttons__link,
.mbr-buttons--active .mbr-buttons__btn,
.mbr-buttons--active .mbr-buttons__link {
width: auto;
}
.mbr-buttons--activated .mbr-buttons__btn,
.mbr-buttons--active .mbr-buttons__btn {
margin-top: 9px;
}
}
.mbr-article {
color: #777;
font-size: 17px;
line-height: 27px;
text-align: left;
position: relative;
margin-top: -21px;
top: 14px;
}
.mbr-article--wysiwyg h1,
.mbr-article--wysiwyg h2,
.mbr-article--wysiwyg h3,
.mbr-article--wysiwyg h4,
.mbr-article--wysiwyg h5,
.mbr-article--wysiwyg h6 {
color: #252525;
display: block;
font-weight: bold;
line-height: 1.3em;
text-align: left;
}
.mbr-article--wysiwyg h1 {
font-size: 27px;
letter-spacing: 3px;
}
.mbr-article--wysiwyg h2 {
font-size: 23px;
letter-spacing: 2px;
}
.mbr-article--wysiwyg h3 {
font-size: 19px;
letter-spacing: 1px;
}
.mbr-article--wysiwyg h4 {
font-size: 14px;
}
.mbr-article--wysiwyg h5 {
font-size: 11px;
}
.mbr-article--wysiwyg h6 {
font-size: 10px;
}
.mbr-article--wysiwyg p,
.mbr-article--wysiwyg ul,
.mbr-article--wysiwyg ol,
.mbr-article--wysiwyg blockquote {
margin: 0 0 10px 0;
}
.mbr-article--wysiwyg blockquote {
font-size: 17px;
border-color: #f97352;
}
@media (max-width: 767px) {
.mbr-article--auto-align.mbr-article--wysiwyg p,
.mbr-article--auto-align {
text-align: left !important;
}
}
.social-likes__counter {
-webkit-transition: all 0.2s ease-in-out 0s;
-o-transition: all 0.2s ease-in-out 0s;
transition: all 0.2s ease-in-out 0s;
background: #3c3c3c;
border-radius: 23px;
font-size: 12px;
height: 23px;
line-height: 24px;
min-width: 23px;
padding: 0 5px;
position: absolute;
right: -7px;
text-align: center;
top: -7px;
}
.social-likes__counter_empty {
display: none;
}
.social-likes_style-1 .social-likes__icon:hover {
background: #252525 !important;
}
.social-likes_style-1 .social-likes__icon:hover .social-likes__counter {
background: #f97352;
}
.social-likes_style-2 .social-likes__icon {
background: #252525;
}
.social-likes_style-2 .social-likes__counter {
background: #f97352;
}
.social-likes_style-2 .social-likes__icon:hover .social-likes__counter {
background: #3c3c3c;
}
.mbr-plan {
padding-bottom: 41px;
padding-left: 1px;
padding-right: 0;
position: relative;
}
.mbr-plan--first,
.mbr-plan:first-child {
padding-left: 0;
}
.mbr-plan--last,
.mbr-plan:last-child {
padding-bottom: 93px;
}
.mbr-plan__box {
background: #fff;
}
.mbr-plan__header {
background: #444;
overflow: hidden;
padding: 20px 15px;
color: #fff;
}
.mbr-plan__number {
border-bottom: 1px dotted #ddd;
color: #333;
font-size: 80px;
line-height: 0;
margin: 0px 10px;
padding: 41px 0;
text-align: center;
margin-bottom: 41px;
}
.mbr-plan__details {
padding-bottom: 41px;
}
.mbr-plan__details ul,
.mbr-plan__list {
list-style: none;
margin: 0;
padding: 0;
}
.mbr-plan__details li,
.mbr-plan__item {
line-height: 40px;
padding: 0 15px;
text-align: center;
}
.mbr-plan__buttons {
overflow: hidden;
padding: 0 15px 41px;
}
.mbr-plan--favorite {
margin-right: -1px;
margin-top: -30px;
padding-left: 0;
top: 15px;
z-index: 5;
}
.mbr-plan--favorite .mbr-plan__number:before {
content: "";
display: block;
height: 15px;
}
.mbr-plan--favorite .mbr-plan__box {
padding-bottom: 15px;
box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.1);
}
.mbr-plan--primary .mbr-plan__header {
background: #4c6972;
}
.mbr-plan--success .mbr-plan__header {
background: #7ac673;
}
.mbr-plan--info .mbr-plan__header {
background: #27aae0;
}
.mbr-plan--warning .mbr-plan__header {
background: #faaf40;
}
.mbr-plan--danger .mbr-plan__header {
background: #f97352;
}
@media (max-width: 767px) {
.mbr-plan,
.mbr-plan--first,
.mbr-plan:first-child {
padding-left: 15px;
padding-right: 15px;
}
.mbr-plan__number {
font-size: 79px;
}
.mbr-plan__details {
font-size: 17px;
}
.mbr-plan--favorite {
margin: 0;
top: 0;
}
}
.mbr-number {
display: inline-block;
margin-top: -0.12em;
}
.mbr-number__num {
display: inline-table;
height: 1em;
}
.mbr-number__group {
display: table-cell;
font-weight: bold;
position: relative;
vertical-align: middle;
}
.mbr-number__left {
display: none;
font-size: 0.34em;
line-height: 0;
padding: 0px 5px;
vertical-align: super;
}
.mbr-number__right {
display: none;
font-size: 0.25em;
padding: 0px 5px;
vertical-align: middle;
white-space: nowrap;
}
.mbr-number__caption {
display: block;
font-size: 0.19em;
line-height: 1em;
opacity: 0.5;
padding-top: 0.5em;
text-align: center;
}
.mbr-number--price .mbr-number__value {
padding-right: 0.28em;
}
.mbr-number--price .mbr-number__left {
display: inline;
}
.mbr-number--short-price .mbr-number__left,
.mbr-number--short-price .mbr-number__right {
display: inline;
}
.mbr-number--short-price .mbr-number__caption {
display: none;
}
.mbr-number--inverse-price .mbr-number__group {
top: 0.1em;
}
.mbr-number--inverse-price .mbr-number__left {
display: none;
}
.mbr-number--inverse-price .mbr-number__value {
padding-left: 0.28em;
}
.mbr-number--inverse-price .mbr-number__right {
display: inline;
}
.engine {
position: absolute;
text-indent: -2400px;
text-align: center;
padding: 0;
}
