.container{
  max-width: 1140px !important;
}

/* - - fonts - - */
* {font-family: 'Montserrat', sans-serif;}
.bold {font-weight: bold;}
.underline {text-decoration: underline;}
.mySize1 {font-size: 80px;}
.mySize2 {font-size: 27px;}
.mySize3 {font-size: 22.5px;}
.mySize4 {font-size: 18px;}
.p {font-size: 18px;}
.test {border: 1px solid red;}

/* - - space - - */
.pt { padding-top: 60px;}
.removeSpaceTop {padding-top: 0 !important;}
.removeSpaceBottom {padding-bottom: 0 !important;}

/* - - layout - - */
.column {display: flex;}
.block {display: block !important;}

/* - - colors - - */
.blue { color: #0082AB !important;}
.blueHover:hover { color: rgba(0, 130, 171, 0.7) !important;}
.blueBackground { background-color: #0082AB;}
.blueGhostButton {
  background-color: transparent; 
  border: 1px solid #0082AB; 
  color: #0082AB 
}
.blueGhostButton:hover {
  background-color: #0082AB; 
  border: 1px solid #0082AB; 
  color: white;
}

.whiteGhostButton {
  background-color: transparent; 
  border: 1px solid white; 
  color: white; 
}
.whiteGhostButton:hover {
  background-color: white; 
  border: 1px solid white; 
  color: #0082AB;
}
.darkBlue { color: #005B78;}
.darkBlueBackground { background-color: #005B78;}
.black {color: #071013 !important}
.blue {color: #0082AB !important}

/* - - navigation - - */
.navbar-item.is-active {
  background-color: white !important;
  color: #0082AB !important;
  
}
.navbar-item:hover {
  background-color: rgb(255, 255, 255, 1) !important;
  color: #0082AB !important;
}
.navbar-link.is-active {
  color: #0082AB !important;
  background-color: white !important;
}
.navbar-link:hover {
  background-color: transparent !important;
  color: #0082AB !important;
}
.navbar-link::after {border-color: #0082AB !important;}

.navbar-link:visted {
  background-color: white !important;
}

/* - - footer - - */
#footerLevel {
  display: flex;
  align-items: flex-start;
  flex-direction: row;
}
.footer a:hover {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* - - hero- - */
.heroSection {
  background-attachment: fixed;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat, no-repeat, no-repeat;
}

#indexHero{
  background-image: url('img/indexCroppedLight.jpg');
}
#aboutHero{
  background-image: url('img/natureCroppedLight.jpg');
}
#galleryHero{
  background-image: url('img/galleryCroppedLight.jpg');
}
#contactHero{
  background-image: url('img/contactCroppedLight.jpg');
}

#bestFriendsHero {
  background-image: url('img/bestFriendsCropped2Light.jpg');
}
#toDoListHero {
  background-image: url('img/checklistCropped_light.jpg');
}
#blackOceanHero{
  background-image: url('img/darknessArt_light.jpg');
}
#rentToOwnHero{
  background-image: url('img/house_light.jpg');
}
#oliveHero{
  background-image: url('img/oliveCropped_light.jpg');
}
#berriesHero{
  background-image: url('img/berriesCropped_light.jpg');
}

/* - - negative margin sections - - */
.negativeMarginSection {
  position: absolute;
  width: 100vw;
  margin-top: -35px;
  padding-top: 15px; padding-bottom: 15px;
  background: linear-gradient(
    to right, 
    #0082AB 0%, 
    #0082AB 50%, 
    transparent 50%, 
    transparent 100%) !important; 
}
/* - - specific sections - - */
#skillsIndex {
  background-image: url('img/skillsIndexCroppedBlue.jpg');
  background-attachment: fixed;
  background-size: cover;
  background-position: 0 0px;
  background-position: top center;
  background-repeat: no-repeat, no-repeat, no-repeat;
}

#contactFooter {
  background-image: url('img/UXCroppedBlue.jpg');
  background-attachment: fixed;
  background-size: cover;
  background-position: 0 0px;
  background-position: top center;
  background-repeat: no-repeat, no-repeat, no-repeat;
}

#aboutMe {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#myLikes {
  background-image: url('img/mountainsDarkBlue.jpg');
  background-attachment: fixed;
  background-size: cover;
  background-position: 0 0px;
  background-position: top center;
  background-repeat: no-repeat, no-repeat, no-repeat;
}

#myTools {
  background-image: url('img/laptop2DarkBlue.jpg');
  background-attachment: fixed;
  background-size: cover;
  background-position: 0 0px;
  background-position: top center;
  background-repeat: no-repeat, no-repeat, no-repeat;
}

#contactForm {
  background-image: url('img/laptopBlue.jpg');
  background-attachment: fixed;
  background-size: cover;
  background-position: 0 0px;
  background-position: top center;
  background-repeat: no-repeat, no-repeat, no-repeat;
}

#projectColumns .column {
  display: flex;
}

.pageLinkBox {
  min-height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: cover;
  background-position: 0 0px;
  background-position: top center;
  background-repeat: no-repeat, no-repeat, no-repeat;
}
#projectsPageLinkBox {background-image: url('img/houseSmallBlue.jpg');}
#aboutPageLinkBox {background-image: url('img/mountainSmallBlue.jpg');}
#contactPageLinkBox {background-image: url('img/laptopSmallBlue.jpg');}
.pageLinkBox:hover {
  background-image: none !important;
  background-color: #0082AB;
  border: 1px solid #0082AB;
}

/* - - Media Queries - - */
/* up to desktop */
@media only screen and (max-width: 1023px) {
  .negativeMarginSection {
    position: relative;
    margin-top: 0;
    background: linear-gradient(
    to right, 
    #0082AB 0%, 
    #0082AB 50%, 
    #0082AB 50%, 
    #0082AB 100%) !important;
  }
  #aboutMe {
    flex-direction: column-reverse;
  }
  form {
    width: 100%;
  }
}

/*up to desktop*/
@media only screen and (max-width: 1023px) {

  #footerLevel {  flex-direction: column;}
}

/* up to mobile */
@media only screen and (max-width: 768px) {
  .hero {height: 100vh !important;}
  .hero-body {display:flex !important; align-items:center !important;}
  .mySize1 {font-size: 40px;}
  .mySize2 {font-size: 22.5px;}
}