*{
    padding: 0;
    margin: 0;
}

img{
    max-width: 100%;
    height: auto;
}

h2 + h3{
    margin-top: 85px;
}

/*Стандартизація блоків під сітку макету*/
.mainWrapper{
    width: 1220px;
    margin: 0 auto;
}

.col2{
    width: calc(1220px / 12 * 2);
}

.col4{
    width: calc(100% / 12 * 4);
}

.col7{
    width: calc(100% / 12 * 7);
}

.col8{
    width: calc(100% / 12 * 8);
    box-sizing: border-box;

    margin: 0 auto;
    padding: 10px;
}

.col10{
    width: calc(100% /12 * 10);
    box-sizing: border-box;

    margin: 0 auto;
    padding: 10px;
}

.row{
    display: flex;
}

/*стилі сітки для 1 екрану*/
.firstScreen{
    height: 600px;
    display: flex;

}

.mainSlogan{
    margin: auto 0;
    padding: 10px;
}

.mainPic{
    width: 300px;
    height: 500px;

    margin: auto 20px auto auto;
}

/*стилі сітки для 2 екрану*/
.aboutSportLine {
    display: flex;
    box-sizing: border-box;

    padding: 10px;
    margin-bottom: 50px;
  }

.aboutText{
    padding: 50px 20px 50px 10px;
}

.sectionName{
    margin: 0 auto;
    padding-bottom: 20px;

    text-align: center;
}

.corpusImage{
    margin-right: 0;
    margin-left: auto;
    padding: 10px;
}

/*стилі сітки для екрану з перевагами*/
.advantages{
    box-sizing: border-box;

    padding: 10px;
    margin-bottom: 70px;
}

.advantageName{
    margin-top: 15px;
    margin-left: 35px;
}

.advantageText{
    margin: auto 0 auto 35px;
    padding: 30px;
}

.advantageBlock img{
    margin-left: -50px;
    width: 110px;
    height: 110px;
}

/*Стилі сітки та позиціювання для інформаційних карток*/
.infoCards{
    box-sizing: border-box;
    padding: 10px;
}

.sportTypes{
    margin-bottom: 70px;
}

/*Картки з видами спорту*/
.col2.card{
    height: 256px;

    position: relative;
    box-sizing: border-box;

    margin: 10px;
}

.col2.card.right{
    width: 178px;

    margin-right: 10px;
    margin-left: 50px;
}

.col2.card.left{
    width: 178px;

    margin-right: 50px;
    margin-left: 10px;
}

.slogan{
    margin: auto auto;
    text-align: center;
}


.col2.card > p {
    margin-bottom: 53px;
    text-align: center;

}

.col2.card > img{
    width: 100px;

    display: block;
    margin: 15px auto 0;
}

/*Картки з типами абонементів*/
.subscriptionTypes{
    display: flex;
    box-sizing: border-box;

    padding: 20px;
    margin-bottom: 50px;
}

.col4.card{
    width: 380px;
    height: 600px;
    box-sizing: border-box;

    padding: 10px;
    text-align: center;
}

.col4.card > p{
    padding: 35px;
}

/*Порівняльна таблиця*/

.comparisonTable{
    margin-bottom: 100px;
}
table{
    border-spacing: 8px;

    text-align: center;

}

td{
    margin: 8px;
}

.sameWidth{
    width: 100px;
}

/*Стилі сітки для форми*/
.registrationForm{
    height: 562px;

    display: flex;
    position: relative;
    margin-bottom: 50px;
}

.registration{
    height: 392px;

    position: absolute;
    left: 0;
    top: calc(50% - 392px  / 2 );
    bottom: auto;

    padding-left: 80px;
}

.callMe{
    height: 200px;

    position: absolute;
    right: 0;
    top: calc(50% - 100px);
    bottom: auto;

    padding-right: 80px;
}

.callForm{
    height: 150px;

    padding-top: calc((200px - 150px)/2);
}

.middleBlock{
    position: relative;

    margin: auto;
    text-align: center;
}

.middleBlock > *{
    display: block;
    margin: 20px 20px;
}

input{
    width: 100%;
}

/*Стилі сітки для футера*/
footer{
    width: 100%;
    height: 170px;

    display: flex;
    position: relative;

    box-sizing: border-box;
    padding: 10px;
}

.social{
    position: absolute;
    right: 10px;
    bottom: 10px;

    padding-right: 10px;
}

.copyright{
    position: absolute;
    left: 10px;
    bottom: 10px;

    padding-bottom: 7px;
    padding-left: 10px;
}

.contactInfo{
    margin: auto auto 0 auto;
    padding-bottom: 7px;
}