@charset "utf-8";
/* CSS Document */

html { font-size: 100%; }
body { background-color:#000; align-content:center; color:#fff; font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; }

a { color:#fff; text-decoration:none; }
a:hover { color:#FFF500; text-decoration:none; }

body {
  /* fallback */
  background-color: #646464;
  background: url(images/linear_bg_2.png);
  background-repeat: repeat-x;

  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#646464), to(#000));

  /* Safari 5.1, Chrome 10+ */
  background: -webkit-linear-gradient(top, #000, #646464);

  /* Firefox 3.6+ */
  background: -moz-linear-gradient(top, #000, #646464);

  /* IE 10 */
  background: -ms-linear-gradient(top, #000, #646464);

  /* Opera 11.10+ */
  background: -o-linear-gradient(top, #000, #646464);
  background-repeat:no-repeat;
  background-color: #646464;
}

#map { float:left; width: 400px; height: 300px;}
#map3 { float:left; width: 400px; height: 300px;}

.ui-block-a { background-color:#000; }
.ui-block-b { background-color:#000; }
.ui-block-c { background-color:#000; }
.ui-block-d { background-color:#000; }
.ui-block-e { background-color:#000; }

/* Add a breakpoint for smaller devices - 640px or SMALLER - Stack Content - Otherwise, side-by-side layout*/
@media all and (max-width: 40em) {
  .my-breakpoint .ui-block-a { width: 100%; float: none; }
  .my-breakpoint .ui-block-b { width: 100%; float: none; }
  .my-breakpoint .ui-block-c { width: 100%; float: none; min-height:200px; }
  .my-breakpoint .ui-block-d { width: 100%; float: none; min-height:200px; }
  .my-breakpoint .ui-block-e { width: 100%; min-height:80px; float: none; }
  
	#maincontent { text-align:center; background-color:#000; font-size:90%; }
	.logo { display:none; }
	.logo2 { display:block; }
	.footer-tel { display:none; }
	.footer-email { display:none; }
}


/* Add a breakpoint for portrait tablet devices - 640px or BIGGER */
@media all and (min-width: 40em) {
  .my-breakpoint.ui-grid-e .ui-block-a { width: 100%; min-height:40px; padding-top:10px; }
  .my-breakpoint.ui-grid-e .ui-block-b { width: 100%; max-height:215px; }
  .my-breakpoint.ui-grid-e .ui-block-c,
  .my-breakpoint.ui-grid-e .ui-block-d { width: 50%; min-height:200px; }
  .my-breakpoint.ui-grid-e .ui-block-e { width: 100%; min-height:80px; }

	#maincontent { max-width:1000px; text-align:center; margin-left:auto; margin-right:auto; font-size:13px; background-color:#000; }
	.logo { display:block; }
	.logo2 { display:none; }
	.footer-tel { display:inline-block; float:left; margin-left:70px; margin-top:32px; }
	.footer-email { display:inline-block; float:right; margin-right:70px; margin-top:32px; }
}

/* This is for the top menu */
/* Add a breakpoint for smaller devices - 640px or SMALLER - Stack Content - Otherwise, side-by-side layout*/
@media all and (max-width: 30em) {
  .my-breakpoint .ui-block-menu1,
  .my-breakpoint .ui-block-menu2,
  .my-breakpoint .ui-block-menu3,
  .my-breakpoint .ui-block-menu4,
  .my-breakpoint .ui-block-menu5,
  .my-breakpoint .ui-block-menu6,
  .my-breakpoint .ui-block-menu7,
  .my-breakpoint .ui-block-menu8 { width: 100%; float: none; font-size:14px; margin-left:11%; text-align:center; line-height:1.0em; margin-top:5px; }
}
/* Add a breakpoint for bigger devices - 640px or BIGGER - side-by-side layout*/
@media all and (min-width: 30em) {
  .my-breakpoint.ui-grid-e .ui-block-menu1,
  .my-breakpoint.ui-grid-e .ui-block-menu2,
  .my-breakpoint.ui-grid-e .ui-block-menu3,
  .my-breakpoint.ui-grid-e .ui-block-menu4,
  .my-breakpoint.ui-grid-e .ui-block-menu5,
  .my-breakpoint.ui-grid-e .ui-block-menu6,
  .my-breakpoint.ui-grid-e .ui-block-menu7 { width: 10%; display:inline-block; margin-right:10px; }
  .my-breakpoint.ui-grid-e .ui-block-menu8 { width: 10%; display:inline-block; }
}


        
#left-content { max-width:70%; text-align:left; margin-left:15%; background-color:#000; }
#right-content { max-width:70%; text-align:left; margin-left:15%; background-color:#000; }

#the-team { display:inline-block; width:95%; }
.team-container { display:flex; }
.col1 { flex:1; padding-left: 10px; padding-right: 10px; background-color:white; color:black; border-radius: 10px; margin:5px; }
.col2 { flex:1; padding-left: 10px; padding-right: 10px; background-color:white; color:black; border-radius: 10px; margin:5px; }
.col3 { flex:1; padding-left: 10px; padding-right: 10px; background-color:white; color:black; border-radius: 10px; margin:5px; }

@media all and (max-width: 640px) {
.team-container { display:flex; flex-direction:column; }
.col1 { order:0; }
.col2 { order:1; }
.col3 { order:2; }
}