dw/css/style.css

/* ########################################
########### 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);
}
.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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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;
}
/* 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'; } /* '' */