/* =========================================
    Default Theme
    -------------------------------------
    Fonts: Raleway & Open Sans
    -------------------------------------
    Colors:
        skyBlue:         #60A2FF
        Grey:                #212226
        White Smoke:         #f4f4f4
        White:               #fff
        Black:               #000   
========================================== */


/* =========================================
                Html, Body
========================================= */

html,
body {
    height: 100%;
    font-size: 12px;
}

body {
    color: #212226;
}

h1,
h2,
h3,
h4,
h5,
h6,
p{
    font-family: "Poppins", sans-serif;
}

section {
    background: #fff;
    overflow: hidden;
}

/* =========================================
            colors
========================================= */

.highlight-color {
    color: #60A2FF;
}

.highlight-background-color {
    background-color: #60A2FF;
}


/* =========================================
            Borders for Development
========================================= */
/*
div {border: 1px dashed deepskyblue;}
section {border: 1px dashed aquamarine;}
h1, h2, h3, h4, h5, h6, p {border: 1px dashed palevioletred;}
ul, li {border: 1px dashed yellowgreen;}
a {border: 1px dashed salmon;}
img, video {border: 1px dashed slateblue;} 
*/


/* =========================================
                Section
========================================= */
.section-header {
    height: 100px;
    margin-bottom: 50px;
}

.section-header h5 {
    font-family: 'Fredoka One', sans-serif;
    font-weight: 200;
    font-size: 3rem;
}

.section-header h5 hr {
    display: block;
    width: 60px;
    height: 3px;
    background-color: #60A2FF;
    text-align: center;
    margin: 20px auto;
    border: none;
    opacity: 1;
}

/* =========================================
                Home
========================================= */

#home {
    height: 80%;
    background-color: #60A2FF;
    padding: 0;
}


#tagline {
    font-family: 'Pacifico', cursive;
    font-size: 4rem;
    color: white;
}

.landing-section {
    padding-top: 120px;
    padding-bottom: 120px;
}

#home #ios-app-download {
    height: 50px;
    width: auto;
    object-fit: cover;
    max-width: none;
}

#home #google-app-download {
    height: 50px;
    width: auto;
    object-fit: cover;
    max-width: none;
}


.primary-button {
    background-color: .white;
    color: #60A2FF;
    border-style: none;
    border-radius: 25px;
    height: 50px;
    width: 150px;
    font-size: 1.5rem;
    font-family: 'Fredoka One', sans-serif;
}

/* =========================================
                Video Gallery
========================================= */
#video-gallery {
    background-color: white;
}

#video-gallery .non-mobile .row {
    height: 550px;
}

.value-proposition {
    background-color: white;
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;  
}

.value-proposition h5 {
    font-family: 'Fredoka One', sans-serif;
    font-size: 2rem;
    font-weight: 300;
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;   
}

.value-proposition:hover h5 {
    font-size: 2.5rem;
    color: white;
}

.value-proposition:hover {
    background-color: #60A2FF;
}


/* =========================================
                Video
========================================= */

.video {
    border-radius: 5px;
    -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
    background-color: white;
}

.video video {
    object-fit: cover;
}

.video-overlay {
    background-color: rgba(33, 34, 38, .4);
/*    opacity: 0;*/
    -webkit-transition: all 300ms linear;
    transition: all 300ms linear;
}

.video:hover .video-overlay {
    opacity: 1
}

.video-info h5, h6, i {
    color: white
}

.video-info h5, h6 {
    font-family: 'Poppins', cursive;
    font-weight: 100
}

.video-info h5 {
    font-size: 1.6rem;
}

.video-info h6 {
    font-size: 1.4rem;
}

.video-info i.fa-play, i.fa-pause {
    top: 50%;
    left: 50%;
    opacity: 1!important;
    font-size: 6rem;
}

.video-info i.fa-volume-off, i.fa-volume-up {
    top: 85%;
    left: 85%;
    font-size: 2.5rem;
}

/* =========================================
                Topics
========================================= */
#topics {
    background-color: #60A2FF;
}

.topics-row {
    height: 300px;
    width: auto;
}

.topics-row .video .video-overlay h5 {
    font-family: 'Fredoka One', sans-serif;
    font-size: 3rem;
}

.topics-row .video .video-overlay {
    opacity: 1;
}

/* =========================================
                Alter ego
========================================= */


/* =========================================
                Work With Us
========================================= */
#work-with-us h3 {
    font-family: 'Fredoka One', sans-serif;
    font-size: 2rem;
    padding-top: 20px;
}


/* =========================================
                Footer
========================================= */
footer {
    background-color: #60A2FF;
    color: white;
}

footer a, footer a:hover {
    color: white;
}

footer h5 {
    font-size: 2rem;
    font-family: 'Fredoka One', sans-serif;
}

/* =========================================
                Device
========================================= */

.mobile {
    display: none;
}

.non-mobile {
    display: block;
}