/*
    Theme Name: Groovin
    Theme URL: https://bootstrapmade.com/groovin-free-bootstrap-theme/
    Author: BootstrapMade
    Author URL: https://bootstrapmade.com
*/


/* ==== Google font ==== */
@import url('https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic|Montserrat:700|Merriweather:400italic');
/* === fontawesome === */
@import url('font-awesome.css');
/* === custom icon === */
@import url('custom-fonts.css');
/* ==== overwrite bootstrap standard ==== */
@import url('overwrite.css');

/* =======================================
Basic & general
=========================== */
body {
	color:#777;
	background: #f7f7f7;
	font-size: 16px;
	line-height: 1.6em;
	font-weight: 300;
	text-shadow: none;
}

.clear {
	clear: both;
}

body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: 'Lato', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
	color:#222;
}

h1,h2,h3,h4,h5,h6 {
	font-style: normal;
	margin: 0 0 20px 0;
}
h1 { font-size: 40px; line-height: 30px; }
h2 { font-size: 32px; }
h3 { font-size: 24px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; }
.txt-light { font-weight: 300; }
.txt-regular { font-weight: 400; }
.txt-bold { font-weight: 700; }
.txt-uppercase { text-transform: uppercase; }

blockquote {
	font-family: Georgia, serif;
}

blockquote.bigquote {
	border: none;
	font-size: 48px;
	font-weight: 700;
	line-height: 1.1em;
}

.text-bold {
	font-weight: 900;
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
	display: block;
}

figure figcaption {
    border: 1px dotted blue;
    text-align: center;
}

small {
	font-size: 70%;
	font-weight: 100;
}

a:hover {
	text-decoration: none;
}

:focus {
	outline: none;
}

.color-white.txt-shadow {
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}

.t-uppercase {
	text-transform: uppercase;
}


/*===========================
  --- Header & menu ----
=========================== */
.navbar {
    line-height: 100px;
    height: 100px;
    background-color: rgba(0,0,0,0.3);
    display: block;
    vertical-align: middle;
    text-align: center;
    margin-bottom: 0;
    padding-bottom:0;
}
.navbar .navbar-collapse {
    margin-bottom: 0;
    padding-bottom:0;
}
.nav li {
    height: 100%;
    line-height: 100%;
    margin-bottom: 0;
    padding-bottom:0;
}
.nav>li>a {
    display: table-cell;
    height: 100%;
    line-height: 100%;
    vertical-align: middle;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.nav>li>a:hover {
    color: #fff;
    background: none;
}
.navbar-nav {
    float: right;
    margin-bottom: 0;
    padding-bottom:0;
}
.navbar .navbar-nav > .active > a {
    color: #fff;
}
.navbar .navbar-nav > .active > a {
    padding-bottom: 22px;
}
h1 a.navbar-brand {
    font-size: 24px;
    color: #fff;
    font-weight: 900;
    text-shadow: none;
}
.navbar-brand {
    padding: 0;
    display: table-cell;
    vertical-align: middle;
    line-height: 90px;
}
.navbar-brand img {
    vertical-align: middle;
}
.navbar-toggle {
    padding: 0;
    margin: 0;
    width: 80px;
}
.navbar-collapse.in {
    margin-top: -5px !important;
}

/*===========================
------Slick------
=========================== */
.slick-container {
  margin: 0 auto;
  padding: 20px;
  width: 90%;
  color: #333;
  background: #FFFFFF;
}

.slick-slide {
	align: middle;
  text-align: center;
  color: #222;
  background: #888584;
}

.slick-slide img {
	height: calc(50vh - 100px);
  width: auto;
  margin: 0 auto; /* it centers any block level element */
	border: 16px solid #888584;
}



/* ==== general main content style ==== */
#maincontent.section {
	padding:30px 0 40px 0;
}



/* boxed */


.boxed h3{
	margin-bottom:0;
}

.boxed h4{
	color:#a9a9a5;
	font-size: 20px;
	text-shadow: 0 1px 0 #ffffff;
	margin-bottom:10px;
}

.offer-box{
	width:20.95%;
	padding:2%;
	float:left;
	background:#000000;
	border-left:1px solid #fff;
	color:#cbcbcb;
}

.offer-box h3, .offer-box h4{
	color:#fff;
	border-bottom:1px solid #fff;
	padding-bottom:15px;
}

.offer-box-first{
	border-left:none;
}

.special-box{
	color:#fcfcfc;
	position:relative;
	border-left:none;
}

.special-box:after{
	content:"";
	display:block; /* reduce the damage in FF3.0 */
	position:absolute;
	top:0;
	right:-40px;
	width:0;
	height:0;
	border-width:0 0 30px 40px ;
	border-style:solid;
}
/*===========================
  --- Featured section ----
=========================== */

section.featured {
	padding: 200px 0 60px;
	background: #70B9B0;
	color: #fdfdfd;
}

section.featured h2.slogan {
	color: #fff;
	font-size: 48px;
	font-weight: 900;
}

 /* inner heading */
section.featured.inner {
	background: #eee;
	padding: 150px 0 50px;
}

/* --- align --- */
.align-left {
	text-align: left;
}
.align-right {
	text-align: right;
}
.align-center {
	text-align: center;
}

/*========== works ==================*/


.grid {
	max-width: 75em;
	list-style: none;
	margin: 40px auto;
	padding: 0;
}

.grid li {
	display: block;
	float: left;
	padding: 7px;
	width: 33%;
	opacity: 0;
}

.grid li.shown,
.no-js .grid li,
.no-cssanimations .grid li {
	opacity: 1;
}

.grid li a,
.grid li img {
    padding:0px;
	outline: none;
	border: none;
	display: block;
	max-width: 100%;
    cursor:url(../img/cursor.png),pointer;
    background-color:#fff;
    -webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

/* Appearing effect */
.grid.effect li.animate {
	-webkit-transform: translateY(200px);
	-moz-transform: translateY(200px);
	transform: translateY(200px);
	-webkit-animation: moveUp 0.65s ease forwards;
	-moz-animation: moveUp 0.65s ease forwards;
	animation: moveUp 0.65s ease forwards;
}

@-webkit-keyframes moveUp {
	to { -webkit-transform: translateY(0); opacity: 1; }
}

@-moz-keyframes moveUp {
	to { -moz-transform: translateY(0); opacity: 1; }
}

@keyframes moveUp {
	to { transform: translateY(0); opacity: 1; }
}

.grid li img:hover {
    opacity:0.2
}
/*===========================
------Slick------
=========================== */
.slick-container {
  margin: 0 auto;
  padding: 20px;
  width: 600px;
  color: #333;
  background: #F7F7F7;
}

.slick-slide {
	align: middle;
  text-align: center;
  color: #222;
  background: #F7F7F7;
}

.slick-slide img {
	height: calc(50vh - 100px);
  width: auto;
  margin: 0 auto; /* it centers any block level element */
	border: 16px solid #F7F7F7;
}

.slick-prev:before, .slick-next:before {
    color:#70B9B0 !important;
}



/*=========================Footer
==================== */

section#footer {
	background: #242424;
	margin: 0;
}

section#footer .copyright {
	text-align: center;
}

/* footer social icons */
ul.social-network {
	list-style: none;
	display: inline;
	margin-left:0 !important;
	padding: 0;
}
ul.social-network li {
	display: inline;
	margin: 0 5px;
}

/* footer menu */
ul.footer-menu {
	list-style: none;
	display: inline;
	margin-left:0 !important;
	padding: 0;
}
ul.footer-menu li {
	display: inline;
	margin: 0 5px;
}

a.scrollup{
	height:32px;
	width:32px;
	color:#fff;
	font-size:18px;
	line-height:32px;
	text-align:center;
	text-decoration:none;
	position:fixed;
	bottom:10px;
	right:10px;
	z-index:9999;
	opacity:0.5;
}
a.scrollup:hover{
	opacity:1;
	color:#fff;
}

/* footer social icons */
.social-network a.icoRss:hover {
	background-color: #F56505;
}
.social-network a.icoFacebook:hover {
	background-color:#3B5998;
}
.social-network a.icoTwitter:hover {
	background-color:#33ccff;
}
.social-network a.icoGoogle:hover {
	background-color:#BD3518;
}
.social-network a.icoVimeo:hover {
	background-color:#0590B8;
}
.social-network a.icoLinkedin:hover {
	background-color:#007bb7;
}
.social-network a.icoRss:hover i, .social-network a.icoFacebook:hover i, .social-network a.icoTwitter:hover i,
.social-network a.icoGoogle:hover i, .social-network a.icoVimeo:hover i, .social-network a.icoLinkedin:hover i {
	color:#fff;
}
a.socialIcon:hover, .socialHoverClass {
	color:#44BCDD;
}

.social-circle li a {
	display:inline-block;
	position:relative;
	margin:0 auto 0 auto;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	border-radius:50%;
	text-align:center;
	width: 50px;
	height: 50px;
	font-size:20px;
}
.social-circle li i {
	margin:0;
	line-height:50px;
	text-align: center;
}

.social-circle li a:hover i, .triggeredHover {
	-moz-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-ms--transform: rotate(360deg);
	transform: rotate(360deg);
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-o-transition: all 0.2s;
	-ms-transition: all 0.2s;
	transition: all 0.2s;
}
.social-circle i {
	color: #fff;
	-webkit-transition: all 0.8s;
	-moz-transition: all 0.8s;
	-o-transition: all 0.8s;
	-ms-transition: all 0.8s;
	transition: all 0.8s;
}

/* ==== media screen queries ==== */

@media (min-width: 768px) and (max-width: 979px) {

	.default {
	position: fixed;
	background:#2a2a2a;
	top:0;
	left: 0;
	width: 100%;
	}

}

@media (max-width: 767px) {
	.default {
		opacity: 1;
	}
	.navbar .navbar-brand {
		font-weight: 900;
		color: #fff;
		margin: 15px 0 0 15px;
		font-size: 20px;
	}

	.fixed {
	position: fixed;
	background:#2a2a2a;
	top:0;
	left: 0;
	width: 100%;
		padding-right:20px;
	box-shadow: 0 0 40px #222;
	-webkit-box-shadow: 0 0 40px #222;
	-moz-box-shadow: 0 0 40px #222;
	}

	.sy-caption-wrap {
	  position: absolute;
	  left: 0;
	  text-align: center;
	}
	.sy-caption-wrap .sy-caption {
		position: relative;
		left:0;
		text-align: center;
		font-size: 22px;
		color: #fff;
		top: 30%;
		line-height: 1.1em;
	}
	.team-box {
		margin-bottom:20px;
	}


}


@media (max-width: 480px) {
	.default {
		opacity: 1;
	}
	.navbar .navbar-brand {
		font-weight: 900;
		color: #fff;
		margin: 15px 0 0 15px;
		font-size: 20px;
	}
	.section {
		padding:80px 0 40px 0;
	}
	section#intro{
		padding:0;
	}
	.sy-caption-wrap {
	  position: absolute;
	  left: 0;
	  text-align: center;
	}
	.sy-caption-wrap .sy-caption {
		position: relative;
		left:0;
		text-align: center;
		font-size: 18px;
		color: #fff;
		top: 30%;
		line-height: 1.1em;
	}
	.col-md-6 {
		margin-bottom: 30px;
	}
}