/* All CSS written by Jeffrey B. Madden 2023. */

form {
   display:block;
   margin:0px;
   border:0px;
   padding:0px;
}

.form .divider_wrap {
   display:block;
   width:100%;
   margin:0px;
   border:0px;
   padding:0px;
}

.form .divider_wrap::after {
   content:"";
   display:block;
   margin:0px;
   border:0px;
   padding:0px;
   clear:both;
}

.form .divider {
   display:inline-block;
   float:left;
   width:50%;
   margin:0px;
   border:0px;
   padding:0px;
}

.form .inputs {
   display:block;
   line-height:40px;
   margin:30px 0px 0px 0px;
   border:0px;
   padding:0px;
}

.form .inputs span {
   display:inline-block;
   position:relative;
   float:left;
   width:40%;
   height:40px;
   line-height:40px;
   margin:0px;
   border:0px;
   padding:0px 20px 0px 0px;
   color:White;
   font-size:16px;
   font-family:Arial;
   text-align:right;
   box-sizing:border-box;
}

.form .inputs span:hover { color:LightSteelBlue; }

.form .inputs input, .form .questions textarea {
   width:60%;
   margin:0px;
   border:1px solid #908070;
   border-radius:0px;
   border-top-right-radius:2em;
   padding:0px;
   font-size:20px;
   font-family:Arial;
   text-align:left;
   text-indent:12px;
   color:#bbc2ca;
   background-color:Black;
   box-sizing:border-box;
   box-shadow:0px 0px 15px 6px #000000;
   outline:none;
}

.form .inputs input { height:40px; line-height:40px; }
.form .inputs input:hover, .form .questions textarea:hover { border-color:LightSteelBlue; }

.form .inputs span, .form .inputs input, .form .questions textarea {
   transition:color .5s linear, border-color .5s linear;
   -webkit-transition:color .5s linear, border-color .5s linear;
   -moz-transition:color .5s linear, border-color .5s linear;
}

.form .input_wrap {
   display:flex;
   width:100%;
   margin:0px;
   border:0px;
   padding:20px 0px 0px 0px;
   justify-content:center;
   flex-wrap:wrap;
}

.form h2 {
   display:block;
   width:100%;
   margin:0px 0px 10px 0px;
   border:0px;
   padding:0px;
   font-size:40px;
   text-align:center;
}

.form .input_wrap i {
   display:block;
   width:100%;
   margin:0px auto 30px auto;
   font-family:Arial;
   text-align:center;
   font-size:16px;
}

.form .box {
   display:flex;
   width:300px;
   height:auto;
   margin:10px;
   border:2px solid transparent;
   padding:0px;
   background-repeat:no-repeat;
   background-size:contain;
   cursor:pointer;
   justify-content:center;
   align-items:center;
   flex-wrap:wrap;
}

.form .box img {
   width:100%;
   height:auto;
   margin:0px;
   border:0px;
   visibility:hidden;
}

.form .box.electric.highlight { background-image:url('images/icon_electric_player_highlight_01.png'); }
.form .box.acoustic.highlight { background-image:url('images/icon_acoustic_player_highlight_01.png'); }
.form .box.classical.highlight { background-image:url('images/icon_classical_player_highlight_01.png'); }
.form .box.bass.highlight { background-image:url('images/icon_bass_player_highlight_01.png'); }
.form .box.electric { background-image:url('images/icon_electric_player_static_01.png'); }
.form .box.acoustic { background-image:url('images/icon_acoustic_player_static_01.png'); }
.form .box.classical { background-image:url('images/icon_classical_player_static_01.png'); }
.form .box.bass { background-image:url('images/icon_bass_player_static_01.png'); }
.form .box input { display:none; }

.form .level {
   display:block;
   width:492px;
   height:auto;
   margin:0px;
   border:2px solid transparent;
   padding:0px;
   background-repeat:no-repeat;
   background-size:contain;
   cursor:pointer;
}

.form .level img {
   width:100%;
   height:auto;
   margin:0px;
   border:0px;
   visibility:hidden;
}

.form .level.beginner:hover, .form .level.beginner:active, .form .level.beginner.highlight { background-image:url('images/icon_level_beginner_highlight_01.png'); }
.form .level.intermediate:hover, .form .level.intermediate:active, .form .level.intermediate.highlight { background-image:url('images/icon_level_intermediate_highlight_01.png'); }
.form .level.advanced:hover, .form .level.advanced:active, .form .level.advanced.highlight { background-image:url('images/icon_level_advanced_highlight_01.png'); }
.form .level.beginner { background-image:url('images/icon_level_beginner_static_01.png'); }
.form .level.intermediate { background-image:url('images/icon_level_intermediate_static_01.png'); }
.form .level.advanced { background-image:url('images/icon_level_advanced_static_01.png'); }
.form .level input { display:none; }

.form .questions {
   display:block;
   width:100%;
   margin:70px 0px 0px 0px;
   border:0px;
   padding:0px;
}

.form .questions h2 {
   width:100%;
   margin:0px 0px 30px 0px;
   border:0px;
   padding:0px;
   text-align:center;
   letter-spacing:3px;
   text-align:center;
   box-sizing:border-box;
}

.form .questions textarea {
   width:100%;
   max-width:100%;
   line-height:28px;
   padding:15px;
   text-indent:0px;
}

.form .buttons {
   display:flex;
   width:100%;
   line-height:initial;
   margin:20px 0px 0px 0px;
   border:0px;
   padding:0px;
   justify-content:center;
}

.form .sub, .form .res {
   display:block;
   width:auto;
   height:50px;
   line-height:50px;
   margin:20px;
   border:1px solid YellowGreen;
   border-radius:5px;
   padding:0px 30px 0px 30px;
   font-size:36px;
   letter-spacing:2px;
   text-align:center;
   text-indent:0px;
   box-sizing:border-box;
   cursor:pointer;
}

.form .sub {
   color:Black;
   background-color:YellowGreen;  
}

.form .res {
   color:YellowGreen;
   background-color:Black;
}

.form .inputs span.error {
   display:block;
   float:none;
   width:100%;
   height:auto;
   line-height:initial;
   padding:6px;
   color:Gold;
   text-align:right;
   font-family:arial;
   font-size:14px;
}

.form .sub.disabled {
   opacity:0.3;
   cursor:default;
}

.testimonial_ad {
   width:100%;
   height:240px;
}

.testimonial_ad p {
   font-size:12px;
}