@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,600;0,800;1,200;1,300;1,400;1,600;1,800&display=swap');

body {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    background: url(../image/bg3.jpg) fixed;
    background-size: cover;
}

a {
	text-decoration:none;
	color:#fff;
}

h2 {
	color:#fff;
}

header {
    width: 100%;
    margin: 0px auto 0 auto;
    padding: 40px 0 0 0;
    display: table;
    border-top: 6px solid #ff3232;
}

header img {
    width: 350px;
    margin: 0 auto;
    display: table;
}

#wrapper {
    padding: 20px 0%;
    color: #010202;
    display: table;
    width: 100%;
}

#wrapper h3 {
    padding: 0 15%;
    text-align: left;
    margin: 2px 0 0 0;
    -webkit-transition: all 0.45s ease-in-out;
    -moz-transition: all 0.45s ease-in-out;
    -o-transition: all 0.45s ease-in-out;
    transition: all 0.45s ease-in-out;
}

#wrapper p {
    padding: 0 15%;
    text-align: justify;
}

#logo1 {
    width: 30%;
    float: left;
    background: #bfb3ab;
    height: 435px;
}


#logo1 img {
    width: 72%;
    display: table;
    margin: 145px auto;
}
	
#choose {
    display: block;
    padding: 0% 0% 0% 0%;
    margin: 0 0 0 0;
    float: left;
    width: 70%;
    height: 435px;
    background: #bfb3ab;
}

#choose a {
    -webkit-transition: all 0.45s ease-in-out;
    -moz-transition: all 0.45s ease-in-out;
    -o-transition: all 0.45s ease-in-out;
    transition: all 0.45s ease-in-out;
    width: 100%;
    height: 100%;
    display: contents;
}

#choose a:hover {
	filter: saturate(0.8) brightness(119%);
	-webkit-filter: saturate(0.8) brightness(119%);
    -webkit-transition: all 0.45s ease-in-out;
    -moz-transition: all 0.45s ease-in-out;
    -o-transition: all 0.45s ease-in-out;
    transition: all 0.45s ease-in-out;
}


#choose a:hover h2 {
    color: white;
    background: #ff3232;
    -webkit-transition: all 0.45s ease-in-out;
    -moz-transition: all 0.45s ease-in-out;
    -o-transition: all 0.45s ease-in-out;
    transition: all 0.45s ease-in-out;
}


#choose a:hover #rhombus1 h2 {
    color: white;
    background: #DD6048;
    -webkit-transition: all 0.45s ease-in-out;
    -moz-transition: all 0.45s ease-in-out;
    -o-transition: all 0.45s ease-in-out;
    transition: all 0.45s ease-in-out;
}

#choose a:hover #rhombus2 h2 {
    color: white;
    background: #343434;
    -webkit-transition: all 0.45s ease-in-out;
    -moz-transition: all 0.45s ease-in-out;
    -o-transition: all 0.45s ease-in-out;
    transition: all 0.45s ease-in-out;
}


#choose a:hover #rhombus3 h2 {
    color: white;
    background: #006633;
    -webkit-transition: all 0.45s ease-in-out;
    -moz-transition: all 0.45s ease-in-out;
    -o-transition: all 0.45s ease-in-out;
    transition: all 0.45s ease-in-out;
}



#rhombus1 {
    position: relative;
    width: 33.33333%;
    min-width: 33.33333%;
    height: 100%;
    background: #000 url(../image/1.jpg) center;
    /* margin: 0px -56px 0; */
    -moz-clip-path: polygon(0 0, 85% 0, 100% 100%, 15% 100%);
    -o-clip-path: polygon(0 0, 85% 0, 100% 100%, 15% 100%);
    /* -webkit-clip-path: polygon(0 0, 85% 0, 100% 100%, 15% 100%); */
    /* clip-path: polygon(0 0, 85% 0, 100% 100%, 15% 100%); */
}

#rhombus1 h2 {
    position: absolute;
    bottom: 0px;
    left: 0;
    right: 0;
    height: 70px;
    width: 100%;
    text-align: center;
    color: #fff;
    background: rgb(0,0,0);
	background: -moz-linear-gradient(0deg, rgba(0,0,0,0.896796218487395) 0%, rgba(0,0,0,0.8939950980392157) 100%);
	background: -webkit-linear-gradient(0deg, rgba(0,0,0,0.896796218487395) 0%, rgba(0,0,0,0.8939950980392157) 100%);
	background: linear-gradient(0deg, rgba(0,0,0,0.896796218487395) 0%, rgba(0,0,0,0.8939950980392157) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
    padding: 23px 0px;
    margin: 0;
    color: red -webkit-transition: all 0.45s ease-in-out;
    -moz-transition: all 0.45s ease-in-out;
    -o-transition: all 0.45s ease-in-out;
    transition: all 0.45s ease-in-out;
}


#choose #rhombus1 {
    float: right;
}


#rhombus2 {
    position: relative;
    width: 33.33333%;
    min-width: 33.33333%;
    height: 100%;
    background: #000 url(../image/2.jpg) center;
    /* margin: 0px -56px 0; */
    -moz-clip-path: polygon(0 0, 85% 0, 100% 100%, 15% 100%);
    -o-clip-path: polygon(0 0, 85% 0, 100% 100%, 15% 100%);
    /* -webkit-clip-path: polygon(0 0, 85% 0, 100% 100%, 15% 100%); */
    /* clip-path: polygon(0 0, 85% 0, 100% 100%, 15% 100%); */
}


#rhombus2 h2 {
    position: absolute;
    bottom: 0px;
    left: 0;
    right: 0;
    height: 68px;
    line-height: 61px;
    width: 100%;
    text-align: center;
    color: #fff;
    background: -moz-linear-gradient(0deg, rgba(0,0,0,0.896796218487395) 0%, rgba(0,0,0,0.8939950980392157) 100%);
	background: -webkit-linear-gradient(0deg, rgba(0,0,0,0.896796218487395) 0%, rgba(0,0,0,0.8939950980392157) 100%);
	background: linear-gradient(0deg, rgba(0,0,0,0.896796218487395) 0%, rgba(0,0,0,0.8939950980392157) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);

    padding: 24px 0px;
    margin: 0;
    color: red -webkit-transition: all 0.45s ease-in-out;
    -moz-transition: all 0.45s ease-in-out;
    -o-transition: all 0.45s ease-in-out;
    transition: all 0.45s ease-in-out;
}


#choose #rhombus2 {
    float: right;
}


#rhombus3 {
    position: relative;
    width: 33.33333%;
    min-width: 33.33333%;
    height: 100%;
    background: #000 url(../image/3.jpg) center;
    /* margin: 0px -56px 0; */
    -moz-clip-path: polygon(0 0, 85% 0, 100% 100%, 15% 100%);
    -o-clip-path: polygon(0 0, 85% 0, 100% 100%, 15% 100%);
    /* -webkit-clip-path: polygon(0 0, 85% 0, 100% 100%, 15% 100%); */
    /* clip-path: polygon(0 0, 85% 0, 100% 100%, 15% 100%); */
}

#rhombus3 h2 {
    position: absolute;
    bottom: 0px;
    left: 0;
    right: 0;
    height: 70px;
    width: 100%;
    text-align: center;
    color: #fff;
    background: -moz-linear-gradient(0deg, rgba(0,0,0,0.896796218487395) 0%, rgba(0,0,0,0.8939950980392157) 100%);
	background: -webkit-linear-gradient(0deg, rgba(0,0,0,0.896796218487395) 0%, rgba(0,0,0,0.8939950980392157) 100%);
	background: linear-gradient(0deg, rgba(0,0,0,0.896796218487395) 0%, rgba(0,0,0,0.8939950980392157) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
    padding: 23px 0px;
    margin: 0;
    color: red -webkit-transition: all 0.45s ease-in-out;
    -moz-transition: all 0.45s ease-in-out;
    -o-transition: all 0.45s ease-in-out;
    transition: all 0.45s ease-in-out;
}


#choose #rhombus3 {
    float: right;
}

footer .footerrow {
    padding: 0 15%;
    display: table;
    width: 70%;
}

footer {
    text-align: center;
    background: #bfb3ab;
    padding: 30px 0 30px 0;
    color: #ffffff;
    position: relative;
    bottom: 0;
    width: 100%;
    display: table;
}

footer h3 {
    margin: 0;
}

footer a {
    font-size: 20px;
    padding: 0 8px;
    line-height: 12px;
    color: #ffffff;
    -webkit-transition: all 0.45s ease-in-out;
    -moz-transition: all 0.45s ease-in-out;
    -o-transition: all 0.45s ease-in-out;
    transition: all 0.45s ease-in-out;
}

footer a:hover {
    color: #000000;
    -webkit-transition: all 0.45s ease-in-out;
    -moz-transition: all 0.45s ease-in-out;
    -o-transition: all 0.45s ease-in-out;
    transition: all 0.45s ease-in-out;
}

footer a:hover span {
    color: #fff;
	-webkit-transition: all 0.45s ease-in-out;
	-moz-transition: all 0.45s ease-in-out;
	-o-transition: all 0.45s ease-in-out;
	transition: all 0.45s ease-in-out;
}

footer span {
    font-size: 26px;
    color: #000000;
    -webkit-transition: all 0.45s ease-in-out;
    -moz-transition: all 0.45s ease-in-out;
    -o-transition: all 0.45s ease-in-out;
    transition: all 0.45s ease-in-out;
}

.footer1 {
    float: left;
    width: 50%;
    text-align: left;
    padding: 0;
    display: table;
}

.footer2 {
    float: right;
    width: 50%;
    text-align: right;
    padding: 0;
    display: table;
    line-height: 30px;
}



@media (max-width: 768px) {
	
#logo1 img {
    width: 250px;
    display: table;
    margin: 25px auto;
}

#logo1 {
    width: 100%;
    float: left;
    background: #bfb3ab;
    height: auto;
    display: table;
}

#choose {
    display: block;
    padding: 0% 0% 0% 0%;
    margin: 0 0 0 0;
    float: left;
    width: 100%;
    height: auto;
    background: #bfb3ab;
}

#rhombus3 h2, #rhombus2 h2, #rhombus1 h2 {
    position: absolute;
    bottom: 0px;
    left: 0;
    right: 0;
    height: auto;
    width: 100%;
}

#choose #rhombus3, #choose #rhombus2, #choose #rhombus1 {
    float: right;
    width: 100%;
    display: table;
    height: 370px;
}

.footer1 {
    float: left;
    width: 100%;
    text-align: center;
    padding: 0 0 25px 0;
    display: table;
}

.footer2 {
    float: right;
    width: 100%;
    text-align: center;
    padding: 0;
    display: table;
    line-height: 30px;
}

footer .footerrow {
    padding: 0 5%;
    display: table;
    width: 90%;
}



	
	
}