/*
Theme Name: Adult Creative
Description: Theme for Adult Creative, January 2015.
Template: wordpress-bootstrap-master
Version: 0.0.1
Author: Adult Creative, JB
*/
@font-face {
    font-family: 'journalregular';
    src: url('fonts/journal-webfont.eot');
    src: url('fonts/journal-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/journal-webfont.woff') format('woff'),
         url('fonts/journal-webfont.ttf') format('truetype'),
         url('fonts/journal-webfont.svg#journalregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'bree_serifregular';
    src: url('fonts/BreeSerif-Regular-webfont.eot');
    src: url('fonts/BreeSerif-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/BreeSerif-Regular-webfont.woff2') format('woff2'),
         url('fonts/BreeSerif-Regular-webfont.woff') format('woff'),
         url('fonts/BreeSerif-Regular-webfont.ttf') format('truetype'),
         url('fonts/BreeSerif-Regular-webfont.svg#bree_serifregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'harabara_maisharabaramaisdemo';
    src: url('fonts/Harabara Mais Demo-webfont.eot');
    src: url('fonts/Harabara Mais Demo-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Harabara Mais Demo-webfont.woff2') format('woff2'),
         url('fonts/Harabara Mais Demo-webfont.woff') format('woff'),
         url('fonts/Harabara Mais Demo-webfont.ttf') format('truetype'),
         url('fonts/Harabara Mais Demo-webfont.svg#harabara_maisharabaramaisdemo') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'blue_highwayregular';
    src: url('fonts/blue highway rg-webfont.eot');
    src: url('fonts/blue highway rg-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/blue highway rg-webfont.woff2') format('woff2'),
         url('fonts/blue highway rg-webfont.woff') format('woff'),
         url('fonts/blue highway rg-webfont.ttf') format('truetype'),
         url('fonts/blue highway rg-webfont.svg#blue_highwayregular') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'libel_suitregular';
    src: url('fonts/libelsuit-webfont.eot');
    src: url('fonts/libelsuit-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/libelsuit-webfont.woff2') format('woff2'),
         url('fonts/libelsuit-webfont.woff') format('woff'),
         url('fonts/libelsuit-webfont.ttf') format('truetype'),
         url('fonts/libelsuit-webfont.svg#libel_suitregular') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'intro_inlineregular';
    src: url('intro_inline-webfont.eot');
    src: url('intro_inline-webfont.eot?#iefix') format('embedded-opentype'),
         url('intro_inline-webfont.woff2') format('woff2'),
         url('intro_inline-webfont.woff') format('woff'),
         url('intro_inline-webfont.ttf') format('truetype'),
         url('intro_inline-webfont.svg#intro_inlineregular') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'intro_regular';
    src: url('intro-webfont.eot');
    src: url('intro-webfont.eot?#iefix') format('embedded-opentype'),
         url('intro-webfont.woff2') format('woff2'),
         url('intro-webfont.woff') format('woff'),
         url('intro-webfont.ttf') format('truetype'),
         url('intro-webfont.svg#intro_regular') format('svg');
    font-weight: normal;
    font-style: normal;

}
/*COMMON Styles*/
a:hover{text-decoration: none;}
a.twitter-timeline {color: white;}
body{padding: 0; font-family: 'Lato', sans-serif; font-weight: 300; background: #000; position: relative;}
.clearfix{z-index: 0; padding: 0; margin: 0;}
.bg-container{position: relative; width: 100%; overflow: hidden; z-index: 0; height: 100vh;}
.bg-container .south{padding: 10px; color: #f00; background: none; position: absolute; bottom: 110px; left:50%; right:0; width: 80px; height: 80px;}
.bg-container .south img.red{width: 100%; position: absolute; bottom: 0; left: -50%; opacity: 1; z-index: 999; transition: 0.6s all; -webkit- transition: 0.6s all; -o- transition: 0.6s all; -moz- transition: 0.6s all; -ms- transition: 0.6s all;}
.bg-container .south img.white{ width: 100%; position: absolute; bottom: 0%; left: -50%; opacity: 0; z-index: 999;transition: 0.6s all; -webkit- transition: 0.6s all; -o- transition: 0.6s all; -moz- transition: 0.6s all; -ms- transition: 0.6s all;}
.bg-container .south:hover img.red{  opacity: 0;}
.bg-container .south:hover img.white{ opacity: 1;}
.easingslider-214 .easingslider-image{height: auto!important; width: 100%!important;}
.easingslider-214 .easingslider-viewport{height: 100%;}
.mac_container{position: absolute; bottom: 110px; background: none; }
.easingslider-slide{background: none!important;}

.tiny_slider{position: absolute; background: #000; bottom: 0; width: 100%;}
#tchsp{margin: 20px 0!important;}
#tchsp ul li img{width: 100%;}
#tchsp ul li{border: 0px solid #fff!important;}
#tchsp .buttons{background: #333!important; display: none!important;}

.contact-form{background: red; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 999; height: 100%; min-height: 1000px;}
.contact-form h2{font-weight: 300; text-transform: uppercase; text-align: center; margin-bottom: 0px; color: white;}
.contact-form div{margin-top: 2%;}
.contact-form div input{width: 100%; background: #f00; border-radius: 10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; border: solid medium #fff; padding: 10px; font-weight: 400; text-transform: uppercase;}
.contact-form div input:focus{background: #fff; color: #f00;}
.contact-form div textarea{width: 100%; background: #f00; border-radius: 10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; border: solid medium #fff; padding: 10px; font-weight: 400; text-transform: uppercase;}
.contact-form input[type="submit"]{width: 100%; background: #f00; color: #fff; border: solid medium #fff; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; }
.contact-form input[type="submit"]:hover{width: 100%; background: #fff; color: #f00; border: solid medium #fff;}

.contact-form #close-form{width: 10%; margin: 5% auto 0; float: none; text-align: center;}
.contact-form .glyphicon-remove-circle{color: #fff; font-size: 40px; opacity: 0.6; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s;}
.contact-form .glyphicon-remove-circle:hover{color: #fff; font-size: 40px; opacity: 1; cursor: pointer;}


.contact-form ::-webkit-input-placeholder { /* WebKit browsers */
    color:    #fff;
    text-transform: uppercase;
    font-weight: 400;
}
.contact-form :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #fff;
   opacity:  1;
   text-transform: uppercase;
}
.contact-form ::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #fff;
   opacity:  1;
   text-transform: uppercase;
}
.contact-form :-ms-input-placeholder { /* Internet Explorer 10+ */
   color:    #fff;
   text-transform: uppercase;
}

/* SLIDER Styles */
.metaslider{max-width: 100%!important;}
.flex-viewport {width: 100%;}

/*HEADER Styles*/
.top-bar{position: fixed; width: 100%; background: none; height: 70px; z-index: 88; top: 0; font-family: 'Lato', sans-serif;}
.top-bar img{height: 100px;}
.top-bar .telephone{text-align: center; font-size: 30px; line-height: 70px; color: #f00;}
.top-bar .view_more{ padding: 10px; line-height: 44px; color: #fff; background: #f00; text-align: center; border: medium solid #fff; text-transform: uppercase; transition: all 0.7s; -webkit-transition: all 0.7s; -o-transition: all 0.7s; -moz-transition: all 0.7s; -ms-transition: all 0.7s;}
.top-bar .view_more:hover{background: #fff; color: #f00; border: medium solid #f00;}
header{ width: 100%; color: #fff;}
.contact-btn{background: #d4b656; border: solid medium #2f2d2d; text-align: center; z-index: 4; color: #2f2d2d; position: fixed; bottom: -4px; right: 5%; padding: 10px 20px 0; border-radius: 5px 5px 0 0; transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s;}
.contact-btn:hover{cursor: pointer; background: #2f2d2d; border: solid medium #d4b656; color: #d4b656; transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; }
.contact-btn p{font-size: 16px; font-weight: 300; letter-spacing: -1px; text-transform: uppercase;}

header .logo{background: url('images/menu.jpg') no-repeat; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; z-index: 4;}
header .logo:hover{ transition: all 1s; -webkit-transition: all 1s; -moz-transition: all 1s;}
header .logo img{margin-left: -15px; opacity: 1; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s;}
header .logo:hover img{opacity:0; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s;}

.nav-panel{position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; background : url('images/bg_trans_red.png'); z-index: 999;}
.nav-panel #close{width: 10%; margin: 5% auto 0; float: none; text-align: center;}
.nav-panel .glyphicon-remove-circle{color: #fff; font-size: 40px; opacity: 0.6; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; left: 6px;}
.nav-panel .glyphicon-remove-circle:hover{color: #fff; font-size: 40px; opacity: 1; cursor: pointer;}

.nav-menu .navbar-nav{float: none; width: 100%; margin: 20% auto 0;}
.nav-menu .navbar-nav li{float: none; width: 100%; text-align: left;}
.nav-menu .navbar-nav li:hover{background: none;}
.nav-menu .navbar-nav li a{position: relative; color: #fff;  font-size: 24px; font-weight: 400; font-family: 'blue_highwayregular'; transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s;}
.nav-menu .navbar-nav li a:hover{background:none; color: #d4b656; }
.nav-menu .navbar-nav li a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: 0;
  left: 0;
  background-color: #d4b656;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}
.nav-menu .navbar-nav li a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
.navbar-nav>li>.dropdown-menu {background: #2f2d2d; } 
.navbar-nav>li>.dropdown-menu a{width: 90%; display: block; font-size: 22px; padding: 10px 5px; position: relative; white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word}
.navbar-nav>li>.dropdown-menu a:focus, .nav-menu .navbar-nav li a{background: none;}
.nav .open>a, .nav .open>a:hover, .nav .open>a:focus{background: none;}

.nav-menu{position: fixed; width: 200px; height: 100%; top: 0; right: -200px; background: #2f2d2d; z-index: 99; border-left: solid medium #d4b656;}
.nav-menu .toggle-btn{position: absolute; top: 0; left: -72px; width: 70px; height: 70px; background: #2f2d2d; color: #fff; padding:5px 10px;}
.nav-menu .toggle-btn:hover{cursor: pointer; color: #eee;}
.nav-menu .toggle-btn p{font-size: 40px; text-align: center; padding: 0; margin: 0;}

.nav-menu .contact-us{position: absolute; bottom: 0; left: 10px; right: 0; text-transform: uppercase; font-size: 12px; text-align: left;}
.nav-menu .contact-us a{color: #fff; font-size: 16px;}
.nav-menu .contact-us a:hover{color: #d4b656; font-size: 16px;}

#boxes{height: 90vh; max-height: 700px;}
#boxes div{height: 100%; padding: 0;}
#boxes .item{height: 50%; padding: 3px;}
#boxes .item div{overflow:hidden;}
#boxes .item div img{width: 100%; position: relative; margin: 0; transition: all 0.5s ease-in; -webkit-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in ; -moz-transition: all 0.5s ease-in; -ms-transition: all 0.5s ease-in;}
#boxes .item div img:hover{width:105%; margin-left: -2.5%;}
#boxes .item div h4{font-size: 20px; color: #fff; text-transform: uppercase; border-bottom: solid thin #fff; padding: 0 5px 12px;}
#boxes .itema{height: 100%;}
#boxes .itema div{background: none; padding:0; overflow:hidden;}
#boxes .itema div img{width: 100%;}

/*WEB DESIGN PAGE*/
.web-container{min-height:100vh; overflow: auto; padding: 0;}
#webdesign_text{ font-size: 18px; font-family:'blue_highwayregular'; text-align: center; padding-top: 1%; color: #fff; position: relative;}
#webdesign_text article{ text-align: justify;}
#webdesign_text article h1{font-size: 70px; font-family: 'Lato', sans-serif; text-transform: uppercase; text-align: center;}

.webdesign-header{height: 100vh; position: realtive;}
.bg-red{background: #f00; height: 100vh;}
.webdesign-header div{position: absolute; bottom: 5%; background: #f00; border: solid medium #fff;}
.webdesign-header div p{text-align: justify; padding-top: 10px; font-size: 20px; color: #fff; font-family:'blue_highwayregular';}

.web_section{ font-family: 'Lato'; overflow: auto;}
.link-block{margin-top: 0; padding: 0;}
 .link-block div{ margin-right: 2%; padding: 10px; line-height: 44px; color: #fff; background: #d4b656; text-align: center; border: medium solid #222; text-transform: uppercase; transition: all 0.7s; -webkit-transition: all 0.7s; -o-transition: all 0.7s; -moz-transition: all 0.7s; -ms-transition: all 0.7s;}
.link-block:hover div{background: #111; color: #d4b656; border: medium solid #d4b656;}
.one, .three, .five{width: 100%; padding: 5%; font-family: 'Lato', sans-serif;  text-align: justify; overflow: auto; background: #222;}

div.two, div.four, div.six{ background: #000; width: 100%; color: #fff; font-family: 'Lato'; text-align: justify; padding: 10px; overflow: auto;}

.one h3{font-size: 30px; }
.one img{vertical-align: middle; width: 100%;}

.two h3{font-size: 70px; text-align: center; font-family: 'Lato', sans-serif; text-transform: uppercase;}
.two img{vertical-align: middle; width: 100%;}

.three h3{font-size: 30px; }
.three img{vertical-align: middle; width: 100%;}

.four h3{font-size: 30px; text-align: right; }
.four img{vertical-align: middle; width: 100%;}

.five h3{font-size: 30px; }
.five img{vertical-align: middle; width: 100%;}

.six h3{font-size: 30px; text-align: center; }

.six div input{width: 100%; background: #f00; border-radius: 10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; border: solid medium #fff; padding: 10px; font-weight: 400; text-transform: uppercase;}
.six div input:focus{background: #fff; color: #f00;}
.six div textarea{width: 100%; background: #f00; border-radius: 10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; border: solid medium #fff; padding: 10px; font-weight: 400; text-transform: uppercase;}
.six input[type="submit"]{width: 100%; background: #f00; color: #fff; border: solid medium #fff; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; }
.six input[type="submit"]:hover{width: 100%; background: #fff; color: #f00; border: solid medium #fff;}
.six ::-webkit-input-placeholder { /* WebKit browsers */
    color:    #fff;
    text-transform: uppercase;
    font-weight: 400;
}
.six :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #fff;
   opacity:  1;
   text-transform: uppercase;
}
.six ::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #fff;
   opacity:  1;
   text-transform: uppercase;
}
.six :-ms-input-placeholder { /* Internet Explorer 10+ */
   color:    #fff;
   text-transform: uppercase;
}

/*HOSTING*/

.hosting-container{height: 100vh; width: 100%; background: #000;}
.hosting-container .holder{margin-top: 200px;}
.hosting-container div{padding: 10px;}
.hosting-container .package{border: solid thin #d4b656; background: #222; color: #fff; border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -moz-border-radius: 5px;  -ms-border-radius: 5px; transition: 0.6s all; -webkit- transition: 0.6s all; -o- transition: 0.6s all; -moz- transition: 0.6s all; -ms- transition: 0.6s all;}
.hosting-container .package h3{text-align: center; color: #d4b656; font-weight: 200; text-transform: uppercase; transition: all 0.6; transition: 0.6s all; -webkit- transition: 0.6s all; -o- transition: 0.6s all; -moz- transition: 0.6s all; -ms- transition: 0.6s all;}
.hosting-container .package h3 span{font-weight: 400;}

.hosting-container .holder:hover{}
.hosting-container .holder:hover .package{opacity: 0.4;}
.hosting-container .holder:hover .package:hover{opacity: 1;}
.hosting-container .package:hover {background: #d4b656; border-radius: 10px 0px 10px 10px;}
.hosting-container .package:hover h3{color: #222; font-weight: 300;}


/*PORTFOLIO*/
.portfolio-container{ min-height: 100vh; width: 100%; overflow: hidden; position: relative; text-align: center; perspective: 1px;}
.portfolio-container img{ height: 100%; width: auto; position: relative; left: 100%; margin-left: -200%;}
.portfolio-container div.bottom-bar{ }

#1{min-height: 50vh;}

.portfolio-container .south{padding: 10px; color: #f00; background: none; position: absolute; bottom: 10px; left:50%; right:0; width: 80px; height: 80px;}
.portfolio-container .south img.red{width: 100%; position: absolute; margin-left: -50%; bottom: 0; left: 0; opacity: 1; transition: 0.6s all; -webkit- transition: 0.6s all; -o- transition: 0.6s all; -moz- transition: 0.6s all; -ms- transition: 0.6s all;}
.portfolio-container .south img.white{ width: 100%; position: absolute; margin-left: -50%; bottom: 0%; left: 0; opacity: 0; transition: 0.6s all; -webkit- transition: 0.6s all; -o- transition: 0.6s all; -moz- transition: 0.6s all; -ms- transition: 0.6s all;}
.portfolio-container .south:hover img.red{  opacity: 0;}
.portfolio-container .south:hover img.white{ opacity: 1;}
.portfolio-container .south:hover img.last{
-webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

.post_content{color: #fff; margin-top: 10%;}

.web-port-menu{width: 100%;}
.web-port-menu ul{position: relative; padding: 10px 0 0; margin: 20px 0 0; list-style: none; -webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-margin-start: 0; -webkit-margin-end: 0; -webkit-padding-start: 0;}
.web-port-menu ul li{background: none; text-align: center; position: relative; height: 400px;}
.web-port-menu ul li a{color: #333; font-weight: 400; font-size: 18px; text-transform: uppercase; }

.portfolio-item{ position: relative; height: 400px; margin-bottom: 10px; text-transform: uppercase;}
.portfolio-item .portfolio-item-img1{height: 100%;}
.portfolio-item .portfolio-item-txt1{background: #d4b656; height: 100%; color: #222;}
.portfolio-item .portfolio-item-txt1 ul li{height: auto; list-style: initial; text-align: left; font-size: 12px;}
.portfolio-item .portfolio-item-txt1 p{margin-top: 100px; font-size: 12px; text-align: center;}
.portfolio-item .portfolio-item-txt1 p span{font-size: 20px; display: block; padding-bottom: 10px; margin-bottom: 10px; border-bottom: solid thin #ddd; text-align: center;}
.portfolio-item .portfolio-item-img{height: 100%;}
.portfolio-item .portfolio-item-txt{background: #222; height: 100%; color: #d4b656;}
.portfolio-item .portfolio-item-txt ul li{height: auto; list-style: initial; text-align: left; font-size: 12px;}
.portfolio-item .portfolio-item-txt p{margin-top: 100px; font-size: 12px; text-align: center;}
.portfolio-item .portfolio-item-txt p span{font-size: 20px; display: block; padding-bottom: 10px; margin-bottom: 10px; border-bottom: solid thin #ddd; text-align: center;}
.portfolio-item .portfolio-item-txt p span.view-case{font-size: 18px; display: block; padding: 10px; margin-bottom: 10px; border: solid thin #ddd; text-align: center;}
.portfolio-item .portfolio-item-txt p span.view-case:hover{font-size: 18px; display: block; padding-bottom: 10px; margin-bottom: 10px; border: solid thin #d4b656; text-align: center; color: #ddd;}
.portfolio-header{position: relative;}
.portfolio-header div{position: absolute; top: 70%; text-align: center; }
.portfolio-header div p{text-align: center; font-size: 20px; text-transform: uppercase; background: #fff; color: #222; padding: 20px;}

.portfolio-header div p.south{ color: #f00; background: none; position: absolute; bottom: -140px; left:50%; right:0; width: 80px; height: 80px;}
.portfolio-header div p.south img.red{width: 100%; position: absolute; bottom: 0; left: -50%; opacity: 1; transition: 0.6s all; -webkit- transition: 0.6s all; -o- transition: 0.6s all; -moz- transition: 0.6s all; -ms- transition: 0.6s all;}
.portfolio-header div p.south img.white{ width: 100%; position: absolute; bottom: 0%; left: -50%; opacity: 0; transition: 0.6s all; -webkit- transition: 0.6s all; -o- transition: 0.6s all; -moz- transition: 0.6s all; -ms- transition: 0.6s all;}
.portfolio-header div p.south:hover img.red{  opacity: 0;}
.portfolio-header div p.south:hover img.white{ opacity: 1;}



.web-port-menu .hidden2{opacity: 0; }
.web-port-menu .visible2{opacity: 1;}

/*
.portfolio-item{ position: relative;}
.portfolio-item div{ position: absolute; color: #fff; bottom: -100%; left: 0; width: 100%; height: 100%; transition: all 0.7s; -webkit-transition: all 0.7s; -moz-transition: all 0.7s; -ms-transition: all 0.7s; -o-transition: all 0.7s;}
.portfolio-item div p{width: 50%; margin: 175px auto 0; height: 50px; color: #222; position: relative; overflow: hidden;}
.portfolio-item div p span{position: absolute; width: 100%; text-align: center; border: solid thin #fff; padding: 10px 0; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px;  transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s;}
.portfolio-item div p span.ace{bottom: 0%; left:0; color: #fff; font-size: 12px;}
.portfolio-item div p span.king{bottom: -100%; left:0; background: #fff; color: #222; font-size: 12px;}
.portfolio-item div p:hover span.ace{ bottom: -100%; left:0; }
.portfolio-item div p:hover span.king{bottom: 0%; left:0}
.portfolio-item div.first{bottom: 0; background: none; }
.portfolio-item:hover div.first{ bottom: 100%; }
.portfolio-item div.second{bottom: -100%; background: url('images/trans_bg_red_dark.png') left top;}
.portfolio-item:hover div.second{ bottom: 0;}
*/


#portfolio_text{margin-top: 5%; font-family: 'blue_highwayregular'; font-size: 20px; text-align: justify;}
 .link-to-website{ margin-top: 0; padding: 10px; line-height: 44px; color: #111; background: #d4b656; text-align: center; border: medium solid #111; text-transform: uppercase; transition: all 0.7s; -webkit-transition: all 0.7s; -o-transition: all 0.7s; -moz-transition: all 0.7s; -ms-transition: all 0.7s;}
.link-to-website:hover{background: #111; color: #d4b656; border: medium solid #d4b656;}

/*TEXT PAGE*/
.bg-container1{min-height: 100vh;}
.bg-container1 .text-left{margin-top:10%; margin-bottom: 50px;}
.bg-container1 .text-left h1, .bg-container .text-left h2, .bg-container .text-left h3{text-transform: uppercase; font-family: 'blue_highwayregular';}
.bg-container1 .text-left h1{font-size: 40px;}

/*INTERNET MARKETING*/
.internet_marketing{position: relative; background: #fff; padding: 0;}
.internet_marketing .section{ text-align: center; background: #fff; padding-top: 100px; min-height: 1000px;transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out;  -moz-transition: all 0.5s ease-in-out;  -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; }
.internet_marketing .section:hover{ text-align: center; background: #f00; transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out;  -moz-transition: all 0.5s ease-in-out;  -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; }
.internet_marketing .section h3{text-align: center; color: #f00; font-weight: 300; font-size: 16px; text-transform: uppercase; transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out;  -moz-transition: all 0.5s ease-in-out;  -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out;}
.internet_marketing .section:hover h3{text-align: center; color: #fff; font-weight: 300; font-size: 16px; text-transform: uppercase; transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out;  -moz-transition: all 0.5s ease-in-out;  -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out;}
.internet_marketing .section img.red{opacity: 0; width: 70%; margin: -80% auto 0; transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out;  -moz-transition: all 0.2s ease-in-out;  -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out;}
.internet_marketing .section:hover img.red{ opacity: 1; transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out;  -moz-transition: all 0.2s ease-in-out;  -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out;}
.internet_marketing .section img.white{opacity: 1; width: 70%; margin: 0 auto; transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out;  -moz-transition: all 0.2s ease-in-out;  -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out;}
.internet_marketing .section:hover img.white{ opacity: 0;  transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out;  -moz-transition: all 0.2s ease-in-out;  -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out;}
.internet_marketing .section .text_area{ text-align: justify; color: #222;  transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out;  -moz-transition: all 0.5s ease-in-out;  -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out;}
.internet_marketing .section:hover .text_area{ text-align: justify; color: #fff; }

/* ESCORT TEMPLATES */

.template-cont{min-height: 600px; padding: 0; padding: 110px 0 0; width: 100%; margin: 0 auto; text-align: center; float: none; overflow: auto;}
.template-cont h1{font-size: 36px; font-family: 'Lato', sans-serif; text-transform: uppercase; text-align: center; color: #fff;}
.template-list-item{ overflow: hidden; margin: 0; padding: 5px 5px; transition: all 0.6s ease-in-out; -webkit-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out;}
.template-list-item:hover{ transition: all 0.6s ease-in-out; -webkit-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out;}
.template-list-item .inner{width: 100%; height: 100%; overflow: hidden; display: inline-block; margin: 0; padding: 0px; text-align: left; position: relative;}
.template-list-item .inner:hover{}
.template-list-item .inner img{width: 100%; position: relative; z-index: 10; transition: all 0.6s ease-in-out; -webkit-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; border: solid medium #000;}
.template-list-item .inner:hover img{-webkit-transform: translateY(-50px) scale(0.5); -moz-transform: translateY(-50px) scale(0.5); -ms-transform: translateY(-50px) scale(0.5); transform: translateY(-50px) scale(0.5); border: solid medium #333;}
.template-list-item .inner .template-list-item-overlay{position: absolute; left: 0; bottom: 0; top: 0; background: #fff; transition: all 0.6s ease-in-out; -webkit-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; width: 100%; height: 100%; opacity: 1; color: #333; text-align: center; text-transform: uppercase; font-weight: 200; z-index: 0;}
.template-list-item .inner .template-list-item-overlay h4{bottom: 0; width: 100%; position: absolute; text-align: center; margin: 0; padding: 0;}
.template-list-item .inner:hover .template-list-item-overlay{position: absolute; left: 0%; right: 0; bottom: 0; top: 0; background: #fff;}

/*SEO CONTENT*/

.seo-content{margin-top: 70px;}
.seo-content h1{text-align: center; border-bottom: 1px solid #333; padding-bottom: 8px; margin-bottom: 15px; font-weight: 200;}
.seo-content h1 span{text-transform: uppercase; color: #d4b656;}
.seo-content section p{text-align: justify;}

/*CONTACT*/
.page-id-107{background: #111;}

.contact{background: #111;}
.contact .contact_page{margin-top: 10%; z-index: 0;}
.contact .contact_page h1{ text-align: center; color: #fff; font-weight: 300; text-transform: uppercase; font-size: 30px;}
.contact .contact_page div.address{text-align: center; border: thin solid #f00; padding: 10px; color: #fff; font-size: 16px; text-transform: uppercase;}
.contact .contact_page div.address h2{font-weight: 300; font-size: 22px; text-transform: uppercase; border-bottom: thin solid #fff; padding-bottom: 10px;}
.map-canvas{width: 100%;}
 .map-canvas img{width: 100%; height:auto; position: relative;}

.contact div input{width: 100%; background: #d4b656; color: #111; border-radius: 10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; border: solid medium #111; padding: 10px; font-weight: 400; text-transform: uppercase;}
.contact div input:focus{background: #111; color: #d4b656; border: solid medium #d4b656;}
.contact div textarea{width: 100%; background: #d4b656; color: #111; border-radius: 10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; border: solid medium #111; padding: 10px; font-weight: 400; text-transform: uppercase;}
.contact input[type="submit"]{width: 100%; background: #d4b656; color: #111; border: solid medium #111; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; }
.contact .contact_page p{color: #fff; text-transform: uppercase; text-align: center;}
.contact input[type="submit"]:hover{width: 100%; background: #111; color: #d4b656; border: solid medium #d4b656;}
div.wpcf7-mail-sent-ok{color: #d4b656; background: #111; text-align: center;}
.contact ::-webkit-input-placeholder { /* WebKit browsers */
    color:    #111;
    text-transform: uppercase;
    font-weight: 400;
}
.contact :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #111;
   opacity:  1;
   text-transform: uppercase;
}
.contact ::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #111;
   opacity:  1;
   text-transform: uppercase;
}
.contact :-ms-input-placeholder { /* Internet Explorer 10+ */
   color:    #111;
   text-transform: uppercase;
}
.visit_website{height:300px; min-height:0;}

/*FOOTER Styles*/
footer{ position: relative; bottom: 0; background: #2f2d2d; width: 100%; padding: 20px; color: #ddd; float: left;}
footer a{color: #fff;}
footer a .red{color: #f00;}
footer a:hover{color: #aaa;}
footer a:hover .red{color: #f00;}

footer div.contact-deet{ border-right: dotted thin #ddd; min-height: 100px;text-align: center; text-transform: uppercase;}
footer div  h3{border-bottom: solid thin #ddd; padding-bottom: 5px; text-transform: uppercase;}
footer div  h3 span{color: #d4b656;}
footer .contact-deet p{font-size: 20px; font-weight: 400;}
footer .contact-deet p a{}
footer .contact-deet p a:hover{color: #d4b656; text-decoration: none;}
footer .contact-deet address{}
footer div.social{min-height: 200px; text-align: center;}
footer .social div{font-size: 18px; text-transform: uppercase; margin-top: 20px;}
footer div.subscribe{border-left: dotted thin #ddd; min-height: 220px; text-align: center;}
footer .subscribe p{ font-size: 18px; text-transform: uppercase; margin-top: 40px;}
footer div input{width: 100%; background: #fff; color: #fff; border: none; padding: 5px; font-weight: 300; text-transform: uppercase;}
footer div input:focus{background: #fff; color: #d4b656;}
footer input[type="submit"]{ width: 50%; margin-top: 0px; margin-left: 0; color: #fff; background: #d4b656;}

.grid {
  background: #000;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  height: auto;
  
}

/* clearfix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- grid-item ---- */

.grid-sizer,
.grid-item {
  width: 33.3%;
  margin: 0;
  padding: 5px;
}
.grid-sizer{top: 0px!important;}
.grid-sizer h3{text-align: center; font-family: 'intro_regular', sans-serif; border-bottom: 0px solid #333; padding: 30px; font-weight: 200; text-transform: uppercase; color:#d4b656;}
.grid-sizer .grid-sizer-inner{ 
  float: left;
  background: #1c1c1c;
  border: 0px solid #333;
  border-radius: 0px;
  width: 100%;}
  
.grid-item {
  height: auto;
  float: left;
  overflow: auto;
  
}
.grid-item .x{width: 100%;}

.grid-item .grid-item-inner{ 
  float: left;
  background: #1c1c1c;
  border: 0px solid #333;
  border-radius: 0px;
  width: 100%;}

.grid-item--width2 { width:  40%; }
.grid-item--width3 { width:  60%; }

.grid-item--height2 { height: 200px; }
.grid-item--height3 { height: 260px; }
.grid-item--height4 { height: 360px; }


.grid-item img{width: 100%;}
.grid-item div, .grid-item h3{color: #ddd; padding: 10px; text-align: center;}
.grid-item div{font-family: 'intro_regular', sans-serif; letter-spacing: 2px; text-transform: lowercase;}
.grid-item h3{text-align: center; border-bottom: 1px solid #333; padding-bottom: 8px; margin-bottom: 15px; font-weight: 200; text-transform: uppercase; color:#d4b656;}
.grid-item h3 span{ color: #d4b656;}

.grid-item ul{list-style: none; text-align: center;}

.seo-content{width: 100%; max-width: 1500px; margin: 50vh auto 0;}
#home_screen{background: #000; padding: 15px; margin: 10px 0% 4px; border-radius: 8px; opacity: 0.8; width: 100%; max-width: 1500px;}
#home_screen .post_content{margin-top: 0;}
#home_screen .post_content .content-column{margin-top: 0;  -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
    -webkit-column-rule: 1px solid #333; /* Chrome, Safari, Opera */
    -moz-column-rule: 1px solid #333; /* Firefox */
    column-rule: 1px solid #333;
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;}

div.features-box{padding: 0; overflow: auto;}
div.features-box .features-inner{background: #000; opacity: 0.8; border-radius: 8px; margin: 10px;}
div.features-box .features-inner.xy{margin-left:0; padding: 10px;}
div.features-box .features-inner.yz{margin-right:0; padding: 10px; overflow: auto;}

div.features-box .features-inner .inner-box{position: relative; border: solid thin #d4b656; width: 80%; margin: 10px auto; height: auto; overflow: auto;}
div.features-box .features-inner .inner-box h3{width: 100%; text-align: center; color: #fff; text-transform: uppercase; font-weight: 300;}
div.features-box .features-inner .feature-item{padding: 10px; margin: 10px 10px; text-align: center; border: solid thin #d4b656; text-transform: uppercase; color: #fff; min-height: 50px; font-weight: 500; letter-spacing: 1px; width: calc(50% - 20px);}
div.features-box .features-inner .inner-box .item-one{margin: 10px 0;}
div.features-box .features-inner .inner-box .item-one div{text-align: left; text-transform: uppercase; color: #fff;}
div.features-box .features-inner .inner-box div.tick{color: #d4b656; text-align: center;}

.free-audit{padding: 10px; background: #000; opacity: 0.8; border-radius: 8px; margin-top: 10px; margin-bottom: 10px; text-align: center; text-transform: uppercase; color: #fff; font-size: 20px; line-height: 30px;}
.free-audit a span{border: solid thin #d4b656; display: inline-block; padding: 10px; color: #fff;}
.free-audit a:hover span{color: #ddd; border: solid thin #d4b656;}

#video-bg { position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; z-index: -1; }
#video-bg > video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
/* 1. No object-fit support: */
@media (min-aspect-ratio: 16/9) { #video-bg > video { height: 300%; top: -100%; } }
@media (max-aspect-ratio: 16/9) { #video-bg > video { width: 300%; left: -100%; } }
/* 2. If supporting object-fit, overriding (1): */
@supports (object-fit: cover) { #video-bg > video { top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } }

.gridx{margin: 10px 0; padding: 0; display: none;}
.gridx div{height: 75%; padding: 0;}
.gridx .grid-item-x{ height: 50%; padding: 2px; background: #333; border-radius: 4px;}
.gridx .grid-item-x div{border-radius: 4px; height: 100%;}
.gridx .grid-item-xx{ height: 50%; padding: 2px; background: #333; border-radius: 4px;}
.gridx .grid-item-xx div{border-radius: 4px; height: 100%;}
.gridx .grid-item-xxx{ height: 100%; padding: 2px; background: #333; border-radius: 4px;}
.gridx .grid-item-xxx div{border-radius: 4px; height: 100%;}
.gridx .about-temp{height: 22%; margin-top: 20px; background: #1a1a1a; border-radius: 4px; margin-bottom: 20px;}
.gridx .about-temp h2{color: #d4b656; text-transform: uppercase; text-align: left; padding:0 10px 10px; border-bottom: solid thin #d4b656;}

.gridx.something-1{display: block;}
p.main-something{display: block; float: left; padding: 10px; text-transform: uppercase; background: #d4b656; margin: 2px; font-weight: 400;}
p.main-something:hover{cursor: pointer;}

div.temp-item{margin: 0; padding: 0; overflow: hidden;}
div.temp-item .temp-item-inner{}
div.temp-item .temp-item-overlay{position: absolute; top: 0; bottom: 0; right: 0; left: 0; background: rgba(0, 0, 0, .6); opacity: 0; transition: all 0.3s ease-in-out; display:flex; align-items:center; padding: 0 10%; box-shadow: inset 0px 0px 40px 4px rgba(0, 0, 0, 0.7);}
div.temp-item:hover .temp-item-overlay{opacity: 1;}
div.temp-item .temp-item-overlay h3{color: #fff; text-transform: uppercase; opacity: 1; font-weight: 800; font-size: 34px;}
div.temp-item .temp-item-overlay p{color: #fff; display: block;}
div.temp-item .temp-item-inner img{width: 100%;}

.top-bar{ -webkit-transition: all 0.8s; -moz-transition: all 0.8s; transition: all 0.8s;}
div.top-bar.solid{background: #000; height: 105px; width: 110%;}



/*============================================================*/
        
          /*Templates item pages*/

/*============================================================*/


div.template-item{position: relative; padding: 110px 0 0!important; min-height: 1000px;}
div.template-item article{margin: 0!important; padding: 0!important;}
div.template-item article header{position: relative;}
div.template-item article header img{width: 100%;}
div.template-item article header .page-header{position: absolute; top: 50%; border: 0px solid #fff; width: 100%;}
div.template-item article header .page-header h1{text-transform: uppercase; width: 100%; text-align: center; letter-spacing: 5px; text-shadow: 1px 1px 1px #000; font-weight: 900; font-size: 50px;}
div.template-item section.post_content{text-align: justify; padding: 20px; margin: 50px 0; font-weight: 600; font-size: 18px; letter-spacing: 2px;}

section.temp_cont{}
div.temp_feature_item{padding: 0; margin: 0; overflow: hidden;height: 100%;}
div.template-item .temp_feature_item img{height: 100%;}

div.template-item .carousel-inner .item img{width: 100%;}
div.template-item a .view-it-live{background: #d4b656; text-transform: uppercase; text-align: center; font-weight: 600; border-radius: 5px; margin-top: 80px;}
div.template-item a .view-it-live p{line-height: 40px; padding-top: 10px; color: #000;}
div.template-item h3{font-size: 32px; color: #fff; text-transform: uppercase; font-weight: 600; padding: 30px 20px; text-align: center;}
div.template-item .next_temp, div.template-item .prev_temp {color: #ddd; font-size: 16px; text-transform: uppercase; text-align: center; margin: 0px 0 30px;}
div.template-item .prev_temp{text-align: right;}
div.template-item .next_temp{text-align: left;}
div.template-item .next_temp span, div.template-item .prev_temp span{ border: solid thin #ddd; padding: 10px;}
div.template-item .next_temp i, div.template-item .prev_temp i{font-size: 24px; position: relative; bottom: -4px;}
div.template-item .next_temp i{margin-left: 20px;}
div.template-item .prev_temp i{margin-right: 20px;}
div.template-item .next_temp.dis, div.template-item .prev_temp.dis {color: #333;}
div.template-item .next_temp.dis span, div.template-item .prev_temp.dis span{border: solid thin #333;}

div.bespoke{}
div.bespoke h3{color: #fff; width: 100%; text-align: center; line-height: 50px; text-transform: uppercase;  letter-spacing: 3px;}
div.bespoke h3 span{padding: 5px; background: #d4b656; color: #000; margin: 10px 0; border-radius: 4px; border: solid medium #2f2d2d; font-weight: 600; transition: all 0.6s ease-in-out; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; letter-spacing: 2px;}
div.bespoke h3 span:hover{padding: 5px; background: #000; color: #fff; margin: 10px 0; border-radius: 4px; border: solid medium #d4b656; font-weight: 600;}
					
					/* MEDIA QUERIES */ 
/*===========================================================*/

@media screen and (max-width: 1600px){
	#boxes .item img{height: 100%;width: auto;}
 	#boxes .itema img{height: 100%; width: auto;}
}

@media screen and (max-width: 991px){
footer div.contact-deet{border-right: none;}
footer div.subscribe{border-left: none;}
}

@media screen and (max-width: 900px){
.grid-sizer,
.grid-item {
  width: 50%;
  margin: 0;
  padding: 5px;
}

}
@media screen and (max-width: 800px){
#home_screen .post_content .content-column{-webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
   }
#video-bg{display: none;}
}
@media screen and (max-device-width: 800px){
#video-bg{display: none;}
.seo_page{ background: url('images/seo_bg.jpg') no-repeat top center; background-size: 200%; background-attachment: fixed; position: fixed; top: 0; left: 0; right: 0; bottom: 0;z-index: -2;}
}
@media screen and (max-width: 500px){
.grid-sizer,
.grid-item {
  width: 100%;
  margin: 0;
  padding: 5px;
}
#home_screen .post_content .content-column{-webkit-column-count: 1; /* Chrome, Safari, Opera */
    -moz-column-count: 1; /* Firefox */
    column-count: 1;
   }
}



@media screen and (max-width: 768px){
.one h3{font-size: 30px; text-align: center; font-family: 'blue_highwayregular';}
.two h3{font-size: 30px; text-align: center; font-family: 'blue_highwayregular';}
.three h3{font-size: 30px; text-align: center; font-family: 'blue_highwayregular';}
.four h3{font-size: 30px; text-align: center; font-family: 'blue_highwayregular';}
.five h3{font-size: 30px; text-align: center; font-family: 'blue_highwayregular';}

.webdesign-header{height: 50vh;}
.bg-red{height: 50vh;}
#webdesign_text article{margin-top: 10px;}

}
@media screen and (min-width: 500px)and (max-width: 768px){
.one img{width: 60%; margin: 0 20%;}
.two img{width: 60%; margin: 0 20%;}
.three img{width: 60%; margin: 0 20%;}
.four img{width: 60%; margin: 0 20%;}
.five img{width: 60%; margin: 0 20%;}	
}
/** 
 * iPad with Portrait orientation.
 */
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait){
/*general VH fixes */
  .bg-container{height: 1024px;}
  .portfolio-container{height: 1024px;}
  .web-container{min-height: 1024px;}
  .web_section{min-height: 512px;}
  
  .seo-content{margin: 512px auto 0;}
  
  /*Home page*/
  .bg-container{height: 512px;}
  #boxes{height: auto; display: block!important;}
  #boxes .item{height: 250px;}
  #boxes .itema{height: 500px;}
  #boxes .item img{height: 100%;}
 	#boxes .itema img{height: 100%;}
  .south{display: none;}
  
  /*Web Design Page*/
  #webdesign_text article{ margin-top: 50px;}
  .web-container{min-height: 600px;}
  .webdesign-header{height: 600px;}
	.bg-red{height: 600px;}
  /*Portfolio Page*/
  .portfolio-header div{ top: 40%; }
  div#local p{margin-top: 40%;}
}
 
/** 
 * iPad with landscape orientation.
 */
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape){
/*general VH fixes */
  .bg-container {height: 768px;}
  .portfolio-container {height: 768px;}
  .web-container {min-height: 1024px;}
 .web_section{min-height: 512px;}

   .seo-content{margin: 512px auto 0;}
 
  /*Home page*/
 	.bg-container {height: 708px;}
 	#boxes{height: 500px; }
 	#boxes .item img{height: 100%;}
 	#boxes .itema img{height: 100%;}
 	
 /*Web Design Page*/
  #webdesign_text article{ margin-top: 200px;}
  div#local p{margin-top: 40%;}
  
 /*Portfolio Page*/
  .portfolio-header div{ top: 40%; height: 50%;}
}
/**
*iPhone 6 PLUS
* Landscape Orientation
*/
@media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (orientation : landscape) { 
/* STYLES GO HERE */
}

/**
*iPhone 6 PLUS
* Portrait Orientation
*/
@media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (orientation : portrait) { 
.top-bar .view_more{position: fixed; padding: 2px 5px; bottom: -3px; line-height: 37px; left: 0;}
#webdesign_text article{margin-top: 20px;}

  .seo-content{margin: 200px auto 0;}
}

/**
*iPhone 6
* Landscape Orientation
*/
@media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : landscape) { 

}
/**
*iPhone 6
* Portrait Orientation
*/
@media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : portrait) { 
.top-bar .view_more{position: fixed; padding: 2px 5px; bottom: -3px; line-height: 37px; left: 0;}
}
/**
 * iPhone 5, 5S
 * Landscape Orientation
 */
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape){
/*general VH fixes */
.bg-container{min-height: 500px;}
.portfolio-container{height: 500px;}
.web-container{min-height: 500px;}
.web_section{min-height: 250px;}
  .seo-content{margin: 200px auto 0;}
/*Home page*/
.bg-container {height: 400px;}
.easingslider-40 .easingslider-image{height: 10%!important; width: auto!important;}
.mac_container{ top: 50px; left: 120px;}
.mac_container .easingslider-viewport{ width: 300px; height: 300px; }
#boxes{height: auto!important; min-height: 0; max-height: 10000px; display: block!important; position: relative;}
#boxes .item{height: 350px;}
#boxes .itema{height: 700px;}
#boxes .item img{height: 100%;}
#boxes .itema img{height: 100%;}
.south{display: none;}

/*Web Design Page*/
.one img{width: 60%; margin: 0 20%;}
.two img{width: 60%; margin: 0 20%;}
.three img{width: 60%; margin: 0 20%;}
.four img{width: 60%; margin: 0 20%;}
.five img{width: 60%; margin: 0 20%;}
#webdesign_text article h1{font-size: 50px;}
.bg-red{height: 360px;}
  
}
/**
 * iPhone 5, 5S
 * Portrait Orientation
 */
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait){
/*general VH fixes */
.bg-container{height: 500px;}
.portfolio-container{height: 500px;}
.web-container{min-height: 250px; padding-top: 100px;}
.web_section{min-height: 250px;}
  .seo-content{margin: 200px auto 0;}

/*Home page*/
.bg-container {height: 400px;}
.easingslider-40 .easingslider-image{height: 10%!important; width: auto!important;}
.mac_container{ top: 100px;}
.mac_container .easingslider-viewport{ width: 300px; height: 300px; }
#boxes{height: auto; display: block!important; max-height: 10000px;}
#boxes .item{height: 250px;}
#boxes .itema{height: 500px;}
#boxes .item img{height: 100%;}
#boxes .itema img{height: 100%;}
.south{display: none;}

 /*Web Design Page*/

  #webdesign_text article{ margin-top: 40px;}
  #webdesign_text article h1{font-size: 50px;}
  .webdesign-header{height: 250px;}
.bg-red{height: 360px;}
  div#local p{margin-top: 40%;}
  
/*Portfolio Page*/
  .portfolio-header div{ top: 40%; height: 50%;}
  .web-port-menu ul li{height: auto;}
  .portfolio-item .portfolio-item-img{height: 300px;}
  .portfolio-item .portfolio-item-txt{height: 300px;}
  .portfolio-item .portfolio-item-txt p{margin-top: 50 px;}
  
  .portfolio-container{min-height: 500px; height: auto;}

 .top-bar .view_more{position: fixed; padding: 2px 5px; bottom: -3px; line-height: 37px; left: 0;}

}
/**
*iPhone 4, 4S
* Landscape Orientation
*/
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) { 
/* STYLES GO HERE */
}
/**
*iPhone 4, 4S
* Portrait Orientation
*/
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) { 
/* STYLES GO HERE */
}