@media (min-width: 300px) and (max-width: 449px) {
    .flot_bar {

    left: 0;
    margin: 500px 0;
    position: fixed;
    width: 61px;
    z-index: 9999;


}
}
@media (min-width: 450px) and (max-width: 768px) {
  body {
    background-color: #373E42;
    background: url(../img/max-xbg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
.flot_bar {

    left: 0;
    margin: 500px 0;
    position: fixed;
    width: 61px;
    z-index: 9999;


}
section {    
  	background-color: #FFFFFF;
}

}

@media (min-width:1200px){
	body {
    background-color: #000000;
    background: url(../img/max-xbg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
  .flot_bar {

    left: 0;
    margin: 130px 0;
    position: fixed;
    width: 61px;
    z-index: 9999;


}
  header{
    width: 60%;
    margin: auto;
}
section {
    width: 60%;
    margin: auto;
    background-color: #FFFFFF;
}
footer .footer-above {
    padding-top: 50px;
    background-color: #c0965a;
    width:60%;
    margin:auto;
}

footer .footer-below {
    padding: 25px 0;
    background-color: #a17e4d;
     width:60%;
    margin:auto;
}
}

@media (min-width: 768px){
.container {
    width: 95%;
}
.flot_bar {

    left: 0;
    margin: 130px 0;
    position: fixed;
    width: 61px;
    z-index: 9999;


}
.navbar-fixed-top {
        padding: 5px 0;
        -webkit-transition: padding .3s;
        -moz-transition: padding .3s;
        transition: padding .3s;
    }
}
@media (min-width: 769px) {
  body {
    background-color: #000000;
  }

header{
    width: 60%;
    margin: auto;
}

section {
    width: 60%;
    margin: auto;
    background-color: #FFFFFF;
}

}

@media (min-width: 768px) and (max-width: 1199px) {
  body {
    background-color: #000000;
  }

header{
    width: 100%;
    margin: auto;
}

section {
    width: 100%;
    margin: auto;
    background-color: #FFFFFF;
}

}

.navbar-nav > li > a {
    font-size: 70%;
    line-height: 30px;
    }

.navbar-collapse.in {
    	overflow-y: auto;
    }

.spanfull {
	width:100%;
}

.flipster {
02
  overflow: hidden;
03
  width: 100%;
04
  display: none;
05
}
06
 
07
.flipster > ul {
08
  padding-top: 2.5%;
09
  -webkit-transform: translate3d(0, 0, 0);
10
  -moz-transform: translate3d(0, 0, 0);
11
  -ms-transform: translate3d(0, 0, 0);
12
  transform: translate3d(0, 0, 0);
13
  -webkit-transition: all 333ms;
14
  -moz-transition: all 333ms;
15
  transition: all 333ms;
16
  position: relative;
17
  height: 1000px;
18
}
19
 
20
.flipster li {
21
  display: block;
22
  -webkit-transition: all 333ms ease-in-out;
23
  -moz-transition: all 333ms ease-in-out;
24
  transition: all 333ms ease-in-out;
25
  -webkit-perspective: 800px;
26
  -moz-perspective: 800px;
27
  perspective: 800px;
28
  position: absolute;
29
  width: 20%;
30
  opacity: 0.99; /* fix for strange clipping behavior on rotated elements in chrome. don't know why this works */
31
}
32
 
33
.flipster li img {
34
  width: 100%;
35
  display: block;
36
}
37
 
38
.flipster li > div {
39
  -webkit-transition: all 500ms;
40
  -ms-transition: all 500ms;
41
  transition: all 500ms;
42
  background-color: #000000;
43
  -webkit-box-shadow: 0px 0px 5% #000000;
44
  -moz-box-shadow: 0px 0px 5% #000000;
45
  -ms-box-shadow: 0px 0px 5% #000000;
46
  box-shadow: 0px 0px 15px #000000;
47
  -webkit-box-reflect: below 1px -webkit-gradient( linear, left bottom, left top, color-stop(0.10, rgba(255,255,255,0.3)), color-stop(0.50, transparent));
48
  width: 100%;
49
}
50
 
51
.no-transition {
52
  -webkit-transition: all 0ms !important;
53
  -moz-transition: all 0ms !important;
54
  transition: all 0ms !important;
55
}
56
 
57
.flipster .flipster-left > div {
58
  -webkit-transform: rotateY(60deg);
59
  -moz-transform: rotateY(60deg);
60
  -ms-transform: rotateY(60deg);
61
  transform: rotateY(60deg);
62
}
63
 
64
.flipster .flipster-right > div {
65
  -webkit-transform: rotateY(-60deg);
66
  -moz-transform: rotateY(-60deg);
67
  transform: rotateY(-60deg);
68
  -ms-transform: rotateY(-60deg);
69
}
70
 
71
.flipster .flipster-current>div {
72
  -webkit-transform: rotateY(0deg) translate3d(0, 0, 150px);
73
  -moz-transform: rotateY(0deg) translate3d(0, 0, 150px);
74
  -ms-transform: rotateY(0deg) translate3d(0, 0, 150px);
75
  transform: rotateY(0deg) translate3d(0, 0, 150px);
76
}
77
 
78
/* Old browser compatibility classes */
79
 
80
.compatibility { }

canvas {
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}