/* --------------------------------------
=========================================
LandX - Responsive App Landing Page
Version: 1.0 (Initial Release)
Designed By: Mizanur Rahman
=========================================



1. IMPORT CSS

2. GLOBAL STYLES (USED IN VARIOUS SECTION OF THE WEBSITE)
	2.1 GENERAL STYLES
	2.2 PRE LOADER
	2.3 ANCHOR AND BOLD TEXT  

3. COMPONENTS (ELEMNTS USED IN MANY SECTION)
	3.1 BACKGROUND COLORS AND LINE
	3.2 TYPOGRAPHY
	3.3 BUTTONS

4. SECTION STYLES AND COMPONENTS
	4.1 SECTIONS PADDING AND COLOR OVERLAY

	4.2 SECTION: HOME
		4.2.1 BASIC STYLES
		4.2.2 NAVIGATION 
		4.2.3 FEATURE LIST 
		4.2.4 VERTICAL REGISTRATION FORM

	4.3 SECTION: WITH LEFT / RIGHT SCREENSHOT
		4.3.1 BASIC STYLES   
		4.3.2 FEATURE LIST    

	4.4 SECTION: FEATURES 

	4.5 SECTION: PRICING TABLE 

	4.6 SECTION: VIDEO   
		4.6.1 BASIC STYLE / RESET
		4.6.2 VIDEO FEATURES 

	4.7 SECTION: SCREENSHOTS 
	
	4.8 SECTION: CLIENTS AND FEEDBACKS
		4.8.1 CLIENTS LOGO 
		4.8.2 FEEDBACKS

	4.9 SECTION: CALL TO ACTION
		4.9.1 CALL TO ACTION WITH TEXT/BUTTON 
		4.9.2 SUBSCRIBE FORM 

	4.10 SECTION: CONTACT US
		4.10.1 BASIC STYLES
		4.10.2 CONTACT FORM   


	4.11 SECTION: FOOTER   

	4.12 EXTRA ELEMENTS

  4.13 MEDIA QUERIES

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

/*---------------------------------------
   1. IMPORT GOOGLE WEB FONTS                
-----------------------------------------*/

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Raleway:500,600,700);

/* --------------------------------------
=========================================
   2. GLOBAL STYLES
=========================================
-----------------------------------------*/

/*---------------------------------------
   2.1 GENERAL STYLES                
-----------------------------------------*/

html {
  font-size: 100%;
}

body {
  background: #ffffff;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 16px;
  color: #727272;
  line-height: 25px;
  text-align: center;
  overflow-x: hidden !important;
  margin: auto !important;
}

img {
  max-width: 100%;
}

/*---------------------------------------
   2.2 PRE LOADER              
-----------------------------------------*/
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fefefe;
  z-index: 99999;
  height: 100%;
  width: 100%;
  overflow: hidden !important;
}

.status {
  width: 40px;
  height: 40px;
  position: absolute;
  left: 50%;
  top: 50%;
  background-image: url(../images/loading.gif);
  background-repeat: no-repeat;
  background-position: center;
  -webkit-background-size: cover;
  background-size: cover;
  margin: -20px 0 0 -20px;
}

/*---------------------------------------
   2.3 ANCHOR AND BOLD TEXT           
-----------------------------------------*/
a {
  text-decoration: none;
  -webkit-transition: all ease 0.25s;
  transition: all ease 0.25s;
}

a:hover {
  text-decoration: underline;
}

a:focus {
  outline: inherit;
  color: inherit;
}

strong {
  font-weight: 700;
}

.strong {
  font-weight: 700;
}


/*---------------------------------------
   2.4 MISC FIXES         
-----------------------------------------*/
@-webkit-viewport {
  width: device-width;
}

@-moz-viewport {
  width: device-width;
}

@-ms-viewport {
  width: device-width;
}

@-o-viewport {
  width: device-width;
}

@viewport {
  width: device-width;
}

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

ul,
ol {
  padding-left: 0 !important;
}

li {
  list-style: none;
}

/* --------------------------------------
=========================================
   3. COMPONENTS 
=========================================
-----------------------------------------*/

/*---------------------------------------
   3.1 BACKGROUND COLORS AND LINE               
-----------------------------------------*/

.dark-bg {
  background: #323232;
  color: #ffffff;
}

.color-bg {
  color: #ffffff;
}

.bgcolor-2 {
  background: #f7f8fa;
}

.bgcolor-white {
  background: #ffffff;
}

.colored-line {
  height: 2px;
  width: 70px;
  margin: auto;
  margin-top: 10px;
  margin-bottom: 10px;
}


/*---------------------------------------
   3.2 TYPOGRAPHY               
-----------------------------------------*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Raleway', sans-serif;
  color: #323232;
  margin-bottom: 0;
  margin-top: 0;
}

h1 {
  font-size: 2.813rem;
  line-height: 3.75rem;
  font-weight: 500;
}

h2 {
  font-size: 2.188rem;
  line-height: 3.125rem;
  font-weight: 500;
}

h3 {
  font-size: 1.5rem;
  line-height: 2.375rem;
  font-weight: 600;
}

h4 {
  font-size: 1.25rem;
  line-height: 2rem;
  font-weight: 600;
}

h5 {
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
}

h6 {
  font-size: 16px;
  line-height: 25px;
  font-weight: 700;
}


/*---------------------------------------
   3.3 BUTTONS               
-----------------------------------------*/
.btn:focus,
.btn:active,
.btn,
.open .dropdown-toggle.btn {
  outline: inherit;
  border-color: inherit;
}

.standard-button {
  font-family: 'Raleway', sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 3px;
  padding: 15px 30px;
  border: 0;
  margin: 5px;
  line-height: inherit;
  -webkit-transition: all ease 0.25s;
  transition: all ease 0.25s;
}

.secondary-button {
  font-family: 'Raleway', sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 3px;
  padding: 15px 30px;
  border: 0;
  margin: 5px;
  border: 1px solid #727272;
  color: #323232;
  background: #ffffff;
  line-height: inherit;
  -webkit-transition: all ease 0.25s;
  transition: all ease 0.25s;
}

.secondary-button-white {
  font-family: 'Raleway', sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 3px;
  padding: 14px 30px;
  border: 0;
  margin: 5px;
  border: 1px solid #727272;
  color: #ffffff;
  background: transparent;
  line-height: inherit;
  border: 1px solid rgba(255, 255, 255, 0.5) -webkit-transition: all ease 0.25s;
  transition: all ease 0.25s;
}

.secondary-button-white:hover {
  border: 1px solid rgba(255, 255, 255, 1);
  color: #ffffff;
}

/* --------------------------------------
=========================================
   4. SECTION SPECIFIC CSS
=========================================
-----------------------------------------*/

/*---------------------------------------
   4.1 SECTIONS PADDING AND COLOR OVERLAY                
-----------------------------------------*/
.section1,
.section2,
.section3,
.section4,
.section5,
.section6,
.section7,
.section8,
.section9 {
  padding-top: 50px;
  padding-bottom: 50px;
}

.color-overlay {
  background: rgba(0, 0, 0, 0.6);
}


/*========================================
   4.2 SECTION: HOME                
==========================================*/

/*---------------------------------------
   4.2.1 BASIC STYLES               
-----------------------------------------*/

header .vertical-registration-form {
  margin-top: 60px;
}

header .home-screenshot {
  margin-top: 70px;
}

.navigation-header {
  padding-top: 47px;
  padding-bottom: 30px;
}

.intro-section {
  margin-top: 0;
  margin-bottom: 250px;
}


.intro {
  color: #ffffff;
  background-color: #00000096;
  display: inline;
  padding: 5px;
}

.intro-section .sub-heading {
  color: #ffffff;
  margin-top: 20px;
  font-size: 18px;
  line-height: 28px;
}

.button-container {
  margin-top: 25px;
  margin-bottom: 25px;
}

.button-container .standard-button {
  margin-left: 0;
}

.navbar-header img {
  max-height: 26px;
}


/*---------------------------------------
   4.2.2 NAVIGATION                
-----------------------------------------*/
/* NAV RESETS */
.navbar-nav > li > a:hover {
  background: inherit;
}

/* NORMAL NAVIGATION WITH SOCIAL ICON AND LOGO ONLY */
.non-sticky .navbar-nav.navbar-right:last-child {
  margin-right: 0;
}

.non-sticky .navbar-nav > li > a {
  font-size: 25px;
  padding: 0;
  padding-left: 5px;
  padding-top: 3px;
  color: #ffffff;
}


/* STICKY NAVIGATION */
.sticky-navigation {
  min-height: 77px;
  background: #ffffff;
  -webkit-backface-visibility: hidden;
  border: 0;
  -webkit-box-shadow: 0px 2px 8px 0px rgba(50, 50, 50, 0.08);
  box-shadow: 0px 2px 8px 0px rgba(50, 50, 50, 0.08);
}

.sticky-navigation .navbar-header {
  padding-top: 8px;
}

.sticky-navigation .main-navigation {
  padding-top: 13px;
}

.sticky-navigation .main-navigation .current a {
  -webkit-backface-visibility: hidden;
  outline: inherit;
  position: relative;
}

.sticky-navigation .navbar-nav > li > a {
  font-family: 'Raleway', sans-serif;
  font-size: 13px;
  text-transform: uppercase;
  font-weight: 600;
  color: #323232;
}

/* SOCIAL NAVIGATION */
ul.nav.navbar-nav.navbar-right.social-navigation.hidden-xs {
  display: none;
}

/*========================================
   4.3 SECTION WITH LEFT / RIGHT SCREENSHOT             
==========================================*/
/*---------------------------------------
   4.3.1 BASIC STYLES               
-----------------------------------------*/
.side-screenshot,
.side-screenshot2 {
  max-width: 532px;
  border: 10px solid #ffffff;
}

.brief h2 {
  margin-top: 0;
  margin-bottom: 10px;
}

.brief p {
  margin-top: 45px;
}

/*---------------------------------------
   4.3.2 FEATURE LIST               
-----------------------------------------*/

.feature-list-2 {
  margin-top: 25px;
}

.feature-list-2 li {
  overflow: auto;
  padding-top: 0px;
  padding-bottom: 0px;
}

.feature-list-2 li .icon-container {
  width: 22px;
  height: 22px;
  border-radius: 3px;
  color: #ffffff;
  line-height: 22px;
  margin-right: 15px;
  margin-top: 0px;
  text-align: center;
}

.feature-list-2 li .details {
  width: 89%;
}

.feature-list-2 li .details p {
  margin-top: 5px;
}


/*========================================
   4.4 SECTION: FEATURES                
==========================================*/
.features {
  margin-top: 35px;
}

.feature {
  margin-top: 40px;
  margin-bottom: 35px;
}

.feature .icon {
  font-size: 50px;
  margin-bottom: 30px;
}

.feature h4 {
  margin-bottom: 10px;
}

#cars-image {
  max-width: 100%;
}

.details-red {
  color: #f25454;
}

/*========================================
   4.5 SECTION: PRICING TABLE               
==========================================*/
.pricing-table {
  margin-top: 35px;
}

.package {
  overflow: auto;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  margin-top: 40px;
}

.package .header {
  padding: 20px;
}

.package .header h3 {
  color: #ffffff;
}

.package-features .column-9p {
  width: 90%;
  float: left;
  text-align: left;
}

.package-features .column-1p {
  width: 10%;
  float: right;
  text-align: right;
  color: #323232;
}

.package-features .column-7p {
  width: 60%;
  float: left;
  text-align: left;
}

.package-features .column-3p {
  width: 40%;
  float: right;
  text-align: right;
}

.package-features ul li {
  overflow: auto;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-right: 35px;
  padding-left: 35px;
  border-bottom: 1px dotted #e3e3e3;
}

.package-features .bottom-row {
  overflow: auto;
  padding-top: 8px;
  padding-bottom: 17px;
  padding-right: 35px;
  padding-left: 35px;
}

.package-features .bottom-row h6 {
  padding-top: 5px;
}

.package-features .bottom-row .secondary-button,
.package-features .bottom-row .standard-button {
  margin: 0;
  padding: 7px 15px;
  vertical-align: middle;
}


/*========================================
   4.6 SECTION: VIDEO              
==========================================*/
/*---------------------------------------
   4.6.1 BASIC STYLE / RESET         
-----------------------------------------*/
video {
  max-width: 100%;
  height: auto;
}

iframe,
embed,
object {
  max-width: 100%;
}

.video-container {
  width: 100%;
  background: #ffffff !important;
  margin-top: 75px;
}

.video {
  background: #ffffff !important;
}


/*---------------------------------------
   4.6.2 VIDEO FEATURES         
-----------------------------------------*/
.video-features {
  margin-top: 40px;
}

.video-features .inline-icon {
  padding-right: 5px;
}


/*========================================
   4.7 SECTION: SCREENSHOTS              
==========================================*/
.screenshots {
  margin-top: 68px;

}

.shot {
  margin: 10px;
  border-radius: 3px;
  border: 10px solid #ffffff;
}

.shot img {
  max-width: 100%;
  width: 100%;
}

.shot img:hover {
  cursor: crosshair;
  opacity: 0.8;
}


/*========================================
   4.8 SECTION: CLIENTS AND FEEDBACKS              
==========================================*/
/*---------------------------------------
   4.8.1 CLIENTS LOGO        
-----------------------------------------*/
.clients {
  margin-top: 35px;
}

.client-logos li {
  display: inline-block;
  vertical-align: middle;
  margin: 15px;
}

/*---------------------------------------
   4.8.2 FEEDBACKS        
-----------------------------------------*/

.testimonials {
  margin-top: 15px;
}

.single-feedback {
  position: relative;
  margin-top: 20px;
}

.single-feedback .client-pic {
  width: 48px;
  height: 48px;
  margin: auto;
  position: relative;
  margin-bottom: -24px;
  z-index: 999;
  border: 3px solid #ffffff;
  box-shadow: 0px 0px 0px 3px #f7f8fa;
}

.single-feedback .client-pic img {
  max-width: 100%;
}

.single-feedback .box {
  margin-right: 15px;
  margin-left: 15px;
  border-radius: 3px;
  position: relative;
  background: #f7f8fa;
  padding-top: 20px;
  -webkit-box-shadow: 0px 1px 0px 0px rgba(229, 229, 229, 0.75);
  -moz-box-shadow: 0px 1px 0px 0px rgba(229, 229, 229, 0.75);
  box-shadow: 0px 1px 0px 0px rgba(229, 229, 229, 0.75);
}

.single-feedback .box .message {
  padding: 25px;
  font-style: italic;
}

.single-feedback .box:after,
.single-feedback .box:before {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.single-feedback .box:after {
  border-color: rgba(247, 248, 250, 0);
  border-top-color: #f7f8fa;
  border-width: 15px;
  margin-left: -15px;
}

.single-feedback .box:before {
  border-color: rgba(229, 229, 229, 0);
  border-top-color: #e5e5e5;
  border-width: 16px;
  margin-left: -16px;
}

.single-feedback .client-info {
  margin-top: 30px;
}

.single-feedback .client-info .client-name {
  line-height: 20px;
}

.single-feedback .client-info .company {
  font-size: 13px;
}


/*========================================
   4.9 SECTION: CALL TO ACTION              
==========================================*/
/*---------------------------------------
   4.9.1 CALL TO ACTION WITH TEXT/BUTTON          
-----------------------------------------*/
.cta-section {
  background: url(../images/bg-image-2.jpg) no-repeat center fixed;
  -webkit-background-size: cover;
  background-size: cover;
}

.cta-section h4 {
  color: #ffffff;
}

.cta-section h2 {
  color: #ffffff;
  font-weight: 700;
  margin-top: 15px;
  margin-bottom: 40px;
}

.cta-section h3 {
  color: #ffffff;
}

.cta-section .color-overlay {
  padding-top: 125px;
  padding-bottom: 125px;
}

/*---------------------------------------
   4.9.2 SUBSCRIBE FORM           
-----------------------------------------*/
.subscribe-section {
  margin-top: 75px;
}

.subscription-form .input-box {
  width: 300px;
  margin-top: 25px;
  margin-bottom: 25px;
  height: 55px;
  border-radius: 3px;
  font-size: 16px;
  color: #000000;
  box-shadow: inherit;
}

.subscription-success,
.subscription-error {
  color: #FFFFFF;
}

/*========================================
   4.10 SECTION: CONTACT US             
==========================================*/
/*---------------------------------------
   4.10.1 BASIC STYLES        
-----------------------------------------*/
.contact-us {
  padding-top: 50px;
  padding-bottom: 50px;
  background-color: #f7f8fa;
}

.contact-us .heading {
  margin-bottom: 10px;
}

.contact-link {
  font-weight: 700;
  text-transform: uppercase;
  margin-top: 50px;
  font-family: 'Raleway', sans-serif;
}

.contact-link:hover {
  text-decoration: none;
}

.contact-link span {
  margin-right: 10px;
}


/*---------------------------------------
   4.10.2 CONTACT FORM        
-----------------------------------------*/
.contact-form {
  margin-top: 25px;
}

.contact-form .success,
.contact-form .error {
  display: none;
}

.contact-form .input-box,
.contact-form .textarea-box {
  margin-bottom: 15px;
  margin-top: 15px;
  outline: 0;
  border: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: 1px solid #e3e3e3;
  border-radius: 3px;
  color: #727272;
  padding-left: 12px;
  font-size: inherit;
  line-height: auto;
}

.contact-form .input-box {
  min-height: 50px;
}

.contact-form .textarea-box {
  min-height: 200px;
  -webkit-backface-visibility: hidden;
}

.contact-form .input-box:active,
.contact-form .textarea-box:active,
.contact-form .input-box:focus,
.contact-form .textarea-box:focus {
  color: #323232;
}

.contact-form .btn {
  margin-top: 25px;
}


/*========================================
   4.11 SECTION: FOOTER             
==========================================*/

footer {
  padding-top: 40px;
  padding-bottom: 40px;
}

.footer-logo {
  max-width: 180px;
  margin: auto;
}

.copyright {
  margin-top: 15px;
  margin-bottom: 15px;
}

.social-icons li {
  display: inline;
  margin: 2px;
}

.social-icons li a {
  font-size: 25px;
  color: #919191;
}

.social-icons li a:hover {
  text-decoration: none;
}

/*========================================
   4.12 SECTION: Extra Elements             
==========================================*/

.navbar.non-sticky {
  display: none;
}

.row {
  margin-top: 30px;
}

.navbar-header img {
  max-height: 35px;
}

#privacy-info {
  background-image: none;
}

.color-overlay-privacy {
  background: rgba(0, 0, 0, 0.06);
}

#privacy-info-text {
  text-align: justify;
}

#privacy-info-text h1 {
  font-size: 24px;
}

#privacy-info-text h2 {
  font-size: 18px;
}

#privacy-info-text ol li {
  list-style-type: decimal;
  padding-bottom: 5px;
}

#privacy-info-text ul li {
  list-style-type: disc;
  margin-left: 15px;
}

.contact-form p {
  text-align: left;
}

.extra-heading {
  margin-bottom: 10px;
  color: #d9251c;
}

#section-extra {
  background-color: #f7f8fa;
  padding: 25px 0;
}

#section-extra p {
  color: #3c3c3c;
  font-size: 18px;
}

.extra-source {
  font-size: 12px;
}

.navigation-header {
  padding-bottom: 20px;
}

.intro {
  font-size: 25px;
  line-height: 48px;
}

.colored-text {
  color: white !important;
  text-decoration: underline;
}

.logo-overlay {
  margin-top: 30px;
}

.color-overlay {
  background: rgba(0, 0, 0, 0.15);
}

#section-news {
  background-color: #f7f8fa;
  padding-top: 40px;
  padding-bottom: 40px;
}

#about-school-text {
  text-align: left;
}

#promo {
  color: #f25454;
}

#offer-extra-paragraph {
  margin-top: 20px;
}

#why-carstart-car, #after-pricing-info {
  text-align: left;
}

#why-carstart-car ul {
  padding-left: 15px !important;
}

#why-carstart-car ul li {
  list-style: disc;
}

.left-line {
  margin: 15px 0;
}

.cars-listing li {
  list-style-type: disc;
  overflow: visible;
  margin-left: 20px;
  margin-top: 5px;
}

.decorated-list {
  padding-left: 15px !important;
  margin-top: 10px;
}

.decorated-list li {
  list-style: disc;
  padding-bottom: 5px;
}

.cky-consent-container .cky-consent-bar {
  text-align: left;
}

.cky-notice-des a.cky-policy {
  text-decoration: none !important;
  color: #f15353 !important;
}

.cky-notice-des a.cky-policy:hover {
  text-decoration: underline !important;
}

/* Social media - fixed */

.social-media-pack {
  position: fixed;
  bottom: 5%;
  right: -3px;
  display: flex;
  flex-direction: column;
  background-color: white;
  border-radius: 10px 0 0 10px;
  padding: 4px 0px;
}

.social-media-pack a {
  width: 45px;
  padding: 10px;
}

/* Cookie Yes banner */

.cky-btn-revisit-wrapper {
  width: 30px !important;
  height: 30px !important;
}

.cky-btn-revisit-wrapper .cky-btn-revisit img {
  height: 22px !important;
  width: 22px !important;
}

/* Slider */

.new-slider {
  position: relative;
  max-width: 100%;
  margin: auto;
  overflow: hidden;
  background: black; /* Default background color to avoid grey flashes */
}

.new-slide {
  opacity: 0;
  transition: opacity 1s ease-in-out;
  position: absolute;
  width: 100%;
}

.new-slide img {
  width: 100%;
  vertical-align: middle;
}

.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from { opacity: 0.4; }
  to { opacity: 1; }
}

.new-slide.show {
  opacity: 1;
  position: relative;
}

.caption {
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%,-50%);
  color: white;
  padding: 10px;
  border-radius: 5px;
  width: 100%;
}

.caption h2 {
  margin: 0;
  font-size: 24px;
}

.button {
  display: inline-block;
  margin-top: 10px;
  padding: 10px 20px;
  color: white;
  background-color: #007BFF;
  text-decoration: none;
  border-radius: 5px;
}

.button:hover {
  background-color: #0056b3;
}

@media only screen and (max-width: 600px) {

.caption {
  top: 40%;
  }

.intro {
  font-size: 18px;
  line-height: 34px;
  }

.standard-button {
  font-size: 14px;
  padding: 12px 25px;
  }
}

@media only screen and (min-width: 601px) and (max-width: 800px) {

  .caption {
    top: 40%;
    }

    .intro {
      font-size: 16px;
      line-height: 28px;
      }

  .standard-button {
    font-size: 14px;
    padding: 13px 25px;
    }
  }

@media only screen and (min-width: 801px) and (max-width: 1100px) {

  .caption {
    top: 50%;
    }

    .intro {
      font-size: 16px;
      line-height: 30px;
      }

  .standard-button {
    font-size: 16px;
    padding: 15px 28px;
    }
}

/* Css dla galerii z lightboxem */

.row > .column-3,
.row > .column-4 {
  padding: 0 5px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Create four equal columns that floats next to eachother */
.column-3 {
  float: left;
  width: 33.3333%;
}

.column-4 {
  float: left;
  width: 25%;
}

.gallery-row {
  margin-top: 10px;
}

#first-gallery-row {
  margin-top: 25px;
}

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: black;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 1000px;
}

/* The Close Button */
.close {
  color: white;
  position: absolute;
  top: 85px;
  right: 5%;
  font-size: 35px;
  font-weight: bold;
  opacity: 0.9;
  z-index: 1;
}

.close:hover,
.close:focus {
  color: white;
  text-decoration: none;
  cursor: pointer;
  opacity: 0.8;
}

/* Hide the slides by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
  background-color: rgba(0, 0, 0, 0.2);
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* Position the "previous button" to the left */
.prev {
  left: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Caption text */
.caption-container {
  text-align: center;
  background-color: black;
  padding: 2px 16px;
  color: white;
}

img.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

img.hover-shadow {
  transition: 0.3s;
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* Koniec Css dla galerii z lightboxem */

/* 4.13 MEDIA QUERIES */

@media only screen and (max-width: 992px) {

.cols-reversed {
  display: flex;
  flex-direction: column-reverse;
  margin-top: 0;
 }

 #second-section-img {
  margin-top: 10px;
 }
}