/* ---------------------- ML Mechanical Home CSS ---------------------- */

/* ------- Removal of default padding, margin & list style ------- */

h1, h2 {
	font-family: calibril; font-size: 26pt; font-weight: 400; letter-spacing: 1.5px;
	color: black; position: relative; opacity: 0;
	animation: fade-slide 1s; animation-fill-mode: forwards;
	animation-delay: 0.5s;
}
h2 {
	font-size: 18pt; font-family: calibri; letter-spacing: 1px;
}
h3 {
	font-family: Impact; font-size: 22pt; font-weight: 400;
	letter-spacing: 1px; color: rgb(255,161,21); position: relative;
	opacity: 0; animation: fade-slide 1s; animation-fill-mode: forwards;
	animation-delay: 0.5s;
}
p {
	font-family: calibril; font-size: 12pt; font-weight: 400;
	letter-spacing: .5px; line-height: 30px; opacity: 0; animation: fade-text 1s;
	animation-fill-mode: forwards; animation-delay: 0.5s;
}
a {
	font-family: calibril; font-weight: 400; letter-spacing: .5px;
	display: inline-block;
}


.page {
	width: 100%; position: absolute; transition: left 2s; top: 0px;
}

#home, #about, #services, #gallery, #quote, #testimonials, #contact {
	position: relative; opacity: 1; transition: .5s;
}

/* -------- Slideshow container -------- */

.mySlides{
	height: 450px; padding: 300px 0 0 0; background-size: cover;
	background-repeat: no-repeat; background-position: center; transition: .5s;
}

#slide{
	position: relative;
}

#slide .mySlides:nth-child(1) {
	background-image: url('banner-1.jpg');
}
#slide .mySlides:nth-of-type(2) {
	background-image: url('banner-2.jpg');
}
#slide .mySlides:nth-of-type(3) {
	background-image: url('banner-3.jpg');
}
#slide .mySlides:nth-of-type(4) {
	background-image: url('banner-4.jpg');
}
#slide .mySlides:nth-of-type(5) {
	background-image: url('banner-5.jpg');
}
#slide .mySlides:nth-of-type(6) {
	background-image: url('banner-6.jpg');
}

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

#about-title, #services-title, #gallery-title, #quote-title, #testimonials-title, #contact-title {
	height: 300px; padding: 200px 0 0 0; background-size: cover;
	background-repeat: no-repeat; background-position: center; transition: .5s;
}

#about-title {background-image: url('About-Title.jpg');} #services-title {background-image: url('Services-Title.jpg');}
#gallery-title {background-image: url('Gallery-Title.jpg');} #quote-title {background-image: url('Quote-Title.jpg');}
#testimonials-title {background-image: url('Testimonials-Title.jpg');} #contact-title {background-image: url('Contact-Title.jpg');}


/* -------- Promo Layout -------- */

#promo {
	width: 70%; background: rgba(0,0,0,0.5); color: white;
	text-align: right; transition: .5s;
}
#promo h1{
	margin: 15px 50px 0 0; color: rgb(133,248,253); text-shadow: 0 0 10px rgb(133,248,253);
	font-size: 36pt; transition: .5s;
}
#promo p {
	margin: 0 50px 15px 0; color: white; font-size: 12pt;
}
#promo a{
	margin: 7.5px 0 0 0; padding: 10px 25px; background-color: rgba(212,252,125,0.7);
	text-align: center; display: inline-block; transition: background-color .2s;
}
#promo a:hover{
	background-color: rgb(212,252,125);
}


/* -------- Top-services -------- */

.top-services {
	width: 90%; margin: 50px 5% 0 5%;
	font-size: 0px;
}

.col-conatiner {
	width: 1205px; margin: 0 calc(50% - 600px);
	display: inline-block;
}

.top-col {
	width: 500px; padding: 10px 0; margin: 0 50px; background-image: url('services-bg.jpg'); text-align: center; overflow: hidden;
	border-bottom: 15px solid rgba(62,137,254,0.5); background-size: cover; position: relative; bottom: -10%; opacity: 0; float: left;
	box-shadow: 5px 5px 10px rgba(0,0,0,.5); transition: .5s; animation: fade-rise 1s; animation-delay: 1s; animation-fill-mode: forwards;
}
.top-col::before {
	width: 100%; height: 100%; position: absolute;
	top: 0; left: 0; content: '';
	background-color: rgba(133,248,253,0.7);
}

.top-col img {
	 width: 200px; transition: .5s; position: relative;
}
.top-col h2 {
	height: 125px; color: white; margin: 5px 20px;
	text-align: center; transition: .5s;
}

.top-col a:nth-child(2) {
	display: none; position: absolute; top: 5px; right: 5px;
}
.top-col a, .top-text a {
	padding: 10px 25px; color: white; cursor: pointer; font-size: 12pt;
	background-color: rgba(0,0,0,.5); position: relative; transition: .5s;
}
.top-col a:hover, .top-text a:hover {
	 text-shadow: 0 0 10px rgb(133,248,253), 0 0 10px rgb(133,248,253);
	 box-shadow: 0 0 10px rgba(133,248,253,.7), 0 0 50px rgb(133,248,253);
}


/* -------- Top-Column-Info -------- */

.top-col-info {
	width: 28%; margin: 1.5%; position: relative; opacity: 0; transition: .5s; border-bottom: 10px solid rgb(162,0,0); 
	display: none; background-color: gray;box-shadow: 5px 5px 10px rgba(0,0,0,.5);
}
.top-col-info img {
	position: relative; opacity: 0; transition: 2s;
	border: 3px solid white; width: calc(100% - 6px);
}
.top-col-info h1 {
	height: 42px; margin: 10px 0; font-size: 12pt; color: white; 
}
.top-col-info a {
	margin: 0 0 10px 0;
}


/* -------- Top-Text -------- */

.top-text {
	margin: 50px 0 0; padding: 35px 15%; border-bottom: 15px solid rgb(62,96,158);
	background-color: gray; opacity: 0; transition: opacity 1.5s, padding .5s; display: inline-block;
}

.top-text h1{
	margin: 0 0 20px; color: white;
}


.top-text h1::before, .col-3 h1::before {
	width: 40px; height: 1px; margin: 20px 0 0;
	background-color: black; content: ''; 
	position: absolute; bottom: 0px; display: block; 
	
}
.top-text h1::after, .col-3 h1::after {
	width: 100px; height: 1px; margin: 20px 0 0;
	background-color: #d10102; content: ''; display: block;
}


.top-text p {
	margin: 0 100px 0 0; color: white;
}

.top-text-l {
	width: calc(100% - 415px); float: left; transition: .2s;
}
.top-text-l a {
	margin: 10px 0 0;
}


.top-text-r, .top-text-r img {
	width: 412px; float: right; transition: .2s;
	box-shadow: 5px 5px 10px rgba(0,0,0,.5);
}










/* -------- 2-Column -------- */

.col-2, .col-2a, .col-2b, .col-2q {
	width: 100%; display: inline-block; border-bottom: 15px solid rgb(62,96,158); background-color: gray;
}

.col-2-detail, .col-2q-detail {
	transition: .5s;
}

.col-2 .col-2-detail:nth-child(1) {
	width: 250px; padding: 50px 50px 50px 15%;
	color: white; float: left;
}
.col-2 .col-2-detail:nth-child(2) {
	width: calc(100% - 30% - 300px); padding: 0 15% 0 0; background-color: white; float: left;
}
.col-2 h1 {
	color: white;
}
.col-2 p {
	margin: 25px 35px;
}

.col-2 h1::before, .col-2 h1::before {
	width: 40px; height: 1px; margin: 20px 0 0;
	background-color: black; content: ''; 
	position: absolute; bottom: 0px; display: block; 
	
}
.col-2 h1::after, .col-2 h1::after {
	width: 100px; height: 1px; margin: 20px 0 0;
	background-color: #d10102; content: ''; display: block;
}


/* -------- 2a-Column - Contact -------- */

.col-2a .col-2-detail:nth-child(1) {
	width: 300px; padding: 50px 50px 30px 15%;
	float: left;
}
.col-2a .col-2-detail:nth-child(2), .col-2b .col-2-detail:nth-child(2) {
	width: calc(100% - 15% - 350px); background-color: white; float: left;
}

.col-2a span img {
	width: 20px; margin: 0 5px 0 0; padding: 10px; position: relative; 
	top: 10px; background-color: rgb(162,0,0);
}
.col-2a h2, .col-2a p  {
	text-align: left; color: white;
}
.col-2a h2 {
	margin: 0 0 15px;
}


/* -------- 2b-Column - Contact -------- */

.col-2b {
	background-color: white;
}

.col-2b .col-2-detail:nth-child(1) {
	width: 450px; padding: 50px 50px 30px 15%;
	float: left;
}
.col-2b .col-2-detail:nth-child(2) {
	width: calc(100% - 15% - 600px); padding: 50px 50px 30px; background-color: rgb(240,240,240); float: left;
}


/* -------- 2q-Column - Quote -------- */

.col-2q .col-2q-detail:nth-child(1) {
	width: calc(100% - 30% - 600px); padding: 50px 50px 30px 15%; background-color: rgb(240,240,240); float: left;
}
.col-2q .col-2q-detail:nth-child(2) {
	width: calc(450px + 15%); padding: 50px 0 10px 50px;
	float: left;
}


.col-2q-opt {
	width: 100%; display: inline-block;
	text-align: center; font-size: 0px;	transition: .5s;
}
.col-2q-opt h1 {
	color: white;
}
.col-2q-opt h1::before, .col-2q-opt h1::after{
	width: 40px; height: 1px; 
	background-color: black; z-index: 2; display: block;
	position: absolute; bottom: 0px; left: 45%; content: '';
}
.col-2q-opt h1::after {
	width: 100px; background-color: #d10102; z-index: 1;
}


.col-2q-opt span img {
    margin: 0 5px 0 0; padding: 10px; position: relative;
    top: 10px; background-color: rgb(162,0,0);
}
.col-2q-opt h2 {
	width: calc(50% - 65px); height: 152px; margin: 15px 15px 15px 0; padding: 5px 25px 10px 25px;
	background-color: rgb(240,240,240); text-align: left;overflow-y: hidden;
	box-shadow: 5px 5px 10px rgba(0,0,0,.5); transition: .3s; float: left;
}



/* -------- Form - Contact -------- */
form{
	margin: 15px 0;
}
form p {
	width: 150px; margin:  0 0 5px;
}
input {
	padding: 5px 10px; border: none; font-family: msyi;
	font-size: 18pt; transition: .1s;
}

input[type=text] {
	width: 300px; height: 35px; padding: 5px 10px;
	
}
input:hover, input:focus {
	box-shadow: 2px 2px 2px rgb(185,185,185);
}
	
input[type=submit] {
	width: 150px; font-size: 13pt; color: white; background-color: rgb(241,105,88);
}

textarea {
	width: 50%; margin: 10px 0; padding: 5px 10px; border: none;
	transition: .1s; display: block;
}
textarea:hover, textarea:focus {
	box-shadow: 2px 2px 2px rgb(185,185,185);
}
.send {
	width: 100vw; height: 100vh; background-color: rgba(0,0,0,0.5);
	text-align :center; position: fixed; top: 0; left: 0; display: none;
}
.load{
	width: 300px; margin: 0 calc(50% - 150px); padding: 25px 0; background-color: white;
	position: relative; top: 35vh;
}

.loader {
	width: 50px; height: 50px; margin: 0 calc(50% - 35px);
	border: 10px solid #f3f3f3; border-radius: 50%;
	border-top: 10px solid rgb(254,144,0); border-bottom: 10px solid rgb(254,144,0);
	-webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite;
	text-align : center;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}









/* -------- 3-Column -------- */

.col-3, .col-3S {
	width: 70%; padding: 25px 15%; display: inline-block; text-align: center; font-size: 0px;
	background-color: rgb(240,240,240); border-bottom: 15px solid rgb(62,96,158); transition: .5s
}
.col-3 .col-3-detail {
	width: 33.33%; float: left;
}

.col-3 h1 {
	padding: 20px;
}
.col-3 h1::before, .col-3 h1::after{
	width: 40px; height: 1px; 
	background-color: black; z-index: 2; display: block;
	position: absolute; bottom: 0px; left: 45%; content: '';
}
.col-3 h1::after {
	width: 100px; background-color: #d10102; z-index: 1;
}

.col-3 span img {
	margin: 0 5px 0 0; padding: 10px; position: relative; 
	top: 10px; background-color: rgb(162,0,0);
}
.col-3 h2, .col-3 p  {
	text-align: left;
}
.col-3 h2 {
	margin: 0 0 45px;
}


/* -------- 3-Column-Services -------- */
.col-3S {
	position: relative; background-image: url('services-bg.jpg');
}
.col-3S::before {
	width: 100%; height: 100%; position: absolute;
	top: 0; left: 0; content: ''; background-color: rgba(255,255,255,0.8);
}

.col-3S-details {
	width: calc(33.33% - 50px); margin: 25px; background-color: rgb(240,240,240); transition: .3s; position: relative;
	border-bottom: 10px solid rgb(162,0,0); float: left; box-shadow: 5px 5px 10px rgba(0,0,0,.5);
}
.col-3S-details:hover {
	transform: scale(1.02); cursor: pointer;
	box-shadow: 0 0 10px rgba(133,248,253,.7), 0 0 50px rgb(133,248,253);
}

.col-3S-details img {
	width: 100%;
}
.col-3S-details h2 {
	margin: 15px 25px 15px; color: rgb(162,0,0);
}
.col-3S-details p {
	color: black;
}
.col-3S-details a {
	font-size: 12pt; padding: 10px 25px; color: white;
	background-color: rgba(0,0,0,0.7); transition: .5s;
}
.col-3S-details a:hover {
	text-shadow: 0 0 10px rgb(133,248,253), 0 0 10px rgb(133,248,253);
	box-shadow: 0 0 10px rgba(133,248,253,.7), 0 0 50px rgb(133,248,253);
}

.services-ext-container {
	width: 100vw; height: 100vh; position: fixed; top: 0px; opacity: 0; transform: scale(0.9);
	background-color: rgba(0,0,0,.7); transition: .3s; z-index: 1; display: none;
}
.services-ext-container a {
	padding: 15px; font-size: 16pt; position: absolute; 
	background-color: white; top: 150px; right: 100px; z-index: 1;
}

.services-ext {
	width: 1115px; margin: 150px calc(50% - 600px);
	padding: 15px 45px; background-color: white; display: none;
}
.services-ext h1 {
	color: rgb(162,0,0)
}
.services-ext p {
	text-align: initial; margin: 15px;
}
.services-ext b {
	display: none;
}


/* -------- Gallery -------- */

.gallery {
	width: 70%; padding: 25px 15% 15px 15%; font-size: 0px; text-align: center;
	border-bottom: 15px solid rgb(62,96,158); background-color: rgb(240,240,240); transition: .3s;
}

.gallery h1{
	margin: 0 0 20px; font-size: 26pt; text-align: left;
}
.gallery h1::before {
	width: 40px; height: 1px; margin: 20px 0 0;
	background-color: black; content: ''; 
	position: absolute; bottom: 0px; display: block; 
	
}
.gallery h1::after {
	width: 100px; height: 1px; margin: 20px 0 0;
	background-color: #d10102; content: ''; display: block;
}

.enlarged {
	width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; 
	text-align: center; background-color: rgba(0,0,0,0.7); z-index: 3; display: none;
}
.enlarged figure {
	display: inline-block; margin: 10% 0 0;
}
.enlarged img {
	border: 15px solid white; border-radius: 5px;
}
.enlarged figcaption {
	margin: 0 0 0 5px; padding: 3px 10px; border-radius: 28px;
	font-family: calibri; font-size: 16pt; color: white; background-color: black; 
	cursor: pointer; border: 3px solid white; float: right;
}

/* -------- Img -------- */

.img {
	margin: 10px 15px 15px 0; display: inline-block; 
	position: relative; width: calc(33% - 15px);
}
.img img {
	width: calc(100% - 20px); padding: 10px; 
	box-shadow: 2px 2px 8px rgb(185,185,185);
}

.magnify {
	z-index: 2; width: 100%; height: 100%;
	position: absolute; top: 0px; text-align: center;
	transition: 0.15s;
}
.magnify img {
	width: auto; padding: 0; margin: 0; position: relative;
	top: 90%; box-shadow: none; opacity: 0;
	transition: .15s;
}
.img:hover .magnify img {
	top: 45%; opacity: 1;
}
.magnify:hover {
	background-color: rgba(0,0,0,0.5); cursor: pointer;
}


/* -------- Testimonials -------- */

.testimonials-list {
	width: 70%; padding: 25px 15%; transition: .5s; border-bottom: 15px solid rgb(62,96,158);
}
.testimonials-list li {
	width: 100%; margin: 0 0 15px; display: inline-block;
}
.testimonials-list li div {
	float: left;
}
.testimonials-list li b {
	width: 160px; margin: 30px 0 0 15px; font-family: calibril;
	font-size: 18pt; font-weight: 400; text-align: center; float: left;
}
.testimonials-list li p {
	width: calc(100% - 333px); min-height: 52px; margin: 0 25px; padding: 15px 10px; 
	position: relative; border: solid 1px rgb(200,200,200); float: left;
}

.testimonials-list li p:before {
	width: 0; border-bottom: 13px solid transparent; border-right: 18px solid #c4c6ca;
	border-top: 13px solid transparent; content: ""; height: 0; position: absolute; right: 100%; top: 26px;
}

.testimonials-list li p:after {
	width: 0; border-bottom: 13px solid transparent; border-right: 18px solid #fff;
	border-top: 13px solid transparent; content: ""; height: 0; left: -16px; position: absolute; top: 26px;
}


.testimonials-list li img {
	width: 80px; border-radius: 80px; box-shadow: 0px 0px 10px rgba(0,0,0,.5);
	border: solid 3px rgb(225,225,225); float: left;
}






/* -------- Why-Us -------- */

.why-us, .btm-content {
	width: 70%; padding: 0 15%; display: inline-block; font-size: 0px;
	background-color: rgb(240,240,240);
}
.why-us h1 {
	color: black;
}

.us-col, .btm-col {
	height: auto; padding: 0px 1%; text-align: center;
	background-color: initial; float: left; 
}
.us-col h2 {
	color: black; margin: 25px 0;
}
.us-col span {
	margin: 25px 10px;
}


/* -------- Btm-Content -------- */

.btm-content {
	background-color: white;
}

.btm-col:nth-of-type(2) {
	width: 39.33%;
}
.btm-col:nth-of-type(3) {
	width: 23.33%
}

.btm-col h1 {
	color: black; text-align: left;
}
.btm-col h1::before, .btm-col h1::after {
	left: 0
}
.btm-col:nth-of-type(2) img {
	width: calc(33.33% - 19px); padding: 5px; margin: 0 7px 15px 0; 
	border: 1px solid rgb(204,204,204);
}
.btm-col:nth-of-type(3) img {
	margin: 50px;
}








/* -------- Next & Previous buttons -------- */

.prev, .next {
	margin: 25px; position: absolute; top: 400px; padding: 0 15px;
	color: rgb(133,248,253); font-size: 50pt;
	font-weight: 400; cursor: pointer; transition: .2s;
}

.next {
	right: 0;
}
.prev {
	left: 0;
}

.prev:hover, .next:hover {
	text-shadow: 0 0 10px rgb(133,248,253), 0 0 10px rgb(133,248,253);
}


/* ------- The dots/bullets/indicators ------- */

.dot-conatiner {
	width: 100%; position: absolute; bottom: 25px;
	text-align: center; float: left; transition: .5s;
}

.dot {
	height: 13px; width: 13px; margin: 0 5px; border-radius: 50%;
	background-color: rgb(133,248,253); display: inline-block; 
	cursor: pointer; transition: background-color 0.6s ease;
}
.dot:hover {
	box-shadow: 0 0 10px rgb(133,248,253), 0 0 10px rgb(133,248,253);
}


/* Fading animation */

.fade {
	-webkit-animation-name: fade;
	-webkit-animation-duration: 10.5s;
	animation-name: fade;
	animation-duration: 10.5s;
}


@-webkit-keyframes fade {
  0%{
    opacity: 0.1;
  }

  20%{
    opacity: 1;
  }

  90%{
    opacity: 1;
  }

  100%{
    opacity: 0;
  }
}

@keyframes fade{
  0%{
    opacity: 0.1;
  }

  20%{
    opacity: 1;
  }

  90%{
    opacity: 1;
  }

  100%{
    opacity: 0;
  }

}



/* On smaller screens, decrease text size */

@media only screen and (max-width: 300px) {
  .slprev, .slnext,.text {font-size: 11px}
}


/* -------- new -------- */

#new {
	width: 100%;
	height: 400px;
	transition: .2s;
	float: left;
}

#context {
	width: 45%;
	height: 400px;
	background-color: rgb(50,50,50);
	transition: .2s;
	float: left;
}
#context h3{
	margin: 45px 100px 0 100px;
}
#context p{
	margin: 15px 100px 25px 100px;
	font-size: 18pt;
	color: white;
}





/* ------- Bottom Right ------- */

#info {
	width: 80%;
	margin: 20px 10% 70px 10%;
	float: left;
}

#infoLeft, #infoRight {
	width: 50%;
	float: left;
}
#infoLeft input[type=text]{
	width: 90%;
	padding: 7px;
	font-family: arial;
	font-size: 12pt;
	font-weight: 400;
	letter-spacing: 2px;
	background-color: rgb(230,230,230);
	box-shadow: 2px 2px 2px rgb(230,230,230);
	border: none;
	transition: .2s;
}
#infoLeft input[type=text]:hover, #infoLeft input[type=text]:focus, #infoRight textarea:hover, #infoRight textarea:focus {
	box-shadow: 2px 2px 5px rgb(200,200,200);
	transform: scale(1.005);
}

#infoRight textarea {
	width: 90%;
	height: 155px;
	padding: 10px 7px;
	font-family: arial;
	font-size: 12pt;
	letter-spacing: 2px;
	background-color: rgb(230,230,230);
	box-shadow: 2px 2px 2px rgb(230,230,230);
	border: none;
	transition: .2s;
}

#info input[type=submit] {
	width: 350px;
	margin: 15px 60% 0 0;
	padding: 7px;
	font-size: 14pt;
	font-family: calibri;
	font-weight: 600;
	color: white;
	letter-spacing: .5px;
	background-color: rgb(255,161,21);
	box-shadow: 2px 2px 2px rgb(230,230,230);
	border: none;
	transition: .2s;
}
#info input[type=submit]:hover, #info input[type=submit]:focus {
	cursor: pointer;
	box-shadow: 2px 2px 5px rgb(180,180,180);
	transform: scale(1.01);
}




/* --------------------------- Medium sized screens -------------------------- */

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

/* -------- Top-services -------- */

.mySlides{
	height: 350px; padding: 250px 0 0 0;
}

/* -------- Top Text -------- */

.top-text {
	width: 90%; padding: 35px 5%;
}


/* -------- Column-3 -------- */

.col-3, .col-3S {
	width: 90%; padding: 25px 5%;
}

.col-3S-details p {
	height: 115px;
}


/* -------- 2b-Column - Contact -------- */

.col-2b .col-2-detail:nth-child(1) {
	padding: 50px 50px 30px 5%;
}
.col-2b .col-2-detail:nth-child(2) {
	width: calc(100% - 5% - 600px); padding: 50px 50px 30px;
}


/* -------- 2q-Column - Quote -------- */

.col-2q .col-2q-detail:nth-child(1) {
	width: calc(100% - 10% - 700px); padding: 50px 50px 30px 5%;
}
.col-2q .col-2q-detail:nth-child(2) {
	width: calc(550px + 5%);
}

.col-2q-opt h2 {
	height: 168px;
}



.gallery {
	width: 90%; padding: 25px 5% 15px 5%;
}


.testimonials-list {
	width: 90%; padding: 25px 5%;
}

}



/* --------------------------- Tablet sized screens -------------------------- */

@media screen and (max-width:1200px){
	
p {
	line-height: 25px;
}

/* -------- Top-Column-Info -------- */

.top-services {
	width: 100%; margin: 25px 0 0;
}


.col-conatiner {
	width: 800px; margin: 0 calc(50% - 400px);
}
.top-col {
	width: 350px;
	margin: 0 25px;
}

/* -------- Top-Text -------- */

.top-text-r, .top-text-r img {
	width: 322px;
}
.top-text-r {
	margin: 15px 0 0;	
}

.top-text-l {
	width: calc(100% - 325px);
}

.top-text p, .top-text h1 {
    margin: 0 25px 0 0;	
}


.col-3S-details {
	width: calc(50% - 50px);
}

.col-3S-details h2 br {
   display: block;
   margin: 15px 0;
}
.col-3S-details p {
	height: 90px;
}


.col-2 .col-2-detail:nth-child(1) {
	padding: 50px 50px 50px 5%;
}
.col-2 .col-2-detail:nth-child(2) {
    width: calc(100% - 10% - 300px);
    padding: 0 5% 0 0;
}


.col-2q-opt h2 {
	height: 160px;
}


/* -------- 2q-Column - Quote -------- */

.col-2q .col-2q-detail:nth-child(1) {
	width: 90%; padding: 50px 5% 30px 5%;
}
.col-2q .col-2q-detail:nth-child(2) {
	width: 90%;
}

textarea {
	width: 90%;
}

}






/* --------------------------- Smaller Tablet sized screens -------------------------- */

@media screen and (max-width:900px){
	
.top-text-l, .top-text-r, .top-text-r img {
	width: 100%;
}


/* -------- 2a-Column - Contact -------- */

.col-2a .col-2-detail:nth-child(1), .col-2b .col-2-detail:nth-child(1), .col-2b .col-2-detail:nth-child(2) {
	width: 90%; padding: 25px 5%;
}
.col-2a .col-2-detail:nth-child(2) {
	width: 100%;
}

.col-2a h2 {
	width: calc(50% - 15px); float: left;
}


textarea {
	width: 80%;
}

/* -------- Img - Gallery -------- */

.img {
	margin: 10px 15px 15px 0; display: inline-block; 
	width: calc(50% - 15px);
}

}


/* --------------------------- Mob sized screens -------------------------- */

@media screen and (max-width:680px){
h1 {
	font-size: 18pt;
}
h2 {
	font-size: 14pt;
}


/* ------- Slideshow container ------- */

.mySlides {
	height: 175px; padding: 175px 0 0 0;
}

#promo {
	width: 100%; background: rgba(0,0,0,0.5); color: white;
	text-align: left; transition: .5s;
}
#promo h1{
	margin: 5px 20px; font-size: 18pt; 
}
#promo p {
	margin: 5px 20px;
}


#about-title, #services-title, #gallery-title, #quote-title, #testimonials-title, #contact-title {
	height: 175px; padding: 175px 0 0 0;
}





.prev, .next {
	margin: 0px; position: absolute; top: 115px; padding: 0 15px;
	color: rgb(133,248,253); font-size: 24pt;
	font-weight: 400; cursor: pointer; transition: .2s;
}



/* -------- Top-services -------- */

.top-services {
	margin: 0px;
}

.col-conatiner {
	 width: 100%; margin: 0px; 
	 /* overflow: auto; white-space: nowrap; */
}
.col-conatiner .top-col:nth-child(2) {
	float: right;
}

.top-col {
	width: 80%; height: auto; margin: 15px 10%;
	white-space: normal;
}



/* -------- Top-Column-Info -------- */

.top-col-info {
	width: 85%; margin: 15px 7.5%;
}

.top-col img {
	width: 150px;
}
.top-col-info img {
	width: calc(100% - 6px);
}
.top-col h2 {
	height: auto;
}
.top-col a {
	padding: 5px 10px;
}

.top-col span, .us-col span {
	width: 60px; height: 60px; margin: 0 10px; background-color: rgb(162,0,0); 
	border-radius: 100%; font-size: 24px; color: #fff; text-align: center;
	line-height: 60px; float: left;
}
.top-text {
	width: 100%; padding: 25px 0; margin: 0;
}
.top-text p {
	margin: 0 20px;
}
.top-text h1 {
	margin: 0 20px;
}

.top-text p:nth-of-type(2), .top-text p:nth-of-type(3) {
	display: none;
}


/* -------- Top-services -------- */

.top-text-l {
	text-align: center;
}
.top-text-l h1, .top-text-l p {
	text-align: left;
}


/* -------- Column-2 -------- */

.col-2 .col-2-detail:nth-child(1), .col-2 .col-2-detail:nth-child(2) {
	width: 90%; padding: 25px 5%; margin: 0px;
}

.col-2 h1 {
	
}
.col-2 p {
	margin: 0px;
}


/* -------- 2a-Column - Contact -------- */

.col-2a h2 {
	width: calc(100% - 15px);
}
.col-2a span img {
	padding: 7px; top: 5px;
}


/* -------- 2q-Column - Quote -------- */

.col-2q-opt h2 {
	width: calc(100% - 50px); height: auto; 
	margin: 15px 0;
}


.col-2q .col-2q-detail:nth-child(1) {
	padding: 25px 5%;
}
.col-2q .col-2q-detail:nth-child(2) {
	padding: 25px 5%;
}


/* -------- Column-3 -------- */

.col-3 {
	width: 90%; padding: 25px 5%;
}
.col-3 .col-3-detail, .col-3S .col-3S-details {
	width: 100%;
}
.col-3S-details {
	margin: 15px 0;
}

.col-3 h2 {
	margin: 0 0 25px;
}
.col-3S-details h2 br {
   display: initial;
   margin: auto;
}
.col-3S-details p {
	height: auto;
}

.col-3 span img {
	padding: 7px; top: 5px;
}


/* -------- services-ext -------- */
.services-ext-container a {
	padding: 15px; font-size: 16pt; position: absolute; 
	top: 75px; right: 15px; z-index: 1;
}
.services-ext {
	width: calc(95% - 50px); height: 75vh; margin: 75px 2.5% 0 2.5%;
    padding: 15px 25px; overflow-y: scroll;
}
.services-ext p {
	margin: 10px 0;
}
.services-ext p:nth-child(n+3) {
	display: none;
}

.services-ext b {
	margin: 10px 0; text-align: center; font-family: calibril;
	font-size: 16pt; font-weight: 400; color: rgb(162,0,0);
	display: block; animation: expand-services 2s infinite;
}
.services-ext b span {
	display: block; transform: rotate(90deg);
}



textarea {
	width: 100%;
}


/* -------- Img - Gallery -------- */

.gallery h1 {
	margin: 0 0 20px 20px;
}
.gallery {
	width: 100%; padding: 15px 0 0;
}

.img {
	margin: 0; width: 50%;
}
.img img {
	width: calc(100% - 10px); padding: 5px;
}

.magnify img {
	width: 25px;
}
.img:hover .magnify img {
	top: 40%;
}

.enlarged {
	text-align: initial;
}
.enlarged figure{
	margin: 70px 0 0;
}
.enlarged figcaption {
	margin: 0 0 0 5px; font-size: 16pt;
    border: 1px solid white; float: right;
}
.enlarged img {
	width: calc(100% - 30px); position: absolute;
	top: 120px;
}


/* -------- Testimonials -------- */

.testimonials-list {
	width: 90%; padding: 25px 5%;
}

.testimonials-list li div {
	text-align: center; width: 130px;
}
.testimonials-list li img {
	width: 50px; border-radius: 50px; float: none;
}
.testimonials-list li b {
	width: 110px; margin: 10px;
	text-align: center; font-size: 12pt;
}
.testimonials-list li p {
	width: calc(100% - 152px); margin: 0;
}

.testimonials-list li:nth-child(even) div {
	float: right;
}

.testimonials-list li:nth-child(even) p:before {
	left: 100%; transform: rotate(180deg);
}

.testimonials-list li:nth-child(even) p:after {
	right: -16px; left: initial; transform: rotate(180deg);
}


}




/* Animation */

@keyframes fade-slide {
    from {left: -10%; 
	opacity: 0;
	}
    to {left: 0px;
	opacity: 1;
	}
}

@keyframes fade-rise {
    from {bottom: -10%; 
	opacity: 0;
	}
    to {bottom: 0px;
	opacity: 1;
	}
}

@keyframes fade-text {
    from {opacity: 0;}
    to {opacity: 1;}
}


@keyframes expand-services {
  0%{
	transform: scale(1);
  }

  15%{
	transform: scale(1);
  }
  
  50%{
	transform: scale(1.1);
  }
  
  65%{
	transform: scale(1.1);
  }

  100%{
    transform: scale(1);
  }

}