@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap');
@import "swiper.min.css";

body {margin: 0;  width: 100%; font-family: 'Montserrat', sans-serif; line-height: 1.5;
    background: url(../images/zemin.png) no-repeat; background-size: cover;}
html {height: 100%; width: 100%; }

.clr {clear: both;}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    outline: none;
    user-select: none;
}

a {color: #ae0001; text-decoration: none;}

.home {min-width: 1100px; height: 100%; }

.indexBg { height: 100%; display: flex; align-items: center;}
.main {text-align: center; margin: 0 auto; width: 1100px; min-width: 1100px; position: relative; padding: 50px 0;   }
.slogan {width: 320px; display: inline-block; vertical-align: top; margin: 130px 10px 0 0;}
.tablet {width: 295px; display: inline-block; background: url(../images/mockup.png) no-repeat center top; background-size: contain; height: 518px;  overflow: hidden; }
.tablet .ekran {width: 233px; height: 500px; margin: 9px auto 0; border-radius: 30px;  overflow: hidden;}
.content {width: 310px; display: inline-block; vertical-align: top; margin: 85px 0 0 10px; text-align: left;}
.content .description {font-size: 16px; font-weight: 300;}
.content .description div {color: #e30613;}
.content .uygulama {  margin: 30px 0 30px 0; display: flex; align-items: center; justify-content: left;}
.content .uygulamaIcon {margin: 0 10px 0 0; }
.content .uygulamaIcon img {border-radius: 15px; display: block; width: 60px}
.content .uygulamaAciklama {display: inline-block; width: 200px;  font-weight: 400; font-size: 13px; vertical-align: top; margin: 0;}

.swiper-slide img {width: 100%; height: 100%; object-fit: cover;}


h1 {font-size: 25px; font-weight: normal;}
.content .etiket {margin: 30px 0 0 -14px;}

.content .googlePlay {display: inline-block; vertical-align: top}
.content .appStore {display: inline-block;}

.logolar {position: relative;}
.logolar .astraZeneca{ float: left; position: absolute; left: 0; bottom: 0; font-size: 13px;}
.logolar .toraks {float: right;}

.serial {position: fixed; right: 20px; bottom: 50px;}


.toplam {margin: 30px auto;}

.uygulamaLinkleri img {width: 180px; margin: 0 0 5px;}


.gizlilik {background: url("../images/back_grey.jpg") no-repeat center top fixed; background-size: cover; color: rgba(0, 0, 0, 0.87); line-height: 1.5; font-size: 15px;}
.gizlilik .logo {margin-bottom: 50px;}

.container {max-width: 1170px; margin: auto; padding: 50px 50px; width: 100%;}

@media (max-width: 767px) {
    body,html {min-width: inherit;}
    html {height: auto;}

    .home {min-width: auto;}

    .container {padding-left: 20px; padding-right: 20px;}

    .main {width: auto; min-width: inherit;}
    .slogan {display: block; margin-top:0; width: 100%}
    .slogan img {width:90%; max-width:320px;  }
    .tablet { margin-top:50px;}
    .content {display: block; text-align: center; width: 95%; margin:30px auto;}
    .content .etiket { text-align: left;}
    .content .etiket img {width: 100%; max-width: 317px;}
    .content .googlePlay {display: inherit; margin: 0 0 20px 0;}
    .content .appStore {display: inherit;}

    .content .uygulama {justify-content: center;}
    .content .uygulamaAciklama {text-align: left;}

    .logolar .astraZeneca {float: inherit; position: inherit; margin: auto;}
    .logolar .toraks {float: inherit; margin: 30px auto;}


    .serial {right: 3px; bottom: 15px;}



}

/*@media (max-width: 345px) {*/
/*    .tablet {width: 300px; background-size:300px; height: 460px;}*/
/*    .tablet .ekran {width:260px; }*/
/*    .tablet .swiper-slide img {width: 260px;}*/
/*}*/

@media (max-height: 750px) {
    .indexBg {align-items: start;}
}