/*------------------------------------------------------------------
	[Master Stylesheet]

	Author        : Abbas Rafeeq (https://themeforest.net/user/webfulcreations/portfolio)
	Template Name : Computer Repair Website Template
	Version       : 1.0
	CopyRight     : 2018 August @ www.webfulcreations.com


	- Main CSS file is inside assets/css/theme-style.css
-------------------------------------------------------------------*/

@import 'assets/css/animate.css';	   		   /* Including Animations CSS file */
@import 'assets/css/owl.carousel.css';		   /* Owl Carousel CSS File */
@import 'assets/css/foundation.min.css';       /* Including Foundation CSS File */
@import 'assets/css/theme-styles.css';		   /* Main Theme CSS File */
@import 'assets/css/responsive-styles.css';	   /* Main Theme CSS File */
@import 'assets/css/twentytwenty-no-compass.css';   /* TwentyTwenty JQuery Plugin */
@import 'assets/css/fontawesome-all.min.css';	   /* Including Font Awesome Icons */


/**
 * Import Website Main Fonts 
 *
 * To change Fonts Get Google Fonts replace in following Link, 
 * AFter replacing below go to theme-style.css and update
 * Font Families
 *
 */
@import 'https://fonts.googleapis.com/css?family=Niconne|Poppins:400,600,700|Roboto:400,500,700" rel="stylesheet';
@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');


/*=========================================
	Below This Line You Can add Your CSS
	Please Do not Edit Files above if you 
	are not sure what you are doing!
==========================================*/

body{
	font-family: 'Open Sans', sans-serif;
}

.new-font{
	font-family: 'Montserrat', sans-serif;
}

.test {
    margin-bottom: 10px;
	font-size: 3rem;
}

.test {
    display: inline;
    color: #000;
    text-decoration: none;
}

.test::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: #000;
    transition: width .3s;
}

a.test:hover::after {
    width: 100%;
}

a:hover{
	color: #000;
}
  
  .masonry { /* Masonry container */
	  -webkit-column-count: 3;
	-moz-column-count:3;
	column-count: 3;
	-webkit-column-gap: 1em;
	-moz-column-gap: 1em;
	column-gap: 1em;
	 margin: 1.5em;
	  padding: 0;
	  -moz-column-gap: 1.5em;
	  -webkit-column-gap: 1.5em;
	  column-gap: 1.5em;
	  font-size: .85em;
  }
  .item {
	  display: inline-block;
	  background: #fff;
	  padding: 1em;
	  margin: 0 0 1.5em;
	  width: 100%;
	  -webkit-transition:1s ease all;
	  box-sizing: border-box;
	  -moz-box-sizing: border-box;
	  -webkit-box-sizing: border-box;
	  box-shadow: 2px 2px 4px 0 #ccc;
  }
  .item img{max-width:100%;}
  
  @media only screen and (max-width: 320px) {
	  .masonry {
		  -moz-column-count: 1;
		  -webkit-column-count: 1;
		  column-count: 1;
	  }
  }
  
  @media only screen and (min-width: 321px) and (max-width: 768px){
	  .masonry {
		  -moz-column-count: 2;
		  -webkit-column-count: 2;
		  column-count: 2;
	  }
  }
  @media only screen and (min-width: 769px) and (max-width: 1200px){
	  .masonry {
		  -moz-column-count: 3;
		  -webkit-column-count: 3;
		  column-count: 3;
	  }
  }
  @media only screen and (min-width: 1201px) {
	  .masonry {
		  -moz-column-count: 3;
		  -webkit-column-count: 3;
		  column-count: 3;
	  }
  }

  .testimonials .owl-controls .owl-dot.active{
	background-color: #fff;
	border: 1px solid #2e323e;
  }

  .testimonials .owl-controls .owl-dot{
	background-color:#2e323e;
	border: 1px solid #2e323e;
	}
	
	@media only screen and (min-width: 769px) {
		.gallery-top{
		margin-top:-180px;
		}
		.gallery-bottom{
			margin-bottom:-300px;
			}	
		.hideindesktop{
			display: none;
		}
		.introduction-side{
			margin-top:40%;
		}
		.introduction-side-profile{
			margin-top:80%;
		}
		.introduction-side-about{
			margin-top:50%;
		}
		.social-icons{
			left:45%;
			position: relative;
		}
	}

	@media only screen and (max-width: 769px) {
		.hideinmobile{
			display: none;
		}
		.testimonials .owl-controls{
			left:42% !important;
		}
		.social-icons{
			left:39%;
			position: relative;
		}
	}

	.test-1{
		background-color: black;
		height: 300px;
		width: 100%;
		top:15%;
		position: absolute;
		opacity: 0.3;
	}

	.grid-container{
		position: relative;
	}
	
	.testimonials .owl-controls{
		left:47%;
	}

	.testimonials .owl-controls{
		margin-top:10px;
	}