/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	FONTS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


@import url('https://fonts.googleapis.com/css?family=Roboto|Roboto+Slab');



/* latin-ext */
@font-face {
	font-family: 'Press Start 2P';
	font-style: normal;
	font-weight: 400;
	src: local('Press Start 2P Regular'), local('PressStart2P-Regular'), url(../fonts/8Lg6LX8-ntOHUQnvQ0E7o6SkDmgNrBPNFeI4cxdj3Ko.woff2) format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
	font-family: 'Press Start 2P';
	font-style: normal;
	font-weight: 400;
	src: local('Press Start 2P Regular'), local('PressStart2P-Regular'), url(../fonts/8Lg6LX8-ntOHUQnvQ0E7o69WAFmVxfVhVkWhl-QDeAk.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
}









* {

	box-sizing: border-box;
}




/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~	
	
	H O R I Z O N T A L       ( D E S K T O P )

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~		
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/



body {


	font-family: Helvetica, Arial, 'Sans serif';
	font-size: 16px;
	font-weight: normal;

	cursor: default;
	
	height: 100%;
	width: 100%;

	margin: 0px;

	padding: 3%;

	background-color: white;

	-webkit-tap-highlight-color: rgba(0,0,0,0);	/*	KILLS THE OBJECT HIGHLIGHT ON TAP	*/
	user-select: none;/*  AVOID TEXT SELECT MARKS */
}





#ALLES {

	height: 100%;
	width: 100%;
}










/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	GRASS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


.grass, .gruen, .bewegtgrass, .bewegtgrass_rueckwaerts {

	position: fixed;

	left: 0px;

	width: 100%;

	z-index: 2;
}









.grass, .bewegtgrass, .bewegtgrass_rueckwaerts {

	bottom: 25%;

	height: 10px;

	background-image: url(../bilder/grasshalm.svg);
	background-repeat: repeat-x;
	background-position: left top;
}



.bewegtgrass, .bewegtgrass_rueckwaerts {

	animation-name: bewegen;
    animation-duration: .75s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;

    opacity: .2;
}




.gruen {

	bottom: 0px;

	height: 25%;

	background-color: springgreen;
}




@keyframes bewegen {

    0% { background-position: 0px top; }
    50% { background-position: 10px top; }
    100% { background-position: 20px top; }
}



.bewegtgrass_rueckwaerts {

	animation-name: bewegen_rueckwaerts;
 
}

@keyframes bewegen_rueckwaerts {

    0% { background-position: 20px top; }
    50% { background-position: 10px top; }
    100% { background-position: 0px top; }
}








/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	TITEL
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/



#TITEL, #AUSWAHL div {

	position: fixed;

	left: 0px;
	bottom: 0px;

	font-family: 'Roboto Slab', Helvetica, Arial, 'Sans serif';
	font-size: 64px;
	line-height: 140%;
	font-weight: bold;
	color: white;

	text-align: left;

	min-width: 600px;

	white-space: nowrap;

	z-index: 3;
}



#TITEL {
	
	height: 25%;
	
	padding-top: 20px;
}

#TITEL div {

	cursor: pointer;
	
	float: left;
	
	padding-top: 0px;
	padding-left: 100px;
	
	background-repeat: no-repeat;
	background-position: 35px 23px;
	background-size: 47px 47px;
}




#TITEL #dreieck {

	width: 0px;
	height: 0px;
	
	padding: 0px;
	
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 12px solid white;

	margin-left: 30px;
	margin-top: 30px;


	display: none;
}




#TITEL:hover #dreieck {

	display: block;
}






/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	AUSWAHL
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


#AUSWAHL {

	position: fixed;

	left: 0px;
	bottom: -1000px;

	width: auto;

	margin-top: -10px;
	margin-left: 0px;

	padding-top: 0px;
	padding-left: 0px;
	padding-right: 0px;
	padding-bottom: 40px;
	
	background-color: springgreen;

	z-index: 3;

	border: none;
	
	opacity: 0;

	display: none;
}




#AUSWAHL div {

	position: static;

	padding: 0px;
	padding-right: 10px;

	width: auto;
	
	white-space: nowrap;
}

 

#AUSWAHL div a {

	display: block;
	
	padding-top: 3px;
	padding-left: 80px;
	padding-right: 30px;
	padding-bottom: 6px;
	
	margin-left: 20px;
	margin-right: 20px;
	
	border-radius: 10px;
	
	text-decoration: none;
	color: white;
	line-height: 130%;
	
	background-repeat: no-repeat;
	background-position: 15px center;
	background-size: 47px 47px;
}


#AUSWAHL .show_more {

	margin-top: 20px;
	
	text-align: center; 

}


#AUSWAHL .show_more a {
	
	width: 70%;
	
	margin-left: 15%;
	
	padding-left: 0px;
	
	text-transform: none; 
	color: springgreen;
	font-size: 32px;
	line-height: 140%;
	
	background-color: rgba(255,255,255,.9);
	
	cursor: pointer;
}



#AUSWAHL div:nth-of-type(3) {

	margin-top: 10px;
}


#AUSWAHL div a:hover {
	
	color: white;
	background-color: rgba(0,0,0,.2);
}


#AUSWAHL div a:active {
	
	background-color: rgba(0,0,0,.3);
}



#AUSWAHL .grass {

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



#AUSWAHL .gruen {

	margin-top: 0px;

	height: 10px;
}












/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	PUNKTE
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


#TABELLE {

	position: absolute;

	top: 35%;

	width: 96%;

	display: flex; flex-flow: row nowrap; align-items: flex-start;

	z-index: 1;
}




#TABELLE .punktcontainer {

	float: left;

	height: 30px;
	width: 30px;
}



#TABELLE .punkte {

	position: absolute;

	height: 30px;
	width: 30px;

	background-color: slategray;

	border-radius: 100%;

	color: rgba(255,255,255,1);
	font-size: 14px;
	font-weight: 600;
	text-align: center;

	padding-top: 7px;


	z-index: 2;

	cursor: hand;
}



#TABELLE .abstand {

	float: left;

	height: 30px;

	display: flex; flex-flow: row nowrap; align-items: flex-start;
}





.hintergrundlinie, .extra_hintergrundlinie {


	width: 100%;

	position: relative;

	margin-top: 15px;


	background-color: slategray;

	height: 2px;

}



.extra_hintergrundlinie {

	display: none;
}






/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	DATEN
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


#TABELLE .name {


	position: absolute;

	font-family: Helvetica, Arial, 'Sans serif';
	color: black;
	font-size: 16px;
	font-weight: 600;

	text-align: left;

	margin-top: -28px;
	margin-left: 20px;

	opacity: .9;

	transform: rotate(315deg);
	transform-origin: bottom left;

	cursor: hand;
}



		

#TABELLE .name:hover {


}




#TABELLE .tordifferenz {

	position: absolute;

	height: 65px;
	width: 30px;

	background-color: silver;

	border-radius: 100px;

	color: rgba(255,255,255,1);
	font-size: 12px;

	padding-top: 43px;

	text-align: center;

	z-index: 0;

	display: none;
}



#TABELLE .tordifferenz div {

}




#TABELLE .position {


	position: absolute;

	color: black;
	font-size: 13px;
	font-weight: bold;

	height: 30px;
	width: 30px;

	text-align: center;

	margin-top: 42px;
	margin-left: 1px;

	opacity: .15;
}








/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	ZONEN
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


#TABELLE .zone {


	float: left;

	white-space: nowrap;

	margin-left: 1px;
	margin-right: 1px;

	padding-top: 0px;
	padding-bottom: 50px;

	border-bottom: 20px solid rgba(0,0,0,.1);

	background-color: rgba(0,0,0,.0);

	display: flex; flex-flow: row nowrap; align-items: flex-end;
}



#TABELLE .zonenname {

	position: absolute;

	color: black;
	font-size: 13px;
	text-align: left;

	height: 30px;
	width: 30px;

	margin-bottom: -105px;
	margin-left: 1px;

	opacity: .15;
	
	
}



#TABELLE .zonenname:hover {

	opacity: .3;
}







/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	ZONENFARBEN
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#TABELLE #zone_CL .punkte, #TABELLE #zone_COLIB .punkte, #TABELLE #zone_AFC .punkte, #TABELLE #zone_CAF .punkte, #TABELLE #zone_PRO .punkte {

	background-color: deepskyblue;
	color: white;
}


#TABELLE #zone_CLQ .punkte, #TABELLE #zone_COQ .punkte, #TABELLE #zone_AFCQ .punkte, #TABELLE #zone_PPO .punkte {

	background-color: mediumturquoise;
	color: white;
}


#TABELLE #zone_EL .punkte, #TABELLE #zone_COPAM .punkte, #TABELLE #zone_CAFC .punkte {

	background-color: slateblue;
	color: white;
}


#TABELLE #zone_ELQ .punkte {

	background-color: #46678F;
	color: white;
}



#TABELLE #zone_RPO .punkte {

	background-color: goldenrod;
	color: white;
}


#TABELLE #zone_REL .punkte {

	background-color: coral;
	color: white;
}


#TABELLE #zone_CAM .punkte {

	background-color: #799149;
	color: white;
}



#TABELLE #zone_EASTERN_CONFERENCE .punkte {

	background-color: #0339A6;
	color: white;
}


#TABELLE #zone_WESTERN_CONFERENCE .punkte {

	background-color: #822433;
	color: white;
}











/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	VEREINSFARBEN
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.vereinsfarben {

	position: fixed;

	top: 0px;
	left: 0px;

	height: 100%;
	width: 100%;

	z-index: 0;

	display: none;
}



.vereinsfarben div {

	float: left;

	width: 100%;

	opacity: .8;
}





/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	FIXTURES
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


#FIXTURES {
	
	position: absolute;
	
	height: auto;
	width: 100vw;
	min-height: 95vh;
	
	top: 5vh;;
	left: 0px;
	
	margin-top: -50px;
	
	padding: 0px;
	padding-bottom: 25%;
	
	text-align: center;
}



#FIXTURES .MATCH {
	
	height: 110px;
	width: 100vw;
	
	margin: 0px;
	
	padding: 0px;
	
	background-color: rgba(112,128,144,.5);
}



#FIXTURES .DATE {
	

	height: auto;
	width: 100vw;
	
	margin-top: 50px;
	margin-bottom: 0px;
	
	padding-bottom: 20px;
	
	text-align: center;
}


#FIXTURES .DATE div {
	
	display: inline-block;
	
	padding: 5px;
	padding-left: 12px;
	padding-right: 12px;
	
	color: white;
	white-space: nowrap;
	
	background-color: slategray;
	
	border-radius: 20px;
		
}

#FIXTURES #centerline {
	
	position: absolute;
	
	top: 50px;
	left: calc(50vw - 1px);
	
	height: 100%;
	width: 2px;
	
	background-color: #E5E5E5;
	
	z-index: -1;
}






#FIXTURES .MATCH div {
	
	display: inline-block;
	
	height: 30px;
	
	padding: 10px;	
}


/* 	TEAM NAME CONTAINERS	 */
#FIXTURES .MATCH .home_team, #FIXTURES .MATCH .away_team {
	
	height: 110px;
	width: 50vw;
	
	font-family: Helvetica, Arial, 'Sans serif';
	color: white;
	font-size: 16px;
	line-height: 100%;
	font-weight: 600;
	
	margin: 0px;
	
	padding-top: 15px;
	padding-left: 15px;
	padding-right: 15px;
	
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	
	opacity: .9;
}

#FIXTURES .MATCH .home_team {
	
	border-right: 1px solid white;
}

#FIXTURES .MATCH .away_team {
	
	border-left: 1px solid white;
}


#FIXTURES .MATCH .home_team, #FIXTURES .MATCH .home_team_goals {
	
	text-align: right;
}


#FIXTURES .MATCH .away_team, #FIXTURES .MATCH .away_team_goals {
	
	text-align: left;
}


/* 	GOAL BAR CONTAINERS	 */
#FIXTURES .MATCH .home_team_goals, #FIXTURES .MATCH .away_team_goals {
	
	position: absolute;
	
	margin-top: 45px;
	
	height: 40px;
	width: 50vw;
	
	padding: 0px;	
}


#FIXTURES .MATCH .home_team_goals {
	
	left: 0px;
	
	padding-right: 0px;	
}


#FIXTURES .MATCH .away_team_goals {
	
	left: 50vw;
	
	padding-left: 0px;
}



/* 	GOAL BARS	 */
#FIXTURES .MATCH .home_team_goals div, #FIXTURES .MATCH .away_team_goals div {
	
	height: 100%;
	width: 0%;

	padding: 0px;
	padding-top: 6px;
	
	color: slategray;
	font-weight: 600;
	font-size: 24px;
	line-height: 120%;
	
	background-color: white;	
}



#FIXTURES .MATCH .home_team_goals div {
	
	border-radius: 20px 0px 0px 20px;
	
	text-align: left;
	
	border-right: 1px solid #E5E5E5;
}

#FIXTURES .MATCH .away_team_goals div {
		
	border-radius: 0px 20px 20px 0px;
	
	text-align: right;

	border-left: 1px solid #E5E5E5;
}




/* 	PONGIS PLAY LINK	*/
#FIXTURES .MATCH .Pongis_play {
	
	position: absolute;
	
	left: -100vw;
	
	height: 110px;
	width: 100vw;
	
	padding-top: 35px;

	background-color: rgba(255,255,255,.5);

	transition: left .1s ease-in;
	
	z-index: 1;
}


/*
#FIXTURES .MATCH:active .Pongis_play {
	
	left: 0px;
	
	transition: left .3s .5s ease-out;
}
*/

@media screen and (orientation:portrait) {
	
	#FIXTURES .MATCH:hover .Pongis_play {
		
		left: 0px;
		
		transition: left .2s .2s ease-out;
	}
	
}



/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	SCHALTER
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


#FIXTURES .MATCH .Pongis_play .schalter {

	position: static;
	
	height: 45px;
	width: auto;


	font-family: "Press start 2P", Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0px;
	line-height: 100%;
	text-align: center;
	color: white;
	white-space: nowrap;

	padding-top: 16px;
	padding-left: 22px;
	padding-right: 18px;

	background-color: slategray;

	border-radius: 0px;
	box-shadow: 6px 6px #4E4E4E, 5px 5px #4E4E4E, 4px 4px #4E4E4E, 3px 3px #4E4E4E, 2px 2px #4E4E4E, 1px 1px #4E4E4E;

	cursor: pointer;

	zoom: 1.2;
}



#FIXTURES .MATCH .Pongis_play .schalter:hover {
	
	margin-left: -2px;
	margin-top: -2px;
	
	box-shadow: 8px 8px #4E4E4E, 7px 7px #4E4E4E, 6px 6px #4E4E4E, 5px 5px #4E4E4E, 4px 4px #4E4E4E, 3px 3px #4E4E4E, 2px 2px #4E4E4E, 1px 1px #4E4E4E;
}




#FIXTURES .MATCH .Pongis_play .schalter:active {
	
	margin-left: 3px;
	margin-top: 3px;
	
	box-shadow: none;
}



@keyframes vergroessern {

    0% { transform: scale(1); }

    100% { transform: scale(1.25); }s
}



@media screen and (orientation:portrait) {
	
	.schalter {
	
		font-size: 4vw;
		
		padding-top: 4vw;
		
		height: 11vw;	
	}
}




/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	LADERASEN
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#LADERASEN {

	position: fixed;

	top: 0px;
	left: 0px;

	height: 100%;
	width: 100%;

	background-color: springgreen;

	z-index: 5;

	display: none;
}







.laden,
.laden:before,
.laden:after {
border-radius: 50%;
}
.laden {
color: #ffffff;
font-size: 11px;
text-indent: -99999em;

position: absolute;

top: 50%;
left: 50%;

margin: -55px;

width: 10em;
height: 10em;
box-shadow: inset 0 0 0 1em;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
.laden:before,
.laden:after {
position: absolute;
content: '';
}
.laden:before {
width: 5.2em;
height: 10.2em;
background: springgreen;
border-radius: 10.2em 0 0 10.2em;
top: -0.1em;
left: -0.1em;
-webkit-transform-origin: 5.2em 5.1em;
transform-origin: 5.2em 5.1em;
-webkit-animation: load2 2s infinite ease 1.5s;
animation: load2 2s infinite ease 1.5s;
}
.laden:after {
width: 5.2em;
height: 10.2em;
background: springgreen;
border-radius: 0 10.2em 10.2em 0;
top: -0.1em;
left: 5.1em;
-webkit-transform-origin: 0px 5.1em;
transform-origin: 0px 5.1em;
-webkit-animation: load2 2s infinite ease;
animation: load2 2s infinite ease;
}
@-webkit-keyframes load2 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes load2 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}







/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	HAMBURGER AND PROFILE SWITCHES
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


#HAMBURGER, #HAMBURGER_X {

	position: fixed;

	top: 0px;
	left: 0px;

	height: 55px;
	width: 70px;

	padding: 20px;

	cursor: pointer;

	opacity: 1;

	z-index: 2;
}



#HAMBURGER_X {

	z-index: 101;
}



#HAMBURGER:hover, #HAMBURGER_X:hover {

	opacity: 1;
}





#HAMBURGER_X {

	opacity: 1;

	display: none;

	visibility: hidden;
}




#HAMBURGER div, #HAMBURGER_X div {

	height: 2px;
	width: 30px;
	
	margin-bottom: 7px;

	background-color: slategray;

	border-radius: 2px;
}


#HAMBURGER:hover div, #HAMBURGER_X:hover div {


	background-color: black;
}





#HAMBURGER_X div {

	background-color: white;
}






/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	MENU
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


#MENU {

	position: fixed;

	height: 100%;
	width: auto;

	font-family: 'Roboto', Helvetica, Arial, 'Sans serif';
	font-size: 16px;
	font-weight: 400;
	color: white;
	line-height: 140%;

	padding: 20px;

	top: 0px;

	background-color: rgba(0,0,0,.9);

	z-index: 100;

	overflow-y: scroll;

	display: none;

}




#MENU {

	left: -350px;

	padding-left: 30px;
	padding-right: 32px;

	border-right: 1px solid rgba(255,255,255,.1);
	
	transition: left 300ms ease-out;
}




#MENU div, #MENU img {

	width: auto;

	padding: 15px;
	padding-right: 40px;

	clear: left;

	font-size: 16px;
	font-weight: 400;
	color: white;
	line-height: 140%;
	text-align: left;

	background-color: rgba(255,255,255,.01);

	cursor: pointer;

	margin-top: 0px;
	margin-bottom: 0px;

}




#MENU div {

	height: 50px;
	width: auto;

	padding: 20px;
	padding-left: 55px;
	padding-top: 15px;
	padding-right: 30px;

	background-repeat: no-repeat;
	background-position: 10px center;
	background-size: 30px auto;
	
	border-radius: 5px;
}




#MENU #SWITCH {
	
	position: fixed;
	
	height: auto;

	
	margin-top: -20px;

	cursor: default;
	
	border-radius: 0px;
	
	padding: 0px;
	padding-top: 30px;
	padding-bottom: 0px;
	
	background-color: #191919;
	
	z-index: 1;
}


#MENU #sticky_separator {
	

	height: 50px;
	
	padding: 0px;
	
	cursor: default;
	
	visibility: hidden;
	
/* 	display: none; */
	
}


#MENU #SWITCH:hover {
	
	background-color: #191919;
}




#MENU #SWITCH .fixtures, #MENU #SWITCH .standings, #MENU #SWITCH .standings_off {
	
	display: inline-block;
	
	height: 45px;
	width: 50%;
	
	margin: 0px;
	margin-bottom: 10px;

	padding: 0px;
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
	
	text-align: center;
	
	background-size: auto 65%; 
	background-position: center center;
	
	border: 1px solid #474747;
	border-radius: 0px 10px 10px 0px;
	
	white-space: nowrap;
}


#MENU #SWITCH .standings, #MENU #SWITCH .standings_off  {
	
	
	border-radius: 0px 10px 10px 0px;

	border-left: none;
}


#MENU #SWITCH .fixtures  {
	

	
	border-radius: 10px 0px 0px 10px;
	
	border-right: none;
}

#MENU #SWITCH .standings_off  {
	
	
	color: rgba(255,255,255,.3);
	
	cursor: default;
}



#MENU #SWITCH .fixtures:hover, #MENU #SWITCH .standings:hover  {
	
	background-color: rgba(255,255,255,.1);
}

#MENU #SWITCH .standings_off:hover  {
	
	background-color: transparent;
}




#MENU .separator {


	padding-left: 10px;
	
	margin-top: 30px;
	margin-bottom: 0px;
	
	text-transform: uppercase;
	
	cursor: default;
	
	opacity: .3;
}


#MENU .separator:hover {

	background-color: transparent;
}






#MENU img {

	width: 220px;

	background-color: transparent;

	padding: 0px;
}





#MENU h1 {

	padding-left: 0px;

	margin-top: 20px;
	margin-bottom: 30px;

	font-family: 'Roboto Slab', Helvetica, Arial, 'Sans serif';
	font-size: 36px;
	color: white;

	cursor: default;
	
	display: none;
}



#MENU h1 {

	cursor: pointer;
}





#MENU a {

	color: white;
	text-decoration: none;
}



#MENU div:hover {

	background-color: rgba(255,255,255,.1);
}


#MENU div:active {

	background-color: rgba(0,0,0,.8);
	background-color: rgba(0,0,0,.3);
}




#MENU .get_app {
	
	width: 100%;

	text-align: center;

	padding: 0px;
	
	margin: 0px;
	margin-bottom: 40px;
	
	border-radius: 0px;
}


#MENU .get_app:hover {
	
	background-color: transparent;
}



#MENU .get_app img {

	margin: 0px;
}




.NEW_badge {
	
	position: relative;

	margin-top: -1px;
	margin-left: 10px;
	margin-right: 20px;
	
	background-color: rgba(255,255,255,.5);
	
	color: #474747;
	font-weight: 600;
	font-size: 14px;
	line-height: 100%;
	
	padding: 5px;
	padding-top: 1px;
	padding-bottom: 2px;
	
	border-radius: 5px;	
}





/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	UPDATE TIME
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


#FIXTURES #UPDATE_TIME, #TABELLE #UPDATE_TIME {
	
	font-family: 'Roboto', Helvetica, Arial, 'Sans serif';
	font-size: 14px;
	color: rgba(0,0,0,.15);
	white-space: nowrap;
}
	
	
#FIXTURES #UPDATE_TIME {

	margin-top: 0px;
	margin-bottom: -15%;

	padding-top: 0px;
	padding-bottom: 100px;
	
	background-color: white;
	
	opacity: 0;
}

#FIXTURES #UPDATE_TIME span {

	display: block;
	
	line-height: 0px;
	font-size: 18px;
	color: #E5E5E5;
	
	margin-top: -10px;
}



#TABELLE #UPDATE_TIME {

	padding-top: 5px;
	padding-left: 300px;
	
	opacity: 0;
}


#TABELLE #UPDATE_TIME div {
	
	display: none;
}	


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	COLOR STANDINGS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#COLOR_STANDINGS {

	position: static;
	
	height: 60px;
	width: 60px;
	min-width: 50px;
	
	margin-top: -18px;
	margin-left: 150px;
	
	background-image: url(../bilder/color_standings.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: auto 80%;
	
	color: rgba(255,255,255,.8);
	text-align: center;
	line-height: 100%;
	font-size: 24px;
	font-weight: 400;
	letter-spacing: -1px;
	
	padding-top: 18px;
	
	border-radius: 100%;
	
	cursor: pointer;
	
	opacity: 0;display: none;
}



#COLOR_STANDINGS:hover {
	
	
	animation: rotate 1s linear infinite;
}


#COLOR_STANDINGS div {
	
	position: absolute;
	
	height: 100px;
	width: calc(100vw - 200px - 30px);

	margin-top: -7px;
	margin-left: calc(-100vw + 200px);

	color: white;
	font-size: 42px;
	line-height: 100%;
	font-weight: 600;
	white-space: nowrap;
	text-align: right;
	letter-spacing: normal;
	text-shadow: 1px 1px 0 rgba(255,255,255,.2), -1px -1px 0 rgba(255,255,255,.2), 1px -1px 0 rgba(255,255,255,.2), -1px 1px 0 rgba(255,255,255,.2), 0px 1px 0 rgba(255,255,255,.2), 1px 0px 0 rgba(255,255,255,.2), 0px -1px 0 rgba(255,255,255,.2), -1px 0px 0 rgba(255,255,255,.2);
	text-shadow: none;
}




@keyframes rotate {

    0% { transform: rotate(0deg); }

    100% { transform: rotate(360deg); }
}




/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	ÜBERLEGFENSTER
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#MENUABDUNKLER {

	position: fixed;

	top: 0px;
	left: 0px;

	width: 100%;
	height: 100%;

	background-color: rgba(255,255,255,0);

	display: none;

	z-index: 99;
}







/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	SHARING IS CARING
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#MENU #share_to_FB, #MENU #share_to_twitter, #MENU #youtube_social, #MENU #share_on_whatsapp, #MENU #share_to_mail {

	height: 50px;
	width: auto;

	padding: 20px;
	padding-left: 55px;
	padding-top: 13px;
	padding-right: 30px;

	background-repeat: no-repeat;
	background-position: 10px center;
	background-size: 30px auto;
	background-image: url(../bilder/facebook.png);

	background-color: #1460A0;

	opacity: .8;
}



#MENU #share_to_twitter, #ENDSTAND #share_to_twitter {

	background-image: url(../bilder/twitter.png);

	background-color: #00C6F8;
}



#MENU #youtube_social {

	background-image: url(../bilder/youtube.png);

	background-color: #EF332A;
}


#MENU #share_on_whatsapp {
	
	
	background-image: url(../bilder/whatsapp.png);
	background-size: 50px auto;
	background-position: 2px center;

	background-color: #24D366;
}


#MENU #share_to_mail {

	background-image: url(../bilder/mail.png);

	background-color: #EF332A;
}



#MENU #share_to_FB:hover, #MENU #share_to_twitter:hover, #MENU #youtube_social:hover, #MENU #share_on_whatsapp:hover, #MENU #share_to_mail:hover {

	opacity: 1;
}


#MENU .helptext {
	
	
	max-width: 240px; 
	height: auto; 
	width: auto;
	
	margin-top: 0px;
	
	padding: 10px; 
	
	color: rgba(255,255,255,.3);
	
	background-color: transparent;
}

#MENU .helptext:hover {
	
	
	background: transparent;
	
	cursor: default;
}



/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	PREVIOUS & NEXT
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#PREVIOUS, #NEXT {
	
	
	position: fixed;
	
	bottom: calc(25% - 77px - 2.5vh);
	right: 20px;
	
	height: 60px;
	width: 60px;
	
	margin-top: 2.5vh;
	
	z-index: 100;
	
	background-image: url(../bilder/next.png);
	background-size: 80%;
	background-position: center center;
	background-repeat: no-repeat;
	
	border-radius: 10px;
	
	cursor: pointer;
}

#PREVIOUS {
	 
	right: 100px;
	
	background-image: url(../bilder/previous.png);
	
}
	
#PREVIOUS:hover, #NEXT:hover {
	
	background-color: rgba(0,0,0,.2);
}


#PREVIOUS:active, #NEXT:active {
	
	background-color: rgba(0,0,0,.3);
}



/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
		PROZESSOREN
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


#RSS_PROZESSOR {

	position: fixed;

	top: -1000px;

	height: 1px;
	width: 1px;
}









/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	ANIMATIONEN
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/





@keyframes vereinsfarben_einblenden {

    0% { opacity: 0; }

    100% { opacity: 1; }
}




@keyframes vereinsfarben_ausblenden {

    0% { opacity: 1; }

    100% { opacity: 0; }
}









/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~	
	
	V E R T I C A L       ( M O B I L E )

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~		
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/




@media screen and (orientation:portrait) {


  
  
  
body {
	
/* 	font-size: 7.4vw; */
	
	padding: 0%;
	
	overflow-x: hidden;
}




@media (hover: none) {
  
	#AUSWAHL div a:hover { }
	
	#HAMBURGER:hover, #HAMBURGER_X:hover { }
	
	#MENU div:hover { }
	
	#MENU div:active { }
	
	.get_app:hover { }
}



#MENU .separator {


	padding-left: 0px;
	
	margin-top: 25px;
	margin-bottom: -5px;
}




/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	GRASS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.grass, .bewegtgrass, .bewegtgrass_rueckwaerts {
	
	bottom: 12vh;
}


.gruen {
	
	height: 12vh;
}





/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	TITEL
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#TITEL, #AUSWAHL div {


	min-width: 100%;

	font-size: 8vw;
	line-height: 120%;
}




#TITEL {

	height: 12vh;
	
	padding-top: 2.5vh;
}



#TITEL div {

	width: 100%;
	
	padding-left: 0px;
	
	background-position: 7.4vw 1vw;
	background-size: 7.8vw auto;
	
	text-align: center;
}





#TITEL #dreieck, #TITEL:hover #dreieck {
	
	display: none;
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	AUSWAHL
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#AUSWAHL {
	
	width: 100%;
}

#AUSWAHL div {

	padding-right: 0px;
}



#AUSWAHL div a {
	 
	padding-top: 6px;
	padding-left: calc(10px + 7.8vw + 3.8vw);
	padding-right: 0px;
	
	background-position: 10px center;
	background-size: 7.8vw auto;
}


#AUSWAHL .show_more a {
	
	font-size: 8vw;
	line-height: 120%;
}



#AUSWAHL .get_app {

	text-align: center;

	padding: 0px;

	margin: 0px;
	margin-top: 30px;

	background-color: transparent;
}


#AUSWAHL .get_app a {

	padding: 0px;
	margin: 0px;
	margin-left: 20vw;
	
	width: 60vw;
}




#AUSWAHL .get_app img {

	padding: 0px;
	margin: 0px;
	
	width: 60vw;
}






/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	PUNKTE
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#TABELLE {
		
	transform-origin: top left;
	
	transform: rotate(90deg);
	
	top: 5vh;
	left: 32vw;
	
	width: 68vw;
	
	margin-left: 0vw;
}

#TABELLE .position, #TABELLE .punktcontainer, #TABELLE .punkte, #TABELLE .tordifferenz, #TABELLE .zonenname {

	height: 7.6vw;
	width: 7.6vw;
}	


#TABELLE .abstand {

	height: 7.4vw;
}

.hintergrundlinie, .extra_hintergrundlinie {
	
	margin-top: 3.5vw;
}



#TABELLE .position {
	
	transform: rotate(-90deg);
	
	margin-top: 8.8vw;
	margin-left: 1.8vw;
	
	font-size: 3.7vw;
}


#TABELLE .punkte {
	
	
	border-radius: 3.8vw;
	
	font-size: 3.7vw;
	
	padding-top: 1.6vw;

}


#TABELLE .punkte div {
	
	transform: rotate(270deg);	
}


#TABELLE .name {
	
	transform: rotate(270deg);
	
	margin-top: -10vw;
	margin-left: 6.1vw;
	
	font-size: 4.2vw;
}

#TABELLE .tordifferenz {
	
	height: 16vw;
	
	font-size: 3vw;
	
	padding-top: 10vw;
}

#TABELLE .tordifferenz div {
	
	transform: rotate(-90deg);
}





.extra_hintergrundlinie {
	
	
	display: block;
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	ZONEN
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


#TABELLE .zone {

	padding-top: 0px;
	padding-bottom: 12.8vw;

	border-bottom: 4.9vw solid rgba(0,0,0,.1);

}



#TABELLE .zonenname {

	margin-bottom: -26vw;

	font-size: 3.2vw;

}



/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	FIXTURES
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#FIXTURES {
	
	padding-bottom: calc(12vh + 50px);
}



/* 	GOAL BARS	 */
#FIXTURES .MATCH .home_team_goals div, #FIXTURES .MATCH .away_team_goals div {

}



/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	HAMBURGER AND PROFILE SWITCHES
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


#HAMBURGER, #HAMBURGER_X {

	top: 8px;
	left: auto;
	right: 0px;
	
/* 	width: 20px; */
}


#HAMBURGER div {
	
	margin-bottom: 8px;

}




/*
#HAMBURGER div {

	height: 7px;
	width: 7px;
	
	margin-bottom: 4px;
	
	background-color: transparent;
	
	border: 2px solid slategray;
	border-radius: 100%;
}


	
#HAMBURGER:hover div, #HAMBURGER_X:hover div {

	background-color: transparent;
}
*/




/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	MENU
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#MENU {

	left: auto;
	right: -350px;
}


#MENU #SWITCH .standings  {
	
/* 	background-image: url(../bilder/standings_vertical.png); */ 
}


#MENU .helptext {
	
	padding-left: 0px; 
}



/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	PREVIOUS & NEXT
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#PREVIOUS, #NEXT {
	
	
	display: none;	
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	UPDATE TIME
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


#FIXTURES #UPDATE_TIME, #TABELLE #UPDATE_TIME {
	
	font-size: 16px;
}


#FIXTURES #UPDATE_TIME {

	margin-bottom: -20vh;
}


#TABELLE #UPDATE_TIME {


	height: 30px;
	
	padding: 0px;

	color: rgba(0,0,0,0);	
}


#TABELLE #UPDATE_TIME div {

	position: absolute;
	
	margin-left: 100px;
	
	padding-bottom: 200px;

	
	color: rgba(0,0,0,.15);
	
	transform: rotate(-90deg);
	transform-origin: top left;
	
	display: block;
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	COLOR STANDINGS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#COLOR_STANDINGS {
	
	margin-top: 0px;
	margin-left: 150px;
	
	transform: rotate(270deg);
	transform-origin: top left;
}


#COLOR_STANDINGS:hover {
	
	opacity: .8;
	
	animation: none;
}

#COLOR_STANDINGS div {
	
	width: 100vw;

	margin-top: -100px;
	margin-left: calc(-50vw + 15px);
	
	font-size: 8vw;
	line-height: 100%;
	text-align: center;
	
	overflow: hidden;
}





	
	
	
	
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
}







/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

	SMALL MOBILE SCREENS (iPHONE 5S)

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


@media (max-width: 320px) {
		


}