/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/




.block{
 display: flex; 
  justify-content: center; 
  flex-direction: column; 
  color: white; 
  font-size: 20px; 
  font-weight: 500; 
  text-align: center; 
  padding: 10px; 
  min-height: 150px; 
  transition: transform .2s;
  margin-top:30px;
  border-radius:3px;
}

.block:hover{
transform: scale(1.05);
}

.small{
font-size: 16px;
    margin: 20px 0;
    min-height: 40px;
    padding: 0 10px;
    text-align: left;
    background: transparent !important;
    border-bottom: solid 2px;
    border-radius: 0;
  color:#333;

}


.icon{
 padding: 10px; 
  font-size: 36px; 
}


input{
 background: #fff;
    box-shadow: none;
    border-radius: 24px 0 0 24px;
      border: 1px solid #dfe1e5 !important;
  float:left;
  max-width:75%;
}

input:hover{
     background-color: #fff;
    box-shadow: 0 1px 6px rgb(32 33 36 / 10%);
    border-color: rgba(223,225,229,0); 
}

.google-button{
     background-color: #f8f9fa;
    color: #3c4043;
    text-align: center;
    cursor: pointer;
  text-transform:none;
  border-radius:0 40px 40px 0;
border: 1px solid #dfe1e5;
  float:left;
  height:50px;
  border-left:0;
  box-sizing:border-box;
  padding:10px 20px !important;
  width:25%;
    font-size:16px;
  margin: auto;
  line-height: 1.9;
 } 


.google-button:hover{
 background:#eff1f3; 
}

  body{
  padding:15px !important;
  }

.shadow-section{
  margin-top: 60px;
    padding: 60px;
    box-shadow: rgb(17 17 26 / 5%) 0px 4px 16px, rgb(17 17 26 / 5%) 0px 10px 50px;
    border-radius: 10px;
  padding:40px;
}

h2{
 line-height:1.5 !important;
  padding-bottom:20px !important;
  font-size: 20px !important;
}

.dark-mode, .span12.widget-span.widget-type-custom_widget.dark-mode{
 display:none; 
}


#want-another-link span{
  color:#333;
}

#want-another-link{
 text-align: center;
}

.scroll-more{
opacity: 0.8;
  margin:auto;
  text-align:center;
  position:fixed;
  bottom:10px; 
  width:100%;
}

.scroll-more p{
padding:0;
}


.covid-stripes{
  background-image: linear-gradient(135deg, #ffcc00 25%, #ffffff 25%, #ffffff 50%, #ffcc00 50%, #ffcc00 75%, #ffffff 75%, #ffffff 100%);
background-size: 56.57px 56.57px;
 padding:6px;
  margin-bottom:20px;
}

/*hide hubspot menu*/
.hs-tools-menu.hs-collapsed{
 display:none !important; 
}


.greeting{
 font-size:32px; 
  margin-top: 40px;
  color:#333;
}

ul{
     list-style: none;
  padding:0;
  margin:0;
}

ul li{
 margin-bottom:12px; 
}

ul li i {
 margin-right:10px; 
}

ul li a{
  color:#333;
}

.navigation a{
  margin: 5px;
  font-size:17px;
    line-height: 2.2;
    padding: 5px 5px 5px 5px;
  box-sizing:border-box;
  border-bottom: solid 2px transparent;
  color:#222222;
}

.navigation a:hover{
border-bottom: solid 2px #333;
}

.navigation {
margin: 0 auto;
  text-align:center;
    width: fit-content;
    width: -moz-fit-content;
    width: -webkit-fit-content;
}

.note{
 margin: 0; 
  font-size: 14px; 
}

.announcement{
width: 100vw !important; 
  padding: 25px 10px; 
  background: #55a3eb; 
  color: white; 
  text-align: center; 
  margin: -15px -15px 25px -15px !important;
  
}

.announcement button{
 background: white; 
  color: #55a3eb !important; 
  padding: 8px 8px 6px 6px; 
  border: solid 2px #fff; 
  border-radius: 2px; 
  margin: 5px; 
  font-size: 14px !important; 
  text-transform:none;
}

.announcement .secondary-btn{
background: transparent;
  color: #fff !important;
  border: solid 2px #fff;
  padding: 8px 8px 6px 6px;
  border-radius: 2px;
  margin: 5px;
  font-size: 14px !important;
}

.translate{
 border-radius:40px;
  background:#e41414;
  text-transform:none;
  color:#fbf7f2;
  font-size: 20px;
  margin-left:5px;
}

/*Light mode background image*/
/*
 body {
    background-image: url('https://connect.jacobsen.co.nz/hubfs/beach-xmas.jpg') !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  background-position: center !important; 
    background-size: cover !important; 
   height:100vh;
  }

*/

/*========= Dark Mode =========*/


 @media (prefers-color-scheme: dark) { 
  body {
    color: #ffffffcc;
    background: #1c1e21 !important;
  
    /*Dark mode background image*/

 /*   background-image: url('https://connect.jacobsen.co.nz/hubfs/dark-christmas.jpg') !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  background-position: center !important; 
    background-size: cover !important; 
height:100vh;
*/
    
   }
 
    
  
  p, ul, li, h2, h2 span, a, .scroll-more, #want-another-link span, .navigation a, .small{
    color: #ffffffcc !important;
  }
   
   .greeting{
    color:#fff !important; 
   }
  
 .shadow-section{
   background: #222529d9;
}

  .dark-mode, .span12.widget-span.widget-type-custom_widget.dark-mode{
 display:inline; 
}
  
  .light-mode{
   display:none !important; 
  }
  
  .navigation a:hover{
border-bottom: solid 2px #ffffffcc;
}
  
}

*/

/*========= Mobile only =========*/
@media only screen and (max-width: 768px) {
.search-text, .scroll-more, .alert-level{
 display:none; 
}
  
  .block {
    margin: 5px;
    font-size:17px;
    min-height:120px;
  }
  
  .icon {
    font-size: 30px;
  }
  
  .column{
  width:49% !important;
    margin:auto;
    float:left !important;
  }
  
  .small{
   margin: 5px; 
    min-height: 60px;
  }

  .shadow-section{
   padding:15px; 
  }
  
  .greeting {
    font-size: 22px;
    margin-top: 20px;
}
  
  .jcs-logo img{
   width:60% !important;
    margin:auto !important;
  }
  
  .google{
  display:none !important;
  }
  
  .note{
   margin: 0 5px; 
  }
  
  .search-text{
  display:none;
  }
  
}