body, html{
  padding:0;
  margin:0;
  font-family: sans-serif;
background-repeat:no-repeat;
background-size:100%;
}
a {color:white;}
#mobilebuttoncontainer{display:none;}

.portfoliobox a {color:white;}
#background{position:fixed; top:0;left:0; width:100%;height:100%; overflow:hidden; z-index:0; }
.button{ border:2px solid white;border-radius:2px; box-sizing:border-box; color:white; width:27%;  font-size:30px; position:absolute; top:3vw;  z-index:4; text-align:center; padding-top:10px; padding-bottom:10px;}

#contact, #mobilecontact{left:3%;}
#portfolio, #mobileportfolio{  top:3vw; left:36%;}

#login, #mobilelogin{  top:3vw; right:3%;}

.button:hover, .button:active, .button:focus{background:rgba(255,255,255,.6);color:white;}
.box{width:33.33%; height:40%; background:rgba(155,155,255,.3); z-index:44; overflow:hidden;position:absolute; top:20%; color:white;}
.box .visible, .box .invisible{ position:absolute;width:100%; height:100%; top:0; display:table-cell; vertical-align: middle;font-size:1.5vw; z-index:5;}
.box .invisible{padding-top:300%; z-index:6;}
.box .visible img{height:49%; padding-top:10%;max-width:100%; }
.box .invisible:hover, .box .invisible:active,  .box .invisible:focus{padding-top:0%; }
.box .invisible:hover ~ .visible, .box .invisible:active ~ .visible, .box .invisible:focus ~ .visible{padding-top:300%;}
#box2{left:33.33%;background:rgba(55,155,255,.5);}

#box3{left:66.66%;background:rgba(155,115,255,.3);}
#box4{top:60%;background:rgba(55,155,255,.4);}

#box5{top:60%; left:33.33%;background:rgba(55,155,255,.4);}

#box6{top:60%; left:66.66%;background:rgba(55,155,255,.4);}

.box:hover{}

#box2:hover, #box4:hover,#box5:hover, #box6:hover{}

@media (max-width:900px){
  #portfolio, #contact, #login{display:none;}
  #mobilebuttoncontainer{display:block; }
  #mobilebuttoncontainer .button{font-size:5vw; line-height:12vw; height:16vw;display:table-cell; vertical-align: middle; text-align:center;}
    #mobilebuttoncontainer .button span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
.box .invisible, .box .visible{font-size:4.5vw;}
.box a{color:white;}
 .box{width:100%!important; position:relative; height:60vw; left:0!important;margin:0; padding:0;}
  #portfoliobox1, #box1{margin-top:24vw;}
  body, html{background:url(/mobilebackground.jpg); background-size:100%;}
#background{display:none;}
}


@media (max-width:400px){

  #mobilebuttoncontainer .button{font-size:5vw; line-height:12vw; height:19vw;display:table-cell; vertical-align: middle; text-align:center;}
  }


body, html{
  padding:0;
  margin:0;
  font-family: sans-serif;
background:url('/video/river.jpg');
background-repeat:no-repeat;
background-size:100%;
}
#mobilebuttoncontainer{display:none;}

.portfoliobox a {color:white;}
#background{position:absolute; top:0;left:0; width:100%;height:100%; overflow:hidden; z-index:0; }
.button{ border:2px solid white;border-radius:2px; box-sizing:border-box; color:white; width:27%;  font-size:30px; position:absolute; top:3vw;  z-index:4; text-align:center; padding-top:10px; padding-bottom:10px;}

#contact, #mobilecontact{left:3%;}
#portfolio, #mobileportfolio{  top:3vw; left:36%;}

#login, #mobilelogin{  top:3vw; right:3%;}

.button:hover, .button:active{background:rgba(255,255,255,.6);color:white;}
.portfoliobox{width:33.33%; height:26.66%; background:rgba(150,0,150,.7); z-index:44; overflow:hidden;position:absolute; top:20%; color:white; opacity:.8;}
.portfoliobox .visible, .portfoliobox .invisible{ position:absolute;width:100%; height:100%; top:0; display:table-cell; vertical-align: middle;font-size:1.5vw; z-index:5;line-height:86%;}
.portfoliobox .invisible{padding-top:100%; z-index:6; font-size:3vw; font-weight:800;}
.portfoliobox .visible img{height:49%; padding-top:10%;max-width:100%; }
.portfoliobox .invisible:hover, .portfoliobox .invisible:active{padding-top:0%; background:rgba(0,0,170,.9);  }
.portfoliobox .invisible:hover ~ .visible, .portfoliobox .invisible:active ~ .visible{padding-top:300%;}
#portfoliobox1{background:url(/portfolioimages/website1.png); background-repeat: no-repeat; background-size:cover;}
#portfoliobox2{left:33.33%;}
#portfoliobox2{background:url(/portfolioimages/website2.png); background-repeat: no-repeat; background-size:cover;}
#portfoliobox3{left:66.66%;}
#portfoliobox3{background:url(/portfolioimages/website3.png); background-repeat: no-repeat; background-size:cover;}
#portfoliobox4{top:46.66%;background:rgba(0,0,150,.8);}
#portfoliobox4{background:url(/portfolioimages/website4.png); background-repeat: no-repeat; background-size:cover;}
#portfoliobox5{top:46.66%; left:33.33%;background:rgba(0,0,130,.8);}
#portfoliobox5{background:url(/portfolioimages/website5.png); background-repeat: no-repeat; background-size:cover;}
#portfoliobox6{top:46.66%; left:66.66%;background:rgba(0,0,150,.8);}
#portfoliobox6{background:url(/portfolioimages/website6.png); background-repeat: no-repeat; background-size:cover;}
#portfoliobox7{top:73.32%; background:rgba(0,0,150,.8);}
#portfoliobox7{background:url(/portfolioimages/website7.png); background-repeat: no-repeat; background-size:cover;}
#portfoliobox8{top:73.32%; left:33.33%;background:rgba(0,0,150,.8);}
#portfoliobox8{background:url(/portfolioimages/carpentry.png); background-repeat: no-repeat; background-size:cover;}

#portfoliobox9{top:73.32%; left:66.66%;background:rgba(0,0,150,.8);}
#portfoliobox9{background:url(/portfolioimages/website9.png); background-repeat: no-repeat; background-size:cover;}
.portfoliobox:hover, .portfoliobox:active{background:rgba(200,0,200,.7);}


@media (max-width:900px){
  #portfolio, #contact, #login{display:none;}
  #mobilebuttoncontainer{display:block; }
  #mobilebuttoncontainer .button{font-size:5vw; line-height:12vw; height:16vw;display:table-cell; vertical-align: middle; text-align:center;}
    #mobilebuttoncontainer .button span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

  .portfoliobox{width:100%!important; position:relative; height:60vw; left:0!important;margin:0; margin-top:12vw; padding:0;}
  #portfoliobox1{margin-top:24vw;}
  body, html{background:url(/mobilebackground.jpg); background-size:100%;}
#background{display:none;}
.portfoliobox .invisible:hover, .portfoliobox .invisible:active{display:none; }
.portfoliobox .invisible:hover ~ .visible, .portfoliobox .invisible:active ~ .visible{}
}


@media (max-width:400px){

  #mobilebuttoncontainer .button{font-size:5vw; line-height:12vw; height:19vw;display:table-cell; vertical-align: middle; text-align:center;}
  }


body, html{
  padding:0;
  margin:0;
  font-family: sans-serif;
background:url('/video/river.jpg');
background-repeat:no-repeat;
background-size:100%;
}

#mobilebuttoncontainer{display:none;}

.portfoliobox a {color:white;}
#background{position:fixed; top:0;left:0; width:100%;height:100%; overflow:hidden; z-index:0; }
.button{ border:2px solid white;border-radius:2px; box-sizing:border-box; color:white; width:27%;  font-size:30px; position:absolute; top:3vw;  z-index:4; text-align:center; padding-top:10px; padding-bottom:10px;}

#contact, #mobilecontact{left:3%;}
#portfolio, #mobileportfolio{  top:3vw; left:36%;}

#login, #mobilelogin{  top:3vw; right:3%;}

.button:hover, .button:active{background:rgba(255,255,255,.6);color:white;}
#contactform{position:absolute; top:10vw; left:0; width:100%; display:block; }
#contactform input[type="text"], #contactform input[type="email"]{margin-bottom:1vw;width:50%;  border:0; text-align:center;  border-radius:0; background:white; opacity:.7; color:rgba(37,37,37,1); font-size:14px; font-size: 30px; padding-top:.25vw; padding-bottom:.5vw;}
#contactform input[type="submit"]{margin-bottom:3vw;width:30vw; border:0; text-align:center;  border-radius:0; background:white; opacity:.7; color:rgba(37,37,37,1); font-size:14px; font-size: 30px; padding-top:1vw; padding-bottom:1vw;}
#contactform img{ max-width:30%;}

#contact, #mobilecontact{left:3%;}
#portfolio, #mobileportfolio{  top:3vw; left:36%;}

#login, #mobilelogin{  top:3vw; right:3%;}
@media (max-width:900px){
  #portfolio, #contact, #login{display:none;}
  #mobilebuttoncontainer{display:block; }
  #mobilebuttoncontainer .button{font-size:5vw; line-height:12vw; box-sizing: border-box; height:16vw;display:table-cell; vertical-align: middle; text-align:center;}
    #mobilebuttoncontainer .button span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

  .portfoliobox{width:100%!important; position:relative; height:60vw; left:0!important;margin:0; margin-top:12vw; padding:0;}
  #portfoliobox1, #box1{margin-top:24vw;}
  body, html{background:url(/mobilebackground.jpg); background-size:100%;}
#background{display:none;}
#contactform {top:23vw;}
#contactform input[type="text"], #contactform input[type="email"]{font-size: 5vw;margin-bottom:3vw;width:90%;}
#contactform img{max-width:65%;}

#contactform input[type="submit"]{width:70vw;font-size: 5vw;}
}

@media (max-width:400px){

  #mobilebuttoncontainer .button{font-size:5vw; line-height:12vw; height:19vw;display:table-cell; vertical-align: middle; text-align:center;}
  }


  .StripeElement {
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid transparent;
    box-shadow: 0 1px 3px 0 #e6ebf1;
    -webkit-transition: box-shadow 150ms ease;
    transition: box-shadow 150ms ease;
}
.StripeElement--focus {
    box-shadow: 0 1px 3px 0 #cfd7df;
}
.StripeElement--invalid {
    border-color: #fa755a;
}
.StripeElement--webkit-autofill {
    background-color: #fefde5 !important;
}