/*

Theme Name: Slider_Childteme
Description: This is childtheme of the Slider Theme.
Author: Tanya Rix
Version: 0.0.1
Template: SliderResponsiveTheme

*/
@import url('../SliderResponsiveTheme/style.css');

h1.single_title {
    margin: 0 0 15px;
    font-size: 24px;
    font-weight: bold;
}

h4 {
    font-size: 16px;
	font-weight: normal;}

.page{
	padding: 25px 25px;
  	font-size: 14px;
 	background-color: #fff;
 	margin-top: 25px;
	height: auto;}

.project  {
	margin: auto;
	padding: 0;
	list-style-type: none;
	width: 100%;}

.project::after {
    display: block;
    clear: both;
    content: ' ';}	

.project  li{
	float: left;
	padding-right: 13px;
	padding-bottom: 8px;}


.project  li:nth-child(3n){
	
	padding-right: 0px;}

/*Categories*/

.categories_list ul, .categories_list li  {
	list-style:  none;
	padding: 0}

.categories_list ul::after {
    clear: both;
    display: block;
    content: ' ';}

.categories_list ul li {
	float: left;}	

.categories_list ul li::after{
	content: " | ";
	padding: 10px;}	

.categories_list ul li:last-child::after{
	content: "  ";}	

.categories_list a{
	font-size: 12px}
	
/*Sidebar*/
#sidebar ul{
	list-style: none;
	padding-left: 0;
	margin-left: 0;}

#sidebar ul li{
	float: left;
	padding: 0 5px;
	border-left: 1px solid #000;}
	
#sidebar ul li:first-child{
	border-left: none;}


/* Animation */

.postid-589 #main_container .blog_box .left::before{
	display: block;
    content: " ";
    background-color: #dd6d16;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    animation-name: overlaybefore;
    animation-duration: 3s;
    opacity: 0; 
    z-index: 2;
	border-radius: 5px;
}

.postid-589 #main_container .blog_box .left::after{
	display: block;
	content: " ";
	background-color: #dd6d16;
	height: 100%;
	 width: 100%;
	position: absolute;
	top: 0px;
	animation-name: overlayafter;
	animation-duration: 3s;
	animation-delay: 3s;
	opacity: 0;
	border-radius: 5px;
}


.postid-589 #main_container .blog_box .left{
	position: relative;
	animation-name: boxin;	
	animation-duration: 3s;
}


.postid-589 #main_container .blog_box a img {
	animation-name: imgComingIn;
	position: relative;
	animation-duration: 7s;
}


@keyframes overlaybefore {
	0%{ width: 0%; opacity: 1; }	
    100% { width: 100%; opacity: 1;}
}

@keyframes overlayafter {
	0% { width: 100%; right: 0px; opacity: 1;}
	100% { width: 0px; right: 0px; opacity: 1;}
}

@keyframes imgComingIn {
	0% { opacity: 0;   }
	40%{opacity: 0;}
	100% {opacity: 1;}
	
}

@keyframes boxin {
	0%{ left: -500px; }
	100%{ left: 0; }
	
}