@import url(http://fonts.googleapis.com/css?family=Lobster&subset=latin,cyrillic);
body { font-size: 16px; color: #656565;}

/*
#3573be
#00398b
0d3f7c
9cbce3
font-family: 'Poiret One', cursive;
font-family: 'Lobster', cursive;
*/
header { position: fixed; width: 100%; z-index: 1000;}
.header-offset { height: 50px;}
.navbar-brand { padding: 0;}
.navbar { background-color: #3573be;}
.navbar-default .navbar-nav  { font-family: 'Lobster', cursive; margin: 0 auto; font-size: 1.5em; }
.navbar-default .navbar-nav > li {}
.navbar-default .navbar-nav > li > a { color: #fff; transition: 0.5s all; text-align: right;}
.navbar-default .navbar-nav > li > a:hover { color:#fff; background-color: #00398b; }
.navbar-default .navbar-collapse, .navbar-default .navbar-form, .navbar-default { border-color:#699de8;}
.navbar-default .navbar-toggle  { border-color: #699de8;}
.navbar-default .navbar-toggle .icon-bar { background-color: #699de8;}
.navbar-collapse.collapse { height: 50px !important;}

footer { background: #a1bde5; border-top: 1px solid #699de8; margin-top: 1em; font-size: 12px;}
footer a { font-size: 16px;}

.no-padding { padding: 0;}
.small-gradient { background-image: linear-gradient(#cfd9eb, #fff); background-repeat: no-repeat; background-size: 100% 50px; margin-top:1px;}
.logo-bg { background-image: linear-gradient(#0d3f7c, #9cbce3); background-color: #0d3f7c; border-bottom: 1px solid #699de8;}
.logo { position: relative; text-align: right; }
.logo h1 { position:absolute; left: 10%; bottom: 20%; text-shadow: 3px 3px 8px #aaa; font-family: 'Lobster', cursive; color: #5d94d7; font-size: 3em; line-height: 0.6em;}
.logo span { font-size: 0.5em;}
.logo img { width: 100%;}

.box-title { color: #5d94d7; padding-left: 30px; border-bottom: 1px solid #5d94d7; margin-bottom: 0.5em; font-family: 'Lobster', cursive;}
.box-title h1, .box-title h2, .box-title h3 { font-size: 2em;}
.red-box {background: url('../img/heart_red.gif') left center no-repeat;}
.green-box {background: url('../img/heart_green.gif') left center no-repeat;}
.yellow-box {background: url('../img/heart_yelow.gif') left center no-repeat;}

.index-about img { border: 1px solid #c9e8fe; padding: 2px; width: 40%; float: left; margin-right: 1em; margin-bottom: 1em;}
.read-more { text-align: right; width: 100%; display: block; font-family: 'Lobster', cursive;}
.index-about-text { font-size: 1em; line-height: 1.3em; margin-top: 0;}

.index-usefully, .usefully { font-size: 0.9em; margin-bottom: 1em;}
.index-usefully-item, .usefully-item { position: relative; margin-bottom: 2em;}
.index-usefully-item img, .usefully-item img { border: 1px solid #b7e0fd; padding: 2px; width: 40%; float: left; margin-right: 1em; margin-bottom: 1em;}
.usefully-item img {}
.index-usefully-item b, .usefully-item b{ font-family: 'Lobster', cursive; font-size: 18px; font-weight:normal;}
.index-contacts-text { font-weight: bold;}

.usefully-article { font-size: 1em !important; position: relative;}
.usefully-article img { border: 1px solid #c9e8fe; padding: 2px; width: 100%; margin-bottom: 10px; margin-left: 2px; text-align: center;}
.usefully-article a { font-family: 'Lobster', cursive; font-size: 1.5em; position: absolute; bottom: 0; left: 15px;}
.usefully-article h2 { font-family: 'Lobster', cursive; font-size: 2em;}

.services ul { list-style-image: url('../img/2.gif');}
.about-us ul { list-style-image: url('../img/4.gif');}
.services ul li, .about-us ul li { line-height: 1.5em;}

.gallery { text-align: center;}
.gallery img { width: 40%; padding: 2px; border: 1px solid #c9e8fe; }

.contact-address { margin-bottom: 50px; font-weight: bold;}
.contact-form { margin-bottom: 50px;}
.contact-form input { margin-bottom: 5px;}
.contact-form textarea { margin-bottom: 5px;}
.submit-button { padding: 0.5em 2em; color: #fff; background-color: #999; transition: 0.5s all; font-size: 1.3em;  width: 100%; font-family: 'Lobster', cursive;}
.submit-button:hover { background-color: #699de8; color: #fff;}
.contact-map { margin-bottom: 50px; }
.navigate-map {text-align:center; }
.navigate-map a { border:1px silver solid; background:#CCCCCC; color:#333333; padding:0.85em; margin-top:2em; clear:both; line-height:3em;}
.clear { clear: both;}

@media screen and (min-width: 0px) {
    abody { border: 5px solid black;}
    .navbar { text-align: right; }
    .navbar-collapse.collapse { height: auto !important;}
    .logo h1 { font-size: 1.3em; left: 5%; bottom: 5%;}
    .logo span { font-size: 0.5em;}

    .box-title h1, .box-title h2, .box-title h3 { font-size: 1.2em;}
    .index-about img { width: 100%;}
    .index-usefully-item img { width: 100%;}
    .usefully-item img { width: 100%; float: none;}

    .services ul li, .about-us ul li { font-size: 14px;}

    .gallery img { width: 100%;}

    .usefully-article h2 { font-size: 1.5em;}
    .usefully-article img { width: 100%; }

}
@media screen and (min-width: 380px) {
    abody { border: 5px solid red;}
    .logo h1 { font-size: 1.5em;}

    .box-title h1, .box-title h2, .box-title h3 { font-size: 1.4em;}

    .index-about img { width: 50%;}
    .index-usefully-item img { width: 40%; float: left;}
    .usefully-item img  { width: 40%; float: left;}

    .gallery img { width: 49%;}

    .usefully-article h2 { font-size: 1.7em;}
    .usefully-article img { width: 49%; float: left;}
}

@media screen and (min-width: 768px) {
    abody { border: 5px solid yellow;}
    .navbar { text-align: center;}
    .navbar-default .navbar-nav  { display: inline-block; float: none;}
    .navbar-collapse.collapse { height: 50px !important;}
    .logo h1 { font-size: 1.8em;}

    .index-about img { width: 50%;}
    .usefully-item img { width: 30%; max-width: 250px;}

    .box-title h1, .box-title h2, .box-title h3 { font-size: 1.6em;}

    .services ul li, .about-us ul li { font-size: 16px;}

    .gallery img { width: 100%;}

    .usefully-article h2 { font-size: 2em;}
    .usefully-article img { width: 100%; float: none;}
}
@media screen and (min-width: 992px) {
    abody { border: 5px solid green;}
    .logo h1 { font-size: 2em;}
    .index-about img { width: 40%;}
    .box-title h1, .box-title h2, .box-title h3 { font-size: 1.8em;}
}
@media screen and (min-width: 1200px) {
    abody { border: 5px solid blue;}
    .logo h1 { font-size: 3em; line-height: 0.6em;}

    .box-title h1, .box-title h2, .box-title h3 { font-size: 2em;}
    .gallery img { width: 49%;}
}