/*
Theme Name: Inspiro Selector
version: 1.3
*/
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
html { font-size: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; -ms-text-size-adjust: none; }
b, strong { font-weight: bold; }
ul, ol { margin: 0; padding: 0; list-style-position: inside; }
ul ul, ol ol, ul ol, ol ul { margin: 0; }
dd { margin: 0 0 0 40px; }
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
.clear, .cleaner { clear: both; height: 0; overflow: hidden; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
::-moz-selection { background: #05C; color: #fff; text-shadow: none; }
::selection { background: #05C; color: #fff; text-shadow: none; }
img::-moz-selection { background: transparent; }

img::selection { background: transparent; }
body {
    color: #2b2b2b;
    font-family: "proxima-nova-1", "proxima-nova-2", sans-serif;
    font-size: 16px;
    overflow-x: hidden;
    line-height: 1.5;
    margin: 0;
    padding: 0;
    background: #fff;
}
a { color: #212426; text-decoration: none; }
a:hover { color: #0bb4aa; text-decoration: none; }
a:focus { outline: none; }
a:hover, a:active { outline: none; }

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.text-center {
    text-align: center;
}
.text-left {
    text-align: left;
}
.text-right {
    text-align: right;
}

html,
body {
    height: 100%;
}
.header {
    height: 100%;
    /*max-height: 1000px;*/
    position: relative;
}

.wrapper {
    max-width: 1400px;
    padding: 0 4%;
    margin: 0 auto;
}
.wrapper::after {
    content: '';
    clear: both;
    display: table;
}

mark {
    position: relative;
    background-color: transparent;
    color: inherit;
}
mark em {
    position: relative;
    z-index: 1;
    font-style: normal;
}
mark::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 3px;
    width: 100%;
    height: 8px;
    background-color: #0bb4aa;
    z-index: 0;
}


.header {
    background: #fff;
    padding: 10% 0;
}

.header .decoshape {
    position: absolute;
    right: 0;
    top: 0;
}
.header .decoshape path {
    height: 100%;
    width: auto;
    position: relative;
}
.header .header-nav {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    padding: 10px 0;
}
.header .header-nav .wrapper {
    display: flex;
}
.header .header-nav .left-logo {
    flex: 0;
}
.header .header-nav .left-logo h1 {
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 2px;
    font-size: 28px;
}
.header .header-nav-items {
    flex: 1;
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: right;
}
.header .header-nav-items > li {
    display: inline-block;
    vertical-align: middle;
    line-height: 4.5em;
}
.header .header-nav-items > li a {
    position: relative;
    padding: 15px 20px;
    color: #fff;
}
.header .header-nav-items > li a:not(.btn-purchase)::after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #fff;

    -webkit-transition: width .2s linear;
    -o-transition: width .2s linear;
    transition: width .2s linear;
}
.header .header-nav-items > li a:not(.btn-purchase):hover::after {
    animation: header_nav_item_hover 1s 1;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
}
@keyframes header_nav_item_hover {
    0%{
        width: 0;
        left: 0;
    }
    50%{
        width: 100%;
        left: 0;
    }
    100% {
        width: 0;
        left: 100%;
    }
}
.header .header-nav-items > li:last-child a {
    margin-right: 0;
}
.header .header-nav-items .btn-purchase {
    background-color: #0bb4aa;
    border-radius: 3px;
    color: #fff;
    outline: 0;
    cursor: pointer;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin: 0;
    margin-left: 15px;
    padding-left: 30px;
    padding-right: 30px;
    z-index: 100;
    -webkit-transition: background-color .2s linear, color .2s linear;
    -moz-transition: background-color .2s linear, color .2s linear;
    transition: background-color .2s linear, color .2s linear;
}
.header .header-nav-items .btn-purchase em {
    font-style: normal;
}
.header .header-nav-items .btn-purchase.is-sticky {
    position: fixed;
    top: 20px;
    right: 25px;
    box-shadow: 0 4px 15px #0bb4aa;
    line-height: 1.4em;
    z-index: 10;
}
.header .header-nav-items .btn-purchase.is-sticky:hover {
    box-shadow: 0 4px 15px #2b2b2b;
}
.header .header-nav-items .btn-purchase:hover {
    color: #fff;
    background-color: #2b2b2b;
}
.header .header-content {
    height: 100%;
    position: relative;
    text-align: left;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.header .header-content .left-side {
    width: 35%;
}
.header .header-content .left-side h3 {
    font-size: 32px;
    line-height: 1.4;
    font-weight: 600;
    margin-bottom: 1.5em;
}
.header .header-content .left-side p {
    line-height: 1.8;
    margin-top: 0;
    margin-bottom: 3em;
    color: #515256;
}
 .btn-discover-feats {
    display: inline-block;
    padding: 15px 30px;
    color: #fff;
    background-color: #2b2b2b;
    border-radius: 3px;
    box-shadow: 0 4px 15px #2b2b2b;

    -webkit-transition: background-color .2s linear, color .2s linear, box-shadow .2s linear;
    -moz-transition: background-color .2s linear, color .2s linear, box-shadow .2s linear;
    transition: background-color .2s linear, color .2s linear, box-shadow .2s linear;
}


.footer_alt_btn {
    text-align: center;
}

#main-features  .btn-discover-feats {
    margin: 20px auto;
}


  .btn-discover-feats:hover {
    background-color: #0bb4aa;
    color: #fff;
    box-shadow: 0 4px 15px #0bb4aa;
}
.header .header-content .left-side .quick-links {
    list-style-type: none;
    margin: 0;
    margin-top: 3em;
    padding: 0;
}
.header .header-content .left-side .quick-links > li {
    display: inline-block;
    margin-right: 15px;
    vertical-align: text-top;
}
.header .header-content .left-side .quick-links > li a {
    color: #acacac;
    display: inline-block;
}
.header .header-content .left-side .quick-links > li a svg {
    fill: #acacac;
}
.header .header-content .left-side .quick-links > li a:hover {
    color: #0bb4aa;
}
.header .header-content .left-side .quick-links > li a:hover svg {
    fill: #0bb4aa;
}


.header .header-content .right-side {
    width: 65%;
}

.header .header-content .right-side img {
    max-width: 100%;
    height: auto;
}



.mouse{
  margin: -50px auto 0;
  padding: 20px 0;
  width: 250px;
  text-align: center;
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
}

.mouse em {
   width: auto;
   display: inline-block;
   position: relative;
   text-align: center;
   margin: 15px auto 0;
   text-transform: uppercase;
   color: #ccc;
   font-weight: 600;
   font-size: 14px;
   letter-spacing: 2px;
   font-style: normal;
}


.mouse-icon{
   width: 25px;
   height: 45px;
   border: 2px solid #eee;
   border-radius: 15px;
   position: relative;
   text-align: center;
   display: inline-block;
   margin: 20px auto 0;
   overflow: hidden;
}.mouse-wheel{
  height: 6px;
  margin: 2px auto 0;
  display: block;
  width: 3px;
  background-color: #eee;
  border-radius: 50%;
  -webkit-animation: 1.6s ease infinite wheel-up-down;
 -moz-animation: 1.6s ease infinite wheel-up-down;
  animation: 1.6s ease infinite wheel-up-down;
}
@-webkit-keyframes wheel-up-down {
    0% {
        margin-top: 2px;
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    100% {
        margin-top: 20px;
        opacity: 0;
    }
}@-moz-keyframes wheel-up-down {
    0% {
        margin-top: 2px;
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    100% {
        margin-top: 20px;
        opacity: 0;
    }
}@keyframes wheel-up-down {
    0% {
        margin-top: 2px;
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    100% {
        margin-top: 20px;
        opacity: 0;
    }
}

.section-title {
    max-width: 60%;
    margin: auto;
    margin-bottom: 4em;
}
.section-title h2 {
    font-size: 32px;
    line-height: 1.4;
    font-weight: 600;
    text-align: center;
}

.description {
    color: #999;
    text-align: center;
    margin-bottom: 20px;
    max-width: 80%;
    margin-left:auto;
    margin-right: auto;
}



.builder-examples {
    padding: 0;
    margin: 0;
    text-align: center;
    list-style-type: none;
    margin-left: -20px;
    margin-right: -20px;
}
.builder-examples::after {
    content: '';
    clear: both;
    display: table;
}
.builder-examples > li {
    float: left;
    width: 33.3333%;
    padding-left: 20px;
    padding-right: 20px;
}
.builder-examples figure {
    margin: 0;
    margin-bottom: 40px;
    box-shadow: 0 8px 35px rgba(70, 70, 70, 0.15);
    overflow: hidden;
    border-radius: 5px;

    -webkit-transition: transform .3s ease, box-shadow .3s linear;
    -moz-transition: transform .3s ease, box-shadow .3s linear;
    transition: transform .3s ease, box-shadow .3s linear;
}
.builder-examples figure:hover {
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    transform: translateY(-10px);

    box-shadow: 0 8px 35px rgba(70, 70, 70, 0.3);
}
.builder-examples figure .figimage {
    position: relative;
}

.video_land {
    border-radius: 15px;
}

@media (min-width:700px) {
    .video_land {
        margin-right: 45px;
    }
}

.video_land iframe {
    border-right: 17px #fff solid;
    border-left: 17px #fff solid;

    box-shadow: 0 8px 35px rgba(70, 70, 70, 0.15);
    overflow: hidden;
    border-radius: 5px;
    -webkit-transition: transform .3s ease, box-shadow .3s linear;
    -moz-transition: transform .3s ease, box-shadow .3s linear;
    transition: transform .3s ease, box-shadow .3s linear;
}


.builder-examples figure .figimage .overlay-content {
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(70, 70, 70, 0.75);
    color: #fff;
    display: grid;
    width: 100%;
    height: 100%;
    opacity: 0;
    text-align: center;

    -webkit-transition: opacity .3s linear;
    -o-transition: opacity .3s linear;
    transition: opacity .3s linear;
}
.builder-examples figure .figimage:hover .overlay-content {
    opacity: 1;
}
.builder-examples figure .figimage .overlay-content span {
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.builder-examples figure .figimage a {
    display: block;
}
.builder-examples figure .figimage img {
    width: 100%;
}


.builder-examples li.coming-soon img {
    filter: blur(3px);
}

.builder-examples li.coming-soon:hover img {
    filter: none;
}


.builder-examples figure figcaption {
    padding: 1.4em 2em;
}
.builder-examples figure figcaption h4 {
    margin: 0;
}
.builder-examples figure figcaption .btn-view-demo {
    display: inline-block;
    padding: 10px 25px;
    color: #fff;
    background-color: #0bb4aa;
    border-radius: 3px;
    box-shadow: 0 4px 15px #0bb4aa;
    font-size: 14px;

    -webkit-transition: background-color .2s linear, color .2s linear, box-shadow .2s linear;
    -moz-transition: background-color .2s linear, color .2s linear, box-shadow .2s linear;
    transition: background-color .2s linear, color .2s linear, box-shadow .2s linear;
}
.builder-examples figure figcaption .btn-view-demo:hover {
    background-color: #2b2b2b;
    color: #fff;
    box-shadow: 0 4px 15px #2b2b2b;
}


#main-features {
    margin: 5em 0;
    padding: 5em 0 0;
    border-top: 1px solid #eee;
}
.mosaic-features > figure {
    height: 100%;
    margin: 2em 0;
    padding: 0;
    position: relative;
    text-align: left;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.mosaic-features > figure:nth-child(2n) {
    flex-direction: row-reverse;
}
.mosaic-features > figure .figimage {
    width: 68%;
}

.mosaic-features > figure .figimage img {
    max-width: 100%;
    height: auto;
}

.mosaic-features > figure figcaption {
    width: 30%;
}
.mosaic-features > figure figcaption h3 {
    font-size: 26px;
    position: relative;
    font-weight: 600;
}

.builder-examples .example-tag {
    color: #727980;
    margin: 10px 0 0;
    font-weight: 500;
}

sup, sub {
  vertical-align: baseline;
  position: relative;
  top: -0.4em; }


.mosaic-features > figure figcaption h3 sup {
    display: inline-block;
    vertical-align: middle;
    background: #0bb4aa;
    border-radius: 3px;
    padding: 3px 10px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    margin-top: 5px;
    text-transform: uppercase;
}

.mosaic-features > figure figcaption p {
    color: #515256;
    line-height: 1.8;
}


.site-footer {
    position: relative;
    margin-top: 5em;
}
.site-footer .footer-columns {
    position: relative;
}
.site-footer .footer-columns::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 50%;
    background-color: #F6F7FC;
}
.site-footer .footer-columns::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 50%;
    background-color: #4071c1;
}
.site-footer .footer-columns .wrapper {
    display: flex;
    position: relative;
    height: 100%;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
}
.site-footer .left-side {
    width: 40%;
    padding: 4em 3em;
    background-color: #F6F7FC;
}
.site-footer .left-side h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    text-transform: uppercase;
}
.site-footer .left-side ul {
    margin-bottom: 30px;
    line-height: 2em;
}
.site-footer .left-side ul li {
    list-style: none;
    background-image: url('images/check-icon.png');
    background-position: left center;
    background-size: 16px;
    background-repeat: no-repeat;
    padding-left: 26px;
}
.site-footer .left-side .btn-purchase {
    display: inline-block;
    padding: 10px 25px;
    color: #fff;
    background-color: #0bb4aa;
    border-radius: 3px;
    box-shadow: 0 4px 15px #0bb4aa;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5;
    font-weight: 600;

    -webkit-transition: background-color .2s linear, color .2s linear, box-shadow .2s linear;
    -moz-transition: background-color .2s linear, color .2s linear, box-shadow .2s linear;
    transition: background-color .2s linear, color .2s linear, box-shadow .2s linear;
}
.site-footer .left-side .btn-purchase:hover {
    background-color: #2b2b2b;
    color: #fff;
    box-shadow: 0 4px 15px #2b2b2b;
}
.site-footer .left-side .copyright {
    margin-top: 4em;
    font-size: 14px;
}
.site-footer .left-side .copyright a {
    font-weight: bold;
}
.site-footer .right-side {
    position: relative;
    z-index: 1;
    width: 60%;
    padding: 4em 3em;
    background-color: #4071c1;
    color: #fff;
    display: grid;
}
.site-footer .right-side h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    text-transform: uppercase;
}
.site-footer .right-side .features-list {
    align-self: self-start;
}
.site-footer .right-side .features-list ul {
    column-count: 2;
    column-gap: 40px;
    line-height: 2em;
}


@media screen and (min-width: 881px) {
    .builder-examples > li:nth-child(3n+1) {
        clear: left;
    }
}
@media screen and (max-width: 1150px) {

    .header .header-content .left-side h3 {
        font-size: 26px;
    }

    .header .header-content .left-side { width: 43%; }
    .header .header-content .right-side { width: 50%; }

}
@media screen and (max-width: 880px) {
    .header .header-content .left-side h3 {
        font-size: 30px;
    }
    .builder-examples > li {
        width: 50%;
    }
    .builder-examples > li:nth-child(2n+1) {
        clear: left;
    }

    .mouse { display: none; }

}
@media screen and (max-width: 772px) {

    .header { height: auto; min-height: 500px; }
    .header .header-content {   min-height: 500px; }
    .header .header-nav-items .btn-purchase em,
     .header .decoshape {
        display: none;
    }

    .header .header-content {
        flex-direction: column;
    }

    .header .header-content .right-side,
    .header .header-content .left-side {
        width: 100%;
    }

    .header .header-content .right-side {
        margin: 40px 0;
        order: 1;
    }

    .header .header-content .left-side {
        order: 2;
    }

    .header .header-nav-items > li a {
        color: inherit;
    }
    .header .header-nav-items > li a:not(.btn-purchase)::after {
        background-color: #2b2b2b;
    }
    .mosaic-features > figure,
    .mosaic-features > figure:nth-child(2n) {
        flex-direction: column;
    }
    .mosaic-features > figure .figimage,
    .mosaic-features > figure figcaption {
        width: 100%;
    }
    .mosaic-features > figure figcaption h3 {
        font-size: 24px;
        margin-bottom: 10px;
    }
    .mosaic-features > figure figcaption p {
        font-size: 90%;
    }
    .site-footer .footer-columns .wrapper {
        flex-direction: column-reverse;
    }
    .site-footer .footer-columns::before,
    .site-footer .footer-columns::after {
        display: none;
    }
    .site-footer .right-side,
    .site-footer .left-side {
        width: 100%;
    }
    .site-footer .right-side h3 {
        margin-bottom: 20px;
    }
    .site-footer .right-side h4 {
        display: none;
    }
    .section-title {
        max-width: 100%;
    }

    .builder-examples {
        margin-left: 0;
        margin-right: 0;
    }


}
@media screen and (max-width: 600px) {

    .header .header-nav-items .btn-purchase {
        display: none;
    }

}

@media screen and (max-width: 460px) {
    .header .header-nav .left-logo h1 {
        font-size: 18px;
    }
    .header .header-nav-items > li {
        line-height: 3.5em;
    }
    .header .header-nav-items > li a {
        padding: 15px 10px;
        font-size: 15px;
    }
    .builder-examples > li {
        width: 100%;
    }
    .site-footer .right-side .features-list ul {
        column-count: 1;
    }
}