@charset "UTF-8";

/*
Theme Name: Webizzzo COFOF
Theme URI: https://wordpress.org/themes/webizzoo_cofof/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Webizzzo COFOF is a blank canvas for your ideas and it makes the block editor your best brush. With new block patterns, which allow you to create a beautiful layout in a matter of seconds, this theme’s soft colors and eye-catching — yet timeless — design will let your work shine. Take it for a spin! See how Webizzzo COFOF elevates your portfolio, business website, or personal blog.
Requires at least: 5.3
Tested up to: 5.8
Requires PHP: 5.6
Version: 1.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: webizzoo_cofof
Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-assets/images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready

Webizzzo COFOF WordPress Theme, (C) 2020 WordPress.org
Webizzzo COFOF is distributed under the terms of the GNU GPL.
*/

@font-face{

font-family: 'Graphik';

src:url(assets/fonts/Graphik-Regular.woff);

font-weight:400;

font-style:normal;

}

@font-face{

font-family: 'Graphik';

src:url(assets/fonts/Graphik-Medium.woff);

font-weight:500;

font-style:normal;

}





@font-face{

font-family: 'TTFirsNeue';

src:url(assets/fonts/TTFirsNeue-Light.woff);

font-weight:300;

font-style:normal;

}

@font-face{

font-family: 'TTFirsNeue';

src:url(assets/fonts/TTFirsNeue-Regular.woff);

font-weight:400;

font-style:normal;

}

@font-face{

font-family: 'TTFirsNeue';

src:url(assets/fonts/TTFirsNeue-Medium.woff);

font-weight:500;

font-style:normal;

}

@font-face{

font-family: 'TTFirsNeue';

src:url(https://cofof.org/wp-content/themes/webizzoocofof/assets/fonts/TTFirsNeue-Demi.woff);

font-weight:600;

font-style:normal;

}

@font-face{

font-family: 'TTFirsNeue';

src:url(assets/fonts/TTFirsNeue-Bold.woff);

font-weight:700;

font-style:normal;

}

@font-face{

font-family: 'TTFirsNeue';

src:url(assets/fonts/TTFirsNeue-Black.woff);

font-weight:800;

font-style:normal;

}

@font-face{font-family:'TTFirsNeue';src:url(assets/fonts/everett-regular-webfont.woff) format("woff2"),url(assets/fonts/everett-regular-webfont.woff) format("woff");font-style:normal;font-weight:400}



html{background:#fff}

body{background:#fff; padding:0px; margin:0px; font-family: 'TTFirsNeue'; font-size:16px; line-height:25px; color:#302F3A; font-weight:400;  }





html,body{padding:0;margin:0; }

*{ padding:0px; margin:0px; outline:none;}



ul{ padding:0px; margin:0px; text-decoration:none; list-style-type:none;}



a{ padding:0px; margin:0px; text-decoration:none; border:0px; outline:none;}

/*a:hover{text-decoration:none; color:inherit;}*/

a img{ border:0px; padding:0px; margin:0px;}

.container {width: 90%; margin:0 auto; position:relative; } 

.container:after{content:""; display:block; clear:both;}

.container-full{ width:100%; }

.half-container{ width:50%; margin:0 auto; }

.clear{ clear:both; font-size:0px; line-height:0px;}



p{ font-size: 16px; line-height:24px; color:#7B7B7B; margin-bottom:20px; font-weight:normal;}

h1{ font-size:44px; line-height:56px; font-weight:400; font-family: 'TTFirsNeue';}

h2{ font-size:36px; line-height:42px; font-weight:400; font-family: 'TTFirsNeue';}

h3{ font-size:24px; line-height:normal; font-weight:normal; margin-bottom:30px;font-family: 'TTFirsNeue'; }

h4{ font-size:18px; line-height:normal; font-weight:normal;}

h5{ font-size:15px; line-height:26px; font-weight:normal; }

h6{ font-size:13px; line-height:26px; font-weight:normal;}

.displayblock{ display:block !important; }

.displaynone{ display:none !important; }



.buttons{height:40px; line-height:40px; font-size:14px; padding:0 16px; margin-right:10px; background-color:rgba(0,0,0,0.2); color:#fff; letter-spacing:2px; transition:all 0.5s; text-transform:uppercase; display:inline-block; border-radius:15px;}

.buttons:hover, .buttons.active{background-color:#3548F9}



#header{position:fixed; left:0; top:40px; right:0; z-index:999;}

.logo{position:absolute; left:50%; transform:translateX(-50%); transition:all 0.7s;}

.logo img{display:block; height:48px; width:auto;}

.nav-open .logo{opacity:0;}

#header .left_Sections{float:left; transition:all 0.7s;}

.nav-open .left_Sections{opacity:0;}

#header .right_Sections{float:right;}

.nav-open .right_Sections a{opacity:0;}

#header .right_Sections a{transition:all 0.7s;}

.hamburger{height:30px; padding:5px 12px; margin-right:10px; background-color:rgba(0,0,0,0.2); float:right; border-radius:8px; transition:all 0.5s;}

.hamburger:hover, .hamburger.is-active{background-color:#3548F9}

.hamburger.is-active{color:#3548F9; background-color:rgba(255,255,255,0.8)}

.hamburger .line{width: 30px; height: 3px; background-color: #ecf0f1; display: block; margin:5px auto; transition: all 0.3s ease-in-out;}

.hamburger.is-active .line{background:#3548F9;}

.hamburger:hover{cursor: pointer;}

.hamburger.is-active .line:nth-child(2){opacity: 0;}

.hamburger.is-active .line:nth-child(1){transform:translateY(8px) rotate(45deg);}

.hamburger.is-active .line:nth-child(3){transform:translateY(-8px) rotate(-45deg);}



nav{position:fixed; left:0; top:0; width:100%; height:100%; background-color:#3548F9; z-index:998; display:none; animation-name:fade-in; animation-duration:0.7s;}

nav .container{height:100%;}

.nav-open nav{display:block;}

nav .nav_logo{position:absolute; left:0; top:40px; animation-name:fade-in-left; animation-duration:0.7s;}

.nav-open nav .nav_logo{transform:none; opacity:1;}

nav .nav_logo img{height:48px; display:block; width:auto;}

nav ul{position:absolute; right:0; bottom:80px; text-align:right;}

nav ul li{font-size:42px; line-height:48px; padding:15px 0; text-transform:uppercase; font-weight:bold; float:right; clear:both; position:relative; display:none; opacity: 0; transform:translateX(200px); animation-name:fade-in-right-menu; animation-duration:0.6s; animation-delay:0.5s; animation-fill-mode:forwards;}

.nav-open nav ul li{display:block;}

nav ul li{animation-delay:0.55s;}

nav ul li:nth-child(2){animation-delay:0.7s;}

nav ul li:nth-child(3){animation-delay:0.85s;}

nav ul li:nth-child(4){animation-delay:1.05s;}

nav ul li:nth-child(5){animation-delay:1.2s;}

nav ul li:nth-child(6){animation-delay:1.35s;}

nav ul li:nth-child(7){animation-delay:1.5s;}

nav ul li:nth-child(8){animation-delay:1.65s;}

nav ul li a{color:#fff; position:relative; display:inline-block; font-family: 'TTFirsNeue';}

nav ul li a:after{content:""; position:absolute; bottom:0; right:0; width:0; height:1px; transition:all 0.5s; background-color:#fff;}

nav ul li a:hover:after{width:100%;}









@keyframes fade-in {

  0%   { opacity: 0; }

  100% { opacity: 1; }

}





@keyframes fade-in-left {

  0%   { opacity: 0; transform:translateX(-70px)}

  100% { opacity: 1; transform:none;}

}

@keyframes fade-in-right {

  0%   { opacity: 0; transform:translateX(70px)}

  100% { opacity: 1; transform:none;}

}

@keyframes fade-in-right-menu {

  0%   { opacity: 0; transform:translateX(150px)}

  100% { opacity: 1; transform:none;}

}



#banner{height:100vh; position:relative; background-color:#3548F9; overflow:hidden;}

#banner .container{height:100%; z-index:2;}

#banner.blue{ background-color:#302F3A;}

#banner h1{position:absolute; left:8%; top:30%; width:44%; color:#fff;}

#banner h1 .event-date{font-size:18px; font-weight:normal;}
#banner p{position:absolute; right:10%; top:30%; width:30%; padding-top:5px; color:#fff;}

#banner:after{content:""; position:absolute; left:50%; bottom:30px; height:calc(50vh - 120px); width:1px; transform:translateX(-50%); background-color:#fff; opacity:0.5}



#gradient-canvas{width:100%; height:100%; position:absolute; left:0; top:0;

  --gradient-color-1: #3548F9; 

  --gradient-color-2: #00E089; 

  --gradient-color-3: #302F3A;  

  --gradient-color-4: #00DFD9; 

  --gradient-color-5: #fff;

}



#event_list{position:relative;}

#event_list .articles{ position:relative;}

#event_list .articles:after{content:""; display:block; clear:both;}

#event_list .articles .article_thumb{width:42%; height:100%; left:0; top:0; overflow:hidden; float:left; position:absolute; background-size:40vw auto; background-position:left top; background-attachment:fixed; background-repeat:no-repeat;}

#event_list .articles .article_thumb img{display:block; width:100%; height:100%; object-fit:cover; opacity:0;}

#event_list .articles .article_thumb a{position:absolute; z-index:2; top:50%; left:50%; transform:translate(-50%,-50%); background-color:rgb(53 72 249 / 30%); backdrop-filter: blur(11px); border-radius:24px; color:#fff; padding:20px; font-size:14px; line-height:18px; text-align:center; opacity:0.9; transition:all 0.5s}

#event_list .articles .article_thumb a:hover{background-color:rgb(53 72 249 / 100%); opacity:1;}

#event_list .articles .article_content{float:right; width:60%; float:right; min-height:70vh; background-color:#fff; position:relative;}

#event_list .articles .article_content .wrap{padding:80px;}

#event_list .articles .article_content h3{font-size:36px; line-height:46px;}

#event_list .articles .article_content date{font-size:14px;}

#event_list .articles .article_content a{color:#3548F9; text-decoration:underline;}

#event_list .articles .article_content a:hover{text-decoration:none;}

#event_list .articles .article_content .buttons{margin-top:40px; padding:0 30px; background-color:rgb(53 72 249 / 5%); text-decoration:none; backdrop-filter: blur(11px);}

#event_list .articles .article_content .buttons:hover{background-color:rgb(53 72 249 / 100%); color:#fff;}
#event_list .articles .article_content ul, #event_list .articles .article_content ol{list-style-position:inside; margin-top:0; margin-bottom:30px;}




#event_list .articles:nth-child(2n) .article_content{background-color:#3548F9; color:#fff;}

#event_list .articles:nth-child(2n) .article_content p{color:#D8D8D8;}

#event_list .articles:nth-child(2n) .article_content a{color:#fff;}

#event_list .articles:nth-child(2n) .article_content .buttons{background-color:rgb(255 255 255 / 10%); color:#fff;}

#event_list .articles:nth-child(2n) .article_content .buttons:hover{background-color:#fff; color:#3548F9;}



#instafed{padding:80px 0; background-color:#F9F9FB}

#instafed ul li{width:32%; height:auto; float:left; background-color:#3548F9;}

#instafed ul li img{width:100%; display:block; transition:all 0.5s;}

#instafed ul li a:hover img{opacity:0.5;}

#instafed ul li:nth-child(2n){margin:0 2%;}

#instafed h3{text-align:center; padding-top:15px; margin:0; clear:both; color:#989898; font-size:22px; line-height:30px;}

#instafed h3 a{color:#3548F9;}



#sponsors{padding:60px 0;}

#sponsors .columns{width:calc(100% / 3); float:left; padding:40px 0;}
#sponsors .columns:nth-child(3n+1){clear:left;}

#sponsors .columns h3{margin-bottom:10px; max-width:75%;}

#sponsors .columns p{margin-bottom:0; max-width:70%; font-size:13px; line-height:18px; color:#302F3A;}

#sponsors .columns p a{color:#3548F9;}

#sponsors .columns img{height:80px; width:auto; max-width:50%; object-fit:contain; object-position:left; display:block; margin-bottom:30px;}



#team{padding:60px 0;}

#team .columns{width:calc(100% / 3); float:left; padding:40px 0;}

#team .columns h3{margin-bottom:10px; max-width:75%;}
#team .columns h4{margin-bottom:0; font-size:16px; color:#302F3A;}

#team .columns p{margin-bottom:0; max-width:80%; font-size:13px; line-height:18px; color:#302F3A;}

#team .columns p a{color:#3548F9;}

#team .columns .img_box{width:75%; height:auto; overflow:hidden; border-radius:30px; margin-bottom:30px; background-color:#302F3A;}
#team .columns .img_box img{width:100%; display:block;}





.footer{width: 100%;position: relative;background-color:#3548fe;overflow: hidden;padding: 60px 0px 120px 0px;}

.footer .footer-inner-sec{position: relative; margin: 0 auto}

.footer-inner-sec .footer-left{width: calc(40% - 20px);

    position: relative;

    float: left;padding-right: 30px;}

.footer-left img{height:45px;}

.footer-inner-sec .footer-middle{width: calc(30% - 20px);float: left;color: #ffffff;padding-right:60px;}

.footer-inner-sec .footer-right{width: calc(25% - 20px);float: left;color: #ffffff;}

.footer-middle ul li a{color: #ffffff;font-size: 18px;line-height: 35px;}

.footer-right ul li a{ color: #ffffff;font-size: 18px;line-height: 35px;}

.footer-right ul li a:hover{color:#3548fe;}

.footer-middle ul li a:hover{color:#3548fe;}
.footer-inner-sec a{color:#fff;}
.footer-inner-sec h3 a{color:#fff; border-bottom:solid 1px #fff;}
.footer-inner-sec h3 a:hover{color:#fff; border-bottom:solid 1px #7d84c0;}



/*.footer-middle-blue ul li .social-link{height:30px;}

.footer-middle-blue ul li .social-link-green{height:30px;}*/

/*.footer-middle-blue ul li .social-icon:hover.social-link{display:none;}

.footer-middle-blue ul li .social-icon:hover.social-link-green{display:block;}

.footer-middle-blue ul li .social-link-green{display:none;}*/

.foo img{height:30px;}

.foo img:last-child{display:none;height:30px;tarnsition:all 0.4s;}

.foo:hover img:first-child{display:none;height:30px;}

.foo:hover img:last-child{display:inline-block;}



.home_section1{margin:10px 0; overflow:hidden;}

.home_section1:after{content:""; display:block; clear:both;}

.home_section1 iframe{

   width: 100%;

   height: 100%; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */

   min-height: 80vh;

   min-width: 100%; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */

   position: absolute;

   top: 50%;

   left: 50%;

   transform: translate(-50%, -50%);}

.home_section1 .video-playing iframe{opacity:1; z-index:3;}

.sec1_col1{width:70%; height:80vh; position:relative; float:left}

.sec1_col1 img{position:relative; width:100%; height:100%; display:block; object-fit:cover;}

.home_section1 .video-playing.sec1_col1 img{opacity:0;}

.sec1_col1 a{position:absolute; z-index:2; top:50%; left:50%; transform:translate(-50%,-50%); background-color:rgb(53 72 249 / 30%); backdrop-filter: blur(11px); border-radius:24px; color:#fff; padding:15px 30px; font-size:14px; line-height:18px; text-align:center; opacity:0.9; transition:all 0.5s; z-index:2;}

.sec1_col1 a:hover{background-color:rgb(53 72 249 / 100%);}



.sec1_col2{float:right; width:calc(30% - 10px); height:80vh; background-color:#3548fe; position:relative;}

.sec1_col2 img{position:relative; width:100%; height:100%; display:block; object-fit:cover;}

.sec1_col2 .events_cal{position:absolute; left:40px; top:40px; font-size:16px; opacity:0.8; color:#fff;}

.sec1_col2 .nxt_ev{position:absolute; left:40px; top:200px; font-size:16px;}



.sec1_col2 .events_cal a, .sec1_col2 .nxt_ev a{color:#fff; opacity:0.5;}

.sec1_col2 .events_cal a:hover, .sec1_col2 .nxt_ev a:hover{opacity:1;}

.sec1_col2 .event_details{height:40vh; padding:40px 0; margin:0 40px; box-sizing:border-box; color:#fff; border-bottom:solid 1px #5b6afe}

.sec1_col2 .event_details .event_date{font-size:16px;}

.sec1_col2 .event_details h3{font-size:24px; line-height:32px; margin:15px 0;}

.sec1_col2 .event_details .date_loc{font-size:18px; line-height:32px; margin:15px 0;}


.sponsers_Sec{background-color:#302F3A; padding:80px 40px; text-align:center;}

.sponsers_Sec h2{color:#fff; font-size:42px; margin-bottom:40px;}

.sponsers_Sec .spn_logos{text-align:center;}

.sponsers_Sec .spn_logos:after{content:""; display:block; clear:both;}

.sponsers_Sec .spn_logos img{height:90px; width:15%; margin:100px 5%; display:inline-block; object-fit:contain;}

.sponsers_Sec .spn_logos img:first-child{margin-left:0;}



.cols3{margin:10px 0;}

.cols3:after{content:""; display:block; clear:both;}

.cols3 .col_wrap{float:left; width:32.5%; height:80vh; position:relative;}

.cols3 .col_wrap:nth-child(2){margin:0 1%;}

.cols3 .col_wrap img{display:block; width:100%; height:100%; object-fit:cover;}

.cols3 .col_wrap .details{position:absolute; left:0; bottom:40px; width:100%; color:#fff; text-align:center;}

.cols3 .col_wrap .details h3{font-size:42px; margin:15px 0}

.calendar-blog{padding:10px 0; overflow:hidden;}
.calendar-blog:after{content:""; display:block; clear:both;}
.calendar-blog .columns{width:50%; float:left; position:relative; min-height:100vh;}
.calendar-blog .col_wrap{height:100vh; position:relative; background-color:#090b23}
.calendar-blog .col_wrap img{display:block; width:100%; height:100%; object-fit:cover; opacity:0.3;}
.calendar-blog .col_wrap .details{position:absolute; left:5vw; bottom:40px; width:100%; color:#fff;}
.calendar-blog .col_wrap .details h3{font-size:42px; margin:15px 0}

.calendar_wrap{padding:5vw; position:absolute; left:0; top:50%; transform:translateY(-50%); right:0;}
.calendar_wrap h4{color:#302F3A80; margin-bottom:30px;}
.calendar_wrap h3{margin-bottom:20px;}
.calendar_wrap .calendar_archive{display:block; border-top:1px solid #494949; margin-bottom:40px;}
.calendar_wrap .calendar_archive li{display:block; border-bottom:1px solid #494949; padding:15px 0; font-size:16px; line-height:20px; color:#302F3A}
.calendar_wrap .calendar_archive li:after{content:""; display:block; clear:both;}
.calendar_wrap .calendar_archive li .calendar_item{display:flex; cursor:pointer;}
.calendar_wrap .calendar_archive li .calendar_item div{padding-left:15px; width:24%; box-sizing:border-box; font-size:14px;}
.calendar_wrap .calendar_archive li .calendar_item div:first-of-type{padding-left:0; width:46%;}
.calendar_wrap .calendar_archive li .calendar_item div:last-of-type{text-align:right;}
.calendar_wrap .calendar_archive li a{color:#3548F9; border-bottom:solid 1px #3548F9;}
.calendar_wrap .calendar_archive li a:hover{border-bottom:solid 1px #fff;}

.calendar_details{display:flex; padding:0; align-items:center; height:0px; min-height:0; transition:all 0.5s; opacity:0; overflow:hidden;}
.calendar_wrap .calendar_archive li.is-active .calendar_details{height:auto; min-height:160px; opacity:1; padding:20px 0;}
.calendar_item_thumb{width:40%;}
.calendar_item_thumb img{width:100%; display:block;}
.calendar_item_details{width:60%; padding-left:20px; box-sizing:border-box;}

.gallery1{position:fixed; left:0; top:0; width:100%; height:100%; z-index:999; background-color:rgba(0,0,0,0.9); display:none; animation-name:fade-in; animation-duration:0.7s;}

.gallery1.show{display:block;}



.gal_wrap{position:relative; margin:40px;}

.gal_wrap img{height:calc(100vh - 80px); width:80%; margin:0 auto; display:block; left:0; top:0; object-fit:contain;}

.control-wrapper{position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border:solid 1px #fff; border-radius:50%; z-index:3; }

.control-wrapper a{font-size:0; background-size:20px; background-position:center; background-repeat:no-repeat; border-radius:50%; display:block; width:48px; height:48px; transition:all 0.5s;}

.control-wrapper a:hover{background-color:#3548F9;}

.prev-control-wrapper{left:40px;}

.prev-control-wrapper a{background-image:url(assets/images/prev-slide.svg);}

.next-control-wrapper{right:40px;}

.next-control-wrapper a{background-image:url(assets/images/next-slide.svg);}



.close_slider{position:absolute; left:30px; top:50px; padding-left:26px; font-size:14px; line-height:18px; text-decoration:none; color:#fff; z-index:9999}

.close_slider:before{content:""; width:16px; height:16px; position:absolute; left:0; background-image:url(assets/images/close_slider.svg); background-size:contain; background-repeat:no-repeat;}




.animation-element{opacity:0; transform:translateY(60px); transition:all 1s;}
.animation-element.in-view{opacity:1; transform:none;}

.contact_section{padding:80px 0;}
.contact_section:after{content:""; display:block; clear:both;}
.contact_left{float:left; width:40%;}
.contact_left a{text-decoration:underline; color:inherit;}
.contact_left a:hover{text-decoration:none;}
.contact_form{width:40%; float:left; margin-left:10%;}
.form-group{margin-bottom:10px;}
input[type=text], input[type=email], input[type=tel], textarea{border:none; border-bottom:solid 1px #b9b8c5; background-color:#fff; border-radius:0; outline:none; width:100%; height:40px; transition:all 0.4s; box-sizing:border-box;}
input[type=text]:focus, input[type=email]:focus, input[type=tel]:focus, textarea:focus{background-color:#f2f1ff; padding-left:15px;}
textarea{height:120px; padding-top:15px;}
input[type=submit]{border:none; cursor:pointer; padding:0 20px; background-color:#3548fe}
input[type=submit]:hover{opacity:0.5;}