* {
    box-sizing: border-box;
    font-family: 'Lato', sans-serif; /* free font similar to ProximaNova*/
}

ul {
    padding: 0;
}

img {
    max-width: 100%;
}

header {
    background: url('../img/Group4.svg');
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 1rem;
}

h1, header h2 {
    font-family: 'Montserrat', sans-serif; /* free font similar to SharpSansNo1 */
    font-weight: bold;
    color: #02363D;
    font-size: 2rem;
    line-height: 2.75rem;
}

header h2 {
    font-style: italic;
}

header p {
    text-transform: uppercase;
}

header > p {
    color: #00373E ;
    font-weight: 600;
    font-size: 1.3125rem; /* 21px */
    line-height: 2.5rem; 
    margin-bottom: 2.75rem; /* 44px */
}

.tag {
    background: #C05100;
    border-radius: 3px;
    width: 5.5rem; /* 88px */
    height: 1.75rem; /* 28px */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1.625rem; /* 26px */
    margin-top: 5rem; /* 80px */
}

.tag p {
    font-weight: bold;
    font-size: .8125rem;  /* 13px */
    color: #FFFFFF;
    letter-spacing: 0.93px;
    text-align: center;
    line-height: 15px;
}

.logos {
    display: flex;
    justify-content: space-between;
    padding: 0;
    flex-wrap: wrap;
}

.logos li {
    background-repeat: no-repeat;
    background-position: center bottom;
    object-fit: cover;
    color: transparent;
    height: 2.625rem; /* 42px */
    margin: 0 calc(1.94 / 143 * (100vw - 2rem) - 2.9px);
}

.logos li:first-of-type, .logos li:nth-of-type(4) {
    margin-left: 0;
}

.logos li:last-of-type, .logos li:nth-of-type(3) {
    margin-right: 0;
}

#all > div {
    display: flex;
    flex-direction: column;
    margin-top: 5.125rem; /* 82px */
}

#all > div, #all > .logos {
    margin-left: 1rem;
    margin-right: 1rem;
}

#all > div > div {
    width: 100%;
    max-width: 37.0625rem; /* 593px */
    margin: auto;
}

#all > .logos {
    width: calc(100% - 2rem);
    max-width: 37.0625rem; /* 593px */
    margin: auto;
}

main > p {
    color: #405457;
/*    letter-spacing: 0; */
    line-height: 1.75rem; /* 28px */
    margin-top: 1.9375rem; /* 31px */
}

main ul {
    margin: 2.5rem 0;
}

main li, form li {
    list-style: none;
}

.card {
    display: flex;
    font-family: 'Montserrat', sans-serif;
    line-height: 1.625rem; /* 26px */
    padding: 0 .375rem; /* 109px - 74px - 29px = 6px */
    margin-top: 1.875rem; /* 30px */
}

.card figure {
    margin: 0;
    display: flex;
    align-items: center;
    min-width: 74px;
}

.card > div {
    margin-left: 1.8125rem; /* 29px */
}

.card h3 {
    font-weight: 600;
    font-size: 1.25rem; /* 20px */
    color: #02363D;
    margin: 0;
}

.card p {
    font-weight: 500;
    color: #021800;
    margin-top: .3125rem; /* 5px */
    margin-bottom: 1.25rem; /* 20px */
}

form {
    padding: 2.375rem 3rem 4.75rem 3rem; /* 38px 48px 76px 48px */
    background: #F8F9F9;
    width: 100%;
    margin: 2rem auto 5rem auto;
    max-width: 28.9375rem; /* 463px */
}

form h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 1.25rem; /* 20px */
    color: #02363D;
    text-align: center;
    line-height: 1.8125rem; /* 29px */
}

input, label {
    display: block;
}

label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: .875rem; /* 14px */
    color: #02363D;
    margin-top: 1.5rem; /* 24px */
}

input, select {
    height: 3.125rem; /* 50px */
    width: 100%; /*23rem; /* 368px */
}

select {
    color: #68737D;
}

input:not([type="submit"]), select {
    border: 1px solid #68737D;
    padding-left: 1.03125rem; /* 16.5px */
    padding-right: 1.03125rem;
}

input[type="submit"] {
    margin-top: 2.1875rem; /* 35px */
    font-size: 1.1875rem; /* 19px */
    color: #FFFFFF;
    background: #02363D;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
}

footer {
    margin-top: 5.8125rem; /* 93px */
    background-color: #f8faf9; /* obteined from the image in the mockup */
    color: #405457;
    padding-bottom: 3.875rem; /* 62px */
}

footer > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    border-bottom: 1px solid #e2e5e8;
    width: 90%;
    margin: auto;
}

.social li{
	display: inline-block;
	width: 51px; 
	height: 51px;
	margin: 6px 4px;
}
.social li a{ 
    background-image: url('../img/sprite.jpg');
    background-repeat: no-repeat; 
	display: inline-block; 
	width: 51px; 
	height: 51px; 
	overflow: hidden; 
    color: transparent;
    background-position-y: 0;
}

.text-center {
    text-align: center;
}

.bold {
    font-weight: bold;
}

.modal-mask {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(105, 105, 105, .8); /* #696969 80% */
  display: table;
  transition: opacity .3s ease;
}

.modal-wrapper {
    display: table-cell;
    vertical-align: middle;
}

.modal-container {
    width: 90%;
    margin: 0px auto;
    padding: 20px 20px;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
    transition: all .3s ease;
}

.modal-container > div {
    padding: 2.5rem .75rem;
}

.modal-container p {
    font-family: 'Montserrat', sans-serif;
}

.modal-header {
    margin-top: 0;
    font-weight: 600;
    font-size: 1.875rem; /* 30px */
    color: #02353C;
    text-align: center;
}

.modal-body {
    margin: 20px 0;
    font-weight: 500;
    font-size: 1.125rem; /* 18px */
    text-align: center;
    color: #021700;
    line-height: 2.4375rem; /* 39px */
}

.modal-default-button {
    float: right;
    font-size: 1.25rem; /* 20px */
    color: #000000;
    border: none;
    background: none;
}

.modal-enter {
    opacity: 0;
}

.modal-leave-active {
    opacity: 0;
}

.modal-enter .modal-container,
.modal-leave-active .modal-container {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

@media (min-width: 420px) { 
    .logos li {
        margin: 0 6%;
    }
}

@media (min-width: 568px) { 
    .logos li {
        margin: 0 8%;
    }

    .modal-container {
        width: 75%;
    }

    .modal-container > div {
        padding: 4rem 2rem;
    }
}

@media (min-width: 625px) { 
    h1, header h2 {
        font-size: 2.5rem; /* 40px */
        line-height: 3.25rem; /* 52px */
    }
    .logos li {
        margin: 0;
    }

    .modal-container {
        width: 60%;
    }

    footer > div {
        width: 100%;
        max-width: 37.0625rem; /* 593px */
    }
}

@media (min-width: 1200px) { 
    .logos li {
        margin: 0 .475rem; /* 14px/2 */
    }

    #all > div {
        flex-direction: row;
        max-width: 1129px;
        margin-left: auto;
        margin-right: auto;
    }

    #all > div > div {
        margin: 0;
    }

    main {
        width: calc(100% - 23px);
    }

    form {
        margin-top: 0;
    }

    aside {
        padding-left: 4.5625rem; /* 73px */
    }

    #all > .logos {
        margin-left: calc((100vw - 1129px)/2);
        margin-top: 3rem;
    }

    form {
        margin: auto;
    }

    footer > div {
        max-width: 1129px;
    }

    .modal-container {
        width: 642px;
    }

    .modal-container > div {
        padding: 117px 88px 119px 88px;
    }
}