/*
Theme Name: TopPlast
Theme URI: https://www.topplast.ee/
Description: TopPlast OÜ
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 TopPlast OÜ kodulehel
*/


@font-face {
  font-family: 'Sonny';
  src:  url('font/Sonny/Sonny Gothic Bold.woff') format('woff');
  src: 	url('font/Sonny/Sonny Gothic Bold.woff') format('woff');
}

* { box-sizing: border-box;}
html {}
body {background-color: #F8F8F8; font-family: 'Rubik', sans-serif; font-size: 20px; line-height: 1.5; color: #424242; }

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}

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

iframe  {width: 100%; }

figure {margin: 0!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 #0873BD; border-top-left-radius: 35px; border-bottom-right-radius: 35px; padding: 20px; width: 35%; float: right; cursor: pointer; margin-top: 15px;}
input[type=submit]:hover {background-color: #0873BD; color: #fff;} 
textarea {height: 175px;}
input[type="checkbox"] {width: 30px; margin-left: -20px; margin-right: -10px;}
input:focus, select:focus, textarea:focus, option:focus {outline: none!important;}

.wpcf7-form {display: block!important; margin-bottom: 75px!important;}
div.wpcf7-mail-sent-ng, div.wpcf7-aborted, div.wpcf7-mail-sent-ok {margin-top: 25px!important; float: left; width: 100%;}
.screen-reader-response ul li{ display:none; }
.wpcf7-validation-errors { display:none; }
.screen-reader-response { display:none; }
form.invalid input.wpcf7-not-valid, select.wpcf7-not-valid, textarea.wpcf7-not-valid{border:1px solid red;}
div.wpcf7-validation-errors {display:none!important;}
.wpcf7-not-valid-tip {display: none !important;}

h1, h2, h3, h4, h5, h6 {font-family: 'Sonny', Fallback, sans-serif;text-transform: uppercase; color: #000;}

h1 { font-size: 45px; line-height: 1.2;  letter-spacing: -.1rem;}
h2 { font-size: 30px; line-height: 1.25; letter-spacing: -.1rem; }
h3 { font-size: 25px; line-height: 1.3;  letter-spacing: -.1rem; }
h4 { font-size: 20px; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 17px; line-height: 1.5;  letter-spacing: -.05rem; }
h6 { font-size: 15px; line-height: 1.6;  letter-spacing: 0; }

a {color: #0141FF; text-decoration: underline;}
a:hover {color: #000; text-decoration: none; }

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

#header {background-color: #efefef; display: flex; justify-content: center; padding: 15px 0;}
#header .container {display: flex; align-items: center; flex-wrap: wrap;}

#quick-contact {width: 100%; font-size: 13px; text-align: right;}
#quick-contact p {margin-right: 15px;}

#logo {margin-top: -45px;}
#logo img:hover {
	-webkit-animation-name: wobble-to-top-right;
	animation-name: wobble-to-top-right;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: 1;
	animation-iteration-count: 1;
}
@-webkit-keyframes wobble-to-top-right {
	16.65% {
		-ms-transform: translate(8px, -8px);
		-webkit-transform: translate(8px, -8px);
    	transform: translate(8px, -8px);
	}
	33.3% {
	    -ms-transform: translate(-6px, 6px);
	    -webkit-transform: translate(-6px, 6px);
	    transform: translate(-6px, 6px);
  	}
	49.95% {
	    -ms-transform: translate(4px, -4px);
	    -webkit-transform: translate(4px, -4px);
	    transform: translate(4px, -4px);
  	}
  	66.6% {
	    -ms-transform: translate(-2px, 2px);
	    -webkit-transform: translate(-2px, 2px);
	    transform: translate(-2px, 2px);
  	}
	83.25% {
    	-ms-transform: translate(1px, -1px);
    	-webkit-transform: translate(1px, -1px);
		transform: translate(1px, -1px);
	}
	100% {
		-ms-transform: translate(0, 0);
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}
}
@keyframes wobble-to-top-right {
  	16.65% {
  	    -ms-transform: translate(8px, -8px);
	    -webkit-transform: translate(8px, -8px);
	    transform: translate(8px, -8px);
  	}
  	33.3% {
  		-ms-transform: translate(-6px, 6px);
	    -webkit-transform: translate(-6px, 6px);
	    transform: translate(-6px, 6px);
  	}
  	49.95% {
  		-ms-transform: translate(4px, -4px);
	    -webkit-transform: translate(4px, -4px);
	    transform: translate(4px, -4px);
  	}
  	66.6% {
  		-ms-transform: translate(-2px, 2px);
	    -webkit-transform: translate(-2px, 2px);
	    transform: translate(-2px, 2px);
  	}
  	83.25% {
  		-ms-transform: translate(1px, -1px);
	    -webkit-transform: translate(1px, -1px);
	    transform: translate(1px, -1px);
  	}
  	100% {
  		-ms-transform: translate(0, 0);
	    -webkit-transform: translate(0, 0);
	    transform: translate(0, 0);
  	}
}

#navigation {margin-left: auto;}
#navigation ul {padding: 0;}
#navigation ul li {display: inline-block;}
#navigation ul li a {font-family: 'Sonny', Fallback, sans-serif; text-decoration: none; padding: 15px; font-weight: bold; color: #000; text-transform: uppercase; font-size: 17px;}
#navigation ul li a:hover {text-decoration: none; border-top: 3px solid #0873BD;}

@media (min-width: 1203px) {
#navigation ul .sub-menu {display: none!important; background-color: #efefef; text-align: left; min-width: 250px; position: absolute; z-index: 9999!important; padding: 10px 0;}
#navigation ul .sub-menu li {display: block; }
#navigation li:hover > ul  {display: block!important;}
#navigation ul .sub-menu li a  {font-weight: normal; font-size: 13px; }
#navigation ul .sub-menu li a:hover {border-top: none; text-decoration: underline; }
}


#hero {display: flex; justify-content: center;  margin: 50px 0 0 0; color: #fff; }
#hero-img {display: flex; min-height: 700px;}

.box-wrap {display: flex; flex-wrap: wrap; margin: 100px 0;}
.full-white .box-wrap {justify-content: center; margin: 0;}

.side-by { width: 49.5%; margin-left: 1%; position: relative; text-align: center;}
.side-by:first-of-type {margin-left: 0;}
.side-by:nth-child(2n+1) {margin-left: 0;}
.side-by  .fas {font-size: 65px;}
.side-by a { text-decoration: none;}

.triple { width: 32.6%; margin-left: 1%; position: relative; border: 1px solid #ccc; text-align: center; box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);}
#about-us .triple {background: url(images/card.jpg) no-repeat; color: #fff; border: none; }
.triple:first-of-type {margin-left: 0;}
.triple:nth-child(3n+1) {margin-left: 0;}
.triple  .fas {font-size: 65px;}
.triple a { text-decoration: none;}
#about-us .triple h2{ color: #fff; background-color: rgba(0,0,0,0.5); margin: 0; padding: 100px 0;}

#about-us { background-color: #F8F8F8; position: relative; z-index: 1; display: flex; justify-content: center;  margin: 0 0 50px 0;}
#about-us:before {background: inherit; bottom: 0; content: ''; display: block; height: 100%; left: 0; position: absolute; right: 0; transform: skewY(2.5deg); transform-origin: 100%; z-index: -1;}
.custom-title {width: 100%; color: #fff; margin: 50px 0; padding: 10px 0; text-align: center; border-radius: 10px;}
.custom-title h2 {font-size: 45px; color: #fff; text-transform: none!important;}

.full-white {font-weight: bold; width: 65%; margin-left: auto; margin-right: auto; background-color: #fff; padding: 10px 25px 35px 25px; border-top-left-radius: 35px; border-bottom-right-radius: 35px; }
.full-white h2 {font-size: 45px; margin-bottom: 65px;}

.accordion {background-color: #eee; cursor: pointer; padding: 18px; width: 100%; border: 1px solid #fff; text-align: left; outline: none; transition: 0.4s;}
.active, .accordion:hover {background-color: #ccc; }
.panel {padding: 0 18px; display: none; background-color: #fff; overflow: hidden;}

#where-i-am {font-size: 17px; font-family: 'Sonny', Fallback, sans-serif; min-height: 700px;}
#where-i-am-cover {display: flex; justify-content: center; background-color: rgba(0,0,0,0.4); width: 100%; min-height: 700px;}
#where-i-am .container {padding-top: 35px; color: #fff;}
#where-i-am .container a {color: #fff;}

#page {display: flex; justify-content: center; margin-top: -575px;}
#page .container {background-color: #fff; padding: 10px 25px 35px 25px; border-top-left-radius: 35px; border-bottom-right-radius: 35px; box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);}
#title {text-align: center; padding: 35px 0 15px 0;}

#footer { margin-top: 100px;}
#partners {background-color: #efefef; padding: 50px 0; display: flex; justify-content: center; text-align: center;}
.copy {background-color: #000; text-align: center; color: #fff; margin: 0; padding: 50px 0; font-size: 15px;}

@media (max-width: 1202px) {

#header .container {padding: 0;}

#logo {margin-left: 10px; margin-bottom: 10px; margin-top: -35px;}

.menuicon {cursor: pointer; margin-left: auto; margin-top: -10px; margin-right: 10px; background-color: #0873BD; padding: 5px 10px;}
.bar1, .bar2, .bar3 {width: 45px; height: 3px; background-color: #fff; margin: 13px 0;}
.change .bar1 {opacity: 0;}
.change .bar2 {}
.change .bar3 {opacity: 0; }

#navigation {width: 100%; display: none; overflow: hidden;}
#navigation ul {padding: 0; margin: 30px 0 0 0;}
#navigation li {width: 100%!important; margin: 15px 0;}
#navigation li a{width: 100%!important; text-align: center; float: left; padding: 0!important; font-size: 25px!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: -48px;}

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

#page {margin-bottom: -100px;}

}

@media (max-width: 895px) {
.triple { width: 49.5%; margin-left: 1%; margin-bottom: 25px; }
.triple:nth-child(3n+1) {margin-left: 1%; }
.triple:nth-child(2n+1) {margin-left: 0;}
.triple:last-of-type {margin-bottom: 0;}
}

@media (max-width: 779px) {
#logo {margin-top: 0;}
#quick-contact {text-align: center; margin: -15px 0 25px 0; background-color: #fff; padding: 10px;}
}

@media (max-width: 715px) {
#logo {width: 50%;}
.box-wrap {margin: 50px 0;}
.side-by { width: 100%; margin-left: 0; margin-bottom: 100px;}
.side-by:last-of-type { margin-bottom: 0;}
.side-by h2 {font-size: 5.0vw;}
#about-us .side-by  {margin-bottom: 0;}
.custom-title h2, .full-white h2 {font-size: 6.0vw;}
.full-white h3 {font-size: 4.0vw;}
.full-white h4 {font-size: 4.0vw;}
#about-us:before {transform: skewY(0deg);}
#title h1 {font-size: 8.0vw;}
#page {margin-bottom: -50px;}
#page h2 {font-size: 7.0vw;}
#page h3 {font-size: 4.0vw;}
.full-white {margin-top: 50px; width: 100%;}
#footer {margin-top: 50px; text-align: center;}
.copy {font-size: 12px;}
}

@media (max-width: 575px) {
.triple { width: 100%; margin-left: 0;}
.triple h2 {font-size: 7.0vw;}
}