@media screen and (min-width: 1450px) {
.subp{margin-left:15%; margin-right:15%; width:70%;}
.subptitle {padding-left:15%; padding-right:15%; width:70%;}

}


@media screen and (max-width: 1650px) {
#four h3 {font-size:25px; line-height:22px; margin-bottom:7px;}
.datasheets {width:23%;}
}


@media screen and (max-width: 1450px) {
#four h3 {font-size:25px; line-height:22px; margin-bottom:7px;}
#logo {width:18%; margin-left:2%;}
.scene > *:nth-child(1) img {width:120%; margin-left:-10%;}
.dropDownMenu > li:nth-child(1) > ul {width: 150%;}
}


@media screen and (max-width: 1250px) {
#four h3 {font-size:20px;}
.cs-style-4 figcaption a {bottom: 12px;	right: 12px;}
.paragraph2, .paragraph3 {width:100%; float:left; text-align:left; position:relative; margin-right:0%; margin-left:0%; margin-bottom: 20px;}
.nav {width:77%; padding-left:3%;}
#btmleft ul.bigger {width: 45%; margin-right: 5%;}
#btmleft ul.bigger2 {width: 50%; margin-left:0%;}
  .scene > *:nth-child(1) img {width:130%; margin-left:-15%;}
.datasheets {width:31%;}
  }


@media screen and (max-width: 950px) {
#logo {width:24%; margin-left:1%;}
#reactive {width:139px; margin-left:8px;}
#menu {height:70px;}
#map_wrapper{margin-top:80px;}
.nav, .nav2{display:none; }
.logoutbtn{font-size:18px;}
#mob_menu, #bottom_bar, #tagline_smaller {display:block;}
.portfolio{width: 50%;}
#four ul li{width: 49.5%;}
.dropDownMenu > li  > ul > li {display: none;}
.dropDownMenu > li  > ul  {width:0%;}
.address {width:48%;}
.expandingArea textarea, .expandingArea pre, h5 {font-size: 32px; line-height: 32px;}
#four h3 {font-size:28px; line-height:25px; margin-bottom:7px;}
.cs-style-4 figcaption a {bottom: 20px;	right: 20px;}
#dashboard {width:90%;}
.green-button {width:60%;}
#map_canvas {padding-bottom:60%;}
}

@media screen and (max-width: 700px) {

#map_wrapper {margin-top:0;}

#home {margin-top:70px;}
h2 > a{font-size: 13px; }
#btmleft, #btmright {width:92%; margin-right: 4%; margin-left:4%; }
.address {width:98%; min-height: 50px; margin-bottom: 20px; }
.subleft, .subright {width:100%;}
.paragraph {width:90%; float:left; text-align:left; position:relative; margin-right:0%; margin-left:0%; margin-bottom: 20px;}
.news, .news2 {width:100%; margin:0;}
#four h3 {font-size:20px;}
.cs-style-4 figcaption a {bottom: 12px;	right: 12px;}
#gtwitter{display:none;}
#glinkedin{display:none;}
#btmleft ul.bigger, #btmleft ul.bigger2  {width: 100%;} 

.buttonposition {width:50%;}
.scene  img {width:150%;}
.scene > *:nth-child(1) img {width:200%; margin-left:-50%;}

.scene > *:nth-child(2) img {width:250px;height:auto;}
h6{font-size: 17px; margin-top:5px;}
.datasheets {width:48%;}
}

@media screen and (max-width: 600px) {

#popup ul.bigger li, #popup ul.bigger2 li{margin-bottom:15px; margin-top:10px;}
#popup ul.smaller {margin-bottom:5px;}
#popup ul.bigger2, #popup ul.bigger  {width: 95%;margin-left:5%;}
#popup {padding-top:15px;  height:550px;}
#menu-about{margin-top:0px;}
.load-button {width:100%;}
.green-button {width:80%;}
.moblank {display:none;}
h6{font-size: 16px;}
.postadd{display:none;}
#map_canvas {padding-bottom:80%;}
h3 {font-size: 35px;}
#page_title, h1 {font-size:35px; line-height: 50px; }
}

@media screen and (max-width: 470px) {
.portfolio {width: 100%;}
#four ul li {width: 100%; margin:1% 0;}
#page_title, h1 {font-size:26px; line-height: 40px; }
#four h3 {font-size:25px;}

.cs-style-4 figcaption a {bottom: 20px;	right: 20px;}
.expandingArea textarea, .expandingArea pre, h5 {font-size: 25px; line-height: 28px;}
.expandingArea2 textarea, .expandingArea2 pre, #cname{font-size: 19px;}
.socials3{margin-right:28%;}
h6{font-size: 14px;}
h3 {font-size: 26px;}
.info_content {font-size:11.5px; margin-bottom:5px;}
#map_canvas {padding-bottom:85%;}
.datasheets {width:98%;}
}


@media screen and (max-width: 350px) {
#mob_menu ul {width:44%;}
#four h3 {font-size:18px;}
#map_canvas {padding-bottom:100%;}
h6{font-size: 13px;}
.info_content {font-size:11px;}
#map_canvas {padding-bottom:90%;}
}



.react_embeded{
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;
	height:0;
	overflow:hidden;
}

.react_embeded iframe, .react_embeded object, .react_embeded embed{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}



    .expandingArea textarea, 
    .expandingArea pre,.expandingArea2 textarea, 
    .expandingArea2 pre{
      margin: 0;
      padding: 0;
      outline: 0;
      border: 0;
    }

    /* The containing element has the expandingArea
       class, define any border or inset box-shadow
       etc. here that you want to style your textarea.
       I've just added a simple 1px solid mid-grey
       border. You can also set a min-height property
       here if you want and it works as expected.
     */
       .expandingArea, .expandingArea2 {
      position: relative;
      background: #fff;
    }
    /* Any padding should go in here; it needs to be
       the same for both the pre and the textarea. You
       also need to make sure both have exactly the
       same font and line height properties, although
       the exact values can of course be anything you
       want.
     */
    .expandingArea textarea,
    .expandingArea pre {
      padding: 0px;color: #3fae2a; 
      background: transparent;
      font:300 37px Open sans, Source Sans pro, myriad pro, myriad, calibri; 
	  font-style:light; line-height: 39px;
      /* Make the text soft-wrap */
      white-space: pre-wrap;
      word-wrap: break-word;
	  margin-bottom:20px;
    }
	
	.expandingArea2 textarea,
    .expandingArea2 pre {
      padding: 0px;color: #3fae2a; 
      background: transparent;
      font:300 22px Open sans, Source Sans pro, myriad pro, myriad, calibri; 
	  font-style:light;
      /* Make the text soft-wrap */
      white-space: pre-wrap;
      word-wrap: break-word;
    }
	
	

   .expandingArea textarea,  .expandingArea2 textarea  {
      /* The border-box box model is used to allow
         padding whilst still keeping the overall width
         at exactly that of the containing element.
       */
      -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
          -ms-box-sizing: border-box;
              box-sizing: border-box;
      /* This height is used when JS is disabled */
      height: 100px;
      width: 100%;
    }

    .expandingArea.active textarea, .expandingArea2.active textarea {
      /* Hide any scrollbars */
      overflow: hidden;
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      /* Remove WebKit user-resize widget */
      resize: none;
    }

    .expandingArea pre, .expandingArea2 pre,  {
      display: none;
    }
    .expandingArea.active pre, .expandingArea2.active pre {
      display: block;
      /* We don't actually want to see this text, it's just for sizing */
      visibility: hidden;
    }