/* ----------------------------------------------------------------------------------------------------------
reset and general format
---------------------------------------------------------------------------------------------------------- */
body, html, p, ul, li, h1, h2, h3, h4, h5, h6, img, form, blockquote, fieldset, legend, ol, ul, li {margin:0; padding:0; border: 0}
input, select, label {vertical-align:middle;outline:0}
ul, ol {list-style-type:none}
p {line-height:1.4;color:#000}
table {border-collapse:collapse; border-spacing:0}
hr {display:none}
*{
margin: 0;
padding: 0;
}
/* ----------------------------------------------------------------------------------------------------------
basic         
---------------------------------------------------------------------------------------------------------- */
html {background: #fff}
body {font: normal 100%/1 'HelveticaNeue-Light','Helvetica Neue Light','Helvetica Neue',Arial,Helvetica,sans-serif; text-align:center;font-weight:normal}

html,body{overflow-x:hidden;height:100%;}

a:focus{outline:none}

a {text-decoration:none;}
a:hover {text-decoration:underline}  
.lefta {text-align:left}
.righta {text-align:right}
.center {text-align:center}
.float-r {float:right}
.float-l {float:left}
.bold {font-weight:bold}
.italic {font-style:italic}


/* ----------------------------------------------------------------------------------------------------------
wrapper
---------------------------------------------------------------------------------------------------------- */

.wrapper{height:100%;}
.container{width:1280px;margin:0 auto;padding:0}
.container .column,
.container .columns{display:inline;margin-left:10px;margin-right:10px}
.column.alpha,.columns.alpha{margin-left:0;margin-right:10px}
.column.omega,.columns.omega{margin-right:0;margin-left:10px}
.alpha.omega{margin-left:0;margin-right:0}

#hp{background-color: #4b98d7;/*background-image:url(marekcernak/img/bg.jpg);background-size:cover;*/padding:0;background-position: 100% 100%;}
.header{display:block;padding: 20px 0px;text-align:center}
.header a.logo{background-color: #fff;
border-radius: 50px;
display: inline-block;
height: 80px;
line-height: 50px;
position: relative;
text-align: center;
width: 80px;}
.header a.logo img {margin-top: 25px;
max-width: 50px;}
.header .title {padding:36px 0 37px 0;color:#333333;margin-left:40px}
.header .title h1{width:70%;margin:50px 0 0 0;font-size:80px;font-weight:normal;text-align: left;}
.header .title h2{float:left;margin:5px 0 0 0;font-weight:normal;font-size: 26px;}

.navlink{color:#fff;font-size:16px;font-weight:normal;margin:0 25px}
.navlink.contact{padding:5px 6px;border:1	px solid #fff;border-radius:5px;margin-left:5px	}

.langswitch {float:right;margin:10px 50px 0 0;}
.langswitch a {margin:0 0 0 10px;}

.content {width:100%;padding-bottom:40px;}
.content .center {float:left; width:100%;}
.content .center .menu {float:left;}
.content .center .menu ul {float:left;}
.content .center .menu ul li {float:left; margin:0 15px 0 0; text-align:right}
.content .center .menu ul li a {font-size:18px; font-weight:normal;}


/*.content .right {float:right;width:220px;margin:0;  padding: 10px 0 0;color: #333333;}
.content .right .news {float:right;text-align:left;margin:6px 0 15px}
.content .right .news h3{float:left;font-size:24px;font-weight:normal;margin-bottom:6px;} 
.content .right .news div{float:left;font-size:16px;font-weight:normal;margin-bottom:4px;width:100%;text-align:left;}  
.content .right .news div a{color:#4B98D7}  
.content .right .pricing { float: left;
    margin: 6px 0 0;
    text-align: left;
    width: 200px;}
.content .right .pricing h3{float:left;font-size:24px;font-weight:normal;margin-bottom:6px;}
.content .right .pricing form fieldset {text-align:left;display:inline;width:100%}
.content .right .pricing form fieldset label {width:auto;display:block;}
.content .right .pricing form fieldset input{  -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
   
    height: 15px;
    margin: 10px 0 10px;
    width: 200px;}
.content .right .pricing form fieldset select {width:100px;height:15px;border:none;margin: 10px 0 10px;display:block;border:1px solid #3c3c3c;width:100%}
*/




.con1 input {width:200px;margin:20px 0 0 0}
.area textarea {width:200px;margin:20px 0 0 0}
.con1 input, .area textarea {border:none;border-bottom:1px solid #000}


.backtotop {position:fixed; bottom:10px; left:10px;}
section{padding:60px 0;display:inline-block;width:100%;height:90%;}
#hp {position:relative}

section h1,
section .h1 {
	font-family: 'Monserat',sans-serif;
	bottom: 0;
	color: #fff;
	display: block;
	font-size: 80px;
	font-weight: 700;
	left: 0;
	margin-top: 20%;
	position: absolute;
	right: 0;
	text-align: center;
	top: 0;
}
section h2{font-family: 'Montserrat', sans-serif;font-weight:normal;text-transform:uppercase;}
section p {
	float: right;
	font-size: 14px;
	margin-right: 10%;
	margin-top: 40px;
	/*max-width: 40%;*/
	text-align: left;
	color: #fff;
	line-height: 2;
}
section p a{color: #fff;}
section#about{color:#000;font-size:30px;padding:100px 0}
section#about h2{text-align:left;font-size:20px;margin-top:20px}
section#magento{background-color:#efefef;text-align:center}
#magento h2{font-size:40px;display:inline-block;text-align:left;max-width:60%;color:#000}	

section#drupal{background-color:#fff}
#drupal h2{font-size:30px;display:inline-block;text-align:left;color:#000}

section#contact{background-color:#efefef;color:#232323;padding:0;position:relative;text-align:center;padding:20px 0}
#contact h2{font-size:50px;display:inline-block;clear:both;z-index:10;}	
#contact .content{padding:0}
#contact .contact-data{display: inline-block;
margin: 0;
text-align: center;width:100%}
#map{width:100%;height:600px}

.block-mark {
  float: left;
  margin-left: 20%;
  margin-top: 100px;
  width: 304px;
}

.content .block-right{float:right;width:50%}
.content .block-left{float:left;width:50%}

.content .container img {
    box-shadow: 0 0 15px 4px #ececec;
    margin: 10px;
}
form{width:500px;margin:0 auto}	
form fieldset {
	  border: medium none !important;
	  margin: 0 0 10px;
	  min-width: 100%;
	  padding: 0;
	  width: 100%;
}

	#contact input,
	#contact textarea {
	  width: 100%;
	  border: 1px solid #ccc;
	  background: #FFF;
	  margin: 0 0 5px;
	  padding: 10px;
	}	
	#contact input:hover,
	#contact textarea:hover {
	  -webkit-transition: border-color 0.3s ease-in-out;
	  -moz-transition: border-color 0.3s ease-in-out;
	  transition: border-color 0.3s ease-in-out;
	  border: 1px solid #aaa;
	}

	#contact textarea {
	  height: 100px;
	  max-width: 100%;
	  resize: none;
	}

	#contact button[type="submit"] {
	  cursor: pointer;
	  width: 100%;
	  border: none;
	  background: #333;
	  color: #FFF;
	  margin: 0 0 5px;
	  padding: 10px;
	  font-size: 15px;
	}

	#contact button[type="submit"]:hover {
	  background: #43A047;
	  -webkit-transition: background 0.3s ease-in-out;
	  -moz-transition: background 0.3s ease-in-out;
	  transition: background-color 0.3s ease-in-out;
	}

	#contact button[type="submit"]:active {
	  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
	}

	.copyright {
	  text-align: center;
	}

	#contact input:focus,
	#contact textarea:focus {
	  outline: 0;
	  border: 1px solid #aaa;
	}

	::-webkit-input-placeholder {
	  color: #888;
	}

	:-moz-placeholder {
	  color: #888;
	}

	::-moz-placeholder {
	  color: #888;
	}

	:-ms-input-placeholder {
	  color: #888;
	}
/* slider */
.wrapper-slider{width:100%}
.slider-core{height:400px;width:100%;margin-top:100px}
.slider-core .slide-wrapper{width:500px;margin:0 auto}
.slider-core a.slide{position:relative;display:block}
.slider-core a.slide .more{display:none;position:absolute;top:0;bottom:0;left:0;right:0;background-color:rgba(0,0,0,.8);z-index:1;padding:20px}
.slider-core a.slide:hover .more{display:block}
.slider-core a.slide .details{display:block;text-align:left;padding-top:10px}

#drupal .slider-core a.slide .more{background-color:rgba(6,120,190,.8)}

.rsDefault .rsBullets,
.rsDefault, .rsDefault .rsOverflow, .rsDefault .rsSlide, .rsDefault .rsVideoFrameHolder, .rsDefault .rsThumbs{background:none}
.rsDefault .rsBullets{margin-top:20px}
/* navigation */
nav {display:block;}
.navigation {margin:20px 0 0 0;padding:0;text-align:center}
.navigation li {
  display: inline-block;
  margin: 0 7%;
}
.navigation a{font-size:40px;font-weight:normal;margin-bottom:6px;color:#232323} 
 
.lang{position:absolute;right:10px;top:10px}
.lang a{color:#fff;font-size:12px;margin:0 3px}
.lang span{color:#ccc;font-size:12px;padding:3px 5px;}

/* footer */	
.footer { clear:both; text-align:center;background-color:#fff}
.footer .footerwrapper {display:inline-block;max-width: 1100px;min-width: 900px;margin:5px auto; text-align: left; }
.footer .footerwrapper .copyright{ padding:20px 0;display:inline-block;font-size:11px;color:#666;}
.footer .footerwrapper .soc3{float:right;margin-top:20px}
.footer .footerwrapper .soc3 a{color:#4875B4}

/* cleaners */
.container:after {
    clear: both;
    content: " ";
    display: block;
    height: 0;
    visibility: hidden;
}





@media only screen and (min-width:1025px) and (max-width:1281px){
	
	.container{width:1024px}
	section h1{font-size:60px}
}

/* tablet size */
@media only screen and (min-width:768px) and (max-width:1024px){
	.container{width:767px}
	section h1{font-size:40px}
}
/* tablet landscape */
@media only screen and (min-width:960px) and (max-width:1024px){
	
}
/* tablet portrait */
@media only screen and (min-width:768px) and (max-width:959px){
	
}
/* mobile size (both) */
@media only screen and (max-width:767px){
	.container{width:480px}
	section h1{font-size:28px}
	.navlink{margin:0 10px}
}
/* mobile landscape */
@media only screen and (min-width:480px) and (max-width:767px){
	
}
/* mobile portrait */
@media only screen and (max-width:479px){
	.slider-core .slide-wrapper{width:320px}
	.slider-core a.slide .more{padding:5px}
	.slider-core a.slide .more h3{text-align:left}
	section#about{padding:30px 0}
	.container{width:100%}
	#hp{
		background-image: url(marekcernak/img/bg-m.jpg);
	}
	.header a.logo {
		background-color: #fff;
		border-radius: 50px;
		display: inline-block;
		height: 40px;
		line-height: 20px;
		position: relative;
		text-align: center;
		width: 40px;
		position: absolute;
		left: 20px;
		top: 20px;
	}
	.header a.logo img {
		margin-top: 15px;
		max-width: 20px;
	}	
	section{padding:30px 0}
	section h1{margin-top:180px}
	.navlink{display:none}
	section h1 {
		padding: 0 20px;
	}
	#drupal h2,
	#magento h2,
	#contact h2,
	section h2{
		max-width:100%;
		font-size:20px;
		padding:0 5px;
	}
	section p{
		margin: 10px 0;
		padding:0 5px;
		text-align:justify !important;
	}
	.slider-core{margin-top:30px}
	.footer{width:100%;}
	.footer .footerwrapper{
		max-width:100%;
		min-width:0;
		width:100%;
	}
	.footer .footerwrapper .copyright{margin-left:5px}
	.footer .footerwrapper .soc3{margin-right:5px}
}