* { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; } body { display: flex; flex-direction: column; font-family: 'Montserrat', sans-serif; position: relative; overflow-x: hidden; } textarea { resize: none; } table { border-collapse: collapse; border-spacing: 0; } fieldset, img, abbr, button, input, textarea { border: none; } input, textarea, select { font-family: inherit; font-size: inherit; font-weight: inherit; color: inherit; } article, aside, details, figcaption, figure, footer, header, menu, nav, section, main { display: block; } button { cursor: pointer; padding: 0; background: none; } a { text-decoration: none; } .container { width: 1200px; margin: 0 auto; } .blue_bg { background-color: #02bfd8; } .yellow_bg { background-color: #d88f02; } .green_bg { background-color: #4c8a2d; } .red_bg { background-color: #ad3131; } .purple_bg { background-color: #6f4aa6; } /**** Header ****/ .header, .header-home { flex: 0 0 auto; } .header { padding: 15px 0; background-color: #293340; } .header > .container { display: flex; justify-content: space-between; align-items: center; } .header-nav { display: flex; align-items: center; } .header-logo { width: 70px; height: 70px; margin-right: 30px; } .header-home { padding: 30px 0; background-color: #293340; } .header-home .header-top { display: flex; justify-content: space-between; align-items: center; } .nav-links { font-weight: 500; color: #fff; } .nav-links:not(:last-child) { margin-right: 45px; } .header-icon { color: #fff; } .header-icon:not(:last-child) { margin-right: 10px; } .header-banner { padding: 90px 0; display: flex; align-items: center; } .banner-info { display: flex; border-right: 1px solid #92979e; } .banner-logo { width: 170px; height: 170px; margin-right: 30px; } .banner-title { font-size: 46px; color: #fff; text-transform: uppercase; } .banner-contact-block { display: flex; margin-top: 30px; } .banner-contact-block p { color: #fff; font-size: 18px; margin-right: 30px; } .banner-contact-block p > i { margin-right: 5px; } .banner-menu { display: flex; flex-direction: column; padding: 30px 100px; } .banner-link { display: flex; align-items: center; font-size: 18px; color: #02bfd8; font-weight: 600; } .banner-link:not(:last-child) { margin-bottom: 30px; } .banner-link > i { color: #fff; margin-right: 10px; } /**** Services ****/ .services { padding: 40px 0; } .services-title { text-align: center; font-size: 22px; font-weight: 700; color: #293340; text-transform: uppercase; } .services-title i { margin-right: 5px; } .services-list { display: flex; justify-content: space-between; align-items: center; margin-top: 45px; } .service-item { width: 200px; height: 190px; display: flex; flex-direction: column; align-items: center; padding: 30px; box-shadow: 2px 2px 10px 3px rgba(41, 51, 64, .25); } .service-img { width: 90px; height: 90px; margin-bottom: 30px; } .service-icon { font-size: 90px; color: #fff; margin-bottom: 30px; } .service-title { text-transform: uppercase; color: #fff; font-size: 14px; text-align: center; font-weight: 600; } /**** Main content ****/ .main-content { flex: 1 0 auto; padding: 40px 0; } .main-content > .container { display: flex; } /**** Sidebar ****/ .sidebar-title { color: #293340; text-transform: uppercase; } .branch-list { padding: 20px; display: flex; flex-direction: column; margin-bottom: 10px; } .branch-item { font-size: 18px; color: #293340; } .branch-item i { margin-right: 5px; } .branch-item:not(:last-child) { margin-bottom: 15px; } .info-board { display: flex; flex-direction: column; margin-top: 15px; } .info-board-link { color: #293340; } .info-board-item { width: 345px; background-color: #ebebeb; padding: 30px; border-bottom: 5px solid #c4c4c4; transition: .5s border-bottom-color; } .info-board-item:hover { border-bottom-color: #02bfd8; transition: .3s border-bottom-color; } .info-board-link:not(:last-child) { margin-bottom: 20px; } .adv-img { width: 100%; } .adv-title { margin-top: 15px; text-align: center; } /**** Posts ****/ .news { padding: 15px; } .post-item { border: 2px solid #e3e3e3; } .post-item:not(:last-child) { margin-bottom: 30px; } .post-img { width: 100%; height: 450px; object-fit: cover; } .post-content { padding: 30px; } .post-title { text-transform: uppercase; font-size: 24px; font-weight: 700; color: #293340; } .post-anons { color: #6e7c90; line-height: 1.4em; margin-top: 15px; font-size: 18px; } .post-bottom { margin-top: 30px; display: flex; justify-content: space-between; align-items: center; } .post-link { font-size: 18px; font-weight: 700; color: #02bfd8; border: 3px solid #02bfd8; padding: 10px 35px; transition: .4s background-color; } .post-link:hover { background-color: #02bfd8; color: #fff; transition: .4s background-color; } .post-pubdate { color: #6e7c90; font-style: italic; } .pagination { margin-top: 45px; margin-bottom: 65px; display: flex; justify-content: flex-end; align-items: center; } .pagination-link { padding: 10px 15px; border: 3px solid #02bfd8; font-weight: 600; color: #02bfd8; transition: .3s linear; } .pagination-link:hover { background-color: #02bfd8; color: #fff; transition: .3s linear; } .pagination-link:not(:last-child) { margin-right: 10px; } .pagination-skip { margin-right: 10px; color: #02bfd8; font-weight: 700; } .pagination-link.arrow { background-color: #02bfd8; color: #fff; } /**** Gallery ****/ .gallery { padding: 30px 0; background-color: #f0f1f1; } .gallery > .container { display: flex; justify-content: space-between; align-items: center; } .photo-album { position: relative; width: 370px; display: flex; flex-direction: column; } .album-preview { width: 100%; height: 300px; } .album-info { background-color: #293340; padding: 20px 0; } .album-name { font-size: 18px; font-weight: 700; text-align: center; color: #fff; } /**** Footer ****/ .footer { flex: 0 0 auto; padding: 40px 0; background-color: #293340; } .footer > .container { display: flex; justify-content: space-between; align-items: center; } .college-info { width: 450px; } .copyright { color: #fff; } .social-media { display: flex; margin-top: 15px; } .social-media-link { color: #fff; font-size: 20px; } .social-media-link:not(:last-child) { margin-right: 10px; } .footer-logos { display: flex; } .footer-logo { width: 90px; height: 90px; } .footer-logo:not(:last-child) { margin-right: 20px; } .contact-info { color: #fff; } .contact-info i { margin-right: 10px; } .contact-info:not(:last-child) { margin-bottom: 10px; } @keyframes rotating { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }