/*


01.....BODY
02.....CONTENT
03.....FOOTER
04.....LAYOUT

*/


/* =================== BODY =================== */

#body {
    background-image:url("img/bg_4.png");       /* Available bg_1, bg_2, bg_3 & bg_4 */
    background-attachment:fixed;
    width:100%;
    height:100%;
}

#body h1.scroll-text {
    color:#888;
    outline-color:black;
    outline-width:thin;
    position:fixed;
    width:100%;
    text-align:center;
    top:20%;
    font-weight:100;
}

/* Theme Main Accent Colour */
#body h1, #body h2, #body h3, #body h4, #body h5, #body h6 {color:#A40837; font-weight:200;}
#body h1, #body h2, #body h3 {font-weight:100;letter-spacing:1px;}
#body b{color:#A40837;}
#body small, .small {letter-spacing:1px;}
#body label {font-size:16px}

#body button {font-weight:100; letter-spacing:2px; background-color:#A40837; border-color:#640622;}
#body a .button {font-weight:100; letter-spacing:2px; background-color:#A40837; border-color:#640622;}
#body li.button {font-weight:100; letter-spacing:2px; background-color:#A40837; border-color:#640622;}

#body input:focus, #body textarea:focus {
    -webkit-box-shadow: 0 0 5px #A40837;
    -moz-box-shadow: 0 0 5px #A40837;
    box-shadow: 0 0 5px #A40837;
    border-color: #A40837; }

/* Theme Secondary Accent Color */
#body .subheader {color:grey;}


/* ================= END BODY =================== */


/* =================== CONTENT =================== */

#content {  
    margin:0 auto;
    margin-bottom:20px;
    max-width: 960px;
    padding-left:4px;
    padding-right:4px;
    z-index:1;
    position:relative;    
}


.item-container {
    padding:20px 10px 20px 10px;
    margin-top:40px;
    background-image: url(img/paper_3.png);             /* Available paper_1 & paper_2 & paper_3 */
    box-shadow:0px 10px 20px rgba(29, 29, 29, 0.43);
    
    border-bottom-color:#A40837;
    border-bottom-style:solid;
    border-bottom-width:thick;
    
    border-top-color:#A40837;
    border-top-style:solid;
    border-top-width:thick;
    
}

.item-container small {
    font-size:16px;
}

.item-container.contact {
    border-top-style:solid;
    border-top-width:thick;
    padding:20px 10px 40px 10px;
}

.item-container.contact small, .small {
    font-size:12px;
}

.center {
    text-align: center;
}

#Grid .mix{
	display: none;
    vertical-align:top;
    margin:20px 20px 20px 0px;
}

/* ================= END CONTENT =================== */


/* =================== FOOTER =================== */

#footer {
    text-align:center;
    position:relative;
    margin-top:240px;
    margin-bottom:50px;
    bottom:120px;
    z-index:0;
}

#footer a {
    color:#A40837;
}


/* ================= END FOOTER =================== */


/* =================== LAYOUT =================== */

.clear {
    clear:both;
}

.social-image {
    display:inline-block;
    height:24px;
    width:auto;
    margin:auto;
}

.center-div {
    margin:0 auto;
}

.user-image {
    margin-top:18px;
    border-color:#A40837;
    border-style:solid;
}

.progress.custom .meter {
    background: #A40837;
    height: 100%;
    display: block;
}

.mywork-description {
    padding:5px 5px 30px 5px;
}

/* Filter Control */
.controls {
    margin:10px 0px 15px 18px;
}


/* Hover Image */
.img-container { 
	width: 100%; 
	border: 1px solid #ccc; 
	position: relative; 
    margin: 5px 0px 5px 0px;
    border-radius:50%;
}

.img-container:hover {
    transition-duration: 0.5s; 			/* W3C */	
	-webkit-transition-duration: 0.5s;  /* Google Chrome/Safari Support */
	-moz-transition-duration: 0.5s; 	/* Mozilla Firefox Support */ 
	-o-transition-duration: 0.5s; 		/* Opera Support */
    border:2px solid #A40837;
}

.hover-image {
    width:100%;
    height:auto;
    display:block;
    margin:auto;
    top:0;
}


/* Envelope */
.envelope {
    position:fixed;
    bottom:0;
}

.envelope-top {
    position:fixed;
    bottom:-82px;
    height:auto;
    width:100%;
    z-index:0;
}

.envelope-top img {
    position:relative;
    top:auto;
    width:100%;
    display:block;
    margin-left:auto;
    margin-right:auto;
    width:auto;
    height:auto;
}

.envelope-bottom {
    position:fixed;
    bottom:-82px;
    height:auto;    
    width:100%;
    z-index:1;
}

.envelope-bottom img {
    position:relative;
    top:auto;
    width:100%;
    display:block;
    margin-left:auto;
    margin-right:auto;
    width:auto;
    height:auto;
}


/* ================= END LAYOUT =================== */