@font-face {
    font-family: 'Brandon Grotesque';
    src: url('../font/BrandonGrotesque-Regular.woff2') format('woff2'), url('../font/BrandonGrotesque-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Brandon Grotesque';
    src: url('../font/BrandonGrotesque-RegularItalic.woff2') format('woff2'), url('../font/BrandonGrotesque-RegularItalic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Brandon Grotesque';
    src: url('../font/BrandonGrotesque-Medium.woff2') format('woff2'), url('../font/BrandonGrotesque-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Brandon Grotesque';
    src: url('../font/BrandonGrotesque-MediumItalic.woff2') format('woff2'), url('../font/BrandonGrotesque-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Brandon Grotesque';
    src: url('../font/BrandonGrotesque-Bold.woff2') format('woff2'), url('../font/BrandonGrotesque-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Brandon Grotesque';
    src: url('../font/BrandonGrotesque-BoldItalic.woff2') format('woff2'), url('../font/BrandonGrotesque-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
}
/** Icon svg's, credits to Font Awesome : https://origin.fontawesome.com/license **/

/* Generic */
html { overflow: scroll; overflow-x: hidden; font-size: 16px; line-height: 1; font-family: Arial, sans-serif; margin: 0; color: #fff; background-color: rgba(21, 21, 21, 0.65); }
body { margin: 0; background: #3d050b; color: #fff; overflow: auto; }
.flag {background: #FFE936}
/*body::before { content: ""; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(21, 21, 21, 0.65); z-index: 0; }*/

html, body, [ng-view] { height: 100%; }

.overlay:after {content: ''; display: none; position: absolute; top: 0; bottom: 0; right: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 10; pointer-events: none;}

::-webkit-scrollbar {
    width: 0;  /* remove scrollbar space */
    background: transparent;  /* optional: just make scrollbar invisible */
}
/* optional: show position indicator in red */
::-webkit-scrollbar-thumb {
    background: #FF0000;
}

input, textarea, keygen, select, button { font-size: 1rem; font-family: "Brandon Grotesque", sans-serif; font-weight: 400; }

select {width: 250px; height: 50px; font-weight: bold; font-size: 1.2rem; border: 2px solid #e31b23; border-top-left-radius: 10px; border-bottom-right-radius: 10px; cursor: pointer; text-align: center; text-align-last:center;}
select option {cursor: pointer;}

.clear { clear: both; }
.clearfix::after { content: ""; display: table; clear: both; }

*:focus { outline: none; }

img { border: 0; }

#container .center-content {position: absolute;bottom: 0;top: 0;left: 0;right: 0;width: 50%;height: 50%;margin: auto;}

.md-dialog-container {position: absolute !important; min-height: 200px; top: 33% !important; }

/* NAV */
#container header { text-align: center; }
#container header a { display: inline-block; text-decoration: none; }
#container header a img { height: 50px; width: auto; display: block; border: 0; }

#navigation {background-color: #727272;}
#navigation #previous {float: left; margin-left: 20px;}
#navigation #next {float: right; margin-right: 20px}
#navigation div {display: inline-block; line-height: 40px;}
#navigation a {text-decoration: none;display: inline-block; font-size: 2em; color: white;}

#navigation-arrows {width: 100%;}

/* Base */
[ng-view] { max-width: 1000px; margin: 0 auto; box-sizing: border-box; position: relative; z-index: 1; text-align: center; }

/* Actions */
.btn { padding: 15px 20px; font-size: 1.25rem; background: #e31b23; display: inline-block; cursor: pointer; border-radius: 3px; color: #fff; }
.btn:hover { background: #b8161f; }

#actions { margin-top: 25px; text-align: center; position: relative; }
.action { vertical-align: middle; display: inline-block; cursor: pointer; padding: 5px 25px 10px; background : #0071ee;color: #fff; font-weight: 500; font-size: 1.25rem; min-width: 150px; box-sizing: border-box; transition: 0.25s; }
.action:hover { background-color: #fff; color: #666; }
.action span { display: inline-block; vertical-align: middle; }

#action-errors { margin-bottom: 10px; }
#action-errors .form-md-tooltip { position: relative; display: block; margin: 0 0 5px 0; padding: 10px; background-color: #ff9933; font-weight: 500; text-align: left; }
#action-errors .form-md-tooltip::after { }

/* Popup */
popup { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.5); display: flex; flex-flow: row wrap; align-items: center; justify-content: center; padding: 25px; overflow: auto; }
popup .popup-wrapper { position: relative; background: #fff; border-radius: 3px; padding: 25px; text-align: center; min-width: 250px; }
popup .popup-wrapper.extended { box-sizing: border-box; flex: 1 1 100%; height: 100%; padding: 5px; margin: 10px -15px 0; }
popup .popup-close { display: block; position: absolute; bottom: 100%; margin-top: -10px; transform: rotateZ(45deg); font-size: 2rem; right: 0; }
popup .popup-close::before { content: "\0002B"; display: block; }
popup .popup-title { color: #e31b23; font-size: 1.5rem; }
popup .popup-content { color: #3d050b; margin: 25px 0; }
popup .popup-action { padding: 10px 20px; font-size: 1rem; }
popup .popup-iframe { border: 0; width: 100%; height: 100%; }

    /* Player card */
.player-card { background: #fff; padding: 4px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.85); transition: 0.25s; }
.player-card-content {position: relative; z-index: 2; border: 2px solid #e31b23; border-top-left-radius: 10px; border-bottom-right-radius: 10px; background-color: #fff; overflow: hidden; }
.player-card-bg { background: url(../img/empty-player.png) no-repeat center; background-size: contain; position: relative; z-index: 0; }
.player-card-bg::before { content: ""; display: block; width: 100%; padding-top: 107%; z-index: 0; position: relative; }
.player-card-image { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: no-repeat top; background-size: cover; z-index: 1; transition: transform 0.5s; perspective: 1000px; -moz-perspective: 1000px; -webkit-perspective: 1000px; backface-visibility: hidden; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden}
#selection-player-list li.selected .player-card-image,
.player-card-image:hover {transform: scale(1.1);}
.player-card-info {position: relative; z-index: 2; background: #b8161f; border-bottom-right-radius: 7px; display: flex; align-items: center; flex-flow: row wrap; min-height: 30px; }
.player-card-tag { font-size: 0.9rem; padding: 6px 3px; text-overflow: ellipsis; overflow: hidden; width: 80%; flex: 1 0 auto; box-sizing: border-box; }
.player-card-open { width: 20%; background: #fff; color: #e31b23; border-bottom-right-radius: 7px; font-size: 1.5rem; text-align: center; padding: 1px 0; }

/* Formation list */
ix-formation { display: flex; flex-flow: column-reverse wrap; }
ix-formation .formation-list { flex: 1; list-style: none; margin: 0; display: flex; flex-flow: row wrap; align-items: flex-start; justify-content: center; padding: 10px; }
ix-formation .formation-list > li { display: inline-block; flex: 0 0 auto; width: 18%; margin: 0 2%; }
ix-formation .formation-list > li .player-card-tag { font-size: 0.65rem; }

.formation-field { position: relative; background: url(../img/field.png) center no-repeat; background-size: contain; }
.formation-field::before { content: ""; display: block; padding-top: 100%; }
.formation-field ix-formation { position: absolute; height: 115%; top: 0; right: 0; bottom: 0; left: 0; transform: translateY(5%); }
.formation-field .formation-list { height: 25%; box-sizing: border-box; }

.formation-field .player-card { padding: 3px; }
.formation-field .player-card-tag { padding: 3px 0; }

/* Index page */
#index { min-height: 100%; display: flex; flex-flow: column nowrap; background: #000 no-repeat center; background-size: cover; max-width: 600px; margin: 0 auto; }
#index::before,
#index::after { content: ""; display: block; position: fixed; left: 0; right: 0; z-index: 0; }
#index::before { transform: scale(2) translateY(-40%) rotateZ(-11deg); height: 25%; background: #e31b23; box-shadow: 0 10px rgba(227, 27, 35, 0.2); top: 0;}
#index::after { transform: scale(2) translateY(40%) rotateZ(-11deg); height: 40%; background: #3d050b; box-shadow: 0 -10px rgba(227, 27, 35, 0.2); bottom: 0;}
#index .btn { background-color: #fff; color: #e31b23; min-width: 150px; font-weight: bold; margin-top: 50px; }

.flag #index::before {background: black}
.flag #index::after {background: #FF0F21}

#index-wrapper { position: relative; z-index: 1; padding: 60px 50px 50px; flex: 1; display: flex; flex-flow: column wrap; justify-content: space-between; }
#index-wrapper img { max-width: 75px; margin: 0 auto; }
#index-content h1 { margin: 0; font-size: 1.5rem; }

/* Formation page */
#formation { max-width: 600px;}
#formation h3 {margin-top: 0;}
#formation-selection { list-style: none; margin: 0; padding: 2px; text-align: center; }
#formation-selection > li { flex: 1 0 32.83%; width: 75%; margin: 20px auto; padding: 20px; background: #fff; box-sizing: border-box; cursor: pointer; transition: 0.25s; }
#formation-selection > li > span { color: #0071ee; display: inline-block; margin-top: 10px; font-weight: bold; font-size: 0.9rem; }

#formation-selection .formation-list { width: 40px; margin: 0 auto; }
#formation-selection .formation-list > li { height: 10px; }
#formation-selection .formation-list > li > .formation-position { width: 3px; height: 3px; border-radius: 50%; }

#formation-selection > li.selected,
#formation-selection > li:hover { background: #0071ee; }
#formation-selection > li.selected > span,
#formation-selection > li:hover > span { color: #fff; }
#formation-selection > li.selected .formation-list > li > .formation-position,
#formation-selection > li:hover .formation-list > li > .formation-position { background: #fff; }

#formation-selected { margin-top: 25px; }

/* Selection page */
.selection-sub-header { position: relative; padding: 5px calc(10px + 2%); height: 50px; box-sizing: border-box; border-bottom: 1px solid rgba(255, 255, 255, 0.25); background: #ffffff; display: flex; flex-flow: row wrap; align-items: center; }

#selection { min-height: 100%; display: flex; flex-flow: column nowrap; }

#selection-headers { position: relative; z-index: 1; }
#selection-headers ul { margin: 0; padding: 0; list-style: none; display: flex; flex-flow: row wrap; }
#selection-headers ul li { flex: 1 0 auto; width: 19%; background: #b8161f; position: relative; padding: 10px 0; cursor: pointer; transition: 0.5s; }
#selection-headers ul li + li { border-left: 1px solid rgba(255, 255, 255, 0.25); }
#selection-headers ul li span { font-weight: bold; font-size: 0.6rem; }
#selection-headers ul li .icon { background: url(../img/header-icons.png) no-repeat; background-size: 100%; margin: 0 auto; max-width: 50px; }
#selection-headers ul li .icon::before { content: ""; display: block; padding-top: 78.57%; }
#selection-headers ul li.selection-header-3 .icon { background-position-y: 25%; }
#selection-headers ul li.selection-header-2 .icon { background-position-y: 50%; }
#selection-headers ul li.selection-header-1 .icon { background-position-y: 75%; }
#selection-headers ul li.selection-header-0 .icon { background-position-y: 100%; }
#selection-headers ul li.selection-header-formation .icon { background-position-y: 0; }
#selection-headers ul li.inactive { opacity: 0.5; }
#selection-headers ul li.selected { background: #e31b23; }
#selection-headers ul li.selected::after { content: ""; display: block; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border-top: 10px solid #e31b23; border-left: 10px solid transparent; border-right: 10px solid transparent; }

#selection-wrapper { position: relative; z-index: 0; flex: 1 0 auto; display: flex; flex-flow: column wrap; overflow-x: hidden; }

#selection-formation { margin: 0 auto; position: relative; z-index: 0; width: 100%; }
#selection-formation-header { justify-content: center; align-items: center; flex-direction: column; background-color: #3d050b;}
#selection-formation-header.formationActive .formation-select {align-self: center;}

#selection-formation .project-logo { max-width: 75px; margin: 10px auto -50px; position: relative; z-index: 1; display: block; }

.formation-select { display: flex; position: absolute; width: 100%; padding: 10px calc(10px + 2%); left: 100%; align-self: flex-end; flex-flow: row wrap; justify-content: center; align-items: center; transition: 0.5s; background: #3d050b; box-sizing: border-box; }
.formation-select.show-details {left: 0;}
.formation-select .formation-label-current { font-size: 1.75rem; margin: 0 25px; }
.formation-select .formation-nav {  }
.formation-select .formation-nav::before { content: ""; display: block; border-top: 10px solid transparent; border-bottom: 10px solid transparent; cursor: pointer; }
.formation-select .formation-nav-prev::before { border-right: 10px solid #fff; }
.formation-select .formation-nav-next::before { border-left: 10px solid #fff; }

#formation-select-show {display: block; z-index: 2; width: 25px; height: 25px; background: url(../img/exchange-alt-solid.svg); background-size: contain; background-position: center; background-repeat: no-repeat;}

#formation-select-show,
#selection-formation .formation-activate { position: absolute; right: 25px; top: 50%; transform: translateY(-50%); cursor: pointer; }
#selection-formation .formation-activate::before { content: ""; display: block; cursor: pointer; margin-top: -9px; border: solid #fff; border-width: 0 5px 5px 0; width: 9px; height: 23px; transform: rotateZ(45deg); background: transparent; }

#selection-formation .formation-field { max-width: 500px; margin: 25px auto 100px; }

/* Sub menu for selections */
#selections-sub-menu {  }
#selections-sub-category { font-weight: bold; color: #3d050b; font-size: 1.1rem; margin-right: 15px; position: absolute; }
#selections-sub-search { flex: 1 0 auto; position: relative; text-align: right; display: inline-block; }
#selections-sub-search input { padding: 5px; position: relative; width: 0; box-sizing: border-box; background: #ffffff; border: 2px solid transparent; color: #3d050b; transition: 0.5s; }
#selections-sub-search input:focus { width: 100%; border-color: #3d050b; }
#selections-sub-search::after { content: ""; display: block; width: 20px; height: 20px; right: 15px; position: absolute; background: url(../img/search-solid.svg) no-repeat; background-size: 100%; top: 50%; transform: translateY(-50%); }
#selections-sub-search:focus-within::after { display: none; }
#selections-sub-sort { position: relative; cursor: pointer; display: flex; flex-flow: column wrap; justify-content: center; margin-left: 15px; }
#selections-sub-sort::before,
#selections-sub-sort::after { border: 10px solid transparent; content: ""; flex: 1; display: inline-block; cursor: pointer; pointer-events: none; opacity: 0.5; transition: 0.5s; }
#selections-sub-sort::before { border-bottom-color: #3d050b; margin-bottom: 1px; opacity: 1; }
#selections-sub-sort::after { border-top-color: #3d050b; margin-top: 1px; }
#selections-sub-sort.desc::before { opacity: 0.5; }
#selections-sub-sort.desc::after { opacity: 1; }

#selections-sub-sort-details { position: absolute; width: calc(100% - 40px); left: 100%; top: 0; transition: 0.5s; border-bottom: 0; }
#selections-sub-sort-details.show-details { left: 0; }
#selections-sub-sort-details ul { list-style: none; padding: 0; margin: 0; display: flex; flex-flow: row wrap; }
#selections-sub-sort-details ul li { display: inline-block; border: 1px solid #b8161f; background: #b8161f; padding: 10px; border-radius: 3px; cursor: pointer; }
#selections-sub-sort-details ul li + li { margin-left: 10px; }
#selections-sub-sort-details ul li span { display: inline-block; vertical-align: middle; }
#selections-sub-sort-details ul li.active { background: #b8161f; }
#selections-sub-sort-details ul li.active::before { content: ""; display: inline-block; vertical-align: middle; margin-right: 5px; border: solid transparent; border-width: 0 5px 5px 5px; border-top-color: #fff; border-bottom-color: #fff; transition: 0.5s; }
#selections-sub-sort-details ul.desc li.active::before { border-width: 5px 5px 0 5px; }
#selections-sub-sort-title { margin-right: 25px; color: #3d050b; font-weight: bold; }

/* Player selection */
#selection-players { width: 100%; position: relative; z-index: 1; flex: 1 0 auto; background: #fff; display: flex; flex-flow: column wrap; }
#selection-player-filter { }
#selection-player-filter > li { display: inline-block; border-right: solid 1px dodgerblue ;border-top: solid 2px transparent; border-bottom: solid 2px transparent; flex: 1 0 20%; margin: 0; background: #0071ee;; box-sizing: border-box; padding: 15px 0; cursor: pointer; }
#selection-player-filter > li:last-child {border-right: none;}
#selection-player-filter > li:last-child { margin-right: 0; }
#selection-player-filter > li:hover,
#selection-player-filter > li.selected { color: orangered; border-bottom: solid 2px orangered;}
#selection-player-filter > li span { display: block; font-size: 0.9em; }

#selection-players-content { position: relative; flex: 1 0 auto; overflow: hidden; }
#selection-player-list { text-align: left; display: flex; flex-flow: row wrap; align-items: flex-start; list-style: none; margin: 0; padding: 0 10px; background-color: #fff; position: absolute; max-height: 100%; top: 0; right: 0; left: 0; overflow: auto; box-sizing: border-box; }
#selection-player-list li { display: inline-block; flex: 0 0 auto; width: 46%; margin: 1px 2% 2%; cursor: pointer; box-sizing: border-box; position: relative; }
#selection-player-list li.selected .player-card { background: #b8161f; box-shadow: none; }
#selection-player-list li.selected .player-card-bg::before { background: rgba(0, 0, 0, 0.5); z-index: 2; }
#selection-player-list li.selected .player-card-content::before { content: "x"; z-index: 1; background: #e31b23; cursor: pointer; border-radius: 50%; color: #fff; font-family: "Lucida Console", Monaco, monospace; font-weight: bold; position: absolute; top: 10px; right: 10px; width: 21px; height: 21px; text-align: center; line-height: 20px; }

#selection-confirm { padding: 5px 15px; font-size: 1rem;}

.selection-loading { position: absolute; bottom: -100px; left: 50%; font-weight: bold; transform: translateX(-50%); font-size: 0.9rem; background: #e31b23; border-radius: 20px; padding: 10px 20px; transition: 0.5s; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.4); }
.selection-loading.active { bottom: 5%; }

    /* */

.player-name {position: relative;}
.player-name span {word-break: break-word;}
.player-info-open {position: absolute; top: 0; right: 0;}
.player-info-open:hover {color: white; cursor: pointer;}

#player-info { background: #fff; position: absolute; min-height: 100%; width: 100%; top: 0; left: -100%; box-sizing: border-box; transition: 0.5s; z-index: 4; }
#player-info.active { left: 0; }

#player-info-header { justify-content: center; }
.player-info-close { position: absolute; top: 50%; transform: translateY(-50%); left: 0; padding: 20px; cursor: pointer; }
.player-info-close::before { content: ""; display: block; transform: rotateZ(45deg); left: 20px; width: 15px; height: 15px; cursor: pointer; border: solid #fff; border-width: 0 0 3px 3px; }
.player-info-name { font-size: 1.5rem; }

.player-info-card { background: #3d050b; padding: 15px; display: flex; flex-flow: row wrap; }
.player-info-img { width: 48%; max-width: 250px; margin-bottom: -90px; }
.player-info-img .player-card-bg::before { padding-top: 125%; }
.player-info-achievements { width: 48%; margin-left: 4%; }
.player-info-achievements ul { list-style: none; margin: 0; padding: 0; }
.player-info-achievements li { text-align: left; margin-top: 10px; display: flex; flex-flow: row wrap; align-items: center; }
.player-info-achievements li span { font-size: 0.9rem; flex: 1; }
.player-info-achievements li span strong { font-size: 1.1rem; }
.player-info-cup::before { content: ""; display: inline-block; height: 45px; width: 45px; background: url(../img/cup-icons.png) no-repeat center; background-size: 45px auto; vertical-align: middle; margin-right: 10px; }
.player-info-cup.cup-cl::before { background-position-y: 0; } /* Champions league */
.player-info-cup.cup-uc::before { background-position-y: 50%; } /* Uefa cup */
.player-info-cup.cup-lc::before { background-position-y: 100%; } /* Local cup */

.player-info-actions { padding: 15px; }
.player-info-action { width: 48%; margin-left: 52%; color: #fff; background: #e31b23; transition: 0.5s; padding: 15px; box-sizing: border-box; cursor: pointer; }
.player-info-action::before { content: "\0002B"; display: inline-block; transition: 0.5s; font-size: 1.25rem; vertical-align: middle; }
.player-info-action span { display: inline-block; vertical-align: middle; }
.player-info-action .deselect { display: none; }

.selected .player-card,
.selected .player-info-action { background: #b8161f; }
.selected .player-info-action .select { display: none; }
.selected .player-info-action .deselect { display: inline-block; }
.selected .player-info-action::before { transform: rotateZ(45deg); }

.player-info-data { color: #3d050b; }
.player-info-data ul { list-style: none; padding: 0; }
.player-info-data li { border: solid rgba(61, 5, 11, 0.1); border-width: 2px 0 2px 0; display: flex; flex-flow: row wrap; justify-content: space-between; padding: 15px; }
.player-info-data li + li { border-top: 0; }
.player-info-data span {  }
.player-info-data span:last-child { font-weight: bold; }

/* Optin page */
#optin { min-height: 100%; display: flex; flex-flow: column nowrap; background: #fff; color: #3d050b; }
#optin-header { background: #e31b23; padding: 15px 42px; color: #fff; }
#optin-steps { max-width: 300px; margin: 0 auto; position: relative; box-sizing: border-box; }
#optin-steps ul { padding: 0; list-style: none; display: flex; flex-flow: row wrap; justify-content: space-between; position: relative; margin: 0 -27px; }
#optin-steps ul li,
#optin-steps .optin-step-current { width: 50px; height: 50px; line-height: 50px; text-align: center; border: 2px solid #fff; border-radius: 50%; font-size: 1.25rem; font-weight: bold; }
#optin-steps ul li { flex: 0 0 auto; background: #e31b23; }
#optin-steps::before { content: ""; display: block; position: absolute; top: 50%; border: 1px solid #fff; left: 1px; right: 1px; }
#optin-steps .optin-step-current { content: attr(data-step); display: block; position: absolute; top: 50%; transform: translateY(-50%); background: #fff; color: #e31b23; transition: 0.5s; margin-left: -27px; left: 0; }

#optin-wrapper { padding-top: 25px; }
#optin-wrapper p,
#optin-wrapper h3 { max-width: 600px; padding: 15px; margin: 0 auto; }

#optin-wrapper [ng-switch-when="1"] h3:first-child { color: #e31b23; }

.optin-select {display:flex; justify-content: flex-start; align-items: center; position:relative;margin: 5px auto;  padding: 0;width: 250px; height: 50px; font-weight: bold; font-size: 1.2rem; border: 2px solid #e31b23; border-top-left-radius: 10px; border-bottom-right-radius: 10px; cursor: pointer; text-align: center; text-align-last:center; font-family: "Brandon Grotesque", sans-serif; }
.optin-select.show {border-bottom: none; border-bottom-right-radius: 0;}
.optin-select:after {content: ''; position: absolute; right: 10px; top:0; bottom : 0; margin: auto; width: 0;height: 0;border-left: 5px solid transparent;border-right: 5px solid transparent; border-top: 7px solid black; }
.optin-select.show:after {content: ''; position: absolute; right: 10px; top:0; bottom : 0; margin: auto; width: 0;height: 0;border-left: 5px solid transparent;border-right: 5px solid transparent; border-bottom: 7px solid black; border-top: none;}

.optin-select .optin-select-options {display: flex; flex: 0; position: absolute; left: -2px; top: 100%; height: 0; opacity: 0; overflow-y: scroll; z-index: 9; flex-direction: column;background: white; border: solid 2px #e31b23; align-items: flex-start; width: 100%; border-bottom-right-radius: 10px; transition: height 0.5s;}
.optin-select.show .optin-select-options {height: 200px; border: 2px solid #e31b23; border-top: none; opacity: 1;}
.optin-select-options .optin-select-option {display:flex; width: 100%; padding: 10px; box-sizing: border-box; }

.optin-select-options .optin-select-option:hover {color: white; background: #3d050b;}
.optin-select-options .selected {color: white; background: #3d050b;}

.optin-select-placeholder {display:flex; flex: 1; text-align: left; padding: 10px;}


.flag-icon {margin-right: 10px;}


.optin-checks { list-style: none; margin: 25px 0 0; padding: 0; }
.optin-checks li { border: 0; }
.optin-checks li + li { border-top: 0; }
.optin-checks li label { display: flex; flex-flow: row wrap; align-items: center; justify-content: flex-start; padding: 15px 0; cursor: pointer; }
.optin-checks li label input { display: none; }
.optin-checks li label .check { border: 2px solid #3d050b; padding: 2px; margin-right: 15px; transition: 0.5s; }
.optin-checks li label .check::before { content: ""; display: block; width: 17px; height: 17px; background: transparent; transition: 0.5s; }
.optin-checks li.selected .check { border-color: #e31b23; }
.optin-checks li.selected .check::before { background-color: #e31b23; }
.optin-checks li label .check-label { flex: 1; text-align: left; }

.optin-radios li { border: solid rgba(61, 5, 11, 0.1); border-width: 2px 0 2px 0; }
.optin-radios li label { padding: 15px; }
.optin-radios li label .check { border-radius: 50%; }
.optin-radios li label .check::before { border-radius: 50%; }

#optin-questions,
#optin-email { max-width: 600px; margin: 0 auto; padding: 0 25px; }
#optin-email .optin-email-input { margin-top: 25px; }
#optin-email .optin-email-input input { width: 100%; padding: 10px; border: 2px solid #3d050b; box-sizing: border-box; }

#optin-confirm { margin-top: 10px; }
.optin-confirm-after {font-size: 0.9rem;}

#optin-questions .btn {margin: 10px auto;display: block;width: 50px;}

.game-img {display:block; width:auto; margin: 10px 0 10px 0; height: 200px;background: url(../../../uploads/projects/belgium/game.jpg); background-repeat: no-repeat; background-size: cover; background-position: center;}

#optin-wrapper h3 {font-size: 1.1rem; padding: 5px}

/* Result page */
#result { min-height: 100%; max-width: 600px; margin: 0 auto; }
#result::before,
#result::after { content: ""; display: block; position: fixed; left: 0; right: 0; z-index: 0; }
#result::before { transform: scale(2) translateY(-40%) rotateZ(-11deg); height: 25%; background: #e31b23; box-shadow: 0 10px rgba(227, 27, 35, 0.2); top: 0;}
#result::after { transform: scale(2) translateY(40%) rotateZ(-11deg); height: 25%; background: rgb(122, 13, 21); box-shadow: 0 -10px rgba(122, 13, 21, 0.2); bottom: 0; } /* rgba(184, 22, 31, 0.2) */

.flag #result::before {background: black}
.flag #result::after {background: #FF0F21}


#result-title { display: flex; justify-content: space-between; align-items: center; position: relative; background: rgb(122, 13, 21); border-radius: 3px; padding: 0px 20px; color: white; margin: 0 0 0 5%; }
#result-title > div:first-child {flex: 1 0 75%;}
#result-title > div:last-child {display: flex; justify-content: flex-end; flex: 1 0 20%; margin-left: 5%;}
#result-title h1 {position: absolute; margin: 0; font-size: 1.5rem; text-align: left; transition: left 0.5s;}
.result-change-selection {display:block;width: 20px; height: 20px; right: 20px; background: url(../img/exchange-alt-solid.svg); background-size: contain; background-repeat: no-repeat; transition: all 1s; cursor: pointer; }

.top-selection-shown .result-change-selection {transform: rotateY(180deg);}

#result-title-container {display:flex; align-items: center; position:relative; overflow: hidden; height: 4rem;}
#top_result_title,
.top-selection-shown #your_result_title {left: -200%;}
#your_result_title,
.top-selection-shown #top_result_title {left: 0;}

#result-wrapper { position: relative; z-index: 1; padding: 25px 0 75px; }
#result-wrapper p {  }
#result-wrapper img { max-width: 45px; margin: 0 auto -25px; z-index: 1; position: relative; }
#result-formation { max-width: 600px; margin: 0 auto; }

#result-share p { font-size: 1.5rem; }

#result-share-toggle,
#result .icon { display: inline-block; position: relative; width: 65px; height: 65px; box-sizing: border-box; background: rgb(122, 13, 21);  border-radius: 50%; border-top-left-radius: 0; border-top-right-radius: 0; padding: 15px; cursor: pointer; }
#result .icon::before { content: ""; display: block; width: 100%; height: 100%; background-image: url(../img/share-icons.png); background-size: cover; transition: transform 0.5s; position: relative; z-index: -1;}
#result .icon-share::before { background-position: 0 0; }
#result .icon-email::before { background-position: 0 20%; }
#result .icon-messenger::before { background-position: 0 40%; }
#result .icon-whatsapp::before { background-position: 0 60%; }
#result .icon-facebook::before { background-position: 0 80%; }
#result .icon-twitter::before { background-position: 0 100%; }
#result-share a {transition: 0.5s; border: solid 3px transparent;}
#result-share a.icon-twitter:hover {color: #1da1f2;  }
#result-share a.icon-facebook:hover {color: #4a6ea8;   }
#result-share a.icon-messenger:hover {color: #0078FF; }
#result-share a.icon-whatsapp:hover {color: #25d366;  }

.highlight {animation: 2s 3 highlight;}

@keyframes highlight {
    0% { background-color: rgb(122, 13, 21); }
    50% { background-color: rgba(150, 20, 30, 1); }
    100% { background-color: rgb(122, 13, 21); }
}

#result-header {display: flex; height: 65px; justify-content: space-between; align-items: center; margin-bottom: 25px;}
#result-header #result-title {flex: 1 0 50%; max-width: 50%; font-size: 1.5rem;}

#result-share { flex: 0; position: absolute; height:65px; margin-bottom: 25px;margin: 0 5%; right: 0; top: 20px; transition: right 1s ease-out; z-index: 11; padding: 5px;}
#result-share.lightup {right: -250%;}


#result-share-toggle {overflow: hidden; position: relative; z-index: 12; border-top-left-radius: 50%; border-top-right-radius: 50%; transition: border-radius 0.5s;}
#result-share-toggle::before {content: ""; display: block; width: 100%; height: 100%; transition: transform 0.5s ease; background-image: url(../img/share-alt-solid.svg); background-size: contain; background-repeat: no-repeat; -webkit-perspective: 1000px; backface-visibility: hidden; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden}
#result-share ul { display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; position: absolute; z-index: -1; top: 100px; left: 0; width: 65px; transition: top 0.5s ease; list-style: none; margin: 0; padding: 0; }
#result-share ul li { display: inline-block; margin: 0 0 5px 0;}


.show #result-share-toggle {border-bottom-right-radius: 0; border-bottom-left-radius: 0; border-bottom: dashed 2px white;}
.show #result-share-toggle:before {transform: rotate(270deg);}
#result-share.show .icon::before {z-index: 14;}
#result-share.show #result-share-toggle ul {top: 65px; padding-top: 10px; background: rgb(122, 13, 21); border-bottom-right-radius: 35px; border-bottom-left-radius: 35px;}
#result-share.show #result-share-toggle {overflow: initial;}

@media (hover: hover) {
    #result-share:hover #result-share-toggle ul {top: 60px; padding-top: 15px; z-index: 13;}
    #result-share:hover #result-share-toggle {overflow: initial;}
    #result-share:hover #result-share-toggle:before {transform: rotate(270deg);}
    #result-share:hover #result-share-toggle {border-bottom-right-radius: 0; border-bottom-left-radius: 0; border-bottom: dashed 2px white;}
    #result-share:hover #result-share-toggle ul {top: 65px; padding-top: 10px; background: rgb(122, 13, 21); border-bottom-right-radius: 35px; border-bottom-left-radius: 35px;}
    #result-share a:hover.icon::before {transform: perspective(1px) scale(1.1) ;}
    #result-share:hover .icon::before {z-index: 14;}

}

#result-formation ix-formation {z-index: -1;  }
#result-formation ix-formation li {transform: rotateY(180deg); transition: transform 1s;}
#result-formation .show-selection {z-index: 10; }
#result-formation .show-selection li {transform: rotateY(0deg);}

#result-stats { margin-top: 100px; }
#result-stats h1 { margin-bottom: 0; }
#result-stats-lists { display: flex; flex-flow: row wrap; padding: 25px; }
#result-stats-lists .result-stats-list { width: 100%; background: rgb(122, 13, 21); border-radius: 3px; margin-bottom: 4%; box-shadow: 0 0 20px 0 rgba(61, 5, 11, 0.2); }
#result-stats-lists .result-stats-list-box { padding: 15px; }
#result-stats-lists .result-stats-list h3 { margin: 15px 0 0; padding-bottom: 15px; border-bottom: 2px solid #fff; }
#result-stats-lists .result-stats-list ol { margin: 0 0 0 18px; padding: 0; text-align: left; }
#result-stats-lists .result-stats-list ol li + li { margin-top: 10px; }
#result-stats-lists .result-stats-list ol li span {  }
#result-stats-lists .result-stats-list ol li .count { display: inline-block; float: right; margin-left: 5px; }

#result-wrapper .result-shared-title { background: rgb(122, 13, 21); color: #fff; font-size: 1.5rem; }
.result-restart { font-size: 1.75rem; border-radius: 3px; padding: 10px 20px; margin: 0 25px 25px; cursor: pointer; box-shadow: 0 5px 10px 0 rgba(61, 5, 11, 0.5); }

.loader { position: absolute; top: 0; left: 0; height: 4px; width: 100%; background: transparent; overflow: hidden; z-index: 9; }
.loader::before { content: ""; position: absolute; top: 0; left: -20%; width: 20%; height: 100%; background: #e31b23; animation: loading 2s linear infinite; }

@keyframes loading {
    0% { left: -20%; width: 20%; }
    75% { left: 50%; }
    90% { left: 125%; }
    100% { left: 100%; width: 100%; }
}

@media (min-width: 25em) {
    .formation-field .player-card { padding: 4px; }
    .formation-field .player-card-tag { padding: 6px 3px; }

    #index-wrapper img { max-width: 75px; }

    #selection-formation .project-logo { max-width: 75px; margin: 10px auto -75px; }

    #result-wrapper img { max-width: 60px; }

}

@media (min-width: 30em) {
    popup .popup-wrapper.extended { margin: 10px auto 0; }

    #selection-player-list li { width: 30.33333%; margin: 1px 1.5% 1.5%; }
    .selection-sub-header {padding: 5px calc(1.5% + 10px);}

    #formation-selection > li { padding: 10px; }
    #formation-selection > li > span { margin-top: 5px; }
    #formation-selected { margin: 15px auto 0; max-width: 80%; }

    #selection-player-list .player-profile {width: 75%;}
    #selections-sub-sort select {padding: 0 30px;}

    #result-stats-lists .result-stats-list { width: 48%; }
    #result-stats-lists .result-stats-list:nth-child(2n+0) { margin-left: 4%; }

    #optin-wrapper h3 {font-size: 1.17em; font-weight: bold; padding: 15px;}
    .game-img {background-size: contain;}

    .formation-field ix-formation { height: 110%; transform: translateY(10%); }

    #result-wrapper img {margin: 0 auto -45px;}

    #result-stats {margin-top: 150px;}

    #result-header #result-title {max-width: 60%;}

    #result-title {padding: 10px 20px;}
    #result-title-container {height: 2rem;}
    #result-title h1 {font-size: 1.5rem;}

}

@media (min-width: 40em) {
    #selection-headers ul li .icon { max-width: 70px; }

    #selection-player-list li { width: 18%; margin: 1px 1% 1%; }

    #container footer {height: 25px;}
    #container footer img {height: 25px}

    #container .center-content {width: 75%; height: 75%;}

    #formation {margin-top: 25%;}

    .selection-sub-header { padding: 5px calc(1% + 10px); height: 60px; }
    #selections-sub-menu p { font-size: 0.9rem; }
    #selections-sub-search input { padding: 5px 10px; max-width: 300px; }

    #index {background-size: contain;}

    #selection-confirm {padding: 10px 20px; font-size: 1.25rem;}

    .optin-select.show .optin-select-options {height: 300px;}
}

@media (min-width: 60em) {
    #container header a img { height: 35px; }

    #progress { margin-top: 15px; }
    #progress-bar { height: 10px; }

    #selection-player-filter li span { display: inline; }

    #result-share {position: fixed;}
    #result-header #result-title {font-size: 2rem; max-width: 420px; margin: 0 auto;}

    .overlay:after {display: none;}

    #result-wrapper img {margin: 0 auto -65px;}
}
/* Credits to https://github.com/lipis/flag-icon-css */

.flag-icon-background {
  background-size: contain;
  background-position: 50%;
  background-repeat: no-repeat;
}
.flag-icon {
  background-size: contain;
  background-position: 50%;
  background-repeat: no-repeat;
  position: relative;
  display: inline-block;
  width: 1.33333333em;
  line-height: 1em;
}
.flag-icon:before {
  content: "\00a0";
}
.flag-icon.flag-icon-squared {
  width: 1em;
}

.flag-icon-at {
  background-image: url(../img/flags/at.svg);
}
.flag-icon-at.flag-icon-squared {
  background-image: url(../img/flags/at.svg);
}
.flag-icon-be {
  background-image: url(../img/flags/be.svg);
}
.flag-icon-be.flag-icon-squared {
  background-image: url(../img/flags/be.svg);
}
.flag-icon-ch {
  background-image: url(../img/flags/ch.svg);
}
.flag-icon-ch.flag-icon-squared {
  background-image: url(../img/flags/ch.svg);
}
.flag-icon-cz {
  background-image: url(../img/flags/cz.svg);
}
.flag-icon-cz.flag-icon-squared {
  background-image: url(../img/flags/cz.svg);
}
.flag-icon-de {
  background-image: url(../img/flags/de.svg);
}
.flag-icon-de.flag-icon-squared {
  background-image: url(../img/flags/de.svg);
}
.flag-icon-dk {
  background-image: url(../img/flags/dk.svg);
}
.flag-icon-dk.flag-icon-squared {
  background-image: url(../img/flags/dk.svg);
}
.flag-icon-es {
  background-image: url(../img/flags/es.svg);
}
.flag-icon-es.flag-icon-squared {
  background-image: url(../img/flags/es.svg);
}
.flag-icon-fi {
  background-image: url(../img/flags/fi.svg);
}
.flag-icon-fi.flag-icon-squared {
  background-image: url(../img/flags/fi.svg);
}
.flag-icon-fr {
  background-image: url(../img/flags/fr.svg);
}
.flag-icon-fr.flag-icon-squared {
  background-image: url(../img/flags/fr.svg);
}

.flag-icon-gb-eng {
  background-image: url(../img/flags/gb-eng.svg);
}
.flag-icon-gb-eng.flag-icon-squared {
  background-image: url(../img/flags/gb-eng.svg);
}

.flag-icon-gb-wls {
  background-image: url(../img/flags/gb-wls.svg);
}
.flag-icon-gb-wls.flag-icon-squared {
  background-image: url(../img/flags/gb-wls.svg);
}

.flag-icon-hr {
  background-image: url(../img/flags/hr.svg);
}
.flag-icon-hr.flag-icon-squared {
  background-image: url(../img/flags/hr.svg);
}
.flag-icon-it {
  background-image: url(../img/flags/it.svg);
}
.flag-icon-it.flag-icon-squared {
  background-image: url(../img/flags/it.svg);
}

.flag-icon-nl {
  background-image: url(../img/flags/nl.svg);
}
.flag-icon-nl.flag-icon-squared {
  background-image: url(../img/flags/nl.svg);
}
.flag-icon-pl {
  background-image: url(../img/flags/pl.svg);
}
.flag-icon-pl.flag-icon-squared {
  background-image: url(../img/flags/pl.svg);
}
.flag-icon-pt {
  background-image: url(../img/flags/pt.svg);
}
.flag-icon-pt.flag-icon-squared {
  background-image: url(../img/flags/pt.svg);
}
.flag-icon-ru {
  background-image: url(../img/flags/ru.svg);
}
.flag-icon-ru.flag-icon-squared {
  background-image: url(../img/flags/ru.svg);
}
.flag-icon-se {
  background-image: url(../img/flags/se.svg);
}
.flag-icon-se.flag-icon-squared {
  background-image: url(../img/flags/se.svg);
}
.flag-icon-tr {
  background-image: url(../img/flags/tr.svg);
}
.flag-icon-tr.flag-icon-squared {
  background-image: url(../img/flags/tr.svg);
}
.flag-icon-ua {
  background-image: url(../img/flags/ua.svg);
}
.flag-icon-ua.flag-icon-squared {
  background-image: url(../img/flags/ua.svg);
}