/*
    Description: 	Tabs Framework
    Author: 		InsideLab
    Version: 		1.0
*/

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

    @media only screen and (min-width:960px) and (max-width:1199px) {
		
        .wrappertab { width:960px; }
		
		.tabs-default.tabs-dark-default .label,
		.tabs-default.tabs-light-default .label{
			position:relative;
			display:block;
			width:100%;
		}
		
		.tabs-default.tabs-dark-default .label{
            border-top:1px solid #343e4d;
		    border-bottom:1px solid #1c2027;
		}
		
		.tabs-default.tabs-light-default .label{
			border-top:1px solid #fff;
            border-bottom:1px solid #ddd;
		}
		
		.tabs.arrow .input:checked + .label:before{
			display:none;
		}
        
		.tabs-default.tabs-blue-default .input:checked + .label {
			border-top:1px solid #3face4;
		    border-bottom:1px solid #2479a5;
		}
		
		.tabs-default.tabs-green-default .input:checked + .label {
			border-top:1px solid #32bf61;
		    border-bottom:1px solid #1d8d42;
		}
		
		.tabs-default.tabs-red-default .input:checked + .label {
			border-top:1px solid #dd3c4f;
		    border-bottom:1px solid #b22434;
		}
		
		.tabs-default.tabs-orange-default .input:checked + .label {
			border-top:1px solid #ea5d5d;
		    border-bottom:1px solid #c43737;
		}

		.tabs-default.tabs-purple-default .input:checked + .label {
			border-top:1px solid #b647b4;
		    border-bottom:1px solid #842c82;
		}
		
    }

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

    @media only screen and (min-width:768px) and (max-width:959px) {
		
        .wrappertab { width:768px; }
				
		.tabs-default.tabs-dark-default .label,
		.tabs-default.tabs-light-default .label{
			position:relative;
			display:block;
			width:100%;
		}
		
		.tabs-default.tabs-dark-default .label{
            border-top:1px solid #343e4d;
		    border-bottom:1px solid #1c2027;
		}
		
		.tabs-default.tabs-light-default .label{
			border-top:1px solid #fff;
            border-bottom:1px solid #ddd;
		}
		
		.tabs.arrow .input:checked + .label:before{
			display:none;
		}
        
		.tabs-default.tabs-blue-default .input:checked + .label {
			border-top:1px solid #3face4;
		    border-bottom:1px solid #2479a5;
		}
		
		.tabs-default.tabs-green-default .input:checked + .label {
			border-top:1px solid #32bf61;
		    border-bottom:1px solid #1d8d42;
		}
		
		.tabs-default.tabs-red-default .input:checked + .label {
			border-top:1px solid #dd3c4f;
		    border-bottom:1px solid #b22434;
		}
		
		.tabs-default.tabs-orange-default .input:checked + .label {
			border-top:1px solid #ea5d5d;
		    border-bottom:1px solid #c43737;
		}

		.tabs-default.tabs-purple-default .input:checked + .label {
			border-top:1px solid #b647b4;
		    border-bottom:1px solid #842c82;
		}
       
    }

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

    @media only screen and (min-width:480px) and (max-width:767px) {
		
        .wrappertab { width:420px; }
				
		.tabs-default.tabs-dark-default .label,
		.tabs-default.tabs-light-default .label{
			position:relative;
			display:block;
			width:100%;
		}
		
		.tabs-default.tabs-dark-default .label{
            border-top:1px solid #343e4d;
		    border-bottom:1px solid #1c2027;
		}
		
		.tabs-default.tabs-light-default .label{
			border-top:1px solid #fff;
            border-bottom:1px solid #ddd;
		}
		
		.tabs.arrow .input:checked + .label:before{
			display:none;
		}
        
		.tabs-default.tabs-blue-default .input:checked + .label {
			border-top:1px solid #3face4;
		    border-bottom:1px solid #2479a5;
		}
		
		.tabs-default.tabs-green-default .input:checked + .label {
			border-top:1px solid #32bf61;
		    border-bottom:1px solid #1d8d42;
		}
		
		.tabs-default.tabs-red-default .input:checked + .label {
			border-top:1px solid #dd3c4f;
		    border-bottom:1px solid #b22434;
		}
		
		.tabs-default.tabs-orange-default .input:checked + .label {
			border-top:1px solid #ea5d5d;
		    border-bottom:1px solid #c43737;
		}

		.tabs-default.tabs-purple-default .input:checked + .label {
			border-top:1px solid #b647b4;
		    border-bottom:1px solid #842c82;
		}

    }

/*	--------------------------------------------------
	:: Mobile Portrait Design for a width of 300px
	-------------------------------------------------- */

    @media only screen and (max-width:479px) {
		
        .wrappertab { width:300px; }
				
		.tabs-default.tabs-dark-default .label,
		.tabs-default.tabs-light-default .label{
			position:relative;
			display:block;
			width:100%;
		}
		
		.tabs-default.tabs-dark-default .label{
            border-top:1px solid #343e4d;
		    border-bottom:1px solid #1c2027;
		}
		
		.tabs-default.tabs-light-default .label{
			border-top:1px solid #fff;
            border-bottom:1px solid #ddd;
		}
		
		.tabs.arrow .input:checked + .label:before{
			display:none;
		}
        
		.tabs-default.tabs-blue-default .input:checked + .label {
			border-top:1px solid #3face4;
		    border-bottom:1px solid #2479a5;
		}
		
		.tabs-default.tabs-green-default .input:checked + .label {
			border-top:1px solid #32bf61;
		    border-bottom:1px solid #1d8d42;
		}
		
		.tabs-default.tabs-red-default .input:checked + .label {
			border-top:1px solid #dd3c4f;
		    border-bottom:1px solid #b22434;
		}
		
		.tabs-default.tabs-orange-default .input:checked + .label {
			border-top:1px solid #ea5d5d;
		    border-bottom:1px solid #c43737;
		}

		.tabs-default.tabs-purple-default .input:checked + .label {
			border-top:1px solid #b647b4;
		    border-bottom:1px solid #842c82;
		}

    }