/*   PHOTONATURALS     */





/*  @import url("https://fonts.googleapis.com/css?family=Lato");   */

/* for testing  */ 
.border {      
border: 1px solid #cccccc;
}

/*  investigate  */
.log-in-set  {
text-align: left;
}

/* ------------------------------- */

body {
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  -webkit-appearance:none;
  letter-spacing: normal;
   }

.page-color {
  background-color: #efffff;
}

/*  standard color for all plates and nav buttons */
.bg-color {
background-color: #fffcfa;  
}

 /*  base shape of the whole page   */
.container {
  margin-bottom: 0px;
  padding: 0px;
  width: 100%; 
  max-width: 800px;
}


/*  do not change row and column   */
.row {
max-width: 800px;
padding: 0px;
margin: 0px;
}

.column {
padding: 0px;
margin: 0px;
margin-bottom: 8px;
margin-top: 8px;
}

/*   very top nav strip to all the Nclub websites  */
  .navbar1 {
    position: relative;
    width: 100%;
    height: auto;
    padding: 0px 40px;
    margin: 3px 0px 0px 0px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }

/*  nav strip for the website  */ 
  .navbar2 {
    position: relative;
    width: 100%;
    height: auto;
    padding: 0px 30px;
    margin: 0px 0px 10px 0px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
    
    
/*  not currently used  not sure what it was for....

   .navbar2 .title, .navbar2 .description { 
      font-size: 16px;
      color: #444;
      display: block; }  
*/






/* various form formats and text therein  */

input[type=text], select {
width: 100%;
padding: 7px 10px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
font-size: 18px;
font-weight: 400;
color: #000;
}

input[type=password], select {
width: 100%;
padding: 7px 10px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
font-size: 18px;
font-weight: 400;
color: #000;
}

input[type=select]  {
font-size: 18px;
font-weight: 400;
color: #050;

}

/* for all form input buttons - starting standard  */
input[type=submit], input[type=reset] {
	font-size: 16px;
	font-weight: 600;
	color: #fff;
	line-height: 1;
	padding: 12px 12px 12px 12px ;
	border: 1px solid #333;
	box-sizing: border-box;
	margin: 0;
	border-color: #aaa;
	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
	border-radius: .5em;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #393;  /* green */
  cursor: pointer;
}

input[type=submit]:hover,
input[type=submit]:focus {
    background: #000;
}

input[type=submit]:hover {
  background-color: #aaa; 
  color: white;
}

input[type=submit]:active {
    transform: scale(1.1);
}


/*  check differences in buttons */
button {
  color: #ffd;
  background: #45b;
  	padding: 4px 10px 5px 10px ;
  		border-radius: .5em;
}

.button-link input {
height: 30px;
font-size: 14px;
font-weight: 500;
color: #222;
line-height: 1;
padding: 0px 6px 2px 6px;
background-color: #eee;  
cursor: pointer;
}

/*  check-box standards SECTION   */
/* The container */
.checkbox-container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.checkbox-container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.checkbox-container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.checkbox-container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.checkbox-container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
/*  END  check box standards SECTION    */



   /* radio buttons  REVISIT WHEN NEXT IN USE  */   
   
   
/*   NOT IN USE -  keep for future

.radio1  {
  position: relative;
  top: -10;
  left: 170;
}

.radio2  {
  position: relative;
  top: -10;
  left: 275;
}

.radio3  {
  position: relative;
  top: -10;
  left: 380;
}

.radio4  {
  position: relative;
  top: -10;
  left: 480;
}

.radio5  {
  position: relative;
  top: -10;
  left: 580;
}
*/    

/*    radio button standard   */

/* The container */
.radio-container {
  position: relative;
  top: 0;
  left: 0;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.radio-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.radio-checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #fff;
  border-radius: 50%;
border: 1px solid #777; 
}

/* On mouse-over, add a grey background color */
.radio-container:hover input ~ .radio-checkmark {
  background-color: #999;
}

/* When the radio button is checked, add a blue background */
.radio-container input:checked ~ .radio-checkmark {
  background-color: #49c;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.radio-checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.radio-container input:checked ~ .radio-checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.radio-container .radio-checkmark:after {
 	top: 8px;
	left: 8px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #fff;
}


/*    END  radio button standard   */

/*   below item is added from flexy page */
.col-12 {
flex: 12;
}


/*   bottom section */



.footer {
border-radius: 18px;
padding: 10px;
margin: 0px 8px 60px 8px;
height: 160px;
box-shadow: 0px 0px 2px  #ccc, 0px 0px 2px #ccc;
text-align: center;
background-color: #eef3ee;
/* set to make grey LOOK less magenta */
ZZwidth: flex;
}


/*  what is .name? */
   
  .footer a {
}
  .footer .name {
    font-size: 18px;
    display: inline; 
    }

.footer-links   {
    font-size: 16px;
    line-height: 28px;
    display: inline; 
}  
    
 
/*   ELIMINATED
.bottom   {
height: 0px;
} */



/*  START   SECTION NORMALIZES THINGS ACROSS BROWSERS  */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/*  Show the overflow in IE and Edge */
button,
input { /* 1 */
  overflow: visible;
}

/* Remove the inheritance of text transform in Edge, Firefox, and IE.*/
button,
select { /* 1 */
  text-transform: none;
}

/*  This corrects the inability to style clickable types in iOS and Safari */
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}


/*   END  NORMALIZE  */


textarea {
width: 100%;
padding: 7px 10px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
font-size: 18px;
font-weight: 400;
color: #000;
}


/*   BODYFEST      */