#contact {
	width: 100%;
	height: auto;
	overflow: hidden;
	position: relative;
	left: -100%;
	display: none;

	.contact-holder {
	    width: 100%;
	    height: 100vh;
	    float: left;
	    background-image: url(../images/contact-background.JPG);
	    background-repeat: no-repeat;
	    background-size: cover;
	    background-color: rgba(0, 0, 0, 0.4);
	    background-blend-mode: multiply;
	    color: white;
	    z-index: 1;
	    position: relative;
	    min-height: 800px;
	}

	@media (max-width: $tabletBreakpoint) { 
		position: relative;
		height: auto;
	}

	.gradient-contact {
		height: 100% !important;
		background: -moz-linear-gradient(left, #73abdd 0%, transparent 79%, transparent 80%);
		background: -webkit-linear-gradient(left, #73abdd 0%, #5a7287 79%, transparent 80%);
		background: linear-gradient(to left, rgba(115, 171, 221, 0.4) 16%, rgba(115, 171, 221, 0.4) 18%, transparent 80%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 );
	}

	.contact-container {
		width: 1000px;
		height: auto;
		margin: 0 auto;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 2;

		h1 {    
			position: absolute;
    		color: white;
		    top: -144px;
    		left: 42%;
    		font-size: 44px;
    		text-transform: uppercase;
    		font-family: "neutraface-bold";
    		border-bottom: 1px solid #45617a;

    		@media (max-width: $tabletBreakpoint) { 
    			display: none;
    		}
		}

		@media (max-width: $tabletBreakpoint) { 
		    width: 100%;
		    height: 100%;
		    position: absolute;
		    float: left;
		}

		.__logo {
				display: none;
				@media (max-width: $tabletBreakpoint) { 
					display: block;
					margin: 0 auto;
					width: 200px;
				}
			}
	}

	.map-container {
		width: 50%;
		height: 600px;
		display: block;
		float: left;

		@media (max-width: $tabletBreakpoint) { 
	        display: block;
		    position: absolute !important;
		    left: 17%;
		    width: 70%;
	        bottom: 11px;
		    clear: both;
		    padding-top: -1px;
		}

		@media (max-width: $mobileBreakpoint) { 
    		bottom: 2%;
    		width: 70%;
    		height: 40%;
		}

		@media (orintation: landscape) {
			bottom: -200%;
			float: right;
		}
	}

	.contact-infos {
		width: 50%;
		height: auto;
		float: right;
		position: absolute;
		left: 42%;
		bottom: 7%;
		border: 1px solid #73abdd;
		padding-bottom: 16px;

		@media (max-width: $tabletBreakpoint) { 
		    width: 100%;
		    float: none;
		    margin: 0 auto;
		    text-align: center;
		    position: absolute;
		    border: none;
		    left: 0%;
		    top: 7%;
		}

		.contact-infos-container {
			width: 70%;
			height: auto;
			float: right;
			color: #fff;

			@media (max-width: $tabletBreakpoint) {  
				width: 100%;
				text-align: center;
			}

			
			h1 {
		        font-family: "neutraface-bold";
			    font-size: 44px;
			    text-transform: uppercase;
			    width: auto;
			    margin: 0 auto;
			    border-bottom: 1px solid #45617a;
			    display: none;
			    top: -59px;
			    left: 121px;
			    position: inherit;
			    text-align: center;

			    @media (max-width: $tabletBreakpoint) {  
			    	display: block;
			    	margin: 0 auto;
			    	width: 70%;
			    }
			}


			h3 {
				font-family: "neutraface-bold";
				text-transform: uppercase;
				font-size: 24px;
				letter-spacing: 1px;

				@media (max-width: $tabletBreakpoint) {  
					color: #73abdd;
				}
			}

			p {
				font-family: "neutraface-text";
				text-transform: uppercase;
			}

			img {
				margin-top: -17px;
			}
		}

		.logo-contact-transparent {
			width: 300px;
			float: right;
			bottom: -19%;
			position: absolute;
			left: 70%;

			@media (max-width: $tabletBreakpoint) { 
				display: none;
			}
		}
	}
}

.mobile-map {
    width: 100%;
    height: 625px;
    background: #000000;
    float: left;
    padding-bottom: 10%;
    display: none;

    @media (max-width: $tabletBreakpoint) { 
		display: block;
	    height: 600px;
	    padding-bottom: 10px;
	    padding-top: 10px;
	}

	@media (max-width: $tabletBreakpoint) { 
		height: 600px;
	}
}