@font-face {
  font-family: 'FontAwesome';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("fonts/fa-solid-900.woff2") format("woff2"), url("fonts/fa-solid-900.woff") format("woff"), url("fonts/fa-solid-900.ttf") format("truetype"); }



.fa, .fabutton {font-family: 'FontAwesome';font-weight: 900; display: inline-block; font-size: inherit; font-weight:normal; text-rendering: auto;-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
.fabutton {font-size:16.5px; line-height:18px; position:absolute; bottom:20px; right:68px; color: #ffffff; border-radius: 70px; border: 2.5px solid #21a7e0; background-color:#21a7e0; padding: 9px 10px; cursor:pointer;-webkit-transition: all .25s ease; transition: all .25s ease;}
.fabutton.info{right:20px; padding: 9px 15px;}

html, body, div, span, object, iframe, a, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, footer, header, hgroup, menu, nav, section, menu,
time, mark, audio, video, button {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
  font-family:inherit;
}                  
article, aside, figure, footer, header, hgroup, nav, section {display:block;}
ul {list-style:none;}
table {border-collapse:collapse; border-spacing:0;}
input, select {vertical-align:middle;}
h1,h2,h3,h4,h5,h6 {font-family:'Roboto', arial; font-weight:700; font-style:normal;  text-rendering: optimizeLegibility; }
html {-webkit-text-size-adjust: 100%; overflow-y:scroll; overflow-x: hidden;}
a, button{text-decoration: none; -webkit-tap-highlight-color:  rgba(255, 255, 255, 0);}
a {color:#ffffff; -webkit-transition: color .25s ease; transition: color .25s ease;}
a:hover, a:active {outline: none; text-decoration: none; padding:0; margin:0; -webkit-transition: color .25s ease; transition: color .25s ease;}
#mgmenu > ul > li > a:before{display: inline-block; position: relative; padding-bottom: 2px; visibility: hidden;}
#mgmenu > ul > li > a:after {content: ''; display: block; margin: 5px auto 0 auto; height: 3px; width: 0px; background: transparent; transition: width .25s ease, background-color .25s ease; -webkit-transition: width .25s ease, background-color .25s ease; }

#bborder:hover > a:after,#bborder2:hover > a:after,#bborder3:hover > a:after {background: #21a7e0;}
img {box-shadow: #ffffff 0 0 0 0; -webkit-transition: all .25s ease; transition: all .25s ease; max-width: 100%;  height: auto !important;}
td, td img { vertical-align:top;} 
html{overflow-x:hidden; overflow-y:scroll; }
#homepage{padding:0 !important; font-family: 'Open Sans', arial; font-style:normal; font-weight:300; font-size:14px; width:100%; height:100%; color:#808080; -webkit-text-size-adjust: none; overflow:hidden;}
#loading{ width: 100%; height: 150%; position:fixed; top:0; left:0; right:0; overflow: hidden;  background-color: #3C3B3B; display:table; vertical-align:middle; z-index: 9000; }
.tagline.fade {opacity:0; -webkit-transition: opacity 1s ease; transition: opacity 1s ease; }


/* Basic Styles*/
sub,sup {font-size: 70%;line-height: 0; position: relative;}
sub{vertical-align: sub;}
sup{vertical-align: super;}
p {margin-top: 30px;}
.mgblue{color:#21a7e0;}
ol, .std-pages ul {padding:10px 30px 10px 30px;}
ol {counter-reset: item; }
ol li {display: block; margin:10px 0 5px 0}
ol > li {color:#21a7e0; font-weight:600;}
ol > li:before {content: counters(item, ".") ". "; counter-increment: item; font-weight:600; color:#21a7e0;}
.std-pages ul li {margin:7.5px 0;}
.std-pages ul li:before {content: "\f054"; font-family: "FontAwesome"; color: #21a7e0; font-size:20px; line-height:17px;  font-weight: 900; display: inline-block; position:relative; width:20px; vertical-align:middle; margin:0 0 3px -23px; padding-right:3px;}
iframe {width:100%;}
b,strong {font-weight:700; font-style:normal; }
h1, h2{font-size:43px; line-height:48px; color:#ffffff; text-align:center; width:80%; margin:0 10%;}
h2{color:#21a7e0;}
h2.contact {margin-bottom:40px;}
h3{font-size:22px; line-height:25px; color:#21a7e0; margin-bottom:10px;}
h4{font-size:22px; line-height:23px;  color:#808080; text-align:center; width:80%; margin:0px 10% 35px 10%; }
h5{font-size:19px; line-height:20px; color:#ffffff; margin:22px 0 15px 0;}
h6{font-size:18px; line-height:20px; color:#21a7e0; margin:10px 0 8px 0;}
h1:after {content: ''; display: block; margin: 30px auto 0 auto; height: 6px; width: 100px; background: #21a7e0;}
.std-pages input, #search-input, #wrapper_log input, textarea, select {font-family: 'Open Sans', arial; font-weight:300; width: 100%; position: relative; background:transparent; box-sizing:border-box;font-size: 18px;padding: 10px 10px 5px 5px; appearance: none; -webkit-appearance: none; display: block;color: #808080;border: none;border-radius: 0;border-bottom: 1px solid #808080;  margin-bottom:50px;}

/*Menu*/
#menus {position:fixed; top:0; width:100%; z-index:9900;}
#logo-white, #logo{z-index:9999; opacity:1; width:200px; position:absolute; top:12px; left: 25px; -webkit-transition: opacity .25s ease, left .25s ease; transition: opacity .25s ease, left .25s ease;}
#header.scroll #logo-white, .std #logo-white  {opacity:0;}
#logo{opacity:0;}
#header.scroll #logo, .std #logo {opacity:1;}
#header.scroll a,.std #menucontents > li > a {color:#5f636a;} 
#mgmenu {font-family:'Roboto', arial; font-weight:700; width:100%; -webkit-transition: opacity .25s ease; transition: opacity  .25s ease;}
#menucontents{width:100%; position:relative; top:27px;  float:left;}
#header{width:100%;  background-color:transparent; box-shadow:0px 0px 0px rgba(0,0,0,0);  position: relative;  float:left; height:73px; -webkit-transition: all .25s ease; transition: all .25s ease;}
#header.scroll, .std #header{background-color:rgba(255,255,255,0.90);box-shadow:0px 1px 3px rgba(0,0,0,0.2);}

/*Main Structures*/
.savebutton:focus, #submit-button:focus, button, #search-submit:focus, #search-submit2:focus, input:focus, input, textarea, textarea:focus, select, select:focus,  .link-button:focus {outline: none;}
#submit-button, #search-submit, #search-submit2, .link-button {font-family:'Roboto', arial; font-weight:700; border:0; background-color:#21a7e0; border: 2.5px solid #21a7e0; font-size:15px; position: relative; display: block; padding: 12px 24px; margin: 4px auto 4px auto; border-radius: 24px; min-width: 115px; vertical-align: middle; color: #ffffff;line-height: 20px;text-align: center; letter-spacing: 0.5px; cursor: pointer; -webkit-transition: all .25s ease; transition: all .25s ease;}
div.link-button, .picture .link-button{display:inline-block; left: 50%; webkit-transform: translateX(-50%); transform: translateX(-50%); clear:both;}
.crane h1:after, #yborder:hover > a:after, .crane #submit-button, .crane .link-button {background: #E0BC21;}
.prof h1:after, #rborder:hover > a:after, .prof #submit-button, .prof .link-button {background: #D84341;}
.peng h1:after, #gborder:hover > a:after, .peng #submit-button, .peng .link-button {background: #31c396;}
#submit-button{margin: 50px auto 30px auto; padding: 12px 35px;}
#submit-button:hover:enabled, .fabutton:hover, .link-button:hover, #search-submit:hover  {color: #21a7e0; background-color:transparent; }
.mpg-wrapper .link-button:hover {background-color:#ffffff;}
.crane h2, .crane h3, .crane h6, .crane #submit-button:hover:enabled, .mgyellow, .crane .std-pages ul li::before, .crane .link-button:hover, .crane ol > li, .crane ol > li:before {color:#E0BC21;}
.prof h2, .prof h3, .prof h6, .prof #submit-button:hover:enabled, .mgred, .prof .std-pages ul li::before, .prof .link-button:hover, .prof ol > li, .prof ol > li:before   {color:#D84341;}
.peng h2, .peng h3, .peng h6, .peng #submit-button:hover:enabled, .mggreen, .peng .std-pages ul li::before, .peng .link-button:hover, .peng ol > li, .peng ol > li:before  {color:#31c396;}
* ol > li > ol > li:before {content: counters(item, ".") " ";  counter-increment: item; width: 40px; margin-left:-40px; padding-right: 0px; font-weight:300; color:#808080;  display:inline-block; }
ol > li > ol > li > ol{counter-reset: list;}
ol > li > ol > li {padding-left:40px; color:#808080; font-weight:300;}
ol > li > ol > li > ol > li:before {content: counter(list, lower-alpha) ") "; counter-increment: list; width: 30px; margin-left:-30px;  display:inline-block; }
.crane ol > li > ol > li, .prof ol > li > ol > li, .peng ol > li > ol > li,.crane ol > li > ol > li:before, .prof ol > li > ol > li:before, .peng ol > li > ol > li:before {color:#808080;}


.std-wrapper, .btm-wrapper, .button-wrapper, #button-wrapper, #button-wrapper2 {width:100%; position:relative; float:left; z-index:105; background:#ffffff;}
.std-wrapper:nth-of-type(even) h1 {color:#808080;}
.std-wrapper:nth-of-type(odd){border-top: 8px solid #cccccc; background:#3C3B3B url("../graphics/gull-bg.svg")no-repeat 90% 30px; background-size: 650px 448px; color:#ffffff;}
.std-pages {width:80%; margin:50px auto 0 auto; overflow:hidden;  font-size:18px;  line-height: 24px;  max-width:1050px; text-align:justify;   text-justify: inter-word;}
.std-wrapper.minsize{min-height:700px;}
.pic-right{width:50%; padding:0 0 20px 30px; box-sizing: border-box; float:right;}
.pic-left{width:50%; padding:0 30px 20px 0; box-sizing: border-box; float:left;}
.wave-bg-btm, .wave-bg-btm-flip, .wave-bg-btm-g{text-align:center; width:100%; z-index:90; position:relative; float:left; line-height:0px; height:250px; background: url(../graphics/bottom-wave.png) 50% 0px transparent no-repeat;}
.wave-bg-btm.mapover{margin-top:-250px;}
.wave-bg-btm-flip{background-image: url(../graphics/bottom-wave-grey.png);}
.wave-bg-btm-g{background-image: url(../graphics/bottom-wave-grey2.png);}
.std-wrapper a,.btm-wrapper a {color:#808080;}
.std-wrapper:nth-of-type(odd) a {color:#ffffff; font-weight:600;}
.spacer{position: relative; width:100%; float:left; height:100px;}
.spacer2{position: relative; width:100%; float:left; height:20px;}
.sletters{font-size:70%;}

/*Home Page*/
.mpg-wrapper{background-position:center center; background-size:cover; display:block;position:relative; z-index:100; width: 100%; height: 100%; overflow:hidden; text-align:center; line-height:0; background-color:#ffffff;}
.mpg-wrapper > img {width:100%;}
.mpg-wrapper video {width:100%; height:100%;}
.mpg-wrapper:after {content: '';display: block;position: absolute;top: 0;right: auto;bottom: auto;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0);}
.mpg-wrapper.bgimage:after {background: rgba(0, 0, 0, 0.55); -webkit-transition: background .5s ease; transition: background  .5s ease;}
.mpg-wrapper.bgimage.scroll:after {background: rgba(0, 0, 0, 0);}
.txt-table{width:100%; position: absolute; top: 35%; left:0; right:0; text-align:center; z-index:120;  -webkit-transition: opacity .25s ease, margin-top .25s ease; transition: opacity .25s ease, margin-top .25s ease;}
.tagline{width:80%; max-width:750px;  margin-right:auto; margin-left:auto;  text-align:center;}
.container, .container2{position: relative; float: left; width:21%; margin:30px 2% 0px 2%;  text-align:center;} 
.container2 {width:23%; margin:30px 5% 0px 5%;}
.image-circle {line-height: 0; padding: 10px; width:100%; -webkit-transition:all 0.25s cubic-bezier(0.2, 1, 0.3, 1.5);  transition:all 0.25s cubic-bezier(0.2, 1, 0.3, 1.5); border:4px solid #ffffff; border-radius: 50%; box-sizing:border-box; cursor:pointer;}
.image-circle:hover{transform: scale(1.1); -webkit-transform: scale(1.1);}
.image-circle.green:hover {border:5px solid #31c396;}
.image-circle.blue:hover {border:5px solid #21a7e0;}
.image-circle.yellow:hover {border:5px solid #E0BC21;}
.image-circle.red:hover {border:5px solid #D84341;}
.arrow{display:block;width: 100%;min-height:62px;text-align:center; position:absolute; bottom:14%; z-index:5000; animation: bounce 5s infinite; -webkit-animation: bounce 5s infinite;  -webkit-transition: opacity .25s ease, margin-top .25s ease; transition: opacity .25s ease, margin-top .25s ease;}
.arrow img{position:relative; width:60px;  cursor:pointer;}
.mpg-wrapper.scroll .arrow, .mpg-wrapper.scroll .txt-table {opacity:0; margin-top:-50px;}
@-webkit-keyframes bounce {	0%, 5%, 20%, 45%, 100% {-webkit-transform: translateY(0);}	5%{-webkit-transform: translateY(-5px);} 8%{-webkit-transform: translateY(2px);} 11%{transform: translateY(-8px);} 16%{transform: translateY(0px);}}
@keyframes bounce {	0%, 5%, 20%, 45%, 100% {transform: translateY(0);} 5%{transform: translateY(-5px);} 8%{transform: translateY(2px);} 11%{transform: translateY(-8px);} 16%{transform: translateY(0px);} }
.half-wrapper, .half-wrapper2, .three-wrapper {width:100%; position:relative; float:left; clear:both; display: flex; align-items: stretch; flex-wrap: wrap; height: auto; }
.half-wrapper {margin-bottom:25px;}
.half-wrapper > div {width:47.5%; position:relative; float:left;}
.half-wrapper2 > div {width:40%; position:relative; float:left; margin:0 5% 70px 5%; font-size:16px;  line-height: 22px;}
.half-wrapper > div:nth-of-type(odd){margin-right:2.5%;}
.half-wrapper > div:nth-of-type(even){margin-left:2.5%;}
.three-wrapper > div:nth-of-type(odd){width:30%; position:relative; float:left;}
.three-wrapper > div:nth-of-type(even){width:30%; position:relative; float:left; margin:0 5%;}
.three-wrapper img{margin:30px 0 15px 0;}
.half-wrapper2  img {margin-bottom:10px;}

/*Division Page*/
.division-wrapper {display:table; width:90%; max-width:1000px; color:#ffffff;  margin:0 auto; position:relative; height:85px;}
.division-wrapper div{display:table-cell;   vertical-align:middle; box-sizing: border-box;  position:relative; width:50%; }
.division-name{font-family:'Roboto', arial; font-weight:900; text-align: right; padding-right:30px; border-right: 6px solid #21a7e0; font-size:75px; line-height:75px;}
.division-txt{font-weight:400; position:relative; text-align: left; padding-left:30px;  height:85px; font-size:21px; line-height:28px;}
.peng .division-name {font-size:65px; line-height:66px;}
table {border-collapse: separate; border-spacing: 0; margin-bottom: 50px; width: 100%; text-align:left;}
tbody {display: table-row-group;}
tr {display: table-row;}
td {display: table-cell; padding:5px;}
table tbody tr:first-child td {background-color: #EBEBEB; font-weight: 600;}
.fleet {width:100%; position:relative; float:left; border-bottom: dotted 1px #91C9E1;}
.fleet-spec, .fleet-spec2{width:70%; position:relative; float:left; padding:8px 0 3px 3px; box-sizing: border-box; }
.fleet-figure, .fleet-figure2{width:30%; position:relative; float:right; text-align:right; padding:8px 5px 3px 0; box-sizing: border-box;}
.fleet-spec2, .fleet-figure2{width:50%;}
.vessel-specs {width:100%; position:relative; float:left; box-sizing: border-box; padding:8px 15px 15px 15px; background-color:#3C3B3B; min-height:190px;}
.filler {background-color:#3C3B3B; height:90px; position: absolute; bottom: 0;left: 0; width:100%;}

/*Scroll Animations*/
.animitem{opacity: 0; top:90px; -webkit-transition: top 700ms ease, opacity 700ms ease; transition: top 700ms ease, opacity 700ms ease;}
.animitem.pic-half,.animitem.pic-half2{width:30%; margin:0; position:relative; float:left;}
.animitem.pic-half3,.animitem.pic-half4{width:45%; margin:0; position:relative; float:left;}
.animitem.pic-half2,.animitem.pic-half4{float:right;}
.animitem.container.in-view,.animitem.container2.in-view, .animitem.pic-half.in-view, .animitem.pic-half2.in-view, .animitem.pic-half3.in-view, .animitem.pic-half4.in-view{opacity: 1;-moz-transform: translate3d(0px, 0px, 0px); top:0px;}
.text-half,.text-half2{width:65%; margin-left: 5%; position:relative; float:left;}
.text-half3,.text-half4{width:50%; margin-left: 5%; position:relative; float:left;}
.text-half2,.text-half4{margin-left: 0%; margin-right: 5%;}

/*Bottom Menu*/
#bottom, #bottom2{width: 88%; padding: 0 6% 20px 6%; color:#ffffff; position: relative; float: left; background-color:#21a7e0; font-weight:400; z-index:105;}
.yards #bottom, .yards #bottom2,.crane #bottom, .crane #bottom2,.prof #bottom, .prof #bottom2,.peng #bottom, .peng #bottom2   {background-color:#3C3B3B;}
#btmleft, #btmright {width:50%; margin-top:-50px;  position: relative; float: left; z-index:99;}
#btmleft{width:45%; margin-right: 5%; font-family:'Roboto', arial; font-weight:700; }
#bottom2{width: 96%; padding: 0 2%;  background-color:#21a7e0;}
#btmcert {width:15%; position: relative; float: right; text-align:right;}
#btmcopy{width: 85%; position: relative; font-size:10px; line-height:12px; margin-top:14px; float: left; color:#ffffff; }
#bottom ul {width:50%; position:relative; float:left;}
#bottom ul li {margin-bottom:18px;font-weight:600;}
.ctable {display:table; height:35px;}
.cell{line-height:12px; display:table-cell;  vertical-align:middle; line-height:0;  }
hr {border:0; border-top: dotted 2px; width:100%; border-color:#91C9E1; margin:10px 0;  position:relative; float:left;}
.socials div {position: relative; float: right; max-width:35px;}
.socials {position: relative; float: right; width:100%; }
.socials a:hover img{opacity:0.7;}
#bottom a:hover, #bottom2 a:hover, .std-wrapper a:hover, .btm-wrapper a:hover{color:#AFDAEC;}
.crane #bottom a:hover, .crane #bottom2 a:hover, .crane .std-wrapper a:hover{color:#E4C74C;}
.prof #bottom a:hover, .prof #bottom2 a:hover, .prof .std-wrapper a:hover{color:#DD6664;}
.peng #bottom a:hover, .peng #bottom2 a:hover, .peng .std-wrapper a:hover{color:#69D8B6;}

/*Contact Form*/
select{background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23CCCCCC'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat; background-position: calc(100% - 5px) calc(50% + 2px);background-size: 15px;}
label{font-size:18px; font-family:'Roboto', arial; width: 100%; position: relative; float:left; color: #5f636a;}
label sup, #errormsg{color:#F8336F; font-weight:400;}
#errormsg{width:100%; text-align:center;}
#enquiry{min-height:350px; }
#enquiry p {text-align:center;}
.contact-half {position:relative; float:left; width:47%;}
.contact-half:nth-of-type(1){margin-right:3%;}
.contact-half:nth-of-type(2){margin-left:3%;}
textarea{height:80px; overflow-y:auto;}
input:focus, textarea:focus, select:focus{border-bottom: 1px solid #21a7e0; }
.crane .division-name, .crane #submit-button, .crane .link-button, .crane input:focus, .crane textarea:focus, .crane select:focus, .crane hr, .crane .fleet{border-color:#E0BC21;}
.prof .division-name, .prof #submit-button, .prof .link-button, .prof input:focus, .prof textarea:focus, .prof select:focus, .prof hr {border-color:#D84341;}
.peng .division-name, .peng #submit-button, .peng .link-button, .peng input:focus, .peng textarea:focus, .peng select:focus, .peng hr {border-color:#31c396;}

/*Search*/
#search-input {border:0; position: absolute; top:13px; right:220px; width:70%;}
#search-submit{position: absolute; top:7px; right:75px;}
#search-input2{padding: 10px 10px 10px 10px;position: relative; border:0; width:92%;  float:left; background-color:#ffffff; }
#search-submit2{min-width:30px; padding: 10px 12px; position: relative;  float:right; margin:0;}
.result-item{position: relative; width:100%; float:left; margin-top:40px; color:#D4D0CB;}
.result-item div {position: relative; width:100%; float:left; margin-top:10px;}
.result-item h5{font-size:22px; margin-bottom:5px;}
.result-item a:hover{color:#AFDAEC;}
.result-item strong {color:#ffffff;}

/*Photo Gallery & Vessel Portfolio*/
.loading-image, .end-record-info {height:50px; padding-top:30px; width:100% !important; color:#21a7e0; background-color:#ffffff !important;  position: relative; text-align:center; margin:0 auto; display:block;}
.loading-image:after {animation: rotation 2s infinite linear; content: "\f021"; font-family: "FontAwesome"; font-weight: 900; color: #21a7e0; font-size:40px; line-height:40px; width:100%; position: relative;  display: inline-block;}
#results{padding:0px;}
@keyframes rotation {from {transform: rotate(0deg);} to {transform: rotate(359deg);}}
@-webkit-keyframes rotation {from {-webkittransform: rotate(0deg);} to {-webkittransform: rotate(359deg);}}
.photo-wrapper {position:relative; width:70%; margin:20px auto; text-align:center;}
.photo-wrapper img {margin-bottom:30px;}
#phototiles div {cursor:pointer;}

/*google map*/
#map_wrapper {position: relative; margin-top:50px;}
#map_canvas {background-color:#ffffff !important; height: 600px; overflow: hidden; position: relative;}
.info_content {padding: 5px; overflow:hidden; min-width:190px;font-size:16px;  line-height: 18px; }
.popup{width:100%;  margin:5px 0 10px 0;}
a[href^="http://maps.google.com/maps"]{display:none !important}
a[href^="https://maps.google.com/maps"]{display:none !important}
.gmnoprint a, .gmnoprint span, .gm-style-cc {display:none;}
.gmnoprint div {background:none !important;}
.gm-style-iw div * {line-height: 1.35em;}
.info_content {margin: 25px 25px 10px 10px; overflow:hidden;}
.gm-style-iw-chr {width:24px; height:24px; position: absolute; right: 20px; top: -5px;}

/*Media Query*/
@media screen and (min-width: 1920px) {
.wave-bg-btm, .wave-bg-btm-flip, .wave-bg-btm-g {background-size: 100% 250px; -webkit-background-size: 100% 250px;}
}

@media screen and (min-width: 1250px) {
#mgmenu  {top:57px;}
#mgmenu li > ul > li {opacity:0;}
}

@media screen and (max-width: 1750px) {
#search-input{width:60%;}
}

@media screen and (max-width: 1250px) {
#header.scroll a, #header a, .std #menucontents > li > a  {color:#ffffff;} 
#menucontents {top:0px;}
#search-input{width:50%;}
.division-name{font-size:60px; line-height:60px;}
.peng .division-name {font-size:55px; line-height:56px;}
.std .mpg-wrapper{margin-top:73px;}
}

@media screen and (max-aspect-ratio: 16/9) and (max-width: 1000px) { 
.mpg-wrapper {width: 150%; left: -25%;}
.tagline{width:55%;}
.division-wrapper{width:60%;} 
} 

@media screen and (max-width: 1100px) {
.container2 {width:29%; margin:30px 2% 0px 2%;}
}

@media screen and (max-width: 1000px) {
#logo.search-opened, #logo-white.search-opened {opacity:0; left: -200px;}
#search-input{width:60%; right:0; left:20px;}
.animitem.pic-half3,.animitem.pic-half4{width:50%;}
.text-half3,.text-half4{width:45%;}
.container{width:35%; margin:30px 7.5% 0px 7.5%;}
.half-wrapper {display:block;}
.half-wrapper > div:nth-of-type(odd), .half-wrapper > div:nth-of-type(even){width:100%; margin:15px 0 0 0;}
.half-wrapper > div:nth-of-type(1){margin-top:0px;}
.half-wrapper2 > div:nth-of-type(odd){width:47.5%; margin:0 2.5% 50px 0;}
.half-wrapper2 > div:nth-of-type(even){width:47.5%; margin:0 0 50px 2.5%;}
#map_canvas {height:500px;}
}

@media screen and (max-width: 850px) {
.news, .news2 {width:100%; margin:0;}
.news2{padding-top:10px;}
.pic-right, .pic-left {width:100%; padding:0 0 20px 0;}
.animitem.pic-half3,.animitem.pic-half4{width:55%;}
.text-half3,.text-half4{width:40%;}
#btmleft,#btmright{width:100%; margin:20px 0 0 0; overflow:hidden;}
.three-wrapper > div:nth-of-type(odd){width:48%; margin:0 2% 0 0;}
.three-wrapper > div:nth-of-type(even){width:48%; margin:0 0 0 2%;}
.wave-bg-btm, .wave-bg-btm-flip, .wave-bg-btm-g {background-size: 960px auto; -webkit-background-size: 960px auto; height:125px;}
.wave-bg-btm.mapover {margin-top:-125px;}
.division-wrapper{max-width:350px;}
.division-wrapper div{display:block; width:100%;  float:left; }
.division-name{text-align: center; padding-right:0px; border-right: 0px;  font-size:55px; line-height:55px; }
.peng .division-name {font-size:48px; line-height:49px;}
.division-txt{text-align: center; padding-left:0px; font-size:18px; line-height:22px;}
.division-txt:before {content: ''; display: block; margin: 15px auto; height: 6px; width: 100px; background: #21a7e0; }
.crane .division-txt:before {background: #E0BC21;}
.prof .division-txt:before {background: #D84341;}
.peng .division-txt:before {background:  #31c396;}

h1,h2{font-size:35px; line-height:40px; width:95%; margin:0px 2.5%;}
h2.contact {margin-bottom:40px;}
h1:after {margin: 20px auto 0 auto;}
h2{font-size:45px; line-height:47px;}
.container2{width:35%; margin:30px 7.5% 0px 7.5%;}
}

@media screen and (max-width: 800px){
.savebutton, .load-button {width:70%; margin: 0px 15% 30px 15%;}
.container, .container2{width:40%; margin:30px 5% 0px 5%;}
ol {padding:10px;}
}

@media screen and (max-width: 700px) {
.animitem.pic-half,.animitem.pic-half2{width:50%; margin:0 25% 10px 25%;}
.text-half,.text-half2{width:100%; margin:10px 0%;}
.wave-bg-btm img {width:95%; margin:0 auto;}
.contact-half:nth-of-type(1), .contact-half:nth-of-type(2){margin:0;width:100%;}
#map_canvas {height:350px;}
.subt{padding:15px 0 5px 0;}
.filler {display:none;}
.vessel-specs{min-height:50px;}
.half-wrapper2 {display:block; align-items: self-start; }
.half-wrapper2 > div:nth-of-type(odd), .half-wrapper2 > div:nth-of-type(even){width:80%; margin:0 10% 70px 10%;}
}

@media screen and (max-width: 600px) {
.animitem.pic-half3, .animitem.pic-half4{width:90%; margin:0 5% 10px 5%;}
.text-half3,.text-half4{width:100%; margin:0px 0%;}
#search-input{width:70%;}
.search-w{display:none;}
#search-submit{min-width:30px; padding: 10px 12px; top:7px; right:60px;}
.contact{width:100%; margin:0%;}
#bottom {width: 88%; padding: 0 6% 20px 6%;}
.container, .container2{width:60%; margin:30px 20% 0px 20%;}
.arrow{display:none;}
.std-wrapper:nth-of-type(odd){background-size: 500px 345px; -webkit-background-size:500px 345px; background-position: 40% 150px;}
.std-pages {width:85%; margin:40px auto 0 auto;}
}

@media screen and (max-width: 500px) {
.savebutton, .load-button {width:100%; margin: 0px 0% 60px 0%;}
.division-name{font-size:45px; line-height:45px;} 
.division-wrapper{max-width:280px;}
.division-txt, .std-pages{font-size:16.5px; line-height:22px;} 
.three-wrapper > div:nth-of-type(odd), .three-wrapper > div:nth-of-type(even){width:100%; margin:0 0 20px 0;}
.std .mpg-wrapper{margin-bottom:0px;}
h1, h2{font-size:28px; line-height:30px;}
}

@media screen and (max-width: 450px) {
.subt{display:none;}
.mpg-wrapper {width: 250%; left: -75%;}
#search-input{width:60%;}
.tagline{width:36%;}
.division-name{font-size:40px; line-height:40px;}
.peng .division-name {font-size:35px; line-height:36px;}
.wave-bg-btm, .wave-bg-btm-flip, .wave-bg-btm-g {background-size: 480px 62px; -webkit-background-size: 480px 62px; height:62px;}
.wave-bg-btm.mapover {margin-top:-62px;}
.half-wrapper2 > div:nth-of-type(odd), .half-wrapper2 > div:nth-of-type(even){width:100%; margin:0 0 50px 0;}
}


@media screen and (max-width: 360px) {
#search-input{width:55%;}
#logo-white, #logo{width:155px;  top:17px;}
.container, .container2{width:70%; margin:30px 15% 0px 15%;}
}