*, *:before, *:after {
    box-sizing: border-box;
}

body, html {
    width: 100%;
    height: 100%;
    margin: 0;
    font-family: 'Montserrat', sans-serif;
}

.full-wrapper {
    width: 100%;
    height: 100%;
    background-color: #FFFBEE;
    overflow: hidden;
    padding: 20px 30px;

}
 
/*--------------------------------------
         HEADER AND SITE NAV
----------------------------------------*/
header {
    display: flex;
    justify-content: space-between;
}

header nav ul {
    display: flex;
    flex-flow: row;
    list-style-type: none;
    margin-right: 50px;
}

header nav ul li:not(:last-child) {
    margin-right: 30px;
}

header nav ul li a span {
    font-size: 80%;
    position: relative;
    top: -9px;
    left: 2px;
    padding: 4px 7px;
    font-weight: 600;
    background-color: white;
    border-radius: 100%;
}

header nav ul li {
    font-weight: normal;
}

header nav ul li:first-child {
    display: block;
}

header nav ul li.selected {
    border-bottom: 2px solid red;
    font-weight: 600;
}

header nav ul li a {
    text-decoration: none;
    font-size: 16px;
    color: #000000;
}



/*--------------------------------------
        CYCLE CATEGORY NAV
----------------------------------------*/

nav .category {
    display: flex;
    list-style-type: none;
    margin: 70px 0 60px 15px;
}

nav .category .category-item {
    font-size: 20px;
    font-weight: 500;
    line-height: 20px;
    opacity: 0.5;
    margin-right: 40px;
    cursor: pointer;
}

nav .category .category-item.selected {
    font-size: 32px;
    color: black;
    opacity: 1;
}



/*--------------------------------------
        CYCLES
----------------------------------------*/

.cycle-container {
    display: flex;
    margin-top: 100px;
}

.cycle-container .cycle:first-child {
    margin-left: 60px;
}

.cycle-container .cycle {
    margin-right: 180px;
}


/*--------------------------------------
 Footer (Cycle mode and slider controls)
----------------------------------------*/

footer {
    display: flex;
    justify-content: space-between;
}

footer h1.cycle-model {
    font-size: 114px;
    line-height: 114px;
    font-weight: 900;
    margin: 0 0 0 50px;
    color: rgba(0, 0, 0, 0.4);
}

footer .controls ul {
    display: flex;
    align-self: center;
    list-style-type: none;
    margin-top: calc(135px * 0.4)
}

footer .controls ul li {
    font-size: 20px;
    font-weight: 500;
    margin-right: 40px;
    color: #000000;
    cursor: pointer;
}

footer .controls #prev-icon {
   margin-right: 10px;
}

footer .controls #next-icon {
    margin-left: 10px;
 }


/*--------------------------------------
            Animation
----------------------------------------*/

#old-school-cycle .back-wheel {transform-origin: 19% 69.2%;}
#old-school-cycle .front-wheel {transform-origin: 80.7% 69.2%;}

#girly-fun-cycle .back-wheel {transform-origin: 20.5% 71.8%;}
#girly-fun-cycle .front-wheel {transform-origin: 82% 72%;}


@keyframes rotate-anticlockwise {
    /* from {transform: rotate(0deg);} */
    to {transform: rotate(-360deg);}
}

@keyframes rotate-clockwise {
    /* from {transform: rotate(0deg);} */
    to {transform: rotate(360deg);}
}

.move-forward  { animation: 4s rotate-clockwise ease-in-out 1; }
.move-backward { animation: 4s rotate-anticlockwise ease-in-out 1; }

.move-container-left {
    animation: 4s move-left ease-in-out 1;
    animation-delay: 100ms;
    position: relative;
}

.move-container-right {
    animation: 4s move-right ease 1;
    animation-delay: 100ms;
    position: relative;
}

@keyframes move-left {
    from {left: 0;}
    to {left: -850px;}
}

@keyframes move-right {
    from {left: 0;}
    to {left: 800px;}
}