body{
    /*font: 15px/1.5 Lora, Lato,sans-serif;*/
    padding:0;
    margin:0;
    background-color:#f4f4f4;
}


@font-face {
    font-family: "Lato";
    src: url("../fonts/Lato-Regular.ttf") format("Lato");
}

/*@font-face {*/
    /*font-family: Lora;*/
    /*src: url(“../fonts/Lora-Regular.ttf”);*/
/*}*/

@font-face {
    font-family: "Lora";
    src: url("../fonts/Lato-Regular.ttf") format("Lora");

}

@font-face {
    font-family: "LoraBold";
    src: url("../fonts/Lora-Bold.ttf") format("LoraBold");
}

/*@font-face {*/
    /*font-family: LoraBold;*/
    /*src: url(“./fonts/Lora-Bold.ttf”);*/
/*}*/

/* Global */
.container{
    width:80%;
    margin:auto;
    overflow:hidden;
}


img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

ul{
    margin:0;
    padding:0;
}

h1{
    font-family: “LoraBold”, serif;
    color: #ffffff;
    font-size: 24pt;
    text-align: center;
}

/*h1:hover{*/
/*transition:transform 5s;*/
/*}*/

/*h3{*/
/*font-family: “Lora””;*/
/*color: #757f74;*/
/*font-size: 24pt;*/
/*text-align: center;*/
/*}*/

p{

    font-family: Lato, serif;
    color: #a05257;
    font-size: 12pt;
    text-align: center;
}


h3{
    font-family: Lora, serif;
    color: #757f74;
    font-size: 24pt;
    text-align: center;
}


h3:hover{
    color:#cccccc;
    transform: rotate(180deg);
    transition:transform 5s;
    font-weight:bold;
}

h1:hover{
    color:#cccccc;
    transform: rotate(180deg);
    font-weight:bold;
}

.button_1{
    height:38px;
    background:#933c3f;
    border:0;
    padding-left: 20px;
    padding-right:20px;
    color:#ffffff;
}

.dark{
    padding:15px;
    background:#35424a;
    color:#ffffff;
    margin-top:10px;
    margin-bottom:10px;
}

/* Header **/
header{
    background:#8faa61;
    color:#ffffff;
    padding-top:40px;
    min-height:70px;
    border-bottom:#e8491d 3px solid;
}

header a{
    color:#ffffff;
    text-decoration:none;
    text-transform: uppercase;
    font-family: Lora, serif;
    font-size:16px;
}

header li{
    float:left;
    display:inline;
    padding: 0 20px 0 2px;
}

header #branding{
    float:left;
}

header #branding h1{
    margin:0;
}

header nav{
    float:right;
    margin-top:10px;
}

header .highlight, header .current a{

    color:#933c3f;
    font-weight:bold;
}

header a:hover{
    color:#cccccc;
    font-weight:bold;
}

/* Showcase */
#showcase{
    padding-top:30px;
    padding-bottom:30px;
    min-height:150px;
    background-color:#f0cc6d;
    /*background:url('../imgfinal/showcase.jpg') no-repeat 0 -400px;*/
    text-align:center;
    color:#ffffff;
}

#showcase33{
    padding-top:5px;
    padding-bottom:5px;
    min-height:100px;
    background-color:#8faa61;
    /*background:url('../imgfinal/showcase.jpg') no-repeat 0 -400px;*/
    text-align:center;
    color:#ffffff;
}

#showcase34{
    padding-top:5px;
    padding-bottom:5px;
    min-height:100px;
    background-color:#a05257;
    /*background:url('../imgfinal/showcase.jpg') no-repeat 0 -400px;*/
    text-align:center;
    color:#ffffff;
}

#showcase2{
    min-height:400px;
    /*background-color:#f0cc6d;*/
    background:url('../imgfinal/pizzaguacresized.png') no-repeat 0 -100px;
    background-size: 1500px 1001px;

    text-align:center;
    color:#ffffff;
}

#showcase3{
    line-height:200px;
    min-height:700px;
    background-color:#f0cc6d;
    /*background:url('../imgfinal/PIZZAGUAC.png') no-repeat 0 -100px;*/
    text-align:center;
    color:#ffffff;
}

#showcase4{
    min-height:900px;
    background-color:#f0cc6d;
    /*background:url('../imgfinal/PIZZAGUAC.png') no-repeat 0 -100px;*/
    text-align:center;
    color:#ffffff;
}


#showcase h1{

    font-family: LoraBold, sans-serif;
    margin-top:30px;
    font-size:55px;
    margin-bottom:10px;
}

#showcase2 h1{
    margin-top:30px;
    font-size:75px;
    margin-bottom:10px;
}


#showcase p{
    font-size:20px;
}

#showcase2 p{
    font-size:20px;
}




/* Newsletter */
#newsletter{
    padding:15px;
    color:#933c3f;
    background:#8faa61
}

#newsletter h1{
    float:left;
}

#newsletter form {
    float:right;
    margin-top:15px;
}

#newsletter input[type="email"]{
    padding:4px;
    height:25px;
    width:250px;
}

/* Boxes */
#boxes{
    margin-top:20px;
}

#boxes .box{
    float:left;
    text-align: center;
    width:30%;
    padding:10px;
}



#boxes .box img{
    width:90px;
}

#boxes .box h3{

    font-size:24px;
    text-align: center;
}



/* Sidebar */
aside#sidebar{
    float:right;
    width:30%;
    margin-top:10px;
}

aside#sidebar .quote input, aside#sidebar .quote textarea{
    width:90%;
    padding:5px;
}

/* Main-col */
article#main-col{
    float:left;
    width:65%;
}

/* Services */
ul#services li{
    list-style: none;
    padding:20px;
    border: #cccccc solid 1px;
    margin-bottom:5px;
    background:#e6e6e6;
}

footer{
    padding:20px;
    margin-top:20px;
    color:#933c3f;
    background-color:#f0cc6d;
    text-align: center;
}

/* Media Queries */
@media(max-width: 768px){
    header #branding,
    header nav,
    header nav li,
    #newsletter h1,
    #newsletter form,
    #boxes .box,
    article#main-col,
    aside#sidebar{
        float:none;
        text-align:center;
        width:100%;
    }

    header{
        padding-bottom:20px;
    }

    #showcase h1{
        margin-top:40px;
    }

    #newsletter button, .quote button{
        display:block;
        width:100%;
    }

    #newsletter form input[type="email"], .quote input, .quote textarea{
        width:100%;
        margin-bottom:5px;




    }
}

/* Animation */

#slider {
    background: #933c3f;
    border: 5px solid #eaeaea;
    box-shadow: 1px 1px 5px rgba(0,0,0,0.7);
    height: 440px;
    width: 680px;
    margin: 40px auto 0;
    overflow: visible;
    position: relative;
}

#slider ul {
    margin: 0;
    padding: 0;
    position: relative;
}

#slider li {
    width: 680px;  /* Width Image */
    height: 320px; /* Height Image */
    position: absolute;
    top: -325px; /* Original Position - Outside of the Slider */
    list-style: none;
}

#slider li.anim1 {
    animation: cycle 25s linear infinite;
}

#slider li.anim2 {
    animation: cycletwo 25s linear infinite;
}

#slider li.anim3 {
    animation: cyclethree 25s linear infinite;
}

#slider li.anim4 {
    animation: cyclefour 25s linear infinite;
}

#slider li.anim5 {
    animation: cyclefive 25s linear infinite;
}

/* ANIMATION */

@keyframes cycle {
    0%  { top: 0px; }
    4%  { top: 0px; }
    16% { top: 0px; opacity:1; z-index:0; }
    20% { top: 325px; opacity: 0; z-index: 0; }
    21% { top: -325px; opacity: 0; z-index: -1; }
    92% { top: -325px; opacity: 0; z-index: 0; }
    96% { top: -325px; opacity: 0; }
    100%{ top: 0px; opacity: 1; }
}

@keyframes cycletwo {
    0%  { top: -325px; opacity: 0; }
    16% { top: -325px; opacity: 0; }
    20% { top: 0px; opacity: 1; }
    24% { top: 0px; opacity: 1; }
    36% { top: 0px; opacity: 1; z-index: 0; }
    40% { top: 325px; opacity: 0; z-index: 0; }
    41% { top: -325px; opacity: 0; z-index: -1; }
    100%{ top: -325px; opacity: 0; z-index: -1; }
}

@keyframes cyclethree {
    0%  { top: -325px; opacity: 0; }
    36% { top: -325px; opacity: 0; }
    40% { top: 0px; opacity: 1; }
    44% { top: 0px; opacity: 1; }
    56% { top: 0px; opacity: 1; }
    60% { top: 325px; opacity: 0; z-index: 0; }
    61% { top: -325px; opacity: 0; z-index: -1; }
    100%{ top: -325px; opacity: 0; z-index: -1; }
}

@keyframes cyclefour {
    0%  { top: -325px; opacity: 0; }
    56% { top: -325px; opacity: 0; }
    60% { top: 0px; opacity: 1; }
    64% { top: 0px; opacity: 1; }
    76% { top: 0px; opacity: 1; z-index: 0; }
    80% { top: 325px; opacity: 0; z-index: 0; }
    81% { top: -325px; opacity: 0; z-index: -1; }
    100%{ top: -325px; opacity: 0; z-index: -1; }
}
@keyframes cyclefive {
    0%  { top: -325px; opacity: 0; }
    76% { top: -325px; opacity: 0; }
    80% { top: 0px; opacity: 1; }
    84% { top: 0px; opacity: 1; }
    96% { top: 0px; opacity: 1; z-index: 0; }
    100%{ top: 325px; opacity: 0; z-index: 0; }
}