/* ######################################## ########### davidwindham.com ############## ########################################### . . . . . . . . ...-..-| |-. .-. .-.-..-| .-.. ...-| ` ` '' '`-'-' '-`-`-' ' '`-'-`-`-` '`-'- 1 - Body 2 - Typography 3 - Header 4 - Navigation 5 - Layout 6 - Parts 7 - Footer 9 - Queries 10 - Fonts url - https://davidwindham.com git - https://github.com/windhamdavid/dw post - https://davidawindham.com/my-website /*######################################## ################# BODY ################### #########################################*/ body { position: relative; margin: 0; padding: 0; min-height: 100%; -webkit-font-smoothing: antialiased; font-kerning: auto; color: #000; background: :#363e48; transition: background-color 0.4s ease; font-family: sans-serif; } /****** viewports - waypoints ******/ .viewport { position: fixed; height: 100%; width: 100%; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; } .viewport-above { opacity: 0; } .viewport-inside { opacity: 1; } .viewport-below { opacity: 0; } .viewport-below > * { transform: translateY(100px); } .page-view { padding: 7rem 0; transition: opacity 0.4s ease; opacity: 0; position: relative; background: transparent !important; scroll-snap-align: start; min-height: 100vh; } .page-view > * { transition: all 0.4s ease; } .page-view:after { content: ''; } .no-js .page-view { opacity: 1; } .background-color { position: relative; } .background-color.white { background-color: #fff; } .background-color.black { background-color: #121212; z-index: 0; } .page-view { padding: 7rem 0; transition: opacity 0.4s ease; opacity: 0; position: relative; background: transparent !important; scroll-snap-align: start; min-height: 100vh; } .page-view > * { transition: all 0.4s ease; } .page-view:after { content: ''; } .no-js .page-view { opacity: 1; } /*######################################## ################# TYPE ################### #########################################*/ h1 { font-family: 'Playfair Display', serif; font-weight: 900; font-size: 37px; letter-spacing: .01em; } .header h1 { color: #fff; } h2 { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 27px; } h3 { font-family: 'Playfair Display', serif; font-weight: 500; font-size: 23px; } p { font-family: 'Montserrat', sans-serif; font-size: 17px; line-height: 1.2; } a { color: #376399; text-decoration:none !important; } .right { text-align:right; } .lead { font-size: 1.4rem; } .numbering { display: inline-block; margin-right: .5rem; font-size: 12px; vertical-align: super; } [bg=dark-bg] { color: #9c9ea5; } [bg=dark-bg] h1, [bg=dark-bg] h2, [bg=dark-bg] h4, [bg=dark-bg] h5, [bg=dark-bg] h6, [bg=dark-bg] a { color: #fff !important; } [bg=dark-bg] blockquote { color: #fff; } h5.modal-title { color: #333 !important; } h6.modal { color: #333 !important; } h1.who { font-weight: 800; margin: 0; } h2.who { margin: 0; color: #999 !important; font-size:20px; } h1.what { font-weight: 800; margin: 0; } h2.what { margin: 0; color: #fff !important; font-size:32px; } h1.when { font-weight: 800; margin: 0; } h2.when{ margin: 0; color: #fff !important; font-size:28px; } h4.when{ font-weight: 600; color: #333 !important; font-size:22px; } .fc-button-primary { color: #777; background-color: #fff; border-color: #777; } .fc-button-primary:disabled { color: #777; background-color: #fff; border-color: #777; } .fc-button-primary:not(:disabled):active, .fc-button-primary:not(:disabled).fc-button-active { color: #fff; background-color: #737373; border-color: #151e27; } .fc-toolbar h2 { font-size: 1.0em; margin: 0; text-align:right; } .fc-event { position: relative; display: block; font-size: 0.85em; line-height: 1.4; color: #fff !important; border-radius: 3px; border: 1px solid #999; } .fc-event, .fc-event-dot { background-color: #737373; } h1.why { font-weight: 800; margin: 0 0 40px 0; } h2.why { margin: 0; font-size:28px; } .why blockquote { } h1.how { font-weight: 800; color: #000 !important; margin: 0; } h2.how { margin: 0; color: #000 !important; font-size:28px; } h4.how { color: #000 !important; } h5.how { color: #000 !important; } .services .service .numbering, .approach .service .numbering { height: 2rem; width: 2rem; line-height: 2rem; color: #777; border-radius: 3px; text-align: center; position: absolute; left: 0; top: 0; background: #999; background: #9993; font-size: 70%; } /*######################################## ################# HEAD ################### #########################################*/ #header { position: fixed; z-index: 98; margin: 0; padding: 0; left: 0; top: 0; right: 0; pointer-events: none; } #header .header-ui { margin: 0; padding: 0; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-align-items: center; align-items: center; justify-content: space-between; } #header .header-ui .brand--nav { margin: 0 auto 0 0; padding: 1rem; flex: 0 0 100%; width: 100%; max-width: 100%; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-align-items: center; align-items: center; justify-content: space-between; pointer-events: auto; will-change: width, padding, flex; } #header .header-ui .brand--nav h1 { font-size: 27px; margin-left: 30px; } @media (min-width: 576px) { #header .header-ui .brand--nav { flex: 0 0 50%; width: 50%; max-width: 50%; } #header .header-ui .brand--nav .brand { margin-right: 20px; } } @media (min-width: 768px) { #header { -webkit-transition: opacity .35s ease-in-out 0s; transition: opacity .35s ease-in-out 0s; } #header .header-ui .brand--nav, #header .header-ui .header--complementary { padding: 2rem; -webkit-transition: width .35s ease-in-out 0s, padding .35s ease-in-out 0s, flex .35s ease-in-out 0s, background .35s ease-in-out 0s; transition: width .35s ease-in-out 0s, padding .35s ease-in-out 0s, flex .35s ease-in-out 0s, background .35s ease-in-out 0s; } #header.shrink .header-ui .brand--nav, #header.shrink .header-ui .header--complementary { padding: 1rem; flex: 0 0 auto; } #header.on_menu .brand--nav { padding-right: 0; } #header.on_menu .brand--nav .hamburger { -webkit-transform: translateX(27px); transform: translateX(27px); } } @media (min-width: 992px) { #header .header-ui .brand--nav, #header.shrink .header-ui .brand--nav, #header.shrink .header-ui .header--complementary { padding: 1rem; flex: 0 0 auto; } #header.on_menu .brand--nav { padding-right: 0; } #header.on_menu .brand--nav .hamburger { -webkit-transform: translateX(27px); transform: translateX(27px); } } .dw-header { position: fixed; } .dw-header, .works-header { background: #121212; } .dw-header h2, .works-header h2 { letter-spacing: 0.01rem; font-weight: normal; text-align: left; margin: 0; } @media (min-width: 992px) { .dw-header h2, .works-header h2 { font-size: 2.4rem; } } .dw-header { min-height: 400px; } .dw-header h2 { max-width: 900px; } .dw-header .main { position: relative; z-index: 2; } #header { position: absolute; } #header .header-ui .brand--nav, #header .header-ui .header--complementary { padding: 1rem; background: transparent !important; } #header .header-ui .button.button-to-quote, #header .header-ui a { margin-left: 40px; } #header .header-ui a, #header .header-ui .button { position: relative; color: hsla(0, 0%, 100%, 0.5); border-color: hsla(0, 0%, 100%, 0.5); font-family: 'Inter', sans-serif; } #header .header-ui .brand img { width: 200px; } .header-small { width: 100%; position: fixed; display: flex; padding: 0.5rem 1rem 1rem 1rem; z-index: 999; opacity: 0; top: -200px; left: 0; transition: opacity 0.4s ease, background-color 0.4s ease; } .header-small .header-small-menu { background-color: #2b3444; position: absolute; box-shadow: 0 27px 53px 0 rgba(1, 93, 140, 0.24); z-index: 1; opacity: 0; visibility: hidden; padding: 20px 20px 40px 20px; top: 0; right: 0; } .header-small .header-small-menu h6 { font-weight: bold; color: #fff; margin: 40px 0 0 0; } .header-small .header-small-menu a, .header-small .header-small-menu h6 { padding: 6px 29px 8px 12px; } .header-small .header-small-menu a { font-size: 26px; line-height: 44px; letter-spacing: -0.43px; display: block; color: #fff; } .header-small .header-small-menu a:hover { opacity: 0.5; } .header-small .header-small-menu a.email { font-size: 1rem; line-height: 1.2; } .header-small.menu-open .header-small-menu { display: block; opacity: 1; visibility: visible; } .header-small.showing { opacity: 1; top: 0; } .header-small a { color: currentColor; } .header-small img { margin-left: 0px; width: 22px; transition: background-color 0.4s ease; } .header-small .light { display: none; border: 1px solid #fff; } .header-small .dark { display: inline-block; border: 1px solid #000; } [bg=dark-bg] .header-small .light { display: inline-block; } [bg=dark-bg] .header-small .dark { display: none; } [bg=dark-bg] .hamburger-inner, [bg=dark-bg] .hamburger-inner:before, [bg=dark-bg] .hamburger-inner:after { background-color: #fff !important; } /*######################################## ################# NAVI ################### #########################################*/ .hamburger { font: inherit; display: inline-block; overflow: visible; margin: 0; padding: 0; cursor: pointer; transition-timing-function: linear; transition-duration: 0.15s; transition-property: opacity, filter; text-transform: none; color: inherit; border: 0; background-color: transparent; align-self: flex-end; margin-left: auto; z-index: 6; } .hamburger:focus, .hamburger:active { outline-width: 0; } .hamburger.is-active { outline-width: 0; } .hamburger-box { width: 24px; height: 15px; display: inline-block; position: relative; } .hamburger-inner { display: block; top: 50%; margin-top: -0.5px; } .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { width: 24px; height: 2px; border-radius: 2px; position: absolute; transition-property: transform; transition-duration: 0.15s; transition-timing-function: ease; background-color: #000; } .hamburger-inner::before, .hamburger-inner::after { content: ""; display: block; } .hamburger-inner::before { top: -7px; } .hamburger-inner::after { bottom: -7px; } .hamburger-inner:before { top: 5px; } .hamburger-inner:after { top: 10px; } .hamburger:hover { opacity: 0.7; } .hamburger:focus, .hamburger:active { outline-width: 0; } .hamburger.is-active { outline-width: 0; } .hamburger.is-active:hover { opacity: 0.7; } .hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::before, .hamburger.is-active .hamburger-inner::after { background-color: #000; } .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { background-color: #000; } .hamburger.is-active .hamburger-inner { transform: translate3d(0, 10px, 0) rotate(45deg); background-color: #fff; } .hamburger.is-active .hamburger-inner:before { transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0); opacity: 0; } .hamburger.is-active .hamburger-inner:after { transform: translate3d(0, -10px, 0) rotate(-90deg); background-color: #fff; } .hamburger-box { position: relative; display: inline-block; width: 20px; height: 20px; } .hamburger-inner { top: 50%; display: block; margin-top: -2px; } /*######################################## ################# LAYO ################### #########################################*/ .lead { font-weight: 400; line-height: 1.6; } .hero, .page-header, .portfolio-header { background: #191A1B; position: relative; } .hero .container, .page-header .container, .portfolio-header .container { position: relative; } .hero h1, .page-header h1, .portfolio-header h1 { font-family: 'Inter', 'Source Sans Pro', sans-serif; line-height: 1.2; max-width: 900px; font-weight: 800; } .hero { height: 100vh; min-height: 620px; } .capabilities { padding: 6rem 0; } .capabilities .capabilities-types { padding-top: 3rem; } .capabilities ul { list-style: none; margin: 0 0 3rem 0 !important; } .capabilities li { margin: 0 !important; } .capabilities h5, .capabilities h6 { margin-bottom: 0.5rem; } .services, .approach { padding-bottom: 10rem; } .services .row, .approach .row { display: flex; } .services .numbering, .approach .numbering { color: #9c9ea5; } .services .service, .approach .service { padding-left: 4rem; padding-bottom: 1rem; border-radius: 4px; position: relative; transition: all 0.2s ease; cursor: pointer; } .services .service:hover, .approach .service:hover { transform: scale(1.1) translateX(1.6rem); } .services .service:hover .numbering, .approach .service:hover .numbering { background: #eee; color: #000; } .services .service p, .approach .service p { color: #8a8a8a; } .services .service .numbering, .approach .service .numbering { height: 2rem; width: 2rem; line-height: 2rem; border-radius: 3px; text-align: center; position: absolute; left: 0; top: 0; background: #eee; background: rgba(255, 255, 255, 0.2); font-size: 70%; } .services .service p, .approach .service p { margin-top: 0 !important; margin-bottom: 2rem; } .services .service h4, .approach .service h4 { margin: 0; font-weight: 400; } .services .service i, .approach .service i { display: block; position: relative; margin: 20px 0; width: 22px; height: 22px; border-radius: 50%; border: 2px solid white; transition: all 0.2s ease; display: none; } .services .service:nth-child(1) i, .approach .service:nth-child(1) i { border-color: #50E3C2; color: #50E3C2; } .services .service:nth-child(2) i, .approach .service:nth-child(2) i { border-color: #8755FF; color: #8755FF; } .services .service:nth-child(3) i, .approach .service:nth-child(3) i { border-color: #01D5FF; color: #01D5FF; } .services .service:nth-child(4) i, .approach .service:nth-child(4) i { border-color: #BD10E0; color: #BD10E0; } .numbering { margin-bottom: 1rem; margin-right: 1rem; font-size: 1rem; } .numbering { display: inline-block; margin-right: .5rem; font-size: 12px; vertical-align: super; } ul.pricing { margin-left:0px; padding: 0 0 0 25px; } .vendor-image { filter: grayscale(1); width:100%; } .vendor-image:hover { filter: grayscale(0); transition: 0.5s ease-in-out; } blockquote { padding: 0; position: relative; } .br-testimonial figcaption { padding-left: 70px; font-size: 13px; letter-spacing: .025em; } .br-testimonial figcaption cite { display: block; font-style: normal; font-weight: bold; } .br-testimonial blockquote { margin: 0 0 20px 0; } .br-testimonial figcaption { padding: 0; font-size: 1rem; } .has-highlight { position: relative; } .has-highlight:after { content: ''; position: absolute; bottom: 0px; height: 20px; width: 102%; background: #d6f0ff; left: -3px; z-index: -1; } .testimonials-section { color: #9c9ea5; } .testimonials-section h1, .testimonials-section h2, .testimonials-section h4, .testimonials-section h5, .testimonials-section h6, .testimonials-section a { color: #fff !important; } .testimonials-section blockquote { color: #fff; font-size:1.5em; } .testimonials-section .br-testimonial { opacity: 0; visibility: hidden; position: relative; transition: opacity 0.4s ease; position: fixed; left: -5000px; } .testimonials-section .br-testimonial.showing { opacity: 1; visibility: visible; top: 0; position: relative; left: 0; } .testimonials-section .next-wrapper { text-align: right; padding-top: 2rem; padding-right: 2rem; } .testimonials-section .next-testimonial { display: inline-block; cursor: pointer; } .testimonials-section .next-testimonial:hover svg { opacity: 1; } .testimonials-section .next-testimonial:hover span { opacity: 1; } .testimonials-section .next-testimonial svg { max-width: 40px; max-height: 40px; opacity: 0.5; transition: opacity 0.2s ease; } .testimonials-section .next-testimonial span { display: block; font-size: 56%; padding-top: 17px; width: 53px; text-align: center; opacity: 0; transition: opacity 0.2s ease; } .testimonials-section .next-testimonial path { fill: #fff; } .testimonials-section .indicators { text-align: right; } .testimonials-section .indicators span { height: 14px; width: 14px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); margin: 5px; display: inline-block; cursor: pointer; } .testimonials-section .indicators span:hover, .testimonials-section .indicators span.current { background: rgba(255, 255, 255, 0.7); } @media (max-width: 768px) { .testimonials-section .next-testimonial { display: none; } .testimonials-section .indicators { text-align: center; } } /*######################################## ################# PART ################### #########################################*/ .fc-button-primary { color: #777; background-color: #fff; border-color: #777; } .fc-button-primary:disabled { color: #777; background-color: #fff; border-color: #777; } .fc-button-primary:not(:disabled):active, .fc-button-primary:not(:disabled).fc-button-active { color: #fff; background-color: #737373; border-color: #151e27; } .fc-toolbar h2 { font-size: 1.0em; margin: 0; text-align:right; } .fc-event { position: relative; display: block; font-size: 0.85em; line-height: 1.4; color: #fff !important; border-radius: 3px; border: 1px solid #999; } .fc-event, .fc-event-dot { background-color: #737373; } .fc-unthemed td.fc-today { background: #77777732; } /*######################################## ################# FOOT ################### #########################################*/ .dw-footer h1 { font-weight: 800; margin: 0; } .dw-footer h4, .dw-footer h5 { font-weight: 800; line-height: 1.2; font-family: 'Playfair Display', serif; } .dw-footer .lead { margin-top: 0 !important; margin-bottom: 4rem; } .dw-footer .hello .lead { margin-bottom: 0; } .dw-footer .hello a { font-weight: 700; display: inline-block; padding: 0; position: relative; } .dw-footer .hello a:after { content: ''; position: absolute; z-index: -2; bottom: -2px; right: 0; height: 1px; width: 100%; background: #ddd; } .dw-footer .hello a:after { background: #000; } .dw-footer .hello a:before { display: none; } .dw-footer .hello a:before { content: ''; position: absolute; z-index: -1; bottom: 5px; right: 0; height: 8px; width: 0; background: #d6f0ff; -webkit-transition: width 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0s; transition: width 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0s; } #dw-footer { background-color: #b0b0b0; color: #111 !important; } #dw-footer a { color: #111; fill: #111; } #dw-footer a:hover { color: #111; fill: #111; } #dw-footer a:before { transition: width 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0s; } #dw-footer .br-widget img { width: 150px; } #dw-footer { margin: 0; padding: 4rem 0 4rem; } #dw-footer .br-widget { margin: 4rem 0 0; padding: 0 0 0; } #dw-footer .br-widget:first-child { margin-top: 0; } #dw-footer .br-widget ul.footer-links { list-style-type: none; margin: 0; padding: 0; } #dw-footer .br-widget ul.footer-links li { list-style-type: none; margin: 0 0 .35rem; padding: 0 0 .35rem; } #dw-footer .br-widget ul.footer-links li:last-child { margin-bottom: 0; } #dw-footer a { position: relative; } #dw-footer a:before { content: ''; position: absolute; bottom: 0; right: 0; height: 1px; width: 0; background: currentColor; -webkit-transition: width 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0s; transition: width 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0s; } #dw-footer a:hover:before { left: 0; right: initial; width: 100%; } #dw-footer .footer-end { margin: 4rem 0 0; padding: 0; font-size: 13px; letter-spacing: .05em; opacity: .75; } #dw-footer { background-color: #333; color: #fff !important; } #dw-footer { background-color: #212121; color: #dadada; } #dw-footer a { color: #dadada; fill: #dadada; } #dw-footer a:hover { color: #ffffff; fill: #ffffff; } #dw-footer { margin: 0; padding: 4rem 0 4rem; } #dw-footer .br-widget { margin: 4rem 0 0; padding: 0 0 0; } #dw-footer .br-widget:first-child { margin-top: 0; } #dw-footer .br-widget ul.footer-links { list-style-type: none; margin: 0; padding: 0; } #dw-footer .br-widget ul.footer-links li { list-style-type: none; margin: 0 0 .35rem; padding: 0 0 .35rem; } #dw-footer .br-widget ul.footer-links li:last-child { margin-bottom: 0; } #dw-footer a { position: relative; } #dw-footer a:before { content: ''; position: absolute; bottom: 0; right: 0; height: 1px; width: 0; background: currentColor; -webkit-transition: width 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0s; transition: width 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0s; } #dw-footer a:hover:before { left: 0; right: initial; width: 100%; } #dw-footer .footer-end { margin: 4rem 0 0; padding: 0; font-size: 13px; letter-spacing: .05em; opacity: .75; } @media (min-width: 768px) { #dw-footer { padding: 5rem 0 5rem; } } @media (min-width: 992px) { #dw-footer { padding: 6rem 0 6rem; } } /*######################################## ################# QUER ################### #########################################*/ @media (max-width: 639px) { h1 { font-size: 27px; } .container { padding:10px 5px; } .main { padding: 5px 15px; } } @media (max-width: 767px) {} @media (max-width: 1023px) {} @media (max-width: 1279px) {} /*######################################## ################# FONT ################### #########################################*/ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; src: url("./_font/Inter-Regular.woff2") format("woff2"), url("./_font/Inter-Regular.woff") format("woff"); font-display: swap; } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 400; src: url("./_font/Inter-Italic.woff2") format("woff2"), url("./_font/Inter-Italic.woff") format("woff"); font-display: swap; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; src: url("./_font/Inter-Medium.woff2") format("woff2"), url("./_font/Inter-Medium.woff") format("woff"); font-display: swap; } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 500; src: url("./_font/Inter-MediumItalic.woff2") format("woff2"), url("./_font/Inter-MediumItalic.woff") format("woff"); font-display: swap; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; src: url("./_font/Inter-SemiBold.woff2") format("woff2"), url("./_font/Inter-SemiBold.woff") format("woff"); font-display: swap; } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 600; src: url("./_font/Inter-SemiBoldItalic.woff2") format("woff2"), url("./_font/Inter-SemiBoldItalic.woff") format("woff"); font-display: swap; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; src: url("./_font/Inter-Bold.woff2") format("woff2"), url("./_font/Inter-Bold.woff") format("woff"); font-display: swap; } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 700; src: url("./_font/Inter-BoldItalic.woff2") format("woff2"), url("./_font/Inter-BoldItalic.woff") format("woff"); font-display: swap; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; src: url("./_font/Inter-ExtraBold.woff2") format("woff2"), url("./_font/Inter-ExtraBold.woff") format("woff"); font-display: swap; } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 800; src: url("./_font/Inter-ExtraBoldItalic.woff2") format("woff2"), url("./_font/Inter-ExtraBoldItalic.woff") format("woff"); font-display: swap; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 900; src: url("./_font/Inter-Black.woff2") format("woff2"), url("./_font/Inter-Black.woff") format("woff"); font-display: swap; } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 900; src: url("./_font/Inter-BlackItalic.woff2") format("woff2"), url("./_font/Inter-BlackItalic.woff") format("woff"); font-display: swap; } @font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 400; src: url('_font/montserrat-v14-latin-italic.eot'); /* IE9 Compat Modes */ src: local('Montserrat Italic'), local('Montserrat-Italic'), url('_font/montserrat-v14-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('_font/montserrat-v14-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */ url('_font/montserrat-v14-latin-italic.woff') format('woff'), /* Modern Browsers */ url('_font/montserrat-v14-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('_font/montserrat-v14-latin-italic.svg#Montserrat') format('svg'); /* Legacy iOS */ font-display: swap; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; src: url('_font/montserrat-v14-latin-regular.eot'); /* IE9 Compat Modes */ src: local('Montserrat Regular'), local('Montserrat-Regular'), url('_font/montserrat-v14-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('_font/montserrat-v14-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('_font/montserrat-v14-latin-regular.woff') format('woff'), /* Modern Browsers */ url('_font/montserrat-v14-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('_font/montserrat-v14-latin-regular.svg#Montserrat') format('svg'); /* Legacy iOS */ font-display: swap; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; src: url('_font/montserrat-v14-latin-500.eot'); /* IE9 Compat Modes */ src: local('Montserrat Medium'), local('Montserrat-Medium'), url('_font/montserrat-v14-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('_font/montserrat-v14-latin-500.woff2') format('woff2'), /* Super Modern Browsers */ url('_font/montserrat-v14-latin-500.woff') format('woff'), /* Modern Browsers */ url('_font/montserrat-v14-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */ url('_font/montserrat-v14-latin-500.svg#Montserrat') format('svg'); /* Legacy iOS */ font-display: swap; } @font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 500; src: url('_font/montserrat-v14-latin-500italic.eot'); /* IE9 Compat Modes */ src: local('Montserrat Medium Italic'), local('Montserrat-MediumItalic'), url('_font/montserrat-v14-latin-500italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('_font/montserrat-v14-latin-500italic.woff2') format('woff2'), /* Super Modern Browsers */ url('_font/montserrat-v14-latin-500italic.woff') format('woff'), /* Modern Browsers */ url('_font/montserrat-v14-latin-500italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('_font/montserrat-v14-latin-500italic.svg#Montserrat') format('svg'); /* Legacy iOS */ font-display: swap; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 900; src: url('_font/montserrat-v14-latin-900.eot'); /* IE9 Compat Modes */ src: local('Montserrat Black'), local('Montserrat-Black'), url('_font/montserrat-v14-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('_font/montserrat-v14-latin-900.woff2') format('woff2'), /* Super Modern Browsers */ url('_font/montserrat-v14-latin-900.woff') format('woff'), /* Modern Browsers */ url('_font/montserrat-v14-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */ url('_font/montserrat-v14-latin-900.svg#Montserrat') format('svg'); /* Legacy iOS */ font-display: swap; } @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400; src: url('_font/playfair-display-v20-latin-regular.eot'); /* IE9 Compat Modes */ src: local(''), url('_font/playfair-display-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('_font/playfair-display-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('_font/playfair-display-v20-latin-regular.woff') format('woff'), /* Modern Browsers */ url('_font/playfair-display-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('_font/playfair-display-v20-latin-regular.svg#PlayfairDisplay') format('svg'); /* Legacy iOS */ font-display: swap; } @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 700; src: url('_font/playfair-display-v20-latin-700.eot'); /* IE9 Compat Modes */ src: local(''), url('_font/playfair-display-v20-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('_font/playfair-display-v20-latin-700.woff2') format('woff2'), /* Super Modern Browsers */ url('_font/playfair-display-v20-latin-700.woff') format('woff'), /* Modern Browsers */ url('_font/playfair-display-v20-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ url('_font/playfair-display-v20-latin-700.svg#PlayfairDisplay') format('svg'); /* Legacy iOS */ font-display: swap; } @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 900; src: url('_font/playfair-display-v20-latin-900.eot'); /* IE9 Compat Modes */ src: local(''), url('_font/playfair-display-v20-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('_font/playfair-display-v20-latin-900.woff2') format('woff2'), /* Super Modern Browsers */ url('_font/playfair-display-v20-latin-900.woff') format('woff'), /* Modern Browsers */ url('_font/playfair-display-v20-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */ url('_font/playfair-display-v20-latin-900.svg#PlayfairDisplay') format('svg'); /* Legacy iOS */ font-display: swap; } @font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400; src: url('_font/playfair-display-v20-latin-italic.eot'); /* IE9 Compat Modes */ src: local(''), url('_font/playfair-display-v20-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('_font/playfair-display-v20-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */ url('_font/playfair-display-v20-latin-italic.woff') format('woff'), /* Modern Browsers */ url('_font/playfair-display-v20-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('_font/playfair-display-v20-latin-italic.svg#PlayfairDisplay') format('svg'); /* Legacy iOS */ font-display: swap; } @font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 700; src: url('_font/playfair-display-v20-latin-700italic.eot'); /* IE9 Compat Modes */ src: local(''), url('_font/playfair-display-v20-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('_font/playfair-display-v20-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */ url('_font/playfair-display-v20-latin-700italic.woff') format('woff'), /* Modern Browsers */ url('_font/playfair-display-v20-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('_font/playfair-display-v20-latin-700italic.svg#PlayfairDisplay') format('svg'); /* Legacy iOS */ font-display: swap; } @font-face { font-family: 'fontello'; src: url('_font/fontello.eot?25243633'); src: url('_font/fontello.eot?25243633#iefix') format('embedded-opentype'), url('_font/fontello.woff2?25243633') format('woff2'), url('_font/fontello.woff?25243633') format('woff'), url('_font/fontello.ttf?25243633') format('truetype'), url('_font/fontello.svg?25243633#fontello') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } /* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */ /* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */ /* @media screen and (-webkit-min-device-pixel-ratio:0) { @font-face { font-family: 'fontello'; src: url('../font/fontello.svg?25243633#fontello') format('svg'); } } */ [class^="icon-"]:before, [class*=" icon-"]:before { font-family: "fontello"; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; width: 1em; margin-right: .2em; text-align: center; /* opacity: .8; */ /* For safety - reset parent styles, that can break glyph codes*/ font-variant: normal; text-transform: none; /* fix buttons height, for twitter bootstrap */ line-height: 1em; /* Animation center compensation - margins should be symmetric */ /* remove if not needed */ margin-left: .2em; /* you can be more comfortable with increased icons size */ /* font-size: 120%; */ /* Font smoothing. That was taken from TWBS */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Uncomment for 3D effect */ /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ } .icon-pencil:before { content: '\e800'; } /* '' */ .icon-book:before { content: '\e801'; } /* '' */ .icon-twitter:before { content: '\f099'; } /* '' */ .icon-facebook:before { content: '\f09a'; } /* '' */ .icon-docs:before { content: '\f0c5'; } /* '' */ .icon-desktop:before { content: '\f108'; } /* '' */ .icon-github:before { content: '\f113'; } /* '' */ .icon-file-code:before { content: '\f1c9'; } /* '' */ .icon-wikipedia-w:before { content: '\f266'; } /* '' */