/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */
body { font-family: 'Avenir', 'azo-sans-web', sans-serif; line-height:2em;}
p.lead, .quote p {line-height: 2.25em;}
.bg-gray {background:#f0f0f0; }
h2, h3 { color: #cacfd1; font-weight:100; }

h5, .main-nav .nav-item, .navbar-brand h5 { text-transform:uppercase; font-size:1rem; }

h6 { font-size:1.5rem; font-weight: normal}

.navbar-brand h5 { letter-spacing: 3px; }
.navbar-toggler { color:#fff;
    font-size:2rem; }

.angle:after {
  background: inherit;
  bottom: 0;
  content: '';
  display: block;
  height: 50%;
  left: 0;
  position: absolute;
  right: 0;
  transform: skewY(-1.8deg);
  transform-origin: 100%;
  z-index: -1;
  box-shadow: 0 0.75rem 0 0 rgba(202,207,209,0.5);
}

.angle-top {
  transform: skewY(-1.8deg);
    transform-origin: top;
    z-index: -1;
    top: 30px;
    position: relative;
    height: 80px;
}


/* COLOR CHANGES */

.bg-primary {background:#70c6a3 !important} 
a { color: #70c6a3;}
body, a:hover { color: #808284; }
a:active {color:#808284;}

.text-muted { color: #cacfd1 !important; }

.btn { border-color: #70c6a3; }
.btn-primary {background:#70c6a3; color:#fff;}
.btn-secondary { color: #70c6a3 }
.btn-secondary:hover { background:#70c6a3; color:#fff; }
.btn-primary:hover { background: #808284; border-color: #808284;  border-width:2px; 
  box-shadow: 10px 0.75rem 0 0 rgba(202,207,209,0.5);}
/*
.btn-primary:hover { background:#fff; color:#70c6a3;  border-color: #70c6a3;  border-width:2px;
  box-shadow: 10px 0.75rem 0 0 rgba(202,207,209,0.5);
}
*/

.form-control { border-radius:0; padding:1rem;  }
.form-control:focus { border-color: #70c6a3; border-bottom:#70c6a3 4px solid;}
.form-control::-webkit-input-placeholder {
   color: #70c6a3;
}

.form-control:-moz-placeholder { /* Firefox 18- */
   color: #70c6a3;
}

.form-control::-moz-placeholder {  /* Firefox 19+ */
   color: #70c6a3;
}

.form-control:-ms-input-placeholder {
   color: #70c6a3;
}
.navbar-brand h2 { color: #fff; font-weight:100; }


svg, svg *, object {
  pointer-events: all;
}
.portfolio-nav .nav-link.active {color: #cacfd1}
.portfolio-nav .nav-link.active:hover {color: #808284}
.portfolio-icon {width:60px; height:auto; vertical-align: middle;}

.cls-1,.cls-2,.cls-3{fill:none;stroke:#70c6a3; stroke-width:3px;stroke-linecap:round; 
    pointer-events:all;}
.cls-1{stroke-linejoin:round}
.cls-3{stroke-miterlimit:10}


.portfolio-nav a.nav-link:hover .cls-1, .portfolio-nav a.nav-link.active:hover .cls-1,
.portfolio-nav a.nav-link:hover .cls-2, .portfolio-nav a.nav-link.active:hover .cls-2,
.portfolio-nav a.nav-link:hover .cls-3, .portfolio-nav a.nav-link.active:hover .cls-3 {stroke:#808284;}

.portfolio-nav a.nav-link.active .cls-1,
.portfolio-nav a.nav-link.active .cls-2,
.portfolio-nav a.nav-link.active .cls-3 {stroke:#cacfd1;}




.portfolio-filter-nav .icon {width:2.5rem; height:2.5rem; margin-bottom:0;}
.portfolio-filter-nav a {line-height: 2.5rem; padding-bottom:8px; padding-top:5px; font-size:1.25rem; color:#808284;}
.portfolio-filter-nav a:hover, .portfolio-filter-nav a:active {color:#70c6a3;}
a:hover + h5 { color:#70c6a3 ; }



.icon { width:6rem; height:6rem;  margin-top:-22px; margin-left:-22px;}
ul.bullet-list { list-style-type: circle }

.row { padding-top: 1rem }
/* fix anchor jump with margin top and padding top*/
section { position:relative; padding-top:4rem; clear:both; }


.quote:before {
	content: '\201C';
    font-family: 'Helvetica';
    color: #cacfd1;
    font-size: 12rem;
    line-height: 9.5rem;
    display: inline;
    width: 5rem;
    float: left;
    height: 2rem; 
	margin-top:-1rem;
}

.sticky {
    background: #fff;
    position: sticky;
	top:6rem;
	z-index:1000;
	}

#nav-CV { line-height:4rem; }
#CV h3 { padding-top:21rem; margin-top:-21rem; position:relative; z-index:-2;}


.portfolio-item { position:relative }

.portfolio-modal .modal-dialog {
  height: 100%;
  max-width:90%;
  width: auto;
}
.portfolio-modal .modal-content {
  border-radius: 0;
  background-clip: border-box;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: none;
  min-height: 100%;
  padding: 100px 0;
}
.portfolio-modal .close-modal {
  position: absolute;
  width: 75px;
  height: 75px;
  background-color: transparent;
  top: 25px;
  right: 25px;
  cursor: pointer;
}
.portfolio-modal .close-modal:hover {
  opacity: 0.3;
}
.portfolio-modal .close-modal .lr {
  height: 75px;
  width: 1px;
  margin-left: 35px;
  background-color: #70c6a3;
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  /* IE 9 */
  -webkit-transform: rotate(45deg);
  /* Safari and Chrome */
  z-index: 1051;
}
.portfolio-modal .close-modal .lr .rl {
  height: 75px;
  width: 1px;
  background-color: #70c6a3;
  transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  /* IE 9 */
  -webkit-transform: rotate(90deg);
  /* Safari and Chrome */
  z-index: 1052;
}
.portfolio-modal .modal-backdrop {
  opacity: 0;
  display: none;
}

.text-xs-center .img-fluid { margin:auto; }
/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
  .navbar-brand h2 { font-size:4rem; font-weight:200; font-family:'azo-sans-web', sans-serif;}
  .navbar-brand h5 { letter-spacing:0.3rem; }

  .row { padding-top: 4rem }
  .portfolio-description { margin-top:1rem;}

}


@media (min-width: 760px) {
		footer { padding:2rem;}

h4 { font-size: 1.8rem; }
	section { padding-top:8rem;}
	 .main-nav .nav-item { line-height:80px; }
	  .quote { border:0; margin-left:6rem; }
 .quote:before { font-size:12rem; margin-left:-6rem; line-height: 6rem; 
	margin-top:2rem;} 

  .btn + .btn { margin-left:5px;}
	.portfolio-details {
    transition: all ease 0.5s;
    -webkit-transition: all ease 0.5s;
    -moz-transition: all ease 0.5s;
	opacity:0;
}
.portfolio-item:hover .portfolio-details {
	opacity:1
}
.portfolio-item:hover a > img {
	opacity:0.5;
	transition: all ease 0.5s;
  -webkit-transition: all ease 0.5s;
  -moz-transition: all ease 0.5s;
}
	.sticky {
    top: 12rem;}
}


@media (max-width: 62em) {
	.navbar-toggleable-md { clear:both; }
}
@media (max-width: 40em) {
	.navbar > .container { margin-right:-30px; margin-left:-15px;}
	.portfolio-modal .modal-dialog { max-width:100%; margin:0 }
	.icon { margin-left:-30px;}
	.portfolio-icon {width:45px;display:block; margin: 2px auto -5px;}
	.portfolio-filter.nav-link {line-height: normal; display: block; text-align:center;}

}


.social-media { display:table; border-spacing:10px; margin-left:-15px; }
.social-media a {
    border-radius: 100%;
    background: #70c6a3;
    display: table-cell;
	color:#fff;
    width: 40px;
    height: 40px;
    text-align: center;
    vertical-align: middle;
	margin-right:2rem;
}
.social-media a:hover {
	color:#fff;
	background:#cacfd1;
}
.border-shadow {
    box-shadow: 0 0.75rem 0.75rem 0 rgba(202,207,209,0.5);
    margin-bottom: 1rem;
	border:1px solid rgba(202,207,209,0.5);
  }


.poster{
    max-height: 600px;
  }

.portfolio-filter-sticky {
position:sticky;
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 75%, rgba(255,255,255,0) 92%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 75%,rgba(255,255,255,0) 92%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 75%,rgba(255,255,255,0) 92%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
}

.carousel-indicators {
    bottom: 0;
    filter: drop-shadow(0px 0px 2px black);
}