@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,500,700'); article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } audio, canvas, video { display: inline-block; } audio:not([controls]) { display: none; height: 0; } [hidden] { display: none; } html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; } a:focus { outline: thin dotted; } a:active, a:hover { outline: 0; } h1 { font-size: 2em; margin: 0.67em 0; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } dfn { font-style: italic; } hr { -webkit-box-sizing: content-box; box-sizing: content-box; height: 0; } mark { background: #ff0; color: #000; } code, kbd, pre, samp { font-family: monospace, serif; font-size: 1em; } pre { white-space: pre-wrap; } q { quotes: "\201C" "\201D" "\2018" "\2019"; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } img { border: 0; width: auto; } svg:not(:root) { overflow: hidden; } figure { margin: 0; } fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } legend { border: 0; padding: 0; } button, input, select, textarea { font-family: inherit; font-size: 100%; margin: 0; } button, input { line-height: normal; } button, select { text-transform: none; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; } button[disabled], html input[disabled] { cursor: default; } input[type="checkbox"], input[type="radio"] { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; } input[type="search"] { -webkit-appearance: textfield; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } textarea { overflow: auto; vertical-align: top; } table { border-collapse: collapse; border-spacing: 0; } :focus { outline: 0; /* or */ outline: none; } * { margin: 0; padding: 0; } ul { list-style: none; } body { font-family: 'Raleway', sans-serif; position: relative; // background: url(../images/bg.jpg) no-repeat bottom center; } .hero { background: url(../images/hero.jpg) no-repeat top center; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center; align-content: center; width: 100%; padding: 100px 0; h2 { font-weight: 300; font-size: 28px; color: #FFFFFF; text-align: center; line-height: 62px; text-transform: uppercase; } h3 { font-weight: 700; font-size: 28px; color: #FFFFFF; text-align: center; line-height: 32px; } svg { display: block; margin: 0 auto; } }//hero .wrapper { min-height: 860px; padding: 0 20px; margin: 0 auto; position: relative; width: auto; p { font-weight: 500; font-size: 18px; color: #000000; text-align: center; line-height: 34px; padding: 40px 0; max-width: 785px; margin: 0 auto; }//p ul { display: flex; flex-direction: column; flex-flow: row wrap; li { width: 23%; margin: 1%; a { text-decoration: none; display: block; padding: 30px 20px; border-radius: 24px; min-height: 185px; background: url(../images/libg.jpg) no-repeat center; -webkit-transition: all 0.7s; transition: all 0.7s; svg { margin:20px auto; display: block; }//svg h3 { font-weight: 700; font-size: 20px; color: #FFFFFF; text-align: center; line-height: 28px; }//h3 &:hover { transform: scale(1.05); -webkit-transition: all 0.7s; transition: all 0.7s; -webkit-box-shadow: 0px 3px 17px 0px rgba(40,118,191,0.2); -moz-box-shadow: 0px 3px 17px 0px rgba(40,118,191,0.2); box-shadow: 0px 3px 17px 0px rgba(40,118,191,0.2); } }//hover }//li }//ul }//wrapper footer { display: flex; background: #191919; padding: 40px; .col-md-3 { flex: 1; } h5 { font-weight: 700; font-size: 18px; color: #FFFFFF; text-align: left; line-height: 28px; position: relative; margin-bottom: 30px; &:before { content: ''; width: 44px; position: absolute; bottom: -10px; left: 0; height: 3px; background: #34D4B7; } } a { font-size: 14px; color: #A3A3A3; text-align: left; line-height: 28px; text-decoration: none; &:hover { text-decoration: none; color: #fff; } } } .footer-info { border-top: 1px solid #343434; background: #191919; p { font-size: 14px; color: #B0B0B0; text-align: left; line-height: 62px; padding: 0 20px; a { color: #B0B0B0; text-decoration: none; } } } @media screen and (max-width: 1024px) { .wrapper ul li { width: 31%; margin: 1%; } }//1024px @media screen and (max-width: 760px) { }//760px .logo { width: 100%; max-width: 382px; margin: 0 20px; img { width: 100%; max-width: 100%; } } @media screen and (max-width: 640px) { .hero { padding: 50px 0; } .logo { width: 100%; max-width: 207px; display: block; margin: 24px; } .wrapper ul li { width: 98%; margin: 3% 1%; } .wrapper { padding: 20px; } footer { flex-direction: column; } footer ul { margin-bottom: 20px; } .footer-info p { text-align: center; } }//760px