@keyframes animatetop {
 from {top: 0px; opacity: 0}
 to {top: 0; opacity: 1}
}
    
    
body {
 font-family: Assistant, sans serif;
 font-size: 17px;
 margin: 0 0;
}

.sentencePad {
 padding-left: 4px;
}
.linksMain {
 color: white; font-weight: 400;
}

.button1 {
 background-color: rgba(0,0,0,0);
 border: 2px solid #6b04dd;
 border-radius: 30px;
 color: #6b04dd;
 padding: 8px 24px;
 text-align: center;
 text-decoration: none;
 display: inline-block;
 font-family: Assistant, sans-serif; font-size: 17px; font-weight:400;
}
.button1:hover {
 background-color:#6b04dd; color:white;
 cursor: pointer;
}

.button2 {
 background-color: rgba(0,0,0,0);
 border: 2px solid #6b04dd;
 border-radius: 30px;
 color: black;
 padding: 6px 18px; margin-top:25px;
 text-align: center;
 text-decoration: none;
 display: inline-block;
 font-family: Assistant, sans-serif; font-size: 17px; font-weight:400;
}
.button2:hover {
 background-color:#6b04dd; color:white;
 cursor: pointer;
}

.buttonMain {
 background-color: rgba(0,0,0,0);
 border: 2px solid #6b04dd;
 border-radius: 30px;
 color: white;
 padding: 12px 34px;
 text-align: center;
 text-decoration: none;
 display: inline-block;
 font-family: Assistant, sans-serif; font-size: 19px; font-weight:300;
}
.buttonMain:hover {
 background-color: #6b04dd; 
 cursor: pointer;
}




#section1Wrap {
 position:relative;
}
#section1Wrap_inner1 {
  height:860px; width:100%;
  background-color:#6b04dd; color:white;
}
#section1Wrap_inner2 {
  padding-top:110px; margin:auto;
  width:90%; max-width:900px;
}

#cardsFramework {
 position:absolute; bottom:-570; left:8%;
 height:700px; width:84%;
 border: 1px solid #E6ECF8;
 border-radius: 25px;
 background-color:white;
}
.cardsColWrapperOuter {
 height:100%; width:33%; float:left; border-left: 1px solid #E6ECF8;
}
.cardsColWrapper {
 padding: 50px 40px;
 text-align:center;
}
.cardsColHeader1 {
 font-size:25px; font-weight:600;
 padding-top:29px;
}
.cardsColHeader2 {
 font-size:17px; font-weight:300; color:rgba(0,0,0,0.96);
 padding-top:40px;
}
.cardsColBody1 {
 font-size:17px; font-weight:200; line-height: 1.8rem;
 padding-top:20px;
}
.cardsColBody2 {
 font-size:17px; font-weight:200; line-height: 1.8rem;
 padding-top:15px;
}



#section2Wrap {
 width:100%; /* height:800px; */
 height:1200px; padding-top:80px;
 background-color:white; color:black; text-align:center; margin-bottom:7%;
}

#recentWorkFrame {
 height:550px; width:84%; text-align:center;  
 margin:auto; margin-top:20px; display:inline-block;
 border: 0px solid black;
}
.recentWorkCardDiv {
 width:32%; max-width:400px; /*500px; */
 position:relative; margin-top:20px; display:inline-block;
 border: 0px solid black;
 border-radius: 15px;
}
.recentWorkCard {
 border-radius: 15px; max-height:100%;
}
.recentWorkCardOverlay {
 height:70%; width:100%; padding:10% 0; position:absolute; top:0;
 background-color: white;
}
.recentWorkCardOverlayInner {
 text-align:center; padding: 0px 25px; padding-top:13px; color: black;
}
#recentWorkCardDiv2, #recentWorkCardDiv3, #recentWorkCardDiv5, #recentWorkCardDiv6 {
 margin-left:13px;
}
#recentWorkCardDiv1:hover #recentWorkCardOverlay1 {
 background-color: rgba(255,255,255,.96); visibility: visible !important; z-index:2;
 animation-name: animatetop;
 animation-duration: 0.5s;
}
#recentWorkCardDiv2:hover #recentWorkCardOverlay2 {
 background-color: rgba(255,255,255,.96); visibility: visible !important; 
 animation-name: animatetop;
 animation-duration: 0.5s;
}
#recentWorkCardDiv3:hover #recentWorkCardOverlay3 {
 background-color: rgba(255,255,255,.96); visibility: visible !important; 
 animation-name: animatetop;
 animation-duration: 0.5s;
}
#recentWorkCardDiv4:hover #recentWorkCardOverlay4 {
 background-color: rgba(255,255,255,.96); visibility: visible !important; 
 animation-name: animatetop;
 animation-duration: 0.5s;
}/*
#recentWorkCardDiv5:hover #recentWorkCardOverlay5 {
 background-color: rgba(255,255,255,.96); visibility: visible !important; 
 animation-name: animatetop;
 animation-duration: 0.5s;
}
#recentWorkCardDiv6:hover #recentWorkCardOverlay6 {
 background-color: rgba(255,255,255,.96); visibility: visible !important; 
 animation-name: animatetop;
 animation-duration: 0.5s;
}*/


#section3Wrap {
  height:250px; width:100%; position:relative; text-align:center;
  background-color:#6b04dd; color:white;
}


#footerContactBar {
 height:180px; width:83%; position:absolute; top:-70; left:8%;
 border: 1px solid #5e03c1; border-radius: 15px;
 background-color:#2A3347;
}

/*
purple: #6b04dd
*/