body {
    background-color: #003300;
	color: #333333;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	text-align: center;
  }

  #outer {
    background-color: #FFF;
	margin-left: auto;
	margin-right: auto;
	padding: 10px;
	text-align: left;
	max-width: 980px;
	margin-top: 10px;
	margin-bottom: 10px;
    position:relative;
}

header {
    padding:0px;
   border: 1px solid #CCC;
   background: #ffffff;

   display: -ms-flexbox;
   display: -webkit-flex;
   display:         flex;


   -webkit-flex-flow: row;
           flex-flow: row;
  
   -webkit-flex-wrap: wrap;
             flex-wrap: wrap;
    

justify-content:center;

min-height:10px;

   }

    #logo{
   -webkit-flex: 1 1 20%;
        -ms-flex: 1 1 20%;   
            flex: 1 1 20%;

    -ms-flex-order:1;
    -webkit-order: 1;
           order: 1;

    }

    #banner{

           -webkit-flex: 3 1 80%;
           flex: 3 1 80%;
            -ms-flex: 3 1 80%;

            -ms-flex-order:2;
            -webkit-order: 2;
           order: 2;

    }


nav {
	background-color: #EDEDED;
    margin-left:auto;
    margin-right:auto;

    display: -ms-flexbox;
   display: -webkit-flex;
   display:         flex;

   -webkit-flex-flow: row;
           flex-flow: row;

    justify-content:center;
    

    -ms-flex-order:3;
       -webkit-order: 3;
           order: 3;

           width:100%;
   }


  #main {
   padding: 0px;

   display: -ms-flexbox;
   display: -webkit-flex;
   display:         flex;

   -webkit-flex-flow: row;
           flex-flow: row;

   -webkit-flex-wrap: wrap;
           flex-wrap: wrap;
   }


   #main > aside {
   border: 1px solid #CCC;
   padding: 5px;
   background: #ffffff;

       -webkit-flex: 1 1;
        -ms-flex: 1 1;   
            flex: 1 1;

   -ms-flex-order: 1;
   -webkit-order: 1;
           order: 1;

   }


    #main > article {
        margin-top: 0em;
        border: 1px solid #CCC;
        padding: 0px 5px 5px 5px;
        background: #ffffff;
        
        -webkit-flex: 4 1;
        flex: 4 1;
        -ms-flex: 4 1;

        -ms-flex-order: 2;
        -webkit-order: 2;
        order: 2;

        min-height: 400px;
    }

    
#players{
     display: -ms-flexbox;
   display: -webkit-flex;
   display:         flex;

   -webkit-flex-flow: row;
           flex-flow: row;

   -webkit-flex-wrap: wrap;
           flex-wrap: wrap;

}

#player {
           -webkit-flex: 1 1 25%;
        -ms-flex: 1 1 25%;   
            flex: 1 1 25%;
            margin:auto;
            text-align:center;
            padding-bottom:20px;
}

#gallery img
{
padding:4px;
 border:solid;
 border-color: #dddddd #aaaaaa #aaaaaa #dddddd;
 border-width: 1px 2px 2px 1px;
 background-color:white;
 margin:4px;
 vertical-align:middle;

} 

#gallery{

   display: -ms-flexbox;
   display: -webkit-flex;
   display:         flex;

   -webkit-flex-flow: row;
           flex-flow: row;

   -webkit-flex-wrap: wrap;
           flex-wrap: wrap;


}

#photo {
        -webkit-flex: 1 1 33%;
        -ms-flex: 1 1 33%;   
            flex: 1 1 33%;
            margin:auto;
            align-self:center;

            align-content:center;
            text-align:center;


}

 nav ul {
 margin: 0;
 padding: 0;
 list-style-type: none;
 text-align: center;
    }


nav ul li {
	display: inline;
    line-height:25px;


}
nav ul li a {
text-decoration: none;
 padding: .2em 1em;
 color: #fff;
 background-color: #003300;
	
}
nav ul li a:hover {
    color:black;
    background-color: #CCC;
} 
  #main h2{
              font-size: 14px;
        font-weight: bold;
  }

  aside  p {
    margin-top:0.2em;
    text-align:center;
}

aside h1 {
	font-size: 16px;
	font-weight: bold;
    text-align:center;

}

aside a.nolink:link{
    text-decoration: none !important;
}

aside a.nolink:hover{
    text-decoration: none !important;
}

aside a.nolink:active{
    text-decoration: none !important;
}

  footer{
    background-color: #000;
    color:#FFF;
    text-align:center;

  }

  img {
       max-width: 99%;

   }

 


  /* for phones first breakpoint */
@media all and (max-width: 950px) {

    #photo {
        -webkit-flex: 1 1 50%;
        -ms-flex: 1 1 50%;
        flex: 1 1 50%;
        margin: auto;
        text-align: center;
    }
}

  /* for phones second breakpoint */
@media all and (max-width: 700px) {

    #player {
           -webkit-flex: 1 1 33%;
        -ms-flex: 1 1 33%;   
            flex: 1 1 33%;
            margin:auto;
            text-align:center;
}

    #photo {
        -webkit-flex: 1 1 100%;
        -ms-flex: 1 1 100%;
        flex: 1 1 100%;
        margin: auto;
        text-align: center;
    }
}


  /* for phones third break point*/
  @media all and (max-width: 450px) {

    body {
        background-color: #ffffff;
    }

   #main, #page {

   }

   header{
       border: none;
   }
     #logo{
   -webkit-flex: 1 1 20%;
        -ms-flex: 1 1 20%;   
            flex: 1 1 20%;

    -ms-flex-order:1;
    -webkit-order: 1;
           order: 1;
    }

     nav {
         background-color: #FFF;
    -webkit-flex: 2 1;
        -ms-flex: 2 1;   
            flex: 2 1;

    -ms-flex-order: 2;
    -webkit-order: 2;
           order: 2;
   }

   #banner{display:none;}

  #main > article {
   border: none;
   padding: 5px;
   background: #ffffff;

          -webkit-flex: 1 1 100%;
        -ms-flex: 1 1 100%;   
            flex: 1 1 100%;

      -ms-flex-order: 1;
   -webkit-order: 1;
           order: 1;
   }

   #main > aside{
       border: none;
              -webkit-flex: 1 1 100%;
        -ms-flex: 1 1 100%;   
            flex: 1 1 100%;

         -ms-flex-order: 2;
   -webkit-order: 2;
           order: 2;
   }

#players{
     display: -ms-flexbox;
   display: -webkit-flex;
   display:         flex;

   -webkit-flex-flow: row;
           flex-flow: row;

   -webkit-flex-wrap: wrap;
           flex-wrap: wrap;

}

#player {
           -webkit-flex: 1 1 50%;
        -ms-flex: 1 1 50%;   
            flex: 1 1 50%;
            margin:auto;
            text-align:center;
}

#photo {
           -webkit-flex: 1 1 100%;
        -ms-flex: 1 1 100%;   
            flex: 1 1 100%;
            margin:auto;
            text-align:center;
}

   footer {

   }

  }