@import url('https://fonts.googleapis.com/css2?family=Alata&display=swap');
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Raleway', sans-serif;
	
}
html {	
	
}

body {
	z-index: 1;
	height: 100%;
	display: grid;
    grid-template-areas:
    	"header"
    	"container"
    	"footer";
    grid-template-rows: 15% auto 10%;
    grid-template-columns: 1fr;
    
}

body, .header, .container, .footer {

	color: white;
	/*border: 2px solid cyan;*/
	/*background: rgba(0,0,0,0.6);*/
}
.bg-image {
	background-image: url("../images/BC-index-bgrd.jpg");  
    background-repeat: repeat;
    background-size: contain; 
}

.container {
	grid-area: container;
	justify-items: center;
	height: 100%; 
	/*outline: 2px solid white;*/
	
}
.section {
	width: 60%;
	margin: auto;
}
.text-blur {
	
	background: rgba(0,0,0,0.6);
	padding: 0 0.4em;
    /*padding: 0.5em 0.4em;*/
    margin: auto;
    display: inline;
}
.BC-services {
	width: 80%;
	display: inline-block;
	margin: auto;
}
.BC-websites {
	display: grid;
	grid-template: 1fr 1fr / 1fr 1fr 1fr;
	width: 100%; 
	/*height: 100%;  */
	overflow: hidden;
	justify-content: space-around;
	margin-top: 1.5em;
	/*grid-column: 2 / 8;
	grid-row: 4 / 4;*/
	grid-gap: 5em;
	color: white;
	align-self: center;
	
	margin-bottom: 2em;
}

.website1 {
	color: white;
	width: 100%;
	/*grid-column: 1 / 4;
	grid-row: 4 / 4;*/
	/*border: 2px yellow solid;	*/
}
.website2 {
	color: white;
	width: 100%;
	/*grid-column: 6 / 9;
	grid-row: 4 / 4;*/
	/*border: 2px yellow solid;*/
}

.btn {
  display: inline-block;
  color: #072a2d;
  background: #fcea43;
  font-size: 0.8rem;
  margin-top: 2em;
  padding: 1em 2em;
  border-radius: 2em;
  /*text-transform: uppercase;*/
  text-decoration: none;
  text-align: center;
  letter-spacing: 0.05em;
  width: 15em;

}

.btn:hover, focus {
  opacity: .75;
}


/*@media screen and (min-width: 38em) {
  	.testimonial-grid {
	}  
}*/

/*  Contact Form - HTML code */
form { 
	max-width: 50%; 
	margin: 3em auto; 
	background-color: #000000;
	border-radius: 1em;
	padding: 1em;
	
}

.feedback-input {
	color: #adadad;
	/*  font-family: Helvetica, Arial, sans-serif;*/
	font-weight:500;
	/*font-size: 18px;*/
	border-radius: 5px;
	line-height: 22px;
	background-color: transparent;
	border:1px solid #fff;
	transition: all 0.3s;
	padding: 13px;
	margin-bottom: 15px;
	width:100%;
	box-sizing: border-box;
	outline:0;
}

.feedback-input:focus { 
	border:2px solid #adadad;
}

textarea {
  height: 150px;
  line-height: 150%;
  resize:vertical;
}

[type="submit"] {
  /*font-family: 'Montserrat', Arial, Helvetica, sans-serif;*/
  width: 30%;
  background:#fff;
  border-radius:5px;
  border:0;
  cursor:pointer;
  color: #000000;
  /*font-size:24px;*/
  padding-top:10px;
  padding-bottom:10px;
  transition: all 0.3s;
  margin-top:-4px;
  font-weight:700;
}
[type="submit"]:hover { background: #adadad; }

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #adadad;
  opacity: 0.8; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #adadad;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: #adadad;
}
/*  End of Contact Form  */

.main-text {
	text-align: center;
	line-height: 1em;
		
	/*border: 2px solid green;*/
}

			/*TYPOGRAPHY*/
h1 {
	line-height: 1em;
	font-size: 2.2em;
	font-weight: 800;
	/*color: #fcea43;*/

	/*text-transform: uppercase;*/
}
h2 {
	line-height: 1em;
	font-size: 1.8rem;
	font-weight: 800;

	/*text-transform: uppercase;*/
}
h3 {
	margin-top: 0.5em;
	line-height: 1em;
	font-size: 1.5rem;
	font-weight: 700;
	
}

h4 {
	margin-top: 0.5em;
	line-height: 1em;
	font-size: 1.2rem;
	font-weight: 700;
	/*color: #fcea43;*/
	
}
h5 {
	line-height: 1em;
	font-size: 0.9rem;
	font-weight: 700;
	/*color: #fcea43;*/
	
	
}
p {
	font-size: 0.8rem;
	/*color: #fff;*/
	margin-left: 20%;
	margin-right: 20%;
	font-weight: 400;
	line-height: 1.3em;
	text-align: left;
	/*padding: 0.5em 0;*/
	margin-bottom: 0.5em;
	
}
a {
	color: #FFF;  
	text-decoration : none;
}

a:focus, a:hover {
	color: #4bb0e0;	
}


/* --------------------------------------------------------------

/* SCREEN SIZES - 5 Different Viewports

/*  1 - Extra Small < 576px	 -  DEFAULT SIZE*/

@media (min-width: 150px) and (max-width: 575px) {
	.container {
    	/*outline: 2px solid red;*/
  	}
  	/*.col {
		border: 1px solid cyan;
	}*/
  /*
  	h1 {
		font-size: 1.8rem;
	}    

	h2 {
	    font-size: 1.4rem;  
	}

	h3 {
		font-size: 1.1rem;  
	}

	h4 {
		font-size: 0.9rem;  
	}
	p {
	    font-size: 0.75rem;
	}*/
    
}

/*  2 - Small >= 576px	to 767px  */
@media (min-width: 576px) and (max-width: 767px) {
	body {
		/* grid-template-areas:
    	"header header"
    	"container header"
    	"footer footer";
    	grid-template-rows: 2fr 12fr 1fr;
    	grid-template-columns: 6fr 1fr;*/
	}
     .container { 	
    	/*outline: 2px solid magenta;*/
  	}
 	
	h1 {
		font-size: 2.5em;		
	}
	h2 {
		font-size: 2em;		
	}
	h3 {
		font-size: 1.8rem;		
	}
	h4 {
		font-size: 1.4rem;				
	}
	h5 {
		font-size: 1.1rem;				
	}
	p {
		font-size: 0.9rem;		
	}
  	
}

/*  3 - Medium >= 768px	to 991px  */
@media (min-width: 768px) and (max-width: 991px) {
	body {
		/*grid-template-areas:
	    	"header"
	    	"container"
	    	"footer";*/
    	/*grid-template-rows: 2fr 12fr 1fr;*/
    	/*grid-template-columns: 1fr;*/
	}
   	.container {     
      	/*outline: 2px solid cyan;*/
  	}
  	h1 {
		font-size: 3em;	
	}
	h2 {
		font-size: 2.5em;		
	}
	h3 {
		font-size: 2rem;		
	}
	h4 {
		font-size: 1.5rem;				
	}
	h5 {
		font-size: 1.2rem;				
	}
	p {
		font-size: 1rem;		
	}
	
}  	
  
/*  4 - Large >= 992px	to 1200px  */
@media (min-width: 992px) and (max-width: 1199px) {
	body {
		/*grid-template-areas:
	    	"header"
	    	"container"
	    	"footer";
    	grid-template-rows: 2fr 12fr 1fr;
    	grid-template-columns: 1fr;*/
	}
    .container {
    	/*background-color: pink;*/
    	/*outline: 2px solid green;*/
  	}
  	
  	h1 {
		font-size: 4em;		
	}
	h2 {
		font-size: 3em;		
	}
	h3 {
		font-size: 2.5rem;	
	}
	h4 {
		font-size: 1.8rem;				
	}
	h5 {
		font-size: 1.4rem;			
	}
	p {
		font-size: 1.1rem;	
	}
	
}
	
/*  5 - Extra Large >= 1200px	*/ 
@media (min-width: 1200px) {
	body {
		 /*grid-template-areas:
    	"header"
    	"container"
    	"footer";
    	grid-template-rows: 2fr 12fr 1fr;
    	grid-template-columns: 1fr;*/
	}
    .container {
    	/*outline: 2px solid yellow;*/
  	} 
  	
  	h1 {
		font-size: 4.5em;		
	}
	h2 {
		font-size: 3.5em;		
	}
	h3 {
		font-size: 3rem;		
	}
	h4 {
		font-size: 2rem;				
	}
	h5 {
		font-size: 1.5rem;				
	}
	p {
		font-size: 1.2rem;		
	}
	
}