@import url('https://fonts.googleapis.com/css?family=Merriweather'); @import url('https://fonts.googleapis.com/css?family=Oswald'); * { box-sizing: border-box; } html { font-size: 10px; } body { font-size: 1.6rem; background: #ffffff; line-height: 1.75; font-family: Merriweather, sans-serif; } img { max-width: 100%; } .content { width: 1460px; max-width: 90%; margin: auto; } header { position: fixed; width: 100%; top: 0; left: 0; z-index: 1; background: #ffffff; } /*-----------------------------header---------------------------------------*/ header .content { display: flex; flex-flow: row nowrap; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid #e8e8e8; } header .logo { display: flex; flex-flow: row nowrap; justify-content: flex-start; } header h1 { font-family: Oswald, sans-serif; font-size: 2.8rem; text-transform: uppercase; font-weight: bolder; color: #0085c3; padding-left: 3px; } header li { display: inline; } header li a { text-decoration: none; color: #1a1a1a; padding: 10px 14px; font-family: Oswald, sans-serif; text-transform: uppercase; } header li a:hover { color: #0085c3; } header nav li:last-child a{ color: #ffffff; background: #4ca54c; } header nav li:last-child a:hover { background: #3d843d; } /*-----------------------------slider---------------------------------------*/ section.slider { margin-top: 77px ; background: #00618d; color: #ffffff; padding: 50px 0; } section .content { display: flex; flex-flow: row nowrap; justify-content: space-between; } section h2 { font-size: 2.8rem; padding-bottom: 28px; } section .left-cont { font-family: Oswald, sans-serif; width: 50%; } section .right-cont .bottom { display: flex; flex-flow: row nowrap; justify-content: space-between; } section.slider a { width: 47%; padding: 16px 32px; margin-bottom: 28px; text-decoration: none; text-align: center; text-transform: uppercase; } section .right-cont .bottom .bottom1 { background: #4ca54c; color: #ffffff; } section .right-cont .bottom .bottom2 { background: #f1f1f1; color: #1a1a1a; } section .right-cont .bottom .bottom1:hover { background: #3d843d; color: #ffffff; } section .right-cont .bottom .bottom2:hover { background: #3d843d; color: #ffffff; } /*-----------------------------main---------------------------------------*/ main.content { display: flex; flex-flow: row nowrap; justify-content: space-between; padding: 20px 0; } main .main-left { width: 64%; display: flex; flex-flow: row wrap; justify-content: space-between; } main article { width: 50%; padding: 20px; } main article h2 { padding-bottom: 16px; font-size: 2.8rem; font-family: Oswald, sans-serif; } main .main-right { width: 36%; background: #eee; margin: 20px; padding: 40px; } main .main-right h2 { font-weight: 700; font-size: 2.4rem; font-family: Oswald, sans-serif; } main .main-right p { border-bottom: 1px solid #f9f9f9; padding-bottom: 10px; margin: 16px 0; font-weight: 400; font-size: 1.6rem; } main .main-right p i { padding-right: 16px; } /*-----------------------------footer---------------------------------------*/ footer section.content{ display: flex; flex-flow: column wrap; justify-content: center; align-items: center; font-size: 1.3rem; padding: 18px 0; border-top: 1px solid #eee; color: #686868; } footer .foot-menu, .social-menu { margin-bottom: 18px; } footer li { display: inline; } footer li a { color: #686868; text-decoration: none; padding: 10px 12px; } footer li a:hover { color: #0085c3; } footer .social-menu { display: flex; flex-flow: row nowrap; justify-content: center; } footer .social-menu a { border: 1px solid #d1d1d1; border-radius: 50%; color: #1a1a1a; height: 35px; width: 35px; font-size: 1.6rem; margin-right: 10px; text-align: center; line-height: 2; } footer .social-menu a:hover { color: #0085c3; }