/*
Description: Ujpest FC Custom CSS .
Author: Ben Szabo
Author URI: http://b3nk3.co.uk

2016 All right reserved.

Credit: http://onepcssgrid.mattimling.com/
*/

/* *********************************************************************************************************************
	One% CSS Grid - 12 Columns Fluid CSS Grid System

	Why One% ? Let’s count ...
		we have 12 columns (magic number divided by 2, 3, 4, 6)

		for 12 columns we need 11 margins

		so if we count margin 3%, then 3% * 11 margins = 33%

		and if we count width of 1 column 5.5%, than 5.5% * 12 columns = 66%

		in the end we have 33% + 66% = 99% aaand ???

		1% is still here so that's the name - One%

	2 starting options ? Let’s count a bit more ...
		1200px - perfectly fits 1280 screens
			12 columns
			margin 3% / 36px (full-width)
			col1 5.5% / 66px (full-width)

		1000px - perfectly fits 1024 screens
			12 columns
			margin 3% / 30px (full-width)
			col1 5.5% / 55px (full-width)
*/





/* *********************************************************************************************************************
 * Main container for all
 */
.onepcssgrid-1000, .onepcssgrid-1200 {
	margin: 0 auto;
	padding: 0 1%; /* THAT'S THE NAME ;) */
}

.onepcssgrid-1200 {
	max-width: 1200px;
}

.onepcssgrid-1000 {
	max-width: 1000px;
}

.onerow {
	clear: both;
	padding: 0 10px;
}





/* *********************************************************************************************************************
 * Common columns definitions
 */
.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 {
	float: left;
	margin: 0 3% 0 0;
}

.col1:last-child, .col2:last-child, .col3:last-child, .col4:last-child, .col5:last-child, .col6:last-child,
.col7:last-child, .col8:last-child, .col9:last-child, .col10:last-child, .col11:last-child, .col12:last-child, .omega {
	margin: 0;
}

.col1 { width: 5.5%; }
.col2 { width: 14%; }
.col3 { width: 22.5%; }
.col4 { width: 31%; }
.col5 { width: 39.5%; }
.col6 { width: 48%; }
.col7 { width: 56.5%; }
.col8 { width: 65%; }
.col9 { width: 73.5%; }
.col10 { width: 82%; }
.col11 { width: 90.5%; }
.col12 { width: 99%; margin: 0; }

.col1 img, .col2 img, .col3 img, .col4 img, .col5 img, .col6 img, .col7 img, .col8 img, .col9 img, .col10 img, .col11 img, .col12 img {
	width: 100%;
	height: auto;
	display: block;
}
@media all and (min-width: 1700px){
	.onepcssgrid-1200{
		width: 1200px !important;
	}
	.fixed{
		position: fixed;
		width: 20%;
		margin: 95px 0 0 0px;
	}
	.fixedright{
		margin-left: 5px;
		width: 15%;
	}
}
@media all and (min-width: 1500px) and (max-width: 1699px){
	html{
		font-size: 90%;
	}
	.onepcssgrid-1200{
		width: 1100px !important;
	}
	.fixed{
		position: fixed;
		width: 20%;
		margin: 95px 0 0 -50px;
	}
	.fixedright{
		margin-left: 5px;
		width: 15%;
	}
}
@media all and (min-width: 1400px) and (max-width: 1499px) {
	html{
		font-size: 80%;
	}
	.onepcssgrid-1200{
		width: auto; /* viktor */
		max-width: 1000px;
	}
	.fixed{
		position: fixed;
		width: 20%;
		margin: 95px 0 0 -50px;
	}
	.fixedright{
		margin-left: 5px;
		width: 15%;
	}
	.upcoming-game{
		margin:12px 0px 0px 15%;
	}
	.whosplaying{
		top: 0;
	}
	.whichround{
		left: -12%;
	}
	.logo-home, .logo-away, .side-thing-container{
		display: none;
		visibility: hidden;
	}
	.shop-banner{
		/*margin-right: 2.5% !important;*/
	}
}
@media all and (min-width: 1280px) and (max-width: 1399px) {
	/*.players, .playersdetail{
		display: none;
		visibility: hidden;
	}*/
	html{
		font-size: 80%;
	}
	.onepcssgrid-1200{
		width: auto; /* viktor */
		max-width: 1000px;

	}
	.fixed{
		position: fixed;
		width: 20%;
		margin: 95px 0 0 -50px;
	}
	.fixedright{
		margin-left: 5px;
		width: 15%;
	}
	.vertical{
		display: block;
		visibility: visible;
	}
	.nonvertical{
		display: none;
		visibility: hidden;
	}
	.upcoming-game{
		margin:12px 0px 0px 15%;
	}
	.whosplaying{
		top: 0;
	}
	.whichround{
		left: -12%;
	}
	.logo-home, .logo-away, .side-thing-container{
		display: none;
		visibility: hidden;
	}
	.shop-banner{
		/*margin-right: 2.5% !important;*/
	}
}
@media all and (min-width: 1025px) and (max-width: 1279px) {
	html{
		font-size: 80%;
	}
	.onepcssgrid-1200{
		width: auto; /* viktor */
		max-width: 1000px;

	}
	.players, .playersdetail{
		display: none;
		visibility: hidden;
	}	
	.side-thing-container{
		display: none;
		visibility: hidden;
	}
	.upcoming-game{
		margin:12px 0px 0px 15%;
	}
	.whosplaying{
		top: 0;
	}
	.whichround{
		left: -12%;
	}
	.logo-home, .logo-away, .side-thing-container{
		display: none;
		visibility: hidden;
	}
	.menubar{
		font-size: 0.85rem !important;
	}

	.onepcssgrid-1200{
		/*max-width: 1220px;*/
	}
	.shop-banner{
		/*margin-right: 2.5% !important;*/
	}
}
/*  */
@media all and (min-width: 748px) and (max-width: 1024px) {
	html{
		font-size: 65%;
	}
	.onepcssgrid-1200{
		width: auto; /* viktor */
		max-width: 1000px;

	}
	.players, .playersdetail{
		display: none;
		visibility: hidden;
	}
	.onepcssgrid-1000 {
		max-width: 1000px;
	}

	.onepcssgrid-1000 .onerow {
		padding: 0;
	}
	.onerow{
		padding: 0;
	}
	.section-header-one, .logo-home, .logo-away, .side-thing-container{
		display: none;
		visibility: hidden;
	}
	.logo-box .logo {
		height: 55px;
		top: 4px;
		left: 10%;
	}
	.logo-box-bg, .logo-box-skew{
		height: 65px;
		box-shadow: none;
	}
	.logo-box-bg{
		width: 45%;
	}
	.logo-box-skew{
		left:-55px;
	}
	.upcoming-game{
		margin:12px 0px 0px 15%;
		width: 35%;
	}
	.whosplaying{
		top: 0px;
	}
	.teams{
		font-size: 1.5em;
	}
	.wherenwhen {
		display: none;
		visibility: hidden;
	}
	.wherenwhen-tablet{
		display: block;
		visibility: visible;
	}
	.menubar-bg{
		width: 100%;
		left: -3.5%;
	}
	.menubar{
		margin-left: 0 !important;
	    float: left;
	    width: 100%;
	}
	.menubar ul{
		margin: 0;
		float: left;		
	}
	.menubar ul li{
	}
	.menubar ul li a {
	    font-family: Myriad Pro SemiBold;
		font-size: 1.25rem !important;
	}
	.whichround{
		left:-13%;
		height: 24px;
	}
	.featured-title{
		font-size: 1.5em;
		line-height: 1.5;
	}
	.featured-desc{
		margin-top: 0px;
	}
	.featured-text{
		max-height: 105px;
		overflow: hidden;
	}
	.open-featured-btn {
	    height: 24px;
	    border-top: 24px solid #6d4099;
	    border-left: 24px solid transparent;
	    top: 10px;
	}
	.open-featured-btn p{
		margin: -20px 0 0 5%;
	}
	.post-title{
		width: 65%;
		max-height: 2.25em;
		overflow: hidden;
		line-height: 1.2em;
	}
	.post-title a{
		line-height: 1.1;
	}
	.news-buttons a{
		margin-left: 1.5%;
	}
	.misc-btn{
		z-index: 1;
	    height: 20px;
	    background-color: #a79468;
	    position: absolute;
	    text-align: center;
	    bottom: 0;
	    right: 0;
	    border: none;
	    float: none;
	    width: auto;
	    left: 0;
	}
	.misc-btn p{
		font-family: "Myriad Pro SemiBold";
	    font-size: 1rem;
	    color: #FFF;
	    text-transform: uppercase;
	    display: inline-block;
	    padding: 5px 0;
	    top: 0;
	    right: 0;
	}
	.misc-btn span.arrow {
	    display: none;
	    visibility: hidden;
	}
	.s-icon{
		position: relative;
		top:10px;
		float: left;
		font-size: 1.5em;
		color: #6d4099;
		-webkit-transform: skew(45deg);
	    -moz-transform: skew(45deg);
	    -o-transform: skew(45deg);
	    transform: skew(45deg);
	}
	.face{
		left: 13px;
	}
	.twitter, .flickr, .yt{
		left: 11px;
	}
	.insta{
		left: 12px;
	}
	.flag-icon{
		left: 8px;
	}

	.post-title{
		width: 100%;
		overflow: visible;
	}
	.post-date {
	    float: left;
	    text-align: left;
	    color: rgba(0,0,0,0.3);
	    margin: 5px 0 0;
	}
	.article{
		height: auto;
	}
	.tabletbanner{
		display: none;
		visibility: hidden;
	}
	.shop-banner{
		margin-right: 4% !important;
	}
	.box-header span.arrow {
		top: -37px;
	}
	.news-buttons span.arrow {
		color: #c5a2db;

	}
	.article-category{
		height: 12px;
	}
	.article-date{
		height: 13px;
	}
	.mediagrid article .media-preview{
		height: 150px;
	}
	.mediagrid article header .article-category{
		margin-top: -10px;
		height: 29px;
	}
	.shop-banner,.ticket-banner{
		height: 68px;
	}
}

/* *********************************************************************************************************************
 * Small devices
 */
@media all and (min-width: 0) and (max-width: 747px) {
	html{
		font-size: 80%;
	}

	.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 {
		float: none;
		width: 100%;
		margin: 0 auto;
	}
	.players, .playersdetail{
		display: none;
		visibility: hidden;
	}
	.onepcssgrid-1200 {
		width: auto; /* viktor */
		max-width: 1000px;

		padding: 0 3%;
	}
	.onerow{
		padding: 0;
	}
	.section-header-one, .header-two, .social-bg, .misc{
		display: none;
		visibility: hidden;
	}
	.mobileheader{
		display: block;
		visibility: visible;
		background-color: #3c1f5b;
		width: 100%;
		padding: 5px 0;
		position: relative;
		z-index: 2;
	}
	.mobileheader-inner{
		width: 97%;
		margin: 0 auto;
		height: 50px;
	}
	.mobileheader-inner .navtoggle, .mobileheader-inner .language{
		display: block;
	    width: 44px;
	    height: 44px;
	    position: absolute;
	    left: 3%;
	    top: 8px;
	    font-size: 2em;
	    line-height: 1em;
	    cursor: pointer;
	    color: #fff;
	}
	.mobileheader-inner .language{
		top: 18px;
		right: 1%;
		left: initial;
	}
	.mobileheader-inner .language span{
		width: 100%;
	}
	.mobileheader-inner .navtoggle span {
	    display: block;
	    position: absolute;
	    top: 14px;
	    left: 9px;
	    width: 26px;
	    height: 2px;
	    background: #a79468;
	    -webkit-transition: 350ms;
	    -moz-transition: 350ms;
	    -o-transition: 350ms;
	    -ms-transition: 350ms;
	    transition: 350ms;
	}
	.mobileheader .logo{
		position: absolute;
		top: 5px;
		left: 50%;
		margin-left: -40px;
	}
	.mobileheader-inner .navtoggle span.l2, .mobileheader-inner .navtoggle span.l3{
		top: 21px;
	}
	.mobileheader-inner .navtoggle span.l4{
		top: 28px;
	}
	.sb-active .l1{opacity:0; top:-50px !important;}
  	.sb-active .l2{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg) ;transform:rotate(-45deg)}
  	.sb-active .l3{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg) ;transform:rotate(45deg)}
	.sb-active .l4{opacity:0; top:88px !important;}

	#sb-site {
		-webkit-transform: translate( 0px );
		   -moz-transform: translate( 0px );
		     -o-transform: translate( 0px );
		        transform: translate( 0px );
		
		-webkit-transition: -webkit-transform 400ms ease;
		   -moz-transition:    -moz-transform 400ms ease;
		     -o-transition:      -o-transform 400ms ease;
		        transition:         transform 400ms ease;
		
		-webkit-transition-property: -webkit-transform, left, right; /* Add left/right for Android < 4.4. */
		-webkit-backface-visibility: hidden; /* Prevents flickering. This is non essential, and you may remove it if your having problems with fixed background images in Chrome. */
	}
	.banners{
		display: none;
		visibility: hidden;
	}
	.featured-img, .featured-descbox{
		position: initial;
	}
	.flex-control-nav{
		bottom: -15px !important;
	}
	.flex-direction-nav a{
		top: 0px !important;
	}
	.whichround{
		display: none;
		visibility: hidden;
	}
	.whichround-mobile{
		margin: 20px auto 0;
	    float: left;
	    left: 0;
		background-color: #c5a2db;
	    display: inline-block;
	    visibility: visible;
	}
	.whichround-mobile p{
		padding: 10px;
		font-family: 'Myriad Pro Bold';
		font-size: 1em;
		color: #3c1f5b;
	}
	.openfeatured-btn{
		margin:20px -25% 0 0;
	}
	.tabella,.photo{
		margin-bottom: 20px;
	}
	.points{
		text-align: center !important;
	}
	.article{
		height: auto;
	}
	.article .col3{
		max-height: 100%;
	}
	.article .post-title{
		width: 100%;
		margin-top: 5px;
		line-height: 1.5;
		font-size: 1.25rem;
	}
	.article .post-date{
		text-align: left;
		float: left;
		font-size: 1rem;
	}
	.news-buttons a{
		font-size: 1rem;
	}
	.video{
		display: -webkit-box;
	    display: -moz-box;
	    display: box;

	    -webkit-box-orient: vertical;
	    -moz-box-orient: vertical;
	    box-orient: vertical;
	}
	.video span{
		-webkit-box-ordinal-group: 1;
	    -moz-box-ordinal-group: 1;
	    box-ordinal-group: 1;
	}
	.video .videotext{
		text-align: left !important;
		-webkit-box-ordinal-group: 2;
	    -moz-box-ordinal-group: 2;
	    box-ordinal-group: 2;
	}
	.missedshot{
		position: relative;
		display: block;
		margin:0 0 15px 0;
		color: #333;
	}
	.missedshot a{
		color: #333;
	}
	.news_entry .content p span img{
		margin: 0;
		width: 100%;
		height: auto;
	}
	.news_entry .content p iframe{
		width: 100%;
		height: 60vw;
	}

	.subpage-header{
		margin-top: 15px;
	}
	/* Hirek aloldal*/
	.newsgrid{
		margin-bottom: 15px;
	}
	.newsgrid article header{
		padding: 0;
	}
	.newsgrid article header .article-category{
		margin-left: 0;
	}
	.newsgrid article .article-title{
		padding: 15px 0 10px;
	}
	.newsgrid article p{
		padding: 0 10px 10px;
	}

	/*MobileMenu*/
	.mobilemenu{

	}
	.mobilemenu ul{
		/*margin-right: 10%;
		float: right;*/
		display: block;
	}
	.mobilemenu ul li{
		width: 100%;
		list-style-type: none;
		display: inline-block;
	}
	.mobilemenu ul li:hover{
		background-color: #c5a2db;
	}
	.mobilemenu ul li a{
		font-family: Myriad Pro Bold;
		font-size: 1.25em;
		text-transform: uppercase;
		text-decoration: none;
		color: #fff;
		padding: 15px 5px 15px 15px;
		display: block;
		text-align: left;
	}

	/* PLayers pgae*/

	.letters_abc{
		font-size: 1em;
		padding: 3.5px;
	}
}