/*
Theme Name: Midlands4Cities Theme
Theme URI: https://www.scc.com/
Author: Peter Drayton
Author URI: https://www.peterdrayton.co.uk
Description: Midlands4Cities Theme.
Version: 1.0
Text Domain: Midlands4Cities
*/

/* my styles */
/* m4c red: #9b1b3a  dark grey: #434344 */
 
body    {
  background: #fcfcfc;
  font-family: 'Roboto', sans-serif !important;
  }  /* kbase: #F7F8F9; f8f9fa*/
.header {padding: 30px 0; min-height: 110px}
.banner { background-size: cover; background-position: center center; height: 120px; margin-top: -32px; margin-bottom: 12px}
.ahrc   {margin-top: -20px}

.footer {
  background: #ccc; 
  padding: 3em 0 2em; 
  min-height: 300px; 
  margin-top: 2em
 }

.footer img {
  max-height: 55px;
  margin-bottom: 2rem;
}
a {color: #9b1b3a}

.navbar {background: #434344; margin-bottom: 2rem}
.navbar-expand-md .navbar-nav .nav-link {font-size: 95%;color: white; padding-left: 0; padding-right: 0 /* do this on nav-item instead but not the first ... */}
.navbar-expand-md .navbar-nav .nav-item  {padding-left: 1rem; padding-right: 0.8rem; }
.navbar-expand-md .navbar-nav .nav-item:first-child {padding-left: 0; }

/* filters above cards */
.padrow         {margin: 20px 0}
.quicksearch    {margin-right: 30px; margin-bottom: 12px}
.btn-group      {margin-right: 1em}
.btn            {border: 1px solid rgba(0,0,0,.125)}
.btn:focus,
.btn:active,
.btn-primary.focus, 
.btn-primary:focus,
.btn-secondary.focus, 
.btn-secondary:focus, 
.btn-primary:active, 
.btn-secondary:active {
    box-shadow: none;
    outline: none;
}
.filter-count   {padding: .375rem .5rem}

/* grid of cards */
.grid           {margin: 2rem 0;}
.card           {width: 100%; min-height: 24rem;  margin-bottom: 3rem; float: left; font-size: 1rem;}
.card .icon     {float: right; font-size: 2rem; color: #ccc; padding-right: 0}
.card-body      {padding: 0.75rem}  
.card-footer    {padding: 0.75rem; background-color: white; border-top: 0px; text-align: center;}
.card-img-top   {height: 130px; object-fit: cover; border-bottom: 1px solid rgba(0,0,0,.125)}
.card h4        {line-height: 110%; margin-bottom: 6px; font-weight: 400;}
.card p         {line-height: 1.2rem}
.card .category {color: #5D6D7E; font-size: 0.8rem; margin-bottom: 0.8rem}
.card .labels   {color: #5D6D7E; font-size: 0.9rem; font-style: italic; margin-bottom: 0; /*border-top: 1px solid #ddd; padding-top: 4px*/}

.card-photo      {height: 110px; width: 110px; position: relative; top: -50px; border: 3px solid white; text-align: center; margin: 0 auto -55px}


/* buttons */
.icons a          {color: #434344}
.icons a:hover    {color: #9A1B3A;text-decoration:none;}
.fa-stack         { font-size: 1.2em; }
i                 { /*vertical-align: middle; breaks timeline alignment */}
i.padr                {padding-right: 1em}
i.padl                {padding-left: 1em}

.btn-secondary        {background: #434344; padding-right: 1em; padding-left: 1em}
.btn-secondary:hover  {background: #9A1B3A; border-color: #9A1B3A; color: white}
.btn-secondary a      {color: white !important}

.btn-primary          {background: #9A1B3A; padding-right: 1em; padding-left: 1em}
.btn-primary:hover    {background: #434344; border-color: #434344;}
.btn-right            {margin-right: 2rem}

.card-footer .btn     {padding: .375rem 1.5rem;}


/* BOXES */
.box                {border: 1px solid #d4d4d4; padding: 15px; margin-bottom: 20px}


/* OTHER */
h2                  {margin-top: 1em}
.msg                {margin-top: 2em}
.msg span           {background: #ddd; padding: 10px; display: block}
.msg i              {padding-right: 10px; }

.strap              {font-size: 150%; font-style: italic; font-weight: 300; line-height: 1.2em;}
.home h3            {padding-top: 1.5em}

.hero h2           {margin-top: 6px}
.bg                {background-size: cover; min-height: 12rem;background-position: center center;}
.bg1               {background-image: url("/m4c/assets/MJPL3262.jpg"); }
.bg2               {background-image: url("/m4c/assets/MJPL3449.jpg"); }
.bg3               {background-image: url("/m4c/assets/MJPL3501.jpg"); }
.bg4               {background-image: url("/m4c/assets/MJPL3591.jpg"); }
.bg5               {background-image: url("/m4c/assets/M4C-97.jpg"); }

h2.news            {margin-top:0; font-size: 1.6rem; font-weight: 200; font-style: italic; margin-bottom: 1em;}

/* offer */
.cols              {margin-top: 1em;}
.cols h2           {margin-top:0; }
.quote             {border-bottom: 1px solid #ccc; padding: 1em; margin: 0; width: 100%; font-size: 1.3em; font-style: italic; font-weight: 300; color: #747474; position: relative;}
.quotesource      {font-size: 0.9em; font-style: normal;}

/* PROFILES */
.profile .main h2       {margin-top: 0}
.smalllabel             {color: #5D6D7E; font-size: 0.8rem; margin-bottom: 6px;}
.profilestrap           {margin-bottom: 1.5em}

.sidebar ul             {list-style: none; padding: 0}
.profile .rounded-circle {margin-top: -15%; margin-bottom: 1rem; max-width: 30%}

/* TIMELINE */
.timeline 				{list-style: none; padding: 30px 0 0; position: relative; margin-bottom: 30px}
.timeline .btn    { margin-top: 10px}

/* center line */
.timeline:before 		{top: 0; bottom: 0; position: absolute; content: " "; width: 3px; background-color: #eee; left: 50%; margin-left: -1.5px;}

/* panels */
.timeline > li 			{margin-bottom: 20px; position: relative;}
.timeline > li:before,
.timeline > li:after 	{content: " "; display: table;}
.timeline > li:after 	{clear: both;}
.timeline > li > .timeline-panel {width: 46%; float: left; background-color: white /* rgba(245, 245, 245, 0.9)*/; border: 1px solid #d4d4d4; padding: 20px; position: relative;}
.timeline > li > .timeline-panel:before {
                position: absolute;
                top: 26px;
                right: -15px;
                display: inline-block;
                border-top: 15px solid transparent;
                border-left: 15px solid #ccc;
                border-right: 0 solid #ccc;
                border-bottom: 15px solid transparent;
                content: " "; }
.timeline > li > .timeline-panel:after {
                position: absolute;
                top: 27px;
                right: -14px;
                display: inline-block;
                border-top: 14px solid transparent;
                border-left: 14px solid #fff;
                border-right: 0 solid #fff;
                border-bottom: 14px solid transparent;
                content: " ";}
/* icons */
.timeline > li > .timeline-badge {
        display: table;    
  		color: #fff;
            width: 50px;
            height: 50px;
            line-height: 50px;
            font-size: 1.4em;
            text-align: center;
            position: absolute;
            top: 16px;
            left: 50%;
            margin-left: -25px;
            background-color: #999999;
            z-index: 100;
            border-top-right-radius: 50%;
            border-top-left-radius: 50%;
            border-bottom-right-radius: 50%;
            border-bottom-left-radius: 50%;}
.timeline-badge i {
	display: table-cell;			
  	vertical-align: middle;
}
.timeline > i {padding-right: 0px;}
/*timeline-panel i {padding-right: 10px;}*/

/* triangles */
.timeline > li.timeline-inverted > .timeline-panel {float: right;}
.timeline > li.timeline-inverted > .timeline-panel:before {border-left-width: 0; border-right-width: 15px; left: -15px; right: auto; }
.timeline > li.timeline-inverted > .timeline-panel:after { border-left-width: 0; border-right-width: 14px;left: -14px; right: auto; }

/* content */
.timeline h4 			{margin-top: 0;}
.timeline h4 span 		{padding-right: 0.6em;}
.timeline-body > p,
.timeline-body > ul 	{margin-bottom: 0; }
.timeline-body > p + p  {margin-top: 5px;}


/* ipad: two columns but smaller panels */
@media (max-width: 1023px) {
    ul.timeline > li > .timeline-panel {
        width: 43%;
    }
}

/* phones: just one column */
@media (max-width: 767px) {
    ul.timeline:before {
        left: 30px;
    }

    ul.timeline > li > .timeline-panel {
        width: calc(100% - 80px);
        width: -moz-calc(100% - 80px);
        width: -webkit-calc(100% - 80px);
    }

    ul.timeline > li > .timeline-badge {
        left: 5px;
        margin-left: 0;
        top: 16px;
    }

    ul.timeline > li > .timeline-panel {
        float: right;
    }

    ul.timeline > li > .timeline-panel:before {
        border-left-width: 0;
        border-right-width: 15px;
        left: -15px;
        right: auto;
    }

    ul.timeline > li > .timeline-panel:after {
        border-left-width: 0;
        border-right-width: 14px;
        left: -14px;
        right: auto;
    }

    .timeline-body > ul 	{padding-left: 20px}
}




/* other */
#myTab li        {font-weight: bold;}
.tab-content     {padding-top: 1em}
.notes li        {font-size: 22px; padding-bottom: 8px}
.notes li li     {font-size: 16px}




/* responsive cards */
@media (min-width: 767px) {
  .container-fluid {padding-right: 30px; padding-left: 30px;}
  .card            {width: calc(50% - 30px); margin-right: 30px;}
  .homegrid .card  {width: 100%; margin-right: 0;}
  .banner          {height: 200px; margin-bottom: 20px}
  .msg span        {display: inline}
  .homepad         {padding-right: 40px;}


  /* offer */
  .heading           {margin-top: 3em;}
  .cols              {margin-top: 1em;}
  .cols h2           {margin-top:0; }
  .quote             {border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 2em 2em 2em 4em; margin: 1em; width: 100%; font-size: 1.3em; font-style: italic; font-weight: 300; color: #747474; position: relative;}
  .quote::before    {font-family: 'Font Awesome 5 Free'; font-weight: 900; content: '\f10d'; /*quote left icon*/; font-size: 3rem; color: #ddd; font-style: normal; position: absolute; top: 15px; left: 12px;}
  .quotesource      {font-size: 0.9em; font-style: normal;}
	
 /* profiles */
  .profile .rounded-circle {margin-top: -40%; margin-bottom: 1rem; max-width: 90%}
	
}

@media (min-width: 992px) {
  .navbar-expand-md .navbar-nav .nav-link  {font-size: 100%;}
  .navbar-expand-md .navbar-nav .nav-item  {padding-right: 1rem; }
	
  /* profiles */
  .profile .rounded-circle {margin-top: -30%; margin-bottom: 2rem; max-width: 60%}	
}

@media (min-width: 1023px) {
  .card            {width: calc(33.33% - 30px); margin-right: 30px;}
}

@media (min-width: 1201px) {
  .card            {width: 22rem; margin-right: 3rem;}
  .homegrid .card  {width: 100%; margin-right: 0;}
  h2               {margin-top: 1.5em}
  .navbar-expand-md .navbar-nav .nav-item  {padding-left: 1.5rem; padding-right: 1.5rem; }

}

@media (max-width: 767px) {
  .footer img {
  	margin: 20px 0;
    width: auto;	
  }
}

/* Student Profile Page */
.single-student_profile .main,
.single-student_profile .sidebar {
	word-break: break-word
}

.single-student_profile .main img {
	max-width: 100%;
	height: auto;
}

/*
 * Font Awesome Free 5.8.1 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 Need to include /vendor/fontawesome-5.8.1.min.css too
 */
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 400;
  font-display: auto;
  src: url("/wp-content/themes/M4C/vendor/fa-regular-400.eot");
  src: url("/wp-content/themes/M4C/vendor/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("/wp-content/themes/M4C/vendor/fa-regular-400.woff2") format("woff2"), url("/wp-content/themes/M4C/vendor/fa-regular-400.woff") format("woff"), url("/wp-content/themes/M4C/vendor/fa-regular-400.ttf") format("truetype"), url("/wp-content/themes/M4C/vendor/fa-regular-400.svg#fontawesome") format("svg"); }

.far {
  font-family: 'Font Awesome 5 Free';
  font-weight: 400; }

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  font-display: auto;
  src: url("/wp-content/themes/M4C/vendor/fa-solid-900.eot");
  src: url("/wp-content/themes/M4C/vendor/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("/wp-content/themes/M4C/vendor/fa-solid-900.ttf") format("truetype"), url("/wp-content/themes/M4C/vendor/fa-solid-900.svg#fontawesome") format("svg"); } 

.fa,
.fas {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900; }

  .fa,
  .fas {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900; }

    @font-face {
      font-family: 'Font Awesome 5 Brands';
      font-style: normal;
      font-weight: normal;
      font-display: auto;
      src: url("/wp-content/themes/M4C/vendor/fa-brands-400.eot");
      src: url("/wp-content/themes/M4C/vendor/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("/wp-content/themes/M4C/vendor/fa-brands-400.woff2") format("woff2"), url("./vendor/fa-brands-400.woff") format("woff"), url("/wp-content/themes/M4C/vendor/fa-brands-400.ttf") format("truetype"), url("/wp-content/themes/M4C/vendor/fa-brands-400.svg#fontawesome") format("svg"); }

  .fab {
      font-family: 'Font Awesome 5 Brands'; }