/* Main style file. Override general styles here. Specific module or page type
styles, often have their on css files, which are called only if necessary. */

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

.btn-danger {
    color: #fff !important;
    background-color: #e12a24;
}
a, .fa {
  color: #b51b15;
  text-decoration: none;
  transition: all 0.3s ease 0s;
}
a:hover, a:focus {
    color: #d21f19;
    text-decoration: underline;
}

/* Fontawesome */
.fa.fa-facebook-official {
    color: #3b5998 !important;
}
.fa.fa-twitter-square {
    color: #0084b4 !important;
}
.fa.fa-youtube-square {
    color: #bb0000 !important;
}
.fa.fa-instagram {
    color: white !important;
}
.fa.fa-twitter-square:hover, .fa.fa-twitter-square:focus,
.fa.fa-youtube-square:hover, .fa.fa-youtube-square:focus,
.fa.fa-instagram:hover, .fa.fa-instagram:focus,
.fa.fa-facebook-official:hover, .fa.fa-facebook-official:focus {
    opacity: 0.5 !important;
}

/* Navbar Updates */
.navbar-default {
    background-color: #e12a24;
}
.navbar-brand {
    float: left;
    height: 70px;
    padding: 0 0 0 10px;
    font-size: 18px;
    line-height: 20px;
}
.navbar-brand > img {
    display: block;
    max-width: 255px;
    margin-top: 6px;
}
.navbar-default .navbar-nav>li>a, .navbar-default a.navbar-brand {
    color: #fff;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover {
    color: #000;
    background-color: transparent;
    text-decoration: underline;
}

/**** Side Nav Menu Customization****/
.side-nav > h3:first-child  {
  margin-top: 0;
}
.side-nav .nav .nav {
  margin: 5px 0 10px 12px;
}
.side-nav .nav li a {
  padding: 2px;
  color: #767676;
}
.side-nav .nav li.active > a {
  color: #337ab7 !important;
  font-weight: 700;
}
.side-nav .nav .nav .nav {
  font-size: 12px !important;
}
.side-nav .nav li a:hover {
  color: #333 !important;
  background: none !important;
}

/*HOME PAGE FORMATTING */
.intro-name {
  font-size: 65px;
  color: white;
  text-shadow: 2px 3px 2px black;
}
.intro-text {
  font-size: 28px;
  color: white;
  text-shadow: 2px 3px 2px black;
}
.intro-btn {
    text-shadow: none;
    background: rgb(210, 31, 25);
    color: white;
}
.bg-statement .section-bk {
    background: rgba(255,255,255,0.9);
    padding: 25px 0;
    font-size: 18px;
}

/* Formatting */
.bg-ottawa-office, .bg-guelph-office, .bg-contact-me, .bg-meet-lloyd-longfield{
    padding-top: 100px !important;
    padding-bottom: 100px !important;
}
.bg-mp-services {
  padding-top: 25px !important;
  padding-bottom: 175px !important;
}
.card.open-parliament {
    background-color: #2f6970;
    color: #fff;
    text-decoration: none;
    background-image: url(/images/open-parl-o.png);
    background-position: -5% 105%;
    padding: 15px;
    background-position: 105% 145%;
    background-repeat: no-repeat;
    font-size: 1.2em;
}
.bg-mp-services {
  background-position: top !important;
}
.card.open-parliament:hover {
  transform: scale(1.1); 
}
.bg-meet-lloyd-longfield {
  background-position: center;
}

/* Footer */
footer.ft {
  background: #414042;
  padding: 50px 0;
  color: white;
}
.ft a {
  color: white;
}

/**** Responsive Hooks ****/

/* Keep in mind mobile-first styles get applied 
generally and override for larger devices. */
/*NOTE: Lines155-160 were blanked out by Sean, Nov22nd, 2021, as we were unable to update the home photo for cell phones
/*@media (max-width: 767px) {
  .bg-intro{
    padding-top: 400px !important;
    padding-bottom: 80px !important;
    background: url(/images/lloyd-intro.png) no-repeat top !important;
    text-align: center;
  }
}

/* Tablet*/
@media (min-width: 768px) {  
  .bg-intro {
    background-position: top !important;
    -webkit-background-size: cover !important;
    -moz-background-size: cover !important;
    -o-background-size: cover !important;
    background-size: cover !important;
  }
  .bg-contact-me .intro-name, .bg-contact-me .intro-text {
      width: 100%;
  }
}
/* Desktop*/
@media (min-width: 992px) {
  .bg-mp-services {
    padding-top: 100px !important;
    padding-bottom: 100px !important;
  }
}
/* Large Desktop*/
@media (min-width: 1200px) {
 
}