/*
Theme Name: CodeCorns
Description: The AppLand is an app landing page for apps and game publisher
Author: Gazi Shariful Islam 
Theme URI: http://CodeCorns.com
Author URI: http://facebook.com/MuftiGaziRishad
Version: 1.1.0
Text Domain: CodeCorns
tags: responsive, three columns, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu
*/

@import url('https://fonts.googleapis.com/css?family=Comfortaa:300,400,700%7CQuicksand:300,400,500,700');

/*
Specify in CSS

Use the following CSS rules to specify these families:

font-family: 'Quicksand', sans-serif;
font-family: 'Comfortaa', cursive;
*/


/*  Table of content  */


/*-------------------------
01. THEME GENEREL CSS
02. NAVBER
03. BANNER
04. FEATURES
05. SCREENSHOT
06. VIDEO
07. PRICING
08. COUNTER
09. TEAM
10. TESTIMONIALS
11. AVAILABLE
12. FAQ
13. BACK TO TOP
14. FOOTER

RESPONSIVE DESIGN
-------------------------*/


/*----------------------------------------
         01. THEME GENEREL CSS
------------------------------------------*/

* {
    padding: 0;
    margin: 0;
}

ul,
li {
    list-style: none;
}

a,
a:hover,
a:focus {
    text-decoration: none !important;
    outline: none;
}

img {
    border: 0px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Comfortaa', cursive;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    padding: 0px;
    margin: 0px;
}

.text_center {
    text-align: center;
}

body {
    background: #2D2E2E;
    color: #fff;
    font-family: 'Quicksand', sans-serif;
}

.main-preloader {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 999999999;
    background-color: #252525;
    text-align: center;
}

.main-preloader .main-preloader-inner {
    position: absolute;
    top: 50%;
    width: 100%;
}

.main-preloader .preloader-percentage {
    font-family: 'Comfortaa', cursive;
    font-weight: bolder;
    font-size: 48px;
    color: #F34F4E;
    margin: 0;
}

.main-preloader .preloader-percentage span {
    display: inline-block;
    font-size: 50px;
}


/*----------------------------------------
                02. NAVBER
------------------------------------------*/

.navbar-default {
    background-color: #252525;
    border-bottom: 1px solid #F34F4E;
    font-weight: 700;
    font-size: 16px;
    line-height: 80px;
}

.navbar-default img {
    width: 180px;
}

.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover {
    color: #F34F4E;
    background-color: transparent;
}

.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>a:hover {
    color: #F34F4E;
}

.navbar-default .navbar-nav>li>a {
    color: #fff;
    line-height: 50px;
}

.navbar-default .navbar-nav>li>a:hover {
    color: #F34F4E;
}

nav.navbar .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover {
    background: transparent;
    color: #F34F4E;
}


/*----------------------------------------
                03. BANNER
------------------------------------------*/

#banner {
    padding: 150px 0 100px;
    border-bottom: 1px dashed #F34F4E;
}

#banner h1 {
    font-size: 42px;
    font-weight: bold;
    margin-top: 230px;
}

#banner h3 {
    font-size: 22px;
    margin: 30px 0 45px;
}

#banner a {
    font-size: 18px;
    color: #fff;
    padding: 15px 35px;
    margin-right: 25px;
    border: 1px solid #fff;
    border-radius: 2px;
    -webkit-transition: .3s;
    transition: .3s;
}

#banner a:last-child {
    margin-right: 0;
}

#banner a:hover {
    border: 1px solid #F34F4E;
    color: #F34F4E;
}

#banner a i {
    margin-right: 10px;
}

#banner img {
    margin: 0 auto;
    margin-top: 30px;
}


/*----------------------------------------
                04. FEATURES
------------------------------------------*/

#features {
    padding: 97px 0 100px;
    border-bottom: 1px dashed #F34F4E;
}

#features h2 {
    font-size: 42px;
    font-weight: bold;
    margin-bottom: 40px;
    text-align: center;
}

#features h2 span {
    color: #F34F4E;
}

#features h4 {
    line-height: 30px;
    text-align: center;
    margin-bottom: 95px;
}

#features .col-sm-8 {
    margin-top: 60px;
}

#features .col-sm-6 {
    margin-bottom: 70px;
}

#features .col-sm-6:nth-child(3) {
    margin-bottom: 0;
}

#features .col-sm-6:nth-child(4) {
    margin-bottom: 0;
}

#features i {
    height: 50px;
    width: 50px;
    padding-top: 11px;
    text-align: center;
    box-shadow: 0 0px 10px 5px #F34F4E;
    border-radius: 50px;
    color: #F34F4E;
    background: #fff;
}

#features h3 {
    font-size: 18px;
    font-weight: bold;
    display: inline-block;
    margin-left: 20px;
}

#features p {
    font-size: 16px;
    margin-top: 15px;
    line-height: 25px;
}


/*----------------------------------------
              05. SCREENSHOT
------------------------------------------*/

#screenshot {
    padding: 97px 0 100px;
}

#screenshot h2 {
    font-size: 42px;
    font-weight: bold;
    margin-bottom: 40px;
    text-align: center;
}

#screenshot h2 span {
    color: #F34F4E;
}

#screenshot h4 {
    line-height: 30px;
    text-align: center;
    margin-bottom: 95px;
}

#screenshot img {
    margin: 0 auto;
    cursor: all-scroll;
    border-radius: 10px;
    border: 2px solid #F34F4E;
}

.appScreen {
    clear: both;
}

/*----------------------------------------
              06. VIDEO
------------------------------------------*/

#video {
    padding: 150px 0;
    background: -webkit-linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("../img/video.jpeg");
    background: linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("../img/video.jpeg");
    background-size: cover;
    background-position: center;
}

#video h2 {
    margin-bottom: 30px;
}

#video i {
    padding: 5px 10px;
    border-radius: 50px;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    color: #F34F4E;
    box-shadow: 0 0px 150px 35px #F34F4E;
}

#video a:hover i {
    box-shadow: 0 0px 50px 15px #fff;
}


/*----------------------------------------
              07. PRICING
------------------------------------------*/

#pricing {
    padding: 97px 0 100px;
    border-bottom: 1px dashed #F34F4E;
}

#pricing h2 {
    font-size: 42px;
    font-weight: bold;
    margin-bottom: 40px;
    text-align: center;
}

#pricing h2 span {
    color: #F34F4E;
}

#pricing h4 {
    line-height: 30px;
    text-align: center;
    margin-bottom: 95px;
}

#pricing .pricing-item {
    margin: 42px auto 0;
    max-width: 300px;
    padding: 50px;
    border-radius: 10px;
    border: 2px solid #F34F4E;
}

#pricing .col-sm-4:nth-child(2) .pricing-item {
    padding: 80px;
    margin-top: 0;
}

#pricing h3 {
    font-weight: bolder;
    text-transform: uppercase;
    margin-bottom: 20px;
}

#pricing small {
    font-size: 42px;
}

#pricing ul {
    margin: 20px 0 50px;
}

#pricing ul li {
    line-height: 25px;
}

#pricing .pricing-item a {
    font-weight: bold;
    font-size: 16px;
    border: 1px solid #F34F4E;
    padding: 10px 30px;
    border-radius: 3px;
    color: #fff;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}

#pricing .pricing-item a:hover {
    background: rgba(243, 79, 78, 0.3);
}


/*----------------------------------------
              08. COUNTER
------------------------------------------*/

#counter {
    padding: 100px 0;
    border-bottom: 1px dashed #F34F4E;
}

#counter i {
    color: #F34F4E;
    margin-bottom: 15px;
}

#counter h3 {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 10px;
}

#counter h6 {
    font-weight: bold;
}


/*----------------------------------------
              09. TEAM
------------------------------------------*/

#team {
    padding: 97px 0 100px;
    border-bottom: 1px dashed #F34F4E;
}

#team h2 {
    font-size: 42px;
    font-weight: bold;
    margin-bottom: 40px;
    text-align: center;
}

#team h2 span {
    color: #F34F4E;
}

#team h4 {
    line-height: 30px;
    text-align: center;
    margin-bottom: 95px;
}

#team .member {
    max-width: 250px;
    margin: 0 auto;
    padding: 50px;
    border-radius: 10px;
    border: 2px solid #F34F4E;
    box-shadow: 0 0px 40px 0px #F34F4E;
}

#team .member:hover {
    border: 2px solid #fff;
    box-shadow: 0 0px 40px 0px #fff;
}

#team .member img {
    border-radius: 50px;
    margin-bottom: 30px;
}

#team .member h5 {
    font-weight: bold;
    margin-bottom: 10px;
}

#team .member span {
    font-size: 10px;
    font-weight: 300;
    color: #ccc;
}


/*----------------------------------------
             10. TESTIMONIALS
------------------------------------------*/

#testimonials {
    padding: 97px 0 88px;
    border-bottom: 1px dashed #F34F4E;
}

#testimonials h2 {
    font-size: 42px;
    font-weight: bold;
    margin-bottom: 23px;
    text-align: center;
}

#testimonials .testi-item img {
    float: left;
    margin-top: 17px;
    margin-right: 35px;
    box-shadow: 0 0 15px 12px #F34F4E;
}

#testimonials .testi-item h5 {
    display: inline-block;
    text-align: center;
    font-weight: bold;
    margin-right: 50px;
}

#testimonials .testi-item h5 span {
    font-size: 10px;
    font-weight: 300;
}

#testimonials .testi-item p {
    margin-top: 20px;
    font-size: 15px;
    line-height: 25px;
}

#testimonials .testi-item ul {
    text-align: center;
    margin-top: 20px;
    display: inline-block;
}

#testimonials .testi-item ul li {
    padding: 0;
    color: #ffc33d
}


/*----------------------------------------
             11. AVAILABLE
------------------------------------------*/

#available {
    padding: 97px 0 0;
}

#available h2 {
    font-size: 42px;
    font-weight: bold;
    margin-bottom: 40px;
}

#available h2 span {
    color: #F34F4E;
}

#available h4 {
    line-height: 30px;
    margin-bottom: 95px;
}

#available .appOn a {
    font-size: 18px;
    font-weight: bold;
    display: inline-block;
    width: 230px;
    padding: 10px 0 15px;
    margin: 0 10px;
    background: #fff;
    color: #F34F4E;
    border: 1px solid #fff;
    border-radius: 3px;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}

#available .appOn a:hover {
    background: #fff;
    border: 1px solid #F34F4E;
}

#available .appOn i {
    margin-right: 10px;
}

#available img {
    margin: 100px auto 0;
}


/*----------------------------------------
                 12. FAQ
------------------------------------------*/

#faq {
    padding: 97px 0 88px;
    border-bottom: 1px solid #fff;
}

#faq h2 {
    font-size: 42px;
    font-weight: bold;
    margin-bottom: 40px;
}

#faq h2 span {
    color: #F34F4E;
}

#faq h4 {
    line-height: 30px;
    margin-bottom: 95px;
}

#faq .faq-bar ul li {
    margin-bottom: 15px;
}

#faq .faq-bar ul li h3 {
    background: #F34F4E;
    padding: 25px 15px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
}

#faq .faq-bar ul li p {
    padding: 15px;
    border-radius: 0 0 6px 6px;
    background: #fff;
    color: #222;
    font-size: 16px;
    line-height: 25px;
}

#faq .faq-bar i {
    margin-right: 15px;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

#faq .faqRotate>i {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

#faq form {
    padding: 30px;
    background: #F34F4E;
}

#faq form input {
    background: #F34F4E;
    color: #fff;
    border: 1.5px solid #fff;
    height: 40px;
    margin-bottom: 15px;
}

#faq form input::-webkit-input-placeholder {
    color: #fff!important;
}

#faq form textarea {
    background: #F34F4E;
    color: #fff;
    border: 1.5px solid #fff;
    margin-bottom: 15px;
    height: 150px;
    resize: vertical;
}

#faq form textarea::-webkit-input-placeholder {
    color: #fff!important;
}

#faq form button {
    border: 1.5px solid #fff;
    font-weight: bold;
    border-radius: 3px;
    padding: 10px 40px;
    background: #F34F4E;
    color: #fff;
    font-size: 14px;
    text-transform: uppercase;
}


/*----------------------------------------
            13. BACK TO TOP
------------------------------------------*/

#backtotop {
    position: fixed;
    bottom: 40px;
    right: 30px;
    display: none;
}

#backtotop i {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    color: #F34F4E;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

#backtotop i:hover {
    color: #fff;
    cursor: pointer;
}


/*----------------------------------------
               14. FOOTER
------------------------------------------*/

footer {
    padding: 100px 0;
}

footer img {
    margin: 0 auto;
    width: 160px;
    margin-bottom: 30px;
}

footer form h5 {
    font-size: 22px;
    margin-bottom: 30px;
}

footer form input {
    font-size: 16px;
    width: 300px;
    background: #2D2E2E;
    border: 1px solid #fff;
    padding: 15px 15px;
    border-radius: 6px 0 0 6px;
}

footer form input::-webkit-input-placeholder {
    color: #F34F4E!important;
}

footer form button {
    font-size: 17px;
    background: #2D2E2E;
    border: 1px solid #fff;
    padding: 14px;
    border-radius: 0px 6px 6px 0;
    color: #F34F4E;
    font-weight: bold;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    margin-left: -5px;
}

footer form button:hover {
    background: #fff;
}

footer ul {
    text-align: center;
    margin: 30px 0 20px;
}

footer ul li a {
    margin: 0 5px;
    display: block;
    color: #fff;
}

footer ul li a:hover {
    color: #F34F4E;
}

footer h6 {
    font-weight: bold;
    text-align: center;
}


/*----------------------------------------
         RESPONSIVE DESIGN
------------------------------------------*/

@media screen and (max-width: 1024px) {
    #features .col-sm-9 {
        margin-top: 0;
    }
    #features .col-sm-6:nth-child(3) {
        margin-bottom: 0;
    }
    #features .col-sm-6:nth-child(4) {
        margin-bottom: 0;
    }
    .nav>li>a {
        padding: 10px;
    }
}

@media screen and (max-width: 991px) {
    #banner a {
        text-align: center;
        width: 220px;
        color: #fff;
        margin-bottom: 15px;
        margin-right: 0;
        display: block;
    }
    #team .member {
        min-width: 320px;
        margin-bottom: 50px;
    }
    #faq .faq-bar ul li h3 {
        padding: 25px 15px;
        font-size: 15px;
    }
    #pricing .pricing-item {
        max-width: 300px;
        padding: 30px;
    }
    #pricing .col-sm-4:nth-child(2) .pricing-item {
        padding: 35px;
    }
    #testimonials .testi-item p {
        margin-top: 7px;
    }
}

@media screen and (max-width: 767px) {
    .container-fluid>.navbar-collapse,
    .container-fluid>.navbar-header,
    .container>.navbar-collapse,
    .container>.navbar-header {
        margin: 0;
    }
    .navbar-default .navbar-toggle .icon-bar {
        background: #F34F4E;
    }
    .navbar-toggle {
        margin-right: 0;
    }
    .navbar-default .navbar-toggle {
        border-color: transparent;
        margin-top: 22px;
        padding: 9px 0;
    }
    .navbar-toggle .icon-bar {
        width: 30px;
        height: 3px;
    }
    .navbar-default .navbar-toggle:focus,
    .navbar-default .navbar-toggle:hover {
        background: transparent;
    }
    .navbar-default .navbar-nav>li>a {
        line-height: 25px;
    }
    #banner {
        text-align: center;
    }
    #banner h1 {
        font-size: 34px;
        margin-top: 0;
    }
    #banner h3 {
        margin: 20px 0 50px;
    }
    #banner a {
        margin: 0 auto 15px;
        width: 70%;
        display: block;
    }
    #banner a:last-child {
        margin: 0 auto;
    }
    #features h2 {
        font-size: 38px;
    }
    #features img {
        margin-bottom: 70px;
    }
    #features .col-sm-6 {
        padding: 0 10px;
    }
    #features .col-sm-6:nth-child(3) {
        margin-bottom: 70px;
    }
    #screenshot h2 {
        font-size: 38px;
    }
    #screenshot img {
        margin-bottom: 50px;
    }
    #screenshot .col-sm-3:last-child img {
        margin-bottom: 0;
    }
    #pricing h2 {
        font-size: 38px;
    }
    #pricing .pricing-item {
        margin: 0 auto 30px;
    }
    #pricing .col-sm-4:last-child .pricing-item {
        margin: 0 auto;
    }
    #counter .col-sm-3 {
        margin-bottom: 50px;
    }
    #counter .col-sm-3:last-child {
        margin-bottom: 0;
    }
    #team h2 {
        font-size: 38px;
    }
    #team .col-sm-6:last-child .member {
        margin-bottom: 0;
    }
    #testimonials h2 {
        font-size: 38px;
    }
    #available h2 {
        font-size: 38px;
    }
    #available .appOn a:first-child {
        margin-bottom: 15px;
    }
    #faq h2 {
        font-size: 38px;
    }
    footer form input {
        width: 260px;
        padding: 10px 15px;
    }
    footer form button {
        padding: 9px;
    }
    #backtotop {
        bottom: 10px;
        right: 10px;
    }
}

@media screen and (max-width: 400px) {
    #banner h1 {
        font-size: 32px;
    }
    #features h2 {
        font-size: 32px;
    }
    #features h4 {
        font-size: 15px;
    }
    #screenshot h2 {
        font-size: 32px;
    }
    #screenshot h4 {
        font-size: 15px;
    }
    #pricing h2 {
        font-size: 32px;
    }
    #pricing h4 {
        font-size: 15px;
    }
    #team h2 {
        font-size: 32px;
    }
    #team h4 {
        font-size: 15px;
    }
    #testimonials h2 {
        font-size: 32px;
    }
    #testimonials .testi-item p {
        font-size: 13px;
    }
    #available h2 {
        font-size: 32px;
    }
    #available h4 {
        font-size: 15px;
    }
    #faq h2 {
        font-size: 32px;
    }
    #faq h4 {
        font-size: 15px;
    }
    #faq .faq-bar ul li h3 {
        font-size: 14px;
    }
    footer form h5 {
        font-size: 20px;
    }
    footer form input {
        width: 200px;
    }
}

@media screen and (max-width: 360px) {
    #banner h1 {
        font-size: 32px;
    }
    #features h4 {
        font-size: 12px;
    }
    #screenshot h4 {
        font-size: 12px;
    }
    #pricing h4 {
        font-size: 12px;
    }
    #team h4 {
        font-size: 12px;
    }
    #testimonials .testi-item p {
        font-size: 12px;
    }
    #testimonials .testi-item ul {
        margin-top: 15px;
    }
    #testimonials .testi-item h5 {
        margin-right: 10px;
    }
    #available h4 {
        font-size: 12px;
    }
    #faq h4 {
        font-size: 12px;
    }
    #faq .faq-bar ul li h3 {
        font-size: 14px;
    }
    footer form h5 {
        font-size: 20px;
    }
    footer form input {
        width: 200px;
    }
}

@media screen and (max-width: 320px) {
    .navbar-default {
        line-height: 60px;
    }
    .navbar-default img {
        width: 140px;
    }
    .navbar-default .navbar-toggle {
        margin-top: 12px;
    }
    #features h2 {
        font-size: 28px;
    }
    #screenshot h2 {
        font-size: 28px;
    }
    #pricing h2 {
        font-size: 28px;
    }
    #team h2 {
        font-size: 28px;
    }
    #team .member {
        min-width: 290px;
    }
    #testimonials h2 {
        font-size: 28px;
    }
    #testimonials .testi-item img {
        margin-right: 25px;
        margin-bottom: 5px;
    }
    #testimonials .testi-item p {
        font-size: 14px;
    }
    #testimonials .testi-item h5 {
        font-size: 12px;
    }
    #available h2 {
        font-size: 28px;
    }
    #faq h2 {
        font-size: 28px;
    }
    #faq .faq-bar ul li h3 {
        font-size: 11px;
    }
    footer form input {
        width: 175px;
    }
}