/********************************************************************************
******************RESPONSIVE FOR 1049PX OR LESS SCREEN SIZE**********************
********************************************************************************/
@media screen and (max-width: 1049px) {
  header, #nav, .nav, #contents, #footer { width: 100%; }

/***********************FLASH CARD MENU***********************/
  #header { height: 220px;}
  .flash-card { clear: both; float: none;}
  .flash-card ul li { width: 25%;}
  .ford, .news, .comedy { border-left: none;}

/***********************CONTENTS***********************/
  #contents { width: 90%; margin: 0 auto;}
  .contop { width: 80%;}
  .video { display:none;}


/***********************FOOTER MENU***********************/
  ul.footer-menu-boxes { margin: 20px auto; width: 90%;}
  ul.footer-menu-boxes li {float: none; width: 100%; margin: 0 auto;}
  ul.footer-menu li a { width: 100%; line-height: 1.5em;}
  ul.footer-menu ul > li a { line-height: 1.3em;}
  .icons { width: 180px; margin: 30px auto;}
  ul.icon li {
    display: inline;
    float: left;
    width: 60px;
    height: auto;
    border: none;
    padding: 0 15px;
  }
}

/********************************************************************************
******************RESPONSIVE FOR 768PX OR LESS SCREEN SIZE***********************
********************************************************************************/
@media screen and (max-width: 768px) {

/***********************TOP MENU***********************/
  a.menu-link {
    display: block;
    color: #fff;
    background-color: #333;
    float: right;
    text-decoration: none;
    padding: 11px 10px;
  }

  .menu { clear: both; min-width: inherit; float: none; }
  .menu, .menu > ul ul { overflow: hidden; max-height: 0; background-color: #f4f4f4; }
  .menu > li > ul.sub-menu { padding: 0px; border: none; }
  .menu.active, .menu > ul ul.active { max-height: 55em; }
  .menu ul { display: inline; }
  .menu > ul { border-top: 1px solid #808080; }
  .menu li, .menu > ul > li { display: block; }
  .menu li a { color: #000; display: block; padding: 0.8em; border-bottom: 1px solid #808080; position: relative; }
  .menu li.has-submenu > a:after {
    content: '+';
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    font-size: 1.5em;
    padding: 0.55em 0.5em;
  }
  .menu li.has-submenu > a.active:after {
    content: "-";
  }
  .menu ul ul > li a { background-color: #e7d1b7; height:25px; padding: 11px 18px 19px 30px; }
  .menu ul ul, .menu ul ul ul { display: inherit; position: relative; left: auto; top:auto; border:none; }

  .left { float: none; width: 80%; margin: 3% auto;}
  .right { float: none; clear: left; width: 80%; margin: 5% auto;}

/***********************LOGIN SIGHN UP***********************/
  .login, .signup {
    float: none;
    width: 100%;
    min-height: 180px;
    margin: 0 auto;
  }
  .signup {
    border-left: none;
    border-top: 1px solid #fff;
  }

    .grid4 .col {
    width: 31.2%;
  }
  .grid4 .col:nth-of-type(4n+1) {
    margin-left: 2.5%;
    clear: none;
  }
  .grid4 .col:nth-of-type(3n+1) {
    margin-left: 0;
    clear: left;
  }

}

@media screen and (max-width: 500px) {
  .grid4 .col {
    width: 48%;
  }
  .grid4 .col:nth-of-type(3n+1) {
    margin-left: 2.5%;
    clear: none;
  }
  .grid4 .col:nth-of-type(2n+1) {
    margin-left: 0;
    clear: left;
  }
  h1 {
    font-size: 150%;
  }
  .flash-card ul li a  {
    font-size: 100%;
  }
}

/******************Begin Updates by Olive************************
******************RESPONSIVE FOR 1050PX OR MORE SCREEN SIZE***********************
********************************************************************************/

@media screen and (min-width: 1050px) {

  .flash-card ul li a  {
    font-size: 145%;
  }
}


@media screen and (min-width: 1050px) {

/***********************HEADER MENU***********************/
#header { height: 220px;}

/***********************FLASH CARD MENU***********************/
.flash-card{
  min-width: 100% !important;
  position:relative;
  float: right; 
}

div.flash-card ul{
  position:relative;
  margin: 0px auto;
}

.flash-card ul li{
  min-width: 24.8%;
}

/***********************CONTENTS***********************/

}
/******************End Updates by Olive************************/


/********************************************************************************
******************RESPONSIVE FOR 478PX OR LESS SCREEN SIZE**********************
********************************************************************************/
@media screen and (max-width: 478px) {
/***********************FLASH CARD MENU***********************/
 #header { height: 220px;}
 .address {
 padding-top: 1px;
}
header img {
 margin-bottom: 1px;
}
}