/* Copyright (C) 2015-2021 Free Software Foundation, Inc.
 
Author: Nicolas Petton <nicolas@petton.fr>

This file is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This file is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details. */

/* Begin of reset */

html, body, div, span, applet, object, iframe,
                          h1, h2, h3, h4, h5, h6, p, blockquote, pre,
                          a, abbr, acronym, address, big, cite, code,
                          del, dfn, em, img, ins, kbd, q, s, samp,
                          small, strike, strong, sub, sup, tt, var,
                          b, u, i, center,
                          dl, dt, dd, ol, ul, li,
                          fieldset, form, label, legend,
                          table, caption, tbody, tfoot, thead, tr, th, td,
                          article, aside, canvas, details, embed, 
                          figure, figcaption, footer, header, hgroup, 
                          menu, nav, output, ruby, section, summary,
                          time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

pre {
  font-family: "Fira Mono", monospace;
  padding: 10px;
  background: #efeadc;
  margin: 20px 0px;
  border: 1px solid #ccc;
  border-radius: 6px;
}

/* End of reset */

body {
  font-family: "Fira Sans", sans-serif;
  line-height: 1.5em;
  font-size: 1.1em;
  color: #4E4742;
  color: #3F3B3B;
  background: #F5F5ED;
}

html, body {
  height: 100%;
}
.wrapper {
  min-height: 100%;
  height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
  height: 100%;
  margin: 0 auto -200px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
  height: 200px; /* .push must be the same height as .footer */
}

.clear {
  overflow: auto;
  clear: both;
}

h1 {
  font-size: 2.1em;
  font-weight: bold;
  margin: 0.4em;
  line-height: 1.5em;
  font-weight: 300;
}

h1 span {
  font-weight: normal;
  display: block;
  font-size: 0.8em;
  line-height: 1em;
}

h2 {
  font-size: 2em;
  margin: .8em 0 .4em;
  font-weight: 500;
  line-height: 2em;
}

h3 {
  font-size: 1.3em;
  margin: 2em 0 1em 0;
}

a {
  color: #76319F;
  text-decoration: underline;
  transition: .2s all ease-in;
}

a:hover {
  color: #3E0C5C;
}

tt, code, kbd {
  font-family: "Fira Mono", monospace;
  background: #efeadc;
  border: 1px solid #ccc;
  padding: 2px 6px 0px;
  border-radius: 4px;
  /* color: #ddd; */
}

pre.src {
  margin-bottom: 2em;
}

p {
  margin-bottom: 2em;
}

p.centered {
  text-align: center;
  margin: 3em 0;
}

em {
  font-weight: 500;
}

li {
  list-style: square;
  margin-bottom: 10px;
  margin-left: 40px;
}

.container {
  padding: 40px 0;
  width: 960px;
  margin: 0 auto;
  overflow: auto;
}

.header {
  color: #3F3B3B;
  text-align: left;
  background: #EDE6D5 linear-gradient(#EDE6D5, #F5F5ED) repeat scroll 0% 0%;
}

.header .nav-mobile {
  display: none;
}

.header nav {
  background: #F2EFE4;
  border-bottom: 1px solid #D4CBB6;
  padding: 8px;
  margin-bottom: 20px;
  text-align: center;
  font-size: .9em;
  font-weight: 400;
}

.header nav a {
  color: #3F3D32;
  padding: 10px;
}

.header nav a:hover {
  color: #3F3D32;
  text-decoration: underline;
}

.header nav.gnu-nav {
  margin: 0;
  background: #fcfbfa;
}

.header nav.gnu-nav .gnu-logo {
  padding: 0;
}

.header nav.gnu-nav .gnu-logo img {
  height: 34px;
  vertical-align: bottom;
}

.header nav.gnu-nav a {
  color: #817F7F;
  font-size: .9em;
  padding: 0;
}

.header nav.gnu-nav a:hover {
  color: #525151;
  text-decoration: none;
}


.header nav.gnu-nav a:after {
  content: '·';
  padding: 0 5px;
  color: #817F7F;
  font-size: .9em;
}

.header nav.gnu-nav a:last-child:after {
  content: '';
  padding: 0;
}

.header nav.gnu-nav a:first-child:after {
  content: '';
}

.header nav.gnu-nav a.join-fsf {
  text-align: center;
  border-radius: 20px;
  display: inline-block;
  padding: 5px 18px 2px 18px;
  background: #817F7F;
  color: white;
  text-decoration: none;
}

.header nav.gnu-nav a.join-fsf:hover {
  background: #525151;
}

.header .container {
  padding-top: 40px;
  padding-bottom: 40px;
  position: relative;
  overflow: hidden;
}

.header .logo {
  overflow: hidden;
  text-align: center;
  z-index: 1;
}

.header .logo img {
  max-height: 100px;
  vertical-align: top;
}

.header .logo h1 {
  display: inline;
  font-size: 4em;
  line-height: 110px;
  margin: 0 10px;
  font-weight: 600;
}

.header h2 {
  z-index: 1;
  margin: 0 auto;
  text-align: center;
  margin-bottom: 10px;
  font-size: 2.6em;
  line-height: 1.3em;
  margin-top: 20px;
  font-weight: 300;
  max-width: 760px;
}

.header .teaser {
  margin-top: 40px;
}

.header p {
  margin: 0 auto;
  text-align: center;
  max-width: 760px;
  font-weight: 300;
  font-size: 1.2em;
}

.header a {
  text-decoration: none;
}

.header a.learn-more {
  color: rgb(240, 255, 135);
  text-decoration: none;
}

.header a.learn-more:hover {
  color: rgb(240, 255, 135);
  text-decoration: none;
}

.header .links {
  position: absolute;
  top: 40px;
  right: 0;
  font-weight: 400;
}

.header .links li {
  list-style: none;
  margin-left: 0;
}

.header .links li:first-child {
  border-bottom: 2px dashed #444;
}

.header .links span {
  margin-bottom: 10px;
  display: block;
}

.header .links a {
  color: #C082E3;
  font-weight: 400;
  display: block;
  transition: .2s all ease-in;
}

.header a.more {
  font-size: .8em;
  text-align: right;
  color: #622486;
  display: initial;
  float: right;
}

.header .links a.more:hover {
  text-decoration: underline;
}

.header .links a.btn {
  margin: 10px 0;
  padding: 12px 22px;
  border-radius: 6px;
  text-decoration: none;
  background: #7F5AB6;
  color: white;
  text-align: center;
}

.header .links a.btn:hover {
  background: #622486;
}

.header .links a i {
  margin-right: 10px;
}

.header .learn-more {
  display: block;
  position: absolute;
  bottom: 0;
  width: 120px;
  text-align: center;
  left: 500px;
  margin-left: -70px;
  font-weight: 400;
  transition: .2s all ease;
  padding: 10px;
  background-color: #222;
  opacity: 0.9;
}

.header .learn-more i {
  display: block;
  font-size: 40px;
}

.header .learn-more:hover {
  text-decoration: none;
  background-color: #111;
  bottom: -10px;
  opacity: 1;
}

.header .download-btns {
  margin-top: 40px;
  text-align: center;
}

.header .download-btns a {
  background-color: #7F5AB6;
  color: white;
  display: inline-block;
  padding: 8px 15px;
  border-radius: 3px;
  margin-right: 10px;
  border: 1px solid #622486;
}

.header .download-btns a:hover {
  background-color: #622486;
}

.fsf-banner {
  background: #b11107;
  border-top: 4px solid #840902;
  color: white;
  overflow: hidden;
  padding: 10px 0;
}

.fsf-banner .container {
  padding: 20px;
}

.fsf-logo {
  display: inline-block;
}

.fsf-banner .left {
  float: left;
  width: 50%;
}

.fsf-banner .right {
  float: right;
  width: 50%;
}

.fsf-banner img {
  float: left;
}

.fsf-banner p {
  font-style: italic;
}

#join-fsf {
  margin: 20px 0 0 0;
  width: auto;
}

#join-fsf a {
  margin: 20px 0 0 0;
  background: #ddd;
  display: inline-block;
  border-radius: 16px;
  padding: 10px 20px;
  color: #b11107;
  font-weight: bold;
  text-decoration: none;
  border: 4px solid white;
  font-size: 1.4em;
}

#fssbox {
  padding-top: 20px;
}

#fssbox form {
  margin-bottom: 40px;
  margin-top: 20px;
}

#fssbox p {
  margin-left: 0;
  margin-bottom: 5px;
  margin-right: 20px;
  font-style: normal;
}

#fssbox p a {
  font-weight: bold;
  color: white;
}

#fssbox input[type='text'] {
  border: 2px solid #840902;
  border-radius: 8px;
  padding: 5px 10px;
}

#fssbox input[type='submit'] {
  background: #ddd;
  margin-left: 5px;
  display: inline-block;
  border-radius: 16px;
  padding: 2px 8px;
  font-weight: bold;
  color: #b11107;
  font-weight: bold;
  text-decoration: none;
  border: 4px solid white;
}


.tour-banner {
  font-size: 1.2em;
  text-align: center;
  background: #4F3774;
  color: white;
}

.tour-banner .container {
  padding: 10px 0;
}

.videos, #video-player {
  background: #624195;
  color: #fafafa;
  text-align: center;
}

#video-player {
  position: relative;
}

#video-player .close {
  cursor: pointer;
  position: absolute;
  top: 10px;
  right: 10px;
  text-decoration: none;
  font-size: 4em;
  line-height: 1em;
  color: white;
}

#video-player video {
  padding: 50px 0;
  width: 100%;
  height: auto;
}

.videos h2 {
  color: #EEE2FF;
}

.videos li {
  display: inline-block;
  padding: 20px;
}

.videos li a {
  display: inline-block;
  background: transparent url(https://www.gnu.org/software/emacs/images/emacs-rocks-splash.png) top left no-repeat;
  width: 200px;
  font-size: 10px;
  padding: 22px;
  padding-left: 32px;
  height: 140px;
  padding-right: 0;
  color: white;
  font-family: monospace;
  text-align: left;
}

.videos li a:hover {
  text-decoration: none;
}

.videos li a .numb {
  color: #ff9143;
}

.videos li a .name {
    display: block;
  margin-top: 1em;
  color: #ffaf91;
}

.release-banner {
  background: #3a3a3a;
  color: rgb(244, 244, 236);
}

.release-banner .container {
  padding: 0px;
  text-align: center;
}

.release-banner h2 {
  font-weight: normal;
  font-size: 1.4em;
  margin: 5px 0px;
}

.release-banner a {
  color: rgb(237, 231, 214);
}

.features {
  border-top: 1px solid #444242;
  background: #7F5AB6;
  color: #fafafa;
  overflow: hidden;
}

.features .container {
  padding-top: 20px;
}

.features a, .videos a, .tour-banner a {
  color: #FFDE8F;
  text-decoration: none;
}

.features a:hover, .videos a:hover {
  text-decoration: underline;
}

.features h2 {
  text-align: center;
  color: #EEE2FF;
}

.features ul {
  overflow: auto;
}

.features li {
  text-align: center;
  list-style: outside none none;
  width: 27%;
  margin: 30px 3%;
  float: left;
  padding-left: 0px;
  padding-top: 210px;
  background-position: center top;
  background-repeat: no-repeat;
}

.features .modes {
  background-image: url('https://www.gnu.org/software/emacs/images/emacs-preview-modes.png');
}

.features .documentation {
  background-image: url('https://www.gnu.org/software/emacs/images/emacs-preview-documentation.png');
}

.features .unicode {
  background-image: url('https://www.gnu.org/software/emacs/images/emacs-preview-unicode.png');
}

.features .customization {
  background-image: url('https://www.gnu.org/software/emacs/images/emacs-preview-customization.png');
}

.features .extensions {
  background-image: url('https://www.gnu.org/software/emacs/images/emacs-preview-extensions.png');
}

.features .packages {
  background-image: url('https://www.gnu.org/software/emacs/images/emacs-preview-packages.png');
}

.releases {
  color: #3F3B3B;
  background: #F0EBDE;
  text-align: left;
}

.releases h3 {
  margin: .8em 0 2em 0;
}

.releases code,
.releases pre,
.releases tt,
.releases kbd,
.release kbd {
  color: #333;
  background: #e5e5c8;
  border-color: #666;
}

.releases p+ul {
  margin-top: -1em;
}

.releases ul+p {
  margin-top: 2em;
  text-align: left;
}

/* .downloading { */
/*   background: #fcfbfa; */
/* } */

.footer {
  border-top: 4px solid #333;
  padding-top: 15px;
  text-align:center;
  
  background: #434342; /* url(images/emacs-bw.png) bottom left no-repeat; */
  color: #888;
}

.footer h3 {
  font-size: 1.3em;
}

.footer .container {
  padding: 5px;
  font-size: 0.8em;
  overflow: hidden;
  /* background: #262626 url(images/emacs-bw.png) left 70px no-repeat; */
}

.footer .container > div {
  width: 430px;
  float: left;
}

.footer .container > div:last-child {
  margin-left: 100px;
}

.footer .left {
  text-align: left;
}

.footer .right {
  text-align: right;
}

.footer p {
  margin: 5px 0;
}

.footer nav {
  font-size: 1.2em;
  margin-bottom: 40px;
}

.footer nav a {
  margin: 10px;
}

.footer nav a:after {
  content: " ❯";
  color: #555;
}

.footer nav a:hover {
  text-decoration: none;
}

.footer a {
  color: #ccc;
  text-decoration: none;
}

.footer a:hover {
  color: rgb(204, 99, 99);
}

@media screen and (max-width: 999px) {
  .container {
    width: 800px;
  }

  .container {
    width: 90%;
    padding: 40px 5%;
  }
  
  .header .container {
    padding-bottom: 0;
  }

  .header h2,
  .header p {
    max-width: 100%;
  }

  .header .links {
    position: relative;
  }

  .header .links li {
    float: left;
    width: 29%;
    padding: 10px;
  }

  .header .links li:first-child {
    border: 0 none;
  }

  .header .links .btns {
    overflow: hidden;
  }
  
  .header .links a.btn {
    text-align: center;
    margin: 10px 5% 10px 0;
  }
  
  .header .links a.btn:last-child {
    margin-right: 0;
  }

  .header .links a.more {
    font-size: 1em;
    text-align: left;
  }

  .header a.learn-more {
    display: none;
  }
  
  .header .teaser {
    left: 0;
    margin-top: 80px;
    position: relative;
    max-width: 100%;
  }
  
  .fsf-banner a {
    display: block;
    text-align: center;
    margin-bottom: 10px;
  }

  .fsf-banner img {
    float: none;
  }

  .fsf-banner p {
    text-align: center;
    width: auto;
    margin-bottom: 10px; 
  }
  
  .wrapper {
    margin: 0 auto -300px;
  }
  .footer, .push {
    height: 300px;
  }
  
  .footer .container > .left,
  .footer .container > .right {
    float: none;
    text-align: center;
    width: auto;
  }

  .footer .container > div:last-child {
    margin-left: 0;
  }
}

@media screen and (max-width: 840px) {
  .features ul li {
    width: auto;
    margin: 20px 5%;
    float: none;
  }

  .fsf-banner .right, .fsf-banner .left {
    float: none;
    width: auto;
  }
}

@media screen and (max-width: 639px) {
  body {
    font-size: 1em;
  }

  .header .container {
    text-align: center;
    padding-top: 0;
  }
  
  .header .logo {
    text-align: center;
  }

  .header .logo h1,
  .header .logo img {
    float: none;
  }

  .header .logo h1 {
    display: block;
    font-size: 3em;
    line-height: 2em;
    margin-left: 5px;
  }

  .header h2 {
    margin-top: 10px;
    margin-bottom: 30px;
    font-size: 1.8em;
  }

  .header .nav-mobile {
    display: block;
    overflow: hidden;
    color: #ddd;
  }

  .header .nav-mobile .nav-toggle {
    border: 0 none;
    border-radius: 4px;
    background: transparent;
    margin: 5px;
    float: right;
    width: 45px;
    height: 45px;
  }

  .header .nav-mobile .nav-toggle .bar {
    display: block;
    width: 100%;
    height: 4px;
    border-radius: 1px;
    background: #9142BE;
    margin: 5px 0;
  }

  .header .nav-mobile .nav-toggle:hover .bar {
    background: #622486;
  }

  .header nav {
    display: none;
    padding: 0;
  }

  .header nav a {
    padding: 10px;
    display: block;
    text-align: left;
    border-top: 1px solid #999;
    font-size: 1.2em;
    font-weight: 400;
  }

  .header nav.gnu-nav a {
    border-color: #ccc;
  }

  .header .teaser {
    margin-top: 20px;
  }

  .fsf-banner img {
    max-width: 100%;
  }

  .fsf-banner p {
    margin-left: 0;
    text-align: center;
  }

  .fsf-banner .right {
    text-align: left;
    float: left;
  }

  #join-fsf {
    text-align: center;
    width: 100%;
  }
}

@media screen and (max-width: 550px) {
  .wrapper {
    margin: 0 auto -320px;
  }
  .footer, .push {
    height: 320px;
  }

  .header .links li {
    float: none;
    width: auto;
    padding: 5px;
  }
  
  .header .links a.btn,
  .header .links a.btn:last-child {
    text-align: center;
    margin: 0;
    width: auto;
  }
}