/*------------------------------------------------------------------
[Master Stylesheet]

Project:	Tammat
Version:	1.0
Last change:	17/04/15
Assigned to:	yaskevich
-------------------------------------------------------------------*/
/*------------------------------------------------------------------
[TOC]

1. Layout
2. Typography
3. Buttons
4. Forms
5. Tabs
6. Responsive utilities
7. Responsive embed
8. Component animations
9. Spinner
10. Main modules
-------------------------------------------------------------------*/
/*------------------------------------------------------------------
[Page structure]

1. Top slidedown section/ #top
2. Header / #header
3. Main navigation / .mainNav
4. Index page content
	4.1 Slider / #hero
		4.1.1 Slides / .slider, .slide
	4.2 About us section / #aboutus, #aboutus2, #aboutus3
	4.3 Service section / #servise
	4.4 Portfolio section / #portfolio
	4.5 News / #news
	4.6 Get in touch section / #getInTouch
	4.7 Pricing plans / #pricing
	4.8 Clients / #clients
5.Inner pages content / .main
	5.1 Sheets background/ .background
	5.2 Sheets header / .mainContainer
		5.2.1 Left sheet / .sheetLeft
		5.2.2 Right sheet / .sheetRight
	5.3 Left column
		5.3.1 Section or post / .section, .post
	5.4 Right column
		5.4.1 Block / .block
13. Footer / #footer
13. Bottom / #bottom
-------------------------------------------------------------------*/
/* ==========================================================================
   1 LAYOUT
   ========================================================================== */
/*------------------------------------------------------------------
Top slidedown section. By defaul hidden
*/
#top {
  z-index: 25;
  position: relative;
  display: none;
  /*------------------------------------------------------------------
	Share section
	*/
}
#top .topSection {
  padding-top: 24px;
  padding-bottom: 48px;
}
#top .topSectionCenter {
  padding-top: 20px;
  /*padding-bottom: 60px;*/
}
#header {
  background-color: white;
  width: 100%;
  position: relative;
  z-index: 15;
}
#header .logo {
  min-height: 4.8em;
  line-height: 4.8em;
}
/*------------------------------------------------------------------
Index page v1 / about us
*/
#aboutus {
  position: relative;
  /*------------------------------------------------------------------
	Index page v1 / Chart color
	*/
}
#aboutus .socialIcons {
  margin-top: 2.4em;
}
#aboutus .livel {
  fill: #FFF;
}
/*------------------------------------------------------------------
index page / get in touch
*/
#getInTouch {
  height: 24rem;
  padding-top: 6.4em;
}
#getInTouch .btnBig {
  margin-top: 4.8em;
}
.container {
  position: relative;
}
/*------------------------------------------------------------------
index page / clients
*/
#clients {
  max-height: 32em;
}
#clients .block {
  margin-top: 3.73333333em;
}
/*------------------------------------------------------------------
Footer
*/
#footer {
  position: relative;
  z-index: 14;
}
#footer .row > div {
  padding: 0;
  position: relative;
}
#footer ul li {
  padding: 0;
}
/*------------------------------------------------------------------
Bottom
*/
#bottom {
  background-color: #424242;
  position: relative;
  bottom: 24px;
  width: 100%;
  z-index: 14;
}
@media (max-width: 767px) {
  #bottom {
    bottom: auto;
  }
}
/* ==========================================================================
   2 TYPOGRAPHY
   ========================================================================== */
body {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-weight: normal;
  margin: 0;
    font-family: "Roboto Condensed", sans-serif;
}
h1 small,
h2 small,
h3 small,
h4 small,
h5 small,
h6 small,
.h1 small,
.h2 small,
.h3 small,
.h4 small,
.h5 small,
.h6 small,
h1 .small,
h2 .small,
h3 .small,
h4 .small,
h5 .small,
h6 .small,
.h1 .small,
.h2 .small,
.h3 .small,
.h4 .small,
.h5 .small,
.h6 .small {
  font-weight: normal;
  line-height: 1;
  color: #212121;
}
h1 small,
.h1 small,
h2 small,
.h2 small,
h3 small,
.h3 small,
h1 .small,
.h1 .small,
h2 .small,
.h2 .small,
h3 .small,
.h3 .small {
  font-size: 65%;
}
h4 small,
.h4 small,
h5 small,
.h5 small,
h6 small,
.h6 small,
h4 .small,
.h4 .small,
h5 .small,
.h5 .small,
h6 .small,
.h6 .small {
  font-size: 75%;
}
h1,
.h1 {
  font-size: 3.73333333em;
  margin-bottom: 0.57142857em;
  line-height: 1.14285714em;
}
h2,
.h2 {
  font-size: 3em;
  margin-bottom: 0.53333333em;
  font-weight: 500;
  line-height: 1.06666667em;
}
h3,
.h3 {
  font-size: 2.26666667em;
  margin-bottom: 0.23529412em;
  font-weight: 500;
  line-height: 1.17647059em;
}
h4,
.h4 {
  font-size: 1.6em;
  padding-top: 0.33333333em;
  padding-bottom: 0.33333333em;
  font-weight: 300;
  line-height: 1.33333333em;
}
h5,
.h5 {
  font-size: 1.33333333em;
  font-weight: 500;
  padding-top: 0.6em;
  padding-bottom: 0.6em;
  line-height: 1.2em;
}
h6,
.h6 {
  font-size: 0.8em;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .1em;
  line-height: 2em;
  padding-bottom: 1em;
  padding-top: 1em;
}
p {
  max-width: 46.93333333rem;
  margin: 0 0 1.6rem 0;
}
.small {
  font-size: 0.86666667em;
}
.text {
  font-family: Roboto Slab, serif;
  font-size: 1.33333333em;
}
@media (max-width: 767px) {
  .text {
    font-size: 1rem;
  }
}
.bigType {
  margin-bottom: 0.42857143em;
  font-size: 7.46666667em;
  line-height: 1.07142857em;
}
@media (max-width: 768px) {
  .bigType {
    font-size: 3.73333333em;
    text-align: center;
    margin-bottom: 0.21428571em;
  }
}
blockquote {
  font-family: Roboto Slab, serif;
  padding: 0.96em;
  margin: 0.96em 0 0.96em 0;
  font-size: 1.66666667em;
  border-left: 2px solid #3A5A99;
}
blockquote.text {
  margin: 1.92em 0 1.92em 0;
}
blockquote p,
blockquote ul,
blockquote ol {
  margin-bottom: 0.96em;
}
blockquote p:last-child,
blockquote ul:last-child,
blockquote ol:last-child {
  margin-bottom: 0;
}
blockquote .small {
  display: block;
  font-size: 0.8em;
}
blockquote footer,
blockquote small {
  display: block;
  font-size: 0.6em;
}
blockquote footer:before,
blockquote small:before {
  content: '\2014 \00A0';
}
ul,
ol {
  margin-top: 0;
  margin-bottom: 1.6rem;
  padding: 0;
}
ul.text li,
ol.text li {
  padding-bottom: 0.53333333rem;
  padding-top: 0.53333333rem;
}
ul ul,
ol ul,
ul ol,
ol ol {
  margin-bottom: 0;
}
.list-unstyled,
ul {
  list-style: none;
}
.bulletList {
  list-style: none;
}
.bulletList li::before {
  content: "•";
  margin-right: 2.8em;
}
.list-inline {
  list-style: none;
}
.list-inline > li {
  display: inline-block;
}
.tableList {
  display: table;
  width: 100%;
}
.tableList > li {
  display: table-cell;
}
dl {
  margin-top: 0;
  margin-bottom: 1.6em;
}
dt {
  font-weight: bold;
}
dd {
  margin-left: 0;
}
a {
  color: #3A5A99;
  text-decoration: none;
  outline: 0;
  -webkit-transition: color 0.3s;
  -o-transition: color 0.3s;
  transition: color 0.3s;
}
a:hover,
a:focus {
  color: #6091e2;
  outline: 0;
}
a:active {
  color: #212121;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.text-center {
  text-align: center;
}
.text-justify {
  text-align: justify;
}
.text-nowrap {
  white-space: nowrap;
}
.text-lowercase {
  text-transform: lowercase;
}
.text-uppercase {
  text-transform: uppercase;
}
.text-capitalize {
  text-transform: capitalize;
}
/* ==========================================================================
   3 BUTTONS
   ========================================================================== */
.btn {
  display: inline-block;
  color: #212121;
  font-weight: 500;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  white-space: nowrap;
  font-size: 0.8em;
  text-transform: uppercase;
  /*letter-spacing: .03em;*/
  position: relative;
  padding: 0.42857143em 1.14285714em;
  margin-top: 0.42857143em;
  margin-bottom: 0.42857143em;
  margin-right: 1.14285714em;
  line-height: 1.71428571em;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
  color: #a3a3a3;
  cursor: help;
  pointer-events: none;
}
.icoBtn {
  margin: 0 16px 0 16px;
  padding: 0 0 0 0;
}
.icoBtn .ico {
  position: relative;
  font-size: 1.33333333rem;
}
.btnBig {
  font-size: 1.2em;
  line-height: 2.22222222em;
  padding-top: 0.44444444em;
  padding-bottom: 0.44444444em;
  margin-top: 0.44444444em;
  margin-bottom: 0.44444444em;
}
.btnMiddle {
  font-size: 16px;
  text-transform: inherit;
  font-weight: normal;
  padding: 14px 15px;
  box-shadow: none !important;
  letter-spacing: normal;
}
.fab {
  display: inline-block;
  text-align: center;
  line-height: 2.8em;
  color: #212121;
  width: 2.8em;
  height: 2.8em;
  font-size: 1.33333333em;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  position: fixed;
  top: 6.13333333rem;
  z-index: 39;
  right: 10%;
}
.fab:active {
  -webkit-box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
}
@media (max-width: 767px) {
  .fab {
    top: 2.93333333rem;
  }
}
.rised {
  -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}
.rised:active {
  -webkit-box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
}
/* ==========================================================================
   4 FORMS
   ========================================================================== */
/***************************
   Text Inputs + Textarea
****************************/
::-webkit-input-placeholder {
  color: #d1d1d1;
}
:-moz-placeholder {
  /* Firefox 18- */
  color: #d1d1d1;
}
::-moz-placeholder {
  /* Firefox 19+ */
  color: #d1d1d1;
}
:-ms-input-placeholder {
  color: #d1d1d1;
}
input[type=text],
input[type=password],
input[type=email],
input[type=url],
input[type=time],
input[type=date],
input[type=datetime-local],
input[type=tel],
input[type=number],
input[type=search],
textarea.materialize-textarea {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #9e9e9e;
  outline: none;
  height: 3.13333333rem;
  width: 100%;
  font-size: 1rem;
  margin: 0 0 1.6rem 0;
  padding: 0;
  box-shadow: none;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  transition: all .3s;
  color: #000;
}
input[type=text]:disabled,
input[type=password]:disabled,
input[type=email]:disabled,
input[type=url]:disabled,
input[type=time]:disabled,
input[type=date]:disabled,
input[type=datetime-local]:disabled,
input[type=tel]:disabled,
input[type=number]:disabled,
input[type=search]:disabled,
textarea.materialize-textarea:disabled,
input[type=text][readonly="readonly"],
input[type=password][readonly="readonly"],
input[type=email][readonly="readonly"],
input[type=url][readonly="readonly"],
input[type=time][readonly="readonly"],
input[type=date][readonly="readonly"],
input[type=datetime-local][readonly="readonly"],
input[type=tel][readonly="readonly"],
input[type=number][readonly="readonly"],
input[type=search][readonly="readonly"],
textarea.materialize-textarea[readonly="readonly"] {
  color: #c5c5c5;
  border-bottom: 1px dotted #c5c5c5;
}
input[type=text]:disabled + label,
input[type=password]:disabled + label,
input[type=email]:disabled + label,
input[type=url]:disabled + label,
input[type=time]:disabled + label,
input[type=date]:disabled + label,
input[type=datetime-local]:disabled + label,
input[type=tel]:disabled + label,
input[type=number]:disabled + label,
input[type=search]:disabled + label,
textarea.materialize-textarea:disabled + label,
input[type=text][readonly="readonly"] + label,
input[type=password][readonly="readonly"] + label,
input[type=email][readonly="readonly"] + label,
input[type=url][readonly="readonly"] + label,
input[type=time][readonly="readonly"] + label,
input[type=date][readonly="readonly"] + label,
input[type=datetime-local][readonly="readonly"] + label,
input[type=tel][readonly="readonly"] + label,
input[type=number][readonly="readonly"] + label,
input[type=search][readonly="readonly"] + label,
textarea.materialize-textarea[readonly="readonly"] + label {
  color: #c5c5c5;
}
input[type=text]:focus:not([readonly]),
input[type=password]:focus:not([readonly]),
input[type=email]:focus:not([readonly]),
input[type=url]:focus:not([readonly]),
input[type=time]:focus:not([readonly]),
input[type=date]:focus:not([readonly]),
input[type=datetime-local]:focus:not([readonly]),
input[type=tel]:focus:not([readonly]),
input[type=number]:focus:not([readonly]),
input[type=search]:focus:not([readonly]),
textarea.materialize-textarea:focus:not([readonly]) {
  border-bottom: 1px solid #212121;
  box-shadow: 0 1px 0 0 #212121;
}
input[type=text]:focus:not([readonly]) + label,
input[type=password]:focus:not([readonly]) + label,
input[type=email]:focus:not([readonly]) + label,
input[type=url]:focus:not([readonly]) + label,
input[type=time]:focus:not([readonly]) + label,
input[type=date]:focus:not([readonly]) + label,
input[type=datetime-local]:focus:not([readonly]) + label,
input[type=tel]:focus:not([readonly]) + label,
input[type=number]:focus:not([readonly]) + label,
input[type=search]:focus:not([readonly]) + label,
textarea.materialize-textarea:focus:not([readonly]) + label {
  color: #212121;
}
input[type=text].valid,
input[type=password].valid,
input[type=email].valid,
input[type=url].valid,
input[type=time].valid,
input[type=date].valid,
input[type=datetime-local].valid,
input[type=tel].valid,
input[type=number].valid,
input[type=search].valid,
textarea.materialize-textarea.valid {
  border-bottom: 1px solid #689f38;
  box-shadow: 0 1px 0 0 #689f38;
}
input[type=text].invalid,
input[type=password].invalid,
input[type=email].invalid,
input[type=url].invalid,
input[type=time].invalid,
input[type=date].invalid,
input[type=datetime-local].invalid,
input[type=tel].invalid,
input[type=number].invalid,
input[type=search].invalid,
textarea.materialize-textarea.invalid {
  border-bottom: 1px solid #ff0000;
  box-shadow: 0 1px 0 0 #ff0000;
}
.input-field {
  position: relative;
  margin-top: 0px;
}
.input-field label {
  color: #9e9e9e;
  position: absolute;
  top: 0.8em;
  left: 0;
  font-size: 1rem;
  cursor: text;
  -webkit-transition: 0.2s ease-out;
  -o-transition: 0.2s ease-out;
  transition: 0.2s ease-out;
}
.input-field label.active {
  font-size: 12px;
  -webkit-transform: translate(0, -140%);
  -ms-transform: translate(0, -140%);
  -o-transform: translate(0, -140%);
  transform: translate(0, -140%);
}
.input-field .prefix {
  position: absolute;
  width: 3rem;
  font-size: 2rem;
  -webkit-transition: color 0.2s;
  -o-transition: color 0.2s;
  transition: color 0.2s;
}
.input-field .prefix.active {
  color: #212121;
}
.input-field .prefix ~ input,
.input-field .prefix ~ textarea {
  margin-left: 3rem;
  width: 92%;
  width: calc(97%);
}
.input-field .prefix ~ textarea {
  padding-top: .8rem;
}
.input-field .prefix ~ label {
  margin-left: 3rem;
}
textarea {
  width: 100%;
  height: 3rem;
  background-color: transparent;
}
textarea.materialize-textarea {
  overflow-y: hidden;
  /* prevents scroll bar flash */
  padding: 1.6rem 0;
  /* prevents text jump on Enter keypress */
  resize: none;
  min-height: 3rem;
}
.hiddendiv {
  display: none;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  /* future version of deprecated 'word-wrap' */
  padding-top: 1.2rem;
  /* prevents text jump on Enter keypress */
}
/***************
   Checkboxes Radio
***************/
/* CUSTOM CSS CHECKBOXES */
/* Remove default checkbox */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked,
[type="radio"]:not(:checked),
[type="radio"]:checked, .checkbox_input {
  position: absolute;
  left: -9999px;
}

.checkbox_input {
  position: absolute;
  left: -9999px;
}
[type="checkbox"] + label,
[type="radio"] + label {
  position: relative;
  cursor: pointer;
  display: inline-block;
  padding-top: 0.8em;
  padding-bottom: 0.8em;
  -webkit-user-select: none;
  /* webkit (safari, chrome) browsers */
  -moz-user-select: none;
  /* mozilla browsers */
  -khtml-user-select: none;
  /* webkit (konqueror) browsers */
  -ms-user-select: none;
  /* IE10+ */
}
[type="checkbox"] + label .fa-square,
[type="radio"] + label .fa-square,
[type="checkbox"] + label .fa-circle,
[type="radio"] + label .fa-circle {
  opacity: 1;
  filter: alpha(opacity=100);
}
[type="checkbox"]:not(:checked):disabled + label,
[type="radio"]:not(:checked):disabled + label {
  color: #c5c5c5;
}
[type="checkbox"]:checked + label,
[type="radio"]:checked + label {
  color: #317D59;
}
[type="checkbox"]:checked + label .fa-square,
[type="radio"]:checked + label .fa-square,
[type="checkbox"]:checked + label .fa-circle,
[type="radio"]:checked + label .fa-circle {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  opacity: 0;
  filter: alpha(opacity=0);
}
[type="checkbox"]:checked:disabled + label .ico,
[type="radio"]:checked:disabled + label .ico {
  color: #c5c5c5;
}
/***************
  Select Field
***************/
.select-label {
  position: absolute;
}
.select-wrapper {
  position: relative;
  margin-top: 15px;
}
.select-wrapper input.select-dropdown {
  position: relative;
  cursor: pointer;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #9e9e9e;
  outline: none;
  height: 3rem;
  line-height: 3rem;
  width: 100%;
  font-size: 1rem;
  margin: 0 0 15px 0;
  padding: 0;
  display: block;
}
.select-wrapper .mdi-navigation-arrow-drop-down {
  color: initial;
  position: absolute;
  right: 0;
  top: 0;
  font-size: 23px;
}
.select-wrapper .mdi-navigation-arrow-drop-down.disabled {
  color: #c5c5c5;
}
/*select {
  display: none;
}*/
select.browser-default {
  display: block;
}
select:disabled {
  color: rgba(0, 0, 0, 0.3);
}
.select-wrapper input.select-dropdown:disabled {
  color: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}
.select-wrapper i {
  color: rgba(0, 0, 0, 0.3);
}
.select-dropdown li.disabled {
  color: rgba(0, 0, 0, 0.3);
}
.select-dropdown li.disabled:hover {
  background-color: transparent;
}
/*********************
      File Input
**********************/
.file-field {
  position: relative;
  overflow: hidden;
}
.file-field input.file-path {
  margin-left: 100px;
}
.file-field .btn {
  position: absolute;
  top: 0;
  height: 3rem;
  line-height: 3rem;
}
.file-field span {
  cursor: pointer;
}
.file-field input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: 20px;
  cursor: pointer;
  opacity: 0;
  filter: alpha(opacity=0);
}
/***************************
   Text Inputs + Textarea
****************************/
select {
  background-color: rgba(255, 255, 255, 0.9);
  width: 100%;
  padding: 5px;
  border: 1px solid #f2f2f2;
  border-radius: 2px;
  height: 3rem;
}
/* ==========================================================================
   5 TABS
   ========================================================================== */
.tab-content > .tab-pane {
  display: none;
}
.tab-content > .active {
  display: block;
}
.tabs {
  position: relative;
  height: 48px;
  margin: 0 auto;
  margin-bottom: 1.6rem;
  width: 100%;
  white-space: nowrap;
}
.tabs .tab {
  display: block;
  float: left;
  text-align: center;
  line-height: 48px;
  height: 48px;
  padding: 0 20px;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .8px;
  width: 15%;
}
.tabs .tab a {
  display: block;
  width: 100%;
  height: 100%;
  -webkit-transition: color 0.28s;
  -o-transition: color 0.28s;
  transition: color 0.28s;
}
.tabs .indicator {
  position: absolute;
  bottom: 0;
  height: 2px;
  background-color: #3A5A99;
  will-change: left, right;
}
.tabs .tab {
  padding: 0;
}
/* ==========================================================================
   6 Responsive: Utility classes
   ========================================================================== */
@-ms-viewport {
  width: device-width;
}
.visible-xs,
.visible-sm,
.visible-md,
.visible-lg {
  display: none !important;
}
.visible-xs-block,
.visible-xs-inline,
.visible-xs-inline-block,
.visible-sm-block,
.visible-sm-inline,
.visible-sm-inline-block,
.visible-md-block,
.visible-md-inline,
.visible-md-inline-block,
.visible-lg-block,
.visible-lg-inline,
.visible-lg-inline-block {
  display: none !important;
}
@media (max-width: 767px) {
  .visible-xs:not(.mobile-fix) {
    display: block !important;
  }
  table.visible-xs {
    display: table !important;
  }
  tr.visible-xs {
    display: table-row !important;
  }
  th.visible-xs,
  td.visible-xs {
    display: table-cell !important;
  }
}
@media (max-width:650px) {
  .visible-xs.mobile-fix {
    display: block !important;
  }
}
@media (max-width: 767px) {
  .visible-xs-block {
    display: block !important;
  }
}
@media (max-width: 767px) {
  .visible-xs-inline {
    display: inline !important;
  }
}
@media (max-width: 767px) {
  .visible-xs-inline-block {
    display: inline-block !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm {
    display: block !important;
  }
  table.visible-sm {
    display: table !important;
  }
  tr.visible-sm {
    display: table-row !important;
  }
  th.visible-sm,
  td.visible-sm {
    display: table-cell !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-block {
    display: block !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-inline {
    display: inline !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-inline-block {
    display: inline-block !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md {
    display: block !important;
  }
  table.visible-md {
    display: table !important;
  }
  tr.visible-md {
    display: table-row !important;
  }
  th.visible-md,
  td.visible-md {
    display: table-cell !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md-block {
    display: block !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md-inline {
    display: inline !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md-inline-block {
    display: inline-block !important;
  }
}
@media (min-width: 1200px) {
  .visible-lg {
    display: block !important;
  }
  table.visible-lg {
    display: table !important;
  }
  tr.visible-lg {
    display: table-row !important;
  }
  th.visible-lg,
  td.visible-lg {
    display: table-cell !important;
  }
}
@media (min-width: 1200px) {
  .visible-lg-block {
    display: block !important;
  }
}
@media (min-width: 1200px) {
  .visible-lg-inline {
    display: inline !important;
  }
}
@media (min-width: 1200px) {
  .visible-lg-inline-block {
    display: inline-block !important;
  }
}
.footer-fix {
  display: none;
}
@media (max-width: 767px) {
  .hidden-xs:not(.mobile-fix,.footer-fix) {
    display: none !important;
  }
  .footer-fix {
    display: block;
  }
}
@media (max-width: 650px) {
  .hidden-xs.mobile-fix {
    display: none !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hidden-sm {
    display: none !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hidden-md {
    display: none !important;
  }
}
@media (min-width: 1200px) {
  .hidden-lg {
    display: none !important;
  }
}
.visible-print {
  display: none !important;
}
@media print {
  .visible-print {
    display: block !important;
  }
  table.visible-print {
    display: table !important;
  }
  tr.visible-print {
    display: table-row !important;
  }
  th.visible-print,
  td.visible-print {
    display: table-cell !important;
  }
}
.visible-print-block {
  display: none !important;
}
@media print {
  .visible-print-block {
    display: block !important;
  }
}
.visible-print-inline {
  display: none !important;
}
@media print {
  .visible-print-inline {
    display: inline !important;
  }
}
.visible-print-inline-block {
  display: none !important;
}
@media print {
  .visible-print-inline-block {
    display: inline-block !important;
  }
}
@media print {
  .hidden-print {
    display: none !important;
  }
}
/* ==========================================================================
   7 Embeds responsive
   ========================================================================== */
.embed-responsive {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;
}
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  border: 0;
}
.embed-responsive-16by9 {
  padding-bottom: 56.25%;
}
.embed-responsive-4by3 {
  padding-bottom: 75%;
}
/* ==========================================================================
   8 Component animations
   ========================================================================== */
.fade {
  opacity: 0;
  -webkit-transition: opacity 0.15s linear;
  -o-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
}
.fade.in {
  opacity: 1;
}
.collapse {
  display: none;
}
.collapse.in {
  display: block;
}
tr.collapse.in {
  display: table-row;
}
tbody.collapse.in {
  display: table-row-group;
}
.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition-property: height, visibility;
  transition-property: height, visibility;
  -webkit-transition-duration: 0.35s;
  transition-duration: 0.35s;
  -webkit-transition-timing-function: ease;
  transition-timing-function: ease;
}
/*
    @license
    Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
    This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
    The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
    The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
    Code distributed by Google as part of the polymer project is also
    subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 */
/**************************/
/* 9 STYLES FOR THE SPINNER */
/**************************/
/*
 * Constants:
 *      STROKEWIDTH = 3px
 *      ARCSIZE     = 270 degrees (amount of circle the arc takes up)
 *      ARCTIME     = 1333ms (time it takes to expand and contract arc)
 *      ARCSTARTROT = 216 degrees (how much the start location of the arc
 *                                should rotate each time, 216 gives us a
 *                                5 pointed star shape (it's 360/5 * 3).
 *                                For a 7 pointed star, we might do
 *                                360/7 * 3 = 154.286)
 *      CONTAINERWIDTH = 28px
 *      SHRINK_TIME = 400ms
 */
.preloader-wrapper {
  display: inline-block;
  position: relative;
  width: 48px;
  height: 48px;
}
.preloader-wrapper.small {
  width: 36px;
  height: 36px;
}
.preloader-wrapper.big {
  width: 64px;
  height: 64px;
}
.preloader-wrapper.active {
  /* duration: 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */
  -webkit-animation: container-rotate 1568ms linear infinite;
  animation: container-rotate 1568ms linear infinite;
}
@-webkit-keyframes container-rotate {
  to {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes container-rotate {
  to {
    transform: rotate(360deg);
  }
}
.spinner-layer {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.spinner-blue {
  border-color: #4285f4;
}
.spinner-red {
  border-color: #db4437;
}
.spinner-yellow {
  border-color: #f4b400;
}
.spinner-green {
  border-color: #0f9d58;
}
/**
 * IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee):
 *
 * iOS Safari (tested on iOS 8.1) does not handle animation-delay very well - it doesn't
 * guarantee that the animation will start _exactly_ after that value. So we avoid using
 * animation-delay and instead set custom keyframes for each color (as redundant as it
 * seems).
 *
 * We write out each animation in full (instead of separating animation-name,
 * animation-duration, etc.) because under the polyfill, Safari does not recognize those
 * specific properties properly, treats them as -webkit-animation, and overrides the
 * other animation rules. See https://github.com/Polymer/platform/issues/53.
 */
.active .spinner-layer.spinner-blue {
  /* durations: 4 * ARCTIME */
  -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
.active .spinner-layer.spinner-red {
  /* durations: 4 * ARCTIME */
  -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
.active .spinner-layer.spinner-yellow {
  /* durations: 4 * ARCTIME */
  -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
.active .spinner-layer.spinner-green {
  /* durations: 4 * ARCTIME */
  -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
@-webkit-keyframes fill-unfill-rotate {
  12.5% {
    -webkit-transform: rotate(135deg);
  }
  /* 0.5 * ARCSIZE */
  25% {
    -webkit-transform: rotate(270deg);
  }
  /* 1   * ARCSIZE */
  37.5% {
    -webkit-transform: rotate(405deg);
  }
  /* 1.5 * ARCSIZE */
  50% {
    -webkit-transform: rotate(540deg);
  }
  /* 2   * ARCSIZE */
  62.5% {
    -webkit-transform: rotate(675deg);
  }
  /* 2.5 * ARCSIZE */
  75% {
    -webkit-transform: rotate(810deg);
  }
  /* 3   * ARCSIZE */
  87.5% {
    -webkit-transform: rotate(945deg);
  }
  /* 3.5 * ARCSIZE */
  to {
    -webkit-transform: rotate(1080deg);
  }
  /* 4   * ARCSIZE */
}
@keyframes fill-unfill-rotate {
  12.5% {
    transform: rotate(135deg);
  }
  /* 0.5 * ARCSIZE */
  25% {
    transform: rotate(270deg);
  }
  /* 1   * ARCSIZE */
  37.5% {
    transform: rotate(405deg);
  }
  /* 1.5 * ARCSIZE */
  50% {
    transform: rotate(540deg);
  }
  /* 2   * ARCSIZE */
  62.5% {
    transform: rotate(675deg);
  }
  /* 2.5 * ARCSIZE */
  75% {
    transform: rotate(810deg);
  }
  /* 3   * ARCSIZE */
  87.5% {
    transform: rotate(945deg);
  }
  /* 3.5 * ARCSIZE */
  to {
    transform: rotate(1080deg);
  }
  /* 4   * ARCSIZE */
}
@-webkit-keyframes blue-fade-in-out {
  from {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  26% {
    opacity: 0;
  }
  89% {
    opacity: 0;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes blue-fade-in-out {
  from {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  26% {
    opacity: 0;
  }
  89% {
    opacity: 0;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes red-fade-in-out {
  from {
    opacity: 0;
  }
  15% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  51% {
    opacity: 0;
  }
}
@keyframes red-fade-in-out {
  from {
    opacity: 0;
  }
  15% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  51% {
    opacity: 0;
  }
}
@-webkit-keyframes yellow-fade-in-out {
  from {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  76% {
    opacity: 0;
  }
}
@keyframes yellow-fade-in-out {
  from {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  76% {
    opacity: 0;
  }
}
@-webkit-keyframes green-fade-in-out {
  from {
    opacity: 0;
  }
  65% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes green-fade-in-out {
  from {
    opacity: 0;
  }
  65% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/**
 * Patch the gap that appear between the two adjacent div.circle-clipper while the
 * spinner is rotating (appears on Chrome 38, Safari 7.1, and IE 11).
 */
.gap-patch {
  position: absolute;
  box-sizing: border-box;
  top: 0;
  left: 45%;
  width: 10%;
  height: 100%;
  overflow: hidden;
  border-color: inherit;
}
.gap-patch .circle {
  width: 1000%;
  left: -450%;
}
.circle-clipper {
  display: inline-block;
  position: relative;
  width: 50%;
  height: 100%;
  overflow: hidden;
  border-color: inherit;
}
.circle-clipper .circle {
  width: 200%;
  box-sizing: border-box;
  height: 100%;
  border-width: 3px;
  /* STROKEWIDTH */
  border-style: solid;
  border-color: inherit;
  border-bottom-color: transparent !important;
  border-radius: 50%;
  -webkit-animation: none;
  animation: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
}
.circle-clipper.left .circle {
  left: 0;
  border-right-color: transparent !important;
  -webkit-transform: rotate(129deg);
  transform: rotate(129deg);
}
.circle-clipper.right .circle {
  left: -100%;
  border-left-color: transparent !important;
  -webkit-transform: rotate(-129deg);
  transform: rotate(-129deg);
}
.active .circle-clipper.left .circle {
  /* duration: ARCTIME */
  -webkit-animation: left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  animation: left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
.active .circle-clipper.right .circle {
  /* duration: ARCTIME */
  -webkit-animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
@-webkit-keyframes left-spin {
  from {
    -webkit-transform: rotate(130deg);
  }
  50% {
    -webkit-transform: rotate(-5deg);
  }
  to {
    -webkit-transform: rotate(130deg);
  }
}
@keyframes left-spin {
  from {
    transform: rotate(130deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  to {
    transform: rotate(130deg);
  }
}
@-webkit-keyframes right-spin {
  from {
    -webkit-transform: rotate(-130deg);
  }
  50% {
    -webkit-transform: rotate(5deg);
  }
  to {
    -webkit-transform: rotate(-130deg);
  }
}
@keyframes right-spin {
  from {
    transform: rotate(-130deg);
  }
  50% {
    transform: rotate(5deg);
  }
  to {
    transform: rotate(-130deg);
  }
}
#spinnerContainer.cooldown {
  /* duration: SHRINK_TIME */
  -webkit-animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0, 0.2, 1);
  animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
@-webkit-keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
/*! HTML5 Boilerplate v5.0.0 | MIT License | http://h5bp.com/ */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */
/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html {
  color: #222;
  font-size: 15px;
  line-height: 1.6;
  color: #616161;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */
::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}
::selection {
  background: #b3d4fc;
  text-shadow: none;
}
/*
 * A better looking default horizontal rule
 */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ededed;
  margin: 1.53333333rem 0;
  padding: 0;
}
/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */
audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}
/*
 * Remove default fieldset styles.
 */
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}
/*
 * Allow only vertical resizing of textareas.
 */
textarea {
  resize: vertical;
}
/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */
.browserupgrade {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}
.pull-right {
  float: right !important;
}
.pull-left {
  float: left !important;
}
figure {
  margin: 0;
  padding: 0;
}
body {
  background-color: #ededed;
  position: relative;
}
/* ==========================================================================
   10 MAIN MODULES
   ========================================================================== */
/*------------------------------------------------------------------
PRELOADER
*/
.preloader {
  position: fixed;
  z-index: 999999999999999999;
  width: 100%;
  color: #ffffff;
  height: 100%;
  background-color: #f7f7f7;
}
.preloader .center {
  text-align: center;
  height: 100%;
  top: 50%;
  position: relative;
  margin-top: -48px;
}
/*------------------------------------------------------------------
ICONS
*/
.ico {
  font-size: 1.33333333em;
  height: 2.4em;
  width: 2.4em;
  display: inline-block;
  line-height: 2.4em;
  text-align: center;
  position: relative;
  left: 0em;
  top: 0;
  outline: 0;
}
/*------------------------------------------------------------------
Main elements are - .block, .section, .post. They separate modules from each others. This classes adds margin and paddings. In main section
(in article) use .section(big padding) or .page classes. In aside use .block classes to separate modules.
*/
.block {
  position: relative;
  margin-bottom: 3.2rem;
  margin-top: 3.2rem;
  padding-left: 1.06666667rem;
  padding-right: 1.06666667rem;
}
@media (max-width: 767px) {
  .block {
    margin-bottom: 0;
    margin-top: 0;
    padding-top: 1.6em;
    padding-bottom: 3.2em;
  }
}
.blockHead {
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
}
.blockHead .ico {
  font-size: 40px;
}
.blockHeader {
  margin-bottom: 1.6rem;
    word-wrap: break-word;
}
.blockUlHeader {
  margin-left: 4.8rem;
}
.blockUl {
  padding: 0;
  margin: 0;
}
.blockUl.list-inline .ico {
  left: -3.2rem;
}
.blockUl > li {
  position: relative;
  min-height: 3.2rem;
  margin-left: 4.8rem;
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
}
.blockUl > li.collapseList {
  padding: 0;
  margin-bottom: 3.2em;
}
.blockUl > li > .ico,
.blockUl > li > a .ico,
.blockUl > li label .ico {
  left: -5.06666667rem;
  position: absolute;
}
.blockUl > li > a {
  display: inline-block;
}
.blockUlSubheader {
  font-size: 0.93333333rem;
  font-weight: 500;
  color: #9e9e9e;
}
/*------------------------------------------------------------------
Add upper line to .block element
*/
.lined {
  border-top: 2px solid #212121;
  margin-top: 22px;
  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  position: relative;
}
.lined .ico {
  -webkit-transition: color 0.3s;
  -o-transition: color 0.3s;
  transition: color 0.3s;
}
.lined:hover {
  -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  background-color: white;
  border-top: 2px solid #3A5A99;
}
.lined:hover .ico {
  color: #3A5A99;
}
.lined p {
  padding-bottom: 4.8rem;
}
.comment .badge {
  margin-left: 32px;
  top: 0;
}
.noPadding {
  padding: 0 !important;
}
/*------------------------------------------------------------------
Post
*/
.postImage {
  display: block;
  max-width: 100%;
  height: auto;
}
.post {
  padding-top: 3.2em;
  padding-bottom: 3.2em;
  padding-left: 1.06666667em;
  padding-right: 1.06666667em;
  position: relative;
}
.post .postHeader {
  margin-bottom: 2.13333333rem;
}
.post .gridImage {
  margin-bottom: 1.6em;
}
.postFilter {
  padding-top: 3.2em;
  padding-left: 1.06666667em;
  padding-right: 1.06666667em;
}
.postFilter ul {
  margin-bottom: 0;
}
/*------------------------------------------------------------------
Section element.
*/
.section {
  padding: 3.2rem 0 8rem 0;
}
/*------------------------------------------------------------------
Cards in footer
*/
.card {
  margin-bottom: 0;
  margin-top: 0;
  padding: 24px;
  padding-left: 32px;
  position: relative;
  background-color: #212121;
  width: 105%;
  height: 432px;
  top: 0;
  -webkit-transition: top 0.3s;
  -o-transition: top 0.3s;
  transition: top 0.3s;
  -webkit-box-shadow: 2px 0px 5px rgba(0, 0, 0, 0.2);
  box-shadow: 2px 0px 5px rgba(0, 0, 0, 0.2);
}
.card:hover {
  top: -24px;
}
.card:hover .bottomLink {
  bottom: 12px;
}
.card.one {
  z-index: 12;
}
.card.two {
  z-index: 11;
}
.card.tree {
  z-index: 10;
}
.card.four {
  z-index: 9;
}
@media (max-width: 767px) {
  .card {
    width: 100%;
  }
  .card:hover {
    top: 0;
  }
}
/*------------------------------------------------------------------
Underline headers in footer
*/
.linedHeader {
  position: relative;
  margin-bottom: 1.6rem;
}
.linedHeader:after {
  content: " ";
  position: absolute;
  top: 46px;
  left: 0;
  width: 48px;
  height: 2px;
  background-color: #ffeb3b;
}
/*------------------------------------------------------------------
Bottom copywtright
*/
.copywright {
  line-height: 4.8rem;
  margin: 0;
}
/*------------------------------------------------------------------
Links thats apear when you hover on footer card
*/
.bottomLink {
  position: absolute;
  display: block;
  bottom: 0;
  right: 24px;
}
@media (max-width: 767px) {
  .bottomLink {
    display: none;
  }
}
/*------------------------------------------------------------------
Dropdown block
*/
.dropDown {
  position: absolute;
  top: 48px;
  left: -11px;
  z-index: 1000;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
/*------------------------------------------------------------------
Menu
*/
.menu {
  min-width: 12.8rem;
  border-radius: 2px;
  background-color: white;
  -webkit-box-shadow: 0 0px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0px 2px rgba(0, 0, 0, 0.2);
  padding-top: 0.53333333rem;
  padding-bottom: 0.53333333rem;
}
.menu li a {
  padding-top: 12px;
  padding-left: 1.06666667em;
  padding-right: 1.06666667em;
  padding-bottom: 12px;
  display: block;
}
.menu li a:hover {
  background-color: #fafafa;
}
.menu li .submenu {
  -webkit-box-shadow: none;
  box-shadow: none;
  padding-top: 0;
  padding-bottom: 0;
}
/*------------------------------------------------------------------
Main nav
*/
.mainNav {
  margin: 0;
  padding: 0;
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 40px;
  margin-bottom: -10px;
}
.mainNav > li {
  position: relative;
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  text-align: left;
}
.mainNav > li:hover {
  overflow: visible;
}
.mainNav > li:hover .dropDown {
  opacity: 1;
  filter: alpha(opacity=100);
  z-index: 9999;
}
/*------------------------------------------------------------------
Social icons
*/
.socialIcons {
  text-align: center;
  margin: 0;
}
.socialIcons .ico {
  width: 3.6em;
  height: 3.6em;
  line-height: 3.6em;
}
.socialIcons li {
  display: inline-block;
}
/*------------------------------------------------------------------
Index page. Main slider
*/
.slider {
  position: relative;
  /*height: 57.6em;*/
    height: 100%;
  overflow: hidden;
  background-position: 0;
}
.slider img {
  display: block;
  max-width: 100%;
  height: auto;
}
.slider .block {
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}
.slider .block.animRight {
  right: 100px;
  opacity: 0;
  filter: alpha(opacity=0);
}
.slider .block.animRight.in {
  right: 0;
  opacity: 1;
  filter: alpha(opacity=100);
}
.slider .block.animLeft {
  left: 100px;
  opacity: 0;
  filter: alpha(opacity=0);
}
.slider .block.animLeft.in {
  left: 0;
  opacity: 1;
  filter: alpha(opacity=100);
}
@media (max-width: 767px) {
  .slider {
    height: 33.6em;
  }
  .slider .slide {
    margin-top: 4.26666667em;
  }
}
.slide {
  margin-top: 120px;
}
/*------------------------------------------------------------------
Circle badge inside slides
*/
.bage {
  position: absolute;
  top: 128px;
  left: 50%;
  margin-left: -24px;
  width: 168px;
  height: 168px;
  text-align: center;
  -webkit-box-shadow: 0 19px 32px rgba(0, 0, 0, 0.2);
  box-shadow: 0 19px 32px rgba(0, 0, 0, 0.2);
  border-radius: 50%;
}
.bage h3 {
  margin-top: 3.2rem;
}
/*------------------------------------------------------------------
Grid
*/
.grid {
  padding-top: 1.6em;
}
.grid.persons {
  padding-bottom: 0.4em;
}
.grid div div:nth-child(even) .person {
  margin: 3em;
}
.grid .product .gridCaption {
  padding-top: 24px;
  padding-bottom: 24px;
  padding-right: 1.06666667em;
}
.gridCaption {
  padding-left: 1.06666667em;
  padding-top: 0.66666667em;
  padding-bottom: 0.66666667em;
}
.gridCaption:before,
.gridCaption:after {
  content: " ";
  display: table;
}
.gridCaption:after {
  clear: both;
}
.gridDescription {
  margin-left: 5.86666667em;
  max-height: 6em;
  padding-left: 1.06666667em;
  overflow: hidden;
}
.gridDescription p {
  margin: 0;
}
.subheader {
  font-weight: bold;
  margin-bottom: 0.26666667em;
  margin-top: 0.13333333em;
  display: block;
}
.gridImage {
  display: block;
  max-width: 100%;
  height: auto;
}
.gridImage img {
  display: block;
  max-width: 100%;
  height: auto;
}
.gridItem {
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.gridItem .dropDown {
  top: -1.6em;
  left: auto;
  right: 0;
}
.gridItem:before,
.gridItem:after {
  content: " ";
  display: table;
}
.gridItem:after {
  clear: both;
}
.gridItem:hover {
  -webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
}
.gridItem:hover .gridImage {
  opacity: 0.8;
  filter: alpha(opacity=80);
}
.gridItem .gridImage {
  display: block;
  -webkit-transition: opacity 0.3s;
  -o-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
/*------------------------------------------------------------------
User photos in circles. Index page v2/ #top
*/
.personCircle {
  margin-top: 1.6em;
  text-align: center;
  position: relative;
}
.personCircle img {
  width: 8em;
}
.personCircle .gridCaption {
  margin-top: 0.93333333em;
  padding-left: 0;
}
.personCircle .ico.contact {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: 1.2em;
  width: 36px;
  height: 36px;
  line-height: 36px;
}
/*------------------------------------------------------------------
Add this class to element that contains hidden dropdown module
*/
.showDrop:hover .dropDown {
  opacity: 1;
  filter: alpha(opacity=100);
  top: 0;
}
/*------------------------------------------------------------------
Flickr
*/
.flickr li {
  text-align: center;
}
.flickr li a {
  cursor: w-resize !important;
  -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
}
.flickr li a img {
  border-radius: 2px;
}
.instagram:before,
.instagram:after {
  content: " ";
  display: table;
}
.instagram:after {
  clear: both;
}
.instagram li {
  float: left;
  max-width: 120px;
  margin-bottom: 4px;
  margin-right: 4px;
}
.instagram li img {
  display: block;
  max-width: 100%;
  height: auto;
}
.product {
  position: relative;
  margin-bottom: 2em;
}
/*------------------------------------------------------------------
Class for rounded grid items
*/
.rounded {
  border-radius: 4px;
}
.rounded .gridImage img {
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
}
.person {
  margin: 1em;
  position: relative;
}
/*------------------------------------------------------------------
Camel hump chart
*/
.infoGraph {
  margin-top: 8em;
  position: relative;
  height: 240px;
  /*------------------------------------------------------------------
	Bug text. "We create"
	*/
}
.infoGraph .grafCircle {
  fill: white;
  stroke: #f44336;
  stroke-width: 3px;
  cursor: pointer;
}
.infoGraph .grafCircle:hover {
  stroke: #3A5A99;
}
.infoGraph:before,
.infoGraph:after {
  content: " ";
  display: table;
}
.infoGraph:after {
  clear: both;
}
.infoGraph #graph {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 38;
  height: 160px;
}
.infoGraph .bt {
  font-size: 16em;
  font-weight: bolder;
  position: absolute;
  line-height: 180px;
  bottom: 0;
  left: 0;
  color: #d4d4d4;
}
/*------------------------------------------------------------------
News
*/
#news .block h6 {
  margin-top: 0.8rem;
}
/*------------------------------------------------------------------
Portfolio
*/
#portfolio .tabWrap {
  padding-top: 1.6em;
}
/*------------------------------------------------------------------
Colorbox
*/
#cboxLoadedContent {
  background: white;
  padding: 1px;
}
.clientsCarusel li {
  height: 4.8em;
}
/*------------------------------------------------------------------
Owl Carousel
*/
.owl-theme .owl-controls {
  margin-top: 0;
  text-align: center;
}
.owl-theme .owl-controls .owl-pagination {
  height: 48px;
}
.owl-theme .owl-controls .owl-page span {
  display: block;
  width: 12px;
  height: 12px;
  margin: 18px 18px;
  filter: alpha(opacity=50);
  /*IE7 fix*/
  opacity: 0.5;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  background: #3A5A99;
}
/*------------------------------------------------------------------
Owl Carousel. Main slider. Index page.
*/
#hero .owl-theme .owl-controls {
  margin-top: 0;
  text-align: center;
  position: absolute;
  top: 50%;
  right: 0;
  width: 48px;
}
#hero .owl-theme .owl-controls .owl-page span {
  width: 16px;
  height: 16px;
  margin: 16px 16px;
  background: #ffeb3b;
}
@media (max-width: 767px) {
  #hero .owl-theme .owl-controls {
    display: none !important;
  }
}
/*------------------------------------------------------------------
Blog
*/
.blogHeader {
  height: 17.6em;
  position: relative;
}
.blogHeader .blockUl {
  padding-top: 2.66666667em;
}
.blogHeader .bigType,
.blogHeader h1 {
  padding-top: 4.8rem;
  padding-right: 1.06666667rem;
  padding-left: 1.06666667rem;
}
/*------------------------------------------------------------------
Background layer for inner pages. It located the section with the heading.
*/
.background {
  position: absolute;
  z-index: 10;
  width: 100%;
  top: 8em;
}
@media (max-width: 767px) {
  .background {
    top: 4.8em;
  }
}
/*------------------------------------------------------------------
Inner page main content. Left and right sheets
*/
.main {
  z-index: 12;
  position: relative;
}
.sheet {
  z-index: 11;
  position: relative;
}
.sheetLeft {
  background-position: 0 600px;
  z-index: 2;
  position: relative;
}
.shadow {
  -webkit-box-shadow: 2px 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: 2px 1px 2px rgba(0, 0, 0, 0.1);
}
@media (max-width: 767px) {
  .shadow {
    -webkit-box-shadow: none;
    box-shadow: none;
  }
}
.sheetRight {
  z-index: 1;
  position: relative;
  background-position: -100% 608px;
  top: 0.53333333em;
}
@media (max-width: 767px) {
  .sheetRight {
    background-position: 0 336px;
  }
}
@media (max-width: 767px) {
  .sheetRight {
    top: 0;
  }
}
.pagination > li {
  display: inline-block;
}
/*------------------------------------------------------------------
Inner page bagde.
*/
.badge {
  position: absolute;
  top: 60px;
  width: 4px;
  z-index: 999;
  cursor: pointer;
  color: white;
  overflow: hidden;
  left: 100%;
  right: auto;
  white-space: nowrap;
}
.badge span {
  position: relative;
  padding: 0 4px;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.3s;
  -o-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
.badge:hover {
  left: 100%;
  width: auto;
  right: auto;
}
.badge:hover span {
  opacity: 1;
  filter: alpha(opacity=100);
}
.nextPostLeft {
  padding-top: 3.2em;
  padding-bottom: 3.2em;
}
.nextPostLeft .ico {
  float: left;
}
.nextPostLeft .nextPostLeftHeader {
  margin-left: 4.8rem;
  font-weight: normal;
}
.nextPostRight {
  padding-top: 3.2em;
  padding-bottom: 3.2em;
}
.nextPostRight .ico {
  float: right;
}
.nextPostRight .nextPostRightHeader {
  text-align: right;
  font-weight: normal;
  margin-right: 4.8rem;
}
.newsPostHeader {
  height: 3.2em;
  border-bottom: 2px solid #212121;
  margin-bottom: 3.2em;
  position: relative;
}
.newsPostHeader .date {
  float: left;
  font-size: 34px;
  line-height: 3.2rem;
  font-weight: bold;
  color: #212121;
  margin-right: 3.2rem;
  margin-bottom: 0;
}
.newsPostHeader .month {
  margin: 0;
  position: absolute;
  line-height: 24px;
  bottom: -28px;
  font-size: 12px;
  width: 100%;
  left: 0;
}
/*------------------------------------------------------------------
Modal for search popup
*/
.modal {
  margin: 24px 16px;
  width: 704px;
}
@media (max-width: 767px) {
  .modal {
    width: 288px;
  }
}
/* ==========================================================================
   Helper classes
   ========================================================================== */
/*
 * Hide visually and from screen readers:
 * http://juicystudio.com/article/screen-readers-display-none.php
 */
.hidden {
  display: none !important;
  visibility: hidden;
}
/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */
.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}
/*
 * Hide visually and from screen readers, but maintain layout
 */
.invisible {
  visibility: hidden;
}
/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.clearfix:before,
.clearfix:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}
.clearfix:after {
  clear: both;
}
/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */
@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}
@media print, (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}
/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */
@media print {
  *,
  *:before,
  *:after {
    background: transparent !important;
    color: #000 !important;
    /* Black prints faster:
        http://www.sanbeiji.com/archives/953 */
    box-shadow: none !important;
    text-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  img {
    max-width: 100% !important;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
}


.btn-button {
    position: absolute;
    bottom: 0;
}

.chosen-container {
  width: initial !important;
}
#UserProfile_gender br{
	display: none;
}
#UserProfile_gender label{
	padding: 0.8em 10px 0.8em 0;
}
#poll-form input[type=radio] + label{
	background: url(/themes/eds_balashiha/assets/img/radio_off.png) 0 50% no-repeat !important;
    padding-left: 25px;
}
#poll-form input[type=radio]:checked + label{
	background: url(/themes/eds_balashiha/assets/img/radio_on.png) 0 50% no-repeat !important;
}


#poll-form input[type=radio] + label {
  position: relative;
}

#poll-form input[type=radio] + label:before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    margin-right: 0px;
    position: absolute;
    left: 0;
    top: 6px;
    background-color: #e8e8e8;
    border-radius: 16px;
    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
}

#poll-form input[type=radio] + label:after {
  content: "";
    /* display: none; */
    /* opacity: 0; */
    /* transition: all .4s; */
  display: block !important;
    transform: scale(0);
    width: 12px;
    height: 12px;
    margin-right: 0px;
    position: absolute;
    left: 2px;
    border-radius: 12px;
    top: 8px;
    background-color: #aecc53;
    box-shadow: inset 0px 2px 3px 0px rgba(5, 158, 5, 0.6), 0px 1px 0px 0px rgba(255, 255, 255, 0.8);
}

#poll-form input[type=radio]:checked + label:after {
  -webkit-animation: shadow  0.4s forwards;
  -moz-animation: shadow  0.4s forwards;
  -ms-animation: shadow  0.4s forwards;
  -o-animation: shadow  0.4s forwards;
  animation: shadow  0.4s forwards;
}

@-webkit-keyframes shadow {
  0% {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
  }
  50% {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}

#PollVote_choice_id_0 + label,
#PollVote_choice_id_1 + label,
#PollVote_choice_id_2 + label,
#PollVote_choice_id_3 + label,
#PollVote_choice_id_4 + label,
#PollVote_choice_id_5 + label {
  font-size: 16px;
  padding-top: 0;
  padding-bottom: 0;
  display: inline-block !important;
}



.total-info{
  margin: 0 auto;
  width: 35%;
}
.total-info .tabl{
  width: 100%;
  display: table;
}
.total-info .row{
  display: table-row;
}
.total-info .cell{
  display: table-cell;
  color: #000;
  font-size: 16px;
  border-bottom: 2px solid #E7E7E7;
  padding: 5px 10px;
  vertical-align: middle;
}
.not-autorized {
  font-size: 14px !important;
    line-height: 1.6;
    /* bottom: 45px; */
    padding: 0;
    margin: 0;
    position: relative;
    display: block;
    top: 0;
    margin-top: 15px;
    border: 1px solid #eae9e9;
    left: 0;
    right: 0;
    padding: 0px 7px;
}

.result_poll {
  /*margin-top: 50px;*/
}

.poll-image {
  width: 100%;
  height: auto;
}

.front-poll-image {
  width: auto;
  height: auto;
  max-width: 512px;
}

.list-poll-image {
  width: 200px;
  height: auto;
}

.result_poll .row-choice label {
  font-size: 14px !important;
}

.back-poll {
  display: block;
  margin-top: 15px;
}


@media(max-width: 1199px) {
	.not-autorized {
		top: 10%;
	}

	#poll-form #PollVote_choice_id .row-choice #PollVote_choice_id_0 + label {
	line-height: 1;
	}
}

#poll-form input[type=radio] + label {
	  background: none !important;
    padding-top: 0;
    padding-bottom: 0;
    display: inline-block !important;
    font-size: 16px;
}

#poll-form input[type=radio]:checked + label {
	background: none !important;
}



@media(max-width: 991px) {
	.result_poll {
		/*margin-top: 60px;*/
		padding-bottom: 40px;
	}

	#poll-form #PollVote_choice_id .row-choice #PollVote_choice_id_0 + label {
	line-height: inherit;
	}
}

@media(max-width: 767px) {
	.not-autorized {
		top: 4%;
	}

	.result_poll {
		padding-bottom: 0;
	}
}

@media(max-width: 569px) {
	.not-autorized {
		top: 4%;
	}
}

@media(max-width: 368px) {
	.result_poll {
		/*margin-top: 25px;*/
	}
}

@media(max-width: 347px) {
	.not-autorized {
		top: 0%;
	}
}


.rised>span> span + span.rippleWrap {
	/*top: -10px !important;*/
	/*left: -17px !important;*/
}


.email-confirm {
  margin-top: 1em;
  margin-bottom: 1em;
  padding: 5px 35px;
  background-color: #e9f1be;
  border-radius: 10px;
  border: 1px solid;
  position: relative;
}
.email-confirm p {
  margin-bottom: 5px;
}
.email-confirm .confirm-close {
  font-weight: bold;
  position: absolute;
  right: 5px;
  top: 5px;
  border-radius: 5px;
  border: 1px solid;
  padding: 0 5px 2px 5px;
  line-height: 1.1em;
  cursor: pointer;
}
.car1,.car2{

display:none;

}

.inp.registration-fields-login {
  background-color: #CBEAFB;
}

#cookie_notification{
  display: none;
  justify-content: space-between;
  align-items: flex-end;
  position: fixed;
  bottom: 15px;
  left: 50%;
  width: 900px;
  max-width: 90%;
  transform: translateX(-50%);
  padding: 25px;
  background-color: white;
  border-radius: 4px;
  box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.4);    
  z-index: 9999;
}

#cookie_notification p{
  margin: 0;
  font-size: 0.7rem;
  text-align: left;
}

.cookie_accept{
  padding: 7px 15px;
  background: #ef4036;
  border-radius: 5px;
  color: white;
}


@media (min-width: 576px){
  #cookie_notification.show{
    display: flex;
  }
  .cookie_accept{
    /* margin: 0 auto;
    margin-top: 10px; */
  }
}

@media (max-width: 575px){
  #cookie_notification.show{
    display: block;
    text-align: left;
  }
  .cookie_accept{
    margin: 10px 0 0 0;
  }
}