body {
background-color: #9AD4F3
}

.banner-video-mobile {
display:none;
}

#wrapper {
    overflow-x: hidden;
    background: #9AD4F3;
}

.navbar-default.transparent {
    background: url(../images/clouds.png) repeat-x bottom;
    border-bottom: 0px solid rgba(255, 255, 255, 0.34);
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 100;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
}

.navbar {
    position: relative;
    min-height: 170px;
    border: 1px solid transparent;
}
.navbar-default.transparent .navbar-nav > li > a, .navbar-default.transparent .navbar-nav > li > a.dropdown-toggle i {
    color: #67c0e9;
}

.navbar-default .navbar-nav > li > a {
    color: #484848;
    font-size: 14px;
    display: inline-block;
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
}

.nav > li > a {
    position: relative;
    display: block;
    padding: 66px 14px 10px 14px;
}

.banner-video {
    position: absolute;
    left: 0;
    top: 140px;
    width: 100%;
    height: 100%;
}


.stick {
    position: fixed;
    top: 0;
}

/*Lets start with the cloud formation rather*/

/*The container will also serve as the SKY*/

*{ margin: 0; padding: 0;}

body {
	/*To hide the horizontal scroller appearing during the animation*/
	overflow: hidden;
}

#clouds{

}

/*Time to finalise the cloud shape*/
.cloud {
	width: 300px; height: 60px;
	background: #fff;
	
	border-radius: 200px;
	-moz-border-radius: 200px;
	-webkit-border-radius: 200px;
	
	position: relative; 
}

.cloud:before, .cloud:after {
	content: '';
	position: absolute; 
	background: #fff;
	width: 200px; height: 160px;
	position: absolute; top: -65px; left: 20px;
	
	border-radius: 100px;
	-moz-border-radius: 100px;
	-webkit-border-radius: 100px;
	
	-webkit-transform: rotate(30deg);
	transform: rotate(30deg);
	-moz-transform: rotate(30deg);
}

.cloud:after {
	width: 150px; height: 150px;
	top: -55px; left: auto; right: 15px;
}

/*Time to animate*/
.x1 {

	left: 200px;
	opacity: 0.3; /*opacity proportional to the size*/
	-webkit-animation: moveclouds 55s linear infinite;
	-moz-animation: moveclouds 55s linear infinite;
	-o-animation: moveclouds 55s linear infinite;
}

/*variable speed, opacity, and position of clouds for realistic effect*/
.x2 {
	left: 500px;
	
	-webkit-transform: scale(0.6);
	-moz-transform: scale(0.6);
	transform: scale(0.6);
	opacity: 0.25; /*opacity proportional to the size*/
	
	/*Speed will also be proportional to the size and opacity*/
	/*More the speed. Less the time in 's' = seconds*/
	-webkit-animation: moveclouds 55s linear infinite;
	-moz-animation: moveclouds 55s linear infinite;
	-o-animation: moveclouds 55s linear infinite;
}

.x3 {
	left: 700px; top: -170px;
	
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	transform: scale(0.8);
	opacity: 0.25; /*opacity proportional to the size*/
	
	-webkit-animation: moveclouds 55s linear infinite;
	-moz-animation: moveclouds 55s linear infinite;
	-o-animation: moveclouds 55s linear infinite;
}

.x4 {
	left: 970px; top: -150px;
	
	-webkit-transform: scale(0.75);
	-moz-transform: scale(0.75);
	transform: scale(0.75);
	opacity: 0.2; /*opacity proportional to the size*/
	
	-webkit-animation: moveclouds 55s linear infinite;
	-moz-animation: moveclouds 55s linear infinite;
	-o-animation: moveclouds 55s linear infinite;
}

.x5 {
	left: 1270px; top: -250px;
	
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	transform: scale(0.8);
	opacity: 0.3; /*opacity proportional to the size*/
	
	-webkit-animation: moveclouds 55s linear infinite;
	-moz-animation: moveclouds 55s linear infinite;
	-o-animation: moveclouds 55s linear infinite;
}

	#fejsik {
		display: block; /*pozycja blokowa*/
		position: fixed; /*obrazek nieruchomy*/
		z-index: 9999; /*tak na wszelki wypadek*/
		margin-top: 357px; /*maly odstep od gory*/
		background-image: url(../images/back1.png); /*plik tla*/
		width: 328px; /*szerokosc*/
		padding-left: 50px; /*odstep zawartosci od lewej krawedzi*/
		/*laczna szerokosc 200+60 = 260px*/
		height: 357px; /*wysokosc*/
		padding-top: 0px; /*maly odstep od gory*/
		/*laczna wysokosc obrazka 295+5 = 300px*/
		right: -280px; /*ukrywamy 210px obrazka od prawej krawedzi*/
		float: right; /*do prawej*/
		/*zostaje 50px napisu "facebook"*/
	}

  .ejupik {
		position: fixed; /*obrazek nieruchomy*/
		z-index: 9999; /*tak na wszelki wypadek*/
		top: 256px; /*maly odstep od gory*/
		right:0px
}


  .yt {
		position: fixed; /*obrazek nieruchomy*/
		z-index: 9999; /*tak na wszelki wypadek*/
		top: 307px; /*maly odstep od gory*/
		right:0px
}


@-webkit-keyframes moveclouds {
	0% {margin-left: 1000px;}
	100% {margin-left: -1000px;}
}
@-moz-keyframes moveclouds {
	0% {margin-left: 1000px;}
	100% {margin-left: -1000px;}
}
@-o-keyframes moveclouds {
	0% {margin-left: 1000px;}
	100% {margin-left: -1000px;}
}

h2 {
font-family: 'Josefin Sans', sans-serif;
font-weight:bold;
color:#ffffff
}

.josefin {
font-family: 'Josefin Sans', sans-serif;
color:#ffffff;
font-weight:bold
}

.creative-services-sec-content {
    float: left;
    width: 70%;
    padding-left: 0px;
}

.creative-services-sec-content-one {
    float: left;
    width: 68%;
    padding-left: 50px;
}

.cd-header {
z-index:9999
}

@media(max-width: 685px) {

#mainMenuBar {
display:none
}

.creative-services-sec-content-one {

    float: left;
    width: 100%;
    padding-left: 10px;

}


.creative-services-sec .creative-services-sec-icon {
    left: 0%;
    margin-left: 0px !important;
    max-width: 200px;
    position: relative;
    top: 0;
}

.creative-services-sec-content {
    padding-top: 20px;
}

.creative-services-sec-content {
    float: left;
    width: 100%;
    padding-left: 0px;
    text-align:left
}

.creative-services-sec-content {
    float: none;
    padding-left: 10px;
    width: auto;
    text-align: left !important;
}

.banner-video {
display:none;
    position: absolute;
    left: 0;
    top: 90px;
    width: 100%;
    height: 300px;
}

.banner-video-mobile {
display:initial;
    position: absolute;
    left: 0;
    top: 90px;
    width: 100%;
    height: 230px;
}

.royalSlider {
height:300px !important
}

.logomobile {
max-width:200px
}

.navbar {
min-height:115px !important
}

.hidenonmobile {
display:none !important
}

}