/* ==================== */
/*        QUERIES       */
/* ==================== */

/*
    iPad in landscape = 1024px
    iPad in portrait  = 768px
    css row = 1140px
*/


/* Large tablets to 1200 pixels (widths smaller than the 1140px row) */

@media only screen and (max-width: 1200px) {
	
	.hero-text-box {
        width: 100%;
        padding: 0 2%;
    }

    
}

/* Small tablet to big tablet: from 768 to 1023 pixels */

@media only screen and (max-width: 1023px) {
    /*
    body { font-size: 18px; }
    
    section { padding: 60px 0; }
	*/
	
	.lead {
		font-size: 17px;
	}
	
	.hero-text-box {
        width: 100%;
        padding: 0 2%;
    }
    
	.logo {
		height: 100px;
		width: auto;
		float: left;
		margin-top: 20px;
	}
	
	#guarantee {
		font-size: 90%;
	}
	
	#strip {
		margin-top: 148px;
	}
	
	.strip-photo img {
		opacity: 1;
	}
	
	h2::before { 
		display: block; 
		content: " "; 
		margin-top: -270px; 
		height: 270px; 
		visibility: hidden; 
		pointer-events: none;
	}
	
	h5::before { 
		display: block; 
		content: " "; 
		margin-top: -160px; 
		height: 160px; 
		visibility: hidden; 
		pointer-events: none;
	}
	
	h5 {
		font-size: 100%;
	}
		
	h3 {
		font-size: 110%;
	}
		
	.banner-text {
		font-size: 1rem;
		/*font-weight: 300;*/
	}
	
	.script-text {
		font-size: 130%;
	}
    
}


/* Phones small to small tablets: from 481 to 767 pixels */

@media only screen and (max-width: 767px) {
    /*
    body { font-size: 16px; }
    section { padding: 30px 0; }
    hero-text-box { padding: 0 4%; }
    
    h1 { font-size: 180%; }
    h2 { font-size: 150%; }
	*/
	
	.lead {
		font-size: 15px;
	}
	
	.logo {
		height: 100px;
		width: auto;
		float: left;
		/* margin-top: 20px; */
	}
	
	.main-heading {
		font-size: 150%;
	}

	.photo-source-1 {
		font-size: 85%;
	}
	
	.navbar {
		padding: 0px;
	}
	
	.navbar .navbar-collapse {
		text-align: left;
	}
	
	.navbar-toggler {
		margin-top: 20px;
	}
	/*
	.icon-size {
		width: 10%;
		margin-left: auto;
		margin-right: auto;
		padding: 20px 0 10px 0;
	}
	*/
	#commercial p {
		font-size: 80%;
	}
	
	#guarantee {
		margin-top: 20px;
		font-size: 90%;
	}
	
	.strip-photo img {
		opacity: 1;
	}
	.img-fluid {
		display: block;
		margin-left: auto;
		margin-right: auto;
		width: 80%;
		padding-bottom: 5px;
	}
	
	#strip {
		margin-top: 130px;
	}
	
	h2::before { 
		display: block; 
		content: " "; 
		margin-top: -245px; 
		height: 245px; 
		visibility: hidden; 
		pointer-events: none;
	}
	
	h5::before { 
		display: block; 
		content: " "; 
		margin-top: -160px; 
		height: 160px; 
		visibility: hidden; 
		pointer-events: none;
	}
	
	h5 {
		font-size: 100%;
	}
	
	.banner-text {
		font-size: 1rem;
		/*font-weight: 300;*/
	}
	
	.script-text {
		font-size: 120%;
	}
	
}

/* Small phones: from 361 to 480 pixels */

@media only screen and (max-width: 480px) {
    /*
    section { padding: 25px 0; }
	*/
	
	.main-heading {
		font-size: 110%;
	}
	
	.hero-text-box {
		left: 45%;
    }
	
	.logo {
		height: 80px;
		width: auto;
		float: left;
		margin-left: 10px;
		margin-bottom: 15px;
	}
	
	.photo-source-1 {
		font-size: 70%;
	}
	
	#contact-details {
		margin-top: 5px;
	}
	
	h2 {
		font-size: 150%;
		margin-bottom: 20px;
	}
	
	h4 {
		margin-top: 5px;
	}
	
	h2::before { 
		display: block; 
		content: " "; 
		margin-top: -245px; 
		height: 245px; 
		visibility: hidden; 
		pointer-events: none;
	}
	
	h5::before { 
		display: block; 
		content: " "; 
		margin-top: -160px; 
		height: 160px; 
		visibility: hidden; 
		pointer-events: none;
	}
	
	#guarantee {
		margin-top: 20px;
		font-size: 90%;
	}
	
	.strip-photo img {
		opacity: 1;
	}
	
	.img-fluid {
		display: block;
		margin-left: auto;
		margin-right: auto;
		width: 80%;
		padding-bottom: 5px;
	}
	
	#strip {
		margin-top: 126px;
	}
	
	.navbar-light .navbar-toggler {
		margin-right: 15px;
	}
	
	.bubbles {
		width: 50%;
		height: auto;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

	.bubbles2 {
		width: 50%;
		height: auto;
		display: block;
		margin: 20px auto 0px auto;
	}
	
	h5 {
		font-size: 100%;
	}
	
	.banner-text {
		font-size: .75rem;
		/*font-weight: 300;*/
	}
	
	.script-text {
		font-size: 100%;
	}
	
}

 /* Extra small devices (phones, 360px and down) */

@media only screen and (max-width: 360px) {
    /*
    section { padding: 25px 0; }
	*/
	
	.main-heading {
		font-size: 120%;
	}
	
	.hero-text-box {
		left: 40%;
    }
	
	.logo {
		height: 70px;
		width: auto;
		float: left;
		margin-left: 10px;
		margin-bottom: 15px;
	}
	
	.banner-text {
		font-size: .75rem;
		/*font-weight: 300;*/
	}
	
	.photo-source-1 {
		font-size: 70%;
	}
	
	#contact-details, #contact-email {
		margin-top: 5px;
	}
	
	h4 {
		margin-top: 5px;
		font-size: 110%;
	}
	
	h2 {
		font-size: 150%;
		margin-bottom: 20px;
	}
	
	h5 {
		font-size: 100%;
	}
	
	#guarantee {
		margin-top: 20px;
		font-size: 80%;
	}
	
	#strip {
		margin-top: 117px;
	}
	
	.strip-photo img {
		opacity: 1;
	}
	
	.img-fluid {
		display: block;
		margin-left: auto;
		margin-right: auto;
		width: 70%;
		padding-bottom: 5px;
	}
	
	h2::before { 
		display: block; 
		content: " "; 
		margin-top: -205px; 
		height: 205px; 
		visibility: hidden; 
		pointer-events: none;
	}
	
	h5::before { 
		display: block; 
		content: " "; 
		margin-top: -130px; 
		height: 130px; 
		visibility: hidden; 
		pointer-events: none;
	}
	
	.bubbles {
		width:70%;
		height: auto;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

	.bubbles2 {
		width:70%;
		height: auto;
		display: block;
		margin: 20px auto 0px auto;
	}
	
	.navbar-light .navbar-toggler {
		margin-right: 15px;
	}
	
	.icon-size-2 {
		width: 60px;
		padding: 5px 0 5px 0;
	}
	
	h2:after {
		margin-top: 10px;
	}
	
	.list-unstyled {
		text-align: center;
	}
	
	.list {
		margin-left: 40px;
	}
	
	.list2 {
		margin-left: 0px;
	}
	
	.skill-list {
		margin-left: 40px;
	}
	
	p {
		font-size: 85%;
	}
	
	li {
		font-size: 90%;
	}
	
	.navigation-text {
		margin-bottom: 15px;
	}
	
	.script-text {
		font-size: 100%;
	}
	
    
}