@import "responsive.css";
@import "page.css";

@font-face{font-family:helvetica; src:url('Helvetica.otf');}
@font-face{font-family:Interstate; src:url('Interstate.ttf');}

.unselectable{
  -moz-user-select:none;
  -khtml-user-select:none;
  -webkit-user-select:none;
  -ms-user-select:none;
  user-select:none;
}
.selectable{
  -moz-user-select:text;
  -khtml-user-select:text;
  -webkit-user-select:text;
  -ms-user-select:text;
  user-select:text;
}
html, body{
  height: 100%;
}
body{
  padding:0;
  margin:0;
  font-size: 100%;
  text-shadow:0px 1px 2px #ffff, -1px -1px 2px #fff, 0px 0px 10px #888;
  color:#bbb;
  font-family:'helvetica', san-serif;
background: -moz-linear-gradient(left,  rgba(255,92,92,0.75) 0%, rgba(254,187,187,0.47) 3%, rgba(254,144,144,0.28) 5%, rgba(255,255,255,0) 8%);

background: -webkit-linear-gradient(left,  rgba(255,92,92,0.75) 0%,rgba(254,187,187,0.47) 3%,rgba(254,144,144,0.28) 5%,rgba(255,255,255,0) 8%);

background: linear-gradient(to right,  rgba(255,92,92,0.75) 0%,rgba(254,187,187,0.47) 3%,rgba(254,144,144,0.28) 5%,rgba(255,255,255,0) 8%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfff5c5c', endColorstr='#00ffffff',GradientType=1 );

}
#container{
  display:none;
  background-size:cover;
  padding:0;
  margin:0;
  height:100%;
}
#content{
  width:100%;
  height:100%;
}
header{
  padding-top:.8em;
  padding-top:1vw;
}
header img{
  width:50em;
  width:76vw;
 -webkit-transition:all 150ms linear;
  -moz-transition:all 150ms linear;
  -o-transition:all 150ms linear;
  -ms-transition:all 150ms linear;
   transition:all 150ms linear;
}
header img:hover{ 
  filter: brightness(110%);
	-webkit-filter: brightness(110%);
	-moz-filter: brightness(110%);
	-o-filter: brightness(110%);
	-ms-filter: brightness(110%);
}
header h2{
  padding-top:.2em;
  padding-top:.8vh;
  text-align:center;
}
header h2.facebook,
header h2.twitter{
  display:none;
}
header h2 a{
  padding-left:1.5em;
  padding-right:.3em;
  padding-top:.2em;
}
header h2.instagram a{  
  background:url('../img/instagram.png') no-repeat;
  background-size:contain;
}
header h2.facebook a{
  background:url('../img/facebook.png') no-repeat;
  background-size:contain;
}
header h2.twitter a{
  background:url('../img/twitter.png') no-repeat;
  background-size:contain;
}
header h2 a:hover{
  box-shadow:0px 1px 10px #666;
  border-radius:4px;
  color:#888;
}
#page-content{
    width:55%;
    height:100%;
}
#main-content-row{
  background:url('../img/christopher.jpg') no-repeat;
  background-position: 84% 100%;
  background-size: 40vh;
  height: 71%;
}
#page-content section:not(#buttons-page){
  margin-left:3em;
  margin-left:6vw;
  height:100%;
}
#page-content section{
  margin-top: .8em;
  margin-top: 2vh;
  font-family:'Interstate', san-serif;
}
#page-content section.scroll-pane{
  height:60vh;
  overflow:auto;
}
#page-content section article{
  position: relative;
  top: 40%;
  transform: translateY(-50%);
}
#page-content section.scroll-pane article{
  padding-top:2vh;
}
#page-content #baking-page ul{
  text-align: left;
  margin: 0 auto;
  width: 30%;
  list-style-type: disc;
}
#arts-page .images div{
  width: 5vw;
  height: 5vw;
}
#buttons-page li{
  border-left:1px outset #f0f0f0;
  border-top:1px outset #eee;
  box-shadow:0px 1px 2px #c0c0c0;
  width: 17em;
  height: 17em;
  width: 34vh;
  height: 34vh;
  margin-right:1.4em;
  margin-bottom:1.4em;
  margin-right:2vw;
  margin-bottom:2vh;
  float:right;
}
#buttons-page li:nth-child(2n+1){
   clear:right;
}
#buttons-page a{
  text-shadow:0px 1px 1px #888;
  width:100%;
  height:100%;
  text-transform:capitalize;
  line-height:17em;
  line-height:34vh;
}
.button{
   -webkit-transition:all 400ms ease-in-out;
  -moz-transition:all 400ms ease-in-out;
  -o-transition:all 400ms ease-in-out;
  -ms-transition:all 400ms ease-in-out;
   transition:all 400ms ease-in-out;
}
#buttons-page a:hover{
}
#buttons-page a div{
  width:100%;
  height:100%;
  font-size: 1.2em;
  font-size: 3.5vh;
/*  -webkit-transition:-webkit-transform 400ms ease-in-out;
  -moz-transition:-moz-transform 400ms ease-in-out;
  -o-transition:-o-transform 400ms ease-in-out;
  -ms-transition:-ms-transform 400ms ease-in-out;
   transition:transform 400ms ease-in-out;*/
   -webkit-transition:all 400ms ease-in-out;
  -moz-transition:all 400ms ease-in-out;
  -o-transition:all 400ms ease-in-out;
  -ms-transition:all 400ms ease-in-out;
   transition:all 400ms ease-in-out;
}
#buttons-page a:hover div{ 
  color:#fff;
  font-weight:bold;
  box-shadow:0 4px 50px -20px #ca2020;
  border-bottom:1px solid #aaa;
  font-size: 2.8em;
  font-size: 5.5vh;
}
#buttons-page li:nth-child(1) a:hover div{ 
  background:rgba(124, 255, 255, .8);
  box-shadow:0 4px 50px rgba(124, 255, 255, 1);
}
#buttons-page li:nth-child(2) a:hover div{ 
  background:rgba(255, 124, 124, .8);
  box-shadow:0 4px 50px rgba(255, 124, 124, 1);
}
#buttons-page li:nth-child(3) a:hover div{ 
  background:rgba(124, 124, 255, .8);
  box-shadow:0 4px 50px rgba(124, 124, 255, 1);
}
#buttons-page li:nth-child(4) a:hover div{ 
  background:rgba(124, 225, 124, .8);
  box-shadow:0 4px 50px rgba(124, 225, 124, 1);

}
#buttons-page li,
#buttons-page li a,
#buttons-page li a div{
  border-radius:1.5em;
  border-radius:3vw;
}
footer{
  position:absolute;
  bottom:0;
  width:100%;
}
footer p{
  margin:0 auto;
  width:80%;
  background:#fff;
  font-size:small;
  line-height:1;
  padding:0;
  padding:.6em 0;
  padding:1vh 0;
}
.image-container{
  text-align:center;
}
ul{
  list-style:none;
  margin:0;
  padding:0;
}
img{
  vertical-align:middle;
}
h1, h2, h3, h4, p, li, td, th, dt, dd, cite, blockquote, label, legend{
  margin:0;
}
hr{
  border:0;
  height:1px;
  background: -moz-linear-gradient(top,  rgba(0,0,0,0) 10%, rgba(0,0,0,0.15) 50%, rgba(0,0,0,0) 90%);
  
  background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 10%,rgba(0,0,0,0.15) 50%,rgba(0,0,0,0) 90%);
  
  background: linear-gradient(to bottom,  rgba(0,0,0,0) 10%,rgba(0,0,0,0.15) 50%,rgba(0,0,0,0) 90%);
  
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#00000000',GradientType=0 );}
.hidden{
  display:none;
  visibility:hidden;
}
article{
  text-align:center;
}
aside p{
  font-size:1.9em;
  font-size:3.7vh;
  letter-spacing:1px;
  opacity:.4;
 }
p{
  color:#888;
  font-size:1em;
  font-size:3vw;
  text-indent:6px;
  padding:10px 0;
  padding-bottom:1em;
  padding:1vh 0;
  padding-bottom:2vh;
  text-align:center;
}
a:hover{
  text-decoration:none;
  cursor:pointer;
}
a.mail{
  position:relative;
  top:-1px;
}
a.mail img{
  width:3em;
  border-radius:3px;
  width:6vh;
}
a.mail img:active{
  background:transparent;
  opacity:.6;
}
a{
  cursor:inherit;
  text-decoration:none;
  color:#c0c0c0;
}
#facebook,
#twitter{
  z-index:2;
  position:fixed;
  opacity:.9;
  padding:20px; 
  border-radius:10px;
}
#facebook{
  right:2vw;
  bottom:14vh;
}
#twitter{  
  right:2vw;
  bottom:1vh;
}
#facebook:hover,
#twitter:hover{
  box-shadow:0px 0px 6px #666;
  transform:scale(.8,.8);
  -webkit-transform:scale(.8,.8);
  -moz-transform:scale(.8,.8);
  -ms-transform:scale(.8,.8);
  -o-transform:scale(.8,.8);
}
#facebook:active,
#twitter:active{
  opacity:1;
  box-shadow:none;
  border:1px solid #ddd;
}
.home-button{
  position: absolute;
  bottom: 1em;
  bottom:2vh;
  left: 50%;
  transform: translateX(-50%);
  text-transform:capitalize;
  cursor:pointer;
  border-radius:4px;
  padding:4px 8px;
  font-size:3em;
  font-size:5vh;
  border:1px solid #c0c0c0;
}
.home-button:hover{
  color:#888;
  border:1px solid #888;
}
.home-button:active{
  bottom:.9em;
  bottom:1.9vh;
}
@font-face{font-family:helvetica; src:url('Helvetica.otf');}