/*--------------------------------------------------------
Responsive elements
--------------------------------------------------------*/

@media only screen and (min-width: 768px) and (max-width: 959px) {
                h1 { font-size: 1.6rem;}
                .one-text { font-size: 16px;}
                #slidecaption { font-size: 68px }
                .slidedescription { font-size: 12px }
                .slider-text { bottom: 60px; } 
                .bg1, .bg3 { background-size: 150%;}
                .bg2 { background-size: 1280px;}
                #contact { background-size: 1437px; }
                .item { height: 167px; }
                .ib-text { padding-right: 26%; }
} 

@media only screen and (width: 1024px) {
                #contact { background-size: 1210px; }
                .card { margin: 60px 0 0 0; }
} 
 
@media only screen and (max-width: 767px) {
                h1 { font-size: 1.6rem; line-height: 1.8rem; }
                .one-text { font-size: 14px; }
                .project-title { font-size: 14px; }
                .project-description { font-size: 11px; }
                #slidecaption { font-size: 36px}
                .lines { font-size: 24px; }
                #contact { height: auto;}
                .contact-social-icons li a { width: 40px; height: 40px; font-size: 20px; }
                .contact-social-icons li { margin: 0 5px 0 5px; }
                .links { font-size:13px; padding:0; margin:0; }
.links li {margin:0 5px 0 10px;}
                .dropmenu { display: block; margin-top: 5px; }
                .logo { width: 180px; height: auto; }
                .slidedescription { display: none; }
                .line { display:none; }
                .social-icons { position: absolute; top: 10px; right:15px; margin-top: 0; }
                .social-icons li a { width: 18px; height: 18px; line-height: 1.8; font-size: 16px; }
                nav { height: 45px; bottom:50px;}
                #homepage { margin-bottom: -30px; }
                .slider-text  { bottom: 50px; min-height: 80px; }
                #about, #culture, #services, #portfolio { padding-top: 60px; padding-bottom: 40px; }
                #prevslide, #nextslide{ position:absolute; height:15px; width:15px; top:50px; margin-top:-21px; opacity:0.6; }
                #culture h4 { padding-top: 27px; }
                .bg1, .bg2, .bg3 { background-attachment: scroll; background-size: cover; }
                .column .img-wrp { margin: 40px 0px 14px; }	
                #prevslide{ right:55px; font-size: 16px; }
				#nextslide{ right:30px; font-size: 16px; }
				#contact { background-size: cover; }
				.item { height: 330px; }
				.selectnav { display:none; }
   				.option-set { margin-left: 0; }
				.culture-full { padding: 40px 0px 40px 0px; margin: 40px 0px 14px 0px; }
				.info-block a.button { position: inherit; margin-top: 20px; }
				.ib-text { padding-right: 0; }
				.post-title { font-size: 36px; }
				p.lead { font-size: 14px; }
				.image-caption { display: none; }
				.blog-sidebar { display: none; }
				.post-info span { float: left; text-align: left; margin-top: 5px; }
	                     .service h3 { margin-top:10px; }
                            .service .icon {width:80px; height: 80px; margin: 14px auto;}
                             .fancybox-inner { width: 90% !important;height: auto !important;}
                              .fancybox-wrap {top:10% !important;}
                              .container-ux {height:auto !important;}
                               .container-tri, .container-quad {width:100% !important;}
                              .container_outer_img {margin-top:10px;}
                               .container_content {height: 250px; padding-top: 90px;}
                               .title h1 {font-size: 2rem; line-height: 2.1rem; }
                              .one-text {text-align:left; font-size:1rem;}
.icon.mid {left:-3%;}
.icon.left {left:3%;}
.icon.right {left:82%;}
ul.social-icons li:first-child {
    display: none;
}
}
	
@media only screen and (max-width: 479px) {
.five.columns.item.isotope-item.isotope-hidden {
    display: none;
}
#projects .sixteen {display:block; width:100%;}
.option-set, #projects h1 {margin-left:10px;}
.five.columns.item {
position: relative !important;
    width: 45%;
    height: 120px !important;
    padding: 0.5rem;
    transform: none !important;
}
.resume {display:none;}
#contact .container {width:auto; padding:1rem;}
#contact {padding:4rem 0;}
.container-hero h1 {font-size:2.4rem;}
#contact h1 {font-size:2.4rem;}
#homepage {height:500px;}
.container-ux {padding:1rem 0;}
                .lines, .adress{ font-size: 18px; }
                .slider-text  { bottom: 50px; min-height: 100px; }
                #prevslide, #nextslide{ position:absolute; height:15px; width:15px; top:100px; opacity:0.6; }
                #prevslide{ left:0; }
				#nextslide{ left:25px; }
				.item { height: 254px; }
				 nav { height: 55px; bottom:0; top:0; position:absolute;}
                .links a { font-size:0.7rem; padding:0; margin:0; text-align:center; }
				.links a.to-top i { background: url(../images/js-mini4.png) no-repeat center; position:absolute; top:5px;}
				.slider-text { bottom: 120px; }
                                #topHeadline { font-size: 2.1rem; padding-top: 370px; line-height: 2.1rem; max-width: 100px; padding-left:0px;}
                               .container-big img {max-width: 370px;}
                              .container_outer_img {width:auto;}
                             .container-move {padding-top:0 !important;}
                              .page {padding-top:10px;}
                              .container-flex {display:block !important;}
                               .container-flex .right, .container-flex .left {width:100% !important; padding:0 !important;}
                               .container-gray {margin:70px 0 !important; padding: 70px 0 !important;}
                            .link a {display:block; padding-bottom:20px;}
                           .overlap {margin-top:-120px !important;}
                            .container-flex h3 {font-size:1.3rem !important; line-height:1.6rem !important;}
                            .my-wrapper-int {padding-top:30px;}
                          .container_content {padding-top:5px; padding-bottom:40px; height:auto;}
                          .par p {font-size: 1rem}
                         .option-set li a {font-size:.8rem;}
                        .container-quad {padding-top:1rem;}
                         .title h1 {font-size:1.6rem; line-height:1.9rem;}
.fancybox-nav {top:65%;}
.fancybox-opened .fancybox-title {width:85%; bottom:40px;}
.fancybox-wrap {width:88% !important;}
.one-third.column h3{font-size:1rem;}
.service .icon {width:80px; height:80px;}
h1 {font-size:1.6rem;}
#project h2 {font-size:1.6rem; text-align:left !important;}
#project p {line-height:1.4rem !important; text-align:left;}
#project h6 {font-size:.7rem !important; letter-spacing:.1rem !important; text-align:left !important;}
#portfolio {margin-top:-28px; margin-bottom:10px; padding-top:0;}
canvas.sketch {height:90vh !important;}
.move {max-width:95% !important;}
.container_outer_img {margin: 0 0 0 -20px !important;}
.mugshot {width:300px; margin:0 auto; display:block;}
.icon.left {left:-3%;}
.icon.mid {left:0;}
.icon.right {left:72%;}
#homepage .container {width:300px;}
.container-flex .link {font-size:15px !important; letter-spacing: 0 !important;
    text-transform: initial !important;
    font-family: 'Open Sans', sans-serif !important;}
.container-move {align-items:start !important; height:auto !important; margin-bottom:0 !important;}
.fancybox-outer {
height:500px !important; width: 100% !important;
}
.fancybox-image {
max-height:auto !important;
}
.container .two.columns {
width:175px !important;
}
.container-duo {
width:100%;
padding:0;
}
.container-hero {
font-size:1.2rem;
font-weight:400;
line-height:1.8rem
}
.intro {
text-align:left;
font-size:1.3rem;
padding:1rem;
font-weight:500;
}
.to-top .icon-chevron-up {
display:none !important;
}
.sticky .to-top .icon-chevron-up {
display:block !important;
}
.social-icons li a {
padding-right:10px;
}
.logo {
top:80px;
width:60px;
}
#homepage .container .container-hero {
width:100%;
left:-30px;
}
} 


@media only screen and (min-width: 1400px) {
                nav .container,
                #homepage .container,
                #homepage .container
                .sixteen.columns
                { width: 96%; }

                nav .three.columns { float: right; }
                .slider-text { width: 100%; }
                .line { width: 180px; }
                
                #parallax1, #parallax2, #parallax3,
                #parallax1 .vertical-text, #parallax2 .vertical-text,
                #parallax3 .vertical-text, #parallax1 .pattern,
                #parallax2 .pattern, #parallax3 .pattern
                { height: 450px; }
                
                #prevslide, #nextslide{ position:absolute; height:30px; width:30px; top:210px; margin-top:-21px; opacity:0.6; }
                .bg1, .bg2, .bg3 { background-size: 100%; }
                
    } 


@media only screen and (min-width: 769px) and (max-width: 1024px) {
.container-tri {
width:33%;
}
.container-quad {
width:49%;
}
.container-ux {
height:auto;
}
}

@media only screen and (min-width: 769px) and (max-width: 1400px) {
.container-ux {
max-width:960px;
}
}