@charset "utf-8";
/* CSS Document */

.accordion { width:100%; float:left; margin:0 0 0;}
.accordion h3 { width:100%; float:left; background:linear-gradient(to top, #dabd6e 67%, #d0ae5e 33%, var(--camel)); cursor:pointer; padding:16px 7.2% 16px 2.2%; position:relative; z-index:9;}
.accordion h3:after { content:""; width:100%; height:104%; background:linear-gradient(0deg, rgba(218,189,110,1) 0%, rgba(208,174,94,1) 50%, rgba(198,157,75,1) 100%) border-box; border-radius:26px; transition:0.25s ease-out 0s; opacity:1; margin:0 0 0; position:absolute; top:-1px; right:0; left:0; z-index:-1;}
.accordion h3:before { content:""; width:8px; height:8px; float:right; background:url(../images/plus-minus-white-plain-icon.svg) no-repeat top center / 100%; transform:translateY(-50%); transition:all 0.25s ease-out 0s; margin:0 0 0; position:absolute; top:50%; right:4.6%;}
.accordion h3:hover:before { background:url(../images/plus-minus-white-plain-icon.svg) no-repeat bottom center / 100%;}
.accordion h3.active:before { background:url(../images/plus-minus-white-plain-icon.svg) no-repeat bottom center / 100%;}
.accordion .content { width:100%; float:left; padding:22px 4.2% 28px 4.8%;}

/*Smartphone css*/
@media screen and (max-width: 480px) {
.accordion h3 { width:100%; padding:16px 30px 16px 2.5%;}
.accordion .content { width:100%; padding:16px 5% 24px 5%;}
}

@media screen and (min-width:481px) and (max-width:600px) {
.accordion h3 { width:100%; padding:16px 38px 16px 2.5%;}
.accordion .content { width:100%; padding:16px 5% 24px 5%;}
}

@media screen and (min-width:601px) and (max-width:767px) {
.accordion h3 { width:100%; padding:16px 40px 16px 3%;}
.accordion .content { width:100%; padding:16px 5% 24px 5%;}
}

@media screen and (min-width:768px) and (max-width:900px) {
.accordion .content { padding:16px 4.2% 22px 4.8%;}
}

@media screen and (min-width:901px) and (max-width:1024px) {
.accordion .content { padding:19px 4.2% 25px 4.8%;}
}

@media screen and (min-width:1025px) and (max-width:1240px) {

}