/*
Special.css by Western University (MH), Winter 2019
*/

/* Basic resets and rules */
body {
    color:#000;
    background:#fff;
    font-family: 'Roboto', arial,sans-serif;
    font-size:1em;
    line-height: 1.618em;
}

a, a:visited {color:#550bd9; text-decoration:underline;text-decoration-color: #9caec9; }
a:hover {color:#0066ff;text-decoration:underline;}
.btn, .btn:visited {background:#550bd9;color:#fff;text-decoration:none;}
.btn:hover {background:#005eea;color:#fff;}
li {margin-bottom:6px;}

/* Title and heading controls*/
.section-title {padding-bottom: 10px; border-bottom:1px solid #ddd; color:#492a7e;}

/* Object controls */
.btn {transition: all .2s ease-in-out;}
.btn:hover {transform: scale(1.1); box-shadow: 0 10px 10px #ccc;}
.btn-lineup {margin-right: 25px;}
.banner-image, .narrow-banner-image {width:100%;}
.full-width-image {width: 100%;}

/* Fontawesome controls */
.fa-times-circle {color:red;}

/* Container controls */
footer {font-size:.9em;padding-top:25px; margin-top: 40px; border-top:1px solid #ccc;}

.roll-in {padding: 25px 50px; background-color:#ebebeb; background: linear-gradient(0deg, rgba(229,229,229,1) 0%, rgba(255,255,255,1) 100%);}
.container-fluid {padding: 25px 50px;}
.container-bkg {background-image: url(../img/dummies/runner.png);background-size: cover;}
.container-bkg-gray {background-image: url(../img/dummies/runner-gray.png);background-size: cover;}
.container-bkg-navy {background-image: url(../img/dummies/navy-bkg.png);background-size: cover; color:#fff;}
.fa-tag {margin-right:8px; color:#c9c9c9;} /* Controls the colour of the "tag" Fontawesome icons */
.fa-search {color:#fff;margin-right:8px;}
.innovation-ambassador-filter {padding: 20px; background: #ff1a42;color:#fff;margin-bottom:45px;} /* Controls the filter of the Innovation Ambassadors section */

/* Controls image clipping */
.clip-circle {clip-path: circle(50% at center);} /* setting percentage means it's responsive */

.col-3 {max-width:250%;}

/* Controls the styles of cards added to the page */
.card-border-orange {border-top: 20px solid#feaa30; background:#f8f8f8;box-shadow: 0 10px 10px #ccc;}
.card-border-blue {border-top: 40px solid#09ace6; background:#f8f8f8;box-shadow: 0 10px 10px #ccc; border-radius: 20px;}
.card-border-purple {border-top: 20px solid#001439; background:#f8f8f8;box-shadow: 0 10px 10px #ccc;}
.card-border-red {border-top: 20px solid#f43e3e; background:#f8f8f8;box-shadow: 0 10px 10px #ccc; transition: all .2s ease-in-out;}
.card-border-red:hover {transform: scale(1.1); box-shadow: 0 10px 10px #ccc;}/* Controls asset*/
.card-generic {padding:20px;background:#fff; box-shadow: 0 5px 5px #ccc; transition: all .2s ease-in-out;}
.card-generic:hover {transform: scale(1.01); box-shadow: 0 10px 10px #ccc;}
.card-noshadow {padding:20px;background:#fff; transition: all .2s ease-in-out;border:1px solid #eee;}
.card-noshadow:hover {transform: scale(1.01); box-shadow: 0 10px 10px #ccc;}
.card-background-mint {background:#a2ffec;box-shadow: 0 10px 10px #ccc; transition: all .2s ease-in-out;}
.card-background-yellow {background:#fff8ac;box-shadow: 0 10px 10px #ccc; transition: all .2s ease-in-out;}
.card-background-navyblue {background:#001439;color:#fff;box-shadow: 0 10px 10px #ccc; transition: all .2s ease-in-out;}

/*
Extra small devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap
*/

@media (max-width: 576px) {
    .col-8 {max-width:100%,flex: 0 0 100%;}
    .col-4 {max-width:100%;flex:0 0 100%;}
    .col-3 {flex:0 0 50%;}
    .col-6 {max-width:100%;flex:0 0 100%;}
    .footer-link-cols {text-align:center;margin-bottom: 50px;}
    .banner-image {display:none;}
    .card-body {margin-bottom:25px;}
    .container-fluid {padding: 40px 5px;}
    .full-width {padding: 25px 20px;}
    .smallcard {max-width:100%;flex: 0 0 100%;}
    .btn {width:100%;}
    .btn-lineup {margin-bottom:15px;}
 }

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .banner-image {display:none;}
    .narrow-banner-image {display:block;}
}

@media (max-width: 768px) {
    .smallcard {max-width:100%;flex: 0 0 100%; margin-bottom:20px;}
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .narrow-banner-image {display:none;}
    .banner-image {display:block;}
}

@media (max-width: 992px) {
    .smallcard {max-width:50%;flex: 0 0 50%; margin-bottom:20px;}
    .col-2 {max-width:50%;flex: 0 0 50%;}
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .narrow-banner-image {display:none;}
    .banner-image {display:block;}
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .narrow-banner-image {display:none;}
    .banner-image {display:block;}
}