:root {
  --yellow: #ffc627;
  --navy: #394276;
  --green: #05c46b;
  --lgrey: #ebebeb;
  --grey: #8a8eaa;
} 
body {
	font-size:15px;
	font-family: 'Inter', sans-serif;
	line-height: 1.5em
}
a {
	color:var(navy);
}
h1,h2,h3,h4,h5,h6 {
	font-family: 'Montserrat', sans-serif;
	font-weight:700;
	line-height:1.1;
}
h1 {
	font-size:50px;
	letter-spacing: -0.5px;
	margin:0 0 30px 0;
}
h2 {
	font-size:40px;
	letter-spacing: -0.5px;
	margin:0 0 30px 0;
}
h5 {
	margin:0 0 20px 0;
}
.header {
	margin-top:50px;
}
.btn {
	background: var(--yellow);
	color: var(--navy);
	border-radius:30px;
	padding:12px 28px;
	border:0;
	font-size:15px;
	font-weight:600;
}
.grey {
	color:var(--grey);
}

.navy {
	color:var(--navy);
}
.bg-navy {
	background:var(--navy);
}
.bg-green {
	background:var(--green);
}
.navbar-nav li a {
	color:var(--navy);
	font-weight:600;
}
.navbar-nav li.nav-item a.nav-link {
	padding:0 25px;
}
.navbar-nav li.nav-item:last-child a.nav-link {
	padding-right:0;
}
.header .navbar-toggler-icon {
	background:var(--grey);
	height:5px;
	border-radius:10px;
	width:100%;
	display: block;
}
.header button.navbar-toggler {
    padding: 10px;
    width: 60px;
}
.school-task-made-easy {
	min-height:400px;
	margin-top:130px;
	position: relative;
}
.school-task-made-easy img { 

}
.school-table {
	background: var(--lgrey);
    height: 150px;
    width: 100%; 
    margin-top:-120px;
    position: relative;
    z-index: -1;
}
section .title {
	font-family:'Inter', sans-serif;
	font-weight:500;
	font-size:16px;
	text-transform: uppercase; 
	margin-bottom:30px;
}
section .title.grey {
	text-align:center;
}
section .title.grey::before,
section .title.grey::after {
	background:var(--grey);
	content:'';
	display: inline-block;
	width:50px; 
	height:3px; 
	margin:0 20px 4px 20px;
}
section .title::after {
	background:#fff;
	content:'';
	display: inline-block;
	width:50px; 
	height:3px; 
	margin-bottom:4px;
	margin-left:15px;
}
 
section.about-snapped {
	padding:80px 0 0 0;
}
section.phone-snapped,
section.gamification-rewards,
section.registration-snapped, footer {
	padding:80px 0;
}
section.about-snapped img {
	margin-top: 50px;
	margin-bottom:-65px;
}
section p.big {
	font-size:18px;
	line-height:1.5;
	margin-bottom:30px;
}
section p {
	font-size:14px;
	line-height: 1.7;
	margin-bottom:25px
}
section.solution-snapped {
	padding:100px 0 80px 0;
}
.snapped-users img, .phone-steps img {
	margin-bottom:30px;
}
.snapped-users p {
	padding-left:10px;
	padding-right: 10px
}
.phone-steps, .yellow-icons {
	margin-left:-50px;
	margin-right:-50px;
}
.phone-steps [class*=col], .yellow-icons [class*=col] {
	padding-left: 50px;
	padding-right:50px;
}
.yellow-icons img {
	margin:0 30px 30px 30px; 
}
form .form-group {
	margin-bottom:30px;
}
.form-group input {
	height: auto;
    padding: 15px;
    border-radius: 11px;
    border: 0;
}
#mainmenu-mobile .modal-dialog {
	width:100%;
	max-width:100%;
	margin:0;
	border-radius:0;
	height: 100%
}
#mainmenu-mobile .modal-content {
	border:0;
	background: var(--navy);
	border-radius:0;
	height: 100%
}
#mainmenu-mobile  li.nav-item a.nav-link {
    color: var(--lgrey);
    font-size: 25px;
    font-weight: 700;
    text-align: center;
    text-shadow: 4px 3px 0 #000;
    padding: 17px 0;
    text-transform: uppercase;
    letter-spacing: 3px;
}
#mainmenu-mobile  .close {
	position: absolute;
    top: 0;
    right: 0;
    margin: 30px;
}
#thankyouModal .modal-content, #errorModal .modal-content {
	border:0 !important;
	border-radius:30px;
}
.step, .phone {
	position: relative;
}
.step1 .phone-bg {
	background:url(../img/phone1.svg);
	background-size:cover;
	width:275px;
	height:562px;
	margin:0 auto;
}
.step2 .phone-bg {
	background:url(../img/phone2.svg);
	background-size:cover;
	width:275px;
	height:562px;
	margin:0 auto;
}
.step3 .phone-bg {
	background:url(../img/phone1.svg);
	background-size:cover;
	width:275px;
	height:562px;
	margin:0 auto;
}
.step4 .phone-bg {
	background:url(../img/phone3.svg);
	background-size:cover;
	width:275px;
	height:562px;
	margin:0 auto;
}
.phone-info img {
	width:80px;
	margin-bottom:20px;
}
.step2 .phone-info img {
	width:160px;
}
.phone-info {
	padding:230px 40px 30px 40px;
}
#steps-mobile .carousel-indicators li {
    text-indent: 0;
    width: 30px;
    color: var(--green);
    text-align: center;
    height: 30px;
    line-height: 30px;
    border-radius: 50%;
    font-weight: 600;
    font-size: 12px;
    margin-left: 10px;
    margin-right: 10px;
}
.header.onscroll {
	-webkit-transition: opacity 2.0s ease-in;
       -moz-transition: opacity 2.0s ease-in;
         -o-transition: opacity 2.0s ease-in;
                                  opacity: 1;
	position:fixed;
	margin-top: 0;
	padding:10px 0;
	top:0;
	width:100%;
	z-index:100;
	background:#fff;
}
@media screen and (min-width:992px) { 
	.step .phone::after {
		content:'';
		background:url(../img/arrow.svg) no-repeat;
		background-size:cover;
		width:50px;
		height:43px;
		position: absolute;
		top:50%;
		right:-50%;
		margin-right:25px;
		margin-top:-60px;
		display: inline-block;
	}
	.step4 .phone::after {
		display: none
	}
}

@media screen and (min-width:768px) and (max-width:991px)  { 
	.step .phone::after {
		content:'';
		background:url(../img/arrow.svg) no-repeat;
		background-size:cover;
		width: 31px;
	    height: 27px;
	    position: absolute;
	    top: 50%;
	    right: -50%;
	    margin-right: 35px;
	    margin-top: -44px;
		display: inline-block;
	}
	.step4 .phone::after {
		display: none
	}
}

@media screen and (max-width:991px) {
	.school-task-made-easy {
	    min-height: 0;
	    margin-top: 80px; 
	}
	.school-task-made-easy  img {
		width:80%;
	}
	section.about-snapped img {
	    margin-top: 0;
	    margin-bottom: -87px;
	}
	.phone-steps, .yellow-icons {
		margin-left:-20px;
		margin-right:-20px;
	}
	.phone-steps [class*=col], .yellow-icons [class*=col] {
		padding-left: 20px;
		padding-right: 20px;
	}
}
@media screen and (max-width:767px) {
    br {
        display:none;
    }
    section#registration [class*=col]:last-child img {
        margin-top:40px;
    }
    footer [class*=col]:last-child > div {
        justify-content: flex-start!important;
        margin-top:30px;
    }
	.yellow-icons img {
	    margin: 0 30px 30px 30px;
	    width:150px;
	}
	section.about-snapped img {
       margin-bottom: -74px;
        width: 90%;
    }
    .phone-steps p {
        margin-bottom:50px;
    }
    
}
@media screen and (max-width:580px) {
    .phone-steps img {
        width: 200px;
         max-width: 100%;
    }   
    .snapped-users img {
        width:350px;
        max-width: 100%;
    }
    .container {
        padding-left: 25px !important;
        padding-right: 25px !important;
    }
}