/* Generated by less 2.5.1 */
/*
File Name: style.less
Date: 2020-01-10
Programmer: Sarah Bayley
*/
/*
File Name: VAR.css
Date: 04/27/19
Programmer: Sarah Bayley
*/
/* media queries */
/* colors */
/* sizes */
/* common properties */
.rounded {
  border-radius: 3px;
}
.primaryFont {
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 300;
}
.headerFont {
  font-family: "Crimson Text", sans-serif;
}
.smaller {
  font-size: 0.9em;
}
.transitionMed {
  transition: all .4s;
  -moz-transition: all .4s;
  -webkit-transition: all .4s;
}
.transitionShort {
  transition: all .2s;
  -moz-transition: all .2s;
  -webkit-transition: all .2s;
}
.clear {
  clear: both;
}
.fullwidth {
  width: 100%;
}
.block {
  display: block;
}
/* mixins */
/* TESTING */
/*************************** RESET ***************************/
/* Source: http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
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,
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,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/* Other settings */
/*
BOX-SIZING CHANGE (box-sizing property)

The following CSS changes the default box-sizing of box elements from
content-box to border-box.

border-box automatically includes border *and* padding sizes into your
box property widths. No more subtracting padding and border sizes from
your box widths! Now you can use responsive grids without fear of 
making your columns too wide and causing that annoying left-right
scroll bar at the bottom of the page.

Note: this does not take margins into account since margins are 
not technically part of the box. For those, you will still have to 
do some subtraction. 
*/
* {
  box-sizing: border-box;
}
/*
USE IMAGES, EMBEDS AND OBJECTS FREELY WITHOUT WORRYING ABOUT SIZES AND
BREAKING YOUR LAYOUTS (max-width property)

The following ensures that images and embedded content you add can't be 
wider than the box element they are currently in. This is important for 
responsive design, as this allows you to use images without having to 
specify width and height attributes in the HTML.
*/
img,
embed,
object {
  max-width: 100%;
}
/*
DEFAULT BEHAVIOR OF SELECTED HYPERLINKS (outline property)

No more ugly dotted outlines on your active links! This is not very 
noticeable until it's pointed out, but it makes for a cleaner user
experience.
*/
a {
  outline: none;
}
/*************************** LAYOUT ***************************/
/* DESKTOP */
body {
  line-height: 1.2;
  margin: 0;
}
#wrapper {
  width: 100% !important;
  margin: 0;
}
#contents {
  min-height: auto;
  display: flex;
  transition: all .4s;
  -moz-transition: all .4s;
  -webkit-transition: all .4s;
}
main,
aside {
  padding: 2.5em 0 32px 32px !important;
}
footer {
  padding: 32px;
}
main {
  flex: auto;
}
aside {
  flex: 0 0 300px;
}
.row,
h1,
h2,
h3,
p {
  clear: both;
  margin-bottom: 32px;
  padding: 0;
}
p {
  line-height: 1.8em;
}
main ul {
  margin-left: 1.5em;
}
section {
  width: 100%;
  margin-bottom: 2.5em;
}
.flexion {
  display: flex;
  width: 100%;
}
.flexion:before,
flexion:after {
  content: "";
  display: table;
}
.flexion:after {
  clear: both;
}
.innerFlexion {
  width: 100%;
}
.col,
footer section {
  margin: 0 32px 0 0 !important;
}
.D1of4 {
  width: 25%;
}
.D1of2,
.innerFlexion .D1of4 {
  width: 100%;
  padding-right: 32px;
}
.D3of4 {
  width: 75%;
}
footer {
  position: relative;
  line-height: 2;
}
footer p {
  margin-top: -10px;
}
footer > .col {
  width: 100%;
}
footer section:nth-of-type(1) img {
  text-align: left;
}
footer section:nth-of-type(1) {
  text-align: justify;
}
footer section:nth-of-type(2) {
  text-align: center;
}
footer section:nth-of-type(3) .row .col {
  text-align: right;
  width: 100%;
}
.icon {
  height: 36px;
  width: 36px;
}
.icon:not(#linkedin) {
  margin-right: calc(16px);
}
#linkedin {
  margin-right: 32px;
}
footer section:last-of-type {
  margin-right: calc(-32px) !important;
}
#copyright {
  padding-right: 32px;
}
.mobile {
  display: none;
}
/* TABLET LANDSCAPE */
@media only screen and (max-width: 1024px) {
  body {
    margin: 0;
  }
  #wrapper {
    width: 100% !important;
  }
  #contents .flexion {
    display: block;
    padding-right: 32px;
    margin-top: calc(-32px) !important;
  }
  .innerFlexion {
    display: flex;
  }
  .innerFlexion .D1of4 {
    margin: 0 !important;
  }
  .innerFlexion .D1of4:last-of-type {
    padding: 0 !important;
  }
  .innerFlexion .D1of4,
  .D1of2,
  .D3of4 {
    width: 100%;
    margin-top: 32px !important;
  }
  footer .col {
    text-align: left;
  }
  footer .row {
    width: 100%;
    display: block;
  }
  footer section:nth-of-type(3) .row .col {
    text-align: center !important;
  }
  footer section:nth-of-type(1) .row {
    display: flex;
  }
  footer section:nth-of-type(1) .row D1of4 {
    width: 25% !important;
  }
  footer section:nth-of-type(1) .row D3of4 {
    width: 75% !important;
  }
  footer section:nth-of-type(2) {
    width: 0;
    display: none;
  }
}
/* TABLET PORTRAIT & MOBILE LANDSCAPE */
@media only screen and (max-width: 860px) {
  .innerFlexion {
    display: block;
  }
  .innerFlexion .D1of4:first-of-type {
    padding: 0 !important;
  }
  aside {
    flex: 0 0 250px;
  }
  footer {
    display: block;
  }
}
/* MOBILE PORTRAIT */
@media only screen and (max-width: 600px) {
  body {
    line-height: 1.4;
  }
  #contents {
    display: block;
  }
  #contents * {
    clear: both;
  }
  footer {
    margin-bottom: 3em;
  }
  footer .col,
  footer .flexion,
  footer section {
    width: 100% !important;
    display: block !important;
  }
  footer section:nth-of-type(1) .D1of4 {
    text-align: center;
  }
  #profile {
    width: 40%;
    border-radius: 50%;
  }
  aside h2 {
    text-align: center;
  }
  #contactButton {
    display: block;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 10;
    background-color: #000;
    text-align: center;
    font-weight: 500;
    color: #fff;
    padding: 1em;
  }
  .hidden {
    display: none !important;
  }
  .desktop {
    display: none;
  }
}
/*************************** STYLES ***************************/
html {
  scroll-behavior: smooth;
}
body {
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 300;
  font-size: 16px;
  background-color: #000000;
}
#wrapper {
  background-color: #f7f2ef;
  box-shadow: 0 0 8px 3px rgba(0, 0, 0, 0.5);
}
h1 {
  font-size: 2em;
  color: #000000;
  font-family: "Crimson Text", sans-serif;
}
h2 {
  font-size: 1.6em;
  color: #064e66;
  font-family: "Crimson Text", sans-serif;
}
h3 {
  font-size: 1.3em;
  color: #d49c11;
  font-family: "Crimson Text", sans-serif;
}
.smallcaps {
  font-size: 0.8em;
}
a:link {
  text-decoration: none;
  transition: all .2s;
  -moz-transition: all .2s;
  -webkit-transition: all .2s;
}
main a:link {
  border-bottom: dotted 1px;
}
main a:link,
main a:visited {
  color: #064e66;
  font-weight: bolder;
}
footer a:link,
footer a:visited {
  color: #f7f2ef;
}
main a:hover,
main a:active {
  color: #064e66;
  border-bottom-color: #064e66;
}
footer a:hover,
footer a:active {
  color: #d49c11;
  border-bottom-color: #d49c11;
}
i {
  font-size: 2em;
  margin-left: 1em;
  transition: all .2s;
  -moz-transition: all .2s;
  -webkit-transition: all .2s;
}
i:hover {
  color: #d49c11;
  transition: all .2s;
  -moz-transition: all .2s;
  -webkit-transition: all .2s;
}
footer {
  font-size: 0.9em;
  font-weight: 300;
  color: #f7f2ef;
  background-color: #000000;
  text-align: center;
}
aside {
  background-color: #064e66;
  color: #f7f2ef;
}
aside h2 {
  font-size: 2em;
  color: #f7f2ef;
}
main {
  border-top: 1px #000000 solid;
}
.mask {
  position: relative;
  background: #000;
  display: flex;
  justify-content: center;
  text-align: center;
  margin-bottom: 32px;
  overflow: hidden;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.5);
  transition: all .4s;
  -moz-transition: all .4s;
  -webkit-transition: all .4s;
}
.mask a:link,
.mask a:visited {
  line-height: 0;
  width: 100%;
  transition: all .4s;
  -moz-transition: all .4s;
  -webkit-transition: all .4s;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 0;
}
.mask a:hover {
  transition: all .4s;
  -moz-transition: all .4s;
  -webkit-transition: all .4s;
}
.thumb {
  opacity: 1;
  transition: all .4s;
  -moz-transition: all .4s;
  -webkit-transition: all .4s;
  width: 100%;
}
.mask:hover .thumb {
  opacity: .4;
  transform: scale(1.2);
  transition: all .4s;
  -moz-transition: all .4s;
  -webkit-transition: all .4s;
}
.arrow-container {
  position: absolute;
  color: #fff;
  font-family: "Crimson Text", sans-serif;
  border: solid 3px rgba(255, 255, 255, 0);
  width: min-content;
  padding: 10%;
  transition: all .4s;
  -moz-transition: all .4s;
  -webkit-transition: all .4s;
}
.mask:hover .arrow-container {
  border-color: rgba(255, 255, 255, 0.7);
  transition: all .4s;
  -moz-transition: all .4s;
  -webkit-transition: all .4s;
  transition-delay: .4s;
}
.arrow {
  display: inline-block;
  opacity: 0;
  line-height: 1;
  font-size: 5em;
  transform: translateX(-100px);
  transition: all .4s;
  -moz-transition: all .4s;
  -webkit-transition: all .4s;
}
.arrow-container p {
  flex: 100%;
  margin-bottom: 0;
  opacity: 0;
  transition: all .4s;
  -moz-transition: all .4s;
  -webkit-transition: all .4s;
  font-weight: 700;
  letter-spacing: .2em;
  font-size: 1.4em;
}
.mask:hover p {
  opacity: 0.7;
  transition: all .4s;
  -moz-transition: all .4s;
  -webkit-transition: all .4s;
  transition-delay: .45s;
}
.mask:hover .arrow {
  opacity: 0.7;
  transform: translateX(0);
}
.mask:hover .arrow:nth-of-type(1) {
  transition-delay: .2s;
}
.mask:hover .arrow:nth-of-type(2) {
  transition-delay: .1s;
}
@media only screen and (max-width: 1024px) {
  body {
    font-size: 16px;
  }
  .thumb {
    opacity: 0.6;
  }
  .arrow-container {
    border: solid 3px rgba(255, 255, 255, 0.7);
  }
  .arrow-container p {
    opacity: 0.7;
  }
  .arrow {
    opacity: 0.7;
    transform: translateX(0);
  }
  footer {
    font-size: 1em;
  }
  i {
    margin: 0 0.5em;
  }
}
@media only screen and (max-width: 860px) {
  .gallery {
    opacity: 1;
  }
}
@media only screen and (max-width: 600px) {
  body {
    font-size: 18px;
  }
}
/*************************** HEADER ***************************/
header {
  background-color: #000000;
  color: rgba(255, 255, 255, 0.6);
  font-family: "Crimson Text", sans-serif;
  padding-top: calc(( 220px - calc(110px) ) * .5);
  padding-bottom: calc(( 220px - calc(110px) ) * .5);
  width: 100%;
  margin: 0;
  height: 220px;
  align-items: center;
  line-height: 1;
  transition: all .4s;
  -moz-transition: all .4s;
  -webkit-transition: all .4s;
  z-index: 5;
}
header a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: all .4s;
  -moz-transition: all .4s;
  -webkit-transition: all .4s;
}
#bannerText {
  transition: all .4s;
  -moz-transition: all .4s;
  -webkit-transition: all .4s;
  vertical-align: middle;
}
#pageTitle {
  text-align: center;
  font-size: calc(calc(110px) * .7);
  font-weight: 300;
  letter-spacing: .3em;
  transition: all .4s;
  -moz-transition: all .4s;
  -webkit-transition: all .4s;
}
#tagline {
  text-align: center;
  font-size: calc(calc(110px) * .3);
  font-weight: 400;
  line-height: 2;
  transition: all .4s;
  -moz-transition: all .4s;
  -webkit-transition: all .4s;
}
nav {
  /*.fullwidth;
    bottom: 0;
    width: auto;
    text-align: center;*/
  display: none;
}
nav,
.drop-container {
  background-color: rgba(0, 0, 0, 0.5);
}
.navul {
  display: flex;
}
.navul > li {
  width: 25%;
}
nav ul li {
  transition: all .4s;
  -moz-transition: all .4s;
  -webkit-transition: all .4s;
}
nav ul li:hover {
  background-color: rgba(0, 0, 0, 0.7);
  cursor: pointer;
}
.navlink {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  display: block;
  width: 100%;
  line-height: 2.7em;
}
.navlink:before {
  content: "";
  /* This is necessary for the pseudo element to work. */
  display: block;
  /* This will put the pseudo element on its own line. */
  width: 0;
  /* Change this to whatever width you want. */
  height: 5px;
}
.navlink:after {
  content: "" !important;
  /* This is necessary for the pseudo element to work. */
  display: block !important;
  /* This will put the pseudo element on its own line. */
  margin: 0 auto -2px auto;
  /* This will center the border. */
  width: 0;
  /* Change this to whatever width you want. */
  border-bottom: 2px solid #8c6800;
  /* This creates the border. Replace black with whatever color you want. */
}
nav ul li:hover .navlink {
  transition-duration: .1s;
}
.navlink:not(.thistab):hover,
.navlink:not(.thistab):hover:after,
.nav-dropper:hover .navlink:after {
  color: #8c6800;
}
.navlink:hover:after {
  transition-duration: .5s;
}
.navlink:not(.thistab):hover:after,
.nav-dropper:hover .navlink:after,
.thistab:after {
  content: "";
  /* This is necessary for the pseudo element to work. */
  display: block;
  margin: 0 auto;
  /* This will center the border. */
  width: 100%;
  /* Change this to whatever width you want. */
}
.thistab {
  background-color: rgba(0, 0, 0, 0.9);
  transition-duration: .4s;
}
.thistab:after {
  border-bottom: 2px solid #7f1008 !important;
}
.nav-dropper {
  position: relative;
}
.drop-container {
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
  line-height: 2em;
  display: none;
  position: absolute;
  width: 100%;
  height: auto;
  transition: all .4s;
}
.nav-dropper:hover .drop-container {
  display: block;
}
.drop-item {
  padding: 0 0 5px 0;
  transition-duration: .5s;
}
.drop-item:after,
.drop-item:hover:after {
  border-bottom: 0 !important;
}
.drop-item:hover {
  color: #8c6800;
}
.drop-container li a {
  background-color: rgba(0, 0, 0, 0.5);
}
.drop-container:hover > .drop-item {
  transition: all .4s;
}
/* TABLET LANDSCAPE */
@media only screen and (max-width: 1024px) {
  header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 150px;
    transition: all .2s;
    -moz-transition: all .2s;
    -webkit-transition: all .2s;
    padding-top: calc(( 150px - calc(75px) ) * .5);
    padding-bottom: calc(( 150px - calc(75px) ) * .5);
  }
  #bannerText {
    width: 100%;
    transition: all .2s;
    -moz-transition: all .2s;
    -webkit-transition: all .2s;
  }
  #wrapper {
    position: relative;
  }
  #contents {
    margin-top: 150px;
    transition: all .2s;
    -moz-transition: all .2s;
    -webkit-transition: all .2s;
  }
  #pageTitle {
    font-size: calc(calc(75px) * .65);
  }
  #tagline {
    font-size: calc(calc(75px) * .35);
  }
  .headerScroll {
    height: calc(100px);
    box-shadow: 2px 0 3px 4px rgba(0, 0, 0, 0.5);
    padding-top: calc(( calc(100px) - calc(calc(100px) * (.6)) ) * .5);
    padding-bottom: calc(( calc(100px) - calc(calc(100px) * (.6)) ) * .5);
    transition: all .4s;
    -moz-transition: all .4s;
    -webkit-transition: all .4s;
  }
  .headerScroll #tagline,
  .bannerTextScroll #tagline {
    color: #d49c11;
  }
  .bannerTextScroll #pageTitle {
    font-size: calc(calc(calc(100px) * (.6)) * .65);
    transition: all .4s;
    -moz-transition: all .4s;
    -webkit-transition: all .4s;
  }
  .bannerTextScroll #tagline {
    font-size: calc(calc(calc(100px) * (.6)) * .35);
    transition: all .4s;
    -moz-transition: all .4s;
    -webkit-transition: all .4s;
  }
  .contentsScroll {
    margin-top: calc(100px) !important;
    transition: all .4s;
    -moz-transition: all .4s;
    -webkit-transition: all .4s;
  }
}
/* TABLET PORTRAIT & MOBILE LANDSCAPE */
@media only screen and (max-width: 860px) {
  header {
    height: 150px;
    padding-top: calc(( 150px - calc(60px) ) * .5);
    padding-bottom: calc(( 150px - calc(60px) ) * .5);
  }
  #contents {
    margin-top: 150px;
  }
  #pageTitle {
    font-size: calc(calc(60px) * .6);
  }
  #tagline {
    font-size: calc(calc(60px) * .4);
  }
  .headerScroll {
    height: calc(100px);
    padding-top: calc(( calc(100px) - calc(calc(100px) * (.6)) ) * .5);
    padding-bottom: calc(( calc(100px) - calc(calc(100px) * (.6)) ) * .5);
  }
  .bannerTextScroll #pageTitle {
    font-size: calc(calc(calc(100px) * (.6)) * .6);
  }
  .bannerTextScroll #tagline {
    font-size: calc(calc(calc(100px) * (.6)) * .4);
  }
  .contentsScroll {
    margin-top: calc(100px);
  }
  nav {
    display: block;
    position: absolute;
    left: 1000px;
    top: 0;
    right: 0;
  }
  navul {
    display: none;
  }
  .show-nav {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    right: 30%;
    transition: 1s;
  }
  .show-nav .navul {
    display: block;
    width: 100%;
    text-align: left;
    background-color: rgba(0, 0, 0, 0.9);
  }
  .show-nav .navul > li {
    width: 100%;
    padding-left: 32px;
  }
  .navlink:after {
    width: 0 !important;
    height: 0 !important;
    border: none !important;
    content: none !important;
  }
}
/* SMALL MOBILE PORTRAIT */
@media only screen and (max-width: 380px) {
  header {
    height: 120px;
    padding-top: calc(( 120px - calc(48px) ) * .5);
    padding-bottom: calc(( 120px - calc(48px) ) * .5);
  }
  #contents {
    margin-top: 120px;
  }
  #pageTitle {
    font-size: calc(calc(48px) * .6);
  }
  #tagline {
    font-size: calc(calc(48px) * .4);
  }
  .headerScroll {
    height: calc(80px);
    padding-top: calc(( calc(80px) - calc(calc(80px) * (.6)) ) * .5);
    padding-bottom: calc(( calc(80px) - calc(calc(80px) * (.6)) ) * .5);
  }
  .bannerTextScroll #pageTitle {
    font-size: calc(calc(calc(80px) * (.6)) * .5);
  }
  .bannerTextScroll #tagline {
    font-size: calc(calc(calc(80px) * (.6)) * .4);
  }
  .contentsScroll {
    margin-top: calc(80px);
  }
}
/*************************** FORMS ***************************/
form {
  width: 100%;
  color: rgba(255, 255, 255, 0.9);
}
fieldset {
  display: block;
  margin: 0 0 32px 0;
  width: 100%;
}
label {
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 300;
  display: block;
  width: 100%;
  padding-bottom: .5em;
}
input:not([type="file"]),
textarea,
select {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.6);
  border: none;
  padding: .8em;
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 300;
  font-size: 1em;
  border-radius: 3px;
  box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.4);
}
select {
  appearance: none;
  padding-right: 2em;
}
select:invalid {
  color: rgba(0, 0, 0, 0.4);
}
select [disabled] {
  color: rgba(0, 0, 0, 0.4);
}
select option {
  color: black;
}
::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: black;
  opacity: .4;
  /* Firefox */
}
:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: rgba(0, 0, 0, 0.4);
}
::-ms-input-placeholder {
  /* Microsoft Edge */
  color: rgba(0, 0, 0, 0.4);
}
.agree {
  text-align: center;
}
.agree label {
  width: auto;
}
.agree input {
  margin: 0 .5em 0 0;
  padding: 0;
  width: auto;
  float: none;
}
.submit-container {
  text-align: center;
}
.required:before {
  content: "*";
  color: red;
}
/*************************** LISTS ***************************/
.tags {
  list-style: none;
  margin-left: 0;
}
.tags li {
  background-color: #000000;
  border-radius: 5px;
  display: inline-block;
  padding: .4em .4em .4em .3em;
  margin: 0 0 .3em 0;
  color: white;
  font-size: 0.8em;
}
.tags li:before {
  content: "✓ ";
}
/*************************** BUTTONS ***************************/
/*
File Name: interactive.css
Date: 04/27/19
Programmer: Sarah Bayley
*/
button a {
  color: inherit;
  display: block;
  width: 100%;
}
#contactSubmit {
  position: relative;
  cursor: pointer;
  border: 0;
  transition: all .4s;
  -moz-transition: all .4s;
  -webkit-transition: all .4s;
  padding: 1.5em 2em;
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 300;
  font-size: 1em;
  font-weight: 700;
  background-color: #000;
  color: #f7f2ef;
  letter-spacing: .2em;
  width: 100%;
  transition: all .2s;
  -moz-transition: all .2s;
  -webkit-transition: all .2s;
}
#contactSubmit:hover {
  background-color: #d49c11;
  color: #000;
  transition: all .2s;
  -moz-transition: all .2s;
  -webkit-transition: all .2s;
  position: relative;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
}
.collapse-btn:after {
  content: " ⮟";
  font-weight: 900;
}
.active-collapse-btn:after {
  content: " ⮝";
}
.collapse-btn:focus {
  outline: none;
}
.collapse-btn::-moz-focus-inner {
  border: 0;
}
.link-btn:after {
  content: " ⮞";
  font-weight: 900;
}
.icon {
  border-radius: 50%;
}
#gmail {
  background-color: #711f15;
  border: solid 1px #711f15;
}
#linkedin {
  background-color: #00486d;
  border: solid 1px #00486d;
}
.icon:hover {
  transform: rotate(360deg);
  transition: 1s;
}