/******************************************************************************************************
Images
******************************************************************************************************/

.framed {
  border:0.45em solid #ffffff;
  background:#fff;
  -webkit-box-shadow:0 0 0.25em rgba(0, 0, 0, 0.3);
  -moz-box-shadow:0 0 0.25em rgba(0, 0, 0, 0.3);
  box-shadow:0 0 0.25em rgba(0, 0, 0, 0.3);
  width: auto;
}

.boxshadowed {
  -webkit-box-shadow:0 0 0.25em rgba(0, 0, 0, 0.3);
  -moz-box-shadow:0 0 0.25em rgba(0, 0, 0, 0.3);
  box-shadow:0 0 0.25em rgba(0, 0, 0, 0.3);
}

/******************************************************************************************************
Breaks
******************************************************************************************************/

#breakAt736, #breakAt1080 {
  display:inline;
}

@media only screen and (min-width:736px) { /* Small Screen */
  #breakAt736 {
    display:block;
  }
}
@media only screen and (min-width:1024px) { /* Medium Screen  */
  #breakAt1080 {
    display:block;
  }
}


/******************************************************************************************************
Gradient Button
******************************************************************************************************/
input[type="button"],
.gradientButton {
  width:10em;
  margin: 0 auto 1em;
  display: block;
  text-align: center;
  font-size: 28px;
  padding: 20px;
  transition: all 0.5s;
  cursor: pointer;
  border: none;
  color: #FFFFFF;
  /* Rounded Corners */
  -moz-border-radius:8px;
  -webkit-border-radius:8px;
  border-radius:8px;
  /* Drop Shadow */
  -moz-box-shadow: 0px 10px 14px -7px #485364;
  -webkit-box-shadow: 0px 10px 14px -7px #485364;
  box-shadow: 0px 10px 14px -7px #485364;
  /* Gradient Background */
    position: relative;
    background-image: linear-gradient(
    to bottom,
    #3ec0fb,
    #3e83fb
  );
  z-index: 1;
}

/* In order to smoothly transition gradients over time we need to create another image over top of the existing image then set its opacity to zero. */
input[type="button"]::before,
.gradientButton::before {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(
    to bottom,
    #3e83fb,
    #3ec0fb
  );
  z-index: -1;
  transition: opacity 0.5s linear;
  opacity: 0;
  /* Rounded Corners */
  -moz-border-radius:8px;
  -webkit-border-radius:8px;
  border-radius:8px;
}

 /* Now we unhide the second image to apply the transition */
 input[type="button"]:hover::before,
.gradientButton:hover::before {
  opacity: 1;
}

 input[type="button"]:hover,
.gradientButton:hover {
  color: #ffffff !important; /* keep the color white */
}

/* This span is used to create hidden >> characters that appear on hover */
.gradientButton span {
  z-index: 0;
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.gradientButton span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.gradientButton:hover span {
  padding-right: 25px;
}

.gradientButton:hover span:after {
  opacity: 1;
  right: 0;
}

/* A gray version of the gradient button */
.gradientGray {
    background-image: linear-gradient(
    to bottom,
    #a5a5a5,
    #8b8b8b
  );
}

.gradientGray::before {
    background-image: linear-gradient(
    to bottom,
    #8b8b8b,
    #a5a5a5
  );
}

/******************************************************************************************************
About Section
******************************************************************************************************/
#aboutpage {
  margin:0 auto;
  max-width:36em;
}
  
@media only screen and (min-width:736px) { /* Small Screen */
  #aboutpage {
    max-width:44em;
  }
}

/******************************************************************************************************
Education Section
******************************************************************************************************/

#education img {
  height:auto;
  width:90%;
  max-width:24em;
  margin:0 auto;
  display:block;
  content:url("../images/Logos_UWaterloo_Large.png");
}

.hiddenTitle { /* Hide the U of W title. Just use the image when small */
  display:none;
  text-decoration:none;
  text-align:center;
}

.customBreak {
  max-width:15em;
  margin:1em auto 1.5em;
  text-align:center;
}

#education ul {
  max-width:21em;
  margin:0 auto 3em;
}

#education a {
  text-decoration:none;
}

@media only screen and (min-width:480px) { /* XSmall Screen */
  #education img {
    width:24em;
    max-width:none;
  }
}

@media only screen and (min-width:1024px) { /* Medium Screen  */
  .hiddenTitle {
    display:block;
    text-align:left;
    margin-left:8.4em;
  }
  
  #education img {
    height:auto;
    width:12em;
    margin:-2em 0 0 -1.5em;
    display:block;
    float:left;
    content:url("../images/Logos_UWaterloo.jpg");
  }
  
  .customBreak {
     max-width:none;
     text-align:left;
     margin: 1em 0 1em 11.7em;
  }
  
  #education ul {
    max-width:34em;
    text-align:left;
    margin-left:13.1em;
  }
}

@media only screen and (min-width:1280px) { /* Large Screen  */
}

@media only screen and (min-width:1680px) { /* XLarge Screen */
  #education img {
    width:12em;
    margin-left:-3em;
  }
}

/******************************************************************************************************
Skills Section
******************************************************************************************************/

/*********** Skills - Overview ***********/

#skillOverview p {
  max-width:50em;
  margin:-2em auto 3em auto;
}

#skillOverview ul {
  margin:0 auto 4em;
  text-align:center;
  max-width:20em;
}

#skillOverview li {
  text-align:left;
}

@media only screen and (min-width:480px) { /* XSmall Screen */
  #skillOverview ul {
    max-width:50em;
    margin-bottom: 2em;
  }
}

@media only screen and (min-width:1024px) { /* XSmall Screen */
    #skillOverview ul {
      max-width:none;
    }
}

/*********** Skills - Software Development ***********/

#skillSoftDev {
   width:100%;
   margin:0 auto;
}

#skillSoftDev h4 {
  text-align:left;
  margin-left:1em;
}

#skillSoftDev img {
   width:auto;
   height:26em;
   margin:2em 0em 3em 1em;
   display:block;
   float:right;
}

@media only screen and (min-width:480px) { /* XSmall Screen */
   #skillSoftDev {
      max-width:45em;
   }

   #skillSoftDev ul {
      max-width:29em;
   }
   
   #skillSoftDev img {
      height:21em;
      margin:-1.5em 1em 3em 2em;
   }
}

@media only screen and (min-width:736px) { /* Small Screen */
  #skillSoftDev {
    max-width:45em;
  }

  #skillSoftDev ul {
    max-width:29em;
  }
  #skillSoftDev img {
    content:url("../images/SkillsPic_Software.png");
    width:30%;
    max-width:18em;
    height:auto;
    margin:1em 0 0 1em;
  }
}


@media only screen and (min-width:1024px) { /* Medium Screen */
  #skillSoftDev {
    max-width:45em;
  }

  #skillSoftDev ul {
    max-width:29em;
  }
  #skillSoftDev img {
    content:url("../images/SkillsPic_Software_Tall.png");
    width:auto;
    height:23em;
    margin:-3.5em 2em 0em 2em;
  }
}

@media only screen and (min-width:1280px) { /* Large Screen */
  #skillSoftDev {
    max-width:54em;
    margin:0 auto;
  }
  #skillSoftDev img {
    content:url("../images/SkillsPic_Software.png");
    height:auto;
    width: 16em;
    margin:0 1em;
  }
}

@media only screen and (min-width:1680px) { /* XLarge Screen */
  #skillSoftDev img {
    width: 17em;
    margin:0 2em;
  }
}
/*********** Game Design Section ***********/

#skillGameDev {
   width:100%;
   margin:0 auto;
}

#skillGameDev h4 {
  text-align:center;
}

.SmallGamePic { 
  height:auto;
  width:100%;
  max-width:34em;
  margin: 1em auto;
  display:block;
}

.LargeGamePic {
  display:none;
}

#skillGameDev ul {
  margin:0 auto;
}

#gameDevImages {
    text-align: center;
}

#skillGameDev ul {
    max-width:26.5em;
}

@media only screen and (min-width:480px) { /* XSmall Screen */
   
}

@media only screen and (min-width:736px) { /* Small Screen */
    #skillGameDev ul {
        max-width:36em;
    }
}

@media only screen and (min-width:1024px) { /* Medium Screen */

}

@media only screen and (min-width:1280px) { /* Large Screen */

    #skillGameDev ul {
        margin-left:14em;
        margin-bottom:2.5em;
    }
  
    #skillGameDev h4 {
        text-align:left;
        margin-left:45%;
    }
    
    #gameDevImages {
        float: left;
        width: 45%;
        margin:-2em auto 0 auto;
    }
      
    #gameDevImages img {
        margin:0 auto 1em auto;
        vertical-align: middle;
        
    }
    
    .SmallGamePic {
        display:none;
    }
  
    .LargeGamePic {
        display:block;
    }
  
    .WideGamePic{
        max-width:14em;
    }
    
    .TallGamePic {
        max-width:10em;
    }
}

@media only screen and (min-width:1680px) { /* XLarge Screen */

}

/*********** Web Development Section ***********/

#skillWebDev {
  max-width:30em;
  margin:0 auto 2em;
  text-align:center;
}
  
#skillsPicWebLogos {
  display:inline;
  width:25%;
  margin:1em auto 0 auto;
}

#skillsPicWeb {
  display:inline;
  width:50%;
  margin:0 2em 0 0;
  float:right;
}

#skillWebDev ul {
  margin:2em auto;
  clear:both;
  max-width:23.5em;
  text-align:left;
}

@media only screen and (min-width:736px) { /* Small Screen */
  #skillWebDev {
    max-width:44em;
    padding-bottom:0.2em;
  }
  
  #skillWebDev h4 {
    text-align:left;  
    margin-left:1.8em;
  }
  
  #skillsPicWebLogos {
    display:block;
    float:right;
    width:8em;
    margin:-3em 4em 1em 0;
  }
  
  #skillsPicWeb {
    display:block;
    float:right;
    clear:both;
    width:16em;
    margin:0;
  }
  
  #skillWebDev ul {
    clear:none;
    margin:0 0 4em 0;
  }
}

@media only screen and (min-width:1024px) { /* Medium Screen */
  #skillWebDev {
    max-width:none;
    padding-bottom:0;
  }
  
  #skillWebDev h4 {
    text-align:left;
    margin-left:0.8em;
  }
  
  #skillWebDev ul {
    width:16em;
  }
  #skillsPicWebLogos {
    margin:3.5em 46% 2em 0;
  }
  #skillsPicWeb {
    margin:-12em 0 0 0;
    width:40%;
    max-width:24em;
  }
}


/*********** Database Management Section ***********/

/* Small Screen */

#skillDatabase {
   max-width:28em;
   margin:0 auto;
}
  
#skillDatabase h4 {
  text-align:center;
}

#databaseLogos {
  text-align:center;
}

#databaseLogos img {
  margin:0 1em 1em 1em;
  vertical-align: middle;
  max-width:6em;
}

#skillDatabase ul {
  margin:0 auto;
}

@media only screen and (min-width:736px) { /* Small Screen */

  #skillDatabase {
    max-width:38em;
  }
  
  #skillDatabase h4 {
    text-align:left;
    margin-left:9.95em;
  }
  
  #databaseLogos {
    float: left;
    width: 35%;
    margin:-3em auto 0 auto;
  }

  #databaseLogos img {
    display: block;
    width: 100%;
    max-width: 8em;
    margin: auto;
    padding-bottom: 2em;
  }

  #skillDatabase ul {
    margin-left:16em;
    max-width:20em;
  } 
}

@media only screen and (min-width:1024px) { /* Medium Screen */
  #skillDatabase {
    max-width:44em;
  }
  #skillDatabase h4 {
    margin-left:12.53em;
  }
  #skillDatabase ul {
    margin-left:20.5em;
  }
}

@media only screen and (min-width:1680px) { /* XLarge Screen */
  #skillDatabase {
    max-width:none;
  }
  #skillDatabase h4 {
    margin-left:14em;
  }
  #skillDatabase ul {
    margin:0em 0em 0em 23em;
    max-width:28em;
  }

  #databaseLogos {
    width: 42%;
    margin:-2em auto 0 auto;
  }

  #databaseLogos img {
    display: inline;
    max-width: 9em;
    padding: 1em;
  }

}

/*********** Hardware Section ***********/

#skillHardware h4 {
  text-align:center;
}
  
#skillHardware img {
  width:90%;
  height:auto;
  max-width:22em;
  margin: 2em auto;
  display:block;
  float:none;
}

@media only screen and (min-width:736px) { /* Small Screen */
  #skillHardware {
    max-width:39em; /*35em*/
    margin:0 auto 3em;
  }
  
  #skillHardware h4 {
    text-align:left;
    margin:0 0 1em 1em;
  }
  
  #skillHardware img {
    width:18em;
    float:right;
    margin: 0.5em 0.5em 0.5em 2.5em;
  }
}

@media only screen and (min-width:1024px) { /* Medium Screen */
  #skillHardware {
    max-width:46em;
  }
  #skillHardware img {
    margin: 2em 0 2em 5%;
  }
  #skillHardware ul {
    max-width:22em;
  }
}

@media only screen and (min-width:1280px) { /* Large Screen */
  #skillHardware ul {
    max-width:23em;
  }
}

@media only screen and (min-width:1680px) { /* XLarge Screen */
  #skillHardware {
    max-width:none;
  }
  #skillHardware img {
    width:17em;
    margin: -1.5em 0 2em 4em;
  }
  
  #skillHardware ul {
    max-width:none;
  }
}

/*********** Other Skills Section ***********/

#skillOther {
  max-width:none;
  margin:0 auto;
}
  
#skillOther h4 {
  text-align:center;
}

#skillOther ul {
  margin: 0 auto;
  max-width:32em;
}

.skillsPicOther {
  width:80%;
  height:auto;
  float:none;
  display:block;
  margin: 1em auto;
}

#skillsPicOtherTop {
  text-align:center;
  margin:1.5em 0;
}

#skillsPicOtherTop img {
  max-width:12em;
  width:40%;
  display:inline;
  vertical-align:middle;
  margin:auto 4%;
}

#skillsPicOtherBottom img {
  max-width:26em;
  clear:both;
  vertical-align:middle;
}

@media only screen and (min-width:736px) { /* Small Screen */
  #skillOther ul {
    max-width:none;
  }

  #skillsPicOtherTop {
    float:left;
    margin-top:-4em;
  }
  #skillsPicOtherTop img {
    width:80%;
    max-width:11em;
    margin: 1em 4em 3em 0;
    display:block;
  }
  #skillsPicOtherBottom img {
    display:inline-block;
    width:29%;
    margin: 3em 1% 3em 1%;
  }
  
  #skillOther h4 {
    text-align:left;
    margin:0 0 0.7em 10em;
  }
}

@media only screen and (min-width:1024px) { /* Medium Screen */
  #skillsPicOtherTop img {
    width:12em;
  }
}


@media only screen and (min-width:1280px) { /* Large Screen */
  #skillsPicOtherTop {
    margin-top:0;
  }
  #skillOther h4 {
    text-align:right;
    margin:0 6.6em 0.7em 0;
  }
  
  #skillsPicOtherTop img {
    width:100%;
    max-width:12.5em;
    margin: -1em 5em 3em 0;
  }

  #skillOther ul {
    max-width:25em;
    margin-right:6em;
  }
}
@media only screen and (min-width:1680px) { /* XLarge Screen */

  #skillOther h4 {
    margin-right:8.5em;
  }
  
  #skillsPicOtherTop img {
    width:75%;
    max-width:13em;
    margin: -1em 5em 3em 0;
  }

  #skillOther ul {
    max-width:30.5em;
    margin-right:7%;
  }
}


/******************************************************************************************************
Experience Section
******************************************************************************************************/

#experiencepage {
  margin-top:-1.7em;
}

.experienceDivider {
  border-top:3px solid #eaeaea;
  margin:0 0 1em 0;
}

td.experienceDates {
  vertical-align:middle;
  text-align:center;
  width:16em;
  font-size:0.7em;
}

.experienceCompanyName h4 {
  font-size:1em;
  text-align:center;
}

.experienceDetails h4 {
  font-size:1.5em;
  text-align:center;
}

.jobAddress {
  margin: 0;
  margin-left: 0.25em;
  font-weight:normal;
  font-size:0.9em;
  display:inline-block;
}

.ExperienceDetailsDiv {
  display:none;/**/
  margin:0 auto;
}

div.splitAtCEIS {
  display:block;
}
div.splitAtUofW {
  display:block;
}

#Exp_Independent_Details {
  max-width:30em;
}

#Exp_Brock_Details {
  max-width:35em;
}

#Exp_CEIS_Details {
  max-width:33em;
}

#Exp_Sybase_Details {
  max-width:34em;
}

#Exp_CSG_Details {
  max-width:37em;
}

#Exp_Zehrs_Details {
  max-width:28em;
}

button.showHideDetails {
  background-color:white;
  border:none;
  font-size:1em;
  color: #2ba7e0;
  font-weight: 100;
  line-height: 1em;
  margin: 3em auto 2em;
  display:block;
  /*margin-left:2em;*/
}

button.showHideDetails:focus {
  outline-style:none;
}

@media only screen and (min-width:736px) { /* Small Screen */
  td.experienceDates {
    font-size:0.9em;
  }
  .experienceCompanyName h4 {
    font-size:1.1em;
}
  td.experienceDetails {
    padding:0 0 1em 15em;
  }
}

@media only screen and (min-width:1024px) { /* Medium Screen */
  td.experienceDetails {
    padding:0 0 1em 11.9em;
  }
  
  div.splitAtCEIS {
    display:inline;
  }
  
  div.splitAtUofW {
    display:inline;
  }
  
  #Exp_Sybase_Details {
    max-width:29em;
  }
  #Exp_CSG_Details {
    max-width:27em;
  }
}

@media only screen and (min-width:1280px) { /* Large Screen */
  td.experienceDetails {
    padding-left:15em;
  }
}


/******************************************************************************************************
Portfolio Section
******************************************************************************************************/

.portfolioItemContainer {
  width:100%;
  margin:2em auto;
  text-align:center;
  border-top: solid 3px #eaeaea;
  padding:3em 0 1em 0;
}
.portfolioItemContainer:first-child {
  margin-top:0;
  border-top: none;
  padding-top:0;
}

.largeLink {
  display:block;
  font-size:1.3em;
  font-weight:bold;
  margin:1em auto 1em auto;
  text-align:center;
}

.portfolioPageText {
  text-align:left;
  margin: 0 auto;
}

#asteroidEncountersText {
	max-width:32em;
    margin:-2.5em auto 0;
}

#infiniteNinjaText {
  max-width:28em;
  margin:-2.5em auto 0;
}

#snowballBrawlText {
  max-width:none;
  margin:-2.5em auto 0;
}

#gothestText {
  max-width:31em;
  margin:-2.5em auto 0;
}

#fallingTetrominoesText {
  max-width:28em;
  margin:0 auto;
}

#ticTacToeText {
  max-width:24em;
  margin:0 auto;
}

#ticTacToeImages {
  max-width:32em;
  margin: 2em auto;
}


#asteroidEncountersImages {
  max-width:32em;
  margin: 2em auto;
}

#artText {
  max-width:32em;
}

#webDesignText {
  max-width:20em;
  margin-bottom:1.5em;
}

.portfolioPageText h4 {
  line-height:140%;
  font-size:2.8em;
  margin-top:0.3em;
  margin-bottom:0.6em;
  text-align:center;
}

.portfolioVideo {
  display:block;
  width:100%;
  margin: 1em auto;
  height:14.5em;
}

.portfolioPageImg3 {
  width:100%;
  margin:1em auto;
  display:block;
  text-align:center;
}

.portfolioPageImg3 img {
   width:100%;
   margin:0.5em 0;
   overflow:hidden;
}

.portfolioPageImg4 {
  width:100%;
  margin:1em auto;
  display:block;
  text-align:center;
}

.portfolioPageImg4 img {
   width:100%;
   margin:0.5em 0;
   overflow:hidden;
}

.portfolioPageImg-small {
   margin:0 -0.75em;
}

.portfolioPageImg-small img {
   width:46%;
   margin:0.25em;
   overflow:hidden;
   vertical-align:middle;
}
.portfolioPageWebPics {
  width:100%;
  margin:1em auto;
  display:block;
  text-align:center;
}

.portfolioPageWebPics img {
   width:100%;
   margin:0.5em 0;
   overflow:hidden;
   vertical-align:middle;
}

.tallPic {
  max-width:12em;
  width:auto;
}

@media only screen and (min-width:480px) { /* XSmall Screen */
  .portfolioVideo {
    height:23em;
  }

  #webDesignText {
    max-width:28em;
  }

  #snowballBrawlText {
    max-width:36em;
  }


}

@media only screen and (min-width:736px) { /* Small Screen */

  #infiniteNinjaText {
	max-width:38em;
  }

  #snowballBrawlText {
    max-width:43em;
  }

  #fallingTetrominoesText {
    max-width:35em;
  }
  
  #asteroidEncountersImages {
	max-width:50em;
  }
  
  #asteroidEncountersImages img {
    width:44%;
  }

  #ticTacToeText {
	max-width:34em;
  }

  #ticTacToeImages {
	max-width:46em;
  }

  .portfolioPageImg3 img {
    width:44%;
    margin:1em;
  }

  .portfolioPageImg4 img {
    width:44%;
    margin:1em;
  }
  
  .portfolioPageImg-small img {
    width:44%;
    margin:1em;
}
  
  .portfolioPageWebPics img {
    width:44%;
    margin:1em;
  }
  
  .portfolioVideo {
    height:20em;
    max-width:35em;
  }
}

@media only screen and (min-width:1024px) { /* Medium Screen */

  .portfolioPageText h4 {
    font-size:3em;
  }

  .portfolioPageImg3 img {
    width:31%;
    margin:1em;
  }
  
  .portfolioPageImg4 img {
    width:31%;
    margin:1em;
  }
  
  .portfolioPageImg-small img {
    width:31%;
    margin:1em;
  }
  
  .portfolioPageWebPics img {
    width:44%;
    margin:2%;
    vertical-align:middle;
  }
  
  #webDesignText {
    display:inline-block;
    width:55%;
    max-width:28em;
  }
  
  .tallPic {
    display:inline-block;
    float:right;
    height:auto;
    width:30%;
    max-width:10em;
    margin: 0 4em 0 0;

  }
}

@media only screen and (min-width:1280px) { /* Large Screen */
  .portfolioPageText {
    display:inline-block;
    width:55%;
  }

  .portfolioPageText h4 {
    font-size:2.4em;
  }

  #asteroidEncountersText {
	max-width:34em;
  }

  #infiniteNinjaText {
	max-width:27em;
  }

  #snowballBrawlText {
    max-width:36em;
  }
  
  #asteroidEncountersImages {
	margin: 0em auto 1.5em auto;
  }

  #ticTacToeText {
	max-width:34em;
  }

  #ticTacToeImages {
	margin-top:0;
	max-width:56em;
  }
    
  .portfolioVideo {
    display:inline-block;
    float:right;
    height:13em;
    width:35%;
    margin: 2.5em 0.6em 0 0;
  }
  
  .tallPic {
    display:inline-block;
    float:right;
    height:auto;
    width:30%;
    max-width:10em;
    margin: 0 4em 0 0;
  }
  
  #fallingTetrominoesVideo {
    margin-top:12%;
  }
  
  #artVideo {
    margin-top:.25em;
  }
  #artText {
    margin-bottom:0.75em;
  }
  
  .portfolioPageImg3 img {
    width:31%;
    margin:0.5%;
  }
  
  .portfolioPageImg4 img {
    width:23.5%;
    margin:0.5%;
  }
  
  .portfolioPageImg-small img {
    width:23.5%;
    margin:0.5%;
  }

  .portfolioPageWebPics img {
    width:44%;
    margin:2%;
  }
}

@media only screen and (min-width:1680px) { /* XLarge Screen */
  .portfolioPageText {
    width:60%;
  }
}

/******************************************************************************************************
Gallery Page
******************************************************************************************************/

.galleryPage {
  margin: 0 auto;
  text-align:center;
  line-height:1.3;
  min-height:42em;
  width:100%;
}

.galleryPage i {
  background: #fffff;
  color: #2ba7e0;
  width: 10%;
  vertical-align:middle;
}

.galleryPage img {
  margin:2em auto 1em;
  width:auto;
  height:auto;
  max-width:70%;
  max-height:28em;
  vertical-align:middle;
}

@media only screen and (min-width:736px) { /* Small Screen */
  .galleryPage {
    min-height:39.4em;
  }
}

@media only screen and (min-width:1024px) { /* Medium Screen */
  .galleryPage {
    min-height:48em;
  }
}

@media only screen and (min-width:1280px) { /* Large Screen */
  .galleryPage {
    min-height:38em;
  }
}

@media only screen and (min-width:1680px) { /* XLarge Screen */
  .galleryPage {
    min-height:none;
  }
}

/******************************************************************************************************
Contact Section
******************************************************************************************************/

.honeypot { /* This hides the form_botcheck field from users but bots won't know so they'll still fill it out*/
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

#contact p {
  margin-top:-1em;
}

.sendContactMessage {
  display:block;
  width:8em;
}

@media only screen and (min-width:1680px) { /* XLarge Screen */
  #contact p {
    margin-top:-3em;
  }
}

/******************************************************************************************************
Contact Sent Page
******************************************************************************************************/

#contactSent {
  min-height:49.8em;
}
  
@media only screen and (min-width:736px) { /* Small Screen */
  #contactSent {
    min-height:50.4em;
  }
}

@media only screen and (min-width:1024px) { /* Medium Screen */
  #contactSent {
    min-height:58.6em;
  }
}

@media only screen and (min-width:1280px) { /* Large Screen */
  #contactSent {
  min-height:48.7em;
  }
}

@media only screen and (min-width:1680px) { /* XLarge Screen */
  #contactSent {
    min-height:39.2em;
  }
}