/*
	CSS Styles
	Spring 2013
	
	Developed by Colin To
*
*/


/* ========================================================
*	CSS Styles
* ========================================================= */

html, body{
/*    position:relative;*/
	height:90%;
    width:100%;
    min-height:90%;
    margin:0;
    padding:0;
    color: #333333; /* Rich Black */
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
	font-weight: 300;
	font-size: 12px;
	background-color: #FFFFFF;
	line-height: 1.333333333em; /* The lead between the sentences, 33% larger than line text*/
    
    text-shadow: 1px 1px 1px #000;
    -webkit-font-smoothing: antialiased;
    -webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
    text-shadow: rgba(0,0,0,.01) 0 0 1px;
    text-rendering: optimizeLegibility;
    
    z-index: -3;
}

article{
    height:100%;
    min-height:100%;
	max-width:90%;
	margin: 0 auto;
	padding: 1% 0%;
	clear:both;
}

.banner{
    position:fixed;
    width:100%;
    top:0px;
    z-index: 5;
    margin: 0 auto;
    height:100px;
    padding-top:20px;
    background-size: cover;
	background-image:url('../Img/web/b5.png');
    
    will-change:top;
    transform: translateZ(0);
    transform: translate3d(0,0,0);
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    -webkit-transform: translate3d(0,0,0);
    -webkit-backface-visibility: hidden;
}

.container{
    height:auto;
    min-height:75%;
    padding-top:100px;
}

h2{
	font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
}

h4{
    margin-bottom:8px;
}

a {
    color: #FFFFFF;
	text-decoration:none;
}

#nav-mobile{
	display:none;
}

#nav-web{
    display:block;
	max-width:90%;
	float:right;
    margin-right:10%;
    letter-spacing: 1px;
}

#nav-web ul {
	font-size:14px;
	clear:both;
	float:right;
}

#nav-web ul li a{
    padding: 6px 15px;  /* This was transferred from nav-web ul li */
}

#nav-web ul li{
	display:inline-block;
    margin-right:2px;
    padding:0;
}

.rollover a{
    display:inline-block;
}

.rollover a:after {
    content:' ';
    display:block;
    padding-top:10px;
    border-bottom: solid 1px #fff;
    transform: scaleX(0.0000);
/*    transform: scaleX(0.0001);*/
    -webkit-transition: transform 250ms ease-in-out;
    -moz-transition: transform 250ms ease-in-out;
    -ms-transition: transform 250ms ease-in-out;
    -o-transition: transform 250ms ease-in-out;
    transition: transform 250ms ease-in-out;
}

.rollover a:hover:after{
    transform: scaleX(1);
}


.logo{
    float:left;
}

.logo img{
	height:60px;
    padding-left:40%;
}

.darken{
    display:inline-block;
    background:black;
}

.darken img{
    display:block;
    -webkit-transition: all 0.3s linear;
       -moz-transition: all 0.3s linear;
        -ms-transition: all 0.3s linear;
         -o-transition: all 0.3s linear;
            transition: all 0.3s linear;
}

.navPacks:hover .darken img, 
.navPacks:active .darken img{
    opacity:0.7;
}

.c_image_groups:hover .darken img,
.c_image_groups:active .darken img{
    opacity:0.7;
}

.divider{
	clear:both;
	padding: 5% 0 3%;
	text-align: center;
}

footer{
    clear:both;
	position:relative;
	height:50px;
    width:100%;
	left:0;
    top:60px;
	bottom:0;
    font-size:9px;
    text-align: center;
}

.blue_title{
	color: #678c8d;
}

.hidden{
    display:none;
}

input[type=submit], input[type=button], input[type=reset] {
    height:30px; 
    width:200px;
    background:#9DCBCC;
/*    border:0 none;*/
    cursor:pointer;
    -webkit-border-radius: 5px;
    border-radius: 5px; 
    border:#9DCBCC solid 1px;
    color:#fff;
    font-size:10px;
    font-weight:600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
}

input[type=submit]:hover, input[type=button]:hover, input[type=reset]:hover {
    background:#fff;     
    color:#9DCBCC;
}

input[type=submit]:active, input[type=button]:active, input[type=reset]:active {
    background:#fff;     
    color:#9DCBCC;
}

.forms{
    margin-bottom: 15px;
}

.nav-phone{
    position:fixed;
    width:100%;
    margin-top:120px;
    text-align: center;
    z-index: 8;
    visibility:hidden;
    opacity:0;
    transition-delay: all 0.08s ease-in-out;
    -webkit-transition: all 0.08s ease-in-out;
    -moz-transition: all 0.08s ease-in-out;
}

.nav-phone ul{
    margin:0px;
    padding:0px;
}

.nav-phone ul li{
    height:90px;
    line-height:90px;
    width:100%;
    list-style: none;
    font-size:20px;
    font-weight: 600;
/*    padding:30px 0px;*/
    text-transform: uppercase;
    letter-spacing: 1px;
    display:block;
}

.nav-phone ul li a{
    display:block;
    height:inherit;
    width:inherit;
    color:#9DCBCC;
}

.nav-phone ul li a:hover,
.nav-phone ul li a:active{
    color:#fff;
    background-color:#9DCBCC;
    -webkit-transition: all 0.3s linear;
       -moz-transition: all 0.3s linear;
        -ms-transition: all 0.3s linear;
         -o-transition: all 0.3s linear;
            transition: all 0.3s linear;
}

/* ========================================================
*	Home Page
* ========================================================= */

.home_article{
	max-width:100%;
	margin-top:50px;
	float:right;
}

.splash{
	max-width:70%;
	padding-right:30px;
	float:left;
}

.splash_art img{
    height:inherit;
    width:inherit;
    border-radius:5px;
	-webkit-transition: opacity 0.3s ease-in-out;
	-moz-transition: opacity 0.3s ease-in-out;
}

.splash_art{
	background-image:url(../Img/wedding/lavendar.png);
	background-size:690px 385px;
    background-repeat:no-repeat;
	border-radius:5px;
	height:385px; 
	width:690px;
	top:0px;
	left:0px;
	z-index:1;
}

.splash_art img:hover,
.splash_art img:active{
    opacity:0;
    cursor: pointer;
}

.splash_paragraph{
	padding-top:3%;
    height:auto;
}

.splash_quote{
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size:10px;
	padding:0 2%;
	padding-right:7%;
	float:left;
}

.splash_flavourText{
	max-width:63%;
/*	margin-left: 5%;*/
	margin-bottom: 5%;
	border-left:#d1d1d1 solid 1px;
	padding-left:7%;
	float:left;
}

.altImg{
	clear:left;
	float:left;
}

.altText{
	max-height: 100px;
	max-width: 210px;
	padding: 0px 0px 0px 12px;
	float: left;
}

.altText_inner{
	padding: 6px 0 0 0;
	font-size:11px;
}

.mobile_altText_inner{
	display:none;
}

.navPacks{
	float:right;
	clear:right;
	padding: 10px;
	background-color: #d0e2ea;
	border: #ccc solid 1px;
	margin-bottom:8px;
	-webkit-transition: background-color 0.3s ease-in-out;
	-moz-transition: background-color 0.3s ease-in-out;
	border-top-left-radius:15px;
	border-bottom-right-radius:15px;
	min-width:280px;
}

.navPacks:hover,
.navPacks:active{
    background:rgba(157, 203, 204, 1);
	cursor: pointer;
}

.navHead{
    color: #fff;
    font-weight:500;
	font-size: 24px;
	padding:5px;
}

.subheading{
    text-align: center;
    width:280px;
	clear:right;
/*	color:#527F80;*/
	color:#9DCBCC;
    font-weight:100;
	margin-bottom:20px;
    letter-spacing: 3px;
    padding: 8px 0px;
/*    border-top: #ddeded solid 1px;*/
    border-bottom: #ddeded solid 1px;
    text-transform: uppercase;
}

.home_subheading{
	font-size:10px;
    float: right;
}

.contact_subheading{
	font-size:12px;
}

.textLeft{
    text-align: left;
}

.textRight{
    text-align: right;
}

.floatLeft{
    float: left;
}

.floatRight{
    float: right;
}

/* ========================================================
*	Gallery Page
* ========================================================= */

a.gallery_links{
	color:#FFFFFF;
/*    text-shadow:0.5px 0.5px 0 #999;*/
}

.nav_gallery {
	margin-top:20px;
	margin-bottom:10px;
	float:left;
}

.nav_gallery ul a{
	text-decoration:none;
	color:#9DCBCC;
    font-weight:600;
    width:200px;
}

.nav_gallery{
    margin-left:0px;
}

.nav_gallery ul{
    float:left;
    margin-left:0px;
    padding-left:0px;
}

.nav_gallery ul li{
    float:left;
    list-style:none;
    padding:8px;
/*    border-top:#267480 solid 3px;*/
    border-top:#9DCBCC solid 1.5px;
    border-bottom:#9DCBCC solid 1.5px;
    border-right:#9DCBCC solid 1.5px;
    width:95px;
    text-align: center;
    text-transform: uppercase;
    font-size:10px;
    letter-spacing:0.6px;
}

.nav_gallery ul li:hover,
.nav_gallery ul li:active{
    color:#FFF;
    background-color:#9DCBCC;
    -webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
}

#nav_first{
    border-left:#9DCBCC solid 01.5px; 
}

.nav_selected{
    color:#FFF;
    background-color:#9DCBCC;
}

.nav_gallery #bride, .nav_gallery #groom, .nav_gallery #bridesmaid, .nav_gallery #accessories{
	display:inline;
	padding-right:15px;
	font-size:12px;
}

.nav_gallery a:hover, 
.nav_gallery a:active{
	color: #7FACAD;
}

.gallery{
    margin-top:10px;
	float:right;
}

.gallery_article{
	margin-top:20px;
	float:right;
}

.gallery_information{
    clear:left;
	float:left;
	max-width:38%;
	font-size:13px;
	margin-bottom:30px;
}

.galleryPacks{
	float:left;
	clear:right;
	padding: 14px;
	background-color: #d0e2ea;
	border: #ccc solid 1px;
	margin:5px;
	border-top-left-radius:15px;
	border-bottom-right-radius:15px;
	max-width:255px;
	-webkit-transition: background-color 0.3s ease-in-out;
	-moz-transition: background-color 0.3s ease-in-out;
}


.galleryPacks:hover, 
.galleryPacks:active{
    background:rgba(157, 203, 204, 1);
	cursor: pointer;
}

.galleryImg{
	clear:left;
	float:left;
}

.galleryText{
	clear: left;
	margin: 0 auto;
	
}

.galleryDescription{
	float:left;
	max-width:30%;
	padding-left:3%;
}

.dress_styles{
	color: #9DCBCC;
}

.dress_titles{
	font-weight:bold;
	font-size:17px;
}

/* ========================================================
*	Customization Page
* ========================================================= */

.customize_article{
	margin-top:100px;
	float:right;
}

.customize{
	clear:both;
	padding: 0% 0 0% 0;
}

.customize_image{
	padding: 0% 4% 0% 0;
}

.customize_content{
	background-color: #D5E4EB;
	border-radius:5px;
	margin: 2%;
	height: 250px;
	width:96%;
}

.customizeDescription{
	float:right;
	padding:15px;
	padding-top:25px;
	max-width:59%;
	font-size:13px;
    margin-bottom: 20px;
}

.customize_selections{
	font-size:16px;
	float:left;
	margin:2%;
}


.custom_nav{
	float:left;
	padding:20px;
	background-color:#9DCBCC;
	border: #D5E4EB solid 1px;
	border-right: #D5E4EB solid 2px;
	border-bottom: #D5E4EB solid 2px;
	height:50px;
	width:100%;
	border-radius:3px;
	color:#FFF;
	-webkit-transition: background-color 0.3s ease-in-out;
	-moz-transition: background-color 0.3s ease-in-out;
	
	-webkit-transition: color 0.1s ease-in-out;
	-moz-transition: color 0.1s ease-in-out;
}


.custom_nav:hover,
.custom_nav:active{
	background-color: #D5E4EB;
	cursor: pointer;
	color: #678c8d;
    font-weight: 600;
}


.customize_box{
	background-color: #9DCBCC;
	height:100%;
	width:59%;
	float:right;
	border-radius:5px;
}

.customize_subcontent{
	padding:0px 30px;
	float:left;
	max-width:82%;
}

.customize_subcontent .section_heading{
	font-size:18px;
	font-weight:bold;
	padding:15px 0px;
}


.styles, .color, .laces, .belts, .fabric{
	display:none;
}

/*--- Needs Javascript, sibling selectors do not work on hover ---*/

#original:hover ~ .dress_original{
	background-position: 0px 0px;
}

#dfa0ed:hover ~ .dress_original{
	background-position: -342px 0px;
}

#8792d0:hover ~ .dress_original{
	background-position: -648px 0px;
}

#f19f62:hover ~ .dress_original{
	background-position: -990px 0px;
}

#997c78:hover ~ .dress_original{
	background-position: -1332px 0px;
}

#5c59b5:hover ~ .dress_original{
	background-position: -1674px 0px;
}

.dress_original{
	background-image:url(../Img/customize/color/dress_colors.png);
	top:0px;
	left:0px;
    background-repeat:no-repeat;
	background-size:cover;
	
	height:512px;
	width:342px;

    float:left;
	z-index:1;
	display:block;
}

.dress_dfa0ed, .dress_8792d0, .dress_f19f62, .dress_997c78, .dress_5c59b5{
	display:none;
}

input[type="radio"]{
	display:none;
}


/*
input.payment_types[type="radio"]{
	display:inline;
}
*/

/* input.tabs[type="radio"]:checked  ~ .styles{
	display:none;
} */

input.i_original[type="radio"]:checked ~ .dress_original,
input.i_dfa0ed[type="radio"]:checked ~ .dress_dfa0ed,
input.i_8792d0[type="radio"]:checked ~ .dress_8792d0,
input.i_f19f62[type="radio"]:checked ~ .dress_f19f62,
input.i_997c78[type="radio"]:checked ~ .dress_997c78,
input.i_5c59b5[type="radio"]:checked ~ .dress_5c59b5{
	display:block;
}

.button_mode{
	cursor:pointer;
}


input.i_styles[type="radio"]:checked ~ .styles, #styles,
input.i_color[type="radio"]:checked ~ .color, #color,
input.i_laces[type="radio"]:checked ~ .laces, #laces,
input.i_belts[type="radio"]:checked ~ .belts, #belts,
input.i_fabric[type="radio"]:checked ~ .fabric, #f{
	display:block;
}

.c_image_groups{
    width:134px;
    height:82px;
	float:left;
	padding-right:6px;
	margin-right:4px;
	margin-bottom:10px;
	border:#9DCBCC solid 1px;
	border-radius:5px;
	cursor:pointer;
	-webkit-transition: background-color 0.3s ease-in-out;
	-moz-transition: background-color 0.3s ease-in-out;
	
	-webkit-transition: color 0.2s ease-in-out;
	-moz-transition: color 0.2s ease-in-out;
}

.c_image_groups:hover,
.c_image_groups:active{
	background-color:#9DCBCC;
	color:#fff;
}

.c_image{
	float:left;
	/*max-height:80px;
	max-width:60px;*/
}

.c_image img{
	max-height:80px;
/*	max-width:60px;*/
}

.c_text{
	padding:5px;
    padding-right:0px;
	float:left;
	max-height:80px;
	max-width:80px;
    font-size:11px;
/*	height:80px;*/
/*	width:65px;*/
}


.c_image_preview{
    display:none;
}


/* ========================================================
*	Designers Page
* ========================================================= */

.designers_article{
	margin-top:30px;
	float:right;
	clear:both;
	padding: 0;
}

.designers{
    width:100%;
    margin:0 auto;
}

.designers_image{
	padding: 0 2% 0 0;
	float:left;
}

#khalid .designers_text, #colin .designers_text{
	max-width:22%;
    float:left;
}

#khalid .designers_text{
	margin-right:8%;
	padding: 0 2% 0 0;
}

#colin .designers_text{
	margin:0px;
    padding:0px;
}

.process_sketch{
	clear:both;
}

.process_textLeft{
	max-width:40%;
	padding: 0 3% 2% 0; 
	float:left;
}

.process_textRight{
	max-width:60%;
	padding: 0 0 2% 0;
	float:left;
}

.text_heading{
	font-size:18px;
	font-weight:bold;
	padding-bottom:10px;
}

.profile_text{
	font-weight:normal;
}

/* ========================================================
*	Contact Page
* ========================================================= */

.contact_article{
	margin-top:20px;
}

.contact h2, .appointment h2{
	color: #678c8d;
}

.contact_image{
	margin: 25px 0 0 20px;
    padding:0px;
	float:right;
}

.contact_image img{
	border: #ccc solid 3px;
    float:right;
}

.contact_text{
    width:400px;
    float:left;
}


.contact_information{
	margin-bottom:25px;
    float:left;
}

.hours{
    margin-bottom:25px;
}

.hours .time {
	line-height: 25px;
}

.contact_form{
	padding-top: 20px;
}

.contact .days{
	font-weight:bold;
}

.appointment{
	padding: 0;
	clear:both;
}

.message{
	word-wrap: true;
}

.smallforms input{
    height:30px;
    width:616px;
}

.contact_buttons{
    width:616px;
}

::-webkit-input-placeholder { /* Textarea & Input */
    color: #bcbcbc;
}

:-moz-placeholder{ /* Firefox 18- */
    color: #bcbcbc;
}

::-moz-placeholder{ /* Firefox 19+ */
    color: #bcbcbc;
}

:-ms-input-placeholder{
    color: #bcbcbc;
}

textarea {
    height:100px;
    width:616px;
    resize: none;
}

/* ========================================================
*	Products Page
* ========================================================= */

.thumb_set{
	float:left;
	padding: 0% 3% 0% 0;
}

.product_article{
	margin-top:20px;
	float:right;
}

.product{
	clear:both;
}

.product_image{
	padding: 0% 2% 5% 0;
	float:left;
}

.product_mainImage img:nth-child(1){
    display:none;
}

.product_mainImage img:nth-child(2){
    display:inline-block;
}

.product_mainImage img:nth-child(3){
    display:none;
}

.product_image img{
    margin-left:10px;
}

.product_thumbs{
	float:left;
	clear:left;
	opacity: 0.3;
	padding: 0% 0% 10% 0;
	-webkit-transition: opacity 0.3s ease-in-out;
	-moz-transition: opacity 0.3s ease-in-out;
}

.product_thumbs:last-child{
	padding: 0;
}

.product_thumbs img{
	margin: 0% 0 6% 0%;
}

.product_thumbs:hover, 
.product_thumbs:last-child:hover{
	opacity: 1;
	cursor:pointer;
}

.product_thumbs:active, 
.product_thumbs:last-child:active{
	opacity: 1;
}

#wpGallery{
	display:inline;
    float:left; 
    padding:254px 0px;
    margin-top:0px;
	padding-right:15px;
	margin-right:2%;
	font-size:10px;
    font-weight:600;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity:0.5;
    color:#9DCBCC;
    
    -webkit-transition: all 0.3s linear;
   -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
     -o-transition: all 0.3s linear;
        transition: all 0.3s linear;
}

#wpGallery:hover,
#wpGallery:active{
    opacity:1;
}


#mpGallery, #mpContact, #mpCart{
	display:none;
}


#wpCart, #wpContact{
    height:40px; 
    width:200px;
    padding:12px;
    background:#9DCBCC;
    border:0 none;
    cursor:pointer;
    -webkit-border-radius: 5px;
    border-radius: 5px; 
    border:#9DCBCC solid 1px;
    color:#fff;
    font-size:10px;
    font-weight:600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
	-webkit-transition: background-color 0.3s ease-in-out;
	-moz-transition: background-color 0.3s ease-in-out;
    
    display:inline;
    float:left;
    text-align: center;
}

#wpContact{
    margin-top:20px;
}

#wpCart{
    margin-top:20px;
    padding:12px 25px;
}

#wpCart:hover, #wpContact:hover,
#wpCart:active, #wpContact:active{
    background:#fff;     
    color:#9DCBCC;
}

.nav_product{
	padding-top:100px;
}

.nav_product a{
	text-decoration:none;
	color:#267480;
}

.nav_product a:hover,
.nav_product a:active{
	color: #7FACAD;
}

.color_list ul li{
	display:inline;
}

#red{
	background-color:red;
}

#orange{
	background-color:orange;
}

#yellow{
	background-color:yellow;
}

#green{
	background-color:green;
}

#blue{
	background-color:blue;
}

#purple{
	background-color:purple;
}

#pink{
	background-color:pink;
}

#white{
	background-color:white;
	border:grey solid 1px;
}

.swatch{
	float:left;
	width:15px;
	height:15px;
	margin:0 1% 0 0;
}

.swatch:hover, #white:hover,
.swatch:active, #white:active{
	border:black solid 1px;
	cursor:pointer;
}

/* ========================================================
*	Shopping Page
* ========================================================= */
table tr .col1, table tr .col2, table tr .col3, table tr .col4, table tr .col5 {
    padding: 5px;
    padding-left: 15px;
}

table{
    width:100%;
}

table .row1, table .row4{
    background-color: #f5f5f5;
}

.item_number{
    text-align: center;
}

.item_pic{
    float: left;
}

.item_paragraph{
    float: left;
    margin-top:5px;
    margin-left:10px;
    padding: 10px;
}

.item_title{
    font-weight:600;
    font-size:15px;
    letter-spacing:1px;
}

.item_description{
    margin-top:5px;
}

.item_subdescription{
    margin-top:10px;
    font-size:10px;
}

.shopping_article{
	margin-top:20px;
}

.shopping{
	clear:both;
	padding: 3% 0 0% 0;
    padding: 0.3%;
	height:100%;
	width:90%;
	margin: 0 auto;
	background-color:#fff;
}

.shopping_image{
	float:left;
	border:#333 solid 2px;
}

.shopping_text{
	float:left;
	max-width:30%;
}
.cart_button{
    float:right;
    margin-top:15px;
}

.cart_back{
    float:left;
    margin-top:15px;
}

.cart_table{
    margin-bottom:15px;
}


/* ========================================================
*	Payment Page
* ========================================================= */

#paypal,#visa,#mastercard{
    opacity:0.5;
}

#purchase{
    margin-left:1px;
}

.payment_methods{
	padding:5%;
	padding-right:1%;
	cursor:pointer;
}

.payment_first_methods{
	padding-right:1%;
	cursor:pointer;
}

.payment_heading{
	font-size:24px;
	margin-top:5px;
	margin-bottom:3%;
	font-weight:bold;
}

.payment_misc{
	font-size:30px;
	padding:10px;
	padding-left:25%;
}

.special_row{
	border-top: #333 solid 1px;
}

.submit{
	padding-top:15px;
	float:right;
}

.back{
	padding-top:10px;
	float:left;
}

.cart_button{
	margin-bottom:5%;
}

table.receipt{
	max-width:400px;
}

.paypal:checked ~ #paypal{
     opacity:1;
}

.visa:checked ~ #visa{
     opacity:1;
}

.mastercard:checked ~ #mastercard{
     opacity:1;
}