/*   
Theme Name: UBS Gray Wall
Theme URI: https://ubs.com.ua/GrayWall
Description: Theme for Gray Wall
Author: UBS (CRM&Web-Sites)
Author URI: https://ubs.com.ua
Version: 1.0
 
*/

body {
    margin: 0;
}

ul {
    margin: 0;
    padding: 0;
}

.main-container {
    background-image: url("assets/images/bg_1920.jpg");
    background-size: cover;
    position: relative;
    overflow: hidden;
}

.main-container .rope {
    position: absolute;
    left: 0;
}

.main-container .pined-photos .pin {
    text-align: center;
    position: relative;
    z-index: 999;
}

.main-container .pined-photos li {
    float: left;
    list-style: none;
}

.main-container .pined-photos .previw {
    cursor: pointer;
}

.main-container .pined-photos .previw img {
    width: 100%;
    /*pointer-events: none;*/
}

.main-container .pined-photos {
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    position: relative;
}

@media screen and (max-width: 769px){
    .main-container .pined-photos {
        overflow-x: scroll;
    }
}

.main-container .pined-photos ul{
    overflow: hidden;
    min-width: 100%;
}

.main-container .rope-repited {
    position: absolute;
    background-image: url("assets/images/rope-part.png");
    background-repeat: repeat-x;
    background-size: contain;
    top:16%;
    min-width: 100%;
}

.owl-prev,.owl-next {
    width: 30px;
    height: 56px;
    position: absolute;
    top:50%;
    margin-top: -30px;
}

.owl-prev {
    left: -60px;
    background-image: url("assets/images/arrow-left-active.png");
}

.owl-prev.disabled{
    background-image: url("assets/images/arrow-left-disabled.png");
}

.owl-next {
    right: -60px;
    background-image: url("assets/images/arrow-right-active.png");
}

.owl-next.disabled{
    background-image: url("assets/images/arrow-right-disabled.png");
}

.postcard {
    position: relative;
    z-index: 999;
}

.main-container.contacts .postcard input, .main-container.contacts .postcard textarea {
    background-color: transparent;
    position: absolute;
    left: 7%;
    z-index: 99;
    outline:none;
    border: none;
    color: #5f6a65;
}

.main-container.contacts .mobile-form input, .main-container.contacts .mobile-form textarea {
    width: 100%;
    border-radius: 4px;
    margin-bottom: 20px;
}

.main-container.contacts .mobile-form {
    color: #5f6a65;
    background:#dcc8a5;
    padding:0 20px;
    border:2px solid #f6efdf;
    /*margin-bottom:30px;*/
    border-radius:7px;
}

.main-container.contacts .mobile-form input {
    background:#f6efdf;
    padding:5px 7px;
    border:3px solid #ccb58c;
    margin-bottom:8px;
    border-radius:7px;
}

.main-container.contacts .mobile-form textarea {
    background:#f6efdf;
    padding:5px 0px 5px 7px;
    border:3px solid #ccb58c;
    border-radius:7px;
}

.main-container.contacts .mobile-form p {
    color:#4f2a0f;
    margin-top:10px;
}

.main-container.contacts .mobile-form .wpcf7-submit {
    background:#4f2a0f;
    cursor:pointer;
    padding-left:15px;
    padding-right:15px;
    color:#fff;
    border-radius:7px;
}

.main-container.contacts .postcard .send-btn {
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    cursor: pointer;
    left: 6.9%;
    top: 83%;
}

.main-container.contacts .send-btn {
    background-image: url("assets/images/contacts/button_send.png");
}

.main-container.contacts .send-btn:active {
    background-image: url("assets/images/contacts/button_send_active.png");
}

.main-container.contacts .label-c {
    position: absolute;
    left: 8%;
}

.main-container.contacts .mobile-form .send-btn {
    position: relative;
    margin: auto;
    margin-bottom: 20px;
}

/*.main-container.contacts {*/
    /*background-repeat: no-repeat;*/
    /*background-position: right bottom;*/
/*}*/

.stamp {
    position: absolute;
    bottom: 10%;
    left: 9%;
    z-index: 99;
}

@media screen and (min-width: 1400px) {
    .main-container .pined-photos {
        margin-top: 30px;
    }

    .main-container {
        background-repeat: no-repeat;
        background-position: right bottom;
    }

    .modal-dialog {
        width: 900px!important;
    }
}


@media screen and (min-width: 1200px) and  (max-width: 1399px){
    .main-container .pined-photos {
        margin-top: 30px;
    }

    .main-container {
        background-repeat: no-repeat;
        background-position: right bottom;
    }

}

@media screen and (min-width: 768px) and  (max-width: 1199px){
    .main-container {
        background-repeat: no-repeat;
        background-position: right bottom;
    }
}

#preloader {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    overflow: visible;
    background: #000 url('assets/images/preloader.gif') no-repeat center center;
}

.navbar-toggle div{
    position: absolute;
    color: #fff;
    display: block;
    float: left;
    text-transform: uppercase;
    left: -70px;
    top: 8px;
    font-size: 20px;
}

.navbar-toggle {
    cursor: pointer;
    display: block!important;
}

/* Icon 2 */

#nav-icon2 {
}

#nav-icon2 span {
    display: block;
    position: absolute;
    height: 9px;
    width: 50%;
    background: #d3531a;
    opacity: 1;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}

#nav-icon2 span:nth-child(even) {
    left: 50%;
    border-radius: 0 9px 9px 0;
}

#nav-icon2 span:nth-child(odd) {
    left:0px;
    border-radius: 9px 0 0 9px;
}

#nav-icon2 span:nth-child(1), #nav-icon2 span:nth-child(2) {
    top: 0px;
}

#nav-icon2 span:nth-child(3), #nav-icon2 span:nth-child(4) {
    top: 18px;
}

#nav-icon2 span:nth-child(5), #nav-icon2 span:nth-child(6) {
    top: 36px;
}

#nav-icon2.open span:nth-child(1),#nav-icon2.open span:nth-child(6) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

#nav-icon2.open span:nth-child(2),#nav-icon2.open span:nth-child(5) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

#nav-icon2.open span:nth-child(1) {
    left: 5px;
    top: 7px;
}

#nav-icon2.open span:nth-child(2) {
    left: calc(50% - 3px);
    top: 7px;
}

#nav-icon2.open span:nth-child(3) {
    left: -50%;
    opacity: 0;
}

#nav-icon2.open span:nth-child(4) {
    left: 100%;
    opacity: 0;
}

#nav-icon2.open span:nth-child(5) {
    left: 5px;
    top: 22px;
}

#nav-icon2.open span:nth-child(6) {
    left: calc(50% - 3px);
    top: 22px;
}

#nav-icon2  {
    z-index: 9999;
    width: 45px;
    height: 45px;
    right: 30px;
    top: 7px;
    position: absolute;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
}

#nav-icon2 span {
    display: block;
    position: absolute;
    height: 9px;
    width: 100%;
    background: #b8281f;
    border-radius: 9px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}

.menu-contacts-container {
    background-image: url("assets/images/bg_1920.jpg");
    background-repeat: no-repeat;
    background-position: left bottom;
}

.menu-contacts-container a {
    margin-bottom:20px;
    display: block;
}

body {
    position: relative;
}

.menu-button {
    position: absolute;
    top: 25px;
    left: 25px;
    z-index: 2;
    cursor: pointer;
}

.school-desc-menue {
    width: 773px;
    height: 744px;
    margin: auto;
    margin-top: 20px;
    position: relative;
}

.img-menu {
    position: absolute;
    top: 18%;
    left: 20%;
}

.img-menu a {
    display: block;
    width: inherit;
    margin-bottom: 30px;
}

.img-menu a img {
    height:100%;
}

.slideout-menu {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 256px;
    min-height: 100vh;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    z-index: 0;
    display: none;
    background-color: rgb(71,71,71);
    color: #fff;
}

.slideout-menu a {
    color: #fff;
    display: block;
    font-size: 35px;
    padding-left: 15px;
    background-size: contain;
    height: 30px;
    line-height: 30px;
    margin-bottom: 25px;
}


.slideout-menu a:hover {
    color: #fff;
    text-decoration: none;
}

.slideout-menu-left {
    left: 0;
}

.slideout-menu-right {
    right: 0;
}

.slideout-panel {
    position: relative;
    z-index: 1;
    will-change: transform;
    background-color: #FFF; /* A background-color is required */
    min-height: 100vh;
}

.slideout-open,
.slideout-open body,
.slideout-open .slideout-panel {
    overflow: hidden;
}

.slideout-open .slideout-menu {
    display: block;
}

.graphic-menu a{
    padding: 0;
    margin: 0;
    height: 80px;
}

.graphic-menu {
    width: 256px;
    overflow: hidden;
}

/*nav {*/
    /*z-index: 99!important;*/
    /*-webkit-box-shadow: -4px 0px 9px 0px rgb(71,71,71);*/
    /*-moz-box-shadow: -4px 0px 9px 0px rgb(71,71,71);*/
    /*box-shadow: -4px 0px 9px 0px rgb(71,71,71);*/
/*}*/

.graphic-menu a img {
    height: 100%;
}

.overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.8);
    overflow-x: hidden;
    transition: 0.5s;
}