unnamed.css

@charset "UTF-8";
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
@import url("https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i");
.gradient-green {
    background: #1fdeb3;
    background: linear-gradient(80deg, #1fdeb3, #12c3d2)
}

.gradient-orange {
    background: #ffe53b;
    background: linear-gradient(80deg, #ffe53b, #ff2525)
}

.gradient-purple {
    background: #21d4fd;
    background: linear-gradient(80deg, #21d4fd, #b721ff)
}

a {
    text-decoration: none
}

button,
input,
select,
textarea {
    -webkit-appearance: none
}

button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: none
}

button {
    background-color: unset;
    border: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.full-container {
    margin: 0 auto;
    width: 100%
}

.flex-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.small-container {
    margin: 0 auto;
    max-width: 960px;
    width: 90%
}

@media only screen and (min-width:601px) {
    .small-container {
        width: 90%
    }
}

@media only screen and (min-width:993px) {
    .small-container {
        width: 100%
    }
}

.container {
    margin: 0 auto;
    max-width: 1280px;
    width: 90%
}

@media only screen and (min-width:601px) {
    .container {
        width: 85%
    }
}

@media only screen and (min-width:993px) {
    .container {
        width: 70%
    }
}

.container .row,
.small-container .row,
.full-container .row {
    margin-left: -.75rem;
    margin-right: -.75rem
}

.center-text {
    text-align: center
}

.left-text {
    text-align: left
}

.right-text {
    text-align: right
}

.row {
    margin-bottom: .5rem;
    margin-left: auto;
    margin-right: auto
}

.row:after {
    content: "";
    display: table;
    clear: both
}

.row .column {
    box-sizing: border-box;
    padding: 0 .75rem;
    min-height: 1px;
    float: left
}

.row .column.small-1 {
    width: 8.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto
}

.row .column.small-2 {
    width: 16.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto
}

.row .column.small-3 {
    width: 25%;
    margin-left: auto;
    left: auto;
    right: auto
}

.row .column.small-4 {
    width: 33.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto
}

.row .column.small-5 {
    width: 41.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto
}

.row .column.small-6 {
    width: 50%;
    margin-left: auto;
    left: auto;
    right: auto
}

.row .column.small-7 {
    width: 58.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto
}

.row .column.small-8 {
    width: 66.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto
}

.row .column.small-9 {
    width: 75%;
    margin-left: auto;
    left: auto;
    right: auto
}

.row .column.small-10 {
    width: 83.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto
}

.row .column.small-11 {
    width: 91.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto
}

.row .column.small-12 {
    width: 100%;
    margin-left: auto;
    left: auto;
    right: auto
}

@media only screen and (min-width:601px) {
    .row .column.medium-1 {
        width: 8.3333333333%;
        margin-left: auto;
        left: auto;
        right: auto
    }
    .row .column.medium-2 {
        width: 16.6666666667%;
        margin-left: auto;
        left: auto;
        right: auto
    }
    .row .column.medium-3 {
        width: 25%;
        margin-left: auto;
        left: auto;
        right: auto
    }
    .row .column.medium-4 {
        width: 33.3333333333%;
        margin-left: auto;
        left: auto;
        right: auto
    }
    .row .column.medium-5 {
        width: 41.6666666667%;
        margin-left: auto;
        left: auto;
        right: auto
    }
    .row .column.medium-6 {
        width: 50%;
        margin-left: auto;
        left: auto;
        right: auto
    }
    .row .column.medium-7 {
        width: 58.3333333333%;
        margin-left: auto;
        left: auto;
        right: auto
    }
    .row .column.medium-8 {
        width: 66.6666666667%;
        margin-left: auto;
        left: auto;
        right: auto
    }
    .row .column.medium-9 {
        width: 75%;
        margin-left: auto;
        left: auto;
        right: auto
    }
    .row .column.medium-10 {
        width: 83.3333333333%;
        margin-left: auto;
        left: auto;
        right: auto
    }
    .row .column.medium-11 {
        width: 91.6666666667%;
        margin-left: auto;
        left: auto;
        right: auto
    }
    .row .column.medium-12 {
        width: 100%;
        margin-left: auto;
        left: auto;
        right: auto
    }
}

@media only screen and (min-width:993px) {
    .row .column.large-1 {
        width: 8.3333333333%;
        margin-left: auto;
        left: auto;
        right: auto
    }
    .row .column.large-2 {
        width: 16.6666666667%;
        margin-left: auto;
        left: auto;
        right: auto
    }
    .row .column.large-3 {
        width: 25%;
        margin-left: auto;
        left: auto;
        right: auto
    }
    .row .column.large-4 {
        width: 33.3333333333%;
        margin-left: auto;
        left: auto;
        right: auto
    }
    .row .column.large-5 {
        width: 41.6666666667%;
        margin-left: auto;
        left: auto;
        right: auto
    }
    .row .column.large-6 {
        width: 50%;
        margin-left: auto;
        left: auto;
        right: auto
    }
    .row .column.large-7 {
        width: 58.3333333333%;
        margin-left: auto;
        left: auto;
        right: auto
    }
    .row .column.large-8 {
        width: 66.6666666667%;
        margin-left: auto;
        left: auto;
        right: auto
    }
    .row .column.large-9 {
        width: 75%;
        margin-left: auto;
        left: auto;
        right: auto
    }
    .row .column.large-10 {
        width: 83.3333333333%;
        margin-left: auto;
        left: auto;
        right: auto
    }
    .row .column.large-11 {
        width: 91.6666666667%;
        margin-left: auto;
        left: auto;
        right: auto
    }
    .row .column.large-12 {
        width: 100%;
        margin-left: auto;
        left: auto;
        right: auto
    }
}

@media only screen and (min-width:1201px) {
    .row .column.xlarge-1 {
        width: 8.3333333333%;
        margin-left: auto;
        left: auto;
        right: auto
    }
    .row .column.xlarge-2 {
        width: 16.6666666667%;
        margin-left: auto;
        left: auto;
        right: auto
    }
    .row .column.xlarge-3 {
        width: 25%;
        margin-left: auto;
        left: auto;
        right: auto
    }
    .row .column.xlarge-4 {
        width: 33.3333333333%;
        margin-left: auto;
        left: auto;
        right: auto
    }
    .row .column.xlarge-5 {
        width: 41.6666666667%;
        margin-left: auto;
        left: auto;
        right: auto
    }
    .row .column.xlarge-6 {
        width: 50%;
        margin-left: auto;
        left: auto;
        right: auto
    }
    .row .column.xlarge-7 {
        width: 58.3333333333%;
        margin-left: auto;
        left: auto;
        right: auto
    }
    .row .column.xlarge-8 {
        width: 66.6666666667%;
        margin-left: auto;
        left: auto;
        right: auto
    }
    .row .column.xlarge-9 {
        width: 75%;
        margin-left: auto;
        left: auto;
        right: auto
    }
    .row .column.xlarge-10 {
        width: 83.3333333333%;
        margin-left: auto;
        left: auto;
        right: auto
    }
    .row .column.xlarge-11 {
        width: 91.6666666667%;
        margin-left: auto;
        left: auto;
        right: auto
    }
    .row .column.xlarge-12 {
        width: 100%;
        margin-left: auto;
        left: auto;
        right: auto
    }
}

@media only screen and (max-width:992px) {
    .hide-tablet-down {
        display: none
    }
}

@media only screen and (max-width:600px) {
    .hide-mobile {
        display: none
    }
}

.hide {
    display: none
}

form {
    width: 100%
}

input[type=email],
input[type=file],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=url],
select,
textarea,
textarea[type=text] {
    width: 100%;
    margin-top: 1rem;
    margin-bottom: 1rem;
    box-sizing: border-box;
    transition: all .2s ease;
    border: 1px solid #212121;
    border-radius: 2px
}

input[type=email]:focus,
input[type=file]:focus,
input[type=number]:focus,
input[type=password]:focus,
input[type=search]:focus,
input[type=tel]:focus,
input[type=text]:focus,
input[type=url]:focus,
select:focus,
textarea:focus,
textarea[type=text]:focus {
    border-color: #212121;
    transition: all .2s ease
}

input,
textarea {
    padding: .9rem 1rem .9rem 2rem
}

select {
    background: #fff;
    padding: .9rem .5rem;
    margin: 1.2rem 0
}

textarea {
    resize: vertical;
    min-height: 12rem;
    margin: 0
}

.input-field span:before {
    cursor: pointer;
    position: relative;
    font-family: fontawesome;
    top: 3rem;
    left: .6rem;
    color: #212121
}

.text-area-field span:before {
    top: 1.8rem
}

.user-icon:before {
    content: ""
}

.email-icon:before {
    content: ""
}

.edit-icon:before {
    content: ""
}

.caret-icon:before {
    content: "▼"
}

label {
    cursor: pointer
}

label input[type=checkbox] {
    display: none
}

label input[type=checkbox]+span:before {
    color: hsla(0, 0%, 100%, 0)
}

label input[type=checkbox]+span:before,
label input[type=checkbox]:checked+span:before {
    content: "";
    font-family: fontawesome;
    border: 1px solid #212121;
    padding: .4rem;
    border-radius: 2px;
    transition: .2s;
    font-size: 16px
}

label input[type=checkbox]:checked+span:before {
    color: #212121
}

label input[type=radio] {
    display: none
}

label input[type=radio]+span:before {
    color: hsla(0, 0%, 100%, 0)
}

label input[type=radio]+span:before,
label input[type=radio]:checked+span:before {
    content: "";
    font-family: fontawesome;
    border: 1px solid #212121;
    padding: .3rem .4rem;
    border-radius: 100%;
    transition: .2s;
    font-size: 14px
}

label input[type=radio]:checked+span:before {
    color: #212121
}

.green-input input[type=email],
.green-input input[type=file],
.green-input input[type=number],
.green-input input[type=password],
.green-input input[type=search],
.green-input input[type=tel],
.green-input input[type=text],
.green-input input[type=url],
.green-input select,
.green-input textarea,
.green-input textarea[type=text] {
    border-color: #1fdeb3
}

.green-input input[type=email]:focus,
.green-input input[type=file]:focus,
.green-input input[type=number]:focus,
.green-input input[type=password]:focus,
.green-input input[type=search]:focus,
.green-input input[type=tel]:focus,
.green-input input[type=text]:focus,
.green-input input[type=url]:focus,
.green-input select:focus,
.green-input textarea:focus,
.green-input textarea[type=text]:focus {
    border-color: #12c3d2
}

.green-input span:before {
    color: #1fdeb3
}

.black-input input[type=email],
.black-input input[type=file],
.black-input input[type=number],
.black-input input[type=password],
.black-input input[type=search],
.black-input input[type=tel],
.black-input input[type=text],
.black-input input[type=url],
.black-input select,
.black-input textarea,
.black-input textarea[type=text] {
    border-color: #212121
}

.black-input input[type=email]:focus,
.black-input input[type=file]:focus,
.black-input input[type=number]:focus,
.black-input input[type=password]:focus,
.black-input input[type=search]:focus,
.black-input input[type=tel]:focus,
.black-input input[type=text]:focus,
.black-input input[type=url]:focus,
.black-input select:focus,
.black-input textarea:focus,
.black-input textarea[type=text]:focus {
    border-color: #3b3a3a
}

.black-input span:before {
    color: #212121
}

.orange-input input[type=email],
.orange-input input[type=file],
.orange-input input[type=number],
.orange-input input[type=password],
.orange-input input[type=search],
.orange-input input[type=tel],
.orange-input input[type=text],
.orange-input input[type=url],
.orange-input select,
.orange-input textarea,
.orange-input textarea[type=text] {
    border-color: #ff9f33
}

.orange-input input[type=email]:focus,
.orange-input input[type=file]:focus,
.orange-input input[type=number]:focus,
.orange-input input[type=password]:focus,
.orange-input input[type=search]:focus,
.orange-input input[type=tel]:focus,
.orange-input input[type=text]:focus,
.orange-input input[type=url]:focus,
.orange-input select:focus,
.orange-input textarea:focus,
.orange-input textarea[type=text]:focus {
    border-color: #ffe53b
}

.orange-input span:before {
    color: #ff9f33
}

.purple-input input[type=email],
.purple-input input[type=file],
.purple-input input[type=number],
.purple-input input[type=password],
.purple-input input[type=search],
.purple-input input[type=tel],
.purple-input input[type=text],
.purple-input input[type=url],
.purple-input select,
.purple-input textarea,
.purple-input textarea[type=text] {
    border-color: #7274ff
}

.purple-input input[type=email]:focus,
.purple-input input[type=file]:focus,
.purple-input input[type=number]:focus,
.purple-input input[type=password]:focus,
.purple-input input[type=search]:focus,
.purple-input input[type=tel]:focus,
.purple-input input[type=text]:focus,
.purple-input input[type=url]:focus,
.purple-input select:focus,
.purple-input textarea:focus,
.purple-input textarea[type=text]:focus {
    border-color: #21d4fd
}

.purple-input span:before {
    color: #7274ff
}

.green-checkbox+span:before {
    border-color: #1fdeb3!important;
    color: hsla(0, 0%, 100%, 0)!important
}

.green-checkbox:checked+span:before {
    color: #1fdeb3!important
}

.black-checkbox+span:before {
    border-color: #212121!important;
    color: hsla(0, 0%, 100%, 0)!important
}

.black-checkbox:checked+span:before {
    color: #212121!important
}

.orange-checkbox+span:before {
    border-color: #ff9f33!important;
    color: hsla(0, 0%, 100%, 0)!important
}

.orange-checkbox:checked+span:before {
    color: #ff9f33!important
}

.purple-checkbox+span:before {
    border-color: #7274ff!important;
    color: hsla(0, 0%, 100%, 0)!important
}

.purple-checkbox:checked+span:before {
    color: #7274ff!important
}

.card {
    border-radius: 5px;
    box-shadow: 0 1px 10px 0 rgba(5, 5, 5, .13)
}

.card .card-header {
    padding: 1.5rem
}

.card .card-header h4 {
    font-weight: 700;
    margin: 0
}

.card .card-img {
    overflow: hidden
}

.card .card-img img {
    position: relative;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    display: block
}

.card .card-footer {
    padding: 1.5rem 0 1.5rem 1.5rem
}

.card .card-footer h4 {
    font-weight: 700;
    margin: 0
}

.card-no-footer .card-img img {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px
}

.card-no-header .card-img img {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px
}

.card-hover,
.card-hover:hover {
    transition: all .3s
}

.card-hover:hover {
    box-shadow: 0 11px 16px 0 rgba(5, 5, 5, .23)
}

.btn {
    padding: 1rem 1.5rem;
    color: #fff;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: 700
}

.btn-primary {
    border-radius: 5px
}

.btn-rounded {
    border-radius: 30px
}

.btn-outlined {
    border-width: 3px;
    border-style: solid;
    transition: all .5s
}

.btn-outlined:hover {
    color: #fff;
    transition: all .5s
}

.gradient-black {
    background: #212121!important
}

.black-btn {
    border-color: #212121;
    color: #212121
}

.black-btn:hover {
    background-color: #212121
}

.green-btn {
    border-color: #1fdeb3;
    color: #1fdeb3
}

.green-btn:hover {
    background-color: #1fdeb3
}

.orange-btn {
    border-color: #ff9f33;
    color: #ff9f33
}

.orange-btn:hover {
    background-color: #ff9f33
}

.purple-btn {
    border-color: #7274ff;
    color: #7274ff
}

.purple-btn:hover {
    background-color: #7274ff
}

button:disabled {
    opacity: .8;
    color: #fff;
    border: unset
}

button:disabled,
button:disabled:hover {
    box-shadow: unset;
    background: #c1c1c1
}

.responsive-image {
    overflow: hidden
}

.responsive-image img {
    width: 100%
}

.responsive-video {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden
}

.responsive-video embed,
.responsive-video iframe,
.responsive-video object {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

body {
    font-family: Roboto, sans-serif;
    padding: 0;
    margin: 0
}