/***************************************************************************
 *
 *   This program is free software; you can redistribute it and/or modify
 *   it under the terms of the GNU General Public License as published by
 *   the Free Software Foundation; either version 2 of the License', or
 *   ('at your option) any later version.
 *
***************************************************************************/


/**********************************/
/**  MIDDLE BODY ELEMENTS  **/
/**********************************/

div#mysbMiddle {
  display: inline-block;
  width: 1024px;
  /* width: 100%; */
  min-height: 80vh;
  text-align: center;
}

@media (max-width: 1024px) {
  div#mysbMiddle {
    width: 768px;
  }
}

@media (max-width: 768px) {
  div#mysbMiddle {
    /* display: inline-block; */
    width: 98%;
  }
}

@media (max-width: 480px) {
  div#mysbMiddle {
    /* display: block; */
    width: 100%;
  }
}


/**********************************/
/**  GRID ELEMENTS  **/
/**********************************/

.container {
  display: inline-block;
  min-height: 250px;
  text-align: center;
}

.f-right,
.f-right-sm,
.f-right-md,
.f-right-lg {
  float: right;
}

.f-left,
.f-left-sm,
.f-left-md,
.f-left-lg {
  float: left;
}

.row {
  padding: .25rem;
  /* display: -webkit-box; */
  /* display: -ms-flexbox; */
  /* display: flex; */
  /* -ms-flex-wrap: wrap; */
  /* flex-wrap: wrap; */
  /* -webkit-box-flex: 1; */
  width: 100%;
  max-width: 100%;
  position: relative;
  text-align: left;
  display: inline-block;
}

*[class*="col-"] {
  1border: 1px solid red;
  1background-color: red;
}

*[class*="col-"] * {
  1width: 100%;
}

a[class*="col-"] > img {
  /* padding: 3px; */
  /* margin-top: 0.3rem; */
}


/**********************************/
/**  COLUMNS ELEMENTS  **/
/**********************************/

.col,
.col-1, .col-10, .col-11, .col-12, .col-2, .col-3,
.col-4, .col-5, .col-6, .col-7, .col-8, .col-9,
.col-auto, .col-lg,
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3,
.col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9,
.col-lg-auto, .col-md,
.col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3,
.col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9,
.col-md-auto, .col-sm,
.col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3,
.col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9,
.col-sm-auto, .col-xl,
.col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3,
.col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9,
.col-xl-auto {
  display: inline-block;
  position: relative;
  /* width: 100%; */
  min-height: 1px;
  /* padding-top: .3rem; */
  padding-right: .5rem;
  padding-left: .5rem;
  float: left;
  /* min-width: 35px; */
}

.col-1,
.col-sm-1,
.col-md-1,
.col-lg-1 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 8.33%;
  flex: 0 0 8.33%;
  max-width: 8.33%;
  width: 8.33%;
}

.col-2,
.col-sm-2,
.col-md-2,
.col-lg-2 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 16.66%;
  flex: 0 0 16.66%;
  max-width: 16.66%;
  width: 16.66%;
}

.col-3,
.col-sm-3,
.col-md-3,
.col-lg-3 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
  width: 25%;
}

.col-4,
.col-sm-4,
.col-md-4,
.col-lg-4 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 33.33%;
  flex: 0 0 33.33%;
  max-width: 33.33%;
  width: 33.33%;
}

.col-5,
.col-sm-5,
.col-md-5,
.col-lg-5 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 41.66%;
  flex: 0 0 41.66%;
  max-width: 41.66%;
  width: 41.66%;
}

.col-6,
.col-sm-6,
.col-md-6,
.col-lg-6 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
  width: 50%;
}

.col-7,
.col-sm-7,
.col-md-7,
.col-lg-7 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 58.33%;
  flex: 0 0 58.33%;
  max-width: 58.33%;
  width: 58.33%;
}

.col-8,
.col-sm-8,
.col-md-8,
.col-lg-8 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 66.66%;
  flex: 0 0 66.66%;
  max-width: 66.66%;
  width: 66.66%;
}

.col-9,
.col-sm-9,
.col-md-9,
.col-lg-9 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 75%;
  flex: 0 0 75%;
  max-width: 75%;
  width: 75%;
}

.col-10,
.col-sm-10,
.col-md-10,
.col-lg-10 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 83.33%;
  flex: 0 0 83.33%;
  max-width: 83.33%;
  width: 83.33%;
}

.col-11,
.col-sm-11,
.col-md-11,
.col-lg-11 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 91.66%;
  flex: 0 0 91.66%;
  max-width: 91.66%;
  width: 91.66%;
}

.col,
.col-12,
.col-sm-12,
.col-md-12,
.col-lg-12 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
  width: 100%;
}

.col-auto,
.col-sm-auto,
.col-md-auto,
.col-lg-auto,
 {
  -webkit-box-flex:0;
  -ms-flex:0 0 auto;
  flex:0 0 auto;
  width:auto;
  max-width: 100%;
}

.col-unique {
  float: none;
}

@media (max-width: 1024px) {
  .f-right-lg,
  .f-left-lg {
    float: none;
    clear: both;
    display: inline-block !important;
  }
  .col-lg,
  .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3,
  .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9,
  .col-lg-auto {
    float: none;
    clear: both;
    display: inline-block;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
  }
}

@media (max-width: 768px) {
  .f-right-md,
  .f-left-md {
    float: none;
    clear: both;
    display: inline-block !important;
  }
  .col-md,
  .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3,
  .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9,
  .col-md-auto {
    float: none;
    clear: both;
    display: inline-block;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
  }
  *[class*="col-"] {
    padding-right: .2rem;
    padding-left: .2rem;

  }
}

@media (max-width: 480px) {
  .f-right-sm,
  .f-left-sm {
    float: none;
    clear: both;
    display: inline-block !important;
  }
  .col-sm,
  .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3,
  .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9,
  .col-sm-auto {
    float: none;
    clear: both;
    display: inline-block;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100% !important;
    width: 100% !important;
  }
  *[class*="col-"] {
    padding-right: .5rem;
    padding-left: .5rem;

  }
}


/**********************************/
/**  SIZED BLOCK ELEMENTS  **/
/**********************************/

.w-auto {
  width: auto !important;
}

.w-100,
.w-sm-100,
.w-md-100,
.w-lg-100 {
  display: inline-block;
  width: 100%;
  max-width: 1020px;
}
.w-sm-100 {
  max-width: 470px;
}
.w-md-100 {
  max-width: 760px;
}
.w-lg-100 {
  max-width: 1020px;
}


@media (max-width: 1024px) {
}

@media (max-width: 768px) {
}

@media (max-width: 480px) {
}


/**********************************/
/**  HIDE/SHOW ELEMENTS  **/
/**********************************/

.d-show,
.d-show-sm,
.d-show-md,
.d-show-lg {
}


@media (max-width: 480px) {
  .d-show-sm { display: none !important; }
}

@media (max-width: 768px) {
  .d-show-md { display: none !important; }
}

@media (max-width: 1024px) {
  .d-show-lg { display: none !important; }
}

.d-hide {
  display: none !important;
  opacity: 0;
}
.d-hide-sm,
.d-hide-md,
.d-hide-lg {
}


@media (min-width: 481px) {
  .d-hide-sm { display: none !important; }
}

@media (min-width: 769px) {
  .d-hide-md { display: none !important; }
}

@media (min-width: 1025px) {
  .d-hide-lg { display: none !important; }
}

.d-hiding {
  opacity: 0;
  -webkit-transition:
    opacity 0.3s;
  transition:
    opacity 0.3s;
}
.d-showing {
  opacity: 1;
  -webkit-transition:
    opacity 0.3s;
  transition:
    opacity 0.3s;
}