* {margin: 0; padding: 0;}


body {background-color:#fff; /*background-color: #28254c;*/ font-family: Tahoma,Arial,Helvetica,sans-serif; font-size: 14px; line-height: 1.5; color:#333; overflow-x: hidden;}

a {text-decoration: none; color: orange; outline:0;}
a:hover, a:focus {color: #008dd2; -webkit-transition: all .5s;-moz-transition: all .5s;-ms-transition: all .5s;-o-transition: all .5s;transition: all .5s;}

img {max-width: 100%;}

ul,ol {list-style-position:inside;}

h1, h2, h3, h4, h5 {color: orange;}
h1 {font-size:28px;}
h2 {font-size:24px;}
h3 {font-size:20px;}
h4 {font-size:18px;}
h5 {font-size:16px;}

.js-open {overflow: hidden;}

header {background-color:#fff;}
.top-header {padding-bottom: 10px;}
.logo {display: block; padding:10px 0px; text-align: center;}
.header-about, .header-contact {padding-top: 10px;}
.btn.show-phone {display: inline-block;}
.header-contact {text-align: center;}
.header-contact p {display: none;}
.header-contact .active {display: block;}
nav {background-color:#008dd2; padding:10px 0px;}
.show-menu {float: right; color:white;}
.close-menu {color: #fff; margin: 10px 0px 10px 10px;}
.overlay-menu {position:fixed; top: 0; bottom: 0; left: 0;  right: 0; background-color: rgba(0,0,0,0.7); z-index:9999; opacity: 0; visibility: hidden;
    -webkit-transition: opacity .7s, visibility .8s  ; -moz-transition: opacity .7s, visibility .8s ; -ms-transition: opacity .7s, visibility .8s; -o-transition: opacity .7s, visibility .8s; transition: opacity .7s, visibility .8s;
}
.overlay-menu.active {visibility: visible; opacity: 1;}
.block-menu {position: absolute; top: 0; bottom: 0; right: 0; max-width: 350px; width: 100%; background-color: orange; overflow-y: auto;
    -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%);
    -webkit-transition: transform .8s; -moz-transition: transform .8s; -ms-transition: transform .8s; -o-transition: transform .8s; transition: transform .8s;
}
.active .block-menu {-webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0);}
.menu {list-style:none;}
.menu li {display: block; padding: 15px; border-bottom: 1px solid white;}
.menu li a {position: relative; color:white; padding:7px 0px;}
.menu li a:after {content:""; display: block; position: absolute; bottom:0; background-color: orange; height: 2px; width: 100%;
    -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s;
    -webkit-transform: scale3d(0,1,1); -moz-transform: scale3d(0,1,1); -ms-transform: scale3d(0,1,1); -o-transform: scale3d(0,1,1); transform: scale3d(0,1,1);
}
.menu li a:hover:after, .menu li a:focus:after {-webkit-transform: scale3d(1,1,1); -moz-transform: scale3d(1,1,1); -ms-transform: scale3d(1,1,1); -o-transform: scale3d(1,1,1); transform: scale3d(1,1,1);}

@media (min-width: 992px) {
    .top-header {padding-bottom: 0;}
    .logo {text-align: left; padding: 20px 0px;}
    .btn.show-phone {display: none;}
    .header-contact {text-align: left;}
    .header-contact p {display: block;}  
    .overlay-menu {position: static; background-color: transparent; visibility: visible; opacity: 1;
        -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none;
    }
    .block-menu {position: static; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; max-width:none; background-color: transparent; 
        -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; overflow-y: visible;
    }
     nav {padding:20px 0px;}
    .btn.show-menu, .btn.close-menu {display: none;}
    .menu {display: block; text-align: center;}
    .menu li {display: inline-block; border: 0; padding:0px 5px;}
    .menu li+li {margin-left: 10px;}
}


footer {background-color: #008dd2; padding:50px 0px;}
footer .col {margin-bottom: 30px;}
footer h3 { position: relative; color:white; font-size:22px; margin-bottom: 20px; padding-bottom: 5px;}
footer h3:after {content:""; position: absolute; bottom: 0; left:0; height: 3px; width:50px; background-color: orange;}
footer img {margin-bottom: 10px;}
footer p {color:white;}
footer ul {list-style:none;}
footer a {color:white;}
footer a:hover, footer a:focus {color:orange;}

/*************************************CONTENT**************************************/
.head-image {position: relative; height: 250px; padding:30px; background-position: center; background-repeat: no-repeat; background-size: cover; }
.head-image:before {content:""; position: absolute; top:0; bottom: 0; left: 0; right: 0; background-color: rgba(0,0,0,0.5);}
.head-image-text {text-align: center;}
.head-image h1 {display: inline-block; position: relative;  color: white; border-bottom: 2px solid orange; margin-bottom: 30px;}
.breadcrumb {position: relative; color:white; list-style:none;}
.breadcrumb li {display: inline-block; font-size:18px;}
.breadcrumb li a {display:blokc; color:white; padding:5px 0px; margin-bottom:10px; }
.breadcrumb li a:after {content:"/"; padding:0px 5px}
.breadcrumb .active  {color:orange;}
@media (max-width:550px) {
    .head-image  {height: auto;}    
}

.content {padding:30px 15px;}
.shadow {-webkit-box-shadow: 0px 1px 7px rgba(0,0,0,0.3); -moz-box-shadow: 0px 1px 7px rgba(0,0,0,0.3); box-shadow: 0px 1px 7px rgba(0,0,0,0.3);}
.content h1, .content h2,.content h3, .content h4, .content h5 {margin-bottom: 30px;}
.content p, .content ul, .content ol,.content img, .content table, .content iframe {margin-bottom: 20px;}
/**********************************************************************************/


/**support**/
.a-center {text-align: center;}
.btn {display: inline-block; background-color:transparent; border: 0; outline:0;}
.btn.fa {font-size:32px;}