*{
    font-family: 'Roboto', sans-serif;
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}
h2{
    color: #FFF;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    font-size: 20pt;
}

p{
    color: #C7C7C7;
    font-family: 'Raleway', sans-serif;
     line-height: 1.6;
    font-size: 14pt
}

body {
    background-color: #181818;
    height: 100%;
} 
header {
    margin-bottom: 20px;
}
page{
    max-width: 1024px;
}
.row{
    display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
}

/* Responsive layout - makes the 2 columns stack  */
.column{
    flex: 25%;
/*    */

/*    outline: 1px solid #333;*/

}
.img-center{
    align-items: center;
    justify-content: center;
    display: flex;
}

.left{
    float: left;
}

.right{
    float: right;
}

.float-x2{
    flex:2;
}
.conteiner {
    max-width: 1024px;
    margin:auto;

}
.logo {
    cursor: pointer;
    margin: 20px 70px;
}
nav {
    float: right;
}
nav>ul>a {
    text-decoration: none;
    color: #fff;
    float: left;
    margin: 20px 12px;
    padding: 10px;
    border-radius: 20px;
}
nav>ul {
    list-style:none;
    cursor: pointer;
}

nav>ul>a:hover {
    list-style:none;
    cursor: pointer;
    color: #000;
    background: #fff;
    transition: all ease-in-out 0.3s;
}
.section {
    height: 100%;
}

#first-page {
    height: 100%;
    background: url(../images/header-spot.svg);
    background-position: top center;
    background-repeat: no-repeat;
}

.column>h2{
   margin: 80px 16px 32px 16px;
}

.column>p{
    margin: 16px;
}

.column>img{
    display:block;
}
#phone_image{
    max-width: 460px;
    float: right;
}

#google-paly-badge{
    width: 200px;
    cursor: pointer;
    margin: 36px 36px 72px 64px;
}

#second_page {
    height: 100%;
}

.img-margin{
        margin-top: 80px;
    }

.second-page .column{
/*    height: 320px;*/
}
.column>h2{
    padding-top: 40px;
}

h1{
    color: #6D98D9;
}
h3{
    color: #FFF;
}
.counter-box{
    text-align: center;
    padding: 32px;
}
.counter-box>h1{
    margin: 8px;
}
.divider{
    border-right: 2px solid;
    -webkit-border-image:
      -webkit-gradient(linear, 1 100% , 1 100%, from(#536DFE), to(#536DFE))) 1 100%;
    -webkit-border-image:
      -webkit-linear-gradient(#536DFE, #536DFE) 1 100%;
    -moz-border-image:
      -moz-linear-gradient(#536DFE,#536DFE) 1 100%;
    -o-border-image:
      -o-linear-gradient(#536DFE,#536DFE) 1 100%;
    border-image:
      linear-gradient(to bottom, #536DFE,#536DFE) 1 100%;
    border-image-slice: 1;
}
.min-heaight{
    min-height: 360px;
}
#third_page .row{
    margin: 16px;
}

footer{
    background: #687BC5;
    background: url(../images/bg_2.png);
    background-position: top center;
    background-repeat: no-repeat;
}
footer>p{
    color: #fff;
    text-align: center;
}
.mail-box{
   padding-top: 100px;

}
.mail-box>h1{
    color: #fff;
    margin: 16px;
    text-align: center;
}
.input-box{
    text-align: center;
    margin: 16px;
    margin-bottom: 32px;
}
input[type="email"] {
    max-width: 620px;
    width: 100%;
    height: 40px;
    outline: none;
    border: none;
    padding-right: 50px;
    padding-left: 20px;
    border-radius: 20px;
}

input[type="submit"] {
    margin-left: -106px;
    height: 36px;
    width: 100px;
    cursor: pointer;
    background: #536DFE;
    background-image: -webkit-linear-gradient(#536DFE, #536DFE);
    background-image: -o-linear-gradient(#536DFE, #536DFE);
    background-image: linear-gradient(#536DFE, #536DFE);
    color: white;
    border: 0;
    border-radius: 20px;
    -webkit-appearance: none;
}
.mail-text>a{
        color: #fff;
     text-decoration: none;
}
ul>li {
 list-style-type:disc;
     color: #757575;
}
ul{
    margin-left: 32px;
}
.footer-botton{
    padding: 8px;
}
.footer-botton .column>img{
    margin: 0px;
    margin-bottom: 16px;
}

.small-box{
    width: 200px;
}
.social-buttons>a{
    color: transparent;
}
.social-buttons>a>img{
    padding: 14px;
}
.social-buttons>a>img:hover{
    opacity: 0.4;
}
span{
    color: #C7C7C7;
    text-align: center;
}
.copyright-text{
    text-align: center;
    width: 600px;
    background: #444;
}
footer .conteiner p{
    color: #fff;
    text-align: center;
    padding: 16px;
}
.mail-text {
    justify-content: center;
    display: block;
    margin-bottom: 32px;
}
.mail-text>a{
    display: block;
    margin: 16px;
    text-align: center;
}
.mail-text>a:hover{
    opacity: 0.4;
}
.mail-text>a>span {
    margin-left: 16px;
}
.button-logo{
      cursor: pointer;
}
/* Responsive layout - makes the one columns stack  */
@media screen and (max-width: 800px) {
    .column {
        -ms-flex: 100%;
        flex: 100%;
        max-width: 100%;
    }

    #google-play-div{
        align-items: center;
        justify-content: center;
        display: flex;
}
    #google-paly-badge{
        margin: 16px 16px;
    }

    #first-page {
    background: url(../images/header-spot.svg);
    background-position: top center;
    background-repeat: no-repeat;
    }
    .logo {
        margin: 16px 32px;
    }
    nav{
        display: none;
    }
    header {
    margin-bottom: 0;
    align-items: center;
    justify-content: center;
    display: flex;
    }

    .column>h2{
        padding-top: 0px;
    }
    .column>img{
        width: 290px;
    }

    .reverse{
    flex-direction:column-reverse;
    }


    .img-margin{
        margin-bottom: 42px;
        margin-top: 16px;
    }

    h2{
    font-size: 20pt;
    }

    p{
    line-height: 1.5;
    font-size: 11pt
    }
    #mail>h1{
        font-size: 12pt;
    }
    .min-heaight{
    min-height: 0px;
    }

    .divider{
        border-bottom: 2px solid #333;
        border-right: none;
        padding: 32px;
    }

    input[type="submit"] {
        margin: 16px;
        background: #fff;
        color: #333;
    }

    footer .conteiner p{
    padding: 0px;
    }

    .small-box{
        float: none;
        margin: 0 0 16px 16px;
    }
    .button-logo{
        width: 180px;
        justify-content: center;

    }
    .logo-center{
        justify-content: center;
        display: flex;
    }
    .center-span{
        text-align: center;
        font-size: 8pt;
        margin-bottom: 8px;
    }
}