.accordion dl {
border: 1px solid #ddd; }
.accordion dl:after {
content: "";
display: block;
height: 1em;
width: 100%;
background-color: #F6F6F6;
display:none;
}
.accordion dt>a {
font-weight: 400;
font-size: 15px;
padding: 1em;
display: block;
text-decoration: none;
text-indent: 20px;
color: #fff;
-webkit-transition: background-color .5s ease-in-out;
background:#F6F6F6;
}
.accordion dd {
background-color: #FFF;
font-size: .5;
line-height: 1.5em;
margin-bottom:0px;
}
.accordion,
.window {
background: #000000; background: -webkit-linear-gradient(to right, #000000, #434343); background: linear-gradient(to right, #000000, #434343); }
.accordion dd>p {
padding: 0 1em .5em;
font-size: 14px;
line-height: 23px
}
.accordion {
position: relative
}
.accordionTitle {
color: #000!important;
font-weight:600!important;
background: #FFF;
border-bottom: 1px solid rgba(0, 0, 0, .1);
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out
}
.accordionTitle:before {
content: "+";
font-size: 20px;
font-weight:400!important;
line-height: 1.1em;
float: left;
-moz-transition: -moz-transform .3s ease-in-out;
-o-transition: -o-transform .3s ease-in-out;
-webkit-transition: -webkit-transform .3s ease-in-out;
transition: transform .3s ease-in-out
}
.accordionTitle:hover {
color: #FFF!important;
background: #000046; background: -webkit-linear-gradient(to right, #000046, #1cb5e0); background: linear-gradient(to right, #000046, #1cb5e0); -webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out
}
.accordionTitleActive {
color: #000!important; background: #36d1dc!important;
background: -webkit-linear-gradient(to right, #36d1dc, #5b86e5)!important;
background: linear-gradient(to right, #36d1dc, #5b86e5)!important;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out
}
.accordionTitleActive:hover {
color: #000!important; background: #36d1dc; background: -webkit-linear-gradient(to right, #36d1dc, #5b86e5); background: linear-gradient(to right, #36d1dc, #5b86e5); -webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out
}
.accordionTitleActive:before { margin-left:30px;
-webkit-transform: rotate(-225deg);
-moz-transform: rotate(-225deg);
transform: rotate(-225deg)
}
.accordionItem {
height: auto;
overflow: hidden
}
@media all {
.accordionItem {
max-height: 160em;
-moz-transition: max-height 1s;
-o-transition: max-height 1s;
-webkit-transition: max-height 1s;
transition: max-height 1s
}
}
@media screen and (min-width:48em) {
.accordionItem {
-moz-transition: max-height .5s;
-o-transition: max-height .5s;
-webkit-transition: max-height .5s;
transition: max-height .5s
}
}
.accordionItemCollapsed {
max-height: 0
}
.animateIn {
-webkit-animation-name: accordionIn;
-webkit-animation-duration: .5s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: both;
-webkit-animation-delay: 0s;
-moz-animation-name: normal;
-moz-animation-duration: .5s;
-moz-animation-iteration-count: 1;
-moz-animation-direction: alternate;
-moz-animation-timing-function: ease-in-out;
-moz-animation-fill-mode: both;
-moz-animation-delay: 0s;
animation-name: accordionIn;
animation-duration: .5s;
animation-iteration-count: 1;
animation-direction: normal;
animation-timing-function: ease-in-out;
animation-fill-mode: both;
animation-delay: 0s
}
.animateOut {
-webkit-animation-name: accordionOut;
-webkit-animation-duration: .3s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: both;
-webkit-animation-delay: 0s;
-moz-animation-name: accordionOut;
-moz-animation-duration: .3s;
-moz-animation-iteration-count: 1;
-moz-animation-direction: alternate;
-moz-animation-timing-function: ease-in-out;
-moz-animation-fill-mode: both;
-moz-animation-delay: 0s;
animation-name: accordionOut;
animation-duration: .3s;
animation-iteration-count: 1;
animation-direction: alternate;
animation-timing-function: ease-in-out;
animation-fill-mode: both;
animation-delay: 0s
}
@-webkit-keyframes accordionIn {
0% {
opacity: 0;
-webkit-transform: scale(.8)
}
100% {
opacity: 1;
-webkit-transform: scale(1)
}
}
@-moz-keyframes accordionIn {
0% {
opacity: 0;
-moz-transform: scale(.8)
}
100% {
opacity: 1;
-moz-transform: scale(1)
}
}
@keyframes accordionIn {
0% {
opacity: 0;
transform: scale(.8)
}
100% {
opacity: 1;
transform: scale(1)
}
}
@-webkit-keyframes accordionOut {
0% {
opacity: 1;
-webkit-transform: scale(1)
}
100% {
opacity: 0;
-webkit-transform: scale(.8)
}
}
@-moz-keyframes accordionOut {
0% {
opacity: 1;
-moz-transform: scale(1)
}
100% {
opacity: 0;
-moz-transform: scale(.8)
}
}
@keyframes accordionOut {
0% {
opacity: 1;
transform: scale(1)
}
100% {
opacity: 0;
transform: scale(.8)
}
}