@import url(https://fonts.googleapis.com/css?family=Didact+Gothic&subset=greek,latin);
@import url(https://fonts.googleapis.com/css?family=Roboto:400,700,500&subset=greek,latin);

body {
    background: url(bg.jpg); margin : 0px; padding:0px;
    overflow-x: hidden;
    overflow-y: hidden;
}
#varvakio{
	display: flex;
    margin-top: 118px;
    margin-left: 12%;
}
#varvakis img{
	width: 510px;
	height: 621px;
}
#varvoptions img{
	width: 1247px;
	height: 892px;
}
/*
#varvopt-main{
    display: flex;
}
#varvopt{
    width: 50%;
}
#varvopt img{
    display: block;
    float:right;
}*/
#varvopt{
    display: none;
}
.varvoption{
    color:white;
    text-decoration: none;
    font-size: 2.5em;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    padding: 1em 0;
}
.varv{
    text-align: center;
    padding: 4em 0;
}
.syllogos_apofoitwn{
    background-color: #9aaee0;
}
.varvakeio_idryma{
    background-color: #5a79ca;
}
.varvakeio_protypo_gymnasio{
    background-color: #4d69b2;
}
.varvakeio_protypo_lykeio{
    background-color: #39497d;
}
.varvakeio_syllogos_gymnasiou{
    background-color: #243155;
}
.varvakeio_syllogos_lykeiou{
    background-color: #1b243e;
}
.varvakeio_mathitikes_koinotites{
    background-color: #151d31;
}

@media only screen and (max-width: 760px), only screen and (max-device-width: 760px){
    body {
       overflow-x: hidden;
       overflow-y: auto;
    }
    #varvakio{
    	display: block;
    	margin-top: 50px;
    	margin-left: 0%;
    }
    #varvakis img{
		width: 40%;
    	height: auto;
    	margin-left: 30%;
	}
	#varvoptions img{
		    width: 100%;
    height: auto;
	}
    #varvoptions{
        display: none;
    }
    #varvopt{
        margin-top: 5em;
        display: block;
    }

}