/* REGISTER ------------------------------- */

#register {
    position: relative;
    float: left;
    left: 50%;
    margin-left: -340px;
    width: 680px;
    height: auto
}
#registerTitle {
    margin-bottom: 50px;
    padding: 0 20px;
    font: 32px/1.3 "monBold";
    text-align: center;
    letter-spacing: 1px
}
#register > button {
    position: relative;
    float: left;
    left: 50%;
    margin-left: -120px;
    width: 240px;
    height: 50px;
    font: 600 20px "monBold";
    color: #fff;
    letter-spacing: 1px;
    background: #0b6632;
    cursor: pointer;
}
#register > button:active {
    background: #11994a
}
/* FOOTER --------------------------------- */

footer {
    position: relative;
    float: left;
    margin-top: 70px;
    width: 100%;
    height: 350px
}
#footerBlock1 {
    position: relative;
    float: left;
    width: calc(100% - 500px);
    height: 100%;
    background: #0b6632
}
#footerBlock1-1 {
    position: relative;
    float: left;
    clear: both;
    width: calc(100% - 311px);
    height: 100%
}
#footerPhone {
    position: relative;
    float: left;
    margin: 50px 0 0 50px;
    width: auto;
    height: auto;
    font: 500 16px/1.4 "monBold";
    text-align: left;
    letter-spacing: 2px;
}
#footerEmail {
    position: relative;
    float: right;
    margin: 50px 50px 0 0;
    width: 180px;
    height: auto;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}
#footerEmail:hover {
    color: #ffcc2a
}
#footerEmail > #icon {
    position: relative;
    float: left;
    margin-top: 5px;
    width: 44px;
    height: 30px;
    background: url(../img/email.png);
    transition: all 0.2s ease-in-out
}
#footerEmail:hover #icon {
    background: url(../img/email.png) -0 -31px
}
#footerEmail > #email {
    position: relative;
    float: right;
    width: auto;
    font: 400 13px/1.5 "Fira Sans";
    text-align: left;
    letter-spacing: 0.3px
}
#footerAddressTitle {
    position: relative;
    float: left;
    clear: both;
    margin: 35px 0 2px 50px;
    font: 14px/1.5 "monBold";
}
#footerAddress {
    position: relative;
    float: left;
    clear: both;
    margin: 5px 0 0 50px;
    width: 350px;
    height: auto;
    font: 400 12px/1.5 "Fira Sans";
    letter-spacing: 0.6px;
}
#footerAddress:last-child {
    margin: 0 0 0 50px
}
#footerSocials {
    position: absolute;
    left: 50px;
    bottom: 50px;
    width: auto;
    height: 25px
}
#footerSocials > a {
    position: relative;
    float: left;
    margin-right: 50px;
    width: 25px;
    height: 25px;
    transition: all 0.2s ease-in-out
}
.google {
    background: url(../img/socials.png) -0 -0
}
.youtube {
    background: url(../img/socials.png) -26px -0
}
.twitter {
    background: url(../img/socials.png) -52px -0
}
.facebook {
    background: url(../img/socials.png) -78px -0
}
.socialsEmail {
    background: url(../img/socialsEmail.png) -0 -0
}
.socialsEmail {
    margin: 0 !important
}
.google:hover {
    background: url(../img/socials.png) -0 -26px
}
.youtube:hover {
    background: url(../img/socials.png) -26px -26px
}
.twitter:hover {
    background: url(../img/socials.png) -52px -26px
}
.facebook:hover {
    background: url(../img/socials.png) -78px -26px
}
.socialsEmail:hover {
    background: url(../img/socialsEmail.png) -0 -26px
}
#footerBlock1-2 {
    position: relative;
    float: right;
    width: 311px;
    height: 100%
}
.arrow {
    position: absolute;
    left: 0;
    top: 50px;
    width: 10px;
    height: 10px;
    background: url(../img/arrow.png);
    cursor: pointer;
    transition: all 0.2s ease-in-out
}
.arrow:hover {
    top: 40px
}
#footerLine {
    position: absolute;
    left: 4px;
    bottom: 50px;
    width: 1px;
    height: 230px;
    background: #fff
}
#footerMenu {
    position: relative;
    float: left;
    margin: 50px 0 0 100px;
    width: auto;
    font: 300 12px/1.8 "Fira Sans";
    letter-spacing: 1px;
    list-style: none
}
#footerLanguage > #globe {
    position: relative;
    float: right;
    margin: 17px 50px 0 30px;
    width: 20px;
    height: 20px;
    background: url(../img/globe.png)
}
#footerLanguage {
    position: absolute;
    bottom: 50px;
    width: 100%;
    height: auto
}
#footerLanguage > #lang {
    position: relative;
    float: right;
    font: 600 12px/1.8 "Fira Sans";
    text-align: right;
    letter-spacing: 1px
}
#footerLanguage > #lang > a {
    font-weight: 400
}
#footerBlock2 {
    position: relative;
    float: right;
    width: 500px;
    height: 100%;
    background: #ffcc2a
}
#footerBlock2-1 {
    position: relative;
    float: left;
    padding: 50px;
    width: 100%;
    height: 100%;
    color: #1f2621;
    text-align: right;
    letter-spacing: 1px;
    box-sizing: border-box
}
#footerLogo {
    position: relative;
    float: left;
    margin-top: 20px;
    width: 100%;
    height: 120px;
    object-fit: contain;
    object-position: 50% 50%
}
#companyName {
    position: relative;
    float: left;
    margin-top: 35px;
    font: 18px/1.6 "monBold";
    text-align: center;
    text-transform: uppercase;
    width: 100%;
}
#copyright {
    position: relative;
    float: left;
    text-align: center;
    width: 100%;
    font: 10px/1.6 "monLight";
    letter-spacing: 1px;
    text-transform: uppercase;
}
/* RESPONSIVE ----------------------------- */

@media screen and (max-width: 1290px) {
    #footerPhone {
        width: calc(100% - 50px)
    }
    #footerEmail {
        display: none
    }
    #footerAddress {
        width: 250px;
        font-size: 12px
    }
}
@media screen and (max-width: 1200px) {
    #footerBlock1-1 {
        width: calc(100% - 250px)
    }
    #footerBlock1-2 {
        width: 250px
    }
    #footerMenu {
        margin: 50px 0 0 40px
    }
    #footerSocials > a {
        margin-right: 30px
    }
}
@media screen and (max-width: 1080px) {
    footer {
        height: 700px
    }
    #footerBlock1,
    #footerBlock2 {
        width: 100%;
        height: 350px
    }
    #footerEmail {
        display: block
    }
    #footerAddress {
        width: 350px;
    }
    #footerPhone {
        width: auto
    }
    #footerBlock1-1 {
        width: calc(100% - 311px)
    }
    #footerBlock1-2 {
        width: 311px
    }
    #footerMenu {
        margin: 50px 0 0 100px
    }
    #FooterSocials > a {
        margin-right: 50px
    }
}
@media screen and (max-width: 830px) {
    #footerPhone {
        width: calc(100% - 50px)
    }
    #footerEmail {
        display: none;
    }
    #footerAddress {
        width: 250px;
    }
}
@media screen and (max-width: 700px) {
    #register {
        left: 0;
        margin: 0;
        width: 100%
    }
}
@media screen and (max-width: 660px) {
    #footerBlock1-1 {
        width: calc(100% - 250px)
    }
    #footerBlock1-2 {
        width: 250px
    }
    #footerMenu {
        margin: 50px 0 0 40px
    }
    #footerSocials > a {
        margin-right: 30px
    }
}
@media screen and (max-width: 580px) {
    footer {
        height: 1050px
    }
    #footerBlock1 {
        height: 700px
    }
    #footerBlock1-1,
    #footerBlock1-2 {
        width: 100% !important;
        height: 350px
    }
    #footerBlock1-2 {
        background: #084d26
    }
    #footerPhone {
        width: auto
    }
    #footerAddress {
        width: 350px;
    }
    #footerSocials {
        bottom: 30px
    }
    #footerSocials > a {
        margin-right: 50px
    }
    #footerMenu {
        float: right;
        text-align: right;
        margin: 50px 100px 0 0
    }
    .arrow {
        left: 50px
    }
    #footerLine {
        left: 54px
    }
    #footerBlock2-1 {
        text-align: left
    }
}
@media screen and (max-width: 420px) {
    #footerBlock1-1 {
        height: 380px
    }
    #footerPhone {
        margin: 30px 0 0 20px;
        width: calc(100% - 50px)
    }
    #footerAddressTitle {
        margin: 50px 0 0 20px
    }
    #footerAddress {
        width: calc(100% - 80px);
        margin: 20px 0 0 20px;
        font-size: 11px
    }
    #footerMenu {
        font: 300 12px/2.2 "Fira Sans"
    }
    #footerSocials {
        left: 20px
    }
    #footerSocials > a {
        margin-right: 30px
    }
    #footerBlock2-1 {
        padding: 50px 20px
    }
    #companyName {
        font: 500 16px/1.6 "Fira Sans"
    }
}
@media screen and (max-width: 300px) {
    #registerTitle {
        font: 22px/1.5 "monBold"
    }
    #footerPhone {
        margin: 30px 0 0 20px;
        width: calc(100% - 20px)
    }
    #footerMenu {
        margin: 30px 70px 0 0
    }
    #footerLanguage > #globe {
        margin: 17px 20px 0 30px
    }
    #footerSocials > a {
        margin-right: 20px
    }
    .arrow {
        left: 20px
    }
    #footerLine {
        left: 24px
    }
}
@media screen and (max-width: 270px) {
    #registerButton {
        margin-left: -90px;
        width: 180px
    }
}