/* TJ Mullen */
/* Pre-determined Constraints */
body,
header,
nav,
main,
footer,
h1,
div,
img,
ul,
li,
ol,
figure,
figcaption,
section,
article,
aside,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
}

/* Body color*/
body {
  background-color: #071D49;
}

/* Header Section */
header {
    top: 0;
    bottom: 0;
    background-color: black;
}

/* Header Section */
.custom-container {
    color: #ffffff;
    text-align: center;
    text-decoration-color: #494646;
}

/* Header Text  */
.utah_title {
    color: #ffffff;
    text-align: center;
    text-decoration-color: #494646;
    font-size: 40px;
}

/* Header Utah Logo Secttion */
img {
    max-width: 15%;
    height: auto;
    margin: auto;
    display: block;
}

/* Add a black background color to the top navigation */
.topnav {
    overflow: hidden;
    background-color: #071D49;
    font-family: "DM Serif Text", serif; 
}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

/* Add an active class to highlight the current page */
.active {
    background-color: #AA0200;
    color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
}

/* Dropdown float Setting */
.custom_dropdown {
    float: left;
    overflow: hidden;
}

/* Dropdown settings with Button */
.custom_dropdown .dropbtn {
    font-size: 17px;    
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}
/* Dropdown Content Setting */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #071D49;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Dropdown links Setting */
.dropdown-content a {
    float: none;
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    font-family: "DM Serif Text", serif; 
}

/* Change the color of links on hover */
.topnav a:hover, .custom_dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}

/* Dropdown color when hovering */
.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}
/* Dropdown display W/ Button */
.custom_dropdown:hover .dropdown-content {
  display: block;
}

/* Main index 1st Section Div=class */
.Welcome-to-utah {
    position: relative;
}

/* Index HTML File */
/* Main index 1st Section Image=class */
img.bgimg {
    max-width: 100%;
    height: auto;
}

/* Main index 1st div Section display */
.div {
    display: block;
    unicode-bidi: isolate;
}

/* Main index 1st Section Aside=class */
aside.top_left_welcome{
    color: #fff;
    position: absolute;
    top: 25px;
    left: 16px;
    padding: 2px 7px 2px 7px;
    margin-right: 15px;
    font-size: 15px;
}

/* Main index 2nd Section W/ state-description */
.state-description {
    position: relative;
    background-color: #AA0200;   
}

/* Main index 2nd Section W/ h2-red */
.h2-red {
    color: white;
    margin-top: 0;
    padding-top: 0;
    border: 10px solid #AA0200;
}

/* Main index 2nd Section W/ list-red-tab-desk */
.list-red-tab-desk {
    color: white;
}

/* Main index 2nd Section W/ list */
li {
    font-size: 14px;
    margin: 20px;
    padding-bottom: 5px;
 }

 /* Main index 3rd Section W/ Popular Cities */
.popular-cities {
    position: relative;
    background-color: #071D49;
    
 }

 /* Main index 3rd Section h2 title */
.h2-center-title {
    font-family: 14px;
    color: white;
    text-align: center;
    margin-top: 0;
    padding-top: 20px;
 }

/* Main index 3rd Section city-gallery div */
.city-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 0 auto;
    padding: 20px;
}

/* Main index 3rd Section image */
.city-image img {
    border-bottom: 20%;
    border-radius: 5%;
    min-width: 220px;
    height: 120px;
    display: block;
}

/* Main index 3rd Section image hover */
.city-image img:hover {
    opacity: 0.6;
}

/* Index Popular Cities Slideshoow HTML Files */

/* City Name */
.slc-bg {
  position: relative; /* Essential for positioning the text relative to the image */
  background-color: black;
}
/* City Name */
.city-name {
    position: absolute;
    margin-top: 0px;
    bottom: 0;
    left: 0%;
    z-index: 1;
    text-align: center;
    padding: 20px;
    width: 100%;
    color: #ffffff;
    font-family: "DM Serif Text", serif;
    font-weight: 400px;
    font-style: italic;
    font-size: 12px;
}

/* Soical Media Table */
/* Icon Bar */

.social-table {
    text-align: center;
    position: fixed;
    overflow: auto;
    top: 26%;
    font-size: 45px;
    padding: 12px;
    margin: 20px;
    width: 100px;
    background: black;
    transition: all 0.3s ease;
    border-radius: 20px;
}

.icon-bar a:hover {
    background-color: none;
}

/* Social Media icons */
/* Facebook */
.facebook {
    background: #3B5998;
    color: white;
}
/* TTwitter */
.twitter {
    background: #55ACEE;
    color: white;
}
/* Google */
.google {
    background: #dd4b39;
    color: white;
}
/* Linkedin */
.linkedin {
    background: #007bb5;
    color: white;
}
/* Youtube */
.youtube {
    background: #bb0000;
    color: white;
}

/* Paragraph Sections */
#city-discription, #location, #income {
    box-shadow: 0px 5px 5px 10px #AA0200;
    margin: 0 auto;
    max-width: 1600px;
    padding: 10px 20px 10px 20px;
    background: #071D40;
    border-radius: 15px;
    margin-top: 50px;
    color: white;
}

span.highlighter {
    color: #fbd1a2;
}

/* Slideshow container */
/* Main Slideshow Section */
#myCarousel {
    background-color: #AA0200;
    padding: 50px;
    border-radius: 20px 20px;
    margin-bottom: 50px;
    margin-top: 50px;
}

/* Whole Slideshow Section */
.container {
    max-width: 80%;
    padding-right:100px;
    padding-left: 100px;
    margin-right: auto;
    margin-left: auto;
}

/* Sideshow Caption */
.carousel-caption {
    color: black;
    top: 0;
}

/* Make the slideshow images fully responsive */
.carousel-inner img {
    max-width: 100%;
    height: auto;
}

/* Paragraph Sections */
#utah-history {
    box-shadow: 0px 5px 5px 10px #AA0200;
    text-align: center;
    margin: 0 auto;
    max-width: 1000px;
    padding: 10px 20px 10px 20px;
    background: #071D40;
    border-radius: 15px;
    margin-top: 50px;
    margin-bottom: 50px;
    color: white;
}

/* Main index 1st Section Image=class */
img.hist-img {
    max-width: 50%;
    height: auto;
}
/* Contaact Page */
/* Contact Map Section */
.map-container {
    justify-content: center;
    align-items: center;
    margin: 15px;
}

/* Contact Map next Button */
.next_button {
    position: absolute;
    right: 15px;
}

/* Contact Map previous Button */
.previous_button {
    left: 15px;
}

/* Contact Map Button */
button {
    padding: 10px 20px;
    margin: 10px;
    cursor: pointer;
}

/* Contact form Group */
.form-group {
    margin-left: 20%;
    margin-right: 20%;
    margin-bottom: 50px;
    padding: 15px;
    background-color: #AA0200;
    border-radius: 5px;
}

/* Contact form Title */
.form-title {
    background-color: #AA0200;
    text-align: center;
    color: white;
}

/* Contact form text */
.text-def {
    color: white;
}

/* Contact form invalid feedback */
.invalid-feedback {
    color: white;
}

/* Contact form submit Button */
.btn-primary {
    color: black;
    background-color: white;
    margin: 0;
}
/* Contact form textarea message box */
textarea {
    width: 100%;
}

/* Footer Area */
/* Fotter index links */
.footer_links {
    background-color: #AA0200;
    padding: 18px;
    text-align: center;
    margin-bottom: 0;
}

/* Fotter index links a element */
.footer_links a {
    font-size: 20px;
    color: white;
    padding: 25px;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Media Query When the screen is min 0 and max oof 550 pixels wide */
@media screen and (min-width: 0px) and (max-width: 550px) {

    .hide-paragraphs {
        display: none;
    }
    /* Main index 2nd Section W/ Tablet and Desktop */
    ul.list-red-tab-desk li {
        display: none;
        margin-bottom: 0;
    }
    .h2-red {
        display: none;
    }
    /* Main index 2nd Section W/ state-description */
    ul.list-red-mobile li {
        color: white;
        margin-top: 0;
        border: 15px solid #AA0200;
    }    
    /* Main index 2nd Section W/ state-description */
    .list-red-mobile li {
        margin-bottom: 0;
    }    
    /* Index Popular Cities Slideshoow HTML Files */
    #myCarousel{
        display: none;
    }
    /* Contact Us Box */
    .form-group {
    margin-left: 10%;
    margin-right: 10%;
    }
    .hist-img {
        display: none;
    }
}
/* Media Query When the screen is less than 550 pixels wide */
@media screen and (min-width: 550px) {

    /* Main index 2nd Section W/ state-description */
    ul.list-red-mobile li {
        display: none;
    }
} 
/* Media Query When the screen is less than 600 pixels wide */
@media screen and (max-width: 600px) {

    /* Header Section */
    .utah_title {
        font-size: 20px;
    }
    /* Navbar Section */
    .topnav a:not(:first-child), .custom_dropdown .dropbtn {
        display: none;
    }
    .topnav a.icon {
        float: right;
        display: block;
    }
    /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. 
    This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }
    .topnav.responsive .custom_dropdown {float: none;}
    .topnav.responsive .dropdown-content {position: relative;}
    .topnav.responsive .custom_dropdown .dropbtn {
        display: block;
        width: 100%;
        text-align: left;
    }
    /* Main index 1st Section W/ Aside Section */
    aside.top_left_welcome h2 {
        font-size:15px;
    }
    aside.top_left_welcome p {
        font-size:15px;
    }
    /* Main index 2nd Section W/ Tablet and Desktop */
    ul.list-red-tab-desk li {
        font-size: 15px;
        margin-bottom: 0;
    }
    .city-gallery {
        grid-template-columns: 1fr;
    }
}
/* Media Query when the screen is greater than 600 pixels wide */
@media screen and (min-width: 600px) {

    /* Main index 1st Section W/ Aside Section */
    aside.top_left_welcome h2 {
        font-size:25px;
    }
    aside.top_left_welcome p {
        font-size:20px;
    }
    /* Main index 2nd Section Tablet and Desktop */
    ul.list-red-tab-desk li {
        font-size: 20px;
        margin: 25px;
        margin-bottom: 0;
    }
}
/* Media Query when the screen is less than 718 pixels wide */
@media screen and (max-width: 718px) {
    /* Soical Media Table */
    .social-table {
        width: 0%;
        padding: 30px;
        font-size: 5px;
        border-radius: 5px;
    }
    /* Slideshow container */
    /* Main Slideshow Section */
    #myCarousel {
        background-color: #AA0200;
        padding: 0;
        border-radius: 0px 0px;
    }
    /* Make the slideshow images fully responsive */
    .carousel-inner img {
        max-width: 150%;
        height: 250%;
    }
    /* Soical Media Table */
    .social-table{
        display: none;
    }
    /* City Name */
    .city-name {
        top: 0;
    }
}
/* Media Query when the screen is less than 1050 pixels wide */
@media screen and (max-width: 1050px) {
            #utah-history {
        margin: 50px;
    }
}
/* Media Query when the screen is greater than 550 and less than 750 pixels wide*/
@media screen and (min-width: 550px) and (max-width: 750px) {

    /* Popular Cities Down to two Columns */
    .city-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* Media Query when the screen is less than 19900 pixels wide */
@media screen and (max-width: 1900px) {
    /* Soical Media Table */
    .social-table{
        width: 25%;
        position: relative;
        font-size: 30px;
        margin: auto;
        border-radius: 10px;
        margin-top: 12px;
        margin-bottom: 12px;
    }
}
/* Media Query when the screen is less than 1015 pixels wide */
@media screen and (min-width: 1015px) {
    .caption-text {
        font-size: 35px;
    }
}
/* Media Query for Large Desktop Viewport */
@media screen and (min-width: 1281px) {
    /* Main index 1st Section Image */
    .bgimg {
        display: none;
    }
    .bgimg{
        display: block;
        min-width: 100%;
        height: auto;
    }
    /* Main index 2nd Section Image */
    img.welcome-img {
        display: none;
    }
    img.welcome-img {
        display: block;
        min-width: 100%;
        height: auto;
    }
}
/* Media Query for extra Large Desktop Viewport */
@media screen and (min-width: 1350px) {
    /* Main index 3rd Section image */
    .city-image img {
        min-width: 420px;
        height: 320px;
    }
}
/* Media Query for extra Large Desktop Viewport */
@media screen and (max-width: 1630px) {
    #city-discription, #location, #income {
        margin: 50px;
    }
}