/* CSS Tanzschule Piet & Müller
© Zymedia - Agentur für neue Medien
https://zymedia.de */

/** Allgemein **/
* {margin: 0; padding: 0;}
body {font-family: Arial, Helvetica, sans-serif; background: #F9F9F9;}
.inner_wrapper {display: block; width: 90%; max-width: 600px; margin-left: auto; margin-right: auto;}
p {color: #7F746A; line-height: 22px;}
a.btn-cta {display: inline-block; text-decoration: none; background: #e4007d; color: #FFF; border-radius: 3px; padding: 16px; border: none; font-size: 15px; margin-top: 10px; font-weight: 700;}

/** Header **/
header {display: block; background: #FFF; border-bottom: 1px solid #E4E4E4; width: 100%;}
.logo img {height: 60px; margin: 10px 0;}

/** Content **/
.course_container {display: block; padding: 20px 0 20px 0; border-bottom: 1px solid #E4E4E4;}
span.button_heading {display: block; font-size: 20px; font-weight: 700; color: #7F746A;}
.button_container {display: block; width: 100%; font-size: 0;}
.button_container .button_col {display: inline-block; width: 22%; margin-right: 4%; font-size: 25px; margin-top: 4%;}
.button_container .button_col:nth-child(4n) {margin-right: 0;}
.button_circle {width: 100%; height: 0; padding-top: 100%; border: 1px solid #E4E4E4; background: #FFF; position: relative; border-radius: 50%; box-shadow: 0 2px 7px 1px rgba(0,0,0,.01); transition: all 300ms ease-in-out; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out;}
.button_circle:hover {background: #e4007d; color: #FFF;}
.button_circle .inner {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.button_container .button_col a {color: #7F746A; font-weight: 700;}
.inner_wrapper .course_container:last-child {border-bottom: 0;}

.course_info_container {display: block; border-top: 1px solid #E4E4E4; border-bottom: 1px solid #E4E4E4; padding: 10px 0 5px 0; margin: 10px 0;}
.chosen_course, .course_thank-container {display: block; padding: 30px 0 30px 0;}
span.course_heading {display: block; font-size: 20px; font-weight: 700; color: #7F746A;}
.course_info_row {display: table-row; width: 100%;}
.course_icon {display: table-cell; padding-right: 20px; color: #9dd3cd; padding-bottom: 5px;}
.course_info {color: #7F746A; padding-bottom: 5px;}
.course_text p {color: #7F746A; line-height: 22px;}
.course_form {display: block; margin: 30px 0 0 0;}
.course_thank-container span.course_heading {padding-bottom: 20px;}

/** Formular **/
.form input[type="text"], .form input[type="email"] {appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 100%; box-sizing: border-box; padding: 16px; color: #7F746A; border: 1px solid #E4E4E4; box-shadow: 0 2px 7px 1px rgba(0,0,0,.01); border-radius: 3px; font-size: 15px; margin-bottom: 15px;}
.form input[type="submit"] {appearance: none; -webkit-appearance: none; -moz-appearance: none; background: #9dd3cd; color: #FFF; border-radius: 3px; padding: 16px; border: none; font-size: 15px; width: 100%; margin-top: 10px; font-weight: 700; height: 50px;}
.form input[type="text"]:focus, .form input[type="email"]:focus {border-color: #9dd3cd; outline: none;}
.form input::placeholder {font-size: 15px; color: #999;}
.form label {display: block; color: #7F746A; padding-bottom: 3px;}
a.link_back {border: 1px solid #9dd3cd; box-sizing: border-box; color: #9dd3cd; border-radius: 3px; padding: 15px; display: block; width: 100%; text-align: center; text-decoration: none; font-weight: 700; margin-top: 20px; height: 50px;}
.form input.error {border-color: #9dd3cd;}
label.error {color: #9dd3cd; margin-top: -8px; padding-bottom: 18px;}

/** Footer **/

footer {display: block; background: #FFF; border-top: 1px solid #E4E4E4; width: 100%;}

footer a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}


span.copy {display: block; text-align: center; font-size: 14px; padding: 20px 0; color: #7F746A;}