/*shared style*/

body{
    background-image: linear-gradient(180deg,black,black,blue);

}

*{box-sizing:border-box;}
img{ width: 400pt;
}

.membersPic, .planePic, .dronePic, .mainPic{
    width: auto;
    height: 600pt;
    margin: 0pt -60pt 0pt -60pt;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1200pt 600pt;
}
.mainPic{
    background-image: linear-gradient(to bottom, transparent, black), url("pics/circuit.jpg");
}

.planePic{
    background-image: linear-gradient(to bottom, transparent, black), url('pics/3dprinter.jpg');
}
.membersPic{

    background-image: linear-gradient(to bottom, transparent, black), url("pics/group.png");
}
.dronePic{
    background-image: linear-gradient(to bottom, transparent, black), url("pics/droneMain.jpg");
}


/* main page*/
.mainPic .bt, .mainPic .b2{
    flex: 20%;

}
.b3{
    flex:30%;
    display:inline;
    text-decoration:none;
}


button{
    border-radius: 15px;
    flex-direction: row;
    flex: 100%;
    background-color:  #31363F;
    color: white;
    text-decoration: none;
    width: 15%;
    border: none;
    padding: 10px;
    font-size:20pt;

    font-weight: bold;
}
.bt{
    font-weight: bold;
    font-size: 16pt;
    text-align: center;
    margin-left: 20%;
    margin-top: 15%;
    margin-right: 20%;
    font-family:'Georgia', serif;
    text-decoration:none;
}

.b1:hover, .b2:hover,  .b3:hover{
    background-color: blue;
    color: grey;
    text-decoration: none;
}

.b3{
    width:30%;
    text-decoration:none;
}


.something{
    display: flex;
    flex-wrap: wrap;

}
.logoM{
    flex:right-side;
    margin-left: 60%;
    margin-top: -15%; 
} 
.logo{
    flex:right-side;
    margin-left:60%;
    margin-top: -30%;

}
.number{
    color: white;
    position: absolute;
    text-align: left-side;
    margin-top: 7pt;
    margin-left: 39pt;
}

.text{
    padding: 15pt; 
    position: absolute;
    text-align: left-side;
    color: white;
    margin: 75pt 100pt 0pt 450pt;
    background-color: black;
}

.title{
    font-family: "Times New Roman", Times, serif;
    font-size: 26pt;
    color: grey;
    display: flex;
    align-items: center;
    justify-content:center;
}

h1{

    margin-top: 10%;
    color: lightgrey;
    text-align: center;
    font-size: 50pt;
    text-shadow: 10px 6px 8px grey;
}
.info-container{

    display: flex;
    margin-right: 4%;
    /*flex-direction: row;*/
}
.info-container > div {
    background-color: #31363F;
    margin: 3%;
    padding: 20px;
    border-radius: 15pt;
   img{padding 10px;}
   color: white;
}

.miniflex{
    display: flex;
    margin-right: 4%;

}

.info2-container{

    margin-right: 4%;
    /*flex-direction: row;*/
}

.info2-container > div {
    margin: 10px;
    padding: 20px;

}

.info{
    color: white;

}
.gallerymini{
    background-color: #31363F;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    padding 10px;
    margin: 0 5%;
    border-radius: 15px;
}


.hori{
    -ms-flex:33%
    flex:33%;
    max-width: 33%;
    padding: 10px;
    img{padding: 10px 0;}

}


.ver{
    -ms-flex:33%
    flex:33%;
    max-width: 33%;
    padding: 10px 0 0 20px;
    img{padding: 10px 0; }
}

.gallery{
    text-align:center;
    width: 60%;
    padding: 30pt;
    margin-left: 20%;
    background-color: #31363F;


}
h2{
color: white;
padding: 10pt;
}
form{
    background-color: #31363F;
    text-align: center;
    margin: 10pt 30pt;
    border-radius: 15px;
}

.fo{
    background-color: grey;
    margin: 0pt 250pt;
    padding: 10pt 0;


}


.indivi{
    div:hover{ background: grey;}
    width: 20%;


}
.link{
    text-align: center;
    flex: 20%;
    background-image: linear-gradient(to bottom right,black, #31363F);
    /*  div:hover { background: pink;} */
    margin: 5%;
    padding: 5%;
    box-shadow: 10px 6px 8px black;
    img{
        width: 100%;

    }
}

.miniform{
    padding: 15pt;


}

.footer, .footer2{
    border-radius: 15pt;
    right:0;
    bottom: 0;
    background-image: linear-gradient(to bottom, #31363F, black);
    padding: 10pt 100pt 10pt;
    background-color: ;
    color: white;
    text-align: center;
}

nav{
display: block;
  padding: 8px;
  background-color: #dddddd;
}
.footer2{
margin: 0 -200pt;

}
.footer3{
margin: 0 -300pt;

}

.foottext{
    font-size: 18pt;
 font-family: "teko", sans-serif;
}
.social{
    display: inline;
    margin:5pt;
}
.info{

    p:hover{ color: black;}
}

h4 {



}

h1{
font-family: 'orbitron', sans-serif; 
    margin-top: 20%;
    color: #010101;
    text-align: center;
    /*nt-family: "Times New Roman", Times, serif;*/
    font-size: 50pt;
    text-shadow: 0 0 5px #d8d5d5, 0 0 10px #fff, 0 0 15px #d1d1d1, 0 0 20px #bebdbd, 0 0 25px #a5a3a3, 0 0 30px #969595, 0 0 35px #8a8a8a;
    /*text-shadow: 10px 6px 8px black;*/
}


.officers, .members{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 10pt;
   background-color:#31363F; 
    border-radius: 15pt;
}
.
.info-container{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    background-color: blue;
    padding: 5pt;
    flex:40%;


}

.video{
    flex: 400%;
    margin-top: 10%;

    #31363F
}

.link{
    border-radius: 5pt;
    text-align: center;
    flex: 20%;
    background-image: linear-gradient(to bottom right,black,  #31363F);
    div:hover { background: pink;}
    margin: 5%;
    padding: 5%;
    box-shadow: 10px 6px 8px black;
    img{
        width: 100%;

    }
    height: 400pt;
}
.Indivi{
    div:hover { background: grey;
    color:black;}
    width: 20%;
    text-decoration:none;
}


.Mtitles{
    font-size: 26pt;
    color: white;
font-family: "orbitron", sans-serif;
}
.info{
    font-size: 18pt;
    text-decoration:none;
     font-family: "teko", sans-serif;
}

.pic3d{
   img{margin-top: 15%;}
}
.social{
     img{ width: 6%;}
     }
@media (max-width: 810px){

    .navbar{

        margin-left: 15%;
        margin-right: 5%;
    }
    .logo, .logoM{
        img{width:80%;}
        /*margin-top: 5%;*/
        margin-right: 5%;
        text-align: left-side;
        flex: 10%;
    }
    .logoM {
        margin-top: 5%;
    }

    .bt .b1, .bt .b2, .bt .b3{

        display:block;

    }
    .b1, .b2, .b3 {
        width:100%; 
        margin: 5pt;
    }
    .title{
        margin: 20%;
font-size: 20pt;
    }
.Mtitles{
font-size: 18pt;
}
    .minigallery{
        flex-direction: column;
        text-align: center;
        margin-left: 5%;
    }
    .ver{
        margin-left: 8%;
        max-width: 80%;
    }
    .hori{
        margin-left: 10%;
        max-width: 80%;
    }
    .info-container{
        flex-direction: column;

    }
    .form{
        margin: 5% 5%;
        padding: 10pt;

    }
    .fo{
        margin: 5%;

    }
    .members, .officers{
        flex-direction: column;
        width: 80%;
        margin: 10%;
    }



    .Indivi{
        width: 60%;
        margin: 15%;

    }
    .info-container{
        flex-direction: column;

    }

    .social{
    img{ width: 10%;}
    }
    .picture{
img{width: 80%;}
text-align: center;

    }
.pic3d{
    img{width: 100%;
    margin-bottom: 15%;}
}

.foottext{
margin: 0 10%;
font-size: 11pt;
}
}