@media only screen and (min-width: 768px)
{
    .navigation > ul    { display: block !important;}
	.mobmenu {display: none;}
}

@media only screen and (min-width: 768px) and (max-width: 1004px) {
    .container  { width: 100%; box-sizing: border-box; padding: 0 20px;}
	.mobmenu {display: none;}
    a.logo  {width: 250px;}
	
    .header.small a.logo {width: 160px;}
    .navigation > ul > li > a   { font-size: 14px; line-height: 16px;  padding-bottom: 5px;}
    .navigation > ul > li   {padding: 5px 8px 0 11px;  background-position: left 8px; }
    .header.small  .navigation > ul > li > a {padding-bottom: 5px; }
    .header.small  .navigation > ul > li    { padding-top: 5px;  background-position: left 8px;}
    .navigation ul li ul li a   {font-size: 13px;}
    .navigation ul li ul    { left: 10px;}
	
	.logosponsers .slick-prev { left: -10px;}
	.logosponsers .slick-next {right: -10px;}
	.bannerinfo {width: 70%;}
	.bannerinfo h3 {font-size: 40px; line-height: 42px; padding-bottom: 15px;}
	.bannerinfo h4 {font-size: 26px; line-height: 30px; padding: 0 8% 10px;}
	.titlecomment h3 {font-size: 20px; line-height: 25px; margin: 0 0 5px;}
	.titlecomment h2 {font-size: 22px;  line-height: 26px;}
	.menucontent h4 {font-size: 18px; line-height: 22px;}
	.othermenuinfo p {font-size: 16px; line-height: 24px;}
	.controlsmenu h1{font-size: 34px;line-height: 38px;}
	.controllist li > .counterbx {width: 12%;}
	.controllist li > .counterinfo {width:76%; padding: 0 5% 0 7%;}
	.counterbx em {font-size: 36px; line-height: 40px;}
	.innerboxinfo {padding: 0;}
	.innerboxinfo h2{font-size: 25px;line-height: 30px;}
	.logogroup h1{font-size: 34px;line-height: 38px;}
	.aboutc h1 {font-size: 34px;line-height: 38px;}
	.leftabtus {width: 64%; margin: 0 1% 0 0;}
	.leftabtus h3 {font-size: 20px; line-height: 25px; margin: 0 0 5px;}
	.leftabtus h3 + p {background-size:80% auto;}
	.rightabtus {width: 35%;}
	.rightabtus img {width: 100%; height: auto;}
	.blogimg{width:34%;}
	.blogleftinfo{width:60%; padding: 20px 2%;}
	.menus_cont > ul li{width: 21%;}
	.aboutwrap {padding: 50px 0;}
	.blogleftinfo h5{margin: 0 0 8px;}
	.blogleftinfo h3{font-size: 16px;line-height: 24px;}
	.blogleftinfo p {font-size: 14px;}
	.contactusct h1 {font-size: 34px;line-height: 38px;}
	.connectwith ul {width: 50px;}
	.contactlinks {width: 90%;}
	.contactlinks > li{padding-left: 6%;}
	.contactlinks > li:nth-child(1) {margin-right: 2%; width: 30%;}
	.contactlinks > li:nth-child(2) {width:16%;}
	.contactlinks > li:nth-child(3) {width: 34%;}
	.connectwith > ul > li {margin: 0 5px 0 0;}
	.connectwith > ul > li.last {margin: 0;}
	.inputbx {width: 0 5%;}
	.textinput {width: 27%;}
	.freeaudit h3 {font-size: 22px; line-height: 26px;}
	.freeaudit p {font-size: 16px; line-height: 20px;}
	.subscribebx h3  {font-size: 22px; line-height: 26px;}
	.subscribebx p {font-size: 16px; line-height: 20px;}
	.branding h3  {font-size: 22px; line-height: 26px;}
	.branding p {font-size: 16px; line-height: 20px;}
	.contactlinks > li a {font-size: 16px;}
	.bannerimage { min-height: 600px;}
	
	/*-- inner1--*/
	.innerbannerimage > img   {min-height: 240px;} 
	.innerbannerinfo {width: 80%; margin: 0 auto;}
    
	   /* new css by mac */
    .latestepisode ul li{ width: 50%; box-sizing: border-box; margin: 0 0 20px; padding: 0 10px;}
}

@media only screen and (max-width: 767px) {
    .container  { width: 100%; box-sizing: border-box; padding: 0 20px;}
    
    
    .menu{ display: block;}
    .residents{ display: none;}
    .navigation >ul { display: none;}
    .menu { display: block; position: absolute; right: 20px;top: 20px; height: 33px; cursor: pointer;}
    .header { padding: 8px 0 10px;}
    .header.small a.logo    { width: 363px;}
    .header { position: relative;}
    
    .header.small .navigation > ul > li > a { padding-bottom: 10px;}
    .header.small .navigation > ul > li { padding-top: 0px;}
	
	.logosponsers .slick-prev { left: -10px;}
	.logosponsers .slick-next {right: -10px;}
	.bannerinfo {width: 70%;}
	.bannerinfo h3 {font-size: 32px; line-height: 36px; padding-bottom: 15px;}
	.bannerinfo h4 {font-size: 22px; line-height: 22px; padding: 0 8% 10px;}
	.titlecomment h3 {font-size: 20px; line-height: 25px; margin: 0 0 5px;}
	.titlecomment h2 {font-size: 22px;  line-height: 26px;}
	.menucontent h4 {font-size: 18px; line-height: 22px;}
	.othermenuinfo p {font-size: 16px; line-height: 24px;}
	.controlsmenu h1{font-size: 34px;line-height: 38px;}
	.controllist li > .counterbx {width: 12%;}
	.controllist li > .counterinfo {width:76%; padding: 0 5% 0 7%;}
	.controllist > li{width: 100%;} 
	.counterbx em {font-size: 48px; line-height: 48px;}
	.innerboxinfo {padding: 0;}
	.innerboxinfo h2{font-size: 25px;line-height: 30px;}
	.logogroup h1{font-size: 34px;line-height: 38px;}
	.aboutc h1 {font-size: 34px;line-height: 38px;}
	.leftabtus {width: 64%; margin: 0 1% 0 0;}
	.leftabtus h3 {font-size: 20px; line-height: 25px; margin: 0 0 5px;}
	.leftabtus h3 + p {background-size:80% auto;}
	.rightabtus {width: 35%;}
	.rightabtus img {width: 100%; height: auto;}
	.blogimg{width:46%;}
	.blogleftinfo{width:50%; padding: 10px 2%;}
	.menus_cont > ul li{width: 47%; margin: 0 0 15px;}
	.menus_cont > ul li:nth-child(1) {margin: 0 4% 15px 0;}
	.menus_cont > ul li:nth-child(3) {margin: 0 4% 15px 0;}
	.aboutwrap {padding: 50px 0;}
	.blogleftinfo h5{ margin: 0 0 8px;}
	.blogleftinfo h3{font-size: 16px;line-height: 20px;  margin: 0 0 6px;}
	.blogleftinfo p {font-size: 14px; line-height: 18px; margin: 0 0 10px;}
	.contactusct h1 {font-size: 34px;line-height: 38px;}
	.connectwith ul {width: 50px;}
	.contactlinks > li{padding-left: 8%; margin: 0 0 15px;}
	.contactlinks > li:nth-child(1) {width: 100%;}
	.contactlinks > li:nth-child(2) {width:100%;}
	.contactlinks > li:nth-child(3) {width: 100%;}
	.connectwith > ul > li {margin: 0 5px 0 0;}
	.connectwith > ul > li.last {margin: 0;}
	.inputbx {margin: 0 5%;}
	.textinput {width: 26%;}
	.freeaudit h3 {font-size: 22px; line-height: 26px;}
	.freeaudit p {font-size: 16px; line-height: 20px;}
	.subscribebx h3  {font-size: 22px; line-height: 26px;}
	.subscribebx p {font-size: 16px; line-height: 20px;}
	.branding h3  {font-size: 22px; line-height: 26px;}
	.branding p {font-size: 16px; line-height: 20px;}

	
	
	/*-mobile menu--*/	
	.mobilemenu	{display: block; float: right; width:100%; position: a;}	
	.mobilemenu a {color:#244e6e; font-size: 0px; line-height: 25px; text-align: right; padding: 15px 70px 15px 0; font-weight: 600; float: right; background: url('../images/mobilmenu.png')no-repeat 84% center; text-transform: uppercase; background-size: 31px auto; outline: 0px; border: 0px; text-decoration: none; font-family: 'ProximaNovaLight';}
	.mobilemenu a:hover {color:#244e6e; text-decoration: none;}	
	.navigation {display: none;}
	.mobmenu		{display: none; position: absolute; z-index: 999; width: 100%; top: 100%; background: #8fa7bc;}	 
	.mobmenu ul 	{list-style: none; margin: 0px; position: relative;}	
	.mobmenu ul li  {display: block; text-align: left; padding: 5px 10px;position: relative;}	
	.mobmenu ul li a {font-size:16px; line-height: 20px; color:#fff; text-transform: uppercase; font-weight: 700; text-decoration: none;  font-family: 'ProximaNovaLight';}	 
	.mobmenu ul li a:hover {color:#fff; text-decoration: none;}	
	.mobmenu ul li > ul {list-style: none; width: 100%; display: none;}	
	.mobmenu ul li > ul li {display: block; width: 100%;}	
	.mobmenu ul li > ul li a {font-size:14px; line-height: 18px; text-transform: uppercase; font-weight: 400; font-family: 'ProximaNovaLight';}
	.headerbtm {border-bottom: 9px solid #abbac1;}	
    .bannerimage { min-height: 450px;}
	
	/*-- inner1--*/
	.innerbannerimage > img   {min-height: 170px;} 
	.subscribeuswrap .subscribebx p em {font-size: 22px; line-height: 24px;}
	.subscribeuswrap .subscribebx p {font-size: 16px; line-height: 20px;}
	.innerbannerinfo {width: 80%; margin: 0 auto; top: 54%;}
	.innerbannerinfo h3 {font-size: 32px; line-height: 36px;}
	.innerbannerinfo h5 {font-size: 15px; line-height: 22px;}
	
	/* by mac */
    
    .bandata{ width: 430px;}
    .bandata h1{ font-size: 50px;}
    a.blackbtn{ display: block; margin: 0 0 15px; width: 220px;}
    
    /* new css by mac */
    .latestepisode ul li{ width: 50%; box-sizing: border-box; margin: 0 0 20px; padding: 0 10px;}
    
}
@media only screen and (max-width:599px) {
    .container  { width: 100%; box-sizing: border-box; padding: 0 15px;}
	a.logo  { width: 280px; margin:1px 0; }
    .header.small a.logo    { width: 280px;}
	.bannerinfo{width: 90%;}
	.bannerinfo h3 { font-size: 26px; line-height: 32px; padding-bottom: 10px;}
	.bannerinfo h4 {font-size: 18px; line-height: 18px;}
	.titlecomment h3 {font-size: 18px;line-height: 22px;}
	.titlecomment h2 {font-size: 20px; line-height: 24px;}
	.helpsectionarrow{left: 44%;}
	.controlsmenu h1 {font-size: 26px; line-height: 32px;}
	.controlsmenu h4 {font-size: 16px; line-height: 20px;}
	.innerboxinfo h2 {font-size: 22px; line-height: 26px;}
	.counterbx em {font-size: 40px; line-height: 48px;}
	.controllist > li {margin-bottom: 10px;}
	.logogroup h1 {font-size: 26px; line-height: 32px;}
	.logogroup h4 {font-size: 16px; line-height: 20px;}
	.aboutc h1 {font-size: 26px; line-height: 32px;}
	.aboutc h4 {font-size: 16px; line-height: 20px;}
	.leftabtus {width: 100%; margin: 0 0 15px;}
	.rightabtus {float: none; width: 50%; margin: 0 auto 25px;}
	.leftabtus h3 {font-size: 18px; line-height: 22px;}
	.blogcontent h1 {font-size: 26px; line-height: 32px;}
	.blogcontent h4 {font-size: 16px; line-height: 20px;}
	.blogimg {float: none; margin: 0 auto; width: 50%;}
	.blogimg > img {margin: 15px 0;}
	.blogleftinfo {width: 90%; padding: 10px 5%;}
	.contactusct h1 {font-size: 26px; line-height: 32px;}
	.contactusct h4 {font-size: 16px; line-height: 20px;}
	.contactlinks > li {padding-left: 40px;}
	.contactlinks > li a {font-size: 16px;}
	.connectwith em  {font-size: 16px;}
	.textinput {width: 100%; margin: 0 0 15px; font-size: 14px;}
	.section1_arrw {left: 46%;}
	.branding h3 {font-size: 22px; line-height: 24px;}
	.aboutusarw {left: 46%;}
	.servicearrw {left: 46%;}
	.controlwrap {padding: 45px 0 86px;}
	.contactusct > .subscribebx h3 {font-size: 22px; line-height: 24px;}
	
	#services {top: 0;}
	#title {top:0;}
	#clients {top:0;}
	#about {top:0;}
	#blog {top:0;}
	#contact {top:0;}
	.bannerimage { min-height: 430px;}
	
	/*--video css--*/
	.video-wrap 	{height: 400px!important;}
	.video-wrap video {height: 100%!important;    transform: translate3d(-318px, -0.5px, 0px)!important;}	
	
	    /* new css by mac */
    .latestepisode ul li{ width: 100%; box-sizing: border-box; margin: 0 0 20px; padding: 0 0px;}
    .epinfo{ width: 80%;}
	
}
@media only screen and (max-width:479px) {
   
     a.logo  { width: 220px; margin:5px 0; }
     .header.small a.logo    { width: 220px;}
	
	.bannerinfo h3 {font-size: 18px; line-height: 22px;}
	.bannerinfo h4 {font-size: 14px; line-height: 20px;}
	.bannerimage > img {min-height: 250px;}
	.menus_cont > ul li {width: 100%; margin: 0 0 15px;}
	.menus_cont > ul li:nth-child(1) {margin: 0 0 15px;}
	.menus_cont > ul li:nth-child(3) {margin: 0 0 15px;}
	.controlsmenu h1 {font-size: 22px; line-height: 26px;}
	.controlsmenu h4 {font-size: 14px; line-height: 20px;  margin: 0 0 25px;}
	.controllist li > .counterinfo { padding: 0 0 15px;width: 100%;}
	.blogimg {width: 100%;}
	.blogimg > img {margin: 0px;}
	.textinput {width: 96%;}
	.logosponsers .slick-next {right: -2px;}
	.logosponsers .slick-prev {left: -2px;}
	
	.contactlinks > li:nth-child(1) { width: 86%;}
	.contactlinks > li:nth-child(2) { width: 86%;}
	.contactlinks > li:nth-child(3) { width: 86%;}
	.contactlinks {width: 100%;}
	.bannerimage {min-height: 300px;}
	
	/*--video css--*/
	.video-wrap 	{height: 300px!important;}
	.video-wrap video {height: 100%!important;    transform: translate3d(-318px, -0.5px, 0px)!important;}
	
	 /* by mac */
    
    .bandata{ width: 100%;}
    .bandata h1{ font-size: 38px;}
    .bandata h5{ font-size: 22px;}
    .bandata p{ font-size: 16px; line-height: 24px;}
    .leavemsg p{font-size: 16px; line-height: 24px;}
    a.msg{ font-size: 16px;}
    .latestepisode h2{ font-size: 28px;}
	
}