style.css

/*
 Theme Name:   Magnumific
 Description:  Simple yet awesome theme for a local business
 Author:       Ionut Tolci
 Version:      1.0.0
*/

/********** SITEWIDE FONTS **********/
@font-face {
    font-family: 'ZonaPro-Bold';
    src:    url('/wp-content/themes/magnumific/fonts/zonapro/bold/ZonaPro-Bold.eot?#iefix') format('embedded-opentype'), 
            url('/wp-content/themes/magnumific/fonts/zonapro/bold/ZonaPro-Bold.otf')  format('opentype'), 
            url('/wp-content/themes/magnumific/fonts/zonapro/bold/ZonaPro-Bold.woff') format('woff'), 
            url('/wp-content/themes/magnumific/fonts/zonapro/bold/ZonaPro-Bold.ttf')  format('truetype'), 
            url('/wp-content/themes/magnumific/fonts/zonapro/bold/ZonaPro-Bold.svg#ZonaPro-Bold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ZonaPro-Thin';
    src:    url('/wp-content/themes/magnumific/fonts/zonapro/thin/ZonaPro-Thin.eot?#iefix') format('embedded-opentype'), 
            url('/wp-content/themes/magnumific/fonts/zonapro/thin/ZonaPro-Thin.otf')  format('opentype'),
            url('/wp-content/themes/magnumific/fonts/zonapro/thin/ZonaPro-Thin.woff') format('woff'), 
            url('/wp-content/themes/magnumific/fonts/zonapro/thin/ZonaPro-Thin.ttf')  format('truetype'), 
            url('/wp-content/themes/magnumific/fonts/zonapro/thin/ZonaPro-Thin.svg#ZonaPro-Thin') format('svg');
    font-weight: normal;
    font-style: normal;
}
/********** SITEWIDE FONTS **********/

/********** FONT SETTINGS **********/
.thin { font-family: 'ZonaPro-Thin'; }
.bold { font-family: 'ZonaPro-Bold'; }
.title { font-size: 3rem; }
.subtitle { font-size: 2rem; }
.keyword { color: darkblue; }
/********** FONT SETTINGS **********/

/********** SEPARATORS **********/
.section-separator { 
    background-color: #151728; 
    height: 2rem;
    margin: 8rem 0rem 8rem 0rem;
    width: 100%;
}
/********** SEPARATORS **********/

/********** UTILS **********/
a.anchor { 
    display: block;
    position: relative; 
    top: -10.6rem; 
    visibility: hidden;
}
.zoomable {
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.zoomable:hover {      
    -webkit-transform: scale(1.1);
    transform: scale(1.1);    
}
/********** UTILS **********/

/********** RESET **********/
html, body, div, h1, h2, h3, h4, h5, h6, 
ul, ol, dl, li, dt, dd, p, blockquote,
pre, form, fieldset, table, th, td { margin: 0; padding: 0; }
html { font-size: 62.5%; overflow-x: hidden; }
body { 
    background-color: white;
    font-family: 'Roboto'; 
    font-size: 1.6rem;
    position: relative;
    right: 0;
    text-decoration: none; 
}
a { text-decoration: none; }
/********** RESET **********/

/********** TOP NAV **********/
#topnav { 
    font-size: 1.8rem; 
    padding: 0.6rem 0rem 0.4rem 0rem;
    position: fixed; 
    width: 100%;
    z-index: 1000;
}
#topnav a { 
    margin-left: 2rem;
}
#topnav a img {
    max-height: 4.8rem;
    max-width: 5rem;
}
#topnav nav { float: right; margin-top: 1rem; margin-right: 4rem; }
#topnav nav a.menu { display: none; }
#topnav nav a {
    border-bottom: #151728 0.1rem solid;
    display: inline-block; 
    margin: 0.8rem 2rem 0.4rem 2rem; 
    vertical-align: middle; 
}
#topnav nav a:hover {
    border-bottom: aqua 0.1rem solid;
    color: aqua;
}
.blue { background-color: #151728; color: white; }
.blue a { color: white; }
@media only screen and (max-width: 835px) {
    #topnav { padding-top: 0.5rem; padding-bottom: 0.3rem; }
    #topnav nav a.smooth { display: none; }
    #topnav nav a.menu { display: inline-block; }
}
@media only screen and (max-width: 625px) {
    #topnav a { display: none; }
}
/********** TOP NAV **********/

/********** SLIDE MENU **********/
.slide-menu {
    display: none;
    padding: 3rem;
    position: absolute;
    top: -4rem;
    right: 0;
    bottom: 0;
    width: calc(30%);
    height: calc(100%);
    z-index: 9999;
}
.slide-menu > * { position: fixed; }
#close {
    cursor: pointer;
    font-size: 2rem;
    position: fixed;
}
/********** SLIDE MENU **********/

/********** BANNER **********/
#site-banner { 
    margin-top: 3rem; 
    margin-bottom: 0.6rem; 
    position: relative;
}
#site-banner-bar { top: 9rem; position: absolute; }
.banner-bar { height: 7rem; width: 100%; }
#short-desc { 
    display: inline-block; 
    float: right;
    margin: 0.8rem 10rem 0rem 0rem;
    text-align: center;
    vertical-align: middle; 
}
#site-banner img { 
    background-color: white;
    margin-bottom: 1rem;
    padding: 1.5rem;
    position: relative;
    top: 2rem;
    left: 5rem;
    width: 15rem;
    height: 15rem;
}
@media only screen and (min-width: 836px) and (max-width: 1000px) {
    .banner-bar { height: 7rem; }
    #site-banner img { 
        height: 15rem; 
        width: 15rem; 
        margin-bottom: 4rem;
        padding: 1rem; 
        top: 6rem;
    }
    #short-desc { margin-top: 1.2rem; }
    #short-desc p.title { font-size: 2.5rem; }
    #short-desc p.subtitle { font-size: 1.5rem; }
}
@media only screen and (max-width: 835px) {
    #site-banner-bar { top: 6.5rem; }
    .banner-bar { height: 5rem; }
    #site-banner img {
        height: 10rem;
        width: 10rem;
        padding: 0.7rem;
        top: 3rem;
    }
    #short-desc { margin-top: 0.8rem; }
    #short-desc p.title { font-size: 2rem; }
    #short-desc p.subtitle { font-size: 1rem; }
}
@media only screen and (max-width: 625px) {
    #site-banner-bar { top: 0.7rem; }
    .banner-bar { height: 15rem; }
    #site-banner img {
        top: 3rem;
        left: 1.5rem;
    }
    #short-desc { 
        margin-top: 5.5rem; 
        margin-right: 1.5rem; 
        max-width: 20rem; 
    }
    #short-desc p.title { font-size: 2rem; }
    #short-desc p.subtitle { font-size: 1rem; }
}
@media only screen and (max-width: 370px) {
    #short-desc { 
        margin-top: 6rem; 
        margin-right: 0rem; 
        max-width: 20rem; 
    }
    #short-desc p.title { font-size: 1.5rem; }
    #short-desc p.subtitle { font-size: 1rem; }
}
/********** BANNER **********/

/********** HOME **********/
section p { font-family: 'ZonaPro-Thin'; }
section#homesection { height: 25rem; }
section#homesection .banner {
    background-image: url('/wp-content/themes/magnumific/pictures/Poze/home.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    height: 100%;
    width: 100%;
}
#homesection .container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}
#homesection .content {
    max-width: 70rem;
    position: absolute;
    left: 50%;
    top: 50%;
}
#homesection p {
    background-color: white;
    border-radius: 0rem 0rem 0rem 0rem;
    opacity: 0.8;
    padding: 1rem;
    vertical-align: middle;
}
.section .banner img { width: 100%; }
.nav-expanded {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 5rem 0rem 5rem 0rem;
}
.section-anchor { 
    background-repeat: no-repeat;
    display: block;
    height: 15rem;
    width: 15rem;
    margin: 0rem;
}
.navitem-expanded {    
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: column wrap;
    -ms-flex-flow: column wrap;
    flex-flow: column wrap;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    margin: 1rem 4rem 1rem 4rem;
}
.navitem-expanded a { margin: 0; }
.navitem-expanded button {
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
    background-color: #5a5a5a;
    border: none;
    color: white;
    font-family: 'ZonaPro-Thin';
    font-size: 1.5rem;
    font-weight: bold;
    height: 3.6rem;
    margin: 2rem 0rem 2rem 0rem;
    padding: 1rem 2rem 1rem 2rem;
    text-align: center;
    width: 10.5rem;
}
.section-anchor.about { 
    background-image: url('/wp-content/themes/magnumific/pictures/Grafic/1.png'); 
}
.section-anchor.partners { 
    background-image: url('/wp-content/themes/magnumific/pictures/Grafic/Produse.png'); 
}
.section-anchor.team { 
    background-image: url('/wp-content/themes/magnumific/pictures/Grafic/Echipa.png'); 
}
.section-anchor.contact { 
    background-image: url('/wp-content/themes/magnumific/pictures/Grafic/Contact.png'); 
}
.navitem-title {
    font-size: 2.5rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.navitem-excerpt { 
    -webkit-align-self: center; 
    -ms-flex-item-align: center; 
    align-self: center;
    font-size: 1.5rem;
    height: 8rem;
    margin-top: 1rem;
    max-width: 15rem; 
}
.navitem-title, .navitem-excerpt { text-align: center; }
/********** HOME **********/

/********** ABOUT **********/
.section#about .banner { 
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row nowrap;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    align-items: center;
    margin: auto;
    padding: auto;
    max-height: 28rem;
    width: 100%;
}
.section#about .banner img {
    margin: auto;
    padding: auto;
    height: 18rem;
    width: 30rem;
    /*
    -webkit-box-flex: 1;
    -webkit-flex: 1 33%;
    -ms-flex: 1 33%;
    flex: 1 33%;
    width: 33%;
    */
}
/*
.section#about .banner img:last-child { 
    -webkit-box-flex: 1; 
    -webkit-flex: 1 34%; 
    -ms-flex: 1 34%; 
    flex: 1 34%; 
}
*/
#about-title { margin-left: 5rem; padding: 3rem 0rem 3rem 0rem; }

@media only screen and (max-width: 1030px) {
    #about-title { margin-left: 0rem; text-align: center; }
    .section#about .banner { 
        -webkit-flex-flow: column wrap; 
        -ms-flex-flow: column wrap; 
        flex-flow: column wrap; 
        max-height: none;
    }
    .section#about .banner img { 
        -webkit-box-flex: 1; 
        -webkit-flex: 1 auto; 
        -ms-flex: 1 auto; 
        flex: 1 auto;
        margin: auto;
        max-height: 50rem;
        max-width: 75rem;
    }
    .block-separator, .block-row-separator {
        display: none;
    }
}

.about-blocks { 
    display: -webkit-box;      
    display: -ms-flexbox;      
    display: -webkit-flex;     
    display: flex;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 7rem auto auto auto;
    width: 100%; 
}
.about-block { 
    -webkit-box-align: center; 
    -webkit-align-items: center; 
    -ms-flex-align: center; 
    align-items: center;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex; 
}
.block-separator { 
    border-left: thin solid gray; 
    height: 14rem;
    margin-top: 1.5rem;
}
.block-row-separator {
    border-top: thin solid gray;
    width: 100%;
}
.block-separator, .block-row-separator {
    display: none;
}
.about-icon {
    background-repeat: no-repeat;
    height: 15rem;
    width: 15rem;
    margin: 1rem;
}
#ab-1 {
    background-image: url('/wp-content/themes/magnumific/pictures/Grafic/1.png');
}
#ab-2 {
    background-image: url('/wp-content/themes/magnumific/pictures/Grafic/Depozit.png');
}
#ab-3 {
    background-image: url('/wp-content/themes/magnumific/pictures/Grafic/Distributie.png');
}
#ab-4 {
    background-image: url('/wp-content/themes/magnumific/pictures/Grafic/Sucursale.png');
}
#ab-5 {
    background-image: url('/wp-content/themes/magnumific/pictures/Grafic/Grafic.png');
}
.about-block-text { 
    -webkit-align-self: center; 
    -ms-flex-item-align: center; 
    align-self: center;
    -webkit-box-flex: 3;
    -webkit-flex: 3 auto;
    -ms-flex: 3 auto;
    flex: 3 auto;
    font-size: 1.2rem;
    max-width: 40rem; 
    padding-left: 2rem;
}
@media only screen and (max-width: 1195px) {
    .about-block-text { max-width: 30rem; }
}
@media only screen and (max-width: 600px) {
    .about-block-text { max-width: 30rem; }
}
@media only screen and (max-width: 500px) {
    .about-block {
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-flow: column wrap;
        -ms-flex-flow: column wrap;
        flex-flow: column wrap;
        margin: auto;
    }
    .about-block-text { padding: 0rem; }
}
#reasons-desc { margin: 5rem; }
.reason-blocks { 
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap; 
    -ms-flex-flow: row wrap; 
    flex-flow: row wrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.reason-block { 
    display: -webkit-inline-box; 
    display: -webkit-inline-flex; 
    display: -ms-inline-flexbox; 
    display: inline-flex; 
    margin: 2rem; 
}
.reason-num { 
    display: inline-block;
    font-size: 5rem; 
    height: 10.5rem;
    margin-left: 1rem;
    margin-right: 2rem;
}
.reason-block .reason-num, .reason-block .reason-block-text {
    display: inline-block;
}
.reason-block-text .subtitle { margin-bottom: 3rem; }
.reason-desc { 
    font-size: 1.2rem; 
    height: 10.5rem; 
    margin-top: 3rem; 
    width: 25rem; 
}
/********** ABOUT **********/

/********** PARTNERS **********/
section#partnersection { height: 25rem; }
section#partnersection .banner {
    background-image: url('/wp-content/themes/magnumific/pictures/Poze/partners.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    height: 100%;
    width: 100%;
}
#partnersection .container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}
#partnersection .content {
    max-width: 70rem;
    position: absolute;
    right: 20%;
    top: 50%;
}
#partnersection p {
    background-color: white;
    border-radius: 0rem 0rem 0rem 0rem;
    opacity: 0.8;
    padding: 1rem;
    vertical-align: middle;
}
.partners { 
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 8rem 0 8rem 0;
    width: 100%;
}
.partner-logo { 
    -webkit-align-self: center; 
    -ms-flex-item-align: center; 
    align-self: center; 
}
.partner-logo img {
    margin: auto;
    margin: 2rem 3rem 2rem 3rem;
    max-height: 15rem;
    max-width: 25rem;
    width: 100%;
}
.partner-logo .description {
    display: none;
    padding: 4rem;
    position: absolute;
    top: -10rem;
    z-index: 250;
}
@media only screen and (max-width: 635px) {
    .partner-logo img { max-height: 10rem; max-width: 15rem; }
}
@media only screen and (max-width: 435px) {
    .partner-logo img { max-height: 5rem; max-width: 10rem; }
}
/********** PARTNERS **********/

/********** TEAM **********/
section#teamsection { height: 25rem; }
section#teamsection .banner {
    background-image: url('/wp-content/themes/magnumific/pictures/Poze/team.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    height: 100%;
    width: 100%;
}
#teamsection .container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}
#teamsection .content {
    max-width: 70rem;
    position: absolute;
    right: 20%;
    top: 50%;
}
#teamsection p {
    background-color: white;
    border-radius: 0rem 0rem 0rem 0rem;
    opacity: 0.8;
    padding: 1rem;
    vertical-align: middle;
}
.team {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    width: 100%;
}
/* Hide team photos section for now */
.team-member { display: none; }
/* Hide team photos section for now */
.section#team p { 
    margin: 5rem 0rem 5rem 0rem;
    text-align: center; 
}
/********** TEAM **********/

/********** CAREER **********/
section#careersection { height: 25rem; }
section#careersection .banner {
    background-image: url('/wp-content/themes/magnumific/pictures/Poze/career.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    height: 100%;
    width: 100%;
}
#careersection .container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}
#careersection .content {
    max-width: 70rem;
    position: absolute;
    right: 20%;
    top: 50%;
}
#careersection p {
    background-color: white;
    border-radius: 0rem 0rem 0rem 0rem;
    opacity: 0.8;
    padding: 1rem;
    vertical-align: middle;
}
.section#career .blue.banner-bar { margin-top: 7rem; }
.section#career .blue.banner-bar.title { 
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    font-size: 5.2rem;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.jobs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    margin: 2rem 0rem 2rem 0rem;
}
.job-position {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    width: 54.4rem;
}
.job-position img {
    margin: 0rem 2rem 0rem 2rem;
    max-width: 20rem;
    max-height: 12.3rem;
}
.job-position p {
    margin: 0rem 2rem 0rem 2rem;
}
#telemarketing-position img { 
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
}
#telemarketing-position p { 
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
}
#sales-position img { 
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
}
#sales-position p { 
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
}
@media only screen and (max-width: 1058px) {
    .job-position { margin: 2rem 0rem 2rem 0rem; }
    .job-position p { 
        -webkit-align-self: center; 
        -ms-flex-item-align: center; 
        align-self: center; 
    }
    #telemarketing-position img, #sales-position img { 
        -webkit-box-ordinal-group: 1;
        -ms-flex-order: 1;
        -webkit-order: 1;
        order: 1;
    }
    #telemarketing-position p, #sales-position p { 
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 2;
        -webkit-order: 2;
        order: 2;
    }
}
.job-position .description {
    display: none;
    padding: 4rem;
    position: absolute;
    width: 30rem;
    z-index: 250;
}
.section#career form { margin-left: 7.5rem; }
.section#career form p input[type="email"],
.section#career form p input[type="tel"],
.section#career form p input[type="text"],
.section#career form p select { width: 30rem; }
/********** CAREER **********/

/********** CONTACT **********/
section#contactsection { height: 25rem; }
section#contactsection .banner {
    background-image: url('/wp-content/themes/magnumific/pictures/Poze/contact.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    height: 100%;
    width: 100%;
}
#contactsection .container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}
#contactsection .content {
    max-width: 70rem;
    position: absolute;
    right: 20%;
    top: 50%;
}
#contactsection p {
    background-color: white;
    border-radius: 0rem 0rem 0rem 0rem;
    opacity: 0.8;
    padding: 1rem;
    vertical-align: middle;
}
#address p.title, #contact-form p.title { margin-bottom: 5rem; }
#address p { margin-bottom: 2rem; }
#address p.bold { margin-bottom: 0rem; }
#contact-details {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
}
#contact-form, #address {
    margin: 10rem 1rem 0rem 1rem;
}
#map svg a path { fill: #5a5a5a; }
#map svg a path:hover { fill: #151728; }
/********** CONTACT **********/

/********** FORMS **********/
form p { margin: 1rem 0rem; }
form p input, form p select, form p textarea { margin-top: 0.5rem; }
form p input[type="email"],
form p input[type="submit"],
form p input[type="tel"],
form p input[type="text"],
form p select,
form p textarea {
    -webkit-border-radius: 0.5rem;
    -moz-border-radius: 0.5rem;
    border-color: lightgray;
    border-radius: 0.5rem;
    border-style: solid;
    border-width: thin;
    font-family: 'ZonaPro-Thin';
    height: 2.5rem;
    width: 20rem;
}
form p input[type="submit"] { border-radius: 0rem; width: auto; }
form p textarea { height: auto; }
form p input[type="file"]::-webkit-file-upload-button {
    visibility: hidden;
}
form p input[type="file"]::before {
    content: 'Browse';
    display: inline-block;
    background-color: lightgray;
    border-radius: 0rem;
    font-family: 'ZonaPro-Thin';
    height: 1.3rem;
    width: 7.5rem;
    padding: 0.6rem 0.8rem;
}