@import url('https://fonts.googleapis.com/css?family=Merriweather&display=swap');
@import url('https://fonts.googleapis.com/css?family=Caprasimo&display=swap');
@import url('https://fonts.googleapis.com/css?family=Rubik:wght@700=swap');
@import url('https://fonts.googleapis.com/css?family=Rubik:wght@400=swap');
@import url('https://fonts.googleapis.com/css?family=Lato:wght@900=swap');


.body {
  heigt: 1024px;
  width: 1366px;
  overflow: hidden;
}

.link {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

.link3 {
  position: absolute;
  top: 40px;
  left: 0;
  z-index: 10;
  font-size: 10pt;
  margin: 0;
  padding: 5px 0 0 10px;
  font-weight: 300;
  font-style: italic;
  color: #746e6c;
  }
  
  .link4 {
  position: static;
  top: 2px;
  left: 0;
  z-index: 10;
  font-size: 12pt;
  margin: 0;
  padding: 10px 0 0px 10px;
  font-weight: 300;
  font-style: italic;
  color: #746e6c;
  }
  
    .sublink {
  font-family: Rubik; 
  position: static;
  top: 2px;
  left: 0;
  z-index: 10;
  font-size: 18pt;
  margin: 0;
  padding: 20px 0 0px 20px;
  font-weight: 300;
  font-style: italic;
  color: #746e6c;
  }
  
    .sublinkdiv {
font-family: Rubik; 
background-color: #f9f7f7;
  }
  
.morebutton {
font-family: Rubik; 
padding 10px;
width:45%;
margin: 10px;
  }



/* Flex container test used for weatherview */


.flex-container {
  display: flex;
  flex-wrap: wrap;
  hieght: 100%;
}

.flex-item-left {
  flex: auto;
}

.flex-item-right {
  flex: auto;
}

.image3 {
border-radius: 5px; 
max-width: 650px;
width: auto; 
height: auto; 
padding: 5px;
text-align: center;
margin: 10px -10px 0px 0px;
opacity:0.9;
}

.davis1 {
transform: scale(0.75);
transform-origin: top left;
margin: 20px -350px 0px 20px;
Padding: 10px;
}

davis-iframe {
border-radius: 5px; 
border: 1px solid #d7d0ce; 
box-shadow: 0px 5px 15px #00000055;
}

/*Davis resize */

/* Responsive layout - makes a one column layout (100%) instead of a two-column layout (50%) */




@media (max-width: 1400px) {
  .flex-item-left {
  margin-left: 0px;
  margin-top: 0px;
  }
  .flex-item-right {
  margin-left: 0px;
  margin-top: -20px;
  }
.davis1 {
transform: scale(0.68);
transform-origin: top left;
margin: 20px -350px 0px 10px;
Padding: 10px;
}
.image3 {
max-width: 610px;
width: auto; 
height: auto; 
padding: 0px;
margin: 30px 0px 0px 0px;
}
.body {
  height: auto;
  width: 1366px;
  overflow: hidden;
}
}

@media (max-width: 1300px) {
  .flex-item-left {
  margin-left: 0px;
  margin-top: 0px;
  }
  .flex-item-right {
  margin-left: 0px;
  margin-top: -350px;
  }
.davis1 {
transform: scale(0.7);
transform-origin: top left;
margin: 20px 20px 0px 20px;
Padding: 0;
}
.image3 {
max-width: 750px;
width: auto; 
height: auto; 
padding: 20px;
}

}

/*Davis resize */

@media screen and (max-width: 700px) {
.flex-item-right, .flex-item-left {
flex: 100%;
}
  .flex-item-left {
  margin-left: 0px;
  margin-top: 0px;
  }
  .flex-item-right {
  margin-left: 0px;
  margin-top: -500px;
  }
.davis1 {
transform: scale(0.5);
transform-origin: top left;
margin: 10px 0px 0px 10px;
Padding: 0;
}
.image3 {
max-width: 750px;
width: auto; 
height: auto; 
}
}



/*General Styles ans tweaks */


body {
font-family: Rubik; 
background-color: #f9f7f7;
margin: 0;
}

html {
  scroll-behavior: smooth;
 }
 
 a {
  text-decoration: none;
  color: black;
 } 
 
 
 
.header {
  padding: 10px 16px;
  background: #555;
  color: #f1f1f1;
}

.content {
  padding: 16px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 102px;
}

 
 #chart0 chart1 chart2 chart3{
padding-bottom: 20px;
padding-top: 20px;
 } 

.alignleft {
display: inline;
float: left;
margin-right: 18px;
margin-top: 4px;
}

.wp-block-spacer {
clear: both;
}



/* Resize on devices */

@media screen and (max-width: 1000px) {
  .scale {
    transform: scale(0.9); 
	transform-origin: left bottom;
	  }
}

@media screen and (max-width: 800px) {
  .scale {
    transform: scale(0.8);
	transform-origin: left bottom;

  }
}

@media screen and (max-width: 600px) {
  .scale {
    transform: scale(0.7);
	transform-origin: left bottom;

  }
}


@media screen and (min-width: 1100px) {
  .scale2 {
    transform: scale(1.0);
	transform-origin: left top;

  }
}

/* Resize weatherlink on devices */


@media screen and (min-width: 1000px) {
  .weatherlink {
    transform: scale(0.9);
	transform-origin: left top;

  }
}


@media screen and (max-width: 1000px) {
  .weatherlink {
    transform: scale(0.75);
	transform-origin: left top;

  }
}

@media screen and (max-width: 700px) {
  .weatherlink {
    transform: scale(0.65);
	transform-origin: left top;

  }
}


@media screen and (max-width: 600px) {
  .weatherlink {
    transform: scale(0.5);
	transform-origin: left top;

  }
}

/* Resize dashboard on devices */


@media screen and (max-width: 1367px) {
  .dash {
    transform: scale(1.2);
	transform-origin: top;
	width: 1010px;
	height:800px;
	margin-left: 60px; 
  }
}

@media screen and (max-width: 1024px) {
  .dash {
    transform: scale(1.3);
	transform-origin: top;
	width: 800px;
	height:900px;
	margin-left: 40px; 


  }
}

@media screen and (max-width: 925px) {
  .dash {
    transform: scale(1.2);
	transform-origin: top;
	width: 710px;
	height:1330px;
	margin-left: 20px; 


  }
}

@media screen and (max-width: 799px) {
  .dash {
    transform: scale(1.2);
	transform-origin: top;
	width: 400px;
	height:1330px;
	margin-left: 15px; 

  }
}

@media screen and (min-width: 1337px) {
  .dash {
    transform: scale(1.2);
	transform-origin: top;
	width: 1001px;
	height:790px;
	margin-left: 130px; 

  }
  
/* Attempt to target ipad dashboard on devices */

  
//iPad 12.9"
@media screen and (min-width: 1366px) and (max-width: 1366px) { 
  .dash {
    transform: scale(1.2);
	transform-origin: top;
	width: 1010px;
	height:800px;
	margin-left: 80px; 
  }
}
  
/* Utils website tweaks */

}

  .utils {
    transform: scale(1.0);
	transform-origin: top;
	width: 99%;
	height: 99%;
	min-height:790px;
	margin-left: 5px; 

  }
}




/* Class for weatherlink summaries mainly resized above */

.weatherlink {
	margin: 0 0 0 0; 
    padding: 0 0 0 0;
	}


/* Picture backs */

.dashpic {
	background-image: url('images/raysy-crop-dashboard-yellow.jpg');
	/* max-width: 1400px;*/
	position: bottom;
}

.backpic1 {
	background-image: url('images/raysy-crop-hub.jpg');
	/* max-width: 1400px;*/
	position: bottom;
}

.backpic2 {
	background-image: url('images/raysy-crop-more-red.jpg');
	/* max-width: 1400px;*/
	position: bottom;
}

.backpic0 {
	max-width: 100%;
}


/* Style the tab */
.tab {
  overflow: hidden;
  border-top: 0px solid #bfb5b3;
  background-color: #f9f7f7;
  border-radius:7px 7px 0px 0px;
}

/* Style the buttons inside the tab */
.tab button {
  background-image: linear-gradient(to right, #e0dad9 , #d7d0ce);
  background-color: #d4cac8;
  border-radius:7px 7px 0px 0px;
  border-top: 1px solid #bfb5b3;
  border-left: 1px solid #bfb5b3;
  border-right: 1px solid #bfb5b3;
  float: left;
  border-bottom: none;
  outline: none;
  cursor: pointer;
  padding: 8px 8px;
  transition: 0.3s;
  font-size: 17px;
  color: #746e6c;

}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #d4cac8;
  border-radius:7px 7px 0px 0px;
  border-top: 1px solid #ece8e7;
  border-left: 1px solid #ece8e7;
  border-right: 1px solid #ece8e7;
}

/* Create an active/current tablink class */
.tab button.active {
  background-image: linear-gradient(to right, #ece8e7 , #ece8e7);
  background-color: #ece8e7;
  border-top: 1px solid #ece8e7;
  border-left: 1px solid #ece8e7;
  border-right: 1px solid #ece8e7;
  border-radius:7px 7px 0px 0px;
  
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border-bottom: 1px solid #d7d0ce;
  border-radius:0px 5px 5px 5px;
  border-top: none;
  /* color: #746e6c;*/
  font-weight: normal;
 height: 100%;
  /* box-shadow: 0px 5px 15px #d7d0ce; */

  
}


h3 { 
  display: block;
  font-size: 11pt;
  margin-top: 0.70em;
  margin-bottom: 0.80em;
  margin-left: 10px;
  margin-right: 0;
  font-weight: 300;
  font-style: normal;
}

toplinks { 
  font-size: 10pt;
  margin: 0;
  padding: 0;
 font-family: Rubik;
  font-weight: 300;
  font-style: italic;
  color: #746e6c;
}

html, body { 
  height: 99%; 
}

.full-height {
  height: 100%;
}

img {
  width: 100%;
  max-width: 1300px;
  object-fit: contain;
}

.report {
  padding: 25px;
  width: auro;
  max-width: 1300px;
  object-fit: contain;
  background-image: url('images/report-paper.jpg');
  box-shadow: 0px 5px 15px #00000055;
}

image2 {
  width: 100%;
  max-width: 1000px;
  object-fit: contain;
}