/*
Theme Name: Ramoturvallisuuspalvelut child theme of Vantage
Author: Ali Nadhum, Ecome Finland Oy 
Author URI: https://ecome.fi/
Description: Customized version of Vantage Theme used purpose for Ramoturvallisuuspalvelut.fi.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/*--Header--*/
body.responsive.layout-full #page-wrapper .full-container{
	max-width: 100%;
}
body.responsive.layout-full #page-wrapper .menu-paavalikko-container{
	max-width: 1080px;
}
body.responsive.layout-full #header-sidebar{
  position: absolute;
  right: 0;
  top: 0;
  margin-right: 20px;
}
body.responsive.layout-full #acx-social-icons-widget-2 h3{
	display: none;
}
body.responsive.layout-full #header-sidebar #acurax_si_widget_simple a{
	margin-right: 10px;
  	margin-top: 30%;
  	display: inline-block;
}
/*-- Meta-slider --*/
#metaslider-demo .content{
	height: 200px;
	margin-top: 13%;
	background-color: rgba(255,255,255,0.6);
  	display: table;
}
#metaslider-demo .content h1{
	display: table-cell;
  	vertical-align: middle;
  	font-size: 3.7em;
}
#metaslider-demo .ms-default-image{
  height: 700px;
  min-height: 700px;
}
/*-- Main ---*/
#main{
	padding: 0;
}
#main .entry-main h1{
    font-size: 2.3em;
    color: #F32232;
    font-weight: 900;
    border-bottom: 1px solid #444;
    margin-top: 0;
    margin-bottom: 2%;
    padding-bottom: 1%;
}
article.post .entry-header, article.page .entry-header{
	margin-bottom: 0;
}
#main #yritys{
  	text-align: left;
  	width: 100%;
  	background-image: url(https://ramoturvallisuuspalvelut.fi/wp-content/uploads/2017/05/lukkonikkari_landing_harmaa5.png);
}
#main #yritys .entry-header{
	width: 60%;
  	float: left;
  	padding: 30px;
}
#main #yritys .entry-content{
	color: #444;
    font-size: 1.2em;
}
#main #yritys .entry-image{
    float: right;
    min-height: 400px;
    background-repeat: no-repeat;
    background-size: contain;
    width: 30%;
    position: relative;
    background-position: bottom;
    margin: 20px;
  	margin-bottom: 0;
}
#main #turvallisuustek{
	background-image: url(https://ramoturvallisuuspalvelut.fi/wp-content/uploads/2017/05/camera-1124585_640.jpg);
	background-repeat: no-repeat;
	background-size: cover;
  	background-position: 100% 40%;
}
#main #turvallisuustek .container{
  	padding: 30px;
	background-color: rgba(0,0,0,0.5);
  	min-height: 300px;
}
#main #turvallisuustek h1{
  	border-bottom: 1px solid #fff;
  	width: 60%;
}
#main #turvallisuustek .entry-content, #main #otayhteytta .entry-content{
	width: 60%;
	float: left;
  	color: #fff;
    font-size: 1.2em;
}
#main #turvallisuustek .entry-image{
    background-size: contain;
    background-repeat: no-repeat;
    min-height: 300px;
    width: 30%;
    right: 0;
    position: absolute;
    margin-top: -5%;
    background-position: center;
}
#main #otayhteytta{
	background-image: url(https://ramoturvallisuuspalvelut.fi/wp-content/uploads/2017/05/IMG_0057.jpg);
	background-repeat: no-repeat;
	background-size: cover;
  	background-position: 100% 50%;
}
#main #otayhteytta h1{
	border-bottom: 1px solid #444;
  	width: 40%;
    margin-bottom: 2%;
    padding-bottom: 1%;
  	
}
#main #otayhteytta .container{
	padding: 30px;
  	background-color: rgba(255,255,255,0.7);
  	min-height: 300px;
}
#main #otayhteytta .entry-content{
	color: #444;
  	width: 25%;
  	float: right;
}
#main #otayhteytta .entry-content span{
	color: #fff !important;
}
#main #otayhteytta #lomake{
	max-width: 100%;
  	overflow: auto;
}
#main #otayhteytta #lomake, #main #otayhteytta .entry-content{
  	background-color: rgba(0,0,0,0.5);
    padding: 40px;
}
#main #otayhteytta #lomake .right_col{
    float: left;
  	display: inline-block;
}
#main #otayhteytta #lomake .left_col{
	float: left;
  	margin-right: 2%;
    display: inline-block;
}
#main #otayhteytta #lomake .wpcf7-form{
  	float: left;
}
#main #otayhteytta #lomake .wpcf7-form p{
	margin-top: 0;
}
#main #otayhteytta #lomake .wpcf7-form label{
	font-size: 1.2em;
  	color: #fff;
  	display: inline-block;
}
#main #otayhteytta #lomake .wpcf7-form input[type="text"], #main #otayhteytta #lomake .wpcf7-form textarea, #main #otayhteytta #lomake .wpcf7-form input[type="email"]{
	padding: 8px;
}
#main #otayhteytta #lomake .submit_btn{
	display: inline-block;
  	width: 100%;
}
#main #otayhteytta #lomake .wpcf7-form input[type="submit"]{
	padding: 15px 50px;
  	background: #fff;
	color: #2f3033;
  	transition: background 0.5s linear;
  	display: inline-block;
}
#main #otayhteytta #lomake .wpcf7-form input[type="submit"]:hover{
	background: #F32232;
  	color: #fff;
}
.wpcf7-form-control-wrap{
	display: inline-block;
}
div.wpcf7-validation-errors{
	color: #fff;
  	border: 2px solid #F32232;
}
div.wpcf7-mail-sent-ok{
	color: #fff;
}
#main #otayhteytta #lomake #text-2{
    color: #fff;
    max-width: 30%;
    float: left;
  	font-weight: bold;
}
#main #otayhteytta #lomake #text-2 h3, #main #otayhteytta #lomake #text-2 a{
	color: #fff;
}
#main #otayhteytta #lomake #text-2 a:hover{
	color: #f32232;
}
/*-- Media queries --*/
/* ----------- Phones ----------- */
/* Portrait and Landscape */
@media only screen and (min-width: 150px) and (max-width: 660px){
  html{
  	overflow-x: hidden;
  }
  #masthead{
  	padding: 15px;
	padding-bottom: 0;
  }
  #metaslider-demo .ms-default-image{
  	min-height: 200px;
	height: 300px;
  }
  #metaslider-demo .content{
    height: 70px;
    margin-top: 35%;
  }
  #metaslider-demo .content h1{
  	font-size: 2em;
  }
  #main #yritys .entry-header{
    width: 90%;
    padding: 15px;
  }
  #main #yritys .entry-content{
  	font-size: 1.1em;
  }
  #main #yritys .entry-image{
	min-height: 420px;
	background-size: cover;
	width: 100%;
	margin: 0;
  }
  #main #turvallisuustek .container, #main #otayhteytta .container{
  	padding: 15px;
    min-height: 450px;
  }
  #main #turvallisuustek h1{
  	width: 100%;
	font-size: 2em;
  }
  #main #turvallisuustek .entry-content{
  	width: 70%;
    font-size: 1.1em;
  }
  #main #otayhteytta h1{
  	width: 100%;
    font-size: 2em;
  }
  #main #otayhteytta #lomake{
  	padding: 20px;
  }
  #main #otayhteytta #lomake div.wpcf7{
  	width: 100%;
    max-width: 100%;
  }
  #main #otayhteytta #lomake #text-2{
  	float: none;
    max-width: 100%;
    font-size: .9em;
  }
  #main #otayhteytta #lomake .wpcf7-form{
  	float: none;
  }
  #main #otayhteytta #lomake .left_col, #main #otayhteytta #lomake .right_col, #main #otayhteytta #lomake .wpcf7-form input[type="text"], #main #otayhteytta #lomake .wpcf7-form input[type="submit"], #main #otayhteytta #lomake .wpcf7-form input[type="email"], #main #otayhteytta #lomake .wpcf7-form textarea{
  	max-width: 100%;
    width: 100%;
  }
  #main #otayhteytta #lomake .wpcf7-form input[type="submit"]{
  	padding: 14px 100px;
  }
  .submit_btn{
  	margin-top: 3%;
  }
  .layout-full #colophon{
  	padding: 15px;
  }
  #colophon #theme-attribution{
  	width: 100% !important;
    display: inline-block;
  }
  #colophon #theme-attribution a img{
  	margin-top: 0 !important;
  }
}
/* Landscape */
@media only screen and (min-width: 150px) and (max-width: 660px) and (orientation : landscape){
  body.responsive.layout-full #page-wrapper .menu-paavalikko-container{
  	display: none;
  }
  .menu-mobilenav-container{
  	display: block !important;
  }
  #metaslider-demo .content {
    height: 120px;
    margin-top: 13%;
  }
  #main #yritys .entry-header{
  	padding: 20px;
  }
  #main #yritys .entry-image{
  	background-size: contain;
  }
  #main #turvallisuustek .container, #main #otayhteytta .container{
  	min-height: 320px;
    padding: 20px;
  }
  #main #turvallisuustek .entry-image{
  	min-height: 250px;
    margin-top: 0;
  }
  #main #otayhteytta #lomake .submit_btn{
  	width: 92%;
  }
}
/* ----------- iPad ----------- */
/* Portrait and Landscape */
@media only screen and (min-width: 768px) and (max-width: 1024px){
  #metaslider-demo .content{
  	margin-top: 32%
  }
  #main #yritys .entry-header{
  	max-width: 50%;
  }
  #main #yritys .entry-image{
  	width: 30%;
  }
  #main #otayhteytta h1{
  	max-width: 100%;
    width: 100%;
  }
  #main #otayhteytta #lomake .left_col, #main #otayhteytta #lomake .right_col{
  	max-width: 100%;
  }
  #main #otayhteytta #lomake #text-2{
  	float: left;
    display: inline-block;
    max-width: 100%;
  }
  .submit_btn{
  	margin-top: 4%;
  }
}