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

/* applies only if the screen is narrower than 500px */

.form-inline{

    margin-right: -15px;
res
}

.container{

    padding-right: 0px;

}

.row{
    margin-right: -15px;

}

.narrow {

    height: 2em;

}

.shootout {

    height: 230px;
l
}

.container-top{

    height: 100px;

    padding-bottom: 0.15px;

    padding-left: 16px;

    padding-right: 16px;

    padding-top: 3px;

    z-index: 2;

    overflow: hidden;

    overflow-y: hidden;

    position: relative;
l
    vertical-align: middle;

    text-align: center;

}

.navbar-brand {

    display: block;

    box-sizing: border-box;

    position: relative;

    text-align: center;

    width: 100%;

}

.banner1 {

    height: 70px;

    width: 500px;

}

.toptext{

    margin-top: 5px;

    padding-top: 0px;

    float: right;

    text-align: center;

    position: inline-block;

    font-family: "Segoe UI", Arial, sans-serif;

    font-size: 15px;

    letter-spacing: 4px;

    line-height: 37px;

    box-sizing: border-box;

    width: 100%;

}

.navbar-brand {

    padding: 0px;

    height: 55px;

}

.navbar-default .navbar-nav > li > a{

    color: rgb(241,241,241);

}

.navbar-header{

    display: none;

    font-size: 32px;

    position: inline-block;

    height: 20px;

    color: white;

    padding: 2px;

    width: 100%;

    margin-left: 80px;

}

.navbar-collapse{

    width: 100%;

    text-align: center;

}

.navbar-toggle{

visibility: visible;

text-align: center;

width: 50%;

float: none;

color: white;

font-size: 25px;

padding: 0px;

font-weight: bolder;

}

.fa-caret-down{

    color: white;

}

.sr-only{

    float: right;

    visibility: visible;

}

.navbar-default{

    text-align: center;

    padding-top: 0px;

    margin-top: -10px;

    max-height: 100%;

    padding-left: 5px;

    font-size: 17px;

    color: rgb(241, 241, 241);

}

.player h2{

    margin-top: -15px;

    text-align: left;

}



.navbar-toggle{

        visibility: visible;

    }

.navbar-collapse{

    border-top-color: rgb(51,51,51);

}

.dropdown-toggle{

    font-size: 17px;

}

    .row {

    height: 8em;

    font-size: 14px;

    background-color: #f5f5f5;

    position: relative;

    border-top: 0.5px solid grey;

    border-bottom: 1px solid grey;

}


.tipping-square {
    width: 300px;
    height: 14px;
    border: 1px black;
    padding-top: 5px;
    border-style: none;
}

.tipping-bar {
    width: 60px;
    height: 100px;
    margin: 0 auto;
    background: tan;
    border-top: 0 solid green;
    border-left: 0 solid #F5D97B; 
    border-bottom: 0 solid #D94948;
    border-right: 0 solid #8DB434;
    border-top-width: 7px;
    border-left-width: 5px;
    border-right-width: 5px;
    border-bottom-width: 4px;
    background: transparent;
    width: 4; height: 7;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-top-color: transparent;

    /**text-align: center;
    background-color: red;
    height: 7px;
    color: green;*/
}




.narrow {

    height: 2em;

}

.shootout {

    height: 230px;

}

    .afl {

    height: 9em;

}

.game-type-main {

    display: block;

    padding-top: 3px;

    padding-left: 3px;

    border-top: 2px solid grey;

    border-bottom: 2px solid grey;

    background-color: lightblue;

    color: #383838;

    text-align: middle;

    height: 2em;

    font-weight: bold;

}


.game-type-other {

    display: block;

    padding-top: 2px;

    padding-left: 3px;

    border-top: 2px solid grey;

    border-bottom: 2px solid grey;

    background-color: orange;

    color: #383838;

    text-align: middle;

    height: 2em;

    font-weight: bold;

}

    .game-date {

        font-family: 'Open Sans', sans-serif;

    display: block;

    padding-left: 5px;

    border-top: 0.5px solid grey;

    border-bottom: 1px solid grey;

    background-color: grey;

    color: white;

    text-align: left;

    font-weight: bold;

    height: 2.0em;

}



.stadium {

    height: 16px;

    font-size: 10;

    font-style: bold;

    color:#a7a8aa;

    text-align: left;

    vertical-align: middle;

}

.res {
  position: left;
  vertical-align: middle;
  justify-content: center;
  transform: scale(0.6);
}

.logo {

    overflow: visible;

    position: relative;

    padding: 1px;

    vertical-align: middle;

    text-align: left;

    border-color: white;

    background-color: #f2f5f9;

}

.logo-img {

    left: -15px;

    top: -14px;

    border: 0px;

    margin: 0px auto;

    position: relative;

    padding: 0px;

    transform: scale(0.8);

}

.logo-img-right{

    left: -5px;

    top: -14px;

    border: 0px;

    margin: 0px auto;

    position: relative;

    padding: 0px;

    transform: scale(0.8);

}

.tip-home {

    padding: 1px;

    border-right: solid;

    border-color: white;

    height: 100%;

    text-align: center;

    background-color: #f2f5f9;

}

.tip-draw {

    padding: 1px;

    padding: 0%;

    height: 100%;

    text-align: center;

    position: relative;

    vertical-align: middle;

    background-color: #f2f5f9;
    

}

#draw1 {

    font-size: 14px;

    height: 20px;

    margin-bottom: 20px;

}

.tip-away {

    padding: 1px;

    border-left: solid;

    border-color: white;

    height: 100%;

    text-align: center;

    position: relative;

    background-color: #f2f5f9;

}

.results{

    border-right: solid;

    border-color: white;

    height: 100%;

    text-align: center;
    

    vertical-align: middle;

    background-color: #f2f5f9;
    
    

}

.results-lock{

    border-right: solid;

    border-color: #F0C122;

    height: 100%;

    background-color: #F0C122;

}

.results-win{

    border-right: solid;

    border-color: #99C440;

    height: 100%;


    background-color: #99C440;

}

.results-lose{

    border-right: solid;

    border-color: #E61E25;

    height: 100%;


    background-color: #E61E25;

}

.ico{

    margin-top: -20px;

}

.tipping-selector {

    position: inline-block;

    height: 75%;

    vertical-align: middle;

}

.tipping-selector-mid {

    padding-left: 13px;

        height: 75%;

    text-align: center;

    vertical-align: middle;

}

.tipping-selector-right {

        height: 75%;

    text-align: left;

}

.picker {

    display: block;

    border: none;

    background-color: silver;

    width: 100%;

    height: 4em;

    text-align: center;

}

input[type='radio'] {

    transform: scale(2); 

    cursor: pointer;

}

.res {
    
    left: -30px;

}

label {

    font-family: 'Open Sans', sans-serif;

    font-weight: lighter;

    font-size: 15px;

}

.afl-home {

    text-align: right;

}

.afl-away {

    text-align: left;

}

.scores-l {

    text-align: right;

    font-weight: lighter;

    font-size: 25px;

}

.scores-r {

    text-align: left;

    font-weight: lighter;

    font-size: 25px;

}

.home-label-1 {

    font-weight: bolder;

}

.draw-label {

    font-weight: bolder;

}

.away-label-3 {

    font-weight: bolder;

}

.tip-draw-2 {

    font-size: 12px;

    font-weight: bolder;

    border-left: solid;

    border-right: solid;

    border-color: white;

    padding: 0%;

    height: 100%;

    text-align: center;

    position: relative;

    vertical-align: middle;

}

#draw1 {

    font-size: 12px;

    height: 20px;

    margin-bottom: 20px;

}

.tip-draw-1, .tip-draw-3 {

    visibility: hidden;

}

.drop-downs {

    margin-left: -15px;

    text-align: center;

    width: 100%;

    margin-top: -20px;

    height: 5em;

    border: none;

    background-color: silver;

}

.roundselector {

    text-align: center;

    width: 50%;

    min-width: 80px;

    margin-left: 25%;

}

.centered {

    height: 5em;

    border: none;

    background-color: silver;

}

.dropdown-toggle {

    display: inline-block;

    padding: 4px;

    min-height: 40px;

}


.shots_taken {
    box-shadow:
        0px 0px 1px 1px rgb(124,252,0),  
        0px 0px 10px 2px rgb(124,252,0); 

}

.shots_not_taken {
    box-shadow:
        0px 0px 1px 1px rgb(255,90,90),  
        0px 0px 10px 2px rgb(255,90,90); 

}

.dropdown-toggle {
    width: 650px;

}

.roundselector {
  margin-left: 0px;
  width: 100%;
}


}