body
{
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 18px;
	background-image: url(/assets/template/matrix/type_3/image/BackgroundImage.png);
    background-color: #fafafa;
}
.HeaderContainerMargin
{
    margin-top: 20px;
}
.HeaderLogoMargin
{
    margin-top: 6px;
}
.HeaderBlockMargin
{
    margin-top: 20px;
}
.ContainerHeaderTitle
{
    margin-top: 32px;
    text-align: center;
}
.Title1Block
{
    font-size: 24px;
    padding-bottom: 14px;
    padding-top: 28px;
    color: #434b59;
    text-transform: uppercase;
    font-weight: bold;
    line-height: 30px;
}
.Span1Block
{
    text-transform: uppercase;
    background-color: #1a9bd7;
    display: inline-flex;
    font-size: 46px;
    padding: 6px;
    padding-left: 28px;
    padding-right: 28px;
    text-shadow: 0px 2px 0px rgba(0,0,0,0.5);
    font-weight: bold;
    color: white;
}
.LogoBlock
{
    text-align: center;
}
.LogoBlock p
{
    position: absolute;
    top: 45px;
    left: 73px;
    font-size: 12px;
    font-weight: bold;
    color: #6bd6fb;
    text-align: left;
}
.LogoBlock p:hover
{
    text-decoration: underline;
}
.ContactBlock
{
    text-align: right;
}
.ContactBlock p
{
    margin: 0px;
}
.HeaderBlock img
{
    height: 41px;
    width: 41px;
}
.HeaderBlock p
{
    display: inline;
    margin-left: 6px;
    font-size: 13px;
    font-weight: bold;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
.PhoneSpan1
{
    font-size: 18px;
    font-weight: bold;
    color: #62ccf8;
}
.PhoneSpan2
{
    font-size: 18px;
    font-weight: bold;
    color: #434b59;
    margin-left: 3px;
}
.MainUrl
{
    color: #62ccf8;
    font-size: 14px;
    text-decoration: underline;
}
.Line1ContainerMargin
{
    margin-top: 50px;
}
.Line2ContainerMargin
{
    margin-top: 100px;
}
.Line2ContainerMargin h2 {text-transform: uppercase; line-height: 35px; font-size: 26px;}
.Line3ContainerMargin
{
    margin-top: 50px;
}
.ImageSliderBlock
{
    margin-left: 80px;
    margin-right: 80px;
}
.ImageSliderLeftButton
{
    background: url(/assets/template/matrix/type_3/image/left-icon.png) no-repeat center;
    position: absolute;
    height: 50px;
    width: 50px;
    padding: 12px;
    left: 30px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
.ImageSliderLeftButton:hover
{
    opacity: 0.50; 
}
.ImageSliderRightButton
{
    background: url(/assets/template/matrix/type_3/image/right-icon.png) no-repeat center;
    position: absolute;
    height: 50px;
    width: 50px;
    padding: 12px;
    right: 30px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
.ImageSliderRightButton:hover
{
    opacity: 0.50; 
}
.HorizontalSeparator
{
    width: 100%;
    height: 6px;
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: #1a9bd7;
}
.ItsFreeSpan
{
    margin-top: 10px;
    font-size: 17px;
    text-transform: uppercase;
    padding: 2px;
    border: 5px solid #00adef;
    color: #00adef;
    font-weight: bold;
    display: inline-flex;
}
.ButtonStyle1
{
    padding-top: 15px;
    padding-bottom: 9px;
    padding-left: 30px;
    padding-right: 30px;
    font-weight: bolder;
    font-size: 18px;
    color: #353c47;
    text-shadow: 0px 0px 12px white;
    border: 0px solid white;
    border-radius: 3px;
    outline: none;
    background: #fff000;
    box-shadow: 0 6px rgba(138,131,10,1), 0 3px 3px rgba(0,0,0,.4), inset 0 1px rgba(255,255,255,.3), inset 0 0 3px rgba(255,255,255,.5);
    transition: .2s;
}
.ButtonStyle1:hover
{
    background: #cdc40c;
}
.ButtonStyle1:active
{
    background: #9b940a;
    box-shadow: 0 2px rgb(86,38,6), 0 1px 6px rgba(0,0,0,.4), inset 0 1px rgba(255,255,255,.3), inset 0 0 3px rgba(255,255,255,.5);
    -webkit-transform: translate(0, 4px);
    transform: translate(0, 4px);
}
.ButtonStyle2
{
    text-transform: uppercase;
    outline: none;
    font-weight: bold;
    font-size: 18px;
    color: #00adef;
    padding: 15px;
    padding-right: 32px;
    padding-left: 32px;
    text-decoration: underline;
    transition: 0.2s;
    display: block;
}
.ButtonCentered
{
    text-align: center;
    margin-top: 24px;
}
.ButtonLeft
{
    text-align: left;
}
.ButtonRight
{
    text-align: right;
}
.ButtonStyle1Img
{
    position: absolute;
    top: -30px;
    right: 250px;
    z-index: 1;
}
.ButtonStyle2Img
{
    position: absolute;
    top: -30px;
    left: 200px;
    z-index: 1;
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}
.ArrowLongImg
{
    position: absolute;
    bottom: 200px;
    left: 0;
    z-index: 1;
}
footer
{
    background-color: white;
    margin-top: 60px;
    text-align: center;
    padding: 35px 0;
    color: #8291a3;
    font-size: 14px;
}
#CustomList
{
    margin: 0px;
    padding: 0px;
}
#CustomList .ListItem
{
    padding-top: 12px;
    padding-bottom: 12px;
    position: relative;
}

#CustomList .ListItem .ListItemCounter
{
    width: 50px;
    height: 50px;
    position: relative;
    border-radius: 2em;
    background: #00adef;
}
#CustomList .ListItem .ItemContent
{
    display: inline;
    margin-left: 60px;
    font-weight: bold;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
#CustomList .ListItemCounter .CounterRing
{
    position: absolute;
    height: 85%;
    width: 85%;
    top: 7.5%;
    left: 7.5%;
    border: 2px solid white;
    border-radius: 2em;
}
#CustomList .ListItemCounter .CounterRing .CounterNum
{
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    display: block;
    color: white;
    line-height: 2em;
}

input[type=file] {opacity: 0;}
.file_upload_input input[type=file] {height: 85px; position: relative; z-index: 100;}
.file_upload_input {border: 1px dashed #00aef1; position: relative; cursor: pointer;}
.no_file_input:after {content: 'Перетащите файл сюда или'; display: inline-block; font-style: italic; position: absolute; top: 10px; width: 100%; text-align: center; color: #00adef;}
/*.no_file_input:before {content: 'Выберите на компьютере'; display: inline-block; position: absolute; bottom: 10px; left: 17%; background: url(/assets/template/matrix/images/bg_input_file.png) no-repeat; color: #fff; width: 210px; padding: 5px; text-align: center; border-radius: 4px;}*/
.input_file_button {position: absolute; bottom: 10px; left: 15%; background: #2e517d; padding: 4px; border-radius: 4px;}
.input_file_button span {border: 1px dashed #fff; display: block; border-radius: 4px; color: #fff; padding: 0 5px;}
.in_file_input .input_file_button {display: none;}
.in_file_input .name_file_input {background: #fff000; position: absolute; top: 22px; padding: 5px; left: 15%; width: 210px; text-align: center; border-radius: 4px;}
.in_file_input .name_file_input span {border: 1px dashed #000; border-radius: 4px; display: block; padding: 2px;}

.form_position {border: 2px solid #61abec; padding: 20px;}
.title_form {font-size: 30px; text-align: center; font-weight: bold;}

.wrap_form_bottom {position: relative; margin-top: 30px;}
.title_form_prev {font-size: 22px; color: #434b59; margin: 10px 0 20px 0; padding: 0 75px; text-align: center;}
.book {background: url(/assets/template/matrix/type_3/image/book.png) no-repeat; width: 653px; height: 479px; position: absolute; bottom: -78px; left: -65px;}



/* ==== GRID IMAGES ==== */
.offset_top_images {margin-top: 30px;}

.col_image_2 img  {width: 100%; height: auto;}
.col_image_1 img {width: 100%; height: auto;}
.col_image_4, .col_image_7 {padding-top: 15px;}

.col_image_1, .col_image_6 {padding-bottom: 15px;}

.col_image {position: relative;}
.col_image:hover 
{
	outline: 3px solid #61abec;
	outline-offset: -22px;
}


.title_type_col_image {font-size: 30px; font-weight: bold; color: #fff; text-transform: uppercase; position: absolute; top: 35%; width: 100%; text-align: center;}
.top_text_more .title_type_col_image {top: 45%;}

.wrap_right_content {
    background: url(/assets/template/matrix/type_3/image/figure_3.png) no-repeat left bottom;
    margin-top: 25px;
    padding: 0px 0px 30px 5px;
}
.wrap_out_content {background: url(/assets/template/matrix/type_3/image/figure_2.png) no-repeat left top;}
.row_line {font-size: 24px; color: #434b59; padding: 10px 0 10px 55px;}
.row_line {margin-bottom: 10px;}

.text_right_form_bottom {font-size: 24px; color: #434b59;}
.button_bottom_position {margin-top: 40px;}

.button_block .btn{position: relative;}
.button_block .btn:before {background-image: url(/assets/template/matrix/type_1/images/strelka.png); background-repeat: no-repeat;display: inline-block; content: ''; width: 65px; height: 64px; position: absolute; right: -45px; bottom: 10px;}

.btn-yellow {font-weight: bold; background-color: #fff000; box-shadow: 0px 0px 5px rgba(251,240,256, 0.5); border: 1px solid #fbf9a7;text-transform: uppercase; font-size: 24px; color: #3b404a; padding: 0;}
.btn-yellow:hover {background-color: #fdf56f;}
.btn-yellow span {box-shadow: 0px 4px 2px rgba(128,123,33, 0.5); display: block; border-radius: 4px; padding: 5px 50px;}

.f-size-24 {font-size: 24px; color: #434b59;}
.left_text_wrap {font-size: 24px;}
.left_text_wrap p {margin-bottom: 20px;}

@media only screen and (max-width:768px){  
    .col_image {width: 70%; margin: 10px auto; padding: 0px;}
    .col_image img {width: 100%; height: auto;}
    .offset_top_images {margin: 0;}
    .book {display: none;}
}
@media only screen and (max-width:736px){ 
    .button_bottom_position {text-align: center;}
}
@media only screen and (max-width:480px){ 
    .row_line {padding: 10px 0;}
    .wrap_out_content {background: none;}
    .wrap_right_content {background: none;}
}