@import "http://fonts.fontstorage.com/import/madeevolvesansevo.css";
.font {
    font-family: 'MADE Evolve Sans EVO';
}
/*******Navigation Bar*********/
.navbar {
    border-radius: 0;
    border-bottom: -20px;
    background: white;
}
.icon-bar {
    background: #2A0D67;
}
#logo {
    width: 150px;
    height: 50px;
    margin-top: -12px;
}
.navbar-nav > li > a {
    color: black;
    text-align: center;
    font-family: 'MADE Evolve Sans EVO';
}

/*******************************/
#start-game-section {
    background: url('../images/Splash-area-banner.png');
    background-size: cover;
    padding: 80px 0;
    color: white;
    margin-top: -20px;
}
.play-now-btn {
    border-radius: 30px;
    color: white;
    background: linear-gradient(#00ffcc, #00cccc);
    padding: 2% 12%;
    border: 2px solid #546694;
    box-shadow: 1px 1px 1px white, -1px -1px 1px white;
    margin-top: -85px;
    font-size: 20px;
}
.play-now-btn:focus, .play-now-btn:hover {
    outline: none;
    color: #2A0D67
}
#shamsi-sheshe {
    max-width: 200px;
}
#play-game-section {
    background: url('../images/Gameplay-background.png');
    background-size: cover;
}
#play-game-section > h1 {
    color: #2A0D67;
}
.col1, .col2, .col3 {
    display: block;
    margin: 40px 0;
    border-radius: 40px;
    background: #2A0D67;
    color: white;
    border: 2px solid white;
    box-shadow: 1px 1px 1px #2A0D67, -1px -1px 1px #2A0D67;
    padding-left: 20px;
    padding-right: 20px;
}
.col1:hover, .col1:focus, .col2:hover, .col2:focus, .col3:hover, .col3:focus {
    color: white;
    outline: none;
}
.line-height {
    line-height: 12px;
}
.btn-width {
    width: 190px; 
    padding-top: 12px; 
    padding-bottom: 12px;
}
#col2-div {
    margin-top: -83px;
    margin-left: 240px;
    position: relative;
}
#col3-div {
    margin-top: -190px;
    margin-left: 486px;
    position: relative;
}
.play-now-btn1 {
    border-radius: 30px;
    color: white;
    background: linear-gradient(#00ffcc, #00cccc);
    padding: 2% 12%;
    border: 2px solid #546694;
    box-shadow: 1px 1px 1px white, -1px -1px 1px white;
    position: absolute; 
    bottom: 0; 
    left: 40px;
    font-size: 20px;
}
.play-now-btn1:focus, .play-now-btn1:hover {
    outline: none;
    color: #2A0D67;
}
#cats-group {
    width: 230px; 
    float: right;
}
#coming-soon-text {
    max-width: 570px; 
    height: 170px; 
    font-size: 16px; 
    margin-left: 25px;
}
a.fa {
    font-size: 40px;
    color: #2A0D67;
}
a.footer-links {
    color: #777;
    margin: 0 5px;
    font-size: 18px;
}

/***********************************/
@media screen and (max-width: 768px) {
    #col3-div {
        margin-top: 0px;
        margin-left: 239px;
        position: relative;
    }
    #play-game-paragraph {
        position: absolute;
        bottom: 0px;
        left: -190px;
    }
    .play-now-btn {
        border-radius: 30px;
        padding: 2% 12%;
        margin-top: -45px;
        font-size: 10px;
    }
    .txt-center {
        text-align: center;
    }
    #coming-soon-text {
        max-width: 570px; 
        height: 170px; 
        font-size: 16px; 
        margin-left: 25px;
    }
}
@media screen and (max-width: 450px) {
    #col2-div {
        margin-top: 0px;
        margin-left: 0px;
        position: relative;
    }
    #col3-div {
        margin-top: 0px;
        margin-left: 0px;
        position: relative;
    }
    #play-game-paragraph {
        position: absolute;
        bottom: -31px;
        left: 200px;
    }
    #arrow2 {
        display: none;
    }
    
}
@media screen and (min-width: 450px) {
    #arrow1 {
        display: none;
    }
}
@media screen and (min-width: 768px) {
    .navbar {
        padding: 0 10%;
    }
    .navbar-nav {
        margin-left: 150px;
    }
    #comming-soon-heading {
        margin-left: 0px;
    }
    #shamsi-sheshe {
        max-width: 200px; 
        float: right; 
        margin-top: -230px;
    }
    #lorem-ipsum {
        max-width: 300px;
    }
}
@media screen and (min-width: 1309px) {
    .navbar {
        padding: 0 15%;
    }
    .navbar-nav {
        margin-left: 400px;
    }
}
@media screen and (max-width: 480px) {
    .play-now-btn1 {
        bottom: -55px;
    }
}
@media screen and (max-width: 650px) {
    #coming-soon-text { 
        height: 340px;
    }
    #cats-group {
        width: 230px;
        clear: both;
        margin-right: 11px;
    }
    .play-now-btn1 {
        border-radius: 30px;
        padding: 2% 12%;
        bottom: 0;
        left: 19%;
    }
    #coming-soon-text {
        margin-left: 34px;
    }
}