/*
Theme Name: Skin MD and Beyond
Theme URI: http://www.advicemedia.com/
Version: 1.0.1
Description: Custom Theme based on Canvas
Author: Advice Media
Author URI: http://www.advicemedia.com
Template: canvas
Requires at least: 6.0
Requires PHP: 8.0
*/
/* Default styles */

@import "../canvas/style.css";
@import url(https://fonts.googleapis.com/css?family=Fira+Sans:400,300,300italic,400italic,500,500italic,700);

/*-------------------------------------------------------------------------------------------*/
.clearfix:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
/* general */
.num a { text-decoration: none;}
.f-left{float:left}
.f-right{float:right}
.clear{clear:both}
.widget h3{border:none}
.btn{background:#827360; color:#fff !important; padding:5px 15px;}
.no-border{border:none !important;}
.entry, .entry p{font:400 16px 'Fira Sans', sans-serif !important; color:#827361; line-height: 1.5em !important;}
#logos .col-full, #bottom-section .col-full, #beauty-bar-box .col-full, #testimonials .col-full, #feature-container .col-full{padding-left: 1.618em; padding-right: 1.618em;}
.btn{background:#6badde; color:#fff !important; padding:5px 15px; display:inline-block; text-decoration:none}
h2, h3, h4, h5, h6{color:#90ded5; font-family:"Fira Sans",Tahoma,sans-serif !important; font-weight:500 !important}
h2{font-size:28px;}
h3{font-size:26px;}
h4{font-size:24px;}
h5{font-size:22px;}
h6{font-size:20px;}

/*.two-col-left #main-sidebar-container #main, .two-col-right #main-sidebar-container #main {
  width: 100%;
}*/
.post .title a:link, .post .title a:visited, .page .title a:link, .page .title a:visited {
  color: #6BADDE;
}

.page-title, .post .title, .page .title {margin-top: 0.75em;}

@media only screen and (max-width:880px) {
	.page-title, .post .title, .page .title {margin-top: 1.75em;}
}

/* header */
@media only screen and (min-width:768px) {
#menu-item-541 > .sub-menu {width:400%;}
#menu-item-541 > .sub-menu > li{width: 25%;float: left;height: 40px;}

#menu-item-543 > .sub-menu {width:300%;}
#menu-item-543 > .sub-menu > li{width: 33.33%;float: left;height: 40px;}

}

#header-wrap{position:fixed; top: 0; width:100%; z-index:9003;}
.logged-in #header-wrap {top:32px !important;}
.home #header-gap {height:224px !important;}
.page #header-gap, .single #header-gap, .archive #header-gap, .blog  #header-gap, .error404 #header-gap{height:260px;} 
#header-container{background:url(images/bg-header.jpg) repeat-x #eae2d1;}
#header{padding:13px 0;}
#logo img{ width: 85%; margin-top: 10px;}
#header h3, #header h5{float:right; margin:5px 0 0 0; padding:0; color:#6badde; transition: all 0.1s ease 0s;}
#header h3{font:700 24px 'Fira Sans', Tahoma, sans-serif;}
#header h5{font:400 18px 'Fira Sans', Tahoma, sans-serif;}
#header .btn{float:right;font:400 18px 'Fira Sans', sans-serif; text-decoration:none !important; margin-top:5px;}
.social-media{list-style:none;}
.social-media li{display:inline-block; float: left;}
.social-media li a{color:#fff; font-size:19px; background:#827360; padding:10px 0 !important; border-radius:50%; width: 41px; text-align: center;}
.social-media li a.blog-icon{background: url('images/blog-icon.png') no-repeat center top; display: inline-block; width: 41px; height: 41px; box-sizing: border-box; padding: 0;}
.social-media li a:hover{background:#b0c8e9; text-decoration:none !important;}
.social-media li a.blog-icon:hover{background: url('images/blog-icon.png') no-repeat center bottom; background-color: none;}

/* nav */
#nav-container{background:#b1c9e9; border-bottom:15px solid #90ded5; margin:0; }
#navigation{background:none;}
#nav-container #navigation ul#main-nav > li:first-child{border:none;}
ul.nav{margin-right:0 !important;}
ul.nav li a{font:400 15px 'Fira Sans', Tahoma, sans-serif; color:#fff; text-transform:uppercase; padding: 0.5em 0.8em;}
ul.nav li.current_page_item a, ul.nav li.current_page_parent a, ul.nav li.current-menu-ancestor a, ul.nav li.current-cat a, ul.nav li.current-menu-item a, ul#main-nav > li a:hover, #navigation ul.nav>li:hover{background:none !important; color:#827361; font-weight:700;}
.tiny ul.nav li.current_page_item a, .tiny ul.nav li.current_page_parent a, .tiny ul.nav li.current-menu-ancestor a, .tiny ul.nav li.current-cat a, .tiny ul.nav li.current-menu-item a, .tiny ul#main-nav > li a:hover, .tiny #navigation ul.nav>li:hover{background:none !important; color:#827361; font-weight:600;}
.tiny #header {  padding: 8px 0;}
.tiny ul.nav li a {  display: block;  padding-top: .7em !important;  padding-bottom: .7em !important;}
.widget_woothemes_features .feature { display: block; text-align: center; margin-bottom: 0; }
/* drop down */
#navigation ul.nav ul {background-color: #90ded5; font-size:14px;}
ul.nav li ul li a, ul.nav li ul li.current-menu-item a, ul.nav li ul li.current_page_parent a {color:#fff !important;}
ul.nav li ul li a:hover {text-decoration:none; color:#fff !important}
#filters .button {
    color: #f23c80;
    cursor: pointer;
    font-size: 14px;
    list-style: disc outside none;
    margin-bottom: 10px;
    text-decoration: underline;
}

ul#video-gal {
  float: left;
  width: 100%;
}
#video-gal {
  min-height: 600px;
}
.filter-group {
  float: right;
  width: 40%;
}
i.fa.fa-check-square {
  margin-right: 5px;
}
#filters .button {
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  list-style: disc outside none;
  margin-bottom: 10px;
  text-decoration: underline;
  float: left;
  display: block;
  background-color: #6BADDE;
  margin-right: 5px;
  padding: 6px 20px;
  text-decoration: none;
  border-radius: 5px;
    padding-left: 10px;
}
li.item a {
  text-align: center;
}
.item {
  width: 23%;
  margin: 1%;
  text-align: center;
  margin-bottom: 30px;
  float: left;
}
#header-wrap.tiny{transition: height 500ms, background 500ms;}
#header-wrap.tiny #logo img{max-width:60% !important;}
#header-wrap.tiny #header .btn{display:none}
#header-wrap.tiny #header h3 {font: 700 25px "Fira Sans",Tahoma,sans-serif;}
#header-wrap.tiny #header h5 {font: 700 20px "Fira Sans",Tahoma,sans-serif;}
.features.columns-5 {  margin-top: 20px;z-index: 200;  position: relative;}
/* slider */
#rev_slider_1_1_wrapper{border-bottom:5px solid #b1c9e9;}
div#mainslider {
  background: url(images/bg-feature.jpg) repeat;
  padding: 52px 0px 0px;
}
/* features */
#feat-bot-container{background:url(images/feat-bg.jpg) repeat;}
#feature-container{padding: 0px;}
#feature-container .widget{margin:0}
.feature{width:20%; float:left; position:relative;}
.feature img{  height: auto;-webkit-filter: grayscale(100%); -webkit-filter: grayscale(1); filter: gray; filter: grayscale(100%); -webkit-filter: grayscale(100%);}
.feature img:hover{-webkit-filter: grayscale(0%); filter: grayscale(0%)}
.feature-title{position:absolute; bottom:18%; left:12%;}
.feature-title a{color:#fff !important; font:300 28px 'Fira Sans', Tahoma, sans-serif; text-transform:uppercase; text-decoration:none !important; text-shadow: 2px 1px #000;}
.feature-title a:hover{color:#90ded5;}

/* content */
.home #content-container{background:url(images/bg-container.jpg) repeat-x bottom left; border-bottom: 5px solid #90ded5; padding-bottom: 30px;}
#content-container #content{padding-top:70px; padding-bottom:0;}
#content-container h2{color:#90ded5 !important; font:500 26px 'Fira Sans', Tahoma, sans-serif !important; margin-bottom: 10px;}
#content-container .entry, #content-container .entry p{font:400 18px/30px 'Fira Sans', sans-serif !important; color:#827361}
.page-title, .post .title, .page .title{font:500 35px 'Fira Sans', sans-serif !important; color:#6badde}
#logos{background:url(images/bg-logos.jpg) repeat-x #b1c9e9;  padding-bottom: 10px; padding-top: 20px;}
#logos a{display:inline-block; margin:0 10px;}
#bottom-section{padding-bottom:0px;}
/*.shadow { height: 30px; background: url(images/img-shadow.png) no-repeat; background-size: contain; background-position: center; }*/
#bottom-section2{background:url(images/bg-bottom-section2.jpg) repeat;}
#news{background:url(images/bg-news.jpg) repeat-x; padding:20px 0 0 0; background-size:contain}
#news h3{color:#827361; text-align:center; font:700 31px 'Fira Sans', Tahoma, sans-serif; margin-bottom:20px;}
.news-block{width:50%;}
img.alignright.size-full.wp-image-204.no-border {  float: left;  margin-left: 25%;}
#news .mag{margin-right:5px;}
#news a{display:block; text-align:center; font:700 21px 'Fira Sans', Tahoma, sans-serif; color:#827361; margin-top:0; margin-bottom: 16px;}
#news h3 a{color: #827361; text-align: center; font: 700 31px 'Fira Sans', Tahoma, sans-serif; margin-bottom: 20px;}
#news .news-block a{display:inline;}
#blue-boxes-section .col-full div:last-child{margin-right:0 !important}
.blue-boxes{height:502px; width:33.3%; float:left; background:url(images/bg-img.png) no-repeat; background-size:contain; text-align:center; padding-top:22px;}
.blue-boxes img {width:88%; /*margin-bottom:30px;*/ -webkit-filter: grayscale(100%); -webkit-filter: grayscale(1); filter: gray; filter: grayscale(100%); -webkit-filter: grayscale(100%);}
.blue-boxes h3{color:#898989; font:500 26px 'Fira Sans', Tahoma, sans-serif;  margin-top: 20px;}
.blue-boxes a:hover {text-decoration:none}
.blue-boxes a:hover img{-webkit-filter: grayscale(0%); filter: grayscale(0%)}
.blue-boxes a:hover h3{color:#fff;}
.blue-boxes iframe{height: 303px;}
#beauty-bar-box{background:#fff;}
#beauty-bar-box .col-full{position:relative;}
#beauty-bar-content{width:55%; float:right;}
#beauty-bar-content p{color:#6badde; font:400 18px 'Fira Sans', Tahoma, sans-serif; padding-top:12px}
#beauty-bar-content p a{font-size:21px;}
#img-cartoon {
  max-width: 50%;
  left: 0;
  width: 36%;
  float: left;
}
/*#img-cartoon { max-width: 50%; position: absolute; left: 0; width: 36%; bottom: -20px; }*/

.blue-boxes a img , .blue-boxes a, .blue-boxes a h3 {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
}
.owl-carousel .owl-stage-outer {
  position: relative;
  overflow: hidden;
  -webkit-transform: translate3d(0px, 0px, 0px);
  z-index: 100;
}
.hidscroll {
  display: none;
}
.visible{
  display: block !important;
}
/* media */
div#medias {
  margin-top: 30px;
}
#medias .media.media-link {
  width:24%;
  margin-left: 5%;
  margin-right: 5%;
}
#medias .media.media-link  img.attachment-post-thumbnail.wp-post-image {
  width: 100%;
  height: auto;
}
#medias .media {
  float: left;
  width: 34%;
}
#medias div.media.printed-press.media {
  width: 30%;
}
#medias .media a {
  text-align: center;
  display: block;
  margin-top: 5px;
  display: block;
  text-align: center;
  font: 700 16px 'Fira Sans', Tahoma, sans-serif;
  color: #827361;
  margin-top: 0;
  margin-bottom: 16px;
}
#medias div.media.printed-press.media img {
  width: 85%;
  margin: 10px;
}
.video-link span {
  color: #6badde;
  margin-top: 10px;
  float: left;
  text-align: center;
  width: 100%;
  text-transform: capitalize;
}
ul.thumb {
  margin-top: 30px;
}
ul.media-news {
  margin-top: 40px;
  float: left;
  width: 100%;
}
ul.media-news a img {
  vertical-align: bottom;
  max-width: 100%;
  width: 100%;
  height: auto;
}
ul li.media-news.transition {
  margin-left: 20px;
  float: left;
  width: 23%;
}
.media-news a.fancybox-media {
  display: block;
  float: left;
  width: 100%;
}
.media-news h4 {
  color: #5a407a;
  text-align: center;
  font-size: 16px;
}
.printed-press li:nth-child(2n) {
  width: 45%;
  float: left;
  margin-right: 0;
}
.printed-press li {
  width: 45%;
  margin-right: 15px;
  float: left;
  margin-bottom: 5px;
}
.thumb li:nth-child(5n) {
  margin-right: 0;
}
.thumb li {
  float: left;
  margin-right: 7px;
  border: 1px solid #5a407a;
  margin-bottom: 4px;
  width: 18%;
}
#medias h3 {
  text-align: center;
  color: #5a407a;
  font-size: 18px;
  margin-bottom: 10px;
}
.printed-press ul {
  float: left;
}

/* interactive guide */
#seperator {
  height: 20px;
  background: #b1c9e9;
}
div#content-area {
  margin-top: 25px;
  padding: 0 30px;
}
div#interactiveguide {
  position: relative;
  display: block;
  width: 100%;
  float: left;
}
.guide-right {
  float: right;
  width: 49%;
  position: relative;
  text-align: center;
}

.guide-right.face {
  width: 590px !important;
}

.guide-right ul.proc-list {
  position: relative;
  left: -200px;
  top: 90px;
}
ul.proc-list li {
  text-align: right;
}

ul.proc-list li .circle{
  background: url("images/line.png")repeat-x;
  width: 220px;
  height: 1px;
  float: right;
  margin-top: 9px;
  margin-left: 8px;
}
ul.proc-list li .circle:after{
    background: url("images/circle.png") no-repeat center center;
  content: " ";
  width: 19px;
  height: 19px;
  position: absolute;
  right: -16px;
  margin-top: -9px;
  -webkit-transition: all 0.1s ease;
  -moz-transition: all 0.1s ease;
  -ms-transition: all 0.1s ease;
  -o-transition: all 0.1s ease;

}
ul.proc-list li:hover .circle:after , ul.proc-list li.current .circle:after{ 
  background: url("images/c_active.png") no-repeat center center;
  width: 19px;
  height: 19px;

}
ul.proc-list li:hover a , ul.proc-list li.current a{
    font-size: 16px;
  font-weight: bold;

}
ul.proc-list li {
  text-align: right;
  /*position: absolute;*/
}
ul.proc-list li a {
  text-align: right;
  color: #66A7DD;
  text-decoration: none;
   -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
}


/* interactive list BODY*/

li.list1.list {
  position: absolute;
  top: 10px;
  right: -2px;
}
li.list2.list {
   position: absolute;
  top: 29px;
  right: -6px;
}
li.list3.list {
  position: absolute;
  top: 48px;
  right: 44px;
}
li.list4.list {
   position: absolute;
  top: 68px;
  right: 71px;
}
li.list5.list {
  position: absolute;
  top: 115px;
  right: 31px;
}
li.list6.list {
   position: absolute;
  top: 129px;
  right: -34px;
}
li.list7.list {
  position: absolute;
  top: 148px;
  right: -19px;
}

li.list8.list {
  position: absolute;
  top: 196px;
  right: 31px;
}

li.list9.list {
  position: absolute;
  top: 219px;
  right: -46px;
}
li.list10.list {
  position: absolute;
  top: 238px;
  right: -39px;
}
li.list11.list {
  position: absolute;
  top: 258px;
  right: 31px;
}
li.list12.list {
    position: absolute;
    top: 301px;
  right: 46px;
}
li.list13.list {
  position: absolute;
    top: 328px;
  right: 47px;
}
li.list14.list {
  position: absolute;
  top: 175px;
  right: -6px;
}
ul.proc-list li.list1.list .circle {width: 210px;}
ul.proc-list li.list2.list .circle {width: 215px;}
ul.proc-list li.list3.list .circle {width: 165px;}
ul.proc-list li.list4.list span.circle {width: 140px;}
ul.proc-list li.list5.list .circle {width: 180px;}
ul.proc-list li.list6.list .circle {width: 245px;}
ul.proc-list li.list7.list .circle {width: 230px;}
ul.proc-list li.list8.list .circle {width: 180px;}
ul.proc-list li.list9.list .circle {width: 260px;}
ul.proc-list li.list10.list .circle {width: 250px;}
ul.proc-list li.list11.list .circle {width: 180px;}
ul.proc-list li.list12.list .circle {width: 170px;}
ul.proc-list li.list13.list .circle {width: 170px;}
ul.proc-list li.list14.list .circle {width: 218px;}

/* interactive list FACE*/
.guide-right.face ul.proc-list {
  position: relative;
  left: -250px;
  top: 120px;
}

.face li.list1.list {
  position: absolute;
  top: 36px;
  right: 18px;
}
.face li.list2.list {
  position: absolute;
  top: 54px;
  right: 84px;
}
.face li.list3.list {
  position: absolute;
  top: 73px;
  right: 84px;
}
.face li.list4.list {
  position: absolute;
  top: 96px;
  right: 78px;
}
.face li.list5.list {
  position: absolute;
  top: 125px;
  right: 135px;
}
.face li.list6.list {
   position: absolute;
  top: 149px;
  right: 96px;
}
.face li.list7.list {
  position: absolute;
  top: 168px;
  right: 25px;
}
.face li.list8.list {
  position: absolute;
  top: 185px;
  right: 91px;
}

.face li.list9.list {
  position: absolute;
  top: 200px;
  right: 59px;
}
.face li.list10.list {
  position: absolute;
  top: 225px;
  right: 72px;
}
.face li.list11.list {
  position: absolute;
  top: 248px;
  right: 35px;
}
.face li.list12.list {
  position: absolute;
  top: 281px;
  right: 46px;
}
.face ul.proc-list li.list1.list .circle {
  width: 171px;
}
.face ul.proc-list li.list2.list .circle {
  width: 105px;
}
.face ul.proc-list li.list3.list .circle {
  width: 105px;
}
.face ul.proc-list li.list4.list span.circle {
  width: 120px;
}
.face ul.proc-list li.list5.list .circle {
   width: 55px;
}
.face ul.proc-list li.list6.list .circle {
  width: 95px;
}
.face ul.proc-list li.list7.list .circle {
  width: 166px;
}
.face ul.proc-list li.list8.list .circle {
  width: 102px;
}
.face ul.proc-list li.list9.list .circle {
  width: 135px;
}
.face ul.proc-list li.list10.list .circle {
  width: 120px;
}
.face ul.proc-list li.list11.list .circle {
    width: 160px;
}
.face ul.proc-list li.list12.list .circle {
    width: 150px;
}

.headtitle {
  float: left;
  width: 50%;
}
.imgholderbody {
  float: right;
  width: 50%;
  text-align: center;
}
.imgholderbody a i {
  font-size: 18px;
  margin-top: 20px;
  display: inline-block;
}
.guide-right a i {
  font-size: 18px;
  margin-top: 20px;
  display: inline-block;
}
.post-type-archive #main-sidebar-container #main{
  width: 100%;
}
.guide-left {
  float: left;
  width: 50%;
  box-sizing: border-box;
  padding-right: 30px;
}
div#interactiveguide h4 {
  color: #254C5A;
  font-size: 18px;
  font-weight: normal !important;
}
div#interactiveguide h1 {
  color: #254C5A;
  font-size: 42px;
}
.num {
  color: #085673;
  font-size: 14px;
  display: inline;
}
#interactiveguide p{
  color: #254C5A;
}
#interactiveguide.innerguide .guide-right {
  background: url("images/border.png") no-repeat;
  padding-left: 5px;
}
.num p {
  color: #254C5A;
  line-height: 42px;
}
.num strong {
  color: #fff;
  background: rgb(102, 167, 221);
  padding: 9px 14px;
  border-radius: 60px;
  margin-right: 5px;
  font-size: 18px;
}
/* testimonials */
#testimonials{color:#6badde; padding-bottom: 30px;}
#testimonials h3{margin-top: 20px; text-align:center; color:#6badde; font:700 31px 'Fira Sans', Tahoma, sans-serif; margin-bottom:30px;}
#testimonials a{font:400 21px 'Fira Sans', Tahoma, sans-serif;}
.testimonial-block{width:49%; margin-bottom:30px;}
.testimonial-block p{float:right; width:67%; font:400 14px 'Fira Sans', Tahoma, sans-serif; padding-bottom:12px}
.testimonial-block img{float:left}

/* gravity forms */
#gform_1{background:#b0c7e7; padding:10px; overflow:hidden; margin-top:-10px}
#gform_1 h3{color:#fff !important; padding:0 !important; margin:0 !important;}
.ginput_container input, .ginput_container textarea{width:98% !important; border:none; border-radius:0; font:300 12px 'Fira Sans', Tahoma, sans-serif !important; font-style:italic; text-indent:10px;}
.ginput_container textarea{height:62px !important;}
.gform_wrapper .gform_footer{margin:0 !important; padding:0 !important;}
.gform_wrapper .gform_footer input{background:#6badde; float:right; border-radius:0; border:1px solid #fff;}

/* footer */
#footer-widgets-container{background:url(images/bg-footer-widget.jpg) repeat-x; border-top:35px solid #b1c9e9;}
#footer-widgets{border:none;}
#footer-widgets .block h3{color:#6badde; font:500 16px 'Fira Sans', Tahoma, sans-serif; text-transform:uppercase;}
#footer-widgets .block .textwidget p, #footer-widgets .block ul li a{color:#6badde; font:300 15px 'Fira Sans', Tahoma, sans-serif;}
#footer-widgets .block ul{list-style:none}
#footer-container{background:#b1c9e9;}
#footer{border:none; padding: 10px 0 0;}
#copyright a, #copyright p{font:400 14px 'Fira Sans', Tahoma, sans-serif; color:#fff;}

@media only screen and (max-width:1230px) {
  .blue-boxes iframe{height: 303px;  width: 88%;}
}
@media only screen and (max-width:1150px) {
  .blue-boxes iframe{height: 275px;  width: 88%;}
ul.proc-list li.list1.list .circle {width: 105px;}
ul.proc-list li.list2.list .circle {width: 105.5px;}
ul.proc-list li.list3.list .circle {width: 82.5px;}
ul.proc-list li.list4.list span.circle {width: 70px;}
ul.proc-list li.list5.list .circle {width: 90px;}
ul.proc-list li.list6.list .circle {width: 122.5px;}
ul.proc-list li.list7.list .circle {width: 115px;}
ul.proc-list li.list8.list .circle {width: 90px;}
ul.proc-list li.list9.list .circle {width: 130px;}
ul.proc-list li.list10.list .circle {width: 125px;}
ul.proc-list li.list11.list .circle {width: 90px;}
ul.proc-list li.list12.list .circle {width: 85px;}
ul.proc-list li.list13.list .circle {width: 85px;}
ul.proc-list li.list14.list .circle {width: 109px;}
}
@media only screen and (max-width:1060px) {
  .blue-boxes iframe{height: 252px;  width: 88%;}
}
@media only screen and (max-width:1000px) {
  .blue-boxes iframe{height: 237px;  width: 88%;}
}
@media only screen and (max-width:860px) {
  .blue-boxes iframe{height: 202px;  width: 88%;}
}
@media only screen and (max-width:768px) {
  .blue-boxes iframe{height: 178px;  width: 88%;}
}
@media only screen and (min-width:768px) {
  ul.nav li a {
    display: block;
    padding-top: .8em !important;
    padding-bottom: .8em !important;
  }
}
@media only screen and (min-width: 814px) and (max-width:1180px) {
#news a img {  width: 60%;}
#news .mag {  margin-right: 5px;  width: 30%;}
}

@media only screen and (min-width: 768px) and (max-width: 960px) {
#logo {  float: left;  max-width: 100%;  width: 40%;}
}
/* ipad landscape */
@media (max-device-width: 1024px) and (orientation: landscape) {
.feature{width: 19%; margin-right:1.2%;}
.wp-image-204{max-width:30%;}
#logos {text-align:center}
.news-block{width:45%;}
.news-block img{width:45%;}
.testimonial-block p{width: 60%;}
.blue-boxes h3{font: 500 18px "Fira Sans",Tahoma,sans-serif;}
}

/* ipad portrait */
@media (min-device-width: 768px) and (orientation: portrait) {
#logo img{max-width: 90%;}
.header-widget{width: 39%;}
#header h5{font:400 18px "Fira Sans",Tahoma,sans-serif;}
#header .btn{font: 400 18px "Fira Sans",sans-serif;}
.feature{width: 19%; margin-right:1.2%;}
.feature-title a{font: 300 20px "Fira Sans",Tahoma,sans-serif;}
#news{background-size:contain; text-align:center}
.news-block{width:100%; float:none; margin-bottom:10px}
#news a{margin-top:10px;}
.blue-boxes img {margin-bottom: 10px;}
.blue-boxes h3{font: 500 16px "Fira Sans",Tahoma,sans-serif;}
#bottom-section{padding-bottom:0;}
.testimonial-block{width: 100%; text-align:center;}
.testimonial-block p{width: 100%; float:none}
.testimonial-block img{float:none; margin-bottom:15px}
#footer-widgets-container{background-size:contain;}
}

/* phone landscape */
@media (max-device-width: 640px) and (orientation: landscape) {
.feature-title{left: 35%;}
.blue-boxes{height:500px; margin-bottom:50px; background-size:cover;}
}
/* phone portrait */
@media only screen and (max-width: 639px) {
#header-wrap{position:static; text-align:center}
#wrapper {overflow-y: hidden;}
#header-gap, .shadow, #nav-container h3  {display:none} 
ul.nav li{background:none; border-top:1px solid #242a37;}
ul.nav li a{text-align:left; line-height:25px; color:#c4ccda; text-transform:capitalize; font-size:15px; border-top:1px solid #3e4555; font-family:Arial; font-weight:bold}
#navigation{background:#32394a !important;} 
ul.nav li.current_page_item a, ul.nav li.current_page_parent a, ul.nav li.current-menu-ancestor a, ul.nav li.current-cat a, ul.nav li.current-menu-item a, ul#main-nav > li a:hover, #navigation ul.nav>li:hover{background:none !important; color:#c4ccda; font-weight:bold !important; text-decoration:none; font-family:Arial !important;}
.social-media, #header h3, #header h5, #header .btn, .feature{float:none !important; display:inline-block; margin:0;}
#header h5{font:400 16px "Fira Sans",Tahoma,sans-serif;}
#header .btn{font: 400 18px "Fira Sans",sans-serif;}
.feature{width:100%;}
.feature-title{left: 27%;}
#feature-container{background-size:contain}
#content-container h2{font:500 45px "Fira Sans",Tahoma,sans-serif !important; clear:both;}
#logos, #news {text-align:center} 
.news-block{width:100%; margin-bottom:25px}
#news{background-size:cover}
#news a{margin-top:-15px; display:block;}
.news-block img{margin-top:15px}
#blue-boxes-section{margin-top:60px}
.blue-boxes{width:74%; height: 350px; margin: 0 auto;}
.blue-boxes h3{font: 500 20px "Fira Sans",Tahoma,sans-serif;}
.blue-boxes img {margin-bottom: 10px;}
#beauty-bar-box{background:none; text-align:center; margin-bottom:50px;}
#img-cartoon {position:static; max-width: 100%; margin-top:-70px; margin-bottom:20px;} 
#beauty-bar-content{width:100%; float:none}
.testimonial-block{width: 100%; text-align:center;}
.testimonial-block p{width: 100%; float:none}
.testimonial-block img{float:none; margin-bottom:15px}
#footer-widgets-container{background-size:contain}
#img-cartoon {
  position: static;
  max-width: 100%;
  margin-top: 10px;
  margin-bottom: 20px;
  max-width: 50%;
  left: 0;
  width: 65%;
  float: none;
} 
}


@media only screen and (max-width: 1070px){
.blue-boxes h3 {
  font: 500 18px 'Fira Sans', Tahoma, sans-serif;
  }
}
@media only screen and (max-width: 1000px){
  .guide-left {
    float: left;
    width: 49%;
    box-sizing: border-box;
    padding-right: 30px;
  }
  .guide-right {
    float: right;
    width: 49%;
    position: relative;
    text-align: center;
  }
}
@media only screen and (max-width: 950px){
  #main-sidebar-container #main > img{
    width: 40% !important;
  }
/* .page-id-740 #header #footer-widgets-container, .page-id-739 #footer-widgets-container {width:60%} */
  /* #footer-widgets-container {background: url(images/bg-footer-widget.jpg) repeat-x bottom;} */
.guide-left {
    float: left;
    width: 90%;
    box-sizing: border-box;
    padding-right: 30px;
  }
  .guide-right {
    float: right;
    width: 80%;
    position: relative;
    text-align: center;
	background:none !important;
  }
}
@media only screen and (max-width: 860px){
.blue-boxes h3 {
  color: #898989;
  font: 500 14px 'Fira Sans', Tahoma, sans-serif;
  margin-top: 5px;
  }
  .blue-boxes { height: 357px;}
  img.alignright.size-full.wp-image-204.no-border {
    margin-left: 15%;
  }
}

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

.header-widget {
 width: 50%;
  float: right;
  clear: none;
  }
div#logo {
  width: 50%;
  float: left;
  } 
}
@media only screen and (max-width: 710px){
  .guide-left {
    float: left;
    box-sizing: border-box;
    padding-right: 30px;
      margin-bottom: 30px;
  }
  .guide-right {
    float: right;
    width: 100%;
    position: relative;
    text-align: center;
    margin-right: -120px;
  }
  /* body.page-template-template-interactive-guide-body, body.page-template-template-interactive-guide-face{min-width: 700px;} */
div#content-area {
    padding: 0 40px;
}
}
@media only screen and (max-width: 670px){
  img.alignright.size-full.wp-image-204.no-border {
    margin-left: 5%;
  }
}
@media only screen and (max-width: 670px){
  .blue-boxes {
    height: 260px;
  }
  #main-sidebar-container #main > img {
      margin-bottom: 20px !important;
      margin-left: 20%;
      margin-top: 15px !important;
      width: 60% !important;
  }
}
@media only screen and (max-width: 645px){
  .blue-boxes iframe {
    height: 154px;
    width: 88%;
  }
  .feature-title {
      left: 34%;
  }

  img.alignright.size-full.wp-image-204.no-border {
      float: left;
      margin-left: 0%;
  }
}
@media only screen and (max-width: 639px){
  .blue-boxes {
     background: rgba(0, 0, 0, 0) url("images/bg-img.png") no-repeat scroll 0 0 / contain ;
    float: left;
    padding-top: 22px;
    text-align: center;
    height: 340px;
    margin: 0 auto;
    width: 50%;
     margin-left: 25%;
  }
  .blue-boxes iframe {
    height: 210px;
    width: 88%;
  }
#header {width: 80%;}
.guide-right.face {left: 120px !important;}
}
@media only screen and (max-width: 540px){
 .blue-boxes {
     background: rgba(0, 0, 0, 0) url("images/bg-img.png") no-repeat scroll 0 0 / contain ;
    float: left;
    padding-top: 22px;
    text-align: center;
    height: 340px;
    margin: 0 auto;
    width: 60%;
     margin-left: 25%;
  }
  .blue-boxes iframe {
    height: 214px;
    width: 88%;
  }
}
@media only screen and (max-width: 510px){
  .blue-boxes {
    background: rgba(0, 0, 0, 0) url("images/bg-img.png") no-repeat scroll 0 0 / contain;
    float: left;
    padding-top: 22px;
    text-align: center;
    height: 320px;
    margin: 0 auto;
    width: 270px;
    margin-left: 21%;
  }
/* .page-id-740 #header, .page-id-739 #header {width: 50%;} */
}
@media only screen and (max-width: 510px){
  .header-widget {  width: 100%;  float: right;  clear: none;}
  div#logo {  width:100%;  float: left;} 
}
@media only screen and (max-width: 440px){
  .blue-boxes {
    margin-left: 16%;
  }
}
@media only screen and (max-width: 390px){
  .blue-boxes {
    margin-left: 9%;
  }
}
@media only screen and (max-width: 350px){
  .blue-boxes {
      margin-left: 3%;
  }
}


.half-width,.one-third,.two-third{vertical-align: top; display: inline-block;}
.loading-item{min-height: 40px; width: 100%; max-width: 100%; background: url(https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.16.1/images/loader-large.gif) center no-repeat; }
#video_thumb_gallery .video-carousel{margin-top: 0;}
.vid_below{margin-top: 30px;padding-top: 21px;}
.vid_top h1{margin-bottom: 20px;}
#video_thumb_gallery,
.vid_below{background-color: transparent;}
@media only screen and (min-width:768px) {
  .half-width{max-width: 48%; width:48%; margin-right: 1%;}
  .one-third{max-width: 28%; width:28%; margin-right: 1%;}
  .two-third{max-width: 58%; width:58%; margin-right: 1%;}
  .half-width.last{margin-right: 0;}
  .one-third.last{margin-right: 0;}
  .two-third.last{margin-right: 0;}
}

@media only screen and (min-width: 1060px) and (max-width: 1130px){
  ul.nav li a {   font: 300 14px 'Fira Sans', Tahoma, sans-serif;  }
}
@media only screen and (min-width: 960px) and (max-width: 1060px){
  ul.nav li a {   font: 300 13px 'Fira Sans', Tahoma, sans-serif;   padding: 0.5em 0.6em; }
}
@media only screen and (min-width: 820px) and (max-width: 959px){
  ul.nav li a {   font: 300 12px 'Fira Sans', Tahoma, sans-serif;   color: #fff;   text-transform: uppercase;   padding: 0.5em 0.5em;  }
  #navigation .nav li.parent > a:after{    display: none;  }
}
@media only screen and (min-width: 768px) and (max-width: 821px){
  ul.nav li a {   font: 300 12px 'Fira Sans', Tahoma, sans-serif;   color: #fff;   text-transform: uppercase;   padding: 0.5em 0.5em;  }
  #navigation .nav li.parent > a:after{    display: none;  }
}
h1 {margin-bottom: 15px;}