/* --- Desctop media */
@media only screen and (min-width : 1200px) and (max-width : 1340px) {
     div.start-text h1 {
         margin: 0 auto 35px auto;
    }
}
/* iPads (portrait and landscape2) ----------- */
@media only screen and (min-width : 768px) and (max-width : 1024px) {
     div.start-part {
         width: 65%;
         max-width: 100%;
         margin: 0 auto;
    }
     div.start-click a.str-btn {
         display: flex;
         width: auto;
         padding: 10px 20px;
    }
}
/* iPads (portrait and landscape2) ----------- */
@media only screen and (min-width : 561px) and (max-width : 768px) {
     div.app::before {
         width: 150px;
         height: 250px;
         right: -50px;
         top: 10px;
    }
    div.app::after {
         width: 200px;
         height: 250px;
         left: 30px;
         bottom: -85px;
    }
     div.start-part {
         width: 90%;
         max-width: 100%;
         margin: 0 auto;
    }
     div.start-text {
         font-size: 16px;
         line-height: 1.2;
    }
     div.start-click a.str-btn {
         display: flex;
         width: 100%;
         min-height: 50px;
         font-size: 28px;
         padding: 8px 15px;
    }
    .reload_btn {
         min-width: 100%;
         font-size: 18px;
         padding: 9px;
         margin: 0px auto 0 auto;
    }
    div.share-part {
         width: 90% !important;
         margin: 0 auto;
    }
    .partnyor_result {
         width: 100%;
         max-width: 90%;
         padding: 15px 0;
         font-size: 45px;
         margin: 0 auto 145px auto;
    }
    .rslt_mrg {
         margin: 0px auto 30px auto;
    }
    div.result_range {
         height: 50px;
         border-radius: 7px;
    }
    div.result_range_in {
         height: 50px;
         border-radius: 7px;
    }
    div.result_heart {
         display: inline-flex;
         align-items: center;
         position: absolute;
         justify-content: center;
         width: 120px;
         height: 120px;
         font-size: 30px;
         top: -130px;
         left: calc(100% - 40px);
    }
}
/* iPads (portrait and landscape2) ----------- */
@media only screen and (min-width : 0px) and (max-width : 560px) {
     div.app::before {
         width: 110px;
         height: 120px;
         right: -35px;
         top: 15px;
    }
     div.app::after {
         left: 20px;
         bottom: -30px;
         width: 110px;
         height: 120px;
    }
     div.start-part {
         width: 100%;
         padding: 0 15px;
         max-width: 100%;
         margin: 0 auto;
    }
     div.start-text {
         position: relative;
         margin: 0 auto 30px auto;
         z-index: 1;
    }
     div.start-click a.str-btn {
         display: flex;
         width: 100%;
         min-height: 50px;
         font-size: 24px;
         padding: 8px 15px;
    }
     div.test-part {
         width: 100%;
         padding: 0 15px;
    }
     div.share-part {
         width: 100%;
         padding: 0 15px;
    }
     div.result_table th, div.result_table td {
         font-size: 16px;
    }
     div.result_table {
         width: calc(100% - 70px);
    }
     div.partnyor_result {
         padding: 15px 0;
         font-size: 22px;
         max-width: 100%;
        /* color: #ff2300;
         */
         max-width: 100%;
         padding: 15px;
         margin: 15px auto;
    }
     div.start-text h1 {
         font-size: 26px;
         margin: 0 auto 15px auto;
    }
     div.start-text div.start-text_info {
         font-size: 22px;
    }
     div.start-click form input {
         height: 50px;
         padding: 10px;
         margin: 0 auto 20px auto;
         font-size: 20px;
         border-radius: 7px;
    }
     /*div.start-click .str-btn {
         min-height: 50px;
         font-size: 20px;
         border-radius: 4px;
         padding: 15px;
    }
     div.row-frm h2.frm_questn {
         margin: 0px auto 20px auto;
         font-size: 23px;
    }
     div.row-frm input {
         height: 50px;
         padding: 15px;
         font-size: 20px;
         border-radius: 4px;
    }*/
     div.row-frm label.test_label {
         font-size: 20px;
    }
     span.test_info {
        
         font-size: 18px;
         margin-bottom: 12px;
    }
     span.test_icn {
         position: absolute;
         width: 25px;
         height: 20px;
         right: 10px;
         top: 12px;
    }
     div.scrl_btn {
         bottom: 20px;
         right: 20px;
    }
     div.scrl_btn .swiper-button-prev {
         width: 40px;
         height: 40px;
         background-size: 60% 60%;
    }
    div.scrl_btn .swiper-button-next {
         width: 40px;
         height: 40px;
         background-size: 60% 60%;
    }
    .reload_btn {
         min-width: 100%;
         font-size: 18px;
         padding: 10px;
         margin: 0px auto 0 auto;
    }
    div.share-part {
         width: 90% !important;
         margin: 0 auto;
    }
    .partnyor_result {
         width: 100%;
         max-width: 90%;
         padding: 15px 0;
         font-size: 30px;
         margin: 0px auto 160px auto;
    }
    .rslt_mrg {
         margin: 0px auto 20px auto;
		 font-size: 24px;
    }
    div.result_range {
         height: 50px;
         border-radius: 7px;
    }
    div.result_range_in {
         height: 50px;
         border-radius: 7px;
    }
    div.result_heart {
         display: inline-flex;
         align-items: center;
         position: absolute;
         justify-content: center;
         width: 90px;
         height: 90px;
         font-size: 24px;
         top: -100px;
         left: calc(100% - 30px);
         padding: 15px 15px 25px 15px;
    }
    .x_1 {
        width: 30px;
        height: 30px;
        left: 4%;
        top: 5%;
    }
    .x_2 {
        width: 54px;
        height: 54px;
        right: 9%;
        bottom: 34%;
    }
    .ovl_1 {
        width: 108px;
        height: 96px;
        right: 0;
        top: 0;
    }
    .ovl_2 {
        width: 32px;
        height: 32px;
        right: 3%;
        bottom: 15%;
    }
    .ovl_3 {
        width: 39px;
        height: 78px;
        left: 0;
        bottom: 5%;
    }
    .square_1 {
        width: 90px;
        height: 37px;
        right: 9%;
        bottom: 0;
    }
    .square_2 {
        width: 56px;
        height: 56px;
        left: 8%;
        bottom: 37%;
    }
    .triangle_1 {
        width: 30px;
        height: 29px;
        left: 20%;
        bottom: 20%;
    }
    .triangle_2 {
        width: 60px;
        height: 40px;
        top: 0;
        left: 28%;
    }
    .stars {
        width: 109px;
        height: 35px;
        bottom: 7%;
        left: 34%;
    }
    .swiper-container, .swiper-wrapper, .swiper-slide {
         width: 100%;
         height: 100vh;
    }
    .app-center {
         width: 100%;
         max-width: 100%;
         height: 100%;
         max-height: 100%;
    }
}
 
 @media only screen and (max-height : 560px) {
     div.app::before {
         width: 110px;
         height: 120px;
         right: -35px;
         top: 15px;
    }
     div.app::after {
         left: 20px;
         bottom: -30px;
         width: 110px;
         height: 120px;
    }
     div.start-part {
         width: 100%;
         padding: 0 15px;
         max-width: 100%;
         margin: 0 auto;
    }
     div.start-text {
         position: relative;
         margin: 0 auto 30px auto;
         z-index: 1;
    }
     div.start-click a.str-btn {
         display: flex;
         width: 100%;
         min-height: 50px;
         font-size: 24px;
         padding: 8px 15px;
    }
     div.test-part {
         width: 100%;
         padding: 0 15px;
    }
     div.share-part {
         width: 100%;
         padding: 0 15px;
    }
     div.result_table th, div.result_table td {
         font-size: 16px;
    }
     div.result_table {
         width: calc(100% - 70px);
    }
     div.partnyor_result {
         padding: 15px 0;
         font-size: 22px;
         max-width: 100%;
        /* color: #ff2300;
         */
         max-width: 100%;
         padding: 15px;
         margin: 15px auto;
    }
     div.start-text h1 {
         font-size: 26px;
         margin: 0 auto 15px auto;
    }
     div.start-text div.start-text_info {
         font-size: 22px;
    }
     div.start-click form input {
         height: 50px;
         padding: 10px;
         margin: 0 auto 20px auto;
         font-size: 20px;
    }

     div.row-frm label.test_label {
         font-size: 20px;
    }
     span.test_info {
        
         font-size: 18px;
         margin-bottom: 12px;
    }
     span.test_icn {
         position: absolute;
         width: 25px;
         height: 20px;
         right: 10px;
         top: 12px;
    }
     div.scrl_btn {
         bottom: 20px;
         right: 20px;
    }
     div.scrl_btn .swiper-button-prev {
         width: 40px;
         height: 40px;
         background-size: 60% 60%;
    }
    div.scrl_btn .swiper-button-next {
         width: 40px;
         height: 40px;
         background-size: 60% 60%;
    }
    .reload_btn {
         min-width: 100%;
         font-size: 18px;
         padding: 10px;
         margin: 0px auto 0 auto;
    }
    div.share-part {
         width: 90% !important;
         margin: 0 auto;
    }
    .partnyor_result {
         width: 100%;
         max-width: 90%;
         padding: 15px 0;
         font-size: 30px;
         margin: 0px auto 160px auto;
    }
    .rslt_mrg {
         margin: 0px auto 20px auto;
		 font-size: 24px;
    }
    div.result_range {
         height: 50px;
         border-radius: 7px;
    }
    div.result_range_in {
         height: 50px;
         border-radius: 7px;
    }
    div.result_heart {
         display: inline-flex;
         align-items: center;
         position: absolute;
         justify-content: center;
         width: 90px;
         height: 90px;
         font-size: 24px;
         top: -100px;
         left: calc(100% - 30px);
         padding: 15px 15px 25px 15px;
    }
    .x_1 {
        width: 30px;
        height: 30px;
        left: 4%;
        top: 5%;
    }
    .x_2 {
        width: 54px;
        height: 54px;
        right: 9%;
        bottom: 34%;
    }
    .ovl_1 {
        width: 108px;
        height: 96px;
        right: 0;
        top: 0;
    }
    .ovl_2 {
        width: 32px;
        height: 32px;
        right: 3%;
        bottom: 15%;
    }
    .ovl_3 {
        width: 39px;
        height: 78px;
        left: 0;
        bottom: 5%;
    }
    .square_1 {
        width: 90px;
        height: 37px;
        right: 9%;
        bottom: 0;
    }
    .square_2 {
        width: 56px;
        height: 56px;
        left: 8%;
        bottom: 37%;
    }
    .triangle_1 {
        width: 30px;
        height: 29px;
        left: 20%;
        bottom: 20%;
    }
    .triangle_2 {
        width: 60px;
        height: 40px;
        top: 0;
        left: 28%;
    }
    .stars {
        width: 109px;
        height: 35px;
        bottom: 3%;
		left: 43%;
    }
    .swiper-container, .swiper-wrapper, .swiper-slide {
         width: 100%;
         height: 100vh;
    }
}