* { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-touch-callout: none; -webkit-overflow-scrolling: touch; }

:root { 
	--black: #111111;
	--grey: #808080;
	--font-family: 'Gilroy', Arial, sans-serif;
	--font-family-titles: 'Nivea', 'Gilroy', Arial, sans-serif;
}

@font-face {
    font-family: 'Gilroy';
    src: local('☞Gilroy-Light'), local('Gilroy-Light'),
        url('../fonts/Gilroy-Light.woff2') format('woff2'),
        url('../fonts/Gilroy-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: local('☞Gilroy-Bold'), local('Gilroy-Bold'),
        url('../fonts/Gilroy-Bold.woff2') format('woff2'),
        url('../fonts/Gilroy-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: local('☞Gilroy-Regular'), local('Gilroy-Regular'),
        url('../fonts/Gilroy-Regular.woff2') format('woff2'),
        url('../fonts/Gilroy-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nivea';
    src: url('../fonts/Nivea.woff2') format('woff2'),
        url('../fonts/Nivea.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/*@font-face {
    font-family: 'Nivea';
    src: url('../fonts/Nivea-Bold.woff2') format('woff2'),
        url('../fonts/Nivea-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}*/

html,
body { height: 100%; color: var(--grey); background-color:#fff; font-size:10px; font-weight: 300; font-family: var(--font-family); }

img, a img { border:none; }
a { outline:none; text-decoration:none; color:var(--primary-color); }
a:hover span { text-decoration:none; }
ul, ol { list-style-type:none; }
h1, h2, h3, h4, h5, h6 { color: var(--black); font-weight: 400; font-size: 1.8rem; line-height:2.4rem; font-family: var(--font-family-titles); }
p, strong, b, a { font-size:1.8rem; line-height:2.6rem; margin:0; padding:0; }
strong, b { font-weight:bold; }

.grid { display:grid; }
.col-2 { grid-template-columns: repeat(2, 1fr); }

/* =============================================================== */

.wrapper { width:100%; min-height:100%; position:relative; background-color:#fff; overflow-y:auto; overflow-x:hidden; }

/* =============================================================== */

.header { width:100%; height:40rem; display:grid; align-content:center; }

.header .logo { width:100%; display: grid; grid-template-rows: repeat(2,auto); grid-gap: 4rem; }
.header .granitul-logo-icon { width:18rem; height:auto; }
.header .granitul-logo-txt { width:56rem; height:auto; }

/* =============================================================== */

.content { width:100%; position:relative; padding: 6rem 0; }
.section-2 { background:#f8f8f8; }

.content-wrapper { width:80%; max-width:114rem; margin:0 auto; }

section .content-wrapper { display:grid; grid-template-columns: 35% 65%; }

.section-title { font-size:4.2rem; line-height: 5rem; margin-bottom:2rem; }
.section-title span { display:block; }

/* =============================================================== */

.section-1 .grid.col-2 { grid-gap: 2rem; }

.contact-list { width:100%; }
.contact-list li { width:100%; margin-bottom:2rem; display: grid; grid-template-columns: 6.4rem 1fr; grid-gap: 1.4rem; align-items:center; }
.contact-list li:last-of-type { margin-bottom:0; }

.contact-list .contact-icon { width:5.8rem; height:5.8rem; display:block; border-radius:50%; border:1px solid var(--black); font-size:3rem; color:var(--black); line-height:5.6rem; text-align:center; }
.contact-list strong { color:var(--black); font-size:1.4rem; line-height:2.4rem; text-transform:uppercase; }
.contact-list p { line-height:2.4rem; }
.contact-list p span { display:block; }

/* =============================================================== */

.files-grid { width:100%; display: grid; grid-template-columns: repeat(2,1fr); grid-gap: 2.4rem; align-items:center; }
.files-grid li { width:100%; min-height:30rem; background:#fff; border-radius:.6rem; padding:4rem 3rem; text-align:center; }

.files-grid .icon-pdf { width:10rem; height:10rem; position:relative; display:block; margin:0 auto 3rem; border-radius:50%; border:1px solid var(--black); /*font-size:3.8rem; color:var(--black); line-height:5.6rem; text-align:center;*/ background: transparent url(../images/pdf.svg) no-repeat 50% 50%; background-size: 60% 60%; }

.files-grid p { margin-bottom: 1.5rem; }

/* =============================================================== */

.footer { padding:3rem 0; }
.footer .content-wrapper { display:grid; grid-template-columns: 35% 65%; align-items:center; }

.footer p { color: var(--black); font-weight: 600; }

.footer nav { justify-self:end; }
.footer nav a { margin-left:2rem; }

/* =============================================================== */
/* .form ========================================================= */

.form { width:100%; position:relative; margin:0 auto; }
.form fieldset { width:100%; border:none; position:relative; padding:0; }

.form .input-box-field,
.form .select-box-field { width:100%; height:5.6rem; position:relative; margin:0 auto 1.5rem;  /*overflow:hidden;*/ border:1px solid rgba(255,255,255,0.8); transition: height 0.3s ease-in-out, border 0.3s ease-in-out, background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out; background:#f1f1f1; border-radius:.4rem; }
.form .input-box-field.active,
.form .select-box-field.active { height:5.6rem; background:#fff; border:1px solid #000; }

.form .input-box-field:before,
.form .select-box-field:before { width:4rem; height:4rem; position:absolute; right:.6rem; top:.6rem; z-index:3; content:"\e910"; font-size:2.4rem; line-height:4rem; text-align:center; font-family: icons; color:#000; transform:scale3d(0,0,0); transform-origin:50% 50%; transition:color 0.3s ease-in-out, opacity 0.3s ease-in-out, transform 0.3s ease-in-out;  }

.form .input-box-field.valid:before,
.form .select-box-field.valid:before { opacity:1; transform:scale3d(1,1,1); }

.form .input-box-field.error { border-color:#ee3128; }
.form .input-box-field.error:before,
.form .select-box-field.error:before { color:#ee3128; content:"\e90f"; transform:scale3d(1,1,1); }

.form span.text { width:100%; display:block; margin:0 auto 1rem; font-size:1.4rem; line-height:2rem; }

.form label { width:100%; height:5.6rem; position:absolute; top:0; left:0; display:block; z-index:2; padding:0 1.5rem; font-size:1.4rem; line-height:5.6rem; font-weight:300; text-align:left; font-family: var(--font-family-main), Arial, sans-serif; margin-bottom:0; color:#666; cursor:pointer; transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, color 0.3s ease-in-out; transform-origin: 4% 50%; backface-visibility: hidden; }
.form .active label,
.form .valid label { opacity:.8; transform: scale3d(.8,.8,.8) translate3d(0,-1.6rem,0); backface-visibility: hidden; }

input,
select,
textarea { width:100%; height:3.5rem; color:#000; font-size: 1.5rem; font-weight:normal; font-family: var(--font-family-main), Arial, sans-serif; box-shadow:none!important; background: #fff !important; border:none!important; padding:1.8rem 1.5rem 0; transition: all 0.3s ease-in-out;  }

.form input, 
.form select, 
.form textarea { width:100%; height:5.3rem; position:absolute; left:0; bottom:.1rem; z-index:1; opacity:0; background:transparent!important; }
.form .active input, 
.form .active select, 
.form .active textarea,
.form .valid input, 
.form .valid select, 
.form .valid textarea { z-index:2; opacity:1; }

.form .valid input,
.form .valid textarea { padding-right:3.5rem; }

.form select, .form select option { padding:0 0 0 1rem; }
.form select option { padding:0.5rem 0 0.5rem 1rem; }

.form textarea { height:100px; padding:0.7rem 0 0; }

input:focus, 
select:focus, 
textarea:focus,
input:active, 
select:active, 
textarea:active,
input:hover, 
select:hover, 
textarea:hover,
.form input:focus, 
.form select:focus, 
.form textarea:focus,
.form input:active, 
.form select:active, 
.form textarea:active,
.form input:hover, 
.form select:hover, 
.form textarea:hover  { border:none!important; outline:none!important; background: #fff !important; }

.form .error { border-color:#ee3128!important; }
.form .error label { color:#ee3128!important; }
.form .error input::-webkit-input-placeholder, 
.form .error input:-moz-placeholder, 
.form .error input:-ms-input-placeholder { color:#ee3128!important; }

.form .input-box-field.with-unit input,
.form .select-box-field.with-unit input { padding-right:2.2rem; }

.form .input-box-field.with-info input,
.form .select-box-field.with-info input { padding-right:3.2rem; }

.error-msg, .succes-msg { width:100%; background:#ee3128; color:#fff; font-size:1.2rem; line-height:1.8rem; padding:1rem 1.5rem; }
.succes-msg { background:#66cc00; }

.input-box-field-message-error { width:100%; display:block; min-height:2.4rem; margin:-1.7rem auto 1.5rem; position:relative; overflow:hidden; color:#fff; background:#ee3128; font-size:1rem; line-height:2.4rem; padding:0 1.5rem; border-radius:0 0 .4rem .4rem; transition:  opacity .3s ease-in-out,height .3s ease-in-out, margin .3s ease-in-out, padding .3s ease-in-out; overflow:hidden; }

.form p.rc-line { width:100%; position:relative; margin:0 auto 1rem!important; text-align:center; padding:0; border:none; transition:all 0.3s ease-in-out; }
.form p.rc-line.active { height:2.2rem; border:none; }
.form p.rc-line:before { width:100%; height:100%; position:static; content:""; transform:scale3d(1,1,1); }

.form p.rc-line label { width:100%; display:block; height:100%; position:relative; z-index:5; cursor:pointer; font-size:1.2rem; line-height:1.8rem; text-align:left; padding:0 0 0.2rem 2.7rem; color:#999; margin:0; overflow:hidden; /*-ms-text-overflow:ellipsis; -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap;*/ transition:none; }
.form p.rc-line.active label { transform: scale3d(1,1,1); }
.form p.rc-line.valid label,
.form p.rc-line.active.valid label { opacity:1; }
.form p.rc-line input[type=checkbox],
.form p.rc-line input[type=radio] { width:100%; height:100%; position:absolute; top:0; left:0; opacity:0; overflow:hidden; } 
.form p.rc-line label:after { width:1.6rem; height:1.6rem; padding:0; display:block; position:absolute; top:0; left:0; border-radius:0.2rem; content:""; border:1px solid rgba(0,0,0,0.2); background:#fff; font-family:icons; text-align:center; line-height:1.6rem; font-size:1.2rem; } 
.form p.rc-line input[type=checkbox]:checked + label:after,
.form p.rc-line input[type=radio]:checked + label:after { content:"\e916"; border-color:#dd3b6a; color:#fff; background:#dd3b6a; }
.form p.rc-line input[type=checkbox]:checked + label,
.form p.rc-line input[type=radio]:checked + label,
.form p.rc-line:hover label, 
.form p.rc-line:hover label:after,
.form p.rc-line:hover a,
.form p.rc-line input[type=checkbox]:checked + label a,
.form p.rc-line input[type=radio]:checked + label a { color:#dd3b6a; }

.form .button { margin-top:1rem; }

/* ============================================================= */

.button { width:auto; height:4.8rem; position:relative; display:inline-block; padding:0 4rem; color:#fff; background:#111; border:.1rem solid transparent; border-radius:6rem; font-size:1.4rem; text-transform:uppercase; line-height:4.6rem; text-align:center; font-family: var(--font-family); cursor:pointer; user-select:none; /*box-shadow:0 0.1vw 0.2vw rgba(0,0,0,0);*/ -webkit-transition: color 0.3s ease-in-out, background 0.3s ease-in-out, border 0.3s ease-in-out; transition: color 0.3s ease-in-out, background 0.3s ease-in-out, border 0.3s ease-in-out; }
/*button.button { line-height:inherit!important; }*/
.button:active { color:#fff; background:#1a1a1a; outline:none!important; /*box-shadow:0 0.1vw 0.2vw rgba(0,0,0,0.2);*/ text-decoration:none; }

.button-outline { width:auto; color:rgba(255,255,255,1); background:transparent; border-color: rgba(255,255,255,1); }
.button-outline:active { color:#000; background: #fff; box-shadow:0 0.1rem 0.2rem rgba(0,0,0,.2); }

.button-with-gradient,
.button-with-gradient:active { background:transparent; border-radius:0; color:#000; /*text-shadow:0 0.1vw 0.1vw rgba(0,0,0,.1);*/ }
.button-with-gradient:before,
.button-with-gradient:after { width:100%; height:100%; position:absolute; top:0; left:0; z-index:1; content:''; border-radius:6rem; box-shadow:0 .1vw .2vw rgba(0,0,0,.05); -moz-transition: opacity 0.3s ease-in-out, box-shadow 0.3s ease-in-out; -o-transition: opacity 0.3s ease-in-out, box-shadow 0.3s ease-in-out; -webkit-transition: opacity 0.3s ease-in-out, box-shadow 0.3s ease-in-out; transition: opacity 0.3s ease-in-out, box-shadow 0.3s ease-in-out; }

.button-with-gradient:before { opacity:1; 
background: #f8af42;
/*background: -moz-linear-gradient(-45deg,  rgba(255,189,14,1) 0%, rgba(230,158,4,1) 100%);
background: -webkit-linear-gradient(-45deg,  rgba(255,189,14,1) 0%,rgba(230,158,4,1) 100%);
background: linear-gradient(135deg,  rgba(255,189,14,1) 0%,rgba(230,158,4,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffbd0e', endColorstr='#e69e04',GradientType=1 );*/ }

.button-with-gradient:after { opacity:0; 
background: rgb(255,189,14);
background: -moz-linear-gradient(-45deg,  rgba(255,189,14,1) 0%, rgba(230,158,4,1) 100%);
background: -webkit-linear-gradient(-45deg,  rgba(255,189,14,1) 0%,rgba(230,158,4,1) 100%);
background: linear-gradient(135deg,  rgba(255,189,14,1) 0%,rgba(230,158,4,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffbd0e', endColorstr='#e69e04',GradientType=1 );}

.button-with-gradient:active:after { opacity:1; } 

.button-with-gradient strong { width:100%; height:100%; position:relative; z-index:2; display:block; white-space:nowrap; }

/* ============================================================= */

#scrollWrapper { width:100%; height:100%!important; position:fixed; top:0; left:0; z-index:1; overflow-x:hidden; overflow-y:scroll; }

.scrollbar { width:100%; height:100%; overflow-x:hidden; overflow-y:auto; }
.scrollbar::-webkit-scrollbar-track,
.wrapper::-webkit-scrollbar-track { background-color: transparent; }
.scrollbar::-webkit-scrollbar { width: .3rem; background-color: rgba(0,0,0,0); }
.scrollbar::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,.3); -moz-transition: background 0.3s ease-out; -o-transition: background 0.3s ease-out; -webkit-transition: background 0.3s ease-out; transition: background 0.3s ease-out; }
.scrollbar::-webkit-scrollbar-thumb:hover { background-color: rgba(0,0,0,.6); }

/* ============================================================= */

@media screen and (orientation:portrait) {

	.header { height: 36rem; }

	.header .logo { grid-gap: 3rem; }
	.header .granitul-logo-icon { width: 15rem; }
	.header .granitul-logo-txt { width: 48rem; }

	section .content-wrapper { grid-template-columns: 1fr; grid-gap:3rem; }
	.section-2 .content-wrapper { grid-gap:4rem; }

	.section-1 { padding-top:0; }

	.section-title { margin-bottom:1.5rem; }
	.section-title span { display:inline; }

	.files-grid li { padding: 4rem 1rem; }
	
}

@media screen and (max-width: 560px) {
	
	.header { height: 30rem; }

	.header .logo { grid-gap: 4rem; }
	.header .granitul-logo-icon { width: 12rem; }
	.header .granitul-logo-txt { width: 100%; }

    .col-2 { grid-template-columns: 1fr; }

    .section-title { margin-bottom:1rem; font-size: 3.6rem; line-height: 4.4rem; }

    .contact-list p span { display:inline; }

    .files-grid,
    .footer .content-wrapper { grid-template-columns: 1fr; grid-gap: 2.4rem; }

    .footer nav { justify-self: start; overflow:hidden; }
    .footer nav a { display:inline-block; margin:0 0 1rem; float: left; clear:left; }

}

@media screen and (max-width: 320px) {
    html { font-size:9px; }
}

@media screen and (max-width: 280px) {
    html { font-size:8px; }
    .content-wrapper { width: 86%; }
}