/*==================================================*/
/* [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
*/

/*====================================================
    1. RESET. 
  ====================================================*/

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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: #FFF;
}

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;
}



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 {
  background-image: url("../img/images/logistic3.jpg");
  height: 500px;
  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: #0b3e95;
  text-decoration: none;
}

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

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

.section-title h2:after {
  background: #0b3e95;
  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.90rem;
  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.90rem;
  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: #007bff 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 .3s 0s, visibility 0s 0s;
  -moz-transition: opacity .3s 0s, visibility 0s 0s;
  transition: opacity .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: #0b3e95;
}

@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 .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, .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.png) 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, .2);
  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
  box-shadow: 0 3px 9px rgba(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.png) 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%
}




.header-language.style-1 { display: none; margin-left: 0; margin-right: 0; position: absolute; top: 37px; right: 10px; }

@media (max-width: 1199px) { .header-language.style-1 { display: block; } .header-language { margin-left: 20px; margin-right: 0; margin-top: 13px; } }

@media (max-width: 1400px) { .header-language.style-1 { display: block; } .header-language { margin-left: 20px; margin-right: 0; margin-top: 13px; } }

@media (max-width: 1920px) { .header-language.style-1 { display: block; } .header-language { margin-left: 20px; margin-right: 0; margin-top: 13px; } }

@media (max-width: 479px) { .header-language.style-1 a { width: 30px; height: 30px; font-size: 13px; }
  .header-language.style-1 a:not(:last-child) { margin-right: 3px; } .header-language { margin-left: 0; margin-right: 0; margin-top: 17px; margin-bottom: 17px;} }

.header-language a { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; width: 30px; height: 30px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border: 2px solid #fff; border-radius: 5px; color: #fff; font-size: 13px; font-weight: 600; -webkit-transition: .3s; transition: .3s; }

.header-language a:not(:last-child) { margin-right: 8px; }

.header-language a:hover { background: #0b3e95 !important; color: #ffffff !important; border: 2px solid #0b3e95 !important; }



.blog-box-layout2 {
    background-color: #ece6e624;
    border-radius: 4px;
    box-shadow: 0 5px 35px rgb(0 0 0 / 10%);
    margin-bottom: 3rem;
}


.blog-box-layout2:hover {
	
box-shadow: 0 5px 35px rgb(0 0 0 / 20%);
	
	
}

.blog-box-layout2 .item-img {
    overflow: hidden;
}

.kapak {
    height: 290px;
    background-size: cover;
    transition: all 0.2s ease 0s;
}

.kapak:hover {
    opacity: 0.9;
	

}


.blog-box-layout2 .item-content {
    padding: 25px 30px;
}

.blog-box-layout2 .item-content .item-title {
    font-weight: 500;
    margin-bottom: 12px;
    min-height: 60px;
	text-align: center;
}

.blog-box-layout2 .item-content .item-title a {
    color: #212529;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
	font-weight: 600;
    font-size: 22px;
}

.blog-box-layout2 .item-content .entry-info ul li:last-child {
    margin-right: 0;
}
.blog-box-layout2 .item-content .entry-info ul li {
    font-size: 15px;
    color: #646464;
    margin-bottom: 12px;
       font-weight: 600;
	text-align: center;
}



.blog-box-layout2 .item-content .entry-info ul li i {
    color: #3285f9;
    margin-right: 10px;
}

.blog-box-layout2 .item-content .entry-meta {
    border-top: 1px solid #ebebeb;
    padding-top: 12px;
}

.blog-box-layout2 .item-content .entry-meta ul {
    display: flex;
    justify-content: space-between;
}

.blog-box-layout2 .item-content .entry-meta ul li {
    font-size: 15px;
}

.blog-box-layout2 .item-content .entry-meta ul li i {
    color: #a5a5a5;
    margin-right: 10px;
}

.blog-box-layout2 .item-content .entry-meta ul li span {
    color: #111111;
    font-weight: 500;
	margin-left: 10px;
}

.blog-box-layout2 .item-content .entry-meta ul li i {
    color: #a5a5a5;
    margin-right: 10px;
}


.habericerik {
   margin: 0 0 2rem 0;
    color: #646464;
    font-family: "Cerebri Sans", sans-serif;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; 
    overflow:hidden;

}


/* =====================================
    3. FOOTER.
===================================== */
footer {
  background: #09192A;
  padding: 70px 0px 30px;
}

.fc-circle {
  background:#005eff;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  position: relative;
  margin: auto;
}

.fc-circle .fas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #FFF;
  font-size: 25px;
}

.fc-circle .far {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #FFF;
  font-size: 25px;
}

.fc-caption a {
  font-weight: 500;
  color: #FFF;
  text-align: center !important;
}

.fc-caption a:hover {
  color: #005eff;
}

.fc-caption h5 {
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  color: #FFF;
  margin-top: 15px;
}

hr.footer-divider {
      border-top: 1px solid #0b3e951f;
  margin: 60px 0px 50px;
}

.footer-logo {
  width: 220px;
  margin-bottom: 25px;
}

.footer-caption p {
  color: #FFF;
  font-size: 14px;
  line-height: 24px;
  font-weight: 400;
}

.footer-social {
  margin-top: 30px;
  margin-left: 30px;
}


.footer-social ul li {
  display: inline-block;
  margin-right: 10px;
  color: #FFF;
 background-color: rgb(0 94 255);
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  border-radius: 50%;
  -webkit-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  -ms-transition: all 0.3s ease-in-out 0s;
  -o-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

.footer-social ul li:hover {
  background-color: #0b3e95;
}

.footer-social ul li:hover .fab {
  color: #FFF;
}

ul.footer-bulletlist li {
  color: #FFF;
  list-style: none;
  font-size: 14px;
  font-family: 'Open Sans', sans-serif;
  line-height: 30px;
  font-weight: 400;
}

ul.footer-bulletlist li a {
  color: #FFF;
  transition: 0.4s;
}

ul.footer-bulletlist li a:hover {
  color: #005eff;
  text-decoration: none;
}

.fooler-left-col {
  padding-right: 50px;
}

.footer-col h5 {
    font-weight: 600;
    font-size: 19px;
    color: #ffffff;
    margin-bottom: 20px;
    TEXT-TRANSFORM: uppercase;
}








@import url(bootstrap.min.css);











/* FOOTER ANİMASYON */
.footerAnimasyon div {padding:0; margin:0;}
.footerYol {
	position:relative;
	width:100%;
	height:300px;
	background:url("../images/tir-animasyon/footer-yol.jpg") repeat-x center;
	animation: yolAnimasyon 20s linear infinite;
	-moz-animation: yolAnimasyon 20s linear infinite;
	-webkit-animation: yolAnimasyon 20s linear infinite;
}
.footerYol:after {
	content:'';
	position:absolute;
	width:100%;
	height:100%;
	z-index:1;
	top:0;
	left:0;
	
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,0+100;White+to+Transparent */
	background: -moz-linear-gradient(top, rgba(255,255,255,1) 40%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(255,255,255,1) 40%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(255,255,255,1) 40%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
}
.tekerliTir {
	position:absolute;
	width:743px;
	height:282px;
	left:0;
	bottom:0px;
	z-index:4;
	background:url('../images/tir-animasyon/tir.png') no-repeat;
	background-size:contain;
	
	animation: tirHareket 5s linear infinite;
	-moz-animation: tirHareket 5s linear infinite;
	-webkit-animation: tirHareket 5s linear infinite;
}
.onTeker {
    FONT-WEIGHT: 500;
    position: absolute;
    width: 67px;
    height: 67px;
    top: 187px;
    left: 601px;
    z-index: 4;
    background: url(../images/tir-animasyon/on-teker.png) no-repeat;
    animation: spin 0.5s 
linear infinite;
    -moz-animation: spin 0.5s linear infinite;
    -webkit-animation: spin 0.7s 
linear infinite;
}
.arkaTeker {
    position: absolute;
    width: 70px;
    height: 70px;
    top: 185px;
    left: 153px;
    z-index: 4;
    background: url(../images/tir-animasyon/arka-teker.png) no-repeat;
    background-size: contain;
    animation: spin 0.5s 
linear infinite;
    -moz-animation: spin 0.5s linear infinite;
    -webkit-animation: spin 0.5s 
linear infinite;

	
	animation: spin 0.5s linear infinite;
	-moz-animation: spin 0.5s linear infinite;
	-webkit-animation: spin 0.5s linear infinite;
}
.sehirAnimasyon {
	animation: footerSehirler 6s infinite ease-in-out;
	-moz-animation: footerSehirler 6s infinite ease-in-out;
	-webkit-animation: footerSehirler 6s infinite ease-in-out;
}
.sehirAntalya {
	position:absolute;
	width:496px;
	height:100px;
	right:0;
	bottom:70px;
	z-index:2;
	opacity:0;
	background:url('../images/tir-animasyon/mardin.png') no-repeat right;
	background-size:contain;
}
.sehirBolu {
	position:absolute;
	width:496px;
	height:100px;
	right:0;
	bottom:70px;
	z-index:2;
	opacity:0;
	background:url('../images/tir-animasyon/fransa.png') no-repeat right;
	background-size:contain;
}
.sehirGiresun {
	position:absolute;
	width:496px;
	height:100px;
	right:0;
	bottom:70px;
	z-index:2;
	opacity:0;
	background:url('../images/tir-animasyon/almanya.png') no-repeat right;
	background-size:contain;
}




.footerLine {
	position:absolute;
	width:100%;
	height:300px;
	left:0;
	bottom:0;
	z-index:5;
	opacity:0.4;
	background:url('../images/tir-animasyon/footer-animasyon-line.png') repeat-x center;
	animation: footerLine 1s linear infinite;
	-moz-animation: footerLine 1s linear infinite;
	-webkit-animation: footerLine 1s linear infinite;
}




@media only screen and (max-width: 767px) {
	.tekerliTir {
		position:absolute;
		width:409px;
		height:155px;
		left:0;
		bottom:25px;
		z-index:2;
		background:url('../images/tir-animasyon/tir.png') no-repeat;
		background-size:contain;
		animation: tirHareket 5s linear infinite;
		-moz-animation: tirHareket 5s linear infinite;
		-webkit-animation: tirHareket 5s linear infinite;
	}
	.onTeker {
		position:absolute;
		width:34px;
		height:34px;
		top:105px;
		left:330px;
		z-index:2;
		background:url('../images/tir-animasyon/on-teker.png') no-repeat;
		background-size:contain;
		
		animation: spin 0.5s linear infinite;
		-moz-animation: spin 0.5s linear infinite;
		-webkit-animation: spin 0.5s linear infinite;
	}
	.arkaTeker {
		position:absolute;
		width:37px;
		height:37px;
		top:105px;
		        left: 85px;
		z-index:2;
		background:url('../images/tir-animasyon/arka-teker.png') no-repeat;
		background-size:contain;
		
		animation: spin 0.5s linear infinite;
		-moz-animation: spin 0.5s linear infinite;
		-webkit-animation: spin 0.5s linear infinite;
	}
}



/* RÜZGAR HAREKETİ */
@-moz-keyframes footerLine {
	from{background-position:0;}
	to{background-position:-2000px;}
}
@-webkit-keyframes footerLine {
	from{background-position:0;}
	to{background-position:-2000px;}
}
@keyframes footerLine {
	from{background-position:0;}
	to{background-position:-2000px;}
}



/* ŞEHİRLER */
@-moz-keyframes footerSehirler {
	0%{height:100px; right:0; opacity:0;}
	25%{right:10%; opacity:1; height:250px;}
	60%{right:30%; opacity:1; height:250px;}
	70%{height:100px; right:100%; opacity:0;}
	100%{height:100px; right:0; opacity:0;}
}
@-webkit-keyframes footerSehirler {
	0%{height:100px; right:0; opacity:0;}
	25%{right:10%; opacity:1; height:250px;}
	60%{right:30%; opacity:1; height:250px;}
	70%{height:100px; right:100%; opacity:0;}
	100%{height:100px; right:0; opacity:0;}
}
@keyframes footerSehirler {
	0%{height:100px; right:0; opacity:0;}
	25%{right:10%; opacity:1; height:250px;}
	60%{right:30%; opacity:1; height:250px;}
	70%{height:100px; right:100%; opacity:0;}
	100%{height:100px; right:0; opacity:0;}
}



/* YOL HAREKETİ */
@-moz-keyframes yolAnimasyon {
	from{background-position:0;}
	to{background-position:-10000px;}
}
@-webkit-keyframes yolAnimasyon {
	from{background-position:0;}
	to{background-position:-10000px;}
}
@keyframes yolAnimasyon {
	from{background-position:0;}
	to{background-position:-10000px;}
}

/* TIR HAREKETİ */
@-moz-keyframes tirHareket {
	from{left:0;}
	50%{left:-50px;}
	to{left:0;}
}
@-webkit-keyframes tirHareket {
	from{left:0;}
	50%{left:-50px;}
	to{left:0;}
}
@keyframes tirHareket {
	from{left:0;}
	50%{left:-50px;}
	to{left:0;}
}

/* SPIN HAREKETİ */
@-moz-keyframes spin {
	from { -moz-transform: rotate(0deg); }
	to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
	from { -webkit-transform: rotate(0deg); }
	to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
	from {transform:rotate(0deg);}
	50% {transform:rotate(180deg);}
	to {transform:rotate(360deg);}
}




p.footer-bootom {
    text-align: center;
    color: #FFF;
    font-size: 13px;
}


.mt-50px {
    margin-top: 50px;
}

.page-content__heading.color-2 {
    color: #7b5d49;
}

.page-content__heading.small {
    font-size: 18px;
    letter-spacing: 0;
}

.page-content__heading {
    color: #333;
    font-weight: 800;
    font-size: 20px;
    letter-spacing: -0.7px;
    padding-bottom: 10px;
}

.common-list ul li {
    margin-bottom: 5px;
}

.common-list ul li a {
    background: #fff;
    border-radius: 10px;
    -webkit-box-shadow: 0 5px 35px rgb(0 0 0 / 10%);
    box-shadow: 0 5px 35px rgb(0 0 0 / 10%);
    padding: 20px 40px;
    display: block;
    position: relative;
    -webkit-transition: .3s;
    transition: .3s;
}

.common-list .date {
    font-size: 13px;
    color: #999;
    margin-bottom: 5px;
}

.date {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #666;
    font-size: 14px;
    margin-top: 20px;
}


@media (min-width: 1200px) {
.common-list.large .title {
    padding-right: 150px;
}
	
	}
.common-list.large .title {
    font-size: 18px;
}
.common-list .title {
    color: #333;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    overflow: hidden;
    max-height: 45px;
    padding-right: 25px;
    max-height: 49px;
    -webkit-transition: .3s;
    transition: .3s;
}

.common-list.large .icon {
    right: 40px;
}
.common-list .icon {
    position: absolute;
    top: 50%;
    right: 30px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    color: rgba(153, 153, 153, 0.5);
    font-size: 16px;
    -webkit-transition: .3s;
    transition: .3s;
}

ul {
    list-style: outside none none;

}

.common-list ul li a:hover .title { color: #0e377b; }

.common-list.large .title { font-size: 18px; }

@media (min-width: 1200px) { .common-list.large .title { padding-right: 150px; } }

.common-list.large .icon { right: 40px; }

@media (max-width: 479px) { .common-list.large .icon { right: 25px; } }

.common-list ul li:not(:last-child) { margin-bottom: 5px; }

.common-list ul li a { background: #fff; border-radius: 10px; -webkit-box-shadow: 0 5px 35px rgba(0, 0, 0, 0.1); box-shadow: 0 5px 35px rgba(0, 0, 0, 0.1); padding: 20px 40px; display: block; position: relative; -webkit-transition: .3s; transition: .3s; }

@media (max-width: 479px) { .common-list ul li a { padding: 20px 25px; } }

.common-list ul li a:hover { -webkit-box-shadow: 0 5px 35px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 35px rgba(0, 0, 0, 0.2); }

.common-list ul li a:hover .title { color: #0e377b; }

.common-list ul li a:hover .icon { -webkit-transform: translateY(-50%) translateX(5px) scale(1.1); transform: translateY(-50%) translateX(5px) scale(1.1); color: rgba(153, 153, 153, 0.8); }

.common-list .title { color: #333; font-size: 16px; font-weight: 700; line-height: 1.4; overflow: hidden; max-height: 45px; padding-right: 25px; max-height: 49px; -webkit-transition: .3s; transition: .3s; }

.common-list .date { font-size: 13px; color: #999; margin-bottom: 5px; }

.common-list .icon { position: absolute; top: 50%; right: 30px; -webkit-transform: translateY(-50%); transform: translateY(-50%); color: rgba(153, 153, 153, 0.5); font-size: 16px; -webkit-transition: .3s; transition: .3s; }


#videolar:before {
  /* content: ''; */
  position: Absolute;
  right: 0;
  bottom: 0;
  left: 0;
  top: 0;

}

#videolar h3 {
  color: #333;
  display: inline-block;
  padding-bottom: 5px;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 25px
}

#videolar .vg {

  padding: 30px 7px !important;
  float: left;
  width: 100%;
}

#videolar .fg {
  padding: 30px 0
}

#videolar .popup-youtube {
  width: 100%;
  float: left;
  position: relative;
  overflow: hidden;
  border-radius: 7px;
  display: block;
  height: 220px;
}

#videolar .popup-youtube:hover {
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.25)
}

#videolar .popup-youtube span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 400px;
  padding: 10px 10px 10px 15px;
  color: #fff;
  background: rgba(0, 0, 0, 0.7);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.8);
  font-weight: 600;
  font-size: 12px ;
  text-transform: uppercase;
}

#videolar .popup-youtube.video:after {

  
}

#videolar .popup-youtube.video:hover:after {
  box-shadow: 0 0 95px rgba(0, 0, 0, 0.80)
}



#videolar .popup-youtube.video:after  {
    color: #047e59 !important;
}


.help-desc-box {
    background-color: #010038;
    padding: 32px 33px 39px 33px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 10px;
    color: #fff;
    margin-bottom: 40px;
    margin-top: 40px;
	box-shadow: 0 5px 35px rgb(0 0 0 / 10%);
	font-family: 'Roboto', sans-serif;
}

@media only screen and (min-width:768px) and (max-width:991px) {
    .help-desc-box {
        text-align: center
    }
}

@media only screen and (min-width:480px) and (max-width:767px) {
    .help-desc-box {
        text-align: center
    }
}

@media only screen and (min-width:320px) and (max-width:479px) {
    .help-desc-box {
        text-align: center
    }

.habericerik {
    margin: 0 0 2rem 0;
    color: #646464;
    font-family: "Cerebri Sans", sans-serif;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 42px;
}
	.sehirGiresun{
		
	display: none;
		
	}
	.sehirBolu{
		
		display: none;
		
	}
	
	.sehirAntalya {
		display: none;
	}


.mb-60px {
    margin-bottom: 60px;
    margin-top: 320px;
}
}

.help-desc-box .help__title {
    font-size: 25px;
    font-weight: 600;
    margin-bottom: 26px
}

.help-desc-box .help__desc {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 40px
}

.help-desc-box .theme-button {
    background-color: #fff;
    color: #233d63}

.help-desc-box .theme-button:hover {
    background-color: #0b3e95;
    color: #fff
}

.help-desc-box .theme-button {
    background-color: #fff;
    color: #233d63;
}
.theme-button {
    font-weight: bold;
    font-size: 16px;
    color: #fff;
    line-height: 40px;
    padding-left: 15px;
    padding-right: 30px;
    background-color: #233d63;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    text-transform: capitalize;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    -webkit-box-shadow: 0 0 40px rgb(82 85 90 / 10%);
    -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
    box-shadow: 0 0 40px rgb(82 85 90 / 10%);
    position: relative;
    display: inline-block;
    border: 0;
    z-index: 0;
}