@import url(https://fonts.googleapis.com/css?family=Lato:400,700);

body
{
	font-family: Lato;
	margin: 0;
	width:100%;
	height:100%;
	color:#444;
	font-size:16px;
	background:url("img/background.jpg") no-repeat fixed 0 0 / cover;
	
}

a:link{transition: all 1s linear; outline:none;}

.jumbotron.vertical-center {
    margin-bottom: 0;
}
.vertical-center {
    -moz-box-align: center;
    -moz-box-pack: center;
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    width: 100%;
}
.jumbotron {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
}

.jumbotron h1{color:#fff; font-size:42px; text-shadow: 1px 1px 3px #000; margin-bottom:60px;}

.col-center{margin:0 auto; float:none;}

.circle-red{border: 5px solid #9e0e07; border-radius:400px; width:400px; height:400px; padding:5px; font-size:18px;}
.circle-lila{border: 5px solid #a82589; border-radius:400px; width:400px; height:400px; padding:5px; font-size:18px;}
.red, .red:hover, .red:focus{color:#9e0e07;}
.lila, .lila:hover, .lila:focus{color:#a82589;}
.circle-inner{background:rgba(255, 255, 255, 0.2); border-radius:372px; width:372px; height:372px; position:relative; margin:4px auto 4px auto; display:block; font-weight:700;}
.circle-inner:hover{background:rgba(255, 255, 255, 0.4); text-decoration:none;}
.circle-inner-content{padding:100px 40px;}
hr{border-color:#999; box-shadow: 0 0px 5px rgba(0, 0, 0, 0.5); width:80px; margin-top:40px; margin-bottom:40px;}
.enterbuttons{display:none; visibility:hidden;}

@media screen and (max-width:768px) {
	.container{width:100%; padding:0;}
	.pull-right, .pull-left{float:none!important; margin:15px auto!important;}
	.circle-red{border-radius:300px; width:300px; height:300px; font-size:16px;}
	.circle-lila{border-radius:300px; width:300px; height:300px; font-size:16px;}
	.circle-inner{border-radius:272px; width:272px; height:272px; font-size:16px;background:rgba(255, 255, 255, 0.6);}
	.circle-inner:hover{background:rgba(255, 255, 255, 0.2); text-decoration:none;}
	.circle-inner-content{padding:65px 30px;}
	hr{margin-top:20px; margin-bottom:20px;}
}

@media screen and (max-width:380px) {
	.container{width:100%; padding:0;}
	.circles{display:none; visibility:hidden;}
	.enterbuttons{display:block; visibility:visible;}
	.btn-danger{width:100%; background:#9e0e06; border:0; margin:5px 0; border-radius:0; transition:none; padding:15px 0; font-size:16px;}
}