body {
  padding: 0;
  margin: 0;
  color: #5da9c0;
}
body * {
  box-sizing: border-box;
}
.icon {
  position: absolute;
  top: 70%;
  left: 70%;
  transform: translateX(-50%) translateY(-50%);
}
.hamburger {
  content: ' ';
  position: relative;
  width: 20px;
  border: 2px solid #fff;
  border-radius: 5px;
  transition: all 0.333333333333333s ease;
}
.hamburger:after,
.hamburger:before {
  content: ' ';
  position: absolute;
  left: 50%;
  width: 100%;
  border: 2px solid #fff;
  border-radius: 5px;
  transform: translateX(-50%);
  transition-property: top, bottom, transform;
  transition-duration: 1s, 1s, 0.25s;
}
.hamburger:after {
  top: -8px;
}
.hamburger:before {
  bottom: -8px;
}
.menu {
  pointer-events: none;
}
.menu--circle {
  position: absolute;
  z-index: 13;
  width: 243.33333333333334px;
  height: 243.33333333333334px;
  overflow: hidden;
  padding: 0!important;
  margin: 0!important;
  border: none;
}
.menu__active {
  position: relative;
}
.menu__toggle {
  z-index: 11;
  position: absolute;
  top: -100px;
  left: -100px;
  width: 200px;
  height: 200px;
  background-color: #5da9c0;
  border-radius: 50%;
  transition: transform 1.3s;
  cursor: pointer;
  pointer-events: auto;
}
.menu__listings {
  z-index: 10;
  position: absolute;
  top: -200px;
  left: -200px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  transform: scale(0.1) rotate(150deg);
  transition: transform 1s;
}
.menu__arrow {
  visibility: hidden;
  position: absolute;
}
.menu__arrow input[type="radio"] {
  position: fixed;
  top: -99999px;
  left: -99999px;
}
.menu__arrow ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.menu__arrow--top {
  top: 0.5em;
  left: 220px;
}
.menu__arrow--top .arrow {
  transform: rotate(-45deg);
}
.menu__arrow--left {
  top: 220px;
  left: 0.5em;
}
.menu__arrow--left .arrow {
  transform: rotate(-135deg);
}
.arrow {
  width: 20px;
  height: 20px;
  border-right: 6.666666666666667px solid #5da9c0;
  border-top: 6.666666666666667px solid #5da9c0;
  border-radius: 3px;
  transition: border-color 0.3s;
  cursor: pointer;
  pointer-events: auto;
}
.arrow:hover {
  border-color: #7ec3a5;
  transition: border-color 0.3s;
}
.circle {
  position: relative;
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  background-color: #5da9c0;
  border-radius: 50%;
  transform: rotate(108deg);
  overflow: hidden;
  list-style: none;
}
.circle li {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 50%;
  transform-origin: 0 100%;
}
.circle li .placeholder {
  position: absolute;
  left: -100%;
  padding-top: 1.5em;
  width: 200%;
  height: 200%;
  text-align: center;
  transform: skewY(54deg) rotate(18deg);
}
.circle li .placeholder .upside {
  transform: rotate(180deg);
}
.circle li .placeholder a {
  text-decoration: none;
  pointer-events: auto;
}
.circle li .placeholder button {
  pointer-events: auto;
}
.circle li .placeholder .button {
  font-size: 2.3em;
  background-color: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
}
.circle li:nth-child(1) {
  transform: rotate(0deg) skewY(-54deg);
  background-color: #5da9c0;
}
.circle li:nth-child(2) {
  transform: rotate(36deg) skewY(-54deg);
  background-color: #5da9c0;
}
.circle li:nth-child(3) {
  transform: rotate(72deg) skewY(-54deg);
  background-color: #5da9c0;
}
.circle li:nth-child(4) {
  transform: rotate(108deg) skewY(-54deg);
  background-color: #5da9c0;
}
.circle li:nth-child(5) {
  transform: rotate(144deg) skewY(-54deg);
  background-color: #5da9c0;
}
.circle li:nth-child(6) {
  transform: rotate(180deg) skewY(-54deg);
  background-color: #5da9c0;
}
.circle li:nth-child(7) {
  transform: rotate(216deg) skewY(-54deg);
  background-color: #5da9c0;
}
.circle li:nth-child(8) {
  transform: rotate(252deg) skewY(-54deg);
  background-color: #5da9c0;
}
.circle li:nth-child(9) {
  transform: rotate(288deg) skewY(-54deg);
  background-color: #5da9c0;
}
.circle li:nth-child(10) {
  transform: rotate(324deg) skewY(-54deg);
  background-color: #5da9c0;
}
#menu__active {
  position: fixed;
  top: -99999px;
  left: -99999px;
}
#menu__active:checked ~ label .menu__listings {
  transform: rotate(10deg) scale(1);
  transition: transform 1s;
}
#menu__active:checked ~ label .menu__toggle {
  background-color: #fff;
  transition: all 1s;
}
#menu__active:checked ~ label .hamburger {
  border-color: transparent;
  transition: border-color 0.333333333333333s;
}
#menu__active:checked ~ label .hamburger:after {
  top: -2px;
  border-color: #5da9c0;
  transform: translateX(-50%) rotate(45deg);
  transition-property: top, transform;
  transition-duration: 0.25s, 1s;
}
#menu__active:checked ~ label .hamburger:before {
  bottom: -2px;
  border-color: #5da9c0;
  transform: translateX(-50%) rotate(-45deg);
  transition-property: bottom, transform;
  transition-duration: 0.25s, 1s;
}
#menu__active:checked ~ label .button:hover {
  color: #7ec3a5;
}
#menu__active:checked ~ label .menu__arrow {
  visibility: visible;
  transition: all 1s 1.111111111111111s;
}
#menu__active:checked ~ label .menu__arrow--top label {
  display: none;
}
#menu__active:checked ~ label .menu__arrow--top label[for="degree--up-0"] {
  display: block;
}
#menu__active:checked ~ label #degree--up-0:checked ~ .menu__listings {
  transform: rotate(116deg);
}
#menu__active:checked ~ label #degree--up-0:checked ~ .menu__arrow--top label {
  display: none;
}
#menu__active:checked ~ label #degree--up-0:checked ~ .menu__arrow--top label[for="degree--up-1"] {
  display: block;
}
#menu__active:checked ~ label #degree--up-1:checked ~ .menu__listings {
  transform: rotate(224deg);
}
#menu__active:checked ~ label #degree--up-1:checked ~ .menu__listings ~ .menu__arrow--top label {
  display: none;
}
#menu__active:checked ~ label #degree--up-1:checked ~ .menu__listings ~ .menu__arrow--top label[for="degree--up-2"] {
  display: block;
}

.fadein{
	margin-bottom: 150px;
	text-align: center;
}

.fadein span {
	position: relative;
	margin: 40px auto 100px auto;
	padding: auto;
	text-align: center;
	display: block;
}

.fadein span p.ani{
	margin-bottom:50px;
	font-size: 1.5em;
	text-align: center;
	display: block;
	width: 100%;
}

span.about_emblem p{
	width: 70%;
	margin: 0 auto;
	text-align: justify;
}

span.about_emblem h4{
	font-size: 1.5em;
	margin: 40px auto 0 auto;
	text-align: center;
	width: 100%;
	display: block;
}
#spacer {text-align: center; left: 0; top: 0;}
#f1, #f1, #f2, #f3, #f4, #f5, #f6, #f61, #f62, #logo {-webkit-animation-delay: 0s; text-align: center; background-color: #fff; position: absolute; left: 0; top: 0;}

.fadein img#f1, .fadein p#f1		{-webkit-animation: fadeF1 40s infinite; animation: fadeF1 40s infinite;}
@-webkit-keyframes fadeF1		{ 0% {opacity: 0;} 15% {opacity: 0;} 25% {opacity: 1;} 39% {opacity: 1;} 42% {opacity: 0;} 100% {opacity: 0;} }
@keyframes fadeF1				{ 0% {opacity: 0;} 15% {opacity: 0;} 25% {opacity: 1;} 39% {opacity: 1;} 42% {opacity: 0;} 100% {opacity: 0;} }

.fadein img#f2, .fadein p#f2		{-webkit-animation: fadeF2 40s infinite; animation: fadeF2 40s infinite;}
@-webkit-keyframes fadeF2		{ 0% {opacity: 0;} 29% {opacity: 0;} 39% {opacity: 1;} 53% {opacity: 1;} 56% {opacity: 0;} 100% {opacity: 0;} }
@keyframes fadeF2				{ 0% {opacity: 0;} 29% {opacity: 0;} 39% {opacity: 1;} 53% {opacity: 1;} 56% {opacity: 0;} 100% {opacity: 0;} }

.fadein img#f3, .fadein p#f3		{-webkit-animation: fadeF3 40s infinite; animation: fadeF3 40s infinite;}
@-webkit-keyframes fadeF3		{ 0% {opacity: 0;} 43% {opacity: 0;} 53% {opacity: 1;} 67% {opacity: 1;} 70% {opacity: 0;} 100% {opacity: 0;} }
@keyframes fadeF3				{ 0% {opacity: 0;} 43% {opacity: 0;} 53% {opacity: 1;} 67% {opacity: 1;} 70% {opacity: 0;} 100% {opacity: 0;} }

.fadein img#f4, .fadein p#f4		{-webkit-animation: fadeF4 40s infinite; animation: fadeF4 40s infinite;}
@-webkit-keyframes fadeF4		{ 0% {opacity: 0;} 57% {opacity: 0;} 67% {opacity: 1;} 81% {opacity: 1;} 84% {opacity: 0;} 100% {opacity: 0;} }
@keyframes fadeF4				{ 0% {opacity: 0;} 57% {opacity: 0;} 67% {opacity: 1;} 81% {opacity: 1;} 84% {opacity: 0;} 100% {opacity: 0;} }

.fadein img#f5, .fadein p#f5		{-webkit-animation: fadeF5 40s infinite; animation: fadeF5 40s infinite;}
@-webkit-keyframes fadeF5		{ 0% {opacity: 0;} 71% {opacity: 0;} 81% {opacity: 1;} 95% {opacity: 1;} 98% {opacity: 0;} 100% {opacity: 0;} }
@keyframes fadeF5				{ 0% {opacity: 0;} 71% {opacity: 0;} 81% {opacity: 1;} 95% {opacity: 1;} 98% {opacity: 0;} 100% {opacity: 0;} }

.fadein img#f6					{-webkit-animation: fadeF6Img 40s infinite; animation: fadeF6Img 40s infinite;}
@-webkit-keyframes fadeF6Img	{ 0% {opacity: 1;} 10% {opacity: 1;} 15% {opacity: 0;} 81% {opacity: 0;} 91% {opacity: 1;} 100% {opacity: 1;} }
@keyframes fadeF6Img			{ 0% {opacity: 1;} 10% {opacity: 1;} 15% {opacity: 0;} 81% {opacity: 0;} 91% {opacity: 1;} 100% {opacity: 1;} }

.fadein p#f61					{-webkit-animation: fadeF6P1 40s infinite; animation: fadeF6P1 40s infinite;}
@-webkit-keyframes fadeF6P1		{ 0% {opacity: 1;} 10% {opacity: 1;} 15% {opacity: 0;} 81% {opacity: 0;} 86% {opacity: 1;} 100% {opacity: 1;} }
@keyframes fadeF6P1				{ 0% {opacity: 1;} 10% {opacity: 1;} 15% {opacity: 0;} 81% {opacity: 0;} 86% {opacity: 1;} 100% {opacity: 1;} }

.fadein p#f62					{-webkit-animation: fadeF6P2 40s infinite; animation: fadeF6P2 40s infinite;}
@-webkit-keyframes fadeF6P2		{ 0% {opacity: 1;} 10% {opacity: 1;} 15% {opacity: 0;} 91% {opacity: 0;} 100% {opacity: 1;} }
@keyframes fadeF6P2				{ 0% {opacity: 1;} 10% {opacity: 1;} 15% {opacity: 0;} 91% {opacity: 0;} 100% {opacity: 1;} }

.fadein img#logo, .fadein p#logo	{-webkit-animation: fadeF0 40s infinite; animation: fadeF0 40s infinite;}
@-webkit-keyframes fadeF0		{ 0% {opacity: 1;} 100% {opacity: 1;} }
@keyframes fadeF0				{ 0% {opacity: 1;} 100% {opacity: 1;} }

#flogo { width: 150px;}

.box {
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 300px;
  height: 200px;
}

.box img {
  position: absolute;
  left: 0;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  width: 300px;
  height: 200px;
}

.box .overbox {
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  z-index: 100;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  opacity: 1;
  width: 300px;
  height: 200px;
  padding-top: 150px;
  text-align: left;
}

.box:hover .overbox { 
  opacity: 1; 
  background-color: rgba(93, 169, 192, 0.7);}

.box .overtext {
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  transform: translateX(20px);
  -webkit-transform: translateX(20px);
}

.box .title {
  font-size: 1.4em;
  text-transform: uppercase;
  opacity: 1;
  font-weight: 400;
}

.box .tagline {
  font-size: 0.8em;
  opacity: 0;
  transition-delay: 0.2s;
  transition-duration: 0.2s;
}

.box:hover .tagline,
.box:focus .tagline {
  opacity: 1;
  transform: translateX(20px);
  -webkit-transform: translateX(20px);
}