﻿/* <style>*/
/*same as p inside*/
 h66 {
 font-family: 'Roboto Condensed', sans-serif;
	 font-size: 1.0em;
	 line-height: 1.30;
	 max-height: 100px;
	 text-overflow: clip;
	 font-weight: 400;
}
    h69 {
		/*<h69><br> Hebridean Sheep Society </h69>*/
font-family: 'Roboto Condensed', sans-serif;
	font-size: 1.0em;
/*max-height: 100px;*/
	text-overflow: clip;
	color: #ffc325;
	font-weight: 600;
}
   h96 {
	  /* <h96><br> A note to remember from the </h96>*/
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 0.7em;
/*max-height: 100px;*/
	text-overflow: clip;
	line-height: 1.8;
	color: #ffc325;
	font-weight: 600;
	/*font-style: italic;*/
}
h100 {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 2.1em;
	line-height: 1.1;
	color: #ffc325;
	font-weight: 600;
	/*text-align: center;*/
}

 /*   * {
	 margin: 0;
	 box-sizing: border-box;
	 padding: 0;
}*/
/*  html,body {
	 width: 100%;
	 height: 100%;
	 overflow: hidden;
	 background:#009688;
}
 .wrapper {
	 width: 100%;
	 height: 100%;
	 -webkit-perspective: 2000px;
	 padding: 5%;
	 perspective: 2000px;
	 display: flex;
	 justify-content: center;
	 align-items: center;
}*/

 .containerx {
	 width: 100%;
	 height: 100%;
	 -webkit-perspective: 2000px;
      padding: 5%;
	 perspective: 2000px;
	 display: flex;
	 justify-content: center;
	 align-items: center;
	/* background:#009688;*/
	  background: url(../img/650.jpg);
      background-repeat: no-repeat;
      background-size: 650px 350px;
	

	
}
 .left1, .middle1, .right1 {
	 float: left;
	 position: relative;
	 height: 100%;
	 background-color: #fff;
	 width: 33%;
/*	 max-width: 300px;
	 max-height: 400px;*/
	 
     max-width: 200px;
	 max-height: 330px;
}
 .left1, .right1 {
	 transition: 0.7s ease-in-out;
}
 .left1.open, .right1.open {
	 transform: rotateY(0deg);
	 transition: 0.7s ease-in-out;
}
 .left1 {
	 z-index: 20;
	 transform: rotateY(180deg);
	 transform-origin: 100% 50%;
}
 .right1 {
	 transform: rotateY(-180deg);
	 transform-origin: 0% 50%;
}
 .front1, .back1 {
	 height: 100%;
	 width: 100%;
	 position: absolute;
	 background-color: #fff;
	 top: 0;
}
 .front1 {
	 transform: rotateY(180deg);
	 z-index: 5;
}
 .back1 {
	 background-color: #fff;
	 z-index: 4;
	 backface-visibility: hidden;
	 -webkit-backface-visibility: hidden;
}
 .back1.open {
	 z-index: 10;
}
 .openB {
	
	 background-color: #ffc325;	 	
	 border: 2px solid #009688;
	 padding: 5px;
     position: absolute;
	 min-width: 120px;
	 max-width: 150px;
	 z-index: 50;
	 bottom: 20px;
	 Left: 40px;
	 font-weight: 300;
	 font-size: 1.0em;	  
	 transition: 0.2s ease-in-out;
	 cursor: pointer;
     border-radius: 10px;
     color: Black;
}
 .openB:hover {
	/* background-color: #fcba03;*/
	 	 background-color: black;
	 color: white;
	 transition: 0.2s ease-in-out;
     outline: none;
}
 .closeB {
	 position: absolute;
	 border: none;
	 background-color: rgba(0, 0, 0, 0.4);
	 color: white;
	 z-index: 50;
	 width: 30px;
	 font-size: 1.5em;
	 cursor: pointer;
	 height: 30px;
	 top: 10px;
	 right: 10px;
	 border-radius: 50%;
	 display: none;
}
 .closeB:hover {
	 background-color: rgba(0, 0, 0, 0.2);
	 transition: 0.2s ease-in-out;
}
 .preview {
	 max-height: 125px;
	 overflow: hidden;
	 text-overflow: ellipsis;
	 content: "";
	 position: relative;
	 display: block;
}
 .preview:before {
	 content: '';
	 width: 100%;
	 height: 100%;
	 position: absolute;
	 left: 0;
	 top: 0;
	 background: linear-gradient(transparent, white);
}
 .sectionWrap {
	  border-right-width: 1px ;
	  border-right-style: solid;
	  border-right-color: #4b5e21;
	 height: 100%;
	 width: 100%;
	 padding: 20px;
	box-sizing: border-box;
	 overflow: hidden;
	background-color: #82a43a; 
}
 .sectionWrapF {
	 height: 100%;
	 width: 100%;
/*	 background-image: url(../images/108a.jpg);
	 background-image: vertical-align: top;);*/
/*	 background-repeat: no-repeat;
 	 background-attachment: fixed;
  	 background-position: center; */
	 padding: 0px;
	 box-sizing: border-box;
	 overflow: hidden;
     text-align: center;
}

    
    /*
    </style>*/
