/*
Theme Name:     UA Theme Fork
Theme URI:
Description:    UA Theme Fork
Author:
Author URI:
Template:       ua-theme
Version:    	0.1
*/

/* @import url("../vanilla/style.css"); */

img.alignright { float: right; margin: 0 0 1em 1em; }
img.alignleft { float: left; margin: 0 1em 1em 0; }
img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignright { float: right; }
.alignleft { float: left; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }

/* @import url("css/main.css"); */
@media (max-width: 767px) {
    .ua-logo-other-dept-capstone-international-center {
        font-size: 35px;
        line-height: 66px;
    }
}
@media (max-width: 1199px) and (min-width: 992px) {
    .header-main.navbar {
        font-size: 13px;
    }
}

.nav-stacked.nav-pills>li>ul>li>a {
    padding-left: 35px;
}

.scroll-xs, .scroll-sm  {
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

/* Jump tab mobile usability */
@media (max-width: 991px) {
    .dropdown-menu {
        display: block;
        position: inherit;
        float: none;
        box-shadow: none;
        -webkit-box-shadow: none;
    }

}

@media (max-width: 767px) {
    .nav-justified>li {
        display: table-cell;
        width: 1%;
    }

    .menu-secondary ul>li>a {
        padding-right: 15px;
    }

}

@media (max-width: 480px) {
    .menu-secondary ul>li>a {
        padding-right: 15px;
        text-align: center;
    }
}

/* Hero Image Module */

section.hero {
	background-color: transparent !important;
}

.hero {
    height: 450px;
    /* overflow: hidden; */
    position: relative;
    /* background: grey url('https://provost.ua.edu/wp-content/uploads/sites/11/2019/05/CollegesAndSchools.jpg') center center no-repeat; */
    background: cover;
    font-size: 10px;
}

.hero .hero-image {
    display: inline-block;
    position: absolute;
    z-index: -1;

    height: 100%;
    overflow: hidden;
}

.hero img {
	width: 100%; 
/* 	transform: translateY(-200px); */
}

.hero .call-to-action {
    display: flex;
    flex-wrap: wrap;
    width: 30%;
    max-height: 100%;
    padding: 20px;
    position: absolute;
    z-index: 800;
    bottom: -10%;
    right: 5%;

    /* light style */
    background: white;
    border: 1px solid black;
    font-size: 1.4em;

    /* dark style */
    background: #353535;
    color: #ECECEC;
    border: none;
    border-left: 24px solid #900f0f;
}

.hero:nth-of-type(even) {
    /* background-image: url('https://provost.ua.edu/wp-content/uploads/sites/11/2019/05/campus45_1920.jpg'); */
}

.hero:nth-of-type(even) .call-to-action {
    left: 5%;
    right: inherit;
}

.hero .call-to-action h1 {
    margin-top: 0;
    margin-bottom: 0;

    font-family: 'Lato', 'Open Sans', Helvetica, Arial, sans-serif;
    font-size: 1.6em;
    font-weight: 600;
    color: #990000;
    /* light version */
    color: #ECECEC;
}

.hero .call-to-action p {
    margin-bottom: 20px;
}

.hero .call-to-action .button {

    width: 100%;
    margin-bottom: 10px;
    padding: 6px 12px;
    padding: 9px 18px;
    vertical-align: middle;

    font-size: 1.3em; /* ~18px; */
    font-weight: 400;
    border-radius: 2px;
    border: 1px solid #990000;
    color: #990000;
    text-align: center;
    text-decoration: none;
    /* text-transform: uppercase; */
    line-height: 1.5;
    touch-action: manipulation;
    transition: all ease-in-out 0.2s;
    color: #fff;
    background-color: #992020;
    background-color: #900f0f;;
    border-color: #681313;

    /* border-bottom-width: 3px; */
}

.hero .call-to-action .button:hover {
    color: #fff;
    background-color: #681313;
    border-color: #681313;
}

.hero .call-to-action .button:before {
    margin-right: 6px;
}

@media screen and (max-width: 991px) {

    .hero {
        height: auto;

        background: #353535;
    }
    .hero .hero-image {
        position: inherit;
        z-index: 1;
        border-left: 24px solid #900f0f;
        overflow: visible;
    }
    .hero .call-to-action {
        display: block;
        width: 100%;
        position: inherit;
        left: inherit;
        right: inherit;
        bottom: inherit;
        padding-bottom: 40px;

        /* border: none; */
    }

    .hero:nth-of-type(even) .call-to-action {
        left: inherit;
    }
}

@media screen and (min-width: 1600px) {
	.hero {
        width: 1600px;
        margin: 0 auto;
        border-left: 20px solid #900f0f;
        border-right: 20px solid #900f0f;
        border-bottom: 20px solid #900f0f;
        
        border-left: 10px solid #353535;
        border-right: 10px solid #353535;
        border-bottom: 10px solid #353535;
        
        border-left: 24px solid #ECECEC;
        border-right: 24px solid #ECECEC;
        border-bottom: 24px solid #ECECEC;
    }
}