@font-face {    
    src: url(../fonts/beba-font/BebasNeue-Regular.otf);
    font-family:'BebasNeue-Regular';
}

@font-face {    
    src: url(../fonts/beba-font/BebasNeue-Bold.otf);
    font-family:'BebasNeue-bold';
}
@font-face {    
    font-family:'Lato';
}

@font-face {    
    font-family:'Lato';
}

@font-face {    

    font-family:'Lato';
}

body {
	margin:0;
	padding:0;
	font-family: 'Lato';
    color: #fff;
}

/* ======DEFAULT BROWSER STYLE========= */

a:focus{
	text-decoration: none;
}
a:focus,.btn:focus,.btn:active:focus,
button:focus,input[type="file"]:focus, 
input[type="radio"]:focus, 
input[type="checkbox"]:focus{
	outline:transparent;
}

/* =========== SPACE CLASSES=========== */

.space5{margin-top: 5px;}
.space10{margin-top: 10px;}
.space15{margin-top: 15px;}
.space20{margin-top: 20px;}
.space25{margin-top: 25px;}
.space30{margin-top: 30px;}
.space40{margin-top: 40px;}
.space50{margin-top: 50px;}
.space60{margin-top: 60px;}
.space70{margin-top: 70px;}
.space80{margin-top: 80px;}
.space100{margin-top: 100px;}
.pad0{padding: 0;}
.space90{margin-top: 90px;}


section {
    padding: 80px 0 60px;
    position: relative
}

@media screen and (max-width:39.9375em) {
    section {
        padding: 40px 0!important;
    }
}

.animation {
    -webkit-transition: all .6s ease-out;
    -moz-transition: all .6s ease-out;
    -o-transition: all .6s ease-out;
    -ms-transition: all .6s ease-out;
    transition: all .6s ease-out;
}

@media screen and (max-width:75em) {
    .animation {
        -webkit-transform: none!important;
        -moz-transform: none!important;
        -o-transform: none!important;
        -ms-transform: none!important;
        transform: none!important;
    }
}

html , body{
    height: 100%;
    width: 100%;
}


h1 , h2 , h3 , h4{
    font-family:'BebasNeue-bold';
}


::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color:#fff !important;
}
::-moz-placeholder { /* Firefox 19+ */
  color:#fff !important;
}
:-ms-input-placeholder { /* IE 10+ */
  color:#fff !important;
}
:-moz-placeholder { /* Firefox 18- */
  color:#fff !important;
}

/*=================== header =================*/

.section1 {
    background: url(../img/main-banner.png) no-repeat , url(../img/Background-img.png) repeat-y;
    height: 100%;
    width: 100%;
    display: table;
    background-size: 100%;
    background-position: top center , bottom center;
    position: relative;
}

.pos-div {
    /* position: absolute; */
    bottom: 20px;
    left: 0;
    right: 0;
    display: block;
    width: 90px;
    margin: 0 auto;
    margin-top: 120%;
}

.title {
    font-size: 65.42px;
    text-align: center;
    margin-top:100px;
}

.sub-title {
    font-size: 30px;
    text-align: center;
    color: #f1ca30;
    text-transform: uppercase;
    font-family: 'Lato';
}

.form-box , .box {
    width: 744px;
    display: block;
    margin: 0 auto;
}


.form-title{
    padding: 10px;
    text-align: center;
    background-color:#fff;
    border-radius: 10px;
    margin:30px 0; 
}

.form-title .sub-title {
    font-size: 21px;
    color: #000;
    margin: 0;
    text-transform: none;
    font-family:'Lato';
}


.form-content .form-control{
    border:2px solid #ffffff;
    box-shadow: none;
    background-color: transparent;
    color: #ffffff;
}

/*=============== radio button css ==================*/

.radio {
  padding-left: 20px; }
  .radio label {
    display: inline-block;
    position: relative;
    padding-left: 5px; }
    .radio label::before {
      content: "";
      display: inline-block;
      position: absolute;
      width: 17px;
      height: 17px;
      left: 0;
      margin-left: -20px;
      border: 1px solid #cccccc;
      border-radius: 50%;
      background-color: #fff;
      -webkit-transition: border 0.15s ease-in-out;
      -o-transition: border 0.15s ease-in-out;
      transition: border 0.15s ease-in-out; }
    .radio label::after {
      display: inline-block;
      position: absolute;
      content: " ";
      width: 11px;
      height: 11px;
      left: 3px;
      top: 3px;
      margin-left: -20px;
      border-radius: 50%;
      background-color: #555555;
      -webkit-transform: scale(0, 0);
      -ms-transform: scale(0, 0);
      -o-transform: scale(0, 0);
      transform: scale(0, 0);
      -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
      -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
      -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
      transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); }
  .radio input[type="radio"] {
    opacity: 0; }
    .radio input[type="radio"]:focus + label::before {
      outline:none; 
  }    
    .radio input[type="radio"]:checked + label::after {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      -o-transform: scale(1, 1);
      transform: scale(1, 1); }
    .radio input[type="radio"]:disabled + label {
      opacity: 0.65; }
      .radio input[type="radio"]:disabled + label::before {
        cursor: not-allowed; }
  .radio.radio-inline {
    margin-top: 0; }

/*================== radio css end ===============*/

.second-tile.sub-title {
    font-size: 17px;
}

.btn_submit{
    background-color: #f1ca30;
    padding: 10px 50px;
    margin-top: 10px;
    transition: 0.5s;
    color: #0f0c0a;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
    font-family:'Lato';
    font-size: 16px;
}

.btn_submit:hover{
    background-color:transparent;
    color: #f1ca30;
    border:1px solid #f1ca30;
}

.link-img{
    width:25px;
}

.social_ul{
    text-align: center;
}

.social_ul li a span {
    color: #fff;
    font-size: 20px;
    position: relative;
    top:2px;
}

.social_ul li a:hover{
    text-decoration: none;
}

.hr{
    margin: 50px 0;
    border-top:3px solid #fff;
    display: block;
}

.text {
    font-size: 18px;
    text-align: justify;
    margin:50px 0;
}

.f700{
    font-family:'Lato';
}

.lowercase.sub-title{
    text-transform: none;
}

.name-title{
    font-size: 25px;
    text-align: center;
    margin:30px 0;
}

.name-text{
    text-align: center;
}

.t-shirt_ul li {
    width: 25%;
    margin-left: -100px;
}

.t-shirt_ul {
    text-align: center;
}

.text-center.list-inline li{
    font-size: 30px;
    text-transform: uppercase;
}

.btn_price{
    background-color: transparent;
    border:2px solid #fff;
    vertical-align: middle;
    padding: 6px 20px;
    color: #fff;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
    border-radius:6px;
}

.btn_price img {
    width: 80px;
    position: relative;
    top: -4px;
}

.btn_price:hover{
    background-color: #f1ca30;
    color: #fff;
    border:2px solid #f1ca30;
}

.btn_price .price_tag {
    font-size: 25px;
    font-family: 'Lato';
    position: relative;
    top: 0px;
}

.text_span{
    font-size: 12px;
    position: relative;
    top: -5px;
}

.btn_compare{
    background-color:transparent;
    border:2px solid #f1ca30;
    color: #f1ca30;
    font-size: 30px;
    font-family: 'BebasNeue-bold';
    padding:4px 10px; 
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
    border-radius:6px;
}

.btn_compare:hover{
    color: #000;
    background-color: #f1ca30;
}

/*============== 7-12 =================*/

.yellow{
    border-top-color: #f1ca30; 
}

.text1{
    text-align: center; 
    color: #fff;  
    font-size:20px; 
}

.text1 a{
    color: #fff;
    font-family: 'BebasNeue-bold';    
    letter-spacing: 1px; 
}

.text1 a:hover{
    text-decoration: none;
}

/*================== media queries ===============*/

@media(max-width:1440px){
    .base-text{
        width: 400px;    
    }    
}


@media(max-width:1199px){
    .title {
        font-size: 65.42px;
        text-align: center;
        margin-top: 0;
    }

    .pos-div {    
        margin-top: 105%;
    }

    .form-box, .box {
        width: 80%;        
    }

    .lowercase.sub-title {     
        margin-bottom:40px;
    }

    .t-shirt_ul li {
        width: 25%;
        margin-left: -22px;
    }

    .space100 {
        margin-top: 84px;
    }

    .text {             
        margin: 25px 0;
    }
}    

@media(max-width:991px){

    .base-text {
        width: 157px;
    }

    .pos-div {
        margin-top: 56%;
    }

    .space90 {
        margin-top: 55px;
    }

    .form-box, .box {
        width: 100%;
    }

    .title {
        font-size: 50px;        
    }
    .sub-title {
        font-size: 20px;        
    }

    .text {
        font-size: 16px;    
    }
}

@media(max-width:767px){
    .base-text {
        width: 182px;
        margin-top: 267px;
    }
    .pos-div {
        margin-top:50px;
        width: 40px;
    }

    .title {
        font-size: 30px;
    }
    .sub-title , .form-title .sub-title{
        font-size: 16px;
        line-height: 24px;
    }

    .social_ul li a span {
        color: #fff;
        font-size: 14px;
        position: relative;
        top: 2px;
    }

    .social_ul li{
        display: block;
        margin: 10px 0;
    }

    .text {
        font-size: 14px;
        margin: 10px 0;
        text-align: center;
    }

    .name-title {
        font-size:18px;    
        margin-bottom: 10px;
    }

    .name-text {    
        margin-bottom: 20px;
    }

    .t-shirt_ul li {
        width: 50%;
        margin-left: -2px;
        margin-bottom: 20px;
    }

    .text-center.list-inline li {
        font-size: 30px;
        text-transform: uppercase;
        margin-bottom: 10px;
    }
    .container{
        padding: 0 30px;
    }
}