/*
Theme Name: 4md
Theme URI: http://www.habashydesigns.com/
Description: large slideshow of Architectural and landscape categories on left, company name and project thumbs on right. good state as on 062210 
Version: 2.0
Author: Naguib Habashy (Starter: Pupung Budi Purnama)
Tags: White, Gray, 2 Column
/*
/* GLOBAL CSS */
* {
	margin: 0;
	padding: 0;
}

body {
	text-align: center;
	background: #fff;
	color: #505050;
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	-webkit-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
}

h1, h2, h3, h4 {
	font-size: 1.4em;
}

h5{
	font-size: 1.4em;
}

h6{
	font-size: 1.3em;
	font-weight: normal;
	padding: 5px 5px 5px 5px;
	color: #333;
}

.ffix {
	clear: both;
}

a {
	color: #999;
	-webkit-transition: color .25s ease-in; /*safari and chrome */
	-o-transition: color 1s ease-in; /* opera */
	text-decoration: none;
}
a:hover {
	color:#505050;
}

img {
	border: none;
}

/* TYPOGRAPHY */
body {
	font-family: Arial, Helvetica, serif;
	font-size: 55%;
	padding: 5px 0;
}

#header h1 {
	font-size: 2.4em;
	font-weight: bolder;
	line-height: 1.4em;
	text-transform: uppercase;
}

.legend h2, .legend h3, #data h2, .news h2 {
	font: normal 1.2em Arial;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	width: 380px;

}

/*Controls the title Madderlake Designs on index.php page*/
.legend h3 {
	font-size: 2.0em;
	font-weight: normal;
	letter-spacing: 0.4em;
}

.notes a {
	border-bottom: 1px dotted #333;
}

.author {
	font-size: 1.2em;
}

.author strong {
	font-family: Arial, sans-serif, Helvetica;
}

/*Controls the message under Madderlake Designs on index.php page*/
.notes {
	font-size: 1.0em;
	letter-spacing: 0.7em;
	/*line-height: 0;*/
}

.notes_nag {
	font-size: 1.3em;
	line-height: 1.4em;
	color: #999;
	padding: 25px 0 0 0;
}
.notes_proj_txt {
	font-size: 1.3em;
	line-height: 1.4em;
	color: #999;
	padding: 5px 0 0 0;
}

.page_txt {
	font-size: 1.5em;
	float: left;
	text-align: justify;
	width: 520px;
	margin-top:  90px;
	padding: 15px 15px 15px 15px;
	line-height: 1.8em;
	color: #999;
}

.proj_txt {
	font-size: 1.0em;
	float: left;
	text-align: justify;
	width: 545px;
	margin-top:  10px;
	/*padding: 15px 15px 15px 15px;*/
	line-height: 1.4em;
	color: #333;
}

.page .notes {
	width: 500px;
}

p.text-right {
	font-size: 1.0em;
	text-align: justify;
	color: #999;
	position: absolute;
	margin: -65px 0 0 230px;
	float: right; 
	width: 140px; 
	height: 65px; 
}

p.projtext-archive {
	font-family: arial;
	font-size: 1.2em;
	text-align:left;
	text-transform: uppercase;
	color: #999;
	position: fixed;
	margin: -50px 0 0 130px;
	float: right; 
	width: 200px; 
	height: 65px; 
}



.notes p {
}

#data h2 {
	color: #352511;
	padding-left: 8px;
}

#data ul li, #data .resume p {
	font-size: 1.3em;
	color: #fff;
	line-height: 1.6em;
}
#list ul {
	list-style-type:none;
	width:400px;
	margin:0px;
	padding:0px;
	font-size: 1.3em;
	color: #fff;
	line-height: 1.6em;
}

#list ul li{
	float: left;
	width:280px;
	padding:0px;
}

#footer {
	font-size: 0.9em;
	font-family: Arial, sans-serif, Helvetica;
	text-transform: uppercase;
	padding-left:50px;
}

/* LAYOUT */
#container {
	width: 980px;
	margin: 0 Auto;
	text-align: left;
}
#header {	
	font-size: 1.2em;
	font-family: Arial, sans-serif, Helvetica;
	text-transform: uppercase;
}
#header h1 {
	font-size: 0.9em;
	color: #999;
	font-family: Arial, sans-serif, Helvetica;
	text-transform: uppercase;	
}
#header h1 a {
	display: block;
	width: 160px;
	height: 32px;
	float: left;
	text-indent: 7px;
}
.featured_articles {
	float: right;
	text-align: center;
	padding-top: 15px;
	width: 580px;/* controls the width of the whole right column*/
	padding-bottom: 50px;
	min-height: 300px;
}
.featured_news {
	float: right;
	text-align: center;
	padding-top: 15px;
	width: 380px;/* controls the width of the whole right column*/
	padding-bottom: 50px;
	min-height: 300px;
}
.featured_articles img {
	padding: 5px;/*border around thumbs*/
	background: #ebebeb;
}
.featured {
	text-align: center;
	padding-top: 15px;
	width: 980px;/* controls the width of the whole right column*/
	padding-bottom: 0px;
	min-height: 300px;
}
.featured_front {
	text-align: center;
	padding-top: 15px;
	width: 980px;/* controls the width of the whole right column*/
	padding-bottom: 0px;
	min-height: 380px;
}
.iframe-featured {
	text-align: center;
	padding-top: 15px;
	width: 950px;
	height: 300px;
	padding-bottom: 0px;
    margin:0px;
	min-height: 300px;
}

.featured img {
	padding: 5px;/*border around thumbs*/
	background: #ebebeb;
}
.featured_front img {
    margin:10px;
	padding: 5px;/*border around thumbs*/
	background: #ebebeb;
}
.photo {
	float: left;
}
.shadow-left {
}
.shadow-right {
	padding: 8px;
}
ul#photos {
	list-style: none;
	width: 560px; /*controls the width of the big left photo -- also set the photo width in index and single*/
	height: 295px;
}
.legend {/************************************************/
	float: right;
	margin-right: 0px;
	text-align: left;
	width: 380px; /* controls the width of the thumb right column*/
	padding-top: 15px;
}
.legend_nag {
	font-size: 1.1em;
	float: left;
	text-align: justify;
	width: 540px;/* controls the width of the 'problem and solution'text block under the big photo*/
	padding: 5px 5px 5px 15px;
}
.front_text {
	margin-top: 90px;
	font-family: Arial, Helvetica, serif;
	font-size: 150%;
	float: left;
	text-align: justify;
	width: 950px;/* controls the width of the 'problem and solution'text block under the big photo*/
	padding: 5px 5px 5px 15px;
}

.legend h2 {
	padding-bottom: 20px;
}
.legend h3 {
	
}
.notes p {
	padding-top: 20px;
}
.news h2 {
	padding-top: 15px;
}

#data {
	background: #ffffff;
	text-align: left;
}
#data .container {
	text-align: left;
	margin: 0 auto;
	width: 980px;
}
#data .container .top {
	height: 9px;
	clear: both;
}
#data .container .bottom {
	height: 9px;
	clear: both;
}
#data .about {
	padding: 25px 0;
	width: 150px;
}
#data .about, #data .category {
	float: left;
	padding-left: 5px;
}
#data .about li {
	clear: both;
}
#data .category {
	padding: 25px 0;
	width: 250px;
}
#data .category li {
	width: 100px;
}
#data ul {
	list-style: none;
	padding-top: 10px;
}
#data ul li {
	float: left;
}
#data ul li a {
	padding-left: 4px;/*place the arrow of current left of text*/
}
#data ul li a:hover, .current-cat, .active {
	/*background: url(images/current.png) no-repeat left center; /*arrow on left of all buttons*/
}
#data .resume {
	width: 380px;
	float: right;
	padding-top: 25px;
	padding-bottom: 25px;
}
#data .resume img {
	padding: 3px;
	float: left;
	background: #7b6851;
	margin-top: 5px;
	margin-left: 8px;
}
#data .resume h2 {
	padding-bottom: 10px;
}
#data .resume p {
	float: right;
	width: 310px;
}

/* Footer Text Color */
#data a {
	color: #999;
}
/* End Footer Text Color */

#data .resume a {
	border-bottom: 1px dotted #efefef;
}
#footer {
	padding: 15px;
}

/*Category Page -- controls the width of the cat. thumb. column*/
div.category-list {
	width: 120px;
	float: left;
	padding-top: 15px;
	padding-left: 10px;
}

div.category-list .pic{
	width: 125px;
	height: 64px;
	background: #fff;
	float: left;
	margin-right: 0px;
	margin-bottom: 8px;
}

/*Articles Page -- controls the width of the cat. thumb. column*/
div.articles-list {
	width: 250px;
	float: left;
	padding-top: 15px;
	padding-left: 10px;
}

div.articles-list .pic{
	width: 125px;
	height: 64px;
	background: #fff;
	float: left;
	margin-right: 0px;
	margin-bottom: 8px;
}

.thumb_pic{
	width: 125px;
	height: 64px;
	background: #fff;
	float: left;
	margin-right: 0px;
	margin-bottom: 8px;
}

div.news .pic { /*************************** thumbs space size*/
	width: 64px;
	height: 68px;
	background: #fff;
	float: left;
	margin-right: 12px;
	margin-bottom: 8px;
}

.pic a img {
	border: none;
}

.thumb_pic a img {
	border: none;
}

.thumb_pic a:hover img {
	background: #666;
}

.pic a:hover img {
	background: #666;
}


/*paging*/
.navigation {
	clear: both;
	font: normal 1.0em Arial;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	padding-right: 44px;
}
.title_nag {
	clear: both;
	font: normal 1.0em Arial;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	padding-right: 44px;
}
.alignleft {
	text-align: left;
}
.alignright {
	text-align: right;
}
.navigation .alignleft {
	width: 40%;
	float: left;
}
.navigation .alignright {
	width: 40%;
	float: right;
}
.single .navigation {
	width: 500px;
	padding: 0 10px;
}

.tag
{
    margin:0;
    color:#66bbd4;
    height:auto;
    width:auto;
    float: right;
    font-family:Tahoma;
}
.thumb_pic
{
    margin:0;
    height:auto;
    width:260px;
    float: left;
}


/* CSS: (StyleSheet) */

#imgPreviewWithStyles {
    background: #666;
    padding: 5px;
    z-index: 999;
    border: none;
}

/* Text below image */
#imgPreviewWithStyles span {
    color: black;
    text-align: center;
    display: block;
    padding: 10px 0 3px 0;
}

/*category items font size: by nag*/
.cat-item a {font-size:14px;}
.cat-item ul li a {font-size:14px;}
.cat-item ul ul li a {font-size:14px;}



#footer-sidebar {
  border: 0px solid #cccccc;
  display:block;
  height: 160px;
  font-size: 1.0em;
}


/*footer menu by nag */
.underlinemenu{
font: normal 1.1em Arial;
letter-spacing: 0.1em;
text-transform: uppercase;
width: 980px;
}

.underlinemenu ul{
padding: 2px 0 5px 0; /*6px should equal top padding of "ul li a" below, 7px should equal bottom padding + bottom border of "ul li a" below*/
margin: 0;
text-align: right; /*set value to "left", "center", or "right"*/
}

.underlinemenu ul li{
display: inline;
}

.underlinemenu ul li a{
color: #494949;
padding: 2px 3px 4px 3px; /*top padding is 2px, bottom padding is 4px*/
margin-right: 20px; /*spacing between each menu link*/
margin-left: 5px; /*start point of footer menu*/
text-decoration: none;
border-top: 4px solid white; /*bottom border is 3px*/
}


.underlinemenu ul li a:hover, .underlinemenu ul li a.selected {
border-top-color: red;
}

.underlinemenu ul li a:active {
color: #ffffff;
background-color: #003366;
border: 1px #ffffff inset;
}





.underlinemenu .alignright {
	float: right;
}



/********** SUBMENU *****************/
.submenu{
font: normal 1.1em Arial;
letter-spacing: 0.1em;
text-transform: uppercase;
width: 340px;
}

.submenu ul{
padding: 2px 0 5px 0; /*6px should equal top padding of "ul li a" below, 7px should equal bottom padding + bottom border of "ul li a" below*/
margin: 0;
text-align: right; /*set value to "left", "center", or "right"*/
}

.submenu ul li{
display: inline;
}

.submenu ul li a{
color: #494949;
padding: 2px 3px 4px 3px; /*top padding is 2px, bottom padding is 4px*/
margin-right: 0px; /*spacing between each menu link*/
margin-left: 35px; /*start point of footer menu*/
text-decoration: none;
border-top: 4px solid white; /*bottom border is 3px*/
}

.submenu ul li a:hover, .submenu ul li a.selected {
border-top-color: red;
}

.submenu ul li a:active {
color: #ffffff;
background-color: #003366;
border: 1px #ffffff inset;
}

.submenu .alignright {
	float: right;
}


/************* END OF SUBMENU ***************/


/*project titles' dropdown navigation style */

ul#navlist {
	font-family: arial;
}

ul#navlist a
{
font-weight: normal;
text-decoration: none;
}

ul#navlist, ul#navlist ul, ul#navlist li
{
margin: 0px;
padding: 0px;
list-style-type: none;
}

ul#navlist li { float: left; }

ul#navlist li a
{
color: red;
background-color: #ffffff;
padding: 3px;
border: 0px #ffffff outset;
}

ul#navlist li a:hover
{
    height:auto;
color: #333333;
background-color: #ebebeb;
}

ul#navlist li a:active
{
color: #ffffff;
background-color: #003366;
border: 1px #ffffff inset;
}

ul#subnavlist { 
	display: none;
	-o-transition:all 1s ease-in;
    -webkit-transition:all 1s ease-in;
    -moz-transition:all 1s ease-in;
    height:0px;
    overflow:hidden;
    opacity:0;
}

ul#subnavlist li { 
	float: none;
}

ul#subnavlist li a {
	padding: 0px;
	margin: 0px;
}

ul#navlist li:hover ul#subnavlist
{
display: block;
position: relative;
font-size: 1.2em;
padding-top: 2px;
	-webkit-transition: height 1s ease-in;height:auto;
opacity:.75;
}


ul#navlist li:hover ul#subnavlist li a
{
display: block;
width: 369px;
border: none;
padding: 5px;
}

ul#navlist li:hover ul#subnavlist li a:before {
	content: "  ";
}
/*end of project titles' dropdown navigation style */

	#wrap-archive {
		float:left;
		width:350px;
		height: 78px;
		margin:0px;
		background:#fff;
		/*overflow: auto;*/
	}
	
	#wrap-archive-txt {
		margin-left:125px;
		text-align:left;
		color: #999;
		padding: 5px 0px 0 15px;
		width:200px;
		height:65px;
	}
	
	#wrap {
		float:left;
		width:350px;
		height: 520px;
		margin:20px;
		background:#fff;
		overflow: auto;
	}
	
	#wrap_wide {
		float:left;
		width:550px;
		height: 520px;
		margin-left:20px;
		background:#fff;
		overflow: auto;
	}
	#wrap_wider {
		float:left;
		width:950px;
		height: 520px;
		margin-left:20px;
		background:#fff;
		overflow: auto;
	}
	#main {
		float: left;
		margin-bottom: 10px;
		width: 85px;
		height: 110px;
		background:#eee;
		padding: 5px;
	}
	#sidebar {
		float: right;
		margin-bottom: 10px;
		padding: 5px;
		width:220px;
		height: 110px;
		background:#fff;
	}
	#sidebar-text {
		float: right;
		margin-bottom: 10px;
		padding: 5px;
		width:220px;
		background:#fff;
	}


#hor-minimalist-d
{
    font-family: arial;
    font-size: 9px;
    background: #fff;
    width: 930px;
	margin-left:20px;
    border-collapse: collapse;
    text-align: left;
}
#hor-minimalist-d th
{
    font-size: 14px;
    font-weight: normal;
    color: #fff;
    padding: 10px 8px;
    border-bottom: 0px solid #6678b1;
}
#hor-minimalist-c
{
    font-family: arial;
    font-size: 9px;
    background: #fff;
    width: 530px;
	margin-left:20px;
    border-collapse: collapse;
    text-align: left;
}
#hor-minimalist-c th
{
    font-size: 14px;
    font-weight: normal;
    color: #039;
    padding: 10px 8px;
    border-bottom: 2px solid #6678b1;
}
#hor-minimalist-e
{
    font-family: arial;
    font-size: 9px;
    background: #fff;
    width: 930px;
    border-collapse: collapse;
    text-align: left;
}
#hor-minimalist-e th
{
    font-size: 9px;
    font-weight: normal;
    color: #039;
    padding: 10px 8px;
    border-bottom: 0px solid #6678b1;
    width: 250px;
}
#hor-minimalist-e tr
{
    border-bottom: 0px solid #6678b1;
}
#hor-minimalist-e td
{
    border-bottom: 0px solid #ccc;
    color: #666;
    padding: 6px 8px;
    width: 250px;
}
#hor-minimalist-e tbody tr:hover td
{
    color: #999;
}

#hor-minimalist-b
{
    font-family: arial;
    font-size: 9px;
    background: #fff;
    width: 430px;
    border-collapse: collapse;
    text-align: left;
}
#hor-minimalist-b th
{
    font-size: 9px;
    font-weight: lighter;
    color: #039;
    padding: 10px 8px;
    border-bottom: 0px solid #6678b1;
}
#hor-minimalist-b td
{
    border-bottom: 0px solid #ccc;
    color: #666;
    padding: 6px 8px;
}
#hor-minimalist-b tbody tr:hover td
{
    color: #999;
}



	
/* Start Logo Animation */
        #logo_container {
            position: relative;
            width: 980px;
            height: 30px;
            padding: 0px;
            margin: 0 auto;
            margin-left:10px;
            //border: 1px solid #eee;
        }
            div#boxRED {
                width: 60px;
                height: 12px;
                background-color: #da521f;
            	position: absolute;
            	-webkit-box-shadow: 0 0 1em rgba(0, 0, 0, 0.0);
            }
            .bounceRED {
                -webkit-animation-name: bounceR;
                -webkit-animation-duration: 1s;
                -webkit-animation-iteration-count: 1;
                -webkit-transform: translateY(15px);
            }
            
            @-webkit-keyframes bounceR {
            from{
                    -webkit-transform: translateY(15px);
                    opacity:0;
                }
            25% {
                    -webkit-transform: translateY(65px);
                    opacity:.10;
                }
            75% {
                    -webkit-transform: translateY(8px);
                    opacity:.25;
                }
             to {
                    -webkit-transform: translateY(15px);
                    opacity:1;
                }
            }
            
            div#boxBROWN {
                width: 60px;
                height: 12px;
                background-color: #6b5941;
                position: absolute;
                -webkit-box-shadow: 0 0 1em rgba(0, 0, 0, 0.0);
            }
            
            .bounceBROWN {
                -webkit-animation-name: bounceB;
                -webkit-animation-duration: 1s;
                -webkit-animation-iteration-count: 1;
                -webkit-transform: translateY(15px);
            }
            
            @-webkit-keyframes bounceB {
            from{
                    -webkit-transform: translateY(15px);
                    opacity:0;
                }
            25% {
                    -webkit-transform: translateY(-35px);
                    opacity:.10;
                }
            75% {
                    -webkit-transform: translateY(22px);
                    opacity:.25;
                }
             to {
                    -webkit-transform: translateY(15px);
                    opacity:1;
                }
            }
            
            
            .bounceMadderlake {
                //border: 1px solid #eee;
                width:185px;
                font-size:14px;
                letter-spacing:1px;
                position: absolute;
                -webkit-animation-name: bounceMD;
                -webkit-animation-duration: 1.75s;
                -webkit-animation-iteration-count: 1;
                -webkit-transform: translateY(13px);
            }
            
            @-webkit-keyframes bounceMD {
            from{
                    -webkit-transform: translateY(15px);
                    opacity:0;
                }
            55% {
                    -webkit-transform: translateY(45px);
                    opacity:0;
                }
             to {
                    -webkit-transform: translateY(13px);
                    opacity:1;
                }
            }
            
            
            .bounceArch {
                //border: 1px solid #eee;
                width:120px;
                font-size:14px;
                letter-spacing:1px;
                position: absolute;
                -webkit-animation-name: bounceArch;
                -webkit-animation-duration: 2s;
                -webkit-animation-iteration-count: 1;
                -webkit-transform: translateY(13px);
            }
            
            @-webkit-keyframes bounceArch {
            from{
                    -webkit-transform: translateY(15px);
                    opacity:0;
                }
            55% {
                    -webkit-transform: translateY(45px);
                    opacity:0;
                }
             to {
                    -webkit-transform: translateY(13px);
                    opacity:1;
                }
            }
            
            
            .bouncePlus {
                //border: 1px solid #eee;
                width:10px;
                font-size:14px;
                position: absolute;
                -webkit-animation-name: bouncePlus;
                -webkit-animation-duration: 1s;
                -webkit-animation-iteration-count: 1;
                -webkit-transform: translateY(13px);
            }
            
            @-webkit-keyframes bouncePlus {
            from{
                    -webkit-transform: translateY(15px);
                    opacity:0;
                }
            75% {
                    -webkit-transform: translateY(15px);
                    opacity:0;
                }
             to {
                    -webkit-transform: translateY(13px);
                    opacity:1;
                }
            }
            
            
            .bounceLand {
                //border: 1px solid #eee;
                color:#eee;
                width:92px;
                font-size:14px;
                letter-spacing:1px;
                position: absolute;
                -webkit-animation-name: bounceLand;
                -webkit-animation-duration: 2.25s;
                -webkit-animation-iteration-count: 1;
                -webkit-transform: translateY(13px);
            }
            
            @-webkit-keyframes bounceLand {
            from{
                    -webkit-transform: translateY(15px);
                    opacity:0;
                }
            25% {
                    -webkit-transform: translateY(45px);
                    opacity:0;
                }
             to {
                    -webkit-transform: translateY(13px);
                    opacity:1;
                }
            }

            .bounceCopyright {
                //border: 1px solid #eee;
                width:180px;
                font-size:11px;
                position: absolute;
                -webkit-animation-name: bouncePlus;
                -webkit-animation-duration: 1s;
                -webkit-animation-iteration-count: 1;
                -webkit-transform: translateY(13px);
            }

            .bounceFacebook {
                border: 1px solid #eee;
                width:61px;
                height:20px;
                //background-image:url('http://www.madderlakedesigns.com/newmd/facebook-logo.png');
				background-repeat:no-repeat;
                position: absolute;
                -webkit-animation-name: bouncePlus;
                -webkit-animation-duration: 0s;
                -webkit-animation-iteration-count: 1;
                -webkit-transform: translateY(8px);
            }

/* End of Logo Animation */

/*Start Image Crossing Animation*/
figure {
  width: 120px;
  float: left;
  margin: 430 20px 0 0;
  background: white;
  border: 5px solid white;
  -webkit-box-shadow: 0 3px 10px #ccc;
  -moz-box-shadow: 0 3px 10px #ccc;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  position: relative;
   top:auto;

}

figcaption {
  text-align: center;
  display: block;
  font-size: 12px;
  font-style: italic;
}

figure img {
  width: 100%; /* Scale down */
}

figure:hover {
	-webkit-user-select: none;
	-webkit-touch-callout: none;	
	-webkit-transform: rotate(0deg);
	-webkit-box-shadow: 0 1px 3px #666;
	-moz-transform: rotate(0deg);
	-moz-box-shadow: 0 1px 3px #666;
}

figure:focus {
  	outline: none;
	-webkit-transform: translate(220px, 300px) rotate(0deg) scale(4);
	-moz-transform: rotate(0deg) scale(4);
	-webkit-box-shadow: 0 1px 3px #666;
	-moz-box-shadow: 0 1px 3px #666;
		-webkit-transform-origin: bottom left;
	z-index: 9999;
}

#cf {
	position:absolute;
	/*height:350px;
	width:950px;
	margin-top:30px;*/	
}
#cf img {
	position:absolute;
	left:0;
	-webkit-transition: opacity 1s ease-in-out;
	-moz-transition: opacity 1s ease-in-out;
	-o-transition: opacity 1s ease-in-out;
	transition: opacity 1s ease-in-out;
}

#cf img.top:hover {
	opacity:0;
}


/****************************************************/


#cf4 {
	position:absolute;
	/*height:381px;
	width:850px;*/
	margin:0 auto;
}
#cf4 img {
	position:absolute;
	left:0;
	-webkit-transition: all 1.25s ease-in-out;
	-moz-transition: all 1.25s ease-in-out;
	-o-transition: all 1.25s ease-in-out;
	transition: all 1.25s ease-in-out;
}
	
#cf4 img.top {
	-webkit-transform:scale(0.0,0.0);
	opacity:0.0;
}
	
#cf4:hover img.top, #cf4.hover_effect img.top {
	opacity:1;
	-webkit-transform:scale(1,1);
	-webkit-transform-origin: top right;		
}
	
#cf4:hover img.bottom, #cf4.hover_effect img.bottom {
	-webkit-transform:scale(0,0);
	-webkit-transform-origin: bottom left;
}

#cf4_txt{
	display: block; 
	width: 280px;
	float: right; 
	position: relative; 
	text-align: left; 
	font-size:18px; 
	color: #ccc;
}

/*end of Image Cross Animation*/

.allcaps {
font-variant: small-caps;
text-transform: uppercase;
}