#productlist .products,
#libraryId .products  { display: none; }
#productlist .done,
#libraryId .done  {display: block!important;}


.nonUS .help-link {display: none;}
.nonUS.Austria .help-link,
.nonUS.Germany .help-link {display: inline-block;}

#search img {
margin-top: -8px;
width: 18px;
height: 18px;
}

.gravel-body .risk-content-container ul li {
 line-height: 2em; 
 list-style-type: disc; 
 margin-left: 17px;
}

.gravel-body #disclaimerContent {
  display: block!important;
}

#disclaimerContent {
  display: none!important;
}


/*
 z-Index correct for some of the plugins.
 */
.b-modal {
  z-index: 7 !important;
}

.gravel {
    z-index: 8 !important;
}
.center-register-popup {
    top: 100% !important;
    transform: translateY(-50%);
    left: 47%!important;
    margin-left: -475px;
}
.center-success-popup {
    top: 50% !important;
    transform: translateY(-50%);
    left: 50%!important;
    margin-left: -270px;
}
.center-access-popup {
    top: 85% !important;
    transform: translateY(-50%);
    left: 54%!important;
    margin-left: -475px;
}
#powerTip {
  z-index: 1001 !important;
}

h2.no.data {
  text-align: center;
  display: block;
  width: 94%;
  border-bottom: 1px solid #d1d6da;
  position: absolute;
  font-size: 18px;
  background: #ffffff;
}

.nonUS div[data-id="productResultCount"] {top:75px;}

.country-select-no-login-text {
    margin: 0;
}

.country-select-no-login-text p {
  display: inline-block;
  vertical-align: top;
  margin: 0;
  padding: 0!important;
  font-size: 12px;
}

.country-select-no-login-text .login-text {

float:right;

}


#logged_in_username img {
  display: inline-block;
  width: 13px;
  height: 18px;
  border: 1px solid #8ab2d5;;
  border-radius: 100px;
  padding: 0 3px 0 3px;
  margin-right: 5px;

}

#logged_in_username span {color: #fff; font-size: 14px;}


.productResults {
    position: absolute;
    z-index: 3;
    top: 30px;
    height: auto;
    left: 0px;
    width: auto;
    background: #fff;
    box-shadow: 5px 5px 0px #ccc;
    min-width: 160px;
    max-height: 170px;
    overflow-y: scroll!important;;
    overflow: hidden;
    -webkit-transition: height 500ms ease-in-out;
      -moz-transition: height 500ms ease-in-out;
      -ms-transition: height 500ms ease-in-out;
      -o-transition: height 500ms ease-in-out;
      transition: height 500ms ease-in-out;
}

.productResults li {padding: 2% 5%;}


button.clearFilter {min-width: 93px;}

.assetClassList a {
  color: #fff;
  display: inline-block;
  padding: 0px 0 6px 0;
  text-decoration: none;
}
.assetClassList a:hover,
.assetClassList a:focus {text-decoration: underline; color: #fff;}

.filterBody .typeDropdowns .filterTypWrapp {width:100%; margin: 0; padding: 0; float: none; }

table a:hover,
table a:focus {color: #0000ee;}

#addToMyJPMLink.my-jp-add-button {
    background: #115880;
    color: #fff;
    font-size: 44px;
    padding: 0 0 4px 0;
    width: 39px;
    margin: 3px auto;
    border-radius: 100px;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    text-decoration: none;
    line-height: 36px;
}



.cert-and-notes-buttons li {

display: inline-block;
vertical-align: top;
border:1px solid #58718d;
text-align: center;
padding: 2%;
cursor: pointer;
color: #58718d;
font-size: 21px;
font-family: "amplitude-regular","Arial Narrow",arial;
line-height: 1.3em;
}

.cert-and-notes-buttons li:hover,
.cert-and-notes-buttons li:focus {

    text-decoration: none;
    background-color: #58718d;
    color: #fff;
}

.cert-and-notes-buttons li span {

  display: block;
}

.gravel p.cert-and-notes-p {

}


/* ===========================================================================
HELP PAGE
=============================================================================*/
form#contactUsForm {margin-top:18px; padding-top: 18px; border-top:1px solid #bcc2c9;}
form#contactUsForm div {margin-bottom: 9px;}
form#contactUsForm div label {width:170px; display: inline-block;}


/*========================================================================
  NON US
  ========================================================================*/


  .nonUS .featuredProducts,
  .nonUS .proprietaryindices,
  .nonUS .businessGrouping {display:none;}
  .nonUS .findProducts {display:block; }

  #productlist.nonUS .findProducts {padding: 0; margin: 0 0 27px 0;}

#productlist.nonUS .findProducts #bigSearch-form,
  #productlist.nonUS .findProducts #bigSearch {
    padding: 0;
    margin:0 auto;

  }


  .viewMoreProducts {
    margin: -69px auto 32px auto!important;
    text-align: center;
    color: #666666!important;
  }


  .nonUS .findProducts #bigSearch-form,
  .nonUS .findProducts #bigSearch {
    position: relative;
    max-width:700px;
    margin: 54px auto;

  }
.nonUS .findProducts #bigSearch-form .search-bg,
.nonUS .findProducts #bigSearch .search-bg {
background: #FFF;
height: 70px;
border: 1px solid #9a9a9a;
overflow: hidden;
-webkit-transition: -webkit-box-shadow .3s ease;
-moz-transition: box-shadow .3s ease;
transition: box-shadow .3s ease;
}

.nonUS .findProducts #bigSearch-form .search-bg input,
.nonUS .findProducts #bigSearch .search-bg input {
width: 72%;
padding: 27px 13px 23px 13px;
border: none;
font-size: 16px;
line-height: 1em;
}

.nonUS .findProducts #bigSearch-form .search-bg button,
.nonUS .findProducts #bigSearch .search-bg button {
background: #A5C9F3;
cursor: pointer;
box-shadow: none;
border: 0;
padding: 10px 10px;
position: absolute;
right: 13px;
top: 10px;
}

.home.US .recently-issued-products {

  display: none;


}

.nonUS .findProducts #bigSearch-form .search-bg button:hover,
.nonUS .findProducts #bigSearch-form .search-bg button:focus,
.nonUS .findProducts #bigSearch .search-bg button:hover,
.nonUS .findProducts #bigSearch .search-bg button:focus,
.viewMoreProducts:hover,
.viewMoreProducts:focus {
    color:#ffffff!important;
    background: #58718d!important;
    outline: 1px dotted #115883;
    outline-offset: 3px;
}

.table-text {background:#ebecef; padding:9px; border-radius: 4px 4px 0 0;}
.table-text h4 {text-align: left; margin-bottom: 0px; font-size: 18px;}
.table-text p {margin: 0; font-size: 14px;}

.pdf {position: relative;}

.UnitedStates .underlyings .product .pdf:before {
    display: block;
    background-size: 28px 28px;
    height: 28px;
    width: 28px;
    position: relative;
    top: 0;
    left: 0px;
    float: none;
    margin: 0 auto;
    text-align: center;
}

#library-tbody .name .pdf:before {
    display: inline-block;
    content: ' ';
    background-image: url('../img/file-pdf-o.svg');
    background-size: 16px 16px;
    height: 16px;
    width: 16px;
    position: relative;
    top: 0;
    left: 0px;
    margin: 0 9px 0px 0;
}

.pdf:before {
  display: block;
  content: ' ';
  background-image: url('../img/file-pdf-o.svg');
  background-size: 28px 28px;
  height: 28px;
  width: 28px;
  position: relative;
  top: 0;
  left: 0px;
  margin: 0 auto;
}


  .noChartData .addToChart {background:#ee2828;}

.pagination li {
  display:inline-block;
  padding:5px;
}


.no-watch-list-folders {
  background: #ffe8e8;
  padding: 5px;
}

/*==============================================================
  NOT SURE
  ============================================================== */


.error .content h2 {color: #fff;
font-size: 50px;
border: 1px dashed;
width: 495px;
margin: 0 auto 27px auto;}
.error .content p {text-align: center;
font-size: 16px;
line-height: 1.5em;
margin: 0 auto;
max-width: 700px;}

.error .intro h1 {
  font-size: 35px;
  margin: 0 0 0.5em 0;
  line-height: 35px;
}

#errorDetails {
  clear: both;
  max-width: 619px;
  display: block;
  margin: 10px auto;
  text-align: center;
  font-size: 18px;
  border: 1px solid;
  padding: 10px;
}

.errorwrap {
  width: 622px;
  border: 1px dashed red;
  padding: 10px;
  margin: 0 auto;
  background: red;
  color: #fff;
}

#errorMessage {display: none;}

.findProducts {display:none;}

.subNav { }
.subNav ul {float:right;}
.subNav ul li {display: inline-block; vertical-align: middle;}
.button-as-href,
.subNav ul li a {
  font-size: 14px;
  color: #FFF;
  text-decoration: none;
  width: 56px;
  display: block;
}

.button-as-href:focus,
.button-as-href:hover,
.subNav ul li a:hover,
.subNav ul li a:hover {

  text-decoration: underline;
}

.button-as-href {
    background: transparent;
    border: transparent;
}


  form .searchResults {
    position: absolute;
    background: #fff;
    left: 0;
    z-index: 3;
    border-bottom: 3px solid rgba(0,0,0,0.1);
    border-right: 3px solid rgba(0,0,0,0.1);
    width: 99%;
    display: none;
}



  form .searchResults li {
    border-bottom:1px solid #d1d6da;
    padding: 6px 3px;
    display: block;

  }

  .no-cusip-results {border:1px solid red;}

  table tr th {position: relative;}

  table tr th[data-id="nosort"] {
    cursor: default;
  }

  table tr th[data-id="nosort"] span.uparrow, table tr th[data-id="nosort"] span.downarrow {display: none;}


.uparrow {
  border: 4px solid transparent;
  border-bottom-color: #55565a;
}

.downarrow {
  border: 4px solid transparent;
  border-top-color: #55565a;
  margin-top: 7px;
}

.uparrow, .downarrow {
  height: 0;
  width: 0;
  display: inline-block;
  margin-left: 7px;
}



/*=========================================================================
  BOOKBUILDING
  =========================================================================*/

.bbfilterBox {background:#58718d; padding: 27px 20px; margin-bottom:27px;}
.bbfilterBox label {
  min-width: 124px;
  display: inline-block;
  color: #fff;
}

.bbfilterBox h3 {font-size: 18px; color: #fff;}
.bbfilterBox button {display: block;}

.bbSummary .selectbyDate {padding-left:0;}

.addOrder {background:#58718d; padding: 27px 20px; margin-bottom:27px;}
.addOrder label {
  min-width: 124px;
  display: inline-block;
  color: #fff;
}

.addOrder button {display: block;}

.selectDistributor {
  border-right: 1px solid #4c6178;
  width: 33%;
  display: inline-block;
  vertical-align: top;
}

.addOrder .form-group,

.selectbyDate {width: 19%;
display: inline-block;
border-right: 1px solid #4c6178;
padding: 0 4%;}
.selectbyDate #issueDateFromDiv,
.selectbyDate #issueDateToDiv {display: inline-block;}

.searchByCusip {
  width: 29%;
  display: inline-block;
  vertical-align: top;
  padding: 0 4%;}

.totals {background:#ebecef; margin-bottom:27px;}
.totals div {display: inline-block; padding:9px 10px;}
.totals div span {font-weight: bold;}

.bookBuildingDeals .setUp,
.bookBuildingDeals .panel, .bookbuilding .panel {background:#ebecef; margin: 27px 0; padding: 27px; position: relative;}
.bookBuildingDeals .panel .closeBookWrap {
  float: right;
  width: 27.5%;
  border:1px solid #A5C9F3;
  border-radius: 4px;
  text-align: center; padding: 1.3% 0;}
.bookBuildingDeals .panel .closeBookWrap svg,
.bookBuildingDeals .panel .closeBookWrap img {width:36px;display: inline-block;vertical-align: middle;}
.bookBuildingDeals .panel .closeBookWrap input {
  display: inline-block;
  vertical-align: middle;
  border:none;
  color: #A5C9F3;
  background:none;}
.bookBuildingDeals .panel .closeBookWrap:hover input,
.bookBuildingDeals .panel .closeBookWrap:focus input
 {color: #fff;}
.bookBuildingDeals .summary table {width: 68.5%; float:left; border-right: 1px dotted #d1d6da;}
.bookBuildingDeals table {width:100%; }
.bookBuildingDeals table td {border:none;}
.bookBuildingDeals table tr {padding:0 10px;}
.bookBuildingDeals table tr .name {width:210px;}
.bookBuildingDeals .productEnable {border-bottom:1px dotted #d1d6da; padding-bottom:9px; margin-bottom: 27px;}
#tab4.bookbuilding .content {max-width:1250px;}
.bookBuildingDeals .panel .product .form-group {
  width: 31.5%;
float: left;
margin-right: 1.3%;
border-right: 1px dotted #d1d6da;
}
.bookBuildingDeals .panel .product .form-group.gtwo {margin-right: 4%; padding-right: 4%;}
.bookBuildingDeals .panel .product .form-group:last-of-type {border:none; margin-right:0; width: 27%;}
.bookBuildingDeals .panel .form-group .col-md-2 label {width: 164px; display: inline-block; font-size: 15px;}
.bookBuildingDeals .panel .form-group .col-md-2 input {display: inline-block; width: 144px;}
.bookBuildingDeals .panel .form-group .col-md-2 {margin-bottom:9px;}
.bookBuildingDeals .panel .form-group.book .col-md-2 label {width:93px;}

.bookBuildingDeals .panel h3,
.bookbuilding #bbOrderView h3 {
  border-bottom:1px dotted #d1d6da;
  text-align: left;
  font-size: 27px;
}

.bookbuilding .tab-pane > h3,
.bookbuilding .tab-pane .bookBuildingDeals > h3 {
  text-align: left;
  font-size: 27px;
  margin-top: 27px;
}


.bookbuilding .product-summary-container{
  background: #ebecef;
  margin: 27px 0;
  padding: 27px;
  position: relative;
}

.bookbuilding #order-summary .alter-selected {margin-top: 18px;}

.bookbuilding .product-summary-container .productwrap {
  float:left;
  width:78%;
  min-width: 863px;
}

.bookbuilding #order-summary .order-summary-wrap {margin-bottom: 18px;}

.bookbuilding #order-summary ul {width: 100%;}

.bookbuilding .audit-trail-wrap h4 {margin-bottom:0; text-align: left;}

.bookbuilding .product-summary-container ul:last-of-type {margin-right:0;}

.bookbuilding .product-summary-container ul li,
.bookbuilding #order-summary ul li {
  display: inline-block;
  width: 100%;
}

.bookbuilding .product-summary-container  #documentsPDF {
  float:right;
  width:20%;
  height: 145px;
  overflow-x: hidden;
  overflow-y: auto
}

.bookbuilding .product-summary-container  #documentsPDF  ul {
  width:100%;
}

.bookbuilding .product-summary-container .orders {margin-bottom: 18px;}


.bookbuilding .product-summary-container ul li span.label,
.bookbuilding #order-summary ul li span.label {
  display: inline-block;
  width: 185px;
  height:22px;
  float:left;
}


.bookbuilding .table thead th[data-order="countOfClosed"] {min-width:40px; width:40px;}

.bookbuilding .table thead th[data-order="countOfConfirmed"],
.bookbuilding .table thead th[data-order="countOfAcknowledge"],
.bookbuilding .table thead th[data-order="countOfCancelled"] {min-width:20px; width:20px;}

.bookbuilding .table thead th[data-order="countOfClosed"] span,
.bookbuilding .table thead th[data-order="countOfConfirmed"] span,
.bookbuilding .table thead th[data-order="countOfAcknowledge"] span,
.bookbuilding .table thead th[data-order="countOfCancelled"] span,
.bookbuilding .table thead th[data-order="distView"] span  {display: none; cursor:default;}

#productList, .searchListDropDown {
position: absolute;
z-index: 3;
top: 58px;
height: auto;
left: 137px;
width: auto;
background: #fff;
box-shadow: 5px 5px 0px #ccc;
min-width: 160px;
max-height: 170px;
overflow-y: scroll!important;;
overflow: hidden;
-webkit-transition: height 500ms ease-in-out;
  -moz-transition: height 500ms ease-in-out;
  -ms-transition: height 500ms ease-in-out;
  -o-transition: height 500ms ease-in-out;
  transition: height 500ms ease-in-out;
}


.tablewrapper {
  position: relative;
}


.tablewrapper #productList, .searchListDropDown {
  left: 107px;
  top: 27px;
}

#productList li, .searchListDropDown li  {
  border-bottom: 1px solid #d1d6da;
  padding: 6px;
  cursor: pointer;

}

#productList li:hover,
#productList li:focus,
.searchListDropDown li:hover,
.searchListDropDown li:focus {
  background:#ebecef;
}

.smalltext {font-size: 12px; font-style: italic; display:block; margin-bottom:9px; }
.mandatory {color:#ec6060; }

#allUsers,
#enabledUsers,
#mapView {min-height:300px !important; width: 100%;}

.btn-default {
background-color: #A5C9F3;
min-width: 50px;
border: none;
padding: 0 2%;
cursor: pointer;
color: #233545;
line-height: 2.2em;
font-size: 16px;
text-align: center;
text-decoration: none;
border-radius: 4px;}

.permissionedClients div {display: inline-block; vertical-align: top;}
.permissionedClients div.allButtons input, .permissionedClients div label  {display:block; font-size: 14px;}

.permissionedClients .allUsers {width: 31.4%;}
.permissionedClients .allButtons {padding: 1.8%;}
.permissionedClients .allButtons input {margin-bottom:27px;}
.permissionedClients .enableUsers {width: 28.8%; margin-right:1%;}
.permissionedClients .mapView {width:30%;}

#enableBookBuilding {color:#aada60; visibility: visible;}

#currency,
#versionId {border:none; background:transparent;}

.buttonsResults {
  width:100%;
  clear: both;
}

input#issueDateTo {
  margin-bottom: 10px;
}


/*=========================================================================
  ALL
  ========================================================================*/


  input[type="text"]:disabled {
    background: #dfdede;
    cursor:not-allowed;  }

::-webkit-scrollbar {
    width: 12px;
}
::-webkit-scrollbar-track {
    background-color: #eaeaea;
    border-left: 1px solid #ccc;
}
::-webkit-scrollbar-thumb {
    background-color: #ccc;
}
::-webkit-scrollbar-thumb:hover {
  background-color: #aaa;
}

  .clearbutton {
border: 1px solid #666666;
background-color: #ffffff;
color: #55565a;
display: block;
font-size: 1.3em;
margin: 0 0.25rem 0.6rem 0;
padding: 15px 40px;
white-space: nowrap;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
text-decoration: none;
margin: 0 auto;
}

  .products {
    padding: 26px 0;
    background-size: cover;
    position: relative;
    background-attachment: fixed;
  }

  .home.US .recentproducts {display: none;}

  .products .content .ui-tabs-panel,
  .content .tab-pane .tableWrap,
  #configure_product,
  .bookBuildingDeals .panel,
  .bookbuilding .panel { overflow-y: auto;}

  #configure_product .panel-body,
  .bookBuildingDeals .panel .panel-body {min-width: 1010px;}

  .informationWrap .table th {line-height: 2.4em;}#bcc2c9
  .informationWrap .table th, .informationWrap .table td {text-align: left; padding: 11px 8px;}
  .placeholderMarketing {margin: 0 auto; width:1410px; display: block;}
  .dark {background:#f8f8f9; padding: 95px 0 90px;}
  .businessGrouping {padding: 95px 0 90px;}

  .businessGrouping ul li { text-align: center; text-transform: uppercase; }
  .businessGrouping a {
    text-decoration: none;
    font-size: 18px;
    display: block;
    margin: 0 10%;
    border: 4px double #233545;
    padding: 20px;
    text-align: center;
    min-height: 90px;
    color: #233545;
    border-radius: 4px;
  }
  .businessGrouping a:hover,
  .businessGrouping a:focus {
      background: none repeat scroll 0 0 #58718d;
      color: #fff;
      border: 4px double;
  }

  .businessGrouping a img {
    width: 64px;
    display: block;
    margin: 9px auto;
  }

  .dark .content h2:first-child span,
  .dark .headerTitle span {background: #f8f8f9; }
  .decal {width: 32px;
height: 32px;
position: absolute;
top: 58px;
left: 116px;
background: #ffffff;
border-radius: 100px;
z-index: 2;}

/*=========================================================================
  footer
  ========================================================================*/

  footer {
    background: #233545;
    color:#fff;
    font-size: 12px;
  }

  footer .disclamer .content {padding: 95px 0 90px;}
  footer .disclamer .content h2:first-child span {background: #233545;}

  footer .disclamer .content h2:first-child {color:#fff; }

  footer a {color: #A5C9F3;}

  #logo-img-wrapper{
    position: relative;
    border: 1px solid transparent;
    padding-right: 10px;
  }


/* =========================================================================
  Landingpage
  ========================================================================== */
.enterSite {max-width: 875px; margin: 109px auto 0 auto;}

.enterSite .country-select-no-login,
.enterSite .login-text {

  text-align: center;
  margin:10px 0;
  font-size: 14px;


}

.enterSite p.regtext {
  text-align: center;
  clear: both; padding-top: 27px;}

.orText {
  display: block;
  width:100px;
  margin: 3.3% 0 0 0;
  padding:0;
  text-align: center;
}

.marginTop0 {
    margin-top: 0;
}

.intro .content .enterSite a.bigbutton:hover,
.intro .content .enterSite a.bigbutton:focus,
.intro .content .enterSite a.bigbutton.hover {background:#A5C9F3; color: #42434A;}

.intro p, .enterSite {opacity:0;}

#lnkRegister {
    display: inline;
    color: #A5C9F3;
    text-decoration: underline;
    padding: 5px;
}

#lnkRegister:hover,
#lnkRegister:focus {
  text-decoration: underline;
}


.login-box {
  margin:0 auto;
  font-family: amplitude-light, 'Arial Narrow', arial;
  position: relative;
  max-width:401px;
}


.login-box #actions a {color: #58718d;}

.login-box .login-label {
    text-align: left;
    width: 100%;
    font-size: 24px;
}

a.loginButton {
  text-align: center;
font-size: 27px;
text-decoration: none;
line-height: 2.2em;
    border-radius: 2px;
}



.loginButton {
background:#A5C9F3;
border: none;
height: 65px;
padding: 0;
width: 120px;
cursor: pointer;
color: #233545;
line-height: 1em;
margin: 0;
display: block;
font-size: 27px;
}


a.loginButton:hover,
a.loginButton:focus {
  text-decoration: none;
  background-color: #58718d;
  color: #fff;
}

.loginButton:hover,
.loginButton:focus {
    background-color: #A5C9F3;
    outline: 1px dotted #115883;
    outline-offset: 3px;
}

#regDistForm {
  width: 960px;
  position: relative;
  height: 601px;
  overflow-x: hidden;
  overflow-y: auto;
}


#regDistForm legend {
border: 0;
padding: 0;
white-space: normal;
border-bottom: 1px solid #666;
width: 443px;
padding-bottom: 18px;
margin-bottom: 27px;
font-size: 27px;
}
.error {
  display: block;
  color: red;}

#regDistForm .formdata ul li {margin-bottom: 18px;}

#regDistForm .formdata ul li.existUser label {
width: 442px;
}

#regDistForm .formdata ul li label {
width: 170px;
display: block;
float: left;
}

#regDistForm .formdata ul li .label {
width: 170px;
display: block;
float: left;
}


#regDistForm .formdata ul li label.small {
width: auto;
display: inline-block;
float: none;
}



#regDistForm .formdata ul li input {width:250px; padding: 10px;}
#regDistForm .formdata ul li #externalUser input {width:22px;}

/*==========================================================================
  Homepage
  =========================================================================*/

.featuredProducts, .findProducts {
padding: 54px 0 54px;
}

.bigSearch {}

  /*
 *  Core Owl Carousel CSS File
 *  v1.3.3
 */

/* clearfix */
.owl-carousel .owl-wrapper:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
/* display none until init */
.owl-carousel{
  display: none;
  position: relative;
  width: 100%;
  -ms-touch-action: pan-y;
}
.owl-carousel .owl-wrapper{
  display: none;
  position: relative;
  -webkit-transform: translate3d(0px, 0px, 0px);
}
.owl-carousel .owl-wrapper-outer{
  overflow: hidden;
  position: relative;
  width: 100%;
}
.owl-carousel .owl-wrapper-outer.autoHeight{
  -webkit-transition: height 500ms ease-in-out;
  -moz-transition: height 500ms ease-in-out;
  -ms-transition: height 500ms ease-in-out;
  -o-transition: height 500ms ease-in-out;
  transition: height 500ms ease-in-out;
}

.owl-carousel .owl-item{
  float: left;
}
.owl-controls .owl-page,
.owl-controls .owl-buttons div{
  cursor: pointer;
}
.owl-controls {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.owl-theme .owl-controls {
margin-top: 27px;
text-align: center;
}
/*----- Implemented currently----------*/
.owl-prev,.owl-next {display: none;}
.owl-prev img,.owl-next img {height:300px;}

.owl-prev {left:-17%; top:38%; height:235px; width:150px;  outline:none;}
.owl-next {right:-17%; top:38%; height:235px; width:150px; outline:none;}

.owl-prev:hover,
.owl-prev:focus,
.owl-next:hover,
.owl-next:focus {


    border:2px dotted #4c6178;

}

/*----- end ----------*/

/* Styling Pagination*/

.owl-theme .owl-controls .owl-page{
  display: inline-block;
  zoom: 1;
  *display: inline;/*IE7 life-saver */
}
.owl-theme .owl-controls .owl-page span:focus{
    outline: none;
}
.owl-theme .owl-controls .owl-page span{
  display: block;
  width: 20px;
  height: 20px;
  margin: 5px 7px;
  filter: Alpha(Opacity=50);/*IE7 fix*/
  opacity: 0.5;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  border: 1px solid #4c6178;
}
.owl-theme .owl-controls .owl-page span i {
    opacity: 0;
    font-size: 1.4em;
    color:#4c6178;
}
.owl-theme .owl-controls .owl-page.active span i {
    opacity: 1;
    font-size: 1.5em;
}

.owl-theme .owl-controls .owl-page.active span{
  filter: Alpha(Opacity=100);/*IE7 fix*/
  opacity: 1;
  border: 0px solid #4c6178;
}
.owl-theme .owl-controls.clickable .owl-page:hover span{
    filter: Alpha(Opacity=100);/*IE7 fix*/
    opacity: 1;
}

/* mouse grab icon */
.grabbing {
    cursor:url(grabbing.png) 8 8, move;
}

/* fix */
.owl-carousel  .owl-wrapper,
.owl-carousel  .owl-item{
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility:    hidden;
  -ms-backface-visibility:     hidden;
  -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
}




  table a {color: #0000ee; text-decoration: none;}

  .featuredProducts .fproduct ul li .title {display: block; font-size:27px;}

  .featuredProducts .fproduct h3 {clear: both;}

  #smallSlider {margin: 108px 0 0 0;}

#smallSlider a {
text-decoration: none;
font-size: 18px;
display: block;
margin: 0 10%;
padding:40px 20px 0 20px;
text-align: center;
min-height: 90px;
border: 4px double;
color: #233545;
border-radius: 4px;
overflow: hidden;
}

#smallSlider a:hover,
#smallSlider a:focus {
  text-decoration: underline;
  background:#58718d;
  color: #fff;
}

/*==========================================================================
  education
  =========================================================================*/


  #supplements .owl-item {
    border:1px solid #bcc2c9;
    margin:0;
    min-height: 238px;
    -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -ms-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;}


  .product li:hover, #supplements .owl-item:hover {
    background:#f8f8f9;
    -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -ms-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;}

  .product li:nth-child(3n) {margin-right:0px;}

  .product li h3, #supplements .owl-item h3 {font-size: 27px; line-height: 1.2em;}

  .product li h3,
  .product li p,
  #supplements .owl-item h3,
  #supplements .owl-item p {text-align: center;}

  .product li h3,
  #supplements .owl-item h3 {

    text-overflow:ellipsis;
    width: 90%;
    margin: 27px auto 27px auto;
    font-size:18px;}

  .product li p.pdf,
  .owl-item li p.pdf {
    max-height: 29px;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 68px;
    margin: 1em auto;
    font-size: 20px;
  }

  .product li .downloadbutton,
  #supplements .owl-item .downloadbutton {background-color: #A5C9F3;
border: none;
height: 65px;
padding: 0;
width: 250px;
cursor: pointer;
color: #233545;
line-height: 2.2em;
margin: 0 auto;
display: block;
font-size: 27px;
text-align: center;
text-decoration: none;
border-radius: 4px;}


.product li .downloadbutton:hover,
.product li .downloadbutton:focus,
#supplements .owl-item .downloadbutton:hover,
#supplements .owl-item .downloadbutton:focus,
.btn-default:hover,
.btn-default:focus {
    background-color: #4c6178;
    color: #fff;
    outline-offset: 5px;
    outline: thin dotted #000000;
}


.blueBox .btn-default:hover,
.blueBox .btn-default:focus {background-color:#4c6178; color: #fff;}





  .product li img,
  #supplements .owl-item img {
    display: block;
    margin: 27px auto 0 auto;
  border: 1px solid #bcc2c9;
padding: 6px;
background:#fff;
border-radius: 4px;
box-shadow: 0px 5px 1px #d2d2d2; }


/*===================================================================
  Product page
  ===================================================================*/

  .productName {
    width: 79%;
    font-size: 30px;
    line-height: 1.3em;
    text-align: left;}

  .bidAsk {
    background:#58718d;
    color:#FFF;
    padding: 54px 60px;
    margin-bottom: 54px;
    border-radius: 4px;}

  .bidAsk ul li h4 {color: #fff; margin-bottom: 0;}

  .subLinks {
    width: 214px;
    height: 50px;
    float:right;
    border-left: 1px solid #D8D4CA;
  }

  .subLinks li { display: inline-block; width:19%; margin-left:20px; vertical-align: top;}
  .subLinks li a {display: block;}
  .subLinks li a svg {width:44px; height:44px;}
  .history-icon, .printer-icon, .add-icon {fill: #A5C9F3;}

  .bidAsk ul li {
    float: left;
    width:33.1%;
    text-align: center;
    border-right: solid 1px #4c6178;
  }

  .bidAsk ul li svg {
    height: 64px;
    display: inline-block;
    width: 64px;
  }

  .bidAsk ul li:last-child {border-right: none;}

  .bidAsk ul li span {
    font-size: 64px;
    color: #fff;
    display: block;
    line-height: 64px;
  }

  #chart {padding: 2%; background:#fafafa; border-radius: 4px;}

  .informationWrap {margin: 54px 0;}

  .documents {clear:both; padding-top:54px; border-top: 1px dashed #bcc2c9;}
  #nonUS .documents {border-top: none; padding-top:0;}

  .blueBox h3 {font-size: 18px; margin-bottom: 9px; line-height: 18px;}

  .blueBox ul li:hover,
  .blueBox ul li:focus,
  #order_filter ul li.selected {background: #405163;}

  .blueBox ul li {
  display: block;
  padding: 2% 0% 2% 0%;
  margin-bottom:0!important;
  }

  .blueBox .issueDate,
  .blueBox .maturityDate {margin-bottom: 18px;}

  .blueBox .issueDate #issueDateFromDiv,
  .blueBox .issueDate #issueDateToDiv,
  .blueBox .maturityDate #maturityDateFromDiv,
  .blueBox .maturityDate #maturityDateToDiv {float:left; width: 47%;}

  .blueBox .issueDate #issueDateFromDiv,
  .blueBox .maturityDate #maturityDateFromDiv {margin-right:10px;}

  .blueBox .issueDate #issueDateFromDiv input,
  .blueBox .issueDate #issueDateToDiv input,
  .blueBox .maturityDate #maturityDateFromDiv input,
  .blueBox .maturityDate #maturityDateToDiv input {width:100%;}

  .blueBox #payoffTypeSearch,
  .blueBox #productTypeSearch,
  .blueBox #principalProtectionSearch,
  .blueBox #channelSearch,
  .blueBox #offeringTypeSearch,
  .blueBox #regionOfExposureTypeSearch,
  .blueBox #currencyTypeSearch,
  .blueBox #channelSearch {
    display: none;
  }

  .blueBox .assetClassList ul,
  .blueBox #payoffTypeSearch,
  .blueBox #productTypeSearch,
  .blueBox #offeringTypeSearch,
  .blueBox #regionOfExposureTypeSearch,
  .blueBox #currencyTypeSearch,
  .blueBox #channelSearch,
  .blueBox #principalProtectionSearch,
  .blueBox .dropdown-list {
    background: #4c6178;
    height: 197px;
    padding: 9px;
    overflow-y: scroll;
    }

    .assetClassList ul li.active,
    .productTypes ul li.active,
    #channelSearch li.active,
    .payoffType ul li.active,
    #principalProtectionSearch li.active {background:#405163;}

    .mobile-table {
width: 100%;
height: 400px;
overflow: hidden;
position: relative;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-ms-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}

/* ==============================================================
Mobile only stuff
===============================================================*/

.mobile-table .left,
.mobile-table .right {
width: 80px;
height: 80px;
position: absolute;
background:rgba(232,129,13,0.7);
top: 46%;
z-index: 2;
display: block;
text-align: center;
line-height: 3em;
font-size: 27px;
color: white;
cursor: pointer;
}

.mobile-table .left {left:0;}
.mobile-table .right {right:0;}

.mobile-table {
margin-bottom: 27px;
}


.mobile-table {
  width:100%;
  height: 400px;
  overflow: hidden;
  position: relative;
    -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -ms-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;
}


.mobile-table .table {
  position: absolute;
    -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -ms-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;


}

  /*======================================================================
    Resources
    =====================================================================*/

  .currentDate {width: 507px; margin:0 auto 27px auto; display: block; background:#ebecef; border-radius: 4px;}
  .currentDate a {
    font-size: 27px;
    text-decoration: none;
    text-align: center;
    display: block;
    float: left;
    width: 32.9%;
    border-right: 1px dashed #bcc2c9;
    border-bottom:2px solid #ebecef;
    position: relative;
  }

  .currentDate a:last-of-type {border:none;}

  .currentDate a:hover,
  .currentDate a:focus {border-bottom:2px solid; text-decoration: none; cursor: pointer;}

  .currentDate .year:after,
  .currentDate .month:after {
    content: "";
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #4c6178;
    top: 18px;
    right: 20px;
    position: absolute;
  }

  .monthDates,
  .yearDates {
    display: none;
    background: #fdfdfd;
    padding: 54px 60px;
    margin-bottom: 27px;
    font-size: 16px;
  }



  .getDates {}


  .showing {display: block;}

.monthDates li,
.yearDates li {
float: left;
display: block;
border: 1px solid #D8D4CA;
padding: 1.1%;
cursor: pointer;
margin-right: 3%;
width: 19%;
margin-bottom: 9px;
}

.monthDates li:hover,
.monthDates li:focus,
.yearDates li:focus,
.yearDates li:hover,
li:hover li:focus {
background: #58718d;
color: #fff;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-ms-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}


@font-face {
  font-family: "amplitude-regular";
  src: url("fonts/amplitude/Amplitude-Regular/8b10efc3-e37f-468c-9326-3f261bc2b6e9-2.eot");
  src: url("fonts/amplitude/Amplitude-Regular/8b10efc3-e37f-468c-9326-3f261bc2b6e9-2.eot?") format("embedded-opentype"),
       url("fonts/amplitude/Amplitude-Regular/8b10efc3-e37f-468c-9326-3f261bc2b6e9-3.woff") format("woff"),
       url("fonts/amplitude/Amplitude-Regular/8b10efc3-e37f-468c-9326-3f261bc2b6e9-1.ttf") format("truetype"),
       url("fonts/amplitude/Amplitude-Regular/8b10efc3-e37f-468c-9326-3f261bc2b6e9-4.svg#web") format("svg");
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: "amplitude-medium";
  src: url("fonts/amplitude/Amplitude-Medium/5c91d7e8-9155-43e0-a01c-f4c8b4ab0369-2.eot");
  src: url("fonts/amplitude/Amplitude-Medium/5c91d7e8-9155-43e0-a01c-f4c8b4ab0369-2.eot?") format("embedded-opentype"),
       url("fonts/amplitude/Amplitude-Medium/5c91d7e8-9155-43e0-a01c-f4c8b4ab0369-3.woff") format("woff"),
       url("fonts/amplitude/Amplitude-Medium/5c91d7e8-9155-43e0-a01c-f4c8b4ab0369-1.ttf") format("truetype"),
       url("fonts/amplitude/Amplitude-Medium/5c91d7e8-9155-43e0-a01c-f4c8b4ab0369-4.svg#web") format("svg");
  font-style: normal;
  font-weight: normal;
}


@font-face {
  font-family: "amplitude-light";
  src: url("fonts/amplitude/Amplitude-Light/ee553ccf-2d0c-4e23-9d9d-1067a902018a-2.eot");
  src: url("fonts/amplitude/Amplitude-Light/ee553ccf-2d0c-4e23-9d9d-1067a902018a-2.eot?") format("embedded-opentype"),
       url("fonts/amplitude/Amplitude-Light/ee553ccf-2d0c-4e23-9d9d-1067a902018a-3.woff") format("woff"),
       url("fonts/amplitude/Amplitude-Light/ee553ccf-2d0c-4e23-9d9d-1067a902018a-1.ttf") format("truetype"),
       url("fonts/amplitude/Amplitude-Light/ee553ccf-2d0c-4e23-9d9d-1067a902018a-4.svg#web") format("svg");
  font-style: normal;
  font-weight: normal;
}


@font-face{
  font-family:CelesteWeb;
  src:  url("fonts/CelesteWeb/c.eot");
  src:  url("fonts/CelesteWeb/c.eot?") format("embedded-opentype"),
      url("fonts/CelesteWeb/c.woff") format("woff"),
      url("fonts/CelesteWeb/c.ttf") format("truetype"),
      url("fonts/CelesteWeb/c.svg#web") format("svg");
  font-style:normal;
  font-weight:400
}
@font-face {
  font-family:CelesteWeb-Ita;
  src:  url("fonts/CelesteWeb-Ita/ci.eot");
  src:  url("fonts/CelesteWeb-Ita/ci.eot?") format("embedded-opentype"),
      url("fonts/CelesteWeb-Ita/ci.woff") format("woff"),
      url("fonts/CelesteWeb-Ita/ci.ttf") format("truetype"),
      url("fonts/CelesteWeb-Ita/ci.svg#web") format("svg");
  font-style:italic;
  font-weight:400
}

/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {background: #ffffff;}

html,button,input,select,textarea {
  color: #55565a;
  font-family: "amplitude-light","Arial Narrow",arial;
}

input,select,textarea {border: 1px solid #a4a4a4; border-radius: 2px; padding: 3px;}

header, nav, section, article, aside, footer {display:block;}


body {
  font-family: "amplitude-light","Arial Narrow",arial;
  font-size: 1em;
  line-height: 1.4;
}

::-moz-selection {
    background: #A5C9F3;
    text-shadow: none;
}

::selection {
    background: #A5C9F3;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

i, cite, em, var, address, dfn {
font-style: normal;
}

/* ==========================================================================
  Chrome Frame prompt
========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


/***************************************************************************
SCROLL BAR
***************************************************************************/

.selectList::-webkit-scrollbar {
    width: 30px;
}

.selectList::-webkit-scrollbar-track {
  background: #db7d14;


}

.selectList::-webkit-scrollbar-thumb {
  background: #e48214;
  border-top:2px solid #d5770e;
  border-bottom:2px solid #d5770e;
  border-right:1px solid #d5770e;
  border-left:1px solid #d5770e;


}

/************************************************************************
  TYPOGRAPHY
***********************************************************************/
h1,h2, h3,h4,h5,h6 {
  font-weight:300;
  text-align: center;
  margin-top:0;
  color: #233545;
  position:relative;
  font-family: CelesteWeb, Georgia, "Times New Roman", Times, serif;}


.content h2:first-child, .headerTitle {text-align: center; margin: 0 auto 39px;}
.content h2:first-child span, .headerTitle span {background: #ffffff; z-index: 1; position: relative; padding: 0 40px;}

.headerTitle:after {
  background: none repeat scroll 0 0 #bcc2c9;
  bottom: 50%;
  content: "";
  height: 1px;
  left: 0;
  margin-top: 4px;
  position: absolute;
  right: 0;
  top: 50%;
  width: 100%;
}


a {
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -ms-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 1000ms cubic-bezier(0.275, 0.100, 0.220,1);
    }

a:hover {color:#58718d; text-decoration: underline;
    -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -ms-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;}

menu, ol, ul {
    padding: 0;
    margin:0;
}


ul li {list-style-type: none;}

.lightOrange {background:#ffffff; padding-top: 27px}

.current a {color: #A5C9F3!important;}
.current a:hover,
.current a:focus {color: #fff!important;}

/* ===========================================================================
Content
=============================================================================*/

.content,
.breadcrumb,
.bookbuilding .content,
.breadcrumb .breadcrumb {
  max-width: 90%;
  position: relative;
  margin:0 auto;
  padding: 0;
  }

.bookbuilding .products .content {padding: 27px 40px;}

.bookbuilding header .content, .bookbuilding .products .content:first-child  {max-width:1170px;}
.sectionPadding {padding: 90px 0;}

/* ==========================================================================
  header
========================================================================== */

.landingPage header {padding: 9px 0 9px;}

header { background: #1c2a36; min-height: 3em;}

.fixedHeader .content { padding: 8px 0 0;}
.fixedHeader .content ul li a {color:#686868;}
.fixedHeader .content #search {position: absolute; right: 0; border: 1px solid #CCCCCC;}

header #logo a {color: #fff; text-decoration: none; font-size:18px; line-height: 27px;}
.fixed #logo a {color:#686868;}


.fixed {position:fixed; z-index: 3; background:#fff; width:100%; box-shadow: 0 0px 15px rgba(0, 0, 0, 0.5);}
.fixed .mobileNav {color:#686868;}

.breadcrumb { border-bottom: 1px solid #D8D4CA;
    font-size: 12px;
    margin-bottom: 0px;
    padding: 32px 0;
    max-width:100%;}

.fixedHeader .mainNav ul li a:hover,
.fixedHeader .mainNav ul li a:focus {background: #fff; color:#A5C9F3;}

.mainNav {display:none;}
.globalSearchBox {position: relative; background: #fff;}
.mobileNav {
    display:block;
    text-decoration: none;
    font-size: 28px;
    width: 28px;
    color:#fff;
    position: absolute;
}

.mobileNav:hover,
.mobileNav:focus
   {color: #A5C9F3;}


.mainNav ul {margin:0; padding:0;text-align: center;}

.mainNav ul li a {
  display: block;
  line-height: 1em;
  padding: 0px 10px;
  color: #fff;
  text-decoration: none;
 font-family: "amplitude-light","Arial Narrow",arial;
 font-size: 15px;
}


.mainNav ul li a:hover,
.mainNav ul li a:focus {}

/* ==========================================================================
  Large dropdown
========================================================================== */

.indicieMaggaDrop, .familyMaggaDrop {
background:#6d6e71;
color: #fff;
padding: 54px 60px;}

.familyMaggaDrop .plan {width:16.9%; float:left; margin-right: 40px;}
.familyMaggaDrop .plan:last-child {margin-right:0;}

.familyMaggaDrop .plan h3 {
  padding: 3px 0;
  font-size: 18px;
  text-align:center;
  border: 1px solid #98989a;
  color: #fff;
  text-align: center;}


.familyMaggaDrop .plan ul {width:100%;}
.familyMaggaDrop .plan ul li {float:none; width:100%; border-bottom: 1px solid #98989a;}
.familyMaggaDrop .plan ul li:last-child {border-bottom: none;}
.familyMaggaDrop .plan a {font-size: 12px; padding: 9px 0; text-transform: none;}


/* ===========================================================================
Intro
============================================================================*/

.home .intro h1 {
    font-size: 26px;
    line-height: 1em;
    border-bottom: 4px double;
    padding-bottom: 18px;
    max-width: 90%;
    margin: 0 auto 18px auto;
}


.intro h1, .intro p {color:#fff;}
.intro .currentOpeningsButton {
  margin: 0 auto;
  padding: 15px 40px;
  display:block;
  }

/* video stuff */

#bgvid {
position: fixed; right: 0; bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
background: url("/nexus/static/img/test.jpg") no-repeat;
background-size: cover;
}

video { display: block; }



/* ===========================================================================
main content
============================================================================*/

.blueGradBack {
  padding-left:0px!important;
  padding-right:0px!important;
  background: #ebecef;
}



/* ===========================================================================
main chart Section
============================================================================*/

.mainChart, .find-fund, .orangeBackground {padding: 27px 0 27px;}
.mainChart, .find-fund {background: #ffffff;}

/* ===========================================================================
Information box
============================================================================*/

.blueBox .smallTab {display:none;}

.blueBox.fixedBlueBox {
  position: fixed;
  z-index: 2;
  top:-50px;
  left:auto;
  width: 0%;
  width:1050px!important
}


.blueBox.fixedBlueBox .informationwrap, .blueBox.fixedBlueBox .buttonWrap {
  display:none;
    -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -ms-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

.blueBox.fixedBlueBox .smallTab {
display: block;
position: absolute;
bottom: -48px;
text-decoration: none;
background: #A5C9F3;
padding: 27px 27px 16px 27px;
color:#fff;
}

.fixedBlueBox .blueBoxWrap {
  display:none;
   -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -ms-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

.fixedBlueBox.blueBoxhover {
   top:55px;
   cursor: pointer;
    -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -ms-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;
}


.fixedBlueBox.blueBoxhover .blueBoxWrap {
  display:block;
   -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -ms-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

.fixedBlueBox.blueBoxhover .informationwrap, .fixedBlueBox.blueBoxhover .buttonWrap {
  display:block;
   -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -ms-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

div.blueBox.indexInformation div.indexInfo > ul.selectList {
background: #7699c4;
padding: 9px 0;
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -ms-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

div.blueBox.indexInformation div.indexInfo > ul.selectList li {
background: #fff;
padding: 9px 13px;
color: #336699;
font-weight: normal;
margin-right: 0%;
}

div.blueBox.indexInformation div.indexInfo > ul.selectList li {
background: #d5770e;
color: #fff;
border: none;
margin-bottom: 0px;
 -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -ms-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;
}


div.indexInfo > ul > li:nth-child(3n) {
 margin-right: 0!important;
}

div.blueBox.indexInformation div.indexInfo > ul.selectList li:hover,
div.blueBox.indexInformation div.indexInfo > ul.selectList li:focus {

background:#A5C9F3;
color: #fff;
cursor: pointer;

}



div.blueBox.indexInformation div.indexInfo > ul.selectList li.selected {
background: #fff;
color: #A5C9F3;
padding: 9px 13px!important;

}


div.blueBox.indexInformation div.indexInfo {
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -ms-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

div.blueBox.indexInformation div.indexSummary {
 -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -ms-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;

}

div.blueBox.indexInformation div.indexInfo > ul:nth-child(3) {
 margin-right:0px;

}

div.blueBox.indexInformation div.indexInfo .nameValue {
float:left; width: 100%;
}

div.blueBox.indexInformation div.indexInfo .nameValue h4 {
  color: #fff;
  font-size:18px;
  text-align: left;
}

div.blueBox.indexInformation ul.buttonWrap {
   margin-top: 27px;
   width: 100%;
   position: relative;
   top: 0px;
   right: 0;
}


.blueBox {
   background: #58718d;
   padding: 27px 18px;
   color: #fff;
   position: relative;
     -webkit-transition: all 0.25s ease;
     -moz-transition: all 0.25s ease;
     -ms-transition: all 0.25s ease;
     -o-transition: all 0.25s ease;
     transition: all 0.25s ease;
}

.blueBox h3 {color: #fff;}

.nonUS .top-filters {display: none;}
.top-filters {
  border-bottom: 1px dashed #bcc2c9;
  padding: 27px 0px;
  width: 100%;
  margin: 0 auto 27px auto;
}
.top-filters .top-filter-links ul {margin: 0 auto;   text-align: center;}
.top-filters .top-filter-links h2 {font-size:18px; color:#233545;   line-height: 18px; margin-bottom: 9px;}
.top-filters .top-filter-links li img {width:32px; margin: 0 auto; display: block;}
.top-filters .top-filter-links li {
   text-align: center;
   border:1px solid #8ab2d5;
   padding: 7px;
   display: inline-block;
   margin: 0;
   font-size:14px;
   width: 125px;
   color: #8ab2d5;
   border-radius: 2px;
    background-color: #404040;
}
.top-filters .top-filter-links li.selected {
    font-family: "amplitude-light","Arial Narrow",arial;
    position: relative;
    background: #233545;
    color: #fff;
    cursor: pointer;
    text-decoration: underline;
}

.top-filters .top-filter-links li:hover,
.top-filters .top-filter-links li:focus {
    font-family: "amplitude-light","Arial Narrow",arial;
    position: relative;
    background: #233545;
    color: #fff;
    cursor: pointer;
    text-decoration: underline;
    outline: 2px dotted #115880;
}



.top-filters .top-filter-links li.selected.icon-checkmark img {display: none;}
.top-filters .top-filter-links li.selected.icon-checkmark:before {
  font-family: 'icomoon';
  font-size: 27px;
  display: block;
  margin-bottom: 5px;
  text-decoration: none;
  text-align: center;
}


/* ===========================================================================
 index filter
 ============================================================================*/

 .indexfilter {color: #233545;   margin: 39px 0 0 0;}

.indexfilter.open {
  background: #A5C9F3;
  color: #fff;
  margin-top: 38px;
  margin-bottom:18px;
}


.indexfilter.open .filterHead a {color: #fff;}

.indexfilter .filterHead a {
  font-size: 30px;
line-height: 1em;
font-weight: 300;
display: block;
padding: 0.67em 0 0.67em 0px;
cursor: pointer;
text-decoration: none;
text-align: center; }

.indexfilter .filterHead a i {
font-size: 27px;
border: 1px solid #A5C9F3;
padding: 18px;
color: #A5C9F3;
border-radius: 100px;
display: block;
width: 26px;
margin: 0 auto;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-ms-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}


.indexfilter.open .filterHead a i {
color: #fff;
border: 1px solid #fff;
margin-top: -35px;
background: #A5C9F3;
margin-bottom: 9px;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-ms-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}

.indexfilter .assetClass,
.indexfilter .strategyType,
.indexfilter .strategyStyle,
.indexfilter .results {
width: 67%;
float: left;
margin-right: 40px;
margin-left: 40px;
margin-bottom:54px;
margin-top:0px; }



.indexfilter .results ul {
background: #d5770e;
height: 163px;
font-size: 12px;
padding: 9px;
overflow-y: scroll;
}

.indexfilter .results ul li {
background: #fff;
padding: 9px;
margin-bottom: 9px;
color: #336699;
font-family: "amplitude-regular","Arial Narrow",arial; }


.indexfilter .results ul li span {

  font-size: 16px;
  color: #bcbcbc;
  float: right;
}

.indexfilter .results {margin-right:0!important;}

.indexfilter .results ul.tableSlots {min-height: 27px!important; display: block; overflow: hidden;}

.indexfilter .filter-type {background:#bcbcbc;}

.indexfilter h4 {

display: block;
color: #FFFFFF;
font-size: 18px;
font-weight: 300;
text-align: left;
margin-bottom: 18px;
}


.indexfilter .box, .box {border: 1px solid #fff;
width: 19px;
height: 20px;
display: block;
float: left;
line-height: 1.3em;
padding-left: 2px;
margin-right: 6px;}


.indexfilter .box.icon-checkmark, .box.icon-checkmark {
background: #7699c4;
color: #fff;
border: 1px solid #7699c4;
}

.indexfilter ul li {margin-bottom: 18px; font-weight: 300; cursor: pointer;}

.indexInformation .informationwrap .inforOne, .indexInformation .informationwrap .infoTwo {float:left; width: 26%;}
.indexInformation .informationwrap .infoThree {float:left; width: 40%;}

.indexInformation .informationwrap ul li {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 5.5px 0;
  border-bottom:1px solid #7699c4;
  font-family: "amplitude-regular","Arial Narrow",arial;
}

.buttonWrap li {border:none;}
.indexInformation .informationwrap ul li span {
  display: block;
    float: left;
    font-weight: 300;
    margin-right: 30px;
    width: 90px;
    font-family: "amplitude-light","Arial Narrow",arial;}



.indexInformation .informationwrap ul li .tickerButton {
border:1px solid #A5C9F3;
padding: 0 0 0 5px;
position: relative;
width: 53.3%;
margin: 0;
cursor: pointer;
}

.indexInformation .informationwrap ul li .tickerDropdown li {
  border-bottom: none;
  padding-left:5px;
}

.indexInformation .informationwrap ul li .tickerDropdown li:hover,
.indexInformation .informationwrap ul li .tickerDropdown li:focus {
background: #A5C9F3;
}


.tickerButton:after {
content: "";
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 7px solid #A5C9F3;
top: 8px;
right: 11px;
position: absolute;
}

.tickerDropdown {
cursor: pointer;
display: none;
border:1px solid #A5C9F3;
clear: both;
margin-left: 140px;
background: #d6780e;}


.viewMore {
  display: block;
  color: #fff;
  text-decoration: none;
  clear:both;
  width:300px;
  margin: 27px auto;
  font-size: 24px;
}



.indexInformation .informationwrap span { font-weight: 300;}

.button {
font-size: 1.3em;
line-height: 1em;
padding: 4.5px 0;
cursor: pointer;
border: 1px solid;
padding: 8px 12px 9px 12px;
text-decoration: none;
font-family: "amplitude-regular","Arial Narrow",arial;
border-radius: 2px;
text-decoration: none;
top: 62px;
margin: 10px 0;
}

.button {
  text-decoration: none!important;
}

.exportbuttons {
  right: 40px;
  text-align: right;
  top: 32px;
}


.bookbuilding .exportbuttons {
  height: 45px;
}

.indexfilterBB {
  margin-top: -21px;
  margin-bottom: 27px;
}

.filterBodyBB {margin-top: 10px;}

.filterButton {
   font-size: 1.3em;
   line-height: 1em;
   padding: 4.5px 0;
   cursor: pointer;
   border: 1px solid;
   padding: 8px 12px 9px 12px;
   text-decoration: none;
   font-family: "amplitude-regular","Arial Narrow",arial;
   border-radius: 2px;
   text-decoration: none;
   position: absolute;
}

.filterButton:focus {
    outline: thin dotted black;
    outline-offset: 3px;
}

.filterButton.open {text-indent: 20px; z-index: 2;   width: 103px;   transition: all 0.25s ease;}

.filterButton.open:after {
   content: "x";
   top: 0;
   left: -8px;
   width: 20px;
   height: 20px;
   text-align: center;
   padding: 6px 0 0 0;
   font-size: 27px;
   position: absolute;
}

.filterButton:hover,
.filterButton:focus,
.filterButton.open,
.button:hover,
.button:focus,
.bookBuildingDeals .panel .closeBookWrap:hover,
.bookBuildingDeals .panel .closeBookWrap:focus,
#products_excel_export_button button:hover,
#products_excel_export_button button:focus  {
  background:#58718d;
  border:1px solid #58718d;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -ms-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

/* ===========================================================================
highchart override styles
============================================================================*/

.topOne {border-bottom:1px solid #D8D4CA;}

.highcharts-axis-labels.highcharts-xaxis-labels {
  border:1px solid red;

}

.highcharts-data-labels.highcharts-tracker > g > text {
font-size: 22px!important;
}


.highcharts-data-labels.highcharts-tracker > g:nth-child(1) > text {
color: #8ab2d4!important;
fill: #8ab2d4!important;
}

.highcharts-data-labels.highcharts-tracker > g:nth-child(2) > text {
color: #55321b!important;
fill: #55321b!important;
}

.highcharts-data-labels.highcharts-tracker > g:nth-child(3) > text {
color: #54640d!important;
fill: #54640d!important;
}


.highcharts-data-labels.highcharts-tracker > g:nth-child(4) > text {
color: #7e7d80!important;
fill: #7e7d80!important;
}

.highcharts-data-labels.highcharts-tracker > g:nth-child(5) > text {
color: #A5C9F3!important;
fill: #A5C9F3!important;
}

.highcharts-data-labels.highcharts-tracker > g:nth-child(6) > text {
color: #ffffff!important;
fill: #ffffff!important;
}

.highcharts-data-labels.highcharts-tracker g text tspan {
  font-weight: normal!important;
}

.highcharts-data-labels.highcharts-tracker g text {
  text-decoration: none!important;
}

.highcharts-axis-labels.highcharts-xaxis-labels > text {

  font-weight: 300!important;
  text-decoration: none!important;
}

.highcharts-button {margin-top: -20px;}

.strategies .graphHeaders .lastEffectiveTitle {
width: 100%;
border: none;
}


.graphHeaders .lastEffectiveTitle, .half5050 .halfOne {
border-right: 1px solid #D8D4CA;
}

.graphHeaders h3 {
font-size: 27px;
}

.graphHeaders .aggby1, .graphHeaders .aggby2 {
display: block;
border: 1px solid #D8D4CA;
padding: 2% 12% 2% 2%;
cursor: pointer;
width: 150px;
margin: 0 auto;
position: relative;
font-size: 14px;
}

.retrieveComposition {
  margin: 27px 0;
}

.retrieveComposition ul {
  width:217px;
  display: block;
  margin: 0 auto;
}


.blueBox .dropdownButton:after {
content: "";
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #ffffff;
top: 17px;
right: 17px;
position: absolute;
}


.dropdownButton:after {
content: "";
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #ffffff;
top: 17px;
right: 17px;
position: absolute;
}


.mapWrap {position: relative; min-width: 900px;}
.mapWrap .previous, .mapWrap .next {display:block; position: absolute; z-index: 2; top:15%;}
.mapWrap .previous .arr, .mapWrap .next .arr {
color: #D8D4CA;
stroke: #D8D4CA;}

.mapWrap .previous:hover .arr,
.mapWrap .previous:focus .arr,
.mapWrap .next:hover .arr,
.mapWrap .next:focus .arr {
color: #A5C9F3;
stroke: #A5C9F3;}

.mapWrap .previous {left:-100px;}
.mapWrap .next {right:-130px;}


/* ==========================================================================
  Search
========================================================================== */

#search {
font-size: 13px;
padding: 0px 0 0 6px;
border: none;
width: auto;
float: right;
position: relative;}

#search input {
    background:none;
    border: medium none;
    box-shadow: none;
    outline: medium none;
    width: 0px;
    color: #233545;
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -ms-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
}

#search.open {
background:#d1d6da;
}

#search.open input {
    width:130px;
    background: #d1d6da;
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -ms-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;

}


#search.open button span.icon-search:before {
  content: "\e60c";
}


.banner #search.open button {
    background: none repeat scroll 0 0 #d1d6da;
    color:#233545;
}

.banner #search button {
    background: none;
    border: 0 none;
    cursor: pointer;
    display: inline-block;
    padding: 0;
    position: relative;
    top: 0;
    vertical-align: middle;
    right: 6px;
    color:#fff;
    font-size: 23px;
}


/* ==========================================================================
  Pagination
  ==========================================================================*/

  .pagination {margin-top: 27px;}

.pagination ul li:first-child,
.pagination ul li:last-child {
    display: inline-block;
    width: 20%;
    height: 27px;
    border: none;
    background: none;
    color: #141414;
    border-bottom: none;
    margin: 0px 20px;
    padding: 0px;
    font-size: 13px;
    cursor: pointer;
}

.pagination ul {
  text-align: center;
}

.pagination .next i {
padding-left: 0px;
float:right;
line-height: 1.9em;
font-size: 13px;
}


.pagination .prev i {
padding-right: 0px;
float:left;
line-height: 1.9em;
font-size: 13px;
}

.pagination ul li {
display: none;
width: 45px;
margin: 0 auto;
text-align: center;
font-size:13px;
color: #000000;
}

.pagination ul li a {display: block; text-decoration:none; }

.pagination ul li .current { color:#000; text-decoration: underline; }
.pagination ul li .current.prev, .pagination ul li .current.next {text-decoration: none;}

.pagination ul li a:hover,
.pagination ul li a:focus {
  text-decoration:underline;
  color: #0000FF;
}

.pagination .active a {
    font-weight: bold;
    text-decoration: none!important;
    outline: 1px solid black;
    outline-offset: 2px;
}

/* two types of Pagination need to use just one */

ul.page ul {
  text-align: center;
  }
ul.page li {
  display: inline;
  margin: 0 4px 0 0;
  }
ul.page li a {
  padding: 3px 8px;
  font-size: 14px;
  border: 1px solid #D8D4CA;
background: #fff;
  border-radius: 4px;
  }
ul.page li a:hover,
ul.page li a:focus {
  background: #f0f0f0;
  border-color: #ccc;
  }
ul.page li a:active {
  background: #fff;
  border-color: #ddd;
  }


/* ==========================================================================
   content
   ========================================================================== */

.selected { background:#A5C9F3; color: #fff;}
.selected td { background-color:#A5C9F3!important; color: #fff;}

.indexNavigation  {padding: 95px 0 90px;}

.checkbox a {
    background: none;
      display: block;
      padding: 15px;
      margin: 0 0 18px;
      cursor: pointer;
      border: 1px solid #fff;
      -webkit-border-radius: 2px;
      -moz-border-radius: 2px;
      border-radius: 2px;
      margin-right:2%;
      text-decoration: none;
    }

.checkbox .selectAll {
width: 140px;
float: left;
margin-right: 40px;}


.checkbox ul {list-style-type: none; margin: 0; padding: 0; width: 100%;}
.checkbox ul li {float:left; width:24%; margin: 0 40px 9px 0;}
.checkbox ul li:nth-child(3), .checkbox ul li:nth-child(6) {margin-right:0;}
.checkbox ul li a {margin:0; display:block;  float: none;}
.checkbox ul li a:hover, .checkbox ul li a:focus {background:#A5C9F3; color:#fff; border: 1px solid #fff;}
.checkbox ul li a span, .checkbox a span  {font-size: 24px;float:right; color:#fff; line-height: 1em;}
.checkbox .selectAll span {font-size: 24px;float:right; color:#fff; line-height: 1em; margin-left: 14px;}

.checkbox ul li a:hover span,
.checkbox a:focus span,
.checkbox .selectAll:hover span,
.checkbox .selectAll:focus span  {color: #fff;}

.checkbox ul li a.selected, .checkbox a.selected {background:#A5C9F3; color:#fff; }
.checkbox ul li a.selected:hover, .checkbox a.selected:hover {background: #A5C9F3; color: #fff;}

.bigIcon {font-size:72px;}


.featuredIndices > li > a > h2 {
  font-size: 24px;
}

.featuredIndices > li > a {
text-decoration: none;
}

.featuredIndices li h2 {
  color:#fff;
  line-height: 27px;
  height: 50px;
text-overflow: ellipsis;
overflow: hidden;
}

.featuredIndices > li > a > p {
  text-align: center;
}

.featuredIndices li {
width: 100%;
margin-right: 0%;
margin-bottom: 36px;
text-align: center;
min-height: auto;
border-bottom: 1px solid #fff;
}

.summarySec ul li {
margin-bottom: 36px;
text-align: center;
border-bottom: 1px solid #fff;
background:#D8D4CA;
padding: 1%;
}

.summarySec ul li.trends {margin-right:0;}

.summarySec ul li.amount p span.num {
  font-size: 72px;
  line-height: 52px;
  display: block;
}

.summarySec ul li.amount p span.title {
  text-transform: uppercase;
  font-size: 27px;
}

.viewAll {font-size: 16px; text-align: center; margin-top: 27px; cursor: pointer; }
.viewAll span {display:block; font-size: 60px;}
.show5 {height: 259px; overflow-y: hidden;}


.summarySec ul li.closeDates ul li, .summarySec ul li.levels ul li  {
width: 17.5%;
display: block;
padding: 4% 1%;
margin: 0 auto;
border-bottom: none;
float: left;
border: 1px solid #233545;
}

.summarySec ul li.closeDates ul li i {
  font-size: 27px;
display: block;
text-align: center;
}


.featuredIndicesSummaryTable {
    padding:36px 0;
    margin:36px 0;

  }


/* ==========================================================================
 slide out bottom bar
========================================================================== */

.bottomBar {
  position: fixed;
  left:0;
  bottom: 0;
  z-index: 3;
  width:100%;
  background: #fff;
  border-top:1px solid #D8D4CA;
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -ms-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;}
.bottomBar .content {
}
.bottomBar.docked {
  left: 100%;
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -ms-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;}
.bottomBar.docked .content {
}
.bottomBar .bottomBarTab {
  display: block;
  position: absolute;
  background:#A5C9F3;
  color: #fff;
  padding: 40px;
  left:-300px;
}


/* ==========================================================================
 Nexus only styles
========================================================================== */


.selectStuff.dropdownButton:after {
content: "";
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #55565a;
top: 15px;
right: 11px;
position: absolute;
}


#performerTable > thead > tr > th:nth-child(1) {
  width:42%;
}



#excelFile {
border: 1px solid #f2efec;
margin: 0 auto;
display: block;
padding: 9px;
}

#uploadExcelSubmit {
display: block;
margin: 1em 0;
display: none;
}

.moreStuff {display: none;}

.smallColor {color: #A5C9F3; font-size: 16px; display: block;}


/* ==============================================================
Mobile only stuff
===============================================================*/

.mobile-table .left,
.mobile-table .right {
width: 80px;
height: 80px;
position: absolute;
background:rgba(232,129,13,0.7);
top: 46%;
z-index: 2;
display: block;
text-align: center;
line-height: 3em;
font-size: 27px;
color: white;
cursor: pointer;
}

.mobile-table .left {left:0;}
.mobile-table .right {right:0;}

.timeLineResults input {
  border: none;
  color: #A5C9F3;
  padding-left:10px;
  width:80px; }


.resultsTop {max-width: 349px; padding: 0px 0 9px 0; margin: 0 auto; font-weight: 300;}
.resultsBottom {max-width:506px; padding: 9px 0 0px 0; margin: 0 auto; font-weight: 300;}
.resultsTop .showing,.resultsBottom .showing  {float:left; margin-right:40px;}
.resultsTop .summary {float:left;}


.tpChkBx {border-right:none!important; border-left: 6px solid #fff;}


.altSeries {float:right; margin-top: -50px; font-weight: 300;}
.altSeries a {text-decoration:none; font-weight: normal; margin-left:10px; }


.timeline2 {position:relative; margin: 0 0 27px 0; height: 100px; overflow: hidden;}
.timeline2 ul {display: none;}
.timeline2 .timeLineResults ul {display:block;}

.timeline2 ul li {display: inline-block;
text-align: center;
width: 20%;
cursor: pointer;
font-weight: 300;}

.timeline2 .ui-slider {background:#fff;}
.timeline2 #slider2 {width: 61.4%;
position: absolute;
left: 9%;
top: 27px;
display:none;}

.custom {position: absolute;
top: 0;
right: 138px;
font-weight: 300;
display: none;}

.timeLineResults {
  margin-top:27px;
  height: 54px;
}

.timeLineResults ul {
  position: relative;
  padding: 22px 0%;
  font-size: 13px;
  width:100%;
  margin:0 auto;
  left:0;}

.timeLineResults ul li {width: 50%;
margin: 0;
padding: 0;}

.timeLineResults ul li label {display: block;}
.timeLineResults ul li span {

  color:#A5C9F3;
}

.summaryFilter {background:#6e6e6e;  color: #FFFFFF; padding: 27px 18px;}

.summaryFilter #amount {
  text-transform: uppercase;
  font-weight: 300;
  font-size:36px;
  letter-spacing: 0.03em;
}

.summaryFilter h4, .summaryFilter label {
  display:block;
  color: #FFFFFF;
  font-size: 18px;
  font-weight: 300;
  text-align: left;}

.summaryFilter h4,.summaryFilter label  {margin-bottom:18px;}

.summaryFilter input {
  background: #6e6e6e;
  border: medium none;
  box-shadow: none;
  outline: medium none;
  font-size: 36px;
  font-weight: 300;
  color: #fff;
  width: 80%;
  margin-left: 40px;
  padding: 0;}

 .summaryFilter ::-webkit-input-placeholder { /* WebKit browsers */
    color:    #fff;
    opacity: 1;
}

.summaryFilter :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #fff;
    opacity: 1;
}
.summaryFilter ::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #fff;
    opacity: 1;
}
.summaryFilter :-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #fff;
    opacity: 1;
}

.summaryFilter .timePeriod,
.summaryFilter .startDate,
.summaryFilter .endDate,
.summaryFilter .buttons { position: relative; margin-bottom: 27px;}



.summaryFilter .icon-calendar {margin-left: 18px; font-size: 32px;}

.summaryFilter .month {
width: 30px;
position: absolute;
top: 50px;
font-weight: 300;}

.summaryFilter .cal {
  text-align: right;
  font-weight: 300;}

.summaryFilter .ann-button {margin: 30px 0 0 0;
padding: 1em 2.3em;}

.selectedPeriod {font-family: "amplitude-regular","Arial Narrow",arial;; font-size: 24px;}
.selectedPeriod span {font-weight:300;}


#tabs-1 .buttonWrap {
top: 148px;
right: 0;
position: absolute;}


#tabs-1 .buttonWrap li {float:left;}

#tabs-1 .buttonWrap li .greenWhite {background: #fff; border:1px solid #54640d; font-size:12px;}
#tabs-1 .buttonWrap li .greenWhite span {color: #54640d;}

#tabs-1 .buttonWrap li .greenWhite:after {
    background-color:#54640d;
    content: "";
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    transform: translate(0px, 100%);
    -moz-transform:translate(0px, 100%);
    -ms-transform:translate(0px, 100%);
    -webkit-transform:translate(0px, 100%);
    -o-transform:translate(0px, 100%);


  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;

    width: 100%;
}

#tabs-1 .buttonWrap li .greenWhite:hover:after {
    transform: translate(0px, 0px);
    -moz-transform:translate(0px, 0px);
    -ms-transform:translate(0px, 0px);
    -webkit-transform:translate(0px, 0px);
    -o-transform:translate(0px, 0px);

   }

.weightTotal {position: relative;}

.weightTotal .equalityWeightLast,
.weightTotal .equalityWeightTarget {
  font-size:27px;
  background: #ebecef;
  height: 54px; }

.weightTotal .equalityWeightLast h3,
.weightTotal .equalityWeightTarget h3 {
  font-size:16px;
  text-align: left;
  float: left;
  width:120px;
  line-height: 2.3em;
  padding: 8px 10px 0 175px;
  margin: 0; }

.weightTotal .equalityWeightLast h3 {
  padding: 8px 10px 0 193px;

}

.weightTotal .equalityWeightLast .weightSum,
.weightTotal .equalityWeightTarget .weightSum {
line-height: 2em;

}


.weightTotal .equalityWeightTarget button {
    font-size: 16px;
margin: 8px 41px 0 10px;
padding: 7px;
float: right;
}


.compositionTable,
.targetCompositionTable,
.weightTotal .equalityWeightLast,
.weightTotal .equalityWeightTarget {float:left; width:48%;}

.compositionTable .table th, .compositionTable .table td,
.targetCompositionTable .table th, .targetCompositionTable .table td {
font-size: 14px;
}

.compositionTable .table tbody tr,
.targetCompositionTable .table tbody tr {height: 50.5px; position: relative;}

.compositionTable .table tbody tr input,
.targetCompositionTable .table tbody tr input {
  border: 1px solid #f2efec;
padding: 3%;
width:80px;
}

.compositionTable .table tbody tr input:focus,
.targetCompositionTable .table tbody tr input:focus {
border: 1px solid #A5C9F3;
outline-color: #A5C9F3;

}


.compositionTable,
.equalityWeightLast {margin-right:36px;}

.targetCompositionTable tr td:nth-child(3) {}

.compositionTable h3,
.targetCompositionTable h3 {
  font-size: 21px;
}

.tableInfo {
  position: absolute;
  display: block;
  background: red; }

.table tbody tr.red {border-bottom: 1px solid #fff;}
.table tbody tr.red td {background-color:#ffbdbd!important;}

.targetCompositionTable .table tbody tr.green {border-bottom: 1px solid #fff;}
.targetCompositionTable .table tbody tr.green td {background-color:#bdffcb!important;}


.table tbody tr.removed {opacity: 0.5;}
.table tbody tr.removed td {background-color:#f4f2f2!important;}

.addCustomAC {
 display: block;
color: #55565a;
border:1px solid #55565a;
float: right;
font-size: 18px;
padding: 6px;
text-decoration: none;
}

.addCustomAC:hover {
color:#fff;
background:#A5C9F3;
border:1px solid #A5C9F3;
}



.moduleIndexLevelData, .moduleSummaryTable, .moduleRiskMeasure, .moduleReturnStatistics {width: 100%!important; margin-bottom: 27px!important;}

.overViewtable tr {height:56px;}

.overViewtable thead tr th {line-height: 2.4em;}

.overViewtable tr:hover,
.overViewtable tr:focus {

  background: none!important;
cursor: default!important;

}

.moduleProdRefine {width: 560px!important; float:left;}



  .one { background:#A5C9F3; border-radius: inherit;}
  .blue .ball  {background:rgb(138,178,212);}
  .blue a:hover {background:#ccc;}
  .brown .ball {background:#55321b;}
  .green .ball {background:#54640d;}
  .gray .ball {background:#7e7d80;}
  .purple .ball {background:#A5C9F3;}

  .greenVal {color:#53840f; font-family:'latoregular',sans-serif;}


  .redVal {color:#990000; font-family:'latoregular',sans-serif;}




  .two {background:#54301a; border-radius: inherit;}
  .three {background: #54640d; border-radius: inherit;}
  .four {background: #6d6e71; border-radius: inherit;}
  .five {background: #502c81; border-radius: inherit;}


  .ball {
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
width: 20px;
height: 20px;
display: block;
float: left;
margin-left: 15px; }

td.ball-container {
  cursor: pointer;
}

.hollow.ball {
background: transparent !important;
border: solid 3px;
width: 14px;
height: 14px;
}


/* =======================================================================================
 table
 ====================================================================================== */

#performerTable {width: 100%;margin: 0 auto;}
#performerTable th, #performerTable td {padding: 11px 20px;}

#performerTable th:last-child, #performerTable td:last-child {border-right:none;}
#performerTable td a {text-decoration: none;}

caption {text-align: left;}

table thead th:first-child,
table tbody td:first-child {text-align: left;}

table thead th {border-right: 1px solid #d1d6da;cursor: pointer;}
table thead th:last-child {border-right: none;}

table thead tr:first-child {border-top:1px solid #115880; border-bottom:1px solid #115880;}

table thead tr:first-child {
border-bottom: 4px double #115880;
border-top: 4px double #115880;
}

table tr.odd td {
  background-color: rgba(255, 255, 255, 0.28) !important;
}

table {
  max-width: 100%;
  background-color: transparent;
  border-collapse: collapse;
  border-spacing: 0;
  font-weight: 300;
}

.table {
  width: 100%;
  margin-bottom: 20px;
}

.table th {font-size: 12px;}
.table td {font-size: 12px;}

.table th, .table td {
padding: 6px;
line-height: 14px;
text-align: center;
vertical-align: middle;
}

table td svg {width:32px; height:32px; display: block; margin: 0 auto;}

table td {
border-bottom: 1px solid #d1d6da;
border-right: 1px solid #d1d6da;
}

.table-striped th:last-child, .table-striped td:last-child {
border-right: none;
}

.table th {
  font-family: "amplitude-regular","Arial Narrow",arial;;
}

.table tr:hover, .table-striped tbody tr:hover, .table-striped tbody tr:hover {
background: #dcdcdc;
cursor: pointer;
}

.table thead tr:hover,
.table-striped thead tr:hover  {

background:transparent;
  cursor:default;
}

.table thead th {
  vertical-align: bottom;
  white-space: nowrap;
}

.table .date, .table .curr  {text-align: center;}
.table .date .day {display: block; font-size: 18px; margin: 3px 0;}
.table .date .month {display: block; font-size: 10px; text-transform: uppercase;}
.table .date .year {display: block; font-size: 10px; text-transform: uppercase;}

.table .yesNo span {border: 1px solid;
padding: 6px 4px;
border-radius: 100px;
line-height: 1.3em;
margin-top: 2px;
width: 18px;
display: block;
text-align: center;}


.table .curr span { border: 1px solid;
padding: 6px 4px;
border-radius: 100px;
line-height: 1.8em;
margin: 2px 0 0 6px;
width: 23px;
display: block;
text-align: center;
font-size: 11px;}

.table .rf span {display: block; background: none;}
.table .rf span.usa {background: url("..img/png/us.png");}


.table caption + thead tr:first-child th,
.table caption + thead tr:first-child td,
.table colgroup + thead tr:first-child th,
.table colgroup + thead tr:first-child td,
.table thead:first-child tr:first-child th,
.table thead:first-child tr:first-child td {
  border-top: 0;
}

.table tbody + tbody {
  border-top: 2px solid #dddddd;
}

.table-condensed th,
.table-condensed td {
  padding: 4px 5px;
}

.table-bordered {
  border: 1px solid #dddddd;
  border-collapse: separate;
  *border-collapse: collapse;
  border-left: 0;
}

.table-bordered th,
.table-bordered td {
  border-left: 1px solid #dddddd;
}

.table-bordered caption + thead tr:first-child th,
.table-bordered caption + tbody tr:first-child th,
.table-bordered caption + tbody tr:first-child td,
.table-bordered colgroup + thead tr:first-child th,
.table-bordered colgroup + tbody tr:first-child th,
.table-bordered colgroup + tbody tr:first-child td,
.table-bordered thead:first-child tr:first-child th,
.table-bordered tbody:first-child tr:first-child th,
.table-bordered tbody:first-child tr:first-child td {
  border-top: 0;
}

.table-striped tbody tr:nth-child(odd) td,
.table-striped tbody tr:nth-child(odd) th,
.zoomScroll ul:nth-child(odd) {
background-color: rgba(235,236,239,0.3);
}


.table-line tbody tr {border-bottom:1px solid #ccc;}


.table-hover tbody tr:hover td {
  background-color: #faf8f6;
}

table td[class*="span"],
table th[class*="span"],
.row-fluid table td[class*="span"],
.row-fluid table th[class*="span"] {
  display: table-cell;
  float: none;
  margin-left: 0;
}

.table td.span1,
.table th.span1 {
  float: none;
  width: 44px;
  margin-left: 0;
}

.table td.span2,
.table th.span2 {
  float: none;
  width: 124px;
  margin-left: 0;
}

.table td.span3,
.table th.span3 {
  float: none;
  width: 204px;
  margin-left: 0;
}

.table td.span4,
.table th.span4 {
  float: none;
  width: 284px;
  margin-left: 0;
}

.table td.span5,
.table th.span5 {
  float: none;
  width: 364px;
  margin-left: 0;
}

.table td.span6,
.table th.span6 {
  float: none;
  width: 444px;
  margin-left: 0;
}

.table td.span7,
.table th.span7 {
  float: none;
  width: 524px;
  margin-left: 0;
}

.table td.span8,
.table th.span8 {
  float: none;
  width: 604px;
  margin-left: 0;
}

.table td.span9,
.table th.span9 {
  float: none;
  width: 684px;
  margin-left: 0;
}

.table td.span10,
.table th.span10 {
  float: none;
  width: 764px;
  margin-left: 0;
}

.table td.span11,
.table th.span11 {
  float: none;
  width: 844px;
  margin-left: 0;
}

.table td.span12,
.table th.span12 {
  float: none;
  width: 924px;
  margin-left: 0;
}

.table tbody tr.success td {
  background-color: #dff0d8;
}

.table tbody tr.error td {
  background-color: #f2dede;
}

.table tbody tr.warning td {
  background-color: #fcf8e3;
}

.table tbody tr.info td {
  background-color: #d9edf7;
}

.table-hover tbody tr.success:hover td {
  background-color: #d0e9c6;
}

.table-hover tbody tr.error:hover td {
  background-color: #ebcccc;
}

.table-hover tbody tr.warning:hover td {
  background-color: #faf2cc;
}

.table-hover tbody tr.info:hover td {
  background-color: #c4e3f3;
}


/* ====================================================================================
   landing page
  ====================================================================================*/

.localisation fieldset {
float: left;
width: 48.2%;
border: none;
padding: 0;
margin: 0 3.5% 0 0;
}

.find-fund > div > form > div > fieldset.last {
  margin-right:0;
}


.find-fund > div > form > div > fieldset > span {
font-size: 172px;
display: block;
text-align: center;

}

.find-fund > div > form > div > fieldset > span > img {

height: 411px;
margin-top: -88px;
margin-bottom: -65px;
width: 100%;

}

.find-fund > div > form > div > fieldset.last > span > img {

  height: 100%;
margin-top: 0px;
margin-bottom: 32px;
width: 40%;
opacity: 0.4;
}


.find-fund select {
width: 220px;
background-color: #ffffff;
border: 1px solid #cccccc;
margin: 0 auto;
display: block;
z-index: 2;
position: relative;
}
select, input[type="file"] {
height: 30px;
line-height: 30px;
}

.find-fund label {
display: block;
margin-bottom: 8px;
text-align: center;
}

.find-fund label, input, button, select, textarea {
font-size: 16px;
font-family: "amplitude-regular","Arial Narrow",arial;;
line-height: 24px;
}

.find-fund > div > form > .visitorTypeSelector {

}

.find-fund .content {

  border-bottom: 1px solid #D8D4CA;
  padding-bottom: 81px;
}


body > header > div > .riskAwards {
position: absolute;
right: 0;
top: 0;
background: #f3f3f3;
z-index: 2;
width: 116px;

}

body > header > div > .riskAwards img {
width: 100%;
margin: 0 auto;
display: block;
}



body > header > div > .riskAwards:after {
content: "";
width: 0;
height: 0;
border-left: 59px solid transparent;
border-right: 59px solid transparent;
border-top: 28px solid #f3f3f3;
display: block;
position: absolute;
}


body > header > div > {

  position:relative;
}

/*! jQuery UI - v1.10.3 - 2013-12-30 =====================================================*/

/* Layout helpers
----------------------------------*/
#datepicker { border:none; padding:0; margin:0; line-height: 1em; width:100px; background: none;}
#datepicker:hover, #datepicker:focus {outline: none;}


.ui-helper-hidden {
  display: none;
}
.ui-helper-hidden-accessible {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
.ui-helper-reset {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  line-height: 1.3;
  text-decoration: none;
  font-size: 100%;
  list-style: none;
}
.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
  content: "";
  display: table;
  border-collapse: collapse;
}
.ui-helper-clearfix:after {
  clear: both;
}
.ui-helper-clearfix {
  min-height: 0; /* support: IE7 */
}
.ui-helper-zfix {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  opacity: 0;
  filter:Alpha(Opacity=0);
}

.ui-front {
  z-index: 100;
}


/* Interaction Cues
----------------------------------*/
.ui-state-disabled {
  cursor: default !important;
}


/* Icons
----------------------------------*/

/* states and images */
.ui-icon {
  display: block;
  overflow: hidden;
  background-repeat: no-repeat;
  font-size: 12px;
}


/* Misc visuals
----------------------------------*/

/* Overlays */
.ui-widget-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.ui-datepicker {
  width: 22em;
  padding: .6em .6em 0;
  border: 1px solid #dedede;
  z-index: 999!important;
  display: none;
  background: #fff;
  -webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;

-moz-box-shadow: 5px 5px rgba(0,0,0,0.1);
-webkit-box-shadow: 5px 5px rgba(0,0,0,0.1);
box-shadow: 5px 5px rgba(0,0,0,0.1);
}
.ui-datepicker .ui-datepicker-header {
  position: relative;
  padding: .4em 0;
  background:#fafafa;
  color: #85a3b7;
}

.ui-datepicker .ui-datepicker-header a {
  color: #85a3b7;
}


.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
 position: absolute;
top: 4px;
height: 10px;
color: #85a3b7!important;
padding: 10px;
line-height: 0.5em;
}
.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
  background: #fff!important;
  cursor: pointer;
  color: #85a3b7;
}

.ui-datepicker .ui-datepicker-prev {
  left: 4px;
  width: 10px;
}
.ui-datepicker .ui-datepicker-next {
  right: 4px;
  width: 10px;

}
.ui-datepicker .ui-datepicker-prev-hover {
  color: #55565a!important;

}
.ui-datepicker .ui-datepicker-next-hover {
  background: #fff!important;
  color: #55565a!important;
  cursor: pointer;
}
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
  display: block;
  position: absolute;
  display: none;
}

.ui-datepicker .ui-datepicker-prev:before {
  content: " \2039";
  font-size: 24px;

}

.ui-datepicker .ui-datepicker-next:after {
  content: "\203A";
  font-size: 24px;

}

.ui-datepicker .ui-datepicker-title {
  margin: 0 2.3em;
  line-height: 1.8em;
  text-align: center;
}
.ui-datepicker .ui-datepicker-title select {
  font-size: 1em;
  margin: 1px 0;
}
.ui-datepicker select.ui-datepicker-month-year {
  width: 100%;
}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
  width: 49%;
}
.ui-datepicker table {
  width: 100%;
  font-size: .9em;
  border-collapse: collapse;
  margin: 0 0 .4em;
}
.ui-datepicker th {
  padding: .7em .3em;
  text-align: center;
  font-weight: bold;
  border: 0;
  min-width: 100%;
}
.ui-datepicker td {
  border: 0;
  padding: 1px;
  min-width: 100%;
}

.ui-datepicker tr {border-bottom: none; background:none;}

.ui-datepicker td span,
.ui-datepicker td a {
  display: block;
  padding: 1em;
  text-align: center;
  text-decoration: none;
}
.ui-datepicker .ui-datepicker-buttonpane {
  background-image: none;
  margin: .7em 0 0 0;
  padding: 0 .2em;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
}
.ui-datepicker .ui-datepicker-buttonpane button {
  float: right;
  margin: .5em .2em .4em;
  cursor: pointer;
  padding: .2em .6em .3em .6em;
  width: auto;
  overflow: visible;
}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
  float: left;
}

/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi {
  width: auto;
}
.ui-datepicker-multi .ui-datepicker-group {
  float: left;
}
.ui-datepicker-multi .ui-datepicker-group table {
  width: 95%;
  margin: 0 auto .4em;
}
.ui-datepicker-multi-2 .ui-datepicker-group {
  width: 50%;
}
.ui-datepicker-multi-3 .ui-datepicker-group {
  width: 33.3%;
}
.ui-datepicker-multi-4 .ui-datepicker-group {
  width: 25%;
}
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
  border-left-width: 0;
}
.ui-datepicker-multi .ui-datepicker-buttonpane {
  clear: left;
}
.ui-datepicker-row-break {
  clear: both;
  width: 100%;
  font-size: 0;
}

/* RTL support */
.ui-datepicker-rtl {
  direction: rtl;
}
.ui-datepicker-rtl .ui-datepicker-prev {
  right: 2px;
  left: auto;
}
.ui-datepicker-rtl .ui-datepicker-next {
  left: 2px;
  right: auto;
}
.ui-datepicker-rtl .ui-datepicker-prev:hover {
  right: 1px;
  left: auto;
}
.ui-datepicker-rtl .ui-datepicker-next:hover {
  left: 1px;
  right: auto;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane {
  clear: right;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane button {
  float: left;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,
.ui-datepicker-rtl .ui-datepicker-group {
  float: right;
}
.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
  border-right-width: 0;
  border-left-width: 1px;
}

 .ui-state-highlight {border:1px solid #dedede;
-webkit-border-radius: 1000px;
-moz-border-radius: 1000px;
border-radius: 1000px;}

.resource-tabs .ui-state-hover, .product-tabs .ui-state-hover{
    background-color: transparent;
}

.ui-tabs-active.ui-state-active.ui-state-focus , .ui-tabs-active.ui-state-active:focus {
    outline: thin dotted #000000;
}

.ui-tabs-active.ui-state-active {
    float: left;
}


/* ==============================================================================
PopUp
===============================================================================*/

.popUp {display: none;}

.gravel-body.content p {
line-height: 2em;
}

.gravel-body.content p i.icon-info {
display: inline-block;
padding-right: 10px;
}

.gravel .gravel-buttons {
border-top: solid 1px #F0F0F0;
padding: 10px 0px 0px 0px;
margin: 27px 0px 9px 0px!important;
display: block;
}

.gravel img {width:128px; margin: 27px auto 9px auto; display: block;}

.gravel p {text-align: left; line-height: 1.5em!important;}

.status.dropdownButton {
display: block;
border: 1px solid #4c6178;
padding: 3% 12% 3% 3%;
cursor: pointer;
margin: 0;
position: relative;
font-size: 14px;
}

.status.dropdownButton:hover,
.status.dropdownButton:focus {
  background: #405163;
}

.dropdownButton:hover:after,
.dropdownButton:focus:after {
    content: "";
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #fff;
    top: 17px;
    right: 17px;
    position: absolute;
}

.timePeriod ul {display: none;}
.timePeriod ul li {
  display: block;
  background:#a6a29e;
  padding: 6% 12% 6% 6%;
  border-bottom:1px solid #918e8b; }

.timePeriod ul li:hover,
.timePeriod ul li:focus {
  background: #918e8b;
}


span.currentHistory {color: #A5C9F3;}
.historyResults {margin:54px 0;}
.historyResults tr.selected {
color: #A5C9F3;
font-weight: 700;
background: #fff;}

.selectedComp h3 span time,
.smallColor time {
  display: block;
  font-size: 37px;
line-height: 1em;}

/* Button animation ************************************************************************************************************/

.ann-button {
  background-color: #A5C9F3;
    border: 0 none;
    color: white;
    font-size: 1.3em;
    margin: 0 0.25rem 0.6rem 0;
    padding: 0.8em 1em;
    padding: 0.8rem 1rem;
    white-space: nowrap;
    -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;

}


.fill-from-bottom-button:after {
    background-color:#6d8eb6;
    content: "";
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    transform: translate(0px, 100%);
    -moz-transform:translate(0px, 100%);
    -ms-transform:translate(0px, 100%);
    -webkit-transform:translate(0px, 100%);
    -o-transform:translate(0px, 100%);


  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;

    width: 100%;
}

.fill-from-bottom-button:hover:after {
    transform: translate(0px, 0px);
    -moz-transform:translate(0px, 0px);
    -ms-transform:translate(0px, 0px);
    -webkit-transform:translate(0px, 0px);
    -o-transform:translate(0px, 0px);

   }


.fill-from-bottom-button .effeckt-button-label {
  position: relative;
  z-index: 1;
  width: auto;
  padding: 0;
  border: none;
  border-radius: 0;
  color: #fff;
  font-weight: 300;
}


.fill-from-bottom-button span:hover,
.green:hover .fill-from-bottom-button span,
.amber:hover .fill-from-bottom-button span,
.red:hover
.fill-from-bottom-button span {

  border:none!important;
}

.fill-from-bottom-button {
    overflow: hidden;
    position: relative;
}

footer {
position: relative;
 margin-top: 189px;
 font-family:"amplitude-regular","Arial Narrow",arial;
}


footer .legal-text {
font-size: 12px;
padding: 9px 0;
color: #ffffff;

}

footer .content {
padding: 0;
}




footer .legal-text a {color: #A5C9F3; text-decoration: none;}

footer .legal-text a:hover, footer .legal-text a:focus {text-decoration: underline;}

/****************************************************************************
  CSS3 ANIMATIONS
  ***************************************************************************/

  .animated{
  -webkit-animation-fill-mode:both;
  -moz-animation-fill-mode:both;
  -ms-animation-fill-mode:both;
  -o-animation-fill-mode:both;
  animation-fill-mode:both;

  -webkit-animation-duration:1s;
  -moz-animation-duration:1s;
  -ms-animation-duration:1s;
  -o-animation-duration:1s;
  animation-duration:1s;}


  .animatedSlow{
  -webkit-animation-fill-mode:both;
  -moz-animation-fill-mode:both;
  -ms-animation-fill-mode:both;
  -o-animation-fill-mode:both;
  animation-fill-mode:both;

  -webkit-animation-duration:3s;
  -moz-animation-duration:3s;
  -ms-animation-duration:3s;
  -o-animation-duration:3s;
  animation-duration:3s;}


  .animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

  .animated.hinge{
    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    -ms-animation-duration:1s;
    -o-animation-duration:1s;
    animation-duration:1s;
    }

@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  40% {
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  60% {
    -webkit-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
}

@-webkit-keyframes flash {
  0%, 50%, 100% {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
}

@keyframes flash {
  0%, 50%, 100% {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
}

.flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

@-webkit-keyframes rubberBand {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  30% {
    -webkit-transform: scaleX(1.25) scaleY(0.75);
    transform: scaleX(1.25) scaleY(0.75);
  }

  40% {
    -webkit-transform: scaleX(0.75) scaleY(1.25);
    transform: scaleX(0.75) scaleY(1.25);
  }

  60% {
    -webkit-transform: scaleX(1.15) scaleY(0.85);
    transform: scaleX(1.15) scaleY(0.85);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes rubberBand {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  30% {
    -webkit-transform: scaleX(1.25) scaleY(0.75);
    -ms-transform: scaleX(1.25) scaleY(0.75);
    transform: scaleX(1.25) scaleY(0.75);
  }

  40% {
    -webkit-transform: scaleX(0.75) scaleY(1.25);
    -ms-transform: scaleX(0.75) scaleY(1.25);
    transform: scaleX(0.75) scaleY(1.25);
  }

  60% {
    -webkit-transform: scaleX(1.15) scaleY(0.85);
    -ms-transform: scaleX(1.15) scaleY(0.85);
    transform: scaleX(1.15) scaleY(0.85);
  }

  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}

.rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
}

@-webkit-keyframes shake {
  0%, 100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }
}

@keyframes shake {
  0%, 100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px);
  }
}

.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }

  40% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  60% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }

  80% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }

  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

@keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    transform: rotate(15deg);
  }

  40% {
    -webkit-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  60% {
    -webkit-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    transform: rotate(5deg);
  }

  80% {
    -webkit-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }

  100% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

.swing {
  -webkit-transform-origin: top center;
  -ms-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
}

@-webkit-keyframes tada {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  10%, 20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
    transform: scale(0.9) rotate(-3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg);
  }

  100% {
    -webkit-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0);
  }
}

@keyframes tada {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  10%, 20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
    -ms-transform: scale(0.9) rotate(-3deg);
    transform: scale(0.9) rotate(-3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale(1.1) rotate(3deg);
    -ms-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    -ms-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg);
  }

  100% {
    -webkit-transform: scale(1) rotate(0);
    -ms-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0);
  }
}

.tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes wobble {
  0% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }

  15% {
    -webkit-transform: translateX(-25%) rotate(-5deg);
    transform: translateX(-25%) rotate(-5deg);
  }

  30% {
    -webkit-transform: translateX(20%) rotate(3deg);
    transform: translateX(20%) rotate(3deg);
  }

  45% {
    -webkit-transform: translateX(-15%) rotate(-3deg);
    transform: translateX(-15%) rotate(-3deg);
  }

  60% {
    -webkit-transform: translateX(10%) rotate(2deg);
    transform: translateX(10%) rotate(2deg);
  }

  75% {
    -webkit-transform: translateX(-5%) rotate(-1deg);
    transform: translateX(-5%) rotate(-1deg);
  }

  100% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
}

@keyframes wobble {
  0% {
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
  }

  15% {
    -webkit-transform: translateX(-25%) rotate(-5deg);
    -ms-transform: translateX(-25%) rotate(-5deg);
    transform: translateX(-25%) rotate(-5deg);
  }

  30% {
    -webkit-transform: translateX(20%) rotate(3deg);
    -ms-transform: translateX(20%) rotate(3deg);
    transform: translateX(20%) rotate(3deg);
  }

  45% {
    -webkit-transform: translateX(-15%) rotate(-3deg);
    -ms-transform: translateX(-15%) rotate(-3deg);
    transform: translateX(-15%) rotate(-3deg);
  }

  60% {
    -webkit-transform: translateX(10%) rotate(2deg);
    -ms-transform: translateX(10%) rotate(2deg);
    transform: translateX(10%) rotate(2deg);
  }

  75% {
    -webkit-transform: translateX(-5%) rotate(-1deg);
    -ms-transform: translateX(-5%) rotate(-1deg);
    transform: translateX(-5%) rotate(-1deg);
  }

  100% {
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
  }
}

.wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble;
}

@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(.3);
    transform: scale(.3);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }

  70% {
    -webkit-transform: scale(.9);
    transform: scale(.9);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(.3);
    -ms-transform: scale(.3);
    transform: scale(.3);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
  }

  70% {
    -webkit-transform: scale(.9);
    -ms-transform: scale(.9);
    transform: scale(.9);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}

.bounceIn {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}

@-webkit-keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }

  80% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(30px);
    -ms-transform: translateY(30px);
    transform: translateY(30px);
  }

  80% {
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
  }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}

@-webkit-keyframes bounceInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateX(30px);
    transform: translateX(30px);
  }

  80% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes bounceInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateX(30px);
    -ms-transform: translateX(30px);
    transform: translateX(30px);
  }

  80% {
    -webkit-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}

@-webkit-keyframes bounceInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateX(-30px);
    transform: translateX(-30px);
  }

  80% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes bounceInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateX(-30px);
    -ms-transform: translateX(-30px);
    transform: translateX(-30px);
  }

  80% {
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}

@-webkit-keyframes bounceInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  80% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes bounceInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  80% {
    -webkit-transform: translateY(10px);
    -ms-transform: translateY(10px);
    transform: translateY(10px);
  }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}

@-webkit-keyframes bounceOut {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  25% {
    -webkit-transform: scale(.95);
    transform: scale(.95);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(.3);
    transform: scale(.3);
  }
}

@keyframes bounceOut {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  25% {
    -webkit-transform: scale(.95);
    -ms-transform: scale(.95);
    transform: scale(.95);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(.3);
    -ms-transform: scale(.3);
    transform: scale(.3);
  }
}

.bounceOut {
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
}

@-webkit-keyframes bounceOutDown {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}

@keyframes bounceOutDown {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}

.bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown;
}

@-webkit-keyframes bounceOutLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

@keyframes bounceOutLeft {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

.bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft;
}

@-webkit-keyframes bounceOutRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

@keyframes bounceOutRight {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

.bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight;
}

@-webkit-keyframes bounceOutUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

@keyframes bounceOutUp {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

.bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}



@-webkit-keyframes fadeIn {
  0% {opacity: 0;}  100% {opacity: 1;}
}

@-moz-keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@-o-keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  -moz-animation-name: fadeIn;
  -o-animation-name: fadeIn;
  animation-name: fadeIn;
}



@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}

@-moz-keyframes fadeInUp {
  0% {
    opacity: 0;
    -moz-transform: translateY(20px);
  }

  100% {
    opacity: 1;
    -moz-transform: translateY(0);
  }
}

@-o-keyframes fadeInUp {
  0% {
    opacity: 0;
    -o-transform: translateY(20px);
  }

  100% {
    opacity: 1;
    -o-transform: translateY(0);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  -moz-animation-name: fadeInUp;
  -o-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}

@-moz-keyframes fadeInDown {
  0% {
    opacity: 0;
    -moz-transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    -moz-transform: translateY(0);
  }
}

@-o-keyframes fadeInDown {
  0% {
    opacity: 0;
    -o-transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    -o-transform: translateY(0);
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  -moz-animation-name: fadeInDown;
  -o-animation-name: fadeInDown;
  animation-name: fadeInDown;
}
@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
}

@-moz-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -moz-transform: translateX(-20px);
  }

  100% {
    opacity: 1;
    -moz-transform: translateX(0);
  }
}

@-o-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -o-transform: translateX(-20px);
  }

  100% {
    opacity: 1;
    -o-transform: translateX(0);
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  -moz-animation-name: fadeInLeft;
  -o-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}
@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
}

@-moz-keyframes fadeInRight {
  0% {
    opacity: 0;
    -moz-transform: translateX(20px);
  }

  100% {
    opacity: 1;
    -moz-transform: translateX(0);
  }
}

@-o-keyframes fadeInRight {
  0% {
    opacity: 0;
    -o-transform: translateX(20px);
  }

  100% {
    opacity: 1;
    -o-transform: translateX(0);
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(20px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  -moz-animation-name: fadeInRight;
  -o-animation-name: fadeInRight;
  animation-name: fadeInRight;
}
@-webkit-keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}

@-moz-keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -moz-transform: translateY(2000px);
  }

  100% {
    opacity: 1;
    -moz-transform: translateY(0);
  }
}

@-o-keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -o-transform: translateY(2000px);
  }

  100% {
    opacity: 1;
    -o-transform: translateY(0);
  }
}

@keyframes fadeInUpBig {
  0% {
    opacity: 0;
    transform: translateY(2000px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  -moz-animation-name: fadeInUpBig;
  -o-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}
@-webkit-keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}

@-moz-keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -moz-transform: translateY(-2000px);
  }

  100% {
    opacity: 1;
    -moz-transform: translateY(0);
  }
}

@-o-keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -o-transform: translateY(-2000px);
  }

  100% {
    opacity: 1;
    -o-transform: translateY(0);
  }
}

@keyframes fadeInDownBig {
  0% {
    opacity: 0;
    transform: translateY(-2000px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  -moz-animation-name: fadeInDownBig;
  -o-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}
@-webkit-keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
}
@-moz-keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -moz-transform: translateX(-2000px);
  }

  100% {
    opacity: 1;
    -moz-transform: translateX(0);
  }
}
@-o-keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -o-transform: translateX(-2000px);
  }

  100% {
    opacity: 1;
    -o-transform: translateX(0);
  }
}
@keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    transform: translateX(-2000px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  -moz-animation-name: fadeInLeftBig;
  -o-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}
@-webkit-keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
}

@-moz-keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -moz-transform: translateX(2000px);
  }

  100% {
    opacity: 1;
    -moz-transform: translateX(0);
  }
}

@-o-keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -o-transform: translateX(2000px);
  }

  100% {
    opacity: 1;
    -o-transform: translateX(0);
  }
}

@keyframes fadeInRightBig {
  0% {
    opacity: 0;
    transform: translateX(2000px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  -moz-animation-name: fadeInRightBig;
  -o-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
}
@-webkit-keyframes fadeOut {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

@-moz-keyframes fadeOut {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

@-o-keyframes fadeOut {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

@keyframes fadeOut {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

.fadeOut {
  -webkit-animation-name: fadeOut;
  -moz-animation-name: fadeOut;
  -o-animation-name: fadeOut;
  animation-name: fadeOut;
}
@-webkit-keyframes fadeOutUp {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
  }
}
@-moz-keyframes fadeOutUp {
  0% {
    opacity: 1;
    -moz-transform: translateY(0);
  }

  100% {
    opacity: 0;
    -moz-transform: translateY(-20px);
  }
}
@-o-keyframes fadeOutUp {
  0% {
    opacity: 1;
    -o-transform: translateY(0);
  }

  100% {
    opacity: 0;
    -o-transform: translateY(-20px);
  }
}
@keyframes fadeOutUp {
  0% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(-20px);
  }
}

.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  -moz-animation-name: fadeOutUp;
  -o-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}
@-webkit-keyframes fadeOutDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
  }
}

@-moz-keyframes fadeOutDown {
  0% {
    opacity: 1;
    -moz-transform: translateY(0);
  }

  100% {
    opacity: 0;
    -moz-transform: translateY(20px);
  }
}

@-o-keyframes fadeOutDown {
  0% {
    opacity: 1;
    -o-transform: translateY(0);
  }

  100% {
    opacity: 0;
    -o-transform: translateY(20px);
  }
}

@keyframes fadeOutDown {
  0% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(20px);
  }
}

.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  -moz-animation-name: fadeOutDown;
  -o-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}
@-webkit-keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
  }
}

@-moz-keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -moz-transform: translateX(0);
  }

  100% {
    opacity: 0;
    -moz-transform: translateX(-20px);
  }
}

@-o-keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -o-transform: translateX(0);
  }

  100% {
    opacity: 0;
    -o-transform: translateX(-20px);
  }
}

@keyframes fadeOutLeft {
  0% {
    opacity: 1;
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    transform: translateX(-20px);
  }
}

.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  -moz-animation-name: fadeOutLeft;
  -o-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}
@-webkit-keyframes fadeOutRight {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(20px);
  }
}

@-moz-keyframes fadeOutRight {
  0% {
    opacity: 1;
    -moz-transform: translateX(0);
  }

  100% {
    opacity: 0;
    -moz-transform: translateX(20px);
  }
}

@-o-keyframes fadeOutRight {
  0% {
    opacity: 1;
    -o-transform: translateX(0);
  }

  100% {
    opacity: 0;
    -o-transform: translateX(20px);
  }
}

@keyframes fadeOutRight {
  0% {
    opacity: 1;
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    transform: translateX(20px);
  }
}

.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  -moz-animation-name: fadeOutRight;
  -o-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}
@-webkit-keyframes fadeOutUpBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
  }
}

@-moz-keyframes fadeOutUpBig {
  0% {
    opacity: 1;
    -moz-transform: translateY(0);
  }

  100% {
    opacity: 0;
    -moz-transform: translateY(-2000px);
  }
}

@-o-keyframes fadeOutUpBig {
  0% {
    opacity: 1;
    -o-transform: translateY(0);
  }

  100% {
    opacity: 0;
    -o-transform: translateY(-2000px);
  }
}

@keyframes fadeOutUpBig {
  0% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(-2000px);
  }
}

.fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  -moz-animation-name: fadeOutUpBig;
  -o-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig;
}
@-webkit-keyframes fadeOutDownBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
  }
}

@-moz-keyframes fadeOutDownBig {
  0% {
    opacity: 1;
    -moz-transform: translateY(0);
  }

  100% {
    opacity: 0;
    -moz-transform: translateY(2000px);
  }
}

@-o-keyframes fadeOutDownBig {
  0% {
    opacity: 1;
    -o-transform: translateY(0);
  }

  100% {
    opacity: 0;
    -o-transform: translateY(2000px);
  }
}

@keyframes fadeOutDownBig {
  0% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(2000px);
  }
}

.fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  -moz-animation-name: fadeOutDownBig;
  -o-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig;
}
@-webkit-keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
  }
}

@-moz-keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
    -moz-transform: translateX(0);
  }

  100% {
    opacity: 0;
    -moz-transform: translateX(-2000px);
  }
}

@-o-keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
    -o-transform: translateX(0);
  }

  100% {
    opacity: 0;
    -o-transform: translateX(-2000px);
  }
}

@keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    transform: translateX(-2000px);
  }
}

.fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  -moz-animation-name: fadeOutLeftBig;
  -o-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig;
}
@-webkit-keyframes fadeOutRightBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
  }
}
@-moz-keyframes fadeOutRightBig {
  0% {
    opacity: 1;
    -moz-transform: translateX(0);
  }

  100% {
    opacity: 0;
    -moz-transform: translateX(2000px);
  }
}
@-o-keyframes fadeOutRightBig {
  0% {
    opacity: 1;
    -o-transform: translateX(0);
  }

  100% {
    opacity: 0;
    -o-transform: translateX(2000px);
  }
}
@keyframes fadeOutRightBig {
  0% {
    opacity: 1;
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    transform: translateX(2000px);
  }
}

.fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  -moz-animation-name: fadeOutRightBig;
  -o-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig;
}




.new-item {
  opacity: 0;
  -webkit-animation: new-item-animation .3s linear forwards;
  -o-animation: new-item-animation .3s linear forwards;
  animation: new-item-animation .3s linear forwards
}

@keyframes new-item-animation {
  from {
    opacity: 0;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0)
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1)
  }
}

.restored-item {
  -webkit-animation: openspace .3s ease forwards,
    restored-item-animation .3s .3s cubic-bezier(0,.8,.32,1.07) forwards;
  -o-animation: openspace .3s ease forwards,
    restored-item-animation .3s .3s cubic-bezier(0,.8,.32,1.07) forwards;
  animation: openspace .3s ease forwards,
    restored-item-animation .3s .3s cubic-bezier(0,.8,.32,1.07) forwards
}

@keyframes openspace {
  to {
    height: auto
  }
}

@keyframes restored-item-animation {
  from {
    opacity: 0;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0)
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1)
  }
}

.removed-item {
  -webkit-animation: removed-item-animation .6s cubic-bezier(.55,-0.04,.91,.94) forwards;
  -o-animation: removed-item-animation .6s cubic-bezier(.55,-0.04,.91,.94) forwards;
  animation: removed-item-animation .6s cubic-bezier(.55,-0.04,.91,.94) forwards;
}

@keyframes removed-item-animation {
  from {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1)
  }

  to {
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    opacity: 0;
  }
}

@-webkit-keyframes new-item-animation {
  from {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0)
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

@-o-keyframes new-item-animation {
  from {
    opacity: 0;
    -o-transform: scale(0);
    transform: scale(0)
  }

  to {
    opacity: 1;
    -o-transform: scale(1);
    transform: scale(1)
  }
}

@-webkit-keyframes openspace {
  to {
    height: auto
  }
}

@-o-keyframes openspace {
  to {
    height: auto
  }
}

@-webkit-keyframes restored-item-animation {
  from {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0)
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

@-o-keyframes restored-item-animation {
  from {
    opacity: 0;
    -o-transform: scale(0);
    transform: scale(0)
  }

  to {
    opacity: 1;
    -o-transform: scale(1);
    transform: scale(1)
  }
}

@-webkit-keyframes removed-item-animation {
  from {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1)
  }

  to {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0
  }
}

@-o-keyframes removed-item-animation {
  from {
    opacity: 1;
    -o-transform: scale(1);
    transform: scale(1)
  }

  to {
    -o-transform: scale(0);
    transform: scale(0);
    opacity: 0
  }
}


@-webkit-keyframes flip {
  0% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  100% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

@keyframes flip {
  0% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  100% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

.animated.flip {
  -webkit-backface-visibility: visible;
  -ms-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip;
}

@-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotateX(-10deg);
    transform: perspective(400px) rotateX(-10deg);
  }

  70% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}

@keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    -ms-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotateX(-10deg);
    -ms-transform: perspective(400px) rotateX(-10deg);
    transform: perspective(400px) rotateX(-10deg);
  }

  70% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    -ms-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    -ms-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}

.flipInX {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}

@-webkit-keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotateY(-10deg);
    transform: perspective(400px) rotateY(-10deg);
  }

  70% {
    -webkit-transform: perspective(400px) rotateY(10deg);
    transform: perspective(400px) rotateY(10deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
}

@keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    -ms-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotateY(-10deg);
    -ms-transform: perspective(400px) rotateY(-10deg);
    transform: perspective(400px) rotateY(-10deg);
  }

  70% {
    -webkit-transform: perspective(400px) rotateY(10deg);
    -ms-transform: perspective(400px) rotateY(10deg);
    transform: perspective(400px) rotateY(10deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    -ms-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
}

.flipInY {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}

@-webkit-keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
}

@keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    -ms-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    -ms-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
}

.flipOutX {
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@-webkit-keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
}

@keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    -ms-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    -ms-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
}

.flipOutY {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
}

@-webkit-keyframes lightSpeedIn {
  0% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: translateX(-20%) skewX(30deg);
    transform: translateX(-20%) skewX(30deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: translateX(0%) skewX(-15deg);
    transform: translateX(0%) skewX(-15deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
}

@keyframes lightSpeedIn {
  0% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    -ms-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: translateX(-20%) skewX(30deg);
    -ms-transform: translateX(-20%) skewX(30deg);
    transform: translateX(-20%) skewX(30deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: translateX(0%) skewX(-15deg);
    -ms-transform: translateX(0%) skewX(-15deg);
    transform: translateX(0%) skewX(-15deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(0%) skewX(0deg);
    -ms-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
}

.lightSpeedIn {
  -webkit-animation-name: lightSpeedIn;
  animation-name: lightSpeedIn;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@-webkit-keyframes lightSpeedOut {
  0% {
    -webkit-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }
}

@keyframes lightSpeedOut {
  0% {
    -webkit-transform: translateX(0%) skewX(0deg);
    -ms-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    -ms-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }
}

.lightSpeedOut {
  -webkit-animation-name: lightSpeedOut;
  animation-name: lightSpeedOut;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}

@-webkit-keyframes rotateIn {
  0% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(-200deg);
    transform: rotate(-200deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateIn {
  0% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(-200deg);
    -ms-transform: rotate(-200deg);
    transform: rotate(-200deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

.rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
}

@-webkit-keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

.rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
}

@-webkit-keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

.rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight;
}

@-webkit-keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

.rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft;
}

@-webkit-keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

.rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight;
}

@-webkit-keyframes rotateOut {
  0% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(200deg);
    transform: rotate(200deg);
    opacity: 0;
  }
}

@keyframes rotateOut {
  0% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(200deg);
    -ms-transform: rotate(200deg);
    transform: rotate(200deg);
    opacity: 0;
  }
}

.rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut;
}

@-webkit-keyframes rotateOutDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}

.rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft;
}

@-webkit-keyframes rotateOutDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
}

.rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight;
}

@-webkit-keyframes rotateOutUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
}

.rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft;
}

@-webkit-keyframes rotateOutUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}

.rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight;
}

@-webkit-keyframes slideInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes slideInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}

@-webkit-keyframes slideInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes slideInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}

@-webkit-keyframes slideInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}

@-webkit-keyframes slideOutLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

@keyframes slideOutLeft {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

.slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft;
}

@-webkit-keyframes slideOutRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

@keyframes slideOutRight {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

.slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight;
}

@-webkit-keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

@keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

.slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
}

@-webkit-keyframes slideInUp {
  0% {
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes slideInUp {
  0% {
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}

@-webkit-keyframes slideOutDown {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}

@keyframes slideOutDown {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}

.slideOutDown {
  -webkit-animation-name: slideOutDown;
  animation-name: slideOutDown;
}

@-webkit-keyframes hinge {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%, 60% {
    -webkit-transform: rotate(80deg);
    transform: rotate(80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40% {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  80% {
    -webkit-transform: rotate(60deg) translateY(0);
    transform: rotate(60deg) translateY(0);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  100% {
    -webkit-transform: translateY(700px);
    transform: translateY(700px);
    opacity: 0;
  }
}

@keyframes hinge {
  0% {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%, 60% {
    -webkit-transform: rotate(80deg);
    -ms-transform: rotate(80deg);
    transform: rotate(80deg);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40% {
    -webkit-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    transform: rotate(60deg);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  80% {
    -webkit-transform: rotate(60deg) translateY(0);
    -ms-transform: rotate(60deg) translateY(0);
    transform: rotate(60deg) translateY(0);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  100% {
    -webkit-transform: translateY(700px);
    -ms-transform: translateY(700px);
    transform: translateY(700px);
    opacity: 0;
  }
}

.hinge {
  -webkit-animation-name: hinge;
  animation-name: hinge;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) rotate(-120deg);
    transform: translateX(-100%) rotate(-120deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }
}

@keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) rotate(-120deg);
    -ms-transform: translateX(-100%) rotate(-120deg);
    transform: translateX(-100%) rotate(-120deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    -ms-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }
}

.rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollOut {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(100%) rotate(120deg);
    transform: translateX(100%) rotate(120deg);
  }
}

@keyframes rollOut {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    -ms-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(100%) rotate(120deg);
    -ms-transform: translateX(100%) rotate(120deg);
    transform: translateX(100%) rotate(120deg);
  }
}

.rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut;
}


.rubberBandright {
  -webkit-animation-name: rubberBandright;
  animation-name: rubberBandright;
}

@-webkit-keyframes rubberBandright {
  0% {
    -webkit-transform: translateX(100px) rotate(0deg);
    transform: translateX(100px) rotate(0deg);
  }

  100% {
    -webkit-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }
}

@keyframes rubberBandright {
  0% {
    -webkit-transform: translateX(100px) rotate(0deg);
    -ms-transform: translateX(100px) rotate(0deg);
    transform: translateX(100px) rotate(0deg);
  }

  100% {
    -webkit-transform: translateX(0px) rotate(0deg);
    -ms-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }
}


.rubberBandleft {
  -webkit-animation-name: rubberBandleft;
  animation-name: rubberBandleft;
}

@-webkit-keyframes rubberBandleft {
  0% {
    -webkit-transform: translateX(-100px) rotate(0deg);
    transform: translateX(-100px) rotate(0deg);
  }

  100% {
    -webkit-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }
}

@keyframes rubberBandleft {
  0% {
    -webkit-transform: translateX(-100px) rotate(0deg);
    -ms-transform: translateX(-100px) rotate(0deg);
    transform: translateX(-100px) rotate(0deg);
  }

  100% {
    -webkit-transform: translateX(0px) rotate(0deg);
    -ms-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }
}


@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}







/* font icons */



@font-face {
  font-family: 'icomoon';
  src:url('fonts/icomoon.eot?rl788i');
  src:url('fonts/icomoon.eot?#iefixrl788i') format('embedded-opentype'),
    url('fonts/icomoon.woff?rl788i') format('woff'),
    url('fonts/icomoon.ttf?rl788i') format('truetype'),
    url('fonts/icomoon.svg?rl788i#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {
  font-family: 'icomoon';
  content: attr(data-icon);
  speak: none;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[class*="icon-"] {
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


.icon-holiday:before {
  content: "\e608";
}
.icon-fileExport:before {
  content: "\e607";
}
.icon-fileT:before {
  content: "\e606";
}
.icon-arrowUp:before {
  content: "\e604";
}
.icon-arrowDown:before {
  content: "\e605";
}
.icon-user1:before {
  content: "\e60d";
}
.icon-user12:before {
  content: "\e601";
}
.icon-crossa:before {
  content: "\e600";
}
.icon-heart:before {
  content: "\e022";
}
.icon-cloud:before {
  content: "\e024";
}
.icon-star:before {
  content: "\e023";
}
.icon-tv:before {
  content: "\e021";
}
.icon-sound:before {
  content: "\e020";
}
.icon-video:before {
  content: "\e01f";
}
.icon-trash:before {
  content: "\e01e";
}
.icon-key:before {
  content: "\e01c";
}
.icon-bulb:before {
  content: "\e000";
}
.icon-bubble:before {
  content: "\e006";
}
.icon-stack:before {
  content: "\e007";
}
.icon-cup:before {
  content: "\e008";
}
.icon-note:before {
  content: "\e009";
}
.icon-clock:before {
  content: "\e00a";
}
.icon-paperplane:before {
  content: "\e00b";
}
.icon-params:before {
  content: "\e00c";
}
.icon-banknote:before {
  content: "\e00d";
}
.icon-data:before {
  content: "\e00e";
}
.icon-world:before {
  content: "\e01a";
}
.icon-calendar:before {
  content: "\e012";
}
.icon-wallet:before {
  content: "\e017";
}
.icon-food:before {
  content: "\e013";
}
.icon-t-shirt:before {
  content: "\e014";
}
.icon-fire:before {
  content: "\e01b";
}
.icon-photo:before {
  content: "\e026";
}
.icon-lock:before {
  content: "\e027";
}
.icon-tag:before {
  content: "\e028";
}
.icon-camera:before {
  content: "\e029";
}
.icon-settings:before {
  content: "\e02a";
}
.icon-search:before {
  content: "\e02b";
}
.icon-phone:before {
  content: "\e02c";
}
.icon-news:before {
  content: "\e02d";
}
.icon-mail:before {
  content: "\e02e";
}
.icon-like:before {
  content: "\e02f";
}
.icon-menu:before {
  content: "\e030";
}
.icon-checkmark:before {
  content: "\e031";
}
.icon-enter:before {
  content: "\e034";
}
.icon-info:before {
  content: "\e035";
}
.icon-blocked:before {
  content: "\e036";
}
.icon-smiley:before {
  content: "\e037";
}
.icon-list:before {
  content: "\e038";
}
.icon-stats:before {
  content: "\e03b";
}
.icon-history:before {
  content: "\e602";
}
.icon-print:before {
  content: "\e60a";
}
.icon-bars:before {
  content: "\e603";
}
.icon-file-excel:before {
  content: "\e609";
}
.icon-arrow-left:before {
  content: "\e60b";
}
.icon-arrow-down:before {
  content: "\e60e";
}
.icon-arrow-up:before {
  content: "\e60f";
}
.icon-uniE603:before {
  content: "\e60c";
}


/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

.theWidth {width:100%;}


.mobile-table {
  width:100%;
  height: 400px;
  overflow: hidden;
  position: relative;
    -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -ms-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;
}


.mobile-table .table {
  position: absolute;
    -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -ms-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;


}

/* HIDES THE REBAL PAGE FROM SMALL DEVICES */

.rebalancing, .overlay ul li.rebalancingLink {display: none;}



/* ==========================================================================
   Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

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

  .intro .content {height: 300px;}


} /* end of 460 */


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

  .pagination ul li:first-child,
  .pagination ul li:last-child {width: 7%; font-size:13px; margin: 0px;}

.rebalancing {display: block;}

.landingPage .intro .content {
  height: 622px;
}

.intro .content {
  height: 622px;
}

.mainNav ul li a {font-size: 13px;}


.indexfilter .assetClass,
.indexfilter .strategyType,
.indexfilter .strategyStyle,
.indexfilter .results {width: 17.4%;
float: left;
margin-right: 40px;
margin-left:0px;
margin-bottom:54px;
margin-top:0px;
border-right: 1px solid #d5770e; }

.indexfilter .results {width: 27.4%;
border-right:none;

}

.indexfilter .assetClass {
padding-left: 60px;
}

.theWidth {width:100%!important;}


.intro h1 {display: block;}

.overlay ul li.rebalancingLink {display:block;}

.featuredProducts .fproduct ul li  {display: block;width: 29%;}

.featuredProducts .fproduct ul li {margin-right: 2%;}
.featuredProducts .fproduct ul li:nth-child(4n) {margin-right:0%;}

.featuredProducts .fproduct .underlying li {float:none; width: auto; text-align: left;}
.featuredProducts .fproduct .underlying li span:first-child {
  width: 218px;
display: block;}

.featuredProducts .fproduct .underlying li span:last-child {
  display: block;
font-weight: 600;
}

.featuredProducts .underlyings {
    padding: 54px 0 0 0;
    border-bottom: 1px solid #bcc2c9;
    margin-bottom: 54px;
 }


.featuredProducts .fproduct .mainProduct li {
border:none!important;
float: left;
width: 10%;
min-height: 100px;
margin-bottom: 54px;}

.featuredProducts .fproduct .mainProduct li .title {
  font-size: 16px;
margin-bottom: 13.5px;
text-transform: uppercase;}
.featuredProducts .fproduct .mainProduct li span:last-child {
font-size: 15px;
margin-top: 13.5px;
display: block;
font-weight: 600;}

.featuredProducts .fproduct .mainProduct li img {width:70%;}

.featuredProducts .underlying {float:left; width: 36%; margin-right: 2%;}
.featuredProducts .underlying li span:first-child {font-size:18px; margin-bottom: 9px; display: block;}
.featuredProducts .underlying li:last-child {
    height: 259px;
    overflow-y: auto;
    overflow-x: hidden;
}

.featuredProducts .product {float:right; width: 62%;}
.featuredProducts .fproduct .product li {
  width: 42.5%;
  min-height: 172px;
  float:left;
border: 1px solid #bcc2c9;
background: #f8f8f9;}
.featuredProducts .product li:last-child {margin:0;}

.featuredProducts .fproduct .product li span {font-size:18px; margin-top: 18px; display: block;}
.featuredProducts .fproduct .product li a {margin-top:18px; width:auto;}
.featuredProducts .fproduct .product li img {opacity: 0.8;}

.subProductList {padding-bottom:27px; border-bottom:4px double #bcc2c9;}
.subProductList ul li, .subProductList ul li div {border:1px solid #bcc2c9; border-radius: 4px;}
.subProductList ul li div {padding: 8%;}
.subProductList ul li {padding:1%!important; position: relative; border-bottom: 1px solid #D8D4CA;}
.subProductList ul li span.name {display: block; width:50%; float: left; font-size: 12px; font-weight: normal;}
.subProductList ul li span {font-size: 13px; font-weight: bold; display: block;}
.subProductList h4 {font-size:14px; border-bottom:4px double #bcc2c9; margin-bottom: 18px;
padding-bottom: 9px; text-overflow: ellipsis; overflow: hidden;}


    .nonUS .findProducts #bigSearch-form,
   .nonUS .findProducts #bigSearch {
    margin: 108px auto;
  }

    .nonUS .findProducts #bigSearch-form .search-bg button,
  .nonUS .findProducts #bigSearch .search-bg button {
      padding: 10px 27px;
      background-color: #115880 !important;
  }

    .nonUS .findProducts #bigSearch-form .search-bg input,
.nonUS .findProducts #bigSearch .search-bg input {
width: 80%;
padding: 22px 13px 15px 13px;
font-size: 27px;
}

.ui-tabs .ui-tabs-nav .ui-tabs-anchor i {display: none;}

.ui-tabs .ui-tabs-nav .ui-tabs-anchor span {
    display:block!important;
}

 }/* end of 768 */



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

  header #logo {
  float: left;
  padding: 0;
  margin: 0;
  }


  .intro .content {
  height: 420px;
  }

  .landingPage .intro .content {
  height: 622px;
}

  .mainNav ul li a {font-size: 13px; line-height: 27px; padding: 6px 0;}


  /*=========================================================================
  MY JP MORGAN
  ========================================================================*/

  .myjpmorgan .watchList {
    position:relative;
    float:left;
    width:212px;
    height: 386px;
    transition: all 500ms ease-in-out;
  }

  .myjpmorgan .watchList.closed {
    margin-left: -8px;
    width: 60px;
    transition: all 500ms ease-in-out;
  }

  .myjpmorgan .tablewrapper.full {
    width:93%;
    transition: all 500ms ease-in-out;
  }

  .myjpmorgan #watch_list_hide_show {
      position: absolute;
    bottom: 0;
    right: 0;
    display: block;
    background: #ebecef;
    padding: 10px 20px;
    text-decoration: none;
  }

  .myjpmorgan #watch_list_hide_show:hover,
  .myjpmorgan #watch_list_hide_show:focus,
  .myjpmorgan .watchList.closed .add-new-folder-small:hover,
  .myjpmorgan .watchList.closed .add-new-folder-small:focus {
    text-decoration: underline;
    background: #233545;
    color: #ffffff;
    color: #ffffff;
  }

  .myjpmorgan .watchList .add-new-folder-small {display: none;}

  .myjpmorgan .watchList.closed #myJPMPortfolioWatch span,
  .myjpmorgan .watchList.closed #myJPMPortfolioList span,
  .myjpmorgan .watchList.closed h3,
  .myjpmorgan .watchList.closed .addFolder {
    display: none;
  }

  form.addFolder.popOut {
    display: block!important;
    width: 245px;
    height:55px;
    background: #ebecef;
    position: relative;
    z-index: 2;
    border: 1px solid #bcc2c9;
    padding: 10px;
    box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
  }
    form.addFolder.popOut .form-group{
        margin-top: 5px;
        margin-left: 5px;
    }

   .myjpmorgan .watchList.closed .add-new-folder-small {
    display: block;
    padding: 15px 0;
    border:1px solid;
    text-decoration: none;
    text-align: center;
  }


  .myjpmorgan .watchList.closed #myJPMPortfolioWatch span.count,
  .myjpmorgan .watchList.closed #myJPMPortfolioList span.count {display: block;}

  .myjpmorgan .watchList h3,
  .myjpmorgan .myalerts h3 {
    text-align: left;
    margin: 0;
    margin: 0px 0 6px 0;
    border-bottom:1px solid #bcc2c9;
    font-size: 24px;
    padding-bottom: 9px;
  }

  .myjpmorgan .watchList.closed #myJPMPortfolioList li:hover a[data-id="deleteFolder"],
  .myjpmorgan .watchList.closed #myJPMPortfolioList li:focus a[data-id="deleteFolder"] {
  right: -4px;
}

  .myjpmorgan .watchList #myJPMPortfolioList,
  .myjpmorgan .watchList #myJPMPortfolioWatch {margin-top: 6px; border-top:1px solid #bcc2c9;}

  .myjpmorgan .watchList #myJPMPortfolioList {
    height: 198px;
    overflow-y: auto;
  }

  .myjpmorgan .watchList #myJPMPortfolioList li a:hover,
  .myjpmorgan .watchList #myJPMPortfolioList li a:focus {
        background:#233545;
        text-decoration: underline;
        color: #ffffff;
        border:2px dotted;
  }

    #myJPMPortfolioWatch li a:focus{
        background: #233545;
        color: #ffffff;
        border:2px dotted;
    }

  .myjpmorgan .tablewrapper {
    float:right;
    width:76%;
  }

  .myjpmorgan .tableOuter {
    height: 332px;
    overflow-y: auto;
    width:100%;}

   .myjpmorgan .tools form {display: inline-block; float: left; vertical-align: top; margin-bottom: 9px;}
   .myjpmorgan .myalerts ul {display: inline-block;vertical-align:top;}
  .myjpmorgan .tools ul {display: inline-block;vertical-align:top; float:right; margin-top: 10px;}
  .myjpmorgan .tools ul li,
  .myjpmorgan .myalerts ul li {display: inline-block;vertical-align:top;}
  .myjpmorgan .tools ul li a,
  .myjpmorgan .myalerts ul li a {display: block; padding: 0 9px;}
  .myjpmorgan input[type=checkbox] {visibility: visible; }
  #myjpmproductlist tbody tr td a {text-align: left;}

  .myjpmorgan .addToChart,
  .myjpmorgan th [data-id='item-selector'],
  .myjpmorgan [data-id='item-selector']
   {
    margin:0 auto;
    width:20px;
    height:20px;
    border:1px solid #bcc2c9;
    display: block;
    position: relative;
  }

  .myjpmorgan .addToChart img,
  .myjpmorgan th [data-id='item-selector'] img,
  .myjpmorgan [data-id='item-selector'] img {display: none;}

  .myjpmorgan .addToChart.addedtoChart img,
  .myjpmorgan th [data-id='item-selector'].selected img,
  .myjpmorgan [data-id='item-selector'].selected img {
    position: absolute;
    width:15px;
    top: 2px;
    left: 3px;
    display: block;
  }

  .myjpmorgan .alert-product-name {
    font-size: 16px; line-height: 1em;
    padding-bottom: 18px;
    border-bottom:1px dashed #F0F0F0;
  }

  .myjpmorgan .alert-type.bid-price-selected {display: inline-block; width:49%; vertical-align: top;}
  .myjpmorgan .alert-type.bid-price-selected.range {display: inline-block;}


  .myjpmorgan .alert-type.range {display: none;}
  .myjpmorgan .maturaty-date, .myjpmorgan .alert-values {margin-top:18px; }
  .myjpmorgan .alert-type h4,
  .myjpmorgan #alert_values label {font-size: 16px; line-height: 1em; text-align: left;}
  .myjpmorgan #alert_value {border:1px solid #F0F0F0;   width: 163px;}

  .myjpmorgan .alert-type ul li,
  .myjpmorgan .alert-type .dropdown-select,
  .myjpmorgan .arrange-by .dropdown-select ul li,
  .myjpmorgan .arrange-by .dropdown-select {
    cursor: pointer;
    border:1px solid #F0F0F0;
    padding: 9px;
    position: relative;
  }

  .myjpmorgan .arrange-by .dropdown-select {
    border: 1px solid #ebecef;
  }



  .dropdown-select:after {
  content: "";
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #7699c4;
  top: 17px;
  right: 20px;
  position: absolute;
}

  .myjpmorgan .alert-type ul li:hover,
  .myjpmorgan .alert-type ul li:focus {cursor: pointer; background:#A5C9F3; color: #fff; }

  .myjpmorgan .alert-type ul li.active {background:#A5C9F3; color: #fff; }

  .myjpmorgan #alert_values {width: 97%; margin-top: 18px;}
  .myjpmorgan #alert_values input {width:100%; border:1px solid #F0F0F0;}



.intro {
  background:#233545;
  background-size: cover;
  position: relative;
  background-repeat: no-repeat;
  background-attachment:fixed;
  opacity: 1;
  transition: opacity 1s ease;
}

.intro:before {
  content: "";
  background: url("/spweb/static/img/background-loginarea.jpg");
  background-size: cover;
  position: absolute;
  background-repeat: no-repeat;
  background-attachment:fixed;
  opacity: 0;
  width:100%;
  height:100%;
  transition: opacity 1s ease;
}

.intro.background-fade-in:before {
  transition: opacity 1s ease;
   opacity: 1;

}




header .content {
    padding: 9px 0 0 0;
}

.fixedHeader .content #search {top:17px; right: 0; }

 .mainChart, .find-fund, .orangeBackground {padding: 95px 0 90px;}


#search {
font-size: 13px;
padding: 0px 0 0 6px;
border: none;
width: auto;
top: 0px;
}

 #search ::-webkit-input-placeholder { /* WebKit browsers */
    color:    #233545;
    opacity: 1;
}

#search :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #233545;
    opacity: 1;
}
#search ::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #233545;
    opacity: 1;
}
#search :-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #233545;
    opacity: 1;
}

.icon-menu {display:none;}
.mainNav {
display: inline-block;
width: 100%;
margin: 9px 0 0 0;
padding: 0;
float: right;
background: #1c2a36;
}



.mainNav ul li {
float: left;
width: 100px;
border-bottom: 6px solid #1c2a36;
}

.mainNav ul li.current {
    border-bottom:6px solid #A5C9F3;
    border-top: 1px solid #1c2a36;
    border-right: 1px solid #1c2a36;
    border-left: 1px solid #1c2a36;
}


.mainNav ul li:hover,
.mainNav ul li:focus {
border-bottom:6px solid #A5C9F3;

}

.mobileNav {font-size: 21px;
width: 101px;
margin: 8px auto 0;
line-height: 2em;
text-transform: uppercase;
display: none;}
.mobileNav i {font-size: 40px; float:right;}

h1 {font-size:72px; line-height: 55px;}
h2 {font-size:48px; margin-bottom: 36px;}
h3 {font-size:36px;}
h4 {font-size:24px;}

  .home .intro p {
  font-size: 120px;
}


.largeText {
font-size: 120px;
line-height: 1em;
font-family: CelesteWeb, Georgia, "Times New Roman", Times, serif;
position: relative;
padding: 27px 0 63px 0;
}


.home .intro p {
font-size: 120px;
}



  .home .intro h1 {
  margin: 0 auto;
  font-size: 32px;
  position: relative;
  max-width: 960px;
  text-transform: uppercase;
  line-height: 1.9em;
  }

 .home.France .intro h1 {
  font-size: 24px;
  max-width: 960px;

  }

  .home.France .intro h1,
.home.Austria .intro h1,
.home.Germany .intro h1 {
font-size: 75px;

}

.home.Austria .intro h1,
.home.France .intro h1,
.home.Belgium .intro h1,
.home.Luxembourg .intro h1,
.home.Italy .intro h1 {
    font-size: 75px;
}


.featuredIndices > li > a > h2 {
  font-size: 40px;
}

.featuredIndices > li > a {
text-decoration: none;
}

.featuredIndices li {
width: 30%;
margin-right: 3%;
margin-bottom: 36px;
min-height: 15em;
float: left;

}


.timeline2 {position: relative; margin: 0 auto 1em auto; height: 3em; overflow: visible;width: 100%;}

.timeline2 ul {
position: relative;
top: 0px;
width: 84%;
display: block;
left: 0%;
margin: 0 auto;
}

.timeline2 #slider2 {
width: 100%;
position: absolute;
left: 0%;
top: 1em;
border-top: dashed 1px #CCC;
}
.timeLineResults ul {
position: relative;
padding: 22px 30%;
font-size: 13px;
width: 40%;
margin: 0 auto;
left: 0;
}


.custom, .timeline2 #slider2 {display: block;}

.timeLineResults ul {padding: 22px 30%; width:40%; }
.timeLineResults ul li label {display: inline;}

  h1 {font-size: 44px; line-height: 50px;}
  h2 {font-size: 70px; margin-bottom: 27px; line-height: 70px;
}
  h3 {font-size:36px;}
  h4 {font-size:24px;}

  .intro h1 {
font-size: 54px;
margin: 0.67em 0;
}


.lightOrange {
background: #ffffff;
padding-top: 95px;
}

.strategies .lightOrange {
padding-bottom: 95px;

}


.summarySec ul li {
width: 30%;
margin-right: 3%;
margin-bottom: 36px;
float: left;
text-align: center;
border-bottom: 1px solid #fff;
background:#D8D4CA;
padding: 27px;
}

.summarySec ul li.closeDates {width:57.7%; margin-right: 0;}

.summarySec ul li.levels,
.summarySec ul li.trends {
  width:43.8%;
}


.summarySec ul li.rebal {

width:95.3%;

}


.summaryFilter .timePeriod,
.summaryFilter .startDate,
.summaryFilter .endDate,
.summaryFilter .buttons { position: relative; margin-bottom: 0px;}


.graphHeaders .lastEffectiveTitle,
.graphHeaders .targetCompTitle {

 border-top:1px solid #D8D4CA;
}


.graphHeaders .lastEffectiveTitle,
.graphHeaders .targetCompTitle,
.half5050 .halfOne,
.half5050 .halfTwo {
  width:49.9%;
  float:left;
  padding: 27px 0;
  position: relative;}

.weightTotal .equalityWeightLast h3, .weightTotal .equalityWeightTarget h3 {
padding: 8px 10px 0 100px;
}

.selectedComp .compo {
width: 51.1%;
}

.blueGradBack {

  padding-left:60px!important;
  padding-right:60px!important;
  }

.moduleIndexLevelData, .moduleSummaryTable, .moduleRiskMeasure, .moduleReturnStatistics {
width: 30%!important;
float:left;
margin-right: 40px;
min-height: 254px;
margin-bottom: 54px!important;}


.blueBox {
padding: 27px 27px;
}

.summaryFilter {
background: #6e6e6e;
color: #FFFFFF;
padding: 54px 60px;
}

.moduleReturnStatistics {
margin-right: 0;
}




.summaryFilter .timePeriod,
.summaryFilter .startDate,
.summaryFilter .endDate,
.summaryFilter .buttons {width: 19.4%; float:left; margin-right: 80px;}


.toolsButtons .tool {
width: 19.7%;
}

.pagination ul li {display: inline-block;}


.copyright {float:right; margin: 6px 0; padding: 0;}
.footerlinks {float:left;width:60%;}
.footerlinks img {margin-right: 10px;}
.footerlinks img, .footerlinks ul, .footerlinks ul li {float:left;}
.footerlinks p {margin: 0; padding: 0;}

.footerlinks ul li a {
  display: block;
  border-left:1px solid #fff;
  padding: 2px 10px 0 10px;
  margin-top: 3px;
}

.featuredProducts,
.findProducts {
padding: 95px 0 90px;
}


}/* end of 980 */


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

  .mainNav ul li {width: 119px;}

  .mainNav ul li a {font-size: 16px; line-height: 27px; padding: 6px 0;}
  .pagination ul li:first-child,
  .pagination ul li:last-child {width: 12%; font-size:15px; margin: 0px;}

  .pagination.large-table ul li {width: 50px; font-size: 15px;}

  .top-filters .top-filter-links li { padding: 16px;}


  .featuredProducts .fproduct ul li  {display: block; float:left; width: 21%;}

  .featuredProducts .underlying {float:left; width: 39%; margin-right: 80px;}
  .featuredProducts .product {float:right; width: 54%;}
  .featuredProducts .underlying {float:left; width: 39%; margin-right: 2%;}


.productlists #tabs .content, #my_jp_morgan_content {max-width:90%;}

.content,
.breadcrumb {max-width: 1250px; position: relative; margin:0 auto; padding: 27px 0;}

.headerFirst {padding: 48px 0 39px 0!important;}
.headerFirst h2:first-child {margin:0 auto;}

.bookbuilding header .content,
header .content {padding: 9px 0 0 0; max-width: 1250px;}

.breadcrumb {padding:0px 0 32px 0;}


.fixedHeader .content {
padding: 0px;
}

.home .intro .content {
  height: 378px;
  padding: 129px 0 171px;
}

.intro .content {
height: 579px;

}

.mobileNav i {margin-top: 3px;font-size: 36px;}

.mobileNav {line-height: 2.2em;}

.intro .content {
max-width: 100%;
padding: 130px 0 123px;
}


.featuredIndices {
padding: 36px;
max-width: 1170px;
display: block;
margin: 0 auto;
}


.featuredIndices li {
width: 30%;
margin-right: 3%;
margin-bottom: 36px;
min-height: 15em;
}


.featuredIndices li h2 {
  line-height: 51px;
}


.timeline2 ul li {}
.timeLineResults ul li {
margin: 0;
padding: 0;
}


.moduleIndexLevelData, .moduleSummaryTable, .moduleRiskMeasure, .moduleReturnStatistics {
  width: 30.4%!important; }


.zoomViewResults div.textButtons ul li {
font-size: 1.3em;
}


.zoomView .zoomScroll div { width: 49%;}


.compositionTable, .targetCompositionTable, .weightTotal .equalityWeightLast, .weightTotal .equalityWeightTarget {
float: left;
width: 48.2%;
}

.pagination button {width: 15%;}

.pagination .info {width: 68.5%;}

.weightTotal .equalityWeightLast h3, .weightTotal .equalityWeightTarget h3 {
padding: 8px 10px 0 175px;
}

.selectedComp .compo {
width: 51.5%;
}


.pagination ul li:first-child, .pagination ul li:last-child {width: 47px;}


.blueBox {
padding: 27px 20px;
}

.indexInformation .informationwrap ul li span { width: 110px;}

.moduleIndexLevelData, .moduleSummaryTable, .moduleRiskMeasure, .moduleReturnStatistics {
margin-right: 52px;
}

.moduleReturnStatistics {
margin-right: 0;
}

.toolsButtons .tool {
width: 19.8%;
}

.compositionTable,
.equalityWeightLast {margin-right:40px;}


.compositionTable h3, .targetCompositionTable h3 {
font-size: 27px;
}

.jumpTo {
display: block;
width: 100px;
height: 100px;
border-radius: 100px;
position: absolute;
top: 444px;
left: 535px;
background: #A5C9F3;
color: #A5C9F3!important;
font-size: 72px;
line-height: 1.3em;
z-index: 2;
border:1px solid #a5c9f3;
}

.jumpTo img {width: 35px;}

.jumpTo:hover,.jumpTo:focus{
    border:1px solid #c6ccd3;
    background: #c6ccd3 !important;
}



.largeText {
font-size: 120px;
line-height: 1em;
padding: 27px 0 63px 0;
}


.home .intro p {
font-size: 120px;
}

.featuredProducts .fproduct  .subProductList ul li {
  margin-right: 2%;
  width: 21.3%;}

.featuredProducts .fproduct  .subProductList ul li:hover,
.featuredProducts .fproduct  .subProductList ul li:focus {
  background: #f8f8f9;
  transition: all 0.25s ease;
}

.featuredProducts .fproduct .subProductList ul li:nth-child(4n) {margin-right:0;}
.featuredProducts .fproduct .subProductList ul li a {text-decoration: none;}
.featuredProducts .fproduct .subProductList ul li a:hover,
.featuredProducts .fproduct .subProductList ul li a:focus {text-decoration: underline; color:#58718d;}

.featuredProducts .fproduct ul li {
margin-right: 6%;
}


.owl-prev,.owl-next {position: absolute; display: block;}
.owl-prev img,.owl-next img {height:300px;}

/*---------Implemented Navigation -----------*/
    .owl-prev {left:-17%; top:38%; border:2px dotted transparent; outline:none;}
    .owl-next {right:-17%; top:38%; border:2px dotted transparent; outline:none;}
    .owl-prev:hover,
    .owl-prev:focus,
    .owl-next:hover,
    .owl-next:focus {

        border:2px dotted #4c6178;
    }
/*------------------End of next previous -----------*/


  .myjpmorgan .tablewrapper.full {
    width:96%;
  }

}/* end of 1300 */


@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}



/* full screen overlay */

/* Overlay style */
.overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(51,51,51,0.9);
  z-index: 4;
}

/* Overlay closing cross */
.overlay .overlay-close {
  width: 80px;
  height: 80px;
  position: absolute;
  right: 20px;
  top: 20px;
  overflow: hidden;
  border: none;
  background: url(../img/cross.png) no-repeat center center;
  text-indent: 200%;
  color: transparent;
  outline: none;
  z-index: 100;
}

.overlay-close:focus {
    outline: white thin dotted;
}

/* Menu style */
.overlay nav {
  text-align: center;
  position: relative;
  top: 50%;
  height: 60%;
  font-size: 54px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.overlay ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: inline-block;
  height: 100%;
  position: relative;
}

.overlay ul li {
  display: block;
  height: 20%;
  height: calc(100% / 5);
  min-height: 54px;
}
.overlay ul li input{
	background: transparent;
	border: transparent;
	width: 100%;
	color: #fff;
	font-family: "amplitude-light","Arial Narrow",arial;
    font-size: 1em;
    line-height: 1.4;
}
.overlay ul li a {
  font-weight: 300;
  display: block;
  color: #fff;
  text-decoration: none;
  -webkit-transition: color 0.2s;
  transition: color 0.2s;
}

.overlay ul li input:hover,
.overlay ul li input:focus,
.overlay ul li a:hover,
.overlay ul li a:focus {
  color: #A5C9F3;
}

/* Effects */
.overlay-hugeinc {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.5s, visibility 0s 0.5s;
  transition: opacity 0.5s, visibility 0s 0.5s;
}

.overlay-hugeinc.open {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
}

.overlay-hugeinc nav {
  -webkit-perspective: 1200px;
  perspective: 1200px;
}

.overlay-hugeinc nav ul {
  opacity: 0.4;
  -webkit-transform: translateY(-25%) rotateX(35deg);
  transform: translateY(-25%) rotateX(35deg);
  -webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
  transition: transform 0.5s, opacity 0.5s;
}

.overlay-hugeinc.open nav ul {
  opacity: 1;
  -webkit-transform: rotateX(0deg);
  transform: rotateX(0deg);
}

.overlay-hugeinc.close nav ul {
  -webkit-transform: translateY(25%) rotateX(-35deg);
  transform: translateY(25%) rotateX(-35deg);
}

@media screen and (max-height: 30.5em) {
  .overlay nav {
    height: 70%;
    font-size: 34px;
  }
  .overlay ul li {
    min-height: 34px;
  }
}

.disclaimerContentContainer {
    display: none;
}

.disclaimerContent {
    height: 300px;
    max-width: 900px;
    overflow: auto;
    margin-bottom: 81px;
}

ul.bookbuilding-tabs li i.icon-params{
  display: inline-block;
}

@media only screen and (min-width: 1024px) {
  ul.bookbuilding-tabs li i.icon-params{
    display: none;
  }

}

.book-building .selected-product ul li {
  width: 50%;
  margin: 5px 0 6px 0;
}

.book-building .selected-product ul li span {
  display: inline-block;
  width: 44%;
}

.bookbuilding-tabs li {
  display: inline-block;
  text-align: center;
  padding: 1em;
  font-size: 18px;
  cursor: pointer;
  font-weight: 300;
  color: #233545;
}

.bookbuilding-tabs li.selected {
  border-color: transparent transparent #ffffff transparent;
  border-style: solid;
  border-width: 1px;
  color: #8ab2d5;
  background: #ffffff;
  border-bottom: 4px solid #8ab2d5;
}

.bookbuilding-tabs  {
  margin: 0 auto;
  padding: 0 1%;
  width: 88%;
  background: #fff;
  border-bottom: 1px solid #bcc2c9;
}

#orderHistProdSummary1 ul li span {
  font-weight: bold;
  margin-left: 10px;
}

*[jpm-class-enabled] {
  display: none;
}

*[jpm-class-enabled].enabled {
  display: inherit;
}


div#client_view_order_details {
    margin-top: 20px;
}


.bookbuilding .gravel .content {
  max-width: 100%;
}

.bookbuilding .gravel .row .field textarea,
.bookbuilding .gravel .row .field input[type=text] {
    width: 100%;
}


*[data-listview='cusipSearch'] li {
    border-bottom: solid 1px #EEE;
    border-right: solid 1px #DDD;
    padding: 10px;
    border-left: solid 1px #DDD;
    font-size: 14px;
    cursor: pointer;
}

*[data-listview='cusipSearch'] li.odd {
    background: #FAFAFA;
}

*[data-listview='cusipSearch'] li:hover {
    color: #000;
    background: #E8E8E8;
}

.gravel.error {
  padding: 20px 30px 30px 30px;
}
.gravel.error .content {
  max-height: 200px;
  overflow: auto;
}

.gravel.error h2.gravel-title.title {
  font-size: 22px;
  height: auto;
  width: 100%;
  margin-bottom: 1em;

}

.gravel.error .gravel-buttons input {
  margin: 10px 0 0 0;
}

.gravel.error .gravel-buttons {
  height: 40px;
}

.risk-content-container {
    min-width: 620px;
}

.reg-form label{
    color:#4a4747;
}

/*=============================================================
Spinner
==============================================================*/

#spinner_box {

    background: rgba(255,255,255,0.8);
    border: 1px solid rgba(255,255,255,0.8);
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    top: 0;
    left: 0;

}

.circular-spinner.spinner-x-lrg {
    width: 120px;
    height: 120px;
}
.circular-spinner {
    position:relative;
    background: url('../img/spinner.svg') no-repeat;
    width: 70px;
    height: 70px;
    margin: 20% auto;
    font-size: 10px;
    text-indent: -9999em;
    -webkit-animation: load8 1.1s infinite linear;
    animation: load8 1.1s infinite linear;
    z-index:2;
    border: 1px solid #ffffff;
    border-radius: 76px;
    top: -20px;
    padding: 15px;
}
.gpu {
    -moz-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}


/*=====================================
Animation
======================================*/

@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.terms-of-use-body {
  overflow: auto;
  height: 300px;
}

@media only screen and (min-width: 460px) {
  .terms-of-use-body {
    width: 400px;
  }

  .content-wrap{
    width: 400px;
  }
}

@media only screen and (min-width: 768px) {
  .terms-of-use-body {
    width: 700px;
  }

  .content-wrap{
    width: 700px;
  }
}

@media only screen and (min-width: 1024px) {
  .terms-of-use-body {
    width: 1000px;
  }

  .content-wrap{
    width: 1000px;
  }
}


.mainNav ul li.inv-website-link {
  width:177px;
}

#btnCancelDistReg:focus, #btnRegDist:focus, #btnOK:focus, #btnAccept:focus, #btnDeclineAgreement:focus {
    outline :2px dotted #115883;
    outline-offset: 3px;
}

/*Tooltip for ie*/

.tooltips {
    position: relative;
    display: inline;
}
.tooltips {
    position: absolute;
    width:175px;
    color: #000000;
    background: #FFFFFF;
    border:1px solid #000000;
    height: 30px;
    line-height: 30px;
    text-align: center;
    visibility: hidden;
    left:218px;
    font-size: 0.8em;
    margin-top: 10px;
}
.tooltips:after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 14%;
    margin-left: -8px;
    width: 0; height: 0;
    border-bottom: 8px solid #000000;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
}
.tooltipsInner {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 14%;
    margin-left: -7px;
    width: 0; height: 0;
    border-bottom: 7px solid #ffffff;
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
    z-index: 2;
}

.enable-access {
    background-color: unset;
    color: #666666;
    border: 1px solid #666;
    pointer-events: auto;
}
.enable-access:hover {
    color: #ffffff;
}
.disable-access {
    background-color: #58718d;
    color: #ffffff;
    border: 1px solid #666;
    pointer-events: none;
}
.intro .content .enterSite a.bigbutton:focus::after {
    content: '';
    width: 104%;
    height: 116%;
    border: 1px solid #fff;
    border-style: dotted;
    position: absolute;
    top: -8px;
    left: -9px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.login-box input:focus {
    outline: 1.5px solid #115883;
    outline-offset: 3px;
}
.intro .content .enterSite a.bigbutton:focus::after {
    content: '';
    width: 104%;
    height: 116%;
    border: 1px solid #fff;
    border-style: dotted;
    position: absolute;
    top: -8px;
    left: -9px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.login-box input:focus {
    outline: 1.5px solid #115883;
    outline-offset: 3px;
}
.intro .content .enterSite a.bigbutton:focus::after {
    content: '';
    width: 104%;
    height: 116%;
    border: 1px solid #fff;
    border-style: dotted;
    position: absolute;
    top: -8px;
    left: -9px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.login-box input:focus {
    outline: 1.5px solid #115883;
    outline-offset: 3px;
}

/* Overriding UI date picker classes*/
.ui-datepicker-trigger, .ui-datepicker-prev, .ui-datepicker-next {
    display: none;
}

td.ui-datepicker-unselectable {
    color: #CCC;
}
.gravel .gravel-buttons input:disabled {
    opacity: 0.7 !important;
    background-color: #868686 !important;
}

.reg-form fieldset ul>li input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #A5A5A5;
}
.reg-form fieldset ul>li input::-moz-placeholder { /* Firefox 19+ */
    color: #A5A5A5;
}
.reg-form fieldset ul>li input:-ms-input-placeholder { /* IE 10+ */
    color: #A5A5A5;
}
.reg-form fieldset ul>li input:-moz-placeholder { /* Firefox 18- */
    color: #A5A5A5;
}


fieldset.client-details.hidden ul>li input {
    opacity: 0.4;
}

li.selected {
    background-color: #58718d !important;
    outline-offset: 3px;
}
#logout input:focus,
.selection{
    outline: 1px dotted #ffffff;
    outline-offset: 2px;
}
#searchButton:focus{
    outline: 1px dotted #ffffff!important;
    outline-offset: 3px!important;
}
.downloadbutton:focus,
.distribution a:focus,
.payoutProfiles a:focus,
.alternatives a:focus,
.marketThemes a:focus{
    outline: 1px dotted #115883;
    outline-offset: 3px;
}

.product-details-tabs ul .ui-tabs-active a,
.resource-tabs li.ui-tabs-active a{
    border-width: 1px;
    color: #115880 !important;
    border-bottom: 4px solid #115880 !important;
    font-weight: 600;
}
#name:focus,
#company:focus,
#email:focus,
#phone:focus,
#comments:focus{
    outline: 1px dotted #115883;
    outline-offset: 3px;
}
.search-bg button{
    pointer-events: none;
}
.reg-form form input:invalid,
#contactUsForm input:invalid,
#contactUsForm textarea:invalid {
    border:1px solid #D90000!important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.helpData,
.reg-form,
.access-content-container,
.access-agreement-content,
.access-content-container .content{
    outline:none;
}

.nav-arrow{
    border: solid black;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 83px;
}

.right-arrow {
    margin-left: -115px;
    margin-top: 34px;
    transform: rotate(-44deg);
    -webkit-transform: rotate(-45deg);
}

.left-arrow {
    margin-left: 40px;
    margin-top: 34px;
    transform: rotate(136deg);
    -webkit-transform: rotate(135deg);
}
.highcharts-axis-labels text{
    color:#000000;
    fill:#000000;
}
.dhtmlPopupLink svg path{
    fill:#115883;
}
.gravel-close{
    color:#373737!important;
}
.gravel-close:hover{
    color:#ffffff!important;
}
.gravel-close:focus{
    outline :1px dotted #115883;
}
/* Error messages for date filters */

.err-msg {
    position: absolute;
    display: block;
    height: 21px;
    line-height: 21px;
    background: #9b4141;
    border-radius: 4px;
    color: #fff;
    font-size: 13px;
    white-space: nowrap;
    padding: 2px;
}

.err-msg.hidden {
    display: none;
}

.err-msg.issueDateFilter {
    top: 133px;
}

.err-msg.maturityDateFilter {
    top: 268px;
}

.pagination ul li .current {
    text-decoration: none;
}

a.jumpTo img{
    -webkit-filter: drop-shadow(1px 4px 2px #181B00);
    filter: drop-shadow(1px 4px 2px #181B00);
    -webkit-transform: skew(-5deg, 0deg);
    -ms-transform: skew(-5deg, 0deg);
    transform: skew(-5deg, 0deg);
}

ic {
    border: solid #000000;
    border-width: 0 8px 8px 0;
    display: inline-block;
    padding: 20px;
}
.downArrowLine {
    transform: rotate(47deg);
    -webkit-transform: rotate(45deg);
}
.smallSearch{
    border:1px solid #233545;
}
.bigSearchIcon{
    font-size:25px;
    color:#ffffff;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active{
    margin-bottom: -2px !important;
    border: 1px solid #ffffff;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active:hover,
.ui-tabs .ui-tabs-nav li.ui-tabs-active:focus
{
    margin-bottom: -2px !important;
    border: 1px solid #ffffff;
    border-radius: 0px!important;
}
.logoHighlighter{
    width: 155px;
    border-top: 30px solid #233545;
    position: absolute;
    left: -6px;
    top: -2px;
    z-index: -1;
}
.pdfIcon{
    color: #ec6161;
    font-size: 2.5em;
}
.pdfIconSmall{
    color: #ec6161;
    font-size: 1.5em;
    padding-right: 5px;
}
.resource-tab-content .product li{
    text-align: center;
}
#educationPdf{
    text-align: center;
    padding-bottom:20px;
}
.spinnerInnerDiv{
    width: 100px;
    height: 100px;
    margin-top: 15px;
    margin-left: 1px;
    border: 1px solid #ffffff;
    border-radius: 85px;
    z-index: 1;
}
.jpmSpinner {
    width: 140px;
    height: 140px;
    border: 11px solid #666666;
    border-radius: 50%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    z-index: 1;
    border-left-style: double;
    -webkit-animation: load8 1.1s infinite linear;
    -o-animation: load8 1.1s infinite linear;
    animation: load8 1.1s infinite linear;
    position: absolute;
    top: 40%;
    left: 45%;
}

.search.label-margin {
    margin-top: 5px;
}

.library-search-label {
    float: left;
    width: 100%;
}

.date-format-label {
    font-size: 13px;
}
#requiredField{
    margin-left:80%;
}
.button-as-href, .subNav ul li a{
    width:83px;
}

.mainNav a {
    margin: 1px;
}
.issueCompanyName{
    margin-left: 219px;
    margin-top: -30px;
}
.issueFirstName, .issueAddress, .issuePhone, .issueLastName,.issueZip, .issueCountry, .issueEmail{
    margin-left: 132px;
    margin-top: -30px;
}
.issueNameContact,.issueEmailContact,.issueCommentsContact{
    margin-top: -7px;
    margin-left: 172px;
}
.alignContactFields{
    margin-top: 20px;
}

.dateTitleInstruction{
    display: block;
    color: #283442;
    font-size: 14px;
    font-weight: 300;
    text-align: left;
    line-height: 1em;
    margin: 2px 0;
}

#labelMonth{
    float: left;
    margin-left: 13px;
}
#labelYear{
    float: right;
    margin-right: 60px;
}
.highcharts-line-series .highcharts-point,.highcharts-spline-series .highcharts-point{
    fill: rgba(49,119,166,0);
}

.issueFolderName{
    color: #C40505!important;
    background: none!important;
    margin-top: -11px;
}

.truncate {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.scrolling{
    overflow: hidden;
}
#newFolder{
    margin-top: 10px;
}
#myJPMPortfolioList li a[data-id="listItem"] {
    right: 0px;
}
table.favorites tr th:hover,
table.favorites tr th:focus {
    outline: 2px dotted #0101FF;
}

.requiredColor{
    color:#D90000;
}