/*
    Description: 	Flat Horizontal Accordion 
    Author: 		InsideLab
    Version: 		1.0
*/
/*	--------------------------------------------------
	:: Body & Container
	-------------------------------------------------- */
	
/*		overflow:scroll; */

	.container_accordion {
	    position:relative;
	    margin:100px auto;
	    width:960px;
	}
	
/*	--------------------------------------------------
	:: Accordion
	-------------------------------------------------- */

    .accordion {
	    position:relative;
	    display:block;
		width:100%;
	    margin:0;
	    padding:0;
    }

    .accordion div.accordion-label input {
		position:absolute;
        display:none;
	}

    .accordion div.accordion-label > label {
	    position:relative;
	    display:block;
		float:left;
		width:20px;
		height:300px;
	    padding:20px 15px;
        margin:0;
        font-style:normal; 
	    font-weight:normal; 
	    font-family:"Open Sans"; 
	    font-size:14px;
		color:#fff;
		z-index:9999;
		cursor:pointer;
    }
	
	.accordion div.accordion-label label h4{	
		padding:0;
        margin:10px 0 0 0;
        font-style:normal; 
	    font-weight:normal; 
        font-family: 'Open Sans', Arial, Helvetica, sans-serif;
        text-transform:uppercase;
	    font-size:14px;
	    color:#fff;
	    text-decoration:none;
	    -webkit-transform:rotate(90deg);
	       -moz-transform:rotate(90deg);
	         -o-transform:rotate(90deg);
	            transform:rotate(90deg);
		-webkit-transform-origin:50% 50%;
	       -moz-transform-origin:50% 50%;
	        -ms-transform-origin:50% 50%;
             -o-transform-origin:50% 50%;
	            transform-origin:50% 50%;		
    }
	
    .accordion div.accordion-label label i{
		color:#fff; 
	    font-style:normal; 
	    font-weight:normal;
        font-size:14px;	
		vertical-align:bottom;
        margin-left:2.5px;		
    }
	
	.accordion div.accordion-label.arrow input:checked ~ label:before{
	    content:"";
	    position:absolute;
	    top:27px;
	    left:49px;
	    width:0;
	    height:0;
		z-index:9999;
    }
	
/*	--------------------------------------------------
	:: Sections
	-------------------------------------------------- */
	
	.accordion ul.accordion-section-one,
    .accordion ul.accordion-section-two,
    .accordion ul.accordion-section-three,
    .accordion ul.accordion-section-four,
    .accordion ul.accordion-section-five {
	    position:relative;
		display:block;
	    float:left;
		height:340px;
	    line-height:1;
		margin:0;
		padding:0;
		border:none;
		z-index:99;
		text-align:left;
		list-style:none;
		width:700px;
		-webkit-box-sizing:border-box;
	       -moz-box-sizing:border-box; 
	            box-sizing:border-box;	
    }
	
	.accordion > div.accordion-label ul.accordion-section-one,
    .accordion > div.accordion-label ul.accordion-section-two,
    .accordion > div.accordion-label ul.accordion-section-three,
    .accordion > div.accordion-label ul.accordion-section-four,
    .accordion > div.accordion-label ul.accordion-section-five {
	    width:0;
	    overflow:hidden;
		-webkit-transition: all 0.6s ease-in-out;
           -moz-transition: all 0.6s ease-in-out;
		     -o-transition: all 0.6s ease-in-out;
		        transition: all 0.6s ease-in-out;
    }
	
	.accordion > div.accordion-label > input.tab-1:checked ~ ul.accordion-section-one { width:700px; } 
    .accordion > div.accordion-label > input.tab-2:checked ~ ul.accordion-section-two { width:700px; }
    .accordion > div.accordion-label > input.tab-3:checked ~ ul.accordion-section-three { width:700px; }
    .accordion > div.accordion-label > input.tab-4:checked ~ ul.accordion-section-four { width:700px; }
    .accordion > div.accordion-label > input.tab-5:checked ~ ul.accordion-section-five { width:700px; }
	
/*	--------------------------------------------------
	:: Media Holder
	-------------------------------------------------- */
	
	.media-holder {
	    position:relative;
		display:block;
		margin:0;
		padding:0;
		width:700px;
    }

    .media-holder img{
	    width:100%;
		height:340px;
    }

    .media-container iframe,  
    .media-container object,  
    .media-container embed {
	    position:absolute;
	    top:0;
	    left:0;
	    width:700px;
	    height:340px;
    }	
	
/*	--------------------------------------------------
	:: Direction Navigation
	-------------------------------------------------- */

	.navigation .next:before{
	    position:absolute;
		content:"";
        cursor:pointer;	
        background-image:url(../Images/right.png);
        background-repeat:no-repeat;
		background-position:0 0;
        width:40px;	
        height:80px;
		top:130px;
		right:30px;
		background-color:rgba(0,0,0,0.2);   
    }
	
	.navigation .next:hover:before{	
        background-color:rgba(0,0,0,0.4);   
    }
	
    .navigation .prev:before {
        position:absolute;	
        content:"";
        cursor:pointer;	
        background-image:url(../Images/left.png);
        background-repeat:no-repeat;
		background-position:0 0;
        width:40px;	
        height:80px;
		top:130px;
		left:30px;
		background-color:rgba(0,0,0,0.2);
    }

    .navigation .prev:hover:before {	
		background-color:rgba(0,0,0,0.4);
    }
	
/*	--------------------------------------------------
	:: Captions
	-------------------------------------------------- */
	
	.caption-blue,
    .caption-green,
    .caption-orange { 
	    position:absolute;  
		padding:7px 10px; 
        text-align:left;		 
	}
	
	.caption-blue{ 
		background-color:#618da1;
	}
	
	.caption-green{ 
		background-color:#96aa39;
	}
	
	.caption-orange{ 
		background-color:#de5f41;
	}
	
	.caption-blue#slide-1{ 
		left:120px;
		top:70px;
	}
	
	.caption-green#slide-1{ 
		left:120px;
		top:100px;
	}
	
	.caption-orange#slide-1{ 
		left:120px;
		top:130px;
	}
	
	.caption-blue#slide-2{ 
		left:250px;
		bottom:70px;
	}
	
	.caption-green#slide-2{ 
		left:250px;
		bottom:100px;
	}
	
	.caption-orange#slide-2{ 
		left:250px;
		bottom:130px;
	}
	
	.caption-blue#slide-3{ 
		left:80px;
		bottom:50px;
	}
	
	.caption-green#slide-3{ 
		left:80px;
		bottom:80px;
	}
	
	.caption-orange#slide-3{ 
		left:80px;
		bottom:110px;
	}
	
	.caption-blue#slide-4{ 
		right:80px;
		bottom:50px;
	}
	
	.caption-green#slide-4{ 
		right:80px;
		bottom:80px;
	}
	
	.caption-orange#slide-4{ 
		right:80px;
		bottom:110px;
	}
	
	.caption-blue p,
	.caption-green p,
    .caption-orange p { 
	    color:#fff; 
	    font-family:"Open Sans";  
	    font-style:normal; 
	    font-weight:normal; 
	    font-size:14px;
		margin:0;
		padding:0;
	}
	
/*	--------------------------------------------------
	:: Accordion Dark Colors Blue
	-------------------------------------------------- */
	
    .accordion-blue div.accordion-label label {
        cursor:pointer;
		background-color:#618da1;
		border-left:1px solid #76a2b6;
		border-right:1px solid #557f92;
    }
	
	.accordion-blue div.accordion-label.arrow input:checked + label:before {
	    border-top:10px solid transparent;
	    border-bottom:10px solid transparent;
	    border-left:10px solid #618da1;
    }
	
/*	--------------------------------------------------
	:: Accordion Dark Colors Red
	-------------------------------------------------- */
	
	.accordion-red div.accordion-label label{
        cursor:pointer;
		background-color:#de473c;
		border-left:1px solid #ed6257;
		border-right:1px solid #cd352b;
    }
	
	.accordion-red div.accordion-label.arrow input:checked + label:before {
	    border-top:10px solid transparent;
	    border-bottom:10px solid transparent;
	    border-left:10px solid #de473c;
    }
	
/*	--------------------------------------------------
	:: Accordion Dark Colors Green
	-------------------------------------------------- */
	
	.accordion-green div.accordion-label label{
        cursor:pointer;
		background-color:#96aa39;
		border-left:1px solid #a7bc45;
		border-right:1px solid #8c9f33;
    }
	
	.accordion-green div.accordion-label.arrow input:checked + label:before{
	    border-top:10px solid transparent;
	    border-bottom:10px solid transparent;
	    border-left:10px solid #96aa39;
    }
	
/*	--------------------------------------------------
	:: Accordion Dark Colors Orange
	-------------------------------------------------- */
	
	.accordion-orange div.accordion-label label{
        cursor:pointer;
		background-color:#de5f41;
		border-left:1px solid #eb7053;
		border-right:1px solid #c44b2e;
    }
	
	.accordion-orange div.accordion-label.arrow input:checked + label:before {
	    border-top:10px solid transparent;
	    border-bottom:10px solid transparent;
	    border-left:10px solid #de5f41;
    }

/*	--------------------------------------------------
	:: Tablet Portrait Design for a width of 768px
	-------------------------------------------------- */

    @media only screen and (min-width:768px) and (max-width:959px) {
		.container_accordion { width:768px; }
		
		.accordion div.accordion-label > label {
		    height:250px;
        }
		
		.accordion ul.accordion-section-one,
        .accordion ul.accordion-section-two,
        .accordion ul.accordion-section-three,
        .accordion ul.accordion-section-four,
        .accordion ul.accordion-section-five {
		    height:290px;
		    width:533px;
        }
		
		.accordion > div.accordion-label > input.tab-1:checked ~ ul.accordion-section-one { width:508px; } 
        .accordion > div.accordion-label > input.tab-2:checked ~ ul.accordion-section-two { width:508px; }
        .accordion > div.accordion-label > input.tab-3:checked ~ ul.accordion-section-three { width:508px; }
        .accordion > div.accordion-label > input.tab-4:checked ~ ul.accordion-section-four { width:508px; }
        .accordion > div.accordion-label > input.tab-5:checked ~ ul.accordion-section-five { width:508px; }
		
		.media-holder {
		    width:508px;
        }

        .media-holder img{
		    height:290px;
        }
		
		.media-container iframe,  
        .media-container object,  
        .media-container embed {
	        width:508px;
	        height:290px;
        }	
		
		.navigation .prev:before,
		.navigation .next:before{
		    top:105px;
        }
		
		.caption-blue#slide-1{ 
		    left:90px;
		    top:30px;
	    }
	
	    .caption-green#slide-1{ 
		    left:90px;
		    top:60px;
	    }
	
	    .caption-orange#slide-1{ 
		    left:90px;
		    top:90px;
	    }
	
	    .caption-blue#slide-2{ 
		    left:100px;
		    bottom:50px;
	    }
	
	    .caption-green#slide-2{ 
		    left:100px;
		    bottom:80px;
	    }
	
	    .caption-orange#slide-2{ 
		    left:100px;
		    bottom:110px;
	    }
    }

/*	--------------------------------------------------
	:: Mobile Landscape Design for a width of 480px
	-------------------------------------------------- */

    @media only screen and (min-width:480px) and (max-width:767px) {
		.container_accordion { width:420px; }
		
		.accordion div.accordion-label > label {
		    height:150px;
			width:20px;
			padding:15px 10px;
        }
		
		.accordion ul.accordion-section-one,
        .accordion ul.accordion-section-two,
        .accordion ul.accordion-section-three,
        .accordion ul.accordion-section-four,
        .accordion ul.accordion-section-five {
		    height:180px;
		    width:210px;
        }
		
		.accordion > div.accordion-label > input.tab-1:checked ~ ul.accordion-section-one { width:210px; } 
        .accordion > div.accordion-label > input.tab-2:checked ~ ul.accordion-section-two { width:210px; }
        .accordion > div.accordion-label > input.tab-3:checked ~ ul.accordion-section-three { width:210px; }
        .accordion > div.accordion-label > input.tab-4:checked ~ ul.accordion-section-four { width:210px; }
        .accordion > div.accordion-label > input.tab-5:checked ~ ul.accordion-section-five { width:210px; }
		
		.media-holder {
		    width:210px;
        }

        .media-holder img{
		    height:180px;
        }
		
		.media-container iframe,  
        .media-container object,  
        .media-container embed {
	        width:210px;
	        height:180px;
        }	
		
		.navigation .prev:before,
		.navigation .next:before,
		.caption-blue,
		.caption-green,
		.caption-orange{ 
		    display:none;
	    }
		
		.accordion div.accordion-label.arrow input:checked ~ label:before{
	        left:40px;
        }
    }
	
/*	--------------------------------------------------
	:: Mobile Portrait Design for a width of 320px
	-------------------------------------------------- */

    @media only screen and (max-width:480px) {
		.container_accordion { width:300px; }
		
		.accordion div.accordion-label > label {
		    height:100px;
			width:20px;
			padding:10px 5px;
        }
		
		.accordion ul.accordion-section-one,
        .accordion ul.accordion-section-two,
        .accordion ul.accordion-section-three,
        .accordion ul.accordion-section-four,
        .accordion ul.accordion-section-five {
		    height:120px;
		    width:140px;
        }
		
		.accordion > div.accordion-label > input.tab-1:checked ~ ul.accordion-section-one { width:140px; } 
        .accordion > div.accordion-label > input.tab-2:checked ~ ul.accordion-section-two { width:140px; }
        .accordion > div.accordion-label > input.tab-3:checked ~ ul.accordion-section-three { width:140px; }
        .accordion > div.accordion-label > input.tab-4:checked ~ ul.accordion-section-four { width:140px; }
        .accordion > div.accordion-label > input.tab-5:checked ~ ul.accordion-section-five { width:140px; }
		
		.media-holder {
		    width:140px;
        }

        .media-holder img{
		    height:120px;
        }
		
		.media-container iframe,  
        .media-container object,  
        .media-container embed {
	        width:140px;
	        height:120px;
        }	
		
		.navigation .prev:before,
		.navigation .next:before,
		.caption-blue,
		.caption-green,
		.caption-orange{ 
		    display:none;
	    }
		
		.accordion div.accordion-label.arrow input:checked ~ label:before{
	        left:30px;
        }
    }