/*
copyright by Abdullah Sahin
*/

body {
    font-family: 'Lato', sans-serif;
    color: #ececec !important;
    background-color: #222222 !important;
}

.main {
    margin-top: 50px;
    margin-bottom: 50px;
    min-height: calc(100vh - 100px);
}

@media (min-width: 768px) {
    .main {
        margin-top: 150px;
        max-width: 960px !important;
        min-height: calc(100vh - 150px);
    }
}

.main #iphoneHolder {
    position: relative;
    width: 103px;
    height: 529px;
    margin: 0 auto;
}

.main #backgroundIphone {
    position: absolute;
    z-index: 0;
    left: 0px;
    top: 0;
    width: 375px;
    height: 667px;
    background-image: url('../images/ios-sprites.png');
    background-repeat: no-repeat;
    background-position: 0px 0px;
    -webkit-transform: matrix3d(0.26317101701373885, 0.16646832021330377, 0, 0.0006209576831412309, 0.00010219670345985834, 0.6161462297212763, 0, 0.00000725555014923217, 0, 0, 1, 0, 27.0625, 59.61454772949219, 0, 1);
    -moz-transform: matrix3d(0.26317101701373885, 0.16646832021330377, 0, 0.0006209576831412309, 0.00010219670345985834, 0.6161462297212763, 0, 0.00000725555014923217, 0, 0, 1, 0, 27.0625, 59.61454772949219, 0, 1);
    transform: matrix3d(0.26317101701373885, 0.16646832021330377, 0, 0.0006209576831412309, 0.00010219670345985834, 0.6161462297212763, 0, 0.00000725555014923217, 0, 0, 1, 0, 27.0625, 59.61454772949219, 0, 1);
    transform-origin: 0px 0px;
    -webkit-animation: changeBackground 19s infinite steps(1);
    -moz-animation: changeBackground 19s infinite steps(1);
    animation: changeBackground 19s infinite steps(1);
}

@-webkit-keyframes changeBackground {
    0% {
        background-position: 0px 0px;
    }
    17% {
        background-position: -375px 0px;
    }
    33% {
        background-position: -750px 0px;
    }
    50% {
        background-position: -1125px 0px;
    }
    67% {
        background-position: -1500px 0px;
    }
    83% {
        background-position: -1875px 0px;
    }
}

@-moz-keyframes changeBackground {
    0% {
        background-position: 0px 0px;
    }
    17% {
        background-position: -375px 0px;
    }
    33% {
        background-position: -750px 0px;
    }
    50% {
        background-position: -1125px 0px;
    }
    67% {
        background-position: -1500px 0px;
    }
    83% {
        background-position: -1875px 0px;
    }
}

@keyframes changeBackground {
    0% {
        background-position: 0px 0px;
    }
    17% {
        background-position: -375px 0px;
    }
    33% {
        background-position: -750px 0px;
    }
    50% {
        background-position: -1125px 0px;
    }
    67% {
        background-position: -1500px 0px;
    }
    83% {
        background-position: -1875px 0px;
    }
}

.main #iphone {
    position: relative;
    z-index: 1;
    background: url('../images/iphone.png');
    width: 103px;
    height: 529px;
}

.main #logo {
    margin-top: 50px;
    padding: 20px 10px;
}

.main h1 {
    margin-top: 50px;
    font-weight: 600;
    font-size: 25px;
    letter-spacing: 0em;
    line-height: 40px;
}

.main h2 {
    padding: 0px 10px;
    font-weight: 100;
    font-size: 50px;
    letter-spacing: 0.1em;
    line-height: 60px;
}

.main p {
    margin-top: 20px;
    font-size: 21px;
    font-weight: 300;
    padding: 0px 10px;
    color: #ababab;
}

.shops {
    margin-top: 20px
}

.shops img {
    padding: 20px 10px 0px 10px;
    max-width: 200px;
}

a,
a:link,
a:active,
a:hover,
a:focus,
a:visited {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

@media (min-width: 768px) {
    .footer {
        line-height: 300px !important;
    }
    .footer span {
        display: inline-block !important;
    }
}

.footer {
    color: #121212 !important;
    background-color: #dbdbdb;
    min-height: 300px;
    line-height: 100px;
    text-align: center;
    font-weight: bold;
    font-size: 13px;
}

.footer span {
    padding: 0px 15px;
    font-weight: 200;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    display: block;
}