@media screen and (min-width:1025px){
	.verticalAccordion {
		display:none;
	}
}
@media screen and (min-width:521px) and (max-width:1024px){
		*{
            margin: 0;
            padding: 0;
        }
        .verticalAccordion {
            width: 520px;
            margin: 0 auto;
        }
        
        .verticalAccordion ul {
            width: 100%;
            margin: 0;
            padding: 0;
        }
        
        .verticalAccordion li {
            list-style: none outside none;
            display: block;
            margin: 0;
            padding: 0;
            height: 50px;
            width: 100%;
            overflow: hidden;
            background: #f0f0f0;
            -moz-transition: height 0.3s ease-in-out;
            -webkit-transition: height 0.3s ease-in-out;
            -o-transition: height 0.3s ease-in-out;
            transition: height 0.3s ease-in-out;
        }
        
        .verticalAccordion h3 {
            margin: 0;
            padding: 10px;
            height: 50px;
            border-top: 1px solid #f0f0f0;
            text-transform: uppercase;
            color: #000;
            background: #ccc;
            cusor: pointer;
            position: relative;
            background: -moz-linear-gradient( top, #999999, #cccccc);
            background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#cccccc));
            background: -webkit-linear-gradient( top, #999999, #cccccc);
            background: -o-linear-gradient( top, #999999, #cccccc);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc); 
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc)";   
        }
        
        .verticalAccordion h3:before {
            content:"";
            border: 5px solid #000;
            border-color: #000 transparent transparent;
            position: absolute;
            right: 10px;
            top: 15px;
            width: 0;
            height: 0;
        }
        
        .verticalAccordion div {
            margin: 0;
            voerflow: auto;
            padding: 10px;
            height: 220px;
        }
        
        .verticalAccordion li:hover {
            height: 280px;
        }
        
        .verticalAccordion li:hover h3 {
            color: #fff;
            background: #000;
            background: -moz-linear-gradient( top, #454545, #000000); 
            background: -webkit-gradient(linear, left top, left bottom, from(#454545), to(#000000)); 
            background: -webkit-linear-gradient( top, #454545, #000000);
            background: -o-linear-gradient( top, #454545, #000000);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000); 
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000)";   
        }
        
        .verticalAccordion li:hover h3:before {
            border-color: transparent transparent transparent #fff;
        }
}
@media screen and (max-width:520px){
		*{
            margin: 0;
            padding: 0;
        }
        .verticalAccordion {
            width: 320px;
            margin: 0 auto;
        }
        
        .verticalAccordion ul {
            width: 100%;
            margin: 0;
            padding: 0;
        }
        
        .verticalAccordion li {
            list-style: none outside none;
            display: block;
            margin: 0;
            padding: 0;
            height: 50px;
            width: 100%;
            overflow: hidden;
            background: #f0f0f0;
            -moz-transition: height 0.3s ease-in-out;
            -webkit-transition: height 0.3s ease-in-out;
            -o-transition: height 0.3s ease-in-out;
            transition: height 0.3s ease-in-out;
        }
        
        .verticalAccordion h3 {
            margin: 0;
            padding: 10px;
            height: 50px;
            border-top: 1px solid #f0f0f0;
            text-transform: uppercase;
            color: #000;
            background: #ccc;
            cusor: pointer;
            position: relative;
            background: -moz-linear-gradient( top, #999999, #cccccc);
            background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#cccccc));
            background: -webkit-linear-gradient( top, #999999, #cccccc);
            background: -o-linear-gradient( top, #999999, #cccccc);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc); 
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc)";   
        }
        
        .verticalAccordion h3:before {
            content:"";
            border: 5px solid #000;
            border-color: #000 transparent transparent;
            position: absolute;
            right: 10px;
            top: 15px;
            width: 0;
            height: 0;
        }
        
        .verticalAccordion div {
            margin: 0;
            voerflow: auto;
            padding: 10px;
            height: 220px;
        }
        
        .verticalAccordion li:hover {
            height: 280px;
        }
        
        .verticalAccordion li:hover h3 {
            color: #fff;
            background: #000;
            background: -moz-linear-gradient( top, #454545, #000000); 
            background: -webkit-gradient(linear, left top, left bottom, from(#454545), to(#000000)); 
            background: -webkit-linear-gradient( top, #454545, #000000);
            background: -o-linear-gradient( top, #454545, #000000);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000); 
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000)";   
        }
        
        .verticalAccordion li:hover h3:before {
            border-color: transparent transparent transparent #fff;
        }
}