Difference between revisions of "Team:Bielefeld-CeBiTec/CSS"

Revision as of 16:26, 21 September 2018 (view source) V kraemer (Talk | contribs) ← Older edit		Latest revision as of 18:31, 17 October 2018 (view source) V kraemer (Talk | contribs)
(87 intermediate revisions by the same user not shown)
Line 1:		Line 1:
−
	/* HQ CSS*/		/* HQ CSS*/
	.firstHeading {		.firstHeading {
−	display: none;	+	display: none;
−	}	+	}
−		+
−	.mw-content-text {	+	.mw-content-text {
−	display: none;	+	display: none;
−	}	+	}
		+
		+	.logo_2018 {
		+	display: none;
		+	}
		+
		+	#globalWrapper {
		+	padding: 0px;
		+	margin: 0px;
		+	padding-bottom: 0px;
		+	}
		+
		+	#content {
		+	margin-left:0px;
		+	padding:0px;
		+	width:100%;
		+	margin-top: -7px;
		+	}
−	.logo_2018 {
−	display: none;
−	}
−
−	#globalWrapper {
−	padding: 0px;
−	margin: 0px;
−	padding-bottom: 0px;
−	}
−
−	#content {
−	margin-left:0px;
−	padding:0px;
−	width:100%;
−	margin-top: -7px;
−	}
−
Line 34:		Line 33:
	#top_title {		#top_title {
−	margin-bottom: 0px;	+	margin-bottom: 0px;
	}		}
	#top_menu_14{		#top_menu_14{
−	border-bottom: 0px solid black;	+	border-bottom: 0px solid black;
	}		}
−		+
	#HQ_page p {		#HQ_page p {
−	margin: 0;	+	margin: 0;
	}		}
Line 55:		Line 54:
	.navigation {		.navigation {
−	height: 70px;	+	height: 70px;
−	background: #002a5c;	+	background: #002a5c;
−	position: fixed;	+	position: fixed;
−	width:100%;	+	width:100%;
−	text-decoration: none;	+	text-decoration: none;
	}		}
	.brand {		.brand {
−	position: absolute;	+	position: absolute;
−	padding-left: 20px;	+	padding-left: 20px;
−	float: left;	+	float: left;
−	line-height: 70px;	+	line-height: 70px;
−	text-transform: uppercase;	+	text-transform: uppercase;
−	font-size: 1.4em;	+	font-size: 1.4em;
−	width: 300px;	+	width: 300px;
	}		}
	.logo-img{		.logo-img{
−	width: 70%;	+	width: 70%;
−	margin-top: 1%;	+	margin-top: 1%;
	}		}
	@media only screen and (max-width: 1350px) {		@media only screen and (max-width: 1350px) {
−	.logo-img{	+	.logo-img{
−	width: 70%;	+	width: 70%;
−	margin-top: 2%;	+	margin-top: 2%;
−	}	+	}
		+
		+	.navigation{
		+	position: absolute;
		+	}
		+
	}		}
	@media only screen and (max-width: 790px) {		@media only screen and (max-width: 790px) {
−	.logo-img{	+	.logo-img{
−	width: 70%;	+	width: 70%;
−	margin-top: 3%;	+	margin-top: 3%;
−	}	+	}
		+
		+	.navigation{
		+	position: absolute;
		+	}
		+
	}		}
Line 94:		Line 103:
	.brand a,		.brand a,
	.brand a:visited {		.brand a:visited {
−	color: #ffffff;	+	color: #ffffff;
−	text-decoration: none;	+	text-decoration: none;
	}		}
	.nav-container {		.nav-container {
−	max-width: auto;	+	max-width: auto;
−	margin: 0 auto;	+	margin: 0 auto;
	text-decoration: none;		text-decoration: none;
	}		}
	nav {		nav {
−	float: right;	+	float: right;
	text-decoration: none;		text-decoration: none;
	}		}
	nav ul {		nav ul {
−	list-style: none;	+	list-style: none;
−	margin: 0;	+	margin: 0;
−	padding: 0;	+	padding: 0;
	text-decoration: none;		text-decoration: none;
	}		}
	nav ul li {		nav ul li {
−	float: left;	+	float: left;
−	position: relative;	+	position: relative;
	text-decoration: none;		text-decoration: none;
	}		}
Line 122:		Line 131:
	nav ul li a:visited,		nav ul li a:visited,
	nav ul li a:focus{		nav ul li a:focus{
−	display: block;	+	display: block;
−	padding: 0 20px;	+	padding: 0 20px;
−	line-height: 70px;	+	line-height: 70px;
−	background: #002a5c;	+	background: #002a5c;
−	color: #ffffff;	+	color: #ffffff;
−	text-decoration: none;	+	text-decoration: none;
−	margin-bottom:-4px;	+	margin-bottom:-4px;
−	border-color:#002a5c;	+	border-color:#002a5c;
	}		}
	nav ul li a:hover,		nav ul li a:hover,
	nav ul li a:visited:hover {		nav ul li a:visited:hover {
−	background: #4d9dff;	+	background: #4d9dff;
−	color: #ffffff;	+	color: #ffffff;
−	text-decoration: none;	+	text-decoration: none;
	}		}
	nav ul li a:not(:only-child):after,		nav ul li a:not(:only-child):after,
	nav ul li a:visited:not(:only-child):after {		nav ul li a:visited:not(:only-child):after {
−	padding-left: 4px;	+	padding-left: 4px;
−	content: " ▾";	+	content: " ▾";
−	text-decoration: none;	+	text-decoration: none;
	}		}
	nav ul li ul li {		nav ul li ul li {
−	min-width: 190px;	+	min-width: 190px;
	text-decoration: none;		text-decoration: none;
	}		}
	nav ul li ul li a {		nav ul li ul li a {
−	padding: 15px;	+	padding: 15px;
−	line-height: 20px;	+	line-height: 20px;
−	text-decoration: none;	+	text-decoration: none;
	text-decoration: none;		text-decoration: none;
	}		}
	.nav-dropdown {		.nav-dropdown {
−	position: absolute;	+	position: absolute;
−	display: none;	+	display: none;
−	z-index: 1;	+	z-index: 1;
−	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);	+	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
−	text-decoration: none;	+	text-decoration: none;
	}		}
	/* Mobile navigation */		/* Mobile navigation */
	.nav-mobile {		.nav-mobile {
−	display: none;	+	display: none;
−	position: absolute;	+	position: absolute;
−	top: 0;	+	top: 0;
−	right: 0;	+	right: 0;
−	background: #002a5c;	+	background: #002a5c;
−	height: 70px;	+	height: 70px;
−	width: 70px;	+	width: 70px;
	}		}
	@media only screen and (max-width: 1350px) {		@media only screen and (max-width: 1350px) {
−	.nav-mobile {
−	display: block;
−	}
−	nav {
−	width: 100%;
−	padding: 70px 0 15px;
−	}
−	nav ul {
−	display: none;
−	}
−	nav ul li {
−	float: none;
−	}
−	nav ul li a {
−	padding: 15px;
−	line-height: 20px;
−	text-decoration: none;
−	}
−	nav ul li ul li a {
−	padding-left: 30px;
−	text-decoration: none;
−	}
−	.nav-dropdown {	+	.nav-mobile {
−	position: static;	+	display: block;
−	}	+	}
		+
		+	nav {
		+	width: 100%;
		+	padding: 70px 0 15px;
		+	}
		+	nav ul {
		+	display: none;
		+	max-height: 280px;
		+	overflow-y: auto;
		+	}
		+	nav ul li {
		+	float: none;
		+	}
		+	nav ul li a {
		+	padding: 15px;
		+	line-height: 20px;
		+	text-decoration: none;
		+	}
		+	nav ul li ul li a {
		+	padding-left: 30px;
		+	text-decoration: none;
		+	}
		+
		+	.nav-dropdown {
		+	position: static;
		+	}
	}		}
	@media screen and (min-width: 1351px) {		@media screen and (min-width: 1351px) {
−	.nav-list {	+	.nav-list {
−	display: block !important;	+	display: block !important;
−	}	+	}
	}		}
	#nav-toggle {		#nav-toggle {
−	position: absolute;	+	position: absolute;
−	left: 18px;	+	left: 18px;
−	top: 22px;	+	top: 22px;
−	cursor: pointer;	+	cursor: pointer;
−	padding: 10px 35px 16px 0px;	+	padding: 10px 35px 16px 0px;
		+	max-height: 280px;
		+	overflow-y: auto;
	}		}
	#nav-toggle span,		#nav-toggle span,
	#nav-toggle span:before,		#nav-toggle span:before,
	#nav-toggle span:after {		#nav-toggle span:after {
−	cursor: pointer;	+	cursor: pointer;
−	border-radius: 1px;	+	border-radius: 1px;
−	height: 5px;	+	height: 5px;
−	width: 35px;	+	width: 35px;
−	background: #ffffff;	+	background: #ffffff;
−	position: absolute;	+	position: absolute;
−	display: block;	+	display: block;
−	content: "";	+	content: "";
−	transition: all 300ms ease-in-out;	+	transition: all 300ms ease-in-out;
	}		}
	#nav-toggle span:before {		#nav-toggle span:before {
−	top: -10px;	+	top: -10px;
	}		}
	#nav-toggle span:after {		#nav-toggle span:after {
−	bottom: -10px;	+	bottom: -10px;
	}		}
	#nav-toggle.active span {		#nav-toggle.active span {
−	background-color: transparent;	+	background-color: transparent;
	}		}
	#nav-toggle.active span:before, #nav-toggle.active span:after {		#nav-toggle.active span:before, #nav-toggle.active span:after {
−	top: 0;	+	top: 0;
	}		}
	#nav-toggle.active span:before {		#nav-toggle.active span:before {
−	transform: rotate(45deg);	+	transform: rotate(45deg);
	}		}
	#nav-toggle.active span:after {		#nav-toggle.active span:after {
−	transform: rotate(-45deg);	+	transform: rotate(-45deg);
	}		}
	article {		article {
−	max-width: 1000px;	+	max-width: 1000px;
−	margin: 0 auto;	+	margin: 0 auto;
−	padding: 10px;	+	padding: 10px;
		+	line-height: 1.5;
	}		}
−	/* W3 Schools templates*/	+	.article {
−		+	max-width: 1000px;
−	.w3-top,.w3-bottom{position:fixed;width:100%;z-index:1;}	+	margin: 0 auto;
−	.w3-top{top:0;}	+	padding: 10px;
−	.w3-bottom{bottom:0;}	+	line-height: 1.5;
−		+	padding-right: 5%;
−	#footer{display:block;width:98%}	+	padding-left : 5%;
−		+
−	.w3-container:after,.w3-container:before{content:"";display:table;clear:both;width:98%;}	+	}
−		+
−	.w3-container{}	+	/* W3 Schools templates*/
−		+
−	.w3-padding-32{padding-top:32px!important;padding-bottom:32px!important;}	+	.w3-top,.w3-bottom{position:fixed;width:100%;z-index:1;}
−		+	.w3-top{top:0;}
−	.w3-center .w3-bar{display:inline-block;width:auto;}	+	.w3-bottom{bottom:0;}
−		+
−	.w3-center{text-align:center!important;}	+	#footer{display:block;width:98%}
−		+
−	.w3-black,.w3-hover-black:hover{color:#fff!important;background-color:#000!important;}	+	.w3-container:after,.w3-container:before{content:"";display:table;clear:both;width:98%;}
−		+
−	.w3-xlarge{font-size:24px!important;}	+	.w3-container{}
−		+
−		+	.w3-padding-32{padding-top:32px!important;padding-bottom:32px!important;}
−		+
		+	.w3-center .w3-bar{display:inline-block;width:auto;}
		+
		+	.w3-center{text-align:center!important;}
		+
		+	.w3-black,.w3-hover-black:hover{color:#fff!important;background-color:#000!important;}
		+
		+	.w3-xlarge{font-size:24px!important;}
		+
		+
		+
	/*OWN STYLES*/		/*OWN STYLES*/
	body {		body {
−	font-family: "Lato", sans-serif;	+	font-family: "Lato", sans-serif;
	}		}
	@media only screen and (min-width: 1010px){		@media only screen and (min-width: 1010px){
	.main_content {		.main_content {
−		+
−	background-color: white;	+	background-color: white;
−	border: 1px solid #000000;	+	border: 1px solid #000000;
−	border-radius: 0px;	+	border-radius: 0px;
−	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.35);	+	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.35);
−	min-height: 100px;	+	min-height: 100px;
−	border-top: none;	+	border-top: none;
−	border-bottom: none;	+	border-bottom: none;
−	margin-left:25%;	+	margin-left:25%;
−	margin-right:25%;	+	margin-right:25%;
−	padding-bottom: 4%;	+	padding-bottom: 4%;
−	min-height: 420px;	+	min-height: 420px;
		+	position: sticky;
		+	margin-top: -100px;
	}		}
	}		}
	@media only screen and (max-width: 1009px){		@media only screen and (max-width: 1009px){
−	.main_content {	+	.main_content {
−		+
−	background-color: white;	+	background-color: white;
−	border: 1px solid #000000;	+	border: 1px solid #000000;
−	border-radius: 0px;	+	border-radius: 0px;
−	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.35);	+	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.35);
−	min-height: 100px;	+	min-height: 100px;
−	border-top: none;	+	border-top: none;
−	border-bottom: none;	+	border-bottom: none;
−	margin-left:0;	+	margin-left:0;
−	margin-right:0;	+	margin-right:0;
−	padding-bottom: 4%;	+	padding-bottom: 4%;
−	}	+	position: sticky;
		+	margin-top: -100px;
		+	}
	}		}
	#container{		#container{
−	position: relative;	+	position: relative;
−	min-height: 100%;	+	min-height: 100%;
−	height: 100%;	+	height: 100%;
	}		}
	.container{		.container{
−	padding-top:0px;	+	padding-top:0px;
−	background-color: #001633;	+	background-color: #001633;
−	}	+	}
	.section{		.section{
−	margin: 1%;	+	margin: 1%;
	}		}
−		+
	.half{		.half{
−	max-width: 48%;	+	max-width: 48%;
	}		}
	.half.left {		.half.left {
−	float: left;	+	float: left;
−	margin-right: 1%;	+	margin-right: 1%;
	}		}
	.half.right {		.half.right {
−	float: right;	+	float: right;
−	margin-left: 1%;	+	margin-left: 1%;
	}		}
	article, .article {		article, .article {
−	text-align: justify;	+	text-align: justify;
−	display: block;	+	display: block;
−	margin: auto;	+	margin: auto;
−	font-size: 16px;	+	font-size: 16px;
−	padding-bottom: 20px;	+	padding-bottom: 20px;
	}		}
	article, .article, .contentline {		article, .article, .contentline {
−	width: 90%;	+	width: 90%;
−	font-size: 16px;	+	font-size: 16px;
−	padding-bottom: 30px;	+	padding-bottom: 30px;
	}		}
	.contentline article, .contentline .article {		.contentline article, .contentline .article {
−	width: 100%;	+	width: 100%;
	}		}
	h1, h2, h3, h4, h5, h6 {		h1, h2, h3, h4, h5, h6 {
−	width: 92%;	+	width: 92%;
−	margin: auto;	+	margin: auto;
−	margin-top: 0px;	+	margin-top: 0px;
−	padding-top: 20px;	+	padding-top: 20px;
−	padding-bottom: 15px;	+	padding-bottom: 15px;
	}		}
	.p {		.p {
−	text-align: justify;	+	text-align: justify;
	}		}
	.title {		.title {
−	font-size: 40px;	+	font-size: 40px;
−	padding-top: 7%;	+	padding-top: 5%;
−	padding-left: 7%;	+	padding-left: 3%;
−	padding-bottom: 30px;	+	padding-bottom: 40px;
−	font-weight: bold;	+	font-weight: bold;
		+	background-color: rgb(255,255,255);
		+	margin-top: -70px;
		+	position:sticky;
		+	line-height:1.5em;
		+	text-align:left;
	}		}
	h2 {		h2 {
−	padding-left: 3%;	+	padding-left: 3%;
−	font-size:14;	+	font-size:14;
	}		}
	br {		br {
−	display: block; /* makes it have a width */	+	display: block; /* makes it have a width */
−	content: ""; /* clears default height */	+	content: ""; /* clears default height */
−	margin-top: 20px; /* change this to whatever height you want it */	+	margin-top: 20px; /* change this to whatever height you want it */
	}		}
	p {		p {
−	font-size:14px;	+	font-size:14px;
	}		}
Line 403:		Line 438:
−
−	article{
−	padding-right: 5%;
−	padding-left : 5%;
−	}
−
−	#page-arrow-top {
−	display: none;
−	cursor: pointer;
−	padding: 0;
−	margin: 0;
−	position: fixed;
−	bottom: 20px;
−	right: 50px;
−	}
−
−	.half {
−	width: 48%;
−	}
−	.half.left {	+	article{
−	float: left;	+	padding-right: 5%;
−	margin-right: 1%;	+	padding-left : 5%;
−	}	+	}
−	.half.right {	+	#page-arrow-top {
−	float: right;	+	display: none;
−	margin-left: 1%;	+	cursor: pointer;
−	}	+	padding: 0;
		+	margin: 0;
		+	position: fixed;
		+	bottom: 20px;
		+	right: 50px;
		+	}
−	.sidenavi{	+	.half {
		+	width: 48%;
		+	}
−	margin-top: 50px;	+	.half.left {
−	margin-left: 25px;	+	float: left;
−	display: block;	+	margin-right: 1%;
−	position: -webkit-sticky;	+	}
−	position: sticky;	+
−	top: 150px;	+	.half.right {
−	float: left;	+	float: right;
−	background-color: white;	+	margin-left: 1%;
		+	}
		+
		+	.sidenavi{
		+
		+	margin-top: 50px;
		+	margin-left: 4%;
		+	display: block;
		+	position: -webkit-sticky;
		+	position: sticky;
		+	top: 150px;
		+	float: left;
		+	background-color: #001633;
	border-radius: 30px;		border-radius: 30px;
−	border-color: #001633;	+	border-color: white;
−	}	+	border-style: solid;
−		+	}
−	.side_list{	+
−	display: block;	+	.side_list{
−	margin: 30px;	+	display: block;
−	color: #002a5c;	+	margin-right: 10px;
−	}	+	margin-bottom: 15px;
−		+	margin-top: 10px;
−	.side_link{	+	margin-left: 10px;
−	color: #002a5c;	+	color: white;
−	font-size: 20px;	+	}
−	text-decoration:none;	+
−	padding: 10px;	+	.side_link{
−	}	+	color: white;
−		+	font-size: 20px;
−	.side_list > a:hover{	+	text-decoration:none;
−	text-decoration:none;	+	padding: 10px;
−	color: #4d9dff;	+	}
−	}	+
−		+	.side_list > a:hover{
−	.side_list > a{	+	text-decoration:none;
−	text-decoration:none;	+	color: white;
−	font-size: 20px;	+	}
−	padding: 10px;	+
−	width:100%;	+	.side_list > a{
−	cursor: pointer;	+	text-decoration:none;
−	color: #002a5c;	+	font-size: 18px;
−	}	+	padding: 10px;
		+	width:100%;
		+	cursor: pointer;
		+	color: white;
		+	}
	@media only screen and (max-width: 1150px){		@media only screen and (max-width: 1150px){
−	.sidenavi{	+	.sidenavi{
−	margin-top: 50px;	+	margin-top: 50px;
−	margin-left: 25px;	+	margin-left: 1%;
−	display: block;	+	display: block;
−	position: -webkit-sticky;	+	position: -webkit-sticky;
−	position: sticky;	+	position: sticky;
−	top: 150px;	+	top: 150px;
−	float: left;	+	float: left;
−	background-color: white;	+	background-color: #001633;
	border-radius: 30px;		border-radius: 30px;
−	}	+	border-color: white;
−		+	border-style: solid;
−	.side_list{	+	}
−	display: block;	+
−	margin: 30px;	+
−	color: #002a5c;	+
−	}	+
−		+
−	.side_link{	+
−	color: #002a5c;	+
−	font-size: 12px;	+
−	text-decoration:none;	+
−	padding: 10px;	+
−	}	+
−		+
−	.side_list > a:hover{	+
−	text-decoration:none;	+
−	color: #4d9dff;	+
−	}	+
−		+
−	.side_list > a{	+
−	text-decoration:none;	+
−	font-size: 16px;	+
−	padding: 12px;	+
−	width:100%;	+
−	cursor: pointer;	+
−	color: #002a5c;	+
−	}	+
		+	.side_list{
		+	display: block;
		+	margin-right: 10px;
		+	margin-bottom: 15px;
		+	margin-top: 10px;
		+	margin-left: 10px;
		+	color: white;
	}		}
−	@media only screen and (max-width: 1010px){	+	.side_link{
−	.sidenavi{	+	color: white;
−	display: none;	+	font-size: 10px;
		+	text-decoration:none;
		+	padding: 10px;
		+	}
−	}	+	.side_list > a:hover{
		+	text-decoration:none;
		+	color: white;
		+	}
		+
		+	.side_list > a{
		+	text-decoration:none;
		+	font-size: 16px;
		+	padding: 12px;
		+	width:100%;
		+	cursor: pointer;
		+	color: white;
		+	}
		+
		+	}
		+
		+
		+	@media only screen and (max-width: 1685px){
		+	.sidenavi{
		+
		+	margin-top: 50px;
		+	margin-left: 1%;
		+	display: block;
		+	position: -webkit-sticky;
		+	position: sticky;
		+	top: 150px;
		+	float: left;
		+	background-color: #001633;
		+	border-radius: 30px;
		+	border-color: white;
		+	border-style: solid;
		+	}
		+
		+	.side_list{
		+	display: block;
		+	margin-right: 10px;
		+	margin-bottom: 15px;
		+	margin-top: 10px;
		+	margin-left: 10px;
		+	color: white;
		+	}
		+
		+	.side_link{
		+	color: white;
		+	font-size: 10px;
		+	text-decoration:none;
		+	padding: 10px;
		+	}
		+
		+	.side_list > a:hover{
		+	text-decoration:none;
		+	color: white;
		+	}
		+
		+	.side_list > a{
		+	text-decoration:none;
		+	font-size: 16px;
		+	padding: 8px;
		+	width:100%;
		+	cursor: pointer;
		+	color: white;
		+	}
		+
		+	}
		+
		+
		+	@media only screen and (max-width: 1300px){
		+	.sidenavi{
		+	display: none;
		+
		+	}
	}		}
	figure {		figure {
−	text-align: center;	+	text-align: center;
−	margin-bottom: 30px;	+	margin-bottom: 30px;
−		+
	}		}
	figcaption{		figcaption{
	text-align: justify;		text-align: justify;
−	font-size: 13px;	+	font-size: 13px;
		+	margin-top:10px;
	}		}
Line 553:		Line 648:
	width:30%;		width:30%;
	}		}
−	nav ul li a:visited	+
	.figure.fourty {		.figure.fourty {
	width:40%;		width:40%;
Line 561:		Line 656:
	width:50%;		width:50%;
	}		}
−		+
	.figure.sixty {		.figure.sixty {
	width:60%;		width:60%;
Line 580:		Line 675:
	table, th, td {		table, th, td {
−	border: 1px solid black;	+	border: 1px solid black;
−	border-collapse: collapse;	+	border-collapse: collapse;
−	font-size:17px;	+	font-size:17px;
	}		}
	th, td {		th, td {
−	padding: 15px;	+	padding: 15px;
−	text-align: left;	+	text-align: left;
	}		}
	table#t01 tr:first-child td{		table#t01 tr:first-child td{
−	background-color: #eee;	+	background-color: #eee;
	}		}
	table#t01 tr td:first-child {		table#t01 tr td:first-child {
−	background-color: #eee;	+	background-color: #eee;
−	color: black;	+	color: black;
	}		}
	table.centern{		table.centern{
−	margin-left:15%;	+	margin-left:15%;
−	margin-right:15%;	+	margin-right:15%;
−	margin-top: 100px;	+	margin-top: 100px;
−	margin-top: 5%;	+	margin-top: 5%;
	}		}
	#HQ_page table {		#HQ_page table {
−	border: 1px solid #ccc;	+	border: 1px solid #ccc;
−	border-collapse: collapse;	+	border-collapse: collapse;
−	width: 70%;	+	width: 70%;
−	margin: auto;	+	margin: auto;
−	margin-bottom: 0px;	+	margin-bottom: 0px;
−	margin-top: 100px;	+	margin-top: 100px;
−	margin-right: auto;	+	margin-right: auto;
−	margin-left: auto;	+	margin-left: auto;
	}		}
	hr {		hr {
−	margin-top: 10%;	+	margin-top: 10%;
−	margin-bottom: 20px;	+	margin-bottom: 20px;
−	border: 0;	+	border: 0;
−	text-align: center;	+	text-align: center;
−	border-top: 2px solid #000000;	+	border-top: 2px solid #000000;
−	margin-left: auto;	+	margin-left: auto;
−	margin-right: auto;	+	margin-right: auto;
−		+
	}		}
	.reftext {		.reftext {
−	display: block;	+	display: block;
−	text-align: justify;	+	text-align: justify;
−	margin-left: 5%;	+	margin-left: 5%;
−	margin-right: 5%;	+	margin-right: 5%;
−	font-size: 14px;	+	font-size: 14px;
−	padding-bottom: 20px;	+	padding-bottom: 20px;
−	line-height: 20px;	+	line-height: 20px;
	}		}
−	/*Footer*/	+	/*Footer*/
	.fa-facebook-official:before {		.fa-facebook-official:before {
−	content: "\f230";	+	content: "\f230";
−	color: white;	+	color: white;
	}		}
	.fa-instagram:before {		.fa-instagram:before {
−	content: "\f230";	+	content: "\f230";
−	color: white;	+	color: white;
	}		}
	.fa-twitter:before {		.fa-twitter:before {
−	content: "\f230";	+	content: "\f230";
−	color: white;	+	color: white;
	}		}
	#myDIV {		#myDIV {
−	margin-top: 10px;	+	margin-top: 10px;
−	display:none;	+	display:none;
	}		}
	.refbtn{		.refbtn{
−	background-color: white;	+	background-color: white;
−	border: none;	+	border: none;
−	font-size: 150%;	+	font-size: 150%;
−	font-weight: bold;	+	font-weight: bold;
−	color: black;	+	color: black;
−	margin-left: 5%;	+	margin-left: 5%;
−	margin-bottom: 26px;	+	margin-bottom: 26px;
−	margin-top: 30px;	+	margin-top: 30px;
	}		}
Line 686:		Line 781:
	#myVideo {		#myVideo {
−	position: static;	+	position: static;
−	top:0;	+	top:0;
−	left:0	+	left:0
−	right: 0;	+	right: 0;
−	bottom: 0;	+	bottom: 0;
−	height: auto;	+	height: auto;
−	margin-top: 70px;	+	margin-top: 70px;
−	z-index:1;	+	z-index:1;
	}		}
		+
		+
		+	.title_picture{
		+	width:100%;
		+	padding-top:40px;
		+	}
		+
		+
	@-webkit-keyframes animateBubble {		@-webkit-keyframes animateBubble {
−	0% {	+	0% {
−	margin-top: 40px;	+	margin-top: 310%;
−	}	+	}
−	100% {	+	100% {
−	margin-top: -80%;	+	margin-top: 5%;
−	}	+	}
−	}	+	}
−	@-moz-keyframes animateBubble {	+	@-moz-keyframes animateBubble {
−	0% {	+	0% {
−	margin-top: 40px;	+	margin-top: 310%;
−	}	+	}
−	100% {	+	100% {
−	margin-top: -80%;	+	margin-top: 5%;
−	}	+	}
−	}	+	}
−	@keyframes animateBubble {	+	@keyframes animateBubble {
−	0% {	+	0% {
−	margin-top: 40px;	+	margin-top: 310%;
−	}	+	}
−	100% {	+	100% {
−	margin-top: -80%;	+	margin-top: 5%;
−	}	+	}
−	}	+	}
	@-webkit-keyframes animateBubbleSeite {		@-webkit-keyframes animateBubbleSeite {
−	0% {	+	0% {
−	margin-top: 40px;	+	margin-top: 40px;
−	}	+	}
−	100% {	+	100% {
−	margin-top: -95%;	+	margin-top: -200%;
−	}	+	}
−	}	+	}
−	@-moz-keyframes animateBubbleSeite {	+	@-moz-keyframes animateBubbleSeite {
−	0% {	+	0% {
−	margin-top: 40px;	+	margin-top: 40px;
−	}	+	}
−	100% {	+	100% {
−	margin-top: -95%;	+	margin-top: -200%;
−	}	+	}
−	}	+	}
−	@keyframes animateBubbleSeite {	+	@keyframes animateBubbleSeite {
−	0% {	+	0% {
−	margin-top: 40px;	+	margin-top: 40px;
−	}	+	}
−	100% {	+	100% {
−	margin-top: -95%;	+	margin-top: -200%;
−	}	+	}
−	}	+	}
−	@-webkit-keyframes sideWays {	+	@-webkit-keyframes sideWays {
−	0% {	+	0% {
−	margin-left:0px;	+	margin-left:0px;
−	}	+	}
−	100% {	+	100% {
−	margin-left:50px;	+	margin-left:50px;
−	}	+	}
−	}	+	}
−	@-moz-keyframes sideWays {	+	@-moz-keyframes sideWays {
−	0% {	+	0% {
−	margin-left:0px;	+	margin-left:0px;
−	}	+	}
−	100% {	+	100% {
−	margin-left:50px;	+	margin-left:50px;
−	}	+	}
−	}	+	}
−	@keyframes sideWays {	+	@keyframes sideWays {
−	0% {	+	0% {
−	margin-left:0px;	+	margin-left:0px;
−	}	+	}
−	100% {	+	100% {
−	margin-left:50px;	+	margin-left:50px;
−	}	+	}
−	}	+	}
−	.x1Seite {	+	.s1 {
−	-webkit-animation: animateBubbleSeite 25s linear infinite, sideWays 2s ease-in-out infinite alternate;	+	-webkit-animation: animateBubbleSeite 120s linear infinite, sideWays 2s ease-in-out infinite alternate;
−	-moz-animation: animateBubbleSeite 25s linear infinite, sideWays 2s ease-in-out infinite alternate;	+	-moz-animation: animateBubbleSeite 120s linear infinite, sideWays 2s ease-in-out infinite alternate;
−	animation: animateBubbleSeite 25s linear infinite, sideWays 2s ease-in-out infinite alternate;	+	animation: animateBubbleSeite 120s linear infinite, sideWays 2s ease-in-out infinite alternate;
−		+
−	left: 5%;	+
−	top: 95%;	+
−	z-index:1;	+
−	overflow: hidden;	+
−		+
−	-webkit-transform: scale(0.1);	+
−	-moz-transform: scale(0.1);	+
−	transform: scale(0.1);	+
−	}	+
−	.x2Seite {	+	left: 5%;
−	-webkit-animation: animateBubbleSeite 25s linear infinite, sideWays 2s ease-in-out infinite alternate;	+	top: 95%;
−	-moz-animation: animateBubbleSeite 25s linear infinite, sideWays 2s ease-in-out infinite alternate;	+	z-index:1;
−	animation: animateBubbleSeite 25s linear infinite, sideWays 2s ease-in-out infinite alternate;	+
−		+
−	left: 15%;	+
−	top: 95%;	+
−	z-index:1;	+
	overflow: hidden;		overflow: hidden;
−
−	-webkit-transform: scale(0.1);
−	-moz-transform: scale(0.1);
−	transform: scale(0.1);
−	}
−	.x3Seite {	+	-webkit-transform: scale(0.1);
−	-webkit-animation: animateBubbleSeite 25s linear infinite, sideWays 2s ease-in-out infinite alternate;	+	-moz-transform: scale(0.1);
−	-moz-animation: animateBubbleSeite 25s linear infinite, sideWays 2s ease-in-out infinite alternate;	+	transform: scale(0.1);
−	animation: animateBubbleSeite 25s linear infinite, sideWays 2s ease-in-out infinite alternate;	+	}
−		+
−	left: 85%;	+
−	top: 95%;	+
−	z-index:1;	+
−	overflow: hidden;	+
−		+
−	-webkit-transform: scale(0.1);	+
−	-moz-transform: scale(0.1);	+
−	transform: scale(0.1);	+
−	}	+
−	.x4Seite {	+
−	-webkit-animation: animateBubbleSeite 25s linear infinite, sideWays 2s ease-in-out infinite alternate;	+
−	-moz-animation: animateBubbleSeite 25s linear infinite, sideWays 2s ease-in-out infinite alternate;	+	.x1 {
−	animation: animateBubbleSeite 25s linear infinite, sideWays 2s ease-in-out infinite alternate;	+	-webkit-animation: animateBubble 100s linear infinite, sideWays 2s ease-in-out infinite alternate;
−		+	-moz-animation: animateBubble 100s linear infinite, sideWays 2s ease-in-out infinite alternate;
−	left: 95%;	+	animation: animateBubble 100s linear infinite, sideWays 2s ease-in-out infinite alternate;
−	top: 95%;	+
−	z-index:1;	+	left: -5%;
		+	top: 20%;
		+	z-index:1;
	overflow: hidden;		overflow: hidden;
−
−	-webkit-transform: scale(0.1);
−	-moz-transform: scale(0.1);
−	transform: scale(0.1);
−	}
		+	-webkit-transform: scale(0.1);
		+	-moz-transform: scale(0.1);
		+	transform: scale(0.1);
		+	}
		+
		+	.x2 {
		+	-webkit-animation: animateBubble 80s linear infinite, sideWays 4s ease-in-out infinite alternate;
		+	-moz-animation: animateBubble 80s linear infinite, sideWays 4s ease-in-out infinite alternate;
		+	animation: animateBubble 80s linear infinite, sideWays 4s ease-in-out infinite alternate;
−	.x1 {	+	left: 5%;
−	-webkit-animation: animateBubble 25s linear infinite, sideWays 2s ease-in-out infinite alternate;	+	top: 20%;
−	-moz-animation: animateBubble 25s linear infinite, sideWays 2s ease-in-out infinite alternate;	+	z-index:1;
−	animation: animateBubble 25s linear infinite, sideWays 2s ease-in-out infinite alternate;	+
−		+
−	left: -5%;	+
−	top: 95%;	+
−	z-index:1;	+
	overflow: hidden;		overflow: hidden;
−		+	-webkit-transform: scale(0.2);
−	-webkit-transform: scale(0.1);	+	-moz-transform: scale(0.2);
−	-moz-transform: scale(0.1);	+	transform: scale(0.2);
−	transform: scale(0.1);	+	}
−	}	+
−	.x2 {	+	.x3 {
−	-webkit-animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate;	+	-webkit-animation: animateBubble 120s linear infinite, sideWays 2s ease-in-out infinite alternate;
−	-moz-animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate;	+	-moz-animation: animateBubble 120s linear infinite, sideWays 2s ease-in-out infinite alternate;
−	animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate;	+	animation: animateBubble 120s linear infinite, sideWays 2s ease-in-out infinite alternate;
−		+
−	left: 5%;	+
−	top: 95%;	+
−	z-index:1;	+
−	overflow: hidden;	+
−	-webkit-transform: scale(0.2);	+
−	-moz-transform: scale(0.2);	+
−	transform: scale(0.2);	+
−	}	+
−	.x3 {	+	left: 10%;
−	-webkit-animation: animateBubble 28s linear infinite, sideWays 2s ease-in-out infinite alternate;	+	top: 20%;
−	-moz-animation: animateBubble 28s linear infinite, sideWays 2s ease-in-out infinite alternate;	+
−	animation: animateBubble 28s linear infinite, sideWays 2s ease-in-out infinite alternate;	+
−		+
−	left: 10%;	+
−	top: 95%;	+
	overflow: hidden;		overflow: hidden;
−	z-index:1;	+	z-index:1;
−	-webkit-transform: scale(0.2);	+	-webkit-transform: scale(0.2);
−	-moz-transform: scale(0.2);	+	-moz-transform: scale(0.2);
−	transform: scale(0.2);	+	transform: scale(0.2);
−	}	+	}
		+
		+	.x4 {
		+	-webkit-animation: animateBubble 90s linear infinite, sideWays 3s ease-in-out infinite alternate;
		+	-moz-animation: animateBubble 90s linear infinite, sideWays 3s ease-in-out infinite alternate;
		+	animation: animateBubble 90s linear infinite, sideWays 3s ease-in-out infinite alternate;
−	.x4 {	+	left: 20%;
−	-webkit-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;	+	top: 20%;
−	-moz-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;	+
−	animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;	+
−		+
−	left: 20%;	+
−	top: 95%;	+
	overflow: hidden;		overflow: hidden;
−	z-index:1;	+	z-index:1;
−	-webkit-transform: scale(0.2);	+	-webkit-transform: scale(0.2);
−	-moz-transform: scale(0.2);	+	-moz-transform: scale(0.2);
−	transform: scale(0.2);	+	transform: scale(0.2);
−	}	+	}
−	.x5 {	+	.x5 {
−	-webkit-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;	+	-webkit-animation: animateBubble 70s linear infinite, sideWays 4s ease-in-out infinite alternate;
−	-moz-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;	+	-moz-animation: animateBubble 70s linear infinite, sideWays 4s ease-in-out infinite alternate;
−	animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;	+	animation: animateBubble 70s linear infinite, sideWays 4s ease-in-out infinite alternate;
−		+
−	left: 30%;	+	left: 30%;
−	top: 95%;	+	top: 20%;
	overflow: hidden;		overflow: hidden;
−	z-index:1;	+	z-index:1;
−	-webkit-transform: scale(0.1);	+	-webkit-transform: scale(0.1);
−	-moz-transform: scale(0.1);	+	-moz-transform: scale(0.1);
−	transform: scale(0.1);	+	transform: scale(0.1);
−	}	+	}
−	.x6 {	+	.x6 {
−	-webkit-animation: animateBubble 21s linear infinite, sideWays 2s ease-in-out infinite alternate;	+	-webkit-animation: animateBubble 115s linear infinite, sideWays 2s ease-in-out infinite alternate;
−	-moz-animation: animateBubble 21s linear infinite, sideWays 2s ease-in-out infinite alternate;	+	-moz-animation: animateBubble 115s linear infinite, sideWays 2s ease-in-out infinite alternate;
−	animation: animateBubble 21s linear infinite, sideWays 2s ease-in-out infinite alternate;	+	animation: animateBubble 115s linear infinite, sideWays 2s ease-in-out infinite alternate;
−		+
−	left: 50%;	+	left: 50%;
−	top: 95%;	+	top: 20%;
	overflow: hidden;		overflow: hidden;
−	z-index:1;	+	z-index:1;
−	-webkit-transform: scale(0.1);	+	-webkit-transform: scale(0.1);
−	-moz-transform: scale(0.1);	+	-moz-transform: scale(0.1);
−	transform: scale(0.1);	+	transform: scale(0.1);
−	}	+	}
		+
		+	.x7 {
		+	-webkit-animation: animateBubble 120s linear infinite, sideWays 2s ease-in-out infinite alternate;
		+	-moz-animation: animateBubble 120s linear infinite, sideWays 2s ease-in-out infinite alternate;
		+	animation: animateBubble 120s linear infinite, sideWays 2s ease-in-out infinite alternate;
−	.x7 {	+	left: 65%;
−	-webkit-animation: animateBubble 20s linear infinite, sideWays 2s ease-in-out infinite alternate;	+	top: 20%;
−	-moz-animation: animateBubble 20s linear infinite, sideWays 2s ease-in-out infinite alternate;	+
−	animation: animateBubble 20s linear infinite, sideWays 2s ease-in-out infinite alternate;	+
−		+
−	left: 65%;	+
−	top: 95%;	+
	overflow: hidden;		overflow: hidden;
−	z-index:1;	+	z-index:1;
−	-webkit-transform: scale(0.1);	+	-webkit-transform: scale(0.1);
−	-moz-transform: scale(0.1);	+	-moz-transform: scale(0.1);
−	transform: scale(0.1);	+	transform: scale(0.1);
−	}	+	}
−	.x8 {	+	.x8 {
−	-webkit-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;	+	-webkit-animation: animateBubble 100s linear infinite, sideWays 3s ease-in-out infinite alternate;
−	-moz-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;	+	-moz-animation: animateBubble 100s linear infinite, sideWays 3s ease-in-out infinite alternate;
−	animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;	+	animation: animateBubble 100s linear infinite, sideWays 3s ease-in-out infinite alternate;
−		+
−	left: 80%;	+	left: 80%;
−	top: 95%;	+	top: 20%;
	overflow: hidden;		overflow: hidden;
−	z-index:1;	+	z-index:1;
−	-webkit-transform: scale(0.2);	+	-webkit-transform: scale(0.2);
−	-moz-transform: scale(0.2);	+	-moz-transform: scale(0.2);
−	transform: scale(0.2);	+	transform: scale(0.2);
−	}	+	}
−	.x9 {	+	.x9 {
−	-webkit-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;	+	-webkit-animation: animateBubble 80s linear infinite, sideWays 4s ease-in-out infinite alternate;
−	-moz-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;	+	-moz-animation: animateBubble 80s linear infinite, sideWays 4s ease-in-out infinite alternate;
−	animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;	+	animation: animateBubble 80s linear infinite, sideWays 4s ease-in-out infinite alternate;
−		+
−	left: 90%;	+	left: 90%;
−	top: 95%;	+	top: 20%;
	overflow: hidden;		overflow: hidden;
−	z-index:1;	+	z-index:1;
−	-webkit-transform: scale(0.1);	+	-webkit-transform: scale(0.1);
−	-moz-transform: scale(0.1);	+	-moz-transform: scale(0.1);
−	transform: scale(0.1);	+	transform: scale(0.1);
−	}	+	}
−	.x10 {	+	.x10 {
−	-webkit-animation: animateBubble 26s linear infinite, sideWays 2s ease-in-out infinite alternate;	+	-webkit-animation: animateBubble 120s linear infinite, sideWays 2s ease-in-out infinite alternate;
−	-moz-animation: animateBubble 26s linear infinite, sideWays 2s ease-in-out infinite alternate;	+	-moz-animation: animateBubble 120s linear infinite, sideWays 2s ease-in-out infinite alternate;
−	animation: animateBubble 26s linear infinite, sideWays 2s ease-in-out infinite alternate;	+	animation: animateBubble 120s linear infinite, sideWays 2s ease-in-out infinite alternate;
−		+
−	left: 80%;	+	left: 80%;
−	top: 95%;	+	top: 20%;
	overflow: hidden;		overflow: hidden;
−	z-index:1;	+	z-index:1;
−	-webkit-transform: scale(0.1);	+	-webkit-transform: scale(0.1);
−	-moz-transform: scale(0.1);	+	-moz-transform: scale(0.1);
−	transform: scale(0.1);	+	transform: scale(0.1);
−	}	+	}
−	.bubble {	+	.bubble {
−	-webkit-border-radius: 50%;	+	-webkit-border-radius: 50%;
−	-moz-border-radius: 50%;	+	-moz-border-radius: 50%;
−	border-radius: 50%;	+	border-radius: 50%;
−		+
−	-webkit-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);	+
−	-moz-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);	+
−	box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);	+
−		+
−	height: 200px;	+
−	position: absolute;	+
−	width: 200px;	+
−	}	+
−	.bubble:after {	+	-webkit-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);
−	background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 0%); /* FF3.6+ */	+	-moz-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);
−	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.5)), color-stop(0%,rgba(255,255,255,0))); /* Chrome,Safari4+ */	+	box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);
−	background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 0%); /* Chrome10+,Safari5.1+ */	+
−	background: -o-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 0%); /* Opera 12+ */	+
−	background: -ms-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 0%); /* IE10+ */	+
−	background: radial-gradient(ellipse at center,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 0%); /* W3C */	+
−	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */	+
−	-webkit-border-radius: 50%;	+	height: 200px;
−	-moz-border-radius: 50%;	+	position: absolute;
−	border-radius: 50%;	+	width: 200px;
−		+	}
−	-webkit-box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3);	+
−	-moz-box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3);	+	.bubble:after {
−	box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3);	+	background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 0%); /* FF3.6+ */
−		+	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.5)), color-stop(0%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
−	content: "";	+	background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 0%); /* Chrome10+,Safari5.1+ */
−	height: 180px;	+	background: -o-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 0%); /* Opera 12+ */
−	left: 10px;	+	background: -ms-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 0%); /* IE10+ */
−	position: absolute;	+	background: radial-gradient(ellipse at center,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 0%); /* W3C */
−	width: 180px;	+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
−	}	+
		+	-webkit-border-radius: 50%;
		+	-moz-border-radius: 50%;
		+	border-radius: 50%;
		+
		+	-webkit-box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3);
		+	-moz-box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3);
		+	box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3);
		+
		+	content: "";
		+	height: 180px;
		+	left: 10px;
		+	position: absolute;
		+	width: 180px;
		+	}
		+
		+	@media only screen and (max-width: 1700px) {
		+
		+	.bubble.x1, .bubble.x2, .bubble.x8, .bubble.x9, .bubble.x10{
		+	display:none;
		+	}
		+
		+
		+
		+	}
		+
		+
		+	@media only screen and (max-width: 1200px) {
		+
		+	.bubble.x1, .bubble.x2, .bubble.x7, .bubble.x8, .bubble.x9, .bubble.x10{
		+	display:none;
		+	}
		+	}
		+
		+
		+	.timer_box{
		+	border: white;
		+	border-style: solid;
		+	padding-bottom: 125px;
		+	padding-left: 10px;
		+	padding_top:10px;
		+	marging-bottom: 100px;
		+	}
		+
		+	#gold {
		+	float: left;
		+	font-size: 50px;
		+	margin-top: 10px;
		+	width: 50%;
		+	color:white;
		+	text-align: center;
		+
		+	}
		+
		+	#gold_text {
		+	float: left;
		+	font-size: 20px;
		+	margin-top: 0px;
		+	width: 50%;
		+	color:white;
		+	text-align: center;
		+	}
		+
		+	#silver {
		+	float: left;
		+	text-align: center;
		+	font-size: 50px;
		+	margin-top: 10px;
		+	width: 50%;
		+	color:white;
		+	}
		+
		+	#silver_text {
		+	float: left;
		+	text-align: center;
		+	font-size: 20px;
		+	margin-top: 0px;
		+	width: 50%;
		+	color:white;
		+	}
		+
		+	.img_text{
		+	text-align:center;
		+	position:absolute;
		+	}
		+
		+	#home_imgs {
		+	margin-top:100px;
		+	width:60%;
		+	}
		+
		+
		+	@media only screen and (max-width: 1300px) {
		+
		+	#home_imgs{
		+	width:70%;
		+
		+	}
		+
		+	#silver{
		+	font-size: 30px;
		+
		+	}
		+
		+	#gold{
		+	font-size: 30px;
		+
		+	}
		+
		+	#silver_text{
		+	font-size: 20px;
		+
		+	}
		+
		+
		+	#gold_text{
		+	font-size: 20px;
		+	}
		+
		+	}
		+
		+
		+	@media only screen and (max-width: 900px) {
		+
		+	.timer_box{
		+	border: white;
		+	border-style: solid;
		+	padding-bottom: 100px;
		+	padding-left: 10px;
		+	padding_top:10px;
		+	marging-bottom: 100px;
		+	}
		+
		+	#home_imgs{
		+	margin-top:50px;
		+	width:90%;
		+	}
		+
		+	#silver{
		+	font-size: 20px;
		+
		+	}
		+
		+	#gold{
		+	font-size: 20px;
		+
		+	}
		+
		+	#silver_text{
		+	font-size: 15px;
		+
		+	}
		+
		+
		+	#gold_text{
		+	font-size: 15px;
		+	}
		+
		+	}
		+
		+
		+	@media only screen and (max-width: 600px) {
		+
		+	.timer_box{
		+	border: white;
		+	border-style: solid;
		+	padding-bottom: 100px;
		+	padding-left: 10px;
		+	padding_top:10px;
		+	marging-bottom: 100px;
		+	}
		+
		+	#home_imgs{
		+	margin-top:15px;
		+	width:100%;
		+	}
		+
		+	#silver{
		+	font-size: 15px;
		+
		+	}
		+
		+	#gold{
		+	font-size: 15px;
		+
		+	}
		+
		+	#silver_text{
		+	font-size: 10px;
		+
		+	}
		+
		+
		+	#gold_text{
		+	font-size: 10px;
		+	}
		+
		+	}
		+
		+
		+	@media only screen and (max-width: 400px) {
		+
		+	.timer_box{
		+	border: white;
		+	border-style: solid;
		+	padding-bottom: 50px;
		+	padding-left: 10px;
		+	padding_top:10px;
		+	marging-bottom: 100px;
		+	}
		+
		+	#home_imgs{
		+	margin-top:5px;
		+	width:100%;
		+	}
		+
		+	#silver{
		+	font-size: 10px;
		+
		+	}
		+
		+	#gold{
		+	font-size: 10px;
		+
		+	}
		+
		+	#silver_text{
		+	font-size: 5px;
		+
		+	}
		+
		+
		+	#gold_text{
		+	font-size: 5px;
		+	}
	}		}

---

Latest revision as of 18:31, 17 October 2018

/* HQ CSS*/ .firstHeading { display: none; }

.mw-content-text { display: none; }

.logo_2018 { display: none; }

1. globalWrapper {

padding: 0px; margin: 0px; padding-bottom: 0px; }

1. content {

margin-left:0px; padding:0px; width:100%; margin-top: -7px; }

.mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul{ margin:0px; }

1. top_title {

margin-bottom: 0px; }

1. top_menu_14{

border-bottom: 0px solid black; }

1. HQ_page p {

margin: 0; }

/*NAVBAR*/

@charset "UTF-8";

body{ margin-top:0px; }

.navigation { height: 70px; background: #002a5c; position: fixed; width:100%; text-decoration: none; }

.brand { position: absolute; padding-left: 20px; float: left; line-height: 70px; text-transform: uppercase; font-size: 1.4em; width: 300px; }

.logo-img{ width: 70%; margin-top: 1%; }

@media only screen and (max-width: 1350px) { .logo-img{ width: 70%; margin-top: 2%; }

.navigation{ position: absolute; }

}

@media only screen and (max-width: 790px) { .logo-img{ width: 70%; margin-top: 3%; }

.navigation{ position: absolute; }

}

.brand a, .brand a:visited { color: #ffffff; text-decoration: none; }

.nav-container { max-width: auto; margin: 0 auto; text-decoration: none; }

nav { float: right; text-decoration: none; } nav ul { list-style: none; margin: 0; padding: 0; text-decoration: none; } nav ul li { float: left; position: relative; text-decoration: none; } nav ul li a, nav ul li a:visited, nav ul li a:focus{ display: block; padding: 0 20px; line-height: 70px; background: #002a5c; color: #ffffff; text-decoration: none; margin-bottom:-4px; border-color:#002a5c; } nav ul li a:hover, nav ul li a:visited:hover { background: #4d9dff; color: #ffffff; text-decoration: none; } nav ul li a:not(:only-child):after, nav ul li a:visited:not(:only-child):after { padding-left: 4px; content: " ▾"; text-decoration: none; } nav ul li ul li { min-width: 190px; text-decoration: none; } nav ul li ul li a { padding: 15px; line-height: 20px; text-decoration: none; text-decoration: none; }

.nav-dropdown { position: absolute; display: none; z-index: 1; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15); text-decoration: none; }

/* Mobile navigation */ .nav-mobile { display: none; position: absolute; top: 0; right: 0; background: #002a5c; height: 70px; width: 70px; }

@media only screen and (max-width: 1350px) {

.nav-mobile { display: block; }

nav { width: 100%; padding: 70px 0 15px; } nav ul { display: none; max-height: 280px; overflow-y: auto; } nav ul li { float: none; } nav ul li a { padding: 15px; line-height: 20px; text-decoration: none; } nav ul li ul li a { padding-left: 30px; text-decoration: none; }

.nav-dropdown { position: static; } } @media screen and (min-width: 1351px) { .nav-list { display: block !important; } }

1. nav-toggle {

position: absolute; left: 18px; top: 22px; cursor: pointer; padding: 10px 35px 16px 0px; max-height: 280px; overflow-y: auto; }

1. nav-toggle span,
2. nav-toggle span:before,
3. nav-toggle span:after {

cursor: pointer; border-radius: 1px; height: 5px; width: 35px; background: #ffffff; position: absolute; display: block; content: ""; transition: all 300ms ease-in-out; }

1. nav-toggle span:before {

top: -10px; }

1. nav-toggle span:after {

bottom: -10px; }

1. nav-toggle.active span {

background-color: transparent; }

1. nav-toggle.active span:before, #nav-toggle.active span:after {

top: 0; }

1. nav-toggle.active span:before {

transform: rotate(45deg); }

1. nav-toggle.active span:after {

transform: rotate(-45deg); }

article { max-width: 1000px; margin: 0 auto; padding: 10px; line-height: 1.5; }

.article { max-width: 1000px; margin: 0 auto; padding: 10px; line-height: 1.5; padding-right: 5%; padding-left : 5%;

}

/* W3 Schools templates*/

.w3-top,.w3-bottom{position:fixed;width:100%;z-index:1;} .w3-top{top:0;} .w3-bottom{bottom:0;}

1. footer{display:block;width:98%}

.w3-container:after,.w3-container:before{content:"";display:table;clear:both;width:98%;}

.w3-container{}

.w3-padding-32{padding-top:32px!important;padding-bottom:32px!important;}

.w3-center .w3-bar{display:inline-block;width:auto;}

.w3-center{text-align:center!important;}

.w3-black,.w3-hover-black:hover{color:#fff!important;background-color:#000!important;}

.w3-xlarge{font-size:24px!important;}

/*OWN STYLES*/

body { font-family: "Lato", sans-serif; }

@media only screen and (min-width: 1010px){ .main_content {

background-color: white; border: 1px solid #000000; border-radius: 0px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.35); min-height: 100px; border-top: none; border-bottom: none; margin-left:25%; margin-right:25%; padding-bottom: 4%; min-height: 420px; position: sticky; margin-top: -100px; } }

@media only screen and (max-width: 1009px){ .main_content {

background-color: white; border: 1px solid #000000; border-radius: 0px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.35); min-height: 100px; border-top: none; border-bottom: none; margin-left:0; margin-right:0; padding-bottom: 4%; position: sticky; margin-top: -100px; } }

1. container{

position: relative; min-height: 100%; height: 100%; }

.container{ padding-top:0px; background-color: #001633; }

.section{ margin: 1%; }

.half{ max-width: 48%; }

.half.left { float: left; margin-right: 1%; }

.half.right { float: right; margin-left: 1%;

}

article, .article { text-align: justify; display: block; margin: auto; font-size: 16px; padding-bottom: 20px; }

article, .article, .contentline { width: 90%; font-size: 16px; padding-bottom: 30px; }

.contentline article, .contentline .article { width: 100%; }

h1, h2, h3, h4, h5, h6 { width: 92%; margin: auto; margin-top: 0px; padding-top: 20px; padding-bottom: 15px; }

.p { text-align: justify; }

.title { font-size: 40px; padding-top: 5%; padding-left: 3%; padding-bottom: 40px; font-weight: bold; background-color: rgb(255,255,255); margin-top: -70px; position:sticky; line-height:1.5em; text-align:left; }

h2 { padding-left: 3%; font-size:14; }

br { display: block; /* makes it have a width */ content: ""; /* clears default height */ margin-top: 20px; /* change this to whatever height you want it */ }

p { font-size:14px; }

body { padding-top: 0px; }

article{ padding-right: 5%; padding-left : 5%; }

1. page-arrow-top {

display: none; cursor: pointer; padding: 0; margin: 0; position: fixed; bottom: 20px; right: 50px; }

.half { width: 48%; }

.half.left { float: left; margin-right: 1%; }

.half.right { float: right; margin-left: 1%; }

.sidenavi{

margin-top: 50px; margin-left: 4%; display: block; position: -webkit-sticky; position: sticky; top: 150px; float: left; background-color: #001633; border-radius: 30px; border-color: white; border-style: solid; }

.side_list{ display: block; margin-right: 10px; margin-bottom: 15px; margin-top: 10px; margin-left: 10px; color: white; }

.side_link{ color: white; font-size: 20px; text-decoration:none; padding: 10px; }

.side_list > a:hover{ text-decoration:none; color: white; }

.side_list > a{ text-decoration:none; font-size: 18px; padding: 10px; width:100%; cursor: pointer; color: white; }

@media only screen and (max-width: 1150px){ .sidenavi{

margin-top: 50px; margin-left: 1%; display: block; position: -webkit-sticky; position: sticky; top: 150px; float: left; background-color: #001633; border-radius: 30px; border-color: white; border-style: solid; }

.side_list{ display: block; margin-right: 10px; margin-bottom: 15px; margin-top: 10px; margin-left: 10px; color: white; }

.side_link{ color: white; font-size: 10px; text-decoration:none; padding: 10px; }

.side_list > a:hover{ text-decoration:none; color: white; }

.side_list > a{ text-decoration:none; font-size: 16px; padding: 12px; width:100%; cursor: pointer; color: white; }

}

@media only screen and (max-width: 1685px){ .sidenavi{

margin-top: 50px; margin-left: 1%; display: block; position: -webkit-sticky; position: sticky; top: 150px; float: left; background-color: #001633; border-radius: 30px; border-color: white; border-style: solid; }

.side_list{ display: block; margin-right: 10px; margin-bottom: 15px; margin-top: 10px; margin-left: 10px; color: white; }

.side_link{ color: white; font-size: 10px; text-decoration:none; padding: 10px; }

.side_list > a:hover{ text-decoration:none; color: white; }

.side_list > a{ text-decoration:none; font-size: 16px; padding: 8px; width:100%; cursor: pointer; color: white; }

}

@media only screen and (max-width: 1300px){ .sidenavi{ display: none;

} }

figure { text-align: center; margin-bottom: 30px;

}

figcaption{ text-align: justify; font-size: 13px; margin-top:10px; }

.figure.eighty { width:80%; }

.figure.ten { width:10%; }

.figure.twenty { width:20%; }

.figure.thirty { width:30%; }

.figure.fourty { width:40%; }

.figure.fifty { width:50%; }

.figure.sixty { width:60%; }

.figure.seventy { width:70%; }

.figure.ninety { width:90%; }

.figure.hundred { width:100%; }

table, th, td { border: 1px solid black; border-collapse: collapse; font-size:17px; } th, td { padding: 15px; text-align: left; } table#t01 tr:first-child td{ background-color: #eee; }

table#t01 tr td:first-child { background-color: #eee; color: black; }

table.centern{ margin-left:15%; margin-right:15%; margin-top: 100px; margin-top: 5%; }

1. HQ_page table {

border: 1px solid #ccc; border-collapse: collapse; width: 70%; margin: auto; margin-bottom: 0px; margin-top: 100px; margin-right: auto; margin-left: auto; }

hr { margin-top: 10%; margin-bottom: 20px; border: 0; text-align: center; border-top: 2px solid #000000; margin-left: auto; margin-right: auto;

}

.reftext { display: block; text-align: justify; margin-left: 5%; margin-right: 5%; font-size: 14px; padding-bottom: 20px; line-height: 20px; }

/*Footer*/ .fa-facebook-official:before { content: "\f230"; color: white; }

.fa-instagram:before { content: "\f230"; color: white; }

.fa-twitter:before { content: "\f230"; color: white; }

1. myDIV {

margin-top: 10px; display:none; }

.refbtn{ background-color: white; border: none; font-size: 150%; font-weight: bold; color: black; margin-left: 5%; margin-bottom: 26px; margin-top: 30px;

}

a.shifted-anchor { display: block; position:relative; top: -100px; }

active{

text-decoration: none; }

html,body { background-color: #001633; }

1. myVideo {

position: static; top:0; left:0 right: 0; bottom: 0; height: auto; margin-top: 70px; z-index:1; }

.title_picture{ width:100%; padding-top:40px; }

@-webkit-keyframes animateBubble { 0% { margin-top: 310%; } 100% { margin-top: 5%; } }

@-moz-keyframes animateBubble { 0% { margin-top: 310%; } 100% { margin-top: 5%; } }

@keyframes animateBubble { 0% { margin-top: 310%; } 100% { margin-top: 5%; } }

@-webkit-keyframes animateBubbleSeite { 0% { margin-top: 40px; } 100% { margin-top: -200%; } }

@-moz-keyframes animateBubbleSeite { 0% { margin-top: 40px; } 100% { margin-top: -200%; } }

@keyframes animateBubbleSeite { 0% { margin-top: 40px; } 100% { margin-top: -200%; } }

@-webkit-keyframes sideWays { 0% { margin-left:0px; } 100% { margin-left:50px; } }

@-moz-keyframes sideWays { 0% { margin-left:0px; } 100% { margin-left:50px; } }

@keyframes sideWays { 0% { margin-left:0px; } 100% { margin-left:50px; } }

.s1 { -webkit-animation: animateBubbleSeite 120s linear infinite, sideWays 2s ease-in-out infinite alternate; -moz-animation: animateBubbleSeite 120s linear infinite, sideWays 2s ease-in-out infinite alternate; animation: animateBubbleSeite 120s linear infinite, sideWays 2s ease-in-out infinite alternate;

left: 5%; top: 95%; z-index:1; overflow: hidden;

-webkit-transform: scale(0.1); -moz-transform: scale(0.1); transform: scale(0.1); }

.x1 { -webkit-animation: animateBubble 100s linear infinite, sideWays 2s ease-in-out infinite alternate; -moz-animation: animateBubble 100s linear infinite, sideWays 2s ease-in-out infinite alternate; animation: animateBubble 100s linear infinite, sideWays 2s ease-in-out infinite alternate;

left: -5%; top: 20%; z-index:1; overflow: hidden;

-webkit-transform: scale(0.1); -moz-transform: scale(0.1); transform: scale(0.1); }

.x2 { -webkit-animation: animateBubble 80s linear infinite, sideWays 4s ease-in-out infinite alternate; -moz-animation: animateBubble 80s linear infinite, sideWays 4s ease-in-out infinite alternate; animation: animateBubble 80s linear infinite, sideWays 4s ease-in-out infinite alternate;

left: 5%; top: 20%; z-index:1; overflow: hidden; -webkit-transform: scale(0.2); -moz-transform: scale(0.2); transform: scale(0.2); }

.x3 { -webkit-animation: animateBubble 120s linear infinite, sideWays 2s ease-in-out infinite alternate; -moz-animation: animateBubble 120s linear infinite, sideWays 2s ease-in-out infinite alternate; animation: animateBubble 120s linear infinite, sideWays 2s ease-in-out infinite alternate;

left: 10%; top: 20%; overflow: hidden; z-index:1; -webkit-transform: scale(0.2); -moz-transform: scale(0.2); transform: scale(0.2); }

.x4 { -webkit-animation: animateBubble 90s linear infinite, sideWays 3s ease-in-out infinite alternate; -moz-animation: animateBubble 90s linear infinite, sideWays 3s ease-in-out infinite alternate; animation: animateBubble 90s linear infinite, sideWays 3s ease-in-out infinite alternate;

left: 20%; top: 20%; overflow: hidden; z-index:1; -webkit-transform: scale(0.2); -moz-transform: scale(0.2); transform: scale(0.2); }

.x5 { -webkit-animation: animateBubble 70s linear infinite, sideWays 4s ease-in-out infinite alternate; -moz-animation: animateBubble 70s linear infinite, sideWays 4s ease-in-out infinite alternate; animation: animateBubble 70s linear infinite, sideWays 4s ease-in-out infinite alternate;

left: 30%; top: 20%; overflow: hidden; z-index:1; -webkit-transform: scale(0.1); -moz-transform: scale(0.1); transform: scale(0.1); }

.x6 { -webkit-animation: animateBubble 115s linear infinite, sideWays 2s ease-in-out infinite alternate; -moz-animation: animateBubble 115s linear infinite, sideWays 2s ease-in-out infinite alternate; animation: animateBubble 115s linear infinite, sideWays 2s ease-in-out infinite alternate;

left: 50%; top: 20%; overflow: hidden; z-index:1; -webkit-transform: scale(0.1); -moz-transform: scale(0.1); transform: scale(0.1); }

.x7 { -webkit-animation: animateBubble 120s linear infinite, sideWays 2s ease-in-out infinite alternate; -moz-animation: animateBubble 120s linear infinite, sideWays 2s ease-in-out infinite alternate; animation: animateBubble 120s linear infinite, sideWays 2s ease-in-out infinite alternate;

left: 65%; top: 20%; overflow: hidden; z-index:1; -webkit-transform: scale(0.1); -moz-transform: scale(0.1); transform: scale(0.1); }

.x8 { -webkit-animation: animateBubble 100s linear infinite, sideWays 3s ease-in-out infinite alternate; -moz-animation: animateBubble 100s linear infinite, sideWays 3s ease-in-out infinite alternate; animation: animateBubble 100s linear infinite, sideWays 3s ease-in-out infinite alternate;

left: 80%; top: 20%; overflow: hidden; z-index:1; -webkit-transform: scale(0.2); -moz-transform: scale(0.2); transform: scale(0.2); }

.x9 { -webkit-animation: animateBubble 80s linear infinite, sideWays 4s ease-in-out infinite alternate; -moz-animation: animateBubble 80s linear infinite, sideWays 4s ease-in-out infinite alternate; animation: animateBubble 80s linear infinite, sideWays 4s ease-in-out infinite alternate;

left: 90%; top: 20%; overflow: hidden; z-index:1; -webkit-transform: scale(0.1); -moz-transform: scale(0.1); transform: scale(0.1); }

.x10 { -webkit-animation: animateBubble 120s linear infinite, sideWays 2s ease-in-out infinite alternate; -moz-animation: animateBubble 120s linear infinite, sideWays 2s ease-in-out infinite alternate; animation: animateBubble 120s linear infinite, sideWays 2s ease-in-out infinite alternate;

left: 80%; top: 20%; overflow: hidden; z-index:1; -webkit-transform: scale(0.1); -moz-transform: scale(0.1); transform: scale(0.1); }

.bubble { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;

-webkit-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1); -moz-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1); box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);

height: 200px; position: absolute; width: 200px; }

.bubble:after { background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 0%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.5)), color-stop(0%,rgba(255,255,255,0))); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 0%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 0%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 0%); /* IE10+ */ background: radial-gradient(ellipse at center, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 0%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

-webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;

-webkit-box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3); -moz-box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3); box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3);

content: ""; height: 180px; left: 10px; position: absolute; width: 180px; }

@media only screen and (max-width: 1700px) {

.bubble.x1, .bubble.x2, .bubble.x8, .bubble.x9, .bubble.x10{ display:none; }

}

@media only screen and (max-width: 1200px) {

.bubble.x1, .bubble.x2, .bubble.x7, .bubble.x8, .bubble.x9, .bubble.x10{ display:none; } }

.timer_box{

   border: white;
   border-style: solid;
   padding-bottom: 125px;
   padding-left: 10px;
   padding_top:10px;
   marging-bottom: 100px;

}

1. gold {

 float: left;
 font-size: 50px;
 margin-top: 10px;
 width: 50%;
 color:white;

text-align: center;

}

1. gold_text {

 float: left;
 font-size: 20px;
 margin-top: 0px;
 width: 50%;
 color:white;

text-align: center; }

1. silver {

 float: left;
 text-align: center;
 font-size: 50px;
 margin-top: 10px;
 width: 50%;
 color:white;

}

1. silver_text {

 float: left;
 text-align: center;
 font-size: 20px;
 margin-top: 0px;
 width: 50%;
 color:white;

}

.img_text{ text-align:center; position:absolute; }

1. home_imgs {

   margin-top:100px;
   width:60%;

}

@media only screen and (max-width: 1300px) {

1. home_imgs{

width:70%;

}

1. silver{

font-size: 30px;

}

1. gold{

font-size: 30px;

}

1. silver_text{

font-size: 20px;

}

1. gold_text{

font-size: 20px; }

}

@media only screen and (max-width: 900px) {

.timer_box{

   border: white;
   border-style: solid;
   padding-bottom: 100px;
   padding-left: 10px;
   padding_top:10px;
   marging-bottom: 100px;

}

1. home_imgs{

margin-top:50px; width:90%; }

1. silver{

font-size: 20px;

}

1. gold{

font-size: 20px;

}

1. silver_text{

font-size: 15px;

}

1. gold_text{

font-size: 15px; }

}

@media only screen and (max-width: 600px) {

.timer_box{

   border: white;
   border-style: solid;
   padding-bottom: 100px;
   padding-left: 10px;
   padding_top:10px;
   marging-bottom: 100px;

}

1. home_imgs{

margin-top:15px; width:100%; }

1. silver{

font-size: 15px;

}

1. gold{

font-size: 15px;

}

1. silver_text{

font-size: 10px;

}

1. gold_text{

font-size: 10px; }

}

@media only screen and (max-width: 400px) {

.timer_box{

   border: white;
   border-style: solid;
   padding-bottom: 50px;
   padding-left: 10px;
   padding_top:10px;
   marging-bottom: 100px;

}

1. home_imgs{

margin-top:5px; width:100%; }

1. silver{

font-size: 10px;

}

1. gold{

font-size: 10px;

}

1. silver_text{

font-size: 5px;

}

1. gold_text{

font-size: 5px; }

}