/*

Tooplate 2121 Wave Cafe

https://www.tooplate.com/view/2121-wave-cafe

*/

html { scroll-behavior: smooth; }

body {
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-size: 18px;
    overflow-x: hidden;
}

.main-page-body {
    background-color: black;
}

.inner-page-body {
    background-color: wight;
}

ul {
    padding: 0;
    margin: 0;
}

nav > ul > li { list-style: none; }

a { 
	color: #3CF;
    text-decoration: none;
    transition: all 0.3s ease; 
}

p { 
    line-height: 1.8; 
    margin-top: 0;
	text-align: justify;
	color: white;
}

h2 { margin-top: 0; }



.center-absolutely {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Выставляем по центру логотип */
}

img {
  max-width: 100%; /* Подстраиваюсь под размер любого контейнера */
  height: auto; /* Мои пропорции не меняются при изменении размера */
}

.container {
  display: flex; /* displays flex-items (children) inline */
  flex-direction: column; /* stacks them vertically */
  height: 100%; /* needs to take the parents height, alternative: body {display: flex}-100%(vh) */
  background-color: white;
}
.m-container {
	padding: 40px;
	padding-top: 100px;
}
/* Внесем несколько строк 'чистого' кода для сохранения плавающих элементов в контейнере */
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
.m-row {
    display: flex;
    justify-content: space-between;
}

.m-left {
    width: 40%;
	order: 0;
}
.m-right{
    width: 55%;
	order: 1;
}

.content {
  flex: 1; /* takes the remaining height of the "container" div */
  overflow: auto; /* to scroll just the "main" div */
  margin-top: 89px;
  padding-bottom: 5%;
}
.section {
  height: 100%; /* takes the visible area of the "main" div */
  overflow: auto; /* recommended */
  border-bottom: 1px solid; 
}
.text h2{
  height: 100%; /* takes the visible area of the "main" div */
  overflow: auto; /* recommended */
}
.text h2{
	font-size: 8px;
}

.header {
	background: black;
	position: fixed; 
	top: 0; 
	left: 0; 
	width: 100%;
	height: 85px;
	}
.footer {
	    background: black;
		position: fixed; 
		bottom: 0; 
		left: 0; 
		width: 100%;
		height: 5%;
}
@media (max-width: 1130px) and (min-width: 992px) {
    .tm-left-inner { max-width:380px;}
    .tm-site-name { font-size: 2.6rem; }
    .tm-site-logo { width: 85%; }
    .tm-page-link { width: 100%; }
    .tm-page-link-icon { margin-right: 15px; }
    .m-left { 
	width: 45%; 
	order: 1;
	}
    .m-right { 
	width: 55%;
    order: 0;
	}
}

@media (max-width: 991px) {
    .tm-left-inner { position: static; }
    .m-left, .m-right { width: 100%; }
	.m-left {order: 1;}
    .m-right {
	   order: 0;
	   font-size: 14px;}
    .m-row { display: block; }
   .text h2{
	   	   font-size: 10px;
		   vertical-align: middle;
           text-align: center;}
}

@media (max-width: 574px) {
   .m-left {order: 1;}
   .m-right {
	   order: 0;
	   font-size: 14px;}
   .text h2{
	   	   font-size: 10px;
		   vertical-align: middle;
           text-align: center;}
}

@media (max-width: 550px) and (min-width: 501px) {
   .m-left {order: 1;}
   .m-right {
	   order: 0;
	   font-size: 14px;}
   .text h2{
	   	   font-size: 10px;
		   vertical-align: middle;
           text-align: center;}
}

@media (max-width: 500px) {
	   
   .m-left {order: 1;}
   .m-right {
	   order: 0;
	   font-size: 14px;}
   .text h2{
	   	   font-size: 10px;
		   vertical-align: middle;
           text-align: center;}
}

@media (max-width: 479px) {
   .m-left {order: 1;}
   .m-right {
	   order: 0;
	   font-size: 14px;}
   .text h2{
	   	   font-size: 10px;
		   vertical-align: middle;
           text-align: center;}
    }