You are here

global.styles.css in Brainstorm profile 7

@import url(//fonts.googleapis.com/css?family=Raleway:400,600,700);
@import url(//fonts.googleapis.com/css?family=Hind:400,600,700);
@import url(animate.css);
@import url(grid.css);
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css);

/* =Common styles BEGIN */
*,
*:before,
*:after {
  box-sizing: border-box;
}
::selection {
  background: #19c2c9;
  color: #fff;
}
::-moz-selection {
  background: #19c2c9;
  color: #fff;
}
.view-content:before,
.views-row:before,
#header:before,
.main-slider-content-wrapper:before,
#primary-menu-bar:before,
#menu-bar:before,
.region:before {
  display: table;
  content: " ";
}
.mean-container a.meanmenu-reveal span {
  height: 1.5px;
  margin-top: 7px;
}

.view-content:after,
.views-row:after,
#header:after,
.main-slider-content-wrapper:after,
#primary-menu-bar:after,
#menu-bar:after,
.region:after {
  display: table;
  content: " ";
  clear: both;
}
#header-group {
  max-width: 1200px;
}
.contextual-links-wrapper a {
  transition: none;
}
html,
body {
  height: auto;
}
html {
  background: #fff;
}
body {
  overflow: hidden;
  min-width: 320px;
  font-family: "Hind", sans-serif;
  color: #333;
  font-size: 14px;
  font-weight: 500;
}
img,
input,
textarea {
  max-width: 100%;
}
textarea {
  min-height: 110px;
}
img {
  max-height: 100%;
}
.block-colorized-gmap img {
  max-height: none;
  max-width: none;
}
p:last-child {
  margin-bottom: 0;
}

p {
  font-size: 15px;
  text-decoration: none;
  font-family: 'Hind', sans-serif;
  font-weight: 500;
  color: #74797b;
  line-height: 25px;
}
.profile .user-picture {
  float: none;
}
h1,
h2,
h3,
h1 a,
.h1 a,
h2 a,
h3 a {
  text-transform: uppercase;
}
h1,
h2,
h3,
h4,
h5,
h6,
h1 a,
.h1 a,
h2 a,
h3 a,
h4 a,
.views-field-title,
.views-field-title a {
  font-weight: bold;
  font-family: 'Raleway', sans-serif;
  line-height: 70px;
  color: #2d2d2d;
  margin: 0;
}
h1 a:hover,
.h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover,
.views-field-title a:hover,
.node-title a:hover {
  text-decoration: none;
}
h1 {
  font-size: 56px;
  letter-spacing: 2.8px;
}
h2 {
  font-size: 45px;
  letter-spacing: 1.13px;
}
h3 {
  font-size: 30px;
  letter-spacing: 1.5px;
  background: url('../images/line.png') center bottom no-repeat;
  background-size: 80px;
  padding-bottom: 15px;
  text-align: center;
  margin-bottom: 35px;
}
h3.left {
  background-position-x: left;
  text-align: left;
}
h4 {
  font-size: 20px;
  line-height: 50px;
  letter-spacing: 1px;
}
h5 {
  font-size: 14px;
  font-weight: 400;
}
.node-title {
  font-family: 'Hind';
  font-size: 32px;
  text-transform: none;
  margin: 5px 0 15px;
  line-height: 40px;
}
.node-type-portfolio .node-title {
  width: 35%;
  float: left;
}
.title {
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 25px;
  margin-bottom: 20px;
  text-transform: none;
  line-height: normal;
}
.comment-title {
  font-family: 'Hind';
}
.italic {
  font-family: 'Raleway', sans-serif;
  font-weight: 500;
  font-style: italic;
  font-size: 15px;
  color: #74797b;
  line-height: normal;
  margin: 20px 0;
}
a {
  text-decoration: none;
  color: #19c2c9;
}
a:hover {
  text-decoration: none;
}
pre.code,
code {
  color: #333;
  font-family: 'Courier New', monospace;
}
pre.code {
  background-color: #e8e8e8;
  padding: 10px;
  border-left: 10px solid #1ec97b;
}
mark {
  display: inline-block;
  padding: 1px;
  background: #19c2c9;
  color: #fff;
}
blockquote,
blockquote p {
  font-family: 'Hind';
  font-size: 18px;
  color: #333;
  line-height: 28px;
  letter-spacing: -0.36px;
  margin: 20px 0;
  display: block;
  position: relative;
  font-style: normal;
}
blockquote:before {
  content: '';
  height: 100%;
  width: 4px;
  display: inline-block;
  position: absolute;
  background: #19c2c9;
  left: 0;
}
.node-type-blog #breadcrumb {
  display: none;
}
#breadcrumb {
  font-family: 'Hind', sans-serif;
  font-size: 15px;
  letter-spacing: 0.75px;
  color: #fff;
  text-align: center;
}
#breadcrumb li {
  display: inline-block;
}
#breadcrumb li a {
  color: #fff;
  font-weight: 700;
}
#breadcrumb li:not(:last-child):after {
  content: '/';
  width: 10px;
  display: inline-block;
  font-weight: 700;
}
#breadcrumb #crumbs {
  padding: 0;
}
#breadcrumb .crumb-separator {
  display: none;
}
blockquote {
  position: relative;
  margin: 20px 0;
  padding-left: 30px;
  min-height: 40px;
}
blockquote footer {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.13px;
  text-transform: uppercase;
}
.profession {
  font-weight: normal;
  text-transform: none;
  font-size: 14px;
}
div.messages {
  position: relative;
  min-height: 50px;
  padding-top: 40px;
}

.messages h2 {
  width: auto;
  height: auto;
  font-size: 14px;
  margin: 0;
  line-height: 30px;
  text-transform: none;
  clip: auto;
  top: 10px;
  position: absolute;
}
.messages .close {
  position: absolute;
  right: 20px;
  top: 17px;
}
.messages .close:hover {
  cursor: pointer;
}
.messages.error {
  background: #fcedef url('../images/alerts/error.png') 17px 17px no-repeat;
  border-color: #ffd9de;
}
.messages.error h2 {
  color: #ff9999;
}
.messages.error .close {
  content: url('../images/alerts/4.png');
}
.messages.warning {
  background: #fefaec url('../images/alerts/warning.png') 17px 17px no-repeat;
  border-color: #f7eac7;
}
.messages.warning h2 {
  color: #ffcc66;
}
.messages.warning .close {
  content: url('../images/alerts/3.png');
}
.messages.status {
  background: #effbee url('../images/alerts/status.png') 17px 17px no-repeat;
  border-color: #cbeec8;
}
.messages.status h2 {
  color: #99cc99;
}
.messages.status .close {
  content: url('../images/alerts/2.png');
}
.messages.info {
  background: #f0faff url('../images/alerts/info.png') 17px 17px no-repeat;
  border-color: #ceedfc;
}
.messages.info h2 {
  color: #77b3f0;
}
.messages.info .close {
  content: url('../images/alerts/1.png');
}

#content ul,
.sidebar ul,
#content ul li,
.sidebar ul li,
#columns ul li.leaf,
#columns ul li.collapsed,
#block-system-user-menu .menu,
#block-system-user-menu .menu li {
  padding: 0;
}
#content ol,
.sidebar ol {
  padding-left: 25px;
}
#content ol li,
.sidebar ol li,
#columns ol li.leaf,
#columns ol li.collapsed {
  padding-left: 5px;
}
#content ul,
.sidebar ul,
#content li,
.sidebar li {
  list-style: square inside;
  color: #19c2c9;
}
#content .contextual-links li {
  list-style: none;
}
#content ul li span,
.sidebar ul li span {
  line-height: 26px;
  font-size: 14px;
  color: #74797b;
}
#columns ul,
#columns ol,
#block-system-user-menu .menu {
  margin: 15px 0;
}
.menu li,
.item-list ul li,
.links li,
.menu li.leaf,
.menu li.collapsed {
  padding-left: 0;
  margin-left: 0;
}
#columns .menu li:before,
#columns .item-list li:before,
#columns .links li:before,
#columns .contextual-links-wrapper li:before,
#columns .tabs li:before,
#page .field-name-field-portfolio-terms ul li:before {
  content: none;
}
#page .contextual-links,
#page .contextual-links li {
  margin: 0;
}
#page .contextual-links {
  padding: 0.25em 0;
}
#page .contextual-links li {
  padding: 0;
}
.links a:hover,
.node-author a:hover {
  text-decoration: underline;
}
#content p {
  margin-top: 0;
}
.grippie {
  display: none !important;
}
#branding,
.region-inner,
body .view-content,
body .block-title,
.block-our-amazing-team-block-1 .block-title,
.view-header,
.view-main-slider .views-field-nothing,
#columns,
#menu-bar nav,
#primary-menu-bar nav,
#secondary-menu-bar,
#header-group {
  margin-right: auto;
  margin-left: auto;
}
#branding {
  width: 30%;
  float: left;
  min-width: 180px;
}

body.not-front #columns {
  max-width: 1200px;
  padding: 0;
  margin: 65px auto 90px auto;
}
body.page-portfolio #columns {
  max-width: none;
}
body .view-content .view-content {
  padding-left: 0;
  padding-right: 0;
}
.sidebar .region-inner,
.not-front #columns .content-inner {
  padding: 0;
}
#main-content {
  margin: 0;
}
#page.container {
  max-width: none;
}
.page-blog #page.container {
  background-color: #f9f9f9;
}
.front .block-title,
.our-skills h2,
.about-us h2,
.page-title,
.our-team h2 {
  font-size: 30px;
  text-decoration: none;
  display: block;
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  letter-spacing: 1.5px;
  background: url('../images/line.png') center bottom no-repeat;
  background-size: 80px;
  padding-bottom: 15px;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 30px;
}
.page-comment .page-title {
  margin-bottom: 15px;
}
.front .block-title {
  margin-top: 65px;
  margin-bottom: 20px;
}

.page-title {
  font-size: 30px;
  text-transform: none;
  background-size: 80px;
  padding-bottom: 30px;
}
.page-about-us .page-title,
.page-typography .page-title,
.page-blog .page-title,
.page-portfolio .page-title,
.page-contact .page-title {
  font-size: 50px;
  background-size: 130px;
  text-transform: uppercase;
  padding-bottom: 30px;
}
body .front .block-title {
  margin-top: 90px;
}
#page-title {
  padding-top: 120px;
  padding-bottom: 70px;
  color: #fff;
  height: 243px;
  background-color: #000;
}
.page-typography #page-title {
  height: 280px;
}
.page-about-us #page-title,
.page-portfolio #page-title,
.page-blog #page-title,
.page-contact #page-title {
  height: 389px;
  padding-top: 150px;
}
.region-sidebar-second {
  padding-left: 30px;
}
.base-page {
  background: url('../images/pic_title/base.jpg') 50% no-repeat;
}
.page-about-us .base-page {
  background: url('../images/pic_title/about-us.jpg') 50% no-repeat;
}
.page-portfolio .base-page,
.node-type-portfolio .base-page {
  background: url('../images/pic_title/portfolio.jpg') 50% no-repeat;
}
.page-blog .base-page,
.node-type-blog .base-page {
  background: url('../images/pic_title/blog.jpg') 50% no-repeat;
}
.page-contact .base-page {
  background: url('../images/pic_title/contacts.jpg') 50% no-repeat;
}
.view-header {
  color: #606060;
  text-align: center;
  margin-bottom: 40px;
}
.views-field-title a,
.section-tags .node-title a {
  color: #333;
  text-decoration: none;
}

.section-tags {
  font-family: 'Raleway';
  font-size: 20px;
  font-weight: 700;
  padding-top: 20px;
}
#page-wrapper table p {
  margin: 0;
}

#page-wrapper table {
  width: 100%;
  border: none;
  max-width: 1920px;
  margin: 0 auto;
}
.html #page-wrapper table th {
  font-weight: 400;
  color: #333;
}
th,
td {
  padding: 10px;
}
th {
  padding-top: 15px;
  padding-bottom: 15px;
}
tr,
tr.even,
tr.odd {
  padding: 0;
  border: none;
}
tr.even {
  background-color: #fff;
}
tr.odd {
  background-color: #e8e8e8;
}
table.ver-1 td,
table.ver-1 th {
  border: none;
}
table.ver-1 tr {
  border-bottom: 1px solid #c6c6c6;
}

.form-item {
  margin: 0 0 20px;
}

span.form-required {
  display: none;
}
.container-inline .form-item {
  display: inline-block;
}
input[type="text"],
input[type="password"],
input[type="email"],
textarea {
  width: 420px;
  padding: 15px 20px;
  border: 1px solid #e3e3e3;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus {
  border: 1px solid #19c2c9 !important;
  outline-color: transparent;
  outline-style: none;
}
.form-item input.error,
.form-item textarea.error,
.form-item select.error {
  border: 1px solid #ff3334;
}
textarea {
  resize: vertical;
}
.form-item .description {
  font-size: 13px;
  color: #19c4cb;
}
.form-item .description.error {
  background: none;
  color: #ff3334;
}
label {
  font-weight: 400;
  margin-bottom: 3px;
}
#content .item-list ul.pager-load-more li {
  width: 200px;
}
.item-list .pager {
  text-align: left;
}
.item-list .pager li {
  display: inline-block;
  margin: 0 10px 10px 0;
  padding: 0;
}

#page .item-list .pager li {
  padding-left: 0;
  margin-left: 0;
  margin-bottom: 10px;
  width: 45px;
  height: 45px;
}
#page .item-list .pager li:last-of-type {
  margin-right: 0;
}
#page .item-list .pager a,
#page .item-list .pager .pager-current,
#page .item-list .pager .pager-ellipsis {
  display: inline-block;
  color: #74797b;
  border: 1px solid #a9a9a9;
  text-decoration: none;
  width: 45px;
  height: 45px;
  text-align: center;
  font-size: 15px;
  line-height: 45px;
}
#page .item-list .pager .pager-ellipsis {
  border: none;
}
#page .item-list .pager .pager-current,
#page .item-list .pager a:hover {
  background: #19c2c9;
  border-color: #19c2c9;
  color: #fff;
}
#page .item-list .pager .pager-current {
  cursor: default;
  font-weight: 400;
}
#page .item-list.item-list-pager li {
  background-color: transparent;
}
.region-secondary-content {
  background: url(images/bg-page-title.png) no-repeat 50% 50%;
  background-size: cover;
}
.sidebar .block {
  margin-bottom: 60px;
}

/* Loading */

#load {
  animation: loading 3s linear infinite;
}
#loading-inner {
  animation: loading-circle 2s linear infinite;
  -webkit-animation: loading-circle 2s linear infinite;
  -moz-animation: loading-circle 2s linear infinite;
  stroke: #19c2c9;
  stroke-dashoffset: 0;
  stroke-dasharray: 300;
  stroke-width: 10;
  stroke-miterlimit: 10;
  stroke-linecap: round;
  fill: transparent;
}

@keyframes loading {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes loading {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-moz-keyframes loading {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes loading-circle {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -600;
  }
}
@-webkit-keyframes loading-circle {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -600;
  }
}
@-moz-keyframes loading-circle {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -600;
  }
}

/* Info items */
.views-field-created,
.views-field-comment-count,
.views-field-comment-count a,
.data,
.submitted .comment,
.submitted .comment a,
.datetime,
.author-datetime {
  display: inline-block;
}
.views-field-created:before,
.view-blog .views-field-comment-count:before,
.data:before,
.submitted  .comment:before {
  font-size: 18px;
  line-height: 1;
  font-family: 'FontAwesome';
  position: absolute;
}
.submitted {
  margin-top: 20px;
}
.view-blog .views-field-comment-count:before,
.submitted .comment:before {
  content: '\f0e5';
}
.view-blog .views-field-name:before,
.author-datetime:before {
  content: url('../images/Admin.png');
  vertical-align: -webkit-baseline-middle;
  margin-right: 3px;
}
.view-blog .views-field-name span:before {
  content: 'by ';
}
.view-blog .views-field-name:after,
.view-blog .views-field-created:after,
.author-datetime:after,
.datetime:after,
.submitted .comment:after {
  content: '/';
  padding-left: 10px;
}

.views-field-comment-count span,
.submitted .comment span {
  padding-left: 25px;
}
.page-blog .view-blog li div:not(.views-field-created),
.submitted div:not(.datetime) {
  margin-left: 10px;
}
.view-blog .views-field-name {
  margin-right: -20px;
}
.view-blog .view-content ul li  div.views-field-comment-count {
  margin-left: 30px;
}
#columns .submitted ul li {
  margin-left: 0;
}
.views-field-created,
#content ul li .views-field-created span,
.views-field-name,
#content ul li .views-field-name span,
.views-field-comment-count,
#content ul li .views-field-comment-count span,
.data,
div.datetime,
div.author-datetime,
div.author-datetime a,
.submitted .comment,
.submitted .comment span,
.addtoany_list.a2a_kit_size_32 > a {
  font-size: 13px;
  line-height: 20px;
  color: #999;
  position: relative;
  text-decoration: none;
  display: inline-block;
}
.author-datetime a:hover {
  color: #19c2c9;
}

/* Buttons */
.btn,
input[type="submit"],
input[type="button"],
.view-dignities .view-footer a,
.view-our-amazing-team .views-field-nothing a,
.button,
.about-us p a {
  display: inline-block;
  text-transform: uppercase;
  padding: 18px 40px;
  background: #19c2c9;
  border: none;
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 1.13px;
  border-radius: 0;
  height: 55px;
}
.btn:hover,
.view-dignities .view-footer a:hover,
.view-our-amazing-team .views-field-nothing a:hover,
.about-us p a:hover {
  text-decoration: none;
}
.btn + .btn,
input[type="submit"] + input[type="submit"],
input[type="button"] + input[type="button"],
.view-dignities .view-footer a +  a,
.view-our-amazing-team .views-field-nothing a + a {
  margin-left: 20px;
}

.btn:hover,
input[type="submit"]:hover,
.view-dignities .view-footer a:hover,
.view-our-amazing-team .views-field-nothing a:hover,
.about-us p a:hover,
.front .view-blog table .views-field-view-node a:hover,
.company-name .second-part a:hover {
  background-color: #333;
}
.input input {
  margin-bottom: 20px;
}
input:active {
  border: none;
}
.input input:nth-child(4),
input[type="button"] {
  background: #333;
}
input[type="button"]:hover {
  background: #19c2c9;
}
.block-superfish select,
#primary-menu-bar select,
#menu-bar select {
  display: none;
}
#primary-menu-bar,
#block-system-main-menu {
  width: 60%;
  float: right;
  height: 80px;
}
#secondary-menu-bar {
  display: block;
}
ul.primary {
  border: 0;
  text-transform: uppercase;
  font-size: 18px;
  white-space: normal;
  padding: 0;
}
ul.primary li {
  display: inline-flex;
}
ul.primary li a {
  padding: 4px 9px;
  color: #333;
  background: none;
  border: none;
  margin: 0;
}
ul.primary li.active a,
ul.primary li.active a:hover {
  background: #19c2c9;
  color: #fff;
  border: none;
  padding: 4px 9px;
}
ul.primary li a:hover {
  border: 2px solid #19c2c9;
  background: none;
  padding: 2px 7px;
  color: #333;
}
.node-readmore a,
.comment-comments a,
.comment-add a {
  position: relative;
}
.comment .username {
  display: block;
}
.node-readmore a,
.comment-comments a,
.comment-add a {
  color: #a6a6a6;
}
.node-readmore a:hover,
.comment-comments a:hover,
.comment-add a:hover {
  color: #19c2c9;
  text-decoration: none;
}
.node-readmore a:before,
.comment-comments a:before,
.comment-add a:before {
  font-family: 'FontAwesome';
  position: absolute;
  left: 0;
}
.node-readmore a {
  padding-left: 13px;
}
.node-readmore a:before {
  content: '\f101';
}
.comment-comments a {
  padding-left: 19px;
}
.comment-comments a:before {
  content: '\f0e5';
}
.comment-add a {
  padding-left: 17px;
}
.comment-add a:before {
  content: '\f055';
}
/* Share buttons */
.a2a_kit a {
  margin-bottom: 8px;
}

.owl-theme .owl-controls .owl-buttons div:hover {
  opacity: 1;
}
/* =Common styles END */

/* Drupal standart blocks BEGIN */
#columns {
  padding: 40px 0;
}
body #columns {
  padding: 0;
}
#logo,
#name-and-slogan {
  float: left;
}
#name-and-slogan #site-name {
  color: #fff;
}
#site-name a {
  color: #fff;
}
#block-system-user-menu {
  float: right;
}
.feed-icon {
  display: inline-block;
  margin: 15px 5px;
}
.block-search .form-item {
  margin-bottom: 10px;
}
.node-article {
  margin-bottom: 20px;
}
#block-system-powered-by {
  padding: 30px 0;
}
#comments,
.comment-form {
  margin-top: 15px;
  padding-top: 15px;
}
.comment-form + .comment-form {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

#comments .form-text,
#comments .form-textarea {
  width: 100%;
}

#primary-menu-bar .menu .menu {
  display: none;
}
#primary-menu-bar .menu .menu .menu {
  left: 100%;
  top: 0;
}
#primary-menu-bar li:hover > .menu {
  display: block;
}
#primary-menu-bar nav > .menu {
  display: flex;
  margin: 0;
  justify-content: flex-end;
}
#page #block-system-main-menu {
  z-index: 101;
}
#primary-menu-bar > nav > .menu > li,
#block-system-main-menu .menu-depth-1 {
  float: left;
}
#primary-menu-bar > nav > .menu > li > a,
#block-system-main-menu .menu-depth-1 > a {
  text-transform: uppercase;
  padding: 0 20px 0;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
}
#primary-menu-bar > nav > .menu > li:nth-child(1) > a:hover,
#primary-menu-bar > nav > .menu > li:nth-child(1) > a.active {
  background: url('../images/menu_underline/Home.png') 50% 100% no-repeat;
  transition: none;
}
#primary-menu-bar > nav > .menu > li:nth-child(2) > a:hover,
#primary-menu-bar > nav > .menu > li:nth-child(2) > a.active {
  background: url('../images/menu_underline/AboutUs.png') 50% 100% no-repeat;
  transition: none;
}
#primary-menu-bar > nav > .menu > li:nth-child(3) > a:hover,
#primary-menu-bar > nav > .menu > li:nth-child(3) > a.active {
  background: url('../images/menu_underline/Portfolio.png') 50% 100% no-repeat;
  transition: none;
}
#primary-menu-bar > nav > .menu > li:nth-child(4) > a:hover,
#primary-menu-bar > nav > .menu > li:nth-child(4) > a.active {
  background: url('../images/menu_underline/Blog.png') 50% 100% no-repeat;
  transition: none;
}
#primary-menu-bar > nav > .menu > li:nth-child(5) > a:hover,
#primary-menu-bar > nav > .menu > li:nth-child(5) > a.active {
  background: url('../images/menu_underline/Contacts.png') 50% 100% no-repeat;
  transition: none;
}
#primary-menu-bar > nav > .menu > li:nth-child(6) > a:hover,
#primary-menu-bar > nav > .menu > li:nth-child(6) > a.active {
  background: url('../images/menu_underline/Typography.png') 50% 100% no-repeat;
  transition: none;
}

#primary-menu-bar .menu .menu {
  position: absolute;
  padding: 10px 0 !important;
  width: auto !important;
  background: #fff;
  top: 80px;
  min-width: 190px;
  border-radius: 0;
  -webkit-box-shadow: inset 0 0 0 1px rgba(232,232,232,1);
  -moz-box-shadow: inset 0 0 0 1px rgba(232,232,232,1);
  box-shadow: inset 0 0 0 1px rgba(232,232,232,1);
}
#block-system-main-menu .menu {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
}
#primary-menu-bar .menu .menu a:hover,
#block-system-main-menu .menu  a:hover {
  color: #19c2c9;
}
.sidebar .form-text {
  width: 100%;
}
/* Drupal standart blocks END */

/* =Header BEGIN */
#header,
#block-system-main-menu,
#primary-menu-bar {
  position: relative;
  z-index: 100;
}
#header {
  background: rgba(0,0,0, 0.8);
  position: absolute;
  right: 0;
  left: 0;
  max-height: 80px;
}

#header .block-logo,
#logo,
#name-and-slogan {
  clear: none;
  width: auto;
  float: left;
  padding-top: 25px;
  margin: 0 auto;
  padding-bottom: 10px;
}
#header .block-logo #logo {
  padding: 0;
}
#logo {
  margin-right: 15px;
}
#header .block-logo .content * {
  vertical-align: middle;
}
#header .block-logo img {
  max-width: 230px;
  max-height: 60px;
}
.sf-sub-indicator {
  display: none;
}
#block-superfish-1 ul,
#block-superfish-1 li,
#block-system-main-menu .menu,
#block-system-main-menu .menu li,
#primary-menu-bar .menu,
#primary-menu-bar .menu li {
  margin: 0;
  list-style: none;
}
#block-superfish-1 ul,
#block-system-main-menu .menu,
#primary-menu-bar .menu {
  padding: 0 !important;
}
#block-superfish-1 li,
#block-system-main-menu .menu li,
#primary-menu-bar .menu li {
  padding: 0;
}
#superfish-1 a,
#primary-menu-bar .menu a,
#block-system-main-menu .menu a {
  line-height: 80px;
  font-size: 13px;
  text-decoration: none;
  display: block;
  font-family: 'Raleway', sans-serif;
  color: #fff;
  font-weight: 700;
}
#superfish-1 #menu-468-1.sf-depth-1 > a,
#menu .menu-mlid-468 > a {
  cursor: default;
  pointer-events: none;
}
#superfish-1 #menu-468-1.sf-depth-1 > a:hover,
#superfish-1 #menu-468-1.active-trail.sf-depth-1 > a,
#menu .menu-mlid-468 > a:hover,
#menu .menu-mlid-468 > a.active {
  color: #a6a6a6;
}
#header .btn-mobile-menu {
  clear: none;
  float: right;
  width: 50px;
  height: 35px;
  background: url(images/icon-mobile-menu.png) no-repeat 50% 50%;
  font-size: 0;
  cursor: pointer;
  margin-top: 22px;
}
#toggle-icon {
  margin-top: 5px;
  color: #333;
}
#header #toggle-icon:hover {
  color: #3f9ae8;
}
/* =Header END */

/* =Footer BEGIN */
.copyright,
.region-tertiary-content {
  background-color: #333;
  color: #fff;
  max-height: 80px;
}
.region-tertiary-content .region-inner {
  padding: 0;
}
.copyright-content {
  max-width: 1200px;
  margin: 0 auto;
}
.region-tertiary-content .block {
  width: 100%;
  display: inline-block;
  vertical-align: top;
}
.about-this-theme,
#page-wrapper .region-tertiary-content .block-title {
  padding: 0;
  margin-bottom: 15px;
  text-align: left;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
}
.region-tertiary-content .view-content,
body .region-tertiary-content .view-content {
  padding: 0;
}
.block-title {
  margin-bottom: 15px;
}
.about-this-theme {
  margin-bottom: 10px;
}
.field-label-above {
  margin-top: 20px;
}
.field-label-above ul,
.field-label-above li {
  padding: 0;
  margin: 0;
  list-style: none;
}
.field-label-above li {
  display: inline-block;
  margin-right: 10px;
}
.view-popular-tags a,
.field-label-above a {
  color: #333;
  text-decoration: none;
  display: inline-block;
  border: 1px solid #333;
  padding: 10px 20px;
}
.view-popular-tags a:hover,
.field-label-above a:hover {
  color: #fff;
  background-color: #19c2c9;
  border-color: #19c2c9;
}
.block-instagram-block .content {
  font-size: 0;
  line-height: 0;
  margin-left: -5px;
  margin-right: -5px;
}
.block-instagram-block .content a {
  display: inline-block;
  position: relative;
  margin: 0 5px 10px;
}
.block-instagram-block .content a:before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.block-instagram-block .content a:hover:before {
  background-color: #3d8fd6;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
  opacity: 0.4;
}
.block-instagram-block img {
  margin: 0 !important;
}
#superfish-2 {
  display: block !important;
}
#superfish-2,
#superfish-2 li {
  width: auto;
}
#superfish-2 li {
  padding: 10px 0;
  display: block;
  float: none;
  margin: 0;
  border-bottom: 1px solid #62676d;
}
#superfish-2 li:last-child {
  border-bottom: none;
}
#superfish-2 a,
.copyright a {
  color: #19c2c9;
  text-decoration: none;
}
#superfish-2 a {
  display: inline-block;
}
.region-footer {
  background-color: #202123;
}
.block-social-icons {
  text-align: center;
}
.block-social-icons .content a {
  font-size: 32px;
  line-height: 90px;
  text-align: center;
  color: #84888c;
  width: 85px;
  height: 90px;
  display: inline-block;
}
.fa-facebook-official:hover:before,
.fa-facebook:hover:before {
  color: #2d5c99;
}
.fa-github:hover:before {
  color: #333;
}
.fa-twitter:hover:before {
  color: #2faeee;
}
.fa-instagram:hover:before {
  color: #2e7396;
}
.fa-behance:hover:before {
  color: #00acdc;
}
.fa-linkedin-square:hover:before {
  color: #0089bc;
}
.fa-dribbble:hover:before {
  color: #ff8caf;
}
/* =Footer END */

/* =Page About us BEGIN*/
.two-list ul {
  column-count: 2;
  -webkit-column-count: 2;
  -moz-column-count: 2;
}
#about-us-page .first-part {
  padding-right: 15px;
}
#about-us-page .second-part {
  padding-left: 15px;
}
#about-us-page li {
  list-style-image: url('../images/check.png');
  list-style-position: inside;
  line-height: 30px;
}
.company-name {
  height: 500px;
  background: #f9f9f9;
}
.company-name .first-part,
.company-name .second-part {
  height: 500px;
}
.company-name .second-part p {
  max-width: 500px;
  margin: 0 auto;
}
.company-name .second-part a {
  margin-top: 45px;
}
#page-wrapper .our-team table {
  max-width: 1200px;
}
.our-team {
  margin: 70px 0;
}
.our-team .block-title {
  margin-bottom: 40px;
}
.our-team .views-field-title {
  line-height: 40px;
  margin-top: 20px;
}
.our-team .social-team {
  background: #19c2c9;
  padding: 5px 19px;
  margin: 0;
  width: 270px;
  display: flex;
}
.social-team li {
  display: inline-block;
  font-size: 27px;
  padding: 0 16px;
}
.our-team .social-team li a {
  color: #fff;
}
.our-team td {
  position: relative;
}
.our-team  .views-field-field-social {
  position: absolute;
  bottom: 99px;
  overflow: hidden;
}
.our-team  .views-field-field-photo-team img {
  width: 100%;
  height: 100%;
  max-height: 280px;
  max-width: 280px;
  -webkit-transition: all 0.15s ease-in-out;
  -moz-transition: all 0.15s ease-in-out;
  -o-transition: all 0.15s ease-in-out;
  -ms-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}
.our-team .views-field-field-photo-team {
  overflow: hidden;
  max-width: 270px;
}
.our-team .views-field-field-social:hover .field-content {
  top: 50px;
}
.our-team .views-field-field-social .field-content {
  position: relative;
  top: 51px;
  -webkit-transition: all 0.15s ease-in-out;
  -moz-transition: all 0.15s ease-in-out;
  -o-transition: all 0.15s ease-in-out;
  -ms-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}

.our-team td:hover .views-field-field-social .field-content {
  opacity: 1;
  transform: translateY(-50px);
  -webkit-transform: translateY(-50px);
  -moz-transform: translateY(-50px);
  -ms-transform: translateY(-50px);
  -o-transform: translateY(-50px);
}
.our-team td:hover img {
  opacity: 1;
  transform: translateY(-30px);
  -webkit-transform: translateY(-30px);
  -moz-transform: translateY(-30px);
  -ms-transform: translateY(-30px);
  -o-transform: translateY(-30px);
}
/* =Page About us END*/

/* =Block Our recent works BEGIN*/
#edit-tid-wrapper {
  float: none;
}
.view-header,
.view-isotope-filter-block ul,
#edit-tid,
#edit-type-1,
.views-exposed-widgets {
  margin: 0 auto 20px auto;
  display: table;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  position: relative;
}
.view-header div {
  float: left;
  display: inline-flex;
}
.view-columns .isotope-options li a,
#edit-type-1 label {
  color: transparent;
  position: absolute;
  left: 0;
  top: 0;
}
#edit-type-1 .form-item {
  position: relative;
}
#edit-type-1 input {
  width: 35px;
  opacity: 0;
}
.view-columns,
#edit-type-1-wrapper {
  border-left: 1px solid #494949;
  margin-left: 10px;
  padding: 15px;
}
#content .view-columns ul.isotope-options li {
  width: 35px;
  height: 20px;
  margin: 0;
}
#content .view-columns li.first a,
#edit-type-1 .form-item:first-child label {
  background: url('../images/column/3_column_default.png') 50% no-repeat;
  width: 35px;
  height: 20px;
}
#content .view-columns li.first a.selected,
#edit-type-1 .form-item:first-child input:checked + label {
  background: url('../images/column/3_column_active.png') 50% no-repeat;
}
#content .view-columns li.last a,
#edit-type-1 .form-item:last-child label {
  background: url('../images/column/2_column_default.png') 50% no-repeat;
  width: 35px;
  height: 20px;
}
#content .view-columns li.last a.selected,
#edit-type-1 .form-item:last-child input:checked + label {
  background: url('../images/column/2_column_active.png') 50% no-repeat;
}
#edit-tid .form-item {
  text-align: center;
  position: relative;
  display: inline-block;
}
#edit-tid .form-item input {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  left: 0;
}
#content .view-isotope-filter-block .view-content .isotope-options li a,
#edit-tid .form-item label {
  font-weight: 500;
  font-family: 'Hind', sans-serif;
  font-size: 18px;
  color: #333;
  text-transform: uppercase;
  padding: 4px 9px;
  border: 2px solid #fff;
  width: auto;
  display: block;
}
#content .view-isotope-filter-block .view-content .isotope-options li {
  width: auto;
  padding: 11px 0;
  margin: 6px 0 0 0;
}
#content .view-isotope-filter-block .view-content .isotope-options li a.selected,
#edit-tid .form-item input:checked  + label {
  color: #fff;
  background: #19c2c9;
  border: 2px solid #19c2c9;
}
#content .view-isotope-filter-block .view-content .isotope-options li a {
  height: 32px;
  display: table-cell;
  vertical-align: middle;
}
#content .view-isotope-filter-block .view-content .isotope-options li a:hover,
#edit-tid .form-item:hover label {
  border: 2px solid #19c2c9;
}
.view-portfolio-isotope td,
.view-portfolio-isotope li,
.view-portfolio td,
.view-portfolio li {
  padding: 0;
  height: auto;
  position: relative;
  border: none;
  overflow: hidden;
  max-width: 640px;
  float: left;
}
.view-portfolio-isotope img,
.view-portfolio img {
  width: 101%;
  height: auto;
  object-fit: cover;
  margin-bottom: -10px;
}
.view-portfolio-isotope h3 {
  display: none;
}
#columns .view-portfolio-isotope ul {
  margin: 0;
}
.view-portfolio-isotope .views-field-title,
.view-portfolio-isotope .isotope-filter,
.view-portfolio-isotope .views-field-field-portfolio-image a:after,
.view-portfolio .views-field-title,
.view-portfolio .views-field-field-tags-portfolio,
.view-portfolio .views-field-field-portfolio-image a:after {
  position: absolute;
  bottom: 0;
  left: 0;
  white-space: nowrap;
  height: 20px;
  font-family: 'Raleway', sans-serif;
  font-weight: bold;
  color: #fff;
  font-size: 16px;
  display: none;
}
#content .view-portfolio-isotope .views-field-title span,
#content .view-portfolio .views-field-title span {
  font-size: 16px;
}
.view-portfolio-isotope .view-content a,
.view-portfolio a {
  color: #fff;
  text-decoration: none;
  line-height: 1px;
}
.view-portfolio-isotope .views-field-field-portfolio-image a:after,
.view-portfolio .views-field-field-portfolio-image a:after {
  content: '';
  background: url('../images/plus/plus@3x.png') 50% 50% no-repeat, url('../images/hover-_effect.png') no-repeat;
  -moz-background-size: 51px, cover; /* Firefox 3.6+ */
  -webkit-background-size: 51px, cover; /* Safari 3.1+ и Chrome 4.0+ */
  -o-background-size: 51px, cover; /* Opera 9.6+ */
  background-size: 51px, cover;
  height: 100%;
  width: 100%;
}
.views-field-field-tags-portfolio {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
.view-portfolio-isotope td:hover .views-field-field-portfolio-image a:after,
.view-portfolio-isotope li:hover .views-field-field-portfolio-image a:after,
.view-portfolio td:hover .views-field-field-portfolio-image a:after,
.view-portfolio li:hover .views-field-field-portfolio-image a:after {
  display: block;
  animation: views-field-field-background-image_gwd-keyframes 0.5s linear 0s 1 normal forwards;
  -webkit-animation: views-field-field-background-image_gwd-keyframes 0.5s linear 0s 1 normal forwards;
  -moz-animation: views-field-field-background-image_gwd-keyframes 0.5s linear 0s 1 normal forwards;
}

.view-portfolio-isotope li:hover .isotope-filter,
.view-portfolio li:hover .views-field-field-tags-portfolio,
.view-portfolio-isotope td:hover .isotope-filter,
.view-portfolio td:hover .views-field-field-tags-portfolio {
  display: block;
  opacity: 0;
  animation: view-work-gallery 0.5s linear 0.1s 1 normal forwards;
  -webkit-animation: view-work-gallery 0.5s linear 0.1s 1 normal forwards;
  -moz-animation: view-work-gallery 0.5s linear 0.1s 1 normal forwards;
}
.view-portfolio-isotope td:hover .views-field-title,
.view-portfolio-isotope li:hover .views-field-title,
.view-portfolio td:hover .views-field-title,
.view-portfolio li:hover .views-field-title {
  display: block;
  animation: view-work-gallery 0.5s linear 0s 1 normal forwards;
  -webkit-animation: view-work-gallery 0.5s linear 0s 1 normal forwards;
  -moz-animation: view-work-gallery 0.5s linear 0s 1 normal forwards;
}
.view-portfolio-isotope .isotope-filter,
.view-portfolio .views-field-field-tags-portfolio div {
  z-index: 5;
  padding-left: 25px;
  padding-top: 25px;
  line-height: 40px;
}
.view-portfolio-isotope .views-field-title a,
.view-portfolio .views-field-title a {
  line-height: normal;
}
.view-portfolio-isotope .views-field-title,
.view-portfolio .views-field-title {
  z-index: 6;
  padding-left: 25px;
  text-transform: uppercase;
  line-height: normal;
}
@keyframes view-work-gallery {
  0% {
    bottom: 0;
    opacity: 0;
    animation-timing-function: linear;
  }
  100% {
    bottom: 55px;
    opacity: 1;
    animation-timing-function: linear;
  }
}
@-webkit-keyframes view-work-gallery {
  0% {
    bottom: 0;
    opacity: 0;
    -webkit-animation-timing-function: linear;
  }
  100% {
    bottom: 55px;
    opacity: 1;
    -webkit-animation-timing-function: linear;
  }
}
@-moz-keyframes view-work-gallery {
  0% {
    bottom: 0;
    opacity: 0;
    -moz-animation-timing-function: linear;
  }
  100% {
    bottom: 55px;
    opacity: 1;
    -moz-animation-timing-function: linear;
  }
}
/* =Block Our recent works END*/

/* =Blocks About us BEGIN*/
.first-part {
  float: left;
}
.second-part {
  float: right;
}
.first-part,
.second-part {
  width: 50%;
  height: 100%;
}
.about-us .first-part,
.our-skills .second-part,
.company-name .second-part {
  padding: 85px;
  text-align: center;
}
.about-us,
.our-skills {
  height: 500px;
  text-align: center;
}
.about-us .second-part {
  background: url('../images/main_1.jpg') 20% 100% no-repeat;
  background-size: cover;
}
.our-skills .first-part,
.company-name .first-part {
  background: url('../images/03_skills_pic.jpg') center no-repeat;
  background-size: cover;
}
.text-who {
  max-width: 490px;
  margin: 0 auto 42px;
}
.our-skills .team {
  display: block;
  width: 420px;
  margin: 110px auto;
  border: 3px solid #fff;
  height: 305px;
  padding: 70px;
}
.our-skills .first-part p {
  font-family: 'Raleway', sans-serif;
  font-size: 80px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 4px;
  line-height: 80px;
}
#content .skills-bar-container {
  float: left;
  clear: right;
  width: 100%;
  margin: 0;
}

.skills-bar-container p {
  float: left;
  margin: 5px;
  text-align: left;
  display: block;
}
.skills-bar-container .percent {
  float: right;
  padding-top: 5px;
  opacity: 0;
  -webkit-transition: opacity 1s ease 4s;
  -moz-transition: opacity 1s ease 4s;
  -o-transition: opacity 1s ease 4s;
  transition: opacity 1s ease 4s;
}
.skills-bar-container .percent,
.skills-bar-container label,
.our-team .views-field-field-profession-team a {
  font-weight: 500;
  font-family: 'Hind', sans-serif;
  font-size: 15px;
  color: #74797b;
}

.skills-bar-container li {
  background: #e9e5e2;
  height: 6px;
}

#content .skills-bar-container li {
  padding: 0;
  float: left;
  width: 100%;
  margin: 0 0 20px;
  list-style: none;
}
#content .skills-bar-container p {
  margin: 0;
}
.progressbar {
  background: #19c2c9;
  background-image: -webkit-linear-gradient(left, #19c2c9 0%, #99ffcc 100%);
  background-image: -moz-linear-gradient(left, #19c2c9 0%, #99ffcc 100%);
  background-image: -o-linear-gradient(left, #19c2c9 0%, #99ffcc 100%);
  background-image: linear-gradient(to right, #19c2c9 0%, #99ffcc 100%);
  height: 100%;
  width: 0;
  -webkit-transition: width 4.50s ease !important;
  -moz-transition: width 4.50s ease !important;
  -o-transition: width 4.50s ease !important;
  transition: width 4.50s ease !important;
}
/* =Blocks About us END*/

/* =Block Our core features */
#content .view-our-core-features ul {
  max-width: 1200px;
  margin: 0 auto;
}
.view-our-core-features li {
  border: none;
  width: 33%;
  display: inline-block;
}
.view-our-core-features .views-field-field-icon-features {
  width: 30px;
  float: left;
}
.view-our-core-features .views-field-title,
.view-our-core-features .views-field-body {
  display: table-row;
}
.view-our-core-features .views-field-title .field-content,
.view-our-core-features .views-field-body .field-content {
  margin-left: 15px;
  display: block;
}
.view-our-core-features .views-field-body .field-content {
  margin-top: 8px;
}
.view-our-core-features .views-field-title,
.view-our-core-features .views-field-title a,
.our-team .views-field-title a {
  font-family: 'Raleway', sans-serif;
  font-weight: bold;
  font-size: 20px;
  color: #333;
  letter-spacing: 1px;
  text-transform: none;
  line-height: normal;
}

/* =Slider BEGIN */
.owl-theme .owl-controls {
  margin: 17px 0 20px;
}
.owl-theme img {
  display: block;
}
.owl-theme .owl-controls .owl-buttons div {
  line-height: 0;
  font-size: 0;
  color: transparent;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  width: 26px;
  height: 41px;
  border-radius: 0;
  background: transparent;
}
.owl-theme .owl-prev {
  left: 0;
}
.owl-theme .owl-next {
  right: 0;
}

.owl-theme .owl-controls .owl-page {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin-right: 4px;
}
.owl-theme .owl-controls .owl-page:last-child {
  margin-right: 0;
}
.owl-theme .owl-controls .owl-page.active,
.owl-theme .owl-controls .owl-page:hover {
  background: rgba(255, 255, 255, 0.3);
}
.owl-theme .owl-controls .owl-page span {
  background: #fff;
  opacity: 1;
  height: 8px;
  width: 8px;
  margin: 3px;
}
.owl-theme .owl-controls .owl-page:hover span,
.owl-theme .owl-controls .owl-page.active span {
  background: #fff;
}
/* =Slider END */

/* =Main slider BEGIN */

.view-main-slider {
  min-height: 300px;
  height: 600px;
  cursor: -webkit-grab;
  cursor: grab;
}
.view-main-slider .view-content,
.view-main-slider .owl-carousel,
.view-main-slider .owl-wrapper-outer,
.view-main-slider .owl-wrapper,
.view-main-slider .owl-item,
.view-main-slider .owl-item > div,
.view-main-slider .views-field-nothing,
.view-main-slider .views-field-nothing .field-content,
.main-slider-content-wrapper,
.main-slider-image {
  height: 100%;
}
body .view-main-slider .view-content,
.view-main-slider .owl-carousel,
.view-main-slider .owl-wrapper-outer,
.view-main-slider .owl-wrapper,
.view-main-slider .owl-item,
.view-main-slider .owl-item > div {
  max-width: none;
  padding: 0;
  color: #fff;
}
.view-main-slider .views-field-nothing {
  position: relative;
  z-index: 2;
}
.view-main-slider .views-field-nothing .field-content {
  display: block;
  text-align: center;
}
.view-main-slider .views-field {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}
.view-main-slider .owl-item {
  position: relative;
  background: #fff;
}
.view-main-slider .views-field-field-background-image {
  position: relative;
  top: 0;
  left: 50%;
  text-align: center;
  margin: 0 auto;
  height: 600px;
}
.view-main-slider .views-field-field-background-image .field-content {
  max-height: 100%;
  height: 100%;
}
.view-main-slider .owl-item:first-child:before {
  right: 50%;
}
.view-main-slider .owl-item:last-child:before {
  left: 100%;
}
.view-main-slider .views-field-field-background-image img {
  width: 100%;
  max-height: none;
  position: relative;
  z-index: -1;
}
.view-main-slider .owl-controls .owl-buttons div,
.node-portfolio .owl-controls .owl-buttons div {
  top: 60%;
  z-index: 50;
  margin: 0;
  width: 50px;
  height: 70px;
  background: #000;
  background: rgba(0, 0, 0, 0.85);
  background-repeat: no-repeat;
}
.view-main-slider .owl-controls .owl-buttons .owl-prev,
.node-portfolio .owl-controls .owl-buttons .owl-prev {
  background-image: url(images/main-slider-prev.png);
  background-position: 40% 50%;
}
.view-main-slider .owl-controls .owl-buttons .owl-next,
.node-portfolio .owl-controls .owl-buttons .owl-next {
  background-image: url(images/main-slider-next.png);
  background-position: 60% 50%;
}

/* Slideshow animation */
.view-main-slider .owl-carousel {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}

.view-main-slider .active .views-field-field-background-image .field-content {
  position: relative;
  left: -50%;
  width: 1920px;
  opacity: 0;
  animation: views-field-field-background-image_gwd-keyframes 0.5s linear 0s 1 normal forwards;
  -webkit-animation: views-field-field-background-image_gwd-keyframes 0.5s linear 0s 1 normal forwards;
  -moz-animation: views-field-field-background-image_gwd-keyframes 0.5s linear 0s 1 normal forwards;
}
@keyframes views-field-field-background-image_gwd-keyframes {
  0% {
    opacity: 0;
    animation-timing-function: linear;
  }
  100% {
    opacity: 1;
    animation-timing-function: linear;
  }
}
@-webkit-keyframes views-field-field-background-image_gwd-keyframes {
  0% {
    opacity: 0;
    -webkit-animation-timing-function: linear;
  }
  100% {
    opacity: 1;
    -webkit-animation-timing-function: linear;
  }
}
@-moz-keyframes views-field-field-background-image_gwd-keyframes {
  0% {
    opacity: 0;
    -moz-animation-timing-function: linear;
  }
  100% {
    opacity: 1;
    -moz-animation-timing-function: linear;
  }
}
.view-main-slider .active .left-text .views-field-field-main-slider-image {
  position: absolute;
  width: 50%;
  top: 150px;
  right: 0;
}
.view-main-slider .active .left-text .views-field-field-main-slider-image img {
  display: none;
}
.view-main-slider .active .left-text .views-field-field-main-slider-image img:first-child {
  display: block;
}

.view-main-slider .active .left-text .views-field-field-main-slider-image .field-content {
  position: absolute;
  opacity: 0;
  width: 100%;
  animation: views-filed-field-main-slider0 0.5s linear 0.5s 1 normal forwards;
  -webkit-animation: views-filed-field-main-slider0 0.5s linear 0.5s 1 normal forwards;
  -moz-animation: views-filed-field-main-slider0 0.5s linear 0.5s 1 normal forwards;
}
@keyframes views-filed-field-main-slider0 {
  0% {
    left: 80px;
    top: 0;
    opacity: 0;
    animation-timing-function: linear;
  }
  100% {
    top: 0;
    left: 0;
    opacity: 1;
    animation-timing-function: linear;
  }
}
@-webkit-keyframes views-filed-field-main-slider0 {
  0% {
    top: 0;
    left: 80px;
    opacity: 0;
    animation-timing-function: linear;
  }
  100% {
    top: 0;
    left: 70px;
    opacity: 1;
    animation-timing-function: linear;
  }
}
@-moz-keyframes views-filed-field-main-slider0 {
  0% {
    top: 0;
    left: 80px;
    opacity: 0;
    animation-timing-function: linear;
  }
  100% {
    top: 0;
    left: 0;
    opacity: 1;
    animation-timing-function: linear;
  }
}
.view-main-slider .active .left-text .views-field-title {
  position: absolute;
  top: 205px;
  padding-right: 61px;
  width: 50%;
  opacity: 0;
  left: 0;
  text-align: right;
  animation: views-field-title0 1s linear 0.5s 1 normal forwards;
  -webkit-animation: views-field-title0 0.5s linear 1s 1 normal forwards;
  -moz-animation: views-field-title0 0.5s linear 1s 1 normal forwards;
}
.view-main-slider .active .left-text .views-field-title .field-content {
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  padding: 0 20px;
  width: 520px;
  height: 72px;
  background: #19c2c9;
  font-family: 'Raleway', sans-serif;
  font-weight: bold;
  font-size: 45px;
  letter-spacing: 1.13px;
  display: inline-table;
}
@keyframes views-field-title0 {
  0% {
    left: -80px;
    opacity: 0;
    animation-timing-function: linear;
  }
  100% {
    left: 0;
    opacity: 1;
    animation-timing-function: linear;
  }
}
@-webkit-keyframes views-field-title0 {
  0% {
    left: -80px;
    opacity: 0;
    animation-timing-function: linear;
  }
  100% {
    left: 0;
    opacity: 1;
    animation-timing-function: linear;
  }
}
@-moz-keyframes views-field-title0 {
  0% {
    left: -80px;
    opacity: 0;
    animation-timing-function: linear;
  }
  100% {
    left: 0;
    opacity: 1;
    animation-timing-function: linear;
  }
}
.view-main-slider .active .left-text .views-field-body {
  position: absolute;
  top: 312px;
  padding-right: 120px;
  width: 50%;
  opacity: 0;
  animation: views-field-body0 0.5s linear 1.5s 1 normal forwards;
  -webkit-animation: views-field-body0 0.5s linear 1.5s 1 normal forwards;
  -moz-animation: views-field-body0 0.5s linear 1.5s 1 normal forwards;
}
.view-main-slider .active .left-text .views-field-body .field-content p {
  width: 420px;
  font-family: 'Hind', sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  float: right;
  color: #fff;
}
@keyframes views-field-body0 {
  0% {
    top: 392px;
    opacity: 0;
    animation-timing-function: linear;
  }
  100% {
    top: 312px;
    opacity: 1;
    animation-timing-function: linear;
  }
}
@-webkit-keyframes views-field-body0 {
  0% {
    top: 392px;
    opacity: 0;
    animation-timing-function: linear;
  }
  100% {
    top: 312px;
    opacity: 1;
    animation-timing-function: linear;
  }
}
@-moz-keyframes views-field-body0 {
  0% {
    top: 392px;
    opacity: 180;
    animation-timing-function: linear;
  }
  100% {
    top: 312px;
    opacity: 1;
    animation-timing-function: linear;
  }
}
.view-main-slider .active .right-text .views-field-field-main-slider-image {
  position: absolute;
  width: 50%;
  top: 30%;
  left: 0;
  right: inherit;
}
.view-main-slider .active .right-text .views-field-field-main-slider-image img {
  float: right;
}
.view-main-slider .active .right-text .views-field-field-main-slider-image .field-content {
  position: absolute;
  opacity: 0;
  width: 100%;
  animation: views-filed-field-main-slider1 0.5s linear 0.5s 1 normal forwards;
  -webkit-animation: views-filed-field-main-slider1 0.5s linear 0.5s 1 normal forwards;
  -moz-animation: views-filed-field-main-slider1 0.5s linear 0.5s 1 normal forwards;
}
@keyframes views-filed-field-main-slider1 {
  0% {
    opacity: 0;
    left: -80px;
    animation-timing-function: linear;
  }
  100% {
    opacity: 1;
    left: 0;
    animation-timing-function: linear;
  }
}
@-webkit-keyframes views-filed-field-main-slider1 {
  0% {
    opacity: 0;
    left: -80px;
    -webkit-animation-timing-function: linear;
  }
  100% {
    opacity: 1;
    left: 0;
    -webkit-animation-timing-function: linear;
  }
}
@-moz-keyframes views-filed-field-main-slider1 {
  0% {
    opacity: 0;
    left: -80px;
    -moz-animation-timing-function: linear;
  }
  100% {
    opacity: 1;
    left: 0;
    -moz-animation-timing-function: linear;
  }
}
.view-main-slider .active .right-text .views-field-title {
  position: absolute;
  top: 205px;
  padding-left: 65px;
  width: 50%;
  opacity: 0;
  right: 0;
  text-align: left;
  padding-right: 0;
  left: initial;
  animation: views-field-title1 0.5s linear 1s 1 normal forwards;
  -webkit-animation: views-field-title1 0.5s linear 1s 1 normal forwards;
  -moz-animation: views-field-title1 0.5s linear 1s 1 normal forwards;
}
.view-main-slider .active .right-text .views-field-title .field-content {
  text-transform: uppercase;
  text-align: right;
  width: 495px;
  height: 72px;
  color: #19c2c9;
  font-family: 'Raleway', sans-serif;
  font-weight: bold;
  font-size: 45px;
  letter-spacing: 1.13px;
  line-height: 65px;
  padding: 0;
  background: none;
}
@keyframes views-field-title1 {
  0% {
    right: -80px;
    opacity: 0;
    animation-timing-function: linear;
  }
  100% {
    right: 0;
    opacity: 1;
    animation-timing-function: linear;
  }
}
@-webkit-keyframes views-field-title1 {
  0% {
    right: -80px;
    opacity: 0;
    animation-timing-function: linear;
  }
  100% {
    right: 0;
    opacity: 1;
    animation-timing-function: linear;
  }
}
@-moz-keyframes views-field-title1 {
  0% {
    right: -80px;
    opacity: 0;
    animation-timing-function: linear;
  }
  100% {
    right: 0;
    opacity: 1;
    animation-timing-function: linear;
  }
}
.view-main-slider .active .right-text .views-field-body {
  position: absolute;
  top: 268px;
  padding-left: 65px;
  width: 50%;
  right: 0;
  opacity: 1;
  animation: none;
  -webkit-animation: none;
  -moz-animation: none;
}
.view-main-slider .active .right-text .views-field-body .title-ul {
  text-transform: uppercase;
}
.view-main-slider .active .right-text .views-field-body .field-content {
  color: #333;
  font-size: 28px;
  font-family: 'Hind', sans-serif;
  line-height: 65px;
  width: 495px;
  position: relative;
  opacity: 0;
  animation: views-field-body1 0.5s linear 1.5s 1 normal forwards;
  -webkit-animation: views-field-body1 0.5s linear 1.5s 1 normal forwards;
  -moz-animation: views-field-body1 0.5s linear 1.5s 1 normal forwards;
}
#content .view-main-slider .active .right-text .views-field-body ul {
  font-size: 16px;
  font-family: 'Hind', sans-serif;
  font-weight: 500;
  width: 495px;
  opacity: 0;
  position: relative;
  line-height: 30px;
  margin: 0;
  animation: views-field-body1 0.5s linear 1.7s 1 normal forwards;
  -webkit-animation: views-field-body1 0.5s linear 1.7s 1 normal forwards;
  -moz-animation: views-field-body1 0.5s linear 1.7s 1 normal forwards;
}
#content .view-main-slider .active .right-text .views-field-body ul li {
  background: url('../images/check.png') 0 50% no-repeat;
  list-style: none;
  padding: 0 28px;
  margin: 0;
  color: #74797b;
  font-weight: 600;
}
@keyframes views-field-body1 {
  0% {
    top: 80px;
    opacity: 0;
    animation-timing-function: linear;
  }
  100% {
    top: 0;
    opacity: 1;
    animation-timing-function: linear;
  }
}
@-webkit-keyframes views-field-body1 {
  0% {
    top: 80px;
    opacity: 0;
    animation-timing-function: linear;
  }
  100% {
    top: 0;
    opacity: 1;
    animation-timing-function: linear;
  }
}
@-moz-keyframes views-field-body1 {
  0% {
    top: 80px;
    opacity: 0;
    animation-timing-function: linear;
  }
  100% {
    top: 0;
    opacity: 1;
    animation-timing-function: linear;
  }
}
.view-main-slider .active .centre-text .views-field-title .field-content {
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  font-family: 'Raleway', sans-serif;
  font-size: 56px;
  letter-spacing: 1.13px;
  line-height: 40px;
  right: 50%;
  position: relative;
  padding: 0;
  background: none;
  width: auto;
  height: auto;
}
.view-main-slider .active .centre-text .views-field-title:after {
  content: '';
  background: url('../images/line.png') 50% no-repeat;
  height: 50px;
  position: relative;
  top: -10px;
  left: -50%;
  display: block;
}
.view-main-slider .active .centre-text .views-field-title {
  position: absolute;
  top: 185px;
  opacity: 0;
  text-align: center;
  width: 600px;
  margin: 0 auto;
  left: 50%;
  padding: 0;
  line-height: 60px;
  animation: views-field-title2 0.5s linear 0.5s 1 normal forwards;
  -webkit-animation: views-field-title2 0.5s linear 0.5s 1 normal forwards;
  -moz-animation: views-field-title2 0.5s linear 0.5s 1 normal forwards;
}
@keyframes views-field-title2 {
  0% {
    top: 100px;
    opacity: 0;
    animation-timing-function: linear;
  }
  100% {
    top: 165px;
    opacity: 1;
    animation-timing-function: linear;
  }
}
@-webkit-keyframes views-field-title2 {
  0% {
    top: 100px;
    opacity: 0;
    animation-timing-function: linear;
  }
  100% {
    top: 165px;
    opacity: 1;
    animation-timing-function: linear;
  }
}
@-moz-keyframes views-field-title2 {
  0% {
    top: 100px;
    opacity: 0;
    animation-timing-function: linear;
  }
  100% {
    top: 165px;
    opacity: 1;
    animation-timing-function: linear;
  }
}
.view-main-slider .active .centre-text .views-field-body .field-content p {
  color: #fff;
  font-family: 'Hind', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 25px;
  right: 50%;
  height: 130px;
  position: relative;
  overflow: hidden;
  -webkit-column-width: 230px;
  -moz-column-width: 200px;
  column-width: 200px;
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
  -webkit-column-gap: 30px;
  -moz-column-gap: 30px;
  column-gap: 30px;
  width: auto;
  float: none;
}
.view-main-slider .active .centre-text .views-field-body {
  top: 380px;
  position: absolute;
  width: 690px;
  left: 50%;
  text-align: justify;
  opacity: 0;
  padding: 0;
  animation: views-field-body2 0.5s linear 1s 1 normal forwards;
  -webkit-animation: views-field-body2 0.5s linear 1s 1 normal forwards;
  -moz-animation: views-field-body2 0.5s linear 1s 1 normal forwards;
}

@keyframes views-field-body2 {
  0% {
    top: 470px;
    opacity: 0;
    animation-timing-function: linear;
  }
  100% {
    top: 360px;
    opacity: 1;
    animation-timing-function: linear;
  }
}
@-webkit-keyframes views-field-body2 {
  0% {
    top: 470px;
    opacity: 0;
    animation-timing-function: linear;
  }
  100% {
    top: 360px;
    opacity: 1;
    animation-timing-function: linear;
  }
}
@-moz-keyframes views-field-body2 {
  0% {
    top: 470px;
    opacity: 180;
    animation-timing-function: linear;
  }
  100% {
    top: 360px;
    opacity: 1;
    animation-timing-function: linear;
  }
}
/* =Main slider END */

/* =Block Testimonials BEGIN */
#block-views-testimonials-block {
  background: url('../images/testimonials/bg_testimonials.jpg');
  padding-bottom: 90px;
  padding-top: 1px;
  margin-top: 60px;
}
#block-views-testimonials-block h2 {
  margin-bottom: 50px;
  margin-top: 70px;
}
.view-testimonials .owl-carousel {
  width: 700px;
  margin: 0 auto;
  text-align: center;
  background: #fff;
  box-shadow: 0 0 10px #ccc;
  -webkit-box-shadow: 0 0 10px #ccc;
  -moz-box-shadow: 0 0 10px #ccc;
  padding: 60px;
}
.view-testimonials .owl-theme .owl-controls .owl-buttons .owl-prev,
.view-testimonials .owl-theme .owl-controls .owl-buttons .owl-next {
  background: url('../images/testimonials/arrows.png');
  opacity: 1;
}
.view-testimonials .owl-theme .owl-controls .owl-buttons .owl-prev {
  transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform-origin: 13px 10px;
  left: -90px;
}
.view-testimonials .owl-theme .owl-controls .owl-buttons .owl-next {
  right: -90px;
}
.view-testimonials .owl-theme .owl-controls .owl-buttons .owl-prev:hover,
.view-testimonials .owl-theme .owl-controls .owl-buttons .owl-next:hover {
  background: url('../images/testimonials/arrows_hover.png');
  opacity: 1;
}
.view-testimonials .views-field-field-photo img {
  margin: 0 auto;
}
#block-views-testimonials-block  .views-field-body p {
  margin-top: 30px;
  margin-bottom: 0;
  font-family: 'Raleway', sans-serif;
  font-style: italic;
  line-height: 30px;
}
.view-testimonials .views-field-title {
  text-transform: uppercase;
  font-family: 'Hind', sans-serif;
  font-size: 15px;
  color: #3a3a3a;
  letter-spacing: 1.13px;
  line-height: 40px;
  margin-top: 20px;
}
.view-testimonials .owl-item.active {
  opacity: 0;
  animation: testimonials 1s linear 0s 1 normal forwards;
}
@keyframes testimonials {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* =Block Testimonials END */

/* =Block Clients BEGIN */
#block-views-clients-block {
  background: #19c2c9;
}
.view-clients .owl-carousel {
  width: 1000px;
  margin: 0 auto;
  padding-top: 50px;
}
.view-clients img {
  margin: 0 auto;
}
/* =Block Clients END */

/* =Block From the blog BEGIN*/
.front .region-content-aside {
  background: #f8f8f8;
}
.front #page-wrapper .view-blog ul {
  max-width: 1200px;
  margin: 0 auto 60px;
}
.front .view-blog tr {
  display: flex;
}

.front .view-blog li {
  background: url('../images/bg-post.png');
  border: 15px solid #f8f8f8;
  padding: 35px 20px;
  width: 33%;
  display: inline-block;
}
.front .view-blog li:hover img,
.front .view-blog td:hover img {
  -ms-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}
.front .view-blog li .views-field-field-block-image-full .field-content,
.front .view-blog td .views-field-field-block-image-full .field-content {
  overflow: hidden;
  position: relative;
}
.front .view-blog  .views-field-view-node {
  margin: 30px 0 15px 0;
}
.front .view-blog  .views-field-view-node a {
  text-align: center;
  color: #fff;
  font-family: 'Hind', sans-serif;
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 1.13px;
  text-transform: uppercase;
  background: #19c2c9;
  padding: 10px 30px;
}
/* =Block From the blog END*/

/* =Blog page BEGIN */
#content .view-blog .item-list .pager {
  margin: 40px 0 0 30px;
}
.view-blog li {
  background-color: #fff;
}
.view-blog li:hover .views-field-field-blog-image img {
  -ms-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}
.view-blog li:hover .views-field-field-blog-image {
  height: 83.333%;
}
.view-blog li .views-field-field-blog-image {
  display: block;
  overflow: hidden;
  position: relative;
  margin-bottom: 35px;
}
.view-blog li .views-field-field-blog-image a:after,
.front .view-blog li .views-field-field-block-image-full .field-content:after {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  opacity: 0;
  -webkit-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
  background: rgba(0,0,0,0.4);
}
.view-blog li:hover .views-field-field-blog-image a:after,
.front .view-blog li:hover .views-field-field-block-image-full .field-content:after {
  opacity: 1;
}
.view-blog li .views-field-field-blog-image img,
.front .view-blog li:hover img {
  -webkit-transition: all .4s linear;
  transition: all .4s linear;
  width: 100%;
  object-fit: cover;
}
.front .view-blog td img {
  width: auto;
  height: auto;
}
.page-blog #content .view-blog .view-content ul li {
  display: inline-block;
  margin: 15px 40px 0 15px;
  vertical-align: top;
  list-style: none;
}
.view-blog .views-field-title {
  display: block;
  font-size: 20px;
}
.front .view-blog .views-field-title a {
  line-height: normal;
}
.front .view-blog .views-field-title {
  line-height: normal;
  margin-top: 20px;
  margin-bottom: 10px;
}
.view-blog .views-field-field-blog-image {
  width: 100%;
  height: auto;
}
.view-blog .views-field-field-blog-image .field-content {
  overflow: hidden;
}
.view-blog .views-field-field-blog-image img {
  display: block;
}
.view-blog .views-field-created {
  margin-left: 30px;
}
#content .view-blog ul {
  margin: 0;
}
#content .view-blog .views-field-title,
#content .view-blog .views-field-title a {
  font-size: 22px;
  font-family: 'Hind', sans-serif;
  color: #000;
  line-height: 25px;
  text-transform: none;
}
#content .view-blog .views-field-title:hover a {
  color: #19c2c9;
}
#content .view-blog .views-field-title {
  margin: 10px 30px;
}
.view-blog .views-field-body span p {
  margin: 0 30px;
}
#content .view-blog .views-field-view-node {
  padding-bottom: 10px;
  display: block;
}
#content .view-blog .views-field-view-node a:hover:after {
  content: "\f105";
  font-family: 'FontAwesome';
  display: inline-block;
  padding-left: 10px;
  font-size: 18px;
  line-height: 15px;
}
#content .view-blog .views-field-view-node span {
  font-weight: bold;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 1.13px;
  line-height: 50px;
}
.about-us-blog  .block-content:before {
  content: '';
  width: 100%;
  height: 190px;
  display: block;
  background: url('../images/03_skills_pic.jpg') 50% no-repeat;
  background-size: cover;
  margin-bottom: 20px;
}
.about-us-blog h2,
.recent-post h2 {
  font-family: 'Raleway', sans-serif;
  font-size: 24px;
  color: #2d2d2d;
  letter-spacing: 1.2px;
  line-height: 40px;
}
#columns .recent-post ul {
  margin: 0;
}
.recent-post li a {
  font-size: 18px;
  color: #74797b;
  display: block;
}
.recent-post li a:hover {
  color: #19c2c9;
}
#columns .recent-post li {
  list-style: none;
  margin-bottom: 20px;
}
.addtoany_list.a2a_kit_size_32 a > span {
  background: url('../images/Share.png') 50% no-repeat;
  width: 20px;
}
.addtoany_list.a2a_kit_size_32 a:hover > span {
  background: url('../images/Share_hover.png') 50% no-repeat;
}
.a2a_kit a {
  margin-bottom: 0;
}
.a2a_menu.a2a_mini {
  width: 60px;
  min-width: 0;
  border: none;
  border-radius: 0;
}
.a2a_menu.a2a_mini:before {
  content: url('../images/menu_underline/line.png');
  height: 10px;
  display: block;
}
.a2apage_wide {
  display: none;
}
.a2a_mini_services a.a2a_i {
  border-bottom: 1px solid #eee;
  width: 60px;
  padding: 0;
}
.addtoany_list.a2a_kit_size_32 > a:hover {
  color: #19c2c9;
}
a.a2a_i span.a2a_svg {
  background: none;
  width: 60px;
  margin: 0;
  border-radius: 0;
}
a.a2a_i span.a2a_svg:before {
  width: 60px;
  font-size: 15px;
  font-family: 'FontAwesome';
  display: block;
  text-align: center;
  color: #a9a9a9;
  background: #fff;
}
a:hover.a2a_i span.a2a_svg:before {
  color: white;
}
span.a2a_s_facebook:before {
  content: '\f09a';
}
a:hover span.a2a_s_facebook:before {
  background: #3b5999;
}
span.a2a_s_twitter:before {
  content: '\f099';
}
a:hover span.a2a_s_twitter:before {
  background: #55acee;
}
span.a2a_s_linkedin:before {
  content: '\f0e1';
}
a:hover span.a2a_s_linkedin:before {
  background: #0087be;
}
span.a2a_s_pinterest:before {
  content: '\f231';
}
a:hover span.a2a_s_pinterest:before {
  background: #c51721;
}
.node-blog .view-author {
  background: #f9f9f9;
  margin: 40px 0;
  padding: 15px 40px 5px;
}
.node-blog .view-author .views-field-field-photo-team,
.comment .user-picture {
  width: 120px;
  height: 120px;
  float: left;
}
.node-blog .view-author .views-field:not(.views-field-field-photo-team) {
  padding-left: 150px;
}
.view-author .views-field-title,
#content .view-author .views-field-title span,
.comment .author-datetime a {
  font-family: 'Hind', sans-serif;
  font-size: 18px;
  text-transform: none;
  line-height: 25px;
  margin-bottom: 5px;
}
.node-blog .view-author .views-field img,
.comment .user-picture img {
  border-radius: 50%;
}
#content .view-author li {
  list-style: none;
}
.view-author .views-field-field-social a {
  color: #a9a9a9;
  padding-right: 20px;
  font-size: 18px;
}
#comments .comment,
.indented {
  padding: 40px 0;
  border-bottom: 1px solid #e1e1e1;
  border-top: 1px solid #e1e1e1;
  clear: both;
}
#comments .indented .comment {
  border: none;
}
#comments .comment + .indented {
  border-top: none;
}
#comments .indented + a + .comment {
  border-top: none;
}
.comment .author-datetime:after,
.comment .author-datetime:before {
  content: '';
}
.comment .author-datetime a {
  display: block;
  color: #333;
}
.comment .clearfix {
  float: right;
}
.comment .comment-content {
  padding-left: 160px;
  padding-top: 10px;
}
.comment .author-datetime {
  color: #19c2c9;
  padding-left: 30px;
  font-size: 13px;
}
.indented {
  padding: 0 0 0 80px;
  margin-left: 0;
}
#content .comment .clearfix li {
  padding: 0 10px;
}
#content .comment .clearfix li a {
  color: #74797b;
}
.comment-form .form-item-name,
.comment-form .form-item-mail {
  width: 48%;
}
.comment-form .form-item-name input,
.comment-form .form-item-mail input {
  width: 100%;
}
.comment-form .form-item-name {
  float: left;
}
.comment-form .form-item-mail {
  float: right;
}
.comment-form .form-actions input {
  margin: 20px 0 0;
  display: block;
  float: right;
  width: 150px;
}
/* =Blog page END */


/* Portfolio page BEGIN */
#content .view-portfolio-isotope li,
#content .view-portfolio li {
  list-style: none;
}
#content .view-portfolio-isotope li,
#content .view-portfolio .view-content li {
  float: left;
  width: 33.33333%;
  max-width: none;
  margin: 0 0 -6px 0;
}
#content .view-portfolio-isotope.two-columns li,
#content .view-portfolio.two-columns .view-content li {
  float: left;
  width: 44%;
  margin: 3%;
}
#content .view-portfolio-isotope.two-columns .view-content ul,
#content .view-portfolio.two-columns .view-content ul {
  max-width: 1200px;
  margin: 0 auto;
}
#content .item-list .pager.pager-load-more li {
  width: auto;
  height: auto;
  margin: 0 auto;
  display: flex;
  max-width: none;
}
#content .item-list ul.pager-load-more {
  margin: 0 auto;
}
#content .item-list .pager-load-more li a {
  width: auto;
  height: auto;
  margin: 50px auto 0;
  padding: 5px 30px 0;
  border: none;
  text-transform: uppercase;
  background: #333;
  color: white;
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 1.13px;
}
#content .item-list .pager-load-more li a:hover {
  background: #19c2c9;
}
.field-name-field-portfolio-image {
  width: 65%;
  float: right;
}
.field-name-field-portfolio-image img {
  width: 100%;
  height: 100%;
}
.field-name-field-brand-name,
.node-portfolio .field-name-body,
.node-portfolio .field-name-field-date,
.field-name-field-time-work,
.field-name-field-tags-portfolio {
  width: 35%;
}
.field-name-field-portfolio-image .owl-pagination {
  display: none;
}
.node-portfolio .owl-controls .owl-buttons div {
  top: 47%;
}
.field-name-field-brand-name {
  font-size: 32px;
  font-weight: bold;
}
.node-portfolio .field-name-body {
  padding: 20px 50px 20px 0;
}
.node-portfolio .field-name-field-date,
.field-name-field-time-work,
.field-name-field-tags-portfolio .field-item {
  font-size: 15px;
  height: 23px;
  margin-bottom: 15px;
  padding-left: 30px;
  color: #555;
}
.field-name-field-tags-portfolio a {
  color: #555;
}
.node-portfolio .field-name-field-date {
  margin-top: 10px;
  background: url('../images/portfolio_ico/date.png') no-repeat;
}
.field-name-field-time-work {
  background: url('../images/portfolio_ico/time.png') no-repeat;
}
.field-name-field-tags-portfolio .field-item {
  background: url('../images/portfolio_ico/options.png') no-repeat;
}
.field-name-field-tags-portfolio .field-item.design {
  background: url('../images/portfolio_ico/options_2.png') no-repeat;
}
#content .node-portfolio .flippy {
  clear: both;
  padding-top: 45px;
}
#content .flippy .prev:before {
  content: '';
  display: inline-block;
  height: 24px;
  background: url('../images/nav_default.png') 0 100% no-repeat;
  padding-left: 20px;
}
#content .flippy .prev:hover:before {
  background: url('../images/nav_active.png') 100% 0 no-repeat;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}
#content .flippy .next:after {
  content: '';
  height: 24px;
  display: inline-block;
  background: url('../images/nav_default.png') 0 0 no-repeat;
  padding-left: 20px;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}
#content .flippy .next:hover:after {
  background: url('../images/nav_active.png') 100% 100% no-repeat;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}
.node-portfolio .flippy li a {
  font-size: 15px;
  color: #a1a1a1;
  letter-spacing: 1.13px;
  line-height: 25px;
  font-weight: bold;
  text-transform: uppercase;
}
.node-portfolio .flippy li a:hover {
  color: #19c2c9;
}
.node-portfolio .flippy li.next {
  float: right;
}
#content {
  position: relative;
}
.back-to {
  position: absolute;
  width: 100%;
  max-width: 1200px;
}
.back-to p {
  position: relative;
  top: -55px;
  width: 300px;
  margin: 0 auto;
}
/* Portfolio page END */

/* Contact us page BEGIN */
body.section-contact-us .region-secondary-content {
  background: none;
}
body.section-contact-us .region-secondary-content .region-inner {
  max-width: none;
  padding: 0;
}
body.section-contact-us .colorized-gmap-common {
  width: 100%;
  height: 450px;
}
body.section-contact-us #main-content {
  max-width: 890px;
  margin-left: auto;
  margin-right: auto;
}
body.section-contact-us #content {
  margin-left: -10px;
  margin-right: -10px;
}
body.section-contact-us #content > * {
  width: 50%;
  display: inline-block;
  padding: 0 10px 10px;
  vertical-align: top;
}
body.section-contact-us #content > * > * {
  max-width: 380px;
  display: block;
}
body.section-contact-us #content > *:last-child > * {
  float: right;
}
.section-contact-us.not-logged-in #page-title {
  margin-bottom: 30px;
}
body.section-contact-us #content .form-text,
body.section-contact-us #content .form-textarea {
  width: 100%;
}
body.section-contact-us {
  min-height: 115px;
}
/* Contact us page END */

/* Ajax load */
.ajax-progress {
  position: relative;
  width: 13px;
}
#load {
  width: 13px;
  height: 13px;
  animation: loading 3s linear infinite;
  max-height: 50px;
  position: absolute;
  bottom: 0;
}
#loading-inner {
  animation: loading-circle 2s linear infinite;
  stroke: #19c2c9;
  stroke-dashoffset: 0;
  stroke-dasharray: 300;
  stroke-width: 10;
  stroke-miterlimit: 10;
  stroke-linecap: round;
  fill: transparent;
}

@keyframes loading {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes loading-circle {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -600;
  }
}

/* =Colors BEGIN*/
.colors p {
  margin: 20px 0 0 0;
}
.colors .block-content div {
  height: 30px;
  width: 100%;
  line-height: 30px;
  position: relative;
}
.colors .block-content div:before {
  margin-left: 20px;
  color: #fff;
}
.color-1 {
  background: #9fc linear-gradient(to right, #19c2c9, #9fc);
}
.color-1:before {
  content: "#19c2c9";
}
.color-1:after {
  content: "#99ffcc";
  position: absolute;
  right: 20px;
}
.color-2 {
  background: #19c2c9;
}
.color-2:before {
  content: "#19c2c9";
}
.color-3 {
  background: #74797b;
}
.color-3:before {
  content: "#74797b";
}
.color-4 {
  background: #333;
}
.color-4:before {
  content: "#333333";
}
/* =Colors END*/

/* Contact us BEGIN */
#map {
  width: 100%;
  height: 694px;
}
.contact-us h3 {
  background: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.contact-us div {
  display: inline-block;
  text-align: center;
  width: 33%;
  margin-top: 35px;
}
.phone.icon:before {
  content: url('../images/PHONE.png');
  display: block;
}
.address.icon:before {
  content: url('../images/MAP.png');
  display: block;
  margin-left: 3px;
}
.mail.icon:before {
  content: url('../images/E-MAIL.png');
  display: block;
}
.mail a {
  color: #74797b;
}
.maps,
.contact-form {
  float: left;
  width: 50%;
  background: #f9f9f9;
}
.contact-form {
  padding-left: 100px;
  padding-top: 70px;
  padding-bottom: 75px;
  float: right;
  z-index: 1;
}
.contact-form h2 {
  border-bottom: 2px solid #19c2c9;
  width: 200px;
  font-size: 30px;
  letter-spacing: normal;
  text-align: left;
  float: left;
  line-height: 60px;
}
.contact-form form,
.contact-form input:not([type="submit"]) {
  max-width: 432px;
  width: 100%;
}
.contact-form .webform-component--description {
  float: left;
  margin-top: 5px;
}
.colorized-gmap-common {
  width: 50%;
  height: 702px;
}
/* Contact us END */

File

themes/brainstorm_theme/css/global.styles.css
View source
  1. @import url(//fonts.googleapis.com/css?family=Raleway:400,600,700);
  2. @import url(//fonts.googleapis.com/css?family=Hind:400,600,700);
  3. @import url(animate.css);
  4. @import url(grid.css);
  5. @import url(//maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css);
  6. /* =Common styles BEGIN */
  7. *,
  8. *:before,
  9. *:after {
  10. box-sizing: border-box;
  11. }
  12. ::selection {
  13. background: #19c2c9;
  14. color: #fff;
  15. }
  16. ::-moz-selection {
  17. background: #19c2c9;
  18. color: #fff;
  19. }
  20. .view-content:before,
  21. .views-row:before,
  22. #header:before,
  23. .main-slider-content-wrapper:before,
  24. #primary-menu-bar:before,
  25. #menu-bar:before,
  26. .region:before {
  27. display: table;
  28. content: " ";
  29. }
  30. .mean-container a.meanmenu-reveal span {
  31. height: 1.5px;
  32. margin-top: 7px;
  33. }
  34. .view-content:after,
  35. .views-row:after,
  36. #header:after,
  37. .main-slider-content-wrapper:after,
  38. #primary-menu-bar:after,
  39. #menu-bar:after,
  40. .region:after {
  41. display: table;
  42. content: " ";
  43. clear: both;
  44. }
  45. #header-group {
  46. max-width: 1200px;
  47. }
  48. .contextual-links-wrapper a {
  49. transition: none;
  50. }
  51. html,
  52. body {
  53. height: auto;
  54. }
  55. html {
  56. background: #fff;
  57. }
  58. body {
  59. overflow: hidden;
  60. min-width: 320px;
  61. font-family: "Hind", sans-serif;
  62. color: #333;
  63. font-size: 14px;
  64. font-weight: 500;
  65. }
  66. img,
  67. input,
  68. textarea {
  69. max-width: 100%;
  70. }
  71. textarea {
  72. min-height: 110px;
  73. }
  74. img {
  75. max-height: 100%;
  76. }
  77. .block-colorized-gmap img {
  78. max-height: none;
  79. max-width: none;
  80. }
  81. p:last-child {
  82. margin-bottom: 0;
  83. }
  84. p {
  85. font-size: 15px;
  86. text-decoration: none;
  87. font-family: 'Hind', sans-serif;
  88. font-weight: 500;
  89. color: #74797b;
  90. line-height: 25px;
  91. }
  92. .profile .user-picture {
  93. float: none;
  94. }
  95. h1,
  96. h2,
  97. h3,
  98. h1 a,
  99. .h1 a,
  100. h2 a,
  101. h3 a {
  102. text-transform: uppercase;
  103. }
  104. h1,
  105. h2,
  106. h3,
  107. h4,
  108. h5,
  109. h6,
  110. h1 a,
  111. .h1 a,
  112. h2 a,
  113. h3 a,
  114. h4 a,
  115. .views-field-title,
  116. .views-field-title a {
  117. font-weight: bold;
  118. font-family: 'Raleway', sans-serif;
  119. line-height: 70px;
  120. color: #2d2d2d;
  121. margin: 0;
  122. }
  123. h1 a:hover,
  124. .h1 a:hover,
  125. h2 a:hover,
  126. h3 a:hover,
  127. h4 a:hover,
  128. h5 a:hover,
  129. h6 a:hover,
  130. .views-field-title a:hover,
  131. .node-title a:hover {
  132. text-decoration: none;
  133. }
  134. h1 {
  135. font-size: 56px;
  136. letter-spacing: 2.8px;
  137. }
  138. h2 {
  139. font-size: 45px;
  140. letter-spacing: 1.13px;
  141. }
  142. h3 {
  143. font-size: 30px;
  144. letter-spacing: 1.5px;
  145. background: url('../images/line.png') center bottom no-repeat;
  146. background-size: 80px;
  147. padding-bottom: 15px;
  148. text-align: center;
  149. margin-bottom: 35px;
  150. }
  151. h3.left {
  152. background-position-x: left;
  153. text-align: left;
  154. }
  155. h4 {
  156. font-size: 20px;
  157. line-height: 50px;
  158. letter-spacing: 1px;
  159. }
  160. h5 {
  161. font-size: 14px;
  162. font-weight: 400;
  163. }
  164. .node-title {
  165. font-family: 'Hind';
  166. font-size: 32px;
  167. text-transform: none;
  168. margin: 5px 0 15px;
  169. line-height: 40px;
  170. }
  171. .node-type-portfolio .node-title {
  172. width: 35%;
  173. float: left;
  174. }
  175. .title {
  176. font-family: 'Raleway', sans-serif;
  177. font-weight: 600;
  178. font-size: 25px;
  179. margin-bottom: 20px;
  180. text-transform: none;
  181. line-height: normal;
  182. }
  183. .comment-title {
  184. font-family: 'Hind';
  185. }
  186. .italic {
  187. font-family: 'Raleway', sans-serif;
  188. font-weight: 500;
  189. font-style: italic;
  190. font-size: 15px;
  191. color: #74797b;
  192. line-height: normal;
  193. margin: 20px 0;
  194. }
  195. a {
  196. text-decoration: none;
  197. color: #19c2c9;
  198. }
  199. a:hover {
  200. text-decoration: none;
  201. }
  202. pre.code,
  203. code {
  204. color: #333;
  205. font-family: 'Courier New', monospace;
  206. }
  207. pre.code {
  208. background-color: #e8e8e8;
  209. padding: 10px;
  210. border-left: 10px solid #1ec97b;
  211. }
  212. mark {
  213. display: inline-block;
  214. padding: 1px;
  215. background: #19c2c9;
  216. color: #fff;
  217. }
  218. blockquote,
  219. blockquote p {
  220. font-family: 'Hind';
  221. font-size: 18px;
  222. color: #333;
  223. line-height: 28px;
  224. letter-spacing: -0.36px;
  225. margin: 20px 0;
  226. display: block;
  227. position: relative;
  228. font-style: normal;
  229. }
  230. blockquote:before {
  231. content: '';
  232. height: 100%;
  233. width: 4px;
  234. display: inline-block;
  235. position: absolute;
  236. background: #19c2c9;
  237. left: 0;
  238. }
  239. .node-type-blog #breadcrumb {
  240. display: none;
  241. }
  242. #breadcrumb {
  243. font-family: 'Hind', sans-serif;
  244. font-size: 15px;
  245. letter-spacing: 0.75px;
  246. color: #fff;
  247. text-align: center;
  248. }
  249. #breadcrumb li {
  250. display: inline-block;
  251. }
  252. #breadcrumb li a {
  253. color: #fff;
  254. font-weight: 700;
  255. }
  256. #breadcrumb li:not(:last-child):after {
  257. content: '/';
  258. width: 10px;
  259. display: inline-block;
  260. font-weight: 700;
  261. }
  262. #breadcrumb #crumbs {
  263. padding: 0;
  264. }
  265. #breadcrumb .crumb-separator {
  266. display: none;
  267. }
  268. blockquote {
  269. position: relative;
  270. margin: 20px 0;
  271. padding-left: 30px;
  272. min-height: 40px;
  273. }
  274. blockquote footer {
  275. font-size: 15px;
  276. font-weight: 700;
  277. letter-spacing: 1.13px;
  278. text-transform: uppercase;
  279. }
  280. .profession {
  281. font-weight: normal;
  282. text-transform: none;
  283. font-size: 14px;
  284. }
  285. div.messages {
  286. position: relative;
  287. min-height: 50px;
  288. padding-top: 40px;
  289. }
  290. .messages h2 {
  291. width: auto;
  292. height: auto;
  293. font-size: 14px;
  294. margin: 0;
  295. line-height: 30px;
  296. text-transform: none;
  297. clip: auto;
  298. top: 10px;
  299. position: absolute;
  300. }
  301. .messages .close {
  302. position: absolute;
  303. right: 20px;
  304. top: 17px;
  305. }
  306. .messages .close:hover {
  307. cursor: pointer;
  308. }
  309. .messages.error {
  310. background: #fcedef url('../images/alerts/error.png') 17px 17px no-repeat;
  311. border-color: #ffd9de;
  312. }
  313. .messages.error h2 {
  314. color: #ff9999;
  315. }
  316. .messages.error .close {
  317. content: url('../images/alerts/4.png');
  318. }
  319. .messages.warning {
  320. background: #fefaec url('../images/alerts/warning.png') 17px 17px no-repeat;
  321. border-color: #f7eac7;
  322. }
  323. .messages.warning h2 {
  324. color: #ffcc66;
  325. }
  326. .messages.warning .close {
  327. content: url('../images/alerts/3.png');
  328. }
  329. .messages.status {
  330. background: #effbee url('../images/alerts/status.png') 17px 17px no-repeat;
  331. border-color: #cbeec8;
  332. }
  333. .messages.status h2 {
  334. color: #99cc99;
  335. }
  336. .messages.status .close {
  337. content: url('../images/alerts/2.png');
  338. }
  339. .messages.info {
  340. background: #f0faff url('../images/alerts/info.png') 17px 17px no-repeat;
  341. border-color: #ceedfc;
  342. }
  343. .messages.info h2 {
  344. color: #77b3f0;
  345. }
  346. .messages.info .close {
  347. content: url('../images/alerts/1.png');
  348. }
  349. #content ul,
  350. .sidebar ul,
  351. #content ul li,
  352. .sidebar ul li,
  353. #columns ul li.leaf,
  354. #columns ul li.collapsed,
  355. #block-system-user-menu .menu,
  356. #block-system-user-menu .menu li {
  357. padding: 0;
  358. }
  359. #content ol,
  360. .sidebar ol {
  361. padding-left: 25px;
  362. }
  363. #content ol li,
  364. .sidebar ol li,
  365. #columns ol li.leaf,
  366. #columns ol li.collapsed {
  367. padding-left: 5px;
  368. }
  369. #content ul,
  370. .sidebar ul,
  371. #content li,
  372. .sidebar li {
  373. list-style: square inside;
  374. color: #19c2c9;
  375. }
  376. #content .contextual-links li {
  377. list-style: none;
  378. }
  379. #content ul li span,
  380. .sidebar ul li span {
  381. line-height: 26px;
  382. font-size: 14px;
  383. color: #74797b;
  384. }
  385. #columns ul,
  386. #columns ol,
  387. #block-system-user-menu .menu {
  388. margin: 15px 0;
  389. }
  390. .menu li,
  391. .item-list ul li,
  392. .links li,
  393. .menu li.leaf,
  394. .menu li.collapsed {
  395. padding-left: 0;
  396. margin-left: 0;
  397. }
  398. #columns .menu li:before,
  399. #columns .item-list li:before,
  400. #columns .links li:before,
  401. #columns .contextual-links-wrapper li:before,
  402. #columns .tabs li:before,
  403. #page .field-name-field-portfolio-terms ul li:before {
  404. content: none;
  405. }
  406. #page .contextual-links,
  407. #page .contextual-links li {
  408. margin: 0;
  409. }
  410. #page .contextual-links {
  411. padding: 0.25em 0;
  412. }
  413. #page .contextual-links li {
  414. padding: 0;
  415. }
  416. .links a:hover,
  417. .node-author a:hover {
  418. text-decoration: underline;
  419. }
  420. #content p {
  421. margin-top: 0;
  422. }
  423. .grippie {
  424. display: none !important;
  425. }
  426. #branding,
  427. .region-inner,
  428. body .view-content,
  429. body .block-title,
  430. .block-our-amazing-team-block-1 .block-title,
  431. .view-header,
  432. .view-main-slider .views-field-nothing,
  433. #columns,
  434. #menu-bar nav,
  435. #primary-menu-bar nav,
  436. #secondary-menu-bar,
  437. #header-group {
  438. margin-right: auto;
  439. margin-left: auto;
  440. }
  441. #branding {
  442. width: 30%;
  443. float: left;
  444. min-width: 180px;
  445. }
  446. body.not-front #columns {
  447. max-width: 1200px;
  448. padding: 0;
  449. margin: 65px auto 90px auto;
  450. }
  451. body.page-portfolio #columns {
  452. max-width: none;
  453. }
  454. body .view-content .view-content {
  455. padding-left: 0;
  456. padding-right: 0;
  457. }
  458. .sidebar .region-inner,
  459. .not-front #columns .content-inner {
  460. padding: 0;
  461. }
  462. #main-content {
  463. margin: 0;
  464. }
  465. #page.container {
  466. max-width: none;
  467. }
  468. .page-blog #page.container {
  469. background-color: #f9f9f9;
  470. }
  471. .front .block-title,
  472. .our-skills h2,
  473. .about-us h2,
  474. .page-title,
  475. .our-team h2 {
  476. font-size: 30px;
  477. text-decoration: none;
  478. display: block;
  479. font-family: 'Raleway', sans-serif;
  480. font-weight: 700;
  481. letter-spacing: 1.5px;
  482. background: url('../images/line.png') center bottom no-repeat;
  483. background-size: 80px;
  484. padding-bottom: 15px;
  485. text-transform: uppercase;
  486. text-align: center;
  487. margin-bottom: 30px;
  488. }
  489. .page-comment .page-title {
  490. margin-bottom: 15px;
  491. }
  492. .front .block-title {
  493. margin-top: 65px;
  494. margin-bottom: 20px;
  495. }
  496. .page-title {
  497. font-size: 30px;
  498. text-transform: none;
  499. background-size: 80px;
  500. padding-bottom: 30px;
  501. }
  502. .page-about-us .page-title,
  503. .page-typography .page-title,
  504. .page-blog .page-title,
  505. .page-portfolio .page-title,
  506. .page-contact .page-title {
  507. font-size: 50px;
  508. background-size: 130px;
  509. text-transform: uppercase;
  510. padding-bottom: 30px;
  511. }
  512. body .front .block-title {
  513. margin-top: 90px;
  514. }
  515. #page-title {
  516. padding-top: 120px;
  517. padding-bottom: 70px;
  518. color: #fff;
  519. height: 243px;
  520. background-color: #000;
  521. }
  522. .page-typography #page-title {
  523. height: 280px;
  524. }
  525. .page-about-us #page-title,
  526. .page-portfolio #page-title,
  527. .page-blog #page-title,
  528. .page-contact #page-title {
  529. height: 389px;
  530. padding-top: 150px;
  531. }
  532. .region-sidebar-second {
  533. padding-left: 30px;
  534. }
  535. .base-page {
  536. background: url('../images/pic_title/base.jpg') 50% no-repeat;
  537. }
  538. .page-about-us .base-page {
  539. background: url('../images/pic_title/about-us.jpg') 50% no-repeat;
  540. }
  541. .page-portfolio .base-page,
  542. .node-type-portfolio .base-page {
  543. background: url('../images/pic_title/portfolio.jpg') 50% no-repeat;
  544. }
  545. .page-blog .base-page,
  546. .node-type-blog .base-page {
  547. background: url('../images/pic_title/blog.jpg') 50% no-repeat;
  548. }
  549. .page-contact .base-page {
  550. background: url('../images/pic_title/contacts.jpg') 50% no-repeat;
  551. }
  552. .view-header {
  553. color: #606060;
  554. text-align: center;
  555. margin-bottom: 40px;
  556. }
  557. .views-field-title a,
  558. .section-tags .node-title a {
  559. color: #333;
  560. text-decoration: none;
  561. }
  562. .section-tags {
  563. font-family: 'Raleway';
  564. font-size: 20px;
  565. font-weight: 700;
  566. padding-top: 20px;
  567. }
  568. #page-wrapper table p {
  569. margin: 0;
  570. }
  571. #page-wrapper table {
  572. width: 100%;
  573. border: none;
  574. max-width: 1920px;
  575. margin: 0 auto;
  576. }
  577. .html #page-wrapper table th {
  578. font-weight: 400;
  579. color: #333;
  580. }
  581. th,
  582. td {
  583. padding: 10px;
  584. }
  585. th {
  586. padding-top: 15px;
  587. padding-bottom: 15px;
  588. }
  589. tr,
  590. tr.even,
  591. tr.odd {
  592. padding: 0;
  593. border: none;
  594. }
  595. tr.even {
  596. background-color: #fff;
  597. }
  598. tr.odd {
  599. background-color: #e8e8e8;
  600. }
  601. table.ver-1 td,
  602. table.ver-1 th {
  603. border: none;
  604. }
  605. table.ver-1 tr {
  606. border-bottom: 1px solid #c6c6c6;
  607. }
  608. .form-item {
  609. margin: 0 0 20px;
  610. }
  611. span.form-required {
  612. display: none;
  613. }
  614. .container-inline .form-item {
  615. display: inline-block;
  616. }
  617. input[type="text"],
  618. input[type="password"],
  619. input[type="email"],
  620. textarea {
  621. width: 420px;
  622. padding: 15px 20px;
  623. border: 1px solid #e3e3e3;
  624. }
  625. input[type="text"]:focus,
  626. input[type="password"]:focus,
  627. input[type="email"]:focus,
  628. textarea:focus {
  629. border: 1px solid #19c2c9 !important;
  630. outline-color: transparent;
  631. outline-style: none;
  632. }
  633. .form-item input.error,
  634. .form-item textarea.error,
  635. .form-item select.error {
  636. border: 1px solid #ff3334;
  637. }
  638. textarea {
  639. resize: vertical;
  640. }
  641. .form-item .description {
  642. font-size: 13px;
  643. color: #19c4cb;
  644. }
  645. .form-item .description.error {
  646. background: none;
  647. color: #ff3334;
  648. }
  649. label {
  650. font-weight: 400;
  651. margin-bottom: 3px;
  652. }
  653. #content .item-list ul.pager-load-more li {
  654. width: 200px;
  655. }
  656. .item-list .pager {
  657. text-align: left;
  658. }
  659. .item-list .pager li {
  660. display: inline-block;
  661. margin: 0 10px 10px 0;
  662. padding: 0;
  663. }
  664. #page .item-list .pager li {
  665. padding-left: 0;
  666. margin-left: 0;
  667. margin-bottom: 10px;
  668. width: 45px;
  669. height: 45px;
  670. }
  671. #page .item-list .pager li:last-of-type {
  672. margin-right: 0;
  673. }
  674. #page .item-list .pager a,
  675. #page .item-list .pager .pager-current,
  676. #page .item-list .pager .pager-ellipsis {
  677. display: inline-block;
  678. color: #74797b;
  679. border: 1px solid #a9a9a9;
  680. text-decoration: none;
  681. width: 45px;
  682. height: 45px;
  683. text-align: center;
  684. font-size: 15px;
  685. line-height: 45px;
  686. }
  687. #page .item-list .pager .pager-ellipsis {
  688. border: none;
  689. }
  690. #page .item-list .pager .pager-current,
  691. #page .item-list .pager a:hover {
  692. background: #19c2c9;
  693. border-color: #19c2c9;
  694. color: #fff;
  695. }
  696. #page .item-list .pager .pager-current {
  697. cursor: default;
  698. font-weight: 400;
  699. }
  700. #page .item-list.item-list-pager li {
  701. background-color: transparent;
  702. }
  703. .region-secondary-content {
  704. background: url(images/bg-page-title.png) no-repeat 50% 50%;
  705. background-size: cover;
  706. }
  707. .sidebar .block {
  708. margin-bottom: 60px;
  709. }
  710. /* Loading */
  711. #load {
  712. animation: loading 3s linear infinite;
  713. }
  714. #loading-inner {
  715. animation: loading-circle 2s linear infinite;
  716. -webkit-animation: loading-circle 2s linear infinite;
  717. -moz-animation: loading-circle 2s linear infinite;
  718. stroke: #19c2c9;
  719. stroke-dashoffset: 0;
  720. stroke-dasharray: 300;
  721. stroke-width: 10;
  722. stroke-miterlimit: 10;
  723. stroke-linecap: round;
  724. fill: transparent;
  725. }
  726. @keyframes loading {
  727. 0% {
  728. transform: rotate(0);
  729. }
  730. 100% {
  731. transform: rotate(360deg);
  732. }
  733. }
  734. @-webkit-keyframes loading {
  735. 0% {
  736. transform: rotate(0);
  737. }
  738. 100% {
  739. transform: rotate(360deg);
  740. }
  741. }
  742. @-moz-keyframes loading {
  743. 0% {
  744. transform: rotate(0);
  745. }
  746. 100% {
  747. transform: rotate(360deg);
  748. }
  749. }
  750. @keyframes loading-circle {
  751. 0% {
  752. stroke-dashoffset: 0;
  753. }
  754. 100% {
  755. stroke-dashoffset: -600;
  756. }
  757. }
  758. @-webkit-keyframes loading-circle {
  759. 0% {
  760. stroke-dashoffset: 0;
  761. }
  762. 100% {
  763. stroke-dashoffset: -600;
  764. }
  765. }
  766. @-moz-keyframes loading-circle {
  767. 0% {
  768. stroke-dashoffset: 0;
  769. }
  770. 100% {
  771. stroke-dashoffset: -600;
  772. }
  773. }
  774. /* Info items */
  775. .views-field-created,
  776. .views-field-comment-count,
  777. .views-field-comment-count a,
  778. .data,
  779. .submitted .comment,
  780. .submitted .comment a,
  781. .datetime,
  782. .author-datetime {
  783. display: inline-block;
  784. }
  785. .views-field-created:before,
  786. .view-blog .views-field-comment-count:before,
  787. .data:before,
  788. .submitted .comment:before {
  789. font-size: 18px;
  790. line-height: 1;
  791. font-family: 'FontAwesome';
  792. position: absolute;
  793. }
  794. .submitted {
  795. margin-top: 20px;
  796. }
  797. .view-blog .views-field-comment-count:before,
  798. .submitted .comment:before {
  799. content: '\f0e5';
  800. }
  801. .view-blog .views-field-name:before,
  802. .author-datetime:before {
  803. content: url('../images/Admin.png');
  804. vertical-align: -webkit-baseline-middle;
  805. margin-right: 3px;
  806. }
  807. .view-blog .views-field-name span:before {
  808. content: 'by ';
  809. }
  810. .view-blog .views-field-name:after,
  811. .view-blog .views-field-created:after,
  812. .author-datetime:after,
  813. .datetime:after,
  814. .submitted .comment:after {
  815. content: '/';
  816. padding-left: 10px;
  817. }
  818. .views-field-comment-count span,
  819. .submitted .comment span {
  820. padding-left: 25px;
  821. }
  822. .page-blog .view-blog li div:not(.views-field-created),
  823. .submitted div:not(.datetime) {
  824. margin-left: 10px;
  825. }
  826. .view-blog .views-field-name {
  827. margin-right: -20px;
  828. }
  829. .view-blog .view-content ul li div.views-field-comment-count {
  830. margin-left: 30px;
  831. }
  832. #columns .submitted ul li {
  833. margin-left: 0;
  834. }
  835. .views-field-created,
  836. #content ul li .views-field-created span,
  837. .views-field-name,
  838. #content ul li .views-field-name span,
  839. .views-field-comment-count,
  840. #content ul li .views-field-comment-count span,
  841. .data,
  842. div.datetime,
  843. div.author-datetime,
  844. div.author-datetime a,
  845. .submitted .comment,
  846. .submitted .comment span,
  847. .addtoany_list.a2a_kit_size_32 > a {
  848. font-size: 13px;
  849. line-height: 20px;
  850. color: #999;
  851. position: relative;
  852. text-decoration: none;
  853. display: inline-block;
  854. }
  855. .author-datetime a:hover {
  856. color: #19c2c9;
  857. }
  858. /* Buttons */
  859. .btn,
  860. input[type="submit"],
  861. input[type="button"],
  862. .view-dignities .view-footer a,
  863. .view-our-amazing-team .views-field-nothing a,
  864. .button,
  865. .about-us p a {
  866. display: inline-block;
  867. text-transform: uppercase;
  868. padding: 18px 40px;
  869. background: #19c2c9;
  870. border: none;
  871. color: #fff;
  872. font-size: 15px;
  873. font-weight: bold;
  874. letter-spacing: 1.13px;
  875. border-radius: 0;
  876. height: 55px;
  877. }
  878. .btn:hover,
  879. .view-dignities .view-footer a:hover,
  880. .view-our-amazing-team .views-field-nothing a:hover,
  881. .about-us p a:hover {
  882. text-decoration: none;
  883. }
  884. .btn + .btn,
  885. input[type="submit"] + input[type="submit"],
  886. input[type="button"] + input[type="button"],
  887. .view-dignities .view-footer a + a,
  888. .view-our-amazing-team .views-field-nothing a + a {
  889. margin-left: 20px;
  890. }
  891. .btn:hover,
  892. input[type="submit"]:hover,
  893. .view-dignities .view-footer a:hover,
  894. .view-our-amazing-team .views-field-nothing a:hover,
  895. .about-us p a:hover,
  896. .front .view-blog table .views-field-view-node a:hover,
  897. .company-name .second-part a:hover {
  898. background-color: #333;
  899. }
  900. .input input {
  901. margin-bottom: 20px;
  902. }
  903. input:active {
  904. border: none;
  905. }
  906. .input input:nth-child(4),
  907. input[type="button"] {
  908. background: #333;
  909. }
  910. input[type="button"]:hover {
  911. background: #19c2c9;
  912. }
  913. .block-superfish select,
  914. #primary-menu-bar select,
  915. #menu-bar select {
  916. display: none;
  917. }
  918. #primary-menu-bar,
  919. #block-system-main-menu {
  920. width: 60%;
  921. float: right;
  922. height: 80px;
  923. }
  924. #secondary-menu-bar {
  925. display: block;
  926. }
  927. ul.primary {
  928. border: 0;
  929. text-transform: uppercase;
  930. font-size: 18px;
  931. white-space: normal;
  932. padding: 0;
  933. }
  934. ul.primary li {
  935. display: inline-flex;
  936. }
  937. ul.primary li a {
  938. padding: 4px 9px;
  939. color: #333;
  940. background: none;
  941. border: none;
  942. margin: 0;
  943. }
  944. ul.primary li.active a,
  945. ul.primary li.active a:hover {
  946. background: #19c2c9;
  947. color: #fff;
  948. border: none;
  949. padding: 4px 9px;
  950. }
  951. ul.primary li a:hover {
  952. border: 2px solid #19c2c9;
  953. background: none;
  954. padding: 2px 7px;
  955. color: #333;
  956. }
  957. .node-readmore a,
  958. .comment-comments a,
  959. .comment-add a {
  960. position: relative;
  961. }
  962. .comment .username {
  963. display: block;
  964. }
  965. .node-readmore a,
  966. .comment-comments a,
  967. .comment-add a {
  968. color: #a6a6a6;
  969. }
  970. .node-readmore a:hover,
  971. .comment-comments a:hover,
  972. .comment-add a:hover {
  973. color: #19c2c9;
  974. text-decoration: none;
  975. }
  976. .node-readmore a:before,
  977. .comment-comments a:before,
  978. .comment-add a:before {
  979. font-family: 'FontAwesome';
  980. position: absolute;
  981. left: 0;
  982. }
  983. .node-readmore a {
  984. padding-left: 13px;
  985. }
  986. .node-readmore a:before {
  987. content: '\f101';
  988. }
  989. .comment-comments a {
  990. padding-left: 19px;
  991. }
  992. .comment-comments a:before {
  993. content: '\f0e5';
  994. }
  995. .comment-add a {
  996. padding-left: 17px;
  997. }
  998. .comment-add a:before {
  999. content: '\f055';
  1000. }
  1001. /* Share buttons */
  1002. .a2a_kit a {
  1003. margin-bottom: 8px;
  1004. }
  1005. .owl-theme .owl-controls .owl-buttons div:hover {
  1006. opacity: 1;
  1007. }
  1008. /* =Common styles END */
  1009. /* Drupal standart blocks BEGIN */
  1010. #columns {
  1011. padding: 40px 0;
  1012. }
  1013. body #columns {
  1014. padding: 0;
  1015. }
  1016. #logo,
  1017. #name-and-slogan {
  1018. float: left;
  1019. }
  1020. #name-and-slogan #site-name {
  1021. color: #fff;
  1022. }
  1023. #site-name a {
  1024. color: #fff;
  1025. }
  1026. #block-system-user-menu {
  1027. float: right;
  1028. }
  1029. .feed-icon {
  1030. display: inline-block;
  1031. margin: 15px 5px;
  1032. }
  1033. .block-search .form-item {
  1034. margin-bottom: 10px;
  1035. }
  1036. .node-article {
  1037. margin-bottom: 20px;
  1038. }
  1039. #block-system-powered-by {
  1040. padding: 30px 0;
  1041. }
  1042. #comments,
  1043. .comment-form {
  1044. margin-top: 15px;
  1045. padding-top: 15px;
  1046. }
  1047. .comment-form + .comment-form {
  1048. border-top: none;
  1049. margin-top: 0;
  1050. padding-top: 0;
  1051. }
  1052. #comments .form-text,
  1053. #comments .form-textarea {
  1054. width: 100%;
  1055. }
  1056. #primary-menu-bar .menu .menu {
  1057. display: none;
  1058. }
  1059. #primary-menu-bar .menu .menu .menu {
  1060. left: 100%;
  1061. top: 0;
  1062. }
  1063. #primary-menu-bar li:hover > .menu {
  1064. display: block;
  1065. }
  1066. #primary-menu-bar nav > .menu {
  1067. display: flex;
  1068. margin: 0;
  1069. justify-content: flex-end;
  1070. }
  1071. #page #block-system-main-menu {
  1072. z-index: 101;
  1073. }
  1074. #primary-menu-bar > nav > .menu > li,
  1075. #block-system-main-menu .menu-depth-1 {
  1076. float: left;
  1077. }
  1078. #primary-menu-bar > nav > .menu > li > a,
  1079. #block-system-main-menu .menu-depth-1 > a {
  1080. text-transform: uppercase;
  1081. padding: 0 20px 0;
  1082. border-left: 1px solid transparent;
  1083. border-right: 1px solid transparent;
  1084. }
  1085. #primary-menu-bar > nav > .menu > li:nth-child(1) > a:hover,
  1086. #primary-menu-bar > nav > .menu > li:nth-child(1) > a.active {
  1087. background: url('../images/menu_underline/Home.png') 50% 100% no-repeat;
  1088. transition: none;
  1089. }
  1090. #primary-menu-bar > nav > .menu > li:nth-child(2) > a:hover,
  1091. #primary-menu-bar > nav > .menu > li:nth-child(2) > a.active {
  1092. background: url('../images/menu_underline/AboutUs.png') 50% 100% no-repeat;
  1093. transition: none;
  1094. }
  1095. #primary-menu-bar > nav > .menu > li:nth-child(3) > a:hover,
  1096. #primary-menu-bar > nav > .menu > li:nth-child(3) > a.active {
  1097. background: url('../images/menu_underline/Portfolio.png') 50% 100% no-repeat;
  1098. transition: none;
  1099. }
  1100. #primary-menu-bar > nav > .menu > li:nth-child(4) > a:hover,
  1101. #primary-menu-bar > nav > .menu > li:nth-child(4) > a.active {
  1102. background: url('../images/menu_underline/Blog.png') 50% 100% no-repeat;
  1103. transition: none;
  1104. }
  1105. #primary-menu-bar > nav > .menu > li:nth-child(5) > a:hover,
  1106. #primary-menu-bar > nav > .menu > li:nth-child(5) > a.active {
  1107. background: url('../images/menu_underline/Contacts.png') 50% 100% no-repeat;
  1108. transition: none;
  1109. }
  1110. #primary-menu-bar > nav > .menu > li:nth-child(6) > a:hover,
  1111. #primary-menu-bar > nav > .menu > li:nth-child(6) > a.active {
  1112. background: url('../images/menu_underline/Typography.png') 50% 100% no-repeat;
  1113. transition: none;
  1114. }
  1115. #primary-menu-bar .menu .menu {
  1116. position: absolute;
  1117. padding: 10px 0 !important;
  1118. width: auto !important;
  1119. background: #fff;
  1120. top: 80px;
  1121. min-width: 190px;
  1122. border-radius: 0;
  1123. -webkit-box-shadow: inset 0 0 0 1px rgba(232,232,232,1);
  1124. -moz-box-shadow: inset 0 0 0 1px rgba(232,232,232,1);
  1125. box-shadow: inset 0 0 0 1px rgba(232,232,232,1);
  1126. }
  1127. #block-system-main-menu .menu {
  1128. display: flex;
  1129. justify-content: flex-end;
  1130. flex-wrap: wrap;
  1131. }
  1132. #primary-menu-bar .menu .menu a:hover,
  1133. #block-system-main-menu .menu a:hover {
  1134. color: #19c2c9;
  1135. }
  1136. .sidebar .form-text {
  1137. width: 100%;
  1138. }
  1139. /* Drupal standart blocks END */
  1140. /* =Header BEGIN */
  1141. #header,
  1142. #block-system-main-menu,
  1143. #primary-menu-bar {
  1144. position: relative;
  1145. z-index: 100;
  1146. }
  1147. #header {
  1148. background: rgba(0,0,0, 0.8);
  1149. position: absolute;
  1150. right: 0;
  1151. left: 0;
  1152. max-height: 80px;
  1153. }
  1154. #header .block-logo,
  1155. #logo,
  1156. #name-and-slogan {
  1157. clear: none;
  1158. width: auto;
  1159. float: left;
  1160. padding-top: 25px;
  1161. margin: 0 auto;
  1162. padding-bottom: 10px;
  1163. }
  1164. #header .block-logo #logo {
  1165. padding: 0;
  1166. }
  1167. #logo {
  1168. margin-right: 15px;
  1169. }
  1170. #header .block-logo .content * {
  1171. vertical-align: middle;
  1172. }
  1173. #header .block-logo img {
  1174. max-width: 230px;
  1175. max-height: 60px;
  1176. }
  1177. .sf-sub-indicator {
  1178. display: none;
  1179. }
  1180. #block-superfish-1 ul,
  1181. #block-superfish-1 li,
  1182. #block-system-main-menu .menu,
  1183. #block-system-main-menu .menu li,
  1184. #primary-menu-bar .menu,
  1185. #primary-menu-bar .menu li {
  1186. margin: 0;
  1187. list-style: none;
  1188. }
  1189. #block-superfish-1 ul,
  1190. #block-system-main-menu .menu,
  1191. #primary-menu-bar .menu {
  1192. padding: 0 !important;
  1193. }
  1194. #block-superfish-1 li,
  1195. #block-system-main-menu .menu li,
  1196. #primary-menu-bar .menu li {
  1197. padding: 0;
  1198. }
  1199. #superfish-1 a,
  1200. #primary-menu-bar .menu a,
  1201. #block-system-main-menu .menu a {
  1202. line-height: 80px;
  1203. font-size: 13px;
  1204. text-decoration: none;
  1205. display: block;
  1206. font-family: 'Raleway', sans-serif;
  1207. color: #fff;
  1208. font-weight: 700;
  1209. }
  1210. #superfish-1 #menu-468-1.sf-depth-1 > a,
  1211. #menu .menu-mlid-468 > a {
  1212. cursor: default;
  1213. pointer-events: none;
  1214. }
  1215. #superfish-1 #menu-468-1.sf-depth-1 > a:hover,
  1216. #superfish-1 #menu-468-1.active-trail.sf-depth-1 > a,
  1217. #menu .menu-mlid-468 > a:hover,
  1218. #menu .menu-mlid-468 > a.active {
  1219. color: #a6a6a6;
  1220. }
  1221. #header .btn-mobile-menu {
  1222. clear: none;
  1223. float: right;
  1224. width: 50px;
  1225. height: 35px;
  1226. background: url(images/icon-mobile-menu.png) no-repeat 50% 50%;
  1227. font-size: 0;
  1228. cursor: pointer;
  1229. margin-top: 22px;
  1230. }
  1231. #toggle-icon {
  1232. margin-top: 5px;
  1233. color: #333;
  1234. }
  1235. #header #toggle-icon:hover {
  1236. color: #3f9ae8;
  1237. }
  1238. /* =Header END */
  1239. /* =Footer BEGIN */
  1240. .copyright,
  1241. .region-tertiary-content {
  1242. background-color: #333;
  1243. color: #fff;
  1244. max-height: 80px;
  1245. }
  1246. .region-tertiary-content .region-inner {
  1247. padding: 0;
  1248. }
  1249. .copyright-content {
  1250. max-width: 1200px;
  1251. margin: 0 auto;
  1252. }
  1253. .region-tertiary-content .block {
  1254. width: 100%;
  1255. display: inline-block;
  1256. vertical-align: top;
  1257. }
  1258. .about-this-theme,
  1259. #page-wrapper .region-tertiary-content .block-title {
  1260. padding: 0;
  1261. margin-bottom: 15px;
  1262. text-align: left;
  1263. font-size: 17px;
  1264. font-weight: 700;
  1265. color: #fff;
  1266. text-transform: uppercase;
  1267. }
  1268. .region-tertiary-content .view-content,
  1269. body .region-tertiary-content .view-content {
  1270. padding: 0;
  1271. }
  1272. .block-title {
  1273. margin-bottom: 15px;
  1274. }
  1275. .about-this-theme {
  1276. margin-bottom: 10px;
  1277. }
  1278. .field-label-above {
  1279. margin-top: 20px;
  1280. }
  1281. .field-label-above ul,
  1282. .field-label-above li {
  1283. padding: 0;
  1284. margin: 0;
  1285. list-style: none;
  1286. }
  1287. .field-label-above li {
  1288. display: inline-block;
  1289. margin-right: 10px;
  1290. }
  1291. .view-popular-tags a,
  1292. .field-label-above a {
  1293. color: #333;
  1294. text-decoration: none;
  1295. display: inline-block;
  1296. border: 1px solid #333;
  1297. padding: 10px 20px;
  1298. }
  1299. .view-popular-tags a:hover,
  1300. .field-label-above a:hover {
  1301. color: #fff;
  1302. background-color: #19c2c9;
  1303. border-color: #19c2c9;
  1304. }
  1305. .block-instagram-block .content {
  1306. font-size: 0;
  1307. line-height: 0;
  1308. margin-left: -5px;
  1309. margin-right: -5px;
  1310. }
  1311. .block-instagram-block .content a {
  1312. display: inline-block;
  1313. position: relative;
  1314. margin: 0 5px 10px;
  1315. }
  1316. .block-instagram-block .content a:before {
  1317. content: '';
  1318. display: block;
  1319. position: absolute;
  1320. left: 0;
  1321. top: 0;
  1322. width: 100%;
  1323. height: 100%;
  1324. }
  1325. .block-instagram-block .content a:hover:before {
  1326. background-color: #3d8fd6;
  1327. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
  1328. opacity: 0.4;
  1329. }
  1330. .block-instagram-block img {
  1331. margin: 0 !important;
  1332. }
  1333. #superfish-2 {
  1334. display: block !important;
  1335. }
  1336. #superfish-2,
  1337. #superfish-2 li {
  1338. width: auto;
  1339. }
  1340. #superfish-2 li {
  1341. padding: 10px 0;
  1342. display: block;
  1343. float: none;
  1344. margin: 0;
  1345. border-bottom: 1px solid #62676d;
  1346. }
  1347. #superfish-2 li:last-child {
  1348. border-bottom: none;
  1349. }
  1350. #superfish-2 a,
  1351. .copyright a {
  1352. color: #19c2c9;
  1353. text-decoration: none;
  1354. }
  1355. #superfish-2 a {
  1356. display: inline-block;
  1357. }
  1358. .region-footer {
  1359. background-color: #202123;
  1360. }
  1361. .block-social-icons {
  1362. text-align: center;
  1363. }
  1364. .block-social-icons .content a {
  1365. font-size: 32px;
  1366. line-height: 90px;
  1367. text-align: center;
  1368. color: #84888c;
  1369. width: 85px;
  1370. height: 90px;
  1371. display: inline-block;
  1372. }
  1373. .fa-facebook-official:hover:before,
  1374. .fa-facebook:hover:before {
  1375. color: #2d5c99;
  1376. }
  1377. .fa-github:hover:before {
  1378. color: #333;
  1379. }
  1380. .fa-twitter:hover:before {
  1381. color: #2faeee;
  1382. }
  1383. .fa-instagram:hover:before {
  1384. color: #2e7396;
  1385. }
  1386. .fa-behance:hover:before {
  1387. color: #00acdc;
  1388. }
  1389. .fa-linkedin-square:hover:before {
  1390. color: #0089bc;
  1391. }
  1392. .fa-dribbble:hover:before {
  1393. color: #ff8caf;
  1394. }
  1395. /* =Footer END */
  1396. /* =Page About us BEGIN*/
  1397. .two-list ul {
  1398. column-count: 2;
  1399. -webkit-column-count: 2;
  1400. -moz-column-count: 2;
  1401. }
  1402. #about-us-page .first-part {
  1403. padding-right: 15px;
  1404. }
  1405. #about-us-page .second-part {
  1406. padding-left: 15px;
  1407. }
  1408. #about-us-page li {
  1409. list-style-image: url('../images/check.png');
  1410. list-style-position: inside;
  1411. line-height: 30px;
  1412. }
  1413. .company-name {
  1414. height: 500px;
  1415. background: #f9f9f9;
  1416. }
  1417. .company-name .first-part,
  1418. .company-name .second-part {
  1419. height: 500px;
  1420. }
  1421. .company-name .second-part p {
  1422. max-width: 500px;
  1423. margin: 0 auto;
  1424. }
  1425. .company-name .second-part a {
  1426. margin-top: 45px;
  1427. }
  1428. #page-wrapper .our-team table {
  1429. max-width: 1200px;
  1430. }
  1431. .our-team {
  1432. margin: 70px 0;
  1433. }
  1434. .our-team .block-title {
  1435. margin-bottom: 40px;
  1436. }
  1437. .our-team .views-field-title {
  1438. line-height: 40px;
  1439. margin-top: 20px;
  1440. }
  1441. .our-team .social-team {
  1442. background: #19c2c9;
  1443. padding: 5px 19px;
  1444. margin: 0;
  1445. width: 270px;
  1446. display: flex;
  1447. }
  1448. .social-team li {
  1449. display: inline-block;
  1450. font-size: 27px;
  1451. padding: 0 16px;
  1452. }
  1453. .our-team .social-team li a {
  1454. color: #fff;
  1455. }
  1456. .our-team td {
  1457. position: relative;
  1458. }
  1459. .our-team .views-field-field-social {
  1460. position: absolute;
  1461. bottom: 99px;
  1462. overflow: hidden;
  1463. }
  1464. .our-team .views-field-field-photo-team img {
  1465. width: 100%;
  1466. height: 100%;
  1467. max-height: 280px;
  1468. max-width: 280px;
  1469. -webkit-transition: all 0.15s ease-in-out;
  1470. -moz-transition: all 0.15s ease-in-out;
  1471. -o-transition: all 0.15s ease-in-out;
  1472. -ms-transition: all 0.15s ease-in-out;
  1473. transition: all 0.15s ease-in-out;
  1474. }
  1475. .our-team .views-field-field-photo-team {
  1476. overflow: hidden;
  1477. max-width: 270px;
  1478. }
  1479. .our-team .views-field-field-social:hover .field-content {
  1480. top: 50px;
  1481. }
  1482. .our-team .views-field-field-social .field-content {
  1483. position: relative;
  1484. top: 51px;
  1485. -webkit-transition: all 0.15s ease-in-out;
  1486. -moz-transition: all 0.15s ease-in-out;
  1487. -o-transition: all 0.15s ease-in-out;
  1488. -ms-transition: all 0.15s ease-in-out;
  1489. transition: all 0.15s ease-in-out;
  1490. }
  1491. .our-team td:hover .views-field-field-social .field-content {
  1492. opacity: 1;
  1493. transform: translateY(-50px);
  1494. -webkit-transform: translateY(-50px);
  1495. -moz-transform: translateY(-50px);
  1496. -ms-transform: translateY(-50px);
  1497. -o-transform: translateY(-50px);
  1498. }
  1499. .our-team td:hover img {
  1500. opacity: 1;
  1501. transform: translateY(-30px);
  1502. -webkit-transform: translateY(-30px);
  1503. -moz-transform: translateY(-30px);
  1504. -ms-transform: translateY(-30px);
  1505. -o-transform: translateY(-30px);
  1506. }
  1507. /* =Page About us END*/
  1508. /* =Block Our recent works BEGIN*/
  1509. #edit-tid-wrapper {
  1510. float: none;
  1511. }
  1512. .view-header,
  1513. .view-isotope-filter-block ul,
  1514. #edit-tid,
  1515. #edit-type-1,
  1516. .views-exposed-widgets {
  1517. margin: 0 auto 20px auto;
  1518. display: table;
  1519. display: -webkit-flex;
  1520. display: flex;
  1521. align-items: center;
  1522. justify-content: center;
  1523. flex-wrap: wrap;
  1524. -ms-flex-wrap: wrap;
  1525. position: relative;
  1526. }
  1527. .view-header div {
  1528. float: left;
  1529. display: inline-flex;
  1530. }
  1531. .view-columns .isotope-options li a,
  1532. #edit-type-1 label {
  1533. color: transparent;
  1534. position: absolute;
  1535. left: 0;
  1536. top: 0;
  1537. }
  1538. #edit-type-1 .form-item {
  1539. position: relative;
  1540. }
  1541. #edit-type-1 input {
  1542. width: 35px;
  1543. opacity: 0;
  1544. }
  1545. .view-columns,
  1546. #edit-type-1-wrapper {
  1547. border-left: 1px solid #494949;
  1548. margin-left: 10px;
  1549. padding: 15px;
  1550. }
  1551. #content .view-columns ul.isotope-options li {
  1552. width: 35px;
  1553. height: 20px;
  1554. margin: 0;
  1555. }
  1556. #content .view-columns li.first a,
  1557. #edit-type-1 .form-item:first-child label {
  1558. background: url('../images/column/3_column_default.png') 50% no-repeat;
  1559. width: 35px;
  1560. height: 20px;
  1561. }
  1562. #content .view-columns li.first a.selected,
  1563. #edit-type-1 .form-item:first-child input:checked + label {
  1564. background: url('../images/column/3_column_active.png') 50% no-repeat;
  1565. }
  1566. #content .view-columns li.last a,
  1567. #edit-type-1 .form-item:last-child label {
  1568. background: url('../images/column/2_column_default.png') 50% no-repeat;
  1569. width: 35px;
  1570. height: 20px;
  1571. }
  1572. #content .view-columns li.last a.selected,
  1573. #edit-type-1 .form-item:last-child input:checked + label {
  1574. background: url('../images/column/2_column_active.png') 50% no-repeat;
  1575. }
  1576. #edit-tid .form-item {
  1577. text-align: center;
  1578. position: relative;
  1579. display: inline-block;
  1580. }
  1581. #edit-tid .form-item input {
  1582. position: absolute;
  1583. width: 100%;
  1584. height: 100%;
  1585. opacity: 0;
  1586. left: 0;
  1587. }
  1588. #content .view-isotope-filter-block .view-content .isotope-options li a,
  1589. #edit-tid .form-item label {
  1590. font-weight: 500;
  1591. font-family: 'Hind', sans-serif;
  1592. font-size: 18px;
  1593. color: #333;
  1594. text-transform: uppercase;
  1595. padding: 4px 9px;
  1596. border: 2px solid #fff;
  1597. width: auto;
  1598. display: block;
  1599. }
  1600. #content .view-isotope-filter-block .view-content .isotope-options li {
  1601. width: auto;
  1602. padding: 11px 0;
  1603. margin: 6px 0 0 0;
  1604. }
  1605. #content .view-isotope-filter-block .view-content .isotope-options li a.selected,
  1606. #edit-tid .form-item input:checked + label {
  1607. color: #fff;
  1608. background: #19c2c9;
  1609. border: 2px solid #19c2c9;
  1610. }
  1611. #content .view-isotope-filter-block .view-content .isotope-options li a {
  1612. height: 32px;
  1613. display: table-cell;
  1614. vertical-align: middle;
  1615. }
  1616. #content .view-isotope-filter-block .view-content .isotope-options li a:hover,
  1617. #edit-tid .form-item:hover label {
  1618. border: 2px solid #19c2c9;
  1619. }
  1620. .view-portfolio-isotope td,
  1621. .view-portfolio-isotope li,
  1622. .view-portfolio td,
  1623. .view-portfolio li {
  1624. padding: 0;
  1625. height: auto;
  1626. position: relative;
  1627. border: none;
  1628. overflow: hidden;
  1629. max-width: 640px;
  1630. float: left;
  1631. }
  1632. .view-portfolio-isotope img,
  1633. .view-portfolio img {
  1634. width: 101%;
  1635. height: auto;
  1636. object-fit: cover;
  1637. margin-bottom: -10px;
  1638. }
  1639. .view-portfolio-isotope h3 {
  1640. display: none;
  1641. }
  1642. #columns .view-portfolio-isotope ul {
  1643. margin: 0;
  1644. }
  1645. .view-portfolio-isotope .views-field-title,
  1646. .view-portfolio-isotope .isotope-filter,
  1647. .view-portfolio-isotope .views-field-field-portfolio-image a:after,
  1648. .view-portfolio .views-field-title,
  1649. .view-portfolio .views-field-field-tags-portfolio,
  1650. .view-portfolio .views-field-field-portfolio-image a:after {
  1651. position: absolute;
  1652. bottom: 0;
  1653. left: 0;
  1654. white-space: nowrap;
  1655. height: 20px;
  1656. font-family: 'Raleway', sans-serif;
  1657. font-weight: bold;
  1658. color: #fff;
  1659. font-size: 16px;
  1660. display: none;
  1661. }
  1662. #content .view-portfolio-isotope .views-field-title span,
  1663. #content .view-portfolio .views-field-title span {
  1664. font-size: 16px;
  1665. }
  1666. .view-portfolio-isotope .view-content a,
  1667. .view-portfolio a {
  1668. color: #fff;
  1669. text-decoration: none;
  1670. line-height: 1px;
  1671. }
  1672. .view-portfolio-isotope .views-field-field-portfolio-image a:after,
  1673. .view-portfolio .views-field-field-portfolio-image a:after {
  1674. content: '';
  1675. background: url('../images/plus/plus@3x.png') 50% 50% no-repeat, url('../images/hover-_effect.png') no-repeat;
  1676. -moz-background-size: 51px, cover; /* Firefox 3.6+ */
  1677. -webkit-background-size: 51px, cover; /* Safari 3.1+ и Chrome 4.0+ */
  1678. -o-background-size: 51px, cover; /* Opera 9.6+ */
  1679. background-size: 51px, cover;
  1680. height: 100%;
  1681. width: 100%;
  1682. }
  1683. .views-field-field-tags-portfolio {
  1684. display: -webkit-box;
  1685. display: -moz-box;
  1686. display: -ms-flexbox;
  1687. display: -webkit-flex;
  1688. display: flex;
  1689. }
  1690. .view-portfolio-isotope td:hover .views-field-field-portfolio-image a:after,
  1691. .view-portfolio-isotope li:hover .views-field-field-portfolio-image a:after,
  1692. .view-portfolio td:hover .views-field-field-portfolio-image a:after,
  1693. .view-portfolio li:hover .views-field-field-portfolio-image a:after {
  1694. display: block;
  1695. animation: views-field-field-background-image_gwd-keyframes 0.5s linear 0s 1 normal forwards;
  1696. -webkit-animation: views-field-field-background-image_gwd-keyframes 0.5s linear 0s 1 normal forwards;
  1697. -moz-animation: views-field-field-background-image_gwd-keyframes 0.5s linear 0s 1 normal forwards;
  1698. }
  1699. .view-portfolio-isotope li:hover .isotope-filter,
  1700. .view-portfolio li:hover .views-field-field-tags-portfolio,
  1701. .view-portfolio-isotope td:hover .isotope-filter,
  1702. .view-portfolio td:hover .views-field-field-tags-portfolio {
  1703. display: block;
  1704. opacity: 0;
  1705. animation: view-work-gallery 0.5s linear 0.1s 1 normal forwards;
  1706. -webkit-animation: view-work-gallery 0.5s linear 0.1s 1 normal forwards;
  1707. -moz-animation: view-work-gallery 0.5s linear 0.1s 1 normal forwards;
  1708. }
  1709. .view-portfolio-isotope td:hover .views-field-title,
  1710. .view-portfolio-isotope li:hover .views-field-title,
  1711. .view-portfolio td:hover .views-field-title,
  1712. .view-portfolio li:hover .views-field-title {
  1713. display: block;
  1714. animation: view-work-gallery 0.5s linear 0s 1 normal forwards;
  1715. -webkit-animation: view-work-gallery 0.5s linear 0s 1 normal forwards;
  1716. -moz-animation: view-work-gallery 0.5s linear 0s 1 normal forwards;
  1717. }
  1718. .view-portfolio-isotope .isotope-filter,
  1719. .view-portfolio .views-field-field-tags-portfolio div {
  1720. z-index: 5;
  1721. padding-left: 25px;
  1722. padding-top: 25px;
  1723. line-height: 40px;
  1724. }
  1725. .view-portfolio-isotope .views-field-title a,
  1726. .view-portfolio .views-field-title a {
  1727. line-height: normal;
  1728. }
  1729. .view-portfolio-isotope .views-field-title,
  1730. .view-portfolio .views-field-title {
  1731. z-index: 6;
  1732. padding-left: 25px;
  1733. text-transform: uppercase;
  1734. line-height: normal;
  1735. }
  1736. @keyframes view-work-gallery {
  1737. 0% {
  1738. bottom: 0;
  1739. opacity: 0;
  1740. animation-timing-function: linear;
  1741. }
  1742. 100% {
  1743. bottom: 55px;
  1744. opacity: 1;
  1745. animation-timing-function: linear;
  1746. }
  1747. }
  1748. @-webkit-keyframes view-work-gallery {
  1749. 0% {
  1750. bottom: 0;
  1751. opacity: 0;
  1752. -webkit-animation-timing-function: linear;
  1753. }
  1754. 100% {
  1755. bottom: 55px;
  1756. opacity: 1;
  1757. -webkit-animation-timing-function: linear;
  1758. }
  1759. }
  1760. @-moz-keyframes view-work-gallery {
  1761. 0% {
  1762. bottom: 0;
  1763. opacity: 0;
  1764. -moz-animation-timing-function: linear;
  1765. }
  1766. 100% {
  1767. bottom: 55px;
  1768. opacity: 1;
  1769. -moz-animation-timing-function: linear;
  1770. }
  1771. }
  1772. /* =Block Our recent works END*/
  1773. /* =Blocks About us BEGIN*/
  1774. .first-part {
  1775. float: left;
  1776. }
  1777. .second-part {
  1778. float: right;
  1779. }
  1780. .first-part,
  1781. .second-part {
  1782. width: 50%;
  1783. height: 100%;
  1784. }
  1785. .about-us .first-part,
  1786. .our-skills .second-part,
  1787. .company-name .second-part {
  1788. padding: 85px;
  1789. text-align: center;
  1790. }
  1791. .about-us,
  1792. .our-skills {
  1793. height: 500px;
  1794. text-align: center;
  1795. }
  1796. .about-us .second-part {
  1797. background: url('../images/main_1.jpg') 20% 100% no-repeat;
  1798. background-size: cover;
  1799. }
  1800. .our-skills .first-part,
  1801. .company-name .first-part {
  1802. background: url('../images/03_skills_pic.jpg') center no-repeat;
  1803. background-size: cover;
  1804. }
  1805. .text-who {
  1806. max-width: 490px;
  1807. margin: 0 auto 42px;
  1808. }
  1809. .our-skills .team {
  1810. display: block;
  1811. width: 420px;
  1812. margin: 110px auto;
  1813. border: 3px solid #fff;
  1814. height: 305px;
  1815. padding: 70px;
  1816. }
  1817. .our-skills .first-part p {
  1818. font-family: 'Raleway', sans-serif;
  1819. font-size: 80px;
  1820. font-weight: 600;
  1821. color: #fff;
  1822. letter-spacing: 4px;
  1823. line-height: 80px;
  1824. }
  1825. #content .skills-bar-container {
  1826. float: left;
  1827. clear: right;
  1828. width: 100%;
  1829. margin: 0;
  1830. }
  1831. .skills-bar-container p {
  1832. float: left;
  1833. margin: 5px;
  1834. text-align: left;
  1835. display: block;
  1836. }
  1837. .skills-bar-container .percent {
  1838. float: right;
  1839. padding-top: 5px;
  1840. opacity: 0;
  1841. -webkit-transition: opacity 1s ease 4s;
  1842. -moz-transition: opacity 1s ease 4s;
  1843. -o-transition: opacity 1s ease 4s;
  1844. transition: opacity 1s ease 4s;
  1845. }
  1846. .skills-bar-container .percent,
  1847. .skills-bar-container label,
  1848. .our-team .views-field-field-profession-team a {
  1849. font-weight: 500;
  1850. font-family: 'Hind', sans-serif;
  1851. font-size: 15px;
  1852. color: #74797b;
  1853. }
  1854. .skills-bar-container li {
  1855. background: #e9e5e2;
  1856. height: 6px;
  1857. }
  1858. #content .skills-bar-container li {
  1859. padding: 0;
  1860. float: left;
  1861. width: 100%;
  1862. margin: 0 0 20px;
  1863. list-style: none;
  1864. }
  1865. #content .skills-bar-container p {
  1866. margin: 0;
  1867. }
  1868. .progressbar {
  1869. background: #19c2c9;
  1870. background-image: -webkit-linear-gradient(left, #19c2c9 0%, #99ffcc 100%);
  1871. background-image: -moz-linear-gradient(left, #19c2c9 0%, #99ffcc 100%);
  1872. background-image: -o-linear-gradient(left, #19c2c9 0%, #99ffcc 100%);
  1873. background-image: linear-gradient(to right, #19c2c9 0%, #99ffcc 100%);
  1874. height: 100%;
  1875. width: 0;
  1876. -webkit-transition: width 4.50s ease !important;
  1877. -moz-transition: width 4.50s ease !important;
  1878. -o-transition: width 4.50s ease !important;
  1879. transition: width 4.50s ease !important;
  1880. }
  1881. /* =Blocks About us END*/
  1882. /* =Block Our core features */
  1883. #content .view-our-core-features ul {
  1884. max-width: 1200px;
  1885. margin: 0 auto;
  1886. }
  1887. .view-our-core-features li {
  1888. border: none;
  1889. width: 33%;
  1890. display: inline-block;
  1891. }
  1892. .view-our-core-features .views-field-field-icon-features {
  1893. width: 30px;
  1894. float: left;
  1895. }
  1896. .view-our-core-features .views-field-title,
  1897. .view-our-core-features .views-field-body {
  1898. display: table-row;
  1899. }
  1900. .view-our-core-features .views-field-title .field-content,
  1901. .view-our-core-features .views-field-body .field-content {
  1902. margin-left: 15px;
  1903. display: block;
  1904. }
  1905. .view-our-core-features .views-field-body .field-content {
  1906. margin-top: 8px;
  1907. }
  1908. .view-our-core-features .views-field-title,
  1909. .view-our-core-features .views-field-title a,
  1910. .our-team .views-field-title a {
  1911. font-family: 'Raleway', sans-serif;
  1912. font-weight: bold;
  1913. font-size: 20px;
  1914. color: #333;
  1915. letter-spacing: 1px;
  1916. text-transform: none;
  1917. line-height: normal;
  1918. }
  1919. /* =Slider BEGIN */
  1920. .owl-theme .owl-controls {
  1921. margin: 17px 0 20px;
  1922. }
  1923. .owl-theme img {
  1924. display: block;
  1925. }
  1926. .owl-theme .owl-controls .owl-buttons div {
  1927. line-height: 0;
  1928. font-size: 0;
  1929. color: transparent;
  1930. position: absolute;
  1931. top: 50%;
  1932. -webkit-transform: translate(0, -50%);
  1933. -ms-transform: translate(0, -50%);
  1934. transform: translate(0, -50%);
  1935. width: 26px;
  1936. height: 41px;
  1937. border-radius: 0;
  1938. background: transparent;
  1939. }
  1940. .owl-theme .owl-prev {
  1941. left: 0;
  1942. }
  1943. .owl-theme .owl-next {
  1944. right: 0;
  1945. }
  1946. .owl-theme .owl-controls .owl-page {
  1947. width: 14px;
  1948. height: 14px;
  1949. border-radius: 50%;
  1950. margin-right: 4px;
  1951. }
  1952. .owl-theme .owl-controls .owl-page:last-child {
  1953. margin-right: 0;
  1954. }
  1955. .owl-theme .owl-controls .owl-page.active,
  1956. .owl-theme .owl-controls .owl-page:hover {
  1957. background: rgba(255, 255, 255, 0.3);
  1958. }
  1959. .owl-theme .owl-controls .owl-page span {
  1960. background: #fff;
  1961. opacity: 1;
  1962. height: 8px;
  1963. width: 8px;
  1964. margin: 3px;
  1965. }
  1966. .owl-theme .owl-controls .owl-page:hover span,
  1967. .owl-theme .owl-controls .owl-page.active span {
  1968. background: #fff;
  1969. }
  1970. /* =Slider END */
  1971. /* =Main slider BEGIN */
  1972. .view-main-slider {
  1973. min-height: 300px;
  1974. height: 600px;
  1975. cursor: -webkit-grab;
  1976. cursor: grab;
  1977. }
  1978. .view-main-slider .view-content,
  1979. .view-main-slider .owl-carousel,
  1980. .view-main-slider .owl-wrapper-outer,
  1981. .view-main-slider .owl-wrapper,
  1982. .view-main-slider .owl-item,
  1983. .view-main-slider .owl-item > div,
  1984. .view-main-slider .views-field-nothing,
  1985. .view-main-slider .views-field-nothing .field-content,
  1986. .main-slider-content-wrapper,
  1987. .main-slider-image {
  1988. height: 100%;
  1989. }
  1990. body .view-main-slider .view-content,
  1991. .view-main-slider .owl-carousel,
  1992. .view-main-slider .owl-wrapper-outer,
  1993. .view-main-slider .owl-wrapper,
  1994. .view-main-slider .owl-item,
  1995. .view-main-slider .owl-item > div {
  1996. max-width: none;
  1997. padding: 0;
  1998. color: #fff;
  1999. }
  2000. .view-main-slider .views-field-nothing {
  2001. position: relative;
  2002. z-index: 2;
  2003. }
  2004. .view-main-slider .views-field-nothing .field-content {
  2005. display: block;
  2006. text-align: center;
  2007. }
  2008. .view-main-slider .views-field {
  2009. width: 100%;
  2010. max-width: 1920px;
  2011. margin: 0 auto;
  2012. }
  2013. .view-main-slider .owl-item {
  2014. position: relative;
  2015. background: #fff;
  2016. }
  2017. .view-main-slider .views-field-field-background-image {
  2018. position: relative;
  2019. top: 0;
  2020. left: 50%;
  2021. text-align: center;
  2022. margin: 0 auto;
  2023. height: 600px;
  2024. }
  2025. .view-main-slider .views-field-field-background-image .field-content {
  2026. max-height: 100%;
  2027. height: 100%;
  2028. }
  2029. .view-main-slider .owl-item:first-child:before {
  2030. right: 50%;
  2031. }
  2032. .view-main-slider .owl-item:last-child:before {
  2033. left: 100%;
  2034. }
  2035. .view-main-slider .views-field-field-background-image img {
  2036. width: 100%;
  2037. max-height: none;
  2038. position: relative;
  2039. z-index: -1;
  2040. }
  2041. .view-main-slider .owl-controls .owl-buttons div,
  2042. .node-portfolio .owl-controls .owl-buttons div {
  2043. top: 60%;
  2044. z-index: 50;
  2045. margin: 0;
  2046. width: 50px;
  2047. height: 70px;
  2048. background: #000;
  2049. background: rgba(0, 0, 0, 0.85);
  2050. background-repeat: no-repeat;
  2051. }
  2052. .view-main-slider .owl-controls .owl-buttons .owl-prev,
  2053. .node-portfolio .owl-controls .owl-buttons .owl-prev {
  2054. background-image: url(images/main-slider-prev.png);
  2055. background-position: 40% 50%;
  2056. }
  2057. .view-main-slider .owl-controls .owl-buttons .owl-next,
  2058. .node-portfolio .owl-controls .owl-buttons .owl-next {
  2059. background-image: url(images/main-slider-next.png);
  2060. background-position: 60% 50%;
  2061. }
  2062. /* Slideshow animation */
  2063. .view-main-slider .owl-carousel {
  2064. width: 100%;
  2065. max-width: 1920px;
  2066. margin: 0 auto;
  2067. }
  2068. .view-main-slider .active .views-field-field-background-image .field-content {
  2069. position: relative;
  2070. left: -50%;
  2071. width: 1920px;
  2072. opacity: 0;
  2073. animation: views-field-field-background-image_gwd-keyframes 0.5s linear 0s 1 normal forwards;
  2074. -webkit-animation: views-field-field-background-image_gwd-keyframes 0.5s linear 0s 1 normal forwards;
  2075. -moz-animation: views-field-field-background-image_gwd-keyframes 0.5s linear 0s 1 normal forwards;
  2076. }
  2077. @keyframes views-field-field-background-image_gwd-keyframes {
  2078. 0% {
  2079. opacity: 0;
  2080. animation-timing-function: linear;
  2081. }
  2082. 100% {
  2083. opacity: 1;
  2084. animation-timing-function: linear;
  2085. }
  2086. }
  2087. @-webkit-keyframes views-field-field-background-image_gwd-keyframes {
  2088. 0% {
  2089. opacity: 0;
  2090. -webkit-animation-timing-function: linear;
  2091. }
  2092. 100% {
  2093. opacity: 1;
  2094. -webkit-animation-timing-function: linear;
  2095. }
  2096. }
  2097. @-moz-keyframes views-field-field-background-image_gwd-keyframes {
  2098. 0% {
  2099. opacity: 0;
  2100. -moz-animation-timing-function: linear;
  2101. }
  2102. 100% {
  2103. opacity: 1;
  2104. -moz-animation-timing-function: linear;
  2105. }
  2106. }
  2107. .view-main-slider .active .left-text .views-field-field-main-slider-image {
  2108. position: absolute;
  2109. width: 50%;
  2110. top: 150px;
  2111. right: 0;
  2112. }
  2113. .view-main-slider .active .left-text .views-field-field-main-slider-image img {
  2114. display: none;
  2115. }
  2116. .view-main-slider .active .left-text .views-field-field-main-slider-image img:first-child {
  2117. display: block;
  2118. }
  2119. .view-main-slider .active .left-text .views-field-field-main-slider-image .field-content {
  2120. position: absolute;
  2121. opacity: 0;
  2122. width: 100%;
  2123. animation: views-filed-field-main-slider0 0.5s linear 0.5s 1 normal forwards;
  2124. -webkit-animation: views-filed-field-main-slider0 0.5s linear 0.5s 1 normal forwards;
  2125. -moz-animation: views-filed-field-main-slider0 0.5s linear 0.5s 1 normal forwards;
  2126. }
  2127. @keyframes views-filed-field-main-slider0 {
  2128. 0% {
  2129. left: 80px;
  2130. top: 0;
  2131. opacity: 0;
  2132. animation-timing-function: linear;
  2133. }
  2134. 100% {
  2135. top: 0;
  2136. left: 0;
  2137. opacity: 1;
  2138. animation-timing-function: linear;
  2139. }
  2140. }
  2141. @-webkit-keyframes views-filed-field-main-slider0 {
  2142. 0% {
  2143. top: 0;
  2144. left: 80px;
  2145. opacity: 0;
  2146. animation-timing-function: linear;
  2147. }
  2148. 100% {
  2149. top: 0;
  2150. left: 70px;
  2151. opacity: 1;
  2152. animation-timing-function: linear;
  2153. }
  2154. }
  2155. @-moz-keyframes views-filed-field-main-slider0 {
  2156. 0% {
  2157. top: 0;
  2158. left: 80px;
  2159. opacity: 0;
  2160. animation-timing-function: linear;
  2161. }
  2162. 100% {
  2163. top: 0;
  2164. left: 0;
  2165. opacity: 1;
  2166. animation-timing-function: linear;
  2167. }
  2168. }
  2169. .view-main-slider .active .left-text .views-field-title {
  2170. position: absolute;
  2171. top: 205px;
  2172. padding-right: 61px;
  2173. width: 50%;
  2174. opacity: 0;
  2175. left: 0;
  2176. text-align: right;
  2177. animation: views-field-title0 1s linear 0.5s 1 normal forwards;
  2178. -webkit-animation: views-field-title0 0.5s linear 1s 1 normal forwards;
  2179. -moz-animation: views-field-title0 0.5s linear 1s 1 normal forwards;
  2180. }
  2181. .view-main-slider .active .left-text .views-field-title .field-content {
  2182. color: #fff;
  2183. text-transform: uppercase;
  2184. text-align: center;
  2185. padding: 0 20px;
  2186. width: 520px;
  2187. height: 72px;
  2188. background: #19c2c9;
  2189. font-family: 'Raleway', sans-serif;
  2190. font-weight: bold;
  2191. font-size: 45px;
  2192. letter-spacing: 1.13px;
  2193. display: inline-table;
  2194. }
  2195. @keyframes views-field-title0 {
  2196. 0% {
  2197. left: -80px;
  2198. opacity: 0;
  2199. animation-timing-function: linear;
  2200. }
  2201. 100% {
  2202. left: 0;
  2203. opacity: 1;
  2204. animation-timing-function: linear;
  2205. }
  2206. }
  2207. @-webkit-keyframes views-field-title0 {
  2208. 0% {
  2209. left: -80px;
  2210. opacity: 0;
  2211. animation-timing-function: linear;
  2212. }
  2213. 100% {
  2214. left: 0;
  2215. opacity: 1;
  2216. animation-timing-function: linear;
  2217. }
  2218. }
  2219. @-moz-keyframes views-field-title0 {
  2220. 0% {
  2221. left: -80px;
  2222. opacity: 0;
  2223. animation-timing-function: linear;
  2224. }
  2225. 100% {
  2226. left: 0;
  2227. opacity: 1;
  2228. animation-timing-function: linear;
  2229. }
  2230. }
  2231. .view-main-slider .active .left-text .views-field-body {
  2232. position: absolute;
  2233. top: 312px;
  2234. padding-right: 120px;
  2235. width: 50%;
  2236. opacity: 0;
  2237. animation: views-field-body0 0.5s linear 1.5s 1 normal forwards;
  2238. -webkit-animation: views-field-body0 0.5s linear 1.5s 1 normal forwards;
  2239. -moz-animation: views-field-body0 0.5s linear 1.5s 1 normal forwards;
  2240. }
  2241. .view-main-slider .active .left-text .views-field-body .field-content p {
  2242. width: 420px;
  2243. font-family: 'Hind', sans-serif;
  2244. font-weight: 600;
  2245. font-size: 18px;
  2246. line-height: 28px;
  2247. float: right;
  2248. color: #fff;
  2249. }
  2250. @keyframes views-field-body0 {
  2251. 0% {
  2252. top: 392px;
  2253. opacity: 0;
  2254. animation-timing-function: linear;
  2255. }
  2256. 100% {
  2257. top: 312px;
  2258. opacity: 1;
  2259. animation-timing-function: linear;
  2260. }
  2261. }
  2262. @-webkit-keyframes views-field-body0 {
  2263. 0% {
  2264. top: 392px;
  2265. opacity: 0;
  2266. animation-timing-function: linear;
  2267. }
  2268. 100% {
  2269. top: 312px;
  2270. opacity: 1;
  2271. animation-timing-function: linear;
  2272. }
  2273. }
  2274. @-moz-keyframes views-field-body0 {
  2275. 0% {
  2276. top: 392px;
  2277. opacity: 180;
  2278. animation-timing-function: linear;
  2279. }
  2280. 100% {
  2281. top: 312px;
  2282. opacity: 1;
  2283. animation-timing-function: linear;
  2284. }
  2285. }
  2286. .view-main-slider .active .right-text .views-field-field-main-slider-image {
  2287. position: absolute;
  2288. width: 50%;
  2289. top: 30%;
  2290. left: 0;
  2291. right: inherit;
  2292. }
  2293. .view-main-slider .active .right-text .views-field-field-main-slider-image img {
  2294. float: right;
  2295. }
  2296. .view-main-slider .active .right-text .views-field-field-main-slider-image .field-content {
  2297. position: absolute;
  2298. opacity: 0;
  2299. width: 100%;
  2300. animation: views-filed-field-main-slider1 0.5s linear 0.5s 1 normal forwards;
  2301. -webkit-animation: views-filed-field-main-slider1 0.5s linear 0.5s 1 normal forwards;
  2302. -moz-animation: views-filed-field-main-slider1 0.5s linear 0.5s 1 normal forwards;
  2303. }
  2304. @keyframes views-filed-field-main-slider1 {
  2305. 0% {
  2306. opacity: 0;
  2307. left: -80px;
  2308. animation-timing-function: linear;
  2309. }
  2310. 100% {
  2311. opacity: 1;
  2312. left: 0;
  2313. animation-timing-function: linear;
  2314. }
  2315. }
  2316. @-webkit-keyframes views-filed-field-main-slider1 {
  2317. 0% {
  2318. opacity: 0;
  2319. left: -80px;
  2320. -webkit-animation-timing-function: linear;
  2321. }
  2322. 100% {
  2323. opacity: 1;
  2324. left: 0;
  2325. -webkit-animation-timing-function: linear;
  2326. }
  2327. }
  2328. @-moz-keyframes views-filed-field-main-slider1 {
  2329. 0% {
  2330. opacity: 0;
  2331. left: -80px;
  2332. -moz-animation-timing-function: linear;
  2333. }
  2334. 100% {
  2335. opacity: 1;
  2336. left: 0;
  2337. -moz-animation-timing-function: linear;
  2338. }
  2339. }
  2340. .view-main-slider .active .right-text .views-field-title {
  2341. position: absolute;
  2342. top: 205px;
  2343. padding-left: 65px;
  2344. width: 50%;
  2345. opacity: 0;
  2346. right: 0;
  2347. text-align: left;
  2348. padding-right: 0;
  2349. left: initial;
  2350. animation: views-field-title1 0.5s linear 1s 1 normal forwards;
  2351. -webkit-animation: views-field-title1 0.5s linear 1s 1 normal forwards;
  2352. -moz-animation: views-field-title1 0.5s linear 1s 1 normal forwards;
  2353. }
  2354. .view-main-slider .active .right-text .views-field-title .field-content {
  2355. text-transform: uppercase;
  2356. text-align: right;
  2357. width: 495px;
  2358. height: 72px;
  2359. color: #19c2c9;
  2360. font-family: 'Raleway', sans-serif;
  2361. font-weight: bold;
  2362. font-size: 45px;
  2363. letter-spacing: 1.13px;
  2364. line-height: 65px;
  2365. padding: 0;
  2366. background: none;
  2367. }
  2368. @keyframes views-field-title1 {
  2369. 0% {
  2370. right: -80px;
  2371. opacity: 0;
  2372. animation-timing-function: linear;
  2373. }
  2374. 100% {
  2375. right: 0;
  2376. opacity: 1;
  2377. animation-timing-function: linear;
  2378. }
  2379. }
  2380. @-webkit-keyframes views-field-title1 {
  2381. 0% {
  2382. right: -80px;
  2383. opacity: 0;
  2384. animation-timing-function: linear;
  2385. }
  2386. 100% {
  2387. right: 0;
  2388. opacity: 1;
  2389. animation-timing-function: linear;
  2390. }
  2391. }
  2392. @-moz-keyframes views-field-title1 {
  2393. 0% {
  2394. right: -80px;
  2395. opacity: 0;
  2396. animation-timing-function: linear;
  2397. }
  2398. 100% {
  2399. right: 0;
  2400. opacity: 1;
  2401. animation-timing-function: linear;
  2402. }
  2403. }
  2404. .view-main-slider .active .right-text .views-field-body {
  2405. position: absolute;
  2406. top: 268px;
  2407. padding-left: 65px;
  2408. width: 50%;
  2409. right: 0;
  2410. opacity: 1;
  2411. animation: none;
  2412. -webkit-animation: none;
  2413. -moz-animation: none;
  2414. }
  2415. .view-main-slider .active .right-text .views-field-body .title-ul {
  2416. text-transform: uppercase;
  2417. }
  2418. .view-main-slider .active .right-text .views-field-body .field-content {
  2419. color: #333;
  2420. font-size: 28px;
  2421. font-family: 'Hind', sans-serif;
  2422. line-height: 65px;
  2423. width: 495px;
  2424. position: relative;
  2425. opacity: 0;
  2426. animation: views-field-body1 0.5s linear 1.5s 1 normal forwards;
  2427. -webkit-animation: views-field-body1 0.5s linear 1.5s 1 normal forwards;
  2428. -moz-animation: views-field-body1 0.5s linear 1.5s 1 normal forwards;
  2429. }
  2430. #content .view-main-slider .active .right-text .views-field-body ul {
  2431. font-size: 16px;
  2432. font-family: 'Hind', sans-serif;
  2433. font-weight: 500;
  2434. width: 495px;
  2435. opacity: 0;
  2436. position: relative;
  2437. line-height: 30px;
  2438. margin: 0;
  2439. animation: views-field-body1 0.5s linear 1.7s 1 normal forwards;
  2440. -webkit-animation: views-field-body1 0.5s linear 1.7s 1 normal forwards;
  2441. -moz-animation: views-field-body1 0.5s linear 1.7s 1 normal forwards;
  2442. }
  2443. #content .view-main-slider .active .right-text .views-field-body ul li {
  2444. background: url('../images/check.png') 0 50% no-repeat;
  2445. list-style: none;
  2446. padding: 0 28px;
  2447. margin: 0;
  2448. color: #74797b;
  2449. font-weight: 600;
  2450. }
  2451. @keyframes views-field-body1 {
  2452. 0% {
  2453. top: 80px;
  2454. opacity: 0;
  2455. animation-timing-function: linear;
  2456. }
  2457. 100% {
  2458. top: 0;
  2459. opacity: 1;
  2460. animation-timing-function: linear;
  2461. }
  2462. }
  2463. @-webkit-keyframes views-field-body1 {
  2464. 0% {
  2465. top: 80px;
  2466. opacity: 0;
  2467. animation-timing-function: linear;
  2468. }
  2469. 100% {
  2470. top: 0;
  2471. opacity: 1;
  2472. animation-timing-function: linear;
  2473. }
  2474. }
  2475. @-moz-keyframes views-field-body1 {
  2476. 0% {
  2477. top: 80px;
  2478. opacity: 0;
  2479. animation-timing-function: linear;
  2480. }
  2481. 100% {
  2482. top: 0;
  2483. opacity: 1;
  2484. animation-timing-function: linear;
  2485. }
  2486. }
  2487. .view-main-slider .active .centre-text .views-field-title .field-content {
  2488. text-transform: uppercase;
  2489. color: #fff;
  2490. text-align: center;
  2491. font-family: 'Raleway', sans-serif;
  2492. font-size: 56px;
  2493. letter-spacing: 1.13px;
  2494. line-height: 40px;
  2495. right: 50%;
  2496. position: relative;
  2497. padding: 0;
  2498. background: none;
  2499. width: auto;
  2500. height: auto;
  2501. }
  2502. .view-main-slider .active .centre-text .views-field-title:after {
  2503. content: '';
  2504. background: url('../images/line.png') 50% no-repeat;
  2505. height: 50px;
  2506. position: relative;
  2507. top: -10px;
  2508. left: -50%;
  2509. display: block;
  2510. }
  2511. .view-main-slider .active .centre-text .views-field-title {
  2512. position: absolute;
  2513. top: 185px;
  2514. opacity: 0;
  2515. text-align: center;
  2516. width: 600px;
  2517. margin: 0 auto;
  2518. left: 50%;
  2519. padding: 0;
  2520. line-height: 60px;
  2521. animation: views-field-title2 0.5s linear 0.5s 1 normal forwards;
  2522. -webkit-animation: views-field-title2 0.5s linear 0.5s 1 normal forwards;
  2523. -moz-animation: views-field-title2 0.5s linear 0.5s 1 normal forwards;
  2524. }
  2525. @keyframes views-field-title2 {
  2526. 0% {
  2527. top: 100px;
  2528. opacity: 0;
  2529. animation-timing-function: linear;
  2530. }
  2531. 100% {
  2532. top: 165px;
  2533. opacity: 1;
  2534. animation-timing-function: linear;
  2535. }
  2536. }
  2537. @-webkit-keyframes views-field-title2 {
  2538. 0% {
  2539. top: 100px;
  2540. opacity: 0;
  2541. animation-timing-function: linear;
  2542. }
  2543. 100% {
  2544. top: 165px;
  2545. opacity: 1;
  2546. animation-timing-function: linear;
  2547. }
  2548. }
  2549. @-moz-keyframes views-field-title2 {
  2550. 0% {
  2551. top: 100px;
  2552. opacity: 0;
  2553. animation-timing-function: linear;
  2554. }
  2555. 100% {
  2556. top: 165px;
  2557. opacity: 1;
  2558. animation-timing-function: linear;
  2559. }
  2560. }
  2561. .view-main-slider .active .centre-text .views-field-body .field-content p {
  2562. color: #fff;
  2563. font-family: 'Hind', sans-serif;
  2564. font-weight: 600;
  2565. font-size: 16px;
  2566. line-height: 25px;
  2567. right: 50%;
  2568. height: 130px;
  2569. position: relative;
  2570. overflow: hidden;
  2571. -webkit-column-width: 230px;
  2572. -moz-column-width: 200px;
  2573. column-width: 200px;
  2574. -webkit-column-count: 2;
  2575. -moz-column-count: 2;
  2576. column-count: 2;
  2577. -webkit-column-gap: 30px;
  2578. -moz-column-gap: 30px;
  2579. column-gap: 30px;
  2580. width: auto;
  2581. float: none;
  2582. }
  2583. .view-main-slider .active .centre-text .views-field-body {
  2584. top: 380px;
  2585. position: absolute;
  2586. width: 690px;
  2587. left: 50%;
  2588. text-align: justify;
  2589. opacity: 0;
  2590. padding: 0;
  2591. animation: views-field-body2 0.5s linear 1s 1 normal forwards;
  2592. -webkit-animation: views-field-body2 0.5s linear 1s 1 normal forwards;
  2593. -moz-animation: views-field-body2 0.5s linear 1s 1 normal forwards;
  2594. }
  2595. @keyframes views-field-body2 {
  2596. 0% {
  2597. top: 470px;
  2598. opacity: 0;
  2599. animation-timing-function: linear;
  2600. }
  2601. 100% {
  2602. top: 360px;
  2603. opacity: 1;
  2604. animation-timing-function: linear;
  2605. }
  2606. }
  2607. @-webkit-keyframes views-field-body2 {
  2608. 0% {
  2609. top: 470px;
  2610. opacity: 0;
  2611. animation-timing-function: linear;
  2612. }
  2613. 100% {
  2614. top: 360px;
  2615. opacity: 1;
  2616. animation-timing-function: linear;
  2617. }
  2618. }
  2619. @-moz-keyframes views-field-body2 {
  2620. 0% {
  2621. top: 470px;
  2622. opacity: 180;
  2623. animation-timing-function: linear;
  2624. }
  2625. 100% {
  2626. top: 360px;
  2627. opacity: 1;
  2628. animation-timing-function: linear;
  2629. }
  2630. }
  2631. /* =Main slider END */
  2632. /* =Block Testimonials BEGIN */
  2633. #block-views-testimonials-block {
  2634. background: url('../images/testimonials/bg_testimonials.jpg');
  2635. padding-bottom: 90px;
  2636. padding-top: 1px;
  2637. margin-top: 60px;
  2638. }
  2639. #block-views-testimonials-block h2 {
  2640. margin-bottom: 50px;
  2641. margin-top: 70px;
  2642. }
  2643. .view-testimonials .owl-carousel {
  2644. width: 700px;
  2645. margin: 0 auto;
  2646. text-align: center;
  2647. background: #fff;
  2648. box-shadow: 0 0 10px #ccc;
  2649. -webkit-box-shadow: 0 0 10px #ccc;
  2650. -moz-box-shadow: 0 0 10px #ccc;
  2651. padding: 60px;
  2652. }
  2653. .view-testimonials .owl-theme .owl-controls .owl-buttons .owl-prev,
  2654. .view-testimonials .owl-theme .owl-controls .owl-buttons .owl-next {
  2655. background: url('../images/testimonials/arrows.png');
  2656. opacity: 1;
  2657. }
  2658. .view-testimonials .owl-theme .owl-controls .owl-buttons .owl-prev {
  2659. transform: rotate(180deg);
  2660. -o-transform: rotate(180deg);
  2661. -ms-transform: rotate(180deg);
  2662. -moz-transform: rotate(180deg);
  2663. -webkit-transform: rotate(180deg);
  2664. transform-origin: 13px 10px;
  2665. left: -90px;
  2666. }
  2667. .view-testimonials .owl-theme .owl-controls .owl-buttons .owl-next {
  2668. right: -90px;
  2669. }
  2670. .view-testimonials .owl-theme .owl-controls .owl-buttons .owl-prev:hover,
  2671. .view-testimonials .owl-theme .owl-controls .owl-buttons .owl-next:hover {
  2672. background: url('../images/testimonials/arrows_hover.png');
  2673. opacity: 1;
  2674. }
  2675. .view-testimonials .views-field-field-photo img {
  2676. margin: 0 auto;
  2677. }
  2678. #block-views-testimonials-block .views-field-body p {
  2679. margin-top: 30px;
  2680. margin-bottom: 0;
  2681. font-family: 'Raleway', sans-serif;
  2682. font-style: italic;
  2683. line-height: 30px;
  2684. }
  2685. .view-testimonials .views-field-title {
  2686. text-transform: uppercase;
  2687. font-family: 'Hind', sans-serif;
  2688. font-size: 15px;
  2689. color: #3a3a3a;
  2690. letter-spacing: 1.13px;
  2691. line-height: 40px;
  2692. margin-top: 20px;
  2693. }
  2694. .view-testimonials .owl-item.active {
  2695. opacity: 0;
  2696. animation: testimonials 1s linear 0s 1 normal forwards;
  2697. }
  2698. @keyframes testimonials {
  2699. 0% {
  2700. opacity: 0;
  2701. }
  2702. 100% {
  2703. opacity: 1;
  2704. }
  2705. }
  2706. /* =Block Testimonials END */
  2707. /* =Block Clients BEGIN */
  2708. #block-views-clients-block {
  2709. background: #19c2c9;
  2710. }
  2711. .view-clients .owl-carousel {
  2712. width: 1000px;
  2713. margin: 0 auto;
  2714. padding-top: 50px;
  2715. }
  2716. .view-clients img {
  2717. margin: 0 auto;
  2718. }
  2719. /* =Block Clients END */
  2720. /* =Block From the blog BEGIN*/
  2721. .front .region-content-aside {
  2722. background: #f8f8f8;
  2723. }
  2724. .front #page-wrapper .view-blog ul {
  2725. max-width: 1200px;
  2726. margin: 0 auto 60px;
  2727. }
  2728. .front .view-blog tr {
  2729. display: flex;
  2730. }
  2731. .front .view-blog li {
  2732. background: url('../images/bg-post.png');
  2733. border: 15px solid #f8f8f8;
  2734. padding: 35px 20px;
  2735. width: 33%;
  2736. display: inline-block;
  2737. }
  2738. .front .view-blog li:hover img,
  2739. .front .view-blog td:hover img {
  2740. -ms-transform: scale(1.2);
  2741. -webkit-transform: scale(1.2);
  2742. transform: scale(1.2);
  2743. }
  2744. .front .view-blog li .views-field-field-block-image-full .field-content,
  2745. .front .view-blog td .views-field-field-block-image-full .field-content {
  2746. overflow: hidden;
  2747. position: relative;
  2748. }
  2749. .front .view-blog .views-field-view-node {
  2750. margin: 30px 0 15px 0;
  2751. }
  2752. .front .view-blog .views-field-view-node a {
  2753. text-align: center;
  2754. color: #fff;
  2755. font-family: 'Hind', sans-serif;
  2756. font-size: 15px;
  2757. font-weight: bold;
  2758. letter-spacing: 1.13px;
  2759. text-transform: uppercase;
  2760. background: #19c2c9;
  2761. padding: 10px 30px;
  2762. }
  2763. /* =Block From the blog END*/
  2764. /* =Blog page BEGIN */
  2765. #content .view-blog .item-list .pager {
  2766. margin: 40px 0 0 30px;
  2767. }
  2768. .view-blog li {
  2769. background-color: #fff;
  2770. }
  2771. .view-blog li:hover .views-field-field-blog-image img {
  2772. -ms-transform: scale(1.2);
  2773. -webkit-transform: scale(1.2);
  2774. transform: scale(1.2);
  2775. }
  2776. .view-blog li:hover .views-field-field-blog-image {
  2777. height: 83.333%;
  2778. }
  2779. .view-blog li .views-field-field-blog-image {
  2780. display: block;
  2781. overflow: hidden;
  2782. position: relative;
  2783. margin-bottom: 35px;
  2784. }
  2785. .view-blog li .views-field-field-blog-image a:after,
  2786. .front .view-blog li .views-field-field-block-image-full .field-content:after {
  2787. content: '';
  2788. display: block;
  2789. position: absolute;
  2790. width: 100%;
  2791. height: 100%;
  2792. top: 0;
  2793. opacity: 0;
  2794. -webkit-transition: all .4s ease-in-out;
  2795. transition: all .4s ease-in-out;
  2796. background: rgba(0,0,0,0.4);
  2797. }
  2798. .view-blog li:hover .views-field-field-blog-image a:after,
  2799. .front .view-blog li:hover .views-field-field-block-image-full .field-content:after {
  2800. opacity: 1;
  2801. }
  2802. .view-blog li .views-field-field-blog-image img,
  2803. .front .view-blog li:hover img {
  2804. -webkit-transition: all .4s linear;
  2805. transition: all .4s linear;
  2806. width: 100%;
  2807. object-fit: cover;
  2808. }
  2809. .front .view-blog td img {
  2810. width: auto;
  2811. height: auto;
  2812. }
  2813. .page-blog #content .view-blog .view-content ul li {
  2814. display: inline-block;
  2815. margin: 15px 40px 0 15px;
  2816. vertical-align: top;
  2817. list-style: none;
  2818. }
  2819. .view-blog .views-field-title {
  2820. display: block;
  2821. font-size: 20px;
  2822. }
  2823. .front .view-blog .views-field-title a {
  2824. line-height: normal;
  2825. }
  2826. .front .view-blog .views-field-title {
  2827. line-height: normal;
  2828. margin-top: 20px;
  2829. margin-bottom: 10px;
  2830. }
  2831. .view-blog .views-field-field-blog-image {
  2832. width: 100%;
  2833. height: auto;
  2834. }
  2835. .view-blog .views-field-field-blog-image .field-content {
  2836. overflow: hidden;
  2837. }
  2838. .view-blog .views-field-field-blog-image img {
  2839. display: block;
  2840. }
  2841. .view-blog .views-field-created {
  2842. margin-left: 30px;
  2843. }
  2844. #content .view-blog ul {
  2845. margin: 0;
  2846. }
  2847. #content .view-blog .views-field-title,
  2848. #content .view-blog .views-field-title a {
  2849. font-size: 22px;
  2850. font-family: 'Hind', sans-serif;
  2851. color: #000;
  2852. line-height: 25px;
  2853. text-transform: none;
  2854. }
  2855. #content .view-blog .views-field-title:hover a {
  2856. color: #19c2c9;
  2857. }
  2858. #content .view-blog .views-field-title {
  2859. margin: 10px 30px;
  2860. }
  2861. .view-blog .views-field-body span p {
  2862. margin: 0 30px;
  2863. }
  2864. #content .view-blog .views-field-view-node {
  2865. padding-bottom: 10px;
  2866. display: block;
  2867. }
  2868. #content .view-blog .views-field-view-node a:hover:after {
  2869. content: "\f105";
  2870. font-family: 'FontAwesome';
  2871. display: inline-block;
  2872. padding-left: 10px;
  2873. font-size: 18px;
  2874. line-height: 15px;
  2875. }
  2876. #content .view-blog .views-field-view-node span {
  2877. font-weight: bold;
  2878. font-size: 15px;
  2879. text-transform: uppercase;
  2880. letter-spacing: 1.13px;
  2881. line-height: 50px;
  2882. }
  2883. .about-us-blog .block-content:before {
  2884. content: '';
  2885. width: 100%;
  2886. height: 190px;
  2887. display: block;
  2888. background: url('../images/03_skills_pic.jpg') 50% no-repeat;
  2889. background-size: cover;
  2890. margin-bottom: 20px;
  2891. }
  2892. .about-us-blog h2,
  2893. .recent-post h2 {
  2894. font-family: 'Raleway', sans-serif;
  2895. font-size: 24px;
  2896. color: #2d2d2d;
  2897. letter-spacing: 1.2px;
  2898. line-height: 40px;
  2899. }
  2900. #columns .recent-post ul {
  2901. margin: 0;
  2902. }
  2903. .recent-post li a {
  2904. font-size: 18px;
  2905. color: #74797b;
  2906. display: block;
  2907. }
  2908. .recent-post li a:hover {
  2909. color: #19c2c9;
  2910. }
  2911. #columns .recent-post li {
  2912. list-style: none;
  2913. margin-bottom: 20px;
  2914. }
  2915. .addtoany_list.a2a_kit_size_32 a > span {
  2916. background: url('../images/Share.png') 50% no-repeat;
  2917. width: 20px;
  2918. }
  2919. .addtoany_list.a2a_kit_size_32 a:hover > span {
  2920. background: url('../images/Share_hover.png') 50% no-repeat;
  2921. }
  2922. .a2a_kit a {
  2923. margin-bottom: 0;
  2924. }
  2925. .a2a_menu.a2a_mini {
  2926. width: 60px;
  2927. min-width: 0;
  2928. border: none;
  2929. border-radius: 0;
  2930. }
  2931. .a2a_menu.a2a_mini:before {
  2932. content: url('../images/menu_underline/line.png');
  2933. height: 10px;
  2934. display: block;
  2935. }
  2936. .a2apage_wide {
  2937. display: none;
  2938. }
  2939. .a2a_mini_services a.a2a_i {
  2940. border-bottom: 1px solid #eee;
  2941. width: 60px;
  2942. padding: 0;
  2943. }
  2944. .addtoany_list.a2a_kit_size_32 > a:hover {
  2945. color: #19c2c9;
  2946. }
  2947. a.a2a_i span.a2a_svg {
  2948. background: none;
  2949. width: 60px;
  2950. margin: 0;
  2951. border-radius: 0;
  2952. }
  2953. a.a2a_i span.a2a_svg:before {
  2954. width: 60px;
  2955. font-size: 15px;
  2956. font-family: 'FontAwesome';
  2957. display: block;
  2958. text-align: center;
  2959. color: #a9a9a9;
  2960. background: #fff;
  2961. }
  2962. a:hover.a2a_i span.a2a_svg:before {
  2963. color: white;
  2964. }
  2965. span.a2a_s_facebook:before {
  2966. content: '\f09a';
  2967. }
  2968. a:hover span.a2a_s_facebook:before {
  2969. background: #3b5999;
  2970. }
  2971. span.a2a_s_twitter:before {
  2972. content: '\f099';
  2973. }
  2974. a:hover span.a2a_s_twitter:before {
  2975. background: #55acee;
  2976. }
  2977. span.a2a_s_linkedin:before {
  2978. content: '\f0e1';
  2979. }
  2980. a:hover span.a2a_s_linkedin:before {
  2981. background: #0087be;
  2982. }
  2983. span.a2a_s_pinterest:before {
  2984. content: '\f231';
  2985. }
  2986. a:hover span.a2a_s_pinterest:before {
  2987. background: #c51721;
  2988. }
  2989. .node-blog .view-author {
  2990. background: #f9f9f9;
  2991. margin: 40px 0;
  2992. padding: 15px 40px 5px;
  2993. }
  2994. .node-blog .view-author .views-field-field-photo-team,
  2995. .comment .user-picture {
  2996. width: 120px;
  2997. height: 120px;
  2998. float: left;
  2999. }
  3000. .node-blog .view-author .views-field:not(.views-field-field-photo-team) {
  3001. padding-left: 150px;
  3002. }
  3003. .view-author .views-field-title,
  3004. #content .view-author .views-field-title span,
  3005. .comment .author-datetime a {
  3006. font-family: 'Hind', sans-serif;
  3007. font-size: 18px;
  3008. text-transform: none;
  3009. line-height: 25px;
  3010. margin-bottom: 5px;
  3011. }
  3012. .node-blog .view-author .views-field img,
  3013. .comment .user-picture img {
  3014. border-radius: 50%;
  3015. }
  3016. #content .view-author li {
  3017. list-style: none;
  3018. }
  3019. .view-author .views-field-field-social a {
  3020. color: #a9a9a9;
  3021. padding-right: 20px;
  3022. font-size: 18px;
  3023. }
  3024. #comments .comment,
  3025. .indented {
  3026. padding: 40px 0;
  3027. border-bottom: 1px solid #e1e1e1;
  3028. border-top: 1px solid #e1e1e1;
  3029. clear: both;
  3030. }
  3031. #comments .indented .comment {
  3032. border: none;
  3033. }
  3034. #comments .comment + .indented {
  3035. border-top: none;
  3036. }
  3037. #comments .indented + a + .comment {
  3038. border-top: none;
  3039. }
  3040. .comment .author-datetime:after,
  3041. .comment .author-datetime:before {
  3042. content: '';
  3043. }
  3044. .comment .author-datetime a {
  3045. display: block;
  3046. color: #333;
  3047. }
  3048. .comment .clearfix {
  3049. float: right;
  3050. }
  3051. .comment .comment-content {
  3052. padding-left: 160px;
  3053. padding-top: 10px;
  3054. }
  3055. .comment .author-datetime {
  3056. color: #19c2c9;
  3057. padding-left: 30px;
  3058. font-size: 13px;
  3059. }
  3060. .indented {
  3061. padding: 0 0 0 80px;
  3062. margin-left: 0;
  3063. }
  3064. #content .comment .clearfix li {
  3065. padding: 0 10px;
  3066. }
  3067. #content .comment .clearfix li a {
  3068. color: #74797b;
  3069. }
  3070. .comment-form .form-item-name,
  3071. .comment-form .form-item-mail {
  3072. width: 48%;
  3073. }
  3074. .comment-form .form-item-name input,
  3075. .comment-form .form-item-mail input {
  3076. width: 100%;
  3077. }
  3078. .comment-form .form-item-name {
  3079. float: left;
  3080. }
  3081. .comment-form .form-item-mail {
  3082. float: right;
  3083. }
  3084. .comment-form .form-actions input {
  3085. margin: 20px 0 0;
  3086. display: block;
  3087. float: right;
  3088. width: 150px;
  3089. }
  3090. /* =Blog page END */
  3091. /* Portfolio page BEGIN */
  3092. #content .view-portfolio-isotope li,
  3093. #content .view-portfolio li {
  3094. list-style: none;
  3095. }
  3096. #content .view-portfolio-isotope li,
  3097. #content .view-portfolio .view-content li {
  3098. float: left;
  3099. width: 33.33333%;
  3100. max-width: none;
  3101. margin: 0 0 -6px 0;
  3102. }
  3103. #content .view-portfolio-isotope.two-columns li,
  3104. #content .view-portfolio.two-columns .view-content li {
  3105. float: left;
  3106. width: 44%;
  3107. margin: 3%;
  3108. }
  3109. #content .view-portfolio-isotope.two-columns .view-content ul,
  3110. #content .view-portfolio.two-columns .view-content ul {
  3111. max-width: 1200px;
  3112. margin: 0 auto;
  3113. }
  3114. #content .item-list .pager.pager-load-more li {
  3115. width: auto;
  3116. height: auto;
  3117. margin: 0 auto;
  3118. display: flex;
  3119. max-width: none;
  3120. }
  3121. #content .item-list ul.pager-load-more {
  3122. margin: 0 auto;
  3123. }
  3124. #content .item-list .pager-load-more li a {
  3125. width: auto;
  3126. height: auto;
  3127. margin: 50px auto 0;
  3128. padding: 5px 30px 0;
  3129. border: none;
  3130. text-transform: uppercase;
  3131. background: #333;
  3132. color: white;
  3133. font-size: 15px;
  3134. font-weight: bold;
  3135. letter-spacing: 1.13px;
  3136. }
  3137. #content .item-list .pager-load-more li a:hover {
  3138. background: #19c2c9;
  3139. }
  3140. .field-name-field-portfolio-image {
  3141. width: 65%;
  3142. float: right;
  3143. }
  3144. .field-name-field-portfolio-image img {
  3145. width: 100%;
  3146. height: 100%;
  3147. }
  3148. .field-name-field-brand-name,
  3149. .node-portfolio .field-name-body,
  3150. .node-portfolio .field-name-field-date,
  3151. .field-name-field-time-work,
  3152. .field-name-field-tags-portfolio {
  3153. width: 35%;
  3154. }
  3155. .field-name-field-portfolio-image .owl-pagination {
  3156. display: none;
  3157. }
  3158. .node-portfolio .owl-controls .owl-buttons div {
  3159. top: 47%;
  3160. }
  3161. .field-name-field-brand-name {
  3162. font-size: 32px;
  3163. font-weight: bold;
  3164. }
  3165. .node-portfolio .field-name-body {
  3166. padding: 20px 50px 20px 0;
  3167. }
  3168. .node-portfolio .field-name-field-date,
  3169. .field-name-field-time-work,
  3170. .field-name-field-tags-portfolio .field-item {
  3171. font-size: 15px;
  3172. height: 23px;
  3173. margin-bottom: 15px;
  3174. padding-left: 30px;
  3175. color: #555;
  3176. }
  3177. .field-name-field-tags-portfolio a {
  3178. color: #555;
  3179. }
  3180. .node-portfolio .field-name-field-date {
  3181. margin-top: 10px;
  3182. background: url('../images/portfolio_ico/date.png') no-repeat;
  3183. }
  3184. .field-name-field-time-work {
  3185. background: url('../images/portfolio_ico/time.png') no-repeat;
  3186. }
  3187. .field-name-field-tags-portfolio .field-item {
  3188. background: url('../images/portfolio_ico/options.png') no-repeat;
  3189. }
  3190. .field-name-field-tags-portfolio .field-item.design {
  3191. background: url('../images/portfolio_ico/options_2.png') no-repeat;
  3192. }
  3193. #content .node-portfolio .flippy {
  3194. clear: both;
  3195. padding-top: 45px;
  3196. }
  3197. #content .flippy .prev:before {
  3198. content: '';
  3199. display: inline-block;
  3200. height: 24px;
  3201. background: url('../images/nav_default.png') 0 100% no-repeat;
  3202. padding-left: 20px;
  3203. }
  3204. #content .flippy .prev:hover:before {
  3205. background: url('../images/nav_active.png') 100% 0 no-repeat;
  3206. -webkit-transform: rotate(180deg);
  3207. -moz-transform: rotate(180deg);
  3208. -ms-transform: rotate(180deg);
  3209. -o-transform: rotate(180deg);
  3210. transform: rotate(180deg);
  3211. }
  3212. #content .flippy .next:after {
  3213. content: '';
  3214. height: 24px;
  3215. display: inline-block;
  3216. background: url('../images/nav_default.png') 0 0 no-repeat;
  3217. padding-left: 20px;
  3218. -webkit-transform: rotate(180deg);
  3219. -moz-transform: rotate(180deg);
  3220. -ms-transform: rotate(180deg);
  3221. -o-transform: rotate(180deg);
  3222. transform: rotate(180deg);
  3223. }
  3224. #content .flippy .next:hover:after {
  3225. background: url('../images/nav_active.png') 100% 100% no-repeat;
  3226. -webkit-transform: rotate(0deg);
  3227. -moz-transform: rotate(0deg);
  3228. -ms-transform: rotate(0deg);
  3229. -o-transform: rotate(0deg);
  3230. transform: rotate(0deg);
  3231. }
  3232. .node-portfolio .flippy li a {
  3233. font-size: 15px;
  3234. color: #a1a1a1;
  3235. letter-spacing: 1.13px;
  3236. line-height: 25px;
  3237. font-weight: bold;
  3238. text-transform: uppercase;
  3239. }
  3240. .node-portfolio .flippy li a:hover {
  3241. color: #19c2c9;
  3242. }
  3243. .node-portfolio .flippy li.next {
  3244. float: right;
  3245. }
  3246. #content {
  3247. position: relative;
  3248. }
  3249. .back-to {
  3250. position: absolute;
  3251. width: 100%;
  3252. max-width: 1200px;
  3253. }
  3254. .back-to p {
  3255. position: relative;
  3256. top: -55px;
  3257. width: 300px;
  3258. margin: 0 auto;
  3259. }
  3260. /* Portfolio page END */
  3261. /* Contact us page BEGIN */
  3262. body.section-contact-us .region-secondary-content {
  3263. background: none;
  3264. }
  3265. body.section-contact-us .region-secondary-content .region-inner {
  3266. max-width: none;
  3267. padding: 0;
  3268. }
  3269. body.section-contact-us .colorized-gmap-common {
  3270. width: 100%;
  3271. height: 450px;
  3272. }
  3273. body.section-contact-us #main-content {
  3274. max-width: 890px;
  3275. margin-left: auto;
  3276. margin-right: auto;
  3277. }
  3278. body.section-contact-us #content {
  3279. margin-left: -10px;
  3280. margin-right: -10px;
  3281. }
  3282. body.section-contact-us #content > * {
  3283. width: 50%;
  3284. display: inline-block;
  3285. padding: 0 10px 10px;
  3286. vertical-align: top;
  3287. }
  3288. body.section-contact-us #content > * > * {
  3289. max-width: 380px;
  3290. display: block;
  3291. }
  3292. body.section-contact-us #content > *:last-child > * {
  3293. float: right;
  3294. }
  3295. .section-contact-us.not-logged-in #page-title {
  3296. margin-bottom: 30px;
  3297. }
  3298. body.section-contact-us #content .form-text,
  3299. body.section-contact-us #content .form-textarea {
  3300. width: 100%;
  3301. }
  3302. body.section-contact-us {
  3303. min-height: 115px;
  3304. }
  3305. /* Contact us page END */
  3306. /* Ajax load */
  3307. .ajax-progress {
  3308. position: relative;
  3309. width: 13px;
  3310. }
  3311. #load {
  3312. width: 13px;
  3313. height: 13px;
  3314. animation: loading 3s linear infinite;
  3315. max-height: 50px;
  3316. position: absolute;
  3317. bottom: 0;
  3318. }
  3319. #loading-inner {
  3320. animation: loading-circle 2s linear infinite;
  3321. stroke: #19c2c9;
  3322. stroke-dashoffset: 0;
  3323. stroke-dasharray: 300;
  3324. stroke-width: 10;
  3325. stroke-miterlimit: 10;
  3326. stroke-linecap: round;
  3327. fill: transparent;
  3328. }
  3329. @keyframes loading {
  3330. 0% {
  3331. transform: rotate(0);
  3332. }
  3333. 100% {
  3334. transform: rotate(360deg);
  3335. }
  3336. }
  3337. @keyframes loading-circle {
  3338. 0% {
  3339. stroke-dashoffset: 0;
  3340. }
  3341. 100% {
  3342. stroke-dashoffset: -600;
  3343. }
  3344. }
  3345. /* =Colors BEGIN*/
  3346. .colors p {
  3347. margin: 20px 0 0 0;
  3348. }
  3349. .colors .block-content div {
  3350. height: 30px;
  3351. width: 100%;
  3352. line-height: 30px;
  3353. position: relative;
  3354. }
  3355. .colors .block-content div:before {
  3356. margin-left: 20px;
  3357. color: #fff;
  3358. }
  3359. .color-1 {
  3360. background: #9fc linear-gradient(to right, #19c2c9, #9fc);
  3361. }
  3362. .color-1:before {
  3363. content: "#19c2c9";
  3364. }
  3365. .color-1:after {
  3366. content: "#99ffcc";
  3367. position: absolute;
  3368. right: 20px;
  3369. }
  3370. .color-2 {
  3371. background: #19c2c9;
  3372. }
  3373. .color-2:before {
  3374. content: "#19c2c9";
  3375. }
  3376. .color-3 {
  3377. background: #74797b;
  3378. }
  3379. .color-3:before {
  3380. content: "#74797b";
  3381. }
  3382. .color-4 {
  3383. background: #333;
  3384. }
  3385. .color-4:before {
  3386. content: "#333333";
  3387. }
  3388. /* =Colors END*/
  3389. /* Contact us BEGIN */
  3390. #map {
  3391. width: 100%;
  3392. height: 694px;
  3393. }
  3394. .contact-us h3 {
  3395. background: none;
  3396. margin-bottom: 0;
  3397. padding-bottom: 0;
  3398. }
  3399. .contact-us div {
  3400. display: inline-block;
  3401. text-align: center;
  3402. width: 33%;
  3403. margin-top: 35px;
  3404. }
  3405. .phone.icon:before {
  3406. content: url('../images/PHONE.png');
  3407. display: block;
  3408. }
  3409. .address.icon:before {
  3410. content: url('../images/MAP.png');
  3411. display: block;
  3412. margin-left: 3px;
  3413. }
  3414. .mail.icon:before {
  3415. content: url('../images/E-MAIL.png');
  3416. display: block;
  3417. }
  3418. .mail a {
  3419. color: #74797b;
  3420. }
  3421. .maps,
  3422. .contact-form {
  3423. float: left;
  3424. width: 50%;
  3425. background: #f9f9f9;
  3426. }
  3427. .contact-form {
  3428. padding-left: 100px;
  3429. padding-top: 70px;
  3430. padding-bottom: 75px;
  3431. float: right;
  3432. z-index: 1;
  3433. }
  3434. .contact-form h2 {
  3435. border-bottom: 2px solid #19c2c9;
  3436. width: 200px;
  3437. font-size: 30px;
  3438. letter-spacing: normal;
  3439. text-align: left;
  3440. float: left;
  3441. line-height: 60px;
  3442. }
  3443. .contact-form form,
  3444. .contact-form input:not([type="submit"]) {
  3445. max-width: 432px;
  3446. width: 100%;
  3447. }
  3448. .contact-form .webform-component--description {
  3449. float: left;
  3450. margin-top: 5px;
  3451. }
  3452. .colorized-gmap-common {
  3453. width: 50%;
  3454. height: 702px;
  3455. }
  3456. /* Contact us END */