﻿/********************************************************************************************************************************************GENERAL*/
#mma #heroMobileHub h1 {
  font-family: 'Humanist777BT-LightB';
  font-size: 2.8em;
  color: #ff8a00;
  margin-top: 3.2692307692307692307692307692308em /*85px/26px*/;
}
#mma #heroMobileHub h2 {
  font-family: 'Humanist777BT-LightB';
  font-size: 2.2em;
  color: #092a4f;
  width: 52%;
}
.quote {
  display: none;
}
#mma {
  background-image: url('/Content/images/Resources/mobile_hub/mma-bkgrnd.png');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  position: relative;
  height: 26.6em;
}
#mma #heroMobileHub {
  margin-left: 18%;
  width: 67%;
  padding-left: 4.19%; /*40px*/
  position: relative;
  bottom: 0;
  height: 100%;
  overflow: hidden;
}

#mma #heroMobileHub img {
  max-width: 40%;
  position: absolute;
  right: 0;
  top: 1.5em;
}
.row {
  float: left;
  position: relative;
  background: url('/Content/images/resources/mobile_hub/hairline.png') no-repeat bottom center;
  width: 100%;
  clear: both;
}
.row.last {
  background: none;
}
.row img {
  float: left;
  margin-top: 5.7em; /*57px / 10px */
  max-width: 23.036649214659685863874345549738% /*220px/955px*/;
}
.row .rowContent {
  float: left;
  padding-left: 5.2356020942408376963350785340314% /*50px / 955px - width of row*/;
  padding-right: 5.2356020942408376963350785340314% /*50px*/;
  width: 37.172774869109947643979057591623% /*355px/955px*/;
  border-right: 1px solid #c2cfdb;
  height: 6.6em /*66px / 10px*/;
  padding-top: 5.7em /*57px/10px*/;
  padding-bottom: 5.7em /*57px/10px*/;
  margin-top: 5.7em /*57px/10px*/;
  margin-bottom: 5.7em /*57px/10px*/;
}
.row .rowContent h3 {
  font-family: "Humanist777BT-RomanB" , Arial, Verdana, Geneva, sans-serif;
  font-size: 1.5em /*15px/10px*/;
  color: #092a4f;
}
.row .rowContent p {
  font-family: "Humanist777BT-RomanB" , Arial, Verdana, Geneva, sans-serif;
  font-size: 1.3em /*13px/10px*/;
}
#body .links {
  padding-left: 5.2356020942408376963350785340314%; /*50px/955px*/
  float: left;
  height: 18.0em /*180px/10px*/;
  margin-top: 5.7em /*57px/10px*/;
  margin-bottom: 5.7em /*57px/10px*/;
}
#body .links.one {
  padding-top: 5em /*50px/10px*/;
  margin-bottom: 0;
}
#body .links.two {
  padding-top: 0.7em /*7px/10px*/;
}
#body .links.three {
  padding-top: 6.5em /*65px/10px*/;
}
#body .links a {
  display: block;
  font-family: "Humanist777BT-RomanB" , Arial, Verdana, Geneva, sans-serif;
  font-size: 1.3em /*13px/10px*/;
  background: url('/Content/images/shared/icons/caret.png') no-repeat 0 50%;
  padding-left: 1em /*13px/13px - font size of links */;
  margin-bottom: 1.5384615384615384615384615384615em /*20px/13px*/;
  width: 100%;
}
/*******************************************************************************************************************************************998*/
@media screen and (max-width: 998px) {
  #mma #heroMobileHub h1 {
    font-size: 2.6em;
  }
  #mma #heroMobileHub h2 {
    font-size: 1.8em;
  }

  .row .rowContent {
    padding-left: 2.6178010471204188481675392670157% /*25px / 955px - width of row*/;
    padding-right: 2.6178010471204188481675392670157% /*25px*/;
  }
  #body .links {
    padding-left: 2.6178010471204188481675392670157%; /*25px/955px*/
  }
}
/******************************************************************************************************************************************795*/
@media screen and (max-width: 795px) {
  #mma {
    height: 24.6em;
  }
  #mma #heroMobileHub {
    margin-left: 11%;
    padding-left: 0;
    width: 72%;
  }

  #mma #heroMobileHub h2 {
    width: 53%;
  }
  .row img {
    max-width: 28.248587570621468926553672316384%; /*200px/708px*/
  }
  .row .rowContent {
    padding-left: 2.8248587570621468926553672316384% /*20px/708px*/;
    padding-right: 2.8248587570621468926553672316384% /*20px/708px*/;
    width: 37.711864406779661016949152542373% /*267px/708px*/;
  }
  #body .links {
    padding-left: 2.8248587570621468926553672316384%; /*20px/708px*/
    width: 25%;
  }
  #body .links a {
    background: none;
    padding-left: 0;
  }
}
/******************************************************************************************************************************************700*/
@media screen and (max-width: 700px) {
  #mma #heroMobileHub {
    width: 89%;
  }
}
/******************************************************************************************************************************************576*/
@media screen and (max-width:576px) {
  #mma {
    height: 20em;
  }
  #mma #heroMobileHub {
    width: 97%;
    margin-left: 3%;
  }
}
/******************************************************************************************************************************************540*/
@media screen and (max-width:540px) {
  #mma #heroMobileHub h1 {
    font-size: 1.8em;
  }
  #mma #heroMobileHub h2 {
    font-size: 1.6em;
  }
  .row .rowContent {
    padding-top: 1em;
    padding-bottom: 17em;
  }
  #body .links.one {
    padding-top: 1em;
  }
  #body .links.three {
    padding-top: 3em;
  }
}

/**************************************************************************************************************************************481-795*/
@media screen and (min-width: 481px) and (max-width:700px) {
  #mma #heroMobileHub img {
    padding-top: 2.5em;
  }
}



/******************************************************************************************************************************************340*/
@media screen and (max-width: 340px) {
  #mma {
    background: none;
    background: #f4f6f9; /* Old browsers */
    background: -moz-linear-gradient(45deg,  #f4f6f9 0%, #ffffff 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#f4f6f9), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(45deg,  #f4f6f9 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(45deg,  #f4f6f9 0%,#ffffff 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(45deg,  #f4f6f9 0%,#ffffff 100%); /* IE10+ */
    background: linear-gradient(45deg,  #f4f6f9 0%,#ffffff 100%); /* W3C */
    position: relative;
    border-bottom: 1px solid #e2e8ee;
    padding-top: 0.625em;
    height: 13.9em;
    overflow: hidden;
  }
  #mma #heroMobileHub h1 {
    margin-top: 1.05em;
    font-size: 1.8em;
  }
  #mma #heroMobileHub h2 {
    font-size: 1.6em;
  }
  #mma #heroMobileHub img {
    max-width: 53%;
    top: 0.5em;
    margin-right: -2.5em;
  }
  #mma #heroMobileHub {
    width: 100%;
    margin-left: 0;
  }
  .row {
    background-size: 100% 1em;
  }
  .row img {
    max-width: 46.666666666666666666666666666667% /*133px/285px*/;
    margin-top: 4em /*40px*/;
    margin-bottom: 1.5em /*15px*/;
  }
  .row .rowContent {
    width: 45.614035087719298245614035087719% /*130px/285px*/;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-right: 0;
    margin-bottom: 0;
    margin-top: 4em /*40px/10px*/;
    padding-left: 7.0175438596491228070175438596491% /*20px/285px*/;
  }
  .row .rowContent h3 {
    font-size: 1.4em /*14px*/;
    margin-bottom: 0.3em;
  }
  .row .rowContent p {
    font-size: 1.2em /*12px*/;
    margin-bottom: 1.5em /*15px*/;
    line-height: 1.5em;
  }
  #body .links {
    padding-top: 0;
    padding-left: 0;
    margin-top: 0;
    width: 86.666666666666666666666666666667% /*247px/285px*/;
    height: 100%;
    padding-bottom: 2em /*20px*/;
  }
  #body .links a {
    border-radius: 10px;
    border: 1px solid rgb(224, 231, 237);
    background: -webkit-linear-gradient(top, rgb(244, 244, 244) 50%, rgb(221, 221, 221) 100%);
    padding: 13px 16px 12px 17px;
    width: 100%;
    margin-bottom: 1em /*10px*/;
  }
  #body .links.one, #body .links.two, #body .links.three {
    padding-top: 0;
    margin-bottom: 1em;
  }
  #content {
    clear: both;
  }
  #content .quote {
    display: block;
    padding: 0 0 1.1em;
    margin-top: 0;
  }
  #content .quote h3 {
    padding-top: 0.3em;
  }

}
