* {box-sizing: border-box;}

body{
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  color: #FFF;
  background-color:#000;
  height: 100vh;
  margin: 0;
  background-image: url('/images/ChelsBGgs.jpg');
  background-position: right;
  background-size: cover;
 /* background-attachment: fixed;*/

  background-repeat: no-repeat;
}
@font-face {font-family: "CalamityJane"; src: url("/css/fonts/Calamity Jane NF Bold.ttf");}
@font-face {font-family: "Attract"; src: url("./fonts/Attractmorewomen.ttf");}
/* @font-face {font-family: "CalamityJane"; src:url("/fonts/Calamity Jane NF Bold.ttf");} */

h4 {font-family: "Attract"; font-optical-sizing: auto; margin-top: 1px; margin-bottom: 1px;}
h5 {margin-top: 0px; text-align: center;}

/*
=======================================================================================================================
*/

.mySlides {display:none;}
.scrollable-element { scrollbar-color: #000 #000;}
.scrollable { display:none;}
.fa { padding: 10px; font-size: 20px; width: 60px; text-align: center; text-decoration: none; border-radius: 50%; }
.social-icons {text-align: center; }
.grid{
	display: grid;
	grid-template-columns: 40% 60%;
	grid-template-areas:
	"title content ."
  "sidebar content ."
}
.title { /*border: #FFF; border-style: solid; border-width: 2px;*/
    grid-area: title; text-align: center; min-width: 350px;}
.sidebar { /*border: #FFF; border-style: solid; border-width: 2px; */
  grid-area: sidebar; min-width: 350px;}
.content { /*border: #FFF; border-style: solid; border-width: 2px; */
  grid-area: content; height: 100vh;}

  .warpper{
    display:flex;
    flex-direction: column;
    align-items: center;
  }
  .tab{
    cursor: pointer;
    padding:10px 20px;
    margin:0px 2px;
    background:#000;
    display:inline-block;
    color:#fff;
    border-radius:3px 3px 0px 0px;
    box-shadow: 0 0.5rem 0.8rem #D3D3D3D3;
  }
  .panels{
    background:#000000;
    box-shadow: 0 2rem 2rem #00000080;
    min-height:200px;
    width:100%;
    max-width:700px;
    border-radius:3px;
    overflow:hidden;
    padding:20px;
    overflow-y: auto; 
    height: 500px;
  }
  .panel{
    display:none;
    animation: fadein .8s;
  }
  
  @keyframes fadein { from { opacity:0; } to { opacity:1; } }
  .panel-title{ font-size:1.5em; font-weight:bold; padding-bottom: 13px; }
  .radio{ display:none; }
  #one:checked ~ .panels #one-panel, #two:checked ~ .panels #two-panel, #three:checked ~ .panels #three-panel{ display:block }
  #one:checked ~ .tabs #one-tab, #two:checked ~ .tabs #two-tab, #three:checked ~ .tabs #three-tab{ background: #000000;  color:#FFFFFF; border-top: 3px solid #000; }
  img { filter: grayscale(100%); }