/***************************/
/*** Main Body ***/
html {
    /*background-color: #28b42d;*/
}

body {
    background-color: #C6BBB9;
    height: auto;
}

/***************************/
/*** Top Bar ***/
#topImgContainer {
    height: 160px;
    overflow: hidden;
    background-color: #c4bd97;
    color: white;
    position: relative;
}

#logo {
    padding-top: 52px;
    padding-left: 11.5vw;
}

#logoImg {
	float:left; 
	width:230px; 
	margin-top: -55px;
}

#logoText {
	float:left; 
	width:500px; 
	margin-top: -55px;
}

#selfcater {
	width: 70px; 
	float:right;
	margin-top:-45px;
}

#topSocialBar { 
	float:right;
	margin-top:-10px;
	margin-left:1vw;
	margin-right:10vw;
}

/***************************/
/*** Navbar ***/
.navbar {
    position: sticky;
    width: 100%;
    border: none;
    top: 0;
    margin-bottom: 0;
    border-radius: 0;
    padding-left: 10%;
    padding-right: 10%;
    z-index: 2050;
    background-color: #E0D5B0;
	/*background-color: #9a0000;*/
    font-size: 14px;
    color: black;
    border-top: solid 2px white;
    border-bottom: solid 2px white;
}

.black {
    color: black;
}

.blackT {
    font-weight: 600;
    color: black;
}

.blackT:hover {
    color: mintcream;
}

/***************************/
/*** Navbar Buttons ***/
#inactiveButton {
    background-color: grey;
    border-color: grey;
}

#activeButton {
    background-color: #2F812F;
    border-color: #2F812F;
}

#activeButton:hover {
    background-color: #286E28;
    border-color: #286E28;
}

#aboutbtn {
    background-color: #bb0000;
    border-color: #bb0000;
}

#aboutbtn:hover {
    background-color: #A20000;
    border-color: #A20000;
}

/***************************/
/*** Wrapper ****/
#wrapperSky {
    background: #C6BBB9;;
    background-repeat: repeat;
    background-size: 100%;
    background-position: center;
    width: auto;
    height: 100%;
    margin-top: 1vw;
    margin-bottom: 1vw;
}

/***************************/
/*** Footer ***/
footer {
    bottom: 0;
    background-color: #45bc1a;
    color: white;
    padding: 15px;
    width: 100%;
    clear: both;
    position: relative;
}

.footerPic {
    bottom: 0;
    width: 100%;
    position: relative;
}

#footerText {
    margin-top: 1%;
    font-weight: 600;
}

.copyright {
	cursor: default;
	font-size:0.6vw;
	margin:0; padding:0;
}

.footerInfo {
	cursor: default;
	font-size:0.5vw;
	margin:0; padding:0;
}

.footerLink {
	color: inherit;
	text-decoration: none;
	cursor: pointer;
	font-size:0.7vw;
	margin:0; padding:0;
	padding-left: 20px;
	padding-right: 20px;
}

#socialImg {
	width:35px; 
	height: auto;
	margin-left:5px;
	margin-right:5px;
}

/***************************/
/*** Testimonials ****/
.testimonials {
    padding:1vw;
    z-index: 1000;
}

.testimonialsContent {
    border: 1px solid black;
    padding: 2vw;
    font-weight: 500;
    font-family: 'Roboto', sans-serif;
    background-color: mintcream;
    border-radius: 20px;
    font-size: 16px;
}

.testFrom {
    font-size: 17px;
    font-weight: 900;
}


/***************************/
/*** Cloud Animation ***/
#movingClouds {
    position: absolute;
    width: 100%;
    overflow: hidden;
}

@-webkit-keyframes animateCloud {
    0% {
        margin-left: -1200px;
    }

    100% {
        margin-left: 100%;
    }
}

@-moz-keyframes animateCloud {
    0% {
        margin-left: -1200px;
    }

    100% {
        margin-left: 100%;
    }
}

@keyframes animateCloud {
    0% {
        margin-left: -1200px;
    }

    100% {
        margin-left: 100%;
    }
}

/* ANIMATIONS */

.x1 {
    -webkit-animation: animateCloud 35s linear infinite;
    -moz-animation: animateCloud 35s linear infinite;
    animation: animateCloud 35s linear infinite;

    -webkit-transform: scale(0.65);
    -moz-transform: scale(0.65);
    transform: scale(0.35);
}

.x2 {
    -webkit-animation: animateCloud 23s linear infinite;
    -moz-animation: animateCloud 23s linear infinite;
    animation: animateCloud 23s linear infinite;

    -webkit-transform: scale(0.3);
    -moz-transform: scale(0.3);
    transform: scale(0.3);
}

.x3 {
    -webkit-animation: animateCloud 30s linear infinite;
    -moz-animation: animateCloud 30s linear infinite;
    animation: animateCloud 30s linear infinite;

    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    transform: scale(0.5);
}

.x4 {
    -webkit-animation: animateCloud 18s linear infinite;
    -moz-animation: animateCloud 18s linear infinite;
    animation: animateCloud 18s linear infinite;

    -webkit-transform: scale(0.4);
    -moz-transform: scale(0.4);
    transform: scale(0.4);
}

/* OBJECTS */

.cloud {
    background: #fff;
    background: -moz-linear-gradient(top, #fff 5%, #f1f1f1 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(5%, #fff), color-stop(100%, #f1f1f1));
    background: -webkit-linear-gradient(top, #fff 5%, #f1f1f1 100%);
    background: -o-linear-gradient(top, #fff 5%, #f1f1f1 100%);
    background: -ms-linear-gradient(top, #fff 5%, #f1f1f1 100%);
    background: linear-gradient(top, #fff 5%, #f1f1f1 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#f1f1f1', GradientType=0);

    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;

    -webkit-box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);
    box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);

    height: 120px;
    position: relative;
    width: 350px;
}

.cloud:after,
.cloud:before {
    background: #fff;
    content: '';
    position: absolute;
    z-indeX: -1;
}

.cloud:after {
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;

    height: 100px;
    left: 50px;
    top: -50px;
    width: 100px;
}

.cloud:before {
    -webkit-border-radius: 200px;
    -moz-border-radius: 200px;
    border-radius: 200px;

    width: 180px;
    height: 180px;
    right: 50px;
    top: -90px;
}




/***************************/
/*** Media Queries ****/
@media only screen and (max-width: 1300px) {
    
}

@media only screen and (max-width: 1200px) {
	#logoImg {
		width:200px; 
		margin-top: -43px;
    }
	
    #logoText {
		width: 440px;
		margin-top: -45px;
	}
	
	#topSocialBar { 
		margin-right:3vw;
	}

}

@media only screen and (max-width: 992px) {
    .copyright {
		font-size:1.1vw;
	}

	.footerInfo {
		font-size:1.1vw;
	}
	
	.footerLink {
		font-size:0.9vw;
	}
}

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

}

@media only screen and (max-width: 768px) {
	#topSocialBar {
		float: none;
		text-align:center;
		padding-top: 5px;
		padding-bottom: 5px;
	}
	
	#socialImg {
		padding-bottom:5px;
	}
	
	#topImgContainer {
		height: auto;
	}
    
    #logo {
        padding-left: 0vw;
		padding-top: 0vw;
    }

    #logoImg {
		width: 60%;
        display: block;
  		margin-left: 20%;
		margin-top: 0px;
    }
	
	#logoText {
		width: 100%;
		display: block;
        margin: auto 0;
		margin-top: 0px;
		padding-left: 3%;
	}
	
	.testimonialsContainer {
        padding-left: 7vw;
        padding-right: 7vw;
    }
	
	.copyright {
		font-size:1.8vw;
	}

	.footerInfo {
		font-size:1.8vw;
	}
	
	.footerLink {
		font-size:1.8vw;
	}
}