﻿@font-face
{
font-family: "Roboto_r";
src: url("../fonts/Roboto-Regular.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
@font-face
{
font-family: "Roboto_b";
src: url("../fonts/Roboto-Bold.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
@font-face
{
font-family: "BadScript_r";
src: url("../fonts/BadScript-Regular.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
@font-face
{
font-family: "Amatic_b";
src: url("../fonts/AmaticSC-Bold.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
@font-face
{
font-family: "Amatic_r";
src: url("../fonts/AmaticSC-Regular.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
@font-face
{
font-family: "Pattaya_r";
src: url("../fonts/Pattaya-Regular.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
@font-face
{
font-family: "Rubik_r";
src: url("../fonts/RubikDistressed-Regular.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
@font-face
{
font-family: "Alumni_r";
src: url("../fonts/AlumniSans-Regular.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
@font-face
{
font-family: "Pangolin_r";
src: url("../fonts/Pangolin-Regular.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}


*{margin:0; padding:0;}
* {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
background: #e9ffe0;
background: -webkit-linear-gradient(top, #e9ffe0, #d1ffc0);
background: -moz-linear-gradient(top, #e9ffe0, #d1ffc0);
background: -ms-linear-gradient(top, #e9ffe0, #d1ffc0);
background: -o-linear-gradient(top, #e9ffe0, #d1ffc0);
background: linear-gradient(to bottom, #e9ffe0, #d1ffc0);
}





header {
margin-top: 30px;
}
.wrapper {
max-width: 1550px;
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
text-align: center;
}



h1{
display: block;
font: normal 38px/68px Roboto_b;
color: #333;
text-align: center;
}
h2{
display: block;
margin-top: 50px;
font: normal 26px/36px Roboto_r;
color: #333;
text-align: left;
}

ul
{
margin-top: 30px;
margin-left: 50px;
}
ul li
{
margin-top: 20px;
list-style: none;
text-decoration: none;
font: normal 23px/32px Roboto_r;
color: #333;
}
ul li a
{
display: inline-block;
margin-left: 10px;
font: normal 22px/32px Pangolin_r;
color: #333;
text-align: left;
text-decoration: none;
background: #87ceeb;
padding: 5px;
transition: background 0.3s;
}
ul li a:hover
{
font: normal 23px/32px Pangolin_r;
background: #97defb;
}


/*Раскрывающийся текст*/
.block_accordeon {
margin-top: 70px;
}
.block_accordeon.no_marg {
margin-top: 30px;
}
.block_accordeon .accordeon_wrapper {
margin: 0 auto;
position: relative;
text-align: left;
border-radius: 16px;
overflow: hidden;
-webkit-transition: all ease-in 0.5s;
-moz-transition: all ease-in 0.5s;
-o-transition: all ease-in 0.5s;
transition: all ease-in 0.5s;
}
.block_accordeon .accordeon_wrapper {background: rgba(191, 255, 177,1); }
.block_accordeon .accordeon_wrapper.show {background: rgba(177, 242, 162,1);  }


.block_accordeon .accordeon_wrapper .but_arrow {
position: absolute;
top:33px;
right:30px;
width:50px;
height: 50px;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAABC0lEQVR4nO3YTWrDMBCGYfcwnelxmtCSRXK9anyulFRjmuYCLTgIYhJcO/WvNKbfC1oYJJgH4YWdZQghhBBCCPWJc/9KokcSf6A3fc6M9eh0ReKVRE8kftO8qywfWPSTRcuwyPnv9s3xI/GbMNN1Pv0KMzduZtGi2mgJQzXEZRWtB56kWNcPpMZQAyI8h1nvHmT38fJL7/wPOd1Fm/72nW2YhXPdZl2ygOGxCAsYngqREsNTI1JgeC5ETMzsiBiYaIg5MdERc2CSIabEJEdMgTGDGIMxhxiCMYvogzGP6IJZDOKvbwdr3zjDb2YpN9EZsyREK2aJiKrwS4lF39np3uLvJYQQQggh9M86A0pK5x6YNAejAAAAAElFTkSuQmCC");
background-size: 50px 50px;
background-position: 0 0;
z-index: 10;
-moz-transform: scale(1, 1);
-o-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
-webkit-transition: all ease-in 0.2s;
-moz-transition: all ease-in 0.2s;
-o-transition: all ease-in 0.2s;
transition: all ease-in 0.2s;

-moz-animation: arrow_move_top ease-in-out 1s infinite alternate backwards;
-webkit-animation: arrow_move_top ease-in-out 1s infinite alternate backwards;
-o-animation: arrow_move_top ease-in-out 1s infinite alternate backwards;
animation: arrow_move_top ease-in-out 1s infinite alternate backwards;
}
.block_accordeon .accordeon_wrapper.show .but_arrow {
-moz-transform: scale(1, -1);
-o-transform: scale(1, -1);
-webkit-transform: scale(1, -1);
transform: scale(1, -1);
-moz-animation: none;
-webkit-animation: none;
-o-animation: none;
animation: none;
}

h3 {

display: block;
position: relative;
padding: 33px 30px;
padding-right: 80px;
font: normal 38px/48px Roboto_b;
color: #436843;
cursor: pointer;
z-index: 11;
-webkit-transition: all ease-in 0.5s;
-moz-transition: all ease-in 0.5s;
-o-transition: all ease-in 0.5s;
transition: all ease-in 0.5s;
word-spacing: 5px;
}
.block_accordeon .accordeon_wrapper.show h3 {color: #007900; }


.block_accordeon .accordeon_wrapper .block_more {
display: none;
}
.block_accordeon .accordeon_wrapper .block_more p{
padding-left:30px;
padding-right:30px;
padding-top: 0;
padding-bottom: 20px;
font: normal 20px/30px Roboto_r;
color: #111;
}
.block_accordeon .accordeon_wrapper .block_more p b{
display: inline-block;
margin-top: 20px;
font: normal 24px/34px Roboto_b;
color: #333;
}
.block_accordeon .accordeon_wrapper .block_more p span{
font: normal 22px/30px Roboto_b;
color: #222;
}
.block_accordeon .accordeon_wrapper .block_more p span.num{
font: normal 30px/30px Pattaya_r;
color: #333;
}

.block_accordeon .accordeon_wrapper .block_more p.marg_top
{
margin-top: 20px;
}
.block_accordeon .accordeon_wrapper .block_more p span.line-through{
text-decoration: line-through;
font: normal 22px/30px Roboto_b;
color: #222;
}



@-webkit-keyframes arrow_move_top
{
0%{top: 25px;  }
100%{top:41px; }
}
@-moz-keyframes arrow_move_top
{
0%{top: 25px;  }
100%{top:41px; }
}
@-o-keyframes arrow_move_top
{
0%{top: 25px;  }
100%{top:41px; }
}



.good_line {
display: none;
position: fixed;
top:0;
left:0;
width:0%;
height: 8px;
/*background: #87ceeb;  */
z-index: 13;
background: -webkit-linear-gradient(left, #2aff5f, #65c3ea);
background: -moz-linear-gradient(left, #2aff5f, #65c3ea);
background: -ms-linear-gradient(left, #2aff5f, #65c3ea);
background: -o-linear-gradient(left, #2aff5f, #65c3ea);
background: linear-gradient(to right, #2aff5f, #65c3ea);

-webkit-box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.25);
-ms-box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.25);
-o-box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.25);
box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.25);
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
opacity: 0;
/*-moz-animation: back_color 5s ease-in-out alternate infinite;
-webkit-animation: back_color 5s ease-in-out alternate infinite;
-o-animation: back_color 5s ease-in-out alternate infinite;
animation: back_color 5s ease-in-out alternate infinite;*/
}
.good_line.show {
opacity: 1;
}

.block_social {
margin-top: 100px;
}
.block_social .wrapper{
max-width: 1200px;
}

.block_social .txt_head {
font: normal 30px Roboto_b;
color: #333;
}

.block_social .block_share {
margin: 0 auto;
margin-top: 30px;
}
#vk_share,#ok_share,#tg_share
{
max-width: 300px;
margin: 0 auto;
}
#ok_share,#tg_share
{
margin-top: 30px;
}

#vk_share a,#ok_share a,#tg_share a
{
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
text-decoration: none;
cursor: pointer;
}
#vk_share a:hover img,#ok_share a:hover img,#tg_share a:hover img
{
opacity: 0.8;
}

#vk_share span,#ok_share span,#tg_share span
{
-webkit-flex: 0 1 auto;
flex: 0 1 auto;
font: normal 28px Pangolin_r;
}
#vk_share a:hover span,#ok_share a:hover  span,#tg_share a:hover span
{
font: normal 29px Pangolin_r;
}
#vk_share span
{
color:#2787f5;
}
#ok_share span
{
color:#f96600;
}
#tg_share span
{
color:#27a7e8;
}

#vk_share img,#ok_share img,#tg_share img
{
-webkit-flex: 0 1 auto;
flex: 0 1 auto;
max-width: 100%;
margin-left: 15px;
}


footer {
margin-top: 100px;
padding-top: 50px;
padding-bottom: 20px;
background: #111;
}
footer .footer_block {
/*display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-align-items:center;
align-items: center;*/
}

footer .footer_block {

text-align: center;

}
footer .footer_block .txt_cop1{
-webkit-flex: 0 1 auto;
flex: 0 1 auto;
font: normal 16px/26px Roboto_r;
color: #bbb;
text-decoration: none;
}
footer .footer_block .txt_cop1 .txt_url{
font: normal 16px/26px Roboto_r;
color: #aaa;
text-decoration: none;
border-bottom: 1px solid rgba(255,255,255,0);
-webkit-transition: all ease-in 0.5s;
-moz-transition: all ease-in 0.5s;
-o-transition: all ease-in 0.5s;
transition: all ease-in 0.5s;
text-decoration: underline;
}
footer .footer_block .txt_cop1 .txt_url:hover{
color:#ccc;
}


footer .footer_block .txt{
margin-top: 30px;
font: normal 16px/26px Roboto_r;
color: #aaa;
text-decoration: none;
}
footer .footer_block .txt a{
font: normal 16px/26px Roboto_r;
color: #ddd;
-webkit-transition: all ease-in 0.5s;
-moz-transition: all ease-in 0.5s;
-o-transition: all ease-in 0.5s;
transition: all ease-in 0.5s;
text-decoration: none;
border-bottom: 1px solid rgba(255,255,255,0);
}
footer .footer_block .txt a:hover{
color:#fff;
border-bottom: 1px solid rgba(255,255,255,255);
}



@media all and (max-width:1200px)
{
h1{font: normal 32px/52px Roboto_b;}
h2{font: normal 24px/34px Roboto_r;}
h3 {font: normal 34px/44px Roboto_b; }

.block_social .txt_head {font: normal 26px Roboto_b;}


}

@media all and (max-width:1000px)
{
footer {margin-top: 80px;}

h2 {font: normal 20px/28px Roboto_r; }
h3 {font: normal 28px/38px Roboto_b; }


.block_accordeon .accordeon_wrapper .block_more p {    font: normal 18px/28px Roboto_r;}
.block_accordeon .accordeon_wrapper .block_more p b {    font: normal 20px/28px Roboto_b;}
.block_accordeon .accordeon_wrapper .block_more p span{font: normal 20px/30px Roboto_b;}
.block_accordeon .accordeon_wrapper .block_more p span.num{font: normal 26px/36px Pattaya_r;}
.block_accordeon .accordeon_wrapper .block_more p span.line-through{font: normal 20px/30px Roboto_b;}

.block_social .txt_head {font: normal 24px Roboto_b;}

#vk_share span,#ok_share span,#tg_share span{font: normal 26px Pangolin_r;}
#vk_share a:hover span,#ok_share a:hover  span,#tg_share a:hover span{font: normal 27px Pangolin_r;}
}

@media all and (max-width:590px)
{
footer {margin-top: 60px;}

.wrapper {padding-left: 15px;padding-right: 15px;}
ul{margin-left: 20px; }

ul li a {  display: inline; margin-left: 5px;  background: none;color: #0088bf;}
ul li a:hover {font: normal 22px/32px Pangolin_r;background: none;}


h1 {font: normal 26px/36px Roboto_b;}
h2 {margin-top: 30px; font: normal 19px/25px Roboto_r;  }
h3 {padding: 20px 20px; padding-right: 55px; font: normal 26px/36px Roboto_b; }
.block_accordeon {    margin-top: 50px;}
.block_accordeon .accordeon_wrapper .block_more p {    padding-left: 20px;    padding-right: 20px;     font: normal 17px/27px Roboto_r;}
.block_accordeon .accordeon_wrapper .block_more p b { margin-top: 10px;   font: normal 19px/28px Roboto_b;}
.block_accordeon .accordeon_wrapper .block_more p span{font: normal 19px/29px Roboto_b;}
.block_accordeon .accordeon_wrapper .block_more p span.num{font: normal 25px/35px Pattaya_r;}
.block_accordeon .accordeon_wrapper .block_more p span.line-through{font: normal 19px/29px Roboto_b;}

.block_accordeon .accordeon_wrapper .but_arrow {-moz-animation: none;-webkit-animation: none;-o-animation: none;animation: none;top: 24px; right:20px;width:30px;height: 30px;background-size: 30px 30px;}





.block_social {margin-top: 80px;}

}

@media all and (max-width:400px)
{

h3 {padding: 14px 14px; padding-right: 55px; font: normal 20px/30px Roboto_b; }
.block_accordeon .accordeon_wrapper .block_more p {    padding-left: 14px; }

.block_accordeon .accordeon_wrapper .but_arrow { top:15px; }



}


