go /*HTML OPEN*/

html {
    margin: 0;
    padding: 0;
}

/*HTML CLOSE*/




/*HEADER OPEN*/
header
{
	margin:auto;
	width: 60%;
	height: 75px;
	padding: 10px 0;
	box-sizing:border-box;
	background: rgba(255,233,233,.2);
	box-shadow: 0 5px 15px rgba(0,0,0,.2);
}

.topnav {
  	overflow: hidden;
  	background: rgba(242,38,19,.8);
	box-shadow: 0 5px 15px rgba(0,0,0,.2);	
}
  
/* Style the links inside the navigation bar */
.topnav a {
  	float: left;
  	display: block;
  	color: #f2f2f2;
  	text-align: center;
  	padding: 14px 16px;
  	text-decoration: none;
}


/* Change the color of links on hover */
.topnav a:hover {
  	background-color: #ddd;
  	color: black;
}


/* Add an active class to highlight the current page */
.topnav a.active {
  	background-color: rgba(242, 38, 19, 1);
  	color: white;
}


/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  	display: none;
}



/*HEADER CLOSE*/





/*BODY OPEN  NOTE REMOVAL OF PADDING 20*/
body{
	background:url(../img/lineBG-3.jpg);
	background-repeat:no-repeat;
	background-size:cover;
	background-attachment:fixed;
    margin: 0;
    padding: 0;
	font-size: 100%;
}


section
{
	position: relative;
	width: 100%;
	height: 70vh;
	background: url(../img/lineBannerCenter2-1920x600.png);
	background-position: center center;
	box-sizing:border-box;
	box-shadow: 0 5px 15px rgba(0,0,0,.5);
	background-repeat:no-repeat;
	background-size:cover;
}



div
{
  	margin: 0;
  	font-family: Poppins, Arial, Helvetica, sans-serif;
}






h1 {
  	display: block;
 	font-size: 2em;
 	color: #333;
  	margin-top: 0.67em;
  	margin-bottom: 0.67em;
  	margin-left: 0;
  	margin-right: 0;
  	font-weight: bold;
}


h2 {
  	display: block;
  	font-size: 1.5em;
   	color: #333;
  	margin-top: 0.83em;
  	margin-bottom: 0.83em;
  	margin-left: 0;
  	margin-right: 0;
  	font-weight: bold;
}


h3 {
  	display: block;
  	font-size: 1.17em;
  	margin-top: 1em;
  	margin-bottom: 1em;
  	margin-left: 0;
  	margin-right: 0;
  	font-weight: bold;
}


* {
  	box-sizing: border-box;
}


/*PAGE GRID OPEN*/

.row::after {
  	content: "";
  	clear: both;
  	display: table;
}


[class*="col-"] {
  	float: left;
  	padding: 10px;
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, img{
	max-width: 100%; 
	height: auto;
}


.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

/*PAGE GRID CLOSE*/

.page-container{
	max-width: 60%;
	margin: 0 auto;
	padding: 25px 25px;
	}


.button {
  	background: rgba(242,38,19,.8);
  	padding: 1em 2em;
  	color: #fff;
  	border: 0;
 	 border-radius: 5px;
  	cursor: pointer;
}


.button:hover {
  	background: rgba(242,38,19,.3);
  	color: #000;
  	border: 1px solid #000;
}


 .iframe-container{
	position:relative;
	width: 100%;
	padding-top: 56.25%;
	height: 0;
	}
.iframe-container iframe{
	position:absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
} 


.hero{
	padding: 20px 20px;
	}
	

.hero-button {
    background: rgba(242,38,19,.5);
    color: white;
    border: 1px solid rgba(242, 38, 19, 1);
    padding: 0.9375rem 1.875rem;
    cursor: pointer;
}


.hero-button:hover {
    background-color: #ddd;
  	color: black;
    border: 1px solid #000;
}



.parallax {
	min-height: 400px;
    background: transparent;
}


/*GALLERY PAGE*/

.gallery-container{
	max-width: 100%;
	margin:auto;
	border: #fff solid 3px;
	background: #fff;
}


.main-img img, 
.imgs img{
	width: 100%;
}

.imgs{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 5px;
}

/* Fade in animation */
@keyframes fadeIn {
	to {
		opacity: 1;
	}
}


.fade-in {
	opacity: 0;
	animation: fadeIn 0.5s ease-in 1 forwards;
}



/*GALLERY PAGE CLOSE*/

/*FORM PAGE OPEN*/

.blank{
	height: 30px;
}

.contact-form{
	box-shadow: 0 0 4px 0 rgba(0,0,0,0.5);
	margin: 50px auto;
	width: 350px;
	text-align: center;
}

/* Removed h2 from form...
.contact-form h2{
	background: #efefef;
	margin-top: 0;
	padding: 10px;
}
...*/

.contact-form input{
	display: block;
	width: 90%;
	margin: 10px auto;
	padding: 10px;
}

.contact-form textarea{
	width: 90%;
	margin: 5px auto;
	padding: 10px;
	height: 80px;
}

.g-recaptcha{
	margin: 10px 20px;
	
}

.submit-btn{
	cursor: pointer;
	width: 150px !important;
	margin-left: 18px !important;

   
}


.submit-btn:hover{
	background: rgba(242,38,19,.5);
  	color: white;
   
}

.status{
	font-size: 15px;
	color: green;
	padding: 15px;
}

.status span{
	color: red;
}

/* MODAL CSS OPEN */


/* MODAL LINK BUTTON */
.modal-open
{
	background: rgba(242,38,19,.5);
    color: white;
    border: 1px solid grey;
    padding: 0.5rem 0.9rem;
    cursor: pointer;
	width: 150px;
	margin: 3px;
}

.modal-open:hover
{
    background: rgba(255,255,255,.5);
	color: #000;
    border: 1px solid #999;
}

/*//*/


.modal
{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,0.5);
	z-index: 2;
	display: none;
	animation: modal-open .5s;
}

.modal-content
{
	background: rgba(0,0,0,0.7);
	margin-top: 100px;
	width: 50%;
	margin-left: auto;
	margin-right: auto;
	padding: 8px 24px;
	border-radius: 4px;
	z-index: 4;
	
}

.modal-header
{
	font-weight: 500;
	padding: 10px 0;
	font-size: 26px;
}


.modal-header .modal-close
{
	float: right;
	font-size: 30px;
	color: rgba(242,38,19,.8);
	padding: 5px 8px;
	border: none;
	cursor: pointer;
}


.modal-header .modal-close:hover
{

		color: rgba(242,38,19,.3);

}

.modal-body
{
	color: #7b7b7b;
	padding: 15px 0;
	text-align: justify;
}

.modal-footer .modal-close
{
	
	background: rgba(242,38,19,.6);
	font-size: 14px;
    color: white;
    border: 1px solid grey;
    padding: 0.5rem 0.9rem;
    cursor: pointer;
	width: 150px;
	margin: 3px;
	/*padding: 8px 16px;
	font-size: 14px;
	border: none;
	outline: none;
	border-radius: 4px;
	color: #1a73e8;*/
}


.modal-footer .modal-close:hover
{
    background: rgba(242,38,19,.3);
    border: 1px solid #999;
}


@keyframes modal-open
{
	from
	{
		opacity: 0;
	}
	
	to
	{
		opacity: 1;
	}
}



/* MODAL CSS CLOSED */


/*SOCIAL MEDIA OPEN*/



/*SOCIAL MEDIA CLOSE*/

/*FORM PAGE CLOSE*/

/*BODY CLOSE*/



/*FOOTER OPEN*/


.footer 
	{
	background: rgba(242,38,19,.7);
	padding: 10px 10px;
	color: #333;
  	text-align:center;
	box-sizing:border-box;
	box-shadow: 0 5px 15px rgba(0,0,0,.2);
	}


.btn{
	display:inline-block;
	width: 40px;
	height: 20px;
}

.btn:hover img{
	transform:scale(1.3);
}
	
/*FOOTER CLOSE*/



/*RESPONSIVE QUERY OPEN*/
	
/* 

Extra small devices (phones, 600px and down)

When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the 'MENU' link to open and close the topnav (.icon)
...
The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally)

*/


@media screen and (max-width: 600px) {
	

body{
	font-size: 80%;
}


section
{
	position: relative;
	width: 100%;
	height: 50vh;
	background: url(../img/lineBannerMobile.jpg);
	background-position: center center;
	box-sizing:border-box;
	box-shadow: 0 5px 15px rgba(0,0,0,.5);
	background-repeat:no-repeat;
	background-size:cover;
}
  

header
{
	height: 65px;
	margin:auto;
	width: 80%;
}
	  
  
.topnav a:not(:first-child) 
{
	display: none;
}


.topnav a.icon 
{
 	float: right;
    display: block;
}


.topnav.responsive 
{
	position: relative;
}


.topnav.responsive a.icon 
{
    position: absolute;
    right: 0;
    top: 0;
}


  .topnav.responsive a 
{
    float: none;
    display: block;
    text-align: left;
}
  

.hero-button 
{
    padding: 0.5rem 0.9rem;
	font-size: 60%;
}


.parallax 
{
	min-height: 300px;
    background: transparent;
}


/* Responsive layout - makes columns stack on top of each other instead of next to each other */
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 
{
    width: 100%;
}
 
 
/*GALLERY PAGE*/

.gallery-container{
	width: 100%;
}


.imgs{
	grid-template-columns: 1fr;
}
 
 
 .page-container{
	max-width: 100%;

}
 
/* CONTACT FORM*/

 .contact-form{
	width: 100%;	
}


.modal-content
{
	
	height: 400px;
	width: 80%;
	overflow-y: auto;
	
}
  
}


/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 601px) and (max-width: 768px)
	{


section
{
	position: relative;
	width: 100%;
	height: 45vh;
	background: url(../img/lineBannerCenter2-1920x600.png);
	background-position: center center;
	box-sizing:border-box;
	box-shadow: 0 5px 15px rgba(0,0,0,.5);
	background-repeat:no-repeat;
	background-size:cover;
}

header
{
	margin:auto;
	width: 40%;
}

  
  
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;}
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }	
  

/* Responsive layout - makes columns stack on top of each other instead of next to each other */
 .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 
{
    width: 100%;
}


/*GALLERY PAGE*/

.gallery-container{
	width: 100%;
}


.imgs{
	grid-template-columns: repeat(2, 1fr);
}
 
 
 .page-container{
	max-width: 85%;

}

}
		


/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 769px) and (max-width: 991px)

{


section
{
	position: relative;
	width: 100%;
	height: 55vh;
	background: url(../img/lineBannerCenter2-1920x600.png);
	background-position: center center;
	box-sizing:border-box;
	box-shadow: 0 5px 15px rgba(0,0,0,.5);
	background-repeat:no-repeat;
	background-size:cover;
}


header
{
	margin:auto;
	width: 80%;
}	
	
	
/* Responsive layout - makes columns stack on top of each other instead of next to each other */
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 
{
    width: 100%;
}

 .page-container
 {
	max-width: 100%;
}


	
}




/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) and (max-width: 1199px)

{

section
{
	position: relative;
	width: 100%;
	height: 50vh;
	background: url(../img/lineBannerCenter2-1920x600.png);
	background-position: center center;
	box-sizing:border-box;
	box-shadow: 0 5px 15px rgba(0,0,0,.5);
	background-repeat:no-repeat;
	background-size:cover;
}
	
	
header
{
	margin:auto;
	width: 80%;
}	
	
	
/* Responsive layout - makes columns stack on top of each other instead of next to each other */
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 
{
    width: 100%;
}

 .page-container
 {
	max-width: 80%;
}



}


	
	
		
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) 
	{
	}


/*RESPONSIVE QUERY CLOSE*/