.menu {width: 100%; height: 70px;background: #4d6c43; position: fixed; z-index:2; padding: 0 0 0 0;}
.menu ul {list-style:none;text-align: center;}
.menu ul li {display: inline; margin:0 30px;}
.menu a {padding: 30px 40px 22px 40px;background: transparent; font-size: 20px;color: #fff; line-height: 3.5;border-bottom: solid 10px transparent; text-transform: uppercase;}
.menu a:hover {background: #b2c085; text-decoration: none; border-bottom: solid 10px #de354c; }
.mobile-menu {display: none;}

.image-box {margin: 100px 0 100px 0;}
.image-box img {width: 500px; float: left; padding: 0 100px 0 0;}
.image-box button {border: none;background: transparent;}
.image-box .fa-play-circle, .image-box .fa-stop-circle {font-size: 60px; margin:0 6px;color: #de354c;}
.image-box .fa-play-circle:hover, .image-box .fa-stop-circle:hover {color: #5a6258;} 
.image-box hr {margin-top: 0; margin-bottom: 0;border-top: solid 2px #5a6258;}
.image-box .table {width: 60%; max-width: 700px;float: left;text-align: center;}
.image-box .table td {width: 50%;}
.image-box h4 {font-size: 24px;}

@media(max-width:1400px) {
.image-box {margin: 30px 0 40px 0;}
}

@media(max-width:1280px) {
.menu a {padding: 30px 10px 22px 10px;}
.image-box {margin: 10px 20px 20px 0;}
.image-box img {padding: 0 40px 0 0;}
.image-box h4 {font-size: 20px;}
.image-box .table {width: 58%; max-width: 600px;}
}
@media(max-width:1023px) {
.menu {height: 60px;}
.menu ul li {margin:0 40px 0 0;}
.menu a {padding: 0 0 0 0;font-size: 18px; border: none !important; background: transparent !important;}
.image-box {margin: 8px 20px 10px 0;}
.image-box img {width: 360px; padding: 0 20px 6px 0;}
.image-box h4 {margin: 0 0 0 0;}
}

@media(max-width:992px) {
.image-box {margin: 8px 10px 10px 0;}
.image-box img {width: 500px;}
.image-box .table {margin-top:-40px;}
.image-box .table td {display: block;width: 100%;}
.image-box hr {display:none;}
.image-box .fa-play-circle, .image-box .fa-stop-circle {font-size: 50px; }
}
@media(max-width:767px) {
.menu {height: 52px;}
.menu ul {margin-left: -30px;}
.menu ul li {margin:0 20px 0 0;}
.menu a {font-size: 16px;}
.image-box {margin: 10px 0 0 0;}
.image-box img {width: 100%; display: block;padding: 0 0 20px 0;}
.image-box hr {display:block;}
.image-box .table {width: 100%; max-width: 100%; margin-top: -20px;}
.image-box .table td {float: left;width: 50%;}

}
@media(max-width:580px) {
.menu {display: none;}
.mobile-menu {display: block;z-index: 999;width: 100%;position: absolute; top:0;}
.mobile-menu .panel-default>.panel-heading {background: #4d6c43; }
.mobile-menu ul {list-style: none;}
.mobile-menu li {line-height: 1.5;margin-left: -24px;}
.mobile-menu li a:hover {text-decoration: none;}
.mobile-menu .panel-default .panel-title {text-align: center; }
.mobile-menu .panel-default .panel-title a, .mobile-menu .panel-default .panel-title .fa-plus, .mobile-menu .panel-default .panel-title .fa-minus  {color: #fff; font-size: 20px; font-weight: normal;}
.mobile-menu .panel-default .panel-title .fa-plus, .mobile-menu .panel-default .panel-title .fa-minus {margin-left: 16px; font-size: 18px; }
.mobile-menu .panel-default .panel-body {background: #fff; padding: 10px 16px 0 0;}
.image-box {padding: 0 20px 0 20px;}
.image-box .table td {display: block;width: 100%;}
}


@media(max-width:360px) {
.image-box h2 {font-size: 24px;}
.image-box {margin-top: 10px; padding: 0 16px 0 16px;}
}