body {
  font-family: 'Roboto', sans-serif;
}

#card-container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  height: 55vh;
  width: calc((100% / 3) - 16px);
  margin: 8px;
  border-radius: 3px;
  transition: all 200ms ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.card-actions {
  margin: 8px;
  padding: 16px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#load-more {
  width: calc((100% / 3) - 8px);
  padding: 16px;
  background-color: white;
  border: none;
  cursor: pointer;
  transition: all 200ms ease-in-out;
  border-radius: 3px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15rem;
}

#load-more:not([disabled]):hover {
  box-shadow: 0 1px 9px rgba(0, 0, 0, 0.2);
}

#load-more[disabled] {
  background-color: #eaeaea !important;
}

body {
    background-color: #000;
    padding: 20px;
    padding-bottom: 10px;
    font-family: Arial;
    /* height: 100%; */
    /* width:  100%; */
  
    font-family: Arial;
    background: url(https://i.imgur.com/T0mBFg2.png);
    background-size: 300px 200px;
    background-repeat: repeat;
    background-color: #000;
    animation:snowfall 5s linear forwards infinite; 
    -webkit-animation:snowfall 5s linear forwards infinite;  
  
  }



#background-wrap {
    bottom: 0;
	left: 0;
	padding-top: 15px;
	position: fixed;
	right: 0;
	top: 0;
}


.logo-container {
	margin-bottom: 1%;
	position: absolute;
	width: 100%;
	height: 4rem;
	display: grid;
	place-items: center;
  }

  .logoSize {
	width: 180px;
	height: 150px;
  }


  .logoSizeDay {
    width: 200px;
    height: 200px;
    }

    
  .an{
	animation-name: flo;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	position: relative;
	bottom: 80px;
  
  }


  footer {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 4rem;
	display: grid;
	place-items: center;
  }

/* KEYFRAMES */

@-webkit-keyframes animateCloud {
    0% {
        margin-left: -1000px;
    }
    100% {
        margin-left: 100%;
    }
}

@-moz-keyframes animateCloud {
    0% {
        margin-left: -1000px;
    }
    100% {
        margin-left: 100%;
    }
}

@keyframes animateCloud {
    0% {
        margin-left: -1000px;
    }
    100% {
        margin-left: 100%;
    }
}

/* ANIMATIONS */

.x1 {
	-webkit-animation: animateCloud 35s linear infinite;
	-moz-animation: animateCloud 35s linear infinite;
	animation: animateCloud 35s linear infinite;
	
	-webkit-transform: scale(0.65);
	-moz-transform: scale(0.65);
	transform: scale(0.65);
}

.x2 {
	-webkit-animation: animateCloud 20s linear infinite;
	-moz-animation: animateCloud 20s linear infinite;
	animation: animateCloud 20s linear infinite;
	
	-webkit-transform: scale(0.3);
	-moz-transform: scale(0.3);
	transform: scale(0.3);
}

.x3 {
	-webkit-animation: animateCloud 30s linear infinite;
	-moz-animation: animateCloud 30s linear infinite;
	animation: animateCloud 30s linear infinite;
	
	-webkit-transform: scale(0.5);
	-moz-transform: scale(0.5);
	transform: scale(0.5);
}

.x4 {
	-webkit-animation: animateCloud 18s linear infinite;
	-moz-animation: animateCloud 18s linear infinite;
	animation: animateCloud 18s linear infinite;
	
	-webkit-transform: scale(0.4);
	-moz-transform: scale(0.4);
	transform: scale(0.4);
	z-index: -1;
	position:relative
}

.x5 {
	-webkit-animation: animateCloud 25s linear infinite;
	-moz-animation: animateCloud 25s linear infinite;
	animation: animateCloud 25s linear infinite;
	
	-webkit-transform: scale(0.55);
	-moz-transform: scale(0.55);
	transform: scale(0.55);
}

/* OBJECTS */

.cloud {
	background: #fff;
	background: -moz-linear-gradient(top,  #fff 5%, #f1f1f1 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(5%,#fff), color-stop(100%,#f1f1f1));
	background: -webkit-linear-gradient(top,  #fff 5%,#f1f1f1 100%);
	background: -o-linear-gradient(top,  #fff 5%,#f1f1f1 100%);
	background: -ms-linear-gradient(top,  #fff 5%,#f1f1f1 100%);
	background: linear-gradient(top,  #fff 5%,#f1f1f1 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#f1f1f1',GradientType=0 );
	
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	border-radius: 100px;
	
	-webkit-box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);
	box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);

	height: 120px;
	position: relative;
	width: 350px;
}

.cloud:after, .cloud:before {
    background: #fff;
	content: '';
	position: absolute;
	z-indeX: -1;
}

.cloud:after {
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	border-radius: 100px;

	height: 100px;
	left: 50px;
	top: -50px;
	width: 100px;
}

.cloud:before {
	-webkit-border-radius: 200px;
	-moz-border-radius: 200px;
	border-radius: 200px;

	width: 180px;
	height: 180px;
	right: 50px;
	top: -90px;
}



* {
  box-sizing: border-box;
}


a {
  text-decoration: none !important;
}

/* Center website */
.main {
  max-width: 90%;
  margin: auto;
}

h1 {
  font-size: 50px;
  word-break: break-all;
}

.row {
  margin: 8px -16px;
}

/* Add padding BETWEEN each column */
.row,
.row > .column {
  padding: 8px;
}

/* Create four equal columns that floats next to each other */
.column {
  float: left;
  width: 20%;
}

/* Clear floats after rows */ 
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Content */
.content {
  /* background-color: white; */
  /* padding: 10px; */
  /* display: flex; */
  justify-content: center;
  text-align: center;

}

/* Responsive layout - makes a two columncolumn-layout instead of four columns */
@media screen and (max-width: 900px) {
  .column {
    width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}



@keyframes snowfall{
  0%{
    background-position: 0 0;
  }
  20%{
    background-position: 20px 20px;
  }
  40%{
    background-position: 40px 40px;
  }
  60%{
    background-position: 60px 60px;
  }
  80%{
    background-position: 80px 80px;
  }
  100%{
    background-position: 100px 100px;
  }
}
@-webkit-keyframes snowfall{
  0%{
    background-position: 0 0;
  }
  20%{
    background-position: 20px 20px;
  }
  40%{
    background-position: 40px 40px;
  }
  60%{
    background-position: 60px 60px;
  }
  80%{
    background-position: 80px 80px;
  }
  100%{
    background-position: 100px 100px;
  }
}

.logoSize {
  width: 180px;
  height: 150px;
}
 
.container1 {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
}
.logo-container {
  /* margin-bottom: 1%; */
  /* margin: 0 ; */

  /* padding: 15px; */
  /* display: flex; */
  /* align-items: center; */
  /* justify-content: center; */
  /* height: 100%; */

	/* position: absolute; */
	/* width: 100%; */
	display: grid;
	place-items: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left:0;
  right:0;
  margin: auto 0;
}
  
.an{
  animation-name: flo;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  position: relative;
  bottom: 80px;
  /* left:20px; */

}
@keyframes flo{
  50%{
    transform: translateY(30px);
  }
}






.footer {
  /* height: 100%;
  position: absolute;
  bottom: 0;
  width: 100%;
  margin-bottom: 1%;
	display: grid;
	place-items: center; */


  display: grid;
	place-items: center;
  position: absolute;
  /* top: 0; */
  bottom: 0;
  left:0;
  right:0;
  margin: auto 0;


}