@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,300,700);
@import url(http://fonts.googleapis.com/css?family=Oswald:400,300,700);

html,body {
				height:100%;
				font-family: 'Open Sans', sans-serif;
				font-size: 1em;
				color: #fafafa;
				background-color: #1a1a1a;
				margin: 0 auto;
		}

		a{
			text-decoration: none;
			color: #111;
		}
			
		a:hover{
				color: #444;
		}
			
		img {
			max-width: 100%;
		}
		
		p{
		line-height: 160%;
		font-size: 0.9em;}
		
		h1, h2, h3{
		
		font-family: 'Oswald', sans-serif;
		letter-spacing: 1px;
		font-weight: 400;}

	/* Layout Elements */	


		header {
			width: 100%;
			overflow: visible;
			position: relative;
			top: 0;
			left: 0;
			z-index: 999;
		}
					  
		.header{
			
			color: #fff;
			background-color: #000;
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			padding: 0px;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			}
			@media only screen and (max-width: 900px) {
				.header { position: relative; 			display: block;
 }
			}
		
		.container {
			max-width: 1200px;
			margin-left: auto;
			margin-right: auto;
			padding: 20px 5%;
		}	
	
		
		.clearfix::after{
			content: '';
			display: table;
			clear: both;
		}

		.onethird{
		width: 30%;
		padding: 1%;
		float: left;
		
		}
		
		.onefourth{
		width: 21%;
		margin: 1%;
		padding: 1%;
		float: left;
		
		}
		
		.onefourthtop{
		width: 21%;
		max-width: 21%;
		float: left;
		margin-top: -1px;
		}
		.threefourths{
		width: 75%;
		margin: 1%;
		float: left;
		}
		
		.onehalf{
		width: 44%;
		margin: 2%;
		padding:1%;
		float: left;
		
		}
		
		.twothirds{
		width: 64%;
		margin: 1%;
		float: left;
		}
	
		.left{
			float:left;
			}
		
		.topright{
			float: right;
			margin-top: -35px;
			font-size: 1.8em;
			color: #666;
			margin-right: 2%;
		}
		
		
		.mediumgrey{
		background-color: #373737;
		color: #f1f1f1;
		padding: 10px 0;
		margin: 20px 0;}
		
		
		.btn {
		  display: inline-block;
		  padding: 10px 18px;
		  margin: 20px 0;
		  background-color:#c41d44;
		  font-size: 12px;
		  font-weight: 700;
		  font-family: 'Open Sans', Sans-Serif;
		  letter-spacing: 1px;
		  color: #ffffff;
		  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;
		  text-align: center; 
		}


		.btn:hover {
		  background-color: #8f1330;
		  
		}
		
		
		
		
	/*Navigation*/

		.logo-img { height: 100px; width: auto; }
	
		.header a {
		color: #fff;}
		
		.headerNavButton {
				float: right;
				display: inline-block;
				height: 100%;
				position: absolute;
				right: 1em;
				top: 0;
				font-family: 'Open Sans', 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%);
					background-color: #000;
					
                }

                #hamburgerMenu {
                    position: relative;
                    top:40%;
                    -webkit-transform: translateY(-50%);
                    -ms-transform: translateY(-50%);
                    transform: translateY(-50%);
					background-color: #000;
					padding: 25px 10px 26px 5px;
					

                }
				
				
				
    #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: 'Open Sans', sans-serif;
            
        }

        .headerNav.active {
            display: block;
        }

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

        .headerNav>a {
            font-weight: 700;
        }



        .headerNav ul {
            list-style: none;
        }
			

			
        .headerNav>ul {
             
            padding: 0;
        }

                
		.headerNav ul li {
            border-right: solid 1px #dedede;
			padding-right: 20px;
        }
				
		.headerNav ul li  ul li{
            border-right: none;
					
        }
		
	/* Typography */
		
		.bold{
		font-weight: 700;}

		.title{
		font-size: 2em;
		text-align: center;
		font-family: 'Oswald', sans-serif;
		letter-spacing: 1px;}

		.center{
		margin-left: auto;
		margin-right: auto;
		text-align: center;}
		
		.pagetitle {
		font-size: 1.5em;}


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

		}


		input, textarea, file {
			width: 80%;
			height:5px;
			background-color:#eee;
			padding: 20px;
			margin: 5px 0;
			font-size:0.9em;
			color:#3a3a3a;
			font-family: 'Open Sans', sans-serif;
			max-width: 90%;
			
		}

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

		
		textarea 
		{
			height:80px;
			background-color: #eee;
			font-family: 'Open Sans', sans-serif;

		}



		#submit {
			display: inline-block;
			/* padding: 15px 10px 35px 10px; */
			width: 170px;
			margin-top: .8em;
			background-color: #c41d44;
			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;
			-webkit-appearance: none;
-webkit-border-radius: 0;
		}

		#submit:hover {
			color:#fff;
			background-color: #9e1434;
			

		}
		


	/* Footer */
		
		.footer {
			max-width: 100%;
			border-top: 1px solid #555;
			background-color: #333;
			font-family: 'Open Sans', sans-serif;
			font-size: 0.8em;
			letter-spacing: 1px;
			text-align: center;
			color: #999;
			padding: 15px;
		}

		
		.footer a {
		color: #fff;
		font-weight: 600;}
		
		.footer a:hover {
		color: #dedede;}
		

	/* Back to Top */
		.cd-top {
		  display: inline-block;
		  height: 50px;
		  width: 50px;
		  position: fixed;
		  bottom: 30px;
		  right: 20px;
		  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
		  /* image replacement properties */
		  overflow: hidden;
		  text-indent: 100%;
		  white-space: nowrap;
		  background: #c41d44 url(../img/top-arrow.png) no-repeat center 50%;
		  visibility: hidden;
		  opacity: 0;
		  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
		  -moz-transition: opacity .3s 0s, visibility 0s .3s;
		  transition: opacity .3s 0s, visibility 0s .3s;
		  z-index: 1;
		}
		.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
		  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
		  -moz-transition: opacity .3s 0s, visibility 0s 0s;
		  transition: opacity .3s 0s, visibility 0s 0s;
		}
		.cd-top.cd-is-visible {
		  visibility: visible;
		  opacity: 1;
		}
		.cd-top.cd-fade-out {
		  opacity: .7;
		}
		.no-touch .cd-top:hover {
		  background-color: #051339;
		  opacity: 1;
		}
		

	/* Media Queries */

		@media only screen and (max-width: 900px) {
	   
			.headerNav {
				position: absolute;
				right: 16px;
				width: 80%;
				z-index: 1337;
				padding: 0 2em;
				border-bottom: solid 3px #0a3678;
				background-color: #111;
				margin-top: 18px;
			}

			.headerNav a {
				border-top: solid 1px #0a3678;
				color: #fff;
				font-weight: 300;
							
			}
						
			.headerNav a:hover {
				color: #999;
			}
						
			.headerNav ul li ul li  a{
				border-top: solid 1px #333;		
			}
					
			.topbar{
				background-color: #f1f2f2}
					
			.twothirds{
				width: 100%;}
					
		}
  
    @media only screen and (min-width: 900px) {

         .headerNavButton {
         display: none;
         }

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

        .headerNav .subnav {
            display: none;
        }

        .headerNav>a {
            text-align: center;
            font-weight: 300;
            padding: 0;
            color: #8d8977;
            font-size: 1.3em;
        }

        .headerNav>ul {
            float: right;
		}

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

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

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

        .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;
		}
									
		.headerNav ul li ul li a:hover {
           color: #0a3678;
		}
		
    }


    @media only screen and (min-width: 1200px) {
  
                .headerNav>ul>li{
                    margin-left: 1em;
                    font-size: 1em;
                }

                .headerNav ul li:hover ul {
                        margin-left: -35px;
                    }
					
				.headerNav ul li ul li a {
                    border-bottom: solid 1px #ccc;
                    padding: 1em 0;
					color: #555; }
									
				.headerNav ul li ul li a:hover {          
					color: #0a3678;	
                }

         
    }	
	a[href^="tel"] { color: white; }

	@media only screen and (max-width: 900px) {
			.onefourth{
			width: 45%;
			max-width: 50%;}

			.home-service { display: flex; flex-direction: column; justify-content: center; align-items: center; }
			.home-service h3 { text-align: center; }

	}	

				
	@media only screen and (max-width: 768px) {
				.onehalf{
				width: 95%;
				max-width: 100%;}

	}
		
	@media only screen and (max-width: 580px) {
			.onefourth{
			width: 100%;
			max-width: 100%;}

			.camera_caption {
			width: 100%;
			}

			.camera_caption h1{
			font-size: 1.5em;
			}

	}


	@media (max-width: 480px){

			.phone{
				padding-top: 20px;
				margin-top: -40px;
			}

	}


/* ---------------------------------------------------------
                    Pages
   --------------------------------------------------------- */

.about-image { width: 350px; height: auto; transition: all, .3s; border-radius: 5px; border: 2px solid white; }   
.about-image:hover { transform: scale(1.05); }

.call-to-action-image { width: 550px; height: auto; transition: all, .3s; border-radius: 5px; border: 2px solid white; }   
.call-to-action-image:hover { transform: scale(1.05); }

.service-image { height: 190px; width: auto; transition: all, .3s; border-radius: 5px; border: 2px solid white; }
.service-image:hover { transform: scale(1.05); }

.contact-input { background-color: transparent; border: none; color:#f7f7f7; border-bottom: 2px solid white; } 
.submit-button { padding: 25px 60px; background-color: #C41D44; color: white; border: none; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }

.footer { display: flex; flex-direction: column; justify-content: center; align-items: center; }
.header-phone { font-size: 18px; font-weight: 500; }
.hero-number { display: none; }
@media only screen and (max-width: 800px) {
	#submit { padding: 15px 10px 35px 10px; }
	.submit-button { padding: 25px 60px; }
	.header-phone { display: none; }
	.hero-number { display: block; font-size: 19px; margin-top: 16px; }
}