/*
Theme Name: OBU City
Theme URI: http://obucity.hu/
Description: This is the obucity.hu site's new and official theme
Author: Gacsal Patrik
Version: 0.1
License: GNU General Public License v2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, theme options, multiple layouts, multiple color schemes, responsive
*/

@import url(https://fonts.googleapis.com/css?family=Amatic+SC:400,700&subset=latin,latin-ext);
@import url(https://fonts.googleapis.com/css?family=Khand&subset=latin,latin-ext);

html,body{
  margin:0px;
  padding:0px;
}
div{
  box-sizing: border-box;
}

#page-wrapper{
  margin:0px;
  padding:0px;
  width:100%;
  display:block;
}
#fp-page-content{
  display:block;
  width:100%;
  height:300vw;
  background-image: url('images/fp/background.jpg');
  background-size: 100% auto;
  background-repeat: no-repeat;
  text-align:center;
}
.fp-content{
  position:absolute;
  width:100%;
  margin:0px;
  display:block;
  overflow:hidden;
  text-align:center;
}


@keyframes fp-logo-anim{
  0%   {width:30%;opacity:0}
  80%  {width:18%;opacity:1}
  100% {width:21%;opacity:1}
}
#fp-title #obu-city-logo{
  top:24vw;
  left:50vw;
  margin:0px;
  width: 21%;
  animation: fp-logo-anim .8s ease-out;
}


.fp-content h1{
  font-family: 'Amatic SC', cursive;
  font-size: 3.6vw;
  margin: 1vw 0px 1vw 0px;
}
.fp-content h2{
  font-family: 'Khand', sans-serif;
  font-size: 1.5vw;
  font-weight:400;
  margin:0px;
  line-height: 1.5em;
}

.fp-content h2 a{
  text-decoration:none;
  text-transform:uppercase;
  font-family: 'Khand', sans-serif;
  font-size:1.2vw;
  color:black;
  margin-top:2vw;
  display:inline-block;
  background-repeat:no-repeat;
  background-size:auto 100%;
  line-height:2.12vw;
  height:3vw;
  transition: margin 0.2s;
}
#fp-parking h2 a, #fp-e-menetlevel h2 a, #fp-application h2 a{
  background-image:url('images/fp/button-right.png');
  background-position: right center;
  padding-right:2vw;
}
#fp-e-vignette h2 a, #fp-guard h2 a{
  background-image:url('images/fp/button-left.png');
  background-position: left center;
  padding-left:2vw;
}
@keyframes fp-link-left{
  0%   {margin-right:0vw}
  50%  {margin-right:3vw}
  100% {margin-right:0vw}
}
@keyframes fp-link-right{
  0%   {margin-right:0vw}
  50%  {margin-right:-3vw}
  100% {margin-right:0vw}
}
#fp-parking h2 a:hover, #fp-e-menetlevel h2 a:hover, #fp-application h2 a:hover{
  /*margin-left:3vw;*/
  animation:fp-link-right 0.3s;
}
#fp-e-vignette h2 a:hover, #fp-guard h2 a:hover{
  /*margin-right:3vw;*/
  animation:fp-link-left 0.3s;
}

#fp-title h1{
  margin: 8vw 0px 0px 0px;
}
#fp-title h2{
  margin-top:22vw;
}

.fp-content img{
	transform:translate(-50%,-50%);
	-webkit-transform:translate(-50%,-50%);
	position:absolute;
	width:11%;
}

@keyframes fp-img-anim{
  0%   {transform: translate(-50%,-50%) scale(1,1)} 
  50%  {transform: translate(-50%,-50%) scale(1.2,1.2)}
  100% {transform: translate(-50%,-50%) scale(1,1)}
}

.fp-content img:hover{
  animation:fp-img-anim 0.2s ease-out;
}

#fp-parking{
	top:45vw;
	padding: 6vw 0px 0px 54vw;
}
#fp-parking img{
  top:13vw;
  left:52vw;
}
#fp-e-vignette{
  top:76vw;
  padding: 13vw 60vw 0px 0px;
}
#fp-e-vignette img{
  top:14vw;
  left:39vw;
}
#fp-e-menetlevel{
  top:110vw;
  padding: 20vw 0px 0px 58vw;
}
#fp-e-menetlevel img{
  top:19vw;
  left:63vw; 
}
#fp-guard{
  top:150vw;
  padding:18vw 55vw 0px 0px;
}
#fp-guard img{
  top:19vw;
  left:42.5vw;
}
#fp-application{
  top:190vw;
  padding:18vw 0px 0px 50vw;
}
#fp-application img{
  top:17vw;
  left:59vw;
}
#fp-foot{
  top:240vw;
  padding:40vw 0px 66px 20px;
}
#fp-foot img{
  width:29%;
  top:27vw;
  left:50vw;
}
@media screen and (max-width:1080px){
	#fp-parking{
		top:44vw;
	}
	#fp-e-vignette{
	  top:75vw;
	}
	#fp-e-menetlevel{
	  top:109vw;
	}
	#fp-guard{
	  top:149vw;
	}
	#fp-application{
	  top:188vw;
	}
	#fp-foot{
	  top:238vw;
	}
}
@media screen and (max-width:660px){
	.fp-content img{
		width:16%;
	}
	#fp-parking{
		top:43.5vw;
	}
	#fp-e-vignette{
	  top:74vw;
	}
	#fp-e-menetlevel{
	  top:108vw;
	}
	#fp-guard{
	  top:146.6vw;
	}
	#fp-application{
	  top:186vw;
	}
	#fp-foot{
	  top:235vw;
	}
}
@media only screen and (max-device-width: 480px){
	.fp-content img{
		width:16%;
	}
	#fp-parking{
		top:45.5vw;
	}
	#fp-e-vignette{
	  top:78vw;
	}
	#fp-e-menetlevel{
	  top:112vw;
	}
	#fp-guard{
	  top:152vw;
	}
	#fp-application{
	  top:193vw;
	}
	#fp-foot{
	  top:243vw;
	}
}