@import url('https://fonts.googleapis.com/css2?family=The+Nautigal&display=swap');
html{
	scroll-behavior: smooth;}

:target:before {
    content: "";
    display: block;
    height: 100px;
    margin: -100px 0 0;
}
	
body {
margin:0;
font-size: 14px;
font-family: "Open Sans", arial, sans-serif;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
  transition: 5s;
	background: center center / cover no-repeat fixed;
	background-image: url("https://www.victoriascharm.nl/data/uploads/header/1.jpeg");
}


/*---------------
HEADER
---------------*/
header{
	text-align: center;
	color: #faf4a7;
	height:100vh;
	max-height:100vh;
  background: linear-gradient(rgba(34, 34, 34, 0.5), rgba(10,10,10, .95));
	
  }
ul#nav li {margin-right:5px;display: inline-block;}
#slogan{margin-top: 0;
position: relative;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
color: rgba(250, 244, 167, 0.7);
font-size: 15px;
transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);}  
nav{right:0; text-align:right; padding: 0 40px; position:absolute;bottom:0;left:0;}
nav a ,nav a:link, nav a:visited, nav a:hover, nav a:active
{color:rgba(250, 244, 167, 0.7);; font-size:15px;transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
height: 65px;
line-height: 65px;
letter-spacing: 2px;margin-left:2px;}
nav a:hover, nav a:active{color:rgba(250, 244, 167, 1);}
#logo {max-width:75%;}
.sticky {
  position: fixed;
  top: 0;
	background:rgba(10,10,10, .95);
	bottom:auto;
	-webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.content{
    margin: 0 auto;
    width: 1280px;
}
.sticky + #content {
  padding-top: 100px;
}
.navlogo img{height: 35px;
	margin-bottom: -10px;}
.navlogo{float: left;
    padding: 0;
    margin: 0;
  opacity:0;
font-family: "Times New Roman", arial, sans-serif;
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 1s linear;
padding-left: 40px;
text-transform: uppercase;}
.sticky > .navlogo{opacity:1!important;

    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 1s linear;}

/*---------------
FOOTER
---------------*/
footer {
background:url('https://www.victoriascharm.nl/data/uploads/purple.jpg');
	background-position: bottom left;
	color:#fff!important;
	display:grid;
	font-size:1.5em;
background-repeat: no-repeat;
	background-size:auto 100%;
	min-height:300px;
	text-align:center;
	padding:40px;
	background-color: #6f277b!important;}

footer h2{color:#fff!important;}
footer a span{font-size:3em; 
    display: block;
    min-width: 150px;}

footer a span::after{
    content: "\a";
    white-space: pre;
}

/*---------------
LINKS
---------------*/

a {color:#fff;}
a:link, a:visited {
	color:rgba(255,255,255,0.9);
  text-decoration: none;
}
a:hover, a:active {
  color: #fff;
  text-decoration: none;
}

/*---------------
JAVA CSS
---------------*/

.parallax-window:before {
  content: '';
  height: 100%;
  width: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) and
  ((text-fill-color: transparent) or (-webkit-text-fill-color: transparent)) {
  .text-gradient {
width:100%;
    background-image: linear-gradient(to right, rgb(163, 128, 4),#faf4a7,rgb(163, 128, 4));
    background-size: cover;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
  }
}


/*---------------
FONT AWESOME icons
---------------*/

ul.social {padding:0px;font-size: 20px;}

    ul.social li {
        list-style-type: none;
        display: inline-block;
        margin-right: 20px;
      }
      .icon::before {
        display: inline-block;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
      }
      .tiktok::before {
        font-family: "Font Awesome 5 Brands";
        font-weight: 900;
        content: "\e07b";
      }
      .youtube::before {
        font-family: "Font Awesome 5 Brands";
        content: "\f167";
      }
      .instagram::before {
        font-family: "Font Awesome 5 Brands";
        content: "\f16d";
      }
      .down::before {
        font-family: "Font Awesome 5 Brands";
        content: "\f107";
      }


/*---------------
COLUMNS layout
---------------*/

ul {padding: 0;
	margin: 0;}

.center {
position: absolute;
top: 50%;
transform: translate(0, -50%);
}

.right, .left{width:50%; 
    display: inline-block;}

.col-container {
 width: 100%; /* Set full-width to expand the whole page */
    display: inline-block;

}
.col-table {
 display: table; /* Make the container element behave like a table */
 width: 100%; /* Set full-width to expand the whole page */
}
.col-cel {
	padding:300px 0;
    width: 50%;
    border-bottom: solid 1px rgba(0,0,0,0.8);
  display: table-cell; /* Make elements inside the container behave like table cells */
}

.col3 {
	width: fit-content;
    padding-bottom: 20px;
    display: block;
    float: left;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
}


/*---------------
Sections
---------------*/

section, footer {
	background-color:#fff;
    padding: 10px 0;
    font-size: 16px;
    font-weight: 300;
    color: #5f5f5f;
    line-height: 1.8;}
section h3{
	font-size:1.4rem!important;}
section h2,section h3, footer h2 {
    font-family: Dosis, arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.2em;
color:#111;
    line-height: 1.4;
    font-weight: 400;
font-size:2rem;}
.info {padding: 10px 50px;
    text-align: center;
	background:#fff;
    vertical-align: middle;}
.nails{
	background:url("https://www.victoriascharm.nl/data/uploads/header/2.jpeg");
    background-size: cover;}
.nails2{
	background:url('https://www.victoriascharm.nl/data/uploads/nailworks.jpg');
    background-size: cover;
}
section.contact{min-height: 500px;
padding: 20px 50px;
background: url('https://www.victoriascharm.nl/data/uploads/nails2.jpg');
background-size: cover;}

section.impressie{min-height: 500px;
padding: 20px 50px;
	text-align:right;
	color:#fff;
background: #6f277b;
border-bottom: solid 1px rgba(0,0,0,0.8);
border-top: solid 1px rgba(0,0,0,0.8);}
section.impressie h2{color:#fff;}


section.prijslijst{
padding: 20px 50px;
background: url('https://www.victoriascharm.nl/data/uploads/2-1-nagels.jpg');
	background-position: bottom right;
background-repeat: no-repeat;
	background-color: #F9F9F9;
border-bottom: solid 1px rgba(0,0,0,0.8);
}


	
#sc-contact{max-width:800px;}


/*---------------
FORMS
---------------*/

form{max-width:800px;}
input, textarea{background: rgba(255,255,255,0.3);}
.sc-submit:hover{
	background-color: rgba(255, 255, 255, 0.5)!important;}
.sc-submit {
-webkit-box-shadow: none!important;
-moz-box-shadow: none!important;
border: 1px solid #AAAAAA!important;
box-shadow: none!important;
background: rgba(255, 255, 255, 0.4)!important;
color: #111!important;
font-size: 1.2em;
}td.odd{
	width: 250px;vertical-align:top;}
td.even{width: 75px; text-align:left; vertical-align:top;}
.last .col3{border-bottom:none;}

input[type=text],input[type=email], select, textarea {
  width: 100%; /* Full width */
  padding: 12px; /* Some padding */
	background:rgba(255,255,255,0.5);
  border: 1px solid #ccc; /* Gray border */
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
  background-color: rgba(255,255,255,0.5);
  color: #5f5f5f;
  padding: 12px 20px;
  border: 1px solid #ccc; /* Gray border */
  border-radius: 4px;
  cursor: pointer;
	font-size:16px;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
  background-color: rgba(255,255,255,0.2);
}

/*---------------
GALLERY
---------------*/
.gallery-cycle {
	float: right;
background: #fff;
	font-family: 'The Nautigal', cursive;
	color:#000!important;
padding: 10px!important;
	font-weight:600;
	font-size:24px;
	box-shadow: 2px 2px 8px #111;}
.gallery-cycle .gallery-text{padding:0 10px!important; text-align:center;}
.gallery-cycle p{margin:0;}
#gallery-cycle-art{
	transform: rotate(-2deg);
}
#gallery-cycle-Acryl{
	transform: rotate(2deg);
}

.gallery_folder--item{
border: solid 10px #fff;
box-shadow: 2px 2px 8px #111;	
}