/* nancysantiques.styles.css */

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

}


#catchphrase {
	font: 30pt/30pt 'Great Vibes', cursive, serif;
	padding-top: 24px;
	color: #250B3F;
   text-shadow: -3px -3px #8F9630;
   text-align: center;
 font-weight: bold;
}

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

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


#bodyimage1 {
background-image: url(pix2/flowercorner.png) alt="";
float: left;
background-repeat: no-repeat;
 position: relative;
 width: 50%;
margin-left: 0px;
margin-top: 0px;
z-index: 1;
}

#bodyimage2 {
background-image: url(pix2/flowercornerReverse.png) alt="";
background-repeat: no-repeat;
width: 50%;
position: relative;
margin-right: 0px;
float: right;
margin-top: 140px;
}

.signin {
float: right;
font-size: 20pt;
 position: absolute;
border: solid 1px #3F250B;
border-radius: 3px;
width: 10%;
margin-left: 950px;
margin-top: 35px;
 padding-top: 3px;
 padding-bottom: 3px;
   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: 11px 16px 8px 13px;
            }
            
/* Fixed-position sized to edges of viewport */

#wrapper {
 position: fixed;
 background: center;
 margin-right: 30px;
margin-left: 67px;
margin-top: 50px;
margin-bottom: 40px;
 /* White for older browser, rgba for newer */
 height: 585px;
 background: white;
 background: #8F9630;
 border-radius: 10px;
width: 88%;
background: auto 100%;
}


#wrapper a {
	color: #250B3F;
}

header {
 position: absolute;
 padding-left: 4%;
 padding-top: 0px;
  
}

nav {
 position: absolute;
 top: 20%;
 left: 0;
 bottom: 15%;
 width: 15%;
 padding: 1%;
}


footer {
font: 18pt/18pt sans serif, serif;
margin-top: 535px;
 right: 2;
padding-top: 0px;
position: fixed;
 height: 10%;
 width: 45%;
 padding-left: 8%;
 color: #250B3F;
 
 float: right;
}

address {
font: 16pt/16pt sans serif, serif;
color: #3F250B;

padding-bottom: 10px;
}

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

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


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


article {
 position: absolute;
 top: 19%;
 left: 15%;
 right: 0;
 bottom: 10%;
 padding-left: 20px;
 padding-right: 10px;
 padding-top: .5px;
 overflow: auto;
 background: #DCA143;
background: auto 100%;
 z-index: 1;
}

h1 {
   font: 46pt/46pt 'Great Vibes', cursive, serif;
   text-shadow: -3px -3px #777;
   color: #250B3F;
}

h2 {
   font: 18pt/18pt sans serif, serif;
}

h3 {
   font: 27pt/27pt sans serif, serif;
   color: #3F250B;
}

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

article li {
	padding:0; 
margin:0; 
list-style-type:none;
 text-align: center;
 font: 22pt/22pt 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;
    
}

#logo {
<img src="pix2/logon.png" alt"Company Logo" id="logo";
position: fixed;
width: 4%;
height: 40px;
size: 20%;
 padding: 1%;
 z-index: 2;
float: left;
margin-left: 5px;
margin-top: 250px;
}

 /* Style for <a> tags in the nav section */
 .box {
   background: center;
   font-family: 'Great Vibes', cursive, sans serif, serif;
   color: #250B3F;
   font-weight: bold;
   font-size: 20pt;
   outline: none;
   padding: 8%;
   opacity:1;
   display: block;
   border-right: solid 1px #3F250B;
   border-radius: 15px;
   width: 85%;
   text-align: center;
   height: 55px;
   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 */
   }

   
   
   /*for the next shape box to the right of the first one */
   
   .shape2 {
   float: right;
   font-family: 'Great Vibes', cursive, sans serif, serif;
   color: #250B3F;
   font-weight: bold;
   font-size: 20pt;
   outline: none;
   padding: 2%;
   opacity:1;
   display: block;
   border-right: solid 1px #3F250B;
   border-radius: 145px;
   width: 35%;
   text-align: center;
   height: 95px;
   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;
   background-size: auto 100%;
   }

/* 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;
   background-size: auto 100%;
}
.shape2 a:hover, .shape2 a:active, .shape2 a:link, .shape2 a:visited {
   color: #250B3F;
   text-decoration: none;
   background-size: auto 100%;
   }

 .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 */
   background-size: auto 100%;
   }

   /*the first shape box  */
   
   .shape {
   
   float: left;
   font-family: 'Great Vibes', cursive, sans serif, serif;
   color: #250B3F;
   font-weight: bold;
   font-size: 20pt;
   outline: none;
   padding: 2%;
   opacity:1;
   display: block;
   border-right: solid 1px #3F250B;
   border-radius: 145px;
   width: 35%;
   text-align: center;
   height: 95px;
   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 */
   }

  #promo2 {
   display: none;
   }
   
#promo3 {
   display: none;
   }
 
 
   
#promo {
	font: 13pt/13pt sans serif, serif;
	background: center;
	color: #FFFFFF;
    width: 120px;
    height: 85x;
	padding: 1.5px;
    background-color: #654321;
	border-radius: 20px;
    position: relative;
	text-align: center;
	z-index: 2;
	margin-top: 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;
    
}



@-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);
  }
}