@import url('https://fonts.googleapis.com/css?family=Jura:300,400,500,600,700&subset=cyrillic');

@font-face {
    font-family: 'neumannregular';
    src: url('../fonts/td-neumann-webfont.eot');
    src: url('../fonts/td-neumann-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/td-neumann-webfont.woff2') format('woff2'),
         url('../fonts/td-neumann-webfont.woff') format('woff'),
         url('../fonts/td-neumann-webfont.ttf') format('truetype'),
         url('../fonts/td-neumann-webfont.svg#neumannregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

*,*::before, *::after {margin:0; padding:0;}

body {margin:0; font-family: 'Jura', sans-serif; font-size:16px; color:#242322;}

a {text-decoration:none;}
img {padding: 0; margin: 0;}

/*-------------------------------------------------HOME SECTION------------------------------------------------------------*/

section#home {
    background:#fff url("../img/bg.jpg") no-repeat center center;
    background-size: cover;
    position:relative;
    top:0;
    bottom:0;
	min-width:100%;
    height: 100vh;
	z-index:100;
}

header {
background-color: #eeeae7;  
box-shadow: 0 4px 4px -2px #665d4d;
width:100%;
display:grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
position:fixed;
top:0;
left:0;
z-index:9999;
}

#logo {
font-size: 1.7rem;
letter-spacing: 0.02em;
margin: 0 0 0 20px;
color: #2d2b28;
font-weight:700;
}

.span {
font-weight:300; 
}

.menu {
font-family: 'Jura', sans-serif;
font-size: 1.2rem;
align-self: center;
justify-self: center;
}

div.menu a {color: #393633; font-weight: 600;}

div.menu a:hover {
border-top: /*#43424a*/ 3px solid #393633;	
padding:1px;
}

/*-------------------------------------------------ABOUT SECTION------------------------------------------------------------*/

section#about {
display:grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
width:100%;
height:100vh;
position:relative;
top:0;
bottom:0;
z-index:1;
background-color:#2d2b28;
}

.name {
font-size: 3rem;
font-weight: 300;
letter-spacing: 2px;
color:#fff;
line-height: 2;
}

.aboutactivity {
color:#eaeaea;
align-self: center;
}

.aboutactivity p {
margin:1em; 
font-size:1.5rem;
text-align:right;
}

.aboutimg {
background-image: url("../img/ralitsa-about-sm.jpg");
width:80%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
justify-self:end;
}

/*-------------------------------------------------QUOTE SECTION------------------------------------------------------------*/ 
section#quote {
display:grid;
grid-template-columns: auto;
position:relative;
top:0;
bottom:0;
z-index:1;
background-color:/*#7f7872*/ #fff;
color:#2d2b28;
align-content: center;
justify-content: center;
}

#quote p {
margin: 3em;
font-size: 2rem;
line-height: 1.5;
text-align:center;
}


/*-------------------------------------------------TEXT ABOUT SECTION------------------------------------------------------------*/
section#textabout {
display:grid;
grid-gap:20px;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows:auto;
position:relative;
top:0;
bottom:0;
z-index:1; 
line-height:1.5;
background-color:#efe6df;
/*background-image: url("../img/about1.jpg");
background-size: cover;*/
padding:2em 1em;
}

div.title {
font-size:2rem;
font-weight:bold;
margin:15px 0 15px 0;
color:#7f7872;
}

section#textabout p {margin:;}


.first {border-right:1px solid #f6f6f6;}
.second {align-self: center; border-right:1px solid #f6f6f6;}
.third {align-self: ;}


/*-------------------------------------------------PORTFOLIO SECTION------------------------------------------------------------*/
section#portfolio {
display:grid;
grid-gap:15px;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 25% auto;
width:100%;
height:100vh;
position:relative;
top:0;
bottom:0;
z-index:1;
margin-bottom:5em;
}

section#portfolio h1 {
font-size: 2.3rem;
color:#7f7872;
text-align: center;
display:grid;
grid-column: 2 / 3;
grid-row:1;
align-self: center;
border-bottom: 1px solid #7f7872;
padding-bottom:0.5em;
}

.box {
background-color:#b9b5c7;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

.box p {
color: #fff;
font-size: 1.2rem;
padding: 1em;
text-align:center;
background:rgba(0, 0, 0, .5);
}

.box.one {
background-image: url("../img/mezonet-kvartal_vitosha.jpg");
display: grid;
grid-column: 1;
grid-row: 2;
align-content: end;
}

.box.two {
background-image: url("../img/2staen-kvartal_manastirski_livadi.jpg");
display: grid;
grid-column: 2;
grid-row: 2;
align-content: end;
}

.box.three {
background-image: url("../img/3staen-kvartal_simeonovo.jpg");
display: grid;
grid-column: 3;
grid-row: 2;
align-content: end;
}


/*-------------------------------------------------CONTACTS SECTION------------------------------------------------------------*/
section#contacts {
width:100%;
height:100vh;
display:grid;
grid-gap:10px;
grid-template-columns: auto;
grid-template-rows:auto auto;
background-image: url("../img/contacts.jpg");
background-size: cover;
background-position: center;
}

.contactmain {
width:100%;
display:grid;
grid-column: 1 / 2;
grid-row:2;
}

.contactmain p {
background-color:rgba(57, 54, 51, 0.5);
color: #fff;
text-align:center;
line-height: 2;
font-size:2rem;
padding:1.5em;
}

.contactmain a {color:#fff;}

.contactmain .contactinfo {
display:grid;
grid-column: 1 / 2;
grid-row:2;
align-content: end;
}


/*-------------------------------------------------FOOTER SECTION------------------------------------------------------------*/

footer {
position:relative;
bottom:0;
right:0;
width:100%;
background-color:#242322;
color:#fff;
text-align: center;
padding: 1em;
letter-spacing: 0.05em;
}

/*------------------------------------------------SCREENS------------------------------------------------------------------------*/

@media (min-width: 871px) and (max-width: 1800px)  {
html, body{
width:100%;
overflow-x:hidden;
} /*remove the white space to the right of the content */

 }

@media (min-width: 600px) and (max-width: 870px)  { 

html, body{
width:100%;
overflow-x:hidden;
} /*remove the white space to the right of the content */


#logo {margin: 0 0 0 2px;}
section#about {height:auto;}
.name { line-height: 0.8; font-size:2em; }
.aboutimg { width:100%; }
div.title {line-height:1.2;}

}


@media (max-width: 599px) { 

html, body{
width:100%;
overflow-x:hidden;
} /*remove the white space to the right of the content */

header {
display:grid;
grid-template-columns:1fr;
}

#logo {
display:grid;
justify-items: center;
margin: 0;
}

.menu {
font-size: 1em;
margin: 1px;
}

div.menu a:hover {
border-top: 0px solid #fff;	
font-weight:bold;
}

section#about {
display:grid;
grid-template-columns: 1fr;
grid-template-rows:1fr 1fr;
width:100%;
height:auto;
}

.aboutactivity {
padding:1em;
}

.aboutactivity p {
font-size: 1em;
}

.name {
font-size: 1.4em;
font-weight: 600;
}

.aboutimg {
width:100%;
}

#quote p {
font-size: 1em;
text-align: justify;
}

section#textabout {
display:grid;
grid-template-columns: 1fr;
}

section#portfolio {
display:grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
}

section#portfolio h1 {
display:grid;
grid-column: 1;
grid-row:1;
}

.box.one {
display: grid;
grid-column: 1;
grid-row: 2;
align-content: end;
}

.box.two {
display: grid;
grid-column: 1;
grid-row: 3;
align-content: end;
}

.box.three {
display: grid;
grid-column: 1;
grid-row: 4;
align-content: end;
}

.contactmain p {
font-size:1.5em;
}

footer { font-size:0.75em;}

}

/* Samsung Galaxy S7 Edge ----------- */
@media only screen
and (-webkit-min-device-pixel-ratio: 3)
and (min-resolution: 192dpi)and max-width:640px) {
  background-image: url('https://i.ytimg.com/vi/zhBxfNm3rJE/maxresdefault.jpg');
.name { font-size: 1.5em; font-weight:600; }
}