html {
    overflow-x: hidden;
}

body {
    padding-top: 60px;
    padding-bottom: 30px;
    overflow-x: hidden;
    /* font-family: "Montserrat", Arial, sans-serif !important; */
    /* font-weight: 400 ; */
    /* background-color: #F6F6F6; */
}

.row {
    margin-left:0;
    margin-right:0;
}

/* navbar */

.navbar {
    background-color: #181818;
    background-image: none;
    background-repeat: no-repeat;
    box-shadow: 1px 1px 5px rgba(0,0,0,.5);
}

.navbar-right > li {
    font-size:0.9em;
    margin-right:-1em;
}

.navbar-inverse .navbar-brand {
    color: rgb(198, 196, 196);
}

.navbar-inverse .navbar-nav>li>a:focus, .navbar-inverse .navbar-nav>li>a {
    color: rgb(198, 196, 196);
}

.navbar-inverse .navbar-nav>li>a:focus, .navbar-inverse .navbar-nav>li>a:hover {
    color:#F6F6F6;
}
.navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse {
    max-height:100vh;
}

.navbar-inverse .navbar-toggle {
    border:none;
}

.navbar-toggle.left {
    float:left;
}

.navbar-toggle.right {
    float:right;
}

.navbar-toggle {
    margin-right:0;
}

.navbar-brand.tokeeen img {
    height: 25px;
    margin-top:-2px;
}
.navbar-brand > img {
    display: block;
}

.h-align-between {
    display:flex;
    flex-direction: row;
    justify-content: space-between;
}

.user-toggle {
    color: #a9a9a9;
}

.user-toggle:hover {
    color:white;
}

.user-menu {
    text-align: right;
    background: #1b1b1b;
    background: -moz-linear-gradient(top, #1b1b1b 0%, #181818 100%);
    background: -webkit-linear-gradient(top, #1b1b1b 0%,#181818 100%);
    background: linear-gradient(to bottom, #1b1b1b 0%,#181818 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1b1b1b', endColorstr='#181818',GradientType=0 );
}

.user-menu > li  > a{
    color: rgb(198, 196, 196);
}

.collapse.user-collapse {
    display:none !important;
}

.navbar-collapse.collapse.in {
    display: block !important;
}

.dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover {
    background-color: #1b1b1b;
    color: #05b3c6;
}
.dropdown-menu > li.active-nav-dropdown > a:focus, .dropdown-menu > li.active-nav-dropdown > a:hover {
    background-color: #1b1b1b;
    color: #05b3c6 !important;
}

/* footer */

.footer-row>div>a {
    font-size: .9em;
    color:grey;
    transition:all .5s ease;
}

.footer-row>div>h5 {
    margin-bottom: 0.2em;
}
.footer-row>div>h5>a {
    color: rgb(198, 196, 196);
    transition:all .5s ease;
}

.footer-row> div > h5 > a:hover {
    text-decoration: none;
}

.footer-row {
    margin-bottom:-30px;
    padding-bottom:30px;
}


.footer-row>div>a:hover {
    color:rgb(198,196,196);
    text-decoration: none;
}

.active-nav, .active-nav-dropdown-left-menu {
    color: #F6F6F6 !important;
    border-bottom: 2px solid #05b3c6;
}

.active-nav-dropdown a {
    color:#1b1b1b !important;
    font-weight: bold !important;
    background-color: #05b3c6;
}

.active-nav-dropdown:hover a {
    color:#F6F6F6 !important;
    font-weight: initial;
    background-color: initial;
}

h1 { font-size: 30px; }
h2 { font-size: 24px; }
h3 { font-size: 18px; }
h4 { font-size: 14px; }
h5 { font-size: 12px; }
h6 { font-size: 11px; }

.badge {
    border-radius: 3px;
    color:#181818;
    margin-top: -3px;
}

.badge-success {
    background-color: rgb(16, 199, 16);
}

.badge-error {
    background-color: red;
}

.badge-tokeeen {
    background-color: #05b3c6;
}

.footer-row {
    width:100%;
    background: #1b1b1b;
    color: rgb(198, 196, 196);
    background: -moz-linear-gradient(top, #1b1b1b 0%, #181818 100%);
    background: -webkit-linear-gradient(top, #1b1b1b 0%,#181818 100%);
    background: linear-gradient(to bottom, #1b1b1b 0%,#181818 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1b1b1b', endColorstr='#181818',GradientType=0 );
}

.alert a {
    font-weight: bold;
}

.header-counters-labels {
    font-size:0.8em;
}
.list-group-item-todo {
    cursor: pointer;
}

img {
    border: 0;
    vertical-align: middle;
}
.tokeeen-color {
    color: #05b3c6
}
.checkbox label:after {
    content: '';
    display: table;
    clear: both;
}
.checkbox .cr {
    position: relative;
    display: inline-block;
    border: 1px solid #a9a9a9;
    border-radius: .25em;
    width: 1.3em;
    height: 1.3em;
    float: left;
    margin-right: .5em;
}
.checkbox .cr .cr-icon {
    position: absolute;
    font-size: .8em;
    line-height: 0;
    top: 50%;
    left: 20%;
}

.gi-2x{font-size: 2em;}
.gi-3x{font-size: 3em;}
.gi-4x{font-size: 4em;}
.gi-5x{font-size: 5em;}

.vertical-align {
    display: flex;
    align-items: center;
}
.modal-title > h2 {
    color: white;
    margin:0;
    margin-left:10px;
}
#modal-subscribe .modal-header {
    background-color: #05b3c6;
}

#modal-subscribe .modal-body {
    background-color: #f9f9f9;
}

#newsletter_email_label {
    font-weight: normal;
}

/* INPUT style */
label {
    display: inline;
}

.form-group > label {
    color:grey;
    font-weight:700;
    letter-spacing:.5px;
}

#label_only_highlight {
    color:grey;
    font-weight:500;
}

.input-group-addon {
    border:none;
    background-color: white;
    color: #05b3c6;
    border-color: #05b3c6;
    border-width: 2px 0 2px 2px;
    border-style: solid;
}

.input-group-addon + .form-control {
    border-color: #05b3c6;
    border-width: 2px 2px 2px 1px;
    border-style: solid;
}

.form-control {
    border: 2px solid #05b3c6;
}

.tokeeen-submit {
    background-color: #05b3c6;
    color:white;
    letter-spacing:.5px;
    margin-bottom:10px;
    font-weight: 400;
    border-radius:5px;
    transition:all .5s ease;
    white-space: initial;
    min-height: 50px;
    z-index:10;
}

.tokeeen-submit:hover, .tokeeen-submit:active, .tokeeen-submit:focus {
    background-color: rgb(16, 199, 16);
    color:white;
}

.tokeeen-dismiss {
    background-color: white;
    color:#05b3c6;
    letter-spacing:.5px;
    margin-bottom:10px;
    font-weight: 400;
    border-radius:5px;
    transition:all .5s ease;
    white-space: initial;
    min-height: 40px;
    border: 2px solid #05b3c6;
}

.tokeeen-dismiss:hover, .tokeeen-dismiss:active, .tokeeen-dismiss:focus {
    background-color: red;
    color:white;
    border-color: transparent;
}

/* select style
*  put class .tokeeen-select on form group
*/

.tokeeen-select {
    border: 2px solid #05b3c6;
    border-radius: 3px;
    overflow: hidden;
    background: #fafafa url("../images/dropdown-arrow-15.png") no-repeat 95% 50%;
}

.tokeeen-select:hover {
    animation: arrowBounce 1s ease infinite;
}

@keyframes arrowBounce {
    from {background-position: 95% 50%;}
    50% {background-position: 95% 30%;}
    to {backgroun-position: 95% 50%;}
}
.tokeeen-select select {
    width: 130%;
    border: none;
    box-shadow: none;
    background: transparent;
    background-image: none;
    -webkit-appearance: none;
}

.tokeeen-style select:focus {
    outline: none;
}


/* SECTIONS homepage */

.section {
    height: 100vh;
    min-height: 600px;
    width:200%;
    margin-top:-100px;
    padding-top:90px;
    margin-left:-50%;
    flex-shrink:0;
}

.section-content {
    height: 100vh;
    width:200%;
    margin-left:-50%;
    flex-shrink:0;
}

.section-last {
    height: 80vh;
    width:200%;
    margin-left:-50%;
    flex-shrink:0;
}

.blue-row {
    background-color: #05b3c6;
}

.separator-row {
    height:15vh;
    min-height: 60px;
    max-height: 100px;
}

.black-row {
    background-color: #1b1b1b;
}

.image-header {
    height:30vh;
    background-position: center 15%;
    background-size: cover;
    background-repeat: no-repeat;
}

.losange-container {
    padding-left: 0;
    display: flex;
    justify-content: center;
}

.flyer-container {
    height: 130vh;
}

.flyer-container .homepage-content-row div {
    min-height:800px;
    padding-top: 30px;
}

.tokeeen-home-logo {
    width:14vw;
    min-width:150px;
    max-width:200px;
}

.smileys_home {
    margin-bottom: 20px;
    margin-top: 20px;
}

.homepage-content-narrow-row > div {
    height: 40vh;
}

.homepage-content-row > div {
    height: 70vh;
    margin-top: 9vh;
    min-height:300px;
}

.section-last > div.homepage-content-row > div {
    height: 70vh;
}
.v-align-center {
    display:flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.v-align-around {
    display:flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-around;
}

.v-align-row-center {
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.v-align-testi {
    display:flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-around;
}

/* my habits demo */

.numbered-list {
    display:flex;
    flex-direction: column;
}

.list-item {
    display:flex;
    flex-direction: row;
    align-items: baseline;
    margin-bottom:10px;
}

.circled-numbers {
    background-color: #05b3c6;
    border-radius: 100%;
    color: white;
    min-width:30px;
    min-height:30px;
    display:flex;
    justify-content: center;
    align-items: center;
    margin-right:10px;
}

.carousel {
    width:60%;
    max-width:250px;
}

.carousel-indicators {
    bottom:-40px;
}
.carousel-indicators > li {
    border-color: #05b3c6;
}

.carousel-indicators .active {
    border:none;
    background-color:#05b3c6;
}

.carousel-control {
    color: #05b3c6;
    opacity: 1;
    top:50%;
}

.carousel-control:hover, .carousel-control:focus {
    color:#1b1b1b;
}

.carousel-control.left {
    background-image:none;
    left:-35px;
}

.carousel-control.right {
    background-image:none;
    right:-35px;
}

/* Testimonials */

.card {
    background:white;
    box-shadow: 1px 1px 5px rgba(0,0,0,.1);
    border-radius:10px;
    width:90%;
    height: auto;
    padding:20px 5px 5px 5px;
}

.card-pic {
    border-radius: 100%;
    border: double 4px transparent;
    background-image: linear-gradient(white, white), radial-gradient(circle at top left, #05b3c6, #005F63);
    background-origin: border-box;
    background-clip: content-box, border-box;
    width: 70px;
    margin-top: -55px;
}

.card-text {
    margin-top: 10px;
}


/* triangles */

.triangle {
    border-style: solid;
}

.triangle.top-white {
    border-color: transparent transparent #F6F6F6 transparent;
    border-width: 0px 180px 70px 180px;
    margin-top:-80px;
    transition: all .5s ease;
}

.triangle.bottom-white {
    border-color: #F6F6F6 transparent transparent transparent;
    border-width: 70px 180px 0 180px;
    margin-bottom:-80px;
    transition: all .5s ease;
}

.triangle.bottom-black {
    border-color: #1b1b1b transparent transparent transparent;
    border-width: 70px 180px 0 180px;
    margin-bottom:-80px;
    transition: all .5s ease;
}

.triangle.bottom-blue {
    border-color: #05b3c6 transparent transparent transparent;
    border-width: 70px 180px 0 180px;
    margin-bottom:-80px;
    transition: all .5s ease;
}



/* tokeeen-checkbox
*  put .tokeen-checkbock on outer label
*  and .tokeen-checkmark on a span elem, after the input
*/

.tokeeen-checkbox {
    display: block;
    position: relative;
    padding-left: 25px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

.tokeeen-checkbox input {
    position:absolute;
    opacity:0;
    cursor:pointer;
}

.tokeeen-checkbox label {
    padding-bottom:2px;
}

.tokeeen-checkmark {
    position: absolute;
    top: 2px;
    left: 0;
    height: 15px;
    width: 15px;
    border-radius:3px;
    background-color: #eee;
    border:1px solid #05b3c6;
  }

.tokeeen-checkbox:hover input ~ .tokeeen-checkmark {
    background-color: white;
    border:2px solid #05b3c6;
  }

.tokeeen-checkbox input:checked ~ .tokeeen-checkmark {
    background-color: #05b3c6;
}

.tokeeen-checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.tokeeen-checkbox input:checked ~ .tokeeen-checkmark:after {
    display: block;
}

.tokeeen-checkbox .tokeeen-checkmark:after {
    left: 4px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}


/* responsive */
@media only screen and (max-width : 480px) {
 .losange-up {
     margin-top:-17%;
 }
 .image-header {
     height:25vh;
     background-size: 70%;
 }

 .triangle.top-white {
    border-width: 0px 210px 60px 210px;
 }

 .triangle.bottom-white, .triangle.bottom-black, .triangle.bottom-blue {
    border-width: 60px 210px 0 210px;
 }

 .section {
     height:90vh;
 }

 .separator-row {
     height: 10vh;
 }

 .numbered-list {
     width:60%;
 }

}

@media only screen and (max-width : 768px) {
    .navbar-brand {
        padding-right:5px;
        padding-left: 5px;
    }

    .xs-header-icon {
        padding-left:10px;
        padding-right:10px;
    }

    .section-last > div > div {
        height: auto;
    }

    .xs-text-width {
        width:40%;
    }

    .card {
        width: 50%;
        margin: 0px 20px 0px 20px;
    }
    .card-pic {
        width:50px;
        margin-top:-40px;
    }

    .card-text {
        margin-top: 2px;
    }

    .card-text > p {
        margin-bottom:2px;
    }

    .testi-xs {
        padding-top:30px;
    }

    .slide-arrows:hover {
        cursor: pointer;
    }

    .carousel {
        width:18%;
        z-index: 10;
        min-width:200px;
        padding-top:30px;
    }

     .homepage-content-row > div:nth-child(3) {
        margin-bottom:9vh;
    }

    .xs-half-height {
        height: 40vh !important;
    }

    .homepage-content-row > div {
        margin-top:5vh;
    }

    .under-chevron {
        padding-top:65px;
    }
    .section-last > div.homepage-content-row > div:nth-child(3) {
        height: 35vh;
    }
    .user-menu {
        padding-right: 25px;
    }
    .active-nav-dropdown-left-menu  a{
        color:#1b1b1b !important;
        font-weight: bold !important;
        background-color: #05b3c6;
    }

    .active-nav-dropdown-left-menu:hover a {
        color:#F6F6F6 !important;
        font-weight: initial;
        background-color: initial;
    }
}

@media only screen and (max-height : 550px) {
    .hidden-if-low-height {
        display:none;
    }
}

/* Social connect */

.g-signin2{
    width: 100%;
    margin-top: 10px;
}

.g-signin2 > div{
    margin: 0 auto;
}

[v-cloak] {
    display: none;
}