#template3{ height:100%}
 #template3 .casting .fadeinlayer {
     background:url('../img/trans-green.png');
     background-repeat:repeat;
     position:absolute;
     top:0;
     left:0;
     width:100%;
     height:100%;
    
    color:white;
    padding:2rem;


    }
    #template3 .roundlayer {
       text-transform:uppercase;color: white;
        width: calc(0.6*25.89vw);
        height:calc(0.6*25.89vw);
        line-height:calc(0.6*25.89vw);
        border-radius: 100%;
        text-align:center;
        background:url('../img/trans-green.png');
        background-repeat:repeat;
        position: absolute;
        margin: auto;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        vertical-align: middle;
        display: table-cell;
        -webkit-transition-property: all;
			-webkit-transition-duration: .5s;
			-webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);

			-moz-transition-property: all;
			-moz-transition-duration: .5s;
			-moz-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);

			-ms-transition-property: all;
			-ms-transition-duration: .5s;
			-ms-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);

			transition-property: all;
			transition-duration: .5s;
			transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
    }
    #template3 .casting:hover .roundlayer {
         line-height:25.89vw;
        border-radius:0;
        width:100%;
        height:100%;
        -webkit-transition-property: all;
			-webkit-transition-duration: .5s;
			-webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);

			-moz-transition-property: all;
			-moz-transition-duration: .5s;
			-moz-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);

			-ms-transition-property: all;
			-ms-transition-duration: .5s;
			-ms-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);

			transition-property: all;
			transition-duration: .5s;
			transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
    }
   /*#template3 .roundlayer h6 {
        text-transform:uppercase;
        font-weight:bold;
        margin: auto;
        display: table;
        vertical-align: middle;
        height: 100%;
        text-align: center;
        color: white;
    }*/
    #template3 .casting > a {
        display:table;
    }
    #template3 .casting {
        cursor:pointer;
        position:relative;
            height:25.89vw;
            background-size: cover;
            float:left;
    }
    #template3 .casting .fadeinlayer  h6 {
        text-transform:uppercase;
        font-weight:bold;
        border-bottom:1px solid white;
    }
      #template3 .casting .fadeinlayer p {
    }
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
      #template3 .casting {
            height:50vw;
            background-size: cover;
    }
     #template3 .roundlayer {
        text-transform: uppercase;
        color: white;
        line-height:23.3vw;
        width: 23.3vw;
        height: 23.3vw;
    }
    #template3 .casting:hover .roundlayer {
        line-height: 50vw;
        width:  50vw;
        height:  50vw;
    }
}
@media screen and (max-width: 39.9375em){
    #template3 .roundlayer {
        text-transform: uppercase;
        color: white;
        line-height:60vw;
        width: 60vw;
        height: 60vw;
    }
    #template3 .casting:hover .roundlayer {
        line-height: 100vw;
        width: 100vw;
        height: 100vw;
    }
div#top_content {
    height: auto !important;
}
 #template3 .casting {
            height:100vw;
            background-size: cover;
    }
}