/*	Resets */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, 
p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, 
img, ins, input, kbd, q, samp, small, strong, sub, sup, var, b, i, hr, 
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figure, figcaption, hgroup, 
menu, footer, header, nav, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	box-sizing: border-box;
}

article, aside, canvas, figure, figure img, figcaption, hgroup,
footer, header, nav, section, audio, video {
	display: block;
}

a img {border: 0;}

html{
    text-rendering: optimizeLegibility;
    height: 100%;
    width: 100%;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,e0e0e0+100 */
background: #FFCE85; /* Old browsers */
/*background: linear-gradient(180deg, #FFCE85 0%, #FFE6C1 100%); /* FF3.6-15 */*/
}

body{
    height: 100%;
    width: 100%;
    background-size: cover;
    background-position: center center;
    background-image: url("images/flourBackground.png"); /* fallback */
    background-image: url("images/flourBackground.png"), linear-gradient(180deg, #FFCE85 0%, #FFE6C1 100%); /* W3C */
}

/* make keyframes that tell the start state and the end state of our object */

@-webkit-keyframes fadeIn { from { opacity:0; top:0; opacity: 1\9; /* IE9 only */ } to { opacity:1; top:40;} }
@-moz-keyframes fadeIn { from { opacity:0; top:0;  opacity: 1\9; /* IE9 only */ } to { opacity:1; top:40;} }
@keyframes fadeIn { from { opacity:0; top:0; opacity: 1\9; /* IE9 only */ } to { opacity:1; top:40;} }

.fade-in {
    opacity:0;  /* make things invisible upon start */
    -webkit-animation:fadeIn cubic-bezier(.79,-0.28,.38,1.09) 1;  /* call our keyframe named fadeIn, use animattion cubic-bezier and repeat it only 1 time */
    -moz-animation:fadeIn cubic-bezier(.79,-0.28,.38,1.09) 1;
    animation:fadeIn cubic-bezier(.79,-0.28,.38,1.09) 1;

    -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;

    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    animation-duration:1s;
}

.fade-in.one {
-webkit-animation-delay: 0.15s;
-moz-animation-delay: 0.15s;
animation-delay: 0.15s;
}


img{
/*    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 120px;*/
}

.appIcon{
     box-shadow: 0 4px 32px 0 rgba(0,0,0,0.1);
    border-radius: 20px;
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 120px;
    z-index: 0;
}

.appIconLetter{
    z-index: 100;
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 120px;
   
    /*transform: rotateY(-7.5deg);*/
}



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

    body {
        height: 100%;
        width: 100%;
    }

}



/*      Mobile Layout: 240px.
        Inherits styles from: Default Layout.    */

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

    body {
        height: 100%;
        width: 100%;
    }

}