@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Roboto+Slab'); /*vlozeni vlastniho pisma z googlu*/

* { box-sizing: border-box; }

html {
	font-size: 18px;
}
	
body {
	font: 300 1rem/1.4 'Roboto Slab', serif; /*nastaveni sirky pisma, velikosti radkovani a typu pisma*/
	color:#605D5D; /*nastaveni barvy pisma*/
	}

img {
	max-width: 100%; /*obrazky se budou prizpusobovat oknu na 100%*/
	height: auto; /*obrazky se budou prizpusobovat oknu na vysku automaticky*/

}

.top-nav { /*trida pro cele horni menu*/
	position: fixed; /*zafixovani horniho celeho menu na*/
	top: 0; /*nahore prichyceno u okna*/
	width: 100%; /*nastaveni na sirku celho okna*/
	border-bottom: 1px solid red; /*vodorovna cara pod */
	padding: 5px 15px; /*okraj kolem odkazu, nahore dole 5 vpravo vlevo 15*/
	z-index: 100; /*nastaveni poradi elementu, aby pri scrolovani pod menu nebylo nic videt*/
}

.top-nav a {	/*nastaveni pro odkaz v horni navigaci*/
	opacity: .8; /*pruhlednost*/
}

.top-nav a:hover { /*nastaveni pro odkaz v horni navigaci pri prejeti mysi*/
	opacity: 1; /*pruhlednost*/
	transition: opacity .3s ease-out; /*prechod aplikujeme na pruhlednost po dobu .3s s pomalejsim koncem*/
}

.main-menu { /*nastaveni main menu bez okraju a bez odrazek*/
	margin: 0; /*nastaveni bez okraju*/
	padding: 0; /*nastaveni bez okraju*/
	list-style-type: none; /*nastaveni bez odrazek*/
}

.main-menu a { /*nastaveni odkazu*/
	text-decoration: none; /*nastaveni odkazu bez podtrzeni*/
	margin: 0 1rem; /*nastaveni mezer mezi odkazy*/
	color: gray; /*nastaveni barvy odkazu*/
	text-transform: uppercase; /*nastaveni velkych pismen u odkazu*/
}

.logo a { /*nastaveni loga/odkazu*/
	color: gray; /*nastaveni barvy loga/odkazu*/
	text-decoration: none; /*odebrani podtrzeni*/
}

.page-header { /*trida pro zahlavi*/
	background-image: url('../images/StockSnap_9M1HWW2JFV.jpg'); /*nastaveni obrazku jako pozadi zahlavi*/
	background-size: cover; /*nastaveni velikost pozadi COVER*/
	background-attachment: fixed;
	background-position: center center; 
	padding: 20vh 0; /*nastaveni vysky zahlavi, 20%viewheight nastavi velikost zahlavi dle okna*/
	color: red;
	text-align: center; /*nastaveni obsahu zahlavi uprostred*/
}

.ph-border {
	background-color: rgba(255, 255, 255, .8);
	border-radius: 15px;
	padding: 15px;
}

.about, .services, .download, .contacts, .portfolio {
	text-align: center; /*nastaveni obsahu na stred v sekci */
	padding: 100px 0; /*nastaveni vysky sekce */
}

.portfolio img {
	float: left; /*odstraneni mezery mezi hornimi a spodnimi obrazky */
}

.caption { /*trida k upraveni textu do obrazku */
	position: absolute; /*vyjmuti textu a presunuti do obrazku, automaticky v levem hornim rohu */
	top: 0;
	background-color: rgba(255, 99, 71, .7); /*nastaveni pruhledne barvy pod textem */
	width: 100%; /*prikazem absolut jsme podbarvili jen text, maximalni sirkou a vyskou nastavime, aby bylo podbarvene vse */
	height: 100%;
	text-transform: uppercase;
	text-decoration: none;
	color: white;
	font-size: 1.4rem;
	font-weight: 400;
	text-shadow:  1px 1px 2px #000;
	opacity: 0; /*nastaveni pruhlednosti celeho caption a pri najeti mysi pruhlednost zrusime*/
	transition: opacity .3s ease-out; /*nastaveni prechodu na funkci opacity*/
}

.caption:hover {
	opacity: 1; /*nastaveni nepruhlednosti celeho caption a pri najeti mysi*/
}

.portfolio a { /*nastavime, aby vse uvnitr tohoto odkazu zustalo v teto sekci */
	position: relative; /*text zustane v obrazku */
}

.download {
	background-color: black;
	color: white;
}

.download i {
	margin: 0 5px;
}

.contacts a {
	text-decoration: none;
	color: inherit;
}

.contacts i {
	font-size: 30px;
}

.emailtel a:hover {
	text-decoration: underline;
	text-decoration-color: red;
}

.contactform p { 
	align-items: center;
	display: flex; /*nastaveni vypisovacich poli pod text */
	flex-direction: column;
	
	
}

.contactform input:not([type="submit"]), /*nastaveni oken pro vpisovani dat ve formulari */
.contactform textarea {
	width: 30%;
	padding: .5rem;
	border: 1px solid red;
	border-radius: 5px;
}

.contactform input, .contact-form textarea { /*nastaveni pisme ve formulari */
	font-family: inherit;
}

.contactform textarea {
	resize: vertical; /*zruseni zvetsovani ramecku textarea uzivatelem horizontalne */
}

.scroll-top { /*naformatovani sipky pro JS */
	font-size: 4.5rem;
	color: lightgray;
	position: fixed; /*nastaveni pozice vuci oknu*/
	right: 30px; /*konkretni umisteni sipky zprava*/
	bottom: 50px; /*konkretni umisteni sipky ze spodu*/
	cursor: pointer; /*pri najeti se zmeni kurzor*/
	display: none; /*standartne neni videt, objevi se az pri skrolovani, proto je zde schovana*/
}

.odeslano {
	color: black;
	font-size: 150%;
}