* {
	 box-sizing: border-box;
	 background-color: #2b2d30;
}
 h1 {
	 color: white;
	 font: 1.5em 'Dosis', sans-serif;
	 letter-spacing: 1px;
	 text-align: center;
}
 @media (min-width: 417px) and (max-width: 567px) {
	 h1 {
		 font-size: 2em;
	}
}
 @media (min-width: 568px) {
	 h1 {
		 font-size: 3em;
	}
}
 .container {
	 display: flex;
	 flex-wrap: wrap;
	 justify-content: center;
}
 .container .buttons {
	 display: flex;
	 flex-direction: column;
}
 .container a {
	 padding: 15px 20px;
	 font: 13px 'Montserrat', sans-serif;
	 font-weight: 700;
	 letter-spacing: 2px;
	 text-transform: uppercase;
	 text-decoration: none;
	 text-align: center;
	 margin: 1em;
}
 .container a:hover {
	 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.20), 0 6px 20px 0 rgba(0, 0, 0, 0.20);
}
 @media (min-width: 417px) and (max-width: 567px) {
	.container a {
		 font: 16px 'Montserrat', sans-serif;
	}
}
 @media (min-width: 568px) {
	.container a {
		 font: 20px 'Montserrat', sans-serif;
	}
}
 .button1 {
	 color: white;
	 background-color: #2d7eff;
	 border: 5px solid transparent;
	 transition: 0.2s ease;
	 border-radius: 50px;
}
 .button1:hover {
	 color: #2d7eff;
	 background-color: white;
	 transform: scale(1.1);
	 border: 5px solid #2d7eff;
}
 .button2 {
	 color: black;
	 background-color: #10ffb4;
	 transition: 0.2s ease-in-out;
	 border-left: 3px transparent solid;
	 border-right: 3px transparent solid;
}
 .button2:hover {
	 color: #10ffb4;
	 background-color: black;
	 border-left: #10ffb4 3px solid;
	 border-right: #10ffb4 3px solid;
}
 .button3 {
	 color: white;
	 background: linear-gradient(to right, #8041f2, #3095ed);
	 border-radius: 8px;
	 transition: 0.2s ease-in-out;
}
 .button3:hover {
	 border-radius: 30px;
}
 
iframe {
  display:block;
  margin-top: 20px;
  width:100%;
  height:1000px;
}


.column {

width: 80%;
  margin: auto;
}

.row {
width: 16.66%
}

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