﻿/*------------------Fading-----------------*/
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}
/*------------------Fading end-----------------*/



/*-------------------Text style-------------------*/
.centered {
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

.warn{
	font-size: 12px;
	color: red;
	display: inline;
}

#cim{
	font-family: "Helvetica Neue";
	font-size: 2.5em;
	font-size: 3.5vw;
	letter-spacing: 5px;
}

h2{
	font-weight: normal;
	padding-left: 16vw;
	margin: 0px;
	font-family: "Helvetica Neue";
	font-size: 1.3em;
	font-size: 1.5vw;
	letter-spacing: 1.5px;
	 width: 40vw;
}

a:link {
		color: #AC282E;
	}
	
a:visited{
	color: #AC282E;
}	
	
a:hover{
		color: white;
	}


#form_cim{
	font-size: 3vw; /* X px/16=Y em */
}
.szla_head{font-weight: bold; text-align:left;}
.cont{padding-top: 5vw; text-align: center;}

#route, results{ font: normal 13px/100% Helvetica Neue;}

.textbox {
    height: 2.5vw;
    width: 25vw;
    border: solid 1px #E5E5E5;
    outline: 0;
    font: normal 13px/100% Helvetica Neue;
    background: #FFFFFF url('bg_form.png') left top repeat-x;
    background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
    background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
    box-shadow: rgba(0, 0, 0, 0.1) 0 0 8px;
    -moz-box-shadow: rgba(0, 0, 0, 0.1) 0 0 8px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0 0 8px;
}

.textbox:focus {
    border-color: #C9C9C9;
    -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0 0 8px;
}   

.commentbox{
    height: 10vw;
    width: 25vw;
    border: solid 1px #E5E5E5;
    outline: 0;
    font: normal 13px/100% Helvetica Neue;
    background: #FFFFFF url('bg_form.png') left top repeat-x;
    background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
    background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
    box-shadow: rgba(0, 0, 0, 0.1) 0 0 8px;
    -moz-box-shadow: rgba(0, 0, 0, 0.1) 0 0 8px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0 0 8px;
}

.commentbox:focus {
    border-color: #C9C9C9;
    -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0 0 8px;
} 
/*-------------------Text style end-------------------*/

/*-------------------Buttons-------------------*/
.gomb{
	display: block;
	width: 14vw;
	height: 14vw;
	position:absolute;
	-o-transition:.5s;
  	-ms-transition:.5s;
  	-moz-transition:.5s;
  	-webkit-transition:.5s;
  	transition:.5s;
  	border-radius: 14vw;
	-webkit-border-radius: 14vw;
	-moz-border-radius: 14vw;
}

.gomb:hover {
	width: 15vw;
	height: 15vw;
}

#vissza{right:15vw; margin-top: 0vw;}
#vissza:hover{right: 14.5vw; margin-top: -0.5vw;}

#logo{left: 15vw; margin-top:0vw;}
#logo:hover{left: 14.5vw; margin-top: -0.5vw;}

#fuvaroztatoknak{margin-left: 2vw; margin-top: 0vw}
#fuvaroztatoknak:hover{margin-left: 1.5vw; margin-top:-0.5vw;}

#fuvarozoknak{margin-left:37vw; margin-top: 0vw;}
#fuvarozoknak:hover{margin-left: 36.5vw; margin-top:-0.5vw;}

#bemutatkozas{margin-left: 19.5vw; margin-top: 7.5vw;}
#bemutatkozas:hover{margin-left: 19vw; margin-top: 7vw;}

#elerhetosegek{margin-left: 2vw; margin-top: 15vw;}
#elerhetosegek:hover{margin-left: 1.5vw; margin-top: 14.5vw;}

#szamlazas{margin-left: 37vw; margin-top: 15vw;}
#szamlazas:hover{margin-left: 36.5vw; margin-top: 14.5vw;}


.info{
	position: relative;
	top: 3px;
	left: 3px;
	width: 2vw;
	height: 2vw;
	-o-transition:.5s;
  	-ms-transition:.5s;
  	-moz-transition:.5s;
  	-webkit-transition:.5s;
  	transition:.5s;
}

.info:hover{
	width:2.2vw;
	height:2.2vw;
	top: 2px;
	left: 2px;
}




.kuldes{
	width:10vw;
	height:10vw;
	position:absolute;
	
	-o-transition:.5s;
  	-ms-transition:.5s;
  	-moz-transition:.5s;
  	-webkit-transition:.5s;
  	transition:.5s;
}

.kuldes:hover{width:11vw; height: 11vw;}

#kuldes1{left: 25vw; top: 100vw;}
#kuldes1:hover{left: 24.5vw; top: 99.5vw;}

#kuldes2{left: 25vw; top: 71vw;}
#kuldes2:hover{left: 24.5vw; top: 70.5vw;}


#kuldes3{left: 25vw;}
#kuldes3:hover{left: 24.5vw;}



#szamol{
	width:30px;
	height:30px;
	position:absolute;
	margin: 5px;
	top: 25vw;
	right:0vw;
	-o-transition:.5s;
  	-ms-transition:.5s;
  	-moz-transition:.5s;
  	-webkit-transition:.5s;
  	transition:.5s;
}

#szamol:hover{
	width:33px;
	height: 33px;
	top:24.75vw;
	right: 0vw;
}

.contact_s{
	position: absolute;
	width: 2.5vw;
	height: 2.5vw;
	-o-transition:.5s;
  	-ms-transition:.5s;
  	-moz-transition:.5s;
  	-webkit-transition:.5s;
  	transition:.5s;
  	border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
}

.contact_s:hover{width:3vw; height:3vw;}

#fb{margin-left: 70.5vw; margin-top: 8.25vw;}
#fb:hover{margin-left: 70.25vw; margin-top: 8vw;}

#tel{margin-left: 69vw; margin-top: 11.5vw;}
#tel:hover{margin-left: 68.75vw; margin-top: 11.25vw;}

#mail{margin-left: 66vw; margin-top: 13.5vw;}
#mail:hover{margin-left: 65.75vw; margin-top: 13.25vw;}

#fb2{margin-left: -2.5vw; margin-top: 8.25vw;}
#fb2:hover{margin-left: -2.75vw; margin-top: 8vw;}

#tel2{margin-left: -1vw; margin-top: 11vw;}
#tel2:hover{margin-left: -1.25vw; margin-top: 10.75vw;}

#mail2{margin-left: 1vw; margin-top: 13.5vw;}
#mail2:hover{margin-left: 0.75vw; margin-top: 13.25vw;}





/*-------------------Buttons end-------------------*/


/*-------------------Layout----------------------*/

body{
	width:100%;
	background-image: url("mmmfuvar_iroda_background.jpg");
    background-repeat: no-repeat;
    background-color: grey;
    background-attachment: fixed;
    margin-left: auto;
    margin-right:auto;
    margin-bottom: 1200px;
}
#header{
	margin-top: 3vw;
	width: 70vw;
	height: 10.5vw;
	margin-left:auto;
	margin-right:auto;
}

#cim{padding-top: 3vw; padding-left: 16vw; }
#cim2{padding-left: 16vw;}

.main{
	margin-left: auto;
    margin-right: auto;
    margin-top: 3vw;
    width: 55vw;
	font-family: "Helvetica Neue";	
	font-size: 2vw;
	line-height: 2.2vw;
}

.kitolt{
	table-layout: auto;
	text-align: left;
}


.kitolt td{	
	vertical-align: top;
	white-space: nowrap;
}

#fade {  /*áttűnés, tartalom*/
	 animation: fadein 2s;
    -moz-animation: fadein 2s; /* Firefox */
    -webkit-animation: fadein 2s; /* Safari and Chrome */
    -o-animation: fadein 2s; /* Opera */
}

#form{padding-left: 5%;}

.rdio{position: relative;}

#menny1{width: 10vw;}
#tomeg{width: 10vw;}
#datum1, #datum2, #datum3, #datum4{width: 10vw;}

iframe{
	line-height:2px;
	width: 25vw;
	position: relative;
	height: 15vw;
	border: 0px;
	line-height: 0;
	overflow: hidden;
}

fieldset{width:40%;}

#misi{
	vertical-align: middle;
	margin: 10px;
	width: 18vw;
 	height: 18vw;
	display: block;
	border-radius: 18vw;
	-webkit-border-radius: 18vw;
	-moz-border-radius: 18vw;
}

#contacts{padding-top: 20px;vertical-align:middle;}

#intro{text-align:justify;text-indent: 30px;}


/*----------------Layout end-------------------*/

/*----------------Ad styling---------------*/
.ad{
	padding-top: 80px;
	width: auto;
	text-align: left;

}

.ad td{
	vertical-align: center;
}

.ad img{

	width: 400px;
	
}

.ad img:hover{
  	-webkit-transition: all .3s ease-in;
	-moz-transition: all .3s ease-in;
	-ms-transition: all .3s ease-in;
	-o-transition: all .3s ease-in;
	transition: all .3s ease-in;
	opacity: 1;
	transform: scale(1.2);
	-ms-transform: scale(1.2); /* IE 9 */
	-webkit-transform: scale(1.2); /* Safari and Chrome */
}

.print{
	width: 40px !important;
}

#printable{
	font-size: 50%;
}









  














