@font-face { font-family: 'NotoSans'; src: url(../font/NotoSans-Regular.ttf) }
@font-face { font-family: 'AstroSpace'; src: url(../font/AstroSpace-eZ2Bg.ttf);  font-weight: bold; }

/* Over-ride std checkbox */
input[type=checkbox] { display:none; }
label:has( input[type=checkbox])::before { content: ''; border: 1px solid #ddd; color: #f3f3f3; display: inline-block;  height: 1.2em; line-height: 1em;  margin: 0.5em; text-align: center; vertical-align: middle; width: 1.2em; }
label:has( input[type=checkbox]:checked)::before { background-color: #2b78e4; content: "\2713"; }

/* Over-ride std radio */
input[type=radio] { display:none; }
label:has( input[type=radio])::before { content: ''; border: 1px solid #ddd; border-radius: 50%; color: #f3f3f3; display: inline-block; font-size: 2em;  height: 1.2em; line-height: 1em; text-align: center; width: 1.2em;  margin-right: 10px;  vertical-align: middle; }
label:has( input[type=radio]:checked)::before { content: "\2022";  background-color: #2b78e4; content: "\2713"; }

.align_center { align-self: center }
.align_end { justify-content: end; }
.align_start { align-self: flex-start }

.btn { align-items: center; border: 1px solid; border-radius: 0.3em; color: black; cursor: pointer; display: flex; flex-direction: row; font-weight: 550;  gap: 0.3em; justify-content: center; margin: 0.3em; min-height: 3em; padding: 1.25em 1.5em; text-decoration: none; text-overflow: ellipsis;}
/*.btn:focus { outline: 0.2em solid #fffb00; }*/
.btn:active { box-shadow: inset 1px 2px 5px #777; transform: translateY(1px); }
.btn:active:has(input:disabled) {box-shadow: none; transform: none;}
.btn:has(input.hidden) { display: none }

/* hide custom checkbox/radio behaviour for label.btn (used extensively) */
label.btn:has( input[type=checkbox])::before { content: none; }
label.btn:has( input[type=radio])::before { content: none; }

.btn.primary { background-color: #f5a600; border-color: #f5a600; color: #333333;  }
.btn.primary:active { background-color: #e09900; border-color: #e09900; }
.btn.primary:has(input:checked) {}
.btn.primary:has(input:disabled) {}
.btn.primary:disabled { background-color: #cccccc; border-color: #cccccc; color: #999999 }

.btn.secondary { background-color: #ffffff; border-color: #333333; color: #333333; }
.btn.secondary:active { background-color: #ffffff; border-color: #c6d2e6 }
.btn.secondary:disabled { border-color: #cccccc; color: #999999 }
.btn.secondary:has(input:checked) { background-color: #d8dfed; border-color: #d8dfed; box-shadow: inset 1px 2px 5px #777; transform: translateY(1px); }
.btn.secondary:has(input:disabled) { border-color: #cccccc; color: #999999 }

.btn.tertiary { align-content: center; background-color: #ffffff; border-color: #ffffff; color: #2b78e4; display: block; min-height: 2em; padding: 0.3em; text-decoration: underline; }
.btn.tertiary.menu { text-decoration: none; }
.btn.tertiary:active { background-color: #c6d2e6; border-color: #c6d2e6; }
.btn.tertiary:has(input:checked) {}
.btn.tertiary:has(input:disabled) {}

.btn.special1 { background-color: #ffffff; border-color: #f5a600; color: #f5a600; font-weight: bold; }
.btn.special1.mobile { border-radius: 50%; bottom: 4em; height: 6em; position: fixed; right: 2em; width: 6em;  z-index: 10; }
.btn.special1:active { background-color: #e09900; border-color: #e09900;  color: #ffffff }
.btn.special1:has(input:checked) {}
.btn.special1:has(input:disabled) { background-color: #ffffff; border-color: #cccccc; color: #cccccc; }
.btn.special1:disabled { background-color: #cccccc; border-color: #cccccc; }

.btn.special2 { background-color: #ffffff; border-color: #ffffff; color: #333333; flex: 0 1 auto; margin: 0px; padding: 0.5em 0.5em; position: relative; text-decoration: none; }
.btn.special2:active { background-color: #c6d2e6; border-color: c6d2e6; }
.btn.special2:has(i:only-child) { aspect-ratio: 1; flex: 0 0 auto; }
.btn.special2:has(input:checked) { background-color: #d8dfed; border-color: #d8dfed }
.btn.special2:has(input:disabled) { border-color: #cccccc; color: #999999 }
.btn.special2.selected { background-color: #d8dfed; border-color: #d8dfed; font-weight: bold; }
.btn.special2 .dot { aspect-ratio: 1; background-color: DeepSkyBlue; border-radius: 50%;  justify-content: center; position: absolute; right: 0em; top: 0em; width: 1em;}

@media (hover: hover) {
  .btn.primary:hover { background-color: #ffb10a; border-color: #ffb10a; }
  .btn.secondary:hover { background-color: #d8dfed; border-color: #333333; }
  .btn.secondary:hover:has(input:disabled) { background-color: #ffffff;}
  .btn.tertiary:hover { background-color: #ffffff; border-color: #ffffff; font-weight: bold; }
  .btn.special1:hover { background-color: #f5a600; border-color: #f5a600; color: #ffffff }
  .btn.special2:hover { background-color: #d8dfed; border-color: #d8dfed; }
}

.btn.hour { height: 3em; width: 3em; }
.btn.large { font-size: 1.13em; }
.btn.loader { color: transparent; }
.btn.naked { border-width: 0; }
.btn.small { font-size: 0.88em; width: 1em;}
.btn.square { aspect-ratio: 1 / 1; }
.btn.thin { height: 2em; margin: 0.1em; padding: 0.3em }
.btn.tiny { height: 1em; padding: 0.8em; min-height: 1em;  width: 1em; }

.btn.replicate { background-color: #eeeeee; border-radius: 50%; border-width: 0; color: #f5a600; height: 3em; padding: 0.3em; width: 3em; }
.btn.sml { height: 1.5em; width: 1.5em; }
.btn.thin { height: 2em; margin: 0.1em; padding: 0.3em }


.color { color: #f5a600 }
.cta_desktop { padding: 1em; width: 100% }
.disabled { border-color: #aaaaaa; color: #aaaaaa }
.errorlist { color: red; }
.head_back { order: 40 }
.head_fwd { order: 50 }
.head_icon { order: 10 }
.head_more { order: 30 }
.head_txt { order: 20 }
.hidden { display: none }

.ellipsis { display: block; overflow: hidden;  text-overflow: ellipsis; white-space: nowrap; }

.item { align-items: start; display:flex; flex-flow: row wrap; justify-content: center; padding:0.3em 0.3em 0.9em 0em; }
.item .badges { align-items: flex-end; display: flex; flex: 0 0 auto; flex-direction: column; height: 100%; width: 20%}
.item .badges time {  margin-top: auto; }
.item .lines { display: flex; flex: auto; flex-direction: column; width: 75% }
.item div.note { width: 100% }
.item div.notes { flex: 1 1 0; overflow:hidden; text-overflow: ellipsis;}
.item p { display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: auto }
.item span.note { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.item.unseen { border-left-color: #f5a600; border-left-width: 0.5em; font-weight: bold }
.item.unseen div.icon { color: #f5a600 }

.invisible { visibility: hidden }
.loader::after {
  align-self: center;
  position: absolute;
  content: "";  
  width: 2em;
  aspect-ratio: 1;
  --_g: no-repeat radial-gradient(farthest-side,#999999 90%,#0000);
  background: var(--_g), var(--_g), var(--_g), var(--_g);
  background-size: 40% 40%;
  animation: l46 1s infinite;
}
.push_down { margin-top: 4em; }
.push_left { margin-right: auto }
.push_right { margin-left: auto }
.round { aspect-ratio: 1/1; border-radius: 50%;}
.selected { color: #f5a600 }
.stripes { background: repeating-linear-gradient(45deg, #f5a600, #f5a600 2px, #ffffff 3px, #ffffff 10px); }
.sml { height: 1.5em; min-height: 0; min-width: 0; width: 1.5em; }
.todo { display: none; border: 3px dotted SkyBlue }
.wall { display: flex; flex-direction: row; flex-wrap: wrap; gap: 1em; justify-content: center; }
a.btn {position: relative;}
a:has(input:disabled) { pointer-events: none; }
body { align-items: center; display: flex; flex-direction: column; font-family: NotoSans; height: 100vh; padding: 0; }
div { }
div.alert { align-items: center; display: none; flex: auto; flex-direction: column; justify-content: start; margin: 0; }
div.banner { align-items: center; background-color: #ffffff; display: flex; flex: none; flex-direction: column; position: -webkit-sticky; position: sticky; top: 4em; margin: 0 -1em 0 -1em; padding: 1em; text-align: center }
div.banner.active { background-color: #f5a600; }
div.banner.complete { background-color: lightgrey; }
div.banner.xancelled { background-color: yellow; }

.btn.auto { height: auto; width: 100%; }

div.chat_bubble { display: flex; background-color: #eeeeee; flex-direction: column; gap: 1em; max-width: 66%; min-width: 10em; padding: 0.3em; }
div.chat_bubble .row {display: flex; flex-direction: row; gap: 1em; justify-content: space-between; } 
div.chat_bubble .name { font-weight: bold; }
div.chat_bubble .text {  }
div.chat_bubble time {  margin-left: auto }
div.chat_input { align-items: center; display: flex; flex-direction: row; gap: 0.3em; justify-content: stretch; width: 100% }
div.chat_input div:not([class]) { flex-grow: 1; }
div.chat_item { border: 0 solid black; flex: auto; flex-direction: row; gap: 0.3em; justify-content: flex-start; margin: 0em; max-width: 66%; padding: 0.3em }
div.chat_item .name { font-weight: bold; }
div.context_menu { align-items: center ; display: flex; flex: 0 0 auto; flex-direction: row; justify-content: end; width: 10em}
div.day { flex: 0 0 auto; flex-grow: 4; height: 2em; white-space: nowrap }
div.day.fri { grid-column: 1 / 1; grid-row: 5 / 5 }
div.day.mon { grid-column: 1 / 1; grid-row: 1 / 1 }
div.day.sat { grid-column: 1 / 1; grid-row: 6 / 6 }
div.day.sun { grid-column: 1 / 1; grid-row: 7 / 7 }
div.day.thu { grid-column: 1 / 1; grid-row: 4 / 4 }
div.day.tue { grid-column: 1 / 1; grid-row: 2 / 2 }
div.day.wed { grid-column: 1 / 1; grid-row: 3 / 3 }
div.detail { align-items: stretch; display: flex; flex: 0 1 68.75%; flex-direction: column; gap: 1em; padding: 0 1em 10em 1em; width: 68.75% }
div.detail_body { }
div.detail_form { }
div.detail_head { align-items: center; border-style: solid; border-width: 0 0 0.1em 0; display: flex; flex: 0 0 auto; flex-direction: row; justify-content: start; margin: 0 -1em 0 -1em; padding: 1em }
div.detail_n { flex: 0 0 auto; gap: 1em; }
div.detail_rival { flex-direction: row; flex-wrap: wrap; justify-content: center; width: 100% }
div.down { align-items: start; background-color: white; border: 1px solid #888888; display: flex; flex-direction: column; gap: 0.5em; left: 0; margin: 0.3em; min-width: 100%; opacity: 1.0; padding: 0.3em 1em 0.3em 1em; position: absolute; top: 3.2em; white-space: nowrap; z-index: 10 }
div.down div { justify-content: space-between; padding: 0.3em; width:100% }
div.down div.link { justify-content: end; width: auto }
div.down label { align-items: stretch; gap: 1em; justify-content: space-between; padding: 0.3em 0 0.3em 0; text-align: center }
div.down label:has(input:checked) { color: #f5a600 }
div.down label:has( input[type=checkbox])::before { content: none; }
div.down label:has( input[type=radio])::before { content: none; }
div.drop_down { display: flex; flex: 1 1 auto; flex-direction: column; position: relative; right:0.3em;}
div.drop_down:has(div.down:empty) { display: none; }
div.drop_down.icon div.down { top: 3em; width: auto }
div.drop_down.icon div.drop { border-width: 0px; height: auto; }
div.drop { width: 100% }
div.drop_up {}
div.disabled { border-color: #aaaaaa; color: #aaaaaa }
div.fat { transform: scaleX(1.6); padding: 0 0.2em 0 0.2em }
div.field { align-items: stretch; display: flex; flex: auto; flex-direction: column; justify-content: start; padding: 2em 0 0.5em 0; width: 100% }
div.field.naked { padding: 0 }
div.form { gap: 1em }
div.flex_space { flex-grow: 3 }
div.grid_2_col { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; justify-items: center; width: 100% }
div.grid_3_col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1em; justify-items: center; margin: 0.3em; padding: 1em 0 0 0; width: 100% }
div.head {  display: flex; flex: auto; flex-direction: column; padding: 0 1em 0 1em; width: 50%  }
div.hour_grid { grid-template-columns: repeat(auto-fit, minmax(3em, max-content)); justify-content: left; width: 100% }
div.hrs { border: 1px solid black; border-radius: 0.3em; height: 2em; justify-content: center }
div.hrs.apm { background-color: #eeeeee; border: 0px solid black; color: white; flex: auto; font-size: xx-large; justify-content: center }
div.icon { align-content: center; border: 0px solid black; display: block; flex: 0 0 auto; height: 3em; justify-content: center; width: 2em }
div.icon.badge { border: 0.2em solid #f5a600; color: #f5a600; border-radius: 50%; height: 2.5em; padding: 0.3em; width: 2.5em; }
div.icon.info { border-width: 0.3em; border-radius: 50%; padding: 0.3em }
div.icon.medium { height: 3em; width: 3em }
div.icon.small { border-width: 0.2em; height: 2em; width: 2em }
div.icon.tiny { border-width: 0.1em; height: 1em; width: 1em }
div.icon .btn.drop { justify-content: center; }
div.info { position: relative }
div.info .info_text { background-color: white; border: 1px solid black; border-radius: 0.3em; font-size: 0.8em; justify-content: center; opacity: 1; padding: 0.3em; position: absolute; right: -9em; text-align: left; top: 150%; width: 20em; z-index: 2 }
div.info.push_right .info_text { right: 0; text-align: right;  }
div.info .info_text::after { border-color: transparent transparent black transparent; border-width: 0.8em; bottom: 100%; content: " "; position: absolute; right: 9em; margin-left: -0.8em; border-style: solid }
div.info.push_right .info_text::after { right: 0; }
div.info_bubble { align-items: center; background-color: #eeeeee; justify-content: flex-start; margin: 0.3em; padding: 0.3em }
div.label { align-items: center; display: flex; flex: auto; flex-direction: row; gap: 2em; justify-content: start; padding: 1em 0 0.5em 0; width: 100% }
div.list { align-items: stretch; border-width: 0 0.1em 0 0; display: flex; flex: 1 1 100%; flex-direction: column; justify-content: flex-start; overflow: hidden; padding: 1em; width: 100% }
div.list_bar { border-width: 0 0.1em 0 0; border-style: solid; display: flex; align-items: start; display: flex; flex: 0 1 auto; flex-direction: column; justify-content: start; width: 31.25%; }
div.list_head { align-items: center; border: 1px solid black; border-width: 0 0 0.1em 0; display: flex; flex: 0 0 auto; flex-direction: row; justify-content: space-between; margin: 0 -1em 0 -1em; padding: 1em }
div.log_entry { align-items: center; border: 0 solid black; display: flex; flex: auto; flex-direction: row; gap: 0.3em; margin: 0em; padding: 0.3em }
div.log_entry .icon { flex: 0 0 3em; }
div.log_entry.chat {}
div.log_entry.event {}
div.log_entry.match {}
div.logo { font-size: 1.27em; font-family: AstroSpace; font-weight: bold; padding: 0.1em; }
div.nextup { align-items: center; display: flex; flex: auto; flex-direction: column; justify-content: start; margin: 4em 0 0 0 ; padding: 1em }
div.option { display: flex; align-items: center; flex-direction: row; justify-content: space-between; }
div.options { align-items: stretch; background-color: white; border: 1px solid #bbbbbb; border-radius: 0.3em; flex-direction: column; justify-content: flex-start; opacity: 1.0; padding: 0.3em; position: relative; width: 100% }
div.paver { display: flex; flex: auto; flex-direction: row; gap: 2em; justify-content: center; padding: 1em; }
div.pillar { align-items: center; display: flex; flex-direction: column; justify-content: start; padding: 1em }
div.plank { display: flex; flex: 0 0 0; flex-direction: row; justify-content: space-around; padding: 1em; width: 100% }
div.pole { align-items: start; display: flex; flex: auto; flex-direction: column; justify-content: start; width: 100% }
div.range_options { display: flex; flex-direction: row; gap: 1em; justify-content: space-between; padding: 1em 0 0 0 ; width: 100% }
div.range_options .option { text-align: center }
div.replicate { border: 1px solid black; margin: 1em 0 1em 0; padding: 1em 0 1em 2em; }
div.post { align-items: stretch; display: flex; flex-direction: column; justify-content: start; width: 100% }
div.radio_block { display: grid; gap: 1em; margin: 0 0 1em 0 }
div.rival_rate_grid { grid-template-columns: 1fr 1fr; flex-direction: row }
div.schedule { display: grid; flex: 1 1 100%; gap: 0.3em; grid-template-columns: repeat(17, 1fr); grid-template-rows: repeat(7, auto); justify-items: stretch; width: 100% }
div.schedule_body { display: grid }
div.slider { background-color: #ccc; border-radius: 2.5em; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: .4s; width: 5.6em; }
div.slider:before { aspect-ratio: 1/1; background-color: #fff; border-radius: 50%; bottom: 0.2em; content: ""; left: 0.2em; position: absolute; transition: .4s; width: 2.2em }
div.splash { align-items: center; display: flex; height: 100%; justify-content:center; }
div.stars { display: flex;  padding: 1em; }
div.tab_area div.areas { width: 100%;}
div.tab_area div.areas div.area { width: 100%;}
div.tabs { z-index: 1 }
div.tabs div.tab { float: left; border: none; outline: none; padding: 14px 16px; transition: 0.3s; }
div.tabs div.tab.active { background-color: white; border: 1px solid black; border-bottom: none; position: relative; right: 1px; top: 4px; z-index: 1 }
div.todo { display: none; border: 3px dotted SkyBlue }
div.qwikgame { align-items: center; display: flex; flex-direction: row; font-size: 30px; font-family: AstroSpace; padding: 1em; }
div.slide_labels { gap: 1em; justify-content: space-between; width: 100% }
div.slide_label { text-align: center }
div.upgrade { border: 1px solid black; padding: 1em }
div.hidden { display: none }
fieldset { background-color: inherit; border: 1px solid #cccccc; display: flex; flex-direction: column; margin: 1em 0 3em 0; padding: 2em; width: 100%; }
fieldset.disabled { background-color: #eeeeee; border: 0px solid #eeeeee; color: #bbbbbb }
fieldset div { display:block; }
h1 { align-items: center; color: black; display: flex; flex-direction: row; font-size: 3em; font-family: AstroSpace; justify-content: center; line-height: 1.4em; margin: 0.5em 0; padding: 0 1em; }
h2 { align-items: center; color: black; display: flex; flex-direction: row; font-size: 1.13em; justify-content: start; text-align: left; margin: 0.3em; overflow: hidden; width: 100% }
h3 { align-items: center; color: black; display: flex; flex-direction: row; font-size: 1.13em; justify-content: start; gap: 1em; margin: 3em 0 1em 0; overflow: hidden;  text-align: left; }
h3.show_group { padding: 0 0.3em 0 0.3em; }
h3.show_group a { color: blue; justify-content: space-between; text-decoration: underline; }
h4 { align-items: center; color: black; display: flex; flex-direction: row; font-size: 1.13em; justify-content: space-between; gap: 2em; margin: 2em 0 1em 0; overflow: hidden; text-align: left; margin: 1.5em 0 0.8em 0; }
h4 span.caption { align-self: flex-start; font-size: 0.8em; margin-left: 3em }
h5 { align-items: center; color: black; font-size: 3em; font-family: AstroSpace; justify-content: center; line-height: 1.4em; padding: 0 1em; }
h6 { font-size: x-large; overflow: hidden; text-align: center; }
hr { color: #eeeeee; border-width: 1px; margin: 0.3em 0 0.3em 0; width: 100% }
img.logo { display: block; height: 2.54em; padding: 0.1em }
input[type=checkbox] { margin: 0em 1em 0em 1em; }
input[type=submit] { cursor: pointer; flex: 0 0 auto; flex-direction: row; gap: 0.3em; justify-content: center; text-align: center }
input[type=text] { flex: 1 1 auto; font-size: inherit }
input:checked + .slider { background-color: #66bb6a; }
input:checked + .slider:before { transform: translateX(3em); }
input[type=range] { display: flex; flex: 1 1 100%; height: 2em; margin: 1em 0 1em 0; width: 100% }
input.btn {position: relative;}
input.strength { display: flex; flex: 1 1 100%; height: 2em; margin: 1em 0 1em 0; width: 100% }
input.disabled { background-color: #eeeeee; color: #999999 }
label p { flex: auto; }
label.hidden { display: none }
label.large { border: 1px solid #eeeeee; padding: 1em; width:100% }
label.option { display: flex; align-items: center; gap: 1em; padding: 0.3em 0 0.3em 0; text-align: center }
label.option div.btn { height: 1em }
label.option:has( input[type=checkbox])::before { content: none; }
label.option:has( input[type=checkbox]:checked) { display: none; }
label.option:has(input:checked) { color: #f5a600 }
label.reveal { border-color: #ffffff; margin: 3em 0 0 0; padding: 1em 1em 1em 0em;}
label.reveal > input { display: none; }
label.reveal:active { box-shadow: none; transform: none;  }
label.reveal:has(input) ~ div.field { display: none; }
label.reveal:has(input:checked) ~ div.field { display: flex; }
label.reveal { display: inline-block; }
label.switch { display: inline-block; height: 2.6em; margin-right: 3em; position: relative; width: 4em }
label.switch input { display: none }
label.toggle input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0 }

legend { padding: 1em; }
ol { list-style: decimal; padding-left: 2em; }
p { margin: 0em 0em 2em 0em; padding: 0.3em; text-align: left }
p.bold { font-weight: bold }
p.large { color: #666666; font-size: large }
p.line { line-height: 1.6em; margin: 0em; max-height: 1.6em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
p.small { color: #666666; font-size: small }
select { background-color: #ffffff; display: block; font-size: 1.13em; height: 3em; width: 100% }
span.brick { display: inline-block; white-space: nowrap; width: auto; }
span.chat_show { }
span.flip { transform: rotate(180deg) }
span.icon { border-width: 0px; display: inline-block; text-align: center; width: 2em }
span.on { color: lightseagreen; }
span.off { color: indianred; }
span.qwik { color: #f5a600 }
textarea { border: 1px solid black; display: block}
time { color: #999999; font-size: small; text-align: right; }
ul.leaders { line-height: 2em; list-style: none; max-width: 40em; overflow-x: hidden; padding: 0; width: 100%; }
ul.leaders li:before { float: left; width: 0; white-space: nowrap; content: ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ";} 
ul.leaders span:first-child { background: white; padding-right: 0.33em; }
ul.leaders span + span { background: white; float: right; padding-left: 0.33em; }

@keyframes l46 {
  0%  {background-position: 0 0      ,100% 0,100% 100%,0 100%}
  40%,
  50% {background-position: 100% 100%,100% 0,0    0   ,0 100%}
  90%,
  100%{background-position: 100% 100%,0 100%,0    0   ,100% 0}
}
@media only screen and (max-width:600px) {
    div.flex_space { display: none }
    span.fat { display: none }
    span.full_day { display: none }
    span.mid_day { display: none }
}
@media only screen and (min-width:600px) {
    div.flex_space { display: none }
    span.fat { display: none }
    span.full_day { display: none }
    span.mid_day { display: inline-block }
}
@media only screen and (min-width:768px) {
    div.flex_space { display: block }
    span.fat { display: block }
    span.full_day { display: inline-block }
    span.mid_day { display: inline-block }
}
@media only screen and (min-width:992px) { }
@media only screen and (min-width:1200px) { }