web / web / project / style

.main {
background-color: #eee;
width: 100%;
}
.header {
background-image: url(im/Kirpichnye-steny1.jpg);
width: 100%;
}

.space {
width:34%;
height:25px;
float:left;

}
.number {
width: 66%;
height: 20px;
background-color: #2b2b2b;
font-family: 'Cabin', sans-serif;
font-size: 12px;
color:white;
float:left;
text-align: center;
font-weight: bold;
padding-top: 5px;

}

.the {
width: 39%;
height: auto;
font-size: 90px;
font-weight: bold;
display: inline-block;
text-align:center;
font-family: 'Orbitron', sans-serif;;
font-weight: bold;
color: #D40200;

}

.wall {
width: 60%;
height: auto;
font-size: 160px;
font-weight: bold;
display:inline-block;
text-align:center;
font-family:'Cabin', sans-serif;
color: white;
padding-top: 30px;
background-color: #D40200;

}

.line {
background-color: #D40200;
height: 25px;
width: 100%;
-webkit-animation-name: 'line';
-moz-animation-name: 'line';
-o-animation-name: 'line';
-ms-animation-name: 'line';
animation-name: 'line';
animation-duration: 3s;
-webkit-animation-duration:3s;
-moz-nimation-duration:3s;
-o-nimation-duration:3s;
-ms-nimation-duration:3s;
animation: 'line' 3s ;


}

@-webkit-keyframes 'line' {
from {
width: 0%;
}
to {
width:100%;
}
}

@keyframes 'line': {
from {
width: 0%;
}
to {
width:100%;
}
}


.nav {
width: 100%;
height: 100px;

}

a {
text-decoration: none;
}

.sectionElement {
width: 25%;
background-color: #2b2b2b;
height: 60px;
float:left;
color: white;
font-family: 'Cabin', sans-serif;
font-size: 20px;
padding-top: 40px;
text-align: center;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
transition:0.4s;
}
.sectionElement:hover {
background-color: white;
}

#s1:before {
content: "ART";
position: absolute;
opacity: 0;
color:#D40200;
font-family: 'Cabin', sans-serif;
font-weight: bold;
font-size: 40px;
transition:0.4s;
margin-top: -18px;
}
#s2:before {
content: "GEO";
position: absolute;
opacity: 0;
color:#D40200;
font-family: 'Cabin', sans-serif;
font-weight: bold;
font-size: 40px;
transition:0.4s;
margin-top: -18px;
}
#s3:before {
content: "OLD";
position: absolute;
opacity: 0;
color:#D40200;
font-family: 'Cabin', sans-serif;
font-weight: bold;
font-size: 40px;
transition:0.4s;
margin-top: -18px;
}
#s4:before {
content: "SPACE";
position: absolute;
opacity: 0;
color:#D40200;
font-family: 'Cabin', sans-serif;
font-weight: bold;
font-size: 40px;
transition:0.4s;
margin-top: -18px;
margin-left: -10px;
}

#s1:hover:before {
opacity:1 ;
text-align: left;

}
#s2:hover:before {
opacity:1 ;
text-align: left;

}
#s3:hover:before {
opacity:1 ;
text-align: left;

}
#s4:hover:before {
opacity:1 ;
text-align: left;

}

.wrapper {
background-color: #474141;
width:100%;
height: auto;
padding-top: 150px;
}

.round {
width: 600px;
height: 600px;
background:white;
border-radius: 50%;
margin: 0 auto;
letter-spacing: -0.4em;
line-height: 85%;

}

.rectangle {
position: fixed;
width:15%;
height: 100px;
background-color:#D40200;

}
.circleElement {
letter-spacing: normal;
width: 300px;
height: 300px;
overflow: hidden;
opacity: 0.99;
display: inline-block;
transition: 1s;

}
#b1 {
background: #2b2b2b;
border-radius: 300px 0 0 0;
-webkit-border-radius: 300px 0 0 0;
-moz-border-radius: 300px 0 0 0;
-ms-border-radius: 300px 0 0 0;
-o-border-radius: 300px 0 0 0;
padding-left: -20px;
}

#b2 {
background: white;
border-radius: 0 300px 0 0;
-webkit-border-radius: 0 300px 0 0;
-moz-border-radius: 0 300px 0 0;
-ms-border-radius: 0 300px 0 0;
-o-border-radius: 0 300px 0 0;

}
#b3 {
background: white;
border-radius: 0 0 0 300px;
-webkit-border-radius: 0 0 0 300px;
-moz-border-radius: 0 0 0 300px;
-ms-border-radius: 0 0 0 300px;
-o-border-radius: 0 0 0 300px;
text-align: right;

}
#b4 {
background: #D40200;
border-radius: 0 0 300px 0;
-webkit-border-radius: 0 0 300px 0;
-moz-border-radius: 0 0 300px 0;
-ms-border-radius: 0 0 300px 0;
-o-border-radius: 0 0 300px 0;
text-align: right;
}
#b1:hover {
background-image: url(im/Liu_Bolin_HITC_No84_Graffiti_No2_photograph_2009_120x120cm_2009.jpg);
background-size: 100%;
tranform: translate(-10px,-10px);
-webkit-transform: translate(-10px,-10px);
-moz-transform: translate(-10px,-10px);
-ms-transform: translate(-10px,-10px);
-o-transform: translate(-10px,-10px);
box-shadow: 0 0 10px rgba(0,0,0,0.5);

}
#b2:hover {
background-image: url(im/aakashnihalaniindoorartgifs3.gif);
background-size: 100%;
tranform: translate(10px,-10px);
-webkit-transform: translate(10px,-10px);
-moz-transform: translate(10px,-10px);
-ms-transform: translate(10px,-10px);
-o-transform: translate(10px,-10px);
transition:all ease-out 1s;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
#b3:hover {
background-image: url(im/rex-whistler-policeman-and-sailor.gif);
background-size: 100%;
tranform: translate(-10px,10px);
-webkit-transform: translate(-10px,10px);
-moz-transform: translate(-10px,10px);
-ms-transform: translate(-10px,10px);
-o-transform: translate(-10px,10px);
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}


#b4:hover {
background-image: url(im/01-var317a01.jpg);
background-size: 180%;
tranform: translate(10px,10px);
-webkit-transform: translate(10px,10px);
-ms-transform: translate(10px,10px);
-moz-transform: translate(10px,10px);
-o-transform: translate(10px,10px);
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

#b1:hover #t1 {
opacity:0;
transform:translateX(500px);
-webkit-transform-translateX:(500px);
-moz-transform-translateX:(500px);
-ms-transform-translateX:(500px);
-o-transform-translateX:(500px);

}
#b2:hover #t2{
opacity:0;
-webkit-transform:translateY:(500px);
-moz-transform:translateY(500px);
-ms-transform:translateY(500px);
-o-transform:translateY(500px);
transform:translateY(500px);

}
#b3:hover #t3{
pacity:0;
transform:translateY(-500px);
-webkit-transform-translateX:(-500px);
-moz-transform-translateX:(-500px);
-ms-transform-translateX:(-500px);
-o-transform-translateX:(-500px);
color:black;
}


#b4:hover #t4{
opacity:0;
transform:translateX(-500px);
-webkit-transform-translateX:(-500px);
-moz-transform-translateX:(-500px);
-ms-transform-translateX:(-500px);
-o-transform-translateX:(-500px);
}



.titleElement {
line-height: 100%;
font-family: 'Cabin', sans-serif;
font-weight: bold;
transition:0.5s;
}

#t1 {
font-size: 150px;
text-align: left;
color:#D40200;
-webkit-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
-ms-transform:rotate(-90deg);
-o-transform:rotate(-90deg);
transform:rotate(-90deg);
}

#t2 {
font-size: 170px;
color:#D40200;
}

#t3 {
font-size: 250px;
color:#2b2b2b;
}

#t4 {
font-size: 250px;
color:white;
-webkit-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
-ms-transform:rotate(-90deg);
-o-transform:rotate(-90deg);
transform:rotate(-90deg);
}


.name {
width: 60%;
font-size:72px;
color:#D40200;
font-family: 'Orbitron', sans-serif;
font-weight: bold;
margin-top: 50px;
margin-left:20%;
position:relative;
-webkit-animation: 'movement' 5s infinite ease-out;
-moz-animation: 'movement' 5s infinite ease-out;
-ms-animation: 'movement' 5s infinite ease-out;
-o-animation: 'movement' 5s infinite ease-out;
animation: 'movement' 5s infinite ease-out;
-webkit-animation-delay:5s;
-moz-animation-delay:5s;
-ms-animation-delay:5s;
-o-animation-delay:5s;
animation-delay:5s;
animation-direction:alternate-reverse;
-webkit-animation-direction:alternate-reverse;
-moz-animation-direction:alternate-reverse;
-ms-animation-direction:alternate-reverse;
-o-animation-direction:alternate-reverse;
}

@-webkit-keyframes 'movement'
{
0%
{
left: -100%;
opacity: 0.3;

}
70%
{
left: 0%;
opacity: 1;
}
100%
{
opacity: 0;
}
}
@keyframes 'movement'
{
0%
{
left: -100%;
opacity: 0.3;

}
70%
{
left: 0%;
opacity: 1;
}
100%
{
opacity: 0;
}

}


.article {
margin-left:20%;
width: 60%;
height: auto;
margin-bottom: 50px;
display: inline-block;
background-color: #2b2b2b;
font-family: 'Cabin', sans-serif;
font-weight: bold;

}

.colomn {
width: 30%;
height: auto;
background-color: #2b2b2b;
margin-right: 5%;
display: inline-block;
}

.colomn1 {
width: 25%;
height: auto;
background-color: white;
display: inline-block;
margin-left: 5%;
}
.colomn2 {
width: 60%;
height: auto;
background-color: white;
display: inline-block;
margin-left: 5%;
}


.try {
width:100%;
font-size: 70px;
letter-spacing: -10px;
font-family: 'Cabin', sans-serif;
display: inline-block;
text-align: center;
color:#FFC700;
}

.paragraphElement {
width: 100%;
height: auto;
color: #2b2b2b;
padding-top: 40px;
padding-bottom: 40px;
line-height: 1.5;
display: inline-block;
}

#paragraphlittle {
font-size: 10px;
font-family: 'Montserrat', sans-serif;
padding-left: 10px;
}

#paragraphbig {
font-size: 100%;
font-family: 'Montserrat', sans-serif;
text-align: center;
}
#bigText {
font-size: 10px;
font-family: 'Montserrat', sans-serif;
padding-left: 10px;
color:#E8159F;
line-height: 20px;

}

.paragraphRotate {
width: 40%;
padding:3%;
margin-top: 5%;
font-size: 15px;
tranform:rotate(90deg);
-webkit-tranform:rotate(90deg);
display: inline-block;
font-weight: 700;
color:#2b2b2b;
background-color: #FFC700;
}

#ph1 {
margin-left: 20px;
margin-right: 20px;
}



.photo {

width:auto;
margin-top: 30px;
margin-bottom: 30px;
}

img {
width: 100%;
max-width: 100%;
}
#a1{
height: auto;
background-color: #2b2b2b;

}

#c1 {
width: 100%;
height: auto;
display: inline-block;
background-color: #2b2b2b;

}

.writing {
width: 60%;
height: 50px;
color:white;
transform:translate(50%,-400%);
-webkit-transform:translate(50%,-400%);
font-family: 'Cabin', sans-serif;
font-weight: bold;
letter-spacing: 3px;
font-size:25px;


}

#c2 {
width: 60%;
float: right;
background-color: #2b2b2b;
}

.felice-varini {
width: 30%;
letter-spacing: 4px;
font-size: 70%;
float:left;
height: auto;
font-family: 'Montserrat', sans-serif;
color: white;
padding-top: 40px;
padding-bottom: 40px;
line-height: 1.5;
display: inline-block;
text-align: center;

}

#f1 {
width: 75%;
font-size: 50%;
margin-left: 20%;
display: inline-block;
text-align: left;
}

.mini-image {
width: 30%;
float: left;
margin-left: 10%;

}
.video {
margin-left: 20%;
margin-top: -50px;

}

.footer {
width: 100%;
background-image: url(im/Kirpichnye-steny1.jpg);
}
.navDown {
width: 85%;
height:auto;
margin-left: 15%;
background-image: url(im/Kirpichnye-steny1.jpg);
}
.downElement{
width: 23%;
float:left;
font-family: 'Montserrat', sans-serif;
font-size: 20px;
background-color: #2b2b2b;
color:white;
text-align: center;
padding-top: 20px;
transition:0.5s;
padding-bottom: 15px;
}
.downElement:hover {
background-color:#D40200;
}


@media screen and (max-width: 630px){
.the{
margin-top: 30px;
}
.wrapper{
padding-top: 40px;
}
.round{
width: 300px;
height: 300px;
margin-top: 0;
}
.circleElement{
width: 150px;
height: 150px;
}
#t1 {
font-size:80px;
}
#t2 {
font-size:90px;
}
#t3 {
font-size:120px;
}
#t4 {
font-size:80px;
}
.name {
width: 100%;
margin-top: 30px;
margin-left:0;
position:static;
opacity: 1;
font-size: 60px;

}
.article{
margin-left: 0%;
width:100%;
background-color: white;
}
.colomn1 {
width: 32%;
margin: 0;
float: left;


}
.wall {

width: 100%;
}
.video {
width: 100%;
margin:0;
}
.colomn {
background-color: white;
}
#paragraphbig{
font-size: 25px;
text-align: center;
}
.navDown {
width: 100%;
margin-left: 0;
}
.downElement{
width:25%;
}

}