/* CSS for the loading circle. */
/* Thanks to https://www.w3schools.com/howto/howto_css_loader.asp */
.loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 240px;
    height: 240px;
    margin-top: 10%;
    margin-left: auto;
    margin-right: auto;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* CSS for the loading dots. */
/* Thanks to https://codepen.io/xwildeyes/pen/KpqVzN */
.loading span {
    /**
     * Use the blink animation, which is defined above
     */
    animation-name: blink;
    /**
     * The animation should take 1.4 seconds
     */
    animation-duration: 1.4s;
    /**
     * It will repeat itself forever
     */
    animation-iteration-count: infinite;
    /**
     * This makes sure that the starting style (opacity: .2)
     * of the animation is applied before the animation starts.
     * Otherwise we would see a short flash or would have
     * to set the default styling of the dots to the same
     * as the animation. Same applies for the ending styles.
     */
    animation-fill-mode: both;
}

.loading span:nth-child(2) {
    /**
     * Starts the animation of the third dot
     * with a delay of .2s, otherwise all dots
     * would animate at the same time
     */
    animation-delay: .2s;
}

.loading span:nth-child(3) {
    /**
     * Starts the animation of the third dot
     * with a delay of .4s, otherwise all dots
     * would animate at the same time
     */
    animation-delay: .4s;
}

@keyframes blink {
    /**
     * At the start of the animation the dot
     * has an opacity of .2
     */
    0% {
      opacity: .2;
    }
    /**
     * At 20% the dot is fully visible and
     * then fades out slowly
     */
    20% {
      opacity: 1;
    }
    /**
     * Until it reaches an opacity of .2 and
     * the animation can start again
     */
    100% {
      opacity: .2;
    }
}

/* CSS for media objects. */
.modal-demo {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.modal-video {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.modal-image {
    max-width: 100%;
    max-height: 500px;
}

/* CSS for media tabs. */
.video-tab {
    position: relative;
    width: 100%;
    height: 100%;
    padding-bottom: 56.5%;
}

.image-tab {
    position: relative;
    width: 100%;
    height: 100%;
    padding-bottom: 0%;
}

/* CSS for the cards on the page. */
/* Thanks to https://bootsnipp.com/snippets/xvodW */
.shape{    
    border-style: solid; border-width: 0 70px 40px 0; float:right; height: 0px; width: 0px;
    -ms-transform:rotate(360deg); /* IE 9 */
    -o-transform: rotate(360deg);  /* Opera 10.5 */
    -webkit-transform:rotate(360deg); /* Safari and Chrome */
    transform:rotate(360deg);
}

.shape-text{
    text-align: center;
    color:#fff; font-size:12px; font-weight:bold; position:relative; right:-36px; top:-2px; white-space: nowrap;
    -ms-transform:rotate(30deg); /* IE 9 */
    -o-transform: rotate(360deg);  /* Opera 10.5 */
    -webkit-transform:rotate(30deg); /* Safari and Chrome */
    transform:rotate(30deg);
}

.project {
    height: 400px !important;
    min-height:300px;
    height:auto;
}

.project-content h3 {
    word-wrap: break-word;
    max-width: 75%;
}

.project{
    background:#fff; border:1px solid #ddd; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); margin: 15px 0; overflow:hidden;
}

.project-radius{
    border-radius:7px;
}

.project-default {    border-color: #999999; }
.project-default .shape{
    border-color: transparent #999999 transparent transparent;
    border-color: rgba(255,255,255,0) #999999 rgba(255,255,255,0) rgba(255,255,255,0);
}

.project-java {    border-color: #f00; }
.project-java .shape{
    border-color: transparent #f00 transparent transparent;
    border-color: rgba(255,255,255,0) #f00 rgba(255,255,255,0) rgba(255,255,255,0);
}

.project-assembly {    border-color: #d9534f; }
.project-assembly .shape{
    border-color: transparent #d9534f transparent transparent;
    border-color: rgba(255,255,255,0) #d9534f rgba(255,255,255,0) rgba(255,255,255,0);
}

.project-csharp {  border-color: #5cb85c; }
.project-csharp .shape{
    border-color: transparent #5cb85c transparent transparent;
    border-color: rgba(255,255,255,0) #5cb85c rgba(255,255,255,0) rgba(255,255,255,0);
}

.project-python {  border-color: #366f9e; }
.project-python .shape{
    border-color: transparent #366f9e transparent transparent;
    border-color: rgba(255,255,255,0) #366f9e rgba(255,255,255,0) rgba(255,255,255,0);
}

.project-html { border-color: #5bc0de; }
.project-html .shape{
    border-color: transparent #5bc0de transparent transparent;
    border-color: rgba(255,255,255,0) #5bc0de rgba(255,255,255,0) rgba(255,255,255,0);
}

.project-cpp {  border-color: #f0ad4e; }
.project-cpp .shape{
    border-color: transparent #f0ad4e transparent transparent;
    border-color: rgba(255,255,255,0) #f0ad4e rgba(255,255,255,0) rgba(255,255,255,0);
}

.project-content {
    padding:0 20px 10px;
}