﻿@media all and (min-width: 960px) { /* PCs */
    body {
        font-size: 18px;
    }

    h1 {
        font-size: 4vw;
    }

    h2 {
        font-size: 3vw;
    }

    .sruNav {
        font-size: 4vw;
        margin-left: 10px !important;
    }

    p {
        text-align: left;
        font-size: 2vw;
        padding-left: 5vw;
        padding-right: 5vw;
    }

        p.image-caption {
            font-size: 2vw;
            font-weight: bold;
        }

    .pText {
        font-size: 2vw;
        margin-left: 10vw;
        margin-right: 10vw;
    }

    .tarName {
        font-size: 3vw;
    }

    .tarDesc {
        font-size: 2vw;
    }

    .imgBox {
        font-size: 2vw;
    }

    .enablerTable {
        font-size: 2vw;
    }

    .respTextDiv {
        margin-left: auto !important;
        margin-right: auto !important;
        min-width: 60% !important;
        max-width: 75% !important;
    }

    .respTextbox {
        min-width: 100% !important;
    }

    .respMenu {
        max-width:30%;
        font-size:2vw!important;
    }
}
/* END PCs*/

@media all and (max-width: 959px) and (min-width: 600px) { /* Tablets */
    body {
        font-size: 16px;
    }

    h1 {
        font-size: 8vw;
    }

    h2 {
        font-size: 4vw;
    }

    .sruNav {
        font-size: 8vw;
        margin-left: 10px !important;
    }

    p {
        text-align: left;
        font-size: 5vw;
        padding-left: 1vw;
        padding-right: 1vw;
    }

        p.image-caption {
            font-size: 3vw;
            font-weight: bold;
        }

    .pText {
        font-size: 4vw;
        margin-left: 10vw;
        margin-right: 10vw;
    }

    .tarName {
        font-size: 4vw;
    }

    .tarDesc {
        font-size: 3vw;
    }

    .imgBox {
        font-size: 3vw;
    }

    .enablerTable {
        font-size: 5vw;
    }

    .respTextDiv {
        margin-left: auto !important;
        margin-right: auto !important;
        min-width: 60% !important;
        max-width: 75% !important;
    }

    .respTextbox {
        min-width: 100% !important;
    }

    .respMenu {
        max-width: 40%;
        font-size: 3vw !important;
    }
}
/* END tablets */

@media all and (max-width: 599px) and (min-width: 320px) { /* Phones */
    body {
        font-size: 12px;
    }

    .sruNav {
        font-size: 8.75vw;
        margin-left: 5px !important;
        display: inline!important;
    }

    .headerImg {
        max-width: 25vw;
        height: auto;
    }

    h1 {
        font-size: 8vw;
    }

    h2 {
        font-size: 4vw;
    }

    p {
        text-align: left;
        font-size: 5vw;
        padding-left: 2vw;
        padding-right: 2vw;
    }

        p.image-caption {
            font-size: 4vw;
            font-weight: bold;
        }

    .pText {
        font-size: 6vw;
        margin-left: 6vw;
        margin-right: 6vw;
    }

    .tarName {
        font-size: 6vw;
    }

    .tarDesc {
        font-size: 5vw;
    }

    .imgBox {
        font-size: 5vw;
    }

    .enablerTable {
        font-size: 4vw;
    }

    .respTextDiv {
        margin-left: auto !important;
        margin-right: auto !important;
        min-width: 90% !important;
        max-width: 90% !important;
    }

    .respTextbox {
        min-width: 100% !important;
    }

    .respMenu {
        max-width: 60%;
        font-size: 5vw !important;
    }
}
/* END Phones */

/* End responsive media query CSS */

.container {
    min-width: 100% !important;
}

.respImg {
    max-width: 90%;
    min-width: 90%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}


.tarredHeader {
    font-size: 1.5em;
    font-weight: bold;
}

.tarName {
    color: navy;
    font-weight: bold;
}

.tarDesc {
    color: black;
    font-weight: bold;
}

.tarLine {
    border: navy solid 1px;
    color: navy;
}

.imgBox {
    background-color: white;
    border: 1px solid black;
    padding: 10px;
    margin-bottom: 25px;
    margin-left: auto;
    margin-right: auto;
    max-width: 75%;
}

/* Navigation */
.nav-link {
    padding:0.2rem 1rem;
}
/* Icon 1 */
.animated-icon1, .animated-icon3, .animated-icon4 {
    width: 80px; /* 30 */
    min-height: 40px; /* 20 */
    position: relative;
    margin: 0px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
}

    .animated-icon1 span, .animated-icon3 span, .animated-icon4 span {
        display: block;
        position: absolute;
        height: 8px;
        width: 100%;
        border-radius: 9px;
        opacity: 1;
        left: 0;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: .25s ease-in-out;
        -moz-transition: .25s ease-in-out;
        -o-transition: .25s ease-in-out;
        transition: .25s ease-in-out;
    }

    .animated-icon1 span {
        background: #EE1B24;
    }

    .animated-icon3 span {
        background: #e3f2fd;
    }

    .animated-icon4 span {
        background: #f3e5f5;
    }

    .animated-icon1 span:nth-child(1) {
        top: 0px;
    }

    .animated-icon1 span:nth-child(2) {
        top: 20px;
    }

    .animated-icon1 span:nth-child(3) {
        top: 40px;
    }

    .animated-icon1.open span:nth-child(1) {
        top: 11px;
        -webkit-transform: rotate(135deg);
        -moz-transform: rotate(135deg);
        -o-transform: rotate(135deg);
        transform: rotate(135deg);
    }

    .animated-icon1.open span:nth-child(2) {
        opacity: 0;
        left: -60px;
    }

    .animated-icon1.open span:nth-child(3) {
        top: 11px;
        -webkit-transform: rotate(-135deg);
        -moz-transform: rotate(-135deg);
        -o-transform: rotate(-135deg);
        transform: rotate(-135deg);
    }

    /* Icon 3*/
    .animated-icon3 span:nth-child(1) {
        top: 0px;
    }

    .animated-icon3 span:nth-child(2), .animated-icon3 span:nth-child(3) {
        top: 10px;
    }

    .animated-icon3 span:nth-child(4) {
        top: 20px;
    }

    .animated-icon3.open span:nth-child(1) {
        top: 11px;
        width: 0%;
        left: 50%;
    }

    .animated-icon3.open span:nth-child(2) {
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .animated-icon3.open span:nth-child(3) {
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

    .animated-icon3.open span:nth-child(4) {
        top: 11px;
        width: 0%;
        left: 50%;
    }

    /* Icon 4 */
    .animated-icon4 span:nth-child(1) {
        top: 0px;
        -webkit-transform-origin: left center;
        -moz-transform-origin: left center;
        -o-transform-origin: left center;
        transform-origin: left center;
    }

    .animated-icon4 span:nth-child(2) {
        top: 10px;
        -webkit-transform-origin: left center;
        -moz-transform-origin: left center;
        -o-transform-origin: left center;
        transform-origin: left center;
    }

    .animated-icon4 span:nth-child(3) {
        top: 20px;
        -webkit-transform-origin: left center;
        -moz-transform-origin: left center;
        -o-transform-origin: left center;
        transform-origin: left center;
    }

    .animated-icon4.open span:nth-child(1) {
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
        top: 0px;
        left: 8px;
    }

    .animated-icon4.open span:nth-child(2) {
        width: 0%;
        opacity: 0;
    }

    .animated-icon4.open span:nth-child(3) {
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
        top: 21px;
        left: 8px;
    }

button:focus {
   outline: 0px;
}
/* End Navigation */

/* ConMan (comment management */
.rbl {
    display: inline-block;
    border: solid green 2px;
    padding: 0 10px;
    margin-left: 20px;
}

    .rbl input[type="radio"] {
        margin-left: 30px;
        margin-right: 10px;
    }

#tblShowInPage td {
    border: green solid 2px;
    padding: 0 5px;
}
/* End ConMan */
