@charset "utf-8"; 
/* Contact */

.contact{height: 200px;
background-color: #0e0d0d;
color: #fff;
margin: 0 50px 25px 50px;
font-size: 20px;
font-family: cambria;
border-radius: 14px;
border-left: 10px solid #f1f2f2; overflow:visible;}

#contact-chris-header{float:left; height:200px; width:200px;  background-image:url(../i/portrait1.jpg); background-size:cover;}
#p{float:left; height:200px; width:200px; background-image:url(../i/art_punctuality.jpg); background-size:cover;}
#gp{float:left; height:200px; width:200px; background-image:url(../i/art_gravitypandas.jpg); background-size:cover;}


.ConSlice{display: inline-block;
width:65px; height:200px; float:left;  padding-left:20px; cursor:pointer; position:relative; -webkit-transition: background-position 0.4s;
    -moz-transition: background-position 0.4s;
    transition: background-position 0.4s;
	background-size: 100% 200%; }
	
	
.ConPhoneExt, .ConEmailExt, .ConTwitterExt, .ConSoundcloudExt, .ConFacebookExt, .ConYouTubeExt{background: #f1f2f2; width:430px; }

.ConText{color: #0E0D0D;
padding-top: 50px;
display: inline-block; font-size:18px;}

.ConText h1{
font-size: 25px;
font-weight: 600;
}

@media (max-width: 1226px) {
.ConPhoneExt, .ConEmailExt, .ConTwitterExt, .ConSoundcloudExt, .ConFacebookExt, .ConYouTubeExt{background: #f1f2f2; width:205px; }
.ConText{font-size:16px; padding-top:35px; padding-right:5px;}
.ConText h1{font-size: 19px;}
.ConEmailExt .ConText h1{font-size:14px;}
.ConSlice{height:150px;}
#contact-chris-header, #gp, #p{height:150px; width:150px;}
.contact{height: 150px;}
.ConPhone::after, .ConEmail::after, .ConTwitter::after, .ConSoundcloud::after, .ConFacebook::after, .ConYouTube::after{margin-top:45px!important;}
}

@media (max-width: 1024px) {
.ConPhoneExt, .ConEmailExt, .ConTwitterExt, .ConSoundcloudExt, .ConFacebookExt, .ConYouTubeExt{background: #f1f2f2; width:190px; }
.ConText{font-size:15px; padding-top:15px; padding-right:5px;}
.ConText h1{font-size: 17px;}
.ConEmailExt .ConText h1{font-size:13px;}
.ConSlice{height:100px;}
#contact-chris-header, #gp, #p{height:100px; width:100px;}
.contact{height: 100px;}
.ConPhone::after, .ConEmail::after, .ConTwitter::after, .ConSoundcloud::after, .ConFacebook::after, .ConYouTube::after{margin-top:25px!important;}
}

@media (max-width: 955px) {}

.ConPhone{ background-image: linear-gradient(to right, #0e0d0d 50%, #27b967 50%); background-position:left bottom;  background-size: 201% 100%;}
.ConPhone::after{content:" "; display:inline-block; width:50px; height:50px; background-image:url(../i/ico-phone_i.png); background-repeat:no-repeat;background-size: contain;
margin-top: 65px;
margin-left: -1px; transition:ease-in-out 0.5s;}
.ConEmail{background-image: linear-gradient(to right, #0e0d0d 50%, #9F191B 50%); background-position:left bottom;  background-size: 201% 100%;}
.ConEmail::after{content:" "; display:inline-block; width:50px; height:50px; background-image:url(../i/ico-email_i.png); background-repeat:no-repeat;background-size: contain;
margin-top: 65px;
margin-left: -1px; transition:ease-in-out 0.5s;}
.ConTwitter{background-image: linear-gradient(to right, #0e0d0d 50%, #2195E8 50%); background-position:left bottom;  background-size: 201% 100%;}
.ConTwitter::after{content:" "; display:inline-block; width:50px; height:50px; background-image:url(../i/ico-twitter_i.png); background-repeat:no-repeat;background-size: contain;
margin-top: 65px;
margin-left: -1px; transition:ease-in-out 0.5s;}
.ConSoundcloud{background-image: linear-gradient(to right, #0e0d0d 50%, #fb9602 50%); background-position:left bottom;  background-size: 201% 100%;}
.ConSoundcloud::after{content:" "; display:inline-block; width:50px; height:50px; background-image:url(../i/ico-soundcloud_i.png); background-repeat:no-repeat;background-size: contain;
margin-top: 65px;
margin-left: -1px; transition:ease-in-out 0.5s;}
.ConFacebook{background-image: linear-gradient(to right, #0e0d0d 50%, #3b5998 50%); background-position:left bottom;  background-size: 201% 100%;}
.ConFacebook::after{content:" "; display:inline-block; width:50px; height:50px; background-image:url(../i/ico-facebook_i.png); background-repeat:no-repeat;background-size: contain;
margin-top: 65px;
margin-left: -1px; transition:ease-in-out 0.5s;}
.ConYouTube{background-image: linear-gradient(to right, #0e0d0d 50%, #DB1B1E 50%); background-position:left bottom;  background-size: 201% 100%;}
.ConYouTube:after{content:" "; display:inline-block; width:50px; height:50px; background-image:url(../i/ico-youtube_i.png); background-repeat:no-repeat;background-size: contain;
margin-top: 65px;
margin-left: -1px; transition:ease-in-out 0.5s;}


.ConPhoneWrap:hover .ConPhone, .ConEmailWrap:hover .ConEmail, .ConTwitterWrap:hover .ConTwitter, .ConSoundcloudWrap:hover .ConSoundcloud, .ConFacebookWrap:hover .ConFacebook, .ConYouTubeWrap:hover .ConYouTube{  background-position: right bottom; background-size:200% 100%;}
.ConPhoneWrap:hover .ConPhone::after, .ConEmailWrap:hover .ConEmail::after, .ConTwitterWrap:hover .ConTwitter::after, .ConSoundcloudWrap:hover .ConSoundcloud::after, .ConFacebookWrap:hover .ConFacebook::after, .ConYouTubeWrap:hover .ConYouTube::after{width: 60px;
height: 60px;
transition: ease-in-out 0.5s;
transform: rotate(360deg);
margin-left: -7px; margin-top:60px;}
.contact_n{display:none !important;}