/******************************************
* Cortex Media - Base CSS
******************************************/
/******************************************
* Default Colors
*******************************************/
/*************
* Colors     *
*************/
.red {
  color: #f2645a; }

.grey {
  color: #7d7d7d; }

.grey-light {
  color: #ccc; }

.white {
  color: #fff; }

.relative {
  position: relative; }

/********************
* Main HTML Elements
*********************/
html {
  overflow-y: scroll; }

body {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  color: #333; }

.flex {
  display: flex; }

/**************
* Placeholder
**************/
::-webkit-input-placeholder {
  color: #bbb; }

:-moz-placeholder {
  color: #bbb; }

::-moz-placeholder {
  color: #bbb; }

:-ms-input-placeholder {
  color: #bbb; }

/**************
* Common      *
***************/
.float-left {
  float: left; }

.float-right {
  float: right; }

.hidden {
  display: none; }

.invisible {
  visibility: hidden; }

.underline {
  text-decoration: underline; }

.block-element {
  display: block; }

.pointer {
  cursor: pointer; }

.move {
  cursor: move; }

.center {
  margin: 0 auto; }

.vertical-center {
  vertical-align: middle; }

.vertical-sub {
  vertical-align: sub; }

.centered-text {
  text-align: center; }

.right-aligned-text {
  text-align: right; }

.small-font {
  font-size: 0.8em; }

.margin-top {
  margin-top: 40px; }

.margin-top-double {
  margin-top: 80px; }

.margin-top-half {
  margin-top: 20px; }

.margin-left {
  margin-left: 40px; }

.margin-left-half {
  margin-left: 20px; }

.margin-right {
  margin-right: 40px; }

.margin-right-half {
  margin-right: 20px; }

.margin-bottom {
  margin-bottom: 40px; }

.margin-bottom-half {
  margin-bottom: 20px; }

.no-margin {
  margin: 0 !important; }

.no-padding {
  padding: 0 !important; }

.no-border {
  border: none !important; }

.strong {
  font-weight: 700; }

.no-uppercase {
  text-transform: none; }

/***************
* Grid         *
***************/
.grid-inner {
  padding: 0 0 0 0;
  width: 100%;
  max-width: 1300px; }

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

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

.col1 {
  width: 5.5%; }

.col2 {
  width: 14%; }

.col3 {
  width: 22.5%; }

.col4 {
  width: 31%; }

.col5 {
  width: 39.5%; }

.col6 {
  width: 48%; }

.col7 {
  width: 56.5%; }

.col8 {
  width: 65%; }

.col9 {
  width: 73.5%; }

.col10 {
  width: 82%; }

.col11 {
  width: 90.5%; }

.col12 {
  width: 99%;
  margin: 0; }

/*
.col1 img, .col2 img, .col3 img, .col4 img, .col5 img, .col6 img, .col7 img, .col8 img, .col9 img, .col10 img, .col11 img, .col12 img {
  height: auto;
  display: block;
}
*/
.form input[type=text],
.form input[type=search],
.form input[type=email],
.form input[type=date],
.form input[type=password],
.form textarea {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-size: 1.1rem;
  outline: 0;
  background: #f2f2f2;
  border: 0;
  margin: 0 0 16px;
  padding: 12px 2.2em 12px 8px; }
  .form input[type=text].full-width,
  .form input[type=search].full-width,
  .form input[type=email].full-width,
  .form input[type=date].full-width,
  .form input[type=password].full-width,
  .form textarea.full-width {
    width: 100%; }
  .form input[type=text]::placeholder,
  .form input[type=search]::placeholder,
  .form input[type=email]::placeholder,
  .form input[type=date]::placeholder,
  .form input[type=password]::placeholder,
  .form textarea::placeholder {
    color: #777777; }

.form.form-invers input[type=text],
.form.form-invers input[type=email],
.form.form-invers input[type=date],
.form.form-invers input[type=password],
.form.form-invers textarea {
  background: #ffffff; }

.form select.full-width {
  width: 100%; }

.form .show-inner-icon {
  position: relative; }
  .form .show-inner-icon i {
    position: absolute;
    right: 0.55em;
    top: 0.55em;
    padding: 1em;
    pointer-events: none;
    background: url("/static/img/checkmark.svg") no-repeat; }

/********
*Login  *
********/
.login-wrapper {
  width: 100%;
  height: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff; }

.login-container {
  width: 35%;
  height: 50%;
  min-width: 350px; }

@media (max-device-width: 768px) {
  .login-container {
    height: 50%;
    width: 80%;
    zoom: 2; } }

.login-content {
  position: relative;
  bottom: -50%;
  color: #333;
  background-color: #fff;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
  padding: 24px;
  justify-content: center;
  display: contents; }
  .login-content input {
    width: 80%; }
  .login-content .login-title {
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: flex-start;
    position: absolute;
    left: 50%;
    transform: translateX(-50%); }
  .login-content .login-logo {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 24px;
    background-color: transparent;
    padding: 15px;
    align-items: center;
    position: relative;
    align-content: center;
    text-align: center;
    display: flex; }
  .login-content .login-failed, .login-content .login-no {
    display: block;
    text-align: center;
    padding: 17px;
    align-items: center; }
    .login-content .login-failed h3, .login-content .login-no h3 {
      color: #bf4f47; }
    .login-content .login-failed p, .login-content .login-no p {
      color: #bf4f47; }
    .login-content .login-failed p.no-red, .login-content .login-no p.no-red {
      color: #333; }

.ie8 div.login-content {
  background-color: #444; }

.login-input {
  border: 0;
  width: 66%;
  height: 36px;
  font-size: 1.2em;
  padding-left: 10px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%); }

.white-link {
  color: #7d7d7d; }

/******************
 * Tabs           *
 ******************/
.tab-container {
  display: inline-block;
  width: 100%;
  background-color: #fff;
  border-bottom: 2px solid #681310; }

@media (max-width: 768px) {
  .tab-container {
    display: flex;
    flex-wrap: wrap; }
  .tab {
    margin-top: 5px !important;
    text-align: center;
    min-width: 150px;
    width: 150px;
    flex-grow: 1;
    display: inline-block;
    height: auto !important; } }

.tab {
  float: left;
  height: 35px;
  padding: 5px 20px;
  margin: 0 5px 0 0;
  color: #fff;
  background-color: #c5c5c5;
  cursor: pointer; }

.tab:hover {
  background-color: #681310; }

.tab-selected {
  background-color: #681310; }

.tab .tab-label {
  line-height: 25px;
  /*same as .tab height minus padding*/ }

.tab-loader {
  display: none;
  width: 50px;
  height: 35px;
  background: url("/img/icons/ajax-loader.gif") no-repeat center center; }

/************
*Messages   *
************/
.standard-element-margin {
  margin: 0;
  margin-bottom: 38px; }

.info-message-header {
  position: absolute;
  top: 0;
  left: 1%; }

.info-message-header-inner {
  position: relative;
  left: -50%; }

.message-box {
  margin-top: 10px;
  margin-bottom: 0;
  min-height: 28px;
  /*position: relative;*/
  padding: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  overflow: auto; }

.info-box {
  color: #00529B;
  background-color: #BDE5F8; }

.success-box {
  color: #4F8A10;
  background-color: #DFF2BF; }

.warning-box {
  color: #9F6000;
  background-color: #FEEFB3; }

.error-box {
  color: #D8000C;
  background-color: #FFBABA; }

.message-box-text {
  width: 100%;
  padding: 0 10px; }

.message-box-text span {
  height: 24px;
  line-height: 24px;
  vertical-align: bottom; }

.message-box-text img {
  width: 24px;
  height: 24px;
  margin-right: 12px;
  vertical-align: middle; }

/************
*Misc stuff *
*************/
img.add-icon {
  padding-right: 8px;
  vertical-align: middle; }

.filters {
  padding-bottom: 15px; }

.active-filter {
  font-weight: 700; }

.growing-textarea {
  overflow: hidden; }

.linked-icon {
  width: 35px;
  opacity: 0.4;
  cursor: pointer;
  margin-left: 8px; }

.linked-icon-activated {
  opacity: 0.7; }

.linked-icon:hover {
  opacity: 0.8; }

.user-online-box {
  width: 310px;
  height: 60px; }

/***************
* standard table
************/
table th, table td {
  padding: 2px 10px 2px 0; }

table {
  border-spacing: 0;
  margin-bottom: 30px; }

table.fixed-information tr td {
  min-width: 100px; }

.input-field-width-80 {
  width: 80%; }

.input-field-width-60 {
  width: 60%; }

.search-label {
  font-size: 0.9em;
  color: #7d7d7d; }

.search-input {
  width: 300px; }
  .search-input input {
    width: 100%; }

.product-autocomplete-area {
  min-height: 400px; }

.checkmark {
  height: 44px;
  width: 75px;
  position: relative; }
  .checkmark div {
    position: absolute;
    top: 50%;
    left: 50%; }
    .checkmark div img {
      margin-top: -50%;
      margin-left: -50%; }

.category-select {
  width: 33%; }

.category-select-fields {
  width: 95%; }

.category-select-remove {
  width: 5%; }

.category-select-remove-icon, .video-link-remove-icon {
  width: 36px;
  cursor: pointer; }

.video-link-preview {
  height: 34px;
  line-height: 34px; }

/***************
* 404
*****************/
.notfound {
  margin: 0 auto; }

.glitch {
  color: #333;
  font-size: 100px;
  position: relative;
  width: 400px;
  margin: 0 auto; }

@keyframes noise-anim {
  0% {
    clip: rect(14px, 9999px, 48px, 0); }
  5% {
    clip: rect(43px, 9999px, 68px, 0); }
  10% {
    clip: rect(81px, 9999px, 62px, 0); }
  15% {
    clip: rect(99px, 9999px, 60px, 0); }
  20% {
    clip: rect(12px, 9999px, 40px, 0); }
  25% {
    clip: rect(8px, 9999px, 71px, 0); }
  30% {
    clip: rect(9px, 9999px, 66px, 0); }
  35% {
    clip: rect(2px, 9999px, 97px, 0); }
  40% {
    clip: rect(61px, 9999px, 30px, 0); }
  45% {
    clip: rect(61px, 9999px, 41px, 0); }
  50% {
    clip: rect(36px, 9999px, 89px, 0); }
  55% {
    clip: rect(67px, 9999px, 26px, 0); }
  60% {
    clip: rect(19px, 9999px, 45px, 0); }
  65% {
    clip: rect(67px, 9999px, 13px, 0); }
  70% {
    clip: rect(65px, 9999px, 89px, 0); }
  75% {
    clip: rect(92px, 9999px, 15px, 0); }
  80% {
    clip: rect(94px, 9999px, 49px, 0); }
  85% {
    clip: rect(86px, 9999px, 54px, 0); }
  90% {
    clip: rect(81px, 9999px, 89px, 0); }
  95% {
    clip: rect(29px, 9999px, 58px, 0); }
  100% {
    clip: rect(28px, 9999px, 99px, 0); } }

.glitch:after {
  content: attr(data-text);
  position: absolute;
  left: 2px;
  text-shadow: -1px 0 red;
  top: 0;
  color: #333;
  background: #fff;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: noise-anim 2s infinite linear alternate-reverse; }

@keyframes noise-anim-2 {
  0% {
    clip: rect(33px, 9999px, 42px, 0); }
  5% {
    clip: rect(79px, 9999px, 70px, 0); }
  10% {
    clip: rect(55px, 9999px, 6px, 0); }
  15% {
    clip: rect(77px, 9999px, 95px, 0); }
  20% {
    clip: rect(13px, 9999px, 16px, 0); }
  25% {
    clip: rect(44px, 9999px, 39px, 0); }
  30% {
    clip: rect(7px, 9999px, 71px, 0); }
  35% {
    clip: rect(76px, 9999px, 72px, 0); }
  40% {
    clip: rect(97px, 9999px, 23px, 0); }
  45% {
    clip: rect(3px, 9999px, 87px, 0); }
  50% {
    clip: rect(64px, 9999px, 88px, 0); }
  55% {
    clip: rect(17px, 9999px, 51px, 0); }
  60% {
    clip: rect(48px, 9999px, 18px, 0); }
  65% {
    clip: rect(38px, 9999px, 99px, 0); }
  70% {
    clip: rect(87px, 9999px, 53px, 0); }
  75% {
    clip: rect(28px, 9999px, 79px, 0); }
  80% {
    clip: rect(15px, 9999px, 25px, 0); }
  85% {
    clip: rect(97px, 9999px, 60px, 0); }
  90% {
    clip: rect(15px, 9999px, 73px, 0); }
  95% {
    clip: rect(59px, 9999px, 25px, 0); }
  100% {
    clip: rect(56px, 9999px, 96px, 0); } }

.glitch:before {
  content: attr(data-text);
  position: absolute;
  left: -2px;
  text-shadow: 1px 0 blue;
  top: 0;
  color: #333;
  background: #fff;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: noise-anim-2 3s infinite linear alternate-reverse; }