/* CSS Document */
#wrapper {width: 800px;
margin: 0 auto;
background: #dddddd} /*vycentrování stránky*/
.vid {width:590px; height:331px;}
body{background: #dddddd}

.hlava {background: #ffaa22;
width: 90%; height: 4cm; top: 1%;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
}

.navigace {border-radius: 30px;
height:46px;
}

.menu {background: #888888;
width: 90%; top: 6cm;
padding: 1px 10mm 1px 20mm;
}


.obsah {background: #FFFFC0;
width: 90%; height: auto; top: 8cm;
padding: 2em 15mm 8mm 15mm;
}

.pata {background-color: #ffaa22;
width: 90%;  top: auto;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
}

.logo { 
position: relative; top:-8mm; left:-14mm; height: 120%;
z-index: 1;}
.tasktext {position: relative;top:-35%; left:15%;}
.task {position: relative;top:-40%; left:-10%;}
.g-page {position: relative;top:-30%; left:70%;}
div {padding: 2em 15mm 8mm 15mm;
}
.textobsahu {width: 70%;}
.gal {float: right; }
.dinglisch{ width: 170px;
position: relative;top:330px; left:320px;
float: right;}       
 
.gplay { width: 150px;
position: relative;top:260px; left:150px;
float: right;
}       

@media screen and (max-width: 768px)  /* jiné rozlišení */
{
#wrapper {width: 670px;
} /*vycentrování stránky*/

.vid {width:400px; height:225px;}

.hlava {
width: 650px;
background-color: red;
}

.menu { width: 650px;
}

.obsah {
width: 650px;

}

.pata {
width: 650px;
}
}

@media screen and (max-width: 600px)  /* jiné rozlišení */
{
#wrapper {width: 580px;
} /*vycentrování stránky*/


.hlava {  background-color: blue;
width: 580px;
}

.menu { width: 580px;
}
.navigace {border-radius: 30px;
height:26px;}

.gal {float: right;
      width: 80%; }
.dinglisch{ width: 130px;
position: relative;top:310px; left:300px;
float: right;}       
 
.gplay { width: 100px;
position: relative;top:260px; left:150px;
float: right;
}       

.obsah {
width: 580px;

}

.pata {
width: 580px;
}
}

@media screen and (max-width: 480px)  /* jiné rozlišení */
{
#wrapper {width: 450px;} /*vycentrování stránky*/

.hlava {   background-color: green;
width: 450px;
}
.navigace {border-radius: 30px;
height:27px;}

.gal {float: right; visibility: hidden; }
.dinglisch{ width: 130px;
            position: relative;top:30px; left:300px;     /*  odkaz na dinglisch */
float: right;}       
 
.gplay { width: 100px;
position: relative;top:110px; left:180px;
float: right;
} 

.tasktext {position: relative;top:-110%; left:15%; width:90%}
.task {position: relative;top:-130%; left:25%;}
.g-page {position: relative;top:-30%; left:70%;}
      

.vid {width:350px; height:196px;}  /* video u profilů */
.menu { width: 450px;
}

.obsah {
width: 450px;

}

.pata {
width: 450px;
}
}

@media screen and (max-width: 320px)  /* jiné rozlišení */
{
#wrapper {width: 300px;
} /*vycentrování stránky*/


.hlava { background-color: rgb(0,153,255) ;
width: 300px;
}
 .logo { 
position: relative; top:-2mm; left:-10mm; height: 90%;
z-index: 1;}
.menu { width: 300px;
}
.tasktext {position: relative;top:-100%; left:19%; width:90%}
.task {position: relative;top:-100%; left:25%; width:90%;}
.obsah {
width: 300px;

}

.pata {
width: 300px;
}
}