*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

@font-face {
    font-family: "Avenir Next";
    src: url(avenirnext.woff);
  }

html,body {   
max-width: 100%;
overflow-x: hidden;
list-style: none;
text-decoration: none;
}

body {
    
    /*background-image: url(market_assets/images/main-banner.png);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover; 
    background-position-y: -50%;
      */
}


/* Navigation   */


#check  {

    display: none;
} 


#btn, #cancel {

    font-size: 30px;
    color: white;
    float: right;
    line-height: 80px;
    margin-right: 40px;
    cursor: pointer;
    display: none;
}


.logo {
   
    height: 40px;
    width: auto;
    margin-top: 20px;
    margin-left: 20px;
      
}

.wave_cloth_01 {
    height: 120px;
    position: relative;
    background: url(images/rectangle_1.jpg) no-repeat center 0;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    -webkit-box-shadow: 0 0 108px 12px #000000;
    -moz-box-shadow: 0 0 108px 12px #000000;
    box-shadow: 0 0 108px 12px #000000;
    padding: 15px 30px;
}
.l-constrained-2 {
    margin: 0 auto;
    padding: 0 0px;
    position: relative;
    width: 100%;
    max-width: 1392px;
}
.ytranker_logo_black_png {
  float: left;
}

nav {

    background-color: transparent;
    height: 100px; 
    width: 100%;
    position: absolute;
    z-index: 2;
       
    } 

nav ul {
  float: right;
  margin-right: 20px;
  width: 80%;
  padding-left:2rem;
} 

/* nav ul li {*/
 
/* display: inline-block;*/
/* line-height: 80px;*/
/* margin: 0px;*/

/*}*/
nav ul li {
    display: inline-block;
    /*line-height: 100px;*/
    margin: 0 7px;
    font-weight: 900 !important;
}
ul {
    list-style: none;
}
/*nav ul li a {*/

/*    font-family: "Varela Round";*/
/*    color: white;*/
/*    font-size: 17px;*/
/*    padding: 7px 13px;*/
/*    border-radius: 3px;*/
/*    text-transform: uppercase;*/
/*    text-decoration: none;*/
    
/*} */
nav ul li a {
    font-family: 'tawk-icon';
    color: white;
    font-size: 17px;
    padding: 7px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    text-decoration: none !important;
}


.active, nav ul li a:hover {
    background: #c20f17;
    color: white;
    transition: .5s;
}


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


nav {width: 100%;}
.logo {height: 40px;width: auto;margin-top: 20px;margin-left: 20px;}
ul{display: none;
margin-right: 0px;
width: 100%;
transform: scale(1,0);
transform-origin: top;
transition: transform 400ms ease-in-out;
}
nav ul li {
background-color: black;
width: 100%;
margin: 0 0px;
line-height: 50px;
display: block;
} 

nav ul li a {display: block;} 
nav ul li a:hover {background-color: black;}

#btn {font-size: 30px;color: white;line-height: 80px;cursor: pointer;display: inline-block;}
#check:checked ~  ul{display: block;margin-right: 0px;width: 100%;transform: scale(1,1); }

#check:checked ~  label #btn {

display: none;

    
}

#check:checked ~  label #cancel {

font-size: 30px;
color: white;
line-height: 80px;
margin-right: 20px;
cursor: pointer;
display: inline-block;

    
}


}

/* End - Navigation */


h1 {

    margin: auto;
    font-family: "Avenir Next";
    font-size: 40px;
    text-align: center;
    margin-top: 100px;
    margin-bottom: 70px;
}


h2 {

    font-family: "Avenir Next";
    font-size: 40px;
    margin-bottom: 10px;
    

}

h3 {

    font-family: "Avenir Next";
    font-size: 20px;
    margin-top: 10px;
    margin-bottom: 10px; 

}

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

h2 {

    font-family: "Avenir Next";
    font-size: 25px;
    margin-bottom: 10px;
    

}

h3 {

    font-family: "Avenir Next";
    font-size: 25px;
    margin-top: 10px;
    margin-bottom: 10px; 

}    
    
}

.container {

    max-width: 1000px;
    margin: 0px auto;
}

.big-img {

    display: block;
    margin: auto;
    text-align: center;
    width: 100%;
    /* margin: 10px auto; */
    
    
    
} 


.big-img img {

   height: auto;
   width: 100%;
   /* margin: 10px auto; */
   
   
   
} 

.left-column {
    float: left;
    width: 480px;
     
} 

.right-column {
  
    float: right;
    width: 480px;
  
} 

.small-imgs {

text-align: center;
margin: auto;


} 

.small-imgs img {

height: auto;
width: 100%; 
border: 3px solid #333;
margin-bottom: 70px


} 


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

    h1 {

margin: auto;
font-family: "Avenir Next";
font-size: 40px;
text-align: center;
margin-top: 100px;
margin-bottom: 50px;
}





    .small-imgs {

    text-align: center;
    margin: auto;

} 


    .left-column {
    
    float: none;
    width: 100%;
    
    
} 

.right-column {
   
    float: none;
    width: 100%;
} 

.big-img img {

height: auto;
width: 70%;
margin-bottom: 10px

} 


.small-imgs img {

height: auto;
width: 70%; 
border: none;
/* margin: 10px auto; */
margin-bottom: 20px

}

}


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

  /*  body {
    
   background-image: url(market_assets/images/main-banner.png);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size:cover;
    background-position-y: -62%;
    
     
}*/


h1 {

margin: auto;
font-family: "Avenir Next";
font-size: 40px;
text-align: center;
margin-top: 100px;
margin-bottom: 50px;
}



    .small-imgs {

text-align: center;
margin: auto;



} 


    .left-column {
    
    float: none;
    width: 100%;
    
    
} 

.right-column {
   
    float: none;
    width: 100%;
    
    
    
} 

.big-img img {

height: auto;
width: 80%;


} 


.small-imgs img {

height: auto;
width: 80%; 
border: none;
/* margin: 10px auto; */
margin-bottom: 10px

}



}
@media (max-width: 991px){
   nav ul {
   padding-left:0px !important;
   }
    nav ul li a {
        display: block;
        padding: 1px 22px !important;
        
    } 
    
  #check:checked~ul {
    z-index: 999;
    position: relative;
        margin-right: 0px;
    width: 100%;
    transform: scale(1,1);
  }
    
}
@media screen and (max-width: 767px) {
    .logo-img{padding:7px 15px;}
    nav .toggle-icon {
    left: inherit !important;
    top: 0px;
    right: 0;
  }

  .ytranker_logo_black_png {
    width: 150px;
    height: auto;
  }

  #btn {
    line-height: 65px;
  }

  .wave_cloth_01 {
    padding: 15px 0;
  }

  
}