* {
    box-sizing: border-box;
}

div.card{
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.header{
	background-color: #2b2525;
    height: 12%;
}

.header img{
    margin-top: 1%;
    margin-left: 2%;
    margin-bottom: 1%;
    width: 8%;
    height: 4%;
}

.header p{
    float:right;
    font-size: 2em;
    color: #fbfbfb;
    margin-top:2%;
    margin-right: 2%;
}

.banner {
    height: 330px;
    overflow: hidden;
    position: relative;
}

.banner img{
    height: 332px;
    width: 1685px;
    float: left;
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: hidden;
    position: absolute;
    padding-left: 315px;
}

.banner .banner_text {
    width: auto;
    height: auto;
}

.banner .banner_text .banner_top {
    position: relative;
    z-index: 100;
    padding: 0px 10px;
}

.banner .banner_text .banner_top h1 {
    font-size: 70px;
    text-transform: uppercase;
    font-weight: 500;
    line-height: 1;
    color: #f58423;
    margin-bottom: 27px;
    margin-top: 32px;
}

.banner .banner_text .banner_top h1 p {
    margin-bottom: 0px;
    line-height: 1;
}

.banner .banner_text .banner_top h1 strong {
    font-weight: 500;
    color: #2A343E;
}

.banner .banner_text .banner_inner {
    -webkit-transform: skew(-45deg);
    -ms-transform: skew(-45deg);
    transform: skew(-45deg);
    background-color: #fff;
    width: 500px;
    height: 620px;
    position: absolute;
    top: 0px;
}

.banner .banner_image {
    height: 360px;
    width: 1685px;
    float: left;
    -webkit-transform: skew(-45deg);
    -ms-transform: skew(-45deg);
    transform: skew(-45deg);
    overflow: hidden;
    position: absolute;
    padding-left: 315px;
}

.variant-background-color-4 {
    background-color: #2A343E;
    color: #fff;
}

.variant-background-color-3 {
    background-color: #f58423;
}

header .logo {
    padding: 20px 0px 21px;
    float: left;
}

header .logo img {
    float: left;
    width: 155px;
}

.header {
    background-color: rgba(42, 52, 62, 1.00);
}

.header img {
        margin-top: 0.5%;
        /*margin-left: 1%;*/
        margin-bottom: 0.5%;
        width: 8%;
        height: 4%;
}

.header p {
    float: right;
        font-size: 24px;
        color: #fbfbfb;
        margin-top: 1.2%;
        margin-right: 2%;
}


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

   .header img{
        margin-top: 1%;
        margin-left: 5%;
        margin-bottom: 1%;
        width: 18%;
        height: 4%;
    }

    .header p{
        float:right;
        font-size: 1em;
        color: #fbfbfb;
        margin-top:3%;
        margin-right: 8%;
    }

    .banner {
        height: 280px;
        overflow: hidden;
        position: relative;
    }

    .banner img{
        height: 280px;
        width: 885px;
        float: left;
        overflow: hidden;
        overflow-x: hidden;
        overflow-y: hidden;
        position: absolute;
        padding-left: 100px;
    }

    .banner .banner_text {
        width: 300px;
        height: 288px;
    }

    .banner .banner_text .banner_top {
        position: relative;
        z-index: 100;
        padding: 0px 10px;
    }

    .banner .banner_text .banner_top h1 {
        font-size: 55px;
        text-transform: uppercase;
        font-weight: 500;
        line-height: 1;
        color: #f58423;
        margin-bottom: 27px;
        margin-top: 32px;
    }

    .banner .banner_text .banner_top h1 p {
        margin-bottom: 0px;
        line-height: 1;
    }

    .banner .banner_text .banner_top h1 strong {
        font-weight: 500;
        color: #2A343E;
    }

    .banner .banner_text .banner_inner {
        -webkit-transform: skew(-40deg);
        -ms-transform: skew(-40deg);
        transform: skew(-40deg);
        background-color: #fff;
        width: 540px;
        height: 388px;
        margin-left: -200px;
        position: absolute;
        top: 0px;
    }
}

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

   .header img{
        margin-top: 1%;
        margin-left: 5%;
        margin-bottom: 1%;
        width: 18%;
        height: 4%;
    }

    .header p{
        float:right;
        font-size: 1em;
        color: #fbfbfb;
        margin-top:3%;
        margin-right: 8%;
    }

    .banner {
        height: 300px;
        overflow: hidden;
        position: relative;
    }

    .banner img{
        height: 0px;
        width: 0px;
        float: left;
        overflow: hidden;
        overflow-x: hidden;
        overflow-y: hidden;
        position: absolute;
        padding-left: 100px;
    }

    .banner .banner_text {
        width: 388px;
        height: 288px;
    }

    .banner .banner_text .banner_top {
        position: relative;
        z-index: 100;
        padding: 10px 10px;
    }

    .banner .banner_text .banner_top h1 {
        font-size: 55px;
        text-transform: uppercase;
        font-weight: 500;
        line-height: 1;
        color: #f58423;
        margin-bottom: 27px;
        margin-top: 32px;
    }

    .banner .banner_text .banner_top h1 p {
        margin-bottom: 0px;
        line-height: 1;
    }

    .banner .banner_text .banner_top h1 strong {
        font-weight: 500;
        color: #2A343E;
    }

    .banner .banner_text .banner_inner {
        -webkit-transform: skew(-40deg);
        -ms-transform: skew(-40deg);
        transform: skew(-40deg);
        background-color: #fff;
        width: 350px;
        height: 388px;
        margin-left: -200px;
        position: absolute;
        top: 0px;
    }
}