*{

margin:0;
padding: 0;


}
body
{
    background:#111111;
    min-height: 1000px;

}
/* ---------------------NAVIGATION BAR------------------------------------ */ 
nav{
    font-family: 'Catamaran', sans-serif;
    min-height: 10vh;
    text-align: center;
   background: #111111;
   display: flexbox;
    top:0;
  
    position: sticky;
    box-shadow: 0px 3px 5px 5px rgba(0, 0,0,0.3);
    z-index: 200;
  
}

@media(min-width:1150px)
{
    nav{
        align-items: center;
        position: sticky;
        top:0;
        display: grid;
        grid-template-columns: 10% 1fr 10%;

    }}
#logo {
    
    font-family: 'Dancing Script', cursive;
  margin-top: 1vh;
  margin-bottom: 1vh;
    color: rgb(202, 166, 209);
    text-decoration: none;
    font-size: 50px;
}
@media(min-width:1150px)
{
    #logo {
        margin-left: 50%;
      padding-bottom: 0;
      display: grid;
    }

}
#logo:hover{
    color:rgb(235, 214, 240);
}

@media(max-width:1150px){
.line{
width: 30px;
height: 3px;
background: cornsilk;
margin: 5px;

}
.hamburger{
position: absolute;
cursor: pointer;
padding: 2vh 2vh 2vh 2vh;
right:5%;
top:1vh;
}
.navPhone{
    top:2vh;
    position: relative;
} 
}
.nav-links{
    display: none;
} 
@media(min-width:1150px){

    .nav-links{
        display: inline-block;
    } 

}
.nav-links a:hover{
    color:#ac7094 ;
    background-color: rgba(155, 155, 155, 0.014);
}

@media only screen and (max-device-width: 900px){
    #logo{
        margin-bottom: 50px;}

}
.nav-links a{
  
    color:#fa66ce7c ;
    text-decoration: none;
    text-transform:uppercase;
   margin-top: 2%;
   font-size: 28px;
   display:grid;
   cursor:pointer;
  
    
    
}
    @media (min-width: 1150px) {
        .nav-links a{
            margin-left: 10%;
           display:inline-table;
           margin-top: 0;
        }}

    @media (min-width: 1300px) {
    .nav-links a{
      
        margin-top: 0;
        display:inline-table;
    }

    }

/* ---------------------SCROLLBAR------------------------------------ */ 

    
    #scrollPath{
    position: fixed;
    top:0;
    right: 0;
    width:1px;
    height: 100%;
    background:black;
    z-index: 100;
    }
    #progresbar{
        position: fixed;
        top:0;
        right: 0;
        width:5px;
        height: 100%;
        background: linear-gradient(to top, #008aff, #00ffe7);
        animation: animate 5s linear infinite;
    z-index: 101;
    }
    
    @keyframes animate{
    
        0%,100%{
            filter:hue-rotate(0deg);
    
        }
        50%{
            filter: hue-rotate(360deg);
        }
    
    
    }
    
    #progresbar:before{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to top, #008aff, #00ffe7);
        filter: blur(10px);
    }
    
    #progresbar:after{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to top, #008aff, #00ffe7);
        filter: blur(30px);
    }
    
/* ---------------------MAIN SECTION------------------------------------ */ 



section{

    position: relative;
    width:100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    margin-bottom: 50vh;

}
section:before{
content: '';
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background:linear-gradient(to top,#111111, transparent);
z-index: 3;

}

section:after{
    content: '';
    position: absolute;
    top: 0;
    left:0;
    width: 100%;
    height: 100%;

    background:#111111;
    z-index: 2;
    mix-blend-mode:soft-light;
    }
section img {
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;

}
.gory{

    margin-top: 10%;
}
@media only screen and (max-device-width:900px){
.gory{

    margin-top:20% ;
}

}

@media (min-width:600px)
{
    .gory{

        margin-top: 20%;
    }

}

@media (min-width:1000px)
{
    .gory{

        margin-top: 5%;
    }

}
@media (min-width:1400px)
{
    .gory{

        margin-top: 0;
    }

}

.dymek{
    width:40vh;
    height:auto;
    margin-left: 15%;
    margin-top: 12%;
    z-index: 1;
    animation: show 5s linear;
   

}

@media(min-width:1200px){
    .dymek{
        margin-top: 2%;
    
        margin-left: 25%;
    }}

    @media only screen and (max-device-width: 900px){
        .parent{
            display: none;
        }

    }
.parent{
    position: relative;
width:100%;
height:100vh;
margin-top: 50vh;
}
@media(min-width:1250px){
    .parent{

        margin-top: 40vh;
    }}

@media(min-width:900px){
    .laska{
        display: flex;
        position: absolute;
       margin-left: 10%;
      
      z-index: 1;
      
      }

}

.laskaPhone{
      
    display: none;
   }

@media only screen and (max-device-width: 900px){
.laskaPhone{
    display: flex;
    position: relative;
   
   width:100%;
   height: 60vh;
   margin-left: 10vh;
   margin-top:50vh ;
   z-index: 1;
  }
}


.reka{
  display: none;
}
@media(min-width:900px){
    .reka{
        position: absolute;
     display: flex;
    z-index: 1;
    background:  repeat-x;
    animation: shake 3s linear infinite;
      
      }

}
@keyframes shake{

    
    0%{
        transform: translate3d(1.7vw,0,0);
        transform: rotate(3deg);
      
    }
    50%{
        transform: translate3d(1vw,0,0);
        transform: rotate(-3deg);
    }
    100%{
        transform: translate3d(1.7vw,0,0);
        transform: rotate(3deg);
    }
    
}

.fog{
    position:absolute;
    width:10000%;
    height: 100%;

    background: url("img/fog.png") repeat-x;
    background-size: contain;
    background-position:center;
    animation: marquee 20s linear infinite;
    z-index: 0;
}

@keyframes marquee{

    0%{
        transform: translate3d(0,0,0);
    }
    100%{
        transform: translate3d(-100vw,0,0);
    }
}

@keyframes show{

    0%{
        transform: translate3d(0,-50vw,0);
    }
    60%{
        transform: translate3d(0,0,0);
    }
    70%{
        transform: translate3d(0,-2vw,0);
    }
    80%{
        transform: translate3d(0,1vw,0);
    }
    90%{
        transform: translate3d(0,-2vw,0);
    }
    100%{
        transform: translate3d(0,0,0);
    }
}

/* ---------------------PROJECTS------------------------------------ */ 


.projects {
margin-bottom: 50vh;
align-items: center;
justify-content: center;
position: relative;

top:0;
left:0;

}
.check{

display: flex;
align-items: center;
justify-content: center;
padding-bottom: 5vh;
font-family: 'Catamaran', sans-serif;
font-size: 15px;
font-weight: 900;
background: linear-gradient(to right, #4802b9, #fa336f,#ddd);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-mo-text-fill-color: transparent;
}
.col30{

        
    display:flex;
    margin-bottom: 10vh;
    
    }
@media only screen and (max-device-width: 900px){

    .col30{
        display: table-row;
    }
}
@media (max-width:900px)
        {
            
        .col30{
            display: table-row;

        }

}

  

        @media (min-width:900px)
        {

        .check{
            font-size: 20px;
        }

}


.projectName{
    font-family: 'Catamaran', sans-serif;
    display: flex;
    align-items: center;
justify-content: center;
padding-bottom: 2vh;
padding-top: 5vh;
font-size: 22px;
font-weight: 600;
}

.projectDescription{
    font-family: 'Catamaran', sans-serif;
    padding-top: 2vh;
    padding-bottom: 2vh;
    display: flex;
    align-items: center;
justify-content: center;

}

.projectFoto{
    display: block;
    margin-left: auto;
    margin-right: auto;
width: 100%;
box-shadow: 0px 1px 7px 7px  rgba(15, 15, 15, 0.137);
   
}
.project10{
    
    margin-left: 3%;
        width:30%;
       
        margin-right: 3%;
        padding-left: 2%;
        padding-right: 2%;
        background: #4ea3a3;  /* fallback for old browsers */
        background: -webkit-linear-gradient(to right, #d3207f, #e7e71e);  /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(to right,  #d3207f, #e7e71e); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        box-shadow: 0px 1px 7px 7px  rgba(232, 250, 252, 0.137);
        height: 50vh;
    }
.project7{
    
    margin-left: 3%;
        width:30%;
       
        margin-right: 3%;
        padding-left: 2%;
        padding-right: 2%;
        background: #4ea3a3;  /* fallback for old browsers */
        background: -webkit-linear-gradient(to right, #205fd3, #d344a3);  /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(to right,  #205fd3, #d344a3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        box-shadow: 0px 1px 7px 7px  rgba(232, 250, 252, 0.137);
        height: 50vh;
    }
    .project8{
    
        margin-left: 3%;
            width:30%;
           
            margin-right: 3%;
            padding-left: 2%;
            padding-right: 2%;
            background: #66d839;  /* fallback for old browsers */
            background: -webkit-linear-gradient(to right, #f4f740, #75ee30);  /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(to right,  #f4f740, #75ee30); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
            box-shadow: 0px 1px 7px 7px  rgba(232, 250, 252, 0.137);
            height: 50vh;
        }
        .project9{
    
            margin-left: 3%;
                width:30%;
               
                margin-right: 3%;
                padding-left: 2%;
                padding-right: 2%;
                background: #da2525;  /* fallback for old browsers */
                background: -webkit-linear-gradient(to right, #cf2222, #e278c8);  /* Chrome 10-25, Safari 5.1-6 */
                background: linear-gradient(to right, #cf1d1d, #e46dc0); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
                box-shadow: 0px 1px 7px 7px  rgba(232, 250, 252, 0.137);
                height: 50vh;
            }

.project1{
    
margin-left: 3%;
    width:30%;
   
    margin-right: 3%;
    padding-left: 2%;
    padding-right: 2%;
    background: #654ea3;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #eaafc8, #654ea3);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #eaafc8, #654ea3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    box-shadow: 0px 1px 7px 7px  rgba(232, 250, 252, 0.137);
    height: 50vh;
}


.project2{
    width:30%;
    margin-left: 3%;
    margin-right: 3%;
    padding-left: 2%;
    padding-right: 2%;
    background: #EECDA3;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #EF629F, #EECDA3);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #EF629F, #EECDA3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    box-shadow: 0px 1px 7px 7px  rgba(232, 250, 252, 0.137);
    height: 50vh;
}

.project3{
    width:30%;
    margin-left: 3%;
    margin-right: 3%;
    padding-left: 2%;
    padding-right: 2%;
   background: #c2e59c;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #64b3f4, #c2e59c);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #64b3f4, #c2e59c); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
box-shadow: 0px 1px 7px 7px  rgba(232, 250, 252, 0.137);
height: 50vh;
}

.project4{
    
    margin-left: 3%;
        width:30%;
       
        margin-right: 3%;
        padding-left: 2%;
        padding-right: 2%;
        background: #654ea3;  /* fallback for old browsers */
        background: -webkit-linear-gradient(to right, #99ec84, #4ea382);  /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(to right, #afeaaf, #3faf7b); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        box-shadow: 0px 1px 7px 7px  rgba(232, 250, 252, 0.137);
        height: 50vh;
    }
    
    
    .project5{
        width:30%;
        margin-left: 3%;
        margin-right: 3%;
        padding-left: 2%;
        padding-right: 2%;
        background: #EECDA3;  /* fallback for old browsers */
        background: -webkit-linear-gradient(to right, #edef62, #ec9f3a);  /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(to right, #efe662, #df993f); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        box-shadow: 0px 1px 7px 7px  rgba(232, 250, 252, 0.137);
        height: 50vh;
    }
    
    .project6{
        width:30%;
        margin-left: 3%;
        margin-right: 3%;
        padding-left: 2%;
        padding-right: 2%;
       background: #c2e59c;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #f49e64, #e5a19c);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #f49264, #e5ad9c); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    box-shadow: 0px 1px 7px 7px  rgba(232, 250, 252, 0.137);
    height: 50vh;
    }
    
@media only screen and (max-device-width: 900px){

    .projectName{

        font-size: 30px;
    }

    .projectDescription{
        font-size: 28px;

    }
    .project1{
    width:90%;
    margin-bottom: 10vh;
    
    }
    .project2{
        width:90%;
        margin-bottom: 10vh;
       
        }
        .project3{
            width:90%;
            margin-bottom: 10vh;
            
            }
            .project4{
                width:90%;
                margin-bottom: 10vh;
                
                }
                .project5{
                    width:90%;
                    margin-bottom: 10vh;
                   
                    }
                    .project6{
                        width:90%;
                        margin-bottom: 10vh;
                        
                        }
            
}
@media(max-width: 900px){
    .project1{
    width:90%;
    margin-bottom: 10vh;
    height: 70vh;
    }
    .project2{
        width:90%;
        margin-bottom: 10vh;
        height: 70vh;
        }
        .project3{
            width:90%;
            margin-bottom: 10vh;
            height: 70vh;
            }
            
}

    @media (max-width:900px){
        .project4{
        width:90%;
        margin-bottom: 10vh;
        height: 70vh;
        }
        .project5{
            width:90%;
            margin-bottom: 10vh;
            height: 70vh;
            }
            .project6{
                width:90%;
                margin-bottom: 10vh;
                height: 70vh;
                }
                .project7{
                    width:90%;
                    margin-bottom: 10vh;
                    height: 70vh;
                    }
                    .project8{
                        width:90%;
                        margin-bottom: 10vh;
                        height: 70vh;
                        }
                        .project9{
                            width:90%;
                            margin-bottom: 10vh;
                            height: 70vh;
                            }



                
    }

@media (min-width:800px){
    .project1:hover{

        animation: shakeMe 3s linear infinite ;
    }
    .project2:hover{

        animation: shakeMe 3s linear infinite;
    }
    .project3:hover{

        animation: shakeMe 3s linear infinite;
    }
    .project4:hover{

        animation: shakeMe 3s linear infinite;
    }
    .project5:hover{

        animation: shakeMe 3s linear infinite;
    }
    .project6:hover{

        animation: shakeMe 3s linear infinite;
    }
    .project7:hover{

        animation: shakeMe 3s linear infinite;
    }
    .project8:hover{

        animation: shakeMe 3s linear infinite;
    }
    .project9:hover{

        animation: shakeMe 3s linear infinite;
    }
}


@keyframes shakeMe{

    0%{
       
        transform: rotate(6deg);
    }
    10%{
       
        transform: rotate(-6deg);
    }
    20%{
       
        transform: rotate(6deg);
    }
    30%{
       
        transform: rotate(-6deg);
    }
    40%{
       
        transform: rotate(6deg);
    }
    50%{
       
        transform: rotate(-6deg);
    }
    60%{
       
        transform: rotate(6deg);
    }
    70%{
       
        transform: rotate(-6deg);
    }
    80%{
       
        transform: rotate(6deg);
    }
    90%{
       
        transform: rotate(-6deg);
    }
    100%{
       
        transform: rotate(6deg);
    }
}
/* ---------------------ABOUT------------------------------------ */ 

.about{
    margin-bottom: 50vh;
    align-items: center;
    justify-content: center;
    position: relative;
   
    top:0;
    left:0;
}
.all{
top:0;
left:0;
background-color: rgba(73, 72, 73, 0.048);
padding-left: 10%;
padding-right: 10%;
padding-top: 1%;
padding-bottom: 1%;
display: flex;
box-shadow: 0px 1px 7px 7px  rgba(250, 193, 233, 0.322);
}

.col60{
    align-items: center;
    justify-content: center;
    display:grid;
width:60%;

}

.me{
    font-family: 'Catamaran', sans-serif;
    padding-top: 2vh;
    padding-bottom: 2vh;
    display: flex;
    align-items: center;
justify-content: center;
color: #ddd;
font-size: 20px;
}
.colFoto{
    display: block;
    margin-right:8%;
   margin-left: auto;
    align-items: center;
    justify-content: center;
 
width: 25%;


box-shadow: 0px 1px 3px 3px  rgba(235, 231, 231, 0.137);
}
@media only screen and (max-device-width: 900px){

    .col60{
        width: 100%;
    }
    .colFoto{
        display: none;
    }

    .langGK{
font-size: 30px;
    }

    .langWeb{
        font-size: 30px;
}}


.langGK{
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 2%;
    font-family: 'Catamaran', sans-serif;
    font-size: 20px;
    font-weight: 900;

    background: linear-gradient(to right, #e07639 25%, #e6fa33 60%,rgb(39, 245, 32) 100%);
    background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    -mo-text-fill-color: transparent;
}
.langWeb{
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 2%;
    font-family: 'Catamaran', sans-serif;
    font-size: 20px;
    font-weight: 900;

    background: linear-gradient(to right, #28ec21 25%, #46d9f3 60%,rgb(58, 20, 228) 100%);
    background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    -mo-text-fill-color: transparent;

}

@media (max-width:800px)
{
.colFoto{
display: none;
}
.col60{
    width:100%;
}
.langGK{

    display: inline;
}
.langWeb{
    display: inline; 
}
}

/* ---------------------HOBBY------------------------------------ */ 


.hobby{
 
    margin-bottom: 50vh;
    align-items: center;
    justify-content: center;
    position: relative;
    background: linear-gradient(to right, #0aaab6, #fa3396,rgb(220, 243, 11));
    top:0;
    left:0;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    -mo-text-fill-color: transparent;
   
}
.yt{
width:100%;
height: 35vh;
}

.hobby1{
    width:30%;
    margin-left: 3%;
    margin-right: 3%;
    padding-left: 2%;
    padding-right: 2%;
    padding-bottom: 5%;
  box-shadow: 0px 1px 7px 7px  rgba(4, 209, 231, 0.295);
height: 50vh;
    
}
.hobby2{
    width:30%;
    margin-left: 3%;
    margin-right: 3%;
    padding-left: 2%;
    padding-right: 2%;
    padding-bottom: 5%;
  box-shadow: 0px 1px 7px 7px  rgba(235, 35, 202, 0.404);
height: 50vh;
    
}
.hobby3{
    width:30%;
    margin-left: 3%;
    margin-right: 3%;
    padding-left: 2%;
    padding-right: 2%;
    padding-bottom: 5%;
  box-shadow: 0px 1px 7px 7px  rgba(208, 230, 14, 0.349);
height: 50vh;
    
}

.hobbyName{
    font-family: 'Catamaran', sans-serif;
    display: flex;
    align-items: center;
justify-content: center;
padding-bottom: 2vh;
padding-top: 5vh;
font-size: 32px;
font-weight: 600;


background-size: 100%;

}

@media only screen and (max-device-width: 900px){

.hobby1{

width:45vh;
margin-bottom: 10vh;




}
.hobby2{
    width:100%;
    margin-bottom: 10vh;

    
}

.hobby3{
    width:100%;
    margin-bottom: 10vh;

    
}

}

@media  (max-width: 900px){

    .hobby1{
      
    width:45vh;
    margin-bottom: 10vh;
    margin-left: 10%;
    
    
    
    }
    .hobby2{
        width:100%;
        margin-bottom: 10vh;
        margin-left: 10%;
        
    }
    
    .hobby3{
        width:100%;
        margin-bottom: 10vh;
        margin-left: 10%;
        
    }
    
    }
/* ---------------------FOOTER------------------------------------ */ 

.footer{
    background: linear-gradient(to right, #0aaab6, #fa3396,rgb(220, 243, 11));
padding-bottom: 10vh;
padding-top: 5vh;
box-shadow: 0px 1px 15px 5px  rgba(241, 238, 240, 0.349);
}
@media only screen and (max-device-width: 900px){

    .footer{
        height: 10vh;
    }
   
}

.contact{
    align-items: center;
    justify-content: center;
    display: flex;
    top:0;
    left:0;
    margin:auto;
 
}

.icon{
margin-left: 3%;
}
.checkk{

    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 3%;
    font-family: 'Catamaran', sans-serif;
    font-size: 20px;
    font-weight: 900;
 
    }

    /* ---------------------HOBBY2------------------------------------ */ 
  
    
    .hobby4{
position: relative;
width: 100%;
height: 100vh;
box-sizing: border-box;
margin-bottom: 5vh;

    }

    .yt2{
        position: absolute;
        top:0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;


    }


.navigation{
position: absolute;

left:50%;
transform: translateX(-50%);
z-index:4;
display: flex;
justify-content: center;
align-items: center;
}

.move{
 margin-top: 150px;

}
.move2{
    margin-top: 300px;
    margin-bottom: 100px;
   }

.navigation li img {
width: 120px;
height: 80px;
transition: 0.5s;


}

.navigation li img:hover {
    width: 200px;
    height: 130px;
   opacity: 1;
    
    
    }
    .navigation li:hover {
      opacity: 1;
        
        
        }
        
@media (max-width:800px){
    .navigation li img{
        width: 60px;
    
    }
    .navigation li img:hover {
        width: 90px;
      
        
        
        }


    }

.navigation li{
list-style: none;
cursor: pointer;
margin: 0 10px;
border-radius: 4px;
box-shadow: 0px 1px 7px 5px  rgba(241, 238, 240, 0.349);
opacity: 0.7;
transition: 0.5s;
}


/* --------------------EDUCATION------------------------------------ */ 

.enter{
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 3%;
    margin-left: 5vh;
    margin-right: 5vh;
    font-family: 'Catamaran', sans-serif;
    font-size: 20px;
    font-weight: 500;
    color: thistle;
    text-align: center;
    justify-content: center;
    

}

.col{
    width: 50%;

}

.eduImg{

    width: 80%;
}
@media only screen and (max-device-width: 900px){

    .col{
        width: 100%;
    }
    .enter{display: table;}
}
@media (max-width:800px)
{

    
    .col{
        width: 100%;
    }
}
.edu{
    margin-top: 20vh;
    margin-bottom: 20vh;
}


.center{
    text-align: center;
    justify-content: center;
}

/*--------------------------------------PROJECTS PAGE SETTINGS---------------------------------------------------------- */

.yt3{
    width:80%;
    height: 80vh;


}
@media only screen and (max-device-width:900px){
    .yt3{
        height: 40vh;
       
    }
}

.button{
    font-family: 'Catamaran', sans-serif;
border: none;
border-radius: 5px;
display: inline-block;
font-size: 22px;
font-weight: 400;
line-height: 1.5;
padding: .75rem 0;
text-align: center;
width: 30vh;
text-transform: uppercase;
text-decoration: none;
margin-left: 10vh; 
margin-top: 5vh;

}

@media only screen and (max-device-width:900px){
    .button{
        margin-left: 0;
       
    }
}

.c-btn--primary {
    background: -webkit-linear-gradient(to right, #ca6e94, #654ea3);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #b85e84, #654ea3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    box-shadow: 0px 1px 7px 7px  rgba(232, 250, 252, 0.137);
   
  color: #500a66; }
  .c-btn--primary:hover {
    font-weight: 600;
    color: #e29ddf; }


    .progress{
        width: 10%;
        animation: progress 3s linear infinite;
    }
    @keyframes progress{

        0%{
            transform: translate3d(-5vw,0,0);
        }
        20%{
            transform: translate3d(5vw,0,0);
        }
        40%{
            transform: translate3d(-5vw,0,0);
        }
        60%{
            transform: translate3d(5vw,0,0);
        }
        80%{
            transform: translate3d(-5vw,0,0);
        }
        85%{
            transform: translate3d(-5vw,-1vw,0);
        }
        90%{
            transform: translate3d(-5vw,0,0);
        }
        95%{
            transform: translate3d(-5vw,-1vw,0);
        }
        100%{
            transform: translate3d(-5vw,0,0);
        }
    }