@charset "utf-8";
/* CSS Document */
* {
  box-sizing: border-box;
}
* {
    background-color: #000000;
}
body {
  margin: 0;
  font-family: Arial;
}
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  vertical-align: middle;
}
img,
video {
    max-width: 100%;
    height: auto;
    width: 100%;
}


.header {
    text-align: center;
    /* [disabled]padding: 32px; */
    z-index: 10;
}

.row {
    display: flex;
    flex-wrap: wrap;
    padding-right: 1%;
    padding-left: 1%;
}
.row1 {
    display: flex;
    flex-wrap: wrap;
    padding-right: 30px;
    padding-left: 30px;
    width: 100%;
    height: 20%;
	 max-width: 100%;
}
.row1 video{
    /* [disabled]width: 100%; */
    height: 100px;
    max-width: 100%;
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 16.6%;
  max-width: 16.6%;
  padding: 0 0px;
}
.column1 {
  flex: 50%;
  max-width: 50%;
  padding: 0 0px;
}

.column img video {
  margin-top: 20px;
  vertical-align: middle;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media (max-width: 1200px) {
  .column {
    flex: 33%;
    max-width: 33%;
  }
	.column1 {
  flex: 100%;
  max-width: 100%;
  padding: 0 0px;
}
	.row1 {
    display: flex;
    flex-wrap: wrap;
    padding-right: 5px;
    padding-left: 5px;
    width: 100%;
    height: 15%;
	 max-width: 100%;
}
	.row1 video{
    width: 90%;
    height: 200px;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;

}
}
@media (max-width: 900px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
		.row1 {
    display: flex;
    flex-wrap: wrap;
    padding-right: 10px;
    padding-left: 10px;
    width: 100%;
    height: 25%;
	 max-width: 100%;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}