@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

* {box-sizing border-box;}

body, html { height:100%; width:100%; margin:0; background-color:#f8f8f7; }

/* Typographie */
h1 { font-family:'Lato', sans-serif; color:white;  margin:0 0 1.2em; }
h2, h3, h4, h5 { font-family:'Lato', sans-serif; color:#18579a; }
h2 {font-size: 1.8em; font-weight:700; margin:2.1em 0 1.6em;}
h3 {font-size: 1.6em; font-weight:300; }
h4 {font-size: 1.4em; font-weight:300; }
h5 {font-size: 1.2em; font-weight:300; }

p { font-family:'Roboto', sans-serif; font-weight:normal; font-size:1em; line-height:1.6em; }
strong { font-family:'Roboto', sans-serif; font-weight:bold; }
b { font-family:'Roboto', sans-serif; font-weight:bold; }
i { font-family:'Roboto', sans-serif; font-weight:normal; font-style:italic; }

/* Header Style */
.bg-image { background-image:url(../images/road.jpg); height:50%; background-position:center; background-repeat:no-repeat; background-size:cover;
  filter:blur(3px);
  -webkit-filter:blur(3px);
}
.bg-text {
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
  color:white;
  border: 3px solid white;
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 80%;
  padding: 0.5em;
  text-align: center;
}
.bg-text h1 { font-size:3.052em; font-style:italic; font-weight:900; }
.bg-text h2 { font-style:italic; font-weight:300; color:white; margin:2.1em 0 1.2em; }

/* Top Navigation Bar Style */
.topnav { overflow:hidden; background-color:#333; }
.topnav a { float:left; display:block; font-family:'Roboto', sans-serif; color:white; text-align:center; padding:1em 1.4em; text-decoration:none; font-size:0.9em; }
.topnav a:hover { background-color:#ddd; color:black; }
.topnav a.active { background-color:#ffd700; color:black; }

.topnav .logo-home { background-image: url(../images/Timeline.png); background-repeat:no-repeat; background-size:contain; height:2.28em; width:4em; float:left; padding:0.3em 1em; margin-left:2em; background-color:#333; }

/*
.topnav .edit { float:right;  margin-right:1em; }
.topnav .edit a { float:left; display:block; font-family: 'Roboto', sans-serif; font-size:0.9em; background-color:#ddd; color:black; text-align:center; padding:1em 1.4em; text-decoration:none; }
.topnav .edit a:hover { background-color:#ffd700; }
.topnav .edit a.active { background-color:#ffd700; color:black; }
/*

/*
.topnav .search-container { float:right; }
.topnav input[type=text] { padding:0.5em; margin-top:0.5em; font-family:'Roboto', sans-serif; font-size:0.9em; border:none; }
.topnav .search-container button { float:right; padding:0.5em 0.7em; margin-top:0.5em; margin-right:2.8em; background:#ddd; font-size:0.88em; border:none; cursor:pointer; }
.topnav .search-container button:hover { background:#ffd700; }
*/

/* Home Page Content */
.content-home { width:75%; margin:5.2em auto; border:1px solid gray; padding:0 2.7em 1.9em; }

		/* Colors */
.vio { color:#7030a0; }
.rede { color:#F00; }

/* Footer */
.footer { overflow:hidden; bottom:0; width:100%; background-color:#15406d; border-top:solid 3px #ffd700; }
.footertop { width:100%; margin:0.5em; }
.footerbot {width:100%; margin:0.5em 1.5em; }
.footeruppermost {width:100%; margin:1em 0.5em; font-family:'Roboto', sans-serif; font-size:0.7em; color:#ddd; }
.footerlowermost {width:100%; margin:1em 0.5em; font-family:'Roboto', sans-serif; font-size:0.7em; color:#ddd; }

.divider { width:81%; margin:0 auto; height:2px; top:0; bottom:0; border-top:1px solid #113255; border-radius:2px; background-color:#18497d;}

.footernav .text-container { float:left; display:block; color:#ddd; padding-left:1em; }

		/* Footer navigation */
.footernav { overflow:hidden; background-color:transparent; }
.footernav a { float:left; display:block; font-family:'Roboto', sans-serif; font-size:0.7em; color:#ddd; text-align:center; padding:1em 1.4em; text-decoration:none; }
.footernav a:hover { background-color:transparent; color:#ffd700; }
.footernav a.active { background-color:transparent; color:#ffd700; }

		/* Icon Bar */
.footernav .icon-bar { float:right; top:50%; margin-right:3em; }
.icon-bar { margin-top:0.5em;}
.footernav .icon-bar a { font-family:'Roboto', sans-serif; font-size:0.7em; text-align:center; padding:0.5em 1em; color:white; font-size:0.8em; }
.footernav .icon-bar a:hover { background-color:#ffd700; color:black; }
.facebook { background:#3B5998; color:white; }
.twitter { background:#55ACEE; color:white; }
.google { background:#dd4b39; color:white;}
.linkedin { background:#007bb5; color:white; }
.youtube { background:#bb0000; color:white; }

		/* Edit */
.footernav .edit { float:left; }
.footernav .edit { float:left; display:inline-block; font-family:'Roboto', sans-serif; font-size:0.7em; color:black; text-align:center; padding:0.5em 1em; background-color:#ddd; border:none; cursor:pointer; }
.footernav .edit:hover { background-color:#ffd700; }   
/*.footernav .edit a.active { background-color:#ffd700; color:black; }*/

		/* Login */
.footernav .login { float:right; }
.login-container { }
.footernav .login button { float:right; padding:0.5em 1em /*0.48em 0.7em*/; margin-right:5.5em; background-color:#ddd; font-family: 'Roboto', sans-serif; font-size:0.7em; color:black; border:none; cursor:pointer; }
.footernav .login button:hover { background-color:#ffd700; }
.footernav input[type=text] { font-family:'Roboto', sans-serif; font-size:0.7em; padding:0.5em 0.7em; border:1px solid #15406d; }

/* Responsive Layout, but not for Mobile */
@media screen and (max-width: 670px) {
  .topnav .search-container, .topnav .login-container, .footernav .login {
    float:none;
  }
  .topnav a, .topnav input[type=text], .topnav .search-container button, .topnav .login button, .footernav .login button { float:none; display:block; text-align:left; width:100%; margin:0; padding:1em;
  }
  .topnav input[type=text] { border:1px solid #ccc; }
  .bg-text h1 { font-size:2.6em; font-style:italic; font-weight:900; margin:0 0 0.5em; }
  .bg-text h2 { font-style:italic; font-size:1.6em; font-weight:700; margin:0.5em 0 0.5em; font-weight:300; color:white; }
}