@import url(http://fonts.googleapis.com/css?family=Raleway);
body {
background-color: #f6ede5;
}
.cont-contactInfo {
float: left;
padding-right: 5%;
width: 100%;
}
.cont-contactInfo h3 {
font-size: 28px;
}
.cont-contactInfo h4 {
font-size: 22px;
font-weight: normal;
text-transform: uppercase;
}
.cont-contactInfo h4.section {
margin: 30px 0 0;
}
.cont-contactInfo p {
margin: 0;
}
.cont-contactInfo p > a {
text-transform: uppercase;
font-weight: bold;
}
.cont-contactInfo .social-icons {
list-style: none;
margin: 5px 0 0;
padding: 0;
}
.cont-contactInfo .social-icons li {
float: left;
margin-right: 3px;
}
.cont-contactInfo .social-icons li a {
background-image: url("../images/sprite_social_icons.png");
background-repeat: no-repeat;
display: block;
height: 28px;
width: 29px;
}
.cont-contactInfo .social-icons li a:hover {
opacity: .8;
}
.cont-contactInfo .social-icons li a.icon_twitter {
background-position: -33px 0;
}
.cont-contactInfo .social-icons li a.icon_linkedin {
background-position: -68px 0;
}
.cont-contactInfo .social-icons li a.icon_youtube {
background-position: -102px 0;
}
.cont-contactInfo .social-icons li a.icon_pinterest {
background-position: -135px 0;
}
.cont-contactInfo .social-icons li a.icon_vimeo {
background-position: -169px 0;
}
.cont-contactInfo .social-icons li a.icon_instagram {
background-position: -204px 0;
}
.cont-contactBtn {
width:100%;
margin: 0 auto;
position: relative;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
}
.label {
width:100%;
float:left;
text-align:center;
}
.cont-contactBtn span {
font-family: Calibri;
color: #7b7b7b;
font-size: 1.8em;
text-align:center;
font-weight:100;
}
.cont-contactBtn .cont-flip {
position: absolute;
-webkit-transition: -webkit-transform 0.5s;
-moz-transition: -moz-transform 0.5s;
-o-transition: -o-transform 0.5s;
transition: transform 0.5s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
height: 100%;
width: 100%;
}
.cont-contactBtn .cont-flip .front, .cont-contactBtn .cont-flip .back {
display: block;
margin: 0;
height: 100%;
width: 100%;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.cont-contactBtn .cont-flip .front {
background-color: #ff4d54;
}
.cont-contactBtn .cont-flip .back {
background-color: #fff;
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.cont-contactBtn .btn {
margin-top: 155px;
}
.cont-contactBtn .cont-flip.flipped {
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.cont-contactBtn .contact-form {
padding: 0;
}
.cont-contactBtn .contact-form input, .cont-contactBtn .contact-form textarea {
border: 1px solid #b7b7b7;
font-size: 1.4vw;
padding: 1vw 0;
margin-top:0.9vw;
font-weight:700;
}
.cont-contactBtn .contact-form input[type="text"] {
float: left;
padding-left: 3%;
width: 100%;
margin-bottom:0;
font-weight:700;
}
.cont-contactBtn .contact-form .gutter {
margin-right: 2.8%;
}
.cont-contactBtn .contact-form textarea {
height: 10vw;
padding-left: 3%;
margin-bottom: 0px;
width: 100%;
}
.cont-contactBtn .contact-form input[type="submit"] {
background-color: #81b84d;
border: 1px solid #81b84d;
display: inline-block;
cursor: pointer;
color: #fff;
font-family: Calibri;
font-size:1.5vw;
padding: 1vw 2vw;
text-decoration: none;
text-transform: uppercase;
font-weight: 700;
width:100%;
margin-top:0;
}
.cont-contactBtn .contact-form input[type="submit"]:hover {
background-color: #083d5f;
border: 1px solid #083d5f;
}
.cont-contactBtn .close {
display: block;
height: 19px;
width: 19px;
background-image: url("http://i.imgur.com/WoKg12q.png");
background-repeat: no-repeat;
background-position: center;
position: absolute;
top: 15px;
right: 3%;
}
.btn {
border: 3px #fff solid;
color: #fff;
display: block;
font-size: 15px;
font-weight: normal;
margin: 0 auto;
max-width: 280px;
padding: 15px 0;
text-align: center;
text-transform: uppercase;
text-decoration: none;
width: 100%;
}
@media (min-width:600px) and (max-width:735px) {
.cont-contactBtn .contact-form textarea {
height: 10em;
}
}
@media (min-width:480px) and (max-width:599px) {
.cont-contactBtn .contact-form input, .cont-contactBtn .contact-form textarea {
font-size: 1.2em;
padding: 1em 0;
margin-top: 1em;
}
.cont-contactBtn .contact-form textarea {
font-size: 1.2em;
padding: 1em 1em;
margin-top: 1em;
height: 5em;
}
.cont-contactBtn .contact-form input[type="submit"] {
font-size: 1.5em;
}
}
@media (min-width:320px) and (max-width:479px) {
.cont-contactBtn .contact-form input, .cont-contactBtn .contact-form textarea {
font-size: 1em;
padding: 1em 0;
margin-top: 1em;
}
.cont-contactBtn .contact-form textarea {
font-size: 1em;
padding: 1em 1em;
margin-top: 1em;
height: 5em;
}
.cont-contactBtn .contact-form input[type="submit"] {
font-size: 1em;
}
}