/*
Theme Name: Proyacht
Theme URI: https://wordpress.org/themes/twentysixteen/
Template: twentysixteen
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Sixteen is a modernized take on an ever-popular WordPress layout — the horizontal masthead with an optional right sidebar that works perfectly for blogs and websites. It has custom color options with beautiful default color schemes, a harmonious fluid grid using a mobile-first approach, and impeccable polish in every detail. Twenty Sixteen will make your WordPress look beautiful everywhere.
Tags: one-column,two-columns,right-sidebar,accessibility-ready,custom-background,custom-colors,custom-header,custom-menu,editor-style,featured-images,flexible-header,microformats,post-formats,rtl-language-support,sticky-post,threaded-comments,translation-ready,blog
Version: 2.0.1561451871
Updated: 2019-06-25 08:37:51

*/

body{ background:#fff; font:normal 14px/20px Arial, Helvetica, sans-serif; color:#102346;}
#wpadminbar ul:after{ clear:inherit;}
a{ color:#7ac142;}
a:focus, button:focus, input:focus, textarea:focus { outline: none;}
ul li{ list-style-type:none;}


.header-top{/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#c4c4ce+0,e5e7f0+24,bdbdca+50,e0e0e0+82,c4c4ce+100 */
background: #c4c4ce; /* Old browsers */
background: -moz-linear-gradient(top,  #c4c4ce 0%, #e5e7f0 24%, #bdbdca 50%, #e0e0e0 82%, #c4c4ce 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #c4c4ce 0%,#e5e7f0 24%,#bdbdca 50%,#e0e0e0 82%,#c4c4ce 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #c4c4ce 0%,#e5e7f0 24%,#bdbdca 50%,#e0e0e0 82%,#c4c4ce 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c4c4ce', endColorstr='#c4c4ce',GradientType=0 ); /* IE6-9 */
 padding:18px 0;}
.header-left{ float:left;}
.header-right{ float:right;}
.logo{ float:left;}
.contact-info{ float:left; margin-left:30px;}
header h2{ font:700 23px/25px 'Open Sans', sans-serif; padding:10px 0 0;}
header p{ font:400 16px/20px 'Open Sans', sans-serif; padding:10px 0 0;}
.header-br{ background:url(images/header-br.png) no-repeat 0 100%; padding:0 0 10px !important;}
header p a{ color:#102346;}

#navbtn{ display:none;}
.nav-menu{}
.nav-menu li{ position:relative; float:left; }
.nav-menu li:before{ background:url(images/nav-icon.png) no-repeat 0 50%; position:absolute; content:""; left:-7px; top:50%; transform:translateY(-50%); width:13px; height:13px;}
.nav-menu li:first-child:before{ display:none;}
/*.nav-menu li img{ position:absolute; width:13px; height:13px; left:-5px; top:19px;}*/
.nav-menu li .menuarrow{ display:none;}
.nav-menu li > a{ font:700 14px/50px 'Open Sans', sans-serif; color:#102346;  white-space:nowrap; display:block; padding:0 13px; text-transform:uppercase;}
.nav-menu li+li > a{ font:700 14px/50px 'Open Sans', sans-serif; color:#102346;  white-space:nowrap; display:block; padding:0 13px; text-transform:uppercase;}

.nav-menu li:hover > a, .nav-menu li.active > a,.nav-menu li.current_page_item > a, .nav-menu li > a:focus, .nav-menu li.current-menu-item > a{ color:#02aef0;}
.nav-menu .sub-menu{ position:absolute; left:0; top:100%; background:#0089cf; min-width:220px; box-shadow:0 0 5px #02496d; transition: all 300ms ease-out 0s; display:none; z-index:999;}
.nav-menu .sub-menu .sub-menu{ left:100%; top:0;}
.nav-menu li:hover > .sub-menu{ display:block;}
.nav-menu .sub-menu li{ float:none;}
.nav-menu .sub-menu a{ font:normal 14px/40px Arial, Helvetica, sans-serif; padding:0 10px; white-space:nowrap;}
.nav-menu .sub-menu li+li{ border-top:1px solid #035e8d;}


#navigation{ float:left; padding:15px 0;}


#banner{ position:relative; margin:0 auto; text-align:center;}
.banner-text{ position:absolute; top:45%; left:50%; width:1200px; transform:translate(-50%, -50%); color:#fff;}
.banner-text > div{ width:565px; text-align:left;}
.banner-text h2{ font:400 68px/68px 'Open Sans', sans-serif; padding:15px 0 0;}
.banner-text h1{ font:400 90px/90px 'Harabara'; letter-spacing:4px; padding:15px 0 0;}
.banner-text h3{ font:400 29px/32px 'Open Sans', sans-serif; padding:15px 0 0;}
.services-btn{ border:solid 2px #f9ed11; border-radius:8px; display:inline-block; padding:10px; transform:skew(-30deg); margin:20px 0 0;}
.services-btn a{ transform:skew(30deg); display:inline-block; font:400 25px/32px 'Open Sans', sans-serif; padding:0 40px; text-transform:uppercase; color:#fff;}
.yellow-text{ color:#f9ed11;}



#content{}
.ourcompany{ margin:-60px 0 0; position:relative; background:#fff; box-shadow:3px 3px 15px #ccc;}
.ourcompany-img{ width:50%; float:left; position:relative;}
.ourcompany-img div{ position:absolute; left:6%; top:6%; width:88%; height:87%; background:rgba(147, 223, 251, 0.3);}
.ourcompany-text{ width:50%; float:left; padding:50px 90px 0; text-align:center;}
.ourcompany-text ul{ margin:0 auto; text-align:center; display:table;}
.ourcompany-text ul li{ float:left; margin:20px 10px;}
#content h1{ font:700 50px/55px 'Open Sans', sans-serif; padding:15px 0 0;}
#content h4{ font:700 22px/25px 'Open Sans', sans-serif; padding:15px 0 0;}
#content p{ font:400 16px/22px 'Open Sans', sans-serif; padding:15px 0 0;}
.readmore{ border:solid 2px #102346; border-radius:8px; display:inline-block; transform:skew(-30deg); margin:20px 0 0; font:400 20px/48px 'Open Sans', sans-serif; padding:0 32px; text-transform:uppercase; color:#44beeb;}
.readmore span{ transform:skew(30deg); display:block;}
.moretext{ border:solid 1px #102346; border-radius:5px; margin:5px 0 0 5px; transform:skew(-30deg); font:400 15px/30px 'Open Sans', sans-serif; padding:0 12px; display:inline-block; color:#44beeb;}
.moretext span{ transform:skew(30deg); display:block;}


.services{ background:url(images/services-bg.jpg) no-repeat 0 0; background-size:cover; padding:55px 0 70px; color:#fff; margin-top:105px;}
.services-box img{ width:100%;}
.services-box{ position:relative; margin:15px 0;}
.services-box div{ position:absolute; bottom:0; color:#fff; left:0; width:100%; font:700 21px/28px 'Open Sans', sans-serif; padding:10px 0; background:rgba(68, 190, 235, 0.8); text-align:center;}
.antifouling-img{ position:relative}
.antifouling-img:before{ content:""; position:absolute; left:-25px; top:-25px; background:url(images/img-icon1.png) no-repeat 0 0; width:47px; height:47px;}
.antifouling-img:after{ content:""; position:absolute; right:-25px; bottom:-25px; background:url(images/img-icon2.png) no-repeat 100% 100%; width:47px; height:47px;}
.antifouling-img img{ width:100%; border:solid 5px #f9ed11;}
.antifouling{ padding:105px 0 0;}


.contact{ margin:110px 0 0; position:relative; background:#fff; box-shadow:0 0 15px #ccc;}
.map-home{ width:50%; float:left;}
.map-home iframe{ min-height:550px;}
.getintouch{ width:50%; float:left; padding:40px;}
.contact h1{ font:700 50px/55px 'Open Sans', sans-serif; padding:15px 0 0;}
.getintouch input[type="text"], .getintouch input[type="email"], .getintouch input[type="tel"]{ margin:0; border-radius:0; border:solid 1px #c1c1c1;}
.getintouch label{ color:#102346; font:400 16px/20px 'Open Sans', sans-serif; margin:20px 0 8px;}
.getintouch textarea{ border:solid 1px #c1c1c1; height:90px; border-radius:0; margin:0;}
.getintouch input[type="button"], .getintouch input[type="submit"]{ background:#df4c41; border-radius:0; border:none; color:#fff; font:400 20px/44px 'Open Sans', sans-serif; text-transform:uppercase; padding:0 40px;}

footer{ background:url(images/ft_bg.jpg) no-repeat 0 0; background-size:cover; padding:320px 0 0; margin:-300px 0 0; color:#fff;}
footer h2{ font:400 20px/30px 'Harabara'; letter-spacing:2px;}
footer p{ font:400 13px/20px 'Open Sans', sans-serif;}

footer ul li{ font:400 11px/20px 'Open Sans', sans-serif; float:left;}
footer ul li a{ color:#fff;}
footer ul li+li{ margin-left:8px;}
.ft-bottom{ padding:30px 0;}
.ft-bottom div{ float:left;}
.ft-bottom div+div{ float:right; text-align:right;}

.ft-bottom{ border-top:solid 1px #02aeed;}


.services-section { display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap; padding:60px 0 0; margin:0 auto;}
.services-section .services-all {display: -ms-flexbox;display: flex;transition: .3s ease-in-out; width:100%; padding:32px 0;}
.services-section .services-all .services-text{width: 50%; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack:center; justify-content: center; padding-right:45px; transition: .3s ease-in-out;}
.services-all .services-img {width: 50%;}

.services-section .services-all:nth-child(even){ flex-direction: row-reverse;}
.services-section .services-all:nth-child(2n) .services-text{ padding-left:45px; padding-right:0;}
.services-section .services-all .services-text .readmore{ display:table;}


.list li{ font:400 16px/22px 'Open Sans', sans-serif; background:url(images/list1.png) no-repeat 0 25px; padding:25px 0 0 30px;}
.gray-text{ background:#e6e6e6; padding:58px 0; margin:70px 0 0;}



.br-bottom{ padding:15px 0 !important; background:url(images/br1.jpg) no-repeat 50% 100%;}
.br-bottom2{ padding:15px 0 !important; background:url(images/br2.jpg) no-repeat 50% 100%;}
.br-bottom3{ padding:15px 0 !important; background:url(images/br1.jpg) no-repeat 0 100%;}
.black-text{ color:#000;}
.blue-text{ color:#01aef0;}
#banner .banner-logo{ position:absolute; right:0; top:0; width: 180px;}
@media only screen and (max-width: 1198px) {
.banner-text{ width:1000px;}
.logo img{ max-width:260px;}
.contact-info{ margin-left:20px;}
.nav-menu li > a{ font-size:13px; padding:0 6px;}
.banner-text h1{ font-size:60px; line-height:60px}
.banner-text h2{ font-size:50px; line-height:50px;}
.banner-text h3{ font-size:21px; line-height:21px;}
.ourcompany-text{ padding:20px 47px 0;}
.br-bottom{ padding:10px 0 !important;}
.ourcompany-text ul li{ margin:5px 10px;}
.antifouling-img{ padding-right:30px;}
.antifouling-img::after{ right:0;}
.ft-bottom div{ float:none; margin:0 auto; text-align:center; display:table;}
.ft-bottom div + div{ float:none;}
.services-box div{ font-size:21px; line-height:21px;}
.nav-menu li img{ display:none;}
.nav-menu li:before{ display:none;}
}
@media only screen and (max-width: 990px) {
.banner-text{ width:748px; top:39%;}
.logo img{ max-width:150px;}
header p{ font-size:13px;}
.contact-info{ margin-left:12px;}
.banner-text h1{ font-size:46px; line-height:48px;}
.banner-text h2{ font-size:36px; line-height:36px;}
.services-btn a{ font-size:17px; line-height:25px; padding:0 25px;}
.ourcompany-img{ float:none; width:100%;}
.ourcompany-img img{ width:100%;}
.ourcompany-text{ width:100%; float:none; padding:30px 47px;}
.getintouch{ width:100%; float:none;}
.map-home{ width:100%; float:none;}
.map-home iframe{ min-height:400px;}
footer h2{ font-size:15px;}
.readmore{ transform: skew(-10deg);}
.readmore a{ transform: skew(10deg);}
#content h1{ font-size:44px; line-height:46px;}
.services-section .services-all .services-text{ padding-right:28px;}
.services-section .services-all:nth-child(2n) .services-text{ padding-left:28px;}
#navigation{ position:relative; float:none;}
#navbtn{ display:block; background:url(images/navigation.png) no-repeat 100% 50%; width:100%; height:27px; text-transform:uppercase; font:400 20px/27px 'Open Sans', sans-serif; cursor:pointer;}
.nav-menu{ display:none; position:absolute; z-index:999; width:100%; background:#fff; box-shadow:0 0 6px #000;}
.nav-menu li{ float:none;}
.nav-menu li+li{ border-top:1px solid #035e8d;}
.nav-menu li > a{ font:normal 16px/34px Arial, Helvetica, sans-serif; padding:0 13px;}
.nav-menu li + li > a{font:normal 16px/34px Arial, Helvetica, sans-serif;}
.nav-menu li .menuarrow{ position:absolute; right:2px; top:2px; width:36px; height:36px; z-index:99; background:url(images/nav-arrow.png) no-repeat 50% 50%; display:block; cursor:pointer; border-radius:3px;}
.nav-menu li:hover > .menuarrow, .nav-menu li.active > .menuarrow,.nav-menu li.current_page_item > .menuarrow{ background:url(images/nav-arrow.png) no-repeat 50% 50% #0089cf;}
.nav-menu .sub-menu{ position:relative; margin:0 3px;}
.nav-menu .sub-menu .sub-menu{ left:0; margin:0 5px;}
.nav-menu .sub-menu li{ float:none;}
.nav-menu li:hover > .sub-menu{ display:none;}

#banner .banner-logo{ position:absolute; right:0; top:0; width:120px;}
}
@media only screen and (max-width: 740px) {
.banner-text{ width:98%; top:50%;}
.banner-text > div{ width:100%;}
footer{ text-align:center;}
.header-left{ float:none; width:214px; margin:20px auto; display:table;}
.header-right{ float:none; width:214px; margin:20px auto; display:table;}
.logo{ float:none; width:100%; margin:0 auto; display:table;}
.contact-info{ float:none;  margin:0 auto; display:table; margin-left:0;}
.ourcompany{ margin:60px 0 0;}
.banner-text h2{ font-size:20px; line-height:22px;}
.banner-text h1{ font-size:26px; line-height:28px; letter-spacing:2px;}
.banner-text h3{ font-size:18px; line-height:18px; padding:8px 0 0;}
.services-btn{ margin:10px 0 0;}
.services-btn a{ font-size:15px; line-height:17px;}
.ourcompany-text ul li{ margin:5px;}
.ourcompany-text ul li img{ width:120px;}
#content h1{ font-size:37px; line-height:40px;}
.antifouling-img{ margin:30px 0 0;}
.antifouling{ padding:35px 0 0;}
.contact{ margin:65px 0 0;}
.services-all .services-img{width:100%; padding:20px 0 0;}
.services-section .services-all .services-text{width:100%; display:block;}
.services-section .services-all{ display:block; padding:20px 0 0;}
.services-section .services-all .services-text{ padding:0 15px;}
.services-section .services-all:nth-child(2n) .services-text{ padding:0 15px;}

.services-section{ padding:20px 0 0;}
.readmore span{ display:inline;}
.getintouch{ padding:10px;}


#banner .banner-logo{ width:80px;}
}
@media only screen and (min-width: 740px) {

}
@media only screen and (max-width: 450px) {
.banner-text{ width:96%;}
#content h1{ font-size:28px; line-height:32px;}
#banner .banner-logo{ width:60px;}
}