/* ===================================================================



 *  01. webfonts and iconfonts - (_document-setup)



 *



 * ------------------------------------------------------------------- */



@import url("font-awesome/css/font-awesome.min.css");



@import url("micons/micons.css");



@import url("fonts.css");











/* ===================================================================



 *  02. base style overrides - (_document-setup)



 *



 * ------------------------------------------------------------------- */



html {



  font-size: 10px;



}



@media only screen and (max-width: 1024px) {



  html {



    font-size: 9.375px;



  }



}



@media only screen and (max-width: 768px) {



  html {



    font-size: 10px;



  }



}



@media only screen and (max-width: 400px) {



  html {



    font-size: 9.375px;



  }



}







html, body {



  height: 100%;



}







body {



  background: #fff;



  font-family: "InstallationSSK", serif;



  font-size: 1.6rem;



  line-height: 3rem;



  color: #353535;



  margin: 0;



  padding: 0;



}







/* ------------------------------------------------------------------- 



 * links - (_document-setup) 



 * ------------------------------------------------------------------- */



a, a:visited {



  color: #07617d;



  -moz-transition: all 0.3s ease-in-out;



  -o-transition: all 0.3s ease-in-out;



  -webkit-transition: all 0.3s ease-in-out;



  -ms-transition: all 0.3s ease-in-out;



  transition: all 0.3s ease-in-out;



}







a:hover, a:focus {



  color: #000000;



}











/* ===================================================================



 *  03. typography & general theme styles - (_document-setup.scss) 



 *



 * ------------------------------------------------------------------- */



h1, h2, h3, h4, h5, h6,



.h01, .h02, .h03, .h04, .h05, .h06 {



  font-family: "InstallationSSK", sans-serif;



  color: #151515;



  font-style: normal;



  text-rendering: optimizeLegibility;



  margin-bottom: 2.1rem;



}







h3, .h03, h4, .h04 {



  margin-bottom: 1.8rem;



}







h5, .h05, h6, .h06 {



  margin-bottom: 1.2rem;



}







h1, .h01 {



  font-size: 3.1rem;



  line-height: 1.35;



}



@media only screen and (max-width: 600px) {



  h1, .h01 {



    font-size: 2.6rem;



    letter-spacing: -.07rem;



  }



}







h2, .h02 {



  font-size: 2.4rem;



  line-height: 1.25;



}







h3, .h03 {



  font-size: 2rem;



  line-height: 1.5;



}







h4, .h04 {



  font-size: 1.7rem;



  line-height: 1.76;



}







h5, .h05 {



  font-size: 1.4rem;



  line-height: 1.7;



  text-transform: uppercase;



}







h6, .h06 {



  font-size: 1.3rem;



  line-height: 1.85;



  text-transform: uppercase;



}







p img {



  margin: 0;



}







p.lead {



  font-family: "InstallationSSK", sans-serif;



  font-size: 2rem;



  line-height: 1.8;



  color: #4f4f4f;



  margin-bottom: 3.6rem;



}



@media only screen and (max-width: 768px) {



  p.lead {



    font-size: 1.8rem;



  }



}







em, i, strong, b {



  font-size: 1.6rem;



  line-height: 3rem;



  font-style: normal;



  font-weight: normal;



}







em, i {



  font-family: "librebaskerville-italic", serif;



}







strong, b {



  font-family: "librebaskerville-bold", serif;



}







small {



  font-size: 1.1rem;



  line-height: inherit;



}







blockquote {



  margin: 3rem 0;



  padding-left: 5rem;



  position: relative;



}







blockquote:before {



  content: "\201C";



  font-size: 10rem;



  line-height: 0px;



  margin: 0;



  color: rgba(0, 0, 0, 0.3);



  font-family: arial, sans-serif;



  position: absolute;



  top: 3.6rem;



  left: 0;



}







blockquote p {



  font-family: "librebaskerville-italic", georgia, serif;



  font-style: italic;



  padding: 0;



  font-size: 1.9rem;



  line-height: 1.895;



}







blockquote cite {



  display: block;



  font-size: 1.3rem;



  font-style: normal;



  line-height: 1.615;



}







blockquote cite:before {



  content: "\2014 \0020";



}







blockquote cite a,



blockquote cite a:visited {



  color: #4f4f4f;



  border: none;



}







abbr {



  font-family: "librebaskerville-bold", serif;



  font-variant: small-caps;



  text-transform: lowercase;



  letter-spacing: .05rem;



  color: #4f4f4f;



}







var, kbd, samp, code, pre {



  font-family: Consolas, "Andale Mono", Courier, "Courier New", monospace;



}







pre {



  padding: 2.4rem 3rem 3rem;



  background: #F1F1F1;



}







code {



  font-size: 1.4rem;



  margin: 0 .2rem;



  padding: .3rem .6rem;



  white-space: nowrap;



  background: #F1F1F1;



  border: 1px solid #E1E1E1;



  border-radius: 3px;



}







pre > code {



  display: block;



  white-space: pre;



  line-height: 2;



  padding: 0;



  margin: 0;



}







pre.prettyprint > code {



  border: none;



}







del {



  text-decoration: line-through;



}







abbr[title], dfn[title] {



  border-bottom: 1px dotted;



  cursor: help;



}







mark {



  background: #FFF49B;



  color: #000;



}







hr {



  border: solid #d2d2d2;



  border-width: 1px 0 0;



  clear: both;



  margin: 2.4rem 0 1.5rem;



  height: 0;



}







/* ------------------------------------------------------------------- 



 * Lists - (_document-setup.scss)  



 * ------------------------------------------------------------------- */



ol {



  list-style: decimal;



}







ul {



  list-style: disc;



}







li {



  display: list-item;



}







ol, ul {



  margin-left: 1.7rem;



}







ul li {



  padding-left: .4rem;



}







ul ul, ul ol,



ol ol, ol ul {



  margin: .6rem 0 .6rem 1.7rem;



}







ul.disc li {



  display: list-item;



  list-style: none;



  padding: 0 0 0 .8rem;



  position: relative;



}



ul.disc li::before {



  content: "";



  display: inline-block;



  width: 8px;



  height: 8px;



  border-radius: 50%;



  background: #07617d;



  position: absolute;



  left: -17px;



  top: 11px;



  vertical-align: middle;



}







dt {



  margin: 0;



  color: #07617d;



}







dd {



  margin: 0 0 0 2rem;



}







/* ------------------------------------------------------------------- 



 * Spacing - (_document-setup)  



 * ------------------------------------------------------------------- */



button, .button {



  margin-bottom: 1.2rem;



}







fieldset {



  margin-bottom: 1.5rem;



}







input,



textarea,



select,



pre,



blockquote,



figure,



table,



p,



ul,



ol,



dl,



form,



.fluid-video-wrapper,



.ss-custom-select {



  margin-bottom: 3rem;



}







/* ------------------------------------------------------------------- 



 * floated image - (_document-setup)  



 * ------------------------------------------------------------------- */



img.pull-right {



  margin: 1.5rem 0 0 3rem;



}







img.pull-left {



  margin: 1.5rem 3rem 0 0;



}







/* ------------------------------------------------------------------- 



 * block grids paddings



 * ------------------------------------------------------------------- */



.bgrid {



  padding: 0 20px;



}



@media only screen and (max-width: 1024px) {



  .bgrid {



    padding: 0 18px;



  }



}



@media only screen and (max-width: 768px) {



  .bgrid {



    padding: 0 15px;



  }



}



@media only screen and (max-width: 600px) {



  .bgrid {



    padding: 0 10px;



  }



}



@media only screen and (max-width: 400px) {



  .bgrid {



    padding: 0;



  }



}







/* ------------------------------------------------------------------- 



 * tables - (_document-setup.scss)  



 * ------------------------------------------------------------------- */



table {



  border-width: 0;



  width: 100%;



  max-width: 100%;



  font-family: "librebaskerville-regular", sans-serif;



}







th,



td {



  padding: 1.5rem 3rem;



  text-align: left;



  border-bottom: 1px solid #E8E8E8;



}







th {



  color: #151515;



  font-family: "InstallationSSK", sans-serif;



}







td {



  line-height: 1.5;



}







th:first-child,



td:first-child {



  padding-left: 0;



}







th:last-child,



td:last-child {



  padding-right: 0;



}







.table-responsive {



  overflow-x: auto;



  -webkit-overflow-scrolling: touch;



}







/* ------------------------------------------------------------------- 



 * pace.js styles - minimal  - (_document-setup.scss)



 * ------------------------------------------------------------------- */



.pace {



  -webkit-pointer-events: none;



  pointer-events: none;



  -webkit-user-select: none;



  -moz-user-select: none;



  user-select: none;



}







.pace-inactive {



  display: none;



}







.pace .pace-progress {



  background: #f9a828;



  position: fixed;



  z-index: 900;



  top: 0;



  right: 100%;



  width: 100%;



  height: 6px;



}











/* ===================================================================



 *  04. Preloader



 *



 * ------------------------------------------------------------------- */



#preloader {



  position: fixed;



  top: 0;



  left: 0;



  right: 0;



  bottom: 0;



  background: none;



  z-index: 800;



  height: 100%;



  width: 100%;



}







.no-js #preloader, .oldie #preloader {



  display: none;



}







#loader {



  position: absolute;



  left: 50%;



  top: 50%;



  width: 60px;



  height: 60px;



  margin-left: -30px;



  margin-top: -30px;



  padding: 0;



  background-color: #f9a828;



  border-radius: 100%;



  -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;



  animation: sk-scaleout 1.0s infinite ease-in-out;



}







@-webkit-keyframes sk-scaleout {



  0% {



    -webkit-transform: scale(0);



  }



  100% {



    -webkit-transform: scale(1);



    opacity: 0;



  }



}



@keyframes sk-scaleout {



  0% {



    -webkit-transform: scale(0);



    transform: scale(0);



  }



  100% {



    -webkit-transform: scale(1);



    transform: scale(1);



    opacity: 0;



  }



}











/* ===================================================================



 *  05. forms - (_forms.scss)



 *



 * ------------------------------------------------------------------- */



fieldset {



  border: none;



}







input[type="email"],



input[type="number"],



input[type="search"],



input[type="text"],



input[type="tel"],



input[type="url"],



input[type="password"],



textarea,



select {



  display: block;



  height: 35px;



  padding: 5px 20px;



  border: 0;



  outline: none;



  vertical-align: middle;



  color: #444444;



  font-family: "InstallationSSK", sans-serif;



  font-size: 1.4rem;



  line-height: 3rem;



  max-width: 100%;



  background: rgba(0, 0, 0, 0.1);



  -moz-transition: all 0.3s ease-in-out;



  -o-transition: all 0.3s ease-in-out;



  -webkit-transition: all 0.3s ease-in-out;



  -ms-transition: all 0.3s ease-in-out;



  transition: all 0.3s ease-in-out;



}







.ss-custom-select {



  position: relative;



  padding: 0;



}



.ss-custom-select select {



  -webkit-appearance: none;



  -moz-appearance: none;



  -ms-appearance: none;



  -o-appearance: none;



  appearance: none;



  text-indent: 0.01px;



  text-overflow: '';



  margin: 0;



  line-height: 3rem;



  vertical-align: middle;



}



.ss-custom-select select option {



  padding-left: 2rem;



  padding-right: 2rem;



}



.ss-custom-select select::-ms-expand {



  display: none;



}



.ss-custom-select::after {



  content: '\f0d7';



  font-family: 'FontAwesome';



  position: absolute;



  top: 50%;



  right: 1.5rem;



  margin-top: -10px;



  bottom: auto;



  width: 20px;



  height: 20px;



  line-height: 20px;



  font-size: 18px;



  text-align: center;



  pointer-events: none;



  color: #252525;



}







/* IE9 and below */



.oldie .ss-custom-select::after {



  display: none;



}







textarea {



  min-height: 25rem;



}







input[type="email"]:focus,



input[type="number"]:focus,



input[type="search"]:focus,



input[type="text"]:focus,



input[type="tel"]:focus,



input[type="url"]:focus,



input[type="password"]:focus,



textarea:focus,



select:focus {



  color: #000000;



}







label, legend {



  font-family: "InstallationSSK", sans-serif;



  font-size: 1.4rem;



  margin-bottom: .6rem;



  color: #020202;



  display: block;



}







input[type="checkbox"],



input[type="radio"] {



  display: inline;



}







label > .label-text {



  display: inline-block;



  margin-left: 1rem;



  font-family: "InstallationSSK", sans-serif;



  line-height: inherit;



}







label > input[type="checkbox"],



label > input[type="radio"] {



  margin: 0;



  position: relative;



  top: .15rem;



}







/* ------------------------------------------------------------------- 



 * Style Placeholder Text - (_forms.scss)



 * ------------------------------------------------------------------- */



::-webkit-input-placeholder {



  color: #8e8e8e;



}







:-moz-placeholder {



  color: #8e8e8e;



  /* Firefox 18- */



}







::-moz-placeholder {



  color: #8e8e8e;



  /* Firefox 19+ */



}







:-ms-input-placeholder {



  color: #8e8e8e;



}







.placeholder {



  color: #8e8e8e !important;



}







/* ------------------------------------------------------------------- 



 * Change Autocomplete styles in Chrome - (_forms.scss)



 * ------------------------------------------------------------------- */



input:-webkit-autofill,



input:-webkit-autofill:hover,



input:-webkit-autofill:focus



input:-webkit-autofill,



textarea:-webkit-autofill,



textarea:-webkit-autofill:hover



textarea:-webkit-autofill:focus,



select:-webkit-autofill,



select:-webkit-autofill:hover,



select:-webkit-autofill:focus {



  border: none;



  -webkit-text-fill-color: #fabc5a;



  transition: background-color 5000s ease-in-out 0s;



}











/* ===================================================================



 *  06. buttons - (_button-essentials.scss)



 *



 * ------------------------------------------------------------------- */



.button,



a.button,



button,



input[type="submit"],



input[type="reset"],



input[type="button"] {



  display: inline-block;



  font-family: "InstallationSSK", sans-serif;



  font-size: 1.4rem;



  text-transform: uppercase;



  letter-spacing: .3rem;



  height: 5.4rem;



  line-height: 5.4rem;



  padding: 0 3rem;



  margin: 0 .3rem 1.2rem 0;



  background: #A5A5A5;



  color: #222222;



  text-decoration: none;



  cursor: pointer;



  text-align: center;



  white-space: nowrap;



  border: none;



  -moz-transition: all 0.3s ease-in-out;



  -o-transition: all 0.3s ease-in-out;



  -webkit-transition: all 0.3s ease-in-out;



  -ms-transition: all 0.3s ease-in-out;



  transition: all 0.3s ease-in-out;



}







.button:hover,



a.button:hover,



button:hover,



input[type="submit"]:hover,



input[type="reset"]:hover,



input[type="button"]:hover,



.button:focus,



button:focus,



input[type="submit"]:focus,



input[type="reset"]:focus,



input[type="button"]:focus {



  background: #989898;



  color: #000000;



  outline: 0;



}







.button.button-primary,



a.button.button-primary,



button.button-primary,



input[type="submit"].button-primary,



input[type="reset"].button-primary,



input[type="button"].button-primary {



  background: #151515;



  color: #FFFFFF;



}







.button.button-primary:hover,



a.button.button-primary:hover,



button.button-primary:hover,



input[type="submit"].button-primary:hover,



input[type="reset"].button-primary:hover,



input[type="button"].button-primary:hover,



.button.button-primary:focus,



button.button-primary:focus,



input[type="submit"].button-primary:focus,



input[type="reset"].button-primary:focus,



input[type="button"].button-primary:focus {



  background: #030303;



}







button.full-width, .button.full-width {



  width: 100%;



  margin-right: 0;



}







button.medium, .button.medium {



  height: 5.7rem !important;



  line-height: 5.7rem !important;



  padding: 0 1.8rem !important;



}







button.large, .button.large {



  height: 6rem !important;



  line-height: 6rem !important;



  padding: 0rem 3rem !important;



}







button.stroke, .button.stroke {



  background: transparent !important;



  border: 3px solid #313131;



  line-height: 4.8rem;



}







button.stroke.medium, .button.stroke.medium {



  line-height: 5.1rem !important;



}







button.stroke.large, .button.stroke.large {



  line-height: 5.4rem !important;



}







button.stroke:hover, .button.stroke:hover {



  border: 3px solid #f9a828;



  color: #f9a828;



}







button::-moz-focus-inner,



input::-moz-focus-inner {



  border: 0;



  padding: 0;



}











/* ===================================================================



 *  07. other components - (_others.scss)



 *



 * ------------------------------------------------------------------- */







/**



 * alert box - (_alert-box.scss)



 * -------------------------------------------------------------------



 */



.alert-box {



  padding: 2.1rem 4rem 2.1rem 3rem;



  position: relative;



  margin-bottom: 3rem;



  border-radius: 3px;



  font-family: "InstallationSSK", sans-serif;



  font-size: 1.5rem;



}



.alert-box .close {



  position: absolute;



  right: 1.8rem;



  top: 1.8rem;



  cursor: pointer;



}







.ss-error {



  background-color: #ffd1d2;



  color: #e65153;



}







.ss-success {



  background-color: #c8e675;



  color: #758c36;



}







.ss-info {



  background-color: #d7ecfb;



  color: #4a95cc;



}







.ss-notice {



  background-color: #fff099;



  color: #bba31b;



}







/* ------------------------------------------------------------------- 



 * additional typo styles - (_additional-typo.scss)



 * ------------------------------------------------------------------- */



/* drop cap 



 * ----------------------------------------------- */



.drop-cap:first-letter {



  float: left;



  margin: 0;



  padding: 1.5rem .6rem 0 0;



  font-size: 8.4rem;



  font-family: "InstallationSSK", sans-serif;



  line-height: 6rem;



  text-indent: 0;



  background: transparent;



  color: #151515;



}







/* line definition style 



 * ----------------------------------------------- */



.lining dt, .lining dd {



  display: inline;



  margin: 0;



}



.lining dt + dt:before,



.lining dd + dt:before {



  content: "\A";



  white-space: pre;



}



.lining dd + dd:before {



  content: ", ";



}



.lining dd + dd:before {



  content: ", ";



}



.lining dd:before {



  content: ": ";



  margin-left: -0.2em;



}







/* dictionary definition style 



 * ----------------------------------------------- */



.dictionary-style dt {



  display: inline;



  counter-reset: definitions;



}



.dictionary-style dt + dt:before {



  content: ", ";



  margin-left: -0.2em;



}



.dictionary-style dd {



  display: block;



  counter-increment: definitions;



}



.dictionary-style dd:before {



  content: counter(definitions,decimal) ". ";



}











.pull-quote {



  position: relative;



  padding: 2.1rem 3rem 2.1rem 0px;



}



.pull-quote:before, .pull-quote:after {



  height: 1em;



  position: absolute;



  font-size: 10rem;



  font-family: Arial, Sans-Serif;



  color: rgba(0, 0, 0, 0.3);



}



.pull-quote:before {



  content: "\201C";



  top: 33px;



  left: 0;



}



.pull-quote:after {



  content: '\201D';



  bottom: -33px;



  right: 0;



}



.pull-quote blockquote {



  margin: 0;



}



.pull-quote blockquote:before {



  content: none;



}











.stats-tabs {



  padding: 0;



  margin: 3rem 0;



}



.stats-tabs li {



  display: inline-block;



  margin: 0 1.5rem 3rem 0;



  padding: 0 1.5rem 0 0;



  border-right: 1px solid #ccc;



}



.stats-tabs li:last-child {



  margin: 0;



  padding: 0;



  border: none;



}



.stats-tabs li a {



  display: inline-block;



  font-size: 2.5rem;



  font-family: "InstallationSSK", sans-serif;



  border: none;



  color: #252525;



}



.stats-tabs li a:hover {



  color: #07617d;



}



.stats-tabs li a em {



  display: block;



  margin: .6rem 0 0 0;



  font-size: 1.4rem;



  font-family: "InstallationSSK", sans-serif;



  color: #4f4f4f;



}







/**



 * skillbars - (_skillbars.scss)



 * -------------------------------------------------------------------



 */



.skill-bars {



  list-style: none;



  margin: 6rem 0 3rem;



}



.skill-bars li {



  height: .6rem;



  background: #a1a1a1;



  width: 100%;



  margin-bottom: 6rem;



  padding: 0;



  position: relative;



}



.skill-bars li strong {



  position: absolute;



  left: 0;



  top: -3rem;



  font-family: "InstallationSSK", sans-serif;



  color: #313131;



  text-transform: uppercase;



  letter-spacing: .2rem;



  font-size: 1.5rem;



  line-height: 2.4rem;



}



.skill-bars li .progress {



  background: #313131;



  position: relative;



  height: 100%;



}



.skill-bars li .progress span {



  position: absolute;



  right: 0;



  top: -3.6rem;



  display: block;



  font-family: "InstallationSSK", sans-serif;



  color: white;



  font-size: 1.1rem;



  line-height: 1;



  background: #313131;



  padding: .6rem .6rem;



  border-radius: 3px;



}



.skill-bars li .progress span::after {



  position: absolute;



  left: 50%;



  bottom: -5px;



  margin-left: -5px;



  border-right: 5px solid transparent;



  border-left: 5px solid transparent;



  border-top: 5px solid #313131;



  content: "";



}



.skill-bars li .percent5 {



  width: 5%;



}



.skill-bars li .percent10 {



  width: 10%;



}



.skill-bars li .percent15 {



  width: 15%;



}



.skill-bars li .percent20 {



  width: 20%;



}



.skill-bars li .percent25 {



  width: 25%;



}



.skill-bars li .percent30 {



  width: 30%;



}



.skill-bars li .percent35 {



  width: 35%;



}



.skill-bars li .percent40 {



  width: 40%;



}



.skill-bars li .percent45 {



  width: 45%;



}



.skill-bars li .percent50 {



  width: 50%;



}



.skill-bars li .percent55 {



  width: 55%;



}



.skill-bars li .percent60 {



  width: 60%;



}



.skill-bars li .percent65 {



  width: 65%;



}



.skill-bars li .percent70 {



  width: 70%;



}



.skill-bars li .percent75 {



  width: 75%;



}



.skill-bars li .percent80 {



  width: 80%;



}



.skill-bars li .percent85 {



  width: 85%;



}



.skill-bars li .percent90 {



  width: 90%;



}



.skill-bars li .percent95 {



  width: 95%;



}



.skill-bars li .percent100 {



  width: 100%;



}







/* ===================================================================



 *  08. common and reusable styles 



 *



 * ------------------------------------------------------------------- */



.section-intro {



  text-align: center;



  position: relative;



  margin-bottom: 1.5rem;



}



.section-intro h1 {



  font-family: "librebaskerville-bold", serif;



  font-size: 4.8rem;



  line-height: 1.375;



  color: #151515;



}



.section-intro h3 {



  font-family: "InstallationSSK", sans-serif;



  font-size: 1.8 rem;



  line-height: 1.667;



  color: rgba(242, 242, 242, 0.5);



  text-transform: uppercase;



  letter-spacing: .3rem;



  margin-bottom: 1.2rem;



}



.section-intro .lead {



  font-family: "InstallationSSK", sans-serif;



  font-size: 1.8;



  line-height: 1.833;



}



.section-intro.with-bottom-sep {



  padding-bottom: 4.2rem;



  position: relative;



}



.section-intro.with-bottom-sep::after {



  display: inline-block;



  height: 1px;



  width: 200px;



  background-color: rgba(242, 242, 242, 0.1);



  text-align: center;



}







/* ------------------------------------------------------------------- 



 * responsive:



 * section-intro



 * ------------------------------------------------------------------- */



@media only screen and (max-width: 1024px) {



  .section-intro h1 {



    font-size: 4.4rem;



  }



  .section-intro .lead {



    font-size: 1.7rem;



  }



}



@media only screen and (max-width: 768px) {



  .section-intro h1 {



    font-size: 4rem;



  }



  .section-intro h3 {



    font-size: 1.7rem;



  }



}



@media only screen and (max-width: 600px) {



  .section-intro h1 {



    font-size: 3.4rem;



  }



  .section-intro h3 {



    font-size: 1.7rem;



  }



}



@media only screen and (max-width: 500px) {



  .section-intro h3 {



    font-size: 1.5rem;



  }



}



@media only screen and (max-width: 400px) {



  .section-intro h1 {



    font-size: 3.1rem;



  }



}



.wide {



  max-width: 1300px;



}







.narrow {



  max-width: 800px;



}







.js .animate-this, .js .animate-intro {



  opacity: 0;



}







.oldie .animate-this,



.oldie .animate-intro



.no-cssanimations .animate-this,



.no-cssanimations .animate-intro {



  opacity: 1;



}











/* ===================================================================



 *  09. header styles - (_layout.scss)



 *



 * ------------------------------------------------------------------- */



header {



  /*width: 100%;



  height: auto;



  position: absolute;



  left: 0;



  top: 0;



  z-index: 700;*/



}



header .row {



  height: auto;



  max-width: 1170px;



  position: relative;



}







/* ------------------------------------------------------------------- 



 * header logo - (_layout.css) 



 * ------------------------------------------------------------------- */



header .header-logo {



  position: relative;



  left: 0;



  top: 0px;



  -moz-transition: all 1s ease-in-out;



  -o-transition: all 1s ease-in-out;



  -webkit-transition: all 1s ease-in-out;



  -ms-transition: all 1s ease-in-out;



  transition: all 1s ease-in-out; 

  z-index:3;



}



header .header-logo a {



  display: block;



  margin: 0;



  padding: 0;



  outline: 0;



  border: none;



  width: 150px;



  height: 200px;



  background: url("../images/logo.png") no-repeat center;





  font: 0/0 a;



  text-shadow: none;



  color: transparent;



  -moz-transition: all 0.5s ease-in-out;



  -o-transition: all 0.5s ease-in-out;



  -webkit-transition: all 0.5s ease-in-out;



  -ms-transition: all 0.5s ease-in-out;



  transition: all 0.5s ease-in-out;



}







/* ------------------------------------------------------------------- 



 * menu trigger - (_layout.css) 



 * ------------------------------------------------------------------- */



#header-menu-trigger {



  display: block;



  height: 42px;



  width: 42px;



  line-height: 42px;



  font-family: "InstallationSSK", sans-serif;



  font-size: 1.4rem;



  text-transform: uppercase;



  letter-spacing: .2rem;



  color: rgba(255, 255, 255, 0.5);



  -moz-transition: all 0.3s ease-in-out;



  -o-transition: all 0.3s ease-in-out;



  -webkit-transition: all 0.3s ease-in-out;



  -ms-transition: all 0.3s ease-in-out;



  transition: all 0.3s ease-in-out; 



   float:right; 



   position:relative; 



   margin-top:35px;



}



#header-menu-trigger.opaque {



  background-color: #000000;



}



#header-menu-trigger.opaque .header-menu-text {



  background-color: #000000;



}



#header-menu-trigger:hover, #header-menu-trigger:focus {



  color: #FFFFFF;



}



#header-menu-trigger .header-menu-text {



 background-color: transparent;



color: #fff;



display: block;



left: -5px;



position: absolute;



text-align: center;



top: 20px;



width: 50px;



  -moz-transition: all 0.3s ease-in-out;



  -o-transition: all 0.3s ease-in-out;



  -webkit-transition: all 0.3s ease-in-out;



  -ms-transition: all 0.3s ease-in-out;



  transition: all 0.3s ease-in-out;



  font-family: "InstallationSSK-Bold", sans-serif; 



  letter-spacing:0;



}



#header-menu-trigger .header-menu-icon {



  display: block;



  height: 3px;



  width: 45px;



  background-color: #FFFFFF;



  position: absolute;



  top: 20px;



  right: 0px;



  margin-top: 0;



}



#header-menu-trigger .header-menu-icon::before, 



#header-menu-trigger .header-menu-icon::after {



  content: '';



  width: 100%;



  height: 100%;



  background-color: inherit;



  position: absolute;



  left: 0;



}



#header-menu-trigger .header-menu-icon::before {



  top: -9px;



}



#header-menu-trigger .header-menu-icon::after {



  bottom: -9px;



}











/* ------------------------------------------------------------------- 



 * off-canvas menu - (_layout.scss) 



 * ------------------------------------------------------------------- */



#menu-nav-wrap {

  background-color: #000;

  color: rgba(255, 255, 255, 1);

  font-size: 28px;

  line-height: 1.6;

  padding: 4rem 3rem 0 100rem;

  height: 100%;

  width: 100%;

  position: fixed;

  right: 0;

  top: 0;

  visibility: hidden;

  overflow-y: auto;

  z-index: 2;

  -webkit-transform: translateZ(0);

  -webkit-backface-visibility: hidden;

  -webkit-transform: translateX(100%);

  -ms-transform: translateX(100%);

  transform: translateX(100%);

  -moz-transition: all 0.4s ease-in-out;

  -o-transition: all 0.4s ease-in-out;

  -webkit-transition: all 0.4s ease-in-out;

  -ms-transition: all 0.4s ease-in-out;

  transition: all 0.4s ease-in-out; 

  text-transform:uppercase; 

  opacity:0;

}



#menu-nav-wrap a, #menu-nav-wrap a:visited {

  color: rgba(255, 255, 255, 0.5);



}



#menu-nav-wrap a:hover, #menu-nav-wrap a:focus, #menu-nav-wrap a:active {



  color: white;



}



#menu-nav-wrap h3 {



  color: white;



  font-family: "InstallationSSK", sans-serif;



  font-size: 2rem;



  line-height: 1.5;



  margin-bottom: 1.5rem;



}



#menu-nav-wrap .nav-list {



  font-family: "InstallationSSK-Bold", sans-serif;



  margin: 3.6rem 0 3rem 0;



  padding: 0 0 1.8rem 0;



  list-style: none;



  line-height: 3.6rem;



}



#menu-nav-wrap .nav-list li {



  padding-left: 0;



  border-bottom: 1px dotted rgba(255, 255, 255, 0.03);



  line-height: 4.2rem;



}



#menu-nav-wrap .nav-list.nav-list-alter li {



  line-height: 3rem;







}



#menu-nav-wrap .nav-list li:first-child {



  border-top: 1px dotted rgba(255, 255, 255, 0.03);



}







#menu-nav-wrap .nav-list li a {



  color: rgba(255, 255, 255, 1);



  /*display: block;*/



  transition: color 0.3s ease 0s;



}



#menu-nav-wrap .nav-list.nav-list-alter li a:hover {



  color: #194799;



}







#menu-nav-wrap .nav-list li a.blank {



  color: rgba(255, 255, 255, 1);



  display: block;



  transition: color 0.3s ease 0s; 



  font-size:18px; 



  text-transform:capitalize;



  font-family: "InstallationSSK", sans-serif;



}











#menu-nav-wrap .header-social-list {



  list-style: none;



  display: inline-block;



  margin: 0;



  font-size: 2.1rem;



}



#menu-nav-wrap .header-social-list li {



  margin-right: 12px;



  padding-left: 0;



  display: inline-block;



}



#menu-nav-wrap .header-social-list li a {



  color: rgba(255, 255, 255, 0.15);



}



#menu-nav-wrap .header-social-list li a:hover, 



#menu-nav-wrap .header-social-list li a:focus {



  color: white;



}



#menu-nav-wrap .header-social-list li:last-child {



  margin: 0;



}



#menu-nav-wrap .close-button {

  display: block;

  height: 30px;

  width: 30px;

  border-radius: 3px;

  background-color: rgba(0, 0, 0, 0.3);

  position: absolute;

  top: 36px;

  right: 30px;

  font: 0/0 a;

  text-shadow: none;

  color: transparent; 

  cursor:pointer; 

  z-index:1;

}



#menu-nav-wrap .close-button span::before, 



#menu-nav-wrap .close-button span::after {



  content: "";



  display: block;



  height: 2px;



  width: 12px;



  background-color: #fff;



  position: absolute;



  top: 50%;



  left: 9px;



  margin-top: -1px;



}



#menu-nav-wrap .close-button span::before {



  -webkit-transform: rotate(-45deg);



  -ms-transform: rotate(-45deg);



  transform: rotate(-45deg);



}



#menu-nav-wrap .close-button span::after {



  -webkit-transform: rotate(45deg);



  -ms-transform: rotate(45deg);



  transform: rotate(45deg);



}



#menu-nav-wrap .sponsor-text {



  font-family: "librebaskerville-regular", serif;



  font-size: 1.4rem;



  line-height: 3rem;



}



#menu-nav-wrap .sponsor-text span {



  color: rgba(255, 255, 255, 0.5);



}







/* menu is open */



.menu-is-open #menu-nav-wrap {



  -webkit-transform: translateX(0);



  -ms-transform: translateX(0);



  transform: translateX(0);



  visibility: visible;



  -webkit-overflow-scrolling: touch; 

  opacity:1;



}







/* ------------------------------------------------------------------- 



 * off-canvas menu - (_layout.scss) 



 * ------------------------------------------------------------------- */



#side-menu-nav-wrap {

  background: #2E2E2E;

  color: rgba(255, 255, 255, 1);

  font-size: 28px;

  line-height: 1.6;

  padding: 3.6rem 3rem 3.6rem 10rem;

  height: 100%;

  width: 50%;

  position: fixed;

  left: 0;

  top: 0;

  visibility: hidden;

  overflow-y: auto;

  z-index: 800;

  -webkit-transform: translateZ(0);

  -webkit-backface-visibility: hidden;

  -webkit-transform: translateX(100%);

  -ms-transform: translateX(100%);

  transform: translateX(-100%);

  -moz-transition: all 0.2s ease-in-out;

  -o-transition: all 0.2s ease-in-out;

  -webkit-transition: all 0.2s ease-in-out;

  -ms-transition: all 0.2s ease-in-out;

  transition: all 0.2s ease-in-out; 

  text-transform:uppercase;

}



#side-menu-nav-wrap a, #side-menu-nav-wrap a:visited {

  color: rgba(255, 255, 255, 0.5);

}



#side-menu-nav-wrap a:hover, #side-menu-nav-wrap a:focus, #side-menu-nav-wrap a:active {

  color: white;

}



#side-menu-nav-wrap .nav-list {

  font-family: "InstallationSSK-Bold", sans-serif;

 margin: 3.6rem 0 1.5rem 0;

  padding: 0 0 1.8rem 0;

  list-style: none;

  line-height: 3.6rem;

}



#side-menu-nav-wrap .nav-list li {

  padding-left: 0;

  border-bottom: 1px dotted rgba(255, 255, 255, 0.03);

  line-height: 4.2rem;

}



#side-menu-nav-wrap .nav-list.nav-list-alter li {

  line-height: 3rem;

}



#side-menu-nav-wrap .nav-list li:first-child {

  border-top: 1px dotted rgba(255, 255, 255, 0.03);

}



#side-menu-nav-wrap .nav-list li a {

  color: rgba(255, 255, 255, 1);

  /*display: block;*/

  transition: color 0.3s ease 0s;

}



#side-menu-nav-wrap .nav-list.nav-list-alter li a:hover {

  color: #f00;

}



#side-menu-nav-wrap .nav-list li a.blank {

  color: rgba(255, 255, 255, 1);

  display: block;

  transition: color 0.3s ease 0s; 

  font-size:18px; 

  text-transform:capitalize;

 font-family: "InstallationSSK", sans-serif;

}



#side-menu-nav-wrap .header-social-list {

  list-style: none;

  display: inline-block;

  margin: 0;

  font-size: 2.1rem;

}



#side-menu-nav-wrap .header-social-list li {

  margin-right: 12px;

  padding-left: 0;

  display: inline-block;

}



#side-menu-nav-wrap .header-social-list li a {

  color: rgba(255, 255, 255, 0.15);

}



#side-menu-nav-wrap .header-social-list li a:hover, 

#side-menu-nav-wrap .header-social-list li a:focus {

  color: white;

}



#side-menu-nav-wrap .header-social-list li:last-child {

  margin: 0;

}



#side-menu-nav-wrap .side-close-button {

  display: block;

  height: 30px;

  width: 30px;

  border-radius: 3px;

  background-color: rgba(0, 0, 0, 0.3);

  position: absolute;

  top: 36px;

  right: 30px;

  font: 0/0 a;

  text-shadow: none;

  color: transparent;

}



#side-menu-nav-wrap .side-close-button span::before, 

#side-menu-nav-wrap .side-close-button span::after {

  content: "";

  display: block;

  height: 2px;

  width: 12px;

  background-color: #fff;

  position: absolute;

  top: 50%;

  left: 9px;

  margin-top: -1px;

}



#side-menu-nav-wrap .side-close-button span::before {

  -webkit-transform: rotate(-45deg);

  -ms-transform: rotate(-45deg);

  transform: rotate(-45deg);

}



#side-menu-nav-wrap .side-close-button span::after {

  -webkit-transform: rotate(45deg);

  -ms-transform: rotate(45deg);

  transform: rotate(45deg);

}



#side-menu-nav-wrap #home-social-list {

 display: inline-block !important;

font-size: 2.4rem;

line-height: 1.75;

list-style: outside none none;

margin: 0;

padding: 0;

text-align: center;

}



#side-menu-nav-wrap #home-social-list li {

  padding-left: 0; 

  float:left;

}

#side-menu-nav-wrap #home-social-list li a, .home-social-list li a:visited {

  color: #FFFFFF; 

  margin-right:20px;

}

#side-menu-nav-wrap #home-social-list li a:hover, 

#side-menu-nav-wrap #home-social-list li a:focus, 

#side-menu-nav-wrap #home-social-list li a:active {

  color: #194799;

}







/* menu is open */



.side-menu-open #side-menu-nav-wrap {

  -webkit-transform: translateX(0);

  -ms-transform: translateX(0);

  transform: translateX(0);

  visibility: visible;

  -webkit-overflow-scrolling: touch;

}







.body-side-menu { 

transition: all 1s;

margin-left:15%; 

}









/* ------------------------------------------------------------------- 



 * responsive:



 * header section 



 * ------------------------------------------------------------------- */



@media only screen and (max-width: 768px) {



  header .header-logo a {



    width: 120px;



    height: 50px;



    background-size: 120px 50px;



  }



  #menu-nav-wrap {



  width: 250px;



  }



}



@media only screen and (max-width: 768px) {



 



  #side-menu-nav-wrap {



  font-size: 18px;



  padding: 3.6rem 0rem;



  width: 150px;



}



#side-menu-nav-wrap .nav-list li {



  line-height: 3rem;



}



#side-menu-nav-wrap .side-close-button {



  right: 15px;



  top: 15px;



}







#menu-nav-wrap {



  width: 150px; 



  padding:3.6rem 0;



    font-size: 18px;



}



#menu-nav-wrap .nav-list { 



margin:3.6rem 0 0rem; 







}



#menu-nav-wrap .nav-list li {



  line-height: 2.1rem;



}



.nav-list.nav-list-alter { 



margin:0rem 0 1.5rem !important; 



}



#menu-nav-wrap .nav-list.nav-list-alter li {



  line-height: 2.1rem;



}







}



@media only screen and (max-width: 400px) { 



#header-menu-trigger { 



margin-top:-30px; 







}







}







/* ===================================================================



 *  10. home - (_layout.scss)



 *



 * ------------------------------------------------------------------- */



#home {



  width: 100%;



  height: 100%;



  background-color: #151515;



  /*background-image: url(../images/hero-bg.jpg);*/



  background-repeat: no-repeat;



  background-position: center center;



  -webkit-background-size: cover;



  -moz-background-size: cover;



  background-size: cover;



 /* background-attachment: fixed;*/



  min-height: 700px;



  position: relative;



  



}



#home .overlay {



  position: absolute;



  top: 0;



  left: 0;



  width: 100%;



  height: 100%;



  opacity: .2;



  background-color: #19191b;



}



#home .heder { 

position:absolute; 

left:0; 

top:0;

z-index:1; 

width:100%;

}



.home-content-table {



  width: 100%;



  height: 100%;



  display: table;



  position: relative;



  text-align: center;



}







.home-content-tablecell {



  display: table-cell;



  vertical-align: middle;



  z-index: 500;



}



.home-content-tablecell .row {



  position: relative;



  padding-top: 16.2rem;



  padding-bottom: 15rem;



}



.home-content-tablecell h3 {



  font-family: "InstallationSSK", sans-serif;



  font-size: 2.2rem;



  color: white;



  text-transform: uppercase;



  letter-spacing: .3rem;



  margin: 0 0 .9rem 0;



}



.home-content-tablecell h1 {



  color: #ffffff;



font-family: "InstallationSSK",serif;



font-size: 42px;



line-height: 1.133;



text-align: left;



width: 31%;



}



.home-content-tablecell .more {



  margin: 4.8rem 0 0 0;



}



.home-content-tablecell .more .button {



  border-color: #FFFFFF;



  color: #FFFFFF;



}



.social-b { 



position:fixed; 



right:0;



top:30%; 



z-index:1; 



cursor:pointer; 



}



/* home social-list */



/*.social-b .h

{ 

display:none 

}*/



#menu-nav-wrap #home-social-list {

 display: inline-block !important;

font-size: 2.4rem;

line-height: 1.75;

list-style: outside none none;

margin: 0;

padding: 0;

text-align: center;

}



#menu-nav-wrap #home-social-list li {

  padding-left: 0; 

  float:left;

}

#menu-nav-wrap #home-social-list li a, .home-social-list li a:visited {

  color: #FFFFFF; 

  margin-right:20px;

}

#menu-nav-wrap #home-social-list li a:hover, 

#menu-nav-wrap #home-social-list li a:focus, 

#menu-nav-wrap #home-social-list li a:active {

  color: #194799;

}







/* scroll down */



.scrolldown {

  position: absolute;

  bottom: -20px;

  right: 50%;

 /* -webkit-transform: rotate(90deg);



  -ms-transform: rotate(90deg);



  transform: rotate(90deg);*/

  -webkit-transform-origin: right top 0;

  -ms-transform-origin: right top 0;

  transform-origin: right top 0;

  float: right; 

  z-index:1;

}



.scrolldown i {



  padding-left: 9px;



}



 .scrolldown a:focus, .scrolldown a:active {



  color: #151515 !important;



}







html[data-useragent*='MSIE 10.0'] .scrolldown,



.oldie .scrolldown {



  display: none;



}







.scroll-icon {



  display: inline-block;



  font-family: "InstallationSSK", sans-serif;



  font-size: 1.4rem;



  text-transform: uppercase;



  letter-spacing: .3rem;



  color: #FFFFFF !important;



  background: url(../images/scrol.png) no-repeat;



  position: relative;



  top: 0;



  right: 0;



  width:30px; 



  height:69px;



  -webkit-animation-name: rotate;



  animation-delay: 3s;



  -webkit-animation-duration: 2s;



  -webkit-animation-iteration-count: infinite;



  -webkit-animation-direction: normal;



  -webkit-transform-origin: 50% 0%;



  -webkit-animation-timing-function: linear;  /* or make your custom easing */



  



}



.scroll-icon1 {



  position: absolute;



  /* right: 10px; commented for demo */



  bottom: 18px;



  transform: rotate(20deg);



  animation-name: rotate-container;



  animation-delay: 2.33s;



  animation-duration: 2s;



  animation-iteration-count: infinite;



  animation-direction: alternate;



  transform-origin: 50% 0%;



  animation-timing-function: ease-in-out; 



  width:30px;



}



.bellImg {



  /*height: 100%;*/



  width: 100%;  



  transform: rotate(-20deg);



  animation-name: rotate;



  animation-delay: 3s;



  animation-duration: 2s;



  animation-iteration-count: infinite;



  animation-direction: alternate;



  transform-origin: 50% 0%;



  animation-timing-function: ease-in-out;



}



.baloon {



  /*height: 100%;*/



  width: 100%;  



  transform: rotate(-20deg);



  animation-name: rotate1;



  animation-delay: 3s;



  animation-duration: 3s;



  animation-iteration-count: infinite;



  animation-direction: alternate;



  transform-origin: 50% 0%;



  animation-timing-function: ease-in-out;



}







@keyframes rotate {



  0% {



    transform: rotate(-20deg);



  }



  100% {



    transform: rotate(40deg);



  }



}



@keyframes rotate1 {



  0% {



    transform: rotate(0deg);



  }



  100% {



    transform: rotate(-20deg);



  }



}



@keyframes rotate-container {



  0% {



    transform: rotate(20deg);



  }



  100% {



    transform: rotate(-40deg);



  }



}



/* vertical animation */



@-webkit-keyframes animate-it {



  0%, 60%, 80%, 100% {



    -webkit-transform: translateX(0);



  }



  20% {



    -webkit-transform: translateX(-5px);



  }



  40% {



    -webkit-transform: translateX(20px);



  }



}



@keyframes animate-it {



  0%, 60%, 80%, 100% {



    -webkit-transform: translateX(0);



  }



  20% {



    -webkit-transform: translateX(-5px);



  }



  40% {



    -webkit-transform: translateX(20px);



  }



}







#header-menu-trigger.is-clicked .header-menu-text, #header-menu-trigger.is-clicked .header-menu-icon { 



display:none;



}



.nav-link {



  display: inline-block;



  position: relative;



}



.nav-link-mask {



  display: inline-block;



  height: 100%;



  left: 0;



  overflow: hidden;



  position: absolute;



  top: 0;



  transform: translate3d(-100%, 0px, 0px);



  transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1) 0s;



  width: 100%;



}



#menu-nav-wrap a:hover .nav-link-mask{



-ms-transform:translate(0,0);



-webkit-transform:translate3D(0,0,0);



transform:translate3D(0,0,0)



}

#menu-nav-wrap .nav-link-text { 

opacity:1;

transition: opacity 0.4s cubic-bezier(0.19, 1, 0.22, 1) 0s;

}

#menu-nav-wrap a:hover .nav-link-text  { 

opacity:0;

}



#side-menu-nav-wrap a:hover .nav-link-mask{



-ms-transform:translate(0,0);



-webkit-transform:translate3D(0,0,0);



transform:translate3D(0,0,0)



}

#side-nav-wrap .nav-link-text { 

opacity:1;

transition: opacity 0.4s cubic-bezier(0.19, 1, 0.22, 1) 0s;

}

#side-menu-nav-wrap a:hover .nav-link-text  { 

opacity:0;

}



.nav-link-mask-text {



  color: #194799;



  left: 0;



  position: absolute;



  top: 0px;



  transform: translate3d(100%, 0px, 0px);



  transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1) 0s;



}



#menu-nav-wrap a:hover .nav-link-mask-text {



  transform: translate3d(0px, 0px, 0px);



}



#side-menu-nav-wrap a:hover .nav-link-mask-text {



  transform: translate3d(0px, 0px, 0px);



}



/* ------------------------------------------------------------------- 



 * responsive:



 * home section 



 * ------------------------------------------------------------------- */



.owl-carousel {

  position: relative;

  height: 100%;

}

.owl-carousel div:not(.owl-controls) {

  height: 100%;

}

.owl-carousel .owl-slide {

  background-repeat: no-repeat;

  background-size: cover;

  background-position: center;

}

.owl-carousel .owl-slide1 {

  background-image: url("../images/slider-1.jpg");

  }

.owl-carousel .owl-slide2 {

  background-image: url("../images/slider-2.jpg");

  }

.owl-carousel .owl-slide3 {

  background-image: url("../images/slider-3.jpg");

  }

.owl-carousel .owl-slide4 {

  background-image: url("../images/slider-4.jpg");

  }

.owl-carousel .owl-slide5 {

  background-image: url("../images/slider-5.jpg");

  }

.owl-carousel .owl-slide6 {

  background-image: url("../images/slider-6.jpg");

  }

.owl-carousel .owl-controls {

 background: #fff none repeat scroll 0 0;

bottom: 0%;

left: 0;

margin: 0 auto;

opacity: 1;

position: absolute;

right: 0;

z-index: 45; 

padding-top:80px;

}

.owl-carousel .owl-controls .owl-buttons div {

  position: absolute;

  top: 0;

  bottom: 0;

  display: inline-block;

  zoom: 1;

  margin: 0;

  width: 50px;

  height: 30px;

  line-height: 25px;

  text-align: center;

  font-size: 2em;

  color: #000000;

  text-transform: capitalize; 

  z-index:2;

}

.owl-carousel .owl-controls .owl-buttons .owl-prev {

  left: 5px; 

  border-right:2px solid #000; 

  top:24%;

}

.owl-carousel .owl-controls .owl-buttons .owl-next {

  left: 52px;

  top:24%;

}



@media only screen and (min-width: 1200px) {

.owl-carousel .owl-controls {

width: 1170px;

}

}

@media only screen and (max-width: 1200px) {



  .home-content-tablecell h1 {



    font-size: 42px;



  }

.owl-carousel .owl-controls {

width: 86%;

}

}



@media only screen and (max-width: 1024px) {







  .home-content-tablecell h1 {



    font-size: 42px; 



	width:52%;



  }



  .home-content-tablecell .row {



    padding-top: 10.2rem;



	}



}



@media only screen and (max-width: 768px) {



  .home-content-tablecell .row {



   /* max-width: 600px;*/



  }







  .home-content-tablecell h1 {



    font-size: 38px;



	width:62%;



  }



    .home-content-tablecell .row {



    padding-top: 0rem;



	}



  .scrolldown .scroll-icon {



    font-size: 1.2rem;



    top: 24px;



    right: 10px;



  }











}



@media only screen and (max-width: 600px) {



  #home {



    min-height: 702px;



  }







  .home-content-tablecell .row {



    max-width: 480px;



    padding-top: 12rem;



    padding-bottom: 12rem;



  }



.home-content-tablecell h1 {



    font-size: 30px; 



	width:56%;



  }



.home-content-tablecell .row {



    padding-top: 0rem;



	}







.social-b {



  width: 30%;



}



.social-b .home-social-list {



  bottom: 50px;



  font-size: 2rem;



  line-height: 1.5;



  right: 75%;



}







}



@media only screen and (max-width: 500px) {



  .home-content-tablecell .row {



    max-width: 420px;



  }



.home-content-tablecell .row {



    padding-top: 5rem;



	}



  .home-content-tablecell h1 {



    font-size: 26px; 



	width:65%;



  }







}



@media only screen and (max-width: 400px) {



  #home {



    min-height: 654px;



  }







  .home-content-tablecell .row {



    padding-top: 4.8rem;



    padding-bottom: 10.8rem;



  }



  .home-content-tablecell h1 {



     font-size: 24px; 



	width:65%;



  }



.social-b {



  top: 50%;



}







}











/* ===================================================================



 *  11. about - (_layout.scss)



 *



 * ------------------------------------------------------------------- */



#about {

  position: relative;

  padding: 10rem 0 0rem;

  min-height: 1080px;

  overflow-y: hidden;

  color: white; 

  background:rgba(151,151,151,0.6)

}



#about .intro h3 {

  font-family: "InstallationSSK", sans-serif;

  font-size: 40px;

  line-height: 1.1;

  color: #000000;

  text-transform: uppercase;

  letter-spacing: 0;

  position: relative; 

  margin-bottom:0;

}



#about .intro .lead {

  font-family: "InstallationSSK-Bold", serif;

  font-size: 48px;

  line-height: 1.4;

  color: #000000;

  margin-top: 0rem; 

 text-transform:uppercase; 

  margin-bottom:0;

}



#about .intro p { 

font-family: "InstallationSSK", sans-serif;

  font-size: 40px;

  line-height: 1.1;

  color: #000000;

}



#about .intro-bottom { 

margin-top:42%;

}



#about .intro-bottom h1 {

	font-family: Impact;

	font-size: 50px;

	font-style: normal;

	font-variant: normal;

	font-weight: 400;

	line-height: 44px; 

	text-align:right;

}



#about .more { 

border: 1px solid #222222;

color: #fff;

display: inline-block;

padding: 10px 25px; 

margin-top:3%;

transition: all 0.8s ease-in-out 0s; 

font-size:24px

}



#about .more:hover { 

border: 1px solid #fff;

color: #222222;

}



#about video {

    position: fixed;

    top: 45%;

    left: 50%;

    min-width: 100%;

    min-height: 100%;

    width: auto;

    height: auto;

    z-index: -100;

    -webkit-transform: translateX(-50%) translateY(-45%);

            transform: translateX(-50%) translateY(-45%);



}





/* ------------------------------------------------------------------- 



 * responsive:



 * about 



 * ------------------------------------------------------------------- */



@media only screen and (max-width: 1024px) {



  #about {



    min-height: 636px;



  }



  #about .about-wrap {



    max-width: 800px;



  }



  #about .lead {



    font-size: 3.8rem;



  }



}



@media only screen and (max-width: 900px) {



  #about .about-wrap {



    max-width: 720px;



  }



  #about .lead {



    font-size: 3.6rem;



  }



}



@media only screen and (max-width: 768px) {



  #about h3 {



    font-size: 1.7rem;



  }



  #about .about-wrap {



    max-width: 600px;



  }



  #about .lead {



    font-size: 3.1rem;



  }



}



@media only screen and (max-width: 600px) {



  #about {



    min-height: auto;



  }



  #about .about-wrap {



    max-width: 500px;



  }



  #about .lead {



    margin-top: 4.8rem;



    font-size: 2.8rem;



  }



}



@media only screen and (max-width: 500px) {



  #about {



    padding: 8rem 0 9.6rem;



	    min-height: 654px;



  }



  #about .intro h3 {



    font-size:26px;



  }



  #about .intro .lead {



    font-size: 36px;



  }



  #about .intro p {



  font-size: 28px;



}



#about .intro-bottom h1 {



  font-size: 34px;



}



#about .intro-bottom {



  margin-top: 40%;



}



}



@media only screen and (max-width: 400px) {



  #about {



    padding: 4.2rem 0 9.6rem;



	    min-height: 654px;



  }



  #about .about-wrap {



    max-width: 380px;



  }



 #about .intro h3 {



    font-size:24px;



  }







  #about .intro .lead {



    font-size: 30px;



  }



  #about .intro p {



  font-size: 20px;



}



#about .intro-bottom h1 {



  font-size: 30px;



}



#about .intro-bottom {



  margin-top: 40%; 



  margin-bottom:40%



}



}











/* ===================================================================



 *  12. services - (_layout.scss)



 *



 * ------------------------------------------------------------------- */



#services {



  background-color: #194799;



  min-height: 800px;



  position: relative;



  padding: 5rem 0 0rem;



  color: rgba(255, 255, 255, 0.3);



}







#services h2 {



  color: #fff; 



  text-transform:uppercase;



    font-family: "InstallationSSK-Bold", serif; 



	margin-bottom:40px; 



	font-size:30px;



}



#services h5 { 



color:#fff;



font-size:16px; 



margin-bottom:50px;



}







#services .col-three img{



  -webkit-transition: -webkit-transform .8s ease-in-out;



          transition:         transform .8s ease-in-out;



}



#services .col-three img:hover {



  -webkit-transform: rotate(360deg);



          transform: rotate(360deg);



}







#services .services-content h3 {



  color: #fff;



  font-family: "InstallationSSK-Bold", serif; 



  margin-top:40px; 



  font-size:24px;



  text-transform:uppercase;



}



#services .services-content {



  text-align: center;



}



#services .services-content p { 



color:#fff; 



font-size:16px; 



padding:0 50px; 



line-height:22px;



}







#services .services-list {



  margin-top: 1.2rem;







}



#services .services-list .col-four{ 



  border-right:1px solid #16305c; 



  min-height:300px;



}



#services .services-list .col-four:last-child{ 



border-right:none;



}



#services .services-list img {



 



}



#services .services-list h6 { 



color: #fff;



font-size: 18px;



margin-bottom: 0;



margin-top: 0;







}



#services .services-list p {



color: #fff;



font-size: 14px;



line-height: 20px;



text-align: justify; 

margin-bottom:70px;



}







/* ------------------------------------------------------------------- 



 * responsive:



 * services



 * ------------------------------------------------------------------- */



@media only screen and (max-width: 1024px) {



 



}



@media only screen and (max-width: 900px) {



 



}



@media only screen and (max-width: 768px) {



  #services {



    padding: 12rem 0 0rem;



  }



  #services .services-content {



    max-width: 550px;



  }



 #services .services-content p {



 



  padding: 0;



}



#services .services-list .col-four {



  border-right: none;



  min-height: auto;



}



}







@media only screen and (max-width: 400px) {







 



}











/* ===================================================================



 *  13. portfolio - (_layout.scss)



 *



 * ------------------------------------------------------------------- */



#team {



  background: #FFFFFF;



  min-height: 800px;



  position: relative;



  padding: 0;



}







#team h2 {



  color: #000000; 



  text-transform:uppercase;



    font-family: "InstallationSSK-Bold", serif; 



	margin-bottom:0px; 



	font-size:30px; 



	margin-top:35px;



}



#team h6 { 



font-size:14px; 



text-align:center; 



margin-bottom:20%; 



}



#team p { 



font-size:18px; 



text-align:center; 



line-height:24px; 



color:#000000;



}



#team img { 



-moz-transition: all 0.3s;



  -webkit-transition: all 0.3s ;



  transition: all 0.3s; 



}







#team img:hover { 



 -moz-transform: scale(1.2);



  -webkit-transform: scale(1.2);



  transform: scale(1.2);



}



@media only screen and (max-width: 768px) {



#team h6 {



  min-height: 60px;



}



}



@media only screen and (max-width: 600px) {



.col-spec-five { 



width:50%;



}



#team h6 {



  min-height: 60px;



  margin-bottom:0%; 







}



}



@media only screen and (max-width: 400px) {



#team h6 {



  min-height: 0px;



  margin-bottom:0%; 







}



 



}







/* ===================================================================



 *  15. clients - (_layout.scss)



 *



 * ------------------------------------------------------------------- */



#clients {



  background-color: #e5e5e5;



  padding: 4rem 0 10rem;



}



#clients h2 {



  color: #000000; 



  text-transform:uppercase;



    font-family: "InstallationSSK-Bold", serif; 



	margin-bottom:40px; 



	font-size:30px; 



	margin-top:40px;



}



#clients .col-two {



  filter: gray; /* IE6-9 */



  filter: url("../images/filters.svg#grayscale");



  -webkit-filter: grayscale(100%);



  -moz-filter: grayscale(100%);



  -ms-filter: grayscale(100%);



  -o-filter: grayscale(100%);



  filter: grayscale(100%);



}



#clients .col-two:hover {



  filter: none;



  transition: all 0.2s linear 0s;



  -webkit-filter: grayscale(0);



}



/* ===================================================================



 *  16. contact - (_layout.scss)



 *



 * ------------------------------------------------------------------- */



#contact {



  background-color: #ffffff;



   padding: 1rem 0 5rem;



  position: relative; 

  min-height:800px;



}



#contact .contact-wrapper { width: 100%; position:relative;  padding-top: 48%;  } 







#contact .canvas { width: 100%; height: 100%; z-index: 100; position: absolute; text-align: center; top: 0px; left: 0px;  background-color: transparent; } 



#contact #myCanvas { width: 100%; display: block; overflow: hidden; }







#contact .contact-form { 



 position: absolute;



 top: 17%; 



 left: 50%;



 transform: translate(-50%,0%);



 -ms-transform: translate(-50%,0%);



-webkit-transform: translate(-50%,0%);



-moz-transform: translate(-50%,0%);



-o-transform: translate(-50%,0%);



 z-index:101; 



 width:40%;



 }







#contact .contact-form h1 {



color: #000;



font-family: "InstallationSSK-Bold",serif;



font-size: 75px;



line-height: 70px;



margin-bottom: 0;



}



#contact .contact-form p {



font-size: 24px;



line-height: 28px;



margin: 0;



}



/* contact info */



.contact-info .cinfo {



  margin-bottom: 4.2rem;



}







/* contact form */



#contact form {



  margin-top: 0;



  margin-bottom: 3rem;



}



#contact form .form-field {



}



#contactForm .col1 { 



padding:0 3px 0 0; 



}



#contactForm .col2 { 



padding:0 0 0 3px; 



}



#contact form .form-field:before, #contact form .form-field:after {



  content: "";



  display: table;



}



#contact form .form-field:after {



  clear: both;



}







#contact form ::-webkit-input-placeholder {



  color: rgba(0,0,0, 1);



}



#contact form :-moz-placeholder {



  color: rgba(0,0,0, 1);



  /* Firefox 18- */



}



#contact form ::-moz-placeholder {



  color: rgba(0,0,0, 1);



  /* Firefox 19+ */



}



#contact form :-ms-input-placeholder {



  color: rgba(0,0,0, 1);



}



#contact form .placeholder {



  color: rgba(0,0,0, 1); !important;



}







#contact input[type="text"],



#contact input[type="password"],



#contact input[type="email"],



#contact textarea {



  width: 100%;



  color: #000;



  margin-bottom: 5px;



  background: #dcdcdc; 



  border-radius:5px;



}







#contact input[type="text"]:focus,



#contact input[type="password"]:focus,



#contact input[type="email"]:focus {



  color: #000;



}







#contact textarea {



  min-height: 17rem;



  padding: 1.8rem 2rem;



}



#contact textarea:focus {



  color: #000;



}







#contact button.submitform, #contact button.moreform {



  font-size: 1.5rem;



  display: block;



  letter-spacing: .2rem;



  height: 5rem;



  line-height: 5rem;



  padding: 0 3rem;



  width: 100%;



  background: #ffffff;



  color: #000000;



  margin: 0; 



  border:1px solid #dcdcdc;



  border-radius:8px;



}



#contact button.submitform:hover, #contact button.submitform:focus {



  background: #f89e0f;



}







#message-warning, #message-success {



  display: none;



  background: #000000;



  padding: 3rem;



  margin-bottom: 3.6rem;



  width: 100%;



}







#message-warning {



  color: #D32B2E;



}







#message-success {



  color: #f9a828;



}







#message-warning i,



#message-success i {



  margin-right: 10px;



}







/* form loader */



#submit-loader {



  display: none;



  position: relative;



  left: 0;



  top: 1.8rem;



  width: 100%;



  text-align: center;



  margin-bottom: 4.2rem;



}



#submit-loader .text-loader {



  display: none;



  font-family: "InstallationSSK", sans-serif;



  font-size: 1.4rem;



  color: #FFFFFF;



  letter-spacing: .2rem;



  text-transform: uppercase;



}







.oldie #submit-loader .s-loader {



  display: none;



}



.oldie #submit-loader .text-loader {



  display: block;



}







/* --------------------------------------------------------------- 



 * loader animation - (_layout.scss)



 * --------------------------------------------------------------- */



.s-loader {



  margin: 1.2rem auto 3rem;



  width: 70px;



  text-align: center;



  -webkit-transform: translateX(0.45rem);



  -ms-transform: translateX(0.45rem);



  transform: translateX(0.45rem);



}







.s-loader > div {



  width: 9px;



  height: 9px;



  background-color: #000;



  border-radius: 100%;



  display: inline-block;



  margin-right: .9rem;



  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;



  animation: sk-bouncedelay 1.4s infinite ease-in-out both;



}







.s-loader .bounce1 {



  -webkit-animation-delay: -0.32s;



  animation-delay: -0.32s;



}







.s-loader .bounce2 {



  -webkit-animation-delay: -0.16s;



  animation-delay: -0.16s;



}







@-webkit-keyframes sk-bouncedelay {



  0%, 80%, 100% {



    -webkit-transform: scale(0);



    -ms-transform: scale(0);



    transform: scale(0);



  }



  40% {



    -webkit-transform: scale(1);



    -ms-transform: scale(1);



    transform: scale(1);



  }



}



@keyframes sk-bouncedelay {



  0%, 80%, 100% {



    -webkit-transform: scale(0);



    -ms-transform: scale(0);



    transform: scale(0);



  }



  40% {



    -webkit-transform: scale(1);



    -ms-transform: scale(1);



    transform: scale(1);



  }



}



/* ------------------------------------------------------------------- 



 * responsive:



 * contact 



 * ------------------------------------------------------------------- */



@media only screen and (max-width: 1200px) {



#contact .contact-form h1 {



  font-size: 75px;



}



}



@media only screen and (max-width: 1024px) {



#contact .contact-wrapper {



  padding-top: 60%;



}



#contact .contact-form h1 {



  font-size: 66px;



}



#contact .contact-form p {



  font-size: 20px;



  line-height: 24px;



  margin: 0;



}



.footer-main p {



  font-size: 20px;



}



}







@media only screen and (max-width: 900px) {



#contact .contact-wrapper {



  padding-top: 70%;



}



#contact .contact-form {



  width: 60%;



}



.footer-main p {



  font-size: 16px;



}



}



@media only screen and (max-width: 768px) {



 #contact .contact-form h1 {



  font-size: 52px; 



  line-height:50px



}



#contact .contact-form p {



  font-size: 17px;



  line-height: 20px;



  margin: 0;



}



#contact .contact-wrapper {



  padding-top: 100%;



}



.footer-main p {



  font-size: 18px !important;



}



}



@media only screen and (max-width: 600px) {



#contact .contact-form h1 {



  font-size: 44px; 



  line-height:44px



}



#contact .contact-form p {



  font-size: 17px;



  line-height: 20px;



  margin: 0;



}



#contact .contact-wrapper {



  padding-top: 120%;



}



#contact #myCanvas {



  display: block;



  height: 100%;



  overflow: hidden;



  width: 100%;



}







}



@media only screen and (max-width: 500px) {



#contact .contact-wrapper {



  padding-top: 180%;



}



#contact {



  padding: 1rem 0 0rem;



}



#contact .contact-form h1 {



  font-size: 36px;



  line-height: 36px;



}



}



@media only screen and (max-width: 400px) {



#contact .contact-wrapper {



  padding-top: 168%;



}







#contact .contact-form {



  width: 75%;



}



#contact .contact-form p {



  font-size: 16px;



  line-height: 16px;



  margin: 0;



}



#contact textarea {



  min-height: 10rem;



  padding: 1rem 2rem;



}



#contact {



  background-color: #ffffff;



  padding: 1rem 0 2rem;



  position: relative; 



}







}











/* ===================================================================



 *  17. footer - (_layout.scss)



 *



 * ------------------------------------------------------------------- */



footer {



  padding: 0 0 7rem 0;





  font-size: 1.5rem;



  color: rgba(255, 255, 255, 0.4);

  background: rgba(255, 255, 255, 1);



}















/* footer main



 * --------------------------------- */



.footer-main {



  padding-top: 3rem;



  padding-bottom: 1rem; 



  text-align:center



}



.footer-main p { 



color:#000000; 



font-size:17px; 



margin:0;



}



.footer-main ul {



  font-size: 1.5rem;



  margin-left: 0; 

  margin-top:15px;



}



.footer-main ul li {



  list-style: none;



  padding-left: 0;



}



.footer-main ul a, .footer-main ul a:visited {



  color: rgba(255, 255, 255, 0.4);



}



.footer-main ul a:hover, .footer-main ul a:focus {



  color: #FFFFFF;



}



.footer-social li { 



float:left;







} 



.footer-social li a { 



width:32px; 



height:25px;



float:left;



}



.footer-social li:first-child a { 



background:url(../images/social-footer.png) no-repeat 0 0;



}



.footer-social li:nth-child(2) a { 



background:url(../images/social-footer.png) no-repeat -32px 0;



}



.footer-social li:nth-child(3) a { 



background:url(../images/social-footer.png) no-repeat -64px 0;



}



.footer-social li:nth-child(4) a { 



background:url(../images/social-footer.png) no-repeat -96px 0;



}



.footer-social li:last-child a { 



background:url(../images/social-footer.png) no-repeat -128px 0;



}



.footer-social li:first-child a:hover { 



background:url(../images/social-footer-hover.png) no-repeat 0 0;



}



.footer-social li:nth-child(2) a:hover { 



background:url(../images/social-footer-hover.png) no-repeat -32px 0;



}



.footer-social li:nth-child(3) a:hover { 



background:url(../images/social-footer-hover.png) no-repeat -64px 0;



}



.footer-social li:nth-child(4) a:hover { 



background:url(../images/social-footer-hover.png) no-repeat -96px 0;



}



.footer-social li:last-child a:hover { 



background:url(../images/social-footer-hover.png) no-repeat -128px 0;



}







#go-top {



  position: fixed;



  bottom: 42px;



  right: 30px;



  z-index: 700;



  display: none;



}



#go-top a {



  text-decoration: none;



  border: 0 none;



  display: block;



  height: 63px;



  width: 60px;



  line-height: 63px;



  text-align: center;



  background-color: #000000;



  color: #888;



  text-align: center;



  text-transform: uppercase;



  -moz-transition: all 0.3s ease-in-out;



  -o-transition: all 0.3s ease-in-out;



  -webkit-transition: all 0.3s ease-in-out;



  -ms-transition: all 0.3s ease-in-out;



  transition: all 0.3s ease-in-out;



}



#go-top a i {



  font-size: 1.7rem;



  line-height: inherit;



}



#go-top a:visited {



  background: #000000;



  color: #888;



}



#go-top a:hover, #go-top a:focus {



  background: #000000;



  color: #FFFFFF;



}







#side-menu {

  position: fixed;

  top: 50%;

  left: 0px;

  z-index: 700;

  display: none;

  background: #fff; 

  padding:5px 10px 0;

   -moz-transition: all 0.3s ease-in-out;

 -o-transition: all 0.3s ease-in-out;

  -webkit-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out; 

  width:20%;

}



#side-menu:hover { 



/*padding-left:30px;*/

width:21%;

}



#side-menu #side-menu-trigger {

  text-decoration: none;

  border: 0 none;

  display: block;

  text-align: right;

  color: #888;

  text-transform: uppercase;

}







/* ------------------------------------------------------------------- 



 * responsive:



 * footer



 * ------------------------------------------------------------------- */



@media only screen and (max-width: 768px) {



  #go-top {



    bottom: 0;



    right: 0;



  }







  .footer-main {



    text-align: center;



  }



  .footer-main .row {



    max-width: 480px;



  }



  .footer-main [class*="col-"] {



    margin-bottom: 3.6rem;



  }







  footer h4.h05 {



    padding-bottom: 3rem;



    margin-bottom: 3rem;



  }







  footer h4.h05::after {



    left: 50%;



    margin-left: -50px;



  }



}



@media only screen and (max-width: 600px) {



  .footer-bottom {



    padding-bottom: .6rem;



  }



  .footer-bottom .copyright span {



    display: block;



  }



  .footer-bottom .copyright span::after {



    display: none;



  }



}