/*=========================================
    REPLACES    
    nationsCarousel.css
    nationDetails.css
=========================================*/
/*=========================================
    CAROUSEL CONTAINER
=========================================*/
.pageCarouselBlock{
    display:block; 
    width:98%; 
   /* max-width:1825px; */
    margin:0 auto 25px;
}
@media screen and (min-width:431px) and (max-width:540px) {
    .pageCarouselBlock {
        margin: 45px auto 25px;
    }
}
@media screen and (max-width:430px) {
    .pageCarouselBlock{
        margin: 30px auto 25px;
    }
}
/*=========================================
    CAROUSEL: TouchCarousel CUSTOMIZATIONS
=========================================*/
.touchcarousel{
    width:100%;
    height:185px;
}
/***** Navigation Arrows *****/
.touchcarousel .arrow-holder {
    height: 100%;
    width: 45px;
    top: 170px; 
}

#carousel-image-and-text .arrow-holder {
    height: 45px;
}

.touchcarousel.grey-blue .arrow-holder.left {
    left: 1vw;
}

.touchcarousel.grey-blue .arrow-holder.right {
   right:1vw;
}
/***** Carousel Item *****/
  #carousel-image-and-text .touchcarousel-item {
      margin-right: 8px;
      width: 185px;
      height: 168px;
  }

  #carousel-image-and-text .item-block {
      width: 185px;
      height: 158px;
      display: block;
  }

      #carousel-image-and-text .item-block img,
      #carousel-image-and-text .item-block h4,
      #carousel-image-and-text .item-block p {
          float: left;
          position: relative;
          display: block;
          margin: 0;
      }

      #carousel-image-and-text .item-block img {
          display: block;
          width: 98%;
          margin: 0 auto;
          border-radius: 5px 5px 0 0;
          border: 1pt solid #555;
          padding: 0;
      }

      #carousel-image-and-text .item-block div {
          display: block;
          width: 99%;
          text-align: center;
          font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
          font-size: 16px;
          line-height: 25px;
          font-weight: 400;
      }

  #carousel-image-and-text .item-block {
      text-decoration: none;
      color: inherit;
  }

      #carousel-image-and-text .item-block h4 {
          font: bold 13px/20px Helvetica, Arial, sans-serif;
          color: #000;
          width: 158px;
          height: auto;
          padding: 2px 0 0 6px;
          -webkit-transition: color 0.2s ease-out;
          -moz-transition: color 0.2s ease-out;
          transition: color 0.2s ease-out;
      }

      #carousel-image-and-text .item-block:hover h4 {
          color: #1873c9;
      }

      #carousel-image-and-text .item-block p {
          font: normal 13px/20px Helvetica, Arial, sans-serif;
          color: #555;
          width: 158px;
          padding: 0 0 0 6px;
      }


  #carousel-image-and-text .scrollbar-holder {
      background: none;
      bottom: 0;
      height: 1px;
      left: 0;
      right: 0;
  }

  #carousel-image-and-text .scrollbar {
      background-color: transparent !important; /*removes faint black line at bottom of carousel*/
      bottom: 0;
  }

.touchcarousel-item {
  background-color: #181818;
  border: 1pt solid #555555;
  border-top: none;
  border-radius: 5px 5px 10px 10px;
  color: #fff;
}
/*  END  CAROUSEL: TouchCarousel CUSTOMIZATIONS
*/
/*=========================================
    CAROUSEL: Item Properties
=========================================*/
.itemNation {
    cursor: pointer;
    display: block !important;
    padding-top: 80px;
}

.itemDisabled {
    cursor: not-allowed;
    color: #777777;
}

.itemSelected {
    border: 2.2pt dotted #f5f5f5;
}

.placeUSACenter{
    display:block;
    width:1px; 
    height:1px; 
    /* float:right; */
    float:left;
}
/*  END  CAROUSEL: Item Properties
*/
/*=========================================
    NATION DETAILS: In Brief
=========================================*/
.nationNameHeaderBlock{
    display:block;
    width:100%;
    margin:62px 0 32px;
    text-align: center;
    font-family:"Montserrat Alternates", sans-serif;
    font-size:32px;
    font-weight:500;
}
.nationContentBoundary{
    display:block;
    margin:0 auto;
    height:auto;
    min-height:425px;
}
@media screen and (min-width:1190px) {
    .nationContentBoundary {
        width:74%;
        min-width:1174px;
    }
}
@media screen and (max-width:1189px) {
    .nationContentBoundary {
        width:98%;
    }
}

/*=========================================
    NATION DETAIL TAB MENU
=========================================*/
.nationTab {
    display:block; 
    width:180px; 
    padding:6px 12px; 
    border:1pt solid black; 
    border-radius:8px 8px 0 0; 
    background-color:#5cad9d; 
    text-align: center;
    font-size:20px; 
    font-weight:600; 
    color:black;
}
.nationTabContentBlock {
    display:table;
    width:100%;
    margin-bottom:60px;
    padding:24px 12px;
    border:1pt solid #444;
    border-radius:16px 16px 0 0;
}
/*============================================*/
.nationTabs {
    overflow: hidden;
    border: none;
    margin-left:10px;
    /* background-color: #f1f1f1; */
}

/* Style the buttons inside the nationTabs */
.nationTabs button {
    display:inline-block;
    border: 1pt solid black;
    border-radius: 8px 8px 0 0;
     outline: none;
    cursor: pointer;
    background-color: #51998b;
    transition: 0.3s;
    text-align: center;
    font-weight: 600;
    color: black;
}
@media screen and (min-width:412px) {
    .nationTabs button {
        width: 160px;
        padding: 6px 12px;
        font-size: 20px;
        margin-left:20px;
    }
}
@media screen and (min-width: 411px) {
    .nationTabs button {
        width: 130px;
        padding: 6px 10px;
        font-size: 16px;
        margin-left:20px;
    }
}
@media screen and (max-width: 410px) {
    .nationTabs button {
        width: 125px;
        padding: 6px 8px;
        font-size: 14px;
        margin-left:14px;
    }
}
/* Change background color of buttons on hover */
.nationTabs button:hover {
  background-color: #7ae5d0;
  color:#000;
}

/* Create an active/current tablink class */
.nationTabs button.active {
  background-color: #7ae5d0;
  color:#000;
}

#FactsInBrief {
    display:table;
}
/* Style the tab content */
.nationTabContent {
    display: none;
    width:100%;
    margin-bottom:60px;
    padding:24px 12px;
    border:1pt solid #444;
    border-radius:16px 16px 0 0;
}
@media screen and (min-width:1025px) {
    .nationTabContent {  
        min-height:86.05vh;
    }
}
@media screen and (width:1024px) {
    .nationTabContent {  
        min-height:86.05vh;
    }
}
@media screen and (min-width:768px) and (max-width:1023px) {
    .nationTabContent {  
        min-height:54.01vh;
    }
}
@media screen and (min-width:853px) and (max-width:912px) {
    .nationTabContent {  
        min-height:50.01vh;
    }
}

@media screen and (max-width:767px) {
    .nationTabContent {  
        height: auto;
    }
}

.nationBlogLink {
    position:relative; 
    z-index:200; 
    float:right; 
}
@media screen and (min-width:768px) {
    .nationBlogLink {
        display:block;
        margin-top:-110px; 
        right:0;
    }
}
@media screen and (max-width:767px) {
    .nationBlogLink {
        display:none;
    }
}
.nationBlogLink_mobile {
    position:relative; 
    z-index:200; 
    float:right; 
}
@media screen and (min-width:768px) {
    .nationBlogLink_mobile {
        display:none;
    }
}
@media screen and (max-width:767px) {
    .nationBlogLink_mobile {
        display:block;
        margin-top:-130px; 
        right:-22px;
    }
}

@media screen and (min-width:768px) {
    .nationGovItem {
        /* Optional: Add basic styling to see the divs */
        /* background-color: lightblue;
        border: 1px solid blue; */
        /* flex-basis: 30%; Optional: Control the initial size of the flex items */
        flex-basis: 32.3%;
    }
}

@media screen and (max-width: 767px) {
    .nationGovItem {
        display:block;
        width:98%;
        margin:0 auto 30px;
        height: auto;
    }
}
@media screen and (min-width:768px) {
    .nationGovernmentBlock {
        display: flex; /* Creates a flex container */
        justify-content: space-between; /* Distributes space between items */
        align-items: stretch; /* Makes items the same height */
        /* Optional: Set a fixed height for the container */
        /* height: 200px; */
    }
}
@media screen and (max-width: 767px) {
    .nationGovernmentBlock {
        display:block;
        width:98%;
        margin:0 auto;
        height: auto;
    }
}
.nationGovernmentBlock img {
    display:block;
    width:100%;
    margin:0 auto;
}


/*  END  NATION DETAIL TAB MENU
*/
.detailGovContentBlock {
    display:block; 
    width:100%;
}
.detailCaptionHeaderBlock {
    display:block; 
    width:100%; 
    height:32px; 
    padding-top:8px; 
    text-align:center; 
    color:#fff; 
    font-size:18px; 
    font-weight:500;
}
.detailCaptionBlock{
    display:block;
    width: 100%; 
    height:auto; 
    padding:16px 16px 28px 16px; 
    color: #fff;
    background-color: rgba(129, 129, 129, 0.10);
    border: 0.5pt solid #555555;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    font-size:16px; 
    line-height:21px; 
    font-weight:400;
}

.nationDetailHeader{
    display:block;
    width:100%;
    margin-bottom:20px;
    text-align: center;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size:22px;
    font-weight:500;
    color:#fff; 
}
@media screen and (min-width: 768px) {
    #nationNameTop {
        display:none;
    }
}
@media screen and (max-width: 767px) {
    #nationNameTop {
        display:none;
    }
}
.nationGlobe {
    display:block; 
    width:100%;
}
@media screen and (min-width: 768px){
    .nationGlobe {
        margin-bottom:22px;
    }
}
@media screen and (max-width: 767px){
    .nationGlobe {
        margin-bottom:60px;
    }
}
@media screen and (min-width: 768px) {
    #nationNameBottom {
        display:block;
        margin-bottom:42px;
        font-size: 32px;
    }
}
@media screen and (max-width: 767px) {
    #nationNameBottom {
        display:none;
    }
}
.nationCoatOfArms {
    display:block; 
    width:80%; 
    margin: 0 auto 50px;
}
@media screen and (min-width: 1180px){
    .nationCoatOfArms {
        padding-top:12px;
    }
}
@media screen and (max-width: 1179px){
    .nationCoatOfArms {
        padding-top:0;
    }
}
.nationFlag {
    display:block; 
    width:100%; 
    margin:0 auto 50px;
}
@media screen and (min-width: 1180px){
    .nationFlag {
       padding-top:12px;
    }
}
@media screen and (max-width: 1179px){
    .nationFlag {
        padding-top:0;
    }
}
.tblNationFacts{
    float:right;
    width:100%;
    height:100%;
    color:#fff;
    background-color: rgba(129,129,129,0.10);
    border:0.5pt solid #555555;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
@media screen and (min-width:1190px) {
    .tblNationFacts {
        font-size:20px;
        line-height:26px;
    }
}
@media screen and (max-width:1189px) {
    .tblNationFacts {
        font-size:14px;
        line-height:20px;
    }
}
.tdFactsSubheader{
    border:1pt solid #dfa437; 
    width:100%; 
    height: 50px; 
    background-repeat:repeat-x; 
    position:top; 
    border-radius: 8px;
}
.tdFactLabel{
    vertical-align: top;
    height:32px;
}
@media screen and (min-width:431px) {
    .tdFactLabel {
        padding-left: 40px;
    }
}
@media screen and (max-width:430px) {
    .tdFactLabel {
        padding-left: 5px;
    }
}
.tdFactText{
    vertical-align: top;
    height:32px;
}
/*  END  NATION DETAILS: In Brief
*/
/*=========================================
    NATION DETAILS: GOVERNMENT
=========================================*/
.nationsGovernment {
    display:flex;
    height:630px;
}
.boxNationsLegislature {
    flex: 1;
    height:100%;
    margin-bottom:36px;
}
.boxNationsLegislature img {
    display:block;
    width:96%;
    margin:0 auto;
}
.boxNationsCourt {
    flex: 1;
    height:100%;
    margin-bottom:36px;
}
.boxNationsCourt img {
    display:block;
    width:96%;
    margin:0 auto;
}
.boxNationsResidence {
    flex: 1;
    height:100%;
    margin-bottom:36px;
}
.boxNationsResidence img {
    display:block;
    width:96%;
    margin:0 auto;
}
.govImageCaption{
    display:block; 
    width: 96%; 
    margin:0 auto;
    height: auto; 
    background-color:#fff; 
    color:#000;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.captionTitle{
    display:block;
    width:96%;
    padding-top:16px;
    font-size: 18px;
    font-weight:600;
    text-align: center;
}
.captionDetails{
    display:block;
    width:96%;
    padding:10px 20px 10px 10px;
    font-size:16px;
    line-height:22px;
    text-align: left;
}

.nationHideGroupDetails {
    display:none;
}
.nationShowGroupDetails {
    display:block;
}

.nationPopulationCountBlock {
    display:block; 
    width:100%; 
    margin:0 auto;
    background-color: rgba(129, 129, 129, 0.10); 
    border: 0.5pt solid #555555;
    background-position:bottom;
    background-repeat:no-repeat;
    background-size:contain;
}
@media screen and (min-width:768px){
    .nationPopulationCountBlock {
        height:100%;
    }
}
@media screen and (max-width:767px){
    .nationPopulationCountBlock {
        height:265px;
    }
}
.nationPopulationCountBlock img {
    display:block;
    width:100%;
}
.nationPopulationValue {
    display:block; 
    width:100%; 
    margin: 0 auto; 
    text-align:center; 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    font-size:62px;
}
.nationPopulationUnit {
    display:block; 
    width:100%; 
    margin: 0 auto 34px; 
    text-align:center; 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    font-size:18px;
}

/*  END  NATION DETAILS: GOVERNMENT
*/