@media only screen and (min-width :320px) and (max-width :321px) {

    .lb-next,

    .lb-prev {

        font-size: 80px;

        padding: 0;

        position: absolute;

        top: 50%

    }

    .portfolio-buttons a {

        display: inline-block

    }

    .main-quote {

        display: none

    }

    .lb-prev {

        left: 2%

    }

    .lb-next {

        right: 2%

    }

}



@media only screen and (min-width :320px) and (max-width :400px) {

    .effect-bubba p {

        display: none

    }

    .home-portfolio {

        margin: 20px auto 10px;

        position: absolute;

        left: 5px

    }

    .home-portfolio:before {

        content: '\A';

        white-space: pre

    }

    .lb-overlay>div {

        padding-top: 40px;

        width: 100%

    }

    .lb-overlay .project-info {

        margin: 5px auto 0;

        text-align: center;

        width: 90%

    }

    .main-contact,

    .menu {

        width: 100%;

        overflow-y: scroll;

        -webkit-overflow-scrolling: touch

    }

    .lb-overlay .project-info h3 {

        font-size: 1.25em;

        margin: 0 auto;

        text-align: center

    }

    .lb-overlay .website-info {

        margin: -15px auto 0

    }

    .menu {

        margin-top: 140px;

        height: 300px;

        max-height: 300px

    }

    .main-contact {

        height: 500px;

        max-height: 500px

    }

    .main-contact h2 {

        font-size: 1em

    }

    .new {

        font-size: 40px;
		padding: 7px 10px;

    }

    .fixed .fa.fa-times {

        z-index: 1000

    }

    .sidenav {

        background-attachment: scroll

    }

    .services-buttons a {

        display: inline-block

    }

}



@media only screen and (min-width :320px) and (max-width :766px) {

    .header-contact,

    .logo {

        display: block;

        text-align: center

    }

    .header-contact,

    .home-portfolio a,

    .scroll span,

    .service h2 span,

    .service-header h1,

    .service-type,

    .website-info p {

        text-transform: uppercase

    }

    .interested-service,

    footer {

        -webkit-box-orient: vertical;

        -webkit-box-direction: normal

    }

    .scroll a,

    .services-buttons a,

    footer a,

    footer a:hover {

        text-decoration: none

    }

    .logo {

        width: 200px;

        height: auto;

        margin: 0 auto;

        padding-top: 20px;

        padding-bottom: 40px

    }

    .logo img,

    header {

        margin-top: 0;

        width: 100%

    }

    .logo img {

        text-align: center;

        height: auto

    }

    header {

        height: 270px;

        position: relative;

        z-index: 1;

        background-color: #383838;

        -webkit-box-shadow: 5px 5px 8px rgba(0, 0, 0, .7);

        -moz-box-shadow: 5px 5px 8px rgba(0, 0, 0, .7);

        box-shadow: 5px 5px 8px rgba(0, 0, 0, .7)

    }

    .header-contact {

        position: absolute;

        bottom: 10px;

        color: #fff;

        font-family: GeoSans, sans-serif;

        letter-spacing: 3px;

        font-size: 1em;

        margin: 0 auto;

        float: none;

        width: 100%

    }

    .close-word,

    .home-portfolio span,

    .menu-word {

        display: none

    }

    .design-buttons a,

    .home-portfolio a {

        font-family: Geosans, sans-serif

    }

    .phone {

        font-size: 1.25em

    }

    .new {

    	top: 240px;

    	left: 100px;

        font-size: 2em

    }

    .fixed .fa-bars {

        position: fixed

    }

    .fixed .fa-bars,

    .fixed .fa-times {

        color: #D7D7D7;

        font-size: 3.125em

    }

    .fixed .fa-bars:hover,

    .fixed .fa-times:hover {

        color: #506C99;

        -moz-transition: all .35s ease-in;

        -o-transition: all .35s ease-in;

        -webkit-transition: all .35s ease-in;

        transition: all .35s ease-in

    }

    .fixed {

        position: absolute;

        left: 20px;

        top: 20px

    }

    .home-portfolio {

        position: absolute;

        right: 15px;

        top: 50px

    }

    .home-portfolio a {

        padding: 10px;

        border: 1px solid #fff;

        color: #fff;

        font-size: 19px;

        letter-spacing: 2px

    }

    #mycontactformNav .fixed .fa-times {

        font-size: 1em;

        position: fixed

    }

    .overlay-services {

        width: 96%

    }

    .overlay-services .service-title {

        font-size: 1.875em;

        letter-spacing: 2px;

        padding-bottom: 3px

    }

    .overlay-services .service-offered {

        font-size: 1em

    }

    .effect-bubba p {

       display: none;

    }

    .effect-bubba:hover p {

        opacity: 1;

        -webkit-transform: none;

        transform: none

    }

    .office-info {

        font-size: 1.25em

    }

    .modal-content {

        width: 90%;

        border: 0

    }

    .main-banner {

        height: 400px;

        background-attachment: scroll

    }

    .main-banner h1 {

        width: 90%;

        font-size: 2em

    }

    .main-banner a {

        padding: 20px 40px;

        font-size: 1.125em

    }
	
	.main-banner-text {
		margin-top: -100px;
	}

    .header-text {

        font-size: 1.625em

    }

    .service-columns {

        width: 100%;

        margin: 0 auto;

        display: block;

        padding-top: 0

    }

    .column-one,

    .column-three,

    .column-two {

        width: 90%;

        padding-top: 40px;

        padding-bottom: 40px;

        border-bottom: 1px solid #D7D7D7;

        margin: 0 auto;

        float: none

    }

    .service-text {

        font-size: 1.25em;

        height: auto;

        padding: 0

    }

    .meet-box {

        width: 100%;

        height: auto

    }

    .team-line {

        padding-top: 40px;

        width: 80%;

        display: block

    }

    .team-line .team-image {

        width: 80%;

        margin: 0 auto;

        padding-bottom: 30px;

        text-align: center

    }

    .team-line .team-image img {

        width: 200px;

        height: 200px;

        border: 6px solid #506C99

    }

    .team-name,

    .team-title {

        font-size: 1em

    }

    .slideshow-container {

        height: auto;

        padding: 10px 0

    }

    .slideshow-container blockquote {

        font-size: 1.25em;

        width: 75%

    }

    .prev {

        left: 1%

    }

    .next {

        right: 1%

    }

    .quote blockquote {

        font-size: 1.5em;

        padding: 0 10px;

        position: static

    }

    .quote blockquote:after,

    .quote blockquote:before {

        display: none

    }

    .design-buttons,

    .design-portfolio-buttons {

        display: -webkit-box;

        display: -ms-flexbox;

        -ms-flex-wrap: wrap

    }

    .quote cite {

        font-size: 1em

    }

    .advertisements-header,

    .logos-header,

    .photography-header,

    .portfolio-header,

    .video-header,

    .websites-header {

        height: 200px;

        background-attachment: scroll

    }

    .advertisements-header h1,

    .logos-header h1,

    .photography-header h1,

    .portfolio-header h1,

    .video-header h1,

    .websites-header h1 {

        font-size: 2em

    }

    .design-portfolio-navigation {

        width: 100%

    }

    .design-portfolio-buttons {

        width: 100%;

        margin: 0 auto;

        display: flex;

        display: -webkit-flex;

        flex-wrap: wrap;

        -webkit-flex-wrap: wrap

    }

    .design-portfolio-buttons a {

        padding: 10px 0;

        margin: 0 auto 10px;

        width: 48%;

        font-size: 1em

    }

    .design-portfolio-buttons a:last-child {

        margin: 0 auto;

        text-align: center

    }

    .design-navigation {

        width: 100%

    }

    .design-buttons {

        width: 100%;

        margin: 0 auto;

        display: flex;

        display: -webkit-flex;

        flex-wrap: wrap;

        -webkit-flex-wrap: wrap

    }

    .design-buttons a {

        padding: 10px 0;

        width: 50%;

        font-size: 1.2em

    }

    .design-buttons a:hover {

        color: #506C99;

        border-bottom: 1px solid #506C99;

        transition: all .35s

    }

    .portfolio-buttons {

        width: 100%;

        margin: 0 auto;

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;

        display: -webkit-flex;

        -ms-flex-wrap: wrap;

        flex-wrap: wrap;

        -webkit-flex-wrap: wrap

    }

    .portfolio-navigation.affix,

    .portfolio-navigation.affix .portfolio-buttons {

        width: 100%

    }

    .portfolio-buttons a {

        padding: 10px 0;

        margin: 0 auto 10px;

        width: 48%;

        font-size: 1em

    }

    .portfolio-buttons a:last-child {

        margin: 0 auto;

        text-align: center

    }

    .practice-images {

        width: 100%;

        text-align: center;

        margin: 20px auto

    }

    .practice-images .design-title {

        width: 80%;

        font-size: 1.5em;

        padding-top: 20px;

        border-bottom: 1px solid #506C99

    }

    .design-title span {

        background: 0 0

    }

    .design-title:before {

        display: none

    }

    .lb-album {

        width: 100%;

        height: auto;

        margin: 0 auto;

        text-align: center;

        font-family: GeoSans, sans-serif;

        padding: 0

    }

    .service,

    .service-header h1 {

        font-family: Geosans, sans-serif

    }

    .lb-album li {

        display: block;

        width: 80%;

        margin: 0 auto;

        list-style: none;

        position: relative

    }

    .lb-album li:last-child {

        border-bottom: none

    }

    .lb-album li a img {

        width: 100%

    }

    .lb-overlay>div {

        padding-top: 80px;

        width: 100%

    }

    .lb-overlay .open-overlay-image {

        width: 80%;

        height: auto

    }

    .project-info,

    .website-info {

        text-align: center;

        margin: 0 auto;

        width: 80%

    }

    .lb-overlay .project-info h3 {

        font-size: 1.375em;

        padding: 0;

        margin: 0

    }

    .lb-overlay .project-info h3 span {

        color: #506C99;

        font-size: 1em

    }

    .lb-next,

    .lb-prev {

        font-size: 80px;

        padding: 0;

        top: 30%;

        position: absolute

    }

    .lb-prev {

        left: 2%

    }

    .lb-next {

        right: 2%

    }

    .lb-overlay .website-info {

        padding: 10px 0 0

    }

    .project-info a,

    .website-info a {

        border-bottom: 1px solid #fff;

        padding-bottom: 2px;

        font-size: 1em

    }

    .website-info p {

        color: #fff;

        letter-spacing: 1px;

        font-weight: 400;

        width: auto;

        height: auto;

        font-size: 1em

    }

    .lb-overlay .closebtn {

        position: absolute;

        top: 20px;

        left: 20px

    }

    .lb-overlay .fa-times {

        color: #fff;

        font-size: 50px

    }

    .service-header h1,

    .service-header-title {

        font-size: 2em;

        width: 100%

    }

    .lb-overlay img {

        max-height: 100%;

        width: 80%;

        position: relative;

        margin-top: 10px;

        -webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, .3);

        -moz-box-shadow: 1px 1px 4px rgba(0, 0, 0, .3);

        box-shadow: 0 2px 7px rgba(0, 0, 0, .2)

    }

    .lb-overlay:target {

        width: auto;

        height: auto;

        bottom: 0;

        right: 0;

        padding: 20px 10px 10px

    }

    .video-container {

        width: 100%;

        margin: 0 auto

    }

    .video-holder {

        width: 80%;

        margin: 40px auto

    }

    .video-holder .video-1,

    .video-holder .video-2 {

        float: none;

        display: block;

        width: 90%;

        height: auto;

        margin: 0 auto 40px

    }

    .main-service-header {

        height: 200px

    }

    .service-header {

        width: 100%;

        height: 200px;

        background: url(../images/computer.jpg) bottom left no-repeat fixed

    }

    .service-header h1 {

        background: rgba(0, 0, 0, .5);

        margin: 0;

        padding: 20px;

        color: #fff;

        letter-spacing: 6px

    }

    .service-type {

        text-align: center;

        width: 90%;

        margin: 20px auto;

        border-bottom: 1px solid #D7D7D7;

        border-top: 1px solid #D7D7D7;

        padding-bottom: 10px;

        padding-top: 10px;

        font-size: 1.625em;

        color: #444;

        letter-spacing: 20px

    }

    .service-container:last-child {

        border-bottom: 1px solid #506C99

    }

    .service {

        padding-top: 100px;

        width: 90%;

        margin: 0 auto

    }

    .interested-service,

    .scroll a {

        width: 100%;

        background: #506C99

    }

    .service h2 {

        position: static;

        text-align: center;

        z-index: -1;

        border: 1px solid #506C99;

        padding: 10px 0

    }

    .service h2 span {

        letter-spacing: 6px;

        background: #fff;

        padding: 0;

        font-size: 1em;

        position: static;

        z-index: 1

    }

    .scroll,

    .scroll span,

    footer {

        position: relative

    }

    .service h2:before {

        display: none

    }

    .service-container {

        border: 1px solid #506C99;

        border-top: none;

        margin-top: -13px;

        padding: 50px 50px 30px

    }

    .service-sentence {

        padding: 0 0 10px;

        margin: 0;

        letter-spacing: 1px;

        text-align: justify;

        font-size: 1.25em

    }

    .no-scroll,

    .scroll a {

        padding: 0

    }

    .interested-service h3,

    .scroll,

    .scroll a,

    .scroll i,

    footer .copyright {

        text-align: center

    }

    .scroll {

        z-index: 0;

        margin-top: 0;

        width: 100%;

        height: 70px;

        background: #506C99;

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;

        display: -webkit-flex;

        -webkit-box-align: center;

        -ms-flex-align: center;

        align-items: center;

        -webkit-box-pack: center;

        -ms-flex-pack: center;

        justify-content: center

    }

    .scroll span {

        background: #fff;

        padding: 0;

        z-index: 1

    }

    .scroll:before {

        display: none

    }

    .interested-service,

    .services-buttons {

        display: -webkit-box;

        display: -ms-flexbox

    }

    .scroll a {

        height: 70px;

        border: 1px solid #506C99;

        letter-spacing: 1px;

        color: #fff;

        font-size: 1.1em

    }

    .interested-service h3,

    .services-buttons a {

        text-transform: uppercase;

        letter-spacing: 2px;

        font-family: Geosans, sans-serif

    }

    .scroll a:hover {

        background: #506C99;

        color: #fff;

        transition: all .35s

    }

    .scroll i {

        margin: 0 auto

    }

    #hosting,

    #marketing,

    #seo,

    #web-dev {

        padding-top: 40px

    }

    .interested-service {

        height: 130px;

        display: flex;

        display: -webkit-flex;

        -webkit-flex-direction: column;

        -ms-flex-direction: column;

        flex-direction: column;

        -webkit-box-align: center;

        -ms-flex-align: center;

        align-items: center;

        -webkit-box-pack: center;

        -ms-flex-pack: center;

        justify-content: center;

        margin-top: 50px

    }

    .interested-service h3 {

        width: 80%;

        color: #fff;

        font-size: 1.375em

    }

    .services-buttons,

    .services-navigation {

        width: 100%;

        margin: 0 auto

    }

    .interested-service .get-in-touch {

        border-bottom: 1px solid #fff;

        padding-bottom: 2px

    }

    .interested-service .get-in-touch:hover {

        border-bottom: 1px solid #506C99;

        transition: all .35s

    }

    .services-buttons {

        display: flex;

        display: -webkit-flex;

        -webkit-box-pack: center;

        -ms-flex-pack: center;

        justify-content: center;

        -webkit-box-align: center;

        -ms-flex-align: center;

        align-items: center

    }

    .services-buttons:first-child {

        margin-right: 20px

    }

    .services-buttons a {

        border: 1px solid #506C99;

        padding: 20px 10px;

        margin: 10px auto 0;

        width: 40%;

        background: #fff;

        color: #506C99;

        font-size: 1em

    }

    .services-buttons a:hover {

        background: #fff;

        color: #506C99;

        border: 1px solid #fff;

        transition: all .35s

    }

    footer {

        width: 100%;

        height: 150px;

        background: #fff;

        letter-spacing: 1px;

        font-size: 1.125em;

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;

        display: -webkit-flex;

        -webkit-box-align: center;

        -ms-flex-align: center;

        align-items: center;

        -webkit-box-pack: center;

        -ms-flex-pack: center;

        justify-content: center;

        -ms-flex-direction: column;

        -webkit-flex-direction: column;

        flex-direction: column

    }

    footer .footer-information {

        width: 100%;

        text-align: center;

        color: #444;

        font-family: Geosans, sans-serif

    }

    footer .social-media a {

        margin-right: 10px

    }

    footer .fa.fa-heart {

        color: #506C99

    }

    footer .social-media i {

        font-size: 1.875em

    }

    footer .social-media i:hover {

        transform: none;

        transition: none

    }

    footer .social-media .fa.fa-facebook-square {

        color: #3b5998

    }

    footer .social-media .fa.fa-google-plus-square {

        color: #dd4b39

    }

    footer .social-media .fa.fa-linkedin-square {

        color: #0077b5

    }

    .fa.fa-twitter-square {

        margin-right: 0

    }

    footer .copyright {

        position: static;

        margin-top: 20px;

        font-size: 1em;

        color: #A7A7A7;

        font-family: Geosans, sans-serif

    }

}



@media only screen and (min-device-width :320px) and (max-device-width :733px) and (orientation :landscape) {

    .lb-overlay .project-info {

        margin: 10px auto 0

    }

    .lb-overlay .project-info h3 {

        width: 60%;

        margin: 0 auto;

        font-size: 1em

    }

    .lb-overlay .open-overlay-image {

        width: 200px

    }

    .lb-overlay .website-info {

        margin: -20px auto 0

    }

}



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

    .logo,

    .logo img {

        width: 200px

    }

    .design-buttons a:hover,

    .lb-next:hover,

    .lb-prev:hover {

        color: #506C99;

        transition: all .35s

    }

    .logo img {

        margin-top: 30px

    }

    .modal-content,

    .overlay-services {

        width: 90%

    }

    header {

        height: 170px

    }

    .header-contact {

        font-size: 1em;

        margin-right: 10px

    }

    .fixed {

        left: 20px

    }

    .menu {

        margin-top: 120px

    }

    .home-portfolio {

        right: 50px

    }

    .home-portfolio a {

        padding: 10px

    }

    .close-word {

        display: none

    }

    .effect-bubba p {

        opacity: 1;

        padding-bottom: 15px

    }

    .main-banner {

        height: 500px

    }

    .slideshow-container {

        padding: 10px 0

    }

    .advertisements-header h1,

    .logos-header h1,

    .photography-header h1,

    .portfolio-header h1,

    .video-header h1,

    .websites-header h1 {

        font-size: 2.5em

    }

    .service-text {

        height: auto;

        padding-bottom: 30px

    }

    .meet-box {

        background: #444;

        width: 100%;

        height: 820px

    }

    .team-line {

        width: 100%;

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;

        display: -webkit-flex;

        -ms-flex-wrap: wrap;

        flex-wrap: wrap;

        -webkit-flex-wrap: wrap

    }

    .design-buttons,

    .design-portfolio-buttons {

        display: -webkit-box;

        display: -ms-flexbox;

        -ms-flex-wrap: wrap

    }

    .team-line .team-image {

        width: 30%

    }

    .main-quote blockquote {

        width: 80%

    }

    .lb-overlay .open-overlay-image {

        width: 85%;

        height: auto

    }

    .design-portfolio-navigation {

        width: 100%

    }

    .design-portfolio-buttons {

        width: 100%;

        margin: 0 auto;

        display: flex;

        display: -webkit-flex;

        flex-wrap: wrap;

        -webkit-flex-wrap: wrap

    }

    .design-portfolio-buttons a {

        padding: 10px 0;

        margin: 0 auto 10px;

        width: 48%;

        font-size: 1em

    }

    .design-portfolio-buttons a:last-child {

        margin: 0 auto;

        text-align: center

    }

    .design-navigation {

        width: 100%

    }

    .design-buttons {

        width: 100%;

        margin: 0 auto;

        display: flex;

        display: -webkit-flex;

        flex-wrap: wrap;

        -webkit-flex-wrap: wrap

    }

    .design-buttons a {

        padding: 10px 0;

        width: 50%;

        font-family: Geosans, sans-serif;

        font-size: 1.2em

    }

    .design-buttons a:hover {

        border-bottom: 1px solid #506C99

    }

    .portfolio-navigation {

        width: 100%

    }

    .portfolio-buttons {

        width: 100%;

        margin: 0 auto;

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;

        display: -webkit-flex;

        -ms-flex-wrap: wrap;

        flex-wrap: wrap;

        -webkit-flex-wrap: wrap

    }

    .portfolio-buttons a {

        display: block;

        width: 30%;

        padding: 20px 0;

        margin-top: 10px;

        font-size: 1em

    }

    .portfolio-navigation.affix .portfolio-buttons {

        width: 100%

    }

    .lb-album li {

        width: 40%

    }

    .service,

    .services-navigation {

        width: 90%

    }

    .service h2 {

        position: static;

        border: 1px solid #506C99;

        padding: 10px 0

    }

    .service h2 span {

        font-size: 1.25em;

        position: static

    }

    .service h2:before {

        display: none

    }

    .services-navigation a {

        width: 40%

    }

    .interested-service {

        height: 100px

    }

    .interested-service h3 {

        width: 80%

    }

    footer .copyright {

        position: static;

        margin: 10px auto 0;

        font-size: 1em;

        text-align: center

    }

    .lb-next,

    .lb-prev {

        font-size: 200px;

        position: absolute;

        top: 26%

    }

    .lb-prev {

        left: 5%

    }

    .lb-next {

        right: 5%

    }

}



@media only screen and (min-width :1025px) and (max-width :1400px) {

    .close-word {

        display: none

    }

    .portfolio-navigation {

        width: 90%;

        margin: 30px auto 0

    }

    .portfolio-buttons a,

    .portfolio-navigation.affix .portfolio-buttons {

        width: 90%

    }

    .lb-album li {

        width: 40%

    }

    .lb-overlay .open-overlay-image {

        width: 90%;

        height: auto

    }

    .main-content {

        padding-bottom: 40px

    }

    .meet-box {

        background: #444;

        width: 100%;

        height: 820px

    }

    .team-line {

        width: 70%;

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;

        display: -webkit-flex;

        -ms-flex-wrap: wrap;

        flex-wrap: wrap;

        -webkit-flex-wrap: wrap

    }

    .team-line .team-image {

        width: 30%

    }

    .service h2 {

        position: static;

        text-align: center;

        z-index: -1;

        border: 1px solid #506C99;

        padding: 10px 0

    }

    .service h2 span {

        text-transform: uppercase;

        letter-spacing: 6px;

        background: #fff;

        padding: 0;

        font-size: 1.25em;

        position: static;

        z-index: 1

    }

    .service h2:before {

        display: none

    }

    .service-text {

        height: auto

    }

    .interested-service {

        height: 120px

    }

    .lb-prev {

        top: 24%;

        left: 5%

    }

    .lb-next {

        top: 24%;

        right: 5%

    }

}