/* 

1. Add your custom Css styles below
2. Place the this code in your template: 

 <link href="css/custom.css" rel="stylesheet">

*/

@font-face {
  font-family: 'Futura';
  src: url('../fonts/Futura-Medium/Futura-Medium.eot');
  src: url('../fonts/Futura-Medium/Futura-Medium.eot?iefix') format('eot'),
       url('../fonts/Futura-Medium/Futura-Medium.woff') format('woff'),
       url('../fonts/Futura-Medium/Futura-Medium.ttf') format('truetype'),
       url('../fonts/Futura-Medium/Futura-Mediu.svg#webfont90E2uSjN') format('svg');
  font-weight: normal;
  font-style: normal;
}

.img-responsive {
  display: block;
  height: auto;
  max-width: 100%
}

#mainMenu nav > ul > li .dropdown-menu > li > a > span{ color: #f00; }

.pdt10{ padding-top: 15px; padding-bottom: 15px; }
.showPc{ display: block; }

.imgHome-center{ max-width: 252px; margin: 0 auto; }
.imgHome-center-mobi{ display: none; }

ul.navWorkcat li{
	font-family: 'Futura';
	font-size: 25px;
	color: #ff511b;
	padding: 12px 0;
	list-style: none;
	text-align: center;
}
ul.navWorkcat li a{
	font-family: 'Futura';
	font-size: 25px;
	color: #000;
	opacity: 1;
}
ul.navWorkcat li a.actived, ul.navWorkcat li a.current, ul.navWorkcat li a:hover{
	color: #ff511b;
}

.boxBack{ font-family: 'Futura'; font-size: 14px; padding-bottom: 20px; }
span.boxtitle-magwork{ 
	display: block; padding-top: 10px; 
	text-align: center; 
	font-family: 'Futura'; font-size: 16px; 
}
.boxtitle-type{ 
	padding-top: 30px; 
	text-align: center; 
	font-family: 'Futura'; font-size: 18px; 
}


@media (max-width: 991px) {

	.showPc{ display: none; }
	.imgHome-center-mobi{ display: block;  max-width: 300px; margin: 0 auto;  }

}


.bg-carousel{
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: contain;
}
.bg-right{ background-image: url('../images/home2/bg.png'); }
.bg-left{ background-image: url('../images/home2/bg-blue.png'); }
.portfolio-2-columns .portfolio-item{
	width: 44%;
	margin: 0 3%;
}
.bg-carousel .owl-carousel .owl-nav [class*="owl-"]{ top: 65%; }
.img-c{
	position: absolute;
	width: 90px;
	top: 43%;
	left: 50%;
	margin-left: -45px;
	z-index: 9;
  -webkit-animation: fadeImgC 5s; /* Safari 4+ */
  -moz-animation:    fadeImgC 5s; /* Fx 5+ */
  -o-animation:      fadeImgC 5s; /* Opera 12+ */
  animation:         fadeImgC 5s; /* IE 10+, Fx 29+ */
}


@-webkit-keyframes fadeImgC {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes fadeImgC {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes fadeImgC {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes fadeImgC {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}


.post-details p{ padding-bottom: 30px; }

.img-contect-footer{ position: absolute; bottom: 0; right: 10%; width: 150px; }
.contact-m-90{ margin: 90px; }
.contact-imgPat{ margin-bottom: 30px; }
.contact-h3 a{ display: block; }


@media (max-width: 1440px) {

	.img-c{ width: 80px; margin-left: -40px; top: 58%; }

}
@media (max-width: 1190px) {

	.img-c{ width: 70px; margin-left: -35px; top: 57%; }

}
@media (max-width: 991px) {

	.img-c{ width: 60px; margin-left: -30px; }

	.contact-m-90{ margin: 50px 90px; }
	.contact-imgPat{ width: 300px; margin-bottom: 20px; }
	.contact-h3 a{ font-size: 18px; }
	h3.contact-h3:not(:last-child){ margin-bottom: 10px; }

}
@media (max-width: 767px) {

	.img-c{ width: 40px; margin-left: -20px; }

	 .p-l-150 { padding-left: 100px !important; }
	 .p-r-100 { padding-right: 50px !important; }

	 .contact-m-90{ margin: 20px 30px; }
	 .contact-imgPat{ width: 140px; margin-bottom: 10px; }
	 .img-contect-footer{ width: 100px; }
	 .contact-h3{ font-size: 16px; line-height: 20px; }
	 .contact-h3 a{ font-size: 14px; }

}
@media (max-width: 480px) {

	.portfolio-2-columns .portfolio-item{
		width:100%; 
		margin: 0 auto;
	}
	.img-c{ display: none; }

	.img-contect-footer{ width: 70px; }
	 .contact-h3{ font-size: 14px; line-height: 16px; }
	 .contact-h3 a{ font-size: 12px; }
	 /*.contact-m-90{ margin: 50px 30px 80px; }*/

}


.colorMint {
	color: #1abc9c;
	
}


.bg-wsinc { background:url('../images/bg-grid-blue.jpg'); background-position: center center; }
.row-wsinc {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}



@media (max-width: 767px) {

	.bg-wsinc { background:unset; width: 80%; margin: 0 auto; }

}

.bg-pillowtalk {
	background-color: #14bcff;
	
}


.fancybox-caption-wrap{ text-align: center; }

.owl-carousel.arrows-dark .owl-nav [class*="owl-"]{
	border-color: transparent;
	background-color: transparent;
}
.owl-carousel.arrows-dark .owl-nav [class*="owl-"] i{
	color: #000;
}
.portfolio-item .owl-carousel .owl-nav [class*="owl-"] i, 
.grid-item .owl-carousel .owl-nav [class*="owl-"] i{
	font-size: 30px;
}
.owl-carousel .owl-controls .owl-dots .owl-dot{ display: none; }


@media (min-width: 768px) {
  .container-book {
    width: 70%;
  }
}
@media (min-width: 992px) {
  .container-book {
    width: 80%;
  }
}
@media (min-width: 1200px) {
  .container-book {
    width: 90%;
  }
}

a.textwhite, a.textwhite:active, a.textwhite:focus { color: #fff; text-decoration: none; }
a.textwhite:hover, a.textwhite:active{color: #ff214f; text-decoration: none;}


/* Style the Image Used to Trigger the Modal */
#myImg {
 /* border-radius: 5px;*/
  cursor: pointer;
  transition: 0.3s;
  border: none;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 0px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (Image) */
.modal-content {
  margin: auto;
  display: block;
  width: 100%;
  /*max-width: 700px;*/
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation - Zoom in the Modal */
.modal-content, #caption { 
  animation-name: fadeIn;
  animation-duration: 1s;
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}