/*
Site Colors:

#FFEEED - Base Color
#B98C89 - Darkest Color
#DABCBA - Medium Dark
#FFFAFA - Light Color
#FFFFFF - Lightest Color (White)



.color-primary-0 { color: #FFEEED }	 Main Primary color 
.color-primary-1 { color: #FFFFFF }
.color-primary-2 { color: #FFFAFA }
.color-primary-3 { color: #DABCBA }
.color-primary-4 { color: #B98C89 }

.color-secondary-1-0 { color: #909A9B }	 Main Secondary color (1)
.color-secondary-1-1 { color: #FDFDFD }
.color-secondary-1-2 { color: #C7CBCB }
.color-secondary-1-3 { color: #718385 }
.color-secondary-1-4 { color: #546E71 }

.color-secondary-2-0 { color: #E7EDDC }	 Main Secondary color (2)
.color-secondary-2-1 { color: #FFFFFF }
.color-secondary-2-2 { color: #F4F6F0 }
.color-secondary-2-3 { color: #C0CBAD }
.color-secondary-2-4 { color: #9CAC7F }


.rgba-primary-0 { color: rgba(255,238,237,1) }	Main Primary color 
.rgba-primary-1 { color: rgba(255,255,255,1) }
.rgba-primary-2 { color: rgba(255,250,250,1) }
.rgba-primary-3 { color: rgba(218,188,186,1) }
.rgba-primary-4 { color: rgba(185,140,137,1) }

.rgba-secondary-1-0 { color: rgba(144,154,155,1) }	Main Secondary color (1)
.rgba-secondary-1-1 { color: rgba(253,253,253,1) }
.rgba-secondary-1-2 { color: rgba(199,203,203,1) }
.rgba-secondary-1-3 { color: rgba(113,131,133,1) }
.rgba-secondary-1-4 { color: rgba( 84,110,113,1) }

.rgba-secondary-2-0 { color: rgba(231,237,220,1) }	Main Secondary color (2)
.rgba-secondary-2-1 { color: rgba(255,255,255,1) }
.rgba-secondary-2-2 { color: rgba(244,246,240,1) }
.rgba-secondary-2-3 { color: rgba(192,203,173,1) }
.rgba-secondary-2-4 { color: rgba(156,172,127,1) }


/* Second color sets 

  As hex codes 

.color-primary-0 { color: #B98C89 }
.color-primary-1 { color: #FFECEB }
.color-primary-2 { color: #DEBCB9 }
.color-primary-3 { color: #996763 }
.color-primary-4 { color: #6C403C }

.color-secondary-1-0 { color: #B9A089 }	
.color-secondary-1-1 { color: #FFF4EB }
.color-secondary-1-2 { color: #DECAB9 }
.color-secondary-1-3 { color: #997D63 }
.color-secondary-1-4 { color: #6C533C }

.color-secondary-2-0 { color: #987185 }	
.color-secondary-2-1 { color: #D8C6CF }
.color-secondary-2-2 { color: #B698A7 }
.color-secondary-2-3 { color: #7E5168 }
.color-secondary-2-4 { color: #593245 }

*/

/* As RGBa codes

.rgba-primary-0 { color: rgba(185,140,137,1) }	
.rgba-primary-1 { color: rgba(255,236,235,1) }
.rgba-primary-2 { color: rgba(222,188,185,1) }
.rgba-primary-3 { color: rgba(153,103, 99,1) }
.rgba-primary-4 { color: rgba(108, 64, 60,1) }

.rgba-secondary-1-0 { color: rgba(185,160,137,1) }
.rgba-secondary-1-1 { color: rgba(255,244,235,1) }
.rgba-secondary-1-2 { color: rgba(222,202,185,1) }
.rgba-secondary-1-3 { color: rgba(153,125, 99,1) }
.rgba-secondary-1-4 { color: rgba(108, 83, 60,1) }

.rgba-secondary-2-0 { color: rgba(152,113,133,1) }
.rgba-secondary-2-1 { color: rgba(216,198,207,1) }
.rgba-secondary-2-2 { color: rgba(182,152,167,1) }
.rgba-secondary-2-3 { color: rgba(126, 81,104,1) }
.rgba-secondary-2-4 { color: rgba( 89, 50, 69,1) }

*/


* {
    margin: 0;
}

.hero {
    background-color: #FFEEED;
    height: 150px;
    margin-bottom: 5px;
    width: 100%;
}

#logo_img {
    padding: 5px 0 0 0;
    position: relative;
}
#logo_img>a>img {
    border-radius: 50%;
    position: absolute;
    top: 8px;
}

#designer_title {
    position: absolute;
    top: 45px;
    left: 170px;
}

#designer_title>p {
    font-family: 'Satisfy', cursive;
    font-size: 25px;
}

#designer_title>p>small {
    font-family: sans-serif;
    font-size: 14px;
}

#banner_message {
    padding-top: 38px;
}

#cc_nav {
    padding-top: 38px;
}

#cc_nav>ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#cc_nav>ul>li {
    display: inline-block;
    margin: 0;
    padding: 0;
}

#cc_nav>ul>li>a {
    color: #111;
    display: inline-block;
    font-family: 'Satisfy', cursive;
    font-size: 32px;
    font-weight: 300;
    margin-left: 15px;
    padding: 8px;
    text-decoration: none;
}

h1,h2,h3,h4,h5,h6 {
    font-family: 'Satisfy', cursive;
}

.heading_display_1 {
    background-image: url(../../images/shopmystore.PNG);
    background-position: top;
    box-shadow: 1px 1px 15px 1px rgba(100, 100, 100, 0.6);
    height: 500px;
    position: relative;
    width: 100%;
}

.headline_1_bg {
    background-color: #eee;
    border-radius: 6px;
    box-shadow: 1px 1px 15px 8px rgba(20, 20, 20, 0.5);
    height: 220px;
    margin-top: 10%;
    opacity: 0.9;
    width: 100%;
    z-index: 1;
}

.headline_1_text {
    margin: auto;
    width: 255px;
    z-index: 1;
}

.headline_1_text>p {
    font-family: sans-serif;
    font-size: 16px;
}

.headlineBtn {
    background-color: #DABCBA;
    border: solid 1px #DABCBA;
    border-radius: 4px;
    color: #333;
    cursor: pointer;
    font-size: 24px;
    padding: 5px 25px;
    text-decoration: none;
    transition: 0.3s;
    width: 144px;
}

.headlineBtn:hover {
    background-color: #B98C89;
    border: solid 1px #B98C89;
    color: #333;
    text-decoration: none;
    transition: 0.3s;
}

.headlineBtn:active {
    background-color: #FFEEED;
    border: solid 1px #FFEEED;
    color: #333;
}

.heading_display_2 {
    background-image: url(../../images/shopemypersonalstash.PNG);
    background-position: top;
    background-size: cover;
    box-shadow: 0px 0px 15px 1px rgba(100, 100, 100, 0.6);
    height: 500px;
    position: relative;
    width: 100%;
}

.heading_display_2_msg,
.heading_display_3_msg,
.heading_display_4_msg,
.heading_display_5_msg {
    background-color: #FFF;
    display: none;
}

.heading_display_txt {
    font-family: sans-serif;
    font-size: 10px;
}

.heading_display_3 {
    background-image: url(../../images/clubcouture.PNG);
    background-position: top;
    background-size: cover;
    box-shadow: 0px 0px 15px 1px rgba(100, 100, 100, 0.6);
    height: 500px;
    position: relative;
    width: 100%;
}

.heading_display_4 {
    background-image: url(../../images/becomeadesigner.PNG);
    background-position: top;
    background-size: cover;
    box-shadow: 0px 0px 15px 1px rgba(100, 100, 100, 0.6);
    height: 500px;
    position: relative;
    width: 100%;
}

.heading_display_5 {
    background-image: url(../../images/joinmycraftgroup.PNG);
    background-position: top;
    background-size: cover;
    box-shadow: 0px 0px 15px 1px rgba(100, 100, 100, 0.6);
    height: 500px;
    position: relative;
    width: 100%;
}

.headline_banner {
    background-color: #FFF;
    color: #333;
    height: 72px;
    margin: auto;
    width: 432px;
}

.headline_banner>h4 {
    cursor: pointer;
    font-family: 'Satisfy', cursive;
    font-size: 28px;
    padding-top: 12px;
    text-align: center;
}

.contactBtn {
    background-color: #718385;
    border: solid 1px #718385;
    border-radius: 4px;
    color: #333;
    cursor: pointer;
    font-family: 'Satisfy', cursive;
    font-size: 20px;
    padding: 5px 25px;
    transition: 0.4s;
}

.contactBtn:hover {
    color: #FFF;
    font-family: 'Satisfy', cursive;
    transition: 0.4s;
}

.text-center {
    font-family: 'Satisfy', cursive;
}

.dataInput {
    position: relative;
    margin-bottom: 50px;
}

.dataDisplay {
    position: relative;
    margin-bottom: 50px;
}

.dataDisplay>.table>tbody>tr:nth-of-type(even) {
    background-color: #FFEEED;
}

.dataInput>.form-inline>.form-group>label {
    margin-right: 5px;
}

.dataInput>.form-inline>.form-group>input {
    margin-right: 8px;
}

.dataInput>form>button {
    background-color: #FFEEED;
    border: solid 1px #B98C89;
    padding: 10px 36px;
    transition: 0.6s;
}

.dataInput>form>button:hover {
    background-color: #DABCBA;
    transition: 0.6s;
}

.form-group+.btn {
    background-color: #FFF;
    border: solid 1px #FFEEED;
    transition: 0.5s;
}

.form-group+.btn:hover {
    border: solid 1px #DABCBA;
    transition: 0.5s;
}

.form-group+.btn:active {
    background-color: #B98C89;
    border: solid 1px #B98C89;
    transition: 0.1s;
}

.card>.A-header {
    background-color: #B98C89;
    cursor: pointer;
    transition: 0.6s;
}

.card>.A-header:hover {
    color: #FFF;
    transition: 0.6s;
}

.card>.B-header {
    background-color: #546E71;
    cursor: pointer;
    transition: 0.6s;
}

.card>.B-header:hover {
    color: #FFF;
    transition: 0.6s;
}

.card>.C-header {
    background-color: #9CAC7F;
    cursor: pointer;
    transition: 0.6s;
}

.card>.C-header:hover {
    color: #FFF;
    transition: 0.6s;
}

.card>.D-header {
    background-color: #996763;
    cursor: pointer;
    transition: 0.6s;
}

.card>.D-header:hover {
    color: #FFF;
    transition: 0.6s;
}

.card>.E-header {
    background-color: #997D63;
    cursor: pointer;
    transition: 0.6s;
}

.card>.E-header:hover {
    color: #FFF;
    transition: 0.6s;
}

label {
    width: 60px;
}