/*------------------------------------------------------------------------------
  NHMVC Application CSS
------------------------------------------------------------------------------

sm 576px
md 768px
lg 992px
xl 1200px

------------------------------------------------------------------------------*/




/*------------------------------------------------------------------------------
  Misc
------------------------------------------------------------------------------*/

body {
  font-family:      'Jost', sans-serif;
}

.text-green {
  color:            #00b753 !important;
}

.text-yellow {
  color:            #ffda4a !important;
}

a {
  color:            #00b753;
  text-decoration:  none;
}

a:hover {
  color:            #ffda4a;
  text-decoration:  none;
  transition:       color 0.25s;
}

.list-group-item {
  background-color: transparent;
  border:           none;
}

.mb--5 {
  margin-bottom:    -3rem !important;
}

.carousel-control-prev {
  margin-left:      -2rem;
}

.carousel-control-next {
  margin-right:      -2rem;
}

.carousel-control-next, .carousel-control-prev {
  width:            1rem;
  color:            #666666 !important;
  font-size:        2.5rem;
}

.carousel-control-next:hover, .carousel-control-prev:hover {
  color:            #feb559 !important;
}

h2, h1 {
  color:            #00b753 !important;
  font-weight:      bold;
}

img.background {
  width:            100%;
}

.btn-lg {
  margin-top:       1.4rem;
  padding:          0.7rem;
  font-size:        0.8rem;
  line-height:      1;
  text-shadow:      none;
  color:            inherit;
  font-weight:      bold;
}

.overlay {
  position:         absolute;
  top:              0px;
  left:             0px;
  width:            100%;
  height:           100%;
  padding:          2rem;
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  justify-content:  center;
  text-align:       center;
  font-weight:      bold;
  color:            #ffffff;
  text-shadow:      0rem 0rem 1rem #000000;
  font-size:        1.6rem;
  line-height:      1.8rem;
}

tr.no-hover td {
  cursor:           default !important;
  background-color: transparent !important;
  color:            #212529 !important;
}

th.min_width,
td.min_width {
  width:            1%;
  white-space:      nowrap;
}

#home_main_image,
#main_image {
  margin-top:       -1.5rem !important;
  width:            100%;
  height:           30vw;
  overflow:         hidden;
  position:         relative;
  display:          flex;
  align-items:      center;
}

#home_main_image {
  height:           50vw;
}

#main_image img,
#home_main_image img {
  width:            100%;
}

#home_main_image .overlay {
  font-size:        1.7rem;
  line-height:      1.1;
}

.main_head {
  text-align:       center;
  font-size:        2rem;
  line-height:      1.2;
  margin-top:       2.5rem;
  margin-bottom:    1.5rem;
}

.main_paragraph {
  text-align:       center;
  font-size:        1rem;
  line-height:      1.45;
  margin-bottom:    2.5rem;
}

.list-group-item {
  font-size:        0.8rem;
  line-height:      1.2rem;
}

h2.scale {
  font-size:        1.5rem;
  line-height:      1.3;
}

p.scale {
  font-size:        1rem;
  line-height:      1.35;
}

#contact_map {
  min-height:       40rem;
}


@media (min-width: 576px) {

  #home_main_image .overlay {
    font-size:        2.5rem;
  }

  .btn-lg {
    margin-top:       1.8rem;
    padding:          0.9rem;
    font-size:        1rem;
  }

  .list-group-item {
    font-size:        1.1rem;
    line-height:      1.4rem;
  }

}


@media (min-width: 768px) {

  #home_main_image .overlay {
    font-size:        4rem;
  }

  .btn-lg {
    margin-top:       2.2rem;
    padding:          1.1rem;
    font-size:        1.2rem;
  }

  .main_head {
    font-size:        3rem;
    margin-top:       4rem;
    margin-bottom:    2rem;
  }

  .main_paragraph {
    font-size:        1.2rem;
    margin-bottom:    4rem;
    padding:          0% 5%;
  }

  .list-group-item {
    font-size:        1rem;
    line-height:      1.3rem;
  }

  h2.scale {
    font-size:        1.7rem;
  }

  p.scale {
    font-size:        1.2rem;
  }

}

@media (min-width: 992px) {

  #home_main_image .overlay {
    font-size:        4.5rem;
  }

  .btn-lg {
    margin-top:       2.4rem;
    padding:          1.2rem;
    font-size:        1.3rem;
  }

  .main_head {
    font-size:        3.5rem;
    margin-top:       4.5rem;
    margin-bottom:    2.5rem;
  }

  .main_paragraph {
    font-size:        1.3rem;
    margin-bottom:    4.5rem;
  }

  .list-group-item {
    font-size:        1.1rem;
    line-height:      1.4rem;
  }

}

@media (min-width: 1200px) {

  #home_main_image .overlay {
    font-size:        5.6rem;
  }

  .btn-lg {
    margin-top:       2.6rem;
    padding:          1.3rem;
    font-size:        1.4rem;
  }

  .main_head {
    font-size:        4rem;
    margin-top:       5rem;
    margin-bottom:    3rem;
  }

  .main_paragraph {
    margin-bottom:    5rem;
    padding:          0% 15%;
  }

}



/*------------------------------------------------------------------------------
  Banners
------------------------------------------------------------------------------*/

.banner {
  color:            #ffffff;
  background-color: #333333;
}

.banner h2 {
  text-align:       center;
  font-weight:      normal;
  font-size:        1.4rem;
  line-height:      1.4;
}

.banner p {
  font-size:        1.1rem;
  line-height:      1.5;
  margin-top:       1.6rem;
}


@media (min-width: 576px) {

  .banner h2 {
    font-size:        2.4rem;
  }

  .banner p {
    font-size:        1.2rem;
    margin-top:       1.9rem;
  }

}

@media (min-width: 1200px) {

  .banner h2 {
    font-size:        3rem;
  }

  .banner p {
    font-size:        1.5rem;
    margin-top:       2.5rem;
  }

}



/*------------------------------------------------------------------------------
  Menu
------------------------------------------------------------------------------*/

#menu {
  border:           1px solid #ffda4a;
  border-width:     0px 0px 2px 0px;
  background-color: #ffffff;
}

#menu a.active,
#menu a:hover {
  color:            #ffda4a !important;
}

#menu .navbar-brand img {
  max-width:        6.5rem;
}

#menu .navbar-toggler {
  border-radius:    0px;
  border:           none;
}

#menu .navbar-toggler i {
  background-color: #00b753;
  color:            #ffda4a;
  padding:          0.8rem;
  font-size:        1.4rem;
}

#menu .menu_contact a {
  color:            #00b753;
  font-weight:      bold;
  font-size:        1rem;
  line-height:      1.3rem;
}

#menu_dropdown {
  position:         absolute;
  top:              4rem;
  right:            0px;
  z-index:          10;
}

#menu_dropdown .nav-item {
  padding:          0.6rem;
  font-weight:      bold;
  color:            #ffffff;
  border:           1px solid #ffda4a;
  border-width:     0px 0px 1px 0px;
  justify-content:  flex-end;
  padding:          0.6rem 1.5rem;
}

#menu_dropdown {
  background-color: #00b753;
  border:           1px solid #ffda4a;
  border-width:     2px 0px 0px 0px;
}



@media (min-width: 576px) {

  #menu .navbar-brand img {
    max-width:        12rem;
  }

  #menu .navbar-toggler i {
    font-size:        1.9rem;
  }

  #menu .menu_contact a {
    font-size:        1.8rem;
    line-height:      2.3rem;
  }

  #menu_dropdown {
    top:              6rem;
    border-width:     0px;
  }

}



@media (min-width: 1200px) {

  #menu .navbar-brand img {
    max-width:        8rem;
  }

  #menu .menu_contact a {
    font-size:        1.4rem;
    line-height:      1.3rem;
  }

  #menu_dropdown .nav-item {
    background-color: #ffffff;
    color:            #00b753;
    border-width:     0px;
    text-align:       center;
  }

  #menu_dropdown {
    position:         static;
    background-color: #ffffff;
    border-width:     0px;
  }

  #menu_dropdown .nav-item {
    padding:          0.6rem 1vw;
  }

}



/*------------------------------------------------------------------------------
  Footer
------------------------------------------------------------------------------*/

#footer {
  background-color: #00b753;
  color:            #ffffff;
  font-size:        1rem;
}

#footer_header {
  font-weight:      bold;
  font-size:        1.8rem;
  line-height:      1.55;
}

#footer_social {
  font-size:        2.5rem;
  line-height:      2.5rem;
  border:           1px solid #aaaaaa;
  border-width:     0px 0px 1px 0px;
}

#footer a {
  color:            #ffda4a;
}

#footer a:hover {
  color:            #000000;
}

#footer_social a {
  color:            #ffffff;
}

#footer_copyright {
  font-size:        0.9rem;
  line-height:      1.55;
}

#footer_copyright span {
  white-space:      nowrap;
}


@media (min-width: 576px) {

  #footer {
    font-size:        1.2rem;
  }

  #footer_header {
    font-weight:      bold;
    font-size:        3rem;
  }

}


@media (min-width: 768px) {

  #footer {
    font-size:        1.1rem;
  }

}


@media (min-width: 992px) {

  #footer_copyright {
    font-size:        1rem;
  }

}



/*------------------------------------------------------------------------------
  Home Carousel
------------------------------------------------------------------------------*/

#home_trailers .carousel-inner .carousel-item.active,
#home_trailers .carousel-inner .carousel-item-next,
#home_trailers .carousel-inner .carousel-item-prev,
#hire_trailers .carousel-inner .carousel-item.active,
#hire_trailers .carousel-inner .carousel-item-next,
#hire_trailers .carousel-inner .carousel-item-prev,
#storage_photos .carousel-inner .carousel-item.active,
#storage_photos .carousel-inner .carousel-item-next,
#storage_photos .carousel-inner .carousel-item-prev,
#shipping_containers .carousel-inner .carousel-item.active,
#shipping_containers .carousel-inner .carousel-item-next,
#shipping_containers .carousel-inner .carousel-item-prev {
  display:          flex;
}

#home_trailers .carousel-inner .carousel-item-right.active,
#home_trailers .carousel-inner .carousel-item-next {
  transform: translateX(50%);
}

#home_trailers .carousel-inner .carousel-item-left.active,
#home_trailers .carousel-inner .carousel-item-prev {
  transform: translateX(-50%);
}


@media (min-width: 768px) {

  #home_trailers .carousel-inner .carousel-item-right.active,
  #home_trailers .carousel-inner .carousel-item-next {
    transform: translateX(33.33%);
  }

  #home_trailers .carousel-inner .carousel-item-left.active,
  #home_trailers .carousel-inner .carousel-item-prev {
    transform: translateX(-33.33%)
  }

}

@media (min-width: 992px) {

  #home_trailers .carousel-inner .carousel-item-right.active,
  #home_trailers .carousel-inner .carousel-item-next {
    transform: translateX(25%);
  }

  #home_trailers .carousel-inner .carousel-item-left.active,
  #home_trailers .carousel-inner .carousel-item-prev {
    transform: translateX(-25%)
  }

  #storage_photos .carousel-inner .carousel-item-right.active,
  #storage_photos .carousel-inner .carousel-item-next,
  #shipping_containers .carousel-inner .carousel-item-right.active,
  #shipping_containers .carousel-inner .carousel-item-next,
  #hire_trailers .carousel-inner .carousel-item-right.active,
  #hire_trailers .carousel-inner .carousel-item-next {
    transform: translateX(50%);
  }

  #storage_photos .carousel-inner .carousel-item-left.active,
  #storage_photos .carousel-inner .carousel-item-prev,
  #shipping_containers .carousel-inner .carousel-item-left.active,
  #shipping_containers .carousel-inner .carousel-item-prev,
  #hire_trailers .carousel-inner .carousel-item-left.active,
  #hire_trailers .carousel-inner .carousel-item-prev {
    transform: translateX(-50%);
  }

  #storage_photos .carousel-inner .carousel-item-right,
  #storage_photos .carousel-inner .carousel-item-left,
  #shipping_containers .carousel-inner .carousel-item-right,
  #shipping_containers .carousel-inner .carousel-item-left,
  #hire_trailers .carousel-inner .carousel-item-right,
  #hire_trailers .carousel-inner .carousel-item-left {
    transform: translateX(0);
  }

}

#home_trailers .carousel-inner .carousel-item-right,
#home_trailers .carousel-inner .carousel-item-left {
  transform: translateX(0);
}



/*------------------------------------------------------------------------------
  Calendar
------------------------------------------------------------------------------*/

div.calendar {
  max-width:        50rem;
}

table.calendar th {
  font-size:        1.1rem;
  line-height:      1.1rem;
  text-align:       center;
}

table.calendar-month th {
  font-size:        1rem;
  line-height:      1rem;
}

table.calendar-select th {
  font-size:        10px;
  line-height:      10px;
}

table.calendar th.date {
  font-size:        1.6rem;
  line-height:      1.6rem;
  text-align:       center;
}

table.calendar td {
  text-align:       center;
  padding:          0.1rem;
  height:           4.2rem;
  cursor:           pointer;
  font-size:        10px;
  line-height:      15px;
  color:            #aaaaaa;
}

table.calendar-month td {
  width:            14%;
}

table.calendar-select td {
  width:            7%;
}

table.calendar div.date {
  margin:           0.2rem 0rem 0.3rem 0rem;
}

table.calendar-month div.date {
  font-size:        1.3rem;
  line-height:      1.3rem;
}

table.calendar-select div.date {
  font-size:        10px;
  line-height:      10px;
}


table.calendar td.bank_holiday {
  background-color: #dddddd;
}

table.calendar td.weekend {
  background-color: #eeeeee;
}

table.calendar td.weekday {
  background-color: #fdcc02;
}

table.calendar td.range {
  color:            #000000;
}

table.calendar .clickable:hover,
table.calendar td:hover {
  background-color: #007bff;
}


@media (min-width: 576px) {

  table.calendar th {
    font-size:        1.2rem;
    line-height:      1.2rem;
    text-align:       center;
  }

  table.calendar td {
    font-size:        0.8rem;
    line-height:      1.2rem;
    height:           4.6rem;
  }

  table.calendar-select div.date {
    font-size:        1.3rem;
    line-height:      1.3rem;
  }

}