body {margin: 0; padding:0; background: #001905 url('https://mintconditioned.com/mintmadness/wp-content/uploads/2014/02/basketball-texture-green120.jpg') center top repeat; background-attachment: scroll; -webkit-background-size: auto; -moz-background-size: auto; -o-background-size: auto; background-size: auto; font-family:'Fira Sans','Trebuchet MS',Helvetica,sans-serif; }

body * {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
body #draft-loading {display:none;}
body.draft-loading #draft-loading {display:block; position:fixed; top:80px; bottom:30px; left:0; right:0; background:rgba(0,0,0,0.7); display:flex; flex-direction:row; justify-content:center; align-items:center; z-index:100;}

.player-56, .player-57 {display:none !important;}
/******************************
	Page Content
******************************/
#main {width:100%;padding:20px;}
header {width: 100%; height: 50px; position: fixed; left: 0; top: 0; background: rgba(0,0,0,0.3); color: #fff; border-bottom:1px solid rgba(255,255,255,0.2);}
.draftroom header {height:80px; display:flex; justify-content: space-between;align-items: center;}
.draftlotteryroom header {z-index:2; height:80px;}
footer {width: 100%; height: 30px; position: fixed; left: 0; bottom: 0; background: rgba(0,0,0,0.3); border-top:1px solid rgba(255,255,255,0.2); color: #fff; font-size:11px; }
#main-content {position: fixed;margin: 20px 0;padding: 0;top: 80px;left: 0;right: 0;bottom: 30px;overflow-y: auto;}
.draftroom #main-content {margin:0;} 
#left {display:block;position:absolute;top:0;left:0; /* bottom:0; */width: 260px;padding:0;overflow:visible;}
#right {position: fixed; right: 0; left: 280px; bottom: 30px; top: 90px; display:flex; flex-flow:row wrap; justify-content:flex-start; align-content:flex-start; float: right; padding: 5px 20px 0 5px; overflow-y: auto; }
#logo {float: left; display:inline-block; padding: 2px 30px 3px 10px; margin: 0; }
#logo img {height: 60px; width: auto;}

header nav {float: right;}
header nav ul {margin:0;padding:0;line-height: 50px;}
header nav ul li {display: inline-block;text-align: right;font-size: 14px;line-height: 20px;padding-right: 20px;}
header nav.nav-draftroom ul li:nth-last-of-type(2) {padding-right:0;}
header nav.nav-draftroom ul li:last-of-type {padding-right:30px;}
header nav ul li a {color: #fff;text-decoration: none;}
header nav ul li a:hover,  header nav ul li a:focus {color: #990000;}
nav .refreshbutton {visibility:hidden;position:relative;}
nav .refreshbutton:before {position:absolute;right:0;visibility:visible;content:'';display:inline-block;height:20px;width:20px;background:url(css-images/refresh-icon.svg) top center no-repeat;}
nav .refreshbutton:hover:before, nav .refreshbutton:focus:before {background:url(css-images/refresh-icon.svg) bottom center no-repeat;}

h1 {font-size:24px; line-height:30px; float:left; display:block; margin: 0; padding: 10px 0 10px 20px; color: #fff;}
h3 {margin:0 0 10px; padding-bottom:5px; color:#fff; border-bottom:1px solid rgba(255,255,255,0.1); }

.team-none {display:block;height:100%;/* overflow:hidden; */overflow-x: visible;}
.team-none .team-interior {height:100%;overflow-x: visible;}
.team-box {flex-basis:25%; max-width:230px; align-items:stretch; vertical-align:top; padding:15px; margin:0 -2px; }
.team-box.nextpick .team-interior {-webkit-box-shadow:0 0 0 5px #870d1B;-moz-box-shadow:0 0 0 5px #870d1b;box-shadow:0 0 0 5px #870d1b;}

.team-interior {background:rgba(255,255,255,0.2);border:4px solid rgba(255,255,255,0.1);border-radius:0;padding: 10px;/* overflow-y:auto; */min-height:50px;}
#main-content .team-none { border-radius:0;  }
.team-none .team-interior {min-height:calc(100vh - 110px);}
#main-content .team-none .team-interior ol {padding:0 50px 50px 0;list-style: decimal;font-size:12px;color:#111;height:100%;min-height:40px;/* overflow-y: auto; */overflow-x: visible;-webkit-overflow-scrolling: touch;width:-webkit-calc(100% + 30px);width:calc(100% + 30px);}

.no-hiddenscroll ::-webkit-scrollbar {width:0; background:none;}
.no-hiddenscroll ::-webkit-scrollbar-track {box-shadow:none; background:none; border-radius: 10px; margin-right:2px;}
.no-hiddenscroll ::-webkit-scrollbar-thumb {border-radius: 10px; background: rgba(0,0,0,0.1); box-shadow:none; }
.no-hiddenscroll ::-webkit-scrollbar-thumb:window-inactive {background: rgba(0,0,0,0.1); }

#main-content .team-none .team-interior li {list-style:none;padding: 0 10px 0 5px;height: 40px;line-height: 40px;width:200px;/* overflow:hidden; */white-space:nowrap;text-overflow:ellipsis;position:relative;}
#main-content .team-box .team-interior ol {padding:0; list-style: decimal; font-size:11px; color:#111; min-height:40px; overflow:hidden; }
#main-content .team-box .team-interior li {list-style:none; padding: 0 0 0 10px; height: 25px; line-height: 25px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
#main-content .team-interior li:nth-child(odd) {background-color:rgba(255,255,255,0.7); }
#main-content .team-interior li:nth-child(even) {background-color: rgba(255,255,255,0.4); }
#main-content .team-interior li:hover {cursor: pointer; }
#main-content .team-interior li.ui-sortable-helper {background:#000;color:#fff;}

#main-content .team-interior ol {list-style-type:none;}
	#main-content .team-box .team-interior ol > li {counter-increment: customlistcounter;list-style-type:none;font-size:11px;color:#222;padding-left:15px;}
		#main-content .team-box .team-interior ol > li:before {content: counter(customlistcounter); float: left; margin-left:-10px; font-size:11px; font-weight:500; color:#330000;}
		#main-content .team-box .team-interior ol:first-child {counter-reset: customlistcounter;}

.selected-pick {display:none; position: absolute; top: 0; left: 0; bottom:0; right:0; padding:0; width: 100%; height:100%; background: rgba(0,0,0,0); z-index:9999;}
	a.selected-yes {position: relative; display: inline-block; background: rgba(0,130,50,1); color: #f5f5f5; width: 50%; height:40px; line-height:40px; top:50%; transform:translateY(-50%); text-align: center; font-size: 15px; line-height: 38px; font-weight: 500; text-transform: uppercase; z-index:5; box-shadow: inset 0 0 8px #040; }
	a.selected-no {position: relative; display: inline-block; background: rgba(170,0,10,1); color: #f5f5f5; width: 50%; height:40px; line-height:40px; top:50%; transform:translateY(-50%); text-align: center; font-size: 15px; line-height: 38px; font-weight: 500; text-transform: uppercase; z-index:5; box-shadow: inset 0 0 8px #400; }
	a.selected-yes:after {content: '+'; margin-left: 5px;}
	a.selected-no:after {content: '-'; margin-left: 5px;}

#main-content .team-none .team-interior li div:first-child {overflow:hidden;}
.player-info {display: none; position: absolute; width: auto; min-width:220px;left: 100%;transform: translateY(calc(-50% - 20px));background: #f1f1f1;padding: 15px;z-index: 10;border:3px solid #870d1b;}
#left li.player:hover .player-info, #left li.player:focus .player-info {display:block;}
#right li.player {position:relative;}
#right li.player .player-info {display:none !important;}
#right .return-pick {display:flex; justify-content:center; align-items:center; height:100%; width:0; font-size: 0; line-height: 1; padding: 0; color: rgba(255,255,255,0.7); background: rgba(175,0,20,0.7); font-weight: 500; position: absolute; right: 0px; opacity:0; transition: opacity 0.3s, color 0.3s, font-size:0.3s, padding:0.3s; }
#right li.player:hover .return-pick {font-size: 22px; width: 30px; top: 0; z-index: 2; bottom: 0; right: 0; text-align: right; opacity:1; padding-right:0;} 
#right li.player .return-pick:hover, #right li.player .return-pick:focus {color:rgba(255,255,255,0.9);}
#left .return-pick {display:none !important;}
li.player > div {}
#right li.player > div:first-child {position:relative;}

.player-info:before {content: ''; height: 0; width: 0; border-width: 14px 14px 14px 0; border-color: transparent #870d1b transparent transparent; border-style: solid; left: -14px; top: calc(50% - 14px); position: absolute; }
.player-info:after {content: ''; height: 0; width: 0; border-width: 10px 10px 10px 0; border-color: transparent #f1f1f1 transparent transparent; border-style: solid; left: -10px; top: calc(50% - 10px); position: absolute; }

.player-info h4 {margin:0 0 5px; line-height:20px;}
.player-info .stats {display: flex; flex-direction: row; flex-wrap: nowrap; justify-content:space-between; margin:0 0 10px; }
.player-info .stats span {display: block; font-size: 12px; line-height: 1.3; width: 18%; margin-right:2%; flex: 1 1 auto; text-align: center;margin:0; }
.player-info .buttons {display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:center;}
.player-info .buttons div {width:46%; flex:0 1 auto; text-align:center; line-height:1.2; padding:5px; color:#fff;}
.selectbtn {background:#0c2;}
.cancelbtn {background:#870d1b;}

#draft-lottery {width:95%; max-width:400px; background:rgba(255,255,255,0.2); border:4px solid rgba(255,255,255,0.1); border-radius:8px; padding:20px; margin:30px auto; }
	#draft-lottery h2 {color:#fff;font-size:24px;margin:0 0 10px;text-align:center; }
	button.draftshuffle {display:block; width:100%; background:rgba(255,255,255,0.2); border:4px solid rgba(255,255,255,0.1); border-radius:8px; padding:10px; margin:20px auto; font-size:20px; font-weight:500; color:#fff; cursor:pointer; text-shadow:0 -1px 1px #222; }
	ol.draftorder {width: 40%; min-width:140px; margin: 0 auto; }
	ol.draftorder li {  color: #fff; text-shadow: 0 -1px 1px #000; font-size: 18px; line-height: 1.3;}

#timer-bar {width: 96%; height: 15px; margin: 0 auto; background: #000; overflow:hidden; position:fixed; top:55px; left:2%; display:none; }
.expand {width: -webkit-calc(100% - 10px); width: calc(100% - 10px); max-width: -webkit-calc(100% - 10px); max-width: calc(100% - 10px); height: 5px; margin: 5px; background:#870d1b; position: absolute; -moz-animation: fullexpand 30s linear; -webkit-animation: fullexpand 30s linear; overflow:hidden; }

/* Full Width Animation Bar */
@-moz-keyframes fullexpand {
    0%  { width: 0; background:green; }
    33% { width:33%; background:yellow; }
    66% { width:66%; background:orange; }
    90% { width:90%; background:#870d1b; }
    100% { width: 100%; background:#870d1b; }	
}

@-webkit-keyframes fullexpand {
    0% { width: 0; background:green; }
    33% { width:33%; background:yellow; }
    66% { width:66%; background:orange; }
    90% { width:90%; background:#870d1b; }
    100% { width: 100%; background:#870d1b; }
}

#count30 {display:block;position:fixed;top:45px;width:100%;text-align:center;font-size:20px;font-weight:600;color:#fff;}
#count30 span {color:#dd0d1b; -moz-animation: countcolor 20s linear; -webkit-animation: countcolor 20s linear;}

/* Countdown Color Changer */
@-moz-keyframes countcolor {
    0%  { color:#fff; }
    33% { color:#fff; }
    66% { color:#fff; }
	82.4% { color:#fff; }
    82.5% { color:#dd0d1b; }
    100% { color:#dd0d1b; }	
}

@-webkit-keyframes countcolor {
    0% { color:#fff; }
    33% { color:#fff; }
    66% { color:#fff; }
	82.4% { color:#fff; }
    82.5% { color:#dd0d1b; }
    100% { color:#dd0d1b; }
}

.copyright {font-size:11px;font-weight:normal;color:#fff;line-height:30px;padding-left:15px;}
.copyright a {font-weight:600;text-decoration:none;color:#fff;}

.team-box .team-interior h3 {font-weight:500; visibility:hidden;line-height:0;}
.team-box .team-interior h3:before {visibility: visible; content: ''; display: block; font-size: 18px; line-height: 1; padding-bottom: 5px; border-bottom: 1px solid rgba(255,255,255,0.1);}

#player-popup {display:none; position:fixed; top:0; bottom:0; left:0; right:0; height:100%; width:100%; padding: 50px 25px 15px 25px; background:rgba(0,20,0,0.97); border:8px solid rgba(255,255,255,0.2); overflow:hidden; z-index:9999;}
#player-popup #popup-close-btn, #stats-popup #stats-popup-close-btn {height: 30px; width: auto; text-align: right; color: #f5f5f5; font-size: 18px; line-height: 20px; font-weight: 600; position: fixed; top: 20px; right: 25px; cursor:pointer;} 
#player-popup ul {padding: 0; margin: 0; top: 40px; overflow-y: scroll; -webkit-overflow-scrolling: touch; height: 100%; width:100%;}
#player-popup li {list-style:none; font-size:18px; line-height:27px; color:#fff;}

#stats-popup-table_wrapper, #stats-popup-table {display:none;}
#stats-popup {display:none; position:fixed; top:0; bottom:0; left:0; right:0; height:100%; width:100%; padding: 50px 20px 15px 20px; background:rgba(0,20,0,0.97); border:8px solid rgba(255,255,255,0.2); overflow:hidden; z-index:9999;}
#stats-popup-inner {height: 100%; width: 100%; padding: 20px; overflow-y: scroll; overflow-x:auto; -webkit-overflow-scrolling: touch;}
#stats-popup-table {padding-top: 15px;}
#stats-popup-table tbody { }
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {color: #f5f5f5;}
#stats-popup-table tbody tr:nth-child(even) {background: rgba(255,255,255,0.6);}
#stats-popup-table tbody tr:nth-child(odd) {background: rgba(255,255,255,0.8);}
#stats-popup-table tbody tr {color: #111;font-size: 13px;}

#stats-popup-table thead tr {color:#f5f5f5; font-size:13px;}
#stats-popup-table thead th {padding-left:10px; text-align:left;}
#stats-popup-table thead .sorting, #stats-popup-table thead .sorting_asc_disabled, #stats-popup-table thead .sorting_desc_disabled {background-color: rgba(0,0,0,0.7); background-image:none;}
#stats-popup-table thead .sorting_asc {background-color: #870d1b;background-image: none; position:relative;}
#stats-popup-table thead .sorting_asc:after {position:absolute; display:inline-block; content:'\00AB'; color:#f5f5f5; font-size:15px; line-height:15px; transform:rotateZ(90deg); right:5px;}
#stats-popup-table thead .sorting_desc {background-color: #870d1b;background-image: none; position:relative;}
#stats-popup-table thead .sorting_desc:after {position:absolute; display:inline-block; content:'\00BB'; color:#f5f5f5; font-size:15px; line-height:15px; transform:rotateZ(90deg); right:5px;}

@media screen and (max-width:1200px) {
	.team-box {flex-basis:33.33%;}
}


@media screen and (max-width:992px) {
	.draftroom header {height:90px;text-align:center;}
	.draftroom #main-content {top:90px;}
	body.draft-loading #draft-loading {top:90px;}
	#logo {float: none;display:block;padding: 3px 0 2px;margin: 0;}
	#logo img {height:45px;}
	header h1 {display:inline-block; padding: 0 0 0 30px;}
	header nav ul {line-height:25px;}
	.team-box {flex-basis:50%;}
	#timer-bar {top:95px;}
	#count30 {top:85px;}
}


@media screen and (max-width:768px) {
	#main {height:-webkit-calc(100% + 1px); height:calc(100% + 1px);}
	header nav ul {text-align:center;}
	header nav ul li {padding-right:15px;}
	.draftroom header {display:block;}
	
	.draftroom header nav ul li:last-of-type {padding-right:20px;}
	.team-box {flex-basis:100%;}
	#main-content .team-none .team-interior ol {margin-right:-10px; padding-right:40px;}
}

@media screen and (max-width:600px) {
	.draftroom header {height:90px;}
	.draftroom #logo {float:left;}
	.draftroom #logo img {height:30px;}
	header h1 {font-size:18px;line-height:18px;float:none;padding:0 0 5px;display:block; text-align:center;}
	.draftroom header h1 {position:absolute; top:10px; right:20px;}
	header nav {float:none; margin:0 auto; clear:both;}
	.draftroom header nav {margin-top:10px;}
	header nav ul {line-height:20px;}
	.draftroom header nav ul {line-height:24px;}
	.draftroom header nav ul li:last-of-type {padding-right:0;}
	.draftroom #main-content {top:90px; bottom:20px;}
	#left {width:50%;padding:0 10px 0 0;}
	#right {left:50%;padding:0 15px 0 0;}
	.team-box {width:100%;margin:0;max-width:none;min-width:0;}
	#main-content .team-none .team-interior ol {font-size:2.8vw;}
	#timer-bar {top:90px;}
	#count30 {top:75px; font-size:16px;}
	footer {height:20px;}
	.copyright {line-height:20px;}
	#player-popup {padding: 50px 15px 15px 15px;}
	#player-popup li {font-size:3.7vw; line-height:1.8;}
	#stats-popup {padding: 50px 10px 15px 10px;}
	#stats-popup-inner {padding-left:0;}
	#stats-popup-table tbody tr {font-size: 3vw;}
	#main-content .team-none .team-interior  li {width:34vw;}
	.player-info {left:34vw;}

	body.draft-loading #draft-loading {top:90px; bottom:20px;}
}



/* Loading animation */
@-webkit-keyframes uil-rolling-anim {
  0% {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  100% {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes uil-rolling-anim {
  0% {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  100% {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes uil-rolling-anim {
  0% {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  100% {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-ms-keyframes uil-rolling-anim {
  0% {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  100% {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes uil-rolling-anim {
  0% {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  100% {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes uil-rolling-anim {
  0% {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  100% {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-o-keyframes uil-rolling-anim {
  0% {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  100% {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes uil-rolling-anim {
  0% {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  100% {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.uil-rolling-css {
  width: 200px;
  height: 200px;
}
.uil-rolling-css > div {
  width: 200px;
  height: 200px;
  position: relative;
  -ms-animation: uil-rolling-anim 1.5s linear infinite;
  -moz-animation: uil-rolling-anim 1.5s linear infinite;
  -webkit-animation: uil-rolling-anim 1.5s linear infinite;
  -o-animation: uil-rolling-anim 1.5s linear infinite;
  animation: uil-rolling-anim 1.5s linear infinite;
}
.uil-rolling-css > div div {
  position: absolute;
  width: 200px;
  height: 100px;
  border-radius: 1000px 1000px 0 0;
  border-color: #910009;
  border-style: solid;
  border-width: 30px;
  border-bottom-width: 0;
}
.uil-rolling-css > div div:nth-of-type(2) {
  -ms-transform: translate(0, 50px) rotate(45deg) translate(0, -50px);
  -moz-transform: translate(0, 50px) rotate(45deg) translate(0, -50px);
  -webkit-transform: translate(0, 50px) rotate(45deg) translate(0, -50px);
  -o-transform: translate(0, 50px) rotate(45deg) translate(0, -50px);
  transform: translate(0, 50px) rotate(45deg) translate(0, -50px);
}