header {
  position: relative;
  background-color: white;
  min-height: 100vh;
  width: 100vw;
  overflow: hidden;
}

header video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

header .container {
	position: relative;
	z-index: 2999;
	padding-top: 11rem;
	padding-right: 1rem;
	padding-left: 1rem;
	padding-bottom: 7rem;
}

header .overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-image:  
            linear-gradient(217deg, rgba(237, 62, 146,.5), rgba(255,0,0,0) 70.71%),
            linear-gradient(127deg, rgba(239, 59, 57,.5), rgba(237, 62, 146,0) 70.71%),
            linear-gradient(336deg, rgba(31,146,177,1), rgba(0,0,255,0) 70.71%), url(../img/AdobeStock_320894715.png); 
  box-shadow: inset 0px 0px 100px 40px rgba(255,255,255,0);
    opacity: 1;
    z-index: 1;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 0% -11%;
}
header .overlay2 {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-image:  
            linear-gradient(217deg, rgba(237, 62, 146,.5), rgba(255,0,0,0) 70.71%),
            linear-gradient(127deg, rgba(239, 59, 57,.5), rgba(237, 62, 146,0) 70.71%),
            linear-gradient(336deg, rgba(31,146,177,1), rgba(0,0,255,0) 70.71%), url(../img/Portfolio/Broadmoor-soap-Bottles.png); 
  box-shadow: inset 0px 0px 100px 40px rgba(255,255,255,0);
    opacity: 1;
    z-index: 1;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 0% -11%;
}
@media (pointer: coarse) and (hover: none) {
  header {
    background: url(../vids/AdobeStock_351777816.mov) white no-repeat center center scroll;
  }
  header video {
    display: visible;
  }
}

/***** Content *****/

.content {
	width: 100%;
	transition: all 0.3s;
	font-weight: 400;
}

.open-menu {
    position: fixed; 
    top: 20px; 
    left: 10px; 
    z-index: 3000;
    
}

.open-menu.btn-customized,
.open-menu.btn-customized:hover, 
.open-menu.btn-customized:active, 
.open-menu.btn-customized:focus, 
.open-menu.btn-customized:active:focus, 
.open-menu.btn-customized.active:focus,
.open-menu.btn-customized.btn.btn-primary:not(:disabled):not(.disabled):active,
.open-menu.btn-customized.btn.btn-primary:not(:disabled):not(.disabled):active:focus {
}


/***** Buttons *****/

-a.btn-customized {
	margin-left: 5px; 
    margin-right: 5px;
    padding: .75rem 1.5rem; 
	background: #76CFE7; 
    border: 0; 
    border-radius: 4px; 
	font-size: 16px; 
    font-weight: 300; 
    color: #fff;
    box-shadow: none;
}

a.btn-customized:hover, 
a.btn-customized:active, 
a.btn-customized:focus, 
a.btn-customized:active:focus, 
a.btn-customized.active:focus,
a.btn-customized.btn.btn-primary:not(:disabled):not(.disabled):active,
a.btn-customized.btn.btn-primary:not(:disabled):not(.disabled):active:focus {
	outline: 0;
    background: #76CFE7;
    border: 0; 
    color: #fff; 
    box-shadow: none;
}

a.btn-customized-2 {
	margin-left: 5px; 
    margin-right: 5px; 
    padding: .75rem 1.5rem; 
	background: #fff; 
    border: 0; 
    border-radius: 4px; 
	font-size: 16px; 
    font-weight: 300; 
    color: #555;
    box-shadow: none;
}

a.btn-customized-2:hover, 
a.btn-customized-2:active, 
a.btn-customized-2:focus, 
a.btn-customized-2:active:focus, 
a.btn-customized-2.active:focus,
a.btn-customized-2.btn.btn-primary:not(:disabled):not(.disabled):active,
a.btn-customized-2.btn.btn-primary:not(:disabled):not(.disabled):active:focus {
	outline: 0; 
    background: #ccc; 
    background: rgba(255, 255, 255, 0.5); border: 0;
    color: #555; 
    box-shadow: none;
}

a.btn-customized-3 {
	display: inline-block; 
    width: 100%; 
    margin: 0; 
    padding: .75rem 1.5rem; 
	background: #336668; 
    border: 0; 
    border-radius: 4px; 
	font-size: 16px; 
    font-weight: 300; 
    color: #fff; 
    box-shadow: none;
}

a.btn-customized-3:hover, 
a.btn-customized-3:active, 
a.btn-customized-3:focus, 
a.btn-customized-3:active:focus, 
a.btn-customized-3.active:focus,
a.btn-customized-3.btn.btn-primary:not(:disabled):not(.disabled):active,
a.btn-customized-3.btn.btn-primary:not(:disabled):not(.disabled):active:focus {
	outline: 0; 
    background: #6DC068; 
    border: 0; 
    color: #fff; 
    box-shadow: none;
}

a.btn-customized i, 
a.btn-customized-2 i,
a.btn-customized-3 i { 
    margin-right: 5px; 
}


a.btn-customized-4 {
	display: inline-block; 
    width: 28px; 
    height: 28px; 
    margin: 0 3px; 
    padding: 0; 
	background: #444; 
    border: 0; 
    border-radius: 50%; 
	font-size: 16px; 
    font-weight: 300; 
    color: #fff; 
    box-shadow: none; 
    text-indent: -999999px;
}

a.btn-customized-4.btn-customized-dark { background: #593137; 
}
a.btn-customized-4.btn-customized-light { background: #D7DDD9; 
}

a.btn-customized-4.btn-customized-dark:hover, 
a.btn-customized-4.btn-customized-dark:active, 
a.btn-customized-4.btn-customized-dark:focus, 
a.btn-customized-4.btn-customized-dark:active:focus, 
a.btn-customized-4.btn-customized-dark.active:focus,
a.btn-customized-4.btn-customized-dark.btn.btn-primary:not(:disabled):not(.disabled):active,
a.btn-customized-4.btn-customized-dark.btn.btn-primary:not(:disabled):not(.disabled):active:focus {
	outline: 0; 
    background: #593137;
    border: 0; 
    color: #fff; 
    box-shadow: none;
}

a.btn-customized-4.btn-customized-light:hover, 
a.btn-customized-4.btn-customized-light:active, 
a.btn-customized-4.btn-customized-light:focus, 
a.btn-customized-4.btn-customized-light:active:focus, 
a.btn-customized-4.btn-customized-light.active:focus,
a.btn-customized-4.btn-customized-light.btn.btn-primary:not(:disabled):not(.disabled):active,
a.btn-customized-4.btn-customized-light.btn.btn-primary:not(:disabled):not(.disabled):active:focus {
	outline: 0;
    background: #996698; 
    border: 0; 
    color: #fff; 
    box-shadow: none;
}


/***** END Slide Navigation Menu CSS *****/



/***** Content CSS *****/

.jumbotron {
	margin-bottom: 50px;
	
	/* [disabled]background-color: #B9B9B9;*/
	
}

.btn-primary {
    background-color: #76CFE7;
    border-color: #76CFE7;
}


/* Parallax Section */
.parallax-section{
    	border-style: solid;
        border-top: 20px solid #fff;
	    border-bottom: 20px solid #fff;
		background-image:  
            linear-gradient(217deg, rgba(237, 62, 146,1), rgba(255,0,0,0) 70.71%),
            linear-gradient(127deg, rgba(112, 192, 104,1), rgba(0,255,0,0) 70.71%),
            linear-gradient(336deg, rgba(0,0,255,1), rgba(0,0,255,0) 70.71%), url(../img/DD_Desktop.jpg);
        padding-top: 200px;
    	padding-bottom: 200px;
        box-shadow: inset 0px 0px 200px 800px rgba(0,0,0,.7);
	
}
.parallax-section2 {
    	border-style: solid;
        border-top: 20px solid #fff;
	    border-bottom: 20px solid #fff;
		background-image:  
            linear-gradient(217deg, rgba(237, 62, 146,1), rgba(255,0,0,0) 70.71%),
            linear-gradient(127deg, rgba(112, 192, 104,1), rgba(0,255,0,0) 70.71%),
            linear-gradient(336deg, rgba(0,0,255,1), rgba(0,0,255,0) 70.71%), url(../img/DD_Desktop.jpg);
        padding-top: 0px;
    	padding-bottom: 200px;
        box-shadow: inset 0px 0px 200px 800px rgba(0,0,0,.7);
	
}
.banner {
	height: 460%;
	background-attachment: fixed;
	background-size: cover;
	background-repeat: no-repeat;
}
.WCBHeroes {
	text-shadow: 3px 3px 3px rgba(51,51,51,0.30);
	font-style: normal;
	font-weight: 400;
	color: #6EC266;
    
}
.PortTitle {
	text-shadow: 3px 3px 3px rgba(51,51,51,0.30);
	font-style: normal;
	font-weight: 400;
	color: #6EC266;
    
}

.parallax {
    font-family: Gothamy, Gotham-Book, Arial, sans-serif;
    text-shadow: 3px 3px 3px rgba(51,51,51,0.30);
	font-style: normal;
	font-size: 28px;
	font-weight: 400;
	color: #76CFE7;
	text-align: left;
	padding-left: 40px;
	padding-right: 40px;
	padding-top: 40px;
	letter-spacing: 6px;
	margin-top: 0px;
}
.parallax_description {
	
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";	
	letter-spacing: 2px;
    font-size: 1.5rem;
    font-kerning: normal;
	color: #FFFFFF;
	padding-right: 40px;
	padding-left: 40px;
	width: 100%;
	font-weight: lighter;
	line-height: 30px;
	margin-bottom: 20px;
	margin-left: 0px;
	height: auto;
}

.parallax_description2 {
	
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";	
	letter-spacing: 2px;
    font-size: 1.5rem;
    font-kerning: normal;
	color: #FFFFFF;
	width: 100%;
	font-weight: lighter;
	line-height: 30px;
	margin-bottom: 20px;
	margin-left: 0px;
	height: auto;
}
.DD_Name {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"Gotham-Book, Arial, sans-serif;
	letter-spacing: 6px;
	color: #fff;
	width: 100%;
	margin-left: 0px;
	margin-bottom: 10px;
	margin-top: 16px;
	text-align: left;
}
.certs {
	border-radius: 10px;
	background: linear-gradient(217deg, rgba(237, 62, 146,.2), rgba(255,0,0,0) 70.71%),
            linear-gradient(127deg, rgba(118, 207, 231,.2), rgba(0,255,0,0) 70.71%),
            linear-gradient(336deg, rgba(239, 59, 57,.01), rgba(0,0,255,0) 70.71%);
	text-shadow: 3px 3px 3px rgba(51,51,51,0.30);
	font-style: normal;
	font-weight: 400;
	color: #F8991D;
	text-align: right;
	padding-left: 40px;
	padding-right: 40px;
	padding-top: 40px;
    padding-bottom: 30px;
	letter-spacing: 2px;
	margin-bottom: 60px;
}
.send {
    padding-right: 14px;
}
.signal-1 {
	font-family: brushland, sans-serif;
	text-shadow: 3px 3px 3px rgba(51,51,51,0.30);
	font-style: normal;
	font-size: 28px;
	font-weight: 400;
	color: #EC3F91;
	text-align: right;
	padding-left: 40px;
	padding-right: 40px;
	letter-spacing: 2px;
	margin-bottom: 40px;
}
.contact-text {
    font-family: Gothamy, Gotham-Book, Arial, sans-serif;
    text-shadow: 3px 3px 3px rgba(51,51,51,0.30);
	font-style: normal;
	font-size: 28px;
	font-weight: 400;
	color: #EC3F91;
	text-align: left;
	padding-left: 40px;
	padding-right: 40px;
	padding-top: 40px;
	letter-spacing: 2px;
	margin-top: 0px;

}
.contact {
	border-style: solid;
	border-bottom: 20px solid #fff;
	padding-top: 60px;
	padding-bottom: 40px;
	background-image: url(../img/contact-coffee.png);
	background-repeat: no-repeat;
	background-size: cover;
}
.signal-2 {
	font-family: brushland, sans-serif;
	text-shadow: 3px 3px 3px rgba(51,51,51,0.30);
	font-style: normal;
	font-size: 38px;
	font-weight: 400;
	color: #0F0E0E;
	text-align: left;
	padding-left: 40px;
	padding-right: 40px;
	padding-top: 40px;
	letter-spacing: 2px;
	margin-top: 0px;
}
footer p {
	padding-bottom:4px;
	padding-top:4px;
	font-size: 11px;
	color: #336668;
}
.contact_description {
    font-size: 18px;
    font-kerning: normal;
	color: #FFFFFF;
	text-align: justify;
	padding-right: 40px;
	padding-left: 40px;
	width: 100%;
	font-weight: lighter;
	line-height: 24px;
	margin-top: 20px;
	margin-right: 0px;
	margin-bottom: 20px;
	margin-left: 0px;
	height: auto;
}
.resume {
	text-shadow: 3px 3px 3px rgba(51,51,51,0.30);
	font-style: normal;
	font-weight: 400;
	color: #B01F18;
	padding-top: 57px;
	margin-top: 0px;
    line-height:15px;
}

.resume_description {
	font-size: 18px;
	font-kerning: normal;
	color: #0F0E0E;
	text-align: justify;
	padding-right: 40px;
	padding-left: 40px;
	width: 100%;
	font-weight: lighter;
	line-height: 28px;
	margin-right: 0px;
	margin-bottom: 20px;
	margin-left: 0px;
	height: auto;
}

.hero_img{
    padding-top: 40px;
    height: auto;
    width: auto;
}



/***** Color Palette *****/

.blackBack {
        background-color: #0F0E0E;
}
.black {
	color: #0F0E0E;
}
.aqua {
    color: #76CFE7;
}
.red {
    color: #EF3B39;
}
.green {
    color: #6DC068;
}
.orange {
    color: #F8991D;
}
.pink {
    color: #EC3F91;
}
.purple {
    color: #996698;
}
.maroon {
    color: #593137;
}
.softPeacock {
    color: #339999;
}
.deepPeacock {
    color: #336668;
}
.silverFox {
    color: #D7DDD9;
}
.blueFox {
    color: #C7D0D9;
}
.BGrey {
	background: rgba(118, 207, 231,.2);
}
/***** Vertical  SubHeads *****/

h7, .h7 {
	position: absolute;
	left: 0;
	-webkit-transform: rotate(270deg);
	-moz-transform: rotate(270deg);
	-ms-transform: rotate(270deg);
	-o-transform: rotate(270deg);
	transform: rotate(270deg);
	-webkit-transform-origin: 0 0;
	-moz-transform-origin: 0 0;
	-ms-transform-origin: 0 0;
	-o-transform-origin: 0 0;
	transform-origin: 0 0;
	font-size: 1.75rem;
	bottom: 180px;
}
.side {
	position: absolute;
	left: 50px;
	-webkit-transform: rotate(270deg);
	-moz-transform: rotate(270deg);
	-ms-transform: rotate(270deg);
	-o-transform: rotate(270deg);
	transform: rotate(270deg);
	-webkit-transform-origin: 0 0;
	-moz-transform-origin: 0 0;
	-ms-transform-origin: 0 0;
	-o-transform-origin: 0 0;
	transform-origin: 0 0;
	font-size: 1.75rem;
	bottom: 80px;
	text-shadow: 3px 3px 3px rgba(16,1,1,0.50);
}


/***** Media Queries *****/

@media (min-width:768px){
	.beHeroes {
		font-size: 8rem;
	}
	.slogan {
		color: rgba(118,207,231,0.4);
		font-size: 8rem;
	}

}

@media (min-width:992px){
	.beHeroes {
		font-size: 8rem;
	}
	.slogan {
		color: rgba(118,207,231,0.4);
		font-size: 8rem;
	}
    .send {
        padding-left: 74px;
    }
    .signal-1 {
        text-align:left;
    }
   .WCBHeroes {
        	padding-bottom: 20px;
    }
    .resume {
        	padding-bottom: 140px;
    }
     .resume_description {
        	margin-top: 20px;
    }
    .pro_pic {
    padding-top: 140px;
} 
}

@media (min-width:992px) and (max-width:1199px){
	.beHeroes {
		font-size: 8rem;
	}
	.slogan {
		color: rgba(118,207,231,0.4);
		font-size: 8rem;
	}
    h7, .h7 {
	bottom: 170px;
}
    .pro_pic {
    padding-top: 140px;
}
    .resume_description {
        	margin-top: 20px;
    }
}
@media (min-width:768px) and (max-width:991px){
	.beHeroes {
		font-size: 8rem;
	}
	.slogan {
				color: rgba(118,207,231,0.4);
		font-size: 8rem;
	}
    h7, .h7 {
	bottom: 70px;
}
    .pro_pic {
    padding-top: 40px;
}
    .WCBHeroes {
        	padding-bottom: 100px;
    }
    .resume {
        	padding-bottom: 100px;
    }
     .resume_description {
        	margin-top: 56px;
    }
}
@media (min-width:576px) and (max-width:768px){
	.beHeroes {
		font-size: 8rem;
	}
	.slogan {
		color: rgba(118,207,231,0.4);
		font-size: 8rem;
	}
    h7, .h7 {
	bottom: 80px;
}
    .pro_pic {
    padding-top: 40px;
}
    .WCBHeroes {
        	padding-bottom: 120px;
    }
    .resume {
        	padding-bottom: 120px;
    }
     .resume_description {
        	margin-top: 76px;
    }
}
@media (min-width:500px) and  (max-width:576px){
    h7, .h7 {
	bottom: 130px;
    }
    .resume_description {
                    margin-top: 60px;    
    }
    }

@media (max-width:576px){
    .pro_pic {
    padding-top: 40px;
}  
     .WCBHeroes {
        	padding-bottom: 20px;
    }
      .resume {
        	padding-bottom: 20px;
    }
     .resume_description {
        	margin-top: 40px;
    }
}

@media (max-width:767px){
    h7, .h7 {
	bottom: 130px;
    }
    .pro_pic {
    padding-top: 40px;
}  
	.DD_Name {
font-size: 12px:
}
}
@media (min-width:360px) and (max-width:640px){
	.cd-horizontal-timeline .events-content h2 {

    font-size: 14px;
  
}
	.side {
		font-size: 17px;
	}
#apple img {
  width: 80%;
  opacity: .9;
  clear: both;
  margin-top: 0px;
  position: relative;
  z-index: 1;
}
	.beHeroes {
		font-size: 4rem;
	}
	.slogan {
		color: rgba(118,207,231,0.6);
		font-size: 4rem;
	}
	.charts {
		padding-left: 18%;
	}
	
    .WCBHeroes {
        font-size: 28px;
        padding-bottom: 100px;
    }
    .resume {
        font-size: 28px;
        padding-bottom: 175px;
    }
    h7, .h7 {
	bottom: 310px;
    }
    .pro_pic {
    padding-top: 40px;
}  
	h1 {
		font-size: 10px;
		text-align: left;
	}
}

@media (max-width:360px){
		.cd-horizontal-timeline .events-content h2 {

    font-size: 14px;
  
}
	.beHeroes {
		font-size: 6rem;
	}
	.slogan {
		color: rgba(118,207,231,0.6);
		font-size: 4rem;
	}
    .WCBHeroes {
        font-size: 12px;
        padding-bottom: 170px;
    }
    .resume {
        font-size: 12px;
        padding-bottom: 170px;
    }
   
    .pro_pic {
    padding-top: 40px;
}  
    
}


/***** Grided (Graph Paper) Backgrounds *****/

.home-1 {
	background-image: url(../img/AdobeStock_320894715.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 0% -11%;
}
.image-box {

  /* Here's the trick */
  background:  url(../img/Duane-Dinverno-About.png) center center;
  background-size: cover;

  /* Here's the same styles we applied to our content-div earlier */
  color: transparent;
  min-height: 364px;
  display: flex;
  align-items: center;
  justify-content: center;
		repeat: no-repeat;

}
.mask5 {
  -webkit-mask-image: url(../img/Duane-Dinverno-About-Photo.png);
  mask-image: url(../img/Duane-Dinverno-About-Photo.png);
	position: center;
	width: 595px;
}
.ProPic {
	z-index: 2000;
	position: absolute;
    background-image: url(../img/Duane-Dinverno-About-Background.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size:  594px;
	width: 595px;
	
}
.pro_pic {
	
	background-image: url(../img/AdobeStock_358132599.png);
	background-repeat: no-repeat;
	background-size: cover;
    padding-bottom: 40px;


}

    
/*****  Timeline Styles *****/
    
.timelineHead {
        background-image:linear-gradient(to bottom, rgba(245, 246, 252, 0.52), rgba(117, 19, 93, 0.73)  ),
        url(../img/Grid-timeline.png);
        background-repeat: no-repeat;
        background-size: cover;
        border-top: 20px solid #336668;
        padding-bottom: 70px;
        padding-top: 40px;


}
.CertsHead {
    background-image:linear-gradient(to bottom, rgba(245, 246, 252, 0.82), rgba(117, 19, 93, 0.73)),
    url(../img/wavy-graphpaper.png);
	background-repeat: no-repeat;
	background-size: cover;
	border-top: 20px solid #336668;
	border-bottom: 20px solid #336668;
	padding-bottom: 0px;
    padding-top: 20px;

}
.timelineBG1 {
     background-image:linear-gradient(to bottom, rgba(117, 19, 93, 0.73), rgba(89, 49, 55, 0.99)),
        url(../img/);
     padding-top: 0px;
     padding-bottom: 0px;
}
.timelineBG2 {
     background-image:linear-gradient(to bottom, rgba(89, 49, 55, 0.99)100%, rgba(117, 19, 93, 0.73)),
        url(../img/);
     padding-top: 0px;
     padding-bottom:0px;
}
body,html 
{
	height: 100%;
	font-weight: 400;
}

canvas {
    display:block;
    position: fixed;
    z-index: 1;
}

.up {
	z-index: 2;
	text-align: left;
}
                                                            
/***** Signal Buttons Animation *****/


.icon {
  cursor: pointer;
  position: relative;
  display: inline-block;
  width: 100px;
  height: 100px;
  margin-left: 12px;
  margin-right: 12px;
  border-radius: 50px;
  overflow: hidden;
}
.icon::before, .icon::after {
  content: "";
  position: absolute;
  top: 10%;
  left: 10%;
  height: 80%;
  width: 80%;
  transition: all 0.25s ease;
  border-radius: 40px;
}
.icon i {
	position: relative;
	color: #0D090A;
	font-size: 20px;
	margin-top: 11px;
	transition: all 0.25s ease;
}

.icon-fill::before {
  transition-duration: 0.5s;
  background: radial-gradient(circle, rgba(236,63,145,0) 50%, rgba(236,63,145,1) 96%, rgba(236,63,145,1) 83%);
  box-shadow: inset 0 0 0 60px rgba(237, 62, 146,0);
}
.icon-fill:hover::before {
  box-shadow: inset 0 0 0 60px background: rgb(236,63,145);
  background: radial-gradient(circle, rgba(236,63,145,0) 30%, rgba(236,63,145,1) 96%, rgba(236,63,145,1) 83%);
}

.icon-enter::after {
  box-shadow: inset 0 0 0 1px rgba(237, 62, 146,0.5);
}
.icon-enter::before {
  border-radius: 0;
  margin-left: -100%;
  box-shadow: inset 0 0 0 60px rgba(237, 62, 146,0.5);
}
.icon-enter:hover::before {
  margin-left: 0;
}


.icon-expand::before {
  box-shadow: inset 0 0 0 60px rgba(237, 62, 146,.01);
     box-shadow-background: linear-gradient(217deg, rgba(237, 62, 146,2), rgba(255,0,0,0) 70.71%),
            linear-gradient(127deg, rgba(112, 192, 104,2), rgba(0,255,0,0) 70.71%),
            linear-gradient(336deg, rgba(0,0,255,2), rgba(0,0,255,0) 70.71%);
}
.icon-expand:hover::before {
  box-shadow: inset 0 0 0 5px rgba(239, 59, 57,.3);
      background: radial-gradient(circle, rgba(236 ,63,145,0) 50%, rgba(239, 59, 57,1) 96%, rgba(236,63,145,1) 83%);
   
}
.icon-expand:hover::after {
     box-shadow: inset 0 0 0 .5px rgba(237, 62, 146,.8);
      background: radial-gradient(circle, rgba(236,63,145,0.1) 50%, rgba(236,63,145,.5) 96%, rgba(236,63,145,.3) 83%);
}            
.icon-expand::after {
    
  box-shadow: inset 0 0 0 1px rgba(51, 102, 103,.5);
      background: linear-gradient(217deg, rgba(237, 62, 146,4), rgba(255,0,0,0) 70.71%),
            linear-gradient(127deg, rgba(112, 192, 104,5), rgba(0,255,0,0) 70.71%),
            linear-gradient(336deg, rgba(0,0,255,.4), rgba(0,0,255,0) 70.71%);
   
}
.icon-collapse::before {
  border-radius: 0;
}
.icon-collapse:hover::before {
  box-shadow: inset 0 30px 0 0 #8CC63F, inset 0 -30px 0 0 #8CC63F;
}
.icon-collapse::after {
  box-shadow: inset 0 0 0 1px #8CC63F;
}

.icon-rotate {
  box-shadow: inset 0 0 0 1px #7E3661;
}
.icon-rotate::after, .icon-rotate::before {
  border: 0px solid transparent;
}
.icon-rotate:hover::before {
  transition: border-top-width 0.3s ease, border-top-color 0.3s ease;
  border-width: 60px;
  border-top-color: #7E3661;
}
.icon-rotate:hover::after {
  transition: border-left-width 0.3s ease, border-left-color 0.3s ease;
  border-width: 60px;
  border-left-color: #7E3661;
}
.icon-rotate:hover {
  transition: background 0.001s ease 0.3s;
  background: #7E3661;
}
.icon-rotate i {
  z-index: 1;
}


/***** Signal Buttons Animation *****/


.PortfolioHeader   {
}
.portfolio {
	background-image:  
		  linear-gradient(217deg, rgba(239, 59, 57,1), rgba(239, 59, 57,0) 70.71%),
            linear-gradient(127deg, rgba(118, 207, 231,1), rgba(118, 207, 231,0) 70.71%),
            linear-gradient(336deg, rgba(118, 207, 231,1), rgba(118, 207, 231,0) 70.71%),
          url(../img/DD_Desktop.jpg);
	background-repeat: no-repeat;
	background-size: 100%;
		padding-top: 340px;
		padding-left: 0px;
	    padding-right: 0px;
		padding-bottom: 100px;

}

/***** Portfolio Animation Styles *****/

* {
  margin: 0;
  box-sizing: border-box;
}

:root {
  font-size: 13px;
  font-family: "Source Sans Pro", sans-serif;
  line-height: 1.618;
  font-weight: 400;
}

body {
  background-color: #2f3238;
  color: #f5f5f5;
}
a {
  color: rgba(118, 207, 231,.5);
}

a:hover {
  opacity: 0.8;
}

p {
  font-size: 1.2rem;
  color: rgba(245, 245, 245, 0.5);
}

.small {
  font-size: 1rem;
  margin-top: 1em;
}
.container {
  max-width: 1200px;
  margin: 0 auto;
}
svg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
circle {
  transform-origin: 50% 50%;
  transform: scale(0);
  transition: transform 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

text {
  font-size: 1.1rem;
  text-transform: uppercase;
  text-anchor: middle;
  letter-spacing: 2px;
  font-weight: 600;
}
.svg-text {
  fill: #EC3F91;
}

.svg-masked-text {
  fill: #EC3F91;
}
image {
  transform: scale(1.1);
  transform-origin: 50% 50%;
  transition: transform 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.items {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

.item {
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  width: 300px;
  height: 200px;
  margin: 5px;
  cursor: pointer;
  background:  linear-gradient(217deg, rgba(237, 62, 146,.1), rgba(255,0,0,0) 70.71%),
            linear-gradient(127deg, rgba(112, 192, 104,.1), rgba(0,255,0,0) 70.71%),
            linear-gradient(336deg, rgba(0,0,255,.1), rgba(0,0,255,0) 70.71%);
  border-radius: 10px;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.02), inset 0 0px 0px 1px rgba(0, 0, 0, 0.07);
  transform: translateZ(0);
}

.item:hover circle,
.item:hover image {
	transform: scale(1);
	font-weight: 400;
}



button {
  width: 12px;
  height: 12px;
  border: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
  border-radius: 1px;
}
button.light {
  background-color: background:  linear-gradient(217deg, rgba(237, 62, 146,.1), rgba(255,0,0,0) 70.71%),
            linear-gradient(127deg, rgba(112, 192, 104,.1), rgba(0,255,0,0) 70.71%),
            linear-gradient(336deg, rgba(0,0,255,.1), rgba(0,0,255,0) 70.71%);
}
button.dark {
  background-color: rgba(118, 207, 231,.2);
}

.options {
  position: relative;
  float: right;
  top: 1rem;
  right: 2rem;
}
.options button {
  margin-left: 0.5rem;
}

.dark {
  background-color: #2f3238;
}
.dark .item {
  background: rgba(118, 207, 231,.2);
}
.dark .svg-text {
  fill: #EC3F91;
}