@font-face {
    font-family: GillSans;
    src: url(../fonts/GillSans.ttf);
   }
@font-face {
    font-family: GillSansBold;
    src: url(../fonts/GillSansBold.ttf);
   }
   @font-face {
    font-family: GillSemiBold;
    src: url(../fonts/GillSans-SemiBold.ttf);
   }
body 
{
    margin: 0px;
    background: #EDEDF5;
    font-family: GillSans;
    overflow-x: hidden;
}   

p
{
    margin: 10px 0px;
}

body 
p, span, li{
    font-family: GillSans;
    font-size: 24px;  
}
a
{
    font-family: GillSemiBold;
}
.container 
{
    max-width: 1200px;
    margin: auto;
    padding-left: 15px;
    padding-right: 15px;
}
header 
{
    background: #30A3AB;
    position: relative;
}
header  .right_block {
    text-align: right;
}
header img
{
    height: 700px;
    margin-bottom: -5px;
}
.flex
{
    display: flex;
    flex-wrap: wrap;
    margin: 50px 0px;
}
.flex.col3 .flex-item{
    width: 33%;
    margin-bottom: 50px;
}
.flex.col2 .flex-item{
    width: 50%;
    margin-bottom: 50px;
}
.one-screen .flex .flex-item{
    text-align: center;
}
header .flex {
    margin-top: 0px;
}
header .absolite-zvanie
{
    background: #B01C1C;
    position: absolute;
    width: 55%;
    bottom: -196px;
    left: 529px;
    padding: 10px 15px;
    color: #fff;
    text-align: right;
}
header h1 {
    padding-left: 130px;
    color: #fff;
    font-size: 90px;
    padding-top: 70px;
}
.absolite-zvanie .zagp{
    font-size: 27px;
    font-weight: 600;
}
.one-screen h2{
    text-transform: uppercase;
    font-size: 40px;
    margin-top: 250px;
}
.one-screen h2 .green{
    color: #30A3AB;
    font-size: 40px;
}
.green {
    color: #30A3AB;
}
.gren-back-block {
    color: #fff;
    background: #30A3AB;
    padding: 5px 20px;
}
.flex.col2 .left{
    text-align: left;
}
.flex.col2 .right{
    text-align: right;
}
.red-line {
    border: 2px solid #B01C1C;
    margin-bottom: 50px;
}
.two-screen {
    color: #fff;
}
.two-screen .title_p{
    font-size: 40px;
    padding: 50px 0px;
    text-transform: uppercase;
}
.two-screen .flex .flex-item{
    text-align: center;
    margin-bottom: 50px;
}
.icons {
    height: 140px;
}
.green.zags {
    font-size: 40px;
}
.responsive {
    width: 100%;
    height: auto;
}
.four-screen, .two-screen {
    background: #30A3AB;
}
.float-left {
    float: left;
}
.red-zag {
    font-size: 30px;
    text-transform: uppercase;
    color: #fff;
    background: #B01C1C;
    width: 310px;
    padding: 10px 20px;
}
.div-day .red-line {
    width: 365px;
    float: right;
    margin-bottom: 0px;
}
.authortitle {
    color: #B01C1C;
    font-size: 30px;
}
.flex.col3 .flex-item.with20 {
    width: 20%;
}
.flex.col3 .flex-item.with60 {
    width: 60%;
}
.flex.col2 .flex-item.with15 {
    width: 15%;
}
.flex.col2 .flex-item.with85 {
    width: 85%;
}
.div-day .flex.col2 .flex-item{
    margin-bottom: 20px;
}
.four-screen .flex-item.with40 {
    width: 40%;
    position: relative;
}
.four-screen .flex-item.with60 {
    width: 60%;
}
.four-screen .zag {
    font-size: 40px;
    text-transform: uppercase;
    color: #EDEDF5;
}
.four-screen{
    color: #EDEDF5;
    padding: 10px 0px;
}
.cursiv {
    bottom: 0px;
    font-style: italic;
    position: absolute;
}
.line-black {
    border: 2px solid #2E2E29;
}
.four-screen .icons {
    height: 70px;
    margin-right: 20px;
}
.zag-span {
    font-size: 40px;
}
.prepods {
    padding-left: 190px;
    text-align: left;
}
.modals {
    color: #fff;
    background: #e9512a;
    text-decoration: none;
    padding: 20px 30px;
    font-family: GillSans;
    font-size: 24px;
}
.modals:hover {
    background: #b01c1c;
}
.gred-div {
    width: 400px;
    display: grid;
    text-align: center;
    margin-left: 130px;
}
header .flex.col2 .flex-item {
    margin-bottom: 0px;
}
.two-screen .gred-div {   
        margin: auto;
        padding-bottom: 40px;
        margin-top: -60px;
}
.four-screen .gred-div {   
    margin: auto;
    padding-bottom: 40px;
    margin-top: -60px;
}
header .gred-div{
    margin-left: 130px;
}
.three-screen {
    margin-top: 50px;
}
.mobil-version {
    display: none;
}
@media (max-width: 1510px) {
    header .absolite-zvanie{
    bottom: -225px;
}}
@media (max-width: 1500px) {
    header .absolite-zvanie{
        bottom: -75px;
    }
    .one-screen h2 {
        margin-top: 150px;
        font-size: 30px;
    }
header h1 {
    font-size: 65px;
}
one-screen h2 {
    font-size: 30px;
}
.one-screen h2 .green {
    font-size: 30px;
}
.green.zags {
    font-size: 30px;
}
.two-screen .title_p {
    font-size: 30px;
}
.red-zag {
    font-size: 30px;
}
.four-screen .zag {
    font-size: 30px;
}}
@media (max-width: 1355px) {
    header .absolite-zvanie{
        bottom: -103px;
        text-align: initial;
    }}
@media (max-width: 1200px) {
    header .absolite-zvanie {
        bottom: -110px;
    }
    header .absolite-zvanie {
        width: 55%;
        left: 429px;
        text-align: right;
    }
    .gred-div {
        width: 300px;
    }
    .prepods {
        padding-left: 70px;
    }
header img {
    width: 100%;
    height: auto;
}}
@media (max-width: 1100px) {header h1 {
    font-size: 50px;
}
.prepods {
    padding-left: 50px;
}
.three-screen .flex-item.with20 img{
    max-height: initial!important;
    width: 100%;
    height: auto;
}}
@media (max-width: 992px) {
    .pc-version {
        display: none;
    }
    .mobil-version {
        display: block;
        margin-bottom: 45px!important;
    }
    header .gred-div {
        margin-left: auto;
        margin: auto;
    }
    .prepods {
        text-align: center;
    }
    .red-zag {
        font-size: 30px;
    }
    .four-screen .zag {
        font-size: 30px;
    }
    .cursiv {
        position: relative;
    }
    .div-day .red-line {
        width: 100%;
    }
    header .absolite-zvanie {
        width: 100%;
        position: relative;
        margin-top: -112px;
        left: auto;
    }
    .gred-div {
        margin-left: 10px;
    }
    header h1 {
        padding-left: 10px;
        color: #fff;
        font-size: 42px;
    }
    .flex.col3 .flex-item {
        width: 100%;
    }
    .flex.col2 .flex-item
    {
        width: 100%;
    }
    header img {
        height: auto;
        margin-bottom: -5px;
        width: 100%;
    }
    .green.zags {
        font-size: 30px;
    }
    .one-screen h2 {
        font-size: 25px;
    }
    .one-screen h2 .green {
        font-size: 25px;
    }
    .container {
        padding-left: 15px;
        padding-right: 15px;}
    .flex.col2 .right {
            text-align: center;
        }
    .flex.col3 .flex-item.with20, .flex.col3 .flex-item.with60,.flex.col2 .flex-item.with85,.flex.col2 .flex-item.with15{
        width: 100%;
    }
}
#openModal .title_p
{
    font-size: 36px;
    width: 100%;
    margin: 20px 0px;
}

#openModal .close
{
    position: absolute;
    top: 10px;
    right: 10px;
}

#openModal .form input
{
    width: 100%;
    border-bottom: 1px solid #4C5470!important;
    border: none;
    margin-bottom: 30px;
    font-size: 20px;
    line-height: 23px;
    color: rgba(27, 34, 53, 0.5);
    outline: none;
}

#openModal .form button.azure 
{
    border: none;
    width: 230px;
    color: #fff;
    background: #e9512a;
    text-decoration: none;
    padding: 20px 30px;
    font-family: GillSans;
    font-size: 18px;
    cursor: pointer;
}
#openModal .form button.azure:hover 
{
    background: #B01C1C;  
}

#openModal .form
{
    margin: auto;
    padding-top: 20px;
    text-align: center;
}

.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1050;
    opacity: 0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
  }

  .modal:target {
    opacity: 1;
    pointer-events: auto;
    overflow-y: auto;
  }

  .modal-dialog {
    position: relative;
    width: auto;
    margin: 10px;
  }

  @media (min-width: 576px) {
    .modal-dialog {
      max-width: 500px;
      margin: 30px auto;
      top: 30%;
    }
  }

  .modal-content {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: .3rem;
    outline: 0;
  }

  @media (min-width: 768px) {
    .modal-content {
      -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
      box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
    }
  }

  .modal-header {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 15px;
    border-bottom: 1px solid #eceeef;
  }

  .modal-title {
    margin-top: 0;
    margin-bottom: 0;
    line-height: 1.5;
    font-size: 1.25rem;
    font-weight: 500;
  }

  .close {
    float: right;
    font-family: sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
    text-decoration: none;
  }

  .close:focus,
  .close:hover {
    color: #000;
    text-decoration: none;
    cursor: pointer;
    opacity: .75;
  }

  .modal-body {
    position: relative;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 15px;
    overflow: auto;
  }

/* loading */

#openModal .form button.azure.processing{
	cursor: not-allowed;
	opacity: 0.7;
	background: #e9512a!important;
	position: relative;
}
#openModal .form button.azure.processing::before{
	content: '';
	display: block;
	box-sizing: border-box;
	width: 20px;
	height: 20px;
	border: 5px solid #fff;
	border-right-color: transparent;
	border-radius: 50%;
	position: absolute;
	right: 10px;
	margin-top:1px;
	opacity: 0.88;
	animation: spinner infinite 1500ms linear;
}

@keyframes spinner{
	from {
		transform: rotate(0);	
	}
	to {
		transform: rotate(360deg);
	}
}