/* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  background: transparent;
  border: 0;
  margin: 0;
  padding: 0;
  vertical-align: baseline; }

body {
  line-height: 1; }

h1, h2, h3, h4, h5, h6 {
  clear: both;
  font-weight: normal; }

ol, ul {
    list-style: none;
}

blockquote {
  quotes: none; }

blockquote:before, blockquote:after {
  content: '';
  content: none; }

del {
  text-decoration: line-through; }

/* tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse: collapse;
  border-spacing: 0; }

a img {
  border: none; }


/* --Global
-------------------------------------------------------------- */
html {
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}


*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }


body {
    background-color: white;
    color: #3f3f3f;
    font-family: "Comfortaa", sans-serif;
    font-weight: 300;
    line-height: 1.5em; 
    font-size: 1em;           /* Base font size */
    height: 100vh;
}

a {
    text-decoration: none ;
    color: #0793e2 ; 
}
    a:hover {
        color: #3cb5f9 ; 
    }

* {
    box-sizing: border-box;
}

p {
    padding-bottom: 0.5rem;
}

/* --Main
-------------------------------------------------------------- */
#wrapper {
    width: 100%;
    margin: 0 auto;
}

#main {
    padding-top: 80px; 
    padding-bottom: 6em;
}

#main-email {
    padding-top: 30px; 
    padding-bottom: 6em;
}
}

#main .far {
    vertical-align: text-top;
}

#map {
    height: 100%;
}


.container {
    width: 100%;
    margin: 0 auto;
    padding: 0 1.2em; 
    -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;
}

section {
    padding: 0.5em 0; 
}

    p {
        text-align: justify;
    }

    section ul {
        list-style: circle; 
        padding-left: 2em;
        padding-bottom: 1em;
    }

    section .clean-bullet {
        list-style: none; 
        padding-left: 0;
        padding-bottom: 0;
    }

.summary {
    padding: 1.3em 1em;
    font-weight: 700;
    color: #0683c9;
    text-align: center;
}

h2 {
    text-align: center;
    margin: 0.5em 0;
    font-size: 1.3em;
    font-weight: 700;
    
    -webkit-text-stroke: 0.2px #F0F0F0;
    
    padding: 0.4em 0 0.2em 0;
    
    color: #0f0f0f;
    border-bottom: thin solid #3cb5f9;
}

.background-blue-gradient {
    background: white; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(-10deg, #3cb5f9, white); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(-10deg, #3cb5f9, white); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(-10deg, #3cb5f9, white); /* For Firefox 3.6 to 15 */

    background: linear-gradient(-10deg, #3cb5f9, white); /* Standard syntax */
}

.rounded-top-6px {
    border-radius: 6px 0; 
    -moz-border-radius: 6px 0; 
    -webkit-border-radius: 6px 6px 0px 0px; 
}


.send-message-link {
    text-align: center;
    padding-top: 1em;
}

.bottom-buffer {
    padding-bottom: 0.5rem;
}

[class*="col-"] {
    float: left;
    padding: 0 1em;
    font-size: 0.9em;
}

.row {
    display: table;
    width: 100%;
}

/* .col-50 {
    width: 100%;
    font-size: 0.9em;
} */

.col-full {
    width: 100%;
}

.col-lg {
    width: 100%;
}

.col-sm {
/*    visibility: hidden;*/
    display: none;
}

.col-sm-only {
    width: 100%;
}

.col-map {
    width: 100%;
}

.row-map {
    margin: 0 auto;
}

.map-container {
/*
    position: relative;
    height: 100%;
*/
}

.logo {
    padding: 0.5rem 0 ;
}


.sm-icons {
    max-width: 6rem;
}

.center {
    text-align: center;
    vertical-align: middle;
}

/* DIV with this ID will center the contents, place within a fixed width div */
#col-inner-centered {
    display: table;
    /* had to set the width, if not done the second div block would be centered differently (slight offset) due to width differences of the div itself*/
    width: 15em;    
    margin: 0 auto ;
}

/* --Header
-------------------------------------------------------------- */



header {
    width: 100%;
    height: 80px;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    background-color: #F9F9F9;
    border-bottom-color: #eee;
    border-bottom-style: solid;
    border-bottom-width: 2px;
    
    padding: 0 1em;


    -webkit-transition: height 0.3s; -moz-transition: height 0.3s; -ms-transition: height 0.3s; -o-transition: height 0.3s; transition: height 0.3s; 
}

    header img {
        width: auto;
        height: 76px;
        padding-top: 2px;
        -webkit-transition: height 0.3s; -moz-transition: height 0.3s; -ms-transition: height 0.3s; -o-transition: height 0.3s; transition: height 0.3s; 
    }

        header.smaller {
            height: 50px; 
        }

    header.smaller img {
        width: auto;
        height: 48px;
        padding-top: 1px;
        -webkit-transition: height 0.3s; -moz-transition: height 0.3s; -ms-transition: height 0.3s; -o-transition: height 0.3s; transition: height 0.3s; 
    }

    header nav {
        display: inline-block;
        float: right; 
        height: 80px;
    }
        header nav a {
            height: 80px;
            line-height: 80px;
            color: #3cb5f9;
            text-align: right;
            font-size: 0.9em;

            -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; 
        }

        header nav a:hover {
            color: #0683c9;
        }

        header.smaller nav a {
            font-size: 0.6em;
            line-height: 50px;
        }

header nav .far{
    vertical-align: middle;
}



/* --Email form
-------------------------------------------------------------- */

input[disabled]#do_the_send, input[disabled]#do_the_send:hover, input[disabled]#do_the_send:active, input[disabled]#do_the_send:focus {
    background-color: gainsboro;
    box-shadow: none;
}

#recaptcha {
    text-align: center; !Important
}
.g-recaptcha {
    display: inline-block; !Important
}

.send-message-link {
    vertical-align: middle;
}

/* --Extras
-------------------------------------------------------------- */
.clearfix:after {
  visibility: hidden;
  display: block;
  content: "";
  clear: both;
  height: 0; }



/* -----------------------------------------------------------------
        Media Queries - tablet and up
----------------------------------------------------------------- */
@media all and (min-width: 500px) {
    
    .col-50 {
        width: 50%;
        display: table-column;
    }
    
    .col-lg {
        width: 70%;
        display: table-column;
    }

    .col-sm {
        width: 30%;
        display: table-column;
        height: auto;
    }
    
    .col-sm-only {
        display: none;
    }   


    .big-icons {
        max-width: 80%;
        padding-top: 1.5rem;
    }
}


/* --Media Queries - big screens
-------------------------------------------------------------- */
@media all and (min-width: 738px) {

    #main {
        padding-top: 100px;
    }
    
    .container {
        width: 85%;
        margin: 0 auto;
        padding: 0 0.7em;
    }

    header {
        height: 100px;
    }
        header img {
            width: auto;
            height: 90px;
            padding-top: 5px;
        }

        header.smaller {
            height: 60px; 
        }

        header.smaller img {
            width: auto;
            height: 56px;
            padding-top: 2px;
            -webkit-transition: height 0.3s; -moz-transition: height 0.3s; -ms-transition: height 0.3s; -o-transition: height 0.3s; transition: height 0.3s; 
        }

    header nav {
        height: 100px;
    }
        header nav a {
            width: auto;
            font-size: 1em;
            line-height: 100px;
        }

        header.smaller nav {
            height: 60px;
        }
        header.smaller nav a {
            font-size: 0.87em;
            line-height: 60px;
        }

    section p {
        font-size: 1em;
    }
    
    h2 {
        font-size: 1.4em;
    }
    
    .big-icons {
        max-width: 55%;
        margin-top: 1em;
    }

    .col-map {
        height: 100%;
        align-content: center;
        display: table-column;
    }
    
    .row-map {
        height: 300px;
        margin: 10 ;
        padding: 100;
    }
    
}

@media all and (min-width: 1300px) {
/*  Keep things looking good on very large screens */
    .container {
        width: 70%;
    }
    
}




/* --Media Queries - PRINTING
-------------------------------------------------------------- */
@media print {
    
    body {
        line-height: 1.7em;
        font-size: 0.8em;
        color: black;
    }
    
    #main {
        padding-top: 0px;
    }
    
    h2 {
        max-width: 22em;
    }

    header {
        background-color: white;
        border-bottom-width: 0px;
        position: relative;
    }

        header nav {
            visibility: hidden;
        }
}



/* --TESTING
-------------------------------------------------------------- */






/* --ANIMATIONS
-------------------------------------------------------------- */

    .a1 {
        visibility: visible; -webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; -o-animation-delay: 0.1s; -ms-animation-delay: 0.1s; animation-delay: 0.1s;
    }
    .a2 {
        visibility: visible; -webkit-animation-delay: 0.2s; -moz-animation-delay: 0.1s; -o-animation-delay: 0.1s; -ms-animation-delay: 0.1s; animation-delay: 0.2s;
    }
    .a3 {
        visibility: visible; -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; -o-animation-delay: 0.3s; -ms-animation-delay: 0.3s; animation-delay: 0.3s;
    }
    .a4 {
        visibility: visible; -webkit-animation-delay: 0.4s; -moz-animation-delay: 0.3s; -o-animation-delay: 0.3s; -ms-animation-delay: 0.3s; animation-delay: 0.4s;
    }
    .a5 {
        visibility: visible; animation-delay: 0.5s; -mozmoz-animation-delay: 0.5s; -omoz-animation-delay: 0.5s; -msmoz-animation-delay: 0.5s; -webkit-animation-delay: 0.5s; 
    }
    .a6 {
        visibility: visible; animation-delay: 0.6s; -moz-animation-delay: 0.6s; -o-animation-delay: 0.6s; -ms-animation-delay: 0.6s; -webkit-animation-delay: 0.6s;
    }
    .a7 {
        visibility: visible; animation-delay: 0.7s; -moz-animation-delay: 0.6s; -o-animation-delay: 0.6s; -ms-animation-delay: 0.6s; -webkit-animation-delay: 0.7s;
    }
    .a8 {
        visibility: visible; animation-delay: 0.8s; -moz-animation-delay: 0.6s; -o-animation-delay: 0.6s; -ms-animation-delay: 0.6s; -webkit-animation-delay: 0.8s;
    }


    @keyframes fadeIn {
        0% {
            opacity: 0;
            transform: translateY(40px);
        }
        40% {
            transform: translateY(0px);            
        }
        100% {
            opacity: 1;
        }
    }
    .fadeIn {
        opacity: 0;
        animation-duration: 1.5s;
        animation-name: fadeIn;
        -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; -o-animation-fill-mode:forwards; -ms-animation-fill-mode:forwards; animation-fill-mode:forwards;
    }

    @keyframes fadeInRight {
      from {
          opacity: 0;
          transform: translate3d(-100%, 0, 0);

      }
      to {
          opacity: 1;
          transform: none;
      }
    }
    .fadeInRight {
        opacity: 0;
        animation-duration: 1s;
        animation-name: fadeInRight;
        -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; -o-animation-fill-mode:forwards; -ms-animation-fill-mode:forwards; animation-fill-mode:forwards;    }

    @keyframes fadeInLeft {
      from {
          opacity: 0;
          transform: translate3d(200%, 0, 0);

      }
      to {
          opacity: 1;
          transform: none;
      }
    }
    .fadeInLeft {
        opacity: 0;
        animation-duration: 1s;
        animation-name: fadeInLeft;
        -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; -o-animation-fill-mode:forwards; -ms-animation-fill-mode:forwards; animation-fill-mode:forwards;    }

    @keyframes flipInXTop {
      from {
          opacity: 0;
          transform: perspective(400px) rotate3d(1, 0, 0, -90deg);
          animation-timing-function: ease-in;
      }
      40% {
            transform: perspective(400px) rotate3d(1, 0, 0, 5deg);
            animation-timing-function: ease-in;
      }
      60% {
            transform: perspective(400px) rotate3d(1, 0, 0, -3deg);
            opacity: 1;
      }
      /* 80% {
            transform: perspective(400px) rotate3d(1, 0, 0, 5deg);
      } */
      to {
            transform: perspective(400px);
          opacity: 1;
      }
    }
    .flipInXTop {
        opacity: 0;
        animation-duration: 1s;
        -webkit-backface-visibility: visible !important;
        backface-visibility: visible !important;
        transform-origin: top;
        animation-name: flipInXTop;

        -webkit-animation-fill-mode:forwards;
        -moz-animation-fill-mode:forwards;
        animation-fill-mode:forwards;
    }

    @keyframes flipInXBottom {
      from {
          opacity: 0;
          transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
          animation-timing-function: ease-in;
      }
      40% {
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        animation-timing-function: ease-in;
      }
      60% {
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
      }
      80% {
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
      }
      to {
          /* Important - with the animation-fill-mode:forwards - these are the final settings */
          opacity: 1;   
          transform: perspective(400px);
      }
    }
    .flipInXBottom {
        opacity: 0;   /* Important - to start it off hidden */
        animation-duration: 0.8s;
        -webkit-backface-visibility: visible !important;
        backface-visibility: visible !important;
        transform-origin: bottom;

        animation-name: flipInXBottom;

        -webkit-animation-fill-mode:forwards;
        -moz-animation-fill-mode:forwards;
        animation-fill-mode:forwards;

    }

    @keyframes flipInYLeft {
      from {
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        animation-timing-function: ease-in;
        opacity: 0;
      }
      40% {
        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        animation-timing-function: ease-in;
      }
      60% {
        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        opacity: 1;
      }
      80% {
        transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
      }
      to {
        transform: perspective(400px);
          opacity: 1;
      }
    }
    .flipInYLeft {
        opacity: 0;
        animation-duration: 1s;
        -webkit-backface-visibility: visible !important;
        backface-visibility: visible !important;
        transform-origin: left;
        animation-name: flipInYLeft;

        -webkit-animation-fill-mode:forwards;
        -moz-animation-fill-mode:forwards;
        animation-fill-mode:forwards;
    }

    @keyframes flipInYRight {
      from {
        transform: perspective(400px) rotate3d(0, 1, 0, -90deg);
        animation-timing-function: ease-in;
        opacity: 0;
      }
      40% {
          transform: perspective(400px) rotate3d(0, 1, 0, 20deg);
          animation-timing-function: ease-in;
      }
      60% {
          transform: perspective(400px) rotate3d(0, 1, 0, -10deg);
          opacity: 1;
      }
      80% {
          transform: perspective(400px) rotate3d(0, 1, 0, 5deg);
      }
      to {
          transform: perspective(400px);
          opacity: 1;
      }
    }
    .flipInYRight {
        opacity: 0;
        animation-duration: 1s;
        -webkit-backface-visibility: visible !important;
        backface-visibility: visible !important;
        transform-origin: right;
        animation-name: flipInYRight;

        -webkit-animation-fill-mode:forwards;
        -moz-animation-fill-mode:forwards;
        animation-fill-mode:forwards;
    }



/* -- Contact us section - to be cleaned up!
-------------------------------------------------------------- */


/*
#contact-us {
    align-self: center;
    background-color: #fefefe;
    border: 1px solid #f2f2f2;
    border-radius: 3px;
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.5);
    min-width: 350px;
    width: 50vw;
    padding: 2rem;
}
*/


.form-buttons {
    display: flex;
    justify-content: center;
    padding: 1em 0 0 0;
}

/*
.form-buttons button {
    margin-left: 16px;
}
*/

.form-field {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: .5em;
}

/*
.form-field:last-child {
    margin-bottom: 0;
}
*/

.form-field .icon {
    align-self: center;
    fill: #2980b9;
/*    font-size: 1.1rem;*/
    margin: 0.5rem 0.5rem;;
}


.form-field label {
    align-self: center;
    flex-shrink: 0;
    flex-basis: 100%;
    width: 100%;
    font-size: 0.9rem;
}


@media (min-width: 768px) {
    .form-field label {
        flex-basis: 90px;
        width: 90px;
    }
}


.form-field > section {
    border: 1px solid #aaa;
    border-radius: 3px;
    display: flex;
    flex: 1;
    margin: 0;
    padding: 0;
}

.form-field > section   input, 
                        textarea {
    border: 0;
    border-left: 1px solid #ccc;
    flex-grow: 1;
    font-size: 0.9rem;
    font-weight: 300;
    padding: .35em .5em;
}

.icon {
    display: inline-block;
    width: 2em;
    height: 2em;
    font-size: 1rem;
    color: #2980b9;
}

.a-btn,
.a-btn--filled {
    font-size: 1rem;
    padding: .35em 1em;
    cursor: pointer;
    transition: all 146ms ease;
    border: 1px solid #3498db;
    border-radius: 4px;
    background-color: #3498db;
    color: #fff;
}

.a-btn:enabled:hover,
.a-btn--filled:enabled:hover {
/*    background-color: #3498db;*/
/*    color: #fff;*/
    box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.3);
    -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; 
}


.a-btn--filled:enabled:hover {
    background-color: #2980b9;
    border-color: #2980b9;
    -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; 
}

.a-btn:disabled,
.a-btn--filled:disabled {
    background-color: #ecf0f1;
    border-color: #bdc3c7;
    color: #6a6a6a;
}

/* add a red asterisk after required labels 
 without having to include it in the markup */

.label--required:after {
    content: '*';
    color: darkred;
    margin-left: 5px;
}