/*
Theme Name: the7dtchild
Author: Dream-Theme
Author URI: http://dream-theme.com/
Description: The7 is perfectly scalable, performance and SEO optimized, responsive, retina ready multipurpose WordPress theme. It will fit every site – big or small. From huge corporate portals to studio or personal sites – The7 will become a great foundation for your next project!
Version: 1.0.0
License: This WordPress theme is comprised of two parts: (1) The PHP code and integrated HTML are licensed under the GPL license as is WordPress itself.  You will find a copy of the license text in the same directory as this text file. Or you can read it here: http://wordpress.org/about/gpl/ (2) All other parts of the theme including, but not limited to the CSS code, images, and design are licensed according to the license purchased. Read about licensing details here: http://themeforest.net/licenses/regular_extended
Template: dt-the7
*/
.sidepage-icons {
    position: fixed;
    top: 285px;
    right: 50px;
    z-index: 999;
}
.sidepage-icons .icon {
    /*width: 45px;*/
    height: 45px;
    margin-bottom: 4px;
    position: relative;
    left: 45px;
    -webkit-animation: icon-slide-in 1s forwards;
    animation: icon-slide-in .75s forwards;
    animation-delay: 2s;
    opacity: 0;
}
.sidepage-icons .icon div.main {
    position: absolute;
    top: 0px;
    right: 15px;
    background-color: #6a6865;
    width: 200px;
    padding: 9px 12px;
    transition: .5s;
    border-top-left-radius: 10px;
    clip: rect(0px, 200px, 45px, 200px);
    border-bottom-left-radius: 10px;
    height: 27px;
    text-align: left;
}

.sidepage-icons .icon span.main-span {
    display: block;
    width: 45px;
    padding: 0px 0;
    position: relative;
    z-index: 10;
    background-color: #58595B;
    height: 45px;
    border-radius: 10px;
}
.sidepage-icons .icon a {
    background-color: #58595B;
    display: block;
    text-align: center;
    position: relative;
    text-decoration: none !important;
    border-radius: 10px;
    color:#f2e456;
    font-weight:bold;
}
.sidepage-icons .icon a:hover div.main {
    clip: rect(0px 200px 45px 0px);
}

.sidepage-icons .icon a:hover div.main.mailchimp-signup {
    clip: rect(0px 300px 45px 0px);
}

.sidepage-icons .icon.share div.main {
    width:85px;
    clip: rect(0px, 85px, 45px, 85px);
}

.sidepage-icons .icon.share a:hover div.main {
    clip: rect(0px, 85px, 45px, 0px);
}

.icon .fa{
    font-size: 26px;
    float: left;
    margin-right: 15px;
}

.icon .fa:nth-child(2) {
    margin-right:0px;
}

.icon div.wpcf7 {
    width: 273px;
}
.icon div.wpcf7 input {
    height: 27px;
    color: #000;
}

input.wpcf7-validates-as-required.wpcf7-not-valid {
    border-color: rgba(51,51,51,0.12);
}

.sidepage-icons .icon a:hover div.main.callback-request {
    clip: rect(0px 400px 45px 0px);
}

.wpcf7-textarea {
    height:100px;
}

div.wpcf7-response-output {
    border: 0px;
    margin: 0px;
    padding: 0px;
    background: transparent !important;
}

.wpcf7-mail-sent-ok:before {
    content: "";
}

.sidepage-icons .icon div.main.callback-request input {
    width:250px;
}

.sidepage-icons .icon div.main.callback-request {
    clip: rect(0px 400px 45px 400px);
    width:275px;
}
.sidepage-icons .icon div.main.mailchimp-signup {
    clip: rect(0px 300px 45px 300px);
    width:300px;
}

.sidepage-icons .icon:nth-child(2n){ animation-delay: 2.05s }
.sidepage-icons .icon:nth-child(3n){ animation-delay: 2.1s }
.sidepage-icons .icon:nth-child(4n){ animation-delay: 2.15s }
.sidepage-icons .icon:nth-child(5n){ animation-delay: 2.2s }
.sidepage-icons .icon:nth-child(6n){ animation-delay: 2.25s }
@keyframes icon-slide-in {
    0% {
        left: 45px;
        transform: scale(1);
    }
    25% {
        opacity: 1;
    }
    50% {

    }
    75% {
        left: -8px;
        transform: scale(1.05);
    }
    100% {
        left: 0;
        transform: scale(1);
        opacity: 1;
    }
}

@media screen and (max-width: 600px) {
    .sidepage-icons {
        display:none;
    }
}