body {
min-width: 359px;
}

.relative {
position: relative;
}

.color_red {
/* color: #be423f; */
color: #fdff90;
}

.color_light {
color: #f2f2f2;
}

.color_grey {
color: #3b3f48;
}

.font_14 {
 font-size: 14px;
}

.font_12 {
 font-size: 12px;
}

/* ScrollUP */
#scrollUp {
    background: url(../images/top.png)no-repeat scroll 0 0;
    position: fixed;
    display: none;
    cursor: pointer;
    bottom: 20px;
    color: #000;
    height: 40px;
    right: 20px;
    width: 40px;
    z-index: 1030;
}
#scrollUp:hover {
    background: url(../images/top.png) no-repeat scroll 0 -40px;
}

/* ScrollDown */
#scrollDown {
    background: url(../images/down.png) no-repeat scroll center top;
    position: absolute;
    display: block;
    cursor: pointer;
    color: #000;
    height: 80px;
    width: 90px;
    left: calc(50% - 45px);
    bottom: -45px;
    z-index: 3;
}

#scrollDown.on_top {
 position: fixed;
 top: -35px;
 bottom: auto;
 opacity: 0.75;
}


body {
 font-family: "Roboto", Arial, Tahoma, sans-serif;
 line-height: 1.5em;
 font-weight: 400;
 font-size: 16px;
}

p {
 margin-bottom: 0.75em;   
}    

p.vertical {
 writing-mode: tb-rl;
 transform-origin: center center; 
 transform: rotate(540deg);
 -webkit-transform: rotate(540deg);
 -ms-transform: rotate(540deg); 
 font-size: 80px;
 font-weight: bold;
 padding: 0;
 margin: 0;
 text-transform: uppercase;
 display: block;
}

.vertical_logo {
 z-index: 3; 
 position: absolute; 
 top: 30vh; 
 left: 10vw;
 width: 70px;
}

.background_text {
 position: absolute; 
 top: 30vh; 
 left: 0; 
 width: 100%; 
 height: 200px; 
 background-position: top center; 
 background-size: 100% auto; 
 background-repeat: no-repeat;
}

h4 {
font-size: 18px;
text-transform: uppercase;
font-weight: bold;
}

h3 {
font-size: 20px;
text-transform: uppercase;
font-weight: bold;
}

h2 {
font-size: 24px;
text-transform: uppercase;
font-weight: bold;
}



.lang {
 padding: 7px;
 font-size: 18px;
 font-weight: bold;
}

.lang a {
 padding: 3px 5px;
 line-height: 32px;   
 color: #be423f;
}

.lang a:hover {
    text-decoration: none;
}

.lang a.selected {
 color: #f2f2f2;
 background-color: #be423f;
}


/* *** Main section *** */

#main {
 position: relative;
 display: block;
/* min-height: 768px; */
max-height: 1500px;
 height: 100vh;
 background-image: url(../images/background-main-desktop.jpg);
 background-position: right top;
 background-repeat: no-repeat;
/* background-size: 100% auto; */
 background-size: auto;
}

#main .left_block {
 position: relative;
 display: table;
 vertical-align: middle;
 float: left;
 width: 33.3%;
 height: 100%;
 background-color: #d6d2dd;
 color: #6c7177;
}


#main .left_menu_wrapper {
 position: relative;
 display: table-cell;
 vertical-align: middle;
 text-align: center;
}


#main .left_menu {
 display: inline-block;
 width: 300px;
 text-align: left;
 text-transform: uppercase;
 font-size: 18px; 
 line-height: 2.1em;
 letter-spacing: 1px;
 font-weight: bold;
 margin-top: 20px;
}

#main .left_menu ul {
  list-style-type: none;
  margin-left: 40px;
  margin-top: 20px;
  padding: 0;
}

#main .left_menu li a {
display: block;
padding: 5px 10px;
color: #3b3f48;
text-decoration: none;
outline: none;
}

#main .left_menu li a:hover {
color: #bf4542;
outline: none;
}

#main .right_block {
 position: relative;
 float: right;
 width: 66.7%;
 height: 100%;
 color: #f1f2f2;
 overflow: visible;
}

#main .right_center_block {
 position: relative;
 display: table;
 height: calc(100% - 400px);
}

#main .right_wrapper {
 position: relative;
 display: table-cell;
 max-width: 1200px;
 vertical-align: middle;

}

#main .top_menu {
 display: block;
 width: 100%;
 padding: 65px 120px 20px 60px;
 height: 130px;
}

#main .main_logo_img {
 width: 240px;
}

#main .top_menu a {
 display: block;
 margin: 2px 10px;
 padding: 10px 15px;
 color: #fdff90;
 text-transform: uppercase;
 text-decoration: none;
 font-weight: bold;
 outline: none;
}

#main .menu_button {
 margin-top: 3px;
 cursor: pointer;
}

#main .menu_button div {
  width: 37px;
  height: 3px;
  background-color: #a2a6ad;
  margin: 6px;
}

#main h1 {
 font-size: 46px;
 margin-bottom: 1rem;
 font-weight: bold	;
 line-height: 1.1em;
 font-style: italic;
 
}

#main .h1-com {
 font-size:26px;
 font-style: normal;
 font-weight: normal;
}

#main p {
 font-size: 18px;
 letter-spacing: 1px;
 font-weight: 600;
}

#main .main_logo {
 position: absolute; 
 width: 440px;
 height: 234px;
 background-image: url(../images/logo_large.png);
 background-repeat: no-repeat;
 background-position: center center;
 left: calc(50% - 200px);
 bottom: 35px;
 z-index: 2;
}

/* *** About section *** */

#aboutus {
 display: block;
 position: relative;
 background-color: #272e30;
 color: #f2f2f2;
 padding-left: 5vw;
 padding-right: 0;
}

#aboutus .vertical_logo {
 background-image: url(../images/aboutus.png); 
 background-position: left top;
 background-repeat: no-repeat;
 height: 430px;
}

#aboutus .about_row {
 margin-left: -5vw !important;
}

#aboutus .about_left {
 position: relative;
 display: table-cell;
 background-image: url(../images/background-aboutus.png); 
 background-position: right bottom;
 background-repeat: no-repeat;
 background-size: 60% auto;
 vertical-align: middle;
}

#aboutus .about_text {
 max-width: 450px;
 padding-top:30vh; 
}


#aboutus .about_right {
 position: relative;
 background-color: rgba(0,0,0,0.2);
 padding: 100px 0;
}


/* *** Services section *** */

#services {
 display: block;
 position: relative;
 color: #3b3f48;
 background-color: #f2f2f2;
 background-image: url(../images/background-services.png); 
 background-position: left bottom;
 background-repeat: no-repeat;
 background-size: 35% auto;
 padding: 30vh 100px 100px 5vw;
}

#services .vertical_logo {
 background-image: url(../images/services.png); 
 background-position: left top;
 background-repeat: no-repeat;
 height: 400px;
}


#services .serv_left {
 display: table; 
 position: relative;
 background-image: url(../images/serv-left-bottom.png); 
 background-position: left bottom;
 background-repeat: no-repeat;
/* background-size: 100% 6px; */
 padding: 0px;
 height: 320px;
 
}

#services .serv_left_wrapper {
 display: table-cell;
 position: relative;
 background-image: url(../images/serv-hline.png); 
 background-position: right bottom;
 background-repeat: no-repeat;
 background-size: calc(100% - 33px) 6px;
 padding: 20px;
 padding-left: 40px;
 vertical-align: bottom;
}

#services #hline2 {
position:absolute; 
bottom:0;
right: -14px;
}

#services .serv_splitter {
 position: relative;
 flex: 0 0 90px;
 -ms-flex: 0 0 90px;
}

#services .serv_splitter_inner {
 position: absolute;
 background-image: url(../images/serv-vline.png); 
 background-position: 13px top; 
 background-repeat: no-repeat; 
 background-size: 6px 100%; 
 top: 0;
 width: 100%;
}

#services #hline2 {
 position:absolute; 
 background-image: url(../images/serv-hline.png); 
 background-position: left top; 
 width: 20px;
 height: 6px;
 bottom:0;
 right: -13px;
}


#services ul {
 list-style: none;
 margin: 0px;
 padding: 5px 0px;
}

#services ul li {
 height: 90px;
 cursor: pointer;
}

#services .serv_li_header {
 background: url(../images/serv-circle-dark.png) no-repeat left center;
 padding-left: 50px;
 line-height: 24px;
 text-transform: uppercase;
}

#services .serv_li_header:hover, #services .serv_li_header.active {
 background: url(../images/serv-circle-red.png) no-repeat left center;
 color: #be423f;
}

#services .serv_li_header.active {
 font-weight: bold;
}


#partners {
 display: block;
 position: relative;
 color: #3b3f48;
 background-color: #f2f2f2;
 background-image: url(../images/background-services.png); 
 background-position: left bottom;
 background-repeat: no-repeat;
 background-size: 35% auto;
 padding: 30vh 100px 100px 5vw;
}

#partners .vertical_logo {
 background-image: url(../images/partners.png); 
 background-position: left top;
 background-repeat: no-repeat;
 height: 500px;
}

#partners p {
 padding: 7px 0px;
 font-weight: bold;
}

#partners a {
 color: #be423f;
 font-size: 18px;
}

#partners a:hover {
    text-decoration: none;
}

/* *** Technologies section *** */

#tech {
 display: block;
 position: relative;
 color: #f2f2f2;
 background-color: #272e30;
 background-image: url(../images/background-tech.png); 
 background-position: right bottom;
 background-repeat: no-repeat;
 background-size: 35% auto;
 padding: 30vh 100px 100px 5vw;
}

#tech .vertical_logo {
 background-image: url(../images/tech.png); 
 background-position: left top;
 background-repeat: no-repeat;
 height: 640px;
}


#tech .tech_splitter {
 background-image: url(../images/tech-line.png); 
 background-position: center bottom; 
 background-repeat: no-repeat; 
 background-size: 121px calc(100% - 30px);
 flex: 0 0 121px;
 -ms-flex: 0 0 121px;
}

#tech h3 red {
 color: #be423f;
}

/* *** Contacts section *** */

#contacts {
 display: block;
 position: relative;
/* background-color: #f2f2f2; */
/* color: #3b3f48; */
 background-color: #272e30;
 color: #f2f2f2; 
 padding: 30vh 100px 140px 5vw; 
}

#contacts .vertical_logo {
 background-image: url(../images/contacts.png); 
 background-position: left top;
 background-repeat: no-repeat;
 height: 385px;
}


#contacts .contacts_left img {
 float: left; 
 margin-right: 20px; 
 margin-left: -60px;
}

#contacts .contacts_left {
 padding: 0 30px 0 0;
}

#contacts input[type="text"], #contacts input[type="email"], #contacts input[type="password"], #contacts textarea {
/*  background: rgb(218,218,218); */
  background: rgba(0,0,0,.25);
/*  color: #3b3f48; */
 color: #f2f2f2;
  height: 40px;
/*  border: none; */
  border: 1px solid #f2f2f2; */
  max-width: 500px;
}

#contacts textarea {
 height: 150px;
}

input[type=submit] {
display: block;
padding: 10px;
color: #f2f2f2;
text-transform: uppercase;
text-decoration: none;
text-align: center;
font-weight: bold;
background-color: #be423f;
width: 130px;
border: none;
cursor: pointer;
}

#contactus {
 display: block;
 position: relative;
 background-color: #424b52;
 background-image: url(../images/background_right_section.png);
/* background-size: cover; */
 background-position: right bottom;
 background-repeat: no-repeat;
 color: #f2f2f2;
 padding: 100px;
}


#contactus input {
  background: rgba(0,0,0,.25);
  color: #f2f2f2;
 }


#privacy {
 display: block;
 position: relative;
 color: #3b3f48;
 background-color: #f2f2f2;
 background-image: url(../images/background-privacy.png); 
 background-position: right bottom;
 background-repeat: no-repeat;
 background-size: 35% auto;
 padding: 30vh 100px 0px 5vw;
}

#privacy h1, #privacy h2, #privacy h3, #privacy h4 {
text-transform: none;
font-weight: 500;
} 

#privacy h2 {
 font-size: 2rem;
}


#privacy h3 {
 font-size: 1.75rem;
}

#privacy h4 {
 font-size: 1.5rem;
}

#privacy footer {
background: transparent;
padding: 10px;
}


footer {
 background-color: #f2f2f2;
 color: #3b3f48;
 padding: 0px;
 width: 100%;
 text-align: center;
 line-height: 1.2em;
 font-size: 14px;
}

footer a {
 color: #3b3f48;
 line-height: 2.5em;
}

footer p {
 font-size: 14px;
}

footer .footer_text {
 font-size: 13px;
 width: 80%;
 margin: 0 auto;
}


footer a:hover {
 color: #3b3f48;
}

#loginModal .modal-content {
 background-image: url(../images/background-login.png); 
 background-position: right bottom;
 background-repeat: no-repeat;
 background-size: 40% auto;
 padding: 10px;
}

#loginModal .form_wrapper {
width: 300px;
}

#loginModal .error_wrapper {
width: 100%;
height: 35px;
color: #fff;
text-align: center;
margin: 15px 0;
line-height: 35px;
}

#loginModal .error_wrapper.active {
background-color: #df9f9d;
}


#loginModal input[type="text"], #loginModal input[type="password"] {
 height: 35px;
/* margin-bottom: 30px; */
}

#loginModal input[type=submit] {
padding: 7px 10px;
}

#loginModal .login_text {
font-size: 12px;
text-align: left;
background: url(../images/login-logo.png) no-repeat left top;
background-size: 100px 102px;
padding-left: 130px;
width: 100%;
min-height: 105px;
}

#loginModal .login_text a {
font-weight: bold;
color: #be423f;
}

#loginModal p {
margin: 0;
line-height: 1.3em;
}