/* =====================================
   MOBILE STYLES – TARGET ~380px WIDTH
   ===================================== */

@media (max-width: 520px) {

a, button, input, [role="button"] {
    -webkit-tap-highlight-color: transparent !important;
    /* Optional: For some older Android versions */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important; 
}

body {
    min-width: 0;
    font-size:14px;
}
body#home {
    background: url(../img/bgIndex_mob.jpg) center top no-repeat, linear-gradient(180deg, #fff 910px, #f2f2f2);
    background-position: 52% -20px;
}
body#inner {
    background: url(../img/bgInner.jpg) center top no-repeat, linear-gradient(180deg, #fff 910px, #f2f2f2);
    background-position: 52% -20px;
}

/* ====================
   Layout
   ==================== */

.wrapper {
    width:100%;
    padding:0 15px;
    box-sizing:border-box;
}
.wrapper * {
    box-sizing: border-box;
}
.wrapper-inner {
    display: flex;
    flex-direction: column;
}
.wrapper-inner .indexL {
    order: 2;
}
.wrapper-inner .indexR {
    order: 1;
}

.mainContainer,
.mainContent iframe {
    box-shadow: 0 10px 14px rgba(0, 0, 0, .05);
}

.sidebar,
.mainContent,
.indexL,
.indexR {
    width:100%;
    float:none;
    margin:0;
}

/* ====================
   Header
   ==================== */

.header {
    height: 380px;
}

.logo {
    position: absolute;
    top: 12px;
    left: 0;
}

.logo p {
    font-size:30px;
    line-height:32px;
    padding: 0;
}

.logo span {
    display:block;
    font-size:13px;
}

.langs {
    display: none;
    position:absolute;
    right: 0;
}
.langs span {
    display: block;
}

.langs p {
    font-size:14px;
}

.socials {
    display: none !important;
    position:static;
    width:auto;
    margin-top:10px;
}

.socials li {
    float:left;
    margin-right:10px;
}

/* ====================
   Navigation
   ==================== */

.nav, #inner .nav {
    position:absolute;
    top: 19px;
    right: 0;
    z-index: 1;
}
#inner .nav {
    right: 15px;
}

.nav a.nav-toggle, .nav a.nav-toggle:hover {
    display: block;
    padding: 7px 10px;
    text-decoration: none;
    background: linear-gradient(45deg, #dfdfdf, #fff);
    border: none;
    border-radius: 5px;
    text-transform: uppercase;
    text-shadow: 1px 1px rgba(255, 255, 255, .5);
    color: #474646;
}
.nav.is-open a.nav-toggle {
    background: linear-gradient(45deg, #c94949b5, #991919);
    text-shadow: 1px 1px rgb(45 45 45 / 50%);
    color: #fff;
}

.nav .nav-collapse {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: linear-gradient(45deg, #f1f1f1, #fff);
    width: 180px;
    padding: 10px;
    border-radius: 7px;
    box-shadow: 0 0 25px rgba(0, 0, 0, .2);
}
.nav.is-open .nav-collapse {
    display: block;
}

.nav a {
    font-size:16px;
    padding:6px 0 6px 17px;
    border-bottom:1px solid #eee;
}



/* ====================
   Phones + Contacts
   ==================== */

.headerPhones {
    position:static;
    padding-top: 84px;
}
.headerPhones h6 {
    padding-bottom: 5px;
}

.altContacts {
    display: inline-block;
    position:static;
    margin-top: 14px;
}
a.skype, a.instagram, a.facebook, a.letter {
    margin-bottom: 9px;
}

/* ====================
   Welcome block
   ==================== */

.wellcome {
    position:static;
    width:100%;
    display: none;
}

/* ====================
   Partners
   ==================== */

.partners {
    position:absolute;
    left: 0;
    top: 240px;
    width: 150px;
}

.partners li {
    width: 53px;
}
.partners li.partnersDescr {
    width: 100%;
    font-size: 13px;
    line-height: 17px;
}
.partners li img {
    width: 100%;
}

.partnersDescr {
    width:auto;
}

/* ====================
   Index news
   ==================== */

.indexNews {
    position: relative;
    width:100%;
    margin:0 0 25px 0;
}

.indexNews-date {
    position: absolute;
    font-family: "bold_italic", sans-serif;
    background: url(../img/bgRed.jpg) center center no-repeat;
    color: #fff;
    padding: 5px 7px;
}

.indexNews img {
    width:100%;
    height:auto;
}

.indexL .indexNews:last-child {
    margin-bottom: 10px;
}

/* ====================
   Right section
   ==================== */

.indexR img {
    width:100%;
    height:auto;
}

.button {
    width:100%;
}

/* ====================
   Gallery widget
   ==================== */

.widgetGalleryHome {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 20px;
}

.widgetGalleryHome a {
    width:30%;
    height:auto;
    margin:0 4% 10px 0;
}

.widgetGalleryHome img {
    width:100%;
    height:auto;
}

.widgetGalleryHome a:nth-child(3n) {
    margin-right:0;
}



/* ====================
   Article
   ==================== */

.mainContent article {
    padding:15px;
}

/* ====================
   Gallery
   ==================== */

.gallery figure {
    width:50%;
}

.gallery figure:nth-child(2n) {
    margin-right:0;
}

/* ====================
   Albums
   ==================== */

.albums figure {
    width:100%;
    margin-right:0;
}

/* ====================
   Forms
   ==================== */

input.basicField,
textarea.basicArea {
    width:100%;
    box-sizing:border-box;
}


/* Inner */

#inner .header {
    height: 90px;
}
.pageHeader {
    height: auto;
    margin-bottom: 22px;
}
.pageHeader h1, .pageHeader h2 {
    margin: 0;
    font-size: 24px;
}
#inner .headerPhones {
    display: none;
}
.breadcrumbs {
    padding-right: 0;
}

.loop {
    padding-top: 8px;
    padding-bottom: 10px;
}
.loop h3 {
    font-size: 16px;
    line-height: 20px;
    padding-bottom: 5px;
}
.loop .twoColImg {
    width: 150px;
    margin-top: 4px;
    margin-bottom: 10px;
}
.loop .twoColText {
    overflow: visible;
}
.twoColText p {
    line-height: 20px;
    font-size: 14px;
}
.loop .infoHeading {
    margin-top: 12px;
    clear: both;
}
.loop .infoHeading strong {
    font-size: 12px;
    line-height: 1;
}
.loop .infoHeading p {
    display: flex;
    flex-wrap: wrap;
    padding-top: 12px;
}
.loop .infoHeading a {
    width: 45%;
    margin-right: 7px;
    margin-bottom: 9px;
    padding: 6px 9px;
    border-color: #c46262;
}
.loop .infoHeading a:hover {
    color: #c46262;
}

/* Profile */

.profileHeader {
    padding: 10px;
}
.profileHeader .back {
    margin: 0;
    margin-bottom: 10px;
    float: none;
}
.profileHeader .back p {
    margin-top: 0;
}
.profileHeader img {
    margin-right: 10px;
}
.profileNav {
    height: auto;
}
.profileNav a.navLink {
    padding: 10px 7px;
    font-size: 15px;
}
.profileNav a.navLink:last-child {
    background: none;
}
.profileContent {
    padding-top: 15px;
    padding-bottom: 10px;
    display: flex;
}
.profileMother, .profileFather {
    margin-top: 0;
    width: 50%;
    min-height: auto;
    float: none;
}
.profileFather {
    padding-right: 5px;
}
.profileMother {
    padding-left: 5px;
}
.profileFather img, .profileMother img {
    width: 100%;
    height: auto;
    margin: 0;
    float: none;
}

.kittensHeader {
    padding: 0;
}
.kittens table {
    margin-left: 0;
    width: 100%;
}
.kittens table td, .kittensHeader table td {
    height: auto !important;
}
.kittens table td {
    padding: 5px;
}
.kittens .sex {
    width: 18%;
}
.kittens .name {
    width: 30%;
}
.kittens .color {
    width: 70px;
}
.kittens .status {
    width: auto;
}
.kittens .kittens-photo {
    width: 70px;
}

/* News */

.latestNews {
    width: 100%;
}
.news-article .twoColImg {
    float: none;
    margin: 0;
}
.news-article-img {
    margin-bottom: 10px;
}
.news-article-img a {
    display: block;
}
.news-article-img img {
    width: 100%;
}

/* Various */

abbr[title], dfn[title] {
    border-bottom: none;
    cursor: default;
    text-decoration: none;
}
.oneHalf {
    width: auto;
    float: none;
}
.contactsCat {
    width: 100px;
    height: 150px;
    top: -32px;
    background-size: 100%;
}