@import url(https://fonts.googleapis.com/css?family=Lato:400,700,300);
@import url(https://fonts.googleapis.com/css?family=Petit+Formal+Script);

html,body {
				height:100%;
				font-family: 'Lato', sans-serif;
				font-size: 1em;
				color: #444;
				background-color: #f2f2f2;
				margin: 0 auto;	
		}

		a{
			text-decoration: none;
			color: #d1207e;
		}
			
		a:hover{
				color: #f27db1;
		}
			
		img {
			max-width: 100%;
		}
		
		p{
		line-height: 160%;
		font-size: 0.9em;
		padding:5px 10px;
		-webkit-animation-delay: 1s;
		-moz-animation-delay: 1s;
		}
		
		h1{
		font-family: 'Petit Formal Script', sans-serif;
		font-weight: 400;
		margin-top: -10px;
		margin-left: 10px;
		text-align: center;
		font-size: 2.2em;
		color: #d1207e;
		}
		
		 h2{
		font-family: 'Petit Formal Script', sans-serif;
		font-weight: 400;
		text-align: center;
		font-size: 2.2em;
		}
		
		h3 {
		font-family: 'Petit Formal Script', sans-serif;
		font-size: 1.8em;
		font-weight: 400;
		text-align: center;
		margin-bottom: -5px;
		color: #d1207e;
		}
		
		h4{
		font-size: 1.6em;
		color: #d1207e;
		margin-left: 10px;
		font-family: 'Petit Formal Script', sans-serif;
		font-weight: 400;
		margin-bottom: -5px;
		}

		
		.container {
			max-width: 1200px;
			margin-left: auto;
			margin-right: auto;
			padding: 10px 5%;
		}
		
		header{
		background-color: #d1207e;
		width: 100%;
		position: fixed;
		top: 0px;
		left: 0px;
		height: 60px;
		z-index: 6;
		padding: 10px 0;
		}
		
		#gallery-list{
			list-style: none;
			margin: 0;
			padding: 0;
		}
		#gallery-list a{
			display: inline-block;
			margin: 23px;
			position: relative;
		}
		#gallery-list a .delete{
			position: absolute;
			top: 0px;
			right: 0px;
			font-weight: bold;
			color:#fff;
			background-color: rgba(0,0,0,0.5);
			padding: 5px;
			box-sizing: border-box;
			cursor: pointer;
			line-height:10px;
			padding-bottom:10px;
		}
		#gallery-list li .delete:hover{
			background-color: rgba(0,0,0,0.9);
		}
	
	#logo{
	margin-top: -20px;}
	
		.clearfix::after{
			content: '';
			display: table;
			clear: both;
		}
		
		
		.headerbar{
			width: 100%;
			max-width: 100%;
			color: #fff;
			background-color: #222;
			padding: 10px 0;
			height: 30px;
			font-size: 0.9em;
			}
		

		.onethird{
		width: 29.3%;
		padding: 1%;
		margin: 1%;
		float: left;
		background: #ddd;
		}
		
		.third{
		width: 30%;
		padding: 1%;
		float: left;
		margin-bottom: 20px;
		}
		
		.onefourth{
		width: 21%;
		margin: 1%;
		padding: 1%;
		float: left;
		}
		
		.threefourths{
		width: 73%;
		margin: 1%;
		float: left;
		}
		
		.onehalf{
		width: 44%;
		margin: 1% 2%;
		padding:1%;
		float: left;
		}
		
		.twothirds{
		width: 60%;
		margin: 1%;
		padding: 0 2%;
		float: left;
		}
	
		.left{
			float:left;
		}
		
		.topright{
		position: absolute;
		top: 10px;
		right: 20px;
		font-size: 0.75em;
		}
		
		.right{
		text-align: right;
		}
	
		.topright a{
		color: #fff;}
		
		.aboutbg{
		width: 100%;
		max-width: 100%;
		height: 390px;
		min-height: 200px;
		background: url(../img/aboutbg.jpg) no-repeat top right;
		margin-bottom: 20px;
		}
		
		.contactbg{
		width: 100%;
		max-width: 100%;
		height: 390px;
		min-height: 200px;
		background: url(../img/contactbg.jpg) no-repeat top center;
		margin-bottom: 20px;
		}
		
		.rightbtn{
		text-align: right;
		margin-top: 30px;
		}
		
		.btn {
		  display: inline-block;
		  padding: 10px 18px;
		  margin: -3px 10px 30px 0;
		  font-size: 12px;
		  font-weight: 700;
		  font-family: 'Lato', Sans-Serif;
		  letter-spacing: 1px;
		  background-color: #d1207e;
		  color: #fff;
		  text-transform: uppercase;
		  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
		  -webkit-transition: background-color 0.3s;
		  -moz-transition: background-color 0.3s;
		  transition: background-color 0.3s;
		  text-align: center; 
		}

		.btn:hover {
		  background-color: #f27db1;
		  color: #fff;
		}
		
		.center{
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		}
		
		
	/* Typography */
		
		.bold{
		font-weight: 700;
		}

		.title{
		font-size: 1.5em;
		text-align: center;
		font-family: 'Lato', sans-serif;
		color: #fff;
		font-weight: 300;
		}
		
		.title a{
		color: #fff;
		}

		.center{
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		}	
		
		.hotpink{
		color: #d1207e;
		}
		
		.bigger{
		font-size: 1.2em;
		font-weight: 300;
		}
		
		.twothirds ul{
		font-size: 0.9em;
		margin-bottom: 10px;
		}
		
		.twothirds li{
		line-height: 160%;
		}
		
	
	/*Parallax */
	
		.parallax { 
		background: url('../img/bg.jpg') no-repeat center center; 
		-webkit-background-size: cover; 
		-moz-background-size: cover; 
		-o-background-size: cover; 
		background-size: cover; 
		background-attachment: fixed;
		padding: 60px 0;	
		max-width: 100%;
	}

		.parallax h1 { 
		color: #111;
		font-size: 2.5em; 
		margin-top: 40px;
		margin-bottom: 20px;
		letter-spacing: 1px; 
		text-align: center;
		line-height: 130%;
		font-weight: 400; 
		font-family: 'Petit Formal Script', sans-serif;  
		text-shadow: 1px 1px 0 #fff;
		}

		.parallax p {
		font-size: 15px; 
		margin-top: 20px; 
		letter-spacing: 1px; 
		font-family: 'Lato', sans-serif; 
		font-weight: 400;
		color: #fff;
		}

		/* Form */
		
		form {
		margin:0 auto;
		max-width: 100%;
		}

		input, textarea, file {
			width: 80%;
			height:5px;
			background-color:#fff;
			padding: 20px;
			margin: 5px 0;
			font-size:0.9em;
			color:#111;
			font-family: 'Lato', sans-serif;
			max-width: 90%;
			border: 1px solid #ccc;
		}

		input:focus, textarea:focus {
			border:1px solid #16a3d2;
		}

		textarea 
		{
			height:80px;
			background-color: #fff;
			font-family: 'Lato', sans-serif;
			border: 1px solid #ccc;

		}

		#submit {
			display: inline-block;
			padding: 12px 10px 30px 10px;
			width: 130px;
			margin-top: .9em;
			margin-bottom: 30px;
			background-color: #d1207e;
			font-size: 14px;
			font-weight: 700;
			letter-spacing: 1px;
			color: #fff;
			border: none;
			text-transform: uppercase;
			box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
			-webkit-transition: background-color 0.2s;
			-moz-transition: background-color 0.2s;
			transition: background-color 0.2s;
		}

		#submit:hover {
			color:#fff;
			background-color: #f27db1;
		}
		
			
		/*Social Links */
	
		.facebook{
			padding: 0 5px;
			font-size: 1.5em;
			}
	
		.facebook:hover{
			color: #3b5998;
			}
		
		.twitter{
			padding: 0 5px;
			font-size: 1.5em;
			}
		
		.twitter:hover {
			color:#00aced;
			}
		
		.instagram{
			padding: 0px 5px;
			font-size: 1.5em;
		}
	
		.instagram:hover {
			color:#125688;
		}
		
		.mail{
			padding:0 5px;
			font-size: 1.5em;
			}
		
		.mail:hover{
			color:#f27db1;
			}
				
			
		
	/* Footer */
	
		.footer {
			max-width: 100%;
			font-family: 'Lato', sans-serif;
			font-size: 0.9em;
			background-color: #333;
			letter-spacing: 1px;
			color: #aaa;
			padding: 10px 0 5px 0;
		}
		
		.footer p{
		margin-top: -10px;
		}
		
		.footer a {
		color: #f2f2f2;
		font-weight: 400;
		}
		
		.footer a:hover {
		color:#f27db1;
		}
		
		.footerright{
		margin-top: -40px;
		text-align: right;
		}


		/*Nav */


			.headerNavButton {
				float: right;
				display: inline-block;
				height: 100%;
				position: absolute;
				right: 1em;
				top: 0;
				font-family: 'Lato', sans-serif;
			}

            .headerNavButton a {
                text-decoration: none;
                color: #fff;
                margin-left: 0.5em;
                line-height: 0px;
                -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            }

                #hamburger-icon {
                    position: relative;
                    top: 50%;
                    -webkit-transform: translateY(-50%);
                    -ms-transform: translateY(-50%);
                    transform: translateY(-65%);
					
					
                }

                #hamburgerMenu {
                    position: relative;
                    top:35%;
                    -webkit-transform: translateY(-50%);
                    -ms-transform: translateY(-50%);
                    transform: translateY(-50%);
                }
				
				
    #hamburger-icon {
        width:25px;
        height:12px;
        position:relative;
        display:block;
        /*margin: 25px auto 12px auto;*/
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

        #hamburger-icon .line {
            display:block;
            background: #fff;
            width:25px;
            height:2px;
            position:absolute;
            left:0;
            border-radius: 4px;
            transition: all 0.4s;
            -webkit-transition: all 0.4s;
            -moz-transition: all 0.4s;
        }
        
            #hamburger-icon .line.line-1 {
                top:0;
            }
            #hamburger-icon .line.line-2 {
                top:50%;
            }
            #hamburger-icon .line.line-3 {
                top:100%;
            }

        #hamburger-icon:hover .line-1, #hamburger-icon:focus .line-1 {
            transform: translateY(-4px);
            -webkit-transform: translateY(-4px);
            -moz-transform: translateY(-4px);
        }
        #hamburger-icon:hover .line-3, #hamburger-icon:focus .line-3 {
            transform: translateY(4px);
            -webkit-transform: translateY(4px);
            -moz-transform: translateY(4px);
        }

        #hamburger-icon.active .line-1 {
            transform: translateY(6px) translateX(0) rotate(45deg);
            -webkit-transform: translateY(6px) translateX(0) rotate(45deg);
            -moz-transform: translateY(6px) translateX(0) rotate(45deg);
        }
        #hamburger-icon.active .line-2 {
            opacity:0;
        }
        #hamburger-icon.active .line-3 {
            transform: translateY(-6px) translateX(0) rotate(-45deg);
            -webkit-transform: translateY(-6px) translateX(0) rotate(-45deg);
            -moz-transform: translateY(-6px) translateX(0) rotate(-45deg);
        }

        
        .headerNav {
            display: none;
            font-family: 'Lato', sans-serif;
        }

        .headerNav.active {
            display: block;
        }

        .headerNav a {
            text-decoration: none;
            color: #ccc;
            width: 100%;
            display: block;
            padding: 1em 0;
			font-weight:400;
           }

        .headerNav ul {
            list-style: none;
        }
			
        .headerNav>ul {
             margin: 0;
            padding: 0;
        }
     
		.headerNav ul li {
			padding-right: 20px;
        }
				
		.headerNav ul li  ul li{
            border-right: none;		
        }
		
		
		.products.gallery {
  -webkit-column-width: 300px;
     -moz-column-width: 300px;
          column-width: 300px;
  -webkit-column-gap: 5px;
     -moz-column-gap: 5px;
          column-gap: 5px;
  padding: 0 5px;
  font-size: 0;
}
.products.gallery figure {
  position: relative;
  display: inline-block;
  width: 100%;
  height: auto;
  margin: 0 0 5px 0;
}
.products.gallery figure::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: background 300ms;
          transition: background 300ms;
}
.products.gallery figure img {
  width: 100%;
  height: auto;
}
.products.gallery figure figcaption {
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 2;
  width: 100%;
  max-height: 100%;
  padding: 20px 0;
  font-size: 24px;
  text-align: center;
  color: #fff;
  opacity: 0;
  overflow: auto;
  font-family: "Petit Formal Script", sans-serif;
  -webkit-transition: opacity 300ms;
          transition: opacity 300ms;
  -webkit-overflow-scrolling: touch;
}
.products.gallery figure figcaption::-webkit-scrollbar {
  width: 4px;
}
.products.gallery figure figcaption::-webkit-scrollbar-track {
  background: transparent;
}
.products.gallery figure figcaption::-webkit-scrollbar-thumb {
  background: #bbb;
}
.products.gallery figure figcaption::-webkit-scrollbar-thumb:hover {
  background: #999;
}
.products.gallery figure:hover::after {
  background: rgba(0, 0, 0, 0.8);
}
.products.gallery figure:hover figcaption {
  opacity: 1;
}



.products.gallery figure {
  position: relative;
  display: inline-block;
  width: 100%;
  height: auto;
  margin: 0 0 5px 0;
}
.products.gallery figure::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: background 300ms;
          transition: background 300ms;
}
figure img {
  width: 100%;
  height: auto;
}
 figure figcaption {
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 2;
  width: 100%;
  max-height: 100%;
  padding: 20px 0;
  font-size: 24px;
  text-align: center;
  color: #fff;
  opacity: 0;
  overflow: auto;
  font-family: "Petit Formal Script", sans-serif;
  -webkit-transition: opacity 300ms;
          transition: opacity 300ms;
  -webkit-overflow-scrolling: touch;
}
 figure figcaption::-webkit-scrollbar {
  width: 4px;
}
figure figcaption::-webkit-scrollbar-track {
  background: transparent;
}
figure figcaption::-webkit-scrollbar-thumb {
  background: #bbb;
}
figure figcaption::-webkit-scrollbar-thumb:hover {
  background: #999;
}
figure:hover::after {
  background: rgba(0, 0, 0, 0.8);
}
figure:hover figcaption {
  opacity: 1;
}

figure {
  position: relative;
  display: inline-block;
  width: 100%;
  height: auto;
  margin: 0 0 5px 0;
}
figure::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: background 300ms;
          transition: background 300ms;
}
	
	@media only screen and (min-width: 900px) {

         .headerNavButton {
         display: none;
         }

         .headerNav {
            display: block;
            margin-top: -135px;
			height: 30px;
        }

        .headerNav .subnav {
            display: none;
        }

        .headerNav a {
            text-align: center;
            font-weight: 300;
            padding: 0;
            color: #fff;
        }

        .headerNav>ul {
            float: left;
			margin-left: 20%;
		}

        .headerNav>ul>li{
            display: inline-block;
            margin-left: 6px;
            font-size: 1em;	
		}

        .headerNav ul li a {
            padding: 0.1em 1px;
		}

        .headerNav>ul>li:hover>a {
            color: #fcc7de;
        }

        .headerNav ul li:hover ul {
            display: block;
            position: absolute;
            z-index: 1337;
            background-color: rgba(240,240,240,.95);
            padding: 0;
            margin-left: -28px;
		}

        .headerNav ul li ul li {
            display: block;
            margin: 0 1em;
        }

        .headerNav ul li ul li a {
            border-bottom: solid 1px #ccc;
            padding: 1em 0;
			color: #555;
			font-size: 0.9em;
			font-weight: 400;
		}
									
		.headerNav ul li ul li a:hover {
           color: #ca2079;
		}
		
    }
	
	
	@media only screen and (max-width: 900px) {
			.onefourth{
			width: 45%;
			max-width: 50%;
			}
			
			.halfbg{
			width: 48%;
			max-width: 48%;
			min-height: 460px;
			}
			
			.container-1{
			padding: 0 5%;
			width: 90%;
			}
			
			.onethird ul{
			width: 100%;
			margin-left: -18px;
			}
			
			.onethird li{
			padding-right: 5px;
			}
			
			
			.headerNav {
				position: absolute;
				right: 16px;
				top: 52px;
				width: 80%;
				z-index: 1337;
				padding: 0 2em;
				border-bottom: solid 2px #ca2079;
				background-color: #f2f2f2;
				margin-top: 18px;
			}

			.headerNav a {
				color: #444;
				font-weight: 400;
							
			}
						
			.headerNav a:hover {
				color: #ca2079;
			}
						
			
			
			
	}	

				
	@media only screen and (max-width: 800px) {
				
				h1{
				margin-top: 15px;
				}

				.third{
				width: 48%;
				max-width: 48%;
				}
				
				
				.onethird, .twothirds{
				width: 100%;
				max-width: 100%;
				}
					
				.onethird ul{
				width: 80%;
				margin: 0 auto;
				}
		
	}
	
	
		@media only screen and (max-width: 768px) {
			.menu{
				display: none;
				}
				
				header{
				height: 70px;}
				
		}
		
		
	@media only screen and (max-width: 600px) {
			.onefourth{
			width: 100%;
			max-width: 100%;
			}
			
			.onehalf{
			width: 100%;
			max-width: 100%;
			}
			
			
			.onethird ul{
			width: 100%;
			margin-left: -10px;
			}
			
			.third{
				width: 98%;
				max-width: 98%;
			}
			

	}