/*
Theme Name: Rauarehvid
Theme URI: www.rauarehvid.ee
Description: Veebiks
Author: Rando Rooberg | Veebiks kiired ja vihased kodulehed ja e-poed
Author URI: https://www.veebiks.ee
Version: 1.0
License: Veebiks | Kopeerimine ja jagamine keelatud
*/

* { box-sizing: border-box;}
body {background-color: #ffffff; font-size: 1rem; line-height: 2; color: #1D1D1D000; font-family: "Montserrat", sans-serif; font-style: normal; font-optical-sizing: auto; font-weight: 400;  }

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

img.alignright {float:right; margin:0 0 1rem 1rem}
img.alignleft {float:left; margin:0 1rem 1rem 0}
img.aligncenter {display: block; margin-left: auto; margin-right: auto}
a img.alignright {float:right; margin:0 0 1rem 1rem}
a img.alignleft {float:left; margin:0 1rem 1rem 0}
a img.aligncenter {display: block; margin-left: auto; margin-right: auto}

.table_wrapp {overflow: auto;}
table {border-collapse: collapse; width: 100%; margin-top: 1rem;}
table td, table th {border: 0.063rem solid #213540; padding: 0.5rem;}
table th {padding: 0.938rem 0.625rem!important; text-align: left; border: 0.063rem solid #213540!important; background-color: #213540; color: #ffffff;}

iframe, video  {width: 100%; margin: 0; padding: 0;}
object {min-height: 75rem;}

strong {font-weight: 800;}

label {font-weight: 800;}
input, select, textarea {width: 100%!important; padding: 1.5rem 1rem!important; border: none; box-sizing: border-box!important; margin-bottom: 0.625rem!important; -webkit-appearance: none; border-radius: 0;}
input[type=submit] {background-color: #FF1637!important; font-weight: 700!important; color: #ffffff!important; border: none!important; width: 30%!important; float: right!important; cursor: pointer; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-appearance: none; border-radius: 0;}
input[type=submit]:hover {background-color: #000000!important; color: #ffffff!important;} 
textarea {height: 12.9rem;}

input:focus, select:focus, textarea:focus, option:focus {outline: none!important;}

button {background-color: #FF1637; font-weight: 700; margin: 0!important; color: #ffffff; cursor: pointer; -webkit-transition-duration: 0.5s; transition-duration: 0.5s;}
button:hover {background-color: #000000; color: #ffffff;}

form.invalid input.wpcf7-not-valid, select.wpcf7-not-valid, textarea.wpcf7-not-valid {border:0.3rem solid #FF0000!important; }
.wpcf7-not-valid-tip {display: none!important;}
.wpcf7-response-output {width: 100%!important; margin: -2.25rem 0 0 0!important;}

.is-layout-flex {margin-top: -0.75rem;}

h1, h2, h3, h4, h5, h6 {color: #000000; line-height: 1.2; font-weight: 800;}

h1 { font-size: 2.5rem;}
h2 { font-size: 2rem;}
h3 { font-size: 2rem;}
h4 { font-size: 2rem; }
h5 { font-size: 1.5rem; }
h6 { font-size: 1.2rem; }

a {color: #FF1637; font-weight: 600; text-decoration: none; -webkit-transition-duration: 0.5s; transition-duration: 0.5s;}
a:hover {color: #000000; text-decoration: underline; }

.container { width: 75rem; max-width: 100%; padding: 0;}

#header {width: 100%;}
#header .container {position: relative; display: flex; flex-wrap: wrap; align-items: center;}

#top-header {display: flex; justify-content: center; background-color: #213540; font-weight: 600; color: #ffffff; padding: 1rem 0; font-size: 0.85rem;}
#bottom-header {display: flex; justify-content: center; background-color: #F9F9F9;}

#header-slogan a {color: #ffffff; text-decoration: underline;}
#header-slogan a:hover {color: #FF1637;}

#logo {position: relative; padding: 2.5rem 0 1.5rem 0;}
#logo img, #logo-mob img {max-width: 15rem; }

#logo-mob {display: none;}	

#navigation {margin-left: auto;}
#navigation ul {padding: 0; margin: 0; list-style: none;}
#navigation ul li {display: inline-block;}
#navigation ul li a {text-decoration: none; padding: 0.5rem 0 0.5rem 0.5rem; color: #000000; font-size: 1rem; font-weight: 500; -webkit-transition-duration: 0.5s; transition-duration: 0.5s;}
#navigation ul li a:hover {text-decoration: none; color: #FF1637;}
#navigation .current-menu-item a {color: #FF1637; font-weight: 600;}

.sub-menu {display: none; position: absolute; z-index: 2; padding: 0!important;}
.sub-menu li {display: block!important; margin: 0;}
.sub-menu li a {display: block; padding: 0.313rem 0!important; font-weight: 400!important; font-size: 1rem!important;}
.sub-menu li a:hover {text-decoration: underline!important;}
#navigation .current-menu-item .sub-menu li a {color: #000000;}
.menu-item-has-children:hover .sub-menu {display: block;}
.sub-menu-inner {background-color: #F9F9F9; margin-top: 2.2rem; min-width: 10rem; padding: 0.575rem; margin-left: 0;}

.btn-close {display: none;}

#frontpage-hero {display: flex; justify-content: center; width: 100%; min-height: 37.5rem; position: relative; background: url(images/line.png); background-color: rgba(0, 0, 0, 0.5); }
#frontpage-hero .container {position: relative; display: flex; flex-wrap: wrap; align-items: center;}

#video-block {position: relative; width: 100%; min-height: 37.5rem;}
.videoContainer {position: absolute; width: 100%; height: 100%; background-color:rgba(0,0,0,0.9); top: 0; right: 0; bottom: 0; left: 0;}
.videoContainer video, .videoContainer img {object-fit: cover; height: 100%!important; width: 100%!important;}

#front-hero-slogan {color: #ffffff; width: 75%;}
#front-hero-slogan h2 {color: #ffffff; font-size: 3rem;}
#front-hero-slogan a:hover {color: #ffffff;}

.overlay {position: absolute; width: 100%; height: 100%; top: 0; background: url(images/line.png); background-color: rgba(0, 0, 0, 0.5); }

#page {display: flex; justify-content: center; flex-wrap: wrap; width: 100%; margin: 0 0 3rem 0;}
#page-title {padding: 8rem 0; margin: 0 0 3rem 0; position: relative; background-color: #213540; width: 100%;}
#page-title h1 {margin: 0; color: #ffffff; text-align: center; position: relative;}

#bottom-cta {display: flex; justify-content: center; width: 100%; padding: 2rem 0 3rem 0; background-color: #F9F9F9;}
#bottom-cta label {color: #213540;}
#bottom-cta h2 {color: #000000; margin-bottom: 2rem;}
#bottom-cta form {display: flex; flex-wrap: wrap;}
#bottom-cta input, #bottom-cta textarea {background-color: #D0D0D0; border: 0.3rem solid #D0D0D0;}
.left-side-push {width: 49%;}
.right-side-push {width: 49%; margin-left: auto;}
#bottom-cta form .wpcf7-submit {width: 100%!important; margin-top: 1.4rem; border: 0.3rem solid #FF1637!important; padding: 1.5rem 1rem!important;}
#bottom-cta form .wpcf7-submit:hover {border: 0.3rem solid #000000!important;}

#footer {display: flex; justify-content: center; background-color: #213540; border-bottom: 0.625rem solid #FF1637; color: #ffffff; margin-top: -1.5rem; padding: 2rem 0 1rem 0;}
#footer .container {display: flex;}

#contact-info p {line-height: 1; font-size: 0.85rem;}
#contact-info a {color: #ffffff; text-decoration: underline;}
#contact-info a:hover {color: #FF1637;}

#awards {margin-left: auto;}
#awards img {height: 7rem;}

@media (max-width: 1280px) {
	figure.wp-block-gallery.has-nested-images {margin-top: 1rem!important;}
.container {padding: 0 0.625rem; overflow: hidden;}
.menuicon {cursor: pointer; margin-left: auto;}
.bar1, .bar2, .bar3 {width: 40px; height: 4px; background-color: #FF1637; margin: 7px 0;}
.change .bar1 {opacity: 0;}
.change .bar2 {}
.change .bar3 {opacity: 0; }

#logo-mob {display: block; margin-top: 1.25rem; margin-left: 0.625rem;}

.btn-close {display: block; font-size: 5rem; cursor: pointer; position: absolute; top: -3rem; right: 0.625rem; color: #000000;}

#navigation {background-color: #F9F9F9; display: none; position: fixed; z-index: 1; left: 0; top: 0; bottom: 0; overflow-y: auto; overflow-x:hidden; transition: 0.5s;}
#navigation ul li {width: 100%; position: relative;}
#navigation ul li a{width: 100%; color: #000000; display: inline-block; padding: 0.625rem 0; font-weight: 600;}
#navigation ul li a:hover {color: #000000;}
.menu-item-has-children:hover .sub-menu {display: none;}
.navigation-active {display: block!important; width: 100%!important;}
#navigation-inside {margin: 1rem 0 0 0.625rem;}
#navigation .current-menu-item a {color: #000000; font-weight: 600;}

#navigation .with_sub {display: block!important;}
#navigation .with_sub:after {content: '\002B'; color: #000000; padding: 0 0.938rem; cursor: pointer; position: absolute; font-weight: bold; font-size: 2rem; top: -0.45rem; right: 0;}
#navigation .sub-menu-opened:after {content: '\002D'!important; top: -0.45rem; right: 0.063rem;}

.sub-menu {position: relative; z-index: 1;}
.sub-menu-inner {margin: 0; padding: 0; min-width: initial; background-color: transparent;}

table {margin: 1rem 0;}	
.is-layout-flex {margin-top: 0;}
.is-layout-flow {margin-top: -3.5rem!important;}
.is-layout-flow:first-of-type {margin-top: 0!important;}
	
#page {margin: 0;}
#page-title {width: 100vw; padding: 4rem 0; margin-left: -0.625rem; margin-right: -0.625rem; margin-bottom: 0;}

}

@media (max-width: 1050px) {
#awards {margin-left: auto;}
#awards img {height: 4rem;}
}

@media (max-width: 850px) {
.left-side-push {width: 100%;}
.right-side-push {width: 100%;}
#bottom-cta {padding-bottom: 0; padding-top: 1rem;}
#bottom-cta form .wpcf7-submit {margin: 0;}
#bottom-cta input, #bottom-cta textarea {padding: 1rem!important;}
#bottom-cta textarea {height: 10rem;}
#bottom-cta h2 {margin-bottom: 1rem;}
		
.wpcf7-response-output {margin: -2rem 0 3.5rem 0!important;}
}

@media (max-width: 785px) {
#header-slogan {width: 100%; text-align: center; font-size: 0.5rem}
#logo-mob img {max-width: 10rem; }	
#footer .container {flex-wrap: wrap;}
#awards {width: 100%;}
#front-hero-slogan {width: 100%;}
#front-hero-slogan h2 {font-size: 2.5rem;}
}

@media (max-width: 400px) {
#bottom-cta h2 {font-size: 1.75rem;}
#contact-info p {font-size: 0.65rem;}
}