body {
  padding-top: 2rem;
    /* Margin bottom by footer height */
  margin-bottom: 30px;
}

.contact{
  font-family: 'Titillium Web', sans-serif;
  font-weight: 400;
  font-size: 1.45em;
/*  letter-spacing: .01em;*/
  line-height: 1.2em;
  color:#d37200;
  -webkit-font-smoothing: antialiased;
}
.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 30px;
  line-height: 30px; /* Vertically center the text there */
  color:#c0c0c0;
  background-color:#464a4c; 
}

/* unvisited link */
.footer a:link {
    color: #c0c0c0;
    text-decoration: underline;
}

/* visited link */
.footer a:visited {
    color: #c0c0c0;
}

/* mouse over link */
.footer a:hover {
    color: #f29006;
     text-decoration: underline;
}

/* selected link */
.footer a:active {
    color: #f29006;
}





.overview-section {
  /*padding: 1.75rem 0 1rem 0;*/
  text-align: left;
}
a {transition: .25s all;}
.card {
  overflow: hidden;

}
.card img{
	width:100%; 
	height:auto;
} 
.card-inverse{
 background-color: rgba(4, 80, 122, 1);
 border-color: rgba(200, 200, 200, 1);
}

.profession-description{ 
	/*border-style: solid;*/
	padding-left: 20px;
	/*border-left: solid 4px #D15805;*/
	border-left: solid 4px #d37200;
	/*border-color: #D15805;*/
}

 .card-img-overlay{
   	background-color: rgba(51, 51, 51, 0.85);
 	border-color: rgba(200, 200, 200, 0.85);
}

.portfolioSection{
  padding: .5rem 0 1rem 0;
  text-align: left;
}

/*adjusting the following in _card.scss*/
/*
      @media (min-width: 768px){
      .card-deck .card {
          display: flex;
          flex: 1 0 0;
          flex-direction: column;
      }}*/
@media (min-width: 768px){
	  .card-deck .card:not(:last-child) {
      margin-right: 7.5px;
}}

.orange-text{
  color:#f29006;
}

.blue-text{
  color: #04507a;
}

.list-group-item {
    padding-bottom: 5px;
    display: list-item;
}
/*////////////// MODAL IMAGERY /////////////*/

  .modal-image {
    max-width: 100%;
     margin: 0 auto;
  }
.modal-dialog-90{
      max-width: 90%;
     margin: 0 auto;
     text-align: center;
}
.modal-content-90 {
    max-width: 90%;
     margin: 0 auto;
   }
.modal-header{
  text-align: right;
}   
.modal-body {
  padding:0;
}

.vertical-alignment-helper {
    display:table;
    height: 100%;
    width: 100%;
    pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */
}
.vertical-align-center {
    /* To center vertically */
    display: table-cell;
    vertical-align: middle;
    pointer-events:none;
}
.modal-content {
    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
    width:inherit;
    height:inherit;
    /* To center horizontally */
    margin: 0 auto;
    pointer-events: all;
}



/*///////// BIG VIDEO BUTTON ///////*/
/* USED IN Motion Graphics portfolio for demo reel*/
.demoreel-wrap {
  position: relative;
  max-width: 960px;
  /*max-height: 540px;*/
}

img.poster-frame {
  cursor: pointer;
    position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}


.video-wrapper {
  max-width: 960px;
    position: relative;
}
 
.video-wrapper > video {
    width: 100%;
    vertical-align: middle;
}

.video-wrapper > video.has-media-controls-hidden::-webkit-media-controls {
    display: none;
}

.video-overlay-play-button {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 10px calc(50% - 50px);
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    opacity: 0.75;
    cursor: pointer;
    /*background-image: linear-gradient(transparent, #000);*/
    transition: opacity 150ms;
}


.video-overlay-play-button:hover {
    opacity: 1;
}

.video-overlay-play-button.is-hidden {
    display: none;
}

#scrollTopBtn { 
 cursor: pointer;
 width: 50px;
 height: 50px;
 opacity:0;
 /*transition: opacity 150ms;*/
 position: fixed;
 bottom: 50px;
 right: 10px;
 z-index: 150;

}

#scrollTopBtn img{
 border-radius: 25px;
}





/*CSS button that doesn't work with button tag and animation*/
/*.btn-circle.btn-lg {
   cursor: pointer;
   width: 50px;
   height: 50px;
   padding: 0;
   font-size: 18px;
   line-height: 1.33;
   border-radius: 25px;
   opacity:0;
   /*transition: opacity 150ms;*/
  /* position: fixed;
   bottom: 50px;
   right: 10px;
   z-index: 150;
border: solid;
border-width:2px;
 border-color: #eceeef;
}*/
/*below is in custom.js*/
/*.btn-circle.btn-lg:hover {
      transition: opacity 150ms;
    opacity: 1;
}
.btn-circle.btn-lg:hover {
    opacity: 1;
}*/

/*//////// CONTACT FORM ////////////////*/

#contact_form{
  padding-left: 15px;
  padding-right: 15px;
}


textarea {
  font-size: .9em;
    resize:none;
/*   font-size: inherit;*/
}


#submit{
  float: right;
}

#message{
  /*width:470px;*/
  height: 275px;
}

#formResponse{
  color:#d6560a;
  display:inline-block;
  margin-top:10px;
  width:90%;
  height: 25px;
}

/*////////////  MOTION GRAPHIC PORTFOLIO SPECIFICS //////////////*/

/*/////////////// MODAL VIDEOS - MOTION GRAPHICS PORTFOLIO  //////////////*/
.modal-content-960 {
    max-width: 960px;
     margin: 0 auto;
   }
.modal-dialog-960{
      max-width: 960px;
     margin: 0 auto;
     text-align: center;
}
.vidThumb{
  margin-top: 1em;
  margin-bottom: .5em;
}
.video-wrapper-fw {
    position: relative;
}

/*/ MOTION-GR(APHICS)-(THUMBSIZE)*/
.motion-gr-lg{
  width:274px;
  margin-right: 20px;
}

.motion-gr-md{
  width:195px;
  margin-right: 20px;
}
.thumb-desc{
  padding-left: 15px;
  padding-right: 15px;
  line-height: 1.4em;
}
.footer{
  z-index: 150;
}