html {
  position: relative;
  min-height: 100%;
}

html,body{
    height: 100%;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

body{
  background-color: #31313a;
}



/*TYPOGRAPHY*/

.light{
  color:#efeff4;
  font-family: 'Barlow', sans-serif;
}

.bglight{
  background-color:#efeff4;
}

.dark{
  color:#31313a;
}

p{
  font-family: 'Barlow', sans-serif;
  font-weight: 200;
  color:#dcdce5;
  font-size:1.2rem;
  line-height: 1.8em;
}

p.nav{
  letter-spacing: .05em;
  text-transform: uppercase;
}

p.thispage{
  color:#ffbb24;
  padding: 0 .5rem;
}

p.error{
  color:red;
}

p.success{
  color:green;
}


@media (max-width: 991px) {
  p.thispage{
    padding-right: 1rem;
  }
}

@media (max-width: 991px) {
  .navbar-nav .nav-link{
    padding-right: 1rem;
  }
}


p.skills{
  color:#92929e;
  font-size:1em;
}

h1{
  font-family: 'Gotu', sans-serif;
  color:#efeff4;
  font-size:3.5vw;
}

h2{
  font-family: 'Barlow', sans-serif;
  font-weight: 400;
  color:#dcdce5;
  font-size:1.2rem;
  line-height: 1.8em;
}

p.backbutton{
  font-size:1.5em;
}

@media (max-width: 1500px) {
  h1{
    font-size:5vw;
  }
}

@media (max-width: 768px) {
  h1{
    font-size:8vw;
  }
}


a:link {
    color: #31313a;
    text-decoration: underline;
}
/* visited link */
a:visited {
    color: #31313a;
}
/* mouse over link */
a:hover {
    color: #ffbb24;
    text-decoration: underline;
}
/* selected link */
a:active {
    color: #31313a;
}


a.nav-link:link {
    color: #DCDCE5;
    text-decoration: underline;
}
/* visited link */
a.nav-link:visited {
    color: #DCDCE5;
}
/* mouse over link */
a.nav-link:hover {
    color: #ffbb24;
    text-decoration: underline;
}
/* selected link */
a.nav-link:active {
    color: #DCDCE5;
}


a.white:link {
    color: #DCDCE5;
    text-decoration: underline;
}
/* visited link */
a.white:visited {
    color: #DCDCE5;
}
/* mouse over link */
a.white:hover {
    color: #ffbb24;
    text-decoration: underline;
}
/* selected link */
a.white:active {
    color: #DCDCE5;
}




a.gray:link {
    color: #92929e;

}
/* visited link */
a.gray:visited {
    color: #92929e;
}
/* mouse over link */
a.gray:hover {
    color: #ffbb24;

}
/* selected link */
a.gray:active {
    color: #92929e;
}





.FullContact{
background-image: url('../img/FullContact/FullContact-01.jpg');
}

.Equo{
background-image: url('../img/Equo/Equo-02.jpg');
}

.Metallic{
background-image: url('../img/Metallic/Metallic-01.jpg');
}

.OneKey{
background-image: url('../img/OneKey/OneKey-01.jpg');
}

.Aura{
background-image: url('../img/Aura/Aura-01.jpg');
}

.Advance{
background-image: url('../img/Advance/Advance-04.jpg');
}

.HealthValley{
background-image: url('../img/HealthValley/HealthValley-01.jpg');
}

.Talen2019{
background-image: url('../img/Talen2019/Talen2019-01.jpg');
}

.Gypsy{
background-image: url('../img/Gypsy/Gypsy-01.jpg');
}

.OneWater{
background-image: url('../img/OneWater/OneWater-01.jpg');
}


.CH{
background-image: url('../img/CH/CH-09.jpg');
}

.Arosteguy{
background-image: url('../img/Arosteguy/Arosteguy-01.jpg');
}

.skinlove{
background-image: url('../img/skinlove/skinlove-07.jpg');
}

.Viva{
background-image: url('../img/Viva/Viva-01.jpg');
}

.Curated{
background-image: url('../img/Curated/Curated-01.jpg');
}

.Baba{
background-image: url('../img/Baba/baba-01.jpg');
}

.Grainne{
background-image: url('../img/Grainne/Grainne-07.jpg');
}

.LaSelva{
background-image: url('../img/LaSelva/LaSelva-01.jpg');
}

.RedCanary{
background-image: url('../img/RedCanary/RedCanary-05.jpg');
}

.OlanJessica{
background-image: url('../img/OlanJessica/OlanJessica-01.jpg');
}

.Marlinspike{
background-image: url('../img/Marlinspike/Marlinspike-01.jpg');
}

.Sincro{
background-image: url('../img/Sincro/Sincro-01.jpg');
}

.Alphia{
background-image: url('../img/Alphia/Alphia-01.jpg');
}

.Ponderosa{
background-image: url('../img/Ponderosa/Ponderosa-01.jpg');
}

.CellReports{
background-image: url('../img/CellReports/CellReports-01.jpg');
}

.Nunez{
background-image: url('../img/Nunez/Nunez-04.jpg');
}

.WisePies{
background-image: url('../img/WisePies/WisePies-12.jpg');
}

.Muvz{
background-image: url('../img/Muvz/Muvz-01.jpg');
}

.Cumulus{
background-image: url('../img/Cumulus/Cumulus-01.jpg');
}

.TheKey{
background-image: url('../img/TheKey/TheKey-01.jpg');
}

.OnePro{
background-image: url('../img/OnePro/OnePro-01.jpg');
}

.Cosmic{
background-image: url('../img/Cosmic/Cosmic-01.jpg');
}

.bg{
background-repeat: no-repeat;
background-size: cover;
height:100%;
width: 100%;
background-position: center;
}



/*BUTTONS & LINES*/

button.NavButton{
  background:none;
  border:none;
}

.line1{
  width:22px;
  border-bottom:solid 1px #efeff4;
  margin:35px 0 45px 0;
}

.line2{
  width:22px;
  border-bottom:solid 1px #31313a;
  margin:35px 0 45px 0;
}


footer{
    padding-bottom:.5em;
}

.darkbg{
  background-color: #31313a;
  padding:1em;
}


/*FORMS*/

.modal-header{
  border-bottom: 1px solid #ffbb24;
  border-top-left-radius: none;
  border-top-right-radius: none;
}

.formbox{
  margin-bottom:2em;
}

.form-control{
  background:none;
  border-bottom:solid 1px #92929e;
  border-right: none;
  border-left: none;
  border-top: none;
  border-radius: 0;
  color:#92929e;
  font-family:'Barlow', sans-serif;
}

.form-control:focus{
  background:#282830;
  color:#92929e;
}

.input:focus {
    outline: none !important;
    border:none;
    background: none;
}

.btn-custom{
  color:#92929e;
  border:solid 1px #92929e;
  border-radius: 0;
  font-family: 'Barlow', sans-serif;
  font-weight: 200;
  font-size:1.2rem;
  text-transform: uppercase;
}

.btn-custom:hover{
  color:#ffbb24;
  border:solid 1px #92929e;
  border-radius: 0;
}


/*NAVBAR*/

.navbar-brand{
margin:0;
}

.logo-nav{
  height:50px;
}

.mainlogo{
  margin-right:auto;
}

.mainlogo img{
  filter: brightness(1.25) hue-rotate(187deg) grayscale(75%);
  -webkit-filter: brightness(1.25) hue-rotate(187deg) grayscale(75%);
  -moz-filter: brightness(1.25) hue-rotate(187deg) grayscale(75%);

}

.mainlogo img:hover{
  filter: grayscale(0%);
  -webkit-filter: grayscale(0%);
  -moz-filter: grayscale(0%);
}


.navbar-custom {
    margin:0 4em 0 4em;
    padding:4em 0 0 0;
}

@media (min-width: 992px) {
.navbar-custom {
position:fixed;
top:0;
right:0;
left:0;
z-index:1030;
}
}

@media (max-width: 991px) {
  .navbar-custom {
    margin:0 1.5em 0 1.5em;
    padding-top:1.5em;

  }
}

.nav-link{
  padding:0;
}

/* change the link color */
.navbar-custom .navbar-nav .nav-link {
    color: rgba(220,220,229,1);
    text-decoration: none;
}
/* change the color of active or hovered links */
.navbar-custom .nav-link,
.navbar-custom .nav-item:hover .nav-link {
    color: rgba(255,187,36,1);
}

.navbar-toggler{
  border:none;
}





/*CONTAINERS*/

  .contained{
    padding:0 4em;
    margin:0;
  }

  @media (max-width: 991px) {
    .contained{
      padding:0 1.5em;
      margin:0;
    }
  }

.spacer5{
  margin-bottom:5em;
}


.spacer10{
  margin-bottom:10em;
}


.logo{
width:40%;
height:auto;
}

@media (max-width: 1199px) {
  .logo{
  width:70%;
  height:auto;
  }

}


.bio{
  width:50%;
  height:auto;
}

@media (max-width: 1199px) {
  .bio{
    width:100%;
    height:auto;
  }
}


.row{
  margin-left:0;
  margin-right:0;
}

.zeropad{
  padding-right:0;
  padding-left:0;
}

.header-main{
  padding:15em 3em 7em 3em;
  }

.header-portfolio{
  padding:9em 3em;
  }

.header-portfolio-logos{
  padding:14em 3em 7em 3em;
  }

@media (max-width: 991px) {
  .header-main{
    padding:3em .5em 4em .5em;
  }

  .header-portfolio{
    padding:5em .5em;
  }

  .header-portfolio-logos{
    padding:5em .5em;
    }
}

.wide{
  padding-right:0;
  padding-left:0;
}



/*ALIGNMENT*/

.alignright{
  text-align: right;
}




/* MOBILE MENU BUTTON */

.animated-icon1, .animated-icon2, .animated-icon3 {
width: 30px;
height: 20px;
position: relative;
margin: 0px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}

.animated-icon1 span, .animated-icon2 span, .animated-icon3 span {
display: block;
position: absolute;
height: 3px;
width: 100%;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}


.animated-icon2 span {
background: #DCDCE5;
}



.animated-icon2 span:nth-child(1) {
top: 0px;
}

.animated-icon2 span:nth-child(2), .animated-icon2 span:nth-child(3) {
top: 10px;
}

.animated-icon2 span:nth-child(4) {
top: 20px;
}

.animated-icon2.open span:nth-child(1) {
top: 11px;
width: 0%;
left: 50%;
}

.animated-icon2.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}

.animated-icon2.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}

.animated-icon2.open span:nth-child(4) {
top: 11px;
width: 0%;
left: 50%;
}



/* Gray Scale */
.hover08 figure img {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
  opacity:.2;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.hover08 figure:hover img {
	-webkit-filter: grayscale(0);
	filter: grayscale(0);
  opacity:1;
}

@media (max-width: 991px) {
  .hover08 figure img {
  	-webkit-filter: grayscale(0);
  	filter: grayscale(0);
    opacity:1;
  }
}




figure{
  margin-bottom:0;
}

.hover12 figure {
	background: #ffffff;
}
.hover12 figure img {
	opacity: 1;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.hover12 figure:hover img {
	opacity: .3;
}



#mc_embed_signup{background:none; clear:left; font:14px Helvetica,Arial,sans-serif; width:100%;}
#mc_embed_signup .asterisk{color:#efeff4; font-size:100%;}
#mc_embed_signup div.response{color:#efeff4;}
#mc_embed_signup a:link{color:#efeff4;}
#mc_embed_signup a:visited{color:#efeff4;}
#mc_embed_signup a:active{color:#efeff4;}


.close{
  color:#ffffff;
  text-shadow:none;
}

.close:hover{
  color:#ffbb24;
  text-shadow:none;
}