/*
  Theme Name: Simon Gibbs (2)
  Theme URI: http://sgibbs.co.uk
  Description: Custom theme for the website
  Author: Simon Gibbs
  Author URI: http://sgibbs.co.uk
  Version: 0.5
  Tags: responsive, black, bootstrap

  License: Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)
  License URI: http://creativecommons.org/licenses/by-sa/3.0/

  Design uses bootstrap4
*/

@import url('boilerplate/css/normalize.css'); 
@import url('boilerplate/css/main.css'); 
@import url('bootstrap/css/bootstrap.min.css');
@import url('https://fonts.googleapis.com/css?family=Cormorant+Garamond&display=swap');

/* DEFAULT STYLES */
body {
  background: #ffffff;
  color: #232323;
  font-family: 'Cormorant Garamond', serif;
}

h1,h2,h3,h4,h5,h6 {font-family: 'olney';}

.olney {font-family: 'olney';}

.sub-heading {
  color: #555;
  font-family: 'olney';
  margin-top: -20px;

}

.btn {background: #5e4770; border-color: #5e4770;}
a {color: #5e4770;}
#page-content {font-size: 1.2rem;}
header {margin-bottom: 15px;}
.toggler-adjust {margin: 10px 0 0 0;}

/* NAV BAR STYLES */
.wrapper {
  display: flex;
  align-items: stretch;
}

#sidebar {
  min-width: 250px;
  max-width: 250px;
  background: #222;
  color: #fff;
  transition: all 0.3s;
}

#sidebar.active {
  min-width: 110px;
  max-width: 110px;
  text-align: center;
}

#sidebar.active .sidebar-header h3{
  display: none;
}

#sidebar.active .sidebar-header strong {
  display: block;
}

#sidebar ul li {padding: 0; font-family: 'olney';}

#sidebar ul li a {
  text-align: left;
  color: #fff;
}

#sidebar.active ul li a {
  padding: 20px 10px;
  text-align: center;
  font-size: 0.85em;
}

#sidebar.active ul li a i {
  margin-right: 0;
  display: block;
  font-size: 1.8em;
  margin-bottom: 5px;
}

#sidebar.active ul ul a {
  padding: 10px !important;
}

#sidebar.active .dropdown-toggle::after {
  top: auto;
  bottom: 10px;
  right: 50%;
  -webkit-transform: translateX(50%);
  -ms-transform: translateX(50%);
  transform: translateX(50%);
}

#sidebar .sidebar-header {
  padding: 20px;
  background: #111;
  text-align: center;
}

#sidebar .sidebar-header strong {
  display: none;
  font-size: 1.8em;
}

#sidebar ul.components {
  padding: 20px 0;
}

#sidebar ul li a {
  padding: 10px;
  font-size: 1.1em;
  display: block;
}

#sidebar ul li a:hover {
  color: #7386D5;
  background: #fff;
  border-left: 5px solid #5e4770;
  padding-left: 5px;
}

#sidebar ul li a i {
  margin-right: 10px;
}

#sidebar ul li.active>a,
a[aria-expanded="true"] {
  color: #fff;
  background: #6d7fcc;
}

a[data-toggle="collapse"] {
  position: relative;
}

.profile-image{
  width: 60%;
  border-radius: 500px;
  box-shadow:
        inset 0 0 25px #fff,      /* inner white */
        inset 10px 0 20px #f0f,   /* inner left magenta short */
        inset -10px 0 20px #0ff,  /* inner right cyan short */
        inset 10px 0 150px #f0f,  /* inner left magenta broad */
        inset -10px 0 150px #0ff, /* inner right cyan broad */
        0 0 25px #fff,            /* outer white */
        -5px 0 40px #f0f,        /* outer left magenta */
        5px 0 40px #2EF;         /* outer right cyan */
}

#sidebar.active .profile-image{
  width: 100%;
}

/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */

#content {
  width: 100%;
  padding: 20px;
  min-height: 100vh;
  transition: all 0.3s;
}

.blog {margin-bottom: 60px;}
.blog img {height: auto;}

.testimonial {margin-bottom: 60px;}
figcaption {color: #888; font-size: 1rem; text-align: center;}

/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */

@media (max-width: 768px) {
  #sidebar {
      min-width: 80px;
      max-width: 80px;
      text-align: center;
      margin-left: -80px !important;
  }
  .dropdown-toggle::after {
      top: auto;
      bottom: 10px;
      right: 50%;
      -webkit-transform: translateX(50%);
      -ms-transform: translateX(50%);
      transform: translateX(50%);
  }
  #sidebar.active {
      margin-left: 0 !important;
  }
  #sidebar .sidebar-header h3,
  #sidebar .CTAs {
      display: none;
  }
  #sidebar .sidebar-header strong {
      display: block;
  }
  #sidebar ul li a {
      padding: 20px 10px;
  }
  #sidebar ul li a span {
      font-size: 0.85em;
  }
  #sidebar ul li a i {
      margin-right: 0;
      display: block;
  }
  #sidebar ul ul a {
      padding: 10px !important;
  }
  #sidebar ul li a i {
      font-size: 1.3em;
  }
  #sidebar {
      margin-left: 0;
  }
  .profile-image{
    width: 100%;
  }
}

/* VIDEO EDITING PAGE */

#catselect {
  border: 1px solid #999;
  color: #232323;
  background: transparent;
  font-size: 20px;
  font-weight: bold;
  padding: 2px 10px;
  width: 50%;
  float: right;
}

.gallery-container {
  display: flex;
  flex-wrap: wrap;
  padding: 5px;
  justify-content: space-around;
}

.gallery-item {
  margin: 5px;
  position: relative;
  display: inline-block;
  height: 426px; overflow: hidden; background: #000; display: block; border: 1px solid #ccc; 
}

.gallery-item a {margin-top: -1px; display: block; height: 426px;}

.tile-media {display: table-cell; vertical-align: middle; height: 426px;}

.gallery-item img {max-width: 300px;}

.editing-feature {
  position: relative;
  overflow: hidden;
  padding: 25px 0;
  background: #eaecef url('img/jumbo-background.jpg') no-repeat right bottom;
}

.editing-feature .showreel-preview {
  position: absolute;
  z-index: 1;
  top: 0;
  left: -3vw;
  width: 106vw;
  height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
  min-height: 100vh;
  transform: translate(0, -25%);
  /*  object-fit is not supported on IE  */
  object-fit: cover;
  opacity:0.5;
}

.editing-feature .container-fluid {
  z-index: 2;
  position: relative;
}

.tile-details {
  position: relative;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  font-size: 1em;
  opacity: 0;
  transition: 450ms opacity;
}
.tile-details:before {
  left: 0;
  width: 100%;
  font-size: 30px;
  margin-left: 7px;
  margin-top: -18px;
  text-align: center;
  z-index: 2;
}
.gallery-item:hover .tile-details {
  opacity: 1;
}
.tile-text {
  width: 100%;
  position: absolute;
  bottom: 0;
  padding: 10px;
  background: linear-gradient(to top, rgba(0,0,0,0.8) 85%, rgba(0,0,0,0) 100%);
  transition: 450ms opacity;
}
.tile-title{
  font-size: 1.1em;
  font-weight: bold;
  color: #aaa;
}

.tile-description{
  color: #999999;
}