markup/styles.css

font-face {
    font-family: Roboto; 
    src: url(Roboto-Condensed.ttf); 

}
body{
	margin: 0px;
	padding: 0px;
}
 * {padding: 0px;
 	text-decoration: 
 	none;
 	box-sizing:border-box;}
body header ul {
	display:flex;
	justify-content:center;
	
}
header{
	
	display: flex;
	width: 100%;
	
	background-color: #71d4b8;
	padding: 0 5%;
	justify-content:space-between;
	align-items: center;
	
}
header a img{

	max-height: 12vh;
	max-width: 14vh;
	width: 17vw;
	height: 12vh;
	min-height: 12vh;
	min-width: 17vw;
}
header ul {}
header a {
	
	text-transform: uppercase;
	
}
header ul li a {margin: 0 2vw;
	font-size: 2.8vh;
	font-family: Roboto;
	color: white;}
header a:hover{
	color: black;
}
section{
	background: url(img/2017-06-19_20-43-25.png);
	background-repeat: no-repeat;
	
	background-size: 100%;
	 
	box-sizing: content-box;
	padding-bottom: 14%;
}
.togo{
} 
.sps{
margin-top: 0px;
}
.con{margin-bottom: 0px;}
.n{
	color: white;
	background: #71d4b8;
	font-size: 1.5em;
	border:1px solid #71d4b8;
	border-radius: 5px;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: center;
	align-items: center;
	
	padding: 1vh;
	margin-top: 4vh;
}
.n:hover{
	color: #767676;
	border:1px solid #767676 ;
}
.i h1{font-size: 3em;

	color: #767676;
	text-align: center;
}
.all{
	margin-top: 4%; 
	display: flex;
	justify-content: space-around;
	align-items: flex-start;
	font-size: 3vh;
	max-width: 100%;
	flex-wrap: wrap;
	width: 70%;
	
}
.rgi{

	width: 100%;
}
.picture1{display: flex;
	justify-content: flex-start;
	align-items: center;
}
.r{border-radius: 16px;
	margin-left: 0%;
}
  .picture1:hover {
    border: 5px solid white;
   border-radius: 20px;
   }
  .picture1 {
    color: white;
    border: 5px solid #71d4b8;
    border-radius: 20px;
   }
   .picture2 {
   display: flex;
	justify-content: flex-start;
	align-items: center;

   }
   .z1:hover{ transition: 0.5s;
   	margin: 5% 0;}

   	.z2:hover{ transition: 0.5s;
   	margin: 5% 0;}
   	.z3:hover{ transition: 0.5s;
   	margin: 5% 0;}
   .z1{
	height: 6vh;
	background: url(img/fp11.png);
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.1em;
	color: white;
}
.z2{
	color: white;
	height: 6vh;
	width: 100%;
	background: url(img/fp21.png);
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.1em;
}
.z3{
	height: 6vh;
	width: 100%;
	background: url(img/fp31.png);
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.1em;
	color: white;
}
.text{text-align: left;
	
	color: white ;background: #71d4b8;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: center;
	
	height: 33vh;
padding: 2vh 0;

}
.block{  display: flex;
	-webkit-flex-direction: column;
	-moz-flex-direction: column;
	-ms-flex-direction: column;
	-o-flex-direction: column;
	flex-direction: column;
	
}
.hi p{
		color: #767676;
		text-align: center;
		font-size: 5vh;
		font-family: Roboto; */
}
.hip p{font-size: 30px;
	padding-top: 5vh;
	color: white;
	text-align: center;

}
.togo{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-flex-direction: column;
	-moz-flex-direction: column;
	-ms-flex-direction: column;
	-o-flex-direction: column;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	font-family: Roboto;
	padding-top: 9%;
	padding-right: 30%;
}
.i{
	font-size: 6vh;
	font-family: Roboto;
	color: #767676;
	text-align: center;
}
.min p{
	text-align: center;
	color: white;
	font-size: 20px;
	padding: 0vh 0px 0vh 0px;
}
	
.m{ font-weight: 100;
	font-size: 1.2em;
 color: #767676;
 
 text-align: center;
}

.text1{text-align: center;
	color:  #71d4b8;

	background-color:  #71d4b8;
	margin-left: 5%;
	justify-content: center;
	align-items: center;
	display: flex;
	box-sizing:inherit;
	width: 90%;
}
.part2{
	font-family: Roboto; */
	margin-top: 5vh;
	background-color:  #71d4b8;
}
.pzdts{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	text-decoration: none;
	flex-wrap: wrap;
}
.pzdts li {
	padding-bottom: 5vh;
	text-decoration: none;
-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	-ms-box-sizing: content-box;
	box-sizing: content-box;
	margin: 6vh;
}

.test{
	display: flex;
	justify-content: center;

	box-sizing: content-box;


	flex-wrap: wrap;
	flex-direction: row;
}
	


.part3{
	 */
	 flex-wrap: wrap;
	 flex-direction: column;
	 font-family: Roboto; */
	 flex-direction: column;
	 display: -webkit-flex;
	 display: -moz-flex;
	 display: -ms-flex;
	 display: -o-flex;
	 display: flex;
	 justify-content: center;
	 background: url(img/ppl.png);
	 background-size: 100% 100%;
	 background-repeat: no-repeat;
}
li{
	list-style-type: none;
}
.ava{
	margin-top: 3%;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	-ms-box-sizing: content-box;
	box-sizing: content-box;
	display: flex;
	justify-content: center;
	-ms-align-items: flex-start;
	align-items: flex-start;
	flex-wrap: wrap;
}
.ppl{
	color: #767676;
		padding-top: 5vh;
		text-align: center;
	font-size: 30px;
	
}
.mblock{

	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	-ms-box-sizing: content-box;
	box-sizing: content-box;
}
.ava img{
	border-radius: 100px;}

.more{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: center;
	
	width: 100%;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	-ms-box-sizing: content-box;
	box-sizing: content-box;
}
.size{
	display: flex;
	flex-direction: column;
	align-items: center;
	font-family: Roboto; */
}
.av{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: space-between;

}
.god img{float:bottom;


	
}
.con{font-family: Roboto; */color:;color: white;}
.onemore{
	margin: 0;
}
.god{margin: auto;
	box-sizing: content-box;
	width: 28%;

		
}
.god p{ text-align: center;
 }
.box-transformer{box-sizing: content-box;}
.box-transformer div p{
	color: #767676;
	

}
.dont{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: center;

}
.txt{
	font-size: 18px;
	padding: 1vh;
	
	margin-top: 0;
	}
.foot{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: space-around;
	align-items: center;
	
	
}
.bord{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid #767676;
	border-radius: 5px;
	padding: 1vh 4%;
	
	margin-bottom: 4vh;
	min-width: 18%;
}
	
.bord a{
	color: #767676;
}		
.bord1{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #71d4b8;
	
	border: 1px solid #71d4b8;
	border-radius: 5px;
	padding: 1vh 4%;
	margin-bottom: 4vh;
	min-width: 18%;
}
.bord1 a{
	color: white;

}
.bord:hover
{
	border: 1px solid black;
	border-radius: 5px;
}
.bord1:hover
{border: 1px solid #767676;
	
}
.maps{
	position: relative;
	z-index:1 ;
	height: 80vh;
}
.abs{
	margin-left: 10%;
	margin-top: -160px;
	position: absolute;
	z-index: 2;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	-ms-box-sizing: content-box;
	box-sizing: content-box;
	width: 300px;
	height:320px;
	background-color: rgba(118, 118, 118, 0.7);
	border-radius: 5px;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-flex-direction: column-reverse;
	-moz-flex-direction: column-reverse;
	-ms-flex-direction: column-reverse;
	-o-flex-direction: column-reverse;
	flex-direction: column-reverse;
	justify-content: flex-start;
	-ms-align-items: center;
	align-items: center;
	top: 50%;
	max-width: 77%;
	max-height: 83%;
}
.bod{display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 5vh;
	
	border:1px solid #71d4b8 ;
	width: 75%;
	background-color: #71d4b8;
	font-weight: bold;
	font-size: 20px;

	border-radius: 5px;
margin-bottom: 2vh;
margin-top: 3vh;
}
.sps li{padding: 14px 0px;color: white;
	
}
.text3{
	
	border: 5px solid #71d4b8;
}
.con b{font-size: 20px;
	color: white;
}
.sps li img{ padding-right: 10px;
	
}
.bod:hover
{
	border:1px solid white ;
}
.bod a{
	color: white;
}
footer{
	color: white;
	background-color: #71d4b8;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: center;
	-ms-align-items: center;
	align-items: flex-start;
	flex-wrap: wrap;
}
.gen-p{
	margin: 1%;
}
.atext{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: flex-start;
	flex-direction: column;
	-ms-align-items: center;
	align-items: flex-end;


}
.btext{display: -webkit-flex;display: -moz-flex;display: -ms-flex;display: -o-flex;display: flex;justify-content: center;-ms-align-items: flex-start;align-items: flex-start;margin: 2vh;margin-top: 0;}.ctext{
}
.form-text{
	background-color: #eeeeee;
	font-size: 20px;border: none;
	border-radius: 2px;
	margin: 1vh 0;
	color: #767676;
}
.n2:hover{background-color: #eeeeee;

}
.red{
	text-align: center;
	}
.n2{
	margin-top: 32px;
	color: #71d4b8 ;background: white;
	font-size: 20px;
	height: 6.5vh;
	border-radius: 5px;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: center;
	align-items: center;
}

.red2{font-weight: bold;
font-size: 20px;	margin: 2vh 0px;
color: white;
}
.medc{
	font-weight: bold;
	font-size: 20px;
	margin-bottom: 1vh;
	margin-top: 2vh;
}
.pikch{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: space-between;
	width: 54%;
	margin-top: 4%;
}

.last{
	font-size: 10px;
	width: 100%;
	display: flex;
	justify-content: center;
	margin-top: 3vh;
}
.text{
	margin: 0px
}
.invis{
	color: red;
}
@media screen and (max-width: 600px) {
    .i{font-size: 0.7em;
   }
   .n{
   	font-size: 1em;
   }
   .togo{
   	padding-top: 0;
   }
   }