/* ===== Cocona Custom Styles ===============================================
   Author: Lychee Designs 
   ========================================================================== */

/* ===== TABLE OF CONTENTS ================================================== 

   1. General
   2. Header
   3. Featured
   4. Feature
   5. Divider
   6. Blocks
   7. Content
   8. Quote
   9. Map
  10. Team
  11. Contact
  12. Footer
  13. @Media


/* ===== 1. GENERAL ========================================================== */

   body, h1, h2, h3, p
   {
   margin:0;padding:0;
   overflow-x:hidden;
   }

  body, html {
    overflow-x:hidden;
  }

   body {
   	font-family: 'Open Sans', sans-serif;
    background-color: #ffffff;
  }

  .mobile body {
    overflow: hidden;
  }

  .mobile #wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
  }

  .mobile #scroller {
  }

   .wrapper {
      padding: 5% 20px;
      margin: 0 auto;
      width: 1100px;
      overflow: inherit;
      box-sizing:border-box;
      -moz-box-sizing: border-box;
   }

   .clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }

   .clearfix { display: inline-block; }
   /* start commented backslash hack \*/
   * html .clearfix { height: 1%; }
   .clearfix { display: block; }
   /* close commented backslash hack */

   h2 {
      margin-top:0;
      margin-bottom:15px;
   }

   p {
      line-height: 1.6;
      color: #6f787e;
      font-family: 'Open Sans', sans-serif;
      font-weight: 300;
   }

   h2, h3 {
      color: #304280;
      font-family: 'Open Sans', sans-serif;
   }


/* ===== 2. HEADER ========================================================== */

   #header {
   	background-image: url("../img/bg-header.png");
   	background-size: cover;
   	background-position: center center;
    background-position-x: 0 !important;
   	background-repeat: no-repeat;
    min-height: 580px;
   }

   #header div {
   	position: relative;
   	width: 650px;
   	margin: 0 auto;
    padding:20px;
   	padding-top: 16%;
   	text-align: left;
   	color: white;
   }

   #header h1, 
   #header p {
    margin-top: 50px;
   	margin-left: 180px;
      color: white;
   }

   #header h1 {
   	font-weight: 400;
   	font-size: 40px; 
   	margin-top: 0;
   	margin-bottom: 1px;
   	padding: 0;
    display: none;
   }

   #header h1 b {
   	font-weight: 800;
   }

   #header p {
   	font-weight: 300; 
   	font-size: 24px; 
   	margin-top: 0; 
   	padding: 0;
    display: none;
   }

   #header img {
    margin-top: -50px;
    margin-left: -30px;
   	position: absolute;
    display: none;
   }

   div.frame {
    border-style: dashed;
    padding: 20px;
   }

/* ===== 3. FEATURED ========================================================= */

   #featured {
      background-color: #fafafa;
   }

   #featured .phone {
      width:28%;
      margin-right:3%;
      margin-top:-10%;
   }

   #featured aside {
      float: right;
      width:66%;
      display: block;
   }

   #featured h2 {
      margin-top:0;
   }

   #featured p {
    text-align: justify;
   }

   #featured img {
    box-shadow: 0px 0px 30px #888888
   }

   #featured .device-links {
    display: block;
    margin-top: 6%;
   }

   #featured .device-links img {
    margin-right:15px;
    transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -webkit-transition: .25s ease-in-out;
    opacity: 0.7;
   }

   #featured .device-links img:hover {
    opacity: 1;
   }


/* ===== 4. FEATURE ========================================================== */

   #feature {
      clear: both;
      padding-top:2%;
   }
   #feature img{
    box-shadow: 0px 0px 30px #888888
   }

   #feature .imac {
      float: right;
      width:40%;
      margin-left:3%;
      margin-top:-6%;
      display: none;
   }

   #feature aside {
      float: left;
      width:44%;
   }

   #feature h2 {
      margin-top:0;
   }

   #feature p {
    text-align: justify;
   }

   .button {
    background-color: #5f686d;
    padding: 15px 40px;
    border-radius: 5%;
    color: white;
    text-align: center;
    text-decoration: none;
    margin: 40px 10px;
    text-transform: uppercase;
    font-size: 14px;
    display: inline-block;
    transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -webkit-transition: .25s ease-in-out;
   }

   .button-blue {
    background-color: #304280;
   }

   .button:hover {
    background-color: #3E4447;
   }

  .button-blue:hover {
    background-color: #4084BE;
   }

   .button:first-of-type {
    margin-left: 0;
   }


/* ===== 5. DIVIDER ========================================================== */

   .divider {
      clear: both;
   }

   .divider .wrapper {
      padding: 0;
      text-align: center;
      border-bottom: 2px solid #DBDBDB;
      height: 63px;
      margin-bottom: 47px;
      margin-top: -25px;
   }

   .divider i {
      padding-top: 32px;
      background-color: #304280;
      color: #F3F3F3;
      font-size: 30px;
      border-radius: 100%;
      border: 20px solid #F3F3F3;
      width: 92px;
      height: 60px;
      text-align: center;
   }

   .divider i {
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
     
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
 
    }  
 
    .divider i:hover  
    {
        -webkit-transform:rotate(360deg);
        -moz-transform:rotate(360deg);
        -o-transform:rotate(360deg);
    }  


/* ===== 6. BLOCKS =========================================================== */

  #blocks {
    clear: both;
  }


  #blocks .block {
    width: 30%;
    /*display: inline-block;*/
    display: inline-table;
    margin-right: 4.5%;
    margin-bottom:5%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
  }

  #blocks .block:last-child {
    margin-right: 0;
  }

  #blocks h2 {
    text-align: left;
  }

  #blocks p {
    text-align: justify;
  }


/* ===== 7. CONTENT ========================================================== */

  .content aside {
    text-align: center;
  }


/* ===== 8. QUOTE ============================================================ */

  #quote {
    background-image: url("../img/quote.png");
    background-size: cover;
    background-position: center center;
    background-position-x: 0 !important;
    background-repeat: no-repeat;
  }

  #quote h2 {
    color: white;
    text-align: center;
    margin: 85px auto;
    font-style: italic; 
    color: white;
  }


/* ===== 9. MAP ============================================================== */

  #map {
    clear: both;
    vertical-align: middle;
    overflow: hidden;
    z-index:1;
    position: relative;
    background:black;
    pointer-events: none;
  }

  #map .wrapper {
    padding:150px 0;
  }

  #map h2, #map p {
    text-align: center;
    color: white;
    font-size: 14px; 
  }

  #map h2 {
    /*text-transform: uppercase;*/
    padding-top: 0;
    font-size: 18px; 
    font-weight: bold;
  }

  #map a {
    color:white;
    text-decoration: none;
  }

  #map_canvas {
    height: 100%; 
    width: 100%; 
    position:absolute; 
    top: 0; 
    left: 0; 
    z-index: 0;
    opacity: 0.7;
    pointer-events: none;
  }

  .gmnoprint > .gmnoprint > div,
  .gmnoprint .gm-style-mtc {
    display: none !important;
  }

  .gm-style-cc {
    display: block !important;
    opacity: 0.2;
  }


/* ===== 10. TEAM ============================================================ */

  #team {
    clear: both;
    margin: 0 auto 40;
    text-align: center;
  }

  #team img {
    border-radius: 100%;
    margin-bottom: 20px;
  }

  #team .blocks {
    width: 23%;
    display: inline-block;
    margin-right: 2%;
    text-align: center;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
  }

  #team .blocks:last-child {
    margin-right: 0;
  }


/* ===== 11. CONTACT ========================================================= */

  #contact .wrapper > div {
    width: 50%;
    float: left;
    padding-right: 20px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
  }

  #contact aside {
    float: right;
    width: 50%;
    text-align: left;
    padding-left: 20px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
  }

  #contact a {
    color:grey;
    text-decoration: none;
  }

   #contact a.social,
   #contact a.social:hover {
    color:white;
  }

  .social.fa-facebook {
   width:36px;
   height:36px;
   box-sizing:border-box;
   -moz-box-sizing: border-box;
  }

  .social:first-of-type {
    margin-left:0;
  }

  .social {
    color: white;
    background-color: #dbdbdb;
    margin: 20px 5px;  
    padding: 10px; 
    border-radius: 100%;
    text-decoration: none;
    text-align: center;
    transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -webkit-transition: .25s ease-in-out;
  }

  .social:hover {
    background-color: #3E4447;
  }

 .social.fa-facebook:hover {
    background-color: #3C599B;
  }

 .social.fa-twitter:hover {
    background-color: #5EAADE;
  }

 .social.fa-linkedin:hover {
    background-color: #0274B3;
  }

  #contact div p:first-of-type {
    margin-bottom: 40px;
  }

  input, textarea {
    border: 0; 
    padding: 15px 20px; 
    background-color: #e4e4e4;
    color: #979797;
    border-radius: 5px;
    display: block;
    margin-bottom: 20px; 
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
  }

  textarea {
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
  }

  input[type=submit] {
    background-color: #304280;
    color: white;
    padding: 15px 40px; 
    text-align: center;
    text-transform: uppercase;
    font-size: 14px;
  }

 input[type=submit]:hover {
    transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -webkit-transition: .25s ease-in-out;
    background-color: #4084BE;
   }


/* ===== 12. FOOTER ========================================================= */


  #footer {
    clear: both;
    margin: 0 auto 40;
    text-align: center;
    color:#636A6F;
    background-color:#383838;
  }

  #footer a {
    color:#87929B;
    text-decoration: none;
    transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -webkit-transition: .25s ease-in-out;
  }

  #footer a:hover {
    color:white;
  }


/* ===== 13. @MEDIA ========================================================= */

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
  /* Styles */
  .wrapper {
    width:100%;
  }

  #header {
    min-height: 400px;
  }

  #blocks .block {
    display: block;
    width: 100%;
  }
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
  /* Styles */
  .wrapper {
    width:100%;
  }

  #header {
    min-height: 355px;
    background-size: inherit;
  }
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 800px) {

  /* Styles */
  .wrapper {
    width:100%;
  }

  #header {
    min-height: 400px;
    overflow: hidden;
  }

  #header div {
    width:100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
  }

  #header img {
    display: block;
    margin: 0 auto;
    text-align: center;
    position: relative;
    margin-bottom: 24px;
    margin-top:30px;
  }

  #header h1,
  #header p {
    display: block;
    text-align: center;
    margin-left:0;
  }

  .phone,
  .imac {
    display: block !important;
    width: 40% !important;
    margin-top: 5px !important;
    margin-bottom: 5px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    clear: both !important;
    float: none !important;
    min-width: 300px;
  }

  .imac img {
    text-align: center;
  }

  #featured,
  #feature,
  #blocks,
  .divider,
  .content,
  #team,
  #contact {
    padding-top:15px;
    padding-bottom:15px;
  }

  #featured aside,
  #feature aside,
  #blocks .block {
    width:100%;
    display: block;
    float:inherit;
    text-align: center;
    margin-right:0;
  }

  .button {
    padding:15px 20px;
  }

  h2 {
    font-size:1.4em;
  }

  #featured h2,
  #featured p,
  #blocks h2 {
    text-align: center;
  }

  #blocks p {
    margin-bottom:20px;
  }


  #featured .device-links {
    text-align: center;
    margin:0 auto;
  }

  #featured .device-links img {
    width:40%;
    height:auto;
    margin-bottom:0px;
    margin-right:0;
  }

  #featured .device-links a {
    margin-right:10px;
    margin-bottom:0;
  }

  #featured .device-links a:last-child,
  #featured .button:last-child {
    margin-right:0;
  }

  #map h2, #map p {
    display: block !important;
  }

  #contact .wrapper > div {
    width:100%;
    float: inherit;
    padding-right:0;
    text-align: center;
  }

  #contact aside {
    float: inherit;
    width: 100%;
    text-align: center;
    padding-left: 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
  }

  input, textarea {
    width:100%;
    box-sizing:border-box;
    -moz-box-sizing: border-box;
  }

  input[type=submit] {
    width:100%;
  }

}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
  /* Styles */
  .wrapper {
    width:100%;
  }

  #header {
    min-height: 400px;
  }

}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
  /* Styles */
  .wrapper {
    width:100%;
  }

  #header {
    min-height: 400px;
  }

}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
  /* Styles */
  .wrapper {
    width:100%;
  }

  #header {
    min-height: 400px;
  }
}

/* Smaller Screen ----------- */
@media only screen 
and (max-width : 1024px) {
  /* Styles */

  #team .blocks {
    display: block;
    width:100%;
    margin-right:0 !important;
    margin-bottom:30px;
  }

}

/* Desktops and laptops (Smaller Size) ----------- */
@media only screen 
and (min-width : 1024px) {
  /* Styles */
  #header {
    min-height: 400px;
    background-size: cover;
  }

}

/* Desktops and laptops (Mid Size) ----------- */
@media only screen 
and (min-width : 1224px) {
  /* Styles */
  .wrapper {
    width:1100px;
  }  

  #header {
    min-height: 500px;
  }

}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1440px) {
  /* Styles */
  .wrapper {
    width:1100px;
  }  

  #header {
    min-height: 580px;
  }

}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
  /* Styles */
  .wrapper {
    width:1100px;
  }

  #header {
    min-height: 700px;
  }

}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
  /* Styles */
  .wrapper {

  }
}

/*Added*/
img.logo_hilgenstock{
  margin: 10px;
  position: absolute;
  right: 0px;
  width: 200px;
}