@media only screen and (max-width: 766px) and (orientation: portrait) {
  #a-five-option {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .afour {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    width: 100%;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #b1 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    color: white;
    font-size: 3rem;
    width: 10vw;
  }
  #b2 {
    display: none;
    color: white;
    font-size: 2rem;
    height: 2rem;
    z-index: 9;
    width: 10vw;
  }
  #b3 {
    text-align: center;
    color: white;
    width: 80vw;
  }
  #b4 {
    padding: 0.5rem;
    width: 10vw;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    text-align: right;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #b1 i {
    color: silver;
    font-size: 2rem;
    cursor: pointer;
  }
  #b2 i {
    color: silver;
    font-size: 2rem;
    cursor: pointer;
  }
  #b3 p {
    color: silver;
    font-size: 2rem;
    cursor: pointer;
  }
  #b4 i {
    color: silver;
    font-size: 2rem;
    text-align: right;
    cursor: pointer;
  }
  #behaviour {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100vw;
  }
  body {
    width: 100vw;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    background-color: darkslateblue;
  }
  #containerforoptions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    max-width: 100vw;
    overflow: scroll;
    background-color: cadetblue;
    margin: 0rem auto;
  }
  .cont-for-1-option {
    width: 70px;
    height: 70px;
    margin: auto;
    z-index: 2;
  }
  .cont-for-2-option {
    width: 2vw;
    height: 100%;
    margin: auto auto auto 0;
    z-index: 2;
    color: white;
    font-size: 2rem;
    text-align: left;
    text-decoration: none;
  }
  .cont-for-2-option a {
    width: 1rem;
    height: 1rem;
    margin: auto auto auto 0;
    z-index: 2;
    color: white;
    font-size: 2rem;
    text-align: left;
    text-decoration: none;
  }
  .cont-for-3-option a {
    width: 1rem;
    height: 1rem;
    margin: auto 0 auto auto;
    z-index: 2;
    color: white;
    font-size: 2rem;
    text-align: right;
    text-decoration: none;
  }
  .groupof4options {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100vw;
    margin: auto;
  }
  .groupof8options-1 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    margin: 0rem auto;
    padding: 0.3rem;
    width: 200vw;
  }
  #image1, #image2, #image3, #image4, #image5, #image6, #image7, #image8,
  #image9, #image10, #image11, #image12, #image13, #image14, #image15, #image16,
  #image17, #image18, #image19, #image20, #image21, #image22, #image23, #image24,
  #image25, #image26, #image27, #image28, #image29, #image30, #image31, #image32 {
    width: 100%;
    height: 100%;
    border-radius: 0.3rem;
    margin: auto;
  }
  #message {
    text-align: center;
    color: white;
  }
  #plus1, #plus2, #plus3, #plus4, #plus5 {
    width: 30px;
    height: 30px;
    color: white;
    font-size: 30px;
    display: none;
  }
  #plus6, #plus7, #plus8, #plus9, #plus10 {
    width: 30px;
    height: 30px;
    color: #f7ebeb;
    font-size: 30px;
    display: none;
  }
  #routine1, #routine2, #routine3, #routine4, #routine5 {
    width: 220px;
    height: 220px;
    border: 9px solid white;
    border-radius: 0.5rem;
    z-index: 1;
    background-color: white;
    display: none;
    -webkit-animation-name: example;
            animation-name: example;
    -webkit-animation-duration: 0.8s;
            animation-duration: 0.8s;
  }
  @-webkit-keyframes example {
    from {
      border: 9px solid #9b2af8;
    }
    to {
      border: 9px solid white;
    }
  }
  @keyframes example {
    from {
      border: 9px solid #9b2af8;
    }
    to {
      border: 9px solid white;
    }
  }
  @-webkit-keyframes example2 {
    from {
      border: 9px solid #9b2af8;
    }
    to {
      border: 9px solid white;
    }
  }
  @keyframes example2 {
    from {
      border: 9px solid #9b2af8;
    }
    to {
      border: 9px solid white;
    }
  }
  #routine6, #routine7, #routine8, #routine9, #routine10 {
    width: 220px;
    height: 220px;
    border: 9px solid white;
    border-radius: 0.5rem;
    background-color: white;
    display: none;
    -webkit-animation-name: example2;
            animation-name: example2;
    -webkit-animation-duration: 0.8s;
            animation-duration: 0.8s;
  }
  .routines {
    border-radius: 1rem;
    width: 100%;
    margin: 1rem auto;
    z-index: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #test1, #test2, #test3, #test4 {
    padding: 0;
    margin: 0;
  }
}

/* ) #######################################################################################
    ############################################################################################
    ################################################################################################
    ################################################################################################*/
@media only screen and (max-width: 766px) and (orientation: landscape) {
  #a-five-option {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .afour {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    width: 100%;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #b1 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    color: white;
    font-size: 3rem;
    width: 10vw;
  }
  #b2 {
    display: none;
    color: white;
    font-size: 2rem;
    height: 2rem;
    z-index: 9;
    width: 10vw;
  }
  #b3 {
    text-align: center;
    color: white;
    width: 80vw;
  }
  #b4 {
    padding: 0.5rem;
    width: 10vw;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    text-align: right;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #b1 i {
    color: silver;
    font-size: 2rem;
    cursor: pointer;
  }
  #b2 i {
    color: silver;
    font-size: 2rem;
    cursor: pointer;
  }
  #b3 p {
    color: silver;
    font-size: 2rem;
    cursor: pointer;
  }
  #b4 i {
    color: silver;
    font-size: 2rem;
    text-align: right;
    cursor: pointer;
  }
  #behaviour {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100vw;
  }
  body {
    width: 100vw;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    background-color: darkslateblue;
  }
  #containerforoptions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    max-width: 100vw;
    overflow: scroll;
    background-color: cadetblue;
    margin: 0rem auto;
  }
  .cont-for-1-option {
    width: 70px;
    height: 70px;
    margin: auto;
    z-index: 2;
  }
  .cont-for-2-option {
    width: 2vw;
    height: 100%;
    margin: auto auto auto 0;
    z-index: 2;
    color: white;
    font-size: 2rem;
    text-align: left;
    text-decoration: none;
  }
  .cont-for-2-option a {
    width: 1rem;
    height: 1rem;
    margin: auto auto auto 0;
    z-index: 2;
    color: white;
    font-size: 2rem;
    text-align: left;
    text-decoration: none;
  }
  .cont-for-3-option a {
    width: 1rem;
    height: 1rem;
    margin: auto 0 auto auto;
    z-index: 2;
    color: white;
    font-size: 2rem;
    text-align: right;
    text-decoration: none;
  }
  .groupof4options {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 60vw;
    margin: auto;
  }
  .groupof8options-1 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    margin: 0.5rem auto;
    padding: 0.3rem;
    width: 200vw;
  }
  #image1, #image2, #image3, #image4, #image5, #image6, #image7, #image8,
  #image9, #image10, #image11, #image12, #image13, #image14, #image15, #image16,
  #image17, #image18, #image19, #image20, #image21, #image22, #image23, #image24,
  #image25, #image26, #image27, #image28, #image29, #image30, #image31, #image32 {
    width: 100%;
    height: 100%;
    border-radius: 0.3rem;
    margin: auto;
  }
  #message {
    text-align: center;
    color: white;
  }
  #plus1, #plus2, #plus3, #plus4, #plus5 {
    width: 16px;
    height: 16px;
    color: white;
    font-size: 16px;
    display: none;
  }
  #plus6, #plus7, #plus8, #plus9, #plus10 {
    width: 16px;
    height: 16px;
    color: #f7ebeb;
    font-size: 16px;
    display: none;
  }
  #routine1, #routine2, #routine3, #routine4, #routine5 {
    width: 100px;
    height: 100px;
    border: 9px solid white;
    border-radius: 0.5rem;
    z-index: 1;
    background-color: white;
    display: none;
    -webkit-animation-name: example;
            animation-name: example;
    -webkit-animation-duration: 0.8s;
            animation-duration: 0.8s;
  }
  @-webkit-keyframes example {
    from {
      border: 9px solid #9b2af8;
    }
    to {
      border: 9px solid white;
    }
  }
  @keyframes example {
    from {
      border: 9px solid #9b2af8;
    }
    to {
      border: 9px solid white;
    }
  }
  @-webkit-keyframes example2 {
    from {
      border: 9px solid #9b2af8;
    }
    to {
      border: 9px solid white;
    }
  }
  @keyframes example2 {
    from {
      border: 9px solid #9b2af8;
    }
    to {
      border: 9px solid white;
    }
  }
  #routine6, #routine7, #routine8, #routine9, #routine10 {
    width: 100px;
    height: 100px;
    border: 9px solid white;
    border-radius: 0.5rem;
    background-color: white;
    display: none;
    -webkit-animation-name: example2;
            animation-name: example2;
    -webkit-animation-duration: 0.8s;
            animation-duration: 0.8s;
  }
  .routines {
    border-radius: 1rem;
    width: 100%;
    margin: 1rem auto;
    z-index: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #test1, #test2, #test3, #test4 {
    padding: 0;
    margin: 0;
  }
}

/* ) #######################################################################################
    ############################################################################################
    ################################################################################################
    ################################################################################################*/
@media only screen and (min-width: 767px) and (max-width: 1299px) and (orientation: portrait) {
  #a-five-option {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .afour {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    width: 100%;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #b1 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    color: white;
    font-size: 3rem;
    width: 10vw;
  }
  #b2 {
    display: none;
    color: white;
    font-size: 2rem;
    height: 2rem;
    z-index: 9;
    width: 10vw;
  }
  #b3 {
    text-align: center;
    color: white;
    width: 80vw;
  }
  #b4 {
    padding: 0.5rem;
    width: 10vw;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    text-align: right;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #b1 i {
    color: silver;
    font-size: 2rem;
    cursor: pointer;
  }
  #b2 i {
    color: silver;
    font-size: 2rem;
    cursor: pointer;
  }
  #b3 p {
    color: silver;
    font-size: 2rem;
    cursor: pointer;
  }
  #b4 i {
    color: silver;
    font-size: 2rem;
    text-align: right;
    cursor: pointer;
  }
  #behaviour {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100vw;
  }
  body {
    width: 100vw;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    background-color: darkslateblue;
  }
  #containerforoptions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    max-width: 100vw;
    overflow: scroll;
    background-color: cadetblue;
    margin: 0rem auto;
  }
  .cont-for-1-option {
    width: 78px;
    height: 80px;
    margin: auto;
    z-index: 2;
  }
  .cont-for-2-option {
    width: 2vw;
    height: 100%;
    margin: auto auto auto 0;
    z-index: 2;
    color: white;
    font-size: 2rem;
    text-align: left;
    text-decoration: none;
  }
  .cont-for-2-option a {
    width: 1rem;
    height: 1rem;
    margin: auto auto auto 0;
    z-index: 2;
    color: white;
    font-size: 2rem;
    text-align: left;
    text-decoration: none;
  }
  .cont-for-3-option a {
    width: 1rem;
    height: 1rem;
    margin: auto 0 auto auto;
    z-index: 2;
    color: white;
    font-size: 2rem;
    text-align: right;
    text-decoration: none;
  }
  .groupof4options {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 49vw;
    margin: auto;
  }
  .groupof8options-1 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    margin: 0.5rem auto;
    padding: 0.3rem;
    width: 200vw;
  }
  #image1, #image2, #image3, #image4, #image5, #image6, #image7, #image8,
  #image9, #image10, #image11, #image12, #image13, #image14, #image15, #image16,
  #image17, #image18, #image19, #image20, #image21, #image22, #image23, #image24,
  #image25, #image26, #image27, #image28, #image29, #image30, #image31, #image32 {
    width: 100%;
    height: 100%;
    border-radius: 0.3rem;
    margin: auto;
  }
  #message {
    text-align: center;
    color: white;
  }
  #plus1, #plus2, #plus3, #plus4, #plus5 {
    width: 30px;
    height: 30px;
    color: white;
    font-size: 30px;
    display: none;
  }
  #plus6, #plus7, #plus8, #plus9, #plus10 {
    width: 30px;
    height: 30px;
    color: #f7ebeb;
    font-size: 30px;
    display: none;
  }
  #routine1, #routine2, #routine3, #routine4, #routine5 {
    width: 150px;
    height: 150px;
    border: 9px solid white;
    border-radius: 0.5rem;
    z-index: 1;
    background-color: white;
    display: none;
    -webkit-animation-name: example;
            animation-name: example;
    -webkit-animation-duration: 0.8s;
            animation-duration: 0.8s;
  }
  @-webkit-keyframes example {
    from {
      border: 9px solid #9b2af8;
    }
    to {
      border: 9px solid white;
    }
  }
  @keyframes example {
    from {
      border: 9px solid #9b2af8;
    }
    to {
      border: 9px solid white;
    }
  }
  @-webkit-keyframes example2 {
    from {
      border: 9px solid #9b2af8;
    }
    to {
      border: 9px solid white;
    }
  }
  @keyframes example2 {
    from {
      border: 9px solid #9b2af8;
    }
    to {
      border: 9px solid white;
    }
  }
  #routine6, #routine7, #routine8, #routine9, #routine10 {
    width: 150px;
    height: 150px;
    border: 9px solid white;
    border-radius: 0.5rem;
    background-color: white;
    display: none;
    -webkit-animation-name: example2;
            animation-name: example2;
    -webkit-animation-duration: 0.8s;
            animation-duration: 0.8s;
  }
  .routines {
    border-radius: 1rem;
    width: 100%;
    margin: 2rem auto;
    z-index: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #test1, #test2, #test3, #test4 {
    padding: 0;
    margin: 0;
  }
}

/* ) #######################################################################################
    ############################################################################################
    ################################################################################################
    ################################################################################################*/
@media only screen and (min-width: 767px) and (max-width: 1299px) and (orientation: landscape) {
  #a-five-option {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .afour {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    width: 100%;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #b1 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    color: white;
    font-size: 3rem;
    width: 10vw;
  }
  #b2 {
    display: none;
    color: white;
    font-size: 2rem;
    height: 2rem;
    z-index: 9;
    width: 10vw;
  }
  #b3 {
    text-align: center;
    color: white;
    width: 80vw;
  }
  #b4 {
    padding: 0.5rem;
    width: 10vw;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    text-align: right;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #b1 i {
    color: silver;
    font-size: 2rem;
    cursor: pointer;
  }
  #b2 i {
    color: silver;
    font-size: 2rem;
    cursor: pointer;
  }
  #b3 p {
    color: silver;
    font-size: 2rem;
    cursor: pointer;
  }
  #b4 i {
    color: silver;
    font-size: 2rem;
    text-align: right;
    cursor: pointer;
  }
  #behaviour {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100vw;
  }
  body {
    width: 100vw;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    background-color: darkslateblue;
  }
  #containerforoptions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    max-width: 100vw;
    overflow: scroll;
    background-color: cadetblue;
    margin: 0rem auto;
  }
  .cont-for-1-option {
    width: 70px;
    height: 70px;
    margin: auto;
    z-index: 2;
  }
  .cont-for-2-option {
    width: 2vw;
    height: 100%;
    margin: auto auto auto 0;
    z-index: 2;
    color: white;
    font-size: 2rem;
    text-align: left;
    text-decoration: none;
  }
  .cont-for-2-option a {
    width: 1rem;
    height: 1rem;
    margin: auto auto auto 0;
    z-index: 2;
    color: white;
    font-size: 2rem;
    text-align: left;
    text-decoration: none;
  }
  .cont-for-3-option a {
    width: 1rem;
    height: 1rem;
    margin: auto 0 auto auto;
    z-index: 2;
    color: white;
    font-size: 2rem;
    text-align: right;
    text-decoration: none;
  }
  .groupof4options {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 49vw;
    margin: auto;
  }
  .groupof8options-1 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    margin: 0.5rem auto;
    padding: 0.3rem;
    width: 200vw;
  }
  #image1, #image2, #image3, #image4, #image5, #image6, #image7, #image8,
  #image9, #image10, #image11, #image12, #image13, #image14, #image15, #image16,
  #image17, #image18, #image19, #image20, #image21, #image22, #image23, #image24,
  #image25, #image26, #image27, #image28, #image29, #image30, #image31, #image32 {
    width: 100%;
    height: 100%;
    border-radius: 0.3rem;
    margin: auto;
  }
  #message {
    text-align: center;
    color: white;
  }
  #plus1, #plus2, #plus3, #plus4, #plus5 {
    width: 30px;
    height: 30px;
    color: white;
    font-size: 30px;
    display: none;
  }
  #plus6, #plus7, #plus8, #plus9, #plus10 {
    width: 30px;
    height: 30px;
    color: #f7ebeb;
    font-size: 30px;
    display: none;
  }
  #routine1, #routine2, #routine3, #routine4, #routine5 {
    width: 180px;
    height: 180px;
    border: 9px solid white;
    border-radius: 0.5rem;
    z-index: 1;
    background-color: white;
    display: none;
    -webkit-animation-name: example;
            animation-name: example;
    -webkit-animation-duration: 0.8s;
            animation-duration: 0.8s;
  }
  @-webkit-keyframes example {
    from {
      border: 9px solid #9b2af8;
    }
    to {
      border: 9px solid white;
    }
  }
  @keyframes example {
    from {
      border: 9px solid #9b2af8;
    }
    to {
      border: 9px solid white;
    }
  }
  @-webkit-keyframes example2 {
    from {
      border: 9px solid #9b2af8;
    }
    to {
      border: 9px solid white;
    }
  }
  @keyframes example2 {
    from {
      border: 9px solid #9b2af8;
    }
    to {
      border: 9px solid white;
    }
  }
  #routine6, #routine7, #routine8, #routine9, #routine10 {
    width: 180px;
    height: 180px;
    border: 9px solid white;
    border-radius: 0.5rem;
    background-color: white;
    display: none;
    -webkit-animation-name: example2;
            animation-name: example2;
    -webkit-animation-duration: 0.8s;
            animation-duration: 0.8s;
  }
  .routines {
    border-radius: 1rem;
    width: 100%;
    margin: 2rem auto;
    z-index: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #test1, #test2, #test3, #test4 {
    padding: 0;
    margin: 0;
  }
}

/* ) #######################################################################################
############################################################################################
################################################################################################
################################################################################################*/
@media only screen and (min-width: 1300px) and (max-width: 1799px) {
  #a-five-option {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .afour {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    width: 100%;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #b1 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    color: white;
    font-size: 3rem;
    width: 40vw;
  }
  #b2 {
    display: none;
    color: white;
    font-size: 2rem;
    height: 2rem;
    z-index: 9;
    width: 40vw;
  }
  #b3 {
    text-align: center;
    color: white;
    width: 40vw;
  }
  #b4 {
    padding: 0.5rem;
    width: 40vw;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    text-align: right;
    margin-right: 2rem;
  }
  #b1 i {
    color: silver;
    font-size: 2rem;
    cursor: pointer;
  }
  #b2 i {
    color: silver;
    font-size: 2rem;
    cursor: pointer;
  }
  #b3 p {
    color: silver;
    font-size: 2rem;
    cursor: pointer;
  }
  #b4 i {
    color: silver;
    font-size: 2rem;
    text-align: right;
    cursor: pointer;
  }
  #behaviour {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100vw;
  }
  body {
    width: 100vw;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    background-color: darkslateblue;
  }
  #containerforoptions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    max-width: 100vw;
    overflow: scroll;
    background-color: cadetblue;
    margin: 0rem auto;
  }
  .cont-for-1-option {
    width: 100px;
    height: 100px;
    margin: auto;
    z-index: 2;
  }
  .cont-for-2-option {
    width: 2vw;
    height: 100%;
    margin: auto auto auto 0;
    z-index: 2;
    color: white;
    font-size: 2rem;
    text-align: left;
    text-decoration: none;
  }
  .cont-for-2-option a {
    width: 1rem;
    height: 1rem;
    margin: auto auto auto 0;
    z-index: 2;
    color: white;
    font-size: 2rem;
    text-align: left;
    text-decoration: none;
  }
  .cont-for-3-option a {
    width: 1rem;
    height: 1rem;
    margin: auto 0 auto auto;
    z-index: 2;
    color: white;
    font-size: 2rem;
    text-align: right;
    text-decoration: none;
  }
  .groupof4options {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 49vw;
    margin: auto;
  }
  .groupof8options-1 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    margin: 0.5rem auto;
    padding: 0.3rem;
    width: 200vw;
  }
  #image1, #image2, #image3, #image4, #image5, #image6, #image7, #image8,
  #image9, #image10, #image11, #image12, #image13, #image14, #image15, #image16,
  #image17, #image18, #image19, #image20, #image21, #image22, #image23, #image24,
  #image25, #image26, #image27, #image28, #image29, #image30, #image31, #image32 {
    width: 100%;
    height: 100%;
    border-radius: 0.3rem;
    margin: auto;
  }
  #message {
    text-align: center;
    color: white;
  }
  #plus1, #plus2, #plus3, #plus4, #plus5 {
    width: 30px;
    height: 30px;
    color: white;
    font-size: 30px;
    display: none;
  }
  #plus6, #plus7, #plus8, #plus9, #plus10 {
    width: 30px;
    height: 30px;
    color: #f7ebeb;
    font-size: 30px;
    display: none;
  }
  #routine1, #routine2, #routine3, #routine4, #routine5 {
    width: 200px;
    height: 200px;
    border: 9px solid white;
    border-radius: 0.5rem;
    z-index: 1;
    background-color: white;
    display: none;
    -webkit-animation-name: example;
            animation-name: example;
    -webkit-animation-duration: 0.8s;
            animation-duration: 0.8s;
  }
  @-webkit-keyframes example {
    from {
      border: 9px solid #9b2af8;
    }
    to {
      border: 9px solid white;
    }
  }
  @keyframes example {
    from {
      border: 9px solid #9b2af8;
    }
    to {
      border: 9px solid white;
    }
  }
  @-webkit-keyframes example2 {
    from {
      border: 9px solid #9b2af8;
    }
    to {
      border: 9px solid white;
    }
  }
  @keyframes example2 {
    from {
      border: 9px solid #9b2af8;
    }
    to {
      border: 9px solid white;
    }
  }
  #routine6, #routine7, #routine8, #routine9, #routine10 {
    width: 200px;
    height: 200px;
    border: 9px solid white;
    border-radius: 0.5rem;
    background-color: white;
    display: none;
    -webkit-animation-name: example2;
            animation-name: example2;
    -webkit-animation-duration: 0.8s;
            animation-duration: 0.8s;
  }
  .routines {
    border-radius: 1rem;
    width: 100%;
    margin: 2rem auto;
    z-index: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #test1, #test2, #test3, #test4 {
    padding: 0;
    margin: 0;
  }
}

/* ) #######################################################################################
############################################################################################
################################################################################################
################################################################################################*/
@media only screen and (min-width: 1800px) and (max-width: 2200px) {
  #a-five-option {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .afour {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    width: 100%;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #b1 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    color: white;
    font-size: 3rem;
    width: 40vw;
  }
  #b2 {
    display: none;
    color: white;
    font-size: 2rem;
    height: 2rem;
    z-index: 9;
    width: 40vw;
  }
  #b3 {
    text-align: center;
    color: white;
    width: 40vw;
  }
  #b4 {
    padding: 0.5rem;
    width: 40vw;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    text-align: right;
    margin-right: 2rem;
  }
  #b1 i {
    color: silver;
    font-size: 2rem;
    cursor: pointer;
  }
  #b2 i {
    color: silver;
    font-size: 2rem;
    cursor: pointer;
  }
  #b3 p {
    color: silver;
    font-size: 2rem;
    cursor: pointer;
  }
  #b4 i {
    color: silver;
    font-size: 2rem;
    text-align: right;
    cursor: pointer;
  }
  #behaviour {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100vw;
  }
  body {
    width: 100vw;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    background-color: darkslateblue;
  }
  #containerforoptions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    max-width: 100vw;
    overflow: scroll;
    background-color: cadetblue;
    margin: 0rem auto;
  }
  .cont-for-1-option {
    width: 100px;
    height: 100px;
    margin: auto;
    z-index: 2;
  }
  .cont-for-2-option {
    width: 2vw;
    height: 100%;
    margin: auto auto auto 0;
    z-index: 2;
    color: white;
    font-size: 2rem;
    text-align: left;
    text-decoration: none;
  }
  .cont-for-2-option a {
    width: 1rem;
    height: 1rem;
    margin: auto auto auto 0;
    z-index: 2;
    color: white;
    font-size: 2rem;
    text-align: left;
    text-decoration: none;
  }
  .cont-for-3-option a {
    width: 1rem;
    height: 1rem;
    margin: auto 0 auto auto;
    z-index: 2;
    color: white;
    font-size: 2rem;
    text-align: right;
    text-decoration: none;
  }
  .groupof4options {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 49vw;
    margin: auto;
  }
  .groupof8options-1 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    margin: 0.5rem auto;
    padding: 0.3rem;
    width: 200vw;
  }
  #image1, #image2, #image3, #image4, #image5, #image6, #image7, #image8,
  #image9, #image10, #image11, #image12, #image13, #image14, #image15, #image16,
  #image17, #image18, #image19, #image20, #image21, #image22, #image23, #image24,
  #image25, #image26, #image27, #image28, #image29, #image30, #image31, #image32 {
    width: 100%;
    height: 100%;
    border-radius: 0.3rem;
    margin: auto;
  }
  #message {
    text-align: center;
    color: white;
  }
  #plus1, #plus2, #plus3, #plus4, #plus5 {
    width: 30px;
    height: 30px;
    color: white;
    font-size: 30px;
    display: none;
  }
  #plus6, #plus7, #plus8, #plus9, #plus10 {
    width: 30px;
    height: 30px;
    color: #f7ebeb;
    font-size: 30px;
    display: none;
  }
  #routine1, #routine2, #routine3, #routine4, #routine5 {
    width: 300px;
    height: 300px;
    border: 9px solid white;
    border-radius: 0.5rem;
    z-index: 1;
    background-color: white;
    display: none;
    -webkit-animation-name: example;
            animation-name: example;
    -webkit-animation-duration: 0.8s;
            animation-duration: 0.8s;
  }
  @-webkit-keyframes example {
    from {
      border: 9px solid #9b2af8;
    }
    to {
      border: 9px solid white;
    }
  }
  @keyframes example {
    from {
      border: 9px solid #9b2af8;
    }
    to {
      border: 9px solid white;
    }
  }
  @-webkit-keyframes example2 {
    from {
      border: 9px solid #9b2af8;
    }
    to {
      border: 9px solid white;
    }
  }
  @keyframes example2 {
    from {
      border: 9px solid #9b2af8;
    }
    to {
      border: 9px solid white;
    }
  }
  #routine6, #routine7, #routine8, #routine9, #routine10 {
    width: 300px;
    height: 300px;
    border: 9px solid white;
    border-radius: 0.5rem;
    background-color: white;
    display: none;
    -webkit-animation-name: example2;
            animation-name: example2;
    -webkit-animation-duration: 0.8s;
            animation-duration: 0.8s;
  }
  .routines {
    border-radius: 1rem;
    width: 100%;
    margin: 2rem auto;
    z-index: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #test1, #test2, #test3, #test4 {
    padding: 0;
    margin: 0;
  }
}

/* ) #######################################################################################
############################################################################################
################################################################################################
################################################################################################*/
@media only screen and (min-width: 2201px) and (max-width: 3000px) {
  #a-five-option {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .afour {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    width: 100%;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #b1 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    color: white;
    font-size: 3rem;
    width: 40vw;
  }
  #b2 {
    display: none;
    color: white;
    font-size: 2rem;
    height: 2rem;
    z-index: 9;
    width: 40vw;
  }
  #b3 {
    text-align: center;
    color: white;
    width: 40vw;
  }
  #b4 {
    padding: 0.5rem;
    width: 40vw;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    text-align: right;
    margin-right: 2rem;
  }
  #b1 i {
    color: silver;
    font-size: 2rem;
    cursor: pointer;
  }
  #b2 i {
    color: silver;
    font-size: 2rem;
    cursor: pointer;
  }
  #b3 p {
    color: silver;
    font-size: 2rem;
    cursor: pointer;
  }
  #b4 i {
    color: silver;
    font-size: 2rem;
    text-align: right;
    cursor: pointer;
  }
  #behaviour {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100vw;
  }
  body {
    width: 100vw;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    background-color: darkslateblue;
  }
  #containerforoptions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    max-width: 100vw;
    overflow: scroll;
    background-color: cadetblue;
    margin: 0rem auto;
  }
  .cont-for-1-option {
    width: 100px;
    height: 100px;
    margin: auto;
    z-index: 2;
  }
  .cont-for-2-option {
    width: 2vw;
    height: 100%;
    margin: auto auto auto 0;
    z-index: 2;
    color: white;
    font-size: 2rem;
    text-align: left;
    text-decoration: none;
  }
  .cont-for-2-option a {
    width: 1rem;
    height: 1rem;
    margin: auto auto auto 0;
    z-index: 2;
    color: white;
    font-size: 2rem;
    text-align: left;
    text-decoration: none;
  }
  .cont-for-3-option a {
    width: 1rem;
    height: 1rem;
    margin: auto 0 auto auto;
    z-index: 2;
    color: white;
    font-size: 2rem;
    text-align: right;
    text-decoration: none;
  }
  .groupof4options {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 49vw;
    margin: auto;
  }
  .groupof8options-1 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    margin: 0.5rem auto;
    padding: 0.3rem;
    width: 200vw;
  }
  #image1, #image2, #image3, #image4, #image5, #image6, #image7, #image8,
  #image9, #image10, #image11, #image12, #image13, #image14, #image15, #image16,
  #image17, #image18, #image19, #image20, #image21, #image22, #image23, #image24,
  #image25, #image26, #image27, #image28, #image29, #image30, #image31, #image32 {
    width: 100%;
    height: 100%;
    border-radius: 0.3rem;
    margin: auto;
  }
  #message {
    text-align: center;
    color: white;
  }
  #plus1, #plus2, #plus3, #plus4, #plus5 {
    width: 30px;
    height: 30px;
    color: white;
    font-size: 30px;
    display: none;
  }
  #plus6, #plus7, #plus8, #plus9, #plus10 {
    width: 30px;
    height: 30px;
    color: #f7ebeb;
    font-size: 30px;
    display: none;
  }
  #routine1, #routine2, #routine3, #routine4, #routine5 {
    width: 380px;
    height: 380px;
    border: 9px solid white;
    border-radius: 0.5rem;
    z-index: 1;
    background-color: white;
    display: none;
    -webkit-animation-name: example;
            animation-name: example;
    -webkit-animation-duration: 0.8s;
            animation-duration: 0.8s;
  }
  @-webkit-keyframes example {
    from {
      border: 9px solid #9b2af8;
    }
    to {
      border: 9px solid white;
    }
  }
  @keyframes example {
    from {
      border: 9px solid #9b2af8;
    }
    to {
      border: 9px solid white;
    }
  }
  @-webkit-keyframes example2 {
    from {
      border: 9px solid #9b2af8;
    }
    to {
      border: 9px solid white;
    }
  }
  @keyframes example2 {
    from {
      border: 9px solid #9b2af8;
    }
    to {
      border: 9px solid white;
    }
  }
  #routine6, #routine7, #routine8, #routine9, #routine10 {
    width: 380px;
    height: 380px;
    border: 9px solid white;
    border-radius: 0.5rem;
    background-color: white;
    display: none;
    -webkit-animation-name: example2;
            animation-name: example2;
    -webkit-animation-duration: 0.8s;
            animation-duration: 0.8s;
  }
  .routines {
    border-radius: 1rem;
    width: 100%;
    margin: 2rem auto;
    z-index: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #test1, #test2, #test3, #test4 {
    padding: 0;
    margin: 0;
  }
}

/* ) #######################################################################################
############################################################################################
################################################################################################
################################################################################################*/
@media only screen and (min-width: 3001px) and (max-width: 4000px) {
  #a-five-option {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .afour {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    width: 100%;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #b1 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    color: white;
    font-size: 4rem;
    width: 40vw;
  }
  #b2 {
    display: none;
    color: white;
    font-size: 4rem;
    height: 2rem;
    z-index: 9;
    width: 40vw;
  }
  #b3 {
    text-align: center;
    color: white;
    width: 40vw;
  }
  #b4 {
    padding: 0.5rem;
    width: 40vw;
    color: white;
    font-size: 4rem;
    cursor: pointer;
    text-align: right;
    margin-right: 2rem;
  }
  #b1 i {
    color: silver;
    font-size: 2rem;
    cursor: pointer;
  }
  #b2 i {
    color: silver;
    font-size: 2rem;
    cursor: pointer;
  }
  #b3 p {
    color: silver;
    font-size: 2rem;
    cursor: pointer;
  }
  #b4 i {
    color: silver;
    font-size: 2rem;
    text-align: right;
    cursor: pointer;
  }
  #behaviour {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100vw;
  }
  body {
    width: 100vw;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    background-color: darkslateblue;
  }
  #containerforoptions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    max-width: 100vw;
    overflow: scroll;
    background-color: cadetblue;
    margin: 0rem auto;
  }
  .cont-for-1-option {
    width: 100px;
    height: 100px;
    margin: auto;
    z-index: 2;
  }
  .cont-for-2-option {
    width: 2vw;
    height: 100%;
    margin: auto auto auto 0;
    z-index: 2;
    color: white;
    font-size: 2rem;
    text-align: left;
    text-decoration: none;
  }
  .cont-for-2-option a {
    width: 1rem;
    height: 1rem;
    margin: auto auto auto 0;
    z-index: 2;
    color: white;
    font-size: 2rem;
    text-align: left;
    text-decoration: none;
  }
  .cont-for-3-option a {
    width: 1rem;
    height: 1rem;
    margin: auto 0 auto auto;
    z-index: 2;
    color: white;
    font-size: 2rem;
    text-align: right;
    text-decoration: none;
  }
  .groupof4options {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 49vw;
    margin: auto;
  }
  .groupof8options-1 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    margin: 0.5rem auto;
    padding: 0.3rem;
    width: 200vw;
  }
  #image1, #image2, #image3, #image4, #image5, #image6, #image7, #image8,
  #image9, #image10, #image11, #image12, #image13, #image14, #image15, #image16,
  #image17, #image18, #image19, #image20, #image21, #image22, #image23, #image24,
  #image25, #image26, #image27, #image28, #image29, #image30, #image31, #image32 {
    width: 100%;
    height: 100%;
    border-radius: 0.3rem;
    margin: auto;
  }
  #message {
    text-align: center;
    color: white;
  }
  #plus1, #plus2, #plus3, #plus4, #plus5 {
    width: 30px;
    height: 30px;
    color: white;
    font-size: 30px;
    display: none;
  }
  #plus6, #plus7, #plus8, #plus9, #plus10 {
    width: 30px;
    height: 30px;
    color: #f7ebeb;
    font-size: 30px;
    display: none;
  }
  #routine1, #routine2, #routine3, #routine4, #routine5 {
    width: 450px;
    height: 450px;
    border: 9px solid white;
    border-radius: 0.5rem;
    z-index: 1;
    background-color: white;
    display: none;
    -webkit-animation-name: example;
            animation-name: example;
    -webkit-animation-duration: 0.8s;
            animation-duration: 0.8s;
  }
  @-webkit-keyframes example {
    from {
      border: 9px solid #9b2af8;
    }
    to {
      border: 9px solid white;
    }
  }
  @keyframes example {
    from {
      border: 9px solid #9b2af8;
    }
    to {
      border: 9px solid white;
    }
  }
  @-webkit-keyframes example2 {
    from {
      border: 9px solid #9b2af8;
    }
    to {
      border: 9px solid white;
    }
  }
  @keyframes example2 {
    from {
      border: 9px solid #9b2af8;
    }
    to {
      border: 9px solid white;
    }
  }
  #routine6, #routine7, #routine8, #routine9, #routine10 {
    width: 450px;
    height: 450px;
    border: 9px solid white;
    border-radius: 0.5rem;
    background-color: white;
    display: none;
    -webkit-animation-name: example2;
            animation-name: example2;
    -webkit-animation-duration: 0.8s;
            animation-duration: 0.8s;
  }
  .routines {
    border-radius: 1rem;
    width: 100%;
    margin: 2rem auto;
    z-index: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #test1, #test2, #test3, #test4 {
    padding: 0;
    margin: 0;
  }
}
/*# sourceMappingURL=testes.css.map */