/*
 *
 * Project: www.gsmrepeater.sk
 * Update:  10/2/15
 *
*/


/* ----------> reset CSS */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0; padding: 0; border: 0; font-size: 100%; /*font: inherit;*/ vertical-align: baseline; background: transparent
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block } /* HTML5 display-role reset for older browsers */
body { line-height: 1 }
ol, ul { list-style: none }
blockquote, q { quotes: none }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none }
table { border-collapse: collapse; border-spacing: 0 }
:focus { outline: none }

.clearfix:before, .clearfix:after { content: ""; display: table; line-height: 0 }
.clearfix:after { clear:both }



/* ----------> base CSS */

html, body { height: 100% }
body { font: 100%/1.4 Roboto, "Arial CE", arial, "Helvetica CE", helvetica, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale }
body { color: #7b878d; font-weight: 300; text-align: center; background: #999f65 url(../img/bg_body.jpg) no-repeat 50% 0 fixed; -o-background-size: cover; -webkit-background-size: cover; background-size: cover }
h1, h2, h3, h4, h5, h6 { color: #000; font-weight: 400; line-height: normal }
h1 { font-size: 320%; font-weight: 900; clear: both; margin: 0 0 1em 0; line-height: 1.1; letter-spacing: -2px }
h2 { font-size: 160%; margin: 0 0 0.7em 0 }
h3 { font-size: 160%; margin: 0 0 0.7em 0 }
h4 { font-size: 120%; margin: 0 0 0.5em 0 }
input, select, textarea { font: 100% Roboto, "Arial CE", arial, "Helvetica CE", helvetica, sans-serif }
a { color: #69ae80; outline: none; -o-transition: .4s; -webkit-transition: .4s; transition: .4s }
a:link { color: #69ae80 }
a:hover { color: #d4020a; text-decoration: none }
p { margin: 1em 0 2.7em 0; line-height: 1.4; letter-spacing: 2px }
ul, ol { margin: 1em auto 2.7em auto }
small { font-size: 90% }
/* Google webfont */
em, i { font-style: italic }
strong, b { font-weight: bold }
sup { vertical-align: super }
sub { vertical-align: sub }



/* ----------> default CLASS */

/* ----------> project LAYOUT */

#main { width: 600px; min-height: 90%; margin: 0 60px; position: relative; top: 5%; background-color: rgba(255,255,255,.9) }
#header { padding: 50px 0; border-top: 10px solid #d4020a }
#content { padding: 0 60px 120px 60px }
#footer { position: absolute; left: 0; bottom: 0; width: 100%; height: 60px; line-height: 60px; border-top: 1px solid #e0dfd8 }



/* ----------> project CSS */

h3 small { font-weight: 300 }
.btn { color: #fff !important; font-weight: 400; text-decoration: none; text-transform: uppercase; display: inline-block; height: auto; line-height: normal; padding: 20px 80px 20px 20px; text-align: left; position: relative; background-color: #69ae80; box-shadow: 2px 2px rgba(0,0,0,0.1) }
.btn:after { content: ""; display: block; width: 60px; height: 100%; position: absolute; right: 0; top: 0; background: #498858 url(../img/arr.png) no-repeat 50% 50% }
.btn:hover { background-color: #498858 }



/* basic responsive */

@media only screen and (max-width: 719px) {

	html { -webkit-text-size-adjust: none }
	img { max-width: 100%; height: auto; width: auto\9; /* ie8 */ }
	input, textarea { width: auto; -o-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box }
	input[type="submit"] { -webkit-appearance: none }
	#content iframe, #content object, #content embed { width: 100%; height: 100% }

	#main { width: 90%; margin: 0 5% }

}

@media only screen and (max-width: 480px) {

	#main { width: 100%; min-height: 100%; top: 0; margin: 0 }
	#content { padding-left: 30px; padding-right: 30px }
	h1 { font-size: 240% }

}

@media only screen and (max-width: 375px) {

	body { font-size: 85% }

}