/* nancysantiques.smallscreen.styles.css */
@charset "UTF-8";

@font-face {
    font-family: 'great_vibesregular';
    src: url('greatvibes-regular-webfont.woff2') format('woff2'),
         url('greatvibes-regular-webfont.woff') format('woff');

   text-decoration: none;
   font-weight: large;
   font-style: normal;
}

/* Color scheme hexadecimal values: 8CB732 D9E76F EB9C2B C73F11 000000 and this is a very pretty dark blue #250B3F  */
 body {
 background-color: #3F250B;
color: #DCA143;
}

#catchphrase {
	font: 22pt/22pt 'Great Vibes', cursive, serif;
	color: black;
	padding-top: 13px;
   text-shadow: -3px -3px #8F9630;
    text-align: center;
}


.preload * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
}

#promo {
	display: none;
}

#promo2 {
	
	z-index: 2;
	margin-left: 30%;
	-webkit-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  -webkit-animation-duration: 3s;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-delay: .5s;
    -webkit-animation-iteration-count: 3;
    -webkit-animation-direction: normal;
	-webkit-animation-fill-mode: backwards;
  animation-name: swing;
   animation-duration: 3s;
    animation-timing-function: ease-out;
    animation-delay: .5s;
    animation-iteration-count: 3;
	animation-direction: normal;
	animation-fill-mode: backwards;
    
}

#promo3 {
	
	display: none;
    
}



@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}


@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}





#bodyimage1 {
background-image: url(pix2/flowercorner.png) alt="";

display: none;
}
#bodyimage2 {
background-image: url(pix2/flowercornerReverse.png) alt="";
float: right;
display: none;
}

#logo {
	display: none;
<img src="pix2/logon.png" alt"Company Logo" id="logo";
position: fixed;
background-position: bottom right;
width: 5%;
height: 10px;
size: 2%;
 padding: 1%;
 z-index: 1;
 margin-top: 104px;
 margin-left: 80px;
 float: right;
 
}

/* bottom: 10px*/
/* width: 200px*/
/* height: 100px*/
/* margin-left: 200px*/

          
.signin {
float: right;
font-size: 11pt;
 padding-left: .2%;
padding-right: .2%;
padding-top: 1%;
border: solid 1px #3F250B;
border-radius: 3px;
width: 10%;
height: 35px;

   letter-spacing: 1px;
   font-family:  'Great Vibes', sans serif, serif;
   font-weight: bold;
text-align: center;
color: #250B3F;
background: #632166;
background: -moz-linear-gradient(top, #632166 1%, #ea8b07 100%);
background: -webkit-linear-gradient(top, #632166 1%,#ea8b07 100%);
background: linear-gradient(to bottom, #632166 1%,#ea8b07 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#632166', endColorstr='#ea8b07',GradientType=0 );
   box-sizing: border-box; /* Box sizing for older browsers */
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   }

 .signin a {
   color: #250B3F;
   text-decoration: none;
   }

.signin:hover, .signin:active {
color: #250B3F;
background: #42257a;
background: -moz-linear-gradient(top, #42257a 1%, #cedbe9 100%);
background: -webkit-linear-gradient(top, #42257a 1%,#cedbe9 100%);
background: linear-gradient(to bottom, #42257a 1%,#cedbe9 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#42257a', endColorstr='#cedbe9',GradientType=0 );
opacity:1;
background-size: auto 100%;
box-sizing: border-box; /* Box sizing for older browsers */
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   /* Make background image height equal to button height */
   }
   
   .signin a:hover, .signin a:active, .signin a:link, .signin a:visited {
   color: #250B3F;
   text-decoration: none;
   }

   
.signin:link, .signin:visited {
color: #250B3F;
background: #42257a;
background: -moz-linear-gradient(top, #42257a 1%, #cedbe9 100%);
background: -webkit-linear-gradient(top, #42257a 1%,#cedbe9 100%);
background: linear-gradient(to bottom, #42257a 1%,#cedbe9 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#42257a', endColorstr='#cedbe9',GradientType=0 );
opacity:1;
background-size: auto 100%;
box-sizing: border-box; /* Box sizing for older browsers */
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   /* Make background image height equal to button height */
   }
   
   .clear { 
clear: both; 
}
        /* Style for the top bar */
        .top {
            padding: 8px 4px 8px 4px;
            }
            
/* Fixed-position sized to edges of viewport */
#wrapper {
 position: fixed;
 top: 5%;
 left: 10%;
 right: 5%;
 bottom: 5%;
 /* White for older browser, rgba for newer */
 background: white;
 background-color: #8F9630;
 border-radius: 5px;
  padding-left: 1%;
}



/* Make HTML5 layout elements block elements for older browsers */
header, nav, aside, article, footer, section {
 display: block;
}
/* Style that applies to both header and footer */
header {
 background-color: #8F9630;
 height: 10%;
width: 70%;

margin-left: 95px;
}

footer {
 height: 20%;
 width: 100%;
padding-left: 1px;
margin-top: 424px;
 color: #3F250B;
 position: absolute;
}
/* This nav section is on the side, positioned absolutely */
nav {
 position: absolute;

 top: 2%;
 left: 0;
 
 width: 25%;
 padding: 1%;
}
/* Main article sized to fit inside header, footer nav */
article {
 position: absolute;
 right: 0;
 left: 0;
 height: 60%;
 padding: 2px;
 overflow: auto;
 background: #DCA143;
 z-index: 1;
 margin-top: 40px;
  padding-left: 10px;
}

article p {
color: #3F250B;
font: 16pt/16pt sans serif, serif;
line-height: 1.5;
padding-left:5px;
}

h4 {
   color: #250B3F;
font: 18pt/18pt sans serif, serif;
   text-align: center; 
}

article li {
color: #3F250B;
	padding:0; 
margin:0; 
list-style-type:none;
 text-align: center;
 font: 20pt/20pt sans serif, serif;
line-height: 1.5;
}

article a {
	color: #250B3F;
	text-decoration: none;
}


article li a:hover, article li a:active {
font-weight: bold;
   text-shadow: -3px -3px #8F9630;
    
}

footer a:hover {
color:#7C0a02;
font-weight: bold;
}

address a:hover {
color:#7C0a02;
font-weight: bold;
}


/* Style for all h1 headings */
h1 {
   font: 28pt/28pt;
   text-shadow: -3px -3px #777;
   color: #250B3F;
   margin-left: 50px;
   margin-top: 40px;
font-family: 'Great Vibes', sans serif, serif;
  padding-left: 10px;
}

h2 {
   font: 16pt/16pt 'Cormorant', serif;
}
h3 {
   font: 15pt/15pt sans serif, serif;
   color: #3F250B;
}

h4 {
   color: #3F250B;
font: 16pt/16pt sans serif, serif;
   text-align: center; 
}

/* Style for <a> tags in the nav section */
 .box {
   background: center;
   font-family:  'Great Vibes', sans serif, serif;
   font-weight: bold;
   font-size: 12pt;
   outline: none;
   
   opacity:1;
   display: block;
   border-top: solid 1px #3F250B;
   border-radius: 15px;
   width: 65%;
   text-align: center;
   padding-right: 1%;
   letter-spacing: 2px;
   background: #632166;
background: -moz-linear-gradient(top, #632166 1%, #ea8b07 100%);
background: -webkit-linear-gradient(top, #632166 1%,#ea8b07 100%);
background: linear-gradient(to bottom, #632166 1%,#ea8b07 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#632166', endColorstr='#ea8b07',GradientType=0 );
   box-sizing: border-box; /* Box sizing for older browsers */
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   }
   
   .box a {
   color: #250B3F;
   text-decoration: none;
   }

/* The following pseudo-class applies to the box class when in a hovered state */
/* Styling for hover and tap */
.box:hover, .box:active {
color: #250B3F;
background: #42257a;
background: -moz-linear-gradient(top, #42257a 1%, #cedbe9 100%);
background: -webkit-linear-gradient(top, #42257a 1%,#cedbe9 100%);
background: linear-gradient(to bottom, #42257a 1%,#cedbe9 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#42257a', endColorstr='#cedbe9',GradientType=0 );
opacity:1;
box-sizing: border-box; /* Box sizing for older browsers */
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
}
.box a:hover, .box a:active, .box a:link, .box a:visited {
   color: #250B3F;
   text-decoration: none;
   }

 .box:link , .box:visited {
color: #250B3F;
background: #42257a;
background: -moz-linear-gradient(top, #42257a 1%, #cedbe9 100%);
background: -webkit-linear-gradient(top, #42257a 1%,#cedbe9 100%);
background: linear-gradient(to bottom, #42257a 1%,#cedbe9 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#42257a', endColorstr='#cedbe9',GradientType=0 );
opacity:1;
background-size: auto 100%;
box-sizing: border-box; /* Box sizing for older browsers */
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   /* Make background image height equal to button height */
   }

/* This clear class style terminates float */
.clear { 
clear: both; 
}
    /* Unvisited and visited link styling */
    
    address {
font: 16pt/16pt 'calligraffiti', serif;
color: #3F250B;
padding-left: 10px;
}
address a {
color: #250B3F;
}

/*for the next shape box to the right of the first one */
   
   .shape2 {
   background: center;
   display: block;
   float: right;
   font-family: 'Great Vibes', cursive, sans serif, serif;
   color: #250B3F;
   font-weight: bold;
   font-size: 22pt;
   outline: none;
   padding: 2%;
   padding-top: 3%
   opacity:1;
   display: block;
   border-right: solid 1px #3F250B;
   border-radius: 145px;
   width: 35%;
   text-align: center;
   height: 135px;
   background: #632166;
background: -moz-linear-gradient(top, #632166 1%, #ea8b07 100%);
background: -webkit-linear-gradient(top, #632166 1%,#ea8b07 100%);
background: linear-gradient(to bottom, #632166 1%,#ea8b07 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#632166', endColorstr='#ea8b07',GradientType=0 );
   box-sizing: border-box; /* Box sizing for older browsers */
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   }
   
   .shape2 a {
   color: #250B3F;
   text-decoration: none;
   }

/* The following pseudo-class applies to the box class when in a hovered state */
/* Styling for hover and tap */
.shape2:hover, .shape2:active {
color: #250B3F;
background: #42257a;
background: -moz-linear-gradient(top, #42257a 1%, #cedbe9 100%);
background: -webkit-linear-gradient(top, #42257a 1%,#cedbe9 100%);
background: linear-gradient(to bottom, #42257a 1%,#cedbe9 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#42257a', endColorstr='#cedbe9',GradientType=0 );
opacity:1;
box-sizing: border-box; /* Box sizing for older browsers */
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
}
.shape2 a:hover, .shape2 a:active, .shape2 a:link, .shape2 a:visited {
   color: #250B3F;
   text-decoration: none;
   }

 .shape2:link , .shape2:visited {
color: #250B3F;
background: #42257a;
background: -moz-linear-gradient(top, #42257a 1%, #cedbe9 100%);
background: -webkit-linear-gradient(top, #42257a 1%,#cedbe9 100%);
background: linear-gradient(to bottom, #42257a 1%,#cedbe9 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#42257a', endColorstr='#cedbe9',GradientType=0 );
opacity:1;
background-size: auto 100%;
box-sizing: border-box; /* Box sizing for older browsers */
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   /* Make background image height equal to button height */
   }

   /*the first shape box  */
   
   .shape {
   
   float: left;
   font-family: 'Great Vibes', cursive, sans serif, serif;
   color: #250B3F;
   font-weight: bold;
   font-size: 22pt;
   outline: none;
   padding: 2%;
   opacity:1;
   display: block;
   border-right: solid 1px #3F250B;
   border-radius: 145px;
   width: 35%;
   text-align: center;
   height: 135px;
   background: #632166;
background: -moz-linear-gradient(top, #632166 1%, #ea8b07 100%);
background: -webkit-linear-gradient(top, #632166 1%,#ea8b07 100%);
background: linear-gradient(to bottom, #632166 1%,#ea8b07 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#632166', endColorstr='#ea8b07',GradientType=0 );
   box-sizing: border-box; /* Box sizing for older browsers */
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   }
   
   .shape a {
   color: #250B3F;
   text-decoration: none;
   }

/* The following pseudo-class applies to the box class when in a hovered state */
/* Styling for hover and tap */
.shape:hover, .shape:active {
color: #250B3F;
background: #42257a;
background: -moz-linear-gradient(top, #42257a 1%, #cedbe9 100%);
background: -webkit-linear-gradient(top, #42257a 1%,#cedbe9 100%);
background: linear-gradient(to bottom, #42257a 1%,#cedbe9 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#42257a', endColorstr='#cedbe9',GradientType=0 );
opacity:1;
box-sizing: border-box; /* Box sizing for older browsers */
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
}
.shape a:hover, .shape a:active, .shape a:link, .shape a:visited {
   color: #250B3F;
   text-decoration: none;
   }

 .shape:link , .shape:visited {
color: #250B3F;
background: #42257a;
background: -moz-linear-gradient(top, #42257a 1%, #cedbe9 100%);
background: -webkit-linear-gradient(top, #42257a 1%,#cedbe9 100%);
background: linear-gradient(to bottom, #42257a 1%,#cedbe9 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#42257a', endColorstr='#cedbe9',GradientType=0 );
opacity:1;
background-size: auto 100%;
box-sizing: border-box; /* Box sizing for older browsers */
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   /* Make background image height equal to button height */
   }