:root{
  --gray-1: #333333;
  --gray-2: #545454;
  --gray-3: #747474;
  --gray-4: #959595;
  --gray-5: #b6b6b6;
  --gray-6:#d6d6d6;
  --gray-7:#F7F7F7;
  --white:#FFFFFF;
  --navy:#1C3F75;
  --yellow: #FEC303;
  --yellow-d: #e9bd1e;
  --ltyellow: #FFF1C2;
  --mustard-0:#F8F7F2;
  --mustard-1:#EAE6D6;
  --mustard-2:#F3F1E4;
  --mustard-3:#FCFAED;
  --mustard-4:#DDD7C5;
  --mustard-5:#CEC5A1;
  /* --winered:#941C2F; */
  --ctgreen:#037F8C;
  --bs-table-accent-bg:#FCFAED;
  --bs-table-accent-bg:red;
 
  /* #e0403c */
  --playingcards: #EF6D3A;
  --playingcards-d:#C45630;
  --boardgames: #ffd81b;
  --boardgames-d: #e99b15;
  --pebblegames:#D68C63;
  --pebblegames-d:#AF7156;
  --spatialgames:#6CB7A0;
  --spatialgames-d:#5A9682;
  --jodogyan:#3A99D8;
  --jodogyan-d:#273642;
  --memoryampmusic:#D30202;
  --memoryampmusic-d:#b20707;
  --icebreaker:#e73465;
  --icebreaker-d:#AF1252;
  

}
body{
  color: var(--gray-1);
}
a{
  color: var(--gray-1);
}
a:hover{
  color: #000000;
}
.bg-light{
  background-color: var(--gray-3);
}

.dropdown-menu{
  background-color: rgba(250, 255, 255, 0.9) !important;
  font-size: .9rem;
  color: var(--gray-1) !important; 
}
.dropdown-item{
color: var(--gray-1);

}
.logove{
max-width: calc(100vw - 120px);
}
/* for testing purpose, temporary */
.temp-menu a{
  padding-right: 10px;
  padding-left: 10px;
  text-decoration: none;
  border: 0;
  font-weight: 600;
  text-transform: uppercase;
}
.bdr-red{
border: solid 1px red;
}
.bdr-green{
border: solid 1px-green;
}
.bdr-aqua{
border: solid 1px aqua;
}
.bdr-fuchsia{
border: solid 1px fuchsia;
}
.bg-yellow{
background-color:greenyellow;
}
.bg-pink{
  background-color:bisque;
}

/* Spacing */
.mt-6{ margin-top: 4em;}
.mt-7{ margin-top: 5em;}
.mt-8{ margin-top: 6em;}
.mt-9{ margin-top: 8em;}
.mb-6{ margin-bottom: 4em;}
.mb-7{ margin-bottom: 5em;}
.mb-8{ margin-bottom: 6em;}
.mb-9{ margin-bottom: 8em;}


/* Fonts, colors */
h1, .h1, h2, .h2, h3, .h3, h4, .h4{
  font-family: 'Ubuntu', sans-serif;
  font-weight: 400;
}
p {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
}
.bold-1{
  font-weight: 400;
}
.bold-2{
  font-weight: 500;
}

.bold-3{
  font-weight: 600;
}
.bold-4{
  font-weight: 700;
}
.active{
  font-weight: 700;
}
.accordion-body{
  font-weight: 300;
  padding: .25rem;
}
.mute, .mute a{
  color:var(--gray-4);
  border-bottom: none;
}
footer, footer a{
  color: var(--gray-6);
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  text-decoration: none;
  border: 0;
}
footer ul.list-group{
  list-style: none;
}
footer ul.list-group li{
  padding: 2px 0;
}
footer ul.list-group li a:hover{
  color: #ffffff;
}
.btn{
  font-family: 'Poppins', sans-serif;
  text-transform: uppercase;
  font-weight: 600;
}
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-weight: 100;
}

.btn-primary{
  background-color: var(--yellow);
  color: var(--gray-1);
  border: none;
}
.btn-secondary{
  background-color:var(--gray-6) !important;
  color: var(--gray-2) !important;
  border: none;
  font-weight: 600;
  padding: 0.375rem 2rem;
}
.btn-sm {
  padding: 0;
  font-size: 11px;
  line-height: 1em;
  border-radius: 0.2rem;
}
.icon-circle{
  background-color: var(--yellow);
  border-radius: 50%;
  width: 4em;
  height: 4em;

}
#kli-set .col, .kli-set .col{
  min-width: 300px;
}
.kli-no{
  font-size: .8em;
  font-weight: 700;
}
.table .game-application-right .level::before{
  content: "";
  background: url('img/ga.svg') no-repeat 0 3px;  
  background-size: 23px;
  padding: 6px 0px 3px 25px;
  margin-top: 1em;
}
.game-application-right p strong, p.level, .table .game-application-right .level{
  font-weight: 500 !important;
}
.table .game-application-right .level{
  padding-bottom: 8px;
}
a {
  color: #333333;
  text-decoration: none;
  border-bottom: 1px solid;
}

a.nav-link, .h1 a {
  border-bottom: 0 !important;
}
/* General */
.section{
  /* margin-left: 5rem;
  margin-right: 5rem; */
}
@media (max-width: 576px) {
.section-sm{
  margin-left: 0rem;
  margin-right: 0rem;
}
}

.section2-2 {
  padding-top:2em;
  padding-top:2em;
}
.section2-1 {
  padding-top:2em;
  padding-top:1em;
}
.section1-2 {
  padding-top:1em;
  padding-top:2em;
}
.overlay-dark{
  background-color: rgba(32, 32, 32, .8);
  color: var(--white);
}
/* .overlay-playingcards{
  background-color: rgba(223, 29, 18, .8);
  color: var(--white);
} */
.color-
/* Breadcrumbs */
.breadcrumbs{

}
.breadcrumb-lvl1{

}
.breadcrumb-lvl2{

}

/* Images with overlayed text centered */
.position-relative{
  position: relative;
}
.overlay-centered-txt1{
  left:50%;
  bottom:30%;
  top:auto;
  right:auto;
}
.overlay-centered-txt2{
  position: relative; 
  left:-50%;
  bottom:-30%;  
}
.card-img-overlay{
  padding: 0;

}
/* Banner */
.banner-bg{
  background: url('img/ct-bannerbg.png') no-repeat right bottom/contain;
}
.banner, .banner p a {
  color: var(--white);
}
.banner p a{font-style: italic; text-decoration: none; border-bottom: dotted 1px silver;}
.txt-shadow{text-shadow: .01em .01em var(--gray-3);}

.gamenav .nav-pills .nav-link.active{
  color: var(--gray-1);
  background-color: #fff;
  font-weight: 700;
}
.gamenav .nav-pills button:hover{
  color: #fff;
  font-weight: 500;
}
.nav-pills .nav-link{
  border-radius: 0;
  border: solid 1px #fff;
  font-size: .9em;
  text-transform: uppercase;
}
.gamenav .nav .nav-item .btn-game:hover {
    color: #000;
    background-color: var(--gray-6);
}
.nav-link {
  color: #fff;
 
}
.table-ctgames{
  max-width: 99vw !important;
}
.table-ctgames th.headers{
   max-width: 300px; 
  text-transform: uppercase;
  background-color: var(--mustard-2);
  border-bottom: 2px solid #ffffff;
}
.table-ctgames tbody, .table-ctgames td, .table-ctgames tfoot, .table-ctgames th, .table-ctgames thead, .table-ctgames tr{
  font-weight: 300;
}
.table-ctgames th{
  font-weight: 600;
  font-size: .9em;
}
.table-ctgames td{
  border-bottom: 2px solid var(--mustard-2);
}
.accordion-button:not(.collapsed) {
   color: var(--gray-1); 
   background-color:#ffffff;
   border-bottom: 3px solid var(--mustard-4);
  font-weight: 700;
  font-size:large;
}
.section-notes{
  font-style: italic;
  max-width: 1280px;
  margin:1em auto;
  padding:1em;
  border:1px dashed var(--gray-5);
  background-color: var(--gray-7);
}
.banner.ctgames, .ctgameslogo{background: var(--ctgreen) url("../twentytwenty-child/img/hexagon.png"); }
.ctgameslogo a{
border: 0 !important;
}
.ctgameslogo a h1{
  color:#ffffff; 
  font-weight:600; 
  font-size: 1.2rem;
  letter-spacing: .2em;
  text-decoration: none;
  padding-top: 5px;
  padding-bottom: 5px;
}
.card-body{
  background: var(--mustard-0) url("../twentytwenty-child/img/hexagon.png");
}

#carouselSkill .card-body a{
  color: #fff;
  border:0
}
#carouselSkill .card-body a:hover{
  border-bottom: dotted 1px #fff;
}

/* asha: To keep equal height for cards when it is above a certain width. media dquery here because it messes up the active class in smaller screens */
@media only screen and (min-width: 576px) {
  .eqht.carousel-item{
    display: flex!important;
    align-items: stretch!important;
  }
}
.gradient-playingcards.lower,.gradient-boardgames.lower,.gradient-pebblegames.lower,.gradient-spatialgames.lower,.gradient-jodogyan.lower,.gradient-memoryampmusic.lower,.gradient-icebreaker.lower {
    background-repeat: repeat-x;  color: var(--white);   background-position: 0 2em;
  text-align: right;
  transition: all 0.75s ease;
}
.gradient-playingcards.lower:hover,.gradient-boardgames.lower:hover,.gradient-pebblegames.lower:hover,.gradient-spatialgames.lower:hover,.gradient-jodogyan.lower:hover,.gradient-memoryampmusic.lower:hover,.gradient-icebreaker.lower:hover {
background-position: 0 4em;
transition: all 0.75s ease;
}
.gradient-playingcards { background-image: linear-gradient( var(--playingcards-d), var(--playingcards) );}
.gradient-boardgames { background-image: linear-gradient( var(--boardgames-d), var(--boardgames) );}
.gradient-pebblegames { background-image: linear-gradient( var(--pebblegames-d), var(--pebblegames) );}
.gradient-spatialgames { background-image: linear-gradient( var(--spatialgames-d), var(--spatialgames) );}
.gradient-jodogyan { background-image: linear-gradient( var(--jodogyan-d), var(--jodogyan) );}
.gradient-memoryampmusic { background-image: linear-gradient( var(--memoryampmusic-d), var(--memoryampmusic) );}
.gradient-icebreaker { background-image: linear-gradient( var(--icebreaker-d), var(--icebreaker) );}

.banner, .table-ctgames th.headers{background-image: url("../twentytwenty-child/img/hexagon.png");}
#carouselSkill .card-body, .banner-skill{
  background:#2C3D3C url("../twentytwenty-child/img/skill-logo.png") no-repeat 97% center;
  border-left: solid 8px var(--ctgreen);
}
.banner-skill{
  background:#2C3D3C url("../twentytwenty-child/img/contour.png");
  border-left: solid 2em var(--ctgreen);
}
.banner-playingcards {background-color:  var(--playingcards); }
.banner-boardgames {background-color: var(--boardgames-d); }
.banner-pebblegames {background-color: var(--pebblegames-d);  }
.banner-spatialgames {background-color: var(--spatialgames);}
.banner-jodogyan {background-color: var(--jodogyan); }
.banner-memoryampmusic{background-color: var(--memoryampmusic-d); }
.banner-icebreaker {background-color: var(--icebreaker); }

.playingcards-bg{background-color: var(--playingcards); }
.boardgames-bg{background-color: var(--boardgames); }
.pebblegames-bg{background-color: var(--pebblegames); }
.spatialgames-bg{background-color: var(--spatialgames);}
.jodogyan-bg{background-color: var(--jodogyan); }
.memoryampmusic-bg{background-color: var(--memoryampmusic);}
.icebreaker-bg{background-color: var(--icebreaker);}

/* image bg turns darker and image zooms */
.singleskill.card, .singleskill.card:hover,.playingcards img,.playingcards:hover img, .playingcards-bg, .playingcards-bg:hover,
.boardgames img, .boardgame:hover img, .boardgame-bg, .boardgame-bg:hover,
.pebblegames img, .pebblegames:hover img, .pebblegames-bg, .pebblegames-bg:hover,
.spatialgames img, .spatialgames:hover img, .spatialgames-bg, .spatialgames-bg:hover,
.jodogyan img, .jodogyan:hover img, .jodogyan-bg, .jodogyan-bg:hover,
.memoryampmusic img, .memoryampmusic:hover img, .memoryampmusic-bg, .memoryampmusic-bg:hover,
.icebreaker img, .icebreaker:hover img, .icebreaker-bg, .icebreaker-bg:hover,
.playingcardssingle .playingcards-bdr-top, .playingcardssingle:hover .playingcards-bdr-top, .boardgamesingle .boardgame-bdr-top, .boardgamesingle:hover .boardgame-bdr-top, .pebblegamessingle .pebblegames-bdr-top, .pebblegamessingle:hover .pebblegames-bdr-top, .spatialgamessingle .spatialgames-bdr-top, .spatialgamessingle:hover .spatialgames-bdr-top, .jodogyansingle .jodogyan-bdr-top, .jodogyansingle:hover .jodogyan-bdr-top, .memoryampmusicsingle .memoryampmusic-bdr-top, .memoryampmusicsingle:hover .memoryampmusic-bdr-top, .icebreakersingle .icebreaker-bdr-top, .icebreakersingle:hover .icebreaker-bdr-top,
.playingcards:hover img,.boardgame:hover img,.pebblegames:hover img,.spatialgame:hover img,.jodogyan:hover img,.memoryampmusic:hover img,.icebreaker:hover img, 
.gradient-playingcards img,.gradient-boardgames img,.gradient-pebblegames img,.gradient-spatialgame img,.gradient-jodogyan img,.gradient-memoryampmusic img,.gradient-icebreaker img
.gradient-playingcards:hover img,.gradient-boardgame:hover img,.gradient-pebblegames:hover img,.gradient-spatialgame:hover img,.gradient-jodogyan:hover img,.gradient-memoryampmusic:hover img,.gradient-icebreaker:hover img { 
  transition: all 0.75s ease;}
.singleskill.card, .playingcards img,.boardgames img,.pebblegames img,.spatialgames img,.jodogyan img,.memoryampmusic img,.icebreaker img, .gradient-playingcards img,.gradient-boardgames img,.gradient-pebblegames img,.gradient-spatialgame img,.gradient-jodogyan img,.gradient-memoryampmusic img,.gradient-icebreaker img{ transform: scale(1); max-width: 100%;}
.singleskill.card:hover, .playingcards:hover img,.boardgame:hover img,.pebblegames:hover img,.spatialgame:hover img,.jodogyan:hover img,.memoryampmusic:hover img,.icebreaker:hover img, 
.gradient-playingcards:hover img,.gradient-boardgame:hover img,.gradient-pebblegames:hover img,.gradient-spatialgame:hover img,.gradient-jodogyan:hover img,.gradient-memoryampmusic:hover img,.gradient-icebreaker:hover img
{ transform: scale(1.1);}

/* Border bottom for Titles */
.playingcards-bdr{border-bottom: 2px solid var(--playingcards);}
.boardgame-bdr{border-bottom: 2px solid var(--boardgames);}
.pebblegames-bdr{border-bottom: 2px solid var(--pebblegame);}
.spatialgame-bdr{border-bottom: 2px solid var(--spatialgame);}
.jodogyan-bdr{border-bottom: 2px solid var(--jodogyan);}
.memoryampmusic-bdr{border-bottom: 2px solid var(--memoryampmusic);}
.icebreaker-bdr{border-bottom: 2px solid var(--icebreaker);}

.playingcardssingle .playingcards-bdr-top{border-top: 8px solid var(--playingcards);}
.playingcardssingle:hover .playingcards-bdr-top{border-top: 8px solid var(--playingcards-d);}
.boardgamesingle .boardgame-bdr-top{border-top: 8px solid var(--boardgames);}
.boardgamesingle:hover .boardgame-bdr-top{border-top: 8px solid var(--boardgames-d);}
.pebblegamesingle .pebblegame-bdr-top{border-top: 8px solid var(--pebblegame);}
.pebblegamesingle:hover .pebblegame-bdr-top{border-top: 8px solid var(--pebblegame-d);}
.spatialgamesingle .spatialgame-bdr-top{border-top: 8px solid var(--spatialgame);}
.spatialgamesingle:hover .spatialgame-bdr-top{border-top: 8px solid var(--spatialgame-d);}
.jodogyansingle .jodogyan-bdr-top{border-top: 8px solid var(--jodogyan);}
.jodogyansingle:hover .jodogyan-bdr-top{border-top: 8px solid var(--jodogyan-d);}
.memoryampmusicsingle .memoryampmusic-bdr-top{border-top: 8px solid var(--memoryampmusic);}
.memoryampmusicsingle:hover .memoryampmusic-bdr-top{border-top: 8px solid var(--memoryampmusic-d);}
.icebreakersingle .icebreaker-bdr-top{border-top: 8px solid var(--icebreaker);}
.icebreakersingle:hover .icebreaker-bdr-top{border-top: 8px solid var(--icebreaker-d);}

.playingcards-bdr-left{border-left: .5rem solid var(--playingcards);}
.boardgames-bdr-left{border-left: .5rem solid var(--boardgames-d);}
.pebblegames-bdr-left{border-left: .5rem solid var(--pebblegames);}
.spatialgames-bdr-left{border-left: .5rem solid var(--spatialgames);}
.jodogyan-bdr-left{border-left: .5rem solid var(--jodogyan);}
.memoryampmusic-bdr-left{border-left: .5rem solid var(--memoryampmusic);}
.icebreaker-bdr-left{border-left: .5rem solid var(--icebreaker);}


.icon{
  border-radius: 50%;
  margin-right: 10px;
}
.icon img.gameicon {
  width: 100px;
  height: 100px;
}