/* 425px*/
@media only screen and (min-width: 27em)  {
.container{max-width: 425px;}
.projectDis{top:-200px;left: 20px;}
.bio{min-width: 400px;padding-left: calc(var(--cel,3.5vw) * 1);}
.bioBig{line-height: 1.4em;font-size: 28px;}
.bioSmall{line-height: 1.7em;font-size: 16px;}
.gridRight{float: left;min-width: 440px;margin-right: calc(var(--cel,2.5vw) * 3);margin-left: calc(var(--cel,2.5vw) * .5);}
.nextPad{max-width: 400px;max-height: 400px; width: 100%;margin-left: -10px; margin-top:-80px;}
.mccThumbWrapper{min-width: 440px;padding-left: 0px;margin-left:-22px;}
.thumbdrop{width: 350px; height: 350px;}
.fab-wrapper2{left: 150px;}
.thumbdrop2{max-width: 400px;  max-height: 400px;}
.otImgWrapper{margin-left: calc(var(--cel,2.5vw) * 2);}
.drWrapper{margin-left: calc(var(--cel,2.5vw) * 2);}
.imgsr{max-width: 400px;max-height: 400px;}
.payCUJwrap{padding-left: 10%}
.cujDis{flex-basis: 100%;margin-left: 0%;order:2;}
.PayDis{order:1}
.receiverDis{padding-top: 150px;margin-left: 7%;}
.dataImg{margin-left: 0%;flex-basis: 100%;order:2}
.casDis{margin-left: 0%;flex-basis: 100%;padding-top: 150px;}
.dataDis{order:1;flex-basis: 100%;order:1margin-right: 0%;}
.recSec{padding-top: 150px;}
.drSec{padding-left: 0}
.cardCopy{  max-width: 400px;}
#oFab{ margin-top: -100px;margin-left: -520px;}
.footerName{margin: 0px 0px 0px 48px;}
.footerItem4{order:4;margin-left: -40px;}
.footerItem1{order:2;margin-left: -20px;margin-left: -70px}
.footerItem2{order:1;padding-right: 0px;}
.footerItem3{order:3;padding-right: 0px;margin-left: -106px;}
.footerSec{flex-flow: column wrap;flex: 4 auto;align-items: center;justify-content: center;margin-left: 218px;}
.ripple-effect5{margin-top: 200px;margin-right: -680px;margin-left: -256px;}
.ripple-effect2{margin-right: -190px;margin-left: -550px;}
.ripple-effect3{margin-right: -480px;margin-left: -470px;}
.ripple-effect4{margin-top: 68px;margin-right: -470px;margin-left: -470px;
}
.ripple-effect{margin-top: 40px;margin-left: -100px;margin-right: -840px;}
nav a, nav span {font-size: 18px;}
.projectCopy{  font-size: 28px;}
.caption{font-size: 18px}

}

/* 768x*/
@media only screen and (min-width: 48em){
.container{max-width: 768px;}
.projectDis{top:-450px;left: 100px;}
.bio{min-width: 600px;padding-left: calc(var(--cel,3.5vw) * 1);padding-bottom: 60px;}
.bioBig{line-height: 1.3em;font-size: 48px;}
.bioSmall{line-height: 1.4em;font-size: 24px;}
.gridRight{float: left;min-width: 1000px;margin-right: calc(var(--cel,2.5vw) * 3);margin-left: calc(var(--cel,2.5vw) * 2);}
.nextPad{max-width: 900px;max-height: 900px; width: 100%;margin-left: -70px; margin-top:-80px;}
.mccThumbWrapper{min-width: 700px;padding-left: 0px;margin-left: -10px;}
.thumbdrop{width: 700px;height: 700px;}
.sec2{margin-top: 0px;}
.fab-wrapper2{left: 538px;}
.thumbdrop2{max-width: 780px;  max-height: 780px;}
.otImgWrapper{margin-left: 0px;}
.drWrapper{margin-left: 0;}
.imgsr{max-width: 780px;max-height: 780px;}
.PayDis{flex-basis: 100%;margin-right: 0%;order:1;}
.cujDis{flex-basis: 100%;margin-left: 0%;order:2;}
.payCUJwrap{padding-left: 10%}
.casDis{margin-left: 0;flex-basis: 75%;padding-top: 200px;}
.dataImg{margin-left: 0;flex-basis: 75%;order:2}
.dataDis{order:1;flex-basis: 78%;order:1:margin-right: 5%;}
.recSec{padding-top: 200px;}
.drSec{padding-left: 10%}
.cardCopy{max-width: 790px;}
#oFab{ margin-top: -100px;margin-left: -520px;}
.footerName{margin: 0;}
.footerItem4{order:4;margin-left: -10px;}
.footerItem1{order:2;margin-left: 0px;margin-left: -40px;}
.footerItem2{order:1;padding-right: 0px;}
.footerItem3{order:3;padding-right: 0px;margin-left: -56px;}
.footerSec{flex-flow: column wrap;flex: 4 auto;align-items: center;justify-content: center;margin-left: 460px;}
.receiverDis{padding-top: 200px;margin-left: 0;}
.ripple-effect5{margin-top: 200px;margin-right: -680px;margin-left: -256px;}
.ripple-effect2{margin-right: -296px;margin-left: -640px;}
.ripple-effect3{margin-right: -480px;margin-left: -470px;}
.ripple-effect4{margin-top: 68px;margin-right: -470px;margin-left: -470px;
}
.ripple-effect{margin-top: 40px;margin-left: -98px;margin-right: -840px;}
nav a, nav span {font-size: 18px;}
.projectCopy{font-size: 28px;}
.caption{font-size: 18px}

}



/* 1280x*/
@media only screen and (min-width: 80em) {
.container{min-width: 1024px;}
.projectDis{top:-750px;left: 100px;}
.bio{min-width: 900px;padding-left: calc(var(--cel,3.5vw) * 7);padding-right: calc(var(--cel,3.5vw) * 1);  padding-bottom: 180px;}
.bioBig{line-height: 1.3em;font-size: 48px;}
.bioSmall{line-height: 1.5em;font-size: 24px;}
.gridRight{float: right;min-width: 770px;margin-right: calc(var(--cel,2.5vw) * -3);margin-left: calc(var(--cel,2.5vw) * 1);}
.nextPad{max-width: 700px; max-height:700px;width: 100%;margin-left: -50px; margin-top:-80px;}
.mccThumbWrapper{max-width: 700px;padding-left: 32px;margin-left: 0px;}
.thumbdrop{width: 200px; height: 200px;}
.sec2{margin-top: 130px;}
.fab-wrapper2{left: -56px;}
.ripple-effect2{margin-right: -620px;margin-left: 46px;}
.ripple-effect3{margin-right: -350px;margin-left: -350px;}
.thumbdrop2{max-width: 380px;  max-height: 380px;}
.otImgWrapper{margin-left: calc(var(--cel,2.5vw) * 1.5);}
.drWrapper{margin-left: calc(var(--cel,2.5vw) * 1.5);}
.imgsr{max-width: 700px;max-height: 700px;}
.PayDis{flex-basis: 36.1111%;margin-right: 7.5556%;order:2;}
.cujDis{flex-basis: 36.1111%;margin-left: 6.5556%;order:1}
.payCUJwrap{padding-left: 0%}
.receiverDis{padding-top: 0px;margin-left: 6.5556%;}
.casDis{margin-left: 9.5556%;flex-basis: 36.1111%;padding-top: 0px;}
.dataImg{margin-left: 6.5556%;flex-basis: 36.1111%;order:1;}
.dataDis{order:2;flex-basis: 36.1111%;order:2;margin-right: 6.5556%;}
.recSec{padding-top: 0px;}
.drSec{padding-left: calc(var(--cel,3.5vw) * 1.8);}
.cardCopy{max-width: 600px;}
#oFab{margin-top: -46px;margin-left:50px;}
.footerName{margin: 0;}
.footerSec{display: flex;flex-flow: row;flex: 4 auto;align-items: center;justify-content: center;padding-top:56px;padding-bottom: 10px;margin-left: 0;}
.footerItem4{order:4;margin-left: 0px;}
.footerItem1{padding-right: 450px;order:1;margin-left: 0px;}
.footerItem2{order:2;padding-right: 280px;}
.footerItem3{order:3;padding-right: 60px;margin-left: 0px;}
.ripple-effect5{margin-top: 158px;margin-right: -664px;margin-left: -90px;}
.ripple-effect4{margin-top: 68px;margin-right:-600px;margin-left: 0px;}
.ripple-effect{margin-top: 40px;margin-left: 0px;margin-right: -460px;}
nav a, nav span {font-size: 14px;}
.projectCopy{  font-size: 14px;}
.caption{font-size: 14px}


}