#colorPickerToggle {
    position: fixed;
    margin-top: calc(15vh - 50px);
    width: 50px;
    height: 50px;
    background-color: #2C3E50;
    z-index: 502;
}
#colorPickerToggle i {
    font-size: 30px;
    padding-top: 11px;
    padding-left: 11px;
}
.open-colorpicker {

}
.close-colorpicker {
    display: none;
    padding-left: 13px !important;
}
#colourPicker {
    display: none;
    position: fixed;
    margin-top: 15vh;
    width: 50px;
    border-style: solid;
    border-width: 2px;
    border-color: #2C3E50;
    background-color:#2C3E50;
    z-index: 502;
}
#colourPicker div {
    display: block;
    margin: 5px;
    height: 40px;
    border-style: solid;
    cursor:pointer;
    -webkit-transition: border-width .5s ease;
    -moz-transition: border-width .5s ease;
    -ms-transition: border-width .5s ease;
    -o-transition: border-width .5s ease;
    transition: border-width .5s ease;
}
.colourOption{
    border-width: 0 30px 0 0;
}
#colourOne {
    background-color: #3498DB;
    border-color: #34495E;
}
#colourTwo {
    background-color: #9B59B6;
    border-color: #34495E;
}
#colourThree {
    background-color: #2ECC71;
    border-color: #34495E;
}
#colourFour {
    background-color: #E74C3C;
    border-color: #34495E;
}
#colourFive {
    background-color: #E67E22;
    border-color: #34495E;
}
#colourSix {
    background-color: #F1C40F;
    border-color: #34495E;
}
#colourOne:hover {
    border-width: 0 0 0 30px;
    -webkit-transition: border-width .5s;
    -moz-transition: border-width .5s ease;
    -ms-transition: border-width .5s ease;
    -o-transition: border-width .5s ease;
    transition: border-width .5s ease;
}
#colourTwo:hover {
    border-width: 0 0 0 30px;
    -webkit-transition: border-width .5s, width .5s;
    -moz-transition: border-width .5s, width .5s;
    -ms-transition: border-width .5s, width .5s;
    -o-transition: border-width .5s, width .5s;
    transition: border-width .5s, width .5s;
}
#colourThree:hover {
    border-width: 0 0 0 30px;
    -webkit-transition: border-width .5s, width .5s;
    -moz-transition: border-width .5s, width .5s;
    -ms-transition: border-width .5s, width .5s;
    -o-transition: border-width .5s, width .5s;
    transition: border-width .5s, width .5s;
}
#colourFour:hover {
    border-width: 0 0 0 30px;
    -webkit-transition: border-width .5s, width .5s;
    -moz-transition: border-width .5s, width .5s;
    -ms-transition: border-width .5s, width .5s;
    -o-transition: border-width .5s, width .5s;
    transition: border-width .5s, width .5s;
}
#colourFive:hover {
    border-width: 0 0 0 30px;
    -webkit-transition: border-width .5s, width .5s;
    -moz-transition: border-width .5s, width .5s;
    -ms-transition: border-width .5s, width .5s;
    -o-transition: border-width .5s, width .5s;
    transition: border-width .5s, width .5s;
}
#colourSix:hover {
    border-width: 0 0 0 30px;
    -webkit-transition: border-width .5s, width .5s;
    -moz-transition: border-width .5s, width .5s;
    -ms-transition: border-width .5s, width .5s;
    -o-transition: border-width .5s, width .5s;
    transition: border-width .5s, width .5s;
}
.selectedColour {
    border-width: 0 0 0 30px;
}
.bodyOne {
    color: #3498DB !important;
    transition: 1s;
}
.bodyTwo {
    color: #9B59B6 !important;
    transition: 1s;
}
.bodyThree {
    color: #2ECC71 !important;
    transition: 1s;
}
.bodyFour {
    color: #E74C3C !important;
    transition: 1s;
}
.bodyFive {
    color: #E67E22 !important;
    transition: 1s;
}
.bodySix {
    color: #F1C40F !important;
    transition: 1s;
}

.bodyOne-background {
    background-color: #3498DB !important;
    transition: 1s;
}
.bodyTwo-background {
    background-color: #9B59B6 !important;
    transition: 1s;
}
.bodyThree-background {
    background-color: #2ECC71 !important;
    transition: 1s;
}
.bodyFour-background {
    background-color: #E74C3C !important;
    transition: 1s;
}
.bodyFive-background {
    background-color: #E67E22 !important;
    transition: 1s;
}
.bodySix-background {
    background-color: #F1C40F !important;
    transition: 1s;
}

.bodyOne-border {
    border-color: #3498DB !important;
    transition: 1s;
}
.bodyTwo-border {
    border-color: #9B59B6 !important;
    transition: 1s;
}
.bodyThree-border {
    border-color: #2ECC71 !important;
    transition: 1s;
}
.bodyFour-border {
    border-color: #E74C3C !important;
    transition: 1s;
}
.bodyFive-border {
    border-color: #E67E22 !important;
    transition: 1s;
}
.bodySix-border {
    border-color: #F1C40F !important;
    transition: 1s;
}

.bodyOne-background-before::before,
.bodyOne-background-before::after {
    background-color: #3498DB !important;
    transition: 1s;
}
.bodyTwo-background-before::before,
.bodyTwo-background-before::after {
    background-color: #9B59B6 !important;
    transition: 1s;
}
.bodyThree-background-before::before,
.bodyThree-background-before::after {
    background-color: #2ECC71 !important;
    transition: 1s;
}
.bodyFour-background-before::before,
.bodyFour-background-before::after {
    background-color: #E74C3C !important;
    transition: 1s;
}
.bodyFive-background-before::before,
.bodyFive-background-before::after {
    background-color: #E67E22 !important;
    transition: 1s;
}
.bodySix-background-before::before,
.bodySix-background-before::after {
    background-color: #F1C40F !important;
    transition: 1s;
}