/* ----------------------------------- */
/*

- Thank you for purchasing Twist - App Landing Page Template from hBeThemes.
- You can edit the colours and images of the page below, comments have been included. Open the "readme.pdf" file for more guidance.
- It's recommended that you leave the names of the div's (.name or #name) as they are, changing them will disrupt the layout and responsive design.
- You do not have to edit any colours if you are happy with them in their current state.

/*
/* ----------------------------------- */








/*------------------------------------------------------------------

[ Table of Contents ]

1. Colour Scheme
    1.1 Primary background colour
    1.2 Secondary background colour
    1.3 White text colour
    1.4 Blue text colour
    1.5 Purple text colour

2. Logo

3. Backgrounds and Image
    3.1 Header background
    3.2 Video background

4. Reset

5. Body
    5.1 Body
    5.2 HTML
    5.3 Container
    5.4 Scrollbar
    5.5 Section container

6. Text
    6.1 h1
    6.2 h2
    6.3 h3
    6.4 h4
    6.5 h5
    6.6 p
    6.7 Limited h

7. Buttons and Anchors
    7.1 Anchor
    7.2 Overlay
    7.3 Button
    7.4 Button mask

8. Forms and Inputs
    8.1 Reset
    8.2 Input
    8.3 Textarea
    9.4 Placeholder

9. Layout

10. Fade In Animation

11. Smooth animation

12. Header
    12.1 Header
    12.2 Navbar
    12.3 Navbar anchors
    12.4 Navbar get button
    12.5 Header title
    12.6 Header typewriter text
    12.7 Header paragraph
    12.8 Header about button
    12.9 Header subscribe container
    12.10 Header filter

13. Overview strip
    13.1 Overview strip
    13.2 Overview strip feature
    13.3 Overview strip icon
    13.4 Overview strip heading
    13.5 Overview strip paragraph

14. Overview
    14.1 Overview mockup1
    14.2 Overview split container
    14.3 Overview left container
    14.4 Overview right container
    14.5 Overview mockup2

15. Fetaures
    15.1 Features container
    15.2 Feature
    15.3 Feature numbr
    15.4 Feature heading
    15.5 Feature button

16. Video
    16.1 Video container
    16.2 Video filter
    16.3 Video icon
    16.4 Video iframe

17. Contact
    17.1 Contact form

18. Download
    18.1 Download button
    18.2 Apple button
    18.3 Google Play button
    18.4 Windows button

19. Reviews
    19.1 Review container
    19.2 Testimonial

20. Popup
    20.1 Popup
    20.2 Popup container
    20.3 Popup scrollbar
    20.4 Popup close button

------------------------------------------------------------------*/








/* 1 */
/* ----------------------------------- */
/* ---------- Colour Scheme ---------- */
/* ----------------------------------- */

/* 1.1 */
.primary-background-colour {background-color: #3A1359;}
/* This is the primary background colour, it's currently purple */

/* 1.2 */
.secondary-background-colour {background-color: #5a0000;}
/* This is the secondary background colour, it's currently blue */

/* 1.3 */
.white-text-colour {color: #FFF;}
/* This is responsible for turning text white */

/* 1.4 */
.blue-text-colour {color: #1187ED;}
/* This is responsible for turning text white */

/* 1.5 */
.purple-text-colour {color: #470E75;}







/* 2 */
/* ----------------------------------- */
/* -------------- Logo --------------- */
/* ----------------------------------- */

#header-logo {
    display: block;
    float: left;
    margin: 10px 0 0 0;
    height: 28px; /* Change the height of your logo in pixels [px] */
    width: 90px; /* Change the width of your logo in pixels [px], it's recommended you keep it at 90px or below */
}








/* 3 */
/* ----------------------------------- */
/* ----- Backgrounds and Images ------ */
/* ----------------------------------- */

/* 3.1 */
#header-background {
    background-image: url('../images/image-placeholder.png'); /* Change the URL to direct to your background image */
}
/* This background is responsible for the top section (header) of the template */


/* 3.2 */
#video-background {
    background-image: url('../images/image-placeholder.png'); /* Change the URL to direct to your background image */
}
/* This background is responsible for the video background image */








/* ----------------------------------- */
/* ------------ Other CSS ------------ */
/* ----------------------------------- */
/* Do not edit below here unless you know what you're doing */

/* 4 */
/* - Reset - */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:top}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}








/* 5 */
/* - Main Body - */

/* 5.1 */
body {
    background-color: #FFF;
    color: #FFF;
    font-family: 'Open Sans', sans-serif; /* If you have changed font change font family here. */
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    height: 100%;
    width: 100%;
}
* {-webkit-overflow-scrolling: touch;}

/* 5.2 */
html {
    height: 100%;
}

/* 5.3 */
.container {
    box-sizing: border-box;
    display: block;
    margin: 0 auto;
    max-width: 1170px;
    position: relative;
    width: 100%;
}

/* 5.4 */
::-webkit-scrollbar {
    background: #EDEDED;
    border-radius: 0;
    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
    width: 10px;
}
::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.24);
    border-radius: 0;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.26);
    border-radius: 0;
}
::-webkit-scrollbar-thumb:active {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 0;
}

/* 5.5 */
.section-container {
    border-bottom: 1px solid #CCC;
    display: block;
    height: auto;
    margin: 0;
    padding: 100px 0;
    width: 100%;
}








/* 6 */
/* - Text - */

/* 6.1 */
h1 {
    font-size: 36px;
    font-weight: 500;
    margin-bottom: 20px;
}

/* 6.2 */
h2 {
    font-size: 28px;
    font-weight: 500;
    margin-bottom: 28px;
}

/* 6.3 */
h3 {
    font-size: 22px;
    font-weight: 500;
    margin-bottom: 28px;
}

/* 6.4 */
h4 {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 28px;
}

/* 6.5 */
h5 {
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 12px;
}

/* 6.6 */
p {
    font-size: 14px;
    line-height: 22px;
}

/* 7.6 */
.limited-h {
    line-height: 36px;
    margin: 0 auto 28px auto;
    width: 700px;
}








/* 7 */
/* Buttons and Anchors */

/* 7.1 */
a {
    color: inherit;
    text-decoration: underline;
}

/* 7.2 */
.overlay {
    color: inherit;
    text-decoration: none;
}
.overlay:hover {
    color: inherit;
}

/* 7.3 */
.btn {
    border: none;
    border-radius: 2px;
    color: #FFF;
    display: inline-block;
    font-size: 15px;
    height: 52px;
    line-height: 52px;
    overflow: hidden;
    outline: none;
    padding: 0 28px;
    position: relative;
    text-decoration: none;
    width: auto;
}
.btn:hover .btn-mask {
    background: rgba(0, 0, 0, 0.12);
    cursor: pointer;
    height: 100%;
}
.btn-100 {width: 100%;}

/* 7.4 */
.btn-mask {
    background: rgba(0, 0, 0, 0.12);
    bottom: 0;
    height: 0.1px;
    left: 0;
    position: absolute;
    right: 0;
    width: auto;
}

/* 7.5 */
.btn2 {
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 2px;
    color: #FFF;
    display: inline-block;
    font-size: 15px;
    height: 50px;
    line-height: 50px;
    padding: 0 22px;
    text-align: center;
    text-decoration: none;
    width: auto;
}
.btn2:hover {
    border: 1px solid #1187ED;
    background-color: #1187ED;
}







/* 8 */
/* Forms and Inputs */

/* 8.1 */
input, textarea, select, button {outline:0; background-color:transparent; border:0; border-radius:0; margin:0; padding:0; font-family: 'Open Sans', sans-serif;  font: 13px 'Open Sans', sans-serif; -moz-appearance:none;}

/* 8.2 */
input {
    background-color: #FFF;
    border: 1px solid #D6D6D6;
    box-sizing: border-box;
    display: block;
    margin-bottom: 20px;
    padding: 16px 18px;
    width: 100%;
}

/* 8.3 */
textarea {
    border: 1px solid #D6D6D6;
    box-sizing: border-box;
    display: block;
    height: 150px;
    margin-bottom: 20px;
    overflow-y: auto;
    padding: 18px 20px;
    resize: none;
    width: 100%;
}

/* 8.4 */
::-webkit-input-placeholder {color: rgba(0, 0, 0, 0.55);}
:-moz-placeholder {color: rgba(0, 0, 0, 0.55);}
::-moz-placeholder {color: rgba(0, 0, 0, 0.55);}
:-ms-input-placeholder {color: rgba(0, 0, 0, 0.55);}







/* 9 */
/* - Layout - */
.left {float: left;}
.right {float: right;}
.clear {clear: both;}
.inline {display: inline-block;}
.block {display: block;}
.no-margin {margin: 0;}
.centre-margin {display: block; margin-left: auto; margin-right: auto;}
.txt-centre {text-align: center;}








/* 10 */
/* - Fade animation - */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {opacity:0; opacity:1 \9; -webkit-animation:fadeIn ease-in 1; -moz-animation:fadeIn ease-in 1; animation:fadeIn ease-in 1; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; -webkit-animation-duration:1s; -moz-animation-duration:1s; animation-duration:1s;}

.fade-in.one {-webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; animation-delay: 0.5s;}
.fade-in.two {-webkit-animation-delay: 1s; -moz-animation-delay: 1s; animation-delay: 1s;}
.fade-in.three {-webkit-animation-delay: 1.5s; -moz-animation-delay: 1.5s; animation-delay: 1.5s;}
.fade-in.four {-webkit-animation-delay: 2s; -moz-animation-delay: 2s; animation-delay: 2s;}








/* 11 */
/* - Animation - */
.smooth{
    -webkit-transition:.2s;
    -moz-transition:.2s;
    -ms-transition:.2s;
    -o-transition:.2s;
    transition:.2s
}








/* 12 */
/* - Header - */

/* 12.1 */
.header {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    height: 700px;
    overflow: hidden;
    padding: 0;
    position: relative;
    text-shadow: 1px 1px rgba(0, 0, 0, 0.1);
    width: 100%;
}

/* 12.2 */
header {
    box-sizing: border-box;
    display: block;
    padding: 70px 0 140px 0;
    width: 100%;
}

/* 12.3 */
#header-anchors {
    display: inline-block;
    float: right;
}
.popup-nav-btn {display: none;}

/* 12.4 */
header a {
    color: #FFF;
    font-size: 14px;
    display: inline-block;
    margin: 0 0 0 35px;
    padding: 18px 0;
    text-decoration: none;
    text-align: center;
}

/* 12.5 */
#get-app-a {
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 2px;
    padding: 18px;
}
#get-app-a:hover {
    background-color: #1187ED;
    border: 1px solid #1187ED;
}

/* 12.6 */
#header-title {
    color: #FFF;
    display: block;
    font-size: 70px;
    font-weight: 700;
}

/* 12.7 */
.typewriter {
    display: inline-block;
    margin: 5px 0 0 0;
    width: auto
}
.typewriter h2 {
    animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
    border-right: 3px solid #FFF;
    color: #FFF;
    font-size: 28px;
    line-height: 34px;
    margin: 0;
    max-width: 454px;
    padding-right: 5px;
    overflow: hidden;
    text-transform: none;
    white-space: nowrap;
}
@keyframes typing {
    from{width:0}to{width:100%}
}
@keyframes blink-caret {
    from,to{border-color: transparent}50%{ border-color: #FFF;}
}

/* 12.8 */
#header-p {
    color: rgba(255, 255, 255, 0.86);
    display: block;
    margin: 60px 0 25px 0;
    width: 500px;
}

/* 12.9 */
#header-about-btn {
    color: rgba(255, 255, 255, 0.86);
    display: inline-block;
    font-size: 15px;
    height: 50px;
    line-height: 50px;
    padding: 0 0 0 30px;
    text-decoration: none;
    width: auto;
}

/* 12.10 */
#header-subscribe-container {
    background-color: #F6F8Fa;
    border-radius: 3px;
    box-shadow: 0 15px 22px 0 rgba(0, 0, 0, 0.16), 0 19px 48px 0 rgba(0, 0, 0, 0.16);
    height: auto;
    position: absolute;
    margin: 0 auto;
    padding: 25px;
    right: 0;
    text-align: center;
    top: 210px;
    width: 300px;
}
#header-subscribe-desc {
    display: block;
    font-size: 12px;
    margin: 14px 0 0 0;
}

/* 12.11 */
#header-filter {
    background: rgba(0, 0, 0, 0.8);
    bottom: 0;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}








/* 13 */
/* - Overview strip - */

/* 13.1 */
#overview-strip {
    box-sizing: border-box;
    background-color: #F8F8F8;
    display: block;
    font-size: 0;
    height: auto;
    padding: 100px 0;
    text-align: center;
    width: 100%;
}

/* 13.2 */
.overview-strip-feature {
    display: inline-block;
    font-size: 14px;
    height: auto;
    text-align: center;
    width: 350px;
}
#overview-strip-feature-centre {
    margin: 0 40px;
}

/* 13.3 */
.overview-strip-feature img {
    display: block;
    height: 80px;
    margin: 0 auto 36px auto;
    width: 80px;
}

/* 13.4 */
.overview-strip-feature h3 {
    display: block;
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 22px 0;
}








/* 14 */
/* - Overview - */

/* 14.1 */
#overview-mockup1 {
    display: block;
    height: auto;
    margin: 60px auto;
    width: 90%;
}

/* 14.2 */
#overview-split-container {
    display: block;
    font-size: 0;
}

/* 14.3 */
#overview-left-split {
    box-sizing: border-box;
    display: inline-block;
    font-size: 14px;
    height: auto;
    padding: 0 40px 0 0;
    width: 50%;
}
#overview-left-split p {
    margin: 0 0 30px 0;
}

/* 14.4 */
#overview-right-split {
    box-sizing: border-box;
    display: inline-block;
    font-size: 14px;
    height: auto;
    padding: 0 0 0 40px;
    width: 50%;
}

/* 14.5 */
#overview-mockup2 {
    display: block;
    height: auto;
    margin: 0 auto;
    width: 100%;
}








/* 15 */
/* - Features - */

/* 15.1 */
#features-container {
    display: block;
    font-size: 0;
    margin: 50px 0 0 0;
    text-align: center;
}

/* 15.2 */
.feature {
    box-sizing: border-box;
    display: inline-block;
    font-size: 14px;
    padding: 0 20px 40px 20px;
    text-align: left;
    width: 33%;
}

/* 15.3 */
.feature-number {
    display: inline-block;
    float: left;
    font-size: 30px;
    font-weight: 700;
    margin: 0 16px 10px 0;
}

/* 15.4 */
.feature-h {
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    margin: 0 0 10px 0;
}

/* 15.5 */
#features-a {
    margin: 40px 0 0 0;
}








/* 16 */
/* - Video - */

/* 16.1 */
.video-container {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

/* 16.2 */
#video-filter {
    background: rgba(0, 0, 0, 0.65);
    bottom: 0;
    left: 0;
    position: absolute;
    top: 0;
    right: 0;
}

/* 16.3 */
#video-icon {
    background: url('../images/video-icon.png') center center / 70px 70px no-repeat;
    display: block;
    height: 300px;
    margin: 40px 0 0 0;
    width: 100%;
}
#video-icon:hover {cursor: pointer;}

/* 16.4 */
.popup-con iframe {
    border: 3px solid #FFF;
    box-sizing: border-box;
    display: block;
    height: 450px;
    width: 800px;
}








/* 17 */
/* - Contact - */

/* 17.1 */
#contact-form {
    margin: 40px 0 0 0;
}








/* 18 */
/* - Download - */

/* 18.1 */
.download-btn {
    background-position: 22px center;
    background-repeat: no-repeat;
    background-size: 20px 20px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 2px;
    color: #FFF;
    display: inline-block;
    font-size: 15px;
    height: 50px;
    line-height: 50px;
    margin: 40px 30px 0 30px;
    padding: 0 22px 0 55px;
    text-align: center;
    text-decoration: none;
    width: auto;
}
.download-btn:hover {
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.5);
}

/* 18.2 */
#apple-download {background-image: url('../images/apple-logo.png');}

/* 18.3 */
#play-download {background-image: url('../images/play-logo.png');}

/* 18.4 */
#windows-download {background-image: url('../images/windows-logo.png');}








/* 19 */
/* - Reviews - */

/* 19.1 */
#testimonial-container {
    background: rgba(255, 255, 255, 0.13) url('../images/dots-pattern.png') repeat;
    border-radius: 20px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.015);
    box-sizing: border-box;
    display: block;
    margin: 50px auto 0 auto;
    padding: 50px;
    width: 800px;
}

/* 19.2 */
.testimonial {
    display: none;
}
.testimonial img {
    border: 10px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    display: inline-block;
    float: left;
    height: 120px;
    margin: 0 40px 0 0;
    width: 120px;
}
.testimonial-name {
    display: block;
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 20px 0;
}
.testimonial-review {
    display: block;
    font-size: 15px;
    font-weight: 300;
    line-height: 24px;
}








/* 20 */
/* - Popup - */

/* 20.1 */
.popup {
    background: rgba(0, 0, 0, 0.9);
    bottom: 0;
    display: none;
    height: auto;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 9999999999;
}

/* 20.2 */
.popup-con {
    font-size: 14px;
    height: auto;
    left: 50%;
    max-height: 90%;
    max-width: 800px;
    overflow: auto;
    position: absolute;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: calc(90% - 15px);
    -webkit-overflow-scrolling: touch;
}
.popup-w-con {
    background: #FFF;
    box-shadow: 0 0 20px rgba(0,0,0,0.9);
    box-sizing: border-box;
    display: block;
    height: auto;
    padding: 30px;
    text-align: left;
    width: 100%;
}

/* 20.3 */
.popup-con::-webkit-scrollbar {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 0;
    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
    width: 6px;
}
.popup-con::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 0;
}
.popup-con::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.6);
    border-radius: 0;
}
.popup-con::-webkit-scrollbar-thumb:active {
    background: rgba(255, 255, 255, 0.63);
    border-radius: 0;
}

/* 20.4 */
.popup-close {
    background: #FFF;
    color: #1C1C1C;
    display: table;
    font-size: 12px;
    font-weight: 700;
    margin: 0 0 10px 0;
    padding: 10px 18px;
}
.popup-close:hover {cursor: pointer;}