html, body, body * { box-sizing: border-box; padding:0 0 0 0; margin: 0 0 0 0; }

html { float:left; width:100%; font-size: 100%; scroll-behavior: smooth; background-color: #602f6b; line-height:1.5; }
:focus {}
:hover, :active {}

html {
	font-family: Raleway, Roboto, "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, sans-serif;
	font-weight: normal; color: #333;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.004); }

  body { float:left; width: calc( 99% - 1em ); float:left; padding: 6% 6%; margin: calc( 0.5% + 0.5em ); border-radius: 5vw !important; background-color: white; }

  p, ul, li { font-family: Raleway; font-weight: light; }

  a { color: teal; !important; cursor: pointer; text-decoration: none; background: transparent; transition:color 0.2s ease; -moz-transition:color 0.2s ease; -webkit-transition:color 0.2s ease; -o-transition:color 0.2s ease; }
  a:hover { text-decoration: underline; }
  ::-moz-selection { background: teal; color: #fff; text-shadow: none; }
  ::selection { background: teal; color: #fff; text-shadow: none; }
  a:active, a:focus {  }

  .footer { font-size:0.9em; padding-top: 3em; margin-top: 1em; border-top-width: calc( 0.25em + 0.25vw ); border-top-color: teal; border-top-style :solid; }
  .footer small a { color:#000; }

  blockquote { background-color:#D5F4E4; padding: 2em; font-size:1em; margin:1em 0 1em; border-radius:0.2em; }
  blockquote:first-of-type { margin-top: 0; }
  blockquote p { color: #111; opacity: 0.9; text-align: justify;}
  blockquote p:before { color:#fff; font-size:2.5em; line-height:0.0125; position:relative; top:0.5em; margin-right:0.1125em; font-family: "Roboto" !important; content:"\201C"; opacity:0.85; margin-top:-1.25em; margin-bottom:-1.25em;}
  blockquote p:after { color:#fff; font-size:2.5em; line-height:0.0125; position:relative; top:0.5em; margin-left:0.1125em; font-family: "Roboto" !important; content:"\201D"; opacity:0.85; margin-top:-1.25em; margin-bottom:-1.25em;}

  cite { font-size:0.9em; line-height:1.333; margin:0 0 0 0.5em; display:block; opacity:0.875;}
  cite:before {content:"- ";}
  cite:after {}

  p { float:left; clear:left; margin-bottom:0.75em; }

  .main ul  { float:left; clear:left; margin: 0.75em 0; list-style-position:inside; margin-left:1em; text-indent: -1em; }

  h2 + p {}

  h1, h2, h3, h4, h5 { float:left; clear:left;  text-rendering: optimizeLegibility; }
  h1 {  font-size: 1.6em; color: teal; clear:both; }
  h2 { font-size: 1.3em; color: #002020; font-weight: 600; }
  h3 { font-size: 1.2em; font-weight: 600; }
  h4 {}
  h5 {}

  .header { float:left; width: 100%; }
  .logo { float:left; max-width: 50%; width: 33.333%; height:auto; padding-bottom: calc(1em + 1vw); opacity:0.8; }
  .logo img { float: left; width:100%; height:auto; }

  #desktopnav { float:right; text-align:right; height:auto; width:50%; font-family: "Roboto"; }
  #desktopnav ul { float:right; list-style-type:none; margin:0; padding:0; font-size:1.25em; line-height:1.25; word-spacing:-2pt; text-align:right; }
  #desktopnav ul li { float:left; margin-left:1em; }
  #desktopnav ul li a { transition:0.5s ease; text-decoration:none; color:#333; border-bottom: solid 0.1425em #fff; }
  #desktopnav ul li a:hover { transition:0.5s ease; border-bottom: solid 0.1425em teal; }

  #home .home, #contact .contact {  }

  .biopic { max-width:33.3%; width:12em; height:auto; margin:0 0 0.4em 0.8em; clear:both; float:right; }
  .main { margin-bottom:1.5em; float:left; }

  .left { float:left; width:48.7%; margin:0 1.2% 1em 0; }
  .right { float:right; width:48.7%; margin:0 0 1em 1.2%; }

  .portal-button  { float:left; background-color: #602f6b; color: white; padding: 0.5em 0.5em; margin: 0.25em 1em 0.25em 0; border-radius: 0.2em; box-shadow: 1px 1px 1px #bbb; transition: all 1s; }
  .portal-button:hover { background-color: navy; }
  .portal-paragraph {  }
  .portal-paragraph a {  }
  .portal-paragraph small { display:block; margin-top:0.25em; }

  div.right:has(iframe) { width: 48.7%; margin: 0 0 1em 0; border-radius: 0.2em; }

  iframe, iframe * { border-radius: 0.2em !important; }

  .afterhourscal { margin-top: 0; min-height: calc(50em + 5vh); border: 0px currentColor; width: 100%; height: auto; letter-spacing: 0px; word-spacing: -2px !important; }

  #alt .left { width:55.7%; margin:0 1.2% 1em 0; }
  #alt .right { width:41.7%; margin:0 0 1em 1.2%; }

  .getintouch { display: flex; align-items: center; justify-content: left; }
  .getintouch .contactinfo { min-width: calc( 50 - 1em ); padding-right: 1em; max-width: calc(75% - 1em); width:auto; float:left; }
  .getintouch .tarion-logo {  }

  .footer { float:left; width:100%; }
  .footer p { line-height:1.25; }
  .footer .credit { line-height:2; opacity:0.7; font-size:0.75em; }


/* -- GRIDZY -------------------------------------------------- */

.gridzy {display:block; float:left; width: 100%; height: auto; margin-top: 0.5em; margin-bottom: 2em; }

.gridzy a {box-shadow:  0 0 0.5em rgba(0,0,0,0.03); z-index: 0;}

.gridzy a:after {content: ''; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; box-shadow: none;}
.gridzy a:hover:after {content: ''; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; box-shadow: none;}

.gridzy a img {filter: brightness(1); transition: filter 0.45s; }
.gridzy a:hover img {filter: brightness(1.04);}


/* -- CSS Animations ------------------------------------------- */

.delay05 { -webkit-animation-delay: .5s; animation-delay: .5s;}
.delay13 { -webkit-animation-delay: 1.3s; animation-delay: 1.3s;}
.delay22 { -webkit-animation-delay: 2.2s; animation-delay: 2.2s;}
.delay30 { -webkit-animation-delay: 3s; animation-delay: 3s;}

.animated { -webkit-animation-duration: 0.5s; animation-duration: 0.5s;
 -webkit-animation-fill-mode: both; animation-fill-mode: both; }

 @-webkit-keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }}

  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }}

    .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; }

    @-webkit-keyframes fadeInDown {
      from { opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); }
        to { opacity: 1;
         -webkit-transform: none; transform: none; }}

         @keyframes fadeInDown {
          from { opacity: 0;
            -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); }
            to { opacity: 1;
              -webkit-transform: none; transform: none; }}

              .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; }

/* -- Media query ------------------------------------------- */
@media only screen and (max-width: 1280px) {

.logo { width: 50%; }
}


/* -- Media query ------------------------------------------- */
@media only screen and (max-width: 1024px) {

    .logo { float: left; max-width: 50%; width: 50%; }

  #desktopnav { width: 100%; max-width: 100%; margin-bottom: 1.5em; }
  #desktopnav ul { float:right; }
  #desktopnav ul li { margin-left: 0; margin-right: 3vw; }
  #desktopnav ul li:last-child { margin-right: 0vw; }
  #desktopnav ul li a { border-bottom: 2px solid teal; }


  .left { width:100%; margin:0 0 1em 0;}
  .right { width:100%; }

  #home .left { width: 100%; }
  #home .right { width: 100%; }
}

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

  #desktopnav ul { float:left; }
}

/* -- Media query ------------------------------------------- */
@media only screen and (max-width: 640px) {

  body { float:left; width: calc( 99.75% - 0.25em ); float:left; padding: 7.5% 5%; margin: calc( 1% + 1em ) calc( 0.125% + 0.125em ) ; border-radius: 5vw !important; background-color: white; }


  .logo { max-width: 100%; width: 99%; margin-bottom: 2vh;}

}

/* -- Media query ------------------------------------------- */
@media only screen and (max-width: 480px) {

  #desktopnav { margin-top:2vh; }
  #desktopnav ul { font-size: 1.2em; }
    #desktopnav ul li { margin-left: 0; margin-right: 3vw; letter-spacing: -0.25px; }
  #desktopnav ul li:last-child { margin-right: 0vw !important; }


  blockquote { padding:1.5em; margin: 1.5em -1.5em; }

  h1 { font-size: 1.125em; }
  h2 { font-size: 1em; }
}

/* -- Media query ------------------------------------------- */
@media only screen and (max-width: 430px) {

body { float:left; width: 100%; float:left; padding: 7.5% 4%; margin: calc( 1% + 1em ) 0 ; border-radius: 5vw !important; background-color: white; }


  #desktopnav ul { font-size: 1.15em; }
    #desktopnav ul li { margin-right: 2.75vw; letter-spacing: -0.5px; word-spacing: -0.5px; }

}


/* -- Media query ------------------------------------------- */
@media only screen and (max-width: 380px) {

  #desktopnav ul { font-size: 1.1em; }
    #desktopnav ul li { margin-right: 2vw; letter-spacing: -0.5px; word-spacing: -0.5px; }

}

/* -- Media query ------------------------------------------- */
@media only screen and (max-width: 359px) {

  body { padding: 5% 3.5% }

  #desktopnav ul { font-size: 1.07em;  }
    #desktopnav ul li { margin-right: 2vw; letter-spacing: -0.5px; word-spacing: -0.5px; }

}

/* -- Media query ------------------------------------------- */
@media only screen and (max-width: 339px) {

  body { padding: 5% 3%; min-width: 320px !important; }

  #desktopnav ul { font-size: 1em;  }
    #desktopnav ul li { margin-right: 2vw; letter-spacing: -0.5px; word-spacing: -0.5px; }

}