@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

body{

    font-family: Arial, Helvetica, sans-serif;

    margin: 0px;

}

    /*header*/

div.top{

    background-color: black;

    padding-bottom: 20%;

    padding-top: 1%;

}

.nadpis{

    color: white;

    padding: 5px 10px;

    text-align: left;

}

.pp{

    color: #FFA300;

}

nav{

    display: flex;

    flex-direction: column;

}

nav li a{

text-decoration: none;

color: white;

padding: 5px 10px;

}

nav li{

text-decoration: none;

color: white;

padding: 5px 10px;

}

nav a li:hover{

    color: #FFA300;

}

.aktualni{

    color: #FFA300;

}

@media (min-width: 640px){

    nav{

        display: flex;

        flex-direction: row; 

        padding-right: 10%;

    }

    div.top{

        justify-content: space-between;

        display: flex;

        flex-direction: row; 

        align-items: baseline;

        padding-bottom: 35%;

    }

    div.obrazek{

        background-image: url(city_pc.jpg);

        background-repeat: no-repeat;

        background-size: 100% auto;

        padding: 0% 60% 40% 50%;

        position: absolute;

        left: 8%;

        top: 100px;

        border: 10px solid gray;

    }

    .nadpis{

        margin-left: 7%;

    }

    .prvni{

        padding-top: 7%;

    }

}

    /*main*/



h1{

        color: black; 

        text-align: center;

}

h1.ikon{

    color: rgb(210, 192, 30);

}

i.material-icons{

    font-size: 2.2em;

}

section{

    margin: 5px;

    display: flex;

    flex-direction: column;

}

article{

    margin: 5px;

    padding: 10px 20px;

    text-align: justify;

    display: flex;

    flex-direction: column;

    flex: 1;

}

.prvni{

    padding-top: 7%;

}

.port img {

    width: 100%;

    height: auto;

    max-width: 640px;

    border-radius: 2px;

}

.foto {

    display: flex;

    flex-direction: row;

    flex-wrap: wrap;

    padding: 2% 5%;

}

.port {

    flex: 1 0 320px;

}

.about{

    display: flex;

    flex-direction: column;

    text-align: center;

    align-items: center;

}

/*tabulka*/

table{                                          /* umístění*/

    margin: 40px auto 40px auto;

    border-collapse: collapse;

}

th, td {                                             /* společné styly pro nadpisové i datové buňky */

    padding: 5px 20px; border: 1px solid #C0C0C0;

}

th:first-child, td:first-child {                    /* zarovnání prvních buněk */

    text-align: left;

}    

th:last-child, td:last-child {                      /* zarovnání posledního sloupce buněk*/

    text-align: right;

}   

th:nth-child(2), td:nth-child(2) {                  /* zarovnání druhého sloupce buněk*/

    text-align: left;

}  

tr:nth-child(odd) {                              /* vybarvení lichých řádků, sudé lze zapsat even, např. každý třetí je (3n+1) */

    background-color: #E0E0E0;

}     

tr {

    border-bottom: 1px solid #C0C0C0;

}



/*contact*/

.contact{

    padding-top: 7%;

    justify-content: center;

    text-align: center;

    align-items: center;

}

form {

    display: flex;

    flex-direction: column;

    width: 60%;

}

select {

    padding: 10px 15px;

    margin-bottom: 8px;

}

fieldset {

    margin-bottom: 8px;

    border-color: rgb(184,184,184);

    border-style: solid;

    border-width: 1px;

    margin-left: 0px;

    margin-right: 0px;

}

legend {

    color: rgb(184,184,184);

}

option {

    background-color: rgba(255, 162, 0, 0.514) 

}

textarea {

    font-family: inherit;

    margin-bottom: 8px;

    padding: 10px 15px;

}

input {

    margin-bottom: 8px;

    padding: 10px 15px;

}

input[type=submit]{ 

    background-color: #FFA300;

    border-style: initial;

}

/*všechny media mainu*/

@media (min-width: 640px){

    div.obrazek{

        padding: 0% 30% 40% 50%;

        margin-right: 10%;

    }

}

/*mobil*/

@media (max-width: 800px){

    tr {

        display: flex;

        flex-direction: column;

        margin: 10px 0px;

    }

    th, td {

        text-align: left;

    }

    th:last-child, td:last-child {

        text-align: left;

    }

    td:last-child::before {

        content: "$ ";

    }

    td:last-child::after {

        content: " million";

    }

    tr:first-child {

        display: none;

    }

}

/*tablet*/

@media (min-width: 800px){

    nav ul {

        display: flex;

        flex-direction: row;

    }

    nav ul ul{

        background-color: white;

        margin-top: 10px;

        padding-top: 10px;

        padding-bottom: 10px;

        border-radius: 2px;

        position: absolute;

        z-index: 2;

    }

    nav ul ul a {

        color: black;

        background-color: white;

        margin-left: 0px;

        padding-left: 20px;

        padding-top: 5px;

        padding-right: 20px;

        padding-bottom: 5px;

    }

    nav ul ul {transform:scaleY(0);

    }

    nav > ul > li:hover > ul {

        transform:scaleY(1);

        transition:0.2s ease-out;

    }

    .about1 {

        padding-right: 30px;

    }

    .about2 {

        padding-right: 30px;

    }

    .about3 {

        padding-right: 15px;

    }

    .map1 {

        padding-right: 24.7px;

    }

    .staff2 {

        padding-right: 24.7px;

    }



    nav ul ul a:hover {

        background-color: rgb(231,198,84);

        color: black;

    }

    nav ul ul::before {

        border:8px solid #F3CC54;

        content:"";

        width:0px;

        height:0px;

        border-color:transparent transparent white transparent;

        position:absolute;

        top:-16px;

        left:35px;

    }

    nav ul li {

        list-style-type: none;

        text-align: left;

    }

    nav ul li ul li:hover {

        background-color: rgb(231,198,84);

    }

    nav ul li ul li {

        list-style-type: none;

        margin-bottom: 10px;

    }

    nav ul li ul li:last-child {

        list-style-type: none;

        margin-bottom: 0px;

    }

    nav ul li ul {

        display: flex;

        flex-direction: column;

        padding-left: 0px;

    }

    div.text{

        margin-top: 100px;

    }

    section{

        display: flex;

        flex-direction: row;

    }

    img{

            box-shadow: 5px 10px  #888888;

            width: 100%;

    }

    .atext2{

        display: flex;

        flex: 1;

    }

}

/*počítač*/

@media (min-width: 1000px){

   nav ul{

        display: flex;

        flex-direction: row;

    }

    nav ul ul{

        display: flex;

        flex-direction: column;

    }

    .flex2 {

        flex: 2;

    } 

    article.flex2{

        display: flex;

        flex: 2;

    }

    article.flex21{

        margin-top: 100px;

        display: flex;

        flex: 2;

    }

    .one{

        margin-top: 100px;

    }

    .poradi2{

        order: 2;

    }

    .foto {

        padding: 2% 4% 2% 5%;

    }

    .port {

        margin: 0px 17px 17px 0px;

    }

    .contact article {

        padding-top: 5%;

        justify-content: center;

        text-align: center;

        align-items: center;

    }

}



    /*footer*/

footer{

    background-color: black;

    color: blanchedalmond;

    font-size: 0.8em;

    text-align: center;

    padding: 1%;

}