* {box-sizing:border-box;}
html {width:100%; overflow-y: scroll; box-sizing:border-box; /*background-color:rgba(245, 245, 245, 1);*/ font-family: 'Lato', sans-serif;
-webkit-animation: fader 2s alternate 1 ease-in-out; /* Safari and Chrome */
-moz-animation: fader 2s alternate 1 ease-in-out; /* Mozilla */
-ms-animation: fader 2s alternate 1 ease-in-out; /* IE */
animation: fader 2s alternate 1 ease-in-out;
}

	@keyframes fader {
		0% {opacity: 0.07; filter: alpha(opacity=07); animation-delay:5s;}
		100%{opacity: 0.15; filter: alpha(opacity=10); }}
	@-webkit-keyframes fader /* Safari and Chrome */{
		0% {opacity: 0.07; filter: alpha(opacity=07); animation-delay:5s;}
		100%{opacity: 1.0; filter: alpha(opacity=10); }}
	@-moz-keyframes fader /* Mozilla */{
		0% {opacity: 0.07; filter: alpha(opacity=07); animation-delay:5x; }
		100%{opacity: 1.0; filter: alpha(opacity=10); }}
	@-ms-keyframes fader /* Mozilla */{
		0% {opacity: 0.07; filter: alpha(opacity=07); animation-delay:5s;}
		100%{opacity: 1.0; filter: alpha(opacity=10); }}


body {width:100%; word-spacing:3px; padding-bottom:100px; background-color:rgba(255,255,255,1);}


	.banner-width-color {position:fixed; z-index:500; top:0px; left:0px; width:100%; min-width:1100px; height:160px; background:rgba(255,0,0,0.93); }
	.banner {width:1200px; margin:0px auto; padding:10px 0 0 0; box-sizing:border-box; font-size:80px; z-index:500; color:white;
		display:flex; flex-direction:row; justify-content:space-between; align-items:center; }

		.maga-midterm {font-size:30px; color:white; font-family:'Lato', cursive; text-decoration:none; }
			.maga-midterm:hover {opacity:0.8;}
			.maga-midterm h1 {font-size:20px; text-align:center;}

				.mm-maga {letter-spacing:11px; padding-left:11px;}
				.mm-midterm {}
				.mm-year {letter-spacing:15px; padding-left:12px;}

		h1.maga-century {font-size:60px;}

		.donation {width:55px; height:55px; border-radius:50%; margin-top:-3px; display:flex; justify-content:center; align-items:center;
			-webkit-animation: att 4s normal infinite ease-in; /* Safari and Chrome */
			-moz-animation: att 4s normal infinite ease-in; /* Mozilla */
			-ms-animation: att 4s normal infinite ease-in; /* IE */
			animation: att 4s normal infinite ease-in;
			}

			@keyframes att {
				0% {background-color:rgba(255,255,255,1.0);}
				60%{background-color:rgba(255,255,255,1.0);}
				80%{background-color:rgba(255,255,0,1.0);}
				100% {background-color:rgba(255,255,255,1.0);}}

			.donation img {width:55px; height:55px;}

			.donation-overlay {display:none; position:absolute; margin-top:8px; width:350px; background-color:rgba(255,255,255,0.95); border-radius:10px; font-size:18px; color:darkgray; text-align:center; box-sizing:border-box; padding:20px 15px; line-height:26px;
				flex-flow:column; justify-content:center; align-items:center; }

				.donation-overlay p {font-size:40px; color:red; font-weight:bold; margin-bottom:10px;}

				.donation:hover .donation-overlay {display:flex; cursor:pointer;}

			.donation input[type=image] {display:flex; justify-content:center; align-items:center; width:40px; height:40px;}


			.countdown {width:250px; color:rgba(255,0,0,0.8); padding:5px 10px; margin-right:25px;
				display:flex; flex-flow:nowrap row; justify-content:center; align-items:center; font-size:20px; font-family: 'Lato', cursive; font-weight: 800;}

				.time {width:60px; height:60px; border:3px solid white; border-radius:50%; margin:0 5px; background-color:white;
					display:flex; flex-flow:nowrap row; justify-content:space-around; align-items:center; }

				.days-hours-seconds {margin-left:5px; font-size:30px;
					display:flex; flex-flow:nowrap row; justify-content:space-between; align-items:center; }

		.banner-img-last {height:60px; opacity:1.0; border-radius:7px; }
			.banner-img-last:hover {opacity:0.8;}

			h3.onerace {width:auto;}


		nav {width:100%; margin:-2px auto 0 auto; height:72px; font-weight:bolder; box-sizing:border-box;
			display:flex; flex-flow:nowrap row; justify-content:space-around; align-items:center;}

			.nav-width {width:1200px; margin:0 auto; display:flex; flex-flow:nowrap row; justify-content:space-around; align-items:center;}

			a.navigation {padding:5px 0 7px 0; color:rgba(255,255,255,1); text-decoration:none; opacity:0.6;
				-webkit-transition: all 0.5s ease-in;
				-moz-transition: all 0.5s ease-in;
				-o-transition: all 0.5s ease-in;
				-ms-transition: all 0.5s ease-in;
				transition: all 0.5s ease-in;
			}
				.navigation:hover {padding:5px 0 7px 0; cursor:pointer; border-radius:5px 5px 0 0; opacity:1;
					-webkit-transition: all 0.0s ease-in;
					-moz-transition: all 0.0s ease-in;
					-o-transition: all 0.0s ease-in;
					-ms-transition: all 0.0s ease-in;
					transition: all 0.0s ease-in;
				}
				.navigation img {height:37px; width:auto; }
				.rotate {transform: rotate(-90deg);}

			.pos-top {position:relative; top:-140px;}
			.pos-top-top {position:relative; top:-1000px;}


	.page {width:100%; margin-top:75px; padding-bottom:100px;
		display:flex; flex-flow:nowrap column; justify-content:space-between; align-items:center;}




	.highlight {width:100%; height:150px; margin:210px 0 0 0; font-size:30px; color:white; text-decoration:none; box-sizing:border-box;
		display:flex; flex-flow:nowrap row; justify-content:space-around; align-items:center;}

		.highlight-text {display:flex; flex-flow:nowrap column; justify-content:space-around; align-items:center;}
		.image-wide {width:100px; height:auto; }
		.image-tall {width:auto; height:50px;}
		.image-big {width:auto; height:90%;}
		.highlight h2 {line-height:20px;}
		.highlight h3 {font-size:16px; line-height:20px;}
		.highlight h4 {font-size:15px;}

		.pin {height:140px; border-radius:7px; padding:15px; text-decoration:none;
			display:flex; flex-flow:nowrap column; justify-content:center; align-items:center; }
			.pin p {font-size:14px; margin-top:10px;}

		.frame {border:2px solid lightgray; color:gray;}
			.frame:hover {border:2px solid gray;}

		.color1 {background-color:blue; color:white;}
		.color2 {background-color:orange; color:white;}
		.wide {width:1200px;}
		.narrow {width:60%; margin:0 auto;}


/* SECTION */

		.full-width {width:100%; background-color:rgba(235,240,240,1); margin-bottom:100px; padding:25px 0;}

			.columns-in-a-row,
			.section-space,
			.new-section {width:1200px; margin:0 auto; }

				.new-section {width:1200px; height:100px; color:rgba(255,0,0,1.0); font-size:45px; text-align:center; border-radius:30px 30px 0 0; box-sizing:border-box;
					display:flex; flex-flow:nowrap row; justify-content:space-between; align-items:center;}

					.new-section-left,
					.new-section-right,
					.new-section h2 {height:auto;}

					.new-section-left,
					.new-section-right { width:300px; opacity:0.3; display:flex; flex-flow:column; align-items:center; color:gray; }


							.platform-logos-row {width:260px;
								display:flex; flex-flow:nowrap row; justify-content:space-around; align-items:flex-end; }

								.platform-flags {width:45px; height:auto; opacity:0.7; margin-right:10px; margin-bottom:5px; }
								.platform-logo {width:45px; height:auto;margin-right:5px; filter:grayscale(0.7); }
									.platform-logo:hover {opacity:1;}

								.platform-category {font-size:25px;}


						.section-space {height:250px; overflow:hidden; color:gray; padding:0px 0 0px 0; box-sizing:border-box;
							display:flex; flex-flow:nowrap row; justify-content:center; align-items:center; }

							.av-books,
							.av-docs {overflow:hidden; display:flex; flex-flow:nowrap column; justify-content:center; align-items:center;}

								.av-books {height:375px; width:180px; }
								.av-docs {height:300px; width:225px;}

									.books-cover {width:150px; height:225px;  margin:5px 0 2px 0;}
									.docs-cover {width:210px; height:157px; margin:5px 0 2px 0;}

										.books-data,
										.docs-data {position:absolute; opacity:0;}
											.books-data {margin-left:-75px;}
											.docs-data {margin-left:-75px;}

											.docs-play {position:absolute; width:50px; height:auto; margin:60px 0 0 -130px;}

										.books-cover:hover + .books-data {opacity:1;}
										.docs-cover:hover + .docs-data {opacity:1;}

										.text-top,
										.text-bottom,
										.text-year {text-align:center; padding:5px 0px; color:#555; width:300px;
											display:flex; justify-content:center; align-items:center;}

											.text-top {margin-top:-255px;}
											.text-bottom {margin-top:225px;}
											.text-year {position:relative; margin:-70px 0 0 75px; width:150px; height:25px; padding:0px; background-color:rgba(255,255,255,0.5); font-weight:bolder; color:black;}



/* LATEST ACTIVITY */
		.this-month {background-color:blue; padding:3px; box-sizing:border-box;}
		.this-week {border:3px solid orange; box-sizing:border-box;}

/* PROFILES */

		.columns-in-a-row {display:flex; flex-flow:nowrap row; justify-content:center; align-items:flex-start; }

			.profiles-column {width:49%; margin-top:0px; padding:10px 0 0 0;
				display:flex; flex-flow:wrap; align-content:flex-start; }

				.profiles-column:first-child {border-right:10px solid rgba(255,0,0,1);}

				.profiles-column:nth-child(2) {border-left:10px solid rgba(255,0,0,1); margin-left:-10px;}

				.column-flag {height:70px; width:auto; margin:15px 0; opacity:0.7;}
				.column-headline {width:40%; height:120px; font-size:20px; color:rgba(150,150,150,1.0); display:flex; flex-flow:nowrap row; justify-content:center; align-items:center;}


					.photo-name-links {height:140px; width:140px; padding-left:10px; box-sizing:border-box;
						display:flex; flex-flow:nowrap row; align-items:flex-start; }

						.photo-name-links:hover > .links-name {display:flex; background-color:rgba(255,255,255,0.55); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);}


						.photo,
						.logo {width:130px; height:130px; border:none; cursor:pointer; }

						.photo {border-radius:7px; }
							.search-word {position:absolute; width:300px; margin-left:0px; text-align:left; opacity:0;}
						.logo {border-radius:7px; }

						.links-name {position:absolute; margin-left:-10px; margin-top:-10px; width:150px; height:150px; border-radius:10px;
							box-sizing:border-box; background-color:rgba(255,255,255,0.0);
							display:none; flex-flow:nowrap column; justify-content:space-around; align-content:flex-start;}

							.links-details {opacity:1; transition:all 0.2s linear; height:75px;
								display:flex; flex-flow:wrap; justify-content:space-around; align-items:flex-start;}

//								.columns-in-a-row:hover .links {opacity:1; margin-top:0px; transition:all 0.17s linear; }

								.links-details a {width:50; box-sizing:border-box;
									display:flex; flex-flow:wrap; justify-content:center; align-items:center; }

									.links-details a > img {height:30px; margin:0px 5px; width:auto; filter:grayscale(0.4); }

//										.links-details a > img:hover {background-color:rgba(200,200,200,1); border-radius:10px; }


//									.photo-name-links:hover a > img {filter:grayscale(1.0); transition:all 0s ease-in; opacity:1;}
//										.links a > img:hover {filter:grayscale(0.3); transition:all 0s ease-in; opacity:1;}

								.names {height:75px; width:150px; padding:0 3px; color:rgba(75,75,75,1.0); text-transform:uppercase;
								overflow:hidden; font-size:14px; font-weight:900; line-height:20px;
							display:flex; justify-content:center; align-items:center; text-align:center; }




	.footer {width:400px; height:80px; font-size:40px; color:white; background-color:rgba(220,220,220,1); border-radius:20px; margin:0 auto;
		display:flex; flex-flow:nowrap row; justify-content:space-around; align-items:center;}

		.footer img {height:70px; width:auto; margin:0 10px; padding:10px;}
		.footer img:hover {background-color:white; border-radius:50%; padding:10px;}

		.connect {width:100%; text-align:center; font-size:50px; margin:0px 0 25px 0; color:rgba(75,75,75,1.0);}