@charset "utf-8";
html, body, h1, h2, h3, p, ul, li {
    margin: 0;
    padding: 0;
    line-height: 1.0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}



body {
    font-size: 16px;
    background-color: #d285b2;
    background-image: linear-gradient(315deg, #d285b2 0%, #c495f1 50%, #8ac7f1 100%);
 
}

ul {
    list-style: none;
}

a {
    color: inherit;
    text-decoration: none;
}

.header_container, .container, .footer_container {
    max-width: 960px;
    width: 80%;
    margin: 0 auto;
}

.container {
    padding-top: 130px;
}


.overflow {
    overflow: hidden;
}

.mb40 {
    margin-bottom: 40px;
}

.mb20 {
    margin-bottom: 20px;
}



.center {
    text-align: center;
}


/* header
------------------------------------------------------*/

header {
    background: #fff;
    -webkit-box-shadow: 5px 1px 1px rgba(0, 0, 0, 0.25);
    box-shadow: 5px 1px 1px rgba(0, 0, 0, 0.25);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    padding: 20px 0;
}


.fa-instagram:before {
    content: "\f16d";
    font-size: 32px;
    margin-right: 10px;
}




.logo {
    float: left;
    width: 30%;
}

.gnav {
    float: right;
    width: 70%;
}

.gnav li {
    float: left;
    width: 25%;
    text-align: center;
}

.gnav a {
    font-size: 12px;
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
    display: block;
}

.gnav a:hover {
    -webkit-transition: .5s;
    transition: .5s;
    background: #40E4DA;
    color: #fff;

}

h1 {
    font-family: 'Norican', cursive;
    display: inline-block;
    border-left: 1px solid #939393;
    padding-left: 10px;
}


/*main
---------------------------------*/













.group{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;


}


.group li{
    width: calc(90% / 3);
    margin-bottom: 30px;
    border: 1px solid white;
    -webkit-box-shadow: 1px 1px 20px navy;
    box-shadow: 1px 1px 20px navy;
    border-radius: 10px;
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    
}


.group li a{
  display: block;
  padding: 30px;
}



.group li a:hover{
   
    -webkit-transition: 2s;
    transition: 2s;
    opacity: .5;
    background: black;
    border-radius: 10px;
}


.group h2{
  text-align: center;
}




.img_common{
    width: 100%;
    height: 200px;
    -o-object-fit: none;
    object-fit: none;
    border-radius: 30px;
    padding: 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}


.box01 img{
    -o-object-position:52% 1%;
    object-position:52% 1px;
}


.box02 img{
    -o-object-position:6% 0;
    object-position:6% 0;
}


.box03 img{
    -o-object-position:-245px -255px;
    object-position:-245px -255px;
}


.box04 img{
    -o-object-position:-710px 0px;
    object-position:-710px 0px;
}


.box05 img{
    -o-object-position:-240px 0;
    object-position:-240px 0;
}


.box06 img{
    -o-object-position: 51.5% 50.7% ;
    object-position: 51.5% 50.7% ;
}

.box07 img{
 
    -o-object-position: 70% 25.6% ;
 
    object-position: 70% 25.6% ;
}


.box08 img{
    -o-object-position:32% -110px;
    object-position:32% -110px;
}


.box09 img{
   
    -o-object-position:21.8% 0px;
   
    object-position:21.8% 0px;
}


.box10 img{

    -o-object-position:18% 8%;
    object-position:18% 8%;
}

.box11 img{
   
    -o-object-position:60% 58%;
   
    object-position:60% 58%;
}

.box12 img{
    
    -o-object-position:31% 3%;
    
    object-position:31% 3%;
}


.box13 img{
    
    -o-object-position:15% 19%;
    
    object-position:15% 19%;
}

.box14 img{
  
    -o-object-position:50% 0px;
  
    object-position:50% 0px;
}

.box15 img{

    -o-object-position:15% 1%;

    object-position:15% 1%;
}

.box16 img{
   
    -o-object-position:49.9% 33.5%;
   
    object-position:49.9% 33.5%;
}



.box17 img{
  
    -o-object-position:1% 1%;
  
    object-position:1% 1%;
}


.box18 img{
    -o-object-position: 48% 3%;
    object-position: 48% 3%;
}


.box19 img{
 
    -o-object-position: 0 0 ;
 
    object-position: 0 0 ;
}


.box20 img{

    -o-object-position: 30% 50% ;

    object-position: 30% 50% ;
}

.box21 img{

    -o-object-position: 16% 16% ;

    object-position: 16% 16% ;
}


.box22 img{

    -o-object-position: 50%  ;
    object-position: 50%  ;
}

.box23 img{
    -o-object-position: 3% 0 ;
    object-position: 3% 0 ;
}

.box24 img{


    -o-object-position: 1% 10% ;


    object-position: 1% 10% ;
}

.box25 img{

    -o-object-position: 50% 50% ;

    object-position: 50% 50% ;
}

.box27 img{


    -o-object-position: 18% 0% ;


    object-position: 18% 0% ;
}





/*=========JS===============*/




#js .box06{




    -o-object-position:  50px 50px ;

    object-position:  50% 50% ;

}
















dl{
    margin: 0 auto;
    width: 80%;
    font-size: 18px;

}

dt{
    float: left;
}


dd{
    word-break: break-all;
    margin-bottom: 10px;
}



.twitter{
    width: 100%;
    -webkit-overflow-scrolling: touch;
    border-radius: 10px !important;
}

.twitter-timeline,.timeline-Header,.timeline-Footer,.timeline-Tweet,.timeline-Viewport,.SandboxRoot,.timeline-Widget,.timeline-Body,.timeline-TweetList,.timeline-TweetList-tweet {
    border-radius: 10px !important;
}






/*footer 
--------------------------*/

footer {
    padding: 20px 0;
    color: #fff;
    border-top: 1px solid #CCCCCC;
}




/* media qiery
=============================================*/



@media all and (max-width: 767px){

    body {
        font-size: 16px;
        background-color: #6cb0f3;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#6cb0f3), to(#c491f5));
        background-image: linear-gradient(180deg, #6cb0f3 0%, #c491f5 100%);


    }
    
  
    
    .logo {
        float: none;
        width: 100%;
        text-align: center;
    }
    
    
    .gnav{
        display: none;
    }
    

    
    .circle{
        background: lime url(http://via.placeholder.com/350x150) center no-repeat / cover;
        border-radius: 50%;
        width: 100%;
        height: 100%;
        padding: 75% 0 0;
        margin: 0 auto 30px;


    }




.group li{
    width: 100%;
    margin-bottom: 30px;
    border: 1px solid white;
    overflow: hidden;
    
}


    


    .box04 img{


        -o-object-position:-610px 0px;


        object-position:-610px 0px;
    }





    .box06 img{
    
    
        -o-object-position: 39% 27%  ;
    
    
        object-position: 39% 27%  ;
    }

    .box07 img{
        -o-object-position: 67% 25.6% ;
        object-position: 67% 25.6% ;
    }


    .box08 img{
        -o-object-position:34% -110px;
        object-position:34% -110px;
    }


    .box10 img{

        -o-object-position:20% 8%;

        object-position:20% 8%;
    }

    .box11 img{
        -o-object-position:62% 15%;
        object-position:62% 15%;
    }

    .box12 img{

        -o-object-position:31% 3%;

        object-position:31% 3%;
    }


    .box13 img{

        -o-object-position:17% 19%;

        object-position:17% 19%;
    }


    .box15 img{
        -o-object-position:16% 1%;
        object-position:16% 1%;
    }

    .box16 img{

        -o-object-position:49.9% 33.5%;

        object-position:49.9% 33.5%;
    }



    .box17 img{

        -o-object-position:1% 1%;

        object-position:1% 1%;
    }

    
    

    
    
    
    
    
    
    
    .twitter{
        width: 100%;
        height: 400px;
    }18
    
    
    .twitter-timeline{
        overflow:scroll;
    }
    
    

}






@media all and (min-width: 768px) and (max-width: 960px) {

    
    
    body {
        font-size: 16px;
        background-color: #8EC5FC;
        background-image: linear-gradient(62deg, #8EC5FC 0%, #c491f5 100%);



    }

    
    .logo {
        float: left;
        width: 40%;
    }

    .gnav {
        float: right;
        width: 60%;
    }
    
    
    
    
    
.group li{
    width: 45%;
    margin-bottom: 30px;
    border: 1px solid white;
    overflow: hidden;
}


    
    .box09 img{
        -o-object-position:30% 0px;
        object-position:30% 0px;
    }

    
    .box10 img{
        -o-object-position:21% 8%;
        object-position:21% 8%;
    }
    
    
    .box11 img{
        -o-object-position:63% 58%;
        object-position:63% 58%;
    }
    
    .box13 img{
        -o-object-position:17% 19%;
        object-position:17% 19%;
    }
    



}