/*
Styling for title page and about/credits pages. 
*/

body {
	
    padding:0;
    margin:0;
    color:#010C14;
    
  font-family: 'Lato', 'Helvetica', sans-serif;
}
#content {
    position:relative;
    display: flex;
	align-items: center;
	justify-items: center;
    flex-flow:column;
    width:100%;
    padding:0;
    margin:0;
	background: #CFE9FF;
    
background: linear-gradient(0deg, #ECF9FF 70%, #CFE9FF 100%);
	min-height:100vh;
/*	color: white;*/
    overflow:hidden;
}
#content.credits {
    background-image: linear-gradient(0deg, #0c698a 10%, #CFE9FF 90%) !important;
}

.align-center {
    text-align: center;
}
#content .dinner-table {
    position:absolute;
    bottom:0;
    width:120%;
    top:50%;
    left:-10%;
    right:110%;
    background:#c0cbcf;
    overflow:hidden; 
    background-blend-mode:darken;
    background-repeat: repeat-x;
    background-color:#fff;
    background-size:auto;
    background-position: bottom center;
    content:'';
    border-radius:100% 100% 0 0;
    box-shadow: 0 -10px 100px rgba(0,50,50,.2);
}

#content .dinner-table:before {    
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    content:'';
    background-blend-mode:darken;
     background: linear-gradient(0deg, rgba(10,15,15,0)50%, rgba(140,145,140,.5) 100%);
   background-size:auto;
    opacity:1;
    
}

#content .backdrop{
    position:absolute;
    opacity:.2;
    display:block;
    top:0;
    left:0;
    right:0;
    bottom:0;
    content:'';
    background-color:#C6DDEB;
    background-size: cover;
	background-repeat: no-repeat;
	background-position: center bottom;
    
    background-blend-mode:luminosity;
}


#photo-credit {
	position: absolute;
	right: 5px;
	bottom: 5px;
	color: white;
	text-align: right;
	background-color: rgba(0,0,0,0.8);
	padding: 5px;
	border-radius: 5px;
    font-size:.8rem;
    text-transform: uppercase;
}
#photo-credit a {
	color: #9cf;
    font-size:.9rem;
    text-transform: none;
}



.intro-video-container {
    position:relative;
    background: rgb(13,55,106);
    background: linear-gradient(0deg, rgba(13,55,106,1) 0%, rgba(12,105,138,1) 100%);   
    width:calc(80% - 8px);
    margin:auto;
    border:4px solid white;
    box-shadow: 0 10px 20px rgba(0,0,0,.2);
}
    .intro-video {
        width:100%;
        height:auto;
    }
.title-page-container {
    position:relative;
    display:flex;
    flex-flow:column;
    align-items: center;
    justify-content: center;
/*	background-color: #eee;*/
	color: #222;
	padding: 1em 2em;
	border-radius: 1em;
/*	border: 2px solid #555;*/
    margin:1em  20px auto 20px;
/*    box-shadow:0 0 100px rgba(0,0,0,.5);*/
    max-width:740px;
    width:calc(100% - 4em);
/*    z-index:1;*/
}

#main-title.title-page-container {
    max-width:1080px.
}

.title-page-container  .icon-container {
    position:absolute;
    width:150px;
    height:100px;
    left:calc(50% - 75px);
    top:-50px;
}

.title-text {
    text-align: center;
}

.brand-container {
    background:#E8F4FC ;
}

.brand #title,.brand h1 {
  text-indent:-10000px; 
    height:0;
    margin:0;
}

.brand {
    width:100%;
}
.brand img {
    width:70%;
    height:auto;
    max-width:340px;
}
@media only screen and (orientation:landscape) and (max-width : 1280px ) {
    .brand img {
        width:40%;
        min-width:220px;
    } 
    .title-text h2 {
    font-size:1.3rem;
    }
} 

.title-text h2 {
    text-transform: uppercase; 
    margin:0;
    letter-spacing: .2em;
    color:#6D6B69;
}
.title-page-container  h3 {
    color:#555;
    font-size:1.2rem;
    font-style: italic;
    margin:2px auto;
    
}
.title-page-container  p {
    margin:0;
    padding:10px 0;
/*    text-align: center;*/
    font-size:1rem;
}


/* Style the tab */
.nav {
    position:absolute;
    top:10px;
    right:10px;
    overflow: hidden;
    display:flex;
    justify-content: stretch;
    align-items: stretch;
    padding:5px 0;
    z-index:1;
    
}
#credits-nav-container.nav {
    right:auto;
    left:10px;
}

.nav a {
    display:flex;
    flex-grow: 1;
    margin:auto;
    font-weight:bold;
    text-decoration: none;
}

.nav a.nav-link {
    text-transform:uppercase;
    color:#333;
    margin: auto;
    padding:4px 8px;
    font-size:.9rem;
    border-left: 1px solid #333;
}
.nav a.nav-link:first-child {border:0;}

.nav a.nav-link:hover {
    text-decoration:underline;
}
/* Style the buttons that are used to open the tab content */
.nav a.lang-toggle,
a.round-btn {
  background-color: transparent;
    color:#4e256f;
  border: 2px solid #4e256f;
    border-radius:25px;
  outline: none;
  cursor: pointer;
display:block;
    flex-grow: 1;
  padding: 5px 6px;
  transition: 0.3s;
    margin:2px;
    font-weight:bold;
    font-size:1rem;
    text-decoration: none;
    
}




/* Change background color of buttons on hover */
.nav a.lang-toggle:hover,a.round-btn:hover {
  background-color: rgba(255,255,255, .8);
}

.title-text {
    padding-bottom:10px;
}
.choices-menu {
        background: rgba(220,220,220,.5);
    box-shadow: 0 0 10px rgb(220, 220, 210, 1);
    display:flex;
    flex-direction: column;
/*    padding:10px 0 0;*/
/*border-top:1px solid #ccc;*/
}

.choices-menu  ul {
    list-style: none;
    padding:0;
    display:flex;
    margin:0;
    flex-grow: 1;
    height:100%;
}

.choices-menu  li {
    display:flex;
    justify-content: center;
    flex-grow: 1;height:100%;
}
.choices-menu  li a.btn {
    min-width:150px;
}
.button-container {
    display:flex;
    justify-content: center;
    margin-top:10px;
    padding:4px;
}
.button-container button {
    
}
 a.btn span.fas {
    margin:0 10px 0 auto;
}
.centered-text {
    margin:auto;
}
  a.btn span.age-group-text {
    margin:0 -10px 0 auto;
}
 a.btn, button.btn {
     max-width:320px;

    display:flex;
    text-decoration: none;
    padding:10px 5px;
    font-weight:bold;
    text-align: center;  
    align-items: center;
    flex-grow: 1;
    height:100%;
    border-radius:20px;
    margin:2px 4px;
    font-size:1rem;
      background-color: #7A0073;
    color:white;
  border: 3px solid rgba(255,255,255,.9);
    transition:all .5s ease-in-out;
}
 a.btn:hover, button.btn:hover {
      background-color: #9A0093;
    border-color:rgba(255,255,255,1);
}
 a.btn:active {
    
      background-color: #8A0083;
    transform:scale(.95);
}
.modal-overlay {
    visibility: hidden;
    position:fixed;
    justify-content: center;
    align-items: center;
    background:rgba(0,0,0,.4);
     backdrop-filter: blur(2px);
    top:0;
    bottom:0;
    left:0;
    right:0;
    opacity:0;
    transition:opacity .3s ease;
}
.modal-container {
        visibility: hidden;
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
    pointer-events: none;
    left:0;
    top:0;
    bottom:0;
    right:0;
    
    display:flex;
    opacity:0;
    transform:scale(.7);
    transition:all .3s ease;
}

/* The Modal (background) */
.modal {
    position: relative;
    pointer-events:auto;
  overflow: auto; /* Enable scroll if needed */
  background-color: #f0f0f0;
    margin:auto;
    padding:20px;
    border-radius:5px;
    
    box-shadow: 0 0 10px rgb(220, 220, 210, 1);
}
.modal-active {
    visibility: visible !important;
    opacity:1 !important;
    transform:scale(1);
}
.modal h2 {
    text-align: center;
}
.modal p {
    margin:auto;
}

#CLOSE-MODAL {
 position:absolute;
    right:10px;
    display:flex;
    justify-content: center;
    align-items:  center;
    height:25px;
    width:25px;
    border:0;
    top:0;
    right:0;
    color:#888;
    border-radius:50%;
    background:rgba(255,255,255,0);
}
#CLOSE-MODAL:hover {
    color:#222;
    background:rgba(255,255,255,1);
}
/* Go from zero to full opacity */
@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}


/**** 
About Credits
*****/

#credits-container, #guide-container {
    background:#fff;
    color:#010C14;
    margin:10px auto auto;
  
    max-width:600px;
    padding:10px 40px 20px;
    box-shadow: 0 0 10px rgba(0,0,0,.3);
    border-radius:10px;
    justify-content: center;
    display:flex;
    flex-direction: column;
    margin-bottom:20px;
}



#credits-container>div {
    
}
#credits-container h1, , #guide-container h1 {
    margin:.5em auto .5em;
    color:#404D55;
}
#credits-container h3 , #guide-container h3 {
    margin:1em auto .5em;
    color:#404D55;
}

#credits-container ul {
    margin:auto auto 2em;
    list-style: none;
    padding:0;
}

#credits-container ul li {
    margin:.25em auto .5em ;
}

#guide-container li {
    margin:.25em auto .75em ;
}

#credits-container p, #guide-container p {
    line-height:1.5em;
}
#credits-container p {
    font-size:.95em;
}
.logos img
     {  max-height:100px;
     }
 @media (max-width:640px) {
     #credits-container, #guide-container { 
    width:calc(90% - 20px);
     padding:10px 20px 20px;
     }
     
     
}
@media  (max-width:960px) {
    .title-page-container  {
        
        margin:40px 0 0 0;
    }
}

@media  (max-width:640px) {
    .title-page-container  {
        border-radius:0;
        border:0;
        margin:50px 0 0 0;
        padding:10px 5px;
    }
    .modal {
        width:80%;
   }
    .title-text h2 {
    font-size:1.2rem;
    }
    .choices-menu ul {
        flex-direction: column;
        justify-content: center;
    }
}

@media (orientation:portrait) and (max-width:768px) {
    .intro-video-container {
        width:calc(100% - 8px);
    }
}

footer {
 display:flex;
background:white;
    width:100%;
}

.footer-container {
    padding: 1em 2em;
    width:calc(100% - 4em);
}
footer p {
    font-size:.9rem;
    line-height:1.3;
    color:#444;
}

.screenshots img {
    width:100%;
    height:auto;
    border:2px solid white;
    margin:4px;
}
.screenshot-group div {
    display:flex;
    flex-flow: row;
}

.screenshot-group  div img {
    width:50%;
}

.brand-container {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:0;
    background: rgb(232,244,252);
background: radial-gradient(circle, rgba(232,244,252,1) 0%, rgba(28,192,253,1) 100%);
}
.brand-container .brand {
    margin:auto;
    width:50%;
}
.brand-container .brand {
    text-align: center;
    padding:15px;
}

.brand-container .brand img {
    width:50%;
    max-width:400px !important;
}
#main-title {
    display:flex;
    justify-content: center;
    align-items: flex-start;
}
#hero {
    background:#004493;
background: linear-gradient(180deg, rgba(0,68,147,1) 0%, rgba(1,45,113,1) 100%);
    margin:0;
    width:95%;
    display:flex;
    padding:0 0% 0 5%;
    flex-flow:row;
    justify-content: center;
    
}
#hero .hero-text {
    width:50%;
    margin:auto;
    margin-right:10px;
    flex-grow: 1;
}
#hero .hero-image {
    display:block;
    width:50%;
    content:' ';
    margin:0 auto;
    margin-left:10px;
    flex-grow: 1;
        background-image:url("../myplate-withchart.png" );
    background-size:cover;
    background-repeat: no-repeat;
}
#hero .hero-image:before {
    display:block;
    content:'';
}

.hero-image img {
    width:100%;
}
#hero p.lead {
    color:#fff;
    font-size:1.2rem;
    line-height:1.5;
}
.region-container {
   width:90%;
    padding:10px 5%;
    margin:auto;
    display:flex;
    flex-flow: column;
    background:#F0F1F2;
}
.region-container h2 {
   text-align:left ;
    font-size:1.4rem;
    color:#004493;
    border-bottom:1px solid #004493;
}


.region-choices ul { 
list-style: none;
    padding:0;
    display:flex;
    flex-wrap: wrap;
    width:100%;
/*    justify-content: space-evenly;*/

}
.region-choices ul li {
    display:flex;
    flex-flow:column;
    justify-content: center;
    align-items: center;
    width:23%;
    margin:1%;
    flex-grow: 1;
    max-width: 48%;
}
.region-choices ul li.stretch {
    width:48%;
    background:#fff;
    border-radius:8px;
}
.region-choices ul li.stretch>div {
    padding:25px;
    margin:auto;
}
a.region-btn {
    width:100%;
    position:relative;
    display:flex;
    flex-flow:column;
    border-radius:8px;
        margin:0;
    padding:5px 0 10px 0;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color:#6D6B69;
    color:#004493;
    text-transform: uppercase;
    font-weight:bold;
    transition:all .5s ease-out; 
    
}
a.region-btn .region-icon  {
    position:relative;
    width:100%;
    max-width:150px;
    margin:auto;
    display:flex;
    justify-content: center;
}
a.region-btn .region-icon:before  {
    position:relative;
    display:block;
    padding-top:100%;
    content:'';
}


a.region-btn:before {
}
a.region-btn img {
    position:absolute;
    top:0;
    width:100%;
    margin:auto;
}
a.region-btn:hover {
    background:rgba(255,255,255,1);
    transform:scale(1.05);
}
a#region-nm {  
}

a#region-pr { 
}
.region-choices ul li.stretch p a {
    color:#8B0285}
.logo-container img {
    max-width:430px;
}
@media (max-width:720px) {
    .brand-container .brand img {
    width:70%;
}
    
    #hero {flex-wrap: wrap}
    #hero .hero-text {
    width:100%;
        
}
    #hero .hero-image {
        width:100%;
        max-width:400px;
        margin:auto;
    }
    
    #hero .hero-image:before {
        padding-top:50%;
    }
    #hero p.lead{font-size:1.1rem;line-height: 1.3;}
    .region-choices ul li {
    width:48%;
    margin:1%;
}
    .region-choices ul li.stretch {
         width:98%;
        max-width:100%;
    }
    
}


@media (min-width:1366px) {
    #hero {
        padding:0 0 0 10%;
        width:90%;
    }
    #hero .hero-text {
    width:55%;
    margin-right:5%;
}
#hero .hero-image {
    width:40%;}

    #hero p.lead{font-size:1.5rem;line-height: 1.5;}
    
    .region-container {
   width:80%;
        padding:10px 10%;}
    a.region-btn .region-icon  {
        max-width:180px;}
    
/*
    .region-choices ul li {
    width:48%;
    margin:1%;
}
    .region-choices ul li.stretch {
         width:98%;
    }
*/
    
}
img.accessiblity-icon {
        max-width:120px;
        height:auto;
    text-align: center;
    margin:auto;
    }