/* @font-face {
      font-family:"Epilogue-Bold";
      src: url("../fonts/Epilogue-Bold.ttf");
}*/
@font-face {
    font-family: 'Oswald';
    src: url('../fonts/Oswald-Bold.eot');
    src: local('Oswald Bold'), local('Oswald-Bold'),
        url('../fonts/Oswald-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Oswald-Bold.woff') format('woff'),
        url('../fonts/Oswald-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Oswald';
    src: url('../fonts/Oswald-Regular.eot');
    src: local('Oswald Regular'), local('Oswald-Regular'),
        url('../fonts/Oswald-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Oswald-Regular.woff') format('woff'),
        url('../fonts/Oswald-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face{
	font-family: 'Northwell';
    src: url('../fonts/Bachelorette.otf');
    src: local('Bachelorette'), local('Bachelorette'),
        url('../fonts/Bachelorette.otf?#iefix') format('embedded-opentype'),
    font-weight: normal;
    font-style: normal;
}
@font-face {
      font-family:"Epilogue";
      src: url("../fonts/Epilogue-Regular.ttf");
}
/* ======================================= Обнуление ================================================= */
* { 
	box-sizing: border-box;
    padding: 0; 
    margin: 0;  
  } 
fieldset, img, abbr { 
    border: 0; 
  } 
address, caption, cite, code, dfn, em,  
h1, h2, h3, h4, h5, h6, strong, th, var { 
  font-weight: normal; 
  font-style: normal; 
  } 
ul { 
  list-style: none; 
  } 
caption, th { 
  text-align: left; 
  } 
h1, h2, h3, h4, h5, h6 { 
  font-size: 1.0em; 
  } 
q:before, q:after { 
  content: ''; 
  } 
a, ins { 
  text-decoration: none; 
  }
/* ======================================= Основные стили ================================================= */
body{
    font-family: 'Epilogue', sans-serif, 'Dela Gothic One';
    font-size:17px;  
    color: black; 
    background-color:#fff;
}
a{
    color: #757575;
	font-size: 17px;
}
/* a:hover{             
    text-decoration: underline;
} */
p{
	font-size: 18px;
	line-height: 28px;
	color: #757575;
	font-weight: 500;
	margin: 8px 0 10px 0;
}
h4{
    font-size: 16px;
    line-height: 91px;
	margin: 2px 0 10px 0;
	color: #2B788B;
	font-weight: 600;
}
h1{
	font-style: normal;
    font-size: 56px;
    line-height: 50px;
    font-weight: 800;
    margin: 2px 0 10px 0;
}
h2{
	font-style: normal;
    font-size: 48px; 
    line-height: 51px; 
	font-weight: 800;
	margin: 2px 0 10px 0;
}
h3{
    font-size: 30px;
    line-height: 54px; 
	margin: 2px 0 10px 0;
}
/* h4{
    font-size: 24px;
    line-height: 33px; 
	margin: 2px 0 10px 0;
} */
h5{
    font-size: 17px;
    line-height: 25px; 
	margin: 2px 0 10px 0;
}
/* img{
	width:100%;
} */

/* ======================БИБЛИОТЕКА========================== */

.width_1320{
    width: 1320px;
    margin: 0 auto; 
}
.width_100{
	width:100%;
	padding:0 12px;
	box-sizing:border-box;
}
.width_80{
	width:80%;
	padding:0 12px;
	box-sizing:border-box;
}
.width_66{
	width:66.66666%;
	padding:0 12px;
	box-sizing:border-box;
}
.width_60{
	width:60%;
	padding:0 12px;
	box-sizing:border-box;
}
.width_50{
	width:50%;
	padding:0 12px;
	box-sizing:border-box;
}
.width_40{
	width:40%;
	padding:0 12px;
	box-sizing:border-box;
}
.width_33{
	width:33.33333333%;
	padding:0 12px;
	box-sizing:border-box;
}
.width_30{
	width:30%;
	padding:0 12px;
	box-sizing:border-box;
}
.width_25{
	width:25%;
	padding:0 12px;
	box-sizing:border-box;
}
.width_23{
	width:23%;
	padding:0 12px;
	box-sizing:border-box;
}
.width_20{
	width:20%;
	padding:0 12px;
	box-sizing:border-box;
}
.width_16{
	width:16.333333%;
	padding:0 12px;
	box-sizing:border-box;
}
.width_8{
	width:8.666666%;
	padding:0 12px;
	box-sizing:border-box;
}
.d_flex{
	display:flex;
	flex-wrap:wrap;
}
.d_flex_between{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}
.d_flex_around{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-around;
}
.d_none{
	display:none;
}
.text_center{
	text-align: center;
}
/* =============================================mobile menu======================================= */


/* МОБІЛЬНЕ МЕНЮ */
/* Main menu positionning */
.main-nav {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    text-align: center;
    background: #343434;
    opacity: 0;
    z-index: -1;
    visibility: hidden;
    transition: all .375s;
}

.main-nav.is-open {
    opacity: 1;
    z-index: 100;
    visibility: visible;
}

/* Yellow band effect */
.main-nav::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: -15px;
    background: #50735F;
    transform-origin: 0 0;
	transform: skew(-14deg) translateX(-120%);
    transition: all .275s .1s;
}

.main-nav.is-open::before {
    transform: skew(-14deg) translateX(0);
}

/* Skewing effect on menu links */
.main-nav ul {
    display: inline-flex;
    flex-direction: column;
    height: 93%; /* Should be 100%, but we have a notice message :D */
    align-items: flex-end;
    justify-content: center;
    transform: translateX(-18%) skew(-16deg);
}

.main-nav li {
    display: block;
    margin: .5rem 0;
    text-align: right;
    transform: skew(16deg);
}

/* Apparition effect on links */
.main-nav a {
    opacity: 0;
    transform: translateY(-10px);
}

.main-nav.is-open a {
    opacity: 1;
    transform: translateY(0);
}
.main-nav li:nth-child(1) a {
	transition: all 275ms 175ms
}
.main-nav li:nth-child(2) a {
	transition: all 275ms 225ms
}
.main-nav li:nth-child(3) a {
	transition: all 275ms 275ms
}
.main-nav li:nth-child(4) a {
	transition: all 275ms 325ms
}
.main-nav li:nth-child(5) a {
	transition: all 275ms 375ms
}


/* Decoration */
.main-nav ul,
.main-nav li {
	list-style: none;
	padding: 0;
}
.main-nav a {
    display: block;
    padding: 12px 0;
    color: #fffeff;
    font-size: 1.4em;
    text-decoration: none;
    font-weight: bold;
}

/* Burger Style: @see: https://codepen.io/CreativeJuiz/full/oMZNXy */
.open-main-nav {
	position: absolute;
	top: 75px;
	padding-top: 20px;
	right: 15px;
	z-index: 1000;
	background: none;
	border: 0;
	cursor: pointer;
}
.open-main-nav:focus {
	outline: none;
}
.burger {
    position: relative;
    display: block;
    width: 28px;
    height: 4px;
    margin: 0 auto;
    background: #ffffff;
    transform: skew(5deg);
    transition: all .275s;
}

.burger:after,
.burger:before {
	content: '';
    display: block;
    height: 100%;
    background: #ffffff;
    transition: all .275s;
}

.burger:after {
	transform: translateY(-12px) translateX(-2px) skew(-20deg);
}

.burger:before {
	transform: translateY(-16px) skew(-10deg);
}

/* Toggle State part */
.is-open .burger {
	transform: skew(5deg) translateY(-8px) rotate(-45deg);
}

.is-open .burger:before {
	transform: translateY(0px) skew(-10deg) rotate(75deg);
}

.is-open .burger:after {
	transform: translateY(-12px) translateX(10px) skew(-20deg);
    opacity: 0;
}

/* MENU Text part */

.burger-text {
    display: block;
    font-size: .675rem;
    letter-spacing: .05em;
    margin-top: .5em;
    text-transform: uppercase;
    font-weight: 500;
    text-align: center;
    color: #ffffff;
}


/* Slow motion button */
[id="slowmo"] {
	position: absolute;
	top: 20px;
	right: 20px;
	padding: 10px;
	border: 0;
	font-size: 1rem;
	background: #FEDC2A;
	color: #5A3B5D;
	font-weight: bold;
	cursor: pointer;
	transition: all .275s;
}

[id="slowmo"] span {
	display: block;
	font-weight: normal;
}

[id="slowmo"]:hover,
[id="slowmo"]:focus {
	background: #5A3B5D;
	color: #FEDC2A;
}

[id="slowmo"].is-slowmo span:after {
	content: 'Activated';
	display: block;
	font-weight: bold;
}

/* When slowmotion is activated */

.is-slowmo + .device .open-main-nav .burger,
.is-slowmo + .device .open-main-nav .burger:before,
.is-slowmo + .device .open-main-nav .burger:after,
.is-slowmo + .device .main-nav,
.is-slowmo + .device .main-nav::before,
.is-slowmo + .device .main-nav a {
	transition-duration: 3s;
}
.is-slowmo + .device .main-nav li:nth-child(1) a {
	transition-delay: 1750ms
}
.is-slowmo + .device .main-nav li:nth-child(2) a {
	transition-delay: 2250ms
}
.is-slowmo + .device .main-nav li:nth-child(3) a {
	transition-delay: 2750ms
}
.is-slowmo + .device .main-nav li:nth-child(4) a {
	transition-delay: 3250ms
}
.is-slowmo + .device .main-nav li:nth-child(5) a {
	transition-delay: 3750ms
}

/* Notice */
.notice {
	position: absolute;
	bottom: -15px;
	left: 0; right: 0;
	padding: 20px;
	background: #F2F2F2;
	color: #5A3B5D;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	z-index: 100;
	text-align: center;
}
.notice strong {
	font-weight: 700;
}
.notice a {
	padding: 2px 3px;
	background: #FEDC2A;
	text-decoration: none;
}



/* =============================================knopka======================================= */
.blue_button{
    background-color: #C3DCE3;
    color: #2B788B;
    width: 152px;
    display: inline-block;
    text-align: center;
    border-radius: 50px;
    padding: 12px;
}
.blue_button1{
	position: relative;
	font-weight: bold;
    background-color: #C3DCE3;
    color: #2B788B;
    width: 182px;
    display: inline-block;
    text-align: center;
    border-radius: 34px;
    padding: 60px 5px 12px 5px;
    margin-left: -30px;
}
.pink_button {
    position: relative;
    font-weight: bold;
    background-color: #F2D4DC;
    color: #945069;
    width: 152px;
    display: inline-block;
    text-align: center;
    border-radius: 34px;
    padding: 60px 5px 12px 5px;
}
header .leter span {
    background-color: #C3DCE3;
    color: #2B788B;
    text-align: center;
    border-radius: 50%;
    padding: 8px 13px;
    margin-right: 10px;
    width: 40px;
    height: 40px;
    display: inline-block;
}
/* ======================================thanks==================================== */
header{
	padding: 15px;
	background: #F6F5F4;
	border-bottom: 1px solid #E0E0E0;
}
header a{
	margin-right: 30px;
}
header ul{
	margin-bottom: 0;
}
.center{
	align-items: center;
}
#slider{
	padding: 15px;
	background: #F6F5F4;
}
#slider span{
	color: #2B788B;
}
#slider i{
	color: #2B788B;
}
#slider .margin{
	margin-top: 34px;
}
#slider .rotate{
	transform: rotate(270deg);
}
.black{
	color: black;
}
.relative{
	position: relative;
}
.leaf1{
    position: absolute;
    z-index: 2;
    left: 8%;
    width: 16%;
    top: 110px;
}
.boy1 {
    position: relative;
    z-index: 4;
    width: 60%;
    margin-left: 10%;
}
.leaf2 {
    position: absolute;
    z-index: 6;
    right: 24px;
    width: 52%;
    bottom: -62px;
}
#language{
	padding: 69px 10px;
}
.girl2{
	width: 100%;
}
#vocabulary{
	padding: 36px 10px 0px 10px;
	background: #F6F5F4;
}
.girl3{
	width: 100%;
}
#progress{
	padding: 60px 10px;
}
.girl4{
	width: 100%;
}
.top{
	margin-top: 50px;
}
.krosovki{
	position: absolute;
    top: -29px;
    left: 10%;
}
.audio {
    position: absolute;
    top: -35px;
    left: 10%;
}
}
footer{
	padding: 26px 10px;
	background: #F6F5F4;
}
footer a{
	margin-right: 30px;
}
footer .fborder{
	border-bottom: 1px solid #E0E0E0;
}
footer .top{
	padding: 26px 10px;
}
footer p{
	text-align: center;
}

/* СКРОЛ ВСЮДИ */
/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px #f5f5f5; 
  border-radius: 0;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #2B788B;
  border-radius: 0;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #2B788B;
}
/*=================================АДАПТИВКА=========================*/
@media screen and (max-width: 1024px){
	
}
@media screen and (max-width: 768px){
	
}
@media screen and (max-width: 426px){
	body{
		text-align: center;
	}
	.d_none{
		display:block;
	}
	.m_none{
		display:none;
	}
	#slider h2{
		font-size: 33px;
	}
	.leaf1{
		display: none;
	}
	.boy1{
		width: 100%;
		margin-top: 15%;
	}
	.leaf2{
		display: none;
	}
	.pink_button {
		width: 108px;
	}
	.blue_button1 {
		width: 121px;
		margin-left: 20px;
	}
	.girl2 {
		display: none;
	}
	.reverse{
		flex-direction: column-reverse;
	}
	.girl4 {
		margin-top: 15%;
	}
	.krosovki {
		left: -9%;
	}
	.column{
		flex-direction: column;
	}
	.column1{
		flex-direction: column;
	}
}
@media screen and (max-width: 376px){
	
}
@media screen and (max-width: 321px){
	
}