h2 {
  font-size:42px;
}

h1, h2, h3 {
  font-family: 'Cardo', serif;
}

 h4, p {
  font-family: 'Josefin Slab', serif;
}

.myButton {
	background-color:transparent;
        font-family: 'Josefin Slab', serif;
	border-radius:25px;
	border:1px solid #889142;
	display:inline-block;
	cursor:pointer;
	color:#889142;
	font-size:18px;
	font-weight:bold;
	padding:8px 24px 6px 24px;
	text-decoration:none;
}
.myButton:hover {
	background-color:#889142;
        color:white;
        text-decoration:none;
}
.myButton:active {
	position:relative;
	top:1px;
}

.myButton2 {
	background-color:transparent;
        font-family: 'Josefin Slab', serif;
	border-radius:25px;
	border:1px solid #dcdcdc;
	display:inline-block;
	cursor:pointer;
	color:white;
	font-size:18px;
	font-weight:bold;
	padding:10px 24px 6px 24px;
	text-decoration:none;
}
.myButton2:hover {
	background-color:white;
        color:#889142;
        text-decoration:none;
}
.myButton2:active {
	position:relative;
	top:1px;
}

ul#nav li  {
  display:inline;
  padding:10px 50px;
  border-bottom:1px solid black;
  background-color:#F1F1F1;
  border-radius:5px;
  margin-right:5px;
  
}

.menu {
  color:#889142;
  font-size:18px;
font-family: 'Cardo', serif;
}

ul#nav li:hover {
  background-color:#889142;
}

li:hover a {
  color:white;
}



.FeatureDescript {
  width: 100%;
  height: 100%;
}

@media only screen and (max-width: 600px) {
  ul#nav li  {
  display:block;
  max-width:200px;
  margin-bottom:10px;
  margin-left:-50px;
  }
}

#top {
  margin-bottom:50px;
}

.available {
  margin:20px 0;
  text-align:center;
  padding:5px 0 15px 10px;
}

.color {
  border: 2px solid white;
}

input {
    display: none;
}

.btn{
    display:none;
}

label {
    display: block;   
    padding: 8px 22px;
    border-bottom:1px solid black;
    margin: 0 0 1px 0;
    cursor: pointer;
    background: #fff;
    border-radius: 3px;
    color: #889142;
    transition: ease .5s;
    font-size:20px;
    position: relative; /* ADDING THIS IS REQUIRED */
}

label:hover {
    background: #f2f2f2;
}

label::after {
    content: '+';
    font-size: 22px;
    font-weight: bold;
    position: absolute;
    right: 10px;
    top: 2px;
}

input:checked + label::after {
    content: '-';
    right: 14px;
    top: 3px;
}

.content {
    background: white;
    padding: 10px 25px;
    margin: 0 0 1px 0;
    border-radius: 3px;
}

input + label + .content {
    display: none;
}

input:checked + label + .content {
    display: block;
}

@media only screen and (max-width: 768px) {
  .warranty-img {
    display: none;
  }
  .btn{
     display:block;
 
  }
}

.reverse {
  color:#fff;
  padding:1em;
}

.Siding {
  background-image:url('/imageserver/UserMedia/YWPGALLERY/EverlastSiding/2019/everlast-house-Final.png');     
  background-repeat: no-repeat;
  overflow: hidden;
  height:340px;
  width:100%;
  background-size:100% auto;
}
.BG {
  width:100%;
  overflow: hidden;
  float:left;
}

.EVcolor {
  margin:.125em 0;
  height:4em; 
  display: inline-block;
  padding:10px;
}
.EVcolor img {
max-width: 100%;
  max-height: 100%;
  display: block;
}

.main-img-label {
  font-size:32px;
  background-color:rgba(0,0,0,0.2);
  color:white;
}

.zoom {
  transition: transform .2s;
  cursor: pointer;
}

.zoom:hover {
  transform: scale(1.2); 
}

.EVcolor:hover, .EVcolor:active {filter: brightness(105%); border:1px solid black;}

.autumnHarvest {background-color:#A18164;} 
.deepGranite {background-color:#8A8F8F;}
.englishWedgewood {background-color:#79888E;}
.mistyShadow {background-color:#59534C;}
.montanaSuede {background-color:#7C7463;}
.colonialYellow {background-color:#FFF5C9;} 
.tuscanOlive {background-color:#BBC2AA;}
.brunswick {background-color:#3D4B50;}
.civicBrownstone {background-color:#5D5346;}
.modernIron {background-color:#444744;}
.vintageDublin {background-color:#6E796F;} 
.alpineForest {background-color:#5C6461;} 
.brandyWood {background-color:#726158;} 
.deepCavern {background-color:#4B504C;} 
.mahogany {background-color:#734E41;} 
.naturalSlate {background-color:#4F5F67;} 
.newportBay {background-color:#466279;} 
.quietWillow {background-color:#828F83;} 


.redBrick {background-color:#78484A;} 
.rockHarbor {background-color:#475960;} 
.ruggedCanyon {background-color:#958B75;} 
.russetRed {background-color:#8A544A;} 
.whisperingTimber {background-color:#7A7265;} 
.woodlandRetreat {background-color:#514E47;} 
.brownstone {background-color:#5D5346;} 
.cinnabar {background-color:#805045;} 
.dublin {background-color:#6E786F;} 
.iron {background-color:#444644;} 
.charcoalGray {background-color:#74756B;} 
.americanWalnut {background-color:#94765B;} 
.capecodGray {background-color:#AFAFAB;} 
.glacierBlue {background-color:#818881;} 
.lakeshoreFern {background-color:#717F65;} 
.naturalCedar {background-color:#ABA48C;} 
.portsmouthBlue {background-color:#5F767A;}
.quietWillow {background-color:#828F83;}
.timberStone {background-color:#76685B;}
.vineyardGrove {background-color:#838065;}
.woodlandGreen {background-color:#8C8E7C;}
.alpineForest {background-color:#5C6461;}
.brandyWood {background-color:#726158;}
.capeGray {background-color:#A09B9A;}
.cedar {background-color:#8D877C;}
.woodlandRetreat {background-color:#514E47;}
.walnut {background-color:#9E7960;}
.timber {background-color:#7B7162;}
.terracotta {background-color:#986953;}
.redCedar {background-color:#927564;}





.almond {background-color:#E7E2CB;}
.cameo {background-color:#FFF6DE;} 
.classicCream {background-color:#F7F1CC;} 
.cornSilk {background-color:#DCC28F;} 
.desertSand {background-color:#D9D2BB;} 
.everest {background-color:#A1B4B7;} 
.harborGray {background-color:#9AA098;} 
.linen {background-color:#F8F4E5;} 
.pebblestone {background-color:#AAA891;} 
.sage {background-color:#C3CBB8;} 
.sandtone {background-color:#E0D0B4;} 
.scottish {background-color:#A0AA9A;} 
.silverGray {background-color:#CCD0C7;} 
.victorianGray {background-color:#C2C8C4;} 
.white {background-color:#FFFEF9;} 
.wicker {background-color:#C9BCA7;}

@media only screen and (max-width: 992px) {
  .Siding {
    height:425px;
  }
}

@media only screen and (max-width: 850px) {
  .Siding {
    height:400px;
  }
}

@media only screen and (max-width: 768px) {
  .Siding {
    height:350px;
  }
}

@media only screen and (max-width: 600px) {
  .Siding {
    height:300px;
  }
}

@media only screen and (max-width: 550px) {
  .Siding {
    height:250px;
  }
}

@media only screen and (max-width: 450px) {
  .Siding {
    height:200px;
  }
}

@media only screen and (max-width: 400px) {
  .Siding {
    height:150px;
  }
}