/*
Theme Name: TapeThat
Theme URI: https://www.tapethat.eu
Description: Corrigo
Author: Rando Rooberg | Arvutinurk.ee kiired ja vihased kodulehed ja e-poed www.arvutinurk.ee
Author URI: https://www.arvutinurk.ee/
Version: 1.0
License: Arvutinurk.ee | Mõeldud kasutamiseks ainult TapeThat.eu
*/


* { box-sizing: border-box;}
body {font-family: 'Open Sans', sans-serif; background-color: #fff; font-size: 18px; line-height: 2; color: #000;}

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

img.alignright {float:right; margin:0 0 1em 1em}
img.alignleft {float:left; margin:0 1em 1em 0}
img.aligncenter {display: block; margin-left: auto; margin-right: auto}
a img.alignright {float:right; margin:0 0 1em 1em}
a img.alignleft {float:left; margin:0 1em 1em 0}
a img.aligncenter {display: block; margin-left: auto; margin-right: auto}
.gallery{display: flex; flex-wrap: wrap; margin-top: -5px!important;}

.gallery-item {position: relative!important; width: 15%!important; margin-left: 2%!important; margin-bottom: 0!important;}
.gallery-item:first-of-type {margin-left: 0!important;}
.gallery-item:nth-child(6n+1){clear:left!important; margin-left: 0!important;}

.gallery img {width: 100%!important; height: auto!important; border: 10px solid #fff!important; -webkit-box-shadow: 10px 10px 5px 0px rgba(235,235,235,1); -moz-box-shadow: 10px 10px 5px 0px rgba(235,235,235,1); box-shadow: 10px 10px 5px 0px rgba(235,235,235,1);}

.gallery-caption {text-align: center; margin: -10px 0 50px 0; width: 100%; }
figcaption {white-space: pre-line; color: #363636!important; font-size: 11px!important; text-transform: uppercase!important;}

figure {margin: 0!important;}

.table_wrapp  {width: 100%; overflow: auto;}
table {width: 100%;}
table, td, th {border: 1px solid #ccc; text-align: left;}
th, td {padding: 15px!important;}

iframe  {width: 100%!important; }

input, select, textarea {width: 100%; padding: 17px; border: 1px solid #ccc; box-sizing: border-box; margin-bottom: 0!important;}
input[type=submit] {background-color: #fff; color: #000; border: 2px solid #000; padding: 20px; width: 35%; float: right; cursor: pointer; margin-top: 15px;}
input[type=submit]:hover {background-color: #000; color: #fff;} 
textarea {height: 225px;}
input[type="checkbox"] {width: 30px; margin-left: -20px; margin-right: -10px;}
input:focus, select:focus, textarea:focus {outline: none;}

h1, h2, h3, h4, h5, h6 {font-family: 'Montserrat', sans-serif; text-transform: uppercase; font-weight: normal;}

h1 { font-size: 40px; line-height: 1.2; }
h2 { font-size: 35px; line-height: 1.25;}
h3 { font-size: 30px; line-height: 1.3; }
h4 { font-size: 25px; line-height: 1.35; }
h5 { font-size: 20px; line-height: 1.5;}
h6 { font-size: 15px; line-height: 1.6;}

a {color: #00ACE5;text-decoration: underline;}
a:hover {text-decoration: none; color: #000; }

.container {position: relative; width: 100%; max-width: 1300px; padding: 0 10px; }

#header {display: flex; justify-content: center; background-color: #f6f6f6; padding: 10px 0;}
#header .container {display: flex; position: relative; align-items: center; flex-wrap: wrap;}

#logo {position: absolute; top: 0; z-index: 1;}

#navigation {margin-left: auto;}
#navigation ul {padding: 0;}
#navigation ul li {display: inline-block;}
#navigation ul li a { text-decoration: none; padding: 10px; font-weight: bold; color: #000; text-transform: uppercase; font-size: 17px;}
#navigation ul li a:hover {text-decoration: none; border-top: 3px solid #363636;}

@media (min-width: 936px) {
#navigation ul .sub-menu {display: none!important; min-width: 150px; background-color: #f6f6f6; margin: 0; position: absolute; z-index: 9999!important; }
#navigation ul .sub-menu li {display: block; margin: 0;}
#navigation ul .sub-menu li a {padding: 10px; font-weight: normal;}
#navigation ul .sub-menu li a:hover {border-top: none; text-decoration: underline;}
#navigation ul .menu-item-has-children:hover .sub-menu {display: block!important; }
}

#front-hero {height: 824px; position: relative;}
#front-hero .black-layer {display: flex; height: 824px!important; align-items: center; justify-content: center; width: 100%; background-color: rgba(0,0,0,0.2);}
#front-hero .triple {background-color: #f6f6f6;  border-radius: 25px; padding: 35px 15px; border-top: 3px solid #BC0D3D; border-bottom: 3px solid #BC0D3D;}
#front-hero  .metaslider  {z-index: -333; position: absolute; top: 0; }
#front-hero  .metaslider img  {height: 824px!important; object-fit: cover!important; }

.triple-content {display: flex; flex-wrap: wrap;}
.triple { width: 24%; overflow: hidden; display: flex; align-items: center; font-size: 13.5px; margin-left: 1%; position: relative; box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); background-color: #fff; -webkit-transition-duration: 0.4s; transition-duration: 0.4s; text-align: center; padding: 5px; margin-bottom: 15px;}
.triple:hover {background-color: #f6f6f6; }
.triple img {margin-top: -10px;}
.triple:first-of-type {margin-left: 0;}
.triple:nth-child(4n+1) {margin-left: 0;}
.triple h2 {font-size: 21px;}
.triple a {color: #000; display: block; text-decoration: none; padding: 15px 5px 25px 5px;}
.triple:hover a {color: #000;}

#pagination {display: flex; width: 100%; margin-top: 75px;}
#pagination a {color: #fff; text-decoration: none; border: 2px solid #1C1E29; background-color: #1C1E29; padding: 20px 10px; -webkit-transition-duration: 0.4s; transition-duration: 0.4s;}
#pagination a:hover {background-color: #000; color: #fff; }
#newer {margin-left: auto;}

.added {font-size: 12px; background-color: #151E2D; width: 100%; color: #fff; position: absolute; left: 0; bottom: 0; }

.front-left {display: flex; justify-content: center; margin-top: 50px;}
.front-left .container {display: flex; position: relative; flex-wrap: wrap;}
.front-text {background-color: #BC0D3D; padding: 25px; width: 25%; display: flex; align-items: center; justify-content: center;}
.front-text h2 {color: #fff; font-size: 75px; writing-mode: vertical-rl; text-orientation: upright;}
.front-content {width: 73%; font-size: 21px!important; margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; }
.front-content p {width: 100%;}

#page-name {display: flex; color: #fff;}
#page-name .black-layer {display: flex; justify-content: center; width: 100%; background-color: rgba(0,0,0,0.5); padding: 125px 0;}
#page-name h1 {font-size: 55px;}

#single-content {display: flex;  justify-content: center; flex-wrap: wrap;}
#single-text {width: 38%;}
#post-image {width: 60%; margin-left: auto;}

#page {display: flex; position: relative; margin: 25px 0 0 0; flex-wrap: wrap; justify-content: center; }
#page .triple-content {margin-top: 50px;}

#footer {background-color: #151E2D; padding: 50px 0; margin-top: 75px; color: #fff; text-align: center;}

@media (max-width: 1300px) {
.triple { width: 32.6%; margin-left: 1%; }
.triple:nth-child(4n+1) {margin-left: 1%; }
.triple:nth-child(3n+1) {margin-left: 0;}
}


@media (max-width: 935px) {

.menuicon {cursor: pointer; margin-left: auto; z-index: 100; }
.bar1, .bar2, .bar3 {width: 45px; height: 2px; background-color: #BC0D3D; margin: 13px 0;}
.change .bar1 {opacity: 0;}
.change .bar2 {}
.change .bar3 {opacity: 0; }

#navigation {width: 100%; display: none; overflow: hidden;  text-align: center;}
#navigation ul {padding: 0; margin: 85px 0 -15px 0;}
#navigation li {width: 100%!important;}
#navigation li a{width: 100%!important; color: #000!important; float: left; padding: 0!important; font-size: 20px!important;}
#navigation li a:hover{text-decoration: underline!important; border-top: none!important;}

.with_sub {position: relative; float: right; margin-right: 15px;}
.with_sub:after {content: '\002B'; color: #000; padding: 0 15px; cursor: pointer; position: absolute; font-weight: bold; font-size: 35px; left: -30px; top: -55px;}

#navigation .sub-menu {display: none; float: left; width: 100%; margin-top: 0!important;}
#navigation .sub-menu li {width: 100%; float: left; padding: 0;}

.triple { width: 49.5%; margin-left: 1%; }
.triple:nth-child(4n+1) {margin-left: 1%; }
.triple:nth-child(3n+1) {margin-left: 1%; }
.triple:nth-child(2n+1) {margin-left: 0;}

.front-text {width: 100%;}
.front-text h2 {font-size: 35px; writing-mode: horizontal-tb;}
.front-content {width: 100%; margin-left: 0; }

#page-name h1 {font-size: 40px;}

	
}

@media (max-width: 800px) {	
.gallery-item {width: 32.5%!important; margin-left: 1%!important;}
.gallery-item:nth-child(6n+1){clear: none!important; margin-left: 1%!important;}
.gallery-item:nth-child(3n+1){clear: left!important; margin-left: 0!important;}

}



@media (max-width: 600px) {
#front-hero .metaslider img, #front-hero .black-layer {height: 1000px!important;}
#front-hero {margin-bottom: 225px;}
.triple {width: 100%; margin: 0!important; border-radius: 0!important; margin-bottom: 35px!important;}
#single-text {width: 100%;}
#post-image {width: 100%; margin-left: 0;}
}

@media (max-width: 430px) {	
.gallery-item {width: 49%!important; margin-left: 2%!important;}
.gallery-item:nth-child(3n+1){clear: none!important; margin-left: 2%!important;}
.gallery-item:nth-child(5n+1){margin-left: 2%!important;}
.gallery .gallery-item:nth-child(2n+1) { clear: left!important; margin-left: 0!important;}

}