.socialwall{width:100%; height:41.5vw; margin:0 auto; background-color:#ffffff; padding:0px;}
.socialwall .container{width:100%; height:100%;}
.socialwall .box{background-color:#202c5c; height:100%; position:relative; overflow:hidden;}
.socialwall .col{height:100%; background-color:#ffffff; float:left;}
.socialwall .col .row{padding:1.5%;}

/*Column 1*/
.socialwall .col1{width:25%;}
.socialwall .col1 .row1{height:15%; padding:0 0 1.5% 1.5%;}
.socialwall .col1 .row1 .box{background-color:#ffffff; text-align:left;}
.socialwall .col1 .row1 .box .countdownbox{display:inline-block; background-color:#030303; padding:2px; font-size:24px;}
.socialwall .col1 .row1 .box .countdownbox span{display:inline-block; background-color:#292929; margin:2px; color:#ffffff; text-align:center; padding:8px 5px;}
.socialwall .col1 .row2{height:99.8%; padding:0 0 0 0;}
.socialwall .col1 .row2 .box{background-color:#202c5c;}
.socialwall .col1 .row2 .box .imgbox{width:100%; position:relative;}
.socialwall .col1 .row2 .box .imgbox img{width:100%;}
.socialwall .col1 .row2 .box .imgbox .watchvideo{position:absolute; top:46%; left:0; width:100%; height:20%;}
.socialwall .col1 .row2 .box .imgbox .register{position:absolute; top:50%; left:0; width:100%; height:20%;}
.socialwall .col1 .row2 .box .cdltitle{text-align:left; color:#ffffff; font-size:18px; font-weight:100; padding-top:2px; line-height:22px; background-color:#202c5c; padding:5% 0px 4% 15px;}
.socialwall .col1 .row2 .box .cdltitle span{font-size:16px;}
.socialwall .col1 .row2 .box .cdlhashtag{text-align:center; color:#ffffff; font-size:24px; font-weight:600; padding-top:6%; line-height:24px; background-color:#202c5c;}

/*Column 2*/
.socialwall .col2{width:23%;}
.socialwall .col2 .row1{height:48.5%; padding:1.5%; padding-top:0;}
.socialwall .col2 .row2{height:50%; padding:1.5%; padding-bottom:0;}

.socialwall .col2 .box{background-color:#55acef;}
.socialwall .col2 .boxicon{position:absolute; top:5px; right:5px;}
.socialwall .col2 .boxicon img{width:30px;}
.socialwall .col2 .tweet{color:#ffffff; font-size:22px; line-height:26px; padding:35px 10px 10px 10px; font-weight:normal;}
.socialwall .col2 .boxfooter{position:absolute; bottom:0; left:0; width:100%; height:23%; background-color:#72c2fd;}
.socialwall .col2 .boxfooter a{cursor:pointer;}
.socialwall .col2 .boxfooter table{width:100%;}
.socialwall .col2 .boxfooter table td{vertical-align:top;}
.socialwall .col2 .boxfooter table td:nth-child(1){width:22%; padding-left:3%;}
.socialwall .col2 .boxfooter table td:nth-child(1) img{width:100%; max-width:60px; border-radius:50%;}
.socialwall .col2 .boxfooter table td:nth-child(2){color:#ffffff; font-size:13px; padding-top:5px; padding-left:5px;}
.socialwall .col2 .boxfooter table td:nth-child(2) h6{font-size:14px; line-height:16px;}
.socialwall .col2 .boxfooter table td:nth-child(3){text-align:right; padding-top:3%;}
.socialwall .col2 .boxfooter table td:nth-child(3) img{width:35px; margin-right:5px;}

/*Column 3*/
.socialwall .col3{width:27%;}
.socialwall .col3 .row1{height:100%; padding:1.5%; overflow:hidden; padding-top:0;}
.socialwall .col3 .row1 .box{background-color:#3b5997; padding:8px; text-align:center;}
.socialwall .col3 .row1 .boxicon{position:absolute; top:5px; right:5px;}
.socialwall .col3 .row1 .boxicon img{width:30px;}
/*.socialwall .col3 .row1 .boxheader{padding-left:20px; padding-top:5px;}*/
.socialwall .col3 .row1 .boxheader table td{font-size:16px; font-weight:bold; color:#ffffff; line-height:18px;}
.socialwall .col3 .row1 .boxheader table td span{color:#888888; font-size:14px; font-weight:normal;}
.socialwall .col3 .row1 .boxheader table td img{width:50px; margin-right:10px;}
.socialwall .col3 .row1 .boxcontent{padding:10px 20px; color:#ffffff; font-size:16px; line-height:20px; height:65%; overflow-y:auto;}
.socialwall .col3 .row1 .boxcontent img{width:100%; margin-top:10px; margin-bottom:20px;}
.socialwall .col3 .row1 .boxfooter{position:absolute; bottom:15px; left:0; width:100%; background-color:#3b5997;}
.socialwall .col3 .row1 .boxfooter a{cursor:pointer;}
.socialwall .col3 .row1 .boxfooter img{width:40px; margin-left:15px;}

.socialwall .col3 .row2{height:45.7%; padding:1.5%; overflow:hidden; padding-bottom:0;}
.socialwall .col3 .row2 .box{background-color:#007bb6;}
.socialwall .col3 .row2 .boxicon{position:absolute; top:5px; right:5px;}
.socialwall .col3 .row2 .boxicon img{width:30px;}
.socialwall .col3 .row2 .boxheader{padding-left:10px; padding-top:10px;}
.socialwall .col3 .row2 .boxheader table td{font-size:16px; font-weight:bold; color:#ffffff; line-height:18px;}
.socialwall .col3 .row2 .boxheader table td span{font-size:14px; font-weight:normal;}
.socialwall .col3 .row2 .boxheader table td img{width:50px; margin-right:5px;}
.socialwall .col3 .row2 .boxcontent{padding:10px 20px; color:#ffffff; font-size:17px; line-height:20px; height:52%; overflow-y:auto;}

.socialwall .col3 .row2 .twitterbox{background-color:#55acef; position:relative; height:100%;}
.socialwall .col3 .row2 .twitterbox .boxicon{position:absolute; top:5px; right:5px;}
.socialwall .col3 .row2 .twitterbox .boxicon img{width:30px;}
.socialwall .col3 .row2 .twitterbox .tweet{color:#ffffff; font-size:22px; line-height:26px; padding:25px 10px 10px 10px; font-weight:bold;}
.socialwall .col3 .row2 .twitterbox .boxfooter{position:absolute; bottom:0; left:0; width:100%; height:65px; background-color:#72c2fd;}
.socialwall .col3 .row2 .twitterbox .boxfooter a{cursor:pointer;}
.socialwall .col3 .row2 .twitterbox .boxfooter table{width:100%;}
.socialwall .col3 .row2 .twitterbox .boxfooter table td{vertical-align:top;}
.socialwall .col3 .row2 .twitterbox .boxfooter table td:nth-child(1){width:22%; padding-left:3%;}
.socialwall .col3 .row2 .twitterbox .boxfooter table td:nth-child(1) img{width:100%; max-width:55px; border-radius:50%;}
.socialwall .col3 .row2 .twitterbox .boxfooter table td:nth-child(2){color:#ffffff; font-size:13px; padding-top:5px; padding-left:5px;}
.socialwall .col3 .row2 .twitterbox .boxfooter table td:nth-child(2) h6{font-size:14px; line-height:16px;}
.socialwall .col3 .row2 .twitterbox .boxfooter table td:nth-child(3){text-align:right; padding-top:3%;}
.socialwall .col3 .row2 .twitterbox .boxfooter table td:nth-child(3) img{width:35px; margin-right:5px;}

/*Column 4*/
.socialwall .col4{width:25%;}
.socialwall .col4 .row1{height:28.5%; padding:0 1.5% 1.5% 0;}
.socialwall .col4 .row1 .box{background-color:#202c5c; text-align:center;}
.socialwall .col4 .row1 .box img{height:84%; margin:4%;}
.socialwall .col4 .row1 .box .chat{position:absolute; top:-2px; left:3px; text-align:left;}
.socialwall .col4 .row1 .box .chat img{width:50%;}

.socialwall .col4 .row2{height:37.5%; padding:1.5% 1.5% 1.5% 0;}
.socialwall .col4 .row2 .box { background-color: #007bb6; }
.socialwall .col4 .row2 .imgbox{width:100%; position:relative; padding-top:0;}
.socialwall .col4 .row2 .imgbox img{width:100%;}

.socialwall .col4 .row2 .twitterbox { background-color: #55acef; position: relative; height: 100%; }
.socialwall .col4 .row2 .twitterbox .boxicon { position: absolute; top: 5px; right: 5px; }
.socialwall .col4 .row2 .twitterbox .boxicon img { width: 30px; }
.socialwall .col4 .row2 .twitterbox .tweet { color: #ffffff; font-size: 18px; line-height: 22px; padding: 25px 10px 10px 10px; font-weight: normal; }
.socialwall .col4 .row2 .twitterbox .boxfooter { position: absolute; bottom: 0; left: 0; width: 100%; height: 65px; background-color: #72c2fd; }
.socialwall .col4 .row2 .twitterbox .boxfooter a { cursor: pointer; }
.socialwall .col4 .row2 .twitterbox .boxfooter table { width: 100%; }
.socialwall .col4 .row2 .twitterbox .boxfooter table td { vertical-align: top; }
.socialwall .col4 .row2 .twitterbox .boxfooter table td:nth-child(1) { width: 22%; padding-left: 3%; }
.socialwall .col4 .row2 .twitterbox .boxfooter table td:nth-child(1) img { width: 100%; max-width: 55px; border-radius: 50%; }
.socialwall .col4 .row2 .twitterbox .boxfooter table td:nth-child(2) { color: #ffffff; font-size: 13px; padding-top: 5px; padding-left: 5px; }
.socialwall .col4 .row2 .twitterbox .boxfooter table td:nth-child(2) h6 { font-size: 14px; line-height: 16px; }
.socialwall .col4 .row2 .twitterbox .boxfooter table td:nth-child(3) { text-align: right; padding-top: 3%; }
.socialwall .col4 .row2 .twitterbox .boxfooter table td:nth-child(3) img { width: 35px; margin-right: 5px; }

.socialwall .col4 .row3 { height: 30.5%; padding: 1.5% 1.5% 0 0; }
.socialwall .col4 .row3 .box { background-color: #202c5c; }
.socialwall .col4 .row3 .imgbox { width: 100%; position: relative; padding-top: 0; }
.socialwall .col4 .row3 .imgbox img { width: 100%; }

.socialwall .clear{clear:both;}

@media only screen and (max-width:920px)
{
    
}
@media only screen and (max-width:540px)
{
    .socialwall .col2{display:none;}
    .socialwall .col3{display:none;}
    .socialwall .col4{display:none;}

    .socialwall{}
    .socialwall .container{padding:0;}
    .socialwall .col{float:none;}
    .socialwall .col .row{padding:1.5%;}

    /*Column 1*/
    .socialwall .col1{width:100%; position:relative; height:366px;}
    .socialwall .col1 .row1{height: auto; position: absolute; top: 20%; left: 0; z-index: 1;}
    .socialwall .col1 .row2{height:554px; padding:0;}
    .socialwall .col1 .row2 .box{background-color:#202c5c; height:554px; text-align:center;}
    .socialwall .col1 .row2 .box .imgbox{width:auto; height:75%; position:relative; text-align:right; background-color:#888888;}
    .socialwall .col1 .row2 .box .imgbox img{height:100%; width:auto;}
    .socialwall .col1 .row2 .box .imgbox .watchvideo{position:absolute; top:58%; left:0; width:100%; height:16%;}
    .socialwall .col1 .row2 .box .imgbox .register{position:absolute; top:42%; left:0; width:100%; height:14%;}
}
@media only screen and (max-width:480px)
{
    .socialwall .col2{display:none;}
    .socialwall .col3{display:none;}
    .socialwall .col4{display:none;}

    .socialwall{}
    .socialwall .container{padding:0;}
    .socialwall .col{float:none;}
    .socialwall .col .row{padding:1.5%;}

    /*Column 1*/
    .socialwall .col1{width:100%; position:relative; height:366px;}
    .socialwall .col1 .row1{height: auto; position: absolute; top: 20%; left: 0; z-index: 1;}
    .socialwall .col1 .row2{height:366px; padding:0;}
    .socialwall .col1 .row2 .box{background-color:#202c5c; height:366px; text-align:center;}
    .socialwall .col1 .row2 .box .imgbox{width:auto; height:75%; position:relative; text-align:right; background-color:#888888;}
    .socialwall .col1 .row2 .box .imgbox img{height:100%; width:auto;}
    .socialwall .col1 .row2 .box .imgbox .watchvideo{position:absolute; top:58%; left:0; width:100%; height:16%;}
    .socialwall .col1 .row2 .box .imgbox .register{position:absolute; top:42%; left:0; width:100%; height:14%;}
    .socialwall .col1 .row2 .box .cdltitle{font-size:16px; line-height:20px; padding:10px;}
    .socialwall .col1 .row2 .box .cdltitle span{font-size:14px;}
    .socialwall .col1 .row2 .box .cdlhashtag{font-size:16px; line-height:16px; background-color:#202c5c; padding:8px;}
}
@media only screen and (max-width:360px) 
{
    .socialwall .col2{display:none;}
    .socialwall .col3{display:none;}
    .socialwall .col4{display:none;}

    .socialwall{}
    .socialwall .container{padding:0;}
    .socialwall .col{float:none;}
    .socialwall .col .row{padding:1.5%;}

    /*Column 1*/
    .socialwall .col1{width:100%; position:relative; height:366px;}
    .socialwall .col1 .row1{height: auto; position: absolute; top: 20%; left: 0; z-index: 1;}
    .socialwall .col1 .row2{height:366px; padding:0;}
    .socialwall .col1 .row2 .box{background-color:#202c5c; height:366px; text-align:center;}
    .socialwall .col1 .row2 .box .imgbox{width:auto; height:75%; position:relative; text-align:right; background-color:#888888;}
    .socialwall .col1 .row2 .box .imgbox img{height:100%; width:auto;}
    .socialwall .col1 .row2 .box .imgbox .watchvideo{position:absolute; top:58%; left:0; width:100%; height:16%;}
    .socialwall .col1 .row2 .box .imgbox .register{position:absolute; top:42%; left:0; width:100%; height:14%;}
    .socialwall .col1 .row2 .box .cdltitle{font-size:16px; line-height:20px; padding:10px;}
    .socialwall .col1 .row2 .box .cdltitle span{font-size:14px;}
    .socialwall .col1 .row2 .box .cdlhashtag{font-size:16px; line-height:16px; background-color:#202c5c; padding:8px;}
}