
/* Wrapper */

.wrapper {
    padding: 6em 0 4em 0 ;
}

    .wrapper > .inner {
        width: 60em;
        margin: 0 auto;
    }

        @media screen and (max-width: 1280px) {

            .wrapper > .inner {
                width: 90%;
            }

        }

        @media screen and (max-width: 980px) {

            .wrapper > .inner {
                width: 100%;
            }

        }

    .wrapper.alt {
        padding: 0;
    }

    .wrapper.style1 {
        background-color: #21b2a6;
        color: #c8ece9;
    }

        .wrapper.style1 strong, .wrapper.style1 b {
            color: #ffffff;
        }

        .wrapper.style1 h2, .wrapper.style1 h3, .wrapper.style1 h4, .wrapper.style1 h5, .wrapper.style1 h6 {
            color: #ffffff;
        }

        .wrapper.style1 hr {
            border-color: rgba(0, 0, 0, 0.125);
        }

        .wrapper.style1 blockquote {
            border-color: rgba(0, 0, 0, 0.125);
        }

        .wrapper.style1 code {
            background: rgba(255, 255, 255, 0.075);
        }

        .wrapper.style1 header p {
            color: #a6e0db;
        }

        .wrapper.style1 header.major h2, .wrapper.style1 header.major h3, .wrapper.style1 header.major h4, .wrapper.style1 header.major h5, .wrapper.style1 header.major h6 {
            border-color: rgba(0, 0, 0, 0.125);
        }

        .wrapper.style1 header.major p {
            color: #c8ece9;
        }

        .wrapper.style1 label {
            color: #ffffff;
        }

        .wrapper.style1 input[type="text"],
        .wrapper.style1 input[type="password"],
        .wrapper.style1 input[type="email"],
        .wrapper.style1 select,
        .wrapper.style1 textarea {
            background-color: rgba(255, 255, 255, 0.075);
        }

        .wrapper.style1 select {
            background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='rgba(0, 0, 0, 0.125)' /%3E%3C/svg%3E");
        }

            .wrapper.style1 select option {
                color: #ffffff;
                background: #21b2a6;
            }

        .wrapper.style1 input[type="checkbox"] + label,
        .wrapper.style1 input[type="radio"] + label {
            color: #c8ece9;
        }

            .wrapper.style1 input[type="checkbox"] + label:before,
            .wrapper.style1 input[type="radio"] + label:before {
                background: rgba(255, 255, 255, 0.075);
            }

        .wrapper.style1 input[type="checkbox"]:checked + label:before,
        .wrapper.style1 input[type="radio"]:checked + label:before {
            background: #ffffff;
            color: #21b2a6;
        }

        .wrapper.style1 ::-webkit-input-placeholder {
            color: #a6e0db !important;
        }

        .wrapper.style1 :-moz-placeholder {
            color: #a6e0db !important;
        }

        .wrapper.style1 ::-moz-placeholder {
            color: #a6e0db !important;
        }

        .wrapper.style1 :-ms-input-placeholder {
            color: #a6e0db !important;
        }

        .wrapper.style1 .formerize-placeholder {
            color: #a6e0db !important;
        }

        .wrapper.style1 .icon.major {
            border-color: rgba(0, 0, 0, 0.125);
        }

        .wrapper.style1 ul.alt li {
            border-color: rgba(0, 0, 0, 0.125);
        }

        .wrapper.style1 table tbody tr {
            border-color: rgba(0, 0, 0, 0.125);
        }

            .wrapper.style1 table tbody tr:nth-child(2n + 1) {
                background-color: rgba(255, 255, 255, 0.075);
            }

        .wrapper.style1 table th {
            color: #ffffff;
        }

        .wrapper.style1 table thead {
            border-color: rgba(0, 0, 0, 0.125);
        }

        .wrapper.style1 table tfoot {
            border-color: rgba(0, 0, 0, 0.125);
        }

        .wrapper.style1 table.alt tbody tr td {
            border-color: rgba(0, 0, 0, 0.125);
        }

        .wrapper.style1 input[type="submit"],
        .wrapper.style1 input[type="reset"],
        .wrapper.style1 input[type="button"],
        .wrapper.style1 button,
        .wrapper.style1 .button {
            box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.125);
            color: #ffffff;
        }

            .wrapper.style1 input[type="submit"]:hover,
            .wrapper.style1 input[type="reset"]:hover,
            .wrapper.style1 input[type="button"]:hover,
            .wrapper.style1 button:hover,
            .wrapper.style1 .button:hover {
                background-color: rgba(255, 255, 255, 0.075);
            }

            .wrapper.style1 input[type="submit"]:active,
            .wrapper.style1 input[type="reset"]:active,
            .wrapper.style1 input[type="button"]:active,
            .wrapper.style1 button:active,
            .wrapper.style1 .button:active {
                background-color: rgba(255, 255, 255, 0.2);
            }

        @media screen and (max-width: 736px) {

            .wrapper.style1 .features li {
                border-top-color: rgba(0, 0, 0, 0.125);
            }

        }

    .wrapper.style2 {
        background-color: #2e3842;
    }

    .wrapper.style3 {
        background-color: #505393;
        color: #d3d4e4;
    }

        .wrapper.style3 strong, .wrapper.style3 b {
            color: #ffffff;
        }

        .wrapper.style3 h2, .wrapper.style3 h3, .wrapper.style3 h4, .wrapper.style3 h5, .wrapper.style3 h6 {
            color: #ffffff;
        }

        .wrapper.style3 hr {
            border-color: rgba(0, 0, 0, 0.125);
        }

        .wrapper.style3 blockquote {
            border-color: rgba(0, 0, 0, 0.125);
        }

        .wrapper.style3 code {
            background: rgba(255, 255, 255, 0.075);
        }

        .wrapper.style3 header p {
            color: #b9bad4;
        }

        .wrapper.style3 header.major h2, .wrapper.style3 header.major h3, .wrapper.style3 header.major h4, .wrapper.style3 header.major h5, .wrapper.style3 header.major h6 {
            border-color: rgba(0, 0, 0, 0.125);
        }

        .wrapper.style3 header.major p {
            color: #d3d4e4;
        }

        .wrapper.style3 label {
            color: #ffffff;
        }

        .wrapper.style3 input[type="text"],
        .wrapper.style3 input[type="password"],
        .wrapper.style3 input[type="email"],
        .wrapper.style3 select,
        .wrapper.style3 textarea {
            background-color: rgba(255, 255, 255, 0.075);
        }

        .wrapper.style3 select {
            background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='rgba(0, 0, 0, 0.125)' /%3E%3C/svg%3E");
        }

            .wrapper.style3 select option {
                color: #ffffff;
                background: #505393;
            }

        .wrapper.style3 input[type="checkbox"] + label,
        .wrapper.style3 input[type="radio"] + label {
            color: #d3d4e4;
        }

            .wrapper.style3 input[type="checkbox"] + label:before,
            .wrapper.style3 input[type="radio"] + label:before {
                background: rgba(255, 255, 255, 0.075);
            }

        .wrapper.style3 input[type="checkbox"]:checked + label:before,
        .wrapper.style3 input[type="radio"]:checked + label:before {
            background: #ffffff;
            color: #505393;
        }

        .wrapper.style3 ::-webkit-input-placeholder {
            color: #b9bad4 !important;
        }

        .wrapper.style3 :-moz-placeholder {
            color: #b9bad4 !important;
        }

        .wrapper.style3 ::-moz-placeholder {
            color: #b9bad4 !important;
        }

        .wrapper.style3 :-ms-input-placeholder {
            color: #b9bad4 !important;
        }

        .wrapper.style3 .formerize-placeholder {
            color: #b9bad4 !important;
        }

        .wrapper.style3 .icon.major {
            border-color: rgba(0, 0, 0, 0.125);
        }

        .wrapper.style3 ul.alt li {
            border-color: rgba(0, 0, 0, 0.125);
        }

        .wrapper.style3 table tbody tr {
            border-color: rgba(0, 0, 0, 0.125);
        }

            .wrapper.style3 table tbody tr:nth-child(2n + 1) {
                background-color: rgba(255, 255, 255, 0.075);
            }

        .wrapper.style3 table th {
            color: #ffffff;
        }

        .wrapper.style3 table thead {
            border-color: rgba(0, 0, 0, 0.125);
        }

        .wrapper.style3 table tfoot {
            border-color: rgba(0, 0, 0, 0.125);
        }

        .wrapper.style3 table.alt tbody tr td {
            border-color: rgba(0, 0, 0, 0.125);
        }

        .wrapper.style3 input[type="submit"],
        .wrapper.style3 input[type="reset"],
        .wrapper.style3 input[type="button"],
        .wrapper.style3 button,
        .wrapper.style3 .button {
            box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.125);
            color: #ffffff;
        }

            .wrapper.style3 input[type="submit"]:hover,
            .wrapper.style3 input[type="reset"]:hover,
            .wrapper.style3 input[type="button"]:hover,
            .wrapper.style3 button:hover,
            .wrapper.style3 .button:hover {
                background-color: rgba(255, 255, 255, 0.075);
            }

            .wrapper.style3 input[type="submit"]:active,
            .wrapper.style3 input[type="reset"]:active,
            .wrapper.style3 input[type="button"]:active,
            .wrapper.style3 button:active,
            .wrapper.style3 .button:active {
                background-color: rgba(255, 255, 255, 0.2);
            }

        @media screen and (max-width: 736px) {

            .wrapper.style3 .features li {
                border-top-color: rgba(0, 0, 0, 0.125);
            }

        }

    .wrapper.style4 {
        background-color: transparent;
    }

    .wrapper.style5 {
        background-color: #ffffff;
        color: #4E4852;
    }

        .wrapper.style5 strong, .wrapper.style5 b {
            color: #2E3842;
        }

        .wrapper.style5 h2, .wrapper.style5 h3, .wrapper.style5 h4, .wrapper.style5 h5, .wrapper.style5 h6 {
            color: #2E3842;
        }

        .wrapper.style5 hr {
            border-color: #dfdfdf;
        }

        .wrapper.style5 blockquote {
            border-color: #dfdfdf;
        }

        .wrapper.style5 code {
            background: rgba(0, 0, 0, 0.0375);
        }

        .wrapper.style5 header p {
            color: #8E8892;
        }

        .wrapper.style5 header.major h2, .wrapper.style5 header.major h3, .wrapper.style5 header.major h4, .wrapper.style5 header.major h5, .wrapper.style5 header.major h6 {
            border-color: #dfdfdf;
        }

        .wrapper.style5 header.major p {
            color: #4E4852;
        }

        .wrapper.style5 label {
            color: #2E3842;
        }

        .wrapper.style5 input[type="text"],
        .wrapper.style5 input[type="password"],
        .wrapper.style5 input[type="email"],
        .wrapper.style5 select,
        .wrapper.style5 textarea {
            background-color: rgba(0, 0, 0, 0.0375);
        }

        .wrapper.style5 select {
            background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='%23dfdfdf' /%3E%3C/svg%3E");
        }

            .wrapper.style5 select option {
                color: #2E3842;
                background: #ffffff;
            }

        .wrapper.style5 input[type="checkbox"] + label,
        .wrapper.style5 input[type="radio"] + label {
            color: #4E4852;
        }

            .wrapper.style5 input[type="checkbox"] + label:before,
            .wrapper.style5 input[type="radio"] + label:before {
                background: rgba(0, 0, 0, 0.0375);
            }

        .wrapper.style5 input[type="checkbox"]:checked + label:before,
        .wrapper.style5 input[type="radio"]:checked + label:before {
            background: #2E3842;
            color: #ffffff;
        }

        .wrapper.style5 ::-webkit-input-placeholder {
            color: #8E8892 !important;
        }

        .wrapper.style5 :-moz-placeholder {
            color: #8E8892 !important;
        }

        .wrapper.style5 ::-moz-placeholder {
            color: #8E8892 !important;
        }

        .wrapper.style5 :-ms-input-placeholder {
            color: #8E8892 !important;
        }

        .wrapper.style5 .formerize-placeholder {
            color: #8E8892 !important;
        }

        .wrapper.style5 .icon.major {
            border-color: #dfdfdf;
        }

        .wrapper.style5 ul.alt li {
            border-color: #dfdfdf;
        }

        .wrapper.style5 table tbody tr {
            border-color: #dfdfdf;
        }

            .wrapper.style5 table tbody tr:nth-child(2n + 1) {
                background-color: rgba(0, 0, 0, 0.0375);
            }

        .wrapper.style5 table th {
            color: #2E3842;
        }

        .wrapper.style5 table thead {
            border-color: #dfdfdf;
        }

        .wrapper.style5 table tfoot {
            border-color: #dfdfdf;
        }

        .wrapper.style5 table.alt tbody tr td {
            border-color: #dfdfdf;
        }

        .wrapper.style5 input[type="submit"],
        .wrapper.style5 input[type="reset"],
        .wrapper.style5 input[type="button"],
        .wrapper.style5 button,
        .wrapper.style5 .button {
            box-shadow: inset 0 0 0 2px #dfdfdf;
            color: #2E3842;
        }

            .wrapper.style5 input[type="submit"]:hover,
            .wrapper.style5 input[type="reset"]:hover,
            .wrapper.style5 input[type="button"]:hover,
            .wrapper.style5 button:hover,
            .wrapper.style5 .button:hover {
                background-color: rgba(0, 0, 0, 0.0375);
            }

            .wrapper.style5 input[type="submit"]:active,
            .wrapper.style5 input[type="reset"]:active,
            .wrapper.style5 input[type="button"]:active,
            .wrapper.style5 button:active,
            .wrapper.style5 .button:active {
                background-color: rgba(0, 0, 0, 0.1);
            }

        @media screen and (max-width: 736px) {

            .wrapper.style5 .features li {
                border-top-color: #dfdfdf;
            }

        }

    @media screen and (max-width: 980px) {

        .wrapper {
            padding: 4em 3em 2em 3em ;
        }

    }

    @media screen and (max-width: 736px) {

        .wrapper {
            padding: 3em 2em 1em 2em ;
        }

    }

    
/* Spotlight */

	.spotlight {
		-moz-align-items: center;
		-webkit-align-items: center;
		-ms-align-items: center;
		align-items: center;
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
	}

		.spotlight .image {
			-moz-order: 1;
			-webkit-order: 1;
			-ms-order: 1;
			order: 1;
			border-radius: 0;
			width: 40%;
		}

			.spotlight .image img {
				border-radius: 0;
				width: 100%;
			}

		.spotlight .content {
			padding: 2em 4em 0.1em 4em ;
			-moz-order: 2;
			-webkit-order: 2;
			-ms-order: 2;
			order: 2;
			max-width: 48em;
			width: 60%;
		}

		.spotlight:nth-child(2n) {
			-moz-flex-direction: row-reverse;
			-webkit-flex-direction: row-reverse;
			-ms-flex-direction: row-reverse;
			flex-direction: row-reverse;
		}

		.spotlight:nth-child(1) {
			background-color: rgba(0, 0, 0, 0.075);
		}

		.spotlight:nth-child(2) {
			background-color: rgba(0, 0, 0, 0.15);
		}

		.spotlight:nth-child(3) {
			background-color: rgba(0, 0, 0, 0.225);
		}

		.spotlight:nth-child(4) {
			background-color: rgba(0, 0, 0, 0.3);
		}

		.spotlight:nth-child(5) {
			background-color: rgba(0, 0, 0, 0.375);
		}

		.spotlight:nth-child(6) {
			background-color: rgba(0, 0, 0, 0.45);
		}

		.spotlight:nth-child(7) {
			background-color: rgba(0, 0, 0, 0.525);
		}

		.spotlight:nth-child(8) {
			background-color: rgba(0, 0, 0, 0.6);
		}

		.spotlight:nth-child(9) {
			background-color: rgba(0, 0, 0, 0.675);
		}

		.spotlight:nth-child(10) {
			background-color: rgba(0, 0, 0, 0.75);
		}

		@media screen and (max-width: 1280px) {

			.spotlight .image {
				width: 45%;
			}

			.spotlight .content {
				width: 55%;
			}

		}

		@media screen and (max-width: 980px) {

			.spotlight {
				display: block;
			}

				.spotlight br {
					display: none;
				}

				.spotlight .image {
					width: 100%;
				}

				.spotlight .content {
					padding: 4em 3em 2em 3em ;
					max-width: none;
					text-align: center;
					width: 100%;
				}

		}

		@media screen and (max-width: 736px) {

			.spotlight .content {
				padding: 3em 2em 1em 2em ;
			}

		}
