/*

Theme Name: Aarnipuu

Theme URI: http://www.aarnipuu.net

Author: JJ-Net Group Oy

Author URI: http://www.jj-net.fi

Description: Aarnipuun kotisivut

Version: 1.0

License: GNU General Public License v2 or later

License URI: http://www.gnu.org/licenses/gpl-2.0.html

*/

/* 
 Unfair bugfix 2018-01-11

 Fixed bug where images would push out of the page
 in tablet view. Occurred on Edge/IE.
*/
.col-md-4.highlight-img-right.hl-img img,
.col-md-4.col-md-pull-8.highlight-img-left.hl-img img {
	width: 100%
}
/* End Unfair bugfix */

body { background-color:#626366; font-size: 16px;}
.wrapper {background-color:#fff; }
img {max-width: 100%; height: auto;}
.btn-white {color: #fff; font-size: 16px; text-transform: uppercase; background: none; display: inline-block; padding: 11px 20px; border: 1px solid #fff; text-decoration: none; font-weight: 700; letter-spacing: 2px; }
.btn-white:hover, .btn-white:focus {color: #999; background: #fff; text-decoration: none;}
.btn-orange {color: #ff571d; font-size: 16px; text-transform: uppercase; background: none; display: inline-block; padding: 11px 20px; border: 1px solid #ff571d; text-decoration: none; font-weight: 700; letter-spacing: 2px; }
.btn-orange:hover, .btn-orange:focus {color: #fff; background: #ff571d; text-decoration: none;}

h3 {color: #ff561d !important;
font-size: 24px !important;
margin: 20px 0 !important;
font-weight: 600 !important;
text-transform: uppercase;}

/*Slideout*/
.mobilenavi-container {z-index: 6000; position:absolute; top:30px; transform:translateY(-50%); right:15px; color:#0057B8; display:none; width: 55px; height: 42px; }
.btn-mobilenavi { padding:8px; }
.slideout-open #slideout-panel { -webkit-box-shadow: 5px 0px 5px -4px rgba(50, 50, 47, 0.3); -moz-box-shadow: 5px 0px 5px -4px rgba(50, 50, 47, 0.3); box-shadow: 5px 0px 5px -4px rgba(50, 50, 47, 0.3); }
.bar1,.bar2,.bar3 {	width: 100%; height: 4px; margin-bottom: 7px; background-color:#000; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out;-ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; }
.bar3 { margin-bottom:0; }
.navbar-on .bar1,.navbar-on .bar2,.navbar-on .bar3 { background-color: #000; }
.navbar-on .bar1 { -ms-transform-origin: 10% 40%; -ms-transform: rotate(45deg); -webkit-transform-origin: 10% 40%; -webkit-transform: rotate(45deg); transform-origin: 10% 40%; transform: rotate(45deg); }
.navbar-on .bar3 { -ms-transform-origin: 10% 40%; -ms-transform: rotate(-45deg); -webkit-transform-origin: 10% 40%; -webkit-transform: rotate(-45deg); transform-origin: 10% 40%; transform: rotate(-45deg); }
.navbar-on .bar2 { background-color: transparent; }

.slideout-menu { position: fixed; right: 0; top: 0; bottom: 0; right: 0; z-index: 0; padding:20px; width:256px; overflow-y: auto; -webkit-overflow-scrolling: touch; display: none; background-color: #333; color:#fff; }
.slideout-menu > a { display:block; width:100%; text-align:center; margin-bottom:15px; color:#ff00ff; font-size:24px; }
.slideout-menu ul { list-style:none; margin:0; padding:0 0 0 5px; }
.slideout-menu .mobilenavigation ul { margin:40px 0; }
.slideout-menu .mobilenavigation ul li ul { display: none; }
.slideout-menu .mobilenavigation ul li a { margin-bottom:15px; display:block; font-size: 15px; font-weight: 600; text-transform: uppercase; color: #fff;} 
.slideout-panel { position: relative; z-index: 1; /*will-change: transform;*/ }
.slideout-open,.slideout-open body,.slideout-open .slideout-panel { overflow: hidden !important; }
.slideout-open .slideout-menu { display: block; }
.slideout-menu .slideout-menu-logo { margin-bottom:15px;  text-align: center;}
.slideout-menu .slideout-menu-logo img {width: 120px; height: auto; display: inline-block;}
.slideout-menu .slideout-menu-languages { margin-bottom:15px; }
.slideout-menu .slideout-menu-somelinks {}

/*Logo*/
.logo { background:url('./images/Aarnipuu-logo-txt.png') no-repeat; height:20px; background-size:contain; display:block; margin:17px 0; }

/*Mainnavigation*/
.mainnavigation-container { background:#fff; position:absolute; left:0; top:0; width:100%; z-index:5000; }
/*.mainnavigation-container .container { border-bottom:2px solid #999; border-bottom:2px solid rgba(255,255,255,0.5); }*/
/*.subpage .mainnavigation-container { background:rgb(96,97,101); background:rgba(255,255,255,0.1); }
.subpage .mainnavigation-container .container { border-bottom:0; }*/
.mainnavigation-container .mainnavigation ul.list-inline { margin-bottom:0; }
.mainnavigation-container .mainnavigation ul.list-inline li { padding-left:20px; padding-right:20px; }
.mainnavigation-container .mainnavigation ul.list-inline li:last-child { padding-right:0; }
.mainnavigation-container .mainnavigation ul.list-inline li a { display:block; padding:17px 15px 14px 15px; color:#626366; text-transform:uppercase; font-weight:400; letter-spacing:2px; text-decoration:none; }
.mainnavigation-container .mainnavigation ul.list-inline li a:hover { color:#ff571d; font-weight:400; }
.mainnavigation-container .mainnavigation ul.list-inline .current-menu-item > a,.mainnavigation-container .mainnavigation ul.list-inline .current-menu-item > a:hover { font-weight:800; color:#ff571d; }

@media (min-width:1200px) {
	.mainnavigation-container > .container { width: 1280px; max-width:100%; }
}


/*Carousel*/
.mainbanner-container { background-color:#333; height:650px; }
.mainbanner-container .carousel {height: 100%;}
.mainbanner-container .carousel .carousel-inner {height: 100%;}
.mainbanner-container .carousel .carousel-inner .item.active {height: 100%; background-position: center bottom; background-size: cover;}
.mainbanner-container .carousel .carousel-caption {  bottom:150px; text-align:center; text-shadow: none;}
.mainbanner-container .carousel .carousel-caption .container {max-width: 100%;}
/*.mainbanner-container .carousel .carousel-caption .carousel-caption-text { border-left:1px solid #fff; }
.mainbanner-container .carousel .carousel-caption .banner-title { padding:20px 0 0 50px; }*/
.mainbanner-container .carousel .carousel-caption .banner-title { padding-top: 40px;}
.mainbanner-container .carousel .carousel-caption .banner-title h1 { margin:0; padding:0; font-size:24px; text-transform:uppercase; letter-spacing: 2px; color: #ff571d;}
.mainbanner-container .carousel .carousel-caption .banner-title h2 { font-weight:600; font-size:46px; text-transform:uppercase; color:#626366; margin-top: 10px;}

/*Subpage banner*/
.subpage-banner {height: 500px; position: relative;}
.subpage-banner-textwrap > .container { padding:0 50px; }
.subpage-banner-textwrap {position: absolute; bottom: 100px; left: 0; width: 100%; text-align: center;}
/*.subpage-banner-textwrap h1 { color:#ff571d; text-transform:uppercase; letter-spacing: 3px; }*/
/*.subpage-banner-textwrap .subpage-banner-desc { color:#fff; font-size: 24px; letter-spacing: 0.75px; font-weight: 400; line-height: 35px; }*/
.subpage-banner-textwrap h1 { margin:0; padding:0; font-size:24px; text-transform:uppercase; letter-spacing: 2px; color: #ff571d;}
.subpage-banner-textwrap h2 { font-weight:600; font-size:46px; text-transform:uppercase; color:#626366; margin-top: 10px;}

.article-banner .subpage-banner-textwrap h1 { font-weight:600; margin-bottom:20px; }

/*Footer*/
footer { position:relative; }
footer .row { display:table; width:50%; }
footer .row > div { display:table-cell; float:none; vertical-align:middle; }
footer .footer-map { position:absolute; width:50%; height:100%; top:0; right:0; }
footer .footer-map .mapdirections { position:absolute; bottom: 25px; left:25px; z-index:1500; }
footer .footer-map .mapdirections > a {  text-transform: uppercase; font-size:18px; color: #ff571d; font-weight: 800; }
footer .company-info { padding:55px 50px; color:#fff; font-weight:400; line-height: 18px; }
footer .company-info h3 { font-size:18px; text-transform:uppercase; margin:0; padding:0 0 10px 0; color:#ff571d; font-weight:800; }
footer .company-info .address { padding-top:15px; }

/*Fonts*/
body { font-family: "proxima-nova",sans-serif; font-size:16px; font-weight:100; }
h1, h2, h3, h4 { font-weight:800; }
h1 { font-size:60px; letter-spacing:0.75px; }
h2 { font-size:36px; letter-spacing:0.75px; }
h3 { font-size:28px; letter-spacing:0.75px; }
h4 { font-size:16px; letter-spacing:2px; }


/*Blocks*/
.gray-container {background: #eee; padding: 0; color: #000;}
.gray-container > .container:first-child > .row { padding-top:40px; padding-bottom:50px; }
.gray-container .col-md-6 { padding-left:65px; padding-right:35px; }
.gray-container .left-block > h2 { margin-top:0; font-size:28px; letter-spacing: 1.7px; font-weight:300; line-height: 35px; color: #626366;}
.gray-container .left-block > h2 > strong { font-weight:800; }
.gray-container .right-block > p { margin-top: 10px; margin-bottom:0; line-height:1.25; }
.gray-container .right-block > p strong { color:#ff561d; }
.gray-container hr {display: block; height: 1px; border: 0; border-top: 1px solid #ff561d; margin: 1em 0; padding: 0; }

.white-container {background: #fff; padding: 0; color: #000;}
.white-container > .container:first-child > .row { padding-top:40px; padding-bottom:50px; }
.white-container .col-md-6 { padding-left:65px; padding-right:35px; }
.white-container .left-block > h2 { margin-top:0; font-size:28px; letter-spacing: 1.7px; font-weight:300; line-height: 35px; color: #626366;}
.white-container .left-block > h2 > strong { font-weight:800; }
.white-container .right-block > p { margin-top: 10px; margin-bottom:0; line-height:1.25; }
.white-container .right-block > p strong { color:#ff561d; }
.white-container hr {display: block; height: 1px; border: 0; border-top: 1px solid #ff561d; margin: 1em 0; padding: 0; }
.icons-title { text-transform:uppercase; }
.icon-wrap {text-align: center; text-transform:uppercase; font-weight:400; letter-spacing: 1px; line-height:1.25; width: 20%; float: left; padding: 10px; font-size: 14px;}
.icon-wrap img {padding-bottom: 15px;}

.block-img { background-size: cover !important; padding: 0; padding-top:28.5%; position: relative; }
.block-img-text {position: absolute; top: 50%; left: 0; width: 100%; text-align: center; color: #fff; transform: translateY(-50%); padding: 0 20px;}
.block-img-link {position: absolute; bottom: 50px; left: 0; width: 100%; text-align: center;}
.block-img-title {text-transform: uppercase; font-size: 32px; font-weight: 700;}
.block-img-desc {padding-bottom: 50px; text-transform: uppercase; font-size: 20px;}

.linkblock-container > .link-block { background: rgb(255,87,29); background:rgba(255,87,29,0.7); padding:21px 0; color:#fff; }
.linkblock-container > .link-block h3 { margin:0 0 5px 0; text-transform:uppercase; letter-spacing: 1.3px; color: #fff !important;}
.linkblock-container > .link-block p { margin:0; font-weight:400; }
.linkblock-container > .link-block > .container > .row { display:table; width:100%; }
.linkblock-container > .link-block > .container > .row > div { display:table-cell; float:none; vertical-align: middle; }
.linkblock-container > .load-block { color:#fff; padding: 112px 0; }
.linkblock-container > .load-block h2 { font-weight:400; letter-spacing: 2px; line-height:1.25; text-transform:uppercase; margin:0; }
.load-block .frm_forms { margin-top: 35px; }
.load-block .frm_primary_label, .load-block .frm_error_style { display:none !important; }
.load-block fieldset { display:table; }
.load-block fieldset > div { display:table-cell; position:relative; }
.load-block .frm_form_field > input { padding: 15px 25px !important; border-radius:0 !important; border:0 !important; height:auto !important; }
.load-block .frm_form_field > input::placeholder { font-style: italic; color:#777; opacity:1; }
.load-block .frm_button_submit { margin:0 !important; border: 1px solid #ff571d !important; border-radius:0 !important; -moz-box-shadow: 0 0 !important; -webkit-box-shadow: 0 0 !important; box-shadow: 0 0 !important; color: #ff571d !important; font-size: 16px !important; text-transform: uppercase; background: none !important; position:absolute; height:100% !important; padding:0 40px !important; top:0; font-weight: 600 !important; letter-spacing: 2px; font-size: 14px !important; }
.load-block .frm_button_submit:hover,.load-block .frm_button_submit:focus,.load-block .frm_button_submit:active { color: #fff !important; background: #ff571d !important; text-decoration: none; }
@media (max-width: 767px) {
	.linkblock-container > .link-block > .container > .row, .linkblock-container > .link-block > .container > .row > div { display:block; text-align:center; width: auto;}
}

.icons-container {padding: 90px 0;}
.icons-title {text-align: center;}
.icons-container .icons-title { color:#ff561d; font-weight:600; letter-spacing: 3px; margin-bottom:40px; }
.icon {text-align: center; padding: 0 40px; position: relative;}
.icon-arrow {position: absolute; top: 36%; transform: translateY(-50%); left: -20px;}
.icon-text {text-transform: uppercase; margin-top:20px; }

.customers-container {padding: 65px 0; background: #eaeaea;}
.customers-title {text-align: center; text-transform:uppercase; font-weight:bold; font-size:16px; letter-spacing:3px; color:#626366; margin-bottom:25px; }
.customer-comment {padding: 20px 15px;}
.customer-comments { display:table; width:100%; }
.customer-comments > .customer-comment { display:table-cell; float:none; position:relative; }
.customer-comments > .customer-comment:first-child { padding-right:40px; }
.customer-comments > .customer-comment:last-child { padding-left:40px; }
.customer-comments > .customer-comment:last-child > .customer-name { left: 40px; }
.customer-company {color: #ff571d; text-transform: uppercase; margin-bottom: 10px; font-weight:400; font-size:13px; }
.customer-name {color: #8A8A8A; position:absolute; bottom:15px; left:15px; padding-left:20px; font-size:17px; }
.customer-name::before { content:""; display:block; width:13px; border-bottom:1px solid #8A8A8A; position:absolute; top:12px; left:0; }
.customer-text { font-size: 18px; line-height:25px; padding-bottom:18px; color:#182630; }

.highlight-wrap { padding-top: 40px; padding-bottom: 40px; }
.highlights-container hr {display: block; height: 1px; border: 0; border-top: 1px solid #ff561d; margin: 1em 0; padding: 0; }
.highlight-wrap h2 { text-transform: uppercase; color: #ff561d;font-size:24px; margin-bottom:20px; margin-top: 0;}
.highlight-wrap > .container-fluid > .row { display:table; width:100%; }

.hl-button {padding-top: 30px;}
/*.highlight-wrap > .container-fluid > .row > div.hl-button { display:table-cell; float:none; vertical-align:bottom; }*/
.highlight-wrap .col-md-6, .highlight-wrap .col-md-8 { color:#626366;  padding: 0 70px; }
/*.highlights-container > .container > .row > .col-md-12:last-child { display:none; }
.highlights-container > .container > .row > .highlight-wrap:nth-last-child(2) { padding-bottom:100px; }*/
.highlights-container > .container > .row > .col-md-12:first-child { padding-top:80px; }
.highlights-container > .container > .row > .col-md-12:last-child { padding-bottom:100px; }
.highlight-img-left {text-align: right;}
.highlight-img-right {text-align: left;}

.article-image {margin-top: -60px; padding: 0 0 40px;}
.article-image img {width: 100%;}
.article-container { padding-bottom:70px; }
.article-container h2 { color: #ff561d; font-size: 24px; margin-bottom: 20px; font-weight:400; }
.article-container h3 { color: #000; font-size: 16px; font-weight:600; }

.backlink-container { margin-bottom:90px; }
.backlink-container .btn-orange > i { margin-right:10px; }

.contact-wrap {padding-bottom: 30px; font-weight: normal;}
.contact-name {font-size: 18px; font-weight: 700;}
.contact-title {padding-bottom: 5px; color: #ff561d; text-transform: uppercase;}
.contact-company {color: #626366; font-weight: 700;}
.contact-orange {color: #ff561d;}

.content-container {padding: 60px 0;}

.frm_form_fields  {font-family: "proxima-nova",sans-serif !important;}
.form-field textarea, .form-field input {border-radius: 0 !important;}
h3.frm_form_title {color: #ff561d !important; font-size: 24px !important; margin: 20px 0 !important; font-weight:600 !important; font-family: "proxima-nova",sans-serif !important;}
.frm_button_submit {color: #ff571d !important; font-size: 16px !important; text-transform: uppercase !important; background: none !important; display: inline-block !important; padding: 11px 20px !important; border: 1px solid #ff571d !important; text-decoration: none !important; font-weight: 700 !important; letter-spacing: 2px !important; border-radius: 0 !important;}
.frm_button_submit:hover, .frm_button_submit:focus {color: #fff !important; background: #ff571d !important; text-decoration: none !important;}
.frm_primary_label {text-transform: uppercase !important; font-family: "proxima-nova",sans-serif !important;}
#frm_form_7_container {padding-right: 30px;}

.page-not-found {padding: 135px 15px 80px; font-size: 28px; text-align: center;}

@media only screen and (max-width : 1200px) {
	.icon-wrap {width: 50%;}
	.mainnavigation-container .mainnavigation ul.list-inline li {padding: 0;}
	.mainnavigation-container .mainnavigation ul.list-inline li a {padding-left: 10px; padding-right: 10px;}
}

@media only screen and (max-width : 991px) {
	.mobilenavi-container { display:block; }
	.mainnavigation { display:none; }
	.mainnavigation-container .container { border:0; }
	.block-img { padding-top: 46%; }
	.icon-arrow {top: 10px; left: 50%; transform: translateX(-50%) rotate(90deg);}
	.icon {padding-top: 60px;}
	.hl-img {text-align: center; padding-top: 15px;}
	footer .row {display: block; width: 100%;}
	footer .footer-map {position:static; width: 100%; height: 300px;}
	footer .row > div {display: block; float: left;}
	footer .company-info, .footer-logo {padding: 25px 0;}
	footer .footer-map .mapdirections {left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);}
	.white-container .col-md-6 {padding: 0 15px;}
	.mainbanner-container .carousel .carousel-caption {bottom: 100px;}
}

@media only screen and (max-width : 767px) {
	.icon-wrap {width: 100%;}
	.subpage-banner-textwrap > .container {padding: 0 15px;}
	.linkblock-button {padding-top: 15px;}
	.customers-container {padding: 30px 15px;}
	.contact-wrap img {width: 130px; max-width: 100%;}
	.contact-wrap {text-align: center;}
	.contact-name {padding-top: 15px;}
}

@media (max-width: 580px) {
	.block-img { padding-top:0; height:320px; }
	.block-img-title {font-size: 24px;}
	.carousel-caption {left: 0; right: 0;}
	.mainbanner-container .carousel .carousel-caption .banner-title h2 {font-size: 30px;}
	.subpage-banner-textwrap h2 {font-size: 30px;}
	.highlight-wrap .col-md-6, .highlight-wrap .col-md-8 {padding: 0 15px;}
	.highlight-wrap h2 {font-size: 20px;}
}