/*
Property of Newhead Studio. Copyright © 2015 - today All rights reserved.
*/

@import url("./commons.css");

.view-right iframe {
    width: 60%;
    height: 26vw;
    margin: 2.5% 20% 0 20%;
    border: 2px solid #530400;
}

.view-right h3 {
    display: block;
    width: 30%;
    margin: 2% 0 0 4%;
    border-bottom: 2px solid #530400;
    font-family: "Colaborate";
    font-size: 2vw;
    text-align: justify;
    color: var(--main-text-color);
}

.view-right #article-info {
    display: block;
    width: auto;
    margin: 0.5% 0 0 4.5%;
    padding: 0;
    font-size: 1.1vw;
    font-style: italic;
    color: var(--main-text-color);
}

.view-right #showreel {
    width: 70%;
    max-width: 100%;
    height: auto;
    margin: 2% 15%;
    padding: 0;
    border: 2px solid #530400;
    background-size: 100% 100%;
}

.view-right p {
    display: block;
    width: 90%;
    margin: 2% 5% 0 5%;
    padding: 0;
    font-family: "Colaborate";
    font-size: 1.1vw;
    text-align: justify;
    color: var(--main-text-color);
}

.textLink {
    margin: 0;
    padding: 0;
    font-family: "Colaborate";
    font-size: 1.1vw;
    text-align: justify;
    text-decoration: underline;
    color: var(--main-text-color);
}

.textLink:hover {
    text-decoration: none;
    color: black;
}

.view-right .listWithP {
    width: 90%;
    margin: -1% 5% 0 5%;
}

.view-right ul {
    width: 90%;
    margin: 1% 5% 0 5%;
}

.view-right ul li {
    margin: 0.25% 0 0 4%;
    padding: 0;
    font-family: "Colaborate";
    font-size: 1.1vw;
    text-align: justify;
    color: var(--main-text-color);
}

.view-right #available {
    margin: 0;
    padding: 0;
    font-family: "Colaborate";
    font-size: 1.1vw;
    text-decoration: underline;
    color: var(--main-text-color);
}

.view-right #available:hover {
    text-decoration: none;
}

.view-right #legend {
    display: block;
    width: 80%;
    margin: 2% 6% 0 6%;
    padding: 0;
    font-family: "Colaborate";
    font-size: 0.9vw;
    font-style: italic;
    text-align: justify;
    color: var(--main-text-color);
}

.scrollup {
    display: none;
    position: fixed;
    right: 0.5%;
    bottom: 5%;
    width: 2%;
    height: 2%;
    text-indent: -9999px;
    opacity: 0.3;
    transition: all .2s ease-in-out;
}

.scrollup:hover {
    transform: scale(1.02) translateY(-2px);
}

.scrollup img {
    display: block;
    width: 100%;
    background-size: 100% 100%;
}

.view-right #zoom {
    display: none;
    position: absolute;
    right: 2.5%;
    width: 0;
    height: auto;
    border: 2px solid #530400;
    background-color: var(--white-color);
    cursor: pointer;
}

.view-right .pictures-zone {
    width: 95%;
    height: auto;
    margin: auto;
    font-size: 0;
}

.view-right .pictures-zone img {
    width: 48%;
    height: auto;
    margin: 1%;
    padding: 0;
    border: 2px solid #530400;
    background-size: 100% 100%;
    cursor: pointer;
}

.view-right footer {
    position: relative;
    width: 60%;
    margin: 0 20% 1% 20%;
}