/*==================================================*/
/* [Table of contents] */
/*==================================================*/

/*	
    1. RESET
    2. TYPOGRAPHY
    3. SPACE AND ALIGMENT
    4. SECTIONS
    5. BUTTONS
    6. ICONS
    7. SCROLLING TOP
    8. PRELOADER 
    9. FILTER GALLERY
    10. MAGNIFIC POPUP
    11. YOUTUBE POPUP
    12. MODAL POPUP
    13. PULSE BUTTON EFFECTS
*/

html,
body,
div,
span,
applet,
object,
iframe,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  overflow-x: hidden;
  text-rendering: optimizeSpeed;
  background: rgb(246, 253, 253);
}

html {
  font-size: 16px;
}

/*====================================================
    2. TYPOGRAPHY. 
  ====================================================*/
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol {
  margin-top: 0;
  margin-bottom: 1rem;
  font-family: "Roboto", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  line-height: 1.5;
}

h1,
.h1 {
  font-size: 2.5rem;
}

h2,
.h2 {
  font-size: 2rem;
}

h3,
.h3 {
  font-size: 1.75rem;
}

h4,
.h4 {
  font-size: 1.5rem;
}

h5,
.h5 {
  font-size: 1.25rem;
}

h6,
.h6 {
  font-size: 1rem;
}

p {
  font-size: 16px;
  color: #8c8c8c;
  font-family: "Open Sans", sans-serif;
}

a {
  color: #000;
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: #1f71fa;
  text-decoration: none;
}

/*====================================================
    3. SPACE AND ALIGMENT. 
  ====================================================*/
.mt-5,
.my-5 {
  margin-top: 5rem !important;
}

.mb-5,
.my-5 {
  margin-bottom: 5rem !important;
}

.mt-4,
.my-4 {
  margin-top: 3rem !important;
}

.mb-4,
.my-4 {
  margin-bottom: 3rem !important;
}

/*====================================================
    4. SECTIONS. 
  ====================================================*/
section {
  overflow-x: hidden;
  position: relative;
}

.pages-hero {
  height: 350px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.pages-hero:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(to bottom right, #002642, #002642);
  opacity: 0.6;
}

.pages-title {
  position: absolute;
  bottom: 50px;
  color: #fff;
}

.pages-title span {
  font-weight: 700;
  font-size: 2rem;
}

.pages-title h1 {
  font-size: 2.5rem;
  color: #fff;
  font-weight: 600;
  margin-bottom: 5px;
}

.page-nav {
  width: 100%;
  z-index: 1;
}

.page-nav p {
  font-size: 13px;
  color: #fff;
  margin-bottom: 0px;
}

.pages-title a {
  color: #fff;
  text-decoration: none;
  transition: 0.3s;
}

.pages-title a:hover {
  color: #b4e602;
  text-decoration: none;
}

.section-title {
  margin-bottom: 3rem;
}

.section-title h2 {
  text-align: center;
  color: #212529;
  font-weight: 600;
}

.section-title h2:after {
  background: #b4e602;
  content: "";
  display: block;
  height: 5px;
  margin: 15px auto;
  width: 80px;
}

.section-title p {
  text-align: center;
}

.side-title {
  width: 100%;
  margin-bottom: 1.5rem;
  border-left: solid 6px #ffa600;
}

.side-title h5 {
  color: #8c8c9e;
  margin-left: 20px;
  margin-bottom: 5px;
  line-height: 1;
}

.side-title h2 {
  margin-left: 20px;
  line-height: 1.2;
}

hr.separator {
  margin: 2rem auto 2rem;
  border-top: 1px solid rgba(221, 221, 221, 0.9);
}

/*====================================================
    5. BUTTONS.
  ====================================================*/
.btn {
  font-family: "Roboto", sans-serif;
  display: inline-block;
  padding: 6px 18px;
  border-radius: 4px;
  font-size: 1rem;
}

.btn-tags {
  font-size: 13px;
  color: #0e377b;
  background-color: transparent;
  border-color: #0e377b;
  border-radius: 0px;
}

.btn-tags:hover {
  color: #fff;
  background-color: #0e377b;
  border-color: #0e377b;
}

.btn-tags:focus,
.btn-tags.focus {
  color: #fff;
  background-color: #0e377b;
  border-color: #0e377b;
  box-shadow: none;
}

.btn-tags.disabled,
.btn-tags:disabled {
  color: #fff;
  background-color: #0e377b;
  border-color: #0e377b;
}

.btn-contact {
  color: #fff;
  transition: 0.9s;
  padding: 1rem 1.125rem;
  font-size: 1rem;
  background: #0e377b;
  border: solid 2px #0e377b;
  width: 100%;
  margin-top: 15px;
  font-weight: 600;
}

.btn-contact:hover {
  color: #fff;
  background-color: #0069d9;
  border-color: #0062cc;
}

.btn-contact:focus,
.btn-contact.focus {
  box-shadow: none;
}

.btn-contact.disabled,
.btn-contact:disabled {
  color: #fff;
  background-color: #0e377b;
  border-color: #0e377b;
  opacity: 1;
}

.btn-contact:not(:disabled):not(.disabled):active,
.btn-contact:not(:disabled):not(.disabled).active,
.show > .btn-contact.dropdown-toggle {
  color: #fff;
  background-color: #0e377b;
  border-color: #0e377b;
}

.btn-contact:not(:disabled):not(.disabled):active:focus,
.btn-contact:not(:disabled):not(.disabled).active:focus,
.show > .btn-contact.dropdown-toggle:focus {
  box-shadow: none;
}

.btn-quote {
  width: auto;
  padding: 0.5rem 1rem;
  font-size: 15px;
}

.cargoy-btn {
  background-color: #1f71fa;
  border: none;
  color: #ffffff;
  cursor: pointer;
  display: inline-block;
  font-family: "Roboto", sans-serif;
  font-size: 0.9rem;
  line-height: 1em;
  outline: none;
  padding: 12px 25px;
  position: relative;
}

.cargoy-btn:before,
.cargoy-btn:after {
  border-color: transparent;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
  border-style: solid;
  border-width: 0;
  content: "";
  height: 24px;
  position: absolute;
  width: 24px;
}

.cargoy-btn:before {
  border-color: #1f71fa;
  border-left-width: 2px;
  border-top-width: 2px;
  left: -5px;
  top: -5px;
}

.cargoy-btn:after {
  border-bottom-width: 2px;
  border-color: #1f71fa;
  border-right-width: 2px;
  bottom: -5px;
  right: -5px;
}

.cargoy-btn:hover,
.cargoy-btn.hover {
  background-color: #1f71fa;
}

.cargoy-btn:hover:before,
.cargoy-btn.hover:before,
.cargoy-btn:hover:after,
.cargoy-btn.hover:after {
  height: 100%;
  width: 100%;
}

.cargoy-btn-white {
  background-color: #fff;
  border: none;
  color: #0e377b;
  font-weight: 600;
  cursor: pointer;
  display: inline-block;
  font-family: "Roboto", sans-serif;
  font-size: 0.9rem;
  line-height: 1em;
  outline: none;
  padding: 12px 25px;
  position: relative;
  text-transform: uppercase;
}

.cargoy-btn-white:before,
.cargoy-btn-white:after {
  border-color: transparent;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
  border-style: solid;
  border-width: 0;
  content: "";
  height: 24px;
  position: absolute;
  width: 24px;
}

.cargoy-btn-white:before {
  border-color: #fff;
  border-left-width: 2px;
  border-top-width: 2px;
  left: -5px;
  top: -5px;
}

.cargoy-btn-white:after {
  border-bottom-width: 2px;
  border-color: #fff;
  border-right-width: 2px;
  bottom: -5px;
  right: -5px;
}

.cargoy-btn-white:hover,
.cargoy-btn-white.hover {
  background-color: #fff;
}

.cargoy-btn-white:hover:before,
.cargoy-btn-white.hover:before,
.cargoy-btn-white:hover:after,
.cargoy-btn-white.hover:after {
  height: 100%;
  width: 100%;
}

/*====================================================
    6. ICONS. 
  ====================================================*/
ul.social-network {
  list-style: none;
  justify-content: center;
}

ul.social-network li {
  display: inline-block;
  margin: 0px 5px;
}

li.circle-icon {
  width: 40px;
  height: 40px;
  border: solid 1px #000;
  border-radius: 50%;
  line-height: 45px;
  transition: 0.3s;
}

li.circle-icon:hover {
  background-color: #000;
  border: solid 1px #000;
}

li.circle-icon .fab {
  font-size: 25px;
}

/*====================================================
    7. SCROLLING TOP.
  ====================================================*/
@media only screen and (min-width: 1024px) {
  main p {
    font-size: 20px;
    font-size: 1.25rem;
  }
}

.cd-top {
  display: inline-block;
  height: 40px;
  width: 40px;
  position: fixed;
  bottom: 40px;
  right: 10px;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background: rgba(180, 230, 2) url(../img/master/cd-top-arrow.svg) no-repeat
    center 50%;
  visibility: hidden;
  border-radius: 5px;
  z-index: 4;
}

.cd-top.cd-is-visible,
.cd-top.cd-fade-out,
.no-touch .cd-top:hover {
  -webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
  -moz-transition: opacity 0.3s 0s, visibility 0s 0s;
  transition: opacity 0.3s 0s, visibility 0s 0s;
}

.cd-top.cd-is-visible {
  /* the button becomes visible */
  visibility: visible;
  opacity: 1;
}

.no-touch .cd-top:hover {
  background-color: #b4e602;
}

@media only screen and (min-width: 768px) {
  .cd-top {
    right: 20px;
    bottom: 20px;
  }
}

@media only screen and (min-width: 1024px) {
  .cd-top {
    height: 60px;
    width: 60px;
    right: 30px;
    bottom: 30px;
  }
}

/*====================================================
    8. PRELOADER 
  ====================================================*/
#loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1031;
  background-color: #fff;
  z-index: 999999;
}

#loader-wrapper .loader {
  position: absolute;
  /*Setting position of element according to the next parent element with position anything other then default*/
  top: 50%;
  /*50% down on the parent element*/
  left: 50%;
  /*50% right on the parent element*/
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  /*50% of element width (50px) left, 50% of element height (50px) up*/
  width: 100px;
  /*Element is 100px wide*/
  height: 100px;
  /*Element is 100px tall*/
  animation: spin 0.6s linear infinite reverse;
  /*
      Animation is using the spin keyframes
      Animation is 0.8 seconds long
      Aniamtion tweening/easing is linear (no acceleration)
      The animation loops forever
      The animation goes the opposite way than defines
      */
}

#loader-wrapper .loader .ball {
  position: absolute;
  /*Same deal with centering the element like with .loader, but the parent of .ball is .loader*/
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  height: 100%;
  /*Height is 100% of the parent not 100% of the screen height (that's 100vh)*/
  -webkit-animation: spin 1s infinite ease-in-out;
  animation: spin 1s infinite ease-in-out;
  /*
      Animation is using the spin keyframes (in the way it is defines)
      Animation is 1 second long
      Animation loops forever
      Animation tweening/easing is ease-in-out, which has symetrical acceleration at the start as at the end
      */
  /*Here I am using the selector `:nth-child(n)` to select certain elements*/
}

#loader-wrapper .loader .ball:after {
  /*Pseudo-class, there is also :before*/
  position: absolute;
  /*Pseudoclasses for use as shapes need to be position absolute*/
  content: "";
  /*And content defined (Add some text into it)*/
  background-color: #0e377b;
  /*SCSS variable using the white from line 8*/
  width: 5px;
  /*Width 5 pixels*/
  height: 5px;
  /*Height 5 pixels*/
  border-radius: 100%;
  /*Corners will be rounded into an oval*/
  top: 0px;
  /*Put this element at the top of the parent*/
}

#loader-wrapper .loader .ball:nth-child(1) {
  /*The first .ball in the parent*/
  -webkit-animation-delay: -0s;
  animation-delay: -0s;
}

#loader-wrapper .loader .ball:nth-child(2) {
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
  /*Start the animation 0.1s before*/
}

#loader-wrapper .loader .ball:nth-child(3) {
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
  /*Start the animation 0.2s before*/
}

#loader-wrapper .loader .ball:nth-child(4) {
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}

#loader-wrapper .loader .ball:nth-child(5) {
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}

#loader-wrapper .loader .ball:nth-child(6) {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}

#loader-wrapper .loader .ball:nth-child(7) {
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}

#loader-wrapper .loader .ball:nth-child(8) {
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}

#loader-wrapper .loader .ball:nth-child(9) {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

#loader-wrapper .loader .ball:nth-child(10) {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
  /*I am a fan of negative delays*/
}

@-webkit-keyframes spin {
  /*The keyframes for the animation `spin`*/
  0% {
    /*At 0% of the animation whatever elements have these keyframes set as an animation will have these properties*/
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
    transform: translate(-50%, -50%) rotate(0deg);
  }

  /*The balls do not change colour because the animation is set to their parent and not themselves*/
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes spin {
  /*The keyframes for the animation `spin`*/
  0% {
    /*At 0% of the animation whatever elements have these keyframes set as an animation will have these properties*/
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
    transform: translate(-50%, -50%) rotate(0deg);
  }

  /*The balls do not change colour because the animation is set to their parent and not themselves*/
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/*====================================================
    9. FILTER GALLERY.
  ====================================================*/
/** {-webkit-transform-origin:center!important;transform-origin:center!important;}*/

.filter-container {
  width: 100%;
  margin: 0 auto;
  text-align: right;
}

.filter {
  padding: 0;
  list-style: none;
}

.filter li {
  font-size: 15px;
  font-family: "Poppins", sans-serif;
  display: inline-block;
  text-transform: uppercase;
  cursor: pointer;
  line-height: 2;
  padding: 0 10px;
  position: relative;
  color: #999999;
  font-weight: 500;
}

.filter li.active {
  color: #262626;
}

#kehl-grid {
  position: relative;
  text-align: center;
  margin: 0 auto;
  padding: 0;
  width: 100%;
  /* 	max-width:1920px; */
}

#kehl-grid:after {
  content: "";
  display: block;
  clear: both;
}

.grid-box {
  position: relative;
  float: left;
  display: inline-block;
  overflow: hidden;
  width: calc(100% / 3);
  margin: 0;
  padding: 5px;
  /* 	 box-sizing: border-box;
	-webkit-transform: translate3d(1px,0,0);
	transform: translate3d(1px,0,0); */
  clear: both;
}

#kehl-grid h3 {
  color: #262626;
  font-family: "Open Sans", sans-serif;
  font-weight: 800;
  font-size: 15px;
  line-height: 25px;
  letter-spacing: 4px;
  text-transform: uppercase;
}

#kehl-grid p {
  color: #333;
  z-index: 4;
  font-size: 12px;
  letter-spacing: 3px;
  font-family: "Playfair Display", serif;
  font-weight: 400;
}

/* clear fix */
.grid:after {
  content: "";
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */

.grid-sizer,
.grid-box {
  width: 33.333%;
}

.grid-box {
  float: left;
}

.grid-box img {
  display: block;
  width: 100%;
}

.grid-box .image-mask {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(256, 256, 256, 0);
  z-index: 2;
  transition: all 300ms linear;
}

.grid-box:hover .image-mask {
  background: rgba(256, 256, 256, 0.8);
}

.grid-box h3 {
  position: absolute;
  width: 100%;
  bottom: 30%;
  left: 0;
  margin-bottom: -16px;
  line-height: 26px;
  text-align: center;
  z-index: 4;
  opacity: 0;
  transition: all 300ms linear;
}

.grid-box:hover h3 {
  bottom: 50%;
  opacity: 1;
}

.grid-box p {
  position: absolute;
  top: 15px;
  left: 25px;
  opacity: 0;
  font-style: italic;
  line-height: 18px;
  transition: all 300ms linear;
}

.grid-box:hover p {
  top: 60px;
  left: 25px;
  opacity: 0;
}

/*====================================================
    10. MAGNIFIC POPUP.
  ====================================================*/
.magnific-img {
  width: 100%;
  height: 100%;
}

.magnific-img img {
  width: 100%;
  height: 100%;
  border-radius: 0px;
}

.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
  opacity: 0;
  -webkit-backface-visibility: hidden;
  /* ideally, transition speed should match zoom duration */
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.mfp-with-zoom.mfp-ready .mfp-container {
  opacity: 1;
}

.mfp-with-zoom.mfp-ready.mfp-bg {
  opacity: 0.8;
}

.mfp-with-zoom.mfp-removing .mfp-container,
.mfp-with-zoom.mfp-removing.mfp-bg {
  opacity: 0;
}

.mfp-arrow-left:before {
  border-right: none !important;
}

.mfp-arrow-right:before {
  border-left: none !important;
}

button.mfp-arrow,
.mfp-counter {
  opacity: 0 !important;
  transition: opacity 200ms ease-in, opacity 2000ms ease-out;
}

.mfp-container:hover button.mfp-arrow,
.mfp-container:hover .mfp-counter {
  opacity: 1 !important;
}

/* Magnific Popup CSS */
.mfp-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1042;
  overflow: hidden;
  position: fixed;
  background: #0b0b0b;
  opacity: 0.9;
}

.mfp-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1043;
  position: fixed;
  outline: none !important;
  -webkit-backface-visibility: hidden;
}

.mfp-container {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 0 8px;
  box-sizing: border-box;
}

.mfp-container:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.mfp-align-top .mfp-container:before {
  display: none;
}

.mfp-content {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  text-align: left;
  z-index: 1045;
}

.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
  width: 100%;
  cursor: auto;
}

.mfp-ajax-cur {
  cursor: progress;
}

.mfp-zoom-out-cur,
.mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  cursor: -moz-zoom-out;
  cursor: -webkit-zoom-out;
  cursor: zoom-out;
}

.mfp-zoom {
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in;
}

.mfp-auto-cursor .mfp-content {
  cursor: auto;
}

.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.mfp-loading.mfp-figure {
  display: none;
}

.mfp-hide {
  display: none !important;
}

.mfp-preloader {
  color: #ccc;
  position: absolute;
  top: 50%;
  width: auto;
  text-align: center;
  margin-top: -0.8em;
  left: 8px;
  right: 8px;
  z-index: 1044;
}

.mfp-preloader a {
  color: #ccc;
}

.mfp-preloader a:hover {
  color: #fff;
}

.mfp-s-ready .mfp-preloader {
  display: none;
}

.mfp-s-error .mfp-content {
  display: none;
}

button.mfp-close,
button.mfp-arrow {
  overflow: visible;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  display: block;
  outline: none;
  padding: 0;
  z-index: 1046;
  box-shadow: none;
  touch-action: manipulation;
}

button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

.mfp-close {
  width: 44px;
  height: 44px;
  line-height: 44px;
  position: absolute;
  right: 0;
  top: 0;
  text-decoration: none;
  text-align: center;
  opacity: 0.65;
  padding: 0 0 18px 10px;
  color: #fff;
  font-style: normal;
  font-size: 28px;
  font-family: "Poppins", sans-serif;
}

.mfp-close:hover,
.mfp-close:focus {
  opacity: 1;
}

.mfp-close:active {
  top: 1px;
}

.mfp-close-btn-in .mfp-close {
  color: #333;
}

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
  color: #fff;
  right: -6px;
  text-align: right;
  padding-right: 6px;
  width: 100%;
}

.mfp-counter {
  position: absolute;
  top: 0;
  right: 0;
  color: #ccc;
  font-size: 14px;
  line-height: 18px;
  white-space: nowrap;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
}

.mfp-arrow {
  position: absolute;
  opacity: 0.65;
  margin: 0;
  top: 50%;
  margin-top: -55px;
  padding: 0;
  width: 90px;
  height: 110px;
  -webkit-tap-highlight-color: transparent;
}

.mfp-arrow:active {
  margin-top: -54px;
}

.mfp-arrow:hover,
.mfp-arrow:focus {
  opacity: 1;
}

.mfp-arrow:before,
.mfp-arrow:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 0;
  top: 0;
  margin-top: 35px;
  margin-left: 35px;
  border: medium inset transparent;
}

.mfp-arrow:after {
  border-top-width: 13px;
  border-bottom-width: 13px;
  top: 8px;
}

.mfp-arrow:before {
  border-top-width: 21px;
  border-bottom-width: 21px;
  opacity: 0.7;
}

.mfp-arrow-left {
  left: 0;
}

.mfp-arrow-left:after {
  border-right: 17px solid #fff;
  margin-left: 31px;
}

.mfp-arrow-left:before {
  margin-left: 25px;
  border-right: 27px solid #3f3f3f;
}

.mfp-arrow-right {
  right: 0;
}

.mfp-arrow-right:after {
  border-left: 17px solid #fff;
  margin-left: 39px;
}

.mfp-arrow-right:before {
  border-left: 27px solid #3f3f3f;
}

.mfp-iframe-holder {
  padding-top: 40px;
  padding-bottom: 40px;
}

.mfp-iframe-holder .mfp-content {
  line-height: 0;
  width: 100%;
  max-width: 900px;
}

.mfp-iframe-holder .mfp-close {
  top: -40px;
}

.mfp-iframe-scaler {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 56.25%;
}

.mfp-iframe-scaler iframe {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #000;
}

/* Main image in popup */
img.mfp-img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  line-height: 0;
  box-sizing: border-box;
  padding: 40px 0 40px;
  margin: 0 auto;
}

/* The shadow behind the image */
.mfp-figure {
  line-height: 0;
}

.mfp-figure:after {
  content: "";
  position: absolute;
  left: 0;
  top: 40px;
  bottom: 40px;
  display: block;
  right: 0;
  width: auto;
  height: auto;
  z-index: -1;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #444;
}

.mfp-figure small {
  color: #bdbdbd;
  display: block;
  font-size: 12px;
  line-height: 14px;
}

.mfp-figure figure {
  margin: 0;
}

.mfp-bottom-bar {
  margin-top: -36px;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  cursor: auto;
}

.mfp-title {
  text-align: left;
  line-height: 18px;
  color: #f3f3f3;
  word-wrap: break-word;
  padding-right: 36px;
}

.mfp-image-holder .mfp-content {
  max-width: 100%;
}

.mfp-gallery .mfp-image-holder .mfp-figure {
  cursor: pointer;
}

@media screen and (max-width: 800px) and (orientation: landscape),
  screen and (max-height: 300px) {
  /**
       * Remove all paddings around the image on small screen
       */
  .mfp-img-mobile .mfp-image-holder {
    padding-left: 0;
    padding-right: 0;
  }

  .mfp-img-mobile img.mfp-img {
    padding: 0;
  }

  .mfp-img-mobile .mfp-figure:after {
    top: 0;
    bottom: 0;
  }

  .mfp-img-mobile .mfp-figure small {
    display: inline;
    margin-left: 5px;
  }

  .mfp-img-mobile .mfp-bottom-bar {
    background: rgba(0, 0, 0, 0.6);
    bottom: 0;
    margin: 0;
    top: auto;
    padding: 3px 5px;
    position: fixed;
    box-sizing: border-box;
  }

  .mfp-img-mobile .mfp-bottom-bar:empty {
    padding: 0;
  }

  .mfp-img-mobile .mfp-counter {
    right: 5px;
    top: 3px;
  }

  .mfp-img-mobile .mfp-close {
    top: 0;
    right: 0;
    width: 35px;
    height: 35px;
    line-height: 35px;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    text-align: center;
    padding: 0;
  }
}

@media all and (max-width: 900px) {
  .mfp-arrow {
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
  }

  .mfp-arrow-left {
    -webkit-transform-origin: 0;
    transform-origin: 0;
  }

  .mfp-arrow-right {
    -webkit-transform-origin: 100%;
    transform-origin: 100%;
  }

  .mfp-container {
    padding-left: 6px;
    padding-right: 6px;
  }
}

.magnific-img .image-popup-vertical-fit img a:link {
  text-decoration: none;
  border: solid 2px #000;
}

.magnific-img .image-popup-vertical-fit img a:visited {
  text-decoration: none;
  border: solid 2px #000;
}

.magnific-img .image-popup-vertical-fit img a:hover {
  text-decoration: none;
  border: solid 2px #000;
}

.magnific-img .image-popup-vertical-fit img a:active {
  text-decoration: none;
  color: #000;
  border: solid 2px #000;
}

.mfp-figure button.mfp-close {
  cursor: pointer;
}

.popup-gallery a {
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in;
}

.mfp-figure figure {
  cursor: -webkit-zoom-out;
  cursor: -moz-zoom-out;
  cursor: zoom-out;
}

/*====================================================
    11. YOUTUBE POPUP.
  ====================================================*/
.popup-youtube .video-image {
  position: relative;
  display: inline-block;
}

.popup-youtube .video-image img {
  width: 100%;
}

.popup-youtube .video-image:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 10;
  background: transparent url(../img/master/play-button.html) center center
    no-repeat;
}

.popup-youtube .video-image img a:link {
  text-decoration: none;
  color: #fff;
}

.popup-youtube .video-image img a:visited {
  text-decoration: none;
  color: #fff;
}

.popup-youtube .video-image img a:hover {
  text-decoration: none;
  color: #fff;
}

.popup-youtube .video-image img a:active {
  text-decoration: none;
  color: #fff;
}

/*====================================================
    12. MODAL POPUP.
  ====================================================*/
.modal-box {
  text-align: center;
}

.modal-box p {
  margin: 15px 0px 15px 0px;
}

.modal-sm .modal-content {
  background: #fff;
  border: 1px solid #ddd;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  padding: 10px 20px 10px 20px;
}

.close {
  color: #000;
}

@media (min-width: 992px) {
  .modal-md {
    width: 600px;
  }
}

/*====================================================
    13. PULSE BUTTON EFFECTS.
  ====================================================*/
.pulse-button {
  width: 60px;
  height: 60px;
  border: none;
  box-shadow: 0 0 0 0 rgba(255, 166, 0, 0.7);
  border-radius: 50%;
  cursor: pointer;
  -webkit-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -moz-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -ms-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  background: transparent url(../img/master/play-arrow.html) center center
    no-repeat;
  background-color: #ffa600;
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.pulse-button:hover {
  -webkit-animation: none;
  -moz-animation: none;
  -ms-animation: none;
  animation: none;
}

@-webkit-keyframes pulse {
  to {
    box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);
  }
}

@-moz-keyframes pulse {
  to {
    box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);
  }
}

@-ms-keyframes pulse {
  to {
    box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);
  }
}

@keyframes pulse {
  to {
    box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);
  }
}

.organic-pulsing-video .popup-youtube .video-image:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 10;
  background: none;
}

.youtube-popup {
  position: relative;
}

.video-image img {
  width: 100%;
}