@import url(http://fonts.googleapis.com/css?family=Lato);
@import url(http://fonts.googleapis.com/css?family=Playfair+Display);
@import url(http://fonts.googleapis.com/css?family=Abril+Fatface);
@import url(http://fonts.googleapis.com/css?family=Vollkorn);

@media (max-width: 660px) {

body{
 background-color: #428bca 
}

.box{
 padding: 0;
 margin: 0;
 overflow: hidden;
}


.padding-gap{
  padding: 0 !important
}

.small-gap-top{
  margin: 0 !important;
}
.product-container{
  max-width: 100% !important;
}

.ball{
  margin-left: -2% !important;
}

.music-box{
  margin-left: -25px  !important;
}

.footer {
 display: none 
  }

nav {
 display: none 
  }
.mini-footer {
  display: inline !important;
 }
}

@media (max-width: 900px) {

.hid-mid {
 display:none 
 
 }

}

.mini-footer{
 display: none;
 background-color: #428bca;
 width: 100%;
 height: 200px;
 position: absolute;
 bottom: 0;
}
.ball{
  display: inline-block;
  margin-left: 40%;
  position: relative;
  height: 20em;
  width: 20em;
  border: white solid 1px;
  border-radius: 100%;
  animation: ball-drop 6s;
  animation-fill-mode: forwards;
}

.ball-right{
  display: inline-block;
  margin-left: 57%;
  position: relative;
  height: 12em;
  width: 12em;
  border: white solid 1px;
  border-radius: 100%;
  animation: ball-drop-right 5s;
  animation-fill-mode: forwards;
}

.shadow{
    box-shadow: 3px 2px 2px rgba(0,0,0,0.5) ;

}
.shadow:hover{
    box-shadow: 5px 5px 5px rgba(0,0,0,0.5) ;

}


@keyframes ball-drop{
  10% {top: -50%;}
  100%{top: 20%;}
}

@keyframes ball-drop-right{
  10% {top: -500%;}
  100%{top: 0;}
}


.ball-right:hover{
  font-size: 1.02em 
}

.ball-right-text{
  text-align: center;
  font-size: 3.5em;
  margin-top: 30%;
}

.hide-overflow{
 overflow:hidden; 
}

.top-gap-huge{
 margin-top: 650px; 
}

.bg-gradiant-greener{
background: #a2f084; /* Old browsers */
background: -moz-linear-gradient(top, #a2f084 0%, #43df43 44%, #17a14a 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #a2f084 0%,#43df43 44%,#17a14a 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #a2f084 0%,#43df43 44%,#17a14a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a2f084', endColorstr='#17a14a',GradientType=0 ); /* IE6-9 */
}


.bg-gradiant-red{
background: #fa5336; /* Old browsers */
background: -moz-linear-gradient(top, #fa5336 0%, #f6725e 1%, #f5341b 71%, #ef3827 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #fa5336 0%,#f6725e 1%,#f5341b 71%,#ef3827 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #fa5336 0%,#f6725e 1%,#f5341b 71%,#ef3827 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fa5336', endColorstr='#ef3827',GradientType=0 ); /* IE6-9 */
}
.music-round{
     border-radius: 15px;
}



nav{
    background-color: #428bca
}
.ball-text{
  display: inline-block;
  font-size: 2.9em;
  text-align: center;
  position: relative;
  top: 12%;
  left: 25%;
}


.ball-text a{
 color: black !important;
}

.ball a:hover, a:visited, a:active{
 text-decoration: none;
}


.ball-text a:hover{
 text-decoration: none;
}

.ball-right a{
 color: black !important;
}

.ball-right a:hover, a:visited, a:active{
 text-decoration: none;
}




.navbar:hover{
  opacity: .9;
}
.spin{
  -webkit-transition: -webkit-transform .8s ease-in-out;
  transition: transform .8s ease-in-out;

}

.spin:hover{
    -webkit-transform: rotate(360deg);
  transform: rotate(360deg);

}
.glyphicon-phone{
font-size: 5em;

}
.bg-gradiant-blue{
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#caccfe+0,2f32f5+95 */
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#cfd0f9+0,cfd0f9+0,4244e2+22,4244e2+22,4244e2+28,4244e2+52,4244e2+57,4244e2+57 */
background: #cfd0f9; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #cfd0f9 0%, #cfd0f9 0%, #4244e2 22%, #4244e2 22%, #4244e2 28%, #4244e2 52%, #4244e2 57%, #4244e2 57%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  #cfd0f9 0%,#cfd0f9 0%,#4244e2 22%,#4244e2 22%,#4244e2 28%,#4244e2 52%,#4244e2 57%,#4244e2 57%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  #cfd0f9 0%,#cfd0f9 0%,#4244e2 22%,#4244e2 22%,#4244e2 28%,#4244e2 52%,#4244e2 57%,#4244e2 57%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cfd0f9', endColorstr='#4244e2',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}
.bg-gradiant-green{

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f0f0a2+0,e5e565+17,dbdb29+33 */
background: #f0f0a2; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #f0f0a2 0%, #e5e565 17%, #dbdb29 33%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  #f0f0a2 0%,#e5e565 17%,#dbdb29 33%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  #f0f0a2 0%,#e5e565 17%,#dbdb29 33%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f0a2', endColorstr='#dbdb29',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}

.center-box{
  margin: 0 auto;
}


.internet-box{
  margin: 1em;
}

.product-box{
  padding: 1em;
  text-align: center;
}

.round {
  border-radius: 5px;
}

.knitster-img{
  height: 5em;
  width: 5em;
  margin: 0 auto;
  margin-bottom: .5em;
  background-size:cover;
  background-image:url(../img/hangs.jpg);

}


.hack-oregon-img{
  height: 5em;
  width: 5em;
  margin: 0 auto;
  margin-bottom: .5em;
  background-size:cover;
  background-image:url(../img/hackoregon.png);

}


.navbar a{
 color: black !important;
}

a:hover{
 color:black;
}

.navbar {
height: .7em !important;
}


.top-border{
  border-top: white solid 1px;

}

.bottom-border{
    border-bottom: white solid 1px;
}

.bg-black{
  background-color: green;
}


.product-box{
  margin: 1em;
}


.internet-box{
  margin: 1em;
}

.center-footer{
  font-size: 1.5em;
  color: white !important;
  margin-top: .5em;
  margin-left: 25%;
}

.product-container{
  max-width: 80%;
  text-align: center;
}

.music-box{
  margin: 1em;
}
body {
  font-family: 'Vollkorn', arial, serif;
  font-size:17px;
  overflow-x: hidden;
  font-weight: bold
}

.box-solid{
 background-color:white;
  opacity: .85;
  border: black solid 1px;
}

.black-border {
border: #428bca solid 1px !important;
}

.box{
 background-color: #d9edf7;
  color: black !important;
  border-radius: 15px;
  opacity: .8;
  border: white solid 1px;
  padding: 1em;
}


.box:hover {
   opacity:.9;
   font-weight: bold;
   

}

.blue {
 border: yellow 3px ridge;
  background-color:blue;
  border-radius:5px;
  height:20px;
  width:100px;
  color:white;
  font-size:10px;
}


.dance{
  border: yellow 3px ridge;
  position:relative;
  background-color:orange;
  border-radius:5px;
  height:20px;
  width:100px;
  color:white;
  font-size:10px;
}

.green {
 border: yellow 3px ridge;
  background-color:green;
  border-radius:5px;
  height:20px;
  width:100px;
  color:white;
  font-size:10px
}

h1 {
 font-size:2.5em;
}

.left{
 padding:25px;
  margin-top:100px;
  background-color:pink;
  border:dotted;
  border-radius:5px;
  height: 400px;
}

.bottom-div{
  position: relative;
  margin-bottom: 1px;
}

.content-box{
  height: 600;
  padding: 2em;
}


.footer {
  position: relative;
  bottom: 0;
  margin-bottom: -2px;
}

.img-splash{
  position: fixed;
  top: 0;
background-image:url(../img/sky-bg2.jpg);
background-size:cover;
background-repeat:no-repeat;
height: 650px;
width: 100%;
z-index: -1}


.bg-headshot{
  height: 900px;
  position: relative;
background-image:url(../img/headshot-lo.jpg);
background-position: top;
background-repeat:no-repeat;
}
.header {
  position: absolute;
  top: 0;
}

.padding-gap{
  padding: 3em;
}

.float-left{
  float:left;
}
.float-right{
  float: right;
}
.small-gap-top{
  margin-top: 4em;
}
.margin-small{
  margin: 3em;
}
.lorem1 {
  margin-left:500px;
  padding-top:100px;
  position:fixed;
  height:200px;
  width:500px;
  z-index:5;
  margin-top:25px;
}

p {
 font-weight: normal;
}
.photobox{
 background-color:white;
  opacity: .8;
  border: black solid 1px;
}


.photobox:hover {
   opacity:.95;
}

.red{

  border: yellow 3px ridge;
  position:relative;
  background-color:red;
  border-radius:5px;
  height:20px;
  width:100px;
  color:white;
  font-size:10px;
}

.gap{
  margin-left: .5em; 

}

.veil {
   height:300px;
  background-image:url(img/mountaincolor.gif);
    position:relative;
  z-index: 10;
 margin-right:-50%;

}
.yellow {
 border: yellow 3px ridge;
  background-color:yellow;
  border-radius:5px;
  height:20px;
  width:100px;
  color:white;
  font-size:10px
}

=====

ennui wide web

.obey {
 background-color: white;

  height: 50px;
  width: 100px;
color: black;
border: black solid 5px;
  font-family: 'Lato', arial, serif;
  font-size:17px:

}