@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap");

:root {
	/*--accent: #f9f5f2;
    --accent-middle: #F1EBE7;
    --accent-dark: #1f1f1f;
    --accent-button: #1f1f1f;*/
    --accent: #f2f6f9;
    --accent-middle: #cee4ff;
    --accent-dark: #1f1f1f;
    --accent-button: #3782DD;
}


body {
    font-family: "Roboto", Arial, sans-serif;
    color: var(--accent-dark);
    text-align: center; 
    font-size: 20px;
    line-height: 30px;
}

h1, h2 {font-size: 40px; font-weight: 600; line-height: 120%;}
h2 {font-size: 36px; line-height: 1.2; font-weight: 600;}
.title {margin-bottom: 40px;}

.home, .catalog, .about, .registration, .who, .advantage, .special, .offer, .intro {
    margin-bottom: 80px;
}

.button {
    background: var(--accent-button);
    color: #fff;
    line-height: 40px;
    border:none;
    margin: 0;
    border: 1px solid transparent;
}

.button:hover {color: #fff; background: #0e468b;}

.text-left {text-align: left;}
.text-right {text-align: right;}


.header { padding: 15px 0; position: relative; z-index: 2; background: var(--accent);}
.header-items {display: flex; align-items: center; justify-content: space-between;}
.header-item {display: flex; align-items: center;}
.header-logo {width: 40px; margin-right: 90px;}
.header-phone {position: relative; padding-left: 40px; line-height: 30px; margin-right: 30px;}
.header-phone:before { background: url(../images/call.svg) no-repeat center/14px 14px var(--accent-button); width: 30px; height: 30px; position: absolute; top: 0; left: 0; content: ""; border-radius: 50%; overflow: hidden; white-space: nowrap;}

.intro {padding-bottom: 40px; padding-top: 20px; background: var(--accent); text-align: left;}
.intro-items {display: flex; align-items: center; padding-bottom: 20px;}
.intro-item {width: 50%;}
.intro-tryit {max-width: 180px; margin: 10px 150px 0 auto;}
.intro-image {width: 100%;}
.intro-blue {color: var(--accent-button); font-weight: 600;}
.intro-black {color: var(--accent-dark); font-weight: 600;}
.intro-description {margin-bottom: 40px;}
.intro-last {font-weight: 600; text-align: center;}

.minute {color: #fff; text-align: left; margin-bottom: 40px;}
.minute-items {display: flex; flex-wrap: wrap; align-items: center; background-color: var(--accent-button); padding: 60px; border-radius: 10px;}
.minute-description {font-size: 38px; font-weight: 500; line-height: 50px;}

.minute3-container {display: flex; flex-wrap: wrap;}
.minute3-items {width: 50%;}
.minute3-item {display: flex; align-items: center;}
.minute3-image {max-width: 80px;}
.minute3-title {text-align: left;}
.minute3-description {font-size: 22px; font-weight: 600; line-height: 28px; text-align: left; padding: 20px;}
.minute3-img {margin: 20px;}
.minute3-img img {margin: auto 0 auto auto; height: 100%; width: 100%; max-height: 100%;}

.home {margin-top: 40px;}
.home-items {display: flex; flex-wrap: wrap; margin: 0 auto; max-width: 900px;}
.home-item {width: 50%; padding: 10px;} 
.home-conainer {padding: 20px; border-radius: 15px; overflow: hidden; background: var(--accent); height: 100%;}
.home-icon {max-height: 50px; max-width: 50px; margin: 10px auto 20px auto;}
.home-text { font-size: 24px; font-weight: 600; line-height: 28px; color: var(--accent-button);}
.home-description {padding: 10px;}

.special-container {background: var(--accent); max-width: 600px; padding: 40px 0; margin: 0 auto; border-radius: 20px;}
.special-items {padding: 0 20px;}
.special-item {display: flex; margin-top: 20px;}
.special-image {margin: 0 auto; max-width: 400px; margin-bottom: 20px;}
.special-image-people {min-width: 125px; padding-top: 10px;}
.special-title {padding-top: 20px; font-size: 24px; font-weight: 600; line-height: 24px;}
.special-description {padding-top: 20px; font-size: 18px;}

.advantage {padding-top: 260px;}
.advantage-description {max-width: 840px; margin: 0 auto; padding: 30px; font-size: 30px; font-weight: 500; line-height: 36px; background: var(--accent-middle);  color: var(--accent-button); text-align: left; border-radius: 20px; position: relative;}
.advantage-image {position: absolute; right: 0; top: -190%; max-width: 400px; width: 100%; height: 100%;}

.who {background: var(--accent); padding: 40px 0;}
.who-conainer {display: flex;  align-items: center; justify-content: center; width: 100%; height: 100%; padding: 20px; border-radius: 15px; overflow: hidden; background: #fff;}
.who-items {display: flex; flex-wrap: wrap;}
.who-item {width:50%; padding: 10px;}
.who-icon {max-height: 50px; max-width: 50px; width: 100%; margin-right: 20px; position: relative; overflow: hidden; }
.who-text {padding: 10px; font-size: 24px; font-weight: 600; line-height: 24px;}

.offer-items {display: flex; flex-wrap: wrap; margin: 40px -10px;}
.offer-item {width: 50%; padding: 10px;} 
.offer-conainer { display: flex; align-items: center; width: 100%; height: 100%; padding: 20px; border-radius: 15px; overflow: hidden; border: solid 1px var(--accent-button); text-align: left;}
.offer-img {width: 100%; min-width: 200px; max-width: 200px; margin-right: 20px; position: relative; overflow: hidden; }
.offer-text {padding: 10px;}
.offer-title {font-size: 22px; font-weight: 600; line-height: 28px; padding-bottom: 10px;}
.offer-description {font-size: 18px;}
.offer-description a {color:var(--accent-button); text-decoration: underline;}
.offer-description a:hover {color: var(--accent-button); text-decoration: underline;}

.icon-right {margin: 0 0 0 auto; text-align: right;}

.about-items {display:flex; align-items:center; text-align: left; margin: 40px 0;}
.about-items .description {width: 40%; padding: 10px;}
.about-image {width: 60%;}
.about-image img {margin: 0 0 0 auto}

.registration {padding: 20px 0; color: #fff; text-align: left;}
.registration-items {display: flex; flex-wrap: wrap; align-items: center; background-color: var(--accent-dark); padding: 60px; border-radius: 20px;}
.registration-item-60 {width: 60%;}
.registration-item-40 {width: 40%;}
.registration-description {margin-bottom: 60px; font-size: 38px; font-weight: 500; line-height: 50px;}
.registration-button button { background: #fff; color: #000; border: 2px solid transparent; border-radius: 5px; line-height: 42px; padding: 0 30px; transition: all 0.5s ease;}
.registration-button button:hover {background: var(--accent-dark); color: #fff; border: 2px solid #fff; }

/*кнопка звонка*/

.callback-bt { background:#3782DD; border:2px solid #3B93D7; border-radius:50%; box-shadow:0 8px 10px rgba(56,163,253,0.3); cursor:pointer; height:68px; text-align:center; width:68px; position: fixed; right: 8%; bottom: 10%; z-index:999; transition:.3s; -webkit-animation:hoverWave linear 1s infinite; animation:hoverWave linear 1s infinite;}

.callback-bt:hover i { font-size:40px; transition:.3s;}
.callback-bt i { color:#fff; font-size:34px; transition:.3s; line-height: 66px;transition: .5s ease-in-out;}

.callback-bt i  {animation: 1200ms ease 0s normal none 1 running shake; animation-iteration-count: infinite; -webkit-animation: 1200ms ease 0s normal none 1 running shake; -webkit-animation-iteration-count: infinite;}

@-webkit-keyframes hoverWave { 
    0% { box-shadow:0 8px 10px rgba(56,163,253,0.3),0 0 0 0 rgba(56,163,253,0.2),0 0 0 0 rgba(56,163,253,0.2)}
    40% { box-shadow:0 8px 10px rgba(56,163,253,0.3),0 0 0 15px rgba(56,163,253,0.2),0 0 0 0 rgba(56,163,253,0.2)}
    80% { box-shadow:0 8px 10px rgba(56,163,253,0.3),0 0 0 30px rgba(56,163,253,0),0 0 0 26.7px rgba(56,163,253,0.067)}
    100% { box-shadow:0 8px 10px rgba(56,163,253,0.3),0 0 0 30px rgba(56,163,253,0),0 0 0 40px rgba(56,163,253,0.0)}}@keyframes hoverWave { 0% { box-shadow:0 8px 10px rgba(56,163,253,0.3),0 0 0 0 rgba(56,163,253,0.2),0 0 0 0 rgba(56,163,253,0.2)}
    40% { box-shadow:0 8px 10px rgba(56,163,253,0.3),0 0 0 15px rgba(56,163,253,0.2),0 0 0 0 rgba(56,163,253,0.2)}
    80% { box-shadow:0 8px 10px rgba(56,163,253,0.3),0 0 0 30px rgba(56,163,253,0),0 0 0 26.7px rgba(56,163,253,0.067)}
    100% { box-shadow:0 8px 10px rgba(56,163,253,0.3),0 0 0 30px rgba(56,163,253,0),0 0 0 40px rgba(56,163,253,0.0)}
}

/* animations icon */

@keyframes shake {
    0% {transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -webkit-transform: rotateZ(0deg);}
    10% {transform: rotateZ(-30deg); -ms-transform: rotateZ(-30deg); -webkit-transform: rotateZ(-30deg);}
    20% {transform: rotateZ(15deg); -ms-transform: rotateZ(15deg); -webkit-transform: rotateZ(15deg);}
    30% {transform: rotateZ(-10deg); -ms-transform: rotateZ(-10deg); -webkit-transform: rotateZ(-10deg);}
    40% {transform: rotateZ(7.5deg); -ms-transform: rotateZ(7.5deg); -webkit-transform: rotateZ(7.5deg);}
    50% {transform: rotateZ(-6deg); -ms-transform: rotateZ(-6deg); -webkit-transform: rotateZ(-6deg);}
    60% {transform: rotateZ(5deg); -ms-transform: rotateZ(5deg); -webkit-transform: rotateZ(5deg);}
    70% {transform: rotateZ(-4.28571deg); -ms-transform: rotateZ(-4.28571deg); -webkit-transform: rotateZ(-4.28571deg);}
    80% {transform: rotateZ(3.75deg); -ms-transform: rotateZ(3.75deg); -webkit-transform: rotateZ(3.75deg);}
    90% {transform: rotateZ(-3.33333deg); -ms-transform: rotateZ(-3.33333deg); -webkit-transform: rotateZ(-3.33333deg);}
    100% {transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -webkit-transform: rotateZ(0deg);}}

@-webkit-keyframes shake {
    0% {transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -webkit-transform: rotateZ(0deg);}
    10% {transform: rotateZ(-30deg); -ms-transform: rotateZ(-30deg); -webkit-transform: rotateZ(-30deg);}
    20% {transform: rotateZ(15deg); -ms-transform: rotateZ(15deg); -webkit-transform: rotateZ(15deg);}
    30% {transform: rotateZ(-10deg); -ms-transform: rotateZ(-10deg); -webkit-transform: rotateZ(-10deg);}
    40% {transform: rotateZ(7.5deg); -ms-transform: rotateZ(7.5deg); -webkit-transform: rotateZ(7.5deg);}
    50% {transform: rotateZ(-6deg); -ms-transform: rotateZ(-6deg); -webkit-transform: rotateZ(-6deg);}
    60% {transform: rotateZ(5deg); -ms-transform: rotateZ(5deg); -webkit-transform: rotateZ(5deg);}
    70% {transform: rotateZ(-4.28571deg); -ms-transform: rotateZ(-4.28571deg); -webkit-transform: rotateZ(-4.28571deg);}
    80% {transform: rotateZ(3.75deg); -ms-transform: rotateZ(3.75deg); -webkit-transform: rotateZ(3.75deg);}
    90% {transform: rotateZ(-3.33333deg); -ms-transform: rotateZ(-3.33333deg); -webkit-transform: rotateZ(-3.33333deg);}
    100% {transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -webkit-transform: rotateZ(0deg);}}
/* конец кнопки звонка */

.footer-navigation { display: flex; flex-wrap: wrap; align-items: center; border-top: 1px solid var(--accent-dark); padding: 40px 0;}
.footer-navigation-item {padding: 10px;}
.footer-navigation-item .button {padding: 10px; background: var(--accent-dark);}
.footer-logo {width: 60px;}
.footer-text {font-weight: 600;}

.footer-icon-img {width: 35px;}

@media (min-width: 1400px) {
    .intro-image-must-have { right: 5%;}
}

@media (max-width: 1020px) { 
    .about-items {display: block; text-align: center;}
    .about-items .description, .about-image {width: 100%;}     
    .home-image {width: 30%;}
    
}

@media (max-width: 906px) {
    .about-image img {margin: 0 auto 0 auto;}
    .intro {padding-bottom: 0;}
    .intro-items {display: block;}
    .intro-item, .who-item {width: 100%;}
    .intro-tryit {display: none;}
    .intro-content { text-align: center;}

    .home-item {display: block; text-align: center;}
    .home-image {width: 100%; max-width: 500px; margin: auto 0 auto auto; display:none}
}

@media (max-width: 875px) {
    .offer-item, .registration-item-60, .minute3-items {width: 100%;}
    .registration-item-40 {display: none;}
    .advantage {padding-top: 0px; padding-bottom: 40px; margin: 0;}
    .advantage-image, .minute3-img {position: relative; margin: 0 auto; padding-bottom: 20px;}
    .minute3-img {margin: 40px}
    .advantage-description {text-align: center;}
}


@media (max-width: 576px) {  
    body {font-size: 16px; line-height: 18px;}
    h1 {font-size: 30px; font-weight: 600; line-height: 140%;}
    h2, .registration-description, .minute-description {font-size: 22px; line-height: 140%; font-weight:600;}
    .who-text, .home-text, .advantage-description, .special-title, .minute3-description {font-size: 20px; line-height: 140%; font-weight: 500;}
    .home-item, .footer-icons, .footer-text {width: 100%;}
    .footer-info, .footer-logo {margin-bottom: 10px;}
    .footer-text {margin: 0; padding: 10px 0;}
    .header-logo {margin-right: 10px;} 
    .header-phone {display: none;}
    .offer-conainer {flex-wrap: wrap; text-align: center;}
    .offer-img {margin: 0 auto;}
}