/* navbar styles */
#navbar{
    width: 100%;
    
    position: fixed;
    background-color: rgba(255, 255, 255, 0);
    z-index: 999;
    
}



 
 /* list item */
li{
    padding:10px 10px; 
}

/* shop button in navbar style */
#shopBtn{
    width: 60px;
}

/*shop page style */
.shop{
    padding-top: 25px;
    margin: auto;
}
/*shop page style*/
.shopRow{
    margin-top: 120px;
}

/* navbar toggle button small devices */
.navbar .navbar-toggler-icon{
    color: #6D1A9E;
}

/* button style */
.btn-default{
    border-radius:35px;
    background-color: #6D1A9E;
    color: white;
            }

/* navbar hover and focus */ 
.nav-item a:hover, .nav-item a:focus{
    background-color: #C179B9;
    color: white;
}

/* contact form success message */
.alert-success{
    background: #6D1A9E;
    color: #f1f1f1;
}

/* cookie policy table styles */
.bg-table{
    background: #6D1A9E;

}

table.table-bordered{
    border:1px solid #2F242C;
    margin-top:20px;
  }
table.table-bordered > thead > tr > th{
    border:1px solid #2F242C;
}
table.table-bordered > tbody > tr > td{
    border:1px solid #2F242C;
}

/* .bgimg {
    background-image: url('../images/test.jpeg');

    opacity: .6;
} */

.container{
    width: 60%;
    margin: auto;
}

/* navbar logo style */
#brand{
    height: 60px;
}

/* button hover and focus */
.btn-default:hover, .btn-default:focus{
   background-color: #C179B9;
   color: #f1f1f1;
}

/* link hover and focus */
 a:hover, a:focus {
    color: #C179B9;
}

#top-container{
    padding-top:95px; 
}

/* hard line in policy's */
hr{
    background-color: #6D1A9E;
    color: #6D1A9E;
}

/* fonts */
div h2, p {
    
    font-family: Georgia, Times, "Times New Roman", serif;
    line-height: 1.6;
    color:#424242;
     
    
}

/* call to action styles */
#section0 #cta{
 
    position: absolute;
    z-index: 3;
       color: white; 
    
    width: auto;
		left: 43%;
        top: 90%;
        /* 
		* Preventing flicker on some browsers 
		* See http://stackoverflow.com/a/36671466/1081396  or issue #183
		*/
		-webkit-transform: translate3d(0,0,0);
		-ms-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);

    
}
/* end of video text */
#section0 #endvideoText{
 
    position: absolute;
    z-index: 4;
     
    
    width: 30%;
		left: 23%;
        top: 40%;
        /* 
		* Preventing flicker on some browsers 
		* See http://stackoverflow.com/a/36671466/1081396  or issue #183
		*/
		-webkit-transform: translate3d(0,0,0);
		-ms-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);

    
}

/* contact form */
#contact{
    padding-top:95px; 
    padding-bottom:75px;
}
 form{
    
    width: 60%;
    margin: auto;
} 
.text-error{color: #C179B9;}

/* section styles */
section{
    
    text-align:center;
    overflow: hidden;
    
}


/* section links */
section,  a{
    padding-top:20px; 
    color: #6D1A9E;
}


/* video styles */
#myVideo{
    position: absolute;
    right: 0;
   bottom: 0px;
    top:75px;
    right:0;
    width: 100%;
    
    height: 90%;
     
    /*  background-size: 100% 100%; */  
    background-color: white; /* in case the video doesn't fit the whole page*/
    background-image: /* our video */;
    background-position: center center;
    background-size: contain;
     object-fit: contain;   /*cover video background */
     
    z-index:1;
}


video::-webkit-media-controls {
    display:none !important;
  }
 /* hide the default Chrome video player styling */

video::-webkit-media-controls-overlay-enclosure {
    display:none !important;
}

video::-webkit-media-controls-enclosure {
    display:none !important;
}

video::-webkit-media-controls {
    display:none !important;
}

 

  /* Layer with position absolute in order to have it over the video
	* --------------------------------------- */
	#section0 .layer{
		position: absolute;
		z-index: 4;
		width: 100%;
		left: 0;
        top: 43%;
        color: white;
		/* 
		* Preventing flicker on some browsers 
		* See http://stackoverflow.com/a/36671466/1081396  or issue #183
		*/
		-webkit-transform: translate3d(0,0,0);
		-ms-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
	}
	/*solves problem with overflowing video in Mac with Chrome */
	#section0{
        overflow: hidden;
        
    }

   /*  footer styles */
    #section6{
       
        background-color: #6D1A9E;
        color: #f1f1f1;
    }

    #section6 .container{
        
        margin:auto;
        width: 100%;
    }
   
    .footer-margin{
        padding-top:20px;
        
    }
    .footer-text{
        color: #C179B9;
        
    }
    

    .footer-margin a:hover{
        color: #2F242C;
    }

    #policy{
        text-align: left;
    }
    #terms{
        text-align: right;
    }
   
    
   
    .fab{color: white;}
    
     .fab a:hover{
         color: #2F242C;
     }

    

     /* styles for diffrent screen size's */
@media (max-width: 768px) {
    .container { margin:0px 10px;
    margin-left: 50px;}
    h2{ font-size: 16px !important;	}
    p, label{ font-size: 12px !important; }
    .shopRow{margin-top: 0px;}
    form{
        width: 100%;
        
    }
    #policy{
        text-align: center;
    }
    #terms{
        text-align: center;
    }
   
    #myVideo{
        position: absolute;
    right: 0;
   bottom: 0px;
    top:75px;
    right:0;
    width: 100%;
    
    height: 85%;
     
     background-size: 100% 100%; 
    background-color: white; /* in case the video doesn't fit the whole page*/
    background-image: /* our video */;
    background-position: center center;
    background-size: contain;
     object-fit: cover;    /*cover video background */
     
    z-index:1;
    }
    #brand{
        height: 50px;
    }
    #cta a{
        color: white;
    }
    #section0 #cta{
 
        position: absolute;
        z-index: 3;
           color: white; 
        
        width: auto;
            left: 23%;
            top: 90%;
            /* 
            * Preventing flicker on some browsers 
            * See http://stackoverflow.com/a/36671466/1081396  or issue #183
            */
            -webkit-transform: translate3d(0,0,0);
            -ms-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
    
        
    }
    
}


@media  (min-width: 769px) and (max-width: 980px) {
    h2{ font-size: 34px !important;	}
    p, label{ font-size: 20px !important; }
    form{
        width: 100%;
        
    }
    .shopRow{margin-top: 0px;}
    #myVideo{
        position: absolute;
    right: 0;
   bottom: 0px;
    top:0px;
    right:0;
    width: 100%;
    
    height: 100%;
     
     background-size: 100% 100%; 
    background-color: white; /* in case the video doesn't fit the whole page*/
    background-image: /* our video */;
    background-position: center center;
    background-size: contain;
     object-fit: contain;    /*cover video background */
     
    z-index:-999;
    }


   
    
}

@media (min-width: 981px) {
    h2{ font-size: 30px !important;	}
    p, label{ font-size: 20px !important; }
}