/* NOTES
No selector = Type Selector: Selects all elements within the tree
Example: To target , use body{}
. = Class Selector: Selects every instance of element having the Class attribute, so it can be applied to multiple elements on a page
Example: To target , use .hilight{} and .indent{}
# = ID Selctor: Selects only elements having a specific ID attribute, so it can only be applied once per page
Example: To target
, use #navigation{} or div#navigation{}
END NOTES */
/* START BREAKPOINT 0: Width 1920px & larger */
body{
background-color: white;
height: auto;
}
div#headerbannercontainer{
text-align: center;
position: relative;
width: 100%;
margin-top: 25px;
}
div#mobilenav{
display: none;
width: 0%;
float: left;
}
div#headerbanner{
background: url(images/headerbanner.png);
background-size: contain;
background-repeat: no-repeat;
color: transparent;
position: relative;
display: inline-block;
width: 30%;
height: calc(4vw * 1.75);
}
div#mainlogo{
background-color:white;
height:auto;
align-content:center;
float: left;
width: 100%;
text-align: center;
margin-bottom: 25px;
}
div.navigation {
background-color:white;
height:75px;
}
div#navigation{
width: 100%;
float: left;
text-align: center;
}
div#navigation ul{
width: 85%;
text-align: center;
text-transform: uppercase;
font-weight: bold;
position: relative;
display: inline-block;
font-family: arial !important;
font-size: 1.5vmin !important;
}
div#contentcontainer{
margin-top: 10px;
text-align: center;
position: relative;
float: left;
}
div#callbacks_container{
float: left;
width: 90%;
text-align: center;
position: relative;
margin-left: 5%;
}
ul#slider3{
list-style: none;
position: relative;
display: inline-block;
}
div#region1greeting{
font-size: 11pt;
float: left;
width: 62%;
margin-left: 20%;
text-align: justify;
line-height: 1.5;
}
div#historynavigation{
width: 100%;
float: left;
text-align: center;
margin-top: 20px;
}
div#historynavigation ul{
width: 85%;
text-align: center;
text-transform: uppercase;
font-weight: bold;
position: relative;
display: inline-block;
font-family: arial !important;
font-size: 1.5vmin !important;
}
ul#navlist{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
}
#navlist li{
display: inline-block;
}
#navlist li a {
display: block;
color: black;
text-align: center;
text-decoration: none;
}
#navlist li a:hover {
color: red;
}
li.navextra{
margin-left: 1%;
margin-right: 1%;
width: 6%;
border-top: 2px solid black;
border-left: 2px solid black;
border-right: 2px solid black;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
li.navextrag{
margin-left: 1%;
margin-right: 1%;
width: 6%;
background-color: #ededed;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
padding-top: 5px;
}
li.navextra1{
margin-left: 0%;
margin-right: 0%;
width: 15%;
}
li.navextra2{
margin-left: 0%;
margin-right: 0%;
width: 25%;
}
div#history{
width: 40%;
margin-left: 25%;
float: left;
background-color: #ededed;
border-radius: 8px;
padding-top: 30px;
padding-bottom: 30px;
padding-left: 5%;
padding-right: 5%;
}
div#historymessage{
width: 100%;
float: left;
text-align: center;
margin-top: 50px;
margin-bottom: 100px;
background-color: lightgray;
}
div#historytext{
width: 100%;
float: left;
text-align: left;
background-color: #ededed;
}
/* BREAKPOINT 1: Width 1441px - 1919px */
@media screen and (max-width:1919px){
}
/* BREAKPOINT 2: Width 1081px - 1440px */
@media screen and (max-width:1440px){
li.navextra{
width: 10%;
}
li.navextrag{
width: 10%;
}
div#history{
width: 70%;
margin-left: 10%;
}
div#historynavigation ul{
width: 100%;
}
}
/* BREAKPOINT 3: Width 751px - 1080px */
@media screen and (max-width:1080px){
div#mainlogo{
margin-bottom: 0px;
}
li.navextra{
width: 12%;
}
li.navextrag{
width: 12%;
}
div#history{
width: 80%;
margin-left: 5%;
}
}
/* BREAKPOINT 4: Width 750px & smaller */
@media screen and (max-width:750px){
body{
margin-left: 5%;
margin-right: 5%;
}
div#mobilenav{
display: unset;
}
div#navigation ul{
display: none;
}
li.navextra{
font-size: 14px;
}
li.navextrag{
font-size: 14px;
}
div#region1greeting{
font-size: 14px;
}
div#history{
width: 90%;
margin-left: 0%;
}
}