@charset "UTF-8";


.flex-c {display: flex; justify-content: space-between;}
.flex-c a {
margin:0;
width: 49%;
min-height:150px;
padding: 1rem;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
display:block;
color:#000;
text-decoration:none;
}

.flex-c a:hover,
a.btn_catalog:hover,
a.btn_contact:hover{
opacity:0.7;
}

.btn_catalog {
position: relative;
margin:0;
width: 49%;
min-height:150px;
padding: 1rem;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
display:block;
border:5px solid #777777;
text-decoration:none;
border-radius:10px;
background-color:#e4e4e4;
}

.btn_contact {
position: relative;
margin:0;
width: 75%;
min-height:150px;
padding: 1rem;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
display:block;
border:5px solid #3870ef;
text-decoration:none;
border-radius:10px;
background-color:#d2dffd;
}


.contact_p {
position: relative;
color: #fff;
border:5px solid #58abf8;
z-index: 1;
border-radius:10px;
background-color:#dfeefc;
}

.contact_p:before {
position: absolute;
top: 50%;
left: 1rem;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
content: '\f007';
font-weight:900;
color: #58abf8;
font-size: 100px;
font-family: "Font Awesome 5 Free";
z-index: -1;
}

.contact_c {
position: relative;
color: #fff;
border:5px solid #ebae1b;
z-index: 1;
border-radius:10px;
background-color:#fceecd;
}

.contact_c:before {
position: absolute;
top: 50%;
left: 1rem;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
content: '\f1ad';
font-weight:900;
color: #ebae1b;
font-size: 100px;
font-family: "Font Awesome 5 Free";
z-index: -1;
}

.btn_contact:before {
position: absolute;
top: 50%;
left: 1rem;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
content: '\f0e0';
font-weight:900;
color: #3870ef;
font-size: 100px;
font-family: "Font Awesome 5 Free";
z-index: 2;
}

.flex-c span,
.btn_catalog span,
.btn_contact span{
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
display:block;
font-size:1.5em;
font-weight:bold;
color:#fff;
border-radius:0 0 10px 10px;
letter-spacing:0.2rem;
text-indent: 0.2em;
padding:0 1rem 1px;
}

.flex-c span.cp{
background-color:#58abf8;
}

.flex-c span.cc{
background-color:#ebae1b;
}

.btn_catalog span.wcat{
background-color:#777777;
}

.btn_contact span.bcon{
background-color:#3870ef;
}

.flex-c p,
a.btn_catalog p,
a.btn_contact p{
position: absolute;
bottom:1rem;
right:1rem;
background-color:#212121;
color:#fff;
font-size: 1.5em;
padding:0.5rem 2.5rem;
display:inline-block;
z-index: 1;
}

.flex-c p:after,
a.btn_catalog p:after,
a.btn_contact p:after {
position: absolute;
top: 50%;
right: 0.5rem;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
content: '\f105';
font-weight:900;
color: #fff;
font-family: "Font Awesome 5 Free";
z-index: -1;
}




@media screen and (max-width: 768px){
.flex-c {display: block;}
.flex-c a,
.btn_catalog,
.btn_contact {
width: 100%;
margin-bottom:3rem;
}
.flex-c p,
a.btn_catalog p,
a.btn_contact p{
font-size: 1.2em;
}
}