/* Add here all your CSS customizations */

@media (max-width: 1200px) {
    header nav.nav-main {
        margin-top: 35px;
    }

    header div.social-icons {
        margin-top: 30px;
    }
}


@media (max-width: 992px) {
	#header .logo img {
		max-width: 180px;
	}
}

#main{
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.logos{
  display: flex;
  justify-content: center;
  align-items: center;
}

.center-declaration{
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  height: 32vh;
  margin-top: 1em;
  margin-bottom: 1em;
}
.center-declaration::before{
  content: "";
  width: 100%;
  position: absolute;
  top: 0; left: 0;
  width: 100%; 
  height: 100%;
  //background-image: url("../img/logo.png");
  filter: grayscale(0.9) opacity(0.045);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}

.center-declaration *{
  position: relative;
}

.intro-buttons{
  display: flex;
  justify-content: center;
}

.margin-left-1{
  margin-left: 1%;
}

.margin-right-1{
  margin-right: 1%;
}

.button-padding{
  padding: 10px 25px;
}

.pageant-state{
  display: flex;
  flex-direction: column;
  /* margin-top: 50px; */
  margin-bottom: 50px;
}

.pageant-state *:nth-child(2){
  color: #DF1575;
  font-size: 2em;
  margin-top: 20px;
  margin-bottom: 20px;
}
.pageant-state *:nth-child(1), .pageant-state *:nth-child(3){
  margin-bottom: 0px;
  text-transform: none;
}
#home-light{
  width: 150px;
  height: 150px;
}


/* Media Queries */
@media (max-width: 400px) {
  #top-title h1{
    font-size: 2em;
  }
  .margin-left-1{
    margin-left: none;
  }
  
  .margin-right-1{
    margin-right: none;
  }
  
  .button-padding{
    padding: 5px 15px;
  }
  .initial-buttons a{
    font-size: 0.7em;
  }
  .row img.img-responsive{
    margin-top: 3em;
    width: 25%
  }
  #nwp{
    margin-top: -2em;
    margin-bottom: 3em;
  }
  #select-state h2{
    font-size: 1.5em;
  }
  #select-state h3{
    font-size: 1.3em;
  }
  #select-state p{
    font-size: 1.5em;
    margin-top: 5px;
    margin-bottom: 5px;
  }
}

@media (min-width: 401px) and (max-width: 800px) {
  #top-title h1{
    font-size: 2em;
  }
  .margin-left-1{
    margin-left: none;
  }
  
  .margin-right-1{
    margin-right: none;
  }
  
  .button-padding{
    padding: 10px 25px;
  }
  .initial-buttons a{
    font-size: 0.7em;
  }
  .row img.img-responsive{
    margin-top: 3em;
    width: 25%
  }
  #nwp{
    margin-top: -2em;
    margin-bottom: 3em;
  }
  #select-state h2{
    font-size: 1.8em;
  }
  #select-state h3{
    font-size: 1.5em;
  }
  #select-state p{
    font-size: 1.7em;
    margin-top: 5px;
    margin-bottom: 5px;
  }
}

@media (min-width: 801px) and (max-width: 1200px) {
  #top-title h1{
    font-size: 2em;
  }
  .margin-left-1{
    margin-left: none;
  }
  
  .margin-right-1{
    margin-right: none;
  }
  
  .button-padding{
    padding: 10px 25px;
  }
  .initial-buttons a{
    font-size: 0.7em;
  }
  .row img.img-responsive{
    margin-top: 3em;
    /* width: 25% */
  }
  #nwp{
    margin-top: -2em;
    margin-bottom: 3em;
  }
  #select-state h2{
    font-size: 1.8em;
  }
  #select-state h3{
    font-size: 1.5em;
  }
  #select-state p{
    font-size: 1.7em;
    margin-top: 5px;
    margin-bottom: 5px;
  }
}