@font-face {
  font-family: 'md-icons';
  src:  local('Material Icons'), local('MaterialIcons-Regular'), url('/fonts/md-icons.woff2') format('woff2'), url('/fonts/md-icons.woff') format('woff');
  }
  @font-face {
  font-family: 'open-sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url('/fonts/open-sans-regular.woff2') format('woff2'), url('/fonts/open-sans-regular.woff') format('woff');
  }
  @font-face {
  font-family: 'open-sans';
  font-style: normal;
  font-weight: 600;
  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url('/fonts/open-sans-semibold.woff2') format('woff2'), url('/fonts/open-sans-semibold.woff') format('woff');
  }
  @font-face {
  font-family: 'open-sans';
  font-style: normal;
  font-weight: 700;
  src: local('Open Sans Bold'), local('OpenSans-Bold'), url('/fonts/open-sans-bold.woff2') format('woff2'), url('/fonts/open-sans-bold.woff') format('woff');
  }

  @font-face {
    font-family: 'arial';
    font-style: normal;
    font-weight: 600;
    src: local('arial'), local('arial-Regular'), url('/fonts/arial-Regular.ttf') format('ttf'), url('/fonts/arial-Regular.ttf') format('wttf');
    }

/* colors */


html, *[theme="light"]{
    --neutral-1: 84, 132, 167;
    --neutral-2: 255, 255, 255;
    --text-1: #3f6899;
    --text-2: #6499d7;
    --text-3: #809cbf;
    --header-1: bold 16px/24px 'Verdana';
    --border-radius: 12px;
    --accent-1: 118, 159, 205;
    --accent-1b: 132, 146, 166;
    --base-0: 255,255,255;
    --base-1: 249, 249, 249;
    --base-2: 192, 191, 191;
    --base-3: 255, 255, 255, 1;
    --base-4: 248, 250, 245;
    --shadow-1: 1px 1px 1px rgba(0,0,0,0.1);
    --header-1: bold 24px 'Verdana';
    --header-2: normal 20px 'Verdana';
    --body-1: normal 18px 'Verdana';
    --body-2: normal 16px 'Verdana';
    --animation-btn: .25s;
  }
#modal{border-radius:0px;}
/*html, *[theme="light"] {

  
    
    --neutral-1:153,164,179;
    --neutral-2: 153 160 177;
    --accent-1: 56, 233, 228;
    --accent-1b: 70, 110, 250;
    --accent-1c: 50, 90, 230;
    --base-0: 255, 255, 255;
    --base-full:#ffffff;
    --base-mid: #f5f5f5d6;
    --header-1: bold 16px/24px 'Arial';
    /*
    --base-1: 235, 235, 235;
    */
    
    /*
    --base-2: 245, 245, 245;
    */
    
    /*--base-2: 255, 255, 255, 1;
    
   --base-1: 237, 250, 255,  28%;
    
    //--base-3: 255, 255, 255;
    
    --base-4: 255, 255, 255;
    --functional-blue: 20, 120, 220;
    --functional-red: 6, 248, 244;
    --functional-yellow: 220, 168, 40;
    --functional-green: 6, 248, 244;
    
    /*
    --text-1: rgba(0, 0, 0, .90);
    */

    /*
    --text-1:rgb(3 179 221 / 90%);
    --text-2: rgb(169 183 195);
    --text-3: rgb(43, 37, 21);
    
    --shadow-1: 2px 2px 3px 0px #16222f17;
    /*
    --shadow-1: 0 2px 8px rgba(0,0,0,.1), 0 1px 4px rgba(0,0,0,.05);
    */
    /*
    }
*/
    [theme="lightgreen"] {

  
    
      --neutral-1:0,0,0;
      --neutral-2: 153 160 177;
      --accent-1: 56, 233, 228;
      --accent-1b: 70, 110, 250;
      --accent-1c: 50, 90, 230;
      --base-0: 255, 255, 255;
      --base-full:#ffffff;
      --base-mid: #f5f5f5d6;
      --header-1: bold 16px/24px 'Arial';
      /*
      --base-1: 235, 235, 235;
      */
      
      /*
      --base-2: 245, 245, 245;
      */
      
      --base-2: 255, 255, 255, 0.9;
      
      --base-1: 237, 250, 255,  28%;
      
      --base-3: 255, 255, 255;
      
      --base-4: 255, 255, 255;
      --functional-blue: 20, 120, 220;
      --functional-red: 6, 248, 244;
      --functional-yellow: 220, 168, 40;
      --functional-green: 6, 248, 244;
      
      /*
      --text-1: rgba(0, 0, 0, .90);
      */
      --text-1:rgba(15, 95, 25, .90);
      --text-2: rgb(169, 183, 195);
      --text-3: rgb(43, 37, 21);
      
      --shadow-1: 2px 2px 5px 1px rgba(0, 0, 0, 0.1);
      /*
      --shadow-1: 0 2px 8px rgba(0,0,0,.1), 0 1px 4px rgba(0,0,0,.05);
      */
      }
    

    
    *[theme="dark"] {
    --neutral-1: 255, 255, 255;
    --neutral-2: 0 ,0, 0;
    --text-1: rgba(170, 174, 204,1);
    --text-2: rgba(255, 255, 255, .6);
    --text-3: rgba(96, 101, 128, 0.9);
    --header-1: bold 16px/24px 'Arial';
    --border-radius: 10px;
    --accent-1: 56, 232, 229;
    --accent-1b: 186, 22, 24;
    --base-0: 0, 0, 0, .07;
    --base-1: 0, 0, 0, .70;
    --base-2: 40, 41, 56;
    --base-3: 0, 0, 0, .70;
    --base-4: 80, 81, 96;
    --shadow-1: 2px 2px 3px 0px #16222f17;
    --base-mid:rgba(0,0,0,0.5);
    }
    

    
    *[theme="green"] {
    --neutral-1: 255, 255, 255;
    --neutral-2: 0 ,0, 0;
    --text-1: rgba(75, 148, 53, 0.9);
    --text-2: rgba(255, 255, 255, .6);
    --text-3: rgba(255, 255, 255, .2);
    --header-1: bold 16px/24px 'Arial';
    --border-radius: 7px;
    --accent-1: 235, 184, 103;
    --accent-1b: 245, 194, 113;
    --base-0: 23, 37, 21;
    --base-1: 9, 23, 7, .80;
    --base-2: 16, 30, 14;
    --base-3: 23, 37, 21;
    --base-4: 30, 44, 28;
    --shadow-1: 1px 1px 1px rgba(0,0,0,0.1);
    --base-mid:rgba(0,0,0,0.5);
    --animation-btn: .25s;
  }

 
    document-feed::-webkit-scrollbar{
      display:none;
    }
.d4r55{
  text-align:left;
  font-size:18px;
  font-weight:bold;
}

.RfnDt{
  text-align:left
}



    @media screen and (max-width:500px){
      magicbooksio-card.document-card{height: 60vh;max-height:450px;}

      #testims{
        flex-direction:column!important
      }

      
.hero-text p {
    font-size: 110%;
    font-weight: bold;
    color: #436898;
}      

}

@media only screen and (max-width: 1025px){
::slotted([grid-cols-m="5"]) {
    grid-column: span 5;
    max-height: 620px;
}
#testims{
  flex-direction:row
}
}
:host(:not([flat])) {
  background-color: rgb(var(--base-3));
  box-shadow: var(--shadow-1);
  padding: 16px;
  max-height: 610px;
}
    /*
    html, *[theme="light"] {
      --neutral-1: 0, 0, 0;
      --neutral-2: 255, 255, 255;
      --text-1: rgba(0, 0, 0, .9);
      --text-2: rgba(0, 0, 0, .6);
      --text-3: rgba(0, 0, 0, .2);
      
      --header-1: bold 16px/24px 'Monda';
      
      --border-radius: 0px;
      --accent-1: 4, 177, 251;
      --accent-1b: 2, 219, 247;
      --base-0: 255, 255, 255;
      --base-1: 231, 234, 237;
      --base-2: 236, 241, 243;
      --base-3: 255, 255, 255;
      --base-4: 251, 250, 250;
      --shadow-1: 2px 1px 1px 0px rgba(0, 0, 0, 0.2);
      --functional-yellow: 244, 157, 6;
      --functional-red: 127, 9, 159;
    }
*/
    html, body {
    --body-1: normal 14px/24px 'arial';
    --body-2: normal 12px/16px 'arial';
    --header-1: bold 16px/24px 'arial';
    --header-2: bold 14px/24px 'arial';
    --transition-1: 0.1s all ease-in-out;
    font-family: 'Verdana'; 
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: var(--text-1);
    height: 100vh;
    width: 100vw;
    margin: 0;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    }
    /* scrollbar */
    *::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: transparent;
    visibility: hidden;
    }
    *::-webkit-scrollbar-track {
    background-color: rgba(var(--neutral-1), .05);
    border-radius: 8px;
    }
    *::-webkit-scrollbar-thumb {
    background-color: rgba(var(--neutral-1), .10);
    border-radius: 8px;
    }
    *::-webkit-scrollbar-thumb:active,
    *::-webkit-scrollbar-thumb:hover {
    background-color: rgba(var(--neutral-1), .20)
    }

/*
    body{
      background-image:url('https://res.cloudinary.com/dpy1up1n6/image/upload/v1689044334/user-uploads/klc1d4yvvsqxlsyjgpec.webp');
      background-repeat:no-repeat;
      background-size: cover;
      background-position: center center;
    }
  */  
   html{
    scroll-behavior: smooth;
   }

   @keyframes button-pop{
    0% {
      transform: scale(var(--btn-focus-scale, .95));
  }
  
  40% {
      transform: scale(1.02);
  }
  100% {
      transform: scale(1);
  }
   }


   slot[name='header'] p {
    margin-right: 8px;
    font: bold 18px 'Verdana'!important;
    color: #2c93e3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
    flex: 1;
}
.hero-card{
  min-height:50vh;
}
.logo {
  height: 45px!important;
  }
@media screen and (min-width:1086px){
  .hero-text p{
    font-size:16px;
    line-height: normal;
    color:#436898;
    font-weight:600;
  }
}
.min-h-screen {
  height: 110vh!important;
}
  .hero-content {
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 80rem;
    gap: 1rem;
    padding: 0px !important;
    flex-wrap: nowrap;
    flex-direction: row;   
    position: relative!important;
}
    .logo {
    height: 45px!important;
    }
    
    
    .flex{
        display:flex;
    }
    
    .row{
        flex-direction:row;
        flex-wrap:wrap;
    }
    
    .centered{
        align-content:center;
        justify-content: center;
    }
    
    .wide {
        width: 100vw;
        top: 70px;
        left:0px;
        position: absolute;
        height: calc(100% - 140px);
    }
    magicbooksio-avatar, magicbooksio-avatar.image {
        overflow:visible;
        justify-content: center;
        font: var(--header-2);
        color: var(--text-1);
        height: 60px;
        width: 60px;
        border-radius: 2px;
        background: transparent;
        z-index:9
    }


    div.text > magicbooksio-text.info{max-width:80vw!important;}
    
    


    #installation-process magicbooksio-card {      
      border-radius:14px;
      padding:10px;
      height: fit-content;
    }
    .process{background-color: #ffffff!important;border-radius:14px;}
    document-feed{
      overflow-y: auto;
      height: 87vh;
        width: 100vw;
        position: relative;
        left: 0px;
        top: 0px;
        padding-top: 8px;
        padding-bottom:100px;
    }
    .info {
      color: rgb(5 198 241 / 60%);
  }
    #document-feed{
      
      padding:10px
    }
    document-feed::-webkit-scrollbar{
      display: none !important;
    }

    *::-webkit-scrollbar{
      display:none!important
    }

    magicbooksio-grid#document-feed::-webkit-scrollbar{
      display: none !important;
    }
    .document-card{
      width:95vw;
      margin-bottom:20px;
    }
    
    magicbooksio-app-bar{
      padding-left:0px;padding-right:15px;
      height:60px;
    }
    magicbooksio-app-bar :host([mobile]) .label {
        flex: 1;
        max-width: unset;
        margin: 0 16px;
        text-align: center;
        position:relative;
        left:-10px;
    }

    .tabpanel{
      animation: slide-in 0.4s linear;
     
    
    }

    .product-image {
      height:fit-content;
      min-height:60vh;
      
  }

    .product-image .image {
      width: 90%!important;
      margin: -16px -16px 16px;
      /*
      height: 240px;
      */
      object-fit: contain;
      padding: 20px;
      margin:0px auto!important;
      
  }
  #document-feed{
    max-width: 100vw;
    overflow: auto;
    height: fit-content;
    grid-template-columns: repeat(24, 1fr);
    padding-right: 10px;
    padding-left: 5px;
    padding-bottom: 100px;
  }

  magicbooksio-nav-bar{
    background-color: var(--base-0)!important;
  }

  
@keyframes slide-in{
  0% {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
}

100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

}

magicbooksio-nav-bar {
  background-color: rgb(var(--base-0))!important;
  margin-bottom: 0px;
  padding-bottom: 0px;
  position: fixed;
  bottom: -5px;
  left: 0px;
  width: 100vw;
  box-shadow:none;
    transition: var(--transition-1);
}

magicbooksio-app-bar{
  box-shadow:none;
}
#navwrap{
  position:fixed;
  bottom:0px;
  left:0px;
  width:100vw;
  height:58px;
  background-color:rgb(var(--base-0));
  z-index:3
}

#feedwrap{
  overflow-y: auto;
    display: flex;
    padding-bottom:60px;
    width: 100vw;
    height: calc(100vh - 120px);
    position: relative;
    top: 60px;
    left: 0px;
    /*background-color:var(--base-mid);*/
    
}

@media screen and (max-width:900px){
  .panes{display:none!important;}
  #welcWrap {
    overflow: auto;
    display: flex;
    position: absolute;
    top: 60px;
    margin: 0px auto;
    height:fit-content;
    
    width: 100vw!important;
    
  }

  magicbooksio-pane.panes{
    display:none!important;
  }

  .hero-content{
    top: -17vh!important;
  }
  #testims {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    position: relative;
    top: -40px;
    max-width: 1200px;
    left: 50%;
    transform: translate(-50%, 0);
}
}

#welcWrap {
  overflow: auto;
  display: flex;
  position: absolute;
  top: 60px;
  margin: 0px auto;
  min-height: calc(100vh - 120px);
  width: 60vw;
  left: 50%;
  transform: translate(-50%, 0);
}

#wish{
  overflow-y: auto;
    display: flex;
    padding-bottom: 40px;
    width: 100vw;
    height: calc(100vh - 120px);
    position:relative;
    top: 0px;
    left: 0px;
    padding:10px;
    max-width:1000px;
    margin:0px auto;
    padding-top: 0px;
    
}
#cart{
  overflow-y: auto;
    display: flex;
    padding-bottom: 40px;
    width: 100vw;
    height: calc(100vh - 120px);
    position: relative;
    top: 0px;
    left: 0px;
    padding:10px;
    max-width:1000px;
    margin:0px auto;
    padding-top: 0px;
    
    
}


#details:hover{
  cursor:pointer;
}

magicbooksio-tab-item:host([active]) {
  border-color: rgb(56 232 229);
}

#bottom-bar magicbooksio-tab-item:host([orientation='horizontal']) {
  flex-direction: column;
  justify-content: center;
  width: max-content;
  min-width: 20%;
  max-width: 25%;
  height: 56px;
  padding: 0px 16px;
  border-width: 0px 0px 2px 0px;
}

/*:host([orientation="horizontal"])*/

label{
  font-family:'arial'!important
}
@media screen and (min-width:1200px){
  #testims {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    position: relative;
    top: -40px;
    max-width: 1200px;
    left: 50%;
    transform: translate(-50%, 0);
}
}
@media screen and (min-width:929px){
  :host([mobile]) .label {
    flex: 1 1 0%;
    max-width: unset;
    margin: 0px 16px;
    text-align: center;
    font-size: 3vw;
    line-height: 3;
}

}


.shapes{
  height:max-content;
}

.hero{
  background: rgb(86,131,184);
background: linear-gradient(0deg, rgba(86,131,184,1) 0%, rgba(120,161,209,1) 26%, rgba(129,174,227,1) 48%, rgba(111,153,203,1) 73%, rgba(86,131,184,1) 100%);
}

.hero-text{
  font-family:'arial';
  line-height: 1;
  font-size:42px;
  z-index:9999;
  margin-top:0px;
  color: var(--text-1);
}

.hero-text-small{
  font-size: 28px;
    
    position: relative;
    color: var(--text-1);
    
   
    width: fit-content;
    
    border-radius: 20px;
    
    z-index:9;
}

html {
  scroll-snap-type: y mandatory;
}

#background {
  scroll-snap-align: start;
  min-block-size: 100vh;
  scroll-snap-stop: always;
}

@media screen and (min-width:800px){
  #our-egress-windows > magicbooksio-card:nth-child(1){
    padding: 20px 40px;
  }
    #background > div > div.hero-content.text-center.text-neutral-content{
      flex-direction:row;
    }
    #testims {
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      position: relative;
      top: -40px;
      max-width: 1200px;
      left: 50%;
      transform: translate(-50%, 0);
  }
    .min-h-screen {
      height: 110vh !important;
      width: 100vw;
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      align-content: center;
      justify-content: center;
      align-items: center;
  }
  .max-w-md{
   
    margin:0px auto;
    color:#f5f5f5d6
  }
  
  slot, .header, .top {
    display: flex;
    overflow: visible!important;
}
  #egress-window{
    outline: none;  
    border-inline-start-style: outset;
    stroke-linecap: initial;
    top:10px;
    border-end-end-radius: inherit;
    border-spacing: 20px;
    position: relative;
    box-sizing: inherit;width: 240px;
    width:340px!important;
    height:420px!important;
    background-size: 440px 420px!important;
    background-color: #ffffff;
    border: 15px solid #3d5d83;
    border-block-start-color: #2d4460;
    border-block-end-color: #2d4460;
      background-position: center;
      background-image:url('https://res.cloudinary.com/dpy1up1n6/image/upload/c_crop,g_east,h_950,w_950/v1698444341/egress-window-project-gallery/rs_w_984_h_984_fcxj2y.webp');
  }

  #refresh{
    margin: 0px auto;
        cursor: pointer;
        text-align: center;
        position:relative;    
        border-radius:100%;
        background-color:#ffffff;
        box-shadow: 1px 1px 20px 3px rgb(0 0 0 / 5%);
        padding:2px;
        
    }

    #cf-context {
      width: 100vw;
      height: 85vh !important;
      position: absolute;
      left: 50%;
      align-content: center;
      max-width: 770px;
      margin: 0px auto;
      transform: translateX(-50%);
  }
  #modal{
    border-radius: 20px;
    max-width: 800px;
    margin: 0px auto;
    left: 50%;
    transform: translate(-50%, -50%);
    height:95vh;
    top:50%;
  }
}

@media screen and (max-width:1200px){
  #egress-window {
    outline: none;
    box-sizing: inherit;
    width: 240px;
    height: 320px;
    background-color: #ffffff;
    border: 15px solid #3d5d83;
    background-image: url('https://res.cloudinary.com/dpy1up1n6/image/upload/f_auto,q_auto,dpr_auto/v1688982158/user-uploads/eidjdlssqnfyy5emhzps.webp');
    background-size: 320px 320px;
    background-position: center;
    border-inline-start-style: outset;    
    border-end-end-radius: inherit;   
    
    border-block-start-color: #2d4460;
    border-block-end-color: #2d4460;
}
#background > div > div.hero-content.text-center.text-neutral-content{
  flex-direction:column;
}
#testims{
  display:flex;
  flex-wrap: wrap;
  flex-direction: row;
  position:relative;
  top:-40px;
  max-width:1200px;
  left:50%;
  transform:translate(-50%,0);


}

.job-list-item magicbooksio-card{
  box-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}
.hero {
  display: flex!important;
  width: 100%;
  place-items: center;
  background-size: cover;
  background-position: center;
  align-content: center;
  justify-content: flex-end;
  align-items: center;
  flex-direction: column;
  flex-wrap: nowrap;
  background: rgb(86,131,184);
background: linear-gradient(0deg, rgba(86,131,184,1) 0%, rgba(120,161,209,1) 26%, rgba(129,174,227,1) 48%, rgba(111,153,203,1) 73%, rgba(86,131,184,1) 100%);
}
.max-w-md{
  max-width:280px;
  margin:0px auto;
  color:#f5f5f5d6
}
magicbooksio-app-bar{
  height: 60px!important;
    font-family: arial;
    padding: 10px;
}
#refresh{
margin: 0px auto;
    cursor: pointer;
    text-align: center;
    position:relative;    
    border-radius:100%;
    background-color:#ffffff;
    box-shadow: 1px 1px 20px 3px rgb(0 0 0 / 5%);
    padding:2px;
    
}
#refresh:hover{
  background-color:#2f445f !important;
  border:none;
  color:#ffffff;
}

#refresh:active{
  animation: button-pop var(--animation-btn, .25s) ease-out;
  color:#ffffff;
}

#modal{
    border-radius:20px;
    display:flex;
    flex-direction: column;
}
#cf-context {
  width: 100%;
  height: 85vh !important;
  position: absolute;
  left: 0px;
  
  overflow-y: auto;
  align-content: center;
}
#testims {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  position: relative;
  top: -40px;
  max-width: 1200px;
  left: 50%;
  transform: translate(-50%, 0);
}
}

.card-btn-row{
  margin-left:0px!important
}


cf-input input[rows='1'], cf-input textarea[rows='1'] {
  min-height: 60px !important;
  border-radius: 10px!important;
}
#conversational-form > div {
  padding: 0 20px;
  position: absolute;
  width: 100%;
  min-height: 60%;
  max-height: -webkit-fill-available;
  bottom: calc(100vh - 100vh);
  height: auto;
  overflow: visible;
  margin-bottom: auto;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
}
#conversational-form > div > cf-input > div > cf-input-button{
  background-color:#2f445f;
  border-radius:0px 10px 10px 0px;
}

#conversational-form > div > cf-chat > scrollable > div {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  padding-bottom: 10px;
  padding-top: 40px;
  overflow: auto;
  justify-content: flex-start;
  align-content: center;
  flex-wrap: nowrap;
  align-items: center;
}
#conversational-form > div > cf-input > div{
  border-radius:10px;
}

#conversational-form > div > cf-input > div > textarea {
  min-height: 60px !important;
  border-radius: 10px;
}

magicbooksio-card > slot:nth-child(2) > magicbooksio-icon{
  z-index:99999999!important;
}
.btn-neutral {
  border-radius: 20px;
  background-color: #fff;
  border: none;
  animation: button-pop var(--animation-btn, .25s) ease-out;
  color: #2f445f;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  padding: 10px 9px;
  font-family: Verdana;
  cursor: pointer;
  width: 48%;
  font-weight: bold;
}
#form {
  margin-bottom: 12px;
    position: absolute;
    bottom: 14vh!important;
}

.btn-neutral:hover{
  background-color:#2f445f !important;
  border:none;
  color:#ffffff;
}

.btn-neutral:active{
  animation: button-pop var(--animation-btn, .25s) ease-out;
  color:#ffffff;
}
.btn-neutral:focus{
  animation: button-pop var(--animation-btn, .25s) ease-out;
  color:#ffffff;
}

#refresh:hover{
  background-color:#758eaf !important;
  border:none;
  color:#ffffff;
}

#refresh:active{
  animation: button-pop var(--animation-btn, .25s) ease-out;
  color:#ffffff;
}

/*
#refresh:focus{
  animation: button-pop var(--animation-btn, .25s) ease-out;
  color:#ffffff;
}
*/

magicbooksio-button:hover {
  background-color: #5fa15f !important;
  border: none;
  color: #ffffff;
}
/*
magicbooksio-button:active{
  animation: button-pop var(--animation-btn, .25s) ease-out;
  color:#ffffff;
}

magicbooksio-button:focus{
  animation: button-pop var(--animation-btn, .25s) ease-out;
  color:#ffffff;
}

/*form*/
.blue-theme cf-input-button.cf-input-button {
  width: 60px;
  height: 100%;
  background: rgba(86, 131, 184, 1);
  position: absolute;
  overflow: hidden;
  right: 0;
  bottom: 0;
  z-index: 3;
  cursor: pointer;
  border-radius: 0;
  will-change: background, border;
  transform-origin: 50% 50%;
  transform: scale(0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border: none;
}
.nav-item{
  padding: 8px 6px;
  border-bottom: 0.5 px solid #4058775e;
}
a{
  text-decoration:none;
}

#testims {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  position: relative;
  top: -40px;
  max-width: 1200px;
  left: 50%;
  transform: translate(-50%, 0);
  align-items: baseline;
}
.blue-theme .conversational-form .cf-button {
  color: rgba(86, 131, 184, 1);
  border-color: #dddddd;
  transition: opacity var(--cf-anim-time) var(--anim-easeOut),
    border-color var(--cf-anim-time) var(--anim-easeOut),
    color var(--cf-anim-time) var(--anim-easeOut);
  background: none !important;
  font-weight: var(--cf-font-weight-bold);
  line-height: 1.2;
}

.reacts-wrap {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: wrap;
  align-content: center;
  display:none;
}
.react {
  display:none;
}

.react:hover {
  animation: wiggle 1s infinite alternate;
}

.reacts-wrap:hover{
  will-change: transform;
  transform-origin: 50% 50%;
  transform: scale(1) rotate3d(0, 0, 0);
  transition: transform 0.3s ease;
}

@keyframes wiggle {
  0% {
    transform: scale(1) rotate3d(-1%, -2%, 2%);
  }

  50% {
    transform: scale(1.03) rotate3d(1%, -2%, 2%);
  }

  100% {
    transform: scale(1) rotate3d(-1%, 2%, -2%);
  }
}
