@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400');
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}


body{

    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    line-height: 1.5;
    font-weight: 100;
}


.parallax-window {
    min-height: 400px;
    background: transparent;
}

.parallax-slider{
    height: 100vh;
}


#wrapper{
    margin: 0 auto;
}

/**
* Header
*/

/*header container*/
#site-header{
    width: 100%;
}


/* logo */
#logo{
    width: 270px;
    margin-top: 5px; 
    text-align: center;
    height: 180px;
}



/*  navigation bar settings */
#site-nav{
    list-style-type: none;
    
}

#site-nav ul{
    padding-right: 30px;
    float: right;
    margin-top: -110px;
    
}


#site-nav li{
    display: inline-block;
    margin-left: 20px;
    
}

 #site-nav a:hover{
    border-bottom: .5px solid #b5b5b5;
    
}



#site-nav a{
    
    font-weight: 300;
    color: rgb( 166, 139, 147 );
    text-decoration: none;  
    font-size: 110%;
    font-variant: small-caps;
    border-bottom: 1px solid #966675;
    padding-bottom: 5px;
    
}

/* tag line font settings */
#tag-line{
    
    font-size: 230%;
    color: #9F95B7;
    text-align: center;
    margin: 90px;
    clear: both;   
    font-variant: small-caps;
    font-weight: 200;
}


article{
    margin-top: -19px;
}

#main-image{
    margin-top: -56px;
    width: 100%;
    height: 100vh;
}

#home #main-image{
    display: none;
}

main{
    width: 940px;
    
}


/**
* Homepage Style Settings
*/


#menu #main-image{
    width: 600px;
    height: 810px;
}


#arrow2{
    width: 170px;
    height: 40px;
}

img{
    width: 100%;
    height: auto;
}


#lava{
    width: 400px;
    height: auto;
    float: left;
    display: inline-block;
    margin-bottom: 90px;
    margin-left: 45px;
}



#summary{
    width: 430px;
    float: right;
    display: inline-block;
    margin-left: 152px;
    line-height: 1;
    text-align: center;
    margin-top: 142px;

}

main p{
    margin-bottom: 30px;
    line-height: 1.5;
}

main{
    width: 90%;
    margin: 0 auto;
}


/* view menu button */
#button{
    clear: both;
    border: solid 1px #9F95B7;
    padding: 14px 15px;
    text-align: center;
    display: inline-block;
   

}

#button a{
    text-decoration: none;
    color: #9F95B7;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 110%;
    font-family: 'Raleway', sans-serif;
    
}
/**
* Site Footer
**/
#site-footer{
    height: 100px;
    clear: both;
    border-top: 1px solid #000;
}

.footer-cross{
    width: 50px;
    height: 50px;
    margin: 30px;
    float: left;
}

#site-footer ul{ 
    text-align: center;
    word-spacing: -2px;
    margin-top: 40px;
    float: right;
}
/* footer icon sizes */
#site-footer li{
    height: 70px;
    width: 70px;
    
    display: inline-block;

}

#site-footer .social{
    width: 35px;
    height: 35px;
    border-radius: 50%;
    
}

#site-footer p{
    font-size: 60%;
    color: #000;
    margin-top: 75px;
    margin-right: -270px;
    float: right;
    font-variant: small-caps;
}

.slides li .pic{
        max-width: 100%;
        max-height: 538px;
        display: block;
        margin: 0 auto;
}



/**
* ABout Page Styling
*/
#bio{
    font-size: 50%;
    line-height: 2;
    width: 100%;
    max-width: 570px;
    margin: 0 auto;
    
}

#bio #primary{
    width: 220px;
    float: left;
}

#bio #secondary{
    width: 220px;
    float: right;
    margin-left: 40px;
}

#about article{
    margin-top: 0;
}

#about #site-footer{
    margin-top: 500px;
}

/**
* Menu Styling
**/ 


#menu section{
    width: 320px;
    font-size: 60%;
    float: right;
    height: 720px;
    margin-top: -810px;

}

#menu section p{
    color: #555a6e;
    font-size: 80%;
}

#menu #tag-line{
    position: absolute;
    top: 44%;
    left: 19%;
}

#menu-pic{
    width: 500px;
  display: block;
  margin-left: auto;
  margin-right: auto;
    margin-bottom: 90px;
}

#menu #tag-line{
    position: static;
    margin: 0;
}
table{
    width: 320px;
    margin-top: 10px;    
}


#menu h3{
    font-family: 'Sacramento', cursive;
    font-size: 220%;
    color: #555a6e;
    padding-top: 5px;
}

#menu h3::after{
    content: '';
    display: block;
    width: 170px;
    height: 1.5px;
    background-color: #555a6e;
    margin-top: -13px;
}

.prices{
    color: #555a6e;
    font-weight: 600;
}
.right{
    float: right;
}

.cake-cupcake-price{
    text-align: center;
    font-weight: 600;
}
/**
* Contact Us page styling
*/



.all-locations{
    font-size: 60%;
    text-align: center;
}

#toronto{
    float: left;
    width: 33%;
}

#van{
    float: right;
    width: 33%;
}

#tema{
    display: inline-block;
    width: 33%;
}

.all-locations dl{
    margin-bottom: 30px;
}

.all-locations dt{
    font-size: 100%;
    font-weight: 600;
    color: #555a6e;
    text-transform: uppercase;
}

#contact h3{
    font-size: 60%;
    font-family: 'Raleway', 'sans-serif';
    text-transform: lowercase;
    text-align: center;
    margin-top: 10px;
}
#contact strong{
    font-weight: 600;
}

#cross-arrow{
    display: block;
    height: 100px;
    width: 100px;
    margin: 40px auto;
}

/**
* Gallery Styling
*/

#gallery img{
    margin-bottom: -10px;
}


/* do not display show/hide menu in desktop layout*/
#site-nav > a{
    display: none;
}


/**
* Mobile Layout for 400px and under
*/


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


/*
    #site-header::after {
        width: 700px;
        height: 2px;
    }    
*/
    
    
    #site-header::after{
        height: 0px;
    }    
    
    #summary {
        width: 290px;
        font-size: 58%;
        margin-top: -315px;
    }

    #button{
        padding: 9px 6px;
        margin-top: -211px;
        margin-right: 96px;
    }    
    
    #button a{
        font-size: 80%;

    }    

    #bio{

        margin: 0 auto;
    }  
    
    #menu #main-image {
        width: 400px;
        height: 610px;
    }    

    #menu #tag-line {
        position: absolute;
        top: 44%;
        left: 16%;
        font-size: 90%;
    }    
    

    #menu section {
        width: 300px;
        font-size: 50%;
        height: 665px;
        line-height: 1.4;
        margin-top: -626px;
    }    
    #menu h3 {
        font-size: 235%;
    }
    
    #menu h3::after {
        margin-top: -9px;
    }    

}

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

    
    #site-footer{
        
    }
    
    #button{
        display: none;
    }
    
    
   #about #main-image{
        height: auto;
    }
    
    #lava{
        width: 200px;
        height: auto;
        margin-left: 20px; 
    }
    
    #tag-line{
        font-size: 130%;
        margin: 20px auto;
    }
    

    
    
        h1{
            font-size: 160%;
            padding-left: 10px;
        }
    
    #arrow1{
        display: none;
        
    }
  
    #summary{
        float: none;
        font-size: 60%;
        margin-left: 0px;
        line-height: 1.5;
        text-align: center;
        margin-top: 70px;
        width: 200px;
        margin-left: 60px;

    }
    #bio{
        font-size: 60%;
        line-height: 2;
        width: 400px;
        margin: 0 auto;
        text-align: center;
    }   

    #bio #primary{
        width: 100%;
        float: none;
        text-indent: 1em;
    }

    #bio #secondary{
        width: 100%;
        float: none;
        margin-left: 0px;
    }

    #menu #main-image{
        display: none;
    }
  
    #menu #tag-line{
        width: 500px;
        height: 200px;
        background-image: url(../images/small-flower-bck.png);
        background-position: center center;
        font-size: 160%;
        position: static;
        
    }    
    
    #menu main{
        position: static;
    }
    
    #menu #tag-line h2{
        padding-top: 60px;
    }
    
    #menu-book{
        display: block;
        margin: 0 auto;
    }
    
    #menu section{
        float: none;
        height: auto;
        margin: 0 auto;
    }

    #entire-menu{
        margin-left: 0;
    }
    #menu .right{
        margin-left: 100px;
    }

    .cake-cupcake-price{
        margin-left: 0;
    }


    
    #gallery .pic{
        width: 100%;
        height: auto;
        display: block;
        max-width: 100%;
    }
    
    .all-locations{
        font-size: 60%;
        text-align: center;
        margin: 0 auto;
    }

    #toronto{
        float: none;
        width: 100%;
    }

    #van{
        float: none;
        width: 100%;
    }

    #tema{
        display: block;
        width: 100%;
    }

    .all-locations dl{
        margin-bottom: 30px;
    }

    .all-locations dt{
        font-size: 120%;
        font-weight: 600;
        color: #555a6e;
        text-transform: uppercase;
    }
    

    

    #cross-arrow{
    text-align: center;
    height: 100px;
    width: 100px;
    }

    
    #site-nav li{
        display: block;
        margin: 0;
        float: none;
    }
    
    #site-nav ul{
        margin-top: 0;
    }
    
    
    #site-nav{
        position: fixed;
        top: 0;
        right: 0;
        
        background-color: #fff;
    }
    
    #site-nav li a{
        text-align: center;
        display: block;
        font-size: 150%;
        line-height: 2;
        margin-left: 40px;
        margin-right: 40px;
    }
    
    #site-nav li:last-child a{
        border: none;
    }
    
    
    #site-nav > #show-menu{
        display: block;
        
        border-top: solid 3px #555a6e;
        border-bottom: solid 3px #555a6e;
    }
    
    #site-nav > #show-menu::before{
        content: '';
        display: block;
        border-top: solid 3px #555a6e;
        position: relative;
        top: 14px;
    }
    
    #site-nav ul{
        display: none;
    }
    
    #site-nav > a{
        position: absolute;
        top: 10px;
        right: 10px;
        
        width: 40px;
        height: 36px;
        
        -webkit-box-sizing: border-box;
        
        box-sizing: border-box;
    }
    
    #site-nav > a span{
        display: none;
    }
    
    #site-nav:target{
        left: 0;
        bottom: 0;
        top: 0;
        right: 0;
        background-color: #fff;
        z-index: 9999;
                
        -webkit-animation-name: fade-in;
                
        animation-name: fade-in;
        -webkit-animation-duration: 0.75s;
        animation-duration: 0.75s;
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    
    #site-nav:target ul{
        display: block;        
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        -webkit-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
    }
    
    #site-nav:target li{        
        -webkit-animation: slide-in 0.25s 0.5s ease-out backwards;        
        animation: slide-in 0.25s 0.5s ease-out backwards;
    }
    
    #site-nav:target li:nth-child(2){        
        -webkit-animation-delay: 0.75s;        
        animation-delay: 0.75s;
    }
    
    #site-nav:target li:nth-child(3){        
        -webkit-animation-delay: 1s;        
        animation-delay: 1s;
    }
    
    #site-nav:target li:nth-child(4){        
        -webkit-animation-delay: 1.25s;        
        animation-delay: 1.25s;
    }
    
    #site-nav:target li:nth-child(5){        
        -webkit-animation-delay: 1.5s;        
        animation-delay: 1.5s;
    }
   
    
    #site-nav:target > #show-menu{
        -webkit-animation: spin-hamburger 0.5s ease-out both;
        animation: spin-hamburger 0.5s ease-out both;
        -webkit-transform-origin: center center;
        transform-origin: center center;
        overflow: hidden;
    }
    
    #site-nav:target > #hide-menu{
        display: block;
    }
    
    #site-nav > #hide-menu::before,
    #site-nav > #hide-menu::after{
        content: '';
        display: block;
        border-top: solid 5px #555a6e;
        
        -webkit-animation: close-spin 0.5s 0.5s ease-out both;
        
        animation: close-spin 0.5s 0.5s ease-out both;
    }
    
        #site-nav > #hide-menu::before{
        -webkit-transform: translate(5px,0) rotate(45deg);
        transform: translate(5px,0) rotate(45deg);
        -webkit-transform-origin: 0 2.5px;
        transform-origin: 0 2.5px;
    }
    
    #site-nav > #hide-menu::after{
        -webkit-transform: translate(-6.5px,-5px) rotate(-45deg);
        transform: translate(-6.5px,-5px) rotate(-45deg);
        -webkit-transform-origin: 100% 2.5px;
        transform-origin: 100% 2.5px;
    }
    
}

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

    
    #button{
        display: none;
    }
    
    #lava{
        display: none;
    }
    
  
    
    #main-image{
        width: 100%!important;
        height: auto;
    }
    
    
    h1{
        font-size: 126%;
        padding-left: 0px;
        margin-bottom: 15px;
    }
    
    #arrow1{
        display: none;
        
    }
    
    #site-header::after {
        height: 0px!important;
    }
    
    #summary{
        float: none;
        font-size: 40%;
        margin: 20px auto;
        line-height: 1.5;
        text-align: center;
        width: 100%;

    }
    #bio{
        font-size: 40%!;
        line-height: 2;
        font-size: 40%;
        width: 300px;
    }   

    #bio #primary{
        width: 100%;
        float: none;
    }

    #bio #secondary{
        width: 100%;
        float: none;
        margin-left: 0px;
    }
    
    #menu #wrapper{
        width: 300px;
    }
    
    #menu #main-image{
        display: none;
    }

    #menu #tag-line{
        position: static;
        font-size: 100%;
        width: 300px;
        height: 150px;  
        margin-right: 0;
      
    }
    #menu-book{
        display: block;
    }
    
    #menu section{
        width: 3500px;  
    }
    
    table{
        width: 300px;
    }

    #arrow2{
        width: 120px;
    }
    
    #gallery .pic{
        width: 400px;
        height: auto;
        display: block;
        max-width: 100%;
    }
    
    #gallery #tag-line{
        margin-left: 0px;
    }
    
    
    #contact #tag-line{
        margin-left: 10px!important;
    }
    
    .all-locations{
        font-size: 50%;
    }

    #photo-paragraph {
        margin-top: -35px;
    }    
    
    #site-header::after{
        content: '';
        display: block;
        width: 400px!important;
        height: 5px;
        background-color: #555a6e;
        position: absolute;
        top: 11%;
    
    }
    
    #site-nav li{
        display: block;
        margin: 0;
        float: none;
    }
    
    #site-nav ul{
        margin-top: 0;
    }
    
    
    #site-nav{
        position: fixed;
        top: 0;
        right: 9px;
        
        background-color: #fff;
    }
    
    #site-footer .footer-cross{
        margin: 0 auto;
        display: block;
        float: none;
        margin-top: 20px;
    }
    #about #site-footer {
         margin-top: 50px; 
    }
    
}


    




@-webkit-keyframes fade-in{
    
    0%{
        opacity: 0;
    }
    
    100%{
        opacity: 1;
    }
}
    




@keyframes fade-in{
    
    0%{
        opacity: 0;
    }
    
    100%{
        opacity: 1;
    }
}

@-webkit-keyframes slide-in{
    from{
        -webkit-transform: translate( 700px, 0 );
        transform: translate( 700px, 0 );
    }
}

@keyframes slide-in{
    from{
        -webkit-transform: translate( 700px, 0 );
        transform: translate( 700px, 0 );
    }
}

@-webkit-keyframes spin-hamburger{
    0%{
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    
    50%{
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        height: 36px;
        top: 10px;
        border-width: 5px;
    }
    
    99%{
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        height: 0;
        top: 24px;
        border-width: 2.5px;
    }
    
    100%{
        top: -20px;
        height: 0;
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        border-width: 0;
    }
}

@keyframes spin-hamburger{
    0%{
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    
    50%{
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        height: 36px;
        top: 10px;
        border-width: 5px;
    }
    
    99%{
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        height: 0;
        top: 24px;
        border-width: 2.5px;
    }
    
    100%{
        top: -20px;
        height: 0;
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        border-width: 0;
    }
    
@-webkit-keyframes close-spin{
    0%{
        border-width: 0;
    }
    1%{
        -webkit-transform: translate(0,13px) rotate(0deg);
        transform: translate(0,13px) rotate(0deg);
        border-width: 5px;
    }
}
    
@keyframes close-spin{
    0%{
        border-width: 0;
    }
    1%{
        -webkit-transform: translate(0,13px) rotate(0deg);
        transform: translate(0,13px) rotate(0deg);
        border-width: 5px;
    }
}
}



@-webkit-keyframes slide-out-right{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}100%{-webkit-transform:translateX(1000px);transform:translateX(1000px);opacity:0}}@keyframes slide-out-right{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}100%{-webkit-transform:translateX(1000px);transform:translateX(1000px);opacity:0}}