/* Created by http://freehtml5templates.com */

/* Color pallete */ 
/* -- LOGO --
 * -- Colors from the logo --
 * Dark Blue    --> #036 
 * Light Blue   --> #3cf
 * Dark red     --> #c30
 * Yellow       --> #fc0
 *
 * -- PALLETE 1 --
 * -- Totally came up with this one --
 * -- I did not steal I promise --
 * Black        --> #000
 * Night        --> #181818
 * L-blue       --> #2CCCC3
 * Gold         --> #FACD3D
 * Purple       --> #5626C4
 * Pink         --> #E60576
 *
 * Ok, lets actually add them */
:root {
  --negro: #000;
  --noche: #181818;
  --cian:  #2CCCC3;
  --oro:   #FACD3D;
  --purp:  #5626C4;
  --rosa:  #E60576;
  --azul:  #036;
}


/* reset */
* {
margin: 0;
padding: 0;
}

/* render html5 elements as block */
header, footer, section, nav, article {
display: block;
}

body {
line-height: 1;
background: url("images/water-art-full-dark.png") no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: var(--noche);
font-size: 14px;
line-height: 18px;
}
	
/* layout */

#wrapper {
width: 940px;
margin: 0 auto;
margin-top: 5px;
margin-bottom: 5px;
-webkit-box-shadow: 3px 3px 7px #777;
-moz-box-shadow: 3px 3px 7px #777;
background: var(--noche);
}

nav {
width: 940px;
height: 69px;
margin: 0 auto;
}

header {
position:relative;
text-align: center;
width: 940px;
height: 200px;
margin: 0 auto;
background: url("./images/Scene-bg-fullcolor.png");
background-position: center;
}

#main {
width: 660px;
margin: 0 auto;
padding: 10px 0 10px 0;
background: white;
overflow: hidden;
float: right;
}

#content {
float: right;
width: 590px;
margin-right: 30px;
}

footer {
margin: 0 auto;
clear: both;
}

/* basics */

h2,h6 {
font-weight: bold;
letter-spacing: 2px;
clear: both;
color: var(--cian);
}

a:link, a:visited {
color: var(--purpl);
text-decoration: none;
}

a:hover, a:active {
color: var(--rosa);
text-decoration: underline;
}

p {
margin-bottom: 18px;
}

li {
padding-left: 5px;
}

/* NEW nav */
/* used to have submenus, broke the "stickyness" */
#navbar {
  overflow: hidden;
  letter-spacing: 2px;
  background-color: var(--noche);
  z-index: 2;
}

#navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

#navbar a:hover {
  background-image: linear-gradient(to right, var(--cian), var(--purp));
}

/* navbar is Sticky! */

/* 
 * Mi optimizador de CSS Elimino el CSS de aqui
 * Lo que tiene sentido, porque de primeras NO DEBERIA USARSE
 * Se usa al bajar
 * Tragico, en fin, aqui esta de nuevo
 *
 * Necesita z-index: 1 o 2
 * Pero a pesar de estar aqui, no carga en el navegador :/ ?
 */
.sticky {
  position: fixed;
  top: 0;
  width: 940px;
  z-index: 2;
}

.sticky + .content {
  padding-top: 60px;
}

/** HEADER */

#plandesign {
position: center;
height: 200px;
object-fit: fit;
}

/** ARTICLES **/

#content p, ul, hr {
margin-bottom: 24px;
}

/* Cuestiono la necesidad de ponerlo otra vez h2, h6*/
h2, h6 {
color: var(--cian);
margin: 0 0 20px 0;
line-height: 1.5em;
}

/* Lo que queda del pobre footer*/
footer p {
margin-top: -15px;
}

/* NEW SIDEBAR */
.sidenav {
  display: flex;
  position: fixed;
  width: 280px;
  height: 100%;
  background-color: var(--noche);
  z-index:1;
}

.sidenav .main-buttons {
  list-style-type: none;
  margin: 64px 0;
  padding: 0;
  color: white;
}
.sidenav .main-buttons li {
  text-transform: uppercase;
  letter-spacing: 2px;
  /* Deberiamos cambiar las fuentes y usar la misma familia */
  /* font-family: 'Open Sans', sans-serif; */
  font-size: 15px;
}
.sidenav .main-buttons > li {
  padding: 16px 52px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.sidenav .main-buttons > li .fa {
  position: absolute;
  left: 12px;
  color: var(--cian);
}
.sidenav .main-buttons > li:hover, .sidenav .main-buttons > li:active, .sidenav .main-buttons > li:focus {
  background-color: var(--negro);
  cursor: pointer;
}
.sidenav .main-buttons > li:hover .hidden, .sidenav .main-buttons > li:active .hidden, .sidenav .main-buttons > li:focus .hidden {
  width: 228px;
}

.hidden {
  width: 0;
  height: 100%;
  padding: 64px 0;
  position: absolute;
  top: 0;
  right: 0;
  overflow: hidden;
  list-style-type: none;
  background-color: var(--noche);
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.hidden li {
  padding: 16px 24px;
}
.hidden li:hover, .hidden li:active, .hidden li:focus {
  background-image: linear-gradient(to right, var(--cian), var(--purp));
}

/* NEW FOOTER */
.site-footer
{
  background-color: var(--negro);
  padding:45px 20px 20px 20px;
  font-size:15px;
  line-height:24px;
  color: white;
  margin-left: 280px;
}
.site-footer hr
{
  border-top-color: var(--negro);
  opacity:0.5
}
.site-footer h6
{
  color: var(--cian);
  font-size:16px;
  text-transform:uppercase;
  margin-top:5px;
  letter-spacing:2px
}
.footer-links
{
  padding-left:0;
  list-style:none
}
.footer-links li
{
  display:block
}

.site-footer .social-icons
{
  text-align:right
}
.site-footer .social-icons a
{
  width:40px;
  height:40px;
  line-height:40px;
  margin-left:6px;
  margin-right:0;
  border-radius:100%;
  background-color:#33353d
}
.copyright-text
{
  margin:0
}
@media (max-width:991px)
{
  .site-footer [class^=col-]
  {
    margin-bottom:30px
  }
}
@media (max-width:767px)
{
  .site-footer
  {
    padding-bottom:0
  }
  .site-footer .copyright-text,.site-footer .social-icons
  {
    text-align:center
  }
}
.social-icons
{
  padding-left:0;
  margin-bottom:0;
  list-style:none
}
.social-icons li
{
  display:inline-block;
  margin-bottom:4px
}
.social-icons a{
  background-color:#eceeef;
  color:#818a91;
  font-size:16px;
  display:inline-block;
  line-height:44px;
  width:44px;
  height:44px;
  text-align:center;
  margin-right:8px;
  border-radius:100%;
  -webkit-transition:all .2s linear;
  -o-transition:all .2s linear;
  transition:all .2s linear
}
.social-icons a:active,.social-icons a:focus,.social-icons a:hover
{
  color:#fff;
  background-color:#29aafe
}
.social-icons a.facebook:hover
{
  background-color:#3b5998
}
.social-icons a.twitter:hover
{
  background-color:#00aced
}

/* Make the videos work */ 
video {
  display: block;
  width: 100%;
}

#coolsnake {
  text-align: center;
  border: 10px solid black;
  padding: 2rem 2rem;
  min-height: 2em;
  background: linear-gradient(#036, #5626C4, #E60576);
}