/*
* FONT
*/
@font-face {
    font-family: 'abril_fatfaceregular';
    src: url('../font/abrilfatface-regular-webfont.woff2') format('woff2'),
         url('../font/abrilfatface-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'juralight';
    src: url('../font/jura-variablefontwght-webfont.woff2') format('woff2'),
         url('../font/jura-variablefontwght-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/*
* BODY
*/
body {
 background-color: #cccccc;
 background-repeat: no-repeat;
 background-size:     cover;
 background-position: center top;
 background-attachment: fixed;
 color: #FFFFFF;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", sans-serif;
  font-size: 13px;
  margin: 0;
}


.pagecontainer {
  display: flex; /* or inline-flex */
  flex-direction: row;
  align-items: flex-start;
  align-content: flex-start;
  flex-wrap: wrap;
  z-index: 999;
}


/*
* THE LIST OF ITEMS
*/

.container {
  display: flex; /* or inline-flex */
  flex-direction: row;
  align-items: flex-start;
  align-content: flex-start;
  flex-wrap: wrap;
  z-index: 999;
}

.item {
  order: 0; /* default is 0 */
  height: 40px;
  line-height: 40px;
  background-color: #aaa;
  border-radius: 20px;
  margin-top: 10px;
  margin-left: 10px;
  margin-bottom: 10px;
  padding-left: 5px;
  padding-right: 15px;
  background-color: #fff;
  color: #000;
  z-index: 999;
  display: flex;
  align-items: center;
  font-family: 'juralight';
  font-size: 23px;
  font-weight: 600;
}
.item:hover {
  background-color: #bbb;
  -webkit-box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, .1);
  -moz-box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, .1);
  box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, .1);
}
.item a{
  text-decoration: none;
  color: #000;
  padding-top:  10px;
  margin-top: 10px;
}

.dot {
  display: inline;
  float: none;
  height: 30px;
  width: 30px;
  background-color: #000;
  border-radius: 50%;
  display: inline-block;
}


/*
* MASK FOR THE BACKGROUND IMAGE
*/

#mask {
  background-color:rgba(0, 0, 0, 0);
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  overflow: hidden;
  position: fixed;
}
#mask2 {
  background: -moz-linear-gradient(top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.38) 46%, rgba(0,0,0,0) 70%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(0,0,0,0.85) 0%,rgba(0,0,0,0.38) 46%,rgba(0,0,0,0) 70%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(0,0,0,0.85) 0%,rgba(0,0,0,0.38) 46%,rgba(0,0,0,0) 70%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  overflow: hidden;
  position: fixed;
}
#mask3 {
  background: -moz-linear-gradient(top, rgba(0,0,0,0) 62%, rgba(0,0,0,0.29) 83%, rgba(0,0,0,0.53) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(0,0,0,0) 62%,rgba(0,0,0,0.29) 83%,rgba(0,0,0,0.53) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(0,0,0,0) 62%,rgba(0,0,0,0.29) 83%,rgba(0,0,0,0.53) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#87000000',GradientType=0 ); /* IE6-9 */
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  overflow: hidden;
  position: fixed;
}

/*
* CLOCK TEXT
*/

#clock {
  position: relative;
  overflow-x: hidden;
  width: 30%;
  left: 5%;
  top: 100px;
  background-color:rgba(0, 0, 0, 0);
  font-family: Poppins, sans-serif;
  box-sizing: border-box;
  font-size: 90px;
  font-weight: 200;
  height: 100px;
  width: 270px;
  border-radius: 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  -webkit-box-pack: justify;
  justify-content: space-between;
}
#clock:hover {
  background-color:rgba(0, 0, 0, 0.1);
}


#pass{
  border-radius: 15px;
  padding: 10px;
  border: 1px solid #ccc;
  width: 250px;
}
#login{
  border-radius: 15px;
  padding: 5px;
  border: 1px solid #ccc;
  width: 30px;
}

#divlogin {
  position: relative;
  overflow-x: hidden;
  width: 30%;
  left: 5%;
  bottom: 100px;
  background-color:rgba(0, 0, 0, 0);
  font-family: Poppins, sans-serif;
  box-sizing: border-box;
  font-size: 90px;
  font-weight: 200;
  text-align: center;
  -webkit-box-pack: justify;
  justify-content: space-between;
}
/*
* NEWS AND INFO
*/

#info {
  color: white;
  position: relative;
  font-family: 'abril_fatfaceregular';
  font-size: 23px;
  overflow-x: hidden;
  /* background-image: linear-gradient(140deg, rgb(57, 45, 209) 0%, rgb(142, 41, 149) 100%); */
  padding: 10px 15px;
  border-radius: 6px;
  font-family: Poppins, sans-serif;
  font-size: 20px;
  font-weight: 200;
  line-height: 1.5em;
  min-height: 250px;
  width: 50%;
  left: 5%;
  top: 100px;
}

#info h1 {
  color: white;
  font-family: 'abril_fatfaceregular';
  font-size: 4em;
}

.Containerboxlogoimg {
  height: 16px;
  width: 16px;
}