/*
Template Name: it-fenix
Author: <a href="http://www.it-fenix.mx/"></a>
Author URI: http://www.it-fenix.mx/


---------------------------------------------
Table of contents
------------------------------------------------
1. Typography
2. General
3. Nav
4. Hero Carousel
5. Accordion
6. Shop
7. Product
8. Carousel Hero
9. Carousel Brand
10. Services
11. Contact map
12. Footer
13. Small devices (landscape phones, 576px and up)
14. Medium devices (tablets, 768px and up)
15. Large devices (desktops, 992px and up)
16. Extra large devices (large desktops, 1200px and up)
--------------------------------------------- */
/*@import url("fontawesome-4.5.0.min.css");
/*@import url("framework.css");


/* Typography */
body, ul, li, p, a, label, input, div {
  font-family: 'arial', sans-serif;
  font-size: 18px !important;
  font-weight: 300 !important;
}
.h1 {
  font-family: 'arial', sans-serif;
  font-size: 48px !important;
  font-weight: 200 !important;
}
.h2 {
  font-family: 'arial', sans-serif;
  font-size: 30px !important;
  font-weight: 300;
}
.h3 {
  font-family: 'arial', sans-serif;
  font-size: 22px !important;
}
/* General */
.logo { font-weight: 500 !important;}
.text-warning {  color: #FF8000 !important;}
.text-muted { color: #FFFFFF;}
.text-success { color: #FF8000 !important;}
.text-light { color: #FFFFFF !important;}
.bg-dark { background-color: #006699 !important;}
.bg-light { background-color: #e9eef5 !important;}
.bg-black { background-color: #003366 !important;}
.bg-success { background-color: #003366 !important;}
.btn {
	background-color: #006699 !important;
	border-color: #FFFFFF !important;;
	border-size: 1px;
}
.btn, .btn.inverse:hover{
	color: #FFFFFF;
	background-color: #008C46;
	border-color: #FFFFFF;
	border-size: 1px;
}
.btn:hover, .btn.inverse{color:inherit; background-color:transparent; border-color:inherit;}

.pagination .page-link:hover {color: #006699;}
.pagination .page-link:hover, .pagination .page-link.active {
  background-color: #FF8000;
  color: #fff;
}

/* Transition Fade
--------------------------------------------------------------------------------------------------------------- */
*, *::before, *::after{transition:all .5s ease-in-out;}
#mainav form *{transition:none !important;}


/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */


/* Navigation
--------------------------------------------------------------------------------------------------------------- */
/* Nav */
#templatemo_nav_top { min-height: 50px;}
#templatemo_nav_top * { font-size: 18px !important;}
nav ul, nav ol{margin:0; padding:0; list-style:none;}

/* Hero Carousel */
#template-mo-zay-hero-carousel { background: #efefef !important;}
/* Accordion */
.templatemo-accordion a { color: #003366;}
.templatemo-accordion a:hover { color: #006699;}
/* Shop */
.shop-top-menu a:hover { color: #FF8000 !important;}
/* Product */
.product-wap { box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.10);}
.product-wap .product-color-dot.color-dot-red { background:#f71515;}
.product-wap .product-color-dot.color-dot-blue { background:#6db4fe;}
.product-wap .product-color-dot.color-dot-black { background:#000000;}
.product-wap .product-color-dot.color-dot-light { background:#e0e0e0;}
.product-wap .product-color-dot.color-dot-green { background:#0bff7e;}
.card.product-wap .card .product-overlay {
  background: rgba(0,0,0,.2);
  visibility: hidden;
  opacity: 0;
  transition: .8s;
}
.card.product-wap:hover .card .product-overlay {
  visibility: visible;
  opacity: 1;
}
.card.product-wap a { color: #000;}
#carousel-related-product .slick-slide:focus { outline: none !important;}
#carousel-related-product .slick-dots li button:before {
  font-size: 15px;
  margin-top: 20px;
}
/* Brand */
.brand-img {
  filter: grayscale(100%);
  opacity: 0.5;
  transition: .5s;
}
.brand-img:hover {
  filter: grayscale(50%);
  opacity: 1;
}
/* Carousel Hero */
#template-mo-zay-hero-carousel .carousel-indicators li {
  margin-top: -50px;
  background-color: #006699;
	transition: .8s;
}
#template-mo-zay-hero-carousel .carousel-control-next i,
#template-mo-zay-hero-carousel .carousel-control-prev i {
  color: #006699 !important;
  font-size: 2.8em !important;
}
/* Carousel Brand */
.tempaltemo-carousel .h1 {
  font-size: .5em !important;
  color: #000 !important;
}
/* Services */
.services-icon-wap {transition: .8s;}
.services-icon-wap:hover, .services-icon-wap:hover i {color: #fff;}
.services-icon-wap:hover {background: #FF8000;}
/* Contact map */
.leaflet-control a, .leaflet-control { font-size: 12px !important;}
.form-control { border: 1px solid #e8e8e8;}
/* Footer */
#tempaltemo_footer a { color: #dcdde1;}
#tempaltemo_footer a:hover { color: #02E800;}
#tempaltemo_footer ul.footer-link-list li { padding-top: 10px;}
#tempaltemo_footer ul.footer-icons li {
  width: 2.6em;
  height: 2.6em;
  line-height: 2.6em;
}
#tempaltemo_footer ul.footer-icons li:hover {
  background-color: #cfd6e1;
  transition: .2s;
}
#tempaltemo_footer ul.footer-icons li:hover i {
  color: #FFFFFF;
  transition: .2s;
}
#tempaltemo_footer .border-light { border-color: #fff !important;}
/*
// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap
*/
/* Small devices (landscape phones, 576px and up)*/
.product-wap .h3, .product-wap li, .product-wap i, .product-wap p {
  font-size: 12px !important;
}
.product-wap .product-color-dot {
  width: 6px;
  height: 6px;
}

@media (min-width: 576px) {
  .tempaltemo-carousel .h1 { font-size: 1em !important;}
}

/*// Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
  #templatemo_main_nav .navbar-nav {max-width: 450px;}
 }

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
  #templatemo_main_nav .navbar-nav {max-width: 550px;}
  #template-mo-zay-hero-carousel .carousel-item {min-height: 30rem !important;}
  .product-wap .h3, .product-wap li, .product-wap i, .product-wap p {font-size: 18px !important;}
  .product-wap .product-color-dot {
    width: 12px;
    height: 12px;
  }
}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {}




/*Pagination 
.pagination{display:block; width:100%; text-align:center; clear:both;}
.pagination li{display:inline-block; margin:0 2px 0 0;}
.pagination li:last-child{margin-right:0;}
.pagination a, .pagination strong{display:block; padding:8px 11px; border:1px solid; background-clip:padding-box; font-weight:normal;}*/

/* Back to Top */
#backtotop{z-index:999; display:inline-block; position:fixed; visibility:hidden; bottom:90px; right:20px; width:50px; height:50px; line-height:50px; font-size:40px; text-align:center; opacity:.2;}
#backtotop i{
	display: block;
	width: 100%;
	height: 150%;
	line-height: inherit;
	color: #FFFFFF;
}
#backtotop.visible{
	visibility: visible;
	opacity: 1;
}
#backtotop:hover{
	opacity: 0.5;
	color: #006699;

}
#backtotop{color:#FFFFFF; background-color:#ff7c00;}

/* Tables
--------------------------------------------------------------------------------------------------------------- */
table, th{border:1px solid; border-collapse:collapse; vertical-align:top;}
table, th{table-layout:auto;}
table{
	width: 100%;
	margin-bottom: 15px;
	margin-left: 120px;
}
th, td{padding:5px 8px;}
td{
	/* [disabled]border-color: #0D5983; */
	border-style: outset;
	border-width: medium;
	border-radius: 5;
}


/* Gallery
--------------------------------------------------------------------------------------------------------------- */
#gallery{display:block; width:100%; margin-bottom:50px;}
#gallery figure figcaption{display:block; width:100%; clear:both;}
#gallery li{margin-bottom:30px;}


/* Font Awesome Social Icons
--------------------------------------------------------------------------------------------------------------- */
.faico{margin:0; padding:0; list-style:none;}
.faico li{display:inline-block; float:left; margin:0 18px 0 0; padding:0; line-height:normal;}
.faico li:last-child{margin-right:0;}

.faico a{display:flex; height:30px; line-height:40px; font-size:50px; text-align:center;}
.faico a{color:inherit; background-color:transparent;}

.faicon-dribble:hover{color:#00FF00;}
.faicon-facebook:hover{color:#FF8000;}
.faicon-google-plus:hover{color:#DB4A39;}
.faicon-linkedin:hover{color:#0E76A8;}
.faicon-pinterest:hover{color:#FF0202;}
.faicon-rss:hover{color:#EE802F;}
.faicon-twitter:hover{color:#00ACEE;}
.faicon-instagram:hover{color:#EA4C89}
.faicon-youtube:hover{color:#FF0004}

/* IE10 + 11 Bugfix - prevents grey background */
hr, .borderedbox{border-color:#D7D7D7;}
label span{color:#FF0000; background-color:inherit;}
input:focus, textarea:focus, *:required:focus{border-color:#56AED4;}
.overlay{
	color: #FFFFFF;
	background-color: #FFF;
}
.overlay::after{color:inherit; background-color:rgba(0,0,0,.55);}

.icon{color:inherit;}
.icon::before, .icon::after{background-color:#F4F4F4;}
article:hover .icon::before, article:hover .icon::after{}

.underlined::before{background-color:#D7D7D7;}
.underlined::after{color:#D7D7D7; background-color:#FFFFFF;}
.bgded .underlined::after{background-color:#000000;}


/*
Custom Css
*/
html{overflow-y:scroll; overflow-x:hidden;}
html, body{
	margin: 0;
	padding: 0;
	font-size: 16px;
	line-height: 1.6em;
}

*, *::before, *::after{box-sizing:border-box;}

.bold{font-weight:bold;}
.center{
}
.right{text-align:right;}
.uppercase{text-transform:uppercase;}
.capitalise{text-transform:capitalize;}
.hidden{display:none;}
.nospace{margin:0; padding:0; list-style:none;}
.block{display:block;}
.inline *{display:inline-block;}
.inline *:last-child{margin-right:0;}
.pushright li{margin-right:20px;}
.pushright li:last-child{margin-right:0;}
.borderedbox{border:1px solid;}
.overlay{position:relative; z-index:1;}
.overlay::after{display:block; position:absolute; top:0; left:0; width:100%; height:100%; content:""; z-index:-1;}
.bgded{background-position:top center; background-repeat:no-repeat; background-size:cover;}
.circle{border-radius:50%; background-clip:padding-box;}

.icon{display:inline-block; position:relative; margin-bottom:50px; width:100px; height:100px; line-height:100px; text-align:center; font-size:36px; z-index:1;}
.icon::before, .icon::after{display:block; position:absolute; top:0; left:0; width:100%; height:100%; content:""; z-index:-1;}
.icon::before{-ms-transform:rotate(45deg); transform:rotate(45deg);}/* This rotates the box depending on how many degrees you set - can take negative degrees eg. -45deg */

.clear, .group{display:block;}
.clear::before, .clear::after, .group::before, .group::after{display:table; content:"";}
.clear, .clear::after, .group, .group::after{clear:both;}

a{outline:none; text-decoration:none;}

.fl_left, .imgl{float:left;}
.fl_right, .imgr{
	float: right;
}

img{width:auto; max-width:100%; height:auto; margin:0; padding:0; border:none; line-height:normal; vertical-align:center;}
.imgl{margin:0 15px 10px 0; clear:left;}
.imgr{margin:0 0 10px 15px; clear:right;}




/* Generalise
--------------------------------------------------------------------------------------------------------------- */
h66, .heading{
	margin: 0 0 20px 0;
	font-size: 22px;
	line-height: italic;
	font-weight: bolder;
	text-transform: capitalize;
	color: inherit;
}

.underlined{display:inline-block; position:relative; padding-bottom:15px; z-index:1;}
.underlined::before, .underlined::after{display:block; position:absolute; bottom:0; width:100%; height:1px; content:"";}
.underlined::after{bottom:-10px; left:50%; width:20px; height:20px; line-height:20px; margin-left:-10px; font-family:"FontAwesome"; font-size:24px; content:"\f05b"; text-align:center;}

address{font-style:normal; font-weight:normal;}
hr{display:block; width:100%; height:1px; border:solid; border-width:1px 0 0 0;}

.font-xs{font-size:.8rem;}
.font-x1{font-size:1.2rem;}
.font-x2{font-size:1.8rem;}
.font-x3{font-size:2.8rem;}

.wrapper{
	display: inherit;
	width: 100%;
	margin: 0;
	padding: 0;
	word-wrap: break-word;
}
/*
The "hoc" class is a generic class used to centre a containing element horizontally
It should be used in conjunction with a second class or ID
*/
.hoc{display:block; margin:0 auto;}

/* Grid
--------------------------------------------------------------------------------------------------------------- */
.one_half, .one_third, .two_third, .one_quarter, .two_quarter, .three_quarter{display:inline-block; float:left; margin:0 0 0 3.06748466257669%; list-style:none;}

.first{margin-left:0; clear:left;}

.one_quarter{width:22.69938650306748%;}
.one_third{width:31.28834355828221%;}
.one_half, .two_quarter{width:48.46625766871166%;}
.two_third{width:65.6441717791411%;}
.three_quarter{width:74.23312883435584%;}


/* Spacing
--------------------------------------------------------------------------------------------------------------- */
.btmspace-10{margin-bottom:10px;}
.btmspace-15{margin-bottom:15px;}
.btmspace-30{margin-bottom:30px;}
.btmspace-50{
	margin-bottom: 1px;
}
.btmspace-80{
	margin-bottom: 10px;
}

.inspace-5{padding:5px;}
.inspace-10{padding:10px;}
.inspace-15{padding:15px;}
.inspace-30{padding:30px;}
.inspace-50{padding:50px;}
.inspace-80{padding:80px;}

#sidebar h3 { padding: 10px 0 10px 10px; height: 25px; background: url(img/templatemo_sidebar_title.png) top no-repeat }

.sidebar_box { margin-bottom: 40px }
.sidebar_box_content {padding-left: 10px }

.footer_gallery { margin: 0; padding:0; list-style: none }
.footer_gallery li {
	margin: 0 10px 10px 0;
	padding: 0;
	display: block;
	float: left;
	text-align: center;
}

.pagging { margin: 0 0 20px; padding: 0 }
.pagging ul { margin: 0; padding: 0; list-style: none }
.pagging ul li { margin: 0; padding: 0; display: inline }
.pagging ul li a { float: left; display: block; color: #666; text-decoration: none; margin-right: 5px; padding: 5px 10px; background: #ebe7e4; border: 1px solid #d6d0cc}
.pagging ul li a:hover { color: #fff; background: #cfccc9; }

.no_margin_right { margin-right: 0 }
.last_box { margin-bottom: 0; background: none }

/* 
---------------------------------------------
Contact Style
--------------------------------------------- 
*/

.contact-us .contact-us-content {
  border-radius: 25px;
  padding: 80px;
  background-color: #7a6ad8;
  position: relative;
  z-index: 1;
}

.contact-us .contact-us-content::before {
  background: url(../images/contact-dec-01.png);
  position: absolute;
  left: 50%;
  transform: translateX(-149px);
  opacity: 0.5;
  top: 0;
  width: 318px;
  height: 119px;
  content: '';
  z-index: 2;
}

.contact-us .contact-us-content::after {
  background: url(../images/contact-dec-02.png);
  position: absolute;
  right: 0;
  bottom: 0;
  width: 183px;
  height: 149px;
  content: '';
  z-index: 2;
}

#contact-form input {
	width: 150%;
	height: 50px;
	border-radius: 25px;
	background-color: rgba(0,85,147,0.89);
	border: #006699;
	outline: none;
	font-weight: 300;
	padding: 0px 20px;
	font-size: 14px;
	color: #fff;
	margin-bottom: 30px;
	position: relative;
	z-index: 3;
}

#contact-form input::placeholder {
  color: #fff;
}

#contact-form textarea {
	width: 150%;
	height: 180px;
	border-radius: 25px;
	background-color: rgba(0,85,147,0.89);
	border: none;
	outline: none;
	font-weight: 500;
	padding: 20px;
	font-size: 16px;
	color: #fff;
	margin-bottom: 30px;
	position: relative;
	z-index: 3;
}

#contact-form textarea::placeholder {
    border: #fff;
	color: #fff;
}

#contact-form button {
	border: none;
	height: 50px;
	font-size: 20px;
	font-weight: 600;
	background-color: #FF8000;
	padding: 0px 25px;
	border-radius: 25px;
	color: #fff;
	transition: all .4s;
	position: relative;
	z-index: 3;
}

#contact-form button:hover {
  opacity: 0.5;
}

.contact-us-content .more-info {
  text-align: center;
  background: #FFFFFF;
  background: linear-gradient(90deg, rgba(85,0,227,1) 0%, rgba(198,61,255,1) 100%);
  border-radius: 0px 0px 23px 23px;
  padding: 45px 30px 15px 30px;
}

.contact-us-content .more-info .info-item {
  text-align: center;
  margin-bottom: 30px;
}

.contact-us-content .more-info i {
  font-size: 32px;
  color: #fff;
  margin-bottom: 15px;
}

.contact-us-content .more-info h4 a {
  color: #fff;
  font-size: 16px;
  font-weight: 400;
}


/* 
---------------------------------------------