html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,
em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,
nav,output,ruby,section,summary,time,mark,audio,video {
 margin:0; 
 padding:0; 
 border:0; 
 font-size:100%; 
 font:inherit; 
 vertical-align:baseline; 
}
a { text-decoration:none; }
a,label { cursor:pointer;  outline:none; }
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block; }
body { line-height:1; }
ol,ul { list-style:none; } 
blockquote,q { quotes:none; } 
blockquote:before, blockquote:after, q:before, q:after {  content:''; content:none; }
img { max-width:100%;  height:auto; }
table {  border-collapse:collapse;  border-spacing:0; }



@font-face {
    font-family: FontAwesome;
    src: url('../fonts/fontawesome-webfont.eot?v=4.6.3');
    src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'),
    url('../fonts/fontawesome-webfont.woff2') format('woff2'),
    url('../fonts/fontawesome-webfont.woff') format('woff'),
    url('../fonts/fontawesome-webfont.ttf') format('truetype'),
    url('../fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

html {
    font: normal normal normal 16px/1.125 'Trebuchet MS', Helvetica, sans-serif;
    height: 100%;  overflow-x: hidden;
}
body {
    background: url(../img/bg_body.png) repeat #ffffff;
    color: #444444;
    height: inherit;  overflow-x: inherit;
}

a { font-size: .813rem;  color: #444444; }
a, div, header, span { box-sizing:border-box; }

h1, h2, p { padding: 2% 2% 0 2%; }
h1, h2, h3 { font-weight: bold; }
h1, h2 { text-transform: uppercase; }

h1 {
    font-size: 1.4rem;
    color: #0051AC; background: #ffffff;
    text-decoration: underline; text-align: center;
    padding: 1.5%;
}
h2 { font-size: 1.2rem; }
p { line-height: 1.250; }

/*=== COMMON_CLASSES ===*/
.br { display: none; }
.lnk { border-bottom: 1px dashed #444; }

.white_space { padding-top: 2%; }

.convex_box { box-shadow: 0 0 1px rgba(0, 0, 0, 0.35), 0 0 10px rgba(0, 0, 0, 0.1) inset; }

.raised_box { box-shadow: 0 8px 7px -7px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 0, 0, 0.1) inset; }

.curved_box_hz_shadow:before {
    content: '';
    position: absolute;  top:0;  right: 2%;  bottom: 0;  left: 2%;
    box-shadow: 0 0 10px rgba(0,0,0,0.7);
    border-radius: 20rem/0.7rem;
}
.curved_box_hz_face { position: relative;  background: #ffffff; }

.grid { font-size: 0;  line-height: 0;  letter-spacing: -1px; }
.grid-justify { text-align: justify; }
.grid-justify:after {
    display: inline-block;
    content: '';
    width: 100%;
    height: 0 !important;
    visibility: hidden;
    overflow: hidden;
}
.grid-center { text-align: center; }
.grid-right { text-align: right; }
.cell {
    display: inline-block;
    vertical-align: middle;
    font-size: 1rem;
    line-height: 1.125rem;
    letter-spacing: normal;
    text-align: center;
}

.float_fix:after {
    content: ".";
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;
}

.ico_mail:before { content: '\f0e0'; font-family: "FontAwesome";  font-size: 1em;  margin: 0 8px 0 0; }
.ico_phone:before { content: '\f098'; font-family: "FontAwesome";  font-size: 1.125em;  margin: 0 8px 0 0;}


/*=== COMMON ===*/
header, #header_main,
footer, #footer_main { position: relative; }

header { text-align: center;  z-index: 100; }
footer { text-align: center; z-index: 90;}

#wrapper {
    width: 100%;  max-width: 1280px;
    height: inherit;  /*overflow-x: inherit;*/
    margin: 0 auto;
}

#header_main,
#content, #footer_main { padding: 0 5px; }

/*=== HEADER/TOPLINE ===*/
#header_topline { padding: 5px 0; font-weight: bold; }
#header_topline a { margin: 0 .5%; }
#header_topline a.current { color: #0051AC; }

/*=== HEADER/MAIN ===*/
/*#header_main { position: relative; }*/
#header_main .curved_box_hz_face { display: table;  width: 100%;  padding: 5px 0; }

#header_logo,
#header_menu { display: table-cell;  vertical-align: middle; }
#header_logo { width: 152px;  padding: 0 10px; }

/*=== CONTENT ===*/
h1,
article.main_page:nth-child(odd),
article.pages > div.shadow_box { box-shadow: 0 0 1px rgba(0, 0, 0, 0.35); }

article.main_page,
article.pages > div { padding: 0 0 2% 0; }
article.pages > div.bottomless { padding: 2% 2% 0; }

article a { font-size: 1rem;  font-style: italic; }

article h3 { font-style: normal; }
article.main_page:nth-child(even) { color: #ffffff;  background: #0051AC; }
article.main_page:nth-child(odd) { color: #0051AC;  background: #ffffff; }

article.pages { color: #0051AC; }
article.pages h2 { color: #ffffff;  background: #0051AC;  padding-bottom: 1%;  text-transform: inherit; }
article.pages span { font-weight: bold; }
article.pages b { font-weight: bold; }
article.pages i { font-style: italic; }
article.pages > div { background: #ffffff; }
article.pages ol { padding: 1% 2% 0;  counter-reset: point; }
article.pages ol li { margin-bottom: .5em;  padding-left: 2em;  position: relative; }
article.pages ol li:before {
    content: counter(point);
    counter-increment: point 1;
    position: absolute;  left: 0;  top: 0;
    width: 1.5em;  height: 1.5em;
    line-height: 1.5em;
    text-align: center;
    vertical-align: middle;
    margin-top: -.15em;
    font-size: .813rem;
    font-weight: bold;
    color: #ffffff;
    background: #0051AC;
}
article.pages ol.list li:before { color: #0051AC; }
article.pages .category h3 { padding: 0 2% 0; text-transform: uppercase; }

a[data-columns] { margin: .35%;  vertical-align: top; }
a[data-columns] h3 { color: #0051AC; }

a[data-columns="3"] .br { display: block; }
a[data-columns="3"] { width: 100%; }
a[data-columns="3"] img,
a[data-columns="3"] h3 { display: inline-block;  vertical-align: middle;  width: 48.95%; }
a[data-columns="3"] img { width: 100%; max-width: 350px;  margin: 0 auto; }

a[data-columns="4"] { width: 48.95%; }

article.pages .img_float {
    max-width: 335px;
    margin: 2%;
    float: left;
}

article.pages .screenshot {
    padding: 2%;
    text-align: center;
}
article.pages .screenshot img { width: 100%; max-width: 1000px; }

article.pages .lnk_box { padding: 2%; }
article.pages .lnk_box a {
    padding: 1% 0;
    box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 0, 0, 0.1) inset;
}
article.pages .lnk_box h3 { padding: .5em 0; color: #fff;  background-color: #0051AC; }
article.pages .lnk_box p { font-size: .813em;  padding: .5em .5em .35em; }
article.pages .lnk_box p:not(:last-child) { border-bottom: 1px dotted #444; }

.category { padding: 2% 2% 0 2%;  text-align: center; }
.category div { text-align: left;  vertical-align: top; }
.category img { width: 100%; max-width: 335px; }
.category h3 { padding: 2% 2% 0 2%; }
.category h3 span.news {
    padding: .5em .75em;
    margin-right: 1.5em;
    display: inline-block;
    color: #fff;
    background-color: #0051AC;
}

.category span { display: block;  text-align: right;  padding: 1em 2% 1em 1em; }

.tabs { width: 100%;  padding-top: 2%;  text-align: left; }
.tabs li { display: inline-block;  padding: .75em 1.125em;  cursor: pointer; }
.tabs li.current { color: #ffffff;  background-color: #0051AC; }

article.pages > div.tabs_content { padding: 2%;  color: #ffffff;  background: #0051AC; }
article.pages > div.tabs_content ol li:before { color: #0051AC;  background: #ffffff; }
article.pages > div.tabs_content ol.list li:before { color: #ffffff;  background: #ffffff; }

.tabs_content { display: none; }
.tabs_content .cell { padding: .25em;  font-size: .875rem; }
.tabs_content .cell:nth-child(odd) { width: 40%;  text-align: right; }
.tabs_content .cell:nth-child(even) { width: 60%; }
.tabs_content.current { display: block; }

.category.contacts h2 {
    font-size: 1.4em;
    color: #0051AC;
    background-color: #fff;
}

.contacts p { padding: 0;  text-indent: 2em; }
.contacts a { padding: 0;  text-indent: 2em; }
.contacts .cell { vertical-align: bottom; }
.contacts .cell:nth-child(odd) { text-align: right; }
.contacts .cell:nth-child(even) { text-align: left; }
.contacts .cell.form-caption { vertical-align: top; }
.contacts .cell.form { padding: 0 0 0 2em;  text-align: left; }

form input,
form textarea { box-sizing:border-box; }

form { max-width: 360px; }
form input { width: 100%;  margin-top: .75em;  font-size: .875em; }
form input[type="text"] { padding: 5px;  border: 1px solid #0051AC; }
form textarea {
    width: 100%;
    height: 7em;
    margin-top: .75em;
    padding: 5px;
    resize: none;
    font-size: .875em;
    border: 1px solid #0051AC;
}
form .btn { width: 100%; padding: .5em 0; text-align: right; }

form .warning,
form .caution {
    padding: .75em 0;
    margin-top: .75em;
    text-align: center;
}

form .caution {
    color: darkgreen; background-color: lightgreen;
    border: 1px solid darkgreen;
}
form .warning {
    color: darkred;
    background-color: #ED1D24;
    border: 1px solid darkred;
}
form button {
    padding: .5em 1em;
    color: #fff;
    font-size: .875em;
    background-color: #0051AC;
    border: none;
    cursor: pointer;
}

article.pages > div.comments { padding: 1% 2%;  color: #fff;  background-color: #0051AC; }

article.pages .cabinet {
    padding: 4em 0;
    text-align: center;
}
article.pages .cabinet form { margin: 0 auto; }
article.pages .cabinet form button { margin: 2em;   padding: .5em 4em; }


.gallery { position: relative;  display: table;  padding: 0 2%; }
.gallery li { display: table-cell;  padding: 5px; }

.gallery_full {
    position: fixed;  top: 0;  left: 0;
    display: none;
    width: 100%;  height: 100%;
    text-align: center;
    background-color: rgba(0,0,0, .75);
    z-index: 1000;
}
.gallery_full.active { display: block; }
.gallery_full .container {
    position: relative;
    display: none;
    width: auto;  max-width: 100%;
    height: inherit;
    margin: 0 auto;
    padding: 32px;
    overflow: hidden;
}
.gallery_full .container.active { display: inline-block; }
.gallery_full .container img{
    width: auto;  max-width: 100%;
    height: auto; max-height: 100%;
    padding: 16px;
    background-color: #fff;
    box-sizing:border-box;
}
.gallery_full .container div {
    position: absolute;  left:48px;  bottom: 48px;  right: 48px;
    display: block;
    padding: 16px;
    background-color: rgba(255,255,255, .75);
}


/*=== FOOTER ===*/
#footer_main .curved_box_hz_face { padding: 2%; }
#footer_main .grid-justify { text-align: center; }
#footer_main h3 { font-size: .875rem;  text-transform: uppercase; }
#footer_main .info { margin: 8px 0 0 0; }
#footer_main .info a { display: block;  font-size: .875rem;  font-weight: bold; }

#footer_bottomline { margin: 5px 0 3% 0; }

/*=== MEDIAQUERIES ===*/
@media screen and (min-width: 480px) {
    a[data-columns] { width: 32.633333%; }
    a[data-columns="3"] .br { display: none; }
    a[data-columns="3"] img,
    a[data-columns="3"] h3 { display: block;  width: 100%; }
}

@media screen and (min-width: 640px) {
    .category { text-align: justify; }
    .category div { display: inline-block; }
    .category div:nth-child(odd) { width: 32.633333%; }
    .category div:nth-child(even) { width: 65.266666%; }

    a[data-columns="4"] { width: 24.3%; }

    #footer_main .grid-justify { text-align: justify; }
    #footer_main .cell { text-align: left; }
    #footer_main .info { margin: 0; }
}

@media screen and (min-width: 1025px) { #header_logo { width: 234px;  padding: 0 1rem; } }
.ico_menu-show:before { content: '\f0c9';  font-family: "FontAwesome";  font-weight: normal;  margin-right: .5em; }
.ico_menu-hide:before { content: '\f00d';  font-family: "FontAwesome";  font-weight: normal;  margin-right: .5em; }
.ico_submenu-show:before { content: '\f078';  font-family: "FontAwesome";  margin: 0 auto; }
.ico_submenu-hide:before { content: '\f077';  font-family: "FontAwesome";  margin: 0 auto; }

#header_menu { color: #ffffff; }
#header_menu .mobile_menu { text-align: right;  background-color: #0051AC; }
#header_menu .mobile_menu a { font-size: .875rem;  font-weight: bold; }

#header_menu nav {
    position: absolute;  right: -110%;
    width: 100%;  max-width: 480px;
    transition: right 400ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
}

#header_menu .menu ul {
    max-height: 0;
    overflow: hidden;
    transition: max-height 400ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
}
#header_menu li { width: 100%;  text-align: left; }
#header_menu a {
    display: block;
    padding: .75em 1.125em;
    color: #ffffff;
    text-transform: uppercase;
    white-space: nowrap;
}


/*=== FIRST_LEVEL ===*/
#header_menu .menu { margin: 2px 0 0 0;  background: #0051AC; }
#header_menu .menu > li { background-color: #0051AC;  border-top: 1px solid #0051AC; }
#header_menu .menu > li:not(:first-child) { border-top-color: #004A9E; }
/*=== SECOND_LEVEL ===*/
#header_menu .menu ul > li { background-color: #005CC4;  border-top: 1px solid #0056B8; }
#header_menu .menu ul > li:not(:first-child) { border-top-color: #0056B8; }
/*=== THIRD_LEVEL ===*/
#header_menu .menu ul ul > li { background-color: #0068DE;  border-top: 1px solid #0062D1; }
#header_menu .menu ul ul > li:not(:first-child) { border-top-color: #0062D1; }


/*=== ACTION ===*/
#header_menu nav.active { right: 0; }
#header_menu .parent_lnk.active + ul { max-height: 999px; }

#header_menu .menu > li:hover { background-color: #005CC4; }
#header_menu .menu ul > li:hover { background-color: #0068DE; }
#header_menu .menu ul ul > li:hover { background-color: #0074F7; }

/*=== MOBILE_MENU ===*/
#header_menu .parent,
#header_menu .parent_lnk { display: inline-block; }

#header_menu .parent { width: 90%; }
#header_menu .parent_lnk { width: 10%;  text-align: center;  cursor: pointer; }

/*===  MEDIAQUERIES ===*/
@media screen and (min-width: 481px) { #header_menu nav { max-width: 480px; } }
@media screen and (min-width: 855px) {
    #header_menu .br { display: block; }

    #header_menu .mobile_menu,
    #header_menu .parent_lnk { display: none; }
    #header_menu .parent { width: auto; }

    #header_menu nav { position: inherit;  max-width: inherit;  text-align: center; }
    #header_menu .menu { margin: 0; font-size: 0;  line-height: 0;  letter-spacing: -1px; }
    #header_menu .menu ul {
        position: absolute;
        max-height: inherit;
        overflow: inherit;
        visibility: hidden;  opacity: 0;
        transition: opacity 400ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
    }
    #header_menu .menu ul { padding: 2px 0 0 0; }
    #header_menu .menu ul ul { top: 0;  left: 100%;  padding: 0 0 0 2px; }

    #header_menu .menu li {
        position: relative;
        font-size: inherit;
        line-height: .813rem;
        letter-spacing: normal;
    }
    #header_menu .menu li:hover > ul { visibility: visible;  opacity: 1; }

    #header_menu .menu > li { display: inline-block;  width: auto;  text-align: center; }
    #header_menu .menu > li:not(:first-child) { border-top-color: #0051AC; }
    #header_menu .menu > li:not(:last-child) > a { border-right: 1px solid #306AAC; }
    #header_menu .menu > li:not(:first-child) > a { border-left: 1px solid #85ACD6; }
    #header_menu .menu > li > a { padding: 0 .5em;  margin: .5em 0; }
}
@media screen and (min-width: 1025px) { #header_menu .menu > li > a { padding: 0 .813em;  margin: .875em 0; } }

#slider {
    position: relative;
    width: 100%;  height: 200px;
    overflow: hidden;
}

.background,
.background_mask,
.slide,
.slide h2,
.slide p,
.slide div { position: absolute; }

.background,
.background_mask,
.slide { top: 0;  left: 0;  width: 100%;  height: 100%; }

.background { left: -100%;  background: url(/webroot/img/bg_slider.png) no-repeat center 0%; }
.background.current { left: 0; }

.slide h2, .slide p { top: 0;  left: 110%;  width: 65%;  padding: 0; }
.slide div { top: 0;  right: -110%; }
.slide_img { max-width: 350px; }

.slide h2 {
    margin: 1.125rem 0 0 .625rem;
    color: #0051AC;
    font-size: 1.2rem; font-weight: bold;
    text-transform: uppercase;
    white-space: nowrap;
}
.slide p {
    margin: 3.125rem 0 0 .625rem;
    color: #444444;
    font-size: .875rem; font-style: italic;
    overflow: hidden;
}
.slide div { width: 30%;  height: 100% !important;  margin-right: 2%; }
.slide div:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.slide img {
    display: inline-block;
    vertical-align: middle;
}

.slide.current h2, .slide.current p { left: 0; }
.slide.current div { right: 0; }

#slider .dots {
    position: absolute;  bottom: 5%;
    width: 100%;
    text-align: center;
    z-index: 50;
}
#slider .dots span {
    position: relative;
    display: inline-block;
    margin: 0 .5rem;
    width: 1rem;  height: 1rem;
    border-radius: 50%;
    cursor: pointer;
    background: #0051AC;
    transition: background-color 0.8s cubic-bezier(0.770, 0.000, 0.175, 1.000);
}
#slider .dots span.current { background: #ED1D24; }

/*=== ANIMATION/BACKGROUND ===*/
.bg-fromLeft { animation: fromLeftBG 0.6s ease-in-out 0.8s both; }
@keyframes fromLeftBG { 0%{left: -100%;} 100%{left: 0;} }
.bg-fromRight { animation: fromRightBG 0.6s ease-in-out 0.8s both; }
@keyframes fromRightBG { 0%{left: 100%;} 100%{left: 0;} }
.bg-toRight { animation: toRightBG 0.6s ease-in-out 0.8s both; }
@keyframes toRightBG { 0%{left: 0;} 100%{left: 100%;} }
.bg-toLeft { animation: toLeftBG 0.6s ease-in-out 0.8s both; }
@keyframes toLeftBG { 0%{left: 0;} 100%{left: -100%;} }

/*=== ANIMATION/SLIDE ===*/
.sli-toLeft h2,
.sli-toLeft p { animation: toLeft 0.7s ease-in-out 0.5s both; }
@keyframes toLeft { 0%{left: 0%; opacity: 1;} 30%{left: 10%; opacity: 1;} 100%{left: -50%; opacity: 0;} }
.sli-toLeft div { animation: toLeftImg 0.7s ease-in-out 0.5s both; }
@keyframes toLeftImg { 0%{right: 0%; opacity: 1;} 30%{right: -10%; opacity: 1;} 100%{right: 110%; opacity: 0;} }
.sli-toRight h2,
.sli-toRight p { animation: toRight 0.7s ease-in-out 0.5s both; }
@keyframes toRight { 0%{left: 0%; opacity: 1;} 30%{left: -10%; opacity: 1;} 100%{left: 110%; opacity: 0;} }
.sli-toRight div { animation: toRightImg 0.7s ease-in-out 0.5s both; }
@keyframes toRightImg { 0%{right: 0%; opacity: 1;} 30%{right: 10%; opacity: 1;} 100%{right: -110%; opacity: 0;} }
.sli-fromRight h2,
.sli-fromRight p { animation: fromRight 0.6s ease-in-out 0.8s both; }
@keyframes fromRight { 0%{left: 110%; opacity: 0;} 100%{left: 0%; opacity: 1;} }
.sli-fromLeft h2,
.sli-fromLeft p { animation: fromLeft 0.6s ease-in-out 0.8s both; }
@keyframes fromLeft { 0%{left: -110%; opacity: 0;} 100%{left: 0%; opacity: 1;} }
.sli-fromRight div { animation: fromRightIMG 0.6s ease-in-out 0.8s both; }
@keyframes fromRightIMG { 0%{right: -110%; opacity: 0;} 100%{right: 0%; opacity: 1;} }
.sli-fromLeft div { animation: fromLeftIMG 0.6s ease-in-out 0.8s both; }
@keyframes fromLeftIMG { 0%{right: 110%; opacity: 0;} 100%{right: 0%; opacity: 1;} }

/*=== MEDIAQUERIES ===*/
@media screen and (min-width: 639px) {
    #slider .dots { width: 65%;  bottom: 10%; }
    .slide h2 { margin-top: 2rem }
    .slide p { margin-top: 4rem; }
}

@media screen and (min-width: 801px) {
    #slider { height: 270px; }
    #slider .dots { bottom: 15%; }
    .slide h2, .slide p { width: 55%; margin-left: 2.5rem; }
    .slide h2 { margin-top: 4rem; }
    .slide p { margin-top: 6rem; }
}