/*
    LIGHT BLUE: b9d0ec;
    BLUE: 0457a7;
    DARK BLUE: 265097;
    YELLOW: eec542;
*/

@import url(../fonts/fonts.css);

html, body, table#main {height:100%; width:100%;}
body {font-family:Arial, sans-serif; background:#0077c0 url('/SiteData/img/bg.jpg') center center no-repeat; background-attachment:fixed; background-size:cover; overflow-y:scroll;}
h1,h2 {font-family:'GothamNarrow-Ultra', Arial, sans-serif; margin:0;}
h3,h4,h5 {font-family:'GothamNarrow-Medium', Arial, sans-serif; margin:0;}
a, a:hover {color:#0457a7;}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {-webkit-appearance: none; margin: 0;}
input[type=number] {-moz-appearance:textfield;}
.serif {font-family:'SabonLTStd-Roman';}
.yellow {color:#ffc20e;}
.skewed {-webkit-transform: rotate(-5deg) skew(-5deg, 0); -moz-transform: rotate(-5deg) skew(-5deg, 0); -ms-transform: rotate(-5deg) skew(-5deg, 0); -o-transform: rotate(-5deg) skew(-5deg, 0); transform: rotate(-5deg) skew(-5deg, 0); }

header > ul > li {background:#CCC; text-align:center; padding:20px 10px; color:#FFF; border-right:1px solid #FFF; cursor: pointer;}
header > ul > li:first-of-type {border-radius:5px 0 0 0;}
header > ul > li:last-of-type {border-right:none; border-radius:0 5px 0 0;}
header > ul > li > .badge {background:#AAA;}
header > ul > li.active {background:#0457a7;}
header > ul > li.active > .badge {background:#FFF; color:#0457a7;}
header > ul > li:not(.active):hover > .badge {transition:.5s all ease; background: #0457a7; color: #FFFFFF;}

footer {position:relative; padding-top:40px; font-size:12px; color:#0457a7; background:url(../img/footer.png); background-size:100% 100%; background-repeat:no-repeat;}
footer .container-fluid {padding:15px 30px;}
footer a {color:#0457a7;}

/*BOOTSTRAP OVERRIDE*/
.container-fluid {padding:30px;}
.form-group.is-focused .form-control { background-image: linear-gradient(#00ADEE,#00ADEE),linear-gradient(#D2D2D2,#D2D2D2); }
.form-group.is-focused label, .form-group.is-focused label.control-label { color: #00ADEE; }
.panel-body {border-radius:0 0 5px 5px; background:#FFF; padding:20px;}
.panel {position: relative; border-radius:5px; max-width:400px; background:none; margin-bottom:0; box-shadow:rgba(0,0,0,0.3) 0px 0px 30px;}
.btn {transition:.5s all ease;}
.btn:hover {opacity:0.9; transform:scale(1.1,1.1);}
.btn-primary {background:#0457a7 !important; color:#FFF !important;}
.btn-default {border:1px solid #CCC;}
.btn-group .btn {background:#CCC; color:#FFF !important; padding:8px 15px;}
.btn-group .btn:hover {background:#AAA !important; opacity:1;}
.btn-group .btn.active,
.btn-group .btn.active:focus {background:#888;}

/*PAGE SPECIFIC*/
#page-amount ul {padding:0; list-style:none;}
#page-amount ul > li {display:inline-block; margin-right:-4px; margin-bottom:-4px;}
#page-amount ul > li > label {transition:.5s all ease; background:#CCC; margin:5px; border-radius:5px; display:block; color:#FFF; padding:15px 20px; text-align:center; width:95%; cursor:pointer; font-size:1.5em;}
#page-amount ul > li:hover > label {opacity:0.8; background:#00ADEE; transform:scale(1.1,1.1);}
#page-amount ul > li.active > label {background:#0457a7;}
#page-amount ul > li > label > input[type=radio] {display:none;}
#page-amount ul > li {width:25%;}
#page-amount .input-group-addon {color:#333;}
#page-amount .form-group {margin-top:10px;}

#headline {color:#FFF; font-size: 16px; max-width:600px; text-shadow: 2px 2px 5px rgba(0,0,0,0.5);}
#headline h1 {font-size:4em;}
#foreground {position:fixed; height:100%; right:15%; bottom:0; z-index:-1; margin-right:-20%;}
#headline #badge {margin-top: 20px; margin-bottom: 20px; width: 33%; min-width: 120px; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); border-radius: 50%}

.btn-nav {padding:5px; margin-top:10px; background:none !important;}

/*SWEET ALERT*/
body.stop-scrolling {overflow-y:scroll !important;}

/*AMOUNT TAG*/
main {position: relative;}
.amount-tag {position: absolute; top: -50px; width: 100px !important; height: 50px; left: 15px; opacity: 1 !important; background-color: #3678B8; color: #FFFFFF; text-align: center; line-height: 50px; border-radius: 5px 5px 0 0; font-size: 18px; box-shadow:rgba(0,0,0,0.3) 0px 0px 30px; cursor: pointer;
    transition-property: all; transition-duration: 0.5s !important; transition-timing-function: ease-in;}
.amount-tag.ng-hide {top: 0px;}
.amount-tag.ng-hide-add, .panel.amount-tag.ng-hide-remove {display: block !important; top: 0px;}
.amount-tag.ng-hide-remove.ng-hide-remove-active {top: -50px;}
.amount-tag.ng-hide-add {top: -50px;}
.amount-tag.ng-hide-add.ng-hide-add-active {top: 0px;}
.amount-tag:hover {background-color: #00ADEE}

@media (max-height: 1000px) and (min-width: 767px) {
    #foreground {top: 0; min-height: 800px; margin-right: -15% !important;}
}

@media (max-width: 1280px) and (min-height: 767px) {
    #headline h1 {font-size:4.5em;}
    #headline {max-width:50%; margin-bottom: 65px;}
    #foreground {right:0; margin-right:-20%;}
}

@media (max-width: 767px) {
    header {display:none;}
    .container-fluid {padding:15px;}
    #topLayout {position:relative; height:auto; min-height:100px; overflow-x:hidden;}
    #mainLayout > .container-fluid {padding:0;}

    footer {padding-top:inherit; background: #eec542; text-align:center;}

    #headline h1 {font-size:2.5em;}
    #foreground {position:absolute; right:15%; margin-right:-25%;}
    
    .amount-tag {right:20px; left:auto;}
    main > .panel {max-width:100%;}

    .panel-body {border-radius: 0}

    #page-amount ul > li {width:50%;}
}