/*
This is a good layout for a mobile-first CSS template.
Following this flow will minimize the number of styles you need to write and will ensure you are thinking, designing and developing mobile-first.
Most of your styles get written like standard CSS, but for your mobile presentation. Generally speaking, a good mobile presention will stretch out nicely for larger screens.
Sometimes, when we stretch out to larger screens, we need to make minor tweaks for the larger devices -- you can make these tweaks in the tablet media query, or if the issue exists on desktop only, the desktop media query.
You will find this is far easier than the opposite task of using CSS to cram your desktop experience into a mobile device.
*/
/*********************************************************************
 LOADS IN A NICE RESET TO ENSURE ALL BROWSERS HAVE THE SAME BASE STYLES
*********************************************************************/
@import url('https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css');

/*********************************************************************
  YOUR MOBILE/BASE STYLES GO HERE
*********************************************************************/
/** SET BORDER BOX EVERYWHERE */
* {
    box-sizing: border-box;
}

/** APPLY BASE TAG STYLES */
body,
html {
    /* Sets default font-size to 16px, ensuring 1em = 16px; */
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
}

/** RESPONSIVE IMAGES */
figure,
img {
    /* Sets image width to match parent */
    width: 100%;
    display: block;
    margin: 0 auto;
}

p {
    line-height: 1.5em;
}

header {
    margin-bottom: 16px;
}

header p {
    margin: 0;
}

/** Caption styles */
.caption,
figcaption {
    font-size: 0.9rem;
    color: #8e8a8a;
    padding: 5px 0;
}

.caption2 {
    font-size: 0.9rem;
    color: #8e8a8a;
    padding: 0;
}

/** BASE CLASSES */
/** Container styles to keep content from becoming too wide or coming too close to
* mobile edge */
.container {
    width: 100%;
    max-width: 800px;
    padding: 10px;
    margin: 0 auto;
}

/** Images are allowed to be a little wider when broken out into their own container */
.container.image {
    max-width: 1200px;
    padding: 0;
}

.container.image .caption,
.container.image figcaption {
    padding: 5px 10px;
}

/**
* Make the annotated image container relative so it can control absolute objects
*/
.annotate {
    position: relative;
}

/**
* Each of the dots is a rounded square (or circle) made up of congruent width and height, a 50% border radius
* Each dot is positioned absolutely so we can place it wherever over the image
* Each dot has 2px stroke white border so it pops against the image
* Each dot has a hidden overflow so it's inside content is confined to the dot's borders
* Each dot has white text by default
*/
.annotate .dot {
    width: 25px;
    height: 25px;
    border: 2px solid #FFF;
    border-radius: 50%;
    position: absolute;
    overflow: hidden;
    color: #FFF;
}

/**
* The inner div of the dot is also positioned absolutely so that we can enforce vertical center
* It also has 25px of padding, is invisible by default and we specify 100% width because absolute objects need the width specified
* otherwise they are, by default, only as wide as their content requires
*/
.annotate .dot .inner {
    position: absolute;
    opacity: 0;
    color: #FFF;
    padding: 25px;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
}

/**
* The close button is absolutely positioned to the top right, is invisible by default and we
* eliminate the link underline. The default link blue becomes white
*/
.annotate .dot .close {
    color: #FFF;
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 2em;
    text-decoration: none;
    opacity: 0;
}

/**
* We establish classes for the background colors
*/
.annotate .dot.green {
    background-color: rgba(0, 110, 65, 0.65);
}

.annotate .dot.purple {
    background-color: rgba(74, 2, 242, 0.65);
}

.annotate .dot.red {
    background-color: rgba(230, 11, 65, 0.65);
}

.annotate .dot.blue {
    background-color: rgba(0, 128, 255, 0.65);
}

.annotate .dot.pink {
    background-color: rgba(240, 12, 182, 0.65);
}

.annotate .dot.orange {
    background-color: rgba(255, 128, 0, 0.65);
}

.annotate .dot.black {
    background-color: rgba(0, 0, 0, 0.65);
}

/**
* Use IDs to position the dots. The IDs include a :not pseudo-selector so that the dot's active class can override these behaviors
*/
#stop:not(.active) {
    top: 5%;
    left: 66%;
}

#curb:not(.active) {
    bottom: 27%;
    left: 18%;
}

#ramp:not(.active) {
    bottom: 17%;
    right: 47%;
}

#snow:not(.active) {
    bottom: 3%;
    left: 74%;
}

#training:not(.active) {
    top: 52%;
    left: 60%;
}

#congestion:not(.active) {
    bottom: 20%;
    right: 10%;
}

#express:not(.active) {
    bottom: 27%;
    left: 68%;
}

/**
* When the dot has an active class, make it a rectangle that is congruently sized to the image.
* Reverse the border radius and positioning logic
* Set the z-index to 2 so that the rectangle is on top of the picture and all of the other dots
*/
.annotate .dot.active {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: 0;
    border: 0;
    z-index: 2;
}

/**
* When a dot is active, it's .inner and .close elements
* should be made opaque with a transition so that the visually fade-in
*/
.annotate .dot.active .inner,
.annotate .dot.active .close {
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

/**
* Set the collage up as a flexbox
*/
.collage {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-left: 10px;
    padding-right: 10px;
}

/**
* Each image div is half the width of the box with 2.5px of padding.
* 2.5px is used because when the images are up against each other their
* combined padding creates the desired 5px of negative space
*/
.collage .img {
    flex-basis: 50%;
    padding: 2.5px;
}

/**
* Eliminate the right padding from the even children so the image goes full bleed
*/
.collage .img:nth-child(even) {
    padding-right: 0;
}

/**
* Eliminate the left padding from the odd children so the image goes full bleed
*/
.collage .img:nth-child(odd) {
    padding-left: 0;
}

/*********************************************************************
  YOUR TABLET/DESKTOP STYLES GO HERE
*********************************************************************/
@media(min-width: 681px) {

    /* Any adjustments for tablets and larger go here.
    Note these styles will be applied to anything 681px or larger -- so tablet AND desktop */
    /**
    * Increase the padding on desktop because it's nicer
    */
    .annotate .dot.active .inner {
        padding: 75px;
    }

    /**
    * Some dots may need to be slightly repositioned on tablet compared to mobile.
    * We can do that here
    */
    #curb:not(.active) {
        bottom: 28%;
        left: 20%;
    }

    #ramp:not(.active) {
        bottom: 15%;
        right: 47%;
    }

    #stop:not(.active) {
        top: 5%;
        left: 68%;
    }

    #snow:not(.active) {
        bottom: 2%;
        left: 74%;
    }
}

/*********************************************************************
  YOUR DESKTOP-ONLY STYLES GO HERE
*********************************************************************/
@media(min-width: 769px) {
    /* Any adjustments for desktop and larger go here.
    Note these styles will be applied to anything 769px or larger -- so desktop */
}

/*********************************************************************
  YOUR MEDIUM-DESKTOP-ONLY STYLES GO HERE
*********************************************************************/
@media(min-width: 805px) {

    /* Any adjustments for desktop and larger go here.
    Note these styles will be applied to anything 769px or larger -- so desktop */
    .container {
        padding: 0;
    }
}

/*********************************************************************
  YOUR LARGE DESKTOP-ONLY STYLES GO HERE
*********************************************************************/
@media(min-width: 1205px) {

    /* Any adjustments for desktop and larger go here.
    Note these styles will be applied to anything 769px or larger -- so desktop */
    .container.image .caption,
    .container.image figcaption {
        padding: 5px 10px 5px 10px;
    }
}