/* move the border to the whole login container, as opposed to the login box */
div#content > div.ic-Login > div.ic-Login__container > div.ic-Login__content > div.ic-Login__innerContent {border: none;}
div#content > div.ic-Login > div.ic-Login__container > div.ic-Login__content {border: 2px solid #fff;}

/* reduce some of the whitespace */
div#content > div.ic-Login > div.ic-Login__container > div.ic-Login__content > div.ic-Login__innerContent > div.ic-Login__body {
    padding-bottom: 0px;
    padding-top: 0px;
}
div#content > div.ic-Login > div.ic-Login__container > div.ic-Login__content > footer#footer > div#footer-links {padding-top: 0px;}

/* Reduce the size of the top image and centre it*/
div#content > div.ic-Login > div.ic-Login__container > div.ic-Login__content > div.ic-Login__innerContent div.ic-Login-header__logo > img {width: 50%;}
div#content > div.ic-Login > div.ic-Login__container > div.ic-Login__content > div.ic-Login__innerContent div.ic-Login-header__logo {text-align: center;}
div#content > div.ic-Login > div.ic-Login__container > div.ic-Login__content > div.ic-Login__innerContent div.ic-Login-header {display: block;}

/* centre element in the middle of the page */
div#content > div.ic-Login > div.ic-Login__container{
    position: fixed;
    top: 45%;
    left: 50%;
    right: 50;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}


/* This is for hiding the Instructure Footer logo and the links. */
/* The #batch_check is for hiding the 'This is a full batch update' checkbox at the SIS import for admins. We want this to be hidden as it is a very risky option to enable. */
.ic-Login-footer__links, #footer-links, .ic-app-footer, svg, #batch_check
{
    display: none;
}


/* This is used for making the three column icon pages. */
.three-col-icon {
    float: left;
    width: 33.33%;
    margin-bottom: 25px;
}

@media screen and (max-width: 1200px) {
    .three-col-icon {
	width: 50%;
    }
}
@media screen and (max-width: 900px) {
    .three-col-icon {
	width: 100%;
    }
}

/* This is used for making the four column icon pages. */
.four-col-icon {
    float: left;
    width: 25%;
    margin-bottom: 25px;
  }

@media screen and (max-width: 1200px) {
    .four-col-icon {
	width: 50%;
    }
}
@media screen and (max-width: 900px) {
    .four-col-icon {
	width: 100%;
    }
}