@import url(https://fonts.googleapis.com/css?family=Catamaran:300,400&display=swap);:root{--primaryColor:#2892d7;--mainWhite:#fff;--offWhite:#f7f7f7;--mainBlack:#222;--mainGrey:#ececec;--darkGrey:#afafaf;--mainTransition:all 0.3s linear;--mainSpacing:0.3rem;--lightShadow:2px 5px 3px 0px rgba(0,0,0,0.5);--darkShadow:4px 10px 5px 0px rgba(0,0,0,0.5);--mainBorderRadius:0.25rem;--smallWidth:85vw;--maxWidth:1170px;--pri:#fd2549;--sec:#e5e6f1}*{margin:0;padding:0}*,body{box-sizing:border-box}body{font-family:"Catamaran",sans-serif;color:#222;color:var(--mainBlack);background:#fff;background:var(--mainWhite);line-height:1.4;font-size:1rem;font-weight:300;background-color:#fd2549}h1,h2,h3,h4,h5,h6{letter-spacing:.3rem;letter-spacing:var(--mainSpacing)}h1,h2,h3,h4,h5,h6,p{margin-bottom:1.25rem}ul{list-style-type:none}a{text-decoration:none}.btn,a{color:#222;color:var(--mainBlack)}.btn{text-transform:uppercase;letter-spacing:.3rem;letter-spacing:var(--mainSpacing);border:2px solid #222;border:2px solid var(--mainBlack);padding:.45rem .8rem;display:inline-block;transition:all .3s linear;transition:var(--mainTransition);cursor:pointer;font-size:.8rem;border-radius:.25rem;border-radius:var(--mainBorderRadius);background:transparent}.btn:hover{background:#222;background:var(--mainBlack);color:#fff;color:var(--mainWhite)}body{min-height:100vh;display:flex;justify-content:center;align-items:center}.container{text-align:center;text-transform:capitalize;width:85vw;width:var(--smallWidth);max-width:35rem}.container h1{font-size:3rem}.buttons{display:flex;flex-wrap:wrap;justify-content:center}.counter{font-size:10rem}.btn{margin:.25rem}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);opacity:0;z-index:-1}.modal-overlay.isModalOpen{opacity:1;z-index:10}.modal-container{background:#fff;width:80vw;max-width:30rem;margin:-6rem auto 0;border-radius:.25rem;border-radius:var(--mainBorderRadius);text-align:center;text-transform:capitalize;padding:4rem 2rem;transition:all 0s ease-in-out;position:relative}.modal-container .btn-close{position:absolute;right:0;top:0}.modal-overlay.isModalOpen .modal-container{margin-top:6rem}.section{padding:4rem 0;text-align:center}.section-title{font-size:2rem;text-transform:capitalize;letter-spacing:.3rem;letter-spacing:var(--mainSpacing);text-align:center;margin:3.5rem 0}.products{width:85vw;width:var(--smallWidth);margin:0 auto;max-width:20rem;display:grid;grid-template-columns:1fr;grid-row-gap:4rem;row-gap:4rem}.product{text-align:center}.product img{width:100%}@media screen and (min-width:768px){.products{max-width:35rem;grid-template-columns:1fr 1fr 1fr;grid-column-gap:4rem;-webkit-column-gap:4rem;column-gap:4rem}}.cardwrapper{width:800px;height:250px;position:relative;top:30px;left:0;right:0;bottom:0;margin:auto;box-sizing:border-box;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));grid-template-rows:1fr;grid-gap:15px}.items{border-radius:5px;display:grid;grid-template-rows:2fr 1fr;grid-gap:10px;cursor:pointer;border:3px dotted #000;transition:all .6s}.icon-wrapper,.project-name{display:flex;align-items:center;justify-content:center}.icon-wrapper svg{color:#e5e6f1;transform:translateY(0);transition:all .6s}.icon-wrapper{align-self:end;font-size:100px}.project-name{align-self:start}.project-name p{font-size:24px;font-weight:700;letter-spacing:2px;color:#e5e6f1;transform:translateY(0);transition:all .5s;text-align:center}.items:hover{border:3px solid #e5e6f1}.items:hover .project-name p{transform:translateY(-10px)}.items:hover .icon-wrapper i{transform:translateY(5px)}.App{text-align:center}.App-logo{height:40vmin;pointer-events:none}@media (prefers-reduced-motion:no-preference){.App-logo{-webkit-animation:App-logo-spin 20s linear infinite;animation:App-logo-spin 20s linear infinite}}.App-header{background-color:#282c34;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:calc(10px + 2vmin);color:#fff}.App-link{color:#61dafb}@-webkit-keyframes App-logo-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes App-logo-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}
/*# sourceMappingURL=main.8d98097f.chunk.css.map */