/*
Theme Name: Airfence theme
Theme URI: http://www.airfence.lk/
Author: Janaka Thushara Gamage
Author URI: http://www.airfence.lk/
Description:  This wordpress theme developed for the Airfence Tecthnologies Pvt ltd
              this company launched its operation in Airconditioners, refregitators, humidifires
              cool rooms and more and Hotel, Supper market, Factory, Buildings and more
Tags: one-column, custom-logo, custom-menu, featured-images,  threaded-comments, block-styles
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: airfenceTheme-1.0
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

html,
body,
div {
  margin: 0;
  font-weight: lighter;
}

.top-tel img {
    width: auto;
    float: left;
    height: 30px;
    margin-right: 10px;
}

img {
  max-width: 100%;
  height: auto;
}

.body-background {
  width: 200%;
  height: 200vh;
  position:fixed;
  left: -400px;
  top: -600px;
  z-index: -999;
  background-image: url("images/AF-logo-for-background.png");
  opacity: 0.2;
  transform: rotate(-30deg);
}

/*
* Top Contact Us bar
* font google font - 'Langar', cursive;
* Display- flex, justify-align-center
* p - align-self - center
* height - 50px & 60px
--*/

.top-tel {
  background-color: #333333;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
}

.top-tel p {
  display: inline;
  margin-left: 20px;
  font-family: 'Langar', cursive;
  font-size: 1em;
  letter-spacing: 2px;
  align-self: center;
}

.top-tel p:nth-child(2)::after {
  content: '  | ';
}

@media (max-width: 575.98px) {
  .top-tel {
    display:block;
    margin:auto;
    height: 60px;
    padding: 5px;
    text-align: center;
  }

  .top-tel p:first-child {
    display: block;
  }

  .top-tel p {
    display: inline;
    margin: 0;
    padding: 0;
  }
}

.top-tel p:first-child {
  font-size: 1.2em;
  color: #ffffff;
}

.top-tel p,
.top-tel p a,
.top-tel p a:link,
.top-tel p a:hover,
.top-tel p a:active,
.top-tel p a:visited {
  text-decoration: none;
  color: #cccccc;
}


/*
* Top Logo and Menu Section
* mobile and other
* display - flex
* flex-direction - row and column
* media - max-width 768px
--*/

.logo-container {
  min-height: 1px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  top: 30px;
  z-index: +999;
}

.logo-wrap {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: auto;
  margin-top: 30px;
}

.logo,
.top-menu {
  width: 50%;
  height: auto;
}

.logo {
  background-color: white;
  border-top-left-radius: 30px;
  border-bottom-right-radius: 30px;
  max-width: 450px;
  text-align: center;
  margin-left: 30px;
}

.custom-logo {
  width: 90%;
  max-width: 400px;
  height: auto;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.menu-top-menu-container {
  width: 100%;
  height: auto;
  text-align: right;
}

.menu-top-menu-container ul {
  list-style: none;
  padding-left: 0;
  padding-right: 15px;
  margin: 30px 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

.menu-top-menu-container ul li {
  display: block;
  padding: 0 5px;
}

.menu-top-menu-container ul li,
.menu-top-menu-container ul li a,
.menu-top-menu-container ul li a:link,
.menu-top-menu-container ul li a:hover,
.menu-top-menu-container ul li a:active,
.menu-top-menu-container ul li a:visited {
  text-decoration: none;
  font-family: 'Jura', sans-serif;
  font-weight: 400;
  font-size: 0.95em;
  color: #e5e5e5;
  text-shadow: 5px 5px 1px rgba(0, 0, 0, 0.3);
}

@media (max-width:575.98px) {
  .logo-container,
  .container {
    width: 100%;
  }
  .menu-top-menu-container ul {
    justify-content: center;
  }
  .logo {
    width: 90%;
    max-width: 350px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
}

@media ( min-width: 576px ) and ( max-width: 767.98px ){
  .logo-container {
    width: 540px;
  }
  .menu-top-menu-container ul {
    justify-content: center;
  }
  .logo{
    width: 350px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
}

@media ( min-width: 768px ) and ( max-width: 991.98px ){
  .logo-container {
    width: 720px;
  }
}

@media ( min-width: 992px ) and ( max-width: 1199.98px ){
  .logo-container {
    width: 960px;
  }
}

@media ( min-width: 1200px ) {
  .logo-container {
    width: 1140px;
  }
}

@media (max-width: 768px) {
  .logo-wrap {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    text-align: center;
    margin-top: 10px;
  }

  .top-menu {
    width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .menu-top-menu-container {
    width: 100%;
    height: auto;
    text-align: center;
    margin-top: 15px;
  }

  .menu-top-menu-container ul {
    margin: 0;
  }
}

/*
  * Animation
  * background-image: linear-gradient(130deg, #018A45 40%, #1B75BA)
  * animation  for opacity
*/

.anim-posts h1 {
  position: absolute;
  left: 15px;
  color: yellow;
  font-family: 'Raleway', sans-serif;
  font-size: 3em;
  font-weight: lighter;
  text-shadow: 8px 7px 5px rgba(0, 0, 0, 0.5);
}

.anim-posts p {
  position:absolute;
  width: 40%;
  left: 60px;
  font-family: 'Caveat', cursive;
  color: #c4c4c4;
  text-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4);
}


.top-anim-container {
  width: 100%;
  background-image: linear-gradient(130deg, #018A45 40%, #1B75BA);
  position:absolute;
  top: 0;
  z-index: -1;
}

.anim-coantainer-boarder {
  border: 1px solid #ffffff;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  border-bottom: none;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  top: 80px;
  background-image: url("images/city.png");
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: contain;
}

.anim-bottom-belt {
  width: 100%;
  height: 30px;
  background-color: #FF9231;
  position:relative;
  z-index: -2;
}

@media (max-width: 575.98px) {
  .top-anim-container {
    height: 462px;
  }
  .anim-coantainer-boarder {
    height: 380px;
  }
  .anim-bottom-belt {
  top: 260px;
  }

  .anim-posts .anim-post-thumb img   {
    width:150px;
    height: auto;
    position: absolute;
    right: 10px;
    bottom: -30px;
  }
  .anim-posts h1 {
    bottom: 180px;
    font-size: 1.5em;
    left: 20px;
  }
  .anim-posts p {
    bottom: 60px;
    font-size: 0.8em;
    line-height: 100%;
    left: 20px;
  }
}

@media (min-width: 576px) and (max-width:767.98px) {
  .top-anim-container {
    height: 362px;
  }
  .anim-coantainer-boarder {
    height: 280px;
  }
  .anim-bottom-belt {
  top: 175px;
  }

  .anim-posts .anim-post-thumb img   {
    width:200px;
    height: auto;
    position: absolute;
    right: 10px;
    bottom: -40px;
  }
  .anim-posts h1 {
    bottom: 100px;
    font-size: 1.5em;
  }
  .anim-posts p {
    bottom: 30px;
    font-size: 0.8em;
    line-height: 100%;
  }
}

@media (min-width: 768px) and (max-width:991.98px) {
  .top-anim-container {
    height: 462px;
  }
  .anim-coantainer-boarder {
    height: 380px;
  }
  .anim-bottom-belt {
  top: 300px;
  }

  .anim-posts .anim-post-thumb img   {
    width:300px;
    height: auto;
    position: absolute;
    right: 10px;
    bottom: -40px;
  }
  .anim-posts h1 {
    bottom: 170px;
    font-size: 2em;
  }
  .anim-posts p {
    bottom: 70px;
  }
}

@media (min-width: 992px) and (max-width:1199.98px) {
  .top-anim-container {
    height: 562px;
  }
  .anim-coantainer-boarder {
    height: 480px;
  }
  .anim-bottom-belt {
  top: 390px;
  }

  .anim-posts .anim-post-thumb img   {
    width:400px;
    height: auto;
    position: absolute;
    right: 10px;
    bottom: -50px;
  }
  .anim-posts h1 {
    bottom: 200px;
  }
  .anim-posts p {
    bottom: 140px;
  }
}

@media (min-width: 1200px) {
  .top-anim-container {
    height: 632px;
  }
  .anim-coantainer-boarder {
    height: 550px;
  }
  .anim-bottom-belt {
  top: 460px;
  }

  .anim-posts .anim-post-thumb img   {
    width:500px;
    height: auto;
    position: absolute;
    right: 10px;
    bottom: -60px;
  }
  .anim-posts h1 {
    bottom: 300px;
  }
  .anim-posts p {
    bottom: 240px;
  }
}

/*
  *  top posts animation
*/

.anim-wrap {
  opacity: 0;
}

.anim-wrap:first-child {
  animation-name: firstAnim;
  animation-duration: 20s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
}

@keyframes firstAnim {
  0% { opacity: 0; }
  5% { opacity: 1; }
  25% { opacity: 1 }
  30% { opacity: 0; }
  50% { opacity: 0; }
  55% { opacity: 0; }
  75% { opacity: 0; }
  80% { opacity: 0; }
  100% { opacity: 0; }
}

.anim-wrap:nth-child(2) {
  animation-name: secondAnim;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
}

@keyframes secondAnim {
  0% { opacity: 0; }
  5% { opacity: 0; }
  25% { opacity: 0 }
  30% { opacity: 1; }
  50% { opacity: 1; }
  55% { opacity: 0; }
  75% { opacity: 0; }
  80% { opacity: 0; }
  100% { opacity: 0; }
}

.anim-wrap:nth-child(3) {
  animation-name: thirdAnim;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
}

@keyframes thirdAnim {
  0% { opacity: 0; }
  5% { opacity: 0; }
  25% { opacity: 0 }
  30% { opacity: 0; }
  50% { opacity: 0; }
  55% { opacity: 1; }
  75% { opacity: 1; }
  80% { opacity: 0; }
  100% { opacity: 0; }
}

.anim-wrap:nth-child(4) {
  animation-name: fourthAnim;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
}

@keyframes fourthAnim {
  0% { opacity: 1; }
  5% { opacity: 0; }
  25% { opacity: 0 }
  30% { opacity: 0; }
  50% { opacity: 0; }
  55% { opacity: 0; }
  75% { opacity: 0; }
  80% { opacity: 1; }
  100% { opacity: 1; }
}

/*
    * About Us Section
*/

.aboutus-section {
  margin: auto;
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 40px;
  background-color: #ffffff;
}

.aboutus-section h1 {
  font-family: 'Langar', cursive;
  font-weight: 100;
  color: #1B75BA;
  text-align: center;
  letter-spacing: 2px;
}

.aboutus-section  p {
  font-family: 'Caveat', cursive;
  font-weight:lighter;
  line-height: 150%;
  color: rgba(0, 0, 0, 0.8);
  text-align: justify;
}

/* width 1140px */
@media (min-width: 1200px) {
  .aboutus-section {
    width: 1040px;
    margin-top: 550px;
    height: 320px;
  }
  .about-wrap {
    padding-left: 50px;
    padding-right: 50px;
  }
}

/* width 960px */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .aboutus-section {
    width: 860px;
    margin-top: 450px;
    height: 360px;
  }
  .about-wrap {
    padding-left: 50px;
    padding-right: 50px;
  }
}

/* width 720px */
@media (min-width: 768px) and (max-width: 991.98px) {
  .aboutus-section {
    width: 620px;
    margin-top: 350px;
    height: 460px;
  }
  .about-wrap {
    padding-left: 50px;
    padding-right: 50px;
  }
}

/* width 540px */
@media (min-width: 576px) and (max-width: 767.98px) {
  .aboutus-section {
    width:440px;
    margin-top: 220px;
    height: 635px;
  }
  .about-wrap {
    padding-left: 50px;
    padding-right: 50px;
  }
}

/* width 95% */
@media (max-width: 575.98px) {
  .aboutus-section {
    width: 70%;
    margin-top: 300px;
    padding: 15px 10%;
  }
  .about-wrap {
    position: inherit;
  }
}


/*
  * Image and Heading Animation section
  * Image Fallen from Top
  * Heading reveal
  * p element Zoom
*/

.animation-container {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
  margin-top: 50px;
}

.row {
  display: flex;
  flex-direction: row;
  padding-left: -15px;
  padding-right: -15px;
  width: 100%;
}

.animation-flex-item {
  padding-left: 15px;
  padding-right: 15px;
  align-self: center;
  justify-content:flex-end;
  width: 50%;
}

.animation-flex-item img {
  width: 100%;
  height: auto;
  transition-delay: 0.3s;
  transition-duration: 1s;
  transition-timing-function: ease;
  transition-property: all;
  box-shadow: 8px 8px 4px rgba(0, 0, 0, 0.3);
}

.animation-flex-item img:hover {
  opacity: 0.8;
  transform: rotate(1.5deg) scale(1.05);
}

.animation-flex-item h1 {
  padding-left: 15px;
  border-left: 10px solid red;
  font-family: sans-serif;
  color: #018A45;
  transition-duration: 0.5s;
  transition-timing-function: ease;
  transition-property: all;
}

.animation-flex-item h6,
.animation-flex-item h6 a,
.animation-flex-item h6 a:link,
.animation-flex-item h6 a:visited,
.animation-flex-item h6 a:hover,
.animation-flex-item h6 a:active {
  font-family: 'Caveat', cursive;
  font-size: 1em;
  font-weight: 100;
  text-decoration: none;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
    text-align:right;
    color: #018A45;
}

.animation-flex-item h1:hover {
  opacity: 0.8;
  color: #1B75BA;
}

.animation-flex-item p {
  margin-left: 15px;
  padding-left: 10px;
  border-left: 10px solid #018A45;
  color: #1B75BA;
  margin-top: 5px;
  margin-bottom: 5px;
  font-family: 'Caveat', cursive;
  transition-duration: 0.5s;
  transition-timing-function: ease;
  transition-property: all;
}

.animation-flex-item p:hover {
  color: #018A45;
}



/* width 1140px */
@media (min-width: 1200px) {
  .animation-container {
    width: 1140px;
  }
}

/* width 960px */
@media (min-width: 992px) and (max-width: 1192px) {
  .animation-container {
    width: 960px;
  }
}

/* width 720px */
@media (min-width: 768px) and (max-width: 991.98px) {
  .animation-container {
    width: 720px;
  }
}

/* width 540px */
@media (min-width: 576px) and (max-width: 767.98px) {
  .animation-container {
    width: 540px;
  }
}

/* width 95% */
@media (max-width: 575.98px) {
  .animation-container {
    width: 95%;
  }
  .row {
    flex-direction: column;
  }

  .animation-flex-item {
    width: 100%;
  }
  .animation-flex-item img:hover {
    opacity: 0.8;
    transform: rotate(1deg) scale(1.02);
  }
}


/*
  * site footer
*/

.af-footer {
  background-color: #121212;
  padding-top: 15px;
  padding-bottom: 15px;
}


.af-footer,
.af-footer p,
.af-footer h2,
.af-footer a,
.af-footer a:link,
.af-footer a:hover,
.af-footer a:visited,
.af-footer a:active {
  font-family: 'Caveat', cursive;
  text-align: left;
  text-decoration: none;
}

.af-footer {
  margin-top: 50px;
}

.af-footer u {
  list-style: none;
}

ul {
    list-style: none;
  }

.af-footer img {
  width: 90%;
  max-width: 250px;
  text-align: left;
}

.af-footer p {
  padding: 0;
  margin: 1px 0;
  color: #898989;
}

.af-footer a,
.af-footer a:link,
.af-footer a:visited,
.af-footer a:active {
  color: #1B75BA;
  text-decoration: none;
  font-size: 0.9em;
  font-weight: 100;
}

.af-footer a {
  transition-delay: 0.2s;
  transition-duration: 0.4s;
  transition-timing-function: ease;
}

.af-footer a:hover {
  color: #018A45;
  text-decoration: none;
  font-size: 0.9em;
  font-weight: 100;
}

.af-footer h2 {
  color: #018A45;
}

.af-footer .footer-menu u {
  list-style: none;
}

.af-footer .footer-menu u li {
  display:block;
  color: #1B75BA;
}

/*
  * Category Page
*/

.category-wrap {
  margin-top: 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
}

.category-wrap:last-child {
  border-bottom: none;
}

.category-wrap h2,
.category-wrap h2 a,
.category-wrap h2 a:link,
.category-wrap h2 a:hover,
.category-wrap h2 a:visited,
.category-wrap h2 a:active {
  font-family: 'Caveat', cursive;
  text-align: left;
  text-decoration: none;
  color: #1B75BA;
}

.category-wrap img,
.single-thumb img {
  width: 100%;
  height: auto;
  margin-bottom: 15px;
  border-radius: 15px;
}

.category-wrap p {
  color: rgba(0, 0, 0, 0.8);
  font-family: 'Caveat', cursive;
  text-align: left;
}

/* width 1140px */
@media (min-width: 1200px) {
  .category-container {
    margin-top: 550px;
  }
}

/* width 960px */
@media (min-width: 992px) and (max-width: 1192px) {
  .category-container {
    margin-top: 450px;
  }
}

/* width 720px */
@media (min-width: 768px) and (max-width: 991.98px) {
  .category-container {
    margin-top: 350px;
  }
}

/* width 540px */
@media (min-width: 576px) and (max-width: 767.98px) {
  .category-container {
    margin-top: 250px;
  }
}

/* width 95% */
@media (max-width: 575.98px) {
  .category-container {
    margin-top: 300px;
  }
  .category-wrap img {
    text-align: center;
  }
}

/*
  * The Single page
*/


.single-content {
  text-align: left;
  justify-content: flex-start;
}

.single-content h1,
.single-content h1 a,
.single-content h1 a:link,
.single-content h1 a:hover,
.single-content h1 a:visited,
.single-content h1 a:active {
  font-family: 'Caveat', cursive;
  text-align: left;
  text-decoration: none;
  color: #1B75BA;
}

.single-content p {
  color: rgba(0, 0, 0, 0.8);
  font-family: 'Caveat', cursive;
  font-weight: 100;
  text-align: left;
}

.single-content img {
  height: auto;
}

figure {
  margin-left: auto;
  height: auto;
}

.single-content h6 {
  display: none;
}
























/*wordpress core style*/

.alignnone {
    margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

a img.alignnone {
    margin: 5px 20px 20px 0;
}

a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%; /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
}

.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}

.wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px;
}

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
	background-color: #eee;
	clip: auto !important;
	clip-path: none;
	color: #444;
	display: block;
	font-size: 1em;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
	/* Above WP toolbar. */
}

.wp-block-image figcaption {
/* figure caption airfence style */
  font-family: sans-serif;
  font-size: 0.8em;
  text-align: left;
  color: #1B75BA;
  margin-top: 0;
  font-weight: 600;
}

strong {
    font-weight: bold;
}

em {
    font-style: italic;
}


/*   end   */