/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */
/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
html,
button,
input,
select,
textarea {
  color: #222; }

html {
  font-size: 1em;
  line-height: 1.4;
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 400; }

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */
::-moz-selection {
  background: #b3d4fc;
  text-shadow: none; }

::selection {
  background: #b3d4fc;
  text-shadow: none; }

/*
 * A better looking default horizontal rule
 */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0; }

/*
 * Remove the gap between images, videos, audio and canvas and the bottom of
 * their containers: h5bp.com/i/440
 */
audio,
canvas,
img,
video {
  vertical-align: middle; }

/*
 * Remove default fieldset styles.
 */
fieldset {
  border: 0;
  margin: 0;
  padding: 0; }

/*
 * Allow only vertical resizing of textareas.
 */
textarea {
  resize: vertical; }

/* ==========================================================================
   Browse Happy prompt
   ========================================================================== */
.browsehappy {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0; }

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.clearfix:before, #contact > div:first-child > div:first-child:before,
.clearfix:after,
#contact > div:first-child > div:first-child:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */ }

.clearfix:after, #contact > div:first-child > div:first-child:after {
  clear: both; }

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
/* colors */
html {
  box-sizing: border-box; }

*, *:before, *:after {
  box-sizing: inherit; }

a {
  color: inherit;
  text-decoration: none; }
  a:hover {
    text-decoration: underline; }

.font-2, #content h1, #home-page > div:first-child > div > div > h1, #references-page > div ul > li h2 {
  font-family: 'Merriweather', serif; }

.inline, .text-line, #contact > div:nth-child(2) h2, #home-page > div:nth-child(2) > div > div > h2, header #desktop-header .header-top > div:first-child, header #desktop-header .header-top > div:first-child .logo, header #desktop-header .header-top > div:first-child .logo > img, header #desktop-header .header-top > div:first-child .logo > h1, header #desktop-header .header-top > div:nth-child(2), header #desktop-header .header-top > div:nth-child(2) li, header #desktop-header .header-bottom nav ul li, header #mobile-header > div .logo h1, header #mobile-header nav ul li, #blue-banner > div > div, #contact > div, #contact > div:first-child > div:first-child > h1, #contact > div:first-child > div:first-child > ul, #contact > div:first-child > div:nth-child(2) > div:first-child, #contact > div:first-child > div:nth-child(2) > div:nth-child(2), #home-page > div:nth-child(2) > div > div, #certificates-page > div .certificates-desktop > div > a, #references-page > div ul > li {
  display: inline-block;
  vertical-align: top; }

.center, header #desktop-header, #blue-banner > div, #contact, footer, #home-page > div:first-child > div, #home-page > div:nth-child(2), #about-page > div, #certificates-page > div, #equipment-page > div, #references-page > div, #portfolio-page > div {
  width: 1180px;
  padding: 0 10px;
  margin-left: auto;
  margin-right: auto;
  position: relative; }

.text-line:before, #contact > div:nth-child(2) h2:before, #home-page > div:nth-child(2) > div > div > h2:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50%;
  border-bottom: 2px solid #0b2d84; }
.text-line:after, #contact > div:nth-child(2) h2:after, #home-page > div:nth-child(2) > div > div > h2:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 50%;
  border-bottom: 2px solid #222222; }

#main {
  position: relative; }

header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: #ffffff; }
  @media (max-width: 767px) {
    header {
      position: static; } }
  header #desktop-header {
    position: relative; }
    header #desktop-header .active_desktop {
      background: #203672;
      color: #ffffff; }
    header #desktop-header .header-top {
      padding: 10px 0; }
      header #desktop-header .header-top > div:first-child .logo > img {
        height: 42px; }
      header #desktop-header .header-top > div:first-child .logo > h1 {
        font-weight: 700;
        font-style: italic;
        font-size: 30px;
        margin: 0;
        color: #0b2d84; }
      header #desktop-header .header-top > div:nth-child(2) {
        position: absolute;
        right: 10px;
        /* parents padding */ }
        header #desktop-header .header-top > div:nth-child(2) li {
          cursor: pointer;
          line-height: 42px;
          /* logo's height */ }
    header #desktop-header .header-bottom {
      padding-top: 10px; }
      header #desktop-header .header-bottom nav {
        position: relative; }
        header #desktop-header .header-bottom nav ul {
          border-top: 1px solid #ddd; }
          header #desktop-header .header-bottom nav ul li {
            border-left: 1px solid #ddd;
            padding: 10px; }
          header #desktop-header .header-bottom nav ul li:first-child {
            border-left: none; }
        header #desktop-header .header-bottom nav .jump-to-contact {
          position: absolute;
          right: 10px;
          top: 10px;
          cursor: pointer; }
  header #mobile-header {
    position: relative;
    padding: 10px; }
    header #mobile-header .active_mobile {
      background: #203672;
      color: #ffffff; }
    header #mobile-header > div {
      height: 40px; }
      header #mobile-header > div #call-mobile-menu {
        line-height: 40px;
        /* parents height */
        cursor: pointer; }
      header #mobile-header > div .logo {
        position: absolute;
        right: 10px;
        line-height: 40px;
        /* parents height */ }
        header #mobile-header > div .logo img {
          height: 30px;
          vertical-align: middle; }
        header #mobile-header > div .logo h1 {
          font-weight: 700;
          font-style: italic;
          font-size: 18px;
          margin: 0;
          color: #0b2d84;
          vertical-align: middle;
          margin-left: 10px; }
    header #mobile-header nav ul {
      max-height: 0;
      overflow: hidden;
      -webkit-transition: all 0.2s ease-in-out;
      -moz-transition: all 0.2s ease-in-out;
      -ms-transition: all 0.2s ease-in-out;
      -o-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-in-out; }
      header #mobile-header nav ul.visible {
        max-height: 200px; }
      header #mobile-header nav ul li {
        -webkit-transition: all 0.2s ease-in-out;
        -moz-transition: all 0.2s ease-in-out;
        -ms-transition: all 0.2s ease-in-out;
        -o-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
        background: #dddddd;
        padding: 5px;
        width: 30%;
        margin-top: 5px;
        margin-bottom: 5px;
        color: #0b2d84; }
        @media (max-width: 480px) {
          header #mobile-header nav ul li {
            text-align: center; } }
        header #mobile-header nav ul li:hover {
          background: #203672; }
          header #mobile-header nav ul li:hover > a, header #mobile-header nav ul li:hover span {
            color: #ffffff; }
        header #mobile-header nav ul li a {
          display: block; }
          @media (max-width: 320px) {
            header #mobile-header nav ul li a {
              font-size: 12px; } }
        header #mobile-header nav ul li span {
          cursor: pointer; }
          header #mobile-header nav ul li span:hover {
            text-decoration: underline; }
          @media (max-width: 320px) {
            header #mobile-header nav ul li span {
              font-size: 12px; } }
        header #mobile-header nav ul li img {
          cursor: pointer; }
      header #mobile-header nav ul li:nth-child(3n+2) {
        margin-left: 5%;
        margin-right: 5%; }
      header #mobile-header nav ul li:nth-of-type(-n+6) {
        line-height: 32px; }

#blue-banner {
  background: #adbadd;
  padding: 20px 0; }
  #blue-banner > div > div {
    width: 50%;
    padding: 10px;
    text-align: center; }
    #blue-banner > div > div a {
      font-weight: 700; }

#contact {
  margin: 20px auto; }
  #contact > div {
    width: 50%;
    padding: 10px 0; }
    @media (max-width: 979px) {
      #contact > div {
        width: 100%;
        display: block; } }
  #contact > div:first-child > div:first-child {
    padding: 20px; }
    #contact > div:first-child > div:first-child > img {
      float: left;
      height: 66px;
      margin-right: 20px; }
      @media (max-width: 540px) {
        #contact > div:first-child > div:first-child > img {
          float: none;
          display: block;
          margin: 0 auto; } }
    #contact > div:first-child > div:first-child > h1 {
      line-height: 66px;
      margin: 0;
      float: left;
      color: #0b2d84;
      font-style: italic; }
      @media (max-width: 1199px) {
        #contact > div:first-child > div:first-child > h1 {
          font-size: 24px; } }
      @media (max-width: 540px) {
        #contact > div:first-child > div:first-child > h1 {
          float: none;
          display: block;
          text-align: center; } }
    #contact > div:first-child > div:first-child > ul {
      float: right; }
      @media (max-width: 540px) {
        #contact > div:first-child > div:first-child > ul {
          float: none;
          display: block;
          text-align: center; } }
  #contact > div:first-child > div:nth-child(2) {
    border-top: 1px solid #e3e3e3;
    border-bottom: 1px solid #e3e3e3;
    padding: 20px;
    margin: 20px;
    text-align: center; }
    #contact > div:first-child > div:nth-child(2) > div:first-child {
      width: 50%;
      padding: 10px; }
      @media (max-width: 540px) {
        #contact > div:first-child > div:nth-child(2) > div:first-child {
          width: 100%;
          display: block; } }
    #contact > div:first-child > div:nth-child(2) > div:nth-child(2) {
      width: 50%;
      padding: 10px;
      border-left: 1px solid #e3e3e3; }
      @media (max-width: 540px) {
        #contact > div:first-child > div:nth-child(2) > div:nth-child(2) {
          width: 100%;
          display: block;
          border-left: none;
          border-top: 1px solid #e3e3e3; } }
  #contact > div:nth-child(2) h2 {
    position: relative;
    margin: 0;
    padding: 0 0 1em;
    color: #0b2d84; }
    @media (max-width: 540px) {
      #contact > div:nth-child(2) h2 {
        width: 100%;
        display: block;
        text-align: center; } }
  #contact > div:nth-child(2) form {
    padding: 20px 0; }
    #contact > div:nth-child(2) form input[type=text], #contact > div:nth-child(2) form input[type=email] {
      width: 100%;
      display: block;
      margin-bottom: 20px;
      border: 1px solid #e3e3e3;
      padding: 10px; }
    #contact > div:nth-child(2) form textarea {
      width: 100%;
      display: block;
      margin-bottom: 20px;
      border: 1px solid #e3e3e3;
      min-height: 100px;
      padding: 10px; }
    #contact > div:nth-child(2) form input[type=submit], #contact > div:nth-child(2) form button {
      border: 1px solid #02091A;
      outline: 0;
      background: #0b2d84;
      color: #fff;
      padding: 5px 20px; }
      #contact > div:nth-child(2) form input[type=submit]:hover, #contact > div:nth-child(2) form button:hover {
        -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        -ms-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
        background: #071F5C; }
      @media (max-width: 540px) {
        #contact > div:nth-child(2) form input[type=submit], #contact > div:nth-child(2) form button {
          width: 100%;
          padding: 10px 20px; } }

#map-canvas {
  height: 600px;
  width: 100%; }
  @media (max-width: 540px) {
    #map-canvas {
      height: 300px; } }

footer h4 {
  color: #0b2d84;
  font-weight: 300;
  text-align: center; }

#content h1 {
  position: relative;
  font-weight: 700; }

/* templates */
#home-page > div:first-child {
  background: url("../img/main-slider/slider-img-1.jpg") no-repeat center center;
  height: 900px;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  padding: 120px 0 20px; }
  @media (max-width: 650px) {
    #home-page > div:first-child {
      height: auto;
      padding: 20px 0; } }
  #home-page > div:first-child > div > div {
    background: rgba(0, 0, 0, 0.5);
    padding: 50px;
    width: 600px;
    text-align: center;
    margin: 150px auto 0; }
    @media (max-width: 650px) {
      #home-page > div:first-child > div > div {
        width: 90%;
        margin: 150px 5%; } }
    @media (max-width: 450px) {
      #home-page > div:first-child > div > div {
        width: 100%;
        margin: 50px 0;
        text-align: center; } }
    #home-page > div:first-child > div > div > h1 {
      color: #ffffff; }
      @media (max-width: 450px) {
        #home-page > div:first-child > div > div > h1 {
          font-size: 24px; } }
      @media (max-width: 400px) {
        #home-page > div:first-child > div > div > h1 {
          font-size: 18px; } }
#home-page > div:nth-child(2) {
  padding: 20px 0; }
  #home-page > div:nth-child(2) > div {
    border-bottom: 1px solid #e3e3e3;
    padding: 10px 0; }
    #home-page > div:nth-child(2) > div > div {
      padding: 20px;
      width: 50%; }
      @media (max-width: 650px) {
        #home-page > div:nth-child(2) > div > div {
          text-align: center;
          display: block;
          width: 100%; } }
      #home-page > div:nth-child(2) > div > div > h2 {
        position: relative;
        padding: 1em 0;
        margin: 0;
        color: #0b2d84; }
      #home-page > div:nth-child(2) > div > div:first-child {
        border-right: 1px solid #e3e3e3; }
        @media (max-width: 650px) {
          #home-page > div:nth-child(2) > div > div:first-child {
            border-right: 0;
            border-bottom: 1px solid #e3e3e3; } }
        #home-page > div:nth-child(2) > div > div:first-child a {
          font-weight: 700; }
      #home-page > div:nth-child(2) > div > div:nth-child(2) > ul {
        margin: 1em 0; }
        #home-page > div:nth-child(2) > div > div:nth-child(2) > ul > li {
          margin: 1em 0; }
      #home-page > div:nth-child(2) > div > div:nth-child(2) > p > a {
        font-weight: 700; }

#about-page {
  padding: 120px 0 20px;
  background: #203672;
  color: #ffffff; }
  @media (max-width: 540px) {
    #about-page {
      padding: 20px 0; } }
  #about-page > div p > span {
    text-decoration: underline; }
  #about-page > div img {
    width: 100%;
    margin: 50px 0; }

#certificates-page {
  padding: 120px 0 20px;
  background: #203672;
  color: #ffffff; }
  @media (max-width: 767px) {
    #certificates-page {
      padding: 20px 0; } }
  @media (max-width: 1199px) {
    #certificates-page > div .certificates-desktop {
      text-align: center; } }
  #certificates-page > div .certificates-desktop > div > a {
    width: 380px;
    margin-top: 10px;
    margin-bottom: 10px; }
    #certificates-page > div .certificates-desktop > div > a:nth-child(3n+2) {
      margin-left: 10px;
      margin-right: 10px; }
    #certificates-page > div .certificates-desktop > div > a > img {
      width: 380px;
      padding: 10px; }
  #certificates-page .certificates-mobile {
    display: none; }
    @media (max-width: 980px) {
      #certificates-page .certificates-mobile {
        display: block; } }
  @media (max-width: 980px) {
    #certificates-page .certificates-desktop {
      display: none; } }
  #certificates-page #certificatesGallery {
    height: auto !important;
    max-height: 640px !important; }
    #certificates-page #certificatesGallery img {
      width: 100%; }

#equipment-page {
  padding: 120px 0 20px;
  background: #203672;
  color: #ffffff; }
  @media (max-width: 767px) {
    #equipment-page {
      padding: 20px 0; } }
  #equipment-page > div > ul {
    margin: 1em 0;
    padding: 0 0 0 40px;
    list-style-type: inherit; }
  #equipment-page > div > div {
    margin-top: 50px;
    height: 100%; }
    #equipment-page > div > div #equipmentGallery {
      height: auto !important;
      max-height: 640px !important; }
      #equipment-page > div > div #equipmentGallery img {
        width: 100%; }

#references-page {
  padding: 120px 0 20px;
  background: #203672;
  color: #ffffff; }
  @media (max-width: 767px) {
    #references-page {
      padding: 20px 0; } }
  @media (max-width: 1199px) {
    #references-page > div {
      text-align: center; } }
  #references-page > div ul > li {
    width: 380px;
    margin-top: 10px;
    margin-bottom: 10px;
    background: #ffffff;
    border: 1px solid #e3e3e3; }
    @media (max-width: 1199px) {
      #references-page > div ul > li {
        margin-right: 10px;
        margin-left: 10px; } }
    @media (max-width: 450px) {
      #references-page > div ul > li {
        width: 100%;
        margin-top: 10px;
        margin-bottom: 10px;
        margin-right: 0px;
        margin-left: 0px; } }
    #references-page > div ul > li > div {
      padding: 10px; }
    #references-page > div ul > li:nth-child(3n+2) {
      margin-right: 10px;
      margin-left: 10px; }
      @media (max-width: 450px) {
        #references-page > div ul > li:nth-child(3n+2) {
          margin-right: auto;
          margin-left: auto; } }
    #references-page > div ul > li > img {
      width: 380px;
      height: 285px; }
      @media (max-width: 450px) {
        #references-page > div ul > li > img {
          width: 100%; } }
    #references-page > div ul > li a {
      color: #0b2d84;
      font-weight: 400; }
    #references-page > div ul > li h2 {
      border-bottom: 1px solid #e3e3e3;
      font-weight: 700; }
    #references-page > div ul > li h2, #references-page > div ul > li p {
      color: #222; }
    #references-page > div ul > li p {
      font-weight: 300; }

#portfolio-page {
  padding: 120px 0 20px;
  background: #203672;
  color: #ffffff; }
  @media (max-width: 767px) {
    #portfolio-page {
      padding: 20px 0; } }
  #portfolio-page > div > div {
    margin-top: 50px; }
    #portfolio-page > div > div #portfolioGallery {
      height: auto !important;
      max-height: 640px !important; }
      #portfolio-page > div > div #portfolioGallery img {
        width: 100%; }

#messages {
  font-size: 2em;
  color: #0b2d84; }

/* ==========================================================================
   Helper classes
   ========================================================================== */
.hidden {
  display: none !important;
  visibility: hidden; }

/* ==========================================================================
   Media query's
   ========================================================================== */
/* default styles */
@media (min-width: 1200px) {
  #mobile-header {
    display: none !important;
    visibility: hidden; } }
/* Large desktop */
@media (min-width: 980px) and (max-width: 1199px) {
  .center, header #desktop-header, #blue-banner > div, #contact, footer, #home-page > div:first-child > div, #home-page > div:nth-child(2), #about-page > div, #certificates-page > div, #equipment-page > div, #references-page > div, #portfolio-page > div {
    width: 960px; }

  #mobile-header {
    display: none !important;
    visibility: hidden; } }
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
  .center, header #desktop-header, #blue-banner > div, #contact, footer, #home-page > div:first-child > div, #home-page > div:nth-child(2), #about-page > div, #certificates-page > div, #equipment-page > div, #references-page > div, #portfolio-page > div {
    width: 748px; }

  #mobile-header {
    display: none !important;
    visibility: hidden; } }
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
  .center, header #desktop-header, #blue-banner > div, #contact, footer, #home-page > div:first-child > div, #home-page > div:nth-child(2), #about-page > div, #certificates-page > div, #equipment-page > div, #references-page > div, #portfolio-page > div {
    width: 100%; }

  #desktop-header {
    display: none !important;
    visibility: hidden; } }
/* Landscape phones and down */
@media (max-width: 480px) {
  .center, header #desktop-header, #blue-banner > div, #contact, footer, #home-page > div:first-child > div, #home-page > div:nth-child(2), #about-page > div, #certificates-page > div, #equipment-page > div, #references-page > div, #portfolio-page > div {
    width: 100%; }

  #desktop-header {
    display: none !important;
    visibility: hidden; } }
/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */
@media print {
  * {
    background: transparent !important;
    color: #000 !important;
    /* Black prints faster: h5bp.com/s */
    box-shadow: none !important;
    text-shadow: none !important; }

  a,
  a:visited {
    text-decoration: underline; }

  a[href]:after {
    content: " (" attr(href) ")"; }

  abbr[title]:after {
    content: " (" attr(title) ")"; }

  /*
   * Don't show links for images, or javascript/internal links
   */
  .ir a:after,
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: ""; }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid; }

  thead {
    display: table-header-group;
    /* h5bp.com/t */ }

  tr,
  img {
    page-break-inside: avoid; }

  img {
    max-width: 100% !important; }

  @page {
    margin: 0.5cm; }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3; }

  h2,
  h3 {
    page-break-after: avoid; } }
/* .ng-leave {
    -webkit-animation:slideOutLeft 0.2s both ease-in;
    -moz-animation:slideOutLeft 0.2s both ease-in;
    animation:slideOutLeft 0.2s both ease-in;   
}

.ng-enter {  
    -webkit-animation:slideInRight 0.2s both ease-in;
    -moz-animation:slideInRight 0.2s both ease-in;
    animation:slideInRight 0.2s both ease-in;    
}


@keyframes slideInRight {
    from    { transform:translateX(100%); }
    to      { transform: translateX(0); }
}
@-moz-keyframes slideInRight {
    from    { -moz-transform:translateX(100%); }
    to      { -moz-transform: translateX(0); }
}
@-webkit-keyframes slideInRight {
    from    { -webkit-transform:translateX(100%); }
    to      { -webkit-transform: translateX(0); }
}

@keyframes slideOutLeft {
    to      { transform: translateX(-100%); }
}
@-moz-keyframes slideOutLeft {  
    to      { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes slideOutLeft {
    to      { -webkit-transform: translateX(-100%); }
} */
/* Styles go here */
.ng-enter {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease; }

/*.ng-leave {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}*/
.ng-enter {
  opacity: 0; }

.ng-enter-active {
  opacity: 1; }

.ng-leave {
  opacity: 1; }

.ng-leave-active {
  opacity: 0; }

.ng-invalid {
  color: #0b2d84; }

/* really specific css rules applied by angular */
.has-error {
  color: #0b2d84; }

/*# sourceMappingURL=main.css.map */