/* Quicksand Font */ 

/* quicksand-300 - latin */
@font-face {
    font-family: 'Quicksand';
    font-style: normal;
    font-weight: 300;
    src: url('../includes/fonts/quicksand-v30-latin-300.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../includes/fonts/quicksand-v30-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../includes/fonts/quicksand-v30-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
         url('../includes/fonts/quicksand-v30-latin-300.woff') format('woff'), /* Modern Browsers */
         url('../includes/fonts/quicksand-v30-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../includes/fonts/quicksand-v30-latin-300.svg#Quicksand') format('svg'); /* Legacy iOS */
  }
  /* quicksand-regular - latin */
  @font-face {
    font-family: 'Quicksand';
    font-style: normal;
    font-weight: 400;
    src: url('../includes/fonts/quicksand-v30-latin-regular.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../includes/fonts/quicksand-v30-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../includes/fonts/quicksand-v30-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('../includes/fonts/quicksand-v30-latin-regular.woff') format('woff'), /* Modern Browsers */
         url('../includes/fonts/quicksand-v30-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../includes/fonts/quicksand-v30-latin-regular.svg#Quicksand') format('svg'); /* Legacy iOS */
  }
  /* quicksand-500 - latin */
  @font-face {
    font-family: 'Quicksand';
    font-style: normal;
    font-weight: 500;
    src: url('../includes/fonts/quicksand-v30-latin-500.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../includes/fonts/quicksand-v30-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../includes/fonts/quicksand-v30-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
         url('../includes/fonts/quicksand-v30-latin-500.woff') format('woff'), /* Modern Browsers */
         url('../includes/fonts/quicksand-v30-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../includes/fonts/quicksand-v30-latin-500.svg#Quicksand') format('svg'); /* Legacy iOS */
  }
  /* quicksand-700 - latin */
  @font-face {
    font-family: 'Quicksand';
    font-style: normal;
    font-weight: 700;
    src: url('../includes/fonts/quicksand-v30-latin-700.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../includes/fonts/quicksand-v30-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../includes/fonts/quicksand-v30-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
         url('../includes/fonts/quicksand-v30-latin-700.woff') format('woff'), /* Modern Browsers */
         url('../includes/fonts/quicksand-v30-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../includes/fonts/quicksand-v30-latin-700.svg#Quicksand') format('svg'); /* Legacy iOS */
  }
  /* quicksand-600 - latin */
  @font-face {
    font-family: 'Quicksand';
    font-style: normal;
    font-weight: 600;
    src: url('../includes/fonts/quicksand-v30-latin-600.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../includes/fonts/quicksand-v30-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../includes/fonts/quicksand-v30-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
         url('../includes/fonts/quicksand-v30-latin-600.woff') format('woff'), /* Modern Browsers */
         url('../includes/fonts/quicksand-v30-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../includes/fonts/quicksand-v30-latin-600.svg#Quicksand') format('svg'); /* Legacy iOS */
  }





/*  vv Mobile CSS vv */


body {
    margin: 0;
    padding: 0;
    font-family: 'Quicksand', sans-serif;
    background-color: #18e6c2;
    color: white;
    text-align: center;
}

/* vv text formatting vv */


a {
    color: #e800ac;
    font-weight: 300;
    text-decoration: none;
    font-family: 'Quicksand', sans-serif;    
}

.video-controls a {
    color: #18e6c2;
    font-weight: 300;
    text-decoration: none;
    font-family: 'Quicksand', sans-serif;   
}


p {  
    font-size: 20px;
    font-weight: 300;
    margin-top: 0px;
   }


h1 {       
    font-size: 32px;
    font-weight: 300;
    margin: 0 0 0 0;
}

h2 {
      
    font-size: 20px;
    font-weight: 300;
    margin-top: 0px;
}


/* vv Video Player */


.video {    
    width: 100%;
    z-index: -2;   
}

.containerreel {    
    width: 100%;   
    background-color: #9452d8;
    position: relative;    
}

.controls {    
    position: absolute;
    z-index: 1;
    bottom: 40px;
    left: 5px;
    transform-origin: top right;
    transform: skewY(-3deg);            
    }

    .video-controls {
        position: absolute;        
        cursor: pointer;
        font-family: 'Font Awesome 5 Free';
        background-color: none;
        color: #18e6c2;
        opacity: 0.8;
        border: none;
     }
     
     #play-btn {
        left: 5px;       
        visibility: hidden;
        }
     
     #pause-btn {
        left: 5px;   
        
     }
     
     #mute-btn {
        left: 30px;        
        visibility: hidden;
     }
     
     #unmute-btn {
        left: 30px;       
     }
     
     #fullscreen-btn {
        left: 60px;              
     }


/* vv layout vv  */


.text-container {
    width: 100%;    
    color: #ffffff;
}

.text-container-work {
    width: 375px;
    margin-top: 20px;
    margin-bottom: 20px;
    color: #ffffff;
}

.text-container-contact {
    width: 325px; 
    margin-top: 20px;    
    color: #e800ac;
}


.head {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height:150px;
    z-index: 1;
    background-color: #9452d8;      
}


.head::after {
    position: absolute;
    width: 100%;
    height: 100%;
    content: '';
    background-color: #9452d8; 
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform-origin: top right;
    transform: skewY(-3deg);
}



.line1 {
    position: relative;
    width: 100%;
    height: 10px;    
}

.line1::after {
    position: absolute;
    width: 100%;
    height: 100%;
    content: '';
    background-color: #e800ac;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform-origin: bottom right;
    transform: skewY(-3deg);    
    border-top: 1px solid  #e800ac;
    border-bottom: 1px solid  #e800ac;
}

.line2 {
    position: relative;
    width: 100%;
    height: 10px;
}

.line2::after {
    position: absolute;
    width: 100%;
    height: 100%;
    content: '';
    background-color: #18e6c2;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform-origin: bottom right;
    transform: skewY(-3deg);
    border-top: 1px solid  #18e6c2;
    border-bottom: 1px solid #18e6c2;
}

.line3 {
    position: relative;
    width: 100%;
    height: 10px;
}

.line3::after {
    position: absolute;
    width: 100%;
    height: 100%;
    content: '';
    background-color: #ffffff;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform-origin: top right;
    transform: skewY(-3deg);
    border-top: 1px solid  #ffffff;
    border-bottom: 1px solid  #ffffff;
}

.line4 {
    position: relative;
    width: 100%;
    height: 10px;
    margin-top: -10px;
}

.line4::after {
    position: absolute;
    width: 100%;
    height: 100%;
    content: '';
    background-color: #ffffff;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform-origin: bottom left;
    transform: skewY(-3deg);    
    border-top: 1px solid  #ffffff;
    border-bottom: 1px solid  #ffffff;
}

.line5 {
    position: relative;
    width: 100%;
    height: 10px;
}

.line5::after {
    position: absolute;
    width: 100%;
    height: 100%;
    content: '';
    background-color: #18e6c2;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform-origin: top left;
    transform: skewY(-3deg);
    border-top: 1px solid  #18e6c2;
    border-bottom: 1px solid #18e6c2;
}

.line6 {
    position: relative;
    width: 100%;
    height: 10px;
}

.line6::after {
    position: absolute;
    width: 100%;
    height: 100%;
    content: '';
    background-color: #e800ac;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform-origin: bottom left;
    transform: skewY(-3deg);
    border-top: 1px solid  #e800ac;
    border-bottom: 1px solid  #e800ac;
}

.work {
    position: relative;
    width: 100%;
    
    padding: 20px 0px 20px 0px;    
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;      
}

.work::after {
    position: absolute;
    width: 100%;
    height: 100%;
    content: '';
    background-color: #9452d8;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform-origin: top left;
    transform: skewY(-3deg);
}

.contact {
    position: relative;
    width: 100%;
    padding: 20px 0px 20px 0px; 
    display: flex;
    justify-content: center;
    align-items: center;    
}

.contact::after {
    position: absolute;
    width: 100%;
    height: 100%;
    content: '';
    background-color: #18e6c2;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform-origin: bottom left;
    transform: skewY(-3deg);
}

.heart {
padding-top: 25px;
}


/*  vv Tablet CSS vv */

@media only screen and (min-width: 768px) {

    h1 {       
        font-size: 52px;
        font-weight: 200;
        margin: 0 0 0 0;
    }
    
    h2 {
          
        font-size: 26px;
        font-weight: 300;
        margin-top: 0px;
    }

    p {  
        font-size: 28px;
        font-weight: 300;
        margin-top: 0px;
       }

 

    .head {        
        padding-top: 30px;  
        height:200px;           
    }


    .work {
        position: relative;
        width: 100%;
        height: 400px;
        padding: 20px 0px 0px 0px;    
        z-index: 10;
        display: flex;
        justify-content: center;
        align-items: center;      
    }
    
    .contact {
        position: relative;
        width: 100%;
        height: 300px;
        padding: 20px 0px 20px 0px; 
        display: flex;
        justify-content: center;
        align-items: center;    
    }
   
    .text-container-work {
        width: 100%;
        color: #ffffff;
        padding-bottom: 100px;
    }

    .text-container {
        width: 100%;    
        color: #ffffff;
    }

    .line1 {
        position: relative;
        width: 100%;
        height: 15px;
    }
    
 
    
    .line2 {
        position: relative;
        width: 100%;
        height: 15px;
    }
    

    
    .line3 {
        position: relative;
        width: 100%;
        height: 15px;
    }
    
  
    
    .line4 {
        position: relative;
        width: 100%;
        height: 15px;        
    }
    
 
    
    .line5 {
        position: relative;
        width: 100%;
        height: 15px;
    }
 
    
    .line6 {
        position: relative;
        width: 100%;
        height: 15px;
    }

    .containerreel {    

        background-color: black;
        position: relative;
        display: block;
        overflow: hidden;
    }

    .video {
       max-height: 800px; 
       width: 100%;
       height: 100%;
       z-index: -2;
       object-fit: cover;
    }

    .video-controls a {
        color: #18e6c2;
        font-weight: 300;
        text-decoration: none;        
        font-family: 'Quicksand', sans-serif;   
    }

}