/*GURJOT NEW YORK 2017 STYLESHEET*/

html,body {
    background:#ddd;
    margin:0;
    padding:0;
    font-family:Lato, arial, sans-serif;
    color:#000;
    font-size:100%;
}

.wrapper {
    max-width:100%;
    overflow-x:hidden;
}

img {
    border:0;
}

a:link, a:visited {
    color: #470065;
}

a:link:hover, a:visited:hover {
    color:#000;
}

p {
    line-height:200%;
    text-align:justify;
}

h1 {
    font-family:Playfair Display, georgia, serif;
    max-width:90%;
    text-align:left;
    color:#5C5C5C;
    padding:5px 20px;
}

h1:before {
    content: "\f105 ";
    color:#fff;
    margin-right:20px;
    font-family:FontAwesome;
}

h2 {
    text-transform:uppercase;
    color:#470065;
    text-align:center;
    margin-top:50px;
    margin-bottom:20px;
    display:flex;
    align-items:center;
    justify-content:center;
}

h2:before, h2:after {
    content:" ";
    height:1px;
    width:10%;
    background-color:#fff;
}

h2:before {
    margin-right:20px;
}

h2:after {
    margin-left:20px;
}

/*class to remove lines for longer h2 */
h2-long:before, h2-long:after {
    content:none;
}

h4 {
    color:#5c5c5c;
    margin-left:15px;
}

h4 ~ p {
    margin-left:15px;
}

table {
    color: #5c5c5c;
    border-collapse:collapse;
}

table td {
    padding:10px;
    border-top:1px solid #fff;
    border-bottom:1px solid #fff;
}

blockquote {
    font-family:Pinyon Script, cursive;
    font-size:250%;
    text-align:center;
}

blockquote footer {
    font-family:Playfair Display, georgia, serif;
    font-style: italic;
    text-align:right;
    font-size:50%;
    color:#470065;
}

.longquote {
    font-size:100%;
    font-family:Lato, arial, sans-serif;
}

figure {
    padding:5px;
    background-color:#fff;
    margin:15px 20px;
}

figure img {
    max-width:100%;
    display:block;
    margin-left:auto;
    margin-right:auto;
}

figure figcaption {
    text-align:center;
    color:#5c5c5c;
}

form {
    padding:15px;
    border-left:1px solid #fff;
    max-width:90%;
}

form label {
    display:block;
    text-align:left;
    font-weight:bold;
    padding:5px;
}

form input:not([type=checkbox]) {
    font-family:Lato, arial, sans-serif;
    font-size:inherit;
    background:#fff;
    border:none;
    width:350px;
    max-width:100%;
}

form textarea {
    font-family:Lato, arial, sans-serif;
    font-size:inherit;
    background:#fff;
    border:none;
    width:350px;
    max-width:100%;
}

form select {
    font-family:Lato, arial, sans-serif;
    font-size:inherit;
    border:0;
}

form input[type=submit] {
    font-family:Playfair Display, georgia, serif;
    display:block;
    padding:10px;
    margin-top:10px;
    overflow:auto;
    border:1px solid #fff;
}

ul, ol {
    line-height:200%;
}

.content {
    margin:0 15%;
    padding:15px;
}

.contentmargin {
    margin:20px 15%;
    max-width:70%;
}

.flex {
    display:flex;
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    justify-content:space-around;
    flex-flow:row wrap;
}

.floatL  {
    display:inline;
    float:left;
}

.floatR {
    display:inline;
    float:right;
}

.allcaps {
    text-transform: uppercase;
}

.upperright {
    position:absolute;
    right:10px;
    top:10px;
    z-index:100;
}

/* Anchor offset because of header  */

.anchor {
    padding-top:80px;
    display:block;
}

.button a {
    position:relative;
    padding:15px 50px;
    font-family:Playfair Display;
    font-size:110%;
    border:1px solid;
    border-radius:5px;
    text-decoration:none;
    -webkit-transition: 0.3s ease-in-out;
    transition:0.3s ease-in-out;
}


.button .icon {
    color:#9973b5;
    margin-right:10px;
}

.remove {
    background-color:#fff;
    font-weight:bold;
    cursor:pointer;
    width:15px;
    border:1px solid #ddd;
    border-radius:8px;
    overflow:hidden;
    text-align:center;
    line-height:14px;
    color:red;
    font-size:10px;
    z-index:100;
    padding:0;
}

.lightbg, .lightbg a {
    color:#5C5C5C;
    border-color:#5C5C5C;
}


.lightbg a:hover {
    color:#470065;
    border-color:#470065;
}


.darkbg, .darkbg a {
    color:#fff;
    border-color:#ddd;
}


.darkbg a:hover {
    color:#fff;
    border-color:#fff;
    background-color:#5c5c5c;
}


.wrap {
    position:relative;
    height:2000px;
    overflow:auto;
}

.transparent {
    background-color:transparent;
}

.transparent figcaption {
    padding:10px;
    margin-top:15px;
    border:1px solid #ddd;
    border-radius:10px;
    background-color:#fff;
    max-width:95%;
}

.circ {
    border-radius:100%;
}

.nav {
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display:flex;
    width:100%;
    justify-content:center;
    font-size:100%;
}

.navbar {
    width:100%;
    height:75px;
    position:fixed;
    top:0;
    left:0;
    z-index:4;
    background:#000;
}

.navbar a:link, .navbar a:visited {
    display:inherit;
    color:#9973b5;
    padding:10px;
    text-decoration:none;
}

.navbar a:hover {
    color:#ddd;
}

.navbar a:active {
    color:#fff;
}

.navbar ul {
    list-style:none;
    padding:0 15px 0 15px;
    z-index:8;
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display:flex;
}

.navbar ul li {
    display:inline-block;
    position:relative;
}

.nav1, .nav2, .toplogo, .txtlogo {
    flex: 1 100%;
}

.toplogo {
    width:100%;
    text-align:center;
    position:absolute;
    top:10px;
    z-index:7;
}

.topcircle {
    display:block;
    position:relative;
    background:#000;
    width:228px;
    z-index:5;
}

.navbar label {
    display:none;
    color:#ddd;
    font-size:200%;
    padding:15px;
}

.navbar input[type=checkbox] {
    display:none;
}

.footer {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content:space-around;
    font-size:90%;
    margin:0 50px 10px 50px;
}

.footer-info {
    text-align:center;
}

.footer-info p {
    text-align: center;
}

.footer a:link, .footer a:visited {
    color: #5C5C5C;
    text-decoration:none;
}

.footer a:hover {
    color: #470065;
}

.footer dl {
    padding:20px;
}

.footer dt, .footer h3 {
    padding:5px;
    font-family:Playfair Display;
    font-size:115%;
    border-bottom:1px solid #fff;
}

.footer dd {
    padding:5px;
    margin:0;
}

.noline {
    text-decoration:none;
}

.socialmedia a {
    padding:5px;
    font-size:125%;
}

.hero {
    position:relative;
    overflow:hidden;
    background: url("hero2.jpg") no-repeat scroll 50% 50%;
    background-size:cover;
    height:700px;
    z-index:1;
}

.herocontent {
    padding-left:20%;
    padding-top:350px;
}

.map {
    background-color:#fff;
    padding:15px;
    max-width:100%;
    overflow:hidden;
    text-align:center;
}

.media {
    text-align:center;
    max-width:100%;
    margin:15px;
}

.video {
    background-color:#fff;
    max-width:640px;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}

.video video {
    border:1px solid #ddd;
}

iframe {
    max-width:100%;
}

.topimg {
    margin-top:-175px;
    position:relative;
    overflow:hidden;
    height:175px;
    z-index:1;
}

.topfitting {
    background: url("images/top/topimg02.jpg") left top no-repeat, url("images/top/topimg01.jpg") right top no-repeat;
    background-size:50%;
}

.topabout {
    background: url("images/top/topimg01.jpg") left top no-repeat, url("images/top/topimg11.jpg") right top no-repeat;
    background-size:50%;
}

.topcollections {
    background: url("images/top/topimg05.jpg") left top no-repeat, url("images/top/topimg07.jpg") right top no-repeat;
    background-size:50%;    
}

.topevents {
    background: url("images/top/topimg11.jpg") left top no-repeat, url("images/top/topimg12.jpg") right top no-repeat;
    background-size:50%;  
}

.topcontact {
    background: url("images/top/topimg05.jpg") left top no-repeat, url("images/top/topimg06.jpg") right top no-repeat;
    background-size:50%;  
}

.tophowitworks {
    background: url("images/top/topimg08.jpg") left top no-repeat, url("images/top/topimg10.jpg") right top no-repeat;
    background-size:50%;  
}

.topshowroom {
    background: url("images/top/topimg01.jpg") left top no-repeat, url("images/top/topimg05.jpg") right top no-repeat;
    background-size:50%;  
}

.toptestimonials {
    background: url("images/top/topimg07.jpg") left top no-repeat, url("images/top/topimg02.jpg") right top no-repeat;
    background-size:50%;  
}

.topsubbox {
    background: url("images/top/topimg09.jpg") left top no-repeat, url("images/top/topimg05.jpg") right top no-repeat;
    background-size:50%;  
}

.toprefer {
    background: url("images/top/topimg02.jpg") left top no-repeat, url("images/top/topimg05.jpg") right top no-repeat;
    background-size:50%;  
}

.topfabrics {
    background: url("images/top/topimg07.jpg") left top no-repeat, url("images/top/topimg09.jpg") right top no-repeat;
    background-size:50%;  
}

.logosm {
    width:222px;
    height:50px;
}

.circ-br {
    width:100%;
    display:block;
    text-align:center;
    color:#fff;
    font-size:50%;
    letter-spacing:15px;
    margin:20px 0;
}

/*SLAB STYLING*/

.slabbg {
    width:100%;
    position:absolute;
    height:75%;
    background-color:#fff;
    top:12.5%;
    left:0;
    z-index:1;
}

.slab {
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display:flex;
    flex-flow:row;
    justify-content: space-around;
    position:relative;
    padding:0 10%;
    margin:100px 0;
    align-items:center;
}

.slab p {
    font-family:Playfair Display, georgia, serif;
}

.slab > p {
    padding:50px;
    text-align:center;
}

.slab > p:first-of-type::first-line {
    font-size:200%;
    line-height:200%;
    color:#470065;
}

.slab p, .slab q, .slab blockquote, .slab div {
    z-index:2;
    text-align:center;
}

.slab figure {
    z-index:2;
    margin:0 20px;
}

.slab a {
    z-index:2;
}

.slab .conj {
    font-family:Pinyon Script, cursive;
    background-color:transparent;
}


/* SWIPER */

.swiper-container {
    width: 100%;
    margin:10px 0;
}

.gallery-top {
    padding: 10px 0;
}

.gallery-top .swiper-slide {
    width:auto;
    text-align:center;
    align-self:center;
}

.gallery-top img {
    max-width:100%;
}

.gallery-thumbs {
        box-sizing: border-box;
        padding: 10px 0;
    }
    
.gallery-thumbs .swiper-slide {
        height: 100%;
        opacity: 0.4;
        width:auto;
    }
    
.gallery-thumbs .swiper-slide-active {
        opacity: 1;
    }
    
.gallery-thumbs img {
    max-height:100px;
    border:1px solid #fff;
}

.gallerycontent {
    display:flex;
    flex-flow:row wrap;
    max-width:100%;
}

.sidegallery {
    margin:15px;
    min-width:45%;
    flex:45%;
}

.sidegallery .swiper-container {
    margin:0;
}

.sidegallery .gallery-top {
    padding:0;
    max-height:700px;
}

.sidegallery .gallery-top img {
    max-height:700px;
}

.sidegallery .gallery-thumbs .swiper-slide {
    width:75px;
    height:75px;
    background-size:cover;
    border:1px solid #fff;
}

.half {
    flex:50%;
}

/* TESTIMONIALS */
 
.testimonials blockquote {
    background-color:#fff;
    padding:25px;
    border-radius:5px;
    box-shadow: 5px 5px 15px #ccc;
    text-indent:50px;
}

.testimonials blockquote:before {
    content:"\201C";
    font-size:1300%;
    color:#ddd;
    font-family:Playfair Display, georgia, serif;
    position:absolute;
    margin-top:-90px;
    margin-left:-32.5%;
    text-indent:0;
}

.testimonials blockquote:after {
    margin-top:25px;
    border: 15px solid transparent;
    content: " ";
    height:0;
    width:0;
    position:absolute;
    border-top: 15px solid #fff;
    left:65%;
}

.testimonials blockquote + figure {
    width:100%;
    margin-left:35%;
    display:flex;
    justify-content:flex-end;
    align-items:center;
    background-color:transparent;
}

.testimonials blockquote + figure img {
    max-height:100px;
    margin:15px;
    border:2px solid #fff;
}

.testimonials blockquote + figure figcaption {
    padding:0;
    max-height:100px;
    font-family: Playfair Display, georgia, serif;
    font-size:150%;
    font-style:italic;
    color:#470065;
    border-bottom:2px solid #fff;
    border-top:2px solid #fff;
}

/*REFER A FRIEND*/

.refer {
    border-radius:10px;
    padding:10px;
    position:relative;
}

/*INSTAGRAM FEED*/

.bgstripe {
    width:100%;
    position:absolute;
    top:55px;
    left:0;
    height:100px;
    background-color:#fff;
    display:block;
    z-index:1;
}

.instafeed {
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display:flex;
    flex-flow:row wrap;
    justify-content:space-around;
    position:relative;
    align-items:center;
    margin:15px 0 15px 0;
}

.instafeed .instatext {
    order:5;
    max-width:150px;
    z-index:2;
    font-family:Playfair Display, georgia, serif;
    text-align:center;
}

.instafeed .icon {
    order:6;
    max-width:50px;
    font-size:300%;
    z-index:2;
}

.instapost {
    background-color:#fff;
    max-width:210px;
    max-height:210px;
    padding:5px;
    position:relative;
    z-index:2;
    margin:0;
}

.instapost img {
    width:200px;
    height:200px;
    display:block;
}

.instapost figcaption {
    width:170px;
    height:170px;
    text-align:justify;
    position:absolute;
    overflow:hidden;
    top:5px;
    left:5px;
    padding:15px;
    color:#fff;
    background-color:#000;
    opacity:0;
    transition:0.3s ease-in-out;
    -webkit-transition: 0.3s ease-in-out;
}
 
.instapost:hover figcaption {
    opacity:.75;
}

/* HOW IT WORKS FRONT PAGE */

.howitworks {
    padding:0 15%;
}

.howitworks, .howitworks figure {
    position:relative;
}

.howitworks .slabbg {
    height:50%;
    top:25%;
}
 
.howitworks figure img {
    opacity:.5;
    transition:0.3s ease-in-out;
    -webkit-transition: 0.3s ease-in-out;
}

.howitworks figure:hover img {
    opacity:1;
}

.howitworks figure:hover figcaption {
    opacity:0;
}

.howitworks figure {
    overflow:hidden;
    max-width:350px;
    flex:1 0 30%;
}
 
.howitworks figcaption {
    position:absolute;
    top:42%;
    left:0;
    padding:15px 0;
    border-top:1px solid #470065;
    border-bottom:1px solid #470065;
    width:100%;
    background-color:#fff;
    color:#000;
    font-family:Playfair Display, georgia, serif;
    text-align:center;
    transition:0.3s ease-in-out;
    -webkit-transition: 0.3s ease-in-out;
}

.fit {
    flex-flow:row;
    margin-top:50px;
}

.fit p {
    flex:1 2 20%;
}

.fit p::first-line {
    font-size:200%;
    line-height:200%;
    color:#470065;
}

.sample .flexorder3 {
    flex:20%;
}

.sample .flexorder3 img {
    max-width:60%;
}

.sample figcaption {
    font-size:80%;
}
 
/*Collection Styling*/

.slab .collection {
    width:200px;
    height:200px;
    padding:15px;
    border-radius:0;
    background-position:center;
    background-size:cover;
    background-color:#ddd;
    border: 5px solid #fff;
    z-index:2;
    text-align:center;
    margin:10px 5px;
    transition:0.3s ease-in-out;
    -webkit-transition: 0.3s ease-in-out;
}

.slab .collection:hover {
    box-shadow:0 0 0 1px #470065;
    z-index:1;
    height:220px;
    width:220px;
    margin:0 5px;
}

.readycoll {
    background-image: url("images/collback/ready.jpg");
}

.readyselectcoll {
    background-image: url("images/collback/readyselect.jpg");
}

.customcoll {
    background-image: url("images/collback/custom.jpg");
}

.menscoll {
    background-image: url("images/collback/mens.jpg");
}

.uniformscoll {
    background-image: url("images/collback/uniforms.jpg");
}

.collection dt {
    font-family: Playfair Display, georgia, sans-serif;
    font-size:200%;
    margin-bottom:20px;
    color:#470065;
    transition:0.3s ease-in-out;
    -webkit-transition: 0.3s ease-in-out;
}

.collection:hover dt {
    margin-top:10px;
}

.collection dd {
    margin:0 auto;
    width:160px;
    line-height:175%;
    font-style:italic;
    
}

/* MEDIA QUERIES */




/* Ipad landscape - fix slab */

@media all and (min-width:1025px) and (max-width:1300px) {
    .slabbg {
        display:none;
    }
    .slab > p, .slab div {
        background-color:#fff;
        border-radius:5px;
    }
    
    .slab .collection {
        width:150px;
        height:150px;
        font-size:75%;
    }
    
    .slab .collection:hover {
        width:170px;
        height:170px;
    }
    
}

/* Large only */

@media all and (min-width:1024px) {
            
    .slab > p {        
        flex: 1 1 50%;
    }
    
}

/* Large (IPad and small windows) */

@media all and (max-width:1024px) {
    
    .anchor {
        padding-top:30px;
    }
        
    .slabbg {
        display:none;
    }
    
    .slab {
        padding:0;
        flex-flow:column;
        flex-shrink:0;
    }
    
    .slab figure {
        max-width: 100%;
        order: 1;
    }
    
    .slab > p, .slab div {
        order: 2;
        background-color:#fff;
    }
    
    .slab > div {
        width:100%;
        margin-top:16px;
    }
    
    .fit {
        flex-flow: row wrap;
        align-items:stretch;
    }
    .fit p {
        flex:40%;
        padding:20px;
    }
    .fit figure {
        flex:30%;
    }
    
        
    .sample .flexorder3 {
        order:3;
        max-width:50%;
    }
    

    
    .howitworks {
        flex-flow: row wrap;
    }
    
    .howitworks figure {
        max-width:40%;
    }
    
    .howitworks figcaption {
        font-size:60%;
        top:37%;
    }
    
    .conj {
        display:none;
    }
    
}


/* Medium-Large screens */
@media all and (min-width: 771px) {
    
    figure {
        max-width:50%;
    }
    
    .topcircle {
        display:block;
        position:relative;
        width:300px;
        height:560px;
        border-radius:50px;
        margin-top:-350px;
    }


    .toplogo {
        top:370px;
        left:0;
    }

    .txtlogo-fixed .txtlogo {
        position:fixed;
        top:10px;
        left:calc(50% - 114px);
    }

    .nav1 {
        float:left;
    }

    .nav2 {
        float:right;
    }
    
    .footer-info {      
        padding:20px;
        margin:20px;
    }
    
    .footer blockquote {
        width:100%;
        margin-top:0;
    }
    
    .hero {       
        margin-top:-150px;
    } 

    
}



/* Medium Screens and Small */
@media all and (max-width:770px) {

    
    figure {
        max-width:50%;
    }
    
    blockquote {
        font-size:100%;
    }

    
    .nav {
        margin-bottom:10px;
    }
    
    .toplogo {
        position:fixed;
        width:auto;
    }
    
    .flowerlogo {
        display:none;
    }
    
    .topcircle {
        width:114px;
    }
    
    .txtlogo img {
        height:27px;
        width:114px;
    }
    
    .navbar {
        height:50px;
    }
    
    .navbar label {
        font-size:120%;
        padding:12px;
    }
          
    .navbar ul {
        flex-direction:column;
        background-color:#000;
        display:none;
        margin:0;
    }
    
    .navbar label {
        display:block;
    }
    
    .navbar input:checked ~ ul {
        display:flex;
    }
    
    .contentmargin {
        margin:50px 0 0 0;
    }
    
    .slab .shrink50 {
        max-width:50%;
    }
    
    .slab > p, .slab div {
        padding:10px;
    }

    
    .testimonials blockquote {
        margin:0;
        padding:10px;
    }
    
    .testimonials blockquote:before {
        margin-left:-51%;
    }
    
    .testimonials blockquote:after {
        margin-top:8px;
    }
    
    .testimonials blockquote + figure {
        margin-left:0;
    }
    
}


/* Small screens */
@media all and (max-width: 500px) {
    
    figure {
        max-width:100%;
    }
    
    
    .footer {
        flex-flow:column;
    }
    
    .footer dl {
        padding:5px;
        text-align:center;
    }
    
    .footer-info {
        order: 2;
    }
    
    .footer blockquote {
        order:3;
        font-size:100%;
        padding:0;
        margin:10px 0;
    }
    


    .hero {
        background: url("hero2.jpg") no-repeat scroll 75% 50%;
        background-size:cover;
        height:600px;
        margin-top:-60px;
    }
    
    .herocontent {
        padding-left:10px;
        padding-top:250px;
    }
    
    .content {
        margin:20px 0 0 0;
    }
    
    .button a {
        padding:10px;
    }
    
    .bgstripe {
        display:none;
    }
    
    .instapost {
        max-width:20%;
        padding:0;
    }
    
    .instapost img {
        max-width:75px;
        max-height:75px;
    }
    
    .instapost figcaption {
        display:none;
    }
    
    
}

/* Phone landscape mode */
@media all and (max-height:420px) {
    .toplogo, .navbar {
        position:absolute;
    }
    
    .gallery-top img {
        max-height:400px;
    }

}