/* General Settings */

html {
    line-height: 1.15; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
}

body {
    font-size: 16px;
    font-family: "Arial", Helvetica, sans-serif;
    margin: 0;
    color: #000;
}

main { 
    display: block;
    padding: 30px 0;

}

* { outline: none !important; }

a:hover {
    text-decoration: none;
    opacity: 0.95;
}

h1, h2, h3, h4, h5, h6, p, a, input, div, textarea, label {
    margin: 0;
}

h2 { font-size: 28px; }

ul {
    list-style: none;
    padding-left: 0;
    font-weight: 400;
    font-style: normal;
    margin: 0;
}

p { font-size: 1em; }

img { border-style: none; }

.container {
    width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    max-width: 100%;
    box-sizing: border-box;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

.text-white { color: white;}

/* End General Settings */

/* Header */

header { 
    background-color: Sienna; 
    background-image: radial-gradient(ellipse at center,sienna 55%, chocolate, brown);
    padding: 10px;
}

.title-header .title {
    display: inline-block;
    color: #fff;
    font-size: 18px;
}

.title-header .logo {
    display: inline-block;
}

.title-header .logo img {
    vertical-align: middle;
}

/* nav { background: #262d33; } Original */

nav { background: chocolate; }

nav li a { 
    color: #AFB2B6;
    display: inline-block;
    padding: 10px 10px;
}

/* End Header */

/* Footer */

footer {
    /*background: #333; */
    /*background: chocolate;*/
    color: #fff;
    padding: 10px;  
    /*height: 100px;*/
}

footer a { color: cornsilk; }

/* End Footer */

/* Home Page Content */

.menu-item.additional-items h2 {
    width: 50%;
    float: left;
}

.menu-item.additional-items .item-inner ul {
    display: inline-block;
    width: 50%;
    float: left;
    opacity: 1 !important;
}

/* End Home Page Content */

/* Page Content */

.event-item {
    margin-bottom: 25px;
    border: 1px solid #000
}

/* End Page Content */

/* My examples */

.box {
   float: right;
   border: 2px solid brown;
   padding: 5px 5px 5px 5px;
   width: auto;
   height: auto;
   min-width: 35%;
   min-height: 40%;
   max-width: 40%;
   max-height: 45%;
   font-family: "Comic Sans MS", Arial;
   font-size: 1.75em;
   color: rgb(101,87,107);
   background-color: white;
   margin: 5px;
}

.div-example {
   background-color: green;
   color: white;
}

.span-example {
   background-color: blue;
}
.container label {
   width: 110px;
   display: inline-block;
   text-align: right;
   padding-top: 5px; 
   padding-right: 5px; 
   padding-left: 5px;
   padding-bottom: 10px;
}
a:link {color: red;}
a:visited {color: purple;}
a:active {color: black;}
a:hover {color: green;} 

.sprite-palette {
   display: block;
   width: 40px;
   height: 40px;
   padding: 0;
   border: none;
   background: url('../images/sprite.png') 0 0;
}	

.sprite-guitar {
   display: block;   
   width: 40px;
   height: 40px;
   padding: 0;
   border: none;
   background: url('../images/sprite.png') -40px 0;
}	

.sprite-mask {
   display: block;
   width: 40px;
   height: 40px;
   padding: 0;
   border: none;
   background: url('../images/sprite.png') -80px 0;
}

.sprite-controller {
   display: block;
   width: 40px;
   height: 40px;
   padding: 0;
   border: none;
   background: url('../images/sprite.png') -120px 0;
}
.sprite-mic{
   display: block;
   width: 40px;
   height: 40px;
   padding: 0;
   border: none;
   background: url('../images/sprite.png') -160px 0;
}	
.sprite-quill {
   display: block;
   width: 40px;
   height: 40px;
   padding: 0;
   border: none;
   background: url('../images/sprite.png') -200px 0;
}

.sprite-cup{
   display: block;
   width: 40px;
   height: 40px;
   padding: 0;
   border: none;
   background: url('../images/sprite.png') -240px 0;
}	

.sprite-utensils {
   display: block;
   width: 40px;
   height: 40px;
   padding: 0;
   border: none;
   background: url('../images/sprite.png') -240px 0;
}	

.sprite-milk {
   display: block;
   width: 40px;
   height: 40px;
   padding: 0;
   border: none;
   background: url('../images/sprite.png') -280px 0;
}

.railcar {
   display: inline-block;
   width: 233px;
   height: 156px;
   position: relative;
   animation-name: choochoo;
   animation-duration: 5s;
   animation-iteration-count: 4;
   animation-direction: alternate;
}

@keyframes choochoo {
   0% {left: 0px; transform:rotate(30deg);}
   12% {transform: scale(.88,.88);}
   25% {transform: scale(.75,.75);}
   37% {transform: scale(.63,.63);}
   50% {transform: scale(.5,.5);}
   63% {transform: scale(.37,.37);}
   75% {transform: scale(.25,.25);}
   87% {transform: scale(.13,.13);}
   100% {left: calc(100% - 75px);transform: scale(.05,.05);}
}

.railcar:hover {
   transition: width 2s;
   transform: rotate(45deg) scale(1.1,1.1);
}   


#coffeehouse {
   background: url(../images/CoffeeShopImage.jpg); 
   /*background: url(../images/CoffeeTest.jpg);*/
   opacity: .4;
   background-size: cover;  
   width: inherit;
   min-height: 350px;
   animation-name: shop;
   animation-duration: 10s;
   transition-timing-function: ease-in-out;
   animation-iteration-count: infinite;
   animation-direction: alternate;
}

/*@keyframes shop {
   from {background-position: left top;}
   to {background-position: center bottom;}
}*/

@keyframes shop {
   0% {background-position: left top; }
   50% {background-position: center center; }
   100% {background-position: center bottom;}
}
/* @keyframes shop {
   0% {left: 0px;}
   12% {left: 77px;}
   25% {left: 154px;}
   37% {left: 231px;}
   50% {left: 308px;}
   63% {left: 231px;}
   75% {left: 154px;}
   87% {left: 77px;}
   100% {left: 0px;}
}
*/
/* For small screens like phones */

@media only screen and (max-width: 375px) {

   footer { height: 135px; background-color: black; }
   address {font-size: 13px; padding: 0px; text-align:left;}
   textarea {width: 25em;} 
   form input {max-width: 25em; min-width: 10em;}
  /*maxlength=60 minlength=10*/
 }

@media only screen and (min-width: 376px) and (max-width: 450px) {

   footer { height: 135px; background-color: black;}
   textarea {width: 30em;} 	
}
@media only screen and (min-width: 451px) and (max-width: 950px) {

   footer { height: 135px; background-color: black;}
   textarea {width: 50em;} 	
}
/* For larger tablets , lap tops and desk tops. */

@media only screen and (min-width: 951px) {
   footer { height: 105px; background-color: chocolate;}
   textarea {width: 60em;} 
}		
/* End Example */

/* "^(\w{1,}\.{0,1}\w{0,}\@{1}\w{1,}\.{1}\w{2,})$"       "^(\w{1,}(?(\.{1})\w{1,})[@]{1}\w{2,}\.{1}\w{2,10})$"*/