*{
    font-family: 'Open Sans', sans-serif;
}



body {
padding: 0;
margin: 0;
}

.container {
    max-width: 350px;
    min-height: 645px;
    overflow: hidden;
    margin: 30px auto 0;
    box-shadow: 0 0 40px #a0a0a0;
    position: relative;
    font-family: 'Open Sans', sans-serif;
    padding-bottom: 50px;
}

.navbar {
    background: #B97CFC;
    color: #fff;
    padding: 1em 0.5em;
}
.navbar a {
    color: #fff;
    text-decoration: none;
    font-size: 1.3em;
    float: left;
}
.navbar span {
    font-size: 1.1em;
    font-weight: 300;
    display: block;
    text-align: center;
}

.profile-pic {
    width: 30px;
    height: 30px;
    display: inline-block;
    float: right;
    position: relative;
}
.profile-pic img {
    width: 100%;
    border-radius: 50%;
}

.notification {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    top: 2px;
    right: 2px;
    background: #F93B69;
}

.header {
    /*background: url(https://unsplash.it/1080/720?image=1044);*/
    background-size: cover;
    color: #fff;
    position: relative;
}

.color-overlay {
    padding: 3em 2em;
    box-sizing: border-box;
    background: rgba(123, 94, 155, 0.5);
}

.actionbutton {    
    background: #000;
    width: 42px;
    height: 42px;
    font-size: 2em;
    font-weight: 300;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    box-shadow: 0px 3px 8px #202020;
    -o-transition: 0.5s ease all;
    -webkit-transition: 0.5s ease all;
    -moz-transition: 0.5s ease all;
    transition: 0.5s ease all;
    cursor: pointer;
}

.day-number {
    font-size: 4em;
    display: inline-block;
    margin-right: 15px;
}

.date-right {
    display: inline-block;
}

.day-name {
    font-size: 1.6em;
}

.month {
    text-transform: uppercase;
    font-weight: 300;
    font-size: 0.6em;
    letter-spacing: 2px;
    margin-top: 2px;
}

.timeline ul {
    padding: 1em 0 0 0em;
    margin: 0;
    list-style: none;
    position: relative;
}
.timeline ul::before {
    display: none;
    content: '';
    width: 1px;
    background-color: #d9d9d9;
    position: absolute;
    top: 40px;
    bottom: 0;
    left: 4.84em;
    z-index: 1;
}
.timeline ul li.active{
    //background:#ebebeb; 
}
.timeline li div {
    display: inline-block;
    margin: 1em 0;
    vertical-align: top;
}
.timeline .bullet {
    position: relative;
    z-index: 9;
    width: 1.8em;
    height: 1.8em;
    box-sizing: border-box;
    border-radius: 11px;
    background: #fff;
    z-index: 1;
    margin-right: 1em;
    -o-transition: 0.5s ease all;
    -webkit-transition: 0.5s ease all;
    -moz-transition: 0.5s ease all;
    transition: 0.5s ease all;
    margin-top: 0;
    background-repeat: no-repeat; 
    background-position: center; 
    background-size: 14px;
}
.timeline .bullet:after{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    left: 0; top: 0;
    background-image: url(../images/yellow-squidge.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index:9;
}
.timeline .bullet span{
    display: block;
    position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 999;
    background-size: 13px;
    background-repeat: no-repeat;
    background-position: center
}
.timeline .bullet.yellow.active:after {
    background-image: url(../images/yellow-squidge_active.png)
}
.timeline .bullet.brown:after {
    background-image: url(../images/grey-sqiudge.png);
}
.timeline .bullet.brown.active:after {
    background-image: url(../images/grey-sqiudge_active.png)
}
.timeline .bullet.blue:after {
    background-image: url(../images/blue-squidge.png)
}
.timeline .bullet.blue.active:after{
    background-image: url(../images/blue-squidge_active.png)
}
.timeline .bullet.pink:after {
    background-image: url(../images/pink-squidge.png)
}
.timeline .bullet.pink.active:after{
    background-image: url(../images/pink-squidge_active.png)
}
.timeline .time {
    width: 16%;
    padding-right: 10px;
    font-size: 0.75em;
    padding-top: 0.25em;
    text-align: right;
    color: #c5c3c3;
    font-weight: 300;
}
.timeline .desc {
    margin-top: 4px;
    width: 80%;
    position: relative;
}
.timeline .desc .like_button {position: absolute;right: 0;top: 0;display: block;width: 28px;height: 20px;background-image: url(../images/heart.png);background-size: 18px;background-repeat: no-repeat;background-position: right;z-index: 9999999999 !important;}
.timeline .desc .like_button.active{background-image: url(../images/heart-red.png);}
.timeline .desc .like_button img{display: block;}
.timeline .desc .side_arrow {position: absolute; right: 30px; top: 5px; transition: 0.4s ease all;-moz-transition: 0.4s ease all;-o-transition: 0.4s ease all;-webkit-transition: 0.4s ease all;}
.timeline .desc .side_arrow img{-o-transition: 0.5s ease all; -webkit-transition: 0.5s ease all; -moz-transition: 0.5s ease all; transition: 0.5s ease all;}
.timeline .desc .side_arrow.rotate img{-o-transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); transform: rotate(0deg);}
.timeline .desc .side_arrow img{-o-transform: rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); transform: rotate(90deg);}
.timeline .desc .side_arrow img{vertical-align: top;}
.timeline h3 {font-size: 16px;font-weight: 600;margin: 0 0 6px 0;padding-right: 48px;}
.timeline h4 {
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    color: #808080;
}
.timeline .people img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.timeline { position: relative; z-index: 1;}

.credits, .video {
    position: absolute;
    bottom: 10px;
    color: #808080;
    font-size: 100%;
    text-decoration: underline;
}

.credits {
    left: 10px;
}

.video {
    right: 10px;
}


/* Clear */
.clear {clear:both; display:block; overflow:hidden; visibility:hidden; width:0; height:0;}
.cf:after,.cf:before{display: table;content: ''}
.cf:after{clear: both;}

/* Filter */
.filter_blog a{display: inline-block; vertical-align: top; width: 25%; float:left; height: 69px; background: #000; text-align: center; overflow: hidden}
.filter_blog a img{width: 100%; max-height: 100%; display: block;}
.bottom_menu{position: absolute; bottom: 20px;z-index: 99999;right: 30px;}
.bottom_menu .actionbutton{border: 1px solid #fff;}
/*.bottom_menu.active .actionbutton{ transform: rotate(90deg);}*/
.bottom_menu ul {position: absolute; right: 6px; bottom: 90%; opacity: 0; visibility: hidden; transition: 0.4s ease all; cursor: pointer;}
.bottom_menu.active ul {bottom: 100%; opacity: 1; visibility: visible;}
.bottom_menu ul li{list-style: none; width: 150px; height: 30px; background: none; margin-bottom: 10px; text-align: right; line-height: 30px; font-size: 12px; color: #000; position: relative;}
.bottom_menu ul li.active{color: #fff}
.bottom_menu ul li i {
 
    background: #787579!important;
    color: #000;
    font-size: 16px!important;
}
/* .bottom_menu ul li.active em{border: 3px solid #000 !important;} border around filter circles when clicked*/
.bottom_menu ul li.active.clear_all em{border-color: transparent !important}
.bottom_menu ul li:last-child{margin-bottom: 0;}
/*.bottom_menu ul li[data-filter="all"] em{background: #9b9b9b;}*/
.bottom_menu ul li[data-filter="food"] em{background: #9b9b9b;}
.bottom_menu ul li[data-filter="activity"] em{background: #ffcd67;}
.bottom_menu ul li[data-filter="plans"] em{background: #63cae1;}
.bottom_menu ul li[data-filter="events"] em{background: #ef4d89;}
.bottom_menu ul li em{display: inline-block; width: 26px; height: 26px; border-radius: 50%;background: #000; vertical-align: middle; border: 3px solid transparent}
.bottom_menu ul li.clear_all em{text-align: center;font-size: 30px;font-style: normal;line-height: 32px; background: none; color: #000}
.bottom_menu ul li i{display: inline-block; vertical-align: middle; font-style: normal; margin-right: 10px; line-height: 30px; padding:0 10px; background: #000; color: #fff;}
.timeline ul li:hover{cursor: pointer}
.timeline ul li h4{padding-top: 5px; color: #c5c3c3}
.timeline ul li img{display: inline-block; vertical-align: middle; margin-right: 5px;}
.timeline ul li .bullet.active{ border-color: #4d4d52;}
/*.timeline ul li .bullet:after{ position: absolute; content: ''; width: calc(100% + 10px); height: calc(100% + 10px); left: -5px; top: -5px; border-radius: 50%; background: rgba(157, 230, 214, 0.77); opacity: 0; visibility: hidden; -o-transition: 0.5s ease all; -webkit-transition: 0.5s ease all; -moz-transition: 0.5s ease all; transition: 0.5s ease all;}*/
.timeline ul li.active .bullet:after{ opacity: 1; visibility: visible;}
.header h2{ color: #000; font-weight: 500; font-size: 20px; padding-left: 1em; padding-top: 40px; margin: 0;}
.bottom_tab{position: absolute; right: 0; left: 00px;bottom: 0; height: 45px; background: #000;display: none}
.bottom_tab ul{margin: 0;}
.bottom_tab ul li {list-style: none;width: 33.33%; float: left; color: #fff; line-height: 45px; font-weight: 300;}
.bottom_tab ul li a{display: inline-block; color: #fff; text-decoration: none; font-size: 14px; border-bottom: 1px solid transparent; line-height: 25px; min-width: 40px; padding:0 12px; text-align: center;}
.bottom_tab ul li.active a{ border-bottom-color:#ff0000 }

.navbar {text-align: center; padding: 4px 0; background: #fff;}
.navbar .brand{width: 65px; display: inline-block; float: none}
.navbar .brand img{max-width: 100%; max-height: 100%;}
.top_menu{ background: #f0f0f0; height: 45px; border-bottom: 1px solid #c8c2c2; box-shadow: 0px 3px 6px -3px rgba(0,0,0,0.2); padding:0 10px 0 15px;}
.top_menu .left_sec {float: left;}
.top_menu .left_sec h2{margin: 0; font-size: 17px; font-weight: 600; line-height: 43px; }
.top_menu .right_sec {float: right; padding-top: 11px;}
.top_menu .right_sec a{display: inline-block; vertical-align: middle; margin-left: 8px;}
.header{padding-top: 10px; padding-left: 25px;}
.header h2{position: relative; padding: 0;}
.header h2:after{ position: absolute;content: '';width: 0;height: 0;border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 7px solid #000; left: -15px; top: 5px;}
.header h2 label{ color: #787579; font-weight: 300; font-size: 16px;}
.header h2 label span{font-weight: 600; font-size: 20px;}
.timeline ul li {padding-left: 21px; position: relative;}
.timeline ul li:after{position: absolute; content: ''; width: 8px; height: 100%; left: 31px; top: 0; background-color: #9b9b9b;transition: 0.4s ease all;-moz-transition: 0.4s ease all;-webkit-transition: 0.4s ease all;-o-transition: 0.4s ease all;}
.timeline ul li.active_after:after{height: 0%}
.timeline ul li[data-select="events"]:after{background: #ef4d89;}
.timeline ul li[data-select="activity"]:after{background: #ffcd67;}
.timeline ul li[data-select="plans"]:after{background: #63cae1;}
.bottom_desc{ border: 1px solid #979797; padding: 10px; font-size: 13px; margin-top: 0 !important; margin-left: -7px !important; margin-right: 15px !important; border-radius: 7px;}


.bottom_desk_pink{padding:0 25px 25px;margin-top: 0 !important;margin-left: 3px !important;padding-left: 0px;border-radius: 7px;position: relative;}
.bottom_desk_pink .inner_border{border: 1px solid #ccc; margin: 0; overflow: hidden; border-radius: 10px;}
.bottom_desk_pink .inner_detail{padding-left: 10px; padding-right: 10px; margin: 0;}
.bottom_desk_pink .pink_curve{position: absolute;z-index: 1}
.bottom_desk_pink .pink_curve.t_l{left: -13px;top: -8px;}
.bottom_desk_pink .pink_curve.t_r{right: 4px;top:-8px}
.bottom_desk_pink .pink_curve.b_l{bottom: 0;left: -13px;}
.bottom_desk_pink .pink_curve.b_r{bottom: 0;right: 4px;}

.bottom_desk_pink .img_col {margin-top: -16px;}
.bottom_desk_pink .img_col img{max-width: 100%; display: block;}
.bottom_desk_pink h3{font-size: 25px;}
.bottom_desk_pink h5{font-size:18px;font-weight: bold;color: #000;    margin-bottom: 0px;}
.bottom_desk_pink p{font-size: 20px}

.btn{display:block !important;text-align: center;  margin-top: 35PX !important}
.btn1{color: #fff;    font-size: 15px;padding: 12px 40px;border-radius: 13px;text-decoration: none;}
.btn1.accept_pink{background-color: #ef4d89}
.btn1.accept_gray{background-color: #9b9b9b}
.btn1.accept_blue{background-color: #63cae1}
.btn1.accept_yellow{background-color: #fec107}




form{text-align: center;}
.check_plan input[type="checkbox"]{opacity: 0; visibility: hidden; position: absolute;}
.check_plan label {position: relative;padding-bottom: 22px;background-image: url(../images/ch.png);background-repeat: no-repeat;background-position: bottom center;background-size: 20px;font-size: 18px;color: #000;line-height: 24px;font-weight: bold;width: 25px;display: inline-block;text-align: center;margin-right: 8px}
.check_plan label.active{background-image: url(../images/ch1.png);}
.check_plan label.last{margin-right: 0px}

/*-- female your self --*/
.progress_div{list-style: none;margin-top: 25px;text-align: center;padding-left: 0px}
.progress_div li{width: 28px;height: 28px;display: inline-block;vertical-align: top;border-radius: 10px;background-color: #f2f0f3;margin-right: 5%;}
.progress_div li:nth-child(6){margin-right: 0px}
.progress_div .pink{background-color: #ef4d89}
.progress_div .blue{background-color: #63cae1}
.progress_div .gray{background-color: #9b9b9b}
.progress_div .yellow{background-color: #fec10a}

.back{position: absolute;bottom:52px;z-index: 99999;right: 20px;}
.prev{position: absolute;bottom:52px;z-index: 99999;left: 20px;}


.information_bf{padding: 0px 47px}
.information_bf h1{font-size:1.13em;margin: 32px 0px 30px 0px;font-weight: 400;}
.information_bf h1 span{color: #fec107}
.information_bf h4{font-size: 13px;line-height: 17px;font-weight: 400;}
.information_bf h5{font-weight: 400;}
.information_bf form{text-align: left;    margin-top: 30px;}
.information_bf input[type="text"]{width: 100%;border-color: transparent;border-bottom: 1px solid #979797;  outline: none;}
.information_bf input[type="text"]:focus{border-bottom: 1px solid #000 !important}
.information_bf .bf{position: relative;text-align: center;margin-top: 30px;}
.information_bf .bf input[type="radio"]{position: absolute;opacity: 0;visibility: hidden}
.information_bf .bf label{position: relative;width: 100px;height: 100px;border-radius: 30px;border: 1px solid #f2f0f3;display: inline-block;vertical-align: top;background-repeat: no-repeat;background-position: center}
.information_bf .bf label.active{background-color: #ef4d89;border-color: #ef4d89}
.information_bf .bf label.boy{margin-right: 35px;background-image: url(../images/boy.png)}
.information_bf .bf label.girl{background-image: url(../images/girl.png)}
.information_bf .bf label.boy.active{background-image: url(../images/boy_w.png)}
.information_bf .bf label.girl.active{background-image: url(../images/girl_w.png)}

.blog{}
.blog .col{display: inline-block;vertical-align: top;margin-right:8%;text-align: center;    margin-bottom: 15px;}
.blog .col span{width: 113px;height: 113px;border-radius: 30px;border: 1px solid #f2f0f3;display: inline-block;vertical-align: top;background-repeat: no-repeat;background-position: center;transition: 0.4s ease all;-o-transition: 0.4s ease all;-moz-transition: 0.4s ease all;-webkit-transition: 0.4s ease all;}
.blog .col span:hover{background-color: #63cae1}
.blog .col:nth-child(2),.blog .col:nth-child(4){margin-right: 0px}
.blog .col h5{ margin-top: 10px;}
.blog .col .c1{background-image: url(../images/c1.png)}
.blog .col .c1:hover{}
.blog .col .c2{background-image: url(../images/c3.png)}
.blog .col .c2:hover{}
.blog .col .c3{background-image: url(../images/c2.png)}
.blog .col .c3:hover{}
.blog .col .c4{background-image: url(../images/c4.png)}
.blog .col .c4:hover{}

.blog1{}
.blog1 .col{display: inline-block;vertical-align: top;margin-right:2%;text-align: center;    margin-bottom: 15px;}
.blog1 .col span{width: 77px;height: 77px;border-radius: 30px;border: 1px solid #f2f0f3;display: inline-block;vertical-align: top;background-repeat: no-repeat;background-position: center;transition: 0.4s ease all;-o-transition: 0.4s ease all;-moz-transition: 0.4s ease all;-webkit-transition: 0.4s ease all;background-color: #63cae1}
.blog1 .col span:hover{}
.blog1 .col:nth-child(3),.blog1 .col:nth-child(6){margin-right: 0px}
.blog1 .col h5{ margin-top: 10px;}
.blog1 .col .c1{background-image: url(../images/d1.png)}
.blog1 .col .c1:hover{}
.blog1 .col .c2{background-image: url(../images/d3.png)}
.blog1 .col .c2:hover{}
.blog1 .col .c3{background-image: url(../images/d2.png)}
.blog1 .col .c3:hover{}
.blog1 .col .c4{background-image: url(../images/d4.png)}
.blog1 .col .c4:hover{}
.blog1 .col .c5{background-image: url(../images/d5.png)}
.blog1 .col .c5:hover{}
.blog1 .col .c6{background-image: url(../images/d6.png)}
.blog1 .col .c6:hover{}


.blog2{}
.blog2 h6{text-align: center;font-size: 13px;font-weight: 400}
.blog2 .col span{background-color: #fff}
.blog1 .col span:hover{background-color: #ef4d89}
.blog2 .col .c1{background-image: url(../images/i1.png)}
.blog2 .col .c1:hover{background-image: url(../images/i11.png)}
.blog2 .col .c2{background-image: url(../images/i2.png)}
.blog2 .col .c2:hover{background-image: url(../images/i22.png)}
.blog2 .col .c3{background-image: url(../images/i3.png)}
.blog2 .col .c3:hover{background-image: url(../images/i33.png)}
.blog2 .col .c4{background-image: url(../images/i4.png)}
.blog2 .col .c4:hover{background-image: url(../images/i44.png)}
.blog2 .col .c5{background-image: url(../images/i5.png)}
.blog2 .col .c5:hover{background-image: url(../images/i55.png)}
.blog2 .col .c6{background-image: url(../images/i6.png)}
.blog2 .col .c6:hover{background-image: url(../images/i66.png)}

.icon{text-align: center;}
.information_bf h5 {font-weight: 400;margin-bottom: 5px;margin-top: 20px;}
.icon .col{width: 50px;height: 50px;border-radius:13px;border: 1px solid #f2f0f3;display: inline-block;vertical-align: top;background-repeat: no-repeat;background-position: center;transition: 0.4s ease all;-o-transition: 0.4s ease all;-moz-transition: 0.4s ease all;-webkit-transition: 0.4s ease all;display: inline-block;vertical-align: top;margin-right:5%;text-align: center;background-image: url(../images/fb.png)}
.icon .col+.col{background-image: url(../images/gmail.png)}
.thanks input[type="text"]{height: 30px;margin-top: 15px;}
.thanks h6{margin-top: 7px;}
.thanks ::-webkit-input-placeholder{ color: #e9e9e9;}
.thanks :-moz-placeholder{ color: #e9e9e9;}
.thanks ::-moz-placeholder{ color: #e9e9e9;}
.thanks :-ms-input-placeholder{ color: #e9e9e9;}
.thanks ::-ms-input-placeholder{ color: #e9e9e9;}
.thanks :placeholder-shown{ color: #e9e9e9;}
.bottom{position: absolute; bottom: 0; left: 0;}



@media (max-width:767px){
    :root{
        -webkit-tap-highlight-color: transparent;
    }
    .container{box-shadow: none; max-width: none; margin-top: 0;}
    .bottom{position: fixed; bottom: 0; left: 0;}
    /*.credits, .video{position: relative; bottom: auto; left: auto; padding-bottom: 10px;}
    .credits{padding-left: 15px;}
    .video{float: right; padding-right: 15px;}*/
}


.headericon {
    margin-right:6px;
}