@import url('https://fonts.googleapis.com/css?family=Bungee|Bungee+Inline|Changa');
@import url(http://fonts.googleapis.com/css?family=Roboto:300);
@import url('https://fonts.googleapis.com/css?family=Bungee+Shade');
/* site */
* {
   font-family: 'Changa',sans-serif;
}

body {
    width: 100%;
    height: 100%;
  	background: rgba(180, 232,164, 0.4);
}



h1, p {
   text-align: center;
   font-weight: 300;
}
h2{
		font-family: 'Bungee', cursive;

}



/*////////////////////
/*Menu*/
/*////////////////////*/


/* NAVIGATION */

@media(max-width:768px) {
    .navbar {
        padding: 15px 0;
        -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
        -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
        transition: background .5s ease-in-out,padding .5s ease-in-out;
    }

	.socialbutton{
		display: none;
	}
	.navbar-nav{
		margin: -3px!important;
		text-align: center!important;
	}
	
    .top-nav-collapse {
        padding: 0;
    }

}



.about-section {
    font-family:  'Amatica SC', cursive;
    font-weight: 700;
    padding-top: 50px;
    text-align: center;
  
}

.services-section {
    
    padding-top: 50px;
    text-align: center;
    
}

.contact-section {
    
    padding-top: 150px;
    text-align: center;
   
}

.navbar-default{
    background-image: linear-gradient(to bottom,#ffffff 0,rgba(180, 232,164, 1) 100% );  
  
}
.navbar-header a{
    font-family: 'Bungee Inline', cursive;
    font-weight: bold;
    font-size: 22px;
}
div ul li a {
    font-family:'Bungee Inline', cursive;
  font-size: 22px;
    
}
.navbar-nav>.open>a,.navbar-default .navbar-nav>.active>a{
    background-image:-webkit-linear-gradient(top,#ffffff 0,#339999 100%);
     font-weight: bold;
    font-size: 22px;
}
.navbar-default .navbar-toggle{
      background-image: linear-gradient(to bottom,#ffffff 0,rgba(180, 232,164, 0.5) 100% );   
}
.navbar-default .navbar-toggle:hover{
      background-image:-webkit-linear-gradient(top,#ffffff 0,#339999 100%);
}
/*////////////////////
/*SLIDER  --height: 100vh;*/
/*////////////////////*/

#carousel, #carousel > div {
    display: block;
    height: 100vh;
	width: 100%;
    position: relative;
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    background-color: #455A64;
    overflow: hidden;
	

}

    #carousel > div {
        position: absolute;
    }

    #carousel > i {
        color: #5bbd72;
        position: absolute;
        font-size: 60px;
        margin: 20px;
        top: 40%;
        text-shadow: 0 10px 2px #223422;
        cursor: pointer;
        -moz-transition: .2s;
        -o-transition: .2s;
        -webkit-transition: .2s;
        transition: .2s;
    }

    #carousel > #left {
        left: -100px;
    }

    #carousel > #right {
        right: -100px;
    }


    #carousel:hover > #left {
        left:0;
    }

    #carousel:hover > #right {
        right: 0;
    }

    #carousel > i:active {
        color: #ac4d4d;
        text-shadow: 0 5px 2px #000000;
        -moz-transform: translate(0,5px);
        -ms-transform: translate(0,5px);
        -o-transform: translate(0,5px);
        -webkit-transform: translate(0,5px);
        transform: translate(0,5px);
        cursor: pointer;
    }

    #carousel > ul {
        position: absolute;
        bottom: 10px;
        /*change left property to adjust the position of the buttons*/
        left: 46%;
        z-index: 4;
        padding: 0;
        margin: 0;
    }

        #carousel > ul > li {
            margin: 0;
            padding: 0;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            list-style: none;
            float: left;
            background-color: white;
            margin-right: 20px;
            cursor: pointer;
            border: 5px solid #223422;
            box-shadow: 0 0 5px 1px white;
            -moz-transition: .3s;
            -o-transition: .3s;
            -webkit-transition: .3s;
            transition: .3s;
        }

            #carousel > ul > li.showli {
                background-color: #ac4d4d;
                border: 5px solid white;
                box-shadow: 0 0 5px 1px #ac4d4d;
                -moz-animation: boing .5s forwards;
                -o-animation: boing .5s forwards;
                -webkit-animation: boing .5s forwards;
                animation: boing .5s forwards;
            }

            #carousel > ul > li:hover {
                background-color: #4800ff;
                border: 5px solid white;
                box-shadow: 0 0 5px 1px #ac4d4d;
            }

    #carousel > div.show {
        z-index: 1;
    }

@keyframes boing{0%{transform:scale(1.2)}40%{transform:scale(.6)}60%{transform:scale(1.2)}80%{transform:scale(.8)}100%{transform:scale(1)}}


.card-container {
  position: relative;
  flex-wrap: wrap;
  overflow: hidden;
  padding-top: 15px;
  padding-bottom: 15px;
  display: flex;
  justify-content: space-around;
  align-items: auto;
}

.card {
  min-width: 275px;
  width: 275px;
  position: relative;
  margin: 15px 15px;
  height: 350px;
  border-radius: 7px;
  background-size: cover;
  box-shadow: 5px 5px 10px 1px rgba(0, 0, 0, 0.3);
  transition: 0.2s all linear;
  border: 1px solid rgba(128, 128, 128, 0.15);
  box-sizing: border-box;
}
.card .card-social {
  position: absolute;
  height: 75px;
  width: 100%;
   background:#339999;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.5);
  top: 275px;
}
.card .card-social ul {
  padding: 0;
  margin: 0;
  list-style: none;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
}
.card .card-social ul li {
  height: 100%;
  text-align: center;
  line-height: 75px;
  font-size: 1.5em;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
}
.card .card-social ul li:hover {
  text-shadow: 7px 7px 5px rgba(0, 0, 0, 0.7);
  transition: all 0.1s linear;
}
.card .card-social ul li a{
	color: #ffffff;
}
.card .card-image {
  width: 100%;
  height: 275px;
  position: relative;
  background-image: url(../img/Wonder_woman_CGI.jpg);
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}
.card .card-info {
  position: relative;
  width: 100%;
  height: 35px;
  line-height: 35px;
  top: -265px;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  font-family: "Open Sans";
  color: rgba(255, 255, 255, 0.85);
}
.card .card-info .card-title {
  line-height: 35px;
  height: 35px;
  position: relative;
  top: 0px;
  font-size: 25px;
  text-align: center;
  background:#339999;
  box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.3);
}
.card .card-info .card-detail {
  line-height: 1.5em;
  font-size: 1em;
  height: 220px;
  background: rgba(0, 0, 0, 0.6);
  position: relative;
  top: 5px;
  padding: 5px 20px 0px 20px;
  opacity: 0;
  transform: scaleY(0);
  transform-origin: center top;
  box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.3);
}
.card:hover {
  box-shadow: 10px 10px 10px 1px rgba(0, 0, 0, 0.3);
}
.card:hover .card-info .card-title {
  box-shadow: 10px 10px 10px 1px rgba(0, 0, 0, 0.3);
  transition: 0.3s all linear;
}
.card:hover .card-info .card-detail {
  opacity: 1;
  box-shadow: 10px 10px 10px 1px rgba(0, 0, 0, 0.3);
  transition: 0.35s all linear;
  transition-delay: 0.1s;
  transform: scaleY(1);
}
.card:nth-of-type(2) .card-image {
  background-image:url(../img/superman-1070470_640.jpg);
}
.card:nth-of-type(3) .card-image {
  background-image:url(../img/ninja.jpg);
	background-repeat: no-repeat;
}
.card:nth-of-type(4) .card-image {
  background-image: url(../img/me.jpg);
}

.container{
	padding-top:44px;
}

.effect-owl img{
	position: relative;
	display: block;
	min-height: 100%;
	max-width: 100%;
}

.start h2{
	display:block;
	text-align:center;
	position: relative;
	font-family:"Changa";
	font-weight:bold;
}

.start p{
	display:block;
	font-size:16px;
	line-height:25px;
	text-align:justify;
}


/*These styles contain basic styles for fomatting along with our animation css*/



/*clearfixes*/

.cf:before,
.cf:after {
  content: " ";
  display: table;
}

.cf:after {
  clear: both;
}


/*animation element*/

.animation-element {
  opacity: 0;
  position: relative;
}
/*animation element sliding left*/

.animation-element.slide-left {
  opacity: 0;
  -moz-transition: all 600ms linear;
  -webkit-transition: all 600ms linear;
  -o-transition: all 600ms linear;
  transition: all 600ms linear;
  -moz-transform: translate3d(-200px, 0px, 0px);
  -webkit-transform: translate3d(-200px, 0px, 0px);
  -o-transform: translate(-200px, 0px);
  -ms-transform: translate(-200px, 0px);
  transform: translate3d(-200px, 0px, 0px);
}
.animation-element.slide-right {
  opacity: 0;
  -moz-transition: all 600ms linear;
  -webkit-transition: all 600ms linear;
  -o-transition: all 600ms linear;
  transition: all 600ms linear;
  -moz-transform: translate3d(200px, 0px, 0px);
  -webkit-transform: translate3d(200px, 0px, 0px);
  -o-transform: translate(200px, 0px);
  -ms-transform: translate(200px, 0px);
  transform: translate3d(200px, 0px, 0px);
}
.animation-element.slide-left.in-view {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}
.animation-element.slide-right.in-view {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}
/*animation slide left styled for testimonials*/

.animation-element.slide-left.testimonial {
  float: left;
  width: 47%;
  margin: 0% 1.5% 3% 1.5%;
  padding: 15px;
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
}
.animation-element.slide-right.testimonial {
  float: left;
  width: 47%;
  margin: 0% 1.5% 3% 1.5%;
  padding: 15px;
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
}
.animation-element.slide-left.testimonial:hover,
.animation-element.slide-left.testimonial:active{
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.25);
}
.animation-element.slide-right.testimonial:hover,
.animation-element.slide-right.testimonial:active{
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.25);
}

.animation-element.slide-left.testimonial:nth-of-type(odd) {
  width: 100%;
  margin: 0% 1.5% 3.0% 0%;
}
.animation-element.slide-right.testimonial:nth-of-type(odd) {
  width: 100%;
  margin: 13px 1.5% 3.0% 0%;
}



.animation-element.slide-left.testimonial img {
  box-shadow: 0px 1px 3px rgba(51, 51, 51, 0.5);
}





/*media queries for small devices*/
@media screen and (max-width: 678px){
  /*testimonials*/
  .animation-element.slide-left.testimonial,
  .animation-element.slide-left.testimonial:nth-of-type(odd),
  .animation-element.slide-right.testimonial:nth-of-type(odd){
    width: 100%;
    margin: 0px 0px 20px 0px;
  }
  .animation-element.slide-left.testimonial,
	.animation-element.slide-right.testimonial{
    text-align: center;
    float: none;
  }
  .animation-element.slide-left.testimonial img{
    margin-bottom: 5px;
  }
	.socialbutton{
		display: none;
	}
	.navbar-nav{
		margin: -3px!important;
		text-align: center!important;
	}
		#cont h2{
		right:100px;
		color: red;
	}
}
#container{
	background-image: url(../img/superman.jpg);
	height: 600px;
	background-repeat:no-repeat;
	position:relative;
	background-attachment:fixed;
	background-size:cover;
	overflow: hidden;
}

.hideme
{
    opacity:0;
}
#container h2
{ 
    margin:50px; 
    padding:50px; 
	position: relative;
  	text-align: right;
	right: 400px;
	font-family: 'Bungee', cursive;
}
#cont h2{
	position: relative;
  	text-align: right;
	right: 200px;
	margin:-15px;
	padding: 10px;
	font-family: 'Bungee', cursive;
}

.heros h2{
	text-align: center;
	font-size: 36px;
	padding: 30px 0;
}


/*HEROS */

.line {
  -webkit-transition: color 0.4s;
  transition: color 0.4s;
}
.line.visible {
  color: #97879c;
}

/* CONTACT */

.contact {
  padding: 25px 0;
  background:url(../img/background-1872843_1280.jpg)fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.contact i {
  padding: 0 20px;
  font-size: 0.8em;
}

.contact h2 {
  font-family: 'Bungee', cursive;
  font-size: 2.5em;
  border: 1px solid #555;
  background-color: rgba(0,0,0,0.6);
  padding-top: 20px;
  height: 75px;
  color: #fff;
  font-weight: 500;
  line-height: 40px;
  padding-left: 50px;
  text-align: center;
}

#comments {
  margin-top: 0;
}
iframe{
	max-width: 100%;
	min-height: 100%;
}

#contactform .right {
  float: right;
}

#contactform input,
#contactform textarea {
  margin-bottom: 14px;
  width: 100%;
  outline: none;
  border: none;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 20px;
}

#contactform input {
  padding-left: 15px;
  height: 44px;
  border-radius: 0;
}

#contactform textarea {
  padding: 15px;
  height: 218px;
  border-radius: 0;
}

#contactform .btn {
  width: 100%;
  height: 50px;
  border-radius: 2px;
  
  background: rgba(0,0,0,0.8);
  color: #fff;
}

#contactform .btn:hover {
 
  background-image:-webkit-linear-gradient(top,#ffffff 0,#339999 100%);
  color: #000000;
}
#map-canvas {
  width: 100%;
  height: 135px;
  margin-bottom: 15px;
  border: 2px solid #fff;
}

footer{
	padding:20px 0;
	width: 100%;
	height:70px;
}
footer p{
	display: block;
	text-align: right;
	padding-right: 20px;
}
footer ul{
	list-style: none;
	position: relative;
	
}
footer ul li{
	display:inline;
}
footer ul li a{
	text-decoration: none;
	color: #000000;
}
footer ul li a:hover{
	color: #000000;
	
}
.logohero{
	width:100px;
	height: 70px;
	position: relative;
	padding-top: 0;
	margin-top: -18px;
}
.socialbutton{
	float: right;
	
	
}
.nav.socialbutton li{
	padding-right:10px;
}
.nav.socialbutton li a i{
		font-size: 30px;

}
.nav.socialbutton li a:hover{
	color: #339999;
}
.navbar-nav{
	margin:-12px;
}

.absenden{
	font-size: 50px;
}