/* styles.css 
   Project: 
   Author: 
   Date: 
	
   Helpful links: 
   	Web colors: 
   		https://en.wikipedia.org/wiki/Web_colors#X11_color_names
	Color picker tool:
		https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool
		http://colorpicker.com

*/

* {
   box-sizing: border-box;
}

img {
   width: 100%;
   display: block;
}

body {
   background-color: white;
   font-family: 'lato', sans-serif;
   /*font-family: 'Montserrat', sans-serif;*/
   /*border: 6px solid black;*/
   padding: 3px;
}

h1 {
   text-align: center;
   color: goldenrod;
   border: 4px solid black;
   background-color: black;
   width: 50%;
   margin: auto;
   margin-bottom: 1%;
}

h3 {
   font-size: 1em;
   margin: auto;
   padding: 1.5%;
}

.firstline, .secondline {
   display: flex;
   /*flex-wrap: wrap;*/
   width: 100%;
   margin: auto;
}

.congress {
   display: flex;
   flex-wrap: wrap;
   margin: auto;
   width: 75%;
   border: 6px solid black;
   padding: 5px;
   background-color: goldenrod;
}

.background {
   width: 50%;
   /*float: right;*/
   padding: 8px;
   background-color: lemonchiffon;
   border: 4px solid black;
   border-radius: 1em;
   font-family: times new roman;
   height: 60%;
}

.background h3 {
   text-align: left;
   font-size: 1.5em;
   color: black;
}

.background p {
   text-align: left;
   font-size: 1em;
   color: black;
}

.districtbox {
   border: 6px solid #333;
   background-color: white;
   overflow: hidden;
   width: 60%;
   height: 100%;
   /*margin: auto;*/
   float: right;
}

.first, .second, .third, .fourth, .fifth, .sixth, .seven, .eight, .nine, .ten, .eleven, .twelve, .thirteen, .fourteen, .fifteen, .sixteen, .seventeen, .eighteen, .ninteen, .twenty, .twentyone, .twentytwo, .twentythree, .twentyfour, .twentyfive, .twentysix, .twentyseven, .twentyeight, .twentynine, .thirty, .thirtyone, .thirtytwo, .thirtythree, .thirtyfour, .thirtyfive, .thirtysix, .thirtyseven, .thirtyeight, .thirtynine, .fourty, .fourtyone, .fourtytwo, .fourtythree, .fourtyfour, .fourtyfive, .fourtysix, .fourtyseven, .fourtyeight, .fourtynine, .fifty, .fiftyone, .fiftytwo, .fiftythree, .senate {
   border: 2px solid #666;
   background-color: #111;
   color: white;
   padding: 1% 0;
   margin: 1%;
   margin: 0.5%;
   float: left;
   font-size: 0.9em;
   text-align: center;
   border-radius: 5%;
   width: 10%;
   height: 10%;
   /*text-transform: uppercase;*/
}


.senate span {
   font-size: 0.5em;
}

/*.senate {
   border: 2px solid #666;
   background-color: #111;
   color: white;
   padding: 1% 0;
   margin: 1%;
   margin: 0.5%;
   float: left;
   font-size: 0.5em;
   text-align: center;
   border-radius: 5%;
   width: 10%;*/
   /*height: 32.75px;
   height: 10%;
   text-transform: uppercase;
}*/

.map {
   /*border: 6px solid #333;*/
   height: 320px;
   /*float: left;*/
   width: 45%;
   margin-left: 3%;
}

.map iframe {
   width: 100%;
   height: 320px;
}



/*.information {
   width: 50%;
   margin: auto;
}*/

.namebox {
   position: relative;
   width: 40%;
   /*margin-left: 1%;*/
   border: 6px solid black;
   background-color: white;
   /*height: 100%;*/
   /*margin: auto;*/
   /*float: left;*/
}


.senatename {
   padding: 1% 1%;
   margin: 1%;
   float: left;
   font-size: 1em;
   text-align: center;
   display: none;
   color: black;
}

.senatename p {
   font-size: 0.8em;
   padding: 8px;
}

.senatename span {
   font-size: 1.7em;
   text-align: center;
   /*float: right;*/
   /*text-transform: uppercase;*/
   /*margin-bottom: 4%;*/
}

.secondname, .thirdname, .fifthname, .sixthname, .sevenname, .ninename, .tenname, .elevenname, .twelvename, .thirteenname, .fourteenname, .fifteenname, .sixteenname, .seventeenname, .eighteenname, .ninteenname, .twentyname, .twentyfourname, .twentysixname, .twentysevenname, .twentyeightname, .twentyninename, .thirtyname, .thirtyonename, .thirtytwoname, .thirtythreename, .thirtyfourname, .thirtyfivename, .thirtysixname, .thirtysevenname, .thirtyeightname, .fourtyname, .fourtyonename, .fourtythreename, .fourtyfourname, .fourtyfivename, .fourtysixname, .fourtysevenname, .fourtyninename, .fiftyonename, .fiftytwoname, .fiftythreename {
   color: royalblue;
   /*padding: 1% 1%;*/
   margin: 1%;
   /*font-size: 1.5em;*/
   text-align: center;
   display: none;
   /*text-transform: uppercase;*/
}

.firstname, .fourthname, .eightname, .twentyonename, .twentytwoname, .twentythreename, .twentyfivename, .thirtyninename, .fourtytwoname, .fourtyeightname, .fiftyname {
   color: red;
   /*padding: 1% 1%;*/
   /*margin: 1%;*/
   /*font-size: 1.5em;*/
   text-align: center;
   display: none;
   /*text-transform: uppercase;*/
}

.firstname, .secondname, .thirdname, .fourthname, .fifthname, .sixthname, .sevenname, .eightname, .ninename, .tenname, .elevenname, .twelvename, .thirteenname, .fourteenname, .fifteenname, .sixteenname, .seventeenname, .eighteenname, .ninteenname, .twentyname, .twentyonename, .twentytwoname, .twentythreename, .twentyfourname, .twentyfivename, .twentysixname, .twentysevenname, .twentyeightname, .twentyninename, .thirtyname, .thirtyonename, .thirtytwoname, .thirtythreename, .thirtyfourname, .thirtyfivename, .thirtysixname, .thirtysevenname, .thirtyeightname, .thirtyninename, .fourtyname, .fourtyonename, .fourtytwoname, .fourtythreename, .fourtyfourname, .fourtyfivename, .fourtysixname, .fourtysevenname, .fourtyeightname, .fourtyninename, .fiftyname, .fiftyonename, .fiftytwoname, .fiftythreename {
   font-size: 0.8em;
   text-align: center;
   color: black;
   margin-top: 7px;
}


.firstname, .secondname, .thirdname, .fourthname, .fifthname, .sixthname, .sevenname, .eightname, .ninename, .tenname, .elevenname, .twelvename, .thirteenname, .fourteenname, .fifteenname, .sixteenname, .seventeenname, .eighteenname, .ninteenname, .twentyname, .twentyonename, .twentytwoname, .twentythreename, .twentyfourname, .twentyfivename, .twentysixname, .twentysevenname, .twentyeightname, .twentyninename, .thirtyname, .thirtyonename, .thirtytwoname, .thirtythreename, .thirtyfourname, .thirtyfivename, .thirtysixname, .thirtysevenname, .thirtyeightname, .thirtyninename, .fourtyname, .fourtyonename, .fourtytwoname, .fourtythreename, .fourtyfourname, .fourtyfivename, .fourtysixname, .fourtysevenname, .fourtyeightname, .fourtyninename, .fiftyname, .fiftyonename, .fiftytwoname, .fiftythreename {
   font-size: 1.3em;
   text-align: center;
   margin: 3%;
}

.twentyonename p, .fiftyname p{
   font-size: 0.7em;
   text-align: center;
   margin: 3%;

}

.oneclear, .twoclear, .thirdclear, .fourthclear, .fifthclear, .sixthclear, .sevenclear, .eightclear, .nineclear, .tenclear, .elevenclear, .twelveclear, .thirteenclear, .fourteenclear, .fifteenclear, .sixteenclear, .seventeenclear, .eighteenclear, .ninteenclear, .twentyclear, .twentyoneclear, .twentytwoclear, .twentythreeclear, .twentyfourclear, .twentyfiveclear, .twentysixclear, .twentysevenclear, .twentyeightclear, .twentynineclear, .thirtyclear, .thirtyoneclear, .thirtytwoclear, .thirtythreeclear, .thirtyfourclear, .thirtyfiveclear, .thirtysixclear, .thirtysevenclear, .thirtyeightclear, .thirtynineclear, .fourtyclear, .fourtyoneclear, .fourtytwoclear, .fourtythreeclear, .fourtyfourclear, .fourtyfiveclear, .fourtysixclear, .fourtysevenclear, .fourtyeightclear, .fourtynineclear, .fiftyclear, .fiftyoneclear, .fiftytwoclear, .fiftythreeclear  {
   border: 2px solid #666;
   background-color: white;
   color: black;
  /* margin: auto;*/
   float: left;
   font-size: 0.6em;
   text-align: center;
   border-radius: 5%;
   /*width: 15%;*/
   width: 100%;
   height: 40px;
   text-transform: uppercase;
   /*bottom: 0%;*/
   margin-top: 10%;
}

.senateclear {
   border: 2px solid #666;
   background-color: white;
   color: black;
   padding: 1% 0;
   /*margin: auto;*/
   float: left;
   font-size: 0.6em;
   text-align: center;
   border-radius: 5%;
   width: 100%;
   height: 40px;
   text-transform: uppercase;
   bottom: 0px;
   /*margin-bottom: 5%;*/
}













/*media query for responsive design */

@media only screen and (max-width: 640px) {
.firstname, .secondname, .thirdname, .fourthname, .fifthname, .sixthname, .sevenname, .eightname, .ninename, .tenname, .elevenname, .twelvename, .thirteenname, .fourteenname, .fifteenname, .sixteenname, .seventeenname, .eighteenname, .ninteenname, .twentyname, .twentyonename, .twentytwoname, .twentythreename, .twentyfourname, .twentyfivename, .twentysixname, .twentysevenname, .twentyeightname, .twentyninename, .thirtyname, .thirtyonename, .thirtytwoname, .thirtythreename, .thirtyfourname, .thirtyfivename, .thirtysixname, .thirtysevenname, .thirtyeightname, .thirtyninename, .fourtyname, .fourtyonename, .fourtytwoname, .fourtythreename, .fourtyfourname, .fourtyfivename, .fourtysixname, .fourtysevenname, .fourtyeightname, .fourtyninename, .fiftyname, .fiftyonename, .fiftytwoname, .fiftythreename p {
   font-size: 0.8em;
}

.firstname, .secondname, .thirdname, .fourthname, .fifthname, .sixthname, .sevenname, .eightname, .ninename, .tenname, .elevenname, .twelvename, .thirteenname, .fourteenname, .fifteenname, .sixteenname, .seventeenname, .eighteenname, .ninteenname, .twentyname, .twentyonename, .twentytwoname, .twentythreename, .twentyfourname, .twentyfivename, .twentysixname, .twentysevenname, .twentyeightname, .twentyninename, .thirtyname, .thirtyonename, .thirtytwoname, .thirtythreename, .thirtyfourname, .thirtyfivename, .thirtysixname, .thirtysevenname, .thirtyeightname, .thirtyninename, .fourtyname, .fourtyonename, .fourtytwoname, .fourtythreename, .fourtyfourname, .fourtyfivename, .fourtysixname, .fourtysevenname, .fourtyeightname, .fourtyninename, .fiftyname, .fiftyonename, .fiftytwoname, .fiftythreename span {
   font-size: 0.9em;
}

.oneclear, .twoclear, .thirdclear, .fourthclear, .fifthclear, .sixthclear, .sevenclear, .eightclear, .nineclear, .tenclear, .elevenclear, .twelveclear, .thriteenclear, .fourteenclear, .fifteenclear, .sixteenclear, .seventeenclear, .eighteenclear, .ninteenclear, .twentyclear, .twentyoneclear, .twentytwoclear, .twentythreeclear, .twentyfourclear, .twentyfiveclear, .twentysixclear, .twentysevenclear, .twentyeightclear, .twentynineclear, .thirtyclear, .thirtyoneclear, .thirtytwoclear, .thirtythreeclear, .thirtyfourclear, .thirtyfiveclear, .thirtysixclear, .thirtysevenclear, .thirtyeightclear, .thirtynineclear, .fourtyclear, .fourtyoneclear, .fourtytwoclear, .fourtythreeclear, .fourtyfourclear, .fourtyfiveclear, .fourtysixclear, .fourtysevenclear, .fourtyeightclear, .fourtynineclear, .fiftyclear, .fiftyoneclear, .fiftytwoclear, .fiftythreeclear  {
   font-size: 0.4em;
   width: 100%;
   height: 9%;
}

.first, .second, .third, .fourth, .fifth, .sixth, .seven, .eight, .nine, .ten, .eleven, .twelve, .thirteen, .fourteen, .fifteen, .sixteen, .seventeen, .eighteen, .ninteen, .twenty, .twentyone, .twentytwo, .twentythree, .twentyfour, .twentyfive, .twentysix, .twentyseven, .twentyeight, .twentynine, .thirty, .thirtyone, .thirtytwo, .thirtythree, .thirtyfour, .thirtyfive, .thirtysix, .thirtyseven, .thirtyeight, .thirtynine, .fourty, .fourtyone, .fourtytwo, .fourtythree, .fourtyfour, .fourtyfive, .fourtysix, .fourtyseven, .fourtyeight, .fourtynine, .fifty, .fiftyone, .fiftytwo, .fiftythree {
   font-size: 0.6em;
}

.senate {
   font-size: 0.01em;
}

.senatename p {
   font-size: 0.4em;
}

.senatename span {
   font-size: 0.7em;
}

.background {
   font-size: 0.6em;
}


}

@media only screen and (max-width: 800px) {
.firstname, .secondname, .thirdname, .fourthname, .fifthname, .sixthname, .sevenname, .eightname, .ninename, .tenname, .elevenname, .twelvename, .thirteenname, .fourteenname, .fifteenname, .sixteenname, .seventeenname, .eighteenname, .ninteenname, .twentyname, .twentyonename, .twentytwoname, .twentythreename, .twentyfourname, .twentyfivename, .twentysixname, .twentysevenname, .twentyeightname, .twentyninename, .thirtyname, .thirtyonename, .thirtytwoname, .thirtythreename, .thirtyfourname, .thirtyfivename, .thirtysixname, .thirtysevenname, .thirtyeightname, .thirtyninename, .fourtyname, .fourtyonename, .fourtytwoname, .fourtythreename, .fourtyfourname, .fourtyfivename, .fourtysixname, .fourtysevenname, .fourtyeightname, .fourtyninename, .fiftyname, .fiftyonename, .fiftytwoname, .fiftythreename p {
   font-size: 0.9em;
}

.firstname, .secondname, .thirdname, .fourthname, .fifthname, .sixthname, .sevenname, .eightname, .ninename, .tenname, .elevenname, .twelvename, .thirteenname, .fourteenname, .fifteenname, .sixteenname, .seventeenname, .eighteenname, .ninteenname, .twentyname, .twentyonename, .twentytwoname, .twentythreename, .twentyfourname, .twentyfivename, .twentysixname, .twentysevenname, .twentyeightname, .twentyninename, .thirtyname, .thirtyonename, .thirtytwoname, .thirtythreename, .thirtyfourname, .thirtyfivename, .thirtysixname, .thirtysevenname, .thirtyeightname, .thirtyninename, .fourtyname, .fourtyonename, .fourtytwoname, .fourtythreename, .fourtyfourname, .fourtyfivename, .fourtysixname, .fourtysevenname, .fourtyeightname, .fourtyninename, .fiftyname, .fiftyonename, .fiftytwoname, .fiftythreename span {
   font-size: 0.9em;
}

.oneclear, .twoclear, .thirdclear, .fourthclear, .fifthclear, .sixthclear, .sevenclear, .eightclear, .nineclear, .tenclear, .elevenclear, .twelveclear, .thriteenclear, .fourteenclear, .fifteenclear, .sixteenclear, .seventeenclear, .eighteenclear, .ninteenclear, .twentyclear, .twentyoneclear, .twentytwoclear, .twentythreeclear, .twentyfourclear, .twentyfiveclear, .twentysixclear, .twentysevenclear, .twentyeightclear, .twentynineclear, .thirtyclear, .thirtyoneclear, .thirtytwoclear, .thirtythreeclear, .thirtyfourclear, .thirtyfiveclear, .thirtysixclear, .thirtysevenclear, .thirtyeightclear, .thirtynineclear, .fourtyclear, .fourtyoneclear, .fourtytwoclear, .fourtythreeclear, .fourtyfourclear, .fourtyfiveclear, .fourtysixclear, .fourtysevenclear, .fourtyeightclear, .fourtynineclear, .fiftyclear, .fiftyoneclear, .fiftytwoclear, .fiftythreeclear  {
   font-size: 0.4em;
   width: 100%;
}

.first, .second, .third, .fourth, .fifth, .sixth, .seven, .eight, .nine, .ten, .eleven, .twelve, .thirteen, .fourteen, .fifteen, .sixteen, .seventeen, .eighteen, .ninteen, .twenty, .twentyone, .twentytwo, .twentythree, .twentyfour, .twentyfive, .twentysix, .twentyseven, .twentyeight, .twentynine, .thirty, .thirtyone, .thirtytwo, .thirtythree, .thirtyfour, .thirtyfive, .thirtysix, .thirtyseven, .thirtyeight, .thirtynine, .fourty, .fourtyone, .fourtytwo, .fourtythree, .fourtyfour, .fourtyfive, .fourtysix, .fourtyseven, .fourtyeight, .fourtynine, .fifty, .fiftyone, .fiftytwo, .fiftythree {
   font-size: 0.65em;
}

.senate {
   font-size: 0.001em;
}

.senatename p {
   font-size: 0.4em;
}

.senatename span {
   font-size: 0.7em;
}

.background {
   font-size: 0.6em;
}

}