/*==========  Mobile First Method  ==========*/

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 319.99px) {
    #official-store .carousel .slide {
        width: 100%;
    }
}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {
    #official-store .carousel .slide {
        width: 50%;
    }
    
    #header #next-match, #header #buy-ticket, #header #next-match-time {
        margin: -2rem auto 0 0;
    }
    
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
    #official-store .carousel .slide {
        width: 33.3%;
    }
    
    #collapsed-menu-bars {
        display: none;
    }
    
    #main-menu {
        margin: 8px 0 0 0px;
    }

    #main-menu > ul > li:hover > ul, #main-menu > ul > li > ul:hover, 
    #main-menu > ul > li > ul > li:hover > ul, #main-menu > ul > li > ul > li > ul:hover {
        display: block;
        transition: 0.2s ease;
        cursor: default;
    }
    
    #main-menu > ul > li > ul > li > ul > li:hover > a::before {
        margin-top: 3px;
        margin-left: -1.7rem;
        transform: rotate(-135deg);
        transition: all 0.2s ease;
    }
    
    #main-menu > ul > li:hover > a, #main-menu > ul > li ul > li:hover > a {
        color: #b99f6e;
    }
	
	#main-menu > ul > li:hover > span, #main-menu > ul > li ul > li:hover > span {
        color: #b99f6e;
    }
    
    #main-menu ul > li > ul > li > ul {
        margin-left: 2.4rem;
    }
	
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
    #official-store .carousel .slide {
        width: 25%;
    }
    
    #home-team .slider-container {
        height: 650px;
    }
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
    #home-team .slider-container .slideset .slide {
        width: 20% !important;
    }
}

/*==========  Non-Mobile First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
    #home-team .slider-container .slideset .slide {
        width: 25% !important;
    }
}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
    #home-team .player-info .player-name {
        font-size: 16px;
        line-height: 1;
    }
    
    #home-team .player-info .player-position {
        font-size: 13px;
        line-height: 3;
    }
    
    #home-team .slider-container .slideset .slide {
        width: 33.3% !important;
    }
    
    #home-team .slider-container {
        height: 700px;
    }
    
    #header .header-holder .header-container .store-lang {
        width: 30%;
    }
    
    #header .header-holder .header-container .social-title {
         width: 70%;
    }
    
    #header .header-holder .header-container .icons {
        margin: -15px 9%;
    }
    
    #videogallery .video-content{
    	padding: 0 10px;
    }
}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
    #home-team .slider-container {
        height: 500px;
    }
    
    #home-team .player-info .player-name {
        font-size: 17px;
        line-height: 1;
    }
    
    #home-team .player-info .player-position {
        font-size: 13px;
        line-height: 3;
    }
    
    #home-team .slider-container .slideset .slide {
        width: 50% !important;
    }
    
    #header .header-holder .header-container .store-lang {
        width: 16%;
    }
    
    #header .header-holder .header-container .social-title {
         width: 84%;
    }
    
    #header .header-holder .paok-logo {
        margin-top: -0.5rem;
    }
    
    #collapsed-menu-bars {
        display: block;
        width: auto;
        cursor: pointer;
        position: relative;
        top: -1rem;
        right: 0;
        padding: 1rem;
        float: right;
        font-size: 25px;
        cursor: pointer;
    }
    
    #main-menu.collapsed {
        display: block;
        left: -5rem !important;
        position: relative;
        top: -0.7rem;
        left: 0;
    }

    #main-menu:not(.collapsed) {
        display: none;
    }
	
	#header .topbar {
		display: none;
	}
	
	#header .topbar-icons {
		position: relative;
		background: #fff;
		text-align: center;
	}
	
	#player .social-icon-container {
		display: inline-grid;
	}
    
    /* BEGIN - Main Menu - Depth-0 */
    #main-menu > ul {
        border: 1px solid #aeadad;
        background: #e3e3e3 !important;
        z-index: 100;
    }
    /* END - Main Menu - Depth-0 */
    
    
    
    /* BEGIN - Sub Menu - Depth-1 */
    #main-menu > ul > li > ul {
        margin-left: 2rem;
        width: calc(-0.65rem + 100vw) !important;
    }

    #main-menu > ul > li > ul > li {
        width: 100%;
        margin-left: -0.6rem;
    }
    
    #main-menu > ul > li > ul > li > a {
        padding-left: 1.5rem;
		display: block;
    }
    /* END - Sub Menu - Depth-1 */
    
    
    
    /* BEGIN - Sub-sub Menu - Depth-2 */
    #main-menu ul > li > ul > li > ul {
        height: auto;
        position: relative;
        margin: -1.3rem 0 1.7rem 3rem;
        width: calc(-0.65rem + 100vw) !important;
    }

    #main-menu > ul > li > ul > li > ul > li > a {
        padding-left: 2.5rem;
    }

    #main-menu > ul > li > ul > li > ul > li > a::before {
       border: 0 !important;
    }
    
    #main-menu > ul > li > ul > li > ul > li {
        width: 100%;
        margin-left: -1.6rem;
        padding-left: 3rem;
    }
    /* END - Sub-sub Menu - Depth-2 */
    
    #main-menu ul > li {
        border-top: 1px solid #b6b0b0;
    }
    
    #main-menu ul {
        background: transparent;
        width: 101vw !important;
        top: 3rem;
        left: -2.4rem !important;
        display: block;
        padding: 0 !important;
    }
    
    #main-menu ul > li > ul, #main-menu ul > li > ul > li > ul {
        background: transparent;
        height: auto;
        position: relative;
    }
    
    #main-menu ul li {
        display: block;
        padding: 0.8rem 1rem !important;
        position: relative !important;
    }
    
    #main-menu ul li > a {
        color: #000 !important;
    }
    
    #main-menu ul li > a:hover {
        color: #b99f6e !important;
    }
    
    #main-menu ul > li::after {
        content: "";
        font-family: "FontAwesome";
        border-left: 0;
        top: 0.5rem;
        right: 2rem;
        position: absolute;
    }
    
    #main-menu ul > li:not(.sub-menu-data-shown)::after {
        content: "\f054";
        transition: all 0.2s ease;
    }

    #main-menu ul > li.sub-menu-data-shown::after {
        content: "\f078";
        transition: all 0.2s ease;
    }
    
    #main-menu li:not(.deeper)::after { /* li item without deeper menu */
        content: "" !important;
    }
    
    #main-menu > ul > li.sub-menu-data-shown {
        background: #e3e3e3;
    }
    
    #header .header-holder .header-container .store-lang {
        width: 40%;
    }
    
    #header .header-holder .header-container .social-title {
         width: 60%;
    }
    
    #news .news-title .center {
        margin: auto;
        position: absolute;
        width: 100%;
    }
    
    #standings-leaders .organizations > ul,
    #standings-leaders .organizations > ul > li{
        border-top: 0;
    }
	
}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width: 480px) {
    #home-team .slider-container .slideset .slide {
        width: 100% !important;
        transform: scale(0.7);
        height: 700px;
        top: -6rem;
        position: relative;
    }
    
    #videogallery .slideset .slide {
        width: 100% !important;
    }
    
    
    #main-menu {
        top: 2.4rem !important;
    }
    
    #main-menu > ul {
        top: 0rem !important;
    }
    
    #header .paok-logo img {
        filter: drop-shadow(0px 0px 2px #fff);
    }
    
    #header .header-holder .header-container .store-lang {
        width: auto;
        right: 0;
        position: absolute;
        background: transparent;
        border: 0;  
    }
    
    #header .header-holder .header-container .store-lang .separate-right,
    #header .header-holder .header-container .store-lang .store-lang-inside {
        border: 0;
        background: transparent;
    }
    
    #header .header-holder .header-container .social-title {
        width: 100%;
    }
    
    #header .header-holder .header-container .icons {
        width: auto;
        margin-left: -8rem;
        margin-top: -1.2rem;
    }
    
    #header .header-holder .header-container .icons .cart,
    #header .header-holder .header-container .icons .lang {
        margin: 0rem 0.2rem;
        position: relative;
        display: inline-block;
        border: 1px solid #000;
        padding: 2px;
    }
    
    #header .header-holder .header-container .social {
        background: transparent;
        height: 30px;
        width: 100%;
        position: relative;
    }
    
    #header .header-holder .header-container .social .search-icon {
        margin: 0.1rem 0 0 -6rem;
        position: absolute;
        top: 4.1rem;
        left: 8rem;
        border: 1px solid #000;
        padding: 2px;
        border-radius: 100px;
        font-size: 15px;
        color: #000;
    }
    
    #header .topbar .topbar-titles .next-match-time {
        position: absolute;
        color: #fff;
        margin: 6.8rem auto 0 auto;
        z-index: 1;
        width: 100%;
        height: auto;
    }
    
    #header .topbar .topbar-titles .next-match {
        position: absolute;
        top: 2rem;
        right: 0;
    }
    
    #header .topbar #next-match-time {
        position: absolute;
        top: 1rem;
        margin: auto;
        width: 100%;
        border: 0;
    }
    
    #header .topbar #next-match {
        position: absolute;
        top: -4.7rem;
        border: 0;
        right: 10rem;
    }
    
    #header .topbar #next-match .middle-line {
        display: none;
    }
    
    #header .topbar #next-match .team-1 img,
    #header .topbar #next-match .team-2 img {
        overflow: hidden;
        height: 70px;
        width: auto;
    }
    
    #header .topbar .topbar-white {
        height: 100px;
    }
    
    #header .topbar #buy-ticket {
        position: absolute;
        top: -3.3rem;
        color: #000;
        right: 0;
        border: 0;
    }
    
    #header .topbar #buy-ticket > a {
        background: #1a1a1a;
        color: #fff;
        margin: 12px 0px;
        font-size: 16px;
        padding: 4px 8px;
        right: 0rem;
    }
    
    #header .topbar-titles .next-match-time .days, 
    #header .topbar-titles .next-match-time .hours, 
    #header .topbar-titles .next-match-time .minutes {
        height: auto;
    }
    
    #header .header-holder .social-title .social .custom-icons {
        margin-right: -3px;
    }
    
    #official-store .title-container > div {
        font-size: 18px !important;
        margin: 0.4rem 0 0 0;
    }
    
    #home-team .page-title .center {
        margin-top: 2rem;
    }
    
    #player .player-cover .name {
        font-size: 40px !important;
    }
    
    #player .player-cover .surname {
        font-size: 50px !important;
    }
    
    #player .player-info .info-left div + div + div .details {
        text-align: left;
    }
    
    #player .player-info .info-left div + div + div + div + div {
        position: absolute !important;
        top: 8rem !important;
        right: 0 !important;
    }
    
    #player .player-info .info-left div + div + div + div + div .details {
        text-align: right !important;
    }
    
    .players-container .players-pages ul,
    .players-container .players-pages li,
    #standings-leaders .organizations ul,
    #standings-leaders .organizations li {
        border-top: 0 !important;
    }
    
    #newsheadline .news-title .center {
        margin: 1rem 0 0 0;
    }
    
    .tickets-container .tickets-info .ticket-icon-container .ticket-icon {
        width: 50%;
    }
    
    #news .posts .post {
        height: auto;
    }
}
/* Custom, iPhone Retina */ 
@media only screen and (max-width: 320px) {

}

/* custom addons */
@media only screen and (min-width: 470.01px) and (max-width: 679.98px) {
    #header #buy-ticket, #header #next-match-time, #header #next-match {
        margin-top: -2rem;
    }
    
    #header .topbar #next-match .team-1,
    #header .topbar #next-match .team-2 {
        width: auto;
    }
    
    #header .topbar #next-match {
        position: absolute;
        top: 2rem;
        left: 0rem;
    }
    
    #header .topbar #next-match .middle-line {
        display: none;
    }
    
    #header .topbar #next-match-time {
        width: 200px;
    }
}

@media only screen and (min-width: 680.01px) {
    #header #buy-ticket, #header #next-match-time, #header #next-match {
        margin-top: 0rem;
    }
}