@import url('https://fonts.googleapis.com/css?family=Roboto');

/*make margins smaller for the height to not overflow from the iframe */
/* CSS reset */
* {
   margin: 0;
   padding: 0;
   font-family: 'helvetica', 'Roboto', 'arial', sans-serif;
   font-weight: 400;
   font-size: 16px;
   overflow: auto;
}

body {
   background-color: #fbfaf6;
}

#iframeContainer {
   width: 900px;
   margin: 10px auto;
}

h1 {
   font-size: 21px;
   line-height: 22px;
   font-weight: 600;
   letter-spacing: -1px;
   margin-top: -5px;
}

h3 {
   font-size: 21px;
   line-height: 20px;
   font-weight: 600;
   letter-spacing: -1px;
   overflow: hidden;
}

h4 {
   font-size: 14px;
   line-height: 24px;
   font-weight: 600;
   letter-spacing: -1px;
   overflow: hidden;
}

.iframeDescription {
   font-size: 12px;
   font-family: 'Helvetica', 'Roboto', 'Arial', sans-serif;
   margin-top: 5px;
   color: rgba(0, 0, 0, 0.6)
}

a:link, a:visited {
   color: inherit;
   text-decoration: none;
   font: inherit;
}

a:hover {
   color: rgba(0, 0, 0, 0.6);
   text-decoration: underline;
   font: inherit;
}

.shortLine {
   width: 20px;
   border-bottom: solid 1px #c6b49e;
   margin: 15px 0;
}

.closeButton {
   overflow: visible;
   width: 45px;
   height: 45px;
   position: absolute;
   font-family: 'Helvetica', 'Arial', sans-serif, 'Roboto',;
   font-size: 16px;
   top: -10px;
   right: -10px;
   color: #fff;
   text-align: center;
   padding: 13px;
   /* border: solid 2px #bfaf9b; */
   cursor: pointer;
   border-radius: 40px;
   background-color: #d4c7b6;
}

.closeButton:hover {
   background-color: #a4c8d2;
}

.modalContent {
   position: relative;
   overflow: visible;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background-color: #fbfaf6;
   display: table;
   padding: 30px;
   width: 66%;
   box-shadow: 0 5px 20px -5px;
   min-height: 100px;
   max-width: 600px;
   min-width: 500px;
   border-radius: 1rem;
}

.modalContentLeft {
   min-width: 200px;
   width: 40%;
   height: auto;
   margin: 0 10px 0 0;
   /* background: rgb(51, 88, 255); */
   display: inline-block;
   padding: 0px;
   float: left;
   position: relative;
   overflow: hidden;
}

.modalContentRight {
   width: 55%;
   /*   height: 100%;*/
   margin: 0;
   padding: 00;
   display: inline-block;
   /* background: #fc3; */
   float: right;
   position: relative;
   vertical-align: middle;
   overflow: hidden;
}

.modalHeader {
   min-height: 24px;
   overflow: hidden;
   margin: 0 0 10px 0;
   padding: 0 0 10px 0;
   border-bottom: solid 1px rgba(0, 0, 0, 0.5);
   ;
}

.smallImg {
   image-rendering: auto;
   width: 100%;
   padding: 0;
   magin: 0;
}

.modalDescription {
   min-height: 100px;
   color: rgba(0, 0, 0, 0.78);
   font-family: 'helvetica', 'Roboto', 'Arial', sans-serif;
   font-size: 15px;
   line-height: 20px;
   margin: 0;
   padding: 0;
}

/* This sets the aspect ratio */
#wrapper {
   overflow: hidden;
   position: relative;
   width: 100%;
   height: 0;
   padding-top: 52%;
   /* this padding sets the aspect ratio */
}

/* #container sets the main content wrapper */
#container {
   background: url('images/floodhousesharpst_low.jpg') no-repeat;
   /* background: #fc3; */
   margin: 0px auto;
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   padding: 0;
   background-size: 100%;
   /* makes the background fit the frame */
   max-width: 1500px;
   width: 100%;
   height: auto;
}

.tooltip {
   width: 15px;
   height: 15px;
   border-radius: 50px;
   /* These commands turn it into a 10px radius circle */
   border: 4px solid #fbd685;
   box-shadow: 0 3px 8px -3px rgba(0, 0, 0, 0.4);
   position: absolute;
   background: rgba(255, 255, 255, 1);
   overflow: visible;
   transition: all .22s ease-in-out;
}

.tooltip:hover {
   width: 15px;
   height: 15px;
   border-radius: 50px;
   border: 3px solid rgba(255, 255, 255, 0.8);
   background: #63aebb;
   cursor: pointer;
   transform: translate3d(0, 1px, 0);
   transform: scale(1.5);
   transition: all .22s ease-in-out;
}

/* Tooltip Tester */
.info {
   /* min-width: 200px; */
   width: min-content;
   font-size: 12px;
   height: auto;
   padding: 10px;
   background: rgba(255, 255, 255, 0.7);
   border-radius: 5px;
   position: absolute;
   visibility: hidden;
   white-space: nowrap;
   text-align: center;
   display: inline-block;
   top: -50px;
   left: 50%;
   opacity: 0;
   overflow: hidden;
   z-index: 1;
   box-shadow: 0 0 50px 0 rgba(0, 0, 0, .3);
   transform: translate3d(0, -10px, 0);
   transition: all .15s ease-in-out;
}

.tooltip:hover .info {
   opacity: 1;
   transform: translate3d(0, 0, 0);
   visibility: visible;
}



/* .tooltip:hover .info {
   opacity: 1;
   transform: translate3d(0, 0, 0);
   visibility: visible;
}  */

#concreteFloor {
   margin: 39% 0 0 50% !important;
}

#concreteStair {
   margin: 37% 0 0 31% !important;
}

#internalVoid {
   margin: 19% 0 0 41% !important;
}

#permeableScreening {
   margin: 33% 0 0 10% !important;
}

#singleSkinHwd {
   margin: 24% 0 0 26% !important;
}

#internalBlock {
   margin: 30% 0 0 68.8% !important;
}

#aluminiumSill {
   margin: 37% 0 0 56.2% !important;
}

#cabinetry {
   margin: 34.5% 0 0 36% !important;
}

#stoneTile {
   margin: 32% 0 0 73% !important;
}

/* @media only screen and (min-width: 1500px) {
   #concreteFloor {
     margin: 585px 0 0 600px !important;
} */

/*  BEGIN MODAL */

.modalDesign {
   position: fixed;
   left: 0;
   /* z-index: 1; */
   top: 0;
   width: 100%;
   height: 100%;
   overflow: hidden;
   background-color: rgba(0, 0, 0, 0.4);
   opacity: 0;
   visibility: hidden;
}

.showModal {
   opacity: 1;
   visibility: visible;
   transform: scale(1.0);
   transition: visibility 0s linear 0s, opacity 0.25 0s, transform 0.25s;
   transition-;
}

















/* 
#concrete   {   margin: 410px 0 0 400px !important;}

#permeablescreening   {   margin:350px 0 0 52px !important;}

#internalvoid   {   margin:250px 0 0 360px !important;}

#singleskin   {   margin:350px 0 0 220px !important;}

#internalblock   {   margin:350px 0 0 605px !important;}

#aluminiumsill   {   margin:395px 0 0 505px !important;}

#cabinetry   {   margin:375px 0 0 320px !important;}

#concretestair   {   margin: 400px 0 0 280px !important;}

#stonetile   {   margin: 380px 0 0 620px !important;}
             
.info     {   width:400px;
              padding:10px;
              background:rgba(255,255,255,0.85);
              border-radius:10px;
              position:absolute;
              visibility:hidden;
              opacity:0;
              margin:-140px 0 0 -175px;
              box-shadow:0 0 50px 0 rgba(0,0,0,.3);
              transform: translate3d(0,-10px,0);
              transition: all .15s ease-in-out;

            }

h3         {  font-family: 'helvetica', sans-serif;
              font-weight:600;
              font-size:15px;
              margin:0 0 5px 0;}

p           {  font-family: 'helvetica', sans-serif;
               font-style: 'normal';
               font-weight:400;
               font-size:12px;}

.arrow {
  position:absolute;
  margin:8px 0 0 160px;
	width: 0; 
	height: 0; 
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid #fff;
} */