<link href="https://fonts.googleapis.com/css?family=DM+Serif+Text|Montserrat&display=swap" rel="stylesheet">
@import url('https://fonts.googleapis.com/css?family=DM+Serif+Display|Montserrat&display=swap');
body {
	background-color: #ffffff;
    position: relative;
    z-index: -3;
}

h1{
    font-family: 'DM Serif Display', serif;
    font-size: 70px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: normal;
    color: #703d3d;
}

h3{
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.79;
    letter-spacing: normal;
    color: #703d3d;
}

p{
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.79;
    letter-spacing: normal;
    color: #703d3d;

}

button{
    height: 30px;
    padding: 5px 20px 10px 20px;
    background-color: #703d3d;
    border: 0px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: #ffffff;
}

/*
#header {
    margin: 0 80px 0 80px;
}
*/

.top-nav{
    margin: 50px 0 80px 0;
    background-color: #703d3d;
    padding: 0 80px 0 80px;
}

.top-nav img{
  width: 41.1px;
  height: 50px;
}

.nav{
    float: right;
}

/*navigation red version*/
#top-nav-red {
  background-color: #703d3d;
  padding: 20px 80px 20px 80px; /* Black background color */
  position: fixed; /* Make it stick/fixed */
  top: 0; /* Stay on top */
  width: 100%; /* Full width */
    z-index: 1030;
}

#top-nav-red img{
  width: 20.53px;
  height: 25px;
}

#top-nav-red ul{
	margin-left: 80px;
	text-align: right;
	display: inline-block;
}

#top-nav-red ul li{
	display: inline;
	list-style-type: none; 
}

#top-nav-red ul li a{
	display: inline-block;
	position: right;
	margin-left: 35px;
    padding-bottom: 2px;
	text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: normal;
    text-align: left;
    color: #ffffff;
}

#top-nav-red a:hover{
	font-weight: bold;
}

#top-nav-red a.active{
	color: #ffffff;
	border-style: inset;
	border-bottom-width: 2px;
	border-bottom-color: #ffffff;
	border-left: none;
	border-right: none;
	border-top: none;
    font-weight: bold;
}


/*scrolling nav white*/
#scrolling-nav {
  background-color: #ffffff;
  padding: 20px 80px 20px 80px;
  position: fixed;
    z-index: 1030;
  top: 0;
  width: 100%;
  display: inline-block;
  transition: top 0.3s;
}

#scrolling-nav img{
  width: 41.1px;
  height: 50px;
    margin-top: 10px;
}

#scrolling-nav ul{
  margin-left: 80px;
  text-align: center;
  display: inline-block;
    margin-top: 25px;
}

#scrolling-nav ul li{
  display: inline;
  list-style-type: none; 
}

#scrolling-nav ul li a {
  	display: inline-block;
    margin-left: 35px;
    padding-bottom: 2px;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: normal;
    text-align: left;
    color: #703d3d;
}

#scrolling-nav a:hover {
  font-weight: bold;
}

#scrolling-nav a.active{
  color: #703d3d;
  border-style: inset;
  border-bottom-width: 2px;
  border-bottom-color: #703d3d;
  border-left: none;
  border-right: none;
  border-top: none;
  font-weight: bold;
}

/*scrolling nav red*/
#scrolling-nav-red {
  background-color: #703d3d;
  padding: 20px 80px 20px 80px;
  position: fixed;
  top: 0;
  width: 100%;
  display: inline-block;
  transition: top 0.3s;
    z-index: 1030;
}

#scrolling-nav-red img{
  width: 41.1px;
  height: 50px;
    margin-top: 10px;
}

#scrolling-nav-red ul{
  margin-left: 80px;
  text-align: center;
  display: inline-block;
    margin-top: 25px;
}

#scrolling-nav-red ul li{
  display: inline;
  list-style-type: none; 
}

#scrolling-nav-red ul li a {
  	display: inline-block;
    margin-left: 35px;
    padding-bottom: 2px;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: normal;
    text-align: left;
    color: #ffffff;
}

#scrolling-nav-red a:hover {
  font-weight: bold;
}

#scrolling-nav-red a.active{
  color: #ffffff;
  border-style: inset;
  border-bottom-width: 2px;
  border-bottom-color: #ffffff;
  border-left: none;
  border-right: none;
  border-top: none;
  font-weight: bold;
}

#myBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: #542929; /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    font-size: 14px; /* Increase font size */
    font-family: 'Montserrat', sans-serif;
    width: 50px;
    height: 50px;
    padding-left: 12px;
}

/*homepage*/

#homepage{
    margin: 0 80px 0 80px;
}

.row{
}

.col-sm{
    border-color: #000000;
    border-width: 10px
}

/*test*/
/*homepage top*/
.mosaic{
    display: grid;
    position: absolute;
    z-index: -3;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-bottom: 200px;
    
}

.mosaic-item:first-of-type{
    max-width: 300px;
    grid-column: 1 / span 1;
    grid-row: 1/ span 2;
}

.mosaic-item:nth-of-type(2){
    grid-column: 2 / span 2;
    grid-row: 1/ span 2;
    margin: -20px 0 0 -120px;
}

.mosaic-item:last-of-type{
    max-width: 360px;
    grid-column: 3 / span 2;
    grid-row: 2/ span 2;
/*    margin-left: -250px;*/
}

/*homepage about*/
.mosaic-2{
    display: grid;
    position: absolute;
    z-index: -3;
    top: 150%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.mosaic-2-item:first-of-type{
    grid-column: 1 / span 1;
    grid-row: 1/ span 1;
}

.mosaic-2-item:nth-of-type(2){
    grid-column: 2 / span 2;
    grid-row: 1/ span 2;
    margin: -20px 0 0 -10px;
}

.mosaic-2-item:nth-child(3){
    max-width: 360px;
    grid-column: 3 / span 2;
    grid-row: 2/ span 2;
    margin-left: 50px;
}

.mosaic-2-item:last-of-type{
    max-width: 360px;
    grid-column: 3 / span 2;
    grid-row: 2/ span 2;
    margin-top: 50px;
    margin-left: 90px;
}

/*homepage works*/
.homepage-works-headline{
    position: absolute;
    z-index: -3;
    top: 200%;
    left: 32%;
    transform: translate(-50%, -50%);
}

.homepage-works-portfolio{
    display: flex;
    flex-wrap: wrap;
    position: absolute;
    z-index: -4;
    top: 211%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 5px;
} 

.homepage-works-portfolio-item{
    float: left;
    width: 33.33%;
    padding: 5px;
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .homepage-works-portfolio-item {
    flex: 100%;
    max-width: 100%;
  }
}

.homepage-works button{
    position: absolute;
    top: 228%;
    left: 50%;
    transform: translate(-50%, -50%); 
}


/*footer*/
#footer{
    background-color: #703d3d;
    position: absolute;
    top: 255%;
    width: 100%;
    height: auto;
    text-align:center;
    vertical-align:middle;
    justify-content:center;
    align-items: center;
    padding-top: 60px;
    padding-bottom: 40px;
}

#footer img{
    width: 50px;
    margin-bottom: 30px;
}

footer{
    background-color: #703d3d;
    height: auto;
    text-align:center;
    vertical-align:middle;
    justify-content:center;
    align-items: center;
    padding-top: 60px;
    padding-bottom: 40px;
    margin-top: 175px;
}

footer img{
    width: 50px;
    margin-bottom: 30px;
}

.socialcontainer ul{
    margin: 0;
    padding: 0;
}

.socialcontainer ul li{
	display: inline;
	list-style-type: none;
}

.socialcontainer ul li a{
	display: inline-block;
    margin: 0 5px 0 5px;
}


/*works*/

img::-moz-selection {
  background: transparent;
}

img::selection {
  background: transparent;
}

img::-moz-selection {
  background: transparent;
}

#portfolio {
    margin-top:150px;
}

#portfolio .portfolio-item {
  right: 0;
  margin: 0 0 15px;
}

#portfolio .portfolio-item .portfolio-link {
  position: relative;
  display: block;
  margin: 0 auto 30px 0;
  cursor: pointer;
}

#portfolio .portfolio-item .portfolio-link .portfolio-hover {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: all ease 0.5s;
  opacity: 0;
  background: #703d3d;
}

#portfolio .portfolio-item .portfolio-link .portfolio-hover:hover {
  opacity: 0.8;
}

#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content {
    position: absolute;
    bottom: 50px;
    left: 50px;
    text-align: left;
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    line-height: 1.79;
}


#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h3,
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content p {
  margin: 0;
}


#portfolio * {
  z-index: 2;
}

@media (min-width: 767px) {
  #portfolio .portfolio-item {
    margin: 0 0 30px;
  }
}

/*about*/
#skills .col-5{
    padding: 20px 0 20px 0;
}

#services{
margin-top: 100px;
}

#portfolio-details img{
    max-width: 500px;
    margin-bottom: 50px;
}

#portfolio-nav a:hover{
    text-decoration: none;
}

/*contact*/
form{
    margin: 20px;
}
textarea{
    width: 100%;
    padding: 12px;
    border-bottom: 1px solid #703d3d;
    border-top: none;
    border-left: none;
    border-right: none;
    box-sizing: border-box;
    margin-top: 3px;
    margin-bottom: 16px;
    resize: vertical;
    background: transparent;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: #703d3d;
}

#name, #email, #subject{
    width: 100%;
    padding: 12px;
    border-bottom: 1px solid #703d3d;
    border-top: none;
    border-left: none;
    border-right: none;
    box-sizing: border-box;
    margin-top: 3px;
    margin-bottom: 10px;
    resize: vertical;
    background: transparent;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: #703d3d;
}

#submit-btn{
    height: 30px;
    padding: 5px 20px 10px 20px;
    background-color: #703d3d;
    border: 0px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: #ffffff;
    float: right;
}