@font-face {
  font-family: 'Tangerine normal';
  src: URL('Tangerine-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Tangerine bold';
  src: URL('Tangerine-Bold.ttf') format('truetype');
}


body,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Arial", sans-serif;
}

body,
html {
  height: 100%;
  color: #777;
  line-height: 1.8;
}

  /* Create a Parallax Effect */
  .bgimg-1,
  .bgimg-2,
  .bgimg-3 {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  /* First image (Logo. Full height) */
  .bgimg-1 {
    background-image: url('images/cellar_3840.jpg');
    min-height: 100%;
  }

  /* Second image (Portfolio) */
  .bgimg-2 {
    background-image: url("images/park_2400.jpg");
    min-height: 400px;
  }

  /* Third image (Contact) */
  .bgimg-3 {
    background-image: url("images/vineyard_3840.jpg");
    min-height: 400px;
  }

/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1024px) {
  .bgimg-1,
  .bgimg-2,
  .bgimg-3 {
    background-attachment: scroll;
    min-height: 400px;
  }
}
  

  .w3-wide {
    letter-spacing: 10px;
  }

  .w3-hover-opacity {
    cursor: pointer;
  }

  span#mailmiddle::before {
    content: "crayere."
}



/* usage: <i class="arrow_up_gray" style="font-size:1.3em"> */
.arrow_up_gray {
  display:inline;
  text-decoration: none;  
  padding: 1em;
  background: 
  url('data:image/svg+xml;utf8,<svg viewBox="0 0 40 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><polyline points="8,16 20,4 32,16" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke="rgb(70,70,70)" fill="none"/><line x1="20" y1="4" x2="20" y2="28" stroke-width="4" stroke-linecap="round" stroke="rgb(70,70,70)"/></svg>') right no-repeat;	
}
.arrow_up_white {
  display:inline;
  text-decoration: none;  
  padding: 1em;
  background: 
  url('data:image/svg+xml;utf8,<svg viewBox="0 0 40 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><polyline points="8,16 20,4 32,16" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke="white" fill="none"/><line x1="20" y1="4" x2="20" y2="28" stroke-width="4" stroke-linecap="round" stroke="white"/></svg>') right no-repeat;	
}    

.questionmark_white {
  display:inline;
  text-decoration: none;  
  padding: 1em;
  background: 
  url('data:image/svg+xml;utf8,<svg viewBox="0 0 40 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><circle cx="20" cy="16" r="14" stroke-width="2" stroke="white" fill="none"/><text x="15" y="22" stroke="white" fill="white" style="font-family:Arial;font-size:1.2em;">?</text></svg>') right no-repeat;	
}    

.questionmark_gray {
  display:inline;
  text-decoration: none;  
  padding: 1em;
  background: 
  url('data:image/svg+xml;utf8,<svg viewBox="0 0 40 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><circle cx="20" cy="16" r="14" stroke-width="2" stroke="rgb(70,70,70)" fill="none"/><text x="15" y="22" stroke="rgb(70,70,70)" fill="rgb(70,70,70)" style="font-family:Arial;font-size:1.2em;">?</text></svg>') right no-repeat;	
}    


.smiley_smile_white {
  display:inline;
  text-decoration: none;  
  padding: 1em;
  background: 
  url('data:image/svg+xml;utf8,<svg viewBox="0 0 40 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <circle cx="20" cy="16" r="14" stroke-width="2" stroke="white" fill="none"/> <circle cx="15" cy="13" r="1.5" stroke-width="1" stroke="white" fill="white"/> <circle cx="25" cy="13" r="1.5" stroke-width="1" stroke="white" fill="white"/> <path d="M15 22 Q 20 25 25 22" stroke-linecap="round" stroke-width="2.5" stroke="white" fill="none"/> </svg>') right no-repeat;	
}    

.smiley_smile_gray {
  display:inline;
  text-decoration: none;  
  padding: 1em;
  background: 
  url('data:image/svg+xml;utf8,<svg viewBox="0 0 40 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <circle cx="20" cy="16" r="14" stroke-width="2" stroke=rgb(70,70,70) fill="none"/> <circle cx="15" cy="13" r="1.5" stroke-width="1" stroke=rgb(70,70,70) fill=rgb(70,70,70)/> <circle cx="25" cy="13" r="1.5" stroke-width="1" stroke=rgb(70,70,70) fill=rgb(70,70,70)/> <path d="M15 22 Q 20 25 25 22" stroke-linecap="round" stroke-width="2.5" stroke=rgb(70,70,70) fill="none"/> </svg>') right no-repeat;	
}    

.smiley_neutral_white {
  display:inline;
  text-decoration: none;  
  padding: 1em;
  background: 
  url('data:image/svg+xml;utf8,<svg viewBox="0 0 40 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><circle cx="20" cy="16" r="14" stroke-width="2" stroke="white" fill="none"/><circle cx="15" cy="13" r="1.5" stroke-width="1" stroke="white" fill="white"/><circle cx="25" cy="13" r="1.5" stroke-width="1" stroke="white" fill="white"/><line x1="15" y1="22" x2="25" y2="22" stroke="white" stroke-width="2.5"/></svg>') right no-repeat;	
}    

.smiley_neutral_gray {
  display:inline;
  text-decoration: none;  
  padding: 1em;
  background: 
  url('data:image/svg+xml;utf8,<svg viewBox="0 0 40 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><circle cx="20" cy="16" r="14" stroke-width="2" stroke="rgb(70,70,70)" fill="none"/><circle cx="15" cy="13" r="1.5" stroke-width="1" stroke="rgb(70,70,70)" fill="rgb(70,70,70)"/><circle cx="25" cy="13" r="1.5" stroke-width="1" stroke="rgb(70,70,70)" fill="rgb(70,70,70)"/><line x1="15" y1="22" x2="25" y2="22" stroke="rgb(70,70,70)" stroke-width="2.5"/></svg>') right no-repeat;	
}