@font-face {
    font-family: newParisSkyline;
    src: url(/webfonts/XL/NewParisSkyline-Regular-WebXL.woff);
}


body {
	padding:0px;
	margin:0px;
}

#banner {
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:space-around;
    width:calc(100% - 34px);
    padding:17px;
	height:auto;
	border:0px solid #000;
}

    #name_container {
        position:relative;
        display:block;
        height:auto;
    }

        #salonName {
            font-family: newParisSkyline;
        	font-size:36pt;
        	  -moz-font-feature-settings:"ss01";
        	  -ms-font-feature-settings:"ss01";
        	  -o-font-feature-settings:"ss01";
        	  -webkit-font-feature-settings:"ss01";
        	  font-feature-settings:"ss01";
        	color:#2e2e2e;
        	display:flex;
        	flex-direction:row;
        	flex-wrap:no-wrap;
        }
        
        #salonNameSubscript {
            font-family: newParisSkyline;
        	font-size:13pt;
        	position:absolute;
        	top:51px;
        	left:234px;	
        	color:#2e2e2e;
        }

#topMenu {
    display:flex;
    flex-direction:row;
    justify-content:flex-end;
    flex-wrap:no-wrap;
    height:auto;
    width:auto;
    flex-shrink:0;
}
    .topMenu {
        font-family: newParisSkyline;
    	font-size:17pt;
    	text-decoration:none;
    	color:#2e2e2e;
    	display:block;
    	text-align:center;
    	padding:27px;
    	border:0px;
        transition: all .8s ease 0s;
    }
    
    .topMenu:hover {
    	background-color:#eaeaea;
    	color:#000000;
    }

#hair_container{
    position:relative;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-content:center;
	align-items:center;
	flex-grow:0;
	flex-shrink:0;
	width:100%;
	height:100vh;
    max-height:calc(100vh - 109px);
}

    #welcomeHair {
        display:flex;
    	flex-direction:column;
    	justify-content:center;
    	align-content:center;
    	align-items:center;
    	background-color:#fff;
    	color:#2e2e2e;
    	width:90%;
    	height:calc(100% - 97px);
    }
    
    #welcomeHair img{
        height:100%;
        width:90%;
        object-fit:contain;
    }

.cutName {
    font-family: newParisSkyline;
	text-align:center;
	font-size:22pt;
	display:flex;
	width:100vw;
	height:97px;
	justify-content:center;
	align-items:center;
	align-content:center;
	cursor:pointer;
	  -moz-font-feature-settings:"ss01";
	  -ms-font-feature-settings:"ss01";
	  -o-font-feature-settings:"ss01";
	  -webkit-font-feature-settings:"ss01";
	  font-feature-settings:"ss01";
    background-color:#fff;
}

.capSpanMenu {
    font-family: newParisSkyline;
	  -moz-font-feature-settings:"ss01";
	  -ms-font-feature-settings:"ss01";
	  -o-font-feature-settings:"ss01";
	  -webkit-font-feature-settings:"ss01";
	  font-feature-settings:"ss01";
	font-size:23pt;
}

#menu {
	margin-top:77px;
    position:relative;
    display:flex;
    justify-content:flex-start;
    flex-wrap:wrap;
    width:calc(100vw);
    height:auto;
    min-height:100vh;
    font-family: newParisSkyline;
	background-color:#fff;
	color:#000;
	font-size:21pt;
	margin-bottom:27px;
}
    #menu a {
        margin-top:27px;
    }
    
    .section_container {
        display:block;
	    padding:20px;
        width:calc(30vw - 40px);
        min-width:calc(30vw - 40px);
        max-width:calc(30vw - 40px);
        height:auto;
        background-color:#fff;
	    margin-left:auto;
	    margin-right:auto;
	    flex-shrink:0;
	    border-bottom:1px dotted #333;
    }
        .section_item {
            padding-left:37px;
            display:flex;
            flex-direction:row;
            justify-content:space-between;
            font-size:15pt;
            margin-top:13px;
        }

#contact {
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    align-content:center;
    width:auto;
    height:100vh;
    font-family: newParisSkyline;
	font-size:21pt;
	margin-top:77px;
}
    #contact a {
        margin-top:27px;
    }

.backButton {
    width:100%;
    text-align:center;
    padding:37px 0px 37px 0px;
}

@media(max-width:1100px)
{
    .section_container {
        display:block;
	    padding:20px;
        width:calc(48vw - 40px);
        min-width:calc(48vw - 40px);
        max-width:calc(48vw - 40px);
        height:auto;
	    margin-right:2%;
	    flex-shrink:0;
    }
}

@media(max-width:800px)
{
    .section_container {
        display:block;
	    padding:20px;
        width:calc(100vw - 40px);
        min-width:calc(100vw - 40px);
        max-width:calc(100vw - 40px);
        height:auto;
	    margin-right:0%;
	    flex-shrink:0;
    }
}

@media(max-width:600px)
{
    
    #banner {
        display:flex;
        flex-direction:column;
        flex-wrap:no-wrap;
        height:auto;
        width:auto;
    	justify-content:center;
    	align-content:center;
    	align-items:center;
    }
    
    #topMenu {
        margin-top:17px;
    }
    
    #hair_container{
        max-height:calc(100vh - 187px);
    }
    
}