/** Life By Richkid Page */

body { background-color: #4a4646; }
.life-by-section .container { width: 1260px; padding: 0 50px;max-width:80%; }
.title-logo { fill: #f15a55; }
body:not(.diffColor) #siteheader-navigation-container.logo-text-dark .navbar-brand svg .title-logo { fill: #fff; }
.life-by-section { padding-bottom: 30px; }

#navbar-collapse-main .nav.navbar-nav-sec li a.lifeby { color: #f15a55; }

.page-top { margin-top: 165px; }

.page-top .page-welcome h1 { margin: 0; text-align: center; color: #fff; font-family: 'CeraGRBlack-Richkid'; font-weight: bold; font-size: 460%; line-height: normal; }
.page-top .page-welcome h3 { margin: 0; text-align: center; font-family: 'CeraGRBlack-Richkid'; font-weight: bold; font-size: 185%; color: #f15a55; }

.page-top .page-banner { margin-top: 75px; color: #fff; }
.page-top .page-banner-wrap { position: relative; }
.page-top .page-banner-wrap .banner-image { height: 475px; background-repeat: no-repeat; background-size: cover; background-position: center; }
.page-top .page-banner-wrap .banner-content { position: absolute; top: 50%; left: 10%; max-width: 385px; text-align: left; transform: translateY(-50%); -webkit-transform: translateY(-50%); }
.page-top .page-banner-wrap .banner-content h2 { font-size: 125%; font-family: 'CeraGRMedium-Richkid'; line-height: 1; margin: 0; }
.page-top .page-banner-wrap .banner-content h3 { margin: 45px 0 15px 0;font-size:90%; }
.page-top .page-banner-wrap .banner-content a { display: inline-block; /*border-bottom: 2px solid #fff;*/ line-height: 1;height:34px; }
.page-top .page-banner-wrap .banner-content a.hoverEffect:after         { content: "";  width: 100%; height: 2px; background-color: #fff;  display: block; transition: all 350ms ease-out; -webkit-transition: all 350ms ease-out; }
.page-top .page-banner-wrap .banner-content a > p { display: inline; line-height: 1.25; }
.page-top .page-banner-wrap .banner-content a > i { font-size: 80%; }
.page-top .page-banner-wrap .banner-content .forward-logo svg { width: 295px; }
.page-top .page-banner-wrap .banner-content .forward-logo svg path { fill: #F15A55; }
.page-top .page-banner-wrap .banner-content a.hoverEffect span:before       { width: 100%;right: 0; }
.page-top .page-banner-wrap .banner-content a.hoverEffect:hover span, .page-top .page-banner-wrap .banner-content a.hoverEffect:focus span { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); transform: translateY(-85%); }

.instagrid { background: #c15796; padding-top: 240px; }
.instagrid h2 { text-align: center; font-size: 685%; color:rgba(255, 255, 255, 0.3); font-family: 'CeraGRMedium-Richkid'; direction: ltr; margin: 0 0 75px 0; }
.instagrid .instafeed-item { padding-bottom: 100%; background-position: center; background-size: cover; background-repeat: no-repeat; position: relative; }
.instagrid .instafeed-item .feed-user { position: absolute; left: 20px; top: 20px; }
.instagrid .instafeed-item .feed-user img { width: 50px; height: 50px; border-radius: 50%; float: left; border: solid 2px #ffffff; }
.instagrid .instafeed-item .feed-user .feed-user-aside { float: left; text-align: left; padding-left: 15px; padding-top: 5px; line-height: .75; }
.instagrid .instafeed-item .feed-user .feed-user-aside p { line-height: 1; font-size: 90%; color: #fff; opacity: .9; direction: ltr; }
.instagrid .instafeed-item .feed-user .feed-user-aside span { font-size: 60%; color: #fff; opacity: .9; }
.instagrid .insta-padding { padding: 0; }
.instagrid .insta-padding .row > div { padding-right: 30px; padding-left: 30px; margin-bottom: 60px; }

section.embedStories                { height: 600px; max-width: 1170px; width: 100%; margin: auto; position: relative;margin-top:50px; }
.embedBg                            { height: 780px; display: table; width: 100%; }
.embedBg h2                         { color: #f15a55; display: table-cell; vertical-align: top; width: 40%;font-family: 'CeraGRBlack-Richkid'; font-size: 395%; text-align: left;line-height:1;padding-top: 25vh; }
.embedsocial-stories                { display: table-cell; vertical-align: middle; width: 60%; }
.embedBg h2 span:nth-child(2)       { margin-left: 40px; }


body.diffColor .instagrid { background-color: #fff; }
body.diffColor .instagrid h2 { color: rgba(241, 90, 85, 0.3); }

.switchWrapper.color-switch-dark .colorLabel { color: #fff !important; }
body.diffColor .switchWrapper.color-switch-dark .colorLabel { color: #474747 !important; }

@media (max-width: 1440px) {
    .life-by-section .container { width: 100%; padding: 0 50px; }
    .life-by-section .container.insta-padding { padding: 15px; }
}

@media(max-width: 1200px) {
    .page-top .page-banner-wrap .banner-image { height: 415px; }
    .embedBg h2 {width: 45%;}
}

@media (max-width: 1024px) {
    .page-top { margin-top: 140px; }
    .instagrid h2 { font-size: 650%; }
    .life-by-section .container { width: 100%; padding: 0 15px; }
}

@media (max-width: 1024px) and (orientation:landscape) {    
    .instagrid h2 { font-size: 450%;    margin: 0 0 25px 0; }    
}

@media (max-width: 991px) {
    .instagrid h2 { font-size: 520%; }
    .page-top .page-banner-wrap .banner-image { height: 50vw; }
    .life-by-section .container { padding: 0 30px;max-width:100%; }
    .instagrid .insta-padding .row > div { padding-right: 5px; padding-left: 5px; margin-bottom: 10px; }
    .page-top .page-welcome h1 { font-size: 400%; }
    .embedBg h2                 { font-size: 280%; width: 38%; padding-top: 25vh; }
    .instagrid                  { padding-top: 230px; }
    .instagrid h2               { margin-bottom: 0; }    
}

@media (max-width: 767px) {
    .row { margin: 0; }
    .life-by-section .container { padding: 0 15px; }
    .instagrid h2 { font-size: 14vw; margin: 0; }
    .instagrid .insta-padding { padding: 0; }
    .page-top { margin-top: 115px; }
    .page-top .page-welcome h1 { font-size: 10vw; }
    .page-top .page-welcome h3 { font-size: 5vw; }
    .page-top .page-banner { margin-top: 50px; }
    .page-top .page-banner-wrap .banner-content { max-width: 60vw; }
    .page-top .page-banner-wrap .banner-content h2 { margin: 0; font-size: 4vw; }
    .page-top .page-banner-wrap .banner-content h3 { margin: 15px 0 10px 0; font-size: 100%; line-height: 1; }
    .page-top .page-banner-wrap .banner-content .forward-logo svg { width: 42vw; }
    .page-top .page-banner-wrap .banner-content a { font-size: 100%; }
    .instagrid .instafeed-item .feed-user img { width: 6vw; height: 6vw; }
    .instagrid .instafeed-item .feed-user .feed-user-aside p { font-size: 3vw; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
    .instagrid .instafeed-item .feed-user { position: absolute; left: 10px; top: 10px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
    .instagrid .instafeed-item .feed-user .feed-user-aside { padding-left: 8px; width: 18vw; }
    .instagrid .instafeed-item .feed-user .feed-user-aside span { font-size: 2vw; display: block; }
    .instagrid .instafeed-item .feed-user .feed-user-aside { padding-top: 3px; }
    .life-by-section .container.insta-padding { padding: 5px; }
    .embedBg                                { display: block; width: 100%; }
    .embedBg h2                             { display: block; width: 100%;text-align: center;padding-top: 0vh; }
    .embedsocial-stories                    { display: block; width: 100%; }
    .embedBg h2 span                        { width: 100%;  display: block; }
    .instagrid                              { padding-top:60px; margin-top: 0px; }
    .embedBg h2 span:first-child            { margin-right: 17vw; }
    .page-top .page-banner-wrap .banner-image   { height:90vw; }
    section.embedStories { height: 560px; }
    .page-top .page-banner-wrap .banner-content a  { height:30px; }
}

@media (max-width: 767px) and (min-width:370px) {
    .instagrid { padding-top: 140px; }
}

@media (max-width: 320px) {
    .life-by-section .container { padding: 0 5px; }
    .instagrid .instafeed-item .feed-user .feed-user-aside { padding-left: 5px; width: 17vw; }
    .instagrid .instafeed-item .feed-user .feed-user-aside { padding-top: 1px; }
    .instagrid .instafeed-item .feed-user { top: 5px; left: 5px; }
    .instagrid .insta-padding .row > div { padding-right: 2px; padding-left: 2px; margin-bottom: 4px; }
    .instagrid .instafeed-item .feed-user .feed-user-aside span { margin-top: 2px; }
    .instagrid { margin-top: -90px; }
    
}

@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
    html { transform: rotate(-90deg); transform-origin: left top; width: 100vh; min-height: 100vw; overflow-x: hidden; position: absolute; top: 100%; left: 0; }
}