/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- General Content
- Typography
- Header &  Navigation
- Images & Media
- Footer
- Media Queries
https://www.w3schools.com/tags/ref_pxtoemconversion.asp
https://mycolor.space/?hex=%23252525&sub=1
–––––––––––––––––––––––––––––––––––––––––––––––––– */


/* General Content
–––––––––––––––––––––––––––––––––––––––––––––––––– */



.html{padding:0; margin:0;}
.main{padding-top:7%;}
.row{padding-top: 3%; padding-bottom: 2%;}
.green{background-color:#7accc8;}
.gray{background-color: #252525;}
.orange{color: #D88270;}

/*.row.gray{padding: 7% 0;} */



.floating-label-form-group {
    position: relative;

}

.floating-label-form-group input, .floating-label-form-group textarea {
    font-size: 1.3em;
    position: relative;
    z-index: 1;
    padding-right: 0;
    padding-left: 0;
    resize: none;
    border-bottom: 0.1px solid #D88270;
    border-top: none;
    border-left: none;
    border-right: none;
    border-radius: 0;
    background: none;
    box-shadow: none !important;

}

.floating-label-form-group label{
    display: none;
}


.form-control {
    display: block;
    width: 100%;
    height: calc(0.9rem + 0.75rem + 0.25rem);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1;
    background-color: #fff;
    background-clip: padding-box;
    border: 0.125rem solid #ced4da;
    border-radius: 0.5rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    margin:0;
}


/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
html{
  width: 100% !important;
  overflow-x: hidden !important;
}
body{
  font-family: 'Open Sans', sans-serif;
  font-size: 1.5em;
  color: #000;
  width: 100% !important;
  overflow-x: hidden !important;
  overflow-y:hidden !important;
  height:100%;
  justify-content: center;
  align-items: center;
  font-weight: 400;
  color: #fff;
}

h1{
font-family: "futura-pt","HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
font-weight: 100;
letter-spacing: 2px;
font-style: inherit;
}

h2{
  font-family: 'Open Sans', sans-serif;
  font-size: 3em;
  margin-top: 0.67em;
}

.contactHeading{
  color: #fff;
  text-align: center;
  font-weight:500;
  padding-bottom: 2.5rem;
}
::placeholder{
  color:#fff;
}

#contact .main{
    padding-top: 3.5%;
}


input:focus{
  border: none !important;
}

button{
  color: #D88270 !important;
}

button:hover{
  color: #fff !important;
  border-color: #D88270;
}




.button1 {
  background-color: #fff; /* Green */
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.button2 {
  background-color: white;
  color: black;
  border: none;
}

.button2:hover {
  background-color: #008CBA;
  color: white;
}





h2.bio{
    color:#9A5E6D;
    margin-top: 0;
}


p.bio{color:#fff;}



/* Header &  Navigation
––––––––––––––––––––––––––––––––––––––––––––––––– */
header.main_nav{
  padding: 0;
  display: block; /*	Displays an element as a block element (like <p>). It starts on a new line, and takes up the whole width */
  height: 100vh;
}

.container{
  width: 100% !important;
}


.morePadding{padding-top:3%;}

.morePaddingTopAndBottom{
  padding-top: 4%;
  padding-bottom: 4%;
}

.welcome__heading {
    margin-bottom: 0;
    font-weight: 300;
    font-size: 2.5em;
    line-height: 67px;
    letter-spacing: 0;
    color: #fff;
}

.headingTop{


  margin: auto; /* center */
  position: absolute;
  left: 50%;
  top: 40%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.logoFirst{
  text-align: center;
  margin: auto; /* center */
  position: absolute;
  left: 50%;
  top: 40%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.logoFirst a {
  font-size: 4em;
  color: #fff;
  text-decoration: none;
  border: 3px solid #fff;
  text-transform: uppercase;
  padding: 2px 10px 0 10px; /* 2top, 10 left, 0bottom, 10 right*/
  margin: 0;
  transition: all 0.8s;
}

.logoFirst a:hover {
  background-color: #fff;
  color: #d88270;
}


.logo{
  text-align: center;
  margin: auto; /* center */
  position: absolute;
  left: 50%;
  top: 70%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.logo a {
  font-size: 2em;
  color: #fff;
  text-decoration: none;
  border: 3px solid #fff;
  text-transform: uppercase;
  padding: 2px 10px 0 10px; /* 2top, 10 left, 0bottom, 10 right*/
  margin: 0;
}

.logo a:hover {
  background-color: #fff;
  color: #FCB667;
}

.background {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
}

#graphic{
    min-height: 100vh; /* Use vh as a fallback for browsers that do not support Custom Properties */
    min-height: calc(var(--vh, 1vh) * 100);
     mobile viewport bug fix for Safari: */
    min-height: -webkit-fill-available;
    margin: 0 auto;
    /*height: 88vh;
    width: 100vh;*/
    padding: 0;
    display: block;
    z-index: 2;
}

.flex {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

nav {
    font-size: 1.3em;
    bottom: 0;
    left: 0;
    position: relative;
    background: #252525;
    border-bottom: 3px solid #D88270;
    height: 50px;
    text-align: center;
    width: 100%;
    z-index: 99;
    vertical-align: middle;
    display:flex;
    justify-content:center;
    align-items:center;
    display: none;
}

nav.fixed {
    bottom: inherit;
    left: 0;
    position: fixed;
    top: 0;
}

nav.hidden {
  display: none;
}

nav.unhide {
  display: flex;
  animation: popDown 0.5s ease;
  -webkit-animation: popDown 0.5s ease;
}


@keyframes popDown {
  0% {
    transform: translateY(-100px);
  }
}




nav .link-wrap div {
  display: inline;
  text-transform: uppercase;
  color:#FFFFFF;
  margin: 0 20px;
  position: relative;
  }

nav .link-wrap div:hover {
      color: #D88270;
  }


  nav a{
    text-decoration: none;
    text-transform: uppercase;
    color: #FFFFFF;
    margin: 0 15px;
  }

  nav a:hover{
    text-decoration: none;
    text-transform: uppercase;
    color: #D88270;
  }

  nav .active {
      color: #D88270;
  }


  .scrollNav-active {
      color: #D88270;
  }

/* for mobile menu */

.topnav {
  overflow: hidden;
  background-color: #333;
  position: relative;
  min-height: 50px;
  z-index: 9;
}

.topnav #myLinks {
  display: none;
}

.topnav a {
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
}

.topnav a.icon {
  background: black;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.active {
  background-color: #252525;
  color: white;
}

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

/* Images & Media
––––––––––––––––––––––––––––––––––––––––––––––––– */
img{
  max-width: 100%; /* 100% of container */
  -webkit-filter: drop-shadow(0.5px 0.5px 0.5px #222);
  filter: drop-shadow(0.5px 0.5px 0.5px #222);
  position:relative;
  display:inline-block;
}



img.avatar{
  border-radius: 400px;
  border: 5px solid #fff;
  margin-left: 8rem;

  background-image: -webkit-linear-gradient(15deg, #fff 45%, #fff 20%);
}

img:hover{
  opacity: 0.8;
}

img.avatar{
  max-width: 220px;
}


.image {
    position:relative;
    display:inline-block;
    margin:10px;
}



img:hover .overlay{
  -webkit-filter: brightness(5%);
  -moz-filter: brightness(5%);
  -o-filter: brightness(5%);
  -ms-filter: brightness(5%);
  filter: brightness(5%);
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  display:block;
  position: absolute;
  top: 10px;
  left: 16px;
}



.imgContainer {
  position: relative;
  width: 100%;
}

.image4 {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: black;
}

.imgContainer:hover .overlay {
  /*opacity: 75%;*/
  opacity: 0;
}

.clickMore {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 53%;
  left: 48%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.text4img {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 82%;
  left: 0;
  width:100%;
  text-align: center;
  background-color: #fff;
}




.second {
    background:red;
    height: 600px;
    width:100%;
}

#about .bar {
  background: #cb5a42;
  width: 0;
  margin: .1em 0;
  color: #fff;
  position: relative;
  transition: width 5s, background .7s;
  -webkit-transform: translate3d(0, 0, 0);
  clear: both;
}
#about .bar:nth-of-type(2n) {
  background: #ef867b;
}
#about .bar .label {
  font-size: .75em;
  padding: 1.3em;
  background: #252525;
  width:5em;
  display: inline-block;
  position: relative;
  z-index: 2;
  font-weight: bold;
  font-family: "Montserrat", sans-serif;
  line-height: 0.5;
}
#about .bar .label.light {
  background: #3f3f3f;
}

#about .count {
  position: absolute;
  right: .25em;
  top: .75em;
  padding: .35em;
  font-size: .75em;
  font-weight: bold;
  font-family: "Montserrat", sans-serif;
}

#about .holder {
  padding-bottom: 2em;
}

.diagonal{
  background-color: #D88270;
  background-image: -webkit-linear-gradient(15deg, #D88270 45%, #fff 20%);

  padding-top: 7%;
}

#about{
  background-image: -webkit-linear-gradient(15deg, #D88270 50%, #fff 20%);
}

/* Footer
––––––––––––––––––––––––––––––––––––––––––––––––– */
ul.social{
    display: block; /*	Displays an element as a block element (like <p>). It starts on a new line, and takes up the whole width */
    margin:0;
    list-style-type: none;
    text-align: center;
}

ul.social li{
  font-size: 2em;
  display:inline;
  padding: 0 2%;
}
ul.social li a{
  color: #666;
}

ul.social li.facebook a:hover{color: rgb(59,89,152);}
ul.social li.twitter a:hover{color: rgb(0,172,237);}
ul.social li.instagram a:hover{color: rgb(81,127,237);}
ul.social li.github a:hover{color: #000;}
ul.social li.email a:hover{color: rgb(135, 180, 215);}
ul.social li.linkedin a:hover{color: rgb(0,123,182);}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-weight: 300;
}

p.copyright{
  text-align: center;
  color: #666;
  font-size: 1em;
}

.timeline-date-mob{
  display:none;
}

/* Media Queries
––––––––––––––––––––––––––––––––––––––––––––––––– */
@media  (min-width: 319px) and (max-width: 330px){
  .logo a{
    font-size: 1em;
  }
  img.avatar{
    margin-left: 2.5rem;
  }
  #portfolio-menu{
    padding-top: 16% !important;
  }
  .row {
    padding-top: 9% !important;
  }
  #firstRow{
    padding-top: 18% !important;
  }

  .fa-lg {
    font-size: 1em !important;
  }

  p.copyright {
    font-size: 0.7em !important;
  }
  body{
    background-color: #D88270;
  }
}
@media  (min-width: 331px) and (max-width: 369px){
  .logo a{
    font-size: 1em;
  }
  img.avatar{
    margin-left: 4rem;
  }
  body{
    background: linear-gradient(180deg, #D88270 50%, #fff 50%);
  }
}

@media  (min-width: 370px) and (max-width: 380px){
  .logo a{
    font-size: 1em;
  }
  img.avatar{
    margin-left: 5rem;
  }
  body{
    background: linear-gradient(180deg, #D88270 50%, #fff 50%);
  }
}

@media  (min-width: 410px) and (max-width: 440px){
  .logo a{
    font-size: 1em;
  }
  img.avatar{
    margin-left: 8.5rem;
  }

  h1, h2, h3, h4, h5, h6{
    padding-left: 10px !important;
  }
  p{
    padding-left: 10px;
  }
}

@media (max-width: 565px){
  nav {
      font-size: 0.8em;
  }
  nav a {
    margin: 0 10px;
  }
  .diagonal{
    background-image: -webkit-linear-gradient(15deg, #D88270 100%, #fff 0%);
  }
}

@media (max-width: 216px){
  .logo a{
    font-size: 0.7em;
  }
}




@media (min-width: 292px) and (max-width: 367px){
  .logo a{
    font-size: 1.5em;
  }
  nav {
    font-size: 0.7em;
  }
  nav a {
    margin: 0 6px;
  }
  #portfolio {
    width: 100%;
 	  min-height: 2vh;
 	  background: #fff;
 	  position: relative;
 	  display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
 	  grid-gap: 0.9rem;
    margin-bottom: 3rem;
  }
  .timeline-date{
    display: none;
  }
  .timeline-date-mob{
    display:block;
    margin-bottom: 0;
  }
  .timeline > li{
    margin-bottom: 0 !important;
  }
  .proj-manager{
    margin-bottom: 0;
  }
  h3{
    margin-bottom: 0;
  }
}

/* Larger than mobile */
@media (min-width: 360px) and (max-width: 597px){
  .logo a{
    font-size: 2em;
  }
  .row {
    padding-top: 8%;
  }
  #portfolio-menu{
    padding-top: 16% !important;
      background-color: #fff;
  }
  .timeline-date{
    display: none;
  }
  .timeline-date-mob{
    display:block;
    margin-bottom: 0;
  }
  .timeline > li{
    margin-bottom: 0 !important;
  }
  .proj-manager{
    margin-bottom: 0;
  }
  h3{
    margin-bottom: 0;
  }
  #firstRow{
    padding-top: 14% !important;
  }
  #lastRow{
    padding-top: 14% !important;
  }
  #contact{
    padding-top: 0 !important;
  }
  .extraPaddingTop{
    padding-top: 25% !important;
  }
}

@media (min-width: 414px) and (max-width: 420px){
  .main {
    padding-left: 10px;
    padding-right: 10px;
  }

}


@media (max-width: 962px){
  .logoFirst a{
    border: none;
  }
}


/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 565px) and (max-width: 812px){
  img.avatar{
    margin-left: 0rem;
  }
  img.avatar {
    max-width: 150px;
  }
}


/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {
  p.copyright {
    margin-top: 7rem;
  }
}



  .text{
    display: inline-block;
    font-size: 30px;
    line-height: 1.205;
  }

  .text__first, .text__second{
    position: relative;
    font-size: 30px;
    display:inline-block;
    padding-bottom:1.5px;
  }

  .text__word{
    opacity: 0;
    font-size: 35px;
  }

  .text__first-bg, .text__second-bg{
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 100;
    transform-origin: left;
    transform: scaleX(0);
  }

  .text__first-bg{
    background-color: #5fbff9;
  }

  .text__second-bg{
    background-color: #f06543;
  }

  .text__second{
    margin-left: 15vmin;
  }


/* start of timeline */

  .timeline {
    list-style: none;
  }
  .timeline > li {
    margin-bottom: 60px;
  }

  /* for Desktop */
  @media ( min-width : 640px ){
    .timeline > li {
      overflow: hidden;
      margin: 0;
      position: relative;
    }
    .timeline-date {
      width: 85.5px;
      float: left;
      margin-top: 20px;
      margin-left: 25px;
    }
    .timeline-content {
      width: 75%;
      float: left;
      border-left: 3px #D88270 solid;
      padding-left: 40px;
    }
    .timeline-content:before {
      content: '';
      width: 12px;
      height: 12px;
      background: #9A5E6D;
      position: absolute;
      left: 106px;
      top: 24px;
      border-radius: 100%;
    }


    .offset-by-one.column, .offset-by-one.columns {
    margin-left: 8.66666666667%;
    margin-bottom: 2%;
}
  }

  .center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

/* end of timeline */


.moreInfo {
  margin-top: 2rem;
}

.moreInfo a{
  color:#D88270 !important;
}

.marginBottomZero{
  margin-bottom: 0;
  padding-bottom: 0;
}


/*---------------*/
/***** Zoe *****/
/*---------------*/

figure.effect-zoe figcaption {
	top: auto;
	bottom: 0;
	padding: 1em;
	height: 3.75em;
	background: #fff;
	color: #3c4a50;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,100%,0);
	transform: translate3d(0,100%,0);
}

figure.effect-zoe h2 {
	float: left;
}

figure.effect-zoe p.icon-links a {
	float: right;
	color: #3c4a50;
	font-size: 1.4em;
}

figure.effect-zoe:hover p.icon-links a:hover,
figure.effect-zoe:hover p.icon-links a:focus {
	color: #252d31;
}

figure.effect-zoe p.description {
	position: absolute;
	bottom: 8em;
	padding: 2em;
	color: #fff;
	text-transform: none;
	font-size: 90%;
	opacity: 0;
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;
	-webkit-backface-visibility: hidden; /* Fix for Chrome 37.0.2062.120 (Mac) */
}

figure.effect-zoe h2,
figure.effect-zoe p.icon-links a {
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,200%,0);
	transform: translate3d(0,200%,0);
}

figure.effect-zoe p.icon-links a span::before {
	display: inline-block;
	padding: 8px 10px;
	font-family: 'feathericons';
	speak: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-eye::before {
	content: '\e000';
}

.icon-paper-clip::before {
	content: '\e001';
}

.icon-heart::before {
	content: '\e024';
}

figure.effect-zoe h2 {
	display: inline-block;
}

figure.effect-zoe:hover p.description {
	opacity: 1;
}

figure.effect-zoe:hover figcaption,
figure.effect-zoe:hover h2,
figure.effect-zoe:hover p.icon-links a {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-zoe:hover h2 {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
}

figure.effect-zoe:hover p.icon-links a:nth-child(3) {
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}

figure.effect-zoe:hover p.icon-links a:nth-child(2) {
	-webkit-transition-delay: 0.15s;
	transition-delay: 0.15s;
}

figure.effect-zoe:hover p.icon-links a:first-child {
	-webkit-transition-delay: 0.2s;
	transition-delay: 0.2s;
}

/*---------------*/

 #portfolio {
	 width: 100%;
	 min-height: 2vh;
	 background: #fff;
	 position: relative;
	 display: grid;
   /*grid-template-columns: auto auto auto auto;*/
     grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
     /* grid-template-columns: repeat(4, minmax(200px, 1fr));
     grid-template-rows: 1fr 1fr;*/
	 grid-gap: 0.9rem;
     margin-bottom: 3rem;
}
 .project {
	 position: relative;
	 background: #f2dad7;
	 overflow: hidden;
     width: 100%;
     height: 180px;
     border-top: 2px solid #D88270;
     margin-bottom: 0.9rem;
}
 .project img {
	 position: absolute;
	 opacity: 0.9;
     /*transform: scale(1.2);*/
     (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

 #second-img img{
     transform: scale(1.6) !important;
 }

.darkerImg{
    filter: brightness(98%);
}

.hide{
    visibility: hidden;
}

 .project p {
	 position: absolute ;
	 text-align: center;
	 width: 100%;
	 padding: 1em 0;
	 text-transform: uppercase;
	 letter-spacing: 2px;
	 z-index: 3;
}

.project:hover p {
    visibility: visible;
}

.project:hover h3 {
    visibility: visible;
}

 .project .grid__title {
	 position: absolute;
	 width: 100%;
	 text-align: center;
	 white-space: nowrap;
	 bottom: 0;
	 font-weight: 100;
	 font-size: 0.8em;
	 z-index: 3;
	 text-transform: uppercase;
	 color: #474545;
	 letter-spacing: 2px;
}
 .project:hover .grid__overlay {
	 transform: translateY(0%);
}
 .grid__overlay {
	 background: #D88270;
	 height: 100%;
	 grid-column: -1;
	 grid-row: -1;
	 position: relative;
	 display: grid;
	 justify-items: center;
	 align-items: center;
	 transform: translateY(101%);
	 transition: all 0.3s ease-in-out;
   opacity: 85%;
}
 .grid__overlay button {
	 background: none;
	 outline: none;
	 font-weight: 100;
	 letter-spacing: 2px;
	 border: 1px solid #fff;
	 color: #fff;
	 text-transform: uppercase;
	 padding: 10px;
}
 .grid__overlay button:hover {
	 transition: all 0.3s ease-in-out;
	 background: #fff;
	 color: #d1a39e;
	 transform: scale(1.05);
}










.containerForImage {
  width: 50%;
}

.images {
  display: block;
  width: 100%;
  height: auto;
}

.overlays {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #D88270;
  opacity: 85%;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}

.containerForImage:hover .overlays {
  height: 100%;

}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}


.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 50px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: #252525; /* Fallback color
  background-color: #fff; */
  z-index: 9999;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s;
    max-width: 700px;
}



body.modal-open {
  height: 100vh;
  overflow-y: hidden;
    overflow: hidden;
    position: fixed;
}



/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

/* The Close Button */
.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  /*padding: 2px 16px;*/
  background-color: #D88270;
  color: white;
}

/*.modal-body {padding: 2px 16px;}*/

.modal-footer {
  padding: 2px 16px;
  background-color: #D88270;
  color: white;
}

.openModalBtn{
  background-color: #fff !important;
  border-radius: 0px;
  border: 1px solid #bbb;
  padding: 3 15px;
}

.openModalBtn:hover{
  color: #D88270 !important;
}


/* The grid: Four equal columns that floats next to each other */
.columnGallery {
    float: left;
    margin-left: auto;
    width: 15%;
    padding: 10px;
}

/* Style the images inside the grid */
.columnGallery img {
    opacity: 0.8;
    cursor: pointer;
    max-height: 60px;
}

.columnGallery img:hover {
    opacity: 1;
}

.rowGallery{
    margin-left: auto;
}

/* Clear floats after the columns */
.rowGallery:after {
    content: "";
    display: table;
    clear: both;
}

/* The expanding image container */
.containerGallery {
    position: relative;
    display: none;
}

/* Expanding image text */
#imgtext {
    position: absolute;
    bottom: 15px;
    left: 15px;
    color: white;
    font-size: 20px;
}

/* Closable button inside the expanded image */
.closebtn {
    position: absolute;
    top: 10px;
    right: 15px;
    color: white;
    font-size: 35px;
    cursor: pointer;
    z-index: 9;
}

.close{
    position: absolute;
    top: 10px;
    right: 25px;
    color: white;
    font-size: 35px;
    cursor: pointer;
    z-index: 9;
}

#expandedImg{
    width:100%;
    height:auto;
    /*margin-left: 7px;*/
}

#expandedImg:hover{
    opacity: 1;
    /*margin-left: 7px;*/
}

#portfolio-menu{
  padding-top: 5%;
}

.alert-success{
  padding-bottom: 4rem;
}


#form-triggerSm, #form-triggerSm img {
    width: 50px;
    height: 50px;
}

#form-triggerSm {
    position: fixed;
    bottom: 20px;
    right: 20px;
    cursor: pointer;
}

#form-containerSm {
    width: 350px;
    position: fixed;
    bottom: 0;
    right: 0;
    padding: 20px 20px 40px 20px;
    margin: 10px;
    border: 1px darkgray solid;
    border-radius: 3px;
    display: none;
    background-color: #f2f2f2;
    color:black;
    z-index: 99;
}

#form-containerSm input, #form-containerSm textarea {
    font-size:1.7rem;
}

#form-containerSm textarea:focus, input[type="text"]:focus, input[type="email"]:focus{
    font-size:1.7rem;
    box-shadow: 0 0 0 .2rem #d88270;
}


#contactForm input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="text"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, textarea:focus, select:focus {
    border: none;
    outline: 0;
}


#form-containerSm .closeSm {
    top: 5px;
    right: 10px;
    position: absolute;
    border:none;
    font-size: 3rem;
    padding-right:10px;
}
.buttonSubmitSm{
    right:20px;
    position: absolute;
    margin:15px 0px;
    height:35px;
    vertical-align: center;
    font-size: 1.5rem;
    background-color:#666666;
    padding:0px 5px 0px 5px;
    height: 39px;
}

#submission-status{
    display: none;
    font-size:20px;
}