@charset "UTF-8";
/* CSS Document */
@font-face {
    font-family: 'type-light';
    src: url('fonts/brandon_light-webfont.woff2') format('woff2'),
         url('fonts/brandon_light-webfont.woff') format('woff');
    font-weight: normal; font-style: normal;}
@font-face {
    font-family: 'type-reg';
    src: url('fonts/montserrat-regular-webfont.woff2') format('woff2'),
         url('fonts/montserrat-regular-webfont.woff') format('woff');
    font-weight: normal; font-style: normal;}
@font-face {
    font-family: 'type-bold';
    src: url('fonts/brandon_bld-webfont.woff2') format('woff2'),
         url('fonts/brandon_bld-webfont.woff') format('woff');
    font-weight: normal;font-style: normal;}
@font-face {
    font-family: 'type-black';
    src: url('fonts/brandon_blk-webfont.woff2') format('woff2'),
         url('fonts/brandon_blk-webfont.woff') format('woff');
    font-weight: normal;font-style: normal;}
@font-face {
    font-family: 'type-med';
    src: url('fonts/brandon_med-webfont.woff2') format('woff2'),
         url('fonts/brandon_med-webfont.woff') format('woff');
    font-weight: normal;font-style: normal;}
@font-face {
    font-family: 'type-reg2';
    src: url('fonts/brandon_reg-webfont.woff2') format('woff2'),
         url('fonts/brandon_reg-webfont.woff') format('woff');
    font-weight: normal;font-style: normal;}

body {

    background-color:#E7ECF1;
    color:#304E5A;
    font-family:"type-reg", Gotham, "Gotham", sans-serif, "Helvetica Neue", Helvetica;
    font-size: .88em;
  }

.reg2 {font-family:"type-reg2", Gotham, "Gotham", sans-serif, "Helvetica Neue", Helvetica;
font-size: 16px;}

  .body2 {background-color: #F0F0F1;}
  .body3 {background-color:#E7ECEC;}
  .body4 {background-color: #2A3947; color:#88B3B9;}

.slate_dark {color:#2A3947;}
.slate_med {color:#304E5A;}
.slate_light {color:#9299A0;}
.bright {color:#EBDA98;}
.blue {color:#7BA6CD;}
.blue_light {color:#92B5D4;}
.coral {color:#CF6554;}
.coral_light {color:#D68173;}
.teal {color:#588990;}
.teal_light {color:#96B3B7;}

.bg_slate {background-color:#2A3947;}
.bg_slate_med {background-color:#304E5A;}
.bg_light-slate {background-color:#9299A0;}
.bg_bright {background-color:#EBDA98;}
.bg_blue {background-color:#7BA6CD;}
.bg_light-blue {background-color:#92B5D4;}
.bg_coral {background-color:#CF6554;}
.bg_light-coral {background-color:#D68173;}
.bg_teal {background-color:#588990;}
.bg_light-teal {background-color:#96B3B7;}

a:link {text-decoration: none; color:#92B5D4; outline: none;}
a:visited {text-decoration: none; color:#92B5D4; outline: none;}
a:hover {text-decoration: none; color:#588990; outline: none;}
a:active {text-decoration: none; color:#bbd1d1; outline: none;}
a.a_two:link { text-decoration:none; color: #304E5A; }
a.a_two:visited {text-decoration: none; color:#304E5A;}
a.a_two:hover {text-decoration: none; color:#588990;}

input:focus { outline: none; }
select:focus { outline: none; }
textarea:focus { outline: none; }
a { outline: none; }
a link { outline: none; }
.btn-case a:active {outline:none;text-decoration:none;}
.btn-case a:focus {outline:none;text-decoration:none;}
.btn-case a:visited {outline:none;text-decoration:none;}
.btn-case a {text-decoration:none;}
button a {outline:none;text-decoration:none;}
button a:active {outline:none;text-decoration:none;}
button a:focus {outline:none;text-decoration:none;}
button a:visited {outline:none;text-decoration:none;}


#hero {
  height:100vh;
  background: linear-gradient(#5B6978, #42505F, #2A3947);
  background-size: auto 100%;
  /* object-fit: fill; */
  color:#EBDA98;
  background-color: #9299A0;
}

.menu {
  background-color: #2A3947;
  color:#92B5D4;
}

.navbar-nav > a {
          color: #92B5D4 !important; cursor: pointer; }
.navbar-nav > a:hover {
          color: #ccdddd !important; cursor: pointer; }
/*
.navbar-nav > a:active {
          color: #78A0C4 !important; cursor: pointer; }
.navbar-nav > a:focus {
          color: #78A0C4 !important; cursor: pointer; }

*/

.svg_cntr {height: auto; margin-left: auto; margin-right: auto; display: block;}

.type_main_title {font-family: "type-med"; letter-spacing: .1em;
font-size:calc( 16px + (24 - 16) * (100vw - 100px) / (400 - 20) )}

.type_case_title {font-family: "type-bold"; letter-spacing: .14em; margin-top:10px; font-size:1.8em;}

.section_rule {width:100%; height:0px; background-color:#DD9E93; margin-top:1em;}
.section_rule_cont {width:100%; height:0px; background-color:#6C5653; margin-top:4em;}


/*.btn_case {display: block; background-color:#304E5A; color:#C2D3E3; font-weight: bold;
  border-radius: 6px; padding:8px; width:92%; letter-spacing: .08em; font-size: .7em; margin-left:auto; margin-right: auto;
  box-shadow: 0px 3px 7px -1px rgba(30, 38, 42, .42);
  -webkit-transition-duration: 0.18s;
  transition-duration: 0.18s;}
.btn_case:hover {background-color:#D7DDE2; color:#304E5A;
                box-shadow: 0px 2px 4px rgba(30, 38, 42, .32);
              box-shadow: inset 0px 2px 4px -1px rgba(30, 38, 42, .25);}
*/
.btn_case {display: block; background-color:#304E5A; color:#C2D3E3; font-weight: bold;
                  border-radius: 6px; padding:8px; width:92%; letter-spacing: .08em; font-size: .8em;
                  font-family:"type-reg2", Gotham, "Gotham", sans-serif, "Helvetica Neue", Helvetica;
                  box-shadow: 0px 3px 7px -1px rgba(0, 0, 0, .82); border: none;
                  margin-left:auto; margin-right: auto;
                -webkit-transition-duration: 0.18s;
              transition-duration: 0.18s;}
.btn_case:hover {background-color:#D7DDE2; color:#304E5A;
                              box-shadow: inset 0px 2px 4px -1px rgba(30, 38, 42, .72),
                              0px 1px 1px rgba(0, 0, 0, .12);}



.port_img {width:100%; border-radius: 6px; margin-bottom: 4px; margin-top:8px; opacity:1;
  box-shadow: 0px 1px 2px 0px rgba(40, 37, 30, .22);
transition-duration: 0.21s; -webkit-transition-duration: 0.21s; /* Safari */
filter:grayscale(6%) sepia(8%) brightness(98%);
-webkit-filter:grayscale(6%) sepia(8%) brightness(98%);}

.port_img:hover {transform: translate(1px, -1px);
  filter:grayscale(0%) brightness(104%) saturate(106%) sepia(0%);
  -webkit-filter:grayscale(0%) brightness(104%) saturate(106%) sepia(0%);
                box-shadow: -2px 6px 10px -1px rgba(40, 37, 30, .7);}

.modal-dialog {box-shadow: 0px 7px 10px rgba(12, 9, 20, .6);}
.port_work {width:100%;}
.port_work2 {width:100%; box-shadow: 1px 3px 5px -1px rgba(10, 10, 10, .36); margin:4px;}

.about_img {width:90%; border-radius: 50%; margin-bottom:30px;
      box-shadow: 0px 3px 5px 0px rgba(40, 37, 30, .5);
    transition-duration: 0.28s; -webkit-transition-duration: 0.28s;
  filter: grayscale(2%) sepia(30%); -webkit-filter: grayscale(2%) sepia(30%);}

.about_img:hover {filter:grayscale(0%) brightness(104%) sepia(42%) contrast(104%);
  -webkit-filter:grayscale(0%) brightness(104%) sepia(37%) contrast(104%);
  transform: translate(0px, -8px);
width:91.6%; margin-right:12px; margin-left:-1px;
box-shadow: 0px 7px 13px -1px rgba(40, 37, 30, .58);}

.bio {font-size: 1.05em; line-height: 1.7em;}

.shadow {-webkit-transition-duration: 0.2s; /* Safari */
            transition-duration: 0.20s;}
.shadow:hover {box-shadow: 0px 3px 8px rgba(40, 37, 30, .5);}
.shadow2 {box-shadow: 0px 3px 8px rgba(40, 37, 30, .5);}

.type_foot_title {font-family: "type-bold"; letter-spacing: .0em; margin-top:10px; font-size:1em;}

.field {width: 100%; background-color: #586A7B; color:#EBDA98; border: none;
  margin-top:4px; margin-bottom:4px;}
.dropdown {width:100%; background-color: #586A7B; color:#EBDA98;
  margin-top:4px; margin-bottom:4px; border: none; font-size: 0.8em;}

::placeholder {color:#EBDA98; opacity:0.86; font-size: 0.8em;}
.social_links {line-height: 2em; letter-spacing: .03em;margin-bottom:50px;}

.s_link {-webkit-transition-duration: 0.22s; /* Safari */  transition-duration: 0.22s;}
.s_link:hover {filter:brightness(80%); -webkit-filter:brightness(80%); opacity: .9;}

.btn_foot {display: block; background-color:#769EA3; color:#EBDA98; font-weight: bold;
    border-radius: 6px; padding:4px; width:40%; letter-spacing: .08em; font-size: 1em;
    box-shadow: 0px 3px 7px -1px rgba(0, 0, 0, .92); border: none; margin-bottom: 50px;
  -webkit-transition-duration: 0.18s; /* Safari */
transition-duration: 0.18s;}
.btn_foot:hover {background-color:#EBDA98; color:#2A3947;
                box-shadow: 0px 3px 4px rgba(0, 0, 0, .82);
                box-shadow: inset 0px 2px 4px -1px rgba(30, 38, 42, .6);}
.map {border-radius: 50%; width:76%;margin-top:16px;
  -webkit-transition-duration: 1.2s; /* Safari */ transition-duration: 1.2s;
box-shadow: 0px 6px 8px rgba(0, 0, 0, .7);}

.map:hover {opacity:.68;
  transform: translate(-10px, 10px) scale(1.62); filter: contrast(130%);
          box-shadow: 0px 12px 80px rgba(0, 0, 0, .92);}

.smaller {font-size:.9em;}

.footer {vertical-align: bottom; padding-top:200px;}

.c_link {-webkit-transition-duration: 0.33s; /* Safari */
            transition-duration: 0.33s; transition-timing-function: ease-in-out;
          filter:grayscale(8%) brightness(98%) sepia(18%);
        -webkit-filter:grayscale(8%) brightness(98%) sepia(18%);}

.c_link:hover {filter:grayscale(0%) contrast(102%) brightness(102%) sepia(0%);
  -webkit-filter:grayscale(0%) contrast(102%) brightness(102%) sepia(0%);
transform: translate(0px, -2px);}

.home_logo {-webkit-transition-duration: 0.2s; /* Safari */
            transition-duration: 0.2s; transition-timing-function: ease-in-out;
          }

.home_logo:hover {filter:hue-rotate(-30deg) brightness(120%) contrast(110%);
  -webkit-filter:hue-rotate(-30deg) brightness(120%) contrast(110%); font-weight: bolder;}

.arrow1 {
    position: relative;
    animation: arrowLoad .8s;
    animation-iteration-count: 34;
    animation-timing-function: ease-in;
    animation-direction: alternate;
    animation-delay: 3.6s;
}

@keyframes arrowLoad {
    0% {transform: translate(0px, 0px);}
    100% {transform: translate(0px, 16px);}
}

.fade1 {
    position: relative;
    opacity:0;
    animation: fade_01 .96s;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-delay: .2s;
    animation-fill-mode: forwards;
}

@keyframes fade_01 {
    0% {opacity: .00;}
    100% {opacity: 1;}
}

.fade2 {
    position: relative;
    opacity:0;
    animation: fade_02 1.34s;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-delay: .6s;
    animation-fill-mode: forwards;
}

@keyframes fade_02 {
    0% {opacity: .00;}
    100% {opacity: 1;}
}

.fade3 {
    position: relative;
    opacity:0;
    animation: fade_03 1.8s;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-delay: 1s;
    animation-fill-mode: forwards;
}

@keyframes fade_03 {
    0% {opacity: .00;}
    100% {opacity: 1;}
}