/*
  ========================================
  Overview Colour Hues
  ========================================
*/


.it-websitebody {
  background-color: white;
  background-image: -webkit-linear-gradient(to right, #00000000 0%, white 3%, white 97%, #00000000 100%);
  background-image: -moz-linear-gradient(to right, #00000000 0%, white 3%, white 97%, #00000000 100%);
  background-image: -o-linear-gradient(to right, #00000000 0%, white 3%, white 97%, #00000000 100%);
  background-image: linear-gradient(to right, #00000000 0%, white 3%, white 97%, #00000000 100%);
}

/* mobile */
:root {
    /* layout */
    --layout-grid-col: 50% 50%;
    --layout-grid-areas: 'col-dict-layout-1 col-dict-layout-1'
                         'col_dict_layout_shades col_dict_layout_tints'
                         'ind_col_cont_ad_col_1 ind_col_cont_ad_col_1'
                         'col_dict_layout_col_desc col_dict_layout_col_desc'
                         'col_dict_layout_col_comp col_dict_layout_col_comp'                         
                         'ind_col_cont_ad_col_2 ind_col_cont_ad_col_2'
                         'col_dict_layout_col_contr col_dict_layout_col_contr'
                         'col_dict_layout_col_mix col_dict_layout_col_mix'                         
                         'ind_col_cont_ad_col_3 ind_col_cont_ad_col_3'
                         'col_dict_layout_col_pal col_dict_layout_col_pal'
                         'col_dict_layout_sim_col col_dict_layout_sim_col';

    /* main image */
    --height-main-img: 30vw;
    --width-main-img: 70vw;
    --radius-main-img: 15vw;

    /* histogram */
    --hist-grid-col: 100%;
    --hist-grid-row: repeat(2, 50%);
    --width-histo: 100%;

    /* col palettes */
    --col-pal-grid-row: repeat(4, auto);
    --col-pal-grid-col: 100%;

    /* similar colors */
    --circle-simcol-diam: 20vw;
    --circle-simcol-diam-max: 80px;
    --simcol-grid-col: repeat(2, 50%);
    --simcol-grid-row: repeat(2, 50%);
    --sim-subcard-5-display: none;
}
/* desktop */
@media all and (min-width: 768px) {
    :root {
        /* layout */
        --layout-grid-col: 25% 25% 25% 25%;
        --layout-grid-areas: 'col-dict-layout-1 col_dict_layout_shades col_dict_layout_tints col_dict_layout_tones'
                            'ind_col_cont_ad_col_1 ind_col_cont_ad_col_1 ind_col_cont_ad_col_1 ind_col_cont_ad_col_1'
                            'col_dict_layout_col_desc col_dict_layout_col_desc col_dict_layout_col_desc col_dict_layout_col_desc'
                            'col_dict_layout_col_comp col_dict_layout_col_comp col_dict_layout_col_comp col_dict_layout_col_comp'                            
                            'ind_col_cont_ad_col_2 ind_col_cont_ad_col_2 ind_col_cont_ad_col_2 ind_col_cont_ad_col_2'
                            'col_dict_layout_col_contr col_dict_layout_col_contr col_dict_layout_col_contr col_dict_layout_col_contr'
                            'col_dict_layout_col_mix col_dict_layout_col_mix col_dict_layout_col_mix col_dict_layout_col_mix'                            
                            'ind_col_cont_ad_col_3 ind_col_cont_ad_col_3 ind_col_cont_ad_col_3 ind_col_cont_ad_col_3'
                            'col_dict_layout_col_pal col_dict_layout_col_pal col_dict_layout_col_pal col_dict_layout_col_pal'
                            'col_dict_layout_sim_col col_dict_layout_sim_col col_dict_layout_sim_col col_dict_layout_sim_col';

        /* main image */
        --height-main-img: 20vw;
        --width-main-img: 20vw; 
        --radius-main-img: 50%;

        /* histogram */
        --hist-grid-col: repeat(2, 50%);
        --hist-grid-row: 100%;
        --width-histo: 20em;

        /* col palettes */
        --col-pal-grid-row: 100%;
        --col-pal-grid-col: repeat(4, 25%);

        /* similar colors */
        --circle-simcol-diam: 12vw;
        --circle-simcol-diam-max: 120px;
        --simcol-grid-col: repeat(5, 20%);
        --simcol-grid-row: 100%;
        --sim-subcard-5-display: grid;
    }
    @media all and (orientation: portrait) {
      :root {  
          /* layout */
        --layout-grid-col: 33.33% 33.33% 33.33%;
        --layout-grid-areas: 'col-dict-layout-1 col_dict_layout_shades col_dict_layout_tints'        
                            'ind_col_cont_ad_col_1 ind_col_cont_ad_col_1 ind_col_cont_ad_col_1'
                            'col_dict_layout_col_desc col_dict_layout_col_desc col_dict_layout_col_desc'
                            'col_dict_layout_col_comp col_dict_layout_col_comp col_dict_layout_col_comp'                            
                            'ind_col_cont_ad_col_2 ind_col_cont_ad_col_2 ind_col_cont_ad_col_2'
                            'col_dict_layout_col_contr col_dict_layout_col_contr col_dict_layout_col_contr'
                            'col_dict_layout_col_mix col_dict_layout_col_mix col_dict_layout_col_mix'
                            'ind_col_cont_ad_col_3 ind_col_cont_ad_col_3 ind_col_cont_ad_col_3'
                            'col_dict_layout_col_pal col_dict_layout_col_pal col_dict_layout_col_pal'
                            'col_dict_layout_sim_col col_dict_layout_sim_col col_dict_layout_sim_col';

          /* histogram */
          --width-histo: 35vw;
      }
  }
}

.it-overview-cont {
  width: 100%;
  margin: 0;
}

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

/* --------------- main layout -------------- */
#col-dict-layout {
  width: 100%;
  height: auto;
  max-width: var(--width-max-page);
  margin: auto;
  padding: 5vh 5vw;
  display: grid;
  grid-template-columns: var(--layout-grid-col);
  grid-template-rows: var(--layout-grid-row);
  grid-template-areas: var(--layout-grid-areas);  
}

#col-dict-layout > * {
  width: 100%;
  height: 100%;
  padding: 0.5em;
}

#col-dict-layout-1 {
  grid-area: col-dict-layout-1;
}
#col_dict_layout_shades {
  grid-area: col_dict_layout_shades;
}
#col_dict_layout_tints {
  grid-area: col_dict_layout_tints;
}
#col_dict_layout_tones {
  grid-area: col_dict_layout_tones;
}
#col_dict_layout_col_desc{
  grid-area: col_dict_layout_col_desc;
}
#col_dict_layout_col_comp {
  grid-area: col_dict_layout_col_comp;
}
#col_dict_layout_col_contr {
  grid-area: col_dict_layout_col_contr;
}
#col_dict_layout_col_pal {
  grid-area: col_dict_layout_col_pal;
}
#col_dict_layout_col_mix {
  grid-area: col_dict_layout_col_mix;
}
#col_dict_layout_sim_col {
  grid-area: col_dict_layout_sim_col;
}
#ind_col_cont_ad_col_1 {
  height: 300px;
  grid-area: ind_col_cont_ad_col_1;
}
#ind_col_cont_ad_col_2 {
  height: 300px;
  grid-area: ind_col_cont_ad_col_2;
}
#ind_col_cont_ad_col_3 {
  height: 300px;
  grid-area: ind_col_cont_ad_col_3;
}

#col_dict_layout_shades, #col_dict_layout_tints, #col_dict_layout_tones, #col_dict_layout_col_desc, #col_dict_layout_col_comp, 
#col_dict_layout_col_contr, #col_dict_layout_col_pal, #col_dict_layout_col_mix, #col_dict_layout_sim_col {
  display: grid;
  row-gap: 0.5em;
  grid-template-rows: 3.5em auto;
}
@media all and (min-width: 768px) {
  #col_dict_layout_shades, #col_dict_layout_tints, #col_dict_layout_tones, #col_dict_layout_col_desc, #col_dict_layout_col_comp, 
  #col_dict_layout_col_contr, #col_dict_layout_col_pal, #col_dict_layout_col_mix, #col_dict_layout_sim_col {
  grid-template-rows: 2.5em auto;
  }
}

.it-overview-cont {
  padding: 0.5em;
}

.each-col-desc-cont {
  padding: 0.5em;
}
@media all and (min-width: 768px) {
  .each-col-desc-cont {
    padding: 1em 10vw;
  }
}
.ctrl-button-cont {
  margin: 1em auto;
}

.aac-overview-shades th {
  background-color: lightgray;
}
@media all and (max-width: 768px) {
  .aac-overview-shades p {
    display: flex;
    align-items: center;
    height: 4em;
    font-weight: 600;
  }
}


/* --------------- main swatch -------------- */
#col-dict-layout-1 {
  display: grid;
  grid-template-rows: 3em 3em var(--height-main-img);
}

/* main image */
.card_img {
    object-fit: cover;
    object-position: 0% 0%;
    width: var(--width-main-img);
    height: var(--height-main-img);
    max-width: 280px;
    max-height: 280px;
    border-radius: var(--radius-main-img);
}

/* --------------- shades / tones -------------- */
#col_dict_layout_tones {
  display: none;
}
@media all and (min-width: 768px) and (orientation: landscape) {
  #col_dict_layout_tones {
    display: grid;
  }
}

.col-overview-cont {
  display: grid;
  grid-template-rows: repeat(10, 3em) auto;
}

.card-shade {
  display: grid;
  grid-template-columns: 6em auto;
}

.card-shade-name {
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-shade-swatch {
  height: 90%;
  width: 90%;
  box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.05), 
              inset -2px -2px 1px rgba(0, 0, 0, 0.1);
}

/* --------------- col palettes -------------- */
.col-overview-col-pal {
  width: 100%;
  height: 60em;
  display: grid;
  grid-template-rows: var(--col-pal-grid-row);
  grid-template-columns: var(--col-pal-grid-col);
}
@media all and (min-width: 768px) {
  .col-overview-col-pal {
    height: 45vh;
  }
  @media all and (orientation: portrait) {
    .col-overview-col-pal {
      grid-template-rows: 21vh 21vh;
      grid-template-columns: 50% 50%;
    }
  }
}

/* each col pal group */
.col-overview-col-pal > * {
  padding: var(--padd-stand);
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: repeat(6,16.67%);
}
@media all and (min-width: 768px) and (orientation: portrait) {
  .col-overview-col-pal > :nth-child(3), .col-overview-col-pal > :nth-child(4) {
    margin: 3vh auto auto auto;
  }
}

/* --------------- color mix -------------- */
.col-overview-col-mix {
  width: 100%;
  height: auto;
}
.col-overview-col-mix > *{
  flex-wrap: wrap;
}

.card-col-mix {
  align-self: flex-start;
  margin: 0 var(--padd-stand);
}
.circle-mix {
  margin: var(--padd-stand);
  box-shadow: inset 0px 0px 6px rgba(0, 0, 0, 0.2), 
              inset -2px -2px 3px rgba(0, 0, 0, 0.3);
}

.col-overview-col-mix .card-col-mix {
  height: 12em;
}

#mix1_cyan, #mix2_c {
  background: #00ffff;  
}
#mix1_magenta, #mix2_m {
  background: #ff00ff;
}
#mix1_yellow, #mix2_y {
  background: #ffff00;
}
#mix1_black, #mix2_k {
  background: #000000;
}
#mix1_white, #mix2_w {
  background: #ffffff;
}
#mix2_red, #mix2_r {
  background: #ff0000;
}
#mix2_b {
  background: #0000ff;
}
#mix2_g {
  background: #00ff00;
}

/* --------------- color composition -------------- */
/* histograms */
#colcomposi-tab {
  display: grid;
  grid-template-columns: var(--hist-grid-col);
  grid-template-rows: var(--hist-grid-row);
  row-gap: calc(2 * var(--padd-stand));
  column-gap: calc(2 * var(--padd-stand));
  padding: var(--padd-stand);
}

.composi {
  width: var(--width-histo);
  height: auto;
  max-width: 350px;
  margin: auto;
}
.composi > * {
  width: 95%;
  height: auto;
  padding: 0.5em;
}

.aac-overview-shades {
  width: 100%;
  margin: auto;
  display: grid;
  grid-template-rows: repeat(10, 10%);
}
.aac-compo-table {
  border-collapse: collapse;
}
.aac-compo-table td, .aac-compo-table th {
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid var(--col-accent2);
}
.aac-compo-table th h5 {
  font-weight: 600;
}
.aac-compo-table p {
  padding: 0.3em var(--padd-stand);
}

.aac-compo-table tr:hover {
  background: var(--col-accent1-ll);
}

/* --------------- similar colors -------------- */
/* similar colours */
.simcol-tab {
  display: grid;
  grid-template-columns:var(--simcol-grid-col);
  grid-template-rows: var(--simcol-grid-row);
}

.sim-combo {
  display: grid;
  grid-template-rows: 3em 2em auto 5em;
}

#name_simcol_1 p, #name_simcol_2 p, #name_simcol_3 p, #name_simcol_4 p, #name_simcol_5 p {
  text-align: center;
}

.sim-combo:nth-child(5) {
  display: var(--sim-subcard-5-display);
}

.circle {
  height: var(--circle-simcol-diam);
  width: var(--circle-simcol-diam);
  max-height: var(--circle-simcol-diam-max);
  max-width:  var(--circle-simcol-diam-max);
  border-radius: 50%;
  margin: auto;
}

/*--------------- ads -----------------*/
.it-cont-ad-1 {
  display: flex;
}