* {box-sizing: border-box;}

body {font-family: Arial;margin: 0; background: #333}
p {text-align: left; padding:5px 5px 5px 30px}
.kontakti {text-align:center;margin: 0;padding: 5px 5px 5px 30px}

/* To top btn */
#myBtn {display: none;position: fixed;bottom: 80px;
  right: 30px;z-index: 2;border: none;outline: none;
  background-color: #D8BA74;
  cursor: pointer;padding: 10px;border-radius: 4px;}	

/* Slideshow in index.html */
.Slides {display: none; width:70%; float:right;}
.slideshow-container {max-width: 500px;position: right;margin: auto;}
.dot {height: 1px;width: 1px;background-color: transparent;
display: inline-block;transition: background-color 0.6s ease;}
.active {background-color: transparent;}
.fade {-webkit-animation-name: fade;-webkit-animation-duration: 2s;
animation-name: fade;animation-duration: 2s;}
@-webkit-keyframes fade {from {opacity: .7} to {opacity: 1}}
@keyframes fade {from {opacity: .7} to {opacity: 1}}

/* Kolonnas index.html */
.row {display: flex;flex-wrap: wrap; }
.container2 {padding: 0 16px;}
 .container2 img {margin-left:110px }
 .container2::after, .row::after {content: "";clear: both;
 display: table;}
 .container2 h2{text-align:center; color: white;border: none;
 outline: 0;text-decoration:none;display: inline-block;
 padding: 8px;text-align: center;
 cursor: pointer;width: 100%;}
 .container2 p{ color: white}
 .column2 {flex: 50%;max-width: 50%;padding: 0 4px;}
 .column2 img {margin-top: 8px;vertical-align: middle;}
@media (max-width: 600px) {
	.column2  {flex: 100%;max-width: 100%;}}
	.column {flex: 25%;max-width: 25%;padding: 0 4px;}
 .column img {margin-top: 8px;vertical-align: middle;}
@media only screen and (max-width: 800px) {
	.column {flex: 50%;max-width: 50%;} 
	.navbar {flex-direction:column;}}
@media (max-width: 600px) {
	.column  {flex: 100%;max-width: 100%;}}
@media only screen and (max-width: 300px) {
	.text {font-size: 11px}}
	

/* Title btn in Commercial */
.btn2 {text-decoration:none; border: 2px solid white;
background-color: #333;color: white;padding: 14px 28px;
font-size: 18px;cursor: pointer;}
.default {border-color: grey;color: grey; margin-left:100px;
margin-top:100px}
.btn2 a {text-decoration:none; color: white}



/* Header */
.header {font-size:30px;text-align: left;padding-left: 20px; 
color:#ccc; font-family: Myriad pro;}
.header2 {text-align: left;padding: 14px 28px;color:225,225,225}
.header a.active {font-size: 20px;color:225,225,225}
.header3 {text-align: left;padding-left: 20px; color:#ccc; 
font-size:130px; font-family: Myriad pro;}
.header4 {border: 2px solid white;margin: 14px 280px; 
text-align: center; color: white;padding: 10px;}
.header5 {text-align: left;padding-left: 20px; 
padding-top:10px; color:#ccc; font-size:120px; 
font-family: Myriad pro;}
.header6 {border: 2px solid white;margin: 14px 20px; 
text-align: center; color: white;padding: 10px;}
.header7 {text-align: center; color: white;}
.header8 {font-size:20px;text-align: left;padding-left: 20px; 
color:#ccc; font-family: Myriad pro;}
@media screen and (max-width: 800px) {
 .header3 {margin-left: 20px;margin-right:20px;padding: 10px;}
 .header4 {margin: 20px;padding: 10px; margin: 0}
 .header6 {margin: 20px;padding: 10px; margin: 0}}


/* Images, 4 row container */
.image {opacity: 1;display: block;width: 100%;height: auto;
transition: .5s ease;backface-visibility: hidden;}
.container {position: relative;}
.container:hover .image {opacity: 0.3;}
@media (max-width: 800px) {
.container:hover .image {opacity: 1;}}

/* Design, 2 row container index.html */
.container3 {position: relative;}

/* Kartiņas kontaktos */
.column4 {float: left;width: 25%;margin-bottom: 16px;padding: 10 8px;}
.column4 img {margin-left:170px}
.card2 {float: right}

/* Gallery - lightbox in portfolio*/
.row:after {content: "";display: table;clear: both;}
.modal {display: none;position: fixed;z-index: 3;left: 0;
  top: 0;width: 100%;height: 100%;background-color: black; 
  margin:0;}
.modal-content {vertical-align: middle; background-color: none;
margin-left:auto;margin-right:auto;padding: 0;width: 100%}
.close {color: white;position: absolute;top: 10px;right: 25px;
font-size: 35px;font-weight: bold;}
.close:hover,.close:focus {color: #999;text-decoration: none;
cursor: pointer;}
.mySlides {display: none; width:75%; height:75%; 
margin-left:15%; margin-top:.5%;max-width: 1600px; }
.cursor {cursor: pointer;}
.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;}
.next {right: 0;border-radius: 3px 0 0 3px;}
.prev:hover,.next:hover {background-color: rgba(0, 0, 0, 0.8);}
img {margin-bottom: -4px;}
.caption-container {text-align: center;background-color: black;
padding: 2px 10px;color: white;}
.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);}
@media only screen and (max-width: 800px) {
	.modal,.prev,.next,.modal-content,.mySlides,.cursor,.caption-container,.active {display:none; max-width:0px}
	.image {cursor:none}}


 .main {flex: 20%;background-color: white;padding: 5px;}

/* Footer */
.footer {padding: 2px;text-align: center;background: #D8BA74;}
.footer img {min-width: 4%; float:left;padding: 0.1px 5px 5px 10px;}
@media only screen and (max-width: 450px) {.footer img {margin-left:auto}}

/* Index.html 4 polaroids */
.column2 {float: left;width: 33.3%;margin-bottom: 16px;padding: 0 8px;}
@media screen and (max-width: 650px) {.column2 {width: 100%;display: block;}}
 .card2 {box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);}
 .container2 {padding: 0 16px;}
 .container2::after, .row::after {content: "";clear: both;display: table;}
 .title2 {color: grey}
 .button2 {border: none;outline: 0;text-decoration:none;display: inline-block;
 padding: 8px;background-color: grey;text-align: center;cursor: pointer;width: 100%;}
 .button2:hover {background-color: #555;}
 .button2 a {display: block; width: 100%; height: 100%; 
 text-decoration:none; color: white; font-size:16px}
 .container2 h2{text-align:center}

/* Navigation */
.main-nav {display: flex;height: 8vh;justify-content: space-between;
align-items: center;color: black;background: #ccc;}
.logo {font: News Gothic TL;letter-spacing: 2px;text-transform: uppercase;
font-size: 1.65rem;padding: 0 2rem;}
.navlinks {background-color: #ccc;}
.navlinks a {width: 40%;justify-content: space-around; color:black; 
text-decoration:none;font-size: 19px;color: black;padding: 1px 15px;
text-decoration: none;text-align: right; border: none;outline: none; 
background-color: inherit;font-family: inherit; margin: 0;}
.navlinks a.active {font-size: 25px}
.navlinks a.icon {display: none; margin-right:30px}
.dropdown2 {float: right;}
.dropdown2 .dropbtn {font-size: 17px;    
  border: none;outline: none;color: white;padding: 14px 16px;
  background-color: white;font-family: inherit;margin: 0;}
.dropdown2 a:hover {color:#A58B52}

@media screen and (max-width: 1130px) {
  .logo {padding-bottom:20px}
  .navlinks a{display: none; }
  .navlinks a.icon {float: right;display: block;}
  .header3 {margin-left: 50px;margin-right:50px;padding: 10px;}}

@media screen and (max-width: 1130px) {
  .navlinks.responsive {position: relative; z-index:98;}
  .navlinks.responsive .icon {position: relative;right: -40px;
  top: 25px; margin-bottom:20px}
  .navlinks.responsive a {float: none; 
    display: block;text-align: left; color: black;text-decoration: none;}
  .navlinks.responsive .dropdown2 {padding-top:200px; 
  margin: 5px;float: none; background-color:#EEE}
  .navlinks.responsive .dropdown-content {display: none}
  .navlinks.responsive .dropbtn {float: none;
    display: block;padding: 0;width: 100%; text-align: right; 
	color:black;text-decoration: none;background-color:#EEE}
  .dropdown2 a, button {padding:10px;}}