﻿/* General Style */
/* ===================== GRID ======================== */
.conDP {
    display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 100%;
	gap: 0px 0px;
    grid-template-areas: 
"a b ";
}

.pic1 { grid-area: a; }
.pic2 { grid-area: b; }

@media (max-width: 768px) {
.conDP {
    display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto auto;
	gap: 0px 0px;
    grid-template-areas: 
"a "
"b ";
}
}
/* ===================== END GRID 1 ======================== */
.conSTS {
    display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 100%;
column-gap: 20px;
	grid-template-areas: 
"a b ";
}

.txt1 { grid-area: a; }
.pic2 { grid-area: b; }

@media (max-width: 768px) {
.conSTS {
    display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto auto;
row-gap: 20px;
       grid-template-areas: 
"a "
"b ";
}
}
/* ===================== END GRID ======================== */
#tab{ font-family: Arial, Helvetica, sans-serif; font-size: calc(3vw-0.5vw); background: Gainsboro; color: #000; padding: 1vh 2vw; border-radius: 10px; width: 70vw; margin: auto; }
.btn { width: 142px; height: 30px; cursor: pointer ; border: none; background: DodgerBlue; color:#fff; text-transform: appercase; font-family: Arial; font-size: 14px; border-radius:15px; outline:none; transition:0.2s; }
.btn:hover {transform:translateY(-5px); box-shadow:0 5px 0 darkgreen; color:#d5d5d5; }
.btn:active {transform:translateY(-2px); box-shadow:0 3px 0 darkgreen; }
.btn0 { width: 144px; height: 30px; cursor: pointer ; border: none; background: Magenta; color:#fff; text-transform: appercase; font-family: Arial; font-size: 14px; border-radius:15px; outline:none; transition:0.2s; }
.btn0:hover {transform:translateY(-5px); box-shadow:0 5px 0 darkgreen; color:#d5d5d5; }
.btn0:active {transform:translateY(-2px); box-shadow:0 3px 0 darkgreen; }
.btn1 { text-decoration-style: none; color:Teal; width: 136px; height: 30px; cursor: pointer ; border: none; background: Gray; text-transform: appercase; font-family: Arial; font-size: 14px; border-radius:15px;}
.btn1:hover {transform:translateY(-5px); box-shadow:0 5px 0 darkgreen; color:#d5d5d5; }
.btn1:active {transform:translateY(-2px); box-shadow:0 3px 0 darkgreen; }
#botn{display: flex; justify-content: space-between; align-content: center; }
/* ===================== End ========================= */