@import url(https://fonts.googleapis.com/css?family=Open+Sans); 


/* Resetting Defaults for All Elements */
* {
    font-family:        'Open Sans', sans-serif;    
    -webkit-box-sizing: border-box;
    -moz-box-sizing:    border-box;
    box-sizing:         border-box;
}

/* Body */
body {
    margin: 0 1rem 1rem 1rem;
    padding: 0;
    background-color: white;    
    font-family: "Open Sans", sans-serif; 
}
body,
body.ovf_hidden {
    overflow: hidden;
}
body.ovf_auto {
    overflow: auto;
}

h1 {
    margin: 24px 0 24px 0;
    padding: 0;
    font-family: "Open Sans", sans-serif; 
    font-size: 2rem;
    font-weight: 200;
    color: #1a438c; 
    word-break: break-all;
}

h2 {
    margin: 20px 0 10px 0;
    padding: 0;
    font-family: "Open Sans", sans-serif; 
    font-size: 1.6rem;
    font-weight: 200;
    color: #e22291; 
}

a:hover {
    background-color: #d3d9e9; 
    color: #ffffff; 
    text-decoration: none;
}

.stage-text {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 40%;
    left: 50%;
    font-size: 4rem;
    color: #FFF;
    font-weight: bold;
}

.image-container {
    position: relative;
}

/*======================================================================================================================
Menu Settings
======================================================================================================================*/

nav {
    display:            block; /* override default */
    position:           relative;
    list-style:         none;
    width:              100%;
    min-height:         32px;
    margin-bottom:      24px;
}
nav ul {
    margin: 0;
    padding: 0;
}
nav ul li {
    position:               relative;
    display:                inline-block;
    vertical-align:         top;
    width:                  100%;
    padding:                0 8px 0 8px;
    line-height:            32px;
    background-color:       #d3d9e9;      
    border:                 2px solid #ffffff;
    border-left:            0;
    -moz-border-radius:     2px;
    -webkit-border-radius:  2px;
    border-radius:          2px;
    font-size:              16px;
    font-weight:            400;
    color:                  #24418f;      
    text-align:             center;
    /* text-transform:         capitalize; */
}
nav ul li.disabled {
    color:                  #9eabce;      
}
nav ul li.right {
    float:                  right;
}
nav ul li.selected  {
    background-color:       #24418f;      
    font-weight:            bold;
    color:                  #ffffff;
}
nav ul li.disabled.right {
    display:            none;
}

nav ul li a {
    text-decoration: none;
    color: white;
}

@media screen and (min-width: 768px) and (min-device-width: 768px) {

    nav {
        margin-bottom:      35px;
    }
    nav ul li {
        width:              144px;
        padding:            0 8px 0 24px;
    }
    nav ul li:after, nav ul li:before {
        left:              100%;
        top:               50%;
        border:            solid transparent;
        content:           " ";
        height:            0;
        width:             0;
        position:          absolute;
        pointer-events:    none;
        z-index:           999;
    }
    nav ul li:after {
        border-color:      rgba(0,0,0, 0);
        border-left-color: #d3d9e9;      
        border-width:      16px;
        margin-top:        -16px;
        margin-left:       -1px;
    }
    nav ul li:before {
        border-color:      rgba(0,0,0, 0);
        border-left-color: #ffffff;
        border-width:      23px;
        margin-top:       -23px;
    }
    nav ul li:last-child:before,
    nav ul li:last-child:after {
        display: none;
    }
    nav ul li.selected:after {
        border-color:      rgba(0,0,0, 0);
        border-left-color: #24418f;      
    }
    nav ul li.right:after, nav ul li.right:before,
    nav ul li.last:after, nav ul li.last:before {
        display:           none;
    }
}

/*======================================================================================================================
Buttons
======================================================================================================================*/

.buttons {
    width: 100%;
    height: 52px;
    margin: 35px 0;
}

.button {
    background-color: #24418f; 
    color: white; 
    font-size: 17px;
    width: 150px;
    height: 52px;
    line-height: 52px;
    text-transform: capitalize;
    text-align: center;
    cursor: pointer;
    display: block;
    text-decoration: none;
}

.button.disabled {
    background-color: #9eabce;
    cursor: default;
}

/*======================================================================================================================
Choosing
======================================================================================================================*/

.extra-text {
    margin-top: 1em;
}

.card-main{
    max-width: 800px;
    max-height: 600px;
    margin: 2rem 0;
}

.fa-gold {
    color: gold;
    cursor: pointer;
}

.fa-silver {
    color: silver;
    cursor: pointer;
}

.fa-bronze {
    color: #cd7f32;
    cursor: pointer;
}

.fa-search {
    background-color: #fff;
    border-radius: 50px;
    padding: 6px;
    opacity: 0.75;
}

.stage {
    margin: 1rem;
}

.card {
    margin-top: 1rem;
}

.number1 img {
    border-bottom: 10px gold solid;
}

.number2 img {
    border-bottom: 10px silver solid;
}

.number3 img {
    border-bottom: 10px #cd7f32 solid;
}

.card-scaled {
    margin-top: 2rem;
}

.card-scaled .card-footer {
    font-size: 2.2rem;
    opacity: 0.8;
    text-align: center;
    position: relative;
}

.card-scaled .card-img-top:hover {
    opacity: 0.7;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}

.card-scaled .card-img-top {
    cursor: pointer;
}

.img-zoom, .img-close {
    position: absolute;
    top: 0;
    right: 8px;
    font-size: 1rem;
    cursor: pointer;
    color: #444;
}

.img-zoom {
    top: 1px;
    right: 1px;
}

.img-close {
    display: none;
}

.podium-close {
    position: absolute;
    right: 18px;
    top: 2px;
    cursor: pointer;
    opacity: 0.75;
}

.podium-close .fa-close {
    background-color: #fff;
    padding: 6px;
    border-radius: 50px;
}

.card-image-number1-close {

}

/*======================================================================================================================
Confirming
======================================================================================================================*/
.confirming .btn {
    width: 100%;
}

.confirming .card-footer {
    background-color: transparent;
    border: 0;
}

.confirming .image-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 4rem;
    color: #FFF;
    font-weight: bold;
}

.confirming .card-number1 .btn {
    background-color: gold;
    border-color: gold;
    box-shadow: none;
}

.confirming .card-number1 .card-header {
    background-color: gold;
}

.confirming .card-number1 {
    border-color: gold;
}

.confirming .card-number2 .btn {
    background-color: silver;
    border-color: silver;
    box-shadow: none;
}

.confirming .card-number2 .card-header {
    background-color: silver;
}

.confirming .card-number2 {
    border-color: silver;
}

.confirming .card-number3 .btn {
    background-color: #cd7f32;
    border-color: #cd7f32;
    box-shadow: none;
}

.confirming .card-number3 .card-header {
    background-color: #cd7f32;
}

.confirming .card-number3 {
    border-color: #cd7f32;
}

.confirming .podium-spacer {
    margin-top: 5rem;
}

.confirming .prof .card {
    margin: 0 0 1rem 0;
}

.confirming .prof li {
    cursor: pointer;
    font-size: 0.75rem;
}

.confirming .prof li.list-description {
    font-weight: normal;
}

.confirming li.list-description {
    cursor: default;
}

.confirming .prof li:hover:not(.list-description) {
    background:rgba(0,0,0,0.1);
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    opacity: 0.75;
}

@media (max-width: 768px) {
    .confirming {
        padding-left: 0;
        padding-right: 0;
    }
}

/*======================================================================================================================
Modal
======================================================================================================================*/

.modal-dialog {
    min-width: 90%;
}

.modal-body {
    padding: 0;
}

.prof .modal-body {
    padding: 1rem;
}

.modal-body .card-img {
    border-radius: 0;
}

.modal-full {
    min-width: 100%;
    margin: 0;
}

.modal-full .modal-content {
    min-height: 100vh;
}