/*
Theme Name: Pacific Coast
Theme URI: http://pacific-coast.com/
Author: Underscores.me
Author URI: http://wpbrigade.me/
Description: Description
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pacific-coast
Tags:

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Pacific Coast is based on Underscores http://underscores.me/, (C) 2012-2016 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
*/



html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
}


::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

textarea {
  resize: vertical;
}

body{
  background:#043a71  url(img/main_background.jpg) no-repeat center 0;
  -webkit-background-size: 100% auto;
  background-size: 100% auto;
  font-size: 16.4px;
  font-family: 'Roboto Slab';
}
*{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
/* ==========================================================================
Author's custom styles
========================================================================== */
.page-wrapper{
  max-width: 1120px;
  width: 100%;
  margin: 0 auto;
}
.header:after{
  content: '';
  display: table;
  clear: both;
}
.header{
  padding: 15px 60px 0 60px;
  min-height: 460px;
  background-repeat: no-repeat;
  background-position: center 0;
  background-size: cover;
  position: relative;
}
.header:before{
  content: '';
  background: url(img/banner_cut_corner.png) no-repeat 0 0;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 110px;
}
.logo{
  float: left;
}
.right-menu-section{
  float: right;
}
.main-menu{
  list-style: none;
  margin: 0;
  float: left;
  padding: 0 15px 0 28px;
}
.main-menu li{
  font: 400 16.4px 'Roboto Slab', Arial, Helvetica, sans-serif;
  line-height: 1.1;
  color: #fff;
  display: inline-block;
  position: relative;
  text-transform: uppercase;
}
.main-menu li ul{
  position: absolute;
  left: 23px;
  width: 160px;
  background: #f0c13a;
  top: 100%;
  padding: 5px;
  visibility: hidden;
  opacity: 0;

}
.main-menu li ul li + li{
  padding-left: 0;
}
.main-menu li ul li + li:after{
  display: none;
}
.main-menu li ul li{
  display: block;
  padding: 0;
}
.main-menu li.current_page_item>a, .main-menu li.current-menu-item>a{
  color: #f0c13a;
  font-weight: 700;
}

.main-menu li ul li.current_page_item>a, .main-menu li ul li.current-menu-item>a{
  color: #f0c13a;
  background: #fff;
}
.main-menu li + li{
  padding-left: 34px;
  position: relative;
}
.main-menu li + li:after{
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #40648e;
  position: absolute;
  top: 50%;
  left: 12px;
  margin-top: -4px;
}
.main-menu li ul li a{
  display: block;
  width: 100%;
  padding:5px 5px;
}
.main-menu li a{
  color: #fff;
  text-decoration: none;
  padding: 13px 0;
  display: inline-block;
  vertical-align: top;
  -webkit-transition:all 0.2s ease-in-out;
  -moz-transition:all 0.2s ease-in-out;
  -ms-transition:all 0.2s ease-in-out;
  transition:all 0.2s ease-in-out;
}
.right-menu-section{
  background: #083364;
  position: relative;
  border-radius: 22px 0 0 22px;
}

.social-link{
  list-style-type: none;
  margin: 0;
  padding: 0;
  float: left;
  padding: 6px 21px;
  background: #f0c13a;
  border-radius: 0 16px 0 16px;
  font-size: 0;
}
.right-menu-section:after{
  content: '';
  width: 60px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 100%;
  background: #083364;
}
.social-link li{
  font-size: 16.4px;
  display: inline-block;
  margin: 0 1.5px;
}
.social-link li a{
  color: #fff;
  display: inline-block;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  text-align: center;
  vertical-align: middle;
  border:2px solid #fff;
  line-height: 32px;
}
.main-container{
  background: url(img/pattern.jpg) repeat 0 0;
  padding: 0 60px 60px 60px;
  position: relative;
}
.main-container:after{
  content: '';
  width: 100%;
  height: 105px;
  background: url(img/middle_banner_corner.png) no-repeat 0 0;
  position: absolute;
  top: 100%;
  left: 0;
}
.post-info-section{
  background: url(img/middle-banner.jpg) no-repeat 0 0;
  padding: 134px 60px 110px;
  -webkit-background-size: cover;
  background-size: cover;
  min-height: 547px;
}
.post-info-section h1, .post-info-section h1 span{
  color: #fff;
}
.post-info-section h1 span{
  margin-bottom: 2px;
}
.post-info-section .circle{
  border-color: #083364;
  background: #fff;
  top: -166px;
}
.post-info-section .circle:before{
  background: url(img/line_pattern_white.png) repeat-y 0 center;
  height: 100px;
}
.post-info-section .circle:after{
  background-color: #fff;
  top: 206px;
}
.user-contact-data{
  padding:7px 0px 10px;
}
.sevice-desc.user-contact-data p{
  color: #083364;
}
.user-contact-data p{
  margin: 0;
  font: 400 17px 'Roboto Slab', Arial, Helvetica, sans-serif;
  line-height: 24px;
  color: #fff;
}
.footer-wrapper{
  background: #083364;
  padding: 0 60px 36px;
  position: relative;
}
.footer-wrapper:before{
  content: '';
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 100%;
  height: 107px;
  background: url(img/footer-toper.png) no-repeat 0 0;
}
.footer-contact-info{
  width: 28.5%;
  float: left;
  position: relative;
  top: -6px;
}
.footer-logo{
  display: inline-block;
  vertical-align: top;
  margin-bottom: 29px;
}
.footer-wrapper:after{
  content: '';
  display: table;
  clear: both;
}
.footer-contact-info ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.footer-contact-info ul li{
  font: 400 16.4px 'Roboto Slab', Arial, Helvetica, sans-serif;
  line-height: 1.2;
  color: #fff;
  margin-bottom: 33px;
  padding-left: 49px;
  position: relative;
}
.footer-contact-info ul li:after{
  width: 33px;
  height: 33px;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  position: absolute;
  top: 3px;
  left: -2px;
  font-family: fontAwesome;
  border: 2px solid #f4c838;
  content: '';
  font-size: 18px;
  color: #f4c838;
  line-height: 36px;
}
.footer-contact-info ul li.email:after{
  content: '\f0e0';
}
.footer-contact-info ul li.phone:after{
  top: -5px;
  content: '\f095';
}
.footer-contact-info ul li a{
  font-weight: 700;
  color: #f4c838;
  text-decoration: none;
}
.follow-us span{
  font: 400 16.4px 'Roboto Slab', Arial, Helvetica, sans-serif;
  color: #fff;
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
}
.follow-us a{
  width: 32px;
  height: 32px;
  vertical-align: middle;
  border:2px solid #fff;
  display: inline-block;
  text-align: center;
  color: #fff;
  font-size: 18.4px;
  line-height: 26px;
  border-radius: 50%;
  margin-right: 2px;
}
.copyright{
  margin: 20px 0 0;
  color: #fff;
  font-size: 16.4px;
  line-height: 1.2;
  letter-spacing: -0.08em;
}
.copyright a{
  color: #f4c838;
  font-weight: 700;
  text-decoration: none;
}
.contact-us-form{
  width: 57.7%;
  float: right;
  margin-top: 54px;
}
.contact-us-form h2{
  font: 700 32.8px 'Roboto Slab', Arial, Helvetica, sans-serif;
  line-height: 1.1;
  color: #fff;
  text-transform: uppercase;
  margin: 0 0 38px;
}
.contact-us-form h2 small{
  color: #a3bad7;
  display: block;
  font-weight: 400;
  font-size: 60%;
  margin-top: 3px;
}
.contact-us-form label{
  width: calc(50% - 15px);
  float: left;
  position: relative;
  margin-bottom: 24px;
}
.contact-us-form label input[type="text"],
.contact-us-form label input[type="email"],
.contact-us-form label input[type="number"],
.contact-us-form label textarea{
  width: 100%;
  border: 0;
  background: none;
  height: 38px;
  padding-left: 55px;
  display: block;
  font: 300 13px 'Roboto Slab', Arial, Helvetica, sans-serif;
  line-height: 1.1;
  color: #6684a9;
}
.contact-us-form label:after{
  content: '';
  display: block;
  width: calc(100% - 15px);
  right: 0;
  bottom: 0;
  height: 1px;
  background: #2d65a9;
  position: absolute;
}
.contact-us-form label.fa-edit{
  width: 100%;
  margin-bottom: 34px;
}
.contact-us-form label textarea{
  padding: 12px 20px 12px 54px;
}
.contact-us-form ::-webkit-input-placeholder {
  color: #6684a9;
}

.contact-us-form :-moz-placeholder { /* Firefox 18- */
  color: #6684a9;
}

.contact-us-form ::-moz-placeholder {  /* Firefox 19+ */
  color: #6684a9;
}

.contact-us-form :-ms-input-placeholder {
  color: #6684a9;
}
.form-section input[type="submit"]{
  border-radius: 8px;
  width: 235px;
  height: 48px;
  border: 0;
  font: 700 22px 'Roboto Slab', Arial, Helvetica, sans-serif;
  line-height: 1.1;
  color: #fff;
  text-transform: uppercase;
  background: rgb( 244, 200, 56 ) url(img/arrow_white_right.png) no-repeat right 21px center;
  padding-right: 45px;
}
:focus{
  outline: none;
}
.contact-us-form label:before{
  width: 38px;
  height: 38px;
  background: #2d65a9;
  position: absolute;
  top: 0;
  left: 0;
  line-height: 43px;
  text-align: center;
  border-radius: 50%;
  color: #fff;
  font-size: 18px;
}
.contact-us-form label:nth-child(even){
  float: right;
}
/*============================================
=            Code For Typo Graphy            =
============================================*/

h1{
  font: 700 42px 'Roboto Slab', Arial, Helvetica, sans-serif;
  line-height: 1;
  color: #083364;
  margin: -5px 0 20px;
  text-transform: uppercase;
}
h1 span{
  display: block;
  font-weight: 300;
  color: #010000;
  font-size: 34.4px;
  line-height: .9;
}
.heading-container{
  position: relative;;
  padding-left: 130px;
}
.circle{
  border-style: solid;
  border-width: 10px;
  border-color: rgb(244, 200, 56);
  border-radius: 50%;
  background-color: rgb(255, 255, 255);
  width: 106px;
  height: 106px;
  display: block;
  position: absolute;
  top: -136px;
  text-align: center;
  line-height: 76px;
  left: 20px;
}
.circle .avatar{
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: block;
}
.circle:after{
  content: '';
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgb(8, 51, 100);
  position: absolute;
  top: 175px;
  left: 50%;
  margin-left: -10px;
}
.circle:before{
  content: '';
  height: 80px;
  width: 2px;
  background: url(img/line_pattern.png) repeat-y center 0;
  position: absolute;
  left: 50%;
  top: 100%;
  margin-top: 10px;
  margin-left: -1px;
}
.post-wrapper{
  padding-left: 5px;
  padding-right: 5px;
}
.post-box{
  width: 33.333%;
  padding: 0 15px;
  margin-bottom: 186px;
  float: left;
  text-align: center;
}
.post-box a{
  display: block;
  background: #fff;
  border:1px solid #c5c5c5;
  text-decoration: none;
  padding: 0 16px 40px;
  min-height: 300px;
  position: relative;
}
.post-box a:after{
  content: '';
  position: absolute;
  top: -1px;
  right: -1px;
  left: -1px;
  bottom: -1px;
  border:3px solid #f4c838;
  visibility: hidden;
  opacity: 0;
  -webkit-transition:all 0.2s ease-in-out;
  -moz-transition:all 0.2s ease-in-out;
  -ms-transition:all 0.2s ease-in-out;
  transition:all 0.2s ease-in-out;
}
.post-box a *{
  position: relative;
  z-index: 1;
}
.img-box{
  width: 197px;
  height: 197px;
  border-radius: 50%;
  margin: -99px auto 0;
}
.img-box>img{
  width: 100%;
  border-radius: 50%;
  height: 197px;
  display: block;
}
.img-box span{
  display: block;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: #083364;
  margin: 0 auto;
  border:6px solid #fff;
  line-height: 70px;
  text-align: center;
  margin-top: -50px;
  position: relative;
  z-index: 1;
  -webkit-transition:all 0.2s ease-in-out;
  -moz-transition:all 0.2s ease-in-out;
  -ms-transition:all 0.2s ease-in-out;
  transition:all 0.2s ease-in-out;
}
.post-wrapper:after{
  content: '';
  display: table;
  clear: both;
}
.post-wrapper{
  padding-top: 154px;
}
h2{
  font: 700 26px 'Roboto Slab', Arial, Helvetica, sans-serif;
  line-height: 1.077;
}
.post-wrapper h2{
  color: #083364;
  margin: 54px 0 10px;
  text-transform: uppercase;
  -webkit-transition:all 0.3s ease-in-out;
  -moz-transition:all 0.3s ease-in-out;
  -ms-transition:all 0.3s ease-in-out;
  transition:all 0.3s ease-in-out;
}
.post-wrapper p{
  font: 400 18px 'Roboto Slab', Arial, Helvetica, sans-serif;
  line-height: 1.2;
  color: #464b51;
  display: block;
  display: -webkit-box;
  max-width: 100%;
  max-height: 63px;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}
.read-btn {
  border-style: solid;
  border-width: 2px;
  border-color: rgb(197, 197, 197);
  border-radius: 8px;
  background-color: rgb(255, 255, 255);
  width: 136px;
  height: 39px;
  font: 400 16.4px 'Roboto Slab', Arial, Helvetica, sans-serif;
  line-height: 1.1;
  color: #cdcdcd;
  display: inline-block;
  padding: 8px;
  -webkit-transform: translateY(50%);
  -ms-transform: translateY(50%);
  -o-transform: translateY(50%);
  transform: translateY(50%);
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  text-transform: uppercase;
  margin-top: 0px;
  position: absolute !important;
  bottom: 0px;
  left: 50%;
  margin-left: -68px;
}
.post-detail{
  min-height: 104px;
}

/*=====  End of Code For Typo Graphy  ======*/
.single-right-sidebar{
  width: 245px;
  float: left;
  background: #fff;
  margin-left: 65px;
}
.single-right-sidebar h3{
  margin: 0;
  font: 400 21px 'Roboto Slab', Arial, Helvetica, sans-serif;
  background: #f4c838;
  padding: 11px 17px;
  color: #fff;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}
.single-right-sidebar ul{
  list-style-type: none;
  padding: 0;
  margin: 0;
  padding: 2px 16px 0;
  box-shadow: 0px 0px 6px 0px rgba( 0, 0, 0, .15 );

}
.single-right-sidebar ul li{
  font: 400 15.5px 'Roboto Slab', Arial, Helvetica, sans-serif;
  color: #585858;
}

.single-right-sidebar ul li a{
  color: #585858;
  text-decoration: none;
  display: block;
  padding: 15px 0 15px 20px;
  border-bottom: 1px solid #d8d8d8;
  position: relative;
}
.single-right-sidebar ul li a:before{
  content: "\f054";
  font-family: fontAwesome;
  position: absolute;
  left: 0;
  font-size: 11px;
  top: 21px;
}
.single-right-sidebar ul li:last-child a{
  border-bottom: 0;
}
.service-section{
  width: calc(100% - 350px);
  float: right;
}
.single-service-page:after{
  content: '';
  display: table;
  clear: both;
}
.single-service-page{
  padding-bottom: 180px;
  padding-top: 40px;
}
.service-img-section{
  margin-bottom: 47px;
}
.service-img-section>img{
  width: 100%;
  display: block;
}
.service-section h2{
  font: 700 23px 'Roboto Slab', Arial, Helvetica, sans-serif;
  line-height: 1.1;
  color: #083364;
  margin: 0 0 19px;
  text-transform: uppercase;
}
.service-section p{
  font: 400 17px 'Roboto Slab', Arial, Helvetica, sans-serif;
  line-height: 2;
  margin: 0 0 38px;
}
.blog-page{
  padding-left: 130px;
  padding-bottom: 190px;
  padding-top: 44px;
}
.blog-page:after{
  content: '';
  display: table;
  clear: both;
}
.blog-post-section{
  width: calc(100% - 269px);
  float: left;
}
.blog-post-img img{
  width: 100%;
  display: block;
}
.blog-post-content{
  padding: 38px 16px 0;
  -webkit-box-shadow: 0px 0px 12px 0px rgba( 0, 0, 0, .19 );
  box-shadow: 0px 0px 12px 0px rgba( 0, 0, 0 , .19);
}
.blog-post-img{
  position: relative;
  z-index: 2;
}

.blog-post-content h2{
  font: 700 21px 'Roboto Slab', Arial, Helvetica, sans-serif;
  line-height: 1.1;
  margin: 0 0 12px;
  color: #083364;
  text-transform: uppercase;
}
.blog-post-content p{
  font: 400 16px 'Roboto Slab', Arial, Helvetica, sans-serif;
  line-height: 1.5;
  color: #65686b;
  margin: 0 0 31px;
  letter-spacing: 0.043em;
}
.post-meta:after{
  content: '';
  display: table;
  clear: both;
}
.post-meta{
  font: 400 14px 'Roboto Slab', Arial, Helvetica, sans-serif;
  line-height: 1.1;
  color: #808080;
  padding: 18px 0 22px;
  border-top: 1px solid #c9c9c9;
  padding-left: 5px;
  letter-spacing: 0.06em;
}
.blog-post-content p a{
  color: #083364;
  text-decoration: none;
}
.blog-post-content p .fa{
  font-size: 14px;
  vertical-align: middle;
}
.seprator{
  display: inline-block;
  margin: 0 5px;
}
.post-detail a{
  color: #000;
  text-decoration: none;
}
.post-view{
  float: right;
  font: 400 15px 'Roboto Slab', Arial, Helvetica, sans-serif;
  line-height: 1.1;
  color: #696969;
  padding-left: 22px;
  position: relative;
}
.post-view:after{
  content: '\f06e';
  color: #5f5f5f;
  position: absolute;
  top: 1px;
  left: 0;
  font-family: fontAwesome;
}
.post-inner-section{
  background: #fff;
}
.post-inner-section + .post-inner-section{
  margin-top: 57px;
}
.blog-sidebar-right{
  width: 240px;
  float: right;
}
.blog-sidebar-right h2{
  font: 400 21px 'Roboto Slab', Arial, Helvetica, sans-serif;
  line-height: 1.1;
  color: #fff;
  padding: 13px 17px;
  background: #f4c838;
  margin: 0;
  text-transform: uppercase
}
.widget, .wigdet{
  margin-bottom: 50px;
}
.popular-posts{
  padding: 29px 0 19px 3px;

  border-bottom: 1px solid #cfcfcf;
}
.popular-posts a{
  text-decoration: none;
  display: block;
}
.popular-posts h4{
  color: #222;
}
.post-img-section{
  float: left;
  margin-right: 10px;
}
.post-text{
  overflow: hidden;
  position: relative;
  top: 2px;
}
.post-text h4{
  font: 400 15px 'Roboto Slab', Arial, Helvetica, sans-serif;
  line-height: 1.333;
  margin: 0 0 8px;
  display: -webkit-box;
  max-width: 100%;
  height: 42px;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.post-text p{
  font: 400 13px 'Roboto Slab', Arial, Helvetica, sans-serif;
  line-height: 1.333;
  margin: 0;
  color: #5b5b5b;
}
.ad{
  width: 100%;
  height: 204px;
  border: 5px solid #ebebeb;
  background: #fff;
}
.pager{
  padding-top: 50px;
}
.pager:after{
  content: '';
  display: table;
  clear: both;
}

.prev-page, .next-page{
  display: inline-block;
  font: 400 22px 'Roboto Slab', Arial, Helvetica, sans-serif;
  line-height: 1.1;
  padding: 11px 13px;
  text-decoration: none;
  color: #fff;
  border-radius: 5px;
  position: relative;
}
.next-page{
  background: #f4c838;
  float: right;
  padding-right: 53px;
}
.next-page:after{
  content: '';
  display: inline-block;
  width: 26px;
  height: 7px;
  background: url(img/arrow_white_right.png) no-repeat 0 center;
  position: absolute;
  top: 20px;
  right: 12px;
}
.prev-page:after{
  content: '';
  display: inline-block;
  width: 26px;
  height: 7px;
  background: url(img/arrow_white_left.png) no-repeat 0 center;
  position: absolute;
  top: 20px;
  left: 12px;
}
.prev-page{
  background: #215187;
  float: left;
  padding-left: 53px;
}
.menu-btn{
  position: absolute;
  width: 40px;
  height: 40px;
  background: #215187;
  top: 20px;
  right: 0;
  border-radius: 10px 0 0 10px;
}
#nav-icon3 {
  width: 30px;
  height: 20px;
  position: absolute;
  top: 20px;
  right: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  background: #083364;
  cursor: pointer;
  border: 3px solid #083364;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  display: none;
  z-index: 1002;
}
#nav-icon3 span{
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  background: rgb(244, 200, 56);
  border-radius: 0;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}
#nav-icon3 span:nth-child(1) {
  top: 0px;
}

#nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) {
  top: 8px;
}

#nav-icon3 span:nth-child(4) {
  top: 16px;
}

#nav-icon3.open span:nth-child(1) {
  top: 8px;
  width: 0%;
  left: 50%;
}

#nav-icon3.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#nav-icon3.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#nav-icon3.open span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
}
.errormessages{
  font-size: 14px;
  clear: both;
  padding-bottom: 10px;
  color: #eaf4fc;
}
.success-message{
  background: #29a9e1;
  position: absolute;
  margin-left: 470px;
  margin-top: 54px;
  top: 0;
  left: 0;
  width: 53%;
  height: 78%;
  display: none;
}
.success-message p {
  font: 400 30px 'Helvetica';
  color: #fff;
  position: absolute;
  top: 40%;
  width: 100%;
  left: 0;
  padding: 0 20px;
  text-align: center;
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}
.submit-container{
  padding: 0;
  margin: 0;
}
/* ==========================================================================
Helper classes
========================================================================== */

/*
* Hide visually and from screen readers
*/

.hidden {
  display: none !important;
}

/*
* Hide only visually, but have it available for screen readers:
* http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*/

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/*
* Extends the .visuallyhidden class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638
*/

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}

/*
* Hide visually and from screen readers, but maintain layout
*/

.invisible {
  visibility: hidden;
}

/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
*    `contenteditable` attribute is included anywhere else in the document.
*    Otherwise it causes space to appear at the top and bottom of elements
*    that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
*    `:before` to contain the top-margins of child elements.
*/

.clearfix:before,
.clearfix:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}

.clearfix:after {
  clear: both;
}

.pacific-loader{
  display: none;
  position: absolute;
  background: rgba(41, 169, 225, 0.71);
  margin-left: 470px;
  margin-top: 54px;
  width: 53%;
  height: 78%;
  top: 0;
  bottom: 0;
  left: 12px;
  right: 12px;
  z-index: 1000;
}
.pacific-loader img{
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);

}
/* ==========================================================================
EXAMPLE Media Queries for Responsive Design.
These examples override the primary ('mobile first') styles.
Modify as content requires.
========================================================================== */
@media screen and (min-width: 1025px) {
  .post-box a:hover:after{
    visibility: visible;
    opacity: 1;
  }
  .post-box a:hover h2{
    color: #f4c838;
  }
  .post-box a:hover .read-btn{
    color: #fff;
    border-color: #f4c838;
    background: #f4c838;
  }
  .post-box a:hover .img-box span{
    background: #f4c838;
  }
  .main-menu li ul li a:hover{
    color: #f0c13a;
    background: #fff;
  }
  .main-menu li a:hover{
    color: #f0c13a;
  }
  .main-menu li:hover ul{
    visibility: visible;
    opacity: 1;
  }
  .single-right-sidebar ul li a:hover{
    color: #083364;
  }
  .post-inner-section:hover h2, .post-inner-section:hover p .fa{
    color: #d7ac1f;
  }
  .main-menu li ul{
    display: block !important;
  }
}

@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}
@media screen and (max-width: 1024px) {
  .main-menu li ul{
    visibility: visible;
    opacity: 1;
    display: none;
  }
}
@media screen and (max-width: 991px) {
  .post-box{
    width: 50%;
  }
  .header, .main-container, .post-info-section, .footer-wrapper{
    padding-left: 30px;
    padding-right: 30px;
  }
  .right-menu-section:after{
    width: 30px;
  }
  .logo img{
    width: 200px;
  }
  .blog-page{
    padding-left: 0;
  }
  .single-right-sidebar{
    margin-left: 0;
  }
  .service-section{
    width: calc(100% - 272px);
  }
}
@media screen and (max-width: 767px) {
  .footer-contact-info, .contact-us-form{
    width: 100%;
  }
  .header, .main-container, .post-info-section, .footer-wrapper{
    padding-left: 20px;
    padding-right: 20px;
  }
  .right-menu-section:after{
    width: 20px;
  }
  .right-menu-section{
    width: 100vw;
    background: #083364;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    overflow: auto;
    padding: 20px;
    z-index: 1000;
    border-radius: 0;
  }
  .right-menu-section:after{
    display: none;
  }
  .header:before, .main-container:after, .footer-wrapper:before{
    display: none;
  }
  .header{
    border-bottom: 10px solid rgb(244, 200, 56);
  }
  .heading-container{
    padding-top: 40px;
  }
  .circle{
    top: -66px;
  }
  .circle:before{
    height: 48px;
  }
  .circle:after{
    top: 133px;
  }
  .post-info-section{
    border-top: 10px solid #083364;
    min-height: inherit;
    padding: 40px 20px;
  }
  .heading-container{
    padding-top: 0;
    padding-left: 90px;
  }
  .circle {
    -webkit-transform: scale(.8);
    -moz-transform: scale(.8);
    transform: scale(.8);
    top: -88px;
    -webkit-transform-origin: top left;
    -moz-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    left: -6px;
  }
  .main-container{
    padding-top: 20px;
  }
  h1{
    font-size: 30px;
    margin-bottom: 5px;
  }
  h1 span{
    font-size: 24px;
  }
  .user-contact-data p{
    font-size: 14px;
    line-height: 1.37;
  }
  .post-wrapper h2{
    font-size: 20px;
  }
  .post-wrapper p{
    font-size: 16px;
    max-height: 57px;
  }
  .post-info-section .circle{
    top: -109px;
  }
  .post-info-section .circle:before{
    height: 80px;
  }
  .post-info-section .circle:after{
    top: 170px;
  }
  .footer-contact-info{
    position: static;
  }
  .footer-logo img{
    width: 150px;
  }
  .footer-wrapper{
    border-top: 5px solid #f4c838;
    padding-top: 40px;
  }
  .footer-contact-info ul li{
    margin-bottom: 22px;
  }
  .contact-us-form h2{
    font-size: 28px;
  }
  .contact-us-form label{
    width: 100%;
  }
  .blog-post-section{
    width: 100%;
    float: none;
    margin-bottom: 20px;
  }
  .blog-sidebar-right{
    float: none;
    width: 100%;
  }
  .ad{
    width: 204px;
    margin: 0 auto 50px;
  }
  .service-section{
    width: 100%;
    float: none;
    margin-top: 40px;
  }
  .single-right-sidebar{
    float: none;
    width: 100%;
  }
  .service-img-section{
    margin-bottom: 20px;
  }
  .service-section h2{
    margin-bottom: 15px;
  }
  .service-section p{
    font-size: 14px;
    line-height: 1.3;
    margin-bottom: 20px;
  }
  .single-service-page{
    padding-bottom: 0;
  }
  .header{
    min-height: 320px;
  }
  #nav-icon3{
    display: block;
  }
  .main-menu{
    padding-left: 0;
  }
  .main-menu li{
    display: block;
  }
  .main-menu li + li{
    padding-left: 0;
  }
  .main-menu li + li:after{
    display: none;
  }
  .social-link{
    float: none;
    clear: both;
    display: block;
    border-radius: 0;
    width: calc(100% - 20px);
  }
  .main-menu{
    padding-left: 0;
    padding-bottom: 20px;
    width: 100%;
  }
  .main-menu li{
    width: 100%;
    display: block;
  }
  .main-menu li a{
    display: block;
  }
  .body_ov{
    overflow: hidden;
    width: 100vw;
    height: 100vh;
  }
  .right-menu-section{
    visibility: hidden;
    opacity: 0;
    -webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -ms-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;
  }
  .right-menu-section.in{
    visibility: visible;
    opacity: 1;
  }
  .main-menu li ul{
    position: static;
    width: 100%;
  }
  .main-menu li ul li{
    display: block;
  }
  .main-menu li ul li a{
    display: block;
  }
}
@media screen and (max-width: 600px) {
  .post-box{
    width: 100%;
    padding-left: 0;
  }
}


@media print,
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 1.25dppx),
(min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}