@charset "UTF-8";
/* CSS Document */

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

body, html {
	margin:0px;
	padding:0px;
	height:100%;
	font-family: "Titillium Web", Helvetica, Aria, sans-serif;
	
	
	position: relative;
	
	background: linear-gradient(327deg, #02acd4, #027db9, #8397d2);
	background-size: 600% 600%;
	
	-webkit-animation: AnimationName 20s ease infinite;
	-moz-animation: AnimationName 20s ease infinite;
	animation: AnimationName 20s ease infinite;
}

a { text-decoration:none;}

@-webkit-keyframes AnimationName {
    0%{background-position:5% 0%}
    50%{background-position:96% 100%}
    100%{background-position:5% 0%}
}
@-moz-keyframes AnimationName {
    0%{background-position:5% 0%}
    50%{background-position:96% 100%}
    100%{background-position:5% 0%}
}
@keyframes AnimationName { 
    0%{background-position:5% 0%}
    50%{background-position:96% 100%}
    100%{background-position:5% 0%}
}

h3 {
	font-size: 3rem;
    text-shadow: 1px 1px #000000;
    color: #fff;
	font-weight:400;
	margin-bottom:20px;
	text-align:center;
	margin-top:0px;
}

.row {
	margin-left:15px;
	margin-right:15px;
}

.container .item {
	width:33%;
	display:inline-block;

}

.container a.item .box{
	width:95%;
	margin:0 auto;
	padding-top:20px;
	padding-bottom:20px;
	
	
	background-color:#28396a;
	color:#FFFFFF;
	border:3px solid #FFFFFF;
	
	-webkit-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    transition: all 1s ease-out;

	font-size:36px;
	text-align:center;
	
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	
}


.container a:hover.item .box{
	background-color:#000;
}
.container .item .box h2 {
	margin-bottom:0px;
	margin-top:0px;
	color:#ffcd00;
}

.footer {
	width:100%;
	text-align:center;
	color:#FFFFFF;
	font-size:18px;
	margin-bottom:0px;
}


@media (max-width: 767px) {
	h3 { font-size:25px; margin-top:40px; line-height:30px;}
	.row { margin:0px;}
	.container { position:relative; width:100%; margin-bottom:32px;  }
	.container .item .box img { width:50%; display:block; margin:0 auto;}
	.container .item { width:80%; display:block; margin:0 auto; margin-bottom:10px; }
	.container a.item .box{
	width:100%;
	margin:0 auto;
	padding-top:5px;
	padding-bottom:5px;
	
	border:2px solid #FFFFFF;
	

	font-size:26px;
	text-align:center;
	
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	
	}
	.container .item .box img.flag {
		margin-bottom:10px;
	}
}
@media (min-width: 768px) {
	.container {
	width:100%;
	max-width:1200px;
	position:absolute;
	
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	
}
	.container .item .box img {
	width:100%;
	max-width:250px;
	}
	.container .item .box img.flag {
	max-width:180px;
	display:block;
	margin: 0 auto;
	}
	.footer {
	position:absolute;
	bottom:0px;
	margin-bottom:20px;
	}
}