@charset "UTF-8";
/* CSS Document */
.fadeout {
    opacity:0;
}

body { margin-left: auto; margin-right: auto; margin-top: 0px; margin-bottom: 0px; width: 70%; background-color: #e3e8eb;
}

@font-face { font-family: "fancy"; src: url('MightypeScript.otf'), url('MightypeScript.eot'); /* IE */
}

.imgContainer {  font-size: 0px ; white-space: nowrap; 
}

.big{ display: block;
}

.small{ display: none;
}

#mainwrapper { height:100vh; min-height: 950px; background-color: #FFFFFF;
}

#mainwrapper header {overflow: hidden; font-style: normal; font-weight: 400;
}
#mainwrapper header #logo { width: 100%; text-align: center; padding-top: 12px; padding-bottom: 12px; display:block;
}
#mainwrapper header #logox { width: 100%; text-align: center; padding-top: 12px; padding-bottom: 12px; display:none;
}
#mainwrapper header #logo2 { width: 100%; padding-top: 24px; padding-bottom: 12px; display:none; margin-left: auto; margin-right: auto;
}
#mainwrapper header nav { text-align: center; padding-top: 12px; padding-bottom: 12px; width: 80%; margin-left: auto; margin-right: auto; position:relative; z-index: 10; display:block;
}
#mainwrapper header nav2 { text-align: left; padding-top: 6px; padding-bottom: 6px; width: 100%; margin-left: auto; margin-right: auto; position:fixed; z-index: 10; display:none;
}

.title{margin-left: auto; margin-right: auto; font-family: fancy; font-size: 65px; line-height: 65px; color:#555555;}

.title2{ margin-left: auto; margin-right: 5%; font-family: fancy; font-size: 50px; line-height: 65px; color:#898A8C; text-align: left; width: 400px; }

.titlec{ margin-left: auto; margin-right: auto; font-family: fancy; font-size: 50px; line-height: 65px; color:#898A8C; text-align: left; width: 50%; }

.titlem{ margin-left: auto; margin-right: auto; font-family: fancy; font-size: 45px; line-height: 60px; color:#898A8C; text-align: left; width: 60%; }

.title3{ margin-left: auto; margin-right: auto; font-family: fancy; font-size: 40px; line-height: 55px; color:#7c6d50; width: 100%; background-color: #f1eee9;}

.feedy{ margin-left: auto; margin-right: auto; font-family: fancy; font-size: 30px; line-height: 45px; color:#3d4454; width: 80%; background-color: #f1eee9;}

.conny{ margin-left: auto; margin-right: auto; font-family: fancy; font-size: 30px; line-height: 45px; color:#3d4454; width: 80%; background-color: #E1D8CE;}

.copy{ margin-left: auto; padding-right: 5%; width: 400px; font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; font-size: 15px; line-height: 30px; color:#898A8C;
text-align: left; }

.copyc{ margin-left: auto; padding-right: auto; width: 100%; font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; font-size: 15px; line-height: 30px; color:#898A8C;
text-align: left; }

.copym{ margin-left: auto; margin-right: auto; width: 80%; font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; font-size: 15px; line-height: 26px; color:#898A8C;
text-align: left; }

.copy2{ margin-left: auto; padding-right: auto; width: 100%; font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; font-size: 15px; line-height: 30px; color:#baa98d;
 text-align: center; background-color: #f1eee9;}

.copy3{ margin-left: auto; padding-right: auto; width: 100%; font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; font-size: 13px; line-height: 20px; color:#3d4454;
 text-align: left}

.pic{margin-left: 5%; margin-right: auto; max-width:400px;}

.pic2{margin-right: 5%; margin-left: auto; max-width:400px;}
.pic3{margin-right: 8%; margin-left: 8%;}

.pic4{margin-right: auto; margin-left: auto; width: 50%;}

.baseP{ text-align: center; background-color: #FFFFFF; width: 100%; height:auto; min-height: 300px; margin-left: auto; margin-right: auto;
}
.baseP2{
text-align: center;
	background-image: url(images/blank.gif);
	background-position:center ;
	background-size: cover;
width: 100%;
height:auto;
min-height: 200px;
margin-left: auto;
margin-right: auto;
display:block;
}
.baseP3{
text-align: center;
background-position:center ;
background-size: cover;
background-color: #FFFFFF;
width: 90%;
padding-top:40px;
padding-bottom:20px;
margin-left: auto;
margin-right: auto;
display:block;
	padding-left: 5%;
	padding-right: 5%;
}
#mainwrapper #leadin{
text-align: center;
width: 80%;
margin-left: auto;
margin-right: auto;
display:block}

.introx{
	float:right;
	text-align: left;
	padding-right: 5%;
	padding-left: 5%;
width: 70%;               
display:block;
}


.introx2{
	padding-right: 5%;
	padding-left: 5%;
width: 70%;
display:block;
	background-image:url(images/home1.jpg);
	background-repeat: no-repeat;
		background-position:left ;
	background-position: top;
	background-size: cover;
height: 100vh;
	
	min-height: 565px;
}


.feed{
text-align: center;
background-color: #f1eee9;
width: 100%;
margin-left: auto;
margin-right: auto;
display:block;
}
#case1b{
text-align: center;
margin-left: auto;
margin-right: auto;
padding-top:40%;
padding-bottom: 20%;
display:block;
}

#case2{
text-align: center;
background-image:url(images/case2.jpg);
	background-position:center ;
width: 100%;
height:100vh;
	min-height: 900px;
margin-left: auto;
margin-right: auto;
display:block;
}

#case2b{
text-align: center;
margin-left: auto;
margin-right: auto;
padding-top:40%;
padding-bottom: 20%;
display:block;
}

#case3{
text-align: center;
background-image:url(images/case3.jpg);
	background-position:center ;
width: 100%;
height:100vh;
	min-height: 900px;
margin-left: auto;
margin-right: auto;
display:block;
}

#case3b{
text-align: center;
margin-left: auto;
margin-right: auto;
padding-top:40%;
padding-bottom: 20%;
display:block;
}

#case4{
text-align: center;
background-image:url(images/case4.jpg);
	background-position:center ;
width: 100%;
height:100vh;
	min-height: 900px;
margin-left: auto;
margin-right: auto;
display:block;
}

#case4b{
text-align: center;
margin-left: auto;
margin-right: auto;
padding-top:50%;
padding-bottom: 10%;
display:block;
}

#case5{
text-align: center;
background-image:url(images/case5.jpg);
	background-position:center ;
width: 100%;
height:100vh;
	min-height: 900px;
margin-left: auto;
margin-right: auto;
display:block;
}

#case5b{
text-align: center;
margin-left: auto;
margin-right: auto;
padding-top:40%;
padding-bottom: 20%;
display:block;
}

#case6{
text-align: center;
background-image:url(images/case6.jpg);
	background-position:center ;
width: 100%;
height:100vh;
	min-height: 900px;
margin-left: auto;
margin-right: auto;
display:block;
}

#case6b{
text-align: center;
margin-left: auto;
margin-right: auto;
padding-top:40%;
padding-bottom: 20%;
display:block;
}

#case7{
text-align: center;
background-image:url(images/case7.jpg);
background-position:center ;
width: 100%;
height:100vh;
min-height: 900px;
margin-left: auto;
margin-right: auto;
display:block;
	z-index: 9;
}

#case7b{
text-align: center;
margin-left: auto;
margin-right: auto;
padding-top:40%;
padding-bottom: 20%;
display:block;
	z-index: 9;
}
#contact{
text-align: center;
background-color:#e1d8cf;
width: 100%;
height:100vh;
min-height: 900px;
margin-left: auto;
margin-right: auto;
display:block;
	
}

#contact #sayhi{
text-align: center;
width: 50%;
margin-left: auto;
margin-right: auto;
display:block;
}

#contact #clogo {
	/*Nav bar containing links in header */
	text-align: center;
	width: 100%;
}

#animationSandbox {
	z-index:20;
	height:100vh;
	background-color:#e1d8cf;
	display:none;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	padding: 0px;

}

.butt {
border: none;
text-decoration: none;
	background-color: transparent;
text-align: center;
cursor: pointer;
margin: 15px;
}
.butt:focus {outline:0;}

.butt2 {
  border: none;
	text-decoration: none;
	background-color:#e1d8cf;
	overflow: visible;
  text-align: center;
  padding: 5px;
  float:right;
  transition: all 0.5s;
  cursor: pointer;
  margin: 15px;
}
.butt2:focus {outline:0;}

 #animationSandbox #logoR {
	/* Company Logo text */
	width:15%;
	float: left;
	padding-left: 35px;
	padding-top: 45px;
	padding-bottom: 12px;
	display:block;
}
 #animationSandbox #logoR2 {
	/* Company Logo text */
	width:15%;
	float: left;
	padding-left: 35px;
	padding-top: 25px;
	padding-bottom: 12px;
	display:none;
}

a:link {color: #898A8C;text-decoration:none;}
a:visited {color: #898A8C;text-decoration:none;}
a:hover {color: #c6bfb8;text-decoration:none;}
a:active {color: #c6bfb8;text-decoration:none;}

#submit {
 color: #fff;
 font-size: 32px;
 font-family: fancy;
 width: 125px;
 height: 55px;
 border: none;
 background: #3d4454; 
cursor: pointer;

}

.w3-row {background-color: #FFFFFF;}

.w3-row2 {background-color:#E1D8CE;}

.w3-col,.w3-half,.w3-third,.w3-twothird,.w3-threequarter,.w3-quarter{float:left;width:100%;font-family: gothicdm;  }
.w3-container:after,.w3-container:before,.w3-panel:after,.w3-panel:before,.w3-row:after,.w3-row:before,.w3-row-padding:after,.w3-row-padding:before,
.w3-cell-row:before,.w3-cell-row:after,.w3-clear:after,.w3-clear:before,.w3-bar:before,.w3-bar:after{content:"";display:table;clear:both;font-family: gothicdm; padding: 0px; border-spacing: 0px; border: 0px; border-collapse: collapse;  }
.w3-red{text-align: center; line-height: 29px; padding:0px; margin: 0px; background-color: #FFFFFF; overflow: hidden}
.w3-red2{text-align: center; line-height: 29px; padding:0px; margin: 0px; background-color: #FFFFFF;}
.w3-red3{float:left; text-align: left; line-height: 29px; padding-right:0px; margin: 0px; background-color: #FFFFFF;}
.w3-red4{text-align: right; line-height: 29px; padding:0px; margin: 0px; background-color: #FFFFFF;}
.w3-red5{text-align: center;  padding:0px; margin: 0px; background-color:#E1D8CE; }
.w3-red6{line-height: 29px; padding:0px; margin-left: auto; margin-right: auto; background-color:#E1D8CE; text-align: left; width:40%}

@media (min-width:601px){.w3-col.m1{width:8.33333%}.w3-col.m2{width:16.66666%}.w3-col.s3,.w3-quarter{width:24.99999%}.w3-col.m4,.w3-third{width:33.33333%}
.w3-col.m5{width:41.66666%}.w3-col.m6,.w3-half{width:49.99999%}.w3-col.m7{width:58.33333%}.w3-col.m8,.w3-twothird{width:66.66666%}
.w3-col.m9,.w3-threequarter{width:74.99999%}.w3-col.m10{width:83.33333%}.w3-col.m11{width:91.66666%}.w3-col.m12{width:99.99999%}}


@media only screen and (min-width : 275px) and (max-width : 480px) {
#mainwrapper header #logo { display:none;}
#mainwrapper header #logo2 {display:block;text-align: center; }
.big{display: none;}
.conny{width: 100%;}
.small{display: block;}
	.titlec{ width: 70%; }
	.titlem{ width: 70%; }
	.pic4{width: 100%;}
	
.holder {width: 100%; text-align: center; margin-left: auto; margin-right: auto; background-color: #FFFFFF;}
.w3-red5{ width:100%}
	.w3-red6{ text-align: center; width:100%}
	
body {width: 100%;}
	
#mainwrapper header nav { display:none;}
	
#mainwrapper header nav2 { display:block;}

.pic{margin-left: auto; margin-right: auto; width:100%; width: auto\9;}
	
.pic2{margin-left: auto; margin-right: auto; width:100%; width: auto\9;}
	
.pic3{
    max-width: 100%;
			margin-left: auto;
margin-right: auto;
    height: auto;
    width: auto\9; /* ie8 */
}

#mainwrapper #intro{
width: 80%;
}
	#mainwrapper #leadin{
	padding-top:60px;
}
#animationSandbox  #logoR {
	/* Company Logo text */
	display:none;
}
	#animationSandbox  #logoR2 {
	/* Company Logo text */
	display:block;
}
	.baseP{
text-align: center;
	background-position:center ;
	background-size: cover;
width: 100%;
		height: auto;
min-height: 250px;
margin-left: auto;
margin-right: auto;
display:block;
}
	.baseP2{
text-align: center;
		background-image:url(images/blank.gif);
	background-position:center ;
	background-size: cover;
width: 100%;
		height: auto;
min-height: 250px;
margin-left: auto;
margin-right: auto;
		margin-bottom:60px;
display:block;
}
	.title{
margin-left: auto;
margin-right: auto;
width: 90%;
font-size:40px;
line-height:42px;

}
	.title2{
 font-size: 35px; text-align: center; line-height: 55px; width: 80%; margin-left: auto; margin-right: auto;
}
	.copy{
  width: 80%; text-align: center; margin-left: auto; margin-right: auto; padding-right: 0%;
}
	
		
}
@media only screen and (min-width : 481px) and (max-width : 601px) {
	.w3-red5{ width:100%}
	.w3-red6{ text-align: center; width:100%}
	.conny{width: 100%;}
.title{
margin-left: auto;
margin-right: auto;
width: 90%;
font-size:50px;
line-height:72px;

}
	.titlec{ width: 70%; }
	.titlem{ width: 70%; }
	.pic4{width: 100%;}
	.pic{
margin-left: auto;
margin-right: auto;
width:100%;

}
		.pic2{
margin-left: auto;
margin-right: auto;
width:100%;

}
	
	.pic3{
    max-width: 100%;
			margin-left: auto;
margin-right: auto;
    height: auto;
    width: auto\9; /* ie8 */
}
.title2{
 font-size: 35px; text-align: center; line-height: 55px; width: 80%; margin-left: auto; margin-right: auto;
}
	.copy{
  width: 80%; text-align: center; margin-left: auto; margin-right: auto;
}
	#mainwrapper header nav2 {
	/*Nav bar containing links in header */
	
	display:block;
}
	.big{
display: none;
}

.small{
display: block;
}
	
	#mainwrapper header nav {
	/*Nav bar containing links in header */
	
	display:none;
}
	
#mainwrapper header #logo { display:none;}
#mainwrapper header #logo2 {display:block;text-align: center; }
#mainwrapper header #logox {display:none;}
body {width: 100%;}
}
@media only screen and (min-width : 602px) and (max-width : 1024px) {
body {width: 100%;}	
.title{
margin-left: auto;
margin-right: auto;
width: 90%;
font-size:40px;
line-height:62px;

}
.titlec{ width: 70%; }	
	.titlem{ width: 70%; }	
	.pic4{width: 70%;}
.conny{width: 100%;}
	
	#mainwrapper header #logo {
	/* Company Logo text */
	display:none;
}
	#mainwrapper header #logox {
	/* Company Logo text */
	display:block;
}
		.title2{
 font-size: 30px; line-height: 50px; width: 70%; margin-left: auto; margin-right: 10%;
}
	.copy{
  width: 70%;  margin-left: auto; margin-right: 5%;
}
	
}
@media only screen and (min-width : 1025px) and (max-width : 1224px) {
body {width: 90%;}		
.title{
margin-left: auto;
margin-right: auto;
width: 78%;
font-size:50px;
line-height:62px;

}
	.title2{
 font-size: 35px; line-height: 55px; width: 70%;
}
	.copy{
  width: 70%;
}
	
	
}

	

@media only screen and (min-width : 1225px) and (max-width : 1424px) {
	
.title{
margin-left: auto;
margin-right: auto;
width: 90%;
font-size:54px;
line-height:62px;

}
	.title2{
 font-size: 35px; line-height: 55px; width: 350px;
}
	.copy{
  width: 350px;
}
}

@media only screen and (min-width:1225px){


}